/* Leostu 官网、登录注册、条款、访问码页
   视觉：浅灰底 + 白卡片 + 三级墨色，唯一操作色是蓝；标题 Inter Tight，正文 Inter，中文用系统字体 */

:root {
  --bg:#F1F2F4; --surface:#FFFFFF; --surface-2:#F7F8F9; --ink:#16171B; --ink-2:#5F646C; --ink-3:#9A9FA7;
  --line:rgba(20,21,24,.08); --line-2:rgba(20,21,24,.14);
  --brand:#1D6BF3; --brand-deep:#1558D6; --brand-soft:#E8F0FE; --brand-ink:#FFFFFF;
  --ok:#167C66; --warn:#B25E00; --bad:#D1453B; --bad-soft:#FCEBEA;
  --shadow-1:0 0 0 1px var(--line), 0 1px 3px rgba(15,35,70,.06);
  --shadow-2:0 0 0 1px rgba(20,21,24,.06), 0 40px 80px -40px rgba(15,35,70,.32);
  --shadow-pop:0 10px 30px -12px rgba(15,35,70,.28), 0 2px 6px -2px rgba(15,35,70,.08);
  --glass:color-mix(in srgb, var(--bg) 82%, transparent);
  --display:"Inter Tight", "Inter", -apple-system, "SF Pro Display", system-ui, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --sans:"Inter", -apple-system, "SF Pro Text", system-ui, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif:"Newsreader", "Songti SC", "Noto Serif SC", Georgia, serif;
  --num:"Inter Tight", "Inter", system-ui, sans-serif;
  --wordmark:"Syne", "Inter Tight", system-ui, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --enter:cubic-bezier(.16,1,.3,1);
  --max:1360px; --gutter:clamp(16px, 4vw, 40px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#09090B; --surface:#16171A; --surface-2:#1C1D21; --ink:#ECECEE; --ink-2:#A2A6AD; --ink-3:#686C74;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
    --brand:#5B9BFF; --brand-deep:#7AAEFF; --brand-soft:#17243A; --brand-ink:#08111F;
    --bad:#FF7B72; --bad-soft:#3A1B1A;
    --shadow-1:0 0 0 1px var(--line);
    --shadow-2:0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -40px rgba(0,0,0,.8);
    --shadow-pop:0 0 0 1px var(--line), 0 16px 40px -16px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#09090B; --surface:#16171A; --surface-2:#1C1D21; --ink:#ECECEE; --ink-2:#A2A6AD; --ink-3:#686C74;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --brand:#5B9BFF; --brand-deep:#7AAEFF; --brand-soft:#17243A; --brand-ink:#08111F;
  --bad:#FF7B72; --bad-soft:#3A1B1A;
  --shadow-1:0 0 0 1px var(--line);
  --shadow-2:0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -40px rgba(0,0,0,.8);
  --shadow-pop:0 0 0 1px var(--line), 0 16px 40px -16px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- 基础 ---------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:inherit; }
img { max-width:100%; display:block; }
h1, h2, h3 { font-family:var(--display); text-wrap:balance; margin:0; }
p { text-wrap:pretty; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:8px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.dim { color:var(--ink-3); }
.mono { font-family:var(--mono); }
.label { margin:0 0 14px; font-size:14px; font-weight:600; color:var(--brand); }

/* ---------- 按钮 ---------- */
.btn { --h:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--h); padding:0 20px; border:0; border-radius:999px;
  font:600 14.5px/1 var(--sans); letter-spacing:-.01em; text-decoration:none; cursor:pointer; white-space:nowrap;
  background:var(--ink); color:var(--bg); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:scale(.985); transition-duration:.08s; }
.btn.primary { background:var(--brand); color:var(--brand-ink); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn.primary:hover { background:var(--brand-deep); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px -8px color-mix(in srgb, var(--brand) 75%, transparent); }
.btn.soft { background:color-mix(in srgb, var(--ink) 7%, var(--bg)); color:var(--ink); }
.btn.soft:hover { background:color-mix(in srgb, var(--ink) 11%, var(--bg)); }
.btn.lg { --h:50px; padding:0 24px; font-size:15.5px; }
.btn.sm { --h:36px; padding:0 15px; font-size:13.5px; }
.btn.block { width:100%; }
.btn[disabled] { opacity:.5; pointer-events:none; }

/* ---------- 顶栏：浮动的玻璃胶囊 ---------- */
.topbar { position:sticky; top:12px; z-index:50; padding:0 var(--gutter); margin-top:12px; }
.topbar .bar { max-width:calc(var(--max) - 2 * var(--gutter)); margin:0 auto; height:58px; display:flex; align-items:center; gap:12px; padding:0 10px 0 18px; border-radius:999px;
  background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:0 0 0 1px var(--line); transition:box-shadow .3s var(--ease), background .3s; }
.topbar.scrolled .bar { box-shadow:var(--shadow-pop); }
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font:800 19px/1 var(--wordmark); letter-spacing:-.01em; color:var(--ink); }
.brand .mark { width:26px; height:26px; flex:none; }
.topbar .links { display:flex; gap:2px; margin-left:18px; }
.topbar .links a, .topbar .login { text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-2); padding:8px 12px; border-radius:999px; transition:color .15s, background .15s; }
.topbar .links a:hover, .topbar .login:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.topbar .tools { display:flex; align-items:center; gap:6px; margin-left:auto; }
.lang-sw { display:inline-flex; padding:3px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); }
.lang-sw a { font-size:12px; font-weight:600; text-decoration:none; color:var(--ink-3); padding:5px 10px; border-radius:999px; }
.lang-sw a.on { color:var(--ink); background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.icon-btn { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--ink-2); cursor:pointer; }
.icon-btn:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); }
.icon-btn svg { width:18px; height:18px; }
.icon-btn .i-moon { display:none; }
:root[data-theme="dark"] .icon-btn .i-sun { display:none; } :root[data-theme="dark"] .icon-btn .i-moon { display:block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-btn .i-sun { display:none; } :root:not([data-theme="light"]) .icon-btn .i-moon { display:block; } }

/* ---------- 首屏 ---------- */
.hero { text-align:center; padding-top:clamp(48px, 9vh, 96px); }
.announce { display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 6px 0 6px; border-radius:999px; text-decoration:none; font-size:13.5px; color:var(--ink-2);
  background:var(--surface); box-shadow:var(--shadow-1); transition:box-shadow .2s; }
.announce:hover { box-shadow:var(--shadow-pop); }
.announce .new { background:var(--brand-soft); color:var(--brand); font-weight:650; font-size:12px; padding:4px 9px; border-radius:999px; }
.announce i { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; background:color-mix(in srgb, var(--ink) 6%, transparent); }
.hero h1 { margin:26px auto 0; max-width:15em; font-size:clamp(36px, 6.4vw, 72px); line-height:1.06; font-weight:600; letter-spacing:-.045em; }
.lang-zh .hero h1 { letter-spacing:-.03em; line-height:1.14; max-width:12.5em; }
.hero .lede { margin:22px auto 0; max-width:34em; font-size:clamp(16.5px, 1.35vw, 19px); line-height:1.6; color:var(--ink-2); letter-spacing:-.01em; }
.hero .cta, .endcta .cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.hero .fine { margin:16px 0 0; font-size:13px; color:var(--ink-3); }

/* ---------- 首屏主图：发链接 → 手机签字 → 接单台更新 ---------- */
.stage-wrap { margin-top:60px; }
.stage { position:relative; max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 330px 1fr; gap:clamp(20px, 3vw, 44px); align-items:center;
  padding:clamp(28px, 4vw, 52px) clamp(20px, 3.4vw, 48px); border-radius:32px; background:var(--surface); box-shadow:var(--shadow-1); overflow:hidden; text-align:left; }
.stage::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 0); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.st-col { position:relative; min-width:0; }
.st-cap { display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:13px; font-weight:600; color:var(--ink-2); }
.st-cap span { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:600 12px var(--num); background:var(--brand-soft); color:var(--brand); }
.st-phone .st-cap { justify-content:center; }

/* ① 聊天 */
.chat { border-radius:22px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.chat-h { display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.chat-h .av { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-weight:600; font-size:14px; background:#FDE9C8; color:#7A4A00; }
.chat-h b { display:block; font-size:13.5px; } .chat-h small { font-size:11.5px; color:var(--ink-3); }
.chat-b { padding:16px 14px 18px; display:flex; flex-direction:column; gap:10px; }
.bub { max-width:92%; font-size:13px; line-height:1.55; padding:10px 12px; border-radius:16px; }
.bub.out { align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:6px; }
.bub.in { align-self:flex-start; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); border-bottom-left-radius:6px; opacity:0; transform:translateY(6px); }
.linkcard { display:flex; gap:10px; align-items:center; margin-top:9px; padding:9px 10px; border-radius:12px; background:rgba(255,255,255,.96); color:#16171B; }
.lc-mark { width:30px; height:30px; border-radius:9px; background:#16171B; color:#fff; display:grid; place-items:center; flex:none; --brand:#5B9BFF; }
.lc-mark .mark { width:18px; height:18px; }
.linkcard b { display:block; font-size:12.5px; } .linkcard small { font-size:10.5px; color:#7B8088; word-break:break-all; }

/* ② 手机 */
.phone { width:300px; margin:0 auto; border-radius:46px; padding:10px; background:#0E0F12; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 50px 90px -40px rgba(15,35,70,.55), 0 0 0 1px rgba(20,21,24,.12); }
.phone > * { background:#FFFFFF; color:#16171B; }
.ph-status { height:44px; border-radius:36px 36px 0 0; display:flex; align-items:center; justify-content:space-between; padding:0 24px; font-size:13px; }
.ph-island { width:84px; height:24px; border-radius:20px; background:#0E0F12; }
.ph-status i { width:22px; height:10px; border-radius:3px; box-shadow:inset 0 0 0 1.5px #16171B; position:relative; }
.ph-status i::after { content:''; position:absolute; inset:2.5px 5px 2.5px 2.5px; background:#16171B; border-radius:1px; }
.ph-top { display:flex; gap:10px; align-items:center; padding:6px 18px 12px; border-bottom:1px solid #EEF0F2; }
.ph-back { font-size:24px; line-height:1; color:#9A9FA7; }
.ph-top small { display:block; font-size:10.5px; color:#9A9FA7; } .ph-top b { font-size:13.5px; }
.ph-body { padding:16px 18px 20px; border-radius:0 0 36px 36px; }
.ph-chip { display:inline-block; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:999px; background:#EEF0F2; color:#5F646C; }
.ph-body h3 { font:600 19px/1.25 var(--display); letter-spacing:-.025em; margin:8px 0 10px; }
.ph-kv { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0 0 12px; font-size:12px; }
.ph-kv dt { color:#9A9FA7; } .ph-kv dd { margin:0; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.ph-clause { font-size:11px; line-height:1.55; color:#5F646C; padding:9px 11px; border-radius:12px; background:#F5F6F8; }
.ph-clause b { color:#16171B; margin-right:4px; }
.ph-pad { position:relative; height:84px; margin-top:12px; border-radius:14px; box-shadow:inset 0 0 0 1px #E3E5E8; background:repeating-linear-gradient(0deg, transparent 0 22px, #F3F4F6 22px 23px); }
.ph-pad small { position:absolute; left:12px; top:8px; font-size:10.5px; color:#9A9FA7; }
.ph-pad .sig { position:absolute; left:10%; bottom:6px; width:80%; height:auto; overflow:visible; }
.sig path { fill:none; stroke:#1D3A8A; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.ph-btn { margin-top:12px; height:44px; border-radius:999px; display:grid; place-items:center; font-weight:600; font-size:14px; background:#1D6BF3; color:#fff; transition:background .3s; }
.ph-btn .b2 { display:none; align-items:center; gap:6px; } .ph-btn .b2 svg { width:16px; height:16px; }

/* ③ 接单台 */
.st-desk .toast { position:absolute; left:10px; right:10px; bottom:-84px; z-index:2; display:flex; gap:11px; align-items:center; padding:12px 14px; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-pop); opacity:0; transform:translateY(-8px) scale(.98); }
.toast b { display:block; font-size:13px; } .toast small { font-size:11.5px; color:var(--ink-3); }
.t-dot { width:28px; height:28px; border-radius:50%; flex:none; background:var(--brand-soft); position:relative; }
.t-dot::after { content:''; position:absolute; inset:9px; border-radius:50%; background:var(--brand); }
.desk { border-radius:22px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); padding:14px; }
.desk-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.p-brand { display:inline-flex; align-items:center; gap:7px; font:600 14px var(--display); letter-spacing:-.02em; }
.p-brand .mark { width:18px; height:18px; }
.desk-h small { font-size:11.5px; color:var(--ink-3); }
.tk { border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); padding:14px; transition:box-shadow .5s; }
.tk-top { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-3); }
.tk-top .sw { width:10px; height:10px; border-radius:3px; background:var(--c); }
.tk-top .pill { margin-left:auto; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink-2); transition:background .3s, color .3s; }
.tk-name { display:block; margin-top:8px; font-size:14.5px; }
.tk-amt { font:600 28px/1.15 var(--num); letter-spacing:-.04em; margin-top:2px; }
.tl { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; }
.tl li { display:grid; grid-template-columns:16px 1fr auto; gap:10px; align-items:center; font-size:12.5px; padding:6px 0; position:relative; color:var(--ink-3); }
.tl li::before { content:''; position:absolute; left:7.25px; top:-6px; height:12px; width:1.5px; background:var(--line-2); }
.tl li:first-child::before { display:none; }
.tl i { width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line-2); background:var(--surface); position:relative; z-index:1; }
.tl li.done { color:var(--ink); } .tl li.done i { background:var(--brand); box-shadow:none; }
.tl li.done i::after, .stage.signed .tl li.sign i::after { content:''; position:absolute; left:5px; top:3px; width:4px; height:7px; border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(45deg); }
.tl small { font-size:11.5px; font-variant-numeric:tabular-nums; }
.desk-foot { display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding:0 4px; font-size:12px; color:var(--ink-3); }
.desk-foot b { font:600 18px var(--num); letter-spacing:-.03em; color:var(--ink); }
.after { display:none; }

/* 动画：一次性。对方回复 → 签名写出来 → 按钮变「已签字」→ 接单台弹提醒、状态更新 */
.stage.play .bub.in { animation:fade-in .5s .4s var(--enter) forwards; }
.stage.play .sig path { animation:draw 1.5s 1s var(--ease) forwards; }
.stage.signed .ph-btn { background:#16171B; } .stage.signed .ph-btn .b1 { display:none; } .stage.signed .ph-btn .b2 { display:inline-flex; }
.stage.signed .toast { animation:toast-in .5s .3s var(--enter) forwards, toast-out .5s 4.6s var(--ease) forwards; }
.stage.signed .before { display:none; } .stage.signed .after { display:inline; }
.stage.signed .tk-top .pill { background:var(--brand-soft); color:var(--brand); }
.stage.signed .tl li.sign { color:var(--ink); } .stage.signed .tl li.sign i { background:var(--brand); box-shadow:none; }
.stage.signed .tk { animation:tk-hi 1.6s .2s var(--ease) both; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes fade-in { to { opacity:1; transform:none; } }
@keyframes toast-in { to { opacity:1; transform:none; } }
@keyframes toast-out { to { opacity:0; transform:translateY(-6px); } }
@keyframes tk-hi { 0%, 100% { box-shadow:inset 0 0 0 1px var(--line); } 30% { box-shadow:inset 0 0 0 1.5px var(--brand), 0 0 0 4px var(--brand-soft); } }

/* ---------- 区块 ---------- */
.sec { padding:clamp(80px, 12vh, 130px) 0 0; }
.sec.tight { padding-top:clamp(64px, 9vh, 100px); }
.sec-head { margin-bottom:40px; }
.sec-head.mid { text-align:center; }
.sec-head h2 { font-size:clamp(30px, 3.6vw, 50px); line-height:1.08; font-weight:600; letter-spacing:-.04em; }
.lang-zh .sec-head h2 { letter-spacing:-.025em; line-height:1.18; }
.sec-head > p:not(.label) { margin:16px auto 0; max-width:36em; color:var(--ink-2); font-size:17px; }
.sec-head.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 6vw, 96px); align-items:end; }
.sec-head.split p { margin:0; font-size:17px; color:var(--ink-2); max-width:none; }

/* 功能分页 */
.ftabs { display:flex; gap:4px; padding:5px; margin:0 auto 18px; width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none; border-radius:999px; background:var(--surface); box-shadow:var(--shadow-1); }
.ftabs::-webkit-scrollbar { display:none; }
.ftabs button { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px; border:0; border-radius:999px; background:transparent; font:500 14px var(--sans); color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:background .2s, color .2s; }
.ftabs button svg { width:17px; height:17px; }
.ftabs button:hover { color:var(--ink); }
.ftabs button[aria-selected="true"] { background:var(--brand-soft); color:var(--brand); }
.fpanel { display:grid; grid-template-columns:5fr 6fr; gap:clamp(28px, 5vw, 72px); align-items:center; padding:clamp(28px, 4vw, 52px); border-radius:28px; background:var(--surface); box-shadow:var(--shadow-1); }
.fpanel[hidden] { display:none; }
.fpanel.enter .ftext, .fpanel.enter .fmock { animation:fade-up .45s var(--enter) both; } .fpanel.enter .fmock { animation-delay:.05s; }
@keyframes fade-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ftext h3 { font-size:clamp(24px, 2.4vw, 32px); line-height:1.15; font-weight:600; letter-spacing:-.03em; }
.ftext > p { color:var(--ink-2); margin:14px 0 22px; font-size:16px; }
.ftext .note { font-size:13px; color:var(--ink-3); margin:18px 0 0; }
.checks { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.checks li { display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink); }
.checks li svg { width:18px; height:18px; flex:none; margin-top:2.5px; color:var(--brand); }
.checks li.no { color:var(--ink-3); } .checks .x { width:18px; text-align:center; flex:none; }
.fmock { min-width:0; }

/* 界面小样（共用） */
.mock { border-radius:20px; padding:20px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); font-size:13.5px; display:flex; flex-direction:column; gap:12px; }
.m-h { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-h b { font-weight:600; font-size:15px; } .m-h small { color:var(--ink-3); font-size:12px; }
.m-pill { font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink-2); }
.m-pill.blue { background:var(--brand-soft); color:var(--brand); }
.m-field { background:var(--surface); border-radius:12px; padding:9px 13px; box-shadow:inset 0 0 0 1px var(--line); }
.m-field small { display:block; font-size:11.5px; color:var(--ink-3); } .m-field div { font-weight:500; }
.m-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.m-items { background:var(--surface); border-radius:12px; box-shadow:inset 0 0 0 1px var(--line); padding:4px 13px; }
.m-items div { display:grid; grid-template-columns:1fr auto 80px; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.m-items div:last-child { border:0; } .m-items em { font-style:normal; color:var(--ink-3); } .m-items b { text-align:right; font:600 13.5px var(--num); font-variant-numeric:tabular-nums; }
.m-dep { display:flex; align-items:center; justify-content:space-between; }
.m-dep small { color:var(--ink-2); }
.m-seg { display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.m-seg i { font-style:normal; font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px; color:var(--ink-3); }
.m-seg i.on { background:var(--brand); color:var(--brand-ink); }
.m-seg.sm i { padding:4px 10px; }
.m-total { display:flex; justify-content:space-between; align-items:baseline; padding-top:4px; }
.m-total b { font:600 26px var(--num); letter-spacing:-.04em; }
.m-clause { background:var(--surface); border-radius:12px; padding:13px 15px; box-shadow:inset 0 0 0 1px var(--line); }
.m-clause p { margin:4px 0 0; color:var(--ink-2); font-size:13px; line-height:1.6; }
.m-pad { position:relative; height:120px; border-radius:14px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; }
.m-pad svg { width:78%; } .m-pad path { fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.m-pad small { position:absolute; left:14px; bottom:9px; font-size:11px; color:var(--ink-3); }
.m-audit { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.m-audit div { background:var(--surface); border-radius:12px; padding:9px 12px; box-shadow:inset 0 0 0 1px var(--line); }
.m-audit small { display:block; font-size:11px; color:var(--ink-3); } .m-audit b { font-weight:600; font-size:13px; }
.m-amt { font:600 40px/1 var(--num); letter-spacing:-.05em; }
.m-prog { height:8px; border-radius:99px; background:color-mix(in srgb, var(--ink) 8%, transparent); overflow:hidden; }
.m-prog i { display:block; height:100%; background:var(--brand); border-radius:99px; }
.m-rows div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); }
.m-rows div:last-child { border:0; } .m-rows span { display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); } .m-rows b { font:600 14px var(--num); }
.ok-dot, .wait-dot { width:8px; height:8px; border-radius:50%; background:var(--brand); } .wait-dot { background:transparent; box-shadow:inset 0 0 0 2px var(--ink-3); }
.m-sub { color:var(--ink-3); font-size:12px; }
.m-payees, .m-curs { display:flex; flex-wrap:wrap; gap:6px; }
.m-payees span, .m-curs span { padding:7px 12px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); font-size:12.5px; font-weight:500; }
.m-curs b { color:var(--ink-3); font-weight:600; margin-right:3px; }
.m-note { margin:0; font-size:12.5px; color:var(--ink-3); }
.bubble { background:var(--brand); color:var(--brand-ink); padding:14px 16px; border-radius:18px 18px 6px 18px; line-height:1.6; font-size:13.5px; align-self:flex-end; max-width:92%; }
.m-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; } .m-foot small { color:var(--ink-3); font-size:12px; }
.m-btn { font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; background:var(--ink); color:var(--bg); white-space:nowrap; }
.m-btn.ghost { background:transparent; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line-2); }
.m-cl { display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:9px 12px; border-radius:14px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); }
.m-cl .av { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:600; background:color-mix(in srgb, var(--ink) 7%, transparent); }
.m-cl b { display:block; font-weight:600; } .m-cl small { color:var(--ink-3); font-size:12px; }
.m-cl em { font-style:normal; font-size:12.5px; font-weight:600; color:var(--ink-3); } .m-cl em.owe { color:var(--bad); }
.msg { max-width:88%; font-size:13.5px; line-height:1.55; }
.msg.me { align-self:flex-end; background:color-mix(in srgb, var(--ink) 8%, transparent); padding:10px 14px; border-radius:18px 18px 6px 18px; }
.msg.ai { display:flex; gap:10px; }
.ai-mark { width:28px; height:28px; border-radius:9px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; flex:none; } .ai-mark .mark { width:16px; height:16px; }
.msg.ai ul { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px; }
.msg.ai li { background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); border-radius:12px; padding:8px 12px; display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.msg.ai li span { color:var(--ink-2); }
.pending { display:flex; align-items:center; gap:8px; padding:12px 12px 12px 14px; border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 50%, transparent); }
.pending div { flex:1; min-width:0; } .pending small { display:block; color:var(--warn); font-size:11.5px; font-weight:600; } .pending b { font-weight:600; font-size:13px; }

/* 四步 */
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.steps li { background:var(--surface); border-radius:24px; padding:24px 22px 26px; box-shadow:var(--shadow-1); }
.steps .n { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font:600 14px var(--num); background:var(--brand-soft); color:var(--brand); margin-bottom:36px; }
.steps h3 { font-size:19px; font-weight:600; letter-spacing:-.02em; }
.steps p { margin:8px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.6; }

/* 细节格子 */
.bits { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-radius:24px; overflow:hidden; background:var(--line); gap:1px; box-shadow:0 0 0 1px var(--line); }
.bit { background:var(--surface); padding:24px 22px; }
.bit h3 { font:600 16px var(--sans); letter-spacing:-.01em; }
.bit p { margin:6px 0 0; color:var(--ink-2); font-size:14px; line-height:1.55; }

/* 价格 */
.billing-sw { display:flex; gap:4px; padding:4px; margin:0; width:max-content; border-radius:999px; background:var(--surface); box-shadow:var(--shadow-1); }
.billing-sw button { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px; border:0; border-radius:999px; background:transparent; font:500 14px var(--sans); color:var(--ink-2); cursor:pointer; }
.billing-sw button[aria-checked="true"] { background:var(--ink); color:var(--bg); }
.billing-sw .save { font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand); }
.plans { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:860px; margin:0 auto; }
.plan { background:var(--surface); border-radius:28px; padding:30px 28px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; }
.plan.pro { box-shadow:0 0 0 1.5px var(--brand), 0 30px 60px -30px color-mix(in srgb, var(--brand) 45%, transparent); }
.plan h3 { font-size:22px; font-weight:600; letter-spacing:-.02em; }
.plan-d { margin:6px 0 0; color:var(--ink-2); font-size:14.5px; min-height:2.9em; }
.plan-price { display:flex; align-items:baseline; gap:8px; margin:18px 0 4px; }
.plan-price b { font:600 52px/1 var(--num); letter-spacing:-.05em; }
.plan-price span { color:var(--ink-3); font-size:14px; }
.plan-alt { margin:0 0 20px; color:var(--ink-3); font-size:13px; min-height:1.6em; }
.plan:not(.pro) .plan-price { margin-bottom:24px; }
.plan .btn { margin-bottom:6px; }
.plan-under { text-align:center; font-size:12.5px; color:var(--ink-3); margin:4px 0 0; }
.plan .checks { margin-top:22px; padding-top:22px; border-top:1px solid var(--line); gap:10px; }
.plan .checks li { font-size:14.5px; }
.paymethods { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:30px; }
.paymethods span { font-size:13px; font-weight:500; padding:7px 14px; border-radius:999px; background:var(--surface); box-shadow:var(--shadow-1); color:var(--ink-2); }
.paynote { max-width:42em; margin:14px auto 0; text-align:center; font-size:13.5px; color:var(--ink-3); }

/* 创始人 */
.founder { display:grid; grid-template-columns:128px 1fr; gap:clamp(24px, 4vw, 48px); max-width:860px; margin:0 auto; padding:clamp(28px, 4vw, 44px); border-radius:28px; background:var(--surface); box-shadow:var(--shadow-1); }
.founder img { width:128px; height:128px; border-radius:50%; object-fit:cover; background:var(--surface-2); box-shadow:0 0 0 1px var(--line); }
.founder h2 { font-size:clamp(24px, 2.6vw, 32px); font-weight:600; letter-spacing:-.03em; line-height:1.2; margin-bottom:14px; }
.founder p:not(.label) { color:var(--ink-2); margin:0 0 12px; font-size:16px; }
.founder .who { font:italic 400 17px var(--serif); color:var(--ink); margin-top:18px; }

/* 常见问题 */
.faq { max-width:900px; }
.faq details { background:var(--surface); border-radius:18px; box-shadow:var(--shadow-1); margin-bottom:8px; }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; font-weight:600; font-size:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary i { width:28px; height:28px; border-radius:50%; flex:none; position:relative; background:color-mix(in srgb, var(--ink) 6%, transparent); transition:transform .3s var(--ease); }
.faq summary i::before, .faq summary i::after { content:''; position:absolute; left:50%; top:50%; width:11px; height:1.8px; background:var(--ink-2); transform:translate(-50%,-50%); border-radius:2px; }
.faq summary i::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s var(--ease); }
.faq details[open] summary i::after { transform:translate(-50%,-50%) rotate(0); }
.faq details p { margin:0; padding:0 22px 20px; color:var(--ink-2); font-size:15px; line-height:1.7; }

/* 结尾 */
.endcta { text-align:center; padding:clamp(96px, 14vh, 150px) var(--gutter) clamp(80px, 12vh, 120px); }
.endcta h2 { font-size:clamp(34px, 4.6vw, 64px); line-height:1.08; font-weight:600; letter-spacing:-.045em; max-width:14em; margin:0 auto; }
.lang-zh .endcta h2 { letter-spacing:-.03em; line-height:1.16; }
.endcta p { color:var(--ink-2); margin:18px auto 0; max-width:34em; }

/* 页脚 */
.site-foot { padding:64px 0 34px; font-size:14px; background:#000; color:#A3A7AE; --line:rgba(255,255,255,.1); --brand:#5B9BFF; }
.site-foot .brand { color:#fff; } .site-foot .foot-brand p { color:#8B9097; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:30px; }
.foot-brand p { color:var(--ink-3); margin:12px 0 0; max-width:22em; font-size:13.5px; }
.site-foot h4 { margin:4px 0 12px; font-size:13px; font-weight:600; color:#fff; }
.site-foot .foot-grid > div:not(.foot-brand) a { display:block; text-decoration:none; color:#A3A7AE; padding:4px 0; }
.site-foot a:hover { color:#fff; }
.foot-bottom { display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line); color:#7B8088; font-size:13px; flex-wrap:wrap; }
.foot-bottom a { color:#C9CDD3; }

/* ---------- 登录 / 注册 ---------- */
.auth { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.auth .side { margin:12px; border-radius:28px; padding:36px 40px; display:flex; flex-direction:column; justify-content:space-between; gap:40px; position:relative; overflow:hidden;
  background:#0E1014; color:#ECECEE; }
.auth .side::before { content:''; position:absolute; inset:auto -20% -40% 30%; height:70%; border-radius:50%; background:radial-gradient(closest-side, rgba(29,107,243,.55), transparent); filter:blur(30px); pointer-events:none; }
.auth .side .brand { color:#fff; --brand:#5B9BFF; }
.auth .side h2 { font-size:clamp(28px, 2.8vw, 38px); line-height:1.15; letter-spacing:-.035em; font-weight:600; max-width:13em; margin:0 0 14px; }
.lang-zh .auth .side h2 { letter-spacing:-.02em; line-height:1.25; }
.auth .side p { color:#A2A6AD; max-width:28em; margin:0; }
.auth .side .quote { position:relative; z-index:1; display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); max-width:420px; }
.auth .side .quote img { width:48px; height:48px; border-radius:50%; background:#fff; flex:none; }
.auth .side .quote p { font-size:13.5px; color:#C9CCD1; }
.auth .main { display:grid; place-items:center; padding:40px 24px; }
.auth .top-tools { position:absolute; right:22px; top:20px; display:flex; gap:6px; align-items:center; }
.form { width:100%; max-width:380px; }
.form h1 { font-size:30px; font-weight:600; letter-spacing:-.035em; margin:0 0 6px; }
.form .sub { color:var(--ink-2); margin:0 0 26px; font-size:15px; }
.field { display:block; margin-bottom:14px; }
.field span { display:block; font-size:13px; font-weight:500; color:var(--ink-2); margin-bottom:6px; }
.field input, .field select { width:100%; height:48px; border:0; background:var(--surface); border-radius:14px; padding:0 16px; font:500 15px var(--sans); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2); transition:box-shadow .2s; -webkit-appearance:none; appearance:none; }
.field select { background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; }
.field input:focus, .field select:focus { outline:none; box-shadow:inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); margin:6px 0 18px; line-height:1.55; }
.check input { width:17px; height:17px; margin-top:2px; accent-color:var(--brand); flex:none; }
.check a { color:var(--ink); }
.err { background:var(--bad-soft); color:var(--bad); font-weight:500; font-size:14px; border-radius:12px; padding:11px 14px; margin-bottom:16px; }
.ok { background:var(--brand-soft); color:var(--brand); font-weight:500; font-size:14px; border-radius:12px; padding:11px 14px; margin-bottom:16px; }
.alt-link { margin-top:18px; font-size:14px; color:var(--ink-3); }
.alt-link a { color:var(--ink); font-weight:600; text-decoration:none; } .alt-link a:hover { text-decoration:underline; }

/* ---------- 条款 ---------- */
.legal { max-width:760px; padding:40px var(--gutter) 90px; }
.legal h1 { font-size:clamp(32px, 4vw, 44px); font-weight:600; letter-spacing:-.04em; margin:20px 0 6px; }
.legal .upd { color:var(--ink-3); margin-bottom:30px; }
.legal .legal-note { padding:12px 16px; border-radius:14px; background:var(--brand-soft); color:var(--ink); font-size:14px; }
.legal h2 { font-size:20px; font-weight:600; letter-spacing:-.02em; margin:36px 0 8px; }
.legal p, .legal li { color:var(--ink-2); line-height:1.85; }

/* ---------- 访问码 / 错误 ---------- */
.center { min-height:100vh; display:grid; place-items:center; padding:24px; }
.card { background:var(--surface); border-radius:28px; padding:34px 30px; width:100%; max-width:400px; box-shadow:var(--shadow-2); }
.card h1 { font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px; } .card p { color:var(--ink-2); margin:0 0 20px; font-size:15px; }
.code-input { width:100%; height:62px; border:0; border-radius:16px; text-align:center; font:600 28px var(--num); letter-spacing:.35em; padding-left:.35em; background:var(--surface-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.code-input:focus { outline:none; box-shadow:inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.from { display:flex; gap:10px; align-items:center; font-size:13px; color:var(--ink-3); margin-bottom:18px; }
.from img { width:34px; height:34px; object-fit:contain; border-radius:8px; background:var(--surface-2); }

/* ---------- 入场：只有首屏一次 ---------- */
.page-home .hero > * { animation:fade-up .6s var(--enter) both; }
.page-home .hero > :nth-child(2) { animation-delay:.06s; } .page-home .hero > :nth-child(3) { animation-delay:.12s; } .page-home .hero > :nth-child(4) { animation-delay:.18s; } .page-home .hero > :nth-child(5) { animation-delay:.22s; }
.page-home .stage-wrap { animation:fade-up .8s .25s var(--enter) both; }

/* ---------- 窄屏 ---------- */
@media (max-width:1000px) {
  .stage { grid-template-columns:1fr; max-width:520px; gap:34px; }
  .fpanel { grid-template-columns:1fr; }
  .steps, .bits { grid-template-columns:1fr 1fr; }
  .sec-head.split { grid-template-columns:1fr; gap:14px; }
  .foot-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .topbar .links, .topbar .login { display:none; }
  .auth { grid-template-columns:1fr; }
  .auth .side { display:none; }
}
@media (max-width:560px) {
  .topbar { top:8px; margin-top:8px; padding:0 10px; }
  .topbar .bar { height:54px; padding:0 6px 0 14px; gap:6px; }
  .lang-sw { display:none; }
  .hero { padding-top:44px; }
  .stage { padding:22px 16px; border-radius:26px; }
  .phone { width:min(300px, 100%); }
  .steps, .bits, .plans { grid-template-columns:1fr; }
  .fpanel { padding:20px; border-radius:22px; }
  .founder { grid-template-columns:1fr; }
  .founder img { width:88px; height:88px; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .foot-brand { grid-column:1 / -1; }
  .row2 { grid-template-columns:1fr; }
  .plan-price b { font-size:44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; }
  .sig path { stroke-dashoffset:0; } .bub.in { opacity:1; transform:none; }
}

/* ---------- 语言滚轮 ---------- */
.langpick { position:relative; }
.lp-btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px 0 11px; border:0; border-radius:999px; background:transparent; color:var(--ink-2); font:500 13.5px var(--sans); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); transition:background .15s, color .15s; }
.lp-btn:hover, .lp-btn[aria-expanded="true"] { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.lp-btn > svg:first-child { width:16px; height:16px; }
.lp-chev { width:14px; height:14px; transition:transform .25s var(--ease); }
.lp-btn[aria-expanded="true"] .lp-chev { transform:rotate(180deg); }
.lp-pop { position:absolute; right:0; top:calc(100% + 10px); z-index:60; width:300px; padding:10px; border-radius:24px; background:var(--surface); box-shadow:var(--shadow-pop), 0 0 0 1px var(--line);
  transform-origin:top right; animation:lp-in .28s var(--enter); }
.lp-pop[hidden] { display:none; }
@keyframes lp-in { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }
.lp-wheel { position:relative; height:236px; overflow:hidden; border-radius:16px; perspective:600px; cursor:grab; touch-action:none; outline:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); mask-image:linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); }
.lp-wheel:active { cursor:grabbing; }
.lp-wheel:focus-visible { box-shadow:inset 0 0 0 2px var(--brand); }
.lp-band { position:absolute; left:6px; right:6px; top:50%; height:44px; margin-top:-22px; border-radius:12px; background:color-mix(in srgb, var(--brand) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.lp-list { list-style:none; margin:0; padding:0; position:absolute; inset:0; transform-style:preserve-3d; }
.lp-list li { position:absolute; left:0; right:0; top:50%; height:44px; margin-top:-22px; display:flex; align-items:center; gap:8px; padding:0 18px; backface-visibility:hidden; will-change:transform, opacity; user-select:none; }
.lp-name { font-family:var(--sans); font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap; }
.lp-hint { font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.lp-auto { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:999px; background:var(--brand); color:var(--brand-ink); }
.lp-list li.is-mid .lp-name { color:var(--brand); }
.lp-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 6px 2px; }
.lp-foot small { font-size:11.5px; color:var(--ink-3); line-height:1.4; }
@media (max-width:560px) {
  .lp-btn .lp-cur { display:none; }
  .lp-pop { position:fixed; left:10px; right:10px; top:auto; bottom:10px; width:auto; transform-origin:bottom center; }
}

/* ================= 四步 · 操作演示 ================= */
.sdemo { display:grid; grid-template-columns:minmax(0, 360px) minmax(0, 1fr); gap:clamp(20px, 3vw, 44px); align-items:start; }
.sd-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sd-steps button { position:relative; width:100%; display:grid; grid-template-columns:32px 1fr; gap:14px; text-align:left; padding:18px 18px 20px; border:0; border-radius:20px; background:transparent; color:var(--ink-2); font:inherit; cursor:pointer; transition:background .25s, color .25s; overflow:hidden; }
.sd-steps button:hover { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.sd-steps button[aria-selected="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1), 0 0 0 1px var(--line); }
.sd-steps .n { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font:600 14px var(--num); background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink-2); transition:background .25s, color .25s; }
.sd-steps button[aria-selected="true"] .n { background:var(--brand); color:#fff; }
.sd-t b { display:block; font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink); padding-top:4px; }
.sd-t > span { display:block; margin-top:6px; font-size:14px; line-height:1.6; color:var(--ink-2); }
.sd-steps button:not([aria-selected="true"]) .sd-t > span { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink-3); }
.sd-bar { position:absolute; left:18px; right:18px; bottom:9px; height:2px; border-radius:2px; background:color-mix(in srgb, var(--ink) 8%, transparent); opacity:0; }
.sd-bar i { display:block; height:100%; width:0; border-radius:inherit; background:var(--brand); }
.sd-steps button[aria-selected="true"] .sd-bar { opacity:1; }
.sdemo.running .sd-steps button[aria-selected="true"] .sd-bar i { animation:sd-bar var(--dur, 6s) linear forwards; }
.sdemo.paused .sd-steps button[aria-selected="true"] .sd-bar i { animation-play-state:paused; }
@keyframes sd-bar { to { width:100%; } }

.sd-win { border-radius:28px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line), var(--shadow-1); overflow:hidden; }
.sd-chrome { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface); }
.sd-play { border:0; background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink-2); font:500 12px var(--sans); padding:5px 11px; border-radius:999px; cursor:pointer; }
.sd-play .i-play, .sdemo.paused .sd-play .i-pause { display:none; } .sdemo.paused .sd-play .i-play { display:inline; }
.sd-stage { position:relative; height:486px; overflow:hidden;
  background:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 0) 0 0/18px 18px; }
.sd-scene { position:absolute; inset:0; padding:26px; display:flex; gap:18px; align-items:flex-start; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s, visibility 0s .35s; }
.sd-scene.on { opacity:1; visibility:visible; transition:opacity .35s; }
.sd-note { margin:12px 4px 0; font-size:12.5px; color:var(--ink-3); }

.sd-card { border-radius:20px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), 0 18px 40px -26px rgba(0,0,0,.45); padding:18px; }
.sd-card h4 { margin:0 0 12px; font:600 15px var(--sans); letter-spacing:-.01em; }
.fld { position:relative; display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; margin-bottom:8px; border-radius:11px; background:color-mix(in srgb, var(--ink) 4%, transparent); box-shadow:inset 0 0 0 1px var(--line); font-size:13px; transition:box-shadow .2s; }
.fld small { min-width:42px; white-space:nowrap; flex:none; color:var(--ink-3); font-size:11.5px; }
.typed { display:inline-block; overflow:hidden; white-space:nowrap; } .typed > span { display:inline-block; clip-path:inset(0 100% 0 0); }
.fld .caret { width:1.5px; height:15px; background:var(--brand); opacity:0; }

/* 光标与点击 */
.sd-cursor { position:absolute; left:0; top:0; width:22px; height:22px; z-index:5; pointer-events:none; opacity:0; transform:translate(var(--cx, 70%), var(--cy, 90%)); transition:transform .75s cubic-bezier(.6,.05,.25,1), opacity .3s; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.sd-cursor svg { width:100%; height:100%; display:block; }
.sd-cursor::after { content:""; position:absolute; left:-9px; top:-9px; width:22px; height:22px; border-radius:50%; background:var(--brand); opacity:0; }
.sd-cursor.click::after { animation:sd-click .5s ease-out; }
.sd-cursor.on { opacity:1; }
@keyframes sd-click { from { opacity:.5; transform:scale(.3); } to { opacity:0; transform:scale(1.6); } }
.tg { transition:transform .15s; } .tg.press { transform:scale(.95); }

.sd-toast { position:absolute; left:50%; bottom:22px; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:13px; font-weight:500; white-space:nowrap; opacity:0; transform:translate(-50%, 10px); transition:opacity .3s, transform .4s var(--enter); }
.sd-toast svg { width:16px; height:16px; color:#5BD08A; }

/* ① 建单 */
.sd-form { width:min(400px, 100%); }
.s1-items, .sd-form .items { list-style:none; margin:4px 0 10px; padding:0; }
.sd-form .items li { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:8px 2px; border-bottom:1px dashed var(--line); opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s var(--enter); }
.sd-form .items li b { font-weight:600; font-variant-numeric:tabular-nums; }
.sd-row { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-3); }
.seg3 { position:relative; display:inline-grid; grid-template-columns:repeat(3, 52px); padding:3px; border-radius:999px; background:color-mix(in srgb, var(--ink) 6%, transparent); }
.seg3 > span { position:relative; z-index:1; text-align:center; font:600 12px/26px var(--num); color:var(--ink-2); transition:color .3s; }
.seg3 > i { position:absolute; top:3px; left:3px; width:52px; height:26px; border-radius:999px; background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .4s var(--enter); }
.sd-sum { display:grid; grid-template-columns:1fr auto; align-items:baseline; margin:12px 0 14px; font-size:13px; color:var(--ink-3); }
.sd-sum b { font:600 26px var(--num); letter-spacing:-.03em; color:var(--ink); }
.sd-sum small { grid-column:2; text-align:right; font-size:12px; position:relative; height:16px; }
.sd-sum .d40 { position:absolute; right:0; opacity:0; } .sd-sum .d30 { transition:opacity .25s; } .sd-sum .d40 { transition:opacity .25s; }
.sd-cta, .ph-btn { display:grid; place-items:center; height:42px; border-radius:999px; background:var(--brand); color:#fff; font-weight:600; font-size:14px; }
.sd-cta .b2, .sd-phone .ph-btn .b2 { display:none; align-items:center; gap:6px; } .sd-cta svg, .ph-btn svg { width:16px; height:16px; }
.s-a1 .f-client { box-shadow:inset 0 0 0 1.5px var(--brand); } .s-a1 .f-client .caret { opacity:1; animation:blink 1s steps(1) infinite; }
.s-a1 .f-client .typed > span { clip-path:inset(0 0 0 0); transition:clip-path .7s steps(6); }
.s-a2 .f-client { box-shadow:inset 0 0 0 1px var(--line); } .s-a2 .f-client .caret { display:none; }
.s-a2 .t2 > span { clip-path:inset(0 0 0 0); transition:clip-path .6s steps(8); }
.s-a2 .items li { opacity:1; transform:none; } .s-a2 .items li:nth-child(2) { transition-delay:.25s; } .s-a2 .items li:nth-child(3) { transition-delay:.5s; }
.s-a3 .seg3 > i { transform:translateX(52px); } .s-a3 .seg-40 { color:var(--ink); }
.s-a3 .sd-sum .d30 { opacity:0; } .s-a3 .sd-sum .d40 { opacity:1; }
.s-a4 .sd-cta { background:#1FA463; } .s-a4 .sd-cta .b1 { display:none; } .s-a4 .sd-cta .b2 { display:inline-flex; }
@keyframes blink { 50% { opacity:0; } }

/* ② 发链接 */
.sd-order { width:300px; flex:none; }
.sd-order .tk-top .sw { background:#F4B740; }
.linkbox { position:relative; margin-top:14px; padding:12px 12px 12px; border-radius:14px; background:color-mix(in srgb, var(--ink) 4%, transparent); box-shadow:inset 0 0 0 1px var(--line); }
.linkbox small { display:block; font-size:11px; color:var(--ink-3); } .linkbox small b { color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.linkbox code { display:block; margin:4px 0 6px; font:500 13px var(--num); color:var(--brand); }
.linkbox .copy, .dun-h .copy { position:absolute; right:10px; top:10px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; background:var(--brand); color:#fff; }
.sd-chat { width:250px; flex:none; border-radius:20px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; display:flex; flex-direction:column; gap:10px; padding-bottom:14px; opacity:0; transform:translateX(24px); transition:opacity .4s, transform .5s var(--enter); }
.sd-chat .chat-h { padding:10px 12px; }
.sd-chat .bub { margin:0 12px; font-size:12px; }
.sd-chat .bub.in { transition:opacity .3s, transform .3s; }
.s-a1 .sd-toast { opacity:1; transform:translate(-50%, 0); }
.s-a2 .sd-toast { opacity:0; }
.s-a2 .sd-chat { opacity:1; transform:none; }
.s-a3 .sd-chat .bub.in { opacity:1; transform:none; }

/* ③ 甲方签字 */
.sd-phone { width:240px; flex:none; border-radius:34px; padding:16px 14px 16px; background:#fff; color:#16171B; box-shadow:0 0 0 8px #0E0F12, 0 0 0 9px rgba(255,255,255,.08), 0 40px 70px -40px rgba(0,0,0,.7); margin-top:6px; }
.sd-phone .ph-top { text-align:center; margin-bottom:12px; } .sd-phone .ph-top small { display:block; font-size:10.5px; color:#9A9FA7; } .sd-phone .ph-top b { font-size:14px; }
.sd-phone .ph-pad { height:76px; }
.sd-phone .ph-btn { margin-top:12px; height:40px; font-size:13px; }
.s-a1 .sd-phone .sig path { stroke-dashoffset:0; transition:stroke-dashoffset 1.5s cubic-bezier(.5,.1,.3,1); }
.s-a2 .sd-phone .ph-btn { background:#1FA463; } .s-a2 .sd-phone .ph-btn .b1 { display:none; } .s-a2 .sd-phone .ph-btn .b2 { display:inline-flex; }
.sd-mail { align-self:center; width:250px; flex:none; display:flex; gap:12px; padding:14px; border-radius:18px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), 0 20px 40px -24px rgba(0,0,0,.5); opacity:0; transform:translateY(14px) scale(.97); transition:opacity .4s, transform .5s var(--enter); }
.sd-mail .m-ico { width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); } .sd-mail .m-ico svg { width:19px; height:19px; }
.sd-mail small { display:block; font-size:11px; color:var(--ink-3); } .sd-mail b { display:block; font-size:14px; margin:2px 0; } .sd-mail span { font-size:12px; color:var(--ink-2); line-height:1.45; }
.s-a3 .sd-mail { opacity:1; transform:none; }

/* ④ 收尾款 */
[data-scene="4"] { flex-wrap:wrap; align-content:flex-start; }
.o4 { width:280px; }
.sw3 { display:inline-grid; } .sw3 > span { grid-area:1/1; transition:opacity .3s; } .sw3 .v2, .sw3 .v3 { opacity:0; }
.tk-due { display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; font-size:12.5px; color:var(--ink-3); } .tk-due b { font:600 20px var(--num); color:var(--ink); letter-spacing:-.02em; }
.o4-btns { display:flex; gap:8px; margin-top:14px; } .o4-btns > span { flex:1; text-align:center; font-size:13px; font-weight:600; padding:9px 0; border-radius:999px; background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink-2); transition:background .3s, color .3s, opacity .3s; }
.o4-btns .deliver { background:var(--brand); color:#fff; } .o4-btns .got { opacity:.45; }
.sd-dun { width:300px; padding:16px; position:relative; opacity:0; transform:translateY(12px); transition:opacity .4s, transform .5s var(--enter); }
.dun-h { display:flex; align-items:center; justify-content:space-between; } .dun-h b { font-size:13px; } .dun-h .copy { position:static; }
.sd-dun p { margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--ink-2); }
.sd-month { position:absolute; right:26px; bottom:24px; text-align:right; } .sd-month small { display:block; font-size:11.5px; color:var(--ink-3); }
.sd-month b { display:inline-grid; font:600 30px var(--num); letter-spacing:-.04em; } .sd-month b > span { grid-area:1/1; transition:opacity .3s, transform .45s var(--enter); } .sd-month .v2 { opacity:0; transform:translateY(12px); }
.s-a1 .sw3 .v1 { opacity:0; } .s-a1 .sw3 .v2 { opacity:1; } .s-a1 .sw3 { background:color-mix(in srgb, #F4B740 22%, transparent); color:#D08A00; }
.s-a1 .o4-btns .deliver { background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink-3); } .s-a1 .o4-btns .got { opacity:1; background:var(--brand); color:#fff; }
.s-a2 .sd-dun { opacity:1; transform:none; }
.s-a3 .sd-toast { opacity:1; transform:translate(-50%, 0); }
.s-a4 .sd-toast { opacity:0; }
.s-a4 .sw3 .v2 { opacity:0; } .s-a4 .sw3 .v3 { opacity:1; } .s-a4 .sw3 { background:color-mix(in srgb, #1FA463 20%, transparent); color:#1FA463; }
.s-a4 .o4-btns .got { background:#1FA463; }
.s-a4 .sd-month .v1 { opacity:0; transform:translateY(-12px); } .s-a4 .sd-month .v2 { opacity:1; transform:none; color:#1FA463; }

@media (max-width:960px) {
  .sdemo { grid-template-columns:1fr; }
  .sd-screen { order:-1; }
}
@media (max-width:640px) {
  .sd-stage { height:520px; }
  .sd-scene { padding:16px; flex-direction:column; align-items:center; gap:12px; }
  .sd-order, .o4, .sd-dun, .sd-chat, .sd-mail { width:100%; max-width:340px; }
  [data-scene="4"] .sd-month { position:static; align-self:flex-end; margin-right:max(0px, calc((100% - 340px) / 2)); }
  .sd-chat { transform:translateY(16px); }
  .sd-steps button { padding:14px 14px 18px; }
}

/* ================= 细节格子的小动画 ================= */
.ill { display:block; width:100%; max-width:200px; height:auto; margin:0 0 18px; overflow:visible; color:var(--ink-3); }
.ill .ln, .ill .ln * { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ill .b { fill:var(--brand); }
.ill text { fill:var(--ink); font:600 18px var(--display); }
.ill * { animation-play-state:paused; }
.bits.play .ill * { animation-play-state:running; }
.bit .ill { transform-origin:left center; }
/* 1 链接 → 文件 */
.ill-1 .trail circle { fill:currentColor; opacity:.35; }
.g1-dot { animation:g1-move 3.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes g1-move { 0%, 8% { transform:translateX(0); opacity:1; } 45% { transform:translateX(52px); opacity:1; } 52%, 100% { transform:translateX(52px); opacity:0; } }
.g1-l { stroke:var(--brand) !important; stroke-dasharray:24; stroke-dashoffset:24; animation:g1-line 3.2s ease infinite; }
.g1-l.l2 { animation-delay:.12s; } .g1-l.l3 { animation-delay:.24s; }
@keyframes g1-line { 0%, 48% { stroke-dashoffset:24; } 64%, 92% { stroke-dashoffset:0; } 100% { stroke-dashoffset:24; } }
/* 2 中 / EN */
.g2-t { font-size:20px !important; }
.g2-zh { animation:g2a 4s ease-in-out infinite; } .g2-en { animation:g2b 4s ease-in-out infinite; }
.g2-b { animation:g2b-box 4s ease-in-out infinite; }
@keyframes g2a { 0%, 40% { fill:var(--brand); } 50%, 90% { fill:var(--ink-3); } 100% { fill:var(--brand); } }
@keyframes g2b { 0%, 40% { fill:var(--ink-3); } 50%, 90% { fill:var(--brand); } 100% { fill:var(--ink-3); } }
@keyframes g2b-box { 0%, 40% { transform:translateY(0); } 50%, 90% { transform:translateY(-4px); } 100% { transform:translateY(0); } }
/* 3 五套样式 */
.g3-in rect { fill:currentColor; opacity:.5; }
.g3-hl { fill:none; stroke:var(--brand); stroke-width:2; animation:g3 5s steps(1) infinite; }
@keyframes g3 { 0% { transform:translateX(0); } 20% { transform:translateX(30px); } 40% { transform:translateX(60px); } 60% { transform:translateX(90px); } 80% { transform:translateX(120px); } }
/* 4 币种滚轮 */
.g4-reel { animation:g4 6s cubic-bezier(.7,0,.3,1) infinite; }
.g4-reel text { text-anchor:middle; fill:var(--brand); font-size:22px; }
@keyframes g4 { 0%, 12% { transform:translateY(0); } 16%, 28% { transform:translateY(-48px); } 32%, 44% { transform:translateY(-96px); } 48%, 60% { transform:translateY(-144px); } 64%, 76% { transform:translateY(-192px); } 80%, 92% { transform:translateY(-240px); } 96%, 100% { transform:translateY(-288px); } }
.g4-side circle { fill:currentColor; opacity:.35; }
/* 5 手机滚动 */
.g5-scroll path { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; opacity:.7; }
.g5-scroll .b2 { fill:var(--brand); opacity:.85; }
.g5-scroll { animation:g5 4s ease-in-out infinite alternate; }
@keyframes g5 { 0%, 15% { transform:translateY(0); } 85%, 100% { transform:translateY(-22px); } }
/* 6 导出 CSV */
.g6-ar { animation:g6a 2.6s ease-in-out infinite; } .g6-file { animation:g6f 2.6s ease-in-out infinite; }
.g6-file text { font-size:10px !important; fill:var(--brand); }
@keyframes g6a { 0%, 100% { transform:translateX(-4px); opacity:.4; } 50% { transform:translateX(3px); opacity:1; } }
@keyframes g6f { 0%, 40%, 100% { transform:translateY(0); } 55% { transform:translateY(-5px); } 70% { transform:translateY(0); } }
/* 7 访问码：填满 → 错 → 摇 → 锁住 */
.g7-dots circle { fill:none; stroke:currentColor; stroke-width:1.6; animation:g7 4s infinite; }
.g7-dots circle:nth-child(2) { animation-delay:.12s; } .g7-dots circle:nth-child(3) { animation-delay:.24s; } .g7-dots circle:nth-child(4) { animation-delay:.36s; } .g7-dots circle:nth-child(5) { animation-delay:.48s; } .g7-dots circle:nth-child(6) { animation-delay:.6s; }
.g7-dots { animation:g7s 4s infinite; }
@keyframes g7 { 0%, 5% { fill:transparent; stroke:currentColor; } 10%, 40% { fill:var(--ink-2); stroke:var(--ink-2); } 45%, 62% { fill:#E5484D; stroke:#E5484D; } 70%, 100% { fill:transparent; stroke:currentColor; } }
@keyframes g7s { 0%, 46% { transform:translateX(0); } 49% { transform:translateX(-4px); } 52% { transform:translateX(4px); } 55% { transform:translateX(-3px); } 58%, 100% { transform:translateX(0); } }
.g7-sh { animation:g7l 4s infinite; } .g7-lock { animation:g7c 4s infinite; }
@keyframes g7l { 0%, 55% { transform:translateY(-4px); } 62%, 92% { transform:translateY(0); } 100% { transform:translateY(-4px); } }
@keyframes g7c { 0%, 55% { color:currentColor; } 62%, 92% { color:var(--brand); } }
/* 8 账号隔离：球撞墙弹回 */
.g8-a circle, .g8-b circle { fill:currentColor; opacity:.4; }
.g8-wall { fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round; stroke-dasharray:3 5; }
.g8-ball { animation:g8 2.4s cubic-bezier(.45,0,.55,1) infinite; }
.g8-ball2 { fill:var(--ink-2); animation:g8b 2.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes g8 { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(16px); } }
@keyframes g8b { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(-16px); } }
@media (prefers-reduced-motion: reduce) { .ill * { animation:none !important; } }

/* ================= 动态 logo：L 形的点依次亮起，蓝点最后弹出来；悬停重播 ================= */
.brand .mark circle, .logo .mark circle { transform-box:fill-box; transform-origin:center; animation:ld-in .5s cubic-bezier(.2,.8,.2,1.2) both; }
.brand:hover .mark circle, .logo:hover .mark circle { animation-name:ld-in2; }
.mark circle:nth-child(1) { animation-delay:.05s; } .mark circle:nth-child(4) { animation-delay:.13s; } .mark circle:nth-child(7) { animation-delay:.21s; }
.mark circle:nth-child(8) { animation-delay:.29s; } .mark circle:nth-child(9) { animation-delay:.46s; animation-duration:.6s; }
.mark circle:nth-child(2), .mark circle:nth-child(3), .mark circle:nth-child(5), .mark circle:nth-child(6) { animation-delay:.36s; }
@keyframes ld-in { 0% { opacity:0; transform:scale(.2); } 60% { opacity:1; transform:scale(1.25); } 100% { opacity:1; transform:none; } }
@keyframes ld-in2 { 0% { opacity:0; transform:scale(.2); } 60% { opacity:1; transform:scale(1.25); } 100% { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .mark circle { animation:none !important; } }

/* ================= 点阵背景：和 logo 同一套点，鼠标附近的点会变大变蓝，一道光慢慢扫过 ================= */
.hero, .endcta { position:relative; isolation:isolate; }
.dotfield { position:absolute; z-index:-1; pointer-events:none; top:-110px; height:calc(100% + 150px); left:calc(50% - 50vw); width:100vw; display:block;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 50% 46%, transparent 0 42%, #000 62%, transparent 94%); mask-image:radial-gradient(ellipse 62% 78% at 50% 46%, transparent 0 42%, #000 62%, transparent 94%); }
.hero > :not(.dotfield) { position:relative; z-index:1; }
.endcta .dotfield { top:0; height:100%; -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 50%, #000 15%, transparent 72%); mask-image:radial-gradient(ellipse 55% 60% at 50% 50%, #000 15%, transparent 72%); }
.auth .side .dotfield { left:0; width:100%; top:0; height:100%; z-index:0; -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%); mask-image:linear-gradient(180deg, #000, transparent 85%); }
.auth .side > *:not(.dotfield) { position:relative; z-index:1; }
html { overflow-x:clip; } body { overflow-x:clip; }

/* 价格区：月付 / 年付 + 币种 */
.price-ctl { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:0 auto 26px; }
.cur-pick { position:relative; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 14px 0 18px; border-radius:999px; background:var(--surface); box-shadow:var(--shadow-1); font-size:13.5px; color:var(--ink-3); cursor:pointer; }
.cur-pick select { appearance:none; -webkit-appearance:none; border:0; background:transparent; font:600 14px var(--sans); color:var(--ink); padding:0 22px 0 0; cursor:pointer; outline:none; }
.cur-pick svg { position:absolute; right:14px; width:14px; height:14px; color:var(--ink-3); pointer-events:none; }
.cur-pick:focus-within { box-shadow:var(--shadow-1), 0 0 0 2px var(--brand); }
.auth .side .dotfield { --ink:#ffffff; --brand:#5B9BFF; }

/* 语言提示条（第一次访问，IP 所在地语言和页面不同时） */
.langhint { background:var(--ink); color:var(--bg); font-size:13.5px; }
.lh-in { display:flex; align-items:center; gap:10px; min-height:48px; padding-top:6px; padding-bottom:6px; flex-wrap:wrap; }
.lh-in > span { flex:1; min-width:200px; }
.langhint .btn.soft { background:color-mix(in srgb, var(--bg) 14%, transparent); color:var(--bg); }

/* 用户评价（有内容才显示） */
.testi { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.testi figure { margin:0; padding:22px; border-radius:22px; background:var(--surface); box-shadow:var(--shadow-1); }
.testi blockquote { margin:0; font-size:15px; line-height:1.7; color:var(--ink); }
.testi figcaption { margin-top:14px; font-size:13px; color:var(--ink-3); } .testi figcaption b { color:var(--ink); margin-right:8px; }

/* ================= 免费工具页 ================= */
.tool-hero { padding-top:clamp(36px, 6vh, 64px); max-width:900px; }
.crumbs { display:flex; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); margin-bottom:18px; }
.crumbs a { color:var(--ink-2); text-decoration:none; } .crumbs a:hover { color:var(--ink); }
.tool-hero h1 { margin:0; font-size:clamp(32px, 4.6vw, 52px); line-height:1.08; letter-spacing:-.04em; font-weight:600; }
.tool-hero .lede { margin:16px 0 0; max-width:40em; font-size:17px; line-height:1.65; color:var(--ink-2); }
.tool-grid { display:grid; grid-template-columns:minmax(0, 440px) minmax(0, 1fr); gap:28px; align-items:start; margin-top:36px; }
.tool-form { background:var(--surface); border-radius:24px; padding:22px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:14px; }
.tf { display:flex; flex-direction:column; gap:6px; min-width:0; }
.tf > span, .tf-lbl { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.tf input, .tf textarea, .tf select, .ti-row input, .po-body textarea { width:100%; box-sizing:border-box; border:0; border-radius:12px; padding:10px 12px; font:15px/1.45 var(--sans); color:var(--ink); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); outline:none; transition:box-shadow .15s; }
.tf input:focus, .tf textarea:focus, .tf select:focus, .ti-row input:focus, .po-body textarea:focus { box-shadow:inset 0 0 0 1.5px var(--brand); }
.tf textarea { resize:vertical; }
.tf-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .tf-3 { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:10px; }
.tf-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .tf-row.col { flex-direction:column; align-items:stretch; }
.seg2 { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:14px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); }
.seg2 label { cursor:pointer; } .seg2 input { position:absolute; opacity:0; pointer-events:none; }
.seg2 span { display:block; padding:7px 12px; border-radius:10px; font-size:13px; font-weight:600; color:var(--ink-2); transition:background .15s, color .15s; }
.seg2 input:checked + span { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.seg2 input:focus-visible + span { outline:2px solid var(--brand); }
.seg2.wrap3 { display:grid; grid-template-columns:repeat(3, 1fr); } .seg2.wrap3 span { text-align:center; }
.ti-head, .ti-row { display:grid; grid-template-columns:1fr 64px 100px 28px; gap:6px; align-items:center; }
.ti-head { font-size:11.5px; color:var(--ink-3); margin:6px 0 4px; } .ti-row { margin-bottom:6px; }
.ti-x { border:0; background:transparent; color:var(--ink-3); font-size:18px; cursor:pointer; } .ti-x:disabled { opacity:.3; }
.tf-items .btn, .tf-items { display:flex; flex-direction:column; } .tf-items .btn { align-self:flex-start; margin-top:2px; }
.tf-pay { display:flex; flex-direction:column; gap:8px; }
.pay-opt { border-radius:14px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); padding:10px 12px; }
.po-head { display:flex; align-items:center; gap:10px; cursor:pointer; } .po-head input { width:16px; height:16px; accent-color:var(--brand); }
.po-ico { width:24px; height:24px; display:inline-flex; } .po-ico svg { width:100%; height:100%; }
.po-body { display:none; margin-top:10px; gap:8px; flex-direction:column; } .pay-opt:has(input[type=checkbox]:checked) .po-body { display:flex; }
.po-body textarea { background:var(--surface); }
.po-qr span { display:inline-block; font-size:12.5px; font-weight:600; color:var(--brand); cursor:pointer; }
.po-qr-rm { align-self:flex-start; border:0; background:none; color:var(--ink-3); font-size:12px; cursor:pointer; padding:0; }
.tool-local { margin:4px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-3); } .tool-local.center { text-align:center; margin-top:18px; }
.tool-out { position:sticky; top:90px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.to-bar { display:flex; align-items:center; justify-content:space-between; } .to-bar b { font-size:14px; }
.paper-wrap { border-radius:22px; background:var(--surface-2); box-shadow:var(--shadow-1); padding:18px; max-height:calc(100vh - 260px); overflow:auto; }
/* 生成出来的文件永远是白纸黑字（深色模式也一样，打印出来也一样） */
.paper { background:#fff; color:#16171B; border-radius:6px; padding:44px 46px; box-shadow:0 10px 30px -18px rgba(15,35,70,.4); font:14px/1.75 var(--sans); }
.paper h2 { margin:0; font-size:22px; letter-spacing:.02em; } .paper h3 { margin:22px 0 6px; font-size:15px; }
.paper p { margin:0 0 6px; } .pp-head { text-align:center; margin-bottom:20px; }
.pp-parties { width:100%; border-collapse:collapse; margin-bottom:14px; } .pp-parties td { padding:7px 0; border-bottom:1px solid #E3E5E8; } .pp-parties td:first-child { width:36%; color:#5F646C; }
.pp-pre { color:#5F646C; } .pp-list { margin:4px 0 0; padding-left:22px; } .pp-end { margin-top:22px !important; color:#5F646C; }
.pp-sigs { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:34px; } .pp-sig b { display:block; margin-bottom:12px; }
.pp-sig div { display:flex; align-items:flex-end; gap:8px; margin-top:16px; font-size:13px; color:#5F646C; } .pp-sig i { flex:1; border-bottom:1px solid #16171B; height:22px; }
.pp-inv-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:16px; border-bottom:2px solid #16171B; }
.pp-inv-head h2 { font-size:28px; margin-bottom:8px; } .pp-inv-head b { display:block; } .pp-inv-head small { color:#5F646C; }
.pp-inv-head dl { display:grid; grid-template-columns:auto auto; gap:2px 14px; margin:0; font-size:13px; } .pp-inv-head dt { color:#5F646C; } .pp-inv-head dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.pp-to { margin:16px 0; } .pp-to span { display:block; font-size:12px; color:#5F646C; }
.pp-items { width:100%; border-collapse:collapse; font-size:13.5px; } .pp-items th { text-align:left; font-size:12px; color:#5F646C; font-weight:600; padding:8px 0; border-bottom:1px solid #16171B; }
.pp-items td { padding:9px 0; border-bottom:1px solid #E3E5E8; } .pp-items .r { text-align:right; font-variant-numeric:tabular-nums; } .pp-items th + th, .pp-items td + td { padding-left:10px; }
.pp-items tfoot td { font-weight:700; border-bottom:0; }
.pp-due { display:flex; justify-content:space-between; align-items:baseline; margin:14px 0 6px; padding:14px 16px; border-radius:10px; background:#16171B; color:#fff; } .pp-due b { font-size:22px; font-variant-numeric:tabular-nums; }
.pp-pays { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.pp-pay { border:1px solid #E3E5E8; border-radius:10px; padding:12px; font-size:13px; } .pp-pay p { margin:6px 0 0; color:#3B3E44; word-break:break-word; }
.pp-pay-h { display:flex; align-items:center; gap:8px; } .pp-pay-h .ico { width:22px; height:22px; display:inline-flex; } .pp-pay-h .ico svg { width:100%; height:100%; }
.pp-pay img { display:block; width:120px; height:auto; margin-top:8px; }
.pp-thanks { margin-top:22px !important; color:#5F646C; }
.rm-text { width:100%; box-sizing:border-box; min-height:320px; border:0; border-radius:20px; padding:20px; font:15px/1.75 var(--sans); color:var(--ink); background:var(--surface); box-shadow:var(--shadow-1); resize:vertical; }
.tool-cta { background:var(--surface); border-radius:20px; padding:16px; box-shadow:var(--shadow-1); } .tool-cta p { margin:10px 2px 0; font-size:13px; line-height:1.6; color:var(--ink-2); }
.btn.block { width:100%; justify-content:center; }
.tool-disc { font-size:12px; line-height:1.6; color:var(--ink-3); margin:0 4px; }
.tool-article { max-width:760px; margin-top:clamp(60px, 9vh, 100px); }
.tool-article h2 { font-size:24px; letter-spacing:-.02em; margin:34px 0 10px; } .tool-article h2:first-child { margin-top:0; }
.tool-article p { font-size:16.5px; line-height:1.8; color:var(--ink-2); margin:0 0 14px; }
.lang-zh .tool-article p, .lang-zh-TW .tool-article p { font-size:16px; line-height:1.9; }
.tool-more { margin:40px auto 90px; } .tool-more h2 { font-size:20px; margin:0 0 14px; }
.tool-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.tool-card { display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:22px; background:var(--surface); box-shadow:var(--shadow-1); text-decoration:none; color:var(--ink); transition:transform .2s var(--ease), box-shadow .2s; }
.tool-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-1), 0 14px 30px -18px rgba(15,35,70,.35); }
.tool-card svg { width:30px; height:30px; color:var(--brand); margin-bottom:6px; } .tool-card b { font-size:17px; } .tool-card span { font-size:14px; line-height:1.6; color:var(--ink-2); }
.tool-more.big { margin-top:30px; }
@media (max-width:960px) {
  .tool-grid { grid-template-columns:1fr; } .tool-out { position:static; }
  .paper-wrap { max-height:none; padding:10px; } .paper { padding:26px 20px; }
}
@media (max-width:520px) { .tf-2, .tf-3 { grid-template-columns:1fr; } .seg2.wrap3 { grid-template-columns:1fr; } .ti-head, .ti-row { grid-template-columns:1fr 48px 78px 24px; } }
/* 打印 / 存 PDF：只要那张纸 */
@media print {
  @page { margin:14mm; }
  body { background:#fff !important; }
  body.page-tool > *:not(main), body.page-tool main > *:not(.tool-grid), .tool-form, .to-bar, .tool-cta, .tool-disc, .langhint { display:none !important; }
  .tool-grid { display:block; margin:0; padding:0; } .tool-out { position:static; }
  .paper-wrap { padding:0; background:none; box-shadow:none; max-height:none; overflow:visible; }
  .paper { box-shadow:none; padding:0; border-radius:0; }
  .pp-due { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* SEO 接口发布的页面：正文排版（沿用工具页的 .tool-article），补列表、表格、引用、图片 */
.seo-meta { margin:14px 0 0; font-size:13px; color:var(--ink-3); }
.seo-body h3 { font-size:19px; letter-spacing:-.015em; margin:26px 0 8px; }
.seo-body h4 { font-size:16.5px; margin:22px 0 6px; }
.seo-body ul, .seo-body ol { margin:0 0 16px; padding-left:1.3em; color:var(--ink-2); font-size:16.5px; line-height:1.8; }
.seo-body li + li { margin-top:4px; }
.seo-body a { color:var(--brand); text-underline-offset:3px; }
.seo-body strong { color:var(--ink); }
.seo-body blockquote { margin:18px 0; padding:4px 0 4px 18px; border-left:3px solid var(--brand); }
.seo-body blockquote p { margin:0; }
.seo-body img { display:block; max-width:100%; height:auto; border-radius:16px; margin:20px 0; }
.seo-body code { font-size:.92em; background:color-mix(in srgb, var(--ink) 7%, transparent); padding:1px 6px; border-radius:6px; }
.seo-body pre { background:var(--surface); box-shadow:var(--shadow-1); border-radius:14px; padding:16px 18px; overflow-x:auto; font-size:14px; }
.seo-body pre code { background:none; padding:0; }
.seo-body hr { border:0; border-top:1px solid var(--line); margin:30px 0; }
.seo-table { overflow-x:auto; margin:18px 0 22px; border-radius:16px; background:var(--surface); box-shadow:var(--shadow-1); }
.seo-table table { width:100%; border-collapse:collapse; font-size:15px; }
.seo-table th, .seo-table td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.seo-table th { font-weight:600; font-size:13.5px; color:var(--ink); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.seo-table tr:last-child td { border-bottom:0; }
.seo-table td { color:var(--ink-2); }
.seo-preview { position:sticky; top:0; z-index:60; padding:10px 16px; text-align:center; font-size:13.5px; font-weight:600; background:#FFE9A8; color:#5A4300; }
.lang-zh .seo-body li, .lang-zh-TW .seo-body li { line-height:1.9; }
.page-seo .tool-hero, .page-seo .tool-article { max-width:820px; }
.page-seo .tool-article { margin-top:clamp(36px, 5vh, 56px); }
.page-seo .tool-article p, .page-seo .seo-body ul, .page-seo .seo-body ol { max-width:44em; }

/* 价格区第三张：AI 版（反色卡片，点阵标志） */
.plans.plans-3 { grid-template-columns:repeat(3, 1fr); max-width:1180px; }
.plan.ai { background:var(--ink); color:var(--bg); box-shadow:0 30px 70px -32px rgba(0,0,0,.5); }
.plan.ai h3 { display:flex; align-items:center; gap:10px; }
.plan.ai .plan-mark { width:22px; height:22px; flex:none; }
.plan.ai .plan-mark circle { fill:var(--bg); } .plan.ai .plan-mark circle:nth-child(9) { fill:#5B9BFF; }
.plan.ai .plan-price { margin-bottom:4px; }
.plan.ai .plan-d, .plan.ai .plan-alt, .plan.ai .plan-under, .plan.ai .plan-price span { color:color-mix(in srgb, var(--bg) 62%, transparent); }
.plan.ai .checks { border-top-color:color-mix(in srgb, var(--bg) 16%, transparent); }
.plan.ai .checks li { color:var(--bg); }
.plan.ai .checks svg { color:#5B9BFF; }
.ai-btn { background:var(--bg); color:var(--ink); }
.ai-btn:hover { background:color-mix(in srgb, var(--bg) 88%, var(--ink)); }
@media (max-width:1060px) { .plans.plans-3 { grid-template-columns:1fr 1fr; max-width:860px; } .plans.plans-3 .plan.ai { grid-column:1 / -1; } }
@media (max-width:760px) { .plans.plans-3 { grid-template-columns:1fr; } }

/* ================= Leo 介绍（首页） =================
   深色整段：左边文案，右边一张示例聊天截图 + Leo 面板，进入视野后自动演一遍真实流程：
   截图飞进面板 → 扫描截图、读到的字依次亮起 → 面板光环、逐字推理 → 步骤打勾 → 订单卡片逐行出现 → 确认、点阵散开。 */
.leo-band { --lb:#101114; --lw:#fff; --lb-2:rgba(255,255,255,.62); --lb-3:rgba(255,255,255,.42); --lblue:#5B9BFF;
  position:relative; overflow:hidden; isolation:isolate; border-radius:36px; background:var(--lb); color:var(--lw);
  padding:clamp(28px, 5vw, 72px); display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:clamp(28px, 5vw, 72px); align-items:center; }
.leo-band::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.11) 1.1px, transparent 1.4px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 45%, #000 20%, transparent 80%); mask-image:radial-gradient(ellipse 80% 70% at 70% 45%, #000 20%, transparent 80%); }
.leo-glow { position:absolute; z-index:-1; width:620px; height:620px; border-radius:50%; left:62%; top:34%; transform:translate(-50%, -50%); pointer-events:none;
  background:radial-gradient(circle, rgba(29,107,243,.42) 0%, rgba(29,107,243,.12) 38%, transparent 68%); filter:blur(8px);
  transition:left 1.4s cubic-bezier(.16,1,.3,1), top 1.4s cubic-bezier(.16,1,.3,1), opacity .8s; }
.leo-band[data-step="2"] .leo-glow { left:44%; top:52%; }
.leo-band[data-step="3"] .leo-glow { left:74%; top:40%; }
.leo-band[data-step="4"] .leo-glow, .leo-band[data-step="5"] .leo-glow { left:78%; top:68%; }
.leo-band[data-step="6"] .leo-glow { left:80%; top:74%; opacity:.75; }

.leo-copy { position:relative; }
.leo-tag { display:inline-flex; align-items:center; gap:9px; margin:0 0 22px; padding:6px 12px 6px 8px; border-radius:999px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); font-size:13px; font-weight:600; color:var(--lw); }
.leo-copy h2 { margin:0; font-size:clamp(32px, 3.9vw, 54px); line-height:1.06; font-weight:600; letter-spacing:-.045em; color:var(--lw); }
.lang-zh .leo-copy h2, .lang-zh-TW .leo-copy h2, .lang-ja .leo-copy h2 { letter-spacing:-.03em; line-height:1.14; }
.leo-copy h2 .dim { color:var(--lb-3); }
.leo-lede { margin:20px 0 0; font-size:17px; line-height:1.65; color:var(--lb-2); max-width:30em; }
.leo-facts { display:grid; grid-template-columns:1fr 1fr; gap:0 26px; margin-top:32px; }
.leo-facts > div { padding:15px 0 16px; border-top:1px solid rgba(255,255,255,.1); }
.leo-facts b { display:block; font-size:15px; font-weight:600; color:var(--lw); }
.leo-facts span { display:block; margin-top:4px; font-size:13.5px; line-height:1.55; color:var(--lb-2); }
.leo-note { margin:18px 0 0; font-size:12.5px; line-height:1.6; color:var(--lb-3); }
.leo-cta { margin-top:24px; background:var(--lw); color:var(--lb); }
.leo-cta:hover { background:#E6E8EC; }

/* 点阵（和后台 Leo 一样）：平时是「L」，思考时一圈蓝点转 */
.lx { width:20px; height:20px; flex:none; display:block; overflow:visible; }
.lx circle { fill:currentColor; opacity:.22; transform-box:fill-box; transform-origin:center; }
.lx circle:nth-child(1), .lx circle:nth-child(4), .lx circle:nth-child(7), .lx circle:nth-child(8) { opacity:1; }
.lx circle:nth-child(9) { opacity:1; fill:var(--lblue); }
.leo-tag .lx circle { animation:lx-orbit 2.4s infinite cubic-bezier(.16,1,.3,1); }
.busy .lx-panel .lx circle { animation:lx-orbit 1.5s infinite cubic-bezier(.16,1,.3,1); }
.leo-tag .lx circle:nth-child(2), .busy .lx-panel .lx circle:nth-child(2) { animation-delay:.19s; } .leo-tag .lx circle:nth-child(3), .busy .lx-panel .lx circle:nth-child(3) { animation-delay:.38s; }
.leo-tag .lx circle:nth-child(6), .busy .lx-panel .lx circle:nth-child(6) { animation-delay:.56s; } .leo-tag .lx circle:nth-child(9), .busy .lx-panel .lx circle:nth-child(9) { animation-delay:.75s; }
.leo-tag .lx circle:nth-child(8), .busy .lx-panel .lx circle:nth-child(8) { animation-delay:.94s; } .leo-tag .lx circle:nth-child(7), .busy .lx-panel .lx circle:nth-child(7) { animation-delay:1.12s; }
.leo-tag .lx circle:nth-child(4), .busy .lx-panel .lx circle:nth-child(4) { animation-delay:1.31s; }
.leo-tag .lx circle:nth-child(5), .busy .lx-panel .lx circle:nth-child(5) { animation:lx-core 1.5s infinite ease-in-out; }
@keyframes lx-orbit { 0% { opacity:.2; transform:scale(.6); fill:currentColor; } 14% { opacity:1; transform:scale(1.1); fill:var(--lblue); } 40% { opacity:.45; transform:scale(.75); fill:currentColor; } 100% { opacity:.2; transform:scale(.6); fill:currentColor; } }
@keyframes lx-core { 0%, 100% { opacity:.25; transform:scale(.7); } 50% { opacity:.9; transform:scale(1); } }

/* 舞台：鼠标移动时轻微立体视差 */
.leo-stage { position:relative; min-height:540px; perspective:1400px; --rx:0deg; --ry:0deg; }
.leo-stage > .lx-chat, .leo-stage > .lx-panel { transition:transform .9s cubic-bezier(.16,1,.3,1); }

/* 示例聊天截图 */
.lx-chat { position:absolute; left:-2%; top:56px; width:45%; padding-bottom:16px; border-radius:24px; overflow:hidden; background:#EDEDED; color:#111;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); transform:rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg) translateZ(-40px); }
.lx-chat-h { display:flex; justify-content:center; padding:14px 10px 12px; background:#F7F7F7; font-size:13px; font-weight:600; border-bottom:1px solid #E2E2E2; }
.lx-msgs { padding:14px 12px 0; display:flex; flex-direction:column; gap:9px; }
.lx-b { max-width:84%; padding:8px 11px; border-radius:9px; font-size:12px; line-height:1.5; background:#fff; position:relative; }
.lx-b.r { align-self:flex-end; background:#95EC69; }
.lx-hl { background:transparent; color:inherit; border-radius:4px; padding:0 1px; transition:background .5s, box-shadow .5s; }
.lx-hl.on { background:rgba(91,155,255,.26); box-shadow:0 0 0 1.5px rgba(29,107,243,.55); }
.lx-beam { position:absolute; left:-10%; right:-10%; height:90px; top:-90px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(91,155,255,.0) 20%, rgba(91,155,255,.38) 50%, rgba(91,155,255,0) 80%, transparent);
  box-shadow:0 0 0 0 transparent; }
.lx-beam::after { content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; background:linear-gradient(90deg, transparent, #5B9BFF 30%, #fff 50%, #5B9BFF 70%, transparent); box-shadow:0 0 14px 2px rgba(91,155,255,.8); }
.scan .lx-beam { animation:lx-scan 2.6s cubic-bezier(.45,0,.25,1) 1 forwards; }
@keyframes lx-scan { 0% { top:-90px; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { top:100%; opacity:0; } }
.lx-flag { position:absolute; right:10px; bottom:8px; font-style:normal; font-size:10.5px; font-weight:600; color:#888; background:#fff; border-radius:6px; padding:2px 6px; }

/* Leo 面板 */
.lx-panel { position:absolute; right:0; top:0; width:59%; border-radius:26px; background:#fff; color:#16171B;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(30px); }
.lx-ring { position:absolute; inset:-1.5px; border-radius:27.5px; padding:1.5px; pointer-events:none; opacity:0; transition:opacity .6s;
  background:conic-gradient(from var(--lx-a, 0deg), transparent 0 55%, #5B9BFF 72%, #B8D3FF 80%, #1D6BF3 88%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:lx-spin 2.2s linear infinite; }
.lx-ring::after { content:''; position:absolute; inset:-14px; border-radius:40px; background:inherit; filter:blur(18px); opacity:.55; }
@property --lx-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes lx-spin { to { --lx-a:360deg; } }
.busy .lx-ring { opacity:1; }
.lx-head { display:flex; align-items:center; gap:9px; padding:15px 18px 12px; border-bottom:1px solid #ECEDEF; font-size:14px; }
.lx-head .lx { width:22px; height:22px; color:#16171B; }
.lx-body { height:440px; overflow:hidden; padding:14px 16px 16px; display:flex; flex-direction:column; justify-content:flex-end; gap:14px; }

.lx-u, .lx-a, .lx-think, .lx-reason, .lx-steps, .lx-reply, .lx-card { transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), max-height .6s cubic-bezier(.16,1,.3,1), margin .6s; }
.lx-u { display:flex; flex-direction:column; align-items:flex-end; gap:6px; opacity:0; transform:translateY(12px); }
.lx-shot { position:relative; width:54px; height:70px; border-radius:10px; overflow:hidden; background:#EDEDED; box-shadow:0 0 0 1px rgba(0,0,0,.06);
  background-image:linear-gradient(#F7F7F7 0 12px, transparent 12px), linear-gradient(90deg, transparent 6px, #fff 6px 34px, transparent 34px), linear-gradient(90deg, transparent 18px, #95EC69 18px 48px, transparent 48px), linear-gradient(90deg, transparent 6px, #fff 6px 30px, transparent 30px);
  background-size:100% 100%, 100% 8px, 100% 8px, 100% 8px; background-position:0 0, 0 20px, 0 34px, 0 48px; background-repeat:no-repeat; }
.lx-shot i { position:absolute; left:4px; top:4px; width:14px; height:14px; border-radius:7px; background:rgba(16,17,20,.82); color:#fff; font:700 9px/14px var(--num); font-style:normal; text-align:center; }
.on1 .lx-shot { animation:lx-fly .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes lx-fly { from { transform:translate(-210px, 60px) rotate(-10deg) scale(2.2); opacity:0; } 35% { opacity:1; } }
.lx-ub { background:#EEF0F2; border-radius:15px 15px 5px 15px; padding:8px 12px; font-size:12.5px; }
.on1 .lx-u { opacity:1; transform:none; }

.lx-a { display:flex; gap:9px; opacity:0; transform:translateY(12px); }
.on2 .lx-a { opacity:1; transform:none; }
.lx-av { width:26px; height:26px; flex:none; border-radius:9px; background:#16171B; color:#fff; display:grid; place-items:center; }
.lx-av .lx { width:15px; height:15px; }
.lx-ab { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; padding-top:3px; }
.lx-think { position:relative; height:16px; font-size:12px; font-weight:600; color:#868B93; }
.lx-think span { position:absolute; left:0; top:0; white-space:nowrap; transition:opacity .4s, transform .4s; }
.lx-t1 { background:linear-gradient(90deg, #868B93 0 35%, #16171B 50%, #868B93 65% 100%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:lx-shim 1.8s linear infinite; }
@keyframes lx-shim { from { background-position:100% 0; } to { background-position:-150% 0; } }
.lx-t2 { opacity:0; transform:translateY(4px); }
.on3 .lx-t1 { opacity:0; transform:translateY(-4px); } .on3 .lx-t2 { opacity:1; transform:none; }
.lx-reason { margin:0; max-height:120px; overflow:hidden; border-left:2px solid #DCE8FD; padding:1px 0 1px 10px; font-size:11.5px; line-height:1.65; color:#868B93; min-height:1.65em; }
.on3 .lx-reason { max-height:0; opacity:0; margin:-9px 0 0; padding:0 0 0 10px; min-height:0; }
.lx-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:0; opacity:0; overflow:hidden; }
.on3 .lx-steps { max-height:60px; opacity:1; }
.lx-steps li { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:#5F646C; opacity:.25; transition:opacity .3s; }
.lx-steps li.run, .lx-steps li.done { opacity:1; }
.lx-steps i { position:relative; width:14px; height:14px; flex:none; border-radius:50%; border:1.8px solid #E4E6E9; }
.lx-steps .run i { border-top-color:#1D6BF3; animation:lx-rot .7s linear infinite; }
.lx-steps .done i { border-color:transparent; background:#E8F0FE; }
.lx-steps .done i::after { content:''; position:absolute; left:3.5px; top:3px; width:5px; height:3px; border-left:1.8px solid #1D6BF3; border-bottom:1.8px solid #1D6BF3; transform:rotate(-45deg); animation:lx-pop .35s cubic-bezier(.34,1.45,.64,1) both; }
@keyframes lx-rot { to { transform:rotate(360deg); } }
@keyframes lx-pop { from { transform:rotate(-45deg) scale(0); } }
.lx-reply { margin:0; font-size:13px; line-height:1.6; opacity:0; transform:translateY(8px); max-height:0; overflow:hidden; }
.on4 .lx-reply { opacity:1; transform:none; max-height:80px; }
.lx-ref { display:inline-flex; align-items:center; gap:4px; height:19px; padding:0 7px 0 3px; border-radius:7px; background:#E8F0FE; color:#1D5BD6; font-size:11px; font-weight:700; vertical-align:-3px; }
.lx-ref em { width:13px; height:13px; border-radius:4px; background:#EDEDED linear-gradient(90deg, transparent 6px, #95EC69 6px) 0 7px / 100% 3px no-repeat; }

.lx-card { position:relative; border:1px solid #E4E6E9; border-radius:16px; background:#fff; box-shadow:0 18px 40px -26px rgba(16,17,20,.4); opacity:0; transform:translateY(16px) scale(.97); max-height:0; overflow:hidden; }
.on4 .lx-card { opacity:1; transform:none; max-height:320px; overflow:visible; }
.lx-card-h { display:flex; align-items:center; gap:8px; padding:11px 13px 7px; }
.lx-card-h b { flex:1; font-size:13px; }
.lx-pill { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; transition:opacity .3s; }
.lx-pill.p1 { background:#FBF0DD; color:#B25E00; } .lx-pill.p2 { display:none; background:#E8F0FE; color:#1D5BD6; }
.on6 .lx-pill.p1 { display:none; } .on6 .lx-pill.p2 { display:inline; animation:lx-in .4s both; }
@keyframes lx-in { from { opacity:0; transform:scale(.8); } }
.lx-card dl { margin:0; padding:0 13px 4px; }
.lx-card dl > div { display:grid; grid-template-columns:52px 1fr; gap:8px; padding:5px 0; border-top:1px solid #F0F1F3; font-size:11.5px; opacity:0; transform:translateX(-6px); transition:opacity .4s, transform .4s; }
.lx-card dt { color:#868B93; font-weight:600; } .lx-card dd { margin:0; font-weight:700; }
.on4 .lx-card dl > div { opacity:1; transform:none; }
.on4 .lx-card dl > div:nth-child(1) { transition-delay:.25s; } .on4 .lx-card dl > div:nth-child(2) { transition-delay:.38s; } .on4 .lx-card dl > div:nth-child(3) { transition-delay:.51s; }
.on4 .lx-card dl > div:nth-child(4) { transition-delay:.64s; } .on4 .lx-card dl > div:nth-child(5) { transition-delay:.77s; }
.on4 .lx-card dl > div:nth-child(3) dd, .on4 .lx-card dl > div:nth-child(4) dd { animation:lx-flash 1.2s .9s both; }
@keyframes lx-flash { 0% { background:transparent; } 30% { background:rgba(91,155,255,.22); } 100% { background:transparent; } }
.lx-card-f { position:relative; padding:6px 13px 12px; height:42px; }
.lx-btn { position:absolute; left:13px; top:6px; display:inline-flex; align-items:center; height:28px; padding:0 14px; border-radius:999px; background:#16171B; color:#fff; font-size:11.5px; font-weight:700; transition:transform .2s, opacity .3s; }
.on5 .lx-btn { transform:scale(.92); background:#000; }
.on6 .lx-btn { opacity:0; transform:scale(.6); }
.lx-ok { position:absolute; left:13px; top:9px; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; opacity:0; }
.lx-ok i { width:18px; height:18px; border-radius:50%; background:#1D6BF3; position:relative; }
.lx-ok i::after { content:''; position:absolute; left:5px; top:5px; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.on6 .lx-ok { opacity:1; animation:lx-in .5s cubic-bezier(.34,1.45,.64,1) both; }
.lx-burst { position:absolute; left:22px; top:18px; width:0; height:0; pointer-events:none; }
.lx-burst b { position:absolute; width:5px; height:5px; margin:-2.5px; border-radius:50%; background:#5B9BFF; opacity:0; }
.on6 .lx-burst b { animation:lx-burst .9s cubic-bezier(.16,1,.3,1) both; }
.lx-burst b:nth-child(1) { --bx:34.0px; --by:0.0px; }
.lx-burst b:nth-child(2) { --bx:38.1px; --by:22.0px; }
.lx-burst b:nth-child(3) { --bx:27.0px; --by:46.8px; }
.lx-burst b:nth-child(4) { --bx:0.0px; --by:34.0px; }
.lx-burst b:nth-child(5) { --bx:-22.0px; --by:38.1px; }
.lx-burst b:nth-child(6) { --bx:-46.8px; --by:27.0px; }
.lx-burst b:nth-child(7) { --bx:-34.0px; --by:0.0px; }
.lx-burst b:nth-child(8) { --bx:-38.1px; --by:-22.0px; }
.lx-burst b:nth-child(9) { --bx:-27.0px; --by:-46.8px; }
.lx-burst b:nth-child(10) { --bx:-0.0px; --by:-34.0px; }
.lx-burst b:nth-child(11) { --bx:22.0px; --by:-38.1px; }
.lx-burst b:nth-child(12) { --bx:46.8px; --by:-27.0px; }
@keyframes lx-burst { 0% { opacity:1; transform:translate(0,0) scale(1.2); } 100% { opacity:0; transform:translate(var(--bx), var(--by)) scale(.4); } }

.lx-replay { position:absolute; right:6px; bottom:-6px; z-index:3; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); font:600 12.5px var(--sans); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); opacity:0; pointer-events:none; transition:opacity .4s, background .2s; }
.lx-replay svg { width:15px; height:15px; }
.lx-replay:hover { background:rgba(255,255,255,.14); color:#fff; }
.on6 .lx-replay { opacity:1; pointer-events:auto; }

@media (max-width:980px) {
  .leo-band { grid-template-columns:1fr; }
  .leo-stage { min-height:0; display:flex; flex-direction:column; align-items:flex-start; padding-bottom:40px; }
  .lx-chat { position:relative; top:0; width:min(300px, 72%); }
  .lx-panel { position:relative; width:min(420px, 92%); margin:-120px 0 0 auto; }
  .lx-replay { bottom:0; }
}
@media (max-width:560px) {
  .leo-band { border-radius:28px; padding:28px 18px 24px; }
  .leo-facts { grid-template-columns:1fr; }
  .lx-chat { width:78%; } .lx-panel { width:100%; margin-top:-90px; }
  .lx-body { height:400px; }
}
@media (prefers-reduced-motion:reduce) {
  .leo-band *, .leo-band *::before, .leo-band *::after { animation:none !important; transition:none !important; }
}