:root{--bg:#020813;--panel:rgba(8,22,39,.88);--line:#17395b;--cyan:#58d8ff;--blue:#789cff;--gold:#fac12b;--text:#eaf7ff;--muted:#7f9bb0;--ok:#3ff2b1;--rail:220px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow-x:hidden}
.grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(60,150,210,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(60,150,210,.055) 1px,transparent 1px);background-size:38px 38px;pointer-events:none}
.glow{position:fixed;inset:-30%;background:radial-gradient(circle at 65% 20%,rgba(44,139,230,.15),transparent 28%),radial-gradient(circle at 20% 80%,rgba(88,216,255,.08),transparent 26%);pointer-events:none}
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh;position:relative;z-index:1}
.rail{position:sticky;top:0;height:100vh;padding:20px 14px;border-right:1px solid #12304c;background:rgba(2,8,19,.94);display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none;padding:8px 10px 22px;border-bottom:1px solid #112c46}
.brand img{width:86px;height:30px;object-fit:contain}.brand span{font-size:10px;letter-spacing:.16em;color:#75cfff;line-height:1.4}
.rail nav{display:flex;flex-direction:column;gap:5px;margin-top:18px}
.nav{appearance:none;border:1px solid transparent;background:transparent;color:#86a7bb;text-align:left;padding:11px 12px;border-radius:8px;font-size:13px;cursor:pointer;transition:.18s}
.nav span{margin-left:9px}
.nav:hover,.nav.active{color:white;border-color:#1f547c;background:linear-gradient(90deg,rgba(39,132,197,.22),rgba(19,54,84,.08));box-shadow:inset 3px 0 0 var(--cyan)}
.rail-foot{margin-top:auto;border-top:1px solid #112c46;padding:16px 10px 0;font-size:10px;letter-spacing:.14em;color:#6f94aa}
.rail-foot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);margin-right:8px}
.main{min-width:0;padding:0 30px 30px}
.topbar{height:92px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #10304b;position:sticky;top:0;background:rgba(2,8,19,.86);backdrop-filter:blur(16px);z-index:5}
.eyebrow,.kicker{font-size:10px;letter-spacing:.2em;color:#4fb7e8}.topbar h1{font-size:24px;margin:6px 0 0;font-weight:650}
.top-status{display:flex;gap:16px;align-items:center}
.chip{border:1px solid #1d4b6e;border-radius:999px;padding:8px 12px;font-size:11px;color:#9cc2d7;background:#061321}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);margin-right:7px}
.clock{font-variant-numeric:tabular-nums;color:#6bd9ff;letter-spacing:.1em}
.view{display:none;padding-top:28px}.view.active{display:block}
.panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(10,29,49,.9),rgba(4,14,27,.9));box-shadow:0 18px 60px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.02);border-radius:10px}
.hero{min-height:190px;padding:32px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}.hero h2{font-size:34px;margin:10px 0 12px}.hero p{color:#8eacbe;max-width:720px;line-height:1.7}
.hero-orbit{width:126px;height:126px;border:1px solid #2b82b2;border-radius:50%;display:grid;place-items:center;position:relative;color:var(--cyan);font-weight:800;letter-spacing:.15em;box-shadow:0 0 50px rgba(57,184,241,.12)}
.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border:1px dashed #245a79;border-radius:50%;inset:-16px}.hero-orbit:after{inset:18px;border-style:solid;border-color:#1a4663}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0}.metric{padding:18px}.metric>span{font-size:10px;letter-spacing:.18em;color:#6ebee6}.metric strong{display:block;font-size:28px;margin:10px 0 5px;color:white}.metric small{color:var(--muted)}.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}.block{padding:20px}.block>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:11px;letter-spacing:.16em;color:#76c6ed}
.ghost,.primary{border:1px solid #24678f;background:#081d2e;color:#9edfff;border-radius:7px;padding:9px 12px;cursor:pointer}.primary{background:linear-gradient(135deg,#1676a7,#174d87);color:white;border-color:#2a90c4}.primary:disabled{opacity:.45;cursor:not-allowed}
.device-cards{display:grid;gap:9px}.device-card{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 14px;border:1px solid #153d5c;background:#061522;border-radius:8px}.device-card b{font-size:13px}.device-card small{display:block;color:#718fa4;margin-top:4px}.status{font-size:10px;text-transform:uppercase;letter-spacing:.12em}.status.online{color:var(--ok)}.status.offline{color:#7790a0}
.flow,.order-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.flow b,.order-flow b{border:1px solid #1c567a;background:#071827;padding:9px 11px;border-radius:7px;font-size:12px}.flow i,.order-flow i{color:#387ea2;font-style:normal}.note{color:#7f9bb0;line-height:1.65;font-size:12px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.section-head h2{font-size:28px;margin:7px 0}.section-head p{margin:0;color:#7f9bb0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid #12334f;font-size:12px}th{color:#67bbe4;font-size:10px;letter-spacing:.14em}td{color:#cbe0ec}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.role{padding:22px}.role>b{font-size:10px;letter-spacing:.17em;color:var(--cyan)}.role strong{display:block;font-size:18px;margin:14px 0}.role p{color:#7e9aad;line-height:1.6}
.policy-grid,.api-box{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#173954;overflow:hidden}.policy-grid>div,.api-box>div{background:#061522;padding:22px}.policy-grid b,.api-box b{display:block;color:#72d6ff;font-size:11px;letter-spacing:.12em;margin-bottom:7px}.policy-grid span,.api-box span{color:#a9c2d1;font-size:13px}
.pairing{padding:36px;text-align:center}.pair-code{font-size:34px;letter-spacing:.18em;color:var(--gold);margin-bottom:20px}.pairing small{display:block;color:#7893a5;margin-top:16px}.order-flow{padding:22px;margin-top:14px}.empty{padding:38px;color:#7594a8;text-align:center}code{color:#74dcff}footer{padding:30px 0 5px;text-align:center;color:#42647a;font-size:10px;letter-spacing:.12em}@media(max-width:1050px){:root{--rail:74px}.brand{justify-content:center}.brand img{width:44px}.brand span,.nav span,.rail-foot span{display:none}.nav{text-align:center;font-size:18px}.main{padding:0 18px 24px}.metrics{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.cards-3{grid-template-columns:1fr}}
@media(max-width:700px){.shell{grid-template-columns:1fr}.rail{position:fixed;z-index:20;left:0;right:0;top:auto;bottom:0;width:100%;height:66px;display:block;padding:8px;background:#03101d;border-top:1px solid #16425f;border-right:0}.brand,.rail-foot{display:none}.rail nav{margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.nav{display:none;padding:10px 4px}.nav:nth-child(-n+5){display:block}.main{padding:0 14px 84px}.topbar{height:76px}.eyebrow{display:none}.topbar h1{font-size:19px}.chip{display:none}.hero{padding:22px;min-height:170px}.hero h2{font-size:26px}.hero-orbit{display:none}.metrics{grid-template-columns:1fr 1fr}.section-head{align-items:flex-start;gap:12px}.section-head p{font-size:12px}.policy-grid,.api-box{grid-template-columns:1fr}}