:root { color-scheme: light; --ink:#27241f; --muted:#746f66; --paper:#f7f3eb; --surface:#fffdf8; --line:#ded7ca; --red:#c94a35; --green:#2f6f52; --yellow:#f0b94c; --shadow:0 12px 36px rgba(52,43,32,.10); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(180deg,#f7f3eb 0 62%,#e8efe6 62%); }
.login-wrap { width:min(100%,420px); }
.brand-mark { width:64px; height:64px; display:grid; place-items:center; background:var(--red); color:white; border-radius:50%; font-size:30px; box-shadow:0 8px 0 #a83929; }
h1 { margin:22px 0 6px; font-family:Georgia,"Songti SC",serif; font-size:38px; line-height:1.2; }
.subtitle { color:var(--muted); margin:0 0 28px; }
.login-panel { background:var(--surface); border:1px solid var(--line); padding:22px; border-radius:8px; box-shadow:var(--shadow); }
.label { display:block; font-size:13px; font-weight:700; margin-bottom:9px; }
.people { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.person { border:1px solid var(--line); background:white; min-height:76px; border-radius:6px; color:var(--muted); }
.person strong { display:block; font-size:24px; margin-bottom:3px; }
.person.active { color:var(--ink); border:2px solid var(--red); background:#fff5f0; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:13px 14px; background:white; outline:none; }
input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,111,82,.12); }
.primary { width:100%; border:0; border-radius:6px; padding:14px; background:var(--green); color:white; font-weight:700; margin-top:14px; }
.hint { font-size:12px; color:var(--muted); text-align:center; margin:16px 0 0; }
.shell { min-height:100vh; padding-bottom:88px; }
.topbar { background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:3; }
.topbar-inner { max-width:860px; margin:auto; min-height:68px; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-family:Georgia,"Songti SC",serif; font-size:22px; font-weight:700; }
.user-menu { border:1px solid var(--line); background:white; border-radius:50%; width:40px; height:40px; font-weight:700; }
.content { max-width:860px; margin:auto; padding:28px 20px; }
.date-row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.date-row h2 { margin:0; font-size:26px; }
.date-row p { margin:5px 0 0; color:var(--muted); font-size:14px; }
.date-nav { display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.date-nav button { border:0; background:white; width:38px; height:36px; color:var(--ink); }
.date-nav button+button { border-left:1px solid var(--line); }
.composer { display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:18px; margin-bottom:28px; }
.composer .wide { grid-column:1/-1; }
.meal-toggle { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.meal-toggle button { border:0; background:white; padding:12px; }
.meal-toggle button+button { border-left:1px solid var(--line); }
.meal-toggle .active { background:#e8efe6; color:var(--green); font-weight:700; }
.composer .primary { margin:0; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; }
.section-title h3 { margin:0; font-size:17px; }
.count { font-size:12px; color:var(--muted); }
.empty { border:1px dashed #c9c0b1; padding:42px 20px; text-align:center; color:var(--muted); border-radius:8px; }
.empty strong { display:block; color:var(--ink); font-size:18px; margin-bottom:7px; }
.list { display:grid; gap:10px; }
.choice { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--yellow); border-radius:6px; padding:15px 15px 14px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#efe9dd; font-weight:700; }
.choice h4 { margin:0 0 4px; font-size:16px; }
.meta { color:var(--muted); font-size:12px; }
.delete { border:0; background:transparent; color:#9c9287; width:36px; height:36px; font-size:20px; }
.profile-sheet { position:fixed; inset:0; z-index:9; background:rgba(30,27,23,.36); display:grid; place-items:end center; }
.sheet { background:var(--surface); width:min(100%,480px); border-radius:8px 8px 0 0; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow:var(--shadow); }
.sheet h3 { margin:0 0 5px; }.sheet p { color:var(--muted); margin:0 0 18px; font-size:13px; }
.sheet .row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.secondary { border:1px solid var(--line); background:white; padding:12px; border-radius:6px; margin-top:10px; width:100%; }
#toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); background:#292621; color:white; padding:11px 16px; border-radius:6px; opacity:0; pointer-events:none; transition:.2s; z-index:20; white-space:nowrap; }
#toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:560px) { .composer { grid-template-columns:1fr; }.composer .wide { grid-column:auto; }.date-row { align-items:center; }.date-row h2 { font-size:22px; }.choice { grid-template-columns:auto 1fr auto; }.login { align-items:start; padding-top:52px; } }