:root{--bg-primary: #0a0e17;--bg-surface: #111827;--bg-surface-elevated: #1e293b;--bg-glass: rgba(17, 24, 39, .75);--border-subtle: rgba(255, 255, 255, .08);--border-focus: rgba(59, 130, 246, .5);--primary: #3b82f6;--primary-hover: #2563eb;--primary-glow: rgba(59, 130, 246, .25);--accent-emerald: #10b981;--accent-amber: #f59e0b;--accent-rose: #f43f5e;--accent-cyan: #06b6d4;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--shadow-card: 0 10px 25px -5px rgba(0, 0, 0, .5), 0 8px 10px -6px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(59, 130, 246, .2);--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;line-height:1.5;background-image:radial-gradient(at 0% 0%,rgba(59,130,246,.12) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(16,185,129,.08) 0px,transparent 50%);background-attachment:fixed}.app-header{border-bottom:1px solid var(--border-subtle);background:var(--bg-glass);backdrop-filter:blur(16px);position:sticky;top:0;z-index:40;padding:1rem 1.5rem}.header-container{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}.logo-group{display:flex;align-items:center;gap:.75rem}.logo-badge{width:40px;height:40px;border-radius:var(--radius-md);background:linear-gradient(135deg,#2563eb,#10b981);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;color:#fff;box-shadow:0 4px 12px #2563eb66}.logo-text h1{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}.badge-tag{font-size:.7rem;font-weight:600;padding:.15rem .5rem;border-radius:var(--radius-full);background:#10b98126;color:var(--accent-emerald);border:1px solid rgba(16,185,129,.3);text-transform:uppercase;letter-spacing:.05em}.header-meta{display:flex;align-items:center;gap:1rem}.engine-selector-wrapper{display:flex;align-items:center;gap:.5rem;background:var(--bg-surface-elevated);padding:.25rem .6rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.engine-selector-label{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.engine-select{background:transparent;color:#60a5fa;border:none;font-size:.85rem;font-weight:600;cursor:pointer;outline:none;font-family:inherit}.engine-select option{background:var(--bg-surface);color:var(--text-primary)}.status-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--text-secondary);background:var(--bg-surface-elevated);padding:.35rem .75rem;border-radius:var(--radius-full);border:1px solid var(--border-subtle)}.status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--accent-emerald);box-shadow:0 0 8px var(--accent-emerald);animation:pulse-dot 2s infinite ease-in-out}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.main-content{flex:1;max-width:1300px;margin:0 auto;padding:2rem 1.5rem;width:100%;display:flex;flex-direction:column;gap:2rem}.sample-presets-bar{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1rem 1.25rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.presets-label{font-size:.85rem;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:.4rem}.presets-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.btn-preset{background:var(--bg-surface-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);padding:.45rem .85rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.35rem}.btn-preset:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 10px var(--primary-glow)}.workspace-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;align-items:start}@media(max-width:960px){.workspace-grid{grid-template-columns:1fr}}.panel-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column}.panel-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;background:#ffffff05}.panel-title{font-size:1.05rem;font-weight:600;display:flex;align-items:center;gap:.5rem;color:var(--text-primary)}.panel-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.input-actions{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.btn-action{padding:.9rem 1.25rem;border-radius:var(--radius-md);font-size:.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:all .2s ease;border:1px solid transparent}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px var(--primary-glow)}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{background:var(--bg-surface-elevated);color:var(--text-primary);border-color:var(--border-subtle)}.btn-secondary:hover{background:#ffffff14;border-color:#fff3}.drop-zone{border:2px dashed var(--border-subtle);border-radius:var(--radius-md);padding:2.5rem 1.5rem;text-align:center;cursor:pointer;transition:all .25s ease;background:#0003;display:flex;flex-direction:column;align-items:center;gap:.75rem}.drop-zone:hover,.drop-zone.drag-active{border-color:var(--primary);background:#3b82f60d}.drop-icon{width:48px;height:48px;border-radius:50%;background:var(--bg-surface-elevated);display:flex;align-items:center;justify-content:center;color:var(--primary);margin-bottom:.25rem}.drop-text{font-size:.95rem;font-weight:500;color:var(--text-primary)}.drop-subtext{font-size:.8rem;color:var(--text-muted)}.image-preview-wrapper{position:relative;background:#000;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle);min-height:240px;display:flex;align-items:center;justify-content:center}.image-preview-wrapper canvas{width:100%;height:auto;display:block;object-fit:contain}.image-overlay-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.processing-banner{background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column;gap:.5rem}.progress-header{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;font-weight:600;color:var(--primary)}.progress-bar-bg{width:100%;height:6px;background:#ffffff1a;border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent-emerald));border-radius:var(--radius-full);transition:width .2s ease}.metrics-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.metric-pill{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.6rem .8rem;display:flex;flex-direction:column;gap:.2rem}.metric-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.metric-value{font-size:1.05rem;font-weight:700;color:var(--text-primary);font-family:var(--font-mono)}.field-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.field-cell{background:#00000040;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.35rem;position:relative;transition:border-color .2s ease}.field-cell:hover{border-color:#ffffff2e}.field-cell.full-width{grid-column:span 2}.field-cell-header{display:flex;align-items:center;justify-content:space-between}.field-label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.field-badge{font-size:.65rem;font-weight:700;padding:.1rem .4rem;border-radius:var(--radius-full)}.badge-high{background:#10b98126;color:var(--accent-emerald)}.badge-low{background:#f59e0b26;color:var(--accent-amber)}.field-value{font-size:1.05rem;font-weight:600;color:var(--text-primary);word-break:break-word}.field-value.highlight{font-size:1.3rem;color:#60a5fa;font-family:var(--font-mono);letter-spacing:.05em}.field-value.empty{color:var(--text-muted);font-style:italic;font-weight:400;font-size:.9rem}.tabs-header{display:flex;gap:.5rem;border-bottom:1px solid var(--border-subtle);padding:0 1.5rem;background:#00000026}.tab-btn{padding:.85rem 1rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-pane{display:none}.tab-pane.active{display:block}.code-block-wrapper{position:relative;background:#090d16;border-radius:var(--radius-md);border:1px solid var(--border-subtle);overflow:hidden}.code-block-wrapper pre{padding:1.25rem;color:#a5b4fc;font-family:var(--font-mono);font-size:.85rem;overflow-x:auto;max-height:380px}.btn-copy-code{position:absolute;top:.75rem;right:.75rem;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:.35rem .7rem;border-radius:var(--radius-sm);font-size:.75rem;cursor:pointer}.btn-copy-code:hover{background:var(--primary);color:#fff}.camera-modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;backdrop-filter:blur(10px);z-index:100;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .3s ease}.camera-modal-backdrop.open{opacity:1;pointer-events:auto}.camera-modal-container{max-width:800px;width:100%;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}.camera-viewfinder-wrapper{position:relative;background:#000;width:100%;height:480px;overflow:hidden;display:flex;align-items:center;justify-content:center}.camera-viewfinder-wrapper video{width:100%;height:100%;object-fit:cover}.card-guide-hud{position:absolute;width:85%;max-width:520px;aspect-ratio:1.586;border:2px dashed rgba(59,130,246,.8);border-radius:12px;box-shadow:0 0 0 9999px #00000080;pointer-events:none;display:flex;align-items:center;justify-content:center}.card-guide-hud:before,.card-guide-hud:after{content:"";position:absolute;width:24px;height:24px;border-color:#60a5fa;border-style:solid}.card-guide-hud:before{top:-2px;left:-2px;border-width:4px 0 0 4px}.card-guide-hud:after{bottom:-2px;right:-2px;border-width:0 4px 4px 0}.guide-label{background:#000000b3;color:#fff;font-size:.8rem;padding:.3rem .8rem;border-radius:var(--radius-full);font-weight:500}.camera-controls{padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface-elevated)}.camera-action-group{display:flex;gap:.75rem}.btn-snap{background:linear-gradient(135deg,#2563eb,#10b981);color:#fff;border:none;padding:.8rem 1.75rem;border-radius:var(--radius-full);font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 15px #2563eb66}.btn-snap:hover{transform:scale(1.03)}.app-footer{border-top:1px solid var(--border-subtle);padding:1.5rem;text-align:center;font-size:.85rem;color:var(--text-muted);background:var(--bg-glass)}
