:root{--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-base:#090a10;--bg-surface:#101119;--bg-elevated:#161822;--bg-card:#1d1f2a;--bg-card-hover:#262836;--border:#2b2d3b;--border-strong:#424557;--accent:#8c65e6;--accent-dark:#5b2bca;--accent-light:#ab8cf2;--accent-glow:#8c65e638;--accent-subtle:#8c65e617;--danger:#e14747;--danger-dark:#ae2929;--danger-glow:#e1474738;--danger-subtle:#e1474717;--cyan:#27bff1;--cyan-glow:#27bff133;--cyan-subtle:#27bff114;--accent-green:#30b577;--accent-amber:#f1a522;--accent-blue:var(--cyan);--text-primary:#f3f3f7;--text-secondary:#9296aa;--text-muted:#65697b;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-pill:9999px;--shadow-sm:0 1px 4px #0006;--shadow-md:0 4px 20px #00000080;--shadow-lg:0 8px 48px #0009;--shadow-glow:0 0 32px var(--accent-glow);--ease:cubic-bezier(.4,0,.2,1);--dur:.2s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}h1{letter-spacing:-.03em;font-size:clamp(1.5rem,3vw,2rem);font-weight:800}h2{letter-spacing:-.01em;font-size:1.15rem;font-weight:700}h3{font-size:.95rem;font-weight:600}p{color:var(--text-secondary)}a{color:inherit;text-decoration:none}.container{max-width:1240px;margin:0 auto;padding:0 1.5rem}.app-shell{flex-direction:column;min-height:100vh;display:flex}.header{-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);z-index:100;background:#0c0e13d9;padding:.75rem 0;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:1rem;display:flex}.logo{flex-shrink:0;align-items:center;gap:.75rem;text-decoration:none;display:flex}.logo-img{object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);width:38px;height:38px}.logo-text{letter-spacing:-.02em;font-size:1.05rem;font-weight:800}.logo-sub{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;font-size:.65rem;font-weight:400}.header-right{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.status-pill{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text-secondary);align-items:center;gap:.45rem;padding:.35rem .85rem;font-size:.75rem;display:flex}.status-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.status-dot.online{background:var(--accent-green);box-shadow:0 0 8px #30b56399}.status-dot.offline{background:var(--danger)}.status-dot.loading{background:var(--text-muted);animation:1.4s ease-out infinite pulse}.tabs{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);gap:.2rem;margin:1.5rem 0;padding:.3rem;display:flex}.header-tabs{flex:1;max-width:480px;margin:0;padding:.25rem}.tab-btn{border-radius:var(--radius-lg);color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap;background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1rem;font-size:.875rem;font-weight:600;display:flex}.tab-btn:hover{color:var(--text-primary);background:var(--bg-card)}.tab-btn.active{background:linear-gradient(135deg,var(--accent-dark),var(--accent));color:#fff;box-shadow:0 2px 16px var(--accent-glow)}.tab-btn svg{flex-shrink:0}.main-content{flex:1;padding:0 0 4rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);transition:border-color var(--dur) var(--ease);padding:1.5rem}.card-hover:hover{border-color:#8c65e659;box-shadow:0 4px 24px #8c65e61f}.card-glass{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);background:#161822bf;border:1px solid #3c3f53cc;padding:1.5rem}.card-danger{background:var(--danger-subtle);border-color:#e147474d}.card-success{background:#30b57712;border-color:#30b5774d}.card-info{background:var(--cyan-subtle);border-color:#27bff14d}.btn{border-radius:var(--radius-md);font-family:var(--font-body);cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap;border:none;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.875rem;font-weight:600;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff0f,#0000);position:absolute;inset:0}.btn-primary{background:linear-gradient(135deg,var(--accent-dark),var(--accent));color:#fff;box-shadow:0 2px 12px var(--accent-glow)}.btn-primary:hover:not(:disabled){box-shadow:0 4px 24px var(--accent-glow);transform:translateY(-1px)}.btn-secondary{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-strong);background:var(--bg-card)}.btn-ghost{color:var(--text-muted);background:0 0;border:none;padding:.5rem .75rem}.btn-ghost:hover:not(:disabled){color:var(--text-primary);background:var(--bg-elevated)}.btn-danger{background:var(--danger-subtle);color:var(--danger);border:1px solid #e147474d}.btn-danger:hover:not(:disabled){background:#e1474733}.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important}.btn-sm{padding:.4rem .85rem;font-size:.8rem}.toggle-row{justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0;display:flex}.toggle-info .toggle-title{color:var(--text-primary);font-size:.875rem;font-weight:500}.toggle-info .toggle-desc{color:var(--text-muted);margin-top:.1rem;font-size:.75rem}.toggle-switch{cursor:pointer;flex-shrink:0;width:40px;height:22px;position:relative}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-track{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-pill);transition:all var(--dur) var(--ease);position:absolute;inset:0}.toggle-switch input:checked+.toggle-track{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.toggle-thumb{width:14px;height:14px;transition:transform var(--dur) var(--ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0000004d}.toggle-switch input:checked~.toggle-thumb{transform:translate(18px)}.slider-wrap{flex-direction:column;gap:.4rem;display:flex}.slider-label{justify-content:space-between;align-items:center;display:flex}.slider-name{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-size:.78rem;font-weight:600}.slider-val{font-size:.82rem;font-family:var(--font-mono);color:var(--accent);font-weight:600}input[type=range]{-webkit-appearance:none;background:var(--border);border-radius:var(--radius-pill);cursor:pointer;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px var(--accent-glow);transition:box-shadow var(--dur) var(--ease);border-radius:50%}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 14px var(--accent-glow)}select{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-md);font-family:var(--font-body);cursor:pointer;transition:border-color var(--dur) var(--ease);outline:none;padding:.55rem .9rem;font-size:.875rem}select:hover,select:focus{border-color:var(--border-strong)}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-xl);text-align:center;cursor:pointer;transition:all var(--dur) var(--ease);background:var(--bg-surface);padding:3rem 2rem;position:relative}.dropzone:hover,.dropzone.drag-over{border-color:var(--accent);background:var(--accent-subtle);box-shadow:inset 0 0 40px #8c65e60f}.dropzone input[type=file]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.dropzone-icon{color:var(--text-muted);justify-content:center;align-items:center;margin-bottom:.85rem;font-size:2.8rem;line-height:1;display:flex}.dropzone-text{color:var(--text-secondary);font-size:.95rem;font-weight:500}.dropzone-hint{color:var(--text-muted);margin-top:.3rem;font-size:.78rem}.dropzone-file{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.5rem;max-width:300px;margin-top:.5rem;padding:.4rem .85rem;font-size:.82rem;display:inline-flex;overflow:hidden}.progress-wrap{background:var(--bg-surface);border-radius:var(--radius-pill);height:6px;overflow:hidden}.progress-bar{border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--accent-dark),var(--accent));height:100%;transition:width .4s var(--ease);position:relative;overflow:hidden}.progress-bar:after{content:"";background:linear-gradient(90deg,#0000,#ffffff40,#0000);animation:1.6s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.badge{border-radius:var(--radius-pill);letter-spacing:.04em;align-items:center;gap:.3rem;padding:.2rem .65rem;font-size:.72rem;font-weight:700;display:inline-flex}.badge-danger{background:var(--danger-subtle);color:var(--danger);border:1px solid #e1474759}.badge-success{color:var(--accent-green);background:#30b57724;border:1px solid #30b5774d}.badge-info{background:var(--cyan-subtle);color:var(--cyan);border:1px solid #27bff14d}.badge-warning{color:var(--accent-amber);background:#f1a52224;border:1px solid #f1a5224d}.conf-bar-wrap{background:var(--bg-surface);border-radius:var(--radius-pill);flex:1;height:5px;overflow:hidden}.conf-bar{border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--danger-dark),var(--danger));height:100%}.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);transition:border-color var(--dur) var(--ease);padding:1.25rem 1.5rem}.kpi-num{font-size:1.9rem;font-weight:800;font-family:var(--font-mono);letter-spacing:-.03em;line-height:1}.kpi-label{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:.35rem;font-size:.75rem;font-weight:600}.kpi-strip{flex-wrap:wrap;gap:.75rem;display:flex}.kpi-strip .kpi-card{flex:1;min-width:120px}.log-table{border-collapse:collapse;width:100%;font-size:.82rem}.log-table th{text-align:left;color:var(--text-muted);font-weight:600;font-family:var(--font-body);letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg-card);padding:.6rem 1rem;font-size:.7rem;position:sticky;top:0}.log-table td{color:var(--text-secondary);border-bottom:1px solid #2c303a99;padding:.55rem 1rem}.log-table tbody tr{transition:background var(--dur) var(--ease)}.log-table tbody tr:hover td{background:var(--bg-card-hover)}.log-table tbody tr:last-child td{border-bottom:none}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:18px;height:18px;animation:.65s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.pulse-dot{background:var(--accent);width:9px;height:9px;box-shadow:0 0 0 0 var(--accent-glow);border-radius:50%;flex-shrink:0;animation:1.4s ease-out infinite pulse}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 8px #0000}to{box-shadow:0 0 #0000}}.alert-banner{z-index:500;border-bottom:1px solid var(--danger);animation:slideDown .3s var(--ease);box-shadow:0 4px 32px var(--danger-glow);background:linear-gradient(135deg,#4a1111,#6f1515);justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.5rem;display:flex;position:fixed;top:0;left:0;right:0}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.toast{background:var(--bg-card);border:1px solid var(--danger);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg),0 0 24px var(--danger-glow);animation:slideUp .3s var(--ease);z-index:900;align-items:center;gap:.75rem;max-width:380px;padding:.9rem 1.25rem;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .2s var(--ease);background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-box{background:var(--bg-card);border:2px solid var(--danger);border-radius:var(--radius-xl);text-align:center;width:90%;max-width:440px;box-shadow:0 0 80px var(--danger-glow),var(--shadow-lg);padding:2.5rem 3rem;animation:.4s cubic-bezier(.34,1.56,.64,1) bounceIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.section-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem;font-size:.7rem;font-weight:700}.error-box{border-radius:var(--radius-md);color:var(--accent);background:#e3353517;border:1px solid #e335354d;align-items:flex-start;gap:.6rem;padding:.85rem 1.1rem;font-size:.875rem;display:flex}.warn-box{border-radius:var(--radius-md);color:var(--accent-amber);background:#f1a52217;border:1px solid #f1a5224d;align-items:flex-start;gap:.6rem;padding:.85rem 1.1rem;font-size:.875rem;display:flex}.webcam-frame{border-radius:var(--radius-lg);aspect-ratio:4/3;object-fit:cover;background:#000;width:100%;display:block}.webcam-placeholder{aspect-ratio:4/3;background:var(--bg-surface);border-radius:var(--radius-lg);border:2px dashed var(--border);color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:.85rem;display:flex}.img-preview{border-radius:var(--radius-lg);object-fit:contain;background:#000;width:100%;max-height:440px;display:block}.two-col{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}@media (width<=768px){.two-col{grid-template-columns:1fr}}.three-col{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}@media (width<=600px){.three-col{grid-template-columns:1fr}}.options-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:0;padding:1.25rem;display:flex}.options-panel .toggle-row+.toggle-row{border-top:1px solid var(--border)}.sliders-row{flex-wrap:wrap;gap:1.25rem;margin-top:1rem;display:flex}.slider-wrap{flex:1;min-width:160px}.stat-chip{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.82rem;display:flex}.stat-num{color:var(--accent);font-size:1.05rem;font-weight:800;font-family:var(--font-mono)}.divider{background:var(--border);height:1px;margin:1.25rem 0}.footer{border-top:1px solid var(--border);text-align:center;color:var(--text-muted);padding:1.25rem 0;font-size:.75rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.w-full{width:100%}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-accent{color:var(--accent)}.text-green{color:var(--accent-green)}.text-amber{color:var(--accent-amber)}.text-blue{color:var(--accent-blue)}.font-mono{font-family:var(--font-mono)}.font-bold{font-weight:700}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:var(--radius-md)}.overflow-hidden{overflow:hidden}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.fade-in{animation:fadeSlideUp .35s var(--ease) both}@media (width<=900px){.container{padding:0 1rem}.header-inner{flex-wrap:wrap;row-gap:.75rem}.header-tabs{flex-basis:100%;order:3;max-width:100%}.header-right{order:2;margin-left:auto}}@media (width<=560px){.container{padding:0 .75rem}.card{padding:1.1rem}.logo-sub{display:none}.logo-img{width:32px;height:32px}.tab-btn{gap:.35rem;padding:.55rem .5rem;font-size:.78rem}.two-col,.three-col{gap:.85rem}.dropzone{padding:2rem 1rem}.modal-box{width:92%;padding:1.5rem}.sliders-row{gap:.85rem}}@media (width<=400px){.tab-btn span{display:none}.tab-btn{justify-content:center;padding:.6rem}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}