/* ============================================================
   final.css — NEYN-12112 FINAL token-detail page (hi-fi)
   LIGHT theme = Antimo's Figma frame 207-2372, matched to the node
     JSON: Inter UI + IBM Plex Mono numerics, flat grey ladder
     (#000/#333/#666/#888/#999/#DDD/#EEE), green #22C55E/#E8F5E9,
     red #EF4444/#FFEBEE, 1080px content column (feed 684 + 48 +
     swap 348; evidence 318+48+318), 44px feed rows, h21 chips r5.
   DARK theme = the LIVE clanker.world dark system (extracted from
     its CSS bundle): #030303 canvas, white-alpha ladder, border-only
     surfaces, green #05df72 / red #ff6568 / amber #fcbb00, teal
     #00d3bd reserved for the trade CTA signature.
   The lab chrome bar stays fixed-dark in both themes (scaffolding).
   ============================================================ */

body[data-theme="light"]{
  --bg:#ffffff; --pop:#ffffff;
  --ink:#000000; --t333:#333333; --t666:#666666; --t888:#888888; --t999:#999999; --t9ca:#9CA3AF;
  --chipbg:#DDDDDD; --line:#EEEEEE; --navfill:#F5F5F5; --barfill:#999999;
  --pos:#22C55E; --pos-bg:#E8F5E9;
  --neg:#EF4444; --neg-bg:#FFEBEE;
  --warnc:#DD7400; --warn-bg:#FFF3E0;
  --acc:#0d9488; --acc-bg:rgba(0,211,189,.12); --acc-br:rgba(0,211,189,.28);
  --cta:#000000; --cta-ink:#ffffff;
  --chartline:#DDDDDD; --chartline-hot:#999999;
  --wm:#DDDDDD;
  --scrim:rgba(0,0,0,.30);
  --shadow:rgba(0,0,0,.12);
}
body[data-theme="dark"]{
  --bg:#030303; --pop:#111111;
  --ink:#ffffff; --t333:rgba(255,255,255,.85); --t666:rgba(255,255,255,.62); --t888:rgba(255,255,255,.48);
  --t999:rgba(255,255,255,.38); --t9ca:rgba(255,255,255,.45);
  --chipbg:rgba(255,255,255,.12); --line:rgba(255,255,255,.10); --navfill:rgba(255,255,255,.08);
  --barfill:rgba(255,255,255,.35);
  --pos:#05df72; --pos-bg:rgba(5,223,114,.13);
  --neg:#ff6568; --neg-bg:rgba(255,101,104,.13);
  --warnc:#fcbb00; --warn-bg:rgba(252,187,0,.12);
  --acc:#00d3bd; --acc-bg:rgba(0,211,189,.10); --acc-br:rgba(0,211,189,.22);
  --cta:#ffffff; --cta-ink:#030303;
  --chartline:rgba(255,255,255,.14); --chartline-hot:rgba(255,255,255,.42);
  --wm:rgba(255,255,255,.06);
  --scrim:rgba(0,0,0,.60);
  --shadow:rgba(0,0,0,.5);
}
:root{
  --font:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw:1080px;
  --rail:348px; --colgap:48px;
  --navh:67px; --sliverh:44px; --chromeh:0px;   /* --navh = full sticky stack (chrome+topnav); --chromeh = chrome only. JS keeps both live. */
  --pgpad:max(24px, calc((100% - var(--maxw))/2));
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }   /* author display rules must never beat [hidden] */
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:13px; line-height:1.21; font-weight:400;
  -webkit-font-smoothing:antialiased; transition:background .15s ease, color .15s ease; }
a{ color:inherit; text-decoration:none; cursor:pointer; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
.mono{ font-family:var(--mono); }
.pos{ color:var(--pos); } .neg{ color:var(--neg); } .warn{ color:var(--warnc); }

/* the universal Figma chip: h21 · pad 3/6 · r5 · 12/500 */
.chip,.swaptab,.seclabel,.mhbadge,.fclank,.qchip-sm{ display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; line-height:15px; border-radius:5px; padding:3px 6px; }

/* ---------- tooltips ---------- */
[data-tip]{ position:relative; }
[data-tip]:hover::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%); z-index:90; width:max-content; max-width:250px; text-align:left;
  font-size:11px; font-weight:500; line-height:1.45; color:var(--cta-ink); background:var(--cta);
  border-radius:6px; padding:7px 10px; pointer-events:none; white-space:normal; }

/* ---------- RED LAB CHROME (fixed dark, both themes) ---------- */
.chrome{ --border:#333; --text-secondary:#9a9a9a;   /* read by chrome-nav.js */
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:8px 16px; background:#141414; color:#eee; }
.chrome-left{ display:flex; align-items:center; gap:9px; }
.chrome .stage-badge{ font-size:11px; font-weight:700; letter-spacing:.06em;
  color:#141414; background:#eee; border-radius:5px; padding:3px 8px; }
.chrome .artifact-name{ font-size:12px; font-weight:600; color:#eee; white-space:nowrap; }
.chrome-center{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.axis{ display:flex; align-items:center; gap:7px; }
.axis-lbl{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#8a8a8a; }
.seg{ display:inline-flex; border:1px solid #3a3a3a; border-radius:7px; overflow:hidden; }
.seg button{ font-size:12px; font-weight:600; color:#9a9a9a; background:transparent;
  border:none; border-left:1px solid #3a3a3a; padding:5px 11px; white-space:nowrap; }
.seg button:first-child{ border-left:none; }
.seg button.on{ background:#eee; color:#141414; }
/* Chrome sticks to the top on DESKTOP so the axis toggles stay reachable while
   scrolling; .topnav stacks directly beneath it (top:var(--chromeh)). On mobile
   the chrome wraps to several rows, so it is left non-sticky (would eat the
   viewport) — f-app.js sets --chromeh:0 there. z above topnav(60)/sliver(55). */
@media (min-width:901px){
  .chrome{ position:sticky; top:0; z-index:62; }
}

/* ---------- TOPNAV (h67, search 384×37 filled, no borders) ---------- */
.topnav{ display:flex; align-items:center; gap:16px;
  position:sticky; top:var(--chromeh); z-index:60; background:var(--bg);
  padding:15px var(--pgpad); }
.brand{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:21px; font-weight:500; letter-spacing:.01em; color:var(--ink); }
.bars{ display:inline-flex; align-items:flex-end; gap:2.5px; height:14px; }
.bars i{ width:3px; background:var(--t888); display:block; }
.bars i:nth-child(1){ height:40%; } .bars i:nth-child(2){ height:70%; } .bars i:nth-child(3){ height:100%; }
.search{ flex:0 1 384px; min-width:0; height:37px; border-radius:5px; background:var(--navfill);
  display:flex; align-items:center; gap:8px; padding:0 10px; color:var(--t888); font-size:12px;
  position:relative; }
.search:focus-within{ box-shadow:none; }  /* no focus ring — Antimo 2026-07-21 (the caret indicates focus) */
.search .mag{ width:12px; height:12px; border:1.5px solid var(--t888); border-radius:50%; position:relative; flex-shrink:0; }
.search .mag::after{ content:""; position:absolute; right:-3px; bottom:-2px; width:5px; height:1.5px; background:var(--t888); transform:rotate(45deg); }
.search input.ph{ flex:1; min-width:0; border:none; outline:none; background:none; color:var(--ink); font-size:12px; }
.search input.ph::placeholder{ color:var(--t888); }
.search .slash{ font-family:var(--mono); font-size:12px; color:var(--t888); }
.searchmenu{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80;
  background:var(--pop); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 8px 28px var(--shadow); }
.sm-item{ display:flex; align-items:center; gap:9px; padding:10px 12px; font-size:12px; color:var(--t666); cursor:pointer; }
.sm-item:hover{ background:var(--navfill); }
.sm-item b{ color:var(--ink); font-weight:600; }
.sm-item .sm-k{ margin-left:auto; font-size:11px; color:var(--t999); }
.sm-sq{ width:18px; height:18px; border-radius:4px; background:var(--chipbg); flex-shrink:0; }
.sm-sq.rnd{ border-radius:50%; }
.navspace{ flex:1; }
.navright{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); font-weight:500;
  border-radius:10px; padding:8px 12px; }
.doc{ width:12px; height:14px; border:1px solid var(--t888); border-radius:2px; position:relative; }
.doc::before,.doc::after{ content:""; position:absolute; left:2px; right:2px; height:1px; background:var(--t888); }
.doc::before{ top:4px; } .doc::after{ top:7px; }

/* ---------- SLIVER ---------- */
.sliver{ position:fixed; top:var(--navh); left:0; right:0; height:var(--sliverh); z-index:55;
  background:var(--bg); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:0 var(--pgpad);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease; }
.scrolled .sliver{ opacity:1; transform:none; pointer-events:auto; }
.sliver .sl{ font-size:12px; color:var(--t666); display:inline-flex; align-items:center; gap:9px; white-space:nowrap; overflow:hidden; }
.sliver .sl b{ font-weight:600; color:var(--ink); }
.sliver .sl b.pos{ color:var(--pos); }
.sliver .sl .sep{ color:var(--chipbg); }
.sliver .sl .d{ font-weight:500; font-family:var(--mono); font-size:11px; }

/* ---------- MASTHEAD (centered, v-gap 12; chart 948×310 behind) ---------- */
.header{ position:relative; overflow:hidden; padding:20px var(--pgpad) 26px; transition:padding .2s ease; }
.chartbg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; justify-content:center; }
.chartbg svg{ width:min(100%, 948px); height:100%; }
.chartbg polyline{ stroke:var(--chartline); stroke-width:1.5; fill:none; transition:stroke .2s ease; }
.header > *{ position:relative; z-index:1; }
.chartlabel{ display:none; position:absolute; top:16px; left:var(--pgpad); z-index:2;
  align-items:center; gap:14px; font-size:12px; font-weight:500; color:var(--t666); }
.chartlabel .range{ display:inline-flex; gap:4px; }
.chartlabel .range span{ color:var(--t888); cursor:pointer; padding:3px 8px; border-radius:5px; }
.chartlabel .range span:hover{ color:var(--ink); background:var(--navfill); }
.chartlabel .range span.on{ color:var(--ink); background:var(--chipbg); }
.hactions{ position:absolute; top:16px; right:var(--pgpad); z-index:3; display:flex; gap:8px; }
.hactions button{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  color:var(--t888); background:var(--bg); border:1px solid var(--t888); border-radius:5px;
  padding:3px 8px; line-height:15px; }
.hactions button:hover{ color:var(--ink); border-color:var(--ink); }
.hactions .ic{ font-size:12px; }
.hactions .manage{ display:none; }   /* specificity must beat .hactions button */
body[data-viewer="admin"] .hactions .manage{ display:inline-flex; }

.hid{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding-top:26px; }
.havatar{ width:47px; height:47px; border-radius:10px; background:var(--chipbg); }
.hname{ font-size:24px; font-weight:600; line-height:1.21; color:var(--ink); letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:10px; }
.hname .tk{ font-size:24px; font-weight:400; color:var(--ink); }
.hcontract{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); }
.hcontract .addr{ font-family:var(--mono); font-size:11.5px; }
.copy{ width:11px; height:11px; border:1px solid var(--t888); border-radius:2px; position:relative; flex-shrink:0; cursor:pointer; }
.copy::after{ content:""; position:absolute; left:-3px; top:-3px; width:8px; height:8px; border:1px solid var(--t888); border-radius:2px; background:var(--bg); }
.hbadges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.hpill{ font-size:12px; font-weight:400; color:var(--ink); background:var(--chipbg); }
.hpill .psq{ width:13px; height:13px; border-radius:2px; background:var(--t888); flex-shrink:0; }
.launchline{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--t666); }
.launchline b{ color:var(--ink); font-weight:500; font-size:12px; }
.launchline .lsq{ width:13px; height:13px; border-radius:50%; background:var(--chipbg); flex-shrink:0; }

.agentstatus{ display:none; align-items:center; gap:6px;
  font-size:12px; font-weight:500; line-height:15px; color:var(--t888);
  border:1px solid var(--t888); border-radius:5px; padding:3px 8px; }
body[data-agent="noagent"]  .agentstatus[data-when="noagent"]{ display:inline-flex; }
body[data-agent="v1locked"] .agentstatus[data-when="v1locked"]{ display:inline-flex; }

.glance{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
.g{ width:120px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.g .v{ font-size:24px; font-weight:400; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.g .k{ font-size:12px; font-weight:400; color:var(--ink); }

.mhstrip{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.mhbadge{ font-weight:400; color:var(--t888); border:1px solid var(--t888); cursor:default; }
.mhbadge .chk{ font-size:12px; }
.mhbadge.warnb{ color:var(--t888); }

body[data-chart="expanded"] .header{ padding-top:150px; }
body[data-chart="expanded"] .chartbg polyline{ stroke:var(--chartline-hot); stroke-width:2; }
body[data-chart="expanded"] .chartlabel{ display:flex; }

/* ---------- AGE BANNER ---------- */
.agebanner{ padding:0 var(--pgpad); max-width:calc(var(--maxw) + 2*var(--pgpad)); margin:0 auto; }
.agebanner .ab{ display:none; align-items:center; gap:9px; margin-top:2px;
  padding:10px 14px; border-radius:5px; font-size:13px; font-weight:500; }
body[data-age="fresh"] .agebanner .ab.fresh{ display:flex; background:var(--cta); color:var(--cta-ink); }
body[data-age="early"] .agebanner .ab.early{ display:flex; border:1px solid var(--warnc); color:var(--warnc); background:var(--warn-bg); }

/* ---------- BODY GRID (1080 = 684 + 48 + 348) ---------- */
.body{ display:grid; grid-template-columns:minmax(0,1fr) var(--rail); align-items:stretch;
  column-gap:var(--colgap); padding:14px var(--pgpad) 8px; }
.col-left{ min-width:0; }
.col-right{ min-width:0; }
.rpad{ height:100%; }
/* [data-swaproot] below sets position:relative (swaparrow's containing block) at
   equal specificity, so the sticky must be qualified to win — otherwise the card
   is never sticky and slides up under the nav. --navh now includes chrome height,
   and +sliverh clears the collapsed identity sliver so tabs aren't covered. */
.swap-card[data-swaproot]{ position:sticky; top:calc(var(--navh) + var(--sliverh) + 14px); z-index:5; }

/* ---------- ACTIVITY (fixed 330px, internal scroll, cropped-row cue) ---------- */
.acthead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 0 12px; }
.actbar{ display:flex; gap:12px; }
.acthead .actcount{ font-size:12px; color:var(--t888); }
.chip{ color:var(--t888); background:var(--chipbg); border:none; cursor:pointer; }
.chip:hover{ color:var(--ink); }
.chip.on{ background:var(--cta); color:var(--cta-ink); }
.actwrap{ position:relative; }
.activity.fixed .actlist{ height:330px; overflow-y:auto; overscroll-behavior:contain; }
.actwrap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:44px;
  background:linear-gradient(to bottom, transparent 0%, var(--bg) 100%); pointer-events:none; }
.row{ display:grid; grid-template-columns:20px 1fr auto; gap:12px; align-items:center;
  height:44px; padding:12px 4px; border-bottom:1px solid var(--line); }
.row .sq{ width:20px; height:20px; border-radius:50%; background:var(--chipbg); flex-shrink:0; }
.row .sq.rect{ border-radius:4px; }
.row .txt{ min-width:0; font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .txt .time{ font-size:11px; color:var(--t999); margin-right:6px; }
.row .txt b{ font-weight:700; color:var(--ink); }
.row .txt b.mono{ font-size:12.5px; }
.row .txt span{ color:var(--t666); font-weight:400; }
.row .amt{ font-size:11px; font-weight:500; font-family:var(--mono); white-space:nowrap;
  border-radius:4px; padding:2px 6px; line-height:14px; }
.row .amt.pos{ color:var(--pos); background:var(--pos-bg); }
.row .amt.neg{ color:var(--neg); background:var(--neg-bg); }
.row .amt:empty{ display:none; }
.activity[data-filter="fc"]    .row:not([data-kind~="fc"]),
.activity[data-filter="x"]     .row:not([data-kind~="x"]),
.activity[data-filter="trade"] .row:not([data-kind~="trade"]){ display:none; }

/* ---------- EVIDENCE (2 × 318 + 48; sections v-gap 48) ---------- */
.evid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:36px 0 12px; align-items:start; }
.ecol{ min-width:0; display:flex; flex-direction:column; gap:48px; }
.esec{ min-width:0; }
.eshead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.seclabel{ color:var(--acc); background:var(--acc-bg); }  /* low-opacity accent (NOT solid — solid purple is reserved for the CTA). Matches the create page. Antimo 2026-07-21 */
.esaux{ font-size:12px; font-weight:500; color:var(--t888); font-variant-numeric:tabular-nums; }
.esaux.lnk:hover{ color:var(--ink); }
.kv{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 0; min-height:28px; }
.kv .k{ font-size:13px; color:var(--t666); font-weight:400; }
.kv .v{ font-size:13px; font-weight:500; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kv .v.mono{ font-family:var(--mono); font-weight:400; font-size:12.5px; }
.kv .v .pos{ font-size:12px; font-weight:400; margin-right:6px; }
.vtag{ font-size:11px; font-weight:500; font-family:var(--mono); color:var(--pos); background:var(--pos-bg);
  border-radius:4px; padding:2px 6px; margin-right:6px; line-height:14px; }
.tag{ font-size:10px; font-weight:400; font-family:var(--mono); letter-spacing:.02em;
  color:var(--t888); border:1px solid var(--t888); border-radius:3px; padding:1px 5px; }
.tag.prop{ color:var(--warnc); border-color:var(--warnc); }
.estitle{ font-size:13px; font-weight:600; color:var(--ink); margin:2px 0 6px; }
.note{ font-size:13px; color:var(--t666); font-weight:400; line-height:1.5; }
.dashedbox{ border:1px dashed var(--t888); border-radius:8px; padding:14px; }
.btn-primary{ margin-top:12px; width:100%; text-align:center; font-size:13px; font-weight:600;
  color:var(--cta-ink); background:var(--cta); border:none; border-radius:5px; padding:11px; }
.btn-ghost{ font-size:13px; font-weight:500; color:var(--t666); background:var(--bg);
  border:1px solid var(--line); border-radius:5px; padding:10px 16px; }

.agent-block{ display:none; }
body[data-agent="agent"]    .agent-block.for-agent{ display:block; }
body[data-agent="noagent"]  .agent-block.for-noagent{ display:block; }
body[data-agent="v1locked"] .agent-block.for-v1{ display:block; }
.agent-none-admin, .agent-none-visitor{ display:none; }
body[data-viewer="admin"]   .agent-none-admin{ display:block; }
body[data-viewer="visitor"] .agent-none-visitor{ display:block; }

/* holders (rank+addr mono 12 #333 · tag mono 10 · % mono 12/500 · bar 36×4) */
.holders-d{ margin-top:2px; }
.hrow{ display:grid; grid-template-columns:1fr auto 36px; gap:8px; align-items:center; min-height:28px; padding:6px 0; }
.hrow .hwho{ font-family:var(--mono); font-size:12px; color:var(--t333); min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-flex; align-items:center; }
.hrow.named .hwho{ font-family:var(--font); font-size:13px; }
.hrow .lab{ font-family:var(--mono); font-size:10px; font-weight:400; color:var(--t888);
  background:var(--chipbg); border-radius:3px; padding:1px 5px; margin-left:6px; line-height:13px; }
.hrow.sys:first-child .lab{ background:transparent; border:1px solid var(--t888); }
.hrow .hpct{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.hrow .hbar{ height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.hrow .hbar i{ display:block; height:100%; background:var(--barfill); border-radius:2px; }
.hview{ display:inline-block; font-size:12px; font-weight:400; color:var(--t999); margin-top:6px; }
.hview:hover{ color:var(--ink); }

/* launch cast */
.ocast{ display:flex; flex-direction:column; gap:6px; }
.ocast .oav{ display:none; }
.ohead{ display:flex; align-items:center; gap:8px; font-size:13px; }
.ohead::before{ content:""; width:20px; height:20px; border-radius:50%; background:var(--chipbg); flex-shrink:0; }
.ohead b{ font-weight:700; }
.ohead .otime{ color:var(--t666); font-weight:400; }
.obody{ min-width:0; }
.obody p{ font-size:13px; color:var(--t333); font-weight:400; line-height:1.45; margin:10px 0 0; }
.olink{ display:inline-block; margin-top:10px; font-size:13px; color:var(--t333); }
.olink:hover{ color:var(--ink); }

/* ---------- SWAP (borderless container; joined 88px fields; seam box 40×40) ---------- */
[data-swaproot]{ position:relative; }
.swap-card{ background:transparent; }
.swaptabs{ display:flex; gap:12px; margin-bottom:20px; }
.swaptab{ color:var(--t888); background:var(--chipbg); cursor:pointer; }
.swaptab:hover{ color:var(--ink); }
.swaptab.on{ background:var(--cta); color:var(--cta-ink); }
.swapfields{ position:relative; margin-bottom:20px; }
.pay{ border:1px solid var(--line); background:var(--bg); padding:16px; min-height:88px; }
.pay.src{ border-radius:5px 5px 0 0; }
.pay.dst{ border-radius:0 0 5px 5px; border-top:none; }
.pay:focus-within{ border-color:var(--t888); }
.pay .lbl{ font-size:12px; font-weight:500; color:var(--t666); }
.pay .row2{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.pay .num{ flex:1; min-width:0; border:none; outline:none; background:none;
  font-size:24px; font-weight:400; color:var(--ink); font-family:var(--mono); font-variant-numeric:tabular-nums; }
.pay .num::placeholder{ color:var(--ink); opacity:1; }
.pay .num:placeholder-shown{ color:var(--ink); }
.pay .num.sm{ font-size:18px; }
.pay .cur{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:5px; padding:6px 10px; white-space:nowrap; }
.pay .cur:hover{ border-color:var(--t888); }
.pay .cur .car{ font-size:11px; color:var(--t666); }
.balrow{ margin-top:6px; font-size:11px; font-family:var(--mono); color:var(--t999); font-variant-numeric:tabular-nums; }
.swaparrow{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:40px; height:40px; border:1px solid var(--line); border-radius:5px;
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:16px;
  background:var(--bg); transition:transform .18s ease; }
.swaparrow:hover{ border-color:var(--t888); }
.swaparrow.flip{ transform:translate(-50%,-50%) rotate(180deg); }
.limitrow .pay{ border-radius:5px; border-top:1px solid var(--line); margin-bottom:8px; }
.limitrow .xchips{ margin:0 0 12px; }
.chips{ display:flex; gap:8px; margin-bottom:20px; }
.qchip{ flex:1; text-align:center; font-size:12px; font-weight:500; color:var(--t666);
  border:1px solid var(--line); border-radius:5px; padding:8px 0; height:32px; cursor:pointer; background:var(--bg); }
.qchip:hover{ color:var(--ink); border-color:var(--t888); }
.qchip.on{ color:var(--ink); border-color:var(--t888); background:var(--navfill); }
.swapinfo{ border-top:1px solid var(--line); margin:0 0 16px; padding-top:10px; }
.sirow{ display:flex; justify-content:space-between; align-items:baseline; padding:3px 0; }
.sirow .k{ font-size:12px; color:var(--t666); }
.sirow .v{ font-size:12px; font-weight:500; font-family:var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.siwarn{ margin-top:8px; font-size:12px; font-weight:500; color:var(--warnc);
  background:var(--warn-bg); border-radius:5px; padding:8px 10px; }
.connect{ width:100%; height:48px; text-align:center; font-size:16px; font-weight:700;
  color:var(--t888); background:var(--chipbg); border:none; border-radius:5px; }
.connect.primary{ color:var(--cta-ink); background:var(--cta); }
.connect.err{ color:var(--neg); background:var(--neg-bg); cursor:not-allowed; }
.connect:disabled{ cursor:not-allowed; }
.walletline{ margin-top:9px; font-size:11px; color:var(--t999); text-align:center; }
.walletline .mono{ color:var(--t666); }
.walletline a{ color:var(--t666); font-weight:600; margin-left:6px; text-decoration:underline; }
.curmenu{ position:absolute; z-index:20; right:0; width:220px;
  background:var(--pop); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 10px 30px var(--shadow); }
.cm-item{ display:flex; align-items:center; gap:9px; padding:10px 12px; font-size:13px; font-weight:600;
  color:var(--ink); cursor:pointer; }
.cm-item:hover{ background:var(--navfill); }
.cm-item .cm-bal{ margin-left:auto; font-size:11.5px; font-weight:400; color:var(--t999); font-family:var(--mono); }

/* ---------- FOOTER (pad 96v; cols 5; wordmark #DDD; disclaimer 12/18 #9CA3AF) ---------- */
.footer{ position:relative; overflow:hidden; margin-top:48px; padding:96px var(--pgpad) 0; }
.fcols{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr 1.3fr; gap:48px; }
.fcol .fh{ font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin-bottom:12px; }
.fcol .ftick{ font-family:var(--mono); font-size:12px; color:var(--ink); margin-bottom:12px; }
.fcol .fprice{ font-size:12px; color:var(--pos); font-weight:400; display:flex; align-items:center; gap:7px; }
.fchip{ font-size:10px; font-weight:500; font-family:var(--mono); border-radius:3px; padding:2px 6px; }
.fchip.pos{ color:var(--pos); background:var(--pos-bg); }
.fclank{ margin-top:12px; color:var(--cta-ink); background:var(--cta); border:none; cursor:pointer; }
.fcol a{ display:block; font-size:14px; color:var(--t9ca); font-weight:400; margin-bottom:8px; }
.fcol a:hover{ color:var(--ink); }
.fdisc{ position:relative; z-index:1; margin-top:96px; font-size:12px; font-weight:400; color:var(--t9ca); max-width:var(--maxw); line-height:18px; padding-bottom:24px; }
.watermark{ position:relative; z-index:0; margin-top:48px; text-align:center; font-family:var(--mono);
  font-size:min(232px, 16vw); font-weight:700; letter-spacing:.01em; color:var(--wm); line-height:.8;
  user-select:none; pointer-events:none; overflow:hidden; }

/* ---------- SECTION DOCK ---------- */
.secdock{ position:fixed; bottom:16px; z-index:58; display:flex; gap:6px; left:var(--pgpad); }
.dockpill{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; line-height:15px;
  color:var(--t888); background:var(--bg); border:1px solid var(--t888); border-radius:5px;
  padding:3px 8px; box-shadow:0 2px 10px var(--shadow); }
.dockpill:hover{ color:var(--ink); border-color:var(--ink); }
.dockpill.hide{ display:none; }
#sec-market,#sec-holders,#sec-launch,#sec-contract,#sec-agent{
  scroll-margin-top:calc(var(--navh) + var(--sliverh) + 14px); }

/* ---------- MANAGE DRAWER ---------- */
.mbackdrop{ position:fixed; inset:0; background:var(--scrim); z-index:79; opacity:0;
  pointer-events:none; transition:opacity .2s ease; }
.mbackdrop.open{ opacity:1; pointer-events:auto; }
.mdrawer{ position:fixed; top:0; right:0; bottom:0; width:min(460px, 100%); z-index:80;
  background:var(--bg); border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .24s cubic-bezier(.4,0,.2,1); }
.mdrawer.open{ transform:none; }
.mdhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 20px 14px; border-bottom:1px solid var(--line); }
.mdhead .mt{ font-size:20px; font-weight:700; color:var(--ink); }
.mdhead .msub{ font-size:12px; color:var(--t666); margin-top:4px; display:flex; align-items:center; gap:6px; }
.mdhead .mwallet{ font-weight:500; color:var(--t333); font-family:var(--mono); }
.mdx{ font-size:20px; line-height:1; color:var(--t666); background:none; border:none; cursor:pointer; padding:2px 4px; }
.mdbody{ overflow-y:auto; padding:8px 20px 28px; }
.msec{ padding:15px 0; border-bottom:1px solid var(--line); }
.msec:last-child{ border-bottom:none; }
.msec .mst{ font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; }
.msec .mdesc{ font-size:12.5px; font-weight:400; color:var(--t666); margin-top:4px; line-height:1.5; }
.msec .mctl{ margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.msec .mctl .kv{ min-height:0; padding:0; }
.mfield{ flex:1; min-width:0; height:36px; border:1px solid var(--line); border-radius:5px; background:var(--bg);
  padding:0 11px; font-size:12.5px; color:var(--ink); }
.mfield::placeholder{ color:var(--t999); }
.mfield:focus{ outline:none; border-color:var(--t888); }
.mbtn{ font-size:12.5px; font-weight:600; color:var(--cta-ink); background:var(--cta); border:none;
  border-radius:5px; padding:9px 16px; cursor:pointer; white-space:nowrap; }
.mbtn.ghost{ color:var(--t666); background:var(--bg); border:1px solid var(--line); }
.mflag{ font-size:10px; font-weight:500; font-family:var(--mono); letter-spacing:.02em; text-transform:uppercase;
  border-radius:3px; padding:1px 6px; }
.mflag.live{ color:var(--pos); background:var(--pos-bg); }
.mflag.perm{ color:var(--t888); border:1px solid var(--t888); }
.mflag.prop{ color:var(--warnc); background:var(--warn-bg); }
.msec.proposed{ border:1px dashed var(--t888); border-radius:8px; padding:14px; margin-top:14px; }
.msec.proposed .mst, .msec.proposed .mdesc{ color:inherit !important; opacity:1 !important; }
.mtoggle{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--t333); font-weight:600; }
.mtoggle .sw{ width:32px; height:18px; border-radius:999px; border:1px solid var(--t888); position:relative; }
.mtoggle .sw::after{ content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--t888); }

/* ---------- MOBILE STRIP + SWAP PAGE + SHEET ---------- */
.mstrip{ display:none; background:var(--bg); padding:10px 14px; min-width:0; }
.mstrip .msr1{ font-size:12px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.mstrip .msr1 b{ font-weight:600; white-space:nowrap; }
.mstrip .msr1 .mh{ color:var(--t666); }
.mstrip .msr1 .mvok{ font-weight:600; color:var(--pos); margin-left:auto; white-space:nowrap; }
.mstrip .msr2{ font-size:12px; color:var(--t666); margin-top:3px; }
.mstrip .msr2 .d{ font-weight:500; font-family:var(--mono); font-size:11px; color:var(--pos); }
.mstrip .sep{ color:var(--chipbg); }

.swappage{ display:none; position:fixed; inset:0; z-index:70; background:var(--bg); flex-direction:column; }
.swappage .sp-head{ display:flex; align-items:center; border-bottom:1px solid var(--line); }
.sp-back{ font-size:20px; line-height:1; color:var(--ink); background:none; border:none;
  cursor:pointer; padding:10px 2px 10px 14px; flex-shrink:0; }
.sp-head .mstrip{ flex:1; }
.swappage .sp-body{ flex:1; overflow-y:auto; padding:16px 16px calc(24px + env(safe-area-inset-bottom)); }
.sp-body [data-swaproot]{ position:relative; }

.ssbackdrop{ position:fixed; inset:0; background:var(--scrim); z-index:69; opacity:0;
  pointer-events:none; transition:opacity .2s ease; }
.ssbackdrop.open{ opacity:1; pointer-events:auto; }
.swapsheet{ position:fixed; left:0; right:0; bottom:0; z-index:70; height:92vh; max-height:92vh;
  background:var(--bg); border-top-left-radius:18px; border-top-right-radius:18px;
  border-top:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); }
.swapsheet.open{ transform:none; }
.sshead{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px 12px; border-bottom:1px solid var(--line); }
.sshead .swaptabs{ margin-bottom:0; }
.ssx{ font-size:20px; line-height:1; color:var(--t666); background:none; border:none; cursor:pointer; padding:2px 4px; }
.ssbody{ overflow-y:auto; padding:16px 18px calc(20px + env(safe-area-inset-bottom)); }

/* ---------- TRADEBAR (mobile) — teal tinted-ghost, the live site's CTA signature ---------- */
.tradebar{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:transparent; align-items:center; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
.tradebar::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:36px;
  background:linear-gradient(to top, var(--bg) 0%, transparent 100%); pointer-events:none; }
.tradebar .tb-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--acc); background:var(--acc-bg);
  border:1px solid var(--acc-br); border-radius:12px; padding:15px;
  box-shadow:0 2px 12px rgba(45,212,191,.18); backdrop-filter:blur(8px); }
.tradebar .tb-info{ font-size:13px; opacity:.75; }

/* ---------- TOAST + MODAL ---------- */
.ftoast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:99;
  font-size:12.5px; font-weight:600; color:var(--cta-ink); background:var(--cta); border-radius:6px;
  padding:11px 18px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.ftoast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.fmodal-backdrop{ position:fixed; inset:0; z-index:94; background:var(--scrim); }
.fmodal{ position:fixed; z-index:95; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px, calc(100% - 32px)); background:var(--pop); border:1px solid var(--line);
  border-radius:12px; padding:20px; box-shadow:0 16px 48px var(--shadow); }
.fm-title{ font-size:16px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.fm-body .sirow{ padding:6px 0; border-bottom:1px solid var(--line); }
.fm-body .sirow:last-child{ border-bottom:none; }
.fm-body .fm-note{ font-size:12.5px; font-weight:400; color:var(--t666); line-height:1.5; }
.fm-actions{ display:flex; gap:8px; margin-top:16px; }
.fm-actions .btn-ghost{ flex:1; }
.fm-actions .btn-primary{ flex:2; margin-top:0; }

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .body{ grid-template-columns:1fr; }
  .col-right{ display:none; }
  .evid{ grid-template-columns:1fr; gap:36px; }
  .ecol{ gap:36px; }
  .glance{ gap:16px 8px; }
  .g{ width:104px; }
  .g .v{ font-size:20px; }
  .hname, .hname .tk{ font-size:22px; }
  .hcontract .addr{ max-width:62vw; overflow:hidden; text-overflow:ellipsis; }
  .fcols{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer{ padding-top:48px; }
  .fdisc{ margin-top:40px; }
  .watermark{ font-size:22vw; margin-top:24px; }
  .hactions{ position:static; justify-content:center; margin-bottom:4px; }
  .chartlabel{ position:static; justify-content:center; margin-bottom:8px; }
  .tradebar{ display:flex; }
  body{ padding-bottom:78px; }
  .activity.fixed .actlist{ height:auto; max-height:60vh; }
  .secdock{ display:none; }
  .swappage.open{ display:flex; }
  .swappage .mstrip, .mdrawer .mstrip{ display:block; }
  body[data-mobile-nav="pages"] .mdrawer{ width:100%; border-left:none; }
  body[data-mobile-nav="pages"] .mdrawer .mstrip{ border-bottom:1px solid var(--line); }
  .chrome-center{ gap:10px; }
}
@media (min-width:901px){ .swappage{ display:none !important; } }

/* ============================================================
   2026-07-07 — token PFP (real image + branded purple fallback) and the
   POPULATED existing-agent admin drawer (current-state previews + values).
   All additive classes; used by the control page and the A–F remix pages
   (all share final.css). Fallback gradient shows only if the image host is
   unreachable (onerror removes the <img>).
   ============================================================ */

/* ---- hero token avatar: real PFP over a branded purple fallback ---- */
.havatar{ background:linear-gradient(135deg,#8a63ff,#6b3ffb); overflow:hidden; }
.havatar img, .idav img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Manage drawer: identity header (existing verified agent) ---- */
.mdhead{ justify-content:flex-start; align-items:center; }
.mdav{ width:40px; height:40px; border-radius:9px; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,#8a63ff,#6b3ffb); }
.mdav img{ width:100%; height:100%; object-fit:cover; display:block; }
.mdid{ min-width:0; }
.mdhead .mt{ font-size:16px; }
.mdhead .mt .mttk{ font-weight:400; color:var(--t666); }
.mdhead .mdx{ margin-left:auto; align-self:flex-start; }
.msub .mvok{ color:var(--pos); font-weight:600; white-space:nowrap; }

/* ---- section title row: current-state preview beside the flag ---- */
.msec .mst .mtt{ flex:1 1 auto; min-width:0; }
.msec .mst .mprev{ font-size:11px; font-weight:500; color:var(--t888); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:46%; }
.msec .mst .mprev.ok, .msec .mst .mprev.pos{ color:var(--pos); }
.mprev-img{ width:22px; height:22px; border-radius:5px; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,#8a63ff,#6b3ffb); }
.mprev-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mflag.ok{ color:var(--pos); background:var(--pos-bg); }

/* ---- current-value blocks inside an expanded section ---- */
.mcur{ width:100%; display:flex; flex-direction:column; gap:7px; margin-bottom:2px; }
.mcur.mcur-media, .mcur.mok{ flex-direction:row; align-items:center; gap:12px; }
.mcur-img{ width:44px; height:44px; border-radius:8px; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,#8a63ff,#6b3ffb); }
.mcur-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mcur-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; margin-right:auto; }
.mcur-lbl{ font-size:12.5px; font-weight:600; color:var(--ink); }
.mcur-sub{ font-size:11px; }
.mkv{ display:flex; align-items:baseline; gap:8px; font-size:12px; line-height:1.5; }
.mkv .mk{ color:var(--t888); min-width:104px; flex-shrink:0; }
.mkv .mv{ color:var(--t333); min-width:0; }
.mchip{ font-size:10px; font-family:var(--mono); color:var(--t888); border:1px solid var(--line);
  border-radius:3px; padding:1px 5px; margin-left:2px; white-space:nowrap; }
.mokchk{ width:26px; height:26px; border-radius:50%; background:var(--pos-bg); color:var(--pos);
  display:grid; place-items:center; font-weight:700; flex-shrink:0; }
.t888{ color:var(--t888); }

/* ---- controls: danger action + on-state toggles ---- */
.mbtn.danger{ color:#fff; background:var(--neg); }
.mtoggle.on{ color:var(--ink); }
.mtoggle .sw.on{ background:var(--pos); border-color:var(--pos); }
.mtoggle .sw.on::after{ left:auto; right:2px; background:#fff; }

@media (max-width:420px){ .msec .mst .mprev{ display:none; } }

/* high-impact / irreversible admin confirm (data-danger + data-flow-detail) */
.fm-danger{ font-size:13px; line-height:1.5; color:var(--neg); font-weight:500; margin:0 0 8px; }
[data-modal-confirm].danger{ background:var(--neg); color:#fff; }

/* ============================================================
   manage2.js — Manage drawer VERSION 2 ("Improved"). Reuses all the v1
   .mdrawer/.msec/.mflag/.mkv styling; only adds the version toggle, the
   validation-pass field chrome (@ prefix + char counter), the badge-colour
   -by-meaning remap, and amber (not error-red) cautions.
   ============================================================ */
/* version toggle in the drawer header */
.mg2toggle{ display:inline-flex; margin-left:auto; margin-right:6px; border:1px solid var(--line); border-radius:7px; overflow:hidden; align-self:center; }
.mg2toggle button{ font-size:11px; font-weight:600; color:var(--t666); background:var(--bg); border:none; border-left:1px solid var(--line); padding:5px 10px; white-space:nowrap; }
.mg2toggle button:first-child{ border-left:none; }
.mg2toggle button.on{ background:var(--cta); color:var(--cta-ink); }
.mdhead .mg2toggle + .mdx{ margin-left:8px; }

/* badge colours mapped to MEANING (v2): green=editable, teal=verified,
   neutral=read-only, outline=permissionless, amber=proposed */
.mdrawer.mgv2 .mflag.read{ color:var(--t666); background:var(--chipbg); }
.mdrawer.mgv2 .mflag.ok{ color:var(--acc); background:var(--acc-bg); }

/* validation-pass field: label · input (optional @ prefix) · error + counter */
.mf2-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.mf2-inputrow{ display:flex; align-items:stretch; }
.mf2-inputrow.has-prefix{ border:1px solid var(--t888); border-radius:6px; overflow:hidden; background:var(--bg); }
.mf2-inputrow.has-prefix:focus-within{ border-color:var(--ink); box-shadow:0 0 0 3px var(--acc-bg); }
.mf2-prefix{ display:flex; align-items:center; padding:0 2px 0 9px; color:var(--t888); font-family:var(--mono); font-size:13px; }
.mf2-inputrow .mf-input{ flex:1; }
.mf2-inputrow.has-prefix .mf-input{ border:none; border-radius:0; }
.mf2-inputrow.has-prefix .mf-input:focus{ box-shadow:none; }
.mf2-meta{ display:flex; align-items:baseline; gap:8px; min-height:14px; }
.mf2-meta .mf-err{ flex:1; }
.mf2-count{ font-size:11px; font-family:var(--mono); color:var(--t999); margin-left:auto; white-space:nowrap; }
.mf2-count.over{ color:var(--neg); font-weight:600; }

/* amber (not error-red) caution — for always-on irreversibility notes */
.mf2-caution{ font-size:11.5px; line-height:1.45; color:var(--warnc); display:flex; gap:6px; }
.mf2-caution::before{ content:"\26A0"; }

/* no native resize grabber inside the v2 drawer (default-HTML tell) */
.mdrawer.mgv2 textarea.mf-input{ resize:none; }

/* ---------- v2 drawer MOBILE shell (UX-review fixes) ----------
   · header gets room: the version toggle drops to its own full-width row,
     identity chunks wrap whole (no mid-word breaks), name never splits
   · section rows KEEP their current-value preview (v1 hides it <420px —
     that rule still applies to the original for honest comparison); in v2
     the preview wraps to its own line under the title, truncated
   · the v2 mobile strip is vitals-only (price/mcap/vol) — the token name +
     verified badge live ONLY in the drawer header (kills the duplicate) */
@media (max-width:480px){
  .mdrawer.mgv2 .mdhead{ flex-wrap:wrap; row-gap:8px; }
  .mdrawer.mgv2 .mdhead .mt{ font-size:15px; white-space:nowrap; }
  .mdrawer.mgv2 .mdhead .msub{ flex-wrap:wrap; display:flex; row-gap:2px; }
  .mdrawer.mgv2 .mdhead .msub > *{ white-space:nowrap; }
  .mdrawer.mgv2 .mg2toggle{ order:10; flex-basis:100%; display:flex; margin:0; }
  .mdrawer.mgv2 .mg2toggle button{ flex:1; padding:7px 0; }
}
@media (max-width:420px){
  .mdrawer.mgv2 .msec .mst{ flex-wrap:wrap; }
  .mdrawer.mgv2 .msec .mst .mprev,
  .mdrawer.mgv2 .msec .mst .mprev-img{ display:inline-flex; order:9; flex-basis:100%;
    max-width:none; margin-top:1px; font-size:11px; overflow:hidden; text-overflow:ellipsis; }
}

/* ============================================================
   manage-flows.js — Manage-drawer flow UI (inline edit · modal · flow view)
   ============================================================ */
/* editable fields (inline edit) */
.mf-inline{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.mf-input{ width:100%; font:inherit; font-size:12.5px; color:var(--ink); background:var(--bg);
  border:1px solid var(--t888); border-radius:6px; padding:6px 8px; outline:none; }
textarea.mf-input{ min-height:52px; resize:vertical; line-height:1.4; }
.mf-input:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--acc-bg); }
.mf-input.err{ border-color:var(--neg); box-shadow:0 0 0 3px var(--neg-bg); }
.mf-err{ font-size:11px; color:var(--neg); line-height:1.35; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .15s ease, opacity .15s ease; }
.mf-err.show{ max-height:40px; opacity:1; }
.mf-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.mf-clic{ cursor:pointer; } .mf-clic:hover{ opacity:.82; }

/* submit states on any .mbtn driven by runSubmit */
.mbtn.busy{ opacity:.7; cursor:default; }
.mbtn.ok{ background:var(--pos); color:#fff; }
.mbtn:disabled{ opacity:.45; cursor:not-allowed; }

/* self-contained modal */
.mf-back{ position:fixed; inset:0; background:var(--scrim); z-index:90; opacity:0; transition:opacity .15s ease; }
.mf-back.open{ opacity:1; }
.mf-modal{ position:fixed; z-index:91; left:50%; top:50%; transform:translate(-50%,-46%);
  width:min(440px, calc(100% - 32px)); max-height:88vh; overflow:auto; opacity:0;
  background:var(--pop); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 60px var(--shadow);
  transition:opacity .15s ease, transform .15s ease; }
.mf-modal.open{ opacity:1; transform:translate(-50%,-50%); }
.mf-mhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 8px; }
.mf-mtitle{ font-size:15px; font-weight:700; color:var(--ink); }
.mf-x{ font-size:20px; line-height:1; color:var(--t666); background:none; border:none; cursor:pointer; padding:2px 4px; }
.mf-mbody{ padding:4px 16px 8px; display:flex; flex-direction:column; gap:12px; }
.mf-mfoot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px 16px; }
.mf-modal.danger .mf-mtitle{ color:var(--neg); }

/* flow view (in-drawer, back-navigable) */
.mf-view{ display:flex; flex-direction:column; }
.mf-vhead{ display:flex; align-items:center; gap:10px; padding:2px 0 14px; }
.mf-vback{ font-size:18px; line-height:1; color:var(--ink); background:none; border:none; cursor:pointer; padding:2px 6px 2px 0; }
.mf-vtitle{ font-size:15px; font-weight:700; color:var(--ink); }
.mf-vbody{ display:flex; flex-direction:column; gap:12px; }

/* upload dropzone (image flow) */
.mf-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1.5px dashed var(--t888); border-radius:10px; padding:20px; text-align:center; cursor:pointer;
  color:var(--t666); font-size:12px; background:var(--navfill); }
.mf-drop.over{ border-color:var(--ink); color:var(--ink); background:var(--acc-bg); }
.mf-drop .mf-upic{ width:26px; height:26px; opacity:.7; }
.mf-or{ text-align:center; font-size:11px; color:var(--t999); text-transform:uppercase; letter-spacing:.06em; }
.mf-flabel{ font-size:11px; font-weight:600; color:var(--t888); }
.mf-preview{ width:56px; height:56px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#8a63ff,#6b3ffb); flex-shrink:0; }
.mf-preview img{ width:100%; height:100%; object-fit:cover; display:block; }