:root{
  --sand:#f4ede4; --sand-2:#fffaf4; --rose:#8d4a5c; --rose-soft:#f0dfe4;
  --green:#5f8d62; --green-soft:#e2eee2; --amber:#b98b3f; --amber-soft:#f7ebd7;
  --ink:#33272b; --muted:#7b6b70; --line:#e6d9cd; --card:#fffaf4;
}
body.night{
  --sand:#1b171a; --sand-2:#241e22; --rose:#c98a9b; --rose-soft:#33262c;
  --green:#87b98c; --green-soft:#243028; --amber:#d7b071; --amber-soft:#33291d;
  --ink:#ece3e6; --muted:#a8969d; --line:#3a3035; --card:#221c20;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--sand);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding-bottom:78px}
#root{max-width:760px;margin:0 auto}
h1,h2,h3{margin:0 0 8px;line-height:1.25}
h1{font-size:22px} h2{font-size:18px} h3{font-size:16px}
p{margin:0 0 10px}
.muted{color:var(--muted);font-size:14px}
.small{font-size:13px}
.topbar{position:sticky;top:0;z-index:20;background:var(--sand-2);border-bottom:1px solid var(--line);padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.topbar .grow{flex:1;min-width:120px}
.brand{font-weight:700;color:var(--rose);font-size:18px}
select,input,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;width:100%;min-height:48px}
textarea{min-height:96px;resize:vertical}
label{display:block;font-size:14px;color:var(--muted);margin:10px 0 4px}
.btn{min-height:48px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
body.night .btn.primary{color:#14201a}
.btn.ghost{background:transparent}
.btn.rose{background:var(--rose);border-color:var(--rose);color:#fff}
body.night .btn.rose{color:#241a1e}
.btn:disabled{opacity:.55}
.btn.block{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:120px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin:12px 14px}
.card.tight{padding:12px}
.bigbtn{width:100%;min-height:76px;border-radius:22px;font-size:20px;font-weight:700;border:none;background:var(--rose);color:#fff}
body.night .bigbtn{color:#241a1e}
.bigbtn.awake{background:var(--green);color:#fff}
body.night .bigbtn.awake{color:#14201a}
.timer{font-size:30px;font-weight:700;text-align:center;margin:6px 0 2px}
.timer-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:10px}
.chip{min-height:44px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--sand-2);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.chip.active{background:var(--rose-soft);border-color:var(--rose);color:var(--rose);font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.scale{height:16px;border-radius:999px;position:relative;overflow:hidden;background:var(--amber-soft);margin:10px 0 6px}
.scale .zone{position:absolute;top:0;bottom:0;background:var(--green-soft);border-left:2px solid var(--green);border-right:2px solid var(--green)}
.scale .mark{position:absolute;top:-3px;width:4px;height:22px;background:var(--ink);border-radius:2px}
.scalelabels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.metric{background:var(--sand-2);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.metric .val{font-size:20px;font-weight:700}
.metric .lbl{font-size:13px;color:var(--muted)}
.badge{display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--green-soft);color:var(--green);font-weight:600}
.badge.low{background:var(--amber-soft);color:var(--amber)}
.badge.high{background:var(--rose-soft);color:var(--rose)}
.badge.miss{background:var(--line);color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:10px;align-items:center;background:var(--sand-2);border:1px solid var(--line);border-radius:14px;padding:10px 12px;min-height:56px;cursor:pointer;text-align:left;color:inherit;font:inherit;width:100%}
.item .t{font-weight:600}
.item .s{font-size:13px;color:var(--muted)}
.item .clip{color:var(--amber)}
.tabs{display:flex;gap:6px;background:var(--sand-2);border:1px solid var(--line);border-radius:14px;padding:4px;margin:12px 14px}
.tabs button{flex:1;min-height:44px;border:none;border-radius:11px;background:transparent;color:var(--muted);font:inherit;font-weight:600}
.tabs button.active{background:var(--card);color:var(--rose);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--sand-2);border-top:1px solid var(--line);display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabbar button{flex:1;min-height:52px;border:none;background:transparent;color:var(--muted);font:inherit;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.tabbar button.active{color:var(--rose);font-weight:700}
.tabbar svg{width:22px;height:22px}
.modal{position:fixed;inset:0;z-index:60;background:rgba(20,14,16,.55);display:flex;align-items:flex-end;justify-content:center}
.modal .sheet{background:var(--sand-2);width:100%;max-width:760px;border-radius:22px 22px 0 0;padding:16px;max-height:92vh;overflow:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.modal h3{margin-bottom:4px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;background:var(--ink);color:var(--sand);padding:12px 18px;border-radius:14px;z-index:80;font-size:14px}
.rec{border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:12px;padding:12px;margin-bottom:10px}
.rec.good{border-left-color:var(--green);background:var(--green-soft)}
.rec h3{font-size:15px;margin-bottom:4px}
.rec p{font-size:14px;margin:0}
details{margin-top:6px}
summary{cursor:pointer;font-size:13px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.table-wrap{overflow-x:auto;margin:8px 0}
.norm-table tr.is-current{background:var(--rose-soft)}
.norm-photo{width:100%;border-radius:14px;border:1px solid var(--line);display:block}
.bar{height:10px;border-radius:6px;background:var(--green);min-width:3px}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;overflow-x:auto;padding-top:6px}
.bars .b{flex:1;min-width:16px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.bars .b i{font-style:normal;font-size:11px;color:var(--muted)}
.strip{display:flex;flex-direction:column;gap:4px}
.strip .row{display:flex;align-items:center;gap:6px}
.strip .lbl{width:34px;font-size:12px;color:var(--muted)}
.strip .track{position:relative;flex:1;height:26px;background:var(--sand);border-radius:8px;overflow:hidden}
.strip .blk{position:absolute;top:4px;height:18px;border-radius:5px}
.strip .blk.night{background:#3f5d86}
.strip .blk.day{background:#9dc0e6}
body.night .strip .blk.day{background:#6f95bf}
.strip .axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-left:40px}
.heat{display:grid;grid-template-columns:34px repeat(12,1fr);gap:3px;font-size:11px}
.heat div{aspect-ratio:1;border-radius:4px;background:var(--sand);display:flex;align-items:center;justify-content:center}
.heat .h1{background:var(--rose-soft)}.heat .h2{background:var(--rose)}.heat .h3{background:var(--rose)}
.hint{font-size:13px;color:var(--muted)}
.linkbtn{background:none;border:none;color:var(--rose);font:inherit;font-weight:600;padding:10px 0;min-height:44px;cursor:pointer}
.boot-note{margin:16px;padding:16px;border-radius:14px;background:var(--sand);color:var(--ink);font-size:15px;line-height:1.5;border:1px solid var(--line)}
.boot-note b{display:block;margin-bottom:4px}