body > .tool-page.tool-page--audio-extractor { width: 100%; max-width: none; margin: 0; padding: 0; }
.tool-page--audio-extractor [hidden] { display: none !important; }
.extract-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); height: 100%; min-height: 0; text-align: left; font-variant-numeric: tabular-nums; }
.extract-viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.extract-stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.extract-stage canvas { display: block; width: 100%; height: 100%; }
.extract-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; }
.extract-empty p { margin: 0; }
.extract-overlay { position: absolute; top: 8px; left: 8px; }
.tool-page--audio-extractor #extract-choose { grid-template-columns: var(--eyy-action-icon-size); justify-content: center; column-gap: 0; width: 36px; min-width: 36px; height: 36px; padding: 0; }
.extract-transport { flex: none; padding-bottom: 12px; }
.extract-transport-row { display: flex; align-items: center; gap: 10px; margin: 5px 12px 0; }
.tool-page--audio-extractor #extract-play { flex: 0 0 88px; width: 88px; height: 36px; padding: 6px 8px; font-size: .8rem; line-height: 1.35; }
#extract-time { white-space: nowrap; }
.extract-volume { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.extract-volume input { width: 96px; --eyy-range-accent: #43dfcc; }
.extract-volume output { width: 4.5ch; text-align: right; color: #bdbbc8; }
#extract-seek { --eyy-seek-accent: #43dfcc; }
.extract-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); }
.extract-controls h1 { margin: 0; font-size: 1rem; }
.extract-description { margin: 7px 0 0; padding-bottom: 12px; border-bottom: 2px solid var(--eyy-border, #101010); color: #bdbbc8; }
.extract-controls-body { flex: 1 1 0; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.extract-field { display: grid; gap: 6px; min-width: 0; margin-top: 14px; }
.extract-facts { display: grid; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--eyy-border, #101010); }
.extract-facts > div { display: flex; justify-content: space-between; gap: 10px; }
.extract-facts output { color: #bdbbc8; text-align: right; overflow-wrap: anywhere; }
.extract-note { margin: 16px 0; color: #bdbbc8; line-height: 1.45; }
.extract-actions { flex: none; padding-top: 8px; border-top: 2px solid var(--eyy-border, #101010); }
.tool-page--audio-extractor .extract-workspace button:not(.default) { min-height: 36px; font: inherit; }
.tool-page--audio-extractor #extract-save { width: 100%; }
.tool-page--audio-extractor .extract-workspace button:disabled { opacity: .46; cursor: default; }
.extract-drop { position: fixed; inset: 52px 10px 10px; z-index: 990; display: flex; align-items: center; justify-content: center; border: 2px dashed #51e6cf; border-radius: 10px; background: #0b211fee; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, visibility 140ms; }
.extract-workspace.is-dragging .extract-drop { opacity: 1; visibility: visible; }
@media (max-width: 760px) { .extract-workspace { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0, 45%) minmax(0, 1fr); } .extract-controls { padding: 8px 18px 8px 6px; border: 0; border-top: 2px solid var(--eyy-border, #101010); } }
@media (max-width: 400px) { .extract-transport-row { gap: 6px; margin-inline: 6px; } .extract-volume { gap: 4px; min-width: 0; } .extract-volume input { width: 48px; min-width: 32px; } }
@media (max-width: 330px) { .extract-transport-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); } .extract-volume { grid-column: 1 / -1; justify-self: end; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .extract-drop { transition: none; } }