.sound-recorder-dialog { width:min(540px,calc(100vw - 32px)); padding:24px; color:#24475d; border:1px solid #c4dbee; border-radius:16px; background:#fff; box-shadow:0 20px 60px #163d7933; }
.sound-recorder-dialog::backdrop { background:#163d794d; }
.recorder-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.recorder-heading p { margin:0 0 6px; font-size:12px; font-weight:700; color:#59788e; letter-spacing:.06em; }
.recorder-heading h2 { margin:0; font-size:25px; }
.recorder-heading button { padding:8px; min-height:40px; width:40px; }
.sound-recorder-dialog>p,.recorder-review>p { line-height:1.5; }
.recorder-stage { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:20px 16px; border:1px solid #cfe2ef; border-radius:12px; background:#eef9ff; }
.recorder-light { width:12px; height:12px; border-radius:50%; background:#9ab9ca; flex:none; }
.is-recording .recorder-light { background:#e34d65; box-shadow:0 0 0 5px #e34d651a; }
.recorder-stage>output { font-size:24px; font-variant-numeric:tabular-nums; margin-right:auto; }
.recorder-stage button,.recorder-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }
.recorder-stage svg { width:20px; height:20px; }
.recorder-status { min-height:48px; font-size:15px; }
.recorder-review { border-top:1px solid #dbe7ef; padding-top:8px; }
.recorder-review h3 { font-size:18px; margin:8px 0 12px; }
.recorder-review audio { width:100%; }
.recorder-review label { display:grid; gap:6px; margin:14px 0; font-weight:600; }
.recorder-review input:not([type=range]),.recorder-review textarea { width:100%; box-sizing:border-box; border:1px solid #c4dbee; border-radius:8px; padding:10px; font:inherit; color:inherit; }
.recorder-trim { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.recorder-trim output { font-size:13px; font-weight:400; color:#59788e; }
.recorder-actions { display:flex; justify-content:space-between; gap:12px; margin-top:20px; }
.media-record { display:inline-flex; align-items:center; gap:7px; }
.media-record svg { width:20px; height:20px; }
@media(max-width:420px) { .sound-recorder-dialog { padding:18px; } .recorder-stage { gap:10px; } .recorder-actions { flex-wrap:wrap; } }