/* ══════════════════════════════════════════════════════════════════════════
   KUMI2 · PAGES — hand-written skin layer for settings2.html + signals2.html
   Carries the kumi2.html console language (jewel violet-blue canvas, frosted
   glass, crisp gold hairline frames, Space Grotesk display type) onto the two
   sibling pages. k2.css supplies the body canvas + ambient nodes; everything
   here is page chrome. Loaded LAST on both pages so it wins the cascade.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --k2-gold:#f7c948;
  --k2-gold-hi:#ffd96e;
  --k2-gold-line:rgba(247,201,72,.55);
  --k2-gold-line-hi:rgba(255,217,110,.8);
  --k2-gold-glow:0 0 22px -8px rgba(247,201,72,.35);
  --k2-azure:#2ee6f0;
  --k2-violet-line:rgba(175,155,245,.22);
  --k2-violet-line-hi:rgba(175,155,245,.45);
  --k2-mint:#3dffa0;
  --k2-up:#4dff9b;
  --k2-down:#ff4d6d;
  --k2-glass:linear-gradient(160deg,rgba(80,60,155,.32),rgba(42,29,100,.44));
  --k2-glass-soft:linear-gradient(160deg,rgba(80,60,155,.22),rgba(42,29,100,.32));
  --k2-shadow:0 10px 30px -16px rgba(15,5,50,.65);
  --k2-lift:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),border-color .3s ease;
  --k2-font-display:'Space Grotesk','Nunito',ui-rounded,system-ui,sans-serif;
  --k2-gold-grad:linear-gradient(120deg,#ffe9a8,#f7c948 42%,#e3a72f 78%,#b87700);
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS2 — reskin of settings.html.
   The page carries several inline <style> layers that lean on !important;
   this sheet loads after all of them and prefixes every rule with
   body.k2-settings so specificity is never in doubt. Layout, ids, forms and
   JS are untouched — surface only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── workspace: let the k2 jewel canvas + aurora show through ───────────── */
body.k2-settings #setBody.grid-bg{
  background:none!important;
}
body.k2-settings .grid-bg::before{
  background:radial-gradient(560px 300px at 50% 0%,rgba(255,255,255,.04),transparent 70%)!important;
  opacity:1!important;
}

/* ── type: Space Grotesk takes over the display jobs Fredoka had ────────── */
body.k2-settings .panel-header,
body.k2-settings .nav-tab,
body.k2-settings .cfg-tab,
body.k2-settings .sect,
body.k2-settings .const-title,
body.k2-settings .btn,
body.k2-settings .asset-card,
body.k2-settings .mode-card,
body.k2-settings .fee-card > *:first-child,
body.k2-settings #setHeader .gradient-text,
body.k2-settings #statTrades,
body.k2-settings #statEarned,
body.k2-settings #statBots,
body.k2-settings .tile .font-bold,
body.k2-settings h1,h2,h3{
  font-family:var(--k2-font-display)!important;
}

/* ── header + footer chrome: frosted bars ───────────────────────────────── */
body.k2-settings #setHeader{
  background:linear-gradient(180deg,rgba(46,32,104,.62),rgba(32,20,87,.55))!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border-bottom:1px solid var(--k2-violet-line)!important;
  box-shadow:0 10px 30px -20px rgba(5,2,25,.9),0 1px 0 rgba(255,255,255,.05) inset!important;
}
body.k2-settings footer{
  background:linear-gradient(180deg,rgba(34,22,88,.55),rgba(24,15,66,.6))!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border-top:1px solid var(--k2-violet-line)!important;
}
body.k2-settings #setHeader .gradient-text{
  background:var(--k2-gold-grad)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;letter-spacing:.04em!important;
}
body.k2-settings .brand-sub{color:var(--k2-azure)!important}

/* header pills → glass chips */
body.k2-settings .nav-ver{
  background:rgba(247,201,72,.08)!important;
  border:1px solid var(--k2-gold-line)!important;
  color:var(--k2-gold-hi)!important;border-radius:999px!important;
}
body.k2-settings #connStatus{
  background:rgba(80,60,155,.25)!important;
  border:1px solid var(--k2-violet-line)!important;border-radius:999px!important;
  color:#b7a7ea!important;
}
body.k2-settings #balDisp{
  background:rgba(77,255,155,.08)!important;
  border:1px solid rgba(77,255,155,.4)!important;border-radius:999px!important;
  color:var(--k2-up)!important;
}

/* segmented nav → glass tabs, active = gold gradient.
   Mirrors the app console tablist spec in k2-src.css ([role="tablist"]) —
   keep the two in sync so both headers read as the same control. */
body.k2-settings .nav-seg{
  background:rgba(20,12,50,.45)!important;
  border:1px solid var(--k2-violet-line)!important;border-radius:999px!important;
  padding:3px!important;gap:1px!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.k2-settings .nav-tab{
  color:#b7a7ea!important;border-radius:999px!important;
  font-size:11.5px!important;font-weight:600!important;
  letter-spacing:.05em!important;text-transform:uppercase!important;
  padding:6px 14px!important;
  transition:background .25s ease,color .25s ease,box-shadow .45s var(--ease-flow)!important;
}
body.k2-settings .nav-tab:hover{background:rgba(139,92,255,.16)!important;color:#f4efff!important}
body.k2-settings .nav-tab.is-on{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;font-weight:700!important;
  border:1px solid rgba(184,119,0,.9)!important;
  box-shadow:0 6px 18px -8px rgba(247,201,72,.75),0 1px 0 rgba(255,255,255,.4) inset!important;
}
/* k2.css's console rule paints any href-less tab gold; here only .is-on earns it */
body.k2-settings [role=tablist] a:not([href]):not([onclick]):not(.is-on){
  background:transparent!important;color:#b7a7ea!important;box-shadow:none!important;
  border-color:transparent!important;
}

/* ── panels: frosted glass, crisp gold hairline frame, no washes ────────── */
body.k2-settings .panel,
body.k2-settings .glow,
body.k2-settings #setBody .panel,
body.k2-settings body .panel{
  background:var(--k2-glass)!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;
  border-radius:20px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow),0 1px 0 rgba(255,255,255,.05) inset!important;
  transition:var(--k2-lift);
}
body.k2-settings .panel:hover{
  border-color:var(--k2-gold-line-hi)!important;
  box-shadow:0 0 26px -8px rgba(247,201,72,.45),var(--k2-shadow),0 1px 0 rgba(255,255,255,.06) inset!important;
}
/* the wallet panel keeps the same gold frame — no azure halo, no orange */
body.k2-settings #setLeft > .panel.glow{
  border-color:var(--k2-gold-line)!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow),0 1px 0 rgba(255,255,255,.05) inset!important;
}
body.k2-settings .panel-header,
body.k2-settings #setBody .panel .panel-header{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0))!important;
  border-bottom:1px solid rgba(247,201,72,.22)!important;
  border-radius:19px 19px 0 0!important;
  color:#efe6ff!important;font-weight:600!important;letter-spacing:.14em!important;
}
body.k2-settings .panel-header svg{color:var(--k2-gold)!important;opacity:.95!important}

/* inner tiles: smaller glass cards, violet hairline */
body.k2-settings .tile{
  background:var(--k2-glass-soft)!important;
  backdrop-filter:blur(12px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.3)!important;
  border:1px solid var(--k2-violet-line)!important;
  border-radius:14px!important;
  box-shadow:var(--k2-shadow)!important;
}

/* ── inputs: dark glass, gold focus ring ────────────────────────────────── */
body.k2-settings .input-styled,
body.k2-settings input.input,
body.k2-settings select,
body.k2-settings .select{
  background:rgba(18,11,46,.6)!important;
  border:1px solid var(--k2-violet-line)!important;
  color:#f4efff!important;border-radius:10px!important;
  box-shadow:inset 0 2px 7px rgba(5,2,25,.5)!important;
  transition:border-color .2s,box-shadow .25s,background .2s!important;
}
body.k2-settings .input-styled::placeholder{color:#7a6cb0!important}
body.k2-settings .input-styled:hover{border-color:var(--k2-violet-line-hi)!important}
body.k2-settings .input-styled:focus,
body.k2-settings .input-styled:focus-visible{
  background:rgba(24,15,58,.75)!important;
  border-color:var(--k2-gold)!important;
  box-shadow:inset 0 2px 7px rgba(5,2,25,.5),0 0 0 3px rgba(247,201,72,.22)!important;
}
body.k2-settings .checkbox{border-color:var(--k2-violet-line-hi)!important;border-radius:6px!important}
body.k2-settings .checkbox-primary{--chkbg:var(--k2-gold);--chkfg:#3a2a00}
body.k2-settings .checkbox-primary:checked,
body.k2-settings .checkbox-primary[aria-checked=true]{
  background-color:var(--k2-gold)!important;border-color:#b87700!important;
}
body.k2-settings :focus-visible{outline:2px solid rgba(247,201,72,.55);outline-offset:2px}

/* ── buttons ────────────────────────────────────────────────────────────── */
body.k2-settings .btn{border-radius:999px!important;letter-spacing:.06em!important;
  transition:var(--k2-lift),filter .2s ease!important}
body.k2-settings .btn-accent-solid{
  background:var(--k2-gold-grad)!important;
  color:#3a2a00!important;font-weight:700!important;
  border:1px solid rgba(184,119,0,.9)!important;
  box-shadow:0 10px 26px -12px rgba(247,201,72,.85),0 1px 0 rgba(255,255,255,.45) inset!important;
}
body.k2-settings .btn-accent-solid:hover{filter:brightness(1.06);transform:translateY(-2px)}
body.k2-settings .btn-accent-solid:active{transform:translateY(1px)}
body.k2-settings .btn-quiet{
  background:rgba(46,230,240,.08)!important;color:var(--k2-azure)!important;
  border:1px solid rgba(46,230,240,.4)!important;box-shadow:none!important;
}
body.k2-settings .btn-quiet:hover{background:rgba(46,230,240,.15)!important;transform:translateY(-2px)}

/* ── strategy tabs: glass pills, active = gold ──────────────────────────── */
body.k2-settings #cfgTabBar{border-bottom:1px solid var(--k2-violet-line)!important}
body.k2-settings .cfg-tab{
  background:rgba(80,60,155,.18)!important;
  border:1px solid var(--k2-violet-line)!important;border-radius:999px!important;
  color:#b7a7ea!important;box-shadow:none!important;
  transition:var(--k2-lift),color .2s,background .3s!important;
}
body.k2-settings .cfg-tab:hover{
  background:rgba(139,92,255,.18)!important;color:#f4efff!important;
  border-color:var(--k2-violet-line-hi)!important;transform:translateY(-2px);
}
body.k2-settings .cfg-tab.active,
body.k2-settings .cfg-tab-const.active,
body.k2-settings .cfg-tab-simple.active,
body.k2-settings .cfg-tab-adv.active{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;font-weight:700!important;
  border-color:rgba(184,119,0,.9)!important;
  box-shadow:0 8px 20px -10px rgba(247,201,72,.8),0 1px 0 rgba(255,255,255,.4) inset!important;
}
body.k2-settings .cfg-tab.active::after{display:none!important}
body.k2-settings .tag{
  background:rgba(20,12,50,.4)!important;
  border:1px solid var(--k2-violet-line)!important;color:#b7a7ea!important;
  border-radius:999px!important;
}
body.k2-settings .cfg-tab.active .tag{
  background:rgba(58,42,0,.18)!important;border-color:rgba(58,42,0,.3)!important;
  color:#3a2a00!important;
}

/* ── choice cards (market / mode / DCA / strictness / fees): glass, gold
      hairline when selected — tinted glass only, never a solid wash ────── */
body.k2-settings .asset-card,
body.k2-settings .mode-card,
body.k2-settings .fee-card{
  background:var(--k2-glass-soft)!important;
  backdrop-filter:blur(12px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.3)!important;
  border:1px solid var(--k2-violet-line)!important;
  border-radius:14px!important;color:#cdbdf5!important;
  box-shadow:var(--k2-shadow)!important;
  transition:var(--k2-lift),color .2s,background .3s!important;
}
body.k2-settings .asset-card:hover,
body.k2-settings .mode-card:hover,
body.k2-settings .fee-card:hover{
  border-color:var(--k2-violet-line-hi)!important;
  transform:translateY(-2px);color:#f4efff!important;
}
body.k2-settings .asset-card.active,
body.k2-settings .mode-card.active,
body.k2-settings .fee-card.active{
  background:linear-gradient(160deg,rgba(247,201,72,.10),rgba(80,60,155,.24))!important;
  border-color:var(--k2-gold-line-hi)!important;color:#fff!important;
  box-shadow:0 0 22px -8px rgba(247,201,72,.5),var(--k2-shadow)!important;
}
body.k2-settings .asset-card span,
body.k2-settings .mode-card span{color:#9184c4!important}
body.k2-settings .asset-card.active span,
body.k2-settings .mode-card.active span{color:var(--k2-gold-hi)!important}

/* ── trading-hours heatmap ──────────────────────────────────────────────── */
body.k2-settings .hour-cell{
  background:rgba(24,15,58,.55)!important;
  border:1px solid var(--k2-violet-line)!important;
  color:#b7a7ea!important;border-radius:8px!important;
  transition:border-color .2s,color .2s,transform .3s!important;
}
body.k2-settings .hour-cell:hover{
  background:rgba(247,201,72,.10)!important;
  border-color:var(--k2-gold-line-hi)!important;color:#fff!important;
}
body.k2-settings .hour-cell.avoided{
  background:rgba(255,77,109,.14)!important;
  border-color:rgba(255,77,109,.55)!important;color:#ff8ba0!important;
}

/* ── constellation hero + running banner ────────────────────────────────── */
body.k2-settings .const-hero{
  background:var(--k2-glass)!important;
  backdrop-filter:blur(14px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.3)!important;
  border:1px solid var(--k2-gold-line)!important;border-left:2px solid var(--k2-gold)!important;
  border-radius:16px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
}
body.k2-settings .const-title{color:var(--k2-gold-hi)!important;font-weight:700!important}
body.k2-settings #runningStrategyBanner{
  background:rgba(77,255,155,.07)!important;
  border:1px solid rgba(77,255,155,.35)!important;border-radius:12px!important;
  color:#a9f5cd!important;
}
body.k2-settings #runningStrategyName{color:#fff!important}

/* ── misc glass bits ────────────────────────────────────────────────────── */
body.k2-settings .hlp{
  background:rgba(80,60,155,.25)!important;border:1px solid var(--k2-violet-line)!important;
  color:#b7a7ea!important;
}
body.k2-settings .hlp:hover{
  background:rgba(247,201,72,.12)!important;color:var(--k2-gold-hi)!important;
  border-color:var(--k2-gold-line)!important;
}
body.k2-settings #hlpTip{
  background:rgba(30,19,76,.92)!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  border:1px solid var(--k2-violet-line-hi)!important;
  box-shadow:0 18px 44px rgba(5,2,25,.7)!important;
}

/* the pulsing heart that replaced the old "5" status glyph */
body.k2-settings .k2-heart{display:inline-flex;align-items:center;line-height:0;vertical-align:middle}

/* ══════════════════════════════════════════════════════════════════════════
   SIGNALS2 — reskin of signals.html (playground "toy" look → Kumi2).
   The page's own styles live in an inline <style> in <head> and don't use
   !important, so these rules (later in the cascade, body.k2-signals prefix)
   win outright. Every id, the polling script and /api/signals/live untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* sky → the jewel canvas shows through; aurora replaces the drifting clouds */
body.k2-signals .sky{background:transparent}
body.k2-signals .clouds{display:none!important}

/* display type */
body.k2-signals h1,
body.k2-signals h2,
body.k2-signals h3,
body.k2-signals .brand b,
body.k2-signals .ring .t,
body.k2-signals .coin .nm,
body.k2-signals .coin .dl,
body.k2-signals .lagrow .who,
body.k2-signals .sig .lead,
body.k2-signals .stat b,
body.k2-signals .btn,
body.k2-signals .navlinks a{
  font-family:var(--k2-font-display);
}

/* ── hud bar: frosted glass capsule with the gold hairline ──────────────── */
body.k2-signals #hud .bar{
  background:linear-gradient(160deg,rgba(80,60,155,.32),rgba(42,29,100,.44));
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--k2-gold-line);
  border-radius:999px;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow);
}
body.k2-signals .brand small{color:var(--k2-gold)}
body.k2-signals .navlinks a{
  color:#b7a7ea;border-radius:999px;
  transition:color .2s,background .3s,box-shadow .3s;
}
body.k2-signals .navlinks a:hover{background:rgba(139,92,255,.16);color:#f4efff}
body.k2-signals .navlinks a[aria-current]{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;
  box-shadow:0 6px 18px -8px rgba(247,201,72,.75),0 1px 0 rgba(255,255,255,.4) inset;
}

/* ── pills → glass chips (semantic tints kept, as glass not solid fills) ── */
body.k2-signals .pill{
  background:rgba(80,60,155,.22);color:var(--k2-azure);
  border:1px solid var(--k2-violet-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body.k2-signals .pill.y{background:rgba(247,201,72,.09);color:var(--k2-gold-hi);border-color:var(--k2-gold-line)}
body.k2-signals .pill.p{background:rgba(255,77,109,.09);color:#ff8ba0;border-color:rgba(255,77,109,.4)}
body.k2-signals .pill.g{background:rgba(77,255,155,.08);color:var(--k2-up);border-color:rgba(77,255,155,.4)}

/* ── alerts button: gold gradient pill; on = mint-tinted glass ──────────── */
body.k2-signals .btn{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;
  border:1px solid rgba(184,119,0,.9);
  box-shadow:0 10px 26px -12px rgba(247,201,72,.85),0 1px 0 rgba(255,255,255,.45) inset;
  transition:var(--k2-lift),filter .2s ease;
}
body.k2-signals .btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
body.k2-signals .btn:active{transform:translateY(1px)}
body.k2-signals .btn.on{
  background:rgba(61,255,160,.12);color:var(--k2-mint);
  border:1px solid rgba(61,255,160,.5);
  box-shadow:0 0 22px -8px rgba(61,255,160,.5),var(--k2-shadow);
}

/* ── the big round card: frosted glass, gold hairline frame ─────────────── */
body.k2-signals .card{
  background:var(--k2-glass);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--k2-gold-line);
  border-radius:20px;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow);
  transition:var(--k2-lift);
}
body.k2-signals .card:hover{
  border-color:var(--k2-gold-line-hi);
  box-shadow:0 0 26px -8px rgba(247,201,72,.45),var(--k2-shadow);
}
body.k2-signals .verdict p{color:#b7a7ea}

/* ── coin board: small glass tiles, semantic 1px borders + soft glows ───── */
body.k2-signals .coin{
  background:var(--k2-glass-soft);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--k2-violet-line);
  border-radius:14px;
  box-shadow:var(--k2-shadow);
  transition:var(--k2-lift);
}
body.k2-signals .coin:hover{transform:translateY(-2px);border-color:var(--k2-violet-line-hi)}
body.k2-signals .coin.UP{
  background:linear-gradient(160deg,rgba(77,255,155,.07),rgba(42,29,100,.32));
  border:1px solid rgba(77,255,155,.45);
  box-shadow:0 0 18px -8px rgba(77,255,155,.5),var(--k2-shadow);
}
body.k2-signals .coin.DOWN{
  background:linear-gradient(160deg,rgba(255,77,109,.07),rgba(42,29,100,.32));
  border:1px solid rgba(255,77,109,.45);
  box-shadow:0 0 18px -8px rgba(255,77,109,.5),var(--k2-shadow);
}
body.k2-signals .coin.lag{
  background:linear-gradient(160deg,rgba(247,201,72,.08),rgba(42,29,100,.32));
  border:1px solid var(--k2-gold-line);
  box-shadow:0 0 22px -8px rgba(247,201,72,.55),var(--k2-shadow);
}
body.k2-signals .coin .tag{
  background:rgba(80,60,155,.25);color:#b7a7ea;
  border:1px solid var(--k2-violet-line);
}
body.k2-signals .coin.UP .tag{background:rgba(77,255,155,.10);color:var(--k2-up);border-color:rgba(77,255,155,.35)}
body.k2-signals .coin.DOWN .tag{background:rgba(255,77,109,.10);color:#ff8ba0;border-color:rgba(255,77,109,.35)}
body.k2-signals .coin.lag .tag{background:rgba(247,201,72,.10);color:var(--k2-gold-hi);border-color:var(--k2-gold-line)}

/* ── laggard rows, tape rows, stat tiles, note: glass + violet hairline ─── */
body.k2-signals .lagrow,
body.k2-signals .sig,
body.k2-signals .stat{
  background:var(--k2-glass-soft);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--k2-violet-line);
  border-radius:14px;
  box-shadow:var(--k2-shadow);
  transition:var(--k2-lift);
}
body.k2-signals .lagrow:hover,
body.k2-signals .sig:hover{transform:translateY(-2px);border-color:var(--k2-violet-line-hi)}
body.k2-signals .lagrow.pass{
  background:linear-gradient(160deg,rgba(247,201,72,.08),rgba(42,29,100,.32));
  border:1px solid var(--k2-gold-line);
  box-shadow:0 0 22px -8px rgba(247,201,72,.5),var(--k2-shadow);
}
body.k2-signals .note{
  background:var(--k2-glass-soft);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--k2-violet-line);
  border-radius:14px;color:#b7a7ea;
  box-shadow:var(--k2-shadow);
}
body.k2-signals .note b{color:#f4efff}
body.k2-signals .stat s{color:#9184c4}
body.k2-signals .sec .sub{color:#a897da}
body.k2-signals .empty{color:#9184c4}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG2 — reskin of blog.html (daisyUI + tailwind CDN + kumi-blog.css).
   kumi-blog.css leans on !important; this section loads after it and uses the
   body.k2-blog prefix, so it wins. Links, markup and JSON-LD untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* old night-gradient + cloud blobs step aside for the k2 canvas + aurora */
body.k2-blog::before,
body.k2-blog::after{display:none!important}

/* display type: Space Grotesk takes Fredoka's jobs */
body.k2-blog h1,
body.k2-blog h2,
body.k2-blog h3,
body.k2-blog h4,
body.k2-blog .nav-label,
body.k2-blog .chip,
body.k2-blog .neon-static,
body.k2-blog .nav-card,
body.k2-blog .navbar a{
  font-family:var(--k2-font-display)!important;
}

/* ── navbar → the signals capsule: frosted glass, gold hairline ─────────── */
body.k2-blog .navbar{
  background:linear-gradient(160deg,rgba(80,60,155,.32),rgba(42,29,100,.44))!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;
  border-radius:999px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
  top:12px!important;
}
body.k2-blog .navbar .font-bold{color:#f4efff!important}
body.k2-blog .navbar .btn-ghost{
  border-radius:999px!important;color:#b7a7ea!important;
  transition:color .2s,background .3s!important;
}
body.k2-blog .navbar .btn-ghost:hover{background:rgba(139,92,255,.16)!important;color:#f4efff!important}

/* ── primary buttons → gold gradient pills ──────────────────────────────── */
body.k2-blog .neon-static{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;
  border:1px solid rgba(184,119,0,.9)!important;border-radius:999px!important;
  box-shadow:0 10px 26px -12px rgba(247,201,72,.85),0 1px 0 rgba(255,255,255,.45) inset!important;
  font-weight:700!important;
  transition:var(--k2-lift),filter .2s ease!important;
}
body.k2-blog .neon-static:hover{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;
  filter:brightness(1.06);transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(247,201,72,.9),0 1px 0 rgba(255,255,255,.45) inset!important;
}
body.k2-blog .neon-static:active{transform:translateY(1px)}

/* ── page heading: gold gradient wordmark, gold kicker ──────────────────── */
body.k2-blog .gradient-text{
  background:var(--k2-gold-grad)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;
}
body.k2-blog main span[style*="#ff7a1f"]{color:var(--k2-gold-hi)!important}

/* ── post cards: same gold-hairline glass as the signals cards ──────────── */
body.k2-blog .post{
  background:var(--k2-glass)!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;
  border-radius:20px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
  transition:var(--k2-lift)!important;
}
body.k2-blog .post:hover{
  border-color:var(--k2-gold-line-hi)!important;
  transform:translateY(-2px);
  box-shadow:0 0 26px -8px rgba(247,201,72,.45),var(--k2-shadow)!important;
}
body.k2-blog .post h2{font-family:var(--k2-font-display)!important}
body.k2-blog .post p{color:#b7abe0!important}

/* ── chips → tinted glass pills with 1px hairlines ──────────────────────── */
body.k2-blog .chip{border-width:1px!important;backdrop-filter:blur(8px)}
body.k2-blog .c-rules{background:rgba(160,107,255,.10)!important;border-color:rgba(160,107,255,.4)!important}
body.k2-blog .c-const{background:rgba(247,201,72,.09)!important;color:var(--k2-gold-hi)!important;border-color:var(--k2-gold-line)!important}
body.k2-blog .c-simple{background:rgba(77,255,155,.08)!important;border-color:rgba(77,255,155,.35)!important}
body.k2-blog .c-date{background:rgba(80,60,155,.22)!important;border-color:var(--k2-violet-line)!important}

/* ── sidebar article cards (article pages share this sheet) ─────────────── */
body.k2-blog .nav-card{
  background:var(--k2-glass-soft)!important;color:#b7a7ea!important;
  border:1px solid var(--k2-violet-line)!important;border-radius:14px!important;
  box-shadow:var(--k2-shadow)!important;
  transition:var(--k2-lift),color .2s!important;
}
body.k2-blog .nav-card:hover{
  background:var(--k2-glass-soft)!important;color:#f4efff!important;
  border-color:var(--k2-violet-line-hi)!important;transform:translateY(-2px);
  box-shadow:var(--k2-shadow)!important;
}
body.k2-blog .nav-card[style]{
  background:linear-gradient(160deg,rgba(247,201,72,.10),rgba(80,60,155,.24))!important;
  color:var(--k2-gold-hi)!important;border-color:var(--k2-gold-line-hi)!important;
  box-shadow:0 0 22px -8px rgba(247,201,72,.5),var(--k2-shadow)!important;
}
body.k2-blog .nav-label{color:var(--k2-gold-hi)!important}

/* ── footer → frosted bar, violet hairline ──────────────────────────────── */
body.k2-blog footer{
  background:linear-gradient(180deg,rgba(34,22,88,.55),rgba(24,15,66,.6))!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border-top:1px solid var(--k2-violet-line)!important;
}
body.k2-blog footer a{color:var(--k2-azure)!important}

/* thin k2 scrollbars instead of the chunky navy ones */
body.k2-blog *::-webkit-scrollbar{width:8px;height:8px}
body.k2-blog *::-webkit-scrollbar-track{background:transparent}
body.k2-blog *::-webkit-scrollbar-thumb{background:linear-gradient(#8b5cff80,#2ee6f066);border:none;border-radius:99px}
body.k2-blog *::-webkit-scrollbar-thumb:hover{background:linear-gradient(#8b5cffbf,#2ee6f099)}

/* ══════════════════════════════════════════════════════════════════════════
   CALCULATOR2 — reskin of calculator.html (politics.css + tools.css, plain
   CSS, no !important — later cascade + body.k2-calculator prefix wins).
   All ids, sliders, the model script and chart drawing untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* retone the page's own accent tokens to k2 gold (azure stays for links) */
body.k2-calculator{--amber:#f7c948;--amber-hi:#ffd96e}

/* display type */
body.k2-calculator h1,
body.k2-calculator h2,
body.k2-calculator .res-big,
body.k2-calculator .how h3,
body.k2-calculator .fld-h output,
body.k2-calculator .periods b,
body.k2-calculator .be b,
body.k2-calculator .nav-r .l,
body.k2-calculator .btn-go,
body.k2-calculator .cap,
body.k2-calculator .stat span,
body.k2-calculator .panel-h h3{
  font-family:var(--k2-font-display);
}

/* ── nav → the signals capsule: floating frosted glass, gold hairline ───── */
body.k2-calculator .nav{
  background:linear-gradient(160deg,rgba(80,60,155,.32),rgba(42,29,100,.44));
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--k2-gold-line);
  border-radius:999px;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow);
  max-width:1120px;margin:14px auto 0;top:12px;
  padding:8px 10px 8px 16px;min-height:60px;
}
@media(max-width:1160px){body.k2-calculator .nav{margin:10px 12px 0}}
body.k2-calculator .brand{font-family:var(--k2-font-display);color:#f4efff}
body.k2-calculator .nav-r .l{border-radius:999px;transition:color .2s,background .3s,box-shadow .3s}
body.k2-calculator .nav-r .l:hover{color:#f4efff;background:rgba(139,92,255,.16)}
body.k2-calculator .nav-r .l[aria-current="page"]{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;
  box-shadow:0 6px 18px -8px rgba(247,201,72,.75),0 1px 0 rgba(255,255,255,.4) inset;
}
body.k2-calculator .btn-go{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;border-radius:999px;
  box-shadow:0 10px 26px -12px rgba(247,201,72,.85),0 1px 0 rgba(255,255,255,.45) inset;
  transition:var(--k2-lift),filter .2s ease;
}
body.k2-calculator .btn-go:hover{
  background:var(--k2-gold-grad);filter:brightness(1.06);transform:translateY(-2px);
}

/* ── panels → frosted glass, gold hairline frame ────────────────────────── */
body.k2-calculator .panel{
  background:var(--k2-glass);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--k2-gold-line);
  border-radius:20px;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow);
  transition:var(--k2-lift);
}
body.k2-calculator .panel:hover{
  border-color:var(--k2-gold-line-hi);
  box-shadow:0 0 26px -8px rgba(247,201,72,.45),var(--k2-shadow);
}
body.k2-calculator .panel-h{border-bottom:1px solid var(--k2-violet-line)}
body.k2-calculator .fld{border-top:1px solid var(--k2-violet-line)}
body.k2-calculator .fld:first-of-type{border-top:0}
body.k2-calculator .periods,
body.k2-calculator .periods div,
body.k2-calculator .brk,
body.k2-calculator .brk div,
body.k2-calculator .be,
body.k2-calculator .chart-wrap{border-color:var(--k2-violet-line)}

/* ── range sliders: gold fill, frosted thumb with gold ring ─────────────── */
body.k2-calculator input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--k2-gold) var(--fill,50%),rgba(175,155,245,.14) var(--fill,50%));
}
body.k2-calculator input[type=range]::-moz-range-progress{background:var(--k2-gold)}
body.k2-calculator input[type=range]::-webkit-slider-thumb{
  background:#fdf6dd;border:3px solid #2a1c6e;box-shadow:0 0 0 1.5px var(--k2-gold),0 0 10px rgba(247,201,72,.55);
}
body.k2-calculator input[type=range]::-moz-range-thumb{
  background:#fdf6dd;border:3px solid #2a1c6e;box-shadow:0 0 0 1.5px var(--k2-gold),0 0 10px rgba(247,201,72,.55);
}
body.k2-calculator input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(247,201,72,.4)}

/* ── fee-plan segmented control: glass, active = gold ───────────────────── */
body.k2-calculator .seg{
  background:rgba(20,12,50,.45);border:1px solid var(--k2-violet-line);border-radius:999px;
}
body.k2-calculator .seg button{border-radius:999px;transition:color .2s,background .3s,box-shadow .3s}
body.k2-calculator .seg button:hover{color:#f4efff}
body.k2-calculator .seg button[aria-pressed="true"]{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;box-shadow:0 4px 14px -6px rgba(247,201,72,.8);
}
body.k2-calculator .seg button[aria-pressed="true"] small{color:rgba(58,42,0,.75)}
body.k2-calculator .chk input{accent-color:var(--k2-gold)}

/* ── results furniture ──────────────────────────────────────────────────── */
body.k2-calculator .warn{
  border:1px solid rgba(255,77,109,.4);border-radius:14px;
  background:linear-gradient(160deg,rgba(255,77,109,.07),rgba(42,29,100,.3));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--k2-shadow);
}

/* ── "how the maths works" grid → glass tiles ───────────────────────────── */
body.k2-calculator .hg{
  background:var(--k2-violet-line);border:1px solid var(--k2-violet-line);border-radius:14px;
}
body.k2-calculator .hg > *{
  background:linear-gradient(160deg,rgba(80,60,155,.22),rgba(42,29,100,.32));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.k2-calculator .blk-h{border-bottom:1px solid var(--k2-violet-line)}
body.k2-calculator .blk-h h2 .n{color:var(--k2-gold)}

/* links stay azure */
body.k2-calculator .go{color:var(--k2-azure)}
body.k2-calculator .go:hover{color:#7ff3f7}

/* ── footer → frosted bar ───────────────────────────────────────────────── */
body.k2-calculator .foot{
  background:linear-gradient(180deg,rgba(34,22,88,.55),rgba(24,15,66,.6));
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border-top:1px solid var(--k2-violet-line);
}
body.k2-calculator .foot a{color:var(--k2-azure)}

/* ══════════════════════════════════════════════════════════════════════════
   HOME — reskin of index.html (the NIGHT ARCADE toy-box landing).
   The page's own styles are inline (no !important) and spread through the
   body, so the k2 links sit last, before </body>; every rule here carries the
   body.k2-home prefix and !important where inline style attributes compete.
   All ids, sections, scripts and API calls untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* the old sky + comets retire; the k2 jewel canvas + aurora + stars take over */
body.k2-home .sky,
body.k2-home .clouds{display:none!important}

/* display type: Space Grotesk takes every Fredoka job */
body.k2-home h1,
body.k2-home h2,
body.k2-home h3,
body.k2-home h4,
body.k2-home .disp,
body.k2-home .brand b,
body.k2-home .navlinks a,
body.k2-home .drawer a,
body.k2-home .btn,
body.k2-home .kicker,
body.k2-home .tag,
body.k2-home .sym,
body.k2-home .score .n,
body.k2-home .power .lv,
body.k2-home .mode .crown,
body.k2-home .step .lvl,
body.k2-home .knob,
body.k2-home .rc-head,
body.k2-home .rc-foot,
body.k2-home .medal,
body.k2-home .prize .val b,
body.k2-home .tt-h,
body.k2-home .tt-h2,
body.k2-home .pf-q,
body.k2-home .pf-h2{
  font-family:var(--k2-font-display)!important;
}

/* ── HUD → the signals capsule: frosted glass, gold hairline ────────────── */
body.k2-home #hud .bar{
  background:linear-gradient(160deg,rgba(80,60,155,.32),rgba(42,29,100,.44))!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;
  border-radius:999px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
}
body.k2-home .brand small{color:var(--k2-gold)!important}
body.k2-home .navlinks a{
  color:#b7a7ea!important;
  transition:color .2s,background .3s,box-shadow .3s!important;
}
body.k2-home .navlinks a:hover{background:rgba(139,92,255,.16)!important;color:#f4efff!important;transform:none}
body.k2-home .navlinks a[aria-current]{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;font-weight:700!important;
  box-shadow:0 6px 18px -8px rgba(247,201,72,.75),0 1px 0 rgba(255,255,255,.4) inset!important;
}
body.k2-home .burger{
  background:rgba(80,60,155,.25)!important;border:1px solid var(--k2-violet-line)!important;
  border-radius:12px!important;
}
body.k2-home .drawer{
  background:linear-gradient(160deg,rgba(80,60,155,.4),rgba(42,29,100,.5))!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;border-radius:20px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
}
body.k2-home .drawer a:hover{background:rgba(139,92,255,.16)!important}

/* ── buttons → gold gradient pills (every colour variant unified) ────────── */
body.k2-home .btn,
body.k2-home .btn.go,
body.k2-home .btn.sun,
body.k2-home .btn.sky{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;font-weight:700!important;
  border:1px solid rgba(184,119,0,.9)!important;
  box-shadow:0 10px 26px -12px rgba(247,201,72,.85),0 1px 0 rgba(255,255,255,.45) inset!important;
  transition:var(--k2-lift),filter .2s ease!important;
}
body.k2-home .btn:hover,
body.k2-home .btn.go:hover,
body.k2-home .btn.sun:hover,
body.k2-home .btn.sky:hover{
  background:var(--k2-gold-grad)!important;filter:brightness(1.06);transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(247,201,72,.9),0 1px 0 rgba(255,255,255,.45) inset!important;
}
body.k2-home .btn:active{transform:translateY(1px)}
body.k2-home .btn.ghost{
  background:rgba(46,230,240,.08)!important;color:var(--k2-azure)!important;
  border:1px solid rgba(46,230,240,.4)!important;box-shadow:none!important;
}
body.k2-home .btn.ghost:hover{background:rgba(46,230,240,.15)!important}

/* ── cards → the signals card: glass, gold hairline, no toy edges ────────── */
body.k2-home .card,
body.k2-home .card.soft,
body.k2-home .card.blue,
body.k2-home .card.pinky,
body.k2-home .card.grass,
body.k2-home .card.sunny,
body.k2-home .card.grape,
body.k2-home .card.tang,
body.k2-home .racecab,
body.k2-home .tv{
  background:var(--k2-glass)!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;
  border-radius:20px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
  transition:var(--k2-lift)!important;
}
body.k2-home .card:hover,
body.k2-home .racecab:hover,
body.k2-home .tv:hover{
  border-color:var(--k2-gold-line-hi)!important;
  box-shadow:0 0 26px -8px rgba(247,201,72,.45),var(--k2-shadow)!important;
}
body.k2-home .racecab:hover{transform:none}

/* the broadcast screen inside the cabinet stays a dark screen, hairline only */
body.k2-home .rc-screen{border:1px solid var(--k2-violet-line)!important;box-shadow:inset 0 0 26px rgba(11,182,204,.10)!important}
body.k2-home .rc-top{
  background:rgba(80,60,155,.25)!important;border:1px solid var(--k2-violet-line)!important;
  color:var(--k2-azure)!important;
}

/* ── small tiles / rows → glass-soft, violet hairline (signals tile talk) ── */
body.k2-home .row,
body.k2-home .lb,
body.k2-home .step .box,
body.k2-home .tt-live{
  background:var(--k2-glass-soft)!important;
  backdrop-filter:blur(12px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.3)!important;
  border:1px solid var(--k2-violet-line)!important;
  border-radius:14px!important;
  box-shadow:var(--k2-shadow)!important;
  transition:var(--k2-lift)!important;
}
body.k2-home .lb:hover{
  border-color:var(--k2-violet-line-hi)!important;background:var(--k2-glass-soft)!important;
  transform:translateX(3px);
}
body.k2-home .bar{border:1px solid var(--k2-violet-line)!important;background:rgba(20,12,50,.5)!important}

/* score + power + mode tiles: same glass, gold hairline like signals cards */
body.k2-home .score,
body.k2-home .power,
body.k2-home .mode{
  background:var(--k2-glass)!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;
  border-radius:20px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
  transition:var(--k2-lift)!important;
}
body.k2-home .score:hover,
body.k2-home .mode:hover{border-color:var(--k2-gold-line-hi)!important}
body.k2-home .power:hover{transform:translateY(-2px)!important;border-color:var(--k2-gold-line-hi)!important}
body.k2-home .mode .crown{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;
  border:1px solid rgba(184,119,0,.9)!important;box-shadow:0 4px 14px -6px rgba(247,201,72,.8)!important;
}

/* ── pills / kickers / knobs / bubbles → glass chips ────────────────────── */
body.k2-home .kicker{
  background:rgba(247,201,72,.08)!important;color:var(--k2-gold-hi)!important;
  border:1px solid var(--k2-gold-line)!important;box-shadow:none!important;
}
body.k2-home .pill{
  background:rgba(80,60,155,.22)!important;color:var(--k2-azure)!important;
  border:1px solid var(--k2-violet-line)!important;
}
body.k2-home .pill.y{background:rgba(247,201,72,.09)!important;color:var(--k2-gold-hi)!important;border-color:var(--k2-gold-line)!important}
body.k2-home .pill.p{background:rgba(255,77,109,.09)!important;border-color:rgba(255,77,109,.4)!important}
body.k2-home .pill.g{background:rgba(77,255,155,.08)!important;border-color:rgba(77,255,155,.4)!important}
body.k2-home .pill.v{background:rgba(139,92,255,.10)!important;border-color:rgba(139,92,255,.4)!important}
body.k2-home .knob{
  background:rgba(80,60,155,.22)!important;color:#cdbdf5!important;
  border:1px solid var(--k2-violet-line)!important;box-shadow:none!important;
  transition:var(--k2-lift),color .2s!important;
}
body.k2-home .knob:hover{transform:translateY(-2px)!important;border-color:var(--k2-violet-line-hi)!important;color:#f4efff!important}
body.k2-home .bubble{
  background:rgba(80,60,155,.25)!important;border:1px solid var(--k2-violet-line)!important;
  box-shadow:none!important;backdrop-filter:blur(8px)!important;
}

/* ── prize boxes keep their semantics as tinted glass, never solid fills ── */
body.k2-home .prize{border-width:1px!important;border-radius:14px!important}
body.k2-home .prize.w{background:rgba(77,255,155,.07)!important;border-color:rgba(77,255,155,.4)!important}
body.k2-home .prize.l{background:rgba(255,77,109,.07)!important;border-color:rgba(255,77,109,.4)!important}
body.k2-home .prize.n{background:var(--k2-glass-soft)!important;border-color:var(--k2-violet-line)!important}

/* ── ticker strip → frosted band ────────────────────────────────────────── */
body.k2-home .trainstrip{
  background:linear-gradient(180deg,rgba(46,32,104,.5),rgba(32,20,87,.45))!important;
  backdrop-filter:blur(14px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.3)!important;
  border-top:1px solid var(--k2-violet-line)!important;
  border-bottom:1px solid var(--k2-violet-line)!important;
  box-shadow:none!important;
}

/* hero headline highlight: gold gradient, not the orange sticker */
body.k2-home .hero-copy h1 .pop{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;
  border:2px solid rgba(255,255,255,.75)!important;text-shadow:none!important;
  box-shadow:0 10px 26px -10px rgba(247,201,72,.8)!important;
}

/* the "how it runs" band blends into the jewel canvas */
body.k2-home #how{background:rgba(20,12,50,.35)!important}

/* ── politics-featured slider + tools teasers → same glass language ─────── */
body.k2-home .pf-view{
  background:var(--k2-glass)!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;border-radius:20px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
}
body.k2-home .pf-btn{
  background:rgba(80,60,155,.25)!important;border:1px solid var(--k2-violet-line)!important;
  border-radius:999px!important;color:#cdbdf5!important;
}
body.k2-home .pf-btn:hover{border-color:var(--k2-gold-line)!important;color:var(--k2-gold-hi)!important}
body.k2-home .pf-r{background:transparent!important}
body.k2-home .tt-grid{
  background:var(--k2-violet-line)!important;
  border:1px solid var(--k2-gold-line)!important;border-radius:20px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
}
body.k2-home .tt-card{
  background:linear-gradient(160deg,rgba(80,60,155,.28),rgba(42,29,100,.4))!important;
  backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  transition:background .3s!important;
}
body.k2-home .tt-card:hover{background:linear-gradient(160deg,rgba(80,60,155,.4),rgba(42,29,100,.5))!important}

/* ── footer → frosted bar ───────────────────────────────────────────────── */
body.k2-home footer{
  background:linear-gradient(180deg,rgba(34,22,88,.55),rgba(24,15,66,.6))!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border-top:1px solid var(--k2-violet-line)!important;
}
body.k2-home footer a{color:var(--k2-azure)!important}

/* ══════════════════════════════════════════════════════════════════════════
   REPLAY — reskin of replay.html (politics.css + tools.css, like calculator).
   All /api/replay ids and the viewer script untouched.
   ══════════════════════════════════════════════════════════════════════════ */

body.k2-replay{--amber:#f7c948;--amber-hi:#ffd96e}

/* display type */
body.k2-replay h1,
body.k2-replay h2,
body.k2-replay .rp-head h2,
body.k2-replay .nav-r .l,
body.k2-replay .btn-go,
body.k2-replay .cap,
body.k2-replay .stat span,
body.k2-replay .stat b,
body.k2-replay .panel-h h3,
body.k2-replay .rp-btn{
  font-family:var(--k2-font-display);
}

/* nav → the signals capsule (identical to calculator) */
body.k2-replay .nav{
  background:linear-gradient(160deg,rgba(80,60,155,.32),rgba(42,29,100,.44));
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--k2-gold-line);
  border-radius:999px;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow);
  max-width:1120px;margin:14px auto 0;top:12px;
  padding:8px 10px 8px 16px;min-height:60px;
}
@media(max-width:1160px){body.k2-replay .nav{margin:10px 12px 0}}
body.k2-replay .brand{font-family:var(--k2-font-display);color:#f4efff}
body.k2-replay .nav-r .l{border-radius:999px;transition:color .2s,background .3s,box-shadow .3s}
body.k2-replay .nav-r .l:hover{color:#f4efff;background:rgba(139,92,255,.16)}
body.k2-replay .nav-r .l[aria-current="page"]{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;
  box-shadow:0 6px 18px -8px rgba(247,201,72,.75),0 1px 0 rgba(255,255,255,.4) inset;
}
body.k2-replay .btn-go{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;border-radius:999px;
  box-shadow:0 10px 26px -12px rgba(247,201,72,.85),0 1px 0 rgba(255,255,255,.45) inset;
  transition:var(--k2-lift),filter .2s ease;
}
body.k2-replay .btn-go:hover{background:var(--k2-gold-grad);filter:brightness(1.06);transform:translateY(-2px)}

/* panels → signals cards */
body.k2-replay .panel{
  background:var(--k2-glass);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--k2-gold-line);
  border-radius:20px;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow);
}
body.k2-replay .panel-h{
  border-bottom:1px solid var(--k2-violet-line);
  background:transparent;border-radius:20px 20px 0 0;
}
body.k2-replay .rp-list .panel-h{background:transparent}

/* stat tiles → glass-soft, violet hairline */
body.k2-replay .hg{
  background:var(--k2-violet-line);border:1px solid var(--k2-violet-line);border-radius:14px;
}
body.k2-replay .hg > *{
  background:linear-gradient(160deg,rgba(80,60,155,.22),rgba(42,29,100,.32));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* round list rows */
body.k2-replay .rp-item{border-top:1px solid var(--k2-violet-line);transition:background .25s}
body.k2-replay .rp-item:hover{background:rgba(139,92,255,.10)}
body.k2-replay .rp-item[aria-current="true"]{
  background:rgba(247,201,72,.07);box-shadow:inset 2px 0 0 var(--k2-gold);
}

/* viewer controls → glass chips; play = gold gradient */
body.k2-replay .rp-btn{
  background:rgba(80,60,155,.25);border:1px solid var(--k2-violet-line);
  border-radius:999px;color:#cdbdf5;
  transition:color .2s,border-color .2s,background .3s;
}
body.k2-replay .rp-btn:hover:not(:disabled){border-color:var(--k2-gold-line);color:var(--k2-gold-hi)}
body.k2-replay .rp-btn.play{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;border:1px solid rgba(184,119,0,.9);
}
body.k2-replay .rp-more{color:var(--k2-gold-hi);border-top:1px solid var(--k2-violet-line)}
body.k2-replay .rp-more:hover{color:#ffe9a8}

/* clock / coins / decide / results → signals tile language */
body.k2-replay .clock .bar{background:rgba(175,155,245,.12)}
body.k2-replay .coins,
body.k2-replay .decide,
body.k2-replay .results{
  border:1px solid var(--k2-violet-line);border-radius:14px;
  background:linear-gradient(160deg,rgba(80,60,155,.22),rgba(42,29,100,.32));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.k2-replay .coin{border-top:1px solid var(--k2-violet-line)}
body.k2-replay .coin:first-child{border-top:0}
body.k2-replay .coin.hd{background:rgba(220,210,255,.03)}
body.k2-replay .coin.target{background:rgba(247,201,72,.06);box-shadow:inset 2px 0 0 var(--k2-gold)}
body.k2-replay .decide.enter{border-color:rgba(77,255,155,.4);background:rgba(77,255,155,.06)}
body.k2-replay .decide.won{border-color:rgba(77,255,155,.45);background:rgba(77,255,155,.08)}
body.k2-replay .decide.lost{border-color:rgba(255,77,109,.45);background:rgba(255,77,109,.08)}
body.k2-replay .results{background:var(--k2-violet-line)}
body.k2-replay .results div{background:rgba(24,15,58,.65)}
body.k2-replay .kbd{border:1px solid var(--k2-violet-line);border-radius:5px}

/* footer → frosted bar */
body.k2-replay .foot{
  background:linear-gradient(180deg,rgba(34,22,88,.55),rgba(24,15,66,.6));
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border-top:1px solid var(--k2-violet-line);
}
body.k2-replay .foot a{color:var(--k2-azure)}

/* ══════════════════════════════════════════════════════════════════════════
   PRIVACY — mostly prose; navbar/footer/gradient come from the shared
   body.k2-blog rules (the page also carries k2-blog). Here: the prose card,
   the buttons, the alert box.
   ══════════════════════════════════════════════════════════════════════════ */

body.k2-privacy .prose{
  background:var(--k2-glass)!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;
  border-radius:20px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
  padding:30px 32px!important;
}
body.k2-privacy .prose h2,
body.k2-privacy .text-xl{font-family:var(--k2-font-display)!important}
body.k2-privacy .alert{
  background:rgba(80,60,155,.22)!important;
  border:1px solid var(--k2-violet-line)!important;border-radius:14px!important;
}
body.k2-privacy .btn-primary{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;font-weight:700!important;
  border:1px solid rgba(184,119,0,.9)!important;border-radius:999px!important;
  box-shadow:0 10px 26px -12px rgba(247,201,72,.85),0 1px 0 rgba(255,255,255,.45) inset!important;
  transition:var(--k2-lift),filter .2s ease!important;
}
body.k2-privacy .btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px)}
body.k2-privacy .btn-outline{
  background:rgba(46,230,240,.08)!important;color:var(--k2-azure)!important;
  border:1px solid rgba(46,230,240,.4)!important;border-radius:999px!important;
}
body.k2-privacy .btn-outline:hover{background:rgba(46,230,240,.15)!important}

/* ══════════════════════════════════════════════════════════════════════════
   POLITICS — shared reskin of politics.html (index) + politics-market.html
   (the /politics/<slug> template). Both run on politics.css; its tokens are
   retoned here so every divider/panel picks up the Kumi2 values at once.
   All /api/politics JS and ids untouched.
   ══════════════════════════════════════════════════════════════════════════ */

body.k2-politics{
  --amber:#f7c948;--amber-hi:#ffd96e;
  --hair:rgba(175,155,245,.18);--hair-2:rgba(175,155,245,.32);
  --panel:rgba(60,44,130,.35);--panel-2:rgba(80,60,155,.32);
}

/* display type */
body.k2-politics h1,
body.k2-politics .blk-h h2,
body.k2-politics .nav-r .l,
body.k2-politics .btn-go,
body.k2-politics .cap,
body.k2-politics .stat span,
body.k2-politics .stat b,
body.k2-politics .panel-h h3,
body.k2-politics .r-nm,
body.k2-politics .r-p b,
body.k2-politics .brand{
  font-family:var(--k2-font-display);
}

/* nav → the signals capsule */
body.k2-politics .nav{
  background:linear-gradient(160deg,rgba(80,60,155,.32),rgba(42,29,100,.44))!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  border:1px solid var(--k2-gold-line)!important;
  border-radius:999px!important;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow)!important;
  max-width:1120px;margin:14px auto 0;top:12px;
  padding:8px 10px 8px 16px;min-height:60px;
}
@media(max-width:1160px){body.k2-politics .nav{margin:10px 12px 0}}
body.k2-politics .nav-r .l{border-radius:999px;transition:color .2s,background .3s,box-shadow .3s}
body.k2-politics .nav-r .l:hover{color:#f4efff;background:rgba(139,92,255,.16)}
body.k2-politics .nav-r .l[aria-current="page"]{
  background:var(--k2-gold-grad);color:#3a2a00;font-weight:700;
  box-shadow:0 6px 18px -8px rgba(247,201,72,.75),0 1px 0 rgba(255,255,255,.4) inset;
}
body.k2-politics .btn-go{
  background:var(--k2-gold-grad)!important;color:#3a2a00!important;font-weight:700!important;
  border-radius:999px!important;
  box-shadow:0 10px 26px -12px rgba(247,201,72,.85),0 1px 0 rgba(255,255,255,.45) inset!important;
  transition:var(--k2-lift),filter .2s ease;
}
body.k2-politics .btn-go:hover{background:var(--k2-gold-grad)!important;filter:brightness(1.06);transform:translateY(-2px)}

/* panels → signals cards */
body.k2-politics .panel{
  background:var(--k2-glass);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--k2-gold-line);
  border-radius:20px;
  box-shadow:var(--k2-gold-glow),var(--k2-shadow);
}
body.k2-politics .panel-h{border-bottom:1px solid var(--k2-violet-line)}

/* hairline grids / stat tiles → glass-soft */
body.k2-politics .hg{
  background:var(--k2-violet-line);
  border:1px solid var(--k2-violet-line);border-radius:14px;
}
body.k2-politics .hg > *{
  background:linear-gradient(160deg,rgba(80,60,155,.22),rgba(42,29,100,.32));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* rule callout: gold edge on glass */
body.k2-politics .rule{
  border:1px solid var(--k2-gold-line);border-left:2px solid var(--k2-gold);
  border-radius:14px;background:linear-gradient(160deg,rgba(247,201,72,.06),rgba(42,29,100,.3));
}

/* chart tooltip → dark glass */
body.k2-politics .tip{
  background:rgba(30,19,76,.94)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--k2-violet-line-hi);
  box-shadow:0 18px 44px rgba(5,2,25,.7);
}

/* range sliders (model section) → gold fill like calculator */
body.k2-politics input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--k2-gold) var(--fill,50%),rgba(175,155,245,.14) var(--fill,50%));
}
body.k2-politics input[type=range]::-moz-range-progress{background:var(--k2-gold)}

/* links stay azure */
body.k2-politics .go{color:var(--k2-azure)}
body.k2-politics .go:hover{color:#7ff3f7}

/* footer → frosted bar */
body.k2-politics .foot{
  background:linear-gradient(180deg,rgba(34,22,88,.55),rgba(24,15,66,.6));
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border-top:1px solid var(--k2-violet-line);
}
body.k2-politics .foot a{color:var(--k2-azure)}