/* =============================================================================
   In My Key — Web App styles
   Brand: light off-white surfaces, ink-navy text, violet→teal accents.
   Headings: Space Grotesk · Body: Inter.
   ========================================================================== */
:root {
  --bg:        #FAF8F5;   /* off-white page */
  --bg-elev:   #FFFFFF;   /* raised surfaces / modal */
  --bg-card:   #FFFFFF;   /* cards */
  --bg-hover:  #F3EEFF;   /* soft lilac hover */
  --border:    #ECE6F5;   /* light divider */
  --border-2:  #DBD3EC;   /* stronger border */
  --text:      #0B1330;   /* ink navy */
  --text-2:    #565B73;   /* slate */
  --text-3:    #8B8FA6;   /* muted */
  --purple:    #785CFF;   /* violet (brand) */
  --purple-d:  #5B43E6;   /* darker violet (hover/active) */
  --teal:      #11A99B;   /* teal text-safe on white */
  --teal-d:    #0E9082;
  --amber:     #C76A1F;   /* warm, readable on white */
  --gold:      #B5840F;   /* audition gold (text on white) */
  --cobalt:    #4D6BFF;
  --lilac:     #F3EEFF;
  --ink:       #0B1330;
  --slate:     #11121A;
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-head: 'Space Grotesk', 'Inter', -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* Display font (Space Grotesk) on titles + key numbers */
.logo-name, .lib-title, .login-h, .modal-title, .empty h2,
.metric .m-num, .hero-number, .pg-card-num, .lad-count, .pg-h,
.modal-title, .view-title, .vc-title { font-family: var(--font-head); }

/* ── Brand logo (equalizer bars) ── */
.logo { display: flex; align-items: center; gap: 11px; }
.logo-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.logo-bars span { width: 5px; border-radius: 3px; }
.logo-bars span:nth-child(1){ height: 40%; background:#8c64ff; }
.logo-bars span:nth-child(2){ height: 70%; background:#9b73ff; }
.logo-bars span:nth-child(3){ height: 100%; background:#a78bfa; }
.logo-bars span:nth-child(4){ height: 62%; background:#64beA5; }
.logo-bars span:nth-child(5){ height: 38%; background:#50d2a0; }
.logo-name { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.logo-name b { font-weight: 600; color: var(--purple); }

/* ============================ LOGIN ============================ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(124,106,224,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(45,157,127,.12), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 420px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px 36px; text-align: center;
  box-shadow: 0 24px 64px rgba(11,19,48,.10);
}
.login-cat-wrap {
  width: 150px; height: 150px; margin: 0 auto 20px; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(167,139,250,.22), rgba(124,106,224,.06) 60%, transparent 72%);
}
.login-cat { width: 124px; height: auto; }
.login-card .logo { justify-content: center; margin-bottom: 26px; }
.login-h { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.login-sub { font-size: 14px; color: var(--text-2); margin-bottom: 28px; line-height: 1.6; }
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px;
  background: #fff; color: #1f1f1f; border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 13px 0; font-size: 15px; font-weight: 500;
  transition: transform .1s, box-shadow .2s;
}
.btn-google:hover { box-shadow: 0 8px 24px rgba(11,19,48,.14); }
.btn-google:active { transform: scale(.985); }
.login-foot { margin-top: 22px; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.login-feats { display: flex; justify-content: center; gap: 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.login-feat { font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.login-feat svg { width: 20px; height: 20px; color: var(--purple); }

/* ============================ APP SHELL ============================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topnav { display: flex; gap: 4px; }
.topnav a {
  font-size: 14px; color: var(--text-2); padding: 7px 14px; border-radius: var(--radius-sm);
  transition: color .12s, background .12s;
}
.topnav a:hover { color: var(--text); background: var(--bg-hover); }
.topnav a.active { color: var(--purple); background: var(--bg-hover); box-shadow: inset 0 -2px 0 var(--ink); }
/* per-tab accent (respects each tab's purpose color) */
body[data-view="practice"] .topnav a.active { color: var(--teal); background: #E4F6F2; }
body[data-view="study"] .topnav a.active { color: var(--purple); background: var(--lilac); }
body[data-view="progress"] .topnav a.active { color: var(--gold); background: #F8EECB; }
.user-chip { display: flex; align-items: center; gap: 9px; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--purple-d);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff;
}
.user-menu-btn { background: none; border: none; color: var(--text-3); display: flex; align-items: center; }

/* ── Language toggle ── */
.lang-switch { display: inline-flex; align-items: center; background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; }
.lang-btn { border: none; background: none; cursor: pointer; padding: 5px 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-3); transition: color .12s, background .12s; font-family: inherit; }
.lang-btn:hover { color: var(--text); }
.lang-btn.active { color: #fff; background: var(--purple-d); }
.login-lang { position: fixed; top: 18px; right: 18px; z-index: 10; }

.container { max-width: 1180px; margin: 0 auto; padding: 28px; }

/* ── Header row with cat ── */
.lib-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.lib-title { font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.lib-sub { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.cat-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(100deg, rgba(124,106,224,.14), rgba(45,157,127,.10));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 18px 12px 14px;
}
.cat-banner img { width: 56px; height: auto; }
.cat-banner .ct-t { font-size: 13px; font-weight: 600; }
.cat-banner .ct-s { font-size: 12px; color: var(--text-2); }

/* ── Metrics (colored icon chips; gold audition; navy week) ── */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.metric { display: flex; align-items: center; gap: 13px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; transition: transform .14s, box-shadow .14s; }
.metric:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,19,48,.08); }
.m-chip { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.m-chip svg { width: 20px; height: 20px; }
.m-chip.mc-violet { background: #EFEAFF; color: var(--purple); }
.m-chip.mc-teal { background: #D8F5F0; color: var(--teal-d); }
.m-chip.mc-gold { background: #F8EECB; color: #B5840F; }
.m-chip.mc-on-navy { background: rgba(255,255,255,.14); color: #FFD98A; }
.m-body { min-width: 0; }
.metric .m-num { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.metric .m-lab { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.metric.m-audition { background: linear-gradient(160deg, #FFF8E6, #FFFDF6); border-color: #EBD89A; }
.metric.m-audition .m-num { color: var(--gold); }
.metric.m-navy { background: var(--ink); border-color: var(--ink); }
.metric.m-navy .m-num { color: #fff; }
.metric.m-navy .m-lab { color: #AEB3D0; }

/* ── Toolbar: search + filters ── */
.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-3); }
.search-box input {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 14px; padding: 11px 14px 11px 40px; outline: none;
  transition: border-color .15s;
}
.search-box input:focus { border-color: var(--purple-d); }
.search-box input::placeholder { color: var(--text-3); }
.filters { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  font-size: 13px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-2);
  background: none; color: var(--text-2); transition: all .12s; white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--text-3); }
.chip.active { background: var(--purple); border-color: var(--purple); color: #fff; font-weight: 500; }
.chip .ct { opacity: .65; margin-left: 6px; font-variant-numeric: tabular-nums; }
.chip.active .ct { opacity: .8; }

/* ── Song table ── */
.col-head, .song-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 104px 84px 70px 116px 148px 40px;
  gap: 13px; align-items: center;
}
.s-genre { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-genre.none { color: var(--text-3); }
.col-head { padding: 0 16px 10px; font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.song-row {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px; margin-bottom: 9px; transition: border-color .14s, background .14s;
}
.song-row:hover { border-color: var(--border-2); background: var(--bg-hover); }
.s-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.s-thumb {
  width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, #EFEBFF, #E2F6F2);
  display: flex; align-items: center; justify-content: center; color: var(--purple);
}
.s-thumb svg { width: 18px; height: 18px; }
.s-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-artist { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-key { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.s-key.flat { color: var(--purple); }
.s-key.sharp { color: var(--teal); }
.s-key.orig { color: var(--text-3); font-weight: 500; font-size: 13px; }
.s-tempo { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.s-loop { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.s-loop.none { color: var(--text-3); }
.status-pill {
  font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 14px;
  text-align: center; white-space: nowrap; display: inline-block;
}
.s-statuses { display: flex; gap: 5px; flex-wrap: wrap; }
.st-exploring { background: #EEEAFF; color: #5B43E6; }
.st-learning  { background: #FBEAD6; color: #B5631E; }
.st-active    { background: #D8F5F0; color: #0E8478; }
.st-audition  { background: #F8EECB; color: #8A6400; }
.st-archived  { background: #ECECF1; color: #5C6075; }
.row-menu-btn { background: none; border: none; color: var(--text-3); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; transition: color .12s, background .12s; }
.row-menu-btn:hover { color: var(--text); background: var(--bg); }

/* ── Empty state ── */
.empty {
  text-align: center; padding: 64px 32px; margin: 12px 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(11,19,48,.05);
}
.empty img { width: 130px; height: auto; margin: 0 auto 18px; opacity: .9; }
.empty h2 { font-family: var(--font-head); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.empty p { font-size: 14px; color: var(--text-2); max-width: 380px; margin: 0 auto; line-height: 1.6; }
.empty-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  background: linear-gradient(135deg, var(--purple), var(--purple-d));
  color: #fff; font-size: 14px; font-weight: 600; padding: 12px 22px;
  border-radius: 999px; transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 20px rgba(120,92,255,.28);
}
.empty-cta:hover { transform: translateY(-1px); }
.empty-cta svg { width: 17px; height: 17px; }
.empty-note { margin-top: 16px; font-size: 12.5px; color: var(--text-3); }

/* ============================ EDIT MODAL ============================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(11,19,48,.42);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 460px; background: var(--bg-elev);
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  padding: 26px; transform: scale(.97); transition: transform .2s;
  max-height: 90vh; overflow-y: auto;
}
.modal-backdrop.show .modal { transform: scale(1); }
/* Premium dark-navy detail panel (re-scopes tokens so all children adapt) */
.modal {
  --bg:#0A1230; --bg-card:#15224C; --bg-hover:#1B2A58;
  --text:#EAEAF5; --text-2:#AEB3D0; --text-3:#838AB0;
  --border:#2A3360; --border-2:#37416E;
  --purple:#A78BFA; --purple-d:#A78BFA; --teal:#5DCAA5; --amber:#F0B07A;
  background: #0E1838; color: var(--text);
  box-shadow: 0 30px 80px rgba(11,19,48,.5);
}
.modal .modal-title { color: #fff; }
.modal textarea::placeholder { color: var(--text-3); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.modal-title { font-size: 18px; font-weight: 600; }
.modal-artist { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.modal-close { background: none; border: none; color: var(--text-3); display: flex; }
.modal-close svg { width: 20px; height: 20px; }
.field { margin-bottom: 18px; }
.field-lab { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.field-hint { font-size: 11px; color: var(--text-3); margin-top: 8px; }
.stepper { display: flex; align-items: center; gap: 12px; }
.step-btn {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border-2);
  background: none; color: var(--text); font-size: 22px; font-weight: 300; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.step-btn:hover { border-color: var(--purple-d); color: var(--purple); background: rgba(124,106,224,.08); }
.step-val { flex: 1; text-align: center; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.step-val.key.flat { color: var(--purple); }
.step-val.key.sharp { color: var(--teal); }
.step-val.tempo { color: var(--teal); }
.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.status-opt {
  font-size: 13px; padding: 10px; border-radius: 10px; border: 1px solid var(--border-2);
  background: none; color: var(--text-2); transition: all .12s; text-align: center;
}
.status-opt:hover { border-color: var(--text-3); color: var(--text); }
.status-opt.sel { border-color: var(--purple); background: rgba(124,106,224,.14); color: var(--purple); font-weight: 500; }
.modal textarea {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; font-family: inherit; padding: 12px 14px; resize: vertical;
  min-height: 84px; outline: none; line-height: 1.6;
}
.modal textarea:focus { border-color: var(--purple-d); }
.m-input { width: 100%; background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: inherit; padding: 11px 13px; outline: none; transition: border-color .12s; }
.m-input:focus { border-color: var(--purple-d); }
.m-input::placeholder { color: var(--text-3); }
.m-select { width: 100%; background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: inherit; padding: 11px 13px; outline: none; cursor: pointer; transition: border-color .12s; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.m-select:focus { border-color: var(--purple-d); }
.m-select option { background: #ffffff; color: #11121A; }
.modal-loop { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.modal-actions { display: flex; gap: 10px; margin-top: 24px; }
.btn-yt {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 1px solid var(--border-2); border-radius: var(--radius);
  color: var(--text); font-size: 14px; font-weight: 500; padding: 12px 0; transition: all .12s;
}
.btn-yt:hover { border-color: var(--purple-d); color: var(--purple); }
.btn-yt svg { width: 16px; height: 16px; }
.btn-del {
  width: 48px; flex: none; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border-2); border-radius: var(--radius);
  color: var(--text-3); transition: all .12s;
}
.btn-del:hover { border-color: #a32d2d; color: #e24b4a; }
.btn-del svg { width: 17px; height: 17px; }

/* ── Track badges (song row) ── */
.s-tracks { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.track-badge {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 2px 7px;
  border-radius: 9px; border: 1px solid transparent; text-transform: uppercase;
}
.track-badge.study { background: #EEEAFF; color: #5B43E6; border-color: #DDD5FF; }
.track-badge.practice { background: #D8F5F0; color: #0E8478; border-color: #BFEDE5; }
.track-badge.none { background: var(--bg); color: var(--text-3); border-color: var(--border); }

/* ── Track cards (modal) ── */
.field-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-3); font-size: 11px; }
.track-cards { display: flex; flex-direction: column; gap: 9px; }
.track-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 13px; border-left-width: 3px;
}
.track-card.tc-study { border-left-color: var(--purple); }
.track-card.tc-practice { border-left-color: var(--teal); }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-type { font-size: 12px; font-weight: 600; color: var(--text); }
.tc-study .tc-type { color: #c4b5fd; }
.tc-practice .tc-type { color: #6fd4af; }
.tc-open {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  color: var(--text-2); text-decoration: none; border: 1px solid var(--border-2);
  border-radius: 8px; padding: 5px 9px; transition: all .12s; white-space: nowrap;
}
.tc-open:hover { border-color: var(--purple-d); color: var(--purple); }
.tc-open svg { width: 13px; height: 13px; }
.tc-yt { font-size: 12px; color: var(--text-2); margin-top: 6px; line-height: 1.4; }
.tc-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 13px; font-variant-numeric: tabular-nums; align-items: baseline; }
.tc-meta .tc-key { font-weight: 600; }
.tc-meta .tc-key.flat { color: var(--purple); }
.tc-meta .tc-key.sharp { color: var(--teal); }
.tc-meta .tc-key.orig { color: var(--text-3); }
.tc-meta .tc-tempo { color: var(--teal); font-weight: 500; }
.tc-meta .tc-loop { color: var(--text-2); }
.tc-meta .tc-orig { color: var(--text-2); }
.tc-unanalyzed, .vc-unanalyzed { color: var(--text-3); font-style: italic; }
.tc-empty { font-size: 13px; color: var(--text-3); }

/* ── Lyrics ── */
.lyrics-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.lyrics-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-lyrics {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
  color: var(--text); background: none; border: 1px solid var(--border-2); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; transition: all .12s;
}
.btn-lyrics:hover { border-color: var(--purple-d); color: var(--purple); }
.btn-lyrics:disabled { opacity: .6; cursor: default; }
.btn-lyrics svg { width: 14px; height: 14px; }
.lyrics-src { font-size: 11px; color: var(--text-3); }
.lyrics-text {
  margin-top: 12px; max-height: 280px; overflow-y: auto; white-space: pre-wrap;
  font-family: var(--font); font-size: 13.5px; line-height: 1.7; color: var(--text-2);
  border-top: 1px solid var(--border); padding-top: 12px;
}
.lyrics-msg { margin-top: 12px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.lyrics-msg a { color: var(--purple); }

/* ── Practice / Study views ── */
.view-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.view-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color .14s, background .14s;
}
.view-card:hover { border-color: var(--border-2); background: var(--bg-hover); }
.vc-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vc-thumb {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #E2F6F2, #EFEBFF);
  display: flex; align-items: center; justify-content: center; color: var(--teal);
}
.vc-thumb.study { background: linear-gradient(135deg, #EFEBFF, #E2F6F2); color: var(--purple); }
.vc-thumb svg { width: 19px; height: 19px; }
.vc-info { min-width: 0; flex: 1; }
.vc-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-artist { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.vc-badges { display: flex; align-items: center; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.vc-meta { display: flex; align-items: baseline; gap: 14px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.vc-key { font-size: 16px; font-weight: 600; }
.vc-key.flat { color: var(--purple); }
.vc-key.sharp { color: var(--teal); }
.vc-key.orig { color: var(--text-3); font-size: 14px; font-weight: 500; }
.vc-tempo { font-size: 14px; font-weight: 500; color: var(--teal); }
.vc-orig { font-size: 13px; color: var(--text-2); }
.vc-loop { font-size: 13px; color: var(--amber); font-weight: 500; }
.vc-loopline { margin-top: -2px; }
.vc-loop.big {
  display: inline-block; font-size: 13px; color: var(--amber); font-weight: 600;
  background: rgba(232,146,74,.12); border: 1px solid rgba(232,146,74,.28);
  border-radius: 9px; padding: 5px 10px;
}
.vc-notes { font-size: 12.5px; color: var(--text-2); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 10px; }
.vc-notes-lab { color: var(--text-3); font-weight: 600; margin-right: 4px; }
.vc-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius); padding: 11px 0; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; border: 1px solid transparent;
}
.vc-btn svg { width: 15px; height: 15px; }
.vc-btn.practice { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 4px 14px rgba(17,169,155,.28); }
.vc-btn.practice:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(17,169,155,.4); }
.vc-btn.study { background: var(--purple); color: #fff; border-color: var(--purple); box-shadow: 0 4px 14px rgba(120,92,255,.28); }
.vc-btn.study:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(120,92,255,.4); }
.vc-actions { display: flex; gap: 8px; align-items: stretch; }
.vc-actions .vc-btn { flex: 1; }
.vc-letra { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--border-2); border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; transition: all .12s; }
.vc-letra:hover { border-color: var(--purple-d); color: var(--purple); background: var(--bg-hover); }

/* ── Progress page (gamified) ── */
@keyframes imk-star-pulse { 0%,100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(232,178,74,.55)); } 50% { transform: scale(1.16) rotate(6deg); filter: drop-shadow(0 0 18px rgba(232,178,74,.95)); } }
@keyframes imk-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes imk-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes imk-spark { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@keyframes imk-fill-glow { 0%,100% { box-shadow: 0 0 10px rgba(124,106,224,.5); } 50% { box-shadow: 0 0 18px rgba(93,202,165,.7); } }

/* Hero */
.pg-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background:
    radial-gradient(130% 170% at 0% 0%, rgba(120,92,255,.12), transparent 55%),
    radial-gradient(130% 170% at 100% 100%, rgba(17,169,155,.12), transparent 55%),
    #FFFFFF;
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 18px;
  box-shadow: 0 16px 44px rgba(120,92,255,.10);
}
.hero-left { min-width: 0; z-index: 1; flex: 1; }
.hero-eyebrow { font-size: 11px; letter-spacing: .2em; color: var(--purple); font-weight: 700; }
.hero-number-wrap { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0; }
.hero-number { font-size: 104px; font-weight: 700; line-height: .95; letter-spacing: -.04em;
  background: linear-gradient(135deg, #785CFF 0%, #6E5BF2 45%, #11A99B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.hero-star { position: relative; color: #E0A93B; margin-top: 10px; animation: imk-star-pulse 2.4s ease-in-out infinite; }
.hero-star svg { width: 40px; height: 40px; }
.hero-star .spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #F2C24A; box-shadow: 0 0 6px #E0A93B; animation: imk-spark 1.8s ease-in-out infinite; }
.hero-star .s1 { top: -6px; right: -8px; animation-delay: .1s; }
.hero-star .s2 { bottom: 2px; left: -10px; animation-delay: .7s; }
.hero-star .s3 { top: 10px; right: -12px; width: 4px; height: 4px; animation-delay: 1.2s; }
.hero-songs { font-size: 17px; font-weight: 600; color: var(--text); margin-top: 4px; }
.hero-growing { font-size: 13px; color: var(--purple); margin-top: 2px; font-weight: 500; }
.hero-level { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 12px; }
.hero-level-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #8A6400;
  background: #F8EECB; border: 1px solid #EBD89A; border-radius: 20px; padding: 6px 14px; }
.hero-level-chip .chip-star { color: #B5840F; display: inline-flex; }
.hero-level-chip .chip-star svg { width: 13px; height: 13px; }
.hero-nextms { font-size: 12px; color: var(--text-2); }
.hero-nextms-lab { color: var(--text-3); font-weight: 600; }
.hero-bar-top { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.hero-bar { position: relative; height: 16px; background: #EDE8F6; border-radius: 9px; max-width: 420px; border: 1px solid var(--border); }
.hero-fill { position: relative; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #785CFF, #6E5BF2 50%, #11A99B); transition: width .7s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px rgba(120,92,255,.35); }
.hero-fill-cap { position: absolute; right: 0; top: 50%; transform: translate(50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--teal), 0 2px 6px rgba(11,19,48,.2); }
.hero-goal-marker { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.hero-goal-marker svg { width: 18px; height: 18px; }
.hero-next { font-size: 12.5px; color: var(--text-2); margin-top: 8px; font-weight: 500; }
.hero-mini { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.mini-chip { font-size: 12px; color: var(--text-2); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 5px 11px; }
.mini-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-chip.mini-active b { color: var(--teal); }
.mini-chip.mini-audition b { color: var(--gold); }
.mini-chip.mini-study b { color: var(--purple); }
.hero-cat { flex-shrink: 0; z-index: 1; }
.hero-cat img { width: 168px; height: 168px; object-fit: contain; animation: imk-float 5s ease-in-out infinite; filter: drop-shadow(0 10px 22px rgba(120,92,255,.28)); }

/* Stat cards with cats */
.pg-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.pg-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 16px 16px; text-align: center; overflow: hidden; transition: transform .16s cubic-bezier(.2,.8,.2,1), border-color .14s, box-shadow .14s;
}
.pg-card:hover { transform: translateY(-3px); }
.pg-card-cat { width: 60px; height: 60px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .16s; }
.pg-card:hover .pg-card-cat { transform: scale(1.08) rotate(-3deg); }
.pg-card-cat img { width: 54px; height: 54px; object-fit: contain; }
.pg-card-cat.dim { filter: grayscale(.5); opacity: .8; }
.pg-card-num { font-size: 38px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pg-card-num.zero { color: var(--text-3); }
.pg-card-title { font-size: 13.5px; font-weight: 600; margin-top: 8px; }
.pg-card-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.35; }
.pg-card-sub.cta { color: var(--gold); font-weight: 600; }
/* badges */
.card-badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; letter-spacing: .02em; }
.card-badge svg { width: 11px; height: 11px; }
.card-badge.gold { color: #4a3500; background: linear-gradient(135deg, #ffe39a, #eab93f); box-shadow: 0 2px 10px rgba(224,169,59,.35); }
.card-badge.spark { color: #6b2e10; background: linear-gradient(135deg, #ffd9b3, #f0a35a); }
.card-badge.teal { color: #fff; background: var(--teal); }
.card-badge.soft { position: static; display: inline-block; margin: 0 auto 8px; color: var(--text-2); background: var(--bg); border: 1px solid var(--border); }
/* per-type accents */
.pg-card.c-active:hover { border-color: #2a9d7f; box-shadow: 0 10px 26px rgba(45,157,127,.22); }
.pg-card.c-active .pg-card-num { color: var(--teal); }
.pg-card.c-active .pg-card-cat { background: radial-gradient(circle at 50% 40%, rgba(45,157,127,.24), transparent 70%); }
.pg-card.c-study:hover { border-color: #7c6ae0; box-shadow: 0 10px 26px rgba(124,106,224,.22); }
.pg-card.c-study .pg-card-num { color: var(--purple); }
.pg-card.c-study .pg-card-cat { background: radial-gradient(circle at 50% 40%, rgba(124,106,224,.22), transparent 70%); }
.pg-card.c-week:hover { border-color: #e8924a; box-shadow: 0 10px 26px rgba(232,146,74,.22); }
.pg-card.c-week .pg-card-num { color: var(--amber); }
.pg-card.c-week .pg-card-cat { background: radial-gradient(circle at 50% 40%, rgba(232,146,74,.22), transparent 70%); }
/* Audition Ready — the special, golden one */
.pg-card.c-audition.special {
  background: linear-gradient(160deg, #FFF8E6, #F6F2FF);
  border-color: #EBD89A;
}
.pg-card.c-audition.special:hover { border-color: #E0A93B; box-shadow: 0 12px 30px rgba(224,169,59,.25); }
.pg-card.c-audition .pg-card-num { color: var(--gold); }
.pg-card.c-audition .pg-card-cat { background: radial-gradient(circle at 50% 40%, rgba(224,169,59,.22), transparent 70%); }
.pg-card.c-audition.is-zero { background: var(--bg-card); border-style: dashed; border-color: #E6CF8A; }

/* Next action */
.pg-action {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  background: linear-gradient(135deg, #F4F0FF, #EAF8F5);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px;
}
.pg-action-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #B5840F; background: #F8EECB; border: 1px solid #EBD89A; }
.pg-action-icon .ti { display: none; }
.pg-action-icon svg { width: 19px; height: 19px; }
.pg-action-lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.pg-action-text { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; }

/* Blocks */
.pg-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.pg-h { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pg-h-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pg-h-row .pg-h { margin: 0; }
.pg-ms-count { font-size: 13px; font-weight: 700; color: #8A6400; background: #F8EECB; border-radius: 12px; padding: 3px 10px; }

/* Level-up ladder */
.pg-ladder { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lad-node { flex: 1; min-width: 90px; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 8px; transition: border-color .14s, transform .14s; }
.lad-node.big { border-color: var(--purple-d); box-shadow: 0 0 0 1px rgba(124,106,224,.3), 0 6px 18px rgba(124,106,224,.18); transform: translateY(-2px); }
.lad-count { font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.lad-arrow { color: var(--text-3); font-size: 18px; flex: 0 0 auto; }

/* Milestones */
.pg-milestones { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ms-badge { text-align: center; border-radius: var(--radius); padding: 14px 8px; border: 1px solid var(--border); transition: transform .14s; }
.ms-badge.got { background: linear-gradient(160deg, #F2EEFF, #E7F7F3); border-color: #DDD5FF; }
.ms-badge.got:hover { transform: translateY(-2px); }
.ms-badge.locked { opacity: .5; filter: grayscale(.7); }
.ms-cat { position: relative; width: 52px; height: 52px; margin: 0 auto 8px; }
.ms-cat img { width: 52px; height: 52px; object-fit: contain; }
.ms-star { position: absolute; bottom: -2px; right: -4px; color: #E0A93B; background: var(--bg-card); border-radius: 50%; padding: 2px; box-shadow: 0 1px 4px rgba(11,19,48,.12); }
.ms-star svg { width: 16px; height: 16px; display: block; }
.ms-lock { position: absolute; bottom: -2px; right: -4px; color: var(--text-3); background: var(--bg-card); border-radius: 50%; padding: 3px; }
.ms-lock svg { width: 14px; height: 14px; display: block; }
.ms-label { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--text-2); }
.ms-badge.got .ms-label { color: var(--text); }

/* ── Audition set panel ── */
.pg-clickable { cursor: pointer; }
.aud-backdrop {
  position: fixed; inset: 0; z-index: 120; background: rgba(11,19,48,.5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.aud-backdrop.show { opacity: 1; pointer-events: auto; }
.aud-panel {
  position: relative; width: 100%; max-width: 560px; background: var(--bg-elev);
  border: 1px solid #EBD89A; border-radius: var(--radius-lg); padding: 26px 26px 20px;
  max-height: 88vh; overflow-y: auto; transform: scale(.97); transition: transform .2s;
  box-shadow: 0 30px 80px rgba(11,19,48,.28);
}
.aud-backdrop.show .aud-panel { transform: scale(1); }
.aud-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-3); display: flex; }
.aud-close svg { width: 20px; height: 20px; }
.aud-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.aud-cat-wrap { width: 100px; height: 100px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(224,169,59,.28), rgba(120,92,255,.10) 60%, transparent 74%); }
.aud-cat { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(120,92,255,.25)); }
.aud-eyebrow { font-size: 11px; letter-spacing: .18em; color: var(--gold); font-weight: 700; }
.aud-title { font-family: var(--font-head); font-size: 22px; font-weight: 600; margin-top: 2px; }
.aud-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.aud-list { display: flex; flex-direction: column; }
.aud-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--border); }
.aud-row:first-child { border-top: none; }
.aud-row-main { flex: 1; min-width: 0; }
.aud-song { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-artist { font-size: 12px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-meta { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.aud-dur { font-size: 13px; font-weight: 700; color: #8A6400; background: #F8EECB; border-radius: 8px; padding: 3px 9px; }
.aud-key { font-size: 14px; font-weight: 600; }
.aud-key.flat { color: var(--purple); } .aud-key.sharp { color: var(--teal); } .aud-key.orig { color: var(--text-3); font-size: 13px; }
.aud-tempo { font-size: 13px; color: var(--text-2); }
.aud-open { flex-shrink: 0; border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 13px; font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; transition: all .12s; }
.aud-open:hover { border-color: var(--gold); color: var(--gold); background: #FFFCF3; }
.aud-empty { font-size: 14px; color: var(--text-2); line-height: 1.6; padding: 10px 2px 6px; }

/* ── Lyrics & Vocal Markup ── */
.ly-container { max-width: 1120px; }
.ly-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.ly-back:hover { color: var(--purple); }
.ly-back svg { width: 16px; height: 16px; }
.ly-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; }
.ly-title { font-family: var(--font-head); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.ly-sub { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.ly-meta { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ly-chip { font-size: 12.5px; color: var(--text-2); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 5px 11px; }
.ly-chip-lab { color: var(--text-3); margin-right: 4px; }
.ly-chip b { font-variant-numeric: tabular-nums; }
.ly-key-flat { color: var(--purple); } .ly-key-sharp { color: var(--teal); } .ly-key-orig { color: var(--text-3); }
.ly-practice { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--purple); color: #fff; border-radius: var(--radius); padding: 12px 18px; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px rgba(120,92,255,.28); transition: transform .12s, box-shadow .12s; }
.ly-practice:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(120,92,255,.4); }
.ly-practice svg { width: 15px; height: 15px; }

/* tabs */
.ly-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 18px 0 18px; }
.ly-tab { padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ly-tab:hover { color: var(--text-2); }
.ly-tab.active { color: var(--purple); border-bottom-color: var(--purple); font-weight: 600; }
.ly-help-btn { margin-left: auto; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; background: var(--lilac); color: var(--purple); border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 13px 6px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, transform .12s; }
.ly-help-btn:hover { background: #ECE4FF; transform: translateY(-1px); }
.ly-help-btn svg { width: 15px; height: 15px; }
.ly-sheet-hint { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12.5px; margin: -4px 0 14px; }
.ly-sheet-hint svg { width: 14px; height: 14px; color: var(--purple); flex: none; }

/* empty state */
.ly-empty { text-align: center; padding: 40px 20px 48px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ly-empty img { width: 116px; height: 116px; object-fit: contain; margin: 0 auto 14px; }
.ly-empty h2 { font-family: var(--font-head); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.ly-empty p { font-size: 14px; color: var(--text-2); max-width: 420px; margin: 0 auto 18px; line-height: 1.6; }
.ly-empty-actions { display: flex; gap: 10px; justify-content: center; }
.ly-private { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-top: 16px; }
.ly-private svg { width: 13px; height: 13px; }

/* buttons */
.ly-btn { border: 1px solid var(--border-2); background: var(--bg-card); color: var(--text); border-radius: var(--radius); padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .12s; font-family: inherit; }
.ly-btn:hover { border-color: var(--purple-d); color: var(--purple); }
.ly-btn.primary { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 4px 14px rgba(120,92,255,.28); }
.ly-btn.primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(120,92,255,.4); }
.ly-btn.ghost { background: none; }
.ly-btn.sm { padding: 7px 12px; font-size: 12.5px; }

/* editor */
.ly-editor { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; }
.ly-editor-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ly-editor-lab { font-size: 13px; color: var(--text-2); }
.ly-save-state { font-size: 12px; color: var(--teal-d); }
.ly-editor textarea { width: 100%; min-height: 320px; resize: vertical; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 16px; font-family: var(--font); font-size: 15.5px; line-height: 1.9; color: var(--text); outline: none; }
.ly-editor textarea:focus { border-color: var(--purple-d); }
.ly-editor-actions { display: flex; gap: 10px; margin-top: 14px; }

/* layout: sheet + panel */
.ly-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: start; }
.ly-sheet-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 24px 28px; }
.ly-sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.ly-sheet-lab { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.ly-sheet { font-size: 16.5px; line-height: 2.1; color: var(--ink); }
.ly-line { position: relative; padding: 1px 0 1px 22px; border-radius: 6px; }
.ly-line.ly-blank { min-height: 1.6em; }
.ly-line.ly-flash { background: rgba(120,92,255,.10); }
.ly-gutter { position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: none; background: none; color: var(--text-3); opacity: 0; font-size: 16px; cursor: pointer; border-radius: 5px; }
.ly-line:hover .ly-gutter { opacity: 1; }
.ly-gutter:hover { background: var(--bg-hover); color: var(--purple); }
.ly-section { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-d); background: var(--lilac); border: 1px solid #DDD5FF; border-radius: 8px; padding: 3px 10px; margin: 16px 0 6px; }
.ly-section-x { border: none; background: none; color: var(--purple-d); cursor: pointer; font-size: 14px; line-height: 1; opacity: .6; }
.ly-section-x:hover { opacity: 1; }

/* markup spans (soft, premium) */
.ly-mark { border-radius: 3px; padding: 0 1px; cursor: pointer; }
.ly-breath { box-shadow: inset 0 -2px 0 #11A99B; }
.ly-breath-glyph { color: #11A99B; font-weight: 700; margin-right: 2px; }
.ly-emphasis { background: rgba(150,123,255,.22); }
.ly-crescendo { box-shadow: inset 0 -2px 0 #785CFF; }
.ly-diminuendo { box-shadow: inset 0 -2px 0 #4D6BFF; }
.ly-vowel { box-shadow: inset 0 -2px 0 #C99A2E; }
.ly-pitch { box-shadow: inset 0 -2px 0 #2f6fe0; }
.ly-rhythm { border-bottom: 2px dotted #11A99B; }
.ly-emotion { box-shadow: inset 0 -2px 0 #d65a98; }
.ly-teacher { background: rgba(91,67,230,.16); box-shadow: inset 0 -2px 0 #5B43E6; }
.ly-custom { box-shadow: inset 0 -2px 0 #8b86b8; }
/* vibrato = wavy "wiggle" ABOVE the word (ornament, not a register) */
.ly-vibrato { text-decoration: overline wavy #9B5BD6; text-decoration-thickness: 2px; }
/* registers along the chest(red) ↔ head(blue) coordination continuum */
.ly-chestvoice { box-shadow: inset 0 -2px 0 #E0392F; }            /* pecho — rojo */
.ly-belting { box-shadow: inset 0 -3px 0 #8A1AAE; background: rgba(138,26,174,.08); } /* belting — violeta intenso */
.ly-mixvoice { box-shadow: inset 0 -2px 0 #7C4DD6; }              /* mix — violeta */
.ly-mixlegit { box-shadow: inset 0 -2px 0 #B79BE8; }              /* mix legit — lila */
.ly-headvoice { box-shadow: inset 0 -2px 0 #2E9BE0; }            /* cabeza — celeste */
.ly-falsetto { box-shadow: inset 0 -2px 0 #7FC8EC; }            /* falsete — celeste claro */
.ly-breathy { border-bottom: 2px dashed #93A7C2; }              /* aireada — textura de aire */
.ly-dyn { font-weight: 700; color: var(--text-3); margin: 0 2px; font-variant-numeric: tabular-nums; }

/* annotations panel */
.ly-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 16px 12px; position: sticky; top: 84px; }
.ly-panel-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.ly-panel-count { font-size: 12px; font-weight: 700; color: var(--purple-d); background: var(--lilac); border-radius: 12px; padding: 2px 9px; }
.ly-panel-empty { font-size: 13px; color: var(--text-3); line-height: 1.5; }
.ly-panel-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.ly-ann { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 11px; cursor: pointer; transition: border-color .12s; }
.ly-ann:hover { border-color: var(--border-2); }
.ly-ann-top { display: flex; align-items: center; gap: 7px; }
.ly-ann-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ly-ann-dot.ly-breath { background: #11A99B; } .ly-ann-dot.ly-emphasis { background: #967bff; }
.ly-ann-dot.ly-crescendo { background: #785CFF; } .ly-ann-dot.ly-diminuendo { background: #4D6BFF; }
.ly-ann-dot.ly-vowel { background: #C99A2E; } .ly-ann-dot.ly-pitch { background: #2f6fe0; }
.ly-ann-dot.ly-rhythm { background: #11A99B; } .ly-ann-dot.ly-emotion { background: #d65a98; }
.ly-ann-dot.ly-teacher { background: #5B43E6; } .ly-ann-dot.ly-custom { background: #8b86b8; }
.ly-ann-dot.ly-chestvoice { background: #E0392F; } .ly-ann-dot.ly-belting { background: #8A1AAE; }
.ly-ann-dot.ly-mixvoice { background: #7C4DD6; } .ly-ann-dot.ly-mixlegit { background: #B79BE8; }
.ly-ann-dot.ly-headvoice { background: #2E9BE0; } .ly-ann-dot.ly-falsetto { background: #7FC8EC; }
.ly-ann-dot.ly-breathy { background: #93A7C2; } .ly-ann-dot.ly-vibrato { background: #9B5BD6; }
.ly-ann-type { font-size: 12.5px; font-weight: 600; }
.ly-ann-line { font-size: 11px; color: var(--text-3); margin-left: auto; }
.ly-ann-del { border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.ly-ann-del:hover { color: #e24b4a; }
.ly-ann-quote { font-size: 12.5px; color: var(--text-2); font-style: italic; margin: 6px 0 7px; }
.ly-ann-note { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; font-family: inherit; color: var(--text); outline: none; }
.ly-ann-note:focus { border-color: var(--purple-d); }

/* floating toolbar */
.ly-toolbar { position: fixed; z-index: 150; display: flex; flex-direction: column; gap: 8px; width: 330px; max-width: calc(100vw - 24px); background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 10px 12px; box-shadow: 0 12px 34px rgba(11,19,48,.2); }
.ly-toolbar[hidden] { display: none; } /* native [hidden] loses to display:flex above — force it off */
.ly-tb-group { display: flex; flex-direction: column; gap: 5px; }
.ly-tb-group + .ly-tb-group { border-top: 1px solid var(--border); padding-top: 8px; }
.ly-tb-grp-lab { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
/* registers = chest(red) → mixes(violet) → head(blue) continuum cue */
.ly-tb-group[data-grp="registers"] .ly-tb-grp-lab::after { content: ''; display: block; height: 3px; border-radius: 2px; margin-top: 5px; background: linear-gradient(90deg, #E0392F, #8A1AAE 28%, #7C4DD6 48%, #B79BE8 64%, #2E9BE0 100%); }
.ly-tb-row { display: flex; flex-wrap: wrap; gap: 4px; }
.ly-tb-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; background: var(--bg); border-radius: 7px; padding: 5px 9px; font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; font-family: inherit; }
.ly-tb-btn:hover { background: var(--bg-hover); border-color: var(--border-2); }
.ly-sec-menu { position: fixed; z-index: 160; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 5px; box-shadow: 0 10px 30px rgba(11,19,48,.18); min-width: 150px; }
.ly-sec-menu button { border: none; background: none; text-align: left; padding: 8px 10px; font-size: 13px; color: var(--text); border-radius: 7px; cursor: pointer; font-family: inherit; }
.ly-sec-menu button:hover { background: var(--bg-hover); color: var(--purple); }

/* ── Onboarding / "how to mark" tutorial ── */
.ly-tut-backdrop { position: fixed; inset: 0; z-index: 220; background: rgba(11,19,48,.46); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.ly-tut-backdrop[hidden] { display: none; }
.ly-tut { position: relative; width: 100%; max-width: 540px; background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 26px 26px 22px; box-shadow: 0 24px 70px rgba(11,19,48,.32); animation: lyTutIn .18s ease; }
@keyframes lyTutIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.ly-tut-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border-2); border-radius: 8px; color: var(--text-3); cursor: pointer; }
.ly-tut-close:hover { color: var(--text); background: var(--bg-hover); }
.ly-tut-close svg { width: 16px; height: 16px; }
.ly-tut-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding-right: 30px; }
.ly-tut-hero img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.ly-tut-title { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.ly-tut-intro { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.ly-tut-steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ly-tut-steps li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--text); }
.ly-tut-steps b { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--purple); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; margin-top: 1px; }
.ly-tut-legend-h { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.ly-tut-grp { margin-bottom: 14px; }
.ly-tut-grp-h { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.ly-tut-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.ly-tut-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.ly-tut-tip { font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.ly-tut-continuum { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.ly-tut-bar { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #E0392F, #8A1AAE 28%, #7C4DD6 48%, #B79BE8 64%, #2E9BE0 100%); }
.ly-tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.ly-tut-private { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.ly-tut-private svg { width: 14px; height: 14px; flex: none; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 12px 20px; font-size: 14px; color: #fff; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 14px 40px rgba(11,19,48,.28);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 720px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .view-list { grid-template-columns: 1fr; }
  .pg-hero { flex-direction: column; text-align: center; }
  .hero-number-wrap { justify-content: center; }
  .hero-bar { max-width: none; }
  .hero-cat img { width: 110px; height: 110px; }
  .pg-cards { grid-template-columns: repeat(2, 1fr); }
  .pg-milestones { grid-template-columns: repeat(3, 1fr); }
  .pg-block { padding: 16px; }
  .pg-ladder { gap: 4px; }
  .lad-node { min-width: 64px; padding: 10px 4px; }
  .ly-layout { grid-template-columns: 1fr; }
  .ly-panel { position: static; }
  .ly-head { flex-direction: column; }
  .ly-practice { width: 100%; justify-content: center; }
  .col-head { display: none; }
  .song-row { grid-template-columns: 1fr auto; grid-template-areas: "main menu" "stats stats"; row-gap: 10px; }
  .s-main { grid-area: main; }
  .row-menu-btn { grid-area: menu; }
  .s-genre, .s-key, .s-tempo, .s-loop, .s-statuses { grid-area: stats; }
  .song-row .s-genre, .song-row .s-key, .song-row .s-tempo, .song-row .s-loop { display: inline-block; margin-right: 14px; }
  .song-row .s-statuses { display: inline-flex; }
  .cat-banner { display: none; }
}