*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--canvas: #060d18;--surface: #0e1829;--surface2: #162136;--surface3: #1e2f4a;--text: #d8e4f8;--text-2: #8898c8;--muted: #505e90;--border: rgba(148, 168, 255, .1);--border2: rgba(148, 168, 255, .2);--gold: #f5c842;--gold-dark: #c9a020;--stop: #e53e5e;--success: #0ea372;--mono: "SF Mono", "Fira Code", "Roboto Mono", ui-monospace, monospace}html,body{height:100%;background:var(--canvas);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden}#app{min-height:100dvh;max-width:480px;margin:0 auto;padding:0 16px;display:flex;flex-direction:column}header{padding:28px 0 16px;text-align:center;margin-bottom:18px;position:relative}header:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:56px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:2px}header h1{font-size:1.7rem;font-weight:800;letter-spacing:-.04em;color:var(--text)}.subtitle{font-size:.58rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:6px}main{flex:1;display:flex;flex-direction:column;gap:14px}#viewport{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:14px;border:1.5px solid var(--border2);overflow:visible;margin-top:38px;transition:border-color .3s,box-shadow .3s}#viewport.camera-live{border-color:#f5c84280;box-shadow:0 0 0 1px #f5c8421a}#video,#static-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:12px}#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#ffffff2e;font-size:.72rem;letter-spacing:.04em;border-radius:12px}.ph-icon{font-size:2.8rem;font-weight:200;opacity:.4}#fps-badge,#model-badge{position:absolute;font-family:var(--mono);font-weight:800;letter-spacing:.05em;line-height:1.4}#fps-badge{top:8px;right:8px;padding:4px 10px;border-radius:20px;font-size:.62rem;background:var(--gold);color:#060d18;border:none}#model-badge{top:-34px;left:0;right:0;text-align:center;background:var(--surface);color:var(--gold);border:1px solid var(--border2);border-bottom:none;border-radius:8px 8px 0 0;font-size:.65rem;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#060d18eb;color:var(--text-2);font-size:.68rem;letter-spacing:.06em;border-radius:12px}.spinner{width:28px;height:28px;border:2px solid rgba(245,200,66,.15);border-top-color:var(--gold);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#error-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#060d18f2;color:var(--text);font-size:.72rem;text-align:center;padding:32px;line-height:1.6;border-radius:12px}.error-hint{color:var(--muted);font-size:.65rem}#error-screen button{padding:10px 28px;border-radius:20px;border:1px solid var(--gold);background:#f5c84214;color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background .15s}#error-screen button:active{background:#f5c8422e}[hidden]{display:none!important}#controls{display:flex;flex-direction:column;gap:10px}#controls-header{display:flex;gap:8px}.ctrl-select{flex:1;background:var(--surface);color:var(--text);border:1.5px solid var(--border2);border-radius:10px;padding:13px 32px 13px 14px;font-size:.95rem;font-weight:700;letter-spacing:.01em;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23505e90' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-color:var(--surface);transition:border-color .15s}.ctrl-select:focus{outline:none;border-color:#f5c84273}#btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}#btn-camera{padding:16px;border-radius:10px;border:1.5px solid var(--border2);background:var(--surface2);color:var(--text);font-size:.95rem;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:border-color .15s,background .15s,color .15s;-webkit-tap-highlight-color:transparent}#btn-camera:disabled{opacity:.3;cursor:default}#btn-camera.running{background:#e53e5e1f;border-color:#e53e5e73;color:#ff7090}#btn-camera:not(:disabled):active{opacity:.8}#btn-upload{display:flex;align-items:center;justify-content:center;padding:16px;border-radius:10px;border:1.5px solid var(--border2);background:var(--surface);color:var(--text);font-size:.95rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s;user-select:none;-webkit-tap-highlight-color:transparent}#btn-upload:not(.disabled):active{border-color:#f5c84266;background:var(--surface2)}#btn-upload.disabled{opacity:.3;cursor:default}#btn-model{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;padding:13px;border-radius:10px;border:1.5px dashed var(--border2);background:transparent;color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color .15s,color .15s;letter-spacing:.02em}#btn-model:active{border-color:#f5c84266;color:var(--gold)}#btn-model.disabled{opacity:.3;cursor:default}#btn-capture{grid-column:1 / -1;display:none;padding:14px;border-radius:10px;border:1.5px solid var(--border2);background:var(--surface);color:var(--text);font-size:.95rem;font-weight:600;cursor:pointer;transition:border-color .15s;-webkit-tap-highlight-color:transparent}#btn-capture.active{display:flex;align-items:center;justify-content:center}#btn-capture:active{border-color:#f5c84266}#thresholds{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px}.ctrl-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.ctrl-label{font-size:.62rem;color:var(--muted);font-weight:700;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.slider-row{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ctrl-value{font-family:var(--mono);font-size:.72rem;font-weight:800;color:var(--gold);min-width:34px;text-align:right;flex-shrink:0}input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:2px;background:var(--border2);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);border:2px solid var(--surface);box-shadow:0 0 0 1.5px var(--gold-dark);cursor:pointer}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);border:2px solid var(--surface);box-shadow:0 0 0 1.5px var(--gold-dark);cursor:pointer}.toggle-switch{display:inline-flex;align-items:center;cursor:pointer;position:relative}.toggle-switch input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.toggle-track{display:inline-block;width:40px;height:22px;border-radius:11px;background:var(--surface3);border:1.5px solid var(--border2);position:relative;transition:background .2s,border-color .2s;flex-shrink:0}.toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}.toggle-switch input:checked+.toggle-track{background:#f5c8421f;border-color:#f5c84266}.toggle-switch input:checked+.toggle-track:after{transform:translate(18px);background:var(--gold)}#btn-theme{width:46px;flex-shrink:0;padding:0;border-radius:10px;border:1.5px solid var(--border2);background:var(--surface);color:var(--text);font-size:1.05rem;cursor:pointer;transition:border-color .15s;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center}#btn-theme:active{border-color:#f5c84266}[data-theme=light]{--canvas: #f0f2fa;--surface: #ffffff;--surface2: #f5f7ff;--surface3: #ebeeff;--border: #d4d9ee;--border2: #bec6e2;--text: #1a2774;--text-2: #4a5a9a;--muted: #7282b4}[data-theme=light] #model-badge{background:#1a2774;border-color:#1a277440}[data-theme=light] #fps-badge{color:#1a2774}[data-theme=light] #btn-camera:not(.running){background:linear-gradient(135deg,#1a2774,#2535a8);border-color:transparent;color:#fff}[data-theme=light] .ctrl-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237282b4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-color:var(--surface)}.file-pick-hidden{position:fixed;top:-200px;left:-200px;width:1px;height:1px;opacity:0;overflow:hidden}footer{text-align:center;padding:20px 0 18px;font-size:.58rem;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;border-top:1.5px solid var(--border);margin-top:auto}