/* ═══════════════════════════════════════════════════════════════
   QuRoute 量子途 — Quantum Compute Router
   Visual System · Concept Demo for Investors
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#04060e;
  --bg2:#080d1c;
  --panel:rgba(148,170,255,.045);
  --panel2:rgba(148,170,255,.08);
  --line:rgba(148,170,255,.13);
  --line2:rgba(148,170,255,.22);
  --text:#e9edf8;
  --muted:#9aa3bd;
  --dim:#6b7490;

  --sc:#22d3ee;   --sc-soft:rgba(34,211,238,.16);
  --ion:#a78bfa;  --ion-soft:rgba(167,139,250,.16);
  --atom:#fbbf24; --atom-soft:rgba(251,191,36,.15);
  --ph:#f472b6;   --ph-soft:rgba(244,114,182,.16);
  --sim:#34d399;  --sim-soft:rgba(52,211,153,.15);

  --grad:linear-gradient(92deg,#22d3ee 0%,#a78bfa 52%,#f472b6 100%);
  --font-d:"Space Grotesk",-apple-system,"SF Pro Display","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",sans-serif;
  --font-b:-apple-system,"SF Pro Text","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Segoe UI",sans-serif;
  --font-m:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-b);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  min-height:100vh;
}
::selection{background:rgba(244,114,182,.35);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(148,170,255,.18);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(148,170,255,.32)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.mono{font-family:var(--font-m);font-feature-settings:"tnum" 1}
.hide{display:none!important}
.ic{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.16em;flex:none}
.ic .fd,use+.fd{fill:currentColor;stroke:none}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
kbd{font-family:var(--font-m);font-size:10.5px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* ── background fx ─────────────────────────────── */
.bg-fx{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1200px 700px at 75% -10%,rgba(70,60,160,.22),transparent 60%),
  radial-gradient(900px 600px at -10% 40%,rgba(20,90,120,.16),transparent 60%),
  var(--bg);}
.aurora{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5;will-change:transform}
.a1{width:640px;height:640px;left:-160px;top:-180px;background:radial-gradient(circle,rgba(34,211,238,.16),transparent 70%);animation:drift1 46s ease-in-out infinite alternate}
.a2{width:720px;height:720px;right:-200px;top:22%;background:radial-gradient(circle,rgba(167,139,250,.14),transparent 70%);animation:drift2 58s ease-in-out infinite alternate}
.a3{width:560px;height:560px;left:28%;bottom:-220px;background:radial-gradient(circle,rgba(244,114,182,.10),transparent 70%);animation:drift3 52s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-140px,-90px) scale(.92)}}
@keyframes drift3{to{transform:translate(90px,-110px) scale(1.2)}}
.grid-layer{position:absolute;inset:0;background-image:
  linear-gradient(rgba(148,170,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(148,170,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);}
.noise{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");}
#flash{position:fixed;inset:0;z-index:58;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(233,237,248,.5),transparent 65%);opacity:0;transition:opacity .5s}
#flash.on{opacity:1;transition:opacity .06s}

/* ── cursor ────────────────────────────────────── */
#curDot,#curRing{position:fixed;top:0;left:0;pointer-events:none;z-index:10000;border-radius:50%;display:none}
@media(pointer:fine){
  #curDot,#curRing{display:block}
  body{cursor:none}
  a,button,select,input,textarea,[data-h]{cursor:none}
  #curDot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(255,255,255,.8)}
  #curRing{width:34px;height:34px;border:1.5px solid rgba(233,237,248,.4);transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,background .25s}
  #curRing.hov{width:52px;height:52px;border-color:rgba(167,139,250,.85);background:rgba(167,139,250,.08)}
}

/* ── header ────────────────────────────────────── */
#siteHeader{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,border-color .35s,backdrop-filter .35s}
#siteHeader.scrolled{background:rgba(4,6,14,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.hd-in{max-width:1440px;margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{width:34px;height:34px;transition:transform .6s var(--ease)}
.brand:hover .brand-logo{transform:rotate(180deg)}
.brand-word{font-family:var(--font-d);font-weight:700;font-size:19px;letter-spacing:.2px;display:flex;align-items:baseline;gap:8px}
.brand-word em{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:3px;padding-left:9px;border-left:1px solid var(--line2)}
.main-nav{display:flex;gap:2px;margin-left:8px;flex:1}
.nav-link{position:relative;padding:8px 14px;font-size:13.5px;color:var(--muted);border-radius:10px;transition:color .25s;display:flex;align-items:baseline;gap:7px}
.nav-link span{font-family:var(--font-m);font-size:9px;letter-spacing:1.5px;opacity:.55;text-transform:uppercase}
.nav-link:hover{color:var(--text)}
.nav-link.act{color:var(--text)}
.nav-link.act::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--grad);border-radius:2px}
.hd-right{display:flex;align-items:center;gap:12px}
.wallet-chip{display:flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);border-radius:99px;background:var(--panel);font-size:13px;transition:border-color .25s}
.wallet-chip:hover{border-color:var(--line2)}
.wallet-chip .ic{color:var(--sim)}
.wallet-chip i{font-style:normal;font-size:10.5px;color:var(--dim)}
.jobs-btn{display:flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:13px;position:relative;transition:border-color .25s,color .25s}
.jobs-btn:hover{border-color:var(--line2)}
.jobs-btn b{font-family:var(--font-m);font-size:10px;background:var(--grad);color:#04060e;border-radius:99px;padding:1px 6px;font-weight:700}

.menu-btn{display:none;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:border-color .2s,background .2s}
.menu-btn.on{border-color:rgba(167,139,250,.6);background:rgba(167,139,250,.12)}
.m-nav{position:fixed;top:68px;left:0;right:0;z-index:49;display:none;flex-direction:column;gap:2px;padding:10px 16px 16px;
  background:rgba(6,10,22,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--line2);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.m-nav.open{display:flex;animation:viewIn .28s var(--ease)}
.m-link{display:flex;justify-content:space-between;align-items:center;padding:14px 12px;border-radius:11px;font-size:16px;color:var(--text)}
.m-link span{font-family:var(--font-m);font-size:10px;letter-spacing:2px;color:var(--dim)}
.m-link:active,.m-link:hover{background:var(--panel2)}
.m-link.act{background:rgba(167,139,250,.12);color:#cfc4ff}

/* ── buttons ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;letter-spacing:.2px;border-radius:12px;transition:transform .25s var(--ease),box-shadow .3s,border-color .25s,background .25s;white-space:nowrap;position:relative}
.btn:active{transform:scale(.97)}
.btn-primary{color:#050810;background:linear-gradient(92deg,#67e8f9,#c4b5fd 55%,#f9a8d4);box-shadow:0 4px 28px -6px rgba(139,124,246,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 40px -6px rgba(139,124,246,.75),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-ghost{border:1px solid var(--line2);background:var(--panel);color:var(--text)}
.btn-ghost:hover{border-color:rgba(167,139,250,.55);background:var(--panel2);transform:translateY(-2px)}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-sm{padding:8px 15px;font-size:13px}
.btn-block{width:100%}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:border-color .2s}
.icon-btn:hover{border-color:var(--line2)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ── layout ────────────────────────────────────── */
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
main{padding-top:68px}
.view{display:none}
.view.act{display:block;animation:viewIn .55s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.sec{padding-top:72px;padding-bottom:8px}
.sec-head{margin-bottom:34px;max-width:640px}
.sec-head.row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sec-head h2{font-family:var(--font-d);font-size:clamp(26px,3.4vw,40px);font-weight:700;line-height:1.18;letter-spacing:-.5px;margin:10px 0 12px}
.sec-head p{color:var(--muted);font-size:14.5px;max-width:560px}
.sec-eyebrow{font-family:var(--font-m);font-size:10.5px;letter-spacing:3px;color:#7dd3fc;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sec-eyebrow::before{content:"";width:22px;height:1px;background:var(--grad)}

/* ── live dot ──────────────────────────────────── */
.live-dot{width:7px;height:7px;border-radius:50%;background:#34d399;display:inline-block;position:relative;flex:none}
.live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #34d399;animation:ping 1.8s var(--ease) infinite}
.live-dot.big{width:10px;height:10px}
.live-dot.big::after{inset:-7px}
@keyframes ping{0%{transform:scale(.5);opacity:1}80%,100%{transform:scale(1.9);opacity:0}}

/* ── hero ──────────────────────────────────────── */
.hero{position:relative;min-height:calc(100vh - 68px);display:flex;align-items:center;overflow:hidden}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:80px 28px 90px;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-m);font-size:11px;letter-spacing:2.5px;color:#8fd4ee;border:1px solid rgba(56,189,248,.25);background:rgba(34,211,238,.06);padding:7px 14px;border-radius:99px;margin-bottom:26px}
.hero h1{font-family:var(--font-d);font-size:clamp(38px,5.2vw,72px);line-height:1.08;font-weight:700;letter-spacing:-1.5px;margin-bottom:24px}
.hero-sub{color:var(--muted);font-size:16px;line-height:1.85;max-width:560px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-cta.center{justify-content:center}
.hero-mini{display:flex;align-items:center;gap:18px;margin-top:44px;flex-wrap:wrap}
.hero-mini div{display:flex;flex-direction:column}
.hero-mini b{font-family:var(--font-m);font-size:21px;font-weight:600}
.hero-mini span{font-size:11.5px;color:var(--dim)}
.hero-mini i{width:1px;height:30px;background:var(--line)}

/* terminal feed */
.hero-feed{border:1px solid var(--line);border-radius:14px;background:rgba(5,8,18,.72);backdrop-filter:blur(14px);overflow:hidden;box-shadow:0 24px 70px -30px rgba(20,30,80,.9);transition:transform .5s var(--ease)}
.hero-feed:hover{transform:translateY(-4px)}
.term-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(148,170,255,.04)}
.tdots{display:flex;gap:6px}
.tdots i{width:9px;height:9px;border-radius:50%;background:#3a4460}
.tdots i:nth-child(1){background:#ff5f57}.tdots i:nth-child(2){background:#febc2e}.tdots i:nth-child(3){background:#28c840}
.term-title{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex:1;justify-content:center}
.term-tag{font-size:9.5px;letter-spacing:2px;color:#34d399;border:1px solid rgba(52,211,153,.35);border-radius:5px;padding:2px 7px}
.term-body{padding:14px 16px;height:296px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-family:var(--font-m);font-size:11.6px;line-height:2.05}
.term-body .tl{display:flex;gap:10px;white-space:nowrap;animation:tlIn .5s var(--ease);overflow:hidden;text-overflow:ellipsis}
.term-body .ts{color:var(--dim)}
.term-body .tt{color:#a5b4fc}
.term-body .tb{font-weight:600}
@keyframes tlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.term-body .caret{display:inline-block;width:7px;height:14px;background:#67e8f9;animation:blink 1s steps(1) infinite;vertical-align:-2px}
@keyframes blink{50%{opacity:0}}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(5,8,18,.5);padding:13px 0;position:relative;z-index:2}
.mq-track{display:inline-flex;gap:44px;white-space:nowrap;animation:mq 60s linear infinite;font-family:var(--font-m);font-size:12px;color:var(--dim);will-change:transform}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track .mq-i{display:inline-flex;align-items:center;gap:10px}
.mq-track .mq-i b{color:var(--muted);font-weight:500}
.mq-track .sq{width:7px;height:7px;border-radius:2px;display:inline-block}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── stats band ────────────────────────────────── */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:56px;padding-bottom:8px}
.stat{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px 24px;transition:border-color .3s,transform .3s var(--ease)}
.stat:hover{border-color:var(--line2);transform:translateY(-3px)}
.stat-v{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-1px}
.stat-l{margin-top:6px;font-size:13px;color:var(--muted)}
.stat-l em{display:block;font-style:normal;font-family:var(--font-m);font-size:9.5px;letter-spacing:2px;color:var(--dim);margin-top:3px}

/* ── routes row ────────────────────────────────── */
.routes-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.route-card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px 20px 20px;overflow:hidden;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;--rc:#22d3ee;--rcs:rgba(34,211,238,.16)}
.route-card:hover{transform:translateY(-5px);border-color:var(--rc);box-shadow:0 18px 44px -18px var(--rcs)}
.route-card::before{content:"";position:absolute;inset:0;background:radial-gradient(220px 130px at 80% -10%,var(--rcs),transparent 70%);opacity:0;transition:opacity .4s}
.route-card:hover::before{opacity:1}
.route-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--rcs);color:var(--rc);margin-bottom:16px;position:relative}
.route-ic .ic{width:22px;height:22px}
.route-card h3{font-size:16px;display:flex;align-items:baseline;gap:8px}
.route-card h3 span{font-family:var(--font-m);font-size:9.5px;color:var(--dim);letter-spacing:1px}
.route-card .rc-fid{font-family:var(--font-m);font-size:22px;font-weight:600;margin:12px 0 2px;color:var(--rc)}
.route-card .rc-fid em{font-style:normal;font-size:10.5px;color:var(--dim);letter-spacing:1px;margin-left:6px}
.route-card p{font-size:12.5px;color:var(--muted);line-height:1.7;min-height:63px}
.route-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--dim)}
.route-foot b{color:var(--muted);font-family:var(--font-m);font-weight:500}

/* ── steps ─────────────────────────────────────── */
.steps-row{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;gap:10px;align-items:stretch}
.step{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:26px 24px;transition:border-color .3s,transform .3s var(--ease)}
.step:hover{border-color:var(--line2);transform:translateY(-4px)}
.step-n{position:absolute;top:20px;right:22px;font-size:26px;color:rgba(148,170,255,.16);font-weight:700}
.step-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--ion-soft);color:#c4b5fd;margin-bottom:18px}
.step-ic .ic{width:22px;height:22px}
.step h3{font-size:17px;margin-bottom:9px}
.step p{font-size:13px;color:var(--muted);line-height:1.75}
.step-arrow{display:grid;place-items:center;color:var(--dim)}
.step-arrow .ic{width:20px;height:20px}

/* ── api section ───────────────────────────────── */
.api-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.api-copy h2{font-family:var(--font-d);font-size:clamp(24px,3vw,36px);line-height:1.2;margin:12px 0 14px;letter-spacing:-.5px}
.api-copy p{color:var(--muted);font-size:14.5px}
.api-copy code{font-family:var(--font-m);font-size:12.5px;color:#8fd4ee;background:rgba(34,211,238,.08);padding:1px 6px;border-radius:5px}
.api-feats{list-style:none;margin-top:20px;display:grid;gap:11px}
.api-feats li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--muted)}
.api-feats .ic{color:var(--sim)}
.code-win{border:1px solid var(--line);border-radius:14px;background:rgba(5,8,18,.78);overflow:hidden;box-shadow:0 30px 80px -35px rgba(20,30,80,.95);transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg);transition:transform .5s var(--ease)}
.code-win:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}
.code-body{padding:20px 22px;font-size:12.8px;line-height:1.95;overflow-x:auto;color:#c8d2ee}
.c-kw{color:#c792ea}.c-str{color:#a5f3c8}.c-num{color:#fdba74}.c-cm{color:#586179}.c-fn{color:#82aaff}

/* ── backend cards ─────────────────────────────── */
.bk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#featuredGrid{grid-template-columns:repeat(3,1fr)}
.bk-card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:20px 20px 16px;transition:transform .3s var(--ease),border-color .3s,box-shadow .35s;--rc:#22d3ee;--rcs:rgba(34,211,238,.16);overflow:hidden}
.bk-card:hover{transform:translateY(-4px);border-color:var(--rc);box-shadow:0 20px 50px -22px var(--rcs)}
.bk-card.maint{opacity:.55;filter:saturate(.4)}
.bk-top{display:flex;align-items:flex-start;gap:12px}
.bk-ic{width:40px;height:40px;border-radius:11px;background:var(--rcs);color:var(--rc);display:grid;place-items:center;flex:none}
.bk-ic .ic{width:20px;height:20px}
.bk-name{font-size:15.5px;font-weight:600;line-height:1.3}
.bk-org{font-size:11px;color:var(--dim);margin-top:2px;display:flex;gap:8px;align-items:center}
.bk-status{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--dim);font-family:var(--font-m)}
.st-dot{width:6px;height:6px;border-radius:50%}
.st-online .st-dot{background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.8)}
.st-busy .st-dot{background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.7)}
.st-maint .st-dot{background:#6b7490}
.st-preview .st-dot{background:#a78bfa;box-shadow:0 0 8px rgba(167,139,250,.7)}
.bk-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 12px;padding:13px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.bk-metrics div{display:flex;flex-direction:column}
.bk-metrics b{font-family:var(--font-m);font-size:16px;font-weight:600}
.bk-metrics span{font-size:10px;color:var(--dim);letter-spacing:.5px}
.bk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bk-price{font-family:var(--font-m);font-size:13px;color:var(--muted)}
.bk-price b{color:var(--text);font-weight:600;font-size:14.5px}
.bk-price .free-tag{color:var(--sim);font-weight:700}
.bk-free-tag{font-family:var(--font-m);font-size:9.5px;color:var(--sim);border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.08);border-radius:5px;padding:2px 7px;letter-spacing:1px}
.bk-spark{height:30px;margin-top:12px;display:block;width:100%}
.bk-queue-live{position:absolute;top:14px;right:14px;font-family:var(--font-m);font-size:10px;color:var(--dim)}

/* route color helpers */
.c-sc{--rc:var(--sc);--rcs:var(--sc-soft)} .c-sc:not(.chip){color:var(--sc)}
.c-ion{--rc:var(--ion);--rcs:var(--ion-soft)} .c-ion:not(.chip){color:var(--ion)}
.c-atom{--rc:var(--atom);--rcs:var(--atom-soft)} .c-atom:not(.chip){color:var(--atom)}
.c-photon{--rc:var(--ph);--rcs:var(--ph-soft)} .c-photon:not(.chip){color:var(--ph)}
.c-sim{--rc:var(--sim);--rcs:var(--sim-soft)} .c-sim:not(.chip){color:var(--sim)}
.c-sc.chip.on{background:var(--sc-soft);border-color:var(--sc);color:var(--sc)}
.c-ion.chip.on{background:var(--ion-soft);border-color:var(--ion);color:var(--ion)}
.c-atom.chip.on{background:var(--atom-soft);border-color:var(--atom);color:var(--atom)}
.c-photon.chip.on{background:var(--ph-soft);border-color:var(--ph);color:var(--ph)}
.c-sim.chip.on{background:var(--sim-soft);border-color:var(--sim);color:var(--sim)}

/* ── free teaser ───────────────────────────────── */
.free-teaser{position:relative;border:1px solid rgba(52,211,153,.25);border-radius:22px;background:linear-gradient(120deg,rgba(52,211,153,.07),rgba(34,211,238,.04) 55%,transparent);padding:52px 56px;display:flex;align-items:center;justify-content:space-between;gap:36px;overflow:hidden}
.ft-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(52,211,153,.13),transparent 70%);right:-100px;top:-140px;pointer-events:none}
.free-teaser h2{font-family:var(--font-d);font-size:clamp(24px,3vw,34px);margin:10px 0 12px;letter-spacing:-.5px}
.free-teaser p{color:var(--muted);max-width:520px;font-size:14.5px}
.ft-cta{display:flex;flex-direction:column;gap:14px;align-items:flex-end;flex:none}
.ft-note{font-size:11.5px;color:var(--dim)}
.ft-note b{color:var(--sim)}

/* ── cta final ─────────────────────────────────── */
.cta-final{text-align:center;padding-top:110px;padding-bottom:90px;position:relative}
.cta-core{display:flex;justify-content:center;margin-bottom:26px}
.cta-final h2{font-family:var(--font-d);font-size:clamp(28px,4vw,46px);letter-spacing:-1px;margin-bottom:14px}
.cta-final p{color:var(--muted);max-width:520px;margin:0 auto 34px}

/* ── panels ────────────────────────────────────── */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;backdrop-filter:blur(10px)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(148,170,255,.03)}
.panel-head h3{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px}
.panel-head .ic{color:#a5b4fc}
.ph-en{font-family:var(--font-m);font-size:9px;letter-spacing:2px;color:var(--dim);font-weight:400;margin-left:4px}
.panel-body{padding:20px}
.collapse-meta{font-size:11px;color:var(--dim)}
.collapse-meta b{color:var(--text)}

/* ── router view ───────────────────────────────── */
.router-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:20px;align-items:start}
.fld-lbl{font-family:var(--font-m);font-size:10px;letter-spacing:2.5px;color:var(--dim);margin:22px 0 12px;text-transform:uppercase}
.fld-lbl:first-child{margin-top:0}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preset{border:1px solid var(--line);border-radius:12px;padding:13px 14px;text-align:left;transition:all .25s var(--ease);position:relative;background:rgba(5,8,18,.35)}
.preset:hover{border-color:var(--line2);transform:translateY(-2px)}
.preset.on{border-color:rgba(167,139,250,.65);background:rgba(167,139,250,.08);box-shadow:0 8px 26px -10px rgba(167,139,250,.35)}
.preset .pt{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.preset .pt .ic{color:#a5b4fc;width:14px;height:14px}
.preset .ps{font-size:11px;color:var(--dim);margin-top:3px}
.preset .pq{font-family:var(--font-m);font-size:10px;color:#7dd3fc;margin-top:7px}
.param{margin-bottom:16px}
.param label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:9px}
.param label b{color:var(--text);font-weight:600;font-size:13.5px}
.range-ticks{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim);margin-top:5px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:linear-gradient(90deg,#67e8f9,#c4b5fd var(--fill,50%),rgba(148,170,255,.14) var(--fill,50%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid #a78bfa;box-shadow:0 0 14px rgba(167,139,250,.65);cursor:none;transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid #a78bfa;cursor:none}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:7px 14px;background:rgba(5,8,18,.35);transition:all .22s var(--ease)}
.chip:hover{border-color:var(--line2);color:var(--text)}
.chip.on{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.6);color:#cfc4ff}
.chip .ic{width:13px;height:13px}
.chip-lbl{font-size:10px;letter-spacing:2px;color:var(--dim)}
.chip-seg{display:inline-flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:99px}
.chip-seg .chip{border:none;background:transparent;padding:5px 12px}
.chip-seg .chip.on{background:rgba(167,139,250,.14)}
.sel{background:rgba(5,8,18,.6);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;font-size:12.5px;color:var(--text);outline:none}
.sel option{background:#0a0f1e}
.fbar-sep{width:1px;height:22px;background:var(--line)}
#routeBtnCost{font-size:10px;opacity:.75;background:rgba(5,10,20,.25);padding:3px 8px;border-radius:6px;margin-left:6px}

/* task profile chips */
.profile-chips{display:flex;flex-wrap:wrap;gap:9px}
.pf-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:7px 12px;background:rgba(5,8,18,.4);animation:tlIn .4s var(--ease)}
.pf-chip b{color:#8fd4ee;font-weight:600}
.pf-chip.hot b{color:#fbbf24}
.pf-chip.warn b{color:#f9a8d4}

/* candidates / collapse */
.cand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:220px}
.cand-empty{grid-column:1/-1;display:grid;place-items:center;color:var(--dim);font-size:13px;min-height:200px;border:1px dashed var(--line);border-radius:12px;padding:30px;text-align:center;line-height:1.9}
.cand{position:relative;border:1px solid var(--line);border-radius:11px;padding:11px 12px 10px;background:rgba(5,8,18,.5);transition:transform .3s var(--ease),border-color .3s,opacity .4s,box-shadow .4s;--rc:#22d3ee;--rcs:rgba(34,211,238,.16)}
.cand .cd-name{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cand .cd-route{font-size:9.5px;color:var(--dim);display:flex;align-items:center;gap:5px;margin-top:2px}
.cand .cd-route i{width:6px;height:6px;border-radius:2px;background:var(--rc);display:inline-block}
.cand .bar{height:5px;border-radius:5px;background:rgba(148,170,255,.1);margin-top:9px;overflow:hidden}
.cand .bar i{display:block;height:100%;width:20%;min-width:3px;border-radius:5px;background:var(--rc);box-shadow:0 0 10px var(--rcs);transition:width .12s linear}
.cand .cd-p{font-family:var(--font-m);font-size:10px;color:var(--muted);margin-top:5px;display:flex;justify-content:space-between}
.cand .cd-p b{color:var(--rc);font-weight:600}
.cand.jitter{animation:quantumJitter .35s infinite}
@keyframes quantumJitter{0%,100%{transform:translate(0,0)}25%{transform:translate(.6px,-.5px)}50%{transform:translate(-.5px,.6px)}75%{transform:translate(.4px,.4px)}}
.cand.dim{opacity:.32;filter:saturate(.3)}
.cand.blocked{opacity:.3;filter:saturate(.2) grayscale(.5)}
.cand.blocked .bar i{width:0!important}
.cand .cd-block{position:absolute;inset:auto 8px 8px 8px;font-size:9px;font-family:var(--font-m);color:#f9a8d4;background:rgba(10,5,15,.85);border:1px solid rgba(244,114,182,.25);border-radius:6px;padding:3px 7px;display:flex;gap:5px;align-items:center;animation:tlIn .4s var(--ease)}
.cand.winner{border-color:var(--rc);box-shadow:0 0 0 1px var(--rc),0 14px 44px -10px var(--rcs);transform:scale(1.05);z-index:2;background:rgba(8,12,26,.85)}
.cand.winner::after{content:"✦ 最优";position:absolute;top:-9px;right:10px;font-size:9px;font-family:var(--font-m);letter-spacing:2px;color:#050810;background:linear-gradient(92deg,#67e8f9,#c4b5fd);border-radius:5px;padding:2px 8px;font-weight:700}
.cand.top2{opacity:.9}

/* explain */
.explain-panel{border-color:rgba(52,211,153,.28)}
.ex-hero{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid rgba(52,211,153,.25);background:rgba(52,211,153,.05);border-radius:12px;margin-bottom:16px}
.ex-hero .ex-badge{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--rcs,var(--ion-soft));color:var(--rc,var(--ion));flex:none}
.ex-hero .ex-badge .ic{width:23px;height:23px}
.ex-hero h4{font-size:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ex-hero p{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.8}
.ex-hero .ex-save{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:10.5px;color:#34d399;border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.08);padding:3px 9px;border-radius:99px}
.alt-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:9px;transition:border-color .25s;--rc:#a78bfa;--rcs:var(--ion-soft)}
.alt-row:hover{border-color:var(--line2)}
.alt-row .alt-rank{font-family:var(--font-m);font-size:16px;color:var(--dim);width:26px;flex:none}
.alt-row .alt-name{font-size:13.5px;font-weight:600}
.alt-row .alt-scores{display:flex;gap:12px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.alt-sc{display:flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:10px;color:var(--dim)}
.alt-sc i{width:36px;height:4px;border-radius:4px;background:rgba(148,170,255,.12);overflow:hidden;display:inline-block}
.alt-sc i b{display:block;height:100%;background:var(--rc,#a78bfa);border-radius:4px}
.alt-sc span b{color:var(--muted)}
.ex-excluded{margin-top:14px}
.ex-excluded summary{cursor:none;font-size:11.5px;color:var(--dim);font-family:var(--font-m);list-style:none;display:flex;align-items:center;gap:7px}
.ex-excluded summary::-webkit-details-marker{display:none}
.ex-excluded summary .ic{transition:transform .25s}
.ex-excluded[open] summary .ic{transform:rotate(180deg)}
.ex-excluded .ex-x{font-size:11px;color:var(--dim);font-family:var(--font-m);display:flex;justify-content:space-between;padding:7px 2px;border-bottom:1px dashed var(--line)}
.ex-excluded .ex-x b{color:#f9a8d4;font-weight:400}
.submit-bar{display:flex;align-items:center;gap:16px;margin-top:18px;padding:16px;border-radius:12px;background:rgba(5,8,18,.55);border:1px solid var(--line2)}
.submit-bar .sb-info{flex:1;font-size:12px;color:var(--muted)}
.submit-bar .sb-info b{display:block;font-size:14px;color:var(--text);margin-bottom:2px}
.submit-bar .sb-meta{font-family:var(--font-m);font-size:11px;color:var(--dim);display:flex;gap:14px}
.submit-bar .sb-meta b{color:#8fd4ee}

/* ── filter bar ────────────────────────────────── */
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}

/* ── bench ─────────────────────────────────────── */
.bench-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-bottom:18px}
#lineChart,#radarChart{width:100%;display:block}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.lg-item{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);font-family:var(--font-m);cursor:none;transition:opacity .25s}
.lg-item i{width:16px;height:3px;border-radius:3px;display:inline-block}
.lg-item.off{opacity:.3}
.table-wrap{overflow-x:auto}
.lb-table{width:100%;border-collapse:collapse;font-size:13px;min-width:860px}
.lb-table th{font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;color:var(--dim);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-weight:500;white-space:nowrap}
.lb-table th.r,.lb-table td.r{text-align:right}
.lb-table th[data-sort]{cursor:none;transition:color .2s}
.lb-table th[data-sort]:hover{color:var(--text)}
.lb-table th.sorted{color:#8fd4ee}
.lb-table td{padding:12px 14px;border-bottom:1px solid rgba(148,170,255,.07);white-space:nowrap}
.lb-table tr{transition:background .2s;cursor:none}
.lb-table tbody tr:hover{background:rgba(148,170,255,.045)}
.lb-name{font-weight:600;display:flex;align-items:center;gap:9px}
.lb-name .ic{width:15px;height:15px}
.route-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:var(--font-m);color:var(--muted)}
.route-pill i{width:7px;height:7px;border-radius:2px;display:inline-block}
.trend-up{color:#34d399}.trend-dn{color:#f9a8d4}
.lb-fid b{font-family:var(--font-m)}

/* ── free view ─────────────────────────────────── */
.free-hero{position:relative;border:1px solid rgba(52,211,153,.25);border-radius:24px;overflow:hidden;padding:64px 60px;margin-bottom:22px;background:linear-gradient(130deg,rgba(52,211,153,.08),rgba(34,211,238,.05) 50%,transparent)}
.free-hero h1{font-family:var(--font-d);font-size:clamp(30px,4.4vw,52px);letter-spacing:-1px;margin:12px 0 14px}
.free-hero p{color:var(--muted);max-width:600px;font-size:15px}
.free-hero-cta{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.free-cd{font-size:11px;color:var(--dim)}
.free-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
#freeSimGrid{grid-template-columns:1fr 1fr}
.sched-item{display:flex;align-items:center;gap:15px;border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:10px;transition:border-color .25s}
.sched-item:hover{border-color:var(--line2)}
.sched-item .si-main{flex:1}
.sched-item .si-main b{font-size:14px;display:flex;gap:8px;align-items:center}
.sched-item .si-main span{font-size:11.5px;color:var(--dim);font-family:var(--font-m)}
.quota{width:130px}
.quota .q-bar{height:5px;border-radius:5px;background:rgba(148,170,255,.12);overflow:hidden;margin-bottom:5px}
.quota .q-bar i{display:block;height:100%;background:linear-gradient(90deg,#34d399,#22d3ee);border-radius:5px}
.quota span{font-size:9.5px;color:var(--dim);font-family:var(--font-m)}
.edu-box{display:flex;align-items:center;gap:14px;border:1px dashed var(--line2);border-radius:12px;padding:16px;margin-top:16px}
.edu-box .ic{width:26px;height:26px;color:#a5b4fc}
.edu-box b{font-size:13.5px}
.edu-box span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.edu-box .btn{margin-left:auto;flex:none}

/* ── drawer ────────────────────────────────────── */
#drawerOverlay,#modalOverlay{position:fixed;inset:0;background:rgba(2,4,10,.6);backdrop-filter:blur(6px);z-index:80;opacity:0;transition:opacity .3s}
#drawerOverlay.show,#modalOverlay.show{opacity:1}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);z-index:85;background:rgba(7,11,24,.92);backdrop-filter:blur(24px);border-left:1px solid var(--line2);transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column}
#drawer.show{transform:none}
#drawer.hide,#drawerOverlay.hide,#modalOverlay.hide,#backendModal.hide{display:block!important;opacity:0;pointer-events:none}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.dr-head h3{font-size:15px;display:flex;align-items:center;gap:9px}
.dr-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.job{border:1px solid var(--line);border-radius:14px;background:rgba(5,8,18,.55);padding:16px;animation:tlIn .45s var(--ease)}
.job-top{display:flex;align-items:center;gap:10px}
.job-id{font-family:var(--font-m);font-size:11px;color:var(--dim)}
.job-name{font-weight:600;font-size:14px;flex:1}
.job-stage{font-family:var(--font-m);font-size:10px;letter-spacing:1px;padding:3px 10px;border-radius:99px;border:1px solid}
.st-queued{color:#fbbf24;border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.07)}
.st-transpile{color:#a78bfa;border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.07)}
.st-run{color:#22d3ee;border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.07)}
.st-done{color:#34d399;border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.07)}
.job-bk{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:8px}
.job-bk i{width:7px;height:7px;border-radius:2px;display:inline-block}
.job-bk b{color:var(--text);font-weight:600}
.job-prog{height:5px;border-radius:5px;background:rgba(148,170,255,.1);margin-top:12px;overflow:hidden}
.job-prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#67e8f9,#c4b5fd);border-radius:5px;transition:width .3s;box-shadow:0 0 12px rgba(103,232,249,.5)}
.job-meta{display:flex;justify-content:space-between;font-family:var(--font-m);font-size:10px;color:var(--dim);margin-top:7px}
.job-stages{display:flex;gap:4px;margin-top:12px}
.jstage{flex:1;text-align:center;font-family:var(--font-m);font-size:8.5px;color:var(--dim);padding:4px 0;border-radius:6px;border:1px solid transparent;letter-spacing:.5px}
.jstage.on{color:#8fd4ee;border-color:rgba(34,211,238,.3);background:rgba(34,211,238,.06)}
.jstage.ok{color:#34d399;border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.05)}
.job-res{margin-top:14px;border-top:1px dashed var(--line);padding-top:13px}
.job-res h5{font-size:11px;font-family:var(--font-m);letter-spacing:2px;color:var(--dim);margin-bottom:10px;display:flex;justify-content:space-between}
.job-res h5 b{color:#8fd4ee}
.hist-canvas{width:100%;height:130px;display:block}
.job-kv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.job-kv div{border:1px solid var(--line);border-radius:8px;padding:8px 9px}
.job-kv b{display:block;font-family:var(--font-m);font-size:13px;font-weight:600}
.job-kv span{font-size:9px;color:var(--dim);letter-spacing:.5px}
.empty-jobs{display:grid;place-items:center;height:100%;color:var(--dim);text-align:center;line-height:2;font-size:13px}
.empty-jobs .ic{width:30px;height:30px;opacity:.4;margin-bottom:8px}

/* ── modal ─────────────────────────────────────── */
#backendModal{position:fixed;z-index:90;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);width:min(680px,94vw);max-height:88vh;overflow-y:auto;background:rgba(7,11,24,.94);backdrop-filter:blur(24px);border:1px solid var(--line2);border-radius:20px;opacity:0;transition:opacity .3s,transform .35s var(--ease);padding:26px}
#backendModal.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bm-close{position:absolute;top:16px;right:16px;z-index:2}
.bm-hero{display:flex;gap:15px;align-items:center;margin-bottom:18px;--rc:#22d3ee}
.bm-hero .bk-ic{width:52px;height:52px}
.bm-hero h3{font-size:20px;font-family:var(--font-d)}
.bm-hero .bk-org{font-size:12px}
.bm-chart{width:100%;height:170px;display:block;border:1px solid var(--line);border-radius:12px;background:rgba(5,8,18,.5);margin-bottom:16px}
.bm-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.bm-specs div{border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.bm-specs b{display:block;font-family:var(--font-m);font-size:15px;font-weight:600}
.bm-specs span{font-size:10px;color:var(--dim)}
.bm-caps{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.bm-cap{font-size:10.5px;font-family:var(--font-m);color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.bm-cap.yes{color:#34d399;border-color:rgba(52,211,153,.35)}
.bm-actions{display:flex;gap:11px;align-items:center}
.bm-actions .bm-price{margin-left:auto;font-family:var(--font-m);font-size:12px;color:var(--muted)}
.bm-actions .bm-price b{font-size:16px;color:var(--text)}
.bm-desc{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:16px}

/* ── toasts ────────────────────────────────────── */
#toasts{position:fixed;top:82px;right:24px;z-index:100;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{display:flex;gap:11px;align-items:center;border:1px solid var(--line2);background:rgba(10,15,30,.92);backdrop-filter:blur(16px);border-radius:13px;padding:13px 17px;font-size:13px;min-width:260px;box-shadow:0 18px 50px -12px rgba(10,20,60,.8);animation:toastIn .45s var(--ease)}
.toast .ic{width:17px;height:17px}
.toast.ok .ic{color:#34d399}
.toast.info .ic{color:#22d3ee}
.toast.warn .ic{color:#fbbf24}
.toast b{font-weight:600}
.toast span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.toast.out{animation:toastOut .4s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px) scale(.95)}}

/* ── footer ────────────────────────────────────── */
#siteFooter{border-top:1px solid var(--line);margin-top:60px;background:rgba(4,6,14,.6)}
.ft-in{display:flex;justify-content:space-between;gap:50px;padding-top:54px;padding-bottom:40px;flex-wrap:wrap}
.ft-brand p{color:var(--dim);font-size:12.5px;margin-top:16px;line-height:1.8}
.ft-cols{display:flex;gap:64px;flex-wrap:wrap}
.ft-cols b{display:block;font-size:12.5px;margin-bottom:14px;color:var(--muted)}
.ft-cols a{display:block;font-size:13px;color:var(--dim);margin-bottom:10px;transition:color .2s}
.ft-cols a:hover{color:var(--text)}
.ft-bottom{display:flex;justify-content:space-between;gap:14px;padding-top:20px;padding-bottom:26px;border-top:1px solid rgba(148,170,255,.07);font-size:11.5px;color:var(--dim);flex-wrap:wrap}

/* ── reveal ────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.42s}

/* ── responsive ────────────────────────────────── */
@media(max-width:1200px){
  .routes-row{grid-template-columns:repeat(3,1fr)}
  .bk-grid,#featuredGrid{grid-template-columns:repeat(2,1fr)}
  .cand-grid{grid-template-columns:repeat(2,1fr)}
  .hero-in{gap:36px}
}
@media(max-width:980px){
  .main-nav{display:none}
  .menu-btn{display:grid}
  .hd-right{gap:8px}
  .hd-right .btn-sm{display:none}
  .wallet-chip{padding:7px 10px}
  .hd-in{gap:12px;padding:0 16px}
  .hero{min-height:auto}
  .hero-in{grid-template-columns:1fr;padding:96px 16px 56px}
  .router-grid,.bench-grid,.free-grid,.api-grid{grid-template-columns:1fr}
  .code-win{transform:none}
  .steps-row{grid-template-columns:1fr}
  .step-arrow{transform:rotate(90deg);padding:2px 0}
  .stats-band{grid-template-columns:repeat(2,1fr);gap:10px;padding-top:40px}
  .sec{padding-top:52px;padding-bottom:4px}
  .sec-head.row{flex-direction:column;align-items:flex-start;gap:14px}
  .free-teaser{flex-direction:column;align-items:flex-start;padding:36px 28px}
  .ft-cta{align-items:flex-start}
  .routes-row{grid-template-columns:repeat(2,1fr)}
  .edu-box{flex-wrap:wrap}
  .edu-box .btn{margin-left:0;width:100%}
  .sched-item{flex-wrap:wrap}
  .sched-item .quota{width:100%}
  #toasts{top:auto;bottom:18px;right:12px;left:12px}
  .toast{min-width:0}
}
@media(max-width:640px){
  .wrap{padding:0 16px}
  body{font-size:14.5px}
  .brand-word{font-size:17px}
  .brand-word em{display:none}
  .wallet-chip i{display:none}
  .wallet-chip span{font-size:12px}
  .jobs-btn span{display:none}
  .hero-in{padding-top:88px}
  .hero h1{font-size:clamp(30px,9vw,44px);letter-spacing:-.5px}
  .hero-sub{font-size:14.5px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-mini{display:grid;grid-template-columns:repeat(2,auto);gap:12px 22px;justify-content:start}
  .hero-mini i{display:none}
  .term-body{height:230px;font-size:11px;line-height:1.95}
  .stats-band{grid-template-columns:repeat(2,1fr)}
  .stat{padding:16px}
  .stat-v{font-size:24px}
  .sec{padding-top:44px;padding-bottom:2px}
  .sec-head h2{font-size:clamp(22px,6.5vw,30px)}
  .routes-row{grid-template-columns:1fr}
  .route-card p{min-height:0}
  .step{padding:20px}
  .api-grid{gap:28px}
  .code-body{font-size:11.6px;padding:14px}
  .free-hero{padding:36px 22px}
  .free-hero-cta{flex-direction:column;align-items:stretch}
  .cta-final{padding:72px 0 56px}
  .preset-grid{grid-template-columns:1fr}
  .chip-row{gap:7px}
  .chip{padding:8px 12px;font-size:12.5px}
  .chip-seg{width:100%;justify-content:space-between}
  .profile-chips{gap:7px}
  .pf-chip{font-size:11px;padding:6px 10px}
  .bk-grid,#featuredGrid,#freeSimGrid{grid-template-columns:1fr}
  .bk-metrics{gap:6px}
  .bk-metrics b{font-size:14px}
  .alt-row{flex-wrap:wrap}
  .alt-row .alt-scores{width:100%;justify-content:flex-start;margin-left:38px}
  .submit-bar{flex-direction:column;align-items:stretch}
  .submit-bar .btn{width:100%}
  .ex-hero{flex-direction:row;flex-wrap:wrap}
  .job-kv{grid-template-columns:repeat(2,1fr)}
  .bm-specs{grid-template-columns:repeat(2,1fr)}
  .bm-actions{flex-wrap:wrap}
  .bm-actions .btn{flex:1;justify-content:center}
  .bm-actions .bm-price{width:100%;text-align:center;margin:0}
  #backendModal{padding:20px 16px;border-radius:16px}
  .ft-in{gap:28px;padding-top:40px}
  .ft-cols{gap:36px}
  .ft-bottom{flex-direction:column;gap:6px}
  .kbd-hint{display:none}
  .drawer .dr-body{padding:14px}
}
@media(max-width:420px){
  .cand-grid{grid-template-columns:1fr}
  .cand.winner{transform:none}
}
@supports(height:100svh){
  .hero{min-height:calc(100svh - 68px)}
}
@media(pointer:coarse){
  input[type=range]::-webkit-slider-thumb{width:22px;height:22px}
  .chip,.btn,.preset,.m-link{cursor:pointer}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}