/* Pineal Defender — design system. Dark, quiet, premium. Mobile first. */
:root{
  --bg:#05060F;--bg2:#0A0E24;--card:rgba(255,255,255,.045);--card2:rgba(255,255,255,.075);--line:rgba(255,255,255,.09);
  --ink:#EEF0FA;--muted:#9AA0C2;--dim:#6B7196;
  --indigo:#3B3FDB;--violet:#7C5CFF;--electric:#3EA6FF;--gold:#E8C97A;--ok:#6FE0B0;--danger:#FF7A8A;
  --r:22px;--r-sm:14px;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--display:'Sora','Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.noscroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.01em}
h1{font-size:30px;line-height:1.15;font-weight:600}
h2{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:30px 0 12px}
p{margin:0 0 12px}.muted{color:var(--muted)}.dim{color:var(--dim)}.small{font-size:14px}.xs{font-size:12px}.center{text-align:center}
:focus-visible{outline:2px solid var(--electric);outline-offset:3px;border-radius:10px}

/* atmosphere */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(120% 60% at 50% -10%,rgba(76,70,230,.35),transparent 60%),
  radial-gradient(80% 50% at 100% 100%,rgba(62,166,255,.12),transparent 60%),
  radial-gradient(70% 45% at 0% 70%,rgba(124,92,255,.16),transparent 60%),var(--bg)}
#sky i{position:absolute;inset:0;background-image:
  radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 78% 12%,rgba(255,255,255,.6),transparent),
  radial-gradient(1.4px 1.4px at 44% 36%,rgba(180,200,255,.7),transparent),radial-gradient(1px 1px at 88% 52%,rgba(255,255,255,.5),transparent),
  radial-gradient(1.2px 1.2px at 24% 72%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 62% 84%,rgba(200,180,255,.6),transparent),
  radial-gradient(1px 1px at 6% 46%,rgba(255,255,255,.5),transparent),radial-gradient(1.2px 1.2px at 94% 90%,rgba(255,255,255,.55),transparent);
  animation:twinkle 7s ease-in-out infinite}
#sky i:nth-child(2){transform:scale(1.4) rotate(18deg);opacity:.55;animation-duration:11s}
#sky i:nth-child(3){transform:scale(.8) rotate(-12deg);opacity:.4;animation-duration:9s;animation-delay:-3s}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.95}}

#app{position:relative;z-index:1;max-width:560px;margin:0 auto;min-height:100vh;padding:calc(22px + env(safe-area-inset-top)) 20px calc(104px + env(safe-area-inset-bottom))}
#app.bare{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.boot{text-align:center;color:var(--muted);padding-top:42vh;font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:13px;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.view{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* primitives */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.stack>*+*{margin-top:12px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--electric)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 22px;border:0;border-radius:18px;font-weight:700;letter-spacing:.08em;font-size:14px;text-transform:uppercase;
  color:#fff;background:linear-gradient(120deg,var(--indigo),var(--violet) 55%,var(--electric));box-shadow:0 14px 34px -14px rgba(94,90,255,.9),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s,filter .2s}
.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:var(--card);box-shadow:none;border:1px solid var(--line);color:var(--ink)}
.btn.gold{background:linear-gradient(120deg,#b98d3c,var(--gold));color:#1a1405;box-shadow:0 14px 30px -14px rgba(232,201,122,.7)}
.btn.sm{width:auto;min-height:40px;padding:0 16px;font-size:12px;border-radius:12px}
.btn.danger{background:transparent;border:1px solid rgba(255,122,138,.5);color:var(--danger);box-shadow:none}
.btn svg{width:20px;height:20px;flex:none}
.link{background:none;border:0;padding:0;color:var(--electric);text-decoration:underline;text-underline-offset:3px}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:16px 0 6px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:14px 16px;outline:0;transition:border-color .2s,background .2s}
input:focus,select:focus,textarea:focus{border-color:var(--violet);background:rgba(255,255,255,.07)}
textarea{min-height:130px;resize:vertical;line-height:1.5}
select option{background:#0d1130;color:#fff}
input[type=checkbox]{width:auto;accent-color:var(--violet)}
.err{color:var(--danger);font-size:14px;margin-top:10px}.ok{color:var(--ok);font-size:14px}
.row{display:flex;align-items:center;gap:12px}.grow{flex:1;min-width:0}.between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:99px;background:var(--card2);color:var(--muted)}
.pill.gold{background:rgba(232,201,122,.14);color:var(--gold)}.pill.on{background:rgba(111,224,176,.14);color:var(--ok)}
.pill svg{width:12px;height:12px}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--electric));transition:width .6s ease}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 16px;border-radius:99px;font-size:14px;font-weight:600;transition:all .2s}
.chip.on{background:linear-gradient(120deg,rgba(59,63,219,.55),rgba(124,92,255,.55));border-color:rgba(124,92,255,.8);box-shadow:0 8px 22px -12px rgba(124,92,255,.9)}
.scroll-x{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 6px;margin:0 -20px;scrollbar-width:none}.scroll-x::-webkit-scrollbar{display:none}.scroll-x .chip{flex:none}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;margin:0 0 14px;padding:6px 0;background:none;border:0}
.back svg{width:18px;height:18px;transform:rotate(180deg)}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brandmark{font-family:var(--display);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* orbs: each category / journey / session gets its own glow from --h (hue) */
.orb{position:relative;display:block;flex:none;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,hsla(var(--h),90%,78%,.95),hsla(var(--h),80%,52%,.85) 45%,hsla(calc(var(--h) + 30),70%,28%,.95) 100%);
  box-shadow:0 0 28px -4px hsla(var(--h),90%,60%,.65),inset 0 0 12px rgba(255,255,255,.25)}
.orb i{position:absolute;inset:-6px;border-radius:50%;border:1px solid hsla(var(--h),90%,70%,.35);animation:ring 5s ease-in-out infinite}
@keyframes ring{0%,100%{transform:scale(.92);opacity:.2}50%{transform:scale(1.08);opacity:.8}}
.orb.lg{width:76px;height:76px}.orb.sm{width:40px;height:40px}

/* tab bar */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:8px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(5,6,15,0),rgba(5,6,15,.82) 38%);}
nav.tabs div{max-width:560px;margin:0 auto;display:flex;padding:6px;border-radius:24px;background:rgba(14,18,44,.78);border:1px solid var(--line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
nav.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:18px;font-size:11px;font-weight:600;color:var(--dim);transition:all .2s}
nav.tabs a svg{width:23px;height:23px}
nav.tabs a.on{color:#fff;background:linear-gradient(160deg,rgba(59,63,219,.45),rgba(124,92,255,.3))}
nav.tabs a.on svg{color:var(--electric)}

/* today */
.hello{margin:6px 0 4px}.hello small{display:block;color:var(--muted);font-size:15px;margin-top:6px}
.moods{display:flex;gap:8px;overflow-x:auto;margin:14px -20px 0;padding:2px 20px 8px;scrollbar-width:none}.moods::-webkit-scrollbar{display:none}
.moods .chip{flex:none}
.reco{position:relative;overflow:hidden;border-radius:28px;padding:24px 22px 22px;border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(120% 90% at 85% 0%,hsla(var(--h),85%,55%,.4),transparent 60%),linear-gradient(160deg,rgba(30,34,96,.85),rgba(12,14,40,.9))}
.reco .orb{position:absolute;right:-18px;top:-18px;width:130px;height:130px;opacity:.55;filter:blur(1px)}
.reco h1{font-size:32px;margin:8px 0 2px;letter-spacing:.02em}
.reco p{color:#C9CDEB;max-width:30ch}
.reco .meta{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.stats4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat b{display:block;font-family:var(--display);font-size:28px;font-weight:600;line-height:1.1}
.stat span{font-size:13px;color:var(--muted)}
.nudge{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:linear-gradient(120deg,rgba(124,92,255,.22),rgba(62,166,255,.12));border:1px solid rgba(124,92,255,.35)}
.nudge b{display:block}

/* lists */
.sess{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;margin-bottom:10px;border-radius:20px;background:var(--card);border:1px solid var(--line);transition:background .2s,transform .15s}
.sess:active{transform:scale(.985)}.sess:hover{background:var(--card2)}
.sess b{display:block;font-family:var(--display);font-size:15px;letter-spacing:.04em}
.sess small{color:var(--muted);font-size:13px;display:block}
.sess.locked{opacity:.62}
.sess .heart{background:none;border:0;padding:8px;color:var(--dim);width:40px;height:40px;display:grid;place-items:center}
.sess .heart svg{width:22px;height:22px}.sess .heart.on{color:#ff6f9a}.sess .heart.on svg{fill:currentColor}
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.catcard{position:relative;overflow:hidden;text-align:left;padding:16px;border-radius:20px;border:1px solid var(--line);min-height:104px;
  background:radial-gradient(110% 110% at 100% 0%,hsla(var(--h),80%,52%,.32),transparent 65%),var(--card)}
.catcard b{display:block;font-family:var(--display);font-size:16px}.catcard small{color:var(--muted);font-size:12.5px;display:block;margin-top:2px}
.search{position:relative}.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--dim)}
.search input{padding-left:44px}

/* sheet */
.sheetwrap{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(2,3,10,.66);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s}
.sheet{position:relative;width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:30px 30px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#141a46,#0a0d27);border:1px solid var(--line);border-bottom:0;transform:translateY(40px);opacity:0;transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .22s}
.sheetwrap.in .sheet-bg{opacity:1}.sheetwrap.in .sheet{transform:none;opacity:1}
.sheet-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--card2);display:grid;place-items:center;padding:0}
.sheet-x svg{width:18px;height:18px}
.sheet h1{font-size:30px;letter-spacing:.03em;margin:8px 36px 4px 0}
.sheet .btn{margin-top:18px}
.opt{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:15px 16px;margin-top:8px;border-radius:16px;border:1px solid var(--line);background:var(--card);font-weight:600}
.opt.on{border-color:rgba(124,92,255,.9);background:rgba(124,92,255,.18)}
.opt.on::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--violet);box-shadow:0 0 12px var(--violet)}
.ideal{list-style:none;margin:6px 0 0;padding:0}.ideal li{position:relative;padding:5px 0 5px 22px;color:#C9CDEB}
.ideal li::before{content:'';position:absolute;left:4px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--electric)}
.tip{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13.5px;margin-top:14px}.tip svg{width:20px;height:20px;flex:none;color:var(--electric)}

/* onboarding */
.onb{min-height:calc(100vh - 60px);display:flex;flex-direction:column;justify-content:center}
.onb h1{font-size:34px;margin-bottom:10px}.onb .steps{display:flex;gap:6px;margin-bottom:34px}
.onb .steps i{flex:1;height:3px;border-radius:3px;background:var(--line)}.onb .steps i.on{background:linear-gradient(90deg,var(--violet),var(--electric))}
.hero-orb{display:grid;place-items:center;margin:0 auto 30px}
.bigorb{position:relative;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(190,200,255,.95),rgba(94,90,255,.9) 42%,rgba(20,24,90,.95) 100%);
  box-shadow:0 0 90px -10px rgba(94,90,255,.9),inset 0 0 40px rgba(255,255,255,.18);animation:orbbreathe 7s ease-in-out infinite}
.bigorb::before,.bigorb::after{content:'';position:absolute;inset:-22px;border-radius:50%;border:1px solid rgba(124,140,255,.4);animation:ring 7s ease-in-out infinite}
.bigorb::after{inset:-46px;border-color:rgba(124,140,255,.22);animation-delay:-2.2s}
@keyframes orbbreathe{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}

/* player */
.player{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;
  padding:calc(24px + env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom));
  background:radial-gradient(90% 55% at 50% 38%,hsla(var(--h),80%,40%,.38),transparent 70%),linear-gradient(180deg,#05060F,#0A0E2A 60%,#05060F)}
.player .top{width:100%;display:flex;justify-content:space-between;align-items:center}
.player .name{font-family:var(--display);font-size:22px;letter-spacing:.14em;margin-top:6px}
.player .remain{font-family:var(--display);font-size:42px;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;margin-top:6px}
.player .remain small{display:block;font-family:var(--font);font-size:12px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:-2px}
.stage{position:relative;width:min(70vw,300px);aspect-ratio:1;display:grid;place-items:center;margin:8px 0}
.core{position:relative;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,hsla(var(--h),95%,82%,.95),hsla(var(--h),85%,55%,.9) 48%,hsla(calc(var(--h) + 30),75%,26%,.95));
  box-shadow:0 0 calc(40px + var(--amp,0)*60px) hsla(var(--h),95%,60%,.75);transform:scale(calc(1 + var(--amp,0)*.25));transition:transform .12s linear}
.wave{position:absolute;inset:0;border-radius:50%;border:1px solid hsla(var(--h),90%,70%,.45);animation:wave 7.5s ease-out infinite}
.wave:nth-child(2){animation-delay:-2.5s}.wave:nth-child(3){animation-delay:-5s}
@keyframes wave{0%{transform:scale(.46);opacity:.9}100%{transform:scale(1.04);opacity:0}}
.player.paused .wave{animation-play-state:paused;opacity:.3}
.instr{min-height:56px;font-size:19px;color:#DCE0FA;transition:opacity .6s}
.instr.fade{opacity:0}
.pc{display:flex;align-items:center;justify-content:center;gap:30px}
.pc button{border:0;background:var(--card2);color:var(--ink);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;padding:0}
.pc button svg{width:28px;height:28px}
.pc .main{width:84px;height:84px;background:linear-gradient(140deg,var(--indigo),var(--violet),var(--electric));box-shadow:0 16px 40px -12px rgba(94,90,255,.9)}
.pc .main svg{width:36px;height:36px}
.vol{display:flex;align-items:center;gap:12px;width:min(100%,320px);margin-top:20px;color:var(--muted)}.vol svg{width:20px;height:20px;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:transparent;height:26px;width:100%}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:rgba(255,255,255,.18)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.18)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff}
.player .foot{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;color:var(--muted);font-size:13px}
.player .foot label{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
.endbtn{background:none;border:0;color:var(--dim);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:10px}

/* complete */
.done{min-height:80vh;display:flex;flex-direction:column;justify-content:center;text-align:center}
.tick{width:92px;height:92px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,rgba(111,224,176,.3),rgba(62,166,255,.25));
  border:1px solid rgba(111,224,176,.5);box-shadow:0 0 60px -8px rgba(111,224,176,.6);color:var(--ok);animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
.tick svg{width:44px;height:44px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.unlock{position:relative;text-align:center;padding:26px 20px;border-radius:26px;margin-top:16px;overflow:hidden;
  background:radial-gradient(100% 120% at 50% 0%,rgba(232,201,122,.28),transparent 65%),var(--card);border:1px solid rgba(232,201,122,.45);animation:rise .7s both}
.unlock .eyebrow{color:var(--gold)}.unlock h1{font-size:26px;margin:8px 0}
.shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);animation:shine 2.4s ease .3s both;transform:translateX(-120%)}
@keyframes shine{to{transform:translateX(120%)}}

/* journeys */
.jcard{position:relative;overflow:hidden;display:block;padding:20px;border-radius:24px;margin-bottom:12px;border:1px solid var(--line);
  background:radial-gradient(120% 120% at 100% 0%,hsla(var(--h),80%,52%,.34),transparent 62%),var(--card)}
.jcard h3{font-size:18px;letter-spacing:.06em}.jcard p{color:var(--muted);font-size:14px;margin:6px 0 14px}
.step{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;margin-bottom:8px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.step .n{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:600;background:var(--card2);color:var(--muted)}
.step.done .n{background:rgba(111,224,176,.18);color:var(--ok)}.step.next{border-color:rgba(124,92,255,.7);background:rgba(124,92,255,.12)}
.step.next .n{background:linear-gradient(140deg,var(--indigo),var(--violet));color:#fff}
.step.locked{opacity:.55}.step small{display:block;color:var(--muted);font-size:13px}.step .n svg{width:20px;height:20px}

/* journal */
.seg{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-bottom:18px}
.seg button{flex:1;border:0;background:none;padding:10px 4px;border-radius:12px;font-size:13.5px;font-weight:700;color:var(--muted)}
.seg button.on{background:linear-gradient(140deg,rgba(59,63,219,.55),rgba(124,92,255,.45));color:#fff}
.entry{width:100%;text-align:left;padding:16px;margin-bottom:10px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.entry b{display:block}.entry p{color:#C9CDEB;font-size:14.5px;margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:12px;color:var(--dim)}
.cal .d{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03)}
.cal .d.has{background:linear-gradient(140deg,rgba(59,63,219,.7),rgba(124,92,255,.7));color:#fff;font-weight:700}
.cal .d.lucid{box-shadow:0 0 0 2px var(--gold) inset}.cal .d.today{outline:1px solid var(--electric)}
.meter{display:flex;align-items:center;gap:12px;margin:8px 0;font-size:14px}.meter .bar{flex:1}.meter span:first-child{width:92px;flex:none}.meter span:last-child{width:28px;text-align:right;color:var(--muted)}
.rating{display:flex;gap:8px}.rating button{flex:1;height:50px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-weight:700;font-size:16px}
.rating button.on{background:linear-gradient(140deg,var(--indigo),var(--violet));border-color:transparent}
.badge{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--card);border:1px solid var(--line);margin-bottom:8px}
.badge .orb{width:44px;height:44px}.badge.off{opacity:.45}.badge small{display:block;color:var(--muted);font-size:13px}

/* misc */
.paywall{text-align:center}.paywall .orb{margin:6px auto 16px}
.plan{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--card);margin-top:10px;width:100%;text-align:left}
.plan.best{border-color:rgba(232,201,122,.6);background:rgba(232,201,122,.08)}
.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.admin-form{margin-bottom:12px}.admin-form summary{cursor:pointer;font-weight:700;list-style:none}.admin-form summary::-webkit-details-marker{display:none}
.demo-banner{margin:0 0 16px;padding:10px 14px;border-radius:14px;font-size:13px;color:var(--gold);background:rgba(232,201,122,.1);border:1px solid rgba(232,201,122,.3)}
#toast{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;max-width:88%;padding:12px 18px;border-radius:16px;font-size:14px;
  background:rgba(22,27,68,.95);border:1px solid var(--line);backdrop-filter:blur(12px);box-shadow:0 12px 30px -10px rgba(0,0,0,.7);transition:opacity .25s,transform .25s}
#toast.out{opacity:0;transform:translate(-50%,8px)}
@media (min-width:720px){#app{padding-top:40px}h1{font-size:34px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.center .orb{margin-left:auto;margin-right:auto}
.nudge>svg{width:28px;height:28px;flex:none;color:var(--electric)}
.step .n svg,.badge svg,.row>svg{width:20px;height:20px}
.pill svg{width:12px;height:12px}
.sess>svg{width:20px;height:20px;flex:none;color:var(--dim)}

/* logo, avatar, install steps, FAQ */
.logo{display:block;margin:0 auto;border-radius:24px;box-shadow:0 18px 50px -18px rgba(60,80,255,.6);width:112px;height:112px;object-fit:cover}
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;display:grid;place-items:center;flex:none}
.avatar.big{width:84px;height:84px}
.avatar.ph{background:linear-gradient(140deg,var(--indigo),var(--violet));font-family:var(--display);font-size:30px;font-weight:600;color:#fff}
.avatar-pick{position:relative;cursor:pointer;margin:0;flex:none}
.avatar-pick .cam{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--electric);color:#05060F;display:grid;place-items:center;border:2px solid var(--bg)}
.avatar-pick .cam svg{width:16px;height:16px}
.istep{display:flex;gap:14px;align-items:flex-start;margin-top:16px}
.istep .n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:linear-gradient(140deg,var(--indigo),var(--violet))}
.faq{border-bottom:1px solid var(--line);padding:6px 0}.faq:last-child{border:0}
.faq summary{cursor:pointer;font-weight:600;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:'+';color:var(--electric);font-size:20px;line-height:1}
.faq[open] summary::after{content:'–'}.faq p{margin:0 0 10px}


.gp{font-size:16.5px;line-height:1.7;color:#D5D8F0;margin:0 0 14px}
.gh{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--electric);margin:24px 0 8px}
.gsteps{margin:8px 0 0;padding:0;counter-reset:s;list-style:none}
.gsteps li{counter-increment:s;position:relative;padding:12px 14px 12px 54px;margin-bottom:8px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:#E3E6FA}
.gsteps li::before{content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:linear-gradient(140deg,var(--indigo),var(--violet))}
.gn{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--card2);color:var(--muted)}
.gn.done{background:rgba(111,224,176,.18);color:var(--ok)}.gn svg{width:18px;height:18px}