/* ============================================================================
   Privacy Proxy — monochrome, premium, dimensional.
   System fonts only. No CDN. Works offline.
   Home base: black / white / greys. One earned accent = WHITE (primary action).
   Colour appears ONLY as money/status semantics (green good · amber caution · red danger).
   Depth via layered shadows + top-edge highlight, never a single flat blur.
   ========================================================================== */
:root{
  color-scheme:dark;

  /* ---- neutral ramp (OKLCH, hue 262, faint chroma — never dead grey) ---- */
  --n0:oklch(14.5% 0.006 262);   /* page floor */
  --n1:oklch(17.2% 0.007 262);   /* page */
  --n2:oklch(20.0% 0.008 262);   /* sunk wells / recessed */
  --n3:oklch(22.4% 0.009 262);   /* surface / card */
  --n4:oklch(25.2% 0.010 262);   /* raised card / hover */
  --n5:oklch(28.5% 0.011 262);   /* active / popover */
  --well:oklch(11.5% 0.005 262); /* input wells (darker than page) */

  --text:oklch(95.5% 0.004 262);
  --text-muted:oklch(76% 0.006 262);
  --text-faint:oklch(60% 0.008 262);
  --text-dim:oklch(48% 0.008 262);

  /* alpha borders composite over any surface; dark mode borders do shadow's job */
  --line:oklch(100% 0 0 / 0.08);
  --line-2:oklch(100% 0 0 / 0.12);
  --line-strong:oklch(100% 0 0 / 0.20);
  --hi:oklch(100% 0 0 / 0.06);   /* top-edge highlight */
  --hi-2:oklch(100% 0 0 / 0.09);

  /* ONE earned accent = near-white, for the primary action + focus */
  --primary:oklch(97% 0.003 262);
  --primary-hover:oklch(100% 0 0);
  --primary-ink:oklch(17% 0.006 262);
  --focus:oklch(85% 0.02 262);

  /* semantic — muted, used ONLY for money & status meaning */
  --good:oklch(74% 0.115 158);
  --good-dim:oklch(66% 0.10 158);
  --amber:oklch(80% 0.105 82);
  --amber-dim:oklch(72% 0.10 82);
  --danger:oklch(68% 0.145 25);
  --danger-dim:oklch(62% 0.14 25);
  --good-soft:oklch(74% 0.115 158 / 0.10);
  --amber-soft:oklch(80% 0.105 82 / 0.10);
  --danger-soft:oklch(68% 0.145 25 / 0.11);

  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace;

  /* radius scale (nested law: inner = outer − padding) */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:24px; --r-full:999px;

  /* layered elevation (contact + ambient, low alpha) + top highlight */
  --e1:0 1px 2px oklch(0% 0 0/0.45), inset 0 1px 0 var(--hi);
  --e2:0 1px 2px oklch(0% 0 0/0.40), 0 4px 10px oklch(0% 0 0/0.38), inset 0 1px 0 var(--hi);
  --e3:0 1px 2px oklch(0% 0 0/0.45), 0 8px 20px oklch(0% 0 0/0.40), 0 20px 40px oklch(0% 0 0/0.34), inset 0 1px 0 var(--hi-2);
  --e4:0 2px 4px oklch(0% 0 0/0.5), 0 16px 36px oklch(0% 0 0/0.5), 0 40px 72px oklch(0% 0 0/0.4), inset 0 1px 0 var(--hi-2);

  --ease:.22s cubic-bezier(.2,.7,.2,1);
  --ease-out:.18s cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 620px at 82% -14%, oklch(100% 0 0 / 0.035), transparent 60%),
    radial-gradient(900px 560px at -6% -6%, oklch(100% 0 0 / 0.02), transparent 55%),
    var(--n1);
  color:var(--text);
  font-family:var(--ui);
  font-size:16px;line-height:1.5;letter-spacing:-.011em;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;
}
/* ---- MATERIAL PASS (ported from the approved A4 mockup) ----
   Film grain + vignette are the two cheapest wins against a flat CSS look.
   Fixed overlays, pointer-events:none, so they never intercept a click. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.28;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
  mix-blend-mode:overlay;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:98;
  background:radial-gradient(120% 90% at 50% 40%, transparent 54%, oklch(0% 0 0/.40) 100%);
}

a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-2);transition:var(--ease-out)}
a:hover{border-bottom-color:var(--text-muted)}
code{color:var(--text-muted);font-family:var(--mono);font-size:.92em}
b{color:var(--text);font-weight:640}
::selection{background:oklch(100% 0 0 / 0.16)}
[hidden]{display:none !important}

/* ---- inline SVG icon primitive ---- */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-15{stroke-width:1.5}

/* ============================= HEADER ============================= */
header{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 24px;background:oklch(15.5% 0.006 262 / 0.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px}
.brand .logo{display:inline-flex;align-items:center;gap:9px;font-weight:680;font-size:18px;
  letter-spacing:-.02em;color:var(--text)}
.brand .logo .ico{width:20px;height:20px;color:var(--text)}
.brand .sub{color:var(--text-dim);font-size:12.5px;letter-spacing:0;font-weight:450}
.status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);
  background:var(--n3);border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-full);box-shadow:var(--e1)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim);transition:var(--ease)}
.dot.ok{background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.dot.bad,.dot.err{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}

/* ============================= SAFEBAR (monochrome) ============================= */
.safebar{
  display:flex;align-items:center;gap:9px;justify-content:center;
  background:var(--n1);color:var(--text-muted);
  padding:10px 20px;font-size:12.5px;font-weight:480;letter-spacing:-.005em;
  border-bottom:1px solid var(--line);
}
/* The safety line is important but it is not the product. Keep it quiet and
   compact on desktop so it does not read as the page's headline. */
@media (min-width:1024px){
  .safebar{padding:7px 20px;font-size:11.5px;color:var(--text-dim)}
  .walletbar{padding:9px 24px;gap:11px}
  .pk-warn-text{font-size:11.5px;margin:4px 0;color:var(--text-muted)}
  .pk-warn-text b{color:var(--amber)}
  /* Redundant with the pasted-key panel sitting directly beneath it. The burner
     warning itself is NEVER hidden - that is the one real risk on this page. */
  .wallet-warn{display:none}
  .pk-box details>summary{padding:2px 0}
}

/* ============ CONNECT STRIP: one compact row, not three stacked bars ============
   Flash: "connect wallet / connect key bars are taking space and not looking
   good". The safety line, the wallet button and the pasted-key panel were three
   full-width blocks stacked above the product. They now sit on ONE row that
   wraps gracefully, and the key panel is collapsed until it is actually needed.
   The burner warning is never removed - it is the one real risk on this page. */
@media (min-width:900px){
  .safebar{
    display:flex;order:2;flex:1 1 320px;min-width:0;justify-content:flex-start;
    background:transparent;border:0;padding:0;margin:0;
    font-size:11px;line-height:1.4;color:var(--text-dim);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .safebar .ico{width:13px;height:13px}

  .walletbar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:10px 24px 10px calc(206px + 24px);
    background:linear-gradient(180deg, var(--n2), var(--n1));
    border-bottom:1px solid var(--line);
  }
  .walletbar #wallet-connect{order:1;flex:none;padding:8px 14px;font-size:13px}
  .walletbar .wallet-info{order:1}
  .pk-box{order:3;flex:0 1 auto;width:auto;margin:0}

  /* collapsed: a quiet pill. open: a proper panel on its own line. */
  .pk-box details>summary{
    display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
    border:1px solid var(--line-2);border-radius:var(--r-full);
    background:var(--n3);color:var(--text-muted);font-size:12px;white-space:nowrap;
    box-shadow:var(--e1);transition:var(--ease-out);
  }
  .pk-box details>summary:hover{color:var(--text);border-color:var(--line-strong)}
  .pk-box details[open]{flex-basis:100%;width:100%}
  .pk-box details[open]>summary{margin-bottom:9px}
  .pk-box details[open]{
    padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);
    background:var(--well);box-shadow:var(--e1)
  }
  #pk-enabled-ui .controls{gap:8px}
  #pk-key{min-width:min(420px,48vw)}
}

/* The safety line is not the headline. Keep it quiet and out of the way. */
@media (max-width:899px){
  .safebar{padding:8px 16px;font-size:11px;line-height:1.45;color:var(--text-dim);text-align:left}
  .walletbar{padding:10px 16px;gap:10px}
  .pk-box details>summary{font-size:12.5px}
}
.safebar .ico{width:14px;height:14px;color:var(--text-faint)}

/* ============================= WALLET BAR ============================= */
.walletbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 24px;background:var(--n0);border-bottom:1px solid var(--line)}
.wallet-info{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
.wallet-info .wl{display:flex;align-items:center;gap:7px}
.wallet-info .wl .k{color:var(--text-dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.wallet-info b{color:var(--text)}
.wallet-warn{color:var(--text-muted);font-size:12.5px}

/* ============================= BUTTONS ============================= */
button{
  cursor:pointer;font-family:var(--ui);font-size:14px;font-weight:560;letter-spacing:-.01em;
  padding:11px 17px;border-radius:var(--r-md);
  border:1px solid var(--line-2);background:var(--n4);color:var(--text);
  transition:var(--ease-out);box-shadow:var(--e1);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
button .ico{width:15px;height:15px}
button:hover{background:var(--n5);border-color:var(--line-strong)}
button:active{transform:translateY(1px);box-shadow:var(--e1)}
button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* PRIMARY = the one earned accent: near-white, dimensional */
button.primary{
  background:linear-gradient(180deg,var(--primary-hover),var(--primary));
  border:1px solid oklch(100% 0 0 / 0.6);color:var(--primary-ink);font-weight:640;
  box-shadow:0 1px 2px oklch(0% 0 0/0.5),0 6px 16px oklch(0% 0 0/0.35),inset 0 1px 0 oklch(100% 0 0/0.9);
}
button.primary:hover{filter:brightness(1.02);box-shadow:0 2px 4px oklch(0% 0 0/0.5),0 10px 24px oklch(0% 0 0/0.4),inset 0 1px 0 oklch(100% 0 0/0.9)}
button.primary:focus-visible{outline:none;box-shadow:0 0 0 2px var(--n1),0 0 0 4px var(--focus),var(--e2)}
button.big{font-size:15px;padding:14px 24px;border-radius:var(--r-md)}
button.warn{background:var(--amber-soft);border-color:oklch(80% 0.105 82 / 0.28);color:var(--amber);box-shadow:var(--e1)}
button.warn:hover{background:oklch(80% 0.105 82 / 0.16)}
button.ghost{background:transparent;border-color:var(--line-2);color:var(--text-muted);padding:8px 14px;font-size:13px;box-shadow:none}
button.ghost:hover{color:var(--text);border-color:var(--line-strong);background:oklch(100% 0 0/0.03)}
button:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none;box-shadow:none}

/* ============================= NAV TABS ============================= */
nav#tabs{display:flex;gap:2px;padding:0 20px;background:var(--n0);border-bottom:1px solid var(--line);
  flex-wrap:wrap;overflow-x:auto;scrollbar-width:none}
nav#tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;border:none;box-shadow:none;color:var(--text-dim);padding:14px 15px;
  font-size:13px;font-weight:560;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;border-radius:0}
.tab:hover{color:var(--text);background:transparent;border-color:transparent}
.tab.active{color:var(--text);border-bottom-color:var(--text)}
.tab:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;border-radius:var(--r-xs)}

/* ============================= LAYOUT ============================= */
/* Two-column shell: the wizard keeps its comfortable 720px measure and the
   rail sits beside it. Below 1180px the rail is hidden and the horizontal
   strip above takes over, so nothing is lost on a phone. */
.shell{display:block}
main{padding:28px 20px 72px;max-width:720px;margin:0 auto}

/* ===================== CONSOLE LAYOUT (Concept A, approved) =====================
   Sections live in a fixed LEFT sidebar (Flash: "tabs on the top left").
   The right rail keeps the live sale + Start. Breakpoint is 1024px: at 1180 the
   whole thing vanished on a normal laptop window and Flash saw the old design.
   Below 1024 the sidebar hides and the horizontal #tabs strip takes over. */
#sidebar{display:none}

@media (min-width:1024px){
  nav#tabs{display:none}
  header{padding-left:calc(206px + 24px)}
  .safebar,.walletbar,.pk-banner{padding-left:calc(206px + 24px)}

  #sidebar{
    display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:206px;z-index:40;
    padding:15px 11px;
    background:linear-gradient(180deg, var(--n2) 0%, var(--n1) 44%, var(--n0) 100%);
    border-right:1px solid var(--line);
    box-shadow:14px 0 34px -18px oklch(0% 0 0/.85), inset -1px 0 0 oklch(0% 0 0/.35);
  }
  #sidebar::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:oklch(100% 0 0/.10)}

  .shell{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:24px;
    max-width:1300px;margin:0 auto;padding:0 24px 0 calc(206px + 24px);align-items:start}
  main{padding:22px 0 90px;max-width:none;margin:0;min-width:0}
  #rail{position:sticky;top:14px;padding:22px 0 0;display:flex;flex-direction:column;gap:12px}
  /* The rail's "Your sale" card IS the stepper on desktop - keeping the sticky
     horizontal stepper too was duplication that ate the first screen. */
  .wprogress{display:none}
}
@media (min-width:1440px){
  .shell{grid-template-columns:minmax(0,1fr) 300px;gap:30px;max-width:1400px}
}

#rail{display:none}
@media (min-width:1024px){#rail{display:flex}}

/* ---- sidebar internals ---- */
.sb-logo{display:flex;align-items:center;gap:10px;font-weight:690;font-size:14.5px;
  letter-spacing:-.022em;padding:0 5px 14px;color:var(--text)}
.sb-badge{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(160deg, var(--n5,oklch(30% .011 262)), var(--n3) 55%, var(--n2));
  border:1px solid var(--line-2);
  box-shadow:0 1px 2px oklch(0% 0 0/.42), 0 6px 14px -3px oklch(0% 0 0/.40),
             inset 0 1px 0 oklch(100% 0 0/.10), 0 0 20px -6px oklch(100% 0 0/.35)}
.sb-badge .ico{width:15px;height:15px;filter:drop-shadow(0 1px 1px oklch(0% 0 0/.6))}
.sb-kicker{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);padding:0 5px 8px}
.sb-nav{display:flex;flex-direction:column;gap:2px}
.sb-tab{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:var(--r-md);color:var(--text-muted);
  font-family:var(--ui);font-size:13px;font-weight:560;padding:8px 10px;cursor:pointer;
  transition:var(--ease-out);box-shadow:none}
.sb-tab .ico{width:15px;height:15px;color:var(--text-dim);transition:var(--ease-out)}
.sb-tab:hover{background:oklch(100% 0 0/.045);border-color:var(--line);color:var(--text);transform:translateX(1px)}
.sb-tab:hover .ico{color:var(--text)}
.sb-tab.active{color:var(--text);border-color:var(--line-2);
  background:linear-gradient(158deg, oklch(30% .011 262), var(--n3) 62%, var(--n2));
  box-shadow:0 1px 2px oklch(0% 0 0/.42), 0 6px 14px -3px oklch(0% 0 0/.40),
             inset 0 1px 0 oklch(100% 0 0/.10), 0 0 24px -8px oklch(100% 0 0/.32)}
.sb-tab.active .ico{color:var(--text);filter:drop-shadow(0 1px 2px oklch(0% 0 0/.7))}
.sb-tab.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2.5px;
  border-radius:var(--r-full);
  background:linear-gradient(180deg, oklch(100% 0 0/.95), oklch(100% 0 0/.35));
  box-shadow:0 0 12px oklch(100% 0 0/.7)}
.sb-tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--n1),0 0 0 4px var(--focus)}
.sb-foot{margin-top:auto;padding:10px 6px 0;border-top:1px solid var(--line)}
.sb-chain{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--text-dim);line-height:1.35}
.sb-led{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 3px oklch(74% .115 158/.16), 0 0 12px oklch(74% .115 158/.9);
  animation:sbPulse 2.6s ease-in-out infinite}
.sb-led.bad{background:var(--danger);box-shadow:0 0 0 3px oklch(68% .145 25/.16), 0 0 12px oklch(68% .145 25/.9)}
@keyframes sbPulse{50%{opacity:.5;transform:scale(.92)}}

.rail-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--n2);
  padding:14px 14px 15px;box-shadow:var(--e1)}
.rail-title{color:var(--text-faint);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 10px;padding:0 2px}

/* --- rail navigation --- */
.rail-nav{padding:14px 8px 10px}
.rail-nav .rail-title{padding-left:8px}
.rail-tab{display:grid;grid-template-columns:18px 1fr;gap:2px 11px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;box-shadow:none;border-radius:var(--r-md);
  padding:9px 10px;margin:0;cursor:pointer;transition:var(--ease-out);color:var(--text-muted)}
.rail-tab .ico{width:17px;height:17px;grid-row:1/3;align-self:center;color:var(--text-dim);transition:var(--ease-out)}
.rail-tab-t{font-size:13.5px;font-weight:600;color:var(--text-muted);letter-spacing:-.012em;line-height:1.3}
.rail-tab-s{font-size:11px;color:var(--text-dim);line-height:1.35}
.rail-tab:hover{background:oklch(100% 0 0/0.035);border-color:var(--line)}
.rail-tab:hover .rail-tab-t,.rail-tab:hover .ico{color:var(--text)}
.rail-tab.active{background:linear-gradient(155deg,var(--n4),var(--n3));border-color:var(--line-2);
  box-shadow:var(--e1),inset 2px 0 0 var(--text)}
.rail-tab.active .rail-tab-t{color:var(--text)}
.rail-tab.active .ico{color:var(--text)}
.rail-tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--n1),0 0 0 4px var(--focus)}

/* --- rail step list (mirrors the wizard stepper) ---
   NOTE: these rows also carry `.wstep` so they reuse the stepper's dot styling
   and its existing click/keyboard handlers. `.wstep` is declared LATER in this
   file, so a bare `.rail-step` selector loses the cascade at equal specificity
   and the rows collapse into the horizontal stepper's centred column layout.
   Every layout rule below is therefore scoped to `.rail-steps` to win. */
.rail-steps{list-style:none;margin:0;padding:0;position:relative}
.rail-steps::before{content:"";position:absolute;left:14px;top:16px;bottom:16px;width:1px;background:var(--line-2)}
.rail-steps .rail-step{flex:none;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:10px;
  padding:7px 6px;border-radius:var(--r-sm);cursor:default;position:relative;transition:var(--ease-out)}
.rail-steps .rail-step .wstep-dot{position:relative;z-index:1}
.rail-steps .rail-step-b{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.rail-steps .rail-step-n{font-size:13px;font-weight:600;color:var(--text-dim);letter-spacing:-.012em}
.rail-steps .rail-step-s{font-size:11px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rail-steps .rail-step.done,.rail-steps .rail-step.active{cursor:pointer}
.rail-steps .rail-step.done:hover,.rail-steps .rail-step.active:hover{background:oklch(100% 0 0/0.035)}
.rail-steps .rail-step.done .rail-step-n{color:var(--text-muted)}
.rail-steps .rail-step.active .rail-step-n{color:var(--text)}
.rail-steps .rail-step:focus-visible{outline:none;box-shadow:0 0 0 2px var(--n1),0 0 0 4px var(--focus)}

/* --- rail run mirror --- */
.rail-run-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--text-muted);margin-bottom:9px}
.rail-run-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-dim);flex:none}
.rail-run-status.live::before{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);animation:runnerPulse 1.6s ease-in-out infinite}
.rail-run-status.good::before{background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.rail-run-status.bad::before{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.rail-run-bar{height:6px;border-radius:var(--r-full);background:var(--well);border:1px solid var(--line);overflow:hidden}
.rail-run-fill{height:100%;width:0;background:linear-gradient(90deg,var(--text-faint),var(--text));transition:width .35s var(--ease)}
.rail-run-metric{margin-top:8px;font-size:11.5px;color:var(--text-dim);line-height:1.5}
.rail-jump{width:100%;margin-top:11px;justify-content:center}
.panel{display:none;animation:fade .3s var(--ease)}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

h2{font-size:22px;margin:0 0 14px;font-weight:680;color:var(--text);letter-spacing:-.022em}
h2 .hint{color:var(--text-dim);font-weight:400;font-size:12.5px;margin-left:10px;letter-spacing:0}
.helper{color:var(--text-muted);font-size:14px;margin:0 0 16px;max-width:62ch;line-height:1.55}

/* ============================= HERO / INTRO ============================= */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--n4),var(--n3) 60%,var(--n2));
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:28px 28px 24px;margin-bottom:22px;box-shadow:var(--e3);
}
/* On a laptop the marketing block was pushing the FIRST control below the fold
   (measured: step 1 began at y=595, "Find my token" at y=805 on a 1280x800
   window). The product must start on the first screen. */
@media (min-width:1024px){
  .hero{padding:20px 24px 18px;margin-bottom:16px}
  .hero h1{font-size:23px;margin:0 0 6px}
  .hero .lede{font-size:13.5px;max-width:66ch}
  details.hero-more{margin-top:11px;padding-top:10px}
  .hero .dollar-row{margin-top:11px !important}
}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 150px at 100% 0%, oklch(100% 0 0/0.05), transparent 70%)}
.hero>*{position:relative}
.hero h1{font-size:29px;line-height:1.08;margin:0 0 10px;font-weight:720;letter-spacing:-.032em;color:var(--text)}
.hero .lede{font-size:15px;color:var(--text-muted);margin:0;max-width:54ch;line-height:1.55}
.hero .lede b{color:var(--text)}
details.hero-more{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
details.hero-more>summary{cursor:pointer;color:var(--text-muted);font-size:13px;font-weight:560;
  list-style:none;user-select:none;display:inline-flex;align-items:center;gap:7px;transition:var(--ease-out)}
details.hero-more>summary::-webkit-details-marker{display:none}
details.hero-more>summary .chev{transition:var(--ease);width:14px;height:14px;color:var(--text-faint)}
details.hero-more[open]>summary .chev{transform:rotate(90deg)}
details.hero-more>summary:hover{color:var(--text)}
details.hero-more .more-body{padding-top:12px}
details.hero-more p{margin:0 0 10px;font-size:13.5px;color:var(--text-muted);line-height:1.6}
details.hero-more p b{color:var(--text)}
.hero .honest{color:var(--amber);background:var(--amber-soft);border:1px solid oklch(80% 0.105 82 / 0.2);
  border-radius:var(--r-sm);padding:11px 14px;margin-top:4px;font-size:13px;line-height:1.6}

.dollar-row{margin:16px 0 0}
.dollar-row label{flex-direction:row;flex-wrap:wrap;align-items:center;gap:9px;text-transform:none;
  color:var(--text-muted);font-size:13px;letter-spacing:0;font-weight:450}
.dollar-row label .ico{width:15px;height:15px;color:var(--text-faint)}
.dollar-row input{max-width:130px}
.dollar-row .muted{color:var(--text-dim)}

/* ============================= CONTROLS / INPUTS ============================= */
.controls{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:14px 0}
.controls.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
label{display:flex;flex-direction:column;gap:7px;font-size:11px;color:var(--text-dim);
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}
label.inline{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-weight:450;color:var(--text-muted)}
.big-label{font-size:12.5px;color:var(--text-muted);text-transform:none;letter-spacing:.01em}
label.grow{flex:1}

input[type=text],input[type=number],input[type=password],input[type=datetime-local],textarea,select{
  background:var(--well);border:1px solid var(--line-2);color:var(--text);
  padding:12px 14px;font-size:15px;border-radius:var(--r-sm);width:100%;
  transition:var(--ease-out);font-family:var(--mono);box-shadow:inset 0 1px 2px oklch(0% 0 0/0.3);
}
select,textarea{font-family:var(--ui)}
input::placeholder,textarea::placeholder{color:var(--text-dim)}
input[type=text],input[type=password]{min-width:200px}
input[type=number]{min-width:110px}
input:hover,textarea:hover,select:hover{border-color:var(--line-strong)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent;background:var(--n0)}
input[type=range]{min-width:240px;height:26px;padding:0;background:transparent;border:none;box-shadow:none;accent-color:var(--text);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--text);width:16px;height:16px}

/* ============================= STATS ============================= */
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.stats:empty{display:none}
.stat{background:var(--n3);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;min-width:128px;flex:1 1 auto;box-shadow:var(--e1);transition:var(--ease-out)}
.stat:hover{border-color:var(--line-2)}
.stat .k{font-size:10.5px;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.stat .v{font-size:19px;color:var(--text);margin-top:5px;word-break:break-word;font-weight:640;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat.good .v{color:var(--good)}
.stat.bad .v{color:var(--danger)}
.stat.warn .v{color:var(--amber)}

/* ============================= TABLES ============================= */
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
th,td{text-align:right;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--text-dim);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  position:sticky;top:0;background:var(--n2)}
td:first-child,th:first-child{text-align:left}
tr:hover td{background:oklch(100% 0 0/0.02)}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.loss-lo{color:var(--good)}
.loss-mid{color:var(--amber)}
.loss-hi{color:var(--danger);font-weight:680}
.mono-addr{font-size:12px;color:var(--text-muted);font-family:var(--mono)}
.tablebox{overflow:auto;max-height:460px;border:1px solid var(--line);border-radius:var(--r-md)}

/* ============================= MESSAGES (icon via CSS mask) ============================= */
.msg{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.msg:empty{margin-top:0}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--good)}
.msg.warn{color:var(--amber)}
.msg.ok:not(:empty)::before,.msg.err:not(:empty)::before,.msg.warn:not(:empty)::before{
  content:"";display:inline-block;width:1em;height:1em;vertical-align:-0.14em;margin-right:.45em;
  background:currentColor;-webkit-mask:center/contain no-repeat var(--mi);mask:center/contain no-repeat var(--mi)}
.msg.ok{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.msg.err{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E")}
.msg.warn{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E")}
.spin{color:var(--text-muted);position:relative;padding-left:22px;display:inline-block}
.spin::before{content:"";position:absolute;left:0;top:50%;width:13px;height:13px;margin-top:-7px;
  border:2px solid var(--line-strong);border-top-color:var(--text);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--text-dim);font-size:12.5px}
.good{color:var(--good)}
.bad{color:var(--danger)}

.danger-box{background:var(--danger-soft);border:1px solid oklch(68% 0.145 25 / 0.28);border-left:2px solid var(--danger);
  padding:14px 16px;border-radius:var(--r-sm);margin-bottom:16px;color:oklch(84% 0.08 25);font-size:13.5px;line-height:1.65}
.danger-box code{color:oklch(80% 0.1 25)}

footer{color:var(--text-dim);font-size:12px;text-align:center;padding:28px;border-top:1px solid var(--line);margin-top:44px}

/* ============================================================================
   STICKY PROGRESS HEADER
   ========================================================================== */
.wprogress{position:sticky;top:0;z-index:30;margin:-28px -20px 24px;padding:15px 20px 0;
  background:var(--n1);box-shadow:0 10px 26px -14px oklch(0% 0 0/0.9);border-bottom:1px solid var(--line)}
.wprogress-inner{max-width:720px;margin:0 auto}
.wsteps{list-style:none;display:flex;justify-content:space-between;gap:6px;margin:0;padding:0}
.wstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:none;
  box-shadow:none;padding:2px 0 13px;cursor:default;position:relative}
.wstep .wstep-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:640;color:var(--text-faint);background:var(--n3);
  border:1px solid var(--line-2);transition:var(--ease);box-shadow:var(--e1);font-variant-numeric:tabular-nums}
.wstep .wstep-dot .ico{width:14px;height:14px;display:none}
.wstep .wstep-name{font-size:11px;font-weight:550;letter-spacing:0;color:var(--text-dim);text-transform:none;transition:var(--ease)}
.wstep.done{cursor:pointer}
.wstep.done .wstep-dot{background:var(--n4);border-color:var(--line-strong);color:var(--text)}
.wstep.done .wstep-dot span{display:none}
.wstep.done .wstep-dot .ico{display:block}
.wstep.done .wstep-name{color:var(--text-muted)}
.wstep.active .wstep-dot{background:linear-gradient(180deg,var(--primary-hover),var(--primary));
  border-color:oklch(100% 0 0/0.7);color:var(--primary-ink);
  box-shadow:0 0 0 4px oklch(100% 0 0/0.08),0 2px 8px oklch(0% 0 0/0.5);transform:scale(1.04)}
.wstep.active .wstep-name{color:var(--text)}
.wstep.done:hover .wstep-dot{border-color:var(--text-faint)}
.wstep:focus-visible{outline:none}
.wstep:focus-visible .wstep-dot{outline:2px solid var(--focus);outline-offset:2px}
.wbar{height:2px;background:var(--line);border-radius:var(--r-full);overflow:hidden;margin:0 0 -1px}
.wbar-fill{height:100%;width:0;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--text-faint),var(--text));transition:width .45s var(--ease)}

/* ============================================================================
   STEPPER CARDS
   ========================================================================== */
.step{border:1px solid var(--line);border-radius:var(--r-xl);margin-bottom:14px;background:var(--n2);
  overflow:hidden;transition:var(--ease);box-shadow:var(--e1)}
.step.active{border-color:var(--line-2);box-shadow:var(--e3);background:linear-gradient(180deg,var(--n3),var(--n2))}
.step.locked{opacity:.46;pointer-events:none}
.step.locked .step-body,.step.done .step-body{display:none}
.step-head{display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:default}
.step.active .step-head{padding-bottom:6px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;
  border-radius:50%;background:var(--n4);color:var(--text-muted);font-weight:680;font-size:13px;
  border:1px solid var(--line-2);box-shadow:var(--e1);font-variant-numeric:tabular-nums}
.step.active .step-n{background:linear-gradient(180deg,var(--primary-hover),var(--primary));color:var(--primary-ink);border-color:oklch(100% 0 0/0.6)}
.step.done .step-n{color:var(--text)}
.step.done .step-n span{display:none}
.step.done .step-n::after{content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:center/contain no-repeat var(--mi-check);mask:center/contain no-repeat var(--mi-check)}
:root{--mi-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.step-t{font-size:17.5px;color:var(--text);font-weight:660;letter-spacing:-.022em}
.step-summary{color:var(--text-muted);font-size:13px;margin-left:2px;font-variant-numeric:tabular-nums}
.step.done .step-summary::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.35em;
  vertical-align:-0.05em;background:var(--good);-webkit-mask:center/contain no-repeat var(--mi-check);mask:center/contain no-repeat var(--mi-check)}
.edit-btn{margin-left:auto;background:transparent;border-color:var(--line-2);color:var(--text-muted);
  padding:7px 15px;font-size:12px;border-radius:var(--r-full);box-shadow:none}
.edit-btn:hover{color:var(--text);border-color:var(--line-strong);background:transparent}
.step-body{padding:6px 22px 22px}
.step.active .step-body{animation:fade .3s var(--ease)}
.step-body>.helper{margin-top:8px}

/* ===================== PER-STEP GUIDE (Flash, 2026-08-15) =====================
   Every step carries a collapsed "How this step works" explainer. Collapsed by
   default so experienced users are never slowed down, but always one click away
   for anyone who needs it. Deliberately quiet styling: this is help, not an
   alert, and it must not compete with the actual controls. */
.guide{margin:0 0 18px;border:1px solid var(--line,rgba(255,255,255,0.08));
  border-radius:10px;background:var(--surface-2,rgba(255,255,255,0.02));overflow:hidden}
.guide>summary{cursor:pointer;list-style:none;padding:11px 15px;font-size:13px;
  font-weight:500;color:var(--text-dim);display:flex;align-items:center;gap:9px;
  user-select:none;transition:color .12s ease}
.guide>summary::-webkit-details-marker{display:none}
.guide>summary::before{content:"";width:15px;height:15px;flex:none;
  background:currentColor;opacity:.75;
  -webkit-mask:var(--guide-icon) center/contain no-repeat;
  mask:var(--guide-icon) center/contain no-repeat}
.guide>summary::after{content:"";margin-left:auto;width:8px;height:8px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.5;transition:transform .16s ease}
.guide[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.guide>summary:hover{color:var(--text)}
.guide[open]>summary{color:var(--text);border-bottom:1px solid var(--line,rgba(255,255,255,0.07))}
.guide-in{padding:14px 16px 16px;font-size:13.5px;line-height:1.62;color:var(--text-muted);max-width:70ch}
.guide-in p{margin:0 0 11px}
.guide-in p:last-child{margin-bottom:0}
.guide-in b{color:var(--text);font-weight:560}
.guide-in i{color:var(--text-dim);font-style:italic}
.guide-in code{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);
  background:rgba(255,255,255,0.05);padding:1px 5px;border-radius:4px}
.guide-in ol,.guide-in ul{margin:0 0 11px;padding-left:20px}
.guide-in li{margin:0 0 6px}
.guide-in li:last-child{margin-bottom:0}
.guide-in ol{counter-reset:g}
.guide-tip{border-left:2px solid var(--line,rgba(255,255,255,0.16));padding-left:12px;
  color:var(--text-dim);font-size:13px}
:root{--guide-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><circle cx='12' cy='12' r='9.5'/><path d='M12 16.5v-5'/><path d='M12 7.6h.01'/></svg>")}
@media (max-width:720px){
  .guide-in{font-size:13px;padding:12px 13px 14px}
  .guide>summary{padding:10px 13px;font-size:12.5px}
}

/* choice pills */
.choice-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.choice{flex-direction:row;align-items:center;gap:9px;font-size:14px;color:var(--text);
  background:var(--n3);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 15px;cursor:pointer;
  transition:var(--ease-out);text-transform:none;letter-spacing:0;font-weight:450;box-shadow:var(--e1)}
.choice:hover{border-color:var(--line-strong);background:var(--n4)}
.choice:has(input:checked){border-color:var(--line-strong);background:var(--n4);box-shadow:0 0 0 1px var(--line-2),var(--e1)}
.bignum{font-size:28px;color:var(--text);font-variant-numeric:tabular-nums;min-width:84px;text-align:center;font-weight:680;letter-spacing:-.035em;font-family:var(--mono)}

.confirm-line{font-size:14.5px;color:var(--good);margin:14px 0 0;font-weight:500;display:flex;align-items:center;gap:8px}
.confirm-line:empty{margin:0}
.confirm-line .ico{width:16px;height:16px}
.confirm-line .muted{margin-left:2px}

/* ============================================================================
   MONEY MOMENT — the single most important element
   ========================================================================== */
.money-card{margin:18px 0}
.money-card:empty{display:none}
.money-hero{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(168deg,var(--n4),var(--n3) 55%,var(--n2));box-shadow:var(--e3);padding:22px 24px}
.money-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px 130px at 100% -10%, var(--good-soft), transparent 72%)}
.money-hero>*{position:relative}
.mh-cap{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-dim);font-weight:640;margin-bottom:6px}
.mh-value{font-family:var(--mono);font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;
  color:var(--good);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px}
.mh-value .cur{font-size:24px;color:var(--text-muted);font-weight:500;letter-spacing:-.02em}
.mh-value .cents{color:var(--good-dim)}
.mh-sub{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.mh-item{flex:1 1 140px;background:var(--well);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;
  box-shadow:inset 0 1px 0 var(--hi)}
.mh-item .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-weight:600}
.mh-item .n{font-family:var(--mono);font-size:17px;margin-top:4px;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:550}
.mh-item.loss .n{color:var(--amber)}
.mh-item .pct{font-size:12px;color:var(--text-dim);margin-left:5px}
.money-hero.danger{border-color:oklch(68% 0.145 25 / 0.4)}
.money-hero.danger::before{background:radial-gradient(360px 130px at 100% -10%, var(--danger-soft), transparent 72%)}
.money-hero.danger .mh-value{color:var(--danger)}
.money-hero.danger .mh-value .cents{color:var(--danger-dim)}
.money-note{margin-top:12px;font-size:12.5px;color:var(--text-muted);line-height:1.55;max-width:56ch}
.money-note.warn{color:var(--amber)}

/* pool share bar */
.poolbar-wrap{margin:14px 0 4px}
.poolbar-wrap:empty{display:none}
.poolbar-lbl{font-size:12.5px;color:var(--text-muted);margin-bottom:7px}
.poolbar-lbl b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.poolbar{height:8px;background:var(--well);border:1px solid var(--line);border-radius:var(--r-full);overflow:hidden;box-shadow:inset 0 1px 2px oklch(0% 0 0/0.3)}
.poolbar-fill{height:100%;background:linear-gradient(90deg,var(--text-faint),var(--text));border-radius:var(--r-full);min-width:3px;transition:width .5s var(--ease)}
.poolbar-fill.over{background:linear-gradient(90deg,var(--danger-dim),var(--danger))}

/* ============================= SPEED PRESETS ============================= */
/* ===================== LIVE MARKET PANEL =====================
   Ported from the approved A4 mockup. Every value is filled from /api/market
   (real reserves, real supply, real Swap events) - never hardcoded. */
.market{position:relative;border-radius:var(--r-xl);padding:13px 15px 10px;overflow:hidden;margin-top:18px;
  background:linear-gradient(168deg, var(--n3) 0%, var(--n2) 55%, oklch(12.5% .005 262) 100%);
  border:1px solid var(--line-2);
  box-shadow:0 2px 4px oklch(0% 0 0/.46), 0 14px 34px -8px oklch(0% 0 0/.55),
             inset 0 1px 0 oklch(100% 0 0/.21), inset 0 0 60px -20px oklch(0% 0 0/.9)}
.market::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg, oklch(100% 0 0/.07), transparent 40%)}
.mk-head{position:relative;display:flex;align-items:baseline;gap:9px;margin-bottom:3px;flex-wrap:wrap}
.mk-t{font-size:12.5px;font-weight:650;letter-spacing:-.015em;color:var(--text)}
.mk-s{font-size:10.5px;color:var(--text-dim)}
.mk-lg{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:10px;color:var(--text-dim)}
.mk-lg i{display:inline-flex;align-items:center;gap:5px;font-style:normal}
.mk-dot-sell{width:7px;height:7px;border-radius:50%;background:oklch(100% 0 0/.95);box-shadow:0 0 7px oklch(100% 0 0/.8)}
.mk-dot-buy{width:6px;height:6px;border-radius:50%;border:1px solid oklch(100% 0 0/.5)}
.mk-dot-plan{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px oklch(80% .105 82/.9)}
.mk-wrap{position:relative;height:118px;margin-top:5px}
.mk-wrap svg{display:block;width:100%;height:118px;overflow:visible}
.mk-scan{position:absolute;top:0;bottom:0;width:110px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,oklch(100% 0 0/.05),transparent);
  animation:mkScan 7s linear infinite}
@keyframes mkScan{0%{left:-110px}100%{left:100%}}
.mk-foot{position:relative;display:flex;gap:16px;margin-top:7px;padding-top:8px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.mk-c .k{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}
.mk-c .v{font-size:12.5px;font-weight:640;letter-spacing:-.02em;margin-top:2px;color:var(--text);
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.mk-c .v small{font-size:10px;color:var(--text-dim);font-weight:500}

.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0;perspective:900px}
/* Selected preset physically lifts and tilts toward the top-left key light,
   matching the approved mockup. transform-style keeps the tilt real. */
.preset-grid .preset{transform-style:preserve-3d;transition:var(--ease)}
.preset-grid .preset:hover{transform:translateY(-2px)}
.preset-grid .preset.on,.preset-grid .preset.active,.preset-grid .preset[aria-pressed="true"]{
  transform:translateY(-4px) rotateX(2.4deg) scale(1.018);
  box-shadow:0 3px 6px oklch(0% 0 0/.5), 0 26px 60px -12px oklch(0% 0 0/.68),
             inset 0 1px 0 oklch(100% 0 0/.21), 0 0 36px -10px oklch(100% 0 0/.42);
}
.preset{position:relative;background:var(--n3);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:20px 16px 18px;cursor:pointer;text-align:center;transition:var(--ease);outline:none;box-shadow:var(--e1)}
.preset:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--e3);background:var(--n4)}
.preset:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.preset.selected{border-color:var(--line-strong);background:var(--n4);box-shadow:0 0 0 1px var(--line-strong),var(--e3)}
.preset.selected::after{content:"";position:absolute;top:11px;right:12px;width:19px;height:19px;border-radius:50%;box-shadow:0 1px 3px oklch(0% 0 0/0.5);
  background:var(--primary) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151519' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.preset-emoji{display:flex;align-items:center;justify-content:center;height:34px;color:var(--text)}
.preset-emoji .ico{width:26px;height:26px;stroke-width:1.5}
.preset-name{font-size:16px;font-weight:680;color:var(--text);margin-top:8px;letter-spacing:-.02em}
.preset-tag{font-size:11.5px;color:var(--text-dim);margin-top:5px;min-height:32px;line-height:1.4}
.preset-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--text-muted)}
.preset .pd-line{margin:3px 0}
.preset .pd-line b{color:var(--text);font-family:var(--mono);font-variant-numeric:tabular-nums}
.preset .pd-keep{margin-top:7px;color:var(--good);font-size:11.5px;font-weight:550}
.preset .pd-keep b{color:var(--good);font-family:var(--mono)}
.preset-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--n5);color:var(--text-muted);
  font-size:9.5px;font-weight:660;padding:3px 10px;border-radius:var(--r-full);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-strong);box-shadow:var(--e1)}

.plan-bars{margin-top:16px}
.plan-bars:empty{display:none}
.bar-wrap{display:flex;align-items:center;gap:10px;margin:4px 0}
.bar-lbl{width:40px;color:var(--text-dim);font-size:11px;text-align:right;flex:0 0 40px;font-family:var(--mono)}
.bar{height:9px;background:linear-gradient(90deg,var(--text-faint),var(--text-muted));border-radius:var(--r-full);min-width:3px;transition:width .4s var(--ease)}
.bar.tail{background:linear-gradient(90deg,var(--amber-dim),var(--amber))}
.bar-val{color:var(--text-dim);font-size:11px;font-family:var(--mono);white-space:nowrap}

/* ============================= PAY CARDS ============================= */
.pay-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.paycard{flex-direction:row;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.paycard input{position:absolute;opacity:0;pointer-events:none}
.paycard-in{flex:1;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:15px 18px;background:var(--n3);
  transition:var(--ease-out);position:relative;box-shadow:var(--e1)}
.paycard:hover .paycard-in{border-color:var(--line-strong);background:var(--n4)}
.paycard.sel .paycard-in{border-color:var(--line-strong);background:var(--n4);box-shadow:0 0 0 1px var(--line-strong),var(--e2)}
.paycard.sel .paycard-in::after{content:"";position:absolute;top:15px;right:16px;width:19px;height:19px;border-radius:50%;
  box-shadow:0 1px 3px oklch(0% 0 0/0.5);
  background:var(--primary) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151519' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.paycard-title{font-size:15px;font-weight:650;color:var(--text);display:flex;align-items:center;gap:8px}
.paycard-title .good{background:var(--good-soft);color:var(--good);font-size:9.5px;font-weight:660;padding:2px 8px;
  border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.06em;border:1px solid oklch(74% 0.115 158 / 0.25)}
.paycard-note{font-size:13px;color:var(--text-muted);margin-top:4px;display:flex;align-items:center;gap:6px}
.paycard-note .ico{width:14px;height:14px;flex:none}
.paycard-note.good{color:var(--good)}
.paycard-note.bad{color:var(--amber)}

.backup-box{background:var(--amber-soft);border:1px solid oklch(80% 0.105 82 / 0.28);border-left:2px solid var(--amber);
  border-radius:var(--r-sm);padding:14px 16px;margin:12px 0;color:oklch(86% 0.07 82);font-size:13.5px;line-height:1.65}
.backup-box b{color:var(--amber)}
.backup-box .ico{width:15px;height:15px;vertical-align:-.15em}

/* ============================= REVIEW / DEPLOY CARDS ============================= */
.deploy-card{border:1px solid var(--line);border-left:2px solid var(--text-faint);border-radius:var(--r-lg);
  padding:18px 20px;margin:14px 0;background:var(--n3);box-shadow:var(--e1)}
.deploy-card h4{margin:0 0 8px;font-size:15px;color:var(--text);font-weight:660;letter-spacing:-.015em}
.deploy-card p{margin:0 0 12px;color:var(--text-muted);font-size:13px;line-height:1.55}
pre.txdata{background:var(--well);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
  font-size:12px;color:var(--text-muted);overflow:auto;max-height:220px;white-space:pre-wrap;word-break:break-all;font-family:var(--mono)}
ul.steps{margin:10px 0 0;padding-left:18px;color:var(--text-muted);font-size:13px;line-height:1.8}

/* Sequential create → fund → run workflow. Only the current action is bright;
   completed cards recede, so the seller always knows exactly what to press. */
.workflow-stack{position:relative;margin-top:18px;padding-left:20px}
.workflow-stack::before{content:"";position:absolute;left:7px;top:22px;bottom:22px;width:1px;background:var(--line-2)}
.workflow-stack>.deploy-card{position:relative;margin:0 0 12px}
.workflow-stack>.deploy-card::before{content:"";position:absolute;left:-20px;top:23px;width:13px;height:13px;border-radius:50%;
  background:var(--n3);border:2px solid var(--text-dim);box-shadow:0 0 0 4px var(--n1)}
.workflow-stack>.deploy-card.current{border-left-color:var(--text);background:linear-gradient(155deg,var(--n4),var(--n3));box-shadow:var(--e2)}
.workflow-stack>.deploy-card.current::before{background:var(--primary);border-color:var(--primary)}
.workflow-stack>.deploy-card.complete{opacity:.72;border-left-color:var(--good)}
.workflow-stack>.deploy-card.complete::before{background:var(--good);border-color:var(--good)}

/* LOCKED: the step is visible from the start so the seller can see the whole
   path before committing, but it is clearly not yet actionable. Flash reported
   six times that there was "no start button" - because it was created only
   after two confirmations. Showing it locked is the fix. */
.workflow-stack>.deploy-card.locked{border-left-color:var(--line-2);background:var(--n2)}
.workflow-stack>.deploy-card.locked::before{background:var(--n2);border-color:var(--line-strong)}
.workflow-stack>.deploy-card.locked h4{color:var(--text-muted)}
.workflow-stack>.deploy-card.locked .action-kicker{color:var(--text-dim)}
.runner-gate{margin-top:10px;padding:9px 12px;border:1px dashed var(--line-2);border-radius:var(--r-sm);
  background:var(--well);color:var(--text-dim);font-size:12.5px;line-height:1.5}
.action-kicker{color:var(--text-faint);font-size:10px;font-weight:700;letter-spacing:.12em;margin-bottom:7px}
.runner-status{display:inline-flex;align-items:center;gap:8px;margin:2px 0 12px;padding:7px 11px;border-radius:var(--r-full);
  border:1px solid var(--line-2);background:var(--well);color:var(--text-muted);font-size:12.5px;font-weight:600}
.runner-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-dim)}
.runner-status.live::before{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);animation:runnerPulse 1.6s ease-in-out infinite}
.runner-status.good::before{background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.runner-status.bad::before{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
@keyframes runnerPulse{50%{opacity:.45}}
.runner-progress{height:9px;overflow:hidden;border-radius:var(--r-full);background:var(--well);border:1px solid var(--line);box-shadow:inset 0 1px 2px oklch(0% 0 0/.35)}
.runner-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--text-faint),var(--text));transition:width .35s var(--ease)}
.runner-metrics{margin:7px 0 2px;color:var(--text-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.runner-log{margin:12px 0 0;min-height:70px;max-height:180px;overflow:auto;background:var(--well);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 13px;color:var(--text-muted);font:11.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word}
.runner-receipts{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.receipt-link{display:inline-flex;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--n2);
  color:var(--text-muted);font:11px var(--mono)}
.receipt-link:hover{color:var(--text);border-color:var(--line-strong)}

details.adv{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
details.adv>summary{cursor:pointer;color:var(--text-muted);font-size:12.5px;font-weight:560;list-style:none;user-select:none;
  display:inline-flex;align-items:center;gap:7px;transition:var(--ease-out)}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"";width:13px;height:13px;flex:none;background:currentColor;
  -webkit-mask:center/contain no-repeat var(--mi-chev);mask:center/contain no-repeat var(--mi-chev);transition:var(--ease)}
details.adv[open]>summary::before{transform:rotate(90deg)}
details.adv>summary:hover{color:var(--text)}
:root{--mi-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")}

/* ============================= RUN MONITOR ============================= */
.runcard{background:var(--n3);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:14px;box-shadow:var(--e1)}
.runcard h3{margin:0 0 12px;font-size:14.5px;color:var(--text);display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:660}
.pill{display:inline-block;padding:3px 11px;border-radius:var(--r-full);font-size:10.5px;letter-spacing:.03em;font-weight:600;border:1px solid var(--line-2)}
.pill.done{background:var(--good-soft);color:var(--good);border-color:oklch(74% 0.115 158 / 0.25)}
.pill.running{background:var(--n4);color:var(--text-muted)}
.pill.inflight{background:var(--amber-soft);color:var(--amber);border-color:oklch(80% 0.105 82 / 0.25)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13px}
.kv .k{color:var(--text-dim)}
.progress{height:20px;background:var(--well);border:1px solid var(--line);border-radius:var(--r-full);overflow:hidden;margin:10px 0 4px;box-shadow:inset 0 1px 2px oklch(0% 0 0/0.3)}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--text-faint),var(--text-muted));color:var(--primary-ink);
  font-size:11px;line-height:20px;text-align:center;white-space:nowrap;transition:width .4s var(--ease);min-width:0;font-weight:600}
.progress-bar.done{background:linear-gradient(90deg,var(--good-dim),var(--good));color:var(--n0)}
.progress-meta{color:var(--text-muted);font-size:12px;margin-bottom:8px}

/* ============================= VERIFY CHECKS ============================= */
.checkrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);margin-bottom:8px;background:var(--n3);font-size:13.5px;box-shadow:var(--e1)}
.checkrow .mark{display:inline-flex;width:18px;height:18px;flex:none}
.checkrow .mark .ico{width:18px;height:18px}
.checkrow.pass{border-left:2px solid var(--good)}
.checkrow.pass .mark{color:var(--good)}
.checkrow.fail{border-left:2px solid var(--danger)}
.checkrow.fail .mark{color:var(--danger)}

/* ============================= TOOLTIPS ============================= */
.ttip{color:var(--text-muted);cursor:help;font-size:12.5px;white-space:nowrap;user-select:none;display:inline-flex;align-items:center;gap:4px;border-bottom:1px dotted var(--line-strong)}
.ttip .ico{width:13px;height:13px;color:var(--text-faint)}
.tip-bubble{position:absolute;z-index:60;max-width:290px;background:var(--n5);border:1px solid var(--line-strong);
  color:var(--text);font-size:12.5px;line-height:1.5;padding:11px 13px;border-radius:var(--r-sm);box-shadow:var(--e4)}

/* ============================= MANUAL SCHEDULE ============================= */
.mode-switch{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.mode-switch .choice{padding:12px 18px}
.mini{min-width:52px !important;width:64px !important;padding:6px 8px !important;font-size:13px !important;display:inline-block;margin:0 2px}
select.mini{width:auto !important;min-width:0 !important}
.prefill-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:6px 0 14px}
.prefill-row .ghost{display:inline-flex;align-items:center;gap:4px}
.prefill-row .ghost input,.prefill-row .ghost select{pointer-events:auto}
table.manual-table td,table.manual-table th{vertical-align:top;white-space:nowrap}
table.manual-table td:first-child,table.manual-table th:first-child{text-align:center;color:var(--text-dim)}
.manual-table input[type=text],.manual-table input[type=number],.manual-table input[type=datetime-local]{min-width:0;width:auto;padding:8px 9px;font-size:13px}
.manual-table .amt-in{width:120px}
.manual-table .amt-unit{width:auto;min-width:0;padding:8px 6px}
.manual-table .when-dt{width:200px;font-family:var(--mono)}
.manual-table .when-delay{width:90px}
.manual-table .row-note{font-size:11px;color:var(--text-dim);margin-top:4px;white-space:normal;max-width:220px;font-family:var(--mono)}
.manual-table .row-note.err{color:var(--danger)}
.manual-table .cell-est,.manual-table .cell-drop{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.manual-table tr.row-over td{background:var(--danger-soft)}
.manual-table tr.row-over .cell-drop{color:var(--danger);font-weight:680}
.manual-table .drop-flag{display:block;font-size:10.5px;color:var(--danger);white-space:normal;max-width:120px}
.manual-table .rowbtn{padding:6px 9px;font-size:12px;margin:1px}
.manual-table .rowbtn .ico{width:13px;height:13px}
.manual-table .rowbtn.rm{color:var(--danger);border-color:oklch(68% 0.145 25 / 0.3)}
.manual-totals{margin:14px 0 4px;font-size:14.5px;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--n3);line-height:1.7;box-shadow:var(--e1)}
.manual-totals .ok{color:var(--good);font-weight:640}
.manual-totals .bad{color:var(--danger);font-weight:640}
.manual-totals b{color:var(--text);font-family:var(--mono)}
.sched-list{list-style:none;margin:10px 0 0;padding:0}
.sched-list li{padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:6px;background:var(--n3);
  font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sched-list li.over{border-color:oklch(68% 0.145 25 / 0.35);border-left:2px solid var(--danger)}
.sched-list .s-when{color:var(--text-muted);font-family:var(--mono)}
.sched-list .s-drop{color:var(--amber);font-family:var(--mono)}
.sched-list .s-drop.hi{color:var(--danger);font-weight:680}

/* ============================= PRIVATE-KEY MODE ============================= */
.pk-box{width:100%;margin-top:2px}
.pk-box details>summary{cursor:pointer;color:var(--text-muted);font-size:13px;padding:5px 0;list-style:none;user-select:none;
  display:inline-flex;align-items:center;gap:8px}
.pk-box details>summary::-webkit-details-marker{display:none}
.pk-box summary .ico{width:15px;height:15px;color:var(--text-faint)}
.pk-box summary:hover{color:var(--text)}
.pk-warn-text{color:var(--amber);font-size:12.5px;margin:6px 0;line-height:1.6}
/* Quiet replacement for pk-warn-text (Flash, 2026-08-15): same information,
   read as a note rather than an alarm. */
.pk-note-text{color:var(--text-dim);font-size:12.5px;margin:6px 0;line-height:1.6}
#pk-key{flex:1 1 280px;font-family:var(--mono)}
.pk-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--danger-soft);
  border-bottom:1px solid oklch(68% 0.145 25 / 0.3);color:oklch(86% 0.06 25);padding:11px 18px;font-weight:480;font-size:13px}
.pk-banner .ico{width:16px;height:16px;color:var(--danger);flex:none}
.pk-banner .pk-banner-txt{flex:1 1 340px;display:flex;align-items:center;gap:9px}
.pk-banner .pk-banner-info{font-family:var(--mono);font-weight:450;color:oklch(78% 0.05 25);font-size:12px}
.pk-banner .pk-banner-info a{color:oklch(86% 0.06 25);border-bottom-color:oklch(68% 0.145 25 / 0.4)}
.pk-banner #pk-countdown{color:var(--text)}
/* Quiet variant (Flash, 2026-08-15): the alarm strips were removed, so the
   surviving bar carries only session facts — address, countdown, Forget. It
   should read as status, not as a warning. */
.pk-banner.pk-banner-quiet{background:var(--surface-2,rgba(255,255,255,0.03));
  border-bottom:1px solid var(--line,rgba(255,255,255,0.08));color:var(--text-dim);
  font-weight:450;justify-content:flex-end;gap:12px}
.pk-banner.pk-banner-quiet .pk-banner-info{color:var(--text-dim)}
.pk-banner.pk-banner-quiet .pk-banner-info a{color:var(--text);border-bottom-color:var(--line,rgba(255,255,255,0.18))}
.pk-banner.pk-banner-quiet #pk-forget-btn{background:transparent;border:1px solid var(--line,rgba(255,255,255,0.14));
  color:var(--text-dim);font-weight:450}
.pk-banner.pk-banner-quiet #pk-forget-btn:hover{color:var(--text);border-color:var(--text-faint)}

/* ============================= CONTRACT MODE ============================= */
.contract-mode{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin:14px 0;background:var(--n3);box-shadow:var(--e1)}
.contract-mode .cmode-title{font-weight:660;margin-bottom:10px;color:var(--text)}
.contract-mode .choice{display:flex;margin:8px 0}
#w-cmode-note{margin-top:10px;font-size:12.5px;color:var(--text-muted)}

/* ============================================================================
   ADMIN DASHBOARD
   ========================================================================== */
.admin-wrap{max-width:900px}
.admin-hero{position:relative;overflow:hidden;background:linear-gradient(168deg,var(--n4),var(--n3) 60%,var(--n2));
  border:1px solid var(--line);border-radius:var(--r-xl);padding:24px 26px;margin-bottom:20px;box-shadow:var(--e3)}
.admin-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 150px at 100% 0%, oklch(100% 0 0/0.05), transparent 70%)}
.admin-hero>*{position:relative}
.admin-hero h1{font-size:24px;margin:0 0 8px;font-weight:700;letter-spacing:-.025em;color:var(--text);display:flex;align-items:center;gap:11px}
.admin-hero h1 .ico{width:22px;height:22px;color:var(--text)}
.admin-hero p{margin:0;color:var(--text-muted);font-size:13.5px;max-width:60ch;line-height:1.55}
.admin-hero .tag-danger{font-size:9.5px;font-weight:660;background:var(--amber-soft);color:var(--amber);
  padding:3px 10px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.06em;border:1px solid oklch(80% 0.105 82 / 0.25)}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:16px}
.admin-card{background:var(--n2);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 24px;margin-bottom:16px;box-shadow:var(--e2)}
.admin-card h3{margin:0 0 4px;font-size:16px;color:var(--text);font-weight:680;border:none;padding:0;display:flex;align-items:center;gap:9px;letter-spacing:-.015em}
.admin-card h3 .ico{width:18px;height:18px;color:var(--text-muted)}
.admin-card .sub{color:var(--text-dim);font-size:12.5px;margin:0 0 16px;line-height:1.55}
.admin-card .sub b{color:var(--text-muted)}
#admin h3{margin:22px 0 10px;color:var(--text);font-weight:660;font-size:15px}
.admin-block{background:var(--n3);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin-bottom:14px}
.admin-block textarea{width:100%;background:var(--well);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px;font-family:var(--mono);font-size:13px}
.fee-hero{background:var(--n3);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:16px;text-align:center;box-shadow:inset 0 1px 0 var(--hi)}
.fee-hero .fee-num{font-size:54px;font-weight:640;letter-spacing:-.045em;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.fee-hero .fee-cap{color:var(--text-muted);font-size:12.5px;margin-top:10px}
.fee-hero .fee-cap b{color:var(--text)}
#admin-fee-slider{width:100%;margin-top:8px;max-width:420px}
#admin-fee-bps{white-space:nowrap;color:var(--text);font-weight:640}
.fee-lock-card{border-color:var(--line-2)}

/* legacy intro-card / card (kept for any reuse) */
.intro-card{background:linear-gradient(168deg,var(--n3),var(--n2));border:1px solid var(--line);border-radius:var(--r-xl);
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--e2)}
.intro-card h2{margin-bottom:8px;font-size:18px}
.intro-card p{margin:0 0 10px;font-size:13.5px;color:var(--text-muted)}
.intro-card .honest{color:var(--amber);background:var(--amber-soft);border-radius:var(--r-sm);padding:11px 14px;margin-top:4px;font-size:13px;border:1px solid oklch(80% 0.105 82 / 0.2)}
.card{background:var(--n3);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--e1)}
.card h2{font-size:18px}

/* ============================= LOADING SHIMMER ============================= */
.shimmer{position:relative;overflow:hidden;background:var(--n3);border-radius:var(--r-sm);min-height:16px}
.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(100% 0 0/0.06),transparent);
  transform:translateX(-100%);animation:shimmer 1.3s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ============================= MOBILE ============================= */
@media (max-width:680px){
  body{font-size:15.5px}
  main{padding:20px 14px 48px}
  header{padding:13px 16px}
  .walletbar,.safebar{padding:11px 16px}
  nav#tabs{padding:0 12px}
  .tab{padding:13px 11px;font-size:12.5px}
  .wprogress{margin:-20px -14px 20px;padding:13px 14px 0}
  .wstep .wstep-name{font-size:10px}
  .wstep .wstep-dot{width:26px;height:26px;font-size:12px}
  .hero{padding:22px 18px}
  .hero h1{font-size:24px}
  .money-hero{padding:20px 18px}
  .mh-value{font-size:38px}
  .mh-value .cur{font-size:21px}
  .preset-grid{grid-template-columns:1fr;gap:10px}
  .preset{display:flex;align-items:center;text-align:left;gap:14px;flex-wrap:wrap;padding:16px}
  .preset-emoji{height:auto}
  .preset-name{margin-top:0}
  .preset-tag{min-height:0;flex:1 1 100%;margin-top:2px}
  .preset-detail{flex:1 1 100%;margin-top:10px;padding-top:10px}
  .preset.selected .selmark{top:14px;right:14px}
  .kv{grid-template-columns:1fr;gap:0}
  .kv .k{margin-top:8px}
  .step-body{padding:6px 16px 18px}
  .step-head{padding:16px}
  .step-t{font-size:15.5px}
  .bignum{font-size:24px}
  button.big{width:100%}
  .controls{gap:10px}
  .manual-table .when-dt{width:150px}
  .manual-table .amt-in{width:90px}
  .fee-hero .fee-num{font-size:44px}
  .admin-grid{grid-template-columns:1fr}
  .workflow-stack{padding-left:16px}
  .workflow-stack>.deploy-card::before{left:-16px}
  .runner-card .controls{display:grid;grid-template-columns:1fr 1fr}
  .runner-card .controls button.big{width:100%;padding-inline:12px}
}

/* ============================= REDUCED MOTION ============================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .preset:hover{transform:none}
}
@media (prefers-contrast:more){
  :root{--line:oklch(100% 0 0/0.2);--line-2:oklch(100% 0 0/0.3);--text-muted:oklch(85% 0.005 262)}
}

/* Inline line-icons replacing emoji (archive rule: custom SVG only, never emoji). */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:0 0 auto}

/* implied $ rate on each speed card */
.pd-rate{color:var(--text);opacity:.9}
.pd-rate b{font-variant-numeric:tabular-nums}


/* ============================================================ LIVE STATUS BAR
 * Flash 2026-08-15: "need status bar to see what is happening" + "give it a
 * nice effect 3d and colors".
 *
 * Uses the existing oklch token system (--n*, --good, --amber, --danger) rather
 * than hardcoded hex, so it inherits the site's palette instead of fighting it.
 * The 3D read comes from real depth cues, not skeuomorphism:
 *   - a lifted plate (layered shadow: contact + ambient + top-edge highlight)
 *   - rows that rise toward the pointer (translateY + brighter surface)
 *   - a specular sheen that sweeps across an ACTIVE run only
 * Respects prefers-reduced-motion: all sweeps/pulses stop, colour stays.
 */
.ghost-statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  padding:10px clamp(10px,3vw,18px) calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:8px;
  max-height:34vh;overflow-y:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.45;
  color:var(--text);
  background:
    linear-gradient(180deg,oklch(100% 0 0 / .05),transparent 42%),
    linear-gradient(180deg,color-mix(in oklab,var(--n3),transparent 8%),var(--n1));
  border-top:1px solid var(--line-2);
  box-shadow:
    0 -1px 0 0 var(--hi-2) inset,
    0 -12px 28px -12px oklch(0% 0 0 / .55),
    0 -40px 80px -40px oklch(0% 0 0 / .45);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  transform:translateZ(0);
}
/* thin luminous rail along the very top edge */
.ghost-statusbar::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 18%,var(--line-strong) 82%,transparent);
  pointer-events:none;
}

.gsb-row{
  position:relative;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:9px 13px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--n4),var(--n3));
  border:1px solid var(--line);
  box-shadow:
    0 1px 0 0 var(--hi) inset,
    0 1px 2px oklch(0% 0 0 / .35),
    0 6px 14px -8px oklch(0% 0 0 / .5);
  transition:transform var(--ease),box-shadow var(--ease),background var(--ease);
  overflow:hidden;
}
.gsb-row:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,var(--n5),var(--n4));
  box-shadow:
    0 1px 0 0 var(--hi-2) inset,
    0 2px 4px oklch(0% 0 0 / .35),
    0 12px 24px -10px oklch(0% 0 0 / .55);
}
/* left status spine — colour-codes the row at a glance */
.gsb-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--text-dim);
}
.gsb-row.live::before{background:linear-gradient(180deg,var(--good),var(--good-dim));
  box-shadow:0 0 12px color-mix(in oklab,var(--good),transparent 40%);}
.gsb-row.idle::before{background:linear-gradient(180deg,var(--amber),var(--amber-dim));}
.gsb-row.bad::before{background:linear-gradient(180deg,var(--danger),var(--danger-dim));}

/* specular sweep — ONLY while actually selling, so motion always means "working" */
.gsb-row.live::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,oklch(100% 0 0 / .07) 48%,transparent 66%);
  transform:translateX(-120%);
  animation:gsbSweep 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes gsbSweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}

.gsb-dot{
  width:9px;height:9px;border-radius:var(--r-full);flex:0 0 auto;
  background:var(--text-dim);
  box-shadow:0 1px 1px oklch(0% 0 0 / .5), 0 0 0 1px oklch(0% 0 0 / .25);
}
.gsb-dot.on{
  background:radial-gradient(circle at 32% 28%,oklch(100% 0 0 / .9),var(--good) 60%);
  box-shadow:0 0 0 1px oklch(0% 0 0 / .25), 0 0 10px 1px color-mix(in oklab,var(--good),transparent 30%);
  animation:gsbPulse 1.8s ease-in-out infinite;
}
.gsb-dot.warn{
  background:radial-gradient(circle at 32% 28%,oklch(100% 0 0 / .85),var(--amber) 60%);
  box-shadow:0 0 0 1px oklch(0% 0 0 / .25), 0 0 9px 1px color-mix(in oklab,var(--amber),transparent 45%);
}
@keyframes gsbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.88)}}

.gsb-txt{font-weight:600;letter-spacing:.1px;text-shadow:0 1px 0 oklch(0% 0 0 / .4)}
.gsb-row.live .gsb-txt{color:var(--good)}
.gsb-row.bad  .gsb-txt{color:var(--danger)}

/* the countdown — the single most useful number on the bar */
.gsb-next{
  color:var(--text-muted);padding:2px 9px;border-radius:var(--r-full);
  background:var(--well);border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset;
  font-variant-numeric:tabular-nums;
}
.gsb-link{
  margin-left:auto;color:var(--text-faint);text-decoration:none;
  padding:2px 9px;border-radius:var(--r-full);
  border:1px solid var(--line);transition:color var(--ease),border-color var(--ease);
}
.gsb-link:hover{color:var(--text);border-color:var(--line-strong)}
.gsb-err{color:var(--danger);width:100%;font-size:12px}

/* progress meter: how far through the schedule this run is */
.gsb-meter{
  flex:0 0 84px;height:5px;border-radius:var(--r-full);overflow:hidden;
  background:var(--well);box-shadow:0 1px 0 var(--hi) inset,0 1px 2px oklch(0% 0 0 / .4) inset;
}
.gsb-meter i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--good-dim),var(--good));
  box-shadow:0 0 8px color-mix(in oklab,var(--good),transparent 45%);
  transition:width .6s cubic-bezier(.2,.7,.2,1);
}

@media(max-width:640px){
  .ghost-statusbar{font-size:11.5px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .gsb-link{margin-left:0}
  .gsb-meter{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  .gsb-row.live::after{animation:none}
  .gsb-dot.on{animation:none}
  .gsb-row{transition:none}
}

/* ============================================================== ACTIVITY TAB
 * Flash 2026-08-15: "very good 3d design and nice for the eyes."
 * Depth comes from layered shadows + top-edge highlights on real surfaces, not
 * from bevels or gradients-for-their-own-sake. Colour is used to MEAN something:
 * green = money received, amber = waiting, red = failed. Never decorative.
 */
.act-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 20px;border-radius:var(--r-lg);margin-bottom:14px;
  background:linear-gradient(180deg,var(--n4),var(--n2));
  border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 10px 26px -14px oklch(0% 0 0 / .7),0 2px 5px oklch(0% 0 0 / .3);
  position:relative;overflow:hidden;
}
.act-head::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--text-dim)}
.act-head.act-live::before{background:linear-gradient(180deg,var(--good),var(--good-dim));box-shadow:0 0 16px color-mix(in oklab,var(--good),transparent 35%)}
.act-head.act-done::before{background:linear-gradient(180deg,var(--good-dim),var(--good-dim))}
.act-head.act-idle::before{background:linear-gradient(180deg,var(--amber),var(--amber-dim))}
.act-head.act-bad::before{background:linear-gradient(180deg,var(--danger),var(--danger-dim))}
.act-head-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.act-dot{width:11px;height:11px;border-radius:var(--r-full);background:var(--text-dim);
  box-shadow:0 0 0 1px oklch(0% 0 0 / .3),0 1px 2px oklch(0% 0 0 / .5)}
.act-dot.on{background:radial-gradient(circle at 32% 28%,oklch(100% 0 0 / .95),var(--good) 62%);
  box-shadow:0 0 0 1px oklch(0% 0 0 / .3),0 0 14px 2px color-mix(in oklab,var(--good),transparent 30%);
  animation:gsbPulse 1.8s ease-in-out infinite}
.act-state{font:700 15px/1 var(--ui);letter-spacing:.4px;text-shadow:0 1px 0 oklch(0% 0 0 / .45)}
.act-live .act-state{color:var(--good)}
.act-bad .act-state{color:var(--danger)}
.act-idle .act-state{color:var(--amber)}
.act-venue{color:var(--text-faint);font:12px/1 var(--mono)}

/* progress ring — conic, no SVG needed */
.act-ring{
  --pct:0;width:74px;height:74px;border-radius:var(--r-full);flex:0 0 auto;
  display:grid;place-items:center;position:relative;
  background:
    conic-gradient(var(--good) calc(var(--pct)*1%),oklch(100% 0 0 / .07) 0),
    var(--n2);
  box-shadow:0 2px 6px oklch(0% 0 0 / .45),0 1px 0 var(--hi) inset;
}
.act-ring::after{content:'';position:absolute;inset:8px;border-radius:inherit;
  background:linear-gradient(180deg,var(--n3),var(--n2));
  box-shadow:0 1px 0 var(--hi) inset,0 2px 6px oklch(0% 0 0 / .5) inset}
.act-ring-n{position:relative;z-index:1;font:700 13px/1 var(--mono);color:var(--text)}

.act-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:20px}
.act-stat{padding:13px 15px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--n3),var(--n2));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 4px 12px -8px oklch(0% 0 0 / .6);
  transition:transform var(--ease),box-shadow var(--ease)}
.act-stat:hover{transform:translateY(-2px);box-shadow:0 1px 0 var(--hi-2) inset,0 10px 20px -10px oklch(0% 0 0 / .65)}
.act-stat-k{font:11px/1.2 var(--mono);color:var(--text-faint);text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px}
.act-stat-v{font:700 17px/1.2 var(--ui);color:var(--text);font-variant-numeric:tabular-nums}
.act-stat.good .act-stat-v{color:var(--good)}

.act-h3{font:600 13px/1 var(--ui);color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.8px;margin:22px 0 11px}

/* the three parties */
.act-parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.act-party{padding:15px;border-radius:var(--r-md);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--n3),var(--n2));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 6px 16px -10px oklch(0% 0 0 / .6);
  transition:transform var(--ease),box-shadow var(--ease)}
.act-party:hover{transform:translateY(-2px);box-shadow:0 1px 0 var(--hi-2) inset,0 14px 26px -12px oklch(0% 0 0 / .7)}
.act-party::before{content:'';position:absolute;left:0;right:0;top:0;height:2px}
.act-role-seller::before{background:linear-gradient(90deg,var(--amber),transparent)}
.act-role-proxy::before{background:linear-gradient(90deg,var(--focus),transparent)}
.act-role-receiver::before{background:linear-gradient(90deg,var(--good),transparent)}
.act-party-role{font:600 12px/1.3 var(--ui);color:var(--text-muted);margin-bottom:5px}
.act-addr{font:11px/1 var(--mono);color:var(--text-faint);text-decoration:none;display:inline-block;margin-bottom:11px}
.act-addr:hover{color:var(--focus);text-decoration:underline}
.act-bal{display:grid;grid-template-columns:auto 1fr;gap:5px 11px;align-items:baseline}
.act-bal-k{font:11px/1 var(--mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
.act-bal-v{font:600 13px/1 var(--mono);color:var(--text);text-align:right;font-variant-numeric:tabular-nums}

/* transaction ledger */
.act-ledger{display:flex;flex-direction:column;gap:8px}
.act-tx{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--n3),var(--n2));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 3px 10px -7px oklch(0% 0 0 / .6);
  transition:transform var(--ease),border-color var(--ease)}
.act-tx:hover{transform:translateX(2px);border-color:var(--line-2)}
.act-tx-badge{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.7px;
  padding:5px 8px;border-radius:var(--r-xs);flex:0 0 auto;
  background:var(--well);color:var(--text-faint);box-shadow:0 1px 0 var(--hi) inset}
.act-tx-sell .act-tx-badge{background:var(--good-soft);color:var(--good)}
.act-tx-fund .act-tx-badge{background:var(--amber-soft);color:var(--amber)}
.act-tx-mid{flex:1;min-width:0}
.act-tx-label{font:600 13px/1.3 var(--ui);color:var(--text)}
.act-tx-flow{font:13px/1.5 var(--mono);font-variant-numeric:tabular-nums;margin-top:3px}
.act-out{color:var(--amber)}
.act-in{color:var(--good);font-weight:600}
.act-arrow{color:var(--text-dim);margin:0 7px}
.act-tx-meta{font:11px/1.4 var(--mono);color:var(--text-dim);margin-top:3px}
.act-tx-link{font:11px/1 var(--mono);color:var(--text-faint);text-decoration:none;
  padding:4px 9px;border-radius:var(--r-full);border:1px solid var(--line);flex:0 0 auto}
.act-tx-link:hover{color:var(--text);border-color:var(--line-strong)}
.act-empty{color:var(--text-dim);font:13px/1 var(--ui);padding:18px;text-align:center}
.act-log{background:var(--well);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px;font:11.5px/1.6 var(--mono);color:var(--text-muted);
  box-shadow:0 2px 8px oklch(0% 0 0 / .4) inset;max-height:230px;overflow-y:auto;white-space:pre-wrap}

@media(max-width:640px){
  .act-head{flex-direction:column;align-items:flex-start;gap:14px}
  .act-tx{flex-wrap:wrap}
  .act-tx-link{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  .act-dot.on{animation:none}
  .act-stat,.act-party,.act-tx{transition:none}
}

/* ---- dollar-rate panel: promoted out of a collapsed <details> 2026-08-15 ---- */
.rate-dollar{
  margin:14px 0;padding:15px 17px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--n3),var(--n2));
  border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 6px 16px -10px oklch(0% 0 0 / .6);
  position:relative;overflow:hidden;
}
.rate-dollar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--good),var(--good-dim))}
.rate-dollar-h{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.rate-dollar-h .ico{width:17px;height:17px;color:var(--good)}
.rate-dollar-h b{font:600 14px/1 var(--ui);color:var(--text)}
.rate-dollar-h .muted{font:12px/1 var(--ui)}

/* ---- signed-out banner: says the TRUE thing instead of "chain undefined" ---- */
.signedout-bar{
  position:fixed;left:0;right:0;top:0;z-index:10000;
  padding:12px clamp(12px,3vw,20px);
  background:linear-gradient(180deg,color-mix(in oklab,var(--amber),transparent 82%),var(--n2));
  border-bottom:1px solid color-mix(in oklab,var(--amber),transparent 60%);
  box-shadow:0 6px 20px -10px oklch(0% 0 0 / .7);
  color:var(--text);font:13px/1.5 var(--ui);text-align:center;
}
.signedout-bar code{font:12px/1 var(--mono);color:var(--amber);
  background:var(--well);padding:2px 6px;border-radius:var(--r-xs)}

/* ---------------------------------------------------------- STRATEGY TAB */
.st-card{padding:17px 19px;border-radius:var(--r-lg);margin-bottom:14px;
  background:linear-gradient(180deg,var(--n3),var(--n2));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 8px 22px -14px oklch(0% 0 0 / .65)}
.st-top{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:14px}
.st-badge{font:700 11px/1 var(--mono);letter-spacing:.9px;padding:7px 11px;border-radius:var(--r-full);
  box-shadow:0 1px 0 var(--hi) inset,0 2px 6px -3px oklch(0% 0 0 / .6)}
.st-badge.st-live{background:var(--good-soft);color:var(--good);
  box-shadow:0 1px 0 var(--hi) inset,0 0 14px -2px color-mix(in oklab,var(--good),transparent 55%)}
.st-badge.st-idle{background:var(--amber-soft);color:var(--amber)}
.st-badge.st-done{background:var(--hi);color:var(--text-muted)}
.st-sub{font:12.5px/1 var(--mono);color:var(--text-faint)}
.st-controls{display:flex;gap:11px;flex-wrap:wrap}
.st-list{display:flex;flex-direction:column;gap:6px}
.st-li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--n2);border:1px solid var(--line);box-shadow:0 1px 0 var(--hi) inset}
.st-li-k{font:600 12px/1 var(--ui);color:var(--text-muted)}
.st-li-v{font:12px/1 var(--mono);color:var(--text);font-variant-numeric:tabular-nums}

/* ============================================================ ACCOUNT GATE */
.authwrap{position:fixed;inset:0;z-index:10001;display:grid;place-items:center;
  padding:20px;background:
    radial-gradient(1200px 600px at 50% -10%,color-mix(in oklab,var(--focus),transparent 92%),transparent),
    color-mix(in oklab,var(--n0),transparent 4%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.authcard{width:100%;max-width:390px;padding:26px 26px 22px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--n4),var(--n2));border:1px solid var(--line-2);
  box-shadow:0 1px 0 var(--hi-2) inset,0 30px 70px -30px oklch(0% 0 0 / .85),0 4px 12px oklch(0% 0 0 / .4)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.auth-brand .logo{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--n5),var(--n3));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset}
.auth-brand .ico{width:20px;height:20px;color:var(--focus)}
.auth-brand b{display:block;font:600 15px/1.2 var(--ui);color:var(--text)}
.auth-sub{font:12px/1.3 var(--ui);color:var(--text-faint)}
.auth-tabs{display:flex;gap:6px;padding:4px;border-radius:var(--r-md);margin-bottom:16px;
  background:var(--well);box-shadow:0 2px 6px oklch(0% 0 0 / .4) inset}
.auth-tab{flex:1;padding:9px;border:0;border-radius:var(--r-sm);cursor:pointer;
  background:transparent;color:var(--text-faint);font:600 12.5px/1 var(--ui);
  transition:background var(--ease),color var(--ease)}
.auth-tab.active{background:linear-gradient(180deg,var(--n5),var(--n4));color:var(--text);
  box-shadow:0 1px 0 var(--hi) inset,0 2px 6px -3px oklch(0% 0 0 / .6)}
.auth-l{display:block;font:12px/1 var(--ui);color:var(--text-muted);margin-bottom:13px}
.auth-l input{width:100%;margin-top:6px;padding:11px 13px;border-radius:var(--r-sm);
  background:var(--well);border:1px solid var(--line);color:var(--text);
  font:13px/1 var(--mono);box-shadow:0 2px 6px oklch(0% 0 0 / .35) inset;
  transition:border-color var(--ease),box-shadow var(--ease)}
.auth-l input:focus{outline:0;border-color:var(--focus);
  box-shadow:0 2px 6px oklch(0% 0 0 / .35) inset,0 0 0 3px color-mix(in oklab,var(--focus),transparent 82%)}
#auth-go{width:100%;margin-top:4px}
.auth-note{margin-top:16px;font:11.5px/1.55 var(--ui);color:var(--text-dim);
  padding-top:14px;border-top:1px solid var(--line)}
.auth-note b{color:var(--amber)}
.sb-user{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--line)}
.sb-user-name{font:11px/1 var(--mono);color:var(--text-faint);overflow:hidden;text-overflow:ellipsis}
.sb-signout{background:transparent;border:1px solid var(--line);color:var(--text-dim);
  padding:4px 9px;border-radius:var(--r-full);font:10.5px/1 var(--ui);cursor:pointer;
  transition:color var(--ease),border-color var(--ease)}
.sb-signout:hover{color:var(--text);border-color:var(--line-strong)}

/* ==================================================== ONE-TIME KEY BACKUP MODAL
 * Flash 2026-08-15: "show a pop up 1 time for the keys and also save the backup
 * file too needs to download".
 * Deliberately heavy: this is the one screen where a careless click loses money
 * permanently, so it blocks the page and cannot be dismissed by accident.
 * There is no close X and no click-outside-to-dismiss, by design.
 */
.keymodal-wrap{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;
  padding:20px;overflow-y:auto;
  background:radial-gradient(900px 500px at 50% 0%,color-mix(in oklab,var(--danger),transparent 88%),transparent),
    color-mix(in oklab,var(--n0),transparent 3%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:kmIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes kmIn{from{opacity:0}to{opacity:1}}
.keymodal{width:100%;max-width:520px;padding:26px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--n4),var(--n2));
  border:1px solid color-mix(in oklab,var(--amber),transparent 65%);
  box-shadow:0 1px 0 var(--hi-2) inset,0 30px 80px -30px oklch(0% 0 0 / .9),
    0 0 40px -12px color-mix(in oklab,var(--amber),transparent 75%);
  animation:kmPop .38s cubic-bezier(.2,.9,.25,1)}
@keyframes kmPop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.km-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.km-ico{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 auto;
  background:var(--amber-soft);border:1px solid color-mix(in oklab,var(--amber),transparent 65%)}
.km-ico svg{width:21px;height:21px;color:var(--amber)}
.km-head b{display:block;font:700 17px/1.2 var(--ui);color:var(--text)}
.km-sub{display:block;font:12px/1.4 var(--mono);color:var(--amber);margin-top:4px}
.km-warn{font:12.5px/1.6 var(--ui);color:var(--text-muted);margin:0 0 18px;
  padding:12px 14px;border-radius:var(--r-md);background:var(--well);
  border-left:3px solid var(--danger);box-shadow:0 2px 8px oklch(0% 0 0 / .35) inset}
.km-label{font:10.5px/1 var(--mono);color:var(--text-faint);letter-spacing:.9px;margin-bottom:9px}
.km-words{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:18px}
@media(max-width:520px){.km-words{grid-template-columns:repeat(2,1fr)}}
.km-word{display:flex;align-items:baseline;gap:7px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--well);border:1px solid var(--line);
  font:12.5px/1 var(--mono);color:var(--text);
  box-shadow:0 1px 0 var(--hi) inset}
.km-word i{font:9.5px/1 var(--mono);color:var(--text-dim);font-style:normal;min-width:11px}
.km-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-bottom:18px;
  padding:11px 13px;border-radius:var(--r-sm);background:var(--n2);border:1px solid var(--line)}
.km-meta-k{font:10px/1.4 var(--mono);color:var(--text-dim);letter-spacing:.6px}
.km-meta-v{font:11.5px/1.4 var(--mono);color:var(--text-muted);text-align:right}
.km-dl{width:100%;margin-bottom:15px;position:relative;overflow:hidden}
.km-dl::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,oklch(100% 0 0 / .4) 50%,transparent 65%);
  transform:translateX(-130%);animation:goSheen 3s cubic-bezier(.4,0,.2,1) infinite}
.km-dl.km-dl-done::after{animation:none}
.km-arm{display:flex;align-items:flex-start;gap:10px;margin-bottom:15px;cursor:pointer;
  font-size:12px;text-transform:none;letter-spacing:normal}
.km-arm input{margin-top:2px;width:16px;height:16px;accent-color:var(--good);flex:0 0 auto}
.km-arm input:disabled{opacity:.4;cursor:not-allowed}
.km-arm span{flex:1;min-width:0;font:12px/1.5 var(--ui);color:var(--text-muted);
  text-transform:none;letter-spacing:normal;display:inline}
.km-done{width:100%;padding:13px;border-radius:var(--r-md);cursor:pointer;
  font:600 13.5px/1 var(--ui);color:var(--text-dim);
  background:linear-gradient(180deg,var(--n4),var(--n3));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset;transition:all var(--ease)}
.km-done:not(:disabled){color:var(--primary-ink);cursor:pointer;
  background:linear-gradient(180deg,color-mix(in oklab,var(--good),white 14%),var(--good-dim));
  border-color:color-mix(in oklab,var(--good),transparent 45%);
  box-shadow:0 1px 0 oklch(100% 0 0 / .4) inset,0 8px 20px -9px color-mix(in oklab,var(--good),transparent 45%)}
.km-done:not(:disabled):hover{transform:translateY(-1px)}
.km-done:disabled{cursor:not-allowed}
@media(prefers-reduced-motion:reduce){
  .keymodal-wrap,.keymodal{animation:none}
  .km-dl::after{animation:none}
}

/* ---- individual private keys inside the one-time modal (Flash: "Also private
 * keys not just this"). Collapsed by default: 500 keys on screen is a
 * shoulder-surfing hazard, and the phrase alone already restores the set.
 * Each key is copy-to-clipboard because hand-copying 64 hex chars loses money. */
.km-keys{margin-bottom:16px;border-radius:var(--r-md);overflow:hidden;
  background:var(--n2);border:1px solid var(--line)}
.km-keys>summary{cursor:pointer;list-style:none;padding:11px 14px;
  font:600 12px/1 var(--ui);color:var(--text-muted);
  display:flex;align-items:center;gap:8px;
  transition:color var(--ease),background var(--ease)}
.km-keys>summary::-webkit-details-marker{display:none}
.km-keys>summary::before{content:'▸';color:var(--amber);font-size:11px;
  transition:transform var(--ease);display:inline-block}
.km-keys[open]>summary::before{transform:rotate(90deg)}
.km-keys>summary:hover{color:var(--text);background:var(--hi)}
.km-keylist{max-height:260px;overflow-y:auto;padding:4px 10px 10px;
  display:flex;flex-direction:column;gap:8px}
.km-keyrow{padding:9px 11px;border-radius:var(--r-sm);background:var(--well);
  border:1px solid var(--line);box-shadow:0 1px 0 var(--hi) inset}
.km-keytop{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.km-keyi{font:10px/1 var(--mono);color:var(--amber);flex:0 0 auto}
.km-keyaddr{font:10.5px/1.3 var(--mono);color:var(--text-faint);
  overflow-wrap:anywhere;min-width:0}
.km-keyval{display:flex;align-items:center;gap:8px}
.km-keyval code{flex:1;min-width:0;font:10.5px/1.45 var(--mono);color:var(--text);
  overflow-wrap:anywhere;user-select:all}
.km-copy{flex:0 0 auto;background:transparent;border:1px solid var(--line);
  color:var(--text-dim);padding:4px 9px;border-radius:var(--r-full);
  font:9.5px/1 var(--mono);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;
  transition:color var(--ease),border-color var(--ease)}
.km-copy:hover{color:var(--good);border-color:color-mix(in oklab,var(--good),transparent 55%)}

/* ============================================================ SETTINGS TAB */
.set-card{padding:18px 20px;border-radius:var(--r-lg);margin-bottom:14px;
  background:linear-gradient(180deg,var(--n3),var(--n2));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 8px 22px -14px oklch(0% 0 0 / .65)}
.set-card.set-danger{border-color:color-mix(in oklab,var(--danger),transparent 72%)}
.set-h{font:600 12px/1 var(--ui);color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.9px;margin:0 0 14px}
.set-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:baseline}
.set-k{font:10.5px/1 var(--mono);color:var(--text-dim);letter-spacing:.6px}
.set-v{font:600 13px/1 var(--mono);color:var(--text)}
.set-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.set-row input{flex:1;min-width:170px;padding:10px 13px;border-radius:var(--r-sm);
  background:var(--well);border:1px solid var(--line);color:var(--text);
  font:12.5px/1 var(--mono);box-shadow:0 2px 6px oklch(0% 0 0 / .35) inset}
.set-row input:focus{outline:0;border-color:var(--focus);
  box-shadow:0 2px 6px oklch(0% 0 0 / .35) inset,0 0 0 3px color-mix(in oklab,var(--focus),transparent 84%)}
.set-sessions{display:flex;flex-direction:column;gap:8px}
.set-sess{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--n2);border:1px solid var(--line);box-shadow:0 1px 0 var(--hi) inset}
.set-sess.cur{border-color:color-mix(in oklab,var(--good),transparent 60%);
  background:linear-gradient(180deg,color-mix(in oklab,var(--good),transparent 94%),var(--n2))}
.set-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex:0 0 auto}
.set-sess.cur .set-dot{background:var(--good);
  box-shadow:0 0 9px color-mix(in oklab,var(--good),transparent 40%);
  animation:gsbPulse 2s ease-in-out infinite}
.set-sess-t{font:600 12.5px/1.3 var(--ui);color:var(--text)}
.set-sess-m{font:10.5px/1.4 var(--mono);color:var(--text-dim);margin-top:3px}
.set-badge{margin-left:auto;font:9.5px/1 var(--mono);letter-spacing:.7px;padding:5px 9px;
  border-radius:var(--r-full);background:var(--good-soft);color:var(--good)}
.set-btns{display:flex;gap:10px;flex-wrap:wrap}
.set-btns button.danger{background:linear-gradient(180deg,color-mix(in oklab,var(--danger),white 8%),var(--danger-dim));
  color:oklch(100% 0 0);border:1px solid color-mix(in oklab,var(--danger),transparent 45%);
  padding:10px 15px;border-radius:var(--r-md);cursor:pointer;font:600 12.5px/1 var(--ui);
  box-shadow:0 1px 0 oklch(100% 0 0 / .25) inset,0 6px 16px -8px color-mix(in oklab,var(--danger),transparent 45%);
  transition:transform var(--ease)}
.set-btns button.danger:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.set-sess.cur .set-dot{animation:none}}
.auth-skip{display:block;width:100%;margin-top:12px;padding:9px;border:0;background:transparent;
  color:var(--text-dim);font:11.5px/1 var(--ui);cursor:pointer;border-radius:var(--r-sm);
  transition:color var(--ease),background var(--ease)}
.auth-skip:hover{color:var(--text-muted);background:var(--hi)}

/* ===================================================== CONNECT PANEL (in-app)
 * Flash 2026-08-15: "i can't see connect wallet ... needs to look more degen".
 * Same design language as the standalone preview, now actually wired in.
 * Wallet options are ALWAYS rendered — undetected ones show INSTALL rather than
 * disappearing, because hiding the safe path and leaving only "paste your
 * private key" is exactly the wrong default.
 */
.cxp{margin:0 auto 22px;padding:20px clamp(14px,3vw,26px);max-width:1180px}
.cxp-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.cxp-t{font:700 20px/1.2 var(--ui);color:var(--text);margin:0 0 5px;letter-spacing:-.3px}
.cxp-s{font:13px/1.5 var(--ui);color:var(--text-faint);margin:0;max-width:640px}
.cxp-toggle{margin-left:auto;background:transparent;border:1px solid var(--line);
  color:var(--text-dim);padding:7px 13px;border-radius:var(--r-full);
  font:11.5px/1 var(--ui);cursor:pointer;transition:color var(--ease),border-color var(--ease)}
.cxp-toggle:hover{color:var(--text);border-color:var(--line-strong)}
.cxp-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
@media(max-width:900px){.cxp-grid{grid-template-columns:1fr}}

.cxc{position:relative;border-radius:var(--r-xl);padding:22px;overflow:hidden;
  background:linear-gradient(180deg,var(--n4),var(--n2));border:1px solid var(--line-2);
  box-shadow:0 1px 0 var(--hi-2) inset,0 22px 56px -30px oklch(0% 0 0 / .85),0 3px 10px oklch(0% 0 0 / .35);
  transition:transform var(--ease),box-shadow var(--ease)}
.cxc:hover{transform:translateY(-2px)}
.cxc::before{content:'';position:absolute;left:0;right:0;top:0;height:2px}
.cx-wallet::before{background:linear-gradient(90deg,var(--good),color-mix(in oklab,var(--good),transparent 70%),transparent)}
.cx-key::before{background:linear-gradient(90deg,var(--amber),color-mix(in oklab,var(--amber),transparent 70%),transparent)}
.cx-wallet::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,oklch(100% 0 0 / .04) 50%,transparent 64%);
  transform:translateX(-120%);animation:cxSweep 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cxSweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

.cx-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.cx-ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(180deg,var(--n5),var(--n3));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 4px 10px -6px oklch(0% 0 0 / .7)}
.cx-ic svg{width:20px;height:20px}
.cx-wallet .cx-ic svg{color:var(--good)}
.cx-key .cx-ic svg{color:var(--amber)}
.cx-t{font:700 15.5px/1.2 var(--ui);color:var(--text)}
.cx-badge{margin-left:auto;font:600 9.5px/1 var(--mono);letter-spacing:.9px;padding:6px 9px;
  border-radius:var(--r-full);box-shadow:0 1px 0 var(--hi) inset}
.cx-badge.rec{background:var(--good-soft);color:var(--good)}
.cx-badge.adv{background:var(--amber-soft);color:var(--amber)}
.cx-sub{font:12.5px/1.5 var(--ui);color:var(--text-faint);margin:0 0 16px}

.cx-wallets{display:flex;flex-direction:column;gap:9px;margin-bottom:15px}
.wbtn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;cursor:pointer;
  border-radius:var(--r-md);text-align:left;color:var(--text);
  background:linear-gradient(180deg,var(--n3),var(--n2));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset,0 3px 9px -6px oklch(0% 0 0 / .7);
  transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease)}
.wbtn:hover{transform:translateY(-2px);border-color:var(--line-strong);
  box-shadow:0 1px 0 var(--hi-2) inset,0 10px 20px -10px oklch(0% 0 0 / .8)}
.wbtn:active{transform:translateY(0)}
.wbtn-off{opacity:.62}
.wbtn-off:hover{opacity:1}
.wbtn-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  overflow:hidden;background:var(--n1);border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset;transition:transform var(--ease)}
.wbtn-ic svg{width:26px;height:26px;display:block}
.wbtn:hover .wbtn-ic{transform:scale(1.07) rotate(-2deg)}
.wbtn>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.wbtn-n{display:block;font:600 13.5px/1.2 var(--ui)}
.wbtn-d{display:block;font:11px/1.3 var(--mono);color:var(--text-dim);margin-top:3px}
.wbtn-tag,.wbtn-soon,.wbtn-get{margin-left:auto;font:9.5px/1 var(--mono);letter-spacing:.6px;
  padding:5px 8px;border-radius:var(--r-full);flex:0 0 auto}
.wbtn-tag{background:var(--good-soft);color:var(--good)}
.wbtn-soon{background:var(--hi);color:var(--text-dim)}
.wbtn-get{background:var(--hi);color:var(--text-faint)}

.cx-why{display:flex;flex-direction:column;gap:7px;padding-top:14px;border-top:1px solid var(--line)}
.cx-why div{display:flex;gap:9px;align-items:flex-start;font:12px/1.45 var(--ui);color:var(--text-muted)}
.cx-why svg{width:14px;height:14px;color:var(--good);flex:0 0 auto;margin-top:1px}

.cxp-active{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:15px;
  padding:12px 14px;border-radius:var(--r-md);background:var(--good-soft);
  border:1px solid color-mix(in oklab,var(--good),transparent 68%)}

.cx-warn{display:flex;gap:10px;padding:11px 12px;border-radius:var(--r-md);margin-bottom:14px;
  background:var(--amber-soft);border:1px solid color-mix(in oklab,var(--amber),transparent 72%)}
.cx-warn svg{width:16px;height:16px;color:var(--amber);flex:0 0 auto;margin-top:1px}
.cx-warn p{margin:0;font:11.5px/1.5 var(--ui);color:var(--text-muted)}
.cx-warn b{color:var(--amber)}
.keyfield{position:relative;margin-bottom:11px}
.keyfield input{width:100%;padding:12px 44px 12px 14px;border-radius:var(--r-md);
  background:var(--well);border:1px solid var(--line);color:var(--text);
  font:12.5px/1 var(--mono);letter-spacing:.3px;
  box-shadow:0 2px 8px oklch(0% 0 0 / .45) inset;transition:border-color var(--ease),box-shadow var(--ease)}
.keyfield input::placeholder{color:var(--text-dim);letter-spacing:0}
.keyfield input:focus{outline:0;border-color:var(--amber);
  box-shadow:0 2px 8px oklch(0% 0 0 / .45) inset,0 0 0 3px color-mix(in oklab,var(--amber),transparent 85%)}
.keyfield .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;cursor:pointer;color:var(--text-dim);padding:8px;line-height:0}
.keyfield .eye:hover{color:var(--text)}
.keyfield .eye svg{width:16px;height:16px}
.cx-arm{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;cursor:pointer;
  text-transform:none;letter-spacing:normal}
.cx-arm input{margin-top:1px;accent-color:var(--amber);width:15px;height:15px;flex:0 0 auto}
.cx-arm span{flex:1;min-width:0;font:11.5px/1.45 var(--ui);color:var(--text-muted);
  text-transform:none;letter-spacing:normal;display:inline}
.btn-key{width:100%;padding:12px;border-radius:var(--r-md);cursor:not-allowed;
  font:600 13px/1 var(--ui);color:var(--text-dim);
  background:linear-gradient(180deg,var(--n4),var(--n3));border:1px solid var(--line);
  box-shadow:0 1px 0 var(--hi) inset;transition:all var(--ease)}
.btn-key.armed{cursor:pointer;color:var(--primary-ink);
  background:linear-gradient(180deg,color-mix(in oklab,var(--amber),white 12%),var(--amber-dim));
  border-color:color-mix(in oklab,var(--amber),transparent 45%);
  box-shadow:0 1px 0 oklch(100% 0 0 / .35) inset,0 6px 18px -8px color-mix(in oklab,var(--amber),transparent 40%)}
.btn-key.armed:hover{transform:translateY(-1px)}
.cx-ttl{margin-top:11px;display:flex;align-items:center;gap:8px;font:10.5px/1.4 var(--mono);color:var(--text-dim)}
.cx-ttl .dot{width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 7px var(--amber);animation:gsbPulse 2s ease-in-out infinite}

/* multiple connected keys */
.cxp-keylist{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.cxp-kl-h{font:9.5px/1 var(--mono);color:var(--text-dim);letter-spacing:.9px;margin-bottom:2px}
.cxp-k{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--well);border:1px solid var(--line);cursor:pointer;
  transition:border-color var(--ease),background var(--ease)}
.cxp-k:hover{border-color:var(--line-strong)}
.cxp-k.on{border-color:color-mix(in oklab,var(--good),transparent 58%);
  background:linear-gradient(180deg,color-mix(in oklab,var(--good),transparent 93%),var(--well))}
.cxp-k-dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim);flex:0 0 auto}
.cxp-k.on .cxp-k-dot{background:var(--good);box-shadow:0 0 8px color-mix(in oklab,var(--good),transparent 45%)}
.cxp-k-a{font:11px/1.3 var(--mono);color:var(--text);overflow-wrap:anywhere}
.cxp-k-m{font:10px/1.3 var(--mono);color:var(--text-dim);margin-top:2px}
.cxp-k-x{margin-left:auto;flex:0 0 auto;background:transparent;border:1px solid var(--line);
  color:var(--text-dim);padding:4px 9px;border-radius:var(--r-full);font:9.5px/1 var(--mono);
  cursor:pointer;text-transform:uppercase;letter-spacing:.5px}
.cxp-k-x:hover{color:var(--danger);border-color:color-mix(in oklab,var(--danger),transparent 55%)}
@media(prefers-reduced-motion:reduce){.cx-wallet::after,.cx-ttl .dot{animation:none}}


/* ---- header status pill: truncate instead of running off the viewport ----
   Flash's 1440px screenshot showed "chain 4663 · GUARDED HOSTED EXE…" cut mid
   word at the window edge. Long mode strings must ellipsis, not overflow. */
header .status{min-width:0;max-width:min(42vw,420px)}
header #statusText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}


/* ---- connect panel: reserve the fixed sidebar's width ----------------------
 * [!!] #sidebar is position:fixed at 206px, so every top-level block must
 * reserve that space itself (header/.safebar/.walletbar already do). The new
 * .cxp panel did not, so its left edge slid UNDER the sidebar on every screen
 * between 1024px and ~1450px -- exactly the 1440px laptop in Flash's screenshot.
 *
 * This block is deliberately at the END of the file: an earlier attempt put it
 * inside the @media (min-width:1024px) section, but the base `.cxp{margin:0 auto}`
 * rule is declared LATER at equal specificity and simply overrode it. Same
 * specificity => source order decides. Verified by re-running the resolution
 * sweep and seeing the overlap unchanged.
 */
@media (min-width:1024px){
  .cxp{margin-left:206px;margin-right:0;max-width:calc(1300px - 206px)}
}