/* ---------- voice recorder ---------- */

.rec-panel{padding:34px 20px 26px;text-align:center;}

.rec-time{
  font-family:var(--f-mono);font-size:2.6rem;font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums;
  line-height:1;margin:0 0 6px;
}
.rec-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--rule-2);margin-right:9px;vertical-align:middle;
}
.rec-panel[data-state="recording"] .rec-dot{
  background:#ff5f56;animation:recpulse 1.4s ease-in-out infinite;
}
.rec-panel[data-state="paused"] .rec-dot{background:var(--warn);}
@keyframes recpulse{0%,100%{opacity:1;}50%{opacity:.25;}}

.rec-hint{font-size:.88rem;color:var(--ink-3);margin:0 0 22px;}

/* level meter — bars scale from the middle, so silence is a flat line */
.meter{
  display:flex;align-items:center;justify-content:center;gap:3px;
  height:56px;margin:0 auto 24px;max-width:420px;
}
.meter span{
  flex:1;max-width:9px;height:100%;border-radius:99px;
  background:var(--accent);opacity:.75;
  transform:scaleY(.06);transform-origin:center;
  transition:transform .06s linear;
}
.rec-panel[data-state="idle"] .meter span,
.rec-panel[data-state="done"] .meter span{background:var(--rule-2);}

.rec-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.rec-main{
  width:76px;height:76px;border-radius:50%;
  border:none;background:#e5484d;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(229,72,77,.32);
  transition:transform .12s,box-shadow .12s;
}
.rec-main:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 22px rgba(229,72,77,.4);}
.rec-main:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.rec-main svg{width:26px;height:26px;}

.rec-panel[data-state="recording"] .rec-main,
.rec-panel[data-state="paused"] .rec-main{display:none;}
.rec-panel[data-state="idle"] .rec-live,
.rec-panel[data-state="done"] .rec-live{display:none;}

.rec-result{
  border-top:1px solid var(--rule);
  padding:20px;text-align:left;
}
.rec-result audio{width:100%;margin-bottom:16px;}
.rec-saves{display:flex;gap:10px;flex-wrap:wrap;}

@media (max-width:560px){
  .rec-time{font-size:2.1rem;}
  .meter{height:44px;}
}