:root{
  --bg:#0f141b; --bg2:#0c1017; --card:#1a2230; --card2:#212b3d;
  --ink:#e9e4d8; --muted:#9aa3b2; --faint:#6b7484;
  --accent:#9db8ad; --accent-ink:#0f141b; --gold:#c9a96a;
  --danger:#d98a8a; --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(120% 90% at 50% 0%, #141b28 0%, var(--bg) 55%, var(--bg2) 100%);
  color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; display:flex; flex-direction:column; line-height:1.5;
}
body.night-dim::after{
  content:""; position:fixed; inset:0; background:#05070c; opacity:.55;
  pointer-events:none; z-index:5; transition:opacity 2s;
}
#topbar{
  display:flex; align-items:center; gap:8px; padding:14px 16px 10px;
  position:sticky; top:0; z-index:10;
  background:linear-gradient(var(--bg) 70%, transparent);
}
#appTitle{flex:1; text-align:center; font-size:20px; letter-spacing:4px; font-weight:600; color:var(--gold);}
.icon-btn{
  background:var(--card); color:var(--ink); border:1px solid #2c3648; border-radius:10px;
  width:40px; height:40px; font-size:18px; cursor:pointer;
}
.icon-btn[hidden]{visibility:hidden;}
#view{flex:1; padding:6px 16px 24px; max-width:640px; width:100%; margin:0 auto;}
#foot{text-align:center; color:var(--faint); font-size:12px; padding:14px 12px 20px;}
h1{font-size:24px; margin:14px 0 6px; font-weight:600;}
h2{font-size:18px; margin:18px 0 8px; color:var(--gold); font-weight:600;}
p.sub{color:var(--muted); margin:4px 0 14px;}
.card{
  background:var(--card); border:1px solid #2a3446; border-radius:var(--radius);
  padding:16px; margin:12px 0;
}
.card.tappable{cursor:pointer; transition:transform .12s, border-color .12s;}
.card.tappable:active{transform:scale(.985); border-color:var(--accent);}
.row{display:flex; gap:10px; align-items:center;}
.grow{flex:1;}
button,.btn{
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:12px;
  padding:12px 18px; font-size:16px; font-weight:600; cursor:pointer;
}
button:disabled{opacity:.45; cursor:default;}
button.ghost{background:transparent; color:var(--accent); border:1px solid #334052; font-weight:500;}
button.danger-ghost{background:transparent; color:var(--danger); border:1px solid #4a3030; font-weight:500;}
button.small{padding:8px 12px; font-size:14px; border-radius:10px;}
input[type=text],input[type=date],input[type=time],input[type=password],textarea,select{
  width:100%; background:var(--bg2); color:var(--ink); border:1px solid #2c3648;
  border-radius:10px; padding:12px; font-size:16px; font-family:inherit; margin:6px 0;
  color-scheme:dark;
}
textarea{min-height:84px; resize:vertical;}
input[type=range]{width:100%; accent-color:var(--accent); margin:10px 0;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0;}
.chip{
  background:var(--card2); border:1px solid #334052; color:var(--ink);
  border-radius:999px; padding:9px 15px; font-size:14px; cursor:pointer;
}
.chip.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600;}
.mood-row{display:flex; justify-content:space-between; gap:6px; margin:12px 0;}
.mood{
  flex:1; background:var(--card2); border:2px solid transparent; border-radius:12px;
  font-size:30px; padding:10px 0; cursor:pointer; text-align:center;
}
.mood.on{border-color:var(--gold); background:#2a2f3d;}
.mood small{display:block; font-size:11px; color:var(--muted); margin-top:2px;}
.hist{list-style:none; margin:8px 0; padding:0;}
.hist li{background:var(--bg2); border:1px solid #26303f; border-radius:10px; padding:10px 12px; margin:8px 0; font-size:15px;}
.hist .meta{color:var(--faint); font-size:12px; margin-top:4px;}
.triage{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 4px;}
.triage button{
  background:var(--card2); color:var(--ink); border:1px solid #334052;
  border-radius:var(--radius); padding:14px 8px; font-size:15px; font-weight:500;
  display:flex; flex-direction:column; gap:4px; align-items:center;
}
.triage button span.e{font-size:26px;}
.triage button small{color:var(--muted); font-size:12px; font-weight:400;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0;}
.mod-card{
  background:var(--card); border:1px solid #2a3446; border-radius:var(--radius);
  padding:14px 12px; cursor:pointer; text-align:left; color:var(--ink);
}
.mod-card .e{font-size:26px;}
.mod-card .t{font-weight:600; margin:6px 0 2px; font-size:15px;}
.mod-card .d{color:var(--muted); font-size:12.5px; line-height:1.4;}
.mod-card.safety{border-color:var(--gold); background:#221d12;}
.mod-card .stamp{display:inline-block; font-size:10.5px; font-weight:600; color:#9aa7bd;
  border:1px solid #3a465c; border-radius:20px; padding:2px 8px; margin-left:6px;
  vertical-align:2px; letter-spacing:.3px;}
.wave{font-size:52px; display:inline-block; animation:wavebob 4.5s ease-in-out infinite;}
@keyframes wavebob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(8deg)}}
.sos{width:100%;margin:6px 0 12px;padding:14px;border-radius:var(--radius);background:#3a2126;
  border:1px solid #8a4a52;color:#f3dede;font-size:16px;cursor:pointer;}
.sos:active{background:#4a2a30;}
#toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:#2a3346; color:var(--ink); border:1px solid #3a465c;
  padding:12px 20px; border-radius:999px; font-size:15px; z-index:50;
  box-shadow:0 6px 24px rgba(0,0,0,.5); max-width:90vw; text-align:center;
}
.breath-circle{
  width:150px; height:150px; border-radius:50%; margin:18px auto;
  background:radial-gradient(circle at 50% 40%, #b8d4c8, var(--accent) 70%);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-ink); font-weight:600; font-size:17px; text-align:center;
  transition:transform 1s ease-in-out;
}
.timer-big{font-size:52px; text-align:center; margin:12px 0; font-variant-numeric:tabular-nums; color:var(--gold);}
.center{text-align:center;}
.steps-dots{display:flex; gap:6px; justify-content:center; margin:10px 0;}
.steps-dots i{width:8px; height:8px; border-radius:50%; background:#334052;}
.steps-dots i.on{background:var(--gold);}
.zone{fill:#2a3446; stroke:#3a465c; stroke-width:2; cursor:pointer;}
.zone.sel{fill:var(--accent); stroke:var(--gold);}
.zone-lbl{fill:var(--muted); font-size:11px; text-anchor:middle; pointer-events:none;}
a.tel{color:var(--accent); font-size:18px; font-weight:600; text-decoration:none;}
details{margin:10px 0;}
details summary{cursor:pointer; color:var(--accent); font-weight:600; padding:6px 0;}
.goodnight{font-size:26px; text-align:center; margin:40px 0 12px; color:var(--gold);}
.pin-dots{display:flex; gap:14px; justify-content:center; margin:22px 0;}
.pin-dot{width:16px; height:16px; border-radius:50%; border:2px solid var(--faint);}
.pin-dot.on{background:var(--gold); border-color:var(--gold);}
.pin-pad{display:grid; grid-template-columns:repeat(3, 84px); gap:12px; justify-content:center;}
.pin-pad button{font-size:24px; padding:15px 0; border-radius:16px;}
.lesson-tag{display:inline-block; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold); border:1px solid #4a3f28; border-radius:999px; padding:3px 10px; margin-bottom:8px;}
.lesson-body p{margin:10px 0;}
.lesson-body h3{margin:18px 0 6px;font-size:16px;color:var(--gold);}
.lesson-body ol{margin:10px 0; padding-left:22px;}
.lesson-body li{margin:8px 0;}
.noise-dot{display:inline-block; width:24px; height:24px; border-radius:50%; border:1px solid #3a465c; vertical-align:middle;}
@media (max-width:380px){ .triage{grid-template-columns:1fr 1fr;} .grid2{grid-template-columns:1fr 1fr;} }

/* let-it-burn */
.burn-paper{background:#f5efe0; color:#2a2118; border-radius:8px; padding:18px; max-width:320px; margin:0 auto; font-size:16px; line-height:1.5; transition:transform 1.1s ease-in, opacity 1s;}
.burn-paper.thrown{transform:translateY(110px) rotate(7deg) scale(0.85);}
.bchar{transition:color .6s, opacity 1.2s, text-shadow .6s;}
.bchar.charred{color:#140c06; text-shadow:0 0 7px #ff7a1a;}
.bchar.ashed{opacity:0; filter:blur(2px);}