:root {
  color-scheme: dark;
  --bg: #101010; --panel: #1b1b1b; --raised: #272727;
  --ink: #f5f5f2; --muted: #b1b1ad; --line: #393939;
  font: 16px/1.55 system-ui,"Microsoft JhengHei",sans-serif;
  color: var(--ink); background: #080808;
}
* { box-sizing: border-box }
body { margin: 0 auto; max-width: 560px; min-height: 100dvh; background: var(--bg) }
button,input,textarea,select { font: inherit; color: inherit }
button,label.pick { cursor:pointer }
button { background:transparent; border:0 }
:focus-visible { outline: 2px solid white; outline-offset: 3px }
button:disabled { opacity:.48; cursor:default }
h1,h2,h3,p { margin:0 }
h1 { font-size:34px; letter-spacing:-1.5px }
h2 { font-size:19px } h3 { font-size:16px }
header,.drawer-heading,.section,.bottom,.row { display:flex; align-items:center }
header { gap:12px; padding:8px 6%; border-bottom:1px solid var(--line) }
header strong { font:700 24px Georgia,serif; letter-spacing:-1px }
#menu,#closeDrawer { min-width:44px; height:44px; display:grid; place-items:center }
#menu { margin-left:-8px }
.demo,.badge { border:1px solid var(--line); border-radius:100px; padding:3px 10px; font-size:12px; color:var(--muted) }
.demo { margin-left:auto }
main { padding:24px 6% 105px }
.eyebrow,.num { font:600 11px/1.6 ui-monospace,monospace; letter-spacing:1.5px; color:var(--muted) }
.eyebrow { margin:4px 0 7px }
.hero { position:relative; border-bottom:1px solid #787878; padding-bottom:18px }
.hero h1 { font-size:42px }
.hero svg { position:absolute; right:0; bottom:16px; width:33%; max-height:84px }
.hero svg path { stroke:currentColor }
.sub,small,.back { color:var(--muted); font-size:14px }
.section,.drawer-heading { justify-content:space-between }
.section { margin:23px 0 9px }
.row { width:100%; gap:14px; text-align:left; padding:15px 2px; border-bottom:1px solid var(--line) }
.row strong,.row small { display:block } .row strong { font-size:17px }
.arrow { margin-left:auto; font-size:21px }
.tile { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--raised) }
.tile svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round }
.challenge,.sheet { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px }
.sheet { margin:16px 0 } .sheet>*+* { margin-top:12px }
.back { padding:4px 0 14px }
.primary,.secondary,.pick { display:block; width:100%; padding:12px; text-align:center; border-radius:10px; margin:10px 0; font-weight:650 }
.primary,.active,.days button.active { background:var(--ink); color:#111 }
.secondary,label.pick { background:var(--raised) }
.art { width:100%; height:175px; display:block; border-radius:10px; background:#313131; object-fit:contain }
.thumb { width:64px; height:57px; border-radius:9px; object-fit:cover }
.stat { font:38px/1.1 Georgia,serif }
label { display:block } .pick input { width:100%; margin-top:8px }
textarea,input:not([type=file]),select { width:100%; min-width:0; display:block; margin:6px 0 12px; border:1px solid #555; border-radius:8px; padding:10px; background:#121212 }
textarea { resize:vertical }
.board { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin:15px 0 }
.board button { background:var(--raised); border:1px solid #555; border-radius:7px; aspect-ratio:1; font:600 23px Georgia }
.board button:disabled { background:#111; border-color:transparent }
.days,.segments { display:flex; gap:5px; margin:12px 0 }
.days button,.segments button { flex:1; min-width:0; padding:9px 0; border:1px solid var(--line); border-radius:9px }
.bars { height:83px; display:flex; gap:10px; align-items:end; border-bottom:1px solid var(--line) }
.bars i { flex:1; background:#666; border-radius:3px 3px 0 0 } .bars i.active { background:var(--ink) }
.line { padding:10px 0; border-bottom:1px solid var(--line) }
.note { white-space:pre-wrap; overflow-wrap:anywhere }
.bottom { position:fixed; bottom:0; width:min(100%,560px); background:var(--bg); border-top:1px solid var(--line); padding:8px 24px max(8px,env(safe-area-inset-bottom)); gap:12px }
.bottom button { padding:9px; border-radius:24px; flex:1 }
#notice:not(:empty) { position:fixed; bottom:78px; left:50%; transform:translateX(-50%); background:var(--ink); color:#111; border-radius:8px; padding:8px 15px; max-width:90%; z-index:2 }
#drawer { position:fixed; inset:0 auto 0 max(0px,calc((100vw - 560px)/2)); margin:0; width:min(82vw,340px); height:100dvh; max-height:none; padding:22px; border:0; border-right:1px solid var(--line); background:#161616; color:var(--ink) }
#drawer::backdrop { background:#000a }
#closeDrawer { font-size:26px }
.drawer-links { display:grid; gap:5px; margin-top:22px }
.drawer-links button { text-align:left; padding:13px 16px; border-radius:8px }
.segments { background:#080808; padding:4px; border-radius:12px }
.segments button { border:none }
summary { cursor:pointer; padding:6px 0 }
details[open]>summary { margin-bottom:8px }
.empty { padding:10px 0; color:var(--muted); font-size:14px }
.quick-sleep,.template-actions { display:flex; gap:8px }
.quick-sleep { margin-top:16px }
.quick-sleep button,.template-actions button { flex:1; min-width:0 }
#templateEditor { border-top:1px solid var(--line); padding-top:12px; margin-top:12px }
.meal-entry { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line) }
.meal-entry .row { flex:1; min-width:0; border:0 }
.check-in { flex:none; min-height:44px; padding:10px; border:1px solid #666; border-radius:9px; font-size:14px }
.delete-meal { border:1px solid #777; background:transparent }
.question-row,.rating-row,.rating-scale,.period-nav,.detail-title,.legend { display:flex; align-items:center; gap:8px }
.question-row label,.rating-row input { flex:1; min-width:0 }
.question-row button,.destructive { min-height:44px; text-decoration:underline; color:var(--muted) }
.question-row button { padding:8px }
.rating-row input[type=range] { accent-color:var(--ink); height:44px; margin:0; padding:0; border:0; background:transparent }
.rating-row output { min-width:4em; text-align:right; font-variant-numeric:tabular-nums }
.rating-scale { justify-content:space-between; margin:-6px 4.5em 12px 0 }
.period-nav { margin:10px 0; justify-content:space-between }
.period-nav button { min-width:36px; min-height:44px; border:1px solid var(--line); border-radius:8px }
.period-nav strong { text-align:center; font-size:15px }
.overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:12px 0 }
.overview div { padding:10px 6px; border:1px solid var(--line); border-radius:10px; background:var(--panel); text-align:center }
.overview strong,.overview small { display:block }
.overview small { font-size:12px }
.overview strong { font-size:clamp(14px,3.8vw,19px); margin:5px 0; font-variant-numeric:tabular-nums }
.calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; margin:10px 0 }
.calendar>small { text-align:center; padding:3px 0 }
.date-cell { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; min-height:48px; border:1px solid transparent; border-radius:8px; font-variant-numeric:tabular-nums }
.date-cell[aria-pressed=true] { border-color:var(--ink); background:var(--panel) }
.date-number { font-size:14px }
.score-chip { display:inline-block; min-width:2.4em; border-radius:9px; padding:1px 4px; text-align:center; background:var(--score); color:#101010; font-size:12px; font-weight:700 }
.score-chip.missing { color:var(--muted); background:var(--raised) }
.week-grid button { background:var(--panel) }
.bar-track { display:flex; align-items:end; justify-content:center; width:100%; height:82px; border-bottom:1px solid var(--line) }
.bar-track i { width:50%; background:#b1b1ad; border-radius:3px 3px 0 0 }
.legend { flex-wrap:wrap; gap:6px; color:var(--muted); font-size:12px }
.legend i { height:5px; width:55px; border-radius:4px; background:linear-gradient(90deg,hsl(0 62% 61%),hsl(60 62% 61%),hsl(120 62% 61%)) }
.detail-title { justify-content:space-between }
.clear-rating { color:var(--muted); min-height:40px; padding:4px 0; text-decoration:underline }
.date-cell[aria-current=date] .date-number { text-decoration:underline; text-underline-offset:3px }
.meal-time,.nutrition-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px }
#cameraDialog { width:min(92vw,500px); padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink) }
#cameraDialog::backdrop { background:#000c }
#cameraDialog [data-act=closeCamera] { min-width:44px; min-height:44px; font-size:26px }
#cameraPreview { display:block; width:100%; max-height:50dvh; min-height:150px; object-fit:contain; background:#080808; margin:12px 0; border-radius:9px }
.nutrition-summary { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px }
.nutrition-summary small,.nutrition-summary strong { display:block;overflow-wrap:anywhere }
.nutrition-summary strong { font-size:18px;margin-top:4px }
.food-heading { display:flex;align-items:center;justify-content:space-between;gap:10px }
.food-heading h3 { min-width:0;overflow-wrap:anywhere }
.food-heading button { min-height:44px;flex-shrink:0;padding:8px;border:1px solid var(--line);border-radius:8px }
.food-item { padding:14px 0;border-top:1px solid var(--line) }
.reference-combo { margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:12px }
.reference-combo>details>summary { cursor:pointer;line-height:1.6 }
.shared-dish-scale { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin-top:12px }
.shared-dish-scale .secondary { min-height:44px;margin:0 0 10px }
.food-tag { display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:3px 6px;margin:4px 0;line-height:1.6 }
.food-item details { margin:10px 0;font-size:13px;overflow-wrap:anywhere }
.food-item details p { margin:8px 0 }
.meal-actions { position:fixed;left:50%;bottom:calc(62px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(100%,560px);display:flex;gap:8px;padding:8px 6%;background:var(--bg);border-top:1px solid var(--line);z-index:1 }
.meal-actions .primary,.meal-actions .secondary { flex:1;min-width:0;margin:0 }
main:has(.meal-actions) { padding-bottom:calc(190px + env(safe-area-inset-bottom)) }
html:has(.meal-actions) { scroll-padding-bottom:calc(160px + env(safe-area-inset-bottom)) }
main:has(.meal-actions) input,main:has(.meal-actions) select,main:has(.meal-actions) textarea { scroll-margin-bottom:calc(160px + env(safe-area-inset-bottom)) }
body:has(.meal-actions) #notice:not(:empty) { bottom:calc(145px + env(safe-area-inset-bottom)) }
.food-quantity { display:grid;grid-template-columns:minmax(65px,1fr) minmax(0,1.8fr);gap:12px;margin-top:10px }
@media (max-width:480px) { .food-quantity { grid-template-columns:1fr } }
.food-warning { color:#f4cf8d;font-size:14px }
#foodSearchDialog { width:min(94vw,520px);max-height:86dvh;overflow:auto;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink) }
#foodSearchDialog::backdrop { background:#000c }
.food-candidate { display:block;width:100%;min-height:56px;text-align:left;border-bottom:1px solid var(--line);padding:14px 2px;overflow-wrap:anywhere }
.food-candidate strong,.food-candidate small { display:block }
[hidden] { display:none !important }

.food-refinements { display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 }
.food-refinements button,#moreFoods { min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px 12px }
#foodSearchModes button[aria-pressed="true"] { background:var(--ink);color:var(--panel) }
.remove-combo { margin-top:12px }