body > .tool-page.tool-page--audio-recorder { width: 100%; max-width: none; margin: 0; padding: 0; }
.tool-page--audio-recorder [hidden] { display: none !important; }
.rec-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); height: 100%; min-height: 0; text-align: left; }
.rec-viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rec-waveform { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.rec-waveform canvas { display: block; width: 100%; height: 100%; }
.rec-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; color: #bdbbc8; text-align: center; }
.rec-empty p { margin: 0; }
.rec-live { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 7px; color: #ff728d; letter-spacing: .08em; font-size: .7rem; }
.rec-live span { width: 8px; height: 8px; border-radius: 50%; background: #ff5877; box-shadow: 0 0 8px #ff587780; }
.rec-playhead { position: absolute; top: 0; bottom: 0; left: var(--rec-progress, 0%); width: 2px; background: #a9fff1; pointer-events: none; }
.rec-transport { flex: none; padding: 0 0 12px; }
.rec-transport-row { display: flex; align-items: center; gap: 10px; margin: 5px 12px 0; }
.tool-page--audio-recorder #rec-play { flex: 0 0 88px; width: 88px; }
#rec-play-time { white-space: nowrap; }
.rec-volume { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rec-volume input { width: 96px; --eyy-range-accent: #43dfcc; }
.rec-volume output { width: 4.5ch; text-align: right; color: #bdbbc8; }
#rec-seek { --eyy-seek-accent: #43dfcc; }
#rec-audio { display: none; }
.rec-controls { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; padding: 12px 8px; border-left: 2px solid var(--eyy-border, #101010); }
.rec-controls h1 { margin: 0; font-size: 1rem; letter-spacing: -.025em; }
.rec-description { margin: 7px 0 0; padding-bottom: 12px; border-bottom: 2px solid var(--eyy-border, #101010); color: #bdbbc8; }
.rec-controls-body { flex: 1 1 0; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #45454f transparent; }
.rec-label { display: block; margin: 14px 0 6px; }
.rec-facts { display: grid; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--eyy-border, #101010); }
.rec-facts > div { display: flex; justify-content: space-between; gap: 10px; }
.rec-facts output, .rec-hint { color: #bdbbc8; }
.rec-hint { margin: 16px 0; }
.rec-actions { flex: none; display: grid; gap: 7px; padding-top: 8px; border-top: 2px solid var(--eyy-border, #101010); }
.rec-record-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tool-page--audio-recorder .rec-workspace button:not(.default) { min-height: 36px; padding: 6px 8px; font: inherit; }
.tool-page--audio-recorder .rec-workspace button:disabled { opacity: .46; cursor: default; }
.tool-page--audio-recorder #rec-save { width: 100%; }
@media (max-width: 760px) {
    .rec-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 45%) minmax(0, 1fr); }
    .rec-controls { padding: 8px 18px 8px 6px; border: 0; border-top: 2px solid var(--eyy-border, #101010); }
}
@media (max-width: 400px) {
    .rec-transport-row { gap: 6px; margin-inline: 6px; }
    .rec-volume { gap: 4px; min-width: 0; }
    .rec-volume input { width: 48px; min-width: 32px; }
}