/* MIRCO Studio — canonical frontend (studio-canonical-v1).
   Design system: MIRCOCHAIN V3.3 "Astral Infrastructure". Dark-first, excellent light.
   Tokens below are the authoritative baseline from design/DESIGN_TOKENS.css, inlined so this
   stylesheet is self-contained. Data first, glow second: no glow around body text or numbers. */

:root {
  --radius-control: 10px; --radius-card: 14px; --radius-panel: 18px; --radius-pill: 999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --fast:140ms; --normal:200ms; --slow:320ms; --ease:cubic-bezier(.22,.61,.36,1);
  --blue:#1677ff; --cyan:#16d9ff; --violet:#7447ff; --root:#f2b84b;
  --success:#2ed88f; --warning:#f5b942; --danger:#ff5d73;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --maxw: 1180px;
}

:root, :root[data-theme="night"] {
  color-scheme: dark;
  --bg-0:#050814; --bg-1:#070b17; --surface-1:#0a1020; --surface-2:#0d1529; --surface-3:#111b33;
  --glass: rgba(13,21,41,.72);
  --border: rgba(119,160,255,.16); --border-strong: rgba(119,160,255,.30);
  --text-1:#f4f7ff; --text-2:#b6c0d6; --text-3:#78859f;
  --primary-gradient: linear-gradient(135deg,#1688ff 0%,#6847ff 100%);
  --atmosphere:
    radial-gradient(circle at 16% -8%, rgba(36,110,255,.16), transparent 38%),
    radial-gradient(circle at 92% 0%, rgba(112,65,255,.12), transparent 34%),
    radial-gradient(circle at 60% 120%, rgba(14,208,255,.05), transparent 46%);
  --shadow-card: 0 18px 50px rgba(0,0,0,.28); --shadow-pop: 0 24px 70px rgba(0,0,0,.45);
  --glow-blue: 0 0 32px rgba(22,119,255,.18);
  --ok-bg: rgba(46,216,143,.12); --ok-bd: rgba(46,216,143,.34);
  --warn-bg: rgba(245,185,66,.12); --warn-bd: rgba(245,185,66,.34);
  --bad-bg: rgba(255,93,115,.12); --bad-bd: rgba(255,93,115,.36);
  --info-bg: rgba(22,119,255,.10); --info-bd: rgba(22,119,255,.30);
  --root-bg: rgba(242,184,75,.12); --root-bd: rgba(242,184,75,.34);
}
:root[data-theme="day"] {
  color-scheme: light;
  --bg-0:#eef3fb; --bg-1:#e9eff8; --surface-1:#ffffff; --surface-2:#f7faff; --surface-3:#eef4ff;
  --glass: rgba(255,255,255,.80);
  --border: rgba(39,84,166,.16); --border-strong: rgba(39,84,166,.30);
  --text-1:#0f1728; --text-2:#41506a; --text-3:#6a7891;
  --primary-gradient: linear-gradient(135deg,#1677ff 0%,#5f63ff 100%);
  --atmosphere:
    radial-gradient(circle at 16% -8%, rgba(36,110,255,.10), transparent 38%),
    radial-gradient(circle at 92% 0%, rgba(112,65,255,.07), transparent 34%),
    radial-gradient(circle at 60% 120%, rgba(14,208,255,.05), transparent 46%);
  --shadow-card: 0 10px 32px rgba(13,33,71,.08); --shadow-pop: 0 20px 48px rgba(13,33,71,.14);
  --glow-blue: 0 0 24px rgba(22,119,255,.10);
  --ok-bg: rgba(29,170,112,.12); --ok-bd: rgba(29,170,112,.32);
  --warn-bg: rgba(193,138,20,.12); --warn-bd: rgba(193,138,20,.34);
  --bad-bg: rgba(214,45,74,.10); --bad-bd: rgba(214,45,74,.30);
  --info-bg: rgba(22,119,255,.08); --info-bd: rgba(22,119,255,.26);
  --root-bg: rgba(176,122,10,.12); --root-bd: rgba(176,122,10,.30);
}

* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body {
  font-family: var(--font); color: var(--text-1); background: var(--bg-0);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-size: 14px; line-height: 1.5;
}
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: var(--atmosphere); opacity:.9;
}
h1,h2,h3,h4 { margin:0; font-weight:700; letter-spacing:-.012em; color:var(--text-1); line-height:1.2; }
h1 { font-size:30px; } h2 { font-size:20px; letter-spacing:-.01em; } h3 { font-size:15px; font-weight:600; }
p { margin:0; } a { color: inherit; }
button { font-family: inherit; }
.mono { font-family: var(--mono); font-feature-settings:"zero" 1; }
.tnum { font-variant-numeric: tabular-nums; }

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

/* ----------------------------------------------------------------- boot --- */
.boot { position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; color:var(--text-3); font-size:13px; }
.boot-mark { width:40px; height:40px; color:var(--text-1); animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 0%,100%{ opacity:.5;} 50%{ opacity:1;} }

/* --------------------------------------------------------------- shell --- */
.app { position:relative; z-index:1; min-height:100%; }
.shell { display:grid; grid-template-columns: 248px 1fr; min-height:100vh; }
.rail {
  position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column;
  gap:var(--s5); padding:var(--s5) var(--s4); border-right:1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-1), var(--bg-1));
}
.brand { display:flex; align-items:center; padding:4px var(--s1); }
.brand-lockup { display:inline-flex; align-items:center; gap:9px; color:var(--text-1); }
.brand-symbol { height:22px; width:22px; display:block; flex:none; }
.brand-word { height:13px; width:auto; display:block; }
.brand-product { font-size:14px; font-weight:500; color:var(--text-3); letter-spacing:.005em; margin-left:1px;
  padding-left:10px; border-left:1px solid var(--border); line-height:1; }
.rail-create { width:100%; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav-group-label { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
  padding:var(--s3) var(--s3) var(--s2); }
.nav-item { display:flex; align-items:center; gap:11px; padding:9px var(--s3); border-radius:var(--radius-control);
  color:var(--text-2); text-decoration:none; font-weight:500; font-size:13.5px; border:1px solid transparent; cursor:pointer;
  background:none; width:100%; text-align:left; transition: background var(--fast), color var(--fast); }
.nav-item:hover { background: var(--surface-2); color:var(--text-1); }
.nav-item[aria-current="true"] { background: var(--surface-3); color:var(--text-1); border-color:var(--border); }
.nav-item[aria-current="true"] .ic { color: var(--cyan); }
.nav-item .ic { width:18px; height:18px; color:var(--text-3); flex:none; }
.rail-foot { margin-top:auto; display:flex; flex-direction:column; gap:var(--s3); }
.rail-note { font-size:11.5px; color:var(--text-3); line-height:1.45; }

.main { min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s8); border-bottom:1px solid var(--border);
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.topbar .menu-btn { display:none; }
.crumbs { display:flex; align-items:center; gap:8px; min-width:0; font-size:13.5px; color:var(--text-3); }
.crumbs b { color:var(--text-1); font-weight:600; }
.crumbs .sep { color:var(--text-3); opacity:.6; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:var(--s3); }
.env-cap { display:flex; align-items:center; gap:8px; padding:6px 11px; border:1px solid var(--border); border-radius:var(--radius-pill);
  font-size:12.5px; color:var(--text-2); background:var(--surface-1); }
.env-cap .dot { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); }
.icon-btn { width:34px; height:34px; display:grid; place-content:center; border:1px solid var(--border); border-radius:10px;
  background:var(--surface-1); color:var(--text-2); cursor:pointer; transition: color var(--fast), border-color var(--fast); }
.icon-btn:hover { color:var(--text-1); border-color:var(--border-strong); }
.icon-btn .ic { width:17px; height:17px; }
.account-btn { display:flex; align-items:center; gap:9px; padding:5px 10px 5px 6px; border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--surface-1); color:var(--text-1); cursor:pointer; font-size:13px; }
.avatar { width:26px; height:26px; border-radius:50%; background:var(--surface-3); color:var(--text-1); display:grid; place-content:center;
  font-size:12px; font-weight:600; border:1px solid var(--border); }

.content { padding:var(--s8); max-width: calc(var(--maxw) + var(--s8) * 2); width:100%; margin:0 auto; }
.page-head { display:flex; align-items:flex-start; gap:var(--s4); margin-bottom:var(--s6); flex-wrap:wrap; }
.page-head .titles { min-width:0; }
.page-head .eyebrow { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); margin-bottom:6px; }
.page-head p.sub { color:var(--text-2); margin-top:8px; max-width:68ch; font-size:13.5px; }
.page-head .actions { margin-left:auto; display:flex; gap:var(--s3); align-items:center; }

/* -------------------------------------------------------------- buttons --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 16px;
  border-radius:var(--radius-control); border:1px solid var(--border); background:var(--surface-1); color:var(--text-1);
  font-weight:600; font-size:13.5px; cursor:pointer; white-space:nowrap; transition: all var(--fast); }
.btn:hover { border-color:var(--border-strong); background:var(--surface-2); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn .ic { width:16px; height:16px; }
.btn-primary { background:var(--primary-gradient); border-color:transparent; color:#fff; box-shadow:var(--glow-blue); }
.btn-primary:hover { filter:brightness(1.07); border-color:transparent; background:var(--primary-gradient); }
.btn-ghost { background:transparent; }
.btn-ghost:hover { background:var(--surface-2); }
.btn-danger { color:var(--danger); border-color:var(--bad-bd); background:var(--bad-bg); }
.btn-danger:hover { background:var(--bad-bg); filter:brightness(1.1); }
.btn-sm { height:30px; padding:0 11px; font-size:12.5px; border-radius:8px; }
.btn-lg { height:44px; padding:0 22px; font-size:14.5px; }

/* --------------------------------------------------------------- cards --- */
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:var(--s6); position:relative; overflow:hidden; }
.card.flat { box-shadow:none; }
.card-head { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }
.card-head h3 { font-size:14.5px; }
.card-head .ic { width:17px; height:17px; color:var(--text-3); }
.card-head .head-right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.grid { display:grid; gap:var(--s4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.span-2 { grid-column: span 2; } .span-all { grid-column: 1 / -1; }
.section-label { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); margin:var(--s8) 0 var(--s4); }
.section-label:first-child { margin-top:0; }

/* --------------------------------------------------------------- stats --- */
.stat { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--s5); }
.stat .label { font-size:12px; color:var(--text-3); font-weight:500; display:flex; align-items:center; gap:7px; }
.stat .value { font-size:26px; font-weight:700; letter-spacing:-.02em; margin-top:10px; }
.stat .value.mono { font-size:20px; }
.stat .meta { font-size:12px; color:var(--text-3); margin-top:6px; }
.stat .value small { font-size:14px; color:var(--text-3); font-weight:500; }

/* ------------------------------------------------------- status + badges --- */
.pill { display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; border:1px solid var(--border); color:var(--text-2); background:var(--surface-2); white-space:nowrap; }
.pill .dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.pill.ok { color:var(--success); background:var(--ok-bg); border-color:var(--ok-bd); }
.pill.warn { color:var(--warning); background:var(--warn-bg); border-color:var(--warn-bd); }
.pill.bad { color:var(--danger); background:var(--bad-bg); border-color:var(--bad-bd); }
.pill.info { color:var(--blue); background:var(--info-bg); border-color:var(--info-bd); }
.pill.root { color:var(--root); background:var(--root-bg); border-color:var(--root-bd); }
.pill.muted { color:var(--text-3); }
.pill .dot.live { animation: live 2.4s var(--ease) infinite; }
@keyframes live { 0%,100%{ box-shadow:0 0 0 0 rgba(46,216,143,.5);} 50%{ box-shadow:0 0 0 4px rgba(46,216,143,0);} }
.badge { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:6px; font-size:11px; font-weight:600;
  letter-spacing:.02em; border:1px solid var(--border); color:var(--text-3); background:var(--surface-2); }
.badge.immutable { color:var(--root); border-color:var(--root-bd); background:var(--root-bg); }
.badge.editable { color:var(--success); border-color:var(--ok-bd); background:var(--ok-bg); }
.badge.genesis { color:var(--violet); border-color:rgba(116,71,255,.34); background:rgba(116,71,255,.12); }
.badge.wallet { color:var(--cyan); border-color:rgba(22,217,255,.30); background:rgba(22,217,255,.10); }

/* --------------------------------------------------------- key/value list --- */
.kv { display:grid; grid-template-columns: minmax(130px, 34%) 1fr; gap:1px var(--s4); }
.kv dt { color:var(--text-3); font-size:13px; padding:9px 0; border-top:1px solid var(--border); }
.kv dd { color:var(--text-1); font-size:13px; padding:9px 0; border-top:1px solid var(--border); margin:0; min-width:0; word-break:break-word; }
.kv dt:first-of-type, .kv dd:first-of-type { border-top:none; }
.kv dd .mono { font-size:12.5px; }
.copyfield { display:flex; align-items:center; gap:8px; min-width:0; }
.copyfield .val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.copy-btn { flex:none; width:26px; height:26px; display:grid; place-content:center; border:1px solid var(--border); border-radius:7px;
  background:var(--surface-2); color:var(--text-3); cursor:pointer; }
.copy-btn:hover { color:var(--text-1); border-color:var(--border-strong); }
.copy-btn .ic { width:14px; height:14px; }

/* ---------------------------------------------------------------- lists --- */
.list { display:flex; flex-direction:column; }
.list-row { display:flex; align-items:center; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--border); }
.list-row:first-child { border-top:none; }
.list-row .grow { flex:1; min-width:0; }
.list-row .row-title { font-weight:600; font-size:14px; display:flex; align-items:center; gap:10px; }
.list-row .row-sub { color:var(--text-3); font-size:12.5px; margin-top:3px; }

/* network cards (Networks list) */
.net-card { display:block; text-align:left; width:100%; background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:var(--s5); cursor:pointer;
  transition: border-color var(--fast), transform var(--fast); position:relative; overflow:hidden; }
.net-card:hover { border-color:var(--border-strong); transform: translateY(-2px); }
.net-card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent, var(--cyan)); opacity:.8; }
.net-card .net-top { display:flex; align-items:center; gap:var(--s3); }
.net-icon { width:34px; height:34px; border-radius:9px; display:grid; place-content:center; color:#fff; font-weight:700; font-size:14px;
  background: linear-gradient(135deg, var(--accent, var(--cyan)), var(--violet)); flex:none; }
.net-card .net-name { font-weight:650; font-size:15px; }
.net-card .net-meta { color:var(--text-3); font-size:12px; margin-top:2px; }
.net-card .net-foot { display:flex; align-items:center; gap:var(--s4); margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--border); }
.net-foot .m { font-size:12px; color:var(--text-3); } .net-foot .m b { color:var(--text-1); font-weight:600; font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------- tabs --- */
.subnav { position:sticky; top:63px; z-index:4; display:flex; gap:2px; padding:0 var(--s8); border-bottom:1px solid var(--border);
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-x:auto; scrollbar-width:none; }
.subnav::-webkit-scrollbar { display:none; }
.tab { appearance:none; background:none; border:none; cursor:pointer; padding:14px 14px 12px; color:var(--text-3); font-weight:600; font-size:13.5px;
  border-bottom:2px solid transparent; white-space:nowrap; transition: color var(--fast); }
.tab:hover { color:var(--text-1); } .tab[aria-current="true"] { color:var(--text-1); border-bottom-color:var(--cyan); }

/* --------------------------------------------------------------- forms --- */
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:var(--s5); }
.field > label { font-weight:600; font-size:13px; display:flex; align-items:center; gap:8px; }
.field .hint { color:var(--text-3); font-size:12.5px; line-height:1.5; }
.field .consequence { color:var(--text-2); font-size:12.5px; background:var(--surface-2); border:1px solid var(--border);
  border-left:2px solid var(--cyan); border-radius:8px; padding:9px 11px; line-height:1.5; }
.input, .select, textarea.input { width:100%; height:40px; padding:0 13px; border:1px solid var(--border); border-radius:var(--radius-control);
  background:var(--surface-2); color:var(--text-1); font:inherit; font-size:14px; transition: border-color var(--fast); }
textarea.input { height:auto; padding:11px 13px; line-height:1.5; resize:vertical; }
.input:focus, .select:focus, textarea.input:focus { border-color:var(--border-strong); outline:none; box-shadow:0 0 0 3px rgba(22,119,255,.14); }
.input.mono { font-family:var(--mono); font-size:13px; }
.choice { display:grid; gap:var(--s3); }
.choice-opt { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s4); border:1px solid var(--border); border-radius:var(--radius-card);
  background:var(--surface-2); cursor:pointer; transition: border-color var(--fast); }
.choice-opt:hover { border-color:var(--border-strong); }
.choice-opt[data-selected="true"] { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }
.choice-opt[aria-disabled="true"] { opacity:.6; cursor:not-allowed; }
.choice-opt .radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); margin-top:2px; flex:none; display:grid; place-content:center; }
.choice-opt[data-selected="true"] .radio { border-color:var(--cyan); }
.choice-opt[data-selected="true"] .radio::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan); }
.choice-opt .ct { min-width:0; } .choice-opt .ct b { font-size:14px; } .choice-opt .ct p { color:var(--text-3); font-size:12.5px; margin-top:3px; }
.radiorow { display:flex; gap:var(--s4); flex-wrap:wrap; }

/* stepper */
.stepper { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--s6); }
.step { display:flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid var(--border); border-radius:var(--radius-pill);
  font-size:12.5px; color:var(--text-3); font-weight:600; background:var(--surface-1); }
.step .n { width:20px; height:20px; border-radius:50%; display:grid; place-content:center; font-size:11px; background:var(--surface-3); color:var(--text-2); }
.step.on { color:var(--text-1); border-color:var(--cyan); } .step.on .n { background:var(--primary-gradient); color:#fff; }
.step.done { color:var(--text-2); } .step.done .n { background:var(--ok-bg); color:var(--success); }

/* --------------------------------------------------------------- notes --- */
.note { display:flex; gap:11px; padding:var(--s4); border-radius:var(--radius-card); border:1px solid var(--info-bd);
  background:var(--info-bg); font-size:13px; color:var(--text-2); line-height:1.5; }
.note .ic { width:18px; height:18px; flex:none; margin-top:1px; color:var(--blue); }
.note.ok { border-color:var(--ok-bd); background:var(--ok-bg); } .note.ok .ic { color:var(--success); }
.note.warn { border-color:var(--warn-bd); background:var(--warn-bg); } .note.warn .ic { color:var(--warning); }
.note.bad { border-color:var(--bad-bd); background:var(--bad-bg); } .note.bad .ic { color:var(--danger); }
.note b { color:var(--text-1); }

/* ------------------------------------------------------- table (activity) --- */
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-card); }
table.data { width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
table.data th { text-align:left; padding:11px var(--s4); color:var(--text-3); font-weight:600; font-size:11.5px; letter-spacing:.04em;
  text-transform:uppercase; border-bottom:1px solid var(--border); background:var(--surface-2); position:sticky; top:0; }
table.data td { padding:11px var(--s4); border-bottom:1px solid var(--border); color:var(--text-1); }
table.data tr:last-child td { border-bottom:none; }
table.data td.mono { font-size:12px; color:var(--text-2); }

/* ------------------------------------------------- empty / loading / error --- */
.state { display:grid; justify-items:center; text-align:center; gap:12px; padding:var(--s12) var(--s6); color:var(--text-3); }
.state .ic { width:34px; height:34px; color:var(--text-3); opacity:.7; }
.state h3 { color:var(--text-1); } .state p { max-width:46ch; font-size:13px; }
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size:400% 100%; animation: shimmer 1.4s infinite; border-radius:8px; }
@keyframes shimmer { 0%{ background-position:100% 0;} 100%{ background-position:-100% 0;} }
.skel-line { height:12px; margin:9px 0; } .skel-stat { height:92px; }

/* advanced disclosure */
.adv { margin-top:var(--s4); border-top:1px dashed var(--border); padding-top:var(--s4); }
.adv-toggle { display:inline-flex; align-items:center; gap:8px; background:none; border:none; color:var(--text-3); font-weight:600;
  font-size:12.5px; cursor:pointer; padding:0; } .adv-toggle:hover { color:var(--text-1); }
.adv-toggle .ic { width:15px; height:15px; transition: transform var(--fast); }
.adv-toggle[aria-expanded="true"] .ic { transform: rotate(90deg); }

/* attention / commercial separation */
.attn-rail { display:flex; flex-direction:column; gap:var(--s3); }
.attn { display:flex; gap:11px; align-items:flex-start; padding:var(--s4); border:1px solid var(--border); border-left:3px solid var(--warning);
  border-radius:var(--radius-card); background:var(--surface-1); }
.attn.ok { border-left-color:var(--success); } .attn.bad { border-left-color:var(--danger); }
.attn .ic { width:18px; height:18px; color:var(--warning); flex:none; margin-top:1px; }
.commercial { border:1px solid var(--border); border-radius:var(--radius-card); background:
  linear-gradient(180deg, rgba(242,184,75,.05), transparent); padding:var(--s5); }

/* ------------------------------------------------------------- account --- */
.money { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:var(--s4); }
.money .cell { border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--s4); background:var(--surface-2); }
.money .cell dt { color:var(--text-3); font-size:12px; } .money .cell dd { margin:6px 0 0; font-weight:600; font-size:15px; }

/* launch progress */
.stages { display:flex; flex-direction:column; gap:2px; }
.stage { display:flex; align-items:center; gap:12px; padding:11px var(--s3); border-radius:10px; font-size:13.5px; color:var(--text-3); }
.stage .mk { width:22px; height:22px; border-radius:50%; display:grid; place-content:center; border:1px solid var(--border); flex:none; }
.stage.done { color:var(--text-1); } .stage.done .mk { background:var(--ok-bg); border-color:var(--ok-bd); color:var(--success); }
.stage.active { color:var(--text-1); background:var(--surface-2); } .stage.active .mk { border-color:var(--cyan); color:var(--cyan); }
.stage.active .mk .spin { animation: rot 1s linear infinite; } @keyframes rot { to { transform: rotate(360deg);} }
.stage .ic { width:14px; height:14px; }

hr.div { border:none; border-top:1px solid var(--border); margin:var(--s6) 0; }
.row { display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); }
.muted { color:var(--text-3); } .small { font-size:12.5px; }
.stack { display:flex; flex-direction:column; gap:var(--s4); }
.wrap-actions { display:flex; gap:var(--s3); flex-wrap:wrap; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1040px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); }
  .content { padding:var(--s6); } .topbar { padding:var(--s4) var(--s6); } .subnav { top:59px; padding:0 var(--s6); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position:fixed; left:0; top:0; bottom:0; width:270px; z-index:40; transform: translateX(-100%);
    transition: transform var(--normal) var(--ease); height:100%; }
  .app.nav-open .rail { transform: translateX(0); box-shadow: var(--shadow-pop); }
  .scrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:35; }
  .app.nav-open .scrim { display:block; }
  .topbar .menu-btn { display:grid; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .span-2 { grid-column: auto; }
  .content { padding:var(--s4); } .topbar { padding:var(--s3) var(--s4); gap:var(--s3); } .subnav { padding:0 var(--s4); top:55px; }
  h1 { font-size:22px; } .env-cap { display:none; }
  .page-head .actions { margin-left:0; width:100%; } .page-head .actions .btn { flex:1; }
  .kv { grid-template-columns: 1fr; gap:0; }
  .kv dt { padding-bottom:0; border-top:1px solid var(--border); } .kv dd { padding-top:4px; border-top:none; }
  .kv dt:first-of-type { border-top:none; }
  .card { padding:var(--s4); }
}
/* =========================================================================================
   V2 refinement — hierarchy over uniform cards. Levels: SCENE › PRIMARY OBJECT › SIGNAL ›
   SECONDARY DETAIL › RAW EVIDENCE. Depth and type carry the levels; borders are spent by role.
   ========================================================================================= */

.page-head h1 { font-size:30px; }
.page-head .eyebrow { color:var(--text-3); }           /* eyebrow is a quiet label, not a second accent */

/* PRIMARY OBJECT — a panel that reads as the subject of the scene, not another equal card. */
.panel { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-panel);
  box-shadow:var(--shadow-card); padding:var(--s6); position:relative; overflow:hidden; }
.panel > .divide { border:none; border-top:1px solid var(--border); margin:var(--s5) 0; }

/* SECONDARY DETAIL — grouping without enclosing every block in its own border. */
.group { display:flex; flex-direction:column; gap:var(--s3); }
.group-label { font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3);
  display:flex; align-items:center; gap:8px; }
.group-label .ic { width:15px; height:15px; color:var(--text-3); }
.groups { display:grid; gap:var(--s6); }
.groups.two { grid-template-columns:1fr 1fr; }

/* RAW EVIDENCE — recessed, monospace, clearly a lower stratum. */
.evidence { background:var(--bg-1); border:1px solid var(--border); border-radius:12px; padding:var(--s4); }

/* COMMAND SUMMARY — one compact strip, not four equal boxes competing with the network. */
.command-strip { display:flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:var(--radius-card);
  background:var(--surface-1); box-shadow:var(--shadow-card); overflow:hidden; }
.command-strip .cs { flex:1 1 0; min-width:120px; padding:14px var(--s5); display:flex; flex-direction:column; gap:4px;
  border-left:1px solid var(--border); }
.command-strip .cs:first-child { border-left:none; }
.command-strip .cs .k { font-size:11.5px; color:var(--text-3); font-weight:500; letter-spacing:.015em; }
.command-strip .cs .v { font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1; display:flex; align-items:center; gap:8px; }
.command-strip .cs .v small { font-size:12px; color:var(--text-3); font-weight:500; }
.command-strip .cs.commercial-cell { flex:1 1 0; background:linear-gradient(180deg, var(--root-bg), transparent); }
.command-strip .cs.commercial-cell .v { font-size:16px; color:var(--text-2); }

/* NETWORK IDENTITY as a first-class object — distinctive, MIRCO-specific, not a generic row. */
.net-hero { display:grid; grid-template-columns:1fr auto; gap:var(--s5) var(--s8); align-items:center; width:100%; text-align:left;
  border:1px solid var(--border-strong); border-radius:var(--radius-panel); padding:var(--s6) var(--s6);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent,#16d9ff) 14%, transparent), transparent 55%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow:var(--shadow-card); cursor:pointer; position:relative; overflow:hidden;
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast); }
button.net-hero { font: inherit; color: inherit; }
.net-hero:hover { transform:translateY(-2px); border-color:var(--accent,var(--cyan)); box-shadow:var(--shadow-pop); }
.hero-id { display:flex; align-items:center; gap:var(--s4); min-width:0; }
.hero-badge { width:54px; height:54px; border-radius:15px; display:grid; place-content:center; color:#fff; font-weight:700;
  font-size:19px; letter-spacing:-.02em; background:linear-gradient(140deg, var(--accent,#16d9ff), var(--violet)); flex:none;
  box-shadow:0 10px 26px rgba(0,0,0,.28); }
.net-hero .hero-name { font-size:21px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.net-hero .hero-meta { color:var(--text-3); font-size:12.5px; margin-top:4px; }
.net-hero .hero-sig { display:flex; gap:var(--s8); flex:none; }
.net-hero .hero-sig .s .k { font-size:11px; color:var(--text-3); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.net-hero .hero-sig .s .v { font-size:22px; font-weight:700; letter-spacing:-.02em; margin-top:3px; font-variant-numeric:tabular-nums; }
.net-hero .hero-sig .s .v.ok { color:var(--success); } .net-hero .hero-sig .s .v.warn { color:var(--warning); }

.net-list { display:flex; flex-direction:column; gap:var(--s4); }

/* SIGNAL BAND for Network Overview — primary state readable in 2–3s, not four equal tiles. */
.hero-band { margin-top:var(--s5); }
.secondary-note { color:var(--text-3); font-size:12px; margin-top:10px; }

/* Review — consequential, grouped, irreversible decisions emphasised; one legend, not repeated badges. */
.legend { display:flex; gap:var(--s5); flex-wrap:wrap; padding:11px var(--s4); border:1px dashed var(--border);
  border-radius:10px; background:var(--surface-2); margin-bottom:var(--s5); }
.legend .lg { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2); }
.legend .lg .sw { width:10px; height:10px; border-radius:3px; flex:none; }
.sw.root { background:var(--root); } .sw.violet { background:var(--violet); } .sw.ok { background:var(--success); } .sw.cyan { background:var(--cyan); }
.review-group { margin-top:var(--s6); }
.review-group:first-of-type { margin-top:0; }
.rg-label { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:var(--s3); }
.rg-label .ic { width:16px; height:16px; color:var(--text-3); }
.review-list { display:flex; flex-direction:column; }
.review-item { display:grid; grid-template-columns:200px 1fr; gap:4px var(--s5); align-items:baseline; padding:11px 0;
  border-top:1px solid var(--border); }
.review-item:first-child { border-top:none; }
.review-item .rk { color:var(--text-3); font-size:13px; display:flex; align-items:center; gap:8px; }
.review-item .rv { color:var(--text-1); font-size:14px; font-weight:500; min-width:0; word-break:break-word; }
.review-item.irreversible { border-left:2px solid var(--root); margin-left:-16px; padding-left:14px; background:linear-gradient(90deg,var(--root-bg),transparent 40%); }
.lock { color:var(--root); display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.lock .ic { width:12px; height:12px; }
.launch-ack { display:flex; gap:12px; align-items:flex-start; margin:var(--s5) 0; padding:var(--s4) var(--s5);
  border:1px solid var(--border-strong); border-radius:var(--radius-card); background:var(--surface-2); cursor:pointer; }
.launch-ack input { margin-top:2px; width:18px; height:18px; accent-color:var(--cyan); flex:none; }

/* Create — field metadata as quiet chips beneath the label, never competing with it. */
.field > label { font-size:14px; }
.meta-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:-1px; }
.meta-chip { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--text-3); letter-spacing:.01em; }
.meta-chip .sw { width:8px; height:8px; border-radius:2px; background:currentColor; flex:none; }
.meta-chip.immutable { color:var(--root); } .meta-chip.genesis { color:var(--violet); }
.meta-chip.editable { color:var(--success); } .meta-chip.wallet { color:var(--cyan); }

/* Compact wizard stepper for mobile — "Step n of 6" + a progress rail, not six wrapping pills. */
.step-compact { display:none; }
.stepper .step-progress { display:none; }

/* Health — state and evidence lead; the icon is a quiet marker, not decoration. */
.health-card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:var(--s5); display:flex; flex-direction:column; gap:10px; }
.health-card .hc-top { display:flex; align-items:center; gap:10px; }
.health-card .hc-ic { width:16px; height:16px; color:var(--text-3); flex:none; opacity:.8; }
.health-card .hc-name { font-size:13px; font-weight:600; color:var(--text-2); }
.health-card .hc-state { margin-left:auto; }
.health-card .hc-detail { font-size:13px; color:var(--text-2); line-height:1.5; }
.health-card .hc-ev { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-3); align-self:flex-start; padding:3px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); }
.health-card .hc-ev.proven { color:var(--success); border-color:var(--ok-bd); background:var(--ok-bg); }
.health-card .hc-ev.observed { color:var(--cyan); border-color:rgba(22,217,255,.28); }
.health-card .hc-ev.inferred { color:var(--warning); border-color:var(--warn-bd); background:var(--warn-bg); }

/* Error / empty / loading — honest, with a safe next action. */
.state-actions { display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center; margin-top:6px; }
.state-detail { margin-top:14px; max-width:60ch; text-align:left; width:100%; }
.state-detail summary { cursor:pointer; color:var(--text-3); font-size:12.5px; font-weight:600; }
.state-detail code { display:block; margin-top:8px; padding:11px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg-1); color:var(--text-2); font-size:12px; white-space:pre-wrap; word-break:break-word; }

/* Light-mode depth — real surface separation, an environmental accent on navigation, not a flat white dash. */
:root[data-theme="day"] {
  --bg-0:#eaf0f9; --bg-1:#e4ebf6; --surface-1:#ffffff; --surface-2:#f4f8ff; --surface-3:#e9f1ff;
  --border: rgba(39,84,166,.18); --border-strong: rgba(39,84,166,.34);
  --shadow-card: 0 12px 34px rgba(20,44,92,.10); --shadow-pop: 0 22px 54px rgba(20,44,92,.18);
}
:root[data-theme="day"] .nav-item[aria-current="true"] {
  background:linear-gradient(135deg, rgba(22,119,255,.12), rgba(22,217,255,.08));
  border-color:rgba(22,119,255,.26); color:var(--text-1); box-shadow:inset 2px 0 0 var(--blue); }
:root[data-theme="day"] .nav-item[aria-current="true"] .ic { color:var(--blue); }
:root[data-theme="day"] .rail { background:linear-gradient(180deg,#ffffff,#eef4fd); }
:root[data-theme="day"] .command-strip, :root[data-theme="day"] .panel, :root[data-theme="day"] .net-hero { border-color:var(--border); }
:root[data-theme="day"] .tab[aria-current="true"] { color:var(--blue); border-bottom-color:var(--blue); }

/* ---- motion: restrained, orientation-only, opt-out honoured by the reduce rule below ---- */
@media (prefers-reduced-motion: no-preference) {
  #view > * { animation: route-in var(--normal) var(--ease) both; }
  @keyframes route-in { from { opacity:0; transform: translateY(7px); } to { opacity:1; transform:none; } }
  .pop { animation: pop var(--normal) var(--ease) both; }
  @keyframes pop { 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
  .step-progress .bar > i { transition: width var(--slow) var(--ease); }
}

/* ---- responsive refinement ---- */
@media (max-width: 960px) {
  .groups.two { grid-template-columns:1fr; }
  .net-hero { grid-template-columns:1fr; }
  .net-hero .hero-sig { gap:var(--s6); }
}
@media (max-width: 620px) {
  .page-head h1 { font-size:21px; }
  .command-strip .cs { flex:1 1 42%; min-width:0; padding:11px var(--s4); }
  .command-strip .cs .v { font-size:18px; }
  .command-strip .cs.commercial-cell { flex:1 1 100%; }
  .net-hero { padding:var(--s5); } .net-hero .hero-badge { width:44px; height:44px; font-size:16px; }
  .net-hero .hero-name { font-size:18px; } .net-hero .hero-sig { gap:var(--s5); }
  .review-item { grid-template-columns:1fr; gap:2px; } .review-item .rv { font-size:13.5px; }
  /* Compact wizard stepper */
  .stepper { gap:10px; }
  .stepper .step { display:none; }
  .stepper .step-compact { display:flex; align-items:center; gap:10px; width:100%; font-size:13px; font-weight:600; color:var(--text-1); }
  .stepper .step-compact .n { color:var(--text-3); font-weight:600; }
  .stepper .step-progress { display:block; width:100%; }
  .step-progress .bar { height:4px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
  .step-progress .bar > i { display:block; height:100%; border-radius:999px; background:var(--primary-gradient); }
  /* concise header: show the avatar, drop the name so the route title has room */
  .account-btn #whoami { display:none; }
  .account-btn { padding:5px; }
  .crumbs { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

@media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }