.cv-scanner-hero { margin-bottom:22px; background:linear-gradient(130deg,#fff 0%,#fff8e8 100%); }
.cv-scanner-pipeline { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.cv-scanner-pipeline span { display:inline-flex; align-items:center; gap:7px; color:var(--cv-wine-800); font-size:.9rem; font-weight:800; }
.cv-scanner-pipeline b { display:grid; width:27px; height:27px; place-items:center; border-radius:50%; background:var(--cv-wine-800); color:#fff; font-size:.75rem; }
.cv-scanner-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr); gap:22px; align-items:start; }
.cv-scanner-camera { position:relative; overflow:hidden; aspect-ratio:4/3; margin-top:16px; border:1px solid rgba(255,255,255,.15); border-radius:14px; background:#18080c; }
.cv-scanner-camera video { display:block; width:100%; height:100%; object-fit:cover; }
.cv-scanner-frame { position:absolute; z-index:2; inset:20% 10%; border:3px solid var(--cv-gold-500); border-radius:14px; box-shadow:0 0 0 999px rgba(22,4,8,.35); pointer-events:none; }
.cv-scanner-placeholder { position:absolute; z-index:3; inset:0; display:grid; place-items:center; padding:26px; background:linear-gradient(145deg,#3a0a14,#651122); color:rgba(255,255,255,.8); text-align:center; }
.cv-scanner-placeholder[hidden] { display:none; }
.cv-scanner-placeholder strong,.cv-scanner-placeholder span { display:block; }
.cv-scanner-placeholder strong { margin-bottom:7px; color:#fff; font-size:1.12rem; }
.cv-scanner-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.cv-scanner-progress { width:100%; margin-top:10px; accent-color:var(--cv-wine-700); }
.cv-file-preview { display:flex; align-items:center; gap:12px; margin-top:10px; }
.cv-file-preview img { width:72px; height:72px; border:1px solid var(--cv-border); border-radius:10px; object-fit:cover; }
.cv-scanner-capabilities { display:grid; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--cv-border); }
.cv-scanner-capabilities p { margin:0; }
.cv-scanner-capabilities strong,.cv-scanner-capabilities span { display:block; }
.cv-scanner-capabilities strong { color:var(--cv-wine-800); font-size:.9rem; }
.cv-scanner-capabilities span { margin-top:3px; color:var(--cv-muted); font-size:.82rem; }
.cv-search-field { margin-top:4px; }
.cv-scanner-suggestions { overflow:auto; max-height:300px; border:1px solid var(--cv-border); border-radius:12px; background:#fff; box-shadow:0 14px 35px rgba(45,6,14,.12); }
.cv-scanner-suggestion { display:grid; width:100%; grid-template-columns:1fr auto; gap:10px; padding:12px 14px; border:0; border-bottom:1px solid var(--cv-border); background:transparent; color:var(--cv-ink-900); text-align:left; cursor:pointer; }
.cv-scanner-suggestion:last-child { border-bottom:0; }
.cv-scanner-suggestion:hover,.cv-scanner-suggestion:focus-visible { background:var(--cv-cream-100); outline:2px solid var(--cv-gold-500); outline-offset:-2px; }
.cv-scanner-suggestion strong,.cv-scanner-suggestion span { display:block; }
.cv-scanner-suggestion span,.cv-scanner-suggestion small { color:var(--cv-muted); }
.cv-scanner-candidates,.cv-scanner-result { margin-top:22px; }
.cv-candidate-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cv-candidate { display:flex; min-height:190px; flex-direction:column; padding:17px; border:1px solid var(--cv-border); border-radius:13px; background:#fff; }
.cv-candidate h3 { margin:0 0 8px; color:var(--cv-wine-900); font-family:var(--cv-font-display); font-size:1.25rem; }
.cv-candidate p { margin:0 0 14px; color:var(--cv-muted); font-size:.88rem; }
.cv-candidate .cv-button { width:100%; margin-top:auto; }
.cv-result-header { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.cv-confidence-badge { flex:0 0 auto; padding:8px 11px; border-radius:999px; background:#f4e6bb; color:var(--cv-wine-800); font-size:.8rem; font-weight:800; }
.cv-scan-feedback { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:20px; padding-top:15px; border-top:1px solid var(--cv-border); }
.cv-scan-feedback > span:first-child { margin-right:4px; color:var(--cv-muted); font-size:.9rem; }
#feedback-status { color:var(--cv-muted); font-size:.84rem; }
@media (max-width:900px) { .cv-scanner-layout,.cv-candidate-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .cv-scanner-actions .cv-button { width:100%; } .cv-result-header { display:block; } .cv-confidence-badge { display:inline-block; margin-top:8px; } }