/* =======================================================
   apple_glass.css
   Global visual unification pass (Apple-like glass language)
   Loaded last to override earlier page-specific palettes.
   ======================================================= */

:root {
  --font-ui: "SF Pro Text", "SF Pro Display", "Manrope", "Segoe UI", sans-serif;

  --bg-page: #eaf2fa;
  --bg-surface: rgba(255, 255, 255, 0.62);
  --bg-soft: rgba(247, 251, 255, 0.54);

  --text-strong: #10283e;
  --text-muted: #49647b;

  --border-soft: rgba(156, 190, 216, 0.46);
  --shadow-soft: 0 18px 44px rgba(14, 38, 61, 0.16);

  --accent-primary: #1f8fda;
  --accent-primary-strong: #166fb2;
  --accent-warm: #167bc1;

  --focus-ring: 0 0 0 3px rgba(70, 165, 234, 0.3);

  --ag-glass-bg:
    linear-gradient(170deg, rgba(255, 255, 255, 0.68), rgba(240, 248, 255, 0.52));
  --ag-glass-bg-strong:
    linear-gradient(165deg, rgba(255, 255, 255, 0.74), rgba(233, 245, 255, 0.58));
  --ag-glass-border: rgba(166, 201, 226, 0.48);
  --ag-glass-shadow: 0 20px 50px rgba(12, 35, 58, 0.16);
  --ag-glass-shadow-strong: 0 26px 68px rgba(10, 30, 50, 0.2);

  --ag-chip-bg: rgba(245, 251, 255, 0.52);
  --ag-chip-border: rgba(168, 203, 228, 0.42);

  --ag-input-bg: rgba(255, 255, 255, 0.55);
  --ag-input-border: rgba(163, 198, 223, 0.52);
  --ag-input-text: #10314a;
  --ag-placeholder: rgba(67, 97, 121, 0.74);

  --ag-btn-primary:
    linear-gradient(140deg, #2498e2 0%, #1f86d1 55%, #1cb7a6 100%);
  --ag-btn-secondary:
    linear-gradient(140deg, rgba(234, 245, 255, 0.68), rgba(220, 237, 251, 0.52));
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(circle at 8% -12%, rgba(121, 182, 228, 0.36), transparent 34%),
    radial-gradient(circle at 96% 8%, rgba(109, 207, 195, 0.2), transparent 32%),
    radial-gradient(circle at 50% 120%, rgba(101, 156, 208, 0.2), transparent 42%),
    var(--bg-page) !important;
}

a {
  color: var(--accent-primary);
}

a:hover {
  color: var(--accent-primary-strong);
}

/* Shared glass surfaces across all major modules */
.navbar,
.navbar-player-shell,
.player-shell,
.brand-logo-shell,
.site-footer,
.sidebar,
.modal-content,
.upload-droparea,
.upload-status-card,
.wave-upload-overlay__card,
.about-hero-card,
.about-panel,
.blueprint-card,
.contact-hero,
.contact-form-panel,
.contact-info-panel,
.info-card,
.home-brand-hero,
.home-search-card,
.index-hero,
.index-panel,
.search-panel,
.value-panel,
.results-headbar,
.results-controls,
.results-container,
.drag-drop-zone,
.syllable-group,
.rhyme-tile,
.history-hero,
.history-toolbar,
.history-metric-card,
.history-tile,
.empty-history,
.projects-hero,
.projects-controls,
.project-card,
.empty-state,
.songwriting-workspace,
.workspace-header,
.editor-panel,
.assistant-panel,
.rhyme-results-panel,
.timing-grid-block,
.vocal-booth-block,
.vocal-plugin-grid,
.auth-card,
.app-info-panel,
.app-info-item,
.top-wave-container,
.wave-grid {
  background: var(--ag-glass-bg) !important;
  border: 1px solid var(--ag-glass-border) !important;
  box-shadow: var(--ag-glass-shadow) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.modal-content,
.sidebar,
.projects-hero,
.history-hero,
.results-headbar,
.home-search-card,
.auth-card {
  background: var(--ag-glass-bg-strong) !important;
  box-shadow: var(--ag-glass-shadow-strong) !important;
}

/* Typography polish */
.main-content,
.main-content p,
.main-content li,
.studio-subtitle,
.hero-note,
.about-note,
.contact-subtitle,
.auth-subtitle {
  color: var(--text-muted);
}

h1,
h2,
h3,
h4,
h5,
h6,
.main-content .workspace-headline,
.main-content .auth-title,
.main-content .history-title,
.main-content .about-kicker,
.main-content .contact-kicker {
  color: var(--text-strong);
}

/* Chips / badges */
.status-pill,
.note-chip,
.word-meta-chip,
.tag,
.card-state,
.sidebar-sync-status,
.history-word-meta,
.latency-badge,
.assistant-status {
  background: var(--ag-chip-bg) !important;
  border: 1px solid var(--ag-chip-border) !important;
  color: var(--text-strong) !important;
  backdrop-filter: blur(10px) saturate(126%);
  -webkit-backdrop-filter: blur(10px) saturate(126%);
}

/* Inputs */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.sidebar-header #noteTitle,
.sidebar-content #userInput,
.home-input-group input,
.home-input-group select,
.auth-form input,
.auth-form select,
.auth-form textarea,
.filter-input-wrap input,
.search-input,
.song-title-input {
  background: var(--ag-input-bg) !important;
  border: 1px solid var(--ag-input-border) !important;
  color: var(--ag-input-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

input::placeholder,
textarea::placeholder,
select::placeholder,
.sidebar-header #noteTitle::placeholder,
.sidebar-content #userInput::placeholder {
  color: var(--ag-placeholder) !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  box-shadow: var(--focus-ring) !important;
}

/* Buttons */
.btn,
.btn-submit,
.home-search-submit,
.audio-upload-btn,
.open-sidebar-btn,
.create-project-btn,
.save-note-btn,
.auth-submit,
.section-btn-accent,
.booth-btn-primary,
.studio-reset-btn,
.start-search-link,
.open-history-link,
.contact-form .btn-submit {
  background: var(--ag-btn-primary) !important;
  border: 1px solid rgba(205, 236, 255, 0.72) !important;
  color: #f8fdff !important;
  box-shadow: 0 14px 28px rgba(14, 88, 145, 0.28) !important;
}

.new-note-btn,
.section-btn,
.booth-btn,
.studio-mini-btn,
.auth-action-btn,
.auth-action-btn--ghost,
.icon-btn,
.transport-btn,
.grid-btn,
.loop-btn,
.metro-btn,
.player-shell-toggle,
.clear-history-button,
.delete-history-button,
.action-btn,
.blueprint-btn {
  background: var(--ag-btn-secondary) !important;
  border: 1px solid rgba(165, 200, 226, 0.54) !important;
  color: var(--text-strong) !important;
  box-shadow: 0 10px 22px rgba(13, 44, 71, 0.14) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

button:hover,
.btn:hover,
.icon-btn:hover,
.transport-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* Sidebar notes + modal clarity */
#sidebar.sidebar,
.sidebar,
.sidebar-header,
.sidebar-actions,
.sidebar-content {
  border-color: rgba(174, 207, 229, 0.52) !important;
}

.sidebar-content #userInput {
  color: #f5fbff !important;
  text-shadow: 0 1px 0 rgba(3, 13, 23, 0.36);
}

.modal {
  background: rgba(8, 15, 24, 0.44) !important;
  backdrop-filter: blur(12px) !important;
}

.modal-content h2,
.modal-content label,
.modal-content .studio-value,
.modal-content .studio-subtitle {
  color: var(--text-strong);
}

.close-button {
  background: linear-gradient(145deg, rgba(247, 252, 255, 0.75), rgba(233, 245, 255, 0.62)) !important;
  border: 1px solid rgba(163, 198, 223, 0.52) !important;
}

/* Results / history readability */
.rhyme-grid .rhyme-tile,
.history-grid .history-tile,
.projects-grid .project-card,
.blueprint-grid .blueprint-card,
.history-filter-empty {
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

/* Songwriting panels + CK editor shell */
.songwriting-workspace .editor-panel,
.songwriting-workspace .assistant-panel,
.songwriting-workspace .rhyme-results-panel,
.songwriting-workspace .timing-grid-block,
.songwriting-workspace .vocal-booth-block,
.songwriting-workspace .vocal-plugin-grid,
.songwriting-workspace .section-toolbar,
.songwriting-workspace .workspace-actions {
  border-color: rgba(169, 203, 227, 0.5) !important;
}

.cke_chrome,
.cke_top,
.cke_bottom {
  background: var(--ag-glass-bg) !important;
  border-color: rgba(163, 197, 222, 0.48) !important;
}

/* Info overlay polish */
.app-info-panel,
.app-info-item,
.app-info-trigger {
  border-color: rgba(167, 201, 227, 0.54) !important;
}

.app-info-trigger {
  background: var(--ag-btn-primary) !important;
  color: #f6fcff !important;
}

/* Audio control accents from orange -> blue/teal */
:root {
  --marker-b: rgba(66, 176, 255, 0.96);
  --marker-b-strong: rgba(45, 149, 227, 0.98);
  --loop-main: rgba(62, 180, 231, 0.9);
  --loop-fill: rgba(62, 180, 231, 0.2);
}

#waveGridOverlay .wave-grid-line.beat {
  background: linear-gradient(
    180deg,
    rgba(60, 172, 240, 0.06),
    rgba(60, 172, 240, 0.34),
    rgba(60, 172, 240, 0.07)
  );
}

#waveGridOverlay .wave-grid-line.bar {
  background: linear-gradient(
    180deg,
    rgba(156, 215, 255, 0.18),
    rgba(80, 178, 239, 0.72),
    rgba(156, 215, 255, 0.2)
  );
  box-shadow: 0 0 10px rgba(67, 155, 216, 0.18);
}

/* Dark mode */
body.dark-mode,
html.dark-mode body {
  --bg-page: #050d16;
  --bg-surface: rgba(8, 20, 33, 0.68);
  --bg-soft: rgba(10, 24, 38, 0.58);

  --text-strong: #e8f4ff;
  --text-muted: #aac4db;

  --border-soft: rgba(130, 172, 203, 0.34);
  --shadow-soft: 0 22px 54px rgba(0, 0, 0, 0.5);

  --accent-primary: #4db2ff;
  --accent-primary-strong: #6bc0ff;
  --accent-warm: #54b8ff;

  --focus-ring: 0 0 0 3px rgba(88, 178, 242, 0.32);

  --ag-glass-bg:
    linear-gradient(170deg, rgba(15, 33, 50, 0.74), rgba(10, 24, 39, 0.64));
  --ag-glass-bg-strong:
    linear-gradient(168deg, rgba(18, 39, 58, 0.82), rgba(10, 24, 39, 0.72));
  --ag-glass-border: rgba(139, 182, 214, 0.36);
  --ag-glass-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
  --ag-glass-shadow-strong: 0 28px 72px rgba(0, 0, 0, 0.55);

  --ag-chip-bg: rgba(21, 42, 62, 0.54);
  --ag-chip-border: rgba(132, 177, 210, 0.32);

  --ag-input-bg: rgba(14, 32, 49, 0.72);
  --ag-input-border: rgba(126, 170, 201, 0.4);
  --ag-input-text: #eaf6ff;
  --ag-placeholder: rgba(172, 198, 221, 0.74);

  --ag-btn-primary:
    linear-gradient(140deg, #2f9be2 0%, #2183cc 55%, #1ba896 100%);
  --ag-btn-secondary:
    linear-gradient(140deg, rgba(28, 49, 70, 0.84), rgba(18, 36, 54, 0.74));
}

body.dark-mode {
  background:
    radial-gradient(circle at 8% -12%, rgba(55, 125, 179, 0.34), transparent 35%),
    radial-gradient(circle at 96% 8%, rgba(43, 145, 132, 0.22), transparent 30%),
    radial-gradient(circle at 50% 120%, rgba(34, 87, 135, 0.24), transparent 42%),
    var(--bg-page) !important;
}

body.dark-mode .main-content,
html.dark-mode .main-content,
body.dark-mode .main-content p,
html.dark-mode .main-content p,
body.dark-mode .main-content li,
html.dark-mode .main-content li {
  color: var(--text-muted);
}

body.dark-mode h1,
html.dark-mode h1,
body.dark-mode h2,
html.dark-mode h2,
body.dark-mode h3,
html.dark-mode h3,
body.dark-mode h4,
html.dark-mode h4,
body.dark-mode h5,
html.dark-mode h5,
body.dark-mode h6,
html.dark-mode h6 {
  color: var(--text-strong);
}

body.dark-mode .modal,
html.dark-mode .modal {
  background: rgba(3, 9, 15, 0.56) !important;
}

body.dark-mode .close-button,
html.dark-mode .close-button {
  color: #ecf7ff !important;
}

/* Mobile tuning */
@media (max-width: 768px) {
  .modal-content,
  .sidebar,
  .home-search-card,
  .results-headbar,
  .projects-hero,
  .history-hero,
  .auth-card {
    backdrop-filter: blur(12px) saturate(124%);
    -webkit-backdrop-filter: blur(12px) saturate(124%);
  }
}

/* ==========================================================================
   Navbar Master Override
   Final authoritative navbar style to supersede legacy overrides.
   ========================================================================== */
.navbar {
  --ng-text: #183a52;
  --ng-muted: #5b758b;
  --ng-border: rgba(132, 171, 199, 0.48);
  --ng-border-strong: rgba(95, 149, 184, 0.66);
  --ng-surface: rgba(255, 255, 255, 0.9);
  --ng-surface-strong: rgba(245, 251, 255, 0.96);
  --ng-chip: rgba(230, 243, 253, 0.84);
  --ng-shadow: 0 14px 36px rgba(12, 42, 67, 0.16);
  --ng-shadow-soft: 0 8px 20px rgba(14, 45, 72, 0.14);
  --ng-primary:
    linear-gradient(145deg, rgba(87, 177, 231, 0.94), rgba(53, 141, 201, 0.96));
  --ng-primary-strong:
    linear-gradient(145deg, rgba(117, 196, 239, 0.96), rgba(68, 156, 215, 0.97));

  border-bottom: 1px solid var(--ng-border) !important;
  box-shadow: var(--ng-shadow) !important;
  backdrop-filter: blur(16px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(132%) !important;
  background:
    radial-gradient(circle at 9% -20%, rgba(121, 182, 228, 0.2), transparent 42%),
    radial-gradient(circle at 93% 134%, rgba(109, 207, 195, 0.14), transparent 48%),
    linear-gradient(140deg, rgba(239, 246, 253, 0.96), rgba(229, 239, 250, 0.94), rgba(221, 233, 247, 0.94)) !important;
}

.navbar::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0)) !important;
  opacity: 1 !important;
}

.navbar .container {
  width: min(100%, 1660px) !important;
  padding: 0.62rem clamp(0.58rem, 1.1vw, 0.96rem) 0.78rem !important;
  gap: 0.68rem !important;
}

.navbar-top-row,
.navbar-row {
  gap: 0.68rem !important;
  align-items: center !important;
}

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

.navbar .navbar-brand {
  gap: 0.58rem !important;
}

.navbar .brand-logo-shell {
  width: 43px !important;
  height: 43px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(149, 189, 217, 0.54) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(116, 194, 235, 0.18), transparent 58%),
    linear-gradient(145deg, rgba(248, 252, 255, 0.96), rgba(232, 244, 252, 0.96)) !important;
  box-shadow: 0 8px 16px rgba(13, 43, 67, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.navbar .brand-wordmark-main {
  color: var(--ng-text) !important;
  letter-spacing: 0 !important;
}

.navbar .brand-wordmark-sub {
  color: var(--ng-muted) !important;
  letter-spacing: 0.11em !important;
}

.navbar .navbar-toggle {
  display: none !important;
  width: 42px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ng-border) !important;
  background: var(--ng-surface) !important;
  color: var(--ng-text) !important;
}

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

.navbar .nav-main-cluster {
  flex: 1 1 auto !important;
  min-width: 0;
}

.navbar .navbar-nav {
  padding: 0.24rem !important;
  gap: 0.24rem !important;
  border-radius: 14px !important;
  border: 1px solid var(--ng-border) !important;
  background: var(--ng-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(12, 41, 65, 0.12) !important;
}

.navbar .navbar-nav .nav-main-link {
  min-height: 40px !important;
  padding: 0 0.86rem !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ng-text) !important;
  font-size: 0.79rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.014em !important;
}

.navbar .navbar-nav .nav-main-link:hover {
  border-color: var(--ng-border-strong) !important;
  background: linear-gradient(180deg, rgba(251, 254, 255, 0.98), rgba(231, 244, 253, 0.98)) !important;
  color: #133955 !important;
}

.navbar .navbar-nav .nav-main-link.is-active,
.navbar .navbar-nav .nav-main-link[aria-current="page"] {
  border-color: var(--ng-border-strong) !important;
  background:
    linear-gradient(180deg, rgba(226, 242, 255, 0.98), rgba(208, 232, 249, 0.98)) !important;
  color: #0f3651 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 4px 12px rgba(20, 84, 124, 0.16) !important;
}

.navbar .nav-utility-cluster {
  gap: 0.42rem !important;
}

.navbar .audio-tools {
  gap: 0.42rem !important;
  padding: 0.22rem !important;
  border-radius: 12px !important;
  border: 1px solid var(--ng-border) !important;
  background: var(--ng-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 6px 14px rgba(12, 41, 65, 0.11) !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 {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: 1px solid var(--ng-border) !important;
  color: var(--ng-text) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 245, 253, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 14px rgba(16, 62, 93, 0.13) !important;
}

.navbar .dropbtn {
  padding: 0 0.84rem !important;
}

.navbar .audio-upload-btn,
.navbar .nav-utility-cluster > .icon-btn {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}

.navbar .audio-upload-label {
  display: none !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(--ng-border-strong) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(224, 241, 253, 0.99)) !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: rgba(116, 184, 220, 0.74) !important;
  color: #f6fcff !important;
  background: var(--ng-primary) !important;
  box-shadow: 0 0 0 1px rgba(152, 207, 238, 0.42), 0 0 16px rgba(88, 173, 226, 0.26) !important;
}

.navbar .auth-nav--guest .auth-action-btn:last-child:hover,
.navbar .transport-btn.primary:hover,
.navbar .transport-btn.active:hover,
.navbar .studio-mini-btn.active:hover {
  background: var(--ng-primary-strong) !important;
}

.navbar .auth-user-label {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 0.66rem !important;
  border: 1px solid var(--ng-border) !important;
  border-radius: 10px !important;
  background: var(--ng-surface-strong) !important;
  color: var(--ng-text) !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;
  border: 1px solid var(--ng-border) !important;
  background: linear-gradient(165deg, rgba(247, 252, 255, 0.97), rgba(230, 244, 253, 0.95)) !important;
  box-shadow: 0 12px 28px rgba(10, 40, 64, 0.2) !important;
}

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

.navbar .dropdown-content a:hover {
  background: rgba(101, 178, 226, 0.16) !important;
}

.navbar .navbar-player-shell {
  border: 1px solid var(--ng-border) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 10% -84%, rgba(120, 199, 238, 0.14), transparent 52%),
    radial-gradient(circle at 92% 132%, rgba(92, 183, 226, 0.1), transparent 56%),
    linear-gradient(166deg, rgba(229, 240, 250, 0.82), rgba(216, 232, 245, 0.76)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 8px 18px rgba(12, 41, 65, 0.16) !important;
}

.navbar #waveform {
  border: 1px solid rgba(129, 178, 208, 0.42) !important;
  background:
    radial-gradient(circle at 10% -70%, rgba(116, 198, 239, 0.14), transparent 46%),
    linear-gradient(156deg, rgba(18, 62, 92, 0.96), rgba(13, 47, 72, 0.96)) !important;
}

.navbar .status-pill,
.navbar .now-playing-chip {
  border: 1px solid rgba(138, 183, 210, 0.44) !important;
  background: var(--ng-chip) !important;
  color: var(--ng-text) !important;
}

.navbar .track-load-status.status-playing::before {
  background: #67bae8 !important;
  box-shadow: 0 0 0 1px rgba(103, 186, 232, 0.24), 0 0 8px rgba(103, 186, 232, 0.46) !important;
}

body.dark-mode .navbar,
html.dark-mode .navbar {
  --ng-text: #dcebf6;
  --ng-muted: #9cb7cb;
  --ng-border: rgba(70, 121, 153, 0.56);
  --ng-border-strong: rgba(99, 165, 199, 0.78);
  --ng-surface: rgba(7, 25, 38, 0.72);
  --ng-surface-strong: rgba(8, 30, 45, 0.8);
  --ng-chip: rgba(8, 36, 54, 0.78);
  --ng-shadow: 0 18px 42px rgba(0, 0, 0, 0.56);
  --ng-shadow-soft: 0 12px 26px rgba(0, 0, 0, 0.44);
  --ng-primary:
    linear-gradient(145deg, rgba(74, 162, 208, 0.88), rgba(41, 124, 179, 0.9));
  --ng-primary-strong:
    linear-gradient(145deg, rgba(95, 182, 226, 0.9), rgba(54, 145, 204, 0.92));

  background:
    radial-gradient(circle at 10% -18%, rgba(44, 118, 162, 0.22), transparent 42%),
    radial-gradient(circle at 92% 132%, rgba(32, 130, 111, 0.14), transparent 48%),
    linear-gradient(140deg, rgba(5, 18, 28, 0.95), rgba(7, 24, 37, 0.94), rgba(9, 31, 46, 0.94)) !important;
}

body.dark-mode .navbar::before,
html.dark-mode .navbar::before {
  background: linear-gradient(180deg, rgba(128, 188, 220, 0.08), rgba(128, 188, 220, 0)) !important;
}

body.dark-mode .navbar .navbar-nav,
html.dark-mode .navbar .navbar-nav,
body.dark-mode .navbar .audio-tools,
html.dark-mode .navbar .audio-tools,
body.dark-mode .navbar .auth-user-label,
html.dark-mode .navbar .auth-user-label {
  background: var(--ng-surface) !important;
  box-shadow: inset 0 1px 0 rgba(145, 205, 236, 0.08), 0 8px 18px rgba(0, 0, 0, 0.38) !important;
}

body.dark-mode .navbar .dropdown-content,
html.dark-mode .navbar .dropdown-content {
  background: linear-gradient(165deg, rgba(7, 25, 38, 0.96), rgba(8, 30, 45, 0.95)) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .navbar .brand-logo-shell,
html.dark-mode .navbar .brand-logo-shell {
  border-color: rgba(101, 170, 208, 0.58) !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(117, 201, 240, 0.2), transparent 58%),
    linear-gradient(145deg, rgba(14, 45, 67, 0.96), rgba(10, 34, 52, 0.96)) !important;
}

body.dark-mode .navbar .navbar-nav .nav-main-link:hover,
html.dark-mode .navbar .navbar-nav .nav-main-link:hover {
  background: linear-gradient(180deg, rgba(14, 46, 68, 0.9), rgba(10, 35, 52, 0.9)) !important;
  color: #f1fbff !important;
}

body.dark-mode .navbar .navbar-nav .nav-main-link.is-active,
html.dark-mode .navbar .navbar-nav .nav-main-link.is-active,
body.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"],
html.dark-mode .navbar .navbar-nav .nav-main-link[aria-current="page"] {
  background:
    linear-gradient(180deg, rgba(54, 140, 184, 0.34), rgba(36, 112, 158, 0.3)),
    rgba(10, 43, 64, 0.9) !important;
  color: #eaf6ff !important;
  box-shadow: inset 0 1px 0 rgba(178, 225, 248, 0.12), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .navbar .dropbtn,
html.dark-mode .navbar .dropbtn,
body.dark-mode .navbar .icon-btn,
html.dark-mode .navbar .icon-btn,
body.dark-mode .navbar .transport-btn,
html.dark-mode .navbar .transport-btn,
body.dark-mode .navbar .player-shell-toggle,
html.dark-mode .navbar .player-shell-toggle,
body.dark-mode .navbar .auth-action-btn,
html.dark-mode .navbar .auth-action-btn,
body.dark-mode .navbar .studio-mini-btn,
html.dark-mode .navbar .studio-mini-btn,
body.dark-mode .navbar .studio-reset-btn,
html.dark-mode .navbar .studio-reset-btn {
  background: linear-gradient(180deg, rgba(10, 39, 58, 0.9), rgba(8, 30, 45, 0.9)) !important;
  color: #eaf7ff !important;
  box-shadow: inset 0 1px 0 rgba(168, 220, 246, 0.08), 0 8px 16px rgba(0, 0, 0, 0.42) !important;
}

body.dark-mode .navbar .dropbtn:hover,
html.dark-mode .navbar .dropbtn:hover,
body.dark-mode .navbar .icon-btn:hover,
html.dark-mode .navbar .icon-btn:hover,
body.dark-mode .navbar .transport-btn:hover,
html.dark-mode .navbar .transport-btn:hover,
body.dark-mode .navbar .player-shell-toggle:hover,
html.dark-mode .navbar .player-shell-toggle:hover,
body.dark-mode .navbar .auth-action-btn:hover,
html.dark-mode .navbar .auth-action-btn:hover,
body.dark-mode .navbar .studio-mini-btn:hover,
html.dark-mode .navbar .studio-mini-btn:hover,
body.dark-mode .navbar .studio-reset-btn:hover,
html.dark-mode .navbar .studio-reset-btn:hover {
  background: linear-gradient(180deg, rgba(13, 50, 74, 0.92), rgba(10, 39, 58, 0.92)) !important;
}

body.dark-mode .navbar .navbar-player-shell,
html.dark-mode .navbar .navbar-player-shell {
  background:
    radial-gradient(circle at 10% -84%, rgba(108, 193, 236, 0.16), transparent 52%),
    radial-gradient(circle at 92% 132%, rgba(66, 166, 212, 0.1), transparent 56%),
    linear-gradient(166deg, rgba(10, 43, 65, 0.82), rgba(10, 35, 53, 0.8)) !important;
}

body.dark-mode .navbar #waveform,
html.dark-mode .navbar #waveform {
  border-color: rgba(94, 169, 212, 0.48) !important;
  background:
    radial-gradient(circle at 10% -70%, rgba(114, 200, 242, 0.16), transparent 46%),
    linear-gradient(156deg, rgba(9, 47, 72, 0.96), rgba(7, 35, 54, 0.96)) !important;
}

body.dark-mode .navbar .status-pill,
html.dark-mode .navbar .status-pill,
body.dark-mode .navbar .now-playing-chip,
html.dark-mode .navbar .now-playing-chip {
  border-color: rgba(96, 171, 213, 0.54) !important;
  background: rgba(13, 56, 84, 0.84) !important;
  color: #def2ff !important;
}

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

  .navbar .navbar-right {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.62rem !important;
    width: 100%;
    margin-top: 0.24rem;
    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 .navbar-right.open {
    max-height: 640px;
    opacity: 1;
    pointer-events: auto;
    padding: 0.76rem;
    border-color: var(--ng-border);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.7), rgba(239, 248, 254, 0.66)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 10px 24px rgba(10, 40, 62, 0.16);
  }

  body.dark-mode .navbar .navbar-right.open,
  html.dark-mode .navbar .navbar-right.open {
    background: linear-gradient(165deg, rgba(10, 40, 58, 0.92), rgba(10, 33, 49, 0.92)) !important;
    box-shadow: inset 0 1px 0 rgba(172, 217, 241, 0.1), 0 12px 28px rgba(0, 0, 0, 0.34);
  }

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

  .navbar .navbar-nav .nav-main-link {
    width: 100%;
    min-height: 44px !important;
    justify-content: center;
  }

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

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

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

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

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

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

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

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

/* Final hard override: footer must stay attached to browser bottom edge. */
body {
  padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px)) !important;
}

.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  z-index: 2140 !important;
  transform: none !important;
}