:root { color-scheme: light dark; --bg:light-dark(#f3f6f0,#15201a); --surface:light-dark(#fff,#213027); --text:light-dark(#21372a,#edf4ed); --muted:light-dark(#56695c,#bbcabd); --line:light-dark(#d7e2d7,#415247); --soft:light-dark(#eaf1e6,#2c3e30); --primary:light-dark(#285a40,#c1e4c9); --on-primary:light-dark(#fff,#163524); --warn:light-dark(#f5efda,#413922); --on-warn:light-dark(#695627,#e9dbaa); --danger:light-dark(#973f30,#f4b3a9); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.app-shell { max-width:850px; margin:0 auto; padding:28px 20px 40px; }
.app-header,.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:29px; font-weight:600; line-height:1.3; }
h2 { font-size:22px; font-weight:600; }
h3 { font-size:17px; font-weight:600; }
.eyebrow { color:var(--muted); font-size:13px; margin-bottom:3px; }
.badge { padding:4px 10px; border-radius:20px; background:var(--soft); color:var(--muted); font-size:12px; white-space:nowrap; }
.storage-note { color:var(--muted); font-size:13px; margin:9px 0 16px; }
.notice { border-radius:12px; padding:12px 14px; margin:12px 0; background:var(--soft); font-size:14px; overflow-wrap:anywhere; }
.notice.warning { background:var(--warn); color:var(--on-warn); }
.notice.error { color:var(--danger); }
.notice p + .button-row { margin-top:10px; }
.unsaved { color:var(--on-warn); background:var(--warn); padding:7px 12px; border-radius:8px; font-size:13px; margin-bottom:12px; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:20px 0; }
button { min-height:44px; border:1px solid var(--line); border-radius:11px; padding:9px 14px; font:inherit; font-size:14px; background:var(--surface); color:var(--text); cursor:pointer; overflow-wrap:anywhere; }
button:hover { background:var(--soft); }
button.primary,.tabs button[aria-pressed="true"] { color:var(--on-primary); background:var(--primary); border-color:var(--primary); }
button.primary:hover { filter:brightness(.96); }
button.subtle { background:transparent; color:var(--primary); }
button.danger { color:var(--danger); }
button:disabled { opacity:.6; cursor:default; }
.page { padding:23px; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
[hidden] { display:none !important; }
.muted { color:var(--muted); font-size:14px; }
.small { font-size:12px; }
.spaced { margin-top:22px; }
label { display:block; font-size:14px; margin-top:15px; }
input,textarea,select { width:100%; min-width:0; display:block; margin-top:5px; padding:10px 11px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--surface); font:inherit; font-size:16px; min-height:44px; }
textarea { resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.9; }
.two-column,.target-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.rule-card { padding:15px; background:var(--soft); border-radius:13px; margin-top:15px; overflow-wrap:anywhere; }
.rule-card h3 { margin:7px 0 4px; }
.rule-card p { white-space:pre-wrap; }
.rule-card button { margin-top:10px; }
.empty-state { padding:17px; border:1px dashed var(--line); border-radius:13px; margin-top:16px; }
.empty-state p { color:var(--muted); margin:7px 0 12px; font-size:14px; }
.meal-row { padding:5px 0 13px; border-bottom:1px solid var(--line); }
.meal-summary { color:var(--muted); font-size:12px; margin-top:6px; overflow-wrap:anywhere; }
.totals-block { margin:20px 0; }
.nutrition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.nutrition-stat { padding:12px; border-radius:12px; background:var(--soft); }
.nutrition-stat .label { color:var(--muted); font-size:12px; }
.nutrition-stat .value { font-size:20px; font-variant-numeric:tabular-nums; margin:4px 0; }
.nutrition-stat .compare { color:var(--muted); font-size:12px; }
.full { width:100%; }
.full + p { margin-top:8px; }
.button-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:15px; }
fieldset { min-width:0; margin:21px 0; padding:15px; border:1px solid var(--line); border-radius:13px; }
legend { font-size:16px; font-weight:600; padding:0 6px; }
fieldset label:first-of-type { margin-top:0; }
fieldset .muted { margin-top:10px; }
.editor-section { margin-top:20px; border-top:1px solid var(--line); padding-top:5px; }
summary { min-height:44px; padding:10px 0; font-size:15px; cursor:pointer; }
.check-label { display:flex; align-items:center; gap:10px; min-height:44px; }
.check-label input { width:20px; height:20px; min-height:20px; flex-shrink:0; margin:0; accent-color:var(--primary); }
.list { display:grid; gap:9px; }
.list-item { padding:13px; border:1px solid var(--line); border-radius:12px; }
.list-item .title { font-weight:600; overflow-wrap:anywhere; }
.list-item p { margin-top:3px; overflow-wrap:anywhere; }
.list-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.empty-copy { font-size:14px; color:var(--muted); padding:8px 0; }
.ingredient { padding:10px 12px; margin-top:12px; background:var(--soft); border-radius:12px; }
.ingredient-fields { display:grid; grid-template-columns:minmax(0,1fr) 105px; gap:10px; }
.ingredient label { margin-top:0; }
.ingredient button { margin-top:9px; font-size:12px; }
.editor-status { min-height:19px; margin-top:8px; }
.backup-section { margin-top:20px; padding:10px 4px; }
.backup-section p { margin:5px 0; }
.welcome-panel { padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--surface); margin:20px 0; }
.welcome-panel p { margin:12px 0; }
.welcome-panel button { margin-top:8px; }
.account-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.legacy-entry button { margin-top:10px; }
.choice-grid { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0; }
.choice { display:flex; align-items:center; gap:7px; min-height:44px; margin:0; padding:9px 11px; border:1px solid var(--line); border-radius:11px; background:var(--surface); font-size:13px; }
.choice input { width:17px; height:17px; min-height:17px; padding:0; margin:0; flex-shrink:0; accent-color:var(--primary); }
.choice:has(input:checked) { background:var(--soft); border-color:var(--primary); }
.choice-label { margin-top:15px; font-size:14px; }
.reference-section { margin-top:20px; padding:16px 0; border-top:1px solid var(--line); }
.reference-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:12px; }
.reference-card { padding:13px; border:1px solid var(--line); border-radius:12px; }
.reference-card .title { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.reference-card button { width:100%; margin-top:10px; }
.reference-card p + p { margin-top:5px; }
[inert] { opacity:.72; }
body:has(#confirm-dialog[open]) .app-shell { opacity:1; }
dialog { color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:18px; width:calc(100% - 28px); max-width:580px; max-height:85vh; padding:22px; }
dialog::backdrop { background:light-dark(#16291bb3,#000000b3); }
dialog h2 { margin-bottom:12px; }
dialog p { margin-top:9px; overflow-wrap:anywhere; white-space:pre-wrap; }
.diff-item { border-top:1px solid var(--line); padding:10px 0; font-size:13px; }
.diff-item .diff-label { font-weight:600; }
.diff-item p { font-size:13px; margin-top:3px; }
@media (max-width:520px) { .app-shell { padding:20px 12px 28px; } .page { padding:17px 14px; border-radius:17px; } .tabs { gap:5px; } .tabs button { padding:9px 7px; font-size:13px; } .two-column { grid-template-columns:1fr; } .target-fields { gap:0 9px; } .target-fields label { font-size:12px; } fieldset { padding:12px; } .ingredient-fields { grid-template-columns:minmax(0,1fr) 85px; gap:8px; } dialog { padding:18px; } }
@media (prefers-reduced-motion:no-preference) { button { transition:background-color .12s; } }