/* ============================================================
   LIQUID GLASS — 全站液态玻璃视觉层
   ------------------------------------------------------------
   设计要点：
   1) 环境光：body 铺一层极淡的固定径向光斑。玻璃必须有「可折射的内容」，
      否则模糊一层纯色背景等于没有效果。
   2) 双层背景：background-color 给基础透明色，background-image 给斜向光泽。
      两层叠加形成厚薄不均的色调 → 这才是「液态」而非「磨砂白」的关键。
   3) 高光描边：inset 顶部 1px 白色高光 + 底部弱高光，模拟玻璃边缘的折射亮边。
   4) 真实模糊（backdrop-filter）只用在「背后有内容细节」的浮层：
      侧边栏、弹窗、下拉/右键菜单、提示条。卡片背后只有平滑的环境光，
      对平滑渐变做 blur 没有视觉收益却要付 GPU 代价，所以卡片只做半透明。
   5) 暗色：本文件加载在 apple-style.css 之后，apple 的暗色补丁用了
      !important，会被这里的 !important 覆盖，因此每一种表面都必须在
      下方暗色块里重新声明一次。

   引用方式：<link rel="stylesheet" href="css/liquid-glass.css?v=20260918f">
   引入位置：
     - 主站页面 → 紧跟在 apple-style.css 之后
     - 独立页 → 放在页面内嵌 <style> 之前（页面自身的 body 背景会覆盖环境光）。
     - 深色底的独立页 → 再在 <html> 上加 data-lg="dark"，本文件会把玻璃令牌
       切换为暗色版本（浅色页面保持不加，用默认令牌）。
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root {
    /* 玻璃基础色与光泽
       白度不能按「绝对值」定，要按「和背景的落差」定。实测过一版「越往上
       越白」的令牌（0.16 / 0.32 / 0.62）：三层半透明白是**相乘**叠加的，
       最终卡片处白度 = 1-(1-0.16)(1-0.32)(1-0.62) ≈ 78%，背景蓝几乎被
       盖死，整页只剩「一堆灰白卡片」，这正是「看不出来玻璃」的原因。
       白度必须**整体压低**，让环境光透过来：主面板 0.10（面积最大，最薄）
       → 结构层 0.18 → 卡片 0.52（最白，内容最需要清楚）。
       合成后卡片处白度 ≈ 65%，环境蓝还留三分之一，卡片是「浅蓝玻璃」而
       不是「白纸」——层与层之间才有可辨识的台阶。 */
    --lg-tint: rgba(255, 255, 255, 0.52);
    --lg-tint-strong: rgba(255, 255, 255, 0.66);
    --lg-tint-soft: rgba(255, 255, 255, 0.20);
    --lg-tint-veil: rgba(255, 255, 255, 0.18);   /* 结构层：中间那层磨砂 */
    --lg-tint-panel: rgba(255, 255, 255, 0.10);  /* 页面主面板：面积最大，最薄 */
    --lg-tint-nav: rgba(255, 255, 255, 0.40);    /* 侧边栏：比背景亮一档，但不能白 */
    /* 光泽的斜向白是**层层叠加**的：容器、区块、卡片各加一次。实测
       left 停 0.42 的白在嵌套三层后能叠到 0.8 以上，整页左上角就糊成一片
       白，反而看不见层次。所以结构性层的光泽必须很淡，厚光泽只留给卡片。 */
    --lg-sheen: linear-gradient(150deg,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(255, 255, 255, 0.02) 44%,
            rgba(255, 255, 255, 0.14) 100%);
    --lg-sheen-soft: linear-gradient(150deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.00) 48%,
            rgba(255, 255, 255, 0.06) 100%);
    --lg-sheen-card: linear-gradient(150deg,
            rgba(255, 255, 255, 0.40) 0%,
            rgba(255, 255, 255, 0.00) 48%,
            rgba(255, 255, 255, 0.12) 100%);

    /* 边缘：亮边 + 高光 + 投影
       玻璃的「边界感」几乎全靠这一圈亮边 + 贴身投影，白度反而次要。
       亮边必须是实打实的白，投影要收得紧，形状才立得住。 */
    --lg-edge: 1px solid rgba(255, 255, 255, 0.88);
    --lg-edge-soft: 1px solid rgba(255, 255, 255, 0.76);
    --lg-inner: inset 0 1px 0 rgba(255, 255, 255, 0.95),
                inset 0 -1px 0 rgba(255, 255, 255, 0.26),
                inset 1px 0 0 rgba(255, 255, 255, 0.50),
                inset -1px 0 0 rgba(255, 255, 255, 0.50);
    /* 浅色背景下白亮边几乎看不见，面板能从背景上「浮」起来全靠这层
       贴身投影，所以投影要够实；色相取蓝灰而不是纯黑，否则在浅蓝底
       上会显脏。 */
    --lg-drop: 0 0 0 0.5px rgba(46, 80, 128, 0.10),
               0 1px 2px rgba(46, 80, 128, 0.10),
               0 10px 26px -10px rgba(46, 80, 128, 0.30);
    --lg-drop-lg: 0 0 0 0.5px rgba(46, 80, 128, 0.10),
                  0 2px 6px rgba(46, 80, 128, 0.12),
                  0 26px 60px -18px rgba(46, 80, 128, 0.40);

    /* 模糊强度（标准档） */
    --lg-blur: 22px;
    --lg-blur-lg: 28px;
    --lg-saturate: 185%;
}

/* 暗底独立页（login / register / forgot_password / qr_scan 等） */
html[data-lg="dark"] {
    --lg-tint: rgba(28, 28, 30, 0.52);
    --lg-tint-strong: rgba(28, 28, 30, 0.66);
    --lg-tint-soft: rgba(28, 28, 30, 0.34);
    --lg-tint-veil: rgba(28, 28, 30, 0.24);
    --lg-tint-panel: rgba(28, 28, 30, 0.40);
    --lg-tint-nav: rgba(28, 28, 30, 0.46);
    --lg-sheen: linear-gradient(150deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.00) 42%,
            rgba(255, 255, 255, 0.05) 100%);
    --lg-sheen-soft: linear-gradient(150deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.00) 46%,
            rgba(255, 255, 255, 0.04) 100%);
    --lg-edge: 1px solid rgba(255, 255, 255, 0.14);
    --lg-edge-soft: 1px solid rgba(255, 255, 255, 0.10);
    --lg-inner: inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --lg-drop: 0 1px 2px rgba(0, 0, 0, 0.30),
               0 12px 30px -10px rgba(0, 0, 0, 0.60);
    --lg-drop-lg: 0 2px 6px rgba(0, 0, 0, 0.35),
                  0 28px 64px -16px rgba(0, 0, 0, 0.70);
}

/* ============================================================
   2. 环境光背景 — 给玻璃提供可折射的内容
   配色只取站点品牌色系（蓝 #007AFF / 青 #5AC8FA / 湖蓝 #00B0D4），
   不用紫、不用橙：彩色一多整页就会「花」，玻璃的质感反而被冲掉。
   ============================================================ */
/* 关键：背景必须**整体**比面板暗一档，而且**要有明暗跨度**。
   浅色版背景同理：底色不能是纯白，否则叠加白的面板无处可去，
   整页会糊成一片"白纸"。所以底色取浅蓝白（#D9E7F8 一档，看着仍是
   偏白的页面，但比面板暗一档），只把右上角推成纯白强光——面板的白
   叠加在亮处和暗处会得到**不同**的合成色，卡片上就能看见斜向明暗过渡。
   注意：背景越浅，亮边（白描边）越不可见，边界感就必须靠投影扛，
   所以这里的投影比深背景版本更实、更偏蓝灰（不是纯黑）。
   配色只取站点蓝系（#C8DBF3 ↔ #FFFFFF / 点缀青 #4AC8F4），不引入紫 / 橙。 */
body {
    background-color: #D9E7F8;
    background-image:
        radial-gradient(64% 56% at 88% 0%, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.84) 24%, rgba(233, 243, 254, 0.40) 54%, rgba(233, 243, 254, 0) 78%),
        radial-gradient(78% 64% at 0% 104%, rgba(131, 170, 216, 0.62) 0%, rgba(158, 193, 229, 0.38) 36%, rgba(190, 214, 240, 0.16) 64%, rgba(190, 214, 240, 0) 86%),
        radial-gradient(44% 38% at 46% 66%, rgba(122, 196, 244, 0.24) 0%, rgba(122, 196, 244, 0) 78%),
        radial-gradient(50% 44% at 0% 0%, rgba(160, 192, 228, 0.52) 0%, rgba(160, 192, 228, 0) 78%),
        radial-gradient(54% 46% at 78% 100%, rgba(174, 204, 238, 0.46) 0%, rgba(174, 204, 238, 0) 80%),
        linear-gradient(150deg, #C8DBF3 0%, #DEEAF9 34%, #FFFFFF 62%, #CFE0F6 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000000;
        background-image:
            radial-gradient(58% 48% at 2% -8%, rgba(10, 132, 255, 0.52) 0%, rgba(10, 132, 255, 0) 60%),
            radial-gradient(48% 42% at 104% 0%, rgba(0, 176, 212, 0.42) 0%, rgba(0, 176, 212, 0) 62%),
            radial-gradient(66% 54% at 100% 104%, rgba(64, 200, 240, 0.38) 0%, rgba(64, 200, 240, 0) 64%),
            radial-gradient(52% 44% at -4% 102%, rgba(0, 81, 213, 0.44) 0%, rgba(0, 81, 213, 0) 62%),
            linear-gradient(158deg, #05070C 0%, #071021 50%, #04101A 100%);
    }
}

/* 注意：独立页的 <link> 插在页面内嵌 <style> 之前，页面自己的 body 背景
   与本区块同为「元素选择器」优先级但出现更晚，会自然覆盖上面的环境光，
   因此这里不再重置 body —— 否则会抹掉深色页 body 自身的底色。 */

/* ============================================================
   2.5 结构层 — 页面骨架
   最薄的一层雾 + 斜向光泽，并把背后的环境色「加饱和」——
   saturate 是让半透明白看起来像玻璃而不是像牛奶的关键一步：
   背景色被提纯后透过面板，边缘才会有「浸在液体里」的通透感。
   背后是平滑渐变，blur 对渐变几乎没有视觉收益，所以这里只做 saturate，
   避免整页多出一层大面积的 GPU 模糊合成。
   ============================================================ */
.container.glass,
.glass,
.section,
.cloud-header,
.cloud-toolbar,
.cloud-content {
    background-color: var(--lg-tint-veil) !important;
    background-image: var(--lg-sheen-soft) !important;
    -webkit-backdrop-filter: saturate(var(--lg-saturate)) !important;
    backdrop-filter: saturate(var(--lg-saturate)) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop) !important;
}

/* 页面主面板（.container.glass）：整页内容的最外层，比骨架厚一档，
   但远不到卡片那么白 —— 它面积最大，稍微厚一点整页就糊了。 */
.container.glass {
    background-color: var(--lg-tint-panel) !important;
    box-shadow: var(--lg-inner), var(--lg-drop-lg) !important;
}

/* 骨架层里再套一层的分组容器（如 .section 内的 .materials-grid）不再加白，
   否则每深一层就多糊一层白，最后必然退回不透明。 */

/* ============================================================
   3. 真实模糊浮层 — 背后有内容细节，必须 blur
   ============================================================ */

/* 侧边栏：页面内容会从它下面滚过 */
.sidebar {
    background-color: var(--lg-tint-nav) !important;
    background-image: var(--lg-sheen) !important;
    -webkit-backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur)) !important;
    backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur)) !important;
    border-right: var(--lg-edge) !important;
    box-shadow: var(--lg-inner), 8px 0 32px -18px rgba(16, 24, 40, 0.28) !important;
}

.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
}

/* 侧边栏内部的浮层：父级已经是模糊根，子级再做 blur 无意义且更耗性能，
   所以只用半透明 + 高光做出「玻璃上的玻璃」层次。 */
.sidebar-music-player,
.admin-info-sidebar,
.user-info-sidebar {
    background-color: var(--lg-tint-soft) !important;
    background-image: var(--lg-sheen-soft) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: var(--lg-inner) !important;
}

/* 弹窗面板：背后是整页内容 */
.modal-content {
    background-color: var(--lg-tint-strong) !important;
    background-image: var(--lg-sheen) !important;
    -webkit-backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur-lg)) !important;
    backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur-lg)) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop-lg) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(255, 255, 255, 0.42) !important;
}

/* 播放列表面板 */
.gp-pl-modal-content {
    background-color: var(--lg-tint-strong) !important;
    background-image: var(--lg-sheen) !important;
    -webkit-backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur-lg)) !important;
    backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur-lg)) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop-lg) !important;
}

/* 下拉菜单 / 右键菜单 / 提示条：悬浮在内容之上，必须 blur */
.dropdown-menu,
.context-menu,
.gp-toast {
    -webkit-backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur)) !important;
    backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur)) !important;
}

.dropdown-menu,
.context-menu {
    background-color: var(--lg-tint-strong) !important;
    background-image: var(--lg-sheen) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop) !important;
}

/* 移动端工具栏 / 汉堡按钮：内容从其下方滚过 */
.mobile-toolbar,
.hamburger-menu {
    background-color: var(--lg-tint-strong) !important;
    background-image: var(--lg-sheen) !important;
    -webkit-backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur)) !important;
    backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur)) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop) !important;
}

/* 注：.container.glass 只由上面的「2.5 结构层」负责。它是最外层的整页面板，
   若在这里再声明一次厚玻璃 + blur，会因为「同选择器 + 同 !important + 位置更靠后」
   覆盖掉薄雾，整页退回一片白。 */

/* ============================================================
   4. 半透明玻璃面 — 卡片 / 列表 / 表格
   背后是平滑环境光，只做半透明 + 光泽 + 高光边，不做 blur
   ============================================================ */
.card,
.card-container,
.courseware-card,
.album-card,
.media-card,
.feature-card,
.stat-card,
.vpn-room-card,
.management-card,
.album-resource-card,
.material-item,
.list-group,
.file-list,
.empty-state,
.upload-area,
.ppt-container,
/* 以下为各页自建的白底容器：此前不在清单里，所以在各自页面上仍是
   一块不透明的白，玻璃效果「漏」掉的就是这些地方。类名语义都是卡片 /
   分组面板，沿用同一套卡片配方即可（不额外加白，避免越套越糊）。 */
.error-container,
.batch-container,
.login-container,
.register-container,
.info-card,
.settings-card,
.tts-card,
.tip-card,
.history-panel,
.chat-box,
.record-card,
.step-card,
.section-card,
.mode-panel,
.ctl-box,
.room-card,
.guide-box,
.server-info,
.wish-card,
.blessing-card,
.hero-card,
.faq-card,
.tabs,
.table-container,
.iframe-container,
.edge-card,
.question-box,
.success-panel,
.content-item,
.audio-description {
    background-color: var(--lg-tint) !important;
    background-image: var(--lg-sheen-card) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop) !important;
}

/* 卡片悬停：抬升 + 更明显的玻璃光泽（沿用站点原有 -2px 位移） */
.card:hover,
.courseware-card:hover,
.album-card:hover,
.media-card:hover,
.feature-card:hover,
.vpn-room-card:hover,
.management-card:hover,
.album-resource-card:hover {
    box-shadow: var(--lg-inner), var(--lg-drop-lg) !important;
}

/* 表格：整块玻璃，表头稍厚一点形成层次 */
table {
    background-color: var(--lg-tint-soft) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop) !important;
}

thead th {
    background-color: var(--lg-tint-soft) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.42) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}

tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.34) !important;
}

tbody tr:hover,
.list-group-item:hover,
.file-item:hover {
    background-color: rgba(255, 255, 255, 0.42) !important;
}

.list-group-item,
.file-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.34) !important;
}

/* ============================================================
   5. 表单控件 — 内凹玻璃
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="file"],
textarea,
select {
    background-color: var(--lg-tint-soft) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: inset 0 1px 3px rgba(16, 24, 40, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    background-color: var(--lg-tint-strong) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

/* 分段控件：玻璃轨道 + 玻璃滑块 */
.segmented-control {
    background-color: var(--lg-tint-soft) !important;
    background-image: var(--lg-sheen-soft) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: inset 0 1px 3px rgba(16, 24, 40, 0.06) !important;
}

.segmented-control .segment.is-active,
.segmented-control button[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.85) !important;
    background-image: var(--lg-sheen-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
                0 1px 3px rgba(16, 24, 40, 0.12) !important;
}

/* ============================================================
   6. 按钮 — 实心按钮加玻璃光泽，浅色按钮做成玻璃胶囊
   ============================================================ */
.btn-primary {
    background-color: #007AFF !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 58%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40),
                0 1px 2px rgba(0, 122, 255, 0.28),
                0 6px 18px -4px rgba(0, 122, 255, 0.40) !important;
}

.btn-secondary,
.btn-ghost {
    background-color: var(--lg-tint-soft) !important;
    background-image: var(--lg-sheen-soft) !important;
    border: var(--lg-edge-soft) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: var(--lg-inner), 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}

/* 分页按钮：小玻璃胶囊 */
.page-btn,
.pagination a,
.pagination span.page-btn {
    background-color: var(--lg-tint-soft) !important;
    background-image: var(--lg-sheen-soft) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner) !important;
}

.page-btn:hover,
.pagination a:hover {
    background-color: rgba(255, 255, 255, 0.72) !important;
}

.page-btn.current,
.pagination span.current,
.pagination .current,
.page-btn.active {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40),
                0 4px 14px -4px rgba(0, 122, 255, 0.45) !important;
}

/* 标签 / 徽章：默认灰底改为玻璃胶囊 */
.tag,
.badge {
    background-color: var(--lg-tint-soft) !important;
    background-image: var(--lg-sheen-soft) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner) !important;
}

/* ============================================================
   7. 降级与可访问性
   ============================================================ */

/* 浏览器不支持 backdrop-filter：提高不透明度，避免文字糊在背景上 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sidebar,
    .modal-content,
    .gp-pl-modal-content,
    .dropdown-menu,
    .context-menu,
    .mobile-toolbar,
    .hamburger-menu,
    .container.glass {
        background-color: rgba(255, 255, 255, 0.92) !important;
    }
}

/* 系统「降低透明度」：全部改为不透明 */
@media (prefers-reduced-transparency: reduce) {
    .sidebar,
    .modal-content,
    .gp-pl-modal-content,
    .dropdown-menu,
    .context-menu,
    .mobile-toolbar,
    .hamburger-menu,
    .container.glass,
    .card,
    .card-container,
    .management-card,
    .album-resource-card,
    .list-group,
    .file-list,
    .lg-page-card,
    .info-card,
    .settings-card,
    .tts-card,
    .step-card,
    .section-card,
    .table-container,
    .tabs,
    .error-container,
    .batch-container,
    .login-container,
    .register-container {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        background-image: none !important;
    }
}

/* 移动端：缩小模糊半径，控制 GPU 开销 */
@media (max-width: 768px) {
    :root {
        --lg-blur: 16px;
        --lg-blur-lg: 18px;
    }

    /* 移动端卡片数量多且屏幕小，环境光透过率略降以保证文字对比度 */
    .card,
    .card-container,
    .management-card,
    .album-resource-card,
    .list-group,
    .file-list,
    .lg-page-card,
    .info-card,
    .settings-card,
    .tts-card,
    .step-card,
    .section-card,
    .table-container,
    .tabs,
    .error-container,
    .batch-container,
    .login-container,
    .register-container {
        background-color: rgba(255, 255, 255, 0.68) !important;
    }
}

/* ============================================================
   8. 暗色模式 — 必须重新声明，否则会被本文件浅色规则覆盖
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .sidebar,
    .modal-content,
    .gp-pl-modal-content,
    .dropdown-menu,
    .context-menu,
    .mobile-toolbar,
    .hamburger-menu,
    .container.glass {
        background-color: rgba(28, 28, 30, 0.62) !important;
        background-image: var(--lg-sheen) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
                    0 28px 64px -16px rgba(0, 0, 0, 0.70) !important;
    }

    .card,
    .card-container,
    .courseware-card,
    .album-card,
    .media-card,
    .feature-card,
    .stat-card,
    .vpn-room-card,
    .management-card,
    .album-resource-card,
    .list-group,
    .file-list,
    .empty-state,
    .upload-area,
    .cloud-header,
    .cloud-toolbar,
    .cloud-content,
    .ppt-container,
    .error-container,
    .batch-container,
    .login-container,
    .register-container,
    .info-card,
    .settings-card,
    .tts-card,
    .tip-card,
    .history-panel,
    .chat-box,
    .record-card,
    .step-card,
    .section-card,
    .mode-panel,
    .ctl-box,
    .room-card,
    .guide-box,
    .server-info,
    .wish-card,
    .blessing-card,
    .hero-card,
    .faq-card,
    .tabs,
    .table-container,
    .iframe-container,
    .edge-card,
    .question-box,
    .success-panel,
    .content-item,
    .audio-description {
        background-color: rgba(28, 28, 30, 0.58) !important;
        background-image: var(--lg-sheen-soft) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
                    0 12px 30px -10px rgba(0, 0, 0, 0.60) !important;
    }

    table {
        background-color: rgba(28, 28, 30, 0.50) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
                    0 12px 30px -10px rgba(0, 0, 0, 0.60) !important;
    }

    thead th {
        background-color: rgba(44, 44, 46, 0.60) !important;
        border-bottom-color: rgba(255, 255, 255, 0.10) !important;
    }

    tbody tr,
    .list-group-item,
    .file-item {
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    tbody tr:hover,
    .list-group-item:hover,
    .file-item:hover {
        background-color: rgba(255, 255, 255, 0.06) !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="file"],
    textarea,
    select {
        background-color: rgba(44, 44, 46, 0.52) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.40),
                    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="number"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    textarea:focus,
    select:focus {
        background-color: rgba(58, 58, 60, 0.60) !important;
    }

    .sidebar-header,
    .modal-header,
    .modal-footer,
    .sidebar-music-player,
    .admin-info-sidebar,
    .user-info-sidebar {
        border-color: rgba(255, 255, 255, 0.10) !important;
    }

    .sidebar-music-player,
    .admin-info-sidebar,
    .user-info-sidebar {
        background-color: rgba(44, 44, 46, 0.40) !important;
        background-image: var(--lg-sheen-soft) !important;
    }

    .segmented-control {
        background-color: rgba(44, 44, 46, 0.50) !important;
        border-color: rgba(255, 255, 255, 0.10) !important;
    }

    .segmented-control .segment.is-active,
    .segmented-control button[aria-selected="true"] {
        background-color: rgba(99, 99, 102, 0.60) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
                    0 1px 3px rgba(0, 0, 0, 0.40) !important;
    }

    .btn-secondary,
    .btn-ghost,
    .page-btn,
    .pagination a,
    .pagination span.page-btn,
    .tag,
    .badge {
        background-color: rgba(44, 44, 46, 0.52) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    }

    .page-btn:hover,
    .pagination a:hover {
        background-color: rgba(58, 58, 60, 0.70) !important;
    }
}

/* 暗底独立页（html[data-lg="dark"]）：与上面暗色块同款，靠属性生效而非系统偏好 */
html[data-lg="dark"] .sidebar,
html[data-lg="dark"] .modal-content,
html[data-lg="dark"] .gp-pl-modal-content,
html[data-lg="dark"] .dropdown-menu,
html[data-lg="dark"] .context-menu,
html[data-lg="dark"] .container.glass,
html[data-lg="dark"] .card,
html[data-lg="dark"] .card-container,
html[data-lg="dark"] .list-group {
    background-image: var(--lg-sheen) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
                0 28px 64px -16px rgba(0, 0, 0, 0.70) !important;
}

html[data-lg="dark"] input[type="text"],
html[data-lg="dark"] input[type="password"],
html[data-lg="dark"] input[type="email"],
html[data-lg="dark"] input[type="url"],
html[data-lg="dark"] input[type="number"],
html[data-lg="dark"] input[type="search"],
html[data-lg="dark"] input[type="tel"],
html[data-lg="dark"] textarea,
html[data-lg="dark"] select {
    background-color: rgba(44, 44, 46, 0.52) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================
   9. 可选工具类 — 供后续页面按需开启
   ============================================================ */
.lg-glass {
    background-color: var(--lg-tint) !important;
    background-image: var(--lg-sheen) !important;
    -webkit-backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur)) !important;
    backdrop-filter: saturate(var(--lg-saturate)) blur(var(--lg-blur)) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop) !important;
}

/* 独立页的居中主卡片：整页只有这一块面板（登录 / 扫一扫 / 播放器等），
   不套 .container.glass 的整页面板配方（那档只给 10% 白，单卡片会显得
   太虚、文字对比度不够），改沿用卡片配方 —— 52% 白 + 光泽 + 高光边。 */
.lg-page-card {
    background-color: var(--lg-tint) !important;
    background-image: var(--lg-sheen-card) !important;
    -webkit-backdrop-filter: saturate(var(--lg-saturate)) !important;
    backdrop-filter: saturate(var(--lg-saturate)) !important;
    border: var(--lg-edge-soft) !important;
    box-shadow: var(--lg-inner), var(--lg-drop-lg) !important;
}

@media (prefers-color-scheme: dark) {
    .lg-page-card {
        background-color: rgba(28, 28, 30, 0.62) !important;
        background-image: var(--lg-sheen) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
                    0 28px 64px -16px rgba(0, 0, 0, 0.70) !important;
    }
}

html[data-lg="dark"] .lg-page-card {
    background-color: rgba(28, 28, 30, 0.62) !important;
    background-image: var(--lg-sheen) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
                0 28px 64px -16px rgba(0, 0, 0, 0.70) !important;
}
