:root{--bg-app: #090d14;--bg-surface: #111722;--bg-surface-elevated: #172030;--bg-surface-card: #131b28;--bg-input: #0b1018;--border-subtle: #1e293b;--border-active: #0ea5e9;--border-hover: #334155;--accent-cyan: #38bdf8;--accent-blue: #0284c7;--accent-blue-hover: #0369a1;--accent-emerald: #10b981;--accent-amber: #f59e0b;--accent-rose: #f43f5e;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;--font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono", ui-monospace, monospace;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-xl: 8px;--shadow-card: 0 1px 3px rgba(0, 0, 0, .45);--shadow-elevation: 0 6px 20px rgba(0, 0, 0, .65)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-family);font-size:15px;line-height:1.4;overflow:hidden;height:100vh;height:100dvh;width:100vw;user-select:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100vw;overflow:hidden}.main-container{display:flex;flex:1;min-height:0;overflow:hidden}.nav-rail{width:68px;min-width:68px;background-color:var(--bg-surface);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px;z-index:10}.nav-rail-brand{width:44px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-family:var(--font-mono);letter-spacing:.04em;color:var(--accent-cyan);background:#0ea5e91a;border-radius:var(--radius-md);margin-bottom:8px;border:1px solid rgba(14,165,233,.28);cursor:pointer}.nav-item{width:56px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:var(--radius-md);background:transparent;border:1px solid transparent;color:var(--text-secondary);cursor:pointer;position:relative;transition:background .1s ease,color .1s ease}.nav-item-label{font-size:11px;font-weight:500;line-height:1;letter-spacing:-.01em}.nav-item:hover{background:#ffffff0a;color:var(--text-primary)}.nav-item.active{background:#0ea5e91f;color:var(--accent-cyan);border-color:#0ea5e940}.nav-item.active:before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;background:var(--accent-cyan);border-radius:0 2px 2px 0}.nav-item .nav-tooltip{position:absolute;left:64px;background:var(--bg-surface-elevated);color:var(--text-primary);padding:4px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-4px);transition:opacity .12s ease,transform .12s ease;border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);z-index:100}.nav-item:hover .nav-tooltip{opacity:1;transform:translate(0)}.nav-rail-spacer{flex:1}.content-area{flex:1;height:100%;overflow-y:auto;position:relative;background-color:var(--bg-app)}.view-pane{display:none;padding:14px 20px;height:100%;overflow-y:auto}.view-pane.active{display:block}.page-header{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.page-title{font-size:20px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.page-subtitle{font-size:12px;color:var(--text-secondary);margin-top:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 12px;border-radius:var(--radius-md);font-size:14px;font-weight:500;font-family:inherit;border:1px solid var(--border-subtle);background:var(--bg-surface-elevated);color:var(--text-primary);cursor:pointer;transition:background .1s ease,border-color .1s ease;user-select:none;text-decoration:none}.btn:hover:not(:disabled){background:#222f44;border-color:var(--border-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent-blue);border-color:#38bdf8;color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-blue-hover)}.btn-accent{background:#0ea5e924;border-color:#38bdf873;color:var(--accent-cyan)}.btn-accent:hover:not(:disabled){background:#0ea5e93d}.btn-danger{background:#f43f5e24;border-color:#f43f5e73;color:#fda4af}.btn-danger:hover:not(:disabled){background:#f43f5e42}.btn-sm{padding:3px 9px;font-size:12px}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-card)}.bottom-bar{position:relative;flex:0 0 auto;min-height:42px;background-color:var(--bg-surface);border-top:1px solid var(--border-subtle);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:0 12px;z-index:20;font-size:12px;gap:8px}.bottom-bar-left,.bottom-bar-center,.bottom-bar-right{display:flex;align-items:center;gap:8px;min-width:0}.bottom-bar-right{justify-content:flex-end}.bottom-bar [hidden]{display:none}.bottom-bar .status-badge{white-space:nowrap}.status-storage{max-width:min(30vw,180px)}.status-storage strong,#status-conn-text{overflow:hidden;text-overflow:ellipsis}#status-conn-badge{max-width:100%;cursor:pointer}.status-icon{min-width:24px;color:var(--accent-amber)}.status-popover{min-width:0}.status-popover>summary{list-style:none}.status-popover>summary::-webkit-details-marker{display:none}.status-popover-panel{position:absolute;inset:auto auto calc(100% + 6px) 12px;width:min(375px,calc(100vw - 24px));max-height:70dvh;overflow:auto;padding:12px;display:grid;gap:8px;background:var(--bg-surface-elevated);border:1px solid var(--border-hover);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevation)}.status-menu-items,.status-help-actions{display:flex;flex-wrap:wrap;gap:6px}.status-popover-panel>button{justify-self:start}.status-popover-panel p,.status-popover-panel span{overflow-wrap:anywhere}.setup-command{display:block;user-select:all;overflow-wrap:anywhere;padding:6px 8px;background:var(--bg-input);border-radius:var(--radius-sm);font:12px var(--font-mono)}.winusb-settings,.reader-help{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-size:13px}.reader-help{margin-bottom:12px}.reader-help:not([open])>:not(summary){display:none}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--radius-sm);background:var(--bg-input);border:1px solid var(--border-subtle);font-size:11px;font-weight:500;font-family:var(--font-mono)}.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted)}.badge-dot.online{background:var(--accent-emerald);box-shadow:0 0 6px var(--accent-emerald)}.badge-dot.warning{background:var(--accent-amber)}.badge-dot.error{background:var(--accent-rose)}.badge-dot.busy{background:var(--accent-cyan);animation:pulse .9s infinite alternate}@keyframes pulse{0%{opacity:.35}to{opacity:1}}.scanner-workspace{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,29vw,420px);gap:14px;height:calc(100% - 125px);min-height:520px}.scanner-workspace:has(>.scanner-preview:not([open])){grid-template-columns:minmax(0,1fr) auto}.scanner-preview{min-width:0;align-self:start;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-surface)}.scanner-preview>summary,.scanner-save-options>summary,.reader-help>summary{padding:6px 10px;cursor:pointer;font-size:13px}.scanner-save-options{border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.scanner-save-options-fields,.scanner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.scanner-save-options-fields{padding:0 10px 8px}.matrix-canvas-wrapper{background:var(--bg-surface);border-top:1px solid var(--border-subtle);padding:12px;display:flex;flex-direction:column;align-items:center;overflow:auto}.matrix-canvas-wrapper canvas{max-width:100%;background:#0b0f17;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}.scanner-feed-card{min-width:0;display:flex;flex-direction:column;gap:10px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:12px;height:100%;overflow:hidden}.scans-table-container{flex:1;overflow:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-input)}table.scans-table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}table.scans-table th{position:sticky;top:0;background:var(--bg-surface-elevated);padding:6px 10px;text-align:left;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);font-weight:600;font-size:11px;z-index:5}table.scans-table td{padding:5px 10px;border-bottom:1px solid rgba(30,41,59,.7);color:var(--text-primary);white-space:nowrap}table.scans-table tr:hover td{background:#0ea5e914}.photo-omr-container{display:flex;gap:14px;height:calc(100% - 60px)}.photo-canvas-area{flex:1;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:420px}.photo-canvas-area canvas{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.settings-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fmt-details-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px}.photo-tuning-drawer{width:320px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.slider-group{display:flex;flex-direction:column;gap:4px}.slider-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)}.slider-value{font-family:var(--font-mono);color:var(--accent-cyan)}input[type=range]{accent-color:var(--accent-cyan);width:100%}.fmt-designer-container{display:grid;grid-template-columns:1fr 340px;gap:14px;height:calc(100% - 60px)}.fmt-grid-area{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;align-items:center;overflow:auto}.fmt-inspector-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.form-group{display:flex;flex-direction:column;gap:4px}.form-label{font-size:11px;font-weight:500;color:var(--text-secondary)}.form-input,.form-select{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:6px 10px;color:var(--text-primary);font-size:12px;outline:none;font-family:inherit}.form-input:focus,.form-select:focus{border-color:var(--accent-cyan)}.chip-btn-group{display:flex;flex-wrap:wrap;gap:4px}.chip-btn{padding:3px 8px;border-radius:var(--radius-sm);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:11px;font-family:var(--font-mono);cursor:pointer}.chip-btn:hover{background:#222f44;color:var(--text-primary)}.chip-btn.active{background:#0ea5e929;border-color:var(--accent-cyan);color:var(--accent-cyan)}.diag-log-console{max-height:290px;overflow-y:auto;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px}.diag-log-row{padding:5px 10px;border-bottom:1px solid rgba(30,41,59,.65)}.diag-log-row:last-child{border-bottom:none}.diag-log-main{display:flex;align-items:center;gap:8px}.diag-time{color:var(--text-muted);white-space:nowrap}.diag-badge{font-size:10px;font-weight:700;padding:1px 5px;border-radius:2px;min-width:42px;text-align:center}.diag-level-ok{background:#10b98129;color:var(--accent-emerald)}.diag-level-info{background:#38bdf826;color:var(--accent-cyan)}.diag-level-warn{background:#f59e0b29;color:var(--accent-amber)}.diag-level-error{background:#f43f5e2e;color:var(--accent-rose)}.diag-cat{color:var(--text-secondary);font-weight:600;white-space:nowrap}.diag-summary{color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis}.diag-toggle-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--accent-cyan);font-family:var(--font-mono);font-size:10px;padding:1px 6px;border-radius:2px;cursor:pointer}.diag-details-pre{margin-top:6px;padding:8px;background:#070a0f;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:#cbd5e1;font-size:10px;overflow-x:auto;user-select:text}.modal-overlay{position:fixed;inset:0;background:#000000b8;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .12s ease}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-box{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:18px;width:90%;max-width:540px;box-shadow:var(--shadow-elevation)}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#263244;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3b4e68}@media(max-width:1024px){.scanner-workspace{display:flex;flex-direction:column;height:auto;min-height:0}.scanner-preview{align-self:stretch}.scanner-feed-card{height:clamp(340px,62vh,620px);flex:none}.settings-grid-2col,.fmt-details-grid{grid-template-columns:1fr}}@media(max-width:1150px){.bottom-bar{grid-template-columns:minmax(0,1fr) auto;padding:5px 10px;gap:5px 8px}.bottom-bar-right{grid-column:1 / -1;justify-content:space-between}}@media(max-width:768px){.bottom-bar{order:-1;padding-top:calc(5px + env(safe-area-inset-top,0px));border-top:none;border-bottom:1px solid var(--border-subtle)}.status-popover-panel{inset:calc(100% + 5px) auto auto 8px}.bottom-bar-left,.bottom-bar-center,.bottom-bar-right{gap:4px}.bottom-bar .status-badge,.bottom-bar .btn-sm{padding-inline:5px;font-size:10px}.bottom-bar-right .status-badge{gap:3px}.bottom-bar .status-storage{max-width:72px}.bottom-bar .status-storage>span{display:none}.main-container{flex-direction:column}.nav-rail{position:fixed;bottom:0;left:0;right:0;width:100%;min-width:100%;height:calc(58px + env(safe-area-inset-bottom,0px));padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px)) 8px;flex-direction:row;justify-content:space-around;align-items:center;border-right:none;border-top:1px solid var(--border-subtle);background:#111722f5;backdrop-filter:blur(12px);z-index:200}.nav-rail-brand,.nav-rail-spacer,.nav-item .nav-tooltip{display:none!important}.nav-item{flex:1;max-width:96px;height:48px;border-radius:12px;gap:3px}.nav-item.active:before{inset:0 28% auto;width:auto;height:3px;border-radius:0 0 3px 3px}.view-pane{padding:12px 12px calc(74px + env(safe-area-inset-bottom,0px)) 12px}.page-header{flex-direction:column;align-items:stretch;gap:8px}.page-title{font-size:18px}.scanner-workspace,.fmt-designer-container{display:flex;flex-direction:column;height:auto;min-height:0;gap:12px}.scanner-feed-card{height:420px;flex:none}.photo-omr-container{flex-direction:column;height:auto;gap:12px}.photo-canvas-area{min-height:360px;max-height:62dvh;padding:8px}.photo-tuning-drawer,.fmt-inspector-card{width:100%;overflow-y:visible}}@media(pointer:coarse){.btn{min-height:36px;padding:6px 12px}.btn-sm{min-height:32px;padding:4px 10px}.form-input,.form-select{min-height:38px}input[type=range]{height:24px}}