.scanner-button{display:inline-flex;align-items:center;justify-content:center}.scanner-button .icon{width:23px;height:23px}#scanner-dialog .scanner-capture{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;margin:0 0 12px}#scanner-dialog .scanner-result-actions{display:flex;gap:10px;margin-bottom:16px}#scanner-dialog .scanner-result-actions button{flex:1;min-height:44px}#scanner-dialog .scanner-view{min-height:0}#scanner-dialog .scanner-guide{inset:10% 7%;border-radius:14px}#scanner-dialog #barcode-video{aspect-ratio:4/3;max-height:300px}#scanner-dialog[data-camera-state=reading] .scanner-help{display:flex;align-items:center;gap:12px}#scanner-dialog[data-camera-state=reading] .scanner-help:before{content:"";width:22px;height:22px;flex:none;border:3px solid #d8e9df;border-top-color:var(--primary);border-radius:50%;animation:camera-spin .9s linear infinite}#scanner-dialog[data-camera-state=reading] .scanner-manual-area{display:none}#scanner-dialog[data-camera-state=notice] .scanner-help{padding:14px;border-radius:12px;background:var(--commercial-soft);line-height:1.6}@keyframes camera-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){#scanner-dialog[data-camera-state=reading] .scanner-help:before{animation:none}}@media(max-width:480px){#scanner-dialog #barcode-video{max-height:250px}#scanner-dialog .scanner-result-actions{flex-wrap:wrap}}

/* Fill the usable phone viewport while retaining an outer margin and visible controls. */
#scanner-dialog[open][data-camera-state=camera]{--camera-space:24px;box-sizing:border-box;display:flex;flex-direction:column;position:fixed;inset:0;margin:auto;transform:none;width:min(640px,calc(100vw - var(--camera-space)));max-width:calc(100vw - var(--camera-space));height:calc(100vh - var(--camera-space));height:calc(100dvh - var(--camera-space));max-height:calc(100dvh - var(--camera-space));padding:18px;overflow:hidden;border-radius:22px}
#scanner-dialog[data-camera-state=camera] .scanner-top,#scanner-dialog[data-camera-state=reading] .scanner-top{flex:none;margin-bottom:6px}
#scanner-dialog[data-camera-state=camera] h2,#scanner-dialog[data-camera-state=reading] h2{flex:none;margin:0 0 10px;font-size:22px;line-height:1.2}
#scanner-dialog[data-camera-state=camera] .scanner-view{position:relative;flex:1 1 auto;min-height:120px;max-height:none;margin:0 0 10px}
#scanner-dialog[data-camera-state=camera] #barcode-video{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover}
#scanner-dialog[data-camera-state=camera] .scanner-guide{inset:4%;border-radius:16px}
#scanner-dialog[data-camera-state=camera] .scanner-help{flex:none;font-size:13px;line-height:1.35;margin:0 0 10px}
#scanner-dialog[data-camera-state=camera] .scanner-capture{flex:none;margin-bottom:8px;min-height:46px}
#scanner-dialog[data-camera-state=camera] .scanner-result-actions{flex:none;margin-bottom:8px}
#scanner-dialog[data-camera-state=camera] .scanner-manual-area{flex:none;padding-top:4px}
#scanner-dialog[data-camera-state=camera] .scanner-manual-area summary{min-height:36px;font-size:13px}
#scanner-dialog[data-camera-state=reading] .scanner-help{flex:1;justify-content:center}
@media(max-width:480px){#scanner-dialog[open][data-camera-state=camera]{padding:14px;--camera-space:24px}#scanner-dialog[data-camera-state=camera] .scanner-top .eyebrow{font-size:10px}#scanner-dialog[data-camera-state=camera] .scanner-close{width:34px;height:34px;min-height:34px}}
@media(max-height:620px){#scanner-dialog[open][data-camera-state=camera]{padding:12px}#scanner-dialog[data-camera-state=camera] .scanner-help{font-size:12px;margin-bottom:6px}#scanner-dialog[data-camera-state=camera] h2{font-size:19px;margin-bottom:8px}}

/* Reuse the application spinner in a compact, cancellable identification dialog. */
#scanner-dialog .scanner-loading{display:none}
#scanner-dialog[open][data-camera-state=reading]{box-sizing:border-box;display:block;position:fixed;inset:0;margin:auto;transform:none;width:min(320px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:fit-content;min-height:0;max-height:calc(100dvh - 24px);padding:24px;overflow:auto;border-radius:24px}
#scanner-dialog[data-camera-state=reading] .scanner-top,#scanner-dialog[data-camera-state=reading] #scanner-title,#scanner-dialog[data-camera-state=reading] .scanner-view,#scanner-dialog[data-camera-state=reading] .scanner-help,#scanner-dialog[data-camera-state=reading] .scanner-manual-area{display:none}
#scanner-dialog[data-camera-state=reading] .scanner-loading{display:flex;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:0;border:0;box-shadow:none;background:transparent}
#scanner-dialog[data-camera-state=reading] .scanner-result-actions{margin:20px 0 0}
#scanner-dialog[data-camera-state=reading] .scanner-result-actions button{min-height:44px}