.navbar {
  --nav-bg-1: #112c45;
  --nav-bg-2: #173752;
  --nav-bg-3: #1f4462;
  --nav-text: #f3f8fe;
  --nav-muted: rgba(220, 234, 246, 0.76);
  --nav-border: rgba(181, 206, 227, 0.29);
  --nav-border-hover: rgba(210, 229, 243, 0.46);
  --nav-surface: rgba(12, 33, 50, 0.42);
  --nav-surface-hover: rgba(18, 47, 70, 0.6);
  --nav-panel: rgba(10, 29, 44, 0.48);
  --nav-shadow: 0 10px 24px rgba(3, 10, 18, 0.28);
  --nav-shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  --nav-accent: #7ecbff;
  --nav-accent-soft: #57bad3;
  --nav-cta-bg:
    linear-gradient(130deg, rgba(94, 169, 217, 0.32), rgba(81, 193, 206, 0.24)),
    rgba(12, 37, 55, 0.62);
  --nav-primary-btn-bg:
    linear-gradient(140deg, rgba(93, 172, 224, 0.36), rgba(72, 191, 215, 0.3)),
    rgba(11, 39, 58, 0.76);
  --nav-active-btn-bg:
    linear-gradient(145deg, rgba(118, 190, 230, 0.52), rgba(79, 168, 213, 0.46)),
    rgba(13, 45, 66, 0.76);
  --nav-active-ring: 0 0 0 1px rgba(170, 210, 234, 0.42), 0 0 14px rgba(93, 171, 214, 0.28);

  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2200;
  color: var(--nav-text);
  border-bottom: 1px solid rgba(196, 220, 239, 0.22);
  background:
    radial-gradient(circle at 12% -24%, rgba(108, 185, 232, 0.15), transparent 48%),
    radial-gradient(circle at 96% 136%, rgba(59, 156, 205, 0.1), transparent 56%),
    linear-gradient(136deg, var(--nav-bg-1) 0%, var(--nav-bg-2) 54%, var(--nav-bg-3) 100%);
  box-shadow: var(--nav-shadow);
  font-family: "Manrope", "Segoe UI", sans-serif;
  backdrop-filter: blur(14px);
}

.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  opacity: 0.5;
}

.navbar .container {
  position: relative;
  width: min(100%, 1640px);
  margin: 0 auto;
  padding: 0.72rem 0.9rem 0.82rem;
  display: grid;
  gap: 0.62rem;
}

.navbar-top-row,
.navbar-row {
  display: grid;
  grid-template-columns: minmax(245px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
}

.brand-zone {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
}

.navbar-brand-container {
  min-width: 0;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.66rem;
  min-width: 0;
  color: #ffffff;
  text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease;
}

.navbar-brand:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.brand-logo-shell {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(191, 217, 237, 0.42);
  background:
    radial-gradient(circle at 24% 18%, rgba(133, 205, 248, 0.14), transparent 52%),
    linear-gradient(145deg, rgba(9, 27, 42, 0.95), rgba(8, 24, 38, 0.94));
  box-shadow: 0 5px 14px rgba(3, 11, 19, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.brand-logo {
  width: 32px;
  height: 32px;
  display: block;
}

.brand-wordmark {
  display: grid;
  min-width: 0;
}

.brand-wordmark-main {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(1.22rem, 2.05vw, 1.56rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #f7fbff;
}

.brand-wordmark-sub {
  margin-top: 0.08rem;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--nav-muted);
}

.navbar-toggle {
  display: none;
  width: 40px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--nav-border);
  background: var(--nav-surface);
  color: var(--nav-text);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.navbar-toggle:hover {
  background: var(--nav-surface-hover);
  border-color: rgba(210, 231, 247, 0.56);
}

.navbar-toggle .hamburger {
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.nav-main-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}

.audio-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  flex: 0 0 auto;
}

.nav-utility-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.dropdown {
  position: relative;
  flex: 0 0 auto;
}

.audio-upload-btn {
  flex: 0 0 auto;
  width: 40px;
  min-width: 40px;
  padding: 0;
  gap: 0;
}

.audio-upload-label {
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0.02em;
}

.dropbtn,
.icon-btn,
.transport-btn,
.player-shell-toggle,
.auth-action-btn,
.studio-mini-btn,
.studio-reset-btn {
  border: 1px solid var(--nav-border);
  color: var(--nav-text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    var(--nav-surface);
  box-shadow: var(--nav-shadow-soft);
  transition:
    background-color 130ms ease,
    border-color 130ms ease,
    box-shadow 130ms ease,
    transform 130ms ease,
    color 130ms ease;
}

.dropbtn {
  min-height: 40px;
  padding: 0 0.88rem;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 760;
  letter-spacing: 0.015em;
}

.dropbtn:hover,
.dropdown.open .dropbtn,
.icon-btn:hover,
.transport-btn:hover,
.player-shell-toggle:hover,
.auth-action-btn:hover,
.studio-mini-btn:hover,
.studio-reset-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07)),
    var(--nav-surface-hover);
  border-color: var(--nav-border-hover);
  box-shadow: 0 8px 18px rgba(3, 12, 20, 0.22), var(--nav-shadow-soft);
}

.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0.22rem;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(185, 211, 232, 0.24);
  background: rgba(8, 24, 37, 0.2);
}

.navbar-nav li {
  list-style: none;
}

.navbar-nav .nav-main-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(236, 246, 255, 0.9);
  font-size: 0.79rem;
  font-weight: 740;
  letter-spacing: 0.015em;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.navbar-nav .nav-main-link::after {
  display: none;
}

.navbar-nav .nav-main-link:hover,
.navbar-nav .nav-main-link[aria-current="page"] {
  color: #ffffff;
  border-color: rgba(198, 221, 241, 0.4);
  background: rgba(255, 255, 255, 0.1);
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn i {
  font-size: 0.94rem;
}

.auth-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: auto;
}

.auth-inline-form {
  margin: 0;
}

.auth-user-label {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(186, 211, 230, 0.38);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(235, 246, 255, 0.92);
  font-size: 0.76rem;
  font-weight: 720;
  padding: 0.47rem 0.66rem;
}

.auth-action-btn {
  min-height: 38px;
  border-radius: 10px;
  padding: 0 0.84rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.auth-action-btn--ghost {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)),
    rgba(8, 26, 40, 0.52);
}

.auth-nav--guest .auth-action-btn:last-child {
  border-color: rgba(203, 227, 244, 0.68);
  background:
    linear-gradient(130deg, rgba(89, 190, 237, 0.36), rgba(67, 204, 180, 0.3)),
    rgba(9, 33, 50, 0.66);
}

.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(340px, 84vw);
  max-height: 320px;
  overflow-y: auto;
  border-radius: 11px;
  border: 1px solid rgba(193, 220, 239, 0.28);
  background: linear-gradient(165deg, rgba(7, 24, 38, 0.98), rgba(10, 30, 45, 0.96));
  box-shadow: 0 10px 22px rgba(2, 10, 17, 0.3);
  padding: 0.44rem;
  z-index: 1320;
}

.dropdown.open .dropdown-content {
  display: block;
}

.dropdown-content a,
.dropdown-content span {
  display: block;
  color: #eaf5ff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 650;
  padding: 0.54rem 0.58rem;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-content a:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Player shell */
.navbar-player-shell {
  border: 1px solid rgba(189, 215, 235, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% -84%, rgba(110, 203, 254, 0.12), transparent 52%),
    radial-gradient(circle at 92% 132%, rgba(70, 178, 230, 0.08), transparent 56%),
    linear-gradient(166deg, rgba(8, 24, 37, 0.48), rgba(9, 30, 45, 0.42)),
    var(--nav-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(3, 12, 20, 0.2);
  padding: 0.76rem;
  display: grid;
  gap: 0.62rem;
  transition: padding 140ms ease, gap 140ms ease;
}

.player-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.82rem;
}

.player-shell-head-left {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  min-width: 0;
}

.player-shell-kicker {
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(221, 236, 248, 0.88);
  font-weight: 800;
}

.player-shell-state {
  font-size: 0.64rem;
  border: 1px solid rgba(188, 214, 232, 0.44);
  border-radius: 999px;
  padding: 0.2rem 0.56rem;
  color: rgba(236, 247, 255, 0.9);
  background: rgba(255, 255, 255, 0.11);
  font-weight: 700;
}

.player-shell-toggle {
  min-height: 36px;
  border-radius: 10px;
  padding: 0 0.74rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.player-shell-body {
  display: grid;
  gap: 0.62rem;
}

.navbar-player-shell.is-collapsed {
  padding: 0.56rem 0.64rem;
  gap: 0;
}

.navbar-player-shell.is-collapsed .player-shell-body {
  display: none;
}

.player-transport-row {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 0.62rem;
}

.audio-controls-left,
.audio-controls-right {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.audio-controls-right {
  justify-content: flex-end;
}

.top-wave-container {
  width: 100%;
  min-width: 0;
  position: relative;
}

#waveform {
  width: 100%;
  height: 70px;
  border-radius: 14px;
  border: 1px solid rgba(191, 219, 239, 0.22);
  background:
    radial-gradient(circle at 10% -70%, rgba(94, 183, 255, 0.08), transparent 46%),
    linear-gradient(156deg, rgba(10, 31, 46, 0.95), rgba(8, 24, 36, 0.95));
  overflow: hidden;
}

#waveform.is-file-drop-target {
  border-color: rgba(93, 214, 184, 0.9);
  box-shadow: 0 0 0 2px rgba(93, 214, 184, 0.26), inset 0 0 24px rgba(93, 214, 184, 0.12);
}

#waveform.is-uploading-file {
  opacity: 0.86;
  cursor: progress;
}

.wave-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.36rem;
  opacity: 0;
  transform: translateY(4px) scale(0.985);
  pointer-events: none;
  transition: opacity 150ms ease, transform 170ms ease;
}

.wave-upload-overlay.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wave-upload-overlay__card {
  width: min(380px, 96%);
  border-radius: 12px;
  border: 1px solid rgba(170, 225, 213, 0.48);
  background: linear-gradient(165deg, rgba(11, 33, 49, 0.9), rgba(8, 25, 38, 0.88));
  box-shadow: 0 14px 28px rgba(4, 15, 24, 0.44);
  color: #eaf6ff;
  padding: 0.48rem 0.58rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.26rem;
  backdrop-filter: blur(4px);
}

.wave-upload-overlay__icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  color: #dcfbf2;
  background: linear-gradient(140deg, rgba(58, 195, 165, 0.36), rgba(58, 161, 225, 0.34));
  box-shadow: inset 0 0 0 1px rgba(206, 239, 255, 0.26);
}

.wave-upload-overlay__title {
  font-size: 0.74rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.wave-upload-overlay__hint {
  font-size: 0.68rem;
  line-height: 1.2;
  color: rgba(212, 234, 249, 0.88);
}

.wave-upload-overlay__progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(175, 207, 229, 0.26);
  overflow: hidden;
  margin-top: 0.12rem;
}

.wave-upload-overlay__progress-bar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2ab7e6, #2ed6a8 60%, #f8c75e 100%);
  transition: width 110ms linear;
}

.wave-upload-overlay.is-uploading .wave-upload-overlay__icon {
  animation: wave-upload-pulse 760ms ease-in-out infinite;
}

.wave-upload-overlay.is-success .wave-upload-overlay__card {
  border-color: rgba(106, 224, 175, 0.62);
}

.wave-upload-overlay.is-error .wave-upload-overlay__card {
  border-color: rgba(239, 133, 133, 0.58);
}

.wave-upload-overlay__percent {
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d3ebfa;
}

.transport-btn {
  min-width: 42px;
  height: 42px;
  border-radius: 10px;
  padding: 0 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.transport-btn:active {
  transform: translateY(1px);
}

.transport-btn.primary {
  border-color: rgba(196, 223, 242, 0.72);
  background: var(--nav-primary-btn-bg);
  color: #f5fbff;
}

.transport-btn.marker-a,
.transport-btn.marker-b {
  min-width: 44px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 0.95rem;
}

.transport-btn.active {
  border-color: rgba(202, 229, 246, 0.8);
  background: var(--nav-active-btn-bg);
  box-shadow: var(--nav-active-ring);
  color: #f4fbff;
}

.transport-btn.is-pressed {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 0 0 1px rgba(205, 230, 247, 0.52);
}

.player-status-row {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex-wrap: wrap;
}

.now-playing-chip,
.status-pill {
  border-radius: 999px;
  border: 1px solid rgba(205, 228, 243, 0.36);
  background: rgba(255, 255, 255, 0.1);
  color: var(--nav-text);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.now-playing-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  max-width: min(430px, 100%);
  padding: 0.4rem 0.68rem;
  border-color: rgba(153, 223, 203, 0.52);
  background: rgba(53, 208, 176, 0.16);
}

.now-playing-chip .label {
  color: rgba(236, 248, 255, 0.84);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.62rem;
  font-weight: 800;
}

.now-playing-chip.is-empty {
  border-color: rgba(214, 233, 246, 0.34);
  background: rgba(255, 255, 255, 0.08);
}

#currentSongName {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill {
  padding: 0.38rem 0.66rem;
  border-color: rgba(214, 233, 246, 0.4);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.08));
}

.status-pill.is-muted {
  color: var(--nav-muted);
}

.track-load-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  min-width: 86px;
  text-align: center;
}

.track-load-status::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: rgba(168, 190, 208, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  flex: 0 0 auto;
}

.track-load-status.status-loading::before {
  width: 0.62rem;
  height: 0.62rem;
  border: 2px solid rgba(108, 160, 194, 0.28);
  border-top-color: rgba(30, 137, 211, 0.92);
  border-right-color: rgba(24, 171, 132, 0.72);
  background: transparent;
  box-shadow: none;
  animation: nav-chip-spin 760ms linear infinite;
}

.track-load-status.status-ready::before {
  background: #2eaa89;
}

.track-load-status.status-playing::before {
  background: #ff9440;
  box-shadow: 0 0 0 1px rgba(255, 148, 64, 0.24), 0 0 8px rgba(255, 148, 64, 0.46);
}

.track-load-status.status-error::before {
  background: #e56d6d;
}

/* Modals */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4200;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(3, 10, 18, 0.56);
  backdrop-filter: blur(8px);
}

.modal-content {
  width: min(700px, 94vw);
  margin: 0;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(161, 199, 227, 0.56);
  background: linear-gradient(180deg, rgba(247, 252, 255, 0.74), rgba(233, 245, 255, 0.64));
  color: #13253a;
  box-shadow: 0 30px 70px rgba(8, 20, 34, 0.34);
  padding: 1.34rem;
  position: relative;
  animation: nav-modal-in 180ms ease-out;
  backdrop-filter: blur(18px) saturate(136%);
  -webkit-backdrop-filter: blur(18px) saturate(136%);
}

.modal-content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(122deg, #0e73bd, #19a2e8 52%, #16b78c 100%);
}

.modal-content h2 {
  margin: 0 0 0.88rem;
  font-size: 1.16rem;
  line-height: 1.2;
  color: #102a44;
}

.studio-subtitle {
  margin: -0.34rem 0 0.95rem;
  color: rgba(24, 51, 76, 0.84);
  font-size: 0.84rem;
  font-weight: 600;
}

.close-button {
  position: absolute;
  right: 0.84rem;
  top: 0.72rem;
  border: 1px solid rgba(146, 184, 212, 0.52);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(234, 244, 253, 0.68));
  color: #15324f;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.84rem;
}

.studio-control {
  border: 1px solid rgba(15, 30, 46, 0.12);
  background: linear-gradient(180deg, #ffffff, #f5faff);
  border-radius: 12px;
  padding: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 8px 18px rgba(13, 36, 56, 0.06);
}

.studio-control label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #233a53;
}

.studio-value {
  font-size: 0.98rem;
  font-weight: 800;
  color: #143a5a;
}

.studio-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.studio-mini-btn,
.studio-reset-btn {
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.studio-mini-btn {
  padding: 0.34rem 0.58rem;
}

.studio-mini-btn.active {
  border-color: rgba(23, 137, 222, 0.58);
  color: #0f4060;
  background: linear-gradient(145deg, rgba(21, 136, 233, 0.2), rgba(18, 184, 140, 0.16));
}

.studio-control input[type="range"] {
  width: 100%;
}

.studio-control select {
  width: 100%;
  border: 1px solid rgba(18, 38, 59, 0.2);
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.88rem;
  color: #14324d;
  background: #ffffff;
}

.studio-actions {
  justify-content: flex-end;
}

.studio-reset-btn {
  padding: 0.58rem 0.8rem;
}

.upload-modal-content {
  width: min(560px, 94vw);
}

.upload-droparea {
  border: 2px dashed rgba(20, 60, 92, 0.38);
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fcff, #eef6ff);
  padding: 1.12rem;
  text-align: center;
}

.upload-droparea.highlight {
  border-color: #1d9984;
  background: linear-gradient(145deg, #eafaf6, #e4f3ff);
}

.upload-droparea.is-uploading {
  opacity: 0.72;
  pointer-events: none;
}

.upload-status-card {
  margin-top: 0.72rem;
  border: 1px solid rgba(22, 70, 106, 0.16);
  border-radius: 12px;
  background: linear-gradient(145deg, #f8fcff, #eef7ff);
  padding: 0.6rem 0.68rem;
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 170ms ease, transform 170ms ease, max-height 170ms ease, padding 170ms ease;
}

.upload-status-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 120px;
}

.upload-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.74rem;
  color: #1b486c;
  font-weight: 700;
}

#uploadStatusText {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#uploadStatusPercent {
  font-weight: 800;
}

.upload-progress-track {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #dbe8f3;
  overflow: hidden;
}

.upload-progress-bar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1787d4, #13a7db 56%, #15bb95 100%);
  transition: width 110ms linear;
}

.upload-progress-track.is-indeterminate .upload-progress-bar {
  width: 36%;
  animation: upload-indeterminate 860ms ease-in-out infinite;
}

.upload-toast-host {
  position: fixed;
  right: 1rem;
  top: calc(84px + env(safe-area-inset-top));
  display: grid;
  gap: 0.5rem;
  width: min(340px, calc(100vw - 1.4rem));
  z-index: 4300;
  pointer-events: none;
}

.upload-toast {
  pointer-events: auto;
  border-radius: 12px;
  border: 1px solid rgba(16, 51, 77, 0.18);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(242, 250, 255, 0.98));
  color: #18364f;
  padding: 0.62rem 0.72rem;
  box-shadow: 0 14px 24px rgba(9, 27, 43, 0.14);
  opacity: 0;
  transform: translateY(-7px);
  animation: upload-toast-in 170ms ease-out forwards;
}

.upload-toast--success {
  border-color: rgba(26, 153, 118, 0.48);
  background: linear-gradient(160deg, rgba(245, 255, 251, 0.99), rgba(233, 252, 244, 0.98));
}

.upload-toast--error {
  border-color: rgba(201, 76, 76, 0.42);
  background: linear-gradient(160deg, rgba(255, 248, 248, 0.99), rgba(255, 238, 238, 0.98));
}

.upload-toast-title {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.upload-toast-message {
  margin: 0.18rem 0 0;
  font-size: 0.77rem;
  line-height: 1.4;
  color: rgba(24, 52, 76, 0.88);
}

.file-input {
  display: none;
}

#fileExplorer {
  cursor: pointer;
  color: #146fae;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.navbar button:focus-visible,
.navbar a:focus-visible,
.studio-reset-btn:focus-visible,
.studio-mini-btn:focus-visible,
.close-button:focus-visible,
#fileExplorer:focus-visible {
  outline: 2px solid rgba(177, 211, 235, 0.78);
  outline-offset: 2px;
}

@keyframes nav-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nav-chip-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dark mode */
body.dark-mode .navbar,
html.dark-mode .navbar {
  --nav-bg-1: #071b30;
  --nav-bg-2: #0b2742;
  --nav-bg-3: #0f3552;
  --nav-surface: rgba(7, 33, 54, 0.78);
  --nav-surface-hover: rgba(10, 49, 76, 0.82);
  --nav-border: rgba(94, 170, 212, 0.36);
  --nav-border-hover: rgba(123, 199, 235, 0.52);
  --nav-text: #eef5fb;
  --nav-muted: rgba(177, 214, 236, 0.82);
  --nav-shadow: 0 14px 30px rgba(0, 0, 0, 0.46);
  --nav-cta-bg:
    linear-gradient(132deg, rgba(53, 170, 184, 0.4), rgba(47, 149, 194, 0.34)),
    rgba(8, 39, 60, 0.82);
  --nav-primary-btn-bg:
    linear-gradient(140deg, rgba(61, 173, 208, 0.52), rgba(43, 193, 160, 0.4)),
    rgba(8, 47, 72, 0.84);
  --nav-active-btn-bg:
    linear-gradient(145deg, rgba(74, 202, 178, 0.62), rgba(67, 164, 216, 0.56)),
    rgba(10, 55, 81, 0.9);
  --nav-active-ring: 0 0 0 1px rgba(109, 212, 188, 0.5), 0 0 16px rgba(70, 182, 218, 0.36);
}

body.dark-mode .brand-logo-shell,
html.dark-mode .brand-logo-shell {
  border-color: rgba(113, 191, 229, 0.4);
  background:
    radial-gradient(circle at 24% 18%, rgba(73, 192, 212, 0.22), transparent 52%),
    linear-gradient(145deg, rgba(8, 33, 52, 0.96), rgba(9, 43, 66, 0.96));
}

body.dark-mode .navbar-nav,
html.dark-mode .navbar-nav {
  background: rgba(8, 35, 56, 0.42);
}

body.dark-mode .dropdown-content,
html.dark-mode .dropdown-content {
  background: linear-gradient(162deg, rgba(6, 29, 46, 0.98), rgba(9, 42, 64, 0.96));
  border-color: rgba(102, 179, 220, 0.32);
}

body.dark-mode .player-shell-head,
html.dark-mode .player-shell-head {
  border: 1px solid rgba(99, 177, 217, 0.28);
  border-radius: 12px;
  padding: 0.38rem 0.5rem;
  background: linear-gradient(140deg, rgba(8, 40, 62, 0.7), rgba(7, 52, 76, 0.58));
}

body.dark-mode .player-shell-kicker,
html.dark-mode .player-shell-kicker {
  color: rgba(124, 208, 228, 0.95);
  letter-spacing: 0.14em;
}

body.dark-mode .player-shell-state,
html.dark-mode .player-shell-state {
  border-color: rgba(117, 199, 234, 0.36);
  background: rgba(10, 61, 90, 0.56);
  color: rgba(216, 244, 255, 0.94);
}

body.dark-mode .transport-btn,
html.dark-mode .transport-btn {
  border-color: rgba(96, 171, 212, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    rgba(8, 39, 62, 0.78);
  color: #e8f6ff;
}

body.dark-mode .transport-btn:hover,
html.dark-mode .transport-btn:hover {
  border-color: rgba(122, 202, 230, 0.54);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(10, 57, 86, 0.86);
}

body.dark-mode .transport-btn.active,
html.dark-mode .transport-btn.active,
body.dark-mode .transport-btn.is-set,
html.dark-mode .transport-btn.is-set {
  border-color: rgba(110, 210, 191, 0.62);
  color: #ffffff;
  background:
    linear-gradient(145deg, rgba(78, 206, 178, 0.64), rgba(64, 171, 224, 0.56)),
    rgba(10, 61, 91, 0.9);
  box-shadow: 0 0 0 1px rgba(109, 214, 192, 0.52), 0 0 16px rgba(77, 180, 221, 0.34);
}

body.dark-mode .status-pill,
html.dark-mode .status-pill {
  border-color: rgba(101, 177, 216, 0.34);
  background: linear-gradient(145deg, rgba(10, 46, 71, 0.72), rgba(8, 35, 55, 0.72));
  color: rgba(223, 244, 255, 0.94);
}

body.dark-mode .status-pill.is-muted,
html.dark-mode .status-pill.is-muted {
  color: rgba(168, 210, 233, 0.86);
}

body.dark-mode .track-load-status.status-loading::before,
html.dark-mode .track-load-status.status-loading::before {
  border-color: rgba(116, 180, 220, 0.24);
  border-top-color: rgba(95, 187, 239, 0.96);
  border-right-color: rgba(89, 209, 176, 0.82);
}

body.dark-mode .track-load-status.status-ready::before,
html.dark-mode .track-load-status.status-ready::before {
  background: #49c8a1;
}

body.dark-mode .track-load-status.status-playing::before,
html.dark-mode .track-load-status.status-playing::before {
  background: #ffad6b;
}

body.dark-mode #abStatusDisplay,
html.dark-mode #abStatusDisplay,
body.dark-mode #metronomeStatusDisplay,
html.dark-mode #metronomeStatusDisplay {
  display: none !important;
}

body.dark-mode .modal-content,
html.dark-mode .modal-content {
  background: linear-gradient(180deg, rgba(14, 30, 46, 0.72), rgba(9, 24, 38, 0.64));
  color: #eaf4ff;
  border-color: rgba(168, 208, 236, 0.38);
  backdrop-filter: blur(18px) saturate(138%);
  -webkit-backdrop-filter: blur(18px) saturate(138%);
}

body.dark-mode .modal-content h2,
html.dark-mode .modal-content h2,
body.dark-mode .close-button,
html.dark-mode .close-button {
  color: #eaf4ff;
}

body.dark-mode .close-button,
html.dark-mode .close-button {
  border-color: rgba(167, 206, 235, 0.4);
  background: linear-gradient(145deg, rgba(34, 64, 90, 0.7), rgba(20, 42, 65, 0.62));
}

body.dark-mode .studio-control,
html.dark-mode .studio-control {
  background: linear-gradient(180deg, #203448, #1c3042);
  border-color: rgba(129, 166, 194, 0.22);
}

body.dark-mode .studio-control label,
body.dark-mode .studio-value,
html.dark-mode .studio-control label,
html.dark-mode .studio-value {
  color: #eaf4ff;
}

body.dark-mode .studio-subtitle,
html.dark-mode .studio-subtitle {
  color: rgba(216, 234, 248, 0.82);
}

body.dark-mode .studio-control select,
html.dark-mode .studio-control select {
  border-color: rgba(129, 166, 194, 0.26);
  background: #1a2c3e;
  color: #eaf4ff;
}

body.dark-mode .studio-mini-btn,
html.dark-mode .studio-mini-btn,
body.dark-mode .studio-reset-btn,
html.dark-mode .studio-reset-btn {
  background: #243645;
  border-color: rgba(129, 166, 194, 0.32);
  color: #eaf4ff;
}

body.dark-mode .upload-droparea,
html.dark-mode .upload-droparea {
  border-color: rgba(140, 187, 219, 0.4);
  background: linear-gradient(145deg, #223446, #1b2e40);
}

body.dark-mode .upload-droparea.highlight,
html.dark-mode .upload-droparea.highlight {
  border-color: rgba(89, 196, 172, 0.78);
  background: linear-gradient(145deg, #1f3e44, #1f3650);
}

body.dark-mode .upload-status-card,
html.dark-mode .upload-status-card {
  border-color: rgba(134, 170, 196, 0.3);
  background: linear-gradient(145deg, #1f3243, #21394e);
}

body.dark-mode .upload-status-head,
html.dark-mode .upload-status-head {
  color: #d8eaf8;
}

body.dark-mode .upload-progress-track,
html.dark-mode .upload-progress-track {
  background: rgba(165, 194, 215, 0.24);
}

body.dark-mode .upload-toast,
html.dark-mode .upload-toast {
  border-color: rgba(151, 181, 203, 0.34);
  background: linear-gradient(160deg, rgba(27, 43, 57, 0.99), rgba(21, 36, 49, 0.99));
  color: #e8f4ff;
}

body.dark-mode .upload-toast--success,
html.dark-mode .upload-toast--success {
  border-color: rgba(87, 197, 159, 0.52);
  background: linear-gradient(160deg, rgba(24, 59, 56, 0.99), rgba(20, 49, 54, 0.99));
}

body.dark-mode .upload-toast--error,
html.dark-mode .upload-toast--error {
  border-color: rgba(220, 108, 108, 0.5);
  background: linear-gradient(160deg, rgba(63, 30, 36, 0.99), rgba(49, 26, 31, 0.99));
}

body.dark-mode .upload-toast-message,
html.dark-mode .upload-toast-message {
  color: rgba(225, 239, 251, 0.9);
}

body.dark-mode .wave-upload-overlay__card,
html.dark-mode .wave-upload-overlay__card {
  border-color: rgba(133, 188, 221, 0.48);
  background: linear-gradient(165deg, rgba(15, 37, 53, 0.93), rgba(9, 25, 39, 0.91));
}

@keyframes wave-upload-pulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.07);
    filter: brightness(1.08);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Responsive */
@media (max-width: 1380px) {
  .navbar .container {
    padding-inline: 0.8rem;
  }

  .dropbtn {
    font-size: 0.78rem;
    padding-inline: 0.78rem;
  }

  .navbar-nav .nav-main-link {
    font-size: 0.76rem;
    padding-inline: 0.62rem;
  }

  .auth-user-label {
    max-width: 170px;
  }
}

@keyframes upload-indeterminate {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(280%);
  }
}

@keyframes upload-toast-in {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  .navbar-toggle {
    display: inline-flex;
  }

  .navbar-top-row,
  .navbar-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .navbar-right {
    display: none;
    width: 100%;
    margin-top: 0.24rem;
    padding-top: 0.64rem;
    border-top: 1px solid rgba(214, 232, 246, 0.28);
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    grid-column: 1 / -1;
  }

  .navbar-right.open {
    display: flex;
  }

  .nav-main-cluster,
  .audio-tools,
  .nav-utility-cluster,
  .dropdown,
  .dropbtn,
  .navbar-nav,
  .auth-nav {
    width: 100%;
  }

  .nav-main-cluster {
    flex-direction: column;
    align-items: stretch;
  }

  .audio-tools {
    display: flex;
    align-items: center;
    gap: 0.42rem;
  }

  .audio-tools .dropdown {
    flex: 1 1 auto;
    width: auto;
  }

  .audio-tools .dropbtn {
    width: 100%;
    justify-content: space-between;
  }

  .navbar-nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.42rem;
    background: transparent;
    border: 0;
    padding: 0;
  }

  .navbar-nav li {
    flex: 1 1 calc(50% - 0.42rem);
  }

  .navbar-nav .nav-main-link {
    width: 100%;
    justify-content: center;
    border-color: rgba(198, 222, 239, 0.32);
    background: rgba(255, 255, 255, 0.08);
  }

  .nav-utility-cluster {
    justify-content: flex-end;
  }

  .auth-nav {
    margin-left: 0;
    justify-content: space-between;
  }

  .dropdown-content {
    position: static;
    width: 100%;
    margin-top: 0.36rem;
  }

  .player-transport-row {
    grid-template-columns: 1fr;
    gap: 0.56rem;
  }

  .audio-controls-left,
  .audio-controls-right {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .navbar .container {
    padding: 0.56rem 0.58rem 0.68rem;
    gap: 0.62rem;
  }

  .brand-logo-shell {
    width: 39px;
    height: 39px;
    border-radius: 12px;
  }

  .brand-logo {
    width: 28px;
    height: 28px;
  }

  .brand-wordmark-main {
    font-size: 1.16rem;
  }

  .brand-wordmark-sub {
    display: none;
  }

  .icon-btn,
  .transport-btn {
    min-width: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 0.82rem;
  }

  .audio-upload-btn {
    min-width: 38px;
    width: 38px;
    padding: 0;
  }

  .audio-upload-label {
    display: none;
  }

  .dropbtn {
    min-height: 38px;
    font-size: 0.78rem;
  }

  .auth-user-label {
    max-width: 126px;
    font-size: 0.7rem;
  }

  .auth-action-btn {
    min-height: 36px;
    font-size: 0.72rem;
    padding-inline: 0.62rem;
  }

  #waveform {
    height: 62px;
  }

  .player-shell-toggle .toggle-label,
  .player-shell-state {
    display: none;
  }

  .studio-grid {
    grid-template-columns: 1fr;
  }

  #currentSongName {
    max-width: 56vw;
  }

  .status-pill,
  .now-playing-chip {
    font-size: 0.68rem;
    padding: 0.3rem 0.5rem;
  }

  .modal {
    padding: 0.74rem;
  }

  .modal-content {
    border-radius: 14px;
    padding: 1.14rem 0.88rem 0.9rem;
    max-height: calc(100dvh - 1.5rem);
  }

  .modal-content::before {
    border-radius: 14px 14px 0 0;
  }
}

/* Protect navbar controls from global button system overrides */
.navbar .dropbtn,
.navbar .icon-btn,
.navbar .transport-btn,
.navbar .player-shell-toggle,
.navbar .auth-action-btn,
.navbar .studio-mini-btn,
.navbar .studio-reset-btn {
  border: 1px solid var(--nav-border) !important;
  border-radius: 10px !important;
  color: var(--nav-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    var(--nav-surface) !important;
  box-shadow: var(--nav-shadow-soft) !important;
  font-weight: 760 !important;
  letter-spacing: 0.01em !important;
}

.navbar .dropbtn:hover,
.navbar .dropdown.open .dropbtn,
.navbar .icon-btn:hover,
.navbar .transport-btn:hover,
.navbar .player-shell-toggle:hover,
.navbar .auth-action-btn:hover,
.navbar .studio-mini-btn:hover,
.navbar .studio-reset-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07)),
    var(--nav-surface-hover) !important;
  border-color: var(--nav-border-hover) !important;
  box-shadow: 0 8px 18px rgba(3, 12, 20, 0.22), var(--nav-shadow-soft) !important;
}

.navbar .auth-nav--guest .auth-action-btn:last-child {
  border-color: var(--nav-border-hover) !important;
  background: var(--nav-cta-bg) !important;
  color: #eef9ff !important;
}

.navbar .transport-btn.primary {
  border-color: var(--nav-border-hover) !important;
  background: var(--nav-primary-btn-bg) !important;
  color: #f5fbff !important;
}

.navbar .transport-btn.active,
.navbar .studio-mini-btn.active {
  border-color: var(--nav-border-hover) !important;
  background: var(--nav-active-btn-bg) !important;
  color: #f4fbff !important;
  box-shadow: var(--nav-active-ring) !important;
}

/* Final navbar control polish */
.navbar .dropbtn,
.navbar .icon-btn,
.navbar .transport-btn,
.navbar .player-shell-toggle,
.navbar .auth-action-btn,
.navbar .studio-mini-btn,
.navbar .studio-reset-btn {
  border: 1px solid rgba(178, 209, 231, 0.38) !important;
  border-radius: 12px !important;
  color: #ecf7ff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02)),
    rgba(8, 26, 40, 0.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 7px 16px rgba(3, 12, 20, 0.24) !important;
  font-weight: 760 !important;
  letter-spacing: 0.012em !important;
}

.navbar .dropbtn:hover,
.navbar .dropdown.open .dropbtn,
.navbar .icon-btn:hover,
.navbar .transport-btn:hover,
.navbar .player-shell-toggle:hover,
.navbar .auth-action-btn:hover,
.navbar .studio-mini-btn:hover,
.navbar .studio-reset-btn:hover {
  border-color: rgba(208, 231, 246, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)),
    rgba(12, 33, 50, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 22px rgba(2, 11, 19, 0.28) !important;
  transform: translateY(-1px);
}

.navbar .dropbtn:active,
.navbar .icon-btn:active,
.navbar .transport-btn:active,
.navbar .player-shell-toggle:active,
.navbar .auth-action-btn:active,
.navbar .studio-mini-btn:active,
.navbar .studio-reset-btn:active {
  transform: translateY(0) scale(0.99);
}

.navbar .auth-nav--guest .auth-action-btn:last-child {
  border-color: rgba(191, 223, 242, 0.66) !important;
  background:
    linear-gradient(135deg, rgba(116, 189, 233, 0.3), rgba(95, 200, 233, 0.2)),
    rgba(9, 31, 48, 0.6) !important;
  color: #f4fbff !important;
}

.navbar .transport-btn.primary {
  border-color: rgba(193, 224, 242, 0.62) !important;
  background:
    linear-gradient(140deg, rgba(112, 189, 236, 0.35), rgba(95, 202, 231, 0.25)),
    rgba(10, 35, 52, 0.68) !important;
}

.navbar .transport-btn.active,
.navbar .studio-mini-btn.active {
  border-color: rgba(201, 230, 247, 0.78) !important;
  background:
    linear-gradient(145deg, rgba(135, 205, 244, 0.46), rgba(106, 191, 234, 0.36)),
    rgba(10, 37, 56, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(188, 223, 246, 0.42),
    0 0 16px rgba(106, 192, 236, 0.3) !important;
}

.navbar-nav .nav-main-link {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
}

.navbar-nav .nav-main-link:hover,
.navbar-nav .nav-main-link[aria-current="page"] {
  border-color: rgba(203, 228, 243, 0.44);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  color: #ffffff;
}

/* Navigation refinement: top-row controls */
.navbar .nav-main-cluster {
  gap: 0.72rem;
}

.navbar .audio-tools {
  padding: 0.2rem;
  border: 1px solid rgba(177, 211, 233, 0.34);
  border-radius: 14px;
  background:
    linear-gradient(175deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
    rgba(8, 29, 45, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(3, 12, 20, 0.18);
}

.navbar .dropbtn {
  min-height: 42px;
  border-radius: 12px !important;
  padding: 0 0.98rem !important;
  font-size: 0.82rem;
  font-weight: 790;
  letter-spacing: 0.02em;
  border-color: rgba(186, 217, 237, 0.42) !important;
  background:
    linear-gradient(150deg, rgba(69, 167, 216, 0.2), rgba(52, 191, 180, 0.14)),
    rgba(7, 31, 48, 0.55) !important;
}

.navbar .audio-upload-btn {
  min-width: 96px;
  width: auto;
  height: 42px;
  padding: 0 0.84rem !important;
  gap: 0.42rem;
  border-radius: 12px !important;
  border-color: rgba(192, 223, 241, 0.54) !important;
  background:
    linear-gradient(145deg, rgba(78, 181, 226, 0.3), rgba(48, 199, 170, 0.22)),
    rgba(7, 34, 53, 0.64) !important;
  color: #f4fbff !important;
}

.navbar .audio-upload-btn .audio-upload-label {
  display: inline;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.navbar .audio-upload-btn i {
  font-size: 0.86rem;
}

.navbar .navbar-nav {
  padding: 0.24rem;
  gap: 0.24rem;
  border-radius: 14px;
  border: 1px solid rgba(188, 216, 235, 0.34);
  background:
    linear-gradient(172deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)),
    rgba(8, 30, 46, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(3, 11, 19, 0.16);
}

.navbar .navbar-nav .nav-main-link {
  min-height: 39px;
  padding: 0.52rem 0.86rem;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(235, 246, 255, 0.92);
  font-size: 0.81rem;
  font-weight: 790;
  letter-spacing: 0.018em;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.navbar .navbar-nav .nav-main-link:hover {
  transform: translateY(-1px);
  border-color: rgba(198, 226, 243, 0.56);
  background:
    linear-gradient(160deg, rgba(122, 206, 246, 0.18), rgba(81, 199, 186, 0.12)),
    rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.navbar .navbar-nav .nav-main-link[aria-current="page"] {
  border-color: rgba(194, 229, 244, 0.72);
  background:
    linear-gradient(145deg, rgba(120, 198, 239, 0.34), rgba(82, 203, 183, 0.24)),
    rgba(10, 38, 58, 0.68);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(174, 219, 243, 0.32),
    0 8px 16px rgba(3, 12, 20, 0.2);
}

.navbar .dropdown-content a:hover {
  background: linear-gradient(150deg, rgba(117, 199, 241, 0.24), rgba(79, 198, 182, 0.16));
}

body.dark-mode .navbar .audio-tools,
html.dark-mode .navbar .audio-tools {
  border-color: rgba(97, 175, 218, 0.4);
  background:
    linear-gradient(170deg, rgba(72, 180, 217, 0.16), rgba(48, 176, 145, 0.1)),
    rgba(6, 33, 54, 0.72);
}

body.dark-mode .navbar .navbar-nav,
html.dark-mode .navbar .navbar-nav {
  border-color: rgba(102, 178, 219, 0.38);
  background:
    linear-gradient(170deg, rgba(66, 170, 210, 0.14), rgba(48, 174, 144, 0.08)),
    rgba(6, 34, 55, 0.62);
}

body.dark-mode .navbar .navbar-nav .nav-main-link:hover,
html.dark-mode .navbar .navbar-nav .nav-main-link:hover {
  border-color: rgba(123, 201, 230, 0.62);
  background:
    linear-gradient(158deg, rgba(78, 194, 230, 0.28), rgba(56, 197, 161, 0.18)),
    rgba(10, 49, 76, 0.72);
}

body.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"],
html.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"] {
  border-color: rgba(129, 212, 230, 0.72);
  background:
    linear-gradient(148deg, rgba(70, 188, 215, 0.44), rgba(56, 192, 154, 0.3)),
    rgba(9, 56, 82, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(108, 208, 190, 0.38),
    0 10px 18px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1120px) {
  .navbar .audio-upload-btn {
    min-width: 42px;
    width: 42px;
    padding: 0 !important;
    gap: 0;
  }

  .navbar .audio-upload-btn .audio-upload-label {
    display: none;
  }
}

/* Final theme convergence with global page tokens */
html:not(.dark-mode) .navbar {
  --nav-bg-1: #f3f8fd;
  --nav-bg-2: #eaf2fa;
  --nav-bg-3: #e1ebf7;
  --nav-text: #17364f;
  --nav-muted: #567188;
  --nav-border: rgba(86, 128, 161, 0.28);
  --nav-border-hover: rgba(62, 121, 159, 0.44);
  --nav-surface: rgba(255, 255, 255, 0.86);
  --nav-surface-hover: rgba(248, 252, 255, 0.96);
  --nav-panel: rgba(227, 238, 248, 0.7);
  --nav-shadow: 0 10px 24px rgba(8, 31, 49, 0.12);
  border-bottom-color: rgba(152, 184, 209, 0.42);
  background:
    radial-gradient(circle at 10% -24%, rgba(18, 127, 199, 0.16), transparent 44%),
    radial-gradient(circle at 94% 126%, rgba(25, 159, 145, 0.1), transparent 50%),
    linear-gradient(135deg, var(--nav-bg-1) 0%, var(--nav-bg-2) 54%, var(--nav-bg-3) 100%);
}

html.dark-mode .navbar {
  --nav-bg-1: #091a2b;
  --nav-bg-2: #10263c;
  --nav-bg-3: #15324a;
  --nav-text: #e9f4fc;
  --nav-muted: #a9c7db;
  --nav-border: rgba(100, 163, 199, 0.34);
  --nav-border-hover: rgba(129, 198, 227, 0.56);
  --nav-surface: rgba(10, 39, 61, 0.76);
  --nav-surface-hover: rgba(12, 52, 79, 0.9);
  --nav-panel: rgba(9, 34, 53, 0.76);
  --nav-shadow: 0 14px 30px rgba(0, 0, 0, 0.44);
  border-bottom-color: rgba(140, 188, 216, 0.26);
}

.navbar .audio-tools {
  border-color: var(--nav-border) !important;
  background:
    linear-gradient(170deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04)),
    var(--nav-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 18px rgba(3, 12, 20, 0.16) !important;
}

.navbar .dropbtn {
  min-height: 42px;
  padding: 0 0.98rem !important;
  font-size: 0.82rem;
  font-weight: 790;
  letter-spacing: 0.018em;
}

.navbar .audio-upload-btn {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  gap: 0;
  justify-content: center;
}

.navbar .audio-upload-btn .audio-upload-label {
  display: none !important;
}

.navbar .navbar-nav {
  border-color: var(--nav-border) !important;
  background:
    linear-gradient(172deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    var(--nav-surface) !important;
}

.navbar .navbar-nav .nav-main-link {
  color: var(--nav-text);
  border-color: transparent;
}

.navbar .navbar-nav .nav-main-link:hover {
  color: var(--nav-text);
  border-color: var(--nav-border-hover);
  background:
    linear-gradient(160deg, rgba(18, 127, 199, 0.18), rgba(25, 159, 145, 0.11)),
    rgba(255, 255, 255, 0.14);
}

.navbar .navbar-nav .nav-main-link[aria-current="page"] {
  color: var(--nav-text);
  border-color: var(--nav-border-hover);
  background:
    linear-gradient(145deg, rgba(18, 127, 199, 0.3), rgba(25, 159, 145, 0.2)),
    rgba(255, 255, 255, 0.22);
}

html.dark-mode .navbar .navbar-nav .nav-main-link {
  color: rgba(225, 241, 252, 0.92);
}

html.dark-mode .navbar .navbar-nav .nav-main-link:hover {
  color: #f2fbff;
  background:
    linear-gradient(158deg, rgba(99, 189, 233, 0.24), rgba(53, 185, 166, 0.16)),
    rgba(12, 58, 87, 0.74);
}

html.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"] {
  color: #ffffff;
  background:
    linear-gradient(148deg, rgba(99, 189, 233, 0.4), rgba(53, 185, 166, 0.28)),
    rgba(10, 63, 93, 0.88);
}

/* ==========================================================================
   Navbar Theme Finalization (warm palette, no blue bleed)
   ========================================================================== */
html:not(.dark-mode) .navbar {
  --nav-bg-1: #f7f0e9;
  --nav-bg-2: #efe3d8;
  --nav-bg-3: #e8d8c9;
  --nav-text: #3f291d;
  --nav-muted: #775947;
  --nav-border: rgba(126, 91, 67, 0.32);
  --nav-border-hover: rgba(146, 102, 73, 0.46);
  --nav-surface: rgba(255, 250, 245, 0.86);
  --nav-surface-hover: rgba(255, 246, 236, 0.96);
  --nav-panel: rgba(238, 224, 210, 0.72);
  --nav-shadow: 0 10px 24px rgba(62, 38, 23, 0.14);
  border-bottom-color: rgba(155, 118, 91, 0.34);
  background:
    radial-gradient(circle at 12% -22%, rgba(218, 154, 97, 0.18), transparent 44%),
    radial-gradient(circle at 94% 126%, rgba(189, 108, 81, 0.14), transparent 52%),
    linear-gradient(136deg, var(--nav-bg-1) 0%, var(--nav-bg-2) 54%, var(--nav-bg-3) 100%) !important;
}

html.dark-mode .navbar {
  --nav-bg-1: #18120f;
  --nav-bg-2: #221912;
  --nav-bg-3: #2b2018;
  --nav-text: #f3e4d5;
  --nav-muted: #c4a991;
  --nav-border: rgba(171, 124, 93, 0.36);
  --nav-border-hover: rgba(201, 152, 119, 0.56);
  --nav-surface: rgba(42, 30, 23, 0.82);
  --nav-surface-hover: rgba(56, 40, 31, 0.9);
  --nav-panel: rgba(34, 24, 18, 0.82);
  --nav-shadow: 0 14px 30px rgba(0, 0, 0, 0.46);
  border-bottom-color: rgba(160, 119, 88, 0.28);
  background:
    radial-gradient(circle at 12% -22%, rgba(190, 132, 85, 0.2), transparent 44%),
    radial-gradient(circle at 94% 126%, rgba(162, 88, 67, 0.16), transparent 52%),
    linear-gradient(136deg, var(--nav-bg-1) 0%, var(--nav-bg-2) 54%, var(--nav-bg-3) 100%) !important;
}

.navbar .navbar-nav {
  border-color: var(--nav-border) !important;
  background: var(--nav-surface) !important;
}

.navbar .navbar-nav .nav-main-link {
  color: var(--nav-text) !important;
}

.navbar .navbar-nav .nav-main-link:hover {
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 236, 224, 0.9)) !important;
  color: var(--nav-text) !important;
}

.navbar .navbar-nav .nav-main-link.is-active,
.navbar .navbar-nav .nav-main-link[aria-current="page"] {
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(242, 220, 200, 0.94), rgba(230, 198, 170, 0.94)) !important;
  color: #372116 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 2px 10px rgba(102, 61, 36, 0.18) !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link:hover {
  background: linear-gradient(180deg, rgba(87, 61, 45, 0.94), rgba(67, 47, 36, 0.94)) !important;
  color: #f8ecdf !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link.is-active,
html.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"] {
  background: linear-gradient(180deg, rgba(130, 87, 59, 0.96), rgba(104, 69, 47, 0.96)) !important;
  color: #fff5ec !important;
  box-shadow: inset 0 1px 0 rgba(255, 231, 209, 0.2), 0 2px 12px rgba(0, 0, 0, 0.26) !important;
}

.navbar .audio-tools {
  border-color: var(--nav-border) !important;
  background: var(--nav-surface) !important;
}

.navbar .dropbtn,
.navbar .audio-upload-btn,
.navbar .nav-utility-cluster > .icon-btn,
.navbar .auth-action-btn {
  border-color: var(--nav-border) !important;
  color: var(--nav-text) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 231, 218, 0.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 6px 14px rgba(67, 39, 23, 0.14) !important;
}

.navbar .dropbtn:hover,
.navbar .audio-upload-btn:hover,
.navbar .nav-utility-cluster > .icon-btn:hover,
.navbar .auth-action-btn:hover {
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 221, 205, 0.96)) !important;
}

html.dark-mode .navbar .dropbtn,
html.dark-mode .navbar .audio-upload-btn,
html.dark-mode .navbar .nav-utility-cluster > .icon-btn,
html.dark-mode .navbar .auth-action-btn {
  background: linear-gradient(180deg, rgba(77, 54, 40, 0.92), rgba(58, 40, 30, 0.92)) !important;
  color: #f3e4d5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 223, 197, 0.14), 0 8px 16px rgba(0, 0, 0, 0.32) !important;
}

html.dark-mode .navbar .dropbtn:hover,
html.dark-mode .navbar .audio-upload-btn:hover,
html.dark-mode .navbar .nav-utility-cluster > .icon-btn:hover,
html.dark-mode .navbar .auth-action-btn:hover {
  background: linear-gradient(180deg, rgba(94, 66, 49, 0.94), rgba(70, 49, 36, 0.94)) !important;
}

.navbar #waveform {
  border-color: rgba(171, 124, 92, 0.34) !important;
  background:
    radial-gradient(circle at 12% -64%, rgba(197, 140, 91, 0.14), transparent 46%),
    linear-gradient(156deg, rgba(49, 34, 25, 0.94), rgba(37, 26, 20, 0.95)) !important;
}

.navbar .status-pill,
.navbar .now-playing-chip {
  border-color: rgba(167, 122, 91, 0.34) !important;
  background: rgba(255, 247, 238, 0.64) !important;
  color: #4b3223 !important;
}

html.dark-mode .navbar .status-pill,
html.dark-mode .navbar .now-playing-chip {
  border-color: rgba(166, 123, 92, 0.44) !important;
  background: rgba(56, 39, 29, 0.72) !important;
  color: #f0dfd0 !important;
}

/* ==========================================================================
   Navbar v2 (clean, deterministic, less visual noise)
   ========================================================================== */
.navbar .container {
  padding-top: 0.62rem;
  padding-bottom: 0.72rem;
}

.navbar-top-row {
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  gap: 0.82rem;
}

.navbar-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
}

.nav-main-cluster {
  min-width: 0;
  justify-content: center;
}

.navbar-nav {
  padding: 0.18rem;
  gap: 0.18rem;
  border-radius: 14px;
  border: 1px solid rgba(164, 194, 217, 0.44);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.navbar-nav .nav-main-link {
  min-height: 38px;
  padding: 0.45rem 0.82rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #284760;
  font-size: 0.78rem;
  font-weight: 770;
  letter-spacing: 0.02em;
  transition: border-color 110ms ease, background-color 110ms ease, color 110ms ease, box-shadow 110ms ease;
}

.navbar-nav .nav-main-link:hover {
  border-color: rgba(125, 169, 198, 0.54);
  background: linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(234, 245, 252, 0.98));
  color: #173d5a;
}

.navbar-nav .nav-main-link.is-active,
.navbar-nav .nav-main-link[aria-current="page"] {
  border-color: rgba(91, 150, 186, 0.62);
  background: linear-gradient(180deg, rgba(238, 247, 254, 0.98), rgba(223, 239, 250, 0.98));
  color: #0f3550;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 8px rgba(34, 88, 122, 0.14);
}

.nav-utility-cluster {
  gap: 0.48rem;
}

.audio-tools {
  padding: 0.18rem;
  border-radius: 12px;
  border: 1px solid rgba(166, 198, 220, 0.44);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  gap: 0.34rem;
}

.audio-tools .dropbtn,
.audio-tools .audio-upload-btn {
  min-height: 38px;
  height: 38px;
  border-radius: 10px !important;
  font-size: 0.76rem;
}

.audio-tools .dropbtn {
  padding-inline: 0.74rem !important;
}

.audio-tools .audio-upload-btn {
  width: auto;
  min-width: 38px;
  padding: 0 0.62rem !important;
  gap: 0.34rem;
}

.audio-upload-label {
  display: inline;
  font-size: 0.72rem;
  font-weight: 770;
  letter-spacing: 0.02em;
}

.nav-utility-cluster > .icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px !important;
}

.auth-nav {
  margin-left: 0;
  gap: 0.34rem;
}

.auth-user-label {
  background: rgba(255, 255, 255, 0.7);
  color: #28465e;
  border-color: rgba(157, 191, 214, 0.54);
}

.auth-action-btn {
  min-height: 38px;
  border-radius: 10px !important;
  font-size: 0.74rem;
}

.navbar.is-navigating .navbar-nav .nav-main-link {
  transition: none;
}

html.dark-mode .navbar .navbar-nav {
  border-color: rgba(86, 148, 184, 0.48);
  background: rgba(8, 34, 54, 0.6);
  box-shadow: inset 0 1px 0 rgba(167, 210, 236, 0.12);
}

html.dark-mode .navbar .navbar-nav .nav-main-link {
  color: rgba(218, 235, 247, 0.94);
}

html.dark-mode .navbar .navbar-nav .nav-main-link:hover {
  border-color: rgba(108, 182, 222, 0.66);
  background: linear-gradient(180deg, rgba(25, 61, 87, 0.96), rgba(19, 52, 74, 0.96));
  color: #f1f9ff;
}

html.dark-mode .navbar .navbar-nav .nav-main-link.is-active,
html.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"] {
  border-color: rgba(117, 197, 227, 0.72);
  background: linear-gradient(180deg, rgba(34, 86, 120, 0.95), rgba(26, 69, 98, 0.95));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(214, 238, 255, 0.14), 0 2px 10px rgba(0, 0, 0, 0.28);
}

html.dark-mode .navbar .audio-tools {
  border-color: rgba(91, 155, 192, 0.52);
  background: rgba(8, 36, 57, 0.62);
}

html.dark-mode .navbar .auth-user-label {
  background: rgba(11, 43, 66, 0.66);
  color: #d9edf9;
  border-color: rgba(106, 174, 214, 0.5);
}

@media (max-width: 1120px) {
  .navbar-right {
    display: none;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.56rem;
    width: 100%;
    margin-top: 0.2rem;
    padding-top: 0.58rem;
    border-top: 1px solid rgba(167, 196, 217, 0.42);
  }

  .navbar-right.open {
    display: grid;
  }

  .nav-main-cluster,
  .nav-utility-cluster,
  .auth-nav {
    width: 100%;
  }

  .nav-main-cluster {
    justify-content: stretch;
  }

  .navbar-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.36rem;
    padding: 0.22rem;
  }

  .navbar-nav li {
    width: 100%;
  }

  .navbar-nav .nav-main-link {
    width: 100%;
    justify-content: center;
  }

  .nav-utility-cluster {
    justify-content: space-between;
  }

  .audio-tools {
    flex: 1 1 auto;
  }

  .audio-tools .dropbtn {
    min-width: 0;
    width: 100%;
    justify-content: space-between;
  }

  .audio-tools .audio-upload-btn {
    min-width: 38px;
    width: 38px;
    padding: 0 !important;
  }

  .audio-upload-label {
    display: none;
  }

  .auth-nav {
    justify-content: space-between;
  }
}

@media (max-width: 760px) {
  .navbar-nav {
    grid-template-columns: 1fr 1fr;
  }

  .navbar-nav .nav-main-link {
    min-height: 36px;
    font-size: 0.74rem;
  }
}

/* Strong final pass so legacy navbar rules cannot leak through */
.navbar-top-row .navbar-nav .nav-main-link {
  border-radius: 10px !important;
}

.navbar-top-row .audio-tools .dropbtn,
.navbar-top-row .audio-tools .audio-upload-btn,
.navbar-top-row .nav-utility-cluster > .icon-btn,
.navbar-top-row .auth-action-btn {
  border: 1px solid rgba(152, 187, 211, 0.54) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 246, 253, 0.96)) !important;
  color: #1f4865 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 3px 10px rgba(25, 71, 102, 0.14) !important;
}

.navbar-top-row .audio-tools .dropbtn:hover,
.navbar-top-row .audio-tools .audio-upload-btn:hover,
.navbar-top-row .nav-utility-cluster > .icon-btn:hover,
.navbar-top-row .auth-action-btn:hover {
  border-color: rgba(112, 160, 193, 0.66) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(230, 244, 252, 0.98)) !important;
  color: #153f5c !important;
}

html.dark-mode .navbar-top-row .audio-tools .dropbtn,
html.dark-mode .navbar-top-row .audio-tools .audio-upload-btn,
html.dark-mode .navbar-top-row .nav-utility-cluster > .icon-btn,
html.dark-mode .navbar-top-row .auth-action-btn {
  border-color: rgba(101, 166, 205, 0.58) !important;
  background: linear-gradient(180deg, rgba(26, 66, 95, 0.95), rgba(19, 53, 77, 0.95)) !important;
  color: #e9f6ff !important;
  box-shadow: inset 0 1px 0 rgba(206, 233, 250, 0.12), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .navbar-top-row .audio-tools .dropbtn:hover,
html.dark-mode .navbar-top-row .audio-tools .audio-upload-btn:hover,
html.dark-mode .navbar-top-row .nav-utility-cluster > .icon-btn:hover,
html.dark-mode .navbar-top-row .auth-action-btn:hover {
  border-color: rgba(133, 198, 229, 0.74) !important;
  background: linear-gradient(180deg, rgba(33, 80, 114, 0.96), rgba(24, 64, 92, 0.96)) !important;
  color: #f5fbff !important;
}

.navbar.is-navigating .navbar-top-row * {
  transition: none !important;
}

/* ==========================================================================
   Theme Consolidation (final deterministic pass)
   ========================================================================== */
.navbar {
  border-bottom: 1px solid rgba(157, 186, 209, 0.44) !important;
  box-shadow: 0 10px 24px rgba(7, 26, 43, 0.18) !important;
  backdrop-filter: blur(12px);
}

html:not(.dark-mode) .navbar {
  --nav-bg-1: #f2f6fb;
  --nav-bg-2: #e7eff8;
  --nav-bg-3: #e2ecf7;
  --nav-text: #18384f;
  --nav-muted: #5e7286;
  --nav-border: rgba(128, 161, 187, 0.44);
  --nav-border-hover: rgba(90, 133, 166, 0.62);
  --nav-surface: rgba(255, 255, 255, 0.9);
  --nav-surface-hover: rgba(255, 255, 255, 0.98);
  --nav-panel: rgba(233, 241, 249, 0.78);
  --nav-shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --nav-accent: #d87724;
  --nav-accent-soft: #b95f19;
  --nav-cta-bg:
    linear-gradient(150deg, rgba(229, 133, 48, 0.95), rgba(184, 91, 24, 0.96)),
    rgba(255, 255, 255, 0.95);
  --nav-primary-btn-bg:
    linear-gradient(145deg, rgba(229, 133, 48, 0.95), rgba(184, 91, 24, 0.96)),
    rgba(255, 255, 255, 0.95);
  --nav-active-btn-bg:
    linear-gradient(145deg, rgba(237, 154, 79, 0.95), rgba(197, 101, 29, 0.96)),
    rgba(255, 255, 255, 0.95);
  --nav-active-ring: 0 0 0 2px rgba(222, 126, 41, 0.28), 0 0 14px rgba(222, 126, 41, 0.22);
  background:
    radial-gradient(circle at 9% -18%, rgba(31, 63, 97, 0.16), transparent 42%),
    radial-gradient(circle at 92% 136%, rgba(223, 122, 36, 0.16), transparent 52%),
    linear-gradient(140deg, var(--nav-bg-1), var(--nav-bg-2) 54%, var(--nav-bg-3)) !important;
}

html.dark-mode .navbar {
  --nav-bg-1: #0a0a0a;
  --nav-bg-2: #121212;
  --nav-bg-3: #171717;
  --nav-text: #f5f4f2;
  --nav-muted: #c1beb8;
  --nav-border: rgba(106, 84, 64, 0.54);
  --nav-border-hover: rgba(156, 117, 82, 0.72);
  --nav-surface: rgba(25, 22, 19, 0.9);
  --nav-surface-hover: rgba(32, 28, 24, 0.96);
  --nav-panel: rgba(20, 18, 16, 0.9);
  --nav-shadow-soft: inset 0 1px 0 rgba(255, 194, 127, 0.1);
  --nav-accent: #f29a44;
  --nav-accent-soft: #d67b2b;
  --nav-cta-bg:
    linear-gradient(150deg, rgba(235, 144, 63, 0.95), rgba(179, 92, 31, 0.96)),
    rgba(28, 24, 20, 0.95);
  --nav-primary-btn-bg:
    linear-gradient(150deg, rgba(235, 144, 63, 0.95), rgba(179, 92, 31, 0.96)),
    rgba(28, 24, 20, 0.95);
  --nav-active-btn-bg:
    linear-gradient(150deg, rgba(245, 163, 89, 0.95), rgba(194, 104, 35, 0.96)),
    rgba(32, 27, 23, 0.96);
  --nav-active-ring: 0 0 0 2px rgba(245, 163, 89, 0.32), 0 0 14px rgba(245, 163, 89, 0.26);
  border-bottom-color: rgba(143, 107, 74, 0.44) !important;
  background:
    radial-gradient(circle at 9% -18%, rgba(242, 154, 68, 0.18), transparent 42%),
    radial-gradient(circle at 92% 136%, rgba(242, 154, 68, 0.1), transparent 52%),
    linear-gradient(140deg, var(--nav-bg-1), var(--nav-bg-2) 54%, var(--nav-bg-3)) !important;
}

.navbar .brand-logo-shell {
  border-color: rgba(153, 182, 205, 0.54) !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(223, 122, 36, 0.16), transparent 58%),
    linear-gradient(145deg, rgba(250, 253, 255, 0.95), rgba(236, 245, 252, 0.96)) !important;
  box-shadow: 0 8px 16px rgba(8, 30, 48, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html.dark-mode .navbar .brand-logo-shell {
  border-color: rgba(143, 107, 74, 0.58) !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(242, 154, 68, 0.2), transparent 58%),
    linear-gradient(145deg, rgba(30, 25, 22, 0.98), rgba(21, 18, 16, 0.98)) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 195, 132, 0.14) !important;
}

.navbar .brand-wordmark-main {
  color: var(--nav-text) !important;
}

.navbar .brand-wordmark-sub {
  color: var(--nav-muted) !important;
}

.navbar .navbar-nav {
  border: 1px solid var(--nav-border) !important;
  border-radius: 14px !important;
  background: var(--nav-surface) !important;
  box-shadow: var(--nav-shadow-soft), 0 8px 16px rgba(8, 29, 45, 0.12) !important;
}

.navbar .navbar-nav .nav-main-link {
  color: var(--nav-text) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-weight: 780;
}

.navbar .navbar-nav .nav-main-link:hover {
  color: var(--nav-text) !important;
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 252, 255, 0.85)) !important;
}

.navbar .navbar-nav .nav-main-link[aria-current="page"] {
  color: var(--nav-text) !important;
  border-color: var(--nav-border-hover) !important;
  background:
    linear-gradient(180deg, rgba(239, 246, 252, 0.98), rgba(229, 241, 251, 0.98)) !important;
  box-shadow: 0 4px 12px rgba(17, 58, 87, 0.14) !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link:hover {
  background: linear-gradient(180deg, rgba(46, 38, 31, 0.96), rgba(34, 29, 24, 0.96)) !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"] {
  background:
    linear-gradient(180deg, rgba(235, 144, 63, 0.3), rgba(186, 97, 31, 0.32)),
    rgba(36, 30, 25, 0.95) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34) !important;
}

.navbar .audio-tools {
  border: 1px solid var(--nav-border) !important;
  background: var(--nav-surface) !important;
  box-shadow: var(--nav-shadow-soft) !important;
}

.navbar .dropbtn,
.navbar .icon-btn,
.navbar .transport-btn,
.navbar .player-shell-toggle,
.navbar .auth-action-btn,
.navbar .studio-mini-btn,
.navbar .studio-reset-btn {
  border: 1px solid var(--nav-border) !important;
  color: var(--nav-text) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 250, 255, 0.75)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 14px rgba(8, 29, 45, 0.14) !important;
}

html.dark-mode .navbar .dropbtn,
html.dark-mode .navbar .icon-btn,
html.dark-mode .navbar .transport-btn,
html.dark-mode .navbar .player-shell-toggle,
html.dark-mode .navbar .auth-action-btn,
html.dark-mode .navbar .studio-mini-btn,
html.dark-mode .navbar .studio-reset-btn {
  background: linear-gradient(180deg, rgba(44, 37, 31, 0.92), rgba(30, 26, 22, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 195, 132, 0.12), 0 8px 16px rgba(0, 0, 0, 0.34) !important;
}

.navbar .dropbtn:hover,
.navbar .dropdown.open .dropbtn,
.navbar .icon-btn:hover,
.navbar .transport-btn:hover,
.navbar .player-shell-toggle:hover,
.navbar .auth-action-btn:hover,
.navbar .studio-mini-btn:hover,
.navbar .studio-reset-btn:hover {
  border-color: var(--nav-border-hover) !important;
  transform: translateY(-1px);
}

.navbar .auth-nav--guest .auth-action-btn:last-child,
.navbar .transport-btn.primary,
.navbar .transport-btn.active,
.navbar .studio-mini-btn.active {
  border-color: transparent !important;
  color: #fff9f4 !important;
  background: var(--nav-primary-btn-bg) !important;
  box-shadow: var(--nav-active-ring) !important;
}

.navbar .dropdown-content {
  border-color: var(--nav-border) !important;
  background: var(--nav-surface) !important;
  box-shadow: 0 12px 24px rgba(3, 12, 20, 0.24) !important;
}

.navbar .dropdown-content a,
.navbar .dropdown-content span {
  color: var(--nav-text) !important;
}

.navbar .dropdown-content a:hover {
  background: rgba(223, 122, 36, 0.12) !important;
}

html.dark-mode .navbar .dropdown-content a:hover {
  background: rgba(242, 154, 68, 0.16) !important;
}

.navbar-player-shell {
  border: 1px solid var(--nav-border) !important;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.72), rgba(236, 245, 252, 0.74)),
    var(--nav-panel) !important;
}

html.dark-mode .navbar-player-shell {
  background:
    linear-gradient(165deg, rgba(34, 29, 24, 0.9), rgba(22, 19, 16, 0.92)),
    var(--nav-panel) !important;
}

#waveform {
  border-color: var(--nav-border) !important;
  background:
    linear-gradient(160deg, rgba(249, 252, 255, 0.96), rgba(237, 246, 252, 0.98)) !important;
}

html.dark-mode #waveform {
  background:
    linear-gradient(160deg, rgba(28, 25, 22, 0.96), rgba(21, 19, 17, 0.98)) !important;
}

.status-pill,
.now-playing-chip {
  border-color: var(--nav-border) !important;
  color: var(--nav-text) !important;
  background: rgba(255, 255, 255, 0.75) !important;
}

html.dark-mode .status-pill,
html.dark-mode .now-playing-chip {
  background: rgba(41, 34, 28, 0.78) !important;
}

@media (max-width: 1120px) {
  .navbar-right {
    border-top-color: var(--nav-border) !important;
  }

  .nav-utility-cluster {
    justify-content: space-between !important;
  }

  .audio-tools {
    flex: 1 1 auto;
  }
}

@media (max-width: 760px) {
  .navbar .container {
    padding-inline: 0.56rem;
  }

  .navbar .dropbtn,
  .navbar .icon-btn,
  .navbar .transport-btn,
  .navbar .player-shell-toggle,
  .navbar .auth-action-btn {
    min-height: 37px;
    height: 37px;
  }
}

/* ==========================================================================
   Final Dark Mode Override (authoritative, keep warm palette)
   ========================================================================== */
html.dark-mode .navbar {
  --nav-bg-1: #17110e !important;
  --nav-bg-2: #211710 !important;
  --nav-bg-3: #291d14 !important;
  --nav-text: #f4e6d8 !important;
  --nav-muted: #c7ac94 !important;
  --nav-border: rgba(169, 123, 91, 0.42) !important;
  --nav-border-hover: rgba(206, 154, 118, 0.62) !important;
  --nav-surface: rgba(44, 31, 23, 0.86) !important;
  --nav-surface-hover: rgba(58, 41, 31, 0.92) !important;
  --nav-panel: rgba(34, 24, 18, 0.86) !important;
  --nav-primary-btn-bg:
    linear-gradient(150deg, rgba(233, 145, 72, 0.96), rgba(177, 92, 34, 0.97)),
    rgba(30, 23, 18, 0.95) !important;
  --nav-active-btn-bg:
    linear-gradient(150deg, rgba(245, 163, 92, 0.96), rgba(192, 105, 42, 0.97)),
    rgba(34, 25, 19, 0.96) !important;
  --nav-active-ring: 0 0 0 2px rgba(245, 163, 92, 0.3), 0 0 16px rgba(245, 163, 92, 0.24) !important;
  border-bottom-color: rgba(161, 117, 84, 0.36) !important;
  background:
    radial-gradient(circle at 11% -20%, rgba(229, 145, 74, 0.2), transparent 44%),
    radial-gradient(circle at 93% 130%, rgba(183, 94, 56, 0.16), transparent 52%),
    linear-gradient(140deg, var(--nav-bg-1), var(--nav-bg-2) 54%, var(--nav-bg-3)) !important;
}

html.dark-mode .navbar .navbar-nav {
  border-color: var(--nav-border) !important;
  background: var(--nav-surface) !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link {
  color: var(--nav-text) !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link:hover {
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(86, 60, 44, 0.95), rgba(66, 45, 33, 0.95)) !important;
  color: #fff4e8 !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link.is-active,
html.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"] {
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(139, 94, 65, 0.97), rgba(112, 73, 50, 0.97)) !important;
  color: #fff7ef !important;
  box-shadow: inset 0 1px 0 rgba(255, 229, 204, 0.2), 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .navbar .audio-tools,
html.dark-mode .navbar .dropdown-content {
  border-color: var(--nav-border) !important;
  background: var(--nav-surface) !important;
}

html.dark-mode .navbar .dropbtn,
html.dark-mode .navbar .icon-btn,
html.dark-mode .navbar .transport-btn,
html.dark-mode .navbar .player-shell-toggle,
html.dark-mode .navbar .auth-action-btn,
html.dark-mode .navbar .studio-mini-btn,
html.dark-mode .navbar .studio-reset-btn {
  border-color: var(--nav-border) !important;
  color: var(--nav-text) !important;
  background: linear-gradient(180deg, rgba(79, 55, 40, 0.93), rgba(58, 40, 30, 0.93)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 208, 168, 0.13), 0 8px 16px rgba(0, 0, 0, 0.34) !important;
}

html.dark-mode .navbar .dropbtn:hover,
html.dark-mode .navbar .icon-btn:hover,
html.dark-mode .navbar .transport-btn:hover,
html.dark-mode .navbar .player-shell-toggle:hover,
html.dark-mode .navbar .auth-action-btn:hover,
html.dark-mode .navbar .studio-mini-btn:hover,
html.dark-mode .navbar .studio-reset-btn:hover {
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(95, 67, 49, 0.95), rgba(70, 49, 36, 0.95)) !important;
}

html.dark-mode .navbar #waveform {
  border-color: rgba(164, 119, 87, 0.44) !important;
  background:
    radial-gradient(circle at 10% -68%, rgba(232, 147, 76, 0.14), transparent 46%),
    linear-gradient(160deg, rgba(36, 27, 22, 0.96), rgba(25, 19, 15, 0.98)) !important;
}

html.dark-mode .navbar .status-pill,
html.dark-mode .navbar .now-playing-chip {
  border-color: rgba(165, 120, 88, 0.42) !important;
  background: rgba(57, 39, 29, 0.76) !important;
  color: #f3e2d2 !important;
}

/* ==========================================================================
   Navbar UX Pass (final)
   Better spacing, bigger hit-areas, calmer visuals, stable mobile toggle
   ========================================================================== */
.navbar {
  --nav-hit-size: 42px;
  --nav-radius-md: 12px;
  --nav-radius-sm: 10px;
}

html:not(.dark-mode) .navbar {
  --nav-bg-1: #eef5fc !important;
  --nav-bg-2: #e4eef9 !important;
  --nav-bg-3: #dde9f6 !important;
  --nav-text: #17364d !important;
  --nav-muted: #5a7185 !important;
  --nav-border: rgba(126, 156, 181, 0.45) !important;
  --nav-border-hover: rgba(93, 137, 168, 0.62) !important;
  --nav-surface: rgba(255, 255, 255, 0.9) !important;
  --nav-surface-hover: rgba(255, 255, 255, 0.98) !important;
  --nav-panel: rgba(233, 242, 251, 0.78) !important;
}

html.dark-mode .navbar {
  --nav-bg-1: #071723 !important;
  --nav-bg-2: #0a2332 !important;
  --nav-bg-3: #0b2d3e !important;
  --nav-text: #e8f4ff !important;
  --nav-muted: #a9c4d8 !important;
  --nav-border: rgba(93, 146, 176, 0.46) !important;
  --nav-border-hover: rgba(119, 182, 206, 0.68) !important;
  --nav-surface: rgba(9, 32, 46, 0.84) !important;
  --nav-surface-hover: rgba(12, 40, 57, 0.92) !important;
  --nav-panel: rgba(8, 29, 42, 0.82) !important;
  --nav-primary-btn-bg:
    linear-gradient(145deg, rgba(46, 183, 174, 0.86), rgba(34, 143, 199, 0.86)),
    rgba(10, 35, 51, 0.94) !important;
  --nav-active-btn-bg:
    linear-gradient(145deg, rgba(56, 198, 188, 0.9), rgba(40, 164, 219, 0.9)),
    rgba(11, 37, 53, 0.95) !important;
  --nav-active-ring: 0 0 0 2px rgba(88, 187, 204, 0.3), 0 0 16px rgba(62, 176, 195, 0.24) !important;
  background:
    radial-gradient(circle at 10% -18%, rgba(54, 163, 209, 0.18), transparent 46%),
    radial-gradient(circle at 92% 132%, rgba(30, 168, 140, 0.14), transparent 52%),
    linear-gradient(140deg, var(--nav-bg-1), var(--nav-bg-2) 52%, var(--nav-bg-3)) !important;
}

.navbar .container {
  width: min(100%, 1660px) !important;
  padding: 0.66rem clamp(0.6rem, 1.2vw, 1rem) 0.82rem !important;
  gap: 0.72rem !important;
}

.navbar-top-row {
  gap: clamp(0.48rem, 0.9vw, 0.86rem) !important;
  align-items: center !important;
}

.navbar-right {
  gap: 0.62rem !important;
  align-items: center !important;
}

.nav-main-cluster {
  gap: 0.58rem !important;
}

.navbar .navbar-nav {
  padding: 0.26rem !important;
  gap: 0.28rem !important;
  border-radius: 13px !important;
}

.navbar .navbar-nav .nav-main-link {
  min-height: var(--nav-hit-size) !important;
  padding: 0 0.9rem !important;
  border-radius: var(--nav-radius-sm) !important;
  font-size: 0.8rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.014em !important;
  line-height: 1 !important;
  white-space: nowrap;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease !important;
}

.navbar .navbar-nav .nav-main-link:hover,
.navbar .navbar-nav .nav-main-link.is-active,
.navbar .navbar-nav .nav-main-link[aria-current="page"] {
  transform: none !important;
}

.navbar-top-row .audio-tools {
  gap: 0.44rem !important;
  padding: 0.22rem !important;
  border-radius: var(--nav-radius-md) !important;
}

.navbar-top-row .dropbtn,
.navbar-top-row .audio-upload-btn,
.navbar-top-row .nav-utility-cluster > .icon-btn,
.navbar-top-row .auth-action-btn {
  min-height: var(--nav-hit-size) !important;
  height: var(--nav-hit-size) !important;
  border-radius: var(--nav-radius-sm) !important;
}

.navbar-top-row .dropbtn {
  padding: 0 0.92rem !important;
  font-size: 0.8rem !important;
}

.navbar-top-row .audio-upload-btn,
.navbar-top-row .nav-utility-cluster > .icon-btn {
  width: var(--nav-hit-size) !important;
  min-width: var(--nav-hit-size) !important;
}

.navbar .auth-user-label {
  min-height: var(--nav-hit-size) !important;
  display: inline-flex;
  align-items: center;
  padding: 0 0.68rem !important;
}

.navbar .dropdown-content {
  top: calc(100% + 0.5rem) !important;
  width: min(360px, 90vw) !important;
  max-height: min(420px, 52vh) !important;
  border-radius: 12px !important;
  overscroll-behavior: contain;
}

.navbar .dropdown-content a,
.navbar .dropdown-content span {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0.48rem 0.64rem !important;
}

.navbar-toggle {
  width: 44px !important;
  height: 42px !important;
  border-radius: 12px !important;
}

.navbar-toggle .hamburger {
  transition: transform 140ms ease, opacity 120ms ease;
}

.navbar-toggle[aria-expanded="true"] .hamburger:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.navbar-toggle[aria-expanded="true"] .hamburger:nth-child(2) {
  opacity: 0;
}

.navbar-toggle[aria-expanded="true"] .hamburger:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.navbar.is-navigating .navbar-nav .nav-main-link,
.navbar.is-navigating .dropbtn,
.navbar.is-navigating .icon-btn,
.navbar.is-navigating .auth-action-btn {
  pointer-events: none;
  opacity: 0.84;
}

@media (max-width: 1120px) {
  .navbar-top-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .brand-zone {
    gap: 0.54rem !important;
  }

  .navbar-right {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.62rem !important;
    width: 100%;
    margin-top: 0.28rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    padding: 0 0.68rem;
    border: 1px solid transparent;
    border-radius: 14px;
    transition:
      max-height 180ms ease,
      opacity 160ms ease,
      padding 160ms ease,
      border-color 160ms ease;
  }

  .navbar-right.open {
    max-height: 560px;
    opacity: 1;
    pointer-events: auto;
    padding: 0.76rem;
    border-color: var(--nav-border);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(241, 248, 253, 0.58));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 24px rgba(8, 28, 42, 0.16);
  }

  html.dark-mode .navbar-right.open {
    background: linear-gradient(165deg, rgba(10, 34, 49, 0.9), rgba(10, 30, 44, 0.9));
    box-shadow: inset 0 1px 0 rgba(171, 215, 240, 0.1), 0 12px 26px rgba(0, 0, 0, 0.32);
  }

  .nav-main-cluster,
  .nav-utility-cluster,
  .auth-nav {
    width: 100% !important;
  }

  .navbar-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;
  }

  .navbar-nav .nav-main-link {
    width: 100%;
    min-height: 44px !important;
    font-size: 0.79rem !important;
  }

  .nav-utility-cluster {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.46rem !important;
  }

  .audio-tools {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--nav-hit-size);
    align-items: stretch;
    gap: 0.44rem !important;
  }

  .audio-tools .dropbtn {
    width: 100% !important;
    justify-content: space-between;
  }

  .auth-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.44rem !important;
    margin-left: 0 !important;
  }

  .auth-user-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .navbar .container {
    padding-inline: 0.52rem !important;
  }

  .navbar-nav {
    grid-template-columns: 1fr 1fr !important;
  }

  .navbar-nav .nav-main-link {
    min-height: 42px !important;
    font-size: 0.76rem !important;
    padding-inline: 0.56rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar *,
  .navbar::before,
  .navbar::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Final Color Direction: Index Blue (override legacy warm rules)
   ========================================================================== */
html:not(.dark-mode) .navbar {
  --nav-bg-1: #eff5fb !important;
  --nav-bg-2: #e6eff9 !important;
  --nav-bg-3: #dde9f6 !important;
  --nav-text: #17384f !important;
  --nav-muted: #567188 !important;
  --nav-border: rgba(126, 162, 189, 0.44) !important;
  --nav-border-hover: rgba(89, 142, 177, 0.62) !important;
  --nav-surface: rgba(255, 255, 255, 0.9) !important;
  --nav-surface-hover: rgba(250, 254, 255, 0.98) !important;
  --nav-panel: rgba(229, 239, 249, 0.78) !important;
  --nav-shadow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  --nav-accent: #3e93c9 !important;
  --nav-accent-soft: #2f79ad !important;
  --nav-cta-bg:
    linear-gradient(145deg, rgba(92, 171, 220, 0.94), rgba(57, 137, 192, 0.96)),
    rgba(255, 255, 255, 0.95) !important;
  --nav-primary-btn-bg:
    linear-gradient(145deg, rgba(92, 171, 220, 0.94), rgba(57, 137, 192, 0.96)),
    rgba(255, 255, 255, 0.95) !important;
  --nav-active-btn-bg:
    linear-gradient(145deg, rgba(120, 194, 236, 0.95), rgba(69, 151, 207, 0.96)),
    rgba(255, 255, 255, 0.95) !important;
  --nav-active-ring: 0 0 0 2px rgba(82, 166, 219, 0.28), 0 0 14px rgba(82, 166, 219, 0.24) !important;
  border-bottom-color: rgba(142, 178, 204, 0.44) !important;
  background:
    radial-gradient(circle at 9% -18%, rgba(31, 63, 97, 0.16), transparent 42%),
    radial-gradient(circle at 92% 136%, rgba(62, 147, 201, 0.14), transparent 52%),
    linear-gradient(140deg, var(--nav-bg-1), var(--nav-bg-2) 54%, var(--nav-bg-3)) !important;
}

html.dark-mode .navbar {
  --nav-bg-1: #09192a !important;
  --nav-bg-2: #10263c !important;
  --nav-bg-3: #14324c !important;
  --nav-text: #eaf4fb !important;
  --nav-muted: #a9c7db !important;
  --nav-border: rgba(95, 163, 201, 0.5) !important;
  --nav-border-hover: rgba(126, 198, 229, 0.68) !important;
  --nav-surface: rgba(10, 39, 61, 0.86) !important;
  --nav-surface-hover: rgba(13, 53, 80, 0.94) !important;
  --nav-panel: rgba(9, 34, 53, 0.84) !important;
  --nav-shadow-soft: inset 0 1px 0 rgba(171, 215, 240, 0.12) !important;
  --nav-accent: #70bde9 !important;
  --nav-accent-soft: #469cd3 !important;
  --nav-cta-bg:
    linear-gradient(150deg, rgba(93, 182, 233, 0.92), rgba(52, 137, 196, 0.94)),
    rgba(10, 45, 70, 0.95) !important;
  --nav-primary-btn-bg:
    linear-gradient(150deg, rgba(93, 182, 233, 0.92), rgba(52, 137, 196, 0.94)),
    rgba(10, 45, 70, 0.95) !important;
  --nav-active-btn-bg:
    linear-gradient(150deg, rgba(123, 202, 244, 0.94), rgba(67, 161, 221, 0.95)),
    rgba(10, 53, 81, 0.96) !important;
  --nav-active-ring: 0 0 0 2px rgba(111, 191, 235, 0.34), 0 0 14px rgba(111, 191, 235, 0.28) !important;
  border-bottom-color: rgba(116, 173, 207, 0.38) !important;
  background:
    radial-gradient(circle at 9% -18%, rgba(112, 189, 233, 0.2), transparent 42%),
    radial-gradient(circle at 92% 136%, rgba(70, 156, 210, 0.14), transparent 52%),
    linear-gradient(140deg, var(--nav-bg-1), var(--nav-bg-2) 54%, var(--nav-bg-3)) !important;
}

.navbar .navbar-nav .nav-main-link:hover {
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(247, 252, 255, 0.98), rgba(231, 243, 252, 0.98)) !important;
  color: var(--nav-text) !important;
}

.navbar .navbar-nav .nav-main-link.is-active,
.navbar .navbar-nav .nav-main-link[aria-current="page"] {
  border-color: var(--nav-border-hover) !important;
  background:
    linear-gradient(180deg, rgba(231, 245, 255, 0.98), rgba(213, 234, 249, 0.98)) !important;
  color: #113650 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 4px 12px rgba(24, 86, 125, 0.16) !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link:hover {
  background: linear-gradient(180deg, rgba(24, 65, 95, 0.95), rgba(18, 53, 77, 0.95)) !important;
  color: #f2fbff !important;
}

html.dark-mode .navbar .navbar-nav .nav-main-link.is-active,
html.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"] {
  background:
    linear-gradient(180deg, rgba(99, 189, 233, 0.38), rgba(61, 156, 214, 0.34)),
    rgba(16, 60, 89, 0.9) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(213, 240, 255, 0.16), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.navbar .dropbtn,
.navbar .audio-upload-btn,
.navbar .nav-utility-cluster > .icon-btn,
.navbar .auth-action-btn {
  border-color: var(--nav-border) !important;
  color: var(--nav-text) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 246, 253, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 14px rgba(18, 72, 106, 0.14) !important;
}

.navbar .dropbtn:hover,
.navbar .audio-upload-btn:hover,
.navbar .nav-utility-cluster > .icon-btn:hover,
.navbar .auth-action-btn:hover {
  border-color: var(--nav-border-hover) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(228, 243, 253, 0.98)) !important;
}

html.dark-mode .navbar .dropbtn,
html.dark-mode .navbar .audio-upload-btn,
html.dark-mode .navbar .nav-utility-cluster > .icon-btn,
html.dark-mode .navbar .auth-action-btn {
  background: linear-gradient(180deg, rgba(24, 68, 98, 0.92), rgba(17, 53, 78, 0.92)) !important;
  color: #eaf6ff !important;
  box-shadow: inset 0 1px 0 rgba(206, 233, 250, 0.12), 0 8px 16px rgba(0, 0, 0, 0.34) !important;
}

html.dark-mode .navbar .dropbtn:hover,
html.dark-mode .navbar .audio-upload-btn:hover,
html.dark-mode .navbar .nav-utility-cluster > .icon-btn:hover,
html.dark-mode .navbar .auth-action-btn:hover {
  background: linear-gradient(180deg, rgba(32, 82, 116, 0.94), rgba(21, 62, 90, 0.94)) !important;
}

.navbar .transport-btn.primary {
  border-color: rgba(128, 182, 216, 0.62) !important;
  background:
    linear-gradient(145deg, rgba(107, 184, 229, 0.92), rgba(64, 150, 205, 0.94)),
    rgba(233, 245, 253, 0.95) !important;
  color: #f5fbff !important;
}

.navbar .transport-btn.active,
.navbar .studio-mini-btn.active {
  border-color: rgba(124, 189, 224, 0.74) !important;
  background:
    linear-gradient(145deg, rgba(133, 201, 239, 0.94), rgba(76, 163, 216, 0.95)),
    rgba(227, 241, 251, 0.96) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(171, 214, 241, 0.42),
    0 0 16px rgba(106, 192, 236, 0.3) !important;
}

html.dark-mode .navbar .transport-btn.primary {
  border-color: rgba(111, 182, 224, 0.62) !important;
  background:
    linear-gradient(150deg, rgba(88, 178, 231, 0.9), rgba(52, 142, 203, 0.92)),
    rgba(9, 49, 74, 0.95) !important;
}

html.dark-mode .navbar .transport-btn.active,
html.dark-mode .navbar .studio-mini-btn.active {
  border-color: rgba(126, 200, 232, 0.74) !important;
  background:
    linear-gradient(150deg, rgba(113, 197, 242, 0.88), rgba(68, 161, 221, 0.9)),
    rgba(11, 58, 87, 0.96) !important;
}

.navbar .auth-nav--guest .auth-action-btn:last-child,
.navbar .transport-btn.primary,
.navbar .transport-btn.active,
.navbar .studio-mini-btn.active {
  border-color: rgba(124, 189, 224, 0.74) !important;
  color: #f4fbff !important;
  background:
    linear-gradient(145deg, rgba(120, 194, 236, 0.95), rgba(69, 151, 207, 0.96)),
    rgba(231, 244, 253, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(171, 214, 241, 0.42),
    0 0 16px rgba(106, 192, 236, 0.3) !important;
}

html.dark-mode .navbar .auth-nav--guest .auth-action-btn:last-child,
html.dark-mode .navbar .transport-btn.primary,
html.dark-mode .navbar .transport-btn.active,
html.dark-mode .navbar .studio-mini-btn.active {
  border-color: rgba(126, 200, 232, 0.74) !important;
  color: #ffffff !important;
  background:
    linear-gradient(150deg, rgba(113, 197, 242, 0.88), rgba(68, 161, 221, 0.9)),
    rgba(11, 58, 87, 0.96) !important;
}

.navbar .auth-nav--guest .auth-action-btn:last-child:hover {
  border-color: rgba(145, 208, 239, 0.84) !important;
  background:
    linear-gradient(145deg, rgba(140, 208, 243, 0.96), rgba(82, 167, 219, 0.97)),
    rgba(236, 248, 255, 0.97) !important;
}

html.dark-mode .navbar .auth-nav--guest .auth-action-btn:last-child:hover {
  border-color: rgba(149, 214, 242, 0.88) !important;
  background:
    linear-gradient(150deg, rgba(129, 209, 247, 0.9), rgba(77, 170, 228, 0.92)),
    rgba(13, 64, 95, 0.97) !important;
}

.navbar .dropdown-content a:hover {
  background: rgba(92, 171, 220, 0.16) !important;
}

html.dark-mode .navbar .dropdown-content a:hover {
  background: rgba(113, 197, 242, 0.2) !important;
}

.navbar .track-load-status.status-playing::before {
  background: #58b0e2 !important;
  box-shadow: 0 0 0 1px rgba(88, 176, 226, 0.24), 0 0 8px rgba(88, 176, 226, 0.46) !important;
}

html.dark-mode .navbar .track-load-status.status-playing::before {
  background: #79c6f2 !important;
  box-shadow: 0 0 0 1px rgba(121, 198, 242, 0.26), 0 0 9px rgba(121, 198, 242, 0.5) !important;
}

.navbar .navbar-player-shell {
  border-color: rgba(142, 186, 213, 0.42) !important;
  background:
    radial-gradient(circle at 10% -84%, rgba(116, 194, 235, 0.12), transparent 52%),
    radial-gradient(circle at 92% 132%, rgba(86, 172, 219, 0.08), transparent 56%),
    linear-gradient(166deg, rgba(228, 239, 249, 0.72), rgba(219, 234, 246, 0.66)),
    var(--nav-panel) !important;
}

html.dark-mode .navbar .navbar-player-shell {
  border-color: rgba(93, 163, 203, 0.42) !important;
  background:
    radial-gradient(circle at 10% -84%, rgba(102, 185, 232, 0.14), transparent 52%),
    radial-gradient(circle at 92% 132%, rgba(74, 157, 206, 0.1), transparent 56%),
    linear-gradient(166deg, rgba(9, 38, 58, 0.78), rgba(10, 33, 51, 0.74)),
    var(--nav-panel) !important;
}

.navbar #waveform {
  border-color: rgba(128, 179, 211, 0.38) !important;
  background:
    radial-gradient(circle at 10% -70%, rgba(109, 194, 239, 0.12), transparent 46%),
    linear-gradient(156deg, rgba(19, 63, 93, 0.95), rgba(13, 46, 70, 0.95)) !important;
}

html.dark-mode .navbar #waveform {
  border-color: rgba(96, 169, 212, 0.42) !important;
  background:
    radial-gradient(circle at 10% -70%, rgba(111, 195, 240, 0.14), transparent 46%),
    linear-gradient(156deg, rgba(9, 45, 69, 0.95), rgba(7, 32, 51, 0.95)) !important;
}

.navbar .status-pill,
.navbar .now-playing-chip {
  border-color: rgba(137, 181, 207, 0.44) !important;
  background: rgba(238, 248, 255, 0.78) !important;
  color: #1f4865 !important;
}

.navbar .now-playing-chip {
  border-color: rgba(125, 185, 218, 0.54) !important;
  background: rgba(220, 241, 255, 0.84) !important;
}

html.dark-mode .navbar .status-pill,
html.dark-mode .navbar .now-playing-chip {
  border-color: rgba(92, 164, 206, 0.52) !important;
  background: rgba(13, 52, 78, 0.8) !important;
  color: #dff2ff !important;
}

/* Last-pass hard override: all waveform/player buttons must stay blue */
html:not(.dark-mode) .navbar .transport-btn,
html:not(.dark-mode) .navbar .player-shell-toggle,
html:not(.dark-mode) .navbar .studio-mini-btn,
html:not(.dark-mode) .navbar .studio-reset-btn {
  border-color: rgba(128, 182, 216, 0.58) !important;
  color: #1e4a69 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(233, 246, 255, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 14px rgba(18, 72, 106, 0.14) !important;
}

html:not(.dark-mode) .navbar .transport-btn:hover,
html:not(.dark-mode) .navbar .player-shell-toggle:hover,
html:not(.dark-mode) .navbar .studio-mini-btn:hover,
html:not(.dark-mode) .navbar .studio-reset-btn:hover {
  border-color: rgba(105, 170, 210, 0.72) !important;
  background: linear-gradient(180deg, rgba(245, 252, 255, 1), rgba(220, 240, 253, 0.98)) !important;
}

html.dark-mode .navbar .transport-btn,
html.dark-mode .navbar .player-shell-toggle,
html.dark-mode .navbar .studio-mini-btn,
html.dark-mode .navbar .studio-reset-btn {
  border-color: rgba(97, 171, 215, 0.58) !important;
  color: #e8f6ff !important;
  background: linear-gradient(180deg, rgba(20, 63, 92, 0.94), rgba(13, 49, 73, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(206, 233, 250, 0.12), 0 8px 16px rgba(0, 0, 0, 0.34) !important;
}

html.dark-mode .navbar .transport-btn:hover,
html.dark-mode .navbar .player-shell-toggle:hover,
html.dark-mode .navbar .studio-mini-btn:hover,
html.dark-mode .navbar .studio-reset-btn:hover {
  border-color: rgba(131, 205, 235, 0.74) !important;
  background: linear-gradient(180deg, rgba(29, 78, 110, 0.95), rgba(19, 61, 88, 0.95)) !important;
}

.navbar .wave-upload-overlay__progress-bar,
.navbar .upload-progress-bar {
  background: linear-gradient(90deg, #3fa0d8, #58b6e6 56%, #5fd3c7 100%) !important;
}

html:not(.dark-mode) .navbar .brand-logo-shell {
  border-color: rgba(137, 184, 213, 0.6) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(126, 196, 236, 0.18), transparent 56%),
    linear-gradient(145deg, rgba(248, 253, 255, 0.98), rgba(233, 244, 252, 0.98)) !important;
  box-shadow: 0 8px 16px rgba(12, 62, 94, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html.dark-mode .navbar .brand-logo-shell {
  border-color: rgba(103, 176, 218, 0.58) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(106, 195, 239, 0.24), transparent 56%),
    linear-gradient(145deg, rgba(16, 56, 84, 0.97), rgba(10, 37, 57, 0.97)) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(196, 232, 255, 0.14) !important;
}

/* ==========================================================================
   Navbar Theme Consistency + Contrast Fix
   Same layout in light/dark, only palette changes.
   ========================================================================== */
.navbar {
  --nav-text-main-final: #163b57;
  --nav-text-muted-final: #5b7890;
  --nav-text-on-accent-final: #0f324b;
  --nav-chip-text-final: #1d4866;
  --nav-state-bg-final: rgba(233, 245, 253, 0.9);
  --nav-state-border-final: rgba(133, 179, 210, 0.54);
}

html.dark-mode .navbar {
  --nav-text-main-final: #eaf5ff;
  --nav-text-muted-final: #a9c8dd;
  --nav-text-on-accent-final: #ffffff;
  --nav-chip-text-final: #ddf0ff;
  --nav-state-bg-final: rgba(15, 54, 80, 0.86);
  --nav-state-border-final: rgba(97, 168, 211, 0.56);
}

.navbar .navbar-brand,
.navbar .brand-wordmark-main {
  color: var(--nav-text-main-final) !important;
}

.navbar .brand-wordmark-sub,
.navbar .player-shell-kicker,
.navbar .now-playing-chip .label {
  color: var(--nav-text-muted-final) !important;
}

.navbar .player-shell-state,
.navbar .status-pill,
.navbar .now-playing-chip,
.navbar .auth-user-label {
  color: var(--nav-chip-text-final) !important;
  border-color: var(--nav-state-border-final) !important;
  background: var(--nav-state-bg-final) !important;
}

.navbar .nav-main-link,
.navbar .dropbtn,
.navbar .icon-btn,
.navbar .transport-btn,
.navbar .player-shell-toggle,
.navbar .auth-action-btn,
.navbar .studio-mini-btn,
.navbar .studio-reset-btn {
  color: var(--nav-text-main-final) !important;
}

html:not(.dark-mode) .navbar .auth-nav--guest .auth-action-btn:last-child,
html:not(.dark-mode) .navbar .transport-btn.primary,
html:not(.dark-mode) .navbar .transport-btn.active,
html:not(.dark-mode) .navbar .studio-mini-btn.active {
  color: var(--nav-text-on-accent-final) !important;
}

html.dark-mode .navbar .auth-nav--guest .auth-action-btn:last-child,
html.dark-mode .navbar .transport-btn.primary,
html.dark-mode .navbar .transport-btn.active,
html.dark-mode .navbar .studio-mini-btn.active {
  color: var(--nav-text-on-accent-final) !important;
}