:root{--bg: #0a0a0f;--surface: #14141a;--surface-elevated: #1a1a22;--border: #2a2a35;--border-hover: #3a3a48;--primary: #00ff88;--secondary: #00ccff;--accent: #ff3366;--text: #f0f0f5;--text-secondary: #8888aa;--text-muted: #555566;--success: #00ff88;--warning: #ffaa00;--error: #ff3366;--preprocess: #00ccff;--inference: #00ff88;--postprocess: #ff3366;--font-display: "JetBrains Mono", monospace;--font-body: "IBM Plex Sans", sans-serif;--radius: 4px;--radius-lg: 8px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}.app{min-height:100vh;display:flex;flex-direction:column}.header{position:relative;background:var(--surface);border-bottom:1px solid var(--border);padding:16px 24px;overflow:hidden}.header-scanline{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,136,.015) 2px,rgba(0,255,136,.015) 4px);pointer-events:none}.header-content{position:relative;display:flex;align-items:center;gap:16px;max-width:1400px;margin:0 auto}.logo{flex-shrink:0}.logo svg{display:block}.header-text{flex:1}.header-text h1{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.5px}.subtitle{font-size:12px;color:var(--text-secondary);font-family:var(--font-display);letter-spacing:.5px}.model-status{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-display);font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:background .3s}.model-status.ready .status-dot{background:var(--success);box-shadow:0 0 8px var(--success)}.model-status.loading .status-dot{background:var(--warning);animation:pulse 1s infinite}.model-status.error .status-dot{background:var(--error)}.github-link{display:flex;align-items:center;color:var(--text-secondary);transition:color .2s ease;flex-shrink:0}.github-link:hover{color:#fff}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.main{flex:1;padding:24px;max-width:1600px;margin:0 auto;width:100%}.top-row{display:grid;grid-template-columns:280px 1fr 300px;gap:20px;align-items:start}.control-panel{display:flex;flex-direction:column;gap:16px}.upload-section{min-height:400px}.upload-zone{position:relative;height:100%;min-height:520px;background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius-lg);transition:all .3s ease;overflow:hidden}.upload-zone:hover{border-color:var(--secondary);box-shadow:0 0 30px #00ccff1a}.upload-zone.dragover{border-color:var(--primary);border-style:solid;background:#00ff880d}.upload-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}.upload-placeholder svg{opacity:.6}.upload-text{font-size:16px;color:var(--text);font-weight:500}.upload-subtext{font-size:13px;color:var(--text-secondary)}.upload-formats{font-size:11px;color:var(--text-muted);font-family:var(--font-display);margin-top:8px}.image-preview{position:absolute;top:0;right:0;bottom:0;left:0}.image-preview canvas{width:100%;height:100%;object-fit:contain}.clear-image-btn{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;background:#000000b3;color:var(--text);border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.clear-image-btn:hover{background:var(--accent)}.metrics-panel{display:flex;flex-direction:column}.metrics-panel .panel-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px}.panel-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}.panel-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}.preset-label{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:8px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.5px}.server-models{margin-bottom:12px}.model-select{width:100%;padding:10px 12px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-display);font-size:13px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.model-select:hover{border-color:var(--border-hover)}.model-select:focus{outline:none;border-color:var(--primary)}.model-select:disabled{opacity:.5;cursor:not-allowed}.model-select option{background:var(--surface);color:var(--text);padding:8px}.model-select optgroup{font-weight:600;color:var(--text-secondary)}.local-model-btn.loading{pointer-events:none;opacity:.8}.local-model-btn .btn-text{display:flex;align-items:center;gap:8px;justify-content:center}.local-model-btn .spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--secondary);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.model-item-name{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--text)}.model-item-size{font-family:var(--font-display);font-size:10px;color:var(--text-muted)}.model-refresh{width:100%;margin-top:8px;padding:8px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-family:var(--font-display);font-size:10px;cursor:pointer;transition:all .2s}.model-refresh:hover{border-color:var(--secondary);color:var(--secondary)}.divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--text-muted);font-size:10px;font-family:var(--font-display);text-transform:uppercase}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.local-model-btn{width:100%;padding:12px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-display);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.local-model-btn:hover{border-color:var(--primary);color:var(--primary)}.model-info{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.info-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12px}.info-label{color:var(--text-secondary);font-family:var(--font-display)}.info-value{color:var(--primary);font-family:var(--font-display);font-weight:500}.backend-select{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-display);font-size:11px;padding:4px 8px;cursor:pointer}.backend-select:hover{border-color:var(--secondary)}.backend-select:focus{outline:none;border-color:var(--primary)}.backend-selector{margin-bottom:16px}.backend-selector .preset-label{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:8px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.5px}.backend-selector .backend-select{width:100%;padding:10px 12px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-display);font-size:12px;cursor:pointer;margin-bottom:8px}.backend-current{font-family:var(--font-display);font-size:12px;font-weight:600}.metrics-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.metrics-header .panel-title{margin-bottom:0}.backend-badge{font-family:var(--font-display);font-size:10px;font-weight:600;padding:4px 10px;border-radius:var(--radius);border:1px solid;text-transform:uppercase;letter-spacing:.5px}.inference-controls{display:flex;flex-direction:column;gap:8px}.run-btn{width:100%;padding:10px 12px;background:linear-gradient(135deg,var(--primary),#00cc6a);border:none;border-radius:var(--radius);color:#000;font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.run-btn:hover:not(:disabled){box-shadow:0 0 30px #00ff8880;transform:translateY(-2px)}.run-btn:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:none}.run-btn.running{background:var(--warning);animation:glow-pulse 1.5s infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px #fa06}50%{box-shadow:0 0 40px #ffaa00b3}}.webcam-btn{width:100%;padding:10px 12px;background:linear-gradient(135deg,#0af,#08c);border:none;border-radius:var(--radius);color:#000;font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.webcam-btn:hover:not(:disabled){box-shadow:0 0 30px #00c8ff80;transform:translateY(-2px)}.webcam-btn:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:none}.webcam-btn.running{background:var(--warning);animation:glow-pulse 1.5s infinite}.run-hint{margin-top:10px;font-size:11px;color:var(--text-muted);text-align:center;font-family:var(--font-display)}.metrics-panel .panel-title{color:var(--primary)}.metrics-bar{display:flex;gap:2px;background:var(--border);border-radius:var(--radius);overflow:hidden}.metric-segment{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;background:var(--surface-elevated);transition:all .3s}.metric-segment.preprocess{border-top:3px solid var(--preprocess)}.metric-segment.inference{border-top:3px solid var(--inference)}.metric-segment.postprocess{border-top:3px solid var(--postprocess)}.metric-name{font-family:var(--font-display);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.metric-time{font-family:var(--font-display);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}.preprocess .metric-time{color:var(--preprocess)}.inference .metric-time{color:var(--inference)}.postprocess .metric-time{color:var(--postprocess)}.metric-bar{width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden}.metric-fill{height:100%;border-radius:2px;transition:width .5s ease-out}.preprocess .metric-fill{background:var(--preprocess)}.inference .metric-fill{background:var(--inference)}.postprocess .metric-fill{background:var(--postprocess)}.metric-percent{font-family:var(--font-display);font-size:10px;color:var(--text-muted)}.total-metric{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:10px 12px;background:linear-gradient(135deg,#00ff881a,#00ccff1a);border:1px solid var(--primary);border-radius:var(--radius)}.total-label{font-family:var(--font-display);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text)}.total-time{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.stat{text-align:center;padding:6px;background:var(--surface-elevated);border-radius:var(--radius)}.stat-label{display:block;font-size:9px;color:var(--text-muted);text-transform:uppercase;font-family:var(--font-display);margin-bottom:2px}.stat-value{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.export-btn{width:100%;padding:10px;margin-top:10px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-display);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.export-btn:hover:not(:disabled){border-color:var(--secondary);color:var(--secondary)}.export-btn:disabled{opacity:.4;cursor:not-allowed}.examples-divider{height:1px;background:var(--border);margin:10px 0}.examples-section{padding:0}.examples-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text);margin-bottom:8px}.examples-grid{display:flex;gap:10px;flex-wrap:wrap}.example-item{position:relative;width:100px;height:75px;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s}.example-item:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #0f83}.example-item img{width:100%;height:100%;object-fit:cover}.example-label{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:#000000b3;color:#fff;font-size:11px;font-family:var(--font-display)}.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:1000}.toast{padding:12px 20px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-display);font-size:13px;color:var(--text);animation:slideIn .3s ease;display:flex;align-items:center;gap:10px}.toast.error{border-color:var(--error);color:var(--error)}.toast.success{border-color:var(--success);color:var(--success)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.model-list::-webkit-scrollbar{width:6px}.model-list::-webkit-scrollbar-track{background:var(--surface-elevated)}.model-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.model-list::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}@media (max-width: 1200px){.top-row{grid-template-columns:260px 1fr 260px}}@media (max-width: 1024px){.top-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.upload-section{grid-column:1 / -1;grid-row:1;min-height:350px}.upload-zone{min-height:450px}.control-panel{grid-column:1;grid-row:2}.metrics-panel{grid-column:2;grid-row:2}}@media (max-width: 768px){.header{padding:12px 0}.header-scanline{display:none}.header-content{flex-wrap:wrap;gap:12px}.logo svg{width:32px;height:32px}.header-text h1{font-size:16px}.subtitle{display:none}.model-status{width:100%;justify-content:center;order:3}.github-link{order:4}.main{padding:12px}.top-row{grid-template-columns:1fr;gap:12px}.upload-section{grid-column:1;grid-row:1;min-height:350px}.upload-zone{min-height:350px}.control-panel{grid-column:1;grid-row:2;display:flex;flex-direction:column}.inference-section{order:1}.model-section{order:2}.metrics-panel{grid-column:1;grid-row:3}.stats-row{grid-template-columns:repeat(2,1fr)}.examples-grid{justify-content:center}.panel-section{padding:12px}.metric-card{padding:10px}}