/* ShowRive - 网盘系统 (ShowAI 风格) */

:root, [data-theme="light"] {
    /* 界面风格令牌默认值 (XCMDY 基线; 11 套风格会整体覆盖这些值) */
    --ctrl-h: 36px; --row-h: 44px; --side-w: 240px; --nav-h: 56px;
    --fs-base: 14px; --fw-base: 400; --lh-base: 1.6;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px;
    --r-btn: var(--radius-sm); --r-input: var(--radius-sm);
    --r-card: var(--radius); --r-modal: var(--radius-lg); --r-menu: var(--radius);
    --fw-btn: 500; --ls-btn: 0;
    --font-serif: Georgia, "Songti SC", "STSong", "SimSun", serif;
    /* 内容区最大宽度令牌 (超宽屏逐级放宽, 避免 2560px 下左右各空 700px) */
    --content-max: 1400px;
    /* 表面 (Material You surface containers) */
    --bg: #f6f8fc;
    --bg-2: #eef1f7;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-container: #f1f4f9;
    --surface-container-high: #e8edf5;
    --bg-card: #ffffff;
    --bg-soft: #f1f4f9;

    /* 文字 */
    --text: #1f1f1f;
    --text-2: #5f6368;
    --text-3: #676d75;
    --text-inverse: #ffffff;

    /* 描边 */
    --border: #e6e9ef;
    --border-2: #dadce0;
    --border-strong: #bdc1c6;

    /* 主色: Google Blue */
    --primary: #1565d0;
    --primary-hover: #185abc;
    --primary-active: #174ea6;
    --primary-text: #ffffff;
    --primary-container: #d3e3fd;
    --on-primary-container: #0842a0;
    --primary-soft: rgba(26,115,232,.09);
    --link: #1a73e8;
    --link-hover: #174ea6;

    /* 语义色 (Google 四色体系) */
    --google-blue: #1a73e8;
    --google-green: #34a853;
    --google-yellow: #fbbc04;
    --google-red: #ea4335;
    --success: #1e8e3e;
    --success-bg: #e6f4ea;
    --success-border: #ceead6;
    --success-text: #137333;
    --warning: #b06000;
    --warning-bg: #fef7e0;
    --warning-border: #feefc3;
    --warning-text: #8a4b00;
    --danger: #c5221f;
    --danger-bg: #fce8e6;
    --danger-border: #f6c7c3;
    --danger-text: #c5221f;
    --info: #1a73e8;
    --info-soft: #e8f0fe;
    --info-bg: #e8f0fe;
    --info-border: #d2e3fc;
    --info-text: #174ea6;

    /* 代码 / 表格 / 输入 */
    --code-bg: #f4f6fa;
    --code-text: #1f1f1f;
    --table-row-alt: #fafbfd;
    --table-row-hover: #f1f4f9;
    --table-header-bg: #f4f6fa;
    --row-hover: #f1f4f9;
    /* 兼容旧 token 别名 (前端 inline 样式与部分历史组件仍引用) */
    --text-muted: var(--text-3);
    --bg-hover: var(--row-hover);
    --card: var(--bg-card);
    --line-soft: var(--border-2);
    --shadow-1: var(--shadow-sm);
    --input-bg: #ffffff;
    --input-border: #dadce0;
    --input-border-hover: #1a73e8;
    --input-text: #1f1f1f;
    --input-placeholder: #676d75;
    --input-focus-ring: rgba(26,115,232,.16);
    --modal-bg: #ffffff;

    /* 圆角阶梯 (Material You radius scale) */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-full: 9999px;

    /* 动效令牌 (升级为 M3 Expressive 曲线族, 圆滑优先)
       standard    常规交互 (进出对称, 干脆不拖沓)
       emphasized  强调动效 (更晚减速 → 更长的"滑翔"尾巴, 弹层/页面转场)
       decelerate  入场专用 (快速起步 + 长尾滑停, 元素像被"放进"最终位置)
       accelerate  退场专用 (缓慢起步 + 快速离场, 视线跟得上再消失)
       spring      弹簧曲线 (轻微过冲回弹, 微交互/toast/滑块)
       soft-spring 极轻微过冲 (大面积元素, 避免晃眼)
       out-quint   黄油滑出 (位移为主的长滑翔, 无过冲)             */
    --ease-standard: cubic-bezier(.2,0,0,1);
    --ease-emphasized: cubic-bezier(.3,0,0,1);
    --ease-decelerate: cubic-bezier(.05,.7,.1,1);
    --ease-accelerate: cubic-bezier(.3,0,.8,.15);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --ease-soft-spring: cubic-bezier(.25,1.12,.4,1);
    --ease-out-quint: cubic-bezier(.22,1,.36,1);
    --dur-1: 110ms;
    --dur-2: 180ms;
    --dur-3: 260ms;
    --dur-4: 380ms;
    --dur-5: 480ms;

    /* 阴影 (Material elevation) */
    --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
    --shadow: 0 1px 3px rgba(16,24,40,.08), 0 4px 12px rgba(16,24,40,.05);
    --shadow-lg: 0 4px 8px rgba(16,24,40,.06), 0 16px 40px rgba(16,24,40,.12);
    --shadow-xl: 0 8px 16px rgba(16,24,40,.08), 0 28px 64px rgba(16,24,40,.16);
    --backdrop: rgba(16,24,40,.42);
    --selection-bg: #cfe4fd;
    --selection-text: #174ea6;
    --scrollbar-thumb: #c8ccd4;
    --scrollbar-thumb-hover: #9aa0a6;
    --scrollbar-track: transparent;

    /* 渐变: 与品牌图标同源 (蓝 → 绿) */
    --gradient-brand: linear-gradient(135deg, #1a73e8, #1e8e3e);
    --gradient-brand-soft: linear-gradient(135deg, rgba(26,115,232,.10), rgba(52,168,83,.10));
    --gradient-hero: linear-gradient(135deg, rgba(26,115,232,.10), rgba(52,168,83,.10));
    color-scheme: light;
}

[data-theme="dark"] {
    /* 表面 */
    --bg: #0f1115;
    --bg-2: #151920;
    --surface: #171b21;
    --surface-2: #1c212a;
    --surface-container: #1c212a;
    --surface-container-high: #242a34;
    --bg-card: #171b21;
    --bg-soft: #232932;

    /* 文字 */
    --text: #e8eaed;
    --text-2: #9aa0a6;
    --text-3: #868d95;
    --text-inverse: #0f1115;

    /* 描边 */
    --border: #262c35;
    --border-2: #30373f;
    --border-strong: #454c57;

    /* 主色: Material You dark 提高明度保证对比度 */
    --primary: #8ab4f8;
    --primary-hover: #a8c7fa;
    --primary-active: #bcd7fb;
    --primary-text: #0b2b5c;
    --primary-container: #174a7c;
    --on-primary-container: #d3e3fd;
    --primary-soft: rgba(138,180,248,.14);
    --link: #8ab4f8;
    --link-hover: #a8c7fa;

    /* 语义色 */
    --google-blue: #8ab4f8;
    --google-green: #81c995;
    --google-yellow: #fdd663;
    --google-red: #f28b82;
    --success: #81c995;
    --success-bg: #0f2a19;
    --success-border: #1e4629;
    --success-text: #81c995;
    --warning: #fdd663;
    --warning-bg: #332500;
    --warning-border: #5a4400;
    --warning-text: #fdd663;
    --danger: #f28b82;
    --danger-bg: #3c1614;
    --danger-border: #5f2120;
    --danger-text: #f28b82;
    --info: #8ab4f8;
    --info-soft: #174a7c;
    --info-bg: #0d2136;
    --info-border: #1a3d5c;
    --info-text: #8ab4f8;

    /* 代码 / 表格 / 输入 */
    --code-bg: #1b2028;
    --code-text: #e8eaed;
    --table-row-alt: #151920;
    --table-row-hover: #1c212a;
    --table-header-bg: #1c212a;
    --row-hover: #1c212a;
    /* 兼容旧 token 别名 (与 light theme 保持对称) */
    --text-muted: var(--text-3);
    --bg-hover: var(--row-hover);
    --card: var(--bg-card);
    --line-soft: var(--border-2);
    --shadow-1: var(--shadow-sm);
    --input-bg: #1c212a;
    --input-border: #30373f;
    --input-border-hover: #8ab4f8;
    --input-text: #e8eaed;
    --input-placeholder: #868d95;
    --input-focus-ring: rgba(138,180,248,.22);
    --modal-bg: #1c212a;

    /* 圆角阶梯 (与亮色一致) */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-full: 9999px;

    /* 动效令牌 (继承, 保证暗色下同样丝滑) */
    --ease-standard: cubic-bezier(.2,0,0,1);
    --ease-emphasized: cubic-bezier(.2,0,0,1);
    --ease-decelerate: cubic-bezier(0,0,.2,1);
    --ease-accelerate: cubic-bezier(.4,0,1,1);
    --ease-spring: cubic-bezier(.34,1.4,.64,1);
    --dur-1: 110ms;
    --dur-2: 180ms;
    --dur-3: 260ms;
    --dur-4: 380ms;

    /* 阴影 (暗色下靠亮度分层而非纯黑投影) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
    --shadow: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.55);
    --shadow-xl: 0 8px 16px rgba(0,0,0,.50), 0 28px 64px rgba(0,0,0,.65);
    --backdrop: rgba(0,0,0,.62);
    --selection-bg: #174a7c;
    --selection-text: #d3e3fd;
    --scrollbar-thumb: #3a414b;
    --scrollbar-thumb-hover: #4d555f;
    --scrollbar-track: transparent;

    --gradient-brand: linear-gradient(135deg, #8ab4f8, #81c995);
    --gradient-brand-soft: linear-gradient(135deg, rgba(138,180,248,.14), rgba(129,201,149,.14));
    --gradient-hero: linear-gradient(135deg, rgba(138,180,248,.12), rgba(129,201,149,.12));
    color-scheme: dark;
}

   /* 动画特效档位 (data-fx)
   visual   = 最佳视觉 (全特效, 默认)
   balanced = 平衡     (保留必要交互反馈, 去掉重动画/弹性/页面转场)
   perf     = 最佳性能 (零动画零过渡, 纯静态切换)
   用 !important 覆盖内联样式与组件级动画, 保证档位真正生效。 */

/* 平衡档: 缩短到近乎瞬时, 但保留"有反馈"的手感 */
[data-fx="balanced"] *,
[data-fx="balanced"] *::before,
[data-fx="balanced"] *::after {
    animation-duration: .1s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .1s !important;
    transition-delay: 0s !important;
}
/* 加载指示器必须持续旋转: 上面那条把迭代次数压成 1, 转 0.1 秒就停,
   看起来像卡住了。进度反馈不是装饰动画, 单独豁免。 */
[data-fx="balanced"] .sr-spin,
[data-fx="balanced"] .sr-spin-inline,
[data-fx="balanced"] .sp-orbit,
[data-fx="balanced"] .sp-orbit.b,
[data-fx="balanced"] .sp-cube {
    animation-iteration-count: infinite !important;
    animation-duration: .9s !important;
}
/* 平衡档下彻底关掉: 无限循环/装饰性/页面的重动画 */
[data-fx="balanced"] .fx-heavy,
[data-fx="balanced"] .fx-decor {
    display: none !important;
}
[data-fx="balanced"] .spa-fade-in,
[data-fx="balanced"] .spa-fade-out {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}
/* 弹性/回弹类关键帧在平衡档退化为线性淡入 */
[data-fx="balanced"] * {
    animation-timing-function: ease-out !important;
}

/* 性能档: 零特效 */
[data-fx="perf"] *,
[data-fx="perf"] *::before,
[data-fx="perf"] *::after {
    animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}
/* 加载指示器不能停。animation:none 让它变成一个静态圆环 —— 用户分不清
   是"加载完了"还是"卡死了"。这与同文件里 reduced-motion 的处理一致:
   不停止, 只放慢。1.6s/圈 的重绘开销可以忽略(一个 18px 的圆环)。 */
[data-fx="perf"] .sr-spin,
[data-fx="perf"] .sr-spin-inline {
    animation: srSpin 1.6s linear infinite !important;
}
[data-fx="perf"] .sp-orbit,
[data-fx="perf"] .sp-orbit.b {
    animation: sp-spin 2.4s linear infinite !important;
}
[data-fx="perf"] .sp-orbit.b { animation-direction: reverse !important; }
[data-fx="perf"] .fx-heavy,
[data-fx="perf"] .fx-decor {
    display: none !important;
}
/* 性能档下把常见"位移/缩放"初态复位, 避免元素停在偏移位置不可见 */
[data-fx="perf"] .ctx-menu-hide,
[data-fx="perf"] [class*="-enter"],
[data-fx="perf"] [class*="-leave"] {
    transform: none !important;
}
/* 性能档: 平滑滚动改瞬时 (避免长列表卡顿) */
[data-fx="perf"] html,
[data-fx="perf"] body {
    scroll-behavior: auto !important;
}

/* 动画特效档位选择器 (账户页) */
.fx-picker { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 720px) {
    .fx-picker { flex-direction: row; }
    .fx-opt { flex: 1; }
}
.fx-opt {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; text-align: left; cursor: pointer;
    background: var(--surface-2, var(--bg-soft));
    border: 1.5px solid var(--border);
    border-radius: 12px;
    transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-standard);
    font: inherit; color: var(--text); width: 100%;
}
.fx-opt:hover { border-color: var(--primary); background: var(--primary-soft); }
.fx-opt:active { transform: scale(.985); }
.fx-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fx-opt.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.fx-opt-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
    background: var(--bg-card); color: var(--primary);
    border: 1px solid var(--border);
}
.fx-opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fx-opt-title { font-weight: 600; font-size: 14px; color: var(--text); }
.fx-opt-desc { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.fx-opt-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
    background: var(--primary); color: #fff;
    opacity: 0; transform: scale(.6);
    transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-spring);
}
.fx-opt.selected .fx-opt-check { opacity: 1; transform: scale(1); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--selection-bg); color: var(--selection-text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Inline SVG (列表/段落内联图标) ===== */
li > svg, p > svg, span > svg, label > svg, a > svg, .text-success > svg, .text-danger > svg,
.card-title > svg, .modal-title > svg, .breadcrumb > svg, .tag > svg, .btn > svg {
    display: inline-block; vertical-align: -2px; margin-right: 4px; flex-shrink: 0;
}
li > svg { vertical-align: -3px; }

/* ===== Layout ===== */
.topbar {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px) saturate(1.8);
    -webkit-backdrop-filter: blur(12px) saturate(1.8);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.topbar-inner {
    max-width: var(--content-max); margin: 0 auto; padding: 0 24px;
    height: 60px; display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand-text { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; color: var(--text-2); margin-left: 2px; }
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    color: var(--text-2); background: transparent; border: none;
    transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-3) var(--ease-spring);
}
.theme-toggle:hover { background: var(--bg-2); color: var(--text); transform: rotate(15deg); }
.menu-toggle {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: var(--bg-2); color: var(--text); border: none;
}
.nav {
    display: flex; gap: 4px; margin-left: 16px; flex: 1;
}
.nav a {
    padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2);
    font-size: 14px; transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.nav a:hover { background: var(--bg-2); color: var(--text); }
.nav a.active { color: var(--text); background: var(--bg-2); font-weight: 500; position: relative; }
.nav a.active::after {
    content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
    width: 60%; height: 2px; border-radius: 1px;
    background: var(--gradient-brand);
}
.user-box {
    display: flex; align-items: center; gap: 8px;
}
.user-points {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px; background: var(--bg-2);
    color: var(--text); font-size: 13px; font-weight: 500;
}
.user-points:hover { background: var(--border); }
/* 自写语言切换下拉 (9 种语言, 原生名) —— 不用浏览器原生, 防多用户卡顿 */
.lang-switcher { position: relative; display: inline-flex; align-items: center; margin-left: 6px; border-left: 1px solid var(--border); padding-left: 8px; }
.lang-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 8px; background: transparent;
    color: var(--text-2); font-size: 13px; cursor: pointer;
    transition: background .15s var(--ease-standard), color .15s var(--ease-standard);
}
.lang-btn:hover { background: var(--bg-2); color: var(--text); }
.lang-btn svg { width: 15px; height: 15px; }
.lang-btn-label { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-btn-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .18s var(--ease-standard); }
.lang-switcher.open .lang-btn-caret { transform: rotate(180deg); }
.lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 450; min-width: 170px;
    background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,.16); padding: 6px;
    display: none; flex-direction: column; gap: 2px;
}
.lang-switcher.open .lang-menu { display: flex; }
.lang-link {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
    font-size: 13px; color: var(--text-2); white-space: nowrap; cursor: pointer;
}
.lang-link:hover { background: var(--bg-2); color: var(--text); }
.lang-link.active { color: var(--text); font-weight: 600; background: var(--bg-2); }
.lang-link.active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary, currentColor); flex-shrink: 0; }
.lang-link-id { font-size: 11px; color: var(--text-2); opacity: .7; margin-left: auto; }

main { min-height: calc(100vh - 60px - 80px); padding: 32px 24px; max-width: var(--content-max); margin: 0 auto; }
.footer {
    border-top: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); font-size: 13px; padding: 24px;
}
.footer-inner {
    max-width: var(--content-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-sub a { color: var(--text-2); }
/* 自定义页脚 */
.custom-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    padding: 16px 24px;
    text-align: center;
    max-width: 100%;
    overflow-x: auto;
}
.custom-footer > * { max-width: 100%; }
.custom-footer img, .custom-footer iframe { max-width: 100%; height: auto; }
.custom-footer a { color: var(--text-2); }
.custom-footer a:hover { color: var(--text); }
.announcement-bar {
    background: var(--gradient-brand-soft);
    color: var(--text); text-align: center; padding: 8px 16px; font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.announcement-inner { display: inline-flex; align-items: center; gap: 8px; }

/* ===== Page ===== */
.page { max-width: 100%; animation: pageIn 0.26s var(--ease-decelerate) both; will-change: opacity, transform; }
@keyframes pageIn {
    0%   { opacity: 0; transform: translateY(8px) scale(.996); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* SPA 主区切换: 新内容进入时整体淡入, 不依赖 innerHTML 瞬时替换导致的"顿一下" */
main.spa-fade-out { opacity: 0; transform: translateY(2px); transition: opacity .1s var(--ease-standard), transform .1s var(--ease-standard); }
main.spa-fade-in > .page { animation: pageIn 0.26s var(--ease-decelerate) both; }
/* 减少动画 (用户偏好) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    main.spa-fade-out, main.spa-fade-in > .page { transition: none !important; animation: none !important; }
}
/* ===== 移动端设计令牌（统一断点 820px，Material You 语义）===== */
:root {
    /* 字体栈 —— 各界面风格 (data-uistyle) 整体替换它, 一处生效全站跟随 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    /* 触控目标（Material 推荐 48dp，高于现有 44px）*/
    --touch-target: 48px;
    --list-row-min: 56px;
    --app-bar-h: 56px;
    --bottom-nav-h: 62px;

    /* 安全区（iOS 刘海 / 安卓手势条）*/
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* 动效曲线时长 */
    --motion-duration-fast: 150ms;
    --motion-duration-base: 250ms;
    --motion-duration-slow: 400ms;

    /* 层级（z-index 语义化）*/
    --z-appbar: 100;
    --z-bottom-nav: 110;
    --z-fab: 120;
    --z-drawer: 200;
    --z-sheet: 210;
    --z-modal: 300;
    --z-toast: 400;
}

/* 三档断点（唯一权威定义，全站禁止 768/900/760）：
     ≤480px  → 手机竖屏（主战场）
     481-820 → 手机横屏 / 小平板
     ≥821px  → 桌面（默认，不动）*/

/* ===== 统一组件：App Bar ===== */
.app-bar {
    position: sticky; top: 0; z-index: var(--z-appbar);
    display: flex; align-items: center;
    height: calc(var(--app-bar-h) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e0e0e0);
}
.app-bar-back {
    width: var(--touch-target); height: var(--touch-target);
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    border-radius: 50%;
}
.app-bar-title { flex: 1; font-size: 18px; font-weight: 600; margin-left: 8px; }
.app-bar-actions { display: flex; gap: 4px; }

/* ===== 统一组件：Bottom Nav ===== */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-bottom-nav);
    display: flex; justify-content: space-around;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #e0e0e0);
}
.bottom-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: var(--touch-target);
    color: var(--text-2, #666); text-decoration: none;
    font-size: 11px; gap: 2px;
}
.bottom-nav-item.active { color: var(--primary, #1a73e8); }
.bottom-nav-item .icon { font-size: 22px; }

/* ===== 统一组件：Bottom Sheet（替代居中弹窗）===== */
.bs-overlay {
    position: fixed; inset: 0; z-index: var(--z-sheet);
    background: rgba(0,0,0,0.4);
    display: flex; align-items: flex-end;
    opacity: 0; transition: opacity var(--motion-duration-base);
}
.bs-overlay.bs-open { opacity: 1; }
.bs-sheet {
    width: 100%; max-height: 85vh;
    background: var(--surface, #fff);
    border-radius: 20px 20px 0 0;
    padding: 8px 0 calc(8px + var(--safe-bottom));
    transform: translateY(100%);
    transition: transform var(--motion-duration-base) cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow-y: auto;
}
.bs-overlay.bs-open .bs-sheet { transform: translateY(0); }
.bs-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-2, #ddd); margin: 4px auto 8px; }
.bs-title { padding: 8px 20px; font-size: 18px; font-weight: 600; }
.bs-body { padding: 4px 20px 16px; }
.bs-actions { display: flex; gap: 8px; padding: 8px 20px; border-top: 1px solid var(--border, #eee); }
.bs-action {
    flex: 1; min-height: var(--touch-target);
    border: none; border-radius: 12px;
    background: var(--primary, #1a73e8); color: #fff;
    font-size: 15px; font-weight: 500;
}
.bs-action.secondary { background: var(--surface-container, #f0f0f0); color: var(--text, #222); }

/* ===== 统一组件：FAB ===== */
.fab {
    position: fixed;
    right: calc(16px + var(--safe-right));
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px);
    z-index: var(--z-fab);
    width: 56px; height: 56px; border-radius: 16px;
    border: none; background: var(--primary, #1a73e8); color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(26,115,232,0.4);
    cursor: pointer;
}

/* ===== 表格横向滚动（解决小屏撑破视口）===== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 600px; }

/* ===== 移动端全局体验优化 ===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 防止横屏放大字体 */
body {
    overscroll-behavior-y: contain; /* 防止下拉刷新 + 边界滚动链 */
    -webkit-tap-highlight-color: transparent; /* 去掉 webkit 点击高亮 */
    touch-action: manipulation; /* 允许双击但不延迟 300ms */
}
input, textarea, select { font-size: 16px; } /* iOS 不会 zoom 触发输入框 */
/* 滚动条样式 (移动端隐藏, 桌面端细线) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 768px) {
    /* 全局触摸优化 — 消除 300ms 点击延迟 + 阻止双击缩放 */
    .btn, .file-item, .admin-side a, .nav a, .dropdown-item, .toast,
    .admin-mobile-bar, .admin-side-close, .ctx-menu-item, .md-dialog-footer .btn,
    .page-title, .card-title, .tag, .tab-btn, .pagination .btn,
    .icon-btn, [role="button"], [data-tooltip] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    /* 关键: 任何"在横向溢出"的元素都允许自身滚动, 不卡外层 */
    .card, .tbl-wrap, .modal, .toast-container { -webkit-overflow-scrolling: touch; }
    .admin-main, .page { -webkit-overflow-scrolling: touch; }
    /* 大点击区 (Apple HIG ≥44pt) */
    .file-item, .admin-side a, .nav a, .btn { min-height: 44px; }
    .btn-sm { min-height: 36px; }
    /* 表格行点击更友好 */
    .tbl tr { transition: background-color var(--dur-2) var(--ease-standard); }
    .tbl tr:active td { background: var(--bg-2); }
    /* 横向滚动表格: 防止页面被撑 */
    .card { overflow-x: auto; max-width: 100vw; }
    /* 文件网格: 单列 + 更大触摸区 */
    .file-grid { grid-template-columns: 1fr; gap: 8px; }
    .file-item { padding: 14px 12px; }
    .file-item .file-icon { width: 48px; height: 48px; }
    .file-item .file-name { font-size: 15px; }
    /* 顶栏: 紧凑 */
    .topbar-inner { height: 52px; padding: 0 12px; }
    .brand-text { font-size: 14px; }
    .topbar { box-shadow: 0 1px 0 var(--border); }
    /* 主区: 顶栏空间 */
    .main { padding-top: 12px; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    /* modal: 底部弹出, 圆角 */
    .modal { max-width: 100%; width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; animation: slideUpModal 0.32s var(--ease-decelerate); }
    .modal-overlay { padding: 0; align-items: flex-end; }
    @keyframes slideUpModal { from { transform: translateY(100%); } to { transform: translateY(0); } }
    /* modal 加下滑关闭手势 */
    .modal-header { padding: 14px 18px; }
    .modal-body { padding: 16px 18px; max-height: 60vh; overflow-y: auto; }
    .modal-footer { padding: 12px 18px; }
    /* 表单元素: 全宽 + 大点击 */
    .input, textarea.input, select.input { padding: 12px 14px; font-size: 16px; }
    .form-row { grid-template-columns: 1fr; gap: 12px; }
    /* 卡片: 减少内边距 */
    .card { padding: 16px; border-radius: 12px; }
    .card-title { font-size: 15px; margin-bottom: 10px; }
    /* 表格 mobile: 隐藏次要列 */
    .tbl th, .tbl td { padding: 8px 10px; font-size: 13px; }
    /* admin 抽屉: 加大触摸区 */
    .admin-mobile-bar { min-height: 48px; font-size: 15px; }
    .admin-side { width: 280px; padding: 20px 16px; gap: 4px; }
    .admin-side a { padding: 14px 16px; font-size: 15px; min-height: 48px; }
    /* 上传队列: 紧凑 */
    .upload-meta { font-size: 12px; }
    .upload-status { font-size: 12px; }
    /* shop 卡片: 紧凑 */
    .stat-card { padding: 14px; }
    /* toast: 底部弹出 (更符合 mobile UX) */
    .toast-container { bottom: 16px; top: auto; right: 16px; left: 16px; max-width: none; }
    .toast { min-width: 0; padding: 12px 16px; font-size: 14px; }
    /* toastIn/toastOut 曾在此重复定义 —— @keyframes 不受 media 作用域限制,
       后被全局 X 向版本整体覆盖, 底部停靠的 toast 会横向滑入滑出。
       方向修正移到全局 keyframes 之后, 用独立命名的 toastInBottom/toastOutBottom */
    /* flash message: 顶部全宽 */
    .flash { padding: 12px 14px; font-size: 14px; }
    /* 标签行: 横向滑 (admin users 表格) */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* 文件预览: 减边距 */
    .preview-img, .preview-video, .preview-audio { border-radius: 8px; }
    .code-preview { padding: 12px; font-size: 12px; }
    /* share create / preview button group: 横向铺 */
    .btn-group { flex-wrap: wrap; }
    /* mobile 文件 grid list view: 全宽单行 */
    .file-item { display: flex; align-items: center; gap: 12px; }
    /* 下拉刷新头部: 顶部细线 */
    .topbar { border-bottom: 1px solid var(--border); }
    /* 移动端专用: 折叠分页 / 移动端分页按钮更大 */
    .pagination .btn { min-width: 44px; min-height: 44px; }
    /* 移动端空状态: 居中紧凑 */
    .empty { padding: 40px 20px; }
    .empty .title { font-size: 16px; }
    /* 移动端 share_view 已不用, 但保持 modal 类可横滑 */
    .file-actions-sheet { bottom: 0; left: 0; right: 0; padding: 12px; background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.12); animation: slideUpModal 0.28s cubic-bezier(.16,1,.3,1); }
    /* iPhone 刘海/安全区适配 */
    .topbar-inner { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .md-dialog { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .toast-container { padding-bottom: env(safe-area-inset-bottom, 0px); }
    /* 移动端禁用 hover 效果 (避免 sticky hover) */
    @media (hover: none) {
        .file-item:hover, .admin-side a:hover, .btn:hover { transform: none; }
    }
    /* 移动端按钮全宽模式 (在卡片底部时) */
    .card-footer-actions { display: flex; flex-direction: column; gap: 8px; }
    .card-footer-actions .btn { width: 100%; min-height: 44px; }
    /* admin 表格移动端: 行可点击展开 (fallback) */
    .tbl-mobile-hide { display: none; }
    /* 文件 grid 列表模式: 元信息隐藏 */
    .file-item .file-meta { font-size: 12px; }
    /* 表单 label 在 mobile 加大 */
    label { font-size: 14px; font-weight: 500; }
    /* 上传 page 拖拽区加大 */
    .upload-zone { padding: 32px 16px; }
    /* 详情面板移动端: 全屏 */
    #detailPanel {
        width: 100% !important; max-width: 100% !important;
        height: 100vh !important; top: 0 !important; right: 0 !important;
    }
    /* 移动端关闭详情面板按钮 */
    #detailPanel .detail-close-mobile {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; top: 12px; right: 12px;
        width: 36px; height: 36px; border: none; background: var(--bg-2);
        border-radius: 50%; color: var(--text); cursor: pointer;
    }
    /* 桌面端隐藏 mobile 专属元素 */
    .mobile-only { display: none; }
}

/* ============================================================
   断点：手机横屏 / 小平板（≤820）—— 统一档位
   ============================================================ */
@media (max-width: 820px) {
    /* 侧边栏 → 抽屉（覆盖层，非内嵌）
       注意: .admin-side 不在此列 —— 管理后台有自己的一套抽屉方案
       (触发条 + 遮罩 + 关闭按钮 + 单列布局), 在 ≤768 断点整体生效。
       若这里提前把它变成 fixed 抽屉, 769~820 之间会出现"侧栏已移出
       屏幕、汉堡条却还没出现"的无人区, 用户彻底失去导航入口。 */
    .sidebar, .side-menu {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 280px; z-index: var(--z-drawer);
        transform: translateX(-100%);
        transition: transform var(--motion-duration-base);
    }
    .sidebar.open, .side-menu.open { transform: translateX(0); }

    /* 主内容让出底部导航空间 */
    .main, .admin-main, .page {
        padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px);
    }

    /* 弹窗 → 底部抽屉（移动端默认，除非显式 .modal-desktop）*/
    .modal:not(.modal-desktop) {
        position: fixed; bottom: 0; left: 0; right: 0;
        top: auto; border-radius: 20px 20px 0 0; max-height: 85vh;
    }
}

/* ============================================================
   断点：手机竖屏（≤480）—— 主战场
   ============================================================ */
@media (max-width: 480px) {
    .card-grid { grid-template-columns: 1fr; }
    .card { border-radius: 16px; }
    .list-item, .file-item, .tbl tr { min-height: var(--list-row-min); }
    /* 工具栏折叠：只留图标（编辑器场景）*/
    .toolbar-text { display: none; }
    .toolbar-icon { display: inline-flex; }
    .hide-mobile { display: none !important; }
}

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block; }
    /* 移动端操作面板: 底部弹出 (之前移到 @media 外面了, 改回来) */
    .mobile-action-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 95; transform: translateY(100%); transition: transform var(--dur-3) var(--ease-emphasized); }
    .mobile-action-sheet.show { transform: translateY(0); }
}
/* 全局顶栏 progress bar (上传/下载进度) */
.global-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
    background: linear-gradient(90deg, var(--primary), var(--info));
    transform-origin: 0% 50%; transform: scaleX(0);
    transition: transform var(--dur-2) var(--ease-standard);
}
.global-progress.active { animation: globalProgress 1.4s ease-in-out infinite; }
@keyframes globalProgress { 0% { transform: scaleX(0); } 50% { transform: scaleX(0.7); } 100% { transform: scaleX(1); } }
/* 拖入高亮 (整页 dragover) */
.drag-over { box-shadow: inset 0 0 0 3px var(--primary) !important; transition: box-shadow var(--dur-2) var(--ease-standard); }
.drag-over-folder { box-shadow: inset 0 0 0 3px var(--info) !important; background: var(--info-bg) !important; transition: box-shadow var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard); transform: scale(1.02); }
.move-tree-folder { border: 1px solid transparent; transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard); }
.move-tree-folder.drag-over-folder { transform: none; border-color: var(--info); }
/* 框选 lasso (Windows 资源管理器风格) */
.selection-lasso {
    position: fixed; pointer-events: none; z-index: 9998;
    background: rgba(91, 141, 239, 0.12);
    border: 1.5px dashed var(--info);
    border-radius: 2px;
    transition: background var(--dur-1) var(--ease-standard);
    will-change: width, height, transform;
}
/* 框选碰撞高亮 (即时, 不等松手) */
.file-item.lasso-hit {
    background: var(--info-bg) !important;
    border-color: var(--info) !important;
    transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard);
}
/* 安全区 (iPhone 刘海/底栏) */
@supports (padding: max(0px)) {
    .topbar, .mobile-bottom-nav, .fab {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .mobile-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .fab { bottom: max(80px, calc(76px + env(safe-area-inset-bottom))); }
}
/* 骨架屏 (loading 状态) */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
    background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-2) 50%, var(--bg-soft) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}
.page-title { font-size: 24px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.page-sub { color: var(--text-2); margin-bottom: 24px; }
.page-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    margin-bottom: 24px; flex-wrap: wrap;
}

/* ===== Cards / Forms ===== */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border-color: var(--border-2);
}
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card-sub { color: var(--text-2); font-size: 13px; margin-bottom: 16px; }
.input, textarea.input, select.input {
    width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--input-border); background: var(--input-bg);
    color: var(--input-text); font-size: 14px; transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.input::placeholder { color: var(--input-placeholder); }
.input:focus {
    outline: none; border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}
label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* 人机验证容器: 第三方 iframe 必须保留固有尺寸, 小屏允许横向滚动 */
#captchaBox {
    min-height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
}
#captchaBox .h-captcha,
#captchaBox .cf-turnstile,
#captchaBox .g-recaptcha,
#captchaBox .showbot-widget {
    display: flex;
    min-height: 65px;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}
#captchaBox iframe { max-width: 100%; }
#captchaBox .captcha-status {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--border, #ddd);
    border-radius: 6px;
    background: var(--bg-2, #f5f5f5);
    color: var(--text-2, #666);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
#captchaBox.captcha-ready { min-height: auto; }
#captchaBox.captcha-load-error { min-height: auto; overflow: visible; }
#captchaBox.captcha-load-error .captcha-status {
    border-color: var(--danger-border, #e3a3a3);
    background: var(--danger-bg, #fff1f1);
    color: var(--danger, #b42318);
}
/* 修复 ShowBot 移动端 UI 残缺.
   ShowBot auth 模式点击后会在容器内展开内联验证码面板 (.sb-inline,
   约 180px 高), 而 #captchaBox 默认 overflow-y:hidden + min-height:70px
   会把面板裁切, 移动端表现尤其明显 (只剩一截). 对 showbot 容器单独
   放开高度/裁切限制, 让内联面板完整显示. */
#captchaBox[data-provider="showbot"] {
    overflow: visible;
    min-height: auto;
    justify-content: center;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    padding: 8px 16px; border-radius: var(--radius-sm); font-size: 14px;
    font-weight: 500; border: 1px solid var(--border-2); background: var(--surface);
    color: var(--text); transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-emphasized); cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
}
.btn:hover { background: var(--bg-2); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.btn:active { transform: translateY(0) scale(0.97); transition: transform var(--dur-1) var(--ease-emphasized), box-shadow var(--dur-1) var(--ease-standard); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
/* 主按钮点击有涟漪光晕 */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,.4) 0%, transparent 60%);
    opacity: 0; transition: opacity var(--dur-3) var(--ease-standard); pointer-events: none;
}
.btn-primary:active::after { opacity: 1; transition: opacity var(--dur-1) var(--ease-standard); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 16px; }
.btn-primary {
    background: var(--primary); color: var(--primary-text); border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #246d3c; }
.btn-danger { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-2); }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-group { display: inline-flex; gap: 6px; }

/* ===== Flash messages ===== */
.flash {
    padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px;
    border: 1px solid; font-size: 14px;
}
.flash-ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.flash-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.flash-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.flash-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }

/* ===== Tables ===== */
/* 表格的横向滚动改由外层 .tbl-scroll 容器承担 (JS 自动包裹, 见 base 尾部脚本)。
   此前这里写死 overflow:hidden —— 它是无条件规则, 特异性 (0,1,1) 永远压过移动端断点里的
   .tbl{overflow-x:auto} (0,1,0)，因为媒体查询本身不增加特异性。结果 360px 下表格内容
   544px 被裁到只剩 342px，且完全无法滚动。
   顺带一提: overflow 对 display:table 的盒子本就不适用，这条声明在桌面上一直是空转的。 */
table.tbl { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
.tbl th { background: var(--table-header-bg); font-weight: 600; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.tbl tr:hover td { background: var(--table-row-hover); }
.tbl tr:last-child td { border-bottom: none; }

/* ===== File grid (Cloudreve 风格 + ShowAI 配色) ===== */
.file-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.breadcrumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--text-2); font-size: 14px; }
.breadcrumb a { color: var(--text-2); padding: 4px 8px; border-radius: 4px; }
.breadcrumb a:hover { background: var(--bg-2); color: var(--text); }
.breadcrumb .sep { color: var(--text-3); }
.breadcrumb .current { color: var(--text); font-weight: 500; }
.file-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.file-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px; cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-emphasized), background var(--dur-2) var(--ease-standard);
    position: relative; user-select: none;
    touch-action: manipulation;
    text-decoration: none; color: var(--text);
    /* will-change: transform 已从此处移除 —— 见移动端性能块注释。
       它是常驻提示而非"即将动画", 加在每个文件项上会为每个格子强制
       提升一个合成层: 500 个文件 = 500 层, 显存先炸, 滚动必掉帧。 */
    contain: layout style paint;
}
.file-item:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); background: var(--surface-2); }
.file-item:active { transform: scale(0.98); box-shadow: inset 0 2px 4px rgba(0,0,0,.05); }
.file-item.is-dir { background: linear-gradient(135deg, var(--info-bg), transparent); }
.file-item.is-dir:hover { background: linear-gradient(135deg, var(--info-bg), var(--surface-2)); }
.file-item .file-icon {
    width: 64px; height: 64px; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-2); border-radius: var(--radius);
    color: var(--text-2);
    transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.file-item:hover .file-icon { transform: scale(1.05); }
.file-item:active .file-icon { transform: scale(.95); }
/* 按文件类型给图标上色, 消除纯灰色沉闷感 */
.file-item .file-icon.icon-folder { color: #f5a623; }
.file-item .file-icon.icon-image { color: #34a853; }
.file-item .file-icon.icon-video { color: #ea4335; }
.file-item .file-icon.icon-audio { color: #9333ea; }
.file-item .file-icon.icon-archive { color: #e07b1f; }
.file-item .file-icon.icon-code { color: #0288d1; }
.file-item .file-icon.icon-text { color: #00897b; }
.file-item .file-icon.icon-doc { color: #1a73e8; }
.file-item .file-icon.icon-other { color: #5c6bc0; }
[data-theme="dark"] .file-item .file-icon.icon-folder { color: #f2c04c; }
[data-theme="dark"] .file-item .file-icon.icon-image { color: #81c995; }
[data-theme="dark"] .file-item .file-icon.icon-video { color: #f28b82; }
[data-theme="dark"] .file-item .file-icon.icon-audio { color: #c58af9; }
[data-theme="dark"] .file-item .file-icon.icon-archive { color: #f5a623; }
[data-theme="dark"] .file-item .file-icon.icon-code { color: #4fc3f7; }
[data-theme="dark"] .file-item .file-icon.icon-text { color: #4db6ac; }
[data-theme="dark"] .file-item .file-icon.icon-doc { color: #8ab4f8; }
[data-theme="dark"] .file-item .file-icon.icon-other { color: #7986cb; }
.file-item .file-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; }
/* 文件项文本默认左对齐: 列表视图 / 路径 / 面包屑场景下居中观感极差。
   网格卡片视图(图标在上、文件名在下)的居中由下方 .file-grid:not(.grid-list) 单独负责。 */
.file-item .file-name { font-size: 13px; word-break: break-all; text-align: left; line-height: 1.4; }
.file-item .file-meta { font-size: 11px; color: var(--text-3); text-align: left; margin-top: 4px; }
/* 网格卡片视图: 图标在上、文件名在下, 居中是 App 通用做法 */
.file-grid:not(.grid-list) .file-item .file-name,
.file-grid:not(.grid-list) .file-item .file-meta { text-align: center; }
.file-item.selected { border-color: var(--info); background: var(--info-bg); box-shadow: 0 0 0 2px var(--info-soft), 0 4px 12px rgba(0,0,0,.06); position: relative; }
.file-item.selected::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--info); border-radius: var(--radius) 0 0 var(--radius); }
.file-item.selected .file-icon { background: var(--info-soft); }
/* 选择模式下复选框会占据左上角, 让锁定徽章淡出让位 (此前两者 top/left 完全相同, 会叠在一起) */
.file-grid.select-mode .file-item .file-badges { opacity: 0; pointer-events: none; }
.file-item .file-badges { transition: opacity var(--dur-2) var(--ease-standard); }
/* 选择框淡入淡出 (从 none → block 也用过渡) */
.file-select-cb {
    transition: opacity var(--dur-2) var(--ease-standard);
}
.file-item .checkbox { position: absolute; top: 8px; left: 8px; }

/* ===== Grid list view (toggled) ===== */
.file-grid.grid-list {
    grid-template-columns: 1fr;
    gap: 4px;
}
.file-grid.grid-list .file-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
}
.file-grid.grid-list .file-item .file-icon {
    width: 36px; height: 36px; margin: 0; flex-shrink: 0;
}
.file-grid.grid-list .file-item .file-icon svg { width: 20px; height: 20px; }
.file-grid.grid-list .file-item .file-name { text-align: left; font-size: 14px; flex: 1; }
.file-grid.grid-list .file-item .file-meta { text-align: right; font-size: 12px; margin-top: 0; flex-shrink: 0; }

/* 视图切换 (网格 / 列表) 内容入场动效
   grid-template-columns / flex-direction 都不可过渡, 所以布局本身必然是瞬时的;
   这里用"落位淡入"让突变变得可读: 布局立刻切换, 每一项再以极小位移淡入归位。
   交错: JS 给每项设 --view-i, delay = i * 16ms (封顶 16 项)。
   档位联动 (无需额外分支, 直接吃 FX 体系的全局覆盖):
     visual   全量: .34s + 交错
     balanced [data-fx] 把 duration 压到 .1s、animation-delay 归零 → 只剩一次快速淡入
     perf     animation: none → 完全无动效, 元素直接可见                                */
@keyframes fileViewEnter {
    0%   { opacity: 0; transform: translateY(9px) scale(.982); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
#fileGrid.view-enter .file-item {
    animation: fileViewEnter .36s var(--ease-out-quint) both;
    animation-delay: calc(var(--view-i, 0) * 16ms);
    will-change: transform, opacity;
}

/* ===== List view ===== */
.file-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.file-list .row { display: grid; grid-template-columns: 32px 1fr 100px 140px 100px 80px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.file-list .row:hover { background: var(--table-row-hover); }
.file-list .row:last-child { border-bottom: none; }
.file-list .header { background: var(--table-header-bg); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--text-2); letter-spacing: 0.05em; }
.file-list .row .name { display: flex; align-items: center; gap: 10px; }
.file-list .row .name svg { color: var(--text-2); flex-shrink: 0; }
.file-list .row .size, .file-list .row .time, .file-list .row .type, .file-list .row .actions { font-size: 13px; color: var(--text-2); }
.file-list .row .actions { display: flex; gap: 4px; justify-content: flex-end; }
.file-list .row .actions button { padding: 4px 8px; }

/* ===== Modal ===== */
.modal-backdrop,
.modal-overlay {
    position: fixed; inset: 0; background: var(--backdrop); z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; animation: fadeIn .2s var(--ease-standard);
}
.modal {
    background: var(--modal-bg); border-radius: var(--radius-lg);
    max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,.16);
    animation: slideUp .3s var(--ease-decelerate);
    will-change: transform, opacity;
}
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
    0%   { transform: translateY(22px) scale(.965); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 自建对话框系统 (MavisDialog) */
.md-dialog {
    position: fixed; inset: 0; z-index: 10004;
    display: flex; align-items: center; justify-content: center;
    background: var(--backdrop); animation: fadeIn .2s var(--ease-standard);
    padding: 16px;
}
.md-dialog-card {
    background: var(--modal-bg); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    max-width: 480px; width: 100%;
    box-shadow: 0 16px 64px rgba(0,0,0,.25);
    animation: slideUp .3s var(--ease-decelerate);
    display: flex; flex-direction: column;
    max-height: 88vh; overflow: hidden;
    will-change: transform, opacity;
}
/* 对话框退场 —— 卡片缩小下沉 + 遮罩淡出 (与进场对称, JS 在动画后移除 DOM) */
.md-dialog.md-dialog-out { animation: mdDialogOut .18s var(--ease-accelerate) both; }
.md-dialog-out .md-dialog-card { animation: mdCardOut .18s var(--ease-accelerate) both; }
@keyframes mdDialogOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes mdCardOut {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(12px) scale(.965); opacity: 0; }
}
.md-dialog-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.md-dialog-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0;
    background: var(--bg-2); color: var(--text-2);
}
.md-dialog-icon.danger { background: var(--danger-bg); color: var(--danger); }
.md-dialog-icon.warn { background: var(--warning-bg); color: var(--warning); }
.md-dialog-icon.info { background: var(--info-bg); color: var(--info); }
.md-dialog-icon.success { background: var(--success-bg); color: var(--success); }
.md-dialog-title { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; }
.md-dialog-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1; min-height: 0;
    font-size: 14px; line-height: 1.6;
    color: var(--text);
    word-break: break-word;
    white-space: pre-wrap;
}
.md-dialog-body p { margin: 0 0 8px; }
.md-dialog-body p:last-child { margin-bottom: 0; }
.md-dialog-input {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px; margin-top: 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    background: var(--input-bg); color: var(--input-text);
    font-size: 15px; font-family: inherit;
    transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
    -webkit-appearance: none; appearance: none;
}
.md-dialog-input:focus {
    outline: none; border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.md-dialog-input::placeholder { color: var(--input-placeholder); }
.md-dialog-select {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px; margin-top: 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    background: var(--input-bg); color: var(--input-text);
    font-size: 15px; font-family: inherit;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}
.md-dialog-select:focus {
    outline: none; border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.md-dialog-hint {
    font-size: 12px; color: var(--text-2);
    margin-top: 6px; line-height: 1.5;
}
.md-dialog-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-2);
}
.md-dialog-footer .btn { min-width: 72px; }
/* 移动端: 底部弹出样式 (bottom sheet) */
@media (max-width: 480px) {
    .md-dialog { padding: 0; align-items: flex-end; }
    .md-dialog-card {
        max-width: 100%; width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 92vh;
        animation: slideUpModal var(--dur-3) var(--ease-decelerate);
    }
    .md-dialog-header { padding: 16px 18px; }
    .md-dialog-body { padding: 16px 18px; }
    .md-dialog-footer {
        padding: 12px 18px;
        /* 移动端 footer 按钮: 全宽 + 更大触摸区 */
    }
    .md-dialog-footer .btn { flex: 1; min-height: 44px; }
    .md-dialog-input, .md-dialog-select { font-size: 16px; /* 避免 iOS 自动 zoom */ }
    .md-dialog-title { font-size: 15px; }
}

/* ===== Storage cards ===== */
.storage-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.storage-card { padding: 20px; }
.storage-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.storage-card-icon {
    width: 44px; height: 44px; border-radius: var(--radius); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.storage-icon-local { background: var(--success-bg); color: var(--success); }
.storage-icon-s3 { background: var(--info-bg); color: var(--info); }
.storage-card-info { flex: 1; min-width: 0; }
.storage-card-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.storage-card-type { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.storage-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.storage-card-body { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.storage-prop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.storage-prop .text-muted { font-size: 12px; flex-shrink: 0; }
.storage-prop .text-sm { text-align: right; word-break: break-all; }

/* ===== Upload zone ===== */
.upload-zone {
    border: 2px dashed var(--border-strong); border-radius: var(--radius);
    padding: 48px 24px; text-align: center; cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-emphasized); background: var(--bg-2);
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--info); background: var(--info-bg); transform: scale(1.005); }
.upload-zone svg { color: var(--text-3); margin: 0 auto 12px; }
.upload-zone-text { color: var(--text-2); font-size: 14px; }

/* Upload task states */
.upload-task { transition: opacity var(--dur-2) var(--ease-standard); }
.upload-task-done { opacity: 0.6; }
.upload-task-done .progress-bar { background: var(--success); }
.upload-task-failed { opacity: 0.5; }
.upload-task-failed .progress-bar { background: var(--danger); }

/* ===== Progress / Bars ===== */
.progress { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--gradient-brand); transition: width var(--dur-4) var(--ease-emphasized); border-radius: 3px; }
.bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-2); border-radius: var(--radius-sm); }

/* ===== Switch (toggle) ===== */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-2); border-radius: 24px; transition: background var(--dur-3) var(--ease-standard), border-color var(--dur-3) var(--ease-standard); border: 1px solid var(--border); }
.slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background: var(--text-2); border-radius: 50%; transition: transform var(--dur-3) var(--ease-spring), background var(--dur-2) var(--ease-standard); }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(20px); background: #fff; }

/* ===== Input Group ===== */
.input-group { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.input-group .input { border: none; border-radius: 0; }

/* ===== Hero / 卡片展示 ===== */
.hero {
    background: var(--gradient-hero); border-radius: var(--radius-lg);
    padding: 60px 40px; text-align: center; margin-bottom: 24px;
    position: relative; overflow: hidden;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at top, rgba(91,141,239,.06), transparent 60%);
    pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { font-size: 32px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.03em; }
.hero p { color: var(--text-2); font-size: 16px; margin-bottom: 24px; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }

/* 我的存储空间卡片 (存储空间与积分解耦后的用户侧展示) */
.storage-buy-btn { margin-left: auto; flex: 0 0 auto; }
.storage-bar {
    height: 10px; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--border); overflow: hidden; margin: 4px 0 8px;
}
.storage-bar-fill {
    height: 100%; border-radius: 999px; background: var(--info);
    transition: width .35s var(--ease-standard); min-width: 0;
}
.storage-bar-fill.is-warn { background: var(--warning); }
.storage-bar-fill.is-danger { background: var(--danger); }
.storage-bar-meta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; font-size: 13px; flex-wrap: wrap;
}
.storage-breakdown {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin: 14px 0 4px;
}
.sb-item {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
    border-radius: var(--radius-sm); background: var(--surface-2);
    border: 1px solid var(--border);
}
.sb-label { font-size: 12px; color: var(--text-2); }
.sb-value { font-size: 16px; font-weight: 600; }
.sb-plus { color: var(--success); }
.storage-notice {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
    padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px;
    background: var(--warning-bg); border: 1px solid var(--warning-border);
    color: var(--warning-text);
}
.storage-notice svg { flex: 0 0 auto; margin-top: 1px; }
.storage-packs { margin-top: 12px; }
.storage-empty { margin-top: 12px; }
.tbl-sm th, .tbl-sm td { padding: 7px 10px; font-size: 13px; }
/* 商店: 容量包商品卡片 */
.shop-storage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.shop-card {
    display: flex; flex-direction: column; gap: 8px; padding: 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-2);
}
.shop-card-size { font-size: 22px; font-weight: 700; color: var(--info); }
.shop-card-name { font-weight: 600; }
.shop-card-desc { font-size: 12px; color: var(--text-2); min-height: 32px; }
.shop-card-meta { font-size: 12px; color: var(--text-2); display: flex; gap: 8px; flex-wrap: wrap; }
.shop-card-price { font-size: 18px; font-weight: 600; color: var(--danger); }
.shop-card-actions { margin-top: auto; padding-top: 8px; }
.shop-card.is-disabled { opacity: .6; }
.stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    transition: box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-spring);
}
.stat-card:hover {
    box-shadow: var(--shadow); transform: translateY(-3px);
}
.stat-card .label { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-card .value { font-size: 24px; font-weight: 600; margin-top: 4px; }
.stat-card .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ===== Tag ===== */
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px; font-size: 11px;
    background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border);
}
.tag-info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.tag-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.tag-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.tag-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
/* 公告级别下拉里的第四档叫 "error"，模板直接拼出 tag-error，而这里
   本来只定义了 tag-danger。缺这条的话，选了"错误 (红)"的公告在列表里
   显示为默认灰色 —— 和下拉框上标的"红"对不上。两种叫法指向同一套配色，
   不必改动数据里的存值。 */
.tag-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

/* ===== Empty state ===== */
.empty {
    text-align: center; padding: 60px 24px; color: var(--text-2);
}
.empty svg { color: var(--text-3); margin: 0 auto 16px; }
.empty .title { font-size: 16px; font-weight: 500; margin-bottom: 4px; color: var(--text); }
.empty .sub { font-size: 13px; }

/* ===== Auth pages ===== */
.auth-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .title { font-size: 22px; font-weight: 600; margin-bottom: 8px; text-align: center; }
.auth-card .sub { color: var(--text-2); margin-bottom: 24px; text-align: center; font-size: 14px; }

/* ===== Code block ===== */
code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; padding: 1px 6px; background: var(--code-bg); border-radius: 3px; }
pre { background: var(--code-bg); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto; }
pre code { background: transparent; padding: 0; }

/* ===== Sidebar (admin) ===== */
.admin-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
@media (max-width: 768px) { .admin-wrap { grid-template-columns: 1fr; } }
.admin-side {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px; height: fit-content;
}
.admin-side a {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px;
    transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.admin-side a:hover { background: var(--bg-2); color: var(--text); transform: translateX(2px); }
.admin-side a.active { background: var(--bg-2); color: var(--text); font-weight: 500; box-shadow: inset 3px 0 0 var(--info); }
.admin-main { min-width: 0; }
.admin-mobile-bar { display: none; }
.admin-side-overlay { display: none; }
.admin-side-close { display: none; }

/* ===== Share / preview ===== */
.preview-img, .preview-video, .preview-audio { max-width: 100%; border-radius: var(--radius); }
.code-preview {
    background: var(--code-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; max-height: 600px; overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5;
    white-space: pre; color: var(--text);
}

/* ===== Preview Tabs (HTML/CSS/Python 渲染页签) ===== */
.preview-tabs { display: flex; gap: 4px; align-items: center; }
.tab-btn {
    background: transparent; border: 1px solid transparent; border-bottom: 2px solid transparent;
    padding: 6px 14px; cursor: pointer; font-size: 13px; color: var(--text-2);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; display: inline-flex; align-items: center; gap: 4px;
    transition: color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.tab-btn:hover { color: var(--text); background: var(--bg-2); }
.tab-btn.active {
    color: var(--primary); border-bottom-color: var(--primary);
    background: var(--bg-2);
}
.tab-panel { animation: fadeIn var(--dur-2) var(--ease-standard); }

/* ===== Mobile nav ===== */
@media (max-width: 768px) {
    .menu-toggle { display: inline-flex; }
    .nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px; margin: 0; z-index: 99; }
    .nav.open { display: flex; }
    .nav a { padding: 12px 14px; font-size: 15px; }
    .topbar-inner { padding: 0 12px; gap: 6px; height: 56px; }
    .brand-text { font-size: 15px; }
    .brand-sub { display: none; }
    main { padding: 14px 12px; padding-bottom: 72px; }
    .form-row { grid-template-columns: 1fr; }
    .file-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .hero { padding: 40px 20px; }
    .hero h1 { font-size: 24px; }
    .user-points { display: none; }
    /* 页面标题 */
    .page-title { font-size: 20px; }
    .page-sub { font-size: 13px; }
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header .btn-group { justify-content: stretch; }
    .page-header .btn-group .btn { flex: 1; }
    /* 卡片 */
    .card { padding: 16px; }
    /* 表格响应式: 水平滚动 (带提示) */
    .tbl-wrap { position: relative; }
    .tbl-wrap::after {
        content: "← 左右滑动查看更多 →";
        position: absolute; bottom: -22px; right: 0;
        font-size: 11px; color: var(--text-3);
        pointer-events: none; opacity: 0.7;
    }
    .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl th, .tbl td { white-space: nowrap; }
    /* 表格美化滚动条 (mobile) */
    .tbl::-webkit-scrollbar { height: 6px; }
    .tbl::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 3px; }
    .tbl::-webkit-scrollbar-track { background: var(--line-soft); }
    /* 表格 mobile 下隐藏次要列: 用 .tbl-hide-mobile 标记 */
    .tbl-hide-mobile { display: none; }
    /* 文件列表视图响应式 */
    .file-list .row { grid-template-columns: 28px 1fr 80px 60px; gap: 8px; padding: 10px 10px; }
    .file-list .row .time { display: none; }
    .file-list .row .type { display: none; }
    .file-list .header { grid-template-columns: 28px 1fr 80px 60px; }
    .file-list .header .time, .file-list .header .type { display: none; }
    /* 文件项: 更大触摸区域 */
    .file-item { padding: 10px; transition: background var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
    .file-item .file-icon { width: 56px; height: 56px; }
    /* 点击触感: file-item 按下轻微缩放 */
    .file-item:active { transform: scale(0.97); background: var(--bg-2); }
    /* 文件项拖动样式 */
    .file-item[draggable=true] { cursor: grab; -webkit-user-select: none; user-select: none; }
    .file-item[draggable=true]:active { cursor: grabbing; }
    .file-item.dragging { opacity: 0.4; transform: scale(0.96); transition: transform var(--dur-2) var(--ease-spring); }
    .file-item-drag-placeholder {
        background: var(--primary-soft) !important;
        border: 2px dashed var(--primary) !important;
        opacity: 0.6;
        min-height: 90px;
    }
    .file-item .file-icon svg { width: 28px; height: 28px; }
    .file-item .file-name { font-size: 12px; }
    .file-item .file-meta { font-size: 10px; }
    .file-item .btn-group {
        opacity: 1 !important;
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
    }
    .file-item .btn-group .btn { padding: 6px; }
    .file-item .btn-group .btn svg { width: 14px; height: 14px; }
    /* 面包屑: 水平滚动 */
    .breadcrumb { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; flex-wrap: nowrap; padding-bottom: 4px; }
    .breadcrumb::-webkit-scrollbar { display: none; }
    /* 上传区域 */
    .upload-zone { padding: 32px 16px; }
    .upload-zone svg { width: 36px; height: 36px; }
    .upload-zone-text { font-size: 14px; }
    /* 模态框: 全屏 */
    .modal-backdrop { padding: 0; align-items: flex-end; }
    .modal { max-width: 100%; width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation: slideUpModal var(--dur-3) var(--ease-decelerate); }
    @keyframes slideUpModal { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .modal-header { padding: 16px 20px; position: sticky; top: 0; background: var(--modal-bg); z-index: 1; }
    .modal-body { padding: 20px; }
    .modal-footer { padding: 12px 20px; position: sticky; bottom: 0; background: var(--modal-bg); }
    .modal-footer .btn { flex: 1; padding: 12px; }
    /* 输入框: 更大触摸区域 */
    .input, textarea.input, select.input { padding: 12px 14px; font-size: 16px; }
    label { font-size: 14px; }
    .btn { padding: 10px 16px; font-size: 14px; }
    .btn-sm { padding: 8px 12px; font-size: 13px; }
    .btn-lg { padding: 14px 24px; font-size: 16px; }
    /* 管理后台: 汉堡菜单 */
    .admin-wrap { grid-template-columns: 1fr; }
    .admin-mobile-bar {
        /* 汉堡 + 文案整体靠右: 拇指热区在右手侧, 居中反而两头够不着 */
        display: flex; align-items: center; justify-content: flex-end; gap: 8px;
        padding: 12px 18px 12px 16px; min-height: 48px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); margin-bottom: 14px; cursor: pointer;
        font-size: 15px; font-weight: 500; color: var(--text);
        user-select: none; -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        box-shadow: var(--shadow-1);
    }
    .admin-mobile-bar:hover, .admin-mobile-bar:active { background: var(--bg-2); }
    .admin-mobile-bar svg { width: 20px; height: 20px; }
    /* admin 表格按钮在 mobile 上更易点 (≥40pt) */
    .admin-main .tbl .btn { min-height: 36px; }
    .admin-main .btn-group { flex-wrap: wrap; gap: 6px; }
    /* 关键: admin-main 允许自身滚动 + 表格横向滚动 (避免页面整体卡住) */
    .admin-main { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-main .tbl { min-width: 600px; }
    .admin-main .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body { overflow-x: hidden; } /* 防止表格撑出视口导致整页不能滚 */
    .admin-side {
        position: fixed; top: 0; left: 0; bottom: 0; width: 260px;
        transform: translateX(-100%); transition: transform var(--dur-4) var(--ease-decelerate);
        z-index: 1001; overflow-y: auto; padding: 16px; gap: 4px;
        border-radius: 0; margin: 0; border: none;
        border-right: 1px solid var(--border); background: var(--surface);
        display: flex; flex-direction: column;
        -webkit-overflow-scrolling: touch;
    }
    .admin-side.open { transform: translateX(0); }
    .admin-side a { padding: 10px 14px; font-size: 14px; }
    .admin-side-overlay {
        /* 同 #moveDialog —— 隐藏时连 visibility 一起撤掉, 避免透明遮罩
           仍留在无障碍树与 Tab 焦点序列里; visibility 过渡延迟保证淡出动画完整。 */
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
        z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity var(--dur-3) var(--ease-standard), visibility 0s linear var(--dur-3);
    }
    .admin-side-overlay.show {
        opacity: 1; visibility: visible; pointer-events: auto;
        transition: opacity var(--dur-3) var(--ease-standard), visibility 0s;
    }
    .admin-side-close {
        display: flex; position: absolute; top: 12px; right: 12px; background: none;
        border: none; cursor: pointer; color: var(--text-2); padding: 4px;
        align-items: center; justify-content: center;
    }
    /* 存储策略卡片 */
    .storage-cards { grid-template-columns: 1fr; }
    .storage-card { padding: 16px; }
    .storage-card-actions { flex-wrap: wrap; gap: 8px; }
    .storage-card-actions .btn {
        min-width: 44px; min-height: 44px; padding: 0 12px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .storage-card-actions .btn svg { width: 16px; height: 16px; }
    .storage-card-header { flex-wrap: wrap; row-gap: 10px; }
    .storage-card-info { flex: 1 1 140px; min-width: 0; }
    .admin-mobile-bar {
        min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .admin-mobile-bar:active { background: var(--bg-2); }
    /* 统计卡片 */
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card .value { font-size: 20px; }
    /* 文件工具栏 */
    .file-toolbar { flex-wrap: wrap; gap: 8px; }
    .file-toolbar .progress { width: 100% !important; }
    /* 认证页 */
    .auth-wrap { padding: 16px; min-height: 70vh; }
    .auth-card { max-width: 100%; }
    /* 页脚 */
    .footer { padding: 16px 12px; padding-bottom: calc(16px + 60px + env(safe-area-inset-bottom, 0px)); }
    .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
    /* 语言切换器: 移动端压缩为图标按钮, 箭头向下指向上方的语言菜单 */
    .lang-switcher { display: inline-flex; margin-left: 4px; padding-left: 6px; border-left: none; }
    .lang-switcher .lang-btn { width: 36px; height: 36px; padding: 0; justify-content: center; background: transparent; border: none; }
    .lang-switcher .lang-btn-label, .lang-switcher .lang-btn-caret { display: none; }
    .lang-switcher .lang-menu { top: auto; bottom: calc(100% + 8px); right: 0; max-height: 60vh; overflow-y: auto; }
    /* 下拉菜单: 全宽 */
    .dropdown-menu {
        position: fixed; right: 0; left: 0; top: auto; bottom: 0;
        margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: var(--shadow-lg); max-width: 100%; min-width: auto;
        padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .dropdown-menu a, .dropdown-menu button { padding: 14px 16px; font-size: 15px; }
    /* 预览页面 */
    .preview-img, .preview-video { max-height: 50vh; }
    .code-preview { max-height: 400px; font-size: 12px; padding: 12px; }
}

/* ===== Mobile bottom nav ===== */
.mobile-bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 4px 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    justify-content: space-around; align-items: center;
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.mobile-bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 14px; color: var(--text-3); font-size: 10px;
    border-radius: var(--radius-sm); transition: color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.mobile-bottom-nav a.active { color: var(--primary); }
.mobile-bottom-nav a svg { width: 22px; height: 22px; }
@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; }
}

/* ===== FAB (floating action button) =====
   上传入口统一放在这里。以前只在窄屏显示, 桌面端靠网盘页顶部的一排按钮
   里的"上传" —— 同一个动作两个入口, 而且顶栏那排按钮一多, 上传就被挤到
   后面甚至要横向滚动才够得着。现在全尺寸都走右下角这一个。
   bottom 留到 80px 是为了避开同在右下角的上传任务面板。 */
.fab {
    display: flex; position: fixed; bottom: 76px; right: 16px; z-index: 90;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--gradient-brand); color: #fff; border: none;
    box-shadow: 0 4px 16px rgba(91,141,239,.4); align-items: center;
    justify-content: center; cursor: pointer;
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-standard);
}
.fab:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(91,141,239,.5); }
.fab:active { transform: scale(0.92); }
.fab svg { width: 24px; height: 24px; }
@media (max-width: 768px) {
    .fab { display: flex; }
}

/* ===== Safe area ===== */
@supports (padding: env(safe-area-inset-top)) {
    .topbar { padding-top: env(safe-area-inset-top, 0px); }
}

/* ===== Dropdown ===== */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    position: absolute; right: 0; top: 100%; margin-top: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    min-width: 180px; padding: 4px; display: none; z-index: 10000;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 12px; border: none; background: transparent;
    color: var(--text); text-align: left; font-size: 14px; border-radius: var(--radius-sm);
    text-decoration: none;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--bg-2); }

/* ===== Tooltip ===== */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
    content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%); padding: 4px 8px; background: var(--text);
    color: var(--text-inverse); font-size: 12px; white-space: nowrap;
    border-radius: 4px; margin-bottom: 4px; pointer-events: none; z-index: 99;
}

/* ===== Toast ===== */
.toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast-container .toast { pointer-events: auto; }
.toast {
    padding: 12px 20px; border-radius: var(--radius); background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    min-width: 200px; animation: toastIn var(--dur-3) var(--ease-spring) both;
    will-change: transform, opacity;
    contain: layout style;
}
/* Toast 内联操作按钮 ("删除后撤销" 用)
   白底主色文字 + 浅底色: 在浅色/深色两种 toast 上都能保持可读,
   且不与 toast 自身的语义色 (ok / error) 打架。 */
.toast-action {
    margin-left: 14px; margin-right: -6px;
    padding: 5px 12px; flex: 0 0 auto;
    border: none; border-radius: var(--radius-full);
    background: var(--primary-soft); color: var(--primary);
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; white-space: nowrap;
    transition: background var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.toast-action:hover { background: var(--primary); color: #fff; }
.toast-action:active { transform: scale(.94); }
.toast-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.toast.toast-out { animation: toastOut var(--dur-2) var(--ease-accelerate) both; }
.toast-ok { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
.toast-error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.toast-warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning); }
.toast-info { border-color: var(--info-border); background: var(--info-bg); color: var(--info); }
@keyframes toastIn { from { transform: translateX(120%) scale(0.92); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(120%) scale(0.92); opacity: 0; } }
/* 移动端 toast 停靠底部 (上方 .toast-container 覆盖): 动画必须自下方进出。
   用不同名字而不是同名覆盖 —— 同名 @keyframes 写在 media 里是无效作用域, 这正是之前那版实现坏掉的原因 */
@media (max-width: 768px) {
    @keyframes toastInBottom { from { transform: translateY(120%) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
    @keyframes toastOutBottom { to { transform: translateY(120%) scale(0.95); opacity: 0; } }
    .toast { animation-name: toastInBottom; }
    .toast.toast-out { animation-name: toastOutBottom; }
}

/* ===== Badge ===== */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.4; }
.badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.badge-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.badge-info { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-border); }
.badge-muted { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border); }

/* ===== Nav search loading/empty ===== */
.nav-search-loading { padding: 12px; text-align: center; color: var(--text-3); font-size: 13px; }
.nav-search-empty { padding: 12px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ===== Utility ===== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.text-sm { font-size: 13px; } .text-xs { font-size: 12px; }
.text-muted { color: var(--text-2); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }


/* 顶部搜索框 */
.nav-search {
    position: relative; flex: 1; max-width: 400px;
    margin: 0 12px;
}
.nav-search-input {
    width: 100%; height: 36px; padding: 0 12px 0 36px;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 13px; color: var(--text);
    transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}
.nav-search-input:focus {
    outline: none; border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.nav-search-input::placeholder { color: var(--text-3); }
.nav-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); pointer-events: none; width: 14px; height: 14px;
}
.nav-search-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--modal-bg); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    max-height: 60vh; overflow-y: auto; display: none; z-index: 100;
}
.nav-search-dropdown.open { display: block; }
.nav-search-result {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    cursor: pointer; color: var(--text); text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.nav-search-result:last-child { border-bottom: none; }
.nav-search-result:hover { background: var(--bg-2); }
.nav-search-result-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-2); flex-shrink: 0; }
.nav-search-result-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-search-result-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.nav-search-result-info { flex: 1; min-width: 0; }
.nav-search-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: 13px; }
.nav-search-loading { padding: 16px; text-align: center; color: var(--text-3); font-size: 13px; }



/* 局部加载态：只在"内容正在变"的那一块上转圈，不做全屏遮罩。
   用法见 window.SRBusy。容器无需预先准备，组件自己补定位上下文。

   背景取中性灰而非主题色：亮暗两套主题下都能透出底下的内容，
   又不用为主题变量再配一套带 alpha 的版本。 */
.sr-busy-mask {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: rgba(127, 127, 127, .12);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-standard);
}
.sr-busy-mask.on { opacity: 1; }
/* 视口模式：容器很高时用（整块主内容区切换）。
   圈固定在视口中央，不受容器高度影响。z-index 低于模态框 (通常 1000+)，
   不会盖住弹窗。 */
.sr-busy-mask.vp {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(127, 127, 127, .10);
}
.sr-spin {
    flex: 0 0 auto; width: 18px; height: 18px;
    border: 2px solid var(--border-2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: srSpin .7s linear infinite;
}
.sr-busy-tx { font-size: 12px; color: var(--text-2); }
@keyframes srSpin { to { transform: rotate(360deg); } }

/* 行内小圈：给不方便铺 mask 的窄容器用，直接放在文字前面 */
.sr-spin-inline {
    display: inline-block; vertical-align: -3px;
    width: 13px; height: 13px; margin-right: 6px;
    border: 2px solid var(--border-2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: srSpin .7s linear infinite;
}

/* 系统开启"减少动态效果"时不停止旋转，只是放慢。
   停掉会让用户无法判断界面是否还在加载，放慢则兼顾了前庭敏感。 */
@media (prefers-reduced-motion: reduce) {
    .sr-spin, .sr-spin-inline { animation-duration: 2.4s; }
}


/* 丝滑度优化 */

/* 主题切换过渡 (background-color/color/border 一起淡入淡出) */
body, .card, .modal, .toast, .file-item, .nav, .btn, .input, select.input, textarea.input,
.dropdown-menu, .tag, .badge, .ctx-menu, .md-dialog-card, .pagination, .tbl, .tbl th, .tbl td,
.admin-side, .admin-mobile-bar, .topbar, .footer, .btn-group, .upload-zone, .storage-card,
.ann-card, .preview-img, .preview-video, .preview-audio, .code-preview, .hero,
.share-card, .shop-card {
    transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}

/* 文本渲染优化 (抗锯齿 + 字距优化) */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
    /* 注意: 不在 body 加 transform/translateZ/backface-visibility
       这会破坏 position: fixed 子元素 (modal, 右键菜单, 详情面板) 的视口定位
       这是 v3.10 的 bug, 导致文件项被模态框盖住, 点击打不开 */
}

/* 平滑滚动 (页内锚点) */
html { scroll-behavior: smooth; }

/* 系统级尊重用户偏好: 减弱动画 / 不喜欢 motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body, .card, .modal, .toast, .file-item, .nav, .btn, .input, select.input, textarea.input,
    .dropdown-menu, .tag, .badge, .ctx-menu, .md-dialog-card, .pagination, .tbl, .tbl th, .tbl td,
    .admin-side, .admin-mobile-bar, .topbar, .footer, .btn-group, .upload-zone, .storage-card,
    .ann-card, .preview-img, .preview-video, .preview-audio, .code-preview, .hero,
    .share-card, .shop-card {
        transition: none !important;
    }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* content-visibility: auto (长列表 / 表格) — 屏幕外内容不渲染, 减少首屏 paint
   这是 v3.10 留下来的, 是真正有效的优化, 保留 */
.file-grid, .file-list, .tbl tbody, .ann-list, .storage-cards, .shop-grid, .share-list {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}

/* layout containment 防止一处变化触发整页 reflow */
.file-item, .storage-card, .ann-card, .shop-card, .share-card, .tbl tr {
    contain: layout style;
}

/* 触摸优化: 全局禁掉双击 zoom + 300ms 延迟 */
a, button, [role="button"], input, label, select, textarea {
    touch-action: manipulation;
}

/* 滚动容器: 启用 momentum + 避免阻塞渲染 */
.scroll-container, .modal-body, .tbl-wrap, .ann-list, .admin-side, .file-grid {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 表格行 hover: 平滑过渡 */
.tbl tr { transition: background-color var(--dur-2) var(--ease-standard); }

/* 修复: 滚动条样式统一, 避免不同浏览器抖动 */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-track { background: transparent; }

/* 注意: 以下"优化"会破坏体感:
   - body { transform: translateZ(0) } → 破 position: fixed 定位
   - main { transition + will-change } → 切页顿 320ms
   - will-change: transform on body/img/svg → 内存爆
   - contain: layout style paint on .card → 偶尔引起 input 焦点丢失
   这些都不要了, 体验优先
*/

/* 多个浮层的丝滑过渡 (替换硬邦邦的 display:none/block) */
/* 右键菜单 (drive) — 淡入 + 缩放 */
.ctx-menu-hide { opacity: 0 !important; transform: scale(0.95) translateY(-4px) !important; pointer-events: none !important; }
.ctx-menu-show { opacity: 1 !important; transform: scale(1) translateY(0) !important; pointer-events: auto !important; }

/* 顶部微进度条 (替代全屏 loading 霸屏) */
.top-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 20000; pointer-events: none; opacity: 0;
    transition: opacity var(--dur-3) var(--ease-standard);
}
.top-progress.active { opacity: 1; }
.top-progress .tp-track {
    /* width → scaleX (纯合成器动画, 不再每帧触发布局; JS 写 transform) */
    position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--primary), #7c5cff 60%, #4f9cff);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(99, 102, 241, .55);
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform .3s var(--ease-decelerate);
    will-change: transform;
}
/* 不定进度: 伪进度缓慢爬升, 逼近但不到达 90% */
@keyframes tpNudge { 0% { transform: translateX(0); } 100% { transform: translateX(0); } }
/* 右键菜单弹出微弹性 (更圆滑的呼出感; 过冲后轻回落) */
@keyframes ctxMenuPop {
    0%   { opacity: 0; transform: scale(.9) translateY(-7px); }
    55%  { opacity: 1; }
    70%  { transform: scale(1.018) translateY(.5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* 自绘下拉选择器 (EnhancedSelect) */
.es-wrap { position: relative; display: inline-flex; min-width: 0; }
.es-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
    min-width: 120px; padding: 8px 12px; cursor: pointer; user-select: none;
    background: var(--bg-card, var(--surface, #fff)); border: 1px solid var(--border);
    border-radius: 8px; font-size: 14px; color: var(--text);
    transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.es-trigger:hover { border-color: var(--primary); }
.es-trigger:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.es-trigger.disabled { opacity: .55; cursor: not-allowed; }
.es-trigger .es-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-trigger .es-arrow { flex-shrink: 0; display: inline-flex; color: var(--text-3); transition: transform var(--dur-2) var(--ease-spring); }
.es-wrap.open .es-arrow { transform: rotate(180deg); }
.es-panel {
    position: fixed; z-index: 21000; min-width: max-content; max-height: 300px; overflow-y: auto;
    background: var(--bg-card, var(--surface, #fff)); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 4px;
    opacity: 0; transform: scale(.95) translateY(-6px); transform-origin: top left;
    pointer-events: none; transition: opacity var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-soft-spring);
}
.es-panel.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.es-option {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 1px 0;
    border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text); white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.es-option:hover { background: var(--bg-hover, var(--bg-2)); }
.es-option.selected { color: var(--primary); font-weight: 600; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.es-option .es-check { width: 14px; flex-shrink: 0; display: inline-flex; visibility: hidden; }
.es-option.selected .es-check { visibility: visible; }
.es-group-label { padding: 6px 12px 2px; font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
/* 详情面板 — 从右滑入 */
.detail-panel-hide { transform: translateX(100%) !important; }
.detail-panel-show { transform: translateX(0) !important; }
/* 移动文件对话框 — 整层淡入 */
/* 补 visibility —— 此前只靠 opacity:0, 元素仍在无障碍树里且保有渲染盒,
   屏幕阅读器/键盘 Tab 都能"摸到"隐藏弹层里的内容。visibility:hidden 才能真正移除。
   transition 里给 visibility 加延迟, 保证 hide 时淡出动画能完整播完再真正隐藏。 */
.move-dialog-hide { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
.move-dialog-show { opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; }
#moveDialog { transition: opacity var(--dur-2) var(--ease-standard), visibility 0s linear var(--dur-2) !important; }
#moveDialog.move-dialog-show { transition: opacity var(--dur-2) var(--ease-standard), visibility 0s !important; }
/* 拖入上传区 — 整层淡入 */
.drop-overlay-hide { opacity: 0 !important; }
.drop-overlay-show { opacity: 1 !important; }

/* 通用按钮 / 输入框 平滑过渡 (全局, 避免每个组件单独写) */
.btn {
    transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-emphasized);
}
.btn:active { transform: scale(0.96); }
.input, select.input, textarea.input {
    transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard);
}
.input:focus { transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard); }
/* 模态背景淡入 */
.modal-overlay, .modal-backdrop { transition: opacity var(--dur-2) var(--ease-standard); }
/* 列表项选中过渡 (避免闪烁) */
.tbl tbody tr, .storage-card, .ann-card, .share-card {
    transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard);
}


/* 完整右键菜单 */
.ctx-menu {
    position: fixed; z-index: 10003;
    background: var(--modal-bg); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    min-width: 200px; padding: 4px; display: none;
    animation: ctxMenuIn 0.18s var(--ease-soft-spring);
    max-height: 80vh; overflow-y: auto;
    will-change: transform, opacity;
}
.ctx-menu.open { display: block; }
.ctx-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border: none; background: transparent;
    color: var(--text); font-size: 13px; text-align: left;
    width: 100%; border-radius: var(--radius-sm);
    cursor: pointer; user-select: none;
}
.ctx-menu-item:hover:not(.disabled) { background: var(--bg-2); }
.ctx-menu-item.disabled { color: var(--text-3); cursor: not-allowed; }
.ctx-menu-item.danger { color: var(--danger); }
.ctx-menu-item.danger:hover:not(.disabled) { background: var(--danger-bg); }
.ctx-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.ctx-menu-icon { width: 16px; height: 16px; display: inline-flex; flex-shrink: 0; }
.ctx-menu-shortcut { margin-left: auto; color: var(--text-3); font-size: 11px; padding-left: 12px; }

/* 移动端 admin + 公告短屏优化 */
@media (max-width: 768px) {
    /* admin 短屏: 表格横向滚动 + sticky 第一列 + 关键列保持可见 */
    .admin-main .tbl-wrap { position: relative; }
    .admin-main .tbl { min-width: 480px; }
    .admin-main .tbl th, .admin-main .tbl td { font-size: 12px; padding: 8px 6px; }
    /* 短屏隐藏次要列 (用 .tbl-hide-mobile 标记) */
    .admin-main .tbl-hide-mobile { display: none; }
    /* 公告管理: 短屏历史公告改为 card-view */
    .ann-list { display: flex; flex-direction: column; gap: 10px; }
    .ann-list .ann-card { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
    .ann-list .ann-card .ann-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
    .ann-list .ann-card .ann-meta { font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
    .ann-list .ann-card .ann-actions { display: flex; gap: 6px; }
    .ann-list .ann-card .ann-actions .btn { padding: 4px 8px; font-size: 11px; min-height: 28px; }
    /* 公告: 默认隐藏 table 视图, 短屏显示 card 视图 */
    .ann-table-view { display: none; }
    .ann-card-view { display: block; }
    /* 公告发布按钮: 短屏固定底部 */
    .ann-publish-sticky { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; margin: 0 -8px; padding: 12px 8px; border-top: 1px solid var(--border); z-index: 5; }
    /* 文件项: 移动端仅显示明确的更多按钮, 隐藏操作不再拦截卡片触摸 */
    .file-item { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    .file-item .file-card-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
        top: 6px !important;
        right: 6px !important;
        flex-wrap: nowrap;
    }
    .file-item .file-card-actions.actions-disabled {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .file-item .file-card-actions .btn:not(.file-more-btn) { display: none; }
    .file-item .file-card-actions .file-more-btn {
        display: inline-flex;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        align-items: center;
        justify-content: center;
        background: var(--bg-card);
        border: 1px solid var(--border);
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }
    /* 右键菜单: 短屏加大 */
    .ctx-menu { min-width: 220px; }
    .ctx-menu-item { padding: 12px 16px; font-size: 14px; min-height: 40px; }
    .ctx-menu-shortcut { font-size: 12px; }
    /* 短屏表格: 重要列加色背景, 提示用户横向滑 */
    .admin-main .tbl th { background: var(--table-header-bg); }
    /* 短屏搜索: 顶部搜索框允许 overflow scroll */
    .nav { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .nav::-webkit-scrollbar { display: none; }
    /* 短屏表单: 字体放大避免 iOS 缩放 */
    .input, textarea.input, select.input { font-size: 16px !important; }
    /* 短屏 admin-mobile-bar: 更明显 */
    .admin-mobile-bar { font-size: 14px; min-height: 44px; }
    /* admin 短屏: 让 main padding 减少给内容更多空间 */
    main { padding: 12px 8px 80px; }
}
/* 桌面端恢复公告 table 视图 */
@media (min-width: 821px) {
    .ann-table-view { display: block; }
    .ann-card-view { display: none; }
    .ctx-menu { min-width: 200px; }
}

@keyframes ctxMenuIn {
    0%   { opacity: 0; transform: scale(.92) translateY(-5px); }
    55%  { opacity: 1; }
    70%  { transform: scale(1.014) translateY(.5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 移动端 UI 大改造 — 修复多处 500 / 触摸不友好 / 布局溢出 */
@media (max-width: 768px) {
    /* 表格: 横向滚动容器, 不撑破页面 */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100vw; }
    .tbl { min-width: 480px; }  /* 强制最小宽度, 让用户水平滚动看完整表格 */
    /* 表格行: 触摸更友好 */
    .tbl th, .tbl td { padding: 10px 8px; font-size: 13px; }
    .tbl-hide-mobile { display: none; }
    /* 图片预览: 永远不撑破 */
    img, svg, video { max-width: 100%; height: auto; }
    .preview-img, .preview-video { max-width: 100%; height: auto; }
    /* 表单: 触摸区足够大, 全宽输入 */
    .input, select.input, textarea.input { font-size: 16px !important; min-height: 44px; }
    /* 表单行: 移动端改成单列 (避免 50% 宽度但 padding 让内容溢出) */
    .form-row { display: flex; flex-direction: column; gap: 12px; }
    .form-row > * { width: 100% !important; max-width: 100% !important; }
    /* 按钮: 移动端更大的点击区 + 自适应宽度 */
    .btn { min-height: 44px; padding: 10px 16px; }
    .btn-group { flex-wrap: wrap; }
    .btn-group .btn { flex: 1 1 auto; min-width: 0; }
    /* 页面标题: 更小字号 */
    .page-title { font-size: 20px; }
    .page-sub { font-size: 13px; }
    /* 卡片: 不溢出 */
    .card { padding: 12px; max-width: 100vw; box-sizing: border-box; }
    .card-title { font-size: 15px; }
    /* Topbar: 收紧, 防止溢出 */
    .topbar-inner { padding: 0 8px; gap: 8px; }
    .brand { font-size: 14px; }
    .brand-sub { display: none; }
    .nav { gap: 2px; }
    .nav a { padding: 6px 10px; font-size: 13px; }
    /* 用户下拉: 触摸友好 */
    .dropdown-menu { min-width: 200px; max-width: calc(100vw - 24px); }
    .dropdown-menu a, .dropdown-menu button { padding: 12px 14px; min-height: 44px; }
    /* 文件工具栏: 紧凑 + 换行 */
    .file-toolbar { flex-wrap: wrap; gap: 8px; padding: 8px; }
    .file-toolbar > * { flex: 1 1 auto; }
    /* 详情面板: 全屏 (不侧滑) */
    #detailPanel { width: 100% !important; max-width: 100% !important; }
    /* 模态框: 边缘 padding 缩小, 内部可滚动 */
    .modal { max-width: 100%; width: 100%; max-height: 92vh; padding: 16px; }
    .modal-body { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    /* 进度条 / loading: 全宽 */
    .progress { width: 100% !important; }
    /* 表格操作按钮组: 防止换行错乱 */
    .tbl .actions, .tbl td:last-child { white-space: nowrap; }
    /* page 容器: 全宽 + 减少 padding */
    .page { padding: 12px; max-width: 100vw; box-sizing: border-box; }
    .page-header { flex-wrap: wrap; gap: 8px; }
    .page-header h1 { font-size: 22px; }
    /* breadcrumb: 不换行 + 横向滚动 */
    .breadcrumb { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* 闪存消息: 全宽 */
    .flash { padding: 10px 12px; font-size: 13px; }
    /* toast: 顶部居中, 不挡右侧 */
    .toast-container { left: 12px; right: 12px; top: 60px; }
    .toast { min-width: 0; width: 100%; }
    /* 表单验证错误: 不溢出 */
    .form-error { font-size: 12px; word-break: break-word; }
    /* 移动端隐藏次要文本 */
    .text-hide-mobile { display: none; }
    /* 触摸目标最小 44pt (Apple HIG) */
    a, button, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
    .icon-btn { min-width: 44px; min-height: 44px; }
    /* 修复 iOS 上 input 触发缩放 (font-size < 16px) */
    @supports (-webkit-touch-callout: none) {
        .input, select.input, textarea.input { font-size: 16px; }
    }
}

@media (max-width: 480px) {
    /* 超窄屏: 文件名不换行截断, 进度条占满 */
    .file-name { font-size: 13px; word-break: break-all; }
    .file-meta { font-size: 11px; }
    .breadcrumb { font-size: 12px; }
    .file-toolbar input.input { font-size: 14px; }
    /* toolbar 太挤时隐藏部分 */
    .file-toolbar .progress { display: none; }
}

   /* v1.0.2-ui  「更圆滑 / 更丝滑 / 更顺眼」全局增强层
   追加在样式表末尾 —— 同特异性下后来者胜, 因此无需改动上面 1500 行既有规则,
   也不会破坏任何既有的页面局部 <style> 覆盖。 */

/* 1. 字体: Google Sans / Roboto 优先, 中文回退思源黑体 */
html, body {
    /* 原来这里硬编码 Google Sans 字体栈 —— 它排在样式表后半段, 同特异性下
       后来者胜, 会把 body{font-family:var(--font-sans)} 和各界面风格的
       --font-sans 全部盖掉 (表现: 切风格时圆角/配色都变, 唯独字体不变)。
       改成引用变量后, 风格切换才能连字体一起换。 */
    font-family: var(--font-sans);
    font-size: 14.5px;
    letter-spacing: .006em;
    text-rendering: optimizeLegibility;
}

/* 2. 统一可交互元素的过渡曲线 (原来散落各处 .15s ease, 现在统一令牌化) */
.btn, .input, textarea.input, select.input, .tag, .badge,
.card, .stat-card, .storage-card, .share-card, .shop-card, .ann-card,
.file-item, .file-list .row, .tbl tbody tr,
.nav a, .admin-side a, .mobile-bottom-nav a, .tab-btn,
.dropdown-menu a, .dropdown-menu button, .ctx-menu-item,
.breadcrumb a, .upload-zone, .theme-toggle, .menu-toggle, .user-points,
.fab, .slider, .nav-search-result, .pagination a {
    transition:
        background-color var(--dur-2) var(--ease-standard),
        color            var(--dur-2) var(--ease-standard),
        border-color     var(--dur-2) var(--ease-standard),
        box-shadow       var(--dur-2) var(--ease-standard),
        opacity          var(--dur-2) var(--ease-standard),
        transform        var(--dur-2) var(--ease-emphasized);
}

/* 3. 圆角强化: 卡片 / 按钮 / 输入 / 弹层统一抬到 Material 大圆角 */
.card, .auth-card, .storage-card, .stat-card, .share-card, .shop-card, .ann-card {
    border-radius: var(--radius-lg);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
.card:hover, .stat-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.btn { border-radius: var(--radius-full); font-weight: 500; padding: 9px 18px; }
.btn-sm { border-radius: var(--radius-full); padding: 5px 12px; }
.btn-lg { border-radius: var(--radius-full); padding: 12px 26px; font-size: 15px; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: var(--shadow-sm); transition-duration: 60ms; }
.btn-primary {
    background: var(--primary); border-color: var(--primary); color: var(--primary-text);
    box-shadow: 0 1px 2px rgba(26,115,232,.28), 0 2px 8px rgba(26,115,232,.20);
}
.btn-primary:hover {
    background: var(--primary-hover); border-color: var(--primary-hover);
    box-shadow: 0 2px 6px rgba(26,115,232,.32), 0 8px 20px rgba(26,115,232,.24);
}
.btn-primary:active { background: var(--primary-active); }
.btn-danger { border-radius: var(--radius-full); }
.btn-success { border-radius: var(--radius-full); }
.btn-ghost { border-radius: var(--radius-full); }
.btn:disabled, .btn[disabled] { opacity: .5; transform: none !important; box-shadow: none; }

.input, textarea.input, select.input, .md-dialog-input, .md-dialog-select,
.nav-search-input {
    border-radius: var(--radius-sm);
    border-color: var(--input-border);
    transition: border-color var(--dur-2) var(--ease-standard),
                box-shadow var(--dur-2) var(--ease-standard),
                background-color var(--dur-2) var(--ease-standard);
}
.input:hover, textarea.input:hover, select.input:hover { border-color: var(--border-strong); }
.input:focus, textarea.input:focus, select.input:focus,
.md-dialog-input:focus, .md-dialog-select:focus, .nav-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--input-focus-ring);
}

/* 4. 焦点可见: Material 风格焦点环 (键盘可达性) */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.btn:focus-visible, .file-item:focus-visible { outline-offset: 3px; }

/* 5. 顶栏: 更强的毛玻璃 + 滚动后浮起 */
.topbar {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: 1px solid transparent;
    transition: box-shadow var(--dur-3) var(--ease-standard),
                border-color var(--dur-3) var(--ease-standard),
                background-color var(--dur-3) var(--ease-standard);
}
.topbar.scrolled {
    border-bottom-color: var(--border);
    box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 6px 20px rgba(16,24,40,.05);
}
.nav a { border-radius: var(--radius-full); padding: 8px 16px; }
.nav a:hover { background: var(--surface-container); color: var(--text); }
.nav a.active { background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; }
.nav a.active::after { display: none; }
.brand { gap: 12px; }
.brand-text { font-weight: 600; letter-spacing: -.01em; }

/* 6. 弹层: 大圆角 + 强调曲线进场 (减速滑翔 + 微弹落位) */
.modal, .md-dialog-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    animation: srPop .34s var(--ease-decelerate) both;
    will-change: transform, opacity;
}
@keyframes srPop {
    0%   { opacity: 0; transform: translateY(18px) scale(.955); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.modal-overlay, .modal-backdrop {
    background: var(--backdrop);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: srFade .22s var(--ease-standard) both;
}
@keyframes srFade { from { opacity: 0 } to { opacity: 1 } }
.dropdown-menu, .ctx-menu, .nav-search-dropdown, .toast {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border-color: var(--border);
}
.dropdown-menu, .ctx-menu, .nav-search-dropdown {
    animation: srMenuIn .22s var(--ease-soft-spring) both;
    transform-origin: var(--sr-origin, top center);
    will-change: transform, opacity;
}
@keyframes srMenuIn {
    0%   { opacity: 0; transform: translateY(-8px) scale(.96); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.ctx-menu-item, .dropdown-menu a, .dropdown-menu button, .nav-search-result {
    border-radius: var(--radius-sm);
}
.dropdown-menu a, .dropdown-menu button { margin: 2px 4px; width: calc(100% - 8px); }

/* 7. 页面转场: 更顺眼 (淡出更快, 淡入更长 + 轻微上浮缩放) */
.page { animation: srPageIn .36s var(--ease-decelerate) both; }
@keyframes srPageIn {
    0%   { opacity: 0; transform: translateY(12px) scale(.992); }
    50%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
main.spa-fade-out {
    opacity: 0;
    transform: translateY(-6px) scale(.996);
    transition: opacity 130ms var(--ease-accelerate), transform 130ms var(--ease-accelerate);
}
main.spa-fade-in > .page { animation: srPageIn .36s var(--ease-decelerate) both; }

/* 8. 列表行: 圆角胶囊 + 顺畅 hover */
.file-list { border-radius: var(--radius); }
.file-list .row { border-radius: var(--radius-sm); margin: 0 6px; border-bottom-color: transparent; }
.file-list .row:hover { background: var(--row-hover); }
.file-list .row.selected, .file-list .row.is-selected {
    background: var(--primary-container); color: var(--on-primary-container);
}
.file-item { border-radius: var(--radius); border-color: var(--border); }
.file-item:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.file-item.selected, .file-item.is-selected {
    border-color: var(--primary);
    background: var(--primary-container);
    box-shadow: 0 0 0 2px var(--primary);
}
.file-item .file-icon, .file-item .file-thumb { border-radius: var(--radius-sm); }
.file-grid { gap: 14px; }

/* 9. 进度条 / 滑块 */
.progress { height: 8px; border-radius: var(--radius-full); background: var(--surface-container); }
.progress-bar { border-radius: var(--radius-full); transition: width .45s var(--ease-emphasized); }
.bar { border-radius: var(--radius-full); }
.slider { border-radius: var(--radius-full); }
.slider::before { border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.24); }

/* 10. 滚动条: 悬浮式细条 */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color var(--dur-2) var(--ease-standard);
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }

/* 11. Toast: 底部居中胶囊 (弹簧入场 + 加速退场 + 平滑收起) */
.toast-container { z-index: 10050; gap: 0; }
.toast {
    border-radius: var(--radius-full);
    padding: 12px 22px;
    box-shadow: var(--shadow-lg);
    animation: srToastIn .42s var(--ease-spring) both;
    margin-bottom: 8px;
}
@keyframes srToastIn {
    0%   { opacity: 0; transform: translateY(26px) scale(.92); }
    58%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.toast.toast-out { animation: srToastOut .2s var(--ease-accelerate) both; }
@keyframes srToastOut {
    from { opacity: 1; transform: translateY(0)    scale(1); }
    to   { opacity: 0; transform: translateY(12px) scale(.96); }
}
/* 移除时同时播放"淡出下落 + 高度折叠", 上面的提示顺滑落位不再跳变
   (JS 先量高写入 inline height, height 插值才有起点; gap 已换 margin-bottom) */
.toast.toast-out.collapse {
    overflow: hidden;
    animation: srToastOut .2s var(--ease-accelerate) both,
               srToastCollapse .3s var(--ease-standard) both;
}
@keyframes srToastCollapse {
    to { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; }
}

/* 12. 上传区: 呼吸感虚线框 */
.upload-zone { border-radius: var(--radius-lg); background: var(--surface-container); }
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--primary);
    background: var(--primary-soft);
    transform: translateY(-1px);
}

/* 13. 全局拖拽落点提示 */
.drag-over, .drag-over-folder, .move-tree-folder.drag-over-folder {
    border-radius: var(--radius) !important;
    outline: 2px dashed var(--primary);
    outline-offset: -4px;
    background: var(--primary-soft) !important;
}
.selection-lasso {
    background: var(--primary-soft);
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-xs);
    box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

/* 14. 表格: 圆角容器化 */
/* 圆角裁切同样交给 .tbl-scroll 容器 —— div 是真正的 block container,
   overflow 对它一定生效; 而 table 不是 block container, overflow 并不适用。 */
.tbl-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
/* 滚动容器内的表格保持内容自然宽度, 由容器负责滚动而不是把卡片撑破 */
.tbl-scroll > table.tbl { width: 100%; min-width: max-content; }
table.tbl { border-radius: var(--radius); }
.tbl th {
    background: var(--table-header-bg);
    font-weight: 600;
    color: var(--text-2);
    text-transform: none;
}
.tbl tbody tr { transition: background-color var(--dur-2) var(--ease-standard); }
.tbl tbody tr:hover td { background: var(--table-row-hover); }

/* 15. FAB / 标签 / 徽章 */
.fab {
    width: 56px; height: 56px;
    border-radius: var(--radius-full);
    background: var(--gradient-brand);
    box-shadow: 0 4px 12px rgba(26,115,232,.32), 0 10px 28px rgba(26,115,232,.24);
    transition: transform var(--dur-2) var(--ease-emphasized), box-shadow var(--dur-2) var(--ease-standard);
}
.fab:hover { transform: translateY(-2px) scale(1.04); }
.fab:active { transform: scale(.92); }
.tag, .badge { border-radius: var(--radius-full); padding: 3px 10px; font-weight: 500; }

/* 16. 骨架屏: 更柔和的呼吸 */
.skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(100deg, var(--surface-container) 30%, var(--surface-container-high) 50%, var(--surface-container) 70%);
    background-size: 220% 100%;
    animation: srShimmer 1.4s var(--ease-standard) infinite;
}
@keyframes srShimmer { from { background-position: 180% 0 } to { background-position: -60% 0 } }

/* 17. 无障碍: 尊重系统「减弱动效」 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}
html { scroll-behavior: smooth; }

   /* v1.0.9-mobile  移动端专项 + 圆润度收编
   上面 17 项主要解决桌面观感; 这一层补齐移动端: 安全区、触控目标、底部抽屉、
   表格横向滚动、iOS 输入缩放, 并把散落的硬编码小圆角统一到设计令牌。 */

/* 18. 安全区: 刘海屏 / 底部 Home 指示条不再遮挡内容 */
@supports (padding: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .modal-footer, .bottom-bar, .upload-dock, .global-upload-panel {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}
.safe-bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* 部分历史按钮没有套 .btn 类 (如上传面板底部的"重试失败任务"),
   在触屏上高度不足 30px, 手指很难点中。这里统一补足触控高度。 */
@media (pointer: coarse) {
    .global-upload-footer button, .upload-actions button,
    .toolbar button, .file-toolbar button {
        min-height: 40px;
        padding: 8px 12px;
    }
}

/* 19. 触控目标: 触屏设备所有可点元素 >= 44px (Apple HIG / Material 规范) */
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    /* 补 min-width —— 此前只给了 min-height, 横屏手机 (844x390) 实测
       出现 30x38 的按钮, 宽度方向同样达不到最小可点面积。 */
    .btn-sm { min-height: 38px; min-width: 40px; padding: 9px 15px; }
    /* 纯图标/文字很短的幽灵按钮会被内容压到 26px 宽, 一并回退 */
    .btn:not(.btn-block):not(.btn-lg) { min-width: 40px; }
    .icon-btn, .file-action, .global-upload-action, .global-upload-head-action {
        min-width: 44px; min-height: 44px;
    }
    /* 触屏没有真正的 hover, hover 态会"粘住"不消失 —— 改用 active 反馈 */
    .card:hover, .stat-card:hover, .storage-card:hover, .btn:hover { transform: none; }
    .card:active, .file-item:active, .list-row:active, .ann-card:active {
        transform: scale(.985); background: var(--row-hover);
    }
    .btn:active { transform: scale(.96); }
    /* 去掉移动端 300ms 点击延迟与灰色高亮块 */
    a, button, input, select, textarea, label, [role="button"], [onclick] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* 20. 移动端: 弹层改为底部抽屉 (bottom sheet), 拇指可达 */
@media (max-width: 768px) {
    /* 弹层容器在本项目里有两种类名: .modal (多数页面) 与 .modal-backdrop
       (存储策略等), 两者都必须变成底部抽屉, 否则移动端仍是居中弹窗。 */
    .modal, .modal-overlay, .modal-backdrop {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .modal > *:not(.modal-overlay),
    .modal-backdrop > *:not(.modal-overlay) {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh;
        margin: 0 !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        animation: srSheetUp .3s cubic-bezier(.2, 0, 0, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-footer {
        flex: 0 0 auto;
        gap: 10px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border);
    }
    /* 底部弹层的按钮左右平分, 主操作更宽 */
    .modal-footer .btn { flex: 1; min-height: 46px; }
    .modal-header { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}
@keyframes srSheetUp { from { transform: translateY(100%) } to { transform: translateY(0) } }

/* 21. 移动端: 表格 / 卡片不撑破视口 */
@media (max-width: 768px) {
    .tbl, .table-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl { min-width: 100%; font-size: 13px; }
    .tbl td, .tbl th { white-space: nowrap; padding: 11px 12px; }
    /* 卡片内容溢出是移动端整页横向抖动的常见原因 */
    .card, .stat-card, .storage-card, .share-card, .shop-card, .ann-card { overflow: hidden; }
    .form-row { grid-template-columns: 1fr !important; }
    /* 长文本一律允许换行, 避免撑宽 */
    .file-name, .file-meta, code, pre { overflow-wrap: anywhere; }
    /* 网格类布局在窄屏退化为单列 */
    .stat-grid, .card-grid, .storage-grid, .shop-grid { grid-template-columns: 1fr !important; }
}

/* 22. 移动端: 防止 iOS 聚焦输入框时自动放大整页 */
@media (max-width: 768px) {
    input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* 23. 圆润度收编: 把散落的硬编码小圆角抬到设计令牌 */
#ctxMenu, .ctx-menu, .ctx-menu-hide { border-radius: var(--radius) !important; }
#dropOverlay { border-radius: var(--radius-lg) !important; }
.global-upload-panel { border-radius: var(--radius-lg) !important; }
.global-upload-file-icon { border-radius: var(--radius) !important; }
.preview-img, .preview-video, .preview-audio { border-radius: var(--radius) !important; }
.ann-list .ann-card { border-radius: var(--radius) !important; }
code, pre { border-radius: var(--radius-xs) !important; }
.breadcrumb a { border-radius: var(--radius-sm) !important; }
.progress, .progress-bar { border-radius: var(--radius-xs) !important; }


   /* v1.1-ui  「桌面重构 + 移动端重写」全局布局层
   设计基线 (风格必须保持不变):
     · Material You 表面层级 / Google Blue #1a73e8 主色
     · 圆角阶梯 6 / 8 / 14 / 20 / 28 / 36
     · M3 Expressive 曲线族 (--ease-*)
     · 既有配色变量一个都不改, 只改结构与节奏
   桌面  ≥1025px : 顶栏 → 左侧固定侧边栏 (264px) + 顶部应用条 (搜索/主题)
   平板  769–1024 : 侧边栏收窄为图标 Rail (76px)
   移动  ≤768px  : 侧边栏 → 抽屉, 顶部 App Bar, 底部 Tab, 内容区 App 化 */

/* 0. 骨架: 所有断点共用 */
.app-shell { display: block; }
.app-main { min-width: 0; }

/* 顶部应用条 (桌面+移动共用, 内容按断点取舍) */
.app-bar {
    position: sticky; top: 0; z-index: 150;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px) saturate(1.8);
    -webkit-backdrop-filter: blur(14px) saturate(1.8);
}
.app-bar-inner {
    max-width: var(--content-max); margin: 0 auto;
    padding: 0 24px; height: 60px;
    display: flex; align-items: center; gap: 12px;
}
.app-bar-spacer { flex: 1; min-width: 0; }
/* 桌面端不需要汉堡菜单 (侧边栏常驻) */
.app-bar .menu-toggle { display: none; }
/* 侧边栏折叠按钮: 移动端不存在常驻侧边栏, 默认隐藏, ≥821px 显示 */
.app-bar .sidebar-toggle { display: none; }
/* 侧边栏"自带"的收起按钮 (侧边栏顶部右端): 同样只在 ≥821px 显示。
   纯手写 button + 内联 SVG, 不用 emoji、不用原生 select/原生下拉。 */
.side-collapse { display: none; }
/* 搜索框在应用条内占主导 */
.app-bar .nav-search { flex: 1; max-width: 520px; margin: 0; }
.app-bar .nav-search-input { height: 40px; border-radius: var(--radius-full); padding-left: 40px; background: var(--bg-2); }
.app-bar .nav-search-input:focus { background: var(--surface); }
.app-bar .nav-search-icon { left: 15px; }
.app-bar .theme-toggle { width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0; }

/* 1. 桌面: 顶栏改造为左侧固定侧边栏 */
@media (min-width: 1025px) {
    .topbar {
        position: fixed; inset: 0 auto 0 0;
        width: 264px; z-index: 200;
        border-bottom: none;
        border-right: 1px solid var(--border);
        background: var(--surface);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        box-shadow: none;
    }
    .topbar-inner {
        height: 100%; max-width: none; padding: 16px 12px;
        flex-direction: column; align-items: stretch; gap: 4px;
        overflow-y: auto; overflow-x: hidden;
    }
    .topbar-inner .brand {
        padding: 8px 12px 16px; margin-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }
    .brand-text { font-size: 18px; }
    .brand-sub { display: none; }

    /* 主导航: 纵向胶囊 */
    .nav {
        flex-direction: column; margin-left: 0; gap: 2px;
        flex: 0 0 auto;
    }
    .nav a {
        display: flex; align-items: center; gap: 10px;
        padding: 11px 14px; border-radius: var(--radius);
        font-size: 14px; font-weight: 500;
        transition: background var(--dur-2) var(--ease-standard),
                    color var(--dur-2) var(--ease-standard);
    }
    .nav a svg { flex-shrink: 0; }
    .nav a:hover { background: var(--surface-container); transform: none; }
    .nav a.active {
        background: var(--primary-container);
        color: var(--on-primary-container);
        font-weight: 600;
    }
    /* 侧边栏用左侧指示条, 不是底部下划线 */
    .nav a.active::after {
        left: 4px; right: auto; top: 50%; bottom: auto;
        width: 3px; height: 20px;
        transform: translateY(-50%);
        border-radius: var(--radius-full);
        background: var(--primary);
    }

    /* 用户区: 沉到侧边栏底部 */
    .user-box {
        margin-top: auto; padding-top: 12px;
        border-top: 1px solid var(--border);
        flex-direction: column; align-items: stretch; gap: 8px;
    }
    .user-box .user-points { justify-content: center; }
    .user-box .dropdown { width: 100%; }
    .user-box .dropdown > .btn { width: 100%; justify-content: space-between; }
    /* 侧边栏弹层一律向上弹: user-box 沉在侧边栏底部, 默认向下展开会被
       .topbar-inner 滚动容器 (overflow-y:auto) 整个裁掉 */
    .user-box .dropdown-menu { left: 0; right: 0; width: auto; top: auto; bottom: calc(100% + 6px); margin-top: 0; }
    .lang-switcher { justify-content: center; }
    .lang-switcher .lang-menu { top: auto; bottom: calc(100% + 8px); }

    /* 内容区让位 */
    .app-main { margin-left: 264px; }
    .app-bar-inner { padding: 0 28px; }

    /* 技术债清理 (本次刷新 bug 的根因):
       旧规则把 admin 页面的全局顶栏从"左侧固定侧边栏"还原为"顶部横条"
       (body.is-admin .topbar / .nav / .user-box / .app-main 一组覆盖)。
       但 SPA 跳转只替换 <main> 内容、不改 body class, 于是出现两套布局:
       站内点进后台 = 侧边栏形态; 浏览器刷新 / 直接输 URL = 顶栏形态。
       V0.1.1 起全站统一侧边栏, 后台自带 .admin-side 作为二级菜单列,
       两层并存没有冲突, 因此整组还原规则删除, is-admin 不再改变全局布局。 */
}

/* 2. 平板: 侧边栏收窄为图标 Rail */
@media (min-width: 821px) and (max-width: 1024px) {
    .topbar {
        position: fixed; inset: 0 auto 0 0; width: 76px; z-index: 200;
        border-bottom: none; border-right: 1px solid var(--border);
        background: var(--surface); backdrop-filter: none;
    }
    .topbar-inner {
        height: 100%; max-width: none; padding: 14px 10px;
        flex-direction: column; align-items: center; gap: 6px; overflow-y: auto;
    }
    .brand-text, .brand-sub, .nav a span, .user-box .dropdown > .btn span { display: none; }
    .topbar-inner .brand { justify-content: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); width: 100%; }
    .nav { flex-direction: column; margin-left: 0; width: 100%; gap: 4px; }
    .nav a { justify-content: center; padding: 12px 0; width: 100%; }
    .nav a.active::after { left: 0; top: 50%; width: 3px; height: 22px; transform: translateY(-50%); border-radius: 0 3px 3px 0; bottom: auto; }
    .user-box { margin-top: auto; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); width: 100%; }
    .lang-switcher { flex-direction: column; gap: 2px; }
    .app-main { margin-left: 76px; }
    /* 图标 rail 里的弹层: 76px 宽放不下 180px 菜单 (横向被 overflow-x 裁切),
       沉底的按钮向下展开又会被纵向裁切。方案: 菜单向上弹 + 弹出展开时
       rail 临时展宽为 244px 菜单面板, 收起自动还原。
       :has 与项目已在用的 color-mix 同代, 不引入新的浏览器基线 */
    .user-box .dropdown { width: 100%; }
    .user-box .dropdown > .btn { width: 100%; }
    .user-box .dropdown-menu { left: 0; right: 0; width: auto; top: auto; bottom: calc(100% + 6px); margin-top: 0; }
    .lang-menu { top: auto; bottom: calc(100% + 8px); }
    .topbar:has(.dropdown.open), .topbar:has(.lang-switcher.open) { width: 244px; box-shadow: var(--shadow-lg); }

    /* 同桌面端: 删除 admin 还原为顶栏的旧规则, 后台在图标 Rail 布局下同样保留侧边栏 */
}

/* 1.5 桌面/平板: 侧边栏收起 — 工具条按钮 + body.sidebar-collapsed 状态
   (整块侧边栏滑出左侧, 内容区收回; 按钮留在原位可再展开) */
@media (min-width: 821px) {
    .app-bar .sidebar-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex-shrink: 0;
        background: transparent; color: var(--text);
        border: none; border-radius: var(--radius-full); cursor: pointer;
        transition: background var(--dur-2) var(--ease-standard);
    }
    .app-bar .sidebar-toggle:hover { background: var(--bg-2); }
    .app-bar .sidebar-toggle:active { transform: scale(.94); }
    .app-bar .sidebar-toggle svg { transition: transform var(--dur-3) var(--ease-decelerate); }
    body.sidebar-collapsed .app-bar .sidebar-toggle svg { transform: rotate(180deg); }
    /* 侧边栏顶部的收起按钮: 贴住侧边栏右上角, 与 brand 同一视觉区 */
    .side-collapse {
        display: inline-flex; align-items: center; justify-content: center;
        align-self: flex-end; flex: 0 0 auto;
        width: 34px; height: 34px; margin: 0 2px 0 0;
        padding: 0; background: transparent; color: var(--text-2);
        border: none; border-radius: var(--radius-sm); cursor: pointer;
        transition: background var(--dur-2) var(--ease-standard),
                    color var(--dur-2) var(--ease-standard),
                    transform var(--dur-1) var(--ease-standard);
    }
    .side-collapse:hover { background: var(--bg-2); color: var(--text); }
    .side-collapse:active { transform: scale(.92); }
    .side-collapse svg { transition: transform var(--dur-3) var(--ease-decelerate); }
    body.sidebar-collapsed .side-collapse svg { transform: rotate(180deg); }
    /* 气泡翻到下方: 按钮贴着侧边栏顶边, 朝上弹会被 .topbar-inner 的滚动容器裁掉 */
    .side-collapse[data-tooltip]:hover::after { bottom: auto; top: calc(100% + 6px); }
    /* 侧边栏收起后的展开把手。
       收起时侧边栏整体 translateX(-100%) 滑出视口, 它自带的 .side-collapse
       跟着一起走, 剩下应用条上那个 40px 箭头混在标题/搜索框之间 ——
       实测按钮"存在且可见", 但用户普遍反馈"收起后找不到展开入口"。
       这里在屏幕左边缘再补一个明确的悬浮把手: 只在收起态出现,
       垂直居中贴左, 向右箭头 + 气泡文案, 点它即可展开。
       只在 >=821px 显示: 更窄的视口是抽屉式导航, 走 .menu-toggle。 */

    body.sidebar-collapsed .sidebar-reveal {
        display: inline-flex;
        transform: translateY(-50%) translateX(0);
        opacity: 1; pointer-events: auto;
    }


    .topbar, .app-main { transition: transform var(--dur-4) var(--ease-decelerate), margin-left var(--dur-4) var(--ease-decelerate), width var(--dur-3) var(--ease-standard); }
    body.sidebar-collapsed .topbar { transform: translateX(-100%); }
    body.sidebar-collapsed .app-main { margin-left: 0; }
    /* scrolled 底缘阴影是横向顶条时代的设计: ≥821 时 topbar 是竖置侧边栏,
       阴影会"悬空"在屏幕底部; 侧边分隔已由 border-right 提供, 这里直接关掉 */
    .topbar.scrolled { border-bottom-color: transparent; box-shadow: none; }
    /* 后台二级菜单吸附: 用户管理这类长页里, 220px 菜单不再随正文滚出视口。
       top = 60px app-bar + 12px 呼吸位; max-height 兜底矮屏内自身滚动 */
    .admin-side { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 84px); overflow-y: auto; }
}
    /* 侧边栏收起后的展开把手 —— 基础样式 (默认隐藏)。
       收起时侧边栏整体 translateX(-100%) 滑出视口, 自带的 .side-collapse 跟着走,
       只剩应用条上那个 40px 箭头混在标题与搜索框之间 —— 实测它"存在且可见",
       但用户普遍反馈"收起后找不到展开入口"。这里在屏幕左边缘再补一个明确的
       悬浮把手: 垂直居中贴左, 向右箭头 + 气泡, 点一下展开。
       只在 >=821px 的收起态显示 (见下方媒体查询): 更窄的视口是抽屉式导航,
       走 .menu-toggle, 这个把手只会挡住内容。 */
    .sidebar-reveal {
        position: fixed; left: 0; top: 50%;
        z-index: 60; display: none;
        align-items: center; justify-content: center;
        width: 26px; height: 58px; padding: 0;
        border: 1px solid var(--border); border-left: none;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        background: var(--surface); color: var(--text-2);
        box-shadow: var(--shadow-sm); cursor: pointer;
        transform: translateY(-50%) translateX(-2px);
        opacity: 0; pointer-events: none;
        transition: transform var(--dur-3) var(--ease-decelerate),
                    opacity var(--dur-2) var(--ease-standard),
                    background var(--dur-2) var(--ease-standard),
                    color var(--dur-2) var(--ease-standard);
    }
    .sidebar-reveal:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
    .sidebar-reveal:active { transform: translateY(-50%) scale(.94); }
    .sidebar-reveal svg { transition: transform var(--dur-3) var(--ease-decelerate); }
    .sidebar-reveal:hover svg { transform: translateX(2px); }
    /* 气泡朝右弹: 按钮贴着屏幕左边缘, 朝上/朝下都会被裁掉 */
    .sidebar-reveal[data-tooltip]:hover::after { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); bottom: auto; margin-bottom: 0; }
    .sidebar-reveal[data-tooltip]:hover::before { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); bottom: auto; width: 0; height: 0; border-style: solid; border-width: 5px 6px 5px 0; border-color: transparent var(--text) transparent transparent; pointer-events: none; z-index: 99; }


   /* v1.1-ui · 桌面端网盘页重设计 (风格不变, 结构与节奏重做) */
@media (min-width: 821px) {
    main { padding: 26px 28px 40px; }

    /* 网盘头部: 从"三段平铺"改为"卡片化控制台" */
    .drive-head {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        padding: 18px 20px;
        box-shadow: var(--shadow-sm);
        margin-bottom: 18px;
    }
    .drive-head-row { flex-wrap: wrap; gap: 12px; align-items: center; }
    .drive-actions { gap: 8px; }
    .drive-actions .btn { border-radius: var(--radius-full); }

    /* 面包屑: 药丸化 */
    .crumb, .crumb-root, .crumb-current {
        padding: 5px 11px; border-radius: var(--radius-full);
        font-size: 14px; font-weight: 500;
    }
    .crumb-current { background: var(--surface-container); color: var(--text); }
    .crumb-sep { opacity: .45; }

    /* 第二行: 搜索 + 视图 + 排序, 视觉降一级 */
    .drive-sub { gap: 10px; margin-top: 14px; }
    .search-box {
        background: var(--surface-container);
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        padding: 0 14px; height: 40px; flex: 1; max-width: 420px;
        transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
    }
    .search-box:focus-within { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
    .seg { background: var(--surface-container); border-radius: var(--radius-full); padding: 3px; }
    .seg-btn { border-radius: var(--radius-full); }
    .sort-wrap .btn { border-radius: var(--radius-full); background: var(--surface-container); border-color: transparent; }

    /* 状态行: 容量条更精致 */
    .drive-status { margin-top: 12px; font-size: 13px; color: var(--text-2); }
    .drive-quota { width: 120px; height: 6px; border-radius: var(--radius-full); background: var(--surface-container-high); overflow: hidden; }
    .drive-quota-bar { border-radius: var(--radius-full); background: var(--gradient-brand); }
    .drive-hint { opacity: .55; font-size: 12px; margin-top: 8px; }

    /* 文件网格: 更大的呼吸感 */
    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
        gap: 14px;
    }
    .file-item {
        border-radius: var(--radius-lg);
        padding: 18px 14px 14px;
        border: 1px solid var(--border);
        background: var(--surface);
        transition: transform var(--dur-2) var(--ease-standard),
                    box-shadow var(--dur-2) var(--ease-standard),
                    border-color var(--dur-2) var(--ease-standard),
                    background var(--dur-2) var(--ease-standard);
    }
    .file-item:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color: var(--border-2);
    }
    .file-item.selected {
        border-color: var(--primary);
        background: var(--primary-soft);
        box-shadow: 0 0 0 3px var(--primary-soft);
    }
    .file-icon {
        width: 52px; height: 52px; border-radius: var(--radius);
        display: flex; align-items: center; justify-content: center;
        background: var(--surface-container); margin-bottom: 10px;
    }
    .file-name { font-size: 14px; font-weight: 500; line-height: 1.4; }
    .file-meta { font-size: 12px; margin-top: 3px; }

    /* 批量工具条: 悬浮胶囊 */
    .batch-bar { margin-bottom: 14px; }
    .batch-bar-inner {
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-lg);
        padding: 8px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
    }
    .batch-actions .btn { border-radius: var(--radius-full); }

    /* 空态 */
    .drive-empty { padding: 56px 20px; }

    /* 详情面板: 右侧抽屉化 */
    #detailPanel {
        width: 420px !important;
        border-left: 1px solid var(--border);
        box-shadow: var(--shadow-xl) !important;
    }
}


   /* v1.1-ui · 移动端全盘重写 (≤768px)
   不是"桌面布局缩水", 而是一套独立的 App 布局:
     顶部 App Bar (汉堡 + 标题 + 主题)
     侧边栏 → 左侧抽屉 + 遮罩
     底部 Tab 导航 (安全区)
     内容区: 列表行 / 单列卡片 / 底部抽屉弹层 / FAB */
@media (max-width: 768px) {
    /* M1. 侧边栏 → 抽屉
       App Bar (z 401) 浮在抽屉 (z 400) 与遮罩 (z 399) 之上, 汉堡按钮因此始终可点;
       抽屉顶部空出 App Bar 的高度, 避免导航项被压在下面。 */
    .topbar {
        position: fixed; inset: 0 auto 0 0;
        width: min(84vw, 300px); z-index: 400;
        background: var(--surface);
        border-right: 1px solid var(--border);
        border-bottom: none;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        box-shadow: var(--shadow-xl);
        transform: translateX(-102%);
        transition: transform var(--dur-4) var(--ease-decelerate);
        overflow-y: auto;
        padding-top: calc(54px + env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
    }
    body.drawer-open .topbar { transform: translateX(0); }
    .topbar-inner {
        height: auto; min-height: 100%; max-width: none;
        padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
        flex-direction: column; align-items: stretch; gap: 6px;
        overflow: visible;
    }
    .topbar-inner .brand {
        padding: 6px 8px 14px; margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    .brand-text { font-size: 17px; }
    .nav { flex-direction: column; margin-left: 0; gap: 2px; flex: 0 0 auto; }
    .nav a {
        display: flex; align-items: center; gap: 12px;
        padding: 13px 14px; border-radius: var(--radius);
        font-size: 15px; font-weight: 500; min-height: 48px;
    }
    .nav a.active { background: var(--primary-container); color: var(--on-primary-container); }
    .nav a.active::after {
        left: 4px; right: auto; top: 50%; bottom: auto;
        width: 3px; height: 22px; transform: translateY(-50%);
        border-radius: var(--radius-full); background: var(--primary);
    }
    .user-box {
        margin-top: auto; padding-top: 14px;
        border-top: 1px solid var(--border);
        flex-direction: column; align-items: stretch; gap: 10px;
    }
    .user-box .dropdown { width: 100%; }
    .user-box .dropdown > .btn { width: 100%; min-height: 44px; }
    .user-box .dropdown-menu { position: static; width: 100%; box-shadow: none; border: 1px solid var(--border); margin-top: 6px; }
    .lang-switcher { justify-content: center; }

    /* 旧 mobile nav 规则把 .nav 默认 display:none, 抽屉打开时必须强制显示 */
    body.drawer-open .topbar .nav {
        display: flex !important;
        position: static !important;
        flex-direction: column !important;
        background: transparent !important;
        border-bottom: none !important;
        padding: 0 !important;
        margin: 0 !important;
        top: auto !important; left: auto !important; right: auto !important;
    }

    /* 抽屉遮罩 (真实元素, 点击即关; 用伪元素会挡住 App Bar 上的汉堡按钮) */
    .drawer-scrim {
        display: none;
        position: fixed; inset: 0; z-index: 399;
        background: var(--backdrop);
        animation: drawerFade var(--dur-2) var(--ease-standard) both;
    }
    body.drawer-open .drawer-scrim { display: block; }
    @keyframes drawerFade { from { opacity: 0 } to { opacity: 1 } }

    /* M2. 顶部 App Bar */
    .app-bar {
        padding-top: env(safe-area-inset-top);
        height: auto;
        z-index: 401;   /* 高于抽屉与遮罩, 保证汉堡按钮始终可点 */
    }
    .app-bar-inner {
        height: 54px; padding: 0 8px; gap: 6px;
    }
    .app-bar .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex-shrink: 0;
        background: transparent; color: var(--text);
        border-radius: var(--radius-full);
        order: 99;   /* 靠右: 排在标题与主题按钮之后 (见后文 1.1-ui 块) */
    }
    .app-bar .menu-toggle:active { background: var(--bg-2); }
    /* 移动端隐藏应用条里的全局搜索 (网盘页有本地搜索, 避免两个搜索框打架) */
    .app-bar .nav-search { display: none; }
    .app-bar .theme-toggle { width: 44px; height: 44px; }

    /* M3. 内容区: 为底部 Tab 让位 */
    main {
        padding: 12px 12px calc(76px + env(safe-area-inset-bottom));
        min-height: auto;
    }
    .page { padding: 0; }

    /* M4. 底部 Tab 导航 */
    .mobile-bottom-nav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
        height: calc(60px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        backdrop-filter: blur(16px) saturate(1.8);
        -webkit-backdrop-filter: blur(16px) saturate(1.8);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 12px rgba(16,24,40,.05);
    }
    .mobile-bottom-nav a {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 3px;
        height: 60px; font-size: 11px; font-weight: 500;
        color: var(--text-3); border-radius: 0;
        transition: color var(--dur-2) var(--ease-standard);
    }
    .mobile-bottom-nav a span { font-size: 11px; }
    .mobile-bottom-nav a.active { color: var(--primary); background: transparent; }
    .mobile-bottom-nav a.active svg { transform: translateY(-1px); }
    .mobile-bottom-nav a:active { background: var(--surface-container); }

    /* M5. FAB 抬到 Tab 之上 */
    .fab {
        bottom: calc(74px + env(safe-area-inset-bottom));
        width: 56px; height: 56px;
        box-shadow: var(--shadow-lg);
    }

    /* M6. 网盘页: 网格 → App 列表行 */
    .drive-head {
        padding: 12px 12px 14px; margin-bottom: 10px;
        border-radius: var(--radius-lg);
        background: var(--surface);
        border: 1px solid var(--border);
    }
    .drive-head-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .crumbs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    .crumbs::-webkit-scrollbar { display: none; }
    .drive-actions { display: flex; gap: 8px; }
    .drive-actions .btn { flex: 1; justify-content: center; min-height: 44px; border-radius: var(--radius); }
    .drive-actions .btn-icon { flex: 0 0 44px; }
    .drive-actions .drive-policy-select { display: none; }

    .drive-sub { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; }
    .search-box { max-width: none; width: 100%; height: 44px; border-radius: var(--radius); }
    .drive-sub .drive-spacer { display: none; }
    .seg { width: 100%; justify-content: stretch; }
    .seg-btn { flex: 1; min-height: 40px; }
    .sort-wrap { width: 100%; }
    .sort-wrap > .btn { width: 100%; min-height: 44px; justify-content: center; }
    .sort-menu { left: 0; right: 0; }

    .drive-status { flex-wrap: wrap; gap: 6px; font-size: 12px; }
    .drive-quota { width: 90px; }
    .tag-filter { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .tag-chip { flex-shrink: 0; min-height: 34px; }
    .drive-hint { display: none; }   /* 触屏没有 Ctrl/框选, 提示无意义 */

    /* 文件项本身不在这里定义: drive.html 有自己的局部 <style>, 加载顺序在全局 CSS 之后
       且带 !important, 写在全局层会被压掉。移动端文件项统一在 TPL_DRIVE 局部样式里处理。 */

    /* 批量工具条: 贴底悬浮胶囊 */
    .batch-bar { position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 290; }
    .batch-bar-inner {
        border-radius: var(--radius-lg); flex-wrap: wrap; gap: 8px;
        padding: 10px 12px; box-shadow: var(--shadow-xl);
    }
    .batch-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
    .batch-actions .btn { flex: 1; min-width: 84px; min-height: 44px; justify-content: center; }

    /* M7. 弹层: 一律底部抽屉 */
    .modal, .modal-overlay, .modal-backdrop, .move-dialog-hide {
        align-items: flex-end !important;
        justify-content: center;
        padding: 0 !important;
    }
    .modal > .card, .modal-overlay > .card, .modal-backdrop > .card,
    .move-dialog-hide > .card {
        width: 100% !important; max-width: 100% !important;
        max-height: 88vh; overflow-y: auto;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
        margin: 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
        animation: sheetUp var(--dur-4) var(--ease-decelerate) both;
    }
    @keyframes sheetUp { from { transform: translateY(24px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

    /* 详情面板: 全屏页 */
    #detailPanel {
        width: 100% !important; max-width: 100% !important; height: 100dvh !important;
        border-left: none !important;
        padding-top: env(safe-area-inset-top);
    }

    /* M8. 触控目标回退 */
    .btn, .btn-sm, button, .icon-btn, a.btn {
        min-height: 44px;
    }
    .btn-sm { min-height: 40px; padding-left: 12px; padding-right: 12px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    .dropdown-menu a { min-height: 44px; display: flex; align-items: center; gap: 10px; }
    .tag-chip, .chip { min-height: 36px; }

    /* M9. 表格 → 卡片流 */
    table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .stat-grid, .card-grid, .storage-grid, .shop-grid { grid-template-columns: 1fr !important; gap: 10px; }

    /* M10. Toast 抬到 Tab 之上 */
    .toast-container {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        left: 12px !important; right: 12px !important;
    }
    /* 全局上传面板同理 */
    .global-upload-panel {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        left: 8px !important; right: 8px !important;
        width: auto !important; max-width: none !important;
    }

    /* M11. 触控目标宽度回退 (审计实测)
       高度够了但只有 26px 宽的两类按钮, 真机上手指很难点中:
         · 重复文件页的行内操作按钮 .btn-sm.btn-ghost  (26x40)
         · 后台抽屉侧栏的关闭按钮 .admin-side-close    (26x44) */
    .btn-sm.btn-ghost { min-width: 34px; padding-left: 10px; padding-right: 10px; }
    .admin-side-close { min-width: 34px; }
}

/* 抽屉打开时锁滚动 */
body.drawer-open { overflow: hidden; }

   /* v1.2-rwd. 响应式健全性层
   这一层是全站无论哪个页面漏写了断点, 这里都能保证「不撑破视口、能滚、点得中」。
   设计原则:
     1) 只做容器与可用性的约束, 不动配色/圆角/间距等风格令牌 —— 风格保持不变。
     2) 涉及的溢出类修复一律放在最后, 保证层叠顺序上有最终发言权。 */

/* R1. 超宽屏: 内容区逐级放宽, 避免 2560px 下左右各空掉 700px */
@media (min-width: 1600px) { :root { --content-max: 1560px; } }
@media (min-width: 1920px) { :root { --content-max: 1680px; } }
@media (min-width: 2400px) { :root { --content-max: 1840px; } }

/* R2. 溢出任何替换元素/表单控件都不得超出其容器 */
img, video, canvas, svg, iframe, embed, object { max-width: 100%; }
input, select, textarea, button, .btn { max-width: 100%; }
/* 媒体保持比例, 不被压扁 */
img, video { height: auto; }

/* R3. 经典 flex/grid 溢出原因: 子项默认 min-width:auto 会拒绝收缩, 把父容器顶破 */
.card > *, .row > *, .toolbar > *, .file-toolbar > *, .modal-footer > *,
.stat-grid > *, .card-grid > *, .storage-grid > *, .shop-grid > *,
.form-row > *, .app-bar-inner > *, .topbar-inner > * { min-width: 0; }

/* R4. 长文本/URL/无空格串一律允许换行, 这是撑破布局最常见的单点 */
body { overflow-wrap: break-word; }
.file-name, .file-meta, .file-path, .breadcrumb, .ctx-menu, .ctx-menu-hide,
code, pre, .tbl td, .tbl th, .ann-card, .share-card, .storage-card {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* R5. 平板 / 小笔电 (769–1024px): 侧栏收成 Rail, 表格仍可能超宽 —— 保证整页不横溢 */
@media (min-width: 821px) and (max-width: 1024px) {
    /* 注意: 这里刻意不用 html/body{overflow-x:hidden} 回退 —— 它会让 position:sticky
       的侧边栏失效, 属于饮鸩止渴。根源 (.tbl-scroll 滚动容器) 已在上面解决。 */
    main { padding: 24px 18px; }
    /* 后台表格此前在这个区间没有滚动容器, 实测 844px 视口内容宽 1034px —— 整页横向溢出 */
    .tbl-scroll { max-width: 100%; }
    .card { max-width: 100%; }
}

/* R6. 极窄屏 (<=360px): 收紧留白, 把像素让给内容 */
@media (max-width: 480px) {
    main { padding: 16px 12px; }
    .app-bar-inner, .topbar-inner { padding: 0 12px; }
    .card { padding: 14px 12px; }
    .tbl td, .tbl th { padding: 9px 10px; font-size: 12px; }
    .stat-grid, .card-grid, .storage-grid, .shop-grid { gap: 10px; }
}

/* R7. 横屏手机 (高度 <= 480px): 竖向空间极紧, 压缩纵向留白避免内容被挤到折叠线以下 */
@media (max-height: 480px) and (orientation: landscape) and (pointer: coarse) {
    main { padding: 12px 16px; }
    .app-bar { height: 52px; }
    .bottom-tabbar { height: 54px; }
    .modal-card, .bottom-sheet { max-height: 92vh; }
    /* 横屏下竖向滚动更常见, 别让 100vh 系列把内容顶出视口 */
    .modal-overlay { padding: 8px; align-items: flex-start; }
}

/* R8. 移动端卡片: 允许横向滚动而不是硬裁 (此前 overflow:hidden 会吃掉表格内容) */
@media (max-width: 768px) {
    .card:has(.tbl-scroll), .card:has(> table.tbl) { overflow-x: auto; overflow-y: hidden; }
    /* 表格滚动容器内的单元格不再 nowrap 硬撑, 超长字段交给容器滚动 */
    .tbl-scroll > table.tbl { font-size: 13px; }
    .tbl-scroll > table.tbl td, .tbl-scroll > table.tbl th { padding: 11px 12px; }
}

/* R9. 悬浮层通用约束: 菜单/弹层/提示一律不得超出视口 */
#ctxMenu, .ctx-menu, .ctx-menu-hide, .dropdown-menu, .sort-menu, .view-menu,
.toast, .toast-wrap, .tooltip, .global-upload-panel {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
}

/* R10. 安全区: 刘海/手势条机型下, 左右也留出内边距 (此前只处理了底部) */
@supports (padding: env(safe-area-inset-left)) {
    @media (max-width: 768px) {
        main { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
        .app-bar-inner { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
    }
}

   /* v2-mobile  「移动端 UI 全面重写层」(高对比 · 原生 App 化)
   这是一层独立、集中、唯一的移动端权威样式 (仅 ≤768px 生效)。
   覆盖并合并此前散落在 10538/11320/11972/12359/12754… 的碎片补丁:
   视觉: 高对比现代原生 App —— 更强的文字层级 / 明确的容器描边 /
         高饱和主色 / 克制的阴影, 剥掉灰色渐变与浮白卡片。
   交互: 全局涟漪(Ripple) · 汉堡与 X 形变 · 底部导航胶囊指示 ·
         底部弹层拖拽把手 · 弹簧转场 · 触控按压反馈。
   原则: 桌面端(≥769px)一条不漏地被豁免, 零回归。 */

/* M0. 移动端专用令牌 (桌面不使用, 无副作用, 随主题分支) */
:root {
    --m-appbar-h: 56px;
    --m-navbar-h: 62px;
    --m-primary: #1a73e8;
    --m-primary-strong: #0f5fd0;
    --m-on-primary: #ffffff;
    --m-primary-container: #e2ecfc;
    --m-on-primary-container: #0b3f91;
    --m-surface-solid: #ffffff;
    --m-scrim: rgba(12, 16, 22, .58);
    --m-text-hi: #15191f;
    --m-text-mid: #3b4149;
    --m-text-low: #6b7280;
    --m-border: #e4e7eb;
    --m-border-strong: #c9cfd7;
    --m-ripple: rgba(26, 115, 232, .16);
    --m-navactive-bg: rgba(26, 115, 232, .12);
    --m-field-bg: #f1f3f5;
}
[data-theme="dark"] {
    --m-primary: #8ab4f8;
    --m-primary-strong: #aecbfa;
    --m-on-primary: #062e6f;
    --m-primary-container: #1d2b45;
    --m-on-primary-container: #b6cff7;
    --m-surface-solid: #121417;
    --m-scrim: rgba(0, 0, 0, .66);
    --m-text-hi: #e8ebee;
    --m-text-mid: #bcc2c9;
    --m-text-low: #6e7680;
    --m-border: #272d34;
    --m-border-strong: #3a424b;
    --m-ripple: rgba(138, 180, 248, .18);
    --m-navactive-bg: rgba(138, 180, 248, .14);
    --m-field-bg: #1a1e24;
}

/* 桌面端隐藏 App Bar 页标题 (仅移动端展示) */
.app-bar .app-bar-title { display: none; }

/* 涟漪 ink (配合 JS 注入, 全局元素均可挂 .m-ripple) */
.m-ripple { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.m-ripple > .ripple-ink {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: var(--m-ripple, rgba(26,115,232,.16));
    transform: scale(0); opacity: .85; will-change: transform, opacity;
    animation: mRipple .58s var(--ease-standard, cubic-bezier(.4,0,.2,1)) forwards;
}
@keyframes mRipple { to { transform: scale(2.6); opacity: 0; } }

/* 以下均 ≤768px 生效 */
@media (max-width: 768px) {

/* A. App Bar 高对比 + 页面标题 + 汉堡与 X */
.app-bar {
    padding-top: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--m-surface-solid) 88%, transparent);
    border-bottom: 1px solid var(--m-border);
    box-shadow: 0 1px 0 rgba(15,20,28,.02);
    backdrop-filter: blur(18px) saturate(1.9);
    -webkit-backdrop-filter: blur(18px) saturate(1.9);
    z-index: 401;
}
.app-bar-inner { height: var(--m-appbar-h); padding: 0 8px; gap: 6px; }
.app-bar .app-bar-title {
    flex: 1 1 auto; min-width: 0; display: block; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
    font-size: 16.5px; font-weight: 700; letter-spacing: -.01em;
    color: var(--m-text-hi); margin-left: 2px;
}
.app-bar .app-bar-spacer { flex: 0 0 auto; }
/* 汉堡菜单: 钉死在应用条最右端 (用户要求: 靠右, 不居中)
   - order:99 把它从 DOM 首位挪到视觉末位 —— 排在主题按钮之后, 紧贴右边缘;
     .app-bar-title 占 flex:1 吃掉剩余空间, 于是标题靠左、汉堡靠右。
     用 order 而不是改 DOM 顺序, 是为了让桌面端(隐藏该按钮)布局零影响。
   - 用逻辑属性 margin-inline-end: 在 RTL(阿拉伯语)下自动翻到最左,
     始终贴在"结束边"。
   - 负 margin 抵消容器 padding, 让图标离屏幕边缘 4px( Material 3 规范 ),
     而不是之前的 10px + 图标内边距。 */
.app-bar .menu-toggle {
    display: inline-flex; width: 44px; height: 44px; flex-shrink: 0;
    background: transparent; color: var(--m-text-hi);
    border-radius: 14px; position: relative; overflow: hidden;
    order: 99; margin-inline-start: 0; margin-inline-end: -4px;
}
.app-bar .menu-toggle:active { background: var(--m-navactive-bg); }
/* 三线汉堡 → X (由 body.drawer-open 驱动形变) */
.mt-icon {
    position: relative; width: 20px; height: 20px; display: block;
    flex: 0 0 auto;
}
.mt-icon::before, .mt-icon::after, .mt-icon i {
    content: ""; position: absolute; left: 2px; right: 2px; height: 2px;
    border-radius: 2px; background: currentColor;
    transition: transform var(--dur-3, .26s) var(--ease-emphasized, cubic-bezier(.4,0,.2,1)), top var(--dur-3, .26s) var(--ease-emphasized), background-color var(--dur-2, .18s);
}
.mt-icon i { top: 9px; }
.mt-icon::before { top: 4px; }
.mt-icon::after { top: 14px; }
body.drawer-open .mt-icon::before { top: 9px; transform: rotate(45deg); }
body.drawer-open .mt-icon::after { top: 9px; transform: rotate(-45deg); }
body.drawer-open .mt-icon i { transform: scaleX(0); opacity: 0; }
.app-bar .theme-toggle {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    color: var(--m-text-mid); position: relative; overflow: hidden;
}

.app-bar .theme-toggle:active { background: var(--m-navactive-bg); }

/* B. 遮罩: 深色 + 弹入 */
.drawer-scrim {
    background: var(--m-scrim);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: drawerFade var(--dur-2, .22s) var(--ease-standard, ease) both;
}

/* C. 侧边抽屉: 现代化 (圆角末梢 + 深色遮罩 + 高对比导航) */
.topbar {
    position: fixed; inset: 0 auto 0 0; z-index: 400;
    width: min(82vw, 306px);
    background: var(--m-surface-solid);
    border-right: 1px solid var(--m-border);
    box-shadow: 8px 0 40px rgba(8,12,16,.28);
    transform: translateX(-104%);
    transition: transform calc(var(--dur-4, .34s) * .8) var(--ease-decelerate, cubic-bezier(0,0,.2,1));
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
}
body.drawer-open .topbar { transform: translateX(0); }
.topbar-inner { padding: 10px 12px calc(18px + env(safe-area-inset-bottom)); gap: 4px; }
.topbar-inner .brand {
    padding: 14px 10px 16px; margin-bottom: 6px;
    border-bottom: 1px solid var(--m-border);
}
.topbar-inner .brand-text { font-size: 18px; font-weight: 800; color: var(--m-text-hi); letter-spacing: -.01em; }
.nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 13px; margin: 1px 0; min-height: 48px;
    border-radius: 14px; font-size: 15px; font-weight: 600;
    color: var(--m-text-mid);
    position: relative; overflow: hidden;
}
.nav a svg { color: currentColor; }
.nav a:hover { background: var(--m-field-bg); color: var(--m-text-hi); }
.nav a.active {
    background: var(--m-navactive-bg);
    color: var(--m-primary-strong);
    font-weight: 700;
}
.nav a.active::after {
    left: 6px; top: 50%; right: auto; bottom: auto;
    transform: translateY(-50%); width: 3px; height: 20px;
    border-radius: 3px; background: var(--m-primary);
}
.user-box { gap: 10px; padding-top: 14px; }
.user-box .dropdown > .btn { min-height: 46px; border-radius: 12px; }
.user-points { background: var(--m-navactive-bg); color: var(--m-primary-strong); font-weight: 700; border-radius: 999px; }

/* D. 底部导航: 高对比指标 + 波纹 */
.mobile-bottom-nav {
    height: calc(var(--m-navbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--m-surface-solid) 90%, transparent);
    border-top: 1px solid var(--m-border);
    box-shadow: 0 -6px 24px rgba(10,14,20,.07);
    backdrop-filter: blur(18px) saturate(1.9);
    -webkit-backdrop-filter: blur(18px) saturate(1.9);
    z-index: 300;
}
.mobile-bottom-nav a {
    position: relative; overflow: hidden;
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    height: var(--m-navbar-h); font-size: 11px; font-weight: 600;
    color: var(--m-text-low);
    border-radius: 0;
    transition: color var(--dur-2, .18s) ease;
}
.mobile-bottom-nav a svg {
    width: 22px; height: 22px; transition: transform var(--dur-3, .24s) var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
}
.mobile-bottom-nav a span { font-size: 11px; letter-spacing: .01em; }
.mobile-bottom-nav a::after {
    content: ""; position: absolute; top: 7px; bottom: 7px; left: 50%;
    transform: translateX(-50%); width: 46px; border-radius: 12px;
    background: var(--m-navactive-bg); opacity: 0; z-index: -1;
    transition: opacity var(--dur-2, .18s) ease;
}
.mobile-bottom-nav a.active { color: var(--m-primary-strong); }
.mobile-bottom-nav a.active svg { transform: translateY(-1.5px) scale(1.08); }
.mobile-bottom-nav a.active::after { opacity: 1; }
.mobile-bottom-nav a:active svg { transform: translateY(0) scale(.9); }

/* E. FAB: 主色渐变 + 发光 */
.fab {
    bottom: calc(var(--m-navbar-h) + 16px + env(safe-area-inset-bottom));
    right: 18px; width: 58px; height: 58px; border-radius: 20px;
    background: linear-gradient(135deg, var(--m-primary), var(--m-primary-strong));
    color: var(--m-on-primary);
    box-shadow: 0 8px 22px rgba(20, 93, 200, .34);
    transition: transform var(--dur-2, .18s) var(--ease-spring, cubic-bezier(.34,1.5,.64,1)), box-shadow var(--dur-2, .18s) ease;
    /* 必须是 fixed。此前这里写了 relative（只为给 ::before 的 inset:0 造包含块），
       结果基础层的 position:fixed 被覆盖，FAB 掉进文档流，不再悬浮在内容之上。
       fixed 同样是包含块，::before 照常工作。 */
    position: fixed; overflow: hidden;
    z-index: var(--z-fab, 90);
}
.fab::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
    pointer-events: none;
}
.fab:active { transform: scale(.9); box-shadow: 0 4px 12px rgba(20,93,200,.28); }
.fab svg { width: 26px; height: 26px; filter: none; }

/* F. 通用控件: 高对比与去灰化 */
main { padding: 14px 14px calc(var(--m-navbar-h) + 22px + env(safe-area-inset-bottom)); }
.btn, .btn-sm, button, .icon-btn, a.btn {
    min-height: 44px; border-radius: 12px;
}
.btn { background: var(--m-field-bg); border: 1px solid transparent; color: var(--m-text-hi); font-weight: 600; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--m-primary); color: var(--m-on-primary); border-color: transparent; box-shadow: 0 4px 14px rgba(20,93,200,.28); }
.btn-primary:active { background: var(--m-primary-strong); }
.btn-ghost { border: 1px solid var(--m-border-strong); background: var(--m-surface-solid); }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea, .input {
    background: var(--m-field-bg); border: 1.5px solid transparent;
    border-radius: 12px; color: var(--m-text-hi); font-size: 16px;
    min-height: 46px; padding: 0 14px;
}
input:focus, select:focus, textarea:focus, .input:focus {
    outline: none; border-color: var(--m-primary);
    box-shadow: 0 0 0 3px var(--m-navactive-bg);
    background: var(--m-surface-solid);
}
.card { background: var(--m-surface-solid); border: 1px solid var(--m-border); border-radius: 18px; }
.card, .surface, .panel { color: var(--m-text-hi); }
table.tbl, .tbl { color: var(--m-text-mid); }
.tbl thead th { color: var(--m-text-low); font-weight: 700; text-transform: none; }
.page-title { font-size: 22px; font-weight: 800; color: var(--m-text-hi); letter-spacing: -.02em; }
.card-title { font-weight: 700; color: var(--m-text-hi); }

/* G. 底部弹层: 拖拽把手 + 顶高对比 */
.modal > .card, .modal-overlay > .card, .modal-backdrop > .card,
.move-dialog-hide > .card {
    border-radius: 24px 24px 0 0 !important;
    border: none; padding-bottom: calc(18px + env(safe-area-inset-bottom));
    animation: sheetUp .32s var(--ease-decelerate, cubic-bezier(0,0,.2,1)) both;
}
.modal > .card > :first-child, .modal-overlay > .card > :first-child, .modal-backdrop > .card > :first-child {
    padding-top: 12px;
}
.modal > .card::before, .modal-overlay > .card::before, .modal-backdrop > .card::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 999px;
    background: var(--m-border-strong); margin: 10px auto 4px;
    flex: 0 0 auto;
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: .4 } to { transform: translateY(0); opacity: 1 } }

/* H. 详情面板全屏页 */
#detailPanel { padding-top: env(safe-area-inset-top); }

/* I. Toast 与批量条: 抬升 + 强化 */
.toast-container { bottom: calc(var(--m-navbar-h) + 14px + env(safe-area-inset-bottom)) !important; }
.global-upload-panel { bottom: calc(var(--m-navbar-h) + 14px + env(safe-area-inset-bottom)) !important; }
.batch-bar { bottom: calc(var(--m-navbar-h) + 10px + env(safe-area-inset-bottom)) !important; left: 14px !important; right: 14px !important; }
.batch-bar-inner { border-radius: 16px; background: var(--m-surface-solid); border: 1px solid var(--m-border); box-shadow: var(--shadow-xl, 0 16px 40px rgba(10,14,20,.18)); }

/* J. 触控目标统一 (base 已有回退, 这里再压一遍关键项) */
select, input[type="file"] + label, .check, .checkbox, label { -webkit-tap-highlight-color: transparent; }
.drive-actions .btn-icon, .btn-icon { width: 44px; height: 44px; }
.seg-btn { min-width: 44px; min-height: 40px; }

/* K. 极窄屏与安全区 (合并旧 R6/R10, 避免双重 padding) */
@supports (padding: env(safe-area-inset-left)) {
    main { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
    .app-bar-inner { padding-left: calc(8px + env(safe-area-inset-left)); padding-right: calc(8px + env(safe-area-inset-right)); }
}
@media (max-width: 480px) {
    main { padding: 12px 12px calc(var(--m-navbar-h) + 18px + env(safe-area-inset-bottom)); }
}

} /* /END v2-mobile 重写层 */

/* 无障碍: 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
    .topbar, .modal > .card, .modal-overlay > .card, .modal-backdrop > .card { animation: none !important; transition: none !important; }
}



/* ==========================================================================
   界面风格 (data-uistyle) —— 11 套设计语言的完整落地
   --------------------------------------------------------------------------
   目标不是"换色卡", 而是让每套一眼可辨。除了配色, 每套还整体重写:
     · 排版  字体族 / 字号阶梯 / 字重 / 行高 / 字距 / 标题字形
     · 密度  控件高度、列表行高、卡片留白
     · 形状  圆角阶梯、描边粗细与样式
     · 层级  投影、描边、色彩层级 (各家手段完全不同)
     · 材质  毛玻璃 / 纸质纹理 / 噪点 / 渐变 / 实色硬阴影
     · 动效  时长与缓动曲线
     · 结构  侧栏宽度、导航高度

   性能约定 (重要):
     所有 backdrop-filter 一律只在 ≥1025px 生效, 且只加在"浮层"上,
     不加在常驻的大面积容器上 —— 全屏模糊层反复创建/销毁是切风格时
     最贵的开销, 也是"连点几次风格就卡死"的主因之一。

   数据来源: Apple HIG / m3.material.io / fluent2.microsoft.design /
   weui.io / Anthropic 品牌体系为官方一手资料;
   少女 / 少年 / Kawaii / 新中式 / 宋式无官方规范, 采用成熟设计实践。
   ========================================================================== */

/* ==========================================================================
   Part 1 —— 组件形态规则 (所有风格共用, 只替换令牌)
   组件的圆角/阴影/配色已走 var(), 会被各风格令牌自动接管;
   这里补的是"原本没有变量化"的几项: 控件高度、行高、侧栏宽、导航高、
   以及标题排版 —— 标题字形是各家差异最直观的地方, 必须变量化。
   ========================================================================== */

/* 控件与输入 */
[data-uistyle] .btn,
[data-uistyle] .btn-sm {
    min-height: var(--ctrl-h); padding-top: 0; padding-bottom: 0;
    border-radius: var(--r-btn);
    font-weight: var(--fw-btn);
    letter-spacing: var(--ls-btn);
    text-transform: var(--tt-btn, none);
    border-width: var(--bw-btn, 1px);
}
[data-uistyle] .btn {
    box-shadow: var(--sh-btn, none);
    font-size: var(--fs-btn, inherit);
}
[data-uistyle] .input,
[data-uistyle] select.input,
[data-uistyle] textarea.input {
    min-height: var(--ctrl-h);
    border-radius: var(--r-input);
    border-width: var(--bw-input);
    padding-top: 0; padding-bottom: 0;
    font-size: var(--fs-input, inherit);
}
[data-uistyle] textarea.input { min-height: auto; padding-top: 8px; padding-bottom: 8px; }

/* 形状: 卡片 / 列表行 / 浮层 */
[data-uistyle] .card {
    border-radius: var(--r-card);
    border-width: var(--bw-card);
    box-shadow: var(--sh-card, none);
    background: var(--card-bg, var(--bg-card));
}
[data-uistyle] .file-item {
    border-radius: var(--r-card);
    border-width: var(--bw-card);
}
[data-uistyle] .file-card-actions .btn { min-height: 28px; }
[data-uistyle] .ctx-menu,
[data-uistyle] .dropdown-menu,
[data-uistyle] .md-dialog { border-radius: var(--r-menu); }

/* 密度: 列表行高 (各家规范里最直观的差异) */
[data-uistyle] .tbl tbody tr { height: var(--row-h); }
[data-uistyle] .file-grid.grid-list .file-item { min-height: var(--row-h); }

/* 结构: 侧栏宽度与导航条高度 */
@media (min-width: 1025px) {
    [data-uistyle] .topbar { width: var(--side-w); }
    [data-uistyle] .app-main { margin-left: var(--side-w); }
}
[data-uistyle] .app-bar { height: var(--nav-h); }
[data-uistyle] .app-bar-inner { height: var(--nav-h); }

/* 正文字号与行高 */
[data-uistyle] body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-base);
    letter-spacing: var(--ls-base, 0);
}

/* 标题排版 —— 每套风格真正的"脸"
   页面主标题 / 区块标题的字号、字重、字距全部变量化。 */
[data-uistyle] .page-title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-h);
    letter-spacing: var(--ls-h);
    line-height: var(--lh-h, 1.3);
    font-family: var(--font-h, var(--font-sans));
    text-transform: var(--tt-h, none);
}
[data-uistyle] .card-title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2, 600);
    letter-spacing: var(--ls-h2, 0);
    font-family: var(--font-h, var(--font-sans));
}
[data-uistyle] .section-title,
[data-uistyle] .panel-title {
    font-weight: var(--fw-h2, 600);
    letter-spacing: var(--ls-h2, 0);
    font-family: var(--font-h, var(--font-sans));
}

/* 切风格瞬间禁掉全站过渡 —— 见 JS 侧 .uistyle-switching。
   不加这条, 每次切换会让成百上千个元素同时播颜色/圆角/阴影过渡,
   连续点几次就把主线程压满 (表现: 页面卡住不动)。 */
.uistyle-switching,
.uistyle-switching *,
.uistyle-switching *::before,
.uistyle-switching *::after {
    transition: none !important;
    animation: none !important;
}

/* ==========================================================================
   Part 2 —— 11 套风格
   ========================================================================== */

/* ---------- 1. XCMDY 风 ----------
   基线: 不设 data-uistyle 属性, 完全保持原生外观, 此处不覆盖任何变量。 */


/* ---------- 2. 简约极客风 (Geek / Terminal) ----------
   设计语言: 终端与 IDE。密度极高、零装饰、层级靠 1px 描边而非投影。
   排版: 全站等宽字体, 正文 12.5px / 行高 1.5, 按钮全大写 + 宽字距。
   形状: 近直角 (2px)。材质: 纯色 + 极淡扫描线, 无模糊无渐变。
   主色: 终端青绿 #00d4aa。 */
[data-uistyle="geek"] {
    --font-sans: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Mono",
                 Consolas, Menlo, "Courier New", monospace;
    --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, Menlo, monospace;
    --font-h: var(--font-mono);
    --fs-base: 12.5px;
    --fw-base: 400;
    --lh-base: 1.5;
    --ls-base: .01em;
    --fs-btn: 11.5px;
    --fs-input: 12.5px;
    --fs-h1: 17px;  --fw-h: 700;  --ls-h: .14em;  --tt-h: uppercase;
    --fs-h2: 12.5px; --fw-h2: 700; --ls-h2: .12em;
    --ctrl-h: 26px;
    --row-h: 26px;
    --side-w: 232px;
    --nav-h: 38px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 0px; --radius-sm: 2px; --radius: 2px;
    --radius-lg: 2px; --radius-xl: 3px; --radius-2xl: 4px; --radius-full: 2px;
    --r-btn: 2px; --r-input: 2px; --r-card: 2px; --r-modal: 3px; --r-menu: 2px;
    --fw-btn: 700; --ls-btn: .1em; --tt-btn: uppercase;
    /* 终端美学里没有"浮起": 用 1px ring 替代投影 */
    --shadow-sm: 0 0 0 1px rgba(0, 212, 170, .20);
    --shadow:    0 0 0 1px rgba(0, 212, 170, .28);
    --shadow-md: 0 0 0 1px rgba(0, 212, 170, .32);
    --shadow-lg: 0 0 0 1px rgba(0, 212, 170, .40), 0 10px 28px rgba(0, 0, 0, .32);
    --shadow-xl: 0 0 0 1px rgba(0, 212, 170, .48), 0 20px 48px rgba(0, 0, 0, .45);
    --sh-btn: none;
    --sh-card: none;
    /* 动效: 短促、无弹性, 工具感 */
    --dur-1: 60ms; --dur-2: 90ms; --dur-3: 130ms; --dur-4: 170ms;
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-decelerate: cubic-bezier(.16, 1, .3, 1);
    --ease-accelerate: cubic-bezier(.4, 0, .6, 1);
    --ease-emphasized: cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.4, 0, .2, 1);
    --ease-soft-spring: cubic-bezier(.4, 0, .2, 1);
    --primary: #00a97f; --primary-hover: #00c48f; --primary-active: #008f6b;
    --primary-text: #04140f; --primary-container: #0d3229; --on-primary-container: #3ff0bd;
    --primary-soft: rgba(0, 212, 170, .10);
    --link: #00c48f; --link-hover: #3ff0bd;
    --input-bg: #ffffff;
    --input-border: #cfd6d3; --input-border-hover: #00d4aa;
    --input-focus-ring: rgba(0, 212, 170, .22);
}
[data-theme="light"][data-uistyle="geek"] {
    --bg: #f2f4f4; --bg-2: #e8ecec; --surface: #ffffff; --surface-2: #f8fafa;
    --surface-container: #eef1f1; --surface-container-high: #e2e7e7;
    --bg-card: #ffffff; --card-bg: #ffffff; --bg-soft: #f3f5f5;
    --border: #dde2e1; --border-2: #cbd2d1; --border-strong: #9aa5a3;
    --text: #10201c; --text-2: #4d5f5b; --text-3: #6d807c;
}
[data-theme="dark"][data-uistyle="geek"] {
    --bg: #080b0b; --bg-2: #0d1211; --surface: #0f1514; --surface-2: #141b1a;
    --surface-container: #121918; --surface-container-high: #1b2322;
    --bg-card: #0f1514; --card-bg: #0f1514; --bg-soft: #121918;
    --border: #22302e; --border-2: #30423f; --border-strong: #4c625e;
    --text: #d8f5ee; --text-2: #86a8a2; --text-3: #6a8781;
    --input-bg: #060a09; --input-border: #2a403c;
    --input-focus-ring: rgba(63, 240, 189, .28);
    --shadow-sm: 0 0 0 1px rgba(0, 212, 170, .26);
    --shadow-lg: 0 0 0 1px rgba(0, 212, 170, .40), 0 10px 28px rgba(0, 0, 0, .60);
    --shadow-xl: 0 0 0 1px rgba(0, 212, 170, .48), 0 20px 48px rgba(0, 0, 0, .72);
}
/* 极淡扫描线 + 标题左侧竖条: 终端质感, 成本可忽略 (纯渐变, 不建合成层) */
[data-uistyle="geek"] body {
    background-image: repeating-linear-gradient(
        180deg, rgba(0, 212, 170, .028) 0px, rgba(0, 212, 170, .028) 1px,
        transparent 1px, transparent 3px);
    background-attachment: fixed;
}
[data-uistyle="geek"] .page-title {
    border-left: 3px solid var(--primary);
    padding-left: 10px;
}
[data-uistyle="geek"] .tbl tbody tr { border-bottom: 1px solid var(--border); }


/* ---------- 3. 纯苹果风 (Apple HIG) ----------
   设计语言: Clarity / Deference / Depth。内容优先、发丝线分隔、
   系统蓝 #007aff、圆角连续 (10–14px)、44pt 最小点击区。
   排版: SF Pro, 正文 13.5px, 大标题 28px / 700 / 紧字距(-.02em) ——
        苹果的大标题是"重而紧", 与 M3 的"轻而松"正好相反。
   材质: 侧栏与顶栏半透明 + blur(20px) saturate(180%) (仅 ≥1025px)。 */
[data-uistyle="apple"] {
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-h: -apple-system, BlinkMacSystemFont, "SF Pro Display",
              "PingFang SC", "Microsoft YaHei", sans-serif;
    --fs-base: 13.5px;
    --fw-base: 400;
    --lh-base: 1.45;
    --fs-btn: 13.5px;
    --fs-input: 13.5px;
    --fs-h1: 28px; --fw-h: 700; --ls-h: -.022em;
    --fs-h2: 15px; --fw-h2: 600; --ls-h2: -.01em;
    --ctrl-h: 32px;
    --row-h: 38px;
    --side-w: 260px;
    --nav-h: 50px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 6px; --radius-sm: 8px; --radius: 10px;
    --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 18px; --radius-full: 9999px;
    --r-btn: 8px; --r-input: 8px; --r-card: 12px; --r-modal: 14px; --r-menu: 11px;
    --fw-btn: 500; --ls-btn: 0;
    /* HIG: 阴影克制, 只有浮起层才用重阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow:    0 2px 8px rgba(0, 0, 0, .10);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .12);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .16);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, .28);
    --sh-btn: 0 1px 2px rgba(0, 0, 0, .08);
    --sh-card: 0 1px 3px rgba(0, 0, 0, .06);
    /* 动效: 微交互 150ms, 进出 240ms, 缓出 (.32,.72,0,1) */
    --dur-1: 100ms; --dur-2: 150ms; --dur-3: 240ms; --dur-4: 320ms;
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-decelerate: cubic-bezier(.32, .72, 0, 1);
    --ease-accelerate: cubic-bezier(.4, 0, .6, 1);
    --ease-emphasized: cubic-bezier(.32, .72, 0, 1);
    --ease-spring: cubic-bezier(.16, 1, .3, 1);
    --ease-soft-spring: cubic-bezier(.32, .72, 0, 1);
    --primary: #007aff; --primary-hover: #0067d8; --primary-active: #005bbb;
    --primary-text: #ffffff; --primary-container: #eaf3ff; --on-primary-container: #00458f;
    --primary-soft: rgba(0, 122, 255, .10);
    --link: #007aff; --link-hover: #0067d8;
    --danger: #ff3b30;
    --input-bg: #ffffff; --input-border: rgba(0, 0, 0, .14);
    --input-border-hover: #007aff; --input-focus-ring: rgba(0, 122, 255, .18);
}
[data-theme="light"][data-uistyle="apple"] {
    --bg: #f5f5f7; --bg-2: #ececf0; --surface: #ffffff; --surface-2: #fafafc;
    --surface-container: #f0f0f4; --surface-container-high: #e6e6ea;
    --bg-card: #ffffff; --card-bg: #ffffff; --bg-soft: #f2f2f5;
    --border: rgba(0, 0, 0, .08); --border-2: #d8d8de; --border-strong: #c2c2ca;
    --text: #1c1c1e; --text-2: #515154; --text-3: #86868b;
}
[data-theme="dark"][data-uistyle="apple"] {
    --bg: #1c1c1e; --bg-2: #2c2c2e; --surface: #2c2c2e; --surface-2: #3a3a3c;
    --surface-container: #242426; --surface-container-high: #3a3a3c;
    --bg-card: #2c2c2e; --card-bg: #2c2c2e; --bg-soft: #242426;
    --border: rgba(255, 255, 255, .10); --border-2: #48484a; --border-strong: #636366;
    --text: #f5f5f7; --text-2: #aeaeb2; --text-3: #8e8e93;
    --primary: #0a84ff; --primary-hover: #409cff; --primary-active: #0071e3;
    --primary-container: #0a3d6b; --on-primary-container: #a6d2ff;
    --danger: #ff453a;
    --input-bg: #1c1c1e; --input-border: rgba(255, 255, 255, .16);
    --input-focus-ring: rgba(10, 132, 255, .28);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .40);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .50);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, .62);
}
/* Vibrancy: 只在桌面端, 且只给侧栏/顶栏 —— 常驻容器不再叠加多层模糊 */
@media (min-width: 1025px) {
    [data-uistyle="apple"] .topbar {
        background: rgba(246, 246, 248, .72);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
    [data-theme="dark"][data-uistyle="apple"] .topbar { background: rgba(30, 30, 32, .72); }
    [data-uistyle="apple"] .app-bar {
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
    [data-theme="dark"][data-uistyle="apple"] .app-bar { background: rgba(28, 28, 30, .76); }
}
/* 苹果的分组列表: 发丝线分隔 + 圆角整组, 不用分隔线切到底 */
[data-uistyle="apple"] .page-title { margin-bottom: 2px; }
[data-uistyle="apple"] .btn:active { transform: none; filter: brightness(.94); }
[data-theme="dark"][data-uistyle="apple"] .btn:active { filter: brightness(1.18); }


/* ---------- 4. 纯谷歌风 (Material Design 3) ----------
   设计语言: Tonal surface (色调层级优先于投影)、状态层反馈、Ripple。
   排版: Roboto, 正文 14/20, 标题 22px 但字重只有 400 ——
        M3 的 headline 刻意用 Regular, 靠字号不靠字重建立层级。
   形状: 按钮为全圆角胶囊 (M3 标志性形态), 卡片 12px, 弹窗 28px。
   动效: short2=100 / medium4=400, 缓动 cubic-bezier(.2,0,0,1)。 */
[data-uistyle="google"] {
    --font-sans: Roboto, "Roboto Flex", "Google Sans Text", -apple-system,
                 "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-h: Roboto, "Google Sans Text", "PingFang SC", "Microsoft YaHei", sans-serif;
    --fs-base: 14px;
    --fw-base: 400;
    --lh-base: 1.45;
    --ls-base: .01em;
    --fs-btn: 14px;
    --fs-input: 14px;
    --fs-h1: 24px; --fw-h: 400; --ls-h: 0;
    --fs-h2: 16px; --fw-h2: 500; --ls-h2: .01em;
    --ctrl-h: 40px;
    --row-h: 56px;
    --side-w: 320px;
    --nav-h: 64px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 4px; --radius-sm: 8px; --radius: 12px;
    --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px;
    --r-btn: 9999px; --r-input: 4px; --r-card: 12px; --r-modal: 28px; --r-menu: 12px;
    --fw-btn: 500; --ls-btn: .01em;
    /* M3: 层级靠 surface 色调差, 阴影极轻 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
    --shadow:    0 1px 3px rgba(0, 0, 0, .12);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .15);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .18);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, .22);
    --sh-btn: none;
    --sh-card: 0 1px 2px rgba(0, 0, 0, .08);
    /* 状态层透明度: hover 8% / focus 10% / pressed 10% / dragged 16% */
    --md-state-hover: rgba(103, 80, 164, .08);
    --md-state-focus: rgba(103, 80, 164, .10);
    --md-state-pressed: rgba(103, 80, 164, .10);
    --md-state-selected: rgba(103, 80, 164, .12);
    --md-state-on-primary: rgba(255, 255, 255, .12);
    --dur-1: 100ms; --dur-2: 150ms; --dur-3: 250ms; --dur-4: 350ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-decelerate: cubic-bezier(.05, .7, .1, 1);
    --ease-accelerate: cubic-bezier(.3, 0, .8, .15);
    --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
    --ease-spring: cubic-bezier(.2, 0, 0, 1);
    --ease-soft-spring: cubic-bezier(.2, 0, 0, 1);
    --primary: #6750a4; --primary-hover: #5b4494; --primary-active: #4f3b84;
    --primary-text: #ffffff; --primary-container: #eaddff; --on-primary-container: #4f378b;
    --primary-soft: rgba(103, 80, 164, .10);
    --link: #6750a4; --link-hover: #5b4494;
    --success: #386a20; --warning: #7d5a00; --danger: #b3261e;
    --input-bg: #ffffff; --input-border: #79747e;
    --input-border-hover: #6750a4; --input-focus-ring: rgba(103, 80, 164, .18);
}
[data-theme="light"][data-uistyle="google"] {
    --bg: #f4f0fa; --bg-2: #e8e1f0; --surface: #ffffff; --surface-2: #f8f4fc;
    --surface-container: #eee8f4; --surface-container-high: #e4ddec;
    --bg-card: #ffffff; --card-bg: #ffffff; --bg-soft: #f4f0fa;
    --border: #e4ddec; --border-2: #cac4d0; --border-strong: #49454f;
    --text: #1c1b1f; --text-2: #49454f; --text-3: #625b71;
}
[data-theme="dark"][data-uistyle="google"] {
    --bg: #1c1b1f; --bg-2: #2b2930; --surface: #2b2930; --surface-2: #36343b;
    --surface-container: #211f26; --surface-container-high: #36343b;
    --bg-card: #2b2930; --card-bg: #2b2930; --bg-soft: #211f26;
    --border: #49454f; --border-2: #625b71; --border-strong: #938f99;
    --text: #e6e1e5; --text-2: #cac4d0; --text-3: #a29ead;
    --primary: #d0bcff; --primary-hover: #dbc8ff; --primary-active: #c4acf0;
    --primary-text: #381e72; --primary-container: #4f378b; --on-primary-container: #eaddff;
    --success: #8fd88b; --warning: #e8c266; --danger: #f2b8b5;
    --md-state-hover: rgba(208, 188, 255, .10);
    --md-state-focus: rgba(208, 188, 255, .12);
    --md-state-pressed: rgba(208, 188, 255, .12);
    --md-state-selected: rgba(208, 188, 255, .14);
    --input-bg: #2b2930; --input-border: #938f99;
    --input-focus-ring: rgba(208, 188, 255, .24);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .40);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .48);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, .56);
}
/* M3 状态层: 绝对定位覆盖, 不参与布局, 不挤动内容 */
[data-uistyle="google"] .btn,
[data-uistyle="google"] .uistyle-opt,
[data-uistyle="google"] .nav a,
[data-uistyle="google"] .dropdown-item,
[data-uistyle="google"] .ctx-menu-item { position: relative; overflow: hidden; }
[data-uistyle="google"] .btn::before,
[data-uistyle="google"] .uistyle-opt::before,
[data-uistyle="google"] .nav a::before,
[data-uistyle="google"] .dropdown-item::before,
[data-uistyle="google"] .ctx-menu-item::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--md-state-hover); opacity: 0;
    transition: opacity var(--dur-2) var(--ease-standard);
}
[data-uistyle="google"] .btn:hover::before,
[data-uistyle="google"] .uistyle-opt:hover::before,
[data-uistyle="google"] .nav a:hover::before,
[data-uistyle="google"] .dropdown-item:hover::before,
[data-uistyle="google"] .ctx-menu-item:hover::before { opacity: 1; }
[data-uistyle="google"] .btn:active::before,
[data-uistyle="google"] .uistyle-opt:active::before { opacity: 1; background: var(--md-state-pressed); }
/* M3 主按钮不投影, 靠 tonal 色块; FAB 才是 elevation 主角 */
[data-uistyle="google"] .btn-primary { box-shadow: none; }
[data-uistyle="google"] .fab { border-radius: 16px; height: 56px; width: 56px; }


/* ---------- 5. Windows 11 风 (Fluent 2) ----------
   设计语言: 矩形秩序、8px 圆角体系、1px 轻描边建立边界、Mica 与 Acrylic 材质。
   排版: Segoe UI Variable, 正文 14px, 标题 20px Semibold (Fluent 的
        Title 比 HIG 小、比 M3 重 —— 专业工具的克制感)。
   层级: 靠描边与窗口化分割线, 不靠投影堆叠。 */
[data-uistyle="win11"] {
    --font-sans: "Segoe UI Variable", "Segoe UI", -apple-system,
                 "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-h: "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --fs-base: 14px;
    --fw-base: 400;
    --lh-base: 1.45;
    --fs-btn: 14px;
    --fs-input: 14px;
    --fs-h1: 20px; --fw-h: 600; --ls-h: 0;
    --fs-h2: 14px; --fw-h2: 600; --ls-h2: 0;
    --ctrl-h: 32px;
    --row-h: 40px;
    --side-w: 260px;
    --nav-h: 48px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 3px; --radius-sm: 4px; --radius: 6px;
    --radius-lg: 8px; --radius-xl: 8px; --radius-2xl: 12px; --radius-full: 9999px;
    --r-btn: 4px; --r-input: 4px; --r-card: 8px; --r-modal: 8px; --r-menu: 8px;
    --fw-btn: 600; --ls-btn: 0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
    --shadow:    0 2px 4px rgba(0, 0, 0, .10);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .14);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, .18);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, .24);
    --sh-btn: none;
    --sh-card: none;
    /* 动效: decelerate (.33,0,.67,1) / accelerate (.5,0,.75,0) */
    --dur-1: 83ms; --dur-2: 167ms; --dur-3: 250ms; --dur-4: 333ms;
    --ease-standard: cubic-bezier(.33, 0, .67, 1);
    --ease-decelerate: cubic-bezier(.33, 0, .67, 1);
    --ease-accelerate: cubic-bezier(.5, 0, .75, 0);
    --ease-emphasized: cubic-bezier(.33, 0, .67, 1);
    --ease-spring: cubic-bezier(.33, 0, .67, 1);
    --ease-soft-spring: cubic-bezier(.33, 0, .67, 1);
    --primary: #0078d4; --primary-hover: #1a88d9; --primary-active: #0067be;
    --primary-text: #ffffff; --primary-container: #e1f0fb; --on-primary-container: #004377;
    --primary-soft: rgba(0, 120, 212, .10);
    --link: #0078d4; --link-hover: #1a88d9;
    --input-bg: #ffffff; --input-border: #8a8886;
    --input-border-hover: #0078d4; --input-focus-ring: rgba(0, 120, 212, .20);
}
[data-theme="light"][data-uistyle="win11"] {
    --bg: #f3f3f3; --bg-2: #ebebeb; --surface: #ffffff; --surface-2: #fbfbfb;
    --surface-container: #f0f0f0; --surface-container-high: #e6e6e6;
    --bg-card: #ffffff; --card-bg: #ffffff; --bg-soft: #f5f5f5;
    --border: #e0e0e0; --border-2: #d1d1d1; --border-strong: #8a8886;
    --text: #1b1b1b; --text-2: #444746; --text-3: #616161;
}
[data-theme="dark"][data-uistyle="win11"] {
    --bg: #202020; --bg-2: #2b2b2b; --surface: #2b2b2b; --surface-2: #323232;
    --surface-container: #262626; --surface-container-high: #333333;
    --bg-card: #2b2b2b; --card-bg: #2b2b2b; --bg-soft: #262626;
    --border: #3d3d3d; --border-2: #4a4a4a; --border-strong: #8a8a8a;
    --text: #f3f3f3; --text-2: #c8c8c8; --text-3: #a0a0a0;
    --primary: #4cc2ff; --primary-hover: #6ecdff; --primary-active: #2fb0f5;
    --primary-text: #002a3d; --primary-container: #004e70; --on-primary-container: #c7e9ff;
    --input-bg: #1f1f1f; --input-border: #6b6b6b;
    --input-focus-ring: rgba(76, 194, 255, .28);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, .50);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, .60);
}
/* Mica: 窗口背景取极淡壁纸色调, 纯渐变实现, 不建合成层 */
[data-uistyle="win11"] body {
    background-image: linear-gradient(135deg, rgba(0, 120, 212, .05) 0%, rgba(255, 255, 255, 0) 45%),
                      linear-gradient(315deg, rgba(120, 80, 200, .04) 0%, rgba(255, 255, 255, 0) 42%);
    background-attachment: fixed;
}
[data-theme="dark"][data-uistyle="win11"] body {
    background-image: linear-gradient(135deg, rgba(76, 194, 255, .06) 0%, rgba(0, 0, 0, 0) 45%),
                      linear-gradient(315deg, rgba(160, 120, 255, .05) 0%, rgba(0, 0, 0, 0) 42%);
}
[data-uistyle="win11"] {
    --acr-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
}
[data-theme="light"][data-uistyle="win11"] { --acr-bg: rgba(252, 252, 252, .74); }
[data-theme="dark"][data-uistyle="win11"] { --acr-bg: rgba(44, 44, 44, .70); }
/* Acrylic 只给浮层 (非常驻), 且仅在桌面端 */
@media (min-width: 1025px) {
    [data-uistyle="win11"] .ctx-menu,
    [data-uistyle="win11"] .md-dialog,
    [data-uistyle="win11"] .dropdown-menu,
    [data-uistyle="win11"] .toast {
        background-color: var(--acr-bg);
        background-image: var(--acr-noise);
        backdrop-filter: blur(30px) saturate(150%);
        -webkit-backdrop-filter: blur(30px) saturate(150%);
    }
    [data-uistyle="win11"] .topbar {
        background-color: var(--acr-bg);
        backdrop-filter: blur(18px) saturate(125%);
        -webkit-backdrop-filter: blur(18px) saturate(125%);
    }
}
/* Fluent: 卡片 hover 描边点亮 (层级靠线不靠投影) */
[data-uistyle="win11"] .card,
[data-uistyle="win11"] .file-item {
    transition: border-color var(--dur-2) var(--ease-standard),
                background var(--dur-2) var(--ease-standard);
}
[data-uistyle="win11"] .file-item:hover { border-color: rgba(0, 120, 212, .55); }
[data-theme="dark"][data-uistyle="win11"] .file-item:hover { border-color: rgba(76, 194, 255, .55); }
[data-uistyle="win11"] .btn-primary { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18); }
[data-theme="dark"][data-uistyle="win11"] .btn-primary { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .40); }
/* 窗口化: 卡片带 1px 顶边, 模仿标题栏分割 */
[data-uistyle="win11"] .card { border-top-width: 1px; }


/* ---------- 6. 微信风 (WeUI) ----------
   设计语言: 移动端列表优先、零投影、发丝线分隔、紧凑高效。
   排版: PingFang / 系统字体, 正文 15px (微信正文偏大易读), 标题 17px Medium。
   结构: 灰底 #ededed + 白色内容块, 行高 44px (微信列表标准), 分隔线内缩。
   形状: 小圆角 6px, 按钮 8px, 无渐变无模糊 —— 干净到几乎没有装饰。 */
[data-uistyle="wechat"] {
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-h: var(--font-sans);
    --fs-base: 15px;
    --fw-base: 400;
    --lh-base: 1.5;
    --fs-btn: 15px;
    --fs-input: 15px;
    --fs-h1: 17px; --fw-h: 600; --ls-h: 0;
    --fs-h2: 15px; --fw-h2: 600; --ls-h2: 0;
    --ctrl-h: 40px;
    --row-h: 44px;
    --side-w: 248px;
    --nav-h: 48px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 4px; --radius-sm: 5px; --radius: 6px;
    --radius-lg: 8px; --radius-xl: 8px; --radius-2xl: 10px; --radius-full: 9999px;
    --r-btn: 8px; --r-input: 6px; --r-card: 6px; --r-modal: 10px; --r-menu: 8px;
    --fw-btn: 500; --ls-btn: 0;
    /* WeUI 几乎不用投影: 分组靠灰底与分隔线 */
    --shadow-sm: none; --shadow: none; --shadow-md: none;
    --shadow-lg: 0 2px 12px rgba(0, 0, 0, .12);
    --shadow-xl: 0 4px 20px rgba(0, 0, 0, .18);
    --sh-btn: none;
    --sh-card: none;
    /* 动效: 快速干脆, 微信几乎不做长动画 */
    --dur-1: 80ms; --dur-2: 120ms; --dur-3: 180ms; --dur-4: 240ms;
    --ease-standard: cubic-bezier(.25, .8, .25, 1);
    --ease-decelerate: cubic-bezier(.25, .8, .25, 1);
    --ease-accelerate: cubic-bezier(.25, .8, .25, 1);
    --ease-emphasized: cubic-bezier(.25, .8, .25, 1);
    --ease-spring: cubic-bezier(.25, .8, .25, 1);
    --ease-soft-spring: cubic-bezier(.25, .8, .25, 1);
    --primary: #07c160; --primary-hover: #06ad56; --primary-active: #059b4d;
    --primary-text: #ffffff; --primary-container: #e3f7ea; --on-primary-container: #046b34;
    --primary-soft: rgba(7, 193, 96, .10);
    --link: #576b95; --link-hover: #46587c;
    --danger: #fa5151;
    --input-bg: #ffffff; --input-border: #e0e0e0;
    --input-border-hover: #07c160; --input-focus-ring: rgba(7, 193, 96, .18);
}
[data-theme="light"][data-uistyle="wechat"] {
    --bg: #ededed; --bg-2: #e5e5e5; --surface: #ffffff; --surface-2: #fafafa;
    --surface-container: #f2f2f2; --surface-container-high: #ebebeb;
    --bg-card: #ffffff; --card-bg: #ffffff; --bg-soft: #f7f7f7;
    --border: #e6e6e6; --border-2: #d9d9d9; --border-strong: #b2b2b2;
    --text: #191919; --text-2: #4d4d4d; --text-3: #7f7f7f;
}
[data-theme="dark"][data-uistyle="wechat"] {
    --bg: #191919; --bg-2: #1f1f1f; --surface: #1f1f1f; --surface-2: #262626;
    --surface-container: #232323; --surface-container-high: #2c2c2c;
    --bg-card: #1f1f1f; --card-bg: #1f1f1f; --bg-soft: #232323;
    --border: #2e2e2e; --border-2: #3a3a3a; --border-strong: #5a5a5a;
    --text: #e5e5e5; --text-2: #a8a8a8; --text-3: #7f7f7f;
    --primary: #2ba86b; --primary-hover: #37bd7a; --primary-active: #249259;
    --primary-text: #ffffff; --primary-container: #12301f; --on-primary-container: #8fe0b0;
    --link: #7d90b8;
    --input-bg: #141414; --input-border: #3a3a3a;
    --input-focus-ring: rgba(43, 168, 107, .28);
    --shadow-lg: 0 2px 12px rgba(0, 0, 0, .50);
    --shadow-xl: 0 4px 20px rgba(0, 0, 0, .60);
}
/* 微信的列表: 白底 + 内缩发丝线, 没有任何投影 */
[data-uistyle="wechat"] .tbl tbody tr { border-bottom: 1px solid var(--border); }
[data-uistyle="wechat"] .file-item { box-shadow: none; }
[data-uistyle="wechat"] .card { box-shadow: none; }
[data-uistyle="wechat"] .page-title { color: var(--text); }


/* ---------- 7. Claude 风 (Anthropic) ----------
   设计语言: "书卷气" —— Soft Paper 奶油底 #FAF9F5、Terracotta 赤陶 #CC785C、
   衬线展示字体 (Tiempos / Copernicus 风)、暖色阴影 (绝不用纯黑)。
   排版: 正文无衬线 14.5px / 行高 1.65 (宽松, 为长时间阅读),
        标题衬线 26px / 600 / 正常字距。
   形状: 中等圆角 10px, 极淡描边, 柔和暖投影。 */
[data-uistyle="claude"] {
    --font-sans: "Tiempos Text", Georgia, "Songti SC", "Source Han Serif SC",
                 "Noto Serif CJK SC", serif;
    --font-h: "Copernicus", "Tiempos Headline", Georgia, "Songti SC",
              "Source Han Serif SC", "Noto Serif CJK SC", serif;
    --fs-base: 14.5px;
    --fw-base: 400;
    --lh-base: 1.65;
    --ls-base: .005em;
    --fs-btn: 14px;
    --fs-input: 14.5px;
    --fs-h1: 26px; --fw-h: 600; --ls-h: -.01em; --lh-h: 1.25;
    --fs-h2: 16px; --fw-h2: 600; --ls-h2: 0;
    --ctrl-h: 38px;
    --row-h: 48px;
    --side-w: 272px;
    --nav-h: 56px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 6px; --radius-sm: 8px; --radius: 10px;
    --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 18px; --radius-full: 9999px;
    --r-btn: 8px; --r-input: 8px; --r-card: 10px; --r-modal: 14px; --r-menu: 10px;
    --fw-btn: 500; --ls-btn: .005em;
    /* 暖色阴影: 用赤陶褐而非纯黑, 是 Claude 柔和感的关键 */
    --shadow-sm: 0 1px 2px rgba(120, 90, 70, .07);
    --shadow:    0 2px 6px rgba(120, 90, 70, .09);
    --shadow-md: 0 4px 12px rgba(120, 90, 70, .11);
    --shadow-lg: 0 10px 28px rgba(120, 90, 70, .14);
    --shadow-xl: 0 20px 48px rgba(120, 90, 70, .18);
    --sh-btn: 0 1px 2px rgba(120, 90, 70, .10);
    --sh-card: 0 1px 3px rgba(120, 90, 70, .07);
    /* 动效: 从容、不急不躁 */
    --dur-1: 110ms; --dur-2: 170ms; --dur-3: 260ms; --dur-4: 360ms;
    --ease-standard: cubic-bezier(.32, .72, 0, 1);
    --ease-decelerate: cubic-bezier(.16, 1, .3, 1);
    --ease-accelerate: cubic-bezier(.4, 0, .6, 1);
    --ease-emphasized: cubic-bezier(.32, .72, 0, 1);
    --ease-spring: cubic-bezier(.16, 1, .3, 1);
    --ease-soft-spring: cubic-bezier(.32, .72, 0, 1);
    --primary: #cc785c; --primary-hover: #bd6849; --primary-active: #a9593d;
    --primary-text: #ffffff; --primary-container: #f6e6df; --on-primary-container: #8a4529;
    --primary-soft: rgba(204, 120, 92, .12);
    --link: #b0643f; --link-hover: #8f4f31;
    --danger: #bf4d43;
    --input-bg: #ffffff; --input-border: #ded6c8;
    --input-border-hover: #cc785c; --input-focus-ring: rgba(204, 120, 92, .20);
}
[data-theme="light"][data-uistyle="claude"] {
    --bg: #faf9f5; --bg-2: #f2efe7; --surface: #ffffff; --surface-2: #fdfcf9;
    --surface-container: #f4f1ea; --surface-container-high: #ece8dd;
    --bg-card: #ffffff; --card-bg: #ffffff; --bg-soft: #f7f4ed;
    --border: #e8e2d5; --border-2: #dbd3c2; --border-strong: #b0a58e;
    --text: #262220; --text-2: #5c534c; --text-3: #857a6e;
}
[data-theme="dark"][data-uistyle="claude"] {
    --bg: #1f1c19; --bg-2: #2a2622; --surface: #2a2622; --surface-2: #332e29;
    --surface-container: #241f1c; --surface-container-high: #332e29;
    --bg-card: #2a2622; --card-bg: #2a2622; --bg-soft: #241f1c;
    --border: #3b352e; --border-2: #4a433a; --border-strong: #6e6558;
    --text: #f0ebe3; --text-2: #b8ae9f; --text-3: #93887a;
    --primary: #e0997c; --primary-hover: #eaa98f; --primary-active: #cc8567;
    --primary-text: #3a1f14; --primary-container: #4a2c1e; --on-primary-container: #f0cdbb;
    --link: #e0a184;
    --input-bg: #191614; --input-border: #4a433a;
    --input-focus-ring: rgba(224, 153, 124, .30);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
    --shadow:    0 2px 6px rgba(0, 0, 0, .36);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .42);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, .52);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, .62);
}
/* 纸张感: 极淡的暖色竖向纹理, 纯渐变, 不建合成层 */
[data-uistyle="claude"] body {
    background-image: linear-gradient(180deg, rgba(204, 120, 92, .035) 0%, rgba(204, 120, 92, 0) 240px);
    background-repeat: no-repeat;
}
[data-uistyle="claude"] .page-title { color: var(--text); }


/* ---------- 8. 新中式风 (New Chinese) ----------
   设计语言: 宋体标题立骨、宣纸肌理打底、留白造境、朱红印章点睛。
   排版: 正文无衬线 14px; 标题宋体 24px, 字距加宽到 .22em ——
        中文标题的宽字距是"仪式感"的来源, 与西文的紧字距正好相反。
   形状: 近直角 (2–4px), 双线边框 (border + outline 模拟回纹框)。
   材质: 宣纸暖白 #f7f3ec + 极淡纹理。 */
[data-uistyle="newchinese"] {
    --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;
    --font-h: "Songti SC", "STSong", "SimSun", "Source Han Serif SC",
              "Noto Serif CJK SC", "Songti TC", serif;
    --font-mono: "Songti SC", "STSong", Consolas, monospace;
    --fs-base: 14px;
    --fw-base: 400;
    --lh-base: 1.7;
    --ls-base: .02em;
    --fs-btn: 13.5px;
    --fs-input: 14px;
    --fs-h1: 24px; --fw-h: 700; --ls-h: .22em; --lh-h: 1.5;
    --fs-h2: 16px; --fw-h2: 700; --ls-h2: .16em;
    --ctrl-h: 36px;
    --row-h: 44px;
    --side-w: 256px;
    --nav-h: 54px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 2px; --radius-sm: 2px; --radius: 3px;
    --radius-lg: 4px; --radius-xl: 4px; --radius-2xl: 6px; --radius-full: 9999px;
    --r-btn: 2px; --r-input: 2px; --r-card: 3px; --r-modal: 6px; --r-menu: 4px;
    --fw-btn: 500; --ls-btn: .14em;
    /* 中式层级靠"框"不靠"浮": 极淡投影 + 双线边框 */
    --shadow-sm: 0 1px 2px rgba(120, 60, 40, .06);
    --shadow:    0 2px 6px rgba(120, 60, 40, .08);
    --shadow-md: 0 3px 10px rgba(120, 60, 40, .10);
    --shadow-lg: 0 8px 22px rgba(120, 60, 40, .14);
    --shadow-xl: 0 16px 40px rgba(120, 60, 40, .20);
    --sh-btn: none;
    --sh-card: 0 1px 3px rgba(120, 60, 40, .06);
    /* 动效: 舒缓、如水墨晕开 */
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms; --dur-4: 420ms;
    --ease-standard: cubic-bezier(.33, .7, .35, 1);
    --ease-decelerate: cubic-bezier(.22, .8, .3, 1);
    --ease-accelerate: cubic-bezier(.4, 0, .7, .3);
    --ease-emphasized: cubic-bezier(.33, .7, .35, 1);
    --ease-spring: cubic-bezier(.22, .8, .3, 1);
    --ease-soft-spring: cubic-bezier(.33, .7, .35, 1);
    --primary: #a8332b; --primary-hover: #8f2a23; --primary-active: #76211b;
    --primary-text: #ffffff; --primary-container: #f5e6e2; --on-primary-container: #7d2219;
    --primary-soft: rgba(168, 51, 43, .09);
    --link: #a8332b; --link-hover: #8f2a23;
    --danger: #b5352c;
    --input-bg: #fffdf8; --input-border: #ddd2c0;
    --input-border-hover: #a8332b; --input-focus-ring: rgba(168, 51, 43, .18);
}
[data-theme="light"][data-uistyle="newchinese"] {
    --bg: #f7f3ec; --bg-2: #efe8dc; --surface: #fffdf8; --surface-2: #fbf7f0;
    --surface-container: #f3ece1; --surface-container-high: #eae1d2;
    --bg-card: #fffdf8; --card-bg: #fffdf8; --bg-soft: #f5efe4;
    --border: #e2d8c6; --border-2: #d2c5ad; --border-strong: #a8947a;
    --text: #241f1b; --text-2: #5a4f45; --text-3: #857766;
}
[data-theme="dark"][data-uistyle="newchinese"] {
    --bg: #17130f; --bg-2: #201a15; --surface: #201a15; --surface-2: #282019;
    --surface-container: #1d1713; --surface-container-high: #2a221b;
    --bg-card: #201a15; --card-bg: #201a15; --bg-soft: #1d1713;
    --border: #3a3028; --border-2: #4a3d31; --border-strong: #6e5a47;
    --text: #efe6da; --text-2: #b6a695; --text-3: #8d7d6c;
    --primary: #d9635a; --primary-hover: #e57a71; --primary-active: #c04e46;
    --primary-text: #2a0f0c; --primary-container: #46201b; --on-primary-container: #f0c4be;
    --link: #e0857c;
    --input-bg: #120e0b; --input-border: #4a3d31;
    --input-focus-ring: rgba(217, 99, 90, .30);
    --shadow-lg: 0 8px 22px rgba(0, 0, 0, .50);
    --shadow-xl: 0 16px 40px rgba(0, 0, 0, .62);
}
/* 宣纸肌理: 两层极淡斜向渐变, 纯 CSS 无图片请求 */
[data-uistyle="newchinese"] body {
    background-image:
        repeating-linear-gradient(45deg, rgba(168, 51, 43, .014) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-45deg, rgba(60, 40, 20, .012) 0 2px, transparent 2px 6px);
    background-attachment: fixed;
}
/* 印章红: 标题下方一条朱红短线, 是整页最"中式"的一笔 */
[data-uistyle="newchinese"] .page-title { position: relative; padding-bottom: 8px; }
[data-uistyle="newchinese"] .page-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 44px; height: 3px; background: var(--primary); border-radius: 1px;
}
/* 双线边框: border + outline 模拟回纹框 */
[data-uistyle="newchinese"] .card {
    outline: 1px solid var(--border);
    outline-offset: 3px;
}
[data-uistyle="newchinese"] .card-title { color: var(--text); }


/* ---------- 9. 宋式风 (Song / Celadon) ----------
   设计语言: 宋代美学 —— 青瓷一色、素雅细描边、极简留白、"雨过天青"。
   排版: 宋体 (细笔画), 正文 14px / 行高 1.85 (最宽松), 标题 22px / 400
        —— 宋体笔画纤细, 字重一重就失了雅致, 所以刻意用 Regular。
   形状: 近直角 (2–4px), 发丝描边 (1px 青灰), 几乎无投影。
   色彩: 青瓷 #7ba899 为骨, 粉青 #cfe0d8 为底。 */
[data-uistyle="song"] {
    --font-sans: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC",
                 "SimSun", Georgia, serif;
    --font-h: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", serif;
    --font-mono: "Songti SC", "STSong", Consolas, monospace;
    --fs-base: 14px;
    --fw-base: 400;
    --lh-base: 1.85;
    --ls-base: .04em;
    --fs-btn: 13.5px;
    --fs-input: 14px;
    --fs-h1: 22px; --fw-h: 400; --ls-h: .18em; --lh-h: 1.6;
    --fs-h2: 15px; --fw-h2: 400; --ls-h2: .14em;
    --ctrl-h: 36px;
    --row-h: 46px;
    --side-w: 248px;
    --nav-h: 52px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 2px; --radius-sm: 3px; --radius: 4px;
    --radius-lg: 5px; --radius-xl: 6px; --radius-2xl: 8px; --radius-full: 9999px;
    --r-btn: 3px; --r-input: 3px; --r-card: 4px; --r-modal: 8px; --r-menu: 5px;
    --fw-btn: 400; --ls-btn: .12em;
    /* 宋式: 几乎不用投影, 层级只靠极淡的青灰描边与留白 */
    --shadow-sm: 0 1px 1px rgba(90, 130, 120, .05);
    --shadow:    0 1px 3px rgba(90, 130, 120, .07);
    --shadow-md: 0 2px 6px rgba(90, 130, 120, .09);
    --shadow-lg: 0 6px 18px rgba(90, 130, 120, .12);
    --shadow-xl: 0 14px 36px rgba(90, 130, 120, .16);
    --sh-btn: none;
    --sh-card: none;
    /* 动效: 缓慢、如水流 */
    --dur-1: 130ms; --dur-2: 210ms; --dur-3: 320ms; --dur-4: 450ms;
    --ease-standard: cubic-bezier(.35, .7, .3, 1);
    --ease-decelerate: cubic-bezier(.2, .8, .25, 1);
    --ease-accelerate: cubic-bezier(.4, 0, .7, .3);
    --ease-emphasized: cubic-bezier(.35, .7, .3, 1);
    --ease-spring: cubic-bezier(.2, .8, .25, 1);
    --ease-soft-spring: cubic-bezier(.35, .7, .3, 1);
    --primary: #6a9b86; --primary-hover: #5b8a75; --primary-active: #4d7864;
    --primary-text: #ffffff; --primary-container: #e3eee8; --on-primary-container: #3f6553;
    --primary-soft: rgba(106, 155, 134, .10);
    --link: #5b8a75; --link-hover: #4d7864;
    --danger: #ab5f52;
    --input-bg: #fdfffe; --input-border: #d3e0d9;
    --input-border-hover: #6a9b86; --input-focus-ring: rgba(106, 155, 134, .20);
}
[data-theme="light"][data-uistyle="song"] {
    --bg: #f2f6f4; --bg-2: #e7efec; --surface: #fdfffe; --surface-2: #f8fbfa;
    --surface-container: #eef4f1; --surface-container-high: #e4ece8;
    --bg-card: #fdfffe; --card-bg: #fdfffe; --bg-soft: #f5f9f7;
    --border: #dfeae5; --border-2: #cfded7; --border-strong: #a3bdb2;
    --text: #2a3532; --text-2: #556560; --text-3: #7d8d88;
}
[data-theme="dark"][data-uistyle="song"] {
    --bg: #121917; --bg-2: #1a2320; --surface: #1a2320; --surface-2: #212b28;
    --surface-container: #17201d; --surface-container-high: #232e2a;
    --bg-card: #1a2320; --card-bg: #1a2320; --bg-soft: #17201d;
    --border: #2c3a35; --border-2: #3a4b45; --border-strong: #5d726a;
    --text: #e6efeb; --text-2: #a8b8b2; --text-3: #849690;
    --primary: #8fc0aa; --primary-hover: #a2cdba; --primary-active: #7caf98;
    --primary-text: #12251d; --primary-container: #28433a; --on-primary-container: #c3e3d5;
    --link: #a2cdba;
    --input-bg: #0e1412; --input-border: #3a4b45;
    --input-focus-ring: rgba(143, 192, 170, .30);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, .48);
    --shadow-xl: 0 14px 36px rgba(0, 0, 0, .58);
}
/* 冰裂纹: 极淡的斜向细线, 呼应宋瓷开片 */
[data-uistyle="song"] body {
    background-image:
        repeating-linear-gradient(60deg, rgba(106, 155, 134, .022) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(-60deg, rgba(106, 155, 134, .018) 0 1px, transparent 1px 18px);
    background-attachment: fixed;
}
[data-uistyle="song"] .card { border-color: var(--border-2); }
[data-uistyle="song"] .page-title { color: var(--text); }


/* ---------- 10. 少女风 (Soft Pastel Feminine) ----------
   设计语言: 低饱和渐变、玻璃拟态、超大圆角、柔色彩虹投影。
   排版: 圆体无衬线 (Quicksand / 圆体-简), 正文 14px / 行高 1.6,
        标题 22px / 700, 略宽字距, 柔和亲昵。
   形状: 卡片 20px, 按钮全胶囊, 描边极淡。
   材质: 半透明卡片 + blur, 柔和彩色投影 (紫粉调, 不用黑)。 */
[data-uistyle="girly"] {
    --font-sans: "Quicksand", "Varela Round", "Nunito", -apple-system,
                 "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-h: "Quicksand", "Varela Round", "PingFang SC", "Microsoft YaHei", sans-serif;
    --fs-base: 14px;
    --fw-base: 400;
    --lh-base: 1.6;
    --ls-base: .015em;
    --fs-btn: 14px;
    --fs-input: 14px;
    --fs-h1: 22px; --fw-h: 700; --ls-h: .01em;
    --fs-h2: 15px; --fw-h2: 700; --ls-h2: .01em;
    --ctrl-h: 38px;
    --row-h: 48px;
    --side-w: 268px;
    --nav-h: 54px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 10px; --radius-sm: 14px; --radius: 18px;
    --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 28px; --radius-full: 9999px;
    --r-btn: 9999px; --r-input: 9999px; --r-card: 20px; --r-modal: 28px; --r-menu: 18px;
    --fw-btn: 600; --ls-btn: .02em;
    /* 柔色投影: 紫粉调而非黑色, 是"轻盈浮起"的关键 */
    --shadow-sm: 0 2px 6px rgba(176, 106, 179, .10);
    --shadow:    0 4px 12px rgba(176, 106, 179, .13);
    --shadow-md: 0 6px 18px rgba(176, 106, 179, .16);
    --shadow-lg: 0 12px 30px rgba(176, 106, 179, .20);
    --shadow-xl: 0 22px 52px rgba(176, 106, 179, .26);
    --sh-btn: 0 3px 10px rgba(176, 106, 179, .22);
    --sh-card: 0 4px 14px rgba(176, 106, 179, .12);
    --dur-1: 110ms; --dur-2: 180ms; --dur-3: 280ms; --dur-4: 400ms;
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-decelerate: cubic-bezier(.16, 1, .3, 1);
    --ease-accelerate: cubic-bezier(.4, 0, .6, 1);
    --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
    --ease-soft-spring: cubic-bezier(.16, 1, .3, 1);
    --primary: #b06ab3; --primary-hover: #c07cc3; --primary-active: #9a5a9d;
    --primary-text: #ffffff; --primary-container: #f6e8fa; --on-primary-container: #7d3a80;
    --primary-soft: rgba(176, 106, 179, .10);
    --link: #b06ab3; --link-hover: #c07cc3;
    --danger: #e0687f;
    --input-bg: #ffffff; --input-border: #ecdcf2;
    --input-border-hover: #b06ab3; --input-focus-ring: rgba(176, 106, 179, .20);
}
[data-theme="light"][data-uistyle="girly"] {
    --bg: #fbf7fd; --bg-2: #f4eef9; --surface: #ffffff; --surface-2: #fdfaff;
    --surface-container: #f6f0fa; --surface-container-high: #efe6f5;
    --bg-card: #ffffff; --card-bg: rgba(255, 255, 255, .82); --bg-soft: #f8f3fc;
    --border: #f0e4f5; --border-2: #e4d4ec; --border-strong: #bfa3cc;
    --text: #3a2b3e; --text-2: #6b5a72; --text-3: #938297;
}
[data-theme="dark"][data-uistyle="girly"] {
    --bg: #1e1722; --bg-2: #2a2030; --surface: #2a2030; --surface-2: #33283a;
    --surface-container: #241c29; --surface-container-high: #33283a;
    --bg-card: #2a2030; --card-bg: rgba(42, 32, 48, .80); --bg-soft: #241c29;
    --border: #3b2f44; --border-2: #4c3d57; --border-strong: #6f5c7c;
    --text: #f6eef9; --text-2: #c4b3cc; --text-3: #9d8aa6;
    --primary: #dba9de; --primary-hover: #e8bdea; --primary-active: #c795ca;
    --primary-text: #3d2140; --primary-container: #5a3460; --on-primary-container: #f3d9f5;
    --link: #dba9de;
    --input-bg: #1a141e; --input-border: #4c3d57;
    --input-focus-ring: rgba(219, 169, 222, .30);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, .48);
    --shadow-xl: 0 22px 52px rgba(0, 0, 0, .60);
}
/* 渐变底 + 玻璃拟态卡片 (仅在桌面端启用模糊) */
[data-uistyle="girly"] body {
    background-image:
        radial-gradient(1000px 600px at 12% -5%, rgba(241, 150, 205, .16), transparent 60%),
        radial-gradient(900px 560px at 92% 8%, rgba(160, 130, 240, .15), transparent 62%),
        radial-gradient(800px 500px at 50% 105%, rgba(255, 190, 160, .12), transparent 60%);
    background-attachment: fixed;
}
@media (min-width: 1025px) {
    [data-uistyle="girly"] .card,
    [data-uistyle="girly"] .topbar {
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
    }
    [data-uistyle="girly"] .topbar { background: rgba(255, 255, 255, .62); }
    [data-theme="dark"][data-uistyle="girly"] .topbar { background: rgba(36, 28, 41, .62); }
}
/* 渐变主按钮 —— 少女风最直观的识别点 */
[data-uistyle="girly"] .btn-primary {
    background-image: linear-gradient(135deg, #e879b9, #b06ab3 55%, #8e6ad1);
    border: none;
}
[data-uistyle="girly"] .btn-primary:hover { filter: brightness(1.06); }


/* ---------- 11. 硬核科技风 (Hardcore Tech / Cyber Industrial) ----------
   设计语言: 仪表盘与控制台 —— 近黑底、霓虹青描边、网格坐标系、
   等宽数字、切角面板、读条式高亮。冷峻、精密、信息密度高。
   排版: 正文无衬线 13px; 标题等宽 19px / 700 / 宽字距 (.16em) 全大写 ——
        科技感的标题来自"等宽 + 大写 + 宽字距", 不是靠字号大。
        数字与标签一律等宽 (--font-mono), 对齐才有仪器感。
   形状: 近乎直角 (2-3px), 1px 硬描边, 四角 L 形角标 (clip-path 切角)。
   材质: 网格底 + 扫描线 + 霓虹辉光 (box-shadow 而非投影)。
   色彩: 近黑 #070b0e 为底, 霓虹青 #00e5ff 为骨, 琥珀 #ffab00 作警示。 */
[data-uistyle="tech"] {
    --font-sans: "Inter", "Roboto", "Helvetica Neue", Arial, -apple-system,
                 "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-h: "JetBrains Mono", "IBM Plex Mono", "SF Mono", "Roboto Mono",
              Consolas, "PingFang SC", monospace;
    --font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", "Roboto Mono",
                 Consolas, Menlo, monospace;
    --fs-base: 13px;
    --fw-base: 400;
    --lh-base: 1.5;
    --ls-base: .015em;
    --fs-btn: 12.5px;
    --fs-input: 13px;
    --fs-h1: 19px; --fw-h: 700; --ls-h: .16em; --lh-h: 1.3; --tt-h: uppercase;
    --fs-h2: 13px; --fw-h2: 700; --ls-h2: .12em; --tt-h2: uppercase;
    --ctrl-h: 32px;
    --row-h: 38px;
    --side-w: 252px;
    --nav-h: 46px;
    --bw: 1px; --bw-input: 1px; --bw-card: 1px; --bw-btn: 1px;
    --radius-xs: 2px; --radius-sm: 2px; --radius: 3px;
    --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 5px; --radius-full: 9999px;
    --r-btn: 2px; --r-input: 2px; --r-card: 3px; --r-modal: 4px; --r-menu: 3px;
    --fw-btn: 700; --ls-btn: .1em; --tt-btn: uppercase;
    /* 科技风不用"浮起投影": 用霓虹辉光 (内外发光) 建立层级 */
    --shadow-sm: 0 0 0 1px rgba(0, 229, 255, .16), 0 0 10px rgba(0, 229, 255, .06);
    --shadow:    0 0 0 1px rgba(0, 229, 255, .22), 0 0 16px rgba(0, 229, 255, .09);
    --shadow-md: 0 0 0 1px rgba(0, 229, 255, .28), 0 0 22px rgba(0, 229, 255, .12);
    --shadow-lg: 0 0 0 1px rgba(0, 229, 255, .34), 0 0 32px rgba(0, 200, 255, .16),
                 0 12px 32px rgba(0, 0, 0, .55);
    --shadow-xl: 0 0 0 1px rgba(0, 229, 255, .42), 0 0 46px rgba(0, 200, 255, .22),
                 0 22px 56px rgba(0, 0, 0, .68);
    --sh-btn: none;
    --sh-card: 0 0 0 1px rgba(0, 229, 255, .10);
    /* 动效: 干脆、线性、机械化 (不用弹性曲线) */
    --dur-1: 60ms; --dur-2: 110ms; --dur-3: 170ms; --dur-4: 240ms;
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-decelerate: cubic-bezier(.2, 0, 0, 1);
    --ease-accelerate: cubic-bezier(.4, 0, 1, 1);
    --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
    --ease-spring: cubic-bezier(.2, 0, 0, 1);
    --ease-soft-spring: cubic-bezier(.2, 0, 0, 1);
    --primary: #00e5ff; --primary-hover: #5cf0ff; --primary-active: #00c4dc;
    --primary-text: #00252b; --primary-container: #073038; --on-primary-container: #7ff2ff;
    --primary-soft: rgba(0, 229, 255, .10);
    --link: #00e5ff; --link-hover: #5cf0ff;
    --success: #00e676; --warning: #ffab00; --danger: #ff3d5e;
    --input-bg: #0b1116; --input-border: #1e3038;
    --input-border-hover: #00e5ff; --input-focus-ring: rgba(0, 229, 255, .26);
}
[data-theme="light"][data-uistyle="tech"] {
    --bg: #eef1f3; --bg-2: #e2e7ea; --surface: #f7fafb; --surface-2: #ffffff;
    --surface-container: #eff3f5; --surface-container-high: #e4eaed;
    --bg-card: #f7fafb; --card-bg: #f7fafb; --bg-soft: #f2f6f8;
    --border: #cdd8dd; --border-2: #b6c4cb; --border-strong: #7e919b;
    --text: #0b1418; --text-2: #3d5158; --text-3: #647880;
    /* 亮色下霓虹青太淡, 换成更深的青蓝保证对比度 */
    --primary: #007c92; --primary-hover: #0098b3; --primary-active: #006475;
    --primary-text: #ffffff; --primary-container: #d6f4fa; --on-primary-container: #004e5c;
    --input-bg: #ffffff; --input-border: #b6c4cb;
    --input-focus-ring: rgba(0, 124, 146, .26);
    --shadow-sm: 0 0 0 1px rgba(0, 124, 146, .20);
    --shadow:    0 0 0 1px rgba(0, 124, 146, .26);
    --shadow-md: 0 0 0 1px rgba(0, 124, 146, .32), 0 0 18px rgba(0, 124, 146, .10);
    --shadow-lg: 0 0 0 1px rgba(0, 124, 146, .38), 0 12px 28px rgba(11, 20, 24, .16);
    --shadow-xl: 0 0 0 1px rgba(0, 124, 146, .46), 0 22px 48px rgba(11, 20, 24, .22);
    --sh-card: 0 0 0 1px rgba(0, 124, 146, .12);
}
[data-theme="dark"][data-uistyle="tech"] {
    --bg: #070b0e; --bg-2: #0c1216; --surface: #0e1519; --surface-2: #121b21;
    --surface-container: #0b1116; --surface-container-high: #131d23;
    --bg-card: #0e1519; --card-bg: #0e1519; --bg-soft: #0b1116;
    --border: #1c2b33; --border-2: #263a44; --border-strong: #3f5a66;
    --text: #dff6fa; --text-2: #8fadb8; --text-3: #6b8b96;
    --input-bg: #060a0d; --input-border: #22343d;
    --input-focus-ring: rgba(0, 229, 255, .30);
}
/* 网格坐标系 + 扫描线: 纯渐变实现, 不建合成层, 切换成本可忽略 */
[data-uistyle="tech"] body {
    background-image:
        linear-gradient(rgba(0, 229, 255, .040) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, .040) 1px, transparent 1px),
        repeating-linear-gradient(180deg, rgba(0, 229, 255, .018) 0 1px, transparent 1px 4px);
    background-size: 32px 32px, 32px 32px, 100% 4px;
    background-attachment: fixed;
}
[data-theme="light"][data-uistyle="tech"] body {
    background-image:
        linear-gradient(rgba(0, 124, 146, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 124, 146, .055) 1px, transparent 1px);
    background-size: 32px 32px, 32px 32px;
    background-attachment: fixed;
}
/* 切角面板: clip-path 去掉右上与左下角 —— 工业面板的标志性轮廓 */
[data-uistyle="tech"] .card {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
[data-uistyle="tech"] .md-dialog,
[data-uistyle="tech"] .ctx-menu,
[data-uistyle="tech"] .dropdown-menu {
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
/* 标题: 等宽大写 + 左侧霓虹竖条 (像终端提示符) */
[data-uistyle="tech"] .page-title {
    font-family: var(--font-h);
    display: flex; align-items: center; gap: 10px;
}
[data-uistyle="tech"] .page-title::before {
    content: ""; flex: 0 0 auto;
    width: 3px; height: 1.05em; border-radius: 1px;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
}
[data-uistyle="tech"] .card-title { font-family: var(--font-h); color: var(--text-2); }
/* 主按钮: 霓虹描边 + 辉光, 按下时辉光收敛 */
[data-uistyle="tech"] .btn-primary {
    background: var(--primary); color: var(--primary-text);
    box-shadow: 0 0 12px rgba(0, 229, 255, .34);
}
[data-uistyle="tech"] .btn-primary:hover { box-shadow: 0 0 18px rgba(0, 229, 255, .50); }
[data-uistyle="tech"] .btn-primary:active { box-shadow: 0 0 4px rgba(0, 229, 255, .28); }
/* hover 用描边点亮 + 外辉光, 语义与 Win11 一致但带光 */
[data-uistyle="tech"] .file-item:hover,
[data-uistyle="tech"] .card:hover { border-color: var(--primary); }
/* 等宽数字: 所有数字与代号用等宽, 对齐才有仪器感 */
[data-uistyle="tech"] .text-sm,
[data-uistyle="tech"] .text-xs,
[data-uistyle="tech"] .file-size,
[data-uistyle="tech"] .srm-time { font-family: var(--font-mono); }
/* 选中态: 霓虹描边 + 内部微光, 不用底色块 */
[data-uistyle="tech"] .file-item.selected {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary), 0 0 14px rgba(0, 229, 255, .18);
}


/* ---------- 12. 粉色系可爱风 (Kawaii / Cute) ----------
   设计语言: 一切都圆、一切都软 —— 超大圆角、糖果粉、贴纸白边、
   chunky 底部实色阴影 (按下会"捏扁")。
   排版: 圆体 (M PLUS Rounded / Varela Round), 正文 14.5px / 行高 1.65,
        标题 23px / 800 (超粗才可爱), 字重高、字距略宽。
   形状: 按钮全胶囊 + 3px 白边, 卡片 26px 圆角 + 2px 粉边。 */
[data-uistyle="kawaii"] {
    --font-sans: "M PLUS Rounded 1c", "Varela Round", "Quicksand", "Nunito",
                 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-h: "M PLUS Rounded 1c", "Varela Round", "Quicksand", "PingFang SC", sans-serif;
    --fs-base: 14.5px;
    --fw-base: 500;
    --lh-base: 1.65;
    --ls-base: .02em;
    --fs-btn: 14.5px;
    --fs-input: 14.5px;
    --fs-h1: 23px; --fw-h: 800; --ls-h: .03em;
    --fs-h2: 16px; --fw-h2: 800; --ls-h2: .02em;
    --ctrl-h: 42px;
    --row-h: 52px;
    --side-w: 272px;
    --nav-h: 58px;
    --bw: 2px; --bw-input: 2px; --bw-card: 2px; --bw-btn: 3px;
    --radius-xs: 12px; --radius-sm: 16px; --radius: 20px;
    --radius-lg: 24px; --radius-xl: 26px; --radius-2xl: 30px; --radius-full: 9999px;
    --r-btn: 9999px; --r-input: 9999px; --r-card: 26px; --r-modal: 30px; --r-menu: 22px;
    --fw-btn: 800; --ls-btn: .03em;
    /* 柔和糖果投影 + 贴纸白边 */
    --shadow-sm: 0 3px 0 rgba(214, 140, 175, .35), 0 6px 14px rgba(230, 150, 185, .22);
    --shadow:    0 4px 0 rgba(214, 140, 175, .38), 0 8px 18px rgba(230, 150, 185, .24);
    --shadow-md: 0 5px 0 rgba(214, 140, 175, .40), 0 10px 22px rgba(230, 150, 185, .26);
    --shadow-lg: 0 6px 0 rgba(214, 140, 175, .42), 0 14px 30px rgba(230, 150, 185, .28);
    --shadow-xl: 0 8px 0 rgba(214, 140, 175, .45), 0 22px 46px rgba(230, 150, 185, .32);
    --sh-btn: 0 4px 0 rgba(214, 140, 175, .45);
    --sh-card: 0 4px 0 rgba(214, 140, 175, .22), 0 10px 24px rgba(230, 150, 185, .18);
    /* 动效: 弹跳感, 回弹明显 */
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms; --dur-4: 420ms;
    --ease-standard: cubic-bezier(.34, 1.3, .5, 1);
    --ease-decelerate: cubic-bezier(.2, 1.4, .4, 1);
    --ease-accelerate: cubic-bezier(.5, 0, .8, .3);
    --ease-emphasized: cubic-bezier(.34, 1.4, .5, 1);
    --ease-spring: cubic-bezier(.34, 1.6, .45, 1);
    --ease-soft-spring: cubic-bezier(.2, 1.3, .4, 1);
    --primary: #ff77a8; --primary-hover: #ff8fb8; --primary-active: #ef5f93;
    --primary-text: #ffffff; --primary-container: #ffe6ef; --on-primary-container: #b83a68;
    --primary-soft: rgba(255, 119, 168, .12);
    --link: #ff5f98; --link-hover: #ef4a86;
    --danger: #f2555f;
    --input-bg: #fffafc; --input-border: #ffd3e3;
    --input-border-hover: #ff77a8; --input-focus-ring: rgba(255, 119, 168, .24);
}
[data-theme="light"][data-uistyle="kawaii"] {
    --bg: #fff5f9; --bg-2: #ffeaf3; --surface: #ffffff; --surface-2: #fffafd;
    --surface-container: #fdeef6; --surface-container-high: #fce3ef;
    --bg-card: #ffffff; --card-bg: #ffffff; --bg-soft: #fff2f8;
    --border: #ffd9e7; --border-2: #ffc2da; --border-strong: #e894b4;
    --text: #4a2b3a; --text-2: #7d5a6d; --text-3: #a3808f;
}
[data-theme="dark"][data-uistyle="kawaii"] {
    --bg: #241820; --bg-2: #2f1f2a; --surface: #2f1f2a; --surface-2: #382634;
    --surface-container: #2a1c25; --surface-container-high: #382634;
    --bg-card: #2f1f2a; --card-bg: #2f1f2a; --bg-soft: #2a1c25;
    --border: #4a3342; --border-2: #5c4152; --border-strong: #8a6478;
    --text: #ffeaf3; --text-2: #d8b8c8; --text-3: #b094a3;
    --primary: #ff9dc2; --primary-hover: #ffb3d0; --primary-active: #f587b0;
    --primary-text: #4a1428; --primary-container: #5c2740; --on-primary-container: #ffd5e6;
    --link: #ff9dc2;
    --input-bg: #1d1219; --input-border: #5c4152;
    --input-focus-ring: rgba(255, 157, 194, .34);
    --shadow-sm: 0 3px 0 rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .30);
    --shadow:    0 4px 0 rgba(0, 0, 0, .40), 0 8px 18px rgba(0, 0, 0, .34);
    --shadow-md: 0 5px 0 rgba(0, 0, 0, .44), 0 10px 22px rgba(0, 0, 0, .38);
    --shadow-lg: 0 6px 0 rgba(0, 0, 0, .48), 0 14px 30px rgba(0, 0, 0, .42);
    --shadow-xl: 0 8px 0 rgba(0, 0, 0, .54), 0 22px 46px rgba(0, 0, 0, .48);
    --sh-btn: 0 4px 0 rgba(0, 0, 0, .48);
    --sh-card: 0 4px 0 rgba(0, 0, 0, .32), 0 10px 24px rgba(0, 0, 0, .28);
}
/* 糖果渐变底 */
[data-uistyle="kawaii"] body {
    background-image:
        radial-gradient(760px 460px at 10% -8%, rgba(255, 168, 200, .28), transparent 62%),
        radial-gradient(700px 440px at 92% 4%, rgba(168, 226, 255, .24), transparent 60%),
        radial-gradient(680px 420px at 55% 106%, rgba(255, 232, 168, .22), transparent 60%);
    background-attachment: fixed;
}
/* 贴纸白边: Kawaii 最标志的一笔 */
[data-uistyle="kawaii"] .btn { border-color: #ffffff; }
[data-uistyle="kawaii"] .btn:active { transform: translateY(4px); }
[data-uistyle="kawaii"] .btn-primary { background: var(--primary); border-color: #ffffff; }
[data-uistyle="kawaii"] .file-item:hover { border-color: var(--primary); }
/* 圆角头像/图标容器, 让整页没有一处是尖的 */
[data-uistyle="kawaii"] .file-item { box-shadow: var(--sh-card); }

/* ---------- 风格选择器 (账号 · 外观与特效) ---------- */
.uistyle-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
@media (max-width: 560px) {
    .uistyle-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
}
.uistyle-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; min-height: 52px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font-size: 13px; text-align: left; cursor: pointer;
    transition: border-color var(--dur-2) var(--ease-standard),
                background var(--dur-2) var(--ease-standard),
                transform var(--dur-1) var(--ease-standard);
}
.uistyle-opt:hover { border-color: var(--primary); background: var(--primary-soft); }
.uistyle-opt:active { transform: scale(.985); }
.uistyle-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.uistyle-opt.selected {
    border-color: var(--primary); background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px var(--primary);
}
/* 色卡: 用该风格自己的主色 + 表面色画一个示意块 */
.uistyle-swatch {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, .10);
    display: flex; align-items: flex-end; justify-content: flex-end;
    overflow: hidden; position: relative;
}
.uistyle-swatch i {
    position: absolute; right: 0; bottom: 0;
    width: 60%; height: 60%; border-radius: 6px 0 0 0;
}
.uistyle-opt-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.uistyle-opt-title { font-weight: 600; font-size: 13px; color: var(--text); }
.uistyle-opt-desc { font-size: 11px; color: var(--text-3); line-height: 1.35; }
.uistyle-opt-check { flex: 0 0 auto; color: var(--primary); opacity: 0; transform: scale(.6); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-spring); }
.uistyle-opt.selected .uistyle-opt-check { opacity: 1; transform: scale(1); }