/* ============================================================================
   ANANDOHAM SKIN
   ----------------------------------------------------------------------------
   Tokens taken from the real brand, not invented:
     anandoham-website/tailwind.config.mjs
       emerald #15A172 · emerald-deep #0B5C42 · gold #B08D4C / #C9A86A / #E7D9B8
       ink #1A1F1C · stone #5C6660 · mist #D9DDDA · ivory #F4EFE6 · cream #FBF8F1
       radii 8/14/20 · easing cubic-bezier(.22,.61,.36,1) · eyebrow ls .18em
     anandoham-guna/tailwind.config.js
       sattva #D4A574 · rajas #D9633A · tamas #4A4A52 · parchment #FAF7F0
     logo pixel-sampled sunrise orange #F89020

   One addition: Manas uses indigo #3B5B8C. The brand palette has two greens and
   a gold, which cannot carry four distinguishable series in a radar or ternary
   chart. Indigo is the minimum departure needed for legibility.
   ========================================================================== */

[data-theme="light"] {
  --bg: #FBF8F1;
  --bg-2: #FAF7F0;
  --panel: rgba(255, 255, 255, .82);
  --panel-solid: #ffffff;
  --line: rgba(26, 31, 28, .12);
  --line-hot: rgba(176, 141, 76, .45);
  --ink: #1A1F1C;
  --ink-2: #5C6660;
  --ink-3: #8A938C;
  --cyan: #15A172;          /* primary accent → emerald */
  --cyan-2: #0B5C42;        /* deeper accent */
  --gold: #B08D4C;
  --sunrise: #F89020;
  --red: #C25A34;
  --green: #15A172;
  --phy: #C25A34;           /* Śarīra — terracotta */
  --car: #0B5C42;           /* Artha — emerald deep */
  --mnd: #3B5B8C;           /* Manas — indigo */
  --env: #B08D4C;           /* Saṃskāra — gold */
  --sattva: #D4A574;
  --rajas: #D9633A;
  --tamas: #4A4A52;
  --mono: "DM Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: Fraunces, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --deva: "Noto Serif Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", serif;
  --r: 8px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------ page ground ------------------------------- */
[data-theme="light"] body {
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(248, 144, 32, .10), transparent 62%),
    radial-gradient(760px 460px at 4% 12%, rgba(21, 161, 114, .07), transparent 60%),
    linear-gradient(180deg, #FDFBF6, var(--bg) 46%);
  color: var(--ink);
  font-family: var(--sans);
}
/* The HUD atmospherics belong to the other skin. */
[data-theme="light"] .scanlines,
[data-theme="light"] .vignette { display: none; }

[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.01em;
}

/* Georgia — the local fallback for Fraunces — defaults to OLD-STYLE figures,
   which render "11" as something close to "II" and "31.3k" as "3I.3k". Fine for
   prose, unacceptable for data. Force lining, tabular figures everywhere a
   number is displayed in the serif face. */
[data-theme="light"] .hero-level-num,
[data-theme="light"] .hstat b,
[data-theme="light"] .acard-lv,
[data-theme="light"] .tbranch-lv b,
[data-theme="light"] .karma-val,
[data-theme="light"] .log-live-item strong,
[data-theme="light"] .hcell-val,
[data-theme="light"] .tern-pct,
[data-theme="light"] .gbar-pct,
[data-theme="light"] .rank-letter,
[data-theme="light"] .xpbar-meta,
[data-theme="light"] .guna-profile-title,
[data-theme="light"] table.ledger,
[data-theme="light"] table.cx td.mono {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
[data-theme="light"] .label-xs {
  letter-spacing: .18em; color: var(--ink-3); font-family: var(--sans); font-weight: 500;
}

/* --------------------------------- topbar --------------------------------- */
[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(26, 31, 28, .03), 0 10px 30px -24px rgba(26, 31, 28, .35);
}
[data-theme="light"] .brand-title {
  font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .08em;
  color: var(--ink); text-shadow: none;
}
[data-theme="light"] .brand-sub { font-family: var(--sans); color: var(--ink-3); font-weight: 600; }

[data-theme="light"] .tab {
  color: var(--ink-2); font-family: var(--sans); font-weight: 600;
  letter-spacing: .1em; border-radius: 999px; text-transform: uppercase; font-size: 10.5px;
}
[data-theme="light"] .tab:hover { color: var(--cyan-2); background: rgba(21, 161, 114, .08); }
[data-theme="light"] .tab[aria-selected="true"] {
  background: var(--cyan-2); color: #fff; border-color: var(--cyan-2); box-shadow: none;
}

[data-theme="light"] .rank-chip {
  border: 1px solid var(--line-hot); border-radius: 999px;
  background: linear-gradient(135deg, rgba(248, 144, 32, .10), rgba(176, 141, 76, .07));
}
[data-theme="light"] .rank-letter {
  color: var(--sunrise); text-shadow: none; font-family: var(--serif); font-size: 19px; font-weight: 600;
}
[data-theme="light"] .rank-name { color: var(--ink-2); font-family: var(--sans); font-weight: 600; }
[data-theme="light"] .rank-xp { color: var(--cyan-2); }

[data-theme="light"] .icon-btn {
  background: #fff; border: 1px solid var(--line); color: var(--cyan-2);
  border-radius: 999px; font-family: var(--sans); font-weight: 600;
}
[data-theme="light"] .icon-btn:hover { background: rgba(21, 161, 114, .08); border-color: var(--cyan); }
[data-theme="light"] .btn { border-radius: 999px; font-family: var(--sans); }
[data-theme="light"] .btn-primary {
  background: var(--cyan-2); color: #fff; border-color: var(--cyan-2); box-shadow: none;
}
[data-theme="light"] .btn-primary:hover { background: #094a35; filter: none; }
[data-theme="light"] .btn-ghost { background: #fff; color: var(--cyan-2); border-color: var(--line); }
[data-theme="light"] .btn-ghost:hover { background: rgba(21, 161, 114, .08); }
[data-theme="light"] .btn-danger { background: #fff; color: var(--red); border-color: rgba(194, 90, 52, .4); }
[data-theme="light"] .btn-danger:hover { background: rgba(194, 90, 52, .08); }

[data-theme="light"] .eff { border-radius: 999px; font-family: var(--sans); font-weight: 600; }
[data-theme="light"] .eff.buff { color: #0B5C42; border-color: rgba(21, 161, 114, .4); background: rgba(21, 161, 114, .08); }
[data-theme="light"] .eff.debuff { color: #9C4526; border-color: rgba(194, 90, 52, .4); background: rgba(194, 90, 52, .07); }
[data-theme="light"] .eff-none { color: var(--ink-3); font-family: var(--sans); }

/* --------------------------------- panels --------------------------------- */
[data-theme="light"] .panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(26, 31, 28, .03), 0 18px 40px -32px rgba(26, 31, 28, .30);
}
/* Corner brackets are a HUD idiom; here they read as a quiet gold tick. */
[data-theme="light"] .panel-corner { width: 9px; height: 9px; opacity: .5; }
[data-theme="light"] .panel-corner.tl { border-color: var(--gold); border-top-left-radius: 14px; }
[data-theme="light"] .panel-corner.tr { border-color: var(--gold); border-top-right-radius: 14px; }
[data-theme="light"] .panel-corner.bl { border-color: var(--gold); border-bottom-left-radius: 14px; }
[data-theme="light"] .panel-corner.br { border-color: var(--gold); border-bottom-right-radius: 14px; }

[data-theme="light"] .panel-title {
  color: var(--cyan-2); font-family: var(--sans); font-weight: 700; letter-spacing: .18em;
}
[data-theme="light"] .panel-title-sub { color: var(--ink-3); font-family: var(--sans); }

/* ---------------------------------- hero ---------------------------------- */
[data-theme="light"] .panel-hero {
  background: linear-gradient(135deg, rgba(248, 144, 32, .07), rgba(255, 255, 255, .9) 44%);
}
[data-theme="light"] .hero-name {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.015em;
  background: none; color: var(--ink); text-shadow: none; -webkit-text-fill-color: var(--ink);
}
[data-theme="light"] .hero-job { font-family: var(--sans); color: var(--ink-2); text-transform: none; letter-spacing: .01em; font-size: 12.5px; }
[data-theme="light"] .hero-level-num {
  font-family: var(--serif); font-weight: 500; color: var(--cyan-2); text-shadow: none;
}
[data-theme="light"] .xpbar { background: rgba(26, 31, 28, .07); border-color: var(--line); border-radius: 999px; height: 8px; }
[data-theme="light"] .xpbar-fill {
  background: linear-gradient(90deg, var(--cyan), var(--sunrise)); box-shadow: none; border-radius: 999px;
}
[data-theme="light"] .xpbar-shine { display: none; }
[data-theme="light"] .xpbar-meta { font-family: var(--sans); color: var(--ink-2); }

[data-theme="light"] .hero-stats { background: var(--line); border-radius: 10px; overflow: hidden; }
[data-theme="light"] .hstat { background: rgba(255, 255, 255, .78); }
[data-theme="light"] .hstat b { color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 19px; }
[data-theme="light"] .hstat b.pos { color: var(--cyan-2); }
[data-theme="light"] .hstat b.neg { color: var(--red); }

/* --------------------------------- charts --------------------------------- */
[data-theme="light"] .radar-grid { fill: rgba(176, 141, 76, .05); stroke: rgba(26, 31, 28, .14); }
[data-theme="light"] .radar-axis { stroke: rgba(26, 31, 28, .14); }
[data-theme="light"] .radar-fill {
  fill: rgba(21, 161, 114, .14); stroke: var(--cyan-2); filter: none;
}
[data-theme="light"] .radar-mom { stroke: var(--sunrise); }
[data-theme="light"] .radar-label { font-family: var(--serif); font-weight: 600; }
[data-theme="light"] .radar-val { fill: var(--ink-3); font-family: var(--sans); }
[data-theme="light"] .radar-key { color: var(--ink-3); font-family: var(--sans); }
[data-theme="light"] .radar-key .k-solid::before { background: var(--cyan-2); }
[data-theme="light"] .radar-key .k-dash::before { background: repeating-linear-gradient(90deg, var(--sunrise) 0 4px, transparent 4px 8px); }
[data-theme="light"] circle[stroke="#03070f"] { stroke: #fff; }

[data-theme="light"] .grid { stroke: rgba(26, 31, 28, .09); }
[data-theme="light"] .grid-zero { stroke: rgba(26, 31, 28, .3); }
[data-theme="light"] .ax { fill: var(--ink-3); font-family: var(--sans); }
[data-theme="light"] .lg { color: var(--ink-3); font-family: var(--sans); }
[data-theme="light"] .lg b { color: var(--ink); }
[data-theme="light"] .lg-total { color: var(--cyan-2); }
[data-theme="light"] rect.neg { stroke: rgba(194, 90, 52, .5); }

[data-theme="light"] rect.hm-void { fill: rgba(26, 31, 28, .03); }
[data-theme="light"] rect.hm-0, [data-theme="light"] i.hm-0 { fill: rgba(26, 31, 28, .06); background: rgba(26, 31, 28, .06); }
[data-theme="light"] rect.hm-1, [data-theme="light"] i.hm-1 { fill: rgba(21, 161, 114, .18); background: rgba(21, 161, 114, .18); }
[data-theme="light"] rect.hm-2, [data-theme="light"] i.hm-2 { fill: rgba(21, 161, 114, .34); background: rgba(21, 161, 114, .34); }
[data-theme="light"] rect.hm-3, [data-theme="light"] i.hm-3 { fill: rgba(21, 161, 114, .55); background: rgba(21, 161, 114, .55); }
[data-theme="light"] rect.hm-4, [data-theme="light"] i.hm-4 { fill: rgba(21, 161, 114, .78); background: rgba(21, 161, 114, .78); }
[data-theme="light"] rect.hm-5, [data-theme="light"] i.hm-5 { fill: #0B5C42; background: #0B5C42; }
[data-theme="light"] rect.hm-neg, [data-theme="light"] i.hm-neg { fill: rgba(194, 90, 52, .55); background: rgba(194, 90, 52, .55); }
[data-theme="light"] .hm-lab { fill: var(--ink-3); font-family: var(--sans); }
[data-theme="light"] .heat-key { color: var(--ink-3); font-family: var(--sans); }

/* -------------------------------- content --------------------------------- */
[data-theme="light"] .acard { border-radius: 14px; background: rgba(255, 255, 255, .84); }
[data-theme="light"] .acard::before { border-radius: 14px 14px 0 0; box-shadow: none; }
[data-theme="light"] .acard::after { opacity: .07; }
[data-theme="light"] .acard-icon { border-radius: 10px; font-size: 15px; }
[data-theme="light"] .acard-name { font-family: var(--serif); font-size: 14.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
[data-theme="light"] .acard-lv { font-family: var(--serif); font-weight: 500; text-shadow: none; }
[data-theme="light"] .acard-xp { font-family: var(--sans); color: var(--ink-3); }
[data-theme="light"] .mini-bar, [data-theme="light"] .subrow-track { border-radius: 999px; }
[data-theme="light"] .mini-bar > i { box-shadow: none; border-radius: 999px; }
[data-theme="light"] .subrow-name { color: var(--ink-2); }
[data-theme="light"] .subrow-lv { font-family: var(--sans); color: var(--ink); font-weight: 600; }
[data-theme="light"] .flame { color: var(--sunrise); font-family: var(--sans); font-weight: 700; }
[data-theme="light"] .flame.cold { color: var(--ink-3); }

[data-theme="light"] .quest { border-radius: 10px; background: rgba(255, 255, 255, .7); }
[data-theme="light"] .quest.done { border-color: rgba(21, 161, 114, .35); background: rgba(21, 161, 114, .07); }
[data-theme="light"] .quest.done .qbox { border-color: var(--cyan); color: var(--cyan-2); background: rgba(21, 161, 114, .12); }
[data-theme="light"] .quest.done .qname { color: var(--cyan-2); }
[data-theme="light"] .qbox { border-radius: 6px; }
[data-theme="light"] .qhint { font-family: var(--sans); color: var(--ink-3); }
[data-theme="light"] .qtier { font-family: var(--sans); font-weight: 700; }
[data-theme="light"] .qtier.good { color: var(--sunrise); text-shadow: none; }
[data-theme="light"] .qtier.bad { color: var(--red); }

[data-theme="light"] .boss-name { color: var(--ink-2); }
[data-theme="light"] .boss-val { font-family: var(--sans); color: var(--ink); font-weight: 600; }
[data-theme="light"] .boss-val.ok { color: var(--cyan-2); }
[data-theme="light"] .boss-track, [data-theme="light"] .boss-track > i { border-radius: 999px; }
[data-theme="light"] .gate-foot { font-family: var(--sans); color: var(--ink-2); }

[data-theme="light"] .strow { border-radius: 10px; background: rgba(255, 255, 255, .7); }
[data-theme="light"] .strow-name { color: var(--ink-2); }
[data-theme="light"] .strow-vals { font-family: var(--sans); }
[data-theme="light"] .strow-cur { color: var(--sunrise); font-weight: 700; }
[data-theme="light"] .strow-cur.zero { color: var(--ink-3); }
[data-theme="light"] .strow-mult { color: var(--cyan-2); }
[data-theme="light"] .strow-best { color: var(--ink-3); }

[data-theme="light"] .hbar-track, [data-theme="light"] .hbar-fill { border-radius: 999px; }
[data-theme="light"] .hbar-name { color: var(--ink-2); }
[data-theme="light"] .hbar-val { font-family: var(--sans); color: var(--ink); font-weight: 600; }
[data-theme="light"] .hbar-val.neg, [data-theme="light"] .pen-total { color: var(--red); }
[data-theme="light"] .hbar-fill.neg { background: var(--red) !important; }
[data-theme="light"] .empty { font-family: var(--sans); color: var(--ink-3); }

/* --------------------------------- the log -------------------------------- */
[data-theme="light"] .lcard { border-radius: 14px; background: rgba(255, 255, 255, .84); overflow: hidden; }
[data-theme="light"] .lcard-icon { border-radius: 9px; }
[data-theme="light"] .lcard-title { font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
[data-theme="light"] .lcard-xp { font-family: var(--sans); font-weight: 700; }
[data-theme="light"] .lcard-xp.neg { color: var(--red); }
[data-theme="light"] .lsub { border-bottom-color: rgba(26, 31, 28, .08); }
[data-theme="light"] .lsub-name { font-family: var(--sans); font-weight: 700; color: var(--cyan-2); }
[data-theme="light"] .lsub-blurb { color: var(--ink-3); }
[data-theme="light"] .lsub-xp { font-family: var(--sans); color: var(--ink-2); font-weight: 600; }
[data-theme="light"] .lsub-xp.neg { color: var(--red); }
[data-theme="light"] .lsub-xp .mx { color: var(--sunrise); }

[data-theme="light"] .field > label { font-family: var(--sans); color: var(--ink-3); letter-spacing: .1em; font-weight: 600; }
[data-theme="light"] .field input[type="number"],
[data-theme="light"] .field input[type="text"],
[data-theme="light"] .field input[type="time"],
[data-theme="light"] .field select,
[data-theme="light"] .field textarea,
[data-theme="light"] .log-date input[type="date"],
[data-theme="light"] .setting-row input {
  background: #fff; border: 1px solid rgba(26, 31, 28, .16); color: var(--ink);
  border-radius: 8px; color-scheme: light; font-family: var(--sans);
}
[data-theme="light"] .field input:focus, [data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus, [data-theme="light"] .setting-row input:focus {
  border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(21, 161, 114, .13);
}
[data-theme="light"] .field input.warn { border-color: rgba(194, 90, 52, .55); }
[data-theme="light"] .field-check input { background: #fff; border-color: rgba(26, 31, 28, .28); border-radius: 5px; }
[data-theme="light"] .field-check input:checked { border-color: var(--cyan); background: rgba(21, 161, 114, .12); }
[data-theme="light"] .field-check input:checked::after { color: var(--cyan-2); }
[data-theme="light"] .field-check label { color: var(--ink-2); }
[data-theme="light"] .field-hint { color: var(--ink-3); }
[data-theme="light"] .log-date-sub { font-family: var(--sans); color: var(--ink-3); }
[data-theme="light"] .log-live-item strong { font-family: var(--serif); font-weight: 500; color: var(--cyan-2); }
[data-theme="light"] .log-live-item strong.neg { color: var(--red); }

/* --------------------------------- tree ----------------------------------- */
[data-theme="light"] .tbranch-icon { border-radius: 10px; }
[data-theme="light"] .tbranch-name { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: .01em; text-transform: none; }
[data-theme="light"] .tbranch-meta { font-family: var(--sans); color: var(--ink-3); }
[data-theme="light"] .tbranch-lv b { font-family: var(--serif); font-weight: 500; text-shadow: none; }
[data-theme="light"] .tsub { border-radius: 12px; background: rgba(255, 255, 255, .72); }
[data-theme="light"] .tsub-name { font-family: var(--serif); font-size: 15px; font-weight: 600; }
[data-theme="light"] .tsub-lv { font-family: var(--sans); font-weight: 700; }
[data-theme="light"] .tsub-blurb { color: var(--ink-3); }
[data-theme="light"] .tsub-bar, [data-theme="light"] .tsub-bar > i,
[data-theme="light"] .tnode-track, [data-theme="light"] .tnode-track > i { border-radius: 999px; }
[data-theme="light"] .tsub-xp, [data-theme="light"] .tnode-lv { font-family: var(--sans); color: var(--ink-3); }
[data-theme="light"] .tnode-name { color: var(--ink-2); }
[data-theme="light"] .tnodes { border-top-color: rgba(26, 31, 28, .1); }

/* -------------------------------- ledger ---------------------------------- */
[data-theme="light"] .table-scroll { border-radius: 12px; border-color: var(--line); }
[data-theme="light"] table.ledger { font-family: var(--sans); }
[data-theme="light"] table.ledger th { background: #F4EFE6; color: var(--cyan-2); border-bottom-color: var(--line-hot); }
[data-theme="light"] table.ledger th:first-child,
[data-theme="light"] table.ledger td:first-child { background: #F4EFE6; }
[data-theme="light"] table.ledger td { color: var(--ink-2); border-bottom-color: rgba(26, 31, 28, .07); }
[data-theme="light"] table.ledger tbody tr:hover td { background: rgba(21, 161, 114, .05); }
[data-theme="light"] table.ledger tbody tr:hover td:first-child { background: #EDE6D9; }
[data-theme="light"] td.pos { color: var(--cyan-2); }
[data-theme="light"] td.neg { color: var(--red); }
[data-theme="light"] td.zero { color: var(--ink-3); }
[data-theme="light"] td.total { color: var(--ink); }
[data-theme="light"] .gr-S { background: rgba(248, 144, 32, .18); color: #A85E10; }
[data-theme="light"] .gr-A { background: rgba(21, 161, 114, .16); color: #0B5C42; }
[data-theme="light"] .gr-B { background: rgba(176, 141, 76, .18); color: #7A6032; }
[data-theme="light"] .gr-C { background: rgba(26, 31, 28, .07); color: var(--ink-2); }
[data-theme="light"] .gr-D, [data-theme="light"] .gr-E { background: rgba(26, 31, 28, .05); color: var(--ink-3); }
[data-theme="light"] .gr-F { background: rgba(194, 90, 52, .16); color: #9C4526; }
[data-theme="light"] .eff-mini { color: #9C4526; }
[data-theme="light"] .eff-mini.buff { color: #0B5C42; }

/* --------------------------------- codex ---------------------------------- */
[data-theme="light"] .cx-sec-title { color: var(--sunrise); font-family: var(--sans); font-weight: 700; }
[data-theme="light"] .cx-sec-note { color: var(--ink-2); }
[data-theme="light"] table.cx th { color: var(--cyan-2); border-bottom-color: var(--line-hot); font-family: var(--sans); }
[data-theme="light"] table.cx td { color: var(--ink-2); border-bottom-color: rgba(26, 31, 28, .08); }
[data-theme="light"] table.cx td.k { color: var(--ink); }
[data-theme="light"] table.cx tr:hover td { background: rgba(21, 161, 114, .04); }
[data-theme="light"] .chip { border-radius: 999px; font-family: var(--sans); font-weight: 600; }
[data-theme="light"] .chip-pen { border-color: rgba(194, 90, 52, .45); color: #9C4526; }
[data-theme="light"] .chip-bonus { border-color: rgba(248, 144, 32, .5); color: #A85E10; }

/* ------------------------------- settings --------------------------------- */
[data-theme="light"] .setting-row { border-bottom-color: rgba(26, 31, 28, .08); }
[data-theme="light"] .setting-name { color: var(--ink); font-family: var(--sans); }
[data-theme="light"] .setting-help { color: var(--ink-3); }
[data-theme="light"] .switch input { background: rgba(26, 31, 28, .12); border-color: var(--line); }
[data-theme="light"] .switch input::after { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
[data-theme="light"] .switch input:checked { background: var(--cyan); border-color: var(--cyan); }
[data-theme="light"] .switch input:checked::after { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
[data-theme="light"] .panel.danger { border-color: rgba(194, 90, 52, .28); }
[data-theme="light"] .panel.danger .panel-corner { border-color: var(--red) !important; }

/* -------------------------------- toasts ---------------------------------- */
[data-theme="light"] .toast {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px -20px rgba(26, 31, 28, .35);
}
[data-theme="light"] .toast.levelup { border-color: rgba(248, 144, 32, .5); box-shadow: 0 18px 44px -18px rgba(248, 144, 32, .4); }
[data-theme="light"] .toast-kicker { color: var(--cyan-2); font-family: var(--sans); }
[data-theme="light"] .toast.levelup .toast-kicker { color: var(--sunrise); }
[data-theme="light"] .toast-msg { color: var(--ink); font-family: var(--serif); font-weight: 600; }
[data-theme="light"] .toast-sub { color: var(--ink-2); }

/* ========================== dharmic components =========================== */
/* These exist only in the Anandoham skin, so they are styled here directly
   rather than as overrides. */
.deva { font-family: var(--deva); line-height: 1.85; }

.guna-wrap { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .guna-wrap { grid-template-columns: 1fr; } }
.ternary-host svg { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
.tern-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.tern-edge { fill: none; stroke: var(--line-hot); stroke-width: 1.4; }
.tern-name { font-family: var(--serif); font-size: 13px; font-weight: 600; }
.tern-pct { font-family: var(--sans); font-size: 15px; font-weight: 700; }
.tern-trail { fill: none; stroke: var(--ink-3); opacity: .7; stroke-width: 1.4; stroke-dasharray: 3 3; }
.tern-dot { stroke: var(--panel-solid); stroke-width: 2.5; }
.tern-key { font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin-top: 6px; }

.guna-bars { display: flex; flex-direction: column; gap: 14px; }
.gbar-row { display: grid; grid-template-columns: 168px 1fr 56px; gap: 14px; align-items: center; }
@media (max-width: 620px) { .gbar-row { grid-template-columns: 118px 1fr 44px; gap: 10px; } }
.gbar-name { font-family: var(--serif, serif); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.gbar-name small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; line-height: 1.35; margin-top: 1px; }
.gbar-track { height: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 999px; overflow: hidden; }
.gbar-track > i { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease); }
.gbar-pct { font-family: var(--sans); font-size: 17px; font-weight: 700; text-align: right; }

.guna-profile { margin-top: 4px; padding: 16px 18px; border-radius: 12px; background: rgba(248, 144, 32, .08); border: 1px solid rgba(248, 144, 32, .28); }
.guna-profile-title { font-family: var(--serif, serif); font-size: 21px; font-weight: 600; color: var(--ink); }
.guna-profile-one { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.guna-profile-dir { font-size: 13px; color: var(--ink); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(248, 144, 32, .25); }
.guna-profile-dir strong { font-family: var(--sans, sans-serif); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--sunrise, #F89020); display: block; margin-bottom: 3px; }
.guna-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--sans, sans-serif); font-size: 12px; font-weight: 600; color: var(--cyan-2); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); padding-bottom: 1px; }
.guna-link:hover { color: var(--sunrise, #F89020); border-color: var(--sunrise, #F89020); }

/* karma scales */
.karma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
@media (max-width: 660px) { .karma-grid { grid-template-columns: 1fr; } }
.karma-cell { background: rgba(255, 255, 255, .8); padding: 14px 16px; }
.karma-cell .label-xs { display: block; margin-bottom: 4px; }
.karma-val { font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.1; }
.karma-val.punya { color: var(--cyan-2); }
.karma-val.papa { color: var(--red); }
.karma-val.net { color: var(--sunrise); }
.karma-sub { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.karma-scale { margin-top: 14px; }
.karma-scale-track { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(26, 31, 28, .06); }
.karma-scale-track > i { display: block; height: 100%; transition: width .6s var(--ease); }
.karma-scale-legend { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 10.5px; color: var(--ink-3); margin-top: 6px; }

/* shloka */
.shloka { padding: 18px 20px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.shloka-dev { font-family: var(--deva); font-size: 17px; color: var(--ink); white-space: pre-line; line-height: 1.9; }
.shloka-iast { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-2); white-space: pre-line; margin-top: 10px; line-height: 1.7; }
.shloka-en { font-size: 13.5px; color: var(--ink); margin-top: 10px; line-height: 1.6; }
.shloka-ref { font-family: var(--sans, sans-serif); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: 12px; }

/* sanskrit name pairs used across the dharmic views */
.sa-pair { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sa-dev { font-family: var(--deva); font-size: 15px; color: var(--gold); }
.sa-gloss { font-size: 11.5px; color: var(--ink-3); }