/* Visual único, noturno. A paleta muda com a pessoa (body[data-p]); a escala --l1..--l4 é o calor dos níveis. */
:root{
  color-scheme:dark;
  --bg:#12080d; --ink:#f8eaf0; --muted:#bfa3ae; --line:#ffffff1f;
  --l1:#f7b6c8; --l2:#ff9a8a; --l3:#ff5f5f; --l4:#e0234e;
  --surface:#2b0f20; --surface2:#431a33; --accent:#ff7aa8; --on-accent:#3a0a1e;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Figtree",system-ui,sans-serif;
}
body[data-p="ele"]{--surface:#0e1e2b;--surface2:#183444;--accent:#ff8a5c;--on-accent:#2c1004}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--body)}
[hidden]{display:none!important}
#app{max-width:480px;min-height:100%;margin:0 auto;background:var(--surface);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:44px;font-weight:800;line-height:.95;letter-spacing:-.02em}
h2{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.02em}
h3{font-size:17px;font-weight:500}
p{margin:0}
.top{padding:18px 20px 6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.top small{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.top button{font-size:12px;padding:6px 12px}
main{flex:1;padding:8px 16px 18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card{background:var(--surface2);border-radius:28px;padding:18px;display:flex;flex-direction:column;gap:10px}
.muted{color:var(--muted);font-size:13px}
.erro{background:#e0234e33;border-radius:18px;padding:12px 14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button{font:700 14px var(--body);color:var(--ink);background:#ffffff14;border:0;border-radius:999px;padding:11px 16px;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button.on,button.go{background:var(--accent);color:var(--on-accent)}
button:disabled{opacity:.5;cursor:default}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.levels button{border-radius:16px;padding:12px 2px;font-size:12px}
.levels button.on{color:#2a0610}
.levels .n1.on{background:var(--l1)}.levels .n2.on{background:var(--l2)}.levels .n3.on{background:var(--l3)}.levels .n4.on{background:var(--l4)}
.night{background:var(--accent);color:var(--on-accent);border-radius:36px 36px 36px 8px;padding:22px;min-height:190px;justify-content:space-between}
.night h3{font:800 23px/1.12 var(--display)}
.night button{background:var(--on-accent);color:var(--ink)}
.chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;width:max-content;max-width:100%;background:#00000033}
.chip.ok{background:#3ddc9733;color:#8ff0c4}
.chip.wait{background:#ffcf5c33;color:#ffdf8f}
.codigo{font:800 30px var(--display);letter-spacing:.12em;user-select:all}
input{font:400 16px var(--body);color:var(--ink);background:#00000033;border:1px solid var(--line);border-radius:18px;padding:12px 14px;width:100%;min-width:0}
ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
input[type=radio]{width:auto;accent-color:var(--accent)}
form{display:flex;flex-direction:column;gap:10px}
nav{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  padding:10px 10px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg)}
nav button{background:none;padding:11px 0;font-size:13px;color:var(--muted)}
nav button.on{background:var(--accent);color:var(--on-accent)}
@media(prefers-reduced-motion:no-preference){.night{animation:in .35s cubic-bezier(.2,1.4,.4,1)}@keyframes in{from{transform:scale(.94)}}}
a{color:var(--accent);font-weight:700}
.manual h2{font-size:24px}