/* Kuerda — components.css: nav, sidebar, modals, auth, buttons, pro, freemium */

/* ── LICENSE GATE ── */
#licenseGate {
  position:fixed; inset:0; z-index:9998; background:rgba(4,4,10,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem;
}
.license-box {
  background:var(--panel); border:1px solid var(--border);
  border-top:3px solid var(--gold);
  max-width:480px; width:100%; padding:3.5rem 2.8rem; text-align:center;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}
.license-icon { font-size:3rem; margin-bottom:1.5rem; }
.license-title { font-family:'Syne',sans-serif; font-size:2.2rem; color:var(--text); margin-bottom:.5rem; }
.license-subtitle { font-size:.82rem; color:var(--muted); margin-bottom:2.2rem; line-height:1.7; }
.license-input {
  width:100%; background:var(--panel2); border:1px solid var(--border2); color:var(--text);
  font-family:DM Mono,monospace; font-size:1rem; padding:.9rem 1.2rem;
  text-align:center; letter-spacing:6px; text-transform:uppercase;
  border-radius:3px; margin-bottom:1rem; outline:none; transition:border-color .2s;
}
.license-input:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(245,197,24,.08); }
.license-input.error { border-color:var(--accent); animation:shake .4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.license-btn {
  width:100%; padding:1rem; background:var(--gold); border:none; color:#000;
  font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700;
  letter-spacing:3px; cursor:pointer; border-radius:3px; transition:all .25s; margin-bottom:1rem;
}
.license-btn:hover { background:#e0b000; box-shadow:0 4px 24px rgba(245,197,24,.35); transform:translateY(-1px); }
.license-error { font-size:.75rem; color:var(--accent); min-height:1.2rem; margin-bottom:.5rem; }
.license-hint { font-size:.68rem; color:#3a3a48; line-height:1.7; }
.license-hint strong { color:#555560; }

/* ── HERO ── */
/* .hero legacy rules removed — see #heroSection v2 */
/* .hero::before/after legacy removed */
.hero-title {
  font-family:'Syne',sans-serif; font-weight:900;
  font-size:clamp(4.5rem,14vw,11rem); line-height:.88;
  color:var(--text); letter-spacing:-3px;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.hero-title em {
  font-style:normal; color:var(--accent);
  text-shadow:0 0 80px rgba(255,107,53,.4), 0 2px 0 rgba(0,0,0,.5);
}
.hero-sub {
  font-family:'Syne',sans-serif; font-style:italic;
  font-size:clamp(1rem,3vw,1.5rem); color:var(--gold); letter-spacing:4px;
  margin:.8rem 0 3.5rem; opacity:.9;
}
.hero-nav-btn {
  background:transparent; border:1px solid var(--card-btn-border);
  color:var(--card-btn-text); font-family:'Outfit',sans-serif;
  font-weight:600; font-size:.68rem; letter-spacing:.8px;
  padding:.55rem 1rem; text-align:left; cursor:pointer;
  border-radius:3px; transition:all .18s; width:100%;
}
.hero-nav-btn:hover { color:var(--text); background:rgba(255,255,255,.03); }
.hero-nav-gold:hover  { border-color:rgba(201,168,76,.6); color:#e8c97e; }
.hero-nav-orange:hover { border-color:rgba(212,130,58,.6); color:#e09060; }
.hero-nav-purple:hover { border-color:rgba(154,94,200,.6); color:#c084e8; }

/* ── STICKY NAV ── */
/* ══════════════════════════════════════════════════
   DESKTOP NAV — REDESIGNED (clean, modern 2025)
══════════════════════════════════════════════════ */
.page-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .25rem;
  padding: 0 1.5rem;
  height: 56px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

/* Logo button */
.kn-logo {
  background: none; border: none; cursor: pointer;
  padding: 0; margin-right: .5rem; flex-shrink: 0;
}
.nav-logo {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem; 
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 0.9;
  background: linear-gradient(135deg, var(--teal) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  text-shadow: none;
}

/* Logo mobile */
@media (max-width: 768px) {
  .nav-logo { font-size: 1.1rem; }
}

/* Nav divider */
.nav-divider {
  width: 1px; height: 20px;
  background: var(--border); flex-shrink: 0;
  margin: 0 .5rem;
}

/* Nav pill buttons (the top-level items) */
.nav-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text2);
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .3px;
  cursor: pointer; border-radius: var(--radius-pill);
  transition: all .15s ease; white-space: nowrap;
  touch-action: manipulation;
  height: 36px;
}
.nav-pill svg { opacity: .7; flex-shrink: 0; }
.nav-caret { opacity: .5; transition: transform .2s ease; }
.nav-pill:hover {
  color: var(--text);
  background: rgba(255,255,255,.05);
  border-color: var(--border);
}
.nav-pill:hover .nav-caret { transform: rotate(180deg); }
.nav-pill:active { transform: scale(.97); }
.nav-pill.nav-active {
  color: var(--teal);
  background: rgba(0,212,180,.08);
  border-color: rgba(0,212,180,.2);
}

/* Legacy .page-btn kept for JS compatibility */
.page-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem;
  background: transparent; border: 1px solid transparent;
  color: var(--text2);
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .3px;
  cursor: pointer; border-radius: var(--radius-pill);
  transition: all .15s ease; white-space: nowrap;
  touch-action: manipulation; height: 36px;
}
.page-btn:hover { color: var(--teal); background: rgba(0,212,180,.06); border-color: rgba(0,212,180,.2); }
.page-btn:active { transform: scale(.97); }

/* ── DROPDOWN MENUS ── */
.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px); left: 0;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 12px;
  min-width: 220px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,180,.06);
  z-index: 1000; overflow: hidden;
  animation: navDropIn .18s cubic-bezier(.16,1,.3,1);
}
.nav-dropdown-menu.open { display: block; }
.nav-menu-wide { min-width: 420px; }
.nav-menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.nav-menu-cols > div { padding: .5rem 0; }
.nav-menu-cols > div:first-child { border-right: 1px solid var(--border); }

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-menu-header {
  padding: .6rem 1rem .3rem;
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--teal);
}

.nav-menu-item {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; padding: .6rem 1rem;
  background: transparent; border: none;
  color: var(--text2); font-family: 'Outfit', sans-serif;
  font-size: .78rem; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: all .12s ease;
  touch-action: manipulation;
}
.nav-menu-item:hover {
  background: rgba(0,212,180,.06);
  color: var(--text);
  padding-left: 1.2rem;
}
.nav-item-icon { font-size: .95rem; flex-shrink: 0; width: 20px; text-align: center; }
.nav-item-tag {
  margin-left: auto; font-family: 'DM Mono', monospace;
  font-size: .48rem; letter-spacing: 1px;
  color: var(--muted); flex-shrink: 0;
}
.nav-item-new {
  margin-left: auto; font-family: 'DM Mono', monospace;
  font-size: .45rem; letter-spacing: 1px;
  color: var(--purple); background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.25);
  padding: .1rem .35rem; border-radius: 4px; flex-shrink: 0;
}

/* Legacy dropdown items */
.nav-drop-section-label {
  padding: .6rem 1rem .3rem;
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--teal); opacity: .8;
}
.nav-drop-item {
  display: flex !important; align-items: center !important;
  width: 100% !important; padding: .6rem 1rem !important;
  background: transparent !important; border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text2) !important; font-family: 'Outfit', sans-serif !important;
  font-size: .78rem !important; font-weight: 500 !important;
  cursor: pointer !important; text-align: left !important;
  transition: all .12s ease !important;
  letter-spacing: 0 !important;
}
.nav-drop-item:last-child { border-bottom: none !important; }
.nav-drop-item:hover {
  background: rgba(0,212,180,.06) !important;
  color: var(--text) !important;
  padding-left: 1.2rem !important;
  border-left: none !important;
}
.nav-drop-item.active { color: var(--teal) !important; background: rgba(0,212,180,.05) !important; }

/* nav-sep legacy */
.nav-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; margin: 0 .3rem; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.theme-toggle {
  position:fixed; bottom:1.2rem; left:1.2rem; z-index:960;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  border:1px solid var(--border2);
  color:var(--muted);
  cursor:pointer;
  border-radius:50%;
  font-size:1rem;
  transition:all .2s;
  padding:0;
}
.theme-toggle:hover {
  border-color:var(--gold);
  background:rgba(245,197,24,.08);
}
.theme-toggle:hover { border-color:var(--gold); color:var(--gold); }
.tt-icon { font-size:.9rem; }

/* ── NAV DROPDOWN ── */
/* .nav-dropdown-menu: merged into modern definition above */
.nav-drop-section-label {
  padding:.5rem 1rem; font-size:.52rem; letter-spacing:3px;
  text-transform:uppercase; opacity:.7; color:var(--gold);
}
.nav-drop-item {
  display:block !important; width:100% !important; text-align:left !important;
  border:none !important; border-bottom:1px solid var(--nav-drop-item-border) !important;
  border-radius:0 !important; padding:.52rem 1rem .52rem 1.2rem !important;
  font-size:.63rem !important; letter-spacing:.8px !important;
  transition:all .14s !important; color:var(--nav-drop-item-text) !important;
  background:transparent !important;
}
.nav-drop-item:last-child { border-bottom:none !important; }
.nav-drop-item:hover {
  background:rgba(255,107,53,.07) !important; color:var(--text) !important;
  border-left:2px solid var(--accent) !important; padding-left:calc(1.2rem - 2px) !important;
}
.nav-drop-item.active { color:var(--accent) !important; background:rgba(255,107,53,.05) !important; }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:1000; justify-content:center; align-items:center; padding:1.5rem; backdrop-filter:blur(6px); }
.modal-overlay.open { display:flex; }
.modal {
  background: linear-gradient(160deg, var(--panel) 0%, var(--surface) 100%);
  border: 1px solid var(--border2);
  border-top: 2px solid var(--accent);
  max-width: 700px; width: 100%; padding: 2.5rem; max-height: 88vh;
  overflow-y: auto; position: relative;
  overscroll-behavior: contain;
  overscroll-behavior: contain;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lift);
  will-change: transform;
  will-change: transform;
  will-change: transform;
}
@keyframes modalIn { from{opacity:0;transform:translateY(20px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-title { font-family:'Syne',sans-serif; font-size:2rem; color:var(--text); }
.modal-close { float:right; background:none; border:none; color:var(--muted); font-size:1.5rem; cursor:pointer; transition:color .2s; }
.modal-close:hover { color:var(--accent); }
.modal-body { margin-top:1.2rem; font-size:.85rem; color:var(--muted); line-height:1.85; }
.modal-body h4 { color:var(--gold); font-family:'Syne',sans-serif; font-size:1.2rem; margin:1.4rem 0 .5rem; }
.modal-body code { background:rgba(255,107,53,.12); color:var(--accent); padding:.1rem .5rem; border-radius:3px; }
.modal-body strong { color:var(--text2); }
.modal-body em { color:var(--teal); font-style:italic; }
.modal-body .tab {
  font-family:DM Mono,monospace; font-size:.72rem;
  background:var(--bg); padding:1rem 1.2rem; white-space:pre; overflow-x:auto;
  line-height:2.1; color:var(--text2); margin:.6rem 0;
  border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 3px 3px 0;
}
.modal-body p { margin-bottom:.9rem; }

/* ── METRONOME ── */
.metro-section { background:var(--panel); border:1px solid var(--border); padding:2.5rem 2rem; margin-top:2rem; border-radius:4px; }
.metro-display {
  text-align:center; font-family:'Syne',sans-serif; font-weight:900;
  font-size:5.5rem; color:var(--gold); line-height:1;
  text-shadow:0 0 50px rgba(245,197,24,.25);
  transition:all .06s;
}
.metro-display.beat { color:#fff; text-shadow:0 0 60px rgba(255,255,255,.5); transform:scale(1.03); }
.metro-beat-bar { display:flex; justify-content:center; gap:.7rem; margin:1.5rem 0; }
.metro-dot {
  width:14px; height:14px; border-radius:50%; border:2px solid var(--border3); transition:all .06s;
}
.metro-dot.accent { border-color:var(--gold); }
.metro-dot.on { background:var(--gold); box-shadow:0 0 14px var(--gold); }
.metro-dot.on-weak { background:var(--muted); }
.metro-controls { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center; margin-top:1.5rem; }
.metro-bpm-wrap { display:flex; align-items:center; gap:1rem; }
input[type=range] { -webkit-appearance:none; appearance:none; width:200px; height:3px; background:var(--border2); border-radius:2px; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--gold); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.metro-tap {
  padding:.5rem 1.6rem; background:transparent; border:2px solid var(--purple);
  color:var(--purple); font-family:DM Mono,monospace; font-size:.78rem;
  letter-spacing:2px; cursor:pointer; border-radius:3px; transition:all .15s;
}
.metro-tap:active { background:var(--purple); color:#fff; transform:scale(.97); }
.metro-start {
  padding:.75rem 2.8rem; background:var(--teal); border:none; color:#000;
  font-family:'Syne',sans-serif; font-size:1rem; letter-spacing:2px;
  cursor:pointer; border-radius:3px; transition:all .2s; font-weight:700;
}
.metro-start:hover { background:var(--teal2); box-shadow:0 4px 24px rgba(0,229,204,.35); }
.metro-signature { display:flex; gap:.4rem; }
.metro-sig-btn {
  padding:.4rem .8rem; background:transparent; border:1px solid var(--border2);
  color:var(--muted); font-family:DM Mono,monospace; font-size:.72rem;
  cursor:pointer; border-radius:3px; transition:all .2s;
}
.metro-sig-btn.active { background:var(--purple); border-color:var(--purple); color:#fff; }
.metro-tempo-labels { display:flex; justify-content:space-between; font-size:.58rem; color:var(--muted2); width:200px; letter-spacing:1px; }

/* ── BACKING TRACKS ── */
.backing-section { background:var(--panel); border:1px solid var(--border); padding:2rem; margin-top:2rem; border-radius:4px; }
.backing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:1.5rem; align-items:start; }
.backing-card {
  background:var(--bg); border:1px solid var(--border);
  padding:1.3rem; cursor:pointer; transition:all .22s;
  position:relative; overflow:hidden; border-radius:3px;
}
.backing-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.backing-card.playing { border-color:var(--teal); background:rgba(0,229,204,.04); }
.backing-genre { font-size:.58rem; letter-spacing:3px; text-transform:uppercase; color:var(--muted2); margin-bottom:.4rem; }
.backing-name { font-family:'Syne',sans-serif; font-size:1.1rem; color:var(--text); margin-bottom:.3rem; }
.backing-key { font-size:.75rem; color:var(--accent); margin-bottom:.5rem; }
.backing-scale { font-size:.7rem; color:var(--muted); }
.backing-bpm {
  position:absolute; top:.8rem; right:.8rem; font-size:.68rem; color:var(--gold);
  background:rgba(245,197,24,.08); padding:.2rem .55rem; border-radius:20px;
  border:1px solid rgba(245,197,24,.15);
}
.backing-play-btn {
  margin-top:.8rem; width:100%; padding:.5rem; background:transparent;
  border:1px solid var(--border2); color:var(--muted);
  font-family:DM Mono,monospace; font-size:.7rem; cursor:pointer;
  border-radius:3px; transition:all .2s; letter-spacing:1px;
}
.backing-card.playing .backing-play-btn { border-color:var(--teal); color:var(--teal); }
.backing-card:hover .backing-play-btn { border-color:var(--accent); color:var(--accent); }
.backing-card.bt-unavailable { opacity:.55; pointer-events:none; }
.backing-card.bt-unavailable .backing-play-btn { opacity:.4; cursor:not-allowed; }
.backing-card.bt-unavailable:hover { transform:none; box-shadow:none; border-color:var(--border2); }
/* Speed slider custom track */
#btSpeedSlider { -webkit-appearance:none; appearance:none; background:var(--border2); border-radius:2px; outline:none; }
#btSpeedSlider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--teal); cursor:pointer; box-shadow:0 0 0 3px rgba(0,212,170,.15); transition:box-shadow .15s; }
#btSpeedSlider::-webkit-slider-thumb:hover { box-shadow:0 0 0 5px rgba(0,212,170,.25); }
#btSpeedSlider::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--teal); cursor:pointer; border:none; }
.bt-speed-preset:hover { background:rgba(255,255,255,.06) !important; color:var(--text2) !important; }

/* ── PROGRESS TRACKER ── */
.progress-section { background:var(--panel); border:1px solid var(--border); padding:1.5rem 2rem; margin-top:2rem; border-radius:4px; }
.progress-title { font-family:'Syne',sans-serif; font-size:1.3rem; color:var(--text); margin-bottom:1.2rem; }
.progress-item { display:flex; align-items:center; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--border); }
.progress-check {
  width:20px; height:20px; border:2px solid var(--border3); border-radius:3px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .15s;
}
.progress-check.done { background:var(--teal); border-color:var(--teal); color:#000; font-size:.7rem; }
.progress-label { font-size:.8rem; color:var(--muted); flex:1; }
.progress-label.done { color:var(--teal); text-decoration:line-through; }
.progress-bar-outer { width:100%; height:5px; background:var(--surface2); border-radius:3px; margin-top:1rem; overflow:hidden; }
.progress-bar-inner { height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:3px; transition:width .5s ease; }

/* ── TUNER ── */
.tuner-wrap { max-width:520px; margin:0 auto; text-align:center; }
.tuner-display {
  width:200px; height:200px; border-radius:50%; margin:0 auto 2rem;
  border:3px solid var(--border2); background:var(--panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden; transition:border-color .3s, box-shadow .3s;
  box-shadow:0 0 40px rgba(0,0,0,.4);
}
.tuner-display.in-tune { border-color:var(--teal); box-shadow:0 0 50px rgba(0,229,204,.3); }
.tuner-display.sharp { border-color:var(--accent); box-shadow:0 0 40px rgba(255,107,53,.25); }
.tuner-display.flat { border-color:var(--purple); box-shadow:0 0 40px rgba(155,93,229,.25); }
.tuner-note { font-family:'Syne',sans-serif; font-size:5rem; font-weight:900; color:var(--text); line-height:1; }
.tuner-freq { font-family:DM Mono,monospace; font-size:.75rem; color:var(--muted); margin-top:.3rem; }
.tuner-cents { font-family:DM Mono,monospace; font-size:1.1rem; font-weight:700; margin-top:.3rem; }
.tuner-meter { width:90%; height:5px; background:var(--border2); border-radius:3px; margin:1rem auto 0; position:relative; overflow:visible; }
.tuner-meter-fill { height:100%; border-radius:3px; transition:width .1s, background .1s; }
.tuner-needle { position:absolute; top:-9px; width:3px; height:23px; background:var(--gold); border-radius:2px; transform:translateX(-50%); transition:left .1s; }
.tuner-strings-ref { display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; margin-top:2rem; }
.tuner-string-ref {
  background:var(--panel); border:1px solid var(--border2);
  padding:.7rem .4rem; text-align:center; cursor:pointer;
  transition:all .2s; border-radius:3px;
}
.tuner-string-ref:hover { border-color:var(--gold); transform:translateY(-2px); }
.tuner-string-ref .str-name { font-family:'Syne',sans-serif; font-size:1.4rem; }
.tuner-string-ref .str-note { font-family:DM Mono,monospace; font-size:.65rem; color:var(--muted); }
.tuner-btn {
  padding:.75rem 2.2rem; background:var(--teal); border:none; color:#000;
  font-family:'Syne',sans-serif; font-size:1rem; letter-spacing:2px;
  cursor:pointer; border-radius:3px; transition:all .2s; margin:.5rem; font-weight:700;
}
.tuner-btn:hover { background:var(--teal2); box-shadow:0 4px 20px rgba(0,229,204,.3); }
.tuner-btn.stop { background:transparent; border:1px solid rgba(255,107,53,.4); color:var(--accent); }
.tuner-btn.stop:hover { background:rgba(255,107,53,.1); }
.tuner-status { font-size:.78rem; color:var(--muted); margin-top:1rem; min-height:1.5rem; }

/* ── CHORD FINDER ── */
.chord-finder-wrap { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media(max-width:700px){ .chord-finder-wrap { grid-template-columns:1fr; } }
.chord-finder-fret { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.cf-string { display:flex; flex-direction:column; align-items:center; gap:3px; }
.cf-string-label { font-family:DM Mono,monospace; font-size:.6rem; color:var(--muted); }
.cf-fret-btn {
  width:36px; height:26px; background:var(--panel2); border:1px solid var(--border2);
  color:var(--muted); font-family:DM Mono,monospace; font-size:.7rem;
  cursor:pointer; border-radius:3px; transition:all .15s;
}
.cf-fret-btn:hover { border-color:var(--accent); color:var(--text); }
.cf-fret-btn.selected { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.cf-fret-btn.open { background:rgba(0,229,204,.12); border-color:var(--teal); color:var(--teal); }
.cf-fret-btn.muted { background:rgba(255,107,53,.1); border-color:var(--accent); color:var(--accent); }
.chord-result-box {
  background:var(--panel); border:1px solid var(--border2);
  border-top:3px solid var(--gold); padding:1.5rem; min-height:200px; border-radius:0 0 4px 4px;
}
.chord-name-big { font-family:'Syne',sans-serif; font-size:3rem; color:var(--gold); line-height:1; }
.chord-alias { font-size:.8rem; color:var(--muted); margin-top:.3rem; }
.chord-intervals-display { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1rem; }
.chord-interval-pill {
  background:rgba(155,93,229,.12); border:1px solid rgba(155,93,229,.25);
  color:var(--purple); font-family:DM Mono,monospace; font-size:.68rem;
  padding:.25rem .6rem; border-radius:20px;
}

/* ── TRANSPOSITOR ── */
.transpositor-wrap { background:var(--panel); border:1px solid var(--border); border-top:3px solid var(--teal); padding:2rem; margin-top:2rem; border-radius:0 0 4px 4px; }
.transpose-keys { display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0; }
.transpose-key-btn {
  padding:.4rem .9rem; background:transparent; border:1px solid var(--border2);
  color:var(--muted); font-family:DM Mono,monospace; font-size:.72rem;
  cursor:pointer; border-radius:20px; transition:all .2s;
}
.transpose-key-btn:hover { border-color:var(--teal); color:var(--text2); }
.transpose-key-btn.active { background:var(--teal); border-color:var(--teal); color:#000; font-weight:700; }
.transpose-result { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.5rem; margin-top:1rem; }
.transpose-chord-item { background:var(--bg); border:1px solid var(--border); padding:.7rem; text-align:center; border-radius:3px; }
.transpose-chord-orig { font-size:.62rem; color:var(--muted2); font-family:DM Mono,monospace; }
.transpose-chord-new { font-family:'Syne',sans-serif; font-size:1.3rem; color:var(--gold); }
.transpose-input {
  width:100%; background:var(--panel2); border:1px solid var(--border2); color:var(--text);
  font-family:DM Mono,monospace; font-size:.9rem; padding:.65rem 1rem;
  border-radius:3px; outline:none; margin-bottom:.5rem; transition:border-color .2s;
}
.transpose-input:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,229,204,.06); }

/* ── SEARCH BAR ── */
.search-bar-wrap { position:relative; max-width:500px; margin:1.5rem auto; }
.search-input {
  width:100%; background:var(--panel); border:1px solid var(--border2);
  color:var(--text); font-family:DM Mono,monospace; font-size:.85rem;
  padding:.8rem 1rem .8rem 2.8rem; border-radius:6px; outline:none; transition:all .2s;
}
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,107,53,.08); }
.search-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--muted); font-size:1rem; pointer-events:none; }
.search-results-dropdown {
  position:absolute; top:100%; left:0; right:0; background:var(--panel);
  border:1px solid var(--border2); border-top:none; border-radius:0 0 8px 8px;
  z-index:200; max-height:300px; overflow-y:auto; display:none;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.search-result-item { padding:.75rem 1rem; cursor:pointer; border-bottom:1px solid var(--border); transition:background .15s; font-size:.82rem; }
.search-result-item:hover { background:var(--panel2); }
.search-result-item .sr-type { font-size:.62rem; color:var(--accent); letter-spacing:1.5px; font-weight:700; margin-bottom:.2rem; }
.search-result-item .sr-title { color:var(--text2); }

/* ── NOTES REF ── */
.notes-ref { display:grid; grid-template-columns:repeat(12,1fr); gap:2px; margin:1rem 0; font-size:.65rem; text-align:center; }
.note-cell { background:var(--panel2); border:1px solid var(--border); padding:.45rem .2rem; color:var(--muted); border-radius:2px; }
.note-cell.sharp { background:rgba(155,93,229,.08); color:var(--purple); }
.note-cell.root-note { background:rgba(255,107,53,.15); color:var(--accent); border-color:rgba(255,107,53,.3); }

/* ── HELP OVERLAY ── */
#helpOverlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.92); z-index:2000;
  justify-content:center; align-items:center; padding:1rem;
  backdrop-filter:blur(8px);
}
#helpOverlay.open { display:flex; }
.help-box {
  background:var(--panel); border:1px solid var(--border2);
  border-top:3px solid var(--teal); max-width:580px; width:100%;
  padding:2.5rem; position:relative; border-radius:0 0 8px 8px;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  animation:modalIn .28s cubic-bezier(.16,1,.3,1);
}
.help-title { font-family:'Syne',sans-serif; font-size:2rem; color:var(--text); margin-bottom:2rem; }
.help-step { display:flex; gap:1.5rem; margin-bottom:1.5rem; align-items:flex-start; }
.help-num { font-family:'Syne',sans-serif; font-size:3rem; color:var(--teal); line-height:1; flex-shrink:0; width:50px; opacity:.7; }
.help-step-body h4 { font-family:'Syne',sans-serif; color:var(--text); margin-bottom:.4rem; }
.help-step-body p { font-size:.82rem; color:var(--muted); line-height:1.7; }
.help-close { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--muted); font-size:1.5rem; cursor:pointer; transition:color .2s; }
.help-close:hover { color:var(--accent); }

/* ── FOOTER ── */
footer {
  text-align:center; padding:3.5rem 2rem;
  font-size:.72rem; color:var(--muted2);
  border-top:1px solid var(--footer-border);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.2));
}
footer span { color:var(--accent); }

/* ── SCROLLBAR — see Visual Remaster FINAL block below for active rules ── */
════════════════════════════════════════ */

/* ── Locked overlay (blur + lock icon) ── */
.pro-gate {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.pro-gate-blur {
  filter: blur(4px) brightness(.7);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.pro-gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(6,6,14,.75);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 10;
  cursor: pointer;
  transition: background .2s;
  border-radius: 4px;
  border: 1px solid rgba(245,197,24,.2);
  text-align: center;
  padding: 1.5rem;
  gap: .6rem;
}
.pro-gate-overlay:hover { background: rgba(6,6,14,.85); border-color: rgba(245,197,24,.45); }
.pro-gate-icon {
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(245,197,24,.5));
}
.pro-gate-label {
  font-family: 'DM Mono', monospace;
  font-size: .55rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.pro-gate-sublabel {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 260px;
}
.pro-gate-btn {
  margin-top: .6rem;
  padding: .55rem 1.6rem;
  background: linear-gradient(135deg, var(--gold) 0%, #D99B00 100%);
  color: #000;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(240,174,26,.3);
  transition: all .18s cubic-bezier(.16,1,.3,1);
}
.pro-gate-btn:hover { background: var(--gold2); transform: scale(1.04); }

/* ── Usage counter badge ── */
.pro-usage-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: 1px;
  padding: .28rem .7rem;
  border-radius: 20px;
  border: 1px solid var(--border2);
  color: var(--muted);
  margin-left: .5rem;
}
.pro-usage-badge.warn { border-color: rgba(245,197,24,.4); color: var(--gold); }
.pro-usage-badge.empty { border-color: rgba(255,107,53,.4); color: var(--accent); }

/* ── PRO Upgrade Modal ── */
#proModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: fadeIn .2s ease;
}
#proModal.open { display: flex; }
.pro-modal-box {
  background: linear-gradient(160deg, #0f0f26 0%, #0b0b1e 100%);
  border: 1px solid rgba(240,174,26,.2);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 2.5rem 2rem 2rem;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,.8), 0 0 60px rgba(240,174,26,.05);
}
.pro-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: rgba(255,255,255,.07);
  border: none; color: var(--muted);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.pro-modal-close:hover { background: rgba(255,255,255,.15); color: var(--text); }
.pro-modal-icon { font-size: 2.5rem; text-align: center; margin-bottom: .8rem; }
.pro-modal-title {
  font-family: 'Bebas Neue', serif;
  font-size: 2rem;
  letter-spacing: 3px;
  color: var(--gold);
  text-align: center;
  margin-bottom: .3rem;
}
.pro-modal-subtitle {
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 1.4rem;
  line-height: 1.6;
}
.pro-modal-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin-bottom: 1.6rem;
}
.pro-modal-feat {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--text2);
  background: rgba(255,255,255,.04);
  padding: .5rem .7rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.pro-modal-feat-icon { font-size: 1rem; flex-shrink: 0; }
.pro-modal-price {
  text-align: center;
  margin-bottom: 1.2rem;
}
.pro-modal-price-main {
  font-family: 'Bebas Neue', serif;
  font-size: 3rem;
  color: var(--text);
  letter-spacing: 2px;
  line-height: 1;
}
.pro-modal-price-sub {
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: 2px;
  font-family: 'DM Mono', monospace;
}
.pro-modal-cta {
  display: block;
  width: 100%;
  padding: .9rem;
  background: var(--gold);
  color: #000;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s;
  margin-bottom: .6rem;
}
.pro-modal-cta:hover { background: var(--gold2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245,197,24,.3); }
.pro-modal-note {
  text-align: center;
  font-size: .6rem;
  color: var(--muted2);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
}
.pro-modal-have-key {
  text-align: center;
  margin-top: .8rem;
}
.pro-modal-have-key button {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: 1px;
  padding: .4rem .9rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all .18s;
}
.pro-modal-have-key button:hover { border-color: var(--gold); color: var(--gold); }
/* Light mode */
body.light-mode .pro-modal-box { background: #fafaf8; border-top-color: var(--gold); }
body.light-mode .pro-gate-overlay { background: rgba(242,241,237,.82); }
@media (max-width: 480px) {
  .pro-modal-features { grid-template-columns: 1fr; }
  .pro-modal-box { padding: 2rem 1.2rem 1.5rem; }
}

.pro-modal-benefits {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.pro-benefit-card {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .9rem 1rem;
  transition: border-color .15s;
}
.pro-benefit-card:hover { border-color: rgba(245,197,24,.18); }
.pro-benefit-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.pro-benefit-body { flex: 1; }
.pro-benefit-title {
  font-family: 'Syne', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem;
}
.pro-benefit-desc {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: .4rem;
}
.pro-benefit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.pro-benefit-chips span {
  font-family: 'DM Mono', monospace;
  font-size: .48rem;
  letter-spacing: 1px;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: rgba(245,197,24,.1);
  color: var(--gold);
  border: 1px solid rgba(245,197,24,.2);
}
body.light-mode .pro-benefit-card { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
body.light-mode .pro-benefit-title { color: #111; }
body.light-mode .pro-benefit-desc { color: #666; }
body.light-mode .pro-benefit-chips span { background: rgba(180,130,0,.08); color: #8a6800; border-color: rgba(180,130,0,.2); }
@media (max-width: 480px) {
  .pro-benefit-card { padding: .7rem .8rem; }
  .pro-benefit-desc { font-size: .68rem; }
}

@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes flicker { 0%,100%{text-shadow:0 0 60px rgba(255,107,53,.5),2px 2px 0 rgba(0,0,0,.5)} 50%{text-shadow:0 0 80px rgba(255,107,53,.8),2px 2px 0 rgba(0,0,0,.5),0 0 120px rgba(255,107,53,.3)} }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .page-inner { padding:4.5rem 1.2rem 3rem; }
  .sec-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  /* FIX: era 3.5rem — el BPM display quedaba fuera del viewport en laptops de 768px */
  line-height: 1.1;
  letter-spacing: -0.5px;
}
  .page-heading { font-size:3.5rem; }
  .theory-grid { grid-template-columns:1fr; }
  .modes-table { font-size:.72rem; }
  .modes-table th, .modes-table td { padding:.5rem .6rem; }
  .chord-finder-wrap { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .scales-grid { grid-template-columns:1fr; }
  .page-nav { gap:.3rem; padding:.5rem .8rem; }
  .page-btn { padding:.32rem .6rem; font-size:.58rem; }
}

/* ══════════════════════════════════════════
   PREMIUM DESIGN ADDITIONS
══════════════════════════════════════════ */

/* PAGE SECTION HEADERS — editorial style */
.page-hero {
  position: relative;
  padding: 5rem 2rem 3.5rem;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .4;
}
.page-eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: 'DM Mono', monospace; font-size: .58rem;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.2rem;
}
.page-eyebrow::before {
  content: '';
  display: block; width: 28px; height: 1px;
  background: var(--accent);
}
.page-heading {
  font-family: 'Bebas Neue', 'Syne', sans-serif;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: .88; letter-spacing: 3px;
  color: var(--text);
  margin-bottom: 1rem;
}
.page-heading span { color: var(--teal); }
.page-lead {
  font-family: 'Outfit', sans-serif; font-size: .95rem; font-weight: 400;
  color: var(--text2); line-height: 1.85; max-width: 580px;
  border-left: 2px solid rgba(0,212,180,.4);
  padding-left: 1.2rem;
  margin-bottom: 2.5rem;
}
.page-bg-num {
  position: absolute; right: 2rem; top: 3rem;
  font-family: 'Bebas Neue', 'Syne', sans-serif;
  font-size: clamp(6rem, 15vw, 12rem);
  color: rgba(255,255,255,.025);
  line-height: 1; pointer-events: none;
  user-select: none;
}

/* STAT PILLS — small data badges */
.stat-row {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 2.5rem;
}
.stat-pill {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border2);
  border-radius: 99px;
  font-family: 'DM Mono', monospace;
  font-size: .6rem; font-weight: 500;
  letter-spacing: 1px; color: var(--text2);
  backdrop-filter: blur(8px);
}
.stat-pill strong { color: var(--text2); }

/* FEATURE CARDS (hero nav) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 3.5rem;
  max-width: 100%;
  margin-left: 0; margin-right: 0;
}
.feature-col {
  background: var(--bg);
  padding: 2rem 1.8rem 2rem;
  position: relative;
  transition: background .2s;
}
.feature-col:hover { background: var(--panel); }
.feature-col-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.feature-col-label {
  font-family: 'DM Mono', monospace; font-size: .58rem;
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 1.2rem; font-weight: 700;
}
.feature-col-sub {
  font-size: .72rem; color: var(--muted); margin-bottom: 1.4rem;
  font-family: 'Outfit', sans-serif; font-weight: 300; line-height: 1.6;
}
.feature-btn {
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  padding: .52rem .9rem;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--border);
  color: var(--text2);
  font-family: 'Outfit', sans-serif;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .3px;
  text-align: left; cursor: pointer;
  transition: all .15s;
}
.feature-btn:last-child { border-bottom: 0; }
.feature-btn:hover {
  color: var(--text);
  padding-left: 1.1rem;
  background: rgba(255,255,255,.02);
}
.feature-btn .fb-num {
  font-family: 'DM Mono', monospace; font-size: .55rem;
  color: var(--muted2); letter-spacing: 1px; flex-shrink: 0;
}
.feature-btn .fb-arrow {
  margin-left: auto; opacity: 0;
  transition: opacity .15s, transform .15s;
  font-size: .7rem;
}
.feature-btn:hover .fb-arrow { opacity: .5; transform: translateX(3px); }

/* HERO QUOTE BANNER */
.hero-quote-banner {
  max-width: 960px; margin: 0 auto;
  border-top: 1px solid var(--border);
  padding: 2rem 0 0;
  display: flex; align-items: flex-start; gap: 2rem;
}
.hero-quote-mark {
  font-family: 'Syne', sans-serif; font-size: 5rem;
  color: var(--accent); line-height: .7; flex-shrink: 0; opacity: .4;
}
.hero-quote-text {
  font-family: 'Syne', sans-serif; font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--text2); line-height: 1.6;
}
.hero-quote-attr {
  font-family: 'DM Mono', monospace; font-size: .6rem;
  letter-spacing: 2px; color: var(--muted);
  margin-top: .6rem; text-transform: uppercase;
}

/* NAV PILL REDESIGN */
/* .page-nav: merged into primary definition */
.nav-sep {
  width: 1px; height: 22px; background: var(--border2);
  flex-shrink: 0; margin: 0 .4rem;
}
.nav-right {
  margin-left: auto;
  display: flex; align-items: center; gap: .4rem;
}

/* SECTION DIVIDER COMPONENT */
.sec-divider {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 3rem 0 2rem;
}
.sec-divider-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border2), transparent);
}
.sec-divider-label {
  font-family: 'DM Mono', monospace; font-size: .58rem;
  letter-spacing: 3px; color: var(--muted); text-transform: uppercase;
  flex-shrink: 0;
}

/* SCALE CARD ENHANCEMENT */
.scale-card-inner { position: relative; z-index: 1; }
.scale-tier-badge {
  position: absolute; top: .9rem; right: .9rem;
  font-family: 'DM Mono', monospace; font-size: .52rem;
  letter-spacing: 2px; color: var(--muted2);
  text-transform: uppercase;
}

/* CHORD LIBRARY SEARCH INPUT */
#chordSearchInput {
  border-radius: 6px !important;
  font-size: .8rem !important;
  transition: all .2s !important;
}
#chordSearchInput:focus {
  box-shadow: 0 0 0 3px rgba(245,197,24,.1) !important;
}

/* THEORY CARD ENHANCEMENT */
.theory-card {
  border-radius: 0;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.theory-card:hover {
  border-color: rgba(255,107,53,.3);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}

/* PAGE SECTION — level indicator bar */
.level-bar {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .35rem .9rem .35rem .7rem;
  background: rgba(0,212,180,.05);
  border: 1px solid rgba(0,212,180,.18);
  border-radius: 99px;
  font-family: 'DM Mono', monospace;
  font-size: .58rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  backdrop-filter: blur(8px);
  margin-bottom: 1.2rem;
  display: inline-flex;
}
.level-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent);
}
.level-bar span {
  font-family: 'DM Mono', monospace; font-size: .6rem;
  letter-spacing: 2px; color: var(--accent); text-transform: uppercase;
}

@media (max-width: 768px) {
  .feature-grid { grid-template-columns: 1fr; }
  .hero-quote-banner { flex-direction: column; gap: .8rem; }
  .hero-quote-mark { font-size: 3rem; }
  .page-heading { font-size: 3rem; }
}


/* ═══════════════════════════════════════════
   LIGHT MODE — COMPLETE HIGH-CONTRAST OVERRIDES
═══════════════════════════════════════════ */

/* Hero feature grid */
body.light-mode .feature-grid {
  background: #c8c5be;
  border-color: #c8c5be;
}
body.light-mode .feature-col {
  background: #fafaf8;
}
body.light-mode .feature-col:hover {
  background: #f2f0ec;
}
body.light-mode .feature-col-label {
  /* Use CSS filter to darken the hardcoded warm gold/orange/purple */
  filter: brightness(0.45) saturate(1.8);
}
body.light-mode .feature-col-sub {
  color: #404050;
}
body.light-mode .feature-btn {
  color: #1a1a2a;
  border-bottom-color: #dddbd5;
}
body.light-mode .feature-btn .fb-num {
  color: #707080;
}
body.light-mode .feature-btn:hover {
  color: #000;
  background: rgba(0,0,0,.05);
  padding-left: 1.1rem;
}

/* Hero text elements */
body.light-mode .hero-quote-text  { color: #1a1a2a; }
body.light-mode .hero-quote-attr  { color: #505060; }
body.light-mode .hero-quote-mark  { color: #d43a0e; opacity:.3; }
body.light-mode .stat-pill        { background:rgba(0,0,0,.04); border-color:#c8c5be; color:#404050; }
body.light-mode .stat-pill strong { color: #111; }

/* Section headers */
body.light-mode .page-eyebrow         { color: #c0390e; }
body.light-mode .page-eyebrow::before { background: #c0390e; }
body.light-mode .page-lead            { color: #2a2a3a; border-left-color: rgba(0,122,106,.4); }
body.light-mode .page-bg-num          { color: rgba(0,0,0,.04); }
body.light-mode .sec-label            { color: #007a6a; }
body.light-mode .level-dot            { background:#c0390e; box-shadow:0 0 6px rgba(192,57,14,.3); }
body.light-mode .level-bar            { background:rgba(0,122,106,.06); border-color:rgba(0,122,106,.2); }
body.light-mode .level-bar span       { color: #007a6a; }

/* Nav */
body.light-mode .nav-logo    { color: #c0390e; }
body.light-mode .page-btn    { color: #404050; border-color: #c8c5be; }
body.light-mode .page-btn:hover { color: #111; background:rgba(0,0,0,.04); }
body.light-mode .nav-sep     { background: #c8c5be; }

/* Chord library — subfamily headers */
body.light-mode .chord-cat-panel > div[style*="rgba(0,0,0"] {
  background: rgba(0,0,0,.05) !important;
}

/* Scale / theory / tip cards */
body.light-mode .scale-card  { background:#fff; border-color:#d4d2cc; }
body.light-mode .scale-card:hover { border-color:#d43a0e; }
body.light-mode .scale-name  { color: #111; }
body.light-mode .scale-desc  { color: #404050; }
body.light-mode .scale-formula { color: #9a6e00; }
body.light-mode .theory-card { background:#fff; border-color:#d4d2cc; }
body.light-mode .theory-name { color: #111; }
body.light-mode .theory-body { color: #404050; }
body.light-mode .tip-card    { background:#fff; }
body.light-mode .tip-text    { color: #404050; }
body.light-mode .tip-title   { color: #006b5f; }
body.light-mode .tip-card.pro .tip-title  { color: #9a6e00; }
body.light-mode .tip-card.warn .tip-title { color: #c0390e; }

/* Improv steps */
body.light-mode .improv-step  { background:#fff; border-color:#d4d2cc; }
body.light-mode .step-title   { color: #9a6e00; }
body.light-mode .step-body    { color: #404050; }

/* ══════════════════════════════════════════
   TOOLKIT HERO REDESIGN
══════════════════════════════════════════ */

.toolkit-hero-eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:DM Mono,monospace; font-size:.6rem; letter-spacing:4px;
  color:var(--muted); border:1px solid var(--border2);
  padding:.38rem 1rem; border-radius:20px; margin-bottom:2.5rem;
  text-transform:uppercase;
}
.toolkit-hero-eyebrow span { color:var(--accent); }

.toolkit-title-block {
  margin-bottom:2rem;
}
.toolkit-title-main {
  font-family:'Bebas Neue','Syne',sans-serif;
  font-size:clamp(4rem,13vw,11rem); line-height:.85;
  letter-spacing:3px; color:var(--text);
}
.toolkit-title-accent { color:var(--accent); text-shadow:0 0 80px rgba(255,107,53,.3); }
.toolkit-title-sub {
  font-family:'Syne',sans-serif; font-style:italic;
  font-size:clamp(.95rem,2.5vw,1.35rem); color:var(--gold);
  letter-spacing:3px; margin-top:.8rem; opacity:.9;
}

/* ── TOOLKIT GRID ── */
.toolkit-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); margin:2.5rem 0 1.5rem;
}
.tk-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.16,1,.3,1),
              border-color .22s ease,
              box-shadow .22s ease;
  display: flex; flex-direction: column; gap: .6rem;
}
/* color accent bar on left side (more modern than top bar) */
.tk-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--tk-color, var(--teal));
  opacity: 0;
  transition: opacity .22s ease;
}
.tk-card:hover {
  border-color: rgba(0,212,180,.2);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.tk-card:hover::before { opacity: 1; }
.tk-card-icon { font-size:1.6rem; line-height:1; }
.tk-card-name {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: .9rem; color: var(--text); letter-spacing: .1px;
}
.tk-card-desc {
  font-size: .74rem; color: var(--text2); line-height: 1.65; flex: 1;
}
.tk-badge {
  display:inline-flex; align-items:center;
  font-family:DM Mono,monospace; font-size:.52rem; letter-spacing:2px;
  padding:.18rem .5rem; border-radius:20px; align-self:flex-start;
  font-weight:700; text-transform:uppercase;
}
.tk-badge.free { background:rgba(0,229,204,.12); color:var(--teal); border:1px solid rgba(0,229,204,.2); }
.tk-badge.pro  { background:rgba(245,197,24,.12); color:var(--gold); border:1px solid rgba(245,197,24,.2); }
.tk-badge.new  { background:rgba(155,93,229,.15); color:var(--purple); border:1px solid rgba(155,93,229,.25); }

.tk-arrow {
  display: inline-flex; align-items: center;
  margin-top: .4rem; align-self: flex-start;
  font-size: .65rem; color: var(--muted);
  transition: all .2s; letter-spacing: 1px;
  font-family: 'DM Mono', monospace;
}
.tk-arrow::after {
  content: ' →';
  transition: transform .2s ease, color .2s ease;
}
.tk-card:hover .tk-arrow { color: var(--tk-color, var(--teal)); }
.tk-card:hover .tk-arrow::after { transform: translateX(4px); }

/* Section divider for toolkit grid */
.tk-section-label {
  font-family:DM Mono,monospace; font-size:.55rem; letter-spacing:4px;
  color:var(--muted2); text-transform:uppercase; margin:2.2rem 0 .8rem;
  display:flex; align-items:center; gap:.8rem;
}
.tk-section-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,var(--border2),transparent);
}

/* ── NEW TOOL PAGES ── */
.tool-panel {
  background:var(--panel); border:1px solid var(--border);
  border-top:3px solid var(--accent); padding:2rem; margin-top:2rem;
  border-radius:0 0 6px 6px;
}
.tool-input-group { margin-bottom:1.5rem; }
.tool-label {
  display:block; font-family:DM Mono,monospace; font-size:.65rem;
  letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:.5rem;
}
.tool-input {
  width:100%; background:var(--panel2); border:1px solid var(--border2);
  color:var(--text); font-family:DM Mono,monospace; font-size:.9rem;
  padding:.7rem 1rem; border-radius:3px; outline:none; transition:border-color .2s;
}
.tool-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,107,53,.08); }
.tool-select {
  background:var(--panel2); border:1px solid var(--border2); color:var(--text);
  font-family:DM Mono,monospace; font-size:.82rem; padding:.65rem 1rem;
  border-radius:3px; outline:none; cursor:pointer; min-width:160px;
}
.tool-btn {
  padding:.7rem 1.8rem; background:var(--accent); border:none; color:#fff;
  font-family:'Outfit',sans-serif; font-weight:800;
  font-size:.75rem; letter-spacing:2px; cursor:pointer; border-radius:3px; transition:all .2s;
}
.tool-btn:hover { background:var(--accent2); box-shadow:0 4px 20px rgba(255,107,53,.35); transform:translateY(-1px); }
.tool-result {
  background:var(--bg); border:1px solid var(--border2);
  border-left:3px solid var(--accent); padding:1.5rem; margin-top:1.5rem;
  border-radius:0 4px 4px 0; min-height:80px;
}
.tool-result-empty { color:var(--muted2); font-size:.8rem; font-family:DM Mono,monospace; font-style:italic; }

/* ── PROGRESSION GENERATOR EXTRA STYLES ── */
.prog-style-btn {
  padding: .5rem .95rem;
  background: var(--panel);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 20px;
  transition: all .18s;
  letter-spacing: .5px;
}
.prog-style-btn:hover { border-color: var(--accent); color: var(--text2); background: rgba(255,107,53,.06); }
.prog-style-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 2px 12px rgba(255,107,53,.3); }

.prog-chord-card {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-top: 3px solid var(--accent);
  padding: .85rem .8rem .7rem;
  text-align: center;
  border-radius: 4px;
  animation: cardIn .25s ease both;
  transition: transform .18s, box-shadow .18s;
}
.prog-chord-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.prog-chord-name { font-family: 'Syne', sans-serif; font-size: 1.6rem; color: var(--gold); line-height: 1; }
.prog-chord-role { font-size: .6rem; color: var(--muted); letter-spacing: 1px; margin-top: .3rem; font-family: 'DM Mono', monospace; }
.prog-roman { font-size: .7rem; color: var(--accent); margin-top: .2rem; font-family: 'DM Mono', monospace; }
@keyframes cardIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Ear Trainer styles */
.ear-display {
  text-align:center; padding:2.5rem 1rem;
  background:var(--bg); border:1px solid var(--border); margin:1.5rem 0;
}
.ear-interval-name {
  font-family:'Syne',sans-serif; font-size:3.5rem; color:var(--gold);
  margin-bottom:.5rem; min-height:4rem;
}
.ear-choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.6rem; margin-top:1.2rem; }
.ear-choice-btn {
  padding:.7rem 1rem; background:var(--panel); border:1px solid var(--border2);
  color:var(--text2); font-family:DM Mono,monospace; font-size:.75rem;
  cursor:pointer; border-radius:3px; transition:all .18s; letter-spacing:1px;
}
.ear-choice-btn:hover { border-color:var(--teal); color:var(--teal); background:rgba(0,229,204,.05); }
.ear-choice-btn.correct { background:rgba(0,229,204,.15); border-color:var(--teal); color:var(--teal); font-weight:700; }
.ear-choice-btn.wrong   { background:rgba(255,107,53,.1); border-color:var(--accent); color:var(--accent); }
.ear-score {
  display:flex; gap:1.5rem; justify-content:center; margin-top:1.2rem;
  font-family:DM Mono,monospace; font-size:.8rem; color:var(--muted);
}
.ear-score strong { color:var(--gold); font-size:1.2rem; }

/* Progression generator */
.prog-style-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }


/* ══════════════════════════════════════════════════
   KUERDA v2 — Premium Web Enhancements
══════════════════════════════════════════════════ */

/* ── SEARCH OVERLAY — fade in animado ── */
#searchOverlay { display:none; }
#searchOverlay.open {
  display: flex !important;
  animation: searchFadeIn .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes searchFadeIn {
  from { opacity:0; transform:translateY(-8px) scale(.99); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}

/* ── FRETBOARD — micro-interacción al añadir nota ── */
@keyframes notePulse {
  0%,100% { transform:scale(1);    opacity:1; }
  40%     { transform:scale(1.4);  opacity:.65; }
}
@keyframes noteAppear {
  from { transform:scale(0); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}
.fret-note-new { animation: noteAppear .2s cubic-bezier(.16,1,.3,1) both; }

/* ── CARD HOVER — sombra profunda ── */
.tk-card:hover      { box-shadow: var(--shadow-lift) !important; }
.scale-card:hover   { box-shadow: var(--shadow-lift) !important; }
.theory-card:hover  { box-shadow: var(--shadow-card) !important; }
.tip-card:hover     { box-shadow: var(--shadow-card) !important; }
.backing-card:hover { box-shadow: var(--shadow-card) !important; }

/* ── FOOTER GRID — 3 columnas ── */
footer {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 3rem 3.5rem !important;
  border-top: 1px solid var(--footer-border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  text-align: left;
}
.footer-brand {
  font-family: 'Bebas Neue','Syne',serif;
  font-size: 1.6rem; letter-spacing: 4px; color: var(--muted2);
  user-select:none;
}
.footer-brand em { color: var(--accent); font-style: normal; }
.footer-center {
  text-align: center;
  font-family: 'DM Mono',monospace; font-size: .6rem;
  letter-spacing: 2px; color: var(--muted2); line-height: 2;
}
.footer-center strong { color: var(--accent); }
.footer-right {
  text-align: right; font-family: 'DM Mono',monospace;
  font-size: .6rem; letter-spacing: 1.5px;
  line-height: 2.2; color: var(--muted2);
}
.footer-right a { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-right a:hover { color: var(--gold); }
@media (max-width:768px) {
  footer { grid-template-columns:1fr !important; text-align:center !important; gap:1.5rem; padding:2.5rem 1.5rem !important; }
  .footer-right { text-align:center; }
}

/* ── SEMANTIC ── */
#mainContent { display: contents; }

/* ── GLASS CARD UPGRADES ── */
.tk-card {
  background: rgba(12,12,24,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.06);
  transition: var(--transition);
}
.tk-card:hover {
  background: rgba(18,18,36,0.9);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255,255,255,.04);
}
/* ── Light mode tk-card ── */
body.light-mode .tk-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
body.light-mode .tk-card:hover {
  background: #fff;
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
body.light-mode .tk-card-name  { color: #111; }
body.light-mode .tk-card-desc  { color: #555; }
body.light-mode .tk-arrow      { color: #aaa; }
body.light-mode .toolkit-grid  {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.08);
}
body.light-mode .tk-badge.free { background:rgba(0,180,160,.12); color:#007a6e; border-color:rgba(0,180,160,.3); }
body.light-mode .tk-badge.new  { background:rgba(120,60,200,.1);  color:#6b30c0; border-color:rgba(120,60,200,.25); }
body.light-mode .tk-badge.pro  { background:rgba(180,140,0,.1);   color:#8a6800; border-color:rgba(180,140,0,.25); }

/* ── METRO CENTERED LAYOUT ── */
#page-metro .page-inner,
#page-tuner .page-inner {
  max-width: 680px;
}

/* ── IMPROVED PAGE HEADER AREA ── */
.page-inner {
  padding-top: 4.5rem;
  padding-right: 3.5rem;
  padding-bottom: 4rem;
  padding-left: 3.5rem;
  position: relative;
}


/* ── PHASE C: GLASS EFFECTS ── */

/* --- OPTIMIZACION MOVIL FASE 3 --- */
.tool-btn, .metro-start, .tuner-btn, .prog-style-btn, .ear-choice-btn, .tk-card, .scale-card, .theory-card {
    touch-action: manipulation;
}

.tool-btn:active, .metro-start:active, .tuner-btn:active, .prog-style-btn:active, .ear-choice-btn:active, .tk-card:active, .scale-card:active, .theory-card:active {
    transform: scale(0.97);
    transition: transform 0.1s cubic-bezier(.16,1,.3,1);
}

@media (max-width: 768px) {
    .tool-btn, .metro-start, .tuner-btn, .prog-style-btn, .ear-choice-btn, .tk-card, .scale-card, .theory-card {
        min-height: 48px;
    }
    input[type=range]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }
}

/* Hero background radial depth — solo para #heroSection */

/* Toolkit section labels — glass pill */
.tk-section-label {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: .35rem 1rem .35rem .4rem;
  width: fit-content;
  backdrop-filter: blur(6px);
  margin: 2rem 0 .6rem;
}

/* Page inner — subtle left accent line */
.page-inner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), transparent 40%);
  opacity: .15;
}

/* Glass panel for tool controls */
.tool-panel {
  background: rgba(12,12,24,0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.06) !important;
}
body.light-mode .tool-panel {
  background: rgba(255,255,255,0.7) !important;
}

/* Metro and tuner: centered glass card */
.metro-section,
.backing-section {
  background: rgba(12,12,24,0.5) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.06) !important;
}
body.light-mode .metro-section,
body.light-mode .backing-section {
  background: rgba(255,255,255,0.6) !important;
  border-color: rgba(0,0,0,.08) !important;
}


/* FIX: herramientas de uso frecuente — ocultar descripción para que
   los controles estén más arriba. Añadir clase .no-lead al page-inner. */
.no-lead .page-lead { display: none; }
.no-lead .divider { margin: .5rem 0 1rem; }

/* ════════════════════════════════════════════════════════════════
   UX IMPROVEMENTS — mobile & desktop comfort
   (Fixes: touch targets, loading states, tool headers)
════════════════════════════════════════════════════════════════ */

/* ── BPM adjustment buttons — 48px touch target ──────────────────────── */
.bpm-adj-btn {
  min-width: 48px;
  min-height: 48px;
  padding: .5rem .9rem;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: .95rem;
  cursor: pointer;
  border-radius: 4px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bpm-adj-btn:hover { background: rgba(255,255,255,.05); border-color: var(--border3); }
.bpm-adj-btn:active { background: rgba(255,255,255,.1); transform: scale(.95); }

/* ── Backing tracks: loading spinner ─────────────────────────────────── */
.bt-loading-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
}
.bt-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--border2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: bt-spin .8s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
.bt-loading-text {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Backing tracks: empty state ─────────────────────────────────────── */
.bt-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  padding: 3rem 2rem;
  text-align: center;
}
.bt-empty-icon {
  font-size: 2.5rem;
  opacity: .4;
  line-height: 1;
  /* SVG guitar icon replacement — no emoji */
  display: block;
}
.bt-empty-title {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  color: var(--text2);
  font-weight: 700;
}
.bt-empty-sub {
  font-size: .78rem;
  color: var(--muted);
  max-width: 300px;
  line-height: 1.7;
}

/* ── Speed panel helper text ──────────────────────────────────────────── */
#btSpeedPanel[style*="pointer-events: none"]::after,
#btSpeedPanel[style*="pointer-events:none"]::after {
  content: 'Reproduce una pista primero';
  position: absolute;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .6rem;
  color: var(--muted2);
  letter-spacing: 1px;
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
  pointer-events: none;
}
#btSpeedPanel { position: relative; }

/* ── Tool header: compact mode for high-use tools ────────────────────── */
.page-inner .tool-header-compact {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.tool-header-compact .sec-label {
  margin-bottom: 0;
  flex-shrink: 0;
}
.tool-header-compact .sec-title {
  margin: 0;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  line-height: 1;
  white-space: nowrap;
}

/* ── Mobile: active tool indicator in bottom nav ─────────────────────── */
/* Show current tool name above bottom nav when active */
#mobileToolLabel {
  position: fixed;
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  background: rgba(6,6,14,.88);
  border-top: 1px solid rgba(255,255,255,.05);
  backdrop-filter: none;
  font-family: 'DM Mono', monospace;
  font-size: .52rem;
  letter-spacing: 2px;
  color: var(--muted);
  text-align: center;
  padding: .3rem 1rem;
  display: none;
  z-index: 990;  /* FIX: por debajo del nav (1000) para no interferir con taps */
  text-transform: uppercase;
  pointer-events: none;
}

@media (min-width: 769px) { #mobileToolLabel { display: none !important; } }
body.light-mode #mobileToolLabel { background: rgba(245,243,239,.92); }

/* ── Chord finder: mobile layout fix ─────────────────────────────────── */
@media (max-width: 768px) {
  .kd-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  /* Visual separator between detector and suggestion panel */
  .kd-layout > div:last-child {
    border-top: 2px solid var(--border2) !important;
    padding-top: 1rem !important;
  }
}

/* ── Back to home: floating button on mobile ──────────────────────────── */
/* Removed — sidebar handles this. Use mobile tool label instead. */

/* ── Page inner: reduce top padding on compact tool pages ────────────── */
@media (max-width: 768px) {
  .page-inner.compact { padding-top: 3rem !important; }
}

/* ══════════════════════════════════════════════════════
   TOP NAV BAR (authBar reused as real nav)
══════════════════════════════════════════════════════ */
.top-nav-link {
  display: inline-flex; align-items: center;
  padding: .4rem .75rem;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.6);
  font-family: 'Outfit', sans-serif;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer; border-radius: 8px;
  transition: all .15s ease;
  white-space: nowrap;
}
.top-nav-link:hover {
  background: rgba(0,212,180,.08);
  color: var(--teal);
}
body.light-mode .top-nav-link {
  color: rgba(0,0,0,.55);
}
body.light-mode .top-nav-link:hover {
  background: rgba(0,122,106,.08);
  color: var(--teal);
}

/* Fix authBar in light mode */
body.light-mode #authBar {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(0,0,0,.1) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.12) !important;
}


@media (max-width: 768px) {
  #authBar { display: none !important; }
}

/* ── Quick Nav search button (Fase 5.1) ── */
.kn-search-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  margin-right: .5rem;
}
.kn-search-btn:hover {
  background: rgba(0,212,180,.08);
  border-color: rgba(0,212,180,.3);
  color: var(--teal);
}
.kn-search-hint {
  font-family: 'DM Mono', monospace;
  font-size: .48rem;
  letter-spacing: 1px;
}
@media (max-width: 768px) { .kn-search-hint { display: none; } }

/* ── btn-login / btn-register modern styles ── */
.btn-login {
  padding: .38rem .8rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
  font-family: 'Outfit', sans-serif; font-size: .68rem; font-weight: 600;
  border-radius: 7px; cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-login:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.btn-register {
  padding: .38rem .9rem;
  background: var(--teal);
  border: none;
  color: #000;
  font-family: 'Outfit', sans-serif; font-size: .68rem; font-weight: 700;
  border-radius: 7px; cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-register:hover {
  background: #00b89a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,212,180,.35);
}
body.light-mode .btn-login {
  border-color: rgba(0,0,0,.15);
  color: rgba(0,0,0,.6);
}
body.light-mode .btn-login:hover {
  background: rgba(0,0,0,.05);
  color: #000;
}



/* ══════════════════════════════════════════════════════════════════
   KUERDA NAVBAR — Windsurf-style (kn- prefix)
   Full-width bar · logo left · dropdowns center · auth right
══════════════════════════════════════════════════════════════════ */

#authBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 54px;
  z-index: 970;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  background: rgba(7,9,12,.92);
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  gap: 0;
}

/* ── Logo ── */
.kn-logo {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: none; cursor: pointer;
  padding: .3rem .8rem .3rem 0;
  margin-right: 1rem;
  color: var(--text);
  flex-shrink: 0;
}
.kn-logo svg { color: var(--teal); flex-shrink: 0; }
.kn-logo span {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 1rem; letter-spacing: 1px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Center nav items ── */
.kn-center {
  display: flex; align-items: center;
  gap: .1rem; flex: 1;
}

/* ── Nav button (top level) ── */
.kn-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .85rem;
  background: none; border: none;
  color: rgba(255,255,255,.72);
  font-family: 'Outfit', sans-serif; font-size: .78rem; font-weight: 500;
  cursor: pointer; border-radius: 7px;
  transition: all .15s ease; white-space: nowrap;
  height: 36px;
}
.kn-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.kn-btn.kn-active { color: var(--teal); background: rgba(0,212,180,.08); }
.kn-direct { /* no caret */ }

/* ── Caret ── */
.kn-caret {
  opacity: .5; flex-shrink: 0;
  transition: transform .2s ease;
}
.kn-item.open .kn-caret { transform: rotate(180deg); opacity: .8; }

/* ── Dropdown container ── */
.kn-item { position: relative; }

/* ── Dropdown panel ── */
.kn-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px); left: 0;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  min-width: 280px;
  padding: .5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.65), 0 0 0 1px rgba(0,212,180,.05);
  z-index: 1000;
  animation: knDropIn .18s cubic-bezier(.16,1,.3,1);
}
.kn-drop.open { display: block; }
.kn-drop-wide {
  min-width: 540px;
}

@keyframes knDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Two-column layout for wide drop ── */
.kn-drop-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.kn-drop-cols > div { padding: .25rem 0; }
.kn-drop-cols > div:first-child {
  border-right: 1px solid rgba(255,255,255,.06);
  padding-right: .5rem;
}
.kn-drop-cols > div:last-child { padding-left: .5rem; }

/* ── Section label ── */
.kn-drop-section {
  font-family: 'DM Mono', monospace;
  font-size: .5rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--teal);
  padding: .5rem .75rem .3rem;
  opacity: .8;
}

/* ── Drop item ── */
.kn-drop-item {
  display: flex; align-items: flex-start; gap: .75rem;
  width: 100%; padding: .6rem .75rem;
  background: none; border: none;
  border-radius: 9px;
  cursor: pointer; text-align: left;
  transition: background .12s ease;
}
.kn-drop-item:hover { background: rgba(0,212,180,.07); }
.kn-drop-icon { font-size: .95rem; flex-shrink: 0; margin-top: 2px; }
.kn-drop-title {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: .78rem; color: var(--text); line-height: 1.3;
  display: flex; align-items: center; gap: .4rem;
}
.kn-drop-sub {
  font-family: 'Outfit', sans-serif; font-size: .68rem;
  color: var(--muted); margin-top: .1rem; line-height: 1.4;
}

/* ── NUEVO badge ── */
.kn-new {
  font-family: 'DM Mono', monospace; font-size: .42rem;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--purple); background: rgba(139,92,246,.14);
  border: 1px solid rgba(139,92,246,.28);
  padding: .1rem .32rem; border-radius: 4px;
  vertical-align: middle;
}

/* ── Right section (auth) ── */
.kn-right {
  display: flex; align-items: center; gap: .5rem;
  margin-left: auto; flex-shrink: 0;
}

/* ── Light mode ── */
body.light-mode #authBar {
  background: rgba(255,255,255,.95);
  border-bottom-color: rgba(0,0,0,.08);
}
body.light-mode .kn-btn { color: rgba(0,0,0,.6); }
body.light-mode .kn-btn:hover { background: rgba(0,0,0,.05); color: #000; }
body.light-mode .kn-drop {
  background: #fff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 16px 48px rgba(0,0,0,.15);
}
body.light-mode .kn-drop-cols > div:first-child { border-right-color: rgba(0,0,0,.07); }
body.light-mode .kn-drop-item:hover { background: rgba(0,122,106,.06); }
body.light-mode .kn-drop-title { color: #111; }
body.light-mode .kn-drop-sub { color: #666; }
body.light-mode .kn-logo svg { color: var(--teal); }

/* ── Sidebar mode: shift nav ── */


/* ── Mobile: hide center nav, keep logo + auth ── */
@media (max-width: 768px) {
  .kn-center { display: none; }
  #authBar { padding: 0 1rem; }
  .kn-logo span { font-size: .9rem; }
}

/* ══════════════════════════════════════════════════════════════════
   PUNTO 2: Tagline "Mejora." → naranja
══════════════════════════════════════════════════════════════════ */
.tagline-accent {
  font-style: normal;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}
body.light-mode .tagline-accent {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════
   PUNTO 3: PRO Banner — dark elegante
══════════════════════════════════════════════════════════════════ */
.pro-strip {
  background: var(--panel);
  border-top: 1px solid rgba(255,107,53,.12);
  border-bottom: 1px solid rgba(255,107,53,.08);
  position: relative;
  overflow: hidden;
}
.pro-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,107,53,.04) 0%,
    transparent 50%,
    rgba(139,92,246,.03) 100%
  );
  pointer-events: none;
}
.pro-strip-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.pro-strip-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
  display: flex; align-items: center; gap: .4rem;
}
.pro-strip-bolt { font-size: .75rem; }
.pro-strip-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 800; color: var(--text);
  line-height: 1.25;
}
.pro-strip-title span { color: var(--text2); font-weight: 600; font-size: .9em; }
.pro-strip-right {
  display: flex; align-items: center;
  gap: 2rem; flex-wrap: wrap;
}
.pro-strip-checks {
  display: flex; flex-direction: column;
  gap: .3rem;
  font-family: 'Outfit', sans-serif;
  font-size: .75rem; color: var(--muted);
  line-height: 1.5;
}
.pro-strip-checks span::before {
  content: '✓ ';
  color: var(--teal);
  font-weight: 700;
}
.pro-strip-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 2rem;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: .75rem;
  letter-spacing: 1px;
  border-radius: 7px; cursor: pointer;
  transition: all .2s ease; white-space: nowrap;
}
.pro-strip-btn:hover {
  background: var(--accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,107,53,.3);
}
@media (max-width: 768px) {
  .pro-strip-inner { padding: 2rem 1.5rem; }
  .pro-strip-right { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   PUNTO 5: Footer — rediseño completo
══════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,.06);
}
.sf-top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 4rem 3rem;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
}
.sf-logo {
  font-family: 'Bebas Neue', 'Syne', sans-serif;
  font-size: 2rem; letter-spacing: 3px;
  margin-bottom: .6rem;
}
.sf-k {
  background: linear-gradient(160deg, #FFD166 0%, #FF8C42 40%, #FF5A1F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sf-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: .85rem; color: var(--text2);
  margin-bottom: .3rem; line-height: 1.5;
}
.sf-copy {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: 2px;
  color: var(--muted); text-transform: uppercase;
}
.sf-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.sf-col-title {
  font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--teal);
  margin-bottom: .8rem;
}
.sf-col a {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem; color: var(--muted);
  text-decoration: none;
  padding: .2rem 0;
  transition: color .15s ease;
}
.sf-col a:hover { color: var(--text); }
.sf-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 4rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.04);
  gap: 1rem;
}
.sf-bottom-left, .sf-bottom-right {
  font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: 1.5px;
  color: var(--muted); text-transform: uppercase;
}
.sf-back-top {
  background: none; border: 1px solid rgba(255,255,255,.1);
  color: var(--muted); font-family: 'DM Mono', monospace;
  font-size: .52rem; letter-spacing: 1.5px;
  padding: .35rem .9rem; border-radius: 20px;
  cursor: pointer; transition: all .15s;
  text-transform: uppercase;
}
.sf-back-top:hover { border-color: var(--teal); color: var(--teal); }
@media (max-width: 768px) {
  .sf-top { grid-template-columns: 1fr; padding: 3rem 1.5rem 2rem; gap: 2.5rem; }
  .sf-links { grid-template-columns: 1fr 1fr; }
  .sf-bottom { flex-direction: column; text-align: center; gap: .8rem; padding: 1.5rem; }
}
body.light-mode .site-footer { background: #f5f3ef; border-top-color: rgba(0,0,0,.08); }
body.light-mode .sf-col a { color: #666; }
body.light-mode .sf-col a:hover { color: #111; }
body.light-mode .sf-copy { color: #888; }
body.light-mode .sf-bottom-left, body.light-mode .sf-bottom-right { color: #999; }
body.light-mode .sf-back-top { border-color: rgba(0,0,0,.1); color: #888; }