:root{--bg: #f7f7f4;--surface: #ffffff;--border: #e3e3dc;--text: #1a1c1a;--muted: #5b615a;--accent: #0b7a4b;--accent-hover: #096640;--ok: #0b7a4b;--ok-bg: #e7f2ec;--warn: #8a5a00;--warn-bg: #fbf1dd;--danger: #b3261e;--danger-bg: #fbeae9;--radius: 12px;--radius-control: 8px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}.center{min-height:100dvh;display:grid;place-items:center;padding:24px}.muted{color:var(--muted)}.error{color:var(--danger);font-size:14px;margin:8px 0 0}.spacer{flex:1}.app{min-height:100dvh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border)}.brand{font-weight:700}.main{max-width:860px;width:100%;margin:0 auto;padding:24px 16px;display:flex;flex-direction:column;gap:20px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.center .card{width:min(400px,100%)}.title{margin:4px 0 8px;font-size:22px}.field{display:flex;flex-direction:column;gap:4px;margin:12px 0;font-size:14px}.control{padding:10px 12px;border:1px solid var(--border);border-radius:8px;font:inherit;background:var(--surface)}.control:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn{padding:10px 16px;border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:500;cursor:pointer}.btn:hover:not(:disabled){background:var(--bg)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}.recorder__status{display:flex;align-items:center;gap:10px;margin:16px 0}.timer{font-variant-numeric:tabular-nums;font-size:20px;font-weight:600}.dot{width:12px;height:12px;border-radius:50%;background:var(--border)}.dot--live{background:var(--danger);animation:pulse 1.2s infinite}.dot--paused{background:var(--warn)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.recorder__controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.upload{cursor:pointer}.preview{display:block;width:100%;margin-top:16px}.result{margin-top:16px;display:flex;flex-direction:column;gap:6px}.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;width:fit-content}.badge--ok{background:var(--ok-bg);color:var(--ok)}.badge--neutral{background:#eef1f4;color:var(--muted)}.badge--warning{background:var(--warn-bg);color:var(--warn)}.badge--danger{background:var(--danger-bg);color:var(--danger)}.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border)}.table th{color:var(--muted);font-weight:600;font-size:13px}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.pct{font-variant-numeric:tabular-nums;font-weight:600}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.tabs{display:flex;gap:4px;margin-left:16px}.tab{border:none;background:transparent;font:inherit;font-weight:500;color:var(--muted);padding:6px 12px;border-radius:var(--radius-control);cursor:pointer}.tab:hover{background:var(--bg);color:var(--text)}.tab--active{background:var(--ok-bg);color:var(--accent)}.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}.btn-sm{padding:6px 10px;font-size:13px}@media (prefers-reduced-motion: reduce){.dot--live{animation:none}}