/* ------------ base — Asymmetry-inspired cream + blue ------------ */
:root{
  --cream: #F5EEE3;
  --cream-2: #F9F2E7;
  --cream-3: #FFFBF3;
  --paper: #FFFFFF;
  --ink: #0E1424;
  --ink-dim: #2E3447;
  --muted: #6A7289;
  --muted-2: #8C94A8;
  --border: rgba(14,20,36,0.08);
  --border-strong: rgba(14,20,36,0.14);

  --blue: #2D5BFF;
  --blue-dark: #1E44D0;
  --blue-soft: #D6E0FF;
  --peach: #FFC4A1;
  --peach-soft: #FFE2CE;
  --sky: #B9D4FF;

  --good: #0E9E56;
  --bad: #D13D4D;
  --navy: #0A1230;

  /* high-contrast headline gradient stops (readable on cream) */
  --grad-1: #1E44D0;
  --grad-2: #2D5BFF;
  --grad-3: #4E6FE0;
  --grad-4: #D06A2E;

  --chart-grid: rgba(14,20,36,0.06);
  --chart-label: #6A7289;
  --chart-area-a: rgba(45,91,255,0.28);
  --chart-area-b: rgba(255,196,161,0.18);
  --chart-line-a: #1E44D0;
  --chart-line-b: #2D5BFF;
  --chart-line-c: #E67B3E;
  --chart-point-fill: #2D5BFF;
  --chart-point-halo: rgba(45,91,255,0.15);

  --shadow-sm: 0 1px 2px rgba(14,20,36,0.04), 0 2px 8px rgba(14,20,36,0.04);
  --shadow-md: 0 2px 4px rgba(14,20,36,0.04), 0 10px 24px rgba(14,20,36,0.06);
  --shadow-lg: 0 20px 50px -20px rgba(14,20,36,0.15), 0 8px 24px rgba(14,20,36,0.05);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
}

/* ------------ dark mode ------------ */
[data-theme="dark"]{
  --cream:   #070B18;
  --cream-2: #0B1226;
  --cream-3: #0E1630;
  --paper:   #111A33;
  --ink:     #E8ECF7;
  --ink-dim: #BFC6DA;
  --muted:   #8C94AE;
  --muted-2: #A0A8C0;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);

  --blue: #7AA2FF;
  --blue-dark: #5B85F5;
  --blue-soft: rgba(122,162,255,0.18);
  --peach: #FFB894;
  --peach-soft: rgba(255,184,148,0.18);
  --sky: rgba(122,162,255,0.3);

  --good: #4ADE80;
  --bad:  #FF6B7A;
  --navy: #04081A;

  --grad-1: #8BA8FF;
  --grad-2: #A9C0FF;
  --grad-3: #D0C8FF;
  --grad-4: #FFB894;

  --chart-grid: rgba(255,255,255,0.06);
  --chart-label: #8C94AE;
  --chart-area-a: rgba(122,162,255,0.35);
  --chart-area-b: rgba(255,184,148,0.18);
  --chart-line-a: #8BA8FF;
  --chart-line-b: #A9C0FF;
  --chart-line-c: #FFB894;
  --chart-point-fill: #A9C0FF;
  --chart-point-halo: rgba(122,162,255,0.25);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 12px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px -20px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

h1,h2,h3,h4{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing:-0.025em;
  margin:0;
  font-weight:600;
  color: var(--ink);
}
h1{ font-size:clamp(38px, 5.2vw, 64px); line-height:1.02; font-weight:700; letter-spacing:-0.035em }
h2{ font-size:20px; font-weight:600 }
h3{ font-size:14px; font-weight:600; letter-spacing:-0.01em }
p{margin:0}

a{ color: var(--blue); text-decoration:none }
a:hover{ color: var(--blue-dark) }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; letter-spacing:-0.01em }

.wrap{ max-width:1200px; margin:0 auto; padding:0 28px }
.row{ display:flex; gap:12px }
.row.between{ justify-content:space-between }
.row.center{ align-items:center }
.gap{ gap:20px }
.grid{ display:grid; gap:18px }
.grid.two{ grid-template-columns:1fr 1fr }
.small{ font-size:12.5px }
.muted{ color: var(--muted) }

/* ------------ ambient bg — blue/peach radial wash ------------ */
.bg-grid{
  position:fixed; inset:0; z-index:-2;
  background: var(--cream);
  transition: background .35s ease;
}
.bg-grid::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(45,91,255,0.14), transparent 40%),
    radial-gradient(circle at 78% 18%, rgba(255,196,161,0.55), transparent 45%),
    radial-gradient(circle at 55% 55%, rgba(185,212,255,0.30), transparent 35%);
}
[data-theme="dark"] .bg-grid::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(122,162,255,0.18), transparent 45%),
    radial-gradient(circle at 78% 18%, rgba(255,184,148,0.18), transparent 45%),
    radial-gradient(circle at 55% 60%, rgba(149,110,255,0.16), transparent 45%);
}
.bg-grid::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(14,20,36,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,20,36,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
  opacity:.6;
}
[data-theme="dark"] .bg-grid::after{
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}
.bg-glow{ display:none }

/* ------------ announcement bar (navy, mimics Asymmetry's top strip) ------------ */
.announce{
  background: var(--navy);
  color: #EAEFFF;
  text-align:center;
  font-size:12.5px;
  padding:9px 16px;
  letter-spacing:0.01em;
}
.announce .sep{ opacity:.35; margin:0 10px }
.announce .val{ font-weight:600; color:#fff }
.announce .live{ color: #9BF0C1; font-weight:600 }

/* ------------ topbar (white floating) ------------ */
.topbar{
  position:sticky; top:12px; z-index:10;
  margin: 12px auto 0;
  max-width: 1200px;
  padding: 0 28px;
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border:1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 12px 10px 20px;
  box-shadow: var(--shadow-md);
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); }
.brand:hover{ color: var(--ink) }
.logo{
  width:34px; height:34px; border-radius:50%;
  overflow:hidden; position:relative;
  box-shadow: inset 0 0 0 1px rgba(14,20,36,0.14), 0 1px 3px rgba(14,20,36,0.12);
  flex-shrink:0;
}
.logo img{ width:100%; height:100%; object-fit:cover; display:block }
.brand-text{ display:flex; flex-direction:column; line-height:1.15 }
.brand-title{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  letter-spacing:-0.015em; font-size:15.5px; color: var(--ink);
}
.brand-dot{ color: var(--blue); margin:0 3px }
.brand-sub{ color: var(--muted); font-size:11px; letter-spacing:0.01em }

.nav{ display:flex; align-items:center; gap:8px }
.addrChip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius: var(--radius-pill);
  background: var(--paper);
  border:1px solid var(--border);
  color: var(--ink);
  font-size:12.5px; font-weight:500;
  transition: background .2s ease, border-color .2s ease;
}
.addrChip:hover{
  background: var(--blue-soft);
  border-color: rgba(45,91,255,0.25);
  color: var(--blue-dark);
}
.addrDot{ width:7px; height:7px; border-radius:50%; background: var(--good); box-shadow: 0 0 0 3px rgba(14,158,86,0.15) }

.liveChip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius: var(--radius-pill);
  border:1px solid var(--border); background: var(--paper);
  color: var(--muted); font-size:12px;
}

/* theme toggle button */
.themeBtn{
  appearance:none; border:1px solid var(--border); background: var(--paper);
  width:36px; height:36px; border-radius:50%;
  display:inline-grid; place-items:center; cursor:pointer;
  color: var(--ink);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  padding:0;
}
.themeBtn:hover{ background: var(--blue-soft); border-color: rgba(45,91,255,0.25); transform: rotate(15deg); }
.themeBtn svg{ width:16px; height:16px; display:block }
[data-theme="dark"] .themeBtn .sun{ display:block }
[data-theme="dark"] .themeBtn .moon{ display:none }
.themeBtn .sun{ display:none }
.themeBtn .moon{ display:block }
.pulse{
  width:7px; height:7px; border-radius:50%; background: var(--good);
  box-shadow:0 0 0 0 rgba(14,158,86,0.6);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(14,158,86,0.55)}
  70%{ box-shadow:0 0 0 10px rgba(14,158,86,0)}
  100%{ box-shadow:0 0 0 0 rgba(14,158,86,0)}
}

/* ------------ hero ------------ */
.hero{
  padding: 72px 0 48px;
  text-align: center;
}
.hero-head{ max-width:820px; margin: 0 auto 48px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 16px 8px 12px; border-radius: var(--radius-pill);
  font-size:12.5px; font-weight:600; letter-spacing:0.01em;
  color: var(--blue-dark);
  background: var(--paper);
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom:24px;
}
.pill::before{
  content:""; width:14px; height:14px; border-radius:50%;
  background: url('/pol.jpg') center/cover;
  box-shadow: inset 0 0 0 1px rgba(14,20,36,0.15);
}
.hero h1 .grad{
  background: linear-gradient(100deg, var(--grad-1) 0%, var(--grad-2) 35%, var(--grad-3) 65%, var(--grad-4) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}
.lede{
  color: var(--ink-dim);
  font-size:18px;
  max-width:640px;
  margin: 22px auto 0;
  line-height:1.5;
}

/* ------------ hero stats ------------ */
.hero-stats{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:14px;
  margin-top: 4px;
}
.stat{
  position:relative;
  padding: 22px 22px 20px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  text-align:left;
}
.stat:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg) }
.stat-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.stat-label{
  color: var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.stat-badge{
  font-size:10.5px; padding:3px 9px; border-radius: var(--radius-pill);
  background: var(--blue-soft);
  color: var(--blue-dark);
  border:1px solid rgba(45,91,255,0.15);
  letter-spacing:0.04em; font-weight:600;
}
.stat-value{
  font-family:'Space Grotesk', sans-serif;
  font-size:32px; font-weight:700; letter-spacing:-0.035em;
  margin-top:12px; line-height:1.08;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-xl{
  background:
    radial-gradient(circle at 110% -30%, rgba(255,196,161,0.35), transparent 55%),
    radial-gradient(circle at -20% 120%, rgba(45,91,255,0.10), transparent 55%),
    var(--paper);
}
.stat-xl .stat-value{
  font-size:54px;
  background: linear-gradient(100deg, var(--grad-1) 0%, var(--grad-2) 45%, var(--grad-4) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-sub{ margin-top:10px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.stat-sub-main{ font-weight:600; color: var(--ink); font-size:14px; }
.stat-sub-hint{ color: var(--muted); font-size:12px; }
#cvxChange.good{ color: var(--good) }
#cvxChange.bad{ color: var(--bad) }

/* ------------ panels ------------ */
.panel{
  padding: 26px 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  margin-top: 22px;
}
.panel-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:18px; gap:12px; flex-wrap:wrap;
}
.panel-head h2{ margin-bottom:4px }

.segmented{
  display:inline-flex; padding:3px;
  background: var(--cream-2);
  border:1px solid var(--border);
  border-radius: var(--radius-pill);
}
.seg{
  appearance:none; border:0; background:transparent;
  padding:7px 14px; border-radius: var(--radius-pill);
  color: var(--muted); font-size:11.5px; font-weight:600; letter-spacing:0.08em;
  cursor:pointer; transition: all .18s ease;
}
.seg:hover{ color: var(--ink) }
.seg.on{
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(45,91,255,0.25);
}

/* ------------ chart ------------ */
.chartwrap{
  position:relative;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 70% 0%, var(--peach-soft), transparent 55%),
    radial-gradient(ellipse at 20% 100%, var(--blue-soft), transparent 55%),
    var(--cream-3);
  border: 1px solid var(--border);
  padding: 14px;
  min-height: 320px;
}
#polChart{ width:100%; height:300px; display:block }

/* ------------ buy list ------------ */
.buy-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:24px; margin-bottom:12px; flex-wrap:wrap; gap:8px;
}
.buylist{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.buylist li{
  display:grid;
  grid-template-columns: 120px 1fr auto;
  gap:16px; align-items:center;
  padding: 16px 18px;
  background: var(--cream-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all .2s ease;
}
.buylist li:hover{
  background: var(--paper);
  border-color: rgba(45,91,255,0.2);
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}
.buylist .date{
  color: var(--muted);
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-variant-numeric: tabular-nums;
}
.buylist .title{ font-size:13.5px; color: var(--ink-dim) }
.buylist .amt{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:15px;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

/* ------------ list panels ------------ */
.list{
  list-style:none; padding:0; margin:8px 0 0;
  display:flex; flex-direction:column; gap:6px;
  max-height: 380px; overflow:auto;
}
.list li{
  padding:12px 14px;
  background: var(--cream-3);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:13px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  transition: all .2s ease;
}
.list li:hover{
  background: var(--paper);
  border-color: rgba(45,91,255,0.2);
}
.list li.muted{ color: var(--muted); border-style:dashed; background: transparent }
.list li .dir{
  font-size:10.5px; padding:3px 9px; border-radius: var(--radius-pill);
  font-weight:700; letter-spacing:0.06em;
}
.list li .dir.in{ background: rgba(14,158,86,0.12); color: var(--good); }
.list li .dir.out{ background: rgba(209,61,77,0.12); color: var(--bad); }
.list li .sym{ font-weight:600; color: var(--ink) }
.list li .tstamp{ color: var(--muted); font-family:'JetBrains Mono', monospace; font-size:11.5px; }
.list li .spacer{ flex:1 }

/* ------------ notes ------------ */
.notes ul{ margin:8px 0 0 18px; padding:0; color: var(--ink-dim); }
.notes li{ margin:5px 0 }

/* ------------ footer ------------ */
.foot{
  padding:28px 0 48px;
  margin-top:40px;
  border-top:1px solid var(--border);
  background: color-mix(in srgb, var(--paper) 40%, transparent);
}

/* ------------ responsive ------------ */
@media (max-width: 960px){
  .hero-stats{ grid-template-columns: 1fr 1fr }
  .stat-xl{ grid-column: span 2 }
  .grid.two{ grid-template-columns: 1fr }
  .hero{ padding: 52px 0 32px }
  .stat-xl .stat-value{ font-size:44px }
  .topbar{ padding: 0 16px }
  h1{ font-size: clamp(30px, 7vw, 48px) }
}
@media (max-width: 680px){
  .announce{ font-size:11px; padding: 8px 10px }
  .announce .sep{ margin: 0 6px }
  .hero{ padding: 36px 0 20px }
  .hero-head{ margin-bottom: 28px }
  .lede{ font-size: 15.5px; padding: 0 4px }
  .hero-stats{ grid-template-columns: 1fr; gap: 10px }
  .stat-xl{ grid-column: auto }
  .stat{ padding: 18px 18px 16px }
  .stat-value{ font-size: 26px }
  .stat-xl .stat-value{ font-size: 42px }
  .panel{ padding: 18px 16px 14px; border-radius: 18px }
  .panel-head{ margin-bottom: 12px }
  .panel-head h2{ font-size: 16px }
  .buylist li{
    grid-template-columns: 1fr auto;
    grid-template-areas: "date amt" "title title";
    gap:4px 8px; padding: 12px 14px;
  }
  .buylist .date{ grid-area: date }
  .buylist .amt{ grid-area: amt; justify-self: end }
  .buylist .title{ grid-area: title; font-size: 12.5px; color: var(--muted) }
  .chartwrap{ padding: 8px; min-height: 240px }
  #polChart{ height: 240px }
  .list li{ padding: 10px 12px; font-size: 12.5px }
  .list li .dir{ font-size: 9.5px; padding: 2px 7px }
  .wrap{ padding: 0 14px }
  .nav .liveChip{ display:none }
  .brand-sub{ display:none }
  .brand-title{ font-size: 14px }
  .topbar{ top:8px; margin-top:8px; padding: 0 12px }
  .topbar-inner{ padding: 7px 7px 7px 12px; gap: 8px }
  .logo{ width: 30px; height: 30px }
  .addrChip{ padding: 6px 10px; font-size: 11.5px }
  .themeBtn{ width: 32px; height: 32px }
  .themeBtn svg{ width: 14px; height: 14px }
  .foot{ padding: 24px 0 36px }
  .foot .wrap{ flex-direction: column; text-align: center; gap: 8px }
}
@media (max-width: 380px){
  .pill{ font-size: 11px; padding: 6px 12px 6px 10px }
  .pill::before{ width: 12px; height: 12px }
  .stat-xl .stat-value{ font-size: 36px }
  h1{ font-size: 26px }
}

/* subtle scrollbar */
.list::-webkit-scrollbar{ width:8px }
.list::-webkit-scrollbar-track{ background:transparent }
.list::-webkit-scrollbar-thumb{ background: rgba(45,91,255,0.18); border-radius: var(--radius-pill) }