:root{--scanin-ink:#11132a;--scanin-blue:#4490d9;--scanin-sky:#c4dae7;--scanin-paper:#f2eded;--scanin-lavender:#dbbcf5;--scanin-critical:#8b1c1c;--scanin-rule:#11132a24;--scanin-rule-soft:#11132a14;--scanin-muted:#11132a9e;--scanin-muted-2:#11132a73;--scanin-font:"DM Sans", system-ui, sans-serif;--scanin-font-mono:"DM Mono", ui-monospace, monospace;--scanin-track-tight:-.02em;--scanin-track-loose:.14em;--ink-navy:var(--scanin-ink);--brand-blue:var(--scanin-blue);--sky-blue:var(--scanin-sky);--paper:var(--scanin-paper);--ink-60:var(--scanin-muted);--ink-36:var(--scanin-muted-2);--ink-12:var(--scanin-rule);--ink-06:var(--scanin-rule-soft);--bg:var(--scanin-paper);--surface:#fff;--ink:var(--scanin-ink);--muted:var(--scanin-muted);--accent:var(--scanin-blue);font-family:var(--scanin-font);color:var(--scanin-ink);background-color:var(--scanin-paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.55}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background-color:var(--scanin-paper);text-wrap:pretty;min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}h1,h2,h3{letter-spacing:var(--scanin-track-tight);text-wrap:balance;margin:0;font-weight:700}h4,p{margin:0}code,pre,.mono{font-family:var(--scanin-font-mono)}a{color:var(--scanin-blue);text-decoration:none}a:hover{text-decoration:underline}#root{min-height:100vh}.layout-root{background:var(--scanin-paper);flex-direction:column;min-height:100vh;display:flex}.layout-main{flex:1}.topbar{z-index:50;background:var(--scanin-paper);border-bottom:1px solid var(--scanin-rule);position:sticky;top:0}.topbar-inner{justify-content:space-between;align-items:center;gap:24px;width:min(1160px,100% - 48px);margin:0 auto;padding:16px 0;display:flex}.brand-link{color:inherit;border-radius:4px;outline:none;align-items:center;text-decoration:none;display:inline-flex}.brand-link:hover{opacity:.85;text-decoration:none}.topbar-nav{align-items:center;gap:4px;display:flex}.topbar-link{color:var(--scanin-muted);cursor:pointer;background:0 0;border:0;border-radius:9px;align-items:center;padding:8px 14px;font-size:.86rem;font-weight:500;text-decoration:none;transition:background .14s,color .14s;display:inline-flex}.topbar-link:hover{background:var(--scanin-rule-soft);color:var(--scanin-ink);text-decoration:none}.topbar-link.active{background:var(--scanin-ink);color:var(--scanin-paper)}.topbar-link.logout{margin-left:6px}.appfooter{border-top:1px solid var(--scanin-rule);padding:22px 0 28px}.appfooter-inner{width:min(1160px,100% - 48px);font-family:var(--scanin-font-mono);letter-spacing:.04em;color:var(--scanin-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:0 auto;font-size:.78rem;display:flex}.appfooter-brand{font-family:var(--scanin-font);letter-spacing:var(--scanin-track-tight);color:var(--scanin-ink);font-weight:700}.appfooter-sep{color:var(--scanin-muted-2)}.appfooter-link{color:var(--scanin-muted);border-bottom:1px solid var(--scanin-rule);text-decoration:none;transition:color .14s,border-color .14s}.appfooter-link:hover{color:var(--scanin-blue);border-color:var(--scanin-blue);text-decoration:none}.app-shell{width:min(1160px,100% - 48px);margin:0 auto;padding:40px 0 64px}.hero-panel,.panel{border:1px solid var(--scanin-rule);background:#fff;border-radius:16px}.hero-panel{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:32px;margin-bottom:24px;padding:32px;display:grid}.auth-hero{align-items:stretch}.auth-panel{text-align:center;padding:40px}.auth-card{background:var(--scanin-paper);border:1px solid var(--scanin-rule);border-radius:14px;flex-direction:column;gap:16px;padding:28px;display:flex}.panel{padding:28px}.panel-accent{background:#fff}.eyebrow,.panel-kicker{font-family:var(--scanin-font);text-transform:uppercase;letter-spacing:var(--scanin-track-loose);color:var(--scanin-blue);margin:0;font-size:11px;font-weight:500}.hero-copy h1{letter-spacing:var(--scanin-track-tight);color:var(--scanin-ink);margin:12px 0 14px;font-size:clamp(1.85rem,3vw,2.6rem);font-weight:700;line-height:1.1}.hero-text{max-width:50ch;color:var(--scanin-muted);font-size:.95rem}.panel-header h2,.history-header h2{letter-spacing:var(--scanin-track-tight);color:var(--scanin-ink);margin:6px 0 0;font-size:1.2rem;font-weight:700}.stats-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.stat-card{background:var(--scanin-paper);border:1px solid var(--scanin-rule);border-radius:12px;flex-direction:column;gap:8px;padding:20px;display:flex}.stat-label,.stat-note{color:var(--scanin-muted);font-size:.85rem}.stat-value{letter-spacing:-.03em;color:var(--scanin-ink);font-size:clamp(1.9rem,3vw,2.5rem);font-weight:700;line-height:1}.workspace-grid{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:24px;margin-bottom:24px;display:grid}.panel-header,.history-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.segmented-control{background:var(--scanin-paper);border:1px solid var(--scanin-rule);border-radius:12px;gap:2px;padding:3px;display:inline-flex}.segmented-control button{appearance:none;cursor:pointer;font:500 13px var(--scanin-font);color:var(--scanin-muted);background:0 0;border:0;border-radius:9px;padding:8px 14px;transition:background .14s,color .14s}.segmented-control button:hover:not(.active){color:var(--scanin-ink)}.segmented-control button.active{background:var(--scanin-ink);color:var(--scanin-paper)}.primary-button,.secondary-button{appearance:none;font:500 14px/1 var(--scanin-font);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:10px;padding:12px 18px;text-decoration:none;transition:background .14s,color .14s,border-color .14s,transform .1s;display:inline-flex}.primary-button:active,.secondary-button:active{transform:translateY(1px)}.auth-link{justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.primary-button{background:var(--scanin-ink);color:var(--scanin-paper)}.primary-button:hover{background:#1d2046}.secondary-button{color:var(--scanin-ink);border-color:var(--scanin-rule);background:0 0}.secondary-button:hover{border-color:var(--scanin-ink);text-decoration:none}.secondary-button.danger{color:var(--scanin-critical);background:0 0;border-color:#8b1c1c52}.secondary-button.danger:hover{border-color:var(--scanin-critical);background:#8b1c1c0f}.primary-button:disabled,.secondary-button:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-sm{border-radius:8px;padding:6px 12px;font-size:.78rem}.scanner-frame{background:var(--scanin-ink);border:1px solid var(--scanin-rule);border-radius:16px;min-height:360px;margin:22px 0 16px;position:relative;overflow:hidden}.scanner-frame:after{content:"";pointer-events:none;border:1.5px solid #ffffff24;border-radius:12px;position:absolute;inset:16px}.scanner-video,.scanner-placeholder,.manual-form{width:100%;height:100%;position:absolute;inset:0}.scanner-video{object-fit:cover;display:none}.scanner-video.visible{display:block}.scanner-placeholder,.manual-form{text-align:center;box-sizing:border-box;place-items:center;padding:32px;display:grid}.scanner-placeholder p,.manual-form label{color:#ffffffb8;font-size:.92rem}.manual-form{align-content:center;gap:14px}.form-grid input,.form-grid select{border:0;border-bottom:1px solid var(--scanin-rule);width:100%;font:inherit;color:var(--scanin-ink);background:0 0;border-radius:0;padding:8px 0;font-size:.95rem;transition:border-color .14s}.form-grid input:focus,.form-grid select:focus{border-bottom-color:var(--scanin-blue);outline:none}.form-grid select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--scanin-muted) 50%), linear-gradient(135deg, var(--scanin-muted) 50%, transparent 50%);background-position:calc(100% - 14px),calc(100% - 9px);background-repeat:no-repeat;background-size:5px 5px;padding-right:24px}.manual-form input{color:#fff;width:100%;max-width:400px;font:inherit;background:#ffffff14;border:1px solid #ffffff2e;border-radius:10px;padding:12px 16px;font-size:.95rem}.manual-form input::placeholder{color:#fff6}.scanner-actions,.history-actions{flex-wrap:wrap;gap:10px;display:flex}.upload-button{justify-content:center;align-items:center;display:inline-flex;position:relative}.upload-button input{opacity:0;cursor:pointer;position:absolute;inset:0}.status-stack{gap:10px;margin-top:18px;display:grid}.status-message,.result-card{border-radius:12px;padding:12px 16px;font-size:.9rem}.status-message{margin:0}.status-message.success{background:var(--scanin-sky);color:var(--scanin-ink)}.status-message.warning{color:var(--scanin-ink);border:1px solid var(--scanin-rule);background:#c4dae78c}.status-message.error{color:var(--scanin-critical);background:0 0;border:1px solid #8b1c1c52}.status-message.muted{background:var(--scanin-rule-soft);color:var(--scanin-muted)}.result-card{border:1px solid var(--scanin-rule);background:#fff}.result-card.success strong{color:var(--scanin-ink)}.result-card.error strong{color:var(--scanin-critical)}.result-card.neutral strong{color:var(--scanin-ink)}.result-card p{color:var(--scanin-muted);margin:4px 0 0;font-size:.88rem}.form-grid{gap:18px;margin-top:22px;display:grid}.form-grid label{color:var(--scanin-ink);font:500 11px var(--scanin-font);letter-spacing:var(--scanin-track-loose);text-transform:uppercase;gap:6px;display:grid}.form-grid input:disabled,.form-grid input[readonly]{color:var(--scanin-muted);cursor:default}.setup-note{border:1px solid var(--scanin-rule);background:#c4dae752;border-radius:12px;margin-top:18px;padding:16px 18px}.top-gap{margin-top:18px}.setup-note strong{color:var(--scanin-ink);margin-bottom:4px;font-size:.92rem;font-weight:700;display:block}.setup-note p,.setup-note code{color:var(--scanin-muted);font-size:.85rem}.setup-note code{font-family:var(--scanin-font-mono)}.history-panel{overflow:hidden}.history-table-wrapper{margin-top:22px;overflow-x:auto}.history-table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}.history-table th{text-align:left;font:500 11px var(--scanin-font);letter-spacing:var(--scanin-track-loose);text-transform:uppercase;color:var(--scanin-muted);border-bottom:1px solid var(--scanin-rule);padding:12px 16px}.history-table td{text-align:left;border-bottom:1px solid var(--scanin-rule-soft);padding:14px 16px}.history-table tbody tr{transition:background .1s}.history-table tbody tr:hover{background:#c4dae752}.badge{font:500 12px var(--scanin-font);background:var(--scanin-sky);color:var(--scanin-ink);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;display:inline-flex}.badge:before{content:"";opacity:.7;background:currentColor;border-radius:50%;width:6px;height:6px}.badge.success{background:var(--scanin-sky);color:var(--scanin-ink)}.badge.error,.badge.crit{color:var(--scanin-critical);background:0 0;border:1px solid #8b1c1c66}.badge.neutral,.badge.ghost{color:var(--scanin-muted);border:1px solid var(--scanin-rule);background:0 0}.badge.ink{background:var(--scanin-ink);color:var(--scanin-paper)}.empty-state{background:var(--scanin-rule-soft);border:1px solid var(--scanin-rule);color:var(--scanin-muted);text-align:center;border-radius:12px;margin-top:22px;padding:32px;font-size:.92rem}.sample-payloads{gap:12px;margin-top:18px;display:grid}.sample-payloads p{color:var(--scanin-muted);font-size:.86rem;font-weight:600}.sample-payload-list{flex-wrap:wrap;gap:8px;display:flex}.sample-pill{border:1px solid var(--scanin-rule);color:var(--scanin-ink);cursor:pointer;font:inherit;background:0 0;border-radius:999px;padding:6px 12px;font-size:.84rem;transition:background .12s,border-color .12s}.sample-pill:hover{border-color:var(--scanin-ink);background:#c4dae752}@media (width<=980px){.hero-panel,.workspace-grid{grid-template-columns:1fr}.panel-header,.history-header{flex-direction:column;align-items:flex-start}}@media (width<=720px){.topbar-inner{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 0}.topbar-nav{flex-wrap:wrap;width:100%}.topbar-link{padding:6px 12px;font-size:.82rem}}@media (width<=640px){.app-shell{width:calc(100% - 24px);padding:24px 0 48px}.hero-panel,.panel{border-radius:14px;padding:22px}.stats-grid{grid-template-columns:1fr}.scanner-frame{min-height:300px}.scanner-frame:after{inset:10px}.scanner-actions,.history-actions{flex-direction:column}.primary-button,.secondary-button,.upload-button{width:100%}}@media (width<=480px){.appfooter-inner{gap:6px;font-size:.74rem}}
