/* ==========================================================================
   HANABARA STUDIO - Animation Management System
   Shared CSS: Tokens, Utilities, Accessibility, and Responsive Layout
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. UNIFIED CSS VARIABLES (Additional Tokens)
   --------------------------------------------------------------------------
   Base tokens (--bg, --surface, --surface-hover, --border, --text, --dim,
   --accent) are defined in style.css :root. The tokens below extend that
   palette for broader reuse across all pages.
   -------------------------------------------------------------------------- */

:root {
    /* Surface variants */
    --surface-alt: #1a1a1a;
    --surface-dark: #111;
    --surface-darker: #0a0a0a;
    --surface-input: #222;

    /* Border variants */
    --border-light: #2a2a2a;
    --border-medium: #444;

    /* Text variants */
    --text-muted: #888;
    --text-dim: #666;
    --text-dimmer: #555;
    --text-subtle: #444;

    /* Feedback / semantic colors */
    --feedback-blue: #6ba4ff;
    --info-blue: #4ecdc4;
    --warning-orange: #ff9500;

    /* Unified transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Unified border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Responsive breakpoints (reference only — used in media queries below)
       --bp-mobile:  640px
       --bp-tablet:  820px
       --bp-desktop: 1024px
       --bp-wide:    1440px
    */
}


/* --------------------------------------------------------------------------
   2. GPU-ACCELERATED ANIMATION HELPERS
   -------------------------------------------------------------------------- */

.gpu-accelerated {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* --------------------------------------------------------------------------
   3. ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 10000;
    font-size: 14px;
    text-decoration: none;
    transition: top var(--transition-normal);
}

.skip-link:focus {
    top: 0;
}


/* --------------------------------------------------------------------------
   4. COMMON UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Layout */
.d-flex  { display: flex; }
.d-none  { display: none; }
.d-grid  { display: grid; }
.flex-1  { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.text-center  { text-align: center; }

/* Gaps */
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }

/* Typography */
.text-muted  { color: var(--text-muted); }
.text-dim    { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.font-mono   { font-family: 'JetBrains Mono', monospace; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fw-600 { font-weight: 600; }

/* Separators */
.sep   { color: var(--text-subtle); }
.sep-v { color: var(--text-subtle); margin: 0 8px; }

/* Status legend colors (map to status vars in style.css) */
.stat-ready      { color: var(--s-ready); }
.stat-wip        { color: var(--s-wip); }
.stat-wait       { color: var(--s-wait); }
.stat-processing { color: var(--s-processing); }
.stat-check      { color: var(--s-check); }
.stat-retake     { color: var(--s-retake); }
.stat-ok         { color: var(--s-ok); }
.stat-bank       { color: var(--text-dim); }


/* --------------------------------------------------------------------------
   5. MOBILE MENU BUTTON (visible only on small screens)
   -------------------------------------------------------------------------- */

.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}


/* --------------------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Mobile (max-width: 640px) — 2026-04 重构
   遵循 6 项规范：
     §1 视口/安全区
     §2 顶栏折叠
     §3 卡片信息流化
     §4 播放弹窗 sticky
     §5 模态框底部拉起
     §6 批量操作条防遮挡
   桌面版 (>640px) 完全不受影响
   ========================================================================== */
@media (max-width: 640px) {

    /* ---------- §1 视口与安全区 ---------- */
    html, body {
        height: auto !important;
        min-height: 100vh;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        -webkit-text-size-adjust: 100%;   /* 防横竖屏切字号暴走 */
        text-size-adjust: 100%;
    }
    body {
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom);  /* iPhone 底部横线安全区 */
    }
    .app-content-wrap {
        flex-direction: column !important;
        overflow: visible !important;
        min-height: calc(100vh - 40px);
        height: auto !important;
    }

    /* ---------- aside → drawer ---------- */
    aside {
        width: 100% !important;
        height: auto !important;
        max-height: 60px;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow: hidden;
        flex-shrink: 0;
    }
    aside.mobile-open {
        max-height: 100vh;
        flex-direction: column;
        position: fixed;
        z-index: 500;
        inset: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    aside .tree                           { display: none; }
    aside.mobile-open .tree               { display: block; }
    aside .brand                          { height: 60px; flex-shrink: 0; }
    aside .sidebar-ft                     { display: none; }
    aside.mobile-open .sidebar-ft         { display: flex; }
    aside .sidebar-user                   { display: none; }
    aside.mobile-open .sidebar-user       { display: block; }
    aside .nav-links                      { display: none; }
    aside.mobile-open .nav-links          { display: flex; }
    .mobile-menu-btn                      { display: flex !important; }

    /* Main 区 */
    main     { width: 100%; }
    .content { padding: 8px; }

    /* ---------- §2 顶栏折叠改造 ---------- */
    /* nav 第一行保留项目信息 + 操作按钮 + 筛选图标触发器
       row-2 / row-3 / 统计 / 搜索默认收起，点击筛选图标后展开 */
    nav { padding: 6px 8px; gap: 4px; }

    .row-1         { flex-wrap: wrap; gap: 6px; }
    .proj-info     { font-size: 13px; }

    /* 操作按钮行：横滚，紧凑 */
    .nav-actions {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        width: 100%;
    }
    .nav-actions > *      { flex-shrink: 0; }
    .nav-actions .btn-text { padding: 4px 8px !important; font-size: 11px !important; }
    .nav-actions .icon,
    .nav-actions .primary  { padding: 4px 8px !important; }

    /* 筛选面板（row-2 + row-3）默认隐藏，body.mobile-filter-open 时展开 */
    /* 移动端默认隐藏人员行、统计行、筛选行 */
    #staff-online-row,
    #stats-row,
    .nav-row.row-3,
    .row-3 { display: none !important; }
    /* 筛选抽屉只展开 row-3（不展开人员行和统计行） */
    body.mobile-filter-open .nav-row.row-3,
    body.mobile-filter-open .row-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 8px !important;
        background: #0a0a0a;
        border-top: 1px solid var(--border);
        animation: mobileFilterSlideDown 0.2s ease;
    }
    body.mobile-filter-open .filter-item       { width: 100%; gap: 4px; }
    body.mobile-filter-open .filter-item select { width: 100%; max-width: none; }
    body.mobile-filter-open .search-item       { margin-left: 0; width: 100%; }
    body.mobile-filter-open .search-item input  { width: 100%; }
    @keyframes mobileFilterSlideDown {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* 移动端筛选触发按钮：桌面默认 display:none，移动端显示 */
    .mobile-filter-toggle {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        width: 32px; height: 32px;
        background: #1a1a1a; border: 1px solid #2a2a2a;
        color: #d4af37; border-radius: 6px; cursor: pointer;
        flex-shrink: 0;
        margin-left: auto;
    }
    body.mobile-filter-open .mobile-filter-toggle {
        background: #d4af37; color: #000;
    }

    /* 统计行（dashboard 里的）桌面可见，移动端跟筛选一起收起 */
    #stats-row[style*="display:none"] { display: none !important; }  /* 保留 inline 控制 */

    /* ---------- §3 卡片网格信息流化 ---------- */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    /* 卡片：edge-to-edge，取消圆角/左右边框 */
    .grid .card {
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        /* 左图右文横向布局 */
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: flex-start;
    }
    .grid .card .c-thumb {
        width: 40% !important;
        max-width: 160px !important;
        min-width: 100px;
        flex-shrink: 0;
        height: auto !important;
        aspect-ratio: 16/9;
    }
    .grid .card .c-thumb img {
        width: 100%; height: 100%; object-fit: cover;
        border-radius: 4px;
    }
    .grid .card .c-head,
    .grid .card .c-body,
    .grid .card .c-content,
    .grid .card > div:not(.c-thumb) {
        flex: 1;
        min-width: 0;
    }
    /* 状态标签紧凑 */
    .st-pill, .status-pill, .status-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    /* 卡片头紧凑 */
    .c-head { font-size: 12px !important; }
    .c-head-right { gap: 4px !important; }

    /* ---------- §4 播放弹窗重构 ---------- */
    /* 移动端：全局滚动 + 主视频 sticky 置顶，取消硬性 40vh/60vh 切分 */
    #player-modal {
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        inset: 0 !important;
        border-radius: 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
    #player-modal .p-main {
        position: sticky !important;
        top: 0 !important;
        z-index: 10;
        flex: none !important;
        height: auto !important;
        background: #000;
        width: 100% !important;
    }

    /* ★ 关键：移动端让 video 回归「诊断页」的简单形态，原生 controls 独占 ★
       - 隐藏 loading overlay（z-index:5 挡住视频）
       - 隐藏自定义 .p-controls（有原生 controls 就够了，省屏幕空间）
       - video-wrap 去掉 flex 限制，让 video 自然展开 */
    #player-modal .video-loading-overlay {
        display: none !important;
    }
    #player-modal .p-controls {
        display: none !important;
    }
    #player-modal .video-wrap {
        flex: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        position: relative;
    }
    #player-modal video#v-player {
        width: 100% !important;
        height: auto !important;
        max-height: 60vh;
        display: block !important;
        background: #000;
        box-shadow: none !important;
        opacity: 1 !important;  /* 永远可见，绝不让 JS 的 opacity hack 覆盖 */
    }

    #player-modal .p-sidebar {
        width: 100% !important;
        height: auto !important;    /* 随内容撑开，不锁 60vh */
        max-height: none !important;
        border-left: none !important;
        border-top: 1px solid var(--border);
        overflow-y: visible !important;  /* 让外层 #player-modal 滚动 */
    }
    /* 浮动关闭按钮（右上角圆形半透明） */
    #player-modal .p-close-mobile {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top));
        right: 10px;
        width: 40px; height: 40px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        display: flex !important;
        align-items: center; justify-content: center;
        font-size: 18px;
        z-index: 100;
        cursor: pointer;
    }
    #player-modal .p-close-mobile:hover { background: rgba(0, 0, 0, 0.8); }

    /* ---------- §5 模态框底部拉起化 ---------- */
    /* 大模态框全屏 + 从底部滑入 */
    #m-settings,
    #m-batch,
    #m-csv,
    #m-review,
    #m-delivery,
    #m-dashboard,
    .modal-dialog,
    .dashboard-overlay,
    .stats-overlay,
    .schedule-overlay,
    .todo-overlay,
    .lipsync-overlay,
    .confirm-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        inset: 0 !important;
        transform: none !important;
    }

    /* 从底部滑入动画 */
    .mobile-slide-up {
        animation: mobileSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }
    @keyframes mobileSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* 模态框内部主体可滚动 */
    .modal-body,
    .dashboard-overlay > *,
    .stats-overlay > *,
    #m-settings > .modal-content,
    .modal-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    /* 触发过 width: 700px inline 样式的也强制全宽 */
    [style*="width: 700px"],
    [style*="width:700px"],
    [style*="width: 500px"],
    [style*="width:500px"] {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* ---------- §6 批量操作条防遮挡 ---------- */
    #batch-bar {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        max-width: none !important;
        border-radius: 0 !important;
        padding-top: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    .batch-row-main  { flex-wrap: wrap; gap: 6px; }
    .batch-field-label { display: none; }

    /* 列表底部预留批量条高度（body 加 class batch-mode 时生效） */
    body.batch-mode main,
    body.batch-mode .content,
    body.batch-mode #grid,
    body.batch-mode #table {
        padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    }
}

/* --- Wide screens (min-width: 1440px) ---------------------------------- */
@media (min-width: 1440px) {
    .grid    { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
    .content { padding: 40px; }
}

/* ==========================================================================
   7. RESPONSIVE (TABLET + MOBILE) — GLOBAL TOP NAV + 工具类
   ========================================================================== */

/* 响应式工具类（可直接用） */
.hide-mobile  { /* 默认显示，移动隐藏 */ }
.hide-tablet  { /* 默认显示，平板隐藏 */ }
.mobile-only  { display: none; }
.tablet-only  { display: none; }
.desktop-only { display: inherit; }

/* 所有表格自动横向滚动容器（需要手动包裹 <div class="table-scroll">...</div>） */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-scroll table {
    min-width: 100%;
}

/* 汉堡按钮（全局顶栏用） */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: #ccc;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    align-items: center;
    justify-content: center;
}
.nav-hamburger:hover { color: #d4af37; }

/* 全局顶栏抽屉（当链接折叠进去时用）— 从屏幕左边缘滑入，撑满到下方 */
.global-nav-drawer {
    position: fixed;
    top: 40px;
    left: 0;
    bottom: 0;           /* 撑到底部 */
    width: 280px;
    max-width: 85vw;
    background: #0f0f0f;
    border-right: 1px solid #2a2a2a;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5);
    padding: 12px 0;
    z-index: 900;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    animation: drawerInLeft 0.18s ease-out;
}
@keyframes drawerInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.global-nav-drawer.open { display: flex; }
.global-nav-drawer a {
    padding: 14px 18px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid #1a1a1a;
    flex: 0 0 auto !important;   /* 覆盖 .nav-link 的 flex:1，避免在纵向 drawer 里被撑高 */
    min-height: auto;
    height: auto;
}
.global-nav-drawer a:hover,
.global-nav-drawer a.active { background: #1a1a1a; color: #d4af37; }

/* 抽屉遮罩 */
.drawer-mask {
    position: fixed; inset: 40px 0 0 0;
    background: rgba(0,0,0,0.55);
    z-index: 850;
    display: none;
}
.drawer-mask.open { display: block; }

/* ---------- Tablet (641px - 1024px) ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
    .hide-tablet  { display: none !important; }
    .tablet-only  { display: inherit; }
    .desktop-only { display: none !important; }

    /* iPad 竖屏内容区比桌面小，body height:100vh+overflow:hidden 会截掉长内容
       —— 但桌面（>1024px）不会命中这条规则，仍保持原样 */
    html, body {
        height: auto !important;
        min-height: 100vh;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 全局顶栏链接字体略缩 */
    .global-top-nav .global-nav-link {
        font-size: 12px;
        padding: 4px 6px;
    }
    .global-top-nav .global-nav-link i { font-size: 13px; }

    /* 内容区 padding 缩小 */
    .content { padding: 14px; }

    /* 通用 grid 降列 */
    .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

    /* 模态框常用宽度，超过视口按 92vw 算 */
    .modal-dialog,
    .new-post-form,
    .confirm-modal { max-width: min(92vw, var(--modal-w, 700px)); }
}

/* ---------- Mobile (max-width: 640px) — 全局顶栏改汉堡 ---------- */
@media (max-width: 640px) {
    .mobile-only  { display: inherit; }
    .hide-mobile  { display: none !important; }
    .desktop-only { display: none !important; }

    /* 全局顶栏收起链接，汉堡打开抽屉 */
    .global-top-nav {
        position: sticky; top: 0; z-index: 1000;
        padding: 0 10px !important;
    }
    .global-top-nav .global-nav-links {
        display: none !important;
    }
    .global-top-nav .nav-hamburger {
        display: flex !important;
    }
    .global-top-nav .brand-mini {
        font-size: 13px;
    }
    .global-top-nav .global-top-right {
        gap: 4px;
    }
    .global-top-nav .global-top-right > *:not(.nav-hamburger):not(.user-avatar-link) {
        display: none !important;
    }

    /* 全局抽屉展开后显示所有链接 */
    .global-nav-drawer.open { display: flex; }

    /* 所有内联 px 超大元素按 92vw 兜底（对于 inline style 的模态框） */
    [style*="width: 700px"],
    [style*="width:700px"] {
        width: 92vw !important;
        max-width: 92vw !important;
    }

    /* 表单元素触摸友好：最小高度 40px（Apple HIG 44px，这里留 40 兼顾密度） */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="url"], input[type="number"], textarea, select, button {
        font-size: 14px;
    }
    .btn, button[class*="btn"], .ai-generate-btn {
        min-height: 40px;
    }
}

/* ==========================================================================
   body.is-mobile 规则 —— 不依赖 @media，由 JS isMobileDevice() 触发
   覆盖所有触屏设备（iPhone 375、iPad 768/834/1024、大屏 Android 等）
   专门解决 "iPad @media (max-width: 640px) 不触发" 的问题
   ========================================================================== */

/* 视频播放弹窗 —— 所有移动端统一形态 */
body.is-mobile #player-modal {
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    inset: 0 !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
}

/* 隐藏自定义控件和加载遮罩，让 video 原生 controls 独占 */
body.is-mobile #player-modal .video-loading-overlay { display: none !important; }
body.is-mobile #player-modal .p-controls { display: none !important; }

/* p-main / video-wrap 简化布局，video 元素强制可见 */
body.is-mobile #player-modal .p-main {
    flex: none !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    background: #000;
    position: static !important;  /* 不 sticky，避免 flex 父下 sticky 失效的坑 */
    overflow: visible !important;
}
body.is-mobile #player-modal .video-wrap {
    flex: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    background: #000;
    position: relative;
    cursor: default;
}
body.is-mobile #player-modal video#v-player {
    width: 100% !important;
    height: auto !important;
    max-height: 70vh;
    display: block !important;
    background: #000;
    box-shadow: none !important;
    opacity: 1 !important;   /* 绝对可见，不允许 JS 的 opacity hack 覆盖 */
    outline: none;
}

/* 侧栏随内容撑开，整个 modal 滚动 */
body.is-mobile #player-modal .p-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-left: none !important;
    border-top: 1px solid var(--border);
    overflow-y: visible !important;
    padding: 12px !important;
}

/* 右上角浮动关闭按钮 */
body.is-mobile #player-modal .p-close-mobile {
    display: flex !important;
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: 10px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 100;
    cursor: pointer;
}


/* ==========================================================================
   移动端总体改造（v2）
   - 卡片默认紧凑模式（只显示状态 + 卡号 + 场景 + 素材 + 标签）
   - 播放器 UI 与 PC 统一但更紧凑（保留侧栏但字号变小）
   - 播放弹窗打开时冻结背景滚动
   - 纯浏览模式：隐藏上传 / 编辑 / 删除 / 对口型 / 纳品等写操作入口
   - 筛选面板升级为底部抽屉
   ========================================================================== */

/* ---------- 1. 播放器弹窗打开时冻结背景 ---------- */
/* html/body 在 @media (max-width:640px) 里被强制 overflow:auto，需要更高特异性 + !important */
body.is-mobile.player-active,
body.is-mobile.player-active html {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    touch-action: none;  /* 禁止背景跟滑 */
}

/* ---------- 2. 移动端播放器统一 PC 布局（更紧凑） ---------- */
/* 自定义 .p-controls 独占 UI；两行：第一行 播放+进度条+时间，第二行 循环+跳过+音量 */
body.is-mobile #player-modal .p-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    gap: 8px 10px !important;
    background: #0a0a0a;
    border-top: 1px solid var(--border);
    font-size: 12px;
    align-items: center;
}
/* 第一行：播放键 | 进度条（进度条独占一大行，方便触摸） */
body.is-mobile #player-modal .p-controls #v-play-icon {
    font-size: 28px !important;
    cursor: pointer;
    flex: 0 0 auto;
    order: 1;
}
body.is-mobile #player-modal .p-controls .p-bar-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    order: 2;
}
body.is-mobile #player-modal .p-controls .p-bar-wrap input[type=range] {
    width: 100% !important;
    height: 24px !important;
    accent-color: var(--accent, #E60012);
}
/* 换行分隔：进度条行结束 */
body.is-mobile #player-modal .p-controls::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 3;
}
/* 第二行：时间(横排) + 循环 + 自动下一个 + 音量（同一行） */
body.is-mobile #player-modal .p-controls .p-time {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    color: #aaa;
    order: 4;
    display: flex !important;       /* 横排 */
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
}
body.is-mobile #player-modal .p-controls .p-time .p-time-row {
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* 动态/静态时间之间加 "·" 视觉分隔 */
body.is-mobile #player-modal .p-controls .p-time #v-time-dyn::after {
    content: '·';
    color: #555;
    margin: 0 0 0 6px;
}
body.is-mobile #player-modal .p-controls > i.bi-repeat,
body.is-mobile #player-modal .p-controls > i.bi-skip-end {
    flex: 0 0 auto;
    font-size: 22px !important;
    margin: 0 !important;
    cursor: pointer;
}
body.is-mobile #player-modal .p-controls > i.bi-repeat  { order: 5; }
body.is-mobile #player-modal .p-controls > i.bi-skip-end { order: 6; }
body.is-mobile #player-modal .p-controls .volume-control {
    order: 7;
    flex: 0 0 auto;
    margin-left: auto !important;
    gap: 4px !important;
}
body.is-mobile #player-modal .p-controls .volume-control input[type=range] {
    width: 80px !important;
    height: 20px !important;
    accent-color: var(--accent, #E60012);
}

/* 关键：video 高度不超过 40vh（纵向手机），给侧栏留充足空间 */
body.is-mobile #player-modal video#v-player {
    max-height: 40vh !important;
}
body.is-mobile #player-modal .video-wrap {
    cursor: pointer;   /* 允许 tap-to-play */
}

/* p-main 无多余 padding/margin，铺满 */
body.is-mobile #player-modal .p-main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 侧栏：打通左右 padding + 撑满主播放器宽度（覆盖桌面 .p-sidebar max-width:90vw） */
body.is-mobile #player-modal .p-sidebar {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-left: none !important;
}
/* 头部 / 状态行 / 资源列表 仍需一点内边距保持可读 */
body.is-mobile #player-modal .ps-head {
    margin: 0 !important;
    padding: 10px 12px !important;
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
}
body.is-mobile #player-modal .ps-cut { font-size: 14px !important; }
body.is-mobile #player-modal .ps-form {
    gap: 0 !important;
    padding: 0 !important;
}
body.is-mobile #player-modal .ps-form > * {
    padding: 10px 12px;   /* 每个 section 自己带内边距 */
    margin: 0 !important;
}
body.is-mobile #player-modal .ps-form > .ps-info-section {
    padding: 10px 12px;
    border-top: 1px solid #1a1a1a;
}
body.is-mobile #player-modal .ps-info-title { font-size: 11px !important; margin-bottom: 6px !important; }
body.is-mobile #player-modal .ps-info-section { margin-bottom: 0 !important; }
body.is-mobile #player-modal .ps-block-header h4 { font-size: 12px !important; }
body.is-mobile #player-modal .ps-list { font-size: 12px !important; }

/* ★★ 分镜参考：video 铺满 sidebar 宽度（无空隙） ★★ */
body.is-mobile #player-modal #ps-storyboard-section {
    padding: 10px 0 !important;
    margin: 0 !important;
}
body.is-mobile #player-modal #ps-storyboard-section .ps-info-title {
    padding: 0 12px;
}
body.is-mobile #player-modal #ps-storyboard-section .ps-storyboard-wrap {
    width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 6px 0 0 0 !important;
    background: #000;
}
body.is-mobile #player-modal #ps-storyboard-section video#v-storyboard {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

/* ---------- 2b. 隐藏人员状态 / 统计 / 搜索zoom 等非必要行（iPad 768 也生效） ---------- */
body.is-mobile #staff-online-row,
body.is-mobile #stats-row,
body.is-mobile .nav-row.row-2,
body.is-mobile .nav-row.row-3,
body.is-mobile .row-3,
body.is-mobile .card-zoom-ctrl {
    display: none !important;
}

/* 手机端直接把整个 nav 收起（Todo / Dashboard / 按钮都进汉堡抽屉） */
body.is-mobile nav#nav .nav-row.row-1 {
    display: none !important;
}

/* 只有 mobile-filter-open 时再把 row-3 作为底抽屉弹出 */
body.is-mobile.mobile-filter-open .nav-row.row-3,
body.is-mobile.mobile-filter-open .row-3 {
    display: flex !important;
}

/* ---------- 3. 视图下隐藏写操作入口 ---------- */
/* 纯浏览模式：不显示上传、批量、删除、对口型、纳品、报告、导入等按钮 */
body.is-mobile #btn-csv-import,
body.is-mobile #btn-lipsync,
body.is-mobile #btn-review,
body.is-mobile #btn-delivery,
body.is-mobile #btn-add-cut,
body.is-mobile #btn-batch,
body.is-mobile #btn-fix-status,
body.is-mobile #btn-refresh-cache,
body.is-mobile #btn-report,
body.is-mobile #btn-report-project,
body.is-mobile #btn-delivered,
body.is-mobile #btn-table,
body.is-mobile .delivered-wrap,
body.is-mobile .deadline-input {
    display: none !important;
}

/* 卡片内：隐藏返修/反馈/备注的添加和删除按钮（只剩展示） */
/* 手机端也隐藏缩略图上的条带徽章（优先/模板/口型/口型已校对），改到卡片底部紧凑标签栏展示 */
/* 以及卡片删除按钮（.del-btn）— 桌面靠 hover 出现，触屏不该出现 */
body.is-mobile .grid .card .btn-add-inline,
body.is-mobile .grid .card .msg-actions,
body.is-mobile .grid .card .msg-add-btn,
body.is-mobile .grid .card .btn-del,
body.is-mobile .grid .card .btn-ok,
body.is-mobile .grid .card .inline-input-wrap,
body.is-mobile .grid .card .ribbon-toggle,
body.is-mobile .grid .card .badges-right,
body.is-mobile .grid .card .ribbon-badge.priority,
body.is-mobile .grid .card .ribbon-badge.template,
body.is-mobile .grid .card .ribbon-badge.lipsync,
body.is-mobile .grid .card .ribbon-badge.lipsync-done,
body.is-mobile .grid .card .del-btn,
body.is-mobile .grid .card .duration-warn {
    display: none !important;
}

/* 状态/作业者/场景 变成只读，不可编辑（手机纯浏览） */
body.is-mobile .grid .card .sel-status,
body.is-mobile .grid .card .sel-artist,
body.is-mobile .grid .card .scene-tag {
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: none !important;
    padding-right: 6px !important;
}

/* 播放器侧栏也隐藏写按钮（移动端纯浏览） */
body.is-mobile #player-modal .btn-add-inline,
body.is-mobile #player-modal .msg-actions,
body.is-mobile #player-modal .msg-add-btn,
body.is-mobile #player-modal .btn-del,
body.is-mobile #player-modal .btn-ok,
body.is-mobile #player-modal .inline-input-wrap {
    display: none !important;
}
body.is-mobile #player-modal .sel-status,
body.is-mobile #player-modal .sel-artist {
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: none !important;
}

/* ---------- 4. 卡片紧凑默认模式 ---------- */
/* 只保留 c-head（卡号/场景/状态/作业者）+ c-thumb（缩略图）+ badges 左边 + ae-info(素材) */
/* 隐藏消息区（返修/反馈/备注/AI）和动画相关的多余容器 */
body.is-mobile .grid .card .info-direct,
body.is-mobile .grid .card .card-content-area .info-direct,
body.is-mobile .grid .card .msg-row {
    display: none !important;
}

/* ae-info 强制显示作为「素材情况」区 */
body.is-mobile .grid .card .ae-info {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 10px;
    color: #888;
    margin-top: 4px;
}

/* 卡片更紧凑 */
body.is-mobile .grid .card {
    padding: 6px 10px !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--border);
    align-items: center !important;   /* 缩略图和文字垂直居中 */
    min-height: auto !important;       /* 覆盖桌面 min-height: 320px */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}
body.is-mobile .grid .card .c-thumb,
body.is-mobile .grid .card .thumb {
    width: 36% !important;
    max-width: 130px !important;
    min-width: 90px !important;
}
body.is-mobile .grid .card .card-body {
    flex: 1 1 0 !important;
    min-width: 0 !important;          /* 必须，否则 c-head 永远撑不开 */
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* badges-row（左标签 + 右标签）更紧凑 */
body.is-mobile .grid .card .badges-row {
    gap: 4px !important;
}
body.is-mobile .grid .card .badges-left {
    display: flex !important;
    flex-wrap: wrap;
    gap: 3px;
    font-size: 10px;
}

/* c-head：改成两行布局（宽度不够无法一行装下 artist+status+scene） */
body.is-mobile .grid .card .c-head {
    font-size: 12px !important;
    gap: 4px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}
body.is-mobile .grid .card .c-head > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
}
body.is-mobile .grid .card .c-head > div:first-child > span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
}
body.is-mobile .grid .card .c-head .scene-tag {
    flex: 1 1 auto !important;         /* 场景名吃剩下的空间并省略 */
}
body.is-mobile .grid .card .c-head-right {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 4px !important;
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
}
body.is-mobile .grid .card .cut-no {
    font-size: 13px !important;
    font-weight: 700;
    flex-shrink: 0 !important;
}
body.is-mobile .grid .card .scene-tag {
    font-size: 10px !important;
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 120px !important;      /* 场景名太长就省略 */
}
body.is-mobile .grid .card .sel-status,
body.is-mobile .grid .card .sel-artist {
    font-size: 10px !important;
    padding: 2px 6px !important;
    height: auto !important;
    min-height: 20px !important;
    flex: 0 1 auto !important;
    max-width: 50% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    background-image: none !important;
}

/* 左上角标签（.badges / priority / template）保留 */
body.is-mobile .grid .card .badges-left { display: flex !important; }

/* ---------- 手机端卡片底部紧凑标签栏（口型/优先/模板） ---------- */
/* 桌面默认隐藏 */
.mobile-ribbon-row { display: none; }
/* 手机端显示；纯展示，不可点击，不能标记/取消 */
body.is-mobile .grid .card .mobile-ribbon-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px 8px 4px;
    width: 100%;
    flex-basis: 100%;       /* 独占一行：在 card flex row 里换行 */
    border-top: 1px solid #1a1a1a;
    pointer-events: none;   /* 不可标记/取消 */
}
body.is-mobile .grid .card .mobile-ribbon-row:empty {
    display: none !important;
    padding: 0;
    border: none;
}
body.is-mobile .grid .card .mobile-ribbon-row .mrow-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2px;
    user-select: none;
    white-space: nowrap;
}
body.is-mobile .grid .card .mobile-ribbon-row .mrow-tag.priority {
    background: #f97316; color: #fff;
}
body.is-mobile .grid .card .mobile-ribbon-row .mrow-tag.template {
    background: linear-gradient(90deg,#ff6b6b,#ffa500,#ffd700,#4ade80,#60a5fa,#a78bfa,#f472b6);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
body.is-mobile .grid .card .mobile-ribbon-row .mrow-tag.lipsync {
    background: #f472b6; color: #fff;
}
body.is-mobile .grid .card .mobile-ribbon-row .mrow-tag.lipsync-done {
    background: #2a2a2a; color: #888;
}

/* card 要允许换行，才能让 mobile-ribbon-row 独占第二行 */
body.is-mobile .grid .card { flex-wrap: wrap !important; }

/* ---------- 5. 筛选面板底部抽屉化 ---------- */
/* 真 DOM 遮罩（点击关闭）；不用 ::before 避免事件被吞 */
.mobile-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 498;
    animation: mfilter-fade 0.2s ease;
}
body.is-mobile.mobile-filter-open .mobile-filter-backdrop {
    display: block;
}

/* ★ 关键：nav 的 sticky+z-index:50 会创建 stacking context，让抽屉 z:499 只在
   nav 内部比较，backdrop z:498 在根层反而盖住了抽屉。
   打开筛选时把 nav 的 z-index 顶到 backdrop 之上，抽屉就能透出来。 */
body.is-mobile.mobile-filter-open nav#nav {
    z-index: 500 !important;
}
body.is-mobile.mobile-filter-open .nav-row.row-3 {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 499;
    max-height: 80vh;
    overflow-y: auto;
    background: #0d0d0d !important;
    border-top: 2px solid var(--accent, #d4af37);
    border-radius: 16px 16px 0 0 !important;
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
    animation: mfilter-slide-up 0.22s ease-out;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
/* 抽屉内各项基础 layout */
body.is-mobile.mobile-filter-open .nav-row.row-3 > * {
    flex: 1 1 100%;
}
body.is-mobile.mobile-filter-open .nav-row.row-3 .mobile-filter-title {
    flex: 1 1 auto;
}

/* 抽屉内的 × 关闭按钮（JS 注入的 .mobile-filter-close） */
.mobile-filter-close {
    display: none;
    position: absolute;
    top: 8px; right: 8px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ccc;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}
.mobile-filter-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
body.is-mobile.mobile-filter-open .nav-row.row-3 .mobile-filter-close {
    display: flex;
}

/* "筛选" 标题（用真元素，不再 ::before，方便 X 绝对定位对齐） */
body.is-mobile.mobile-filter-open .nav-row.row-3 .mobile-filter-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #d4af37);
    margin-bottom: 8px;
    letter-spacing: 1px;
    padding-right: 40px;   /* 给 X 按钮让位 */
}
.mobile-filter-title { display: none; }   /* 桌面不显示 */

/* 筛选项紧凑 */
body.is-mobile.mobile-filter-open .nav-row.row-3 .filter-item {
    width: 100%;
    margin-bottom: 4px;
    gap: 2px !important;
}
body.is-mobile.mobile-filter-open .nav-row.row-3 .filter-item select {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    background: #1a1a1a;
    border-radius: 6px;
}
body.is-mobile.mobile-filter-open .nav-row.row-3 .filter-item span {
    font-size: 10px;
    color: #888;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
/* 筛选标签按钮排 2x2 */
body.is-mobile.mobile-filter-open .nav-row.row-3 .ribbon-filter-btn {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    gap: 4px;
}
/* 搜索 / 筛选结果 行 */
body.is-mobile.mobile-filter-open .nav-row.row-3 .filter-result {
    font-size: 11px;
    order: -1;
    flex: 0 0 auto;
}
body.is-mobile.mobile-filter-open .nav-row.row-3 .search-item {
    width: 100% !important;
    gap: 4px !important;
}
body.is-mobile.mobile-filter-open .nav-row.row-3 .search-item input {
    width: 100% !important;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
}
body.is-mobile.mobile-filter-open .nav-row.row-3 .card-zoom-ctrl {
    display: none;
}

/* Final desktop/tablet compact-card grid: 2x previous small cards while preserving 16:9 thumbs. */
@media (min-width: 641px) {
    .grid.zoom-xs,
    .grid.zoom-s {
        grid-template-columns: repeat(auto-fill, minmax(max(var(--card-min-w, 140px), calc((100% - 88px) / 12)), 1fr)) !important;
        gap: var(--card-gap, 8px) !important;
    }
}

@keyframes mfilter-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mfilter-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ---------- 6. 顶部黑边 nav 统一 ---------- */
body.is-mobile nav {
    padding: 8px 10px !important;
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
    position: sticky;
    top: 0;
    z-index: 50;
}
body.is-mobile .proj-info {
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}
body.is-mobile .nav-actions .btn-text {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 6px;
}
body.is-mobile .nav-actions .icon {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
body.is-mobile .mobile-filter-toggle {
    width: 34px !important;
    height: 30px !important;
    font-size: 15px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: var(--accent, #d4af37);
}
body.is-mobile.mobile-filter-open .mobile-filter-toggle {
    background: var(--accent, #d4af37);
    color: #000;
}

/* ============ 节假日面板（顶导右上角"今日 JP/CN 节日"chip + 全年弹窗） ============
   被 topbar-holiday.js 渲染。三页（index/ai_studio/forum）通用样式。 */
@keyframes hpFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
#holiday-panel .hp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; border-bottom: 1px solid #2a2a2a; }
#holiday-panel .hp-title { font-size: 14px; font-weight: 700; color: #eee; }
#holiday-panel .hp-close { background: none; border: none; color: #666; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
#holiday-panel .hp-close:hover { color: #fff; }
#holiday-panel .hp-cols { display: flex; gap: 0; overflow-y: auto; max-height: calc(100vh - 110px); }
#holiday-panel .hp-col { flex: 1; padding: 10px 14px 16px; min-width: 0; }
#holiday-panel .hp-col + .hp-col { border-left: 1px solid #2a2a2a; }
#holiday-panel .hp-flag { font-size: 12px; font-weight: 700; margin-bottom: 8px; padding: 4px 8px; border-radius: 4px; display: inline-block; }
#holiday-panel .hp-month { font-size: 11px; font-weight: 600; color: #888; margin: 10px 0 4px; padding-left: 2px; }
#holiday-panel .hp-month:first-of-type { margin-top: 4px; }
#holiday-panel .hp-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 6px; border-radius: 4px; font-size: 12px; line-height: 1.5; }
#holiday-panel .hp-row:hover { background: rgba(255, 255, 255, 0.04); }
#holiday-panel .hp-date { color: #999; min-width: 38px; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
#holiday-panel .hp-name { color: #ccc; }
#holiday-panel .hp-row.is-today { background: rgba(230, 0, 18, 0.12); border: 1px solid rgba(230, 0, 18, 0.3); }
#holiday-panel .hp-row.is-today .hp-name { color: #fff; font-weight: 600; }
#holiday-panel .hp-row.is-past { opacity: 0.45; }

/* 语言切换按钮（在 style.css 已有；这里复制一份保证 ai_studio / forum 也能用） */
.lang-switcher-nav { display: flex; gap: 2px; margin-left: 6px; border-left: 1px solid #333; padding-left: 8px; }
.lang-nav-btn {
    background: transparent; border: 1px solid #333; color: #555; padding: 3px 8px; font-size: 10px;
    cursor: pointer; border-radius: 4px; transition: all 0.2s; font-family: 'JetBrains Mono', monospace; font-weight: 600;
}
.lang-nav-btn:hover { color: #aaa; border-color: #555; }
.lang-nav-btn.active { color: var(--accent, #E60012); border-color: var(--accent, #E60012); background: rgba(230,0,18,0.08); }