html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .lang-menu {
  background-color: #161a26;
  color: #e6e8ee;
  border-color: rgba(255, 255, 255, .25);
}

html[data-theme="dark"] .nav-link,
html[data-theme="dark"] a {
  color: #e6e8ee;
}

html[data-theme="dark"] .nav-link:hover {
  color: #ffffff;
}

/* buttons */
html[data-theme="dark"] .settings-btn {
  background-color: #161a26;
  color: #e6e8ee;
  border-color: rgba(255, 255, 255, .25);
}

html[data-theme="dark"] .settings-btn:hover {
  background-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .settings-btn.active {
  background-color: rgba(255, 255, 255, .18);
}

.lang-menu li.active {
  font-weight: 600;
  background-color: rgba(0, 0, 0, .06);
}

html[data-theme="dark"] .lang-menu li.active {
  background-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .lang-menu {
  background-color: #161a26;
  color: #e6e8ee;
  border-color: rgba(255, 255, 255, .25);
}

html[data-theme="dark"] .lang-menu li:hover {
  background-color: rgba(255, 255, 255, .08);
}


html[data-theme="dark"] body {
  background-color: #0f1216;
  color: #e6e8ee;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .lang-menu {
  background-color: #161a26;
  color: #e6e8ee;
  border-color: rgba(255, 255, 255, .25);
}

html[data-theme="dark"] .nav-link:hover {
  color: #ffffff;
}

/* buttons */
html[data-theme="dark"] .theme-btn {
  background-color: #161a26;
  color: #e6e8ee;
  border-color: rgba(255, 255, 255, .25);
}

html[data-theme="dark"] .theme-btn:hover {
  background-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .theme-btn.active {
  background-color: rgba(255, 255, 255, .18);
}


html[data-theme="dark"] .lang-menu li.active {
  background-color: rgba(255, 255, 255, .12);
}

/* ===============================
   MOBILE NAVBAR FIX
   =============================== */

@media (max-width: 991.98px) {
  html[data-theme="dark"] .navbar-collapse {
    background: #161a26;
  }
}

/* dark mode */
html[data-theme="dark"] .settings-label {
  color: rgba(255, 255, 255, .6);
}

html[data-theme="dark"] .theme-btn {
  border-color: rgba(255, 255, 255, .25);
  color: #e6e8ee;
}

html[data-theme="dark"] .theme-btn.active {
  background: rgba(255, 255, 255, .15);
}

[data-theme="dark"] .navbar .navbar-menu-wrapper .navbar-nav .nav-link {
  color: #e5e7eb;
}

[data-theme="dark"] .form-control {
  background-color: #1f2937;
  /* dark neutral */
  color: #e5e7eb;
  border-color: #374151;
}

[data-theme="dark"] .form-control:focus {
  background-color: #1f2937;
  color: #ffffff;
  border-color: #60a5fa;
  box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
  color: #9ca3af;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
  background-color: #111827;
  color: #6b7280;
}

[data-theme="dark"] table {
  background-color: transparent;
}

[data-theme="dark"] table thead th {
  color: #f9fafb;
  border-bottom-color: #374151;
}

[data-theme="dark"] table td,
[data-theme="dark"] table th {
  border-color: #374151;
}

[data-theme="dark"] table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .btn {
  color: #cfcfcf;
}
[data-theme="dark"] .btn-primary {
  color: #ffffff !important;
  background-color: #00608f; /* slightly brighter for dark UI */
  border-color: #0284c7;
}

[data-theme="dark"] .btn-primary:hover {
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}

[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-primary.active {
  background-color: #0369a1;
  border-color: #0369a1;
}
[data-theme="dark"] .btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.35);
}
[data-theme="dark"] .btn-outline-primary {
  color: #93c5fd;              /* soft blue text */
  background-color: transparent;
  border-color: #3b82f6;       /* visible but not harsh */
}
[data-theme="dark"] .btn-outline-primary:hover {
  color: #ffffff;
  background-color: #3b82f6;
  border-color: #3b82f6;
}

[data-theme="dark"] .btn-outline-primary:active,
[data-theme="dark"] .btn-outline-primary.active {
  background-color: #2563eb;
  border-color: #2563eb;
}
[data-theme="dark"] .btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.35);
}
[data-theme="dark"] .slider {
  background-color: #374151; /* dark neutral */
}
input:checked + .slider {
  background-color: #0176b3;
}

[data-theme="dark"] input:checked + .slider {
  background-color: #0284c7; /* brighter in dark mode */
}
[data-theme="dark"] .slider:hover {
  background-color: #4b5563;
}
input:focus-visible + .slider {
  box-shadow: 0 0 0 2px rgba(1, 118, 179, 0.4);
}

[data-theme="dark"] input:focus-visible + .slider {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.45);
}

[data-theme="dark"] table {
  color: #e5e7eb;
  background-color: transparent;
}

[data-theme="dark"] table th,
[data-theme="dark"] table td {
  border-color: #374151;
}

[data-theme="dark"] table thead th {
  color: #f9fafb;
  border-bottom-color: #4b5563;
}

[data-theme="dark"] table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .content-wrapper {
  background-color: #161a26; /* deep slate */
}
[data-theme="dark"] a:hover {
  color: #6cb3ff !important; /* controlled soft blue */
  text-decoration: none;
}
[data-theme="dark"] .navbar .navbar-nav .nav-link {
  color: #e5e7eb;
  transition: color .2s ease, background-color .2s ease;
}

[data-theme="dark"] .navbar .navbar-nav .nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
[data-theme="dark"] #sep_type_help {
  color: #9ca3af;               /* soft gray */
}
[data-theme="dark"] #sep_type_help:hover {
  color: #93c5fd;               /* soft blue */
  transform: scale(1.05);
}
#sep_type_help:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 118, 179, 0.35);
  border-radius: 50%;
}

[data-theme="dark"] #sep_type_help:focus-visible {
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.4);
}
[data-theme="dark"] .modal-content {
  background-color: #111827;            /* deep slate */
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
[data-theme="dark"] .list-group-item {
  background-color: #111827;            /* dark slate */
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
[data-theme="dark"] .player {
  background: #0f172a;
  background: -moz-linear-gradient(-45deg, #0f172a 0%, #1e293b 100%);
  background: -webkit-linear-gradient(-45deg, #0f172a 0%, #1e293b 100%);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #e5e7eb;

}
[data-theme="dark"] .progress-bar {
  background-color: #2563eb; /* brighter blue for dark UI */
  background-image: linear-gradient(
    135deg,
    #3b82f6 0%,
    #2563eb 100%
  );
}

[data-theme="dark"] .progress {
  background-color: #1f2937;
}

.progress {
  height: 18px;
  border-radius: 6px;
}

.progress-bar {
  font-size: 11px;
  line-height: 18px;
}
[data-theme="dark"] .card {
  background-color: #111827;              /* dark slate */
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] #custom_price {
  background-color: #111827;   /* dark input */
  color: #e5e7eb;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}
[data-theme="dark"] #custom_price::placeholder {
  color: #9ca3af;
}
[data-theme="dark"] #custom_price:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45);
}

[data-theme="dark"] .page-link {
  color: #93c5fd;                     /* readable blue */
  background-color: #111827;          /* dark surface */
  border-color: #374151;
}
[data-theme="dark"] .page-link:hover {
  color: #ffffff;
  background-color: #1f2937;
  border-color: #4b5563;
}

[data-theme="dark"] .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.35);
}

[data-theme="dark"] .page-item.active .page-link {
  color: #ffffff;
  background-color: #2563eb;
  border-color: #2563eb;
}
[data-theme="dark"] .page-item.disabled .page-link {
  color: #6b7280;
  background-color: #0f172a;
  border-color: #374151;
}
[data-theme="dark"] .dropdown-menu {
  background-color: #111827;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dropdown-item {
  color: #e5e7eb;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  color: #ffffff;
  background-color: #1f2937; /* NOT white */
}
[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
  background-color: #2563eb;
  color: #ffffff;
}
[data-theme="dark"] .delete-account-link {
  color: #f87171; /* soft red, readable on dark */
}

[data-theme="dark"] .delete-account-link:hover {
  color: #fecaca;
  transform: scale(1.05);
}
[data-theme="dark"] .credits-item {
  color: #e5e7eb;
}

[data-theme="dark"] .credits-item.has-credits {
  color: #93c5fd;
}

[data-theme="dark"] .credits-action {
  color: #60a5fa;
}

[data-theme="dark"] .credits-action:hover {
  color: #bfdbfe;
}
[data-theme="dark"] .credits-item:hover {
  background-color: #1f2937;
}
[data-theme="dark"] .accordion-item {
  background-color: #111827;            /* dark surface */
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
[data-theme="dark"] .accordion-button {
  background-color: #111827;
  color: #e5e7eb;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #1f2937;
  color: #ffffff;
}
[data-theme="dark"] .accordion-button:focus {
  box-shadow: none;
}
[data-theme="dark"] .accordion-button:hover {
  background-color: #1f2937;
}
[data-theme="dark"] .accordion-body {
  background-color: #0f172a;
  color: #e5e7eb;
}
[data-theme="dark"] pre {
  color: #e5e7eb;
  background-color: #0f172a;   /* dark code surface */
}
[data-theme="dark"] .filepond--panel-root {
  background-color: #1f2937;   /* dark surface */
}
[data-theme="dark"] .filepond--drop-label {
  color: #e5e7eb;
}

[data-theme="dark"] .filepond--label-action {
  color: #60a5fa;
}
[data-theme="dark"] .filepond--panel {
  border-color: #374151;
}
[data-theme="dark"] .filepond--item-panel {
  background-color: #111827;
}
[data-theme="dark"] .filepond--file-action-button:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 992px) {
  [data-theme="dark"] .navbar .navbar-menu-wrapper.navbar-collapse {
    background-color: #0f172a; /* dark drawer */
  }
}
@media (max-width: 992px) {
  [data-theme="dark"] .navbar .navbar-menu-wrapper.navbar-collapse {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
  }
}
@media (max-width: 992px) {
  [data-theme="dark"] .navbar .navbar-nav .nav-link {
    color: #e5e7eb;
  }

  [data-theme="dark"] .navbar .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }
}
[data-theme="dark"] .navbar-toggler {
  color:white;
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1);
}
[data-theme="dark"] .close {
  color: white;
}
[data-theme="dark"] a {
  color: #add2ff !important;
  text-decoration-color: rgba(96, 165, 250, 0.6);
}

[data-theme="dark"] midi-player::part(control-panel) {
  background-color: #181819;
}

[data-theme="dark"] .player {
  --wave-bg: rgba(255, 255, 255, 0.25);
  --wave-fg: #5fa2e8;
}
[data-theme="dark"] .btn-outline-success {
  color: #86efac;              /* soft green text */
  background-color: transparent;
  border-color: #22c55e;
}

[data-theme="dark"] .btn-outline-success:hover {
  color: #052e16;
  background-color: #22c55e;
  border-color: #22c55e;
}

[data-theme="dark"] .btn-outline-success:active,
[data-theme="dark"] .btn-outline-success.active {
  background-color: #16a34a;
  border-color: #16a34a;
}

[data-theme="dark"] .btn-outline-success:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.35);
}
[data-theme="dark"] .btn-outline-danger {
  color: #fca5a5;              /* soft red */
  background-color: transparent;
  border-color: #ef4444;
}

[data-theme="dark"] .btn-outline-danger:hover {
  color: #fff;
  background-color: #ef4444;
  border-color: #ef4444;
}

[data-theme="dark"] .btn-outline-danger:active,
[data-theme="dark"] .btn-outline-danger.active {
  background-color: #dc2626;
  border-color: #dc2626;
}

[data-theme="dark"] .btn-outline-danger:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.35);
}
[data-theme="dark"] .btn-outline-secondary {
  color: #c9cdd4;
  background-color: transparent;
  border-color: #4a5568;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #718096;
}
[data-theme="dark"] .btn-outline-secondary:active,
[data-theme="dark"] .btn-outline-secondary.active {
  background-color: rgba(255, 255, 255, 0.13);
  border-color: #718096;
}
[data-theme="dark"] .btn-outline-secondary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(148, 163, 184, 0.25);
}

[data-theme="dark"] body {
  color: #e5e7eb;
  background: linear-gradient(180deg, #111827 0, #0f172a 260px);
}

[data-theme="dark"] .navbar {
  background: rgba(15, 23, 42, .94);
  border-bottom-color: rgba(148, 163, 184, .18);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .32);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .bootstrap-select > .dropdown-toggle,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .table,
[data-theme="dark"] .settings-sidebar,
[data-theme="dark"] .track-card,
[data-theme="dark"] .demo-card {
  color: #e5e7eb;
  background-color: #111827;
  border-color: #334155;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .demo-header {
  background-color: #0f172a;
  border-color: #334155;
}

[data-theme="dark"] .drag-area,
[data-theme="dark"] .matchering-upload-area,
[data-theme="dark"] .dashed-area {
  color: #e5e7eb;
  border-color: #3b6475;
  background: linear-gradient(180deg, #111827, #162033);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .banner h1,
[data-theme="dark"] .drag-area header,
[data-theme="dark"] .drag-area .drag-text,
[data-theme="dark"] .track-title,
[data-theme="dark"] .demo-card-name {
  color: #f8fafc;
}

[data-theme="dark"] .banner h6,
[data-theme="dark"] .settings-sidebar label,
[data-theme="dark"] .track-size,
[data-theme="dark"] .timeline-text,
[data-theme="dark"] .demo-card-info,
[data-theme="dark"] .demo-filter-item label {
  color: #a9b4c4 !important;
}

[data-theme="dark"] .algorithm_items,
[data-theme="dark"] #sep_type_modal .list-group-item {
  color: #e5e7eb;
  background: #111827;
  border-color: #334155;
}

[data-theme="dark"] .algorithm_items.active,
[data-theme="dark"] .algorithm_items:hover {
  background: #162033;
  border-color: #3b82a3;
}

[data-theme="dark"] .algorithm_items.active,
[data-theme="dark"] .algorithm_items.active .algorithm_names,
[data-theme="dark"] .algorithm_items.active .algorithm_description,
[data-theme="dark"] .algorithm_items.active .info {
  color: #f8fafc;
}

/* Upload area icon — dark variant */
[data-theme="dark"] .single-upload-area::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 16 12 12 8 16'%3E%3C/polyline%3E%3Cline x1='12' y1='12' x2='12' y2='21'%3E%3C/line%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'%3E%3C/path%3E%3C/svg%3E");
  opacity: .65;
}

/* "or" divider — dark */
[data-theme="dark"] .single-upload-area > span {
  color: #4b5a6e;
}

[data-theme="dark"] .single-upload-area > span::before,
[data-theme="dark"] .single-upload-area > span::after {
  background: #2d3d52;
}

/* Footer links — dark */
[data-theme="dark"] .contact-details h5 {
  color: #7a8fa8;
}

[data-theme="dark"] .contact-details a {
  color: #7a8fa8;
}

[data-theme="dark"] .contact-details a:hover {
  color: #93c5fd;
}

/* Drag area hover — dark */
[data-theme="dark"] .drag-area:not(.active):hover,
[data-theme="dark"] .matchering-upload-area:hover {
  border-color: #4d7fa3;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .35);
}

/* Progress bar — dark */
[data-theme="dark"] .progress {
  background-color: #1e293b;
}

/* Remote / Batch upload buttons inside drag area — dark mode */
[data-theme="dark"] .single-upload-area .btn-outline-primary {
  color: #7dd3fc;
  border-color: #3b6fa8;
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .single-upload-area .btn-outline-primary:hover {
  color: #e0f2fe;
  border-color: #60a5fa;
  background: rgba(59, 130, 246, 0.22);
}

[data-theme="dark"] .single-upload-area .btn-outline-primary.disabled,
[data-theme="dark"] .single-upload-area .btn-outline-primary:disabled {
  color: #3d4f62;
  border-color: #263040;
  background: transparent;
  pointer-events: none;
}

/* Separate (submit) button — dark mode override */
[data-theme="dark"] #submitAudio {
  background: linear-gradient(135deg, #0284c7 0%, #00608f 100%);
  border-color: #0369a1;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
}

[data-theme="dark"] #submitAudio:not(:disabled):hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

[data-theme="dark"] #submitAudio:disabled {
  background: #1e2d3d;
  border-color: #253547;
  color: #3d5166;
  box-shadow: none;
}