:root { --primary:#B71C24; --primary-dark:#8E1119; --cream:#F8F3EA; --ink:#2B1D1F; --muted:#7C6C6A; --border:#E8DDC9; --green:#2F7D4F; --red:#C03A33; --gold:#A1711E }
body { background:var(--cream) }
.login-screen { background:linear-gradient(160deg,#2A1220,#4A1621) } .login-logo img { height:84px; display:block; margin:0 auto .3rem }
.topbar { background:linear-gradient(135deg,#2A1220,#3E1822); color:#fff } .topbar .biz-brand { color:#D9A441; letter-spacing:.18em } .topbar .biz-name { color:#fff } .logo-mark { border-radius:9px; background:#fff }
.btn-primary, .btn-action { background:var(--primary); color:#fff } .btn-primary:hover, .btn-action:hover { background:var(--primary-dark) }
.tabs { background:#fff } .tab.active { color:var(--primary); border-bottom-color:var(--primary) } .tab-badge { background:var(--primary) }
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; padding:.8rem 1rem 0 }
.stat { background:#fff; border:1px solid var(--border); border-radius:14px; padding:.6rem .3rem; text-align:center } .stat b { display:block; font-size:1.35rem } .stat span { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em }
.stat.hot { background:var(--primary); border-color:var(--primary); color:#fff } .stat.hot span { color:#FBD6D8 }
.cash-banner { margin:.6rem 1rem 0; padding:.6rem .8rem; background:#FFF8E5; border:1px solid #EBD08F; border-radius:12px; font-size:.82rem; color:#7A5B12 }
.filter-bar, .chip-row { display:flex; gap:.4rem; overflow-x:auto; padding:.7rem 1rem 0; scrollbar-width:none } .chip-row { padding:.4rem 0 .6rem; flex-wrap:wrap }
.chip { flex:none; padding:.4rem .85rem; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:.8rem; font-weight:600; color:var(--muted) } .chip.on { background:var(--ink); color:#fff; border-color:var(--ink) }
.order-card { border-radius:16px; position:relative; overflow:hidden } .order-card.is-new { border-color:var(--primary); box-shadow:0 0 0 2px rgba(183,28,36,.15) } .order-card.is-cancelled { opacity:.85; border-color:var(--red) }
.cancel-bar { background:var(--red); color:#fff; font-weight:700; font-size:.8rem; padding:.45rem .8rem; border-radius:10px; margin-bottom:.5rem }
.order-meta { display:flex; gap:.5rem; align-items:center; font-size:.74rem; color:var(--muted); margin:.15rem 0 .3rem }
.cod-tag { background:#FFF3D6; color:#7A5B12; font-weight:700; padding:.15rem .55rem; border-radius:999px; font-size:.72rem } .paid-tag { background:#E3F4EA; color:#1F5B38; font-weight:700; padding:.15rem .55rem; border-radius:999px; font-size:.72rem }
.note-line { background:#FBF6EC; border-radius:10px; padding:.45rem .65rem; font-size:.8rem; margin-top:.5rem }
.order-foot { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.6rem } .order-foot .order-actions { display:flex; gap:.5rem; align-items:center }
.btn-mini { display:inline-grid; place-items:center; min-width:42px; height:42px; border-radius:12px; border:1px solid var(--border); background:#fff; font-size:1rem; text-decoration:none; color:var(--ink) } .btn-mini.wide { flex:1; font-size:.82rem; font-weight:600 }
.contact-row { display:flex; gap:.5rem; margin-top:.6rem } .order-actions.col { display:flex; flex-direction:column; gap:.55rem } .order-actions.col .btn-action { width:100%; padding:.9rem; border-radius:12px; font-weight:700 }
.btn-action.big { font-size:1rem } .btn-action.danger { background:#fff; color:var(--red); border:1.5px solid var(--red) } .btn-action.secondary { background:#fff; color:var(--ink); border:1px solid var(--border) }
.st-assigned { background:#FBD6D8; color:#8E1119 } .st-accepted, .st-preparing { background:#FFF3D6; color:#7A5B12 } .st-ready { background:#E6EEF9; color:#26467A } .st-out_for_delivery { background:#E3E6FA; color:#2D3A8C } .st-delivered { background:#E3F4EA; color:#1F5B38 } .st-cancelled, .st-rejected { background:#FDE8E6; color:#8E1119 }
.sh { font-size:1.15rem; margin:.9rem 0 .2rem } .hint { font-size:.78rem; color:var(--muted); margin:0 0 .6rem }
.sheet .field input { width:100%; padding:.75rem .85rem; border:1.5px solid var(--border); border-radius:11px; font-size:.95rem } .sheet .field label { display:block; font-size:.76rem; font-weight:600; margin:.7rem 0 .3rem }
.cash-box { background:#FFF8E5; border:1px solid #EBD08F; border-radius:14px; padding:1rem; font-size:1.05rem; margin:.7rem 0; text-align:center } .cash-box b { font-size:1.5rem; display:block }
.check { display:flex; gap:.6rem; align-items:center; font-weight:600; font-size:.92rem; margin:.5rem 0 } .check input { width:22px; height:22px }
.order-items .it { display:flex; justify-content:space-between; gap:1rem; padding:.2rem 0 }
.month-line { text-align:center; font-size:.74rem; color:var(--muted); padding:1rem 1rem 5rem }
.toast { z-index:9999 }
.month-line:empty{display:none}