.microphone-selector{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:.75rem;margin-bottom:2rem;padding:1rem}.microphone-selector.loading,.microphone-selector.no-devices{text-align:center;color:rgba(255,255,255,.8)}.selector-label{color:#fff;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:1rem;font-weight:600;display:flex}.selector-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.device-select{color:#333;cursor:pointer;background:rgba(255,255,255,.9);border:2px solid rgba(255,255,255,.3);border-radius:.5rem;flex:1;min-width:200px;padding:.5rem .75rem;font-size:.95rem;transition:all .3s}.device-select:hover{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.5)}.device-select:focus{border-color:#5f27cd;outline:none;box-shadow:0 0 0 3px rgba(95,39,205,.3)}.device-select:disabled{opacity:.6;cursor:not-allowed;background:rgba(255,255,255,.7)}.refresh-button{color:#fff;cursor:pointer;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.3);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;padding:.5rem;font-size:.9rem;transition:all .3s;display:flex}.refresh-button:hover{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5);transform:rotate(180deg)}.refresh-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.device-error{color:#ffcccb;background:rgba(255,71,87,.2);border:1px solid rgba(255,71,87,.5);border-radius:.5rem;margin-top:.75rem;padding:.5rem .75rem;font-size:.9rem}.device-info{color:rgba(255,255,255,.7);text-align:center;margin-top:.5rem;font-size:.85rem}.audio-recorder{color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:1rem;max-width:600px;margin:0 auto;padding:2rem;box-shadow:0 10px 30px rgba(0,0,0,.2)}.recorder-status{justify-content:center;align-items:center;min-height:3rem;margin-bottom:2rem;display:flex}.recording-indicator,.paused-indicator{align-items:center;gap:.5rem;font-size:1.2rem;font-weight:600;display:flex}.pulse-dot{background-color:#ff4757;border-radius:50%;width:12px;height:12px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.paused-indicator{color:#feca57}.recorder-controls{flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:1.5rem;display:flex}.record-button,.pause-button,.stop-button,.resume-button{cursor:pointer;border:none;border-radius:2rem;min-width:120px;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s}.record-button{color:#fff;background-color:#ff4757}.record-button:hover{background-color:#ff3742;transform:translateY(-2px)}.record-button:disabled{cursor:not-allowed;background-color:#ccc;transform:none}.pause-button{color:#333;background-color:#feca57}.pause-button:hover{background-color:#feb12c;transform:translateY(-2px)}.stop-button{color:#fff;background-color:#ff6b6b}.stop-button:hover{background-color:#ff5252;transform:translateY(-2px)}.resume-button{color:#fff;background-color:#5f27cd}.resume-button:hover{background-color:#341f97;transform:translateY(-2px)}.error-message{background-color:rgba(255,71,87,.2);border:2px solid #ff4757;border-radius:.5rem;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-top:1rem;padding:1rem;display:flex}.retry-button{color:#fff;cursor:pointer;background-color:#ff4757;border:none;border-radius:.5rem;padding:.5rem 1rem;font-size:.9rem}.retry-button:hover{background-color:#ff3742}.recordings-list{max-width:800px;margin:2rem auto;padding:2rem}.recordings-list.empty{text-align:center;color:#666;font-style:italic}.recordings-list h2{color:#333;margin-bottom:2rem;font-size:1.8rem;font-weight:700}.recordings-container{flex-direction:column;gap:1rem;display:flex}.recording-item{background:#fff;border:1px solid #e1e8ed;border-radius:1rem;padding:1.5rem;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 20px rgba(0,0,0,.1)}.recording-item:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.15)}.recording-info{margin-bottom:1rem}.recording-name{color:#333;margin:0 0 .5rem;font-size:1.2rem;font-weight:600}.recording-date{color:#666;margin:0;font-size:.9rem}.playback-controls{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.play-pause-button{color:#fff;cursor:pointer;background-color:#5f27cd;border:none;border-radius:50%;flex-shrink:0;width:3rem;height:3rem;font-size:1.2rem;transition:all .3s}.play-pause-button:hover{background-color:#341f97;transform:scale(1.05)}.progress-container{flex-direction:column;flex:1;gap:.5rem;min-width:200px;display:flex}.progress-bar{cursor:pointer;-webkit-appearance:none;background:#e1e8ed;border-radius:3px;outline:none;width:100%;height:6px}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:#5f27cd;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 4px rgba(0,0,0,.2)}.progress-bar::-moz-range-thumb{cursor:pointer;background:#5f27cd;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 4px rgba(0,0,0,.2)}.time-display{color:#666;justify-content:space-between;font-family:Courier New,monospace;font-size:.85rem;display:flex}.delete-button{color:#fff;cursor:pointer;background-color:#ff4757;border:none;border-radius:.5rem;flex-shrink:0;width:2.5rem;height:2.5rem;font-size:1rem;transition:all .3s}.delete-button:hover{background-color:#ff3742;transform:scale(1.05)}@media (max-width:768px){.audio-recorder,.recordings-list{margin:1rem;padding:1.5rem}.microphone-selector{margin-bottom:1.5rem;padding:.75rem}.selector-controls{flex-direction:column;align-items:stretch}.device-select{min-width:auto;margin-bottom:.5rem}.refresh-button{width:auto;height:auto;padding:.5rem 1rem}.recorder-controls{flex-direction:column;align-items:center}.playback-controls{flex-direction:column;align-items:stretch;gap:1rem}.progress-container{min-width:auto}.recording-item{padding:1rem}}@media (max-width:480px){.audio-recorder,.recordings-list{padding:1rem}.recording-name{font-size:1.1rem}.recorder-controls button{min-width:100px;font-size:.9rem}}