/* UG Reader — shared styles (loaded by play, practice, jam pages) */

/* Load JetBrains Mono for cleaner tab rendering */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');

/* Disable double-tap zoom on all reader elements */
#ug-reader-overlay {
    touch-action: manipulation;
}

/* ── Content ── */

.ug-section {
    padding: 10px 14px 4px;
}

.ug-section + .ug-section {
    padding-top: 6px;
}

.ug-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.ug-end-marker {
    text-align: center;
    color: var(--text-muted);
    font-size: 18px;
    letter-spacing: 0.05em;
    padding: 32px 0 48px;
    opacity: 0.6;
}

.ug-line {
    line-height: 1;
    margin-bottom: 2px;
    overflow-x: auto;
}

/* Both .ug-chords and .ug-lyrics MUST share identical font metrics so that
   character column positions align. Any weight difference between the two rows
   will cause bold characters to have different advance widths, breaking alignment.
   Use color (not weight) to distinguish chords from lyrics. */
.ug-chords {
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 400;
    white-space: pre;
    color: var(--blue);
    line-height: 1.4;
}

.ug-chord {
    /* Individual chord span — keeps chords selectable for future click-to-diagram */
}
.ug-repeat-marker {
    color: #888;
    font-size: 0.85em;
}

.ug-lyrics {
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 400;
    white-space: pre;
    color: var(--text);
    line-height: 1.5;
}

/* Plain text lyrics (no chords above) — allow wrapping */
.ug-lyrics-plain {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ug-tab-block {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    font-size: 11px;
    white-space: pre;
    overflow-x: auto;
    color: var(--text-muted);
    margin: 4px 0 8px;
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}

/* ── Tab block colorization (inside reader) ── */
.ug-reader-scroll .ug-tab-block {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 10px 14px;
    line-height: 1;
}
/* Fret numbers — the primary information */
.ug-reader-scroll .ug-tab-block .tb-num {
    color: #fff;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
/* String dashes — replaced with solid lines */
.ug-reader-scroll .ug-tab-block .tb-str {
    color: transparent;
    background: linear-gradient(
        transparent calc(50% - 0.5px),
        rgba(255, 255, 255, 0.18) calc(50% - 0.5px),
        rgba(255, 255, 255, 0.18) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}
/* Bar lines — subtle vertical separators */
.ug-reader-scroll .ug-tab-block .tb-bar {
    color: rgba(255, 255, 255, 0.3);
}
/* String prefixes (e, B, G, D, A, E) */
.ug-reader-scroll .ug-tab-block .tb-pfx {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}
/* Technique markers (h=hammer, p=pull, b=bend, r=release) */
.ug-reader-scroll .ug-tab-block .tb-tech {
    color: #e8a04e;
    font-weight: 600;
}
/* Annotation lines (chord names, rhythm markers above tab) */
.ug-reader-scroll .ug-tab-block .tb-ann {
    display: inline-block;
    width: 100%;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    line-height: 1.6;
}

/* ── Overlay container ── */

#ug-reader-overlay {
    display: none;          /* shown via JS: style.display = 'flex' */
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

/* ── Trippy canvas ── */

.ug-trippy-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ug-trippy-canvas.hidden { display: none; }

/* ── Trippy button ── */

.ug-tb-trippy-btn {
    transition: all 0.3s ease;
}
.ug-tb-trippy-btn.active {
    background: linear-gradient(135deg, #ff006e, #8338ec, #3a86ff, #06d6a0);
    background-size: 300% 300%;
    animation: trippyBtnShift 3s ease infinite;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 0 12px rgba(131, 56, 236, 0.5);
}
@keyframes trippyBtnShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ── Header ── */

.ug-reader-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
}

.ug-rh-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.ug-rh-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ug-rh-meta {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.ug-rh-close {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.ug-rh-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}
.ug-rh-right-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ug-rh-mobile-info {
    display: none;
}
.ug-rh-mobile-song, .ug-rh-mobile-artist {
    display: block;
    text-align: right;
    line-height: 1.3;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ug-rh-mobile-song {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
}
.ug-rh-mobile-artist {
    font-size: 10px;
    color: var(--text-muted);
}

.ug-rh-art {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 6px;
}

/* ── Scroll area ── */

.ug-reader-scroll {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scroll-behavior: auto; /* JS handles all smooth scrolling via rAF */
}

/* Font-size variable applied to chord+lyric rows AND tab blocks */
.ug-reader-scroll .ug-chords,
.ug-reader-scroll .ug-lyrics,
.ug-reader-scroll .ug-tab-block {
    font-size: var(--ug-font-size, 20px);
}

/* Extra breathing room between tab systems in the reader */
.ug-reader-scroll .ug-tab-block {
    margin-bottom: 24px;
}

/* Centered content area — width scales with font so margins auto-balance.
   Capped at 96vw so larger fonts still get the full viewport. */
.ug-reader-content {
    max-width: min(96vw, calc(var(--ug-font-size, 20px) * 48));
    margin: 0 auto;
    padding: 8px 12px;
}

/* Section labels (VERSE, CHORUS etc) larger with breathing room */
.ug-reader-scroll .ug-section {
    padding-top: 40px;
}
.ug-reader-scroll .ug-section:first-child {
    padding-top: 8px;
}
.ug-reader-scroll .ug-section-label {
    font-size: 16px;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

/* Chord spans become tappable in reader */
.ug-reader-content .ug-chord {
    cursor: pointer;
}
.ug-reader-content .ug-chord:active {
    opacity: 0.6;
}
.ug-reader-content .ug-tab-block .ug-chord {
    color: var(--blue);
}

/* ── Toolbar ── */

.ug-reader-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 0 12px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    gap: 6px;
}

/* Hide chord scroll and trippy mode buttons */
.ug-tb-chord-scroll-btn,
.ug-tb-trippy-btn { display: none !important; }

/* Row break only visible on mobile (used by flex-wrap layout) */
.ug-tb-row-break { display: none; }

.ug-tb-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ug-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2, var(--surface));
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ug-tb-btn:active { background: var(--border); }
.ug-tb-instrument-btn { color: var(--accent); }
.ug-tb-instrument-btn .hidden { display: none; }

#ug-tb-versions {
    width: auto;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
}

.ug-tb-autoscroll {
    padding: 0 10px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface2, var(--surface));
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ug-tb-autoscroll.active {
    background: var(--blue, #007aff);
    border-color: var(--blue, #007aff);
    color: #fff;
}
.ug-tb-autoscroll:active { opacity: 0.75; }

/* ── Chord Scroll button ── */

.ug-tb-chord-scroll-btn {
    padding: 0 12px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface2, var(--surface));
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ug-tb-chord-scroll-btn.active {
    background: var(--accent, #e0723a);
    border-color: var(--accent, #e0723a);
    color: #fff;
}
.ug-tb-chord-scroll-btn:active { opacity: 0.75; }

/* ── Chord Scroll waypoint highlights ── */

.ug-chord.cs-current {
    background: rgba(224, 114, 58, 0.22);
    border-radius: 3px;
    outline: 1.5px solid rgba(224, 114, 58, 0.7);
    color: var(--accent, #e0723a);
}
.ug-chord.cs-upcoming {
    border-bottom: 2px solid rgba(224, 114, 58, 0.35);
}

/* ── Chord Scroll active: pointer cursor on chords ── */

.ug-chord-scroll-active .ug-chord {
    cursor: crosshair;
}
.ug-chord-scroll-active .ug-chord:hover {
    outline: 1.5px dashed rgba(224, 114, 58, 0.5);
    border-radius: 3px;
}

/* ── Chord Scroll detection badge ── */

.ug-cs-badge {
    position: fixed;
    bottom: 72px; /* above the toolbar */
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(20, 20, 22, 0.88);
    border: 1px solid rgba(224, 114, 58, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    color: #e0723a;
    z-index: 500;
    pointer-events: none;
    user-select: none;
}
.ug-cs-badge.hidden { display: none; }
.ug-cs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e0723a;
    animation: cs-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes cs-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

.ug-tb-font { font-size: 11px; width: 28px; }

.ug-tb-speed-group { gap: 4px; }

.ug-tb-icon { font-size: 14px; line-height: 1; cursor: pointer; user-select: none; }

.ug-tb-speed {
    width: 144px;
    cursor: pointer;
    accent-color: var(--blue, #007aff);
}

/* Key button — replaces old +0 transpose span */
.ug-tb-key-btn {
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
    min-width: 34px;
    letter-spacing: 0;
}

/* Key picker popup — opens upward from toolbar */
.ug-key-picker {
    position: absolute;
    z-index: 400;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.ug-key-picker button {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 4px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    min-width: 34px;
    text-align: center;
    transition: background 0.1s;
}
.ug-key-picker button:hover { background: var(--surface-hover, #f0f0f0); }
.ug-key-picker button.active {
    background: var(--blue, #007aff);
    color: #fff;
    border-color: var(--blue, #007aff);
}

/* Transpose group container for picker positioning */
.ug-tb-transpose-group {
    position: relative;
}

/* Capo picker */
.ug-tb-capo-group {
    position: relative;
}
.ug-tb-capo-val {
    font-size: 12px;
    font-weight: 600;
    min-width: 56px;
    white-space: nowrap;
}

/* Capo / tuning meta display */
.ug-tb-meta-group {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 0 4px;
}

/* ── Save button ── */

.ug-tb-save-btn {
    padding: 0 10px;
    height: 32px;
    width: auto;
    border-radius: 8px;
    border: 1.5px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.ug-tb-save-btn:active { background: var(--accent); color: #fff; }
.ug-tb-save-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Star button ── */

.ug-tb-star-btn { font-size: 18px; }
.ug-tb-star-btn.starred { color: #f0a030; }

/* ── Versions sheet ── */

.ug-versions-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ug-versions-sheet.hidden {
    display: none;
}

.ug-versions-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.ug-versions-panel {
    position: relative;
    background: var(--surface, #fff);
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ug-versions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border, #e5e5ea);
    flex-shrink: 0;
}

.ug-versions-title {
    font-size: 16px;
    font-weight: 600;
}

.ug-versions-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-muted, #6e6e73);
    cursor: pointer;
    padding: 4px 8px;
}

.ug-versions-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ug-version-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #e5e5ea);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ug-version-item:last-child {
    border-bottom: none;
}

.ug-version-item:active {
    background: var(--surface2, #f2f2f7);
}

.ug-version-item.active {
    background: rgba(212, 98, 42, 0.06);
}

.ug-version-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent, #d4622a);
    background: rgba(212, 98, 42, 0.10);
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ug-version-info {
    flex: 1;
    min-width: 0;
}

.ug-version-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ug-version-meta {
    font-size: 12px;
    color: var(--text-muted, #6e6e73);
    margin-top: 2px;
}

.ug-version-check {
    color: var(--accent, #d4622a);
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.ug-versions-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-muted, #6e6e73);
    border-top: 1px solid var(--border, #e5e5ea);
}

.ug-versions-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border, #e5e5ea);
    border-top-color: var(--accent, #d4622a);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── Theory button & picker ── */

.ug-tb-theory-btn {
    width: auto;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.ug-tb-theory-btn.active {
    background: var(--accent, #d4622a);
    color: #fff;
}

#ug-theory-group {
    position: relative;
}

.ug-theory-picker {
    position: fixed;
    background: var(--surface, #1c1c1e);
    border: 1px solid var(--border, #38383a);
    border-radius: 10px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    min-width: 120px;
}
.ug-theory-picker.hidden { display: none; }

.ug-theory-level {
    display: block;
    width: 100%;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text, #e5e5e7);
    cursor: pointer;
    transition: background 0.1s;
}
.ug-theory-level:hover { background: var(--surface2, #2c2c2e); }
.ug-theory-level.active {
    background: var(--accent, #d4622a);
    color: #fff;
}
.ug-theory-off {
    color: var(--text-muted, #6e6e73);
    border-top: 1px solid var(--border, #38383a);
    border-radius: 0 0 7px 7px;
    margin-top: 2px;
    padding-top: 8px;
}

/* ── Tempo control ── */

.ug-tb-tempo-group {
    gap: 6px;
    align-items: center;
}
.ug-tb-tempo-group.hidden { display: none; }

.ug-tb-tempo-label {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #6e6e73);
    min-width: 28px;
    text-align: center;
}
.ug-tb-tempo-label::after {
    content: ' bpm';
    font-size: 9px;
}

.ug-tb-tempo-slider {
    width: 70px;
    accent-color: var(--accent, #d4622a);
}

/* ── Section progression ── */

.ug-section-prog {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--accent, #d4622a);
    opacity: 0.85;
    vertical-align: middle;
}

/* ── Share button & toast ── */

.ug-share-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.ug-share-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.ug-share-btn:active { opacity: 0.7; }
.ug-share-btn.hidden { display: none; }
.ug-share-btn svg { pointer-events: none; }

.ug-share-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(30, 32, 38, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1100;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.ug-share-toast svg { color: #30d158; flex-shrink: 0; }
.ug-share-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Spotify toggle & embed ── */

.ug-spotify-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #1DB954;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    padding: 0;
}
.ug-spotify-toggle:hover { background: #1ed760; }
.ug-spotify-toggle.hidden { display: none; }
.ug-spotify-toggle svg { pointer-events: none; }

.ug-spotify-embed {
    position: fixed;
    top: 48px;
    right: 12px;
    z-index: 1060;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.ug-spotify-embed.hidden { display: none; }
/* Prewarm: keeps the iframe loading + ready to play, but invisible/inert */
.ug-spotify-embed.prewarm {
    display: block;
    position: fixed;
    top: -9999px;
    left: -9999px;
    right: auto;
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
}
.ug-spotify-embed iframe {
    display: block;
    border-radius: 12px;
}

/* ── Scale toggle ── */

.ug-scale-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #d8d0c6;
    background: #f0ebe3;
    color: #8a8070;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}
.ug-scale-toggle:hover {
    background: #e8e0d6;
    color: #6a6055;
    border-color: #c4baa8;
}
.ug-scale-toggle.active {
    background: #c87a4e;
    color: #fff;
    border-color: #b56a3e;
    box-shadow: 0 1px 4px rgba(200, 110, 60, 0.25);
}
.ug-scale-toggle.hidden { display: none; }
.ug-scale-toggle svg { pointer-events: none; }

/* ── Help toggle (?) ── */

.ug-help-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #d8d0c6;
    background: #f0ebe3;
    color: #8a8070;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.ug-help-toggle:hover {
    background: #e8e0d6;
    color: #6a6055;
    border-color: #c4baa8;
}
.ug-help-toggle:active { transform: translateY(0.5px); }
.ug-help-toggle svg { pointer-events: none; }
[data-theme="dark"] .ug-help-toggle {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.7);
}
[data-theme="dark"] .ug-help-toggle:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.22);
    color: #fff;
}

/* ── Tooltip (CSS-only, opt-in via .ug-has-tooltip + data-tooltip="…") ── */

.ug-has-tooltip { position: relative; }

.ug-has-tooltip::after,
.ug-has-tooltip::before {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease 0.25s, transform 0.18s ease 0.25s;
    position: absolute;
    z-index: 1300;
}
.ug-has-tooltip::after {
    content: attr(data-tooltip);
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    background: rgba(28, 22, 16, 0.95);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.ug-has-tooltip::before {
    content: '';
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(28, 22, 16, 0.95);
}
.ug-has-tooltip:hover::after,
.ug-has-tooltip:hover::before,
.ug-has-tooltip:focus-visible::after,
.ug-has-tooltip:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.ug-has-tooltip:focus-visible::before {
    transform: translateX(-50%);
}
[data-theme="dark"] .ug-has-tooltip::after {
    background: rgba(245, 240, 232, 0.95);
    color: #1c1c1e;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
[data-theme="dark"] .ug-has-tooltip::before {
    border-bottom-color: rgba(245, 240, 232, 0.95);
}
/* Hide tooltip on touch devices (where hover is sticky and looks broken) */
@media (hover: none) {
    .ug-has-tooltip::after,
    .ug-has-tooltip::before {
        display: none;
    }
}

/* ── Help modal ── */

.ug-help-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}
.ug-help-modal.hidden { display: none; }
.ug-help-modal.ug-help-open {
    opacity: 1;
    pointer-events: auto;
}

.ug-help-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 12, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ug-help-card {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    background: var(--surface);
    border-radius: 18px;
    box-shadow:
        0 32px 80px rgba(20, 14, 8, 0.32),
        0 0 0 1px var(--border);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.ug-help-modal.ug-help-open .ug-help-card {
    transform: translateY(0) scale(1);
}
.ug-help-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(212, 98, 42, 0.45) 50%, transparent 100%);
    pointer-events: none;
}

.ug-help-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}
.ug-help-close:hover {
    background: var(--surface2, var(--border));
    color: var(--text);
}

.ug-help-card-inner {
    padding: 28px 28px 22px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
}

.ug-help-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.ug-help-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 22px;
    letter-spacing: -0.01em;
}

.ug-help-rows {
    display: flex;
    flex-direction: column;
}
.ug-help-row {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 18px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.ug-help-row:last-child { border-bottom: none; }

.ug-help-keys {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 1px;
}
.ug-help-sep {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    user-select: none;
}

.ug-help-desc {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}
.ug-help-desc em {
    font-style: normal;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.ug-help-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── kbd pill — tactile keyboard-key style ── */

.ug-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text);
    background: linear-gradient(180deg, #ffffff 0%, #f4f0e9 100%);
    border: 1px solid #d8d0c6;
    box-shadow:
        inset 0 -1.5px 0 rgba(120, 100, 80, 0.18),
        0 1px 2px rgba(120, 100, 80, 0.08);
    user-select: none;
    flex-shrink: 0;
}
.ug-kbd-wide { padding: 0 14px; }
.ug-kbd-tiny {
    height: 20px;
    min-width: 20px;
    padding: 0 6px;
    font-size: 10px;
    border-radius: 4px;
}
[data-theme="dark"] .ug-kbd {
    background: linear-gradient(180deg, #2a2a2d 0%, #1f1f22 100%);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text);
    box-shadow:
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Mobile tweaks ── */

@media (max-width: 480px) {
    .ug-help-modal { padding: 16px; }
    .ug-help-card-inner { padding: 24px 20px 18px; }
    .ug-help-title { font-size: 19px; margin-bottom: 18px; }
    .ug-help-row {
        grid-template-columns: minmax(96px, auto) 1fr;
        gap: 14px;
        padding: 11px 0;
    }
    .ug-help-desc { font-size: 13px; }
    .ug-kbd { min-width: 26px; height: 26px; font-size: 11px; padding: 0 7px; }
    .ug-kbd-wide { padding: 0 12px; }
}

/* ── Scale panel ── */

.ug-scale-panel {
    position: absolute;
    top: 52px;
    right: 8px;
    z-index: 55;
    background: rgba(252, 249, 244, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.10),
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    padding: 8px 10px 24px;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    max-width: 96vw;
}
.ug-scale-panel.hidden { display: none; }
.ug-scale-panel button { cursor: pointer; }

.ug-scale-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 2px 4px;
    cursor: grab;
}
.ug-scale-header:active {
    cursor: grabbing;
}

.ug-scale-label {
    font-size: 12px;
    font-weight: 700;
    color: #5a5248;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ug-scale-mode-label {
    font-size: 9px;
    color: #9a9490;
    white-space: nowrap;
    font-style: italic;
}

.ug-scale-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ug-scale-close {
    background: none;
    border: none;
    color: #b0a8a0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 5px;
    transition: color 0.15s, background 0.15s;
}
.ug-scale-close:hover {
    color: #6a6258;
    background: rgba(0, 0, 0, 0.08);
}

.ug-scale-type-toggle {
    display: flex;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.10);
    flex-shrink: 0;
}

.ug-scale-type-btn {
    background: transparent;
    border: none;
    color: #9a9490;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}
.ug-scale-type-btn:first-child { border-right: 1px solid rgba(0, 0, 0, 0.08); }
.ug-scale-type-btn.active {
    background: rgba(200, 110, 60, 0.15);
    color: #b06830;
    font-weight: 700;
}
.ug-scale-type-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
    color: #6a6258;
}

/* ── Scale fretboard grid ── */

.ug-scale-fretboard {
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: #f0ebe3;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 2px 0;
    position: relative;
    z-index: 1;
}

.ug-sf-inner {
    display: inline-block;
    min-width: max-content;
}

/* Fret numbers */
.ug-sf-fret-numbers {
    display: flex;
    align-items: center;
    height: 14px;
}

.ug-sf-fret-num {
    width: 32px;
    text-align: center;
    font-size: 8px;
    font-weight: 600;
    color: #a09888;
    flex-shrink: 0;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
}
.ug-sf-fret-num-muted {
    width: 32px;
    flex-shrink: 0;
}

/* String labels */
.ug-sf-string-label-cell {
    width: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ug-sf-string-label {
    font-size: 9px;
    font-weight: 700;
    color: #a09888;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
}

/* String rows */
.ug-sf-string-row {
    display: flex;
    align-items: center;
}

/* Fret cells */
.ug-sf-cell {
    width: 32px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* String wire — warm gray line through center */
    background: linear-gradient(
        to bottom,
        transparent calc(50% - 0.5px),
        #c8c0b4 calc(50% - 0.5px),
        #c8c0b4 calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
    /* Fret wire */
    border-right: 1px solid #d8d0c6;
}

/* Nut — thicker, darker line after open strings */
.ug-sf-string-label-cell + .ug-sf-cell {
    border-right: 2.5px solid #8a8070;
}

/* Scale degree dots — base style (non-chord-tone scale notes) */
.ug-sf-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #cec6be;
    border: 1px solid #b8b0a8;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    transition: transform 0.1s ease;
}

/* 1 — Root: app signature orange, largest */
.ug-sf-dot-root {
    width: 22px;
    height: 22px;
    background: #d4622a;
    border: 1.5px solid #b8501f;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 2px 5px rgba(212, 98, 42, 0.40);
}

/* 3 — Third: sky blue */
.ug-sf-dot-third {
    width: 20px;
    height: 20px;
    background: #4a86c8;
    border: 1.5px solid #3870ae;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 2px 4px rgba(74, 134, 200, 0.35);
}

/* 5 — Fifth: sage green */
.ug-sf-dot-fifth {
    width: 20px;
    height: 20px;
    background: #4aa06b;
    border: 1.5px solid #378a56;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 2px 4px rgba(74, 160, 107, 0.35);
}

/* 7 — Seventh: muted violet */
.ug-sf-dot-seventh {
    width: 19px;
    height: 19px;
    background: #8a6aae;
    border: 1.5px solid #745a96;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 4px rgba(138, 106, 174, 0.30);
}

/* Note name text — all dots */
.ug-sf-note-text {
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    color: #7a7268;
    letter-spacing: -0.3px;
}

/* White text on coloured chord-tone dots */
.ug-sf-dot-root .ug-sf-note-text,
.ug-sf-dot-third .ug-sf-note-text,
.ug-sf-dot-fifth .ug-sf-note-text,
.ug-sf-dot-seventh .ug-sf-note-text {
    color: #fff;
    font-size: 8px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

/* Root slightly larger text */
.ug-sf-dot-root .ug-sf-note-text {
    font-size: 9px;
}

/* Legend row */
.ug-sf-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    row-gap: 2px;
    padding: 6px 10px 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin-top: 3px;
}

.ug-sf-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #8a8278;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    letter-spacing: 0.01em;
}

.ug-sf-legend-sep {
    width: 1px;
    height: 10px;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 10px;
    flex-shrink: 0;
}

.ug-sf-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cec6be;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.ug-sf-legend-root    { background: #d4622a; border-color: #b8501f; }
.ug-sf-legend-third   { background: #4a86c8; border-color: #3870ae; }
.ug-sf-legend-fifth   { background: #4aa06b; border-color: #378a56; }
.ug-sf-legend-seventh { background: #8a6aae; border-color: #745a96; }

/* ── Chord tone selector row ── */

.ug-sf-chord-selector {
    display: flex;
    align-items: stretch;
    gap: 5px;
    padding: 4px 4px 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ug-sf-chord-selector::-webkit-scrollbar { display: none; }
.ug-sf-chord-selector:empty { display: none; }

.ug-sf-chord-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 42px;
    padding: 5px 10px 4px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.03);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.ug-sf-chord-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.15);
}
.ug-sf-chord-btn.active {
    background: rgba(200, 110, 60, 0.16);
    border-color: rgba(200, 110, 60, 0.35);
    box-shadow: 0 1px 4px rgba(200, 110, 60, 0.15);
}

.ug-sf-chord-name {
    font-size: 12px;
    font-weight: 700;
    color: #7a7268;
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.ug-sf-chord-btn.active .ug-sf-chord-name {
    color: #b06830;
}

.ug-sf-chord-roman {
    font-size: 9px;
    font-weight: 600;
    color: #a09890;
    line-height: 1;
    letter-spacing: 0.02em;
}
.ug-sf-chord-btn.active .ug-sf-chord-roman {
    color: #c8925a;
}

/* Resize grips — bottom corners of the scale panel */
.ug-sf-resize-grip {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    border-radius: 0 0 10px 0;
    z-index: 100;
    background-image: linear-gradient(
        135deg,
        transparent 0,
        transparent 45%,
        rgba(106, 96, 85, 0.55) 45%,
        rgba(106, 96, 85, 0.55) 55%,
        transparent 55%,
        transparent 70%,
        rgba(106, 96, 85, 0.55) 70%,
        rgba(106, 96, 85, 0.55) 80%,
        transparent 80%
    );
    opacity: 0.7;
    transition: opacity 0.15s ease;
    touch-action: none;
}
.ug-sf-resize-grip:hover {
    opacity: 1;
}

.ug-sf-resize-grip-left {
    right: auto;
    left: 0;
    cursor: nesw-resize;
    border-radius: 0 0 0 10px;
    transform: scaleX(-1);
}

[data-theme="dark"] .ug-sf-resize-grip {
    background-image: linear-gradient(
        135deg,
        transparent 0,
        transparent 45%,
        rgba(220, 210, 195, 0.45) 45%,
        rgba(220, 210, 195, 0.45) 55%,
        transparent 55%,
        transparent 70%,
        rgba(220, 210, 195, 0.45) 70%,
        rgba(220, 210, 195, 0.45) 80%,
        transparent 80%
    );
}

/* ── Chord popup ── */

#ug-chord-popup {
    display: none;       /* shown/hidden via JS */
    position: fixed;
    z-index: 300;
    width: 162px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    overflow: hidden;
}

.ug-cp-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 2px;
}

.ug-cp-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.ug-cp-diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 0;
    min-height: 80px;
}

.ug-cp-no-diagram {
    font-size: 12px;
    color: var(--text-muted);
    padding: 16px;
    text-align: center;
}

.ug-cp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px 8px;
    gap: 8px;
}

.ug-cp-idx {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
}

/* Override dark overlay button styling inside the light chord popup */
#ug-chord-popup .ug-tb-btn,
#ug-reader-overlay #ug-chord-popup .ug-tb-btn {
    border-color: #e5e5ea;
    background: #f2f2f7;
    color: #1c1c1e;
}
#ug-chord-popup .ug-tb-btn:active { background: #e5e5ea; }

/* ── Mobile reader ── */

@media (max-width: 768px) {
    .ug-reader-header {
        padding: 6px 12px;
    }
    .ug-rh-art {
        width: 24px;
        height: 24px;
    }
    .ug-rh-title {
        font-size: 12px;
    }
    .ug-rh-meta {
        display: none !important;
    }
    .ug-rh-mobile-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 2px;
    }
    .ug-reader-content {
        max-width: 100%;
        padding: 4px 8px;
    }
    .ug-reader-scroll .ug-section {
        padding-top: 24px;
    }
    .ug-reader-scroll .ug-section:first-child {
        padding-top: 8px;
    }
    .ug-line {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ug-reader-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        min-height: auto;
        padding: 6px 8px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        gap: 6px 8px;
        width: 100%;
        box-sizing: border-box;
    }
    /* Row 1 (top) — secondary: font, theory, save, star */
    #ug-font-group        { order: 1; }
    #ug-theory-group      { order: 2; }
    .ug-tb-tempo-group    { order: 3; }
    #ug-save-group        { order: 4; }
    #ug-star-group        { order: 5; }
    #ug-instrument-group  { display: none !important; }
    .ug-tb-meta-group     { display: none !important; }
    /* Row break — visible only on mobile */
    .ug-tb-row-break {
        display: block;
        flex-basis: 100%;
        height: 0;
        order: 10;
    }
    /* Row 2 (bottom, thumb zone) — primary: autoscroll+speed, transpose, versions */
    .ug-tb-speed-group    { order: 11; }
    .ug-tb-transpose-group { order: 12; }
    #ug-versions-group    { order: 13; }
    /* Hide capo on mobile — use transpose/key instead */
    .ug-tb-capo-group     { display: none !important; }

    /* Compact sizing */
    .ug-tb-speed {
        width: 80px;
    }
    .ug-tb-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
        border-radius: 6px;
    }
    .ug-tb-autoscroll {
        height: 28px;
        padding: 0 8px;
        font-size: 12px;
        font-weight: 600;
    }
    .ug-tb-capo-val {
        min-width: 44px;
        font-size: 11px;
    }
    .ug-tb-font {
        font-size: 10px;
        width: 24px;
    }
    .ug-tb-key-btn {
        font-size: 11px;
        min-width: 28px;
    }
    /* Text buttons must expand to fit their label */
    .ug-tb-autoscroll,
    .ug-tb-save-btn,
    .ug-tb-theory-btn,
    #ug-tb-versions {
        width: auto !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        height: 28px;
        padding: 0 8px;
    }
    .ug-tb-star-btn {
        width: 28px;
        height: 28px;
    }
    #ug-chord-popup {
        width: 140px;
    }
    .ug-key-picker {
        grid-template-columns: repeat(3, 1fr);
        left: 0;
        transform: none;
    }
}
@media (max-width: 374px) {
    .ug-reader-content {
        padding: 4px 4px;
    }
    .ug-tb-speed {
        width: 80px;
    }
}

/* ── Inline UG Reader (Split View panels) ───────────────── */
.sv-ug-inline {
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}
.sv-ug-inline .ug-section-header {
    font-weight: 700;
    color: var(--accent, #d4622a);
    margin: 14px 0 4px;
}
.sv-ug-inline .ug-chord {
    color: var(--accent, #d4622a);
    font-weight: 700;
    cursor: pointer;
}
.sv-ug-inline .ug-chord:hover {
    text-decoration: underline;
}
.sv-ug-inline .ug-tab-block {
    color: var(--text-muted, #888);
}