/* Match the sky-blue 8D dot using the shared tool theme. */
body[data-tool-theme="spatial"] { --coral: var(--tool-accent); --surface-2: color-mix(in srgb, var(--tool-accent) 8%, var(--bg)); }
.upload-icon { background:var(--green-dark); color:var(--tool-accent); border-color:color-mix(in srgb, var(--tool-accent) 50%, var(--line)); }
.drop-zone:hover, .drop-zone.dragging { background: color-mix(in srgb, var(--tool-accent) 6%, var(--bg)); }
.spatial-settings {padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px;border-block:1px solid var(--line)}
.spatial-settings label {display:block;color:var(--muted);font-size:14px;line-height:1.6}
.spatial-settings output,.playback output {float:right;color:var(--text)}
.spatial-settings input[type=range],.playback input[type=range] {display:block;width:100%;margin-top:12px;accent-color:var(--green)}
.spatial-settings select {display:block;width:100%;margin-top:10px;padding:10px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:5px;font:inherit}
.spatial-settings .check {display:flex;gap:10px;align-items:center}.check input {accent-color:var(--green)}
.audio-actions {display:flex;gap:12px;flex-wrap:wrap;padding:20px 24px}.audio-actions .icon-button {width:auto;height:40px;padding:10px 16px;font-size:13px} .audio-actions button {white-space:nowrap;font-size:13px}
.playback {padding:0 24px 24px;color:var(--muted);font-size:14px}.playback p {margin:16px 0 0;min-height:22px}#error {color:#ff9090}
.level-meter {height:5px;background:var(--line);margin-top:18px;border-radius:4px;overflow:hidden}#level {height:100%;width:0;background:var(--green)}
.spatial-copy {max-width:820px;margin:0 auto;padding:0 24px 64px}.spatial-copy h2 {margin:36px 0 14px;font-size:26px}.spatial-copy p,.spatial-copy ol {color:var(--muted);line-height:1.8}.spatial-copy a {color:var(--green)}.spatial-copy .credits {font-size:12px}
button:disabled {opacity:.45;cursor:not-allowed} [hidden] {display:none!important} input:focus-visible,select:focus-visible,button:focus-visible {outline:2px solid var(--green);outline-offset:4px}
@media(max-width:640px){.spatial-settings{grid-template-columns:1fr;padding:18px}.audio-actions{padding:18px;gap:8px}.playback{padding:0 18px 18px}.audio-actions button{flex:1 1 120px}.spatial-copy{padding-inline:18px}}

.headphone-notice { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; padding:18px; border:1px solid color-mix(in srgb,var(--tool-accent) 55%,var(--line)); border-left:4px solid var(--tool-accent); border-radius:6px; background:var(--green-dark); }
.headphone-notice svg { flex:0 0 30px; width:30px; height:30px; fill:none; stroke:var(--tool-accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.headphone-notice strong { display:block; color:var(--tool-accent); font-size:17px; }
.headphone-notice p { margin:6px 0 0; color:var(--text); font-size:14px; line-height:1.6; }
.headphone-reminder { margin:18px 24px 0; color:var(--tool-accent); font-size:14px; font-weight:700; }
@media(max-width:640px) { .headphone-notice { padding:14px; gap:10px; } .headphone-reminder { margin-inline:18px; } }

/* Disabled means unavailable, without the shared wait cursor. */
.audio-actions button:disabled { cursor:not-allowed; opacity:.45; }
.export-description { margin:18px 24px 0; color:var(--muted); font-size:13px; line-height:1.6; }
@media(max-width:640px) { .export-description { margin-inline:18px; } }

.faq-list ol { margin:0 0 26px; padding-left:24px; color:var(--muted); font-size:15px; line-height:1.9; }
.faq-list ol li + li { margin-top:8px; }
.faq-list summary:focus-visible { outline:2px solid var(--tool-accent); outline-offset:4px; }

#prefsBar { margin:18px 24px 0; min-inline-size:0; }
#prefsBar.is-saved .prefs-save { opacity:1; }
@media(max-width:640px) { #prefsBar { margin-inline:18px; } }