/* Tradelity AI - design system. Dark brown→navy ground, orange brand, pill/rounded cards. Semantic long/short/flat kept. */
:root{
  --bg:#0b0f1a; --bg2:#0e1426; --panel:#12172a; --panel2:#151a2d; --raised:#262c42; --line:#ffffff17; --line-soft:#ffffff0d;
  --text:#eceef5; --muted:#9aa0b4; --faint:#6c6b7c;
  --amber:#7c5cf0; --amber-dim:#7c5cf026; --purple:#38bdf8;
  --long:#4fd1a1; --short:#ff6b6b; --flat:#a68df0;
  --long-dim:#4fd1a124; --short-dim:#ff6b6b24; --flat-dim:#a68df024;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:20px; --R:28px; --pill:999px; --glow:0 10px 36px #7c5cf02e;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;color:var(--text);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;
  background:linear-gradient(180deg,var(--bg) 0%,#0f1424 40%,var(--bg2) 100%) fixed}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.long{color:var(--long)} .short{color:var(--short)} .flat{color:var(--flat)} .amber{color:var(--amber)}
.sr{position:absolute;left:-9999px}

.mode-banner{position:sticky;top:0;z-index:50;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 18px;font-size:12.5px;background:#261f43f2;color:#e2dafa;border-bottom:1px solid #7c5cf080;backdrop-filter:blur(12px)}
.mode-banner b{font-weight:600}
.mode-banner a{flex:none;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mode-banner.live{background:var(--long-dim);color:var(--long);border-color:#4fd1a140}
.mode-banner.live a{color:#d9fff0}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--pill);border:1px solid var(--line);background:#ffffff12;cursor:pointer;font-weight:500;transition:background .15s,border-color .15s}
.btn:hover{background:#ffffff1f}
.btn.primary{background:var(--amber);border-color:var(--amber);color:#ffffff;font-weight:600;box-shadow:var(--glow)}
.btn.primary:hover{background:#9b82f5}
.btn.small{padding:6px 14px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.chip{display:inline-block;padding:3px 11px;border-radius:var(--pill);font-size:11.5px;font-weight:500;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.long{background:var(--long-dim);border-color:#4fd1a14d}
.chip.short{background:var(--short-dim);border-color:#ff6b6b4d}
.chip.flat{background:var(--flat-dim);border-color:#a68df04d}
.chip.amber{background:var(--amber-dim);border-color:#7c5cf04d;color:#c4b5fd}

.panel{background:linear-gradient(160deg,var(--panel) 0%,var(--panel2) 100%);border:1px solid var(--line-soft);border-radius:var(--R);box-shadow:0 18px 44px #00000040}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px 0}
.panel-h h3{margin:0;font-size:14px;font-weight:500;color:#d3d7e6}
.panel-b{padding:16px 22px 22px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1fr) 340px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{padding:14px 18px;background:var(--raised);border-radius:var(--r)}
.kpi .k{font-size:12px;color:var(--muted)} .kpi .v{font:500 22px/1.3 var(--mono);margin-top:2px}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-weight:500;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12px}
td{padding:11px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
tr:last-child td{border-bottom:0}
tr.click{cursor:pointer} tr.click:hover td{background:#ffffff0a}
td.r,th.r{text-align:right}

.ladder{display:grid;gap:8px}
.ladder-axis{display:grid;grid-template-columns:64px 1fr 92px;font-size:11px;color:var(--faint)}
.ladder-axis span:nth-child(2){display:flex;justify-content:space-between}
.lrow{display:grid;grid-template-columns:64px 1fr 92px;align-items:center}
.lname{font:500 12.5px var(--mono)}
.ltrack{position:relative;height:20px}
.ltrack::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line)}
.ltrack::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-soft)}
.lbar{position:absolute;top:3px;bottom:3px;border-radius:var(--pill);z-index:1;transform-origin:left center}
.lbar.long{left:50%;background:linear-gradient(90deg,#3aa882,var(--long))} .lbar.short{right:50%;background:linear-gradient(270deg,#e2563f,var(--short))}
.lbar.flat{left:calc(50% - 6px);width:12px;background:var(--flat);border-radius:50%;top:4px;bottom:4px}
.lval{font:500 12.5px var(--mono);text-align:right}
.agree{margin-top:12px;display:flex;align-items:center;gap:12px}
.seg{display:flex;gap:3px;flex:1}
.seg i{height:10px;flex:1;background:#ffffff14;border-radius:var(--pill)}
.seg i.on{background:var(--amber)}
.agree .big{font:500 18px var(--mono)}

.score{position:relative;height:10px;background:#ffffff14;border-radius:var(--pill);margin:12px 0 5px}
.score i{display:block;height:100%;border-radius:var(--pill);background:linear-gradient(90deg,var(--purple),var(--amber))}
.score s{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);border-radius:2px}
.score-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;font-family:var(--mono)}
.list{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.list li{padding-left:18px;position:relative}
.list.ok li::before,.list.warn li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%}
.list.ok li::before{background:var(--long)} .list.warn li::before{background:var(--short)}
.bar{height:8px;background:#ffffff14;border-radius:var(--pill);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--amber));border-radius:var(--pill)}
.empty{padding:30px 16px;text-align:center;color:var(--muted)}
.note{font-size:12.5px;color:var(--muted)}
.disc{font-size:12px;color:var(--faint);padding:14px 0}

.chart svg{display:block;width:100%;height:auto}
.chart text{font:10px var(--mono);fill:var(--faint)}
.seg-tabs{display:inline-flex;gap:3px;padding:4px;background:#ffffff0f;border-radius:var(--pill)}
.seg-tabs button{background:none;border:0;border-radius:var(--pill);padding:6px 14px;cursor:pointer;font-size:12.5px;color:var(--muted)}
.seg-tabs button.on{background:var(--amber);color:#ffffff;font-weight:600}
select,input[type=text],input[type=password],input[type=number]{background:#ffffff0f;border:1px solid var(--line);border-radius:var(--pill);padding:8px 16px}
::placeholder{color:var(--faint)}

/* terminal shell */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;padding:18px;min-height:calc(100vh - 34px)}
.side{background:linear-gradient(180deg,#1a2038,#141a2e);border:1px solid var(--line-soft);border-radius:36px;padding:24px 14px;position:sticky;top:18px;align-self:start;height:calc(100vh - 70px);overflow:auto}
.brand{display:block;padding:2px 10px 20px;font:600 15px/1.15 var(--sans);letter-spacing:.02em}
.brand span{display:block;color:var(--amber)} .brand small{display:block;margin-top:6px;font:400 11.5px var(--sans);color:var(--muted)}
.nav a{display:block;padding:10px 16px;border-radius:var(--pill);color:var(--muted);font-size:13.5px;margin-bottom:3px;transition:.15s}
.nav a:hover{background:#ffffff12;color:var(--text)}
.nav a.on{background:var(--amber);color:#ffffff;font-weight:600;box-shadow:var(--glow)}
.nav hr{border:0;border-top:1px solid var(--line-soft);margin:10px 4px}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px 12px 26px;border-radius:var(--pill);background:#ffffff0d;border:1px solid var(--line-soft);flex-wrap:wrap;margin-bottom:16px}
.top h1{margin:0;font-size:17px;font-weight:500}
.main{display:grid;gap:16px;align-content:start;padding-bottom:30px}
.drawer{position:fixed;inset:0 0 0 auto;width:min(720px,100%);background:linear-gradient(180deg,#0e1220,var(--bg2));border-left:1px solid var(--line);border-radius:var(--R) 0 0 var(--R);z-index:30;overflow:auto;padding:20px;box-shadow:-20px 0 50px #000a}
.scrim{position:fixed;inset:0;background:#0008;backdrop-filter:blur(4px);z-index:29}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:40;background:#000a;backdrop-filter:blur(6px);padding:14px}
.modal>.panel{width:min(520px,100%);max-height:92vh;overflow:auto}

.demo-tag{display:block;text-align:center;padding:9px;background:var(--amber-dim);color:#c4b5fd;font-size:12.5px;font-weight:500;border-bottom:1px solid #7c5cf044}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.opt{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--raised);cursor:pointer;text-align:left}
.opt:hover{border-color:var(--faint)} .opt.on{border-color:var(--amber);background:var(--amber-dim)}
.opt b{display:block;font-weight:600} .opt span{font-size:12px;color:var(--muted)}
.spin{width:24px;height:24px;border:3px solid #ffffff1f;border-top-color:var(--amber);border-radius:50%;animation:sp .8s linear infinite;margin:20px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.timer{font:500 28px var(--mono);text-align:center;margin:8px 0}
.addr{word-break:break-all;font:12.5px var(--mono);background:var(--raised);border:1px dashed var(--line);padding:12px;border-radius:var(--r)}

.pipe{display:grid;gap:0}
.pstep{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 0;position:relative}
.pstep::before{content:"";position:absolute;left:21px;top:46px;bottom:-14px;width:1px;background:var(--line)}
.pstep:last-child::before{display:none}
.pn{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font:500 14px var(--mono);background:var(--raised);color:var(--amber)}
.pstep h4{margin:2px 0 4px;font-size:15px;font-weight:500} .pstep p{margin:0;color:var(--muted);max-width:68ch}
.pulse .pn{animation:pn 4.5s ease-in-out infinite}
@keyframes pn{0%,100%{border-color:var(--line)}50%{border-color:var(--amber);box-shadow:var(--glow)}}

/* landing */
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.lnav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 12px 12px 26px;margin-top:14px;border-radius:var(--pill);background:#ffffff0d;border:1px solid var(--line-soft);backdrop-filter:blur(14px);position:sticky;top:12px;z-index:20}
.lnav .brand{padding:0}
.lnav nav{display:flex;gap:4px;color:var(--muted);font-size:13.5px}
.lnav nav a{padding:7px 13px;border-radius:var(--pill)} .lnav nav a:hover{color:var(--text);background:#ffffff12}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding:64px 0 72px}
.hero h1{font:600 clamp(40px,6vw,68px)/1.04 var(--sans);letter-spacing:-.025em;margin:0 0 18px}
.hero p.lead{font-size:18px;color:var(--muted);max-width:44ch;margin:0 0 28px}
.hero-card{padding:0;overflow:hidden;box-shadow:var(--glow)}
.hero-card .tabs{display:flex;gap:4px;padding:6px;margin:14px 16px 0;background:#ffffff0d;border-radius:var(--pill)}
.hero-card .tabs button{flex:1;padding:9px;background:none;border:0;border-radius:var(--pill);color:var(--muted);cursor:pointer}
.hero-card .tabs button.on{color:#ffffff;background:var(--amber);font-weight:600}
.demo-callout{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:18px 0 22px;padding:22px 24px;border:1px solid #9b82f54d;border-radius:18px;background:linear-gradient(115deg,#7c5cf018,#f5b94c0b 80%),#111728;box-shadow:0 14px 40px #0002}
.demo-callout-copy{max-width:74ch}
.demo-callout-label{display:inline-block;margin-bottom:7px;color:#c1b2ff;font-size:10px;font-weight:700;letter-spacing:.12em}
.demo-callout h2{margin:0 0 8px;font-size:19px;letter-spacing:-.02em}
.demo-callout p{margin:6px 0;color:var(--muted);font-size:13px;line-height:1.55}
.demo-callout .btn{flex:none}
.demo-offer-modal{z-index:60}
.demo-offer-modal>.panel{position:relative;border-color:#9b82f555;background:linear-gradient(155deg,#171d32,#101626 72%);box-shadow:0 24px 90px #000b}
.demo-offer-modal .panel-b{padding:30px}
.demo-offer-modal h2{max-width:22ch;margin:4px 0 12px;font-size:25px;line-height:1.18}
.demo-offer-modal p{color:var(--muted);font-size:14px;line-height:1.6}
.demo-offer-modal p b{color:var(--text)}
.demo-offer-icon{position:absolute;left:30px;top:20px;color:var(--amber);font-size:20px}
.demo-offer-close{position:absolute;right:16px;top:16px;z-index:1;min-width:34px;font-size:18px}
.demo-offer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.hero-explanation{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line-soft);border-left:3px solid var(--amber);border-radius:10px;color:var(--text);line-height:1.55}
.hero-votes{display:grid;gap:6px;margin-bottom:14px}
.hero-vote{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:center;padding:9px 11px;background:#ffffff06;border:1px solid var(--line-soft);border-radius:9px;font-size:13px}
.hero-reasons{margin:14px 0 0;padding:0 0 0 20px;color:var(--muted);font-size:12.5px;line-height:1.65}
@media(max-width:560px){.hero-vote{grid-template-columns:1fr auto}.hero-vote .num{grid-column:1/-1}}
section.sec{padding:56px 0;border-top:1px solid var(--line-soft)}
section.sec h2{font:600 30px/1.15 var(--sans);margin:0 0 10px;letter-spacing:-.015em}
section.sec .sub{color:var(--muted);max-width:60ch;margin:0 0 26px}
.quote{font:400 24px/1.35 var(--sans);max-width:30ch;margin:0}
details{background:#ffffff08;border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 22px;margin-bottom:10px} summary{cursor:pointer;font-weight:500} details p{color:var(--muted);margin:8px 0 0;max-width:70ch}
.price{padding:22px;display:grid;gap:8px}.price .p{font:500 28px var(--mono)}
.foot{border-top:1px solid var(--line-soft);padding:30px 0 50px;color:var(--faint);font-size:12.5px}

/* Account and registration */
.account-layout{width:min(960px,100%);margin:clamp(12px,4vh,42px) auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(250px,.72fr);align-items:stretch;overflow:hidden;border:1px solid #ffffff18;border-radius:28px;background:#101629;box-shadow:0 28px 90px #0008}
.account-layout-authenticated{width:min(520px,100%);grid-template-columns:minmax(0,1fr);overflow:hidden;border-radius:24px}
.account-card{padding:clamp(24px,4vw,42px);background:linear-gradient(155deg,#171d32,#111728 65%,#12182b);}
.account-heading{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.account-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#9a7aff,#6545da);color:#fff;font-size:23px;font-weight:700;box-shadow:0 8px 24px #7c5cf04a}
.account-eyebrow{font-size:10px;letter-spacing:.16em;font-weight:600;color:#b6a5ff}
.account-heading h2{font-size:25px;line-height:1.2;margin:3px 0 0;letter-spacing:-.02em}
.account-intro{margin:0 0 18px;color:var(--muted);font-size:14px}
.account-status{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:20px;border:1px solid #ffffff12;border-radius:13px;background:#ffffff08;color:#c2c7d7;font-size:12.5px;line-height:1.45}
.account-status.active{border-color:#4fd1a14a;background:#4fd1a10d;color:#aaf0d4}
.account-status-dot{width:8px;height:8px;flex:none;margin-top:5px;border-radius:50%;background:#a68df0;box-shadow:0 0 12px #a68df080}
.account-status.active .account-status-dot{background:var(--long);box-shadow:0 0 12px #4fd1a180}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:22px;border:1px solid #ffffff0e;border-radius:13px;background:#090d18}
.account-tabs button{min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;font-weight:500;transition:background .15s,color .15s}
.account-tabs button:hover{color:var(--text)}
.account-tabs button.on{background:#282143;color:#e4dcff;box-shadow:inset 0 0 0 1px #9b82f544}
.account-form{display:grid;gap:15px}
.account-field{display:grid;gap:7px;color:#dce0eb;font-size:12.5px;font-weight:500}
.account-field[hidden]{display:none}
.account-field input{width:100%;height:46px;padding:0 14px;border:1px solid #ffffff20;border-radius:11px;background:#0b1020;color:var(--text);transition:border-color .15s,box-shadow .15s}
.account-field input::placeholder{color:#777f96}
.account-field input:focus{border-color:#9b82f5;box-shadow:0 0 0 3px #7c5cf027;outline:0}
.account-hint{margin-top:-7px;color:var(--faint);font-size:11.5px;line-height:1.45}
.account-submit{width:100%;min-height:46px;justify-content:center;border-radius:11px;margin-top:2px}
.account-submit:disabled{cursor:wait;opacity:.7}
.account-message{min-height:0;font-size:12.5px;line-height:1.45}
.account-message:empty{display:none}
.account-message.success{padding:10px 12px;border-radius:10px;background:#4fd1a112;color:#8ce5c0}
.account-message.error{padding:10px 12px;border-radius:10px;background:#ff6b6b12;color:#ff9b9b}
.account-foot{display:flex;gap:9px;align-items:flex-start;margin-top:20px;padding-top:16px;border-top:1px solid #ffffff10;color:var(--faint);font-size:11px;line-height:1.5}
.account-foot-icon{width:16px;height:16px;flex:none;display:grid;place-items:center;border:1px solid #9b82f566;border-radius:50%;color:#b6a5ff;font-size:10px;font-weight:600}
.account-logout{margin-top:14px;padding:7px 12px;font-size:12px}
.account-aside{position:relative;overflow:hidden;padding:clamp(28px,4vw,42px);background:radial-gradient(500px 350px at 15% 10%,#7c5cf02c,transparent 65%),linear-gradient(150deg,#1b2038,#171b2d);border-left:1px solid #ffffff12}
.account-aside::after{content:"";position:absolute;width:210px;height:210px;right:-100px;top:-105px;border:1px solid #ad98ff20;border-radius:50%;box-shadow:0 0 0 28px #ad98ff08,0 0 0 56px #ad98ff05;pointer-events:none}
.account-aside-chip{display:inline-block;padding:6px 10px;border:1px solid #a68df044;border-radius:999px;background:#a68df012;color:#c5b7ff;font-size:9.5px;font-weight:600;letter-spacing:.11em}
.account-aside h3{max-width:15ch;margin:22px 0 10px;font-size:25px;line-height:1.2;letter-spacing:-.02em}
.account-aside>p{margin:0;color:#aab0c3;font-size:13px;line-height:1.6}
.account-aside ul{display:grid;gap:12px;margin:22px 0;padding:0;list-style:none;color:#e0e2ec;font-size:12.5px}
.account-aside li{position:relative;padding-left:23px}
.account-aside li::before{content:"✓";position:absolute;left:0;top:0;color:#70d8b2;font-weight:700}
.account-aside .account-aside-note{padding-top:17px;border-top:1px solid #ffffff12;color:#9098ae;font-size:11.5px}
.referral-card{margin-top:22px;padding:18px;border:1px solid #ffffff14;border-radius:14px;background:#ffffff05}
.referral-card h3{margin:12px 0 6px;font-size:18px;letter-spacing:-.02em}
.referral-card>p{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.5}
.referral-share{display:flex;gap:8px;margin-top:7px}
.referral-share input{min-width:0;flex:1;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#090d18;color:var(--muted);font:11px var(--mono)}
.referral-stats{display:flex;justify-content:space-between;gap:12px;margin:12px 0 0!important;color:var(--muted)}
.referral-stats b{color:var(--text)}
.account-details{padding:14px 16px;margin:18px 0 0;border:1px solid var(--line-soft);border-radius:10px;background:#ffffff04}
.account-details h3{margin:0 0 8px;font-size:14px}
.account-details p{margin:5px 0;color:var(--muted);font-size:12px}
.referral-code{display:inline-flex;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:7px;background:#090d18;color:var(--amber);font-size:16px;letter-spacing:.08em}
.referral-create{display:flex;gap:8px}
.referral-create input{min-width:0;flex:1;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:#090d18;color:var(--text);font:12px var(--mono);text-transform:uppercase}
.referral-balance{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding:12px;border:1px solid var(--line-soft);border-radius:8px;background:#ffffff04}
.referral-balance span{color:var(--muted);font-size:12px}.referral-balance b{font:600 15px var(--mono);color:var(--amber)}
.referral-card .referral-disclaimer{margin:7px 0 18px;color:var(--faint);font-size:11px}
.checkout-proof{display:grid;gap:12px;padding:16px;border:1px solid var(--line-soft);border-radius:12px;background:#ffffff04}
.checkout-proof input{width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#090d18;color:var(--text)}
.checkout-proof input:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-dim)}
.checkout-proof[hidden]{display:none}
.checkout-actions{display:flex;gap:8px;flex-wrap:wrap}
.referral-card h4{margin:18px 0 6px;font-size:13px}
.referral-tiers{display:grid;gap:5px;margin:10px 0}
.referral-tier{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:7px;background:#ffffff03;color:var(--muted);font-size:11.5px}
.referral-tier b{min-width:34px;color:var(--text);font:600 13px var(--mono)}
.referral-tier.current{border-color:var(--amber);background:var(--amber-dim);color:var(--text)}
.referral-tier.reached b{color:var(--long)}

@media (max-width:980px){
  .mode-banner{align-items:flex-start;flex-direction:column;gap:5px;padding:10px 14px;font-size:12px}
  .account-layout{max-width:560px;grid-template-columns:1fr}
  .account-aside{border-left:0;border-top:1px solid #ffffff12;padding:25px 30px}
  .account-aside h3{margin-top:15px}
  .hero{grid-template-columns:1fr;gap:34px;padding-top:30px}
  .g-main,.g3,.g4,.g2{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr;padding:12px}
  .side{position:static;height:auto;border-radius:var(--R);padding:12px}
  .nav{display:flex;overflow-x:auto;gap:2px} .nav a{white-space:nowrap} .nav hr,.brand small{display:none} .brand{padding-bottom:8px}
  .lnav nav{display:none}
}
@media(max-width:700px){.demo-callout{align-items:stretch;flex-direction:column;padding:18px}.demo-callout .btn{width:100%;justify-content:center}.demo-offer-modal .panel-b{padding:26px 20px}.demo-offer-modal h2{font-size:22px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}
body {
  margin: 0;
  background-color: #0b0f19; /* Цвет фона страницы */
  overflow-x: hidden;
}

#net-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* Помещаем позади всего контента */
  pointer-events: none; /* Клики проходят сквозь холст */
}

#hero .content {
    position: relative;
    z-index: 2;
}
/* mini app */
body.mini{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.mini .tabbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:6px;background:#12172ae6;backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:var(--pill);z-index:20}
.mini .tabbar a{padding:9px 2px;text-align:center;font-size:10.5px;color:var(--muted);border-radius:var(--pill)}
.mini .tabbar a.on{background:var(--amber);color:#ffffff;font-weight:600}
.mini .scr{padding:14px;display:grid;gap:14px;align-content:start}
.mini .kpis{grid-template-columns:repeat(2,1fr)}
.mini .lrow,.mini .ladder-axis{grid-template-columns:56px 1fr 84px}
.card-sig{display:grid;gap:8px;padding:16px;cursor:pointer}
.card-sig .hd{display:flex;justify-content:space-between;align-items:center}

/* first-time offer */
.promo{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:radial-gradient(700px 420px at 50% 30%,#7c5cf033,transparent 70%),linear-gradient(180deg,#0b0f1af2,#0e1426f7);backdrop-filter:blur(10px)}
.promo[hidden],.promo-pill[hidden]{display:none}
.promo-in{position:relative;width:min(460px,100%);text-align:center;display:grid;gap:14px;justify-items:center;padding:36px 28px 26px;border-radius:var(--R);background:linear-gradient(160deg,#1a2038,#151a2d);border:1px solid #7c5cf055;box-shadow:var(--glow),0 30px 80px #000a}
.promo-in h2{margin:0;font:600 30px/1.1 var(--sans);letter-spacing:-.02em}
.promo-sub{margin:0;color:var(--muted);max-width:36ch}
.promo-price{display:flex;align-items:baseline;gap:14px}.promo-price s{font:400 24px var(--mono);color:var(--faint)}.promo-price b{font:600 64px/1 var(--mono);color:var(--amber)}
.promo-t{display:grid;gap:2px;padding:10px 22px;border-radius:var(--pill);background:#ffffff0f}.promo-t small{color:var(--muted);font-size:11.5px}.promo-t span{font-size:24px;font-weight:500}
.promo-go{width:100%;justify-content:center;padding:15px 20px;font-size:16px}
.promo-fine{margin:0;font-size:11.5px;color:var(--faint);max-width:40ch}
.promo-x{position:absolute;top:14px;right:14px;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--line);background:#ffffff12;font-size:22px;line-height:1;cursor:pointer}
.promo-pill{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;gap:8px;align-items:center;padding:10px 18px;border-radius:var(--pill);border:0;cursor:pointer;background:var(--amber);color:#ffffff;box-shadow:var(--glow)}
.promo-pill s{opacity:.6}.mini .promo-pill{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* free tier: direction is blurred (real gating must be server-side) */
body.free .ladder,body.free .chip.long,body.free .chip.short,body.free .chip.flat{filter:blur(7px);cursor:pointer;user-select:none}
.promo-x{width:auto;min-width:38px;padding:0 14px;border-radius:var(--pill);font-size:13px}
.promo-x:disabled{cursor:not-allowed;opacity:.7;font-size:12px}
.promo-in h2{font-size:32px}
.promo-locks{list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left}
.promo-locks li{padding-left:26px;position:relative;color:#d6d9e6}
.promo-locks li::before{content:"";position:absolute;left:2px;top:.25em;width:11px;height:8px;border:2px solid var(--amber);border-radius:3px}
.promo-in .chip.short{background:var(--short-dim);color:var(--short)}

/* Linear-inspired public landing page: quiet dark canvas, editorial type and restrained violet glow. */
.landing-page{--bg:#08090c;--bg2:#08090c;--panel:#111216;--panel2:#111216;--raised:#17181e;--line:#ffffff18;--line-soft:#ffffff0d;
  --text:#f4f3f8;--muted:#a2a0ad;--faint:#6e6c78;--amber:#a78bfa;--amber-dim:#a78bfa1c;--purple:#d0c4ff;--glow:0 12px 60px #8d6cf01c;--r:12px;--R:16px}
.landing-page{background:radial-gradient(ellipse 72% 42% at 50% 0%,#33275842,transparent 72%),#08090c fixed}
.landing-page #ambient-swirl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.78}
.landing-page #hero{position:relative;z-index:1;min-height:auto;background:transparent!important}
.landing-page .wrap{max-width:1280px}
.landing-page .wrap{position:relative;z-index:2}
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:70;width:50px;height:50px;display:grid;place-items:center;padding:0;border:1px solid #c4b5fd66;border-radius:15px;background:#17151feF;color:#d8ccff;box-shadow:0 10px 32px #0007,0 0 24px #a78bfa22;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px) scale(.94);transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background .2s ease,border-color .2s ease}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.back-to-top:hover{background:#282333;border-color:#c4b5fd;transform:translateY(-3px) scale(1.03)}
.back-to-top:active{transform:translateY(1px) scale(.94)}
.back-to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.back-to-top{right:16px;bottom:16px;width:46px;height:46px;border-radius:14px}}
.landing-page .lnav{margin-top:16px;padding:10px 12px 10px 22px;border-radius:12px;background:#0d0e12d9;border-color:#ffffff13;box-shadow:0 8px 32px #0005}
.landing-page .lnav .brand{font-size:16px}
.landing-page .lnav .brand span{display:inline!important;color:#c4b5fd}
.landing-page .lnav nav a{border-radius:8px}
.landing-page .hero{padding:30px 0 72px;gap:64px}
.landing-page .hero h1{max-width:13ch;font-size:clamp(46px,6.2vw,76px);letter-spacing:-.055em;line-height:1.01}
.landing-page .hero p.lead{max-width:43ch;font-size:17px;line-height:1.65}
.landing-page .hero-card{border-color:#ffffff19;background:linear-gradient(145deg,#15151b,#101115);box-shadow:0 24px 80px #0008,0 0 60px #9c7aff0c}
.landing-page .hero-card .tabs{border-radius:9px;background:#ffffff08}
.landing-page .hero-card .tabs button{border-radius:7px}
.landing-page .hero-card .tabs button.on{background:#292333;color:#e5dcff;box-shadow:inset 0 0 0 1px #a78bfa44}
.landing-page .btn{border-radius:9px;background:#ffffff08}
.landing-page .btn.primary{background:#c4b5fd;border-color:#c4b5fd;color:#17131f;box-shadow:0 8px 30px #a78bfa24}
.landing-page .btn.primary:hover{background:#d4c9ff}
.landing-page .landing-terminal-cta{min-height:52px;padding:0 25px;border-radius:10px;font-size:16px;font-weight:700;letter-spacing:-.01em;box-shadow:0 10px 34px #a78bfa38,0 0 0 1px #ffffff26 inset;transition:transform .18s,box-shadow .18s,background .18s}
.landing-page .landing-terminal-cta:hover{transform:translateY(-2px);box-shadow:0 15px 42px #a78bfa50,0 0 0 1px #ffffff38 inset}
.landing-page .landing-hero-actions{display:grid;justify-items:start;gap:13px;margin-top:26px}
.landing-page .hero .landing-hero-actions>.landing-terminal-cta{min-width:min(100%,360px);min-height:66px;justify-content:center;padding:0 34px;font-size:19px;border-radius:12px}
.landing-page .landing-secondary-actions{display:flex;gap:9px;flex-wrap:wrap}
.landing-page .lnav .landing-terminal-cta{min-height:42px;padding:0 18px;font-size:13px;white-space:nowrap}
.landing-page .landing-register-cta{min-height:52px;padding:0 22px;border-color:#ffffff29;background:#ffffff0b;color:var(--text);font-weight:600}
.landing-auth-modal{z-index:120}
.landing-auth-modal>.account-card{position:relative;width:min(540px,100%);max-height:92vh;overflow:auto;border:1px solid #ffffff20;border-radius:20px;padding:clamp(24px,5vw,38px);box-shadow:0 30px 100px #000b}
.landing-auth-close{position:absolute;right:18px;top:18px;z-index:1;font-size:20px;line-height:1}
.landing-auth-modal .account-heading{padding-right:30px}
.landing-auth-modal .account-tabs{margin-top:20px}
.landing-auth-modal .landing-auth-next{padding:14px;border:1px solid #4fd1a14a;border-radius:12px;background:#4fd1a10d;color:#aaf0d4;font-size:13px;line-height:1.5}
.landing-auth-modal .landing-auth-terminal{width:100%;justify-content:center;margin-top:12px}
.landing-auth-modal .account-foot{margin-bottom:0}
.landing-page .panel{border-color:#ffffff12;box-shadow:0 18px 54px #0005}
.landing-page .hero-explanation,.landing-page .hero-vote{border-radius:8px}
.landing-page section.sec{border-color:#ffffff12}
.landing-page .price{border-radius:12px}
/* OKX-inspired exchange palette. Existing terminal structure and component placement stay intact. */
.terminal-page{--bg:#0b0e11;--bg2:#0b0e11;--panel:#12161a;--panel2:#12161a;--raised:#1b2025;--line:#2b3138;--line-soft:#22282e;
  --text:#eaecef;--muted:#929aa3;--faint:#616a73;--amber:#c7f36b;--amber-dim:#c7f36b18;--purple:#c7f36b;--long:#18a979;--short:#ea4d5b;--flat:#a0a7ae;
  --long-dim:#18a9791b;--short-dim:#ea4d5b1b;--flat-dim:#a0a7ae18;--glow:0 8px 28px #0005;--r:8px;--R:10px}
.terminal-page{background:#0b0e11}
.terminal-page .side{background:#101418;border-color:#242a30;border-radius:10px}
.terminal-page .brand span{color:var(--amber)}
.terminal-page .nav a{border-radius:7px}
.terminal-page .nav a.on{background:#222a20;color:#d4f58a;box-shadow:inset 0 0 0 1px #c7f36b35}
.terminal-page .top{border-radius:8px;background:#111519;border-color:#242a30}
.terminal-page .panel{background:#121619;border-color:#252b31;border-radius:9px;box-shadow:none}
.terminal-page .panel-h h3{color:#dfe3e6}
.terminal-page .kpi{border:1px solid #252b31;border-radius:8px;background:#121619}
.terminal-page .btn{border-radius:7px;background:#171c20;border-color:#30373e}
.terminal-page .btn:hover{background:#20262b}
.terminal-page .btn.primary{background:#c7f36b;border-color:#c7f36b;color:#151a13;box-shadow:none}
.terminal-page .btn.primary:hover{background:#d8fa8e}
.terminal-page .chip{border-radius:5px}
.terminal-page .seg-tabs{border-radius:7px;background:#191e22}
.terminal-page .seg-tabs button{border-radius:5px}
.terminal-page .seg-tabs button.on{background:#2b3522;color:#d4f58a}
.terminal-page .score i,.terminal-page .bar i{background:linear-gradient(90deg,#18a979,#c7f36b)}
.terminal-page .score{border-radius:2px}
.terminal-page .drawer{background:#0e1215;border-radius:0;border-color:#252b31}
.terminal-page .modal>.panel{border-radius:10px}
.terminal-page .account-layout{border-radius:12px;background:#121619;border-color:#252b31;box-shadow:0 26px 80px #0009}
.terminal-page .account-card{background:#121619}
.terminal-page .account-aside{background:linear-gradient(145deg,#171e19,#121719);border-color:#252b31}
.terminal-page .account-mark{background:#c7f36b;color:#151a13;box-shadow:none;border-radius:10px}
.terminal-page .account-tabs button.on{background:#252d20;color:#d4f58a;box-shadow:inset 0 0 0 1px #c7f36b40}
.terminal-page .account-field input{background:#0b0e11;border-radius:7px}
.terminal-page .account-field input:focus{border-color:#c7f36b;box-shadow:0 0 0 3px #c7f36b20}
.terminal-page .referral-card{border-radius:8px;background:#0e1215}
.terminal-page .referral-share input{background:#0b0e11;border-radius:6px}
.terminal-page .referral-code,.terminal-page .referral-create input{background:#0b0e11;border-radius:6px}
@media(min-width:981px){.landing-page .hero{padding-top:24px}}
@media(max-width:980px){.landing-page .hero{gap:34px;padding:30px 0 48px}}
@media(max-width:560px){.landing-page .hero .landing-hero-actions>.landing-terminal-cta{width:100%;min-height:62px}.landing-page .landing-secondary-actions{width:100%}.landing-page .landing-secondary-actions .btn{flex:1;justify-content:center}}

/* Smooth in-page navigation and tactile feedback for interactive controls. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
section[id]{scroll-margin-top:88px}
.btn,button:not(:disabled){transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;z-index:0;inset:-1px;background:linear-gradient(110deg,transparent 25%,#ffffff22 48%,transparent 70%);transform:translateX(-130%);transition:transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06)}
.btn:hover:not(:disabled)::after{transform:translateX(130%)}
.btn:active:not(:disabled),button:not(:disabled):active{transform:translateY(1px) scale(.97);filter:brightness(.94)}
.btn:focus-visible,button:focus-visible{outline-offset:3px}
.lnav nav a{transition:color .18s ease,background-color .18s ease,transform .18s ease}
.lnav nav a:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.landing-auth-modal .landing-auth-close,.demo-offer-modal .demo-offer-close{position:absolute;z-index:5;top:14px;right:14px;width:38px;height:38px;min-width:38px;padding:0;display:grid;place-items:center;border-radius:11px;font-size:21px;line-height:1;overflow:hidden}
.landing-auth-modal .landing-auth-close{top:16px;right:16px}
.demo-offer-modal .demo-offer-close{top:14px;right:14px}