/* ============================================================
   Unified Design Tokens — 统一设计令牌
   所有 CSS 文件和 AdminPanel 共享此令牌体系。
   通过 [data-theme] 属性切换亮/暗主题。
   ============================================================ */

/* ====== Light Theme (Default) ====== */
:root,
[data-theme="light"] {
    /* ---- 基础背景 ---- */
    --dt-bg:              #fafafa;
    --dt-surface:         #ffffff;
    --dt-surface-hover:   #f5f5f5;
    --dt-surface-elevated:#ffffff;

    /* ---- 边框 ---- */
    --dt-border:          #e0e0e0;
    --dt-border-light:    #eeeeee;

    /* ---- 文字 ---- */
    --dt-text-primary:    #212121;
    --dt-text-secondary:  #616161;
    --dt-text-tertiary:   #9e9e9e;
    --dt-text-inverse:    #ffffff;

    /* ---- 品牌/强调色 ---- */
    --dt-primary:         #1976d2;
    --dt-primary-hover:   #1565c0;
    --dt-primary-light:   #e3f2fd;
    --dt-primary-text:    #ffffff;

    /* ---- 语义色 ---- */
    --dt-success:         #2e7d32;
    --dt-success-light:   #e8f5e9;
    --dt-warning:         #ed6c02;
    --dt-warning-light:   #fff3e0;
    --dt-danger:          #d32f2f;
    --dt-danger-light:    #ffebee;
    --dt-info:            #0288d1;
    --dt-info-light:      #e1f5fe;

    /* ---- 阴影 ---- */
    --dt-shadow-sm:       0 1px 3px rgba(0,0,0,0.08);
    --dt-shadow-md:       0 4px 12px rgba(0,0,0,0.1);
    --dt-shadow-lg:       0 8px 24px rgba(0,0,0,0.12);

    /* ---- 圆角 ---- */
    --dt-radius-sm:       6px;
    --dt-radius-md:       8px;
    --dt-radius-lg:       12px;
    --dt-radius-xl:       16px;

    /* ---- 间距（4px 基准） ---- */
    --dt-space-xs:        4px;
    --dt-space-sm:        8px;
    --dt-space-md:        12px;
    --dt-space-lg:        16px;
    --dt-space-xl:        20px;
    --dt-space-2xl:       24px;
    --dt-space-3xl:       32px;

    /* ---- 字体 ---- */
    --dt-font-xs:         11px;
    --dt-font-sm:         12px;
    --dt-font-md:         13px;
    --dt-font-lg:         14px;
    --dt-font-xl:         16px;
    --dt-font-2xl:        18px;

    /* ---- 过渡 ---- */
    --dt-transition-fast: 0.15s ease;
    --dt-transition-md:   0.2s ease;
    --dt-transition-slow: 0.3s ease;

    /* ---- 控件 ---- */
    --dt-input-bg:        #ffffff;
    --dt-input-border:    #e0e0e0;
    --dt-input-focus:     #1976d2;
    --dt-input-placeholder: #9e9e9e;

    /* ---- 视频/媒体 ---- */
    --dt-video-bg:        #1a1a1a;

    /* ---- 特殊用途 ---- */
    --dt-overlay-bg:      rgba(0,0,0,0.5);
    --dt-disabled-opacity: 0.45;
}

/* ====== Dark Theme ====== */
[data-theme="dark"] {
    /* ---- 基础背景 ---- */
    --dt-bg:              #121212;
    --dt-surface:         #1e1e1e;
    --dt-surface-hover:   #2a2a2a;
    --dt-surface-elevated:#2d2d2d;

    /* ---- 边框 ---- */
    --dt-border:          #404040;
    --dt-border-light:    #333333;

    /* ---- 文字 ---- */
    --dt-text-primary:    #e5e5e5;
    --dt-text-secondary:  #999999;
    --dt-text-tertiary:   #666666;
    --dt-text-inverse:    #212121;

    /* ---- 品牌/强调色 ---- */
    --dt-primary:         #4cc2ff;
    --dt-primary-hover:   #62cdff;
    --dt-primary-light:   rgba(76,194,255,0.1);
    --dt-primary-text:    #121212;

    /* ---- 语义色 ---- */
    --dt-success:         #6ccb5f;
    --dt-success-light:   rgba(108,203,95,0.12);
    --dt-warning:         #ffb900;
    --dt-warning-light:   rgba(255,185,0,0.12);
    --dt-danger:          #ff6767;
    --dt-danger-light:    rgba(255,103,103,0.12);
    --dt-info:            #4cc2ff;
    --dt-info-light:      rgba(76,194,255,0.12);

    /* ---- 阴影 ---- */
    --dt-shadow-sm:       0 1px 3px rgba(0,0,0,0.3);
    --dt-shadow-md:       0 4px 12px rgba(0,0,0,0.4);
    --dt-shadow-lg:       0 8px 24px rgba(0,0,0,0.5);

    /* ---- 圆角（与亮色一致） ---- */
    --dt-radius-sm:       6px;
    --dt-radius-md:       8px;
    --dt-radius-lg:       12px;
    --dt-radius-xl:       16px;

    /* ---- 间距（与亮色一致） ---- */
    --dt-space-xs:        4px;
    --dt-space-sm:        8px;
    --dt-space-md:        12px;
    --dt-space-lg:        16px;
    --dt-space-xl:        20px;
    --dt-space-2xl:       24px;
    --dt-space-3xl:       32px;

    /* ---- 字体（与亮色一致） ---- */
    --dt-font-xs:         11px;
    --dt-font-sm:         12px;
    --dt-font-md:         13px;
    --dt-font-lg:         14px;
    --dt-font-xl:         16px;
    --dt-font-2xl:        18px;

    /* ---- 过渡（与亮色一致） ---- */
    --dt-transition-fast: 0.15s ease;
    --dt-transition-md:   0.2s ease;
    --dt-transition-slow: 0.3s ease;

    /* ---- 控件 ---- */
    --dt-input-bg:        #2d2d2d;
    --dt-input-border:    #404040;
    --dt-input-focus:     #4cc2ff;
    --dt-input-placeholder: #666666;

    /* ---- 视频/媒体 ---- */
    --dt-video-bg:        #000000;

    /* ---- 特殊用途 ---- */
    --dt-overlay-bg:      rgba(0,0,0,0.7);
    --dt-disabled-opacity: 0.4;
}

/* ============================================================
 * GSAP Fallback Animations — Cross-Browser Compatibility Edition
 *
 * 兼容性目标：
 *   - 现代浏览器（Chrome/Firefox/Safari/Edge 最新±2）：完整动画
 *   - IE 11 / IE 10：基础动画（@keyframes 支持，需 -ms- 前缀）
 *   - IE 9 及以下：静态终态（不支持 @keyframes，通过 @supports 降级）
 *   - 旧 Android（4.3-）/ iOS 8-：-webkit- 前缀
 *
 * 性能优化：
 *   1. 所有动画仅使用 transform + opacity（GPU 合成层，零重排）
 *   2. shimmer 用 transform: translateX() 替代 background-position
 *   3. hover 阴影用伪元素 overlay 替代 box-shadow 动画
 *   4. contain: layout style paint 隔离动画影响范围
 *   5. will-change 提示（仅对无限循环动画）
 *
 * 这些类只在 fallback 激活时由 AnimationEngine 注入到元素上。
 * ============================================================ */

/* ============================================================
 * 一、无限循环动画（shimmer / spin / pulse）
 * 用 @keyframes 实现，避免 JS 定时器堆积。
 * 同时提供 -webkit- 前缀版本（旧 WebKit）和 -ms- 前缀（IE10）。
 * ============================================================ */

/* ===== 骨架屏闪烁 =====
 * 优化：用 transform: translateX() 替代 background-position
 * 原因：background-position 触发重绘，transform 走 GPU 合成层
 * 实现：背景图固定，容器 overflow:hidden，伪元素平移
 */
.gsap-fallback-shimmer {
    position: relative;
    overflow: hidden;
    -webkit-animation: gsap-fallback-shimmer-anim 1.5s linear infinite !important;
    animation: gsap-fallback-shimmer-anim 1.5s linear infinite !important;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gsap-fallback-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    pointer-events: none;
}

@-webkit-keyframes gsap-fallback-shimmer-anim {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}

@keyframes gsap-fallback-shimmer-anim {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* ===== 旋转加载 =====
 * transform-origin 显式声明，兼容 Safari 旧版默认 0 0
 */
.gsap-fallback-spin {
    -webkit-animation: gsap-fallback-spin-anim 0.8s linear infinite !important;
    animation: gsap-fallback-spin-anim 0.8s linear infinite !important;
    -webkit-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    transform-origin: center center !important;
    will-change: transform;
}

@-webkit-keyframes gsap-fallback-spin-anim {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}

@keyframes gsap-fallback-spin-anim {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* ===== 脉冲（状态指示器）===== */
.gsap-fallback-pulse {
    -webkit-animation: gsap-fallback-pulse-anim 0.6s ease-in-out infinite alternate !important;
    animation: gsap-fallback-pulse-anim 0.6s ease-in-out infinite alternate !important;
    -webkit-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    transform-origin: center center !important;
    will-change: transform;
}

@-webkit-keyframes gsap-fallback-pulse-anim {
    from { -webkit-transform: scale(1); }
    to   { -webkit-transform: scale(var(--gsap-fallback-pulse-scale, 1.05)); }
}

@keyframes gsap-fallback-pulse-anim {
    from { -webkit-transform: scale(1); transform: scale(1); }
    to   { -webkit-transform: scale(var(--gsap-fallback-pulse-scale, 1.05)); transform: scale(var(--gsap-fallback-pulse-scale, 1.05)); }
}

/* ============================================================
 * 二、卡片 hover 微动效
 * 优化：box-shadow 动画会触发重绘，改用伪元素 overlay
 * 原理：阴影层独立合成，hover 时仅 opacity 变化
 * ============================================================ */
.gsap-fallback-hover {
    position: relative;
    -webkit-transition: -webkit-transform 0.2s ease !important;
    transition: transform 0.2s ease !important;
    will-change: transform;
}

.gsap-fallback-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    z-index: -1;
}

.gsap-fallback-hover:hover {
    -webkit-transform: translateY(-2px) scale(1.01);
    -ms-transform: translateY(-2px) scale(1.01);
    transform: translateY(-2px) scale(1.01);
}

.gsap-fallback-hover:hover::before {
    opacity: 1;
}

/* ============================================================
 * 三、触屏波纹反馈（一次性）
 * ============================================================ */
.gsap-fallback-ripple {
    -webkit-animation: gsap-fallback-ripple-anim 0.5s ease-out forwards !important;
    animation: gsap-fallback-ripple-anim 0.5s ease-out forwards !important;
    -webkit-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    transform-origin: center center !important;
    will-change: transform, opacity;
}

@-webkit-keyframes gsap-fallback-ripple-anim {
    from { -webkit-transform: scale(0); opacity: 1; }
    to   { -webkit-transform: scale(1); opacity: 0; }
}

@keyframes gsap-fallback-ripple-anim {
    from { -webkit-transform: scale(0); transform: scale(0); opacity: 1; }
    to   { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
}

/* ============================================================
 * 四、按钮按压反馈
 * 用 :active 伪类 + transition 实现，零 JS 开销
 * ============================================================ */
.gsap-fallback-press {
    -webkit-transition: -webkit-transform 0.08s ease !important;
    transition: transform 0.08s ease !important;
    -webkit-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    transform-origin: center center !important;
}

.gsap-fallback-press:active {
    -webkit-transform: scale(0.94);
    -ms-transform: scale(0.94);
    transform: scale(0.94);
}

/* ============================================================
 * 五、降级通知横幅
 * backdrop-filter 不支持时降级为不透明背景
 * ============================================================ */
.gsap-fallback-notice {
    position: fixed;
    left: 50%;
    bottom: 24px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 99998;
    max-width: 560px;
    padding: 12px 18px;
    border-radius: 10px;
    /* backdrop-filter 不支持时此背景已足够不透明 */
    background: rgba(31, 41, 55, 0.96);
    color: #fbbf24;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    /* 双重声明：-webkit- 在前，标准在后，确保旧 Safari 也能用 */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    -webkit-animation: gsap-fallback-notice-in 0.3s ease-out;
    animation: gsap-fallback-notice-in 0.3s ease-out;
    /* 隔离动画影响范围，避免引发兄弟元素重排 */
    contain: layout style;
}

.gsap-fallback-notice-dismiss {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    -webkit-transition: background 0.15s ease;
    transition: background 0.15s ease;
}

.gsap-fallback-notice-dismiss:hover {
    background: rgba(251, 191, 36, 0.15);
}

@-webkit-keyframes gsap-fallback-notice-in {
    from { opacity: 0; -webkit-transform: translate(-50%, 20px); }
    to   { opacity: 1; -webkit-transform: translate(-50%, 0); }
}

@keyframes gsap-fallback-notice-in {
    from { opacity: 0; -webkit-transform: translate(-50%, 20px); transform: translate(-50%, 20px); }
    to   { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
}

/* ============================================================
 * 六、@supports 条件降级
 *
 * 1. 不支持 @keyframes / animation 的浏览器（IE9-）：
 *    - shimmer 静态显示（无闪烁，背景渐变可见即可）
 *    - spin 静态旋转 0deg（不旋转，但元素可见）
 *    - pulse 静态 scale(1)（无脉冲，但元素可见）
 *    - notice 直接显示无入场动画
 *
 * 2. 不支持 backdrop-filter 的浏览器（IE 全系、旧 Edge）：
 *    - 通知背景已设为 0.96 不透明，无需额外处理
 *
 * 3. 不支持 transform 的浏览器（IE8-）：
 *    - hover/press 无效果，但元素仍可交互（渐进增强）
 * ============================================================ */

/* IE9- 不支持 @keyframes，提供静态终态 */
@supports not (animation-name: none) {
    .gsap-fallback-shimmer,
    .gsap-fallback-spin,
    .gsap-fallback-pulse,
    .gsap-fallback-ripple {
        -webkit-animation: none !important;
        animation: none !important;
        /* 静态终态：元素可见，无动效 */
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
    }

    .gsap-fallback-notice {
        -webkit-animation: none !important;
        animation: none !important;
        opacity: 1 !important;
    }
}

/* 不支持 backdrop-filter 的浏览器：背景已足够不透明，无需额外规则 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .gsap-fallback-notice {
        /* 提高 alpha 到完全不透明，避免模糊缺失导致文字难读 */
        background: rgba(31, 41, 55, 1);
    }
}

/* ============================================================
 * 七、prefers-reduced-motion 无障碍降级
 * 用户开启减少动效时，所有动画瞬间完成
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .gsap-fallback-shimmer,
    .gsap-fallback-spin,
    .gsap-fallback-pulse {
        -webkit-animation-duration: 0.001s !important;
        animation-duration: 0.001s !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }

    .gsap-fallback-ripple,
    .gsap-fallback-notice {
        -webkit-animation: none !important;
        animation: none !important;
    }

    .gsap-fallback-hover,
    .gsap-fallback-hover:hover,
    .gsap-fallback-press,
    .gsap-fallback-press:active {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* ============================================================
 * 八、性能隔离容器
 * 对动画密集的容器应用 contain，避免重排扩散
 * 用法：在列表/卡片容器上添加 class="gsap-fallback-container"
 * ============================================================ */
.gsap-fallback-container {
    contain: layout style paint;
    -webkit-contain: layout style paint;
    /* IE11 不支持 contain，但也不会报错（属性被忽略） */
}

/* ====== Backward-compatible aliases for legacy variables ====== */
:root,
[data-theme="light"] {
    --main-bg-color: var(--dt-bg);
    --stream-bg-color: hsl(0, 0%, 85%);
    --shell-bg-color: hsl(0, 0%, 0%);
    --text-shadow-color: hsl(218, 67%, 95%);
    --header-bg-color: var(--dt-surface);
    --controls-bg-color: hsla(0, 0%, 95%, 0.8);
    --control-buttons-bg-color: var(--dt-surface);
    --text-color: var(--dt-text-primary);
    --text-color-light: var(--dt-text-secondary);
    --link-color: var(--dt-primary);
    --link-color-light: hsl(218, 85%, 73%);
    --link-color_visited: hsl(271, 68%, 32%);
    --link-color_visited-light: hsl(271, 68%, 72%);
    --svg-checkbox-bg-color: hsl(172, 100%, 37%);
    --svg-button-fill: hsl(199, 17%, 46%);
    --kill-button-hover-color: var(--dt-danger);
    --url-color: var(--dt-text-tertiary);
    --button-text-color: var(--dt-primary);
    --button-border-color: var(--dt-border);
    --progress-background-color: hsla(225, 100%, 50%, 0.2);
    --progress-background-error-color: hsla(0, 100%, 50%, 0.2);
    --font-size: var(--dt-font-lg);
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-bg-color: hsl(0, 0%, 14%);
        --stream-bg-color: hsl(0, 0%, 20%);
        --shell-bg-color: hsl(0, 0%, 0%);
        --text-shadow-color: hsl(218, 17%, 18%);
        --header-bg-color: hsl(0, 0%, 20%);
        --controls-bg-color: hsla(201, 18%, 19%, 0.8);
        --control-buttons-bg-color: hsl(201, 18%, 19%);
        --text-color: hsl(0, 0%, 90%);
        --text-color-light: hsl(0, 0%, 60%);
        --link-color: hsl(218, 63%, 70%);
        --link-color-light: hsl(218, 63%, 50%);
        --link-color_visited: hsl(267, 31%, 47%);
        --link-color_visited-light: hsl(267, 31%, 27%);
        --svg-checkbox-bg-color: hsl(172, 100%, 27%);
        --svg-button-fill: hsl(0, 0%, 100%);
        --kill-button-hover-color: hsl(342, 100%, 27%);
        --url-color: hsl(0, 0%, 60%);
        --device-list-stripe-color: hsl(0, 0%, 16%);
        --device-list-default-color: hsl(0, 0%, 14%);
        --button-text-color: hsl(214, 82%, 76%);
        --button-border-color: hsl(213, 5%, 39%);
        --progress-background-color: hsla(225, 100%, 50%, 0.2);
        --progress-background-error-color: hsla(0, 100%, 50%, 0.2);
    }
}

html {
    font-size: var(--font-size);
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-color_visited);
}

body {
    color: var(--text-color);
    background-color: var(--main-bg-color);
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}


body.shell {
    background-color: var(--shell-bg-color);
}

body.stream {
    background-color: var(--stream-bg-color);
}

.terminal-container {
    width: 100%;
    height: 100%;
    padding: 5px;
}

:focus {
    outline: none;
}

.flex-center {
    display: flex;
    align-items: center;
}

.wait {
    cursor: wait;
}

.device-view {
    z-index: 1;
    float: right;
    display: inline-block;
    position: relative;
    /* 移动端适配 */
    max-width: 100vw;
    max-height: 100vh;
    /* 确保不影响子元素交互 */
    pointer-events: none;
}

.device-view > * {
    pointer-events: auto; /* 恢复子元素的点击事件 */
}

.video-layer {
    position: absolute;
    z-index: 0;
    /* 画质优化 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    transform: translateZ(0);  /* 启用GPU加速 */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    /* 高质量缩放 */
    -webkit-transform: scale3d(1,1,1); /* 启用硬件加速 */
    transform-style: preserve-3d;
}

.touch-layer {
    position: absolute;
    z-index: 1;
}

.video {
    float: right;
    max-height: 100%;
    max-width: 100%;
    background-color: #000000;
    position: relative;
}

.floating-fullscreen-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.floating-fullscreen-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.floating-fullscreen-btn svg {
    width: 100%;
    height: 100%;
}

.device-view.fullscreen .floating-fullscreen-btn {
    display: none;
}


.control-buttons-list {
    float: right;
    width: 3.715rem;
    background-color: var(--control-buttons-bg-color);
    position: relative;
    z-index: 100; /* 确保控制按钮在视频层之上 */
}

.control-button {
    margin: .357rem .786rem;
    padding: 0;
    width: 2.143rem;
    height: 2.143rem;
    border: none;
    opacity: 0.75;
    background-color: var(--control-buttons-bg-color);
    position: relative;
    z-index: 101; /* 确保按钮可点击 */
    pointer-events: auto; /* 确保接收点击事件 */
}

.control-button:hover {
    opacity: 1;
}

.control-wrapper > input[type=checkbox] {
    display: none;
}

.control-wrapper > label {
    display: inline-block;
}

.control-button > svg {
    fill: var(--svg-button-fill);
}

.control-wrapper > input[type=checkbox].two-images:checked + label > svg.image-on {
    display: block;
}

.control-wrapper > input[type=checkbox].two-images:not(:checked) + label > svg.image-on {
    display: none;
}

.control-wrapper > input[type=checkbox].two-images:checked + label > svg.image-off {
    display: none;
}

.control-wrapper > input[type=checkbox].two-images:not(:checked) + label > svg.image-off {
    display: block;
}

.control-wrapper > input[type=checkbox]:checked + label > svg {
    fill: var(--svg-checkbox-bg-color);
}

.text-area {
    width: 100%;
    resize: vertical;
}

.more-box {
    display: none;
    position: absolute;
    background-color: var(--controls-bg-color);
    z-index: 2;
    padding: 0 .714rem .714rem .714rem;
}

.text-with-shadow, .more-box label {
    color: var(--text-color);
    text-shadow: var(--text-shadow-color) 0 0 .357rem;
}

.spoiler > input ~ .box {
    display: none;
}

.spoiler > input:checked ~ .box {
    display: block;
}

.spoiler > label::before {
    content: '►';
    margin-right: 5px;
}

.spoiler > input:checked ~ label::before {
    content: '▼';
}

.spoiler > input:checked ~ div {
    display: block;
    padding: 10px;
}

.spoiler > input {
    display: none;
}

/* Modern Toolbox Styles */

/* 
 * 只增强视觉效果，不改变布局和交互
 * 保持原有的 width、margin、padding 设置
 */

.control-buttons-list.control-wrapper {
    background: var(--panel-bg, rgba(30, 30, 30, 0.95));
    border-radius: 12px;
    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.1));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.control-buttons-list .control-button {
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.control-buttons-list .control-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.control-buttons-list .control-button:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}

.control-buttons-list .control-button svg {
    transition: fill 0.2s ease;
}

.control-buttons-list .control-button:hover svg {
    fill: var(--svg-checkbox-bg-color, #00d4aa);
}

/* Checkbox buttons (toggles) */
.control-wrapper > input[type=checkbox]:checked + label.control-button {
    background: rgba(0, 212, 170, 0.2);
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
    .control-buttons-list.control-wrapper {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(0, 0, 0, 0.08);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .control-buttons-list .control-button:hover {
        background: rgba(0, 0, 0, 0.05);
    }
    
    .control-buttons-list .control-button:active {
        background: rgba(0, 0, 0, 0.1);
    }
}

/* Animation for button press */
@keyframes buttonPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 212, 170, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 170, 0);
    }
}

.control-buttons-list .control-button.pulse {
    animation: buttonPulse 0.6s ease-out;
}

/* Modern Player Settings Panel */
/* Design tokens imported via app.css → design-tokens.css */

:root {
    --panel-bg: var(--dt-surface-elevated);
    --panel-border: var(--dt-border);
    --panel-shadow: var(--dt-shadow-lg);
    --accent-color: var(--dt-primary);
    --accent-hover: var(--dt-primary-hover);
    --accent-glow: var(--dt-primary-light);
    --text-primary: var(--dt-text-primary);
    --text-secondary: var(--dt-text-secondary);
    --text-muted: var(--dt-text-tertiary);
    --input-bg: var(--dt-input-bg);
    --input-border: var(--dt-input-border);
    --input-focus: var(--dt-input-focus);
    --danger-color: var(--dt-danger);
    --danger-hover: var(--dt-danger);
    --success-color: var(--dt-success);
    --warning-color: var(--dt-warning);
    --slider-track: var(--dt-border);
    --slider-fill: linear-gradient(90deg, var(--dt-primary), var(--dt-primary-hover));
    --transition-fast: var(--dt-transition-fast);
    --transition-normal: var(--dt-transition-md);
    --border-radius-sm: var(--dt-radius-sm);
    --border-radius-md: var(--dt-radius-md);
    --border-radius-lg: var(--dt-radius-xl);
}

@media (prefers-color-scheme: light) {
    :root {
        --panel-bg: var(--dt-surface);
        --panel-border: var(--dt-border);
        --panel-shadow: var(--dt-shadow-md);
        --text-primary: var(--dt-text-primary);
        --text-secondary: var(--dt-text-secondary);
        --text-muted: var(--dt-text-tertiary);
        --input-bg: var(--dt-input-bg);
        --input-border: var(--dt-input-border);
        --slider-track: var(--dt-border);
    }
}

/* Panel Container */
.modern-settings-panel {
    position: fixed;
    top: 20px;
    right: 80px;
    width: 320px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(20px) scale(0.95);
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
    pointer-events: none;
    visibility: hidden;
}

.modern-settings-panel.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
    visibility: visible;
}

/* Panel Header */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.panel-title-icon {
    width: 20px;
    height: 20px;
    fill: var(--accent-color);
}

.panel-close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.panel-close-btn:hover {
    background: var(--input-bg);
    color: var(--text-primary);
}

.panel-close-btn svg {
    width: 16px;
    height: 16px;
}

/* Panel Content */
.panel-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.panel-content::-webkit-scrollbar {
    width: 6px;
}

.panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.panel-content::-webkit-scrollbar-thumb {
    background: var(--input-border);
    border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Settings Section */
.settings-section {
    margin-bottom: 20px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--panel-border);
}

.section-icon {
    width: 16px;
    height: 16px;
    fill: var(--accent-color);
    opacity: 0.8;
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
    margin: 0;
}

.settings-card {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: var(--border-radius-md);
    margin-bottom: 8px;
}

.settings-card:last-child {
    margin-bottom: 0;
}

/* Tab Bar */
.tab-bar {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--panel-border);
}

.tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--accent-color);
    color: #000;
}

.tab-btn .tab-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.tab-btn .tab-label {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Tab Panel */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Option Label */
.option-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Option Group */
.option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.option-btn {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.option-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.option-btn.selected {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
}

/* Setting Item */
.setting-item {
    margin-bottom: 16px;
}

.setting-item:last-child {
    margin-bottom: 0;
}

.setting-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.setting-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.setting-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    background: var(--input-bg);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    min-width: 60px;
    text-align: center;
}

/* Modern Slider */
.modern-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--slider-track);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modern-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: all var(--transition-fast);
}

.modern-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: var(--accent-hover);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.modern-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: all var(--transition-fast);
}

.modern-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    background: var(--accent-hover);
}

.modern-slider:focus {
    box-shadow: 0 0 0 3px var(--input-focus);
}

/* Modern Input */
.modern-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-size: 13px;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.modern-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--input-focus);
}

.modern-input::placeholder {
    color: var(--text-muted);
}

/* Input Group */
.input-group {
    display: flex;
    gap: 10px;
}

.input-group .modern-input {
    flex: 1;
}

.input-suffix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-md);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

/* Modern Button */
.modern-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.modern-btn svg {
    width: 16px;
    height: 16px;
}

.modern-btn-primary {
    background: var(--accent-color);
    color: #000;
}

.modern-btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.modern-btn-secondary {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
}

.modern-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--text-muted);
}

.modern-btn-danger {
    background: var(--danger-color);
    color: #fff;
}

.modern-btn-danger:hover {
    background: var(--danger-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

.modern-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 8px 12px;
}

.modern-btn-ghost:hover {
    background: var(--input-bg);
    color: var(--text-primary);
}

/* Button Group */
.btn-group {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.btn-group .modern-btn {
    flex: 1;
}

/* Modern Toggle */
.modern-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.modern-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    width: 44px;
    height: 24px;
    background: var(--slider-track);
    border-radius: 12px;
    transition: all var(--transition-fast);
    position: relative;
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modern-toggle input:checked + .toggle-track {
    background: var(--accent-color);
}

.modern-toggle input:checked + .toggle-track .toggle-thumb {
    transform: translateX(20px);
}

.modern-toggle input:focus + .toggle-track {
    box-shadow: 0 0 0 3px var(--input-focus);
}

/* Toggle Item */
.toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.toggle-description {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-action-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.quick-action-btn:hover {
    background: rgba(0, 212, 170, 0.1);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.quick-action-btn:active {
    transform: scale(0.95);
}

/* Preset Buttons */
.preset-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preset-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.preset-btn:hover {
    background: rgba(0, 212, 170, 0.1);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.preset-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
}

/* Device Info */
.device-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--input-bg);
    border-radius: var(--border-radius-md);
    margin-bottom: 16px;
}

.device-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    border-radius: var(--border-radius-sm);
}

.device-icon svg {
    width: 20px;
    height: 20px;
    fill: #000;
}

.device-details {
    flex: 1;
    min-width: 0;
}

.device-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--success-color);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Stats Display */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.stat-card {
    padding: 12px;
    background: var(--input-bg);
    border-radius: var(--border-radius-md);
    text-align: center;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-color);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.stat-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Textarea */
.modern-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.modern-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--input-focus);
}

/* Divider */
.panel-divider {
    height: 1px;
    background: var(--panel-border);
    margin: 16px 0;
}

/* Tooltip */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--text-primary);
    color: var(--panel-bg);
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    pointer-events: none;
    z-index: 1001;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-section {
    animation: slideIn 0.3s ease forwards;
}

.settings-section:nth-child(1) { animation-delay: 0.05s; }
.settings-section:nth-child(2) { animation-delay: 0.1s; }
.settings-section:nth-child(3) { animation-delay: 0.15s; }
.settings-section:nth-child(4) { animation-delay: 0.2s; }

/* Responsive */
@media (max-width: 400px) {
    .modern-settings-panel {
        width: calc(100vw - 80px);
        right: 50px;
    }
    
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Landscape mode - optimize for horizontal screens */
@media (orientation: landscape) and (max-height: 500px) {
    .modern-settings-panel {
        top: 10px;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
    }
    
    .panel-header {
        padding: 10px 16px;
    }
    
    .panel-content {
        padding: 10px 16px;
    }
    
    .settings-card {
        padding: 8px 10px;
        margin-bottom: 6px;
    }
    
    .tab-bar {
        padding: 6px 12px;
    }
    
    .tab-btn {
        padding: 6px 10px;
    }
}

:root {
    --block-top-padding: 0.5rem;
    --block-bottom-padding: 0.5rem;
    --button-top-padding: 0.2rem;
    --button-bottom-padding: 0.2rem;
    --header-height: 3rem;
    --footer-height: 1.55rem;
}

.dialog-background {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 3;
}

.dialog-container {
    font-family: monospace;
    width: 75%;
    max-width: 30rem;
    min-width: 20rem;
    background-color: var(--main-bg-color);
    /*border-radius: 0.3rem;*/
    overflow: hidden;
}

.dialog-container.ready {
    height: 100%;
    min-height: 100%;
}

.dialog-container button, .dialog-container select, .dialog-container input {
    font-family: monospace;
}

.dialog-container button {
    font-size: var(--font-size);
}

.dialog-container select {
    text-overflow: ellipsis;
}

.dialog-block {
}

.dialog-header {
    background-color: var(--header-bg-color);
    height: var(--header-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    width: auto;
    position: initial;
}

.dialog-header span.dialog-title {
    display: inline-block;
    padding: 0 0.5rem;
}

.dialog-body {
    padding: var(--block-top-padding) 0.5rem var(--block-bottom-padding);
    background-color: var(--control-buttons-bg-color);
    overflow: auto;
}

.dialog-body.hidden {
    height: 0;
    padding: 0;
}

.dialog-body.visible {
    height: calc(
            100%
            - 2 * var(--block-top-padding)
            - 2 * var(--block-bottom-padding)
            - var(--header-height)
            - var(--footer-height)
    );
}

.dialog-footer {
    /*display: flex;*/
    /*flex-direction: row-reverse;*/
    padding: var(--block-top-padding) 0.5rem var(--block-bottom-padding);
    background-color: var(--stream-bg-color);
    height: var(--footer-height);
    overflow: hidden;
}

.dialog-footer span.subtitle {
    font-weight: lighter;
    line-height: var(--footer-height);
    float: left;
}

.dialog-footer button {
    padding: var(--button-top-padding) 0.5rem var(--button-bottom-padding);
    margin: 0 0 0 0.5rem;
    border-radius: 0.3rem;
    /*background-color: var(--main-bg-color);*/
    color: var(--button-text-color);
    border: 1px solid var(--button-border-color);
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    height: var(--footer-height);
    float: right;
}

.dialog-footer button:disabled {
    cursor: not-allowed;
    color: var(--text-color-light);
}

.controls .label {
    grid-column: labels;
}

.controls .input {
    grid-column: controls;
    box-sizing: border-box;
    margin: 0;
    /*height: 2.75ex;*/
}

.controls .button {
    grid-column: controls;
}

.controls {
    display: grid;
    grid-template-columns: [labels] 35% [controls] 65%;
    padding: 1rem;
    grid-gap: 0.2rem;
    align-items: center;
}

:root {
    --device-border-color: hsl(0, 0%, 82%);
    --device-list-stripe-color: hsl(0, 0%, 96%);
    --device-list-default-color: hsl(0, 0%, 100%);
    --device-list-hover-color: hsl(218, 67%, 95%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --device-border-color: hsl(0, 0%, 32%);
        --device-list-stripe-color: hsl(0, 0%, 16%);
        --device-list-default-color: hsl(0, 0%, 14%);
        --device-list-hover-color: hsl(218, 17%, 18%);
    }
}


body.list {
    height: auto;
    width: auto;
    overflow: auto;
}

#devices {
    padding: 20px 0;
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: auto;
}

body.stream #devices {
    background-color: var(--device-list-default-color);
    opacity: .8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

body.list #device_list_menu {
    display: none;
}

#device_list_menu {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 4;
}

#devices .device-list button {
    font-size: var(--font-size);
    color: var(--button-text-color);
}

#devices .device-list div.device:nth-child(2n+1){
    background-color: var(--device-list-default-color);
}

#devices .device-list div.device:nth-child(2n){
    background-color: var(--device-list-stripe-color);
}

#devices .device-header {
    padding: 2px 0;
}

#devices .device-header div {
    display: inline-flex;
}

#devices .device-name {
    font-size: 120%;
}

#devices .device-model {
    font-size: 110%;
}

#devices .device-serial {
    color: var(--url-color);
    font-size: 80%;
    margin-left: 6px;
}

#devices .device-version {
    font-size: 100%;
    margin-left: 6px;
    align-items: baseline;
}

#devices .device-version .sdk-version {
    font-size: 75%;
    color: var(--url-color);
    margin-left: 0.2em;
}

#devices .device-state {
    border-radius: 25px;
    background-color: red;
    font-size: 80%;
    margin-left: 6px;
    width: 1em;
    height: 1em;
}

#devices .device.active .device-state {
    background-color: green;
}

#devices .device-list {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
}

#devices .device-list {
    border-spacing: 0;
    border-collapse: collapse;
    font-family: monospace;
    font-size: var(--font-size);
}

#devices .device-list div.device {
    padding: 5px 20px 5px;
}

#devices .device-list div.device:hover {
    background-color: var(--device-list-hover-color)
}

#devices .device-list div.device select {
    color: var(--text-color);
    background-color: var(--main-bg-color);
    margin-left: 0;
    border: none;
}

#devices .device-list div.device:hover select {
    background-color: var(--device-list-hover-color);;
}

#devices .device-list div.desc-block {
    margin: .3em;
    display: inline-flex;
}

#devices .device-list div.desc-block.hidden {
    display: none;
}

#devices .device-list div.desc-block.stream,
#devices .device-list div.desc-block.server_pid,
#devices .device-list div.desc-block.net_interface {
    border: 1px solid var(--device-border-color);
    border-radius: .3em;
    overflow: hidden;
    white-space: nowrap;
}

#devices .device-list div.device div.desc-block.stream button.action-button {
    color: var(--button-text-color);
}

#devices .device-list div.desc-block button {
    fill: var(--text-color)
}

#devices .device-list div.desc-block button > span {
    padding: 0 .5em;
}

#devices .device-list div.desc-block button > span,
#devices .device-list div.desc-block button > svg {
    vertical-align: middle;
}

#devices .device-list div.desc-block button > svg {
    width: var(--font-size);
    height: var(--font-size);
}

#devices .device-list div.desc-block button > svg > path {
    fill: var(--text-color);
}

#devices .device-list .device.not-active div.desc-block button > svg > path {
    fill: var(--text-color-light);
}

#devices .device-list .device.not-active select {
    color: var(--text-color-light);
}

#devices .device-list .device.not-active {
    color: var(--text-color-light);
}

#devices .device-list .device.not-active a {
    color: var(--link-color-light);
}

#devices .device-list .device.not-active a:visited {
    color: var(--link-color_visited-light);
}

#devices .device-list div.device div.desc-block .action-button {
    border: none;
    background-color: rgba(0, 0, 0, 0);
    color: inherit;
}

#devices .device-list div.device div.desc-block .action-button.update-interfaces-button {
    margin-right: 0;
}

#devices .device-list div.device div.desc-block .action-button.active {
    cursor: pointer;
}

#devices .device-list .device.active div.desc-block .action-button:hover {
    color: var(--kill-button-hover-color);
}

#devices .device-list .device.active div.desc-block button.action-button:hover > svg > path {
    fill: var(--kill-button-hover-color);
}

#devices .tracker-name {
    padding: 5px 20px 5px;
    font-size: larger;
    font-weight: bolder;
}

/* Fullscreen Mode Styles */

/* Body in fullscreen mode */
body.fullscreen-mode {
    overflow: hidden !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Device view in fullscreen */
.device-view.fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    background: #000 !important;
}

/* Video container - JS will position and scale it */
.device-view.fullscreen .video {
    border-radius: 0 !important;
    box-shadow: none !important;
    float: none !important;
    background: transparent !important;
}

/* Control buttons hidden by default in fullscreen */
.control-buttons-list.fullscreen-hidden {
    position: fixed !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(12px) scale(0.96) !important;
    transform-origin: right center;
    z-index: 10000 !important;
    float: none !important;
    width: auto !important;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    writing-mode: horizontal-tb !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--mdp-surface, #fff) !important;
    border-radius: 12px !important;
    padding: 8px 4px !important;
    gap: 4px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--mdp-border, rgba(0, 0, 0, 0.08)) !important;
}

/* Control buttons visible when toggled */
.control-buttons-list.fullscreen-hidden.visible {
    transform: translateY(-50%) translateX(0) scale(1) !important;
    opacity: 1;
    pointer-events: auto;
}

.control-buttons-list.fullscreen-hidden .control-button {
    width: 28px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--mdp-text-secondary, #616161) !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: all 0.1s;
    box-sizing: border-box;
}

.control-buttons-list.fullscreen-hidden .control-button:hover {
    background: var(--mdp-surface-hover, #f0f0f0) !important;
    color: var(--mdp-text, #242424) !important;
    opacity: 1 !important;
}

.control-buttons-list.fullscreen-hidden .control-button:active {
    transform: scale(0.92);
}

.control-buttons-list.fullscreen-hidden .control-button svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}

.control-buttons-list.fullscreen-hidden.control-wrapper > input[type=checkbox]:checked + label.control-button {
    background: var(--mdp-accent-light, rgba(0, 120, 212, 0.08)) !important;
    color: var(--mdp-accent, #0078d4) !important;
}

/* Floating toggle button */
.fullscreen-floating-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    cursor: grab;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.18s ease, top 0.18s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.fullscreen-floating-btn.docked-left {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.fullscreen-floating-btn.docked-right {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.fullscreen-floating-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: scale(1.1);
}

.fullscreen-floating-btn.active {
    background: rgba(0, 212, 170, 0.3);
    border-color: rgba(0, 212, 170, 0.6);
    color: #00d4aa;
    box-shadow: 0 6px 20px rgba(0, 212, 170, 0.22);
}

.fullscreen-floating-btn.keyboard-active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.6);
    color: #3b82f6;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.22);
}

.fullscreen-floating-btn.edge-collapsed,
.fullscreen-floating-btn.edge-collapsed:hover {
    opacity: 0.94;
    transform: none;
}

.fullscreen-floating-btn.edge-collapsed.docked-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    justify-content: flex-end;
    padding-right: 4px;
}

.fullscreen-floating-btn.edge-collapsed.docked-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    justify-content: flex-start;
    padding-left: 4px;
}

.fullscreen-floating-btn.shifted {
    right: 80px;
}

.fullscreen-floating-btn.dragging,
.fullscreen-floating-btn.dragging:hover {
    cursor: grabbing;
    transform: none;
    transition: none;
}

.fullscreen-floating-btn svg {
    width: 20px;
    height: 20px;
}

/* Settings panel in fullscreen */
body.fullscreen-mode .modern-settings-panel {
    z-index: 10001 !important;
    right: 80px !important;
    top: 20px !important;
}

/* Hide more-box in fullscreen */
.device-view.fullscreen .more-box {
    display: none !important;
}

/* Responsive fullscreen for mobile */
@media (max-width: 768px) {
    .control-buttons-list.fullscreen-hidden.visible {
        right: 8px !important;
        padding: 4px 2px !important;
    }
    
    .fullscreen-floating-btn {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
    
    body.fullscreen-mode .modern-settings-panel {
        right: 56px !important;
        width: calc(100vw - 72px) !important;
        max-width: 280px !important;
    }
}

/* Double-click hint on video hover */
.device-view .video {
    cursor: pointer;
}

/* ====== Multi-device page fullscreen support (UserDevicePage) ====== */

/* Black overlay behind the fixed video — hides page content in letterbox areas */
body.fullscreen-mode::before {
    content: '';
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9990;
    pointer-events: none;
}

/* mdp-video-wrapper as fullscreen deviceView:
   position/dimensions are set by JS updateFullscreenLayout(),
   CSS provides fallback fixed positioning + z-index stacking + background.
   JS inline styles override these with precise viewport-aware dimensions. */
.mdp-video-wrapper.fullscreen {
    position: fixed !important;
    z-index: 9998 !important;
    background: #000 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.mdp-mobile-focus-window.fullscreen-active {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9997 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
}

.mdp-split-main.fullscreen-active {
    z-index: auto !important;
    overflow: visible !important;
}

.mdp-card.fullscreen-active {
    z-index: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mdp-card.fullscreen-active .mdp-card-header {
    display: none !important;
}

.mdp-card.fullscreen-active .mdp-card-video {
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* mdp-card-controls as control panel in fullscreen — mirrors .control-buttons-list.fullscreen-hidden */
.mdp-card-controls.fullscreen-hidden {
    position: fixed !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(12px) scale(0.96) !important;
    transform-origin: right center;
    z-index: 10000 !important;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    writing-mode: horizontal-tb !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--mdp-surface, #fff) !important;
    border-radius: 12px !important;
    padding: 8px 4px !important;
    gap: 4px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--mdp-border, rgba(0, 0, 0, 0.08)) !important;
}

.mdp-card-controls.fullscreen-hidden.visible {
    transform: translateY(-50%) translateX(0) scale(1) !important;
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .mdp-card-controls.fullscreen-hidden.visible {
        right: 8px !important;
        padding: 4px 2px !important;
    }
}

.control-buttons-list.fullscreen-hidden,
.mdp-card-controls.fullscreen-hidden {
    right: 72px !important;
    top: 20px !important;
    width: min(320px, calc(100vw - 96px)) !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    transform: translateX(28px) scale(0.96) !important;
    transform-origin: right top;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 44px 12px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    background: rgba(44, 46, 54, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    color: #fff;
    box-sizing: border-box;
}

.control-buttons-list.fullscreen-hidden::before,
.mdp-card-controls.fullscreen-hidden::before {
    content: '操作';
    position: absolute;
    left: 16px;
    top: 14px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.control-buttons-list.fullscreen-hidden.visible,
.mdp-card-controls.fullscreen-hidden.visible {
    transform: translateX(0) scale(1) !important;
}

.control-buttons-list.fullscreen-hidden .control-button,
.mdp-card-controls.fullscreen-hidden .mdp-ctrl-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    opacity: 1 !important;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.control-buttons-list.fullscreen-hidden .control-button:hover,
.mdp-card-controls.fullscreen-hidden .mdp-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.control-buttons-list.fullscreen-hidden .control-button:active,
.mdp-card-controls.fullscreen-hidden .mdp-ctrl-btn:active {
    transform: scale(0.96);
}

.control-buttons-list.fullscreen-hidden .control-button svg,
.mdp-card-controls.fullscreen-hidden .mdp-ctrl-btn svg,
.mdp-card-controls.fullscreen-hidden .mdp-ctrl-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

.control-buttons-list.fullscreen-hidden .control-button::after,
.mdp-card-controls.fullscreen-hidden .mdp-ctrl-btn[data-display-mode="icon"]::after {
    content: attr(title);
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdp-card-controls.fullscreen-hidden .mdp-ctrl-label {
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
}

.mdp-card-controls.fullscreen-hidden .mdp-ctrl-divider {
    grid-column: 1 / -1;
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: rgba(255, 255, 255, 0.12);
}

.mdp-fullscreen-device-switcher {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mdp-fullscreen-status {
    display: none;
}

.mdp-card-controls.fullscreen-hidden.mdp-fullscreen-switcher-open {
    grid-template-columns: minmax(0, 1fr) !important;
}

.mdp-card-controls.fullscreen-hidden.mdp-fullscreen-switcher-open::before {
    content: '选择设备';
}

.mdp-card-controls.fullscreen-hidden.mdp-fullscreen-switcher-open > :not(.mdp-fullscreen-device-switcher) {
    display: none !important;
}

.mdp-fullscreen-device-switcher.is-open {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.mdp-fullscreen-switcher-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.mdp-fullscreen-switcher-header span span {
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    font-weight: 500;
}

.mdp-fullscreen-switcher-back {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    font-size: 12px;
}

.mdp-fullscreen-switcher-back:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mdp-fullscreen-switcher-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mdp-fullscreen-device-switcher.is-open .mdp-fullscreen-switcher-list {
    grid-template-columns: minmax(0, 1fr);
}

.mdp-fullscreen-switcher-list.grouped {
    gap: 10px;
}

.mdp-fullscreen-switcher-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.mdp-fullscreen-switcher-group-header {
    width: 100%;
    min-width: 0;
    height: 34px;
    display: grid;
    grid-template-columns: 4px 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    box-sizing: border-box;
    font: inherit;
    text-align: left;
}

.mdp-fullscreen-switcher-group-header:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.14);
}

.mdp-fullscreen-switcher-group-color {
    width: 4px;
    height: 18px;
    border-radius: 999px;
}

.mdp-fullscreen-switcher-group-caret {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.64);
    transition: transform 0.16s ease;
}

.mdp-fullscreen-switcher-group.collapsed .mdp-fullscreen-switcher-group-caret {
    transform: rotate(-90deg);
}

.mdp-fullscreen-switcher-group-caret svg {
    width: 15px;
    height: 15px;
}

.mdp-fullscreen-switcher-group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.mdp-fullscreen-switcher-group-count {
    min-width: 22px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 700;
}

.mdp-fullscreen-switcher-group-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
}

.mdp-fullscreen-switcher-group.collapsed .mdp-fullscreen-switcher-group-body {
    display: none;
}

.mdp-fullscreen-switch-device {
    width: 100%;
    min-width: 0;
    height: 52px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    column-gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.mdp-fullscreen-switch-device:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.16);
}

.mdp-fullscreen-switch-device:active {
    transform: scale(0.98);
}

.mdp-fullscreen-switch-device-dot {
    grid-row: 1 / 3;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
}

.mdp-fullscreen-switch-device-dot.streaming {
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.mdp-fullscreen-switch-device-name,
.mdp-fullscreen-switch-device-state {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdp-fullscreen-switch-device-name {
    align-self: end;
    font-size: 12px;
    font-weight: 600;
}

.mdp-fullscreen-switch-device-state {
    align-self: start;
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
}

.mdp-fullscreen-switcher-empty {
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    text-align: center;
}

.control-buttons-list.fullscreen-hidden.control-wrapper > input[type=checkbox]:checked + label.control-button,
.mdp-card-controls.fullscreen-hidden .mdp-ctrl-btn.active,
.mdp-card-controls.fullscreen-hidden .mdp-stream-toggle.active {
    background: #3b82f6 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

.mdp-card-controls.fullscreen-hidden .mdp-ctrl-btn.keyboard-mode {
    background: rgba(59, 130, 246, 0.35) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    color: #3b82f6 !important;
}

.fullscreen-floating-btn.active {
    background: #3b82f6;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    box-shadow: 0 10px 28px rgba(59, 130, 246, 0.34);
}

@media (max-width: 768px) {
    .control-buttons-list.fullscreen-hidden,
    .control-buttons-list.fullscreen-hidden.visible,
    .mdp-card-controls.fullscreen-hidden,
    .mdp-card-controls.fullscreen-hidden.visible {
        right: 62px !important;
        top: 10px !important;
        width: min(300px, calc(100vw - 78px)) !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        padding: 44px 12px 12px !important;
    }
}

@media (max-width: 480px) {
    .control-buttons-list.fullscreen-hidden,
    .mdp-card-controls.fullscreen-hidden {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar {
    --fullscreen-leidian-sidebar-width: 64px;
    --fullscreen-leidian-toolbar-height: 64px;
    --fullscreen-leidian-sidebar-top: 0px;
    --fullscreen-leidian-sidebar-right: 0px;
    --fullscreen-leidian-sidebar-height: 100vh;
    --fullscreen-leidian-status-left: 0px;
    --fullscreen-leidian-status-top: 0px;
    --fullscreen-leidian-status-width: calc(100vw - var(--fullscreen-leidian-sidebar-width));
    --fullscreen-leidian-status-height: 36px;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar,
.control-buttons-list.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar,
.mdp-card-controls.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar {
    position: fixed !important;
    right: var(--fullscreen-leidian-sidebar-right, 0px) !important;
    top: var(--fullscreen-leidian-sidebar-top, 0px) !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--fullscreen-leidian-sidebar-width) !important;
    height: var(--fullscreen-leidian-sidebar-height, 100vh) !important;
    max-width: var(--fullscreen-leidian-sidebar-width) !important;
    max-height: var(--fullscreen-leidian-sidebar-height, 100vh) !important;
    transform: none !important;
    transform-origin: right center !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    writing-mode: horizontal-tb !important;
    display: block !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    /* Firefox 常驻滑块 */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(22, 24, 34, 0.98), rgba(14, 16, 24, 0.98)) !important;
    box-shadow: -10px 0 26px rgba(0, 0, 0, 0.34), inset 1px 0 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-sizing: border-box;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar > .mdp-fullscreen-sidebar-scroll-content,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar > .mdp-fullscreen-sidebar-scroll-content {
    width: 100%;
    min-height: max-content;
    padding: 8px 4px;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    box-sizing: border-box;
}

/* WebKit (Chrome / Safari / iOS Safari)：常驻细滑块，让用户直观知道可以上下滚动 */
.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar {
    width: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar-track,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    margin: 4px 0;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar-thumb,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    min-height: 32px;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar-thumb:hover,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar-thumb:hover,
.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar-thumb:active,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.6);
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar::before,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar::before {
    content: none !important;
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar .mdp-fullscreen-status {
    position: fixed;
    left: var(--fullscreen-leidian-status-left, 0px);
    top: var(--fullscreen-leidian-status-top, 0px);
    width: var(--fullscreen-leidian-status-width, calc(100vw - var(--fullscreen-leidian-sidebar-width)));
    height: var(--fullscreen-leidian-status-height, 36px);
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    z-index: 10000;
    pointer-events: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(22, 24, 34, 0.96), rgba(14, 16, 24, 0.92));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-sizing: border-box;
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar .mdp-fullscreen-status-name {
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar .mdp-fullscreen-latency-badge {
    flex: 0 0 auto;
    min-height: 18px;
    padding: 4px 7px;
    display: inline-flex;
    justify-content: center;
    gap: 4px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar .mdp-fullscreen-latency-badge .mdp-latency-badge-icon svg {
    width: 11px;
    height: 11px;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar .control-button,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-ctrl-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    box-sizing: border-box;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar .control-button:hover,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-ctrl-btn:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar .control-button svg,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-ctrl-btn svg,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-ctrl-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar .control-button::after,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-ctrl-btn[data-display-mode="icon"]::after {
    color: rgba(255, 255, 255, 0.66);
    font-size: 10px;
    line-height: 1.1;
    max-width: 100%;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-ctrl-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    line-height: 1.1;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-ctrl-divider {
    width: 28px;
    height: 1px;
    min-height: 1px;
    margin: 5px auto;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.14);
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-fullscreen-device-switcher {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 0;
    flex: 0 0 auto;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.mdp-fullscreen-switcher-open {
    grid-template-columns: none !important;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.mdp-fullscreen-switcher-open > .mdp-fullscreen-sidebar-scroll-content {
    display: flex !important;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.mdp-fullscreen-switcher-open > :not(.mdp-fullscreen-device-switcher),
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.mdp-fullscreen-switcher-open > .mdp-fullscreen-sidebar-scroll-content > :not(.mdp-fullscreen-device-switcher) {
    display: flex !important;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.mdp-fullscreen-switcher-open > .mdp-ctrl-divider,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.mdp-fullscreen-switcher-open > .mdp-fullscreen-sidebar-scroll-content > .mdp-ctrl-divider {
    display: block !important;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-fullscreen-switch-device,
body.fullscreen-mode.fullscreen-style-leidian-sidebar > .mdp-fullscreen-device-switcher.is-open .mdp-fullscreen-switch-device {
    height: 52px;
    padding: 6px 4px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 3px;
    justify-items: center;
    text-align: center;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-fullscreen-switch-device-dot,
body.fullscreen-mode.fullscreen-style-leidian-sidebar > .mdp-fullscreen-device-switcher.is-open .mdp-fullscreen-switch-device-dot {
    display: none;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-fullscreen-switch-device-name,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-fullscreen-switch-device-state,
body.fullscreen-mode.fullscreen-style-leidian-sidebar > .mdp-fullscreen-device-switcher.is-open .mdp-fullscreen-switch-device-name,
body.fullscreen-mode.fullscreen-style-leidian-sidebar > .mdp-fullscreen-device-switcher.is-open .mdp-fullscreen-switch-device-state {
    width: 100%;
    text-align: center;
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar > .mdp-fullscreen-device-switcher.is-open {
    position: fixed;
    right: var(--fullscreen-leidian-sidebar-width);
    top: 12px;
    z-index: 10002;
    width: min(330px, calc(100vw - var(--fullscreen-leidian-sidebar-width) - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 12px;
    display: flex !important;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(28, 30, 42, 0.94);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    overflow-y: auto;
    box-sizing: border-box;
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom {
    --fullscreen-leidian-sidebar-width: 0px;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom,
.control-buttons-list.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom,
.mdp-card-controls.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom {
    right: 0 !important;
    left: 0 !important;
    top: var(--fullscreen-leidian-toolbar-top, auto) !important;
    bottom: var(--fullscreen-leidian-toolbar-bottom, 0px) !important;
    width: 100vw !important;
    height: var(--fullscreen-leidian-toolbar-height) !important;
    max-width: 100vw !important;
    max-height: var(--fullscreen-leidian-toolbar-height) !important;
    writing-mode: horizontal-tb !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: touch;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(90deg, rgba(22, 24, 34, 0.98), rgba(14, 16, 24, 0.98)) !important;
    box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom > .mdp-fullscreen-sidebar-scroll-content,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom > .mdp-fullscreen-sidebar-scroll-content {
    width: max-content;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 4px 8px;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar.fullscreen-leidian-device-landscape .mdp-fullscreen-status {
    display: none !important;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom .control-button,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom .mdp-ctrl-btn {
    width: 56px !important;
    min-width: 56px !important;
    height: 54px !important;
    min-height: 54px !important;
    flex: 0 0 56px !important;
    transform: rotate(90deg) !important;
    transform-origin: center center !important;
}

.control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom .control-button:active,
.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom .mdp-ctrl-btn:active {
    transform: rotate(90deg) scale(0.92) !important;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom .mdp-ctrl-divider {
    width: 1px;
    height: 28px;
    min-height: 28px;
    margin: auto 5px;
}

.mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom .mdp-fullscreen-device-switcher {
    width: auto;
}

body.fullscreen-mode.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom > .mdp-fullscreen-device-switcher.is-open {
    right: 12px;
    left: 12px;
    top: 12px;
    bottom: auto;
    width: auto;
    max-height: min(420px, calc(100vh - var(--fullscreen-leidian-toolbar-height) - 24px));
    max-height: min(420px, calc(100dvh - var(--fullscreen-leidian-toolbar-height) - 24px));
}

@media (max-width: 768px) {
    body.fullscreen-mode.fullscreen-style-leidian-sidebar {
        --fullscreen-leidian-sidebar-width: 56px;
        --fullscreen-leidian-toolbar-height: 56px;
    }

    .control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar,
    .mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar,
    .control-buttons-list.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar,
    .mdp-card-controls.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar {
        right: 0 !important;
        top: var(--fullscreen-leidian-sidebar-top, 0px) !important;
        width: var(--fullscreen-leidian-sidebar-width) !important;
        max-width: var(--fullscreen-leidian-sidebar-width) !important;
        padding: 0 !important;
    }

    .control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar > .mdp-fullscreen-sidebar-scroll-content,
    .mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar > .mdp-fullscreen-sidebar-scroll-content {
        padding: 6px 3px;
    }

    .control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar:not(.fullscreen-leidian-projected-bottom),
    .mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar:not(.fullscreen-leidian-projected-bottom),
    .control-buttons-list.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar:not(.fullscreen-leidian-projected-bottom),
    .mdp-card-controls.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar:not(.fullscreen-leidian-projected-bottom) {
        overflow-x: hidden !important;
        /* 强制常驻滑动条，避免 iOS Safari 默认把滚动条隐藏导致用户不知道可以上下滚 */
        overflow-y: scroll !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    }

    .control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar .control-button,
    .mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar .mdp-ctrl-btn {
        height: 50px !important;
        min-height: 50px !important;
    }

    .control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar:not(.fullscreen-leidian-projected-bottom) .control-button,
    .mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar:not(.fullscreen-leidian-projected-bottom) .mdp-ctrl-btn {
        flex: 0 0 auto !important;
        touch-action: pan-y !important;
    }

    .control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom,
    .mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom,
    .control-buttons-list.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom,
    .mdp-card-controls.fullscreen-hidden.visible.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom {
        width: 100vw !important;
        max-width: 100vw !important;
        height: var(--fullscreen-leidian-toolbar-height) !important;
        max-height: var(--fullscreen-leidian-toolbar-height) !important;
        padding: 0 !important;
    }

    .control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom > .mdp-fullscreen-sidebar-scroll-content,
    .mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom > .mdp-fullscreen-sidebar-scroll-content {
        padding: 3px 6px;
    }

    .control-buttons-list.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom .control-button,
    .mdp-card-controls.fullscreen-hidden.fullscreen-style-leidian-sidebar.fullscreen-leidian-projected-bottom .mdp-ctrl-btn {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        flex-basis: 50px !important;
    }
}

/* Modern Device View Container */

/* 
 * 注意：不要覆盖 .device-view 的基础布局样式，
 * 只添加视觉增强效果，保持原有的交互功能
 */

/* Video container with modern styling - 只添加视觉效果 */
.device-view .video {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 10px 40px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}

.device-view .video:hover {
    box-shadow: 
        0 0 0 1px rgba(0, 212, 170, 0.3),
        0 15px 50px rgba(0, 0, 0, 0.4);
}

/* Video layer enhancements - 保持圆角一致 */
.device-view .video-layer {
    border-radius: 12px;
}

.device-view .touch-layer {
    border-radius: 12px;
}

/* Light mode */
@media (prefers-color-scheme: light) {
    .device-view .video {
        box-shadow: 
            0 0 0 1px rgba(0, 0, 0, 0.1),
            0 10px 40px rgba(0, 0, 0, 0.12);
    }
    
    .device-view .video:hover {
        box-shadow: 
            0 0 0 1px rgba(0, 168, 138, 0.3),
            0 15px 50px rgba(0, 0, 0, 0.15);
    }
}