:root{
  --bg:#fbfbfa; --surface:#fff; --hover:#f4f4f2; --ink:#37352f; --soft:#6b6a65; --mute:#9b9a97;
  --line:#eeedeb; --line2:#e4e3e0; --accent:#2383e2; --chip:#efeee9;
  --t-gray-b:#e3e2e0; --t-gray-t:#38352f; --t-green-b:#dbeddb; --t-green-t:#1c3a29;
  --t-red-b:#ffe2dd; --t-red-t:#5d1715; --t-blue-b:#d3e5ef; --t-blue-t:#183347;
  --t-yellow-b:#fdecc8; --t-yellow-t:#402c1b; --t-orange-b:#fadec9; --t-orange-t:#49290f;
  --t-pink-b:#f5e0e9; --t-pink-t:#4c2337; --t-purple-b:#e8deee; --t-purple-t:#412454;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#191919; --surface:#202020; --hover:#2a2a2a; --ink:#d4d4d3; --soft:#9b9a97; --mute:#7a7975;
  --line:#2e2e2c; --line2:#373735; --accent:#529ce0; --chip:#2b2b29;
  --t-gray-b:#3a3a38; --t-gray-t:#cfceca; --t-green-b:#243d2e; --t-green-t:#9fd2ac;
  --t-red-b:#42221d; --t-red-t:#f0a898; --t-blue-b:#1f3a4d; --t-blue-t:#9fc6df;
  --t-yellow-b:#3d3220; --t-yellow-t:#e6c583; --t-orange-b:#432a17; --t-orange-t:#e5b58a;
  --t-pink-b:#3d2531; --t-pink-t:#e5aac6; --t-purple-b:#332843; --t-purple-t:#c3a8e0;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
.wrap{max-width:860px;margin:0 auto;padding:26px 20px 70px;}
[hidden]{display:none !important;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;border-radius:6px;}
input,select,textarea{font:inherit;color:inherit;}

#gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;}
.gatecard{max-width:340px;width:100%;text-align:center;}
.gatecard .mark{font-size:2.4rem;}
.gatecard h1{font-size:1.5rem;margin:10px 0 4px;font-weight:750;letter-spacing:-.02em;}
.gatecard p{color:var(--soft);font-size:.9rem;margin:0 0 18px;}
.gatecard input{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:7px;background:var(--surface);margin-bottom:9px;}
.gatecard input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent);}
.gatecard button.primary{width:100%;padding:10px;background:var(--accent);color:#fff;font-weight:600;}
.hint{font-size:.76rem;color:var(--mute);margin-top:12px;}
.err{color:#c0392b;font-size:.82rem;min-height:1em;margin:-2px 0 8px;}

.picon{font-size:2.4rem;line-height:1;margin-bottom:6px;}
h1.ptitle{font-size:1.9rem;font-weight:800;letter-spacing:-.025em;margin:0;}
.pmeta{color:var(--soft);font-size:.92rem;margin:5px 0 0;}
.toolbar{display:flex;gap:8px;margin:16px 0 26px;flex-wrap:wrap;}
.btn{border:1px solid var(--line2);color:var(--soft);padding:6px 11px;border-radius:6px;font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:6px;background:var(--surface);}
.btn:hover{background:var(--hover);color:var(--ink);}
.btn.accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line2));}

.section{margin-bottom:34px;}
h2.etitle{font-size:1.35rem;font-weight:750;letter-spacing:-.02em;margin:0 0 6px;}
.emeta{color:var(--soft);font-size:.88rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.edesc{color:var(--soft);font-size:.9rem;margin:9px 0 14px;max-width:64ch;}

.dbwrap{overflow-x:auto;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);}
table.db{border-collapse:collapse;width:100%;min-width:660px;font-size:.9rem;}
table.db th{text-align:left;font-weight:500;color:var(--mute);font-size:.78rem;padding:7px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;}
table.db td{padding:0;border-bottom:1px solid var(--line);vertical-align:middle;height:38px;}
table.db tbody tr:hover td{background:var(--hover);}
.cfam{position:sticky;left:0;z-index:2;background:var(--surface);border-right:1px solid var(--line);}
tbody tr:hover .cfam{background:var(--hover);}
th.cfam{background:var(--surface);}
.famname{padding:8px 12px;font-weight:600;white-space:nowrap;}

.cellinput{width:100%;height:100%;min-height:38px;border:none;background:transparent;padding:8px 10px;color:var(--ink);}
.cellinput:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}
.cellinput:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent);background:var(--surface);}
.num{width:66px;font-variant-numeric:tabular-nums;}
td.num-td{width:70px;}
.notes{color:var(--soft);}
.cellinput::placeholder{color:var(--mute);}

.selcell{position:relative;padding:6px 10px;min-height:38px;display:flex;align-items:center;}
.selcell:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}
.selcell .ovl{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;}
.tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:4px;font-size:.82rem;font-weight:500;line-height:1.5;white-space:nowrap;}
.tag.empty{background:transparent;color:var(--mute);padding-left:2px;}
.t-gray{background:var(--t-gray-b);color:var(--t-gray-t);} .t-green{background:var(--t-green-b);color:var(--t-green-t);}
.t-red{background:var(--t-red-b);color:var(--t-red-t);} .t-blue{background:var(--t-blue-b);color:var(--t-blue-t);}
.t-yellow{background:var(--t-yellow-b);color:var(--t-yellow-t);} .t-orange{background:var(--t-orange-b);color:var(--t-orange-t);}
.t-pink{background:var(--t-pink-b);color:var(--t-pink-t);} .t-purple{background:var(--t-purple-b);color:var(--t-purple-t);}

tfoot td{border-top:1px solid var(--line2);border-bottom:none;color:var(--mute);font-size:.76rem;padding:8px 10px;height:auto;}
tfoot .cfam{font-weight:600;color:var(--soft);}
.foodsum{display:flex;gap:5px;flex-wrap:wrap;padding:7px 10px;}

.addform{border:1px solid var(--line2);border-radius:9px;background:var(--surface);padding:16px;margin-top:10px;}
.fgrid{display:grid;gap:10px;}
.fgrid .frow{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;}
.fgrid label{font-size:.76rem;font-weight:600;color:var(--soft);display:block;margin-bottom:4px;}
.fgrid input,.fgrid textarea{width:100%;padding:9px 11px;border:1px solid var(--line2);border-radius:7px;background:var(--bg);}
.fgrid input:focus,.fgrid textarea:focus{outline:none;border-color:var(--accent);}
.addform h3{margin:0 0 12px;font-size:1rem;font-weight:700;}
.addactions{display:flex;gap:8px;margin-top:13px;}
.addactions .save{background:var(--accent);color:#fff;font-weight:600;padding:9px 16px;}
.addactions .cancel{border:1px solid var(--line2);color:var(--soft);padding:9px 14px;}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:7px;font-size:.84rem;font-weight:500;opacity:0;transition:.22s;z-index:60;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.foot{color:var(--mute);font-size:.76rem;margin-top:26px;line-height:1.6;}
.empty-state{color:var(--mute);font-size:.95rem;padding:30px 4px;text-align:center;border:1px dashed var(--line2);border-radius:10px;}