body[data-light-mode="spectrum"], body[data-light-mode="spectrum"] #disco-app { background: #000; --ink: rgb(255 255 255 / .65); }
.spectrum-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spectrum-choose { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 59px); left: calc(env(safe-area-inset-left, 0px) + 16px); z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; border: 1px solid #ffffff30; border-radius: 8px; background: #080810b8; color: #eee; font-size: 13px; }
.spectrum-choose small { opacity: .6; white-space: nowrap; }
.spectrum-mode-list { display: grid; gap: 7px; }
.spectrum-mode-list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #ffffff30; border-radius: 8px; background: #ffffff06; color: #eee; text-align: start; }
.spectrum-mode-list button[aria-pressed="true"] { border-color: #b8b6ff; background: #b8b6ff1a; }
.spectrum-mode-list small { color: #aaa; width: 18px; }
body[data-light-mode="spectrum"] .topbar, body[data-light-mode="spectrum"] .bottom-ui { --ink: rgb(255 255 255 / .75); background: linear-gradient(#0009, transparent); }
body[data-light-mode="spectrum"] .bottom-ui { background: linear-gradient(transparent, #000b); }
body[data-light-mode="spectrum"] .icon-button img { filter: brightness(0) invert(1); opacity: .7; }
body[data-light-mode="spectrum"] .topbar { background: #08081099; }
body[data-light-mode="spectrum"] #next-submode { width: 44px; min-width: 40px; }
body[data-light-mode="spectrum"] .controls-panel { justify-content: center; }
body[data-light-mode="spectrum"] .controls-panel .icon-button, body[data-light-mode="spectrum"] .tempo-button { width: 42px; min-width: 38px; }
body[data-light-mode="spectrum"] #tempo { width: 44px; }
.band-settings { width: min(520px, calc(100% - 24px)); }
.band-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.band-table th { color: #bbb; font-weight: 500; }
.band-table th, .band-table td { padding: 4px; text-align: center; }
.band-table th:first-child, .band-table td:first-child { text-align: start; white-space: nowrap; }
.band-table input { width: 20px; height: 20px; accent-color: #9cf; }
.band-table label { display: flex; min-width: 40px; min-height: 36px; align-items: center; justify-content: center; }
.band-table meter { width: 100%; min-width: 45px; height: 16px; accent-color: #9cf; }
.band-table td:last-child { width: 30%; }
.band-settings .range-label { margin-top: 12px; }
@media (max-width: 370px) { body[data-light-mode="spectrum"] .controls-panel { flex-wrap: wrap; } body[data-light-mode="spectrum"] .controls-panel .icon-button, body[data-light-mode="spectrum"] .tempo-button { width: 38px; min-width: 36px; } body[data-light-mode="spectrum"] #tempo { width: 36px; } }
@media (max-height: 500px) { .spectrum-dialog { width: min(600px, calc(100% - 24px)); } .spectrum-mode-list { grid-template-columns: repeat(2, 1fr); gap: 5px; } .spectrum-mode-list button { min-height: 42px; padding: 6px 10px; } }