/* ==========================================================================
   仙影步数 · 设计系统
   风格：渐变玻璃 + 柔和拟态；主色柔光蓝（单一色相 223°，刻意避开青色与紫色）。
   ========================================================================== */

:root {
    /* ---- 品牌色：柔光蓝（单一色相 223°，从 69% 饱和降到 65%，亮度提一档）----
       三个色停只在同一色相内小幅递进（223°/224°/223°）：
       原来是「蓝 → 靛 → 紫」的跨色相渐变，那正是 AI 生成图的头号视觉特征 ——
       纯色相内递进才像一条自然光带，而不是「科技渐变」贴纸。
       --c1..--c3 是**装饰色**（渐变装饰、光晕、图标底），不承载文字；
       承载白字的面必须用 --grad-ui 或 --brand-solid（两者都保证白字 ≥4.5:1）。

       ⚠ 下面这一组只是「CSS 解析期兜底」，真正生效的是文件末尾主题区里的裸 :root
       （= 默认主题）。改配色请改 tools/make-themes.py 的 THEMES，不要改这里 ——
       这里跟着默认主题对齐，纯粹是为了读文件开头的人不被一套过期的死值误导。 */
    --c1: #14b8a6;
    --c2: #10b981;
    --c3: #0ea5e9;
    /* 装饰渐变：可以亮、可以跨一点色相，因为它不承载文字（图标底、色条、文字裁剪、光晕） */
    --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
    --grad-soft: linear-gradient(135deg, rgba(20,184,166,.12), rgba(14,165,233,.12));
    /* 承载白字的渐变：三停必须全部 ≥4.5:1（默认的墨黑主题是 15:1）。
       两组渐变肉眼差别很小，但这是「渐变能不能用在按钮上」的分界线：
       浅色主题下渐变末端只有 2.5:1，属于看得见但读不清。 */
    --grad-ui: linear-gradient(135deg, #1f8376 0%, #228190 58%, #287da8 100%);
    --brand-solid: #1f8376;

    /* ---- 中性（带蓝的冷灰）---- */
    /*：纯灰配品牌蓝会显脏，冷灰才和品牌色同温 */
    --ink:   #0b1a20;
    --ink-2: #4a5f68;
    --ink-3: #6f8a92;
    --line:  rgba(11, 26, 32, .08);
    --line-2: rgba(11, 26, 32, .14);

    /* ---- 语义色（背景/描边用，两套主题通用）---- */
    --ok:   #12a150;
    --warn: #f59e0b;
    --err:  #ef4444;
    --info: #4a7dd6;

    /* ---- 语义文字色（在「浅色底」上可读的那一版）----
       深色模式只覆盖这一组，组件里不要再写死品牌色号，
       否则深色底 + 深色字 = 看不见。 */
    --accent-ink: #0f766e;
    --ok-ink:     #0f7a43;
    --warn-ink:   #b45309;
    --err-ink:    #b91c1c;

    /* ---- 主题化表面 ---- */
    --neutral-fill: rgba(20,22,27,.07);
    --track:        rgba(20,22,27,.09);   /* 滑杆未填充轨道 */
    /* 会员黑金：金色只用于发丝线 / 徽章 / 进度条本身，底色用深暖褐。
       整块纯黄会显得廉价，深底 + 细金线才有质感。 */
    --gold-1:    #f7e6ad;                    /* 香槟亮金 */
    --gold-2:    #dcb75f;                    /* 主金 */
    --gold-3:    #b8902f;                    /* 暗金 */
    --gold-line: rgba(217, 180, 90, .42);    /* 金色发丝线 */
    /* 香槟金淡底：给「金色卡片」用。浅色底上是微暖的一层，深色底上是微光的一层，
       两个主题都成立，所以深色模式不需要覆盖。 */
    --gold-soft: linear-gradient(135deg, rgba(217,180,90,.16), rgba(217,180,90,.05));
    --gold-ink:  #3a2a06;                    /* 金底上的深字 */
    --gold-text: #f7eed6;                    /* 暖白正文 */

    /* ---- 玻璃 ---- */
    --glass:        rgba(255, 255, 255, .58);
    --glass-strong: rgba(255, 255, 255, .78);
    --glass-line:   rgba(255, 255, 255, .72);
    --blur: 14px;

    /* ---- 圆角 / 阴影 / 间距 ---- */
    --r-sm: 12px;
    --r:    18px;
    --r-lg: 26px;
    --r-xl: 34px;
    --sh-1: 0 2px 8px rgba(20,22,27,.05);
    --sh-2: 0 10px 30px -12px rgba(20,22,27,.16);
    --sh-3: 0 26px 60px -22px rgba(75, 106, 219, .32);
    --sh-in: inset 0 1px 0 rgba(255, 255, 255, .9);
    --gutter: clamp(14px, 4.4vw, 22px);

    /* ---- 动效 ---- */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-bounce: cubic-bezier(.34, 1.42, .64, 1);
    --dur: .32s;

    /* ---- 安全区 ---- */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* 禁止浏览器自动调整字体大小 —— 这是「同一台手机、换浏览器字号就变大」的主因：
   Android 各内核会按系统字体缩放 / 文本自动调整(text inflation)放大页面文字，
   而卡片与内边距都是写死的 px，于是卡片内部拥挤、按钮文字比例失调。
   none = 完全不调整（100% 只是「不放大」，部分国产内核仍会自己缩）；
   四个厂商前缀一起写，老内核才认。 */
html, body {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}
html {
    scroll-behavior: smooth;
    /* 让原生控件（数字输入框上下箭头、滚动条、select 弹层）跟随主题；
       不写这一行，深色页面上的原生控件仍是浅色。深色块里会覆盖成 dark。 */
    color-scheme: light;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
                 "HarmonyOS Sans SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg-page);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}

/* ==========================================================================
   背景：静态多层光晕（刻意不做动画）
   玻璃层用 backdrop-filter。若背景在动，浏览器每帧都要重新采样并模糊背景，
   移动端会明显掉帧。改静态后玻璃只模糊一次，滚动与点击不再触发重算。
   ========================================================================== */
.bg {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    pointer-events: none;
    background: var(--aurora);
}
.bg .grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(18,20,26,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,20,26,.026) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 76%);
    -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 76%);
}

/* ==========================================================================
   布局骨架
   ========================================================================== */
.shell {
    position: relative; z-index: 1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: calc(var(--sat) + 14px) calc(var(--gutter) + var(--sar)) calc(var(--sab) + 92px) calc(var(--gutter) + var(--sal));
    display: flex; flex-direction: column;
}
.shell.no-tabbar {
    padding-bottom: calc(var(--sab) + 28px);
}

/* ==========================================================================
   玻璃卡片
   ========================================================================== */
.glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
    backdrop-filter: blur(var(--blur)) saturate(160%);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2), var(--sh-in);
}
.card {
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
    backdrop-filter: blur(var(--blur)) saturate(160%);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2), var(--sh-in);
    padding: clamp(16px, 4.6vw, 22px);
    position: relative;
    overflow: hidden;
    contain: paint;
}
.card + .card { margin-top: 14px; }
/* 状态卡 / 主视觉卡与紧随其后的卡片或按钮之间同样要有间距。
   原先只有 .card + .card 有规则，导致会员中心的「免费用户卡」和「选择套餐」
   贴在一起；「我的」页面退出登录按钮跟在卡片后也一样贴着。 */
.vip-card + .card, .vip-card + .vip-card, .vip-card + .free-card, .vip-card + .up-card { margin-top: 14px; }
.card + .btn, .vip-card + .btn, .hero + .btn, .up-card + .btn, .free-card + .btn { margin-top: 16px; }
.card--flush { padding: 0; }

/* ==========================================================================
   顶栏
   ========================================================================== */
.topbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    min-height: 40px;
}
.topbar .brand {
    display: flex; align-items: center; gap: 9px;
    font-weight: 800; font-size: 16.5px; letter-spacing: -.01em;
    color: var(--ink);
}
.topbar .brand .mark {
    width: 32px; height: 32px; border-radius: 11px;
    background: var(--grad);
    display: grid; place-items: center;
    box-shadow: 0 6px 16px -6px var(--brand-sh);
    flex-shrink: 0;
}
/* 实心品牌图标占满画布，比原描边图「重」，所以给 17px 与旧视觉重量对齐 */
.topbar .brand .mark svg { width: 17px; height: 17px; color: #fff; }
.topbar .spacer { flex: 1; }
.topbar .back {
    width: 38px; height: 38px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    color: var(--ink-2); cursor: pointer;
    box-shadow: var(--sh-1);
    transition: transform var(--dur) var(--ease), background .2s;
    flex-shrink: 0;
}
.topbar .back:active { transform: scale(.92); }
.topbar .back svg { width: 19px; height: 19px; }

/* 左上角站点名 --------------------------------------------------------------
   动效取舍：这是每个页面都在、一天要看上百次的元素。按「频率决定动不动」的
   原则，循环动画在这里只会变成噪音，所以：
     · 常驻的美化交给渐变字本身（静态，随时都在）
     · 动效只在进入页面时各播一次 —— 整体入场 420ms、文字光扫 1.15s
   全程只动 transform / opacity / background-position，不触发重排。 */
.topbar .brand { animation: brandIn .42s var(--ease) both; }
@keyframes brandIn {
    from { opacity: 0; transform: translateY(5px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* 站名渐变字：两层背景（一层常驻渐变，一层光带）。
   亮蓝在白底上对比度只有 ~2.5:1，读不清，所以常驻层用同色系压深的一版
   （4.6:1 以上）；「亮」交给只闪一次的光带。 */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .topbar .brand > span:last-child {
        background-image:
            linear-gradient(100deg, transparent 42%, rgba(255,255,255,.9) 50%, transparent 58%),
            linear-gradient(100deg, var(--accent-ink) 0%, var(--brand-line) 52%, var(--accent-ink) 100%);
        background-size: 220% 100%, 100% 100%;
        background-position: 200% 0, 0 0;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: brandSheen 1.15s var(--ease) .32s 1 both;
    }
}
/* 光带从右往左扫过一次即停在左侧（画面外），静置时只剩渐变字 */
@keyframes brandSheen {
    from { background-position: 200% 0, 0 0; }
    to   { background-position: -120% 0, 0 0; }
}

/* 图标随整体入场轻微「落定」，并补一圈高光边 */
.topbar .brand .mark { position: relative; }
.topbar .brand .mark::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
    pointer-events: none;
}

/* ==========================================================================
   标题区
   ========================================================================== */
.page-head { margin-bottom: 16px; }
.page-head h1 {
    font-size: clamp(21px, 6vw, 26px);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.page-head p { color: var(--ink-2); font-size: 13.5px; margin-top: 5px; }

.section-title {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: clamp(13px, 4vw, 14px); font-weight: 800; color: var(--ink);
    margin-bottom: 12px;
}
.section-title .bar {
    width: 3.5px; height: 15px; border-radius: 3px;
    background: var(--accent-bar);
}
.section-title .more { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }

/* ==========================================================================
   Hero 卡（渐变玻璃）
   ========================================================================== */
.hero {
    position: relative; overflow: hidden;
    border-radius: var(--r-xl);
    padding: clamp(20px, 5.6vw, 28px);
    background: var(--grad-ui);
    color: #fff;
    box-shadow: var(--sh-3);
    margin-bottom: 14px;
    isolation: isolate;
}
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image:
        radial-gradient(circle at 88% 12%, var(--hero-glow, rgba(255,255,255,.3)), transparent 42%),
        radial-gradient(circle at 8% 92%, rgba(255,255,255,.16), transparent 40%);
}
.hero::after {
    content: ''; position: absolute; z-index: -1;
    width: 220px; height: 220px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.18);
    top: -70px; right: -80px;
    box-shadow: 0 0 0 34px rgba(255,255,255,.055), 0 0 0 68px rgba(255,255,255,.03);
}
/* 会员身份的主视觉卡：与会员状态卡同一套黑金语言 */
.hero--vip {
    background: linear-gradient(135deg, #1e1810 0%, #2b2214 46%, #3a2c15 100%);
    color: var(--gold-text);
    box-shadow:
        inset 0 0 0 1px var(--gold-line),
        0 22px 50px -24px rgba(120,85,10,.85),
        inset 0 1px 0 rgba(255,228,150,.16);
}
.hero--vip::before {
    background-image:
        radial-gradient(circle at 88% 12%, rgba(226,184,80,.26), transparent 42%),
        radial-gradient(circle at 8% 92%, rgba(226,184,80,.14), transparent 40%);
}
/* 右上角细金环 —— 「金色黄线」的主要落点 */
.hero--vip::after {
    border-color: rgba(217,180,90,.4);
    box-shadow: 0 0 0 34px rgba(217,180,90,.07), 0 0 0 68px rgba(217,180,90,.04);
}
.hero--free { background: linear-gradient(135deg, #475569, #334155); }

/* 头像方块；会员时变成金色徽章底（皇冠即 VIP 图标） */
.hero .avatar {
    width: 54px; height: 54px; border-radius: 18px; flex-shrink: 0;
    display: grid; place-items: center;
    background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.25);
}
.hero--vip .avatar {
    background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 52%, var(--gold-3) 100%);
    border-color: rgba(255,236,180,.55);
    color: var(--gold-ink);
    box-shadow: 0 6px 18px -8px rgba(160,120,20,.8);
}

.hero .hi { font-size: 13px; opacity: .88; font-weight: 600; letter-spacing: .02em; }
.hero .big {
    font-size: clamp(32px, 10vw, 44px);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
    margin: 4px 0 2px;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 7px;
}
.hero .big small { font-size: 14px; font-weight: 600; opacity: .85; letter-spacing: 0; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.hero .meta .hero .meta .pill svg { width: 13px; height: 13px; }
/* 水印用实心品牌图（原来是一张细描边小人），两处补偿：
   1) 透明度 .16 -> .13：实心形状覆盖面积大得多，同为 .16 会从「若有若无」变成色斑；
   2) bottom -10px -> 10px：旧图在 24 单位画布里有内边距（图形底边离画布底约 15.4%，
      130px 宽时约 20px），叠加 -10px 后视觉底边落在卡片底边上方约 10px；
      新图占满画布，同样的 -10px 会伸到卡片外，等于整体下移 20px。
      这里用 +10px 把视觉位置还原到旧图那一档。 */
.hero .deco { position: absolute; right: -6px; bottom: 10px; opacity: .13; z-index: -1; }
.hero .deco svg { width: clamp(90px, 28vw, 130px); height: auto; }

/* ==========================================================================
   按钮
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%;
    min-height: 50px;
    padding: 0 18px;
    border: none; border-radius: var(--r);
    font-family: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
    cursor: pointer; position: relative; overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity .2s;
    text-decoration: none;
    white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active:not(:disabled) { transform: scale(.975); }

/* 聚焦描边 ---------------------------------------------------------------
   .btn / a / summary 此前没有自定义焦点样式，聚焦时露出的是浏览器或
   ROM 的默认圈（小米等 ROM 上是橙黄色，与主题完全不搭）。
   这里统一成品牌蓝，与页面已有的 :focus-visible 规则同款（2px + 2px 偏移）；
   鼠标/触摸点出来的焦点不显示这一圈，只有键盘导航才显示。 */
a:focus, button:focus, summary:focus, .btn:focus {
    outline: 2px solid var(--c1); outline-offset: 2px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
summary:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary {
    background: var(--grad-ui); background-size: 200% 100%;
    color: #fff;
    box-shadow: 0 12px 26px -12px var(--brand-sh-2), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:not(:disabled):hover { background-position: 100% 0; box-shadow: 0 16px 32px -12px var(--brand-sh-2); }

/* 实色主按钮：首屏主视觉使用，不用渐变。
   渐变按钮叠在渐变装饰上会显得吵；实色更安静也更"产品感"。 */
.btn--solid {
    background: var(--brand-solid); color: #fff;
    box-shadow: 0 8px 18px -10px var(--brand-sh);
}
.btn--solid:not(:disabled):hover { filter: brightness(1.05); }

.btn--ghost {
    background: var(--glass-strong); color: var(--ink-2);
    border: 1px solid var(--glass-line);
    box-shadow: var(--sh-1);
}
.btn--soft {
    background: var(--grad-soft); color: var(--accent-ink);
    border: 1px solid var(--brand-fill-3);
}
.btn--danger { background: rgba(239,68,68,.1); color: var(--err); border: 1px solid rgba(239,68,68,.2); }
.btn--sm { min-height: 40px; font-size: 13.5px; border-radius: var(--r-sm); padding: 0 14px; width: auto; }
.btn--block { width: 100%; }

/* 按钮内旋转指示 */
.spinner {
    width: 16px; height: 16px; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff; border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
}
.btn.loading .spinner { display: block; }
.btn.loading .btn-ico { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   表单
   ========================================================================== */
.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }
.field > label,
.field .lab {
    display: block;
    font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    margin-bottom: 7px; letter-spacing: .02em;
}
.field .lab { display: flex; align-items: center; gap: 7px; min-height: 20px; }
.field .lab .spacer { margin-left: auto; }
.field .lab .tip { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }

.input, .select, textarea.input {
    width: 100%;
    min-height: 50px;
    padding: 13px 15px;
    font-family: inherit; font-size: 16px;   /* 16px 防 iOS 聚焦缩放 */
    font-weight: 500;
    color: var(--ink);
    background: rgba(255,255,255,.72);
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--ink-3); font-weight: 400; }
.input:focus {
    border-color: var(--brand-sh);
    background: #fff;
    box-shadow: 0 0 0 4px var(--brand-fill);
}
.input.is-err { border-color: rgba(239,68,68,.6); box-shadow: 0 0 0 4px rgba(239,68,68,.1); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.65; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 50px; }
.input-wrap .suffix {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: none; border-radius: 12px;
    background: transparent; color: var(--ink-3); cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s, color .2s;
}
.input-wrap .suffix:active { background: rgba(18,20,26,.06); }
.input-wrap .suffix svg { width: 19px; height: 19px; }
/* 验证码按钮：.suffix 原本是 40×40 的纯图标按钮，这里加一个文字变体 */
.input-wrap--code .input { padding-right: 114px; }
.input-wrap .suffix--text {
    width: auto; height: 34px; padding: 0 12px;
    font-size: 12.5px; font-weight: 700; color: var(--accent-ink);
    background: var(--brand-fill); border-radius: 10px;
}
.input-wrap .suffix--text:active { background: var(--brand-fill-3); }
.input-wrap .suffix--text:disabled { color: var(--ink-3); background: rgba(20,22,27,.05); }

/* select 复用 .input 的外观（后台配置项要用） */
select.input {
    appearance: none; -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238aa0a8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}

/* 提交动作区：和上方卡片之间留白。
   表单最后一个卡片是「支付方式」，里面已经有金额/时长两行，按钮贴着会让「确认金额」和
   「付钱」两个动作粘成一团；留 20px 之后视线自然落到按钮上。 */
.submit-actions { margin-top: 20px; }
.submit-actions .form-msg { margin-top: 0; }
.submit-actions .form-msg.show { margin-bottom: 10px; }
/* 校验失败时把出问题的输入框直接标出来：只给一行文字提示，用户还得自己回去找是哪一格 */
.input--err {
    border-color: rgba(239,68,68,.55) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
    animation: fieldShake .32s var(--ease);
}
@keyframes fieldShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-3px); }
    75%     { transform: translateX(3px); }
}

.form-msg {
    display: none;
    align-items: flex-start; gap: 7px;
    margin-top: 10px; padding: 11px 13px;
    border-radius: var(--r-sm);
    font-size: 13px; font-weight: 600; line-height: 1.5;
}
.form-msg.show { display: flex; animation: msgIn .3s var(--ease); }
.form-msg svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.form-msg.err  { background: rgba(239,68,68,.09); color: var(--err-ink); border: 1px solid rgba(239,68,68,.16); }
.form-msg.ok   { background: rgba(18,161,80,.1); color: var(--ok-ink); border: 1px solid rgba(18,161,80,.18); }
.form-msg.warn { background: rgba(245,158,11,.1); color: var(--warn-ink); border: 1px solid rgba(245,158,11,.2); }
@keyframes msgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 步数大数字 */
.step-display {
    display: flex; align-items: baseline; justify-content: center; gap: 8px;
    padding: 12px 0 6px;
}
.step-display b {
    font-size: clamp(38px, 13vw, 54px);
    font-weight: 800; letter-spacing: -.035em; line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.step-display b.pop { animation: numPop .42s var(--ease-bounce); }
@keyframes numPop { 0% { transform: scale(1); } 42% { transform: scale(1.13); } 100% { transform: scale(1); } }
.step-display small { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }

/* 滑杆 */
input[type=range].range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 30px; background: transparent; margin: 0;
}
input[type=range].range::-webkit-slider-runnable-track {
    height: 7px; border-radius: 7px;
    background: linear-gradient(90deg, var(--c1), var(--c3)) no-repeat,
                var(--track);
    background-size: var(--fill, 50%) 100%;
}
input[type=range].range::-moz-range-track { height: 7px; border-radius: 7px; background: var(--track); }
input[type=range].range::-moz-range-progress { height: 7px; border-radius: 7px; background: linear-gradient(90deg, var(--c1), var(--c3)); }
input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 3.5px solid var(--c1);
    box-shadow: 0 3px 10px var(--brand-line);
    margin-top: -9.5px; cursor: grab;
    transition: transform .18s var(--ease);
}
input[type=range].range::-webkit-slider-thumb:active { transform: scale(1.16); cursor: grabbing; }
input[type=range].range::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 3.5px solid var(--c1);
    box-shadow: 0 3px 10px var(--brand-line); cursor: grab;
}
/* 禁用态（今日已达步数上限时滑杆与快捷值会被禁用）——必须看得出来不可操作 */
input[type=range].range:disabled { opacity: .5; cursor: not-allowed; }
input[type=range].range:disabled::-webkit-slider-thumb { cursor: not-allowed; }
input[type=range].range:disabled::-moz-range-thumb { cursor: not-allowed; }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.switch:disabled { opacity: .5; cursor: not-allowed; }

.range-ends {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 700; color: var(--ink-3);
    margin-top: -2px;
}

/* 快捷值 */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chip {
    flex: 1 1 auto; min-width: 66px; min-height: 38px;
    padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--ink-2);
    background: rgba(255,255,255,.7);
    border: 1.5px solid var(--line);
    border-radius: 100px;
    cursor: pointer; white-space: nowrap;
    transition: all .22s var(--ease);
}
.chip:active { transform: scale(.94); }
.chip.on {
    background: var(--grad-ui); color: #fff; border-color: transparent;
    box-shadow: 0 6px 14px -6px var(--brand-sh-2);
}

/* 开关 */
.switch {
    position: relative; width: 50px; height: 29px; flex-shrink: 0;
    border-radius: 100px; border: none; cursor: pointer;
    background: rgba(18,20,26,.16);
    transition: background .28s var(--ease);
    padding: 0;
}
.switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 23px; height: 23px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: transform .28s var(--ease-bounce);
}
.switch.on { background: var(--grad); }
.switch.on::after { transform: translateX(21px); }

/* 分段选择 */
.seg {
    display: flex; gap: 4px; padding: 4px;
    background: rgba(18,20,26,.055);
    border-radius: 100px;
}
.seg button {
    flex: 1; min-height: 38px;
    border: none; border-radius: 100px; background: transparent;
    font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2);
    cursor: pointer; transition: all .24s var(--ease);
    white-space: nowrap;
}
.seg button.on {
    background: #fff; color: var(--accent-ink);
    box-shadow: 0 3px 10px rgba(18,20,26,.1);
}

/* ==========================================================================
   列表行
   ========================================================================== */
.list { display: flex; flex-direction: column; }
.row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    min-height: 58px;
}
.row:last-child { border-bottom: none; }
.row .ico {
    width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--grad-soft); color: var(--accent-ink);
}
.row .ico svg { width: 20px; height: 20px; }
.row .txt { flex: 1; min-width: 0; }
/* 主标题与副标题各占一行
   原先两个都是行内 span：宽度够就挤在同一行、不够才折行，各处表现不一致。
   改为块级后统一为「第一行主标题、第二行副标题」，同时让 nowrap+ellipsis 真正生效
   （行内元素上的 overflow 不生效，长副标题会溢出/乱折行）。 */
.row .txt .t {
    display: block; line-height: 1.35;
    font-size: clamp(13.5px, 4vw, 14.5px); font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .txt .s {
    display: block; margin-top: 2px; line-height: 1.4;
    font-size: clamp(11.5px, 3.4vw, 12.5px); color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .end { flex-shrink: 0; color: var(--ink-3); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.row .end svg { width: 17px; height: 17px; }
.row--tap { cursor: pointer; transition: background .18s; border-radius: var(--r-sm); }
.row--tap:active { background: rgba(18,20,26,.035); }

/* ==========================================================================
   徽标
   ========================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 100px;
    font-size: 11px; font-weight: 800; letter-spacing: .02em;
    white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
/* VIP 徽章＝金色（原来跟着品牌色渐变，与「金线黑金」的会员语言不一致）。
   全站会员标识都走这套：首页右上角、自动刷步的会员标、后台用户列表的会员标。 */
.badge--vip  {
    background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 52%, var(--gold-3) 100%);
    color: var(--gold-ink);
    box-shadow: 0 3px 10px -4px rgba(160,120,20,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
.badge--free { background: var(--neutral-fill); color: var(--ink-2); }
.badge--ok   { background: rgba(18,161,80,.13); color: var(--ok-ink); }
.badge--off  { background: var(--neutral-fill); color: var(--ink-3); }
.badge--warn { background: rgba(245,158,11,.14); color: var(--warn-ink); }
.badge--err  { background: rgba(239,68,68,.12); color: var(--err-ink); }

/* ==========================================================================
   统计小格
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.stat {
    padding: 13px 10px; border-radius: var(--r);
    background: rgba(255,255,255,.6);
    border: 1px solid var(--glass-line);
    text-align: center;
}
.stat .v {
    font-size: clamp(17px, 5.4vw, 20px); font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.stat .v.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .k { font-size: clamp(10.5px, 3.05vw, 11.5px); color: var(--ink-3); font-weight: 600; margin-top: 3px; }

/* ==========================================================================
   会员卡
   ========================================================================== */
.plan {
    position: relative; overflow: hidden;
    padding: 17px;
    border-radius: var(--r-lg);
    background: var(--glass-strong);
    border: 1.5px solid var(--line);
    cursor: pointer;
    transition: all .28s var(--ease);
}
.plan:active { transform: scale(.985); }
.plan.on {
    border-color: transparent;
    background: var(--glass-strong);
    box-shadow: 0 12px 30px -18px var(--brand-sh), inset 0 0 0 2px var(--c1);
}
.plan .tag-best {
    position: absolute; top: 0; right: 0;
    padding: 4px 11px 5px 13px;
    background: var(--grad-ui); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    border-bottom-left-radius: 13px;
}
.plan .nm { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.plan .ds { font-size: clamp(11px, 3.2vw, 12px); color: var(--ink-3); margin-top: 2px; font-weight: 600; }
.plan .pr {
    margin-top: 11px; display: flex; align-items: baseline; gap: 3px;
    font-variant-numeric: tabular-nums;
}
.plan .pr .cur { font-size: 14px; font-weight: 800; color: var(--accent-ink); }
.plan .pr .num {
    font-size: 27px; font-weight: 800; letter-spacing: -.03em;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.plan .pr .unit { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.plan .perk { margin-top: 11px; display: flex; flex-direction: column; gap: 5px; }
.plan .perk span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.plan .perk svg { width: 14px; height: 14px; color: var(--accent-ink); flex-shrink: 0; }
.plans { display: grid; gap: 11px; }

/* 会员中心套餐：改用两列网格。单列堆叠 3 档套餐会把页面拉得极长，
   而每档卡片本身信息量很小（名称 / 价格 / 单价）——两列正合适。
   窄卡片里同步收紧价格字号，避免 ¥199.00 在 360px 屏上溢出。 */
.plans--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.plans--grid .plan { padding: 13px 12px; }
.plans--grid .plan .nm { font-size: clamp(13px, 3.9vw, 14px); }
.plans--grid .plan .pr { margin-top: 7px; }
.plans--grid .plan .pr .cur { font-size: 12.5px; }
.plans--grid .plan .pr .num { font-size: 22px; letter-spacing: -.04em; }
.plans--grid .plan .pr .unit { font-size: 11px; }
.plans--grid .plan .ds { font-size: 11px; margin-top: 2px; }
.plans--grid .plan .small.muted { font-size: 11px; }
.plans--grid .plan .tag-best { padding: 3px 8px 4px 10px; font-size: 10px; border-bottom-left-radius: 11px; }

/* 当前会员横幅 —— 黑金质感。
   原本是与品牌同色的渐变，「会员身份」看不出档位感。
   改用深暖褐底 + 金色发丝线 + 金色徽章，金色只出现在线条与点缀上。
   用 inset 阴影画 1px 金线而不是 border，避免与 .vip-card.free 产生 2px 尺寸差。 */
.vip-card {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg);
    padding: 18px;
    background: linear-gradient(135deg, #1e1810 0%, #2b2214 46%, #3a2c15 100%);
    color: var(--gold-text);
    box-shadow:
        inset 0 0 0 1px var(--gold-line),
        0 22px 50px -24px rgba(120,85,10,.85),
        inset 0 1px 0 rgba(255,228,150,.16);
}
/* 顶部一道金色渐变发丝线 */
.vip-card::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240,205,110,.95), transparent);
}
.vip-card .lv { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 15px; font-weight: 800; }
/* 只给直接子元素定尺寸：徽章里的皇冠要保持 13px */
.vip-card .lv > svg { width: 19px; height: 19px; }
.vip-card .ex { font-size: clamp(11.5px, 3.4vw, 12.5px); color: rgba(247,238,214,.84); margin-top: 8px; font-weight: 600; }

.vip-card .bar {
    margin-top: 14px; height: 4px; border-radius: 4px;
    background: rgba(217,180,90,.2); overflow: hidden;
}
.vip-card .bar i {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--gold-3), var(--gold-1));
    transition: width .6s var(--ease);
}
/* 免费用户不是会员，不套金色：保持中性石板色 */
.vip-card.free {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #fff;
    box-shadow: 0 18px 40px -22px rgba(18,20,26,.8);
}
.vip-card.free::before { display: none; }
.vip-card.free .ex { color: rgba(255,255,255,.86); }

/* VIP 徽章：会员身份的统一标识（金色渐变底 + 皇冠） */
.vip-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px 3px 7px; border-radius: 100px;
    background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 52%, var(--gold-3) 100%);
    color: var(--gold-ink);
    font-size: 10.5px; font-weight: 900; letter-spacing: .1em; line-height: 1.5;
    box-shadow: 0 2px 9px -3px rgba(160,120,20,.75), inset 0 1px 0 rgba(255,255,255,.55);
}
.vip-badge svg { width: 13px; height: 13px; }

/* 客服号：按钮里作为次要信息，压低权重 */
.kf-num { opacity: .72; font-weight: 600; letter-spacing: .01em; }

/* 金色小徽章（文案内联用） */
.badge--gold { background: rgba(217,180,90,.18); color: var(--gold-1); }

/* ==========================================================================
   底部导航
   ========================================================================== */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 8px calc(var(--sal) + 12px) calc(var(--sab) + 8px) calc(var(--sar) + 12px);
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 -8px 30px -10px rgba(18,20,26,.12);
}
.tabbar .inner {
    max-width: 520px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}
.tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 2px 5px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink-3);
    font-size: 10.5px; font-weight: 700;
    transition: color .22s var(--ease);
    position: relative;
    min-height: 48px;
}
.tabbar a svg { width: 22px; height: 22px; transition: transform .3s var(--ease-bounce); }
.tabbar a.on { color: var(--accent-ink); }
.tabbar a.on svg { transform: translateY(-1px) scale(1.08); }
.tabbar a.on::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 20px; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--grad);
}
.tabbar a:active svg { transform: scale(.9); }

/* ==========================================================================
   弹窗（居中）
   ========================================================================== */
.mask {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: calc(var(--sat) + 18px) 18px calc(var(--sab) + 18px);
    background: rgba(14,15,20,.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    /* 关闭后必须连键盘也进不去：只靠 opacity 隐藏的话，Tab 仍能聚焦到看不见的弹窗按钮 */
    visibility: hidden;
    transition: opacity .26s var(--ease), visibility 0s linear .26s;
}
.mask.open {
    opacity: 1; pointer-events: auto; visibility: visible;
    transition: opacity .26s var(--ease), visibility 0s;
}
.dialog {
    width: 100%; max-width: 400px;
    max-height: 84vh; max-height: 84dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: var(--r-xl);
    box-shadow: 0 30px 70px -24px rgba(18,20,26,.55);
    padding: 22px;
    position: relative;
    transform: translateY(10px) scale(.97);
    /* 关闭比打开快：系统响应要利落（打开 .26s 缓出，关闭 .16s） */
    transition: transform .16s cubic-bezier(.23,1,.32,1);
}
.mask.open .dialog { transform: none; transition: transform .26s cubic-bezier(.23,1,.32,1); }
.dialog h3 {
    font-size: 17px; font-weight: 800; letter-spacing: -.01em;
    margin: 0 34px 12px 0;
}
.dialog .close {
    position: absolute; top: 13px; right: 13px;
    width: 34px; height: 34px; border-radius: 50%;
    border: none; background: rgba(18,20,26,.06); color: var(--ink-2);
    display: grid; place-items: center; cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
    z-index: 2;
}
.dialog .close:active { transform: scale(.9); }
.dialog .close svg { width: 17px; height: 17px; }
.dialog .body { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
.dialog .body ol, .dialog .body ul { padding-left: 19px; }
.dialog .body li { margin-bottom: 8px; }
.dialog .body li:last-child { margin-bottom: 0; }
.dialog .body strong { color: var(--ink); font-weight: 700; }
/* 公告正文：左对齐才好读（长段落居中会两端参差）;
   超长时正文自己滚，右上角关闭 X 与底部按钮都留在原地 */
.dialog .body.dlg-notice {
    text-align: left; white-space: pre-wrap;
    max-height: 46vh; max-height: 46dvh;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}
.dialog .actions { display: flex; gap: 9px; margin-top: 18px; }
.dialog .actions .btn { flex: 1; }

/* 结果图标 */
.dlg-icon {
    width: 62px; height: 62px; border-radius: 50%;
    margin: 2px auto 14px;
    display: grid; place-items: center;
    animation: iconIn .5s var(--ease-bounce);
}
.dlg-icon svg { width: 30px; height: 30px; }
.dlg-icon.ok   { background: rgba(18,161,80,.13); color: var(--ok); }
.dlg-icon.err  { background: rgba(239,68,68,.12); color: var(--err); }
.dlg-icon.warn { background: rgba(245,158,11,.14); color: var(--warn); }
.dlg-icon.grad { background: var(--grad); color: #fff; box-shadow: 0 12px 26px -12px var(--brand-sh-2); }
@keyframes iconIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dlg-result { text-align: center; }
.dlg-result .ttl { font-size: 17px; font-weight: 800; margin-bottom: 5px; }
.dlg-result .sub { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.dlg-result .hl {
    display: inline-flex; align-items: baseline; gap: 4px;
    margin: 12px 0 4px;
    font-size: 30px; font-weight: 800; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dlg-result .hl small { font-size: 12.5px; font-weight: 700; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }

/* ==========================================================================
   Toast
   ========================================================================== */
.toasts {
    position: fixed; z-index: 300;
    left: 50%; transform: translateX(-50%);
    top: calc(var(--sat) + 16px);
    width: max-content; max-width: calc(100vw - 32px);
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    border-radius: 100px;
    background: rgba(18,20,26,.9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    color: #fff; font-size: 13.5px; font-weight: 700;
    box-shadow: 0 12px 30px -10px rgba(18,20,26,.5);
    animation: toastIn .38s var(--ease-bounce);
}
.toast.out { animation: toastOut .28s var(--ease) forwards; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.ok  svg { color: #4ade80; }
.toast.err svg { color: #f87171; }
.toast.warn svg { color: #fbbf24; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* ==========================================================================
   空态 / 加载
   ========================================================================== */
.empty { text-align: center; padding: 34px 16px; }
.empty .art { opacity: .5; margin-bottom: 12px; }
.empty .art svg { width: 62px; height: 62px; color: var(--ink-3); }
.empty .t { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.empty .s { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

.skeleton {
    background: linear-gradient(90deg, rgba(18,20,26,.05) 25%, rgba(18,20,26,.09) 37%, rgba(18,20,26,.05) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ==========================================================================
   工具类
   ========================================================================== */
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.bold { font-weight: 800; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }

/* 键值行。此前全站只有 markup、一条 CSS 规则都没有，label 与 value 会挤在左侧
   同一行，长数值还会被挤到第二行。这里补成标准的「左标签 / 右数值」信息行，
   字号用 clamp 跟随屏幕，窄屏自动收小。 */
.kv {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 0;
}
.kv + .kv { border-top: 1px solid var(--line); }
.kv .k { flex-shrink: 0; color: var(--ink-2); font-size: clamp(12.5px, 3.5vw, 13.5px); }
.kv .v {
    min-width: 0; text-align: right; color: var(--ink);
    font-size: clamp(13px, 3.7vw, 14.5px); font-weight: 800;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.divider + .kv { padding-top: 3px; }
.kv + .btn { margin-top: 13px; }

/* 邀请码：做成可点击复制的 chip（app.js 已有 [data-copy] 全局委托） */
.code-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 9px;
    background: var(--brand-fill); border: 1px solid var(--brand-fill-3);
    color: var(--accent-ink); font: inherit; font-weight: 800; letter-spacing: .08em;
    -webkit-tap-highlight-color: transparent;
}
.code-chip svg { width: 13px; height: 13px; opacity: .75; }
.code-chip:active { transform: scale(.97); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* 进场动画 */
.rise { animation: rise .5s var(--ease) both; }
.rise:nth-child(2) { animation-delay: .05s; }
.rise:nth-child(3) { animation-delay: .1s; }
.rise:nth-child(4) { animation-delay: .15s; }
.rise:nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   响应式
   ========================================================================== */
/* 超小屏 */
/* 超小屏（≤359px）：两列套餐每列只剩约 139px，套餐描述必然折到第二行，
   这里改成单列；同时再收一档字号与内边距，保证不折行、不错乱。 */
@media (max-width: 359px) {
    .plans--grid { grid-template-columns: 1fr; }
    .card { padding: clamp(14px, 4.2vw, 18px); }
    .free-card { padding: 15px 14px; }
    .kv { padding: 10px 0; }
    .row { gap: 10px; }
    .free-card .fc-cta .btn { min-height: 44px; }
}
@media (max-width: 340px) {
    :root { --gutter: 12px; }
    .stats { grid-template-columns: 1fr 1fr; }
    .tabbar a { font-size: 9.5px; }
    .chip { min-width: 56px; font-size: 12px; }
    .btn { font-size: 14.5px; }
}
/* 小屏手机 */
@media (max-width: 380px) {
    .hero .big { font-size: 30px; }
    .stat .v { font-size: 17px; }
    .plan .pr .num { font-size: 24px; }
}
/* 大屏手机 / 平板竖屏 */
@media (min-width: 560px) {
    .shell { max-width: 560px; }
    .tabbar .inner { max-width: 560px; }
}
/* 横屏矮屏 */
@media (max-height: 560px) and (orientation: landscape) {
    .shell { padding-bottom: calc(var(--sab) + 20px); }
    .tabbar { position: static; margin-top: 16px; border-radius: var(--r-lg); }
    .dialog { max-height: 90dvh; }
}
/* 平板 / 桌面：双列 */
@media (min-width: 820px) {
    body { display: block; }
    .shell { max-width: 760px; }
    .tabbar .inner { max-width: 760px; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
    .grid-2 > .card + .card, .grid-2 > * + * { margin-top: 0; }
}
@media (min-width: 1100px) {
    .shell { max-width: 900px; }
    .tabbar .inner { max-width: 900px; }
}

/* 无动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 深色模式下的站名渐变。必须也包在 @supports 里：否则不支持 background-clip:text 的
   浏览器不会走上面那套 color:transparent，这条 background-image 就会被画成色块。 */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    @media (prefers-color-scheme: dark) {
        .topbar .brand > span:last-child {
            background-image:
                linear-gradient(100deg, transparent 42%, rgba(255,255,255,.92) 50%, transparent 58%),
                linear-gradient(100deg, #b3c7f5 0%, #d3e0fb 52%, #b3c7f5 100%);
        }
    }
}
/* 深色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        /* 原生控件/滚动条跟随深色 */
        color-scheme: dark;

        /* 深色模式只需要覆盖这一组：浅色底上的语义文字色 -> 深色底上可读的那一版（主题区会再覆盖）。
           组件里写死的颜色已全部收敛成变量，所以这里改一处、全站生效。 */
        --accent-ink: #b3c7f5;
        --ok-ink:     #6ee7b7;
        --warn-ink:   #fcd34d;
        --err-ink:    #fca5a5;

        /* 主卡面：浅色模式下是半透明白，深色模式下必须换成深色表面，
           否则 .free-card 这类卡片会保持白底，而 --ink 已变成近白色 —— 白底白字 */
        --neutral-fill: rgba(255, 255, 255, .1);
        --track:        rgba(255, 255, 255, .14);

        --ink: #f1f4fa;
        --ink-2: #aab7d0;
        --ink-3: #78849c;
        --line: rgba(255,255,255,.09);
        --line-2: rgba(255,255,255,.15);
        --glass: rgba(20,22,28,.55);
        --glass-strong: rgba(17,19,24,.74);
        --glass-line: rgba(255,255,255,.1);
        --sh-1: 0 2px 8px rgba(0,0,0,.3);
        --sh-2: 0 10px 30px -12px rgba(0,0,0,.55);
        --sh-in: inset 0 1px 0 rgba(255,255,255,.06);
    }
    body { background: var(--bg-page); }
    .bg { background: var(--aurora); }
    .input, .select, textarea.input { background: rgba(255,255,255,.05); color: var(--ink); }
    .input:focus { background: rgba(255,255,255,.08); }
    .chip { background: rgba(255,255,255,.06); }
    .stat, .plan { background: rgba(255,255,255,.05); }
    .plan.on { background: linear-gradient(135deg, var(--brand-fill-2), var(--brand-2-fill)); }
    .seg { background: rgba(255,255,255,.06); }
    .seg button.on { background: rgba(255,255,255,.13); color: var(--accent-ink); }
    .switch { background: rgba(255,255,255,.15); }
    .dialog { background: var(--surface-strong); border-color: rgba(255,255,255,.1); }
    .tabbar { background: rgba(18,20,26,.8); border-top-color: rgba(255,255,255,.07); }
    .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.1) 37%, rgba(255,255,255,.05) 63%); background-size: 400% 100%; }
    .empty .art svg { color: var(--ink-3); }
    .bg .grid { background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); }
}

/* ==========================================================================
   图标动画（刻意克制：全站仅保留 logo 走路这一处）
   每多一个 infinite 动画就多一份常驻 GPU 占用；提交按钮的旋转只在
   loading 态出现（见 .spinner），不常驻。
   ========================================================================== */
.ico { display: block; flex-shrink: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }

.ico-walk { animation: icoWalk 1.9s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes icoWalk {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-1.2px) rotate(-2deg); }
    75%      { transform: translateY(-1.2px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ico-walk { animation: none !important; }
}

/* ==========================================================================
   首页专用：免费权益卡 / 会员升级卡 / 对比表
   ========================================================================== */

/* 免费权益卡 —— 首页的第一视觉重心 */
/* 首屏免费卡（极简实底）
   早期版本一屏之内堆了六层装饰：毛玻璃、34px 圆角、顶部渐变条、渐变胶囊标签、
   渐变填充数字、渐变按钮。问题不在尺寸而在「不肯删」，越调越吵。
   现在只留 1px 边框 + 圆角，装饰全部去掉，注意力还给内容。 */
.free-card {
    border-radius: var(--r);
    padding: 17px 16px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-line);
}
.free-card .fc-head {
    display: flex; align-items: baseline; flex-wrap: wrap;
    justify-content: space-between; gap: 10px; row-gap: 2px;
}
.free-card .fc-ttl { font-size: clamp(14px, 4.1vw, 15px); font-weight: 800; color: var(--ink); }
.free-card .fc-num {
    font-size: 14px; font-weight: 800; color: var(--accent-ink);
    letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.free-card .fc-num i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.free-card .fc-facts { margin-top: 7px; font-size: 12px; color: var(--ink-3); }
.free-card .fc-sub { margin: 9px 0 15px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
/* 主视觉按钮压到 46px / 12px 圆角：与卡片的克制比例一致 */
.free-card .fc-cta .btn { min-height: 46px; border-radius: var(--r-sm); font-size: 14.5px; }

/* 会员升级卡 */
.up-card {
    position: relative; overflow: hidden;
    border-radius: var(--r-xl);
    padding: clamp(18px, 5.2vw, 24px);
    background: var(--grad-ui);
    color: #fff;
    box-shadow: 0 22px 48px -22px var(--brand-sh);
}
.up-card::before {
    content: ''; position: absolute; z-index: 0;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 66%);
    top: -90px; right: -70px;
}
.up-card > * { position: relative; z-index: 1; }
.up-card .up-ttl {
    display: flex; align-items: center; gap: 7px;
    font-size: 16.5px; font-weight: 800; letter-spacing: -.01em;
}
.up-card .up-ttl svg { width: 19px; height: 19px; }
.up-card .up-sub { font-size: 12.5px; opacity: .9; margin-top: 5px; }
.up-card .up-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px;
}
.up-card .up-grid .g {
    padding: 11px 12px; border-radius: var(--r-sm);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
}
.up-card .up-grid .g .k { font-size: 11px; opacity: .85; font-weight: 600; }
.up-card .up-grid .g .v { font-size: 13.5px; font-weight: 800; margin-top: 3px; }
.up-card .up-price {
    display: flex; align-items: baseline; gap: 6px; margin-top: 15px;
}
.up-card .up-price .from { font-size: 12px; opacity: .88; }
.up-card .up-price .n { font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.up-card .up-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; min-height: 48px; margin-top: 13px;
    border: none; border-radius: var(--r); cursor: pointer;
    background: #fff; color: var(--accent-ink);
    font-family: inherit; font-size: 15px; font-weight: 800;
    box-shadow: 0 10px 22px -10px rgba(0,0,0,.35);
    transition: transform var(--dur) var(--ease);
}
.up-card .up-btn:active { transform: scale(.975); }
.up-card .up-btn svg { width: 17px; height: 17px; }

/* 免费 / 会员 对比表 */
.cmp { display: flex; flex-direction: column; }
.cmp .hd, .cmp .rw {
    display: grid; grid-template-columns: 1fr 62px 62px;
    gap: 6px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid var(--line);
}
.cmp .hd { padding-top: 0; font-size: 11.5px; font-weight: 800; color: var(--ink-3); }
.cmp .hd .c2, .cmp .hd .c3 { text-align: center; }
.cmp .hd .c3 { color: var(--accent-ink); }
.cmp .rw:last-child { border-bottom: none; }
.cmp .rw .n { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.cmp .rw .c2, .cmp .rw .c3 {
    text-align: center; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 3px;
}
.cmp .rw .c2 { color: var(--ink-2); }
.cmp .rw .c3 { color: var(--accent-ink); }
.cmp .rw svg { width: 15px; height: 15px; }
.cmp .rw .yes { color: var(--ok); }
.cmp .rw .no  { color: var(--ink-3); }

/* 更省空间的区块间距（首页专用，减少滚动手感） */
.tight .card + .card { margin-top: 11px; }
.tight .free-card, .tight .up-card { margin-bottom: 11px; }
.tight .page-head { margin-bottom: 12px; }

/* ==========================================================================
   可折叠卡片 <details class="card">
   「我的 Zepp 账号」页把「绑定新账号」「绑定须知」收起来，缩短页面长度
   ========================================================================== */
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
.dsum { display: flex; align-items: center; gap: 8px; }
.dsum .bar {
    width: 3.5px; height: 15px; border-radius: 3px;
    background: var(--grad); flex-shrink: 0;
}
.dsum .dsum-t { font-size: clamp(13px, 4vw, 14px); font-weight: 800; color: var(--ink); }
.dsum .more { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.dsum .chev {
    width: 8px; height: 8px; flex-shrink: 0; margin-right: 3px;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform .24s var(--ease);
}
details.card[open] > summary .chev { transform: rotate(-135deg); }
.dsum:active { opacity: .7; }

/* ==========================================================================
   未登录首页底部：访问量页脚
   ==========================================================================
   两块都刻意做轻 —— 页面主角是上面那张「免费也能刷步数」大卡，
   底部只用胶囊链和一行小字收尾，不跟主视觉抢注意力。 */
/* 友链小卡片：一行两个，只显示名称、不显示网址。
   底色用品牌浅蓝渐变（--grad-soft）而不是中性灰 —— 灰色在一屏蓝色里显脏。
   图标是「名称首字 + 半透明白圆片」纯 CSS 画的，不去请求对方站点 favicon：
   那样会把访客 IP 暴露给友链站、首次加载还常 404。
   高度：图标 28 + 内边距 9×2 = 46px —— 刻意不再往下压，
   44px 是可点区域的下限，再矮手指点起来就容易误触了。 */
/* 右上角「合作」按钮：小号胶囊
   （原先直接套 .btn--sm 有 40px 高，放在卡片标题行里太重，压过了标题）*/
.hits { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--ink-3); }
.hits b { color: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   免费 vs 会员 对比表（会员页）
   ==========================================================================
   这里曾经给会员整列铺了一层 --grad-soft 浅青底 + 两侧细线 + 上下圆角，
   结果在窄屏上把这一列框成了一个悬浮的青色方块，像误加的装饰，已移除。
   区分交回安静的三件事：表头的金色会员徽章、会员列的青色加粗数字、
   以及每行成对的 ✓ / —。 */
.cmp .hd .badge { font-size: 10.5px; padding: 2px 8px; }

/* 表下收尾：一句话说清会员到底多了什么 */
.cmp-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }

/* ==========================================================================
   套餐卡：天卡 / 周卡 / 月卡 / 永久卡
   ==========================================================================
   四张卡原来只有文字，长得一模一样，只能靠「最划算」一个角标区分。
   现在做两件事：① 每档一个裸图标（不做底色块，避免又变成小方块）；
   ② 永久卡给旗舰待遇 —— 直接沿用站点既有的黑金语言（和 .vip-card 同一套
   深暖褐渐变 + 金色发丝描边），金色只落在描边、名称与价格上。
   选中态也换掉了：原来整块铺一层青色渐变，边界糊；改成 2px 描边更清楚。 */
.plan .ttl { display: flex; align-items: center; gap: 7px; }
.plan .ic { color: var(--accent-ink); flex-shrink: 0; display: inline-flex; }
.plan .ic svg { width: 17px; height: 17px; }
.plan .pd { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.plan .pd .badge { font-size: 10px; padding: 2px 7px; }

/* 永久卡原本是整块深褐底 + 通体暖白字，在另外三张浅卡旁边视觉重量压得太狠。
   改成香槟金淡底：金色只落在描边、图标和价格上，名称与正文回到站点常规墨色 ——
   这样它仍然是四张里最"贵"的一张，但不再是一块黑。 */
.plan--forever {
    background: var(--gold-soft);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--gold-line), 0 14px 30px -22px rgba(120,85,10,.5);
}
.plan--forever.on {
    background: var(--gold-soft);
    box-shadow: inset 0 0 0 2px var(--gold-2), 0 16px 34px -22px rgba(120,85,10,.55);
}
.plan--forever .ic, .plan--forever .pr .cur { color: var(--gold-3); }
.plan--forever .pr .num {
    background: linear-gradient(135deg, var(--gold-3) 0%, #a07c22 52%, #7a5c14 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   QQ 头像（用 QQ 邮箱注册的账号，自动取腾讯官方头像）
   ==========================================================================
   两处用同一个头像地址：顶部卡片的圆形头像位，以及「后台」按钮里的小头像。
   形状跟着容器走：.hero .avatar 本身是圆角方形（54×54 + 18px 圆角），
   所以图片 inherit 它的圆角而不是自作主张裁成圆 —— 写 50% 会和底托打架。 */
.hero .avatar .av-img {
    width: 100%; height: 100%; display: block;
    border-radius: inherit; object-fit: cover;
}
.btn .ico-av {
    width: 20px; height: 20px; display: inline-block; flex-shrink: 0;
    border-radius: 7px; object-fit: cover; vertical-align: -4px;
}

/* ── 「绑定须知」图文教程 ──────────────────────────────
   图贴在对应的那一步里，是这一段唯一的主角：所以不加底色块、不加阴影，
   只用一根发丝线把截图和卡片底分开；颜色一律走主题变量。 */
.tut { margin: 10px 0 2px; }
.tut-shot {
    display: block; max-width: 420px;
    border: 1px solid var(--line); border-radius: 10px;
    overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.tut-shot:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.tut-shot img { display: block; width: 100%; height: auto; }
.tut figcaption { max-width: 420px; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }


/* ---------- 搜索框 ---------- */
.nav-search {
    display: flex; align-items: center; gap: 9px;
    height: 46px; padding: 0 13px; margin-bottom: 14px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
    backdrop-filter: blur(var(--blur)) saturate(160%);
    border: 1px solid var(--glass-line);
    border-radius: 15px;
    box-shadow: var(--sh-1), var(--sh-in);
}
.nav-search > svg { color: var(--ink-3); flex-shrink: 0; }
.nav-search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 16px;   /* 16px 防 iOS 聚焦缩放 */
    color: var(--ink);
    -webkit-appearance: none; appearance: none;
}
.nav-search input::placeholder { color: var(--ink-3); }
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-q-clear {
    flex-shrink: 0; width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: var(--neutral-fill); color: var(--ink-3);
}
.nav-q-clear:active { transform: scale(.9); }

/* ---------- 收录统计行 ---------- */
.nav-counts {
    margin: 12px 2px 11px;
    font-size: 12px; color: var(--ink-3);
}
.nav-counts b {
    color: var(--accent-ink); font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---------- 站点卡片网格 ---------- */
.site-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.site-card {
    position: relative;
    display: flex; gap: 10px; min-height: 100px; padding: 12px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-line);
    border-radius: var(--r);
    box-shadow: var(--sh-1), var(--sh-in);
    text-decoration: none; color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur) var(--ease);
}
.site-card:active { transform: scale(.985); }
.sc-mk {
    /* flex: 0 0 40px —— 写死基准尺寸，任何情况下都不参与伸缩。
       原来只写 flex-shrink:0 + width，遇到「名字很长 + 窄屏两列」时仍可能被挤到看不见；
       固定基准比"禁止收缩"更硬。 */
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px;
    display: grid; place-items: center;
    color: #fff; font-size: 17px; font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.sc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
/* 上传了图标的卡片：图自己带底色，渐变和白字都让位 */
.sc-mk--img { background: none; }
.sc-mk img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 投放表单：图标选择 ----------
   预览方块刻意用与卡片图标完全相同的尺寸和圆角（40px / 13px），
   里面默认显示「名称首字」—— 也就是不传图标时卡片长什么样，选之前就看得见。
   配色用 --grad-ui（白字对比度已验证 ≥4.5:1），不用装饰性的 --c1/--c2。 */
.up { display: flex; align-items: center; gap: 11px; }
.up-pv {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px;
    display: grid; place-items: center; overflow: hidden;
    background: var(--grad-ui); color: #fff;
    font-size: 17px; font-weight: 800; line-height: 1;
    box-shadow: 0 6px 14px -10px var(--brand-sh);
}
.up-pv img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 还没输入名称时的占位：一个上传图形，不编造字母（会被误读成真实值） */
.up-pv #fIconIni.is-glyph { display: grid; place-items: center; }
.up-pv #fIconIni.is-glyph svg { display: block; opacity: .92; }
.up-act { display: flex; align-items: center; gap: 8px; }
.up-pick { position: relative; cursor: pointer; }
.up-pick:focus-within { outline: 2px solid var(--brand-line); outline-offset: 2px; }
/* 真正的 file input 铺满按钮且透明：点哪都能唤起选择器，键盘也能 Tab 到它 */
.up-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.up-del {
    padding: 4px 2px; border: 0; background: none; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--ink-3);
}
.up-del:hover { color: var(--accent-ink); }
.up-hint { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.up-hint.is-bad { color: var(--err); }

.sc-n {
    min-width: 0;
    font-size: 13.5px; font-weight: 800; line-height: 1.35; color: var(--ink);
}
/* 名字独占整行、最多两行。
   名称上限是 20 字，两行必放得下 —— 所以这里**不做单行省略号**：
   宁可卡片长高一点，也不能让用户看不出这是哪个站。
   置顶标记已经挪走（见 .site-card.is-top 与 .sc-top），这一行不再有争宽度的东西。 */
.sc-n-t {
    /* 永远一行：不换行 + 单行省略号兜底。
       字号先按屏宽给个基准（窄屏更小），再由 app.js 的 fitSiteNames() 按实际宽度精调 ——
       CSS 单独做不到「按文字长度自适应」，所以两级配合：
       clamp() 负责绝大多数情况（不动 JS 也不会破），JS 只处理少数超宽的名字。 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: clamp(11px, 3.6vw, 13.5px);
}

/* 简介与点击次数：卡片里唯一的两行小字。
   这两条曾被误删过（删热门块时删除范围算错，连带吃掉了它们），
   后果是 font-size 回落到正文字号 15.5px，整页看着"字突然变得很大"。
   字体类规则一旦消失不会有任何报错，所以它们必须留在卡片区块里，别挪远。

   数值来源：删除前从线上抓到的原始声明，只恢复有据可查的部分，
   没有证据的属性一律不加（修故障时不该顺手改设计）。 */
.sc-d {
    margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
.sc-meta {
    font-size: 10.5px; font-weight: 600; color: var(--ink-3);
}

/* 点击卡片时从数字旁浮起的「+1」。
   绝对定位挂在卡片上（.site-card 本身就是 position: relative），
   不进文档流 —— 所以它出现和消失都不会把简介、名称挤动哪怕一像素。
   动画本身在 app.js 里用 WAAPI 播（只动 transform / opacity，走合成层）。
   这里的样式只管"长什么样"：一枚小圆角标签，底色用卡片同款玻璃色，
   文字取品牌强调色，压在简介文字上面（z-index 高于卡片内容）。 */
.click-plus {
    position: absolute; z-index: 3; pointer-events: none;
    padding: 1px 6px; border-radius: 999px;
    font-size: 11px; font-weight: 800; line-height: 1.5;
    color: var(--accent-ink);
    background: var(--glass-strong);
    box-shadow: 0 0 0 1px var(--glass-line), 0 6px 14px -8px var(--brand-sh);
}

/* 系统开了"减少动态效果"时，app.js 根本不会创建这个节点；
   这里再兜一层，防止别处（例如以后有人手写一个）让它动起来。 */
@media (prefers-reduced-motion: reduce) {
    .click-plus { display: none; }
}

/* 搜索无结果时的一行提示（由 JS 用 hidden 属性控制显隐）。
   这条原始数值没能找回（当时没抓过它），先按与其它次要文字一致的规格给：
   比正文小、比墨色浅。感觉不对随时调。 */
.empty-hit {
    margin: 16px 0 6px; text-align: center;
    font-size: 12.5px; color: var(--ink-3);
}

/* ---------- 置顶：用「卡片自己」表达，不占名字的宽度 ----------
   一条左侧竖条（沿用品牌渐变）+ 一点品牌底色，语义标签放到最下面那行。
   之前是一个挨着名字的"置顶"徽标，长名字一出现就得二选一：要么徽标不见、
   要么名字被截断。现在两者各归各位。 */
/* 置顶卡片：只留一层很浅的底色（不占空间），左边那根竖条已经去掉
     注意这层底色与右上角的「顶」角标是两件事：底色永远跟着 top 字段走，
     而角标在"又置顶又热门"时会让位给「热」（见 views/home.php）。 */
.site-card.is-top {
    background: linear-gradient(135deg, var(--brand-fill), transparent 62%), var(--glass-strong);
}

/* 图标上的角标（置顶 / 热门）—— 两者**共占右上角**，同一时刻只会出现一个。
   三个共同点：
     ① 绝对定位 —— 不进文档流，所以名字/简介/点击次数一格都不让；
     ② box-shadow 用卡片底色描一圈，视觉上把它从图标里"抬"出来，压住底下的图；
     ③ z-index 高于图标本身（实心图标是一张 img，不抬就看不见角标）。
   位置共用的理由：热门比置顶高一级，同时命中时只显示热门（见 views/home.php），
   所以不再需要靠"分居两角"避让 —— 而且共占一个位置之后，
   「这个站的最高标记」永远出现在同一个地方，扫视列表时不用来回找。
   top/right 取 -4px 让角标压在图标边角上；卡片没有 overflow:hidden，不会被裁掉。 */
.sc-mk { position: relative; }

.sc-mk > .sc-top,
.sc-mk > .sc-hot {
    position: absolute; top: -4px; right: -4px; z-index: 2;
    width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 9px; font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 2px var(--glass-strong);
}

/* 置顶：金黄。字用深棕不用白 —— 金黄底上压白字对比度只有 1.7:1，9px 根本读不出来，
   深棕是 7.8:1。 */
.sc-mk > .sc-top {
    background: linear-gradient(135deg, #ffd977, #e8a417);
    color: #5a3a00;
}

/* 热门（点击量前两名）：暖红。
   白字压红底：亮端 #f2603a 只有 3.2:1，9px 小字读不出来（要求 4.5:1）。
   所以红色整体压深一档到 #cf3f16 → #8f1700（4.8:1 / 9.2:1），
   视觉上依然是"热"的橙红，跟金黄的「顶」也不会看混。 */
.sc-mk > .sc-hot {
    background: linear-gradient(135deg, #cf3f16, #8f1700);
    color: #fff;
}

/* ---------- 首页投放入口 ---------- */

/* ---------- 套餐选择 ---------- */
.plan-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plan-opt {
    display: flex; flex-direction: column; gap: 2px;
    padding: 13px;
    background: var(--glass);
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.plan-opt:active { transform: scale(.985); }
.plan-opt.on {
    border-color: var(--accent-ink);
    background: var(--grad-soft);
    box-shadow: 0 10px 24px -16px var(--brand-sh-2);
}
.po-name { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.po-days { font-size: 11.5px; color: var(--ink-3); }
.po-price {
    margin-top: 5px; font-size: 17px; font-weight: 800; color: var(--accent-ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
@media (max-width: 339px) {
    .plan-pick { grid-template-columns: 1fr; }
}

/* ---------- 订单结果 ---------- */
.order-hero { text-align: center; }
.oh-icon {
    width: 64px; height: 64px; margin: 2px auto 12px;
    border-radius: 50%; display: grid; place-items: center;
}
.oh-icon.ok   { background: rgba(18,161,80,.14); color: var(--ok-ink); }
.oh-icon.wait { background: rgba(245,158,11,.14); color: var(--warn-ink); }
.oh-icon.off  { background: var(--neutral-fill); color: var(--ink-3); }
.oh-t { font-size: 17px; font-weight: 800; color: var(--ink); }
.oh-s { margin-top: 5px; font-size: 12.5px; line-height: 1.65; color: var(--ink-3); }
.oh-money {
    margin-top: 10px; font-size: 29px; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* ---------- 我的投放条目 ---------- */
.my-item {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
}
.my-item:last-child { border-bottom: none; }
.my-item:first-child { padding-top: 4px; }
/* 上传过图标的条目：图自己带底色 */
.my-mk--img { background: none; overflow: hidden; }
.my-mk--img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.my-mk {
    flex: 0 0 auto; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center;
    color: #fff; font-size: 17px; font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.my-body { flex: 1; min-width: 0; }
.my-body .t {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    font-size: 14px; font-weight: 700; color: var(--ink);
}
.my-body .t > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-body .s {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis;
}
.my-act { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.my-act .btn { min-height: 34px; font-size: 12.5px; padding: 0 12px; }

/* ---------- 杂项 ---------- */
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.kv .v[data-copy] { cursor: pointer; border-bottom: 1px dashed var(--line-2); }
.kv .v[data-copy]:active { color: var(--accent-ink); }

/* 深色模式：只为「令牌之外」的两处微调 */
@media (prefers-color-scheme: dark) {
    .nav-search { background: var(--glass-strong); }
    .plan-opt { background: rgba(255,255,255,.05); }
    .plan-opt.on { background: linear-gradient(135deg, var(--brand-fill-3), var(--brand-2-fill)); }
}

/* BEGIN-THEMES */
/* ==========================================================================
   主题区（由 tools/make-themes.py 生成，不要手改这一段）
   每套材质各自定义品牌渐变、中性色温度、页面底色和背景光晕；
   后台「设置 → 站点配色」切换 data-theme，这里跟着生效。
   ========================================================================== */
:root, :root[data-theme="teal"] {
        --c1: #14b8a6;
        --c2: #10b981;
        --c3: #0ea5e9;
        --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
        --grad-soft: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(14,165,233,0.12));
        /* 实色主按钮的品牌底：与 --grad-ui 同一标准（白字 ≥4.5）。
           不能拿 --c1 顶 —— 原始青绿的 #14b8a6 白字只有 2.49。 */
        --brand-solid: #1f8376;
        --grad-ui: linear-gradient(135deg, #1f8376 0%, #228190 58%, #287da8 100%);
        --accent-ink: #0f766e;
        --accent-bar: var(--grad);
        --ink:   #0b1a20;
        --ink-2: #4a5f68;
        --ink-3: #6f8a92;
        --line:  rgba(11, 26, 32, .08);
        --line-2:rgba(11, 26, 32, .14);
        --bg-page: #eaf4f2;
        --hero-glow: rgba(255,255,255,.3);
        --brand-fill:   rgba(20,184,166,0.12);
        --brand-fill-2: rgba(20,184,166,0.18);
        --brand-fill-3: rgba(20,184,166,0.22);
        --brand-line:   rgba(20,184,166,0.4);
        --brand-sh:     rgba(20,184,166,0.7);
        --brand-sh-2:   rgba(20,184,166,0.88);
        --brand-2-fill: rgba(14,165,233,0.13);
        --tint-soft: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(14,165,233,0.13));
        --surface-strong: rgba(255,255,255,.96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(20,184,166,.16) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(14,165,233,.14) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #eef7f5 0%, #eaf4f2 44%, #e3f0ee 100%);
    }
:root[data-theme="jade"] {
        --c1: #1d7a6c;
        --c2: #2d8b7c;
        --c3: #55a898;
        --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
        --grad-soft: linear-gradient(135deg, rgba(29,122,108,0.12), rgba(85,168,152,0.12));
        /* 实色主按钮的品牌底：与 --grad-ui 同一标准（白字 ≥4.5）。
           不能拿 --c1 顶 —— 原始青绿的 #14b8a6 白字只有 2.49。 */
        --brand-solid: #146b5e;
        --grad-ui: linear-gradient(135deg, #146b5e 0%, #1d7a6c 58%, #248275 100%);
        --accent-ink: #14695c;
        --accent-bar: var(--grad);
        --ink:   #16211e;
        --ink-2: #4d5c57;
        --ink-3: #85938d;
        --line:  rgba(22,33,30,.08);
        --line-2:rgba(22,33,30,.14);
        --bg-page: #f8ece0;
        --hero-glow: rgba(247,205,163,.34);
        --brand-fill:   rgba(29,122,108,0.12);
        --brand-fill-2: rgba(29,122,108,0.18);
        --brand-fill-3: rgba(29,122,108,0.22);
        --brand-line:   rgba(29,122,108,0.4);
        --brand-sh:     rgba(29,122,108,0.7);
        --brand-sh-2:   rgba(29,122,108,0.88);
        --brand-2-fill: rgba(85,168,152,0.13);
        --tint-soft: linear-gradient(135deg, rgba(29,122,108,0.22), rgba(85,168,152,0.13));
        --surface-strong: rgba(255,255,255,.96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(29,122,108,.10) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(233,178,124,.17) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #fdf6ee 0%, #f8ece0 44%, #f2e2d2 100%);
    }
:root[data-theme="ink"] {
        --c1: #23262e;
        --c2: #343943;
        --c3: #59616f;
        --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
        --grad-soft: linear-gradient(135deg, rgba(35,38,46,0.12), rgba(89,97,111,0.12));
        /* 实色主按钮的品牌底：与 --grad-ui 同一标准（白字 ≥4.5）。
           不能拿 --c1 顶 —— 原始青绿的 #14b8a6 白字只有 2.49。 */
        --brand-solid: #1b1e24;
        --grad-ui: linear-gradient(135deg, #1b1e24 0%, #23262e 58%, #2a2e37 100%);
        --accent-ink: #b53d2c;
        --accent-bar: #b53d2c;
        --ink:   #14161b;
        --ink-2: #4e535d;
        --ink-3: #868c98;
        --line:  rgba(20,22,27,.08);
        --line-2:rgba(20,22,27,.14);
        --bg-page: #f1f2f5;
        --hero-glow: rgba(255,255,255,.3);
        --brand-fill:   rgba(35,38,46,0.12);
        --brand-fill-2: rgba(35,38,46,0.18);
        --brand-fill-3: rgba(35,38,46,0.22);
        --brand-line:   rgba(35,38,46,0.4);
        --brand-sh:     rgba(35,38,46,0.7);
        --brand-sh-2:   rgba(35,38,46,0.88);
        --brand-2-fill: rgba(89,97,111,0.13);
        --tint-soft: linear-gradient(135deg, rgba(35,38,46,0.22), rgba(89,97,111,0.13));
        --surface-strong: rgba(255,255,255,.96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(35,38,46,.10) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(181,61,44,.055) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #f5f6f8 0%, #f1f2f5 44%, #e9ebef 100%);
    }
:root[data-theme="copper"] {
        --c1: #8a5a2b;
        --c2: #9d6836;
        --c3: #c19465;
        --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
        --grad-soft: linear-gradient(135deg, rgba(138,90,43,0.12), rgba(193,148,101,0.12));
        /* 实色主按钮的品牌底：与 --grad-ui 同一标准（白字 ≥4.5）。
           不能拿 --c1 顶 —— 原始青绿的 #14b8a6 白字只有 2.49。 */
        --brand-solid: #7a4c22;
        --grad-ui: linear-gradient(135deg, #7a4c22 0%, #8a5a2b 58%, #96622f 100%);
        --accent-ink: #8a5122;
        --accent-bar: var(--grad);
        --ink:   #1b1815;
        --ink-2: #574f45;
        --ink-3: #8d8577;
        --line:  rgba(27,24,21,.08);
        --line-2:rgba(27,24,21,.14);
        --bg-page: #f3f1ed;
        --hero-glow: rgba(255,255,255,.3);
        --brand-fill:   rgba(138,90,43,0.12);
        --brand-fill-2: rgba(138,90,43,0.18);
        --brand-fill-3: rgba(138,90,43,0.22);
        --brand-line:   rgba(138,90,43,0.4);
        --brand-sh:     rgba(138,90,43,0.7);
        --brand-sh-2:   rgba(138,90,43,0.88);
        --brand-2-fill: rgba(193,148,101,0.13);
        --tint-soft: linear-gradient(135deg, rgba(138,90,43,0.22), rgba(193,148,101,0.13));
        --surface-strong: rgba(255,255,255,.96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(138,90,43,.10) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(193,148,101,.10) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #f7f4ef 0%, #f3f1ed 44%, #ece7df 100%);
    }
:root[data-theme="plum"] {
        --c1: #8a3b66;
        --c2: #9c4b77;
        --c3: #bd7fa4;
        --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
        --grad-soft: linear-gradient(135deg, rgba(138,59,102,0.12), rgba(189,127,164,0.12));
        /* 实色主按钮的品牌底：与 --grad-ui 同一标准（白字 ≥4.5）。
           不能拿 --c1 顶 —— 原始青绿的 #14b8a6 白字只有 2.49。 */
        --brand-solid: #7a3159;
        --grad-ui: linear-gradient(135deg, #7a3159 0%, #8a3b66 58%, #96436f 100%);
        --accent-ink: #86395f;
        --accent-bar: var(--grad);
        --ink:   #1b1620;
        --ink-2: #564f5c;
        --ink-3: #8c8594;
        --line:  rgba(27,22,32,.08);
        --line-2:rgba(27,22,32,.14);
        --bg-page: #f3f1f5;
        --hero-glow: rgba(255,255,255,.3);
        --brand-fill:   rgba(138,59,102,0.12);
        --brand-fill-2: rgba(138,59,102,0.18);
        --brand-fill-3: rgba(138,59,102,0.22);
        --brand-line:   rgba(138,59,102,0.4);
        --brand-sh:     rgba(138,59,102,0.7);
        --brand-sh-2:   rgba(138,59,102,0.88);
        --brand-2-fill: rgba(189,127,164,0.13);
        --tint-soft: linear-gradient(135deg, rgba(138,59,102,0.22), rgba(189,127,164,0.13));
        --surface-strong: rgba(255,255,255,.96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(138,59,102,.10) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(189,127,164,.10) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #f7f3f7 0%, #f3f1f5 44%, #ece6ee 100%);
    }
:root[data-theme="blue"] {
        --c1: #4b6adb;
        --c2: #6285e2;
        --c3: #86a4ea;
        --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
        --grad-soft: linear-gradient(135deg, rgba(75,106,219,0.12), rgba(134,164,234,0.12));
        /* 实色主按钮的品牌底：与 --grad-ui 同一标准（白字 ≥4.5）。
           不能拿 --c1 顶 —— 原始青绿的 #14b8a6 白字只有 2.49。 */
        --brand-solid: #3f63cf;
        --grad-ui: linear-gradient(135deg, #3f63cf 0%, #4b6adb 58%, #5170d8 100%);
        --accent-ink: #2c5ec9;
        --accent-bar: var(--grad);
        --ink:   #0e1526;
        --ink-2: #4b5876;
        --ink-3: #8994ad;
        --line:  rgba(14,21,38,.08);
        --line-2:rgba(14,21,38,.14);
        --bg-page: #f1f4fa;
        --hero-glow: rgba(255,255,255,.3);
        --brand-fill:   rgba(75,106,219,0.12);
        --brand-fill-2: rgba(75,106,219,0.18);
        --brand-fill-3: rgba(75,106,219,0.22);
        --brand-line:   rgba(75,106,219,0.4);
        --brand-sh:     rgba(75,106,219,0.7);
        --brand-sh-2:   rgba(75,106,219,0.88);
        --brand-2-fill: rgba(134,164,234,0.13);
        --tint-soft: linear-gradient(135deg, rgba(75,106,219,0.22), rgba(134,164,234,0.13));
        --surface-strong: rgba(255,255,255,.96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(75,106,219,.17) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(134,164,234,.13) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #f3f6fc 0%, #f1f4fa 44%, #eaeff8 100%);
    }

@media (prefers-color-scheme: dark) {
:root, :root[data-theme="teal"] {
        --accent-ink: #5eead4;
        --ink:   #eef7f5;
        --ink-2: #a8bcc2;
        --ink-3: #6f858c;
        --line:  rgba(255,255,255,.09);
        --line-2:rgba(255,255,255,.15);
        --glass: rgba(22, 38, 43, .55);
        --glass-strong: rgba(20, 35, 40, .72);
        --bg-page: #0a161a;
        --brand-fill:   rgba(20,184,166,0.18);
        --brand-fill-2: rgba(20,184,166,0.26);
        --brand-fill-3: rgba(20,184,166,0.32);
        --brand-line:   rgba(20,184,166,0.5);
        --brand-sh:     rgba(20,184,166,0.6);
        --brand-sh-2:   rgba(20,184,166,0.8);
        --brand-2-fill: rgba(14,165,233,0.18);
        --tint-soft: linear-gradient(135deg, rgba(20,184,166,0.26), rgba(14,165,233,0.18));
        --surface-strong: rgba(20, 35, 40, .96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(20,184,166,.22) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(14,165,233,.12) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #11262b 0%, #0a161a 45%, #0e1e23 100%);
    }
:root[data-theme="jade"] {
        --accent-ink: #86d3c3;
        --ink:   #eef3f0;
        --ink-2: #a3b0ab;
        --ink-3: #76837e;
        --line:  rgba(255,255,255,.09);
        --line-2:rgba(255,255,255,.15);
        --glass: rgba(15, 25, 23, .55);
        --glass-strong: rgba(13, 22, 20, .74);
        --bg-page: #0b1311;
        --brand-fill:   rgba(29,122,108,0.18);
        --brand-fill-2: rgba(29,122,108,0.26);
        --brand-fill-3: rgba(29,122,108,0.32);
        --brand-line:   rgba(29,122,108,0.5);
        --brand-sh:     rgba(29,122,108,0.6);
        --brand-sh-2:   rgba(29,122,108,0.8);
        --brand-2-fill: rgba(85,168,152,0.18);
        --tint-soft: linear-gradient(135deg, rgba(29,122,108,0.26), rgba(85,168,152,0.18));
        --surface-strong: rgba(13, 22, 20, .96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(29,122,108,.22) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(233,178,124,.12) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #12241f 0%, #0b1311 45%, #101c19 100%);
    }
:root[data-theme="ink"] {
        --accent-ink: #eaa79a;
        --ink:   #f2f3f5;
        --ink-2: #a8adb8;
        --ink-3: #7b818c;
        --line:  rgba(255,255,255,.09);
        --line-2:rgba(255,255,255,.15);
        --glass: rgba(20, 22, 28, .55);
        --glass-strong: rgba(17, 19, 24, .74);
        --bg-page: #0b0d11;
        --brand-fill:   rgba(35,38,46,0.18);
        --brand-fill-2: rgba(35,38,46,0.26);
        --brand-fill-3: rgba(35,38,46,0.32);
        --brand-line:   rgba(35,38,46,0.5);
        --brand-sh:     rgba(35,38,46,0.6);
        --brand-sh-2:   rgba(35,38,46,0.8);
        --brand-2-fill: rgba(89,97,111,0.18);
        --tint-soft: linear-gradient(135deg, rgba(35,38,46,0.26), rgba(89,97,111,0.18));
        --surface-strong: rgba(18, 20, 25, .96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(255,255,255,.045) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(181,61,44,.07) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #1b1e24 0%, #0b0d11 45%, #14161c 100%);
    }
:root[data-theme="copper"] {
        --accent-ink: #e6bd8b;
        --ink:   #f4f1ec;
        --ink-2: #b3a99a;
        --ink-3: #857c6e;
        --line:  rgba(255,255,255,.09);
        --line-2:rgba(255,255,255,.15);
        --glass: rgba(30, 26, 22, .55);
        --glass-strong: rgba(26, 22, 18, .74);
        --bg-page: #100e0b;
        --brand-fill:   rgba(138,90,43,0.18);
        --brand-fill-2: rgba(138,90,43,0.26);
        --brand-fill-3: rgba(138,90,43,0.32);
        --brand-line:   rgba(138,90,43,0.5);
        --brand-sh:     rgba(138,90,43,0.6);
        --brand-sh-2:   rgba(138,90,43,0.8);
        --brand-2-fill: rgba(193,148,101,0.18);
        --tint-soft: linear-gradient(135deg, rgba(138,90,43,0.26), rgba(193,148,101,0.18));
        --surface-strong: rgba(28, 24, 20, .96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(138,90,43,.20) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(193,148,101,.10) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #2a2015 0%, #100e0b 45%, #1b1611 100%);
    }
:root[data-theme="plum"] {
        --accent-ink: #e8a9c6;
        --ink:   #f4f1f5;
        --ink-2: #b0a7b5;
        --ink-3: #837b8b;
        --line:  rgba(255,255,255,.09);
        --line-2:rgba(255,255,255,.15);
        --glass: rgba(28, 22, 32, .55);
        --glass-strong: rgba(24, 19, 28, .74);
        --bg-page: #0f0b12;
        --brand-fill:   rgba(138,59,102,0.18);
        --brand-fill-2: rgba(138,59,102,0.26);
        --brand-fill-3: rgba(138,59,102,0.32);
        --brand-line:   rgba(138,59,102,0.5);
        --brand-sh:     rgba(138,59,102,0.6);
        --brand-sh-2:   rgba(138,59,102,0.8);
        --brand-2-fill: rgba(189,127,164,0.18);
        --tint-soft: linear-gradient(135deg, rgba(138,59,102,0.26), rgba(189,127,164,0.18));
        --surface-strong: rgba(26, 21, 30, .96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(138,59,102,.20) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(189,127,164,.10) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #26162b 0%, #0f0b12 45%, #1b1220 100%);
    }
:root[data-theme="blue"] {
        --accent-ink: #b3c7f5;
        --ink:   #f1f4fa;
        --ink-2: #aab7d0;
        --ink-3: #78849c;
        --line:  rgba(255,255,255,.09);
        --line-2:rgba(255,255,255,.15);
        --glass: rgba(20, 26, 44, .55);
        --glass-strong: rgba(17, 23, 40, .74);
        --bg-page: #0a0f1c;
        --brand-fill:   rgba(75,106,219,0.18);
        --brand-fill-2: rgba(75,106,219,0.26);
        --brand-fill-3: rgba(75,106,219,0.32);
        --brand-line:   rgba(75,106,219,0.5);
        --brand-sh:     rgba(75,106,219,0.6);
        --brand-sh-2:   rgba(75,106,219,0.8);
        --brand-2-fill: rgba(134,164,234,0.18);
        --tint-soft: linear-gradient(135deg, rgba(75,106,219,0.26), rgba(134,164,234,0.18));
        --surface-strong: rgba(18, 25, 40, .96);
        --aurora:
            radial-gradient(58% 42% at 12% -6%, rgba(75,106,219,.16) 0%, transparent 62%),
            radial-gradient(52% 38% at 96% 24%, rgba(134,164,234,.13) 0%, transparent 60%),
            radial-gradient(120% 80% at 50% -10%, #16204a 0%, #0a0f1c 45%, #0b1226 100%);
    }
}
/* END-THEMES */