:root { --canvas:#F1F3F1; --surface:#fff; --ink:#19332C; --muted:#67776F; --line:#E1E7E2; --brand-action:#132621; --brand-soft:#EDF3EE; --merchant-accent:#F5D77F; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:400 14px/1.6 Inter,system-ui,sans-serif; }
a { color:var(--brand-action); text-decoration:none; }
button,input,select { font:inherit; }
[hidden],.hidden { display:none!important; }
h1,h2,p { margin:0; }
.scanner-workspace-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:80px; padding:16px max(24px,calc((100vw - 1120px)/2)); border-bottom:1px solid var(--line); background:#fff; position:relative; }
.scanner-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.scanner-brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--merchant-accent); color:var(--brand-accent-ink,#19332C); flex:none; overflow:hidden; }
.scanner-brand-mark img { width:100%; height:100%; object-fit:contain; }
.scanner-brand p { font-weight:700; overflow-wrap:anywhere; }
.scanner-brand span:not(.scanner-brand-mark) { color:var(--muted); font-size:11px; }
.scanner-workspace-bar nav { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; font-size:12px; flex-shrink:0; }
.scanner-workspace-bar a { display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.scanner-page { padding:32px 24px 24px; }
.scanner-panel { width:100%; max-width:1120px; margin:auto; }
.scanner-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.scanner-heading h1 { font-size:30px; line-height:1.25; font-weight:650; letter-spacing:-1px; }
.scanner-heading p { margin-top:8px; color:var(--muted); font-size:12px; }
.scanner-status { padding:6px 10px; background:var(--brand-soft); color:var(--brand-action); border:1px solid var(--line); border-radius:8px; font-size:11px; }
body[data-ui="scanner"] .scanner-location { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-bottom:18px; padding:16px 20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); }
body[data-ui="scanner"] .scanner-location label { font-size:12px; font-weight:600; margin:0; }
body[data-ui="scanner"] .scanner-location select { width:auto; min-height:44px; max-width:100%; padding:9px 36px 9px 12px; border:1px solid var(--line); border-radius:9px; background:#F9FBF8; color:var(--ink); }
body[data-ui="scanner"] .scanner-location p { flex:1 1 280px; color:var(--muted); font-size:11px; margin:0; }
.scanner-program { display:flex; align-items:center; gap:12px; padding:18px 20px; margin-bottom:22px; border:1px solid var(--line); border-radius:14px; background:var(--brand-soft); }
.scanner-program-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#fff; color:var(--brand-action); flex:none; }
.scanner-program>div { min-width:0; flex:1; }
.scanner-program strong { font-size:13px; }
.scanner-program p { font-size:12px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.scanner-program a { font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.scanner-work-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:22px; align-items:start; }
.scanner-card,.manual-card,.scanner-help { min-width:0; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 3px #1B382803; }
.scanner-card-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.scanner-card h2,.manual-card h2,.scanner-help h2 { font-size:16px; font-weight:650; letter-spacing:-.25px; }
.scanner-copy,.manual-card>p { color:var(--muted); font-size:12px; margin-top:5px; }
.camera-status { font-size:11px; }
body[data-ui="scanner"] .reward-mode { border-color:var(--line); background:var(--brand-soft); font-size:12px; }
.reward-mode small { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
body[data-ui="scanner"] .reward-mode input { accent-color:var(--brand-action); }
.scanner-shell { position:relative; min-height:300px; overflow:hidden; border-radius:12px; background:#15231F; }
#reader { border:0!important; width:100%; }
#reader video { display:block; width:100%!important; object-fit:cover; }
#reader__dashboard { background:#fff; padding:12px; }
.scan-line { position:absolute; top:50%; width:70%; left:15%; height:2px; background:var(--merchant-accent); box-shadow:0 0 14px var(--merchant-accent); opacity:.65; pointer-events:none; }
body[data-camera-state="unavailable"] .scanner-shell { display:none; }
.scanner-hint { margin-top:14px; color:var(--muted); font-size:11px; line-height:1.7; }
.scanner-side-column { display:flex; flex-direction:column; gap:18px; min-width:0; }
.manual-card label { display:block; font-size:12px; font-weight:600; margin-top:20px; margin-bottom:8px; }
.glass-input { display:block; width:100%; min-height:48px; border:1px solid var(--line); border-radius:9px; background:#F9FBF8; color:var(--ink); padding:12px; }
.manual-submit { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; margin-top:12px; border:0; border-radius:9px; padding:12px 16px; background:var(--brand-action); color:#fff; font-weight:600; cursor:pointer; }
.manual-submit:hover { filter:brightness(1.08); }
.manual-submit:disabled { opacity:.6; cursor:wait; }
.scanner-amount>p { font-size:11px; color:var(--muted); margin-top:6px; }
.scanner-change-customer { min-height:44px; width:100%; margin-top:8px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--brand-action); cursor:pointer; }
#resultBox[data-state="pending"] { background:var(--brand-soft); }
.scanner-help { background:#F9FBF8; }
.scanner-help ol { padding-left:18px; margin:14px 0; color:var(--muted); font-size:12px; }
.scanner-help li+li { margin-top:8px; }
.scanner-help>p { border-top:1px solid var(--line); padding-top:12px; font-size:11px; color:var(--muted); }
#resultBox { display:flex; align-items:flex-start; gap:12px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fff; }
#resultIcon { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:9px; }
#resultTitle { font-size:14px; font-weight:650; }
#resultText { font-size:12px; margin-top:5px; overflow-wrap:anywhere; }
#resultBox[data-state="success"] { border-color:#C5E4D5; background:#EBF7F0; }
#resultIcon[data-state="success"] { background:#D8EFE0; color:#24704E; }
#resultBox[data-state="error"] { border-color:#EECBD1; background:#FFF2F3; }
#resultIcon[data-state="error"] { background:#F9DEE3; color:#A63148; }
#resultBox[data-state="loading"] { background:var(--brand-soft); }
#resultIcon[data-state="loading"] { background:#fff; color:var(--brand-action); }
.scanner-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:22px 0; color:var(--muted); font-size:11px; }
html[data-season="christmas"] .scanner-workspace-bar::after { content:""; position:absolute; inset:auto 0 -6px; height:7px; pointer-events:none; background:radial-gradient(ellipse 2.5px 3.5px at 20px 3px,#B95164 96%,transparent),radial-gradient(ellipse 2.5px 3.5px at 60px 3px,#72A28C 96%,transparent),radial-gradient(ellipse 2.5px 3.5px at 100px 3px,#D4AE68 96%,transparent); background-size:120px 7px; }
@media(max-width:760px) { .scanner-work-grid { grid-template-columns:minmax(0,1fr); } .scanner-page { padding:24px 16px; } .scanner-workspace-bar { padding:12px 16px; gap:12px; flex-wrap:wrap; } .scanner-workspace-bar nav { gap:8px 14px; } .scanner-card,.manual-card,.scanner-help { padding:20px; } .scanner-program { display:grid; grid-template-columns:38px minmax(0,1fr); } .scanner-program a { grid-column:2; min-height:44px; display:inline-flex; align-items:center; } }
@media(max-width:480px) { .scanner-workspace-bar nav { width:100%; justify-content:space-between; } .scanner-heading h1 { font-size:27px; } body[data-ui="scanner"] .scanner-location { padding:16px; } body[data-ui="scanner"] .scanner-location select { width:100%; font-size:16px; } .glass-input { font-size:16px; } .scanner-program { padding:16px; } .scanner-shell { min-height:260px; } .scanner-footer { display:block; } .scanner-footer span { display:block; margin-top:5px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }