:root { --bg:#0f172a; --card:#1e293b; --card2:#273449; --text:#e2e8f0; --dim:#94a3b8;
  --ordered:#38bdf8; --sold:#4ade80; --cancelled:#fb923c; --warn:#fbbf24; --radius:14px; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust:100%; }
.hidden { display:none !important; }
.top { position:sticky; top:0; z-index:5; background:linear-gradient(var(--bg) 85%, rgba(15,23,42,0)); padding:env(safe-area-inset-top) 12px 6px; }
.row1 { display:flex; align-items:center; gap:8px; padding-top:10px; }
.nav { flex:0 0 44px; height:44px; border:0; border-radius:12px; background:var(--card); color:var(--text); font-size:28px; line-height:1; }
.nav:active { background:var(--card2); }
.daybox { flex:1; text-align:center; }
.dayname { font-weight:700; font-size:18px; }
#date { display:block; margin:2px auto 0; background:transparent; border:0; color:var(--dim); font-size:14px; text-align:center; width:100%; -webkit-appearance:none; }
.row2 { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:6px 0 8px; }
.pill { font-size:12px; padding:3px 9px; border-radius:99px; background:var(--card); color:var(--dim); }
.pill.warn { background:#452a05; color:var(--warn); font-weight:600; }
.totals { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tot { display:flex; flex-direction:column; align-items:center; padding:10px 4px 8px; border-radius:var(--radius); background:var(--card); text-decoration:none; color:var(--text); border-top:4px solid transparent; }
.tot b { font-size:30px; line-height:1; }
.tot span { font-size:12px; color:var(--dim); margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
.tot small { font-size:12px; color:var(--dim); margin-top:2px; min-height:14px; }
.tot.ordered { border-top-color:var(--ordered); } .tot.ordered b { color:var(--ordered); }
.tot.sold { border-top-color:var(--sold); } .tot.sold b { color:var(--sold); }
.tot.cancelled { border-top-color:var(--cancelled); } .tot.cancelled b { color:var(--cancelled); }
main { padding:6px 12px 40px; }
.panel { margin-top:18px; scroll-margin-top:190px; }
.panel h2 { font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin:0 0 8px 4px; display:flex; align-items:center; gap:8px; }
.panel .count { font-size:13px; padding:1px 8px; border-radius:99px; background:var(--card); color:var(--text); }
.panel.ordered h2 { color:var(--ordered); } .panel.sold h2 { color:var(--sold); } .panel.cancelled h2 { color:var(--cancelled); }
.note { font-size:12px; color:var(--dim); margin:0 4px 8px; }
.list { display:flex; flex-direction:column; gap:8px; }
.empty { padding:16px; text-align:center; color:var(--dim); background:var(--card); border-radius:var(--radius); font-size:14px; }
.card { display:grid; grid-template-columns:96px 1fr; gap:10px; background:var(--card); border-radius:var(--radius); padding:8px; border-left:4px solid var(--card2); cursor:pointer; }
.card:active { background:var(--card2); }
.panel.ordered .card { border-left-color:var(--ordered); } .panel.sold .card { border-left-color:var(--sold); } .panel.cancelled .card { border-left-color:var(--cancelled); }
.thumb { width:96px; height:72px; border-radius:8px; background:#0b1220 center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:#475569; font-size:11px; }
.body { min-width:0; }
.l1 { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.reg { font-family:"SF Mono", Menlo, monospace; font-weight:700; background:#fde047; color:#111; padding:1px 6px; border-radius:5px; font-size:13px; letter-spacing:.03em; }
.stock { font-size:12px; color:var(--dim); }
.price { margin-left:auto; font-weight:700; font-size:15px; }
.title { font-size:13px; margin:3px 0; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.meta { font-size:12px; color:var(--dim); display:flex; flex-wrap:wrap; gap:4px 10px; }
.meta b { color:var(--text); font-weight:600; }
.time { font-size:11px; color:var(--dim); margin-top:3px; }
.foot { text-align:center; color:#475569; font-size:11px; margin-top:28px; }
/* detail sheet */
.sheet { position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; }
.sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.sheet-card { position:relative; width:100%; max-height:92vh; overflow:auto; background:var(--card); border-radius:18px 18px 0 0; padding:12px 14px calc(18px + env(safe-area-inset-bottom)); animation:up .18s ease-out; }
@keyframes up { from { transform:translateY(40px); opacity:.5; } to { transform:none; opacity:1; } }
.grab { width:44px; height:5px; border-radius:99px; background:#475569; margin:0 auto 10px; }
.big { width:100%; aspect-ratio:4/3; border-radius:12px; background:#0b1220 center/cover no-repeat; }
.sheet h3 { margin:12px 0 4px; font-size:17px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-size:14px; margin-top:10px; }
.kv div:nth-child(odd) { color:var(--dim); }
.links { display:flex; gap:8px; margin-top:14px; }
.links a { flex:1; text-align:center; padding:12px; border-radius:12px; background:var(--card2); color:var(--text); text-decoration:none; font-weight:600; }
.links a.primary { background:var(--ordered); color:#052e3f; }
.tag { display:inline-block; font-size:11px; padding:2px 7px; border-radius:99px; background:var(--card2); color:var(--dim); margin-left:6px; }
@media (min-width:700px) { main { max-width:900px; margin:0 auto; } .top { max-width:900px; margin:0 auto; } .sheet { align-items:center; justify-content:center; } .sheet-card { max-width:560px; border-radius:18px; } }