/* =====================================================================
   WOZA — design system (Kuest prediction-market UI, Woza brand)
   ---------------------------------------------------------------------
   Tokens mirror kuestcom/prediction-market globals.css (shadcn/Tailwind
   naming), with Woza blue (#174FC8, from the logo) as --primary.
   Dark is the default (like tabiri.online); add class="light" to <html>
   for the light theme. Font: Onest (self-hosted variable, as on bayse.markets).
   ===================================================================== */
/* Onest — one variable file, weights 100-900 (SIL OFL, self-hosted).
   Same face bayse.markets runs on; their display face, Pitanga, is commercial
   so it is deliberately not shipped here. */
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/onest-latin-variable.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


:root{
  --radius:12px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px;
  --font:'Onest',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  /* dark (default) */
  --background:#0f1014; --foreground:#f4f4f6;
  --card:#16181e; --card-foreground:#f4f4f6; --popover:#16181e; --popover-foreground:#f4f4f6;
  --secondary:#1d2028; --secondary-foreground:#f4f4f6;
  --muted:#23262f; --muted-foreground:#8b90a0;
  --accent:#23262f; --accent-foreground:#f4f4f6;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14); --input:#1c1f27; --ring:#2f63ea;
  --primary:#2b5ee8; --primary-foreground:#ffffff; --primary-soft:rgba(43,94,232,.14); --primary-text:#7ea2ff;
  --brand-accent:#7c5cff; --brand-accent-foreground:#fff;
  --yes:#19c37d; --yes-foreground:#22d48b; --yes-soft:rgba(25,195,125,.15);
  --no:#f0455a; --no-foreground:#ff5b6e; --no-soft:rgba(240,69,90,.15);
  --destructive:#ef4444; --amber:#f5b400; --sky:#38bdf8; --pink:#ec4899;
  --chart-1:#2b5ee8; --chart-2:#7c5cff; --chart-3:#19c37d; --chart-4:#f5b400; --chart-5:#f0455a;
  --shadow-card:0 1px 2px rgba(0,0,0,.3);
  --header-h:60px; --nav-h:44px;
}
:root.light{
  --background:#ffffff; --foreground:#0f172a;
  --card:#ffffff; --card-foreground:#0f172a; --popover:#ffffff; --popover-foreground:#0f172a;
  --secondary:#f1f5f9; --secondary-foreground:#1e293b;
  --muted:#f1f5f9; --muted-foreground:#64748b;
  --accent:#f1f5f9; --accent-foreground:#1e293b;
  --border:#e2e8f0; --border-strong:#cbd5e1; --input:#f1f5f9; --ring:#7ba0ff;
  --primary:#174FC8; --primary-foreground:#ffffff; --primary-soft:rgba(23,79,200,.10); --primary-text:#174FC8;
  --yes:#10a86b; --yes-foreground:#0f9d63; --yes-soft:rgba(16,168,107,.12);
  --no:#e0334a; --no-foreground:#d92b42; --no-soft:rgba(224,51,74,.12);
  --shadow-card:0 1px 2px rgba(15,23,42,.06);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;overflow-x:hidden}   /* on html, not body: body would become its own scroll container */
:root.light{color-scheme:light}
html,body{min-height:100%}
body{font:400 14px/1.5 var(--font);color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;text-rendering:optimizeLegibility}
*{scrollbar-width:none}*::-webkit-scrollbar{display:none;width:0;height:0}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;outline:none}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
button:disabled{cursor:not-allowed;opacity:.5}
input,select,textarea{font:inherit;color:inherit;outline:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
svg{width:1em;height:1em;flex-shrink:0}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}
.container{width:100%;max-width:1332px;margin:0 auto;padding:0 16px}
.container-sm{width:100%;max-width:1024px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted-foreground)}
:root{--muted-foreground:#9aa0b0}
:root.light{--muted-foreground:#5b6577}
.mono,.tabular{font-variant-numeric:tabular-nums}
.yes-text{color:var(--yes-foreground)}.no-text{color:var(--no-foreground)}.primary-text{color:var(--primary-text)}
a.primary-text{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--primary-text) 45%,transparent);text-underline-offset:2px}a.primary-text:hover{text-decoration-color:currentColor}
.up{color:var(--yes-foreground)}.down{color:var(--no-foreground)}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.row{display:flex;align-items:center;gap:8px}
.between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stack{display:flex;flex-direction:column;gap:8px}
.grow{flex:1;min-width:0}

/* ---------- buttons (Kuest buttonVariants) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;border:1px solid transparent;flex-shrink:0}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 90%,#000)}
.btn-secondary{background:var(--secondary);color:var(--secondary-foreground)}
.btn-secondary:hover:not(:disabled){background:var(--accent)}
.btn-outline{border-color:var(--border-strong);background:transparent}
.btn-outline:hover:not(:disabled){background:var(--accent)}
.btn-ghost{background:transparent}
.btn-ghost:hover:not(:disabled){background:var(--accent)}
.btn-link{background:transparent;padding:0 8px}
.btn-link:hover:not(:disabled){text-decoration:underline}
.btn-yes{background:var(--yes-soft);color:var(--yes-foreground);font-weight:600}
.btn-yes:hover:not(:disabled){background:var(--yes);color:#fff}
.btn-no{background:var(--no-soft);color:var(--no-foreground);font-weight:600}
.btn-no:hover:not(:disabled){background:var(--no);color:#fff}
.btn-yes.solid{background:var(--yes);color:#fff}.btn-no.solid{background:var(--no);color:#fff}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn-xs{height:28px;padding:0 10px;font-size:12px;border-radius:6px}
.btn-lg{height:40px;padding:0 24px}
.btn-outcome{height:40px;flex:1;min-width:0;padding:0 12px}
.btn-outcome-lg{height:48px;flex:1;min-width:0;padding:0 12px;font-size:15px}
.btn-icon{width:36px;padding:0}
.btn-icon.sm{width:32px;height:32px}
.btn-block{width:100%}
.btn-header{height:36px;padding:0 16px;font-weight:500}
.btn-pill{border-radius:999px}
.btn-destructive{background:var(--no-soft);color:var(--no-foreground)}
.btn-destructive:hover:not(:disabled){background:var(--no);color:#fff}
.btn-3d{position:relative;height:48px;font-size:16px;font-weight:700;border-radius:var(--radius-md);background:var(--primary);color:var(--primary-foreground);box-shadow:0 5px 0 color-mix(in srgb,var(--primary) 75%,#000);transition:transform .12s,box-shadow .12s}
.btn-3d:hover:not(:disabled){transform:translateY(1px);box-shadow:0 4px 0 color-mix(in srgb,var(--primary) 75%,#000)}
.btn-3d:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--primary) 75%,#000)}
.btn-3d.yes{background:var(--yes);box-shadow:0 5px 0 color-mix(in srgb,var(--yes) 70%,#000)}
.btn-3d.no{background:var(--no);box-shadow:0 5px 0 color-mix(in srgb,var(--no) 70%,#000)}

/* ---------- inputs ---------- */
.input,.textarea,.select{width:100%;height:40px;padding:0 12px;border-radius:var(--radius-sm);background:var(--input);border:1px solid var(--border);color:var(--foreground);font-size:14px;transition:border-color .15s,box-shadow .15s}
.textarea{height:auto;min-height:80px;padding:10px 12px;resize:vertical;line-height:1.5}
.input:focus,.textarea:focus,.select:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 30%,transparent)}
.input::placeholder,.textarea::placeholder{color:var(--muted-foreground)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b90a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
.select option{color:#0f172a}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:500;color:var(--foreground)}
.field .hint{font-size:12px;color:var(--muted-foreground)}
.field .err{font-size:12px;color:var(--no-foreground)}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-foreground);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--primary)}
.switch{position:relative;width:36px;height:20px;border-radius:999px;background:var(--muted);transition:background .15s;flex-shrink:0;cursor:pointer;border:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.switch.on{background:var(--primary)}.switch.on::after{transform:translateX(16px)}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:5px;background:var(--muted);color:var(--muted-foreground);font-size:11px;font-weight:600;border:1px solid var(--border)}
.range{width:100%;accent-color:var(--primary)}
.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-sm);background:var(--secondary);border:1px solid var(--border)}
.segmented button{height:32px;padding:0 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted-foreground)}
.segmented button:hover{color:var(--foreground)}
.segmented button.active{background:var(--background);color:var(--foreground);font-weight:600;box-shadow:var(--shadow-card)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted-foreground);background:var(--secondary);border:1px solid var(--border);transition:all .15s;white-space:nowrap}
.pill:hover{color:var(--foreground);border-color:var(--border-strong)}
.pill.active{background:var(--primary-soft);color:var(--primary-text);border-color:color-mix(in srgb,var(--primary) 45%,transparent);font-weight:600}
.pill.solid.active{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;background:var(--secondary);color:var(--muted-foreground)}
.tag.yes{background:var(--yes-soft);color:var(--yes-foreground)}.tag.no{background:var(--no-soft);color:var(--no-foreground)}.tag.primary{background:var(--primary-soft);color:var(--primary-text)}.tag.amber{background:rgba(245,180,0,.14);color:var(--amber)}
.badge-new{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:700;letter-spacing:.02em}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#ef4444;text-transform:uppercase}
.live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:ping 1.6s infinite}
.live-dot.green{color:var(--yes-foreground);text-transform:none;font-weight:500}.live-dot.green::before{background:var(--yes);box-shadow:0 0 0 0 rgba(25,195,125,.6)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 6px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.avatar{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;background:linear-gradient(135deg,#2b5ee8,#7c5cff)}
.avatar.lg{width:48px;height:48px;font-size:18px}.avatar.xl{width:72px;height:72px;font-size:28px}.avatar.sm{width:24px;height:24px;font-size:11px}
.skeleton{background:var(--muted);border-radius:var(--radius-sm);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.icon-sq{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-size:20px;font-weight:700}
.icon-sq.lg{width:64px;height:64px;border-radius:var(--radius-md);font-size:28px}
.icon-sq svg{width:22px;height:22px}
.icon-sq.lg svg{width:32px;height:32px}
.c-politics{background:linear-gradient(135deg,#3b5bdb,#1d2c6b)}.c-crypto{background:linear-gradient(135deg,#f7931a,#8a4b00)}.c-sports{background:linear-gradient(135deg,#19c37d,#0b5a3a)}.c-cricket{background:linear-gradient(135deg,#22c55e,#14532d)}.c-esports{background:linear-gradient(135deg,#a855f7,#4c1d95)}.c-macro{background:linear-gradient(135deg,#0ea5e9,#0c4a6e)}.c-tech{background:linear-gradient(135deg,#6366f1,#312e81)}.c-music{background:linear-gradient(135deg,#ec4899,#831843)}.c-movies{background:linear-gradient(135deg,#f97316,#7c2d12)}.c-news{background:linear-gradient(135deg,#64748b,#1e293b)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--background)}
.site-header .hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--header-h);padding-top:12px;padding-bottom:4px}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo img{height:26px;width:auto}
.logo .mark{display:none;width:32px;height:32px;border-radius:8px}
.search{position:relative;flex:1;max-width:600px;min-width:0}
.search input{width:100%;height:40px;padding:0 40px 0 40px;border-radius:var(--radius-sm);background:var(--input);border:1px solid transparent;color:var(--foreground);font-size:14px}
.search input:focus{border-color:var(--ring)}
.search input::placeholder{color:var(--muted-foreground)}
.search>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted-foreground)}
.search .kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.hdr-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hdr-divider{width:1px;height:20px;background:var(--border-strong);margin:0 2px}
.hdr-user{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 4px;border-radius:999px;cursor:pointer}
.hdr-user:hover{background:var(--accent)}
.hdr-bell{position:relative}
.hdr-bell .dot{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--no);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.nav-tabs{display:flex;align-items:center;gap:4px;height:var(--nav-h);overflow-x:auto;white-space:nowrap;font-size:14px;font-weight:500;mask-image:linear-gradient(90deg,#000 96%,transparent)}
.nav-tab{display:inline-flex;align-items:center;gap:8px;height:100%;padding:4px 10px;border-radius:6px;color:color-mix(in srgb,var(--foreground) 65%,transparent)}
.nav-tab:hover{color:var(--foreground)}
.nav-tab.active{color:var(--foreground);font-weight:600}
.nav-tab svg{width:16px;height:16px}
.nav-sep{width:1px;height:22px;background:var(--border-strong);margin:0 8px}
.site-header .nav-wrap{border-bottom:1px solid var(--border)}

/* ---------- home ---------- */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0 28px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 18px 14px}
.stat-card .v{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.stat-card .k{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-foreground)}
.page-h1{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:18px 0 16px}
.page-h2{font-size:22px;font-weight:600;letter-spacing:-.02em}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 12px}
.section-head .tools{display:flex;gap:4px}
.section-head .tools button{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--muted-foreground)}
.section-head .tools button:hover,.section-head .tools button.on{background:var(--accent);color:var(--foreground)}
.section-head .tools svg{width:18px;height:18px}
.chips-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;margin-bottom:10px;mask-image:linear-gradient(90deg,#000 97%,transparent)}
.sort-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px;font-size:13px;white-space:nowrap}
.sort-row .sorts{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}.sort-row .sorts::-webkit-scrollbar{display:none}
.sort-row .sorts button{height:30px;padding:0 12px;border-radius:999px;color:var(--muted-foreground);font-weight:500}
.sort-row .sorts button:hover{color:var(--foreground)}
.sort-row .sorts button.active{background:var(--secondary);color:var(--foreground);font-weight:600}
.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);display:flex;flex-direction:column;padding:16px;min-height:170px;transition:border-color .15s}
.card:hover{border-color:var(--border-strong)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px}
.card-head a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding-right:4px}
.card-head h2,.card-head h3{font-size:14px;line-height:20px;font-weight:600}
.card-head h2:hover,.card-head h3:hover{text-decoration:underline;text-underline-offset:2px}
.card-head .icon-sq{align-self:flex-start}
.gauge{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:-10px;flex-shrink:0}
.gauge svg{width:72px;height:52px;overflow:visible}
.gauge .track{stroke:var(--muted)}
.gauge .val{position:absolute;top:22px;left:0;right:0;text-align:center;font-size:16px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.gauge .lbl{position:absolute;top:40px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted-foreground)}
.outcome-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;margin-bottom:8px}
.card-markets{max-height:72px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.card-market{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.card-market .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-market .p{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.card-market .yn{display:flex;gap:4px}
.card-market .yn .btn{height:28px;padding:0 8px;font-size:12px;width:40px}
.card-market .yn .btn-no{width:44px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted-foreground);margin-top:auto}
.card-foot .l{display:flex;align-items:center;gap:8px}
.card-foot .bm{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--muted-foreground)}
.card-foot .bm:hover{color:var(--foreground);background:var(--accent)}
.card-foot .bm.on{color:var(--primary)}
.card-foot .bm svg{width:16px;height:16px}
.resolved-pill{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:var(--radius-sm);background:var(--secondary);font-weight:600;font-size:14px;margin-top:auto}
.resolved-pill .chk{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--yes)}
.resolved-pill .chk.no{background:var(--no)}
.resolved-pill .chk svg{width:10px;height:10px;color:var(--background)}
.empty{padding:60px 20px;text-align:center;color:var(--muted-foreground);border:1px dashed var(--border-strong);border-radius:var(--radius-lg)}
.empty h3{color:var(--foreground);font-size:16px;margin-bottom:6px}

/* featured carousel */
.featured{display:grid;grid-template-columns:1fr 360px;gap:32px;margin-top:16px}
.feat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:20px 20px 16px;min-height:300px;display:flex;flex-direction:column}
.feat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.feat-top .l{display:flex;gap:12px;align-items:flex-start;min-width:0}
.feat-crumb{font-size:13px;color:var(--muted-foreground);margin-bottom:2px}
.feat-title{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3;cursor:pointer}
.feat-title:hover{text-decoration:underline;text-underline-offset:3px}
.feat-body{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;flex:1;align-items:start}
.feat-rows .r{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:15px;font-weight:500}
.feat-rows .r:last-child{border-bottom:none}
.feat-rows .r b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.feat-rows .r.yn{gap:8px}
.feat-rows .r.yn .btn{flex:1}
.feat-chart{position:relative}
.feat-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;margin-bottom:8px}
.feat-legend span{display:inline-flex;align-items:center;gap:6px;color:var(--muted-foreground)}
.feat-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.feat-legend b{color:var(--foreground);font-variant-numeric:tabular-nums}
.feat-chart svg{width:100%;height:200px}
.feat-foot{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted-foreground);margin-top:12px}
.feat-foot .brand{display:flex;align-items:center;gap:6px;font-weight:600}
.feat-foot .brand img{height:14px;opacity:.7}
.feat-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.feat-dots{display:flex;gap:6px;align-items:center}
.feat-dot{width:8px;height:8px;border-radius:999px;background:var(--muted);transition:all .3s}
.feat-dot.active{width:44px;background:var(--primary)}
.feat-arrows{display:flex;gap:8px}
.feat-arrow{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-sm);background:var(--secondary);font-size:13px;color:var(--muted-foreground);max-width:210px}
.feat-arrow:hover{color:var(--foreground)}
.feat-arrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feat-side{display:flex;flex-direction:column;gap:16px}
.side-card{border-radius:var(--radius-xl);padding:24px;color:#fff;background:linear-gradient(135deg,#174FC8,#3b6fe8 55%,#7c5cff);min-height:230px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden}
.side-card .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-bottom:10px}
.side-card h3{font-size:34px;line-height:1;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.side-card p{font-size:12px;opacity:.85;margin-top:10px;letter-spacing:.06em}
.side-card img{height:34px;width:auto;margin-bottom:10px}
.hot{border-radius:var(--radius-lg)}
.hot-h{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;margin-bottom:6px}
.hot-h svg{width:18px;height:18px;color:#ef4444}
.hot-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:8px;cursor:pointer;font-size:14px}
.hot-row:hover{background:var(--accent)}
.hot-row .rk{width:14px;font-size:12px;color:var(--muted-foreground)}
.hot-row .nm{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-row .vv{font-size:12px;color:var(--muted-foreground)}
.hot-row svg{width:16px;height:16px;color:var(--muted-foreground)}
.expand-btn{width:100%;height:44px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);font-weight:500;margin-top:auto}
.expand-btn:hover{background:var(--accent)}

/* ---------- event page ---------- */
.event-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;margin-top:16px}
.event-main{min-width:0}
.event-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:20px}
.event-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.event-head .l{display:flex;gap:14px;min-width:0}
.event-head .crumb{font-size:13px;color:var(--muted-foreground);margin-bottom:4px}
.event-head h1{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.event-head .actions{display:flex;gap:2px;flex-shrink:0}
.event-head .actions button{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--muted-foreground)}
.event-head .actions button:hover,.event-head .actions button.on{color:var(--foreground);background:var(--accent)}
.event-head .actions button.on svg{fill:currentColor}
.event-head .actions svg{width:18px;height:18px}
.event-pills{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chance-line{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px}
.chance-line .big{font-size:24px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.chance-line .chg{font-size:13px;font-weight:600}
.chance-line .wm{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted-foreground);opacity:.5;font-size:16px;font-weight:600}
.chance-line .wm img{height:16px}
.chart-box{position:relative;width:100%;margin-bottom:2px}
.chart-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 18px;font-size:13px;color:var(--muted-foreground)}
.chart-meta .l{display:flex;align-items:center;gap:10px;white-space:nowrap}
.chart-meta .l b{color:var(--foreground);font-weight:600}
.chart-meta .sep{width:1px;height:16px;background:var(--border-strong)}
.chart-meta .ranges{display:flex;gap:2px;flex-shrink:0}
@media(max-width:640px){.chart-meta{flex-wrap:wrap;gap:6px 10px}.chart-meta .ranges{margin-left:auto}}
.chart-meta .ranges button{height:28px;padding:0 8px;border-radius:6px;font-size:13px;font-weight:600;color:var(--muted-foreground)}
.chart-meta .ranges button.active{color:var(--foreground)}
.chart-meta .ranges button:hover{color:var(--foreground)}
.market-rows{border-top:1px solid var(--border);margin-bottom:24px}
.market-row{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:16px;padding:16px 12px;border-bottom:1px solid var(--border);cursor:pointer;background:none}
/* The highlight is its own inset layer, so it reads as a selected row rather
   than a band welded to the dividers above and below it. */
.market-row::before{content:"";position:absolute;inset:5px 0;border-radius:12px;z-index:-1;
  background:transparent;transition:background .15s,box-shadow .15s}
.market-row:hover::before{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.market-row.sel::before{background:color-mix(in srgb,var(--primary-soft) 52%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 38%,transparent)}
.market-row .t{font-weight:600;font-size:15px}
.market-row .s{font-size:12px;color:var(--muted-foreground)}
.market-row .pct{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.market-row .pct small{font-size:12px;font-weight:600}
.market-row .yn{display:flex;gap:6px}
.market-row .yn .btn{width:136px;height:48px;font-size:14px}
.panel{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);margin-bottom:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;cursor:pointer}
.panel-head h2,.panel-head h3{font-size:16px;font-weight:500;display:flex;align-items:center;gap:10px}
.panel-head .chev{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--muted-foreground);transition:transform .25s}
.panel-head .chev svg{width:22px;height:22px}
.panel.open .panel-head .chev{transform:rotate(180deg)}
.panel-body{display:none;padding:0 20px 20px;border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);font-size:14px;line-height:1.6;color:var(--foreground)}
.panel.open .panel-body{display:block;padding-top:16px}
.panel-body p{margin-bottom:10px}
.info-box{border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;display:flex;gap:12px;align-items:flex-start;margin-top:10px}
.info-box .k{font-size:12px;color:var(--muted-foreground)}
.info-box .v{font-weight:500}
.info-box .ic{width:40px;height:40px;border-radius:50%;background:var(--muted);display:flex;align-items:center;justify-content:center;color:var(--muted-foreground);flex-shrink:0}
.tabs-underline{display:flex;gap:20px;border-bottom:1px solid var(--border);margin:24px 0 14px;font-size:14px;font-weight:500}
.tabs-underline button{position:relative;padding:8px 0 12px;color:var(--muted-foreground)}
.tabs-underline button:hover{color:var(--foreground)}
.tabs-underline button.active{color:var(--foreground);font-weight:600}
.tabs-underline button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);border-radius:2px}
.tabs-underline .spacer{flex:1}
.comment-box{position:relative;margin-bottom:12px}
.comment-box .input{height:44px;padding-right:130px}
.comment-box .post{position:absolute;right:8px;top:6px}
.comment{display:flex;gap:12px;padding:14px 0}
.comment .body{flex:1;min-width:0}
.comment .who{display:flex;align-items:center;gap:8px;font-size:13px}
.comment .who b{font-weight:600}
.comment .who .t{color:var(--muted-foreground);font-size:12px}
.comment .txt{margin:6px 0;font-size:14px;line-height:1.5}
.comment .acts{display:flex;gap:16px;font-size:13px;color:var(--muted-foreground)}
.comment .acts button{display:inline-flex;align-items:center;gap:4px;color:inherit}
.comment .acts button:hover,.comment .acts button.on{color:var(--foreground)}
.comment .acts svg{width:15px;height:15px}
.comment.reply{margin-left:44px}
.faq{margin-top:34px}
.faq h3{font-size:16px;font-weight:600;margin-bottom:6px}
.faq details{border-bottom:1px solid var(--border);padding:16px 0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:14px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted-foreground);border-bottom:2px solid var(--muted-foreground);transform:rotate(45deg);transition:transform .2s;margin-right:6px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin-top:10px;font-size:14px;color:var(--muted-foreground);line-height:1.6}
.related h4{font-size:14px;font-weight:600;margin-bottom:10px}
.related .rel{display:flex;align-items:center;gap:12px;padding:10px 0;cursor:pointer}
.related .rel:hover .t{text-decoration:underline}
.related .rel .t{flex:1;font-size:14px;font-weight:500;line-height:1.35}
.related .rel .p{text-align:right;font-weight:600;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.related .rel .p small{display:block;font-size:12px;color:var(--muted-foreground);font-weight:500;margin-top:2px}
.dashed{border-top:1px dashed var(--border-strong)}

/* order panel */
.order-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-card)}
.op-market{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.op-market .t{font-size:16px;font-weight:600}
.op-types{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--border);margin:0 -16px;padding:0 16px}
.op-types button{position:relative;padding:10px 8px;font-size:14px;font-weight:600;color:var(--muted-foreground)}
.op-types button.active{color:var(--primary)}
.op-types button.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--primary)}
.op-types .r{margin-left:auto;color:var(--muted-foreground)}
.op-side{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border);margin:0 -16px 16px;padding:0 16px}
.op-side button{position:relative;padding:10px 0;font-size:14px;font-weight:600;color:var(--muted-foreground)}
.op-side button.active{color:var(--foreground)}
.op-side button.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--foreground)}
.op-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.op-outcomes .btn{height:48px;font-size:15px;font-weight:600;gap:4px;border-radius:var(--radius-sm)}
.op-outcomes .btn b{font-size:16px}
.op-outcomes .btn.sel{color:#fff}
.op-outcomes .btn-yes.sel{background:var(--yes)}.op-outcomes .btn-no.sel{background:var(--no)}
.op-outcomes .btn:not(.sel){background:var(--secondary);color:var(--foreground)}
.op-outcomes .btn-yes:not(.sel):hover{background:var(--yes-soft);color:var(--yes-foreground)}
.op-outcomes .btn-no:not(.sel):hover{background:var(--no-soft);color:var(--no-foreground)}
.op-amount{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.op-amount .k{font-size:18px;font-weight:600;line-height:1.1}
.op-amount .bal{font-size:12px;color:var(--muted-foreground);margin-top:4px}
.op-amount .in{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--muted-foreground);min-width:0}
.op-amount .in.has{color:var(--foreground)}
.op-amount input{width:150px;text-align:right;background:none;border:none;font:inherit;color:inherit;font-variant-numeric:tabular-nums;min-width:0}
.op-amount input::placeholder{color:var(--muted-foreground)}
.op-chips{display:flex;gap:6px;justify-content:flex-end;margin-bottom:16px}
.op-chips button{height:30px;padding:0 10px;border-radius:999px;background:var(--secondary);font-size:13px;font-weight:600;border:1px solid var(--border)}
.op-chips button:hover{background:var(--accent)}
.op-earn{border-top:1px solid var(--border);padding-top:12px;margin-bottom:14px}
.op-earn .r{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted-foreground);padding:3px 0}
.op-earn .r b{color:var(--foreground);font-weight:600;font-variant-numeric:tabular-nums}
.op-earn .r.big{font-size:14px}
.op-earn .r.big b{font-size:22px;color:var(--yes-foreground)}
.op-earn .r.big.sell b{color:var(--foreground)}
.op-note{font-size:12px;color:var(--muted-foreground);text-align:center;margin-top:12px}
.op-note a{text-decoration:underline;cursor:pointer}
.op-limit{margin-bottom:12px}
.op-limit .r{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13px}
.op-limit .stepper{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.op-limit .stepper button{width:34px;height:34px;background:var(--secondary)}
.op-limit .stepper input{width:70px;height:34px;text-align:center;background:var(--input);border:none;font-weight:600}
.op-position{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;font-size:13px}
.op-position .r{display:flex;justify-content:space-between;padding:4px 0}
.op-position b{font-weight:600}
.op-orders{margin-top:10px;font-size:13px}
.op-orders .o{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--border)}
.op-orders .o .c{margin-left:auto;color:var(--no-foreground);font-weight:600;cursor:pointer}
.mobile-trade-bar{display:none}

/* ---------- activity / lists ---------- */
.act-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.act-row .icon-sq{width:48px;height:48px;border-radius:var(--radius-sm)}
.act-row .m{flex:1;min-width:0}
.act-row .q{font-size:14px;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-row .q:hover{color:var(--foreground)}
.act-row .d{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:4px}
.act-row .d b{font-weight:600}
.act-row .t{font-size:13px;color:var(--muted-foreground);display:flex;align-items:center;gap:6px;flex-shrink:0}
.act-row .t svg{width:14px;height:14px}
.filters-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.filters-bar .r{display:flex;gap:8px}
.dd-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--radius-sm);background:var(--secondary);border:1px solid var(--border);font-size:14px;font-weight:600}
.dd-btn svg{width:14px;height:14px;color:var(--muted-foreground)}
.dd-btn:hover{background:var(--accent)}

/* leaderboard */
.lb-layout{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start}
.lb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 8px}
.lb-head{display:grid;grid-template-columns:1fr 130px 110px;gap:12px;padding:14px 0 12px;border-bottom:1px solid var(--border);font-size:14px;color:var(--muted-foreground)}
.lb-head .srch{display:flex;align-items:center;gap:8px}
.lb-head .srch svg{width:16px;height:16px}
.lb-head .srch input{background:none;border:none;color:var(--foreground);width:100%}
.lb-head .col{text-align:right;font-weight:500;cursor:pointer}
.lb-head .col.active{color:var(--foreground);font-weight:600;border-right:1px solid var(--border-strong);padding-right:12px}
.lb-row{display:grid;grid-template-columns:28px 44px 1fr 130px 110px;gap:12px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border);font-size:14px}
.lb-row .rk{color:var(--muted-foreground);font-size:13px}
.lb-row .nm{font-weight:600;cursor:pointer}
.lb-row .nm:hover{text-decoration:underline}
.lb-row .pl{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.lb-row .vol{text-align:right;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.lb-row.you{background:var(--primary-soft);margin:0 -12px;padding:18px 12px;border-radius:var(--radius-sm)}
.medal{position:relative}
.medal::after{content:attr(data-medal);position:absolute;left:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;background:var(--amber);color:#111;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--background)}
.medal.s::after{background:#c0c4cf}.medal.b::after{background:#d68a4e}
.wins-card{border:1px solid var(--border);border-radius:var(--radius-xl);padding:20px;background:var(--card)}
.wins-card h3{font-size:18px;font-weight:600;margin-bottom:8px}
.win-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px}
.win-row:last-child{border-bottom:none}
.win-row .rk{width:12px;color:var(--muted-foreground);font-size:12px}
.win-row .m{flex:1;min-width:0}
.win-row .who{display:flex;gap:6px;align-items:center}
.win-row .who b{font-weight:600}
.win-row .who span{color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-row .amt{margin-top:2px;color:var(--muted-foreground)}
.win-row .amt b{color:var(--yes-foreground);font-weight:600}

/* ---------- portfolio / tables ---------- */
.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0 22px}
.sum-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px}
.sum-card .k{font-size:12px;color:var(--muted-foreground);margin-bottom:6px}
.sum-card .v{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sum-card .s{font-size:12px;color:var(--muted-foreground);margin-top:4px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12px;font-weight:500;color:var(--muted-foreground);padding:10px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:14px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.table td.r,.table th.r{text-align:right;font-variant-numeric:tabular-nums}
.table tr:hover td{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.table .mk{display:flex;align-items:center;gap:12px;min-width:0}
.table .mk .t{font-weight:600;line-height:1.3}
.table .mk .s{font-size:12px;color:var(--muted-foreground)}
.table-wrap{overflow-x:auto}
.wallet-actions{display:flex;gap:8px}
.value-card{display:grid;grid-template-columns:1fr 240px;gap:18px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:22px}
.value-card svg{width:100%;height:60px}

/* ---------- profile / settings ---------- */
.profile-head{display:flex;align-items:center;gap:20px;padding:8px 0 20px}
.profile-head h1{font-size:24px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-head .hd{font-size:14px;color:var(--muted-foreground);margin-top:2px}
.profile-head .acts{margin-left:auto;display:flex;gap:8px}
.mini-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.mini-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px}
.mini-stat .k{font-size:12px;color:var(--muted-foreground);margin-bottom:4px}
.mini-stat .v{font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.settings-layout{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start;margin-top:12px}
.side-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:120px}
.side-nav button{text-align:left;height:38px;padding:0 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--muted-foreground);display:flex;align-items:center;gap:10px}
.side-nav button:hover{color:var(--foreground);background:var(--accent)}
.side-nav button.active{background:var(--secondary);color:var(--foreground);font-weight:600}
.side-nav .sub{padding-left:28px;font-size:13px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted-foreground)}.kv b{font-weight:600;text-align:right}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ach{border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;background:var(--card)}
.ach.on{border-color:color-mix(in srgb,var(--primary) 40%,transparent);background:var(--primary-soft)}
.ach .t{font-weight:600;font-size:13px}.ach .d{font-size:12px;color:var(--muted-foreground);margin:4px 0 8px;min-height:32px}.ach .v{font-weight:700;color:var(--primary)}.ach .tier{font-size:11px;color:var(--amber);margin-top:4px;letter-spacing:.06em}
.quest{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.quest .ck{width:20px;height:20px;border-radius:6px;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.quest.done .ck{background:var(--yes);border-color:var(--yes)}
.quest .pts{margin-left:auto;font-weight:600;color:var(--yes-foreground)}
.prose{font-size:14px;line-height:1.7;color:var(--foreground)}
.prose h2{font-size:22px;margin:4px 0 12px}
.prose h4{font-size:15px;margin:18px 0 6px}
.prose p{margin-bottom:10px;color:color-mix(in srgb,var(--foreground) 85%,transparent)}
.prose ul{margin:0 0 12px 18px}.prose li{margin-bottom:4px}
.prose a{color:var(--primary-text)}
.prose code{font-family:var(--mono);font-size:12px;background:var(--secondary);padding:2px 6px;border-radius:5px}
.prose pre{font-family:var(--mono);font-size:12px;line-height:1.55;background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;overflow-x:auto;margin:8px 0 14px}
.bars{display:flex;gap:6px;align-items:flex-end;height:120px;padding:10px 0 22px}
.bars .b{flex:1;background:var(--primary);border-radius:4px 4px 2px 2px;min-height:3px;position:relative;opacity:.85}
.bars .b span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:9px;color:var(--muted-foreground)}

/* ---------- dialogs / dropdowns / toasts ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.show{opacity:1;pointer-events:auto}
.dialog{width:100%;max-width:440px;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--radius-xl);padding:24px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.5);transform:translateY(8px) scale(.98);transition:transform .2s;max-height:calc(100vh - 32px);overflow-y:auto}
.overlay.show .dialog{transform:none}
.dialog.wide{max-width:560px}
.dialog h3{font-size:18px;font-weight:600;margin-bottom:4px}
.dialog .sub{font-size:13px;color:var(--muted-foreground);margin-bottom:18px}
.dialog .x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted-foreground)}
.dialog .x:hover{background:var(--accent);color:var(--foreground)}
.dialog .x svg{width:16px;height:16px}
.dd{position:absolute;z-index:120;min-width:240px;background:var(--popover);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s,transform .15s}
.dd.show{opacity:1;transform:none;pointer-events:auto}
.dd .item{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 10px;border-radius:6px;font-size:14px;font-weight:600;text-align:left}
.dd .item:hover{background:var(--accent)}
.dd .item.muted{color:var(--muted-foreground);font-weight:600}
.dd .item svg{width:16px;height:16px}
.dd .item .right{margin-left:auto}
.dd .sep{height:1px;background:var(--border);margin:6px 4px}
.dd .item.danger{color:var(--no-foreground)}
.panel-float{position:fixed;top:64px;right:16px;z-index:120;width:380px;max-width:calc(100vw - 24px);background:var(--popover);border:1px solid var(--border-strong);border-radius:var(--radius-xl);padding:14px;box-shadow:0 16px 40px rgba(0,0,0,.45);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s,transform .15s}
.panel-float.show{opacity:1;transform:none;pointer-events:auto}
.wz-scroll{max-height:56vh;overflow-y:auto}
.wz-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--border);font-size:13px;width:100%;text-align:left}
.wz-row:first-of-type{border-top:none}
.wz-row>svg{width:18px;height:18px;color:var(--muted-foreground)}
.wz-row .main{flex:1;min-width:0}
.wz-row .t{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wz-row .s{font-size:12px;color:var(--muted-foreground);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-row .amt{font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.wz-row .amt.up{color:var(--yes-foreground)}.wz-row .amt.down{color:var(--no-foreground)}
a.wz-row:hover .t{color:var(--primary)}
.wz-n{cursor:pointer;border-radius:8px;padding:10px 6px}
.wz-n:hover{background:var(--accent)}
.wz-n .dotc{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.wz-n.unread .dotc{background:var(--primary)}
.wz-pill{display:inline-flex;height:20px;align-items:center;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;text-transform:capitalize}
.wz-pill.pending{background:rgba(245,180,0,.14);color:var(--amber)}.wz-pill.complete{background:var(--yes-soft);color:var(--yes-foreground)}.wz-pill.cancelled,.wz-pill.failed{background:var(--no-soft);color:var(--no-foreground)}
.wz-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.wz-tabs{display:flex;gap:2px;padding:3px;border-radius:var(--radius-sm);background:var(--secondary);margin-bottom:14px}
.wz-tabs button{flex:1;height:32px;border-radius:6px;font-size:13px;font-weight:500;color:var(--muted-foreground)}
.wz-tabs button.active{background:var(--background);color:var(--foreground);font-weight:600}
.wz-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.wz-chip{height:38px;border-radius:var(--radius-sm);background:var(--secondary);border:1px solid var(--border);font-weight:600;font-size:13px}
.wz-chip.active,.wz-chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.wz-note{font-size:12px;color:var(--muted-foreground);line-height:1.5;margin:10px 0 4px}
.wz-link{color:var(--primary-text);cursor:pointer;font-weight:600}
.wz-small{height:30px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;background:var(--secondary);border:1px solid var(--border);white-space:nowrap}
.wz-small:hover{background:var(--accent)}
.wz-small.bad{color:var(--no-foreground)}.wz-small.good{color:var(--yes-foreground)}.wz-small.amber{color:var(--amber)}
.wz-bubble{max-width:82%;padding:8px 12px;border-radius:12px 12px 12px 4px;background:var(--secondary);font-size:13px;margin:6px 0}
.wz-bubble.me{margin-left:auto;border-radius:12px 12px 4px 12px;background:var(--primary-soft)}
.wz-bubble span{display:block;font-size:10px;color:var(--muted-foreground);margin-top:3px}
.wz-email{display:flex;gap:6px}
.wz-email input{flex:1}
.prov-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--secondary);font-weight:600;font-size:14px;margin-bottom:8px}
.prov-btn:hover{background:var(--accent)}
.prov-btn img,.prov-btn svg{width:18px;height:18px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted-foreground);font-size:12px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.wallet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.wallet-grid button{height:64px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--muted-foreground)}
.wallet-grid button:hover{border-color:var(--primary);color:var(--foreground)}
.wallet-grid svg{width:20px;height:20px}
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:12px;min-width:280px;max-width:380px;padding:12px 14px;border-radius:var(--radius-md);background:var(--popover);border:1px solid var(--border-strong);box-shadow:0 12px 32px rgba(0,0,0,.4);transform:translateY(8px);opacity:0;transition:all .25s}
.toast.show{transform:none;opacity:1}
.toast .ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--yes-soft);color:var(--yes-foreground);flex-shrink:0}
.toast .ic.bad{background:var(--no-soft);color:var(--no-foreground)}
.toast .ic svg{width:14px;height:14px}
.toast b{display:block;font-size:13px;font-weight:600}
.toast span{font-size:12px;color:var(--muted-foreground)}

/* ---------- footer ---------- */
.site-footer{margin-top:64px;border-top:1px solid var(--border);padding:40px 0 100px}
.site-footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.site-footer .brand img{height:28px;margin-bottom:12px}
.site-footer .brand p{font-size:14px;font-weight:600}
.site-footer .brand small{display:block;font-size:12px;color:var(--muted-foreground);margin-top:6px;max-width:300px;line-height:1.5}
.site-footer h5{font-size:13px;font-weight:600;margin-bottom:10px}
.site-footer a,.site-footer .lnk{display:block;font-size:13px;color:var(--muted-foreground);padding:4px 0;cursor:pointer}
.site-footer a:hover,.site-footer .lnk:hover{color:var(--foreground)}
.site-footer .bottom{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--muted-foreground);margin-top:32px;flex-wrap:wrap}
.site-footer .bottom b{color:var(--foreground);font-weight:500}

/* ---------- mobile bottom nav ---------- */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--background);border-top:1px solid var(--border);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.mobile-nav .items{display:grid;grid-template-columns:repeat(5,1fr)}
.mobile-nav button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--muted-foreground);padding:4px 0;position:relative}
.mobile-nav button.active{color:var(--foreground)}
.mobile-nav svg{width:20px;height:20px}

/* grid children may shrink below their intrinsic (svg) width */
.featured>*,.feat-body>*,.event-layout>*,.lb-layout>*,.settings-layout>*,.value-card>*,.grid-cards>*,.stats-row>*{min-width:0}
.feat-chart svg,.value-card svg{max-width:100%}

/* ---------- responsive ---------- */
@media(max-width:1100px){.grid-cards{grid-template-columns:repeat(3,1fr)}.featured{grid-template-columns:1fr}.feat-side{display:none}.event-layout{grid-template-columns:1fr 320px}.lb-layout{grid-template-columns:1fr}.summary-cards,.stats-row{grid-template-columns:repeat(2,1fr)}.mini-stats{grid-template-columns:repeat(3,1fr)}.site-footer .top{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.grid-cards{grid-template-columns:repeat(2,1fr)}.event-layout{grid-template-columns:1fr;padding-bottom:64px}.event-side{position:static}.order-panel.desktop{display:none}.mobile-trade-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:12px;right:12px;bottom:72px;z-index:50}.mobile-trade-bar .btn{height:48px;font-size:15px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4)}.feat-body{grid-template-columns:1fr}.settings-layout{grid-template-columns:1fr}.side-nav{position:static;flex-direction:row;flex-wrap:wrap}.market-row{grid-template-columns:1fr auto}.market-row .yn{grid-column:1/-1}.market-row .yn .btn{width:auto;flex:1}.value-card{grid-template-columns:1fr}}
@media(max-width:640px){.search{display:none}.site-header .hdr .btn-header.dep{display:none}.grid-cards{grid-template-columns:1fr}.stats-row,.summary-cards{grid-template-columns:1fr 1fr}.mini-stats{grid-template-columns:1fr 1fr}.mobile-nav{display:block}.site-footer{padding-bottom:120px}.page-h1{font-size:24px}.lb-head,.lb-row{grid-template-columns:24px 36px 1fr 90px 70px;gap:8px}.event-head h1{font-size:20px}.site-footer .top{grid-template-columns:1fr}}


/* =====================================================================
   MARKET IMAGES (Polymarket-style photos/logos over the category icon)
   ===================================================================== */
.icon-sq{position:relative;overflow:hidden}
.icon-sq .mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--secondary)}
.logo-cap{display:block;font-size:8.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-foreground);margin-top:2px;line-height:1}
.logo{flex-direction:column;align-items:flex-start;gap:0}
.market-row{grid-template-columns:auto 1fr auto auto}
.market-row .icon-sq{width:40px;height:40px}
.card-market .icon-sq{width:24px;height:24px;border-radius:6px;margin-right:6px}
.feat-rows .r .icon-sq{width:28px;height:28px;border-radius:7px;margin-right:8px}
.feat-rows .r span:first-child{display:flex;align-items:center}

/* =====================================================================
   NEWS
   ===================================================================== */
.news-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;margin:8px 0 28px}
.news-hero .img{aspect-ratio:16/10;border-radius:var(--radius-xl);background:var(--secondary) center/cover no-repeat;border:1px solid var(--border)}
.news-hero h2{font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin:10px 0}
.news-hero p{font-size:16px;color:var(--muted-foreground);line-height:1.6}
.news-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-foreground);flex-wrap:wrap}
.news-meta .src{display:inline-flex;gap:2px}
.news-meta .src i{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid var(--background)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 20px;margin-top:8px}
.news-card{cursor:pointer}
.news-card .img{aspect-ratio:16/10;border-radius:var(--radius-lg);background:var(--secondary) center/cover no-repeat;border:1px solid var(--border);margin-bottom:10px;transition:transform .2s}
.news-card:hover .img{transform:translateY(-2px)}
.news-card h3{font-size:16px;font-weight:600;line-height:1.35;margin:6px 0 4px}
.news-card p{font-size:13px;color:var(--muted-foreground);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card .t{font-size:12px;color:var(--muted-foreground);margin-top:6px}
.article{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;margin-top:12px}
.article-main{max-width:720px;min-width:0}
.article .crumb{font-size:13px;color:var(--muted-foreground)}
.article h1{font-size:36px;line-height:1.15;font-weight:600;letter-spacing:-.025em;margin:10px 0 12px}
.article .dek{font-size:18px;line-height:1.55;color:var(--muted-foreground);margin-bottom:14px}
.article .hero{aspect-ratio:16/9;border-radius:var(--radius-xl);background:var(--secondary) center/cover no-repeat;border:1px solid var(--border);margin:18px 0 6px}
.article .cap{font-size:12px;color:var(--muted-foreground);margin-bottom:22px}
.short{border-left:3px solid var(--primary);padding:6px 0 6px 18px;margin:16px 0 22px}
.short .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);font-weight:600;margin-bottom:8px}
.short p{font-size:14px;line-height:1.5;margin-bottom:8px}
.trade-this{border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:14px 16px;display:flex;align-items:center;gap:14px;background:var(--card);margin:0 0 26px;cursor:pointer}
.trade-this:hover{border-color:var(--primary)}
.trade-this .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);font-weight:600}
.trade-this .q{font-size:15px;font-weight:600;line-height:1.35;margin-top:2px}
.trade-this .p{margin-left:auto;text-align:right;flex-shrink:0}
.trade-this .p b{font-size:26px;font-weight:700;line-height:1}
.trade-this .p small{display:block;font-size:11px;color:var(--muted-foreground)}
.article .body p{font-size:17px;line-height:1.7;margin-bottom:18px;color:color-mix(in srgb,var(--foreground) 88%,transparent)}
.article .body p b{color:var(--foreground)}
.article .body h3{font-size:20px;margin:26px 0 10px}
.article-side{position:sticky;top:120px}
.article-side .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground);font-weight:600}
.article-side .s{font-size:13px;color:var(--muted-foreground);margin:4px 0 12px}
.side-mkt{border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--card);margin-bottom:12px}
.side-mkt .h{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.side-mkt .h b{font-size:14px;font-weight:600;line-height:1.3}
.side-mkt .f{display:flex;justify-content:space-between;font-size:12px;color:var(--muted-foreground);margin-top:10px}
.share-row{display:flex;gap:8px;margin:20px 0 30px;flex-wrap:wrap}
.tags-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}
.news-strip{margin:34px 0 8px}
.news-strip .news-grid{grid-template-columns:repeat(4,1fr)}
.news-strip .news-card .img{aspect-ratio:16/9}
.news-strip .news-card h3{font-size:14px}

/* =====================================================================
   PARTNERSHIPS (high-end marketing page)
   ===================================================================== */
.pt-hero{position:relative;padding:72px 0 56px;text-align:center;overflow:hidden}
.pt-hero::before{content:"";position:absolute;inset:-40% -20% auto;height:140%;background:radial-gradient(60% 50% at 50% 30%,color-mix(in srgb,var(--primary) 28%,transparent),transparent 70%),radial-gradient(40% 40% at 80% 20%,color-mix(in srgb,var(--brand-accent) 22%,transparent),transparent 70%);pointer-events:none;z-index:-1}
.pt-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--card) 70%,transparent);font-size:12px;font-weight:600;color:var(--muted-foreground);letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px}
.pt-hero h1{font-size:56px;line-height:1.05;font-weight:600;letter-spacing:-.035em;max-width:820px;margin:0 auto 18px}
.pt-hero h1 .g{background:linear-gradient(90deg,var(--primary),var(--brand-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.pt-hero p{font-size:18px;line-height:1.6;color:var(--muted-foreground);max-width:640px;margin:0 auto 28px}
.pt-hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin:10px 0 60px}
.pt-stats>div{background:var(--card);padding:22px 20px}
.pt-stats .v{font-size:30px;font-weight:600;letter-spacing:-.02em}
.pt-stats .k{font-size:13px;color:var(--muted-foreground);margin-top:4px}
.pt-section{margin:0 0 64px}
.pt-section h2{font-size:32px;font-weight:600;letter-spacing:-.025em;margin-bottom:8px}
.pt-section .sub{font-size:16px;color:var(--muted-foreground);max-width:620px;margin-bottom:28px;line-height:1.6}
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pt-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:26px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.pt-card:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.pt-card .ic{width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pt-card .ic svg{width:22px;height:22px}
.pt-card h3{font-size:18px;font-weight:600;margin-bottom:8px}
.pt-card p{font-size:14px;line-height:1.6;color:var(--muted-foreground)}
.pt-card ul{margin:12px 0 0 16px;font-size:13px;color:var(--muted-foreground);line-height:1.7}
.pt-embed{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:36px}
.pt-embed pre{font-family:var(--mono);font-size:12px;line-height:1.6;background:var(--background);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;overflow-x:auto;color:var(--muted-foreground)}
.pt-embed pre b{color:var(--primary-text);font-weight:500}
.pt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.pt-step{padding:22px;border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--card)}
.pt-step .n{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:14px}
.pt-step h3{font-size:15px;margin-bottom:6px}
.pt-step p{font-size:13px;color:var(--muted-foreground);line-height:1.6}
.pt-logos{display:flex;gap:40px;justify-content:center;align-items:center;flex-wrap:wrap;opacity:.85;margin:10px 0 0}
.pt-logos span{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--muted-foreground)}
.pt-logos img{height:22px;width:auto;filter:grayscale(1);opacity:.8}
.pt-form{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:36px}
.pt-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pt-quote{border-radius:var(--radius-xl);padding:40px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,var(--card)),var(--card));border:1px solid var(--border);text-align:center}
.pt-quote p{font-size:22px;line-height:1.5;font-weight:500;max-width:760px;margin:0 auto 14px;letter-spacing:-.01em}
.pt-quote small{color:var(--muted-foreground);font-size:13px}
@media(max-width:900px){.pt-hero h1{font-size:38px}.pt-stats,.pt-steps{grid-template-columns:1fr 1fr}.pt-grid{grid-template-columns:1fr}.pt-embed,.pt-form{grid-template-columns:1fr;padding:22px}.news-hero{grid-template-columns:1fr}.news-grid,.news-strip .news-grid{grid-template-columns:1fr 1fr}.article{grid-template-columns:1fr}.article-side{position:static}.article h1{font-size:28px}}
@media(max-width:640px){.news-grid,.news-strip .news-grid{grid-template-columns:1fr}.pt-stats,.pt-steps{grid-template-columns:1fr}}

/* =====================================================================
   MOBILE — app-like shell
   ===================================================================== */
html{-webkit-tap-highlight-color:transparent}
@media(max-width:640px){
  :root{--header-h:56px;--nav-h:40px}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom));-webkit-touch-callout:none;overscroll-behavior-y:contain}
  .site-header{padding-top:env(safe-area-inset-top)}
  .site-header .hdr{padding:8px 0 4px;min-height:52px;gap:8px}
  .logo img{height:22px}
  .logo-cap{font-size:7.5px;letter-spacing:.2em}
  .hdr-actions .btn-header{height:34px;padding:0 12px;font-size:13px}
  .hdr-actions .btn-icon{width:34px;height:34px}
  .nav-tabs{height:40px;font-size:13px;gap:2px}
  .nav-tab{padding:4px 8px}
  .container{padding:0 12px}
  .stats-row{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 18px}
  .stat-card{padding:12px 12px 10px;border-radius:var(--radius-md)}
  .stat-card .v{font-size:18px}
  .stat-card .k{font-size:9px}
  .featured{display:none}
  .section-head{margin:8px 0 10px}
  .page-h2{font-size:19px}
  .chips-row{position:sticky;top:calc(var(--header-h) + var(--nav-h) + env(safe-area-inset-top));z-index:30;background:var(--background);padding:8px 0;margin:0 -12px 6px;padding-left:12px;mask-image:none}
  .sort-row{margin:2px 0 10px}
  .grid-cards{gap:10px}
  .card{padding:14px;border-radius:var(--radius-lg)}
  .card-head h2,.card-head h3{font-size:15px}
  .btn-outcome{height:44px}
  .btn,.pill,.segmented button{min-height:36px}
  .site-footer{display:none}
  .toast-wrap{left:12px;right:12px;bottom:auto;top:calc(12px + env(safe-area-inset-top));align-items:stretch}
  .toast{min-width:0;max-width:none}
  /* dialogs become bottom sheets */
  .overlay{align-items:flex-end;padding:0}
  .dialog{max-width:none;border-radius:20px 20px 0 0;border-bottom:none;padding:20px 18px calc(24px + env(safe-area-inset-bottom));max-height:92vh;transform:translateY(40px)}
  .dialog::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--border-strong);margin:-6px auto 16px}
  .panel-float{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));right:8px;left:8px;width:auto;max-height:70vh;overflow:auto}
  .dd{left:8px!important;right:8px!important;min-width:0;max-height:min(60vh,calc(100vh - 110px));overflow-y:auto}
  /* event page */
  .event-head h1{font-size:19px}
  .event-head .actions button{width:32px;height:32px}
  .event-side{gap:14px}
  .chart-box svg.chart{height:220px}
  .market-row{padding:12px 10px}
  .market-row .pct{font-size:20px}
  .panel-head{padding:14px 16px}
  .panel-body{padding:0 16px 16px}
  .mobile-trade-bar{bottom:calc(76px + env(safe-area-inset-bottom));left:10px;right:10px}
  .mobile-nav{padding:6px 6px calc(8px + env(safe-area-inset-bottom))}
  .mobile-nav .items{grid-template-columns:repeat(5,1fr)}
  .mobile-nav button{font-size:10px}
  .mobile-nav button.active{color:var(--primary)}
  .mobile-nav button.active svg{color:var(--primary)}
  .mobile-nav .fab{margin-top:-22px}
  .mobile-nav .fab span.ic{width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 45%,transparent)}
  .mobile-nav .fab span.ic svg{width:22px;height:22px;color:#fff}
  /* portfolio / tables */
  .hero-grid{gap:10px;margin:10px 0}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .table th,.table td{padding:10px 6px;font-size:13px}
  .tabs-card .tools-row{flex-wrap:wrap}
  .page-h1{font-size:22px;margin:12px 0 10px}
  .settings-layout{gap:12px}
  .side-nav{overflow-x:auto;flex-wrap:nowrap;margin:0 -12px;padding:0 12px 4px}
  .side-nav button{flex-shrink:0;height:34px}
  /* touch: no hover lift */
  .card:hover,.pt-card:hover{transform:none}
}
@media(max-width:640px){ .input,.textarea,.select,.search input,.op-amount input{font-size:16px} .swipe-page{min-height:calc(100dvh - var(--header-h) - var(--nav-h) - 76px)} }
@media (display-mode: standalone){ .site-header{padding-top:max(8px,env(safe-area-inset-top))} }


/* =====================================================================
   MOTION — Kuest-style desktop animations + iOS-style mobile feel
   (view-transition crossfades, zoom/fade dialogs, animated counters,
    featured pagination progress, tap feedback, spring sheets)
   ===================================================================== */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-ios:cubic-bezier(.32,.72,0,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}
@keyframes wz-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wz-fade-in{from{opacity:0}to{opacity:1}}
@keyframes wz-zoom-in{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@keyframes wz-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes wz-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wz-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes wz-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes wz-pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes wz-flash-yes{from{background:var(--yes-soft)}to{background:transparent}}
@keyframes wz-flash-no{from{background:var(--no-soft)}to{background:transparent}}
@keyframes wz-ticker{from{transform:translateY(0)}to{transform:translateY(-100%)}}

/* page enter */
main,.swipe-page{animation:wz-fade-up .32s var(--ease-out)}
body.leaving main,body.leaving .swipe-page{opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease}
.grid-cards>.card{animation:wz-fade-up .36s var(--ease-out) backwards}
.grid-cards>.card:nth-child(2){animation-delay:.03s}.grid-cards>.card:nth-child(3){animation-delay:.06s}.grid-cards>.card:nth-child(4){animation-delay:.09s}.grid-cards>.card:nth-child(5){animation-delay:.12s}.grid-cards>.card:nth-child(6){animation-delay:.15s}.grid-cards>.card:nth-child(7){animation-delay:.18s}.grid-cards>.card:nth-child(8){animation-delay:.21s}
.news-grid>.news-card,.act-row,.lb-row,.table tbody tr{animation:wz-fade-in .3s ease both}

/* featured carousel: crossfade + pagination progress (Kuest home-featured-*) */
.feat-card{animation:none}
.feat-card.swap{animation:wz-zoom-in .34s var(--ease-out)}
.feat-dot{position:relative;overflow:hidden}
.feat-dot.active::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--foreground) 35%,transparent);transform-origin:left;animation:wz-progress 8s linear forwards}
.feat-arrow span{transition:opacity .14s ease}
.feat-arrow:hover{background:var(--accent)}
.feat-context{overflow:hidden;height:20px}
.feat-context .track{animation:wz-ticker 12s linear infinite}

/* cards, rows, buttons */
.card,.pt-card,.news-card .img,.rel,.hot-row{transition:transform .22s var(--ease-out),border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.btn,.pill,.nav-tab,.segmented button,.wz-chip,.op-chips button,.share-btn{transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s var(--ease-out),box-shadow .2s ease}
.btn:active:not(:disabled),.pill:active,.wz-chip:active,.op-chips button:active,.segmented button:active{transform:scale(.97)}
.btn-yes:hover:not(:disabled),.btn-no:hover:not(:disabled){box-shadow:0 6px 18px color-mix(in srgb,currentColor 20%,transparent)}
.op-outcomes .btn{transition:background .18s ease,color .18s ease,transform .12s var(--ease-out)}
.op-outcomes .btn.sel{animation:wz-pop .26s var(--ease-out)}
.tabs-underline button::after,.op-types button::after,.op-side button::after{transition:transform .2s var(--ease-out),opacity .2s}
.gauge path:last-child{transition:stroke-dashoffset .6s var(--ease-out)}
.tier-fill,.sw-bar div,.pv-bar div{transition:width .6s var(--ease-out)}
.chance-line .big{transition:color .3s}
.wz-count{display:inline-block;font-variant-numeric:tabular-nums}
.flash-yes{animation:wz-flash-yes 1.2s ease-out}
.flash-no{animation:wz-flash-no 1.2s ease-out}
.shake{animation:wz-shake .28s ease-in-out}
.skeleton{background:linear-gradient(90deg,var(--muted) 25%,color-mix(in srgb,var(--muted) 60%,var(--card)) 50%,var(--muted) 75%);background-size:200% 100%;animation:wz-shimmer 1.4s linear infinite}

/* dialogs (tw-animate: fade-in overlay, zoom-in content) */
.overlay{transition:opacity .2s ease}
.dialog{transition:transform .22s var(--ease-out),opacity .2s ease;opacity:0}
.overlay.show .dialog{animation:wz-zoom-in .24s var(--ease-out);opacity:1}
.dd.show{animation:wz-zoom-in .16s var(--ease-out);transform-origin:top right}
.panel-float.show{animation:wz-zoom-in .18s var(--ease-out)}
.toast{transition:transform .28s var(--ease-spring),opacity .22s ease}

/* header portfolio numbers tick */

/* smooth scroll + snapping chips */
html{scroll-behavior:smooth}
.chips-row,.nav-tabs,.sw-chips,.side-nav{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.chips-row>*,.sw-chips>*{scroll-snap-align:start}

/* mobile: iOS feel */
@media(max-width:640px){
  .overlay.show .dialog{animation:wz-sheet-up .42s var(--ease-ios)}
  .panel-float.show{animation:wz-sheet-up .38s var(--ease-ios)}
  .card:active,.news-card:active,.act-row:active,.hot-row:active,.lb-row:active{transform:scale(.985);transition-duration:.08s}
  .mobile-nav button{transition:transform .15s var(--ease-spring),color .15s}
  .mobile-nav button:active{transform:scale(.9)}
  .mobile-nav .fab span.ic{transition:transform .2s var(--ease-spring)}
  .mobile-nav button.active .ic{transform:translateY(-2px) scale(1.06)}
  .mobile-trade-bar .btn:active{transform:scale(.96)}
  .chips-row{scroll-snap-type:x mandatory}
  main{animation-duration:.28s}
}
@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 v2 — uniform height, tag + icon header, stat row, sparkline, trend,
   outcome multipliers, footer (vol · traders · closes)
   ===================================================================== */
.card{min-height:320px;padding:18px 18px 16px;justify-content:flex-start}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;min-height:44px}
.card-top .icon-sq{width:44px;height:44px;border-radius:10px;flex-shrink:0}
.card-top .ctag{padding-top:4px}
.card-top .ctag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted-foreground);letter-spacing:.02em;text-transform:uppercase}
.card-top .ctag svg{width:12px;height:12px}
.card-top .bm,.card-foot2 .bm{width:26px;height:26px;margin-right:-6px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--muted-foreground)}
.card-foot2 .bm:hover,.card-top .bm:hover{color:var(--foreground);background:var(--accent)}
.card-foot2 .bm.on,.card-top .bm.on{color:var(--primary-text)}
.card-foot2 .bm svg,.card-top .bm svg{width:15px;height:15px}
.card-head2{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:42px;margin-bottom:12px}
.card-head2 h3{font-size:15px;line-height:1.35;font-weight:600;flex:1}
.card-head2 h3 a:hover{text-decoration:underline;text-underline-offset:2px}
.card-head2 .icon-sq{width:44px;height:44px;border-radius:10px;flex-shrink:0}
.stat-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted-foreground);margin-top:auto}
.stat-line b{font-size:24px;font-weight:700;color:var(--foreground);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.stat-line b small{font-size:11px;font-weight:600;color:var(--muted-foreground);margin-right:4px;letter-spacing:.04em;vertical-align:middle}
.spark{width:100%;height:56px;display:block;margin:6px 0 2px}
.trend-line{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted-foreground);margin-bottom:12px}
.trend-line .chg{font-weight:600}
.card .outcome-btns{margin:0 0 12px}
.card .outcome-btns .btn{height:44px;font-size:13px;text-transform:uppercase;letter-spacing:.02em}
.card .outcome-btns .btn b{font-weight:500;font-size:12px;margin-left:6px;text-transform:none;letter-spacing:0}
.card-foot2{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted-foreground);margin-top:auto;padding-top:2px}
.card-foot2 .l{display:flex;align-items:center;gap:12px}
.card-foot2 .l span,.card-foot2 .r,.card-foot2 .r>span{display:inline-flex;align-items:center;gap:4px}.card-foot2 .r{gap:8px}
.card-foot2 svg{width:13px;height:13px}
.card .card-markets{max-height:none;flex:1;gap:8px;margin:2px 0 12px}
.card .card-market{padding:6px 0;border-bottom:1px solid var(--border)}
.card .card-market:last-child{border-bottom:none}
.card .resolved-pill{margin:auto 0 12px}
@media(max-width:640px){.card{min-height:0}.spark{height:48px}}

/* light theme: white watermark logos become dark silhouettes */
.light .feat-foot .brand img,.light .chance-line .wm img,.light .pl-val .wm img,.light .side-mkt .wm img{filter:brightness(0)}

/* =====================================================================
   MOBILE MINIMAL HOME + EXPLORE TOPICS SHEET (5050-style menu instead of tab rows)
   ===================================================================== */
.m-head,.m-seg{display:none}
.topics-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 14px;border-radius:10px;background:var(--card);border:1px solid var(--border-strong);color:var(--foreground);font-weight:600;font-size:13px;flex-shrink:0;max-width:60%}
.topics-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topics-btn svg{width:15px;height:15px;flex-shrink:0;color:var(--muted-foreground)}
.topics-btn:active{transform:scale(.97)}
@media(max-width:640px){
  :root{--nav-h:0px}
  .site-header .nav-wrap{display:none}
  .stats-row,.section-head,.chips-row,.sort-row,.news-strip{display:none!important}
  .m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 12px}
  .m-head h1{font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1}
  .m-seg{display:flex;background:var(--secondary);border-radius:12px;padding:4px;gap:4px;margin-bottom:14px;position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top) + 4px);z-index:30;box-shadow:0 0 0 6px var(--background)}
  .m-seg button{flex:1;height:36px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted-foreground);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .2s var(--ease-ios),color .2s}
  .m-seg button svg{width:14px;height:14px}
  .m-seg button.active{background:var(--card);color:var(--foreground);box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .grid-cards{gap:12px}
}
.overlay .dialog.topics-sheet{padding:0;max-height:88vh;display:flex;flex-direction:column;max-width:480px}
.topics-sheet::before{margin:10px auto 0!important}
.topics-sheet .th{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px}
.topics-sheet .th h2{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px;line-height:1.15}
.topics-sheet .th p{margin:0;font-size:13px;color:var(--muted-foreground)}
.topics-sheet .xc{width:36px;height:36px;border-radius:50%;background:var(--secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--foreground)}
.topics-sheet .xc svg{width:16px;height:16px}
.topics-sheet .tb{overflow:auto;padding:0 12px calc(16px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.topics-sheet .ts{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:12px;background:var(--secondary);margin:2px 0 10px;color:var(--muted-foreground)}
.topics-sheet .ts svg{width:16px;height:16px;flex-shrink:0}
.topics-sheet .ts input{flex:1;background:none;border:0;font:inherit;font-size:16px;color:var(--foreground);outline:none;min-width:0}
.topics-sheet .all{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 14px;border-radius:12px;background:var(--secondary);font-weight:600;font-size:14px;color:var(--foreground);margin-bottom:6px;text-align:left}
.topics-sheet .all.on{background:var(--primary-soft);color:var(--primary-text)}
.topics-sheet .all svg{width:15px;height:15px;color:var(--muted-foreground)}.topics-sheet .all svg.r{transform:rotate(-90deg)}
.topics-sheet .grp{border-top:1px solid var(--border);padding:4px 0}
.topics-sheet .all+.grp,.topics-sheet .all+.all+.grp,.topics-sheet .all+.all+.all+.grp{margin-top:8px}
.topics-sheet .gh{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;font-weight:600;font-size:14px;color:var(--foreground);text-align:left;border-radius:10px}
.topics-sheet .gh svg{width:15px;height:15px;transition:transform .28s var(--ease-ios);color:var(--muted-foreground)}
.topics-sheet .grp.open .gh svg{transform:rotate(180deg)}
.topics-sheet .gl{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-ios)}
.topics-sheet .gl>div{overflow:hidden}
.topics-sheet .grp.open .gl{grid-template-rows:1fr}
.topics-sheet .ti{display:block;width:100%;padding:12px 14px 12px 18px;font-size:15px;color:var(--muted-foreground);border-radius:10px;text-align:left}
.topics-sheet .ti.on{color:var(--primary-text);background:var(--primary-soft)}
.topics-sheet .ti:active,.topics-sheet .gh:active{background:var(--accent)}
.topics-sheet .tl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.topics-sheet .tl a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:12px;background:var(--secondary);font-size:12px;font-weight:600;color:var(--foreground);text-align:center}
.topics-sheet .tl a svg{width:18px;height:18px;color:var(--primary-text)}

/* =====================================================================
   KALSHI-STYLE STROKES — hairline cards, no shadows, pill buttons,
   outlined Yes/No pills, coloured option underlines, pill search
   ===================================================================== */
:root{--radius-sm:10px;--radius-md:12px;--radius-lg:14px;--radius-xl:16px;--shadow-card:none;--card:#13161b;--border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.17)}
:root.light{--card:#ffffff;--border:#e6e8ec;--border-strong:#d3d7de;--shadow-card:none;--background:#fbfbfc}
.btn{border-radius:999px;font-weight:600}
.btn-secondary{background:transparent;border:1px solid var(--border-strong);color:var(--foreground)}
.btn-secondary:hover:not(:disabled){background:var(--secondary)}
.btn-outline{border:1px solid color-mix(in srgb,var(--primary-text) 70%,transparent);color:var(--primary-text)}
.btn-outline:hover:not(:disabled){background:var(--primary-soft)}
.btn-yes{background:transparent;border:1px solid color-mix(in srgb,var(--yes) 60%,transparent);color:var(--yes-foreground)}
.btn-no{background:transparent;border:1px solid color-mix(in srgb,var(--no) 60%,transparent);color:var(--no-foreground)}
.btn-yes:hover:not(:disabled){background:var(--yes);border-color:var(--yes);color:#fff}
.btn-no:hover:not(:disabled){background:var(--no);border-color:var(--no);color:#fff}
.btn-yes.solid,.btn-no.solid{border-color:transparent}
.btn-yes.active,.btn-yes.on{background:var(--yes);border-color:var(--yes);color:#fff}.btn-no.active,.btn-no.on{background:var(--no);border-color:var(--no);color:#fff}
.btn-3d{border-radius:999px;box-shadow:none;height:48px}
.btn-3d:hover:not(:disabled){transform:none;box-shadow:none;filter:brightness(1.08)}
.btn-3d:active:not(:disabled){transform:scale(.985);box-shadow:none}
.btn-3d.yes,.btn-3d.no{box-shadow:none}
.tag{border-radius:999px}
.search input{border-radius:999px;border:1px solid var(--border);background:var(--secondary)}
.search input:focus{border-color:var(--border-strong)}
.card{border:1px solid var(--border);box-shadow:none}
.card:hover{border-color:var(--border-strong);box-shadow:none}
.card .outcome-btns .btn,.feat-rows .r.yn .btn,.market-row .yn .btn{border-radius:999px}
.card-market .n{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--chart-1);font-weight:500}
.card-market:nth-child(2) .n{text-decoration-color:var(--chart-3)}.card-market:nth-child(3) .n{text-decoration-color:var(--chart-5)}.card-market:nth-child(4) .n{text-decoration-color:var(--chart-4)}
.card-market .yn .btn{border-radius:999px;height:28px;width:44px;font-size:12px}
.card-market .yn .btn-no{width:44px}
.feat-card,.panel,.stat-card,.hot,.side-mkt,.news-card,.pt-card,.setting-card,.lb-card,.order-panel{box-shadow:none}
.stat-card{border-radius:var(--radius-lg)}
.side-card{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 65%,#fff) 60%,var(--brand-accent))}
.input,.textarea,.select{border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:transparent}
.input:focus,.textarea:focus,.select:focus{border-color:var(--primary-text);box-shadow:0 0 0 3px var(--primary-soft)}
.pill{border:1px solid var(--border)}
.pill.active{border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
.segmented{border-radius:999px}.segmented button{border-radius:999px}
.expand-btn,.resolved-pill{border-radius:999px}
.mobile-trade-bar .btn{border-radius:999px}
.m-seg,.m-seg button{border-radius:999px}
.topics-btn{border-radius:999px}
.dialog{border-radius:20px;box-shadow:none;border:1px solid var(--border-strong)}
.dd{box-shadow:0 12px 32px rgba(0,0,0,.35);border-radius:14px}

/* ---------- accent presets (data-accent on <html>) ---------- */
:root[data-accent=green]{--primary:#149a67;--primary-foreground:#fff;--primary-soft:rgba(20,154,103,.16);--primary-text:#3ddc9a;--ring:#149a67;--chart-1:#19c37d;--brand-accent:#0ea5e9}
:root.light[data-accent=green]{--primary:#0e8a5a;--primary-text:#0e8a5a;--primary-soft:rgba(14,138,90,.12);--ring:#8fd9bd}
:root[data-accent=purple]{--primary:#7c5cff;--primary-foreground:#fff;--primary-soft:rgba(124,92,255,.16);--primary-text:#b0a0ff;--ring:#7c5cff;--chart-1:#7c5cff;--brand-accent:#ec4899}
:root.light[data-accent=purple]{--primary:#6d4ee6;--primary-text:#6d4ee6;--primary-soft:rgba(109,78,230,.12);--ring:#c0b3ff}
:root[data-accent=orange]{--primary:#f97316;--primary-foreground:#1a0d02;--primary-soft:rgba(249,115,22,.16);--primary-text:#fdab6a;--ring:#f97316;--chart-1:#f97316;--brand-accent:#f43f5e}
:root.light[data-accent=orange]{--primary:#ea580c;--primary-foreground:#fff;--primary-text:#c2410c;--primary-soft:rgba(234,88,12,.12);--ring:#fdba74}
:root[data-accent=teal]{--primary:#14b8a6;--primary-foreground:#04201c;--primary-soft:rgba(20,184,166,.16);--primary-text:#5eead4;--ring:#14b8a6;--chart-1:#14b8a6;--brand-accent:#2b5ee8}
:root.light[data-accent=teal]{--primary:#0d9488;--primary-foreground:#fff;--primary-text:#0f766e;--primary-soft:rgba(13,148,136,.12);--ring:#99f6e4}
:root[data-accent=rose]{--primary:#f43f5e;--primary-foreground:#fff;--primary-soft:rgba(244,63,94,.16);--primary-text:#fb8aa0;--ring:#f43f5e;--chart-1:#f43f5e;--brand-accent:#7c5cff}
:root.light[data-accent=rose]{--primary:#e11d48;--primary-text:#be123c;--primary-soft:rgba(225,29,72,.12);--ring:#fda4af}

/* ---------- appearance controls ---------- */
.ap-sec{margin-bottom:18px}
.ap-k{font-size:12px;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.ap-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ap-opts.three{grid-template-columns:1fr 1fr 1fr}
.ap-opt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px;border-radius:14px;border:1px solid var(--border);background:var(--secondary);text-align:left;color:var(--foreground);transition:border-color .15s,box-shadow .15s}
.ap-opt b{font-size:13px;font-weight:600;margin-top:6px}.ap-opt small{font-size:11.5px;color:var(--muted-foreground)}
.ap-opt.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ap-pre{display:block;width:100%;height:58px;border-radius:9px;background:var(--background);border:1px solid var(--border);position:relative;overflow:hidden}
.ap-pre.top i{position:absolute;left:0;right:0;height:9px;background:var(--card);border-bottom:1px solid var(--border)}.ap-pre.top i:nth-child(1){top:0}.ap-pre.top i:nth-child(2){top:9px;height:6px;opacity:.7}
.ap-pre.top u{position:absolute;left:8px;right:8px;top:22px;bottom:6px;border-radius:5px;background:var(--card);border:1px solid var(--border)}
.ap-pre.side i{position:absolute;left:0;top:0;bottom:0;width:26px;background:var(--card);border-right:1px solid var(--border)}
.ap-pre.side u{position:absolute;left:34px;right:8px;top:8px;bottom:6px;border-radius:5px;background:var(--card);border:1px solid var(--border)}
.ap-pre.top::after,.ap-pre.side::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--primary)}.ap-pre.top::after{left:4px;top:2px;width:14px;height:5px;border-radius:3px}.ap-pre.side::after{left:5px;top:6px;width:16px;height:5px;border-radius:3px}
.ap-pre.th{height:44px}.ap-pre.th.dark{background:#0f1014;border-color:#2a2e39}.ap-pre.th.light{background:#fff;border-color:#d3d7de}.ap-pre.th.sys{background:linear-gradient(110deg,#0f1014 50%,#fff 50%);border-color:#8b90a0}
.ap-sw{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.ap-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px;border-radius:12px;border:1px solid transparent;color:var(--muted-foreground)}
.ap-swatch span{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.ap-swatch small{font-size:10.5px;white-space:nowrap}
.ap-swatch.on{border-color:var(--border-strong);background:var(--secondary);color:var(--foreground)}
.ap-swatch.on span{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--primary)}
.ap-note{font-size:12px;color:var(--muted-foreground);margin-top:8px}
@media(max-width:420px){.ap-sw{grid-template-columns:repeat(3,1fr)}}

/* ---------- SIDE MENU layout (desktop, html.side-menu) ---------- */
@media(min-width:1000px){
  html.side-menu{--header-h:0px;--nav-h:0px}
  .side-menu body{padding-left:248px}
  .side-menu .site-header{position:fixed;top:0;left:0;bottom:0;width:248px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;z-index:40;scrollbar-width:thin}
  .side-menu .site-header .hdr{flex-direction:column;align-items:stretch;gap:12px;padding:18px 14px 6px;min-height:0;max-width:none;flex-shrink:0}
  .side-menu .nav-wrap{flex-shrink:0}
  .side-menu .hdr-actions{align-items:center}
  .side-menu .hdr-actions .hdr-user{margin-left:auto}
  .side-menu .logo{padding:0 6px 6px}
  .side-menu .hdr-nav{flex-direction:column;align-items:stretch;height:auto;gap:2px;order:3}
  .side-menu .hdr-nav .nav-tab{height:40px;padding:0 12px!important;border-radius:10px;font-size:14px;justify-content:flex-start}
  .side-menu .hdr-nav .nav-tab.active{background:var(--secondary)}
  .side-menu .search{max-width:none;order:2}
  .side-menu .search .kbd{display:none}
  .side-menu .hdr-actions{order:4;flex-wrap:wrap;gap:8px;padding-top:12px;margin-top:4px;border-top:1px solid var(--border)}
  .side-menu .hdr-actions .btn-header{flex:1 1 auto;justify-content:center}
  .side-menu .nav-wrap{border-bottom:none;border-top:1px solid var(--border);margin-top:6px;padding:10px 14px 24px}
  .side-menu .nav-wrap .container{padding:0}
  .side-menu .nav-tabs{flex-direction:column;align-items:stretch;height:auto;overflow:visible;mask-image:none;white-space:normal;gap:1px}
  .side-menu .nav-tabs .nav-tab{height:36px;padding:0 12px;border-radius:10px;font-size:13.5px;justify-content:flex-start;width:100%}
  .side-menu .nav-tabs .nav-tab.active{background:var(--secondary)}
  .side-menu .nav-tabs #moreTab{justify-content:space-between}
  .side-menu .nav-sep{width:auto;height:1px;margin:8px 4px}
  .side-menu .container{max-width:1180px}
  .side-menu .mobile-nav{display:none}
}

/* activity feed: mobile-safe rows */
.act-row .q{display:block}
.act-row .d{flex-wrap:wrap;row-gap:2px}
.act-row .d>*{white-space:nowrap}
@media(max-width:640px){
  .act-row{gap:10px;align-items:flex-start}
  .act-row .icon-sq{width:40px;height:40px;margin-top:2px}
  .act-row .q{font-size:13px}
  .act-row .d{font-size:13px;gap:6px}
  .act-row .t{font-size:12px;margin-top:2px}
  .act-row .t svg{display:none}
  .filters-bar{flex-wrap:wrap;gap:10px}
  .filters-bar .r{width:100%}
  .filters-bar .r .select{flex:1;width:auto!important;min-width:0}
}

/* sweep fixes: phone-width overflow */
.pt-embed>*{min-width:0}
.pt-embed pre{white-space:pre-wrap;word-break:break-all}
@media(max-width:640px){
  .lb-toolbar{flex-wrap:wrap;gap:8px}.lb-toolbar .segmented{width:100%;display:flex}.lb-toolbar .segmented button{flex:1}.lb-toolbar .select{width:100%!important}
  .lb-head{grid-template-columns:1fr 90px 70px;gap:8px;font-size:12px}.lb-head .col.active{padding-right:6px}
  .profile-head{flex-wrap:wrap;gap:14px}.profile-head .acts{margin-left:0;width:100%;flex-wrap:wrap}.profile-head .acts .btn{flex:1 1 auto}
  .setting-card .row{flex-wrap:wrap}
  .two{grid-template-columns:1fr!important}
}

/* anchored sections clear the sticky header; compact table cells on small screens */
[id]{scroll-margin-top:calc(var(--header-h) + var(--nav-h) + 16px)}
@media(max-width:640px){.lb-row{grid-template-columns:24px 36px 1fr 76px 64px}.lb-row>*:nth-child(n+4){font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}}
@media(min-width:641px) and (max-width:900px){.table td.r{white-space:nowrap}.pos-table th:nth-child(3),.pos-table td:nth-child(3),.pos-table th:nth-child(4),.pos-table td:nth-child(4){display:none}}

/* parimutuel ticket: the floor multiple leads, sell value sits beside it */
.op-earn.dpm .r{margin:3px 0}
.op-earn.dpm .r.big b{font-size:22px}
.op-position.dpm .r{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin:3px 0}
.op-position.dpm .r b{font-variant-numeric:tabular-nums}

/* =====================================================================
   NEWS — Filmlane layout (github.com/SkidGod4444/MovieSite-v2.0) rebuilt on
   Woza tokens: our palette, Onest, our radii. The shared navbar,
   footer and mobile nav are untouched. Everything is scoped to the news and
   article pages so no other surface shifts.
   ===================================================================== */
.news-page,.article-page{padding-bottom:40px}

/* ---------- hero: backdrop, gradient wash, accent word in the headline ---------- */
.news-page .lead{position:relative;min-height:540px;display:flex;align-items:flex-end;padding:36px;margin:10px 0 8px;border-radius:var(--radius-xl);overflow:hidden;background:var(--secondary) center/cover no-repeat;border:1px solid var(--border);cursor:pointer}
.news-page .lead::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,10,.97) 6%,rgba(6,7,10,.86) 40%,rgba(6,7,10,.42) 78%,rgba(6,7,10,.12))}
.news-page .lead .inner{position:relative;z-index:2;max-width:660px}
.news-page .lead h1{font-size:42px;line-height:1.08;font-weight:700;letter-spacing:-.025em;margin:12px 0 12px}
.news-page .lead h1 strong{color:var(--primary-text);font-weight:700}
.news-page .lead p{font-size:16px;line-height:1.55;color:var(--muted-foreground);max-width:600px}
.news-page .lead .meta-wrapper{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.news-page .lead,.article-page .lead{color:#fff}
.news-page .lead p,.article-page .lead .dek,.news-page .lead .meta-wrapper span,.article-page .lead .meta-wrapper span{color:rgba(255,255,255,.72)!important}
.news-page .lead .badge-outline,.article-page .lead .badge-outline{border-color:rgba(255,255,255,.5);color:#fff}
.news-page .lead .src i,.article-page .lead .src i{border-color:rgba(0,0,0,.45)}
.news-page .lead .btn-secondary,.article-page .lead .btn-secondary{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.news-page .lead .btn-secondary:hover{background:rgba(255,255,255,.14)}

/* ---------- section headings: small uppercase accent label over the title ---------- */
.news-page .sec-head,.article-page .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:42px 0 18px}
.news-page .sec-sub,.article-page .sec-sub{color:var(--primary-text);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.news-page .sec-title,.article-page .sec-title{font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.news-page .sec-head .more{font-size:13px;font-weight:600;color:var(--muted-foreground);flex-shrink:0}
.news-page .sec-head .more:hover{color:var(--primary-text)}

/* ---------- filter pills ---------- */
.news-page .filter-list{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 8px}
.news-page .filter-btn{color:var(--foreground);font-size:12px;font-weight:600;padding:10px 22px;border-radius:50px;border:2px solid var(--border-strong);background:transparent;white-space:nowrap;transition:border-color .15s ease,background .15s ease,color .15s ease}
.news-page .filter-btn:hover{border-color:var(--primary)}
.news-page .filter-btn.active{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}

/* ---------- card grid and the snap-scrolling row ---------- */
.news-page .movies-list,.article-page .movies-list{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 24px}
.news-page .movies-list.three{grid-template-columns:repeat(3,1fr)}
.article-page .movies-list{grid-template-columns:repeat(3,1fr)}   /* sits in the narrow article column */
.news-page .has-scrollbar{display:flex;grid-template-columns:none;gap:20px;overflow-x:auto;scroll-snap-type:inline mandatory;padding-bottom:22px;margin-bottom:-10px;scrollbar-width:thin}
.news-page .has-scrollbar>*{min-width:286px;scroll-snap-align:start}
.news-page .has-scrollbar::-webkit-scrollbar{height:8px}
.news-page .has-scrollbar::-webkit-scrollbar-track{background:var(--secondary);border-radius:50px}
.news-page .has-scrollbar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:50px}
.news-page .has-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--primary)}

.movie-card{cursor:pointer}
.movie-card .card-banner{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--secondary) center/cover no-repeat;border:1px solid var(--border);margin-bottom:16px;transition:transform .25s var(--ease-out)}
.movie-card .card-banner::after{content:"";position:absolute;inset:0;background:hsla(0,0%,100%,.05);opacity:0;transition:opacity .15s ease}
.movie-card:hover .card-banner{transform:translateY(-4px)}
.movie-card:hover .card-banner::after{opacity:1}
.movie-card .title-wrapper{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.movie-card .card-title{font-size:16px;font-weight:600;line-height:1.35;transition:color .15s ease;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.movie-card:hover .card-title{color:var(--primary-text)}
.movie-card .title-wrapper time{font-size:12px;color:var(--muted-foreground);flex-shrink:0;white-space:nowrap}
.movie-card .card-meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted-foreground);flex-wrap:wrap}

.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 10px;border-radius:5px;letter-spacing:.02em;white-space:nowrap}
.badge-fill{background:var(--foreground);color:var(--background)}
.badge-outline{border:2px solid var(--border-strong);color:var(--foreground)}
.badge-accent{background:var(--primary);color:var(--primary-foreground)}
.rating{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--foreground)}
.rating svg{width:13px;height:13px;flex-shrink:0;color:var(--primary-text)}
.rating.up svg{color:var(--yes-foreground)}.rating.down svg{color:var(--no-foreground)}

/* ---------- outlet dots kept from the old page, restyled to sit in card-meta ---------- */
.movie-card .src,.news-page .src,.article-page .src{display:inline-flex;gap:2px}
.movie-card .src i,.news-page .src i,.article-page .src i{width:13px;height:13px;border-radius:50%;display:inline-block;border:2px solid var(--background)}

/* ---------- closing band, the Filmlane CTA ---------- */
.news-page .news-cta{margin:52px 0 8px;padding:44px 40px;border-radius:var(--radius-xl);border:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 22%,var(--card)),var(--card) 62%);text-align:center}
.news-page .news-cta h2{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.news-page .news-cta h2 strong{color:var(--primary-text)}
.news-page .news-cta p{color:var(--muted-foreground);font-size:15px;max-width:560px;margin:0 auto 20px}

/* ---------- article: same hero treatment ---------- */
.article-page .lead{position:relative;min-height:460px;display:flex;align-items:flex-end;padding:36px;margin:10px 0 26px;border-radius:var(--radius-xl);overflow:hidden;background:var(--secondary) center/cover no-repeat;border:1px solid var(--border)}
.article-page .lead::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,10,.97) 6%,rgba(6,7,10,.86) 40%,rgba(6,7,10,.42) 78%,rgba(6,7,10,.12))}
.article-page .lead .inner{position:relative;z-index:2;max-width:760px}
.article-page .lead h1{font-size:38px;line-height:1.12;font-weight:700;letter-spacing:-.025em;margin:12px 0 10px}
.article-page .lead .dek{font-size:17px;line-height:1.55;color:var(--muted-foreground);max-width:660px}
.article-page .lead .meta-wrapper{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--muted-foreground)}


@media(max-width:1100px){.news-page .movies-list,.article-page .movies-list{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.news-page .movies-list,.article-page .movies-list,.news-page .movies-list.three{grid-template-columns:repeat(2,1fr)}.news-page .lead h1{font-size:32px}.article-page .lead h1{font-size:28px}}
@media(max-width:640px){
  .news-page .movies-list,.article-page .movies-list,.news-page .movies-list.three{grid-template-columns:1fr;gap:26px}
  .news-page .lead,.article-page .lead{min-height:360px;padding:22px 18px;border-radius:var(--radius-lg)}
  .news-page .lead h1{font-size:26px}.article-page .lead h1{font-size:24px}
  .news-page .lead p,.article-page .lead .dek{font-size:14px}
  .news-page .sec-head{margin:30px 0 14px}.news-page .sec-title,.article-page .sec-title{font-size:20px}
  .news-page .filter-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px 4px;padding:0 12px 2px}
  .news-page .filter-list::-webkit-scrollbar{display:none}
  .news-page .filter-btn{padding:9px 18px}
  .news-page .has-scrollbar>*{min-width:255px}
  .news-page .news-cta{padding:30px 20px;margin:36px 0 4px}.news-page .news-cta h2{font-size:22px}
  .movie-card .card-meta{gap:10px}
  .news-page .lead .meta-wrapper .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- source attribution: publisher logo + name (scraper output) ---------- */
.source-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--foreground);white-space:nowrap}
.source-logo{width:18px;height:18px;border-radius:4px;flex-shrink:0;object-fit:cover;background:var(--secondary);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;letter-spacing:-.02em;overflow:hidden}
.source-logo.mono{border-radius:4px}
.source-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.source-row .more{font-size:12px;color:var(--muted-foreground);font-weight:500}
.movie-card .source-chip{font-weight:500;color:var(--muted-foreground)}
/* sources always take their own line so every card reads the same way */
.movie-card .card-meta .source-row{flex-basis:100%;margin-top:3px;gap:8px}
.movie-card .source-logo{width:16px;height:16px;font-size:8px}
.news-page .lead .source-chip,.article-page .lead .source-chip{color:#fff}

/* the full credit list on an article */
.article-sources{border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin:22px 0 26px;background:var(--card)}
.article-sources .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);font-weight:700;margin-bottom:12px}
.article-sources .list{display:flex;flex-direction:column;gap:2px}
.article-sources a.src-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;font-size:14px;color:var(--foreground);transition:background .15s}
.article-sources a.src-item:hover{background:var(--accent)}
.article-sources .src-item .source-logo{width:26px;height:26px;border-radius:6px;font-size:11px}
.article-sources .src-item .d{font-size:12px;color:var(--muted-foreground);margin-left:auto}
.article-sources .src-item svg{width:14px;height:14px;color:var(--muted-foreground);flex-shrink:0}

/* ---------- AI summary ---------- */
.ai-box{border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--card);margin:0 0 24px;overflow:hidden}
.ai-box .ai-head{display:flex;align-items:center;gap:10px;padding:14px 16px}
.ai-box .ai-head .t{font-size:14px;font-weight:600}
.ai-box .ai-head .t small{display:block;font-size:12px;font-weight:400;color:var(--muted-foreground);margin-top:1px}
.ai-box .ai-head .btn{margin-left:auto;flex-shrink:0}
.ai-box .spark{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary-text);flex-shrink:0}
.ai-box .spark svg{width:16px;height:16px}
.ai-box .ai-body{display:none;padding:0 16px 16px;font-size:14px;line-height:1.62}
.ai-box.open .ai-body{display:block}
.ai-box .ai-body p{margin-bottom:10px}
.ai-box .ai-body ul{margin:0 0 10px;padding-left:18px}
.ai-box .ai-body li{margin-bottom:6px}
.ai-box .ai-body .cite{font-size:12px;color:var(--muted-foreground);border-top:1px solid var(--border);padding-top:10px;margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-box .ai-body .caret{display:inline-block;width:7px;height:15px;background:var(--primary-text);vertical-align:-2px;animation:wz-caret 1s steps(2) infinite}
@keyframes wz-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ai-box .ai-body .caret{animation:none}}

/* ---------- embed builder ---------- */
.embed-dialog{max-width:840px;width:100%;padding:22px 24px 24px}
.embed-dialog .eb-head{display:flex;align-items:center;gap:10px}
.embed-dialog .eb-head h2{font-size:22px;font-weight:600;letter-spacing:-.01em}
.embed-dialog .eb-sub{font-size:13px;color:var(--muted-foreground);margin:2px 0 18px}
.embed-dialog .eb-grid{display:grid;grid-template-columns:270px 1fr;gap:26px;align-items:start}
.embed-dialog .eb-opts{display:flex;flex-direction:column;gap:2px}
.eb-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 12px;border-radius:11px;text-align:left;color:var(--foreground);transition:background .15s}
.eb-toggle:hover{background:var(--accent)}
.eb-toggle .l{display:flex;flex-direction:column;gap:1px;min-width:0}
.eb-toggle .l b{font-size:14px;font-weight:500}
.eb-toggle .l small{font-size:11.5px;color:var(--muted-foreground)}
.eb-toggle .switch{flex-shrink:0}
.embed-dialog .eb-code-btn{margin-top:14px;justify-content:center;gap:8px}
.embed-dialog .eb-code-btn svg{width:15px;height:15px}
.embed-dialog .eb-preview{display:flex;flex-direction:column;align-items:center;gap:14px;border-left:1px solid var(--border);padding-left:26px;min-width:0}
.embed-dialog .eb-frame{max-width:100%;border-radius:12px;overflow:hidden;background:var(--secondary)}
.embed-dialog .eb-frame iframe{display:block;border:0;max-width:100%}
.embed-dialog .eb-size{display:flex;align-items:center;gap:10px}
.embed-dialog .eb-size label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-foreground);font-weight:600}
.embed-dialog .eb-size input{width:78px;height:32px;text-align:center;border-radius:8px;background:var(--input);border:1px solid var(--border-strong);color:var(--foreground);font:inherit;font-size:13px}
.embed-dialog .eb-codebox{margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
.embed-dialog .eb-codebox pre{font-family:var(--mono);font-size:12px;line-height:1.6;background:var(--background);border:1px solid var(--border);border-radius:10px;padding:14px;overflow-x:auto;color:var(--muted-foreground);white-space:pre;margin:0}
@media(max-width:760px){
  .embed-dialog{padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
  .embed-dialog .eb-grid{grid-template-columns:1fr;gap:18px}
  .embed-dialog .eb-preview{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:18px}
  .embed-dialog .eb-frame{width:100%!important;height:auto!important;aspect-ratio:4/3}
  .embed-dialog .eb-frame iframe{width:100%!important;height:100%!important}
}


/* =====================================================================
   TYPE SCALE — matched to bayse.markets: 14px body, 12px labels, tight
   tracking on anything large, and no heading heavier than 600.
   ===================================================================== */
body{font-size:14px;line-height:1.5;letter-spacing:-.003em}
h1,h2,h3,h4{letter-spacing:-.018em;font-weight:600}
.page-h1{font-size:26px;letter-spacing:-.025em}
.page-h2{font-size:20px;letter-spacing:-.022em}
.card-head2 h3,.movie-card .card-title{font-size:14.5px;letter-spacing:-.01em}
.stat-line b{letter-spacing:-.03em}
.stat-card .v{letter-spacing:-.025em}
.event-head h1{font-size:26px;letter-spacing:-.028em}
.chance-line .big{letter-spacing:-.03em}
.hero-id h1,.profile-head h1{letter-spacing:-.022em}
.news-page .lead h1{letter-spacing:-.032em}
.article-page .lead h1{letter-spacing:-.03em}
.news-page .sec-title,.article-page .sec-title{font-size:22px;letter-spacing:-.022em}
.news-page .news-cta h2{letter-spacing:-.028em}
.pt-hero h1{letter-spacing:-.03em}
.muted,.card-foot2,.trend-line,.news-meta{letter-spacing:0}
.op-amount .in{letter-spacing:-.03em}
.lb-row,.table{letter-spacing:-.002em}

/* =====================================================================
   CLEANLINESS PASS — matched to bayse.markets.  Nothing is removed; the
   supporting furniture just stops competing with the two things that
   matter on a card: the question and the number.
   ===================================================================== */

/* Lighter rules in light mode — bayse.markets separates with the faintest
   hairline it can get away with, and lets whitespace do the work. */
:root.light{--border:#edeff3;--border-strong:#dde1e8}

/* Card tag: a quiet label, not a badge. */
.card-top .ctag{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--muted-foreground);opacity:.85}

/* The headline figure sat a size too large and pulled focus off the question. */
.stat-line b{font-size:21px}
.stat-line{font-size:12.5px}

/* One quiet meta row instead of two competing ones. */
.trend-line{font-size:11.5px;margin-bottom:14px}
.trend-line span:first-child{opacity:.75}
.card-foot2{font-size:11.5px;opacity:.9}

/* More air inside and between cards. */
.card{padding:20px 20px 16px;min-height:326px}
.grid-cards{gap:18px}
.card-head2{margin-bottom:14px}
.spark{margin:8px 0 4px}

/* The featured card's left column ran out of content before the chart ran out
   of height, pooling all the slack above the footer. Centring it splits the
   space instead of stacking it in one gap. */
.feat-body>div:first-child{display:flex;flex-direction:column;justify-content:center;min-height:100%}
.feat-card{min-height:0}

/* The in-page chip row repeated the header's category nav item for item — the
   same eleven categories, the same filter call. bayse.markets carries exactly
   one category row, so this one goes and the header keeps the job. Delete this
   rule to bring the chips back. */
.chips-row{display:none}

/* Section furniture: let the headings breathe and quieten the label case. */
.section-head{margin:30px 0 14px}
.stats-row{margin:18px 0 26px}
.stat-card .k{letter-spacing:.1em;opacity:.8}
.chips-row{margin-bottom:14px}
.sort-row{margin:8px 0 18px}
.featured{margin-bottom:6px}

/* Panels and side cards carry the same hairline as the grid. */
.panel,.stat-card,.hot,.side-mkt,.setting-card,.lb-card{border-color:var(--border)}

@media(max-width:640px){
  .card{padding:16px 16px 14px;min-height:0}
  .grid-cards{gap:12px}
  .stat-line b{font-size:20px}
}


/* =====================================================================
   ELECTIONS — Kenya 2027 hub, laid out like Kalshi's midterms category:
   forecast headline, balance-of-power bar, county cartogram, rating
   buckets, race table.
   ===================================================================== */
.el-page{padding-bottom:48px}
.el-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 6px;flex-wrap:wrap}
.el-tabs{display:flex;gap:4px;flex-wrap:wrap}
.el-tabs button{height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted-foreground);white-space:nowrap}
.el-tabs button:hover{color:var(--foreground);background:var(--accent)}
.el-tabs button.active{background:var(--secondary);color:var(--foreground)}

.el-forecast{text-align:center;padding:26px 12px 18px}
.el-forecast .el-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted-foreground);margin-bottom:12px}
.el-forecast h1{font-size:34px;line-height:1.18;font-weight:700;letter-spacing:-.03em;max-width:900px;margin:0 auto}
.el-forecast .el-sub{font-size:13px;color:var(--muted-foreground);margin-top:10px}

.el-power{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);padding:18px 20px 14px;margin-bottom:22px}
.el-power-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted-foreground)}
.el-power-head b{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-right:6px}
.el-power-head .r b{margin:0 0 0 6px}
.el-power-head .mid{font-size:11.5px;letter-spacing:0;font-weight:500}
.el-bar{position:relative;display:flex;gap:1px;height:16px;margin:10px 0 8px;border-radius:4px;overflow:hidden}
.el-bar i{flex:1 1 0;min-width:0;display:block}
.el-need{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--foreground);opacity:.85;border-radius:2px}
.el-power-foot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted-foreground)}

/* ---- county cartogram: equal tiles placed to approximate real geography ---- */
.el-map{margin-bottom:26px}
.el-map-grid{display:grid;gap:6px;aspect-ratio:9/9;max-width:620px;margin:0 auto}
.el-tile{position:relative;border-radius:7px;background:color-mix(in srgb,var(--c) calc(var(--o)*100%),var(--card));border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;transition:transform .12s var(--ease-out),box-shadow .12s;min-width:0;overflow:hidden}
.el-tile:hover{transform:scale(1.08);z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.el-tile .cd{font-size:10px;font-weight:700;letter-spacing:.01em;line-height:1;color:var(--ink)}
.el-tile .cp{font-size:9.5px;font-weight:600;line-height:1;color:var(--ink);opacity:.82}
.el-legend{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted-foreground)}
.el-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ---- rating buckets ---- */
.el-buckets{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
.el-bucket{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:14px}
.el-bucket .h{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;font-weight:600}
.el-bucket .h span{font-size:12px;color:var(--muted-foreground);font-weight:500}
.el-bucket .s{font-size:11.5px;color:var(--muted-foreground);margin:2px 0 10px}
.el-bucket .rows{display:flex;flex-direction:column;gap:1px}
.el-rrow{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:13px;text-align:left;color:var(--foreground);width:100%}
.el-rrow:hover{background:var(--accent)}
.el-rrow i{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.el-rrow .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-rrow b{font-variant-numeric:tabular-nums;font-weight:600}
.el-bucket .more{font-size:11.5px;color:var(--muted-foreground);padding:6px 8px 0}

/* ---- race table ---- */
.el-table{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden}
.el-th,.el-tr{display:grid;grid-template-columns:1fr 54px 54px 180px 104px;align-items:center;gap:12px;padding:10px 16px}
.el-th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);border-bottom:1px solid var(--border)}
.el-tr{border-bottom:1px solid var(--border);font-size:14px}
.el-tr:last-child{border-bottom:none}
.el-tr:hover{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.el-tr .n{display:flex;flex-direction:column;gap:1px;min-width:0}
.el-tr .n b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-tr .n small{font-size:11.5px;color:var(--muted-foreground)}
.el-th .c,.el-tr .c{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.el-tr .split{display:flex;gap:2px;height:7px;border-radius:4px;overflow:hidden}
.el-tr .split i{display:block;height:100%}
.el-tr .btns{display:flex;gap:6px;justify-content:flex-end}
.el-tr .btns .btn{width:46px;padding:0;height:28px;font-size:12px}

/* ---- county drill-down ---- */
.el-county{border:1px solid var(--border-strong);border-radius:var(--radius-xl);background:var(--card);padding:18px 20px;margin:0 0 26px}
.el-county-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.el-seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.el-seat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:10px;border:1px solid var(--border);text-align:left;color:var(--foreground);transition:border-color .15s,background .15s}
.el-seat:hover{border-color:var(--border-strong);background:var(--accent)}
.el-seat .l{display:flex;flex-direction:column;gap:1px;min-width:0}
.el-seat .l b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-seat .l small{font-size:11px;color:var(--muted-foreground)}
.el-seat .p{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0}

.el-power-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.el-note{font-size:12px;color:var(--muted-foreground);line-height:1.6;margin-top:26px;padding-top:16px;border-top:1px solid var(--border);max-width:760px}

@media(max-width:900px){
  .el-buckets{grid-template-columns:repeat(2,1fr)}
  .el-power-grid{grid-template-columns:1fr}
  .el-forecast h1{font-size:26px}
  .el-th,.el-tr{grid-template-columns:1fr 46px 46px 96px}
  .el-th span:last-child,.el-tr .btns{display:none}
}
@media(max-width:640px){
  .el-forecast{padding:18px 4px 14px}
  .el-forecast h1{font-size:22px}
  .el-buckets{grid-template-columns:1fr}
  .el-map-grid{gap:4px}
  .el-tile{border-radius:5px}
  .el-tile .cd{font-size:8px}.el-tile .cp{font-size:7.5px}
  .el-power{padding:14px 14px 12px}
  .el-power-head b{font-size:20px}
  .el-th,.el-tr{grid-template-columns:1fr 42px 42px;padding:10px 12px;gap:8px}
  .el-tr .split{display:none}
  .el-seats{grid-template-columns:1fr}
}


/* ---------- real Kenya map replaces the tile cartogram ---------- */
.el-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);padding:6px 22px 18px;margin:14px 0 24px}
.el-card .el-forecast{padding:22px 8px 14px}
.el-card .el-power{border:none;background:none;padding:0;margin:0}
:root{--map-base:#171a21}
:root.light{--map-base:#eef1f5}
.ke-map{display:block;width:100%;max-width:660px;margin:0 auto;height:auto}
.ke-map path{stroke:var(--background);stroke-width:1.1;stroke-linejoin:round;cursor:pointer;transition:filter .12s,opacity .12s;vector-effect:non-scaling-stroke}
.ke-map path.ct:hover{filter:brightness(1.25)}
.ke-map path.ct.sel{stroke:var(--foreground);stroke-width:2}
.ke-map g.consts path{stroke-width:.9}
.ke-map g.consts path:hover{filter:brightness(1.3);stroke:var(--foreground);stroke-width:1.6}
.ke-map .cl{pointer-events:none;font-family:var(--font)}
.ke-map .cl{paint-order:stroke fill;stroke:var(--background);stroke-width:3.4px;stroke-linejoin:round}
.ke-map .cd{font-size:15px;font-weight:700;fill:var(--foreground)}
.ke-map .cp{font-size:13px;font-weight:600;fill:var(--foreground);opacity:.72}
.light .ke-map .cd,.light .ke-map .cp{fill:#0f172a}
.el-loading{text-align:center;font-size:12px;color:var(--muted-foreground);padding:6px 0}
@media(max-width:640px){
  .el-card{padding:2px 14px 14px;margin:10px 0 18px}
  .el-card .el-forecast{padding:16px 2px 12px}
  .ke-map .cd{font-size:20px}.ke-map .cp{font-size:17px}
  .ke-map path{stroke-width:1}
}

.el-map-row{display:flex;align-items:flex-start;justify-content:center;gap:18px}
.el-small{flex:0 0 190px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:10px;align-self:center;max-height:520px;overflow:auto}
.el-small .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);padding:2px 6px 8px}
.el-small .row{display:flex;align-items:center;gap:8px;width:100%;padding:6px 7px;border-radius:7px;font-size:12.5px;text-align:left;color:var(--foreground)}
.el-small .row:hover{background:var(--accent)}
.el-small .row i{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.el-small .row .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-small .row b{font-variant-numeric:tabular-nums;font-weight:600;font-size:12px}
@media(max-width:860px){
  .el-map-row{flex-direction:column;align-items:stretch;gap:12px}
  .el-small{flex:none;max-height:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 8px}
  .el-small .k{grid-column:1/-1}
}
@media(max-width:420px){.el-small{grid-template-columns:1fr}}

.ke-map.zoomed{max-width:560px}
.ke-map.zoomed path.ct{cursor:default}
.el-legend .wz-link{font-size:12px;background:none;border:none;cursor:pointer}


/* ---------- elections v2: three formations, tooltip, candidate strip ---------- */
.el-tip{position:fixed;z-index:200;pointer-events:none;min-width:196px;max-width:264px;padding:11px 13px;border-radius:12px;
  background:var(--popover);border:1px solid var(--border-strong);box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:12.5px}
.el-tip .t{font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.el-tip .s{color:var(--muted-foreground);font-size:11.5px;margin-top:1px}
.el-tip .bars{margin:9px 0 7px;display:flex;flex-direction:column;gap:5px}
.el-tip .b{display:grid;grid-template-columns:8px 30px 1fr 34px;align-items:center;gap:6px}
.el-tip .b i{width:8px;height:8px;border-radius:2px}
.el-tip .b span{font-size:11px;color:var(--muted-foreground);font-weight:600}
.el-tip .b u{height:6px;border-radius:3px;text-decoration:none;display:block;min-width:2px}
.el-tip .b b{text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.el-tip .r{font-size:11px;color:var(--muted-foreground);border-top:1px solid var(--border);padding-top:6px}

.el-power-head .bl{display:inline-flex;align-items:baseline;gap:5px;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted-foreground);transition:background .15s}
.el-power-head .bl:hover,.el-power-head .bl.on{background:var(--accent);color:var(--foreground)}
.el-power-head .bl b{font-size:24px;font-weight:700;letter-spacing:-.03em}
.el-power-head{flex-wrap:wrap;gap:6px 10px}
.el-power-head .mid{margin-left:auto}

.el-cands{display:flex;flex-direction:column;gap:3px;padding:2px 0 4px}
.el-cand{display:grid;grid-template-columns:1fr auto 132px;align-items:center;gap:14px;padding:9px 10px;border-radius:10px;text-align:left;color:var(--foreground);transition:background .15s}
.el-cand:hover,.el-cand.on{background:var(--accent)}
.el-cand .l{display:flex;flex-direction:column;gap:1px;min-width:0}
.el-cand .l b{font-size:14.5px;font-weight:600}
.el-cand .l small{font-size:11.5px;color:var(--muted-foreground)}
.el-cand .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.el-cand .bar{height:8px;border-radius:4px;background:var(--secondary);overflow:hidden}
.el-cand .bar i{display:block;height:100%;border-radius:4px}
.el-cand-more{font-size:12px;color:var(--muted-foreground);padding:8px 10px 0;line-height:1.55;border-top:1px solid var(--border);margin-top:6px}

.el-legend .lg{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted-foreground);border:1px solid transparent;transition:all .15s}
.el-legend .lg:hover,.el-legend .lg.on{color:var(--foreground);border-color:var(--border-strong);background:var(--card)}
.el-legend{gap:8px}
.el-bucket .s em{font-style:normal;font-weight:600}
.el-mini{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted-foreground)}
.el-mini i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:0}

.el-th,.el-tr{grid-template-columns:1fr 46px 46px 46px 150px 78px}
.el-tr .split{gap:2px}
.el-tr .btns .btn{width:auto;padding:0 10px}

.el-blocs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.el-bloc{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:14px}
.el-bloc .h{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.el-bloc .h i{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.el-bloc .p{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.el-bloc .p span{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--secondary);color:var(--muted-foreground)}
.el-bloc p{font-size:12.5px;line-height:1.55;color:var(--muted-foreground)}

.el-src{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.el-src a{font-size:11.5px;color:var(--primary-text);text-decoration:underline;text-underline-offset:2px}
.ke-map path:focus-visible{outline:2px solid var(--foreground);outline-offset:1px}

@media(max-width:900px){
  .el-blocs{grid-template-columns:1fr}
  .el-cand{grid-template-columns:1fr auto;gap:8px}
  .el-cand .bar{grid-column:1/-1}
}
@media(max-width:640px){
  .el-th,.el-tr{grid-template-columns:1fr 40px 40px 40px}
  .el-tr .split,.el-tr .btns,.el-th span:nth-last-child(-n+2){display:none}
  .el-tip{max-width:210px;font-size:12px}
  .el-power-head .bl b{font-size:19px}
}


/* ---------- elections v3: Kalshi colour ramp, spacing and grouping ---------- */
/* A lighter neutral base so a faded tint stays a tint and never turns to mud. */
/* Bloc colours are theme-tuned: gold over a cool dark turns olive, so dark mode
   runs a brighter gold against a near-neutral base while light mode keeps the
   deeper one that reads on white. */
:root{--bloc-gov:#f2b52c;--bloc-uag:#e5484d;--bloc-lm:#4b86f7;--map-base:#20242b}
:root.light{--bloc-gov:#d99a10;--bloc-uag:#d93a3a;--bloc-lm:#2563eb;--map-base:#f1f3f7}

/* Tabs read as plain text with an underline, the way Kalshi labels its
   Senate / House / Governor switch, rather than as pills. */
.el-tabs{gap:2px}
.el-tabs button{height:auto;padding:8px 14px 12px;border-radius:0;font-size:17px;font-weight:600;
  color:var(--muted-foreground);border-bottom:2px solid transparent;background:none;letter-spacing:-.015em}
.el-tabs button:hover{color:var(--foreground);background:none}
.el-tabs button.active{color:var(--foreground);background:none;border-bottom-color:var(--foreground)}
.el-top{margin:10px 0 0;padding-bottom:0;border-bottom:1px solid var(--border);align-items:flex-end}

/* Generous section rhythm. */
.el-card{margin:22px 0 30px;padding:10px 26px 22px}
.el-card .el-forecast{padding:26px 8px 18px}
.el-forecast h1{font-size:36px}
.el-map{margin:0 0 34px}
.ke-map{max-width:720px}
.el-map-row{gap:24px}
.el-buckets-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);padding:6px 4px;margin-bottom:34px}
.el-buckets{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0}
.el-bucket{border:none;background:none;border-radius:0;padding:16px 18px;border-right:1px solid var(--border)}
.el-bucket:last-child{border-right:none}
.el-county{margin-bottom:32px}
.el-note{margin-top:34px}
.el-power{margin-top:4px}

@media(max-width:900px){
  .el-buckets{grid-template-columns:repeat(2,1fr)}
  .el-bucket:nth-child(2n){border-right:none}
  .el-bucket:nth-child(-n+2){border-bottom:1px solid var(--border)}
}
@media(max-width:640px){
  .el-tabs{overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px}
  .el-tabs::-webkit-scrollbar{display:none}
  .el-tabs button{font-size:15px;padding:6px 10px 10px;white-space:nowrap}
  .el-card{padding:2px 14px 16px;margin:14px 0 22px}
  .el-forecast h1{font-size:23px}
  .el-buckets{grid-template-columns:1fr}
  .el-bucket{border-right:none;border-bottom:1px solid var(--border)}
  .el-bucket:last-child{border-bottom:none}
}

/* ---------- home: the dedicated Kenya 2027 card ---------- */
.el-promo{display:grid;grid-template-columns:1fr 240px;gap:26px;align-items:center;
  border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);
  padding:22px 26px;margin:4px 0 30px;position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .15s}
.el-promo:hover{border-color:var(--border-strong)}
.el-promo .sec-sub{color:var(--primary-text);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.el-promo h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.el-promo .sub{font-size:13.5px;color:var(--muted-foreground);margin-bottom:14px}
.el-promo .rows{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;max-width:440px}
.el-promo .row{display:grid;grid-template-columns:1fr 44px 96px;align-items:center;gap:10px;font-size:13px}
.el-promo .row .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el-promo .row .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.el-promo .row .b{height:6px;border-radius:3px;background:var(--secondary);overflow:hidden}
.el-promo .row .b i{display:block;height:100%;border-radius:3px}
.el-promo .foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted-foreground)}
.el-promo .mini{width:100%;height:auto;max-height:190px;justify-self:center}
.el-promo .mini path{stroke:var(--card);stroke-width:.8;vector-effect:non-scaling-stroke}
@media(max-width:860px){
  .el-promo{grid-template-columns:1fr;gap:16px;padding:18px}
  .el-promo .mini{max-height:150px;order:-1}
}
@media(max-width:640px){
  .el-promo{margin:0 0 20px}
  .el-promo h2{font-size:19px}
  .el-promo .row{grid-template-columns:1fr 42px}
  .el-promo .row .b{display:none}
}


/* ---------- forecast card and map side by side ---------- */
.el-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:26px;align-items:start;margin:22px 0 34px}
.el-split .el-card{margin:0}   /* hug the content; the map column is taller */
.el-split .el-map{margin:0}
/* in the split the map has its own column, so the small-county list sits under it */
.el-split .el-forecast h1{font-size:29px}
.el-split .el-cand{grid-template-columns:1fr auto 84px;gap:10px}
.el-split .el-legend{justify-content:flex-start}

@media(max-width:1180px){
  .el-split{grid-template-columns:minmax(0,1fr);gap:18px}
  .el-split .el-map-row{flex-direction:row;align-items:flex-start;gap:18px}
  .el-split .el-small{display:block;flex:0 0 190px;max-height:520px;overflow:auto;align-self:center}
  .el-split .ke-map{max-width:720px}
  .el-split .el-forecast h1{font-size:34px}
  .el-split .el-cand{grid-template-columns:1fr auto 132px}
}
@media(max-width:860px){
  .el-split .el-map-row{flex-direction:column;align-items:stretch}
  .el-split .el-small{display:grid;grid-template-columns:repeat(2,1fr);flex:none;max-height:none}
}
@media(max-width:640px){
  .el-split{margin:14px 0 22px}
  .el-split .el-forecast h1{font-size:23px}
  .el-split .el-small{grid-template-columns:1fr}
}


/* ---------- topic hubs: related categories behind their own photo ---------- */
.hub-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:16px 0 12px}
.hub-card{position:relative;display:block;height:118px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--secondary) center/cover no-repeat;border:1px solid var(--border);
  text-align:left;padding:0;transition:transform .2s var(--ease-out),border-color .15s}
.hub-card:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.hub-card .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,10,.94) 12%,rgba(6,7,10,.72) 48%,rgba(6,7,10,.34))}
.hub-card .in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:12px 13px;gap:1px}
.hub-card .k{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-card .m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-card b{font-size:16px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.15}
.hub-card .m{font-size:11px;color:rgba(255,255,255,.72);margin-top:2px}
.hub-card:first-child{outline:1px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:-1px}

/* the platform numbers move to one quiet line under the hubs */
.stat-line-x{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;color:var(--muted-foreground);margin:0 0 24px;padding:0 2px}
.stat-line-x b{color:var(--foreground);font-weight:600;font-variant-numeric:tabular-nums}

@media(max-width:1100px){.hub-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
  .hub-row{grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0 10px}
  .hub-card{height:96px}
  .hub-card b{font-size:14px}
  .hub-card .m{font-size:10.5px}
  .stat-line-x{gap:4px 14px;font-size:11.5px;margin-bottom:16px}
}


/* =====================================================================
   GRADIENT OVERLAYS — an absolutely positioned overlay resolves inset:0
   against the PADDING box, so on a bordered element the background image
   kept painting under the 1px border and showed as a bright hairline along
   the bottom edge. Clipping the image to the padding box removes it, and
   the border then reads as the hairline it was meant to be.
   ===================================================================== */
.hub-card,
.news-page .lead,
.article-page .lead,
.movie-card .card-banner,
.news-hero .img,
.news-card .img,
.article .hero{background-clip:padding-box}

/* The overlay must cover the border box, not the padding box: inset:0 leaves the
   corners short of the inherited radius and the photo shows through as a bright
   notch. overflow:hidden on the parent trims the extra pixel back to the inner
   curve, so the fill is exact and no corner is left open. */
.hub-card .ov,
.news-page .lead::after,
.article-page .lead::after{inset:-1px;border-radius:inherit}


/* =====================================================================
   SEARCH PANEL — focusing the field drops browse filters and topic tiles;
   typing swaps them for live results.  Modelled on Polymarket's.
   ===================================================================== */
.search{position:relative}
.sp{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:120;max-height:min(70vh,560px);overflow:auto;
  background:var(--popover);border:1px solid var(--border-strong);border-radius:16px;padding:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);overscroll-behavior:contain}
.sp-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);padding:8px 8px 7px}
.sp-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 6px 6px}
.sp-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;
  border:1px solid var(--border-strong);background:transparent;color:var(--foreground);font-size:13px;font-weight:600;white-space:nowrap}
.sp-chip svg{width:14px;height:14px;color:var(--muted-foreground)}
.sp-chip:hover,.sp-chip.on{background:var(--accent);border-color:var(--foreground)}
.sp-topics{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 6px 6px}
.sp-topic{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;background:var(--secondary);
  color:var(--foreground);font-size:14px;font-weight:600;text-align:left}
.sp-topic:hover,.sp-topic.on{background:var(--accent)}
.sp-topic .th{width:34px;height:34px;border-radius:9px;flex-shrink:0;background:var(--muted) center/cover no-repeat;background-clip:padding-box}
.sp-topic .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:11px;text-align:left;color:var(--foreground)}
.sp-row:hover,.sp-row.on{background:var(--accent)}
.sp-row .icon-sq{width:26px;height:26px;border-radius:7px;flex-shrink:0}
.sp-row .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sp-row .l b{font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-row .l small{font-size:11.5px;color:var(--muted-foreground)}
.sp-row .p{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;color:var(--muted-foreground)}
.sp-nimg{width:34px;height:26px;border-radius:6px;flex-shrink:0;background:var(--muted) center/cover no-repeat;background-clip:padding-box}
.sp-empty{padding:20px 12px;text-align:center;font-size:13px;color:var(--muted-foreground)}
.sp-all{display:block;width:100%;margin-top:6px;padding:11px;border-radius:11px;background:var(--secondary);
  font-size:13px;font-weight:600;color:var(--foreground)}
.sp-all:hover,.sp-all.on{background:var(--accent)}
@media(max-width:1000px){.sp{left:auto;right:0;width:min(460px,86vw)}}


/* ---------- featured card: live chatter scrolling under the outcomes ---------- */
.feat-left{display:flex;flex-direction:column;min-width:0}
.feat-feed{position:relative;flex:1;min-height:112px;max-height:150px;overflow:hidden;margin-top:14px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.ff-track{display:flex;flex-direction:column;gap:11px;animation:ff-scroll 34s linear infinite;will-change:transform}
.feat-feed:hover .ff-track{animation-play-state:paused}
@keyframes ff-scroll{from{transform:translateY(0)}to{transform:translateY(-100%)}}
.ff-row{display:flex;gap:9px;align-items:flex-start}
.ff-row .av{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff}
.ff-row .l{min-width:0;display:flex;flex-direction:column;gap:1px}
.ff-row .l b{font-size:12px;font-weight:600}
.ff-row .t{font-size:12.5px;line-height:1.4;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ff-row .t.bet{color:var(--foreground);font-weight:500}
@media(prefers-reduced-motion:reduce){
  .feat-feed{overflow-y:auto;max-height:150px;mask-image:none;-webkit-mask-image:none}
  .ff-track{animation:none}
  .feat-feed .ff-track[aria-hidden="true"]{display:none}
}
@media(max-width:1100px){.feat-feed{max-height:120px}}
@media(max-width:860px){.feat-feed{display:none}}


/* ---------- search dropdown: Markets / Profiles tabs, Polymarket rows ---------- */
.sp-tabs{display:flex;gap:4px;padding:4px 6px 8px}
.sp-tabs button{height:32px;padding:0 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--muted-foreground)}
.sp-tabs button:hover{color:var(--foreground)}
.sp-tabs button.on{background:var(--secondary);color:var(--foreground)}
.sp-tabs em{font-style:normal;font-weight:500;opacity:.65;margin-left:3px}
.sp-body{display:flex;flex-direction:column;gap:1px}
.sp-row .pc{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;text-align:right}
.sp-row .pc b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.sp-row .pc small{font-size:11.5px;color:var(--muted-foreground);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-all{margin-top:8px;background:none;color:var(--primary-text);text-align:left;padding:10px 12px;font-size:13.5px}
.sp-all:hover,.sp-all.on{background:var(--accent)}

/* =====================================================================
   SEARCH RESULTS PAGE — the Polymarket results layout: a counted headline,
   rows carrying volume, liquidity and the leading outcome, and a sticky
   sidebar of sort and status filters.
   ===================================================================== */
.sr-page{padding-bottom:48px}
.sr-layout{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:28px;align-items:start;margin-top:18px}
.sr-main{min-width:0}
.sr-row{min-width:0}
.sr-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.sr-head h1{font-size:19px;font-weight:600;letter-spacing:-.015em}
.sr-head h1 span{color:var(--muted-foreground);font-weight:400}
.sr-list{display:flex;flex-direction:column}
.sr-row{display:flex;align-items:center;gap:14px;padding:14px 6px;border-bottom:1px solid var(--border);color:var(--foreground);transition:background .12s}
.sr-row:hover{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.sr-row .icon-sq{width:38px;height:38px;border-radius:9px;flex-shrink:0}
.sr-row .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-row .crumb{font-size:11.5px;color:var(--muted-foreground)}
.sr-row .t{font-size:14.5px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-row .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--muted-foreground);margin-top:2px}
.sr-row .meta .hot{color:var(--amber)}
.sr-row .pc{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;text-align:right;min-width:74px}
.sr-row .pc b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sr-row .pc small{font-size:11px;color:var(--muted-foreground);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-row .chev{color:var(--muted-foreground);flex-shrink:0;display:flex}
.sr-row .chev svg{width:16px;height:16px}
.sr-more{display:block;margin:22px auto 0;padding:11px 22px;border-radius:999px;border:1px solid var(--border-strong);
  background:transparent;color:var(--foreground);font-size:13.5px;font-weight:600}
.sr-more:hover{background:var(--accent)}

.sr-side{position:sticky;top:calc(var(--header-h) + var(--nav-h) + 52px);border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--card);padding:12px}
.sr-find{display:flex;align-items:center;gap:8px;height:38px;padding:0 11px;border-radius:10px;background:var(--secondary);
  color:var(--muted-foreground);margin-bottom:12px}
.sr-find svg{width:15px;height:15px;flex-shrink:0}
.sr-find input{flex:1;min-width:0;background:none;border:0;outline:none;font:inherit;font-size:13.5px;color:var(--foreground)}
.sr-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);padding:6px 4px 8px}
.sr-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.sr-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;
  border:1px solid var(--border-strong);background:transparent;color:var(--foreground);font-size:12.5px;font-weight:600;white-space:nowrap}
.sr-pill svg{width:13px;height:13px;color:var(--muted-foreground)}
.sr-pill:hover{border-color:var(--foreground)}
.sr-pill.on{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.sr-pill.on svg{color:currentColor}
.sr-clear{display:block;width:100%;margin-top:10px;padding:9px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted-foreground)}
.sr-clear:hover{background:var(--accent);color:var(--foreground)}

.sr-news{margin-top:34px;padding-top:20px;border-top:1px solid var(--border)}
.sr-nrow{display:flex;align-items:center;gap:12px;padding:9px 4px;border-radius:10px;color:var(--foreground)}
.sr-nrow:hover{background:var(--accent)}
.sr-nrow .im{width:52px;height:38px;border-radius:8px;flex-shrink:0;background:var(--secondary) center/cover no-repeat;background-clip:padding-box}
.sr-nrow .l{min-width:0;display:flex;flex-direction:column;gap:1px}
.sr-nrow .l b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-nrow .l small{font-size:11.5px;color:var(--muted-foreground)}

@media(max-width:900px){
  .sr-layout{grid-template-columns:minmax(0,1fr);gap:18px}   /* plain 1fr cannot shrink below min-content */
  .sr-side{position:static;order:-1}
  .sr-row .meta span:nth-child(n+4){display:none}
}
@media(max-width:640px){
  .sr-row{gap:10px;padding:12px 2px}
  .sr-row .icon-sq{width:32px;height:32px}
  .sr-row .t{font-size:13.5px}
  .sr-row .pc b{font-size:16px}
  .sr-row .chev{display:none}
  .sr-head h1{font-size:16px}
}


/* =====================================================================
   SCROLLBAR — a thin themed bar instead of the OS default, so the page
   always shows where you are. Elements with their own scrollbar rules
   (the ticker, the news row) are more specific and still win.
   ===================================================================== */
html{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;
  border:3px solid var(--background);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted-foreground);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* =====================================================================
   BACK TO TOP — appears past a screenful; the ring reads out how far down
   the page you are, so one control both reports and navigates.
   ===================================================================== */
.wz-top{position:fixed;right:20px;bottom:24px;z-index:70;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border-strong);color:var(--foreground);
  box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s,background .15s}
.wz-top.on{opacity:1;visibility:visible;transform:none}
.wz-top:hover{background:var(--accent)}
.wz-top:active{transform:scale(.94)}
.wz-top .ar{width:18px;height:18px;position:relative;z-index:2}
.wz-top .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.wz-top .ring circle{fill:none;stroke-width:2.5}
.wz-top .ring .bg{stroke:var(--border)}
.wz-top .ring .fg{stroke:var(--primary);stroke-linecap:round;transition:stroke-dashoffset .1s linear}

/* clear the mobile bottom nav, and the trade bar where a market page has one */
@media(max-width:640px){
  .wz-top{right:14px;bottom:calc(84px + env(safe-area-inset-bottom));width:42px;height:42px}
  .wz-top .ar{width:16px;height:16px}
}
@media(max-width:860px){
  body:has(.mobile-trade-bar) .wz-top{bottom:calc(136px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .wz-top{transition:opacity .15s linear,visibility .15s;transform:none}
  .wz-top.on{transform:none}
  .wz-top .ring .fg{transition:none}
}
@media print{.wz-top{display:none}}

/* =====================================================================
   FOOTBALL HUB — the sport hub, laid out to the same depth as the
   elections page. A league switcher, a headline forecast, a title-race
   bar, then a sortable board of projected points and probabilities.
   ===================================================================== */
.fb-page{padding-bottom:48px}

/* ---- league switcher ---- */
.fb-leagues{display:flex;gap:8px;overflow-x:auto;padding:16px 0 4px;margin:0 -4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fb-leagues::-webkit-scrollbar{display:none}
.fb-lg{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 15px;border-radius:12px;border:1px solid var(--border);background:var(--card);
  color:var(--foreground);text-align:left;transition:border-color .14s,background .14s,transform .14s var(--ease-out)}
.fb-lg:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.fb-lg .fl{font-size:15px;line-height:1}
.fb-lg .n{font-size:13.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.fb-lg .c{font-size:10.5px;color:var(--muted-foreground);white-space:nowrap}
.fb-lg.on{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.fb-lg.on .c{color:color-mix(in srgb,var(--primary-foreground) 72%,transparent)}

/* ---- headline card ---- */
.fb-card{padding:22px 24px 20px}
.fb-live{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.12em;color:var(--muted-foreground);margin-bottom:12px}
.fb-head h1{font-size:26px;line-height:1.18;font-weight:700;letter-spacing:-.03em;max-width:22ch}
.fb-sub{font-size:13px;color:var(--muted-foreground);margin-top:9px;max-width:64ch;line-height:1.55}
.fb-facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin:16px 0 14px}
.fb-facts span{display:flex;flex-direction:column;gap:1px}
.fb-facts small{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
.fb-facts b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fb-head .btn svg{width:15px;height:15px}

/* ---- title race bar ---- */
.fb-race{margin-top:20px}
.fb-race .bar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--secondary);gap:1px}
.fb-race .bar i{display:block;min-width:2px;transition:filter .12s}
.fb-race .bar i:hover{filter:brightness(1.25)}
.fb-race .bar .rest{background:var(--border-strong)}
.fb-race .key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px}
.fb-race .key button{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--muted-foreground);background:none;padding:2px 0}
.fb-race .key button:hover{color:var(--foreground)}
.fb-race .key i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.fb-race .key b{font-variant-numeric:tabular-nums;color:var(--foreground);font-weight:650}

/* ---- view tabs ---- */
.fb-views{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:4px 0;overflow-x:auto;scrollbar-width:none}
.fb-views::-webkit-scrollbar{display:none}
.fb-views button{flex:0 0 auto;padding:11px 14px;font-size:13.5px;font-weight:600;background:none;
  color:var(--muted-foreground);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.fb-views button:hover{color:var(--foreground)}
.fb-views button.active{color:var(--foreground);border-bottom-color:var(--primary)}

/* ---- the board ---- */
.fb-table{margin-top:6px}
.fb-tr{display:grid;grid-template-columns:26px minmax(0,1.35fr) 64px minmax(120px,1fr) 74px 82px 88px;
  align-items:center;gap:10px;padding:8px;border-bottom:1px solid var(--border);border-radius:8px;
  position:relative;transition:background .12s}
.fb-tr:not(.fb-th):hover{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.fb-th{border-bottom:1px solid var(--border-strong);padding-bottom:9px}
.fb-th>*{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted-foreground);background:none;text-align:left}
.fb-th .c{text-align:right;justify-content:flex-end}
.fb-th .srt{cursor:pointer;transition:color .12s}
.fb-th .srt:hover{color:var(--foreground)}
.fb-th .srt.on{color:var(--primary-text)}
.fb-tr .pos{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted-foreground);text-align:center}
.fb-tr .club{display:flex;align-items:center;gap:9px;min-width:0;background:none;color:var(--foreground);text-align:left;padding:0}
.fb-tr .club i{width:4px;height:22px;border-radius:2px;flex-shrink:0}
.fb-tr .club b{font-size:14px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-tr .club small{font-size:10.5px;color:var(--muted-foreground);flex-shrink:0}
.fb-tr .club:hover b{color:var(--primary-text)}
.fb-tr .pts{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}

/* the qualification and relegation edges, marked the way a real table marks them */
.fb-tr.cont{box-shadow:inset 3px 0 0 var(--yes)}
.fb-tr.releg{box-shadow:inset 3px 0 0 var(--no)}

/* percentile band: where a season actually lands 8 times in 10 */
.fb-tr .rng{display:flex;align-items:center}
.fb-tr .track{position:relative;width:100%;height:8px;border-radius:4px;background:var(--secondary)}
.fb-tr .band{position:absolute;top:0;height:8px;border-radius:4px;opacity:.42}
.fb-tr .dot{position:absolute;top:-1px;width:10px;height:10px;border-radius:50%;margin-left:-5px;
  border:2px solid var(--card);box-sizing:content-box}

.fb-tr .p{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  background:none;color:var(--foreground);padding:2px 0}
.fb-tr .p b{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.fb-tr .p u{display:block;height:3px;border-radius:2px;text-decoration:none;min-width:2px;opacity:.75}
.fb-tr .p:hover b{color:var(--primary-text)}
.fb-tr .p:hover u{opacity:1}

/* ---- title race cards ---- */
.fb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;margin-top:16px}
.fb-rc{display:flex;flex-direction:column;gap:7px;padding:14px;border-radius:var(--radius-lg);
  border:1px solid var(--border);background:var(--card);text-align:left;position:relative;
  transition:border-color .14s,transform .14s var(--ease-out)}
.fb-rc:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.fb-rc .rk{position:absolute;top:12px;right:13px;font-size:11px;font-weight:700;color:var(--muted-foreground)}
.fb-rc .h{display:flex;align-items:center;gap:8px;min-width:0;padding-right:20px}
.fb-rc .h i{width:4px;height:16px;border-radius:2px;flex-shrink:0}
.fb-rc .h b{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-rc .big{font-size:28px;font-weight:750;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.fb-rc .bar{display:block;height:5px;border-radius:3px;background:var(--secondary);overflow:hidden}
.fb-rc .bar i{display:block;height:100%;border-radius:3px}
.fb-rc .m{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted-foreground)}

/* ---- fixtures ---- */
.fb-fixtures{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.fb-fix{display:grid;grid-template-columns:56px minmax(0,1fr) 168px;align-items:center;gap:14px;
  padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--card);
  text-align:left;color:var(--foreground);position:relative;overflow:hidden;
  transition:border-color .14s,transform .14s var(--ease-out)}
.fb-fix:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.fb-fix .when{display:flex;flex-direction:column;gap:1px}
.fb-fix .when b{font-size:12.5px;font-weight:700}
.fb-fix .when small{font-size:10.5px;color:var(--muted-foreground);white-space:nowrap}
.fb-fix .sides{display:flex;align-items:center;gap:10px;min-width:0}
.fb-fix .side{display:flex;align-items:center;gap:7px;min-width:0;font-size:13.5px;font-weight:600}
.fb-fix .side i{width:4px;height:16px;border-radius:2px;flex-shrink:0}
.fb-fix .side:last-of-type{justify-content:flex-end}
.fb-fix .v{font-size:11px;color:var(--muted-foreground);flex-shrink:0}
.fb-fix .odds{display:flex;gap:6px;justify-content:flex-end}
.fb-fix .o{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:50px;
  padding:5px 8px;border-radius:9px;background:var(--secondary)}
.fb-fix .o small{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--muted-foreground)}
.fb-fix .o b{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.fb-fix:hover .o{background:var(--accent)}
.fb-fix .split{position:absolute;left:0;right:0;bottom:0;display:flex;height:3px;gap:1px}
.fb-fix .split i{display:block;min-width:2px}

/* ---- head to head ---- */
.fb-cmp{margin-top:16px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);padding:18px 20px 20px}
.fb-cmp .pick{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.fb-cmp .s{display:block;border:1px solid var(--border-strong);border-radius:11px;padding:2px;border-left-width:4px}
.fb-cmp .s:last-of-type{border-left-width:1px;border-right-width:4px}
.fb-sel{width:100%;background:none;border:0;outline:none;font:inherit;font-size:14px;font-weight:650;
  color:var(--foreground);padding:8px 10px;cursor:pointer;-webkit-appearance:none;appearance:none}
.fb-sel option{background:var(--card);color:var(--foreground)}
.fb-cmp .vs{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)}
.fb-cmp .rows{margin:18px 0 4px;display:flex;flex-direction:column;gap:12px}
.fb-cmp .mr{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(96px,auto) minmax(0,1fr) 56px;
  align-items:center;gap:10px}
.fb-cmp .lv,.fb-cmp .rv{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted-foreground)}
.fb-cmp .lv{text-align:right}
.fb-cmp .lv.win,.fb-cmp .rv.win{color:var(--foreground)}
.fb-cmp .k{font-size:11px;font-weight:600;text-align:center;color:var(--muted-foreground);white-space:nowrap}
.fb-cmp .tr{display:flex;justify-content:flex-end;height:7px;border-radius:4px;background:var(--secondary);overflow:hidden}
.fb-cmp .tr.r{justify-content:flex-start}
.fb-cmp .tr i{display:block;height:100%;border-radius:4px;min-width:2px}
.fb-cmp .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

@media(max-width:900px){
  .fb-tr{grid-template-columns:22px minmax(0,1.3fr) 52px 66px 74px 78px;gap:8px}
  .fb-tr .rng,.fb-th .rng{display:none}
  .fb-fix{grid-template-columns:48px minmax(0,1fr);gap:10px}
  .fb-fix .odds{grid-column:1/-1;justify-content:space-between}
  .fb-fix .o{flex:1}
}
@media(max-width:640px){
  .fb-card{padding:18px 16px 16px}
  .fb-head h1{font-size:21px}
  .fb-facts{gap:8px 18px}
  .fb-facts b{font-size:13.5px}
  .fb-tr{grid-template-columns:20px minmax(0,1fr) 60px 66px;gap:7px;padding:8px 4px}
  .fb-tr .pts,.fb-th .pts,.fb-tr>.c:nth-last-child(1),.fb-th>.c:nth-last-child(1){display:none}
  .fb-tr .club b{font-size:13px}
  .fb-tr .club small{display:none}
  .fb-cmp{padding:14px}
  .fb-cmp .mr{grid-template-columns:46px minmax(0,1fr) minmax(74px,auto) minmax(0,1fr) 46px;gap:6px}
  .fb-cmp .k{font-size:10px;white-space:normal}
  .fb-grid{grid-template-columns:1fr 1fr;gap:8px}
  .fb-rc{padding:11px}
  .fb-rc .big{font-size:22px}
  .fb-rc .m{flex-direction:column;gap:1px}
}
@media(prefers-reduced-motion:reduce){
  .fb-lg:hover,.fb-rc:hover,.fb-fix:hover{transform:none}
}

/* =====================================================================
   FEATURED CARD — the bayse.markets arrangement. A compact "n of m" pager
   sits top right where the dots and arrows used to live below the card;
   the outcome rows run down the left over the resolution terms; the legend
   and chart hold the right; and the footer carries an icon meta strip
   opposite the brand and the two actions.
   ===================================================================== */
.feat-pager{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;height:32px;padding:0 4px;
  border:1px solid var(--border);border-radius:999px;background:var(--card)}
.feat-pager span{font-size:12.5px;font-weight:600;color:var(--muted-foreground);
  font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}
.feat-pager button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:none;color:var(--muted-foreground);transition:background .13s,color .13s}
.feat-pager button:hover{background:var(--accent);color:var(--foreground)}
.feat-pager svg{width:14px;height:14px}

/* outcome rows: a colour swatch, the name, the price hard right */
.feat-rows .r{cursor:pointer;transition:padding-left .14s var(--ease-out)}
.feat-rows .r:not(.yn):hover{padding-left:4px}
.feat-rows .r:not(.yn):hover b{color:var(--primary-text)}
.feat-rows .r .nm{display:flex;align-items:center;gap:9px;min-width:0}
.feat-rows .r .nm .sw{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.feat-rows .r .nm .sw.yes{background:var(--yes)}
.feat-rows .r .nm .sw.no{background:var(--no)}
.feat-rows .r.yn{cursor:default}
.feat-rows .r.yn:hover{padding-left:0}

/* the resolution terms, printed under the outcomes the way bayse does */
.feat-rules{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--muted-foreground)}
.feat-rules b{color:var(--primary-text);font-weight:650}
.feat-rules p{margin-top:10px}

/* footer: trades, volume and close date as an icon strip */
.feat-foot{gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--border)}
.feat-foot .fm{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;min-width:0}
.feat-foot .fm span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.feat-foot .fm svg{width:13px;height:13px;flex-shrink:0;opacity:.8}
.feat-foot .fa{display:flex;align-items:center;gap:4px;flex-shrink:0}
.feat-foot .fa .brand{margin-right:6px}
.fb-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  background:none;color:var(--muted-foreground);transition:background .13s,color .13s}
.fb-ic:hover{background:var(--accent);color:var(--foreground)}
.fb-ic.on{color:var(--primary-text)}
.fb-ic svg{width:15px;height:15px}

@media(max-width:640px){
  .feat-pager{height:28px}
  .feat-pager span{font-size:11.5px}
  .feat-rules{font-size:12px}
  .feat-foot .fm{gap:3px 12px}
  .feat-foot .fm span{font-size:11.5px}
}

/* The board's column headings are league-specific, so their width is not
   knowable in advance: "Champions League" and "CAF places" both land in the
   same slot. Let them wrap and tighten the tracking below desktop, rather
   than letting a long label spill over the column beside it. */
.fb-th>*{min-width:0;white-space:normal;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:900px){
  .fb-th>*{font-size:10px;letter-spacing:.03em}
}

/* Balance the fixture row around the "v" so the two clubs read as a pairing
   rather than clumping against the left edge of a wide row. */
.fb-fix .sides{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.fb-fix .side{justify-content:flex-end}
.fb-fix .side:last-of-type{justify-content:flex-start}

/* The left column carries rows, rules and the live feed, so it is taller than
   a fixed-height chart and left a dead band down the right of the card. Let
   the chart stretch to whatever height the outcomes need instead. */
.feat-body{align-items:stretch}
.feat-chart{display:flex;flex-direction:column}
/* The chart draws with preserveAspectRatio=none, so stretching it to the full
   column height distorts the axis labels. Give it a taller fixed box instead
   and cap the feed, which closes most of the gap without warping any text. */
.feat-chart svg{flex:none;height:248px}
.feat-feed{max-height:126px}
@media(max-width:1100px){.feat-chart svg{height:210px}}
@media(max-width:860px){.feat-chart svg{height:190px}}

/* =====================================================================
   HOME SIDEBAR — the Polymarket arrangement. Two promo cards carrying a
   gradient wash and a pill call to action, market thumbnails clipped at the
   card's top edge, then a bolder Hot topics list and one wide Explore all.
   ===================================================================== */
.promo{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:14px;padding:18px 18px 17px;border-radius:var(--radius-xl);
  border:1px solid var(--border);background:var(--card);color:var(--foreground);
  transition:border-color .16s,transform .18s var(--ease-out)}
.promo:hover{border-color:var(--border-strong);transform:translateY(-2px)}
/* the wash sits on the border box so no corner is left uncovered */
.promo::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 130% at 6% 0%,color-mix(in srgb,var(--primary) 30%,transparent),transparent 58%)}
.promo.violet::before{background:linear-gradient(102deg,color-mix(in srgb,var(--brand-accent) 44%,transparent) 0%,
  color-mix(in srgb,var(--brand-accent) 12%,transparent) 34%,transparent 66%)}
.promo>*{position:relative;z-index:2}
.promo .l{display:flex;flex-direction:column;gap:5px;min-width:0}
.promo .l b{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.promo .l b svg{width:17px;height:17px;flex-shrink:0;color:var(--primary-text)}
.promo .l span{font-size:12.5px;line-height:1.5;color:var(--muted-foreground)}
.promo .cta{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:36px;padding:0 16px;
  border-radius:10px;font-size:13px;font-weight:650;white-space:nowrap;
  background:var(--foreground);color:var(--background);transition:opacity .14s}
.promo:hover .cta{opacity:.88}
.promo.violet .cta{background:var(--brand-accent);color:#fff}

/* thumbnails clipped at the top edge, the way Polymarket peeks its tokens */
.promo .pics{position:absolute;top:-16px;right:14px;display:flex;gap:7px;z-index:1;pointer-events:none;opacity:.9}
.promo .pics .pic{display:block}
.promo .pics .icon-sq{width:38px;height:38px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.promo .pics .p0{transform:rotate(-9deg) translateY(3px)}
.promo .pics .p1{transform:rotate(4deg)}
.promo .pics .p2{transform:rotate(11deg) translateY(4px)}
.promo:has(.pics) .l{padding-top:14px}

/* ---- hot topics ---- */
.hot-h{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:700;letter-spacing:-.02em;
  color:var(--foreground);margin-bottom:8px;padding:0 2px}
.hot .hot-h svg{width:16px;height:16px;color:var(--muted-foreground)}
.hot-h:hover svg{color:var(--foreground)}
.hot-row{gap:10px;padding:9px 6px}
.hot-row .rk{width:14px;font-size:12.5px;font-weight:600;color:var(--primary-text);text-align:left}
.hot-row .nm{font-weight:600}
.hot-row .vv{font-size:12.5px;font-weight:600;color:var(--primary-text);white-space:nowrap}
.hot-row .fl{font-size:11px;line-height:1;flex-shrink:0}
.expand-btn{height:48px;font-size:14px;font-weight:600}

@media(max-width:640px){
  .promo{padding:15px;gap:10px}
  .promo .l b{font-size:14.5px}
  .promo .l span{font-size:12px}
  .promo .cta{height:33px;padding:0 13px;font-size:12.5px}
  .promo .pics{right:10px}
  .promo .pics .icon-sq{width:32px;height:32px}
}

/* ---- competition crests -----------------------------------------------
   The switcher used a flag emoji, which Windows cannot draw: a regional
   indicator pair falls back to the bare letters, so every chip read "KE",
   "ES", "IT". Each competition now carries its own crest instead, drawn
   from its national or competition colours. */
.fb-lg{flex-direction:row;align-items:center;gap:10px;padding:8px 14px 8px 10px}
.fb-lg .crest{display:block;width:28px;height:28px;flex-shrink:0}
.fb-lg .crest svg{display:block;width:100%;height:100%}
.fb-lg .t{display:flex;flex-direction:column;gap:1px;min-width:0}
.fb-lg.on .crest{filter:drop-shadow(0 0 0 transparent)}

.fb-live .crest{display:block;width:22px;height:22px;flex-shrink:0;margin-right:2px}
.fb-live .crest svg{display:block;width:100%;height:100%}

@media(max-width:640px){
  .fb-lg{padding:7px 12px 7px 9px;gap:8px}
  .fb-lg .crest{width:24px;height:24px}
}

/* The navbar no longer carries a balance readout, so Log out sits beside the
   account menu where the numbers used to be. */
/* Log out is a real button now, but a neutral one: the blue outline belongs to
   Deposit, and two primary-looking controls side by side compete. */
.hdr-out{white-space:nowrap;padding:0 14px;margin-left:2px;
  border-color:var(--border-strong);color:var(--muted-foreground)}
.hdr-out:hover:not(:disabled){background:var(--accent);color:var(--foreground);border-color:var(--foreground)}
@media(max-width:900px){.hdr-out{display:none}}

/* =====================================================================
   HOW IT WORKS — a four-step walkthrough. Each step plays a small scene
   built from the platform's own components rather than a stock drawing,
   so what the walkthrough shows is what the product does. The scenes are
   CSS keyframes; replacing the stage restarts them, and the reduced-motion
   block at the bottom turns every one of them off.
   ===================================================================== */
.dialog.tour{max-width:448px;width:calc(100vw - 32px);padding:0;overflow:hidden;position:relative;border-radius:24px}
.tour-x{position:absolute;top:12px;right:12px;z-index:5;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--card) 72%,transparent);
  color:var(--muted-foreground);backdrop-filter:blur(6px)}
.tour-x:hover{background:var(--accent);color:var(--foreground)}
.tour-x svg{width:16px;height:16px}

/* the stage holds still and cross-fades; the copy slides past it */
.tour-stage{position:relative;height:236px;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%,color-mix(in srgb,var(--primary) 22%,var(--card)),var(--card) 72%);
  border-bottom:1px solid var(--border)}
.tour-stage.lit{animation:tr-fade .34s var(--ease-out)}
/* The order panel is a tall component; the stage sizes to whichever screen it
   is holding and the card's height easing carries the difference. */
.tour-stage[data-art="side"]{height:306px}
.tour-stage[data-art="paid"]{height:250px}
.tour-copy{padding:20px 24px 2px;display:flex;flex-direction:column;gap:7px}
.tour-copy.in-right{animation:tr-from-right .42s cubic-bezier(.2,.8,.2,1) both}
.tour-copy.in-left{animation:tr-from-left .42s cubic-bezier(.2,.8,.2,1) both}
.tour-copy h3{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.25}
.tour-copy p{font-size:13.5px;line-height:1.6;color:var(--muted-foreground)}
.tour-copy .legal{font-size:11.5px;color:var(--muted-foreground);opacity:.8;margin-top:2px}
.tour-copy .legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* one forward path, the way Polymarket runs it: a single full-width button */
.tour-foot{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 24px 24px}
.tour-dots{display:flex;gap:6px}
.tour-dots button{width:7px;height:7px;border-radius:999px;background:var(--border-strong);padding:0;
  transition:width .28s var(--ease-out),background .2s}
.tour-dots button:hover{background:var(--muted-foreground)}
.tour-dots button.on{width:22px;background:var(--primary)}
.tour-go{width:100%;height:44px;border-radius:10px;font-size:14px;font-weight:650;
  transition:transform .15s var(--ease-out)}
.tour-go:active{transform:scale(.97)}

/* The signed-out top right, in Polymarket's order and weighting: How it works
   carries no chrome at all, Log in is outlined, Sign up is the only filled
   control, and the menu stays a bare icon. */
.hdr-how{gap:7px;color:var(--foreground);font-weight:600;padding:0 12px}
.hdr-how svg{width:16px;height:16px;color:var(--muted-foreground)}
.hdr-how:hover{background:var(--accent)}
.hdr-login{border-color:var(--border-strong);color:var(--foreground);font-weight:600}
.hdr-login:hover:not(:disabled){background:var(--accent);border-color:var(--foreground)}
@media(max-width:1000px){.hdr-how{display:none}}
.tour-pill{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;align-items:center;gap:4px;
  padding:11px 12px calc(11px + env(safe-area-inset-bottom));background:var(--card);
  border-top:1px solid var(--border);border-radius:14px 14px 0 0;box-shadow:0 -6px 22px rgba(0,0,0,.3);
  transform:translateY(110%);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.tour-pill.up{transform:none}
.tour-pill .go{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:650;color:var(--primary-text);background:none;padding:6px}
.tour-pill .go svg{width:16px;height:16px}
.tour-pill .x{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  color:var(--muted-foreground);background:none;flex-shrink:0}
.tour-pill .x svg{width:15px;height:15px}
@media(max-width:1000px){
  .tour-pill{display:flex;bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media(max-width:640px){
  /* on a phone the card becomes a sheet, the way theirs does */
  .dialog.tour{width:100%;max-width:none;border-radius:22px 22px 0 0;position:fixed;left:0;right:0;bottom:0}
}

@keyframes tr-fade{from{opacity:0}to{opacity:1}}
@keyframes tr-from-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes tr-from-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* =====================================================================
   WALKTHROUGH SCENES — each panel is the product's own markup, scaled to
   fit the stage. Nothing here restyles a component; the rules below only
   place it, size it, and drive the pointer and the state it changes.
   ===================================================================== */
.tr-ui{position:absolute;left:50%;top:50%;transform-origin:center;pointer-events:none}
.tr-ui .btn,.tr-ui button{pointer-events:none}

/* the pointer that walks through each panel */
.tr-cursor{position:absolute;width:19px;height:19px;pointer-events:none;z-index:6;background:var(--foreground);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 2l14 8.5-6 1.2 3.4 6.6-2.8 1.5-3.4-6.6L5 18z'/></svg>");
          mask:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 2l14 8.5-6 1.2 3.4 6.6-2.8 1.5-3.4-6.6L5 18z'/></svg>");
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}

/* ---- 1. the market grid ---- */
.ui-pick{display:grid;grid-template-columns:300px 300px;gap:16px;width:616px;
  transform:translate(-50%,-50%) scale(.6)}
.tr-card{min-height:340px}
.tr-card h3{font-size:17px;line-height:1.3}
.tr-card.c1{animation:tr-hover 3.4s 1.05s var(--ease-out) infinite}
.tr-spark{width:100%;height:44px;margin:6px 0 8px}
.tr-spark path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.tr-spark.up path{stroke:var(--yes)}
.tr-spark.down path{stroke:var(--no)}
.c-pick{left:60%;top:72%;opacity:0;animation:tr-walk 3.4s .9s ease-in-out infinite}
@keyframes tr-hover{0%,100%{transform:none;border-color:var(--border)}
  24%,66%{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 16px 34px rgba(0,0,0,.4)}}
@keyframes tr-walk{0%{opacity:0;transform:translate(16px,20px)}
  16%{opacity:1;transform:none}
  24%{transform:translate(0,4px)}
  32%{transform:none}
  78%{opacity:1;transform:none}
  100%{opacity:0;transform:translate(16px,20px)}}

/* ---- 2. the order panel ---- */
.ui-side{width:320px;transform:translate(-50%,-50%) scale(.74)}
.tr-panel{padding:14px 16px 16px}
.tr-panel .op-side{margin:0 -16px 14px}
/* Yes is chosen first, so the button takes its selected state on cue */
.tr-panel .op-outcomes .btn-yes{animation:tr-sel-yes 5.4s 1.1s ease-in-out infinite}
.tr-panel .op-amount .in{color:var(--muted-foreground)}
.tr-panel .op-amount .in b{font-weight:700}
.tr-panel .op-amount .num{position:relative;display:inline-block;min-width:112px;height:1em;text-align:right}
.tr-panel .op-amount .num b{position:absolute;right:0;top:0}
.tr-panel .op-amount .z{animation:tr-was 5.4s 1.1s ease-in-out infinite}
.tr-panel .op-amount .v{color:var(--foreground);opacity:0;animation:tr-now 5.4s 1.1s ease-in-out infinite}
.tr-panel .op-chips .hit{animation:tr-chip 5.4s 1.1s ease-in-out infinite}
/* The To-win block is always on screen, as it is in the panel; only the figure
   changes when the stake lands. */
.tr-panel .op-earn .num{position:relative;display:inline-block;height:1.2em;text-align:right;min-width:150px}
.tr-panel .op-earn .num.wide{min-width:100%;text-align:left;height:1.4em}
.tr-panel .op-earn .num b,.tr-panel .op-earn .num em{position:absolute;top:0;font-style:normal}
.tr-panel .op-earn .num b{right:0;white-space:nowrap}
.tr-panel .op-earn .num.wide em{left:0;white-space:nowrap}
.tr-panel .op-earn .z{animation:tr-was 5.4s 1.1s ease-in-out infinite}
.tr-panel .op-earn .v{opacity:0;animation:tr-now 5.4s 1.1s ease-in-out infinite}
.tr-panel .op-amount .bal{white-space:nowrap}
.tr-panel .btn-3d{width:100%;animation:tr-cta 5.4s 1.1s ease-in-out infinite}
.c-side{left:46%;top:34%;opacity:0;animation:tr-side-walk 5.4s 1s ease-in-out infinite}
@keyframes tr-sel-yes{0%,14%{background:var(--secondary);color:var(--foreground)}
  22%,100%{background:var(--yes);color:#fff}}
@keyframes tr-chip{0%,44%,58%,100%{background:var(--secondary);transform:none}
  50%{background:var(--accent);transform:scale(.94)}}
@keyframes tr-was{0%,46%{opacity:1}54%,100%{opacity:0}}
@keyframes tr-now{0%,46%{opacity:0}54%,100%{opacity:1}}
@keyframes tr-cta{0%,74%{transform:none;filter:none}
  80%{transform:scale(.97);filter:brightness(1.1)}
  86%,100%{transform:none;filter:none}}
/* the pointer visits Yes, then the +1k chip, then the button */
@keyframes tr-side-walk{0%{opacity:0;transform:translate(14px,18px)}
  10%{opacity:1;transform:none}
  18%{transform:translate(0,4px)}
  24%{transform:none}
  42%{transform:translate(44px,104px)}
  50%{transform:translate(44px,108px)}
  56%{transform:translate(44px,104px)}
  74%{transform:translate(6px,214px)}
  80%{transform:translate(6px,218px)}
  88%{opacity:1;transform:translate(6px,214px)}
  100%{opacity:0;transform:translate(20px,230px)}}

/* ---- 3. the chart header from the market page ---- */
.ui-move{width:392px;transform:translate(-50%,-50%) scale(.92)}
.ui-move .chance-line{margin:0 0 4px}
.ui-move .chance-line .big{font-size:22px}
.tr-legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted-foreground);margin-bottom:6px}
.tr-legend span{display:inline-flex;align-items:center;gap:6px}
.tr-legend i{width:8px;height:8px;border-radius:50%}
.tr-legend b{color:var(--foreground);font-variant-numeric:tabular-nums}
.tr-line{width:100%;height:118px;display:block}
.tr-line .grid{stroke:var(--border);stroke-width:1;stroke-dasharray:2 5;fill:none}
.tr-line .ln{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:600;stroke-dashoffset:600;
  animation:tr-draw 3.6s .3s cubic-bezier(.4,0,.2,1) infinite}
.ui-move .chart-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11.5px;color:var(--muted-foreground);margin-top:8px}
.ui-move .chart-meta b{color:var(--foreground);font-weight:600}
.ui-move .ranges{display:flex;gap:2px}
.ui-move .ranges button{padding:3px 7px;border-radius:6px;font-size:11px;font-weight:600;
  color:var(--muted-foreground);background:none}
.ui-move .ranges button.active{background:var(--secondary);color:var(--foreground)}
@keyframes tr-draw{0%{stroke-dashoffset:600}64%,100%{stroke-dashoffset:0}}

/* ---- 4. the settled panel ---- */
.ui-paid{width:300px;transform:translate(-50%,-50%) scale(.86);display:flex;flex-direction:column;gap:12px}
.ui-paid .resolved-pill{margin:0;animation:tr-deal .45s var(--ease-out) both}
.ui-paid .op-earn{margin:0;border-top:none;padding-top:0;
  animation:tr-rise .5s .35s var(--ease-out) both}
.tr-mp{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--yes-foreground);
  background:color-mix(in srgb,var(--yes) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--yes) 40%,transparent);
  animation:tr-rise .5s .8s var(--ease-out) both}
.tr-mp .tick{display:flex}
.tr-mp svg{width:13px;height:13px}
@keyframes tr-deal{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tr-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:520px){
  .ui-pick{transform:translate(-50%,-50%) scale(.5)}
  .ui-side{transform:translate(-50%,-50%) scale(.58)}
  .ui-move{transform:translate(-50%,-50%) scale(.78)}
  .ui-paid{transform:translate(-50%,-50%) scale(.74)}
}

/* Motion is the explanation here, not decoration, so under reduced motion
   every panel is shown in its finished state instead of looping. */
@media(prefers-reduced-motion:reduce){
  .tr-card.c1,.c-pick,.c-side,.tr-panel .op-outcomes .btn-yes,.tr-panel .op-chips .hit,
  .tr-panel .op-amount .z,.tr-panel .op-amount .v,.tr-panel .op-earn,.tr-panel .btn-3d,
  .tr-line .ln,.ui-paid .resolved-pill,.ui-paid .op-earn,.tr-mp{animation:none!important}
  .tr-cursor{display:none}
  .tr-panel .op-outcomes .btn-yes{background:var(--yes);color:#fff}
  .tr-panel .op-amount .z{opacity:0}
  .tr-panel .op-amount .v{opacity:1}
  .tr-panel .op-earn,.ui-paid .op-earn,.tr-mp{opacity:1;transform:none}
  .tr-line .ln{stroke-dashoffset:0}
}

/* =====================================================================
   ELECTION MAP — MapLibre canvas and the panel beside it. Two zoom-gated
   tiers live on the canvas; this only frames it and styles the panel that
   follows the selection.
   ===================================================================== */
.ml-row{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 12px}
.ml-slot{height:430px}
.ml-slot{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);background:var(--map-base)}
.ml-canvas{position:absolute;inset:0;width:100%;height:100%}
.ml-canvas.ml-loading::after,.ml-canvas.ml-fetching::after{content:"";position:absolute;top:12px;left:12px;z-index:3;
  width:16px;height:16px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--primary);
  animation:ml-spin .8s linear infinite}
@keyframes ml-spin{to{transform:rotate(360deg)}}
.ml-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:24px;color:var(--muted-foreground);font-size:13px;line-height:1.6}
.ml-fallback b{color:var(--foreground);font-size:14.5px}
.ml-fallback span{max-width:46ch}

/* MapLibre ships its own control chrome; these bring it onto our surface */
.ml-slot .maplibregl-ctrl-group{background:var(--card);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.3);overflow:hidden}
.ml-slot .maplibregl-ctrl-group button+button{border-top:1px solid var(--border)}
.ml-slot .maplibregl-ctrl-group button{width:30px;height:30px;background:transparent}
.ml-slot .maplibregl-ctrl-group button:hover{background:var(--accent)}
.ml-slot .maplibregl-ctrl-icon{filter:invert(var(--ml-invert,1))}
:root.light .ml-slot .maplibregl-ctrl-icon{--ml-invert:0}
.ml-slot .maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--card) 82%,transparent);
  border-radius:8px;font-size:10.5px}
.ml-slot .maplibregl-ctrl-attrib a{color:var(--muted-foreground)}
.ml-slot .maplibregl-compact-show .maplibregl-ctrl-attrib-inner{color:var(--muted-foreground)}
.ml-slot .maplibregl-cooperative-gesture-screen{background:rgba(6,7,10,.6);font:inherit;font-size:14px}

/* the panel: selected unit, how it splits, and a way back out */
.ml-side{display:flex;flex-direction:column}
.ml-empty,.ml-panel{flex:1;display:flex;flex-direction:column;border-radius:var(--radius-lg);
  border:1px solid var(--border);background:var(--card);padding:16px}
.ml-empty{align-items:flex-start;justify-content:center;gap:6px;border-style:dashed;text-align:left;padding:14px 16px}
.ml-empty b{font-size:14.5px;font-weight:650}
.ml-empty span{font-size:12.5px;line-height:1.6;color:var(--muted-foreground)}
.ml-panel .k{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--primary-text)}
.ml-panel h3{font-size:24px;font-weight:750;letter-spacing:-.03em;margin-top:3px;line-height:1.1}
.ml-panel .sub{font-size:11.5px;color:var(--muted-foreground);margin-top:5px;line-height:1.5}
.ml-panel .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:9px 20px;margin:14px 0 12px}
.ml-panel .split .r{display:grid;grid-template-columns:9px minmax(0,auto) minmax(0,1fr) 34px;
  align-items:center;gap:8px;font-size:12px;color:var(--muted-foreground)}
.ml-panel .split i{width:9px;height:9px;border-radius:3px}
.ml-panel .split span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:104px}
.ml-panel .split u{height:6px;border-radius:3px;text-decoration:none;display:block;min-width:2px;opacity:.85}
.ml-panel .split b{text-align:right;font-variant-numeric:tabular-nums;color:var(--foreground);font-weight:650}
.ml-panel .rate{margin-bottom:14px}
.ml-panel .tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  border:1px solid;font-size:11.5px;font-weight:650}
.ml-panel .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.ml-panel .acts .btn{flex:1;min-width:150px}
.ml-reset{margin-top:12px;padding:9px;border-radius:9px;font-size:12.5px;font-weight:600;
  color:var(--muted-foreground);background:none;width:100%}
.ml-reset:hover{background:var(--accent);color:var(--foreground)}

@media(max-width:900px){
  .ml-slot{height:380px}
}
@media(max-width:640px){
  .ml-slot{height:340px}
  .ml-panel h3{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .ml-canvas.ml-loading::after,.ml-canvas.ml-fetching::after{animation:none}
}

/* satellite / flat, sat over the canvas */
.ml-view{position:absolute;left:12px;top:12px;z-index:3;display:flex;gap:2px;padding:3px;
  border-radius:9px;background:color-mix(in srgb,var(--card) 88%,transparent);
  border:1px solid var(--border);backdrop-filter:blur(6px)}
.ml-view button{height:26px;padding:0 11px;border-radius:7px;font-size:12px;font-weight:650;
  color:var(--muted-foreground);background:none}
.ml-view button:hover{color:var(--foreground)}
.ml-view button.on{background:var(--primary);color:var(--primary-foreground)}

/* =====================================================================
   HUB KIT — the shared furniture behind the economy, crypto, culture and
   government hubs. The elections and football pages each grew their own;
   these four share, so they read as one platform.
   ===================================================================== */
.hk-page{padding-bottom:48px}

/* ---- headline ---- */
.hk-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);
  padding:22px 24px 20px;margin:16px 0 20px}
.hk-live{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.12em;color:var(--muted-foreground);margin-bottom:12px}
.hk-head h1{font-size:26px;line-height:1.18;font-weight:700;letter-spacing:-.03em;max-width:24ch}
.hk-sub{font-size:13.5px;color:var(--muted-foreground);margin-top:10px;max-width:70ch;line-height:1.6}
.hk-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:18px 0 14px}
.hk-facts span{display:flex;flex-direction:column;gap:2px}
.hk-facts small{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
.hk-facts b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---- view tabs ---- */
.hk-views{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:4px 0;overflow-x:auto;scrollbar-width:none}
.hk-views::-webkit-scrollbar{display:none}
.hk-views button{flex:0 0 auto;padding:11px 14px;font-size:13.5px;font-weight:600;background:none;
  color:var(--muted-foreground);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.hk-views button:hover{color:var(--foreground)}
.hk-views button.active{color:var(--foreground);border-bottom-color:var(--primary)}

/* ---- indicator cards ---- */
.hk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:12px;margin-top:16px}
.hk-stat{position:relative;display:flex;flex-direction:column;gap:6px;padding:15px 16px 13px;
  border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--card);color:var(--foreground);
  overflow:hidden;transition:border-color .14s,transform .14s var(--ease-out)}
a.hk-stat:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.hk-stat .k{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted-foreground)}
.hk-stat .k .tag{padding:2px 7px;border-radius:999px;background:var(--secondary);font-size:9.5px;letter-spacing:.06em}
.hk-stat .v{display:flex;align-items:baseline;gap:6px;font-size:27px;font-weight:750;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.hk-stat .v small{font-size:13px;font-weight:600;color:var(--muted-foreground);letter-spacing:0}
.hk-stat .v .chg{font-size:12px;font-weight:650;letter-spacing:0}
.hk-stat .v .chg.up{color:var(--yes-foreground)}
.hk-stat .v .chg.down{color:var(--no-foreground)}
.hk-stat .s{font-size:11.5px;color:var(--muted-foreground);line-height:1.5}
.hk-stat .go{font-size:11.5px;font-weight:650;color:var(--primary-text);opacity:0;transition:opacity .14s}
a.hk-stat:hover .go{opacity:1}

/* ---- sparklines and charts ---- */
/* the kit's sparkline is the shared one, sized for a stat card */
.hk-stat .wc-spark{height:44px;margin:2px 0}
.hk-section .wc{margin:10px 0 4px}

/* ---- probability ladder ---- */
.hk-ladder{display:flex;flex-direction:column;margin-top:14px}
.hk-rung{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(90px,1.6fr) 52px 52px;align-items:center;
  gap:14px;padding:11px 10px;border-bottom:1px solid var(--border);background:none;color:var(--foreground);
  text-align:left;border-radius:8px;transition:background .12s}
.hk-rung:hover{background:color-mix(in srgb,var(--accent) 50%,transparent)}
.hk-rung .l{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-rung .tr{height:8px;border-radius:4px;background:var(--secondary);overflow:hidden}
.hk-rung .tr i{display:block;height:100%;border-radius:4px;background:var(--primary);min-width:2px}
.hk-rung .p{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.hk-rung .buy{display:inline-flex;align-items:center;justify-content:center;height:28px;border-radius:999px;
  border:1px solid var(--border-strong);font-size:12px;font-weight:650;color:var(--muted-foreground)}
.hk-rung:hover .buy{border-color:var(--primary);color:var(--primary-text)}

/* ---- split bar ---- */
.hk-split{margin-top:14px}
.hk-split .bar{display:flex;height:15px;border-radius:8px;overflow:hidden;background:var(--secondary);gap:1px}
.hk-split .bar i{display:block;min-width:2px}
.hk-split .key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--muted-foreground)}
.hk-split .key span{display:inline-flex;align-items:center;gap:6px}
.hk-split .key i{width:9px;height:9px;border-radius:3px}
.hk-split .key b{color:var(--foreground);font-variant-numeric:tabular-nums;font-weight:650}

/* ---- board rows: a list of things that each resolve ---- */
.hk-board{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.hk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 15px;
  border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--card);color:var(--foreground);
  text-align:left;transition:border-color .14s,transform .14s var(--ease-out)}
.hk-row:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.hk-row .l{display:flex;flex-direction:column;gap:3px;min-width:0}
.hk-row .l b{font-size:14px;font-weight:650;letter-spacing:-.01em}
.hk-row .l span{font-size:11.5px;color:var(--muted-foreground);line-height:1.5}
.hk-row .l .st{display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.hk-row .l .st i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.hk-row .r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.hk-row .r b{font-size:19px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hk-row .r small{font-size:10.5px;color:var(--muted-foreground)}

/* ---- provenance ---- */
.hk-sources{margin-top:26px;padding-top:18px;border-top:1px solid var(--border)}
.hk-sources .k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-foreground);margin-bottom:10px}
.hk-sources .rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:8px}
.hk-sources .r{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);color:var(--foreground);transition:border-color .14s}
.hk-sources .r:hover{border-color:var(--border-strong)}
.hk-sources .r b{font-size:12.5px;font-weight:650}
.hk-sources .r span{font-size:11px;color:var(--muted-foreground);line-height:1.45}
.hk-sources .r em{font-style:normal;font-size:10px;color:var(--muted-foreground);opacity:.8;margin-top:2px}

@media(max-width:640px){
  .hk-card{padding:18px 16px 16px}
  .hk-head h1{font-size:21px}
  .hk-facts{gap:8px 18px}
  .hk-facts b{font-size:14px}
  .hk-grid{grid-template-columns:1fr 1fr;gap:8px}
  .hk-stat{padding:12px}
  .hk-stat .v{font-size:21px}
  .hk-rung{grid-template-columns:minmax(0,1fr) 46px 46px;gap:8px;padding:10px 4px}
  .hk-rung .tr{display:none}
  .hk-chart{height:190px}
}
@media(prefers-reduced-motion:reduce){
  a.hk-stat:hover,.hk-row:hover{transform:none}
}

/* inflation against its target band */
.hk-band{margin:16px 0 6px}
.hk-band .track{position:relative;height:10px;border-radius:5px;
  background:linear-gradient(90deg,var(--yes) 0%,var(--yes) 34%,var(--amber) 62%,var(--no) 100%);opacity:.9}
.hk-band .track i{position:absolute;top:-4px;width:4px;height:18px;border-radius:2px;
  background:var(--foreground);margin-left:-2px;box-shadow:0 0 0 2px var(--card)}
.hk-band .track u{position:absolute;top:-2px;width:2px;height:14px;background:var(--card);opacity:.7;margin-left:-1px}
.hk-band .ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-foreground);margin-top:8px}
.hk-section{margin-top:6px}
.hk-section .page-h2{margin-top:18px}

/* =====================================================================
   CHART — one line chart for the whole platform. The SVG holds paths and
   nothing else, so it can stretch to any box; every label sits on top of
   it in HTML and stays crisp.

   Polymarket's treatment, read off their bundle: no frame, no gridlines,
   no fill under the line, a backing stroke so crossing series stay
   legible, values down the right, a pulsing dot at the leading edge, and
   one small pill per series on hover rather than a combined tooltip.
   ===================================================================== */
.wc{position:relative;width:100%;--wc-r:52px;--wc-b:24px}
.wc-plot{position:absolute;left:0;right:var(--wc-r);top:0;bottom:var(--wc-b)}
.wc-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wc-g{stroke:var(--border);stroke-width:1;stroke-dasharray:1 3;vector-effect:non-scaling-stroke;opacity:.5}

/* the backing stroke sits under every line, in the card tone, so where two
   series cross the one in front stays readable */
.wc-back{fill:none;stroke:var(--card);stroke-width:4;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wc-back.dim{stroke-width:3}
.wc-line{fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}
.wc-line.dim{stroke-width:1.4;opacity:.4}

/* values down the right, dates along the bottom, the dates a shade quieter */
.wc-y{position:absolute;left:100%;top:0;bottom:0;width:var(--wc-r);pointer-events:none}
.wc-y span{position:absolute;left:9px;transform:translateY(-50%);font-size:12px;
  color:var(--muted-foreground);font-variant-numeric:tabular-nums;white-space:nowrap}
.wc-x{position:absolute;left:0;right:var(--wc-r);bottom:0;height:var(--wc-b);pointer-events:none}
.wc-x span{position:absolute;top:4px;font-size:12px;color:var(--muted-foreground);
  opacity:.62;white-space:nowrap}

/* the leading edge */
.wc-dot{position:absolute;width:8px;height:8px;border-radius:50%;margin:-4px 0 0 -4px;
  pointer-events:none;z-index:2}
.wc-dot.dim{width:6px;height:6px;margin:-3px 0 0 -3px;opacity:.45}
.wc-pulse{position:absolute;width:8px;height:8px;border-radius:50%;margin:-4px 0 0 -4px;
  pointer-events:none;opacity:0;animation:wc-pulse 2.25s .7s ease-out infinite}
@keyframes wc-pulse{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(4)}}
.wc.hov .wc-pulse,.wc.hov .wc-dot{opacity:0}

/* the current number, haloed so it reads over the lines behind it */
.wc-end{position:absolute;left:100%;margin-left:7px;transform:translateY(-50%);
  font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
  pointer-events:none;z-index:3;
  -webkit-text-stroke:3px var(--card);paint-order:stroke fill}
.wc-end.dim{opacity:.5;font-size:13px}

/* hover */
.wc-cross{position:absolute;top:-10px;bottom:0;width:0;
  border-left:1.5px solid var(--border-strong);pointer-events:none;z-index:1}
.wc-pins{position:absolute;inset:0;pointer-events:none;z-index:4}
.wc-mark{position:absolute;width:8px;height:8px;border-radius:50%;margin:-4px 0 0 -4px}
.wc-pin{position:absolute;display:flex;align-items:center;gap:5px;height:22px;padding:0 7px 0 5px;
  border-radius:5px;background:var(--popover);border:1px solid var(--border-strong);
  transform:translate(10px,-50%);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.wc-pin.r{transform:translate(calc(-100% - 10px),-50%)}
.wc-pin i{width:4px;height:12px;border-radius:2px;flex-shrink:0}
.wc-pin b{font-size:12px;font-weight:600;color:var(--foreground);max-width:132px;
  overflow:hidden;text-overflow:ellipsis}
.wc-pin em{font-style:normal;font-size:12px;font-weight:700;color:var(--foreground);
  font-variant-numeric:tabular-nums}

/* the same curve without axes, for cards and rows */
.wc-spark{display:block;width:100%;height:56px;color:var(--muted-foreground)}
.wc-spark .l{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wc-spark .b{fill:none;stroke:var(--card);stroke-width:4;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wc-spark.up{color:var(--yes)}
.wc-spark.down{color:var(--no)}

@media(max-width:640px){
  .wc{--wc-r:44px}
  .wc-y span{left:6px;font-size:11px}
  .wc-x span{font-size:11px}
  .wc-x span:nth-child(even){display:none}
  .wc-end{font-size:13px}
  .wc-pin b{max-width:92px}
}
@media(prefers-reduced-motion:reduce){
  .wc-pulse{animation:none;opacity:0}
}
}