/* ============================================================
     SIGNATURE SCHOOL OF MUSIC — BRAND THEME
     Edit these six values to match your website and the whole
     player restyles itself (buttons, panels, cursor, keyboard).
     ============================================================ */
  :root {
    /* Matched to signatureschoolofmusic.com.np */
    --ink: #0b3237;          /* primary dark: deep petrol teal        */
    --ink-soft: #14525a;     /* lighter shade of the primary dark     */
    --marigold: #12a0af;     /* accent: site teal (buttons, cursor)   */
    --marigold-deep: #0b7784;/* darker accent for emphasis            */
    --paper: #fbfdfd;        /* light background                      */
    --line: #d8e5e4;         /* borders and dividers                  */
    --muted: #567376;        /* secondary text                        */
    /* Note-head judgement colours. Deliberately softened / desaturated from
       the old bright #2e9e57 / #e07b1f / #e23b3b so the marks read as gentle
       tints on the note head rather than harsh, high-contrast dots. Kept
       distinct enough (green / amber / red / grey) to tell apart at a glance. */
    --mark-good: #5aa678;    /* in time  – muted sage green   */
    --mark-late: #d69b52;    /* early/late – soft amber       */
    --mark-miss: #cf6b6b;    /* missed   – muted brick red    */
    --mark-unheard: #8c9a9b; /* no usable mic attack – grey   */
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; min-height: 100%; }
  body {
    font-family: "Inter", system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh; /* accounts for mobile browser toolbars */
  }

  .gate {
    position: fixed; inset: 0; z-index: 60;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .gate.hidden { display: none; }
  .gate-card {
    background: var(--paper);
    border-radius: 16px;
    border-top: 4px solid var(--marigold);
    padding: 34px 34px 26px;
    width: min(400px, 94vw);
    text-align: center;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
  }
  .gate-logo { margin: 0 auto 12px; width: 52px; height: 52px; font-size: 1.7rem; }
  .gate-card .tag {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--marigold-deep);
  }
  .gate-card h2 { font-family: "Fraunces", serif; font-weight: 650; font-size: 1.6rem; color: var(--ink); margin: 4px 0 6px; }
  .gate-sub { font-size: 0.84rem; color: var(--muted); margin-bottom: 16px; }
  #gateEmail, #gatePass {
    width: 100%; box-sizing: border-box; font-family: inherit; font-size: 0.95rem;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; color: var(--ink); text-align: center;
    margin-bottom: 8px;
  }
  #gateEmail:focus-visible, #gatePass:focus-visible { outline: 2px solid var(--marigold); outline-offset: 1px; }
  .gate-err { color: #d9534f; font-size: 0.78rem; min-height: 18px; margin: 6px 0 4px; }
  .gate-btn { width: 100%; padding: 12px; font-size: 0.92rem; margin-bottom: 8px; }
  .gate-demo { width: 100%; background: #fff; color: var(--ink); border-color: var(--line); }
  .gate-demo:hover { background: #eef5f4; }
  .gate-foot { font-size: 0.7rem; color: var(--muted); margin-top: 16px; line-height: 1.5; }

  /* ---------- Top bar ---------- */
  .topbar {
    background: var(--ink); color: var(--paper);
    padding: 12px 18px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    flex-shrink: 0;
  }
  .topbar .brand { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .topbar h1 {
    font-family: "Fraunces", serif; font-weight: 650; font-size: 1.15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar .tag {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--marigold);
  }
  .logo-mark {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--marigold);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: "Fraunces", serif; font-size: 1.25rem; font-weight: 650;
    box-shadow: 0 0 0 2px rgba(232,160,32,0.35);
  }
  .sound-chip {
    font-size: 0.68rem; font-weight: 600; color: #a8cdd1;
    border: 1px solid var(--ink-soft); border-radius: 999px;
    padding: 5px 11px; white-space: nowrap;
  }
  .sound-chip.hq { color: var(--ink); background: var(--marigold); border-color: var(--marigold); }

  /* Rotating practice quote in the sheet-music header (the dark banner).
     Sits between the title and the chips, italic and understated so it reads
     as a gentle "thought for the session", never competing with the title.
     Truncates to one line and hides on narrow screens where there's no room. */
  .header-quote {
    flex: 2 1 180px; min-width: 0;
    font-family: "Fraunces", serif; font-style: italic;
    font-size: 0.9rem; color: #bfe0e4;
    text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0.92;
  }
  .header-quote:empty { display: none; }
  @media (max-width: 900px) { .header-quote { display: none; } }

  /* Welcome + quote banner on the library home page, shown once per login. */
  .welcome-banner {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
    color: var(--paper);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 6px 0 22px;
    box-shadow: 0 10px 26px -18px rgba(9,43,47,0.5);
  }
  .welcome-banner[hidden] { display: none; }
  .welcome-banner .welcome-hi {
    font-family: "Fraunces", serif; font-weight: 650; font-size: 1.3rem;
    margin-bottom: 4px;
  }
  .welcome-banner .welcome-quote {
    font-style: italic; font-size: 0.95rem; color: #bfe0e4; line-height: 1.5;
  }
  @media (max-width: 620px) {
    .welcome-banner { padding: 14px 16px; }
    .welcome-banner .welcome-hi { font-size: 1.12rem; }
    .welcome-banner .welcome-quote { font-size: 0.88rem; }
  }

  .topbar .nav-song {
    font-size: 1.15rem; line-height: 1; padding: 6px 12px; min-width: 40px;
    flex-shrink: 0;
  }
  .topbar .nav-song:disabled { opacity: 0.35; cursor: default; }

  .btn {
    font-family: inherit; font-size: 0.8rem; font-weight: 600;
    border: 1px solid var(--ink-soft); background: var(--ink-soft); color: var(--paper);
    border-radius: 8px; padding: 9px 13px; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .btn:hover:not(:disabled) { background: #1b666f; }
  .btn:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
  .btn:disabled { opacity: 0.45; cursor: default; }
  .btn.toggled, .btn.accent { background: var(--marigold); border-color: var(--marigold); color: var(--ink); }
  .btn.accent:hover:not(:disabled) { background: #23b3c2; }

  /* ---------- Library panel ---------- */
  .backdrop {
    position: fixed; inset: 0; background: rgba(9, 43, 47, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 20;
  }
  .backdrop.open { opacity: 1; pointer-events: auto; }
  .library {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(360px, 92vw);
    background: var(--paper);
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 40px -18px rgba(9, 43, 47,0.4);
    transform: translateX(-102%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 21;
    display: flex; flex-direction: column;
  }
  .library.open { transform: translateX(0); }
  .library-head { background: var(--ink); color: var(--paper); padding: 16px 18px 14px; }
  .library-head h2 { font-family: "Fraunces", serif; font-weight: 650; font-size: 1.1rem; }
  .library-head .tag {
    font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--marigold);
  }
  .library-search { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .library-search input {
    width: 100%; font-family: inherit; font-size: 0.85rem;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink);
  }
  .library-search input:focus-visible { outline: 2px solid var(--marigold); outline-offset: 1px; }
  .library-list { flex: 1; overflow-y: auto; padding: 6px 0 12px; }
  .lib-section {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); padding: 14px 18px 6px;
  }
  .lib-section-details { margin: 0; }
  .lib-section-details > summary.lib-section {
    cursor: pointer; list-style: none; display: flex; align-items: center;
    justify-content: space-between; padding-right: 14px;
  }
  .lib-section-details > summary.lib-section::-webkit-details-marker { display: none; }
  .lib-section-details > summary.lib-section::after {
    content: "\25BE"; font-size: 0.8rem; transition: transform 0.15s ease;
  }
  .lib-section-details[open] > summary.lib-section::after { transform: rotate(180deg); }
  .song-row {
    width: 100%; text-align: left; background: none; border: none;
    border-left: 3px solid transparent; font-family: inherit;
    padding: 10px 18px 10px 15px; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
  }
  .song-row:hover { background: #eef5f4; }
  .song-row:focus-visible { outline: 2px solid var(--marigold); outline-offset: -2px; }
  .song-row.active { border-left-color: var(--marigold); background: #eef5f4; }
  .song-row .song-main { flex: 1; min-width: 0; }
  .song-row .song-title {
    font-size: 0.88rem; font-weight: 600; color: var(--ink); display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .song-row .song-meta {
    font-size: 0.72rem; color: var(--muted); margin-top: 2px; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .song-row .remove-x {
    border: none; background: none; color: var(--muted);
    font-size: 0.95rem; cursor: pointer; padding: 4px 6px; border-radius: 6px;
  }
  .song-row .remove-x:hover { color: #a33; background: #f3e2e2; }
  .lib-empty { padding: 14px 18px; font-size: 0.8rem; color: var(--muted); }
  .library-foot { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
  .library-foot .btn { flex: 1; }
  .library-foot .btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
  .library-foot .btn.ghost:hover { background: #eef5f4; }

  .settings {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(320px, 92vw);
    background: var(--paper);
    border-left: 1px solid var(--line);
    box-shadow: -12px 0 40px -18px rgba(9, 43, 47,0.4);
    transform: translateX(102%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 21;
    display: flex; flex-direction: column;
  }
  .settings.open { transform: translateX(0); }
  .settings-body { flex: 1; overflow-y: auto; padding-bottom: 12px; }
  .set-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 18px; font-size: 0.86rem; color: var(--ink);
    cursor: pointer;
  }
  .set-row:hover { background: #eef5f4; }
  .set-row input[type="checkbox"] { accent-color: var(--marigold); width: 18px; height: 18px; }
  .set-ctrl { display:flex; align-items:center; gap:8px; }
  .set-ctrl input[type="range"] { width:140px; accent-color: var(--marigold); }
  .set-val { color: var(--marigold); font-weight:600; font-size:.75rem; min-width:38px; text-align:right; }
  .set-select { background: #fff !important; color: var(--ink) !important; border-color: var(--line) !important; }

  /* ---------- Gear tools panel ---------- */
  .gear-backdrop { position: fixed; inset: 0; background: rgba(9,43,47,0.45); opacity:0; pointer-events:none; transition:opacity .25s; z-index:24; }
  .gear-backdrop.open { opacity:1; pointer-events:auto; }
  .gearpanel {
    position: fixed; right: 0; bottom: 0; top: auto;
    width: min(340px, 94vw); max-height: 82vh;
    background: var(--paper); border:1px solid var(--line);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -12px 40px -18px rgba(9,43,47,0.4);
    transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    z-index: 25; display:flex; flex-direction:column;
  }
  .gearpanel.open { transform: translateY(0); }
  .gear-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--ink); color:var(--paper); border-radius:14px 14px 0 0; }
  .gear-head .tag { font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--marigold); }
  .gear-body { padding:10px 14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
  .gear-body .ctrl-label { color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
  .dual-row-cols { display: flex; gap: 10px; }
  .dual-col { flex: 1 1 50%; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .dual-col-title { font-size: 0.68rem; }
  .gear-body .ctrl-label .ctrl, .gear-body .ctrl-label input[type=range] { margin-top:6px; width:100%; }
  .gear-body .ctrl { background:#fff !important; color:var(--ink) !important; border-color:var(--line) !important; }
  .gear-body .btn { width:100%; }

  /* ---------- Library home page ---------- */
  .home {
    position: fixed; inset: 0; z-index: 30;      /* above the player + its cursor */
    background: var(--paper);
    display: none;
  }
  .home.show { display: flex; flex-direction: row; }
  .home-side {
    width: 232px; flex-shrink: 0; background: var(--ink); color: var(--paper);
    display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto;
  }
  .home-side-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 20px; }
  .home-side-brand .logo-mark { width: 34px; height: 34px; font-size: 1.1rem; flex-shrink: 0; }
  .home-side-brand .tag { font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--marigold); }
  .home-side-brand .side-title { font-family: "Fraunces", serif; font-weight: 650; font-size: 1.05rem; color: var(--paper); }
  .home-side-nav { display: flex; flex-direction: column; gap: 2px; }
  .side-nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 10px; border-radius: 9px; border: none; background: none; cursor: pointer;
    color: #a8cdd1; font-size: .85rem; font-weight: 600; font-family: inherit;
  }
  .side-nav-item:hover { background: var(--ink-soft); color: var(--paper); }
  .side-nav-item.active { background: var(--marigold); color: var(--ink); }
  .side-nav-item .side-nav-ic { width: 18px; text-align: center; flex-shrink: 0; font-size: .88rem; }
  .side-nav-item .side-nav-count { margin-left: auto; font-size: .7rem; opacity: .8; font-weight: 600; flex-shrink: 0; }
  .home-side-spacer { flex: 1; }
  .home-side-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--ink-soft); }
  .home-side-actions .btn { width: 100%; }

  /* ---------- Generated piano / guitar practice trainer ---------- */
  .trainer-modal { position:fixed; inset:0; z-index:120; display:none; padding:0; background:var(--paper); }
  .trainer-modal.show { display:flex; }
  .trainer-shell { width:100%; height:100vh; height:100dvh; max-height:none; overflow:hidden; background:var(--paper); border-radius:0; box-shadow:none; display:flex; flex-direction:column; }
  .trainer-head { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 22px; background:var(--ink); color:#fff; }
  .trainer-head h2 { margin:3px 0 0; font-family:"Fraunces",serif; font-size:1.45rem; }
  /* The sidebar gives way on narrow laptops/tablets instead of squeezing the
     score into a sliver. minmax(0,1fr) keeps the stage from overflowing. */
  .trainer-layout { display:grid; grid-template-columns:clamp(220px,24vw,300px) minmax(0,1fr); flex:1; min-height:0; overflow:hidden; position:relative; }
  .trainer-settings { padding:18px; background:#eef5f4; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:13px; overflow-y:auto; }
  .trainer-settings label { display:flex; flex-direction:column; gap:6px; color:var(--ink); font-size:.75rem; font-weight:650; }

  /* Sight Trainer instrument-specific controls. The generic label rule above
     uses display:flex, so explicitly enforce hidden instrument rows here. */
  #trainerPianoModeRow, #trainerStaffRow { display:flex; }
  #trainerGuitarModeRow[hidden], #trainerGuitarPositionRow[hidden] { display:none !important; }
  .trainer-settings .ctrl { width:100%; background:#fff; color:var(--ink); border-color:var(--line); }
  .trainer-settings input[type=range] { width:100%; accent-color:var(--marigold-deep); }
  .trainer-range { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .trainer-note-values { display:flex; flex-direction:column; gap:7px; }
  .trainer-setting-title { display:flex; align-items:baseline; justify-content:space-between; gap:8px; color:var(--ink); font-size:.75rem; font-weight:650; }
  .trainer-setting-title span { color:var(--muted); font-size:.66rem; font-weight:550; }
  .trainer-note-value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .trainer-note-value-grid .trainer-note-check:last-child { grid-column:1 / -1; }
  .trainer-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .trainer-settings .trainer-check { display:flex; flex-direction:row; align-items:center; gap:7px; padding:9px 10px; background:#fff; border:1px solid var(--line); border-radius:9px; cursor:pointer; }
  .trainer-check input { width:17px; height:17px; margin:0; accent-color:var(--marigold-deep); }
  .trainer-help { font-size:.72rem; line-height:1.45; color:var(--muted); margin:0; }
  .trainer-stage { padding:clamp(10px,1.6vh,22px) clamp(12px,1.6vw,22px); min-width:0; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:clamp(8px,1.4vh,15px); }
  .trainer-topline { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
  .trainer-chip { background:var(--ink); color:#fff; padding:6px 10px; border-radius:999px; font-size:.72rem; font-weight:650; }
  .trainer-status { color:var(--muted); font-size:.78rem; }
  /* THE "I HAVE TO SCROLL TO SEE THE MUSIC" FIX: a hard 360px floor made the
     stage taller than a short viewport, so the sheet music and the practice
     buttons could never be on screen together. The score now takes whatever
     height is actually left and only reserves a proportional floor. */
  .trainer-score { position:relative; flex:1 1 auto; min-height:clamp(160px,32vh,360px); overflow:auto; background:#fff; border:1px solid var(--line); border-radius:0; padding:8px; }
  .trainer-score .at-surface { background:#fff; }
  .trainer-score svg { display:block; }
  .trainer-playhead-layer { position:absolute; inset:0; pointer-events:none; z-index:8; }
  /* Sight Trainer playhead: a soft translucent guide like a music-practice
     cursor. Keep notation fully readable underneath while preserving the
     existing frame-by-frame playhead movement in app.js. */
  .trainer-playhead {
    position:absolute;
    width:12px;
    min-height:28px;
    border-radius:1px;
    background:rgba(52, 166, 219, .20);
    border-left:1px solid rgba(33, 150, 205, .28);
    border-right:1px solid rgba(33, 150, 205, .10);
    box-shadow:none;
    opacity:1;
    transform:translateX(-50%);
    transition:left .055s linear,top .055s linear,height .055s linear;
  }
  .trainer-feedback { display:flex; gap:5px; flex-wrap:wrap; min-height:10px; }
  .trainer-feedback .tr-event { width:13px; height:7px; border-radius:999px; background:var(--line); }
  .trainer-feedback .tr-event.current { background:var(--marigold); box-shadow:0 0 0 3px rgba(18,160,175,.16); }
  .trainer-feedback .tr-event.hit { background:#31865b; }
  .trainer-feedback .tr-event.miss { background:#c65555; }
  .trainer-feedback .tr-event.uncertain { background:#d69b52; }
  .trainer-feedback .tr-event.unheard { background:#8c9a9b; }
  .tr-event { transition:opacity .15s,filter .15s; }
  .tr-event.current { filter:drop-shadow(0 0 5px rgba(18,160,175,.7)); }
  .tr-event.hit { fill:#31865b !important; color:#31865b; }
  .tr-event.miss { fill:#c65555 !important; color:#c65555; }
  .tr-event.uncertain { fill:#d69b52 !important; color:#d69b52; }
  .tr-event.unheard { fill:#8c9a9b !important; color:#8c9a9b; }
  .trainer-now { display:flex; align-items:baseline; gap:10px; padding:10px 14px; border-radius:10px; background:#eef5f4; }
  .trainer-now span { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
  .trainer-now strong { color:var(--ink); font-size:1.05rem; }
  .trainer-actions { display:flex; gap:9px; flex-wrap:wrap; }
  .trainer-record-btn { background:#a13f4d; border-color:#a13f4d; color:#fff; font-weight:700; }
  .trainer-record-btn:hover { background:#873541; border-color:#873541; }
  .trainer-meter { height:8px; border-radius:99px; overflow:hidden; background:var(--line); }
  .trainer-meter div { width:0; height:100%; background:var(--marigold); transition:width .1s linear; }
  .trainer-result { padding:12px 14px; border-radius:10px; background:#fff8df; color:var(--ink); font-weight:600; }
  /* FIX 5 — student-first Sight Trainer UI. */
  .trainer-head-actions { display:flex; align-items:center; gap:8px; }
  .trainer-settings-toggle { white-space:nowrap; }
  .trainer-modal:not(.settings-open) .trainer-layout { grid-template-columns:0 minmax(0,1fr); }
  .trainer-modal:not(.settings-open) .trainer-settings { padding-left:0; padding-right:0; border-right:0; opacity:0; visibility:hidden; pointer-events:none; overflow:hidden; }
  .trainer-settings { transition:opacity .16s ease; }
  .trainer-student-guide { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .trainer-student-guide span { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#eef5f4; color:var(--muted); font-size:.72rem; font-weight:650; }
  .trainer-student-guide span b { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#fff; color:var(--ink); font-size:.68rem; }
  .trainer-student-guide span.active { background:#fff2bf; color:var(--ink); box-shadow:inset 0 0 0 1px rgba(180,130,0,.18); }
  .trainer-student-guide span.done { background:#e6f3eb; color:#276c49; }
  .trainer-actions-primary { padding-top:2px; }
  .trainer-actions-secondary { padding-top:8px; border-top:1px solid var(--line); }
  .trainer-actions-secondary .btn { font-size:.78rem; }
  .trainer-try-again[hidden] { display:none !important; }
  @media (max-width:760px) {
    .trainer-modal { padding:0; }
    .trainer-shell { max-height:none; height:100vh; height:100dvh; border-radius:0; }
    .trainer-head { position:sticky; top:0; z-index:3; padding:10px 12px; flex-shrink:0; }
    .trainer-head h2 { font-size:1.12rem; }
    /* Settings become a DRAWER over the stage instead of a block above it.
       Previously the panel pushed the sheet music far below the fold, so a
       phone user had to scroll past every control to reach the score and
       scroll again to reach the practice buttons. The stage now always fills
       the shell, and the drawer simply covers it while it is open. */
    .trainer-layout { display:block; position:relative; min-height:0; overflow:hidden; }
    .trainer-settings {
      position:absolute; inset:0; z-index:6; border-right:0; border-bottom:0;
      display:grid; grid-template-columns:1fr 1fr; align-content:start;
      overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px; gap:10px;
    }
    .trainer-modal:not(.settings-open) .trainer-settings { display:none; }
    .trainer-settings-toggle { min-height:40px; }
    .trainer-head-actions { gap:6px; }
    .trainer-head-actions .btn { padding:8px 10px; }
    .trainer-student-guide { gap:5px; }
    .trainer-student-guide span { padding:5px 8px; font-size:.68rem; }
    .trainer-settings .trainer-range, .trainer-settings .trainer-note-values, .trainer-settings .trainer-options, .trainer-settings .trainer-help, .trainer-settings > button { grid-column:1 / -1; }
    .trainer-settings .ctrl { min-height:44px; font-size:16px; }
    /* height:100% (not min-height:70vh) is what stops the page from being
       taller than the phone screen. */
    .trainer-stage { padding:10px 12px; height:100%; overflow-y:auto; gap:9px; }
    .trainer-score { min-height:clamp(150px,30vh,300px); }
    .trainer-actions .btn { min-height:44px; flex:1 1 190px; }
    .trainer-now { position:sticky; bottom:0; z-index:2; box-shadow:0 -4px 14px rgba(9,43,47,.08); }
  }
  @media (max-width:430px) {
    .trainer-settings { grid-template-columns:1fr; }
    .trainer-settings > * { grid-column:1 !important; }
    .trainer-range, .trainer-options { grid-template-columns:1fr 1fr; }
    .trainer-actions .btn { flex-basis:100%; width:100%; }
    .trainer-score { min-height:clamp(140px,26vh,260px); }
  }
  /* ---- Short screens (small phones, landscape phones, small laptops) ----
     Everything except the music shrinks first, so the staff stays visible
     without scrolling. */
  @media (max-height:720px) {
    .trainer-head { padding:8px 12px; }
    .trainer-head h2 { font-size:1.02rem; margin:1px 0 0; }
    .trainer-head .tag { font-size:.6rem; }
    .trainer-stage { gap:7px; padding-top:8px; padding-bottom:8px; }
    .trainer-student-guide span { padding:4px 8px; font-size:.66rem; }
    .trainer-student-guide span b { width:16px; height:16px; font-size:.62rem; }
    .trainer-now { padding:6px 12px; }
    .trainer-now strong { font-size:.95rem; }
    .trainer-actions { gap:7px; }
    .trainer-actions .btn { min-height:40px; padding:8px 11px; }
    .trainer-actions-secondary { padding-top:6px; }
    .trainer-score { min-height:clamp(130px,26vh,260px); }
  }
  @media (max-height:560px) {
    /* Landscape phones: drop the non-essential rows entirely rather than
       making the student scroll past them to reach the staff. */
    .trainer-student-guide, .trainer-feedback { display:none; }
    .trainer-stage { gap:6px; }
    .trainer-score { min-height:clamp(120px,34vh,220px); }
    .trainer-actions-secondary .btn { font-size:.72rem; }
  }
  .home-main { flex: 1; min-width: 0; overflow-y: auto; }
  .home-search { padding: 18px 22px 4px; }
  .home-search { position: relative; max-width: 520px; }
  .home-search::before {
    content: "\1F50D"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: .82rem; opacity: .55; pointer-events: none;
  }
  .home-search input {
    width:100%; max-width:520px; font-family:inherit; font-size:.9rem;
    padding:11px 14px 11px 36px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  }
  .home-inner { padding: 14px 22px 60px; max-width: 1200px; width:100%; margin:0 auto; }
  @media (max-width: 760px) {
    .home.show { flex-direction: column; }
    .home-side {
      width: auto; flex-direction: row; align-items: center; padding: 10px 12px;
      overflow-x: auto; overflow-y: hidden; gap: 10px;
    }
    .home-side-brand { padding: 0; flex-shrink: 0; }
    .home-side-brand .side-title { display: none; }
    .home-side-nav { flex-direction: row; flex-shrink: 0; }
    .side-nav-item { white-space: nowrap; flex-shrink: 0; }
    .home-side-spacer { display: none; }
    .home-side-actions {
      flex-direction: row; border-top: none; margin-top: 0; padding-top: 0;
      padding-left: 10px; border-left: 1px solid var(--ink-soft);
    }
    .home-side-actions .btn { width: auto; white-space: nowrap; }
  }
  .home-h2 { font-family:"Fraunces",serif; font-weight:650; font-size:1.5rem; color:var(--ink); margin: 14px 0 4px; }
  .folder-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:14px; margin:14px 0 26px; }
  .folder-card {
    position: relative;
    display:flex; flex-direction:column; align-items:flex-start; gap:14px; text-align:left;
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px;
    cursor:pointer; font-family:inherit; transition: box-shadow .15s, transform .1s;
  }
  .folder-card:hover { box-shadow:0 8px 22px -14px rgba(9,43,47,.4); transform:translateY(-1px); }
  .folder-ic { width:46px; height:46px; flex-shrink:0; border-radius:11px; background:var(--ink); color:var(--marigold); display:flex; align-items:center; justify-content:center; font-size:1.35rem; }
  .folder-card .fmeta { display:flex; flex-direction:column; gap:3px; min-width:0; width:100%; }
  .folder-card .fname { min-width:0; font-weight:700; font-size:1.02rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .folder-card .fcount { font-size:.78rem; color:var(--muted); }
  .folder-card.all-songs { background: #e1f5ee; border-color: transparent; }
  .folder-card.all-songs .folder-ic { background:var(--marigold); color:var(--ink); }
  .folder-card .fcard-actions { position:absolute; top:14px; right:14px; display:flex; align-items:center; gap:2px; flex-shrink:0; }
  .folder-card .rename-folder {
    color:var(--muted); font-size:.9rem; padding:3px 6px; border-radius:6px;
    flex-shrink:0; opacity:.75;
  }
  .folder-card .rename-folder:hover { background:#e4eeed; color:var(--ink); opacity:1; }
  .folder-card .del-folder {
    color:var(--muted); font-size:1rem; padding:3px 6px; border-radius:6px;
    flex-shrink:0; opacity:.75;
  }
  .folder-card .del-folder:hover { background:#f3d6d0; color:#a5352a; opacity:1; }
  .crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:.9rem; margin:2px 0 4px; }
  .crumbs .crumb { color:var(--muted); cursor:pointer; }
  .crumbs .crumb:hover { color:var(--ink); text-decoration:underline; }
  .crumbs .crumb.here { color:var(--ink); font-weight:600; cursor:default; text-decoration:none; }
  .crumbs .sep { color:var(--line); }
  .song-table { width:100%; border-collapse:collapse; }
  .song-table tr { border-bottom:1px solid var(--line); cursor:pointer; }
  .song-table tr:hover { background:#eef5f4; }
  .song-table td { padding:12px 8px; font-size:.9rem; color:var(--ink); }
  .song-table td.meta { color:var(--muted); font-size:.8rem; white-space:nowrap; }
  .song-table td .move-song { color:var(--muted); cursor:pointer; padding:4px 6px; border-radius:6px; margin-right:2px; }
  .song-table td .move-song:hover { color:var(--ink); background:#e4eeed; }
  .song-table td .del-song { color:var(--muted); cursor:pointer; padding:4px 8px; border-radius:6px; }
  .song-table td .del-song:hover { color:#c0392b; background:#f6e3e2; }
  .home-back { cursor:pointer; }
  .admin-only { display:none; }
  body.is-admin .admin-only { display:inline-flex; }
  .teacher-only { display:none; }
  body.is-teacher .teacher-only, body.is-admin .teacher-only { display:inline-flex; }
  .practice-member-only { display:none; }
  body.is-teacher .practice-member-only, body.is-student .practice-member-only { display:flex; }
  .signedin-only { display:none; }
  body.is-signedin .signedin-only { display:inline-flex; }
  /* Student-facing only: shown when a student is signed in, hidden for
     teachers and admins (e.g. "My Homework", which is an assignment the
     student receives \u2014 not something a teacher/admin needs). */
  .student-only { display:none; }
  body.is-student .student-only { display:inline-flex; }
  .hw-only { display:none; }
  body.hw-mode .hw-only { display:inline-flex; }

  /* Player chrome hidden until a song is opened (prevents cursor bleed-through) */
  body:not(.playing) .topbar,
  body:not(.playing) .score-wrap,
  body:not(.playing) .instrument-view,
  body:not(.playing) .controls,
  body:not(.playing) .gearpanel,
  body:not(.playing) .gear-backdrop { display: none !important; }

  .notif-btn { position: relative; }
  .notif-badge {
    position: absolute; top: -6px; right: -6px;
    background: #d64545; color: #fff;
    border-radius: 999px; min-width: 18px; height: 18px; padding: 0 4px;
    font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--paper);
  }
  .notif-badge[hidden] { display: none; }
  .notif-item { cursor: pointer; }
  .notif-item:hover { filter: brightness(0.97); }
  .notif-item.unread { background: rgba(18, 160, 175, 0.08); border-left: 3px solid var(--marigold); }

  /* ---------- Score area ---------- */
  /* THE "GREEN PLAYHEAD BLEEDS OVER THE RESULTS CARD / SIDE PANEL" BUG:
     alphaTab draws its own position cursor (.at-cursor-beat) inside #alphaTab
     with a high z-index of its own. Because .score-wrap was position:relative
     but z-index:auto, it did NOT establish a stacking context, so that cursor
     competed directly in the ROOT stacking context against the results card
     (z-index 40), the settings drawer and, on narrow screens, the library
     side panel — and painted straight through them as a stray green line.
     `isolation: isolate` forces .score-wrap to be its own stacking context, so
     every descendant (cursor included) is confined below any sibling modal or
     panel, no matter what z-index alphaTab picks internally. */
  .score-wrap {
    position: relative; isolation: isolate; flex: 1 1 auto; min-height: 0;
    width: 100%; overflow: auto; overscroll-behavior: contain; background: #ffffff;
  }
  .score-wrap.song-switch-loading #alphaTab { opacity: .10; pointer-events: none; }
  .score-wrap.song-switch-loading::after {
    content: "Loading new score…"; position: sticky; left: 50%; top: 42%; transform: translate(-50%,-50%);
    z-index: 12; display: block; width: max-content; max-width: 80%; padding: 10px 14px;
    border-radius: 999px; background: rgba(255,255,255,.96); border: 1px solid var(--line);
    box-shadow: 0 6px 24px rgba(0,0,0,.10); color: var(--ink); font-size: .82rem; font-weight: 700;
    pointer-events: none;
  }
  /* Personalized deterrent for student sessions. It does not claim to block
     screenshots; it makes shared captures attributable without obstructing
     notation or intercepting touch/mouse input. */
  .score-watermark {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; margin: 0;
    z-index: 4; pointer-events: none; overflow: hidden;
    display: none;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    grid-auto-rows: minmax(120px, 1fr);
    align-items: center; justify-items: center;
  }
  .score-watermark.show { display: grid; }
  .score-watermark span {
    color: rgba(11, 50, 55, 0.075);
    font-size: 12px; font-weight: 600; letter-spacing: .03em;
    white-space: nowrap; transform: rotate(-24deg);
    user-select: none;
  }
  #alphaTab {
    position: relative;
    background: #ffffff;
    width: 100%; min-width: 0;
    max-width: 1150px;
    margin: 20px auto 56px;
    padding: 30px 36px 52px;
    border-radius: 0;        /* SoundSlice look: no page card */
    box-shadow: none;        /* blend the notation into a seamless white background */
  }
  @media (max-width: 760px), (max-height: 500px) {
    #alphaTab { margin: 0 auto 24px; border-radius: 0; padding: 12px 6px 28px; box-shadow: none; }
  }
  /* Keep the beat cursor visible in every transport mode. Older rules forced
     it to opacity:0 throughout Loop/Focus, count-in and Waiting Practice, so
     changing its colour or width could never make it appear. */
  .at-cursor-bar { background: transparent !important; }
  /* alphaTab documents that its native beat cursor needs an explicit width,
     but smooth native animation is not available on every target. Hide that
     cursor and use the app-owned line below so iPad/Android get the same clear
     full-system playhead as desktop. */
  .at-cursor-beat {
    opacity:0 !important; visibility:hidden !important; width:0 !important;
    box-shadow:none !important;
  }
  .main-playhead-layer {
    display:block !important; position:absolute !important; inset:0 !important;
    overflow:visible !important; pointer-events:none !important; z-index:20 !important;
  }
  .main-playhead {
    display:block !important; visibility:visible !important; position:absolute !important;
    left:0; top:0; width:5px !important; min-height:32px; border-radius:2.5px;
    background:#008fa0 !important; opacity:.86 !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.92),0 0 6px rgba(0,143,160,.55);
    pointer-events:none; will-change:transform,height; backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  /* Waiting Practice draws its own note-locked line. Hide the transport line
     in that mode so the previous playback position cannot appear beside it. */
  #scoreWrap.stepping .main-playhead-layer { display:none !important; }
  /* Result colours must settle without replaying a pop animation during an
     overlay redraw; otherwise the score appears to flicker beside the cursor. */
  .note-mark.pop { animation:none !important; }
  /* Live drag selection. At 10% opacity you could not tell you had selected
     anything, so dragging over bars looked like it had done nothing. */
  .at-selection div { background: rgba(18, 160, 175, 0.22); border-radius: 3px; }

  /* Settled selection: the whole bars the loop now covers. Drawn by the app
     over alphaTab's own canvas, one block per bar per system.
     THE "DOTS ON TOP OF THE RESULTS CARD" BUG: this and the other in-score
     overlay layers (note marks and difficulty dots) only need to sit above the
     plain notation underneath them -- they were set to z-index: 900+ with
     no ceiling in mind, which happens to be HIGHER than several of the
     app's own overlays: the results card (z-index 40) and the Tools/gear
     settings panel (z-index 24-25) in particular. Since #scoreWrap doesn't
     establish its own stacking context, that 900 competes directly against
     those panels' z-index in the same (root) stacking context and wins --
     so the marks painted straight through the results card and the
     settings drawer. Keeping this whole group under 20 puts it safely
     below every modal/panel in the app (the lowest of which starts at 24)
     while still being above the bare notation (z-index: auto) it's meant
     to sit on. */
  .barsel-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; }

  /* TAB rhythm heads for whole and half notes -- see drawTabRhythmHeads() in
     app.js for why they exist. The fill is solid white (the colour of the
     notation page behind them) so the stem alphaTab already drew stops
     cleanly AT the head instead of running through the middle of it, which
     is what makes it read as one note rather than a stem crossing a ring.
     Same z-index band as the other in-score overlays: above the notation,
     below every panel. */
  .tab-rhythm-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; }
  .tab-rhythm-head {
    position: absolute;
    box-sizing: border-box;
    background: #ffffff;
    border-style: solid;
    border-color: #111111;
    border-radius: 50%;
    /* The engraved tilt of a real notehead; also stops the shape reading as
       a plain circle next to alphaTab's own round dots. */
    transform: rotate(-20deg);
  }
  .barsel-block {
    position: absolute;
    background: rgba(18, 160, 175, 0.15);
    border: 1.5px solid var(--marigold);
    border-radius: 4px;
    box-sizing: border-box;
    animation: barselIn 0.22s ease-out;
  }
  .barsel-block.first { border-left-width: 4px; }
  .barsel-block.last  { border-right-width: 4px; }
  .step-beat-hi {
    position: absolute; box-sizing: border-box;
    /* THE "BLUE PLAYHEAD BLOCKING THE NOTE" BUG: this used to be a solid,
       fully opaque #1f6fe0 line plus a 6px blur glow -- and because it's
       centred horizontally right on top of the note head(s) it's
       highlighting, the opaque line + glow visually buried the very note
       it was meant to point at. Translucent (using the same teal the app
       already uses for loop/focus selection, just stronger) lets the note
       read straight through it; dropping the glow keeps the highlight
       exactly as wide as it's drawn instead of blurring several extra
       pixels into neighbouring notes. */
    background: rgba(18, 160, 175, 0.38);
    border-radius: 2px;
    animation: barselIn 0.12s ease-out;
  }
  .note-mark {
    position: absolute; box-sizing: border-box;
    border-radius: 50%;
    background: transparent;
  }
  .note-mark.pop { animation: markPop 0.18s ease-out; }
  @keyframes markPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  @keyframes barselIn { from { opacity: 0; } to { opacity: 1; } }

  /* "You selected these bars — focus them?" — the choice stays with the user. */
  .focus-ask {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(8px);
    display: none; align-items: center; gap: 10px;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--marigold);
    border-radius: 10px; padding: 9px 12px;
    font-size: 0.8rem; box-shadow: 0 10px 26px -12px rgba(0,0,0,0.55);
    z-index: 10; opacity: 0; transition: opacity .18s ease, transform .18s ease;
  }
  .focus-ask.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
  .focus-ask .fa-text { white-space: nowrap; }
  .focus-ask .fa-btn {
    border: 1px solid var(--marigold); background: var(--marigold); color: var(--ink);
    border-radius: 7px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer;
  }
  .focus-ask .fa-btn.ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.35); }
  .focus-ask .fa-btn:hover { filter: brightness(1.08); }
  @media (max-width: 620px) {
    .focus-ask { font-size: 0.74rem; padding: 8px 10px; gap: 7px; }
    .focus-ask .fa-btn { padding: 5px 9px; }
  }

  /* Focus mode: a warm tint on the score, and a toolbar to resize the
     focused range with steppers (like a range selector).
     This used to be `position: absolute; bottom: 18px` relative to
     #scoreWrap. Focus only renders the selected bars, so the notation
     itself can be a single short line while #scoreWrap stays the full
     height of the score area (it's the scrollable viewport, not sized to
     content). The toolbar ended up pinned to the bottom of that tall,
     mostly-empty tinted area — visually stranded well below (or "floating
     in the middle of") the actual notes, which is exactly what made it
     confusing to read. Moving it into normal flow right after #alphaTab
     (see the HTML) and making it sticky keeps it directly under the
     notation for short sections, while still tracking the bottom of the
     viewport for longer focused ranges that need to scroll. */
  .score-wrap.focused { background: #fbeadb; }
  .focus-bar {
    position: sticky; bottom: 18px;
    display: flex; align-items: center; gap: 10px;
    width: fit-content; margin: 14px auto 0;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--marigold);
    border-radius: 10px; padding: 8px 12px;
    font-size: 0.8rem; box-shadow: 0 10px 26px -12px rgba(0,0,0,0.55);
    z-index: 10;   /* same reasoning as .barsel-layer above: stay under every modal/panel */
  }
  .focus-bar[hidden] { display: none; }
  .focus-bar .fb-label { white-space: nowrap; font-weight: 600; }
  .focus-bar .fb-to { opacity: 0.8; }
  .focus-bar .fb-stepper { display: inline-flex; align-items: center; gap: 6px; }
  .focus-bar .fb-num {
    min-width: 1.4em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .focus-bar .fb-step {
    width: 26px; height: 26px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--marigold); background: var(--marigold); color: var(--ink);
    border-radius: 7px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  }
  .focus-bar .fb-step:disabled { opacity: 0.4; cursor: default; }
  .focus-bar .fb-step:not(:disabled):hover { filter: brightness(1.08); }
  .focus-bar .fb-close {
    margin-left: 4px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--paper);
    border-radius: 7px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer;
  }
  .focus-bar .fb-close:hover { filter: brightness(1.12); }
  @media (max-width: 620px) {
    .focus-bar { font-size: 0.74rem; gap: 7px; padding: 7px 9px; bottom: 12px; }
    .focus-bar .fb-step { width: 24px; height: 24px; }
  }
  .yt-panel {
    position: absolute; right: 18px; bottom: 18px; z-index: 10;
    background: var(--ink); border: 1px solid var(--marigold); border-radius: 10px;
    box-shadow: 0 10px 26px -12px rgba(0,0,0,0.55); overflow: hidden;
    width: 220px;
  }
  .yt-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 8px; font-size: 0.72rem; color: var(--paper); font-weight: 600;
  }
  .yt-panel-head button {
    border: none; background: transparent; color: var(--paper); opacity: .8;
    cursor: pointer; font-size: .85rem; line-height: 1; padding: 2px 4px;
  }
  .yt-panel-head button:hover { opacity: 1; }
  .yt-panel-body { width: 220px; height: 124px; }
  .yt-panel.collapsed .yt-panel-body { display: none; }
  @media (max-width: 620px) {
    .yt-panel { width: 160px; right: 10px; bottom: 12px; }
    .yt-panel-body { width: 160px; height: 90px; }
  }
  .at-highlight * { fill: var(--marigold-deep); stroke: var(--marigold-deep); }

  .loading {
    position: absolute; inset: 0; background: var(--paper);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    z-index: 5; transition: opacity 0.35s ease;
  }
  .loading.hidden { opacity: 0; pointer-events: none; }
  .loading .note-mark {
    font-family: "Fraunces", serif; font-size: 2rem; color: var(--marigold);
    animation: bob 1.1s ease-in-out infinite;
  }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .loading p { color: var(--muted); font-size: 0.85rem; }

  .toast {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--paper);
    border-left: 3px solid #d9534f; border-radius: 8px;
    padding: 10px 16px; font-size: 0.8rem; max-width: 90%;
    z-index: 6; display: none;
    box-shadow: 0 8px 24px rgba(9, 43, 47,0.3);
  }

  /* ---------- Live instrument view ---------- */
  .instrument-view {
    flex-shrink: 0;
    background: #092b2f;
    border-top: 1px solid var(--ink-soft);
    display: none;
    padding: 10px 14px 12px;
    overflow-x: auto;
  }
  .instrument-view.show { display: block; }

  /* Piano */
  .piano {
    position: relative;
    height: 96px;
    min-width: 1050px;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
  }
  .pkey-w {
    flex: 1;
    background: #fdfcf6;
    border: 1px solid #b9b4a4;
    border-radius: 0 0 4px 4px;
    position: relative;
  }
  .pkey-w.on { background: var(--marigold); }
  .pkey-w .klabel {
    position: absolute; bottom: 3px; left: 0; right: 0;
    text-align: center; font-size: 8px; color: #9a957f; font-weight: 600;
  }
  .pkey-w.on .klabel { color: var(--ink); }
  .pkey-b {
    position: absolute; top: 0; height: 58%;
    background: #23283f;
    border: 1px solid #0d1020;
    border-radius: 0 0 3px 3px;
    z-index: 2;
  }
  .pkey-b.on { background: var(--marigold-deep); }

  /* Fretboard */
  .fretboard-holder { min-width: 760px; max-width: 1100px; margin: 0 auto; }
  .fretboard-holder svg { width: 100%; height: auto; display: block; }

  .pkey-w.flash-good { background: #43b96f !important; }
  .pkey-b.flash-good { background: #2e8b57 !important; }
  .pkey-w.flash-bad, .pkey-b.flash-bad { background: #d9534f !important; }

  .results-backdrop {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(9, 43, 47, 0.55);
    display: none; align-items: center; justify-content: center;
  }
  .results-backdrop.show { display: flex; }
  .results-card {
    background: var(--paper);
    border-radius: 14px;
    border-top: 4px solid var(--marigold);
    padding: 26px 30px 22px;
    width: min(360px, 90vw);
    text-align: center;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  }
  .results-card .tag {
    font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--marigold-deep);
  }
  .results-card .stars { font-size: 1.6rem; color: var(--marigold); margin: 10px 0 2px; letter-spacing: 4px; }
  .results-card .res-pct { font-family: "Fraunces", serif; font-size: 2.6rem; font-weight: 650; color: var(--ink); }
  .results-card .res-detail { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
  .results-card .res-grade { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: 10px 0 16px; }
  .res-mist {
    list-style: none;
    text-align: left;
    max-height: 180px;
    overflow-y: auto;
    margin: 10px 0 4px;
    padding: 0 4px;
    border-top: 1px solid var(--line);
  }
  .res-mist:empty { display: none; border: none; margin: 0; }
  .res-mist li {
    font-size: 0.78rem;
    color: var(--ink);
    padding: 6px 2px;
    border-bottom: 1px solid var(--line);
  }
  .res-mist li b { font-weight: 600; }
  .res-mist li .m-wrong { color: #d9534f; font-weight: 600; }
  .res-mist li .m-time { color: #e07b1f; font-weight: 600; }
  .res-hist { list-style:none; text-align:left; margin:6px 0 10px; padding:0 4px; }
  .res-hist:empty { display:none; }
  .res-hist li { font-size:.75rem; color:var(--muted); padding:3px 2px; display:flex; justify-content:space-between; }
  .res-hist li b { color:var(--ink); font-weight:600; }
  .res-hist .hist-head { font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:4px; margin-bottom:2px; }
  .res-actions { display: flex; gap: 10px; justify-content: center; }
  .res-actions .res-close { background: #fff; color: var(--ink); border-color: var(--line); }
  .res-actions .res-close:hover { background: #eef5f4; }

  .sym-card { text-align: left; width: min(430px, 92vw); max-height: 84vh; overflow-y: auto; }
  .sym-card .tag { display: block; text-align: center; }
  .sym-title { font-family: "Fraunces", serif; font-weight: 650; font-size: 1.2rem; color: var(--ink); text-align: center; margin: 8px 0 12px; }
  .sym-list { list-style: none; margin: 0 0 12px; }
  .sym-list li { display: flex; gap: 12px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--line); }
  .sym-list li:last-child { border-bottom: none; }
  .sym-glyph {
    font-family: "Fraunces", serif; font-style: italic; font-weight: 650;
    color: var(--marigold-deep); min-width: 46px; text-align: center; font-size: 1.05rem;
    flex-shrink: 0;
  }
  .sym-text { font-size: 0.83rem; color: var(--ink); }
  .sym-text b { font-weight: 600; }
  .sym-note { font-size: 0.72rem; color: var(--muted); text-align: center; margin-bottom: 14px; }

  /* ---------- Control bar ---------- */
  .controls {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--ink);
    border-top: 3px solid var(--marigold);
    flex-shrink: 0;
  }
  #playPause { min-width: 92px; font-size: 0.85rem; }
  .loopsec { display: inline-flex; align-items: center; gap: 4px; }
  .loopsec .lsbtn { padding: 9px 10px; min-width: 34px; }
  .loopsec .lsinfo {
    color: #a8cdd1; font-size: .74rem; font-weight: 600;
    min-width: 74px; text-align: center; font-variant-numeric: tabular-nums;
  }
  .loopsec .lssel { padding: 8px 6px; font-size: 0.72rem; max-width: 150px; }
  .loopsec .lssel:disabled { opacity: 0.45; cursor: default; }
  select.ctrl {
    font-family: inherit; font-size: 0.78rem; font-weight: 600;
    border: 1px solid var(--ink-soft); background: var(--ink-soft); color: var(--paper);
    border-radius: 8px; padding: 9px 8px; cursor: pointer; max-width: 150px;
  }
  select.ctrl:focus-visible { outline: 2px solid var(--marigold); outline-offset: 2px; }
  .ctrl-label {
    color: #a8cdd1; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: flex; flex-direction: column; gap: 3px;
  }
  .speed-group {
    display: flex; align-items: center; gap: 8px;
    color: var(--paper); font-size: 0.78rem; margin-left: auto; flex-wrap: wrap;
  }
  .speed-group label { color: #a8cdd1; font-weight: 500; }
  .tempo-group { display: inline-flex; align-items: center; gap: 4px; }
  .tempo-group .tbtn {
    padding: 8px 12px; min-width: 36px; font-size: 1.05rem; line-height: 1;
    font-weight: 700;
  }
  #tempoInput {
    width: 62px; text-align: center; font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: 0.95rem; padding: 7px 4px;
    border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.06); color: var(--paper);
    -moz-appearance: textfield; appearance: textfield;
  }
  #tempoInput::-webkit-outer-spin-button,
  #tempoInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  #tempoInput:focus-visible { outline: 2px solid var(--marigold); outline-offset: 1px; }
  #tempoUnit { color: #a8cdd1; font-weight: 500; font-size: 0.72rem; }
  #bpmVal { color: var(--marigold); font-weight: 600; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
  #timePos { color: #a8cdd1; font-size: 0.78rem; font-variant-numeric: tabular-nums; min-width: 86px; text-align: right; }

  @media (max-width: 720px), (max-height: 500px) {
    .speed-group { margin-left: 0; }
    #timePos { text-align: left; }
    .logo-mark {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--marigold);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: "Fraunces", serif; font-size: 1.25rem; font-weight: 650;
    box-shadow: 0 0 0 2px rgba(232,160,32,0.35);
  }
  .sound-chip { display: none; }
  .topbar .logo-mark { display: none; }
  .topbar .nav-song { padding: 6px 10px; min-width: 36px; }

  /* The top bar and footer control bar hold a LOT of buttons — on a phone
     they were wrapping onto 2-4 rows each, and every wrapped row ate into
     the fixed page height, squeezing the actual sheet music down to a
     sliver. Keep each bar to one compact row and let it scroll sideways
     instead — every control stays reachable (nothing removed), it's just
     a swipe away, and the score gets essentially the whole remaining
     screen height. */
  .topbar, .controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar, .controls::-webkit-scrollbar { display: none; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .controls { padding: 8px 10px; gap: 6px; }
  .topbar > *, .controls > * { flex-shrink: 0; }
  .speed-group { flex-wrap: nowrap; }
  /* the brand title can still truncate/shrink — everything else in the bar
     (nav buttons, symbols/tools) keeps its full width so it stays tappable
     once scrolled to */
  .topbar .brand { flex-shrink: 1; min-width: 90px; }
  }

  /* A phone in landscape has little vertical room. Keep the score as the
     flexible centre panel; compact only the surrounding chrome and let the
     score renderer use the full available width after rotation. */
  @media (orientation: landscape) and (max-height: 600px) {
    .topbar { min-height: 46px; padding: 5px 10px; gap: 6px; }
    .topbar .tag, .topbar .header-quote, .topbar .sound-chip { display: none; }
    .topbar h1 { font-size: 0.9rem; }
    .topbar .btn { padding: 6px 9px; }
    .score-wrap { min-height: 0; }
    #alphaTab { margin: 0 auto 12px; padding: 6px 4px 16px; }
    .instrument-view { padding: 4px 8px 6px; }
    .piano { height: 58px; }
    .controls { min-height: 48px; padding: 5px 8px; gap: 5px; }
    .controls .btn { padding: 6px 9px; }
    .loopsec .lsbtn { padding: 6px 8px; min-width: 30px; }
    .tempo-group .tbtn { padding: 5px 8px; min-width: 30px; }
    #tempoInput { width: 52px; padding: 5px 3px; }
    .focus-bar { bottom: 8px; margin-top: 6px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .loading .note-mark { animation: none; }
    .library, .backdrop { transition: none; }
  }
  /* ===================== Audio sync editor ===================== */
  .syncmodal {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(9, 43, 47, 0.55);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
  }
  .syncmodal.show { display: flex; }

  /* Homework recorder: deliberately NOT a modal. A student has to read the
     notation and follow the timing while recording, so this docks into the
     bottom-right corner with no backdrop, leaving the score fully visible
     and still playable underneath. */
  .dockpanel {
    position: fixed; right: 14px; bottom: 104px; z-index: 3500;
    display: none; width: min(340px, calc(100vw - 28px));
  }
  .dockpanel.show { display: block; }
  .dockpanel .syncbox {
    width: 100%; max-height: 52vh;
    box-shadow: 0 18px 46px -12px rgba(0,0,0,0.55);
    border: 1px solid rgba(9,43,47,0.18);
  }
  .dockpanel .synchead { padding: 10px 12px; gap: 8px; }
  .dockpanel .syncbody { padding: 12px; }
  .dockpanel .synchint { font-size: 12px; line-height: 1.45; }
  /* Minimized: collapse to just the title bar so the notation shows through.
     This is purely visual — it does NOT stop an in-progress recording, unlike
     the ✕ close button. The bar stays tap-to-expand. */
  .dockpanel.min .syncbody { display: none; }
  .dockpanel.min .syncbox { max-height: none; }
  .dockpanel.min .synchead { cursor: pointer; }
  .dockpanel.min { width: min(260px, calc(100vw - 28px)); }
  /* Acoustic piano/guitar assessment uses the same non-blocking dock. During count-in and
     recording it collapses to a Stop control; the full score remains readable
     and the page never receives a dark modal backdrop. */
  /* "Which line will you read?" — asked once, before a guitar student's first
     recorded take on a part that is printed as notation AND TAB. Full-width
     stacked choices because each one needs a sentence of explanation; a plain
     dropdown could not carry that. */
  .reading-view-choices { display: flex; flex-direction: column; gap: 8px; }
  .reading-view-choice {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: var(--paper); color: var(--ink);
    border: 1px solid rgba(9, 43, 47, 0.22); border-radius: 10px;
    padding: 10px 12px; font: inherit;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
  }
  .reading-view-choice b { display: block; font-size: 0.95rem; margin-bottom: 3px; }
  .reading-view-choice span { display: block; font-size: 0.78rem; line-height: 1.4; opacity: .78; }
  .reading-view-choice:hover, .reading-view-choice:focus-visible {
    border-color: var(--marigold); background: rgba(18, 160, 175, 0.08);
  }
  .reading-view-choice:active { transform: translateY(1px); }
  .reading-view-remember {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; font-size: 0.8rem; cursor: pointer;
  }

  .guitar-analysis-panel { width: min(320px, calc(100vw - 28px)); }
  .guitar-analysis-panel .syncbody { gap: 7px; padding: 9px 11px; }
  .guitar-analysis-panel.min #guitarAnalysisDone { display: none; }
  .guitar-analysis-panel.min .syncfoot { border-top: 0; padding: 8px 12px 12px; }
  .guitar-analysis-panel.min .synchead { padding: 8px 12px; font-size: .88rem; }
  .guitar-analysis-panel.min .synchint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 700px) {
    .dockpanel { right: 8px; left: 8px; width: auto; bottom: 96px; }
    /* When minimized on a narrow screen, shrink back to a corner pill instead
       of the full-width bar so it truly gets out of the way of the score. */
    .dockpanel.min { left: auto; right: 8px; width: min(220px, calc(100vw - 16px)); }
  }
  .syncbox {
    background: var(--paper, #fff); color: var(--ink, #14302f);
    width: min(1100px, 96vw); max-height: 92vh; overflow: auto;
    border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .synchead {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--line, #dfe7e6);
    font-size: 1.05rem;
  }
  .syncbody { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
  .syncrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .syncrow label { display: flex; flex-direction: column; font-size: .74rem; gap: 3px; color: var(--muted, #5a6d6c); }
  .synchint, .synchelp { font-size: .78rem; color: var(--muted, #5a6d6c); }
  .tch-list { display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto; }
  .tch-row {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:.82rem;
  }
  .tch-row b { color: var(--ink); }
  .tch-row .tch-sub { color: var(--muted, #5a6d6c); font-size:.76rem; }
  .tch-row .btn { margin-left:auto; }
  .tch-stats { display:flex; flex-wrap:wrap; gap:10px; }
  .tch-stat { border:1px solid var(--line); border-radius:8px; padding:8px 12px; min-width:110px; }
  .tch-stat .n { font-size:1.25rem; font-weight:700; color:var(--ink); }
  .tch-stat .l { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted, #5a6d6c); }
  .tch-bar-bad { color:#d9534f; font-weight:600; }
  .tch-alert-list { display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
  .tch-alert { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; border:1px solid #e6b8b4; border-left:4px solid #c65555; background:#fff4f2; color:var(--ink); border-radius:8px; padding:9px 11px; text-align:left; font:inherit; cursor:pointer; }
  .tch-alert.warn { border-color:#ead69e; border-left-color:#d69b52; background:#fff9e8; }
  .tch-alert small { color:var(--muted); }
  .tch-alert-ok { border:1px solid #b8dbc8; background:#f1faf5; color:#276b4a; border-radius:8px; padding:9px 11px; font-size:.78rem; }
  .tch-goal-editor { display:flex; align-items:flex-end; flex-wrap:wrap; gap:9px; border:1px solid var(--line); border-radius:9px; background:#f5f9f8; padding:10px; margin:8px 0; }
  .tch-goal-editor > strong { flex-basis:100%; color:var(--ink); }
  .tch-goal-editor label { display:flex; flex-direction:column; gap:4px; font-size:.7rem; color:var(--muted); }
  .tch-goal-editor .ctrl { width:115px; }
  .tch-goal-card { border:1px solid var(--line); border-radius:9px; padding:11px 12px; background:#fff; }
  .tch-goal-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
  .tch-goal-track { height:9px; border-radius:999px; background:#dfeae8; overflow:hidden; margin:9px 0 6px; }
  .tch-goal-fill { height:100%; background:#31865b; border-radius:inherit; }
  .tch-goal-fill.behind { background:#d69b52; }
  .tch-inactive { margin-top:8px; border-radius:7px; padding:7px 9px; background:#fff1ef; color:#9d3f3f; font-size:.78rem; font-weight:650; }
  @media (max-width:620px) { .tch-goal-editor .ctrl { width:100%; } .tch-goal-editor label { flex:1 1 105px; } }
  .synchelp { padding-top: 6px; line-height: 1.5; }
  .synctoolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .syncspacer { flex: 1; }
  .synctime { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--muted, #5a6d6c); }
  .wavescroll {
    position: relative; overflow-x: auto; overflow-y: hidden;
    background: #f4f8f7; border: 1px solid var(--line, #dfe7e6); border-radius: 8px;
    user-select: none;
  }
  .waveinner { position: relative; height: 150px; }
  #waveCanvas { display: block; height: 150px; }
  .playhead {
    position: absolute; top: 0; bottom: 0; width: 2px; left: 0;
    background: #12a0af; pointer-events: none; z-index: 5;
  }
  .sp-layer { position: absolute; inset: 0; z-index: 6; }
  .sp-marker {
    position: absolute; top: 0; bottom: 0; width: 0; z-index: 6;
    border-left: 2px solid var(--marigold-deep, #d98c1f);
    cursor: ew-resize;
  }
  .sp-marker::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 12px;
  }
  .sp-flag {
    position: absolute; top: 2px; left: 0; transform: translateX(-50%);
    background: var(--marigold-deep, #d98c1f); color: #fff;
    font-size: .66rem; font-weight: 700; line-height: 1;
    padding: 3px 5px; border-radius: 4px; white-space: nowrap;
    cursor: grab;
  }
  .sp-marker.first .sp-flag { background: #2e9e57; }
  .sp-marker.last .sp-flag { background: #1f6fe0; }
  .syncfoot {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-top: 1px solid var(--line, #dfe7e6);
  }
  .syncstatus { flex: 1; font-size: .8rem; color: var(--muted, #5a6d6c); }
  body:not(.is-admin) .admin-only { display: none !important; }
  body:not(.is-teacher):not(.is-admin) .teacher-only { display: none !important; }
  body:not(.is-signedin) .signedin-only { display: none !important; }
  body:not(.is-student) .student-only { display: none !important; }
  body:not(.is-teacher):not(.is-student) .practice-member-only { display: none !important; }
  body:not(.hw-mode) .hw-only { display: none !important; }

  .default-part-setting {
    align-items:flex-start; gap:9px; padding:10px; border:1px solid var(--line);
    border-radius:9px; background:#f6faf9; cursor:pointer;
  }
  .default-part-setting input { margin-top:3px; accent-color:var(--marigold-deep); }
  .default-part-setting span { display:flex; flex-direction:column; gap:2px; }
  .default-part-setting strong { color:var(--ink); font-size:.78rem; }
  .default-part-setting small { color:var(--muted); font-size:.69rem; line-height:1.35; }
  body.is-admin .website-parts-panel {
    display:flex; flex-direction:column; align-items:stretch; gap:6px; width:100%;
    padding:11px; border:1px solid var(--line); border-radius:9px; background:#f6faf9;
  }
  .website-parts-panel > strong { color:var(--ink); font-size:.84rem; }
  .website-parts-panel > p { margin:0; color:var(--muted); font-size:.7rem; line-height:1.4; }
  .website-part-choices { display:flex; flex-direction:column; gap:5px; margin-top:3px; }
  .website-part-choice {
    display:flex; align-items:flex-start; gap:8px; padding:7px 8px; border:1px solid var(--line);
    border-radius:7px; background:white; color:var(--ink); font-size:.74rem; cursor:pointer;
  }
  .website-part-choice input { margin-top:2px; accent-color:var(--marigold-deep); }
  .website-part-choice span { min-width:0; line-height:1.35; }
  .website-part-choice span small { display:block; color:var(--muted); font-size:.65rem; margin-top:2px; }
  .website-publication-fields {
    display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:5px; padding-top:8px;
    border-top:1px solid var(--line);
  }
  .website-publication-fields label { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .website-publication-fields label:first-child { grid-column:1/-1; }
  .website-publication-fields span { color:var(--muted); font-size:.66rem; font-weight:650; }
  .website-publication-fields input,
  .website-publication-fields select {
    width:100%; min-width:0; border:1px solid var(--line); border-radius:7px; background:white;
    color:var(--ink); padding:7px 8px; font:inherit; font-size:.72rem;
  }
  .website-rights-confirm {
    display:flex; flex-direction:row!important; align-items:flex-start; gap:8px; margin-top:5px;
    padding-top:8px; border-top:1px solid var(--line); color:var(--ink); font-size:.7rem; line-height:1.4;
  }
  .website-rights-confirm input { width:auto!important; margin-top:2px; accent-color:var(--marigold-deep); }
  .website-readiness { color:var(--muted); line-height:1.35; }
  .website-readiness.ready { color:#247247; font-weight:650; }
  .website-preparation-result {
    display:flex; flex-direction:column; gap:6px; margin-top:5px; padding:10px;
    border:1px solid #a7d8ba; border-radius:8px; background:#edf9f1; color:#1d603c;
  }
  .website-preparation-result[hidden] { display:none !important; }
  .website-preparation-result.error { border-color:#e4aaaa; background:#fff1f1; color:#8a2929; }
  .website-preparation-result.working { border-color:#e3c587; background:#fff8e8; color:#75551a; }
  .website-preparation-result > strong { font-size:.78rem; }
  .website-preparation-result > p { margin:0; font-size:.7rem; line-height:1.4; }
  .website-preparation-result > ul { margin:0; padding-left:18px; font-size:.7rem; line-height:1.45; }
  .website-preparation-result > small { color:inherit; line-height:1.4; }
  .website-source-download { align-self:flex-start; margin-top:2px; font-size:.7rem; text-decoration:none; }
  .website-source-download[hidden] { display:none !important; }
  .website-publish-button { width:100%; margin-top:3px; }
  .website-publish-button[hidden] { display:none !important; }
  .website-preparation-result a { color:inherit; font-weight:700; }
  @media (max-width:520px) { .website-publication-fields { grid-template-columns:1fr; } .website-publication-fields label:first-child { grid-column:auto; } }
  .access-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
  .access-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--line, #dfe7e6); border-radius: 8px; background: #fafcfb;
  }
  .access-row input[type=checkbox] { width: 18px; height: 18px; }
  .access-row .af-name { flex: 1; font-weight: 600; }
  .access-row .af-count { font-size: .75rem; color: var(--muted, #5a6d6c); }

  /* Respect the OS "reduce motion" setting: users prone to motion sickness or
     with vestibular disorders get a calmer experience. We drop UI transitions
     and animations (drawers, fades, spinners) to near-instant. The score
     cursor/scroll is driven by JS during playback and is essential to the
     product, so it's intentionally left alone. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
.practice-chord-name {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  background: rgba(40, 190, 255, .16);
  border: 1px solid rgba(40, 190, 255, .48);
  color: #dff7ff;
  font-weight: 750;
  white-space: nowrap;
}
.practice-chord-name[hidden] { display: none; }
.guitar-analysis-scores { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0; }
.guitar-analysis-scores[hidden] { display:none !important; }
.guitar-analysis-btn[hidden] { display:none; }
.guitar-analysis-scores>div { background:var(--panel,#f4f7f8);border:1px solid var(--line);border-radius:10px;padding:12px 8px;text-align:center; }
.guitar-analysis-scores b { display:block;font-size:1.45rem;color:var(--cyan,#189dcc); }
.guitar-analysis-scores span { font-size:.7rem;color:var(--muted); }
@media(max-width:600px){.guitar-analysis-scores{grid-template-columns:repeat(2,1fr)}}
.guitar-analysis-summary{display:flex;align-items:center;margin:6px 0}
.guitar-analysis-summary[hidden]{display:none!important}
.guitar-analysis-summary>div{display:flex;align-items:baseline;gap:8px}
.guitar-analysis-summary b{font-size:1.8rem;line-height:1;color:var(--cyan,#189dcc)}
.guitar-analysis-summary span{font-size:.72rem;color:var(--muted)}
.guitar-analysis-summary>[hidden]{display:none!important}

/* ===================== Learn Song assistant ===================== */
.learn-song-btn { white-space: nowrap; }
.learn-song-panel { width: min(430px, calc(100vw - 28px)); bottom: 104px; }
.learn-song-panel .syncbox { max-height: min(72vh, 720px); }
.learn-song-panel.min .syncbody { display: none; }
.learn-song-panel.min .syncbox { max-height: none; }
.learn-song-panel.min { width: min(285px, calc(100vw - 28px)); }
.learn-head-actions { display: flex; gap: 6px; }
.learn-song-body { gap: 12px; }
.learn-progress-card,
.learn-range-card,
.learn-insight-card,
.learn-problems {
  border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 11px 12px;
}
.learn-progress-head,.learn-section-title { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.learn-progress-head span,.learn-section-title span { color:var(--muted);font-size:.7rem; }
.learn-progress-track { height:8px;border-radius:999px;background:#dfeae8;overflow:hidden;margin-top:8px; }
#learnProgressFill { width:0;height:100%;border-radius:inherit;background:var(--marigold-deep);transition:width .2s ease; }
.learn-next-card { border:1px solid rgba(18,160,175,.32);border-radius:12px;background:#eef9fa;padding:12px; }
.learn-next-card .learn-eyebrow { display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;font-weight:700;color:var(--marigold-deep);margin-bottom:3px; }
.learn-next-card strong { display:block;font-size:.9rem;margin-bottom:4px; }
.learn-next-card p { font-size:.76rem;line-height:1.45;color:var(--muted);margin:0 0 9px; }
.learn-next-card .btn { width:100%; }
.learn-sections { display:flex;gap:6px;overflow-x:auto;padding:7px 1px 2px;scrollbar-width:thin; }
.learn-section-chip { flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:7px 10px;font:600 .72rem Inter,system-ui,sans-serif;cursor:pointer; }
.learn-section-chip.active { border-color:var(--marigold-deep);box-shadow:0 0 0 1px var(--marigold-deep) inset;background:#eef9fa; }
.learn-section-chip.mastered::after { content:" ✓";color:#31865b;font-weight:800; }
.learn-range-nav { display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:9px 0; }
.learn-range-nav>div { text-align:center;min-width:0; }
.learn-range-nav strong { display:block;font-size:.88rem; }
.learn-range-nav small { display:block;color:var(--muted);font-size:.68rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.learn-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
.learn-actions .btn { min-width:0;padding:8px 7px; }

.learn-insight-card { background:#f7fbfb; }
.learn-insight-card p { font-size:.76rem;line-height:1.5;color:var(--muted);margin-top:7px; }
.learn-insight-list { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
.learn-insight-pill { border:1px solid var(--line);border-radius:999px;background:#fff;padding:5px 8px;font-size:.7rem;font-weight:600; }
.learn-text-btn { border:0;background:none;color:var(--marigold-deep);font:600 .7rem Inter,system-ui,sans-serif;cursor:pointer; }
.learn-problem-row { display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:8px 0;font-size:.74rem; }
.learn-problem-row:first-child { border-top:0; }
.learn-problem-row b { min-width:48px; }
.learn-problem-row span { flex:1;color:var(--muted); }
.learn-problem-row .btn { padding:6px 8px;font-size:.68rem; }
.learn-legend { display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:.64rem; }
.learn-legend span { display:inline-flex;align-items:center;gap:4px; }
.learn-legend i { width:9px;height:9px;border-radius:50%;display:inline-block; }
.learn-diff-dot { border-radius:50%;display:inline-block; }
.learn-legend i.easy,.learn-diff-dot.easy { background:#5aa678; }
.learn-legend i.medium,.learn-diff-dot.medium { background:#d69b52; }
.learn-legend i.hard,.learn-diff-dot.hard { background:#cf6b6b; }
.learn-legend i.problem,.learn-diff-dot.problem { background:#fff;border:2px solid #cf6b6b; }
.learn-map-layer { position:absolute;inset:0;pointer-events:none;z-index:11; }
.learn-diff-dot { position:absolute;width:6px;height:6px;box-shadow:0 0 0 1px rgba(255,255,255,.94);opacity:.78; }
.learn-diff-dot.problem { width:8px;height:8px;margin:-1px 0 0 -1px;box-shadow:0 0 0 1px rgba(255,255,255,.96),0 0 0 2px rgba(207,107,107,.22); }
.learn-diff-dot.mastered::after { content:"";position:absolute;inset:2px;border-radius:50%;background:#fff;opacity:.82; }
.learn-map-layer[hidden] { display:none; }
@media(max-width:700px){
  .learn-song-panel { left:8px;right:8px;width:auto;bottom:96px; }
  .learn-song-panel.min { left:auto;right:8px;width:min(245px,calc(100vw - 16px)); }
  .learn-song-panel .syncbox { max-height:64vh; }
  .learn-actions { grid-template-columns:1fr 1fr; }
}

/* Dedicated Learn Song workspace. On desktop the score and learning controls
   receive separate columns, so neither can cover the other. Minimize returns
   the score to full width. */
@media (min-width:901px) {
  body.learn-workspace { --learn-workspace-width:clamp(400px,31vw,500px); }
  body.learn-workspace .score-wrap,
  body.learn-workspace .instrument-view {
    width:calc(100% - var(--learn-workspace-width));
    align-self:flex-start;
  }
  body.learn-workspace .learn-song-panel {
    top:56px;
    right:0;
    bottom:52px;
    width:var(--learn-workspace-width);
    z-index:80;
  }
  body.learn-workspace .learn-song-panel .syncbox {
    height:100%;
    max-height:none;
    border-radius:0;
    border-top:0;
    border-right:0;
    border-bottom:0;
    box-shadow:-10px 0 28px rgba(11,50,55,.09);
  }
}

/* On a narrow device Learn Song becomes an intentional full-screen workspace
   instead of an accidental floating card. Minimize reveals the score again. */
@media (max-width:900px) {
  body.learn-workspace .learn-song-panel {
    inset:48px 0 0 0;
    width:auto;
    height:auto;
    z-index:3600;
  }
  body.learn-workspace .learn-song-panel .syncbox {
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
  }
}

/* Shreeyanshi 0.1 — student-friendly teaching cards */
.learn-teach-section { border-top:1px solid var(--line); padding-top:10px; margin-top:10px; }
.learn-teach-section:first-child { border-top:0; padding-top:0; margin-top:0; }
.learn-teach-section h4 { margin:0 0 6px; font-size:.82rem; color:var(--ink); }
.learn-teach-section p { margin:5px 0 8px; line-height:1.42; }
.learn-teach-block { padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:rgba(18,160,175,.055); }
.learn-teach-block p { margin:4px 0 0; line-height:1.4; }
.learn-fact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:8px 0; }
.learn-fact-grid > div { border:1px solid var(--line); border-radius:8px; padding:7px; background:#fff; min-width:0; }
.learn-fact-grid span { display:block; color:var(--muted); font-size:.62rem; margin-bottom:2px; }
.learn-fact-grid b { display:block; font-size:.72rem; overflow-wrap:anywhere; }
.learn-small-note { color:var(--muted); font-size:.7rem; line-height:1.42; }
.learn-tip-list { margin:6px 0 0 18px; padding:0; }
.learn-tip-list li { margin:0 0 7px; line-height:1.42; padding-left:2px; }
@media (max-width:560px) {
  .learn-fact-grid { grid-template-columns:1fr; }
}


/* Shreeyanshi 0.1 — make Understand inviting and readable for students. */
.learn-song-panel { width:min(500px,calc(100vw - 28px)); }
.learn-insight-card {
  background:linear-gradient(180deg,#f8fcfc 0%,#f3f9f9 100%);
  padding:14px;
}
.learn-insight-card .learn-section-title { margin-bottom:10px; }
#learnInsightTitle { font-size:1rem; font-weight:800; letter-spacing:-.01em; }
#learnInsightBody { display:flex; flex-direction:column; gap:10px; }
.learn-teach-section {
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  padding:13px 14px;
  margin:0;
  box-shadow:0 2px 8px rgba(7,49,54,.045);
}
.learn-teach-section:first-child { border-top:1px solid var(--line); padding-top:13px; margin-top:0; }
.learn-teach-section h4 {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  font:700 1.02rem/1.25 Inter,system-ui,sans-serif;
  color:var(--ink);
  letter-spacing:-.01em;
}
.learn-teach-icon {
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:9px;
  background:#eef9fa;
  font-size:1rem;
}
.learn-teach-section p,
.learn-insight-card p {
  margin:6px 0 9px;
  font-size:.9rem;
  line-height:1.58;
  color:#385557;
}
.learn-teach-section b { color:var(--ink); font-weight:750; }
.learn-teach-section.rhythm { border-left:4px solid #2aa8b4; }
.learn-teach-section.harmony { border-left:4px solid #557bc0; }
.learn-teach-section.expression { border-left:4px solid #b47d3f; }
.learn-teach-section.tips { border-left:4px solid #4c9a68; }
.learn-insight-pill {
  padding:7px 10px;
  font-size:.82rem;
  font-weight:750;
  background:#f7fbfb;
}
.learn-tip-list { margin:7px 0 0; padding:0; list-style:none; counter-reset:learn-tip; }
.learn-tip-list li {
  counter-increment:learn-tip;
  position:relative;
  margin:0 0 8px;
  padding:9px 10px 9px 39px;
  border-radius:9px;
  background:#f7fbf8;
  font-size:.9rem;
  line-height:1.5;
  color:#29494b;
}
.learn-tip-list li::before {
  content:counter(learn-tip);
  position:absolute;
  left:10px;
  top:9px;
  width:21px;
  height:21px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#dff3e5;
  color:#24623b;
  font-size:.72rem;
  font-weight:800;
}
.learn-small-note { font-size:.78rem; line-height:1.5; }
.learn-teach-block { padding:12px 13px; border-radius:12px; }
.learn-teach-block > strong { font-size:.94rem; }
.learn-fact-grid > div { padding:9px; }
.learn-fact-grid span { font-size:.7rem; }
.learn-fact-grid b { font-size:.84rem; }
@media(max-width:700px){
  .learn-song-panel { width:auto; }
  .learn-teach-section p,.learn-insight-card p,.learn-tip-list li { font-size:.88rem; }
  .learn-teach-section h4 { font-size:.98rem; }
}

/* Learn Song opens from the normal transport as a compact pop-up. It grows
   only after the student selects a function and closes on the next outside
   click, so the notation immediately returns to full view. */
body .learn-song-panel,
body.learn-workspace .learn-song-panel {
  position:fixed;
  inset:auto auto 64px 50%;
  transform:translateX(-50%);
  width:min(860px,calc(100vw - 20px));
  height:auto;
  z-index:3500;
}
body.learn-workspace .score-wrap,
body.learn-workspace .instrument-view { width:100%;align-self:stretch; }
body .learn-song-panel .syncbox,
body.learn-workspace .learn-song-panel .syncbox {
  width:100%;
  height:auto;
  max-height:220px;
  border-radius:16px;
  border:2px solid #27aeb9;
  box-shadow:0 18px 48px rgba(6,47,52,.24);
  overflow:hidden;
  transition:max-height .16s ease,box-shadow .16s ease;
}
body .learn-song-panel.engaged .syncbox,
body.learn-workspace .learn-song-panel.engaged .syncbox { max-height:min(44vh,380px);box-shadow:0 22px 58px rgba(6,47,52,.30); }
.learn-song-panel .synchead { flex:0 0 auto;padding:8px 12px; }
.learn-song-panel .learn-song-body {
  display:grid;
  grid-template-columns:minmax(210px,.75fr) minmax(260px,.95fr) minmax(320px,1.1fr) minmax(430px,1.5fr);
  align-items:start;
  gap:10px;
  padding:10px 12px;
  overflow:auto;
  overscroll-behavior:contain;
}
.learn-song-body>.learn-progress-card,
.learn-song-body>.learn-next-card,
.learn-song-body>.learn-section-picker,
.learn-song-body>.learn-range-card { min-width:0;height:100%; }
.learn-song-body>.learn-insight-card,
.learn-song-body>.learn-problems { grid-column:1/-1; }
.learn-song-body>.learn-legend { grid-column:1/-1; }
.learn-section-chip.whole-song { font-weight:800;background:#f2f7ff;border-color:#cbdcf3; }
.learn-section-chip.whole-song.active { background:#e7f0ff;border-color:#557bc0;box-shadow:0 0 0 1px #557bc0 inset; }
.learn-song-panel.min,
body.learn-workspace .learn-song-panel.min { width:min(300px,calc(100vw - 20px));left:auto;right:10px;transform:none; }
.learn-song-panel.min .syncbox { max-height:none; }

@media(max-width:900px){
  body .learn-song-panel .syncbox,
  body.learn-workspace .learn-song-panel .syncbox { max-height:200px; }
  body .learn-song-panel.engaged .syncbox,
  body.learn-workspace .learn-song-panel.engaged .syncbox { max-height:min(40vh,330px); }
  .learn-song-panel .learn-song-body {
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:9px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
  }
  .learn-song-body>.learn-progress-card,
  .learn-song-body>.learn-next-card,
  .learn-song-body>.learn-section-picker,
  .learn-song-body>.learn-range-card,
  .learn-song-body>.learn-insight-card,
  .learn-song-body>.learn-problems {
    flex:0 0 min(84vw,420px);
    width:min(84vw,420px);
    height:auto;
    overflow-y:auto;
    scroll-snap-align:start;
  }
  .learn-song-body>.learn-legend { flex:0 0 auto;align-self:center; }
}

@media(max-height:620px){
  body .learn-song-panel .syncbox,
  body.learn-workspace .learn-song-panel .syncbox { max-height:180px; }
  body .learn-song-panel.engaged .syncbox,
  body.learn-workspace .learn-song-panel.engaged .syncbox { max-height:38vh; }
  .learn-song-panel .synchead { padding:6px 10px; }
  .learn-song-panel .learn-song-body { padding:7px 9px; }
}

/* Strong state colours: dark teal means available/off; yellow means the
   control is currently active. This is intentionally higher contrast than
   the old teal-on-teal toggle treatment. */
body.playing #learnSongBtn { background:#174f57!important;border-color:#6e969a!important;color:#fff!important; }
body.playing #learnSongBtn.toggled,
body.playing .controls .btn.toggled { background:#f2c94c!important;border-color:#f2c94c!important;color:#062f34!important;box-shadow:0 0 0 2px rgba(242,201,76,.24)!important; }
.learn-song-panel .learn-actions .btn,
.learn-song-panel #learnNextBtn { background:#eaf3f4;border-color:#bfd8db;color:#103f45; }
.learn-song-panel .btn.learn-action-active { background:#145f68!important;border-color:#145f68!important;color:#fff!important;box-shadow:0 0 0 2px rgba(20,95,104,.18); }
.learn-song-panel .btn.toggled,
.learn-song-panel .btn[aria-pressed="true"] { background:#f2c94c!important;border-color:#d5aa22!important;color:#062f34!important; }

/* Default Learn Song view is buttons only. Progress, sections, teaching and
   problem history live behind Details so they never crowd the notation. */
.learn-song-panel:not(.details-open) .learn-progress-card,
.learn-song-panel:not(.details-open) .learn-next-card,
.learn-song-panel:not(.details-open) .learn-section-picker,
.learn-song-panel:not(.details-open) .learn-range-card>.learn-section-title,
.learn-song-panel:not(.details-open) .learn-range-nav,
.learn-song-panel:not(.details-open) .learn-insight-card,
.learn-song-panel:not(.details-open) .learn-problems,
.learn-song-panel:not(.details-open) .learn-legend { display:none!important; }
.learn-song-panel:not(.details-open) .syncbox { max-height:132px!important; }
.learn-song-panel:not(.details-open) .learn-song-body { display:block;padding:8px 10px;overflow:hidden; }
.learn-song-panel:not(.details-open) .learn-range-card { height:auto;border:0;background:transparent;padding:0; }
.learn-song-panel:not(.details-open) .learn-actions { display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:1px; }
.learn-song-panel:not(.details-open) .learn-actions::-webkit-scrollbar { display:none; }
.learn-song-panel:not(.details-open) .learn-actions .btn { flex:0 0 auto;min-height:38px;padding:8px 12px; }
.learn-song-panel #learnDetailsBtn { order:-1;border-style:dashed;font-weight:800; }
.learn-song-panel.details-open .learn-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Guitar Analyse v2.1 final result */
.guitar-v2-card{margin-top:4px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(18,160,175,.045)}
.guitar-v2-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.guitar-v2-head>div{display:flex;flex-direction:column;gap:2px}.guitar-v2-head strong{font-size:.98rem}.guitar-v2-head span{font-size:.72rem;color:var(--muted)}
.guitar-v2-badge{padding:4px 7px;border-radius:999px;background:rgba(18,160,175,.13);color:var(--marigold-deep)!important;font-weight:700!important;font-size:.66rem!important}
.guitar-v2-compare{margin:5px 0;padding:5px 7px;border-radius:7px;background:var(--paper);font-size:.76rem;font-weight:600}.guitar-v2-compare .up{color:#18794e}.guitar-v2-compare .down{color:#b42318}.guitar-v2-compare .same{color:var(--muted)}
#guitarV2Retry{margin-top:8px}



/* ============================================================
   SHREEYANSHI CLEAN UI — COMPACT STUDENT TRANSPORT
   ============================================================ */
body.playing{background:#fff;}
body.playing .topbar{min-height:56px;padding:7px 12px;gap:7px;background:rgba(255,255,255,.98);color:var(--ink);border-bottom:1px solid #e5eded;box-shadow:0 2px 10px rgba(11,50,55,.045);}
body.playing .topbar .logo-mark,body.playing .topbar .tag,body.playing .topbar .header-quote,body.playing .topbar .sound-chip{display:none!important;}
body.playing .topbar .brand{flex:1 1 auto;min-width:100px;padding:0 4px;}
body.playing .topbar h1{font-family:Inter,system-ui,sans-serif;font-size:1rem;font-weight:760;letter-spacing:-.015em;color:var(--ink);}
body.playing .topbar .btn{min-height:38px;padding:7px 10px;border:1px solid #dce7e7;background:#f8fafa;color:var(--ink);border-radius:10px;box-shadow:none;}
body.playing #libraryBtn{background:#eef8f8;border-color:#d5ecee;color:var(--marigold-deep);}
body.playing .score-wrap{background:#fff;}body.playing #alphaTab{margin:0 auto;padding-top:8px;}

body.playing .controls{display:flex;flex-direction:column;gap:7px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.985);border-top:1px solid #e0e9e9;box-shadow:0 -5px 20px rgba(11,50,55,.065);overflow:visible;}
body.playing .primary-actions,body.playing .secondary-actions{display:flex;align-items:center;gap:7px;width:100%;min-width:0;}
body.playing .primary-actions .btn,body.playing .secondary-actions .btn{min-height:38px;padding:7px 11px;border-radius:10px;border:1px solid #dce7e7;background:#f7f9f9;color:var(--ink);box-shadow:none;white-space:nowrap;}
body.playing #playPause{background:var(--marigold);border-color:var(--marigold);color:#062f34;min-width:96px;font-weight:800;}
body.playing #learnSongBtn{background:#eef8f8;border-color:#cce8ea;color:#086b77;}
body.playing #guitarAnalyseBtn{background:#fff;border-color:#bcdde0;color:#086b77;}
body.playing .transport-stop{width:40px;padding-left:8px!important;padding-right:8px!important;}
body.playing #timePos{margin-left:auto;color:var(--muted);font-size:.78rem;white-space:nowrap;}

.transport-menu{display:flex;align-items:stretch;position:relative;border:1px solid #dce7e7;border-radius:10px;background:#f7f9f9;}
body.playing .transport-menu>.btn{border:0!important;border-radius:10px 0 0 10px!important;background:transparent!important;}
.transport-details{position:relative;margin:0;}
.transport-details>summary{list-style:none;width:28px;height:100%;min-height:38px;display:grid;place-items:center;border-left:1px solid #dce7e7;color:#607779;cursor:pointer;border-radius:0 10px 10px 0;user-select:none;font-weight:800;}
.transport-details>summary::-webkit-details-marker{display:none;}
.transport-details[open]>summary{background:#edf5f5;}
.transport-popover{position:absolute;left:0;bottom:calc(100% + 7px);z-index:120;min-width:150px;padding:8px;background:#fff;border:1px solid #dbe7e7;border-radius:12px;box-shadow:0 10px 28px rgba(9,42,46,.14);}
.metro-menu .transport-popover{right:0;left:auto;min-width:130px;}
.transport-popover>.btn{width:100%;}
.focus-popover{min-width:220px;display:flex;flex-direction:column;gap:7px;}
.focus-popover #loopBtn{width:100%;}
.focus-popover .loopsec{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:6px;padding:0;margin:0;}
.focus-popover .loopsec .lsinfo{text-align:center;color:var(--ink);font-size:.78rem;font-weight:700;white-space:nowrap;}
.focus-popover .lsbtn{min-width:38px!important;padding:6px!important;}

.tempo-compact{display:flex;align-items:center;gap:6px;margin-left:3px;color:var(--ink);}
.tempo-label{font-size:.76rem;color:var(--muted);font-weight:650;}
body.playing .tempo-group{display:flex;align-items:center;gap:4px;}
body.playing .tempo-group .tbtn{min-width:38px;padding:6px 9px!important;}
body.playing #tempoInput{width:64px;min-height:38px;padding:5px 6px;background:#fff;color:var(--ink);border:1px solid #d7e4e4;border-radius:9px;text-align:center;font-weight:750;}
body.playing #tempoUnit{font-size:.72rem;color:var(--muted);}body.playing #bpmVal{font-size:.7rem;color:var(--marigold-deep);}
body.playing .btn.toggled{background:#e3f4f5!important;border-color:#bfe5e8!important;color:#086b77!important;}

body.playing .focus-bar{background:rgba(255,255,255,.97);color:var(--ink);border:1px solid #d9e7e7;box-shadow:0 8px 24px rgba(11,50,55,.10);border-radius:13px;}
body.playing .focus-bar button{background:#f3f8f8;color:var(--ink);border-color:#d7e5e5;}
body.playing .settings{width:min(360px,94vw);background:#fbfcfc;border-left:1px solid #e1eaea;box-shadow:-12px 0 36px rgba(11,50,55,.11);}
body.playing .settings .library-head,body.playing .settings-head{background:#fff!important;color:var(--ink)!important;border-bottom:1px solid #e3ecec;}
body.playing .settings .lib-section{color:#789092;padding-top:18px;}
body.playing .settings .set-row,body.playing .settings .ctrl-label{background:#fff;border:1px solid #e3ebeb;border-radius:12px;margin:6px 12px;padding:10px 12px;color:var(--ink);text-transform:none;letter-spacing:0;}
body.playing .settings select.ctrl{background:#fff;color:var(--ink);border-color:#d7e3e3;max-width:180px;}

@media(max-width:900px){
  body.playing .primary-actions,body.playing .secondary-actions{overflow-x:auto;scrollbar-width:none;padding-bottom:1px;}
  body.playing .primary-actions::-webkit-scrollbar,body.playing .secondary-actions::-webkit-scrollbar{display:none;}
  body.playing .primary-actions>*,body.playing .secondary-actions>*{flex-shrink:0;}
}
@media(max-width:600px),(max-height:600px){
  body.playing .topbar{min-height:48px;padding:5px 7px;}body.playing .topbar h1{font-size:.88rem;}
  body.playing .controls{padding:6px 7px calc(6px + env(safe-area-inset-bottom));gap:5px;}
  body.playing .primary-actions,body.playing .secondary-actions{gap:5px;}
  body.playing .primary-actions .btn,body.playing .secondary-actions .btn{min-height:36px;padding:6px 9px;}
  body.playing #timePos{display:none;}
}


/* ============================================================
   UI v3 — Signature bottom color + landscape single row
   ============================================================ */
body.playing .controls{
  background:var(--ink);
  border-top:2px solid var(--marigold);
  box-shadow:0 -5px 20px rgba(6,47,52,.16);
}

/* ============================================================
   PUBLIC SHEET PLAYER — /player/:songId
   A separate, iframe-safe surface over the shared alphaTab renderer.
   ============================================================ */
.public-player-actions { display: none; }

body.public-player {
  min-width: 0;
  background: #fff;
}
body.public-player .gate,
body.public-player .home,
body.public-player .library,
body.public-player .backdrop,
body.public-player .gearpanel,
body.public-player .gear-backdrop,
body.public-player .instrument-view,
body.public-player .results-backdrop,
body.public-player .dockpanel,
body.public-player .syncmodal,
body.public-player .trainer-modal,
body.public-player .song-generator-modal,
body.public-player #focusAsk,
body.public-player #focusBar,
body.public-player #mainYtPanel,
body.public-player #scoreWatermark,
body.public-player .topbar > :not(.brand),
body.public-player .primary-actions > :not(#playPause),
body.public-player .secondary-actions {
  display: none !important;
}
body.public-player .topbar {
  min-height: 50px;
  padding: 8px 14px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid #e2ebeb;
  box-shadow: 0 2px 10px rgba(11,50,55,.045);
}
body.public-player .topbar .brand {
  display: block;
  min-width: 0;
  padding: 0;
}
body.public-player .topbar h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(.9rem, 2.8vw, 1.08rem);
  font-weight: 750;
  color: var(--ink);
}
body.public-player .score-wrap {
  min-width: 0;
  background: #fff;
}
body.public-player #alphaTab {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 6px 18px;
}
body.public-player .controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  overflow-x: auto;
  background: var(--ink);
  border-top: 2px solid var(--marigold);
  box-shadow: 0 -5px 20px rgba(6,47,52,.16);
  scrollbar-width: none;
}
body.public-player .controls::-webkit-scrollbar { display: none; }
body.public-player .primary-actions {
  display: flex;
  width: auto;
  flex: 0 0 auto;
}
body.public-player #playPause {
  min-width: 96px;
  min-height: 40px;
  border-radius: 10px;
  font-weight: 800;
}
body.public-player .public-player-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 0 auto;
}
body.public-player .public-seek,
body.public-player .public-volume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: #0e5861;
  color: #fff;
}
body.public-player .public-seek input { width: clamp(150px, 23vw, 300px); }
body.public-player .public-volume input { width: clamp(82px, 10vw, 130px); }
body.public-player .public-seek input,
body.public-player .public-volume input { accent-color: var(--marigold); }
body.public-player .public-seek output,
body.public-player .public-volume output {
  min-width: 72px;
  color: rgba(255,255,255,.88);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
body.public-player .public-volume output { min-width: 36px; }
body.public-player .public-feature-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 7px 12px;
  border-color: rgba(255,255,255,.15);
  border-radius: 10px;
  background: #0e5861;
  color: #fff;
  box-shadow: none;
}
body.public-player .public-feature-btn.toggled {
  border-color: var(--marigold);
  background: var(--marigold);
  color: #062f34;
}
body.public-player .public-toggle,
body.public-player .public-control-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: #0e5861;
  color: #fff;
}
body.public-player .public-toggle {
  gap: 7px;
  padding: 0 12px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
body.public-player .public-toggle input { accent-color: var(--marigold); }
body.public-player .public-control-group { overflow: hidden; }
body.public-player .public-control-group .btn {
  min-width: 40px;
  min-height: 38px;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}
body.public-player .public-control-group .btn + .btn,
body.public-player .public-fit-group .btn + .btn {
  border-left: 1px solid rgba(255,255,255,.13);
}
body.public-player #publicZoomValue {
  min-width: 52px;
  padding: 0 8px;
  text-align: center;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.86);
}
body.public-player .public-fit-group .btn { min-width: 72px; font-size: .75rem; }
body.public-player .public-control-group .btn.toggled {
  background: var(--marigold) !important;
  color: #062f34 !important;
}
body.public-player .public-control-group .btn:disabled,
body.public-player .public-toggle:has(input:disabled),
body.public-player .public-seek:has(input:disabled),
body.public-player .public-volume:has(input:disabled) { opacity: .55; cursor: wait; }

.public-tuner-modal[hidden] { display: none !important; }
.public-tuner-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5,31,35,.76);
  backdrop-filter: blur(7px);
}
.public-tuner-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: clamp(20px, 5vw, 32px);
  border: 1px solid #dbe8e8;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 85px rgba(4,31,35,.35);
}
.public-tuner-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.public-tuner-card h2 {
  margin: 4px 0 0;
  font: 650 clamp(1.8rem, 7vw, 2.5rem)/1.05 Fraunces, Georgia, serif;
}
.public-tuner-card .tag { color: var(--marigold-deep); }
.public-tuner-help,
.public-tuner-status {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.55;
}
.public-tuner-strings {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 18px 0;
}
.public-tuner-strings span {
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
}
.public-tuner-strings span.active {
  border-color: var(--marigold-deep);
  background: #fff4d8;
  color: var(--ink);
}
.public-tuner-reading {
  display: grid;
  justify-items: center;
  min-height: 150px;
  padding: 16px;
  border-radius: 16px;
  background: #eef9f9;
  text-align: center;
}
.public-tuner-reading > span {
  color: var(--marigold-deep);
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-tuner-reading > strong {
  font: 650 4.8rem/1 Fraunces, Georgia, serif;
  color: var(--ink);
}
.public-tuner-reading > small { color: var(--muted); }
.public-tuner-meter {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  height: 48px;
  color: var(--muted);
  font-size: .7rem;
}
.public-tuner-meter i {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg,#dd665d,#e9b432 42%,#23a36d 50%,#e9b432 58%,#dd665d);
}
.public-tuner-meter b {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 34px;
  border-radius: 3px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: left .12s ease;
}
.public-tuner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.public-tuner-actions .btn { text-decoration: none; }
body.public-tuner-open { overflow: hidden; }

@media (max-width: 520px) {
  body.public-player .topbar { min-height: 44px; padding: 6px 9px; }
  body.public-player .controls { gap: 6px; padding: 6px 7px calc(6px + env(safe-area-inset-bottom)); }
  body.public-player #playPause { min-width: 88px; min-height: 38px; }
  body.public-player .public-toggle,
  body.public-player .public-control-group,
  body.public-player .public-seek,
  body.public-player .public-volume { min-height: 38px; }
  body.public-player .public-toggle { padding: 0 10px; }
  body.public-player .public-seek input { width: 135px; }
  body.public-player .public-volume input { width: 76px; }
  .public-tuner-strings { grid-template-columns: repeat(3, 1fr); }
}
body.playing .controls,
body.playing .controls .tempo-label,
body.playing .controls #tempoUnit,
body.playing .controls #timePos{color:rgba(255,255,255,.84);}
body.playing .primary-actions .btn,
body.playing .secondary-actions .btn,
body.playing .transport-menu{
  background:#0e5861;
  border-color:rgba(255,255,255,.11);
  color:#fff;
}
body.playing .transport-menu>.btn{color:#fff!important;}
body.playing .transport-details>summary{
  color:rgba(255,255,255,.84);
  border-left-color:rgba(255,255,255,.13);
}
body.playing .transport-details[open]>summary{background:rgba(255,255,255,.10);}
body.playing #playPause{
  background:var(--marigold);
  border-color:var(--marigold);
  color:#062f34;
}
body.playing #learnSongBtn,
body.playing #guitarAnalyseBtn{
  background:#145f68;
  border-color:rgba(255,255,255,.16);
  color:#fff;
}
body.playing .btn.toggled{
  background:#20a8b5!important;
  border-color:#20a8b5!important;
  color:#062f34!important;
}
body.playing #tempoInput{
  background:#0a4650;
  color:#fff;
  border-color:rgba(255,255,255,.17);
}
body.playing #bpmVal{color:#58d7e1;}
body.playing .tempo-group .tbtn{
  background:#0e5861;
  color:#fff;
  border-color:rgba(255,255,255,.11);
}
.transport-popover{background:#fff;color:var(--ink);}
.transport-popover .btn{
  background:#f5f9f9!important;
  color:var(--ink)!important;
  border-color:#dce7e7!important;
}
.focus-popover .loopsec .lsinfo{color:var(--ink);}

/* Portrait keeps two neat rows. Landscape puts both groups on one horizontal
   line so the bottom transport does not look stacked. */
@media (orientation:landscape) and (min-width:760px){
  body.playing .controls{
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding-top:7px;
    padding-bottom:calc(7px + env(safe-area-inset-bottom));
    overflow-x:auto;
    scrollbar-width:none;
  }
  body.playing .controls::-webkit-scrollbar{display:none;}
  body.playing .primary-actions,
  body.playing .secondary-actions{
    width:auto;
    flex:0 0 auto;
    overflow:visible;
    gap:6px;
  }
  body.playing .secondary-actions{margin-left:auto;}
  body.playing .primary-actions .btn,
  body.playing .secondary-actions .btn{
    min-height:38px;
    padding:7px 9px;
  }
  body.playing #timePos{display:none;}
}

.transport-popover-floating{margin:0!important;min-width:150px!important;max-width:min(280px,calc(100vw - 16px))!important;background:#fff!important;color:var(--ink)!important;border:1px solid #dbe7e7!important;border-radius:12px!important;box-shadow:0 12px 34px rgba(5,35,39,.22)!important;padding:8px!important;overflow:visible!important;}
.transport-popover-floating.focus-popover{min-width:220px!important;}
.transport-popover-floating .btn{background:#f5f9f9!important;color:var(--ink)!important;border:1px solid #dce7e7!important;}
.transport-popover-floating .loopsec .lsinfo{color:var(--ink)!important;}

.analysis-teacher-feedback{margin-top:12px;padding:11px 12px;border:1px solid rgba(18,160,175,.22);border-radius:12px;background:#f7fbfb;color:var(--ink);}
.analysis-teacher-feedback>strong{display:block;font-size:.85rem;margin-bottom:2px;}
.analysis-teacher-feedback>span{display:block;font-size:.72rem;color:var(--muted);margin-bottom:8px;}
.analysis-feedback-actions{display:flex;gap:6px;flex-wrap:wrap;}
.analysis-feedback-actions .btn{font-size:.72rem;padding:7px 9px;}
.analysis-teacher-feedback small{display:block;margin-top:7px;color:var(--muted);line-height:1.35;}

.midi-auto-card{display:grid!important;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;}
.midi-auto-title{font-weight:750;color:var(--ink);}
.midi-auto-mode{font-size:.68rem;font-weight:800;padding:4px 7px;border-radius:999px;background:#e4f5f6;color:#08717c;}
.midi-auto-state{grid-column:1/-1;display:block!important;font-size:.7rem;line-height:1.35;color:var(--muted);}


/* FIX 6 — multidimensional practice report. The overall percentage is a
   secondary guide; the four musical dimensions carry the visual hierarchy. */
.results-card .res-title { margin:10px 0 2px; font-size:1.18rem; color:var(--ink); }
.results-card .res-overall-row { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin:6px 0 12px; text-align:left; }
.results-card .res-overall-row small { display:block; font-size:.68rem; color:var(--muted); line-height:1.3; }
.results-card .res-overall-row .stars { display:none; }
.results-card .res-pct { font-size:1.7rem; line-height:1.05; margin-top:2px; }
.res-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:9px 0 10px; }
.res-metric { border:1px solid var(--line); border-radius:10px; padding:9px 7px; text-align:left; background:var(--paper); min-width:0; }
.res-metric-label { display:block; font-size:.68rem; color:var(--muted); margin-bottom:3px; }
.res-metric b { display:block; font-size:1.05rem; color:var(--ink); line-height:1.1; }
.res-metric small { display:block; margin-top:3px; font-size:.62rem; color:var(--muted); }
.res-metric.metric-focus { border-width:2px; }
.res-focus { text-align:left; border:1px solid var(--line); border-radius:10px; padding:10px 11px; margin:8px 0 9px; }
.res-focus strong { display:block; color:var(--ink); font-size:.86rem; margin-bottom:3px; }
.res-focus span { display:block; color:var(--muted); font-size:.76rem; line-height:1.45; }
.results-card .res-detail { line-height:1.45; margin-top:7px; }
.results-card .res-grade { text-align:left; font-size:.78rem; font-weight:600; margin:8px 0 11px; }
.res-hist li small { color:var(--muted); font-size:.64rem; margin-left:5px; }
@media (max-width:560px) {
  .res-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .results-card .res-overall-row { align-items:flex-start; }
}

/* ===================== Song Sheet Music Generator ===================== */
.song-generator-open{font-weight:600}
.song-generator-modal{position:fixed;inset:0;z-index:1450;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,22,24,.56);backdrop-filter:blur(5px)}
.song-generator-modal.show{display:flex}
.song-generator-shell{width:min(1040px,97vw);max-height:94vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.24)}
.song-generator-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 26px 18px;border-bottom:1px solid var(--line)}
.song-generator-head h2{margin:4px 0 6px;font-family:"Fraunces",serif;font-size:28px;color:var(--ink)}
.song-generator-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.song-generator-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:22px;padding:24px 26px 28px}
.song-generator-settings{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px;align-content:start}
.song-generator-settings>label:not(.song-generator-check){display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--ink)}
.song-generator-settings .ctrl{width:100%;min-width:0}
.song-generator-settings input[type="range"]{width:100%}
.song-generator-wide{grid-column:1/-1}
body.is-admin .song-generator-settings>label.song-generator-wide.admin-only{display:flex}
.song-generator-count{float:right;color:var(--muted);font-size:11px;font-weight:500}
.song-generator-check{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);font-weight:600}
.song-generator-generate{grid-column:1/-1;min-height:46px;font-size:15px}
.song-generator-save-row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px}
.song-generator-save-row .btn{flex:1 1 170px;justify-content:center}
.song-generator-note{grid-column:1/-1;margin:0;padding:11px 13px;border-radius:12px;background:color-mix(in srgb,var(--marigold) 9%,var(--paper));border:1px solid color-mix(in srgb,var(--marigold) 24%,var(--line));color:var(--muted);font-size:12px;line-height:1.5}
.song-generator-instrument-panel[hidden],.song-generator-settings>[hidden],.song-generator-capabilities>[hidden]{display:none!important}
.song-generator-instrument-panel{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr);gap:12px 16px;padding:15px;border:1px solid color-mix(in srgb,var(--marigold) 30%,var(--line));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--marigold) 10%,var(--paper)),var(--paper))}
.song-generator-instrument-panel-head{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.song-generator-instrument-panel-head strong{font-size:15px;color:var(--ink)}
.song-generator-instrument-panel-head span{font-size:12px;line-height:1.45;color:var(--muted)}
.song-generator-instrument-panel label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:var(--ink)}
.song-generator-instrument-panel p{align-self:end;margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.song-generator-preview{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:350px;padding:26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--marigold) 8%,var(--paper)),var(--paper))}
.song-generator-preview-icon{font-size:56px;line-height:1;color:var(--marigold-deep);margin-bottom:16px}
.song-generator-preview strong{font-family:"Fraunces",serif;font-size:23px;color:var(--ink)}
.song-generator-preview span{margin-top:7px;color:var(--marigold-deep);font-size:13px;font-weight:600}
.song-generator-preview p{margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.song-generator-capabilities{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:18px}
.song-generator-capabilities span{margin:0;padding:6px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600}
@media (max-width:760px){.song-generator-modal{padding:8px}.song-generator-shell{max-height:97vh;border-radius:16px}.song-generator-head{padding:18px}.song-generator-body{grid-template-columns:1fr;padding:16px}.song-generator-settings{grid-template-columns:1fr}.song-generator-wide,.song-generator-check,.song-generator-generate,.song-generator-save-row,.song-generator-note{grid-column:1}.song-generator-instrument-panel{grid-template-columns:1fr}.song-generator-instrument-panel-head{grid-column:1}.song-generator-preview{position:static;min-height:210px}.song-generator-save-row{display:grid;grid-template-columns:1fr}.song-generator-save-row .btn{width:100%}}

/* Curated teaching catalog */
.song-generator-import-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--marigold) 5%,var(--paper))}
.song-generator-import-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.55fr);gap:14px;align-items:end}
.song-generator-import-head>div{display:flex;flex-direction:column;gap:4px}.song-generator-import-head strong{font-size:14px}.song-generator-import-head span{font-size:12px;line-height:1.4;color:var(--muted)}
.song-generator-catalog-total{justify-self:end;align-self:center;padding:8px 11px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--marigold-deep)!important;font-size:12px;font-weight:700}
@media (max-width:760px){.song-generator-import-head{grid-template-columns:1fr}.song-generator-catalog-total{justify-self:start}}