.mic-compare{max-width:900px;margin:0 auto;padding:2rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#1a1a2e}.mic-compare h1{text-align:center;margin-bottom:2rem;font-size:2rem;font-weight:600}.mic-compare .permission-prompt{text-align:center;padding:3rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;color:#fff;box-shadow:0 10px 40px #667eea4d}.mic-compare .permission-prompt h2{color:#fff;font-size:1.75rem;margin-bottom:1rem}.mic-compare .permission-prompt p{font-size:1.1rem;opacity:.95;margin-bottom:1.5rem}.mic-compare .permission-prompt.error{background:linear-gradient(135deg,#f093fb,#f5576c)}.mic-compare .permission-button{background:#fff;color:#667eea;border:none;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:50px;cursor:pointer;transition:transform .2s,box-shadow .2s}.mic-compare .permission-button:hover{transform:translateY(-2px);box-shadow:0 5px 20px #0003}.mic-compare .error-message{background:#fee2e2;color:#dc2626;padding:1rem;border-radius:8px;margin-bottom:1.5rem;text-align:center}.controls-bar{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.mic-compare .record-button,.mic-compare .stop-button,.mic-compare .play-button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border:none;border-radius:50px;cursor:pointer;transition:transform .2s,box-shadow .2s}.mic-compare .record-button{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.mic-compare .record-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #ef444466}.mic-compare .record-button:disabled{opacity:.5;cursor:not-allowed}.mic-compare .stop-button{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff}.mic-compare .stop-button.recording{background:linear-gradient(135deg,#ef4444,#dc2626);animation:pulse 1.5s infinite}.mic-compare .stop-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #6b728066}.mic-compare .play-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.mic-compare .play-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #10b98166}.add-mic-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border-radius:50px;cursor:pointer;transition:transform .2s,box-shadow .2s}.add-mic-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.add-mic-button:disabled{opacity:.5;cursor:not-allowed}.mic-compare .record-icon{display:inline-block;width:12px;height:12px;background:currentColor;border-radius:50%}.mic-compare .stop-icon{display:inline-block;width:12px;height:12px;background:currentColor;border-radius:2px}.mic-compare .play-icon{display:inline-block;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}.mic-list{display:flex;flex-direction:column;gap:1rem}.mic-row{background:#f8fafc;border-radius:12px;padding:1rem;border:1px solid #e2e8f0}.mic-row-header{display:flex;gap:.75rem;align-items:center;margin-bottom:.75rem}.mic-row-header .select-wrapper{flex:1}.mic-compare .select-wrapper select{width:100%;padding:.6rem 1rem;font-size:.95rem;border:2px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .2s}.mic-compare .select-wrapper select:hover{border-color:#cbd5e1}.mic-compare .select-wrapper select:focus{outline:none;border-color:#667eea}.remove-slot-button{background:#fee2e2;color:#dc2626;border:none;width:32px;height:32px;border-radius:50%;font-size:1.25rem;line-height:1;cursor:pointer;transition:background .2s;flex-shrink:0}.remove-slot-button:hover{background:#fecaca}.mic-row-content{display:flex;align-items:center;gap:1rem;background:#1a1a2e;border-radius:8px;padding:.75rem}.mic-compare .audio-canvas{flex:1;height:80px;border-radius:6px;background:#1a1a2e}.mic-row-content .playback-controls{flex-shrink:0}.mic-row-empty{padding:2rem;text-align:center;background:#e2e8f0;border-radius:8px;color:#64748b;font-size:.9rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}body{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh}