/* ==========================================================================
   仙影步数 · 设计系统
   风格：渐变玻璃 + 柔和拟态；主色青绿，无紫。
   ========================================================================== */

:root {
    /* ---- 品牌色：青绿 -> 湖蓝 ---- */
    --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));

    /* ---- 中性 ---- */
    --ink:   #0b1a20;
    --ink-2: #4a5f68;
    --ink-3: #8aa0a8;
    --line:  rgba(11, 26, 32, .08);
    --line-2: rgba(11, 26, 32, .14);

    /* ---- 语义色（背景/描边用，两套主题通用）---- */
    --ok:   #10b981;
    --warn: #f59e0b;
    --err:  #ef4444;
    --info: #0ea5e9;

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

    /* ---- 主题化表面 ---- */
    --neutral-fill: rgba(11, 26, 32, .07);
    --track:        rgba(11, 26, 32, .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(11, 26, 32, .05);
    --sh-2: 0 10px 30px -12px rgba(11, 26, 32, .16);
    --sh-3: 0 26px 60px -22px rgba(13, 148, 136, .34);
    --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: #eaf4f2;
    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:
        radial-gradient(58% 42% at 12% -6%, rgba(20,184,166,.30) 0%, transparent 62%),
        radial-gradient(52% 38% at 96% 24%, rgba(14,165,233,.22) 0%, transparent 60%),
        radial-gradient(46% 34% at 18% 96%, rgba(52,211,153,.20) 0%, transparent 62%),
        radial-gradient(120% 80% at 50% -10%, #e9fbf6 0%, #eaf4f2 44%, #e8f2f8 100%);
}
.bg .grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(11,26,32,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,26,32,.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 rgba(20,184,166,.7);
    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, #0f766e 0%, #0e7490 52%, #0f766e 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(--grad);
}
.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: linear-gradient(135deg, rgba(20,184,166,.94) 0%, rgba(16,185,129,.9) 48%, rgba(14,165,233,.92) 100%);
    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%, 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 .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 100px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 11.5px; font-weight: 700;
    white-space: nowrap;
}
.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:disabled { opacity: .55; cursor: not-allowed; }

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

/* 实色主按钮：首屏主视觉使用，不用渐变。
   渐变按钮叠在渐变装饰上会显得吵；实色更安静也更"产品感"。 */
.btn--solid {
    background: var(--c1); color: #fff;
    box-shadow: 0 8px 18px -10px rgba(20,184,166,.75);
}
.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 rgba(20,184,166,.22);
}
.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: rgba(20,184,166,.65);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(20,184,166,.13);
}
.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(11,26,32,.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: rgba(20, 184, 166, .11); border-radius: 10px;
}
.input-wrap .suffix--text:active { background: rgba(20, 184, 166, .2); }
.input-wrap .suffix--text:disabled { color: var(--ink-3); background: rgba(11, 26, 32, .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;
}

.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(16,185,129,.1); color: var(--ok-ink); border: 1px solid rgba(16,185,129,.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 rgba(13,148,136,.4);
    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 rgba(13,148,136,.4); 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); color: #fff; border-color: transparent;
    box-shadow: 0 6px 14px -6px rgba(20,184,166,.85);
}

/* 开关 */
.switch {
    position: relative; width: 50px; height: 29px; flex-shrink: 0;
    border-radius: 100px; border: none; cursor: pointer;
    background: rgba(11,26,32,.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(11,26,32,.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(--c1);
    box-shadow: 0 3px 10px rgba(11,26,32,.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(11,26,32,.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(16,185,129,.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 rgba(20,184,166,.8), inset 0 0 0 2px var(--c1);
}
.plan .tag-best {
    position: absolute; top: 0; right: 0;
    padding: 4px 11px 5px 13px;
    background: var(--grad); 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(--c1); }
.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(--c1); 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(51,65,85,.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(11,26,32,.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(--c1); }
.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(7, 22, 27, .5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none;
    transition: opacity .26s var(--ease);
}
.mask.open { opacity: 1; pointer-events: auto; }
.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(7,22,27,.55);
    padding: 22px;
    position: relative;
    transform: translateY(22px) scale(.96);
    transition: transform .34s var(--ease-bounce);
}
.mask.open .dialog { transform: none; }
.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(11,26,32,.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; }
.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(16,185,129,.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 rgba(20,184,166,.9); }
@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(15, 32, 39, .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(7,22,27,.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(11,26,32,.05) 25%, rgba(11,26,32,.09) 37%, rgba(11,26,32,.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: rgba(20,184,166,.11); border: 1px solid rgba(20,184,166,.22);
    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, #5eead4 0%, #7dd3fc 52%, #5eead4 100%);
        }
    }
}
/* 深色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        /* 原生控件/滚动条跟随深色 */
        color-scheme: dark;

        /* 深色模式只需要覆盖这一组：浅色底上的语义文字色 -> 深色底上可读的那一版。
           组件里写死的颜色已全部收敛成变量，所以这里改一处、全站生效。 */
        --accent-ink: #5eead4;
        --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: #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);
        --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: #0a161a; }
    .bg {
        background:
            radial-gradient(58% 42% at 12% -6%, rgba(20,184,166,.16) 0%, transparent 60%),
            radial-gradient(52% 38% at 96% 24%, rgba(14,165,233,.13) 0%, transparent 58%),
            radial-gradient(120% 80% at 50% -10%, #0f2a2a 0%, #0a161a 45%, #0b1a24 100%);
    }
    .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, rgba(20,184,166,.18), rgba(14,165,233,.12)); }
    .seg { background: rgba(255,255,255,.06); }
    .seg button.on { background: rgba(255,255,255,.13); color: #5eead4; }
    .switch { background: rgba(255,255,255,.15); }
    .dialog { background: rgba(18,32,37,.96); border-color: rgba(255,255,255,.1); }
    .tabbar { background: rgba(14,26,31,.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: linear-gradient(135deg, #0f766e 0%, #0d9488 46%, #0284c7 100%);
    color: #fff;
    box-shadow: 0 22px 48px -22px rgba(13,148,136,.6);
}
.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: #0f766e;
    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(--c1); }
.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(--c1); }
.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 是可点区域的下限，再矮手指点起来就容易误触了。 */
.fl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fl-item {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 9px 11px; border-radius: var(--r-sm);
    background: var(--grad-soft);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fl-item:hover { border-color: var(--line-2); transform: translateY(-1px); }
.fl-item:active { transform: none; }
.fl-item:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.fl-ico {
    width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--glass-strong); color: var(--accent-ink);
    font-size: 13px; font-weight: 800;
}
.fl-name {
    min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 右上角「合作」按钮：小号胶囊
   （原先直接套 .btn--sm 有 40px 高，放在卡片标题行里太重，压过了标题）*/
.fl-coop {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 100px;
    background: var(--grad-soft); border: 1px solid var(--line);
    font-family: inherit; font-size: 12px; font-weight: 700; color: var(--accent-ink);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.fl-coop:hover { border-color: var(--line-2); }
.fl-coop:active { opacity: .7; }
.fl-coop:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.fl-coop svg { width: 13px; height: 13px; }
.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(--c1); 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;
}