/* ui-themes.css - AnacleStudioSyn Modular UI Theme Engine */

:root {
  --ui-accent-primary: #00f0ff;
  --ui-accent-secondary: #ff0077;
  --ui-bg-dark: #0a0c10;
  --ui-bg-panel-solid: #121722;
  --ui-bg-panel: rgba(16, 20, 28, 0.88);
  --ui-border-color: rgba(255, 255, 255, 0.12);
  --ui-border-accent: #00f0ff;
  --ui-border-glow: rgba(0, 240, 255, 0.6);
  --ui-border-radius: 6px;
  --ui-backdrop-blur: 12px;
  --ui-text-main: #f0f4fc;
  --ui-text-muted: #8a99ad;
}

/* Base element adaptivity to active theme variables */
.hud-modal,
.modal-overlay .modal-window,
.options-modal-window,
.master-options-window,
.side-inspector,
.side-midi-inspector,
.dsp-card,
.settings-card,
.preset-card,
.theme-card,
.typography-preview-box,
.scale-warning-badge,
.start-screen-display-bar,
.hero-box {
  border-radius: var(--ui-border-radius) !important;
  backdrop-filter: blur(var(--ui-backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--ui-backdrop-blur)) !important;
}

.hud-btn,
.esc-action-btn,
.scale-pill-btn,
.start-perf-btn,
.start-theme-btn {
  border-radius: max(3px, calc(var(--ui-border-radius) * 0.75)) !important;
}

/* ==========================================================================
   MASTER OPTIONS HUB THEMED SURFACES
   ========================================================================== */
.master-options-window {
  background: var(--ui-bg-panel) !important;
  border: 1px solid var(--ui-border-accent) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.88), 0 0 32px var(--ui-border-glow) !important;
  color: var(--ui-text-main) !important;
}

.options-sidebar {
  background: var(--ui-bg-sidebar) !important;
  border-right: 1px solid var(--ui-border-color) !important;
}

.options-sidebar::-webkit-scrollbar-thumb {
  background: var(--ui-accent-glow-subtle) !important;
}
.options-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--ui-accent-primary) !important;
}

.options-tab-btn {
  color: var(--ui-text-muted) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

.options-tab-btn:hover {
  color: var(--ui-text-main) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--ui-border-color) !important;
}

.options-tab-btn.active {
  color: var(--ui-accent-primary) !important;
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 14px var(--ui-border-glow) !important;
}

.options-content-area {
  background: var(--ui-bg-content) !important;
  color: var(--ui-text-main) !important;
}

.options-content-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25) !important;
}

.options-content-area::-webkit-scrollbar-thumb {
  background: var(--ui-accent-glow-subtle) !important;
}
.options-content-area::-webkit-scrollbar-thumb:hover {
  background: var(--ui-accent-primary) !important;
}

.transform-section-title {
  color: var(--ui-accent-primary) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
}

/* Nested Cards in Options & Modules */
.dsp-card,
.settings-card {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.dsp-card:hover,
.settings-card:hover {
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 18px var(--ui-border-glow) !important;
}

.dsp-card-title,
.settings-card-title {
  color: var(--ui-accent-primary) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
}

.dsp-row {
  color: var(--ui-text-muted) !important;
}

.dsp-row select,
.display-select-box,
.theme-skybox-select {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.dsp-row select:focus,
.display-select-box:focus,
.theme-skybox-select:focus {
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 10px var(--ui-border-glow) !important;
  outline: none !important;
}

/* ==========================================================================
   UNIVERSAL MODAL WINDOWS & OVERLAYS
   ========================================================================== */
.modal-window,
.lfo-matrix-window,
.esc-menu-window,
.knob-behavior-window,
.options-modal-window {
  background: var(--ui-bg-panel) !important;
  border: 1px solid var(--ui-border-accent) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.88), 0 0 28px var(--ui-border-glow) !important;
  color: var(--ui-text-main) !important;
}

.modal-header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
}

.modal-title {
  color: var(--ui-accent-primary) !important;
}

.modal-title-count {
  color: var(--ui-text-muted) !important;
}

/* Side Inspectors */
.side-inspector,
.side-midi-inspector {
  background: var(--ui-bg-panel) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 32px var(--ui-border-glow) !important;
  color: var(--ui-text-main) !important;
}

.side-inspector .inspector-header,
.side-midi-inspector .inspector-header {
  background: var(--ui-bg-sidebar) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
}

.side-inspector .inspector-title,
.side-midi-inspector .inspector-title {
  color: var(--ui-accent-primary) !important;
}

.side-inspector .transform-section {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
}

.side-inspector .transform-section-title {
  color: var(--ui-accent-primary) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
}

.side-inspector .transform-row span {
  color: var(--ui-text-muted) !important;
}

.side-inspector .transform-row input[type="range"] {
  accent-color: var(--ui-accent-primary) !important;
}

.side-inspector .transform-number-input {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.side-inspector .transform-number-input:focus {
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 10px var(--ui-border-glow) !important;
}

.side-inspector .angle-preset-btn {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.side-inspector .angle-preset-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 10px var(--ui-border-glow) !important;
}

.side-inspector .module-skin-select {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.side-inspector .module-skin-select:focus {
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 8px var(--ui-border-glow) !important;
}

.side-inspector .module-skin-select option {
  background: var(--ui-bg-panel-solid) !important;
  color: var(--ui-text-main) !important;
}

.side-inspector .inspector-footer-tip {
  background: var(--ui-bg-dark) !important;
  border-top: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-muted) !important;
}

/* Side MIDI Inspector Themed Elements */
.side-midi-knob-card {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.side-midi-knob-card:hover {
  background: var(--ui-bg-sidebar) !important;
  border-color: var(--ui-border-accent) !important;
}

.side-midi-knob-card.is-mapped {
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-accent) !important;
  box-shadow: 0 0 14px var(--ui-border-glow) !important;
}

.side-midi-live-val {
  color: var(--ui-accent-primary) !important;
  background: var(--ui-accent-subtle) !important;
}

.side-midi-field label {
  color: var(--ui-text-muted) !important;
}

.side-midi-input-badge {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.side-midi-input-badge:focus {
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 8px var(--ui-border-glow) !important;
}

.side-midi-btn-learn {
  border-color: var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

.side-midi-gauge-bar {
  background: var(--ui-accent-primary) !important;
}

.inspector-resize-handle:hover,
.inspector-resize-handle.active {
  background: var(--ui-accent-primary) !important;
  box-shadow: 0 0 10px var(--ui-border-glow) !important;
}

/* Top and Bottom HUD */
#top-hud {
  background: linear-gradient(180deg, var(--ui-bg-sidebar) 0%, rgba(0, 0, 0, 0.45) 100%) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
}

#bottom-hud {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.hud-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.hud-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  color: var(--ui-text-main) !important;
  box-shadow: 0 0 14px var(--ui-border-glow) !important;
}

.hud-btn.active {
  background: var(--ui-accent-primary) !important;
  color: #000 !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 18px var(--ui-border-glow) !important;
}

/* Tooltips, Badges, and Context Menus */
#param-tooltip {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-accent) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px var(--ui-border-glow) !important;
  color: var(--ui-text-main) !important;
}

#param-tooltip .param-title {
  color: var(--ui-accent-primary) !important;
}

#param-tooltip .param-val {
  color: var(--ui-text-main) !important;
}

.control-value-badge {
  color: var(--ui-accent-primary) !important;
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-color) !important;
}

.key-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.context-menu,
.knob-behavior-menu {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-accent) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 20px var(--ui-border-glow) !important;
  color: var(--ui-text-main) !important;
}

.context-menu-item:hover {
  background: var(--ui-accent-subtle) !important;
  color: var(--ui-accent-primary) !important;
}

/* ==========================================================================
   STARTUP MENU WINDOW & HERO OVERLAY THEMED SURFACES
   ========================================================================== */
#click-to-play-screen {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.hero-box {
  background: var(--ui-bg-panel) !important;
  border: 1px solid var(--ui-border-accent) !important;
  border-radius: var(--ui-border-radius) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 45px var(--ui-border-glow) !important;
  backdrop-filter: blur(var(--ui-backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--ui-backdrop-blur)) !important;
  color: var(--ui-text-main) !important;
}

.hero-title {
  background: linear-gradient(135deg, var(--ui-accent-primary), var(--ui-accent-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 16px var(--ui-border-glow));
}

.hero-subtitle {
  color: var(--ui-text-muted) !important;
}

/* Main "ENTER ANACLE STUDIO" Action Button */
.start-action-btn {
  background: linear-gradient(135deg, var(--ui-accent-primary), var(--ui-accent-secondary)) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  border-radius: max(4px, var(--ui-border-radius)) !important;
  box-shadow: 0 0 25px var(--ui-border-glow), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.start-action-btn:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 0 38px var(--ui-border-glow), 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

/* Display Bar & Presets on Start Screen */
.start-screen-display-bar {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  border-radius: var(--ui-border-radius) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
}

.display-info-pill {
  color: var(--ui-accent-primary) !important;
}

.start-perf-btn {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

.start-perf-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 4px 14px var(--ui-border-glow) !important;
}

.start-perf-btn.active {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 16px var(--ui-border-glow), inset 0 0 10px rgba(255, 255, 255, 0.04) !important;
}

.start-perf-btn.active .start-perf-tag {
  color: var(--ui-accent-primary) !important;
}

.start-perf-sub {
  color: var(--ui-text-muted) !important;
}

.scale-pill-btn {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-muted) !important;
}

.scale-pill-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  color: var(--ui-text-main) !important;
}

.scale-pill-btn.active {
  background: var(--ui-accent-primary) !important;
  color: #000000 !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 12px var(--ui-border-glow) !important;
}

.controls-grid {
  border-top: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-muted) !important;
}

.controls-grid span strong {
  color: var(--ui-accent-primary) !important;
}

/* ==========================================================================
   STARTUP SCREEN THEME SELECTOR (.start-ui-theme-section)
   ========================================================================== */

.start-ui-theme-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.start-theme-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.start-theme-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ui-border-radius);
  padding: 8px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.start-theme-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.start-theme-btn.active {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--ui-accent-primary);
  box-shadow: 0 0 12px var(--ui-border-glow), inset 0 0 8px rgba(255, 255, 255, 0.05);
}

.start-theme-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
}

.start-theme-chip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.start-theme-tag {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  color: var(--ui-text-main);
  white-space: nowrap;
}

.start-theme-btn.active .start-theme-tag {
  color: var(--ui-accent-primary);
}

.start-theme-title {
  font-size: 8px;
  color: var(--ui-text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ==========================================================================
   OPTIONS MODAL THEME SELECTION & CUSTOMIZER
   ========================================================================== */

.ui-theme-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.ui-theme-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ui-border-radius);
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.ui-theme-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.ui-theme-card.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ui-accent-primary);
  box-shadow: 0 0 16px var(--ui-border-glow);
}

.ui-theme-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-theme-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ui-text-main);
  font-family: var(--font-sans);
}

.ui-theme-card.active .ui-theme-card-title {
  color: var(--ui-accent-primary);
}

.ui-theme-card-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ui-text-muted);
}

.ui-theme-card.active .ui-theme-card-badge {
  background: var(--ui-accent-primary);
  color: #000;
}

.ui-theme-card-swatches {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 2px 0;
}

.ui-theme-chip-large {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.ui-theme-card-desc {
  font-size: 10px;
  color: var(--ui-text-muted);
  line-height: 1.35;
}

/* Customizer Panel Grid */
.ui-customizer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 12px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ui-border-radius);
}

.ui-customizer-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ui-customizer-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-text-main);
}

.ui-customizer-val {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ui-accent-primary);
  font-weight: 700;
}

.ui-color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-color-picker-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 32px;
  height: 30px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

.ui-color-picker-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.ui-color-picker-input::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

.ui-color-text-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: var(--ui-text-main);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 8px;
  text-transform: uppercase;
}

.ui-color-text-input:focus {
  outline: none;
  border-color: var(--ui-accent-primary);
}

.ui-radius-pills-row {
  display: flex;
  gap: 6px;
}

.ui-radius-pill {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ui-text-muted);
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 6px 4px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.ui-radius-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ui-text-main);
}

.ui-radius-pill.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--ui-accent-primary);
  color: var(--ui-accent-primary);
  font-weight: 700;
}

/* ==========================================================================
   THEMES & ENVIRONMENT TAB (#tab-themes) AUTHORITATIVE THEMED CONTROLS
   ========================================================================== */

/* Scene Performance & Fidelity Presets Bar */
.perf-preset-bar-wrapper {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  border-radius: var(--ui-border-radius) !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4) !important;
}

.perf-preset-bar-header {
  border-bottom: 1px solid var(--ui-border-color) !important;
}

.perf-preset-bar-title {
  color: var(--ui-accent-primary) !important;
}

.perf-preset-notice {
  color: var(--ui-text-muted) !important;
}

.perf-preset-btn {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  border-radius: var(--ui-border-radius) !important;
  color: var(--ui-text-main) !important;
}

.perf-preset-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 4px 15px var(--ui-border-glow) !important;
}

.perf-preset-btn.active {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 16px var(--ui-border-glow), inset 0 0 8px var(--ui-accent-glow-subtle) !important;
}

.perf-preset-btn.active::before {
  background: var(--ui-accent-primary) !important;
  box-shadow: 0 0 8px var(--ui-border-glow) !important;
}

.perf-preset-btn-name {
  color: var(--ui-text-main) !important;
}

.perf-preset-btn.active .perf-preset-btn-name {
  color: var(--ui-accent-primary) !important;
}

.perf-preset-btn-desc {
  color: var(--ui-text-muted) !important;
}

/* Studio Environments & Atmosphere Presets (#theme-grid) */
.theme-card {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  border-radius: var(--ui-border-radius) !important;
}

.theme-card:hover {
  border-color: var(--ui-border-accent) !important;
  background: var(--ui-accent-subtle) !important;
}

.theme-card.active {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 20px var(--ui-border-glow) !important;
}

.theme-card-title {
  color: var(--ui-text-main) !important;
}

.theme-card.active .theme-card-title {
  color: var(--ui-accent-primary) !important;
}

.theme-card-desc {
  color: var(--ui-text-muted) !important;
}

/* Accordion Section System */
.env-accordion-section {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  border-radius: var(--ui-border-radius) !important;
}

.env-accordion-section:hover {
  border-color: var(--ui-border-accent) !important;
}

.env-accordion-header {
  background: var(--ui-bg-sidebar) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
}

.env-accordion-header:hover {
  background: var(--ui-accent-subtle) !important;
}

.env-accordion-title {
  color: var(--ui-text-main) !important;
}

.env-accordion-badge {
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

.env-accordion-chevron {
  color: var(--ui-accent-primary) !important;
}

/* Sub-panels inside accordions */
#tab-themes .dsp-card {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

#skybox-header-status,
#sky-cover-header-status,
#ground-header-status,
#grid-header-status,
#foliage-header-status,
#surroundings-header-status,
#light-rig-status,
#weather-header-status {
  color: var(--ui-accent-primary) !important;
}

#skybox-enabled-disp,
#skybox-stars-disp,
#horizon-blend-disp,
#sky-cover-enabled-disp,
#sky-cover-autocolor-disp,
#ground-enabled-disp,
#grid-enabled-disp,
#grid-audio-glow-disp,
#foliage-enabled-disp,
#foliage-autoclear-disp,
#surroundings-enabled-disp,
#surroundings-audio-reactive-disp,
#weather-audio-disp,
#fogwall-enabled-disp,
#groundfog-enabled-disp {
  color: var(--ui-accent-primary) !important;
}

#btn-upload-ground {
  border-color: var(--ui-border-accent) !important;
}

/* Universal Range Sliders and Checkboxes inside Options */
.master-options-window input[type="range"],
.modal-window input[type="range"] {
  accent-color: var(--ui-accent-primary) !important;
}

.master-options-window input[type="checkbox"],
.modal-window input[type="checkbox"] {
  accent-color: var(--ui-accent-primary) !important;
}

/* ==========================================================================
   PRESETS & SESSIONS TAB (#tab-presets)
   ========================================================================== */
.preset-storage-heading {
  color: var(--ui-accent-primary) !important;
}

.preset-storage-status {
  color: var(--ui-accent-primary) !important;
}

.preset-refresh-btn {
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

.preset-refresh-btn:hover:not(:disabled) {
  background: var(--ui-accent-primary) !important;
  color: #000000 !important;
}

#input-search-presets,
#input-new-preset-name {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

#input-search-presets:focus,
#input-new-preset-name:focus {
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 10px var(--ui-border-glow) !important;
}

#btn-save-current-preset {
  border-color: var(--ui-border-accent) !important;
}

#presets-grid::-webkit-scrollbar-track,
#recordings-list-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25) !important;
}

#presets-grid::-webkit-scrollbar-thumb,
#recordings-list-container::-webkit-scrollbar-thumb {
  background: var(--ui-accent-glow-subtle) !important;
  border-radius: 4px !important;
}

#presets-grid::-webkit-scrollbar-thumb:hover,
#recordings-list-container::-webkit-scrollbar-thumb:hover {
  background: var(--ui-accent-primary) !important;
}

.preset-card {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  border-radius: var(--ui-border-radius) !important;
  color: var(--ui-text-main) !important;
}

.preset-card:hover {
  border-color: var(--ui-border-accent) !important;
  background: var(--ui-accent-subtle) !important;
  box-shadow: 0 4px 16px var(--ui-border-glow) !important;
}

.preset-card.factory-preset {
  border-left: 3px solid var(--ui-accent-secondary) !important;
}

.preset-card.user-preset {
  border-left: 3px solid var(--ui-accent-primary) !important;
}

.preset-card-title {
  color: var(--ui-text-main) !important;
}

.preset-card-desc {
  color: var(--ui-text-muted) !important;
}

.preset-card-file {
  color: var(--ui-accent-primary) !important;
}

.preset-card-actions {
  border-top: 1px solid var(--ui-border-color) !important;
}

.preset-action-btn {
  border: 1px solid var(--ui-border-color) !important;
  background: var(--ui-bg-sidebar) !important;
  color: var(--ui-text-main) !important;
}

.preset-action-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

.preset-action-btn.btn-load {
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

.preset-action-btn.btn-load:hover {
  background: var(--ui-accent-primary) !important;
  color: #000000 !important;
  box-shadow: 0 0 10px var(--ui-border-glow) !important;
}

.preset-action-btn.btn-replace {
  border-color: rgba(255, 234, 0, 0.45) !important;
  color: #ffea00 !important;
}

.preset-action-btn.btn-replace:hover {
  background: #ffea00 !important;
  border-color: #ffea00 !important;
  color: #000000 !important;
}

.preset-action-btn.btn-delete:hover {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
  color: #ffffff !important;
}

.preset-action-btn.btn-reveal:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

#recordings-list-container {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

#recordings-items-list > div {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  border-radius: var(--ui-border-radius) !important;
}

#recordings-empty-msg {
  color: var(--ui-text-muted) !important;
}

#btn-import-preset-file {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

#btn-import-preset-file:hover {
  border-color: var(--ui-border-accent) !important;
  background: var(--ui-accent-subtle) !important;
  color: var(--ui-accent-primary) !important;
}

/* ==========================================================================
   KEYBINDS & CONTROLS TAB (#tab-keybinds)
   ========================================================================== */
.keybinds-table tr {
  border-bottom: 1px solid var(--ui-border-color) !important;
}

.keybind-btn {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-accent-primary) !important;
}

.keybind-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 10px var(--ui-border-glow) !important;
}

.keybind-btn.listening {
  background: var(--ui-accent-secondary) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ==========================================================================
   CABLES & CROSSHAIR TAB (#tab-cables)
   ========================================================================== */
.color-swatch-item {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.color-swatch-item:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
}

.color-swatch-item.active {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 12px var(--ui-border-glow) !important;
}

#select-crosshair-style {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

/* ==========================================================================
   DSP & SOUND QUALITY TAB (#tab-dsp)
   ========================================================================== */
#dsp-telemetry-hud .telemetry-badge {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

#badge-raycast {
  color: var(--ui-accent-primary) !important;
  border-color: var(--ui-border-color) !important;
}

#module-logo-status {
  color: var(--ui-accent-primary) !important;
}

#dsp-select-samplerate,
#dsp-select-bitdepth,
#dsp-select-latency {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

/* ==========================================================================
   MIDI & CONTROLLERS TAB (#tab-midi)
   ========================================================================== */
.midi-mapping-table-container,
.midi-table-container {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

.midi-mapping-table-container thead tr,
.midi-mappings-table thead tr {
  background: var(--ui-accent-subtle) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
  color: var(--ui-accent-primary) !important;
}

.midi-mapping-table-container th,
.midi-mappings-table th {
  color: var(--ui-accent-primary) !important;
}

#midi-event-log,
.midi-event-log-console {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

#midi-mappings-count-badge,
#midi-monitor-status {
  color: var(--ui-accent-primary) !important;
}

#btn-midi-rescan {
  border-color: var(--ui-border-accent) !important;
}

/* ==========================================================================
   HELP & MODULAR GUIDE TAB (#tab-help)
   ========================================================================== */
#tab-help h4 {
  color: var(--ui-accent-primary) !important;
}

#tab-help strong {
  color: var(--ui-accent-primary) !important;
}

/* ==========================================================================
   SUB-MODALS & SPECIALIZED DIALOGS
   ========================================================================== */
.spawner-cat-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
}

.spawner-cat-btn.active {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
  box-shadow: 0 0 12px var(--ui-border-glow) !important;
}

#drum-curated-modes-section {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

#drum-editor-title {
  color: var(--ui-accent-primary) !important;
}

.esc-action-btn:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 6px 20px var(--ui-border-glow) !important;
}

.esc-action-btn .esc-svg-icon {
  color: var(--ui-accent-primary) !important;
}

.esc-action-btn:hover .esc-svg-icon {
  filter: drop-shadow(0 0 6px var(--ui-border-glow)) !important;
}

.esc-action-btn .key-hint {
  color: var(--ui-accent-primary) !important;
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-color) !important;
}

.lfo-matrix-window {
  background: var(--ui-bg-panel) !important;
  border: 1px solid var(--ui-border-accent) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.88), 0 0 28px var(--ui-border-glow) !important;
}

.lfo-matrix-tab.active {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

#lfo-matrix-scope-banner {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

#lfo-scope-wave-badge {
  color: var(--ui-accent-primary) !important;
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-accent) !important;
}

#input-side-midi-search {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

#side-midi-badge-count {
  color: var(--ui-accent-primary) !important;
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-color) !important;
}

#btn-reposition-module,
#btn-reposition-table {
  border-color: var(--ui-border-accent) !important;
}

#btn-import-faceplate {
  border-color: var(--ui-border-accent) !important;
  background: var(--ui-accent-subtle) !important;
  color: var(--ui-accent-primary) !important;
}

/* ==========================================================================
   SAMPLER 8 MODAL THEMED SURFACES
   ========================================================================== */
.sampler8-modal-container {
  background: var(--ui-bg-panel) !important;
  border: 1px solid var(--ui-border-accent) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 32px var(--ui-border-glow) !important;
}

.sampler8-modal-header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--ui-border-color) !important;
}

.sampler8-header-badge {
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

.sampler8-sidebar {
  background: var(--ui-bg-sidebar) !important;
  border-right: 1px solid var(--ui-border-color) !important;
}

.sampler8-search-box input {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.sampler8-search-box input:focus {
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 8px var(--ui-border-glow) !important;
}

.sampler8-folder-header:hover {
  background: var(--ui-accent-subtle) !important;
}

.sampler8-folder-arrow {
  color: var(--ui-accent-primary) !important;
}

.sampler8-file-item:hover {
  background: var(--ui-accent-subtle) !important;
}

.sampler8-file-item.selected {
  background: var(--ui-accent-subtle) !important;
  border-left: 3px solid var(--ui-border-accent) !important;
}

.sampler8-btn-item-play {
  background: var(--ui-accent-subtle) !important;
  border: 1px solid var(--ui-border-accent) !important;
  color: var(--ui-accent-primary) !important;
}

.sampler8-btn-item-play:hover {
  background: var(--ui-accent-primary) !important;
  color: #000000 !important;
}

.sampler8-dropzone {
  border: 1px dashed var(--ui-border-accent) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.sampler8-drop-text {
  color: var(--ui-accent-primary) !important;
}

.sampler8-btn-play {
  background: var(--ui-accent-primary) !important;
  border: 1px solid var(--ui-border-accent) !important;
  color: #000000 !important;
}

.sampler8-btn-secondary {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.sampler8-btn-secondary:hover {
  border-color: var(--ui-border-accent) !important;
  background: var(--ui-accent-subtle) !important;
  color: var(--ui-accent-primary) !important;
}

.sampler8-track-card {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

.sampler8-track-card:hover {
  border-color: var(--ui-border-accent) !important;
  background: var(--ui-accent-subtle) !important;
}

.sampler8-track-card.active {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
  box-shadow: 0 0 14px var(--ui-border-glow) !important;
}

.sampler8-track-card-badge {
  color: var(--ui-accent-primary) !important;
}

.sampler8-assign-card {
  background: var(--ui-bg-sidebar) !important;
  border: 1px solid var(--ui-border-color) !important;
}

.sampler8-assign-title {
  color: var(--ui-accent-primary) !important;
}

.sampler8-btn-assign-track {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border-color) !important;
  color: var(--ui-text-main) !important;
}

.sampler8-btn-assign-track:hover {
  background: var(--ui-accent-subtle) !important;
  border-color: var(--ui-border-accent) !important;
}

.sampler8-track-num {
  color: var(--ui-accent-primary) !important;
}