:root {
    --bg: #050B18;
    --bg-raised: #0C1730;
    --ink: #E8EEFB;
    --ink-dim: #6F7C99;
    --blue: #28A0F0;
    --amber: #F0A428;
    --red: #E8506B;
    --line: #182747;
  }
  * { box-sizing: border-box; }
  body {
    margin:0; color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; padding-bottom:76px;
    background-color: var(--bg);
    background-image:
      radial-gradient(circle at 15% 8%, rgba(40,160,240,0.10) 0, transparent 40%),
      radial-gradient(circle at 85% 92%, rgba(240,164,40,0.08) 0, transparent 40%);
  }
  .node-bg { position:fixed; inset:0; z-index:-1; opacity:0.35; }
  .mono { font-family:'JetBrains Mono',monospace; }
  .disp { font-family:'Space Grotesk',sans-serif; font-weight:700; }
  .wrap { max-width:480px; margin:0 auto; padding:0 16px; position:relative; }


  .mark { width:24px; height:24px; }
  header { padding:16px 0; display:flex; align-items:center; justify-content:space-between; }
  a { color:inherit; }
  .wordmark { text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:8px; font-size:17px; }
  .connect { cursor:pointer; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:var(--bg); background:var(--blue); padding:8px 14px; border:none; border-radius:20px; }


  /* ---- HOME: real hero copy instead of jumping straight to a bare stat strip ---- */
  .hero { padding:8px 0 22px; }
  .hero h1 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; line-height:1.2; margin:0 0 10px; }
  .hero h1 .hl { color:var(--blue); }
  .hero p { font-size:13.5px; color:var(--ink-dim); line-height:1.6; margin:0; max-width:40ch; }

  .ticker { display:flex; border:1px solid var(--line); margin-bottom:18px; overflow:hidden; }
  .ticker-cell { flex:1; padding:14px 12px; text-align:center; border-right:1px solid var(--line); }
  .ticker-cell:last-child { border-right:none; }
  .ticker-cell .v { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:16px; color:var(--blue); }
  .ticker-cell .l { font-size:10.5px; color:var(--ink-dim); margin-top:3px; }

  .sort-row { display:flex; gap:8px; margin-bottom:16px; }
  .sort-row button { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; background:none; border:1px solid var(--line); color:var(--ink-dim); padding:7px 13px; cursor:pointer; }
  .sort-row button.on { background:var(--blue); color:#000; border-color:var(--blue); }

  .sec-title { font-size:13px; font-weight:600; margin:20px 0 12px; display:flex; justify-content:space-between; align-items:center; }
  .sec-title span:last-child { font-size:11px; color:var(--ink-dim); font-weight:400; }

  .hscroll { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; margin-bottom:6px; }
  .hcard { flex-shrink:0; width:104px; background:var(--bg-raised); border:1px solid var(--line); padding:10px; }
  .hcard .art { width:100%; aspect-ratio:1/1; background:var(--line); margin-bottom:8px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--ink-dim); }
  .hcard .n { font-size:12px; font-weight:600; }
  .hcard .p { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--amber); }

  .list-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
  .list-row .lart { width:34px; height:34px; background:var(--bg-raised); border:1px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; color:var(--ink-dim); }
  .list-row .ln { font-size:13px; font-weight:600; }
  .list-row .lm { font-size:11px; color:var(--ink-dim); }
  .list-row .lp { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:12.5px; }

  /* ---- TOKEN: richer, more interactive ---- */
  .price-hero { text-align:center; padding:20px 0 14px; border-bottom:1px solid var(--line); margin-bottom:16px; }
  .price-hero .big { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px; }
  .price-hero .sub { font-size:12px; color:var(--ink-dim); margin-top:4px; }
  .token-id-row { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
  .tok-art-sm { width:28px; height:28px; background:var(--bg-raised); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:10px; }

  /* sparkline */
  .spark { margin-top:14px; }
  .spark svg { width:100%; height:44px; }

  .swap-box { background:var(--bg-raised); border:1px solid var(--line); padding:16px; margin-bottom:16px; }
  .swap-toggle { display:flex; gap:0; margin-bottom:14px; border:1px solid var(--line); }
  .swap-toggle button { flex:1; padding:10px; background:none; border:none; color:var(--ink-dim); font-weight:600; font-size:12.5px; cursor:pointer; }
  .swap-toggle button.buy.on { background:var(--blue); color:#000; }
  .swap-toggle button.sell.on { background:var(--red); color:#000; }
  .swap-input { width:100%; background:none; border:none; border-bottom:1px solid var(--line); color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:22px; padding:8px 0; margin-bottom:12px; }
  .swap-btn { width:100%; padding:13px; background:var(--blue); color:#000; border:none; font-weight:700; font-size:13px; cursor:pointer; }

  /* fee split visualized as a segmented bar, not just numbers */
  .feebar-wrap { margin-bottom:16px; }
  .feebar { display:flex; height:10px; overflow:hidden; margin-bottom:8px; }
  .feebar-legend { display:flex; gap:14px; font-size:11px; color:var(--ink-dim); flex-wrap:wrap; }
  .feebar-legend .dot { width:7px; height:7px; display:inline-block; border-radius:50%; margin-right:5px; }

  .subtab-row { display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:14px; }
  .subtab-row button { flex:1; padding:10px; background:none; border:none; color:var(--ink-dim); font-size:12.5px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; }
  .subtab-row button.on { color:var(--blue); border-bottom-color:var(--blue); }
  .subview { display:none; }
  .subview.active { display:block; }

  /* holder distribution as horizontal bars */
  .holder-bar-row { padding:9px 0; border-bottom:1px solid var(--line); }
  .holder-bar-top { display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
  .holder-bar-track { height:6px; background:var(--line); overflow:hidden; }
  .holder-bar-fill { height:100%; background:var(--blue); }

  .reward-strip { display:flex; gap:10px; margin-bottom:16px; }
  .reward-cell { flex:1; background:var(--bg-raised); border:1px solid var(--line); padding:12px; text-align:center; }
  .reward-cell .v { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--amber); }
  .reward-cell .l { font-size:10px; color:var(--ink-dim); margin-bottom:4px; }
  .reward-cell button { margin-top:8px; font-size:10.5px; background:none; border:1px solid var(--line); color:var(--ink); padding:5px 10px; cursor:pointer; }

  /* ---- LAUNCH ---- */
  .launch-intro { font-size:13px; color:var(--ink-dim); line-height:1.6; margin-bottom:18px; }
  .launch-preview-card { background:var(--bg-raised); border:1px solid var(--blue); padding:16px; margin-bottom:20px; text-align:center; }
  .launch-preview-card .art { width:56px; height:56px; margin:0 auto 10px; background:var(--line); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; }
  .launch-preview-card .n { font-weight:700; font-size:14px; }
  .launch-preview-card .m { font-size:11px; color:var(--ink-dim); }
  .step-card { background:var(--bg-raised); border:1px solid var(--line); padding:16px; margin-bottom:12px; }
  .step-card .num { display:inline-flex; width:20px; height:20px; background:var(--blue); color:#000; border-radius:50%; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-right:8px; }
  .step-card label { font-size:12px; color:var(--ink-dim); }
  .step-card input { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink); padding:10px; font-family:'Inter',sans-serif; font-size:14px; margin-top:8px; }

  .split-item { margin-bottom:16px; }
  .split-item-head { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px; }
  input[type=range] { width:100%; accent-color:var(--blue); }

  /* ---- PORTFOLIO ---- */
  .portfolio-hero { text-align:center; padding:20px 0; border-bottom:1px solid var(--line); margin-bottom:16px; }
  .portfolio-hero .big { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:34px; }
  .portfolio-hero .sub { font-size:11px; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; margin-top:6px; }

  /* ---- STATS: full dashboard, not two cells ---- */
  .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
  .stat-card { background:var(--bg-raised); border:1px solid var(--line); padding:14px; }
  .stat-card .l { font-size:10.5px; color:var(--ink-dim); margin-bottom:6px; }
  .stat-card .v { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:18px; }
  .stat-card .v.amber { color:var(--amber); }
  .stat-card .v.blue { color:var(--blue); }
  .stat-card .v.red { color:var(--red); }

  /* ---- DOCS (accordion), more sections + FAQ ---- */
  .accordion-item { border-bottom:1px solid var(--line); }
  .accordion-head { padding:15px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:13px; font-weight:600; }
  .accordion-head .chev { transition:transform 0.2s; color:var(--ink-dim); }
  .accordion-item.open .chev { transform:rotate(180deg); }
  .accordion-body { display:none; padding-bottom:15px; font-size:13px; color:var(--ink-dim); line-height:1.6; }
  .accordion-item.open .accordion-body { display:block; }
  .docs-section-label { font-size:11px; color:var(--blue); font-weight:600; margin:22px 0 4px; text-transform:uppercase; letter-spacing:0.04em; }

  .tabbar { position:fixed; bottom:0; left:0; right:0; background:var(--bg-raised); border-top:1px solid var(--line); display:flex; justify-content:space-around; padding:10px 0 14px; }
  .tabbar a { color:var(--ink-dim); text-decoration:none; font-size:10.5px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
  .tabbar a.on { color:var(--blue); }
  .tabbar .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

  /* ---- additions for the live app ---- */
  .hdr-right { display:flex; align-items:center; gap:12px; }
  .hdr-x { color:var(--ink-dim); text-decoration:none; font-size:15px; }
  .list-row { text-decoration:none; color:inherit; }
  .list-row .lart, .hcard .art, .tok-art-sm, .launch-preview-card .art { overflow:hidden; }
  .lart img, .hcard .art img, .tok-art-sm img, .launch-preview-card .art img { width:100%; height:100%; object-fit:cover; display:block; }
  .hcard { text-decoration:none; color:inherit; display:block; }
  .hint { font-size:11.5px; color:var(--ink-dim); line-height:1.5; margin-top:6px; }
  .err { color:var(--red); font-size:12px; margin:0 0 10px; min-height:0; }
  .ok { color:var(--blue); }
  .empty { padding:22px 0; text-align:center; color:var(--ink-dim); font-size:13px; }
  .swap-btn:disabled { opacity:0.5; cursor:default; }
  .swap-btn.sell { background:var(--red); }
  .swap-meta { background:var(--bg); border:1px solid var(--line); padding:8px 12px; margin-bottom:12px; }
  .swap-meta .row { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:5px 0; color:var(--ink-dim); }
  .swap-meta .row .mono { color:var(--ink); }
  .pct-row { display:flex; gap:6px; margin-bottom:12px; }
  .pct-row button, .chip { flex:1; background:none; border:1px solid var(--line); color:var(--ink-dim); font-size:11px; padding:6px 0; cursor:pointer; font-family:'Inter',sans-serif; }
  .chip { flex:none; padding:4px 9px; }
  .chip.on { border-color:var(--blue); color:var(--blue); }
  .bal-line { display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-dim); }
  .step-card select, .step-card input[type=file] { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink); padding:10px; font-size:14px; margin-top:8px; }
  .step-card .hint { margin-top:8px; }
  .fee-readout { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:600; color:var(--blue); text-align:center; margin:10px 0 4px; }
  .split-item-head .mono { color:var(--ink); }
  .feebar div { min-width:0; }
  .meta-lines { border-top:1px solid var(--line); margin-bottom:16px; }
  .meta-lines .row { display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-dim); }
  .meta-lines .row .mono { color:var(--ink); font-size:11.5px; word-break:break-all; text-align:right; }
  .meta-lines a { color:var(--blue); text-decoration:none; }
  .top-links a { color:var(--blue); }
  .acc-links a { color:var(--blue); word-break:break-all; }
  .acc-links .mono { font-size:11px; }
  .reward-cell.wide { flex-basis:100%; }
  .reward-cell button { cursor:pointer; }
  .reward-cell button:disabled { opacity:0.4; cursor:default; }
  .note { font-size:11.5px; color:var(--ink-dim); line-height:1.55; }
  .wrap { min-height:100vh; }
  main { padding-bottom:12px; }