/* The one site style: Holo (pearl white, iridescent foil edges, floating bubbles). js/theme-boot.js sets data-theme="holo" before first
   paint. The Midnight values in :root of app.css are only the pre-script fallback. Nothing here changes layout or content. */

/* =====================================================================================================
   HOLO: pearl white with iridescent foil edges and floating bubbles (a light style)
   ===================================================================================================== */
[data-theme="holo"]{
  color-scheme:light;
  --bg:#eef0f8; --bg-rgb:238,240,248; --surface:#fbfbff; --raised:#f1f2fb; --line:#dcdff0; --line2:#bcc3e2;
  --fg:#14162b; --fg-rgb:20,22,43; --muted:#4a4f73; --faint:#6a6f94;
  --accent:#2457f5; --accent-rgb:36,87,245; --accent-ink:#ffffff; --accent2:#ff5fb3; --accent2-rgb:255,95,179;
  --good:#08855a; --good-rgb:8,133,90; --bad:#e0364f; --bad-rgb:224,54,79; --warn:#c98500; --warn-rgb:201,133,0;
  --holo:linear-gradient(115deg,#7af0ff 0%,#a9c1ff 24%,#ff9bd6 48%,#ffe9a3 70%,#9bf5c9 90%,#7af0ff 100%);
  --holo-soft:linear-gradient(135deg,#d9f6ff,#ffe3f2 55%,#fff3c9);
  --font-display:"Bricolage Grotesque","Geist",ui-sans-serif,system-ui,sans-serif;
  --r:20px; --r-s:12px; --r-pill:999px; --h-weight:800; --h-track:-.04em; --k-track:.14em;
  --shadow:0 12px 34px rgba(70,84,160,.13),0 1px 0 rgba(255,255,255,.9) inset; --glow-box:0 8px 22px rgba(80,120,255,.32);
  --tone-accent:linear-gradient(150deg,#bdeeff 0%,#d9e2ff 45%,#ffd6ec 100%);
  --tone-good:linear-gradient(150deg,#c9fbe0 0%,#c2f0ff 55%,#e8ffd2 100%);
  --tone-bad:linear-gradient(150deg,#ffd3dc 0%,#ffe0c9 55%,#ffd1f0 100%);
  --tone-warn:linear-gradient(150deg,#fff1b8 0%,#ffe0d0 55%,#d4f7e6 100%);
  --tone-neutral:linear-gradient(150deg,#eef1ff 0%,#e3f3ff 55%,#fde8f5 100%);
}
[data-theme="holo"] body::before{background:radial-gradient(42% 36% at 10% 6%,rgba(122,240,255,.5),transparent 70%),radial-gradient(38% 32% at 90% 4%,rgba(255,155,214,.42),transparent 70%),radial-gradient(46% 36% at 62% 100%,rgba(255,233,163,.5),transparent 70%),radial-gradient(circle at 1px 1px,rgba(var(--fg-rgb),.06) 1px,transparent 0) 0 0/22px 22px;-webkit-mask-image:none;mask-image:none}
/* foil edges: a gradient border that follows the card's own rounded corners */
[data-theme="holo"] .panel,[data-theme="holo"] .bar,[data-theme="holo"] .hero,[data-theme="holo"] .tile,[data-theme="holo"] .award,[data-theme="holo"] .spot,[data-theme="holo"] .insight,[data-theme="holo"] .card-s,[data-theme="holo"] .scorecard,[data-theme="holo"] .regret-sum>div,[data-theme="holo"] .cmp-head,[data-theme="holo"] .how .step,[data-theme="holo"] .persona-line{border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo) border-box}
[data-theme="holo"] .receipts li,[data-theme="holo"] .dv,[data-theme="holo"] .hb,[data-theme="holo"] .tokgrid,[data-theme="holo"] table.t{border-color:var(--line2)}
/* a rainbow sheen that slides under the cursor */
[data-theme="holo"] .fx-spot::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(122,240,255,.30),rgba(255,155,214,.20) 45%,rgba(255,233,163,.12) 70%,rgba(255,255,255,0) 100%);mix-blend-mode:normal}
@media (hover:none){.fx-spot::after{display:none}} /* a touch screen keeps "hover" after a tap, so the glow would stick */
[data-theme="holo"] .intro h1 em,[data-theme="holo"] .persona-name,[data-theme="holo"] .grade{background:linear-gradient(100deg,#0ab4e8,#3d7bff 32%,#ff4fa8 66%,#ff8a3d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
[data-theme="holo"] .grade span{-webkit-text-fill-color:var(--muted);color:var(--muted)}
[data-theme="holo"] .intro h1 em{padding-right:.12em}
[data-theme="holo"] .btn.primary,[data-theme="holo"] .controls button{background:linear-gradient(110deg,#8fe9ff,#b4c4ff 36%,#ffb3dc 68%,#ffe9a8);color:#14162b;border:1.5px solid #fff;box-shadow:var(--glow-box)}
[data-theme="holo"] .seg button[aria-pressed="true"]{background:linear-gradient(110deg,#8fe9ff,#b4c4ff 40%,#ffb3dc);color:#14162b}
[data-theme="holo"] .tab-ind{background:linear-gradient(110deg,#d9f6ff,#ffe3f2 60%,#fff3c9);border-color:#fff;box-shadow:0 4px 14px rgba(80,120,255,.2)}
[data-theme="holo"] .tabs{background:rgba(255,255,255,.96)}
[data-theme="holo"] .ibub{background:var(--holo-soft);border-color:#fff;color:var(--accent)}
[data-theme="holo"] .ibub.good{background:linear-gradient(135deg,#c9fbe0,#d4f7ff);color:var(--good)}
[data-theme="holo"] .ibub.bad{background:linear-gradient(135deg,#ffd3dc,#ffe6d6);color:var(--bad)}
[data-theme="holo"] .trait{background:#fff;border-color:var(--line2)}
[data-theme="holo"] .trait::before{background:var(--holo);box-shadow:none}
[data-theme="holo"] .tk-img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #b4c4ff}
[data-theme="holo"] .beam::before{background:conic-gradient(from var(--beam),transparent 0 46%,#7af0ff 58%,#ff9bd6 72%,#ffe9a3 84%,#9bf5c9 93%,transparent 100%)}
[data-theme="holo"] .prog i{background:var(--holo);box-shadow:none}
[data-theme="holo"] .tape{background:rgba(255,255,255,.65)}
[data-theme="holo"] dialog.story::backdrop{background:#eef0f8}