:root{--bg: #0d1117;--panel: #161b22;--panel-2: #1c2230;--border: #2a3140;--text: #e6edf3;--muted: #8b949e;--accent: #4f8cff;--accent-2: #2ea043;--critical: #ff3b30;--high: #ff9500;--normal: #4f8cff}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}.topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}.logo{font-size:22px}.status{font-size:12px;padding:4px 10px;border-radius:999px;margin-left:auto;white-space:nowrap}.status-off{background:#2a3140;color:var(--muted)}.status-loading{background:#3a2a00;color:#ffd33d}.status-ready{background:#0a2e1a;color:#2ea043}.status-on{background:#0a2e1a;color:#2ea043;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.icon-btn{background:transparent;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px}.icon-btn:hover{background:var(--panel-2)}.container{max-width:680px;width:100%;margin:0 auto;padding:16px;flex:1}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:14px}.start-panel h1{margin:0 0 8px;font-size:24px;line-height:1.2}.lede{color:var(--muted);margin:0 0 16px;line-height:1.5;font-size:14px}.start-btn{background:var(--accent);color:#fff;border:none;padding:14px 22px;font-size:16px;font-weight:600;border-radius:10px;cursor:pointer;width:100%}.start-btn:disabled{opacity:.5;cursor:not-allowed}.start-btn:not(:disabled):hover{background:#3b7bff}.perm-error{color:var(--critical);margin-top:10px;font-size:14px}.start-hint{margin-top:10px;font-size:13px}.start-hint a{color:var(--accent);cursor:pointer}.live-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}.live-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px var(--accent-2);animation:pulse 1.2s infinite}.live-header>span{font-weight:600;font-size:14px}.ghost-btn{background:transparent;color:var(--text);border:1px solid var(--border);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px;margin-left:auto}.ghost-btn:hover{border-color:var(--accent)}.ghost-btn.danger{border-color:#5a2a2a;color:#ff6b6b;margin-left:0}.ghost-btn.danger:hover{background:#2a1414}.now-detected{display:flex;align-items:baseline;gap:10px;padding:14px;background:var(--panel-2);border-radius:10px;margin-bottom:10px}.now-label{color:var(--muted);font-size:13px}.now-sound{font-size:20px;font-weight:700}.now-conf{color:var(--muted);font-size:14px;margin-left:auto}.confidence-bar-wrap{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin-bottom:14px}.confidence-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .2s}.spec-section{margin-bottom:14px}.spec-label{font-size:12px;color:var(--muted);margin-bottom:6px}.spec-canvas{width:100%;height:120px;display:block;background:#000;border-radius:8px;border:1px solid var(--border)}.top-section{margin-bottom:14px}.top-section summary{cursor:pointer;font-size:13px;color:var(--muted);padding:6px 0}.top-list{display:flex;flex-direction:column;gap:4px;padding-top:8px}.top-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 8px;background:var(--panel-2);border-radius:6px}.top-name{color:var(--text)}.top-p{color:var(--muted)}.train-section{margin-top:16px;border-top:1px solid var(--border);padding-top:16px}.train-section h2{font-size:16px;margin:0 0 6px}.muted{color:var(--muted);font-size:13px;line-height:1.5}.train-controls{display:flex;gap:8px;margin:12px 0 8px}#train-name{flex:1;background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:8px;font-size:14px}#train-name:focus{outline:none;border-color:var(--accent)}.train-btn{background:var(--accent-2);color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px}.train-btn:disabled{opacity:.5;cursor:not-allowed}.train-status{font-size:13px;color:var(--muted);min-height:18px}.custom-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}.custom-item{display:flex;align-items:center;justify-content:space-between;background:var(--panel-2);padding:8px 12px;border-radius:8px;font-size:14px}.custom-del{background:transparent;border:1px solid var(--border);color:var(--muted);padding:3px 10px;border-radius:6px;cursor:pointer;font-size:12px}.custom-del:hover{color:#ff6b6b;border-color:#5a2a2a}.history-panel h2{font-size:16px;margin:0 0 10px}.history{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}.hist-item{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;background:var(--panel-2);font-size:14px;border-left:3px solid var(--border)}.hist-item.hist-critical{border-left-color:var(--critical);background:#2a1414}.hist-item.hist-high{border-left-color:var(--high)}.hist-item.hist-normal{border-left-color:var(--normal)}.hist-icon{font-size:18px}.hist-label small{color:var(--muted)}.hist-conf{color:var(--muted);font-size:12px}.hist-time{color:var(--muted);font-size:11px}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-120%);background:var(--panel);border:1px solid var(--border);padding:12px 18px;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px #00000080;transition:transform .3s ease;z-index:50;max-width:90vw}.toast-show{transform:translate(-50%) translateY(0)}.toast-high{border-color:var(--high);background:#2a1d00}.toast-normal{border-color:var(--normal)}.toast-icon{font-size:22px}.toast-label{font-weight:600}.toast-conf{color:var(--muted);font-size:13px}.critical-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:var(--critical);color:#fff;display:flex;align-items:center;justify-content:center;animation:critflash .6s infinite alternate}.critical-overlay[hidden]{display:none}@keyframes critflash{0%{background:#c00}to{background:#ff3b30}}.critical-inner{text-align:center;padding:30px}.critical-icon{font-size:100px;line-height:1;margin-bottom:10px}.critical-title{font-size:48px;font-weight:800;letter-spacing:1px}.critical-conf{font-size:18px;opacity:.9;margin-top:6px}.critical-hint{margin-top:24px;font-size:16px;opacity:.85}.critical-ack{margin-top:20px;background:#fff;color:var(--critical);border:none;padding:14px 32px;font-size:18px;font-weight:700;border-radius:10px;cursor:pointer}.settings-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--panel);border-left:1px solid var(--border);z-index:60;display:flex;flex-direction:column;box-shadow:-8px 0 24px #0006;animation:slideIn .25s ease}.settings-panel[hidden]{display:none}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}.settings-header h2{margin:0;font-size:16px}.settings-body{flex:1;overflow-y:auto;padding:12px 16px}.setting-row{padding:10px 0;border-bottom:1px solid var(--border)}.setting-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}.setting-toggle input{width:18px;height:18px;cursor:pointer}.setting-icon{font-size:18px}.setting-label{flex:1}.setting-pri{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600}.setting-pri.critical{background:#2a1414;color:var(--critical)}.setting-pri.high{background:#2a1d00;color:var(--high)}.setting-pri.normal{background:#0a1a2e;color:var(--normal)}.setting-thresh{display:flex;align-items:center;gap:10px;margin-top:8px;padding-left:26px}.setting-thresh input[type=range]{flex:1;cursor:pointer}.setting-thresh input:disabled{opacity:.4}.thresh-val{font-size:12px;color:var(--muted);width:36px;text-align:right}.settings-footer{padding:12px 16px;border-top:1px solid var(--border);font-size:12px}.footer{text-align:center;padding:14px;color:var(--muted);font-size:12px;border-top:1px solid var(--border)}.footer a{color:var(--accent)}.tutorial{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease}.tutorial[hidden]{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tutorial-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:440px;width:100%;padding:24px;position:relative;box-shadow:0 16px 48px #0009;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.tutorial-skip{position:absolute;top:12px;right:12px;background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px}.tutorial-skip:hover{color:var(--text);background:var(--panel-2)}.tutorial-progress{height:4px;background:var(--panel-2);border-radius:2px;margin-bottom:20px;overflow:hidden}.tutorial-bar{height:100%;width:20%;background:var(--accent);transition:width .3s ease}.tutorial-step{text-align:center;min-height:220px}.tutorial-step[hidden]{display:none}.tutorial-emoji{font-size:56px;margin-bottom:12px}.tutorial-step h2{margin:0 0 12px;font-size:22px}.tutorial-step p{margin:0 0 10px;line-height:1.5;font-size:14px}.tutorial-step .muted{color:var(--muted);font-size:13px}.tutorial-list{list-style:none;padding:0;margin:8px 0;text-align:left;font-size:13px;line-height:1.6}.tutorial-list li{padding:4px 0}.pri{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;margin-right:6px;min-width:64px;text-align:center}.pri.critical{background:#2a1414;color:var(--critical)}.pri.high{background:#2a1d00;color:var(--high)}.pri.normal{background:#0a1a2e;color:var(--normal)}.tutorial-tip{display:flex;align-items:flex-start;gap:8px;background:var(--panel-2);padding:10px 12px;border-radius:8px;margin:10px 0;font-size:13px;text-align:left}.tip-icon{font-size:16px;flex-shrink:0}.tutorial-nav{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.tutorial-dots{display:flex;gap:6px}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:background .2s}.tutorial-dot.active{background:var(--accent)}.tutorial-next{background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px}.tutorial-next:hover{background:#3b7bff}.tutorial-next:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 480px){.container{padding:12px}.panel{padding:14px}.start-panel h1{font-size:21px}.now-sound{font-size:18px}.critical-title{font-size:36px}.critical-icon{font-size:80px}.top-name{font-size:11px}.hist-item{grid-template-columns:24px 1fr auto;gap:8px;font-size:13px}.hist-time,.brand .name{display:none}}