/* SMASHTAG · Brand Book Design System · Yellow #F8C808 / Ink #161310 / Cream #FFFBEF */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Oswald:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --yellow:#F8C808; --yellow-d:#D9AE00; --yellow-soft:rgba(248,200,8,.12);
  --ink:#161310; --cream:#FFFBEF; --magenta:#FF2E93; --orange:#F07E1C; --brown:#6B3F1D;
  --bg:#0e0b09; --bg-elev:#161310; --bg-card:#1c1815; --bg-card-2:#221e1a;
  --border:#2d2621; --border-soft:#241f1b;
  --text:#FFFBEF; --text-dim:rgba(255,251,239,.72); --text-mute:rgba(255,251,239,.42);
  --green:#5DA63A; --green-soft:rgba(93,166,58,.15);
  --red:#E0241F; --red-soft:rgba(224,36,31,.15);
  --blue:#3b82f6; --blue-soft:rgba(59,130,246,.15);
  --ff-impact:'Archivo Black',system-ui,sans-serif;
  --ff-head:'Oswald',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,sans-serif;
  --ff-mono:'Space Mono','JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-body);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.app-layout{display:flex;min-height:100vh}
.main-area{flex:1;min-width:0}
.main-header{padding:22px 30px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.main-header .htext h1{font-family:var(--ff-head);font-weight:700;font-size:26px;letter-spacing:.01em;text-transform:uppercase;color:var(--yellow);margin-bottom:2px;line-height:1.05}
.main-header .htext .hsub{color:var(--text-dim);font-size:12.5px}
.btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);border-radius:8px;padding:9px 14px;font-family:var(--ff-head);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:all .12s}
.btn:hover{border-color:var(--yellow);color:var(--yellow)}
.btn svg{width:14px;height:14px}
.btn.primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow);font-weight:700}
.btn.primary:hover{background:var(--yellow-d);border-color:var(--yellow-d);color:var(--ink)}
.toolbar{padding:14px 30px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg-elev)}
.store-select{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:9px 13px;color:var(--text);font-family:var(--ff-body);font-size:13px;font-weight:600;outline:none;cursor:pointer;min-width:180px}
.date-nav{display:flex;align-items:center;gap:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:3px}
.date-btn{background:transparent;border:none;color:var(--text-dim);width:30px;height:30px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.date-btn:hover{color:var(--yellow)}
.date-btn svg{width:15px;height:15px}
.date-label{font-family:var(--ff-mono);font-size:12.5px;font-weight:700;padding:0 12px;min-width:130px;text-align:center;color:var(--text)}
.shift-toggle{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:3px}
.shift-opt{background:transparent;border:none;color:var(--text-dim);padding:7px 14px;border-radius:6px;cursor:pointer;font-family:var(--ff-head);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.shift-opt.active{background:var(--yellow);color:var(--ink);font-weight:700}
.main-content{padding:24px 30px 60px}
.full-loader{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:200}
.full-loader .txt{font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);font-size:13px}
.spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--yellow);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.setup-error{margin:20px;background:rgba(224,36,31,.1);border:1px solid var(--red);border-radius:12px;padding:16px 18px;display:none}
.setup-error.show{display:block}
.setup-error .t{color:var(--red);font-family:var(--ff-head);font-weight:700;font-size:14px;text-transform:uppercase;margin-bottom:6px}
.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px 15px;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:10px;min-width:240px}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
.toast.success::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green)}
.toast.error::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--red)}
.mono{font-family:var(--ff-mono)}.head{font-family:var(--ff-head)}.impact{font-family:var(--ff-impact)}
@media(max-width:900px){.main-header,.toolbar,.main-content{padding-left:20px;padding-right:20px}.main-header{padding-left:62px}.main-header .htext h1{font-size:20px}}