/* build 20261024-c7 */
/* ============================================================
   Music Chords - Stylesheet
   (Extracted from original monolithic index.html; behaviour & visuals unchanged.)
   Light additions at the bottom for spacing & responsive polish.
   ============================================================ */

    body {
      box-sizing: border-box;
      position: fixed;
      overflow: hidden;
      touch-action: manipulation;
    }
* {
      font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }
    
    .glass-effect {
      background: rgba(124, 58, 237, 0.1);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(167, 139, 250, 0.2);
    }
    
    .glass-button {
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(124, 58, 237, 0.9));
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }
    
    .glass-button:hover {
      background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(124, 58, 237, 1));
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
    }
    
    .glass-button:active {
      transform: translateY(0);
    }
    
    .action-button {
      transition: all 0.3s ease;
    }
    
    .action-button:hover {
      transform: translateY(-2px);
      filter: brightness(1.1);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    
    .action-button:active {
      transform: translateY(0);
    }
    
    .song-item {
      background: rgba(139, 92, 246, 0.15);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(167, 139, 250, 0.3);
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }
    
    .song-item:hover {
      background: rgba(139, 92, 246, 0.25);
      border-color: rgba(167, 139, 250, 0.5);
      transform: translateX(4px);
    }
    
    .song-item.menu-open {
      z-index: 200;
    }
    
    .desktop-warning {
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(124, 58, 237, 0.95));
      backdrop-filter: blur(20px);
    }
    
    input, textarea {
      background: rgba(30, 27, 75, 0.6);
      border: 1px solid rgba(167, 139, 250, 0.3);
      color: white !important;
      transition: all 0.3s ease;
    }
    
    input::placeholder, textarea::placeholder {
      color: rgba(196, 181, 253, 0.5) !important;
    }
    
    input:focus, textarea:focus {
      outline: none;
      border-color: rgba(167, 139, 250, 0.6);
      background: rgba(30, 27, 75, 0.8);
      box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
    }
    
    input::placeholder, textarea::placeholder {
      color: rgba(196, 181, 253, 0.5);
    }
    
    .modal-backdrop {
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
    }
    
    .modal-content {
      background: linear-gradient(135deg, rgba(30, 27, 75, 0.98), rgba(17, 24, 39, 0.98));
      backdrop-filter: blur(20px);
      border: 1px solid rgba(167, 139, 250, 0.3);
    }
    
    .draggable-section {
      cursor: grab;
      transition: all 0.3s ease;
      user-select: none;
      -webkit-user-select: none;
      pointer-events: auto;
    }
    
    .lineup-draggable {
      cursor: grab;
      transition: all 0.3s ease;
      user-select: none;
      -webkit-user-select: none;
    }
    
    .draggable-section.drag-active, .lineup-draggable.drag-active {
      cursor: grabbing;
      opacity: 0.5;
      transform: scale(1.05);
      z-index: 1000;
    }
    
    .draggable-section.drag-over, .lineup-draggable.drag-over {
      border-top: 3px solid #8b5cf6 !important;
    }
    
    /* Hide Scrollbar but keep functionality */
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;
      display: none;
    }
    
    /* Firefox Scrollbar */
    * {
      scrollbar-width: none;
    }
    
    /* IE and Edge */
    * {
      -ms-overflow-style: none;
    }
    
    /* Find Key Button Animations */
    @keyframes pulse-glow {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.6), 0 0 80px rgba(139, 92, 246, 0.3);
      }
      50% {
        transform: scale(1.05);
        box-shadow: 0 0 60px rgba(139, 92, 246, 0.8), 0 0 100px rgba(139, 92, 246, 0.5);
      }
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-8px);
      }
    }
    
    @keyframes rotate-glow {
      0% {
        filter: hue-rotate(0deg);
      }
      100% {
        filter: hue-rotate(360deg);
      }
    }
    
    .find-key-circle {
      animation: pulse-glow 3s ease-in-out infinite, float 4s ease-in-out infinite;
    }
    
    .find-key-circle:hover {
      animation: pulse-glow 1.5s ease-in-out infinite, float 2s ease-in-out infinite;
      transform: scale(1.1) translateY(-4px) !important;
    }
    
    .find-key-circle:active {
      transform: scale(0.95) translateY(0px) !important;
    }
    
    @media (min-width: 1280px) {
      .mobile-only {
        display: none !important;
      }
      .desktop-warning {
        display: flex !important;
      }
    }
    
    @media (max-width: 1279px) {
      .desktop-warning {
        display: none !important;
      }
    }
  
/* Mobile button polish (cleaner touch UI) */
@media (max-width: 640px) {

  /* Reduce logo bottom spacing to free space for songs list */
  #app-logo { margin-bottom: 6px !important; }

  .glass-button {
    width: 100%;
    max-width: 100%;
    padding: 14px 16px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    border-radius: 14px !important;
  }

  /* Ensure icon + text align nicely and don't overflow */
  .glass-button > span,
  .glass-button svg {
    flex-shrink: 0;
  }
  .glass-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* Make small action buttons (e.g., Delete/Open) still tappable */
  button[data-action] {
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  /* Reduce cramped grids to single column on mobile */
  .grid.sm\:grid-cols-2,
  .grid.sm\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Buttons inside cards/rows */
  .glass-effect .glass-button {
    width: auto;
  }

  /* Modal content spacing */
  .modal-content {
    padding: 16px !important;
    border-radius: 18px !important;
  }
}


/* Mobile toolbar layout: stack Add then Remove; group other actions; collapse Import/Export/Settings into one menu */
@media (max-width: 640px) {
  #primary-actions {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  /* Make Add + Remove prominent */
  #add-btn, #remove-btn {
    width: 100% !important;
    padding: 16px 16px !important;
    font-size: 16px !important;
  }
  /* Wrap the remaining 3 buttons into a 3-column row by forcing them to appear after */
  #lineup-btn, #keyfinder-btn, #songchords-btn {
    width: 100% !important;
    padding: 14px 10px !important;
    font-size: 14px !important;
  }
  /* Rebuild layout: after Add/Remove, show the next 3 as a row */
  #primary-actions {
    grid-auto-flow: row !important;
  }
  /* Place Lineup/Key/Song Link in a 3-col subgrid using CSS grid areas */
  #primary-actions {
    grid-template-areas:
      "add add add"
      "remove remove remove"
      "lineup key songlink";
    grid-template-columns: 1fr 1fr 1fr;
  }
  #add-btn { grid-area: add; }
  #remove-btn { grid-area: remove; }
  #lineup-btn { grid-area: lineup; }
  #keyfinder-btn { grid-area: key; }
  #songchords-btn { grid-area: songlink; }

  /* Ensure first two rows are full width */
  #add-btn, #remove-btn { grid-column: 1 / -1; }

  /* Collapse secondary buttons into one 'More' menu */
  #secondary-actions { display: none !important; }
  #mobile-more-container { display: block !important; }

  /* Song list: tighter header to show more items */
  #songs-list { margin-top: 6px; }
  .glass-effect.rounded-2xl.p-4 > h2 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
}


/* Mobile: make More-menu buttons full width */
@media (max-width: 640px) {
  #mobile-more-menu {
    width: 100% !important;
  }
  #mobile-more-menu .glass-button {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
}


    /* Chord input sizing: prevent shrink in edit mode and autosize cleanly */
    .chord-input {
      min-height: 56px;
      resize: none;
      overflow: hidden;
      line-height: 1.4;
    }


    /* Drag/scroll helpers */
    .dragging, .dragging * { user-select: none !important; }
    .draggable-section { touch-action: pan-y; }

    /* Song view scroll stability (mobile/PWA) */
    #view-modal { overscroll-behavior: contain; }
    #view-modal * { -webkit-overflow-scrolling: touch; }

    /* Ensure lineup remove button always shows an X icon (content was empty in HTML) */
    .lineup-remove-btn::before {
      content: "×";
      display: inline-block;
      line-height: 1;
    }


    /* Tablet logo sizing (reduce slightly on tablets) */
    @media (min-width: 641px) and (max-width: 1024px) {
      #app-logo { width: 160px !important; max-width: 50vw !important; }
    }


    /* Only songs list scrolls (keep header area fixed within app view) */
    .app-wrapper .mobile-only > .flex-1 { min-height: 0; }
    #songs-panel { min-height: 0; }
    #songs-list { max-height: none; }


    /* Stabilize songs list: vertical scroll only (prevent horizontal panning) */
    #songs-list {
      overflow-x: hidden !important;
      overscroll-behavior-x: none;
      touch-action: pan-y;
    }
    #songs-list .song-item { touch-action: pan-y; }

/* =========================
   MOBILE HEADER COMPACTION
   (does NOT affect tablet/desktop)
========================= */
@media (max-width: 640px) {

  #app-logo {
    width: 110px !important;
    max-width: 60vw !important;
  }

  .app-header,
  .header-container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .search-bar {
    padding: 6px 10px !important;
    font-size: 0.9rem !important;
  }

  .action-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 0.8rem !important;
  }

  #songs-panel {
    min-height: 40vh !important;
  }
}


/* =========================
   MOBILE: PREVENT BACKGROUND SCROLL
   (only allow scrolling inside intended containers, e.g. songs list / modals)
========================= */
@media (max-width: 640px) {
  html, body {
    height: 100%;
    overflow: hidden;           /* prevent background scroll */
    overscroll-behavior: none;  /* prevent rubber-band */
  }

  /* Keep the app viewport stable */
  .app-wrapper {
    height: 100vh;
    overflow: hidden;
  }
}



/* =========================
   BPM Tool (isolated)
   ========================= */
#bpm-modal {
  position: fixed;
  inset: 0;
  display: none; /* toggled to flex inline */
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 9999;
}
#bpm-modal * { box-sizing: border-box; }

#bpm-modal .bpm-modal {
  width: min(560px, 100%);
  margin: auto;
  padding: 18px;
  border-radius: 24px;
  background: rgba(17, 24, 39, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 70px rgba(0,0,0,0.45);
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-height: min(720px, calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
}
@supports (height: 100dvh) {
  #bpm-modal .bpm-modal {
    max-height: min(720px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
}

#bpm-modal .bpm-modal { -webkit-tap-highlight-color: transparent; }

#bpm-modal .bpm-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#bpm-modal .bpm-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (min-width: 640px) {
  #bpm-modal .bpm-top { grid-template-columns: 1fr 1fr; }
}

#bpm-modal .bpm-display { min-width: 0; line-height: 1; }
#bpm-modal .bpm-display .bpm-value {
  font-size: clamp(40px, 9vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

#bpm-modal .bpm-mini-btn {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
#bpm-modal .bpm-mini-btn:active { transform: scale(0.98); }

#bpm-modal .bpm-chip-btn {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#bpm-modal .bpm-chip-btn:active { transform: scale(0.99); }

#bpm-modal .bpm-input,

#bpm-modal .bpm-select {
  width: 100%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff;
  outline: none;
}

#bpm-modal .bpm-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
#bpm-modal .bpm-select option {
  color: #111;
  background: #fff;
}

#bpm-modal .bpm-range {
  width: 100%;
  accent-color: #a855f7;
  touch-action: manipulation;
}

#bpm-modal .bpm-tap-btn {
  width: 100%;
  padding: 18px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(59,130,246,0.85));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#bpm-modal .bpm-tap-btn:active { transform: scale(0.99); }

#bpm-modal .bpm-primary-btn {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(34,197,94,0.95);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 35px rgba(0,0,0,0.20);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#bpm-modal .bpm-primary-btn.is-playing { background: rgba(244,63,94,0.95); }
#bpm-modal .bpm-primary-btn:active { transform: scale(0.99); }

#bpm-modal .bpm-toggle {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 700;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#bpm-modal .bpm-toggle[aria-pressed="true"] { background: rgba(168,85,247,0.35); }

#bpm-modal .bpm-beat-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
#bpm-modal .bpm-dot {
  flex: 1;
  min-width: 0;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.08);
}
#bpm-modal .bpm-dot.active { background: rgba(168,85,247,0.9); }
#bpm-modal .bpm-dot.accent { background: rgba(59,130,246,0.9); }

#bpm-modal #bpm-status {
  margin-top: 10px;
}


    /* Song Tempo inline control (View modal only) */
    #view-modal #song-tempo-inline { min-width: 160px; }
    #view-modal .bpm-inline-btn {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    #view-modal #song-tempo-value { font-variant-numeric: tabular-nums; }
    #view-modal #song-tempo-play .bpm-icon-pause { display: none; }
    #view-modal #song-tempo-play[data-playing="true"] .bpm-icon-play { display: none; }
    #view-modal #song-tempo-play[data-playing="true"] .bpm-icon-pause { display: block; }
    #view-modal #song-tempo-play[data-playing="true"] {
      box-shadow: 0 0 0 2px rgba(255,255,255,0.14) inset;
    }

    /* Lineup: Auto Play Tempo toggle (scoped) */
    #lineup-modal #lineup-autoplay-wrap { touch-action: manipulation; }
    #lineup-modal .lineup-switch {
      position: relative;
      width: 48px;
      height: 28px;
      display: inline-block;
      flex: 0 0 auto;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    #lineup-modal .lineup-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    #lineup-modal .lineup-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.18);
      transition: 180ms ease;
      border-radius: 9999px;
    }
    #lineup-modal .lineup-slider:before {
      content: "";
      position: absolute;
      height: 22px;
      width: 22px;
      left: 3px;
      top: 2px;
      background: rgba(255,255,255,0.92);
      transition: 180ms ease;
      border-radius: 9999px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    }
    #lineup-modal .lineup-switch input:checked + .lineup-slider {
      background: rgba(16,185,129,0.65);
      border-color: rgba(16,185,129,0.55);
    }
    #lineup-modal .lineup-switch input:checked + .lineup-slider:before {
      transform: translateX(20px);
    }


/* View transition (preserved from a separate <style> block) */
@view-transition { navigation: auto; }


/* ============================================================
   REFINEMENTS LAYER (additive only - no original rule changed)
   1. Reduce vertical spacing between logo and search bar
   2. Search results: visible below search bar, scrollable, responsive
   3. Tighter & smarter responsive layout for mobile + tablets
   4. Performance helpers (will-change, contain, smooth scroll)
   ============================================================ */

/* ---------- 1. Logo / search-bar spacing ---------- */
/* The original markup uses `mb-6` on the logo wrapper AND a 12-24px
   margin-bottom on the <img> itself. We override only the gap, not the
   logo size or alignment, so the look is preserved.                    */
#app-logo-wrap {
  margin-bottom: 0.5rem !important;   /* was mb-6 (1.5rem). v13: id selector instead of :has() (cheaper style invalidation) */
}
/* Fallback for browsers without :has() — target the logo image margin. */
#app-logo {
  margin-bottom: 4px !important;
}
/* And reduce the search bar's top container margin so the gap is small. */
.mobile-only #search-input {
  margin-top: 0 !important;
}
#search-section {
  margin-bottom: 0.85rem !important;
}

/* ---------- 2. Search input + dynamic results visibility ---------- */
/* Ensure the songs list (which acts as the live results panel) always
   sits directly below the search bar, fills available height, and stays
   internally scrollable on every supported screen size.                */
#songs-panel {
  min-height: 0 !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
#songs-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
/* Visual focus feedback when typing in the search field */
#search-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.45),
              0 0 22px rgba(124, 58, 237, 0.35) !important;
}

/* ---------- 3. Responsive polish: mobile (≤640px) ---------- */
@media (max-width: 640px) {
  /* Tighter top region so search + list have more room */
  .mobile-only > .flex-1 {
    padding-top: 10px !important;
  }
  .mobile-only .text-center.mb-6 {
    margin-bottom: 0.4rem !important;
  }
  #app-logo {
    margin-bottom: 2px !important;
  }
  /* Search bar inner field padding tuned for thumb reach */
  #search-input {
    padding: 12px 16px !important;
    font-size: 1rem !important;
  }
}

/* ---------- 3b. Tablet (641px - 1279px, portrait & landscape) ---------- */
@media (min-width: 641px) and (max-width: 1279px) {
  .mobile-only > .flex-1 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .mobile-only .text-center.mb-6 {
    margin-bottom: 0.6rem !important;
  }
  #app-logo {
    margin-bottom: 6px !important;
    width: 170px !important;
    max-width: 45vw !important;
  }
  /* Search bar slightly larger on tablets without changing styling */
  #search-input {
    padding: 14px 18px !important;
    font-size: 1.05rem !important;
  }
  /* Better use of the wider tablet canvas */
  #primary-actions {
    gap: 12px !important;
  }
  #secondary-actions {
    gap: 12px !important;
  }
}

/* Landscape tablets: shrink logo & vertical paddings to keep list visible */
@media (max-height: 700px) and (orientation: landscape) {
  #app-logo { width: 130px !important; margin-bottom: 2px !important; }
  .mobile-only .text-center.mb-6 { margin-bottom: 0.25rem !important; }
  .mobile-only > .flex-1 { padding-top: 6px !important; }
}

/* ---------- 4. Performance helpers ---------- */
/* Hint the compositor for long lists; prevents jank on iOS Safari.
   IMPORTANT: do NOT use `contain: content` / `contain: paint` here, because the
   per-song "more options" dropdown is positioned `absolute` and would be
   clipped by paint containment. We use the safe subset only.
   Also note: `will-change: transform` would create a containing block for any
   `position: fixed` descendants, so we avoid that on .song-item.            */
.song-item {
  contain: layout style;
}
#songs-list {
  contain: layout style;
}
/* Disable expensive transform on hover for touch devices              */
@media (hover: none) {
  .song-item:hover { transform: none !important; }
  .glass-button:hover { transform: none !important; box-shadow: none !important; }
  .action-button:hover { transform: none !important; box-shadow: none !important; }
}

/* ============================================================
   5. FULL-VIEWPORT FIX (iPad Pro / PWA standalone)
   The original layout used 100% / 100vh, which on iOS Safari (esp. PWA mode)
   leaves a strip of white space at the bottom because vh doesn't account for
   the dynamic viewport. We switch to dvh + safe-area-inset for a perfect fit.
   ============================================================ */
html, body {
  height: 100% !important;
  width: 100% !important;
}
/* Modern dynamic viewport units when supported - removes white-space gap */
@supports (height: 100dvh) {
  html, body { height: 100dvh !important; }
}
body {
  /* Honour the device safe-area while still filling the screen */
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100% !important;
}
@supports (height: 100dvh) {
  body { min-height: 100dvh !important; }
}
/* App wrapper must always fill the body */
.app-wrapper {
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
@supports (height: 100dvh) {
  .app-wrapper {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}
/* Inner scroll column fills remaining height */
.app-wrapper > .flex-1 {
  min-height: 0;
  height: 100%;
}

/* ============================================================
   6. "More-options" dropdown overflow fix
   The per-song ⋮ menu used `position: absolute`, which got clipped by
   ancestors that have overflow:hidden / overflow:auto (e.g. #songs-list).
   We promote it to `position: fixed` via the .menu-floating helper class,
   so it's anchored to the viewport and is never clipped.
   ============================================================ */
.options-menu.menu-floating {
  position: fixed !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 9999 !important;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}
/* Ensure ancestors don't visually clip the floating menu when open. */
#songs-list,
#songs-panel,
.app-wrapper,
.mobile-only,
.mobile-only > .flex-1 {
  /* Keep overflow but ensure transforms / clipping don't capture
     a fixed-positioned descendant. */
}
/* Defensive: when a song-item has the open menu, lift it above siblings.   */
.song-item.menu-open { z-index: 9000 !important; }

/* ============================================================
   7. SUPPORT LARGER TABLETS (e.g. Lenovo Xiaoxin Pad Pro landscape)
   The user wants tablet layout for any larger screen instead of the
   "desktop only" warning. The original rule kicks in at >=1280px; we
   raise the breakpoint and force the mobile/tablet layout on all sizes.
   ============================================================ */
@media (min-width: 1280px) {
  /* Always render the responsive app layout - never show the desktop-only
     warning, per requirement: "Larger screens may be supported if treated
     as tablet layout."                                                 */
  .mobile-only { display: flex !important; }
  .desktop-warning { display: none !important; }
}
/* Cap the inner content so it doesn't stretch awkwardly on wide screens */
@media (min-width: 1024px) {
  .app-wrapper > .flex-1 {
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   8. PRO-UPGRADED FULL-VIEWPORT STARTUP FIX
   Minimal override matching the fixed Lite viewport shell.
   Do not use startup-measured JS heights or safe-area padding on
   the root app shell: in iOS/Android standalone mode those early
   measurements can be shorter in portrait until rotation occurs.
   The app shell must own the full viewport from first paint.
   ============================================================ */
:root {
  color-scheme: dark;
  --music-app-bg: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
}

html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: #1e1b4b !important;
  background-image: var(--music-app-bg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: #1e1b4b !important;
  background-image: var(--music-app-bg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.mobile-only.app-wrapper,
.app-wrapper {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0 !important;
}

.mobile-only.app-wrapper > .flex-1,
.app-wrapper > .flex-1 {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

#songs-panel {
  flex: 1 1 0% !important;
  min-height: 0 !important;
}

#songs-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

#tokenVerificationOverlay,
.desktop-warning,
.modal-backdrop {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}

/* In installed standalone mode, use the larger of vh and dvh.
   This avoids first-launch portrait under-measurement on iPad Pro
   and large Android tablets while preserving normal browser behavior. */
@supports (height: max(100vh, 100dvh)) {
  @media (display-mode: standalone) {
    body,
    .mobile-only.app-wrapper,
    .app-wrapper,
    #tokenVerificationOverlay,
    .desktop-warning,
    .modal-backdrop {
      height: max(100vh, 100dvh) !important;
    }
  }
}



/* ============================================================
   9. FINAL FULL-SCREEN INSET SHELL FIX
   This is intentionally last. The previous viewport patch still relied on
   height: 100dvh / max(100vh, 100dvh). On some installed iOS/Android PWAs,
   the initial portrait viewport height can be under-reported until rotation.

   Instead of sizing the root shell with viewport units, the real app shell is
   pinned with fixed inset: 0 and height: auto. This lets the browser stretch it
   between top:0 and bottom:0 immediately in both portrait and landscape.
   ============================================================ */
html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: #1e1b4b !important;
  background-image: var(--music-app-bg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: #1e1b4b !important;
  background-image: var(--music-app-bg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.mobile-only.app-wrapper,
.app-wrapper {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0 !important;
  background: transparent !important;
}

/* The app has one main inner column. Pin it to the wrapper edges too, so it
   cannot keep an old 100% / 100dvh startup height from the inline markup or
   Tailwind h-full utilities. */
.mobile-only.app-wrapper > .flex-1,
.app-wrapper > .flex-1 {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

#songs-panel {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#songs-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Fixed overlays also use inset sizing instead of first-launch viewport-unit
   heights, preventing modal/backdrop strips in standalone orientation changes. */
#tokenVerificationOverlay,
.desktop-warning,
.modal-backdrop,
#bpm-modal {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Keep the responsive tablet layout visible on supported large touch devices. */
@media (min-width: 1280px) {
  .mobile-only.app-wrapper,
  .mobile-only { display: flex !important; }
  .desktop-warning { display: none !important; }
}

/* ============================================================
   10. FINAL ROOT-CAUSE GAP FIX
   Root cause found: the fixed full-screen app wrapper is correct, but the
   inner app column has Tailwind bottom padding in the HTML:
   `pb-6 sm:pb-8`. Because that column is the viewport-height flex shell,
   the bottom padding reserves unused space OUTSIDE the songs panel. Earlier
   viewport fixes only painted behind that reserved space; they did not remove
   the reserved layout area.

   Keep the existing top/side spacing and all app behavior, but remove only the
   outer bottom padding. The songs panel/list already have their own internal
   padding and scrolling, so the visible app now genuinely reaches the bottom
   edge in portrait and landscape.
   ============================================================ */
.mobile-only.app-wrapper > .flex-1,
.app-wrapper > .flex-1 {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#songs-panel {
  margin-bottom: 0 !important;
}

#songs-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
}


/* ============================================================
   11. FINAL SONG-LIST / MODAL FULLSCREEN ROOT FIX
   Root cause: the Pro Upgraded shell still had two layout constraints that the
   fixed Lite shell does not have:
   1) the body/app-wrapper were forced into a fixed-position/100% shell from the
      HTML and earlier CSS, which can preserve a short standalone viewport;
   2) modal backdrops and their content still inherited viewport-unit caps and
      tablet max-width rules, so the dark Song List / View / Lineup overlay made
      the remaining unused area obvious.

   This final layer matches the fixed Lite approach: body and app shell own the
   viewport with 100vh/100dvh, normal flex layout, no centered max-width cap, and
   fixed overlays pinned to the viewport edges. No app logic or feature behavior
   is changed.
   ============================================================ */
html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: #1e1b4b !important;
  background-image: var(--music-app-bg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: #1e1b4b !important;
  background-image: var(--music-app-bg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.mobile-only.app-wrapper,
.app-wrapper {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0 !important;
}

.mobile-only.app-wrapper > .flex-1,
.app-wrapper > .flex-1 {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 1 1 0% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#songs-panel {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#songs-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Dark overlays must be viewport-owned too. This targets the Song List / View /
   Lineup style backdrops without changing the modal contents or app logic. */
#tokenVerificationOverlay,
.desktop-warning,
.modal-backdrop,
#bpm-modal {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Keep the existing modal/card design, but stop the 90vh cap from creating an
   apparent bottom gap on standalone tablets. The content can still scroll. */
.modal-backdrop > .modal-content,
#bpm-modal > .modal-content {
  max-height: calc(100vh - 2rem) !important;
  max-height: calc(100dvh - 2rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain !important;
}

/* Standalone PWA/tablet fallback: use the largest viewport unit if available.
   This is applied only after the normal Lite-style 100vh/100dvh shell above. */
@supports (height: 100lvh) {
  @media (display-mode: standalone) {
    body,
    .mobile-only.app-wrapper,
    .app-wrapper,
    #tokenVerificationOverlay,
    .desktop-warning,
    .modal-backdrop,
    #bpm-modal {
      height: 100lvh !important;
      min-height: 100lvh !important;
    }

    .modal-backdrop > .modal-content,
    #bpm-modal > .modal-content {
      max-height: calc(100lvh - 2rem) !important;
    }
  }
}

@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available !important;
  }

  body,
  .mobile-only.app-wrapper,
  .app-wrapper {
    min-height: -webkit-fill-available !important;
  }
}

@media (min-width: 1024px) {
  .app-wrapper > .flex-1,
  .mobile-only.app-wrapper > .flex-1 {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   KEY FINDER PRO UI + LIVE DETECTION FEEDBACK
   Scoped only to #keyfinder-modal and its Key Detection components.
   Matches the provided dark studio tuner reference.
   ============================================================ */
#keyfinder-modal .keyfinder-modern {
  position: relative;
  overflow: hidden;
  background: #070814;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  color: #ffffff;
}

#keyfinder-modal .keyfinder-studio-header {
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
}

#keyfinder-modal .keyfinder-title {
  color: #e9d5ff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

#keyfinder-modal .key-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 700;
}

#keyfinder-modal .key-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.58);
}

#keyfinder-modal .key-status-pill.is-live .key-live-dot {
  animation: keyLivePulse 1.25s infinite;
}

#keyfinder-modal .key-display-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

#keyfinder-modal .key-gauge-shell {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#keyfinder-modal .key-gauge-svg {
  width: 100%;
  max-width: 280px;
  display: block;
  overflow: visible;
}

#keyfinder-modal .key-gauge-base,
#keyfinder-modal .key-gauge-arc {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

#keyfinder-modal .key-gauge-base {
  stroke: #1a1a2e;
  stroke-width: 12;
}

#keyfinder-modal .key-gauge-arc {
  stroke: url(#keyGaugeGrad);
  opacity: 0.72;
}

#keyfinder-modal .key-needle {
  stroke: #a78bfa;
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 150px 150px;
  transition: transform 90ms linear, stroke 120ms linear;
}

#keyfinder-modal .key-needle.is-in-tune {
  stroke: #10b981;
}

#keyfinder-modal .key-needle-cap {
  fill: #a78bfa;
  transition: fill 120ms linear;
}

#keyfinder-modal .key-needle.is-in-tune + .key-needle-cap,
#keyfinder-modal .key-needle.is-in-tune ~ .key-needle-cap {
  fill: #10b981;
}

#keyfinder-modal .key-needle-cap-inner {
  fill: #1a1a2e;
}

#keyfinder-modal .key-gauge-labels {
  width: 100%;
  max-width: 260px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 0 8px;
  color: rgba(245, 158, 11, 0.74);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

#keyfinder-modal .key-gauge-labels span:nth-child(2) {
  color: rgba(233, 213, 255, 0.86);
  text-align: center;
}

#keyfinder-modal .key-note-section {
  width: 100%;
  text-align: center;
}

#keyfinder-modal .key-note-main,
#keyfinder-modal .key-note-placeholder {
  color: #e9d5ff;
  font-size: clamp(5rem, 21vw, 6.5rem);
  line-height: 0.86;
  font-weight: 900;
  letter-spacing: -0.08em;
  text-shadow: 0 0 24px currentColor, 0 0 48px rgba(233, 213, 255, 0.30);
}

#keyfinder-modal .key-note-main.is-stable {
  color: #f5f3ff;
}

#keyfinder-modal .key-note-sub {
  color: rgba(233, 213, 255, 0.54);
  margin-top: 10px;
  font-size: 0.92rem;
  font-weight: 700;
}

#keyfinder-modal .key-waiting-text,
#keyfinder-modal .key-listening-text {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(233, 213, 255, 0.56);
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 8px;
}

#keyfinder-modal .key-info-card,
#keyfinder-modal .key-secondary-card,
#keyfinder-modal .key-waveform {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
}

#keyfinder-modal .key-info-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  text-align: center;
}

#keyfinder-modal .key-secondary-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px 20px;
  text-align: center;
}

#keyfinder-modal .key-info-label {
  color: rgba(233, 213, 255, 0.48);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

#keyfinder-modal .key-info-value,
#keyfinder-modal .key-result-main,
#keyfinder-modal .key-stability-main {
  color: #e9d5ff;
  font-size: 1.1rem;
  line-height: 1.15;
  font-weight: 900;
  margin: 0;
}

#keyfinder-modal .key-result-main,
#keyfinder-modal .key-stability-main {
  font-size: 1rem;
}

#keyfinder-modal .key-stability-meter {
  width: 100%;
  height: 8px;
  margin-top: -12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

#keyfinder-modal .key-stability-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #10b981;
  transition: width 180ms ease;
}

#keyfinder-modal .key-confidence {
  display: none;
}

#keyfinder-modal .key-waveform {
  padding: 20px;
  text-align: center;
}

#keyfinder-modal .key-waveform-label {
  color: rgba(233, 213, 255, 0.48);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

#keyfinder-modal .key-wave-bars {
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

#keyfinder-modal .key-wave-bar {
  width: 6px;
  height: 18px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.72);
  transform-origin: bottom;
  transition: height 95ms linear, opacity 95ms linear;
}

#keyfinder-modal .key-wave-bar:nth-child(2) { height: 28px; }
#keyfinder-modal .key-wave-bar:nth-child(3) { height: 40px; }
#keyfinder-modal .key-wave-bar:nth-child(4) { height: 54px; }
#keyfinder-modal .key-wave-bar:nth-child(5) { height: 36px; }
#keyfinder-modal .key-wave-bar:nth-child(6) { height: 48px; }
#keyfinder-modal .key-wave-bar:nth-child(7) { height: 26px; }
#keyfinder-modal .key-wave-bar:nth-child(8) { height: 42px; }
#keyfinder-modal .key-wave-bar:nth-child(9) { height: 22px; }
#keyfinder-modal .key-wave-bar:nth-child(10) { height: 34px; }
#keyfinder-modal .key-wave-bar:nth-child(11) { height: 44px; }
#keyfinder-modal .key-wave-bar:nth-child(12) { height: 26px; }
#keyfinder-modal .key-wave-bar:nth-child(13) { height: 36px; }
#keyfinder-modal .key-wave-bar:nth-child(14) { height: 18px; }
#keyfinder-modal .key-wave-bar:nth-child(15) { height: 28px; }

#keyfinder-modal .keyfinder-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

#keyfinder-modal .key-detect-button {
  width: min(100%, 280px) !important;
  min-height: 64px;
  border-radius: 22px !important;
  border: 1px solid rgba(167, 139, 250, 0.24) !important;
  background: rgba(167, 139, 250, 0.22) !important;
  box-shadow: none !important;
  gap: 8px;
  letter-spacing: -0.02em;
  animation: none !important;
}

#keyfinder-modal .key-detect-button:hover {
  transform: none !important;
  filter: brightness(1.06);
}

#keyfinder-modal .key-button-icon {
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.95;
}

#keyfinder-modal .key-stop-button,
#keyfinder-modal .key-close-button {
  width: min(100%, 280px);
  min-height: 54px;
  border-radius: 18px !important;
  box-shadow: none;
}

#keyfinder-modal .key-stop-button {
  border: 1px solid rgba(248, 113, 113, 0.22);
  background: rgba(220, 38, 38, 0.84) !important;
}

#keyfinder-modal .key-close-button {
  color: rgba(255,255,255,0.88);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes keyLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media (max-width: 640px) {
  #keyfinder-modal .keyfinder-modern {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  #keyfinder-modal .key-display-modern {
    gap: 20px;
  }

  #keyfinder-modal .key-info-card {
    padding: 20px 16px;
    gap: 10px;
  }

  #keyfinder-modal .key-info-value {
    font-size: 1rem;
  }

  #keyfinder-modal .key-secondary-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* === PRO-STYLE SEARCH RESULTS DROPDOWN (matches PRO version behavior) === */
.pro-search-section {
  position: relative;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5000;
  max-height: min(60vh, 360px);
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(28, 25, 50, 0.96);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 6px;
  display: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.search-results.show {
  display: block;
}

.search-result-item {
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-result-item:hover,
.search-result-item:active,
.search-result-item.highlighted {
  background: rgba(139, 92, 246, 0.22);
}

.search-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result-title {
  font-size: 1rem;
  font-weight: 500;
  color: #f5f5f7;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-description {
  font-size: 0.85rem;
  color: rgba(245, 245, 247, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.search-result-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.search-result-action svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.search-result-action.export-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.search-result-action.lineup-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.search-result-action.export-btn:hover,
.search-result-action.export-btn:active,
.search-result-action.lineup-btn:hover,
.search-result-action.lineup-btn:active {
  transform: translateY(-1px);
}

.search-result-empty {
  padding: 18px;
  text-align: center;
  color: rgba(245, 245, 247, 0.6);
  font-size: 0.95rem;
}

@media (max-width: 480px) {
  .search-result-action {
    padding: 8px;
  }
  .search-result-action .label {
    display: none;
  }
  .search-result-action svg {
    width: 16px;
    height: 16px;
  }
}

/* === Mobile-only Transpose / Tempo control layout polish ===
   Scoped to the View Song modal only. This keeps all existing IDs,
   event handlers, calculations, and desktop/tablet layout unchanged. */
@media (max-width: 640px) {
  #view-modal .glass-effect.rounded-xl.p-3.mb-4 > .flex.items-center.justify-between.gap-3.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  #view-modal .glass-effect.rounded-xl.p-3.mb-4 > .flex.items-center.justify-between.gap-3.flex-wrap > div {
    width: 100% !important;
    min-width: 0 !important;
    padding: 13px 12px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(167, 139, 250, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 22px rgba(0, 0, 0, 0.16) !important;
  }

  #view-modal .glass-effect.rounded-xl.p-3.mb-4 > .flex.items-center.justify-between.gap-3.flex-wrap > div > span {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-bottom: 2px !important;
    color: rgba(233, 213, 255, 0.95) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #view-modal .glass-effect.rounded-xl.p-3.mb-4 > .flex.items-center.justify-between.gap-3.flex-wrap > div > span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.95);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.55);
    flex: 0 0 auto;
  }

  #view-modal .glass-effect.rounded-xl.p-3.mb-4 > .flex.items-center.justify-between.gap-3.flex-wrap > div > div {
    width: 100% !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  #view-modal #transpose-down,
  #view-modal #transpose-up,
  #view-modal #song-tempo-play,
  #view-modal #song-tempo-settings {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
  }

  #view-modal #transpose-value,
  #view-modal #song-tempo-value {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums;
  }

  #view-modal #song-tempo-inline {
    min-width: 0 !important;
  }

  #view-modal #song-tempo-inline .text-center,
  #view-modal .glass-effect.rounded-xl.p-3.mb-4 > .flex.items-center.justify-between.gap-3.flex-wrap > div:first-child .text-center {
    min-width: 86px !important;
    padding: 0 4px !important;
  }

  #view-modal #song-tempo-inline .text-xs {
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }
}

/* ============================================================
   ADD VIEW CHOOSER + CHORD GRID EDITOR
   Additive styles only. The original Default View selectors are untouched.
   ============================================================ */
#add-view-choice-modal {
  z-index: 9100 !important;
}

#grid-row-editor-modal {
  z-index: 9800 !important;
}

#grid-section-copy-modal {
  z-index: 9850 !important;
}

.add-view-choice-card,
.grid-row-editor-card,
.grid-section-copy-card {
  color: #ffffff;
  background: linear-gradient(145deg, rgba(30, 27, 75, 0.98), rgba(17, 24, 39, 0.98));
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.add-view-choice-header,
.grid-row-editor-header,
.grid-section-copy-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.add-view-choice-close {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.add-view-choice-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.add-view-choice-option {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  padding: 16px;
  text-align: left;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.add-view-choice-option:hover,
.add-view-choice-option:focus-visible {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(167, 139, 250, 0.48);
  outline: none;
  transform: translateY(-1px);
}

.add-view-choice-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e9d5ff;
  background: rgba(139, 92, 246, 0.20);
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 17px;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
}

.add-view-choice-grid-icon {
  display: inline-flex;
}

.add-view-choice-grid-icon svg {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.chord-grid-cell-text,
.grid-chord-input,
.chord-input,
.chord-suggestion,
.chord-symbol,
#current-chord-display {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.add-view-choice-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.add-view-choice-copy strong {
  font-size: 1.05rem;
  line-height: 1.2;
}

.add-view-choice-copy small {
  color: rgba(233, 213, 255, 0.68);
  font-size: 0.86rem;
  line-height: 1.35;
}

.add-view-choice-arrow {
  color: rgba(233, 213, 255, 0.72);
  font-size: 2rem;
  line-height: 1;
  text-align: right;
}

.chord-grid-section {
  position: relative;
  overflow: visible;
}

.chord-grid-section-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chord-grid-section-copy {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chord-grid-section-copy:hover,
.chord-grid-section-copy:focus-visible {
  background: color-mix(in srgb, var(--grid-section-color, #8b5cf6) 25%, rgba(17, 24, 39, 0.82));
  border-color: color-mix(in srgb, var(--grid-section-color, #a78bfa) 62%, white 8%);
  outline: none;
  transform: translateY(-1px);
}

.chord-grid-section-copy svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chord-grid-rows,
.chord-grid-view-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chord-grid-row-shell {
  position: relative;
  padding: 10px;
  background: rgba(4, 8, 24, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}

.chord-grid-row-toolbar {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.chord-grid-row-name {
  color: rgba(233, 213, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chord-grid-row-edit {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #ffffff;
  background: rgba(139, 92, 246, 0.23);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 11px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chord-grid-row-edit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chord-grid-row-cells,
.grid-editor-beat-selector {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.chord-grid-row-cells::after,
.grid-editor-beat-selector::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: rgba(233, 213, 255, 0.24);
  transform: translateX(-0.5px);
  pointer-events: none;
}

.chord-grid-cell {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 2px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.085);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
  overflow: hidden;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.66rem, 1.7vw, 0.95rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}

.chord-grid-seek-cell:disabled {
  cursor: default;
}

#sections-container.is-grid-seek-active .chord-grid-seek-cell:not(:disabled) {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--grid-section-color, #a78bfa) 46%, rgba(255, 255, 255, 0.16));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#sections-container.is-grid-seek-active .chord-grid-seek-cell:not(:disabled):hover,
#sections-container.is-grid-seek-active .chord-grid-seek-cell:not(:disabled):focus-visible {
  z-index: 5;
  outline: 2px solid color-mix(in srgb, var(--grid-section-color, #a78bfa) 74%, white 10%);
  outline-offset: -2px;
}

.chord-grid-cell.has-chord {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(196, 181, 253, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chord-grid-cell.is-medium .chord-grid-cell-text {
  font-size: 0.82em;
}

.chord-grid-cell.is-long .chord-grid-cell-text {
  display: block;
  max-width: 124%;
  font-size: 0.68em;
  transform: scaleX(0.82);
  transform-origin: center;
}

.chord-grid-add-row {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 2px 0 0;
  padding: 5px 10px;
  color: rgba(233, 213, 255, 0.82);
  background: transparent;
  border: 1px dashed rgba(167, 139, 250, 0.28);
  border-radius: 11px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chord-grid-add-row .chord-grid-plus {
  font-size: 1.15rem;
  line-height: 1;
}

.chord-grid-view-row {
  padding: 3px 0;
}

.grid-editor-field {
  margin-top: 18px;
}

.grid-editor-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(233, 213, 255, 0.90);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.grid-editor-help {
  display: block;
  color: rgba(233, 213, 255, 0.54);
  font-size: 0.76rem;
  line-height: 1.35;
}

.grid-editor-beat-selector button {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px 1px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}

.grid-editor-beat-number {
  color: rgba(233, 213, 255, 0.58);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}

.grid-editor-beat-chord {
  display: block;
  width: 100%;
  overflow: hidden;
  color: #ffffff;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.58rem, 1.8vw, 0.72rem);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-editor-beat-selector button.is-staged {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.14);
}

.grid-editor-beat-selector button.has-chord::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #a78bfa;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.68);
}

.grid-editor-beat-selector button.is-selected {
  color: #ffffff;
  background: rgba(139, 92, 246, 0.38);
  border-color: rgba(196, 181, 253, 0.72);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.18);
}

.grid-row-draft-help {
  margin-top: 8px;
}

.grid-chord-combobox {
  position: relative;
  z-index: 12;
}

.grid-chord-input {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.70);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 14px;
  outline: none;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
}

.grid-chord-input:focus {
  border-color: rgba(167, 139, 250, 0.72);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.grid-chord-suggestion-help {
  margin-top: 7px;
}

.grid-chord-suggestions {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 210px;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(15, 23, 42, 0.985);
  border: 1px solid rgba(167, 139, 250, 0.42);
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-overflow-scrolling: touch;
}

.grid-chord-suggestions[hidden] {
  display: none !important;
}

.grid-chord-suggestion {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  color: #ffffff;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.grid-chord-suggestion:hover,
.grid-chord-suggestion.is-active,
.grid-chord-suggestion[aria-selected="true"] {
  color: #ffffff;
  background: rgba(139, 92, 246, 0.30);
  outline: none;
}

.grid-span-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.grid-span-field .grid-editor-label {
  margin-bottom: 3px;
}

.grid-span-stepper {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 42px 48px 42px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 13px;
}

.grid-span-stepper button,
.grid-span-stepper span {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(139, 92, 246, 0.18);
  border: 0;
  font-size: 1.15rem;
  font-weight: 900;
}

.grid-span-stepper span {
  background: rgba(15, 23, 42, 0.72);
  border-left: 1px solid rgba(167, 139, 250, 0.20);
  border-right: 1px solid rgba(167, 139, 250, 0.20);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.grid-span-stepper button:disabled {
  opacity: 0.30;
  cursor: default;
}

.grid-row-editor-status {
  min-height: 21px;
  margin-top: 10px;
  color: #fca5a5;
  font-size: 0.78rem;
  line-height: 1.35;
}

.grid-row-editor-status[data-tone="ready"] {
  color: #86efac;
}

.grid-row-editor-status[data-tone="info"] {
  color: #c4b5fd;
}

.grid-row-editor-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.grid-row-editor-tools button {
  min-height: 42px;
  padding: 8px 9px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  font-size: 0.73rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

#grid-row-delete {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.20);
}

.grid-row-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.grid-row-editor-actions button {
  min-height: 50px;
  padding: 12px 16px;
  color: #ffffff;
  border: 0;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.grid-row-cancel {
  background: rgba(75, 85, 99, 0.90);
}

.grid-row-apply {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.24);
}

.grid-row-apply:disabled,
.grid-row-apply[aria-busy="true"] {
  opacity: 0.72;
  cursor: wait;
}

.grid-section-copy-targets {
  display: grid;
  gap: 9px;
  max-height: min(46vh, 360px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.grid-section-copy-target {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.grid-section-copy-target:hover,
.grid-section-copy-target:focus-visible {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(196, 181, 253, 0.36);
  outline: none;
}

.grid-section-copy-target[aria-pressed="true"] {
  background: rgba(139, 92, 246, 0.24);
  border-color: rgba(196, 181, 253, 0.58);
}

.grid-section-copy-check {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 900;
}

.grid-section-copy-target[aria-pressed="true"] .grid-section-copy-check {
  color: #ffffff;
  background: #8b5cf6;
  border-color: #a78bfa;
}

.grid-section-copy-name {
  display: block;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-section-copy-meta {
  display: block;
  margin-top: 3px;
  color: rgba(233, 213, 255, 0.58);
  font-size: 0.72rem;
  line-height: 1.25;
}

.grid-section-copy-empty {
  padding: 18px;
  color: rgba(233, 213, 255, 0.66);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(167, 139, 250, 0.24);
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.grid-section-copy-help {
  margin-top: 13px;
  color: rgba(233, 213, 255, 0.55);
  font-size: 0.74rem;
  line-height: 1.45;
}

.grid-section-copy-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 19px;
}

.grid-section-copy-actions button {
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 13px;
  font-size: 0.82rem;
  font-weight: 800;
}

#grid-section-copy-apply:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

@media (hover: none) {
  .add-view-choice-option:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .add-view-choice-card,
  .grid-row-editor-card,
  .grid-section-copy-card {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .add-view-choice-option {
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    gap: 11px;
    min-height: 82px;
    padding: 13px;
    border-radius: 17px;
  }

  .add-view-choice-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.65rem;
  }

  .add-view-choice-grid-icon {
    display: inline-flex;
  }

  .add-view-choice-grid-icon svg {
    width: 24px;
    height: 24px;
  }

  .chord-grid-section {
    padding: 14px !important;
  }

  .chord-grid-section-header-actions {
    gap: 5px;
  }

  .chord-grid-section-copy {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .chord-grid-row-shell {
    padding: 8px;
    border-radius: 12px;
  }

  .chord-grid-cell {
    height: 46px;
    padding-left: 1px;
    padding-right: 1px;
    border-radius: 6px;
    font-size: clamp(0.54rem, 2.45vw, 0.78rem);
  }

  .chord-grid-cell.is-medium .chord-grid-cell-text {
    font-size: 0.76em;
  }

  .chord-grid-cell.is-long .chord-grid-cell-text {
    max-width: 138%;
    font-size: 0.61em;
    transform: scaleX(0.76);
  }

  .grid-editor-beat-selector button {
    height: 44px;
    border-radius: 6px;
    font-size: 0.72rem;
  }

  .grid-editor-beat-number {
    font-size: 0.54rem;
  }

  .grid-editor-beat-chord {
    font-size: clamp(0.51rem, 2.25vw, 0.66rem);
  }

  .grid-chord-suggestions {
    max-height: 188px;
  }

  .grid-chord-suggestion {
    min-height: 44px;
    font-size: 0.92rem;
  }

  .grid-span-field {
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .grid-span-stepper {
    grid-template-columns: 38px 42px 38px;
  }

  .grid-span-stepper button,
  .grid-span-stepper span {
    height: 40px;
  }

  .grid-row-editor-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .chord-grid-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .chord-grid-row-shell {
    padding-left: 6px;
    padding-right: 6px;
  }

  .chord-grid-row-cells,
  .grid-editor-beat-selector {
    gap: 1px;
  }

  .chord-grid-cell {
    height: 43px;
    font-size: 0.53rem;
  }
}

/* ============================================================
   Mobile radial action menu
   Keeps the original action buttons and handlers intact while replacing
   their large mobile presentation with one compact circular trigger.
   ============================================================ */

.mobile-circle-menu {
  display: none;
}

@media (max-width: 640px) {
  #search-section {
    margin-bottom: 16px !important;
  }

  #primary-actions,
  #secondary-actions,
  #mobile-more-container {
    display: none !important;
  }

  .mobile-circle-menu {
    --mobile-circle-trigger-color: #7c3aed;
    position: relative;
    z-index: 40;
    isolation: isolate;
    width: 100%;
    min-height: 56px;
    display: flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
    overflow: visible;
  }

  .mobile-circle-menu.is-open {
    z-index: 120;
  }

  .mobile-circle-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgba(7, 7, 24, 0.54);
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: opacity 180ms ease, visibility 0s linear 260ms;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-circle-stage {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    overflow: visible;
  }

  .mobile-circle-items {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .mobile-circle-trigger,
  .mobile-circle-item {
    appearance: none;
    -webkit-appearance: none;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.24);
    outline: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .mobile-circle-trigger {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--mobile-circle-trigger-color);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.42),
      0 0 0 5px rgba(255, 255, 255, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
  }

  .mobile-circle-trigger::before,
  .mobile-circle-trigger::after {
    content: '';
    position: absolute;
    inset: -8px;
    z-index: -1;
    border: 1.5px solid rgba(233, 213, 255, 0.72);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .mobile-circle-menu:not(.is-open) .mobile-circle-trigger::before,
  .mobile-circle-menu:not(.is-open) .mobile-circle-trigger::after {
    animation: mobileCircleAttentionRipple 3.2s cubic-bezier(0.2, 0.72, 0.25, 1) infinite;
  }

  .mobile-circle-menu:not(.is-open) .mobile-circle-trigger::after {
    animation-delay: 1.6s;
  }

  .mobile-circle-menu.is-open .mobile-circle-trigger::before,
  .mobile-circle-menu.is-open .mobile-circle-trigger::after {
    animation: none;
    opacity: 0;
  }

  .mobile-circle-trigger:active {
    transform: scale(0.94);
  }

  .mobile-circle-trigger:focus-visible,
  .mobile-circle-item:focus-visible {
    outline: 3px solid rgba(233, 213, 255, 0.92);
    outline-offset: 3px;
  }

  .mobile-circle-trigger-icon {
    position: absolute;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 170ms ease, transform 230ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
  }

  .mobile-circle-trigger-icon svg,
  .mobile-circle-item-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .mobile-circle-trigger-open {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  .mobile-circle-trigger-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.62);
  }

  .mobile-circle-item {
    --mobile-menu-x: 0px;
    --mobile-menu-y: 0px;
    --mobile-menu-open-delay: 0ms;
    --mobile-menu-close-delay: 0ms;
    --mobile-circle-color: #8b5cf6;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -24px 0 0 -24px;
    padding: 0;
    background: var(--mobile-circle-color);
    border-radius: 999px;
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(0, 0, 0) scale(0.36);
    pointer-events: none;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition:
      transform 390ms cubic-bezier(0.2, 0.86, 0.25, 1.18),
      opacity 160ms ease,
      filter 190ms ease;
    transition-delay: var(--mobile-menu-close-delay);
  }

  .mobile-circle-item:active {
    filter: brightness(1.12);
  }

  .mobile-circle-item.is-active {
    box-shadow: 0 0 0 4px rgba(254, 202, 202, 0.34),
      0 9px 24px rgba(220, 38, 38, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }

  .mobile-circle-item-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .mobile-circle-menu.is-open .mobile-circle-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease, visibility 0s linear 0s;
  }

  .mobile-circle-menu.is-open .mobile-circle-trigger {
    filter: brightness(1.08);
    box-shadow: 0 15px 34px rgba(15, 23, 42, 0.50),
      0 0 0 6px rgba(255, 255, 255, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }

  .mobile-circle-menu.is-open .mobile-circle-trigger-open {
    opacity: 0;
    transform: rotate(90deg) scale(0.62);
  }

  .mobile-circle-menu.is-open .mobile-circle-trigger-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  .mobile-circle-menu.is-open .mobile-circle-items {
    pointer-events: auto;
  }

  .mobile-circle-menu.is-open .mobile-circle-item {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(var(--mobile-menu-x), var(--mobile-menu-y), 0) scale(1);
    pointer-events: auto;
    transition-delay: var(--mobile-menu-open-delay);
  }

  .mobile-circle-menu.is-open .mobile-circle-item:active {
    transform: translate3d(var(--mobile-menu-x), var(--mobile-menu-y), 0) scale(0.91);
  }

}

@media (max-width: 360px) {
  .mobile-circle-menu {
    min-height: 52px;
    flex-basis: 52px;
  }

  .mobile-circle-stage,
  .mobile-circle-trigger {
    width: 52px;
    height: 52px;
  }

  .mobile-circle-stage {
    flex-basis: 52px;
  }

  .mobile-circle-item {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
  }

  .mobile-circle-item-icon {
    width: 20px;
    height: 20px;
  }

}

@keyframes mobileCircleAttentionRipple {
  0% {
    opacity: 0;
    transform: scale(0.76);
  }
  15% {
    opacity: 0.58;
  }
  68%,
  100% {
    opacity: 0;
    transform: scale(1.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-circle-backdrop,
  .mobile-circle-trigger,
  .mobile-circle-trigger-icon,
  .mobile-circle-item {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .mobile-circle-trigger::before,
  .mobile-circle-trigger::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ============================================================
   CHORD GRID TIMING + INDEPENDENT VIEW SWITCH
   Scoped additions; the original Default View remains unchanged.
   ============================================================ */
.song-view-control-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.song-view-control-row > :first-child {
  justify-self: start;
}

.song-view-control-row > #song-tempo-inline {
  justify-self: end;
}

.song-view-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

.song-view-toggle {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 15px;
  color: #f3e8ff;
  background: rgba(139, 92, 246, 0.24);
  border: 1px solid rgba(196, 181, 253, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 22px rgba(76, 29, 149, 0.22);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.song-view-toggle:active {
  transform: scale(0.96);
}

.song-view-icon-list,
.song-view-toggle[data-current-view="grid"] .song-view-icon-grid {
  display: none;
}

.song-view-toggle[data-current-view="grid"] .song-view-icon-list {
  display: block;
}

#create-grid-view-modal {
  z-index: 9550 !important;
}

.create-grid-view-card {
  color: #ffffff;
  background: linear-gradient(145deg, rgba(30, 27, 75, 0.99), rgba(17, 24, 39, 0.99));
  border: 1px solid rgba(167, 139, 250, 0.24);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.create-grid-view-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.create-grid-view-actions button {
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.grid-editor-timing {
  padding: 15px;
  color: #ffffff;
  background: rgba(76, 29, 149, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.grid-editor-timing-heading,
.grid-editor-timing-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grid-editor-timing-heading {
  justify-content: space-between;
  margin-bottom: 13px;
}

.grid-editor-timing-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: rgba(233, 213, 255, 0.90);
  background: rgba(139, 92, 246, 0.20);
  border: 1px solid rgba(196, 181, 253, 0.18);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.grid-editor-timing-controls {
  justify-content: flex-end;
}

.grid-editor-signature-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-right: auto;
  color: rgba(233, 213, 255, 0.78);
  font-size: 0.70rem;
  font-weight: 800;
}

.grid-editor-signature-field .bpm-select {
  width: 100%;
  min-width: 92px;
  min-height: 44px;
  padding: 9px 12px;
  color: #ffffff;
  color-scheme: dark;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 12px;
  outline: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.grid-editor-signature-field .bpm-select:focus-visible {
  border-color: rgba(196, 181, 253, 0.82);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.grid-editor-signature-field .bpm-select option {
  color: #111827;
  background: #ffffff;
}

.grid-editor-tempo-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 14px;
  touch-action: manipulation;
}

#grid-editor-tempo-play .bpm-icon-pause {
  display: none;
}

#grid-editor-tempo-play[data-playing="true"] .bpm-icon-play {
  display: none;
}

#grid-editor-tempo-play[data-playing="true"] .bpm-icon-pause {
  display: block;
}

.grid-editor-tempo-readout {
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.66rem;
  line-height: 1;
}

.grid-editor-tempo-readout strong {
  margin-top: 3px;
  color: #ffffff;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
}

.bpm-grid-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 14px;
}

.bpm-grid-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(233, 213, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
}

.bpm-grid-option small {
  color: rgba(233, 213, 255, 0.55);
  font-size: 0.63rem;
  font-weight: 600;
}

.bpm-count-in-stepper {
  display: grid;
  grid-template-columns: 38px minmax(42px, 1fr) 38px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 11px;
}

.bpm-count-in-stepper button,
.bpm-count-in-stepper strong {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.055);
  border: 0;
  font-size: 1rem;
  font-weight: 800;
}

.bpm-count-in-stepper button {
  cursor: pointer;
}

.bpm-count-in-stepper button:disabled {
  opacity: 0.30;
  cursor: default;
}

.grid-default-export-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.grid-default-include {
  min-width: 122px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.grid-default-include-check {
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 6px;
}

.grid-default-include[aria-pressed="true"] {
  color: #ffffff;
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(196, 181, 253, 0.36);
}

.grid-default-include[aria-pressed="true"] .grid-default-include-check {
  color: #ffffff;
  background: #8b5cf6;
  border-color: #a78bfa;
}

.grid-row-editor-tools {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#grid-row-set-end {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.24);
}

.chord-grid-cell.is-default-selected {
  background: color-mix(in srgb, var(--grid-section-color, #8b5cf6) 30%, rgba(17, 24, 39, 0.84));
  border-color: color-mix(in srgb, var(--grid-section-color, #a78bfa) 70%, white 10%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grid-section-color, #a78bfa) 34%, transparent), 0 0 12px color-mix(in srgb, var(--grid-section-color, #8b5cf6) 22%, transparent);
}

.chord-grid-default-mark {
  position: absolute;
  z-index: 3;
  top: 2px;
  right: 3px;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--grid-section-color, #8b5cf6);
  border-radius: 999px;
  font-family: system-ui, sans-serif;
  font-size: 0.52rem;
  line-height: 1;
}

.chord-grid-cell.is-inactive,
.grid-editor-beat-selector button.is-inactive {
  opacity: 0.30;
  filter: saturate(0.45);
}

.chord-grid-cell.is-section-end {
  border-right: 2px solid #fbbf24;
}

.chord-grid-end-mark {
  position: absolute;
  z-index: 3;
  right: 2px;
  bottom: 2px;
  padding: 1px 3px;
  color: #fef3c7;
  background: rgba(146, 64, 14, 0.88);
  border-radius: 4px;
  font-family: system-ui, sans-serif;
  font-size: 0.42rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.grid-editor-beat-selector button.is-default-selected {
  color: #ffffff;
  background: rgba(16, 185, 129, 0.32);
  border-color: rgba(110, 231, 183, 0.48);
}

.chord-grid-playhead {
  position: absolute;
  z-index: 12;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: #fef08a;
  box-shadow: 0 0 7px rgba(253, 224, 71, 0.95), 0 0 15px rgba(250, 204, 21, 0.55);
  pointer-events: none;
  will-change: transform;
}

.grid-count-in-overlay {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease;
}

.grid-count-in-overlay.is-visible {
  opacity: 1;
}

.grid-count-in-overlay span {
  width: 94px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(30, 27, 75, 0.90);
  border: 2px solid rgba(196, 181, 253, 0.52);
  border-radius: 28px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45), 0 0 28px rgba(139, 92, 246, 0.34);
  font-size: 3rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .chord-grid-cell.is-default-selected {
    background: rgba(16, 185, 129, 0.28);
    border-color: rgba(110, 231, 183, 0.52);
    box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.22), 0 0 12px rgba(16, 185, 129, 0.18);
  }
}

@media (max-width: 640px) {
  #view-modal .song-view-control-card > .song-view-control-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #view-modal .glass-effect.rounded-xl.p-3.mb-4 > .flex.items-center.justify-between.gap-3.flex-wrap > .song-view-toggle-wrap {
    width: auto !important;
    min-width: 0 !important;
    justify-self: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #view-modal .song-view-control-row > :first-child,
  #view-modal .song-view-control-row > #song-tempo-inline {
    justify-self: stretch;
  }

  .grid-editor-timing-controls {
    display: grid;
    grid-template-columns: minmax(88px, 1fr) 44px 58px 44px;
    gap: 8px;
  }

  .grid-editor-signature-field {
    margin-right: 0;
  }

  .grid-default-export-field {
    align-items: stretch;
    flex-direction: column;
  }

  .grid-default-include {
    width: 100%;
  }

  .grid-row-editor-tools {
    grid-template-columns: 1fr;
  }

  .bpm-grid-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .grid-editor-timing {
    padding: 12px 10px;
  }

  .grid-editor-timing-heading {
    align-items: flex-start;
  }

  .grid-editor-timing-controls {
    grid-template-columns: minmax(76px, 1fr) 40px 48px 40px;
    gap: 5px;
  }

  .grid-editor-tempo-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .grid-count-in-overlay span {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    font-size: 2.5rem;
  }
}

/* v12: compact performance controls, optional live room, and cheaper scrolling. */
.song-chord-text { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.song-key-field { display: grid; gap: 7px; }
.song-key-field label { color: #d8b4fe; font-size: .875rem; font-weight: 600; }
.song-key-field select, .live-field input, #live-picker-search {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  background: #211c46; color: #fff; border: 1px solid rgba(196,181,253,.3);
  font: inherit; font-size: 16px; color-scheme: dark;
}
.song-key-field small { color: #b5a6d4; font-size: .75rem; line-height: 1.45; }
#view-modal .song-toolbar { padding: 10px !important; margin-bottom: 14px; border-radius: 15px; }
#view-modal .song-toolbar .song-view-control-row {
  display: grid !important; grid-template-columns: auto auto auto minmax(0,1fr) !important;
  gap: 12px !important; align-items: center; width: 100%;
}
#view-modal .song-toolbar .toolbar-group { display: flex !important; flex-direction: row !important; align-items: center; gap: 4px !important; width: auto !important; min-width: 0 !important; justify-self: start; }
#view-modal .song-toolbar #song-tempo-inline { justify-self: start; }
#view-modal .song-toolbar .toolbar-value { display: grid; align-items: center; text-align: center; min-width: 40px; padding: 0 2px; line-height: 1.15; }
#view-modal .song-toolbar .toolbar-value small { font-size: 9px; color: #c4b5fd; font-weight: 600; white-space: nowrap; }
#view-modal .song-toolbar #transpose-value, #view-modal .song-toolbar #song-tempo-value { font-size: 17px !important; font-variant-numeric: tabular-nums; line-height: 1.15 !important; }
#view-modal .song-toolbar button {
  width: 40px !important; height: 42px !important; min-width: 40px !important; min-height: 42px !important;
  padding: 0 !important; font-size: 18px !important; flex: 0 0 40px; border-radius: 10px !important;
  display: inline-flex !important; justify-content: center; align-items: center;
  color: #ede9fe; background: #403170; border: 1px solid rgba(196,181,253,.22);
  box-shadow: none; touch-action: manipulation; transition: background-color 120ms, border-color 120ms;
}
#view-modal .song-toolbar #transpose-up, #view-modal .song-toolbar #transpose-down,
#view-modal .song-toolbar #song-tempo-play, #view-modal .song-toolbar #song-tempo-settings {
  width: 40px !important; min-width: 40px !important; height: 42px !important; min-height: 42px !important;
}
#view-modal .song-toolbar button:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
#view-modal .song-toolbar button:hover { transform: none; }
#view-modal .song-toolbar button[aria-pressed='true'] { background: #146c5d; border-color: #6ee7b7; }
#view-modal .song-toolbar button[aria-disabled='true'] { opacity: .45; }
#view-modal .song-toolbar .song-view-toggle-wrap { display: flex; gap: 5px; padding: 0 !important; margin: 0; width: auto !important; min-width: 0 !important; background: transparent !important; border: 0 !important; }
.number-toggle-icon { font-size: 15px; font-weight: 800; letter-spacing: -.04em; }
#view-modal .song-toolbar .song-key-chip { justify-self: end; color: #e9d5ff; font-size: 11px; font-weight: 600; text-align: right; overflow-wrap: anywhere; line-height: 1.25; }
#view-modal #view-title { margin-bottom: 4px !important; }
#view-modal #view-description { font-size: .85rem; margin-bottom: 12px !important; line-height: 1.45; }
#view-modal #view-sections .draggable-section { position: relative; }
#view-modal .live-section-cue { position: absolute; right: 12px; top: 12px; padding: 5px 10px; font-size: 11px; color: #ddd6fe; border: 1px solid #67578a; background: #302451; border-radius: 7px; min-height: 32px; touch-action: manipulation; }
#view-modal .live-section-active { border-color: #6ee7b7 !important; box-shadow: inset 3px 0 #34d399; }
.live-view-banner { gap: 12px; justify-content: space-between; flex-wrap: wrap; color: #c4b5fd; font-size: 11px; margin: 8px 0; }
.live-view-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.live-view-actions:has(#live-view-next[hidden]) { grid-template-columns: 1fr; }
.live-view-actions button { padding: 10px 6px; font-size: 12px; }
.live-session-modal { z-index: 9600; overflow: hidden; color: #fff; }
.live-session-card { width: 100%; max-width: 680px; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px; border-radius: 22px; margin: auto; background: #19162f; }
.live-session-card [hidden], .live-view-actions [hidden] { display: none !important; }
.live-heading, .live-room-summary, .live-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.live-heading h2 { font-size: 24px; font-weight: 800; margin: 3px 0 0; }
.live-eyebrow { color: #6ee7b7; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.live-icon-button { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; font-size: 25px; color: #ddd6fe; border: 1px solid #514664; background: #282139; }
.live-subtitle { color: #c4b5fd; font-size: 14px; line-height: 1.5; margin: 18px 0; }
.live-field { display: grid; gap: 6px; font-size: 12px; color: #d8cff0; font-weight: 600; margin: 14px 0; }
.live-field input { font-weight: 400; }
.live-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #d8cff0; padding: 9px 0; line-height: 1.4; }
.live-check input, .live-picker-row input { width: 18px; height: 18px; accent-color: #8b5cf6; flex: 0 0 18px; }
.live-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #4b3d69; padding: 4px; background: #221c3b; border-radius: 13px; margin-top: 18px; }
.live-tabs button { padding: 10px; color: #c4b5fd; font-size: 13px; font-weight: 600; border-radius: 9px; }
.live-tabs button[aria-selected='true'] { color: #fff; background: #594194; }
.live-button { border: 1px solid #5b4b79; background: #302544; color: #f5f3ff; border-radius: 10px; font-size: 13px; font-weight: 600; padding: 10px 13px; min-height: 42px; touch-action: manipulation; }
.live-primary { background: #7851c7; border-color: #a78bfa; }
.live-danger { background: #572b3d; border-color: #a24b64; }
.live-full { width: 100%; margin-top: 14px; }
.live-small { min-height: 32px; padding: 5px 9px; font-size: 11px; }
.live-button:disabled, .live-section-cue:disabled, .song-toolbar button:disabled { opacity: .4; cursor: default; }
.live-button:focus-visible, .live-icon-button:focus-visible, .live-tabs button:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
.live-footnote { display: block; font-size: 11px; color: #aea0c7; line-height: 1.5; margin-top: 16px; }
.live-notice { margin: 12px 0; padding: 10px 12px; color: #b2f5df; background: #19312b; border-radius: 10px; font-size: 12px; line-height: 1.45; }
.live-notice:empty { display: none; }
.live-notice.is-error { color: #fde6b9; background: #3b2f24; }
.live-room-summary { margin: 20px 0 14px; align-items: start; }
.live-room-summary h3 { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.live-room-summary p { color: #a8dcca; font-size: 11px; margin-top: 5px; }
.live-code { display: grid; text-align: right; flex-shrink: 0; }
.live-code small { font-size: 9px; color: #a89abc; letter-spacing: .08em; }
.live-code strong { font-size: 16px; font-family: ui-monospace, monospace; letter-spacing: .07em; }
.live-room-tools, .live-playback-tools { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.live-section-heading { margin: 20px 0 10px; }
.live-section-heading h3 { font-size: 14px; font-weight: 700; }
.live-muted { color: #afa0c4; font-size: 12px; }
.live-lineup-list { display: grid; gap: 7px; list-style: none; margin: 12px 0; padding: 0; max-height: 280px; overflow: auto; }
.live-lineup-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #272038; border: 1px solid transparent; }
.live-lineup-row.is-current { border-color: #43997c; background: #223d35; }
.live-order { color: #b9a7dd; font-size: 12px; width: 20px; flex-shrink: 0; }
.live-song-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.live-local-options { display: grid; background: #241e36; padding: 10px 14px; border-radius: 12px; margin: 16px 0; }
.live-local-options small { font-size: 11px; color: #a99abb; line-height: 1.5; margin: 4px 0; }
.live-members { list-style: none; margin: 0; padding: 0; }
.live-members li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #352b46; font-size: 12px; }
.live-members small { font-size: 10px; color: #a99abb; }
.live-members span { overflow-wrap: anywhere; }
#live-password-tools { padding-top: 16px; font-size: 12px; color: #c4b5fd; }
#live-password-tools summary { cursor: pointer; }
.live-end-confirm { padding: 12px; margin-top: 12px; border: 1px solid #874158; border-radius: 10px; font-size: 13px; background: #3c2230; }
.live-picker { border: 1px solid #786097; padding: 12px; border-radius: 12px; margin: 14px 0; }
.live-picker h3 { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.live-picker-list { max-height: 300px; overflow: auto; margin-top: 12px; }
.live-picker-row { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #3b304d; padding: 9px 0; }
.live-picker-row label { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; font-size: 12px; }
.live-picker-row label span { overflow-wrap: anywhere; }
.live-picker-row small { color: #bba9da; padding: 0 4px; }
/* Scrolling cards and nearly opaque modals do not need separate GPU blur surfaces. */
.song-item, .glass-button, .modal-content { backdrop-filter: none; -webkit-backdrop-filter: none; }
.song-item { transition: background-color 120ms, border-color 120ms; }
.glass-button, .action-button { transition: background-color 120ms, border-color 120ms, opacity 120ms; }
@media (hover: none), (pointer: coarse) {
  .glass-effect, .modal-backdrop, .search-results, .options-menu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .animated-note, .mobile-circle-trigger::before, .mobile-circle-trigger::after { animation: none !important; }
  .song-item:hover, .glass-button:hover, .action-button:hover { transform: none !important; box-shadow: none; filter: none; }
}
@media (max-width: 600px) {
  #view-modal .song-toolbar .song-view-control-row { grid-template-columns: minmax(0,1fr) auto !important; gap: 8px !important; }
  #view-modal .song-toolbar .transpose-group { grid-row: 1; grid-column: 1; }
  #view-modal .song-toolbar .song-view-toggle-wrap { grid-row: 1; grid-column: 2; justify-self: end !important; }
  #view-modal .song-toolbar #song-tempo-inline { grid-row: 2; grid-column: 1; }
  #view-modal .song-toolbar .song-key-chip { grid-row: 2; grid-column: 2; max-width: 86px; }
  #view-modal .song-toolbar .toolbar-value { width: 50px !important; min-width: 50px !important; max-width: 50px; }
  #view-modal .song-toolbar .toolbar-value small { font-size: 9px !important; overflow: hidden; text-overflow: ellipsis; }
  .live-session-card { padding: 16px; max-height: calc(100dvh - 24px); }
  .live-members li { grid-template-columns: minmax(0,1fr) auto; }
  .live-members small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-session-modal *, .song-toolbar *, .song-item { transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   v13 REFINEMENT LAYER
   Same structure, controls and IDs; refined palette, spacing, proportions
   and type. Inspired by the Chord Application PRO look (navy surfaces,
   indigo primary, 1px borders), tuned for this app's controls.
   Token overlay is not styled here (its inline styles are untouched).
   No blur, no infinite animations, no large shadows on scrolling content.
   ===================================================================== */
:root {
  --c-bg: #0e1120;
  --c-bg-2: #0b0e1b;
  --c-surface: #161a2f;
  --c-surface-2: #1d2240;
  --c-surface-3: #262c50;
  --c-field: #10142a;
  --c-border: #2a3154;
  --c-border-strong: #3b4373;
  --c-text: #f1f3fb;
  --c-text-2: #bcc2da;
  --c-text-3: #8f97b6;
  --c-primary: #6a5cf0;
  --c-primary-hover: #7a6df5;
  --c-primary-press: #5a4bd9;
  --c-primary-soft: rgba(106, 92, 240, 0.18);
  --c-accent: #6fd6f2;
  --c-danger: #f2777a;
  --c-danger-solid: #d63d4c;
  --c-success: #2fbf86;
  --c-focus: #9ad9ff;
  --ring: 0 0 0 3px rgba(154, 217, 255, 0.28);
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --ctl-h: 44px;
  --gutter: 16px;
  --logo-h: 46px;
  --music-app-bg: radial-gradient(1100px 520px at 50% -200px, rgba(106, 92, 240, 0.26), rgba(106, 92, 240, 0) 70%), linear-gradient(180deg, #0e1120 0%, #0b0e1b 100%);
}

html, body { background-color: var(--c-bg) !important; background-image: var(--music-app-bg) !important; }
body { color: var(--c-text); -webkit-font-smoothing: antialiased; }
.app-wrapper, .mobile-only.app-wrapper { background: transparent !important; }

/* ---------- Palette remap of the utility colours used across dialogs ---------- */
.text-purple-200 { color: var(--c-text-2) !important; }
.text-purple-300 { color: var(--c-text-2) !important; }
.text-purple-400 { color: var(--c-text-3) !important; }
.bg-gray-600 { background-color: var(--c-surface-3) !important; }
.hover\:bg-gray-700:hover { background-color: #303761 !important; }
.border-purple-500\/30, .border-purple-500\/20 { border-color: var(--c-border) !important; }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.04) !important; }
.border-white\/10 { border-color: var(--c-border) !important; }

/* ---------- Shared surfaces ---------- */
.glass-effect { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.glass-button { background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong); color: var(--c-text) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
.glass-button:hover { background: #2e3560 !important; transform: none !important; }
.modal-backdrop { background: rgba(5, 7, 16, 0.72) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.modal-content {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: var(--c-text);
}
.modal-content h2 { letter-spacing: -0.01em; }

/* Inputs */
input:not([type='checkbox']):not([type='radio']):not([type='range']), textarea, select {
  background: var(--c-field) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  transition: border-color 120ms, box-shadow 120ms !important;
}
#tokenVerificationOverlay input { background: #fff !important; color: #333 !important; border: 2px solid #e5e7eb !important; border-radius: 8px !important; }
input::placeholder, textarea::placeholder { color: var(--c-text-3) !important; opacity: 1; }
input:not([type='checkbox']):not([type='radio']):not([type='range']):focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--c-focus) !important;
  box-shadow: var(--ring) !important;
}
button:focus-visible, [role='button']:focus-visible, .song-item:focus-visible { outline: 2px solid var(--c-focus) !important; outline-offset: 2px; }
button:disabled, button[aria-disabled='true'] { cursor: default; }

/* ---------- Stationary header ---------- */
.mobile-only.app-wrapper > .flex-1, .app-wrapper > .flex-1 {
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)) 0 calc(var(--gutter) + env(safe-area-inset-left, 0px)) !important;
}
#app-logo-wrap { margin: 0 0 10px !important; line-height: 0; flex: 0 0 auto; }
#app-logo {
  height: var(--logo-h) !important; width: auto !important; max-width: min(62vw, 300px) !important;
  object-fit: contain; margin: 0 auto !important; display: block;
}
#app-title-fallback { font-size: 22px !important; line-height: 1.2; margin: 4px 0 2px; }

#search-section { margin-bottom: 12px !important; flex: 0 0 auto; }
#search-section > .glass-effect { padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 14px !important; }
#search-input {
  height: 46px; padding: 0 16px 0 44px !important; font-size: 16px !important; border-radius: 14px !important;
  background-color: var(--c-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238f97b6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 15px 50% !important;
}

/* Search dropdown */
.search-results {
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important;
  border-radius: 14px !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  contain: content;
}
.search-result-item { content-visibility: auto; contain-intrinsic-size: auto 56px; border-radius: 10px !important; }
.search-result-item:hover, .search-result-item:active, .search-result-item.highlighted { background: rgba(255, 255, 255, 0.05) !important; }
.search-result-title { color: var(--c-text) !important; }
.search-result-description { color: var(--c-text-3) !important; }

/* Tablet action rows (phones keep the radial menu) */
#primary-actions { gap: 8px !important; margin-bottom: 8px !important; }
#secondary-actions { gap: 8px !important; margin-bottom: 14px !important; }
#primary-actions > button, #secondary-actions > button {
  min-height: var(--ctl-h); height: var(--ctl-h); padding: 0 10px !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.01em;
  color: var(--c-text) !important; background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important;
  box-shadow: none !important; transform: none !important; filter: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color 120ms, border-color 120ms !important;
}
#secondary-actions > button { height: 40px; min-height: 40px; font-size: 13px !important; color: var(--c-text-2) !important; background: transparent !important; }
#primary-actions > button::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--dot, var(--c-text-3));
}
#primary-actions > #add-btn { --dot: #fff; background: var(--c-primary) !important; border-color: var(--c-primary) !important; }
#primary-actions > #add-btn::before { display: none; }
#primary-actions > #remove-btn { --dot: #f2777a; color: #ffc7c9 !important; }
#primary-actions > #remove-btn.is-active { background: var(--c-danger-solid) !important; border-color: var(--c-danger-solid) !important; color: #fff !important; --dot: #fff; }
#primary-actions > #lineup-btn { --dot: #2fd0b5; }
#primary-actions > #keyfinder-btn { --dot: #f2b441; }
#primary-actions > #songchords-btn { --dot: #5aa2ff; }
#primary-actions > button:hover, #secondary-actions > button:hover { background: var(--c-surface-3) !important; }
#primary-actions > #add-btn:hover { background: var(--c-primary-hover) !important; }
#primary-actions > button:active, #secondary-actions > button:active { background: var(--c-surface-3) !important; }
#primary-actions > #add-btn:active { background: var(--c-primary-press) !important; }

/* Mobile radial trigger: smaller footprint, same behaviour */
@media (max-width: 640px) {
  #search-section { margin-bottom: 10px !important; }
  .mobile-circle-menu { min-height: 50px !important; flex: 0 0 50px !important; margin: 0 0 10px !important; }
  .mobile-circle-stage { width: 50px !important; height: 50px !important; flex-basis: 50px !important; }
  .mobile-circle-trigger { width: 50px !important; height: 50px !important; background: var(--c-primary) !important; border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important; }
  .mobile-circle-trigger-icon { width: 22px !important; height: 22px !important; }
  .mobile-circle-item { filter: none !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important; border-color: rgba(255, 255, 255, 0.2) !important; }
  .mobile-circle-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(5, 7, 16, 0.6) !important; }
  .mobile-circle-trigger::before, .mobile-circle-trigger::after { animation-iteration-count: 3 !important; }
}

/* ---------- Songs list (scrolls in its own area) ---------- */
#songs-panel { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
#songs-panel > h2 {
  font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-text-3) !important; margin: 0 2px 8px !important; line-height: 16px !important; flex: 0 0 auto;
}
#songs-list {
  scroll-behavior: auto !important;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: 14px;
}
#songs-list { display: flex !important; flex-direction: column; gap: 8px; }
#songs-list > * { margin-top: 0 !important; margin-bottom: 0 !important; flex: 0 0 auto; }
#songs-list .song-item {
  background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; border-radius: 14px !important;
  padding: 12px 8px 12px 14px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; transform: none !important;
  contain: layout style;
}
@media (hover: hover) and (pointer: fine) { #songs-list .song-item:hover { background: var(--c-surface-2) !important; border-color: var(--c-border-strong) !important; } }
#songs-list .song-item:active { background: var(--c-surface-2) !important; }
#songs-list .song-title {
  font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important; color: var(--c-text) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
#songs-list .song-description {
  font-size: 13.5px !important; line-height: 1.4 !important; margin-top: 3px !important; color: var(--c-text-2) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
#songs-list .section-sequence { font-size: 12px !important; line-height: 1.3; color: var(--c-text-3) !important; margin-top: 7px !important; gap: 4px 10px !important; }
#songs-list .section-sequence .w-2 { width: 7px !important; height: 7px !important; }
#songs-list .section-sequence .mx-1\.5 { display: none; }
#songs-list .more-options-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important;
  border-radius: 10px !important; color: var(--c-text-3) !important; font-size: 20px !important;
}
#songs-list .more-options-btn:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--c-text) !important; }
#songs-list .delete-btn { font-size: 20px !important; width: 40px; height: 40px; border-radius: 10px; background: rgba(214, 61, 76, 0.16) !important; }
#empty-state { padding: 40px 12px !important; color: var(--c-text-3) !important; }
#empty-state .text-5xl { font-size: 36px !important; margin-bottom: 10px !important; }
#empty-message { font-size: 15px !important; }

/* Floating ⋮ menu */
.options-menu {
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border-strong) !important; border-radius: 12px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55) !important;
}
.options-menu button { min-height: 46px; padding: 0 14px !important; font-size: 14px !important; color: var(--c-text) !important; }
.options-menu button + button { border-top: 1px solid var(--c-border) !important; }
.options-menu button:hover, .options-menu button:active { background: rgba(255, 255, 255, 0.06) !important; }
.options-menu .text-lg { font-size: 16px !important; }

/* ---------- Tablets: use the available width ---------- */
@media (min-width: 641px) {
  :root { --gutter: 24px; --logo-h: 58px; }
  .mobile-only.app-wrapper > .flex-1, .app-wrapper > .flex-1 { padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important; }
  #app-logo-wrap { margin-bottom: 12px !important; }
  #search-input { height: 48px; }
  #search-section { margin-bottom: 12px !important; }
  #songs-list .song-item { padding: 14px 10px 14px 16px !important; }
  #songs-list .song-title { font-size: 17px !important; }
  #songs-list .song-description { -webkit-line-clamp: 1; }
}
@media (min-width: 960px) {
  /* Landscape tablets: two columns of the same song cards */
  #songs-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
  #songs-list > #empty-state { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-height: 820px) and (orientation: landscape) {
  :root { --logo-h: 46px; }
  #app-logo-wrap { margin-bottom: 8px !important; }
  #primary-actions > button { height: 40px; min-height: 40px; }
  #secondary-actions > button { height: 36px; min-height: 36px; }
  #secondary-actions { margin-bottom: 10px !important; }
}
@media (max-width: 360px) {
  :root { --gutter: 12px; --logo-h: 40px; }
  #songs-list .song-title { font-size: 15px !important; }
}
@media (max-height: 600px) and (max-width: 640px) {
  :root { --logo-h: 36px; }
}

/* ---------- Dialog sizing ---------- */
.modal-content.p-6, .modal-content.sm\:p-8 { padding: 20px !important; }
@media (min-width: 641px) { .modal-content.p-6, .modal-content.sm\:p-8 { padding: 24px !important; } }
.modal-content h2.text-2xl { font-size: 21px !important; line-height: 1.25 !important; }
.modal-content h2.text-xl { font-size: 18px !important; }

/* Generic buttons inside dialogs: consistent height and radius */
.modal-content button.py-3, .modal-content label.py-3 { min-height: var(--ctl-h); padding-top: 0 !important; padding-bottom: 0 !important; border-radius: var(--r) !important; display: inline-flex; align-items: center; justify-content: center; }
.modal-content button.py-4 { min-height: 48px; padding-top: 0 !important; padding-bottom: 0 !important; border-radius: var(--r) !important; }
.modal-content button.flex-1 { display: inline-flex; align-items: center; justify-content: center; }
#view-edit-btn, #modal-submit-btn, #lineup-start-bottom-btn { background: var(--c-primary) !important; }
#lineup-edit-bottom-btn { background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; }
#view-cancel-btn, #modal-cancel { background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; }
#lineup-exit-btn, #view-exit-lineup-btn { background: rgba(214, 61, 76, 0.18) !important; border: 1px solid rgba(242, 119, 122, 0.45) !important; color: #ffc7c9 !important; }
#view-prev-btn { background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; }
#view-next-btn { background: var(--c-primary) !important; }

/* Phones: song, editor and lineup open as full-height sheets so content gets the width */
@media (max-width: 640px) {
  #view-modal, #song-modal, #lineup-modal { padding: 0 !important; }
  #view-modal > .modal-content, #song-modal > .modal-content, #lineup-modal > .modal-content {
    width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important;
    border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)) !important;
  }
  .modal-backdrop:not(#view-modal):not(#song-modal):not(#lineup-modal) { padding: 12px !important; }
  .modal-backdrop:not(#view-modal):not(#song-modal):not(#lineup-modal) > .modal-content { border-radius: var(--r-lg) !important; padding: 18px !important; }
}
@media (min-width: 641px) {
  #view-modal > .modal-content { max-width: min(920px, 100%) !important; }
}

/* ---------- Song view ---------- */
#view-modal #view-title { font-size: 21px !important; line-height: 1.25 !important; font-weight: 700 !important; margin: 0 0 4px !important; overflow-wrap: anywhere; }
#view-modal #view-description { font-size: 14px !important; line-height: 1.45 !important; color: var(--c-text-2) !important; margin: 0 0 12px !important; overflow-wrap: anywhere; }
@media (min-width: 641px) { #view-modal #view-title { font-size: 24px !important; } }

/* Compact performance control area: same order (Transpose, Grid/Default + Numbers, Tempo, Key) */
#view-modal .song-toolbar {
  background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important;
  border-radius: 14px !important; padding: 8px !important; margin-bottom: 12px !important;
}
#view-modal .song-toolbar .song-view-control-row { gap: 8px 10px !important; }
#view-modal .song-toolbar button {
  width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; flex-basis: 38px !important;
  border-radius: 10px !important; background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important;
  color: var(--c-text) !important; font-size: 19px !important; font-weight: 600;
}
#view-modal .song-toolbar #transpose-up, #view-modal .song-toolbar #transpose-down,
#view-modal .song-toolbar #song-tempo-play, #view-modal .song-toolbar #song-tempo-settings {
  width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important;
}
#view-modal .song-toolbar button:active { background: #323a68 !important; }
#view-modal .song-toolbar button[aria-pressed='true'] { background: var(--c-primary) !important; border-color: var(--c-primary) !important; color: #fff !important; }
#view-modal .song-toolbar #song-tempo-play.playing, #view-modal .song-toolbar #song-tempo-play[aria-pressed='true'] { background: var(--c-success) !important; border-color: var(--c-success) !important; }
#view-modal .song-toolbar button:disabled, #view-modal .song-toolbar button[aria-disabled='true'] { opacity: 0.4 !important; }
#view-modal .song-toolbar .toolbar-value { min-width: 46px !important; width: auto; padding: 0 2px; }
#view-modal .song-toolbar .toolbar-value small { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0; color: var(--c-text-3) !important; overflow: visible !important; text-overflow: clip !important; }
#view-modal .song-toolbar #transpose-value, #view-modal .song-toolbar #song-tempo-value { font-size: 17px !important; font-weight: 700; color: var(--c-text); }
#view-modal .song-toolbar .song-view-toggle-wrap { gap: 6px !important; }
#view-modal .song-toolbar .song-view-toggle { box-shadow: none !important; }
#view-modal .song-toolbar .song-view-toggle svg { width: 19px; height: 19px; }
#view-modal .song-toolbar .song-key-chip {
  justify-self: end; padding: 5px 10px; border-radius: 999px; background: rgba(111, 214, 242, 0.1);
  border: 1px solid rgba(111, 214, 242, 0.32); color: var(--c-accent) !important; font-size: 12px !important; font-weight: 700 !important;
  white-space: nowrap; line-height: 1.2 !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 600px) {
  #view-modal .song-toolbar .song-view-control-row { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  #view-modal .song-toolbar .transpose-group { grid-row: 1; grid-column: 1; }
  #view-modal .song-toolbar .song-view-toggle-wrap { grid-row: 1; grid-column: 3; }
  #view-modal .song-toolbar #song-tempo-inline { grid-row: 2; grid-column: 1; }
  #view-modal .song-toolbar .song-key-chip { grid-row: 2; grid-column: 2 / 4; max-width: none; }
  #view-modal .song-toolbar .toolbar-value { width: 52px !important; min-width: 52px !important; max-width: 52px !important; }
}
@media (min-width: 601px) {
  #view-modal .song-toolbar .song-view-control-row { grid-template-columns: auto auto auto minmax(0, 1fr) !important; gap: 14px !important; }
  #view-modal .song-toolbar .toolbar-group + .song-view-toggle-wrap, #view-modal .song-toolbar .song-view-toggle-wrap + .toolbar-group { position: relative; }
}

/* Sections: same colour identity, lighter frame, less padding */
#view-sections { --chord-base-size: 18px; --chord-min-size: 15px; }
#view-sections > * + * { margin-top: 10px !important; }
#view-sections .draggable-section { padding: 12px 14px !important; border-width: 1px !important; border-radius: 14px !important; }
#view-sections .draggable-section > .flex.items-center.gap-2.mb-3 { margin-bottom: 6px !important; }
#view-sections .draggable-section label { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.02em; }
#view-sections .song-chord-text {
  font-size: var(--chord-fit-size, var(--chord-base-size)) !important; line-height: 1.55 !important; font-weight: 500 !important;
  white-space: pre-wrap !important; overflow-wrap: break-word; word-break: normal; color: var(--c-text) !important;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Roboto Mono', monospace !important;
}
#view-sections.chord-fit-measure .song-chord-text { white-space: pre !important; overflow-wrap: normal !important; }
@media (min-width: 641px) {
  #view-sections { --chord-base-size: 21px; --chord-min-size: 16px; }
  #view-sections .draggable-section { padding: 14px 18px !important; }
}
#view-normal-buttons, #view-lineup-buttons { gap: 10px !important; margin-top: 14px; }
#view-sections.mb-6 { margin-bottom: 0 !important; }

/* ---------- Add / edit song ---------- */
#song-modal label.text-purple-300, #song-modal .song-key-field label { color: var(--c-text-2) !important; font-size: 13px !important; }
#song-modal .space-y-5 > * + * { margin-top: 16px !important; }
#song-modal input[type='text'], #song-modal textarea, #song-modal select { min-height: var(--ctl-h); font-size: 16px !important; }
#song-modal .section-btn {
  min-height: 42px; padding: 0 10px !important; border-radius: var(--r) !important; font-size: 13.5px !important; font-weight: 700 !important;
  box-shadow: none !important; transform: none !important; border: 1px solid rgba(255, 255, 255, 0.12);
}
#song-modal #section-picker { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; gap: 8px !important; }
#song-modal .song-key-field small { color: var(--c-text-3) !important; }
#song-modal .song-key-field select { background-color: var(--c-field) !important; }

/* ---------- Lineup ---------- */
#lineup-list .lineup-item { background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important; border-radius: 12px !important; padding: 12px 14px !important; }
#lineup-list.space-y-3 > * + * { margin-top: 8px !important; }
#lineup-autoplay-wrap { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; border-radius: 12px !important; padding: 10px 14px !important; }

/* ---------- Choice and grid dialogs ---------- */
.add-view-choice-option { background: var(--c-surface-2) !important; border: 1px solid var(--c-border) !important; border-radius: 14px !important; box-shadow: none !important; }
.add-view-choice-option:active, .add-view-choice-option:hover { border-color: var(--c-border-strong) !important; background: var(--c-surface-3) !important; }
.add-view-choice-close { background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; }
.grid-row-apply { background: var(--c-primary) !important; border-color: var(--c-primary) !important; box-shadow: none !important; }
.grid-row-cancel { background: var(--c-surface-3) !important; border-color: var(--c-border-strong) !important; box-shadow: none !important; }

/* ---------- Key finder: keep the design, stop the constant float/pulse ---------- */
.find-key-circle { animation: none !important; }
#keyfinder-modal .find-key-circle:hover { transform: none !important; }

/* ---------- Live Session ---------- */
.live-session-card { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; }
.live-button { background: var(--c-surface-3); border-color: var(--c-border-strong); }
.live-primary { background: var(--c-primary) !important; border-color: var(--c-primary) !important; }
.live-tabs { background: var(--c-field); border-color: var(--c-border); }
.live-tabs button[aria-selected='true'] { background: var(--c-primary); }
.live-local-options, .live-lineup-row { background: var(--c-surface-2); }

/* ---------- Toasts and update notice ---------- */
body > .glass-button.fixed { background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; max-width: calc(100vw - 32px); text-align: center; font-size: 14px; }
.app-update-notice {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 9500; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; max-width: calc(100vw - 24px);
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong); border-radius: 14px; color: var(--c-text);
  font-size: 13.5px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.app-update-notice[hidden] { display: none !important; }
.app-update-notice button { min-height: 36px; padding: 0 12px; border-radius: 10px; font-weight: 600; font-size: 13px; }
.app-update-notice .app-update-apply { background: var(--c-primary); color: #fff; }
.app-update-notice .app-update-later { color: var(--c-text-3); }

@media (prefers-reduced-motion: reduce) {
  .mobile-circle-trigger::before, .mobile-circle-trigger::after { animation: none !important; }
}
.search-result-action { background: var(--c-surface-3) !important; border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; box-shadow: none !important; border-radius: 10px !important; }
.search-result-action.lineup-btn { background: var(--c-primary-soft) !important; border-color: rgba(106, 92, 240, 0.55) !important; }
.search-result-action:active { background: #323a68 !important; }
#song-form .flex.gap-3 > button { font-size: 15px; line-height: 1.2; }
/* Short screens (small phones, phone landscape): tighter header and controls */
@media (max-height: 640px) and (max-width: 640px) {
  #view-modal .song-toolbar { padding: 6px !important; }
  #view-modal .song-toolbar .song-view-control-row { gap: 6px 8px !important; }
  #view-modal .song-toolbar button, #view-modal .song-toolbar #transpose-up, #view-modal .song-toolbar #transpose-down,
  #view-modal .song-toolbar #song-tempo-play, #view-modal .song-toolbar #song-tempo-settings { height: 36px !important; min-height: 36px !important; }
}
@media (min-width: 641px) and (max-height: 500px) {
  :root { --logo-h: 30px; }
  .mobile-only.app-wrapper > .flex-1, .app-wrapper > .flex-1 { padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important; }
  #app-logo-wrap { margin-bottom: 6px !important; }
  #search-input { height: 40px; }
  #search-section { margin-bottom: 8px !important; }
  #primary-actions { margin-bottom: 6px !important; }
  #primary-actions > button { height: 36px; min-height: 36px; }
  #secondary-actions > button { height: 32px; min-height: 32px; }
  #secondary-actions { margin-bottom: 8px !important; }
  #songs-panel > h2 { display: none; }
}