:root{--mic-tester-primary:#6366f1;--mic-tester-primary-hover:#4f46e5;--mic-tester-primary-light:#818cf8;--mic-tester-primary-soft:#6366f11a;--mic-tester-success:#22c55e;--mic-tester-success-soft:#22c55e1a;--mic-tester-warning:#f97316;--mic-tester-warning-soft:#f973161a;--mic-tester-error:#ef4444;--mic-tester-error-soft:#ef44441a;--mic-tester-zone-low:#ef4444;--mic-tester-zone-good:#22c55e;--mic-tester-zone-high:#f97316;--mic-tester-bg:#fff;--mic-tester-bg-subtle:#f8fafc;--mic-tester-bg-card:#fff;--mic-tester-text:#0f172a;--mic-tester-text-secondary:#475569;--mic-tester-text-muted:#94a3b8;--mic-tester-border:#e2e8f0;--mic-tester-border-light:#f1f5f9;--mic-tester-waveform-bg:#0f172a;--mic-tester-waveform-line:#22c55e;--mic-tester-waveform-line-alt:#6366f1;--mic-tester-record-btn:#ef4444;--mic-tester-record-btn-active:#dc2626;--mic-tester-shadow-sm:0 1px 3px #00000014;--mic-tester-shadow-md:0 4px 12px #0000001a;--mic-tester-shadow-lg:0 10px 25px #00000026;--mic-tester-radius:.75rem;--mic-tester-radius-sm:.5rem;--mic-tester-radius-lg:1rem}._mic-tester-container{flex-direction:column;gap:1.25rem;max-width:700px;margin:0 auto;display:flex}._mic-tester-permission{text-align:center;background:var(--mic-tester-bg);border-radius:var(--mic-tester-radius-lg);border-style:solid;border-width:1px;border-color:var(--mic-tester-border);flex-direction:column;justify-content:center;align-items:center;min-height:400px;padding:2rem;display:flex}._mic-tester-permission-icon{background:var(--mic-tester-primary-soft);width:80px;height:80px;color:var(--mic-tester-primary);border-radius:50%;justify-content:center;align-items:center;margin-bottom:1.5rem;display:flex}._mic-tester-permission-title{color:var(--mic-tester-text);margin:0 0 .5rem;font-size:1.25rem;font-weight:600}._mic-tester-permission-desc{color:var(--mic-tester-text-secondary);max-width:320px;margin:0 0 1.5rem}._mic-tester-permission-error{background:var(--mic-tester-error-soft);color:var(--mic-tester-error);border-radius:var(--mic-tester-radius-sm);margin-top:1rem;padding:.75rem 1rem;font-size:.875rem;display:none}._mic-tester-permission-error.visible{display:block}._mic-tester-main{flex-direction:column;gap:1rem;display:flex}._mic-tester-header{background:var(--mic-tester-bg);border-radius:var(--mic-tester-radius);border-style:solid;border-width:1px;border-color:var(--mic-tester-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.875rem 1rem;display:flex}._mic-tester-controls{flex-wrap:wrap;flex:1;align-items:center;gap:1rem;display:flex}._mic-tester-visual-section{flex-direction:column;gap:1rem;display:flex}._mic-tester-waveform-container{background:var(--mic-tester-waveform-bg);border-radius:var(--mic-tester-radius-lg);width:100%;max-width:100%;height:180px;box-shadow:var(--mic-tester-shadow-lg);box-sizing:border-box;margin-left:auto;margin-right:auto;position:relative;overflow:hidden}._mic-tester-waveform{width:100%;height:100%;display:block}._mic-tester-volume-section{background:var(--mic-tester-bg);border-radius:var(--mic-tester-radius);border-style:solid;border-width:1px;border-color:var(--mic-tester-border);padding:1rem}._mic-tester-volume-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}._mic-tester-volume-label{color:var(--mic-tester-text-secondary);font-size:.8125rem;font-weight:500}._mic-tester-volume-value{font-variant-numeric:tabular-nums;color:var(--mic-tester-text);font-size:1.125rem;font-weight:700}._mic-tester-volume-meter{position:relative}._mic-tester-volume-track{background:linear-gradient(90deg,var(--mic-tester-error-soft)0%,var(--mic-tester-error-soft)30%,var(--mic-tester-success-soft)30%,var(--mic-tester-success-soft)80%,var(--mic-tester-warning-soft)80%,var(--mic-tester-warning-soft)100%);border-radius:10px;height:20px;position:relative;overflow:hidden}._mic-tester-volume-fill{background:linear-gradient(90deg,var(--mic-tester-zone-low)0%,var(--mic-tester-zone-low)30%,var(--mic-tester-zone-good)30%,var(--mic-tester-zone-good)80%,var(--mic-tester-zone-high)80%,var(--mic-tester-zone-high)100%);background-size:700px 100%;border-radius:10px;width:0;height:100%;transition:width 50ms ease-out;position:absolute;top:0;left:0}._mic-tester-volume-peak{background:var(--mic-tester-text);opacity:0;border-radius:2px;width:4px;height:100%;transition:left 50ms ease-out,opacity .3s;position:absolute;top:0;left:0}._mic-tester-volume-zones{justify-content:space-between;margin-top:.5rem;padding:0 .25rem;display:flex}._mic-tester-zone{text-transform:uppercase;letter-spacing:.025em;font-size:.6875rem;font-weight:500}._mic-tester-zone--low{color:var(--mic-tester-zone-low);width:30%}._mic-tester-zone--good{color:var(--mic-tester-zone-good);text-align:center;width:50%}._mic-tester-zone--high{color:var(--mic-tester-zone-high);text-align:right;width:20%}._mic-tester-record-section{background:var(--mic-tester-bg);border-radius:var(--mic-tester-radius);border-style:solid;border-width:1px;border-color:var(--mic-tester-border);justify-content:center;align-items:center;gap:2rem;padding:1.5rem;display:flex}._mic-tester-record-controls{align-items:center;gap:.75rem;display:flex}._mic-tester-record-info{flex-direction:column;gap:.25rem;display:flex}._mic-tester-record-timer{font-variant-numeric:tabular-nums;color:var(--mic-tester-text);font-size:1.5rem;font-weight:700}._mic-tester-record-hint{color:var(--mic-tester-text-muted);max-width:200px;font-size:.75rem}._mic-tester-info-panel{background:var(--mic-tester-bg);border-radius:var(--mic-tester-radius);border-style:solid;border-width:1px;border-color:var(--mic-tester-border);padding:1rem}._mic-tester-info-grid{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}._mic-tester-info-item{flex-direction:column;gap:.25rem;min-width:0;display:flex}._mic-tester-info-label{color:var(--mic-tester-text-muted);text-transform:uppercase;letter-spacing:.025em;font-size:.6875rem;font-weight:500}._mic-tester-info-value{color:var(--mic-tester-text);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.8125rem;font-weight:500;overflow:hidden}@media (max-width:768px){._mic-tester-container{padding-left:1rem;padding-right:1rem}._mic-tester-header{flex-direction:column;align-items:stretch;gap:.75rem}._mic-tester-controls{flex-direction:column;align-items:stretch}._mic-tester-info-grid{grid-template-columns:repeat(2,1fr)}._mic-tester-waveform-container{height:140px}._mic-tester-record-section{flex-direction:column;gap:1rem}._mic-tester-record-info{text-align:center;align-items:center}}@media (max-width:480px){._mic-tester-permission{min-height:300px;padding:1.5rem}._mic-tester-visual-section{padding:0}._mic-tester-waveform-container{border-radius:var(--mic-tester-radius);height:120px}._mic-tester-volume-track{height:16px}}._mic-tester-btn{border-radius:var(--mic-tester-radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:opacity .2s,background .2s,box-shadow .2s;display:inline-flex}._mic-tester-btn--primary{background:var(--mic-tester-primary);color:#fff;box-shadow:0 2px 8px #6366f140}._mic-tester-btn--primary:hover{opacity:.9}._mic-tester-btn--stop{background:var(--mic-tester-error-soft);color:var(--mic-tester-error);padding:.5rem .875rem}._mic-tester-btn--stop:hover{background:var(--mic-tester-error);color:#fff}._mic-tester-status{background:var(--mic-tester-success-soft);border-radius:var(--mic-tester-radius-sm);align-items:center;gap:.5rem;padding:.5rem .875rem;display:inline-flex}._mic-tester-status-dot{background:var(--mic-tester-success);width:8px;height:8px;box-shadow:0 0 6px var(--mic-tester-success);border-radius:50%;animation:2s ease-in-out infinite mic-pulse}._mic-tester-status-text{color:var(--mic-tester-success);font-size:.8125rem;font-weight:500}._mic-tester-status.recording{background:var(--mic-tester-error-soft)}._mic-tester-status.recording ._mic-tester-status-dot{background:var(--mic-tester-error);box-shadow:0 0 6px var(--mic-tester-error);animation:.8s ease-in-out infinite mic-pulse-fast}._mic-tester-status.recording ._mic-tester-status-text{color:var(--mic-tester-error)}._mic-tester-status.playing{background:var(--mic-tester-primary-soft)}._mic-tester-status.playing ._mic-tester-status-dot{background:var(--mic-tester-primary);box-shadow:0 0 6px var(--mic-tester-primary)}._mic-tester-status.playing ._mic-tester-status-text{color:var(--mic-tester-primary)}@keyframes mic-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes mic-pulse-fast{0%,to{opacity:1}50%{opacity:.3}}._mic-tester-select-group{flex-direction:column;flex:1;gap:.25rem;min-width:180px;display:flex}._mic-tester-label{color:var(--mic-tester-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.6875rem;font-weight:500}._mic-tester-select{width:100%;color:var(--mic-tester-text);background-color:var(--mic-tester-bg-subtle);border-style:solid;border-width:1px;border-color:var(--mic-tester-border);border-radius:var(--mic-tester-radius-sm);cursor:pointer;-webkit-appearance:none;appearance:none;white-space:nowrap;text-overflow:ellipsis;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='%2394a3b8' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;padding:.5rem 2rem .5rem .75rem;font-size:.875rem;transition:border-color .2s,box-shadow .2s;overflow:hidden}._mic-tester-select:hover{border-color:var(--mic-tester-primary-light)}._mic-tester-select:focus{border-color:var(--mic-tester-primary);box-shadow:0 0 0 3px var(--mic-tester-primary-soft);outline:none}._mic-tester-noise-badge{-webkit-backdrop-filter:blur(8px);border-radius:var(--mic-tester-radius-sm);color:#fff;background:#0009;align-items:center;gap:.375rem;padding:.375rem .625rem;font-size:.75rem;font-weight:500;display:inline-flex;position:absolute;top:.75rem;right:.75rem}._mic-tester-noise-dot{background:var(--mic-tester-success);border-radius:50%;width:6px;height:6px}._mic-tester-noise-badge.normal ._mic-tester-noise-dot{background:var(--mic-tester-text-muted)}._mic-tester-noise-badge.noisy ._mic-tester-noise-dot{background:var(--mic-tester-warning)}._mic-tester-record-btn{border-style:solid;border-width:3px;border-color:var(--mic-tester-record-btn);cursor:pointer;background:0 0;border-radius:50%;width:56px;height:56px;padding:0;transition:opacity .2s,box-shadow .2s}._mic-tester-record-btn:hover{box-shadow:0 0 0 4px var(--mic-tester-error-soft)}._mic-tester-record-icon{background:var(--mic-tester-record-btn);border-radius:50%;width:42px;height:42px;margin:4px;transition:border-radius .15s,width .15s,height .15s,margin .15s;display:block}._mic-tester-record-btn.recording ._mic-tester-record-icon{background:var(--mic-tester-record-btn-active);border-radius:4px;width:24px;height:24px;margin:13px}._mic-tester-record-btn.recording{border-color:var(--mic-tester-record-btn-active);animation:1.5s ease-in-out infinite mic-record-pulse}@keyframes mic-record-pulse{0%,to{box-shadow:0 0 0 0 var(--mic-tester-error-soft)}50%{box-shadow:0 0 0 6px var(--mic-tester-error-soft)}}._mic-tester-play-btn{background:var(--mic-tester-bg-subtle);border-style:solid;border-width:3px;border-color:var(--mic-tester-border);width:56px;height:56px;color:var(--mic-tester-text-secondary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}._mic-tester-play-btn:hover:not(:disabled){border-color:var(--mic-tester-primary);color:var(--mic-tester-primary);background:var(--mic-tester-primary-soft)}._mic-tester-play-btn:disabled{opacity:.35;cursor:not-allowed}._mic-tester-play-btn.playing{border-color:var(--mic-tester-primary);color:var(--mic-tester-primary);background:var(--mic-tester-primary-soft)}@media (max-width:768px){._mic-tester-select-group{min-width:100%}._mic-tester-record-btn{width:52px;height:52px}._mic-tester-record-icon{width:38px;height:38px}._mic-tester-record-btn.recording ._mic-tester-record-icon{width:22px;height:22px;margin:12px}._mic-tester-play-btn{width:52px;height:52px}}