.recorder-page { padding-bottom: 3rem; }
.recorder-intro { margin-bottom: 1.25rem; }
.recorder-intro__chips { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
.recorder-intro__chips span { padding:.45rem .7rem; border-radius:999px; background:rgba(255,255,255,.72); border:1px solid rgba(16,32,96,.12); color:#102060; font-size:.88rem; font-weight:700; }

.sound-recorder { --recorder-accent:#21b7c8; --recorder-deep:#102060; margin:1.2rem 0 2rem; }
.recorder-unsupported { margin-bottom:1rem; padding:1rem 1.1rem; border:1px solid #e0a49e; border-radius:16px; background:#fff2f0; color:#72261f; }
.recorder-unsupported p { margin:.35rem 0 0; }
.recorder-main { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr); gap:1rem; align-items:stretch; }
.recorder-console, .recorder-settings, .recorder-result { border:1px solid rgba(16,32,96,.14); border-radius:22px; background:#fff; overflow:hidden; box-shadow:0 16px 40px rgba(16,32,96,.07); }
.recorder-console { display:flex; flex-direction:column; min-height:470px; }
.recorder-display { flex:1; padding:1.2rem; background:linear-gradient(180deg,#11245f 0%,#0b173e 100%); color:#fff; }
.recorder-display__topline { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.recorder-state { display:flex; align-items:center; gap:.6rem; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
.recorder-state__dot { width:12px; height:12px; border-radius:50%; background:#6b7aa8; box-shadow:0 0 0 4px rgba(255,255,255,.08); }
.sound-recorder.is-recording .recorder-state__dot { background:#ff5f56; box-shadow:0 0 0 5px rgba(255,95,86,.16); animation:recorder-pulse 1.25s ease-in-out infinite; }
.sound-recorder.is-paused .recorder-state__dot { background:#f9d070; animation:none; }
@keyframes recorder-pulse { 50% { transform:scale(.76); opacity:.72; } }
.recorder-time { font-variant-numeric:tabular-nums; font-size:clamp(1.9rem,4vw,3.25rem); line-height:1; font-weight:700; letter-spacing:.03em; }
.recorder-waveform { width:100%; height:210px; display:block; margin:1.1rem 0 .75rem; border-radius:14px; background:rgba(255,255,255,.035); }
.recorder-level-row { display:grid; grid-template-columns:auto minmax(0,1fr) 58px; align-items:center; gap:.7rem; font-size:.78rem; color:#d8e6ff; }
.recorder-level-track { height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12); }
.recorder-level-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#37e5ac 0%,#f9d070 68%,#ff6c62 100%); transition:width 70ms linear; }
.recorder-level-row output { text-align:right; font-variant-numeric:tabular-nums; }
.recorder-controls { display:flex; justify-content:center; gap:.65rem; padding:1rem; background:#f3f7fc; border-top:1px solid rgba(16,32,96,.1); }
.recorder-button { min-height:48px; padding:.75rem 1rem; border:1px solid rgba(16,32,96,.18); border-radius:13px; background:#fff; color:#102060; font:inherit; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; }
.recorder-button:hover:not(:disabled) { border-color:#30a5eb; background:#f7fcff; }
.recorder-button:disabled { opacity:.45; cursor:not-allowed; }
.recorder-button--record { min-width:126px; background:#102060; color:#fff; border-color:#102060; }
.recorder-button--record:hover:not(:disabled) { background:#18307f; }
.recorder-button__icon { width:15px; height:15px; border-radius:50%; background:#ff5f56; }
.sound-recorder.is-recording .recorder-button--record { opacity:.55; }
.recorder-message { min-height:2.9em; margin:0; padding:.8rem 1rem 1rem; text-align:center; color:#5b6480; background:#f3f7fc; font-size:.9rem; }

.recorder-settings { padding:1.15rem; }
.recorder-settings__heading, .recorder-result__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.recorder-settings__heading h2, .recorder-result__heading h2 { margin:.1rem 0 0; color:#102060; font-size:1.35rem; }
.recorder-refresh-mics, .recorder-discard { min-height:42px; padding:.55rem .75rem; border-radius:11px; border:1px solid rgba(16,32,96,.16); background:#f7f9fc; color:#102060; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
.recorder-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.recorder-field { min-width:0; display:grid; gap:.35rem; color:#26314e; font-size:.9rem; font-weight:700; }
.recorder-field--wide { grid-column:1/-1; }
.recorder-field select, .recorder-field input { width:100%; min-width:0; min-height:46px; padding:.7rem .75rem; border:1px solid #cbd4e3; border-radius:11px; background:#fff; color:#16213d; font:inherit; font-size:16px; }
.recorder-field small { color:#6b748d; font-size:.76rem; font-weight:400; line-height:1.4; }
.recorder-processing { margin:1rem 0 0; padding:.85rem; border:1px solid rgba(16,32,96,.12); border-radius:14px; }
.recorder-processing legend { padding:0 .35rem; color:#102060; font-size:.84rem; font-weight:700; }
.recorder-processing label { display:flex; gap:.65rem; align-items:flex-start; padding:.45rem .15rem; color:#25304c; cursor:pointer; }
.recorder-processing input { width:18px; height:18px; margin-top:.15rem; accent-color:#30a5eb; }
.recorder-processing span { display:grid; gap:.1rem; }
.recorder-processing strong { font-size:.87rem; }
.recorder-processing small { color:#6e7891; font-size:.75rem; }
.recorder-limit-note { margin-top:1rem; padding:.8rem .9rem; border-radius:13px; background:#edf9fb; color:#24485b; display:grid; gap:.15rem; font-size:.8rem; }
.recorder-limit-note strong { color:#102060; }

.recorder-result { margin-top:1rem; padding:1.2rem; }
.recorder-result audio { width:100%; margin:.2rem 0 1rem; }
.recorder-result__meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.recorder-result__meta span { padding:.75rem; border-radius:12px; background:#f5f8fc; text-align:center; min-width:0; }
.recorder-result__meta strong, .recorder-result__meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recorder-result__meta strong { color:#102060; font-size:.95rem; }
.recorder-result__meta small { margin-top:.2rem; color:#778099; font-size:.72rem; }
.recorder-result__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.recorder-download, .recorder-another { min-height:48px; padding:.75rem 1rem; border-radius:13px; font:inherit; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.recorder-download { background:#102060; color:#fff; border:1px solid #102060; }
.recorder-another { background:#fff; color:#102060; border:1px solid rgba(16,32,96,.2); cursor:pointer; }
.recorder-convert-note { margin:1rem 0 0; padding:.8rem .9rem; border-radius:12px; background:#f2fbf8; color:#43556b; font-size:.86rem; }
.recorder-convert-note a { font-weight:700; }

.recorder-info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:2rem 0; }
.recorder-info-grid article { padding:1.1rem; border:1px solid rgba(16,32,96,.1); border-radius:17px; background:#fff; }
.recorder-info-grid h2 { margin:.15rem 0 .45rem; color:#102060; font-size:1.05rem; }
.recorder-info-grid p:last-child { margin-bottom:0; color:#5d6780; line-height:1.6; }
.recorder-guide { max-width:920px; margin:0 auto 2rem; color:#37415a; line-height:1.7; }
.recorder-guide h2 { margin:1.6rem 0 .5rem; color:#102060; }
.recorder-guide ol { padding-left:1.3rem; }
.recorder-guide li { margin:.55rem 0; }

@media (max-width: 920px) {
  .recorder-main { grid-template-columns:1fr; }
  .recorder-console { min-height:420px; }
  .recorder-info-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .recorder-display { padding:.9rem; }
  .recorder-waveform { height:155px; }
  .recorder-controls { display:grid; grid-template-columns:1fr 1fr; }
  .recorder-button--record { grid-column:1/-1; }
  .recorder-field-grid { grid-template-columns:1fr; }
  .recorder-field--wide { grid-column:auto; }
  .recorder-result__meta { grid-template-columns:1fr 1fr; }
  .recorder-result__actions { display:grid; }
  .recorder-settings__heading { align-items:stretch; flex-direction:column; }
  .recorder-refresh-mics { align-self:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-recorder.is-recording .recorder-state__dot { animation:none; }
}