/* PONSDX — shell.
   Frosted white glass on a soft light ground. Ink #0E1512, deep green #0F7A45
   for anything that has to be read, ponsfamily lime #B6FA4E for solid fills. */
:root{
  /* Light ground, frosted white glass, ponsfamily lime kept as the signature
     fill. On white, lime is unreadable as TEXT, so the accent splits in two:
     --acc is a deep green that carries every label, link and hairline, and
     --lime is reserved for solid fills that sit under near-black text. */
  --bg:#f4f6f5;
  --bg-2:#ffffff;
  --bg-3:#eaeeec;
  --ink:#0e1512;
  --ink-2:rgba(14,21,18,.62);
  --ink-3:rgba(14,21,18,.46);
  --ink-4:rgba(14,21,18,.28);

  --acc:#0f7a45;            /* deep green: text, icons, hairlines */
  --lime:#b6fa4e;           /* ponsfamily lime: solid fills only */
  --lime-hi:#c9ff6b;
  --acc-2:#0e9c5c;          /* second chart series */
  --acc-soft:rgba(15,122,69,.55);
  --acc-glow:rgba(15,122,69,.20);
  --acc-dim:rgba(15,122,69,.06);

  --good:#0f7a45;
  --warn:#9a6b12;
  --bad:#c33f37;

  --line:rgba(14,21,18,.10);
  --line-soft:rgba(14,21,18,.07);
  --line-hot:rgba(15,122,69,.32);

  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Inter","Inter Variable",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r:18px;
  --r-sm:12px;
  --nav-h:64px;
  --wrap:1200px;

  /* The glass recipe.
     backdrop-filter is spent only on the nav, the mobile menu and the modal
     scrim: the surfaces that genuinely sit over moving content. Putting it on
     every card stacks dozens of compositor layers over the fixed backdrop
     canvas and Safari starts handing back blank paints. Cards use a
     translucent white gradient plus a lit top edge instead. */
  --glass:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.64));
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.95);
  --glass-blur:blur(20px) saturate(1.6);
  --shadow:0 22px 50px -32px rgba(16,44,32,.34);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}
/* ⚠ Several components use display:flex/grid, which beats the [hidden]
   attribute. Restore its meaning globally or "hidden" panels keep rendering. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--lime);color:#0e1512}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.08}
h1{font-size:clamp(38px,6.4vw,72px)}
h2{font-size:clamp(26px,3.6vw,42px)}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.012em}
p{margin:0}

.wrap{width:min(var(--wrap),92vw);margin-inline:auto;position:relative;z-index:1}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.up{color:var(--good)}
.down{color:var(--bad)}

/* ---------------------------------------------------------------- backdrop */
#backdrop{
  position:fixed;inset:0;z-index:0;display:block;pointer-events:none;
  /* Cleared out of the middle so the lines frame the page instead of running
     behind the copy on translucent cards. */
  -webkit-mask-image:radial-gradient(ellipse 62% 56% at 50% 40%,transparent 26%,#000 92%);
  mask-image:radial-gradient(ellipse 62% 56% at 50% 40%,transparent 26%,#000 92%);
}
.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(62vw 46vh at 12% -8%,rgba(14,156,92,.13),transparent 64%),
    radial-gradient(54vw 42vh at 90% 2%,rgba(182,250,78,.26),transparent 62%),
    radial-gradient(74vw 52vh at 52% 108%,rgba(120,200,160,.20),transparent 68%);
}

/* -------------------------------------------------------------------- icon */
.i{display:inline-flex;width:1em;height:1em;flex:none}
.i svg{width:100%;height:100%;display:block}
.i-lg{font-size:20px}
.i-sm{font-size:14px}

/* ------------------------------------------------------------------- glass */
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  box-shadow:var(--glass-hi),var(--shadow);
  border-radius:var(--r);
  position:relative;
}
/* Corner ticks — the wireframe read, drawn in CSS so it costs nothing and
   survives whatever content lands inside the panel. */
.ticks::before,.ticks::after{
  content:"";position:absolute;width:10px;height:10px;pointer-events:none;
  border:1px solid var(--line-hot);opacity:.30;
}
.ticks::before{top:9px;left:9px;border-right:0;border-bottom:0}
.ticks::after{bottom:9px;right:9px;border-left:0;border-top:0}

/* ------------------------------------------------------------------ eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);opacity:.9;
}
.eyebrow::before,.eyebrow::after{content:"/";opacity:.5}

/* ------------------------------------------------------------------- badge */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:999px;
  border:1px solid var(--line);background:rgba(15,122,69,.065);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc);white-space:nowrap;
}
.badge.neutral{color:var(--ink-2);background:rgba(14,21,18,.05);border-color:var(--line-soft)}
.badge.warn{color:var(--warn);background:rgba(184,134,20,.10);border-color:rgba(184,134,20,.34)}
.badge.live{color:var(--good);background:rgba(14,156,92,.09);border-color:rgba(14,156,92,.30)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dot.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

/* ------------------------------------------------------------------ button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 20px;border-radius:999px;
  border:1px solid var(--line);background:rgba(14,21,18,.042);
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{background:rgba(15,122,69,.085);border-color:var(--line-hot)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn[disabled]:hover,.btn.is-disabled:hover{background:rgba(14,21,18,.042);border-color:var(--line)}
.btn-primary{
  background:var(--lime);color:#0e1512;border-color:transparent;
  box-shadow:0 14px 30px -16px rgba(120,180,40,.55),0 0 0 1px rgba(14,21,18,.10) inset;
}
.btn-primary:hover{background:var(--lime-hi);border-color:transparent}
.btn-ghost{background:transparent}
.btn-sm{height:34px;padding:0 14px;font-size:11.5px}
.btn-block{width:100%}
.btn-lg{height:52px;padding:0 26px;font-size:14px}

/* --------------------------------------------------------------------- nav */
.nav{
  position:sticky;top:0;z-index:40;
  padding:10px 0;
}
.nav-inner{
  display:flex;align-items:center;gap:14px;
  height:var(--nav-h);padding:0 8px 0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi),0 16px 40px -28px rgba(16,44,32,.30);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.10em;font-size:13.5px;text-transform:uppercase;flex:none}
.brand .i{font-size:20px;color:var(--acc)}
.nav-links{display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav-links a{
  padding:8px 13px;border-radius:999px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);transition:color .16s ease,background .16s ease;
}
.nav-links a:hover{color:var(--ink);background:rgba(14,21,18,.05)}
.nav-links a.active{color:var(--acc);background:rgba(15,122,69,.085)}
.nav-side{display:flex;align-items:center;gap:8px;flex:none}
.nav-clock{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(15,122,69,.055);
}
.nav-clock .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.nav-clock .val{font-family:var(--mono);font-size:13.5px;color:var(--acc);font-variant-numeric:tabular-nums}
.nav-x{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);transition:color .16s ease,border-color .16s ease}
.nav-x:hover{color:var(--acc);border-color:var(--line-hot)}
.nav-x .i{font-size:14px}
.nav-burger{display:none;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);align-items:center;justify-content:center;color:var(--ink-2)}
.nav-burger .i{font-size:18px}

/* ------------------------------------------------------------------ layout */
main{position:relative;z-index:1;min-height:60vh}
.section{padding:clamp(48px,7vw,96px) 0}
.section-tight{padding:clamp(32px,4.6vw,56px) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.section-head .lead{max-width:56ch;color:var(--ink-2);margin-top:10px;font-size:15px}

/* ------------------------------------------------------------------- grids */
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* --------------------------------------------------------------- stat tile */
.stat{padding:20px 20px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.stat .v{font-family:var(--mono);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.12;overflow-wrap:anywhere}
.stat .s{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.stat .idx{font-family:var(--mono);font-size:10px;color:var(--acc);opacity:.75;letter-spacing:.14em}

/* ------------------------------------------------------------------- table */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:560px}
thead th{
  text-align:left;padding:12px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--line-soft);white-space:nowrap;
}
tbody td{padding:14px;border-bottom:1px solid var(--line-soft);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .14s ease}
tbody tr:hover{background:rgba(15,122,69,.045)}
td.right,th.right{text-align:right}
.t-empty{padding:44px 16px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* -------------------------------------------------------------------- chip */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:7px;
  border:1px solid var(--line-soft);background:rgba(14,21,18,.042);
  font-family:var(--mono);font-size:11px;white-space:nowrap;
}
.chip .sym{color:var(--ink);letter-spacing:.04em}
.chip .qty{color:var(--acc)}
.chip-more{color:var(--ink-3);border-style:dashed}

/* ------------------------------------------------------------------ ticker */
.tick-link{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);transition:color .16s ease}
.tick-link:hover{color:var(--acc)}
.tick-link .i{font-size:13px}
.tick-off{color:var(--ink-4);cursor:help}

/* ------------------------------------------------------------------ footer */
.footer{position:relative;z-index:1;margin-top:clamp(48px,7vw,90px);border-top:1px solid var(--line-soft);padding:40px 0 34px}
.footer-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 28px;margin-bottom:34px;
}
.footer-cta h3{max-width:34ch}
.footer-grid{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:28px}
.footer-col{display:flex;flex-direction:column;gap:9px;min-width:130px}
.footer-col .h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.footer-col a,.footer-col span{font-size:13px;color:var(--ink-2);transition:color .16s ease}
.footer-col a:hover{color:var(--acc)}
.disclaimer{font-size:11.5px;line-height:1.7;color:var(--ink-3);max-width:96ch;margin-bottom:20px}
.footer-base{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line-soft)}
.footer-sig{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2)}
.footer-sig a{color:var(--acc);opacity:.85}
.footer-sig a:hover{opacity:1}
.footer-links{display:flex;gap:16px;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.footer-links a:hover{color:var(--acc)}

/* ------------------------------------------------------------------- modal */
.scrim{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(18,32,26,.40);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:min(420px,100%);padding:24px;animation:rise .22s cubic-bezier(.2,.8,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.modal-head h3{font-size:18px}
.modal-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.modal-x:hover{color:var(--ink);border-color:var(--line-hot)}

.wallet-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-soft);background:rgba(14,21,18,.035);margin-bottom:9px;
  transition:border-color .16s ease,background .16s ease;text-align:left;
}
.wallet-row:hover{border-color:var(--line-hot);background:rgba(15,122,69,.065)}
.wallet-row img{width:26px;height:26px;border-radius:7px}
.wallet-row .nm{font-size:14px;font-weight:600;flex:1}
.wallet-row .i{color:var(--ink-3);font-size:16px}

/* ------------------------------------------------------------------- toast */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(460px,92vw)}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.93));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow);font-size:13px;animation:rise .2s ease;max-width:100%;
}
.toast .i{font-size:15px;color:var(--acc)}
.toast.bad .i{color:var(--bad)}

/* ----------------------------------------------------------------- skeleton */
.sk{display:inline-block;border-radius:6px;background:linear-gradient(90deg,rgba(14,21,18,.05),rgba(14,21,18,.10),rgba(14,21,18,.05));background-size:220% 100%;animation:sh 1.5s linear infinite;color:transparent}
@keyframes sh{from{background-position:180% 0}to{background-position:-80% 0}}

/* ------------------------------------------------------------- breakpoints */
@media (max-width:1080px){
  .g-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .nav-links{
    display:none;position:absolute;top:calc(var(--nav-h) + 16px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    border-radius:var(--r);border:1px solid var(--line);
    background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.95));
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;font-size:12.5px}
  .nav-burger{display:flex}
  .nav-inner{position:relative}
  .nav-clock{display:none}
  .g-3,.g-2{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:14.5px}
  .g-4,.g-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-inner{padding-left:14px}
  .brand span.txt{display:none}
  .footer-cta{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  #backdrop{display:none}
}