/* Player component — scoped under .student-page / .admin-page */


/* ==========================================================================
   6. Student Portal — AlphaTab / guitar player (.gp-*, .student-page)
   ========================================================================== */

.student-page .gp-player-panel {
    min-width: 0;
}

.student-page .gp-player-root {
    position: relative;
}

.student-page .gp-player-panel .gp-player-root > .at-main {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.student-page .gp-player-panel .at-main .gp-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-base);
    pointer-events: none;
    z-index: 1;
}

.student-page .gp-player-panel .at-main .gp-empty-state-welcome {
    margin: 0;
    font-size: var(--text-lg);
    /* Light notation surface — not dark-shell --text-main */
    color: #111111;
}

.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main .gp-empty-state-welcome {
    color: #ffffff;
}

.student-page .gp-player-panel .at-main .gp-empty-state-prompt,
.student-page .gp-player-panel .at-main .gp-empty-state-alt {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-muted);
}

.student-page .gp-player-panel .at-main .gp-empty-state-link {
    pointer-events: auto;
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.student-page .gp-player-panel .at-main .gp-empty-state-link:hover {
    color: var(--accent-hover);
}

.student-page .gp-player-panel .at-main .gp-empty-state[hidden] {
    display: none !important;
}

/* --- DARK MODE NOTATION --- */

.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main {
    background: #181818 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    /* Swap the black wash for a soft white wash in dark mode */
    --gp-bar-wash: rgba(255, 255, 255, 0.1) !important;
}

/* Dark notation: AlphaTab display.resources — CSS invert removed */

/* Safety net: chord grids (rect), bar lines, beams, slurs (stroke-first SVG geometry) */
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg path,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg line,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg polyline,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg rect,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg circle,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg polygon {
    stroke: #e6e6e6 !important;
}

.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg path,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg rect,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg circle,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg polygon {
    fill: #e6e6e6 !important;
}

.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg path[fill='none'],
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg rect[fill='none'] {
    fill: none !important;
}

.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode > .at-main svg text {
    fill: #e6e6e6 !important;
}

/* AlphaTab note highlight (.at-highlight) — parent invert would hide accents in dark mode */
.student-page .gp-player-panel .gp-player-root.gp-note-highlight-on .at-main .at-surface .at-highlight * {
    fill: var(--gp-playhead-beat, #0f766e) !important;
    stroke: var(--gp-playhead-beat, #0f766e) !important;
}

.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode.gp-note-highlight-on > .at-main .at-surface .at-highlight,
.student-page #student-dashboard .gp-player-panel .gp-player-root.gp-dark-mode.gp-note-highlight-on > .at-main .at-surface .at-highlight * {
    fill: var(--accent-primary, #2dd4bf) !important;
    stroke: var(--accent-primary, #2dd4bf) !important;
}

.student-page #student-dashboard .gp-player-panel .at-main {
    --gp-accent: #064e3b;
    --gp-accent-soft: rgba(6, 78, 59, 0.12);
    --gp-playhead-beat: #0f766e;
    --gp-playhead-glow: rgba(15, 118, 110, 0.55);
    /* Fixed mid-grey bar band; not tied to playhead colour */
    --gp-bar-wash: rgba(0, 0, 0, 0.14);
    width: 100%;
    --gp-notation-viewport-h: calc(100vh - var(--student-navbar-clearance, 74px) - 4.75rem) !important;
    height: var(--gp-notation-viewport-h);
    min-height: var(--gp-notation-viewport-h);
    max-height: var(--gp-notation-viewport-h);
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    background: #fdfdfd;
    color: #111111;
    padding: 1rem;
    -webkit-overflow-scrolling: touch;
}

/* Prefer dynamic viewport + svh caps when supported (mobile URL bar chrome) */

@supports (height: 100svh){
.student-page #student-dashboard .gp-player-panel .at-main {
        --gp-notation-viewport-h: calc(100svh - var(--student-navbar-clearance, 74px) - 4.75rem) !important;
    }
}

/* Playhead color presets (toolbar root `data-ph-color`) — match dashboard .at-main specificity */

.student-page #student-dashboard .gp-player-panel .gp-player-root[data-ph-color='orange'] .at-main {
    --gp-playhead-beat: #ea580c;
    --gp-playhead-glow: rgba(234, 88, 12, 0.55);
}

.student-page #student-dashboard .gp-player-panel .gp-player-root[data-ph-color='lime'] .at-main {
    --gp-playhead-beat: #65a30d;
    --gp-playhead-glow: rgba(101, 163, 13, 0.55);
}

.student-page #student-dashboard .gp-player-panel .gp-player-root[data-ph-color='black'] .at-main {
    --gp-playhead-beat: #171717;
    --gp-playhead-glow: rgba(0, 0, 0, 0.6);
}

/* Custom cursor + active measure + selection (alphaTab surfaces) */

.student-page .gp-player-panel .at-cursor-bar {
    background: var(--gp-bar-wash) !important;
    transition:
        background-color 0.12s linear,
        opacity 0.12s linear;
    z-index: 1;
}

.student-page .gp-player-root.gp-hide-bar-highlight .at-cursor-bar {
    opacity: 0 !important;
    pointer-events: none;
}

/*
 * Beat cursor: alphaTab sets a wide div + transform: scale(...) for sub-pixel accuracy.
 * Never override width/height with !important — that breaks the scale math and the line
 * nearly vanishes, letting the green .at-cursor-bar show through.
 */

.student-page .gp-player-panel .at-main .at-cursors .at-cursor-beat,
.student-page .gp-player-panel .at-cursor-beat {
    z-index: 2;
    background: var(--gp-playhead-beat) !important;
    background-color: var(--gp-playhead-beat) !important;
    background-image: none !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
    /* Normal: hairline vs Bold (outline only, no halo) */
    outline: thin solid var(--gp-playhead-beat) !important;
    outline-offset: 0;
    box-shadow: none !important;
    filter: none !important;
}

/* Bold beats base beat-cursor rules (same specificity as base + `.gp-player-root.gp-playhead-strong`). */

.student-page .gp-player-panel .gp-player-root.gp-playhead-strong .at-main .at-cursors .at-cursor-beat,
.student-page .gp-player-panel .gp-player-root.gp-playhead-strong .at-cursor-beat {
    outline: 4px solid var(--gp-playhead-beat) !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Karaoke: beat cursor reads clearly above parchment / bar wash while scrolling horizontally (all viewports) */

.student-page .gp-player-panel .gp-player-root[data-gp-karaoke-playhead='1'] .at-main .at-cursors {
    z-index: 12;
    position: relative;
}

.student-page .gp-player-panel .gp-player-root[data-gp-karaoke-playhead='1'] .at-main .at-cursors .at-cursor-beat,
.student-page .gp-player-panel .gp-player-root[data-gp-karaoke-playhead='1'] .at-cursor-beat {
    z-index: 13;
    outline-width: 2px !important;
    filter: none !important;
}

.student-page .gp-player-panel .gp-player-root[data-gp-karaoke-playhead='1'].gp-playhead-strong .at-main .at-cursors .at-cursor-beat,
.student-page .gp-player-panel .gp-player-root[data-gp-karaoke-playhead='1'].gp-playhead-strong .at-cursor-beat {
    filter: none !important;
}

.student-page .gp-player-panel .gp-player-root[data-gp-karaoke-playhead='1'].gp-hide-bar-highlight .at-cursor-bar {
    z-index: 0;
}

.student-page .gp-player-panel .at-selection div {
    background: rgba(6, 78, 59, 0.18) !important;
}

.student-page .gp-player-panel .at-main * {
    color: inherit;
}

.student-page .gp-audio {
    display: none;
}

/* Notation + fretboard fused when fretboard is shown */

.student-page #student-dashboard .gp-player-panel .gp-player-root[data-gp-fretboard-visible='1'] > .at-main {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
}

/* Virtual fretboard (AlphaTab sync); hidden until user toggles */

.student-page #student-dashboard .gp-player-panel .gp-fretboard-wrap {
    position: relative;
    margin-top: 0 !important;
    width: 100%;
    max-width: 100%;
    border-radius: 6px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    background: #222 !important;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.student-page .gp-player-panel .gp-fretboard-hand-toggle {
    position: absolute;
    top: 2px !important;
    left: 2px !important;
    transform: scale(0.85);
    transform-origin: top left;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    opacity: 0.92;
}

.student-page .gp-player-panel .gp-fretboard-hand-toggle.is-on {
    border-color: #2dd4bf;
    color: #2dd4bf;
    outline: 2px solid rgba(45, 212, 191, 0.35);
    outline-offset: 1px;
}

.student-page .gp-player-panel .gp-fretboard-wrap-hidden {
    display: none;
}

.student-page .gp-player-panel .gp-fretboard-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: clamp(8rem, 25vh, 16rem);
    box-sizing: border-box;
    position: relative;
}

.student-page .gp-player-panel .gp-fretboard-svg {
    display: block;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    transform: translateY(-12px);
    margin-bottom: -12px;
}

.student-page .gp-player-panel .gp-fretboard-board {
    fill: var(--bg-base);
    stroke: var(--bg-surface-light);
    stroke-width: 0.5;
}

.student-page .gp-player-panel .gp-fretboard-nut {
    stroke: #f1f5f9;
    stroke-width: 3;
    stroke-linecap: square;
}

.student-page .gp-player-panel .gp-fretboard-fret {
    stroke: rgba(148, 163, 184, 0.55);
    stroke-width: 0.9;
}

.student-page .gp-player-panel .gp-fretboard-string {
    stroke: rgba(226, 232, 240, 0.35);
    stroke-width: 1.2;
}

.student-page .gp-player-panel .gp-fretboard-dot {
    fill: #2dd4bf;
    stroke: #06302c;
    stroke-width: 0.35;
}

.student-page .gp-player-panel .gp-fretboard-dot-open {
    fill: none;
    stroke: #2dd4bf;
    stroke-width: 1.8;
}

.student-page .gp-player-panel .gp-fretboard-inlay {
    fill: rgba(148, 163, 184, 0.35);
    stroke: none;
}

/* Badges: dark fill so note letters read clearly (not same teal as plain playback dots). */

.student-page .gp-player-panel .gp-fretboard-note-circle-filled {
    fill: #0f172a;
    stroke: #2dd4bf;
    stroke-width: 1.15;
}

.student-page .gp-player-panel .gp-fretboard-note-circle-open {
    fill: rgba(15, 23, 42, 0.35);
    stroke: #2dd4bf;
    stroke-width: 2;
}

.student-page .gp-player-panel .gp-fretboard-svg text.gp-fretboard-note-text {
    font-family: "Noto Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
    fill: #ffffff;
    stroke: #020617;
    stroke-width: 0.35px;
    paint-order: stroke fill;
}

/* Command Center transport bar */

.student-page .gp-player-root > .gp-cmd {
    z-index: 500;
    isolation: isolate;
}

.student-page .gp-cmd {
    margin-top: 0.25rem !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: var(--border-radius);
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
    border: 1px solid var(--bg-surface-light);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
}

.student-page .gp-cmd.gp-cmd--layout-dashboard {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.student-page .gp-cmd--layout-dashboard .gp-cmd-row,
.student-page .gp-cmd--layout-dashboard .gp-cmd-bottom-right {
    display: contents;
}

.student-page .gp-cmd--layout-dashboard .gp-display-menu-host,
.student-page .gp-cmd--layout-dashboard .gp-metro-menu-host,
.student-page .gp-cmd--layout-dashboard .gp-tools-menu-host {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.student-page .gp-cmd.gp-cmd--layout-dashboard:has(
    .gp-display-pop.is-open,
    .gp-metro-pop.is-open,
    .gp-tools-pop.is-open
) {
    overflow: visible;
}

.student-page .gp-cmd--layout-dashboard .gp-cmd-row-top .gp-cmd-title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

.student-page .gp-cmd--layout-dashboard .gp-bpm {
    flex: 0 1 auto;
    min-width: 0;
}

@media (max-width: 1023px) {
.student-page .gp-cmd--layout-dashboard .gp-cmd-title {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
.student-page .gp-display-pop.is-open,
    .student-page .gp-metro-pop.is-open,
    .student-page .gp-tools-pop.is-open {
        position: fixed !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        top: auto !important;
        bottom: 6rem !important;
        z-index: 1000 !important;
        max-height: min(72vh, 520px) !important;
    }
}

.student-page .gp-bpm-range {
    width: 140px;
    max-width: 42vw;
    accent-color: #94cbfb;
}

.student-page .gp-cmd-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem;
}

.student-page .gp-cmd-transport {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

/* Title + time share one row with transport; ellipsis when space is tight */

.student-page .gp-cmd-left > .gp-cmd-title {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

.student-page .gp-cmd-right {
    flex: 0 0 auto;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.student-page .gp-cmd-title {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}

.student-page .gp-cmd-time {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-top: 0;
    white-space: nowrap;
}

.student-page .gp-icon-btn {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
    border: 1px solid var(--bg-surface-light);
    color: var(--text-main);
    border-radius: 999px;
    cursor: pointer;
    margin: 0;
    transition: background 0.15s, border-color 0.15s, transform 0.06s;
}

.student-page .gp-icon-btn:hover {
    background: var(--bg-surface-light);
}

.student-page .gp-icon-btn:active {
    transform: scale(0.96);
}

.student-page .gp-play-btn {
    width: 2.4rem !important;
    height: 2.4rem !important;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #0f172a;
}

.student-page .gp-play-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.student-page .gp-fretboard-btn,
.student-page .gp-metro-btn {
    width: 2.8rem !important;
    height: 2.8rem !important;
}

.student-page .gp-fretboard-btn svg,
.student-page .gp-metro-btn svg {
    width: 22px !important;
    height: 22px !important;
}

.student-page .gp-cmd svg,
.student-page .gp-tools-pop svg {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
}

.student-page .gp-play-btn svg {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.student-page .gp-icon-btn svg {
    stroke: currentColor;
}

.student-page .gp-repeat-btn.is-on,
.student-page .gp-metro-btn.is-on,
.student-page .gp-fretboard-btn.is-on {
    border-color: #2dd4bf;
    color: #2dd4bf;
    outline: 2px solid rgba(45, 212, 191, 0.35);
    outline-offset: 1px;
}

.student-page .gp-metro {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.student-page .gp-tools-menu-host {
    display: none;
}

.student-page .gp-metro-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transform: scale(1);
    transition: background 0.08s, transform 0.08s;
}

.student-page .gp-metro-dot.is-pulse {
    animation: gp-pulse 0.18s ease-out;
}

.student-page .gp-metro-vol,
.student-page .gp-vol-slider {
    width: 90px;
    accent-color: var(--accent-primary);
    margin: 0;
}

.student-page .gp-vol-muted .gp-vol-slider {
    accent-color: var(--text-muted);
}

.student-page .gp-vol {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
}

.student-page .gp-vol-popover-row {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.15rem;
}

.student-page .gp-vol-popover-row .gp-vol-slider {
    flex: 1 1 auto;
    min-width: 8rem;
    width: auto;
}

.student-page .gp-vol-label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    user-select: none;
    flex-shrink: 0;
}

.student-page .gp-vol-mute-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    color: inherit;
}

.student-page .gp-vol-mute-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-secondary) 70%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

.student-page .gp-vol-mute-btn svg {
    display: block;
}

.student-page .gp-bpm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.student-page .gp-bpm-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    margin: 0;
}

.student-page .gp-bpm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.student-page .gp-bpm-display {
    min-width: 5.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    font-size: 0.9rem;
    user-select: none;
}

.student-page .gp-load-error {
    margin-top: 0.75rem;
    color: var(--error);
    font-size: 0.9rem;
}

/* Display settings gear + popover (anchored above host on the right side of the bar) */

.student-page .gp-display-menu-host {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    z-index: 2;
}

.student-page .gp-display-menu-host[hidden] {
    display: none !important;
}

/* Sliders / filter-style opener for notation display popover */

.student-page .gp-display-menu-trigger {
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.192);
    cursor: pointer;
    box-sizing: border-box;
    transition:
        border-color 0.3s,
        background-color 0.3s,
        transform 0.06s,
        outline-color 0.15s;
    background-color: transparent;
    color: var(--text-muted);
}

.student-page .gp-display-menu-trigger:focus {
    outline: none;
}

.student-page .gp-display-menu-trigger:focus-visible {
    outline: 2px solid var(--text-main);
    outline-offset: 2px;
}

.student-page .gp-display-menu-trigger svg {
    height: 16px;
    width: auto;
    display: block;
    fill: currentColor;
    color: inherit;
    transition:
        fill 0.3s,
        color 0.3s;
}

.student-page .gp-display-menu-trigger:hover {
    border-color: rgba(0, 0, 0, 0.35);
    background-color: rgb(59, 59, 59);
    color: #ffffff;
}

.student-page .gp-display-menu-trigger:active {
    transform: scale(0.97);
}

.student-page .gp-display-menu-trigger.is-active,
.student-page .gp-display-menu-trigger.is-active:hover {
    border-color: rgba(0, 0, 0, 0.35);
    background-color: rgb(59, 59, 59);
    color: #ffffff;
}

.student-page .gp-display-pop {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(26rem, calc(100vw - 2rem));
    max-height: min(72vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem 0.95rem;
    border-radius: var(--border-radius);
    background: var(--card-bg, var(--bg-base));
    color: var(--text-main);
    border: 1px solid var(--bg-surface-light);
    z-index: 510;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        transform 0.14s ease,
        visibility 0s linear 0.14s;
}

.student-page .gp-display-pop.is-open {
    z-index: 520;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        transform 0.14s ease,
        visibility 0s linear 0s;
}

/* --- Live Slider Adjustment Transparency --- */

.student-page .gp-display-pop.is-open.is-adjusting-slider {
    opacity: 0.25 !important;
}

/* Metronome drop-up (anchored above icon + pulse dot) */

.student-page .gp-metro-menu-host {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    z-index: 4;
}

.student-page .gp-metro-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.student-page .gp-metro-pop {
    position: absolute;
    right: 0;
    left: auto;
    bottom: calc(100% + 10px);
    width: min(18rem, calc(100vw - 1.25rem));
    padding: 0.75rem 0.85rem;
    border-radius: var(--border-radius);
    background: var(--card-bg, var(--bg-base));
    color: var(--text-main);
    border: 1px solid var(--bg-surface-light);
    z-index: 515;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        visibility 0s linear 0.14s;
}

.student-page .gp-metro-pop.is-open {
    z-index: 525;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        visibility 0s linear 0s;
}

.student-page .gp-metro-pop .gp-metro-pop-toggle-row {
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.student-page .gp-metro-pop .gp-metro-pop-beat-row {
    margin-bottom: 0.45rem;
}

.student-page .gp-metro-pop .gp-metro-pop-vol-row {
    margin-bottom: 0;
}

.student-page .gp-metro-pop .gp-metro-pop-vol {
    width: 100%;
    min-width: 0;
    max-width: 14rem;
    justify-self: end;
}

.student-page .gp-metro-pop select.gp-display-select {
    min-width: 8.75rem;
    max-width: 100%;
    padding: 0.35rem 0.45rem;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 0.82rem;
    border-radius: var(--border-radius);
    background: var(--bg-base);
    color: var(--text-main);
    border: 1px solid var(--bg-surface-light);
}

.student-page .gp-metro-pop select.gp-display-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-style: dashed;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
}

.student-page .gp-metro-pop .gp-display-grid-row label {
    color: var(--text-muted);
    line-height: 1.35;
}

.student-page .gp-display-pop-head {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin: -0.2rem 0 0.35rem 0;
}

.student-page .gp-display-close {
    margin: 0;
    padding: 0.1rem 0.4rem;
    line-height: 1;
    font-size: 1.45rem;
    font-weight: 400;
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.student-page .gp-display-close:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.06);
}

.student-page .gp-display-chord-lab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.student-page .gp-display-chord-lab-title {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.student-page .gp-display-chord-lab svg {
    display: block;
    flex-shrink: 0;
    color: var(--text-muted);
}

.student-page .gp-display-tab-lab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.student-page .gp-display-tab-lab-title {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.student-page .gp-display-tab-lab svg {
    display: block;
    flex-shrink: 0;
    color: var(--text-muted);
}

.student-page .gp-display-chord-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.student-page .gp-display-chord-btn[aria-pressed='true'] {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    color: var(--text-main);
    font-weight: 600;
}

.student-page .gp-display-chord-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.32rem 0.42rem !important;
    font-size: 0.73rem !important;
    line-height: 1.2;
}

.student-page .gp-display-pop h4 {
    margin: 0 0 0.65rem 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.02em;
}

.student-page .gp-display-acc {
    margin: 0;
    padding: 0;
    border: 1px solid var(--bg-surface-light);
    border-radius: calc(var(--border-radius) * 0.85);
    background: rgba(255, 255, 255, 0.04);
    overflow: clip;
}

.student-page .gp-display-acc:has(.gp-display-scroll-mode-row) {
    overflow: visible;
}

.student-page .gp-display-acc + .gp-display-acc {
    margin-top: 0.5rem;
}

.student-page .gp-display-acc summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    user-select: none;
}

.student-page .gp-display-acc-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
}

.student-page .gp-display-acc summary::-webkit-details-marker {
    display: none;
}

.student-page .gp-display-acc summary::before {
    content: none;
    display: none;
}

.student-page .gp-display-acc summary::after {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    width: 0.38rem;
    height: 0.38rem;
    margin-inline-start: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.65;
    transform: rotate(45deg) translateY(-0.05rem);
    vertical-align: middle;
}

.student-page .gp-display-acc[open] summary::after {
    transform: rotate(-135deg) translateY(0.18rem);
}

.student-page .gp-display-acc .gp-display-acc-body {
    padding: 0.45rem 0.55rem 0.7rem;
    border-top: 1px solid var(--bg-surface-light);
}

.student-page .gp-display-grid-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 0.65rem;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.86rem;
}

.student-page .gp-display-grid-row:last-child {
    margin-bottom: 0;
}

.student-page .gp-display-pop .gp-display-stretch-row {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.student-page .gp-display-pop .gp-display-stretch-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.student-page .gp-display-pop .gp-display-stretch-head-end {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.student-page .gp-display-pop .gp-display-stretch-reset {
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--bg-surface-light);
    background: var(--bg-surface);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.student-page .gp-display-pop .gp-display-stretch-reset:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.student-page .gp-display-pop .gp-display-stretch-reset:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.student-page .gp-display-pop .gp-display-stretch-head > span:first-child svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.student-page .gp-display-pop .gp-display-stretch-reset svg {
    display: block;
    margin: 0;
    flex-shrink: 0;
}

.student-page .gp-display-pop .gp-display-stretch-slider {
    width: 100%;
    height: 0.45rem;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    background: var(--bg-surface-light);
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--accent-primary);
}

.student-page .gp-display-pop .gp-display-stretch-slider::-webkit-slider-runnable-track {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--bg-surface-light);
}

.student-page .gp-display-pop .gp-display-stretch-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: calc((0.45rem - 1.1rem) / 2);
    border-radius: 50%;
    background: var(--accent-primary);
    border: 2px solid var(--bg-base);
    cursor: pointer;
}

.student-page .gp-display-pop .gp-display-stretch-slider::-moz-range-thumb {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--accent-primary);
    border: 2px solid var(--bg-base);
    cursor: pointer;
}

.student-page .gp-display-pop .gp-display-stretch-slider::-moz-range-track {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--bg-surface-light);
}

.student-page .gp-display-pop .gp-display-stretch-slider::-moz-range-progress {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--accent-primary);
}

.student-page .gp-display-hint {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.38;
}

.student-page .gp-display-grid-row label {
    color: var(--text-muted);
    line-height: 1.35;
}

.student-page .gp-display-pop select.gp-display-select {
    min-width: 8.75rem;
    max-width: 100%;
    padding: 0.35rem 0.45rem;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 0.82rem;
    border-radius: var(--border-radius);
    background: var(--bg-base);
    color: var(--text-main);
    border: 1px solid var(--bg-surface-light);
}

.student-page .gp-display-pop select.gp-display-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-style: dashed;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
}

.student-page .gp-display-row-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.86rem;
}

.student-page .gp-display-row-check:last-child {
    margin-bottom: 0;
}

.student-page .gp-display-row-check label:not(.switch) {
    flex: 1;
    color: var(--text-muted);
    line-height: 1.35;
}

/* Scroll Mode row + toggle (scoped — matches provided switch design) */

.student-page .gp-display-pop .gp-display-scroll-mode-row {
    align-items: center;
    gap: 0.65rem;
}

.student-page .gp-display-pop .gp-display-scroll-mode-label-col,
.student-page .gp-metro-pop .gp-display-scroll-mode-label-col {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
}

.student-page .gp-display-pop .gp-display-scroll-mode-title,
.student-page .gp-metro-pop .gp-display-scroll-mode-title {
    display: block;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.35;
    font-weight: 400;
    cursor: pointer;
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch {
    /* switch */
    --switch-width: 46px;
    --switch-height: 24px;
    --switch-bg: rgb(131, 131, 131);
    --switch-checked-bg: rgb(0, 218, 80);
    --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
    --switch-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
    /* circle */
    --circle-diameter: 18px;
    --circle-bg: #fff;
    --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
    --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
    --circle-transition: var(--switch-transition);
    /* icon */
    --icon-transition: all 0.2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
    --icon-cross-color: var(--switch-bg);
    --icon-cross-size: 6px;
    --icon-checkmark-color: var(--switch-checked-bg);
    --icon-checkmark-size: 10px;
    /* effect line */
    --effect-width: calc(var(--circle-diameter) / 2);
    --effect-height: calc(var(--effect-width) / 2 - 1px);
    --effect-bg: var(--circle-bg);
    --effect-border-radius: 1px;
    --effect-transition: all 0.2s ease-in-out;

    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    vertical-align: middle;
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch input,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch input {
    display: none;
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch svg,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch svg {
    -webkit-transition: var(--icon-transition);
    -o-transition: var(--icon-transition);
    transition: var(--icon-transition);
    position: absolute;
    height: auto;
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch .checkmark,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch .checkmark {
    width: var(--icon-checkmark-size);
    max-width: 60%;
    max-height: 60%;
    color: var(--icon-checkmark-color);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch .cross,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch .cross {
    width: var(--icon-cross-size);
    max-width: 55%;
    max-height: 55%;
    color: var(--icon-cross-color);
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch .slider,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch .slider {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg);
    border-radius: 999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-transition: var(--switch-transition);
    -o-transition: var(--switch-transition);
    transition: var(--switch-transition);
    cursor: pointer;
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch .circle,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch .circle {
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    background: var(--circle-bg);
    border-radius: inherit;
    border: 1px solid rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: var(--circle-transition);
    -o-transition: var(--circle-transition);
    transition: var(--circle-transition);
    z-index: 1;
    position: absolute;
    left: var(--switch-offset);
    top: var(--switch-offset);
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch .slider::before,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch .slider::before {
    content: "";
    position: absolute;
    width: var(--effect-width);
    height: var(--effect-height);
    left: calc(var(--switch-offset) + (var(--effect-width) / 2));
    background: var(--effect-bg);
    border-radius: var(--effect-border-radius);
    -webkit-transition: var(--effect-transition);
    -o-transition: var(--effect-transition);
    transition: var(--effect-transition);
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch input:checked + .slider,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch input:checked + .slider {
    background: var(--switch-checked-bg);
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch input:checked + .slider .checkmark,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch input:checked + .slider .checkmark {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch input:checked + .slider .cross,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch input:checked + .slider .cross {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch input:checked + .slider::before,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch input:checked + .slider::before {
    left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch input:checked + .slider .circle,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch input:checked + .slider .circle {
    left: calc(100% - var(--circle-diameter) - var(--switch-offset));
    border-color: rgba(0, 0, 0, 0.16);
}

.student-page .gp-display-pop .gp-scroll-mode-switch.switch input:focus-visible + .slider,
.student-page .gp-metro-pop .gp-scroll-mode-switch.switch input:focus-visible + .slider {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.student-page .gp-display-pop input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}

@media (max-width: 720px){
.student-page .gp-cmd {
        gap: 0.38rem;
        padding: 0.42rem 0.48rem;
    }

.student-page .gp-cmd-title {
        display: none !important;
    }

.student-page .gp-cmd-right {
        gap: 0.45rem;
    }

.student-page .gp-bpm-display {
        min-width: 4rem;
        font-size: 0.8rem;
    }

.student-page .gp-icon-btn {
        width: 2.2rem !important;
        height: 2.2rem !important;
    }

.student-page .gp-play-btn {
        width: 2.6rem !important;
        height: 2.6rem !important;
    }

/* Hide tools on main bar for mobile (when nodes are not in .gp-tools-pop) */

.student-page .gp-tools-mobile-hide {
        display: none !important;
    }

.student-page .gp-tools-menu-host {
        position: relative;
        display: block;
    }

/* New Tools Drop-up Menu CSS */

.student-page .gp-tools-pop {
        position: absolute;
        bottom: calc(100% + 10px);
        right: -10px;
        background: var(--bg-surface);
        border: 1px solid var(--bg-surface-light);
        padding: 1rem;
        border-radius: var(--border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        z-index: 950;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.5);
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.2s ease;
    }

.student-page .gp-tools-pop.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

.student-page .gp-metro-pop .gp-metro-pop-vol {
        max-width: 100%;
    }

.student-page .gp-vol-slider {
        width: 70px;
    }
}

@media (max-width: 480px){
.student-page .gp-vol-slider {
        width: 56px;
    }

.student-page .gp-cmd-transport {
        gap: 0.35rem;
    }

/* Last resort horizontal scroll rather than stacking */

.student-page .gp-cmd {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px){
.student-page .gp-player-panel .at-main {
        font-size: 0.9rem;
    }
}


/* Desktop: BPM/fretboard on command bar — wrench menu is redundant */

@media (min-width: 721px) {
.student-page .gp-tools-menu-host .gp-tools-menu-trigger {
        display: none !important;
    }
}

/* ==========================================================================
   8. Media — Desktop AlphaTab layout (min-width: 769px; student player)
   ========================================================================== */

@media (min-width: 769px){
/* 1. Lock the Root Container Height */

.student-page .gp-player-root {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - var(--student-navbar-clearance, 74px) - 1rem) !important;
        overflow: hidden !important;
    }

.student-page .gp-player-root:has(
        .gp-display-pop.is-open,
        .gp-metro-pop.is-open,
        .gp-tools-pop.is-open
    ) {
        overflow: visible !important;
    }

/* 2. Let the sheet flex to fill available space */

.student-page .gp-player-panel .at-main {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

/* 3. Dock Fretboard below sheet (and hide its ghost footprint when closed) */

.student-page .gp-player-panel .gp-fretboard-wrap {
        position: static !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
    }

.student-page .gp-player-panel .gp-fretboard-wrap.gp-fretboard-wrap-hidden {
        display: none !important; /* Forces the gap to collapse completely when hidden */
    }

/* 4. Dock Control Panel at the very bottom */

.student-page .gp-cmd {
        position: static !important;
        order: 3 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 0 !important;
    }

/* 5. Strip the wrapper and hide text on Desktop */

.student-page .gp-tools-row {
        display: contents !important; /* Completely removes the div visually */
    }

.student-page .gp-tools-row span {
        display: none !important; /* Hides the word Fretboard */
    }
}



.admin-page .gp-player-panel,
.admin-page .gp-player-root,
.admin-page .gp-cmd {
    /* inherit student player rules via shared selectors above when body has both classes */
}