:root { --scanner-header-height:64px; --scanner-control-height:84px; }
html,body { width:100%; min-width:320px; height:100%; }
body { display:flex; flex-direction:column; overflow:hidden; background:var(--charcoal); color:var(--light-gray); font-family:'Manrope',sans-serif; }
button,input { font:inherit; }

.scanner-header { z-index:20; min-height:var(--scanner-header-height); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 20px; border-bottom:1px solid var(--border-subtle); background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(14px); }
.scanner-brand { display:flex; align-items:center; gap:11px; color:var(--light-gray); text-decoration:none; font-size:22px; font-weight:800; }
.scanner-brand .brand-mark { width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--cobalt); color:#fff; font-size:19px; }
.scanner-title { display:flex; align-items:center; gap:10px; min-width:0; }
.scanner-title h1 { margin:0; font-size:14px; letter-spacing:0; }
.scanner-title span { color:var(--muted-gray); font:400 10px 'DM Mono',monospace; white-space:nowrap; }
.back-button { min-height:34px; padding:0 12px; border:1px solid var(--border-subtle); border-radius:7px; background:var(--panel-card); color:var(--light-gray); font-size:12px; font-weight:700; }
.back-button:hover,.back-button:focus-visible { border-color:var(--cobalt); background:var(--accent-light); outline:none; }

.scanner { position:relative; flex:1; min-height:0; overflow:hidden; background:#050507; isolation:isolate; }
.scanner::after { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 22%,transparent 70%,rgba(0,0,0,.42)); pointer-events:none; }
video,#preview,#edge-canvas { width:100%; height:100%; object-fit:cover; display:block; }
#preview { display:none; }
#edge-canvas { position:absolute; inset:0; pointer-events:none; }
.overlay { position:absolute; z-index:2; inset:0; display:grid; place-items:center; pointer-events:none; }
.receipt-guide { position:relative; width:min(72vw,520px); height:min(64vh,660px); border:0; border-radius:0; box-shadow:none; filter:drop-shadow(0 0 16px rgba(0,0,0,.32)); }
.receipt-guide::before,.receipt-guide::after,.receipt-guide span::before,.receipt-guide span::after { content:''; position:absolute; width:42px; height:42px; border-color:var(--cobalt); border-style:solid; }
.receipt-guide::before { top:0; left:0; border-width:3px 0 0 3px; border-radius:8px 0 0; }
.receipt-guide::after { top:0; right:0; border-width:3px 3px 0 0; border-radius:0 8px 0 0; }
.receipt-guide span::before { bottom:0; left:0; border-width:0 0 3px 3px; border-radius:0 0 0 8px; }
.receipt-guide span::after { right:0; bottom:0; border-width:0 3px 3px 0; border-radius:0 0 8px; }
.status { z-index:3; bottom:20px; max-width:calc(100% - 32px); padding:9px 13px; border:1px solid rgba(255,255,255,.16); border-radius:7px; background:rgba(10,10,14,.8); color:#F8FAFC; font:500 11px 'DM Mono',monospace; backdrop-filter:blur(10px); }

.controls { min-height:var(--scanner-control-height); display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 20px; border-top:1px solid var(--border-subtle); background:var(--panel); }
.primary-action,.secondary-action { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 20px; border-radius:7px; font-weight:800; }
.primary-action { border:1px solid var(--cobalt); background:var(--cobalt); color:#fff; box-shadow:0 10px 28px var(--accent-glow); }
.primary-action:hover,.primary-action:focus-visible { border-color:var(--accent-hover); background:var(--accent-hover); outline:3px solid var(--accent-glow); outline-offset:2px; }
.secondary-action { border:1px solid var(--border-subtle); background:var(--panel-card); color:var(--light-gray); }
.secondary-action:hover,.secondary-action:focus-visible { border-color:var(--cobalt); background:var(--accent-light); outline:none; }
button:disabled { cursor:not-allowed; opacity:.6; }

#preview-section { position:fixed; z-index:30; top:var(--scanner-header-height); right:0; bottom:0; width:min(390px,100vw); display:none; flex-direction:column; gap:14px; overflow:auto; padding:22px; border-left:1px solid var(--border-subtle); background:var(--panel); box-shadow:-22px 0 60px rgba(0,0,0,.32); }
.review-heading { padding-bottom:15px; border-bottom:1px solid var(--border-subtle); }
.review-heading span { color:var(--cobalt); font:500 10px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.review-heading h2 { margin:6px 0 0; font-size:20px; letter-spacing:0; }
.ocr-results-list { display:flex; flex-direction:column; gap:8px; }
.ocr-result { padding:12px 13px; border:1px solid var(--border-subtle); border-radius:7px; background:var(--panel-card); font-size:13px; }
.ocr-result strong { display:block; margin-bottom:5px; color:var(--cobalt); font:500 10px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.ocr-result .value { color:var(--light-gray); overflow-wrap:anywhere; }
.ocr-result.is-warning { border-color:rgba(248,113,113,.45); }
.ocr-result.is-warning strong { color:#F87171; }
.confidence-badge { margin-left:7px; padding:3px 6px; font-size:9px; letter-spacing:0; }
.confidence-badge.High { background:rgba(34,197,94,.15); color:#4ADE80; }
.confidence-badge.Medium { background:rgba(245,158,11,.15); color:#FBBF24; }
.confidence-badge.Low { background:rgba(248,113,113,.15); color:#F87171; }
.review-field { display:flex; flex-direction:column; gap:7px; color:var(--muted-gray); font:500 10px 'DM Mono',monospace; text-transform:uppercase; }
.review-field input { width:100%; min-height:42px; padding:0 12px; border:1px solid var(--border-subtle); border-radius:7px; background:var(--panel-card); color:var(--light-gray); font:13px 'Manrope',sans-serif; text-transform:none; }
.review-field input:focus { border-color:var(--cobalt); outline:3px solid var(--accent-light); }
.review-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:9px; margin-top:auto; padding-top:8px; }
.review-actions button { width:100%; padding-inline:10px; }
.spinner { width:13px; height:13px; margin:0; }
#debug { position:absolute; z-index:3; top:12px; left:12px; padding:5px 7px; border-radius:4px; background:rgba(0,0,0,.55); color:rgba(255,255,255,.64); font:400 9px 'DM Mono',monospace; }
#upload-section,#canvas { display:none; }

@media (max-width:640px) {
  :root { --scanner-header-height:58px; --scanner-control-height:76px; }
  .scanner-header { padding:0 13px; gap:10px; }
  .scanner-brand > span:last-child,.scanner-title span { display:none; }
  .scanner-title { margin-right:auto; }
  .receipt-guide { width:78vw; height:60vh; }
  #debug { display:none; }
  #preview-section { top:auto; left:0; width:100%; max-height:62vh; border-top:1px solid var(--border-subtle); border-left:0; border-radius:8px 8px 0 0; box-shadow:0 -22px 60px rgba(0,0,0,.4); }
  .review-heading h2 { font-size:18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }