/* ════════════════════════════════════════════════════════════
   CryptoMagnet — stylesheet
   One file, shared by index.html, dashboard.html and admin.html.
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
img{ max-width:100%; }

/* ============================================================
   CRYPTOMAGNET — magnetic capital terminal
   Single visual world: dark magnetic field. Committed dark theme.
   ============================================================ */
:root{
  color-scheme: dark;

  /* ground: iron-black with a blue field bias */
  --ground:      #05070d;
  --ground-2:    #070a12;
  --surface:     #0a0f19;
  --raised:      #0f1624;
  --raised-2:    #131c2d;
  --line:        #1b2434;
  --line-soft:   #141c29;
  --line-hot:    #24344d;

  /* ink */
  --ink:         #e7edf7;
  --ink-2:       #a3b0c6;
  --ink-3:       #66738b;
  --ink-4:       #414c60;

  /* THE accent: magnetic charge */
  --charge:      #19e3f5;
  --charge-2:    #0bb8cc;
  --charge-ghost: rgba(25,227,245,.10);
  --charge-edge: rgba(25,227,245,.34);

  /* poles — used only in field graphics + flow direction */
  --pole-n:      #ff4d6d;
  --pole-s:      #4d7cff;

  /* capital */
  --gold:        #f5b942;
  --gold-dim:    rgba(245,185,66,.14);

  /* semantic, separate from accent */
  --gain:        #2fe0a0;
  --loss:        #ff6b6b;
  --warn:        #ffb020;

  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;
  --rail-w: 238px;
  --shadow: 0 24px 60px -28px rgba(0,0,0,.95);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{ margin:0; font-family: var(--f-display); text-wrap: balance; font-variation-settings:"wdth" 100; }
p{ margin:0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 2px solid var(--charge); outline-offset: 2px; border-radius: 3px; }

.mono{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num{ font-family: var(--f-display); font-variant-numeric: tabular-nums; font-variation-settings:"wdth" 88; letter-spacing:-.01em; }
.up{ color: var(--gain); } .down{ color: var(--loss); }
.dim{ color: var(--ink-3); }

/* ---------- ambient field canvas ---------- */
#field{
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.vignette{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(77,124,255,.10), transparent 60%),
    radial-gradient(90% 70% at 100% 105%, rgba(255,77,109,.07), transparent 62%),
    radial-gradient(70% 60% at 50% 50%, transparent 30%, rgba(5,7,13,.72) 100%);
}
.grain{
  position: fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- app shell ---------- */
.app{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: var(--rail-w) minmax(0,1fr);
  min-height: 100vh;
}

/* ---------- left rail ---------- */
.rail{
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px 16px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10,15,25,.86), rgba(5,7,13,.9));
  backdrop-filter: blur(14px);
}
.brand{ display:flex; align-items:center; gap:11px; padding: 2px 6px 20px; }
.brand__mark{ width: 34px; height: 34px; flex: none; }
.brand__name{
  font-family: var(--f-display); font-weight: 800; font-size: 16px; letter-spacing: -.02em;
  font-variation-settings:"wdth" 112;
}
.brand__name b{ color: var(--charge); font-weight: 800; }
.brand__sub{ font-family: var(--f-mono); font-size: 9px; letter-spacing:.22em; color: var(--ink-4); text-transform: uppercase; }

.nav{ position: relative; display:flex; flex-direction: column; gap: 3px; }
.nav__ind{
  position: absolute; left: 0; width: 100%; height: 40px; border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--charge-ghost), rgba(25,227,245,.02));
  border: 1px solid var(--charge-edge);
  box-shadow: inset 2px 0 0 var(--charge), 0 0 26px -6px rgba(25,227,245,.5);
  transition: transform .46s cubic-bezier(.16,1.2,.3,1);
  pointer-events: none;
}
.nav__item{
  position: relative; z-index:1;
  display:flex; align-items:center; gap:11px;
  height: 40px; padding: 0 11px; border-radius: var(--r-md);
  color: var(--ink-3); font-size: 13.5px; font-weight: 500;
  transition: color .2s ease, transform .3s cubic-bezier(.16,1.2,.3,1);
  width: 100%; text-align: left;
}
.nav__item svg{ width:17px; height:17px; flex:none; opacity:.8; transition: opacity .2s, transform .35s cubic-bezier(.16,1.4,.3,1); }
.nav__item:hover{ color: var(--ink); transform: translateX(3px); }
.nav__item:hover svg{ opacity:1; transform: rotate(-8deg) scale(1.08); }
.nav__item.is-on{ color: var(--ink); font-weight: 600; }
.nav__item.is-on svg{ opacity:1; color: var(--charge); }
.nav__item .kbd{
  margin-left:auto; font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-4);
  border:1px solid var(--line); border-radius:3px; padding: 1px 4px;
}
.nav__sect{
  font-family: var(--f-mono); font-size: 9px; letter-spacing:.2em; text-transform: uppercase;
  color: var(--ink-4); padding: 18px 12px 7px;
}

.rail__foot{ margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.saturation{
  border:1px solid var(--line); border-radius: var(--r-lg); padding: 12px; background: rgba(15,22,36,.5);
}
.saturation__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.saturation__lbl{ font-family:var(--f-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.saturation__val{ font-family: var(--f-display); font-weight:800; font-size: 17px; color: var(--charge); font-variation-settings:"wdth" 88; }
.fieldbars{ display:flex; gap:3px; align-items:flex-end; height: 26px; }
.fieldbars i{
  flex:1; background: linear-gradient(180deg, var(--charge), var(--charge-2)); border-radius:1px;
  opacity:.85; animation: bar-breathe 2.6s ease-in-out infinite;
}
.fieldbars i:nth-child(even){ opacity:.45; }
.acct{
  display:flex; align-items:center; gap:10px; padding: 9px 10px; border-radius: var(--r-md);
  border:1px solid var(--line-soft); background: rgba(15,22,36,.4); transition: border-color .2s;
}
.acct:hover{ border-color: var(--line-hot); }
.acct__av{
  width:28px;height:28px;border-radius:50%;flex:none;
  background: conic-gradient(from 200deg, var(--pole-s), var(--charge), var(--gold), var(--pole-n), var(--pole-s));
  animation: spin360 14s linear infinite;
}
@keyframes spin360{ to{ transform: rotate(360deg); } }

/* ---------- chart chrome ---------- */
.chart{ position: relative; }
.chart svg{ display:block; width:100%; height:auto; overflow: visible; }
.chart .gridline{ stroke: rgba(255,255,255,.055); stroke-width:1; }
.chart .zeroline{ stroke: rgba(255,255,255,.16); stroke-width:1; }
.chart .axlbl{ font-family: var(--f-mono); font-size: 9px; fill: var(--ink-4); }
.chart .serieslbl{ font-family: var(--f-mono); font-size: 9.5px; }
.chart .draw{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: dashdraw 1.5s cubic-bezier(.3,.9,.3,1) .12s forwards; }
.chart .fadein{ opacity:0; animation: fadein .9s ease .5s forwards; }
@keyframes fadein{ to{ opacity:1; } }
.crosshair{ stroke: var(--charge); stroke-width:1; stroke-dasharray:3 3; opacity:0; transition: opacity .15s; }
.crosshair.on{ opacity:.8; }
.hoverdot{ opacity:0; transition: opacity .15s; }
.hoverdot.on{ opacity:1; }
.tip{
  position:absolute; z-index:30; pointer-events:none; opacity:0; transform: translate(-50%,-116%);
  transition: opacity .14s ease;
  background: rgba(9,14,23,.97); border:1px solid var(--line-hot); border-radius: var(--r-md);
  padding: 8px 11px; box-shadow: 0 14px 34px -16px #000; min-width: 118px;
}
.tip.on{ opacity:1; }
.tip__t{ font-family: var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-4); margin-bottom:5px; }
.tip__r{ display:flex; align-items:center; gap:7px; font-size:11.5px; white-space:nowrap; }
.tip__r i{ width:7px;height:7px;border-radius:2px; flex:none; }
.tip__r b{ margin-left:auto; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:600; }
.tip__r span{ color: var(--ink-3); }
.chartlegend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.chartlegend i{ width:9px;height:9px;border-radius:2px; }
.chartlegend span{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); }
.acct__n{ font-size:12.5px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct__a{ font-family:var(--f-mono); font-size:10px; color: var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- top bar ---------- */
.main{ min-width:0; display:flex; flex-direction:column; }
.top{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; gap: 14px;
  height: 58px; padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(6,9,16,.82); backdrop-filter: blur(16px);
}
.ticker{
  flex:1; min-width:0; overflow:hidden; height: 58px; position:relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 60px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 60px), transparent);
}
.ticker__track{ display:flex; align-items:center; gap: 26px; height:100%; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state: paused; }
.tick{ display:flex; align-items:baseline; gap:7px; font-family: var(--f-mono); font-size: 11.5px; white-space: nowrap; }
.tick b{ color: var(--ink-2); font-weight:600; letter-spacing:.04em; }
.tick .v{ color: var(--ink); font-variant-numeric: tabular-nums; }
.tick .d{ font-size:10.5px; }
.tick .dot{ width:5px;height:5px;border-radius:50%;background:var(--charge); box-shadow:0 0 8px var(--charge); animation: blip 2.2s ease-in-out infinite; }

.top__right{ display:flex; align-items:center; gap:10px; flex:none; }
.gasbadge{
  display:flex; align-items:center; gap:7px; padding: 5px 10px; border-radius: 999px;
  border:1px solid var(--line); font-family: var(--f-mono); font-size: 11px; color: var(--ink-2);
  background: rgba(15,22,36,.6);
}
.gasbadge .g{ color: var(--gain); }

.btn{
  display:inline-flex; align-items:center; gap:8px; height:34px; padding: 0 14px;
  border-radius: var(--r-md); border:1px solid var(--line-hot); background: rgba(17,24,38,.7);
  font-size:13px; font-weight:600; color: var(--ink-2);
  transition: transform .28s cubic-bezier(.16,1.3,.3,1), border-color .2s, color .2s, background .2s;
}
.btn:hover{ color: var(--ink); border-color: var(--charge-edge); background: rgba(25,227,245,.06); }
.btn svg{ width:15px;height:15px; }
.btn--pull{
  background: linear-gradient(180deg, rgba(25,227,245,.20), rgba(25,227,245,.06));
  border-color: rgba(25,227,245,.5); color: #d7fbff;
  box-shadow: 0 0 0 0 rgba(25,227,245,.5), 0 8px 26px -12px rgba(25,227,245,.8);
  animation: pull-pulse 3.4s ease-in-out infinite;
}
.btn--pull:hover{ background: linear-gradient(180deg, rgba(25,227,245,.32), rgba(25,227,245,.12)); color:#fff; }
.btn--ghost{ background: transparent; border-color: var(--line); }
.iconbtn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-md);
  border:1px solid var(--line); color: var(--ink-3); transition: color .2s, border-color .2s, transform .3s;
}
.iconbtn:hover{ color: var(--charge); border-color: var(--charge-edge); transform: translateY(-1px); }
.iconbtn svg{ width:16px;height:16px; }
.iconbtn .badge{
  position:absolute; margin: -18px 0 0 16px; width:7px;height:7px;border-radius:50%;
  background: var(--warn); box-shadow: 0 0 8px var(--warn);
}

/* ---------- view container ---------- */
.stage{ padding: 22px 22px 60px; flex:1; }
.view{ display:none; }
.view.is-on{ display:block; }
.view__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 18px; flex-wrap: wrap; }
.eyebrow{
  font-family: var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--charge); display:flex; align-items:center; gap:8px; margin-bottom: 7px;
}
.eyebrow::before{ content:""; width:16px;height:1px;background:var(--charge); box-shadow:0 0 8px var(--charge); }
.view__title{ font-size: 27px; font-weight: 800; letter-spacing:-.03em; font-variation-settings:"wdth" 104; }
.view__sub{ color: var(--ink-3); font-size: 13px; margin-top: 5px; max-width: 62ch; }

/* ---------- cards ---------- */
.grid{ display:grid; gap: 14px; }
.card{
  position: relative; border-radius: var(--r-lg); border:1px solid var(--line);
  background: linear-gradient(170deg, rgba(15,22,36,.86), rgba(8,12,20,.9));
  box-shadow: var(--shadow); overflow: hidden;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.05), transparent 42%);
}
.card__hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
}
.card__title{ font-size: 13px; font-weight: 700; letter-spacing:-.005em; font-family: var(--f-body); }
.card__hint{ font-family: var(--f-mono); font-size:10px; color: var(--ink-4); letter-spacing:.08em; text-transform:uppercase; }
.card__body{ padding: 16px; }
.card--flush .card__body{ padding: 0; }

/* KPI tiles — no borders, they are readings not objects */
.readouts{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line-soft); }
.readout{ background: var(--surface); padding: 15px 16px; position: relative; overflow: hidden; }
.readout__l{ font-family: var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-4); }
.readout__v{ font-family: var(--f-display); font-weight:800; font-size: 24px; margin-top:6px; letter-spacing:-.03em; font-variation-settings:"wdth" 84; font-variant-numeric: tabular-nums; }
.readout__m{ font-family:var(--f-mono); font-size:11px; margin-top:4px; color: var(--ink-3); }
.readout::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--charge); opacity:0;
  transition: opacity .3s;
}
.readout:hover::before{ opacity:.7; }

/* pills / chips */
.pill{
  display:inline-flex; align-items:center; gap:5px; height:20px; padding: 0 8px; border-radius: 999px;
  font-family: var(--f-mono); font-size:10px; letter-spacing:.04em; white-space:nowrap;
  border:1px solid transparent;
}
.pill i{ width:5px;height:5px;border-radius:50%; background: currentColor; }
.pill--low{ color: var(--gain); background: rgba(47,224,160,.09); border-color: rgba(47,224,160,.24); }
.pill--mid{ color: var(--warn); background: rgba(255,176,32,.09); border-color: rgba(255,176,32,.24); }
.pill--high{ color: var(--loss); background: rgba(255,107,107,.09); border-color: rgba(255,107,107,.26); }
.pill--on{ color: var(--charge); background: var(--charge-ghost); border-color: var(--charge-edge); }
.pill--off{ color: var(--ink-4); background: rgba(255,255,255,.02); border-color: var(--line); }

.chiprow{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  height:29px; padding: 0 12px; border-radius: 999px; border:1px solid var(--line);
  font-size:12px; color: var(--ink-3); display:inline-flex; align-items:center; gap:7px;
  transition: all .24s cubic-bezier(.16,1.2,.3,1); background: rgba(15,22,36,.4);
}
.chip:hover{ color: var(--ink); border-color: var(--line-hot); transform: translateY(-1px); }
.chip.is-on{ color: #d7fbff; border-color: rgba(25,227,245,.45); background: rgba(25,227,245,.09); box-shadow: 0 0 20px -8px var(--charge); }
.chip .dot{ width:6px;height:6px;border-radius:50%; }

/* ---------- HERO: the magnet ---------- */
.hero{
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 0;
  border-radius: var(--r-xl); border:1px solid var(--line-hot); overflow:hidden;
  background:
    radial-gradient(120% 130% at 78% 50%, rgba(25,227,245,.09), transparent 58%),
    linear-gradient(150deg, rgba(15,22,36,.92), rgba(6,9,16,.95));
  box-shadow: var(--shadow);
}
.hero__l{ padding: 26px 26px 22px; display:flex; flex-direction:column; }
.hero__aum{
  font-family: var(--f-display); font-weight: 900; font-size: clamp(38px, 5.4vw, 62px);
  letter-spacing:-.045em; line-height:1; font-variation-settings:"wdth" 78;
  font-variant-numeric: tabular-nums; margin: 12px 0 0;
  background: linear-gradient(178deg, #ffffff 10%, #b9d6e6 60%, #6f96ad 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(25,227,245,.18);
}
.hero__aum .c{ color: var(--ink-4); -webkit-text-fill-color: var(--ink-4); font-size:.52em; }
.hero__delta{ display:flex; align-items:center; gap:12px; margin-top:12px; font-family: var(--f-mono); font-size: 13px; }
.hero__delta .big{ font-size:15px; font-weight:600; }
.hero__split{
  display:grid; grid-template-columns: 1fr 1fr; gap:1px; background: var(--line-soft);
  border-radius: var(--r-md); overflow:hidden; margin-top: 20px; border:1px solid var(--line-soft);
}
.hero__cell{ background: rgba(10,15,25,.7); padding: 12px 14px; }
.hero__cell .l{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.hero__cell .v{ font-family: var(--f-display); font-weight:800; font-size:19px; margin-top:4px; font-variation-settings:"wdth" 86; font-variant-numeric:tabular-nums; }
.hero__cell .s{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); margin-top:2px; }
.hero__foot{ margin-top:auto; padding-top: 20px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.stage3d{
  position: relative; min-height: 372px; overflow: hidden;
  border-left: 1px solid var(--line-soft);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(77,124,255,.10), transparent 70%);
}
.stage3d__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
  animation: gridpan 26s linear infinite;
}
.orbit{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  border:1px solid rgba(25,227,245,.10); border-radius:50%;
}
.orbit--1{ width: 190px; height: 190px; animation: spin 22s linear infinite; border-style: dashed; }
.orbit--2{ width: 268px; height: 268px; animation: spin 40s linear infinite reverse; }
.orbit--3{ width: 348px; height: 348px; border-color: rgba(25,227,245,.06); animation: spin 64s linear infinite; }
.orbit i{
  position:absolute; width:5px;height:5px;border-radius:50%; background: var(--charge);
  box-shadow: 0 0 12px var(--charge); top:-3px; left:calc(50% - 3px);
}
.orbit--2 i{ background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.orbit--3 i{ background: var(--pole-s); box-shadow: 0 0 12px var(--pole-s); }

.magnet{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 152px; height: 152px; z-index: 3;
}
.magnet svg{ width:100%; height:100%; overflow: visible; }
.magnet__core{ animation: breathe 3.6s ease-in-out infinite; transform-origin: 50% 50%; }
.ripple{
  position:absolute; left:50%; top:50%; width: 120px; height:120px; margin:-60px 0 0 -60px;
  border-radius:50%; border:1px solid var(--charge); opacity:0; z-index:2;
  animation: ripple 3.2s ease-out infinite;
}
.ripple:nth-child(2){ animation-delay: 1.06s; }
.ripple:nth-child(3){ animation-delay: 2.13s; }

.coin{
  position:absolute; z-index:4; display:flex; align-items:center; gap:5px;
  height: 26px; padding: 0 9px 0 5px; border-radius: 999px;
  border:1px solid var(--line-hot); background: rgba(12,18,30,.92);
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-2);
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.9);
  will-change: transform, opacity;
}
.coin .sym{
  width:17px;height:17px;border-radius:50%; display:grid;place-items:center;
  font-size:8px; font-weight:700; color:#04070d; font-family: var(--f-display);
}
.flash{
  position:absolute; left:50%; top:50%; width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%; background: #fff; z-index:5; pointer-events:none;
  box-shadow: 0 0 24px 8px rgba(25,227,245,.9);
  animation: flashout .62s cubic-bezier(.2,.8,.3,1) forwards;
}
.stage3d__cap{
  position:absolute; left:0; right:0; bottom:0; padding: 11px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family: var(--f-mono); font-size:10px; color: var(--ink-4); letter-spacing:.1em; text-transform:uppercase;
  background: linear-gradient(0deg, rgba(5,7,13,.9), transparent);
}
.stage3d__cap .live{ color: var(--gain); display:flex; align-items:center; gap:6px; }
.stage3d__cap .live i{ width:5px;height:5px;border-radius:50%;background:var(--gain);box-shadow:0 0 8px var(--gain); animation: blip 1.6s infinite; }

/* ---------- meters / bars ---------- */
.meter{ height:6px; border-radius:999px; background: rgba(255,255,255,.055); overflow:hidden; position:relative; }
.meter__f{
  height:100%; border-radius:999px; width:0;
  background: linear-gradient(90deg, var(--charge-2), var(--charge));
  box-shadow: 0 0 14px -2px var(--charge);
  transition: width 1.4s cubic-bezier(.16,1,.3,1);
}
.meter__f::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: shimmer 2.6s linear infinite;
}
.meter--gold .meter__f{ background: linear-gradient(90deg, #a9711b, var(--gold)); box-shadow: 0 0 14px -2px var(--gold); }
.meter--warn .meter__f{ background: linear-gradient(90deg, #a06a10, var(--warn)); box-shadow: 0 0 14px -2px var(--warn); }
.meter--over .meter__f{ background: linear-gradient(90deg, #8f2f2f, var(--loss)); box-shadow: 0 0 14px -2px var(--loss); }
.meter--gain .meter__f{ background: linear-gradient(90deg, #178a60, var(--gain)); box-shadow: 0 0 14px -2px var(--gain); }

/* ---------- tables ---------- */
.tblwrap{ overflow-x: auto; }
.tbl{ width:100%; border-collapse: collapse; min-width: 940px; }
.tbl th{
  font-family: var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-4); font-weight:500; text-align:left; padding: 10px 14px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background: rgba(9,13,22,.96); backdrop-filter: blur(6px); z-index:2;
  white-space: nowrap; cursor: pointer; user-select:none;
}
.tbl th:hover{ color: var(--ink-2); }
.tbl th.r, .tbl td.r{ text-align: right; }
.tbl td{ padding: 11px 14px; border-bottom:1px solid var(--line-soft); font-size:13px; vertical-align: middle; }
.tbl tbody tr{ transition: background .18s ease, transform .3s cubic-bezier(.16,1.2,.3,1); cursor: pointer; }
.tbl tbody tr:hover{ background: rgba(25,227,245,.045); }
.tbl tbody tr:hover td:first-child{ box-shadow: inset 2px 0 0 var(--charge); }
.proto{ display:flex; align-items:center; gap:10px; }
.proto__ic{
  width:26px;height:26px;border-radius:7px; flex:none; display:grid;place-items:center;
  font-family: var(--f-display); font-weight:800; font-size:10px; color:#04070d;
}
.proto__n{ font-weight:600; font-size:13px; line-height:1.2; }
.proto__s{ font-family:var(--f-mono); font-size:10px; color:var(--ink-4); }
.chainlbl{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11px; color:var(--ink-2); }
.chainlbl i{ width:7px;height:7px;border-radius:2px; transform: rotate(45deg); }

.spark{ display:block; }
.spark path.line{ fill:none; stroke-width:1.6; stroke-linecap:round; }
.spark circle.tipd{ animation: blip 1.8s ease-in-out infinite; }

/* ---------- donut / allocation ---------- */
.alloc{ display:grid; grid-template-columns: 168px minmax(0,1fr); gap: 18px; align-items:center; }
.donut{ position:relative; width:168px; height:168px; }
.donut svg{ transform: rotate(-90deg); }
.donut circle{ fill:none; stroke-width: 15; transition: stroke-width .3s, opacity .3s; }
.donut circle:hover{ stroke-width: 19; }
.donut__mid{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
}
.donut__mid .v{ font-family:var(--f-display); font-weight:800; font-size:21px; font-variation-settings:"wdth" 84; }
.donut__mid .l{ font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.legend{ display:flex; flex-direction:column; gap: 9px; }
.legend__row{ display:grid; grid-template-columns: 9px 1fr auto auto; gap:10px; align-items:center; font-size:12.5px; }
.legend__row i{ width:9px;height:9px;border-radius:2px; }
.legend__row .p{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); width:46px; text-align:right; }
.legend__row .a{ font-family:var(--f-mono); font-size:11.5px; width:86px; text-align:right; color:var(--ink-2); }

/* ---------- budget rails ---------- */
.rail-item{ padding: 14px 16px; border-bottom:1px solid var(--line-soft); transition: background .2s; }
.rail-item:last-child{ border-bottom:none; }
.rail-item:hover{ background: rgba(255,255,255,.018); }
.rail-item__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.rail-item__n{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:9px; }
.rail-item__n .sw{ width:8px;height:8px;border-radius:2px; }
.rail-item__v{ font-family:var(--f-mono); font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rail-item__v b{ color:var(--ink); font-weight:600; }
.rail-item__meta{ display:flex; justify-content:space-between; margin-top:7px; font-family:var(--f-mono); font-size:10px; color:var(--ink-4); }

/* ---------- alerts ---------- */
.alert{
  display:grid; grid-template-columns: 30px 1fr auto; gap:12px; align-items:flex-start;
  padding: 13px 16px; border-bottom:1px solid var(--line-soft); transition: background .2s;
}
.alert:last-child{ border-bottom:none; }
.alert:hover{ background: rgba(255,255,255,.02); }
.alert__ic{ width:30px;height:30px;border-radius:9px; display:grid;place-items:center; }
.alert__ic svg{ width:15px;height:15px; }
.alert__t{ font-size:12.8px; font-weight:600; }
.alert__d{ font-size:11.5px; color: var(--ink-3); margin-top:3px; line-height:1.45; }
.alert__time{ font-family:var(--f-mono); font-size:10px; color:var(--ink-4); white-space:nowrap; }

/* ---------- rules ---------- */
.rulecard{
  border:1px solid var(--line); border-radius: var(--r-lg); padding: 16px;
  background: linear-gradient(160deg, rgba(15,22,36,.8), rgba(8,12,20,.86));
  transition: border-color .3s, transform .35s cubic-bezier(.16,1.2,.3,1), box-shadow .3s;
}
.rulecard:hover{ border-color: var(--line-hot); transform: translateY(-2px); box-shadow: 0 18px 40px -26px #000; }
.rulecard.is-off{ opacity:.55; }
.rulecard__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.rulecard__n{ font-size:14px; font-weight:700; font-family: var(--f-display); font-variation-settings:"wdth" 100; letter-spacing:-.01em; }
.rulecard__logic{ margin-top: 13px; display:flex; flex-direction:column; gap:8px; }
.logicrow{ display:grid; grid-template-columns: 40px 1fr; gap:10px; align-items:center; }
.logicrow .k{ font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; color:var(--ink-4); text-transform:uppercase; }
.logicrow .v{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-2); background: rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:6px; padding:6px 9px; }
.logicrow .v em{ font-style:normal; color: var(--charge); }
.rulecard__foot{ margin-top:13px; padding-top:11px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:10px; color:var(--ink-4); }

.switch{
  width:38px;height:21px;border-radius:999px;border:1px solid var(--line-hot);
  background: rgba(255,255,255,.04); position:relative; flex:none; transition: all .3s cubic-bezier(.16,1.3,.3,1);
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:15px;height:15px;border-radius:50%;
  background: var(--ink-3); transition: all .3s cubic-bezier(.16,1.5,.3,1);
}
.switch.is-on{ background: rgba(25,227,245,.2); border-color: rgba(25,227,245,.55); box-shadow: 0 0 18px -4px var(--charge); }
.switch.is-on::after{ left: 19px; background: var(--charge); box-shadow: 0 0 10px var(--charge); }

/* ---------- deposit ---------- */
.deposit{ display:grid; grid-template-columns: minmax(0,1fr) 330px; gap: 14px; }
.amount{
  display:flex; align-items:center; gap:12px; padding: 18px; border-radius: var(--r-lg);
  border:1px solid var(--line-hot); background: rgba(8,12,20,.7);
}
.amount input{
  flex:1; min-width:0; background:none; border:none; outline:none; color: var(--ink);
  font-family: var(--f-display); font-weight:800; font-size: 40px; letter-spacing:-.04em;
  font-variation-settings:"wdth" 80; font-variant-numeric: tabular-nums;
}
.amount input::placeholder{ color: var(--ink-4); }
.amount__cur{ font-family:var(--f-display); font-weight:800; font-size:30px; color:var(--ink-4); }
.quick{ display:flex; gap:8px; margin-top:12px; }
.assetopt{
  display:flex; align-items:center; gap:11px; padding: 11px 13px; border-radius: var(--r-md);
  border:1px solid var(--line); background: rgba(15,22,36,.5); width:100%; text-align:left;
  transition: all .26s cubic-bezier(.16,1.2,.3,1);
}
.assetopt:hover{ border-color: var(--line-hot); transform: translateX(3px); }
.assetopt.is-on{ border-color: rgba(25,227,245,.5); background: rgba(25,227,245,.07); box-shadow: 0 0 24px -12px var(--charge); }
.assetopt__b{ margin-left:auto; text-align:right; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); }
.routestep{
  display:grid; grid-template-columns: 22px 1fr auto; gap:11px; align-items:center;
  padding: 11px 0; border-bottom:1px dashed var(--line-soft); font-size:12.5px;
}
.routestep:last-child{ border-bottom:none; }
.routestep__i{
  width:22px;height:22px;border-radius:50%; border:1px solid var(--charge-edge); color:var(--charge);
  display:grid;place-items:center; font-family:var(--f-mono); font-size:10px;
  background: var(--charge-ghost);
}

/* ---------- flows ---------- */
.dirtag{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10.5px;
  padding: 3px 8px; border-radius:5px; border:1px solid transparent;
}
.dirtag--in{ color: var(--pole-s); background: rgba(77,124,255,.09); border-color: rgba(77,124,255,.26); }
.dirtag--out{ color: var(--pole-n); background: rgba(255,77,109,.09); border-color: rgba(255,77,109,.26); }
.dirtag--int{ color: var(--ink-3); background: rgba(255,255,255,.03); border-color: var(--line); }
.hash{ font-family:var(--f-mono); font-size:11px; color:var(--ink-4); }
.hash:hover{ color: var(--charge); }

/* ---------- waterfall ---------- */
.wf{ display:flex; align-items:flex-end; gap: 10px; height: 190px; padding: 0 4px; }
.wf__col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.wf__bar{
  width:100%; border-radius: 4px 4px 2px 2px; position:relative; min-height:3px;
  transform-origin: bottom; animation: growup .9s cubic-bezier(.16,1,.3,1) both;
  transition: filter .2s;
}
.wf__col:hover .wf__bar{ filter: brightness(1.35); }
.wf__l{ font-family:var(--f-mono); font-size:9.5px; color:var(--ink-4); }
.wf__v{ font-family:var(--f-mono); font-size:10px; color:var(--ink-2); }

/* ---------- drawer ---------- */
.scrim{
  position:fixed; inset:0; z-index:80; background: rgba(3,5,10,.7); backdrop-filter: blur(3px);
  opacity:0; pointer-events:none; transition: opacity .32s ease;
}
.scrim.is-on{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width: min(460px, 94vw); z-index:81;
  background: linear-gradient(180deg, #0b1119, #070a12);
  border-left:1px solid var(--line-hot); box-shadow: -30px 0 80px -40px #000;
  transform: translateX(102%); transition: transform .44s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.drawer.is-on{ transform: none; }
.drawer__hd{ padding: 18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.drawer__body{ padding: 18px 20px 30px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.kv{ display:grid; grid-template-columns: 1fr auto; gap:8px; padding: 9px 0; border-bottom:1px dashed var(--line-soft); font-size:12.5px; }
.kv:last-child{ border-bottom:none; }
.kv .k{ color: var(--ink-3); }
.kv .v{ font-family:var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- toast ---------- */
.toasts{ position:fixed; right: 18px; bottom: 18px; z-index:90; display:flex; flex-direction:column; gap:9px; align-items:flex-end; }
.toast{
  display:flex; align-items:center; gap:11px; padding: 11px 15px; border-radius: var(--r-md);
  border:1px solid var(--charge-edge); background: rgba(11,17,27,.95); backdrop-filter: blur(10px);
  box-shadow: 0 20px 44px -20px #000, 0 0 30px -16px var(--charge);
  font-size:12.5px; animation: toastin .5s cubic-bezier(.16,1.3,.3,1) both;
  max-width: 340px;
}
.toast__ic{ width:22px;height:22px;border-radius:50%; display:grid;place-items:center; background: var(--charge-ghost); color: var(--charge); flex:none; }
.toast__ic svg{ width:12px;height:12px; }
.toast b{ font-weight:600; }
.toast .s{ color: var(--ink-3); font-family: var(--f-mono); font-size:10.5px; }

/* ---------- entrance ---------- */
.enter{ animation: enter .72s cubic-bezier(.16,1,.3,1) both; }
.d1{ animation-delay:.04s } .d2{ animation-delay:.10s } .d3{ animation-delay:.16s }
.d4{ animation-delay:.22s } .d5{ animation-delay:.28s } .d6{ animation-delay:.34s }
.d7{ animation-delay:.40s } .d8{ animation-delay:.46s }

/* ---------- keyframes ---------- */
@keyframes enter{ from{ opacity:0; transform: translateY(14px) scale(.995); } to{ opacity:1; transform:none; } }
@keyframes spin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.045); } }
@keyframes ripple{
  0%{ transform: scale(.5); opacity:.85; }
  100%{ transform: scale(2.9); opacity:0; }
}
@keyframes flashout{
  0%{ transform: scale(.4); opacity:1; }
  60%{ transform: scale(3.6); opacity:.75; }
  100%{ transform: scale(6.2); opacity:0; }
}
@keyframes blip{ 0%,100%{ opacity:1; transform: scale(1);} 50%{ opacity:.35; transform: scale(.78);} }
@keyframes shimmer{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }
@keyframes ticker{ 0%{ transform: translateX(0);} 100%{ transform: translateX(-50%);} }
@keyframes pull-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(25,227,245,.34), 0 8px 26px -12px rgba(25,227,245,.8); }
  50%{ box-shadow: 0 0 0 7px rgba(25,227,245,0), 0 8px 30px -10px rgba(25,227,245,.9); }
}
@keyframes bar-breathe{ 0%,100%{ height: 40%; } 50%{ height: 100%; } }
@keyframes gridpan{ to{ background-position: 34px 34px, 34px 34px; } }
@keyframes growup{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@keyframes toastin{ from{ opacity:0; transform: translateX(28px) scale(.95); } to{ opacity:1; transform:none; } }
@keyframes dashdraw{ to{ stroke-dashoffset: 0; } }
@keyframes fieldflow{ to{ stroke-dashoffset: -220; } }

/* ---------- responsive ---------- */
@media (max-width: 1240px){
  .readouts{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1080px){
  :root{ --rail-w: 66px; }
  .brand__name, .brand__sub, .nav__item span, .nav__item .kbd, .nav__sect, .saturation, .acct__n, .acct__a{ display:none; }
  .nav__item{ justify-content:center; padding:0; }
  .brand{ justify-content:center; padding-left:0; padding-right:0; }
  .acct{ justify-content:center; padding:8px; }
  .hero{ grid-template-columns: 1fr; }
  .stage3d{ border-left:none; border-top:1px solid var(--line-soft); }
  .deposit{ grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  .app{ grid-template-columns: 1fr; }
  .rail{ position:fixed; bottom:0; top:auto; left:0; right:0; height:auto; flex-direction:row; z-index:60;
         border-right:none; border-top:1px solid var(--line); padding:8px; gap:2px; }
  .brand, .rail__foot{ display:none; }
  .nav{ flex-direction:row; width:100%; justify-content:space-around; }
  .nav__ind{ display:none; }
  .nav__item.is-on{ background: var(--charge-ghost); }
  .stage{ padding: 16px 14px 96px; }
  .alloc{ grid-template-columns: 1fr; justify-items:center; }
  .top{ padding: 0 14px; }
}

/* ═══════════════ AUTH GATE ═══════════════ */
.auth{
  position: fixed; inset:0; z-index: 200;
  display: grid; grid-template-columns: minmax(0,1fr) 476px;
  background: linear-gradient(120deg, rgba(5,7,13,.90), rgba(5,7,13,.965));
  backdrop-filter: blur(2px);
  animation: authin .6s ease both;
}
.auth[hidden]{ display:none !important; }
@keyframes authin{ from{ opacity:0 } to{ opacity:1 } }
.auth__l{
  position:relative; padding: 52px 54px; display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid var(--line); overflow:hidden;
}
.auth__r{ display:grid; place-items:center; padding: 28px; background: rgba(8,11,19,.55); }
.auth__brand{ display:flex; align-items:center; gap:14px; }
.auth__brand svg{ width:46px; height:46px; }
.auth__wordmark{ font-family:var(--f-display); font-weight:900; font-size:23px; letter-spacing:-.03em; font-variation-settings:"wdth" 112; }
.auth__wordmark b{ color: var(--charge); }
.auth__mid{ margin: auto 0; }
.auth__pitch{
  font-family: var(--f-display); font-weight: 900; font-size: clamp(30px, 3.6vw, 50px);
  letter-spacing:-.045em; line-height:1.02; font-variation-settings:"wdth" 88; max-width: 14ch; margin-top: 28px;
}
.auth__pitch em{ font-style:normal; color: var(--charge); }
.auth__blurb{ color: var(--ink-2); font-size: 14.5px; max-width: 46ch; margin-top: 16px; line-height:1.6; }
.auth__facts{ display:flex; gap: 34px; flex-wrap:wrap; margin-top: 30px; }
.auth__fact .v{ font-family:var(--f-display); font-weight:800; font-size:23px; font-variation-settings:"wdth" 86; }
.auth__fact .l{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-top:3px; }
.auth__foot{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-4); letter-spacing:.06em; }

.authcard{ width:100%; max-width: 392px; display:flex; flex-direction:column; gap:18px; }
.authcard h2{ font-size:21px; font-weight:800; letter-spacing:-.025em; }
.authcard .lede{ color: var(--ink-3); font-size:13px; margin-top:6px; line-height:1.55; }
.tabs{ display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:11px; background: rgba(15,22,36,.55); }
.tab{ flex:1; height:35px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-3);
      transition: background .3s, color .25s, box-shadow .3s; }
.tab:hover{ color: var(--ink-2); }
.tab.is-on{ background: rgba(25,227,245,.10); color:#d7fbff; box-shadow: inset 0 0 0 1px var(--charge-edge), 0 0 22px -10px var(--charge); }
.field{ display:flex; flex-direction:column; gap:7px; }
.field > label{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.field input{
  height:46px; padding:0 14px; border-radius:10px; border:1px solid var(--line);
  background: rgba(6,9,16,.85); color:var(--ink); font-family:var(--f-mono); font-size:14px;
  outline:none; width:100%; transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder{ color: var(--ink-4); }
.field input:focus{ border-color: rgba(25,227,245,.55); box-shadow: 0 0 0 3px rgba(25,227,245,.10); background: rgba(8,14,24,.95); }
.field .help{ font-family:var(--f-mono); font-size:10px; color:var(--ink-4); line-height:1.5; }
.field.bad input{ border-color: rgba(255,107,107,.6); box-shadow: 0 0 0 3px rgba(255,107,107,.10); animation: shake .34s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.formerr{ color: var(--loss); font-size:12px; font-family:var(--f-mono); min-height:16px; }

.keyout{
  border:1px solid rgba(25,227,245,.4); border-radius: var(--r-lg); padding: 18px;
  background: linear-gradient(160deg, rgba(25,227,245,.09), rgba(8,12,20,.7));
  box-shadow: 0 0 40px -20px var(--charge); text-align:center;
  animation: enter .6s cubic-bezier(.16,1,.3,1) both;
}
.keyout__k{
  font-family: var(--f-mono); font-weight:600; font-size: clamp(15px, 2.5vw, 19px);
  letter-spacing:.12em; color:#d7fbff; margin: 10px 0 4px; word-break: break-all;
  text-shadow: 0 0 18px rgba(25,227,245,.6);
}
.keyout__warn{ color: var(--warn); font-size:11.5px; line-height:1.55; margin-top:10px; }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--ink-2); cursor:pointer; line-height:1.5; }
.check input{ appearance:none; width:17px; height:17px; flex:none; margin-top:1px; border-radius:5px;
  border:1px solid var(--line-hot); background:rgba(6,9,16,.8); cursor:pointer; transition: all .25s; position:relative; }
.check input:checked{ background: var(--charge-ghost); border-color: var(--charge); box-shadow: 0 0 14px -4px var(--charge); }
.check input:checked::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:var(--charge); font-size:11px; font-weight:700; }
.btn--wide{ width:100%; height:47px; justify-content:center; font-size:14px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.linkbtn{ font-size:12.5px; color: var(--charge); text-align:center; width:100%; }
.linkbtn:hover{ text-decoration: underline; }

/* ═══════════════ SCAN ═══════════════ */
.scanwrap{ display:grid; grid-template-columns: minmax(0,1fr) 400px; gap:14px; align-items: start; }
.scanstage{
  position:relative; height: 532px; display:grid; place-items:center; overflow:hidden;
  border-radius: var(--r-xl); border:1px solid var(--line-hot);
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(25,227,245,.08), transparent 62%),
    linear-gradient(160deg, rgba(15,22,36,.9), rgba(6,9,16,.96));
  box-shadow: var(--shadow);
}
.scanstage__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(64% 64% at 50% 46%, #000, transparent 82%);
          mask-image: radial-gradient(64% 64% at 50% 46%, #000, transparent 82%);
}
.radar{
  position:absolute; left:50%; top:46%; width: 520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; opacity:0; transition: opacity .5s;
  background: conic-gradient(from 0deg, rgba(25,227,245,.30), rgba(25,227,245,.05) 26%, transparent 42%);
  -webkit-mask-image: radial-gradient(circle, #000 32%, transparent 72%);
          mask-image: radial-gradient(circle, #000 32%, transparent 72%);
}
.is-scanning .radar{ opacity:1; animation: spin360 2.1s linear infinite; }
.ring{
  position:absolute; left:50%; top:46%; border-radius:50%; border:1px solid rgba(25,227,245,.10);
  transform: translate(-50%,-50%);
}
.ring--a{ width:300px; height:300px; border-style:dashed; animation: spin360 34s linear infinite; }
.ring--b{ width:400px; height:400px; }
.ring--c{ width:500px; height:500px; border-color: rgba(25,227,245,.06); }

.chainnode{
  position:absolute; display:flex; align-items:center; gap:8px; padding: 7px 12px 7px 8px;
  border-radius: 999px; border:1px solid var(--line); background: rgba(10,15,25,.92);
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); white-space:nowrap;
  transform: translate(-50%,-50%); transition: all .4s cubic-bezier(.16,1.2,.3,1); z-index:4;
}
.chainnode i{ width:8px; height:8px; border-radius:2px; transition: box-shadow .4s, transform .4s; }
.chainnode .st{ font-size:9.5px; color: var(--ink-4); letter-spacing:.1em; }
.chainnode.is-live{ border-color: rgba(25,227,245,.55); color: var(--ink); background: rgba(15,26,40,.96);
  box-shadow: 0 0 28px -8px var(--charge); transform: translate(-50%,-50%) scale(1.07); }
.chainnode.is-live i{ transform: scale(1.4); }
.chainnode.is-live .st{ color: var(--charge); }
.chainnode.is-done{ border-color: rgba(47,224,160,.4); }
.chainnode.is-done .st{ color: var(--gain); }

.scanbtn{
  position:relative; z-index:6; width: 252px; height:252px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background: radial-gradient(58% 58% at 50% 38%, rgba(25,227,245,.16), rgba(9,14,24,.96) 72%);
  border:1px solid rgba(25,227,245,.42);
  box-shadow: 0 0 70px -26px var(--charge), inset 0 0 44px -20px var(--charge);
  transition: transform .32s cubic-bezier(.16,1.4,.3,1), box-shadow .32s, border-color .3s;
}
.scanbtn:hover{ transform: scale(1.035); box-shadow: 0 0 90px -22px var(--charge), inset 0 0 52px -16px var(--charge); }
.scanbtn:active{ transform: scale(.975); }
.scanbtn:disabled{ cursor:progress; }
.scanbtn__in{ display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.scanbtn__mag{ width: 96px; height:96px; animation: breathe 3.2s ease-in-out infinite; }
.scanbtn__t{
  font-family: var(--f-display); font-weight:900; font-size: 15px; letter-spacing:.03em;
  font-variation-settings:"wdth" 96; text-transform: uppercase; color:#e8fdff;
}
.scanbtn__s{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); }
.scanbtn__prog{ position:absolute; inset:-9px; transform: rotate(-90deg); pointer-events:none; }
.scanbtn__prog circle{ fill:none; stroke-linecap:round; }
.shock{
  position:absolute; left:50%; top:46%; width:252px; height:252px; margin:-126px 0 0 -126px;
  border-radius:50%; border:2px solid var(--charge); opacity:0; pointer-events:none; z-index:5;
  animation: shockwave 1s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes shockwave{ 0%{ transform:scale(.9); opacity:.9 } 100%{ transform:scale(2.6); opacity:0 } }
.scanstage__hud{
  position:absolute; left:0; right:0; bottom:0; padding: 13px 18px; z-index:7;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4);
  background: linear-gradient(0deg, rgba(5,7,13,.94), transparent);
}

.console{
  display:flex; flex-direction:column; height: 532px;
  border-radius: var(--r-lg); border:1px solid var(--line); overflow:hidden;
  background: linear-gradient(170deg, rgba(12,17,28,.92), rgba(6,9,16,.95));
}
.console__log{
  flex:1; min-height:0; overflow-y:auto; padding: 14px 16px; font-family: var(--f-mono); font-size: 11px;
  line-height: 1.75; color: var(--ink-3); scroll-behavior: smooth;
}
.logline{ animation: logIn .34s ease both; white-space: pre-wrap; word-break: break-word; }
@keyframes logIn{ from{ opacity:0; transform: translateX(-7px) } to{ opacity:1; transform:none } }
.logline.hd{ color: var(--charge); margin-top: 7px; }
.logline.hit{ color: var(--ink); }
.logline.hit b{ color: var(--gold); font-weight:600; }
.logline.ok{ color: var(--gain); }
.logline.sub{ color: var(--ink-4); }
.console__stats{ display:grid; grid-template-columns: 1fr 1fr; gap:1px; background: var(--line-soft); border-top:1px solid var(--line); }
.cstat{ background: rgba(10,15,25,.9); padding: 12px 14px; }
.cstat .l{ font-family:var(--f-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.cstat .v{ font-family:var(--f-display); font-weight:800; font-size:19px; margin-top:4px; font-variation-settings:"wdth" 84; font-variant-numeric:tabular-nums; }

.scanresult{ margin-top:14px; }
.scanresult[hidden]{ display:none !important; }
.hitrow{
  display:grid; grid-template-columns: 26px 1fr auto auto; gap:12px; align-items:center;
  padding: 10px 16px; border-bottom:1px solid var(--line-soft);
  animation: magnetIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes magnetIn{ from{ opacity:0; transform: translateX(26px) scale(.97) } to{ opacity:1; transform:none } }
.hitrow:last-child{ border-bottom:none; }

.nav__item.is-locked{ opacity:.42; }
.nav__item .lock{ margin-left:auto; width:12px; height:12px; opacity:.6; }

@media (max-width: 1080px){
  .auth{ grid-template-columns: 1fr; }
  .auth__l{ display:none; }
  .scanwrap{ grid-template-columns: 1fr; }
  .console{ height: 360px; }
}
@media (max-width: 820px){
  .scanstage{ height: 440px; }
  .scanbtn{ width: 200px; height:200px; }
  .scanbtn__prog{ display:none; }
  .shock{ width:200px;height:200px;margin:-100px 0 0 -100px }
  .ring--b, .ring--c{ display:none; }
  .chainnode{ font-size:10px; padding:5px 9px 5px 6px; }
  .chainnode[data-ch="eth"] { left:25% !important; top:19% !important; }
  .chainnode[data-ch="base"]{ left:50% !important; top:9%  !important; }
  .chainnode[data-ch="arb"] { left:75% !important; top:19% !important; }
  .chainnode[data-ch="sol"] { left:27% !important; top:76% !important; }
  .chainnode[data-ch="op"]  { left:73% !important; top:76% !important; }
  /* the rail turns into a bottom bar — items must share the row, not claim it */
  .nav__item{ width:auto; flex:1; }
  .toasts{ bottom: 80px; left:14px; right:14px; align-items:stretch; }
  .toast{ max-width:none; }
}

/* ═══════════════ OPERATOR CONSOLE ═══════════════
   Privileged mode wears the north-pole crimson so it can never be
   mistaken for the user's field, which is all cyan.                */
.op{ position:fixed; inset:0; z-index:150; overflow-y:auto;
     background: linear-gradient(180deg, #090509, #05070d 40%); animation: authin .5s ease both; }
.op[hidden]{ display:none !important; }
.op__top{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  gap:14px; height:60px; padding:0 22px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,77,109,.22); background: rgba(11,6,11,.9); backdrop-filter: blur(14px);
}
.op__mark{ display:flex; align-items:center; gap:12px; }
.op__mark svg{ width:30px; height:30px; color: var(--pole-n); flex:none; }
.op__t{ font-family:var(--f-display); font-weight:800; font-size:15px; letter-spacing:-.02em; }
.op__s{ font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4); }
.op__body{ padding: 22px 22px 70px; }
.op__eyebrow{ color: var(--pole-n); }
.op__eyebrow::before{ background: var(--pole-n); box-shadow: 0 0 8px var(--pole-n); }
.pill--root{ color:var(--pole-n); background:rgba(255,77,109,.10); border-color:rgba(255,77,109,.32); }
.pill--issued{ color:var(--charge); background:var(--charge-ghost); border-color:var(--charge-edge); }
.pill--live{ color:var(--gain); background:rgba(47,224,160,.09); border-color:rgba(47,224,160,.26); }
.pill--susp{ color:var(--warn); background:rgba(255,176,32,.09); border-color:rgba(255,176,32,.26); }
.pill--revoked{ color:var(--ink-4); background:rgba(255,255,255,.02); border-color:var(--line); }
.btn--root{ border-color:rgba(255,77,109,.5); background:rgba(255,77,109,.13); color:#ffd7de; }
.btn--root:hover{ border-color:rgba(255,77,109,.8); background:rgba(255,77,109,.24); color:#fff; }
.opx td{ padding:0 !important; background: rgba(255,77,109,.035); }
.opx__in{ padding:17px 18px 19px; display:grid; grid-template-columns: repeat(auto-fit, minmax(228px,1fr)); gap:20px;
          border-bottom:1px solid var(--line); }
.minilbl{ font-family:var(--f-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-bottom:8px; }
.codecell{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--charge); cursor:copy; }
.codecell:hover{ text-decoration: underline; }
.op .field input{ height:40px; font-size:13px; }
.rowbtns{ display:flex; gap:7px; flex-wrap:wrap; }
.rowbtns .btn{ height:30px; padding:0 11px; font-size:12px; }
.demohint{
  font-family:var(--f-mono); font-size:10px; color:var(--ink-4); text-align:center; line-height:1.7;
  border-top:1px dashed var(--line); padding-top:13px;
}
.demohint b{ color: var(--charge); font-weight:600; letter-spacing:.05em; }
.demohint em{ font-style:normal; color: var(--pole-n); font-weight:600; letter-spacing:.05em; }
@media (max-width: 820px){ .op__body{ padding: 16px 14px 60px; } .op__top{ height:auto; padding:12px 14px; } }

/* ═══════════════ TRADE ═══════════════ */
.swapwrap{ display:grid; grid-template-columns: minmax(0,1fr) 380px; gap:14px; align-items:start; }
.swapstage{
  position:relative; min-height: 330px; display:grid; place-items:center; overflow:hidden;
  border-radius: var(--r-lg); border:1px solid var(--line-soft);
  background: radial-gradient(60% 70% at 50% 50%, rgba(25,227,245,.07), transparent 70%);
}
.swapcore{ position:relative; z-index:3; display:flex; align-items:center; gap:26px; }
.swapcoin{
  width:96px; height:96px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:1px solid var(--line-hot); background: rgba(10,15,25,.9);
  transition: transform .4s cubic-bezier(.16,1.3,.3,1), box-shadow .4s, opacity .3s;
}
.swapcoin__s{ font-family:var(--f-display); font-weight:900; font-size:17px; letter-spacing:-.02em; }
.swapcoin__v{ font-family:var(--f-mono); font-size:9.5px; color:var(--ink-4); margin-top:2px; }
.swapcore.is-live .swapcoin--from{ transform: scale(.82); opacity:.45; }
.swapcore.is-live .swapcoin--to{ transform: scale(1.14); }
.swaparrow{ color: var(--ink-4); display:grid; place-items:center; transition: color .3s; }
.swaparrow svg{ width:26px; height:26px; }
.swapcore.is-live .swaparrow{ color: var(--charge); }
.swapdot{
  position:absolute; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:4;
  will-change: transform, opacity;
}
.coinrow{
  display:grid; grid-template-columns: 34px 1fr auto auto; gap:13px; align-items:center;
  padding: 12px 16px; border-bottom:1px solid var(--line-soft); transition: background .2s;
}
.coinrow:last-child{ border-bottom:none; }
.coinrow:hover{ background: rgba(255,255,255,.02); }
.coinrow__ic{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:10px; color:#04070d;
}
.coinrow__n{ font-size:13px; font-weight:600; }
.coinrow__s{ font-family:var(--f-mono); font-size:10px; color:var(--ink-4); }
.coinpick{
  display:flex; align-items:center; gap:9px; width:100%; padding:11px 13px; border-radius:var(--r-md);
  border:1px solid var(--line); background: rgba(15,22,36,.5); text-align:left;
  transition: all .24s cubic-bezier(.16,1.2,.3,1);
}
.coinpick:hover{ border-color: var(--line-hot); transform: translateX(3px); }
.coinpick.is-on{ border-color: rgba(25,227,245,.5); background: rgba(25,227,245,.07); box-shadow: 0 0 24px -12px var(--charge); }
.coinpick__b{ margin-left:auto; text-align:right; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); }

/* ═══════════════ WITHDRAW ═══════════════ */
.notice{
  display:grid; grid-template-columns: 38px 1fr; gap:15px; align-items:start;
  padding: 18px 20px; border-radius: var(--r-lg);
  border:1px solid rgba(255,176,32,.34); background: rgba(255,176,32,.06);
}
.notice__ic{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,176,32,.12); color: var(--warn);
}
.notice__ic svg{ width:19px; height:19px; }
.notice__t{ font-size:15px; font-weight:700; font-family:var(--f-display); letter-spacing:-.015em; }
.notice__d{ font-size:13px; color: var(--ink-2); margin-top:5px; line-height:1.6; max-width:62ch; }
.btn[disabled], .btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn--off{ border-color: var(--line); background: rgba(255,255,255,.02); color: var(--ink-4); }
.btn--off:hover{ border-color: var(--line); background: rgba(255,255,255,.02); color: var(--ink-4); transform:none; }

@media (max-width: 1080px){ .swapwrap{ grid-template-columns:1fr; } }
@media (max-width: 560px){
  .swapcore{ gap:12px; }
  .swapcoin{ width:74px; height:74px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #field{ display:none; }
}