/* CYBERBANK dashboard. Dark cyber terminal, monospace only, corner bracketed panels. */

:root{
  --bg:#050A12;
  --bg2:#0A1220;
  --panel:#0C1626;
  --line:rgba(64,196,255,.16);
  --line-soft:rgba(64,196,255,.08);
  --cyan:#38D8FF;
  --cyan-dim:#1B7FA8;
  --text:#E6F4FF;
  --muted:#7FA0BC;
  --faint:#4C6B85;
  --amber:#F0B429;
  --green:#3FD98A;
  --red:#FF6B5A;

  --mono:'JetBrains Mono', ui-monospace, 'DM Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --wrap:1240px;
  --pad:clamp(16px, 4vw, 40px);
  --gap:clamp(12px, 1.6vw, 20px);
  --hdr-h:64px;
  --bracket:12px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{
  /* clip, not hidden: hidden on the root turns the html element into a scroll container
     and kills position:sticky on the header. */
  overflow-x:clip;
  scroll-behavior:smooth;
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Fixed ground: faint grid plus one cyan bloom over the top of the page. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(64,196,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64,196,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(130% 85% at 50% 0%, #000 24%, transparent 82%);
  mask-image:radial-gradient(130% 85% at 50% 0%, #000 24%, transparent 82%);
}
body::after{
  content:'';
  position:fixed;
  z-index:0;
  pointer-events:none;
  top:-46vmax;
  left:50%;
  width:92vmax;
  height:92vmax;
  transform:translateX(-50%);
  background:radial-gradient(circle closest-side, rgba(56,216,255,.20), rgba(56,216,255,.06) 45%, transparent 72%);
}

.hdr,main,.foot{position:relative;z-index:1}

h1,h2,h3,p,dl,dd,dt,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* Grid items default to min-width:auto, which lets one long unbreakable string
   widen a whole column. Every grid in this page opts out. */
.hero-grid > *,
.strip-grid > *,
.cycle-grid > *,
.rail > *,
.foot-in > *,
.cyc-top > *,
.rail-specs > *,
.ledger-foot > *,
.mini > *{min-width:0}

.num,.stat-v,.v,.tbl td,.tbl th.num,.mini dd,.sr-amt{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* Off-screen by clip rather than a negative offset: a -9999px box still counts as
   layout overflow on the left edge. */
.skip{
  position:absolute;top:0;left:0;z-index:100;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--cyan);color:#02131C;padding:10px 16px;font-size:.72rem;letter-spacing:.12em;font-weight:700;
}
.skip:focus-visible{width:auto;height:auto;clip-path:none;top:8px;left:8px}

/* ---------- corner brackets ---------- */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
}
.panel::before{
  content:'';
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    linear-gradient(var(--cyan) 0 0) 0 0 / 1px var(--bracket) no-repeat,
    linear-gradient(var(--cyan) 0 0) 0 0 / var(--bracket) 1px no-repeat,
    linear-gradient(var(--cyan) 0 0) 100% 0 / 1px var(--bracket) no-repeat,
    linear-gradient(var(--cyan) 0 0) 100% 0 / var(--bracket) 1px no-repeat,
    linear-gradient(var(--cyan) 0 0) 0 100% / 1px var(--bracket) no-repeat,
    linear-gradient(var(--cyan) 0 0) 0 100% / var(--bracket) 1px no-repeat,
    linear-gradient(var(--cyan) 0 0) 100% 100% / 1px var(--bracket) no-repeat,
    linear-gradient(var(--cyan) 0 0) 100% 100% / var(--bracket) 1px no-repeat;
  opacity:.72;
}

.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(56,216,255,.05), transparent);
}
.panel-title{font-size:.66rem;font-weight:700;letter-spacing:.18em;color:var(--cyan)}
.panel-tag{font-size:.6rem;letter-spacing:.14em;color:var(--faint);white-space:nowrap}

.eyebrow{
  font-size:.62rem;font-weight:700;letter-spacing:.26em;color:var(--cyan);
  margin-bottom:14px;
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(5,10,18,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.hdr-in{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:10px var(--pad);
  min-height:var(--hdr-h);
  display:flex;align-items:center;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-mark{
  position:relative;display:grid;place-items:center;
  width:36px;height:36px;flex:0 0 36px;
  border:1px solid var(--line);background:var(--bg2);
}
.brand-mark .mark-glyph{width:28px;height:28px}
.brand-name{font-size:.94rem;font-weight:800;letter-spacing:-.06em}
.brand-name b{color:var(--cyan);font-weight:800}
.brand:hover .brand-mark{border-color:var(--cyan)}

.nav{
  display:flex;align-items:center;gap:2px;
  margin-inline:auto;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  padding:8px 12px;
  font-size:.64rem;font-weight:500;letter-spacing:.16em;color:var(--muted);
  white-space:nowrap;
  border:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav a:hover{color:var(--text);border-color:var(--line)}
.nav a:active{color:var(--cyan)}
.nav a[data-active='true']{color:var(--cyan);border-color:var(--line);background:rgba(56,216,255,.06)}

/* ---------- status chip ---------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:7px 12px;
  border:1px solid var(--tone, var(--cyan-dim));
  background:rgba(10,18,32,.7);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;
  color:var(--tone, var(--cyan));
}
.chip-dot{
  width:7px;height:7px;flex:0 0 7px;
  background:var(--tone, var(--cyan));
  box-shadow:0 0 8px var(--tone, var(--cyan));
}
.chip[data-state='linking']{--tone:var(--cyan-dim)}
.chip[data-state='live']{--tone:var(--green)}
.chip[data-state='paused']{--tone:var(--muted)}
.chip[data-state='offline']{--tone:var(--amber)}
.chip[data-state='lost']{--tone:var(--red)}
.chip[data-state='live'] .chip-dot,
.chip[data-state='linking'] .chip-dot{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

/* ---------- skeleton ---------- */
.sk{
  position:relative;display:inline-block;overflow:hidden;
  width:6.5ch;height:.8em;vertical-align:-.08em;
  background:rgba(64,196,255,.1);
}
.sk-xs{width:4ch}
.sk-sm{width:9ch;height:.7em}
.sk-lg{width:7ch;height:.86em}
.sk::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(56,216,255,.3), transparent);
  transform:translateX(-100%);
  animation:sweep 1.5s linear infinite;
}
@keyframes sweep{to{transform:translateX(100%)}}

/* ---------- hero ---------- */
.hero{padding-top:clamp(40px, 7vw, 84px);padding-bottom:clamp(28px, 4vw, 48px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px, 3vw, 48px);align-items:start}
.hero-title{
  font-size:clamp(3.2rem, 9vw, 7.5rem);
  font-weight:800;
  line-height:.82;
  letter-spacing:-.09em;
  display:flex;flex-direction:column;
  margin-bottom:22px;
}
.hero-title .l1{color:var(--text)}
.hero-title .l2{
  color:var(--cyan);
  text-shadow:
    0 0 2px rgba(56,216,255,.7),
    0 0 14px rgba(56,216,255,.45),
    0 0 38px rgba(56,216,255,.28),
    0 0 90px rgba(56,216,255,.16);
}
.lede{max-width:56ch;color:var(--muted);font-size:.84rem;line-height:1.8}

.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 22px;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;
  border:1px solid var(--cyan);
  transition:transform .16s ease, opacity .16s ease, background-color .16s ease, color .16s ease;
}
.btn-a{background:var(--cyan);color:#02131C}
.btn-a:hover{background:#6FE4FF}
.btn-b{background:transparent;color:var(--cyan);border-color:var(--line)}
.btn-b:hover{border-color:var(--cyan);background:rgba(56,216,255,.08)}
.btn:active{transform:translateY(1px)}

.ca{
  display:flex;align-items:center;gap:10px;
  margin-top:24px;padding:10px 12px;
  border:1px solid var(--line);background:rgba(10,18,32,.6);
  max-width:100%;
}
.ca-label{font-size:.58rem;letter-spacing:.18em;color:var(--faint);flex:0 0 auto}
/* basis 0, not auto: an auto basis lets a 44 character mint set the flex container's
   min-content size, which then pushes the whole hero grid wider than the viewport. */
.ca-val{
  flex:1 1 0%;min-width:0;
  font-size:.74rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ca-copy{
  flex:0 0 auto;
  padding:7px 12px;
  background:transparent;border:1px solid var(--line);
  color:var(--cyan);font-size:.6rem;font-weight:700;letter-spacing:.14em;
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.ca-copy:hover:not(:disabled){border-color:var(--cyan);background:rgba(56,216,255,.1)}
.ca-copy:active:not(:disabled){transform:translateY(1px)}
.ca-copy:disabled{color:var(--faint);cursor:not-allowed}
.ca-copy[data-copied='yes']{color:var(--green);border-color:var(--green)}
.ca-copy[data-copied='no']{color:var(--red);border-color:var(--red)}

.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.trust li{
  padding:6px 10px;
  border:1px solid var(--line-soft);
  background:rgba(56,216,255,.03);
  font-size:.56rem;letter-spacing:.14em;color:var(--faint);
}

/* telemetry panel */
.telemetry{padding-bottom:14px}
.hero-frame{
  position:relative;
  margin:14px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 40%, rgba(56,216,255,.12), transparent 62%),
    var(--bg2);
  aspect-ratio:1/.82;
  display:grid;place-items:center;
  overflow:hidden;
}
.hero-art,.hero-art-fb{width:72%;max-width:300px;height:auto}
.hero-art-fb svg{width:100%;height:auto}
.frame-scan{
  position:absolute;left:0;right:0;top:0;height:26%;
  background:linear-gradient(180deg, transparent, rgba(56,216,255,.14), transparent);
  animation:scan 5.5s linear infinite;
  pointer-events:none;
}
@keyframes scan{0%{transform:translateY(-120%)}100%{transform:translateY(420%)}}
.frame-tick{
  position:absolute;left:8px;bottom:6px;
  font-size:.52rem;letter-spacing:.2em;color:var(--faint);
}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:0 14px}
.mini-cell{background:var(--panel);padding:12px 10px}
.mini dt{font-size:.53rem;letter-spacing:.16em;color:var(--faint);margin-bottom:6px}
.mini dd{font-size:.86rem;font-weight:700;color:var(--text);letter-spacing:-.02em}
.mini dd[data-tone='green']{color:var(--green)}
.mini dd[data-tone='amber']{color:var(--amber)}
.mini dd[data-tone='muted']{color:var(--muted)}
.mini dd[data-tone='cyan']{color:var(--cyan)}

/* ---------- stat strip ---------- */
.strip{padding-block:clamp(18px, 2.4vw, 30px)}
.strip-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:var(--gap)}
.stat{padding:16px 16px 15px}
.stat-k{font-size:.55rem;letter-spacing:.18em;color:var(--faint);margin-bottom:10px}
.stat-v{
  font-size:clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight:700;letter-spacing:-.045em;line-height:1.1;
  color:var(--text);
  overflow-wrap:anywhere;
}
.stat-v[data-tone='cyan']{color:var(--cyan)}
.stat-v[data-tone='green']{color:var(--green)}
.stat-v[data-tone='amber']{color:var(--amber)}
.stat-v[data-tone='muted']{color:var(--muted)}
.stat-sub{margin-top:8px;font-size:.6rem;letter-spacing:.06em;color:var(--faint);overflow-wrap:anywhere}
.stat-sub a{color:var(--muted);border-bottom:1px solid var(--line)}
.stat-sub a:hover{color:var(--cyan);border-color:var(--cyan)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(34px, 5vw, 68px);scroll-margin-top:calc(var(--hdr-h) + 18px)}
.sec-head{margin-bottom:22px}
.sec-title{font-size:clamp(1.5rem, 3.2vw, 2.1rem);font-weight:700;letter-spacing:-.055em;line-height:1.05}
.sec-sub{margin-top:10px;max-width:70ch;font-size:.74rem;color:var(--muted);line-height:1.75}

/* ---------- 01 cycle ---------- */
.cycle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--gap);align-items:start}
.cyc{padding:18px}
.cyc-top{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px,1fr));gap:14px;margin-bottom:20px}
.kv{display:flex;flex-direction:column;gap:6px;min-width:0}
.kv .k{font-size:.53rem;letter-spacing:.18em;color:var(--faint)}
.kv .v{font-size:.82rem;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.kv .v[data-tone='green']{color:var(--green)}
.kv .v[data-tone='amber']{color:var(--amber)}
.kv .v[data-tone='red']{color:var(--red)}
.kv .v[data-tone='cyan']{color:var(--cyan)}
.kv .v[data-tone='muted']{color:var(--muted)}

.stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.step{
  position:relative;
  padding:11px 10px;
  border:1px solid var(--line-soft);
  background:rgba(10,18,32,.5);
  display:flex;flex-direction:column;gap:7px;
  transition:border-color .25s ease, background-color .25s ease;
}
.step-n{font-size:.52rem;letter-spacing:.2em;color:var(--faint)}
.step-l{font-size:.58rem;font-weight:700;letter-spacing:.09em;color:var(--faint);line-height:1.35}
.step[data-state='done']{border-color:rgba(63,217,138,.4)}
.step[data-state='done'] .step-n,.step[data-state='done'] .step-l{color:var(--green)}
.step[data-state='active']{border-color:var(--cyan);background:rgba(56,216,255,.09)}
.step[data-state='active'] .step-n{color:var(--cyan)}
.step[data-state='active'] .step-l{color:var(--text)}
.step[data-state='active']::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cyan);
  animation:pulse 1.4s ease-in-out infinite;
}
.step[data-state='halt']{border-color:var(--amber);background:rgba(240,180,41,.07)}
.step[data-state='halt'] .step-n,.step[data-state='halt'] .step-l{color:var(--amber)}
.step[data-state='fail']{border-color:var(--red);background:rgba(255,107,90,.07)}
.step[data-state='fail'] .step-n,.step[data-state='fail'] .step-l{color:var(--red)}

.bar{margin-top:18px;height:3px;background:rgba(64,196,255,.12);overflow:hidden}
.bar-fill{
  display:block;width:100%;height:100%;
  background:linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.cyc-note{margin-top:12px;font-size:.62rem;color:var(--faint);line-height:1.7}

.console{display:flex;flex-direction:column;min-width:0}
.con-body{
  height:clamp(240px, 34vh, 360px);
  overflow-y:auto;overflow-x:hidden;
  padding:12px 14px;
  background:#060D18;
  font-size:.7rem;line-height:1.7;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan-dim) transparent;
}
.con-body::-webkit-scrollbar{width:8px}
.con-body::-webkit-scrollbar-thumb{background:rgba(56,216,255,.28)}
.con-line{
  display:grid;grid-template-columns:12px minmax(0,1fr);gap:8px;
  color:var(--muted);
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.con-line::before{content:'>';color:var(--cyan-dim)}
.con-line:last-child .con-txt{color:var(--text)}
.con-empty{color:var(--faint);font-size:.68rem}

/* ---------- 02 rotation ---------- */
.rail{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));gap:var(--gap)}
.rail-card{padding:0;display:flex;flex-direction:column}
.rail-body{padding:18px}
.rail-sym{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rail-sym .sym{font-size:clamp(1.6rem, 4vw, 2.3rem);font-weight:800;letter-spacing:-.07em;color:var(--cyan)}
.rail-sym .role{font-size:.55rem;letter-spacing:.2em;color:var(--faint)}
.rail-name{margin-top:8px;font-size:.66rem;color:var(--muted);letter-spacing:.02em;overflow-wrap:anywhere}
.rail-mint{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;padding:8px 10px;
  border:1px solid var(--line-soft);background:rgba(5,10,18,.6);
}
.rail-mint .mint{flex:1 1 0%;min-width:0;font-size:.66rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-mint a.mint:hover{color:var(--cyan)}
/* Fixed 2 or 3 tracks rather than auto-fit: both divide the six spec cells evenly,
   so the grid never ends on a half empty row. */
.rail-specs{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:1px;background:var(--line-soft);margin-top:16px}
@media (min-width:880px){.rail-specs{grid-template-columns:repeat(3, minmax(0,1fr))}}
.spec{background:var(--panel);padding:11px 12px}
.spec dt{font-size:.52rem;letter-spacing:.16em;color:var(--faint);margin-bottom:5px}
.spec dd{font-size:.76rem;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}

/* ---------- tables ---------- */
.table-panel{padding:0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--cyan-dim) transparent}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(56,216,255,.28)}
.tbl{width:100%;min-width:720px;border-collapse:collapse}
.tbl th{
  padding:11px 14px;text-align:left;
  font-size:.55rem;font-weight:700;letter-spacing:.16em;color:var(--faint);
  border-bottom:1px solid var(--line);white-space:nowrap;
  background:rgba(5,10,18,.5);
}
.tbl th.num,.tbl td.num{text-align:right}
.tbl td{
  padding:12px 14px;
  font-size:.74rem;color:var(--text);
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background-color .18s ease}
.tbl tbody tr:hover{background:rgba(56,216,255,.04)}
.addr{color:var(--muted);border-bottom:1px solid var(--line-soft)}
.addr:hover{color:var(--cyan);border-color:var(--cyan)}
.dim{color:var(--faint)}
.sym-tag{color:var(--faint);font-size:.66rem;margin-left:4px}

/* ---------- token identity ---------- */
/* The tile is sized and framed before anything loads into it, so the monogram fallback
   and the fetched art occupy the identical box and the row never reflows. */
.tok{display:flex;align-items:center;gap:9px;min-width:0}
.tok-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tok-name{font-size:.58rem;letter-spacing:.04em;color:var(--faint);max-width:20ch;overflow:hidden;text-overflow:ellipsis}
.tok-av{
  position:relative;display:grid;place-items:center;overflow:hidden;
  width:24px;height:24px;flex:0 0 24px;
  border:1px solid var(--line);background:var(--bg2);
}
.tok-img{width:100%;height:100%;object-fit:cover}
.tok-mono{font-size:.5rem;font-weight:700;letter-spacing:.02em;color:var(--cyan-dim)}
.tok-av-lg{width:46px;height:46px;flex:0 0 46px;align-self:center}
.tok-av-lg .tok-mono{font-size:.86rem}

/* ---------- ledger totals ---------- */
.ledger-foot{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line-soft);
  border-top:1px solid var(--line);
}
.ledger-cell{background:var(--panel);padding:13px 14px}
.ledger-foot dt{font-size:.52rem;letter-spacing:.16em;color:var(--faint);margin-bottom:5px}
.ledger-foot dd{font-size:.8rem;font-weight:700;letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere}

/* ---------- confirmed against published ---------- */
/* Two numbers, one cell: what confirmed, out of what was attempted. The caption only
   appears when they differ, so a fully confirmed round stays a single clean figure. */
.txc{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px}
.txc-note{font-size:.5rem;letter-spacing:.14em;color:var(--faint);white-space:nowrap}
.txc[data-partial='yes'] .txc-v{color:var(--amber)}
.txc[data-partial='yes'] a.txc-v{border-bottom-color:var(--amber)}
.ledger-foot .txc{align-items:flex-start}

.tag{
  display:inline-block;padding:3px 8px;
  font-size:.55rem;font-weight:700;letter-spacing:.12em;
  border:1px solid currentColor;
}
.tag[data-tone='good']{color:var(--green)}
.tag[data-tone='warn']{color:var(--amber)}
.tag[data-tone='bad']{color:var(--red)}
.tag[data-tone='live']{color:var(--cyan)}
.tag[data-tone='idle']{color:var(--faint)}
.reason{display:block;margin-top:6px;font-size:.58rem;color:var(--faint);white-space:normal;max-width:34ch;line-height:1.5}

.empty-row td{padding:26px 14px;text-align:center;color:var(--faint);font-size:.68rem;letter-spacing:.08em;white-space:normal}

/* ---------- 04 stream ---------- */
.stream{max-height:min(70vh, 620px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cyan-dim) transparent}
.stream::-webkit-scrollbar{width:8px}
.stream::-webkit-scrollbar-thumb{background:rgba(56,216,255,.28)}
.stream-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 124px 74px;
  gap:14px;align-items:center;
  /* 13px of padding behind a 3px accent keeps every row's text on the same left edge
     whatever state it is in. */
  padding:13px 16px 13px 13px;
  border-left:3px solid var(--line);
  border-bottom:1px solid var(--line-soft);
  transition:background-color .18s ease;
}
.stream-row:last-child{border-bottom:0}
a.stream-row:hover{background:rgba(56,216,255,.06)}
a.stream-row:hover .sr-tx{color:var(--cyan)}
.sr-main{min-width:0;display:flex;flex-direction:column;gap:4px}
.sr-wallet{font-size:.76rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-meta{font-size:.56rem;letter-spacing:.1em;color:var(--faint)}
.sr-amt{min-width:0;font-size:.78rem;font-weight:700;letter-spacing:-.02em;color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-status{justify-self:start;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sr-note{font-size:.5rem;letter-spacing:.08em;color:var(--faint);line-height:1.3;white-space:normal}
.sr-tx{font-size:.58rem;letter-spacing:.1em;color:var(--faint);justify-self:end;white-space:nowrap;transition:color .18s ease}

/* Four outcomes, four treatments. The accent, the wash and the amount colour all move
   together so the state is readable from the edge of the row without reading the tag:
   an unconfirmed payout must never be mistakable for one that landed. */
.stream-row[data-state='good']{border-left-color:var(--green)}
.stream-row[data-state='wait']{border-left-color:var(--amber);background:rgba(240,180,41,.05)}
.stream-row[data-state='wait'] .sr-amt{color:var(--amber)}
.stream-row[data-state='bad']{border-left-color:var(--red);background:rgba(255,107,90,.045)}
.stream-row[data-state='bad'] .sr-amt{color:var(--faint);text-decoration:line-through}
.stream-row[data-state='sim']{border-left-color:var(--cyan-dim)}
.stream-row[data-state='sim'] .sr-amt{color:var(--muted)}
.stream-row[data-state='idle']{border-left-color:var(--line)}
.stream-empty{padding:28px 16px;text-align:center;color:var(--faint);font-size:.68rem;letter-spacing:.08em}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:rgba(8,14,24,.7);padding-block:32px;margin-top:clamp(30px,5vw,60px)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:24px;align-items:start}
.foot-line{margin-top:10px;max-width:52ch;font-size:.64rem;color:var(--faint);line-height:1.8}
.foot-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.foot-meta dt{font-size:.52rem;letter-spacing:.16em;color:var(--faint);margin-bottom:5px}
.foot-meta dd{font-size:.7rem;color:var(--muted);overflow-wrap:anywhere}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px}
.foot-nav a{font-size:.58rem;letter-spacing:.16em;color:var(--muted);border-bottom:1px solid var(--line)}
.foot-nav a:hover{color:var(--cyan);border-color:var(--cyan)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr}
  .telemetry{max-width:520px}
  .cycle-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hdr-in{flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:8px}
  .nav{order:3;width:100%;margin-inline:0;padding-bottom:2px}
  .nav a{padding:7px 10px}
  .chip{margin-left:auto}
  .sec{scroll-margin-top:112px}
}
@media (max-width:720px){
  .stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:last-child{grid-column:1 / -1}
  .foot-in{grid-template-columns:1fr}
  .stream-row{
    grid-template-columns:minmax(0,1fr) auto;
    row-gap:8px;column-gap:10px;
  }
  .sr-main{grid-column:1;grid-row:1}
  .sr-amt{grid-column:2;grid-row:1;text-align:right}
  .sr-status{grid-column:1;grid-row:2}
  .sr-tx{grid-column:2;grid-row:2}
}
@media (max-width:520px){
  body{font-size:14px}
  /* All five nav labels fit a 390 viewport at this tracking. Below that the
     strip scrolls rather than clipping a label in half. */
  .nav a{padding:7px 8px;letter-spacing:.11em}
  .strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust li{font-size:.53rem}
  .hero-art,.hero-art-fb{width:80%}
  .mini{grid-template-columns:1fr;margin-inline:14px}
  /* Three cells no longer fit on one row here, and auto-fit would leave a ragged
     half filled second row rather than a clean stack. */
  .ledger-foot{grid-template-columns:1fr}
  .telemetry{max-width:none}
}
@media (max-width:390px){
  :root{--pad:14px}
  .brand-name{font-size:.86rem}
  .cta-row .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .frame-scan{display:none}
}