/* ui.css：TradeLearn 组件库（夜金 / 浅色金，2026-10-13 改版 R0）
令牌块由 build/gen_ui_kit.py 从 build/theme_tokens.py 写入（tokens:begin 到 tokens:end 之间，不要手改）；下面的组件只用令牌，不写死颜色。
用法：（版本号是内容哈希，gen_ui_kit 算）。组件类名都以 ui- 开头，放在哪都行；
基础排版（字体、正文色、焦点框）只在 .ui 容器里生效（ 或局部容器），不影响还没改版的页面。
站点外壳皮肤（现有 site_nav 顶栏、account.js 的工具区与菜单抽屉、site_footer 页脚）在 :root.ui 下生效：R1 起页面在 加 class="ui" 即换皮。
局部强制明暗：.ui-dark / .ui-light（如浅色衬底卡、样张页并排对照）。A股红涨绿跌：图表容器加 .ch-cn。
样张：/ui/（noindex，不进 sitemap、llms 与导航）。 */
/* tokens:begin */
/* 令牌块：build/theme_tokens.py 生成（python3 build/gen_ui_kit.py），不要手改 */
:root{--font-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",sans-serif;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",sans-serif;--font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--fs-hero:clamp(36px,4.2vw + 20px,80px);--fs-display:clamp(26px,2.2vw + 16px,48px);--fs-h2:clamp(28px,1.6vw + 20px,44px);--fs-h3:22px;--fs-h4:18px;--fs-price:clamp(48px,1.2vw + 36px,58px);--fs-lede:clamp(15.5px,.2vw + 14.8px,17px);--fs-body:15px;--fs-prose:17px;--fs-small:13px;--fs-tiny:12px;--lh-tight:1.12;--lh-title:1.25;--lh-body:1.7;--lh-prose:1.85;--fw-display:500;--fw-strong:600;--ls-display:-.01em;--ls-kicker:.1em;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:96px;--sp-13:120px;--sec:clamp(72px,4.6vw + 54px,120px);--gutter:24px;--max:1280px;--prose-w:720px;--nav-h:64px;--r-xs:8px;--r-sm:10px;--r-md:12px;--r:16px;--r-lg:20px;--r-xl:24px;--r-pill:999px;--ease:cubic-bezier(.2,.7,.2,1);--dur-1:.15s;--dur-2:.25s;--dur-3:.4s}
:root{color-scheme:light;--bg:#faf9f6;--bg2:#f3f1ec;--card:#ffffff;--text:#17150f;--sub:#57534c;--mute:#6d6860;--line:rgba(23,21,15,.09);--line2:rgba(23,21,15,.15);--accent:#875c00;--accent-deep:#6e4a00;--accent-soft:rgba(135,92,0,.07);--on-accent:#fff;--card2:#fcfbf9;--raise:#ffffff;--raise2:#f0ede7;--line3:rgba(23,21,15,.24);--field:#88827a;--prose:#26231d;--hover:rgba(23,21,15,.04);--accent-soft2:rgba(135,92,0,.12);--accent-line:rgba(135,92,0,.45);--accent-glow:rgba(235,185,66,.35);--accent-big:#a8760c;--fill:#ebb942;--fill-hover:#f0c45a;--on-fill:#16130b;--fill-edge:rgba(110,74,0,.22);--ok:#0a7350;--ok-soft:rgba(10,115,80,.085);--ok-line:rgba(10,115,80,.35);--warn:#a8480a;--warn-soft:rgba(168,72,10,.085);--warn-line:rgba(168,72,10,.35);--err:#c0262d;--err-soft:rgba(192,38,45,.085);--err-line:rgba(192,38,45,.35);--info:#1d5fc2;--info-soft:rgba(29,95,194,.085);--info-line:rgba(29,95,194,.35);--free:#036c4f;--free-soft:rgba(3,108,79,.085);--free-line:rgba(3,108,79,.35);--ch-bg:#ffffff;--ch-grid:#f0ede7;--ch-axis:#6d6860;--ch-axis-line:#dcd7cd;--ch-green:#12916a;--ch-red:#d4404b;--ch-ma1:#2563eb;--ch-ma2:#7c3aed;--ch-ma3:#c45a0c;--ch-mark:#875c00;--ch-label-bg:#ffffff;--ch-label-text:#17150f;--ch-label-line:rgba(23,21,15,.14);--ch-cross:#88827a;--ch-neutral:#858077;--ch-green-soft:rgba(18,145,106,.12);--ch-green-line:rgba(18,145,106,.6);--ch-green-vol:rgba(18,145,106,.38);--ch-red-soft:rgba(212,64,75,.12);--ch-red-line:rgba(212,64,75,.6);--ch-red-vol:rgba(212,64,75,.38);--ch-up:#12916a;--ch-up-soft:rgba(18,145,106,.12);--ch-up-line:rgba(18,145,106,.6);--ch-vol-up:rgba(18,145,106,.38);--ch-down:#d4404b;--ch-down-soft:rgba(212,64,75,.12);--ch-down-line:rgba(212,64,75,.6);--ch-vol-down:rgba(212,64,75,.38);--ch-mark-soft:rgba(135,92,0,.1);--shadow:0 1px 2px rgba(23,21,15,.04),0 14px 36px -22px rgba(23,21,15,.16);--shadow-pop:0 18px 48px -12px rgba(23,21,15,.18),0 0 0 1px rgba(23,21,15,.08);--shadow-sel:0 0 0 1px var(--accent-line),0 22px 50px -30px var(--accent-glow);--ring:0 0 0 3px var(--accent-soft2);--glass:rgba(250,249,246,.84);--glass2:rgba(255,255,255,.96);--scrim:rgba(23,21,15,.28);--highlight:rgba(255,255,255,.85);--glow:#d6e0f3;--glow2:#edf1f9;--glow-edge:#6d8cc8;--hero-shade:rgba(250,249,246,.6)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#09090b;--bg2:#111114;--card:#141417;--text:#f4f4f5;--sub:#a1a1aa;--mute:#8b8b95;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.13);--accent:#f2c14e;--accent-deep:#f7d27a;--accent-soft:rgba(242,193,78,.1);--on-accent:#16130b;--card2:#0d0d10;--raise:#1b1b1f;--raise2:#26262b;--line3:rgba(255,255,255,.22);--field:#66666f;--prose:#e4e4e7;--hover:rgba(255,255,255,.05);--accent-soft2:rgba(242,193,78,.16);--accent-line:rgba(242,193,78,.55);--accent-glow:rgba(242,193,78,.16);--accent-big:#f2c14e;--fill:#f2c14e;--fill-hover:#f6cf6d;--on-fill:#16130b;--fill-edge:transparent;--ok:#3ecf8e;--ok-soft:rgba(62,207,142,.12);--ok-line:rgba(62,207,142,.4);--warn:#fb923c;--warn-soft:rgba(251,146,60,.12);--warn-line:rgba(251,146,60,.4);--err:#f87171;--err-soft:rgba(248,113,113,.12);--err-line:rgba(248,113,113,.4);--info:#7ab8ff;--info-soft:rgba(122,184,255,.12);--info-line:rgba(122,184,255,.4);--free:#5fd3a0;--free-soft:rgba(95,211,160,.12);--free-line:rgba(95,211,160,.4);--ch-bg:#0e0e11;--ch-grid:rgba(255,255,255,.06);--ch-axis:#8b8b95;--ch-axis-line:rgba(255,255,255,.16);--ch-green:#2fbf87;--ch-red:#f0616d;--ch-ma1:#5aa7ff;--ch-ma2:#c18cff;--ch-ma3:#f08c4a;--ch-mark:#f2c14e;--ch-label-bg:#1d1d22;--ch-label-text:#f4f4f5;--ch-label-line:rgba(255,255,255,.14);--ch-cross:#71717a;--ch-neutral:#a1a1aa;--ch-green-soft:rgba(47,191,135,.16);--ch-green-line:rgba(47,191,135,.6);--ch-green-vol:rgba(47,191,135,.42);--ch-red-soft:rgba(240,97,109,.16);--ch-red-line:rgba(240,97,109,.6);--ch-red-vol:rgba(240,97,109,.42);--ch-up:#2fbf87;--ch-up-soft:rgba(47,191,135,.16);--ch-up-line:rgba(47,191,135,.6);--ch-vol-up:rgba(47,191,135,.42);--ch-down:#f0616d;--ch-down-soft:rgba(240,97,109,.16);--ch-down-line:rgba(240,97,109,.6);--ch-vol-down:rgba(240,97,109,.42);--ch-mark-soft:rgba(242,193,78,.14);--shadow:inset 0 1px 0 rgba(255,255,255,.035),0 30px 60px -36px rgba(0,0,0,.8);--shadow-pop:0 20px 50px -12px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.13);--shadow-sel:0 0 0 1px var(--accent-line),0 34px 80px -40px var(--accent-glow);--ring:0 0 0 3px var(--accent-soft2);--glass:rgba(9,9,11,.78);--glass2:rgba(14,14,17,.94);--scrim:rgba(0,0,0,.6);--highlight:rgba(255,255,255,.05);--glow:#1c3a7a;--glow2:#10234d;--glow-edge:#88a8f0;--hero-shade:rgba(9,9,11,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#09090b;--bg2:#111114;--card:#141417;--text:#f4f4f5;--sub:#a1a1aa;--mute:#8b8b95;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.13);--accent:#f2c14e;--accent-deep:#f7d27a;--accent-soft:rgba(242,193,78,.1);--on-accent:#16130b;--card2:#0d0d10;--raise:#1b1b1f;--raise2:#26262b;--line3:rgba(255,255,255,.22);--field:#66666f;--prose:#e4e4e7;--hover:rgba(255,255,255,.05);--accent-soft2:rgba(242,193,78,.16);--accent-line:rgba(242,193,78,.55);--accent-glow:rgba(242,193,78,.16);--accent-big:#f2c14e;--fill:#f2c14e;--fill-hover:#f6cf6d;--on-fill:#16130b;--fill-edge:transparent;--ok:#3ecf8e;--ok-soft:rgba(62,207,142,.12);--ok-line:rgba(62,207,142,.4);--warn:#fb923c;--warn-soft:rgba(251,146,60,.12);--warn-line:rgba(251,146,60,.4);--err:#f87171;--err-soft:rgba(248,113,113,.12);--err-line:rgba(248,113,113,.4);--info:#7ab8ff;--info-soft:rgba(122,184,255,.12);--info-line:rgba(122,184,255,.4);--free:#5fd3a0;--free-soft:rgba(95,211,160,.12);--free-line:rgba(95,211,160,.4);--ch-bg:#0e0e11;--ch-grid:rgba(255,255,255,.06);--ch-axis:#8b8b95;--ch-axis-line:rgba(255,255,255,.16);--ch-green:#2fbf87;--ch-red:#f0616d;--ch-ma1:#5aa7ff;--ch-ma2:#c18cff;--ch-ma3:#f08c4a;--ch-mark:#f2c14e;--ch-label-bg:#1d1d22;--ch-label-text:#f4f4f5;--ch-label-line:rgba(255,255,255,.14);--ch-cross:#71717a;--ch-neutral:#a1a1aa;--ch-green-soft:rgba(47,191,135,.16);--ch-green-line:rgba(47,191,135,.6);--ch-green-vol:rgba(47,191,135,.42);--ch-red-soft:rgba(240,97,109,.16);--ch-red-line:rgba(240,97,109,.6);--ch-red-vol:rgba(240,97,109,.42);--ch-up:#2fbf87;--ch-up-soft:rgba(47,191,135,.16);--ch-up-line:rgba(47,191,135,.6);--ch-vol-up:rgba(47,191,135,.42);--ch-down:#f0616d;--ch-down-soft:rgba(240,97,109,.16);--ch-down-line:rgba(240,97,109,.6);--ch-vol-down:rgba(240,97,109,.42);--ch-mark-soft:rgba(242,193,78,.14);--shadow:inset 0 1px 0 rgba(255,255,255,.035),0 30px 60px -36px rgba(0,0,0,.8);--shadow-pop:0 20px 50px -12px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.13);--shadow-sel:0 0 0 1px var(--accent-line),0 34px 80px -40px var(--accent-glow);--ring:0 0 0 3px var(--accent-soft2);--glass:rgba(9,9,11,.78);--glass2:rgba(14,14,17,.94);--scrim:rgba(0,0,0,.6);--highlight:rgba(255,255,255,.05);--glow:#1c3a7a;--glow2:#10234d;--glow-edge:#88a8f0;--hero-shade:rgba(9,9,11,.55)}}
.ui-light{color-scheme:light;--bg:#faf9f6;--bg2:#f3f1ec;--card:#ffffff;--text:#17150f;--sub:#57534c;--mute:#6d6860;--line:rgba(23,21,15,.09);--line2:rgba(23,21,15,.15);--accent:#875c00;--accent-deep:#6e4a00;--accent-soft:rgba(135,92,0,.07);--on-accent:#fff;--card2:#fcfbf9;--raise:#ffffff;--raise2:#f0ede7;--line3:rgba(23,21,15,.24);--field:#88827a;--prose:#26231d;--hover:rgba(23,21,15,.04);--accent-soft2:rgba(135,92,0,.12);--accent-line:rgba(135,92,0,.45);--accent-glow:rgba(235,185,66,.35);--accent-big:#a8760c;--fill:#ebb942;--fill-hover:#f0c45a;--on-fill:#16130b;--fill-edge:rgba(110,74,0,.22);--ok:#0a7350;--ok-soft:rgba(10,115,80,.085);--ok-line:rgba(10,115,80,.35);--warn:#a8480a;--warn-soft:rgba(168,72,10,.085);--warn-line:rgba(168,72,10,.35);--err:#c0262d;--err-soft:rgba(192,38,45,.085);--err-line:rgba(192,38,45,.35);--info:#1d5fc2;--info-soft:rgba(29,95,194,.085);--info-line:rgba(29,95,194,.35);--free:#036c4f;--free-soft:rgba(3,108,79,.085);--free-line:rgba(3,108,79,.35);--ch-bg:#ffffff;--ch-grid:#f0ede7;--ch-axis:#6d6860;--ch-axis-line:#dcd7cd;--ch-green:#12916a;--ch-red:#d4404b;--ch-ma1:#2563eb;--ch-ma2:#7c3aed;--ch-ma3:#c45a0c;--ch-mark:#875c00;--ch-label-bg:#ffffff;--ch-label-text:#17150f;--ch-label-line:rgba(23,21,15,.14);--ch-cross:#88827a;--ch-neutral:#858077;--ch-green-soft:rgba(18,145,106,.12);--ch-green-line:rgba(18,145,106,.6);--ch-green-vol:rgba(18,145,106,.38);--ch-red-soft:rgba(212,64,75,.12);--ch-red-line:rgba(212,64,75,.6);--ch-red-vol:rgba(212,64,75,.38);--ch-up:#12916a;--ch-up-soft:rgba(18,145,106,.12);--ch-up-line:rgba(18,145,106,.6);--ch-vol-up:rgba(18,145,106,.38);--ch-down:#d4404b;--ch-down-soft:rgba(212,64,75,.12);--ch-down-line:rgba(212,64,75,.6);--ch-vol-down:rgba(212,64,75,.38);--ch-mark-soft:rgba(135,92,0,.1);--shadow:0 1px 2px rgba(23,21,15,.04),0 14px 36px -22px rgba(23,21,15,.16);--shadow-pop:0 18px 48px -12px rgba(23,21,15,.18),0 0 0 1px rgba(23,21,15,.08);--shadow-sel:0 0 0 1px var(--accent-line),0 22px 50px -30px var(--accent-glow);--ring:0 0 0 3px var(--accent-soft2);--glass:rgba(250,249,246,.84);--glass2:rgba(255,255,255,.96);--scrim:rgba(23,21,15,.28);--highlight:rgba(255,255,255,.85);--glow:#d6e0f3;--glow2:#edf1f9;--glow-edge:#6d8cc8;--hero-shade:rgba(250,249,246,.6)}
.ui-dark{color-scheme:dark;--bg:#09090b;--bg2:#111114;--card:#141417;--text:#f4f4f5;--sub:#a1a1aa;--mute:#8b8b95;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.13);--accent:#f2c14e;--accent-deep:#f7d27a;--accent-soft:rgba(242,193,78,.1);--on-accent:#16130b;--card2:#0d0d10;--raise:#1b1b1f;--raise2:#26262b;--line3:rgba(255,255,255,.22);--field:#66666f;--prose:#e4e4e7;--hover:rgba(255,255,255,.05);--accent-soft2:rgba(242,193,78,.16);--accent-line:rgba(242,193,78,.55);--accent-glow:rgba(242,193,78,.16);--accent-big:#f2c14e;--fill:#f2c14e;--fill-hover:#f6cf6d;--on-fill:#16130b;--fill-edge:transparent;--ok:#3ecf8e;--ok-soft:rgba(62,207,142,.12);--ok-line:rgba(62,207,142,.4);--warn:#fb923c;--warn-soft:rgba(251,146,60,.12);--warn-line:rgba(251,146,60,.4);--err:#f87171;--err-soft:rgba(248,113,113,.12);--err-line:rgba(248,113,113,.4);--info:#7ab8ff;--info-soft:rgba(122,184,255,.12);--info-line:rgba(122,184,255,.4);--free:#5fd3a0;--free-soft:rgba(95,211,160,.12);--free-line:rgba(95,211,160,.4);--ch-bg:#0e0e11;--ch-grid:rgba(255,255,255,.06);--ch-axis:#8b8b95;--ch-axis-line:rgba(255,255,255,.16);--ch-green:#2fbf87;--ch-red:#f0616d;--ch-ma1:#5aa7ff;--ch-ma2:#c18cff;--ch-ma3:#f08c4a;--ch-mark:#f2c14e;--ch-label-bg:#1d1d22;--ch-label-text:#f4f4f5;--ch-label-line:rgba(255,255,255,.14);--ch-cross:#71717a;--ch-neutral:#a1a1aa;--ch-green-soft:rgba(47,191,135,.16);--ch-green-line:rgba(47,191,135,.6);--ch-green-vol:rgba(47,191,135,.42);--ch-red-soft:rgba(240,97,109,.16);--ch-red-line:rgba(240,97,109,.6);--ch-red-vol:rgba(240,97,109,.42);--ch-up:#2fbf87;--ch-up-soft:rgba(47,191,135,.16);--ch-up-line:rgba(47,191,135,.6);--ch-vol-up:rgba(47,191,135,.42);--ch-down:#f0616d;--ch-down-soft:rgba(240,97,109,.16);--ch-down-line:rgba(240,97,109,.6);--ch-vol-down:rgba(240,97,109,.42);--ch-mark-soft:rgba(242,193,78,.14);--shadow:inset 0 1px 0 rgba(255,255,255,.035),0 30px 60px -36px rgba(0,0,0,.8);--shadow-pop:0 20px 50px -12px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.13);--shadow-sel:0 0 0 1px var(--accent-line),0 34px 80px -40px var(--accent-glow);--ring:0 0 0 3px var(--accent-soft2);--glass:rgba(9,9,11,.78);--glass2:rgba(14,14,17,.94);--scrim:rgba(0,0,0,.6);--highlight:rgba(255,255,255,.05);--glow:#1c3a7a;--glow2:#10234d;--glow-edge:#88a8f0;--hero-shade:rgba(9,9,11,.55)}
:root[data-theme="dark"][data-dim]{--bg:#15202b;--bg2:#1c2a38;--card:#1b2836;--text:#eef2f6;--fg:#eef2f6;--ink:#eef2f6;--sub:#a5b2bf;--mute:#8f9eae;--muted:#8f9eae;--line:#2f3e4d;--line2:#3d4e5f;--hover:rgba(255,255,255,.05);--card2:#172330;--raise:#22313f;--raise2:#2c3d4e;--line3:#4b5d70;--field:#71849a;--prose:#e1e7ee}:root[data-theme="dark"][data-dim] body{background:var(--bg)}
:root.os-win{--fw-display:600}
.ch-cn{--ch-up:var(--ch-red);--ch-down:var(--ch-green);--ch-up-soft:var(--ch-red-soft);--ch-down-soft:var(--ch-green-soft);--ch-up-line:var(--ch-red-line);--ch-down-line:var(--ch-green-line);--ch-vol-up:var(--ch-red-vol);--ch-vol-down:var(--ch-green-vol)}
/* tokens:end */
/* ================================================================ 基础 */
.ui{font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.ui,body.ui,.ui-light,.ui-dark{background:var(--bg);color:var(--text)}
.ui-light,.ui-dark{font-family:var(--font);line-height:var(--lh-body)}
.ui *,.ui *::before,.ui *::after{box-sizing:border-box}
.ui :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ui ::selection{background:var(--accent-soft2)}
.ui-wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.ui-ic{display:inline-block;width:18px;height:18px;flex:none;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-num{font-variant-numeric:tabular-nums}
.ui-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ================================================================ 排版 */
.ui-hero{margin:0;font:var(--fw-display) var(--fs-hero)/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-display);color:var(--text);text-wrap:balance}
.ui-hero .l{display:block}
.ui-hero .acc,.ui-display{color:var(--accent-big)}
.ui-display{margin:0;font:var(--fw-display) var(--fs-display)/1.25 var(--font-display);letter-spacing:-.005em;text-wrap:balance}
.ui-h2{margin:0;font:var(--fw-display) var(--fs-h2)/1.18 var(--font-display);letter-spacing:var(--ls-display);color:var(--text);text-wrap:balance}
.ui-h3{margin:0;font:var(--fw-display) var(--fs-h3)/1.3 var(--font-display);color:var(--text)}
.ui-h4{margin:0;font-weight:var(--fw-strong);font-size:var(--fs-h4);line-height:1.4;color:var(--text)}
.ui-lede{margin:0;color:var(--sub);font-size:var(--fs-lede);line-height:1.85;text-wrap:balance}
.ui-small{font-size:var(--fs-small);line-height:1.7;color:var(--sub)}
.ui-mute{color:var(--mute)}
.ui-kicker{margin:0;color:var(--accent);font-size:var(--fs-tiny);font-weight:600;letter-spacing:var(--ls-kicker);text-transform:uppercase;line-height:1.4}
/* 眉标：金点 + 文字 */
.ui-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--accent);font-size:14px;font-weight:500;letter-spacing:.02em;line-height:1.4}
.ui-eyebrow::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--fill);box-shadow:0 0 0 4px var(--accent-soft2),0 0 14px var(--accent-glow)}
/* 区块标题：眉标或小标（2026-10-14 起一律中文） + 大标题 + 说明；默认左对齐，--center 居中；右侧可放按钮或搜索（.ui-head-side） */
.ui-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.ui-head-t{min-width:0;max-width:760px}
.ui-head-t>*+*{margin-top:12px}
.ui-head-t p:not(.ui-kicker):not(.ui-eyebrow){margin-bottom:0;color:var(--sub);font-size:15px;line-height:1.8}
.ui-head-side{flex:none}
.ui-head--center{flex-direction:column;align-items:center;text-align:center}
.ui-head--center .ui-head-t{margin:0 auto}
/* ================================================================ 按钮
--fill 金色实心（主按钮）、--dark 深色描边（次按钮；浅色金下是白底描边）、--soft 金色淡底、--ring 金色描边胶囊、.ui-link 文字按钮；
尺寸 --sm / 默认 / --lg，--pill 胶囊，--block 占满一行 */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 22px;border:1px solid transparent;border-radius:var(--r-md);font:600 15px/1 var(--font);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--dur-2),border-color var(--dur-2),color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2) var(--ease)}
.ui-btn .ui-ic{width:17px;height:17px}
.ui-btn:active{transform:translateY(1px)}
.ui-btn--fill{background:var(--fill);color:var(--on-fill);box-shadow:inset 0 0 0 1px var(--fill-edge)}
.ui-btn--fill:hover{background:var(--fill-hover)}
.ui-btn--dark{background:linear-gradient(180deg,var(--raise),var(--card));border-color:var(--line2);color:var(--text);box-shadow:inset 0 1px 0 var(--highlight)}
.ui-btn--dark:hover{border-color:var(--line3)}
.ui-btn--soft{background:var(--accent-soft);border-color:var(--accent-soft2);color:var(--accent)}
.ui-btn--soft:hover{border-color:var(--accent-line)}
.ui-btn--ring{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);border-radius:var(--r-pill)}
.ui-btn--ring:hover{background:var(--accent-soft2)}
.ui-btn--pill{border-radius:var(--r-pill)}
.ui-btn--sm{height:38px;padding:0 15px;font-size:14px;gap:7px;border-radius:var(--r-sm)}
.ui-btn--lg{height:56px;padding:0 30px;font-size:16.5px}
.ui-btn--block{width:100%}
.ui-btn[disabled],.ui-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.ui-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;background:none;border:0;padding:0}
.ui-link .ui-ic{width:15px;height:15px;transition:transform var(--dur-2) var(--ease)}
.ui-link:hover .ui-ic{transform:translateX(2px)}
.ui-link--mute{color:var(--sub);font-weight:500}
.ui-link--mute:hover{color:var(--text)}
.ui-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ui-acts--center{justify-content:center}
.ui-iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border:0;border-radius:var(--r-sm);background:none;color:var(--sub);cursor:pointer;transition:color var(--dur-1),background var(--dur-1)}
.ui-iconbtn:hover{color:var(--text);background:var(--hover)}
/* ================================================================ 状态小标签与标签
.ui-status：已选择（.is-on，或放在 .is-sel / [aria-checked="true"] 的卡片里）与可选择；
.ui-tag：默认金色描边（新），--free 免费、--paid 付费、--best 最划算（金色实心）、--mute 中性 */
.ui-status{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r-pill);color:var(--sub);font-size:12px;line-height:1;white-space:nowrap}
.ui-status .ui-ic{width:13px;height:13px;stroke-width:2.4;display:none}
.ui-status.is-on,.is-sel .ui-status,[aria-checked="true"] .ui-status{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);font-weight:600}
.ui-status.is-on .ui-ic,.is-sel .ui-status .ui-ic,[aria-checked="true"] .ui-status .ui-ic{display:inline-block}
.ui-status .on{display:none}
.is-sel .ui-status .off,[aria-checked="true"] .ui-status .off{display:none}
.is-sel .ui-status .on,[aria-checked="true"] .ui-status .on{display:inline}
.ui-tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border:1px solid var(--accent-line);border-radius:var(--r-pill);color:var(--accent);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:2px}
.ui-tag .ui-ic{width:12px;height:12px;stroke-width:2.2}
.ui-tag--free{border-color:var(--free-line);background:var(--free-soft);color:var(--free)}
.ui-tag--paid{border-color:var(--line2);color:var(--sub);font-weight:500}
.ui-tag--best{border-color:transparent;background:var(--fill);color:var(--on-fill)}
.ui-tag--mute{border-color:var(--line2);color:var(--mute);font-weight:500}
/* ================================================================ 卡片：普通、可选中、带图标方块 */
.ui-card{position:relative;display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card) 0%,var(--card2) 100%);box-shadow:var(--shadow);color:var(--text);transition:border-color var(--dur-2),box-shadow var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.ui-card--pick{cursor:pointer}
.ui-card--pick:hover{border-color:var(--line3)}
.ui-card.is-sel,.ui-card[aria-checked="true"]{border-color:var(--accent-line);box-shadow:var(--shadow-sel);background:radial-gradient(120% 55% at 0% 0%,var(--accent-soft) 0%,transparent 55%),linear-gradient(180deg,var(--card) 0%,var(--card2) 100%)}
.ui-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ui-card-t{margin:22px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:var(--fw-display) var(--fs-h3)/1.3 var(--font-display);color:var(--text)}
.ui-card-t small{font:500 14px/1.3 var(--font);color:var(--sub)}
.ui-card-desc{margin:10px 0 0;color:var(--sub);font-size:14px;line-height:1.75}
.ui-card-btn{margin-top:26px}
.ui-card-after{margin:12px 0 0;text-align:center;color:var(--mute);font-size:12.5px}
.ui-card.is-sel .ui-card-btn .ui-btn--dark,.ui-card[aria-checked="true"] .ui-card-btn .ui-btn--dark{background:var(--fill);border-color:transparent;color:var(--on-fill);box-shadow:inset 0 0 0 1px var(--fill-edge)}
.ui-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ui-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-icobox{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line2);border-radius:var(--r-md);background:linear-gradient(180deg,var(--raise),var(--card));color:var(--text);box-shadow:inset 0 1px 0 var(--highlight)}
.ui-icobox .ui-ic{width:20px;height:20px}
.ui-icobox--acc{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.ui-rule{height:1px;margin:24px 0 20px;border:0;background:var(--line)}
/* 小卡（其他买法、说明卡） */
.ui-mini{padding:22px 22px 20px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card),var(--card2))}
.ui-mini>.ui-ic{width:20px;height:20px;color:var(--accent)}
.ui-mini b{display:block;margin-top:14px;font-size:15px;font-weight:600}
.ui-mini p{margin:6px 0 0;color:var(--sub);font-size:13.5px;line-height:1.75}
/* 统计胶囊（首屏「746 节已上线 / 111 节免费」一类） */
.ui-stats{display:inline-grid;grid-auto-flow:column;border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ui-stats div{padding:12px 26px;border-left:1px solid var(--line);color:var(--sub);font-size:13.5px;white-space:nowrap}
.ui-stats div:first-child{border-left:0}
.ui-stats b{margin-right:6px;color:var(--text);font:var(--fw-display) 20px/1 var(--font-display);font-variant-numeric:tabular-nums}
.ui-stats .acc b{color:var(--accent)}
/* 进度条 */
.ui-progress{height:6px;border-radius:var(--r-pill);background:var(--raise2);overflow:hidden}
.ui-progress i{display:block;height:100%;border-radius:inherit;background:var(--fill)}
/* ================================================================ 分段切换（选中项金色实心） */
.ui-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:5px;border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ui-seg button,.ui-seg a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:180px;height:48px;padding:0 22px;border:0;border-radius:var(--r-pill);background:none;color:var(--sub);font:400 16px/1 var(--font);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--dur-2) var(--ease),color var(--dur-2)}
.ui-seg button:hover,.ui-seg a:hover{color:var(--text)}
.ui-seg [aria-selected="true"],.ui-seg [aria-current]{background:var(--fill);color:var(--on-fill);font-weight:600;box-shadow:inset 0 0 0 1px var(--fill-edge)}
.ui-seg em{font-style:normal;font-size:11.5px;font-weight:600;line-height:1;padding:4px 8px;border-radius:var(--r-pill);background:var(--hover);color:var(--sub)}
.ui-seg [aria-selected="true"] em{background:var(--accent-soft2);color:var(--on-fill)}
.ui-seg--sm button,.ui-seg--sm a{min-width:0;height:38px;padding:0 16px;font-size:14px}
/* ================================================================ 价格块：大号金色数字 + 单位 + 小字 */
.ui-price{display:flex;align-items:center;gap:10px;margin-top:30px;color:var(--accent-big)}
.ui-price>.ui-ic{width:22px;height:22px;color:var(--mute);stroke-width:1.6}
.ui-price b{font:var(--fw-display) var(--fs-price)/1 var(--font-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ui-price span{align-self:flex-end;margin:0 0 6px 2px;color:var(--sub);font-size:16px}
.ui-price-sub{margin:12px 0 0;color:var(--mute);font-size:13px}
.ui-price-sub b{color:var(--sub);font-weight:500}
.ui-price del{color:var(--mute);font-size:15px;margin-left:4px;align-self:flex-end;margin-bottom:8px}
/* ================================================================ 权益清单：圆圈对勾，第一条高亮（.hi），不含的项（.no） */
.ui-feats{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:start}
.ui-feats li{display:flex;align-items:flex-start;gap:12px;color:var(--text);font-size:14px;line-height:1.6}
.ui-feats .ck{display:grid;place-items:center;width:22px;height:22px;flex:none;margin-top:-1px;border:1px solid var(--line2);border-radius:50%;background:var(--raise);color:var(--sub)}
.ui-feats .ck .ui-ic{width:12px;height:12px;stroke-width:2.6}
.ui-feats li.hi{color:var(--accent);font-weight:600}
.ui-feats li.hi .ck{border-color:var(--accent-line);background:var(--accent-soft2);color:var(--accent)}
.ui-feats li.no{color:var(--mute)}
.ui-feats li.no .ck{background:transparent;color:var(--mute)}
/* ================================================================ 确认方案条（电脑整条；手机 .ui-dock 固定在底部） */
.ui-confirm{padding:30px 30px 24px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card),var(--card2));box-shadow:var(--shadow)}
.ui-confirm-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1.25fr) minmax(0,1.6fr) auto;gap:28px;align-items:center}
.ui-cf-k{color:var(--mute);font-size:12.5px}
.ui-cf-v{margin-top:4px;font-size:16px;font-weight:600;line-height:1.5}
.ui-cf-title{font-size:17px;font-weight:600}
.ui-cf-incl{color:var(--sub);font-size:14.5px;line-height:1.7}
.ui-cf-pay{text-align:right}
.ui-cf-pay b{display:inline-block;margin-top:2px;color:var(--accent-big);font:var(--fw-display) 48px/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ui-cf-pay span{margin-left:4px;color:var(--sub);font-size:15px}
.ui-cf-pay small{display:block;margin-top:6px;color:var(--mute);font-size:12.5px}
.ui-confirm-tip{display:flex;align-items:center;gap:14px;margin-top:24px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--hover)}
.ui-confirm-tip>.ui-ic{width:22px;height:22px;color:var(--sub)}
.ui-confirm-tip div{flex:1;min-width:0}
.ui-confirm-tip small{display:block;color:var(--mute);font-size:12px}
.ui-confirm-tip b{display:block;margin-top:2px;font-size:14.5px;font-weight:600;line-height:1.6}
.ui-confirm-acts{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.ui-confirm-acts .ui-acts .ui-btn{border-radius:var(--r-pill)}
.ui-paywith{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:13px}
.ui-paywith .ui-ic{width:16px;height:16px}
.ui-agree{margin:14px 0 0;text-align:right;color:var(--mute);font-size:12.5px}
.ui-agree a{color:var(--sub);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px}
.ui-dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line2);background:var(--glass2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateY(110%);transition:transform var(--dur-3) var(--ease)}
.ui-dock.show{transform:none}
.ui-dock.is-static{position:relative;display:flex;transform:none;z-index:auto}
.ui-dock-l{flex:1;min-width:0}
.ui-dock-l small{display:block;color:var(--mute);font-size:11.5px;line-height:1.4}
.ui-dock-l b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.45}
.ui-dock-p{color:var(--accent-big);font:var(--fw-display) 26px/1 var(--font-display);white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-dock-p span{margin-left:2px;color:var(--sub);font:400 13px/1 var(--font)}
.ui-dock .ui-btn{height:46px;padding:0 18px;border-radius:var(--r-pill);font-size:15px}
/* ================================================================ 目录分组卡（头部 + 两列条目 + 展开） */
.ui-group{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card),var(--card2));box-shadow:var(--shadow);overflow:hidden}
.ui-group-head{display:flex;align-items:flex-start;gap:18px;padding:30px 34px 26px;border-bottom:1px solid var(--line)}
.ui-group-head .ui-icobox{margin-top:2px}
.ui-group-t{flex:1;min-width:0}
.ui-group-t h3{margin:6px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font:var(--fw-display) 26px/1.25 var(--font-display)}
.ui-group-t p:not(.ui-kicker){margin:8px 0 0;color:var(--sub);font-size:14px}
.ui-group-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none;text-align:right}
.ui-group-stat{color:var(--sub);font-size:13.5px;white-space:nowrap}
.ui-group-stat b{color:var(--text);font-weight:600}
.ui-group-stat em{font-style:normal;color:var(--free)}
.ui-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;margin:0;padding:6px 34px 0;list-style:none}
.ui-row{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.ui-row .av{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line2);border-radius:50%;background:linear-gradient(180deg,var(--raise),var(--card));color:var(--sub);font:600 13px/1 var(--font);font-variant-numeric:tabular-nums}
.ui-row.free .av{border-color:var(--accent-line);color:var(--accent)}
.ui-row-t{min-width:0}
.ui-row-t b{font-size:15px;font-weight:600;line-height:1.5}
.ui-row-t .ui-tag{margin-left:8px}
.ui-row-t p{margin:3px 0 0;color:var(--mute);font-size:13px}
.ui-group-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 34px 20px}
.ui-group-foot button{display:inline-flex;align-items:center;gap:6px;border:0;padding:0;background:none;color:var(--sub);font:inherit;font-size:13.5px;cursor:pointer}
.ui-group-foot button:hover{color:var(--text)}
.ui-group-foot button .ui-ic{width:15px;height:15px;transition:transform var(--dur-2)}
.ui-group-foot button[aria-expanded="true"] .ui-ic{transform:rotate(180deg)}
.ui-rows .ui-row.more{display:none}
.ui-group.open .ui-row.more{display:flex}
/* 胶囊搜索框（区块标题右侧） */
.ui-search{display:flex;align-items:center;gap:10px;width:320px;height:46px;padding:0 18px;border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--card);color:var(--mute);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.ui-search:focus-within{border-color:var(--accent-line);box-shadow:var(--ring)}
.ui-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--text)}
.ui-search input::placeholder{color:var(--mute)}
/* ================================================================ 常见问题：左说明右折叠 */
.ui-faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}
.ui-faq-l>.ui-ic{width:28px;height:28px;color:var(--accent);stroke-width:1.7}
.ui-faq-l h2{margin:22px 0 0;font:var(--fw-display) clamp(30px,1.8vw + 20px,52px)/1.15 var(--font-display)}
.ui-faq-l p{margin:18px 0 0;color:var(--sub);font-size:15px;max-width:420px}
.ui-qa{border-bottom:1px solid var(--line)}
.ui-qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:500;line-height:1.55}
.ui-qa summary::-webkit-details-marker{display:none}
.ui-qa summary .ui-ic{color:var(--mute);transition:transform var(--dur-2) var(--ease),color var(--dur-1)}
.ui-qa summary:hover .ui-ic{color:var(--text)}
.ui-qa[open] summary .ui-ic{transform:rotate(45deg);color:var(--accent)}
.ui-qa summary em{font-style:normal;color:var(--accent)}
.ui-qa p{margin:-6px 0 0;padding:0 40px 24px 0;color:var(--sub);font-size:14.5px;line-height:1.85}
/* ================================================================ 号召区（可叠首屏光带 .ui-glow） */
.ui-cta{position:relative;padding:var(--sec) 0;text-align:center}
.ui-cta>.ui-ic{width:30px;height:30px;margin:0 auto;color:var(--accent);stroke-width:1.6;display:block}
.ui-cta h2{margin:24px 0 0;font:var(--fw-display) clamp(30px,2.2vw + 18px,54px)/1.18 var(--font-display);text-wrap:balance}
.ui-cta p{max-width:640px;margin:20px auto 0;color:var(--sub);font-size:15px;line-height:1.85;text-wrap:balance}
.ui-cta .ui-acts{justify-content:center;margin-top:36px}
.ui-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 85% 20%,var(--glow) 0%,transparent 70%),radial-gradient(50% 60% at 10% 90%,var(--glow2) 0%,transparent 70%);opacity:.55}
.ui-section{position:relative;isolation:isolate;padding:var(--sec) 0}
/* ================================================================ 首屏背景图（组件位；每天轮换一张、按图定取景由 R1 实现）
首屏内容
背景图都是深色画面，浅色金下首屏也按夜金（加 .ui-dark）；--hb-pos / --hb-pos-m 是电脑与手机的取景位置；没有图时显示 .ui-glow 光带。
中间压暗一圈（--hero-shade）、底部渐隐到页面底色，保证首屏文字可读。 */
.ui-herobg{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.ui-herobg-img{position:absolute;inset:0;z-index:-2;display:block}
.ui-herobg-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hb-pos,center)}
.ui-herobg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 55% at 50% 46%,var(--hero-shade) 0%,transparent 78%),linear-gradient(180deg,transparent 0%,transparent 62%,var(--bg) 100%)}
.ui-herobg-in{position:relative;padding:112px 0 72px;text-align:center}
.ui-herobg-in .ui-hero{margin-top:24px}
.ui-herobg-in .ui-lede{max-width:760px;margin:24px auto 0}
.ui-herobg-in .ui-acts{justify-content:center;margin-top:36px}
@media (max-width:720px){.ui-herobg-img img{object-position:var(--hb-pos-m,var(--hb-pos,center))}.ui-herobg-in{padding:64px 0 48px}}
/* ================================================================ 表格（手机横向滚动） */
.ui-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);-webkit-overflow-scrolling:touch}
.ui-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.ui-table th,.ui-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ui-table thead th{color:var(--mute);font-size:12.5px;font-weight:600;letter-spacing:.02em;background:var(--bg2);white-space:nowrap}
.ui-table tbody tr:last-child td,.ui-table tbody tr:last-child th{border-bottom:0}
.ui-table tbody tr:hover{background:var(--hover)}
.ui-table tbody th{font-weight:600;color:var(--text)}
.ui-table td{color:var(--sub)}
.ui-table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-table .c{text-align:center}
.ui-table .c .ui-ic{vertical-align:-3px}
.ui-table .hl{background:var(--accent-soft)}
.ui-table thead .hl{color:var(--accent)}
.ui-table .ui-ic{width:16px;height:16px}
.ui-table .yes{color:var(--ok)}.ui-table .no{color:var(--mute)}
/* ================================================================ 提示框：--info 信息、--warn 警告、--risk 风险提示、--ok 完成 */
.ui-note{display:flex;gap:14px;padding:16px 18px;border:1px solid var(--line2);border-radius:var(--r-md);background:var(--hover);color:var(--text);font-size:14.5px;line-height:1.75}
.ui-note>.ui-ic{width:20px;height:20px;margin-top:2px;color:var(--sub)}
.ui-note div{min-width:0}
.ui-note b{display:block;font-weight:600}
.ui-note p{margin:2px 0 0;color:var(--sub)}
.ui-note--info{border-color:var(--info-line);background:var(--info-soft)}.ui-note--info>.ui-ic,.ui-note--info b{color:var(--info)}
.ui-note--warn{border-color:var(--warn-line);background:var(--warn-soft)}.ui-note--warn>.ui-ic,.ui-note--warn b{color:var(--warn)}
.ui-note--risk{border-color:var(--err-line);background:var(--err-soft)}.ui-note--risk>.ui-ic,.ui-note--risk b{color:var(--err)}
.ui-note--ok{border-color:var(--ok-line);background:var(--ok-soft)}.ui-note--ok>.ui-ic,.ui-note--ok b{color:var(--ok)}
/* ================================================================ 表单：输入、单选卡、勾选 */
.ui-field{display:grid;gap:8px}
.ui-field>label,.ui-label{color:var(--text);font-size:14px;font-weight:600}
.ui-field small,.ui-hint{color:var(--mute);font-size:12.5px;line-height:1.6}
.ui-input{width:100%;height:48px;padding:0 16px;border:1px solid var(--field);border-radius:var(--r-md);background:var(--card);color:var(--text);font:inherit;font-size:15px;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
textarea.ui-input{height:auto;min-height:110px;padding:12px 16px;line-height:1.7;resize:vertical}
.ui-input::placeholder{color:var(--mute)}
.ui-input:hover{border-color:var(--sub)}
.ui-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.ui-field.is-err .ui-input,.ui-input[aria-invalid="true"]{border-color:var(--err)}
.ui-field.is-err small,.ui-err{color:var(--err)}
.ui-inline{display:flex;gap:10px}.ui-inline .ui-input{flex:1}.ui-inline .ui-btn{flex:none}
.ui-choices{display:grid;gap:12px}
.ui-choice{position:relative;display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:1px solid var(--line2);border-radius:var(--r-md);background:var(--card);cursor:pointer;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.ui-choice:hover{border-color:var(--line3)}
.ui-choice input{position:absolute;opacity:0;pointer-events:none}
.ui-choice .dot{display:grid;place-items:center;width:20px;height:20px;flex:none;margin-top:2px;border:1.5px solid var(--field);border-radius:50%}
.ui-choice .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--fill);transform:scale(0);transition:transform var(--dur-1) var(--ease)}
.ui-choice b{display:block;font-size:15px;font-weight:600}
.ui-choice small{display:block;margin-top:2px;color:var(--sub);font-size:13px;line-height:1.6}
.ui-choice .r{margin-left:auto;color:var(--accent-big);font:var(--fw-display) 20px/1.3 var(--font-display);white-space:nowrap}
/* 选中的圆点用相邻选择器（不支持 :has 的旧内核也能看到选中），整张卡的描边用 :has 增强 */
.ui-choice input:checked+.dot{border-color:var(--accent)}
.ui-choice input:checked+.dot::after{transform:scale(1)}
.ui-choice input:focus-visible+.dot{outline:2px solid var(--accent);outline-offset:2px}
.ui-choice:has(input:checked){border-color:var(--accent-line);background:var(--accent-soft);box-shadow:var(--shadow-sel)}
.ui-check{display:flex;align-items:flex-start;gap:10px;color:var(--sub);font-size:13.5px;line-height:1.7;cursor:pointer}
.ui-check input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:18px;height:18px;flex:none;margin:3px 0 0;border:1.5px solid var(--field);border-radius:5px;background:var(--card);cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1)}
.ui-check input::after{content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid var(--on-fill);border-bottom:2px solid var(--on-fill);transform:rotate(-45deg) scale(0);transition:transform var(--dur-1) var(--ease)}
.ui-check input:checked{background:var(--fill);border-color:var(--fill)}
.ui-check input:checked::after{transform:rotate(-45deg) scale(1)}
.ui-check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ui-check a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px}
/* ================================================================ 标签页、面包屑、分页 */
.ui-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tabs [role="tab"],.ui-tabs a{position:relative;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border:0;background:none;color:var(--sub);font:inherit;font-size:14.5px;font-weight:500;white-space:nowrap;text-decoration:none;cursor:pointer}
.ui-tabs [role="tab"]:hover,.ui-tabs a:hover{color:var(--text)}
.ui-tabs [aria-selected="true"],.ui-tabs [aria-current]{color:var(--text);font-weight:600}
.ui-tabs [aria-selected="true"]::after,.ui-tabs [aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--fill)}
.ui-tabs .n{color:var(--mute);font-size:12.5px;font-variant-numeric:tabular-nums}
.ui-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;color:var(--mute);font-size:13px}
.ui-crumbs a{color:var(--sub);text-decoration:none}
.ui-crumbs a:hover{color:var(--text)}
.ui-crumbs li+li::before{content:"/";margin-right:6px;color:var(--line3)}
.ui-crumbs [aria-current]{color:var(--text)}
.ui-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ui-pager a,.ui-pager span{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line2);border-radius:var(--r-sm);color:var(--sub);font-size:14px;font-variant-numeric:tabular-nums;text-decoration:none}
.ui-pager a:hover{border-color:var(--line3);color:var(--text)}
.ui-pager [aria-current]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);font-weight:600}
.ui-pager .gap{border-color:transparent}
.ui-pager .ui-ic{width:16px;height:16px}
/* 上一节 / 下一节（课页底部） */
.ui-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ui-prevnext a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);text-decoration:none;color:var(--text);transition:border-color var(--dur-1)}
.ui-prevnext a:hover{border-color:var(--line3)}
.ui-prevnext small{color:var(--mute);font-size:12.5px}
.ui-prevnext b{font-weight:600;font-size:15px;line-height:1.5}
.ui-prevnext a+a{text-align:right}
/* ================================================================ 课页阅读区：正文宽度、标题层级、引用、代码、图片说明、课末卡 */
.ui-prose{max-width:var(--prose-w);color:var(--prose);font-size:var(--fs-prose);line-height:var(--lh-prose);overflow-wrap:break-word}
.ui-prose>*{margin:0}
.ui-prose>*+*{margin-top:1.05em}
.ui-prose .ui-kicker+h1{margin-top:10px}
.ui-prose h1{color:var(--text);font:var(--fw-display) clamp(30px,1.4vw + 22px,40px)/1.25 var(--font-display);letter-spacing:var(--ls-display);text-wrap:balance}
.ui-prose h2{margin-top:2.1em;color:var(--text);font:var(--fw-strong) clamp(22px,.6vw + 19px,26px)/1.35 var(--font-display)}
.ui-prose h3{margin-top:1.8em;color:var(--text);font:var(--fw-strong) 19px/1.45 var(--font-display)}
.ui-prose h4{margin-top:1.6em;color:var(--text);font-weight:600;font-size:17px}
.ui-prose h2+*,.ui-prose h3+*,.ui-prose h4+*{margin-top:.6em}
.ui-prose a:not(.ui-btn):not(.ui-link){color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px}
.ui-prose a:not(.ui-btn):not(.ui-link):hover{text-decoration-color:currentColor}
.ui-prose .ui-crumbs{padding-left:0}
.ui-prose .ui-crumbs a:not(.ui-btn){color:var(--sub);text-decoration:none}
.ui-prose strong,.ui-prose b{color:var(--text);font-weight:600}
.ui-prose mark{padding:0 .15em;border-radius:3px;background:var(--accent-soft2);color:var(--text)}
.ui-prose ul,.ui-prose ol{padding-left:1.35em}
.ui-prose li+li{margin-top:.45em}
.ui-prose li::marker{color:var(--mute)}
.ui-prose blockquote{padding:2px 0 2px 18px;border-left:3px solid var(--fill);color:var(--sub)}
.ui-prose blockquote p{margin:0}
.ui-prose code{padding:.15em .4em;border:1px solid var(--line);border-radius:6px;background:var(--bg2);color:var(--text);font:.86em/1.5 var(--font-mono)}
.ui-prose pre{overflow-x:auto;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg2);font-size:14px;line-height:1.7}
.ui-prose pre code{padding:0;border:0;background:none;font-size:inherit}
.ui-prose hr{height:1px;border:0;background:var(--line);margin:2.4em 0}
.ui-prose figure{margin-top:1.8em;margin-bottom:1.8em}
.ui-figure img,.ui-figure svg,.ui-prose figure img,.ui-prose figure svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.ui-figure figcaption,.ui-prose figcaption{margin-top:10px;color:var(--mute);font-size:13.5px;line-height:1.7}
/* 浅色衬底卡：深色页面里放白底截图（模板、实盘截图）用，卡片本身走浅色令牌 */
.ui-paper{padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.ui-paper img{border:0;border-radius:var(--r-sm)}
/* 课末卡 */
.ui-endcard{padding:26px 28px 24px;border:1px solid var(--accent-line);border-radius:var(--r);background:radial-gradient(120% 70% at 0% 0%,var(--accent-soft) 0%,transparent 60%),linear-gradient(180deg,var(--card),var(--card2));box-shadow:var(--shadow-sel)}
.ui-endcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--mute);font-size:13px}
.ui-endcard h3{margin:16px 0 0;font:var(--fw-display) 22px/1.35 var(--font-display);color:var(--text)}
.ui-endcard p{margin:8px 0 0;color:var(--sub);font-size:14.5px;line-height:1.8}
.ui-endcard .ui-progress{margin-top:18px}
.ui-endcard .ui-acts{margin-top:20px}
/* ================================================================ 图表（R2 课节图表统一用这些类，颜色全走 --ch-*） */
.ui-chart{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ch-bg)}
.ui-chart .c-grid{stroke:var(--ch-grid);stroke-width:1}
.ui-chart .c-axis{stroke:var(--ch-axis-line);stroke-width:1}
.ui-chart .c-tick{fill:var(--ch-axis);font:12px var(--font);font-variant-numeric:tabular-nums}
.ui-chart .c-up{fill:var(--ch-up);stroke:var(--ch-up)}
.ui-chart .c-dn{fill:var(--ch-down);stroke:var(--ch-down)}
.ui-chart .c-wick{stroke-width:1.2}
.ui-chart .c-vup{fill:var(--ch-vol-up)}
.ui-chart .c-vdn{fill:var(--ch-vol-down)}
.ui-chart .c-ma1,.ui-chart .c-ma2,.ui-chart .c-ma3{fill:none;stroke-width:1.6;stroke-linejoin:round}
.ui-chart .c-ma1{stroke:var(--ch-ma1)}.ui-chart .c-ma2{stroke:var(--ch-ma2)}.ui-chart .c-ma3{stroke:var(--ch-ma3)}
.ui-chart .c-win{fill:var(--ch-up-soft);stroke:var(--ch-up-line)}
.ui-chart .c-loss{fill:var(--ch-down-soft);stroke:var(--ch-down-line)}
.ui-chart .c-mark{stroke:var(--ch-mark);stroke-width:1.4;stroke-dasharray:5 4;fill:none}
.ui-chart .c-markbg{fill:var(--ch-mark-soft)}
.ui-chart .c-cross{stroke:var(--ch-cross);stroke-width:1;stroke-dasharray:3 3}
.ui-chart .c-label rect{fill:var(--ch-label-bg);stroke:var(--ch-label-line)}
.ui-chart .c-label text{fill:var(--ch-label-text);font:600 12px var(--font)}
.ui-chart .c-label .k{fill:var(--ch-axis);font-weight:400}
.ui-chart .c-tag-up rect{fill:var(--ch-up)}.ui-chart .c-tag-dn rect{fill:var(--ch-down)}.ui-chart .c-tag-mk rect{fill:var(--ch-mark)}
.ui-chart .c-tag-up text,.ui-chart .c-tag-dn text,.ui-chart .c-tag-mk text{fill:var(--ch-bg);font:600 11.5px var(--font);font-variant-numeric:tabular-nums}
.ui-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;color:var(--sub);font-size:12.5px}
.ui-legend i{display:inline-block;width:14px;height:3px;margin-right:6px;border-radius:2px;vertical-align:3px}
/* ================================================================ 动效（克制：入场上浮一次，尊重「减少动态效果」） */
@media (prefers-reduced-motion:no-preference){
.ui-rise{animation:ui-rise .7s var(--ease) both}
.ui-rise:nth-child(2){animation-delay:.06s}.ui-rise:nth-child(3){animation-delay:.12s}.ui-rise:nth-child(4){animation-delay:.18s}
}
@keyframes ui-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ui *,.ui *::before,.ui *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
/* ================================================================ 响应式 */
@media (max-width:1080px){
.ui-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-confirm-row{grid-template-columns:1fr 1fr;row-gap:20px}
.ui-cf-pay{text-align:left}
}
@media (max-width:960px){
.ui-faq{grid-template-columns:1fr;gap:28px}
.ui-rows{grid-template-columns:1fr}
}
@media (max-width:720px){
:root{--gutter:16px;--nav-h:60px}
.ui-cards,.ui-cards--2{grid-template-columns:1fr;gap:14px}
.ui-m-first{order:-1}
.ui-card{padding:24px 22px 22px}
.ui-head{flex-direction:column;align-items:stretch;gap:18px;margin-bottom:24px}
.ui-head--center{align-items:center}
.ui-seg{display:grid;width:100%}
.ui-seg button,.ui-seg a{min-width:0;height:46px;padding:0 10px;font-size:15px}
.ui-price{margin-top:24px}
.ui-confirm{padding:22px 18px 20px}
.ui-confirm-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "s p" "i i";gap:16px 18px;align-items:start}
.ui-confirm-row .cf-t{grid-area:t}.ui-confirm-row .cf-s{grid-area:s}.ui-confirm-row .cf-i{grid-area:i}.ui-confirm-row .cf-p{grid-area:p;text-align:right}
.ui-cf-pay b{font-size:40px}
.ui-confirm-tip{align-items:flex-start;flex-wrap:wrap;gap:10px 14px}
.ui-confirm-tip div{flex:1 1 calc(100% - 40px)}
.ui-confirm-tip .ui-link{margin-left:36px}
.ui-confirm-acts{flex-direction:column;align-items:stretch}
.ui-confirm-acts .ui-acts{flex-direction:column;align-items:stretch}
.ui-confirm-acts .ui-acts .ui-btn{width:100%}
.ui-agree{text-align:left}
.ui-dock{display:flex}
.ui-search{width:100%}
.ui-group-head{flex-wrap:wrap;padding:22px 18px 18px;gap:14px}
.ui-group-t{flex-basis:calc(100% - 62px)}
.ui-group-t h3{font-size:22px}
.ui-group-side{flex-direction:column;align-items:flex-start;width:100%;text-align:left}
.ui-group-stat{white-space:normal}
.ui-rows{padding:0 18px}
.ui-row{padding:14px 0;gap:14px}
.ui-row .av{width:38px;height:38px;font-size:12px}
.ui-group-foot{padding:12px 18px 16px}
.ui-qa summary{padding:20px 0;font-size:15.5px}
.ui-qa p{padding-right:0}
.ui-stats{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:var(--r)}
.ui-stats div{padding:12px 6px;font-size:12px;white-space:normal;line-height:1.4;text-align:center}
.ui-stats b{display:block;margin:0 0 4px}
.ui-table th,.ui-table td{padding:12px 14px}
.ui-prevnext{grid-template-columns:1fr}
.ui-prevnext a+a{text-align:left}
.ui-endcard{padding:22px 18px 20px}
.ui-acts--stack{flex-direction:column;align-items:stretch}
.ui-acts--stack .ui-btn{width:100%}
}
@media print{.ui-dock{display:none!important}.ui-card,.ui-group,.ui-confirm{box-shadow:none}}
/* ================================================================ 站点外壳皮肤（:root.ui 下生效）
现有结构不改，换成夜金 / 浅色金的样子：site_nav 顶栏（.tl-nvbar：品牌、「课程」按钮、常用入口、右侧账号区）、
account.js 画的工具区（搜索、外观、App、登录、免费试看）与课程面板 / 手机抽屉（.tl-mm）、site_footer 页脚（.tl-site-foot）。
选择器统一以 :root.ui body 开头（权重 0,3,1 起），盖过 account.js 运行时插入的样式（最高 0,3,0），与先后顺序无关。 */
:root.ui body .tl-nvbar{height:var(--nav-h);gap:16px;border-bottom:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}
:root.ui body .tl-nv-brand{color:var(--text);font:700 19px/1 var(--font-display);letter-spacing:-.4px}
:root.ui body .tl-nv-brand span{color:var(--accent-big)}
:root.ui body .tl-mm-btn{height:38px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--r-pill);background:transparent;color:var(--text);font-weight:600}
:root.ui body .tl-mm-btn:hover{border-color:var(--line3)}
:root.ui body .tl-mm-btn[aria-expanded="true"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
@media (max-width:860px){:root.ui body .tl-mm-btn{width:38px;padding:0;border-radius:var(--r-sm)}}
:root.ui body .tl-nv-ql{align-self:center;align-items:center;gap:2px}
:root.ui body .tl-nv-ql a{height:36px;padding:0 13px;border:1px solid transparent;border-radius:var(--r-pill);color:var(--sub);font-size:14.5px;font-weight:500;transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1)}
:root.ui body .tl-nv-ql a svg{display:none}
:root.ui body .tl-nv-ql a:hover{color:var(--text);background:var(--hover)}
:root.ui body .tl-nv-ql a[aria-current]{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
:root.ui body .tl-nv-ql a[aria-current]::after{display:none}
:root.ui body .tl-nvbar.tl-nv-qtight .tl-nv-ql a{padding:0 9px}
:root.ui body .tl-tools{gap:6px}
:root.ui body :is(.tl-search-btn,.tl-look-btn,.tl-app-btn){height:38px;min-width:38px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--sub)}
:root.ui body :is(.tl-search-btn,.tl-look-btn,.tl-app-btn):hover,:root.ui body .tl-look-btn[aria-expanded="true"]{color:var(--text);background:var(--hover)}
:root.ui body .tl-acct-btn{height:38px;padding:0 15px;border:0;border-radius:var(--r-sm);background:var(--raise2);color:var(--text);font-size:14px;font-weight:600}
:root.ui body .tl-acct-btn:hover{color:var(--text);background:var(--line2)}
:root.ui body .tl-acct-guest .tl-acct-btn svg{display:none}
:root.ui body .tl-free-btn{height:38px;padding:0 16px;border:0;border-radius:var(--r-sm);background:var(--fill);color:var(--on-fill);font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px var(--fill-edge)}
:root.ui body .tl-free-btn:hover{background:var(--fill-hover);color:var(--on-fill);filter:none}
:root.ui body .tl-acct-menu,:root.ui body .tl-look-pop{border-color:var(--line2);border-radius:var(--r-md);background:var(--glass2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-pop)}
:root.ui body .tl-mm{border-bottom-color:var(--line);background:var(--glass2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-pop)}
:root.ui body .tl-mm-scrim{background:var(--scrim)}
:root.ui body .tl-mm-cc{border-color:var(--line);border-radius:var(--r-md);background:linear-gradient(180deg,var(--card),var(--card2))}
:root.ui body .tl-mm-cc:hover{border-color:var(--line3)}
:root.ui body .tl-mm-it .ib{border:1px solid var(--line2);background:linear-gradient(180deg,var(--raise),var(--card));color:var(--text)}
:root.ui body .tl-mm-it:hover,:root.ui body .tl-mm-it.is-cur{background:var(--hover)}
:root.ui body .tl-mm-cta a{border-radius:var(--r-md);font-weight:600}
:root.ui body .tl-mm-cta .p{background:var(--fill);color:var(--on-fill)!important;box-shadow:inset 0 0 0 1px var(--fill-edge)}
:root.ui body .tl-mm-cta .g{border:1px solid var(--line2);background:var(--raise2)}
:root.ui body .tl-mm-ln{border-top-color:var(--line)}
:root.ui body .tl-mm-ln:hover{color:var(--accent)}
/* 页脚（R4 重排）：分隔线是通栏（有固定侧栏的页面只画在正文区上方，见 trader.css、docs.css、help.css），内容块与本页正文主栏同宽同中线：
宽度读 --foot-w（各页样式表按自己的正文主栏宽度设，没设就是 --max）。账号、域名成组不断行（.tl-nw），三行用弹性换行，组与组之间断，分隔点（.tl-sep）不显示。
--foot-shift：正文栏中线相对视口中线的偏移（有侧栏、右侧本页目录的页面用）。
手机：三组链接同一套两列网格（组名单独一行），点按区域 36px 高，左右 16px 安全边距 */
:root.ui body{margin:0;text-wrap:pretty}
:root.ui body .tl-site-foot{box-sizing:border-box;max-width:none;margin:0;padding:44px max(var(--gutter),calc(50% - var(--foot-shift,0px) - var(--foot-w,var(--max)) / 2)) 52px max(var(--gutter),calc(50% + var(--foot-shift,0px) - var(--foot-w,var(--max)) / 2));border-top:1px solid var(--line);color:var(--mute);font-size:13px;line-height:1.9;text-align:left}
:root.ui body .tl-site-foot b{color:var(--text);font-weight:600}
:root.ui body .tl-site-foot a{color:var(--sub);text-decoration:none;white-space:nowrap}
:root.ui body .tl-site-foot a:hover{color:var(--text)}
:root.ui body .tl-site-foot .tl-nw{white-space:nowrap}
:root.ui body .tl-site-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
:root.ui body .tl-site-nav-g{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-width:0}
:root.ui body .tl-site-nav-h{margin-bottom:6px;color:var(--text);font-size:13.5px;font-weight:600}
:root.ui body :is(.tl-site-ct,.tl-site-legal){display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
:root.ui body .tl-site-ct .tl-nw:first-child{margin-right:-8px}
:root.ui body .tl-site-foot .tl-sep{display:none}
:root.ui body .tl-site-social,:root.ui body .tl-site-credit{justify-content:flex-start}
:root.ui body .tl-site-social-h{width:auto;margin-right:6px}
:root.ui body .tl-site-foot .tl-site-social a{width:36px;height:36px;color:var(--sub)}
:root.ui body .tl-site-foot .tl-site-social a:hover{background:var(--hover);color:var(--text)}
@media (max-width:720px){
:root.ui body .tl-site-foot{padding-top:36px;padding-bottom:40px;font-size:13.5px}
:root.ui body .tl-site-nav{grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:20px;padding-bottom:20px}
:root.ui body .tl-site-nav-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
:root.ui body .tl-site-nav-h{grid-column:1 / -1;margin-bottom:2px;font-size:14px}
:root.ui body .tl-site-nav-g a{display:flex;align-items:center;min-height:36px;font-size:14px;line-height:1.4;white-space:normal}
:root.ui body :is(.tl-site-ct,.tl-site-legal){gap:2px 14px}
}
@media (max-width:650px){:root.ui body .tl-site-foot{padding-bottom:96px}}
/* ================================================================ R1-A（子任务 A：营销页、首页、外壳落地，2026-10-14）
新增组件：首屏（每日背景图容器的补充、问题行 .ui-hook）、新手主线编号卡 .ui-steps、课程卡 .ui-course、三档摘要 .ui-band、
问题选择胶囊 .ui-chips、课节列表 .ui-lessons、区块 .ui-block（营销页的区块上边距）、大号状态胶囊 .ui-status--big、
课程卡封面 .ui-course--cv（同日追加）。只用令牌，不写死颜色。 */
.ui-block{position:relative;padding-top:var(--sec)}
.ui-block:last-child{padding-bottom:var(--sec)}
.ui-status--big{height:38px;padding:0 16px;font-size:13.5px}
.ui-status--big .ui-ic{display:inline-block;width:15px;height:15px;stroke-width:1.8}
/* 首屏：背景图容器（.ui-herobg[data-daily-bg]，图由 Worker 按北京日期写好，见 build/hero_bg.py）里的内容 */
.ui-herobg-in .ui-eyebrow{justify-content:center}
.ui-herobg-in .ui-stats{margin-top:44px}
.ui-herobg-img img{background:var(--bg)}
.ui-hook{display:inline-flex;align-items:flex-start;gap:10px;max-width:680px;margin:22px 0 0;color:var(--sub);font-size:14.5px;line-height:1.7;text-align:left}
.ui-hook .ui-ic{width:17px;height:17px;margin-top:3px;color:var(--mute)}
.ui-hero--sm{font-size:clamp(32px,2.6vw + 18px,60px)}
/* 新手主线：编号卡片，三列 → 两列 → 一列；第一张 .is-sel（从这里开始） */
.ui-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ui-steps>li{display:flex;min-width:0}
.ui-step{position:relative;display:flex;flex:1;flex-direction:column;min-width:0;padding:24px 24px 20px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card),var(--card2));color:var(--text);text-decoration:none;transition:border-color var(--dur-2),box-shadow var(--dur-3) var(--ease)}
.ui-step:hover{border-color:var(--line3)}
.ui-step.is-sel{border-color:var(--accent-line);box-shadow:var(--shadow-sel);background:radial-gradient(120% 60% at 0% 0%,var(--accent-soft) 0%,transparent 55%),linear-gradient(180deg,var(--card),var(--card2))}
.ui-step-top{display:flex;align-items:center;gap:10px}
.ui-step-n{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--raise);color:var(--text);font:600 13px/1 var(--font);font-variant-numeric:tabular-nums}
.ui-step.is-sel .ui-step-n{border-color:transparent;background:var(--fill);color:var(--on-fill)}
.ui-step-top .ui-tag:last-child{margin-left:auto}
.ui-step h3{margin:18px 0 0;font:var(--fw-display) 19px/1.4 var(--font-display);color:var(--text)}
.ui-step p{margin:8px 0 0;flex:1;color:var(--sub);font-size:13.5px;line-height:1.75}
.ui-step-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--mute);font-size:12.5px}
.ui-step-foot .ui-link{font-size:13px;white-space:nowrap}
/* 课程卡：图标方块 + 状态、课名、定位、两格数字（已上线 / 免费）、适合谁、一句事实、价格一行、两颗按钮 */
.ui-course{position:relative;display:flex;flex-direction:column;min-width:0;padding:26px 26px 22px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card),var(--card2));box-shadow:var(--shadow);color:var(--text);transition:border-color var(--dur-2)}
.ui-course:hover{border-color:var(--line3)}
.ui-course.is-main{border-color:var(--accent-line);box-shadow:var(--shadow-sel);background:radial-gradient(120% 55% at 0% 0%,var(--accent-soft) 0%,transparent 55%),linear-gradient(180deg,var(--card),var(--card2))}
.ui-course h3{margin:20px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:var(--fw-display) 21px/1.3 var(--font-display);color:var(--text)}
.ui-course h3 a{color:inherit;text-decoration:none}
.ui-course .pos{margin:8px 0 0;color:var(--prose);font-size:14px;line-height:1.7;min-height:48px}
.ui-course-nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.ui-course-nums>div{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--hover)}
.ui-course-nums b{display:block;color:var(--text);font:var(--fw-display) 26px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.ui-course-nums>div+div b{color:var(--accent-big)}
.ui-course-nums small{display:block;margin-top:4px;color:var(--mute);font-size:12px;line-height:1.5}
.ui-course .who{margin:16px 0 0;color:var(--sub);font-size:13.5px;line-height:1.7}
.ui-course .fact{display:flex;gap:8px;margin:8px 0 0;color:var(--sub);font-size:13.5px;line-height:1.7}
.ui-course .fact .ui-ic{width:15px;height:15px;margin-top:4px;color:var(--mute)}
.ui-course-price{flex:1;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--sub);font-size:13.5px;line-height:1.7}
.ui-course-price b{color:var(--text);font-weight:600}
.ui-course-acts{display:flex;gap:10px;margin-top:16px}
.ui-course-acts .ui-btn{flex:1;height:44px;padding:0 14px;font-size:14px;border-radius:var(--r-pill)}
.ui-course-acts .ui-btn--dark{flex:none}
.ui-course .ui-progress{margin-top:10px}
/* 课程卡带封面（.ui-course--cv，2026-10-14 站长定：首页放回 10-12 选定的封面方案 A「深色大标题」）：封面贴边放最上面，16:9 不裁；
正文包进 .ui-course-bd，课名和状态一行（.ui-course-hd），封面右下角一个金色播放圆钮 .ui-course-pb */
.ui-course--cv{padding:0;overflow:hidden}
.ui-course-cv{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--raise);border-bottom:1px solid var(--line)}
.ui-course-cv img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease)}
.ui-course-cv:hover img{transform:scale(1.025)}
.ui-course-pb{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--fill);color:var(--on-fill);box-shadow:var(--shadow-pop)}
.ui-course-pb .ui-ic{width:18px;height:18px;margin-left:3px}
.ui-course-bd{display:flex;flex:1;flex-direction:column;min-width:0;padding:22px 24px}
.ui-course-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 12px}
.ui-course-hd h3{margin:0}
.ui-course-hd .ui-status{flex:none;margin-top:1px}
/* 三档摘要：三张可点的小卡（名称、价格、一句话），选中档金色描边 */
.ui-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ui-band>a{display:flex;flex-direction:column;min-width:0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card),var(--card2));color:var(--text);text-decoration:none;transition:border-color var(--dur-2)}
.ui-band>a:hover{border-color:var(--line3)}
.ui-band>a.is-sel{border-color:var(--accent-line);box-shadow:var(--shadow-sel)}
.ui-band-t{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:600}
.ui-band-t small{color:var(--mute);font-weight:400;font-size:13px}
.ui-band-p{margin-top:14px;color:var(--accent-big);font:var(--fw-display) 38px/1 var(--font-display);font-variant-numeric:tabular-nums}
.ui-band-p span{margin-left:4px;color:var(--sub);font:400 14px/1 var(--font)}
.ui-band p{margin:10px 0 0;color:var(--sub);font-size:13.5px;line-height:1.7}
/* 问题选择胶囊（标签页）：选中项金色描边胶囊，与顶栏当前项一致 */
.ui-chips{display:flex;flex-wrap:wrap;gap:8px}
.ui-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:42px;padding:8px 16px;border:1px solid var(--line2);border-radius:var(--r-pill);background:transparent;color:var(--sub);font:inherit;font-size:14.5px;line-height:1.45;text-align:left;text-decoration:none;cursor:pointer;transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1)}
.ui-chip:hover{color:var(--text);border-color:var(--line3)}
.ui-chip[aria-selected="true"],.ui-chip[aria-pressed="true"],.ui-chip[aria-current]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);font-weight:600}
.ui-chip .ui-ic{width:15px;height:15px}
/* 课节列表：序号 + 课名（小字写课程与章）+ 右侧标签 */
.ui-lessons{list-style:none;margin:0;padding:0}
.ui-lessons a{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.ui-lessons li:last-child a{border-bottom:0}
.ui-lessons a:hover b{color:var(--accent)}
.ui-lessons .n{flex:none;width:26px;color:var(--accent);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ui-lessons .t{flex:1;min-width:0}
.ui-lessons b{display:block;font-size:15px;font-weight:600;line-height:1.5;transition:color var(--dur-1)}
.ui-lessons small{display:block;color:var(--mute);font-size:12.5px;line-height:1.5}
@media (max-width:1080px){.ui-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-band{grid-template-columns:1fr}}
@media (max-width:720px){
.ui-steps{grid-template-columns:1fr;gap:12px}
.ui-step{padding:20px 18px 16px}
.ui-course{padding:22px 20px 18px}
.ui-course .pos{min-height:0}
.ui-course--cv{padding:0}
.ui-course-bd{padding:18px 18px 18px}
.ui-course-pb{right:12px;bottom:12px;width:40px;height:40px}
.ui-hook{font-size:13.5px}
.ui-herobg-in .ui-stats{margin-top:30px}
.ui-band-p{font-size:34px}
}
/* R1-A 顶栏（2026-10-14 站长定，照样稿 home.html 的顶栏：中间纯文字链接、「全部课程」下箭头开课程面板、右侧搜索与外观只留图标）：
样式写在 build/site_nav.py 的 NAV_CSS，随顶栏内联进页面（没引本文件的旧页面与课页顶栏也能直接用），这里不重复。 */
/* ================================================================ R1-B：工具页顶栏、品牌字标、轻提示（2026-10-14 夜金改版 R1，子任务 B）
ui-logo：品牌字标「Trade」+ 大字金「Learn」，与站点顶栏的字标同一个样子。
ui-wbar：付款、登录、我的账号、付费墙等 Worker 页面的顶栏（字标、返回、客服、深浅色），粘在顶部、毛玻璃底，与站点顶栏同高；
…
ui-wbtn：顶栏右侧的方形图标按钮（深浅色切换），与 ui-btn--dark ui-btn--sm 同高同描边。
ui-toast：底部居中的一行轻提示（复制微信号等），加 .on 出现，四秒后由脚本收起。 */
.ui-logo{display:inline-flex;align-items:center;flex:none;color:var(--text);font:700 19px/1 var(--font-display);letter-spacing:-.4px;white-space:nowrap;text-decoration:none}
.ui-logo span{color:var(--accent-big)}
.ui-logo:hover{color:var(--text)}
.ui-wbar{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}
.ui-wbar-in{display:flex;align-items:center;gap:12px;height:var(--nav-h);padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.ui-wbar-end{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto}
.ui-wbar-end .ui-btn{gap:6px}
.ui-wbar-end .ui-btn svg{width:16px;height:16px}
.ui-wbtn{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;margin:0;padding:0;border:1px solid var(--line2);border-radius:var(--r-sm);background:linear-gradient(180deg,var(--raise),var(--card));color:var(--sub);box-shadow:inset 0 1px 0 var(--highlight);cursor:pointer;transition:color var(--dur-1),border-color var(--dur-1)}
.ui-wbtn:hover{color:var(--text);border-color:var(--line3)}
.ui-wbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:360px){.ui-wbar-end .ui-btn span{display:none}.ui-wbar-end .ui-btn{width:38px;padding:0}}
@media print{.ui-wbar{display:none}}
.ui-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;width:max-content;max-width:calc(100vw - 32px);padding:11px 18px;border:1px solid var(--line2);border-radius:var(--r-md);background:var(--glass2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-pop);color:var(--text);font-size:14px;line-height:1.6;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity var(--dur-2),transform var(--dur-2) var(--ease)}
.ui-toast.on{opacity:1;transform:translate(-50%,0)}
/* ================================================================ R4：价格主货币（2026-10-14 站长定）
首屏脚本按浏览器时区在 上写 data-cur：中国大陆时区 cny（人民币为主、美元小字），其他时区 usd（美元为主、人民币小字），
读不到时区与搜索引擎按 cny。页面里两种写法都输出（.px-cny / .px-usd），这里只管显示哪一种，不闪。
.px-i：行内价格，数字和单位不拆行。 */
.px-cny,.px-usd{display:contents}
:root:not([data-cur="usd"]) .px-usd,:root[data-cur="usd"] .px-cny{display:none!important}
.px-i,.px-i b{white-space:nowrap}
/* 价格组件里给 span 写的样式（单位小字等）不能落到外层的 .px-cny / .px-usd 上：主价格两种货币都是同一个金色大字 */
:is(.ui-price,.ui-cf-pay,.ui-dock-p,.ui-band-p,.pbox,.t3-p,.tr-amt) :is(.px-cny,.px-usd){margin:0;color:inherit;font:inherit;letter-spacing:inherit;align-self:auto}
.ui-price :is(.px-cny,.px-usd)>.ui-ic{width:22px;height:22px;color:var(--mute);stroke-width:1.6}