:root{--bg: #0f1117;--surface: #1a1d2e;--surface-hover: #252840;--border: #2e3148;--text: #e2e8f0;--text-muted: #94a3b8;--primary: #6366f1;--primary-hover: #818cf8;--danger: #ef4444;--danger-hover: #f87171;--success: #22c55e;--warning: #f59e0b;--radius: 12px;--radius-sm: 8px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}#app{max-width:780px;margin:0 auto;padding:2rem 1.25rem 4rem}.header{text-align:center;margin-bottom:1.5rem}.logo{display:flex;align-items:center;justify-content:center;gap:.625rem}.logo h1{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.tagline{color:var(--text-muted);font-size:.875rem;margin-top:.35rem}.hw-info{text-align:center;margin-bottom:1.25rem}#hw-badge{display:inline-block;padding:.3rem .85rem;font-size:.75rem;font-weight:600;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text-muted)}#hw-badge.webgpu{border-color:var(--success);color:var(--success)}#hw-badge.webgl{border-color:var(--warning);color:var(--warning)}#hw-badge.wasm{border-color:var(--text-muted)}.tabs{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.25rem;margin-bottom:1.5rem;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex-shrink:0;padding:.5rem 1rem;font-size:.85rem;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .2s ease;white-space:nowrap}.tab:hover{background:var(--surface-hover);color:var(--text)}.tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;animation:fadeIn .25s ease}.panel[hidden]{display:none}.panel h2{font-size:1.2rem;font-weight:600;margin-bottom:.35rem}.panel .desc{color:var(--text-muted);font-size:.875rem;margin-bottom:1.25rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}textarea{width:100%;padding:.85rem 1rem;font-family:var(--font);font-size:.9rem;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);resize:vertical;outline:none;transition:border-color .2s}textarea:focus{border-color:var(--primary)}textarea::placeholder{color:var(--text-muted);opacity:.7}.btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;padding:.6rem 1.4rem;font-size:.9rem;font-weight:600;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background .2s,opacity .2s}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--primary);color:#fff}.btn.primary:hover:not(:disabled){background:var(--primary-hover)}.btn.secondary{background:var(--surface-hover);color:var(--text);border:1px solid var(--border);text-decoration:none}.btn.secondary:hover:not(:disabled){background:var(--border)}.btn.danger{background:var(--danger);color:#fff}.btn.danger:hover:not(:disabled){background:var(--danger-hover)}.link-btn{background:none;border:none;color:var(--primary);cursor:pointer;text-decoration:underline;font-size:inherit}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:2rem;text-align:center;color:var(--text-muted);font-size:.9rem;transition:border-color .2s,background .2s;cursor:pointer}.dropzone.dragover{border-color:var(--primary);background:#6366f10f}.preview-img{max-width:100%;max-height:300px;margin-top:1rem;border-radius:var(--radius-sm);object-fit:contain}.status{margin-top:.75rem;padding:.55rem .85rem;font-size:.8rem;border-radius:var(--radius-sm);background:#6366f114;color:var(--primary-hover)}.status[hidden]{display:none}.output{margin-top:1rem;padding:1rem;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--border);font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}.output[hidden]{display:none}.output canvas{max-width:100%;border-radius:var(--radius-sm)}.sentiment-bar-group{display:flex;flex-direction:column;gap:.5rem}.sentiment-bar{display:flex;align-items:center;gap:.5rem}.sentiment-bar .label{width:80px;font-weight:600;font-size:.85rem;text-transform:capitalize}.sentiment-bar .bar{flex:1;height:22px;background:var(--surface);border-radius:4px;overflow:hidden}.sentiment-bar .fill{height:100%;border-radius:4px;transition:width .6s ease}.sentiment-bar .fill.positive{background:var(--success)}.sentiment-bar .fill.negative{background:var(--danger)}.sentiment-bar .fill.neutral{background:var(--warning)}.sentiment-bar .pct{width:48px;text-align:right;font-size:.8rem;color:var(--text-muted)}.class-results{display:flex;flex-direction:column;gap:.5rem}.class-result{display:flex;align-items:center;gap:.5rem}.class-result .label{width:140px;font-weight:600;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.class-result .bar{flex:1;height:20px;background:var(--surface);border-radius:4px;overflow:hidden}.class-result .fill{height:100%;background:var(--primary);border-radius:4px;transition:width .6s ease}.class-result .pct{width:48px;text-align:right;font-size:.8rem;color:var(--text-muted)}.cache-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.cache-item{display:flex;justify-content:space-between;align-items:center;padding:.65rem .85rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem}.cache-item .name{font-weight:600}.cache-item .size{color:var(--text-muted)}.muted{color:var(--text-muted);font-size:.85rem}.loading-overlay{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0f1117e0;backdrop-filter:blur(6px)}.loading-overlay[hidden]{display:none}.spinner{width:42px;height:42px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{font-size:.9rem;color:var(--text-muted)}.progress-bar-container{width:260px;height:6px;background:var(--surface);border-radius:999px;overflow:hidden;margin-top:.75rem}.progress-bar{height:100%;width:0%;background:var(--primary);border-radius:999px;transition:width .3s ease}.loading-percent{font-size:.8rem;margin-top:.4rem;color:var(--text-muted)}@media(max-width:600px){#app{padding:1.25rem .75rem 3rem}.panel{padding:1.25rem}.tab{padding:.45rem .75rem;font-size:.78rem}}