/* ==========================================================================
   梦Va网盘 · 设计系统「Lumina 流光」v2
   --------------------------------------------------------------------------
   文件：assets/css/app.css
   设计原则：
   1. 默认【明亮】主题：背景图清晰透出 + 玻璃拟态卡片，回归并超越原决定版的
      优雅观感；深色作为可切换主题同样精致。
   2. 站点背景图原图（user_system/assets/site-bg.jpg）完整保留，仅叠加极轻
      渐变蒙版保证文字可读，绝不替换 / 删除原图。
   3. 移动优先响应式：全局防横向溢出、栅格自适应降列、触摸目标 ≥ 44px、
      字号阶梯、底部标签栏适配安全区。
   4. 所有 class 名与页面 / app.js / explorer.js 的 DOM 契约保持一致，二次
      换肤只需改 :root 令牌。
   ========================================================================== */

/* ---------------------------------------------------------------- 设计令牌 */
:root {
    /* 主色：品牌紫 + 靛蓝 + 会员金 + 粉 */
    --brand: #7c6de0;
    --brand-2: #6d8cf0;
    --brand-3: #f093fb;
    --gold: #f7b955;
    --gold-2: #f59e0b;
    --ok: #16a97a;
    --warn: #f0a32a;
    --danger: #ef4f6b;
    --info: #4f9df0;

    /* 背景 / 容器（默认明亮） */
    --bg: #f4f3fb;
    --bg-grad: linear-gradient(180deg, #f6f4fd 0%, #eef0f8 55%, #e9ebf6 100%);
    --surface: rgba(255, 255, 255, 0.74);      /* 玻璃卡 */
    --surface-2: rgba(255, 255, 255, 0.86);
    --surface-3: rgba(255, 255, 255, 0.96);
    --solid: #ffffff;
    --solid-2: #f5f4fc;

    /* 描边 / 文字 */
    --line: rgba(24, 28, 60, 0.08);
    --line-strong: rgba(24, 28, 60, 0.16);
    --text: #1b2233;
    --text-2: #58607a;
    --text-3: #8b93a8;

    /* 形状 */
    --r-xs: 10px;
    --r-sm: 13px;
    --r-md: 17px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-pill: 999px;

    /* 阴影 / 光效 */
    --shadow-1: 0 6px 22px rgba(80, 70, 160, 0.10);
    --shadow-2: 0 20px 50px rgba(80, 70, 160, 0.16);
    --glow: 0 0 0 1px rgba(124, 109, 224, 0.30), 0 12px 34px rgba(124, 109, 224, 0.22);
    --blur: 18px;

    /* 动效 */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --t: .26s var(--ease);

    /* 尺寸 */
    --shell: 1240px;
    --nav-h: 64px;

    /* 背景图蒙版强度（由「背景模式」按钮切换）
       移动端体检整改：默认柔和档由 .30 提升到 .48，保证深色星空图上的文字可读 */
    --bg-dim: .48;
    --bg-blur: 0px;
    --bg-sat: 1.02;
}

/* 深色主题：背景图仍可见，仅加深蒙版 */
[data-theme="dark"] {
    --bg: #0b0e1a;
    --bg-grad: linear-gradient(180deg, #0b0e1a 0%, #0d1020 60%, #0a0d18 100%);
    --surface: rgba(22, 26, 44, 0.62);
    --surface-2: rgba(24, 29, 50, 0.78);
    --surface-3: rgba(28, 34, 58, 0.92);
    --solid: #141826;
    --solid-2: #1b2030;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.18);
    --text: #e9edfb;
    --text-2: #a6afc9;
    --text-3: #727a96;
    --shadow-1: 0 6px 22px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 20px 50px rgba(0, 0, 0, 0.45);
    --bg-dim: .58;
    --bg-blur: 1px;
    --bg-sat: 1.04;
}

/* 「背景模式」三档：清晰 / 柔和（默认）/ 沉浸 */
[data-bgmode="clear"] { --bg-dim: .26; --bg-blur: 0px; --bg-sat: 1.06; }
[data-bgmode="soft"] { --bg-dim: .48; --bg-blur: 0px; --bg-sat: 1.02; }
[data-bgmode="immersive"] { --bg-dim: .62; --bg-blur: 5px; --bg-sat: .96; }
[data-theme="dark"][data-bgmode="clear"] { --bg-dim: .42; }
[data-theme="dark"][data-bgmode="soft"] { --bg-dim: .58; }
[data-theme="dark"][data-bgmode="immersive"] { --bg-dim: .74; }

/* ------------------------------------------------------------------ 基础 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;                 /* 全局禁止横向滚动 */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg-grad);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    transition: background .3s, color .3s;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
code, .mono { font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace; }
::selection { background: rgba(124, 109, 224, .30); color: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 4px; }

/* -------------------------------------------------------------- 背景图层 */
.app-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* 原站背景图：原图 site-bg.jpg 完整保留（未删除），但实际加载改为 WebP —— 
   实测 1220×2163 的 JPG 为 2.67MB，转 WebP 后仅 123KB（约 −95%，体检 P2-1）。 */
.app-bg__img {
    position: absolute; inset: -2%;
    background-image: url("../../user_system/assets/site-bg.webp");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(var(--bg-sat));
    transform: scale(1.03);
    opacity: 0;
    transition: opacity 1s var(--ease);
}
/* 移动端取 780px 宽版本（≈390 CSS px × DPR2 足够），再省一半 */
@media (max-width: 720px) {
    .app-bg__img { background-image: url("../../user_system/assets/site-bg-mobile.webp"); }
}
.app-bg__img.is-loaded { opacity: 1; }
.app-bg__base {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 10% -8%, rgba(124, 109, 224, .18), transparent 58%),
        radial-gradient(80% 70% at 96% 6%, rgba(109, 140, 240, .14), transparent 60%);
}
[data-theme="dark"] .app-bg__base {
    background:
        radial-gradient(120% 90% at 10% -8%, rgba(124, 109, 224, .22), transparent 58%),
        radial-gradient(80% 70% at 96% 6%, rgba(34, 211, 238, .12), transparent 60%);
}
/* 极轻渐变蒙版：仅顶部柔光 + 底部微暗，保证文字可读又不遮背景 */
.app-bg__dim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(248, 247, 253, calc(var(--bg-dim) + .22)) 0%,
        rgba(244, 243, 251, var(--bg-dim)) 30%,
        rgba(241, 242, 250, var(--bg-dim)) 70%,
        rgba(237, 239, 251, calc(var(--bg-dim) + .18)) 100%);
}
[data-theme="dark"] .app-bg__dim {
    background: linear-gradient(180deg,
        rgba(7, 10, 22, calc(var(--bg-dim) + .12)) 0%,
        rgba(8, 11, 24, var(--bg-dim)) 35%,
        rgba(8, 11, 24, var(--bg-dim)) 70%,
        rgba(7, 10, 22, calc(var(--bg-dim) + .14)) 100%);
}
/* 极淡噪点，减弱大色块带状感 */
.app-bg__grain {
    position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.4'/></svg>");
}
/* 缓慢漂浮的极淡光晕 */
.app-bg__aurora {
    position: absolute; width: 56vw; height: 56vw; left: -12vw; top: -22vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 109, 224, .14), transparent 65%);
    filter: blur(70px);
    animation: drift 28s var(--ease) infinite alternate;
}
.app-bg__aurora.b { left: auto; right: -16vw; top: 24vh; background: radial-gradient(circle, rgba(109, 140, 240, .12), transparent 65%); animation-duration: 34s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, 5vh, 0) scale(1.16); } }

/* ------------------------------------------------------------------ 容器 */
/* 左右同时避让横屏刘海安全区（体检 P2-4：横屏 left/right 47px） */
.shell {
    width: 100%; max-width: var(--shell); margin: 0 auto;
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
}
.shell--narrow { max-width: 880px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spacer { flex: 1; }
.hide { display: none !important; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.tc { text-align: center; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }

/* -------------------------------------------------------------- 悬浮导航 */
.nav {
    position: sticky; top: 12px; z-index: 90;
    margin: 12px auto 0;
    width: calc(100% - 24px);
    max-width: var(--shell);
    border-radius: var(--r-pill);
    background: var(--surface);
    backdrop-filter: blur(var(--blur)) saturate(1.7);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--t), background var(--t);
}
/* 吸顶态：加实底 + 强毛玻璃，避免滚动时正文从导航背后穿过（体检 P2-1） */
.nav.is-stuck {
    box-shadow: var(--shadow-2);
    background: var(--surface-3);
    backdrop-filter: blur(22px) saturate(1.9);
    -webkit-backdrop-filter: blur(22px) saturate(1.9);
}
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 14px; padding: 0 12px 0 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
.brand__mark {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 15px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 6px 18px rgba(124, 109, 224, .42);
}
.brand__text { font-size: 17px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* 精简字标：仅在窄屏（≤420px）替代完整站名，避免顶栏「无品牌」（体检 P2-6） */
.brand__text--short { display: none; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav__link {
    padding: 8px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
    color: var(--text-2); transition: var(--t); white-space: nowrap;
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link.is-active { color: #fff; background: linear-gradient(135deg, var(--brand), #6d5fd6); box-shadow: 0 6px 18px rgba(124, 109, 224, .32); }
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.icon-btn {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
    cursor: pointer; font-size: 14px; color: var(--text-2); transition: var(--t);
}
.icon-btn:hover { background: var(--surface-3); color: var(--brand); transform: translateY(-1px); }
.icon-btn.is-on { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; }

/* 用户菜单 */
.usermenu { position: relative; }
.avatar {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: 15px; color: #fff; overflow: hidden; cursor: pointer; object-fit: cover;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: 2px solid var(--surface-3);
    box-shadow: 0 4px 14px rgba(124, 109, 224, .3);
}
.avatar--lg { width: 78px; height: 78px; font-size: 30px; border-width: 4px; }
.avatar--sm { width: 30px; height: 30px; font-size: 13px; }
.usermenu__panel {
    position: absolute; right: 0; top: calc(100% + 12px); width: 232px; padding: 8px;
    border-radius: var(--r-md); background: var(--solid); border: 1px solid var(--line);
    box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transition: var(--t); z-index: 120;
}
.usermenu__panel.is-open { opacity: 1; visibility: visible; transform: none; }
.usermenu__head { padding: 12px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.usermenu__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--text-2); transition: var(--t); }
.usermenu__item i { width: 18px; text-align: center; }
.usermenu__item:hover { background: var(--surface-2); color: var(--text); }
.usermenu__item.is-danger { color: var(--danger); }
.usermenu__sep { height: 1px; background: var(--line); margin: 6px 4px; }

.burger { display: none; }

/* ------------------------------------------------------------ 移动端抽屉 */
.drawer { position: fixed; inset: 0; z-index: 130; background: rgba(8, 11, 24, .5); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: var(--t); }
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
    position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 84vw);
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));   /* 体检 P2-4：抽屉底部避让 Home Indicator */
    background: var(--solid); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .32s var(--ease); overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; margin-bottom: 4px; min-height: 46px; color: var(--text-2); }
.drawer__link:hover, .drawer__link.is-active { background: var(--surface-2); color: var(--text); }
/* 抽屉内登录 / 注册强调按钮（体检 P3：主入口做成明显 CTA） */
.drawer__link--primary { background: linear-gradient(135deg, var(--brand), #6d5fd6); color: #fff; box-shadow: 0 6px 18px rgba(124, 109, 224, .3); }
.drawer__link--primary:hover { color: #fff; filter: brightness(1.06); }
.drawer__link--outline { border: 1px dashed var(--line-strong); color: var(--text); }
.drawer__link--outline:hover { border-color: var(--brand); color: var(--brand); }

/* 抽屉「显示设置」工具组（小屏顶栏收纳后的调节入口） */
.drawer__tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 2px 6px; }
.drawer__tool {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 58px; padding: 8px 4px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--surface-2);
    font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: var(--t);
}
.drawer__tool i { font-size: 15px; }
.drawer__tool:hover { color: var(--brand); border-color: rgba(124, 109, 224, .4); }
.drawer__tool.is-on { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; }

/* ------------------------------------------------------- 移动端底部标签栏 */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: var(--surface-3); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(80, 70, 160, .08);
}
.tabbar__inner { display: flex; justify-content: space-between; max-width: 560px; margin: 0 auto; }
/* 标签字号 11px → 12px（体检 P1：低于中文可读下限），选中态加胶囊底 + 图标微动效 */
.tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; font-size: 12px; font-weight: 600; color: var(--text-3); border-radius: var(--r-sm); transition: var(--t); }
.tabbar__item i { font-size: 19px; transition: transform var(--t); }
.tabbar__item.is-active { color: var(--brand); background: rgba(124, 109, 224, .12); }
.tabbar__item.is-active i { transform: translateY(-1px) scale(1.08); }

/* ------------------------------------------------------------------ 按钮 */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; min-height: 44px;              /* 触摸目标 ≥44px（体检 P1） */
    border: 1px solid transparent; border-radius: var(--r-pill);
    font-size: 14px; font-weight: 700; letter-spacing: .2px; cursor: pointer; white-space: nowrap;
    transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn--primary { color: #fff; background: linear-gradient(135deg, var(--brand), #6d5fd6); box-shadow: 0 8px 22px rgba(124, 109, 224, .3); }
.btn--primary:hover { box-shadow: 0 12px 30px rgba(124, 109, 224, .42); }
.btn--cyan { color: #04121a; background: linear-gradient(135deg, var(--brand-2), #8ab4f8); box-shadow: 0 8px 22px rgba(109, 140, 240, .28); }
.btn--gold { color: #4a2c05; background: linear-gradient(135deg, var(--gold), var(--gold-2)); box-shadow: 0 8px 22px rgba(245, 158, 11, .3); }
.btn--danger { color: #fff; background: linear-gradient(135deg, var(--danger), #d6324f); }
.btn--ok { color: #fff; background: linear-gradient(135deg, var(--ok), #0f8a64); }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn--ghost:hover { background: var(--surface-3); border-color: var(--line-strong); }
.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--lg { padding: 15px 30px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }

/* ------------------------------------------------------------------ 卡片 */
.card {
    background: var(--surface); backdrop-filter: blur(var(--blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.card--solid { background: var(--solid); backdrop-filter: none; }
.card--pad { padding: 26px; }
.card--pad-lg { padding: 34px; }
.card--hover { transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.card--glow { border-color: rgba(124, 109, 224, .35); box-shadow: var(--glow); }
.card--beam { position: relative; overflow: hidden; }
.card--beam::before {
    content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 109, 224, .45), transparent);
}

/* -------------------------------------------------------------- 区块标题 */
.section { margin: 56px 0 0; }
.section-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
/* 实底胶囊：12px 小字压在明亮背景图上时，半透明紫底实测对比度仅 1.85:1，
   改为不透明白底 + 深紫字（体检 P1-5） */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: #4c3fb0; background: rgba(255, 255, 255, .92); border: 1px solid rgba(124, 109, 224, .32);
    box-shadow: 0 2px 10px rgba(80, 70, 160, .10);
}
[data-theme="dark"] .eyebrow { color: #cfc6ff; background: rgba(20, 24, 42, .88); border-color: rgba(124, 109, 224, .42); }
.section-title { font-size: 26px; font-weight: 800; letter-spacing: -.4px; margin: 10px 0 6px; }
.section-sub { color: var(--text-2); font-size: 14px; margin: 0; max-width: 640px; }
.section-more { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); }

/* ------------------------------------------------------------------ 网格 */
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Bento 统计块 */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat {
    display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transition: var(--t);
}
.stat:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.stat__icon { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; color: #fff; font-size: 18px; }
.stat__num { font-size: 23px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; }
.stat__label { font-size: 12.5px; color: var(--text-2); }

/* -------------------------------------------------------------- 徽标/标签 */
.badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700; line-height: 1.5; border: 1px solid var(--line); background: var(--surface-2);
}
.badge--vip { color: #4a2c05; background: linear-gradient(135deg, var(--gold), var(--gold-2)); border-color: transparent; }
.badge--ok { color: var(--ok); background: rgba(22, 169, 122, .12); border-color: rgba(22, 169, 122, .3); }
.badge--warn { color: var(--warn); background: rgba(240, 163, 42, .12); border-color: rgba(240, 163, 42, .3); }
.badge--danger { color: var(--danger); background: rgba(239, 79, 107, .12); border-color: rgba(239, 79, 107, .3); }
.badge--info { color: var(--info); background: rgba(79, 157, 240, .12); border-color: rgba(79, 157, 240, .3); }
.badge--brand { color: #fff; background: linear-gradient(135deg, var(--brand), #6d5fd6); border-color: transparent; }

/* ------------------------------------------------------------------ 英雄区 */
.hero { display: grid; grid-template-columns: 1.25fr .85fr; gap: 34px; align-items: center; padding: 46px 0 10px; }
.hero__title { font-size: clamp(30px, 4.4vw, 50px); font-weight: 850; line-height: 1.12; letter-spacing: -1.2px; margin: 16px 0 14px; }
.grad-text {
    background: linear-gradient(120deg, var(--brand) 8%, var(--brand-2) 48%, #0e7490 92%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .grad-text { background: linear-gradient(120deg, #fff 8%, var(--brand-2) 42%, var(--brand-3) 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__lead { font-size: 16px; color: var(--text-2); max-width: 540px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero__meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.hero__meta div { font-size: 13px; color: var(--text-3); }
.hero__meta b { display: block; font-size: 19px; color: var(--text); font-weight: 800; }
.hero__panel { padding: 24px; border-radius: var(--r-xl); }

/* -------------------------------------------------------------- 轮播 */
.carousel { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.carousel__track { display: flex; transition: transform .55s var(--ease); }
.carousel__slide { position: relative; min-width: 100%; height: 300px; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__cap { position: absolute; inset: auto 0 0 0; padding: 46px 30px 26px; background: linear-gradient(0deg, rgba(10, 14, 30, .82), transparent); color: #fff; }
.carousel__cap h3 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.carousel__cap p { font-size: 14px; opacity: .9; margin-bottom: 14px; }
.carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.carousel__btn.prev { left: 14px; }
.carousel__btn.next { right: 14px; }
.carousel__dots { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 6px; z-index: 3; }
.carousel__dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .5); border: none; cursor: pointer; transition: var(--t); }
.carousel__dot.is-active { width: 22px; background: #fff; }

/* ------------------------------------------------------------------ 表单 */
.field { margin-bottom: 16px; }
.field__label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--text-2); }
.input {
    width: 100%; padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text); font-size: 15px; transition: var(--t);
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--brand); background: var(--surface-3); box-shadow: 0 0 0 4px rgba(124, 109, 224, .16); }
.input--with-icon { padding-left: 44px; }
.input-wrap { position: relative; }
.input-wrap > .fa-solid, .input-wrap > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 15px; }
.input-wrap .pw-toggle { position: absolute; left: auto; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: 8px; color: var(--text-3); z-index: 2; }
.input-wrap:has(.pw-toggle) .input { padding-right: 44px; }
.pw-toggle:hover { color: var(--brand); }
.field__hint { font-size: 12px; color: var(--text-3); margin-top: 6px; }
textarea.input { min-height: 120px; resize: vertical; }
select.input { appearance: none; background-image: none; }
.select-wrap { position: relative; }
.select-wrap::after { content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

/* ------------------------------------------------------------------ 提示条 */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; margin-bottom: 16px; border: 1px solid var(--line); background: var(--surface-2); }
.alert i { margin-top: 3px; }
.alert--error { color: var(--danger); border-color: rgba(239, 79, 107, .35); background: rgba(239, 79, 107, .1); }
.alert--success { color: var(--ok); border-color: rgba(22, 169, 122, .35); background: rgba(22, 169, 122, .1); }
.alert--info { color: var(--info); border-color: rgba(79, 157, 240, .35); background: rgba(79, 157, 240, .1); }
.alert--warn { color: var(--warn); border-color: rgba(240, 163, 42, .35); background: rgba(240, 163, 42, .1); }

/* ------------------------------------------------------------------ 表格 */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th { text-align: left; padding: 13px 16px; font-size: 12.5px; font-weight: 700; color: var(--text-3); letter-spacing: .4px; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.table tbody tr { transition: var(--t); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ 分页 */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 4px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 40px; height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--text-2); transition: var(--t); }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .current { color: #fff; background: linear-gradient(135deg, var(--brand), #6d5fd6); border-color: transparent; }
.pagination .disabled { opacity: .4; }

/* ------------------------------------------------------------------ 空态 */
.empty { text-align: center; padding: 56px 20px; }
.empty__icon { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: var(--brand); background: rgba(124, 109, 224, .12); border: 1px solid rgba(124, 109, 224, .25); }
.empty h3 { font-size: 18px; margin-bottom: 6px; }
.empty p { color: var(--text-2); font-size: 14px; }

/* ------------------------------------------------------------------ 页脚 */
/* 半透明玻璃 + 顶部渐隐过渡：短内容页不再出现生硬实色横切（体检 P2-5） */
.footer {
    margin-top: 70px; padding: 34px 0 44px; color: var(--text-2); font-size: 13.5px;
    background: linear-gradient(180deg,
        rgba(246, 247, 251, 0) 0%,
        rgba(246, 247, 251, .55) 22%,
        var(--surface-2) 48%);
}
[data-theme="dark"] .footer {
    background: linear-gradient(180deg,
        rgba(11, 14, 26, 0) 0%,
        rgba(11, 14, 26, .55) 22%,
        var(--surface-2) 48%);
}
/* 短内容页把页脚推到底部，而不是悬在中段（体检 P2-5） */
#main { min-height: calc(100vh - 210px); min-height: calc(100dvh - 210px); }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.footer h4 { font-size: 14px; margin-bottom: 12px; color: var(--text); }
.footer a { color: var(--text-2); transition: var(--t); }
.footer a:hover { color: var(--brand); }
.footer__links { display: flex; flex-direction: column; gap: 8px; }
.footer__links a { min-height: 24px; }
.footer__bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }

/* -------------------------------------------------------------- Toast */
.toast-host { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--r-pill); background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-2); font-size: 14px; font-weight: 600; transform: translateY(-16px); opacity: 0; transition: var(--t); max-width: 90vw; }
.toast.is-show { transform: none; opacity: 1; }
.toast--success { border-color: rgba(22, 169, 122, .5); } .toast--success i { color: var(--ok); }
.toast--error { border-color: rgba(239, 79, 107, .5); } .toast--error i { color: var(--danger); }
.toast--info i { color: var(--info); }
.toast--warn i { color: var(--warn); }

/* ------------------------------------------------------------------ 弹窗 */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px; background: rgba(8, 11, 24, .6); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: var(--t); }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel { width: 100%; max-width: 520px; max-height: 86vh; overflow: auto; padding: 26px; border-radius: var(--r-lg); background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-2); transform: translateY(12px) scale(.98); transition: var(--t); }
.modal.is-open .modal__panel { transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.modal__title { font-size: 18px; font-weight: 800; }

/* -------------------------------------------------------- 命令面板（⌘K） */
.cmdk { position: fixed; inset: 0; z-index: 300; background: rgba(8, 11, 24, .58); backdrop-filter: blur(8px); display: flex; justify-content: center; padding: 12vh 18px 18px; opacity: 0; visibility: hidden; transition: var(--t); }
.cmdk.is-open { opacity: 1; visibility: visible; }
.cmdk__panel { width: min(640px, 100%); height: fit-content; max-height: 62vh; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-2); transform: translateY(-10px); transition: var(--t); }
.cmdk.is-open .cmdk__panel { transform: none; }
.cmdk__input { padding: 18px 22px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font-size: 16px; outline: none; }
.cmdk__list { overflow-y: auto; padding: 8px; }
.cmdk__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.cmdk__item i { color: var(--text-3); width: 18px; text-align: center; }
.cmdk__item.is-active, .cmdk__item:hover { background: var(--surface-2); }
.cmdk__item .kind { margin-left: auto; font-size: 11px; color: var(--text-3); }
.cmdk__empty { padding: 30px; text-align: center; color: var(--text-3); font-size: 14px; }

/* ------------------------------------------------------------ 回到顶部等 */
.fab { position: fixed; right: 20px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; cursor: pointer; color: var(--brand); opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--t); box-shadow: var(--shadow-1); }
.fab.is-show { opacity: 1; visibility: visible; transform: none; }
/* 移动端已固定底部标签栏，z-index(80) 会盖住悬浮按钮（实测重叠 27px、elementFromPoint 命中 tabbar）。
   此处直接在标签栏出现的断点隐藏 .fab，回顶职责交给标签栏「首页」，既修掉点不到又更干净（体检 P0-1）。 */
@media (max-width: 720px) { .fab { display: none !important; } }
.progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 200; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

/* ---------------------------------------------------------------- 骨架屏 */
.skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ------------------------------------------------------------- 定价套餐卡 */
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transition: var(--t); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.plan--featured { border-color: rgba(124, 109, 224, .5); box-shadow: var(--glow); background: linear-gradient(180deg, rgba(124, 109, 224, .12), var(--surface)); padding-top: 46px; }
.plan__ribbon { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); padding: 5px 18px; border-radius: 0 0 14px 14px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand), #6d5fd6); }
.plan__name { font-size: 17px; font-weight: 800; }
.plan__desc { font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.plan__price { font-size: 40px; font-weight: 850; letter-spacing: -1.5px; line-height: 1.1; }
.plan__price small { font-size: 15px; font-weight: 700; color: var(--text-2); }
.plan__unit { font-size: 13px; color: var(--text-2); margin-bottom: 18px; }   /* text-3 → text-2 提升对比（体检 P2） */
.plan__list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--text-2); }
.plan__list li { display: flex; gap: 9px; align-items: flex-start; }
.plan__list i { color: var(--ok); margin-top: 4px; }
.plan__foot { margin-top: auto; }
/* 共用权益说明行（三张卡不再重复罗列同样内容） */
.plan__common { margin: 14px auto 0; max-width: 720px; text-align: center; }

/* ---------------------------------------------------------------- 配额条 */
.quota { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r-md); background: linear-gradient(120deg, rgba(109, 140, 240, .12), rgba(124, 109, 224, .1)); border: 1px solid rgba(109, 140, 240, .26); flex-wrap: wrap; }
.quota__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #04121a; font-size: 20px; background: linear-gradient(135deg, var(--brand-2), #8ab4f8); }
.quota__body { flex: 1; min-width: 220px; }
.quota__title { font-weight: 800; font-size: 15px; }
.quota__desc { font-size: 13px; color: var(--text-2); }
.quota__bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 9px; }
.quota__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-2), var(--brand)); transition: width .6s var(--ease); }

/* -------------------------------------------------------------- 网盘浏览器 */
.explorer { border-radius: var(--r-lg); overflow: hidden; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar__search { position: relative; flex: 1; min-width: 190px; }
.toolbar__search input { width: 100%; padding: 10px 14px 10px 38px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 14px; outline: none; transition: var(--t); }
.toolbar__search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(124, 109, 224, .15); }
.toolbar__search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); }
.seg button { padding: 7px 14px; border: 0; background: none; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: var(--t); }
.seg button.is-active { color: #fff; background: linear-gradient(135deg, var(--brand), #6d5fd6); }
.tool-select { padding: 9px 34px 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; }

.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--text-3); font-size: 10px; }

.tree { max-height: 60vh; overflow: auto; padding: 10px; }
.tree__list { list-style: none; margin: 0; padding: 0; }
.node__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); transition: var(--t); cursor: pointer; }
.node__row:hover { background: var(--surface-2); }
.node__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 15px; flex: none; }
.node__name { font-weight: 600; font-size: 14px; word-break: break-all; }
.node__meta { font-size: 12px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.node__actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.node__caret { color: var(--text-3); transition: transform var(--t); width: 18px; text-align: center; }
.node.is-open > .node__row .node__caret { transform: rotate(90deg); }
.node__children { display: none; margin: 2px 0 2px 26px; padding-left: 12px; border-left: 1px dashed var(--line); }
.node.is-open > .node__children { display: block; }
.node__badge { font-size: 11px; color: var(--text-3); background: var(--surface-2); border-radius: 99px; padding: 2px 8px; }
.node--sel > .node__row { background: rgba(124, 109, 224, .16); }
.node__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.node__pick { width: 16px; height: 16px; flex: none; accent-color: var(--brand); cursor: pointer; }
.node__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree.is-hidden, .is-hidden { display: none !important; }

/* 平铺视图 */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; padding: 16px; }
.file-card { padding: 18px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); transition: var(--t); display: flex; flex-direction: column; gap: 10px; }
.file-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.file-card__name { font-weight: 700; font-size: 14px; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.file-card__meta { font-size: 12px; color: var(--text-3); }
.file-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }

.mini-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 13px; transition: var(--t); background: var(--surface-3); color: var(--text-2); }
.mini-btn:hover { transform: translateY(-1px); color: var(--text); }
.mini-btn.is-fav { color: #fff; background: linear-gradient(135deg, var(--danger), #d6324f); }
.mini-btn.is-dl { color: #fff; background: linear-gradient(135deg, var(--ok), #0f8a64); }
.mini-btn[disabled] { opacity: .45; pointer-events: none; }
.mini-btn.is-on { color: #fff; background: linear-gradient(135deg, var(--brand), #6d5fd6); }

.selection-bar { position: sticky; bottom: 0; z-index: 5; display: none; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--solid); font-size: 14px; font-weight: 600; }
.selection-bar.is-show { display: flex; }

/* -------------------------------------------------------------- 认证页面 */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px; }
.auth__card { display: grid; grid-template-columns: 1fr 1.05fr; width: 100%; max-width: 1060px; margin: 0 auto; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); background: var(--surface); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); min-height: 560px; }
.auth__side { position: relative; padding: 44px 40px; color: #fff; overflow: hidden; background: linear-gradient(150deg, rgba(76, 29, 149, .9), rgba(30, 64, 120, .9)), url("../../user_system/assets/site-bg.webp") center / cover no-repeat; display: flex; flex-direction: column; justify-content: space-between; }
.auth__side::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .18), transparent 55%); }
.auth__side > * { position: relative; z-index: 1; }
.auth__brand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; }
.auth__brand .brand__mark { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; }
.auth__title { font-size: 32px; font-weight: 850; line-height: 1.25; margin: 26px 0 12px; letter-spacing: -.6px; }
.auth__lead { font-size: 15px; opacity: .9; max-width: 340px; }
.auth__feats { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.auth__feat { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.auth__feat i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 13px; flex: none; }
.auth__foot { font-size: 12px; opacity: .7; }
.auth__form { padding: 44px 40px; background: var(--solid); display: flex; flex-direction: column; justify-content: center; }
.auth__form h2 { font-size: 25px; font-weight: 850; margin-bottom: 6px; }
.auth__form .sub { color: var(--text-2); font-size: 14px; margin-bottom: 24px; }
.auth__alt { text-align: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.auth__alt a { color: var(--brand); font-weight: 700; padding: 8px 4px; margin: -8px -4px; border-radius: var(--r-sm); display: inline-block; min-height: 44px; display: inline-flex; align-items: center; }
/* 行内小链接加大热区（体检 P1：≥44px） */
.taplink { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px; margin: -10px -12px; border-radius: var(--r-sm); }
.auth-back { position: fixed; top: 20px; left: 20px; z-index: 60; }

/* 移动端认证页品牌露出（体检 P2-6）：≤980px 时 .auth__side 整体隐藏，
   表单侧补一行紧凑品牌，避免登录/注册页在手机上没有任何品牌标识。 */
.auth__brand-inline { display: none; }
@media (max-width: 980px) {
    .auth__brand-inline {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 16px; font-size: 17px; font-weight: 800; color: var(--text);
    }
    .auth__brand-inline .brand__mark { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
}

/* 触屏设备触控目标加大 —— 已统一移至文件末尾。
   原因：本块原先写在各断点之前，其 42px 规则被后面 ≤720px(38px) / ≤380px(36px) 覆盖，
   导致「触屏加大」静默失效（体检 P2-3：CSS 覆盖顺序坑）。 */

/* ------------------------------------------------------------- 用户中心 */
.uc { display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; padding-top: 30px; }
.uc__side { position: sticky; top: 96px; }
.uc__card { border-radius: var(--r-lg); overflow: hidden; }
.uc__profile { padding: 30px 20px; text-align: center; position: relative; }
.uc__profile::before { content: ""; position: absolute; inset: 0 0 auto; height: 82px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.uc__avatar { margin: 16px auto 12px; position: relative; z-index: 1; border: 4px solid var(--solid); }
.uc__name { font-size: 17px; font-weight: 800; }
.uc__nav { padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.uc__nav a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--text-2); transition: var(--t); }
.uc__nav a i { width: 18px; text-align: center; }
.uc__nav a:hover { background: var(--surface-2); color: var(--text); }
.uc__nav a.is-active { color: #fff; background: linear-gradient(135deg, var(--brand), #6d5fd6); box-shadow: 0 6px 18px rgba(124, 109, 224, .3); }
.uc__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.page-head h1 { font-size: 27px; font-weight: 850; letter-spacing: -.6px; }
.page-head p { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.count-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--brand); }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.info-item { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.info-item__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; font-size: 15px; }
.info-item__label { font-size: 12px; color: var(--text-3); }
.info-item__value { font-size: 14px; font-weight: 700; word-break: break-all; }

/* ------------------------------------------------------------ 公告 & 其它 */
.ann-item { display: flex; gap: 16px; padding: 20px 22px; border-radius: var(--r-md); transition: var(--t); }
.ann-item:hover { transform: translateX(4px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.ann-item__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; flex: none; }
.ann-item__title { font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.ann-item__sum { font-size: 13.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ann-item__meta { font-size: 12px; color: var(--text-3); display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.prose { font-size: 15px; line-height: 1.85; }
.prose h1, .prose h2, .prose h3 { margin: 22px 0 12px; font-weight: 800; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 16px 22px; }
.prose img { border-radius: var(--r-md); margin: 14px 0; max-width: 100%; }
.prose a { color: var(--brand); text-decoration: underline; }
.prose blockquote { margin: 14px 0; padding: 10px 16px; border-left: 3px solid var(--brand); color: var(--text-2); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* 步骤 / 特色 */
.step { text-align: center; padding: 22px 14px; }
.step__num { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font-size: 20px; font-weight: 850; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 22px rgba(124, 109, 224, .35); }
.step h4 { font-size: 16px; font-weight: 800; margin-bottom: 5px; }
.step p { font-size: 13px; color: var(--text-2); }
.feat-icon { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; color: #fff; font-size: 24px; margin-bottom: 14px; }

/* FAQ 手风琴 */
.faq-item { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); overflow: hidden; margin-bottom: 10px; transition: var(--t); }
.faq-item.is-open { border-color: rgba(124, 109, 224, .45); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; cursor: pointer; font-weight: 700; font-size: 15px; }
.faq-q i { transition: transform var(--t); color: var(--brand); }
.faq-item.is-open .faq-q i { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.faq-item.is-open .faq-a { max-height: 420px; }
.faq-a__inner { padding: 0 22px 18px; color: var(--text-2); font-size: 14px; line-height: 1.8; }

/* 支付页 */
.pay-amount { font-size: 42px; font-weight: 850; letter-spacing: -1.5px; }
.qr-frame { width: 224px; height: 224px; margin: 0 auto; padding: 12px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-1); }
.qr-frame img { width: 100%; height: 100%; object-fit: contain; }
.pay-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; transition: var(--t); }
.pay-option + .pay-option { margin-top: 10px; }
.pay-option.is-active { border-color: var(--brand); background: rgba(124, 109, 224, .12); }
.pay-option input { accent-color: var(--brand); width: 17px; height: 17px; }

/* ------------------------------------------------------------------ 动画 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.anim { animation: fadeUp .6s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ----------------------------------------------------- 响应式（移动优先） */
/* 平板：双列统计、英雄单列 */
@media (max-width: 1100px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .hero { grid-template-columns: 1fr; gap: 26px; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .uc { grid-template-columns: 220px 1fr; gap: 18px; }
}
/* 中等：导航收起、栅格降列 */
@media (max-width: 980px) {
    .nav__links { display: none; }
    .burger { display: grid; }
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .uc { grid-template-columns: 1fr; }
    .uc__side { position: static; }
    .uc__nav { flex-direction: row; flex-wrap: wrap; }
    .uc__nav a { flex: 1 1 140px; justify-content: center; }
    .auth { padding: 16px; }
    .auth__card { grid-template-columns: 1fr; min-height: auto; }
    .auth__side { display: none; }
    .auth__form { padding: 32px 22px; }
    .info-grid { grid-template-columns: 1fr; }
}
/* 手机：单列、字号阶梯、底部标签栏、触摸目标加大 */
@media (max-width: 720px) {
    body { font-size: 14.5px; padding-bottom: 70px; }
    .shell { padding: 0 14px; }
    .nav { top: 8px; margin: 8px auto 0; width: calc(100% - 16px); }
    .nav__inner { height: 58px; padding: 0 8px 0 12px; gap: 8px; }
    .brand__text { font-size: 15px; }
    .icon-btn { width: 38px; height: 38px; }
    .section { margin-top: 40px; }
    .section-title { font-size: 22px; }
    .section-head { margin-bottom: 16px; }
    .grid--2, .grid--3, .grid--4, .grid--auto { grid-template-columns: 1fr; }
    .bento { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat { padding: 15px; gap: 10px; }
    .stat__icon { width: 40px; height: 40px; font-size: 16px; }
    .stat__num { font-size: 19px; }
    .hero { padding-top: 24px; }
    .hero__title { font-size: clamp(26px, 7vw, 34px); }
    .hero__meta { gap: 16px; }
    .hero__meta b { font-size: 17px; }
    .carousel__slide { height: 210px; }
    .carousel__cap { padding: 30px 18px 18px; }
    .carousel__cap h3 { font-size: 18px; }
    .tabbar { display: block; }
    .card--pad { padding: 20px 16px; }
    .card--pad-lg { padding: 24px 18px; }
    .footer { padding: 30px 0 100px; }
    .toast-host { top: 12px; }
    .file-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 12px; gap: 10px; }
    .toolbar { padding: 12px; gap: 8px; }
    .toolbar__search { min-width: 100%; order: -1; }
    .plan { padding: 24px 20px; }
    .plan__price { font-size: 34px; }
    .auth { padding: 0; min-height: 100vh; }
    .auth__form { padding: 28px 18px; }
    .uc__nav a { flex: 1 1 110px; padding: 10px; font-size: 13px; }
    .ann-item { padding: 16px; gap: 12px; }
    .ann-item__ic { width: 40px; height: 40px; font-size: 16px; }
}
/* 窄屏：顶栏收紧 —— 主题按钮收进抽屉「显示设置」；
   品牌改为「精简字标」而不是整段隐藏（体检 P2-6：移动端此前一个品牌元素都没有） */
@media (max-width: 420px) {
    .bento { grid-template-columns: 1fr 1fr; }
    #themeToggle { display: none; }
    .brand__text--full { display: none; }
    .brand__text--short { display: inline; }
    .hero__actions .btn { flex: 1 1 100%; }
    .uc__nav a { flex: 1 1 100%; }
    .pay-amount { font-size: 34px; }
}

/* ===== 移动端体检整改（P0-2：320px 小屏横向溢出） ===== */
/* 小屏：顶栏低频按钮（背景模式）收进抽屉「显示设置」分组，保留音乐按钮 */
@media (max-width: 560px) {
    #bgModeBtn { display: none; }
}

/* 320–380：音乐按钮同样收进抽屉，顶栏只留 搜索 + 登录/头像 + 菜单 */
@media (max-width: 380px) {
    #musicToggle { display: none; }
    .nav__inner { gap: 6px; padding: 0 6px 0 10px; }
    .nav__actions { gap: 6px; }
    .icon-btn { width: 36px; height: 36px; font-size: 13px; }
    .btn--sm { padding: 8px 10px; font-size: 12.5px; }
    .brand__mark { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
    .nav { top: 6px; margin: 6px auto 0; width: calc(100% - 12px); }
    .hero__title { font-size: clamp(24px, 8.4vw, 30px); overflow-wrap: break-word; }
    .hero__lead { font-size: 14px; }
    .footer__grid { gap: 18px; }
}

/* ==========================================================================
   移动端体检整改 · 第二轮
   依据：2026-09-11「pan.mengva.com 移动端体验审计」（P0-1/P1-1/P1-3/P1-5/P2-2/P2-3/P2-4/P2-5/P2-7/P2-8）
   注意：本段必须置于上方所有断点之后，否则同权重规则会被后面的宽度断点覆盖
   ========================================================================== */

@media (max-width: 720px) {
    /* P2-4 安全区：底部标签栏 74.8px + 安全区，body 内边距必须同步抬高 */
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    /* P2-4 横屏刘海：正文左右避让 */
    .shell {
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
    }

    /* P1-1 iOS 聚焦缩放：表单控件字号提到 16px（桌面端保持 15px 的紧凑观感） */
    .input, .input--with-icon, textarea, select,
    input[type="text"], input[type="password"], input[type="email"], input[type="search"],
    .toolbar__search input, .tool-select { font-size: 16px; }

    /* P1-3 命令面板：补顶部安全区 + 高度约束，键盘弹起时不被压扁 */
    .cmdk { padding: max(10vh, 56px) 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .cmdk__panel { max-height: min(58vh, 100% - 96px); }

    /* P2-2 VIP 套餐：三档改横向滑动 + scroll-snap，价格对比一屏内完成
       （仅作用于首页 #vip-plans，不影响 about / renew 等页面的 grid--3） */
    #vip-plans .grid--3 {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        gap: 12px; padding: 4px 14px 18px; margin: 0 -14px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #vip-plans .grid--3::-webkit-scrollbar { display: none; }
    #vip-plans .grid--3 > .plan { flex: 0 0 78%; scroll-snap-align: center; }

    /* P2-5 页脚：收窄内边距，避免与 body 内边距叠加出大片空白带 */
    .footer { padding: 26px 0 calc(24px + env(safe-area-inset-bottom, 0px)); }

    /* P2-7 低端安卓性能：降低毛玻璃半径、停掉极光动画、移除噪点合成层 */
    .nav, .nav.is-stuck, .card, .tabbar, .stat {
        backdrop-filter: blur(10px) saturate(1.4);
        -webkit-backdrop-filter: blur(10px) saturate(1.4);
    }
    .app-bg__aurora { animation: none; filter: blur(48px); }
    .app-bg__aurora.b { display: none; }
    .app-bg__grain { display: none; }
}

/* P1-5 对比度：移动端把次级文字压深一档。
   [data-theme="dark"] 必须显式重声明，否则会被上面的 :root 覆盖（同权重、后写优先）。 */
@media (max-width: 720px) {
    :root { --text-2: #454d66; }
    [data-theme="dark"] { --text-2: #b3bcd4; }
}

/* P1-5 背景图干扰：移动端额外叠一层极轻均质蒙版。
   用独立图层而非改 --bg-dim 令牌，这样不会破坏「清晰 / 柔和 / 沉浸」三档用户选择。 */
@media (max-width: 720px) {
    .app-bg::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(244, 243, 251, .20), rgba(240, 241, 250, .30));
    }
    [data-theme="dark"] .app-bg::after {
        background: linear-gradient(180deg, rgba(7, 10, 22, .24), rgba(7, 10, 22, .32));
    }
}

/* P2-8 触摸端 hover 残留：触摸设备上取消「上浮」位移，避免点击后卡片一直粘着抬起 */
@media (hover: none) {
    .btn:hover, .card--hover:hover, .stat:hover, .plan:hover,
    .file-card:hover, .ann-item:hover, .mini-btn:hover, .icon-btn:hover { transform: none; }
}

/* ==========================================================================
   P2-3 触控目标 ≥ 44px（@media (pointer: coarse)）
   必须位于所有宽度断点之后才能生效 —— 原块写在断点之前，其 42px 被
   后面 ≤720px(38px) / ≤380px(36px) 覆盖，导致「触屏加大」静默失效。
   视觉尺寸尽量不变，优先用 ::after 伪元素扩大热区。
   ========================================================================== */
@media (pointer: coarse) {
    .icon-btn { width: 44px; height: 44px; }
    .nav__actions { gap: 4px; }

    /* 顶栏 Logo：只显示图标时仅 34×34，用伪元素扩到约 46px 热区 */
    .brand { position: relative; min-height: 44px; }
    .brand::after { content: ""; position: absolute; inset: -6px -8px; }

    /* 顶栏「登录」按钮：原 78×40 → 44px 高 */
    .btn--sm { min-height: 44px; padding: 9px 16px; }

    /* 「全部公告 →」实测 67×21，问题最严重，按伪元素扩热区 */
    .section-more { position: relative; }
    .section-more::after { content: ""; position: absolute; inset: -12px -10px; }

    /* 页脚链接：行高补到 44px，间距收紧以保持原有视觉节奏 */
    .footer__links { gap: 0; }
    .footer__links a { min-height: 44px; display: flex; align-items: center; }

    /* 密码可见按钮：32×40 → 44×44，输入框右侧内边距同步加大 */
    .pw-toggle, .input-wrap .pw-toggle { width: 44px; height: 44px; right: 4px; }
    .input-wrap:has(.pw-toggle) .input { padding-right: 54px; }

    .tabbar__item { padding: 9px 0; }
    .drawer__tool { min-height: 52px; }
    .mini-btn { width: 40px; height: 40px; }
    .pagination a, .pagination span { min-width: 44px; height: 44px; }
}