/* ============================================================
     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) 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    */
  }
  * { 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; }
  #gateCode {
    width: 100%; 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; letter-spacing: 0.08em;
  }
  #gateCode:focus-visible { outline: 2px solid var(--marigold); outline-offset: 1px; }
  #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%; }
  .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; }
  .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;
  }
  #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; }
  }
  .score-wrap.count-in .at-cursor-bar,
  .score-wrap.count-in .at-cursor-beat { opacity: 0 !important; }
  /* alphaTab briefly paints the end-of-range cursor before its internal loop
     seek completes. Focus hides that transition so it snaps to bar one. */
  .score-wrap.loop-wrap .at-cursor-bar,
  .score-wrap.loop-wrap .at-cursor-beat { opacity: 0 !important; }
  .score-wrap.stepping .at-cursor-beat,
  .score-wrap.stepping .at-cursor-bar { opacity: 0 !important; }
  .at-cursor-bar { background: transparent; }
  .at-cursor-beat { background: var(--marigold-deep); width: 2px; }
  /* 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, rhythm counts) 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; }
  /* Rhythm-count overlay: a light "1 e n a" row above each system. */
  .rc-layer { z-index: 6; }
  .rc-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: var(--marigold-deep);
    white-space: nowrap;
    pointer-events: none;
  }
  .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)); }
  @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; }
  .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(.hw-mode) .hw-only { display: none !important; }
  .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;
    }
  }