/* --------------------------------------------------------------------------
   Dark Mode Component Styles
   -------------------------------------------------------------------------- */
[data-theme="dark"] .btn-soft {
  background: rgba(68, 64, 59, 0.65);
  border-color: var(--paper-border);
  color: #f4f4f4;
}

[data-theme="dark"] .btn-soft svg,
[data-theme="dark"] .btn-soft .device-icon {
  stroke: #f4f4f4;
}

[data-theme="dark"] .btn-soft:hover {
  background: rgba(85, 80, 74, 0.85);
  color: #ffffff;
}

[data-theme="dark"] .btn-soft:hover svg,
[data-theme="dark"] .btn-soft:hover .device-icon {
  stroke: #ffffff;
}

[data-theme="dark"] .btn-soft.active {
  background: #f0ede6;
  color: #181716;
  border-color: #f0ede6;
}

[data-theme="dark"] .btn-soft.active svg,
[data-theme="dark"] .btn-soft.active .device-icon {
  stroke: #181716;
}

[data-theme="dark"] .device-group {
  background: rgba(58, 55, 50, 0.65);
  border-color: var(--paper-border);
  color: #f4f4f4;
}

[data-theme="dark"] .device-group svg,
[data-theme="dark"] .device-group .device-icon {
  stroke: #f4f4f4;
}

[data-theme="dark"] .device-group:hover,
[data-theme="dark"] .device-group:focus-within {
  background: rgba(72, 68, 62, 0.85);
  border-color: var(--paper-border-focus);
}

[data-theme="dark"] .device-group:hover svg,
[data-theme="dark"] .device-group:hover .device-icon,
[data-theme="dark"] .device-group:focus-within svg,
[data-theme="dark"] .device-group:focus-within .device-icon {
  stroke: #ffffff;
}

[data-theme="dark"] .device-select option {
  background: #383531;
  color: #f0ede6;
}

[data-theme="dark"] .device-select {
  color: #f4f4f4;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23f4f4f4" stroke-width="1.2" stroke-linecap="round"/></svg>');
}

[data-theme="dark"] .device-select:hover,
[data-theme="dark"] .device-select:focus {
  color: #ffffff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23ffffff" stroke-width="1.2" stroke-linecap="round"/></svg>');
}

[data-theme="dark"] .btn-track-clear,
[data-theme="dark"] .btn-track-remove {
  background: #23201d;
  color: #8e8880;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .btn-track-clear:hover,
[data-theme="dark"] .btn-track-remove:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .track-pill-btn {
  background: rgba(68, 64, 59, 0.6);
  border-color: var(--paper-border);
  color: var(--graphite-medium);
}

[data-theme="dark"] .master-visualizer-container {
  background: transparent;
  border: none;
}

[data-theme="dark"] .btn-master-rec {
  background: #f0ede6;
  border-color: #787673; /* 50% darker than the button bg so the border stays visible */
  color: #000000 !important;
}

[data-theme="dark"] .btn-master-rec .rec-text {
  color: #000000 !important;
}

[data-theme="dark"] .btn-master-rec:hover {
  background: #ffffff;
  border-color: #8a857e;
  color: #000000 !important;
}

[data-theme="dark"] .btn-master-aux {
  background: #f0ede6;
  border-color: #787673; /* 50% darker than the button bg so the border stays visible */
  color: #000000 !important;
}

[data-theme="dark"] .btn-master-aux:hover {
  background: #ffffff;
  border-color: #8a857e;
  color: #000000 !important;
}

[data-theme="dark"] .btn-master-aux:active,
[data-theme="dark"] .btn-master-aux.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-master-rec.recording {
  background: var(--pencil-red);
  border-color: var(--pencil-red);
  color: #ffffff !important;
}

[data-theme="dark"] .btn-master-rec.recording:hover {
  background: #e85f57;
  border-color: #e85f57;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-master-rec.recording .rec-text {
  color: #ffffff !important;
}

[data-theme="dark"] .btn-master-rec.recording .rec-dot {
  background: #ffffff;
}

[data-theme="dark"] .rec-mode-switch {
  color: #f0ede6 !important;
}

[data-theme="dark"] .rec-mode-switch-icon {
  color: #f0ede6;
}

[data-theme="dark"] .rec-mode-switch:not(.is-screen-mode) .rec-mode-switch-track {
  background: #8e8a83;
  border-color: #aba69e;
}

[data-theme="dark"] .rec-mode-switch.is-screen-mode .rec-mode-switch-track {
  background: #9d4edd;
  border-color: #7b2cbf;
}

[data-theme="dark"] .rec-mode-switch-icon::after {
  background: #1b1917;
  color: #f0ede6;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .permission-overlay {
  background: rgba(30, 28, 26, 0.7); /* 70% dark transparency */
}

[data-theme="dark"] .latency-card,
[data-theme="dark"] .reverb-card,
[data-theme="dark"] .release-card,
[data-theme="dark"] .permission-card,
[data-theme="dark"] .scale-card,
[data-theme="dark"] .voicings-card,
[data-theme="dark"] .pro-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .shortcuts-card {
  background: #383531;
  border-color: var(--paper-border-focus);
  color: #f0ede6;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .shortcuts-header-top h3 {
  color: #f0ede6;
}

[data-theme="dark"] .shortcuts-subtitle {
  color: #a8a39a;
}

[data-theme="dark"] .shortcut-desc {
  color: #d6d1c7;
}

[data-theme="dark"] .settings-label-title {
  color: #ece8e1;
}

[data-theme="dark"] .settings-label-desc {
  color: #a8a39a;
}

[data-theme="dark"] .settings-helper-text {
  color: #8c867c;
}

[data-theme="dark"] .scale-root-btn,
[data-theme="dark"] .scale-type-btn {
  background: #282522;
  border-color: #44403a;
  color: #ece8e1;
}

[data-theme="dark"] .scale-root-btn:hover,
[data-theme="dark"] .scale-type-btn:hover {
  border-color: #e2a042;
  color: #e2a042;
}

[data-theme="dark"] .scale-root-btn.active,
[data-theme="dark"] .scale-type-btn.active {
  background: #f0ede6;
  border-color: #f0ede6;
  color: #1a1918;
}

[data-theme="dark"] .voicing-preview-item {
  background: #282522;
  border-color: #44403a;
}

[data-theme="dark"] .voicing-preview-name {
  color: #f0ede6;
}

[data-theme="dark"] .voicing-preview-feeling {
  color: var(--graphite-light);
}

[data-theme="dark"] .latency-header,
[data-theme="dark"] .reverb-header,
[data-theme="dark"] .release-header {
  border-bottom-color: var(--paper-border);
}

[data-theme="dark"] .version-badge {
  background: none;
  border: none;
  color: #f4f4f4;
  text-decoration: underline;
}

[data-theme="dark"] .version-badge:hover {
  background: none;
  border: none;
  color: #ffffff;
  text-decoration: underline;
}

[data-theme="dark"] .release-tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--paper-border);
  color: #f0ede6;
}

[data-theme="dark"] .release-credit {
  color: var(--graphite-medium);
}

[data-theme="dark"] .release-credit a {
  color: #f0ede6;
}

[data-theme="dark"] .release-credit a:hover {
  color: #ffffff;
}

[data-theme="dark"] .release-title {
  color: #f0ede6;
}

[data-theme="dark"] .release-summary,
[data-theme="dark"] .release-features-list li {
  color: var(--graphite-medium);
}

[data-theme="dark"] .release-content h4,
[data-theme="dark"] .release-features-list li strong {
  color: #f0ede6;
}

[data-theme="dark"] .latency-input-wrapper {
  background: rgba(68, 64, 59, 0.8);
  border-color: var(--paper-border);
}

[data-theme="dark"] .latency-input {
  color: #f0ede6;
}

[data-theme="dark"] .btn-rev-preset {
  background: rgba(68, 64, 59, 0.6);
  border-color: var(--paper-border);
  color: var(--graphite-medium);
}

[data-theme="dark"] .btn-rev-preset:hover {
  background: rgba(85, 80, 74, 0.8);
  color: var(--graphite-dark);
}

[data-theme="dark"] .btn-rev-preset.active {
  background: #f0ede6;
  color: #181716;
  border-color: #f0ede6;
}

[data-theme="dark"] .export-banner {
  background: #ffffff;
  border-color: #808080; /* 50% darker than the pill bg so the border stays visible */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .export-banner a {
  color: #23211f; /* cinza escuro */
}

[data-theme="dark"] .export-banner a svg {
  stroke: #23211f;
}

[data-theme="dark"] .export-banner .export-close {
  color: #55514b;
}

[data-theme="dark"] .export-banner .export-close:hover {
  color: #1a1918;
}

[data-theme="dark"] .bottom-bar {
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .master-visualizer-container {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Every modal remains reachable on short viewports. */
.latency-card,
.reverb-card,
.release-card,
.scale-card,
.voicings-card,
.pro-card,
.settings-card,
.shortcuts-card {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Dark Mode: Start Looper Button */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] #btn-start-app {
  background: #ea580c;
  border-color: #ea580c;
  color: #ffffff !important;
  font-weight: 600;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] #btn-start-app:hover {
  background: #ffffff;
  border-color: #ea580c;
  color: #ea580c !important;
}

[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] #btn-start-app:active,
[data-theme="dark"] .btn-primary.pressed,
[data-theme="dark"] #btn-start-app.pressed {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Dark Mode: Reverb Sliders */
[data-theme="dark"] .reverb-slider-track-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--paper-border);
}

[data-theme="dark"] .reverb-slider-name,
[data-theme="dark"] .reverb-slider-val {
  color: #f0ede6;
  opacity: 0.6;
}

[data-theme="dark"] .reverb-range::-webkit-slider-thumb {
  background-color: #383531;
  background-image: linear-gradient(
    to right,
    transparent 43%,
    rgba(255, 255, 255, 0.35) 43%,
    rgba(255, 255, 255, 0.35) 57%,
    transparent 57%
  );
  border: 1.5px solid #f0ede6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .reverb-range::-webkit-slider-thumb:hover {
  background-color: #48433d;
  border-color: #ffffff;
}

[data-theme="dark"] .reverb-range::-webkit-slider-thumb:active {
  background-color: #f0ede6;
  background-image: linear-gradient(
    to right,
    transparent 43%,
    rgba(0, 0, 0, 0.45) 43%,
    rgba(0, 0, 0, 0.45) 57%,
    transparent 57%
  );
  border-color: #f0ede6;
}

[data-theme="dark"] .reverb-range::-moz-range-thumb {
  background-color: #383531;
  background-image: linear-gradient(
    to right,
    transparent 43%,
    rgba(255, 255, 255, 0.35) 43%,
    rgba(255, 255, 255, 0.35) 57%,
    transparent 57%
  );
  border: 1.5px solid #f0ede6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Dark Mode: Piano Keyboard */
[data-theme="dark"] .scale-piano-wrap {
  background: #282522;
  border-color: #44403a;
}

[data-theme="dark"] .piano-key-white {
  background: #2a2724;
  border-color: #44403a;
}

[data-theme="dark"] .piano-key-white:hover {
  background: #35312d;
}

[data-theme="dark"] .piano-key-white.active {
  background: #78350f;
  border-color: #d97706;
}

[data-theme="dark"] .piano-key-white.root {
  background: #9a3412;
  border-color: #ea580c;
}

[data-theme="dark"] .piano-key-white .piano-key-badge {
  color: #a8a29e;
}

[data-theme="dark"] .piano-key-white.active .piano-key-badge,
[data-theme="dark"] .piano-key-white.root .piano-key-badge {
  color: #fef3c7;
}

[data-theme="dark"] .piano-key-black {
  background: #151413;
  border-color: #262422;
}

[data-theme="dark"] .piano-key-black:hover {
  background: #2b2825;
}

[data-theme="dark"] .piano-key-black.active {
  background: #d97706;
  border-color: #f59e0b;
}

[data-theme="dark"] .piano-key-black.root {
  background: #ea580c;
  border-color: #f97316;
}

/* Dark Mode: Pro Button & Modal */
[data-theme="dark"] .btn-pro-badge:not(.is-pro) {
  color: rgba(235, 230, 220, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .btn-pro-badge:not(.is-pro):hover {
  background: rgba(249, 115, 22, 0.14);
  color: #f97316;
  border-color: #f97316;
}

[data-theme="dark"] .btn-pro-badge.is-pro {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .btn-pro-badge.is-pro:hover {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
  border-color: #34d399;
}

[data-theme="dark"] .pro-hero-section {
  border-bottom-color: #44403a;
}

[data-theme="dark"] .pro-headline {
  color: #f0ede6;
}

[data-theme="dark"] .pro-headline-sub {
  color: #c4bfb6;
}

[data-theme="dark"] .pro-price-tag {
  color: #f97316;
}

[data-theme="dark"] .pro-price-sub,
[data-theme="dark"] .pro-description {
  color: var(--graphite-light);
}

[data-theme="dark"] .pro-features-grid {
  background: #282522;
  border-color: #44403a;
}

[data-theme="dark"] .pro-feature-item {
  background: transparent !important;
  border: none !important;
}

[data-theme="dark"] .pro-feature-item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .pro-feature-text strong {
  color: #f0ede6;
}

[data-theme="dark"] .pro-feature-text span {
  color: var(--graphite-light);
}

[data-theme="dark"] .btn-pro-action {
  background: #ea580c !important;
  border-color: #ea580c !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-pro-action:hover {
  background: #c2410c !important;
  border-color: #c2410c !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.45) !important;
}

[data-theme="dark"] .btn-toggle-license {
  background: rgba(234, 88, 12, 0.12);
  border-color: rgba(234, 88, 12, 0.35);
  color: #fb923c;
}

[data-theme="dark"] .btn-toggle-license:hover {
  background: rgba(234, 88, 12, 0.24);
  border-color: #fb923c;
  color: #fdba74;
}

[data-theme="dark"] .pro-demo-label {
  color: var(--graphite-light);
}