/* ============ tokens ============ */
:root{
  color-scheme:light;
  --bg:#f6f1ea; --ink:#1c1a2e; --muted:#5f5d78; --faint:#8d8ba3;
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.9); --line:rgba(28,26,46,.09); --nav:rgba(255,255,255,.78);
  --solid:#1c1a2e; --solid-ink:#fff;
  --a1:#7a68f0; --a2:#2fb5a2; --a3:#f58a66; --aur:.34;
  --danger:#c4432b; --danger-bg:rgba(230,90,60,.13);
  --shadow:0 1px 2px rgba(28,26,46,.04), 0 12px 32px -12px rgba(28,26,46,.14);
  --shadow-lg:0 20px 50px -18px rgba(28,26,46,.32);
  --r:24px;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --o1:#8b7bff; --o2:#5fd4c4; --o3:#ffa98a;
  --c-line:#6a58e6; --c-sleep:#2a9d8f; --c-late:#e0794f; --c-pos:#2a9d8f; --c-neg:#e0794f;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0b0c18; --ink:#f4f2fb; --muted:#a9a8c2; --faint:#74738f;
    --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.11); --line:rgba(255,255,255,.1); --nav:rgba(22,23,42,.72);
    --solid:#f4f2fb; --solid-ink:#14152a;
    --a1:#7c6cf0; --a2:#2fa898; --a3:#e8805e; --aur:.24;
    --danger:#ff9a86; --danger-bg:rgba(255,110,85,.15);
    --shadow:0 1px 2px rgba(0,0,0,.25), 0 14px 36px -14px rgba(0,0,0,.55);
    --shadow-lg:0 24px 60px -18px rgba(0,0,0,.75);
    --c-line:#a79bff; --c-sleep:#4fc7b5; --c-late:#f39a74; --c-pos:#4fc7b5; --c-neg:#f39a74;
  }
}

/* ============ base ============ */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overflow:hidden}
button,input,textarea{font:inherit; color:inherit}
button{cursor:pointer; border:0; background:none; padding:0}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.15; margin:0; letter-spacing:-.015em}
h1{font-size:clamp(1.9rem, 7vw, 2.5rem)}
h2{font-size:1.3rem}
p{margin:0}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--a1); outline-offset:3px; border-radius:10px}
.muted{color:var(--muted)} .small{font-size:.86rem}
.kicker{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.lead{color:var(--muted); margin-top:10px; font-size:1.04rem}
.ic{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ============ atmosphere ============ */
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--bg); pointer-events:none}
.aurora i{position:absolute; width:62vmax; height:62vmax; border-radius:50%; filter:blur(90px); opacity:var(--aur);
  animation:drift 28s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:var(--a1); top:-28vmax; left:-22vmax}
.aurora i:nth-child(2){background:var(--a2); bottom:-34vmax; right:-26vmax; animation-delay:-9s}
.aurora i:nth-child(3){background:var(--a3); width:34vmax; height:34vmax; top:38%; left:58%; opacity:calc(var(--aur) * .55); animation-delay:-17s}
@keyframes drift{to{transform:translate(6vmax, 4vmax) scale(1.12)}}

/* ============ the orb: the companion's presence ============ */
.orb{--s:120px; width:var(--s); height:var(--s); border-radius:50%; position:relative; overflow:hidden; flex:none; isolation:isolate;
  background:var(--o1);
  box-shadow:0 0 calc(var(--s) * .55) calc(var(--s) * -.12) var(--o1), 0 0 calc(var(--s) * .9) calc(var(--s) * -.2) var(--o2)}
.orb::before{content:""; position:absolute; inset:-30%;
  background:conic-gradient(from 0deg, var(--o1), var(--o2), var(--o3), var(--o2), var(--o1));
  filter:blur(calc(var(--s) * .11)); animation:spin 14s linear infinite}
.orb::after{content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.7), transparent 42%), radial-gradient(circle at 72% 84%, rgba(10,10,40,.3), transparent 55%)}
@keyframes spin{to{transform:rotate(360deg)}}
[data-mood="1"]{--o1:#3f51c9; --o2:#6a5cf0; --o3:#27357f}
[data-mood="2"]{--o1:#7c6cf0; --o2:#5b7bea; --o3:#b08cff}
[data-mood="3"]{--o1:#5fb9d4; --o2:#5fd4c4; --o3:#8f9bff}
[data-mood="4"]{--o1:#52cfa0; --o2:#b6e37a; --o3:#5fd4c4}
[data-mood="5"]{--o1:#ffb067; --o2:#ffd86b; --o3:#ff8fa3}

/* ============ shell ============ */
.app{height:100dvh; display:flex; flex-direction:column}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 18px 10px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.4rem; text-decoration:none; letter-spacing:-.01em}
.brand .orb{--s:26px}
.top-actions{display:flex; align-items:center; gap:8px}
.sos{display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 16px; border-radius:999px;
  background:var(--danger-bg); color:var(--danger); font-weight:600; font-size:.9rem; white-space:nowrap; border:1px solid transparent}
.sos::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor} 70%,100%{box-shadow:0 0 0 8px transparent}}
.icon-btn{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); text-decoration:none; flex:none}
.icon-btn:active,.btn:active,.tile:active,.sos:active{transform:scale(.97)}

main{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain}
main.fixed{overflow:hidden}
.view{max-width:720px; margin:0 auto; padding:10px 18px 130px}
.stack>*+*{margin-top:18px}

.nav{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom)); z-index:20;
  display:flex; align-items:center; gap:2px; padding:7px; border-radius:999px; background:var(--nav);
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5); border:1px solid var(--line); box-shadow:var(--shadow-lg)}
.nav a{width:60px; height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:.66rem; font-weight:500; color:var(--muted); text-decoration:none; border-radius:999px; transition:background .2s, color .2s}
.nav a.on{color:var(--ink); background:var(--glass-2)}
.nav a.voice{width:62px; height:62px; margin:-16px 6px; color:#fff; background:linear-gradient(140deg, #8b7bff, #4fc7b5);
  box-shadow:0 10px 26px -8px #7c6cf0, inset 0 1px 0 rgba(255,255,255,.35)}
.nav a.voice .ic{width:26px; height:26px}
.nav a.voice span,.nav .desk,.nav .brand{display:none}
body[data-view="talk"] .nav, body[data-view="voice"] .nav{display:none}

@media (min-width:960px){
  .app{display:grid; grid-template-columns:264px 1fr; grid-template-rows:auto 1fr}
  .nav, body[data-view] .nav{position:static; transform:none; grid-row:1 / 3; display:flex; flex-direction:column; align-items:stretch; gap:4px;
    padding:26px 16px; border-radius:0; border:0; border-right:1px solid var(--line); box-shadow:none; background:var(--glass)}
  .nav a{width:auto; height:auto; flex-direction:row; justify-content:flex-start; gap:13px; padding:12px 14px; font-size:.96rem; border-radius:14px}
  .nav a.voice{width:auto; height:auto; margin:10px 0; padding:14px; justify-content:center; font-weight:600}
  .nav a.voice span,.nav .desk{display:flex}
  .nav a.voice .ic{width:22px; height:22px}
  .nav .brand{display:flex; padding:4px 14px 26px; font-size:1.55rem}
  .top{justify-content:flex-end; padding:20px 32px 6px}
  .top .brand,.mob{display:none !important}
  .view{padding:14px 32px 70px}
}

/* ============ pieces ============ */
.glass{background:var(--glass); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
.card{padding:22px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 26px; border-radius:999px;
  background:var(--solid); color:var(--solid-ink); font-weight:600; text-decoration:none; transition:transform .15s, opacity .2s}
.btn.ghost{background:var(--glass); color:var(--ink); border:1px solid var(--line)}
.btn.danger{background:#d9523a; color:#fff}
.btn.sm{min-height:42px; padding:0 18px; font-size:.92rem}
.btn:disabled{opacity:.45; cursor:default}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--glass); font-size:.93rem; text-align:left; text-decoration:none; transition:background .2s}
.chip.on{background:var(--solid); color:var(--solid-ink); border-color:transparent}
.field{width:100%; padding:14px 16px; border-radius:18px; border:1px solid var(--line); background:var(--glass); resize:vertical}
.field:focus{outline:none; border-color:var(--a1)}
.field::placeholder,textarea::placeholder{color:var(--faint)}
.linkbtn{color:var(--muted); font-size:.88rem; text-decoration:underline; text-underline-offset:3px}
.page-head{padding:14px 0 6px}

/* ============ home ============ */
.hero{padding:30px 22px 26px; text-align:center; display:flex; flex-direction:column; align-items:center}
.hero h1{margin-top:10px}
.hero .orb{--s:128px; margin:30px 0 20px; transition:box-shadow .5s}
.mood-word{font-family:var(--serif); font-size:1.5rem}
.range{width:100%; max-width:400px; margin-top:16px}
.range input{-webkit-appearance:none; appearance:none; width:100%; height:34px; background:none; margin:0; cursor:pointer}
.range input::-webkit-slider-runnable-track{height:8px; border-radius:99px; background:linear-gradient(90deg,#4557d6,#8b7bff,#5fd4c4,#9fe08a,#ffc06b)}
.range input::-moz-range-track{height:8px; border-radius:99px; background:linear-gradient(90deg,#4557d6,#8b7bff,#5fd4c4,#9fe08a,#ffc06b)}
.range input::-webkit-slider-thumb{-webkit-appearance:none; width:30px; height:30px; margin-top:-11px; border-radius:50%; background:#fff; border:0; box-shadow:0 3px 12px rgba(0,0,0,.4)}
.range input::-moz-range-thumb{width:30px; height:30px; border-radius:50%; background:#fff; border:0; box-shadow:0 3px 12px rgba(0,0,0,.4)}
.range div{display:flex; justify-content:space-between; font-size:.78rem; color:var(--faint); margin-top:2px}
.hero > .btn{margin-top:20px; min-width:180px}
.after{margin-top:22px; padding-top:22px; border-top:1px solid var(--line); width:100%}
.after p{font-size:1.06rem}
.after .row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tile{display:flex; flex-direction:column; gap:4px; padding:18px; text-decoration:none; transition:transform .15s}
.tile b{font-family:var(--serif); font-weight:400; font-size:1.18rem; line-height:1.2; margin-top:14px}
.tile small{color:var(--muted); font-size:.86rem; line-height:1.4}
.badge{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:var(--c, var(--a1)); background:color-mix(in srgb, var(--c, var(--a1)) 16%, transparent)}
.tile.prime{background:linear-gradient(150deg, #7c6cf0, #4fb9c9 120%); color:#fff; border-color:transparent}
.tile.prime small{color:rgba(255,255,255,.85)}
.tile.prime .badge{background:rgba(255,255,255,.2); color:#fff}
.sect{font-family:var(--serif); font-size:1.3rem; margin-top:30px !important}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; margin-top:16px}
.week div{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.72rem; color:var(--faint)}
.week .orb{--s:30px}
.week .none{width:30px; height:30px; border-radius:50%; border:1.5px dashed var(--line)}

/* ============ chat ============ */
.view.talk{height:100%; display:flex; flex-direction:column; padding:0; max-width:780px}
.chat-head{display:flex; align-items:center; gap:12px; padding:6px 18px 12px}
.chat-head .who{display:flex; align-items:center; gap:12px; flex:1; min-width:0}
.chat-head .orb{--s:38px}
.chat-head h2{font-size:1.2rem}
.chat-head small{color:var(--faint); font-size:.78rem; display:block}
.msgs{flex:1; overflow-y:auto; padding:8px 18px 18px; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain}
.empty{margin:auto 0; padding:10px 0 20px}
.empty .orb{--s:64px; margin-bottom:22px}
.empty h2{font-size:1.75rem}
.empty .chips{margin-top:22px}
.msg{max-width:84%; padding:12px 16px; border-radius:22px; white-space:pre-wrap; overflow-wrap:anywhere; animation:rise .3s ease}
.msg.ai{align-self:flex-start; background:var(--glass); border:1px solid var(--line); border-bottom-left-radius:7px}
.msg.me{align-self:flex-end; background:linear-gradient(140deg,#7c6cf0,#5a7de8); color:#fff; border-bottom-right-radius:7px}
.msg.me + .msg.ai,.msg.ai + .msg.me{margin-top:8px}
.msg.note{align-self:stretch; max-width:none; background:var(--danger-bg); border-radius:20px; font-size:.94rem}
.msg.note b{color:var(--danger)}
.msg.note .chips{margin-top:12px}
.msg.note .chip{font-weight:600; background:var(--glass-2)}
.msg.sys{align-self:center; max-width:none; background:none; color:var(--muted); font-size:.88rem; text-align:center}
.typing{display:flex; gap:5px; padding:17px 16px}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25} 30%{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(8px)}}
.composer{padding:8px 14px calc(12px + env(safe-area-inset-bottom))}
.composer form{display:flex; align-items:flex-end; gap:6px; padding:7px 7px 7px 20px; border-radius:30px}
.composer form:focus-within{border-color:var(--a1)}
.composer textarea{flex:1; min-width:0; border:0; background:none; resize:none; outline:none; padding:9px 0; max-height:140px; line-height:1.45}
.round{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; color:var(--muted)}
.round.send{background:var(--solid); color:var(--solid-ink)}
.round.send:disabled{opacity:.3}
.round.rec{background:#d9523a; color:#fff; animation:pulse 1.4s ease-out infinite}
.round.wait{opacity:.5}
.composer p{text-align:center; margin-top:9px; font-size:.72rem; color:var(--faint)}

/* ============ voice ============ */
.view.voice{height:100%; max-width:640px; display:flex; flex-direction:column; align-items:center; padding:4px 22px calc(26px + env(safe-area-inset-bottom)); text-align:center}
.voice-head{display:flex; align-items:center; justify-content:space-between; width:100%}
.stage{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; width:100%}
.halo{position:relative; width:250px; height:250px; display:grid; place-items:center; cursor:pointer; --lvl:0}
.halo::before,.halo::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--line);
  transform:scale(calc(.94 + var(--lvl) * .2)); transition:transform .12s ease-out}
.halo::after{inset:-22px; opacity:.5; transform:scale(calc(.94 + var(--lvl) * .32))}
.halo .orb{--s:188px; transform:scale(calc(1 + var(--lvl) * .13)); transition:transform .1s ease-out, filter .5s, opacity .5s}
.voice[data-state="idle"] .orb{filter:saturate(.55); opacity:.8}
.voice[data-state="thinking"] .orb::before{animation-duration:2.4s}
.voice[data-state="thinking"] .halo{animation:breathe 1.6s ease-in-out infinite}
.voice[data-state="speaking"] .halo .orb{animation:talk 1.15s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6}}
@keyframes talk{0%,100%{transform:scale(1)} 30%{transform:scale(1.09)} 60%{transform:scale(1.03)}}
.vstate{font-family:var(--serif); font-size:1.6rem}
.cap{min-height:5.2em; max-width:520px; color:var(--muted); font-size:1.05rem; display:flex; flex-direction:column; gap:4px; align-items:center}
.cap .kicker{font-size:.68rem}
.vcrisis{width:100%; padding:14px 16px; border-radius:20px; background:var(--danger-bg); font-size:.92rem; margin-bottom:14px}
.vcrisis .chips{justify-content:center; margin-top:10px}
.vcrisis .chip{font-weight:600; background:var(--glass-2)}
.vctl{display:flex; align-items:center; justify-content:center; gap:18px}
.vctl button:not(.btn), .vctl a{width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line)}
.vctl .btn{min-height:58px; padding:0 34px}
.vctl button.end{width:72px; height:72px; background:#d9523a; color:#fff; border:0; box-shadow:0 12px 28px -10px #d9523a}
.vctl button.off{background:var(--solid); color:var(--solid-ink)}
.vhint{font-size:.84rem; color:var(--faint); margin-top:14px; max-width:420px}

/* ============ breathe ============ */
.breather{display:flex; flex-direction:column; align-items:center; padding:34px 0 8px}
.ring{width:270px; height:270px; border-radius:50%; display:grid; place-items:center; position:relative; border:1px solid var(--line); background:var(--glass)}
.ring .orb{--s:240px; position:absolute; transform:scale(.55); transition:transform .6s ease-in-out}
.ring .txt{position:relative; z-index:1; text-align:center; color:#fff; text-shadow:0 1px 12px rgba(10,10,40,.55)}
.ring .phase{font-family:var(--serif); font-size:1.3rem}
.ring .count{font-size:1rem; min-height:1.5em; opacity:.9}
.breather .btn{margin-top:34px; min-width:170px}

/* ============ steps / journal / help ============ */
.step{display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px; text-align:left; border-radius:20px}
.step p{flex:1}
.step.done{opacity:.55} .step.done p{text-decoration:line-through}
.tick{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; flex:none; color:transparent}
.step.done .tick{background:var(--solid); border-color:transparent; color:var(--solid-ink)}
.tick .ic{width:18px; height:18px}
#stepList > * + *{margin-top:10px}
.pickers{display:flex; gap:10px}
.pickers button{padding:5px; border-radius:50%; border:2px solid transparent}
.pickers button.on{border-color:var(--ink)}
.pickers .orb{--s:30px}
.bars{display:grid; grid-template-columns:repeat(14,1fr); gap:6px; align-items:end; height:100px; margin-top:18px}
.bars i{border-radius:8px; background:var(--c, var(--line)); min-height:6px}
.entry{padding:18px 20px}
.entry header{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.8rem; color:var(--faint); margin-bottom:8px}
.entry header span{display:flex; align-items:center; gap:8px}
.entry .orb{--s:14px}
.entry p{white-space:pre-wrap; overflow-wrap:anywhere}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.line{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0; border-top:1px solid var(--line)}
.line:first-child{border-top:0; padding-top:0}
.line b{display:block; font-weight:600}

/* ============ your days ============ */
.logtile{flex-direction:row; align-items:center; gap:16px}
.logtile b{margin-top:0}
.seg{background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:4px; display:inline-flex; gap:4px}
.seg .chip{border:0; background:none; padding:9px 20px}
.seg .chip.on{background:var(--solid); color:var(--solid-ink)}
.datechip{position:relative; overflow:hidden; cursor:pointer}
.datechip input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.moodrow{display:flex; align-items:center; gap:18px; margin-top:14px}
.moodrow .orb{--s:64px; transition:opacity .3s}
.moodrow .range{margin-top:0; flex:1}
.moodrow .mood-word{font-size:1.2rem; margin-bottom:2px}
.saved{transition:opacity .4s; opacity:0}
.times{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.times label{font-size:.86rem; color:var(--muted); display:flex; flex-direction:column; gap:6px}
.times .field{font-size:1.05rem}
#dHabits{margin-top:14px}
.insights{display:flex; flex-direction:column; gap:14px; margin-top:12px}
.insight{display:flex; gap:14px; align-items:flex-start}
.insight .badge{width:38px; height:38px; border-radius:12px; flex:none}
.insight.up .badge{--c:#2fb5a2} .insight.down .badge{--c:#f08a5d}
.nudge h3{font-family:var(--serif); font-weight:400; font-size:1.2rem; margin:6px 0}
.chart svg{display:block; width:100%; height:auto; margin-top:12px; overflow:visible}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .ref{stroke:var(--faint); stroke-width:1; stroke-dasharray:4 4}
.chart .mid{stroke:var(--faint); stroke-width:1}
.chart .ax{fill:var(--faint); font-size:12px}
.chart .lbl{fill:var(--ink); font-size:13px}
.chart .val{fill:var(--muted); font-size:12px; font-weight:600}
.chart .ln{fill:none; stroke:var(--c-line); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart .dot{fill:var(--c-line); stroke:var(--bg); stroke-width:2}
.chart .dot.sc{fill-opacity:.85}
.chart .bar{fill:var(--c-sleep)} .chart .bar.late{fill:var(--c-late)}
.chart .pos{fill:var(--c-pos)} .chart .neg{fill:var(--c-neg)}
.chart [data-tip]{cursor:pointer}
.chart-empty{padding:26px 0 8px; text-align:center}
.legend{display:flex; align-items:center; gap:8px; margin-top:10px}
.legend .sw{width:12px; height:12px; border-radius:3px; background:var(--c-sleep); display:inline-block}
.legend .sw.late{background:var(--c-late); margin-left:10px}
.hist{display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:left; border-radius:20px}
.hist .orb{--s:34px}
.hist .hmain{display:flex; flex-direction:column; min-width:0}
.hist small{color:var(--muted); font-size:.84rem}
.hist .why{color:var(--ink); opacity:.8}
#dHistory > * + *{margin-top:8px}
.tip{position:fixed; z-index:80; pointer-events:none; background:var(--solid); color:var(--solid-ink); font-size:.82rem; padding:7px 11px; border-radius:10px; box-shadow:var(--shadow-lg); max-width:260px}
.switch{display:flex; align-items:center; gap:12px; font-size:.95rem; cursor:pointer; margin-top:14px}
.switch input{position:absolute; opacity:0}
.switch .track{width:44px; height:26px; border-radius:99px; background:var(--line); position:relative; flex:none; transition:background .2s}
.switch .track::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .track{background:#2fb5a2}
.switch input:checked + .track::after{transform:translateX(18px)}
.switch input:focus-visible + .track{outline:2px solid var(--a1); outline-offset:2px}
#memList{margin-top:12px}
.mem{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line)}
.mem:first-child{border-top:0}
.mem p{flex:1; font-size:.94rem}
.mem .icon-btn{width:34px; height:34px}
.mem .icon-btn .ic{width:16px; height:16px}

/* ============ overlays ============ */
.overlay{position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; overflow-y:auto;
  background:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--a1) 22%, var(--bg)), var(--bg) 70%);
  padding:calc(14px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom))}
.overlay .bar{display:flex; justify-content:space-between; align-items:center; min-height:42px}
.dots{display:flex; gap:6px}
.dots i{width:24px; height:4px; border-radius:2px; background:var(--line); transition:background .3s}
.dots i.on{background:var(--ink)}
.overlay .body{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; max-width:480px; width:100%; margin:0 auto; padding:22px 0}
.overlay .body > p{margin-top:16px; font-size:1.1rem; color:var(--muted)}
.overlay .actions{display:flex; flex-direction:column; gap:10px; width:100%; max-width:480px; margin:0 auto}
.overlay .foot{text-align:center; margin-top:16px; font-size:.86rem; color:var(--faint)}
.taps{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.taps button{width:54px; height:54px; border-radius:50%; border:1.5px solid var(--line); background:var(--glass); font-weight:600; transition:all .2s}
.taps button.on{background:var(--solid); color:var(--solid-ink); border-color:transparent; transform:scale(.92)}
.welcome .body .orb{--s:120px; margin-bottom:34px}
.welcome .field{margin-top:26px; text-align:center}
.welcome .body label{display:block}
.welcome .body label + .field{margin-top:8px}
.welcome .body .orb{--s:104px; margin-bottom:26px}

.toast{position:fixed; left:50%; bottom:calc(104px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:70; max-width:calc(100vw - 40px);
  background:var(--solid); color:var(--solid-ink); padding:12px 20px; border-radius:999px; font-size:.92rem; font-weight:500; box-shadow:var(--shadow-lg); animation:rise .25s ease; text-align:center}

@media (prefers-reduced-motion: reduce){
  .aurora i,.orb::before,.sos::before{animation:none}
  .msg,.toast{animation:none}
}