:root{
  --bg:#FAF9F4; --surface:#FFFFFF; --surface-2:#F1F0E6; --border:#E3E0D0;
  --ink:#23281F; --ink-dim:#666C58; --ink-faint:#96998A;
  --accent:#3D7A4F; --accent-ink:#FFFFFF; --accent-soft:#E4EFE1; --accent-soft-ink:#2A5A38;
  --water:#2C6FA8; --water-soft:#E1EDF6; --water-ink:#1F4E78;
  --warn:#A9781E; --warn-soft:#F3E7CC;
  --danger:#B0483C; --danger-soft:#F5E1DD;
  --star:#B9821F;
  --shadow:0 1px 2px rgba(35,40,31,.07),0 6px 18px rgba(35,40,31,.07);
  --shadow-lg:0 8px 30px rgba(35,40,31,.18);
  --r-s:8px; --r-m:14px; --r-l:20px;
  --font-display:'Fraunces',Georgia,serif;
  --font-ui:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171A13; --surface:#1F2318; --surface-2:#262B1D; --border:#343A26;
    --ink:#ECEFE2; --ink-dim:#A7AD97; --ink-faint:#767C67;
    --accent:#66B57F; --accent-ink:#0F1710; --accent-soft:#243626; --accent-soft-ink:#A8DCB6;
    --water:#72ABDD; --water-soft:#1F303F; --water-ink:#BEDCF6;
    --warn:#D9AC58; --warn-soft:#3B3220;
    --danger:#E28A7B; --danger-soft:#3D2621;
    --star:#E0B65B;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#171A13; --surface:#1F2318; --surface-2:#262B1D; --border:#343A26;
  --ink:#ECEFE2; --ink-dim:#A7AD97; --ink-faint:#767C67;
  --accent:#66B57F; --accent-ink:#0F1710; --accent-soft:#243626; --accent-soft-ink:#A8DCB6;
  --water:#72ABDD; --water-soft:#1F303F; --water-ink:#BEDCF6;
  --warn:#D9AC58; --warn-soft:#3B3220;
  --danger:#E28A7B; --danger-soft:#3D2621;
  --star:#E0B65B;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
body{background:var(--bg); color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance;}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit;}
.tnum{font-variant-numeric:tabular-nums; font-family:var(--font-mono);}
::selection{background:var(--accent-soft); color:var(--accent-soft-ink);}

#app{max-width:920px; margin:0 auto; padding:16px 16px 90px; min-height:100vh;}

/* header */
.topbar{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 2px 18px; flex-wrap:wrap;}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand h1{font-size:26px; letter-spacing:-.01em;}
.brand .tagline{color:var(--ink-faint); font-size:12.5px;}
.datepicker{display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 6px; box-shadow:var(--shadow);}
.datepicker button{width:28px; height:28px; border-radius:999px; border:none; background:transparent; color:var(--ink-dim); font-size:15px; display:flex; align-items:center; justify-content:center;}
.datepicker button:hover{background:var(--surface-2); color:var(--ink);}
.datepicker .dlabel{font-size:13px; font-weight:500; padding:0 4px; min-width:150px; text-align:center;}
.datepicker .today-pill{font-size:11px; color:var(--accent); border:1px solid var(--accent-soft); background:var(--accent-soft); border-radius:999px; padding:2px 8px; margin-left:2px;}

/* tabs */
.tabbar{display:flex; gap:4px; overflow-x:auto; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:20px;}
.tab{flex:0 0 auto; border:none; background:transparent; color:var(--ink-dim); font-size:13.5px; font-weight:500; padding:9px 14px; border-radius:999px; white-space:nowrap; display:flex; align-items:center; gap:6px;}
.tab:hover{background:var(--surface-2); color:var(--ink);}
.tab.active{background:var(--ink); color:var(--bg);}
:root[data-theme="dark"] .tab.active, @media (prefers-color-scheme:dark){.tab.active{background:var(--accent); color:var(--accent-ink);}}
.tab.active{background:var(--accent); color:var(--accent-ink);}

.view{display:none;}
.view.active{display:block; animation:fade .18s ease;}
@keyframes fade{from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.view.active{animation:none;}}

/* generic */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-l); box-shadow:var(--shadow); padding:18px;}
.grid{display:grid; gap:14px;}
.stack{display:flex; flex-direction:column; gap:14px;}
.row{display:flex; align-items:center; gap:10px;}
.between{justify-content:space-between;}
.wrap{flex-wrap:wrap;}
.section-title{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600; margin-bottom:10px;}
.hr{height:1px; background:var(--border); border:none; margin:14px 0;}

.btn{border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:500; padding:9px 16px; display:inline-flex; align-items:center; gap:6px; transition:background .12s;}
.btn:hover{background:var(--surface-2);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{border-color:transparent; background:transparent;}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:6px 12px; font-size:12.5px;}
.btn-danger{color:var(--danger);}
.btn-icon{width:34px; height:34px; padding:0; border-radius:999px; justify-content:center;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

.input,.select{width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-s); padding:9px 11px; font-size:14px; color:var(--ink); outline:none;}
.input:focus,.select:focus{border-color:var(--accent);}
label.field{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-dim); font-weight:500;}

.chip{display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-dim); font-weight:500;}
.badge{font-family:var(--font-mono); font-size:11.5px; padding:2px 7px; border-radius:6px; background:var(--surface-2); color:var(--ink-dim);}

.star-btn{background:none; border:none; padding:2px; color:var(--border); font-size:17px; line-height:1;}
.star-btn.on{color:var(--star);}

.toast-wrap{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center;}
.toast{background:var(--ink); color:var(--bg); font-size:13px; padding:9px 16px; border-radius:999px; box-shadow:var(--shadow-lg); animation:toastin .2s ease;}
@keyframes toastin{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* progress bars */
.nutri-row{display:flex; align-items:center; gap:10px;}
.nutri-name{width:88px; flex:0 0 auto; font-size:12.5px; color:var(--ink-dim);}
.nutri-bar{flex:1; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; position:relative;}
.nutri-bar-fill{height:100%; border-radius:999px; background:var(--accent);}
.nutri-bar-fill.over{background:var(--danger);}
.nutri-bar-fill.near{background:var(--warn);}
.nutri-val{width:108px; flex:0 0 auto; text-align:right; font-size:12px; color:var(--ink-faint);}

.kcal-hero{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px;}
.kcal-hero .big{font-size:40px; font-weight:600; font-family:var(--font-display);}
.kcal-hero .of{font-size:15px; color:var(--ink-faint); margin-left:6px; font-family:var(--font-ui);}
.kcal-bar{height:12px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:10px;}
.kcal-bar-fill{height:100%; background:var(--accent); border-radius:999px; transition:width .25s;}
.kcal-bar-fill.over{background:var(--danger);}
.kcal-bar-fill.near{background:var(--warn);}
.kcal-remaining{font-size:12.5px; color:var(--ink-dim);}

/* meal cards */
.meal-card{border:1px solid var(--border); border-radius:var(--r-m); padding:14px 16px; background:var(--surface-2);}
.meal-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;}
.meal-head h3{font-size:15.5px;}
.meal-kcal{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-dim);}
.usual-line{font-size:13px; color:var(--ink-dim); line-height:1.5; margin-bottom:10px;}
.entry-list{display:flex; flex-direction:column; gap:6px; margin-bottom:8px;}
.entry{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-s); padding:7px 9px;}
.entry .ename{flex:1; font-size:13.5px;}
.entry .egrams{font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); width:60px; text-align:right;}
.entry .ekcal{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); width:56px; text-align:right;}
.stepbtn{width:22px; height:22px; border-radius:6px; border:1px solid var(--border); background:var(--surface); font-size:13px; display:flex; align-items:center; justify-content:center; color:var(--ink-dim); padding:0;}
.stepbtn:hover{background:var(--surface-2);}
.gramsedit{width:52px; text-align:center; font-family:var(--font-mono); font-size:12.5px; border:1px solid var(--border); border-radius:6px; padding:3px 2px; background:var(--surface);}

/* water & weight widgets */
.widget-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){.widget-row{grid-template-columns:1fr;}}
.water-fig{display:flex; align-items:center; gap:14px;}
.water-glass{width:44px; height:58px; border:2px solid var(--water); border-top:none; border-radius:0 0 8px 8px; position:relative; flex:0 0 auto; overflow:hidden; background:var(--water-soft);}
.water-glass .fill{position:absolute; bottom:0; left:0; right:0; background:var(--water); transition:height .25s;}
.water-num{font-family:var(--font-mono); font-size:20px; font-weight:600;}
.water-of{color:var(--ink-faint); font-size:13px;}
.water-actions{display:flex; align-items:center; gap:6px; margin-top:10px;}

/* search modal */
.overlay{position:fixed; inset:0; background:rgba(20,22,15,.45); display:none; align-items:flex-start; justify-content:center; padding:6vh 14px; z-index:150; backdrop-filter:blur(1px);}
.overlay.open{display:flex;}
.modal{background:var(--surface); border-radius:var(--r-l); box-shadow:var(--shadow-lg); width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border);}
.modal-head{padding:14px 16px 10px; border-bottom:1px solid var(--border);}
.modal-search{width:100%; border:none; background:transparent; font-size:19px; font-family:var(--font-display); outline:none; color:var(--ink);}
.modal-search::placeholder{color:var(--ink-faint); font-family:var(--font-ui); font-size:15px;}
.modal-sub{display:flex; gap:8px; margin-top:8px; align-items:center; flex-wrap:wrap;}
.modal-body{overflow-y:auto; padding:6px 8px;}
.result{display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:var(--r-s); cursor:pointer;}
.result:hover,.result.picked{background:var(--surface-2);}
.result .rname{flex:1; font-size:14.5px;}
.result .rcat{font-size:10.5px; color:var(--ink-faint); display:block; margin-top:1px;}
.result .rk{font-family:var(--font-mono); font-size:12px; color:var(--ink-dim);}
.empty-note{padding:30px 14px; text-align:center; color:var(--ink-faint); font-size:13.5px;}
.picker-panel{border-top:1px solid var(--border); padding:14px 16px; background:var(--surface-2);}
.qty-row{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.qty-input{width:74px; text-align:center; font-family:var(--font-mono); font-size:16px; padding:7px; border:1px solid var(--border); border-radius:var(--r-s); background:var(--surface);}
.qtybtn{width:32px; height:32px; border-radius:var(--r-s); border:1px solid var(--border); background:var(--surface); font-size:14px;}
.slot-select{flex:1;}
.preview-kcal{font-size:12.5px; color:var(--ink-dim); margin-bottom:10px;}

/* database tab */
.filter-row{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.tag-filter{border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:5px 12px; font-size:12px; color:var(--ink-dim);}
.tag-filter.active{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.item-list{display:flex; flex-direction:column; gap:8px;}
.item-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-m); background:var(--surface);}
.item-row .iname{flex:1; font-size:14px;}
.item-row .icat{font-size:11px; color:var(--ink-faint);}
.item-row .ik{font-family:var(--font-mono); font-size:12px; color:var(--ink-dim);}

.form-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
@media (max-width:640px){.form-grid{grid-template-columns:repeat(2,1fr);}}
.comp-row{display:flex; align-items:center; gap:8px; padding:6px 0;}
.comp-row .cname{flex:1; font-size:13.5px;}
.comp-grams{width:70px;}

/* history table */
.htable{width:100%; border-collapse:collapse; font-size:13px;}
.htable th{text-align:right; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border);}
.htable th:first-child,.htable td:first-child{text-align:left;}
.htable td{text-align:right; padding:7px 8px; border-bottom:1px solid var(--border); font-family:var(--font-mono);}
.htable tr:hover td{background:var(--surface-2); cursor:pointer;}
.table-scroll{overflow-x:auto;}

/* switch */
.switch{position:relative; width:38px; height:22px; flex:0 0 auto;}
.switch input{opacity:0; width:100%; height:100%; margin:0; position:absolute; cursor:pointer;}
.switch .track{position:absolute; inset:0; background:var(--border); border-radius:999px; transition:background .15s;}
.switch .knob{position:absolute; top:2px; left:2px; width:18px; height:18px; background:var(--surface); border-radius:50%; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.2);}
.switch input:checked + .track{background:var(--accent);}
.switch input:checked ~ .knob{left:18px;}

.empty-state{text-align:center; padding:50px 20px; color:var(--ink-faint);}
.empty-state h3{color:var(--ink-dim); margin-bottom:6px;}

.fab{position:fixed; right:20px; bottom:20px; width:54px; height:54px; border-radius:50%; background:var(--accent); color:var(--accent-ink); border:none; font-size:26px; box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center; z-index:60;}
.fab:hover{filter:brightness(1.06);}

.loading-screen{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; gap:14px; color:var(--ink-dim); font-size:14px;}
.spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.spinner{animation:none;}}

.mealslot-editor{display:flex; align-items:center; gap:8px; padding:6px 0;}
.small-note{font-size:11.5px; color:var(--ink-faint);}
a{color:var(--accent);}