@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap");
/* Hooper Buddy design system - shared by every page. */
:root{
  --bg:#07090d; --bg2:#0b0f16; --panel:#0e131b; --panel2:#131a25; --line:#1d2634;
  --ink:#f2f5fa; --mute:#8395ad; --dim:#5d6b80;
  --hot:#ff5a1f; --hot2:#ffa24d;
  --good:#22d97a; --bad:#ff3b5c; --cool:#2ea8ff; --grape:#9d6bff;
  --mono:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.35;cursor:not-allowed}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#1f2937;border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------ companion */
.companion{display:block;overflow:visible}
.companion.idle .c-body{animation:bob 3.4s ease-in-out infinite;transform-origin:50% 92%}
@keyframes bob{
  0%,100%{transform:translateY(0) scale(1,1)}
  45%{transform:translateY(-6%) scale(.985,1.015)}
  60%{transform:translateY(0) scale(1.03,.97)}
}
.c-eyes{transition:transform .08s}
.c-eyes.blinking{transform:scaleY(.12);transform-origin:50% 48%}
.companion.talking .c-mouth{animation:yap .26s ease-in-out infinite alternate;transform-origin:50% 68%}
@keyframes yap{from{transform:scaleY(.55)}to{transform:scaleY(1.45)}}
.companion.talking .c-body{animation:bob 1.1s ease-in-out infinite}

/* --------------------------------------------------------------- shared */
.mark{font:800 19px/1 var(--mono);letter-spacing:-.6px;display:flex;align-items:center;gap:9px}
.mark i{width:11px;height:11px;border-radius:50%;background:var(--hot);box-shadow:0 0 14px var(--hot);font-style:normal}
.mark span{color:var(--hot)}
.mark .mark-logo{width:30px;height:30px;flex:none;display:block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:11px;font-weight:700;
  background:var(--panel2);border:1px solid var(--line);transition:.14s;
}
.btn:hover:not(:disabled){background:#1b2534;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--hot),#ff8a3d);color:#0a0a0a;border-color:transparent}
.btn.primary:hover:not(:disabled){box-shadow:0 8px 28px rgba(255,90,31,.42)}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.lg{padding:16px 30px;font-size:16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card h3{font:700 10px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--mute);margin-bottom:14px}

.pill{display:inline-block;padding:5px 11px;border-radius:999px;font:700 10px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase}
.pill.hot{background:rgba(255,90,31,.14);color:var(--hot);border:1px solid rgba(255,90,31,.32)}
.pill.good{background:rgba(34,217,122,.13);color:var(--good);border:1px solid rgba(34,217,122,.3)}
.pill.cool{background:rgba(46,168,255,.13);color:var(--cool);border:1px solid rgba(46,168,255,.3)}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  padding:13px 22px;font-weight:600;transition:.3s;z-index:200;box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--bad);color:var(--bad)}

.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:13px;text-align:center}
.stat b{display:block;font:800 23px/1 var(--mono);color:var(--hot);letter-spacing:-.8px}
.stat small{display:block;font:600 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);margin-top:6px}

.bar{height:6px;background:#141c28;border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),var(--hot2));width:0;transition:width .4s}


/* ============================================================ theming
   Night is the base (:root above). Day flips the tokens. data-theme is set
   by /js/theme.js before first paint, so the switch is instant on every page. */
:root[data-theme="day"]{
  --bg:#ffffff; --bg2:#f7f8fb; --panel:#ffffff; --panel2:#f3f5f9; --line:#e4e8ef;
  --ink:#0f1522; --mute:#1f2937; --dim:#4b5565;
  --hot:#ff5a1f; --hot2:#ff8a3d;
  --good:#12b366; --bad:#e6284d; --cool:#1b8ae6; --grape:#7d4dff;
}
:root[data-theme="day"] body{background:radial-gradient(1200px 600px at 10% -10%,rgba(255,90,31,.12),transparent 60%),radial-gradient(900px 500px at 100% 0,rgba(27,138,230,.10),transparent 55%),radial-gradient(700px 400px at 50% 100%,rgba(125,77,255,.08),transparent 60%),var(--bg) fixed}
:root[data-theme="day"] ::-webkit-scrollbar-thumb{background:#d5dbe5}
:root[data-theme="day"] .card,:root[data-theme="day"] .stat,:root[data-theme="day"] .tile,:root[data-theme="day"] .sitem,:root[data-theme="day"] .pick button,:root[data-theme="day"] .sheet,:root[data-theme="day"] .dock,:root[data-theme="day"] .talkbar,:root[data-theme="day"] .feat,:root[data-theme="day"] .price{box-shadow:0 1px 2px rgba(15,21,34,.04),0 10px 28px rgba(15,21,34,.07)}
:root[data-theme="day"] .rail{background:var(--panel);border-right:1px solid var(--line)}
:root[data-theme="day"] .stage{background:#0b0f16}
:root[data-theme="day"] .msg{background:rgba(255,255,255,.94);color:#0f1522;border-color:rgba(15,21,34,.08)}
:root[data-theme="day"] .msg.coach{background:rgba(255,241,234,.96)}
:root[data-theme="day"] .hud .tile{background:rgba(255,255,255,.92);color:#0f1522}
:root[data-theme="day"] .msg .who,:root[data-theme="day"] .tline .t,:root[data-theme="day"] #dockCount,:root[data-theme="day"] .dock footer,:root[data-theme="day"] .stat small,:root[data-theme="day"] .tile small,:root[data-theme="day"] .roster small,:root[data-theme="day"] .sitem small,:root[data-theme="day"] .lab small,:root[data-theme="day"] .legal .upd,:root[data-theme="day"] .hero-s .fine,:root[data-theme="day"] footer.site{color:#374151!important}
:root[data-theme="day"] input,:root[data-theme="day"] select,:root[data-theme="day"] textarea{background:#fff;color:#0f1522;border:1px solid #cbd2dc}
:root[data-theme="day"] nav.top{background:rgba(255,255,255,.84)}
:root[data-theme="day"] .price li{border-bottom-color:var(--line)}

/* colour, both themes: every surface carries a brand accent */
.card,.feat,.price,.stat,.sitem{position:relative;overflow:hidden}
.card::before,.feat::before,.stat::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--hot),var(--hot2),var(--cool),var(--grape));opacity:.9}
.card:nth-of-type(2n)::before,.feat:nth-child(2n)::before{background:linear-gradient(90deg,var(--cool),var(--grape),var(--hot))}
.card:nth-of-type(3n)::before,.feat:nth-child(3n)::before{background:linear-gradient(90deg,var(--good),var(--cool),var(--hot2))}
.stat b,.tile b,.price .amt,.score{background:linear-gradient(120deg,var(--hot),var(--hot2));-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,.vhead h1{letter-spacing:-.6px}
.card,.sitem,.pick button,.stat,.feat,.roster div{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover,.sitem:hover,.pick button:hover,.stat:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(255,90,31,.14);border-color:rgba(255,90,31,.4)}
.btn{transition:transform .12s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:linear-gradient(135deg,var(--hot),var(--hot2));color:#fff;box-shadow:0 8px 22px rgba(255,90,31,.32)}
.btn.primary:hover{box-shadow:0 12px 30px rgba(255,90,31,.42)}
.rail button.on{background:rgba(255,90,31,.14);box-shadow:inset 0 0 0 1px rgba(255,90,31,.35)}
.rail button[data-view="dashboard"].on{background:rgba(255,90,31,.14)}
.rail button[data-view="train"].on{background:rgba(18,179,102,.16);box-shadow:inset 0 0 0 1px rgba(18,179,102,.4)}
.rail button[data-view="sessions"].on{background:rgba(27,138,230,.16);box-shadow:inset 0 0 0 1px rgba(27,138,230,.4)}
.rail button[data-view="brain"].on{background:rgba(125,77,255,.16);box-shadow:inset 0 0 0 1px rgba(125,77,255,.4)}
.price.best::before{color:#fff}
.rail .logo{width:44px;height:44px;border-radius:12px;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;transition:transform .2s;cursor:pointer}
.rail .logo:hover{transform:rotate(-8deg) scale(1.08)}

/* day / night switch */
.theme-sw{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:800 11px/1 var(--mono);letter-spacing:.4px;color:var(--mute);cursor:pointer;transition:.18s}
.theme-sw:hover{border-color:var(--hot);color:var(--ink)}
.theme-sw i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#ffbe6b,#ff5a1f);box-shadow:0 0 10px rgba(255,90,31,.5);font-style:normal;transition:.25s}
:root[data-theme="day"] .theme-sw i{background:linear-gradient(135deg,#7d4dff,#1b8ae6);box-shadow:0 0 10px rgba(27,138,230,.5)}
.rail .theme-sw{padding:8px;border-radius:12px;margin-bottom:6px}
.rail .theme-sw span{display:none}

:root[data-theme="day"] .hero{background:linear-gradient(135deg,#fff7f2,#f3f7ff 60%,#f6f2ff);border-color:rgba(255,90,31,.25)}
:root[data-theme="day"] .hero h2,:root[data-theme="day"] .hero p{color:var(--ink)}
:root[data-theme="day"] .gate h2,:root[data-theme="day"] .gate p{color:#f2f5fa}

/* brain view follows the theme */
:root[data-theme="day"] .brainwrap{background:radial-gradient(circle at 50% 45%,#ffffff,#eef2f8)}
.legend div{color:var(--ink)!important;font-weight:800}
.legend{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.nodecard{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--ink)!important;box-shadow:0 12px 30px rgba(15,21,34,.14)}
.nodecard b{color:var(--ink)!important}
.nodecard small{color:var(--mute)!important}
.brainwrap canvas{cursor:pointer}

/* rail tabs: smooth, reactive */
.rail button{transition:transform .16s cubic-bezier(.2,.9,.3,1.3),background .18s,color .18s,box-shadow .18s;border-radius:14px}
.rail button:hover{transform:translateY(-2px) scale(1.08);background:rgba(255,90,31,.10)}
.rail button:active{transform:scale(.94)}
.rail button.on{transform:scale(1.06)}
.rail button.on::before{transition:height .2s,top .2s}
.rail button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
:root[data-theme="day"] .rail button:hover{background:rgba(255,90,31,.10);color:var(--ink)}
.view{animation:viewin .28s ease}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* rail tooltips: solid, big, readable in both themes */
.rail .tip{background:var(--ink)!important;color:var(--bg)!important;border:0!important;font:800 13px/1 var(--mono)!important;padding:9px 13px!important;border-radius:10px!important;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateX(-6px);letter-spacing:.2px}
.rail button:hover .tip{opacity:1;transform:translateX(0)}
.rail .theme-sw .tip{display:inline-block!important}

/* talk bar can be dismissed and brought back */
.talkbar{transition:transform .28s cubic-bezier(.2,.9,.3,1.2),opacity .2s}
.talkbar.hidden{transform:translateY(120%);opacity:0;pointer-events:none}
.talkbar .close{flex:none;width:30px;height:30px;border-radius:50%;background:var(--panel2);color:var(--mute);font:900 14px/1 var(--mono);display:grid;place-items:center;transition:.16s}
.talkbar .close:hover{background:var(--bad);color:#fff}
.talk-reopen{position:fixed;left:50%;bottom:18px;transform:translate(-50%,0);z-index:80;display:none;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 30px rgba(15,21,34,.18);font:800 12px/1 var(--mono);color:var(--ink);transition:.16s}
.talk-reopen.on{display:flex}
.talk-reopen:hover{transform:translate(-50%,-3px);border-color:var(--hot)}

/* secondary buttons, bars and talk bar readable in day mode */
:root[data-theme="day"] .btn:not(.primary){background:#fff;color:var(--ink);border:1px solid #cbd2dc}
:root[data-theme="day"] .btn:not(.primary):hover:not(:disabled){background:#fff3ec;border-color:var(--hot);color:var(--hot)}
:root[data-theme="day"] .bar{background:#e4e8ef}
:root[data-theme="day"] .talkbar{background:#fff;border:1px solid var(--line)}
:root[data-theme="day"] .talkbar input{color:var(--ink)}
:root[data-theme="day"] .talkbar input::placeholder{color:#4b5565}
:root[data-theme="day"] .talkbar .mic{color:var(--ink)}

/* ============================================================ 3D companion
   .c3d carries --size, --aura, --aura2. State classes drive the aura so the
   player always knows: idle / listening / thinking / talking. */
.c3d{position:relative;width:var(--size);height:var(--size);display:grid;place-items:center;isolation:isolate}
.c3d-img{position:relative;z-index:2;width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 calc(var(--size)*.06) calc(var(--size)*.12) rgba(15,21,34,.35));transform-origin:50% 90%;animation:c3d-idle 3.6s ease-in-out infinite}
.c3d-aura{position:absolute;inset:0;border-radius:50%;z-index:0;background:radial-gradient(circle,var(--aura) 0%,var(--aura2) 38%,transparent 72%);opacity:.55;filter:blur(calc(var(--size)*.06));animation:c3d-breathe 3.6s ease-in-out infinite}
.c3d-ring{position:absolute;inset:4%;border-radius:50%;z-index:1;opacity:0;transition:opacity .3s}
.c3d-dots{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .3s;animation:c3d-spin 2.4s linear infinite}
.c3d-dots i{position:absolute;left:50%;top:0;width:calc(var(--size)*.07);height:calc(var(--size)*.07);margin-left:calc(var(--size)*-.035);border-radius:50%;background:#fff;box-shadow:0 0 12px var(--aura)}
.c3d-dots i:nth-child(2){transform:rotate(120deg);transform-origin:50% calc(var(--size)*.5)}
.c3d-dots i:nth-child(3){transform:rotate(240deg);transform-origin:50% calc(var(--size)*.5)}
@keyframes c3d-idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3%) rotate(1deg)}}
@keyframes c3d-breathe{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.02);opacity:.6}}
@keyframes c3d-spin{to{transform:rotate(360deg)}}
@keyframes c3d-pulse{0%,100%{transform:scale(.95);opacity:.75}50%{transform:scale(1.18);opacity:1}}
@keyframes c3d-bob{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-4%) scale(1.03,.98)}50%{transform:translateY(0) scale(.98,1.03)}75%{transform:translateY(-2%) scale(1.02,.99)}}
@keyframes c3d-listen{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.25);opacity:0}}
/* listening: green ring rippling outward */
.c3d.state-listening .c3d-aura{background:radial-gradient(circle,#12b366 0%,#22d97a 34%,transparent 70%);animation:c3d-breathe 1.4s ease-in-out infinite}
.c3d.state-listening .c3d-ring{opacity:1;border:3px solid #22d97a;animation:c3d-listen 1.2s ease-out infinite}
.c3d.state-listening .c3d-img{animation:c3d-idle 1.8s ease-in-out infinite}
/* thinking: dashed ring turning, dots orbiting */
.c3d.state-thinking .c3d-aura{background:radial-gradient(circle,#7d4dff 0%,#1b8ae6 40%,transparent 72%);animation:c3d-breathe 2s ease-in-out infinite}
.c3d.state-thinking .c3d-ring{opacity:1;border:3px dashed #c1a6ff;animation:c3d-spin 3s linear infinite}
.c3d.state-thinking .c3d-dots{opacity:1}
.c3d.state-thinking .c3d-img{animation:none;transform:rotate(-6deg) translateY(2%)}
/* talking: aura pulses to the voice, character bobs */
.c3d.state-talking .c3d-aura{opacity:.9;animation:c3d-pulse .55s ease-in-out infinite}
.c3d.state-talking .c3d-ring{opacity:1;border:2px solid rgba(255,255,255,.55);animation:c3d-pulse .55s ease-in-out infinite reverse}
.c3d.state-talking .c3d-img{animation:c3d-bob .5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.c3d *{animation-duration:6s!important}}
.c3d-legend{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px;font:800 10px/1 var(--mono);letter-spacing:.4px;color:var(--mute);text-transform:uppercase}
.c3d-legend span{display:inline-flex;align-items:center;gap:5px}
.c3d-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.c3d-legend .l-idle{background:var(--hot);opacity:.6}.c3d-legend .l-listen{background:#22d97a}.c3d-legend .l-think{background:#7d4dff}.c3d-legend .l-talk{background:var(--hot);box-shadow:0 0 8px var(--hot)}