/* ==========================================================================
   4BitPad UI.

   The *shape* language is Pons's: a near-flat page, content on floating cards
   with generous radii and soft shadows rather than hard borders, pill controls,
   a glass header, Inter for the interface and Instrument Serif for display.

   The *colour* is Ink's, not Pons's. Pons runs on Robinhood Chain and wears
   Robinhood's acid lime; this runs on Ink, so every value below comes from
   Ink's own component library (inkonchain/ink-kit, src/styles/theme/colors):
   the #7132F5 purple, the #121118 ground, their light-purple and status trio.
   Light mode is that palette inverted onto a faintly lavender white — Ink
   ships no light theme, so it is derived rather than lifted.

   Both themes ship. Light is the default, dark follows the OS unless the
   header's toggle has said otherwise, and every token has a value in both —
   so no rule below needs to know which one it is in.
   ========================================================================== */

:root{
  color-scheme:light;

  --bg-page:#f5f4f8;
  --bg-white:#ffffff;
  --bg-elevated:#ffffff;
  --bg-sunken:#ecebf3;

  --text:#17151f;
  --text-2:rgba(23,21,31,.56);
  --text-3:rgba(23,21,31,.40);
  --divider:rgba(23,21,31,.10);

  --accent:#7132F5;              /* Ink purple — button-primary */
  --accent-hover:#5E23D6;        /* a filled purple darkens on hover, not lightens */
  --accent-soft:#EFE9FE;
  --accent-ink:#ffffff;          /* text that sits on the accent */
  --accent-line:#6528DE;         /* accent, darkened until it reads as text on white */

  --up:#2E9E68;                  /* Ink's #4FBE84, darkened to hold on white */
  --up-soft:rgba(46,158,104,.12);
  --down:#D24A4A;                /* Ink's #EC6D6D, likewise */
  --down-soft:rgba(210,74,74,.12);
  --warn:#A96A16;                /* Ink's #E7954A, likewise */
  --warn-soft:rgba(169,106,22,.12);

  --float-bg:rgba(255,255,255,.72);
  --float-border:rgba(255,255,255,.80);
  --float-shadow:0 1px 2px rgba(23,21,31,.04),0 8px 24px rgba(23,21,31,.07),0 24px 48px rgba(23,21,31,.05);
  --shadow-card:0 2px 12px rgba(23,21,31,.05);
  --shadow-soft:0 4px 24px rgba(23,21,31,.06);
  --shadow-pop:0 12px 40px rgba(23,21,31,.16);
  --ring:rgba(113,50,245,.22);
  --glow:rgba(113,50,245,.30);

  --chart-line:#6528DE;
  --chart-line-soft:rgba(101,40,222,.22);
  --chart-grid:rgba(23,21,31,.14);
  --chart-axis:rgba(23,21,31,.58);
  --chart-future:rgba(23,21,31,.28);
  --chart-stage:rgba(23,21,31,.035);
  --chart-tip-bg:#201E2A;
  --chart-tip-fg:#ffffff;
  --chart-sign:#ffffff;

  --r-pill:999px;
  --r-sm:12px;
  --r:20px;
  --r-lg:24px;
  --r-float:28px;

  --sans:"Inter","Inter Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --shell:1080px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* Ink's own dark values, unmodified: the #121118 ground under a #BBB4FF wash
   at 5 / 8 / 15%, which is how Ink raises a surface. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --bg-page:#121118;
    --bg-white:#1A1924;
    --bg-elevated:#201E2A;
    --bg-sunken:#262435;

    --text:#FFFFFF;
    --text-2:#B3B0C2;
    --text-3:#807D91;
    --divider:#2A2838;

    --accent-hover:#8A61FF;      /* Ink text-on-secondary */
    --accent-soft:#231A3B;
    --accent-ink:#ffffff;
    --accent-line:#B9AAEF;       /* Ink light-purple — the readable one on dark */

    --up:#4FBE84;
    --up-soft:rgba(79,190,132,.14);
    --down:#EC6D6D;
    --down-soft:rgba(236,109,109,.14);
    --warn:#E7954A;
    --warn-soft:rgba(231,149,74,.14);

    --float-bg:rgba(26,25,36,.82);
    --float-border:rgba(255,255,255,.08);
    --float-shadow:0 1px 2px rgba(0,0,0,.40),0 8px 24px rgba(0,0,0,.38),0 24px 48px rgba(0,0,0,.30);
    --shadow-card:0 2px 12px rgba(0,0,0,.30);
    --shadow-soft:0 4px 24px rgba(0,0,0,.38);
    --shadow-pop:0 16px 48px rgba(0,0,0,.58);
    --ring:rgba(138,97,255,.28);
    --glow:rgba(113,50,245,.45);

    --chart-line:#9B7BFF;
    --chart-line-soft:rgba(155,123,255,.24);
    --chart-grid:rgba(255,255,255,.12);
    --chart-axis:rgba(255,255,255,.48);
    --chart-future:rgba(255,255,255,.24);
    --chart-stage:rgba(187,180,255,.045);
    --chart-sign:#17151f;
  }
}

/* …and the toggle outranks the OS in both directions. */
:root[data-theme="dark"]{
  color-scheme:dark;

  --bg-page:#121118;
  --bg-white:#1A1924;
  --bg-elevated:#201E2A;
  --bg-sunken:#262435;

  --text:#FFFFFF;
  --text-2:#B3B0C2;
  --text-3:#807D91;
  --divider:#2A2838;

  --accent-hover:#8A61FF;
  --accent-soft:#231A3B;
  --accent-ink:#ffffff;
  --accent-line:#B9AAEF;

  --up:#4FBE84;
  --up-soft:rgba(79,190,132,.14);
  --down:#EC6D6D;
  --down-soft:rgba(236,109,109,.14);
  --warn:#E7954A;
  --warn-soft:rgba(231,149,74,.14);

  --float-bg:rgba(26,25,36,.82);
  --float-border:rgba(255,255,255,.08);
  --float-shadow:0 1px 2px rgba(0,0,0,.40),0 8px 24px rgba(0,0,0,.38),0 24px 48px rgba(0,0,0,.30);
  --shadow-card:0 2px 12px rgba(0,0,0,.30);
  --shadow-soft:0 4px 24px rgba(0,0,0,.38);
  --shadow-pop:0 16px 48px rgba(0,0,0,.58);
  --ring:rgba(138,97,255,.28);
  --glow:rgba(113,50,245,.45);

  --chart-line:#9B7BFF;
  --chart-line-soft:rgba(155,123,255,.24);
  --chart-grid:rgba(255,255,255,.12);
  --chart-axis:rgba(255,255,255,.48);
  --chart-future:rgba(255,255,255,.24);
  --chart-stage:rgba(187,180,255,.045);
  --chart-sign:#17151f;
}

*{box-sizing:border-box}
/* Our own display rules on buttons and panels outrank the UA's [hidden], which
   would otherwise leave "hidden" controls on screen. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg-page);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.55;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

h1,h2,h3{margin:0}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(30px,4vw,42px)}
h2{font-size:26px}
h3{font-size:13px;font-weight:600;letter-spacing:.02em}
p{margin:0}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* Figures refresh in place all over this UI; tabular digits keep them from
   dancing a pixel left and right on every poll. */
.card .fig .v,.stat .v,.stat .sub,.kv .v,.progline,.trade .amt,.claimbox .amt,.dz-sub{
  font-variant-numeric:tabular-nums;
}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px}
.muted{color:var(--text-2)} .faint{color:var(--text-3)}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:10px}

/* ---------- header ----------
   A floating glass bar rather than a full-bleed one: it sits above the page
   with air on every side, and the page scrolls under it. */
header.bar{
  position:sticky;top:0;z-index:40;padding:14px 16px 0;
  background:linear-gradient(var(--bg-page) 46%,transparent);
}
.bar .shell{
  display:flex;align-items:center;gap:12px;height:60px;
  max-width:var(--shell);padding:0 10px 0 18px;
  background:var(--float-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--float-border);border-radius:var(--r-float);
  box-shadow:var(--float-shadow);
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:400;
  letter-spacing:-.02em;font-size:21px}
.brand .mark{width:26px;height:26px;border-radius:8px;flex:none;display:block}
nav.links{display:flex;gap:2px;margin-left:8px}
nav.links a{
  padding:7px 13px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;
  color:var(--text-2);transition:color .16s,background .16s;
}
nav.links a:hover{color:var(--text)}
nav.links a[aria-current]{background:var(--bg-white);color:var(--text);font-weight:600;
  box-shadow:0 1px 3px rgba(23,21,31,.08)}
:root[data-theme="dark"] nav.links a[aria-current]{background:rgba(255,255,255,.08);box-shadow:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) nav.links a[aria-current]{background:rgba(255,255,255,.08);box-shadow:none}
}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:6px;position:relative}

/* theme toggle */
#theme{
  width:34px;height:34px;padding:0;flex:none;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;color:var(--text-2);
}
#theme:hover{background:var(--bg-sunken);color:var(--text);border-color:transparent}
#theme svg{width:16px;height:16px}

/* ---------- controls ---------- */
button,.btn{
  font:inherit;font-size:13.5px;font-weight:560;letter-spacing:-.01em;
  padding:9px 16px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--bg-white);color:var(--text);border:1px solid var(--divider);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background .16s,border-color .16s,box-shadow .18s,transform .1s;
  box-shadow:var(--shadow-card);
}
button:hover:not(:disabled),.btn:hover{border-color:rgba(23,21,31,.20);box-shadow:var(--shadow-soft)}
:root[data-theme="dark"] button:hover:not(:disabled),
:root[data-theme="dark"] .btn:hover{border-color:rgba(255,255,255,.24)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

button.primary,.btn.primary{
  background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600;
  box-shadow:0 8px 24px var(--glow);
}
button.primary:hover:not(:disabled),.btn.primary:hover{
  background:var(--accent-hover);border-color:transparent;box-shadow:0 12px 32px var(--glow);
}
button.ghost{background:transparent;border-color:transparent;color:var(--text-2);box-shadow:none}
button.ghost:hover:not(:disabled){background:var(--bg-sunken);color:var(--text);box-shadow:none}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2);box-shadow:none}
.btn.ghost:hover{background:var(--bg-sunken);color:var(--text);box-shadow:none}
button.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-soft);box-shadow:none}
button.lg{padding:15px 20px;font-size:15px;width:100%;border-radius:18px}
button.sm{padding:6px 12px;font-size:12.5px}

input,select,textarea{
  font:inherit;font-size:14px;width:100%;
  padding:12px 14px;border-radius:14px;
  background:var(--bg-white);color:var(--text);
  border:1px solid var(--divider);
  transition:border-color .16s,box-shadow .16s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);
}
input::placeholder{color:var(--text-3)}
select{cursor:pointer;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
}
select.compact,input.compact{width:auto;padding:9px 32px 9px 14px;font-size:13px;border-radius:var(--r-pill)}

/* ---------- page furniture ---------- */
.page{padding:36px 0 80px;flex:1}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.pagehead h1{font-size:clamp(34px,5vw,54px)}
.pagehead .lede{color:var(--text-2);margin-top:14px;max-width:52ch;font-size:15px;letter-spacing:0}

.toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;
}
.search{position:relative;flex:1;min-width:210px}
.search input{padding-left:38px;border-radius:var(--r-pill)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3)}

/* The pill group Pons uses for ranges, filters and buy/sell. */
.segmented{display:inline-flex;background:rgba(23,21,31,.05);border-radius:var(--r-pill);padding:3px;gap:2px}
:root[data-theme="dark"] .segmented{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .segmented{background:rgba(255,255,255,.06)}
}
.segmented button{
  border:none;background:transparent;box-shadow:none;color:var(--text-2);
  padding:7px 14px;font-size:12.5px;font-weight:520;letter-spacing:.01em;border-radius:var(--r-pill);
}
.segmented button:hover:not([aria-selected="true"]){background:transparent;color:var(--text);box-shadow:none}
.segmented button[aria-selected="true"]{
  background:var(--bg-white);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(23,21,31,.10);
}
:root[data-theme="dark"] .segmented button[aria-selected="true"]{background:rgba(255,255,255,.10);box-shadow:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .segmented button[aria-selected="true"]{background:rgba(255,255,255,.10);box-shadow:none}
}

/* ---------- market summary + the buy tape ---------- */
.statgrid + .tape{margin-top:-4px}
.tape{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
  padding:9px 14px;background:var(--bg-white);border:1px solid var(--divider);
  border-radius:var(--r-pill);box-shadow:var(--shadow-card);
}
.tapelabel{
  display:flex;align-items:center;gap:7px;flex:none;
  font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap;
}
.tapelabel .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
  animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}
.tapeitems{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.tapeitems::-webkit-scrollbar{display:none}
.tapeitem{
  display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;
  background:var(--bg-sunken);border-radius:var(--r-pill);
  padding:4px 12px 4px 4px;font-size:12.5px;transition:background .16s;
}
.tapeitem:hover{background:var(--accent-soft)}
.tapeitem .face{
  width:22px;height:22px;border-radius:50%;flex:none;object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:9.5px;font-weight:700;
}
.tapeitem .tk{font-weight:600;letter-spacing:-.01em}
.tapeitem .amt{color:var(--accent-line);font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.tapeitem .who{color:var(--text-3);font-family:var(--mono);font-size:11px}
@media(max-width:1100px){.tapeitem .who{display:none}}
@media(max-width:720px){
  .tape{padding:9px 12px;gap:10px;border-radius:20px}
  .tapelabel span:not(.dot){display:none}
}

/* ---------- token grid ---------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{
  background:var(--bg-white);border:1px solid var(--divider);border-radius:var(--r-lg);
  padding:18px;display:block;position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .16s;
}
/* A whisper of the accent bleeds in from the top-left, where the face sits. */
.card::before{
  content:"";position:absolute;left:-40px;top:-60px;width:220px;height:160px;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,var(--glow),transparent 68%);
  opacity:0;transition:opacity .28s var(--ease);
}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);border-color:transparent}
.card:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-pop);outline-offset:3px}
.card .head{display:flex;align-items:center;gap:12px;padding-bottom:15px;margin-bottom:15px;
  border-bottom:1px solid var(--divider);position:relative}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:14px;letter-spacing:-.02em;object-fit:cover;
  box-shadow:0 2px 8px rgba(23,21,31,.18);
}
.avatar.lg{width:64px;height:64px;font-size:22px}
.card .id{min-width:0;flex:1}
.card .sym{font-weight:650;font-size:15.5px;letter-spacing:-.025em}
.card .nm{color:var(--text-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .figs{display:flex;justify-content:space-between;gap:12px;margin-bottom:15px;position:relative}
.card .fig .k{font-size:10.5px;color:var(--text-3);margin-bottom:4px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.card .fig .v{font-size:17px;font-weight:600;letter-spacing:-.03em}
.card .fig.right{text-align:right}

.badge{
  font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge.live{background:var(--accent-soft);color:var(--accent-line)}
.badge.ready{background:var(--warn-soft);color:var(--warn)}
.badge.grad{background:var(--up-soft);color:var(--up)}
.badge.share{background:rgba(23,21,31,.06);color:var(--text-2)}
:root[data-theme="dark"] .badge.share{background:rgba(255,255,255,.08)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge.share{background:rgba(255,255,255,.08)}
}

.track{height:6px;background:var(--bg-sunken);border-radius:var(--r-pill);overflow:hidden}
.track .fill{
  height:100%;border-radius:var(--r-pill);transition:width .5s var(--ease);
  background:var(--accent);
}
.track .fill.done{background:linear-gradient(90deg,var(--accent),var(--warn))}
.track .fill.grad{background:var(--up)}
.track.tall{height:9px}
.progline{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-2);margin-top:10px}

/* ---------- panels / detail ---------- */
.panel{
  background:var(--bg-white);border:1px solid var(--divider);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--shadow-card);
}
.panel + .panel{margin-top:14px}
.panel h3{
  margin:-2px 0 15px;padding-bottom:12px;border-bottom:1px solid var(--divider);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;
}
.cols{display:grid;grid-template-columns:1fr 372px;gap:16px;align-items:start}
.sticky{position:sticky;top:92px}
@media(max-width:940px){.cols{grid-template-columns:1fr}.sticky{position:static}}

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{
  background:var(--bg-white);border:1px solid var(--divider);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--shadow-card);
}
.stat .k{font-size:10.5px;color:var(--text-3);margin-bottom:8px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
.stat .v{font-family:var(--serif);font-size:27px;font-weight:400;letter-spacing:-.03em;
  overflow-wrap:anywhere;line-height:1.05}
.stat .sub{font-size:12px;color:var(--text-3);margin-top:6px}

.kv{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--divider);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--text-2)}
.kv .v{font-weight:540;text-align:right;overflow-wrap:anywhere}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:12.5px;
  background:var(--bg-sunken);border-radius:var(--r-pill);color:var(--text-2);
  transition:background .16s,color .16s;
}
a.chip:hover{background:var(--accent-soft);color:var(--accent-line)}

/* ==========================================================================
   Chart — the Pons price chart, rebuilt for a bonding curve.

   Left of the "now" divider is executed price over time; right of it is the
   rest of the curve to graduation, drawn faint because it has not happened.
   ========================================================================== */
.chart{display:flex;flex-direction:column;gap:14px}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.chart-price-block{display:flex;flex-direction:column;gap:5px;min-width:0}
.chart-price{
  font-family:var(--serif);font-size:2.1rem;font-weight:400;line-height:1.05;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text);
}
.chart-change{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-2)}
.chart-change.is-up{color:var(--up)}
.chart-change.is-down{color:var(--down)}
.chart-change-range{color:var(--text-3);text-transform:uppercase;margin-left:7px;font-size:10.5px;letter-spacing:.06em}
.chart-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}

.chart-stage{
  position:relative;background:var(--chart-stage);border-radius:18px;overflow:hidden;
}
.chart-svg{display:block;width:100%;height:auto;aspect-ratio:640/300;touch-action:none;cursor:crosshair}
.chart-grid{stroke:var(--chart-grid);stroke-width:1;stroke-dasharray:3 4}
.chart-ytick,.chart-xtick{fill:var(--chart-axis);font-size:10.5px;font-family:var(--sans)}
.chart-ytick{paint-order:stroke;stroke:var(--bg-white);stroke-width:3px;stroke-linejoin:round}
.chart-line{fill:none;stroke:var(--chart-line);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-line-future{fill:none;stroke:var(--chart-future);stroke-width:2.5;stroke-linejoin:round;
  stroke-linecap:round;stroke-dasharray:5 6;pointer-events:none}
.chart-area{pointer-events:none}
.chart-area-future{pointer-events:none;opacity:.5}
.chart-divider{stroke:var(--chart-future);stroke-width:1;stroke-dasharray:2 5}
.chart-goal{stroke:var(--accent-line);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.chart-goal-label{fill:var(--accent-line);font-size:10px;font-family:var(--sans);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}
.chart-live-dot{fill:var(--chart-line);stroke:var(--bg-white);stroke-width:2}
.chart-live-halo{fill:var(--chart-line);opacity:.22;animation:halo 2.2s ease-out infinite}
@keyframes halo{0%{r:4;opacity:.35}70%{r:13;opacity:0}100%{r:13;opacity:0}}

.chart-cursor line{stroke:var(--chart-future);stroke-width:1}
.chart-cursor circle{fill:var(--chart-line);stroke:var(--bg-white);stroke-width:2}

.chart-fills{pointer-events:none}
.chart-fill-chip{stroke:var(--bg-white);stroke-width:1.5}
.chart-fill.is-buy .chart-fill-chip{fill:var(--chart-line)}
.chart-fill.is-sell .chart-fill-chip{fill:var(--down)}
.chart-fill-sign{fill:none;stroke:var(--chart-sign);stroke-width:1.75;stroke-linecap:round}


.chart-marker{
  position:absolute;pointer-events:none;z-index:2;white-space:nowrap;display:grid;gap:2px;
  padding:8px 11px;border-radius:12px;
  background:var(--chart-tip-bg);color:var(--chart-tip-fg);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 8px 24px rgba(0,0,0,.28);
  transform:translate(12px,-50%);
}
.chart-marker.is-left{transform:translate(calc(-100% - 12px),-50%)}
.chart-marker-label{font-size:10.5px;letter-spacing:-.02em;color:rgba(255,255,255,.55)}
.chart-marker.is-buy .chart-marker-label{color:#C4B0FF}
.chart-marker.is-sell .chart-marker-label{color:#F0A0A0}
.chart-marker-value{font-size:14px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.chart-marker-meta{font-size:10.5px;letter-spacing:-.02em;color:rgba(255,255,255,.45)}

.chart-empty{display:grid;place-items:center;min-height:260px;color:var(--text-3);font-size:13px;
  text-align:center;padding:24px}
.chart-foot{display:flex;align-items:center;justify-content:center;gap:14px;font-size:11.5px;
  color:var(--text-3);flex-wrap:wrap}
.chart-legend{display:inline-flex;align-items:center;gap:12px}
.chart-legend-item{display:inline-flex;align-items:center;gap:6px}
.chart-legend-chip{
  position:relative;display:inline-grid;place-items:center;width:13px;height:13px;
  border-radius:999px;border:1.5px solid var(--bg-white);font-size:0;line-height:0;
}
.chart-legend-chip::before,.chart-legend-chip::after{content:"";position:absolute;background:var(--chart-sign);border-radius:1px}
.chart-legend-item.is-buy .chart-legend-chip{background:var(--chart-line)}
.chart-legend-item.is-buy .chart-legend-chip::before{width:7px;height:1.5px}
.chart-legend-item.is-buy .chart-legend-chip::after{width:1.5px;height:7px}
.chart-legend-item.is-sell .chart-legend-chip{background:var(--down)}
.chart-legend-item.is-sell .chart-legend-chip::before{width:7px;height:1.5px}
.chart-legend-item.is-curve .chart-legend-chip{background:transparent;border:none;width:16px;height:2px;
  border-radius:0;background-image:repeating-linear-gradient(90deg,var(--chart-future) 0 5px,transparent 5px 10px)}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:16px}
.field > .lbl{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:540;
  margin-bottom:7px;color:var(--text-2)}
.field .hint{font-size:12.5px;color:var(--text-3);margin-top:7px}
.suffix{position:relative;display:block}  /* an inline box would let the unit escape the field */
.suffix .unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-3);
  font-size:13.5px;pointer-events:none}
.suffix input{padding-right:56px}

/* quick amounts under the trade input */
.presets{display:flex;gap:6px;margin:-8px 0 14px}
.presets button{
  flex:1;padding:7px 6px;font-size:12.5px;background:var(--bg-sunken);border-color:transparent;
  color:var(--text-2);box-shadow:none;
}
.presets button:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-line);border-color:transparent;box-shadow:none}

/* ---------- notices / status ---------- */
.notice{border:1px solid var(--divider);background:var(--bg-white);border-radius:var(--r);
  padding:18px 20px;font-size:14px;color:var(--text-2);box-shadow:var(--shadow-card)}
.notice b{color:var(--text)}
.notice.warn{border-color:rgba(201,138,0,.35);background:var(--warn-soft)}
.notice.info{border-color:var(--accent);background:var(--accent-soft)}
.notice code{font-family:var(--mono);font-size:12.5px;background:var(--bg-sunken);
  border-radius:6px;padding:1px 6px;color:var(--text)}
.status{min-height:20px;font-size:13px;margin-top:12px;color:var(--text-2)}
.status.err{color:var(--down)} .status.ok{color:var(--up)} .status.pending{color:var(--warn)}

.empty{text-align:center;padding:80px 24px;color:var(--text-2)}
.empty .big{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--text);margin-bottom:8px}

/* ---------- skeletons ---------- */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.skel{background:var(--bg-sunken);border-radius:8px;animation:pulse 1.4s ease-in-out infinite}

/* ---------- popover ---------- */
.popover{
  position:absolute;top:calc(100% + 10px);right:0;z-index:50;min-width:212px;overflow:hidden;
  background:var(--bg-elevated);border:1px solid var(--divider);border-radius:18px;
  box-shadow:var(--shadow-pop);
}
.poptitle{font-size:11px;color:var(--text-3);padding:12px 16px;border-bottom:1px solid var(--divider);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.popitem{
  display:flex;align-items:center;gap:10px;width:100%;justify-content:flex-start;
  padding:11px 16px;border:none;border-radius:0;background:transparent;box-shadow:none;
  font-size:13.5px;color:var(--text);
}
.popitem:hover{background:var(--bg-sunken);border-color:transparent;box-shadow:none}
.popitem img{width:19px;height:19px;border-radius:6px;flex:none}

/* ---------- trades ---------- */
.trade{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--divider);font-size:13.5px}
.trade:last-child{border-bottom:none}
/* A trade that landed since the last paint gets one quiet flash, not a loop. */
@keyframes landed{from{background:var(--accent-soft)}to{background:transparent}}
.trade.fresh{animation:landed 1.6s ease-out 1;border-radius:10px}
.trade .side{font-weight:600;font-size:11px;padding:4px 9px;border-radius:var(--r-pill)}
.trade .when{flex:none;min-width:56px;text-align:right;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.trade .side.buy{background:var(--accent-soft);color:var(--accent-line)}
.trade .side.sell{background:var(--down-soft);color:var(--down)}
.trade .amt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-2)}

/* ---------- footer ---------- */
footer{margin-top:64px;padding:44px 0 36px;border-top:1px solid var(--divider);
  color:var(--text-3);font-size:13px}
footer .shell{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-brand{max-width:34ch;display:flex;flex-direction:column;gap:10px}
.foot-name{font-family:var(--serif);font-size:clamp(28px,3vw,36px);font-weight:400;
  letter-spacing:-.02em;line-height:1;color:var(--text)}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-weight:600}
.foot-col a,.foot-col span{color:var(--text-3);transition:color .16s}
.foot-col a:hover{color:var(--text)}
.foot-note{flex:1 0 100%;margin-top:8px;padding-top:20px;border-top:1px solid var(--divider);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px}

/* ---------- create form ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
textarea{resize:vertical;min-height:80px;line-height:1.5}
.rowin{display:flex;gap:8px}
.rowin input{flex:1}

/* token image drop zone */
.dropzone{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  border:1px dashed var(--divider);border-radius:18px;padding:15px;
  background:transparent;box-shadow:none;transition:border-color .16s,background .16s;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent-line);background:var(--accent-soft);box-shadow:none}
.dropzone.over{border-color:var(--accent-line);background:var(--accent-soft)}
.dropzone.has-image{border-style:solid}
.dz-thumb{
  width:52px;height:52px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-sunken);color:var(--text-3);
}
.dropzone.has-image .dz-thumb svg{display:none}
.dz-thumb svg{width:22px;height:22px}
.dz-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.dz-title{font-size:14px;font-weight:540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-sub{font-size:12.5px;color:var(--text-3)}
button.linkish{
  background:none;border:none;padding:0;font:inherit;color:var(--text-2);cursor:pointer;box-shadow:none;
  text-decoration:underline;text-decoration-color:var(--divider);text-underline-offset:2px;
}
button.linkish:hover{background:none;color:var(--accent-line);text-decoration-color:var(--accent-line);box-shadow:none}

details.adv{padding:0}
details.adv summary{
  cursor:pointer;padding:18px 22px;font-weight:600;font-size:14px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;
}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::after{content:"⌄";color:var(--text-3);font-size:16px;transform:translateY(-2px)}
details.adv[open] summary{border-bottom:1px solid var(--divider)}
details.adv[open] summary::after{content:"⌃";transform:translateY(3px)}
.advbody{padding:20px 22px 22px}
.chip .x{
  background:transparent;border:none;padding:0 0 0 2px;color:var(--text-3);box-shadow:none;
  font-size:15px;line-height:1;cursor:pointer;border-radius:0;
}
.chip .x:hover{background:transparent;color:var(--down);box-shadow:none}
.preview .head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.preview .id{min-width:0}
.preview .sym{font-weight:640;font-size:16px;letter-spacing:-.02em}
.preview .nm{color:var(--text-2);font-size:13px}

/* toggle row */
label.toggle{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  padding:15px;background:var(--bg-sunken);border:1px solid transparent;border-radius:18px}
label.toggle input{width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--accent-line);cursor:pointer}
label.toggle b{font-weight:600;font-size:14px}
label.toggle .hint{display:block;margin-top:2px}
input:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-sunken)}
.claimbox{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px;background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:18px;margin-bottom:14px}
.claimbox .amt{font-weight:600;font-size:18px;color:var(--accent-line)}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .shell{padding:0 16px}
  .page{padding:26px 0 60px}
  header.bar{padding:10px 12px 0}
  .bar .shell{height:54px;gap:8px;padding:0 8px 0 14px}
  nav.links{margin-left:0}
  nav.links a{padding:7px 11px}
  .pagehead{align-items:flex-start;gap:14px;margin-bottom:20px}
  .pagehead .btn.primary{width:100%}   /* the page's action, not a back link */
  .toolbar{gap:8px}
  .search{flex:1 0 100%}
  .segmented{flex:1 0 100%;overflow-x:auto;scrollbar-width:none}
  .segmented button{flex:1;white-space:nowrap}
  .segmented::-webkit-scrollbar{display:none}
  #sort{flex:1;min-width:0}
  .grid{grid-template-columns:1fr}
  .statgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .panel{padding:18px}
  .advbody{padding:18px}
  details.adv summary{padding:16px 18px}
  .chart-price{font-size:1.75rem}
  footer{margin-top:44px}
  .foot-cols{gap:32px}
}
/* Below this the header cannot hold brand, nav and wallet on one line — so the
   nav drops to a second row rather than pushing the page wide. */
@media(max-width:600px){
  .bar .shell{height:auto;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;gap:8px;border-radius:24px}
  .brand{order:1}
  .bar .right{order:2;margin-left:auto}
  nav.links{order:3;flex:1 0 100%;margin-left:0}
  nav.links a{flex:1;justify-content:center;text-align:center}
  .sticky{top:12px}
}
@media(max-width:430px){
  .brand .name{display:none}   /* the mark alone carries it once space is tight */
}

/* Honour the OS setting: keep state changes visible, drop the movement. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .card:hover{transform:none}
}

/* Inline emphasis for a value the user should look at twice. */
.warn-text{color:var(--danger,#e5484d)}

/* Address chips: the chip copies, the arrow beside it opens the explorer. */
.addr{display:inline-flex;align-items:center;gap:4px}
.chip.copy{cursor:copy;font:inherit;border:0;font-family:var(--mono)}
.chip.copy.copied{color:var(--accent-line);background:var(--accent-soft)}
.chip.ext{padding-left:8px;padding-right:8px;text-decoration:none}