.recorder-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: rgba(0,0,0,0.75);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recorder-modal.open { display: flex; }

.recorder-content {
  background-color: #373737;
  color: #ffc266;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  width: 300px;
  max-width: 90%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  position: relative;
}

.recorder-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.4rem;
  cursor: pointer;
}
.recorder-close:hover { color: #ffda85; }

.timer-circle {
  width: 150px; height: 150px; border-radius: 50%;
  border: 6px solid #555; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 12px;
  background: #2d2d2d; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.timer-circle.recording { border-color: #e74c3c; animation: pulse 1s infinite; }
.timer-circle.playing { border-color: #2ecc71; }

#timerText { font-size: 36px; font-family: monospace; font-weight: bold; }

.icon-btn { width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;}
.icon-btn.record { background:#e74c3c; } 
.icon-btn.play { background:#2ecc71; } 
.icon-btn.stop { background:#34495e; } 
.icon-btn.download { background:#ffc266;color:#2d2d2d;}
.icon-btn:disabled { opacity:0.5; cursor:not-allowed; }

.button-row { display:flex; justify-content:center; gap:10px; margin-bottom:8px; }

#conversionStatus { font-size:12px;color:#ffc266; min-height:18px; }

@keyframes pulse {0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}