:root {
  --board-ink:#171715;
  --board-muted:#756f65;
  --board-green:#1f3a32;
  --board-canvas:#f7f4ed;
  --board-card:#fffdf8;
  --board-line:#e3dccf;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:var(--board-canvas);color:var(--board-ink);font:16px "Microsoft YaHei","PingFang SC",system-ui,sans-serif}
button,input,a{font:inherit}
button,a{border:0;border-radius:10px;padding:11px 15px;background:#e5eee5;color:var(--board-green);text-decoration:none;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible{outline:3px solid #d2c28f;outline-offset:3px}
#app>header{position:sticky;z-index:5;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left));background:var(--board-green);color:#fff;box-shadow:0 4px 18px #16251e30}
h1{margin:0 0 6px;font-size:clamp(21px,2vw,28px)}
#app>header span{font-size:13px;color:#d7e2da}
nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.sound-on{box-shadow:inset 0 0 0 2px #8fc79d}
.sound-prompt{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 24px 4px;padding:14px 18px;border:2px solid #d39a3e;border-radius:14px;background:#fff4dc;color:#6a4315}
.sound-prompt>div{display:grid;gap:4px}.sound-prompt strong{font-size:17px}.sound-prompt span{font-size:13px;line-height:1.5}.sound-prompt button{flex:none;background:#9a5c13;color:#fff;font-weight:700}
@media(max-width:700px){.sound-prompt{align-items:stretch;flex-direction:column;margin:12px 14px 4px}.sound-prompt button{width:100%}}
.hint{margin:14px 0 4px;padding:0 24px;color:var(--board-muted);font-size:13px}
main{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:18px;padding:10px 24px 30px}
.column{min-width:0}
.column h2{position:sticky;z-index:2;top:86px;margin:0;padding:13px 4px 9px;background:linear-gradient(var(--board-canvas) 78%,transparent);font-size:20px}
.column h2 span{margin-left:8px;color:var(--board-muted)}
.order{margin:10px 0 16px;padding:18px;background:var(--board-card);border:1px solid var(--board-line);border-radius:16px;box-shadow:0 3px 12px #3327190b}
.order-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pickup{font-size:clamp(30px,3vw,44px);font-weight:800;color:var(--board-green)}
.member-name{display:flex;align-items:center;gap:9px;margin:10px 0 7px;padding:9px 11px;border-left:4px solid #b88745;border-radius:8px;background:#f3ead8;color:#5f442a}
.member-name span{font-size:12px;white-space:nowrap}
.member-name strong{overflow-wrap:anywhere;font-size:clamp(16px,1.4vw,20px)}
.meta{overflow-wrap:anywhere;color:var(--board-muted);font-size:12px;line-height:1.7}
.order ul{list-style:none;padding:0;margin:14px 0}
.order li{padding:9px 0;border-bottom:1px solid #ece6dc;font-size:clamp(15px,1.35vw,19px);line-height:1.45}
.order li strong,.order li small{display:block}
.order li small{color:#6b4936;font-size:.8em}
.notes{padding:10px;background:#f1e8d7;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.order>button{width:100%;min-height:50px;background:var(--board-green);color:#fff;font-weight:700}
.overdue{border:2px solid #b57636;background:#fffaf0}
.empty{padding:30px 12px;color:var(--board-muted);border:1px dashed #d6cdbc;border-radius:14px;text-align:center}
.pickup-notice{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:9px;font-size:13px}
.pickup-notice.sent{color:#1f5a3e;background:#e3f2e7}
.pickup-notice.pending{color:#31584a;background:#e9f0eb}
.pickup-notice.failed{color:#8b382f;background:#f8e7e3}
.pickup-notice.muted{color:#77736c;background:#f0eee9}
.order .pickup-notice .notify-retry{width:auto;min-height:34px;padding:7px 11px;border:1px solid #b95b4e;color:#8b382f;background:#fff;font-size:12px;white-space:nowrap}
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login form{width:min(100%,380px);padding:28px;background:var(--board-card);border:1px solid var(--board-line);border-radius:20px;box-shadow:0 18px 45px #33271920}
.login img{width:110px}
.login label{display:block;margin:18px 0}
.login input{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid #d6cdbc;border-radius:8px}
.login button{width:100%;background:var(--board-green);color:#fff}
#message{position:fixed;z-index:10;bottom:max(16px,env(safe-area-inset-bottom));left:50%;max-width:90%;padding:15px 24px;transform:translateX(-50%);background:#6b4936;color:#fff;border-radius:12px;box-shadow:0 10px 30px #0003}

@media (min-width:1600px){main{gap:24px;padding-inline:32px}.order{padding:22px}.order li{font-size:20px}.order>button{min-height:58px;font-size:18px}}
@media (max-width:1100px){main{grid-template-columns:repeat(2,minmax(0,1fr))}.column:last-child{grid-column:1/-1}.column:last-child .order{display:inline-block;width:calc(50% - 10px);margin-right:14px;vertical-align:top}}
@media (max-width:700px){#app>header{position:relative;align-items:flex-start;flex-direction:column;padding:14px 16px}nav{width:100%;display:grid;grid-template-columns:1fr 1fr}nav>*{padding:10px;font-size:13px;text-align:center}.hint{padding:0 16px}main{grid-template-columns:1fr;padding:8px 14px calc(24px + env(safe-area-inset-bottom))}.column h2{top:0}.column:last-child{grid-column:auto}.column:last-child .order{display:block;width:auto;margin-right:0}.order{padding:16px}.pickup{font-size:34px}}
@media (orientation:portrait) and (min-width:701px) and (max-width:1100px){main{grid-template-columns:1fr}.column:last-child{grid-column:auto}.column:last-child .order{display:block;width:auto;margin-right:0}}