* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
            background: #2d2d2d;
            min-height: 100vh;
            overflow-x: hidden;
        }

        .toolbar {
            background: #1a1a1a;
            color: white;
            border-bottom: 1px solid #3a3a3a;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .toolbar-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 15px 8px 92px; /* clears the shared back chip */
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }

        .toolbar h1 {
            font-size: 1.2em;
            color: #4a9eff;
            white-space: nowrap;
        }

        .toolbar-header .line-selector {
            flex: 1;
            min-width: 0;
        }

        .toolbar-actions {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 3px;
            padding: 4px 10px 5px;
        }

        /* Collapses the toolbar down to the buttons a composer reaches for
           constantly (Play/Info/Mixer/Palette/Sa). Secondary/infrequent
           buttons (Undo/Redo, Remark, Theme, File, Live) carry .tb-more and
           hide behind the toggle. Selecting by class, not :nth-child, keeps
           this correct when buttons (e.g. the assignment ones) are added. */
        .toolbar-actions.toolbar-collapsed > .tb-more {
            /* !important needed: the Undo/Redo wrapper (6th child) carries
               an inline style="display:flex", which otherwise beats any
               stylesheet rule regardless of selector specificity. */
            display: none !important;
        }

        .toolbar-collapse-btn {
            background: none;
            border: none;
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            font-size: 11px;
            padding: 4px 6px;
            flex-shrink: 0;
        }

        .toolbar-collapse-btn:hover {
            color: rgba(255,255,255,0.85);
        }

        @media (max-width: 768px) {
            .toolbar-collapse-btn {
                /* Not the full 44px touch-target size used elsewhere — the
                   whole point of this button is reclaiming vertical space
                   on a phone, and forcing it to 44px inflates the toolbar
                   header itself for every user, which would cost back more
                   height than collapsing the second row ever saves. Low
                   miss-tap cost here (it just toggles a UI state, nothing
                   destructive), so a smaller target is an acceptable
                   trade-off. */
                font-size: 13px;
                padding: 8px 8px;
            }
        }

        @media (max-width: 768px) {
            .toolbar h1 {
                font-size: 1em;
            }

            .toolbar-header {
                gap: 8px;
                padding: 6px 10px 6px 48px; /* clears the shared back chip */
            }

            .toolbar-actions {
                grid-template-columns: repeat(5, 1fr);
                gap: 3px;
                padding: 4px 8px 6px;
            }
        }

        .toolbar-section {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toolbar-divider {
            width: 1px;
            height: 24px;
            background: rgba(255,255,255,0.12);
            flex-shrink: 0;
        }

        .line-selector {
            display: flex;
            gap: 5px;
            align-items: center;
            flex-wrap: wrap;
        }

        .line-tab {
            background: #3a3a3a;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
            position: relative;
        }

        .line-tab.active {
            /* Darker than the app's usual #4a9eff accent — that shade only
               gives white text a 2.75:1 contrast ratio, well under the 4.5:1
               WCAG AA minimum. Dark mode's slightly off-white label color
               needed this a touch darker than the other fixes to clear
               4.5:1 with margin. */
            background: #1a5fb4;
        }

        .line-tab:hover {
            background: #4a4a4a;
        }

        .line-tab.active:hover {
            background: #154d99;
        }

        /* Active tab label stays pure white, also in dark mode (the muted dark
           label colour only reached 3.7:1 on the blue). */
        .line-tab.active, .line-tab.active .line-tab-name { color: #fff !important; }

        .line-tab .delete-line {
            margin-left: 8px;
            color: #ff6b6b;
            font-weight: bold;
        }

        .add-line-btn {
            /* #2ecc71 only gives white text a 2.1:1 contrast ratio — this
               darker green keeps the same hue at ~4.8:1 (WCAG AA is 4.5:1). */
            background: #1e8449;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .add-line-btn:hover {
            background: #176c3a;
        }

        @media (max-width: 768px) {
            .line-tab {
                padding: 5px 10px;
                font-size: 11px;
            }
        }

        .toolbar-btn {
            background: rgba(255, 255, 255, 0.10);
            color: rgba(255, 255, 255, 0.90);
            border: 1px solid rgba(255, 255, 255, 0.18);
            padding: 6px 8px;
            border-radius: 7px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
            white-space: nowrap;
            text-align: center;
            font-family: inherit;
        }

        /* :hover alone gives zero feedback on a tap (mobile has no hover) —
           this was the single most-tapped element type with no press state
           in the whole app. */
        .toolbar-btn:active {
            transform: scale(0.94);
        }

        @media (max-width: 768px) {
            .toolbar-btn {
                padding: 8px 6px;
                font-size: 11px;
            }
        }

        .toolbar-btn:hover {
            background: rgba(255, 255, 255, 0.20);
            border-color: rgba(255, 255, 255, 0.35);
        }

        /* Primary shares same shape — no special colour */
        .toolbar-btn.primary {
            background: rgba(255, 255, 255, 0.10);
            border-color: rgba(255, 255, 255, 0.18);
            color: rgba(255, 255, 255, 0.90);
        }

        .toolbar-btn.primary:hover {
            background: rgba(255, 255, 255, 0.20);
            border-color: rgba(255, 255, 255, 0.35);
        }

        .main-container {
            display: flex;
            height: calc(100vh - 110px);
            position: relative;
        }

        .side-panel {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: 100vw;
            max-width: 100%;
            background: rgba(37, 37, 37, 0.98);
            backdrop-filter: blur(10px);
            padding: 60px 20px 20px 20px;
            overflow-y: auto;
            transition: transform 0.3s ease;
            z-index: 200;
            transform: translateX(-100%);
        }

        .side-panel.visible {
            transform: translateX(0);
        }

        .side-panel-content {
            max-width: 600px;
            margin: 0 auto;
        }

        .side-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #4a9eff;
        }

        .side-panel-header h2 {
            color: #4a9eff;
            font-size: 24px;
            margin: 0;
        }

        .close-panel-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
        }

        .close-panel-btn:hover {
            background: #c82333;
        }

        @media (max-width: 768px) {
            .side-panel {
                padding: 50px 15px 15px 15px;
            }

            .side-panel-header h2 {
                font-size: 20px;
            }
        }

        .side-panel h3 {
            color: #4a9eff;
            font-size: 14px;
            text-transform: uppercase;
            margin-bottom: 15px;
            letter-spacing: 1px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            color: #ccc;
            font-size: 13px;
            margin-bottom: 5px;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            background: #1a1a1a;
            color: white;
            border: 1px solid #3a3a3a;
            padding: 8px;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #4a9eff;
        }

        .workspace {
            flex: 1;
            background: white;
            overflow: auto;
            padding: 30px 16px 270px 16px;
            display: flex;
            flex-direction: column;
            width: 100%;
            box-sizing: border-box;
            transition: padding-bottom 0.25s ease;
        }

        /* The 270px (48vh on mobile, below) is reserved so the floating note
           palette never covers the composition — but it's a static value
           applied regardless of whether the palette is actually shown.
           Hiding the palette (the "Hide" button) left that entire reserved
           strip as dead empty space instead of handing it back to the score. */
        body:has(#bottomPanel.hidden) .workspace {
            padding-bottom: 30px;
        }

        @media (max-width: 768px) {
            .workspace {
                padding: 15px 6px 48vh 6px;
            }

            body:has(#bottomPanel.hidden) .workspace {
                padding-bottom: 24px;
            }
        }

        .score-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #ddd;
            /* .workspace is one shared scroll container for the header and
               the composition below it. Once a composition needs horizontal
               scroll to keep the cursor in view (any row longer than a
               screen width — which is most real compositions, since a "Row"
               break is manual, not automatic), the header scrolled away
               with it — not hidden, literally carried hundreds of px
               off-screen. Pinning it on both axes keeps it in place through
               scrolling either direction. */
            position: sticky;
            top: 0;
            left: 0;
            z-index: 5;
            background: white;
        }

        .score-title {
            font-size: 28px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 10px;
        }

        .score-meta {
            font-size: 14px;
            color: #666;
        }

        .measure-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0;
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 20px;
            line-height: 1;
            padding: 20px;
            background: white;
            border-radius: 4px;
            width: 100%;
            box-sizing: border-box;
            align-self: stretch;
        }

        @media (max-width: 768px) {
            /* The header was eating fixed vertical space regardless of screen
               size — on a phone, between this and the note palette below,
               there was almost nothing left to actually see the composition. */
            .score-header {
                margin-bottom: 10px;
                padding-bottom: 8px;
            }
            .score-title {
                font-size: 18px;
                margin-bottom: 4px;
            }
            .score-meta {
                font-size: 12px;
            }
            .measure-container {
                font-size: 16px;
                padding: 8px;
                line-height: 1.6;
            }
        }

        @media (max-width: 768px) {
            /* .measure, .measure-content, .vibhaag and .western-note used to
               be here too — but this block sits BEFORE each of their base
               (unscoped) rules later in the file. Same selector, equal
               specificity: the later, unscoped rule always won regardless of
               screen size, so those four mobile tweaks were dead on arrival.
               Moved to right after each one's own base rule instead, where
               they actually apply. See the .note / .score-title fixes above
               for the same pattern found earlier in this file. */
            .sargam-text {
                font-size: 15px;
            }

            .octave-dot {
                font-size: 8px;
            }

            .note-group {
                padding-left: 4px;
                padding-right: 4px;
            }

            .note-group-notes .note {
                min-width: 30px;
                min-height: 42px;
                padding: 10px 6px;
                font-size: 15px;
            }
        }

        .measure {
            display: inline-flex;
            align-items: center;
            border-right: 3px solid #000;
            border-left: 1.5px solid rgba(0,0,0,0.18);
            padding: 10px 15px;
            min-width: fit-content;
            position: relative;
            background: #d9c9ad;
        }

        @media (max-width: 768px) {
            .measure {
                padding: 8px 8px;
                border-right-width: 2px;
                flex-wrap: wrap;
            }
        }

        .measure.highlight-cycle-1 {
            background: #c8b595;
        }

        .measure.highlight-cycle-2 {
            background: #ddd0b8;
        }

        .measure.incomplete {
            background: #e8d59a;
        }

        .measure.highlight-cycle-1.incomplete {
            background: #e2ce9a;
        }

        .measure.highlight-cycle-2.incomplete {
            background: #fffaed;
        }

        .measure.overfilled {
            background: #f8d7da;
        }

        .vibhaag {
            display: inline-block;
            width: 3px;
            height: 40px;
            background: #000;
            margin: 0 10px;
            vertical-align: middle;
        }

        @media (max-width: 768px) {
            .vibhaag {
                height: 30px;
                margin: 0 5px;
            }
        }

        .measure-content {
            display: flex;
            gap: 1px;
            align-items: center
        }

        @media (max-width: 768px) {
            .measure-content {
                gap: 2px;
                flex-wrap: wrap;
            }
        }

        .note {
            cursor: pointer;
            padding: 16px 8px;
            border-radius: 10px;
            transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s;
            position: relative;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 2px solid transparent;
            min-height: 52px;
            min-width: 32px;
            overflow: visible;
        }

        .note:hover {
            background: #e3f2fd;
        }

        @media (max-width: 768px) {
            /* This has to come after the base .note rule above — an earlier
               copy of this override (same selector, equal specificity) used
               to sit before it in the file and was silently losing the CSS
               cascade on every screen size, so the composition never actually
               got smaller on mobile no matter what this block said.
               At 16px/52px, each note row was ~60px tall — comfortably
               tappable, but it meant only 2-3 rows of an actual composition
               fit on screen above the palette. 42px keeps notes well above
               the ~40px minimum touch target while giving back real vertical
               room once a piece has more than a couple of rows. */
            .note {
                padding: 10px 6px;
                min-width: 30px;
                min-height: 42px;
                font-size: 15px;
            }
        }

        .rest-note {
            /* #bbb at opacity 0.6 rendered at ~1.87:1 against the score
               paper — well under WCAG AA's 4.5:1. Using a much darker base
               color (with the same reduced opacity, to keep rests reading
               as visually quieter than a full note) lands the blended
               result around ~8:1. */
            color: #000;
            cursor: default;
            opacity: 0.68;
            min-width: 1.2em;
            text-align: center;
        }

        .rest-note:hover {
            background: transparent;
        }

        body.dark-mode .rest-note {
            color: #fff;
        }

        .note.selected {
            background: #4a9eff;
            color: white;
            border: 2px solid #2196f3;
            box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
        }

        .note.multi-selected {
            background: #66bb6a;
            color: white;
            border: 2px solid #4caf50;
            box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
        }

        .note.playing {
            background: rgba(74, 158, 255, 0.25) !important;
            border-color: rgba(74, 158, 255, 0.5) !important;
            box-shadow: 0 0 12px rgba(74, 158, 255, 0.35);
            transition: background 0.08s, box-shadow 0.08s;
        }

        body.dark-mode .note.playing {
            background: rgba(74, 158, 255, 0.3) !important;
            box-shadow: 0 0 14px rgba(74, 158, 255, 0.4);
        }

        /* Lyrics ABOVE notes */
        .note-with-lyrics {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            vertical-align: middle;
        }

        .note-lyrics {
            font-size: 11px;
            color: #8b5e3c;
            max-width: 64px;
            text-align: center;
            line-height: 1.15;
            margin-bottom: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            padding: 1px 4px;
            border-radius: 3px;
            transition: background 0.08s;
            font-style: italic;
            order: -1;
        }

        .note-lyrics:hover {
            background: rgba(74, 158, 255, 0.1);
        }

        .note-lyrics.playing {
            background: rgba(74, 158, 255, 0.25);
            color: #1a6fd1;
            font-weight: 600;
        }

        body.dark-mode .note-lyrics {
            color: #b8956e;
        }

        body.dark-mode .note-lyrics.playing {
            background: rgba(74, 158, 255, 0.3);
            color: #6ab0ff;
        }

        .note-lyrics-empty {
            font-size: 10px;
            color: #bbb;
            opacity: 0.55;
            cursor: pointer;
            padding: 1px 3px;
            transition: opacity 0.2s;
            order: -1;
        }

        .note-with-lyrics:hover .note-lyrics-empty {
            opacity: 0.5;
        }

        .lyrics-input {
            font-size: 11px;
            width: 55px;
            padding: 2px 4px;
            border: 1px solid #4a9eff;
            border-radius: 3px;
            outline: none;
            text-align: center;
            font-family: inherit;
            background: white;
            order: -1;
        }

        .lyrics-input:focus {
            outline: 2px solid #4a9eff;
            outline-offset: 1px;
        }

        body.dark-mode .lyrics-input {
            background: #1e2530;
            color: #e0e6ed;
            border-color: #4a9eff;
        }

        /* Group lyrics row — above notes */
        .group-lyrics-row {
            display: flex;
            justify-content: center;
            gap: 2px;
            order: -1;
        }

        .group-lyrics-cell {
            flex: 1;
            text-align: center;
            font-size: 11px;
            color: #8b5e3c;
            font-style: italic;
            cursor: pointer;
            padding: 1px 2px;
            border-radius: 3px;
            transition: background 0.08s;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .group-lyrics-cell.playing {
            background: rgba(74, 158, 255, 0.25);
            color: #1a6fd1;
            font-weight: 600;
        }

        body.dark-mode .group-lyrics-cell {
            color: #b8956e;
        }

        /* Sentence lyrics editor */
        .lyrics-sentence-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: #1a1a2e;
            border-top: 1px solid rgba(255,255,255,0.1);
            border-radius: 0 0 12px 12px;
        }

        .lyrics-sentence-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 8px;
            background: rgba(255,255,255,0.08);
            color: white;
            font-family: inherit;
            font-size: 13px;
            outline: none;
        }

        .lyrics-sentence-input::placeholder {
            color: rgba(255,255,255,0.35);
            font-style: italic;
        }

        .lyrics-sentence-input:focus {
            border-color: #4a9eff;
            background: rgba(255,255,255,0.12);
        }

        .lyrics-apply-btn {
            padding: 8px 14px;
            background: #4a9eff;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            font-family: inherit;
        }

        .lyrics-apply-btn:hover {
            background: #3a8eef;
        }

        .lyrics-clear-btn {
            padding: 8px 10px;
            background: rgba(220, 53, 69, 0.2);
            color: #ff6b7a;
            border: 1px solid rgba(220, 53, 69, 0.3);
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            font-family: inherit;
        }

        @media (max-width: 768px) {
            .note-lyrics, .group-lyrics-cell {
                font-size: 10px;
                max-width: 45px;
            }
            .lyrics-input {
                width: 45px;
                font-size: 10px;
            }
            .lyrics-sentence-input {
                font-size: 12px;
                padding: 7px 10px;
            }
        }

        .context-menu {
            position: fixed;
            background: white;
            border: 2px solid #4a9eff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            padding: 8px;
            display: none;
            min-width: 180px;
        }

        .context-menu.active {
            display: block;
        }

        .context-menu button {
            display: block;
            width: 100%;
            padding: 10px 15px;
            margin: 3px 0;
            border: none;
            background: #f5f5f5;
            cursor: pointer;
            text-align: left;
            font-size: 13px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .context-menu button:hover {
            background: #4a9eff;
            color: white;
            transform: translateX(3px);
        }

        .context-menu .divider {
            height: 1px;
            background: #ddd;
            margin: 5px 0;
        }

        .note-menu {
            position: absolute;
            background: white;
            border: 2px solid #4a9eff;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            padding: 5px;
            display: none;
        }

        .note-menu.active {
            display: block;
        }

        .note-menu button {
            display: block;
            width: 100%;
            padding: 8px 12px;
            margin: 2px 0;
            border: none;
            background: #f5f5f5;
            cursor: pointer;
            text-align: left;
            font-size: 12px;
            border-radius: 3px;
        }

        .note-menu button:hover {
            background: #4a9eff;
            color: white;
        }

        .western-note {
            font-size: 11px;
            color: #555;
            font-weight: 600;
            margin-top: 2px;
        }

        @media (max-width: 768px) {
            .western-note {
                font-size: 9px;
            }
        }

        .note.flat {
            text-decoration: underline;
        }

        .note.sharp::after {
            content: '−';
            position: absolute;
            top: -10px;
            right: 0;
            left: 0;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            transform: rotate(90deg);
        }

        .note.mandra-octave {
            position: relative;
        }

        .note.mandra-octave::before {
            content: '•';
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #888;
            line-height: 1;
        }

        .note.taar-octave {
            position: relative;
        }

        .note.taar-octave::after {
            content: '•';
            position: absolute;
            top: 3px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #888;
            line-height: 1;
        }

        .note.gamaka::before {
            content: '~';
            position: absolute;
            top: 1px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            color: #888;
            line-height: 1;
        }

        .note.meend::after {
            content: '⌢';
            position: absolute;
            top: 1px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 13px;
            color: #888;
            line-height: 1;
        }

        .note.kan::before {
            content: '◊';
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 9px;
            color: #888;
            line-height: 1;
        }

        .note.murki::after {
            content: '※';
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #888;
            line-height: 1;
        }

        .note.khatka::after {
            content: '⚡';
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            color: #888;
            line-height: 1;
        }

        .note.zamzama::after {
            content: '≈';
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            color: #888;
            line-height: 1;
        }

        body.dark-mode .taar-octave::after,
        body.dark-mode .mandra-octave::before,
        body.dark-mode .note.gamaka::before,
        body.dark-mode .note.meend::after,
        body.dark-mode .note.kan::before,
        body.dark-mode .note.murki::after,
        body.dark-mode .note.khatka::after,
        body.dark-mode .note.zamzama::after {
            color: #bbb;
        }

        /* Layakari / Tuplet Groups — bottom underbrace */
        .note-group {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            margin: 0 2px;
            cursor: default;
            vertical-align: middle;
            padding-top: 0;
            padding-bottom: 18px;
            position: relative;
        }

        .note-group-notes {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 0 4px;
        }

        .note-group-notes .note {
            margin-right: 2px;
        }

        /* The brace row: left arm ── label ── right arm */
        .note-group-brace {
            display: flex;
            align-items: flex-start;
            position: absolute;
            bottom: 2px;
            left: 2px;
            right: 2px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .brace-arm {
            flex: 1;
            height: 7px;
            min-width: 4px;
        }

        .brace-arm-left {
            border-left: 2px solid #e67e22;
            border-bottom: 2px solid #e67e22;
            border-radius: 0 0 0 6px;
            margin-right: 2px;
        }

        .brace-arm-right {
            border-right: 2px solid #e67e22;
            border-bottom: 2px solid #e67e22;
            border-radius: 0 0 6px 0;
            margin-left: 2px;
        }

        .note-group-label {
            color: #e67e22;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            padding: 0 2px;
            flex-shrink: 0;
            font-family: inherit;
            letter-spacing: 0.3px;
            transform: translateY(1px);
        }

        /* Matra Numpad */
        .matra-numpad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            margin: 0 auto;
            max-width: 280px;
        }

        .numpad-key {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: white;
            font-size: 22px;
            font-weight: 600;
            padding: 14px 0;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.12s ease;
            font-variant-numeric: tabular-nums;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        .numpad-key:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .numpad-key:active {
            background: rgba(74, 158, 255, 0.3);
            transform: scale(0.95);
        }

        .numpad-key.numpad-clear {
            background: rgba(220, 53, 69, 0.2);
            border-color: rgba(220, 53, 69, 0.4);
            color: #ff6b6b;
        }

        .numpad-key.numpad-clear:hover {
            background: rgba(220, 53, 69, 0.35);
        }

        .numpad-key.numpad-confirm {
            background: linear-gradient(135deg, #e67e22, #d35400);
            border-color: #e67e22;
            color: white;
            font-size: 26px;
        }

        .numpad-key.numpad-confirm:hover {
            background: linear-gradient(135deg, #f39c12, #e67e22);
        }

        .numpad-key.numpad-confirm:disabled {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.2);
            cursor: not-allowed;
        }

        .numpad-key.numpad-confirm:disabled:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: none;
        }

        /* Pulse animation on the display when typing */
        @keyframes matraPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }

        .matra-pulse {
            animation: matraPulse 0.15s ease;
        }

        @media (max-width: 768px) {
            .note-group-notes {
                gap: 1px;
                padding: 0 3px;
            }

            .note-group-label {
                font-size: 9px;
            }

            .brace-arm {
                height: 5px;
            }

            .numpad-key {
                padding: 16px 0;
                font-size: 24px;
            }
        }

        .measure-number {
            position: absolute;
            top: -15px;
            left: 5px;
            font-size: 10px;
            /* #999 on the cream score paper is only ~2.85:1 — under WCAG
               AA's 4.5:1. */
            color: #6b6b6b;
        }

        /* Blinking Cursor */
        .composition-cursor {
            display: inline-block;
            width: 3px;
            height: 34px;
            background: #4a9eff;
            border-radius: 2px;
            animation: cursorBlink 1s step-end infinite;
            vertical-align: middle;
            margin: 0 1px;
            flex-shrink: 0;
            box-shadow: 0 0 10px rgba(74, 158, 255, 0.8), 0 0 4px rgba(74, 158, 255, 1), 0 0 20px rgba(74, 158, 255, 0.3);
            pointer-events: none;
            position: relative;
            z-index: 5;
        }

        .cursor-gap {
            display: inline-block;
            width: 2px;
            height: 28px;
            vertical-align: middle;
            cursor: text;
            position: relative;
            flex-shrink: 0;
            border-radius: 1px;
            padding: 0 2px;
            box-sizing: content-box;
        }

        .cursor-gap:hover {
            background: rgba(74, 158, 255, 0.25);
        }

        .cursor-gap:hover::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 4px;
            bottom: 4px;
            width: 2px;
            background: rgba(74, 158, 255, 0.5);
            border-radius: 1px;
            transform: translateX(-50%);
        }

        @media (max-width: 768px) {
            .cursor-gap {
                width: 2px;
                padding: 0 4px;
                height: 26px;
            }
        }

        .empty-state .composition-cursor {
            height: 24px;
            margin: 0 2px;
            display: inline-block;
            vertical-align: middle;
        }

        .empty-state {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        .measure-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 1px;
        }

        .row-break {
            width: 100%;
            height: 14px;
            flex-basis: 100%;
            position: relative;
            cursor: text;
            margin: 2px 0;
        }

        .row-break::after {
            content: '';
            position: absolute;
            left: 10%;
            right: 10%;
            top: 50%;
            border-top: 1px dashed rgba(0, 0, 0, 0.12);
        }

        .group-cursor {
            display: inline-block;
            width: 2px;
            height: 22px;
            background: #e67e22;
            border-radius: 1px;
            vertical-align: middle;
            animation: cursorBlink 1s step-end infinite;
            box-shadow: 0 0 6px rgba(230, 126, 34, 0.6);
            margin: 0 1px;
            flex-shrink: 0;
        }

        @keyframes cursorBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .empty-state {
            text-align: center;
            color: #999;
            padding: 60px 20px;
            font-size: 18px;
        }

        .selection-indicator {
            position: fixed;
            bottom: 80px;
            right: 20px;
            max-width: calc(100vw - 20px);
            box-sizing: border-box;
            background: #4a9eff;
            color: white;
            padding: 10px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 100;
            display: none;
            /* Purely informational — must never sit between a tap and the
               note/toolbar underneath it (it was blocking taps on mobile
               when anchored near the top of the screen). */
            pointer-events: none;
        }

        .selection-indicator.active {
            display: block;
        }

        .octave-indicator {
            margin-top: 5px;
            padding-top: 5px;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
            font-size: 11px;
        }

        @media (max-width: 768px) {
            .selection-indicator {
                bottom: 60px;
                right: 10px;
                font-size: 11px;
                padding: 8px 12px;
            }
        }

        /* Toggle switch */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
            flex-shrink: 0;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: #444;
            border-radius: 26px;
            transition: background 0.25s ease, box-shadow 0.25s ease;
        }

        .toggle-slider::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: transform 0.25s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }

        .toggle-switch input:checked + .toggle-slider {
            background: #4a9eff;
            box-shadow: 0 0 8px rgba(74, 158, 255, 0.4);
        }

        .toggle-switch input:checked + .toggle-slider::before {
            transform: translateX(22px);
        }

        .toggle-switch input:focus + .toggle-slider {
            box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.3);
        }

        .toggle-row {
            display: flex;
            align-items: center;
            gap: 24px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 10px;
            transition: background 0.2s;
            margin: 4px -12px;
        }

        .toggle-row:hover {
            background: rgba(74, 158, 255, 0.08);
        }

        .western-toggle-header {
            position: absolute;
            top: 12px;
            right: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .western-toggle-label {
            font-size: 12px;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        body.dark-mode .western-toggle-label {
            color: #7a8a9e;
        }

        .toggle-switch-sm {
            width: 40px;
            height: 22px;
        }

        .toggle-switch-sm .toggle-slider::before {
            width: 16px;
            height: 16px;
        }

        .toggle-switch-sm input:checked + .toggle-slider::before {
            transform: translateX(18px);
        }

        .toggle-row-info {
            flex: 1;
        }

        .toggle-row-title {
            font-size: 13px;
            font-weight: 600;
            color: #e0e0e0;
        }

        .toggle-row-desc {
            font-size: 11px;
            color: #888;
            margin-top: 2px;
        }

        .remark-box {
            background: #fffacd;
            border: 2px dashed #f0e68c;
            border-radius: 8px;
            padding: 12px 15px;
            margin: 8px 0;
            cursor: default;
            position: relative;
            width: 100%;
            box-sizing: border-box;
            flex-basis: 100%;
        }

        .remark-box textarea {
            width: 100%;
            min-height: 60px;
            border: none;
            background: transparent;
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
            outline: none;
        }

        .remark-box textarea:focus {
            outline: 2px solid #4a9eff;
            outline-offset: 2px;
            border-radius: 4px;
        }

        .remark-box .remove-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 3px;
            padding: 3px 8px;
            cursor: pointer;
            font-size: 11px;
            min-width: 28px;
            min-height: 28px;
        }

        @media (max-width: 768px) {
            .remark-box .remove-btn {
                min-width: 44px;
                min-height: 44px;
                font-size: 14px;
            }
        }

        /* Icon-only buttons whose visual size (kept small so they don't
           dominate a settings panel) is smaller than a comfortable touch
           target — pad the hit area out to ~44px on touch screens via a
           transparent border rather than growing the visible button. */
        #melodyMuteBtn, #droneMuteBtn, #tablaMuteBtn, .panel-close-btn {
            min-width: 32px;
            min-height: 32px;
        }
        @media (max-width: 768px) {
            #melodyMuteBtn, #droneMuteBtn, #tablaMuteBtn, .panel-close-btn {
                min-width: 44px;
                min-height: 44px;
                font-size: 20px !important;
            }
        }

        .bottom-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #252525;
            border-top: 1px solid #3a3a3a;
            padding: 15px 20px;
            max-height: 250px;
            overflow-y: auto;
            transition: transform 0.3s;
            z-index: 50;
        }

        .bottom-panel.hidden {
            transform: translateY(100%);
        }

        @media (max-width: 768px) {
            /* At 60vh, the palette you need open to type a note covered
               most of the screen, leaving almost no visible composition —
               you couldn't see what you were writing while writing it.
               overflow-y:auto on the base rule means anything that doesn't
               fit at the smaller height just scrolls within the panel
               instead of forcing the height back up. */
            .bottom-panel {
                max-height: 44vh;
                padding: 10px 15px;
            }
        }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .panel-header h3 {
            /* #4a9eff on the dark panel background is ~4.2:1, just under
               WCAG AA's 4.5:1. */
            color: #6aafff;
            font-size: 14px;
            text-transform: uppercase;
        }

        .panel-tabs {
            display: flex;
            gap: 5px;
            margin-bottom: 15px;
        }

        .panel-tab {
            background: #1a1a1a;
            color: #ccc;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            flex: 1;
            text-align: center;
            font-family: inherit;
        }

        .panel-tab.active {
            /* Same darker-blue fix as .toolbar-btn.primary — #4a9eff only
               gives white text 2.75:1 contrast against WCAG AA's 4.5:1. */
            background: #1f6fd1;
            color: white;
        }

        .panel-content {
            display: none;
        }

        .panel-content.active {
            display: block;
        }

        .notes-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
        }

        @media (max-width: 768px) {
            .notes-grid {
                grid-template-columns: repeat(7, 1fr);
                gap: 5px;
            }
        }

        /* Western labels ("C♯", "B♭") are wider than one sargam glyph; shrink
           the face slightly so it stays inside the key at every breakpoint. */
        .note-btn.western-face { font-size: 0.82em; letter-spacing: -0.02em; }

        .note-btn {
            background: #1a1a1a;
            color: white;
            border: 1px solid #3a3a3a;
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s;
            position: relative;
            touch-action: manipulation;
        }

        @media (max-width: 768px) {
            .note-btn {
                padding: 14px 8px;
                font-size: 16px;
                font-weight: 700;
                border-radius: 8px;
                min-height: 46px;
            }
        }

        .note-btn:hover {
            background: #4a9eff;
            border-color: #4a9eff;
        }

        /* The actual note-entry buttons — the single most-tapped control in
           the whole app — had zero press feedback, only :hover (which never
           fires on a touch tap in the first place). */
        .note-btn:active {
            transform: scale(0.92);
            background: #3a8eef;
        }

        .note-btn.flat {
            text-decoration: underline;
        }

        .note-btn.shift-toggle {
            font-size: 16px;
            transition: all 0.15s;
        }

        .note-btn.shift-toggle.active {
            background: #e67e22;
            border-color: #e67e22;
            color: white;
            box-shadow: 0 0 12px rgba(230, 126, 34, 0.5);
        }

        .note-btn.spacebar-btn {
            grid-column: span 2;
            border-radius: 6px;
            min-height: 38px;
            position: relative;
        }

        .note-btn.spacebar-btn::after {
            content: '';
            display: block;
            width: 50%;
            height: 3px;
            background: #666;
            border-radius: 2px;
            margin: 0 auto;
        }

        .note-btn.spacebar-btn:hover {
            border-color: #4a9eff;
        }

        .arrow-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 48px);
            gap: 6px;
            width: 100%;
        }

        .arrow-btn {
            font-size: 20px !important;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0 !important;
        }

        @media (max-width: 768px) {
            .arrow-grid {
                grid-template-rows: repeat(2, 34px);
                max-width: 180px;
                margin: 0 auto;
                gap: 4px;
            }
            .arrow-btn {
                font-size: 14px !important;
                min-height: 34px !important;
                padding: 0 !important;
            }
        }

        .note-btn.sharp::after {
            content: '−';
            position: absolute;
            top: 2px;
            right: 0;
            left: 0;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            transform: rotate(90deg);
        }

        .symbol-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 8px;
        }

        .ornament-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }

        @media (max-width: 768px) {
            .ornament-grid {
                gap: 5px;
            }
        }

        .symbol-btn {
            background: #1a1a1a;
            color: white;
            border: 1px solid #3a3a3a;
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
            text-align: center;
        }

        .symbol-btn:hover {
            background: #4a9eff;
            border-color: #4a9eff;
        }

        .status-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #1a1a1a;
            color: white;
            padding: 8px 20px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #3a3a3a;
        }

        @media (max-width: 768px) {
            .status-bar {
                font-size: 10px;
                padding: 6px 10px;
                flex-direction: column;
                gap: 4px;
                align-items: flex-start;
            }
        }

        .toast {
            position: fixed;
            top: 12px;
            right: 12px;
            background: #4a9eff;
            color: white;
            padding: 7px 14px;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
            display: none;
            animation: toastSlideIn 0.2s ease;
            z-index: 10000;
            font-size: 12px;
            max-width: 260px;
        }

        .toast.show {
            display: block;
        }

        .toast.error {
            background: #dc3545;
        }

        @keyframes toastSlideIn {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* display:none/flex can't be transitioned by CSS at all, so every
           modal in the app used to just snap into view with a hard cut —
           no fade, no sense of where it came from. Using opacity/visibility
           instead (with display kept at flex permanently, gated by
           pointer-events + visibility so the invisible overlay never
           intercepts clicks) makes the same .active toggle animatable. */
        .modal {
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.16s ease;
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .modal-content {
            background: #1a1a1a;
            color: white;
            padding: 30px;
            border-radius: 8px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            transform: scale(0.94) translateY(8px);
            transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
        }

        .modal.active .modal-content {
            transform: scale(1) translateY(0);
        }

        /* Drone/File panel popups used raw style.display = 'none'/'block'
           toggling in JS — same problem as .modal above, an instant snap
           with nothing animatable, since display can't be transitioned. */
        /* Compact mixer - see the panel markup for why. The body is capped
           to the viewport and scrolls, so no channel can end up unreachable
           below the fold on a phone. */
        .mixer-panel { width: 248px; padding: 12px 12px 10px; }
        .mixer-body { max-height: calc(100vh - 190px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
        .mixer-body::-webkit-scrollbar { width: 6px; }
        .mixer-body::-webkit-scrollbar-thumb { background: #3f3f3f; border-radius: 3px; }
        .mx-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
        .mx-mute { background: none; border: 1px solid #444; border-radius: 5px; color: #bbb;
                   cursor: pointer; font-size: 11px; width: 20px; height: 20px; flex-shrink: 0; line-height: 1; }
        .mx-label { color: #bbb; flex: 0 0 58px; font-size: 11px; }
        .mx-slider { flex: 1; min-width: 0; margin: 0; }
        .mx-sec { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
        .mx-sec-head { display: flex; align-items: center; justify-content: space-between;
                       gap: 8px; margin-bottom: 7px; color: #4a9eff; font-weight: 600; font-size: 11.5px; }
        .mx-go { padding: 4px 9px; border-radius: 5px; border: 1px solid rgba(74,158,255,0.4);
                 background: rgba(74,158,255,0.12); color: #7eb8ff; cursor: pointer;
                 font-family: inherit; font-size: 11px; white-space: nowrap; }
        .mx-more { margin-top: 4px; }
        .mx-more > summary { cursor: pointer; color: #8d8d8d; font-size: 10.5px; padding: 3px 0; list-style: none; }
        .mx-more > summary::before { content: '▸ '; }
        .mx-more[open] > summary::before { content: '▾ '; }
        .mx-sub { display: block; margin: 7px 0 3px; color: #bbb; font-size: 10.5px; }
        .mx-select { width: 100%; padding: 4px; background: #2a2a2a; color: #eee;
                     border: 1px solid #444; border-radius: 5px; font-family: inherit; font-size: 11px; }
        .mx-note { color: #888; font-size: 10px; display: block; margin-top: 5px; }
        /* On a phone the panel spans the width instead of being a narrow column
           pinned to one edge, which is what made the sliders fiddly to hit. */
        @media (max-width: 768px) {
            .mixer-panel { left: 10px; right: 10px; width: auto; }
            .mixer-body { max-height: calc(100vh - 210px); }
            .mx-mute { width: 26px; height: 26px; }
            .mx-label { flex: 0 0 64px; font-size: 12px; }
        }

        .floating-panel {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(-6px) scale(0.97);
            transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0.15s;
        }

        .floating-panel.panel-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0) scale(1);
        }

        @media (max-width: 768px) {
            .modal-content {
                padding: 20px;
                width: 95%;
            }
        }

        .modal-content h3 {
            color: #4a9eff;
            margin-bottom: 20px;
        }

        .share-link {
            background: #2d2d2d;
            padding: 15px;
            border-radius: 4px;
            word-break: break-all;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 12px;
        }

        .modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .export-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .toggle-btn {
            background: #3a3a3a;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
        }

        .toggle-btn:hover {
            background: #4a4a4a;
        }

        /* ── Beat / Matra brace ── */
        .beat-column {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            margin-right: 4px;
            vertical-align: middle;
            position: relative;
            padding-bottom: 18px;
        }

        .beat-notes-row {
            display: inline-flex;
            gap: 0px;
            align-items: center;
        }

        .beat-brace-row {
            display: flex;
            align-items: flex-start;
            position: absolute;
            bottom: 2px;
            left: 2px;
            right: 2px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            pointer-events: none;
        }

        .beat-brace-arm {
            flex: 1;
            height: 6px;
            min-width: 4px;
        }

        .beat-brace-arm-left {
            border-left: 1.5px solid rgba(100, 100, 100, 0.45);
            border-bottom: 1.5px solid rgba(100, 100, 100, 0.45);
            border-radius: 0 0 0 5px;
            margin-right: 2px;
        }

        .beat-brace-arm-right {
            border-right: 1.5px solid rgba(100, 100, 100, 0.45);
            border-bottom: 1.5px solid rgba(100, 100, 100, 0.45);
            border-radius: 0 0 5px 0;
            margin-left: 2px;
        }

        .beat-brace-label {
            color: rgba(100, 100, 100, 0.7);
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            padding: 0 2px;
            flex-shrink: 0;
            font-family: inherit;
            letter-spacing: 0.3px;
            transform: translateY(1px);
        }

        body.dark-mode .beat-brace-label {
            color: rgba(255, 255, 255, 0.35);
        }

        body.dark-mode .beat-brace-arm-left,
        body.dark-mode .beat-brace-arm-right {
            border-color: rgba(255, 255, 255, 0.2);
        }

        @media (max-width: 768px) {
            .beat-brace-arm { height: 5px; }
        }

        /* =====================================
            Apple / Notion-style Glass Layer
           ===================================== */

        h1, h2 { font-family: var(--nh-display-font, inherit); }
        :root {
            --glass-bg: rgba(255, 255, 255, 0.12);
            --glass-border: rgba(255, 255, 255, 0.22);
            --glass-strong: rgba(255, 255, 255, 0.18);
            --accent-blue: var(--nh-accent, #2d3c50);
            --accent-blue-strong: var(--nh-accent, #2d3c50);
            --text-soft: rgba(255, 255, 255, 0.88);
        }

        /* App background */
        body {
            background: radial-gradient(1200px 600px at top, #000000, #0f172a);
        }

        /* Top toolbar = floating glass */
        .toolbar {
            background: rgba(15, 23, 42, 0.72);
            backdrop-filter: blur(20px) saturate(150%);
            border-bottom: 1px solid var(--glass-border);
        }

        /* Buttons feel native */
        .toolbar-btn,
        .note-btn,
        .toggle-btn,
        .panel-tab {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
        }

        /* Primary = the one action you reach for constantly (Play) stands out.
           #4a9eff only gives white text 2.75:1 contrast — under WCAG AA's
           4.5:1 minimum. This darker shade of the same blue hits ~5.2:1. */
        .toolbar-btn.primary {
            background: #1f6fd1;
            border: 1px solid #1f6fd1;
            color: #fff;
            font-weight: 700;
        }

        .toolbar-btn.primary:hover {
            background: #1a5fb4;
            border-color: #1a5fb4;
        }

        /* Secondary = rarely-touched actions recede so Play/Palette read first */
        .toolbar-btn.secondary {
            opacity: 0.62;
        }

        .toolbar-btn.secondary:hover {
            opacity: 1;
        }

        /* Workspace = light canvas (default) */
        .workspace {
            background: linear-gradient(180deg, #f9fbff, #eef4ff);
        }

        /* Cards / sheets */
        .score-header,
        .measure-container {
            background: rgba(255, 255, 255, 0.92);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        @media (max-width: 768px) {
            .score-header,
            .measure-container {
                border-radius: 10px;
            }
        }

        /* Measures are subtle */
        .measure {
            background: rgba(200, 182, 150, 0.8);
            border-radius: 14px;
        }

        /* Notes feel tactile */
        .note {
            background: rgba(255, 255, 255, 0.55);
            border-radius: 10px;
        }

        .note:hover {
            background: rgba(106, 169, 255, 0.25);
        }

        .note.selected {
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-strong));
            box-shadow: 0 0 0 3px rgba(106, 169, 255, 0.35);
        }

        /* Bottom panel = Apple Music sheet */
        .bottom-panel {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(22px) saturate(160%);
            border-top-left-radius: 26px;
            border-top-right-radius: 26px;
        }

        /* Side panel = glass drawer */
        .side-panel {
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(24px) saturate(160%);
            border-right: 1px solid var(--glass-border);
        }

        /* Toasts look native */
        .toast {
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-strong));
            backdrop-filter: blur(12px);
            border-radius: 10px;
        }

        /* ====== DARK MODE ====== */
        body.dark-mode .workspace {
            background: linear-gradient(180deg, #1e2530, #171c26) !important;
        }

        body.dark-mode .score-header,
        body.dark-mode .measure-container {
            background: #1e2530 !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            color: #e0e6ed;
        }

        body.dark-mode .remark-box {
            background: rgba(45, 40, 25, 0.7) !important;
            border-color: rgba(200, 180, 80, 0.3);
            color: #e0e6ed;
        }

        body.dark-mode .measure {
            background: rgba(40, 50, 65, 0.6) !important;
            border-color: rgba(255, 255, 255, 0.15);
            border-right-color: rgba(255, 255, 255, 0.3);
        }

        body.dark-mode .measure.highlight-cycle-1 {
            background: rgba(38, 48, 62, 0.7) !important;
        }

        body.dark-mode .measure.highlight-cycle-2 {
            background: rgba(44, 54, 68, 0.7) !important;
        }

        body.dark-mode .measure.incomplete {
            background: rgba(60, 50, 30, 0.5) !important;
        }

        body.dark-mode .note {
            background: rgba(50, 60, 80, 0.55) !important;
            color: #e0e6ed !important;
        }

        body.dark-mode .note:hover {
            background: rgba(74, 158, 255, 0.3) !important;
        }

        body.dark-mode .note .sargam-text,
        body.dark-mode .sargam-text {
            color: #e0e6ed !important;
        }

        body.dark-mode .score-title,
        body.dark-mode .score-meta {
            color: #c0c8d4;
        }

        body.dark-mode .measure-number {
            /* Same contrast fix as the light-mode rule, lightened instead
               of darkened since this sits on a dark background. */
            color: #8a9bb0;
        }

        body.dark-mode .vibhaag {
            border-color: rgba(255, 255, 255, 0.3) !important;
        }

        body.dark-mode .brace-arm {
            border-color: rgba(230, 126, 34, 0.5);
        }

        body.dark-mode .row-break::after {
            border-top-color: rgba(255, 255, 255, 0.12);
        }

        body.dark-mode .empty-state {
            color: #6a7a8e;
        }

        body.dark-mode .remark-box textarea {
            background: rgba(20, 25, 35, 0.6);
            color: #c0c8d4;
            border-color: rgba(255, 255, 255, 0.1);
        }

        body.dark-mode .octave-dot {
            background: #c0c8d4 !important;
        }

        body.dark-mode .note-group-label {
            color: #e67e22;
        }

        body.dark-mode .ornament-indicator {
            color: #7eb8ff;
        }

        body.dark-mode .beat-group {
            border-color: rgba(255, 255, 255, 0.08);
        }

        body.dark-mode .selection-indicator {
            color: #c0c8d4;
        }

        body.dark-mode .western-note {
            color: #a0b0c0 !important;
        }

        body.dark-mode .line-tab {
            color: #c0c8d4;
        }

        body.dark-mode .note-group {
            background: rgba(40, 50, 65, 0.3);
        }

        /* Professional Sa / C toggle button */
        /* Sa/C toggle — same shape/colour as all other toolbar buttons */
        .western-toggle-btn {
            background: rgba(255, 255, 255, 0.10) !important;
            color: rgba(255, 255, 255, 0.90) !important;
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            padding: 6px 8px !important;
            border-radius: 7px !important;
            font-size: 11px !important;
            font-weight: 500 !important;
            letter-spacing: normal;
            min-width: unset;
        }

        .western-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.20) !important;
            border-color: rgba(255, 255, 255, 0.35) !important;
        }

        .western-toggle-btn.active {
            background: rgba(255, 255, 255, 0.10) !important;
            border-color: rgba(255, 255, 255, 0.18) !important;
            color: rgba(255, 255, 255, 0.90) !important;
            box-shadow: none;
        }

        /* Theme button — same shape/colour as all other toolbar buttons */
        .dark-mode-btn {
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: rgba(255, 255, 255, 0.90);
            padding: 6px 8px;
            border-radius: 7px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            text-align: center;
            font-family: inherit;
            transition: background 0.18s ease, border-color 0.18s ease;
            white-space: nowrap;
        }

        .dark-mode-btn:hover {
            background: rgba(255, 255, 255, 0.20);
            border-color: rgba(255, 255, 255, 0.35);
        }

        @media (max-width: 768px) {
            .dark-mode-btn {
                padding: 8px 6px;
                font-size: 11px;
            }
        }

        /* ── Duration strip buttons ─────────────────────────────── */
        .dur-btn {
            font-size: 12px;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.75);
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s, border-color 0.15s;
            white-space: nowrap;
        }
        .dur-btn:hover {
            background: rgba(255,255,255,0.14);
            border-color: rgba(255,255,255,0.3);
        }
        .dur-btn.active {
            background: rgba(74,158,255,0.22);
            border-color: rgba(74,158,255,0.6);
            /* #7eb8ff on this tinted background is ~4.05:1, just under
               WCAG AA's 4.5:1. */
            color: #92c5ff;
        }
        .dur-btn.tuplet {
            border-color: rgba(230,126,34,0.4);
            color: rgba(230,126,34,0.85);
        }
        .dur-btn.tuplet.active {
            background: rgba(230,126,34,0.2);
            border-color: rgba(230,126,34,0.7);
            color: #e67e22;
        }
        .dur-btn.once-armed {
            background: rgba(46,204,113,0.2);
            border-color: rgba(46,204,113,0.6);
            color: #2ecc71;
        }
        @media (max-width: 768px) {
            .dur-btn { font-size: 11px; padding: 5px 7px; }
        }

        /* Motion polish – scoped to interactive elements only */
        .note, .note-btn, .toolbar-btn, .dark-mode-btn, .symbol-btn, .panel-tab {
            transition:
                background-color 0.2s ease,
                box-shadow 0.2s ease;
        }


        /* ── Accuracy checker & assignments ───────────────────────────── */
        .nc-btn { border-color: rgba(155,120,255,0.55) !important; color: #d9ccff !important; background: rgba(155,120,255,0.12) !important; }
        .chk-btn { background: rgba(46,204,113,0.18) !important; border-color: rgba(46,204,113,0.55) !important; color: #7be3a6 !important; }
        /* Assignment mode is opt-in: its buttons stay out of the toolbar until the toggle is on. */
        .asg-only { display: none !important; }
        body.assign-mode .asg-only { display: inline-flex !important; }
        body.assign-mode .asg-only.asg-block { display: block !important; }
        .asg-toggle[aria-pressed="true"] { background: rgba(255,170,60,0.28) !important; border-color: rgba(255,170,60,0.8) !important; color: #ffd9a0 !important; }
        .asg-btn { background: rgba(255,170,60,0.16) !important; border-color: rgba(255,170,60,0.5) !important; color: #ffc27a !important; }
        .ns-modal-wide .modal-content { max-width: 560px; }
        .ns-field { width:100%; box-sizing:border-box; background:#111; color:#eee; border:1px solid #3a3a3a; border-radius:6px; padding:8px 10px; font-size:13px; font-family:inherit; }
        .ns-section-label { color:#4a9eff; font-size:11px; text-transform:uppercase; letter-spacing:1px; margin:12px 0 6px; }
        .ns-row { display:flex; align-items:center; gap:8px; background:#252525; border:1px solid #3a3a3a; border-radius:8px; padding:7px 10px; font-size:13px; }
        .ns-muted { color:#888; font-size:12px; }
        .chk-chips { display:flex; flex-wrap:wrap; gap:4px; max-height:150px; overflow-y:auto; margin-top:6px; }
        .chk-chip { font-family:inherit; min-width:34px; min-height:32px; text-align:center; padding:4px 6px; border-radius:6px; font-size:13px; font-weight:600; border:1px solid transparent; cursor:default; }
        .chk-chip.good { background:rgba(46,204,113,.22); border-color:rgba(46,204,113,.6); color:#7be3a6; }
        .chk-chip.ok   { background:rgba(255,193,7,.18);  border-color:rgba(255,193,7,.55);  color:#ffd666; }
        .chk-chip.miss { background:rgba(255,80,80,.18);  border-color:rgba(255,80,80,.55);  color:#ff8c8c; }
        .note.chk-good { box-shadow: 0 0 0 2px rgba(46,204,113,.85) inset !important; }
        .note.chk-ok   { box-shadow: 0 0 0 2px rgba(255,193,7,.85) inset !important; }
        .note.chk-miss { box-shadow: 0 0 0 2px rgba(255,80,80,.85) inset !important; }
        /* ── Assessment panel ─────────────────────────────────────────── */
        /* Assessment lives in the Info panel (second tab). Info normally covers the screen;
           while the Assessment tab is active the panel docks to the bottom as a sheet so the
           score stays visible and the lit notes can be followed. */
        .info-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
        .info-tabs { display: flex; gap: 6px; flex: 1; min-width: 0; }
        .info-tab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.06); color: #cbd5e1; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
        .info-tab.active { background: #1f6fd1; border-color: #1f6fd1; color: #fff; }
        body.asm-running .info-tab:not(.active) { opacity: .45; pointer-events: none; }
        #asmPanel { color: #e8edf5; font-size: 14px; box-sizing: border-box; }
        #asmPanel [hidden] { display: none !important; }
        body.asm-open .side-panel { top: auto; bottom: 0; height: auto; max-height: 58vh; max-height: 58dvh; padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
            background: #161b26; border-top: 1px solid #2f3a4d; border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.35); }
        body.asm-open .side-panel:not(.visible) { transform: translateY(105%); }
        body.asm-open .info-head { margin-bottom: 8px; }
        body.asm-open .workspace { padding-bottom: 60vh !important; padding-bottom: 60dvh !important; }
        .asm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .asm-title { flex: 1; font-weight: 700; font-size: 16px; min-width: 0; }
        .asm-head:has(#asmSub:empty) { display: none; }
        .asm-sub { font-weight: 400; color: #93a1b8; font-size: 12px; }
        .asm-pill { display: inline-block; font-size: 12px; background: rgba(255,170,60,.14); color: #ffc27a; border: 1px solid rgba(255,170,60,.4); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
        .asm-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #8796ad; margin-bottom: 4px; }
        .asm-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
        .asm-ctl { background: #1f2635; border: 1px solid #2f3a4d; border-radius: 10px; padding: 8px 10px; display: block; }
        .asm-ctl select, .asm-ctl input[type=range] { width: 100%; background: #111622; color: #e8edf5; border: 1px solid #3a4558; border-radius: 6px; padding: 5px; font-family: inherit; box-sizing: border-box; }
        .asm-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .asm-check input { width: 18px; height: 18px; }
        .asm-stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
        .asm-stepper button { width: 36px; height: 32px; border-radius: 8px; border: 1px solid #3a4558; background: #111622; color: #fff; font-size: 18px; cursor: pointer; }
        .asm-stepper b { font-size: 18px; } .asm-stepper small { font-size: 11px; color: #93a1b8; font-weight: 400; }
        .asm-hint { color: #93a1b8; font-size: 12.5px; margin: 10px 0 0; line-height: 1.5; }
        .asm-warn { color: #ff9b9b; }
        .asm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
        .asm-go { flex: 1 1 200px; min-height: 44px; border: none; border-radius: 10px; background: #1fa45a; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
        .asm-go:hover { background: #1b8f4f; }
        .asm-alt { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #3a4558; background: #1f2635; color: #dbe4f0; cursor: pointer; font-family: inherit; font-size: 13.5px; }
        .asm-alt small { color: #8796ad; }
        .asm-stage { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; align-items: stretch; }
        .asm-now, .asm-nextbox, .asm-pitch { background: #1f2635; border: 1px solid #2f3a4d; border-radius: 12px; padding: 8px 10px; text-align: center; position: relative; }
        .asm-now b { display: block; font-size: 44px; line-height: 1.1; color: #7be3a6; min-height: 48px; font-family: 'Playfair Display', Georgia, serif; }
        .asm-nextbox b { display: block; font-size: 28px; line-height: 1.5; color: #cbd5e1; min-height: 42px; font-family: 'Playfair Display', Georgia, serif; }
        .asm-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 800; color: #ffd666; background: #1f2635; border-radius: 12px; }
        .asm-count:empty { display: none; }
        .asm-meter { position: relative; height: 14px; background: linear-gradient(90deg, #5a2b2b, #5a4a2b 30%, #1f4d33 42%, #1f4d33 58%, #5a4a2b 70%, #5a2b2b); border-radius: 7px; margin: 10px 4px 6px; }
        .asm-meter i { position: absolute; top: -5px; width: 6px; height: 24px; margin-left: -3px; border-radius: 3px; background: #fff; transition: left .08s linear; }
        .asm-meter i.ok { background: #2ecc71; } .asm-meter i.near { background: #ffd666; } .asm-meter i.off { background: #ff6b6b; } .asm-meter i.idle { background: #59657a; }
        .asm-tune { font-size: 13px; color: #cbd5e1; min-height: 18px; }
        .asm-beats { display: flex; justify-content: center; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
        .asm-beats i { width: 12px; height: 12px; border-radius: 50%; background: #2f3a4d; transition: background .05s, transform .05s; }
        .asm-beats i.sam { box-shadow: 0 0 0 2px #ffd666 inset; }
        .asm-beats i.on { background: #2ecc71; transform: scale(1.3); }
        .asm-progress { height: 4px; background: #2f3a4d; border-radius: 2px; overflow: hidden; }
        .asm-progress i { display: block; height: 100%; width: 0; background: #2ecc71; }
        .asm-livemsg { flex: 1; color: #cbd5e1; font-size: 13px; }
        .asm-verdict { font-size: 15px; font-weight: 600; margin: 2px 0 10px; }
        .asm-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
        .asm-ring { --v: 0; --c: #ff6b6b; text-align: center; padding: 10px 4px; border-radius: 12px; background: #1f2635; border: 1px solid #2f3a4d; }
        .asm-ring.good { --c: #2ecc71; } .asm-ring.ok { --c: #ffd666; }
        .asm-ring b { display: block; font-size: 26px; color: var(--c); }
        .asm-ring span { font-size: 11px; text-transform: uppercase; color: #8796ad; letter-spacing: .5px; }
        .asm-advice { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; font-size: 13.5px; }
        .asm-advice li.jump { cursor: pointer; text-decoration: underline dotted #59657a; }
        .asm-legend { font-size: 12px; color: #8796ad; margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .asm-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
        .asm-legend i.good { background: #2ecc71; } .asm-legend i.ok { background: #ffc107; } .asm-legend i.miss { background: #ff5050; }
        body.asm-running .note.playing { transform: scale(1.12); background: rgba(46,204,113,.35) !important; border-color: #2ecc71 !important; box-shadow: 0 0 0 3px rgba(46,204,113,.45), 0 0 18px rgba(46,204,113,.5) !important; z-index: 2; }
        .note.asm-next { border-color: rgba(46,204,113,.55) !important; border-style: dashed !important; }
        .note.asm-focus { outline: 3px solid #4a9eff; outline-offset: 2px; }
        @media (max-width: 600px) {
            body.asm-open .side-panel { padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
            .asm-stage { grid-template-columns: 1fr 1fr; }
            .asm-pitch { grid-column: 1 / -1; }
            .asm-now b { font-size: 36px; } .asm-count { font-size: 38px; }
            .asm-controls { grid-template-columns: 1fr 1fr; }
            .asm-alt { flex: 1 1 auto; }
        }
        /* Toolbar isn't needed while assessing — give the score the room. */
        body.asm-open .toolbar-actions, body.asm-open .toolbar-collapse-btn { display: none !important; }
        /* Touch screens wider than the phone breakpoint (landscape phones, tablets) still need tappable toolbar buttons. */
        @media (pointer: coarse), (max-height: 500px) and (orientation: landscape) {
            .toolbar-btn { min-height: 36px; }
            #undoBtn, #redoBtn { min-height: 34px; }
        }
        /* Short screens (phones in landscape): compact panel so the lit note stays visible. */
        @media (max-height: 500px) {
            body.asm-open .side-panel { max-height: 58vh; padding-top: 6px; }
            body.asm-open .workspace { padding-top: 8px; }
            body.asm-open .info-head { margin-bottom: 4px; }
            #asmPanel .asm-hint { display: none; }
            body.asm-open .score-header { position: static; }
            .asm-stage { grid-template-columns: 1fr 1fr 2fr; gap: 6px; }
            .asm-now b { font-size: 30px; min-height: 34px; } .asm-nextbox b { font-size: 22px; min-height: 30px; line-height: 1.4; }
            .asm-count { font-size: 30px; }
            .asm-beats { margin: 6px 0 4px; }
            .asm-actions { margin-top: 8px; }
            .asm-go, .asm-alt { min-height: 38px; }
            .asm-rings b { font-size: 20px; }
        }

        /* ── Phone layout ─────────────────────────────────────────────────
           Mobile fixes that sit on top of the desktop rules above: nothing here applies
           above 768px wide (or to a landscape phone, which is only 390px tall), so the desktop toolbar/palette are untouched.
           - toolbar: one swipeable row of 44px buttons instead of three rows of 36px
             (the 5-column grid overflowed a 320px screen and ate ~30% of a 640px one)
           - every control is >= 44px; text fields are 16px so iOS does not zoom on focus
           - palette: tabs + Hide share a row, duration chips scroll sideways
           - floating menus sit under the (shorter) toolbar and scroll within the screen */
        @media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
            button, select, input, .note-btn { touch-action: manipulation; }
            input[type=range] { min-height: 44px; }
            .toolbar-header { min-height: 52px; }
            .toolbar-header .line-selector { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
            .toolbar-header .line-selector::-webkit-scrollbar { display: none; }
            .line-tab, .add-line-btn { flex: 0 0 auto; min-height: 44px; padding: 0 14px; font-size: 13px; }
            .toolbar-collapse-btn { display: none; } /* the toolbar is a single row now, nothing to collapse */
            #toolbarActions { display: flex !important; overflow-x: auto; gap: 6px; padding: 4px 10px 8px; scrollbar-width: none;
                -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
                -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
            #toolbarActions::-webkit-scrollbar { display: none; }
            #toolbarActions > * { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
            #toolbarActions > div.toolbar-btn { padding: 0; min-width: 96px; }
            body.asm-open #toolbarActions { display: none !important; } /* no Play/edit buttons while an assessment is up */
            #undoBtn, #redoBtn { font-size: 18px !important; min-height: 44px; min-width: 44px; }
            /* palette: tabs and Hide on one row; durations scroll instead of wrapping */
            .bottom-panel { display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 8px; max-height: 46vh; max-height: 46dvh; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
            .bottom-panel > * { flex: 0 0 100%; min-width: 0; }
            .bottom-panel > .panel-tabs { order: 1; flex: 1 1 0; margin-bottom: 8px; }
            .bottom-panel > .panel-header { order: 2; flex: 0 0 auto; margin-bottom: 8px; }
            .bottom-panel > :not(.panel-tabs):not(.panel-header) { order: 3; }
            .panel-header h3, #raagHint { display: none; }
            .panel-tab { min-height: 44px; font-size: 13px; }
            .toggle-btn { min-height: 44px; min-width: 64px; font-size: 13px; }
            #durationStrip > div:first-child { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
            #durBtns { flex-wrap: nowrap !important; flex: 0 0 auto !important; }
            .dur-btn { min-height: 44px; min-width: 44px; font-size: 13px; }
            #durCustomInput { width: 84px !important; min-height: 44px; font-size: 16px !important; }
            #durModeDefault, #durModeOnce { min-height: 44px; min-width: 52px; font-size: 12px !important; }
            .note-btn { min-height: 44px; padding: 8px; }
            .workspace { padding-bottom: 48vh; padding-bottom: 48dvh; }
            body:has(#bottomPanel.hidden) .workspace { padding-bottom: 24px; }
            /* Info panel */
            .side-panel { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
            .form-group input, .form-group select, .form-group #tapTempoBtn, .form-group #singaSaBtn { min-height: 44px; font-size: 16px; }
            .form-group input[type=range] { padding: 0; }
            .form-group #tapTempoBtn, .form-group #singaSaBtn { font-size: 14px !important; }
            .close-panel-btn { min-width: 44px; min-height: 44px; padding: 0 14px; }
            #sidePanel .form-group > button { min-height: 44px; }
            /* floating File / Mixer menus */
            #filePanel, #dronePanel { top: 112px !important; max-height: calc(100vh - 124px); max-height: calc(100dvh - 124px); overflow-y: auto; }
            #filePanel { right: 10px !important; width: min(280px, calc(100vw - 20px)) !important; }
            #filePanel button:not(.panel-close-btn) { min-height: 44px; font-size: 14px !important; }
            .mixer-body { max-height: none; overflow: visible; }
            .mx-go, .mixer-panel .mx-select { min-height: 44px; font-size: 14px; }
            .mixer-panel summary { min-height: 44px; display: flex; align-items: center; }
            /* modals: leave room for the on-screen keyboard and the notch */
            .modal-content { max-height: 90vh; max-height: 90dvh; }
            .modal input:not([type=checkbox]):not([type=radio]):not([type=range]), .modal select, .modal textarea, .ns-field { font-size: 16px !important; min-height: 44px; }
            .modal .toolbar-btn, .modal-buttons button { min-height: 44px; min-width: 44px; }
            .modal-buttons { flex-wrap: wrap; }
            /* assessment */
            .asm-stepper button { width: 44px; height: 44px; flex: none; }
            .asm-go, .asm-alt { min-height: 44px; }
            .panel-close-btn, .mx-mute, #melodyMuteBtn, #droneMuteBtn, #tablaMuteBtn { min-width: 44px; min-height: 44px; }
            .arrow-btn { min-height: 44px; }
            .ns-welcome-start, .ns-welcome-skip { min-height: 44px; }
            .asm-ctl select { min-height: 44px; font-size: 16px; }
            .asm-check input { width: 24px; height: 24px; }
            .chk-chip { min-width: 44px; min-height: 44px; }
            .asm-advice li { padding: 4px 0; }
        }
        @media (max-width: 360px) {
            .toolbar h1 { font-size: .9em; }
            .toolbar-header { gap: 6px; padding: 6px 8px; }
            .line-tab, .add-line-btn { padding: 0 10px; }
        }
        /* Phones on their side: one toolbar row, a compact palette, and the score stays visible. */
        @media (max-width: 1000px) and (max-height: 500px) {
            .toolbar { flex-direction: row; align-items: center; }
            .toolbar-header { flex: 0 1 auto; max-width: 46%; border-bottom: 0; padding-right: 0; }
            #toolbarActions { flex: 1 1 0; min-width: 0; padding-top: 4px; padding-bottom: 4px; }
            .score-header { position: static; }
            .workspace { padding-top: 8px; padding-bottom: 62vh; padding-bottom: 62dvh; }
            .bottom-panel { max-height: 62vh; max-height: 62dvh; padding-top: 8px; }
            .bottom-panel > .panel-tabs, .bottom-panel > .panel-header { margin-bottom: 6px; }
            #durStatusLine { display: none; }
            #notesPaletteGrid { grid-template-columns: repeat(14, 1fr); gap: 4px; }
            #notesPaletteGrid [onclick="addRowBreak()"], #notesPaletteGrid [onclick="backspace()"] { grid-column: span 2; }
            #notesPaletteGrid #shiftToggleBtn { grid-column: span 4 !important; }
            #notesPaletteGrid .spacebar-btn { grid-column: span 6 !important; }
            body.asm-open .side-panel { max-height: 68vh; max-height: 68dvh; }
            body.asm-open .workspace { padding-bottom: 70vh !important; padding-bottom: 70dvh !important; }
            .asm-stage { gap: 6px; }
            .asm-now, .asm-nextbox, .asm-pitch { padding: 4px 8px; }
            #filePanel, #dronePanel { top: 60px !important; max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); }
        }
        /* ── Accessibility ─────────────────────────────────────────────── */
        button:focus-visible, select:focus-visible, input:focus-visible,
        textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
            outline: 2px solid #7eb8ff !important;
            outline-offset: 2px;
            /* Buttons use `transition: all`, which faded the ring in over 200 ms
               (Firefox showed it at 0px for that long): show it at once. */
            transition: none !important;
        }
        .toolbar-btn.secondary { opacity: 0.82; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }