/* OneNess TOR — neon / holographic node console
   Layers: deep-space grid, aurora, scanlines, glass panels, 3D coin, holo rings. */

:root{
  --bg:#04050a; --bg-2:#070b16;
  --panel:rgba(11,18,34,.62); --panel-solid:#0b1222;
  --line:rgba(120,220,255,.16); --line-hot:rgba(34,245,255,.55);
  --ink:#e8f4ff; --ink-dim:#8ea6c4;
  --cyan:#22f5ff; --magenta:#ff3bd4; --violet:#7b5cff;
  --lime:#a6ff3d; --gold:#ffc857; --red:#ff5470;
  --radius:18px;
  --shadow:0 30px 80px -40px rgba(34,245,255,.55);
  --mono:ui-monospace,SFMono-Regular,"Cascadia Code","JetBrains Mono",Menlo,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,Inter,Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--cyan);text-decoration:none}
a:hover{text-shadow:0 0 12px rgba(34,245,255,.8)}
h1,h2,h3,h4{margin:0 0 .6rem;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(1.8rem,4vw,3.1rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.85rem)}
h3{font-size:1.12rem}
p{margin:.35rem 0 .9rem;color:var(--ink-dim);line-height:1.65}
code,pre,.mono{font-family:var(--mono);font-size:.86em}
small{color:var(--ink-dim)}

/* ---------------------------------------------------------------- background */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1200px 700px at 15% -10%,rgba(123,92,255,.20),transparent 60%),
  radial-gradient(900px 600px at 90% 0%,rgba(255,59,212,.14),transparent 55%),
  radial-gradient(1000px 800px at 50% 110%,rgba(34,245,255,.13),transparent 60%),
  linear-gradient(180deg,#04050a 0%,#060915 45%,#04050a 100%)}
.bg-grid{position:absolute;inset:-40% -20% -10%;
  background-image:
    linear-gradient(rgba(34,245,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,245,255,.12) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(62deg) translateZ(-120px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 72%);
  animation:gridDrift 24s linear infinite;opacity:.5}
@keyframes gridDrift{to{background-position:0 64px,64px 0}}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;mix-blend-mode:screen}
.a1{width:46vw;height:46vw;left:-10vw;top:-12vw;background:radial-gradient(circle,#22f5ff,transparent 65%);animation:float1 22s ease-in-out infinite}
.a2{width:40vw;height:40vw;right:-8vw;top:6vw;background:radial-gradient(circle,#ff3bd4,transparent 65%);animation:float2 26s ease-in-out infinite}
.a3{width:34vw;height:34vw;left:38vw;bottom:-14vw;background:radial-gradient(circle,#7b5cff,transparent 65%);animation:float1 30s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translate3d(4vw,3vw,0) scale(1.1)}}
@keyframes float2{50%{transform:translate3d(-5vw,4vw,0) scale(1.06)}}
.scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);
  animation:scan 9s linear infinite;opacity:.5}
@keyframes scan{to{transform:translateY(4px)}}
.holo-orbit{position:absolute;right:-12vw;top:18vh;width:52vw;height:52vw;pointer-events:none;opacity:.35}
.holo-orbit span{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(34,245,255,.5);
  box-shadow:0 0 60px rgba(34,245,255,.35),inset 0 0 60px rgba(255,59,212,.18);
  transform:rotateX(72deg) rotateZ(0deg);animation:spin 18s linear infinite}
.holo-orbit span:nth-child(2){inset:8%;border-color:rgba(255,59,212,.5);animation-duration:26s;animation-direction:reverse}
.holo-orbit span:nth-child(3){inset:18%;border-color:rgba(166,255,61,.35);animation-duration:34s}
@keyframes spin{to{transform:rotateX(72deg) rotateZ(360deg)}}

/* -------------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;
  padding:.7rem 1.2rem;backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(4,6,12,.92),rgba(4,6,12,.55));
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:700}
.brand img{width:40px;height:40px;border-radius:12px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(34,245,255,.5),0 0 26px rgba(34,245,255,.45);
  animation:coinSpin 9s ease-in-out infinite}
@keyframes coinSpin{50%{transform:rotateY(180deg) rotateX(8deg)}}
.brand span{display:flex;flex-direction:column;line-height:1.05;font-size:.95rem;letter-spacing:.02em}
.brand b{color:var(--cyan);text-shadow:0 0 18px rgba(34,245,255,.8)}
.brand em{font-style:normal;font-size:.62rem;letter-spacing:.34em;color:var(--ink-dim);text-transform:uppercase}
.pills{display:flex;gap:.45rem;margin-left:auto;flex-wrap:wrap;align-items:center}
.pill{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  padding:.34rem .6rem;border-radius:999px;border:1px solid var(--line);
  background:rgba(9,16,30,.7);color:var(--ink-dim);white-space:nowrap}
.pill.on{color:var(--lime);border-color:rgba(166,255,61,.5);box-shadow:0 0 18px rgba(166,255,61,.25)}
.pill.off{color:var(--red);border-color:rgba(255,84,112,.5);box-shadow:0 0 18px rgba(255,84,112,.22)}
.pill b{color:var(--ink)}

/* --------------------------------------------------------------------- shell */
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1.1rem;
  padding:1.1rem 1.2rem 3rem;max-width:1680px;margin:0 auto}
.sidebar{position:sticky;top:74px;align-self:start;display:flex;flex-direction:column;gap:.35rem;
  padding:.7rem;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.navlink{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .65rem;border-radius:12px;
  color:var(--ink-dim);border:1px solid transparent;transition:.18s}
.navlink i{font-style:normal;font-size:1.05rem;color:var(--cyan);opacity:.75;width:1.4rem;text-align:center}
.navlink span{display:flex;flex-direction:column;font-size:.86rem;font-weight:600;color:var(--ink)}
.navlink small{font-size:.66rem;font-weight:400;color:var(--ink-dim)}
.navlink:hover{background:rgba(34,245,255,.06);border-color:rgba(34,245,255,.22);text-shadow:none}
.navlink.active{background:linear-gradient(90deg,rgba(34,245,255,.14),rgba(123,92,255,.10));
  border-color:rgba(34,245,255,.45);box-shadow:0 0 26px rgba(34,245,255,.18)}
.content{min-width:0;display:flex;flex-direction:column;gap:1.1rem}
.hero{position:relative;overflow:hidden;border-radius:26px;padding:2.2rem 2rem;
  border:1px solid var(--line);background:
   linear-gradient(120deg,rgba(6,12,24,.9),rgba(8,14,30,.72)),
   radial-gradient(700px 380px at 80% 10%,rgba(255,59,212,.22),transparent 60%)}
.hero-banner{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.16;
  mix-blend-mode:screen;pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:1.4rem;align-items:center}
.hero h1 span{background:linear-gradient(90deg,var(--cyan),var(--magenta) 60%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(34,245,255,.35))}
.hero-coin{display:flex;justify-content:center;perspective:900px}
.hero-coin img{width:min(260px,42vw);border-radius:28px;
  box-shadow:0 0 0 1px rgba(34,245,255,.45),0 40px 90px -30px rgba(34,245,255,.6);
  animation:coinFloat 7s ease-in-out infinite}
@keyframes coinFloat{50%{transform:rotateY(16deg) rotateX(6deg) translateY(-12px)}}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}

/* -------------------------------------------------------------------- panels */
.panel{position:relative;border-radius:var(--radius);padding:1.15rem 1.2rem;
  background:linear-gradient(160deg,rgba(15,24,44,.72),rgba(7,11,22,.86));
  border:1px solid var(--line);backdrop-filter:blur(18px);
  box-shadow:0 24px 70px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(34,245,255,.55),rgba(255,59,212,.35),rgba(123,92,255,.4),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}
.panel.tight{padding:.85rem}
.panel h2{display:flex;align-items:center;gap:.6rem}
.panel h2 .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 14px var(--cyan);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.spacer{flex:1}
.muted{color:var(--ink-dim)}
.tiny{font-size:.72rem}

/* --------------------------------------------------------------------- stats */
.stat{position:relative;overflow:hidden;border-radius:16px;padding:.9rem 1rem;
  border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(18,30,54,.8),rgba(7,11,22,.9));
  transform-style:preserve-3d}
.stat::after{content:"";position:absolute;inset:-40% -60%;
  background:conic-gradient(from 0deg,transparent,rgba(34,245,255,.16),transparent 40%);
  animation:spinGlow 8s linear infinite;pointer-events:none}
@keyframes spinGlow{to{transform:rotate(1turn)}}
.stat .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.stat .v{font-size:1.4rem;font-weight:700;margin-top:.25rem;
  background:linear-gradient(90deg,#fff,#9fe9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .s{font-size:.68rem;color:var(--ink-dim);margin-top:.15rem}
.stat.gold .v{background:linear-gradient(90deg,#ffd98a,#ffc857);-webkit-background-clip:text;background-clip:text}
.stat.magenta .v{background:linear-gradient(90deg,#ff9fe8,#ff3bd4);-webkit-background-clip:text;background-clip:text}
.stat.lime .v{background:linear-gradient(90deg,#d8ff9f,#a6ff3d);-webkit-background-clip:text;background-clip:text}

/* -------------------------------------------------------------------- buttons */
.btn{--glow:rgba(34,245,255,.5);
  display:inline-flex;align-items:center;gap:.45rem;justify-content:center;
  padding:.58rem 1rem;border-radius:12px;border:1px solid rgba(34,245,255,.45);
  background:linear-gradient(135deg,rgba(34,245,255,.18),rgba(123,92,255,.18));
  color:var(--ink);font-weight:650;font-size:.85rem;cursor:pointer;
  box-shadow:0 0 0 1px rgba(34,245,255,.08),0 10px 30px -18px var(--glow);
  transition:.18s transform,.18s box-shadow,.18s border-color;font-family:var(--sans)}
.btn:hover{transform:translateY(-1px);border-color:var(--cyan);
  box-shadow:0 0 24px -6px var(--glow),0 0 0 1px rgba(34,245,255,.35)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:rgba(9,16,30,.55);border-color:var(--line);color:var(--ink-dim)}
.btn.ghost:hover{color:var(--ink);border-color:var(--line-hot)}
.btn.magenta{border-color:rgba(255,59,212,.5);background:linear-gradient(135deg,rgba(255,59,212,.22),rgba(123,92,255,.18));--glow:rgba(255,59,212,.5)}
.btn.lime{border-color:rgba(166,255,61,.45);background:linear-gradient(135deg,rgba(166,255,61,.18),rgba(34,245,255,.12));--glow:rgba(166,255,61,.45)}
.btn.danger{border-color:rgba(255,84,112,.5);background:rgba(255,84,112,.12);--glow:rgba(255,84,112,.4)}
.btn.small{padding:.36rem .62rem;font-size:.72rem;border-radius:9px}
.btn.icon{padding:.4rem .5rem}

/* --------------------------------------------------------------------- forms */
label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin:.55rem 0 .3rem;font-family:var(--mono)}
input,select,textarea{width:100%;padding:.6rem .7rem;border-radius:11px;color:var(--ink);
  background:rgba(6,10,20,.85);border:1px solid var(--line);font-family:var(--mono);
  font-size:.82rem;outline:none;transition:.16s border-color,.16s box-shadow}
input:focus,select:focus,textarea:focus{border-color:var(--line-hot);
  box-shadow:0 0 0 3px rgba(34,245,255,.12)}
textarea{min-height:110px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.field{min-width:0}
.hint{font-size:.68rem;color:var(--ink-dim);margin-top:.25rem}
.switch{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--ink-dim)}
.switch input{width:auto}

/* --------------------------------------------------------------------- tables */
.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line);max-height:520px}
table{width:100%;border-collapse:collapse;font-size:.8rem}
thead th{position:sticky;top:0;z-index:1;text-align:left;padding:.55rem .7rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);background:rgba(6,10,20,.96);border-bottom:1px solid var(--line)}
tbody td{padding:.5rem .7rem;border-bottom:1px solid rgba(120,220,255,.08);vertical-align:top}
tbody tr:hover{background:rgba(34,245,255,.05)}
td.mono,th.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
.empty{padding:1.4rem;text-align:center;color:var(--ink-dim);font-size:.82rem}

/* --------------------------------------------------------------------- code */
pre.code{margin:.4rem 0;padding:.75rem .85rem;border-radius:12px;overflow:auto;max-height:380px;
  background:rgba(3,6,12,.92);border:1px solid var(--line);color:#b9f4ff;
  font-size:.74rem;line-height:1.55}
pre.code.bad{color:#ffc0cb;border-color:rgba(255,84,112,.45)}
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:.3rem .9rem;font-size:.8rem}
.kv dt{color:var(--ink-dim);font-family:var(--mono);font-size:.68rem;letter-spacing:.05em}
.kv dd{margin:0;word-break:break-all;font-family:var(--mono);font-size:.75rem}

/* -------------------------------------------------------------------- badges */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.16rem .5rem;border-radius:999px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--ink-dim);background:rgba(9,16,30,.7)}
.badge.ok,.badge.paid,.badge.active,.badge.deployed{color:var(--lime);border-color:rgba(166,255,61,.45);background:rgba(166,255,61,.08)}
.badge.warn,.badge.open{color:var(--gold);border-color:rgba(255,200,87,.45);background:rgba(255,200,87,.08)}
.badge.bad,.badge.expired,.badge.error{color:var(--red);border-color:rgba(255,84,112,.45);background:rgba(255,84,112,.08)}
.badge.info{color:var(--cyan);border-color:rgba(34,245,255,.45);background:rgba(34,245,255,.08)}
.badge.violet{color:#c8b8ff;border-color:rgba(123,92,255,.5);background:rgba(123,92,255,.12)}

/* ---------------------------------------------------------------- command deck */
.deck{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1rem}
.prompt-box{position:relative}
.prompt-box textarea{min-height:132px;font-family:var(--sans);font-size:.95rem;
  background:linear-gradient(160deg,rgba(6,12,24,.95),rgba(10,16,32,.95))}
.quick{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.quick button{font-size:.7rem;padding:.32rem .55rem;border-radius:999px;cursor:pointer;
  border:1px dashed rgba(34,245,255,.35);background:transparent;color:var(--ink-dim);font-family:var(--mono)}
.quick button:hover{color:var(--ink);border-style:solid;border-color:var(--cyan)}
.answer{min-height:120px;padding:.9rem;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(6,12,24,.9),rgba(12,18,34,.75));font-size:.9rem;line-height:1.65}
.answer h1,.answer h2,.answer h3{font-size:1rem;margin:.6rem 0 .3rem;color:var(--cyan)}
.answer ul{margin:.3rem 0 .6rem 1.1rem;padding:0;color:var(--ink-dim)}
.answer li{margin:.15rem 0}
.answer code{background:rgba(34,245,255,.1);padding:.05rem .3rem;border-radius:5px;color:#b9f4ff}
.answer strong{color:var(--ink)}
.answer .cursor{display:inline-block;width:7px;height:14px;background:var(--cyan);
  animation:blink 1s steps(2) infinite;margin-left:2px;vertical-align:middle}
@keyframes blink{50%{opacity:0}}
.log{border-radius:14px;border:1px solid var(--line);background:rgba(3,6,12,.9);
  max-height:330px;overflow:auto;padding:.5rem .6rem}
.log-line{display:flex;gap:.5rem;font-family:var(--mono);font-size:.68rem;
  padding:.2rem 0;border-bottom:1px dashed rgba(120,220,255,.08);color:var(--ink-dim)}
.log-line:last-child{border-bottom:none}
.log-line .st{min-width:2.2rem;text-align:center;border-radius:4px;padding:0 .2rem}
.log-line .st.ok{color:var(--lime);background:rgba(166,255,61,.08)}
.log-line .st.bad{color:var(--red);background:rgba(255,84,112,.08)}
.log-line .name{color:#b9f4ff;word-break:break-all}
.log-line .ms{margin-left:auto;color:var(--ink-dim);white-space:nowrap}
.console{font-family:var(--mono);font-size:.78rem;background:rgba(2,4,9,.96);
  border:1px solid var(--line);border-radius:14px;padding:.7rem .8rem;min-height:160px;
  max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:#b9f4ff;line-height:1.55}
.console .err{color:var(--red)}
.console .dim{color:var(--ink-dim)}
.chat{display:flex;flex-direction:column;gap:.55rem;max-height:460px;overflow:auto;padding-right:.2rem}
.msg{max-width:92%;padding:.55rem .75rem;border-radius:12px;font-size:.85rem;line-height:1.6;
  border:1px solid var(--line);background:rgba(9,16,30,.75)}
.msg.user{align-self:flex-end;border-color:rgba(34,245,255,.4);background:rgba(34,245,255,.08)}
.msg.assistant{align-self:flex-start}
.msg.tool{align-self:flex-start;font-family:var(--mono);font-size:.7rem;color:#a9d8e8;
  background:rgba(123,92,255,.1);border-color:rgba(123,92,255,.35);max-width:100%}
.msg .who{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:.25rem}

/* ---------------------------------------------------------------- progress */
.progress{height:8px;border-radius:999px;background:rgba(120,220,255,.12);overflow:hidden}
.progress > i{display:block;height:100%;width:0%;border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta));
  box-shadow:0 0 18px rgba(34,245,255,.6);transition:width .25s ease}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(34,245,255,.25);
  border-top-color:var(--cyan);animation:spinFast .8s linear infinite;display:inline-block}
@keyframes spinFast{to{transform:rotate(1turn)}}

/* ----------------------------------------------------------------- features */
.feature{position:relative;overflow:hidden;border-radius:18px;padding:1rem;
  border:1px solid var(--line);background:linear-gradient(150deg,rgba(14,24,46,.8),rgba(6,10,20,.9));
  transform-style:preserve-3d;transition:.2s transform,.2s border-color}
.feature:hover{transform:translateY(-3px);border-color:rgba(34,245,255,.4)}
.feature .glyph{font-size:1.4rem;color:var(--cyan);text-shadow:0 0 20px rgba(34,245,255,.8)}
.feature h3{margin:.4rem 0 .25rem}
.feature p{font-size:.78rem;margin:0 0 .6rem}
.feature img{position:absolute;right:-30px;bottom:-30px;width:120px;opacity:.12;pointer-events:none}

/* --------------------------------------------------------------------- docs */
.docs-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1rem;align-items:start}
.docs-nav{position:sticky;top:80px;display:flex;flex-direction:column;gap:.2rem;
  padding:.6rem;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.docs-nav button{text-align:left;background:none;border:none;color:var(--ink-dim);
  font-family:var(--mono);font-size:.72rem;padding:.4rem .5rem;border-radius:8px;cursor:pointer}
.docs-nav button:hover,.docs-nav button.active{color:var(--ink);background:rgba(34,245,255,.1)}
.endpoint{border:1px solid var(--line);border-radius:14px;padding:.85rem .95rem;
  background:rgba(8,14,26,.72);margin-bottom:.7rem}
.endpoint header{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.method{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;padding:.18rem .45rem;
  border-radius:6px;border:1px solid;background:rgba(34,245,255,.08);color:var(--cyan)}
.method.post{border-color:rgba(255,200,87,.5);color:var(--gold);background:rgba(255,200,87,.08)}
.method.delete{border-color:rgba(255,84,112,.5);color:var(--red);background:rgba(255,84,112,.08)}
.endpoint .path{font-family:var(--mono);font-size:.82rem;color:#b9f4ff;word-break:break-all}
.endpoint .name{font-family:var(--mono);font-size:.68rem;color:var(--magenta)}
.endpoint p{font-size:.78rem;margin:.45rem 0 .2rem}
.endpoint .params{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.endpoint .params span{font-family:var(--mono);font-size:.64rem;padding:.16rem .42rem;
  border-radius:6px;border:1px solid var(--line);color:var(--ink-dim)}
.try{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.45rem;
  margin-top:.6rem;align-items:end}

/* ------------------------------------------------------------------ iframe */
.preview{width:100%;height:460px;border-radius:14px;border:1px solid var(--line);background:#050810}

/* ---------------------------------------------------------------------- nojs */
/* Shown only when JavaScript is off (e.g. Tor Browser "Safer"/"Safest"), so a
   blank dashboard reads as "scripts blocked" instead of "node is down". */
.nojs{position:relative;z-index:70;margin:.6rem .9rem 0;padding:.7rem .9rem;border-radius:14px;
  border:1px solid rgba(255,200,87,.45);background:rgba(255,200,87,.08);color:#ffe6b0;
  font-size:.78rem;line-height:1.6}
.nojs b{color:var(--gold)} .nojs a{color:var(--cyan)}
.nojs code{font-family:var(--mono);font-size:.72rem;color:#b9f4ff}

/* -------------------------------------------------------------------- toasts */
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:80;display:flex;flex-direction:column;
  gap:.45rem;max-width:380px}
.toast{padding:.7rem .9rem;border-radius:12px;border:1px solid var(--line);
  background:rgba(8,14,26,.96);box-shadow:0 20px 50px -30px #000;font-size:.8rem;
  animation:toastIn .2s ease}
.toast.ok{border-color:rgba(166,255,61,.5);color:#e7ffd0}
.toast.bad{border-color:rgba(255,84,112,.55);color:#ffd6de}
.toast b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:.2rem}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}}

/* -------------------------------------------------------------------- dialog */
dialog{border-radius:18px;padding:1.2rem;max-width:460px;width:92vw;
  color:var(--ink);background:linear-gradient(160deg,#0c1526,#070b16);
  border:1px solid rgba(34,245,255,.35);box-shadow:0 40px 120px -40px #000}
dialog::backdrop{background:rgba(2,4,10,.72);backdrop-filter:blur(6px)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;top:0;flex-direction:row;overflow:auto;gap:.4rem}
  .navlink span small{display:none}
  .navlink{white-space:nowrap}
  .hero-inner,.deck,.docs-shell{grid-template-columns:1fr}
  .docs-nav{position:relative;top:0;flex-direction:row;overflow:auto}
}
@media (max-width:620px){
  .topbar{flex-wrap:wrap}
  .pills{width:100%;justify-content:flex-start}
  .hero{padding:1.4rem}
  .panel{padding:.9rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* --------------------------------------------------- app builders (workbench) */
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:1rem}
.tree{display:flex;flex-direction:column;gap:.22rem;max-height:360px;overflow:auto;
  padding-right:.15rem}
.treerow{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;
  background:rgba(8,14,24,.55);border:1px solid var(--line);border-radius:9px;
  padding:.35rem .55rem;color:var(--ink-dim);cursor:pointer;transition:.15s}
.treerow span{font-size:.75rem;color:#b9f4ff;word-break:break-all}
.treerow em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:.62rem;
  color:var(--ink-dim);white-space:nowrap}
.treerow:hover{border-color:rgba(34,245,255,.4);color:var(--ink)}
.treerow.active{border-color:var(--line-hot);background:rgba(34,245,255,.1);
  box-shadow:0 0 18px rgba(34,245,255,.15)}
.editor{font-family:var(--mono);font-size:.78rem;line-height:1.55;min-height:340px;
  background:rgba(2,4,9,.96);tab-size:2;white-space:pre;overflow:auto}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
}

/* ------------------------------------------- wallets, QR and the voice bars */
.voice-bar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.voice-bar .switch{white-space:nowrap}
.voice-bar .who{margin-left:auto}
.btn.rec-on{border-color:var(--red);color:#ffdbe2;background:rgba(255,84,112,.16);
  animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,84,112,.45)}
  50%{box-shadow:0 0 0 10px rgba(255,84,112,0)}}
.qr-grid{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.55rem}
.qr-grid figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  background:rgba(6,11,20,.55);border:1px solid var(--line);border-radius:14px;padding:.6rem}
.qr-grid img{width:172px;height:172px;border-radius:10px;background:#fff;padding:6px;display:block}
.qr-grid figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);text-align:center}
.token-icon{width:30px;height:30px;border-radius:9px;object-fit:cover;border:1px solid var(--line);
  background:#0a1120;vertical-align:middle}
.token-name{display:flex;align-items:center;gap:.5rem;min-width:0}
.token-name span{display:flex;flex-direction:column;min-width:0}
.token-name small{font-size:.64rem;color:var(--ink-dim)}
.balance-tor{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.dot-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 10px rgba(166,255,61,.9);margin-right:.35rem}
.dir-in{color:var(--lime)} .dir-out{color:#ff9fe8} .dir-self{color:var(--cyan)}
.hexline{font-family:var(--mono);font-size:.66rem;word-break:break-all;color:#a9d8e8}
details.hex summary{cursor:pointer;font-family:var(--mono);font-size:.66rem;color:var(--cyan)}
.asset-total{display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline;
  border-top:1px solid var(--line);margin-top:.6rem;padding-top:.5rem}
.asset-total b{font-family:var(--mono);font-size:1rem}