:root{--bg:#fff;--panel:#fff;--panel-muted:#f1f5f9;--panel-border:#e2e8f0;--text:#0f172a;--muted:#64748b;--accent:#2563eb;--accent-soft:#2563eb14;--danger:#dc2626;--danger-soft:#fef2f2;--danger-border:#fecaca;--radius:12px;--shadow:0 1px 3px #0f172a14, 0 1px 2px -1px #0f172a14;--bg-gradient:linear-gradient(135deg, #eff6ff 0%, #fff 50%, #faf5ff 100%);--input-bg:#fff;--overlay-bg:#ffffffe6;--halo:#fff;--ring-dim:#ffffffd9;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0b1120;--panel:#141c2f;--panel-muted:#1e293b;--panel-border:#273449;--text:#e2e8f0;--muted:#94a3b8;--accent:#3b82f6;--accent-soft:#3b82f629;--danger:#f87171;--danger-soft:#f871711f;--danger-border:#f8717159;--shadow:0 1px 3px #0006;--bg-gradient:linear-gradient(135deg, #0f172a 0%, #0b1120 50%, #170f2e 100%);--input-bg:#0f172a;--overlay-bg:#0b1120e0;--halo:#0b1120;--ring-dim:#0b1120cc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0b1120;--panel:#141c2f;--panel-muted:#1e293b;--panel-border:#273449;--text:#e2e8f0;--muted:#94a3b8;--accent:#3b82f6;--accent-soft:#3b82f629;--danger:#f87171;--danger-soft:#f871711f;--danger-border:#f8717159;--shadow:0 1px 3px #0006;--bg-gradient:linear-gradient(135deg, #0f172a 0%, #0b1120 50%, #170f2e 100%);--input-bg:#0f172a;--overlay-bg:#0b1120e0;--halo:#0b1120;--ring-dim:#0b1120cc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}h1,h2,.brand-title{letter-spacing:-.02em}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg-gradient) fixed;height:100%;color:var(--text);overscroll-behavior:none;margin:0}#root{height:100%}button{cursor:pointer;font-family:inherit}.app{flex-direction:column;max-width:480px;height:100%;margin:0 auto;display:flex;position:relative;overflow:hidden}.screen{-webkit-overflow-scrolling:touch;flex:1;padding:16px;overflow-y:auto}.topbar{padding:calc(12px + env(safe-area-inset-top)) 18px 10px;background:var(--panel);border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;display:flex}.topbar h1{margin:0;font-size:22px;font-weight:700}.topbar .accent{color:var(--accent)}.nav{border-top:1px solid var(--panel-border);background:var(--panel);padding-bottom:env(safe-area-inset-bottom);display:flex}.nav button{color:var(--muted);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:12px 4px;font-size:12px;font-weight:500;transition:color .15s;display:flex}.nav button .ico{width:24px;height:24px;display:block}.nav button.active{color:var(--accent)}.monitor{flex-direction:column;align-items:center;gap:12px;height:100%;display:flex}.db-readout{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:88px;margin-top:2px;display:flex}.db-number{letter-spacing:-.03em;color:var(--accent);transform-origin:50%;will-change:transform;text-shadow:0 1px 0 #0f172a33, 0 0 22px var(--glow,#2563eb66);-webkit-text-stroke:1px #0f172a59;font-variant-numeric:tabular-nums;font-size:62px;font-weight:800;line-height:1}.db-unit{color:var(--muted);letter-spacing:.12em;margin-top:2px;font-size:15px;font-weight:600}.monster-stage{--lvl:0;aspect-ratio:1;flex:none;justify-content:center;align-items:center;width:min(74vw,300px,38vh);margin:auto 0;display:flex;position:relative}.ring,.ring:after{border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 0 63%,#000 64%);mask:radial-gradient(circle,#0000 0 63%,#000 64%)}.ring{filter:saturate(1.1);background:conic-gradient(from 225deg,#22c55e 0deg,#84cc16 90deg,#facc15 135deg,#f97316 200deg,#ef4444 270deg,#ffffff0f 270deg 360deg)}.ring:after{content:"";background:conic-gradient(from 225deg, transparent 0 calc(var(--lvl) * 270deg), var(--ring-dim) calc(var(--lvl) * 270deg) 270deg, transparent 270deg 360deg)}.alert-flash{opacity:0;pointer-events:none;background:radial-gradient(circle,#ef44448c,#0000 68%);border-radius:50%;position:absolute;inset:-12%}.alert-flash.flash{animation:.6s ease-out alert-flash}@keyframes alert-flash{0%{opacity:1;transform:scale(.85)}to{opacity:0;transform:scale(1.25)}}.threshold-tick{pointer-events:none;position:absolute;inset:0}.threshold-tick .tick{background:var(--text);width:4px;height:16px;box-shadow:0 0 4px var(--halo);border-radius:2px;margin-left:-2px;position:absolute;top:1.5%;left:50%}.tick-num{color:var(--text);font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 0 4px var(--halo), 0 0 4px var(--halo), 0 0 3px var(--halo);font-size:14px;font-weight:800;position:absolute;transform:translate(-50%,-50%)}.last-danger{border-radius:var(--radius);background:var(--panel);border:1px solid var(--panel-border);width:100%;max-width:340px;box-shadow:var(--shadow);color:var(--text);text-align:center;flex-direction:column;align-items:center;gap:3px;padding:12px 16px;font-size:15px;transition:border-color .2s,box-shadow .2s;display:flex}.last-danger strong{color:var(--danger);font-variant-numeric:tabular-nums}.last-danger .go{color:var(--muted);font-size:14px}.last-danger.ready{border-color:var(--danger-border);box-shadow:0 0 0 3px var(--danger-soft), var(--shadow)}.last-danger.ready .go{color:var(--danger)}.last-danger.ready:active{transform:scale(.99)}.last-danger.empty{color:var(--muted);font-size:15px}.last-danger:disabled{cursor:default}.monster-inner{justify-content:center;align-items:center;width:74%;height:74%;display:flex;position:absolute}.monster{overflow:visible}.monster-img{width:100%;height:100%;animation:3s ease-in-out infinite idle-bob;position:relative}.monster-img img{object-fit:contain;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.monster-img img.xfade-enter{animation:.3s both xfade-in}@keyframes xfade-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.monster-stage.intense .monster-img{animation:none}.monster .m-body{transform-box:fill-box;transform-origin:bottom;animation:3s ease-in-out infinite idle-bob}@keyframes idle-bob{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-3px)scale(1.015)}}.monster-stage.intense .m-body{animation:none}.monster-stage.intense .monster-inner{animation:90ms linear infinite shake}@keyframes shake{0%{transform:translate(0)rotate(0)}25%{transform:translate(-3px,1px)rotate(-1.5deg)}50%{transform:translate(2px,-2px)rotate(1deg)}75%{transform:translate(-1px,2px)rotate(1.5deg)}to{transform:translate(2px)rotate(-1deg)}}.rec-badge{background:var(--danger-soft);border:1px solid var(--danger-border);color:var(--danger);border-radius:999px;align-items:center;gap:8px;height:32px;padding:6px 14px;font-size:14px;font-weight:600;display:inline-flex}.rec-badge .dot{background:#ef4444;border-radius:50%;width:10px;height:10px;animation:.8s steps(2,start) infinite blink}.rec-badge.idle{background:var(--panel-muted);border-color:var(--panel-border);color:var(--muted)}.rec-badge.idle .dot{background:#94a3b8;animation:none}@keyframes blink{50%{opacity:.2}}.start-overlay{background:var(--overlay-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:20px;display:flex;position:absolute;inset:0}.start-overlay .hint{color:var(--text)}.btn{color:#fff;background:var(--accent);height:44px;box-shadow:var(--shadow);border:none;border-radius:8px;padding:0 24px;font-size:15px;font-weight:600;transition:opacity .15s,background .15s}.btn:hover{opacity:.92}.btn:disabled{opacity:.5;cursor:default}.btn:focus-visible{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);outline:none}.btn.stop{color:#fff;background:#ef4444}.btn.ghost{background:var(--panel);color:var(--text);border:1px solid var(--panel-border)}.btn.ghost:hover{opacity:1;background:var(--panel-muted)}.btn:active{transform:scale(.97)}.monitor-footer{flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:0;padding-bottom:4px;display:flex}.hint{color:var(--muted);text-align:center;max-width:280px;font-size:14px}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;padding:20px}.card h2{margin:0 0 6px;font-size:16px;font-weight:600;line-height:1.2}.card .sub{color:var(--muted);margin:0 0 16px;font-size:14px}.field{margin-bottom:18px}.field:last-child{margin-bottom:0}.field .label{justify-content:space-between;margin-bottom:8px;font-size:15px;font-weight:500;display:flex}.field .label .val{color:var(--accent);font-weight:600}input[type=range]{width:100%;accent-color:var(--accent);height:28px}.alert-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.switch{flex:none;width:48px;height:28px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.switch .track{background:var(--panel-border);border-radius:999px;transition:background .15s;position:absolute;inset:0}.switch .track:before{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0f172a33}.switch input:checked+.track{background:var(--accent)}.switch input:checked+.track:before{transform:translate(20px)}.seg{background:var(--panel-muted);border-radius:8px;gap:4px;padding:4px;display:flex}.seg button{color:var(--muted);background:0 0;border:none;border-radius:6px;flex:1;padding:8px;font-size:14px;font-weight:500}.seg button.active{background:var(--input-bg);color:var(--text);box-shadow:var(--shadow)}.text-input{background:var(--input-bg);border:1px solid var(--panel-border);width:100%;color:var(--text);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:15px;box-shadow:0 1px 2px #0f172a0d}.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}.sound-grid{flex-wrap:wrap;gap:8px;display:flex}.sound-chip{background:var(--input-bg);border:1px solid var(--panel-border);color:var(--text);cursor:pointer;border-radius:999px;align-items:center;padding:8px 14px;font-size:14px;font-weight:500;display:inline-flex}.sound-chip.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.sound-chip:has(.chip-main){padding:0;overflow:hidden}.sound-chip .chip-main{color:inherit;font:inherit;background:0 0;border:none;padding:8px 4px 8px 14px}.sound-chip .chip-x{color:var(--muted);background:0 0;border:none;padding:8px 12px 8px 6px;font-size:16px;line-height:1}.sound-chip.upload{color:var(--muted);border-style:dashed}.monster-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.monster-card{background:var(--panel);border:2px solid var(--panel-border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:6px;padding:10px;transition:border-color .15s,background .15s;display:flex}.monster-card.selected{border-color:var(--accent);background:var(--accent-soft)}.monster-card .thumb{width:88px;height:88px}.monster-card .name{font-size:14px;font-weight:500}.clip{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;padding:14px 16px}.clip.highlight{animation:2s ease-out clip-highlight}@keyframes clip-highlight{0%,30%{border-color:#ef4444;box-shadow:0 0 0 2px #ef444480,0 0 22px #ef444459}to{border-color:var(--panel-border);box-shadow:none}}.clip .clip-head{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.clip .clip-title{font-size:15px;font-weight:600}.clip .peak{background:var(--danger-soft);color:var(--danger);border-radius:999px;padding:2px 8px;font-size:13px;font-weight:700}.clip .clip-meta{color:var(--muted);margin-bottom:10px;font-size:13px}.clip audio{width:100%;height:36px}.clip .clip-actions{gap:10px;margin-top:10px;display:flex}.clip .clip-actions a,.clip .clip-actions button{text-align:center;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);border-radius:8px;flex:1;padding:8px;font-size:14px;font-weight:500;text-decoration:none}.clip .clip-actions .danger{color:var(--danger);border-color:var(--danger-border)}.empty{text-align:center;color:var(--muted);padding:48px 20px}.empty .big{margin-bottom:8px;font-size:48px}.calibrate{border-top:1px solid var(--panel-border);margin-top:18px;padding-top:16px}.calibrate .steps{color:var(--muted);margin:14px 0;padding-left:20px;font-size:14px}.calibrate .steps li{margin-bottom:4px}.card .sub.calibrate-msg{margin:12px 0 0}.link{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600}
