@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

/* Song Practice Manager — mobile-first light UI */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: default;
}

/* Restore text cursor only for actual text inputs */
input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="url"], input[type="number"],
input:not([type]), textarea { cursor: text; }

:root {
    --bg: #f2f2f7;
    --surface: #ffffff;
    --surface2: #f2f2f7;
    --border: #e0e0e5;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
    --text: #1c1c1e;
    --text-muted: #6b6b70;
    --accent: #d4622a;
    --accent-dim: rgba(212, 98, 42, 0.1);
    --green: #1e8a40;
    --blue: #0055c8;
    --yellow: #b07800;
    --orange: #c85a10;
    --red: #c42b2b;
    --radius: 12px;
    --header-h: 52px;
    --nav-h: 56px;
    --accent-bg: #fff3ee;
    --playing-bg: #fff9f7;
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg: #111113;
    --surface: #1c1c1e;
    --surface2: #252528;
    --border: #38383a;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    --text: #f2f2f7;
    --text-muted: #98989e;
    --accent: #e0723a;
    --accent-dim: rgba(224, 114, 58, 0.15);
    --green: #30d158;
    --blue: #4da3ff;
    --yellow: #ffd60a;
    --orange: #ff9f0a;
    --red: #ff453a;
    --accent-bg: rgba(224, 114, 58, 0.14);
    --playing-bg: rgba(224, 114, 58, 0.07);
}

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────── */
.sm-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    padding: 0 12px;
    z-index: 100;
    gap: 8px;
}

.app-logo {
    width: 26px;
    height: 29px;
    flex-shrink: 0;
}
/* Hide logo when back button is visible (detail views) */
.sm-header-back:not(.hidden) ~ .app-logo { display: none; }
.sm-header-back:not(.hidden) ~ .app-name { display: none; }

.app-name {
    font-family: 'Permanent Marker', cursive;
    font-size: 17px;
    color: var(--accent);
    white-space: nowrap;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    line-height: 1;
}

.sm-header-back {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 22px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    line-height: 1;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.sm-header-back:active { opacity: 0.6; }

.sm-header-title {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-header-right {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

/* ── Instrument toggle ──────────────────────────────────── */
.sm-instrument-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--accent);
    padding: 5px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, border-color 0.15s;
}
.sm-instrument-toggle:hover { background: var(--accent-dim); }
.sm-instrument-toggle:active { opacity: 0.7; }
.sm-instrument-toggle .hidden { display: none; }

.sm-instrument-wrap { position: relative; }
.sm-instrument-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--surface);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    overflow: hidden;
    z-index: 120;
    min-width: 130px;
}
.sm-instrument-menu.hidden { display: none; }
.sm-instrument-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.sm-instrument-option:hover { background: var(--accent-dim); }
.sm-instrument-option:active { opacity: 0.7; }
.sm-instrument-option.active {
    color: var(--accent);
    font-weight: 600;
}
.sm-instrument-option svg { flex-shrink: 0; }

.sm-header-add {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
}

.sm-header-add:active { opacity: 0.6; }

/* ── Floating action button ─────────────────────────────── */
.sm-fab {
    position: fixed;
    bottom: 28px;
    right: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s, opacity 0.12s;
    z-index: 100;
}

.sm-fab:active { transform: scale(0.92); opacity: 0.85; }
.sm-fab.hidden { display: none; }

/* ── Queue tab bar ───────────────────────────────────────── */
.sm-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--surface, #fff);
    padding: 0 16px;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 11;
}

.sm-tab {
    flex: 1;
    padding: 12px 8px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.sm-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ── Jammed song card ────────────────────────────────────── */
.sm-jammed-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg, #fff);
    border-radius: 10px;
    padding: 13px 14px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.sm-jammed-info { flex: 1; min-width: 0; }
.sm-jammed-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-jammed-artist { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.sm-jammed-meta { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

.sm-jammed-add-btn {
    flex-shrink: 0;
    margin-left: 12px;
    padding: 7px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sm-jammed-add-btn:active { opacity: 0.75; }

.sm-jammed-open-hint {
    flex-shrink: 0;
    margin-left: 12px;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
}

.sm-jammed-card[style*="cursor: pointer"]:active {
    background: #f5f5f8;
}

/* ── Play type badge (Solo / Jam) ────────────────────────── */
.sm-play-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
}
.sm-play-badge-solo {
    background: rgba(107, 107, 112, 0.12);
    color: var(--text-muted);
}
.sm-play-badge-jam {
    background: rgba(212, 98, 42, 0.12);
    color: var(--orange);
}

/* ── Songs list search bar ───────────────────────────────── */
.sm-search-bar {
    padding: 10px 16px 6px;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
}

.sm-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
    outline: none;
    -webkit-appearance: none;
}

.sm-search-input:focus {
    border-color: var(--accent);
}

/* ── Main scrollable area ────────────────────────────────── */
.sm-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--header-h);
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ── Views ───────────────────────────────────────────────── */
.sm-view { display: block; }
.sm-view.hidden { display: none; }

/* ── Bottom Nav ──────────────────────────────────────────── */
.sm-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--nav-h);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.sm-nav-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
    text-decoration: none;
}

.sm-nav-btn.active { color: var(--accent); }
.sm-nav-btn:active { opacity: 0.7; }

/* SVG icons — stroke only, bolder when active */
svg.sm-nav-icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
    transition: stroke-width 0.2s ease, transform 0.15s ease;
}

.sm-nav-btn.active svg.sm-nav-icon {
    stroke-width: 2.5;
}

.sm-nav-btn:active svg.sm-nav-icon {
    transform: scale(0.9);
}

.sm-nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }

/* ── Song cards (Queue) ──────────────────────────────────── */
.sm-song-list {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-song-card {
    background: var(--surface);
    border: none;
    border-radius: 10px;
    padding: 11px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.15s, transform 0.1s;
}

.sm-song-card:active {
    box-shadow: none;
    transform: scale(0.99);
}

.sm-song-card-info { flex: 1; min-width: 0; }

.sm-card-name {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-card-artist {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-song-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.sm-days {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.sm-days.sm-days-urgent { color: var(--orange); font-weight: 600; }
.sm-days.sm-days-never { color: var(--red); font-weight: 600; }

/* ── Stage badges ────────────────────────────────────────── */
.sm-stage-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sm-stage-badge[data-stage="want_to_learn"] { background: #ebebf0; color: #5a5a60; }
.sm-stage-badge[data-stage="early"]         { background: #dde8fc; color: var(--blue); }
.sm-stage-badge[data-stage="middle"]        { background: #fdf0d0; color: var(--yellow); }
.sm-stage-badge[data-stage="getting_close"] { background: #fde8d8; color: var(--orange); }
.sm-stage-badge[data-stage="perfected"]     { background: #d6f0dd; color: var(--green); }

/* ── Queue Toolbar (filter chips + sort + count) ─────────── */
.queue-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--border);
}
.queue-toolbar.hidden { display: none; }

.queue-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stage-filters {
    flex: 1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.stage-filters::-webkit-scrollbar { display: none; }

.stage-chip {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stage-chip:active { opacity: 0.7; }

.stage-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.stage-chip[data-stage="want_to_learn"].active { background: #5a5a60; border-color: #5a5a60; color: #fff; }
.stage-chip[data-stage="early"].active         { background: var(--blue); border-color: var(--blue); color: #fff; }
.stage-chip[data-stage="middle"].active        { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.stage-chip[data-stage="getting_close"].active { background: var(--orange); border-color: var(--orange); color: #fff; }
.stage-chip[data-stage="perfected"].active     { background: var(--green); border-color: var(--green); color: #fff; }

.stage-chip-count { opacity: 0.75; }

.queue-sort-wrap {
    position: relative;
    flex-shrink: 0;
}

.queue-sort-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.queue-sort-btn:active { opacity: 0.7; }

.queue-sort-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--surface);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    overflow: hidden;
    z-index: 20;
    min-width: 170px;
}
.queue-sort-menu.hidden { display: none; }

.queue-sort-option {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.queue-sort-option:active { background: var(--accent-dim); }
.queue-sort-option + .queue-sort-option { border-top: 1px solid var(--border); }

.queue-count {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.queue-no-match {
    text-align: center;
    padding: 40px 16px;
    font-size: 14px;
    color: var(--text-muted);
}

/* ── Multi-select mode ───────────────────────────────────── */
.queue-select-btn {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.queue-select-btn:active { opacity: 0.6; }

.select-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.select-check.checked {
    background: var(--accent);
    border-color: var(--accent);
}
.select-check.checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sm-song-card.selected {
    background: var(--accent-dim);
}

.select-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
.select-action-bar.hidden { display: none; }

.select-count-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
}

.select-delete-btn {
    padding: 8px 20px;
    border-radius: 10px;
    border: none;
    background: var(--red);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s;
}
.select-delete-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.select-delete-btn:not(:disabled):active { opacity: 0.75; }

/* ── Practice View ───────────────────────────────────────── */
.sm-practice-hero {
    padding: 20px 16px 12px;
    border-bottom: 1px solid var(--border);
}

.sm-practice-song-name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.sm-practice-artist {
    font-size: 15px;
    color: var(--text-muted);
    margin-top: 4px;
}

.sm-practice-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.sm-practice-last {
    font-size: 13px;
    color: var(--text-muted);
}

.sm-song-key-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 7px;
}

/* ── Practiced button ────────────────────────────────────── */
.sm-practiced-btn {
    display: block;
    width: auto;
    margin: 16px auto 8px;
    padding: 12px 36px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(212,98,42,0.3);
    transition: box-shadow 0.15s, transform 0.1s, opacity 0.15s;
}

.sm-practiced-btn:active {
    opacity: 0.9;
    transform: scale(0.97);
    box-shadow: none;
}

.sm-practiced-btn:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
}

.sm-practiced-btn.practiced {
    background: #2a7a2a;
    box-shadow: 0 2px 8px rgba(42,122,42,0.3);
}

.sm-practiced-btn.practiced:active {
    background: #236023;
}

/* Practiced recently (yesterday) — muted green, still tappable to log today */
.sm-practiced-btn.practiced-recent {
    background: #6a9a6a;
    box-shadow: 0 2px 6px rgba(106,154,106,0.25);
}

.sm-practiced-btn.practiced-recent:active {
    background: #5a8a5a;
}

.sm-practiced-check {
    font-weight: 700;
    margin-right: 2px;
}

/* ── Toast ───────────────────────────────────────────────── */
.sm-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green);
    color: #000;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 24px;
    border-radius: 20px;
    z-index: 200;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s;
}

.sm-toast.hidden { display: none; }
.sm-toast.fading { opacity: 0; }

/* ── Sections ────────────────────────────────────────────── */
.sm-section {
    padding: 16px 16px 4px;
    border-bottom: 1px solid var(--border);
}

.sm-section:last-of-type { border-bottom: none; }

.sm-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.sm-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Link list ───────────────────────────────────────────── */
.sm-link-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
}

#practice-tutorials,
#practice-performances {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#practice-spotify {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sm-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.35;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, border-color 0.1s;
}

.sm-link-item:active { background: var(--surface2); }

/* UG guide link — sits above chord/tab list as a reference */
.sm-ug-guide {
    border-color: rgba(212,98,42,0.25);
    background: rgba(212,98,42,0.04);
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 8px;
}

.sm-link-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* ── YouTube thumbnail card (shared) ────────────────────── */
.sm-yt-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    display: block;
}

.sm-yt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sm-yt-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.15s;
}

.sm-yt-thumb-wrap:active .sm-yt-play-overlay { background: rgba(0,0,0,0.4); }

.sm-yt-play-icon {
    width: 52px;
    height: 52px;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}

.sm-yt-playing-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    pointer-events: none;
}

/* ── YouTube link card (song page) ───────────────────────── */
.sm-yt-thumb-outer {
    position: relative;
    flex-shrink: 0;
}

.sm-card-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.sm-card-delete svg {
    display: block;
    pointer-events: none;
}

.sm-card-delete:hover,
.sm-card-delete:active {
    background: var(--red);
}

.sm-link-yt-card {
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.sm-link-yt-card .sm-yt-thumb-wrap {
    border-radius: 0;
    border-bottom: 1px solid var(--border);
}

.sm-link-card-bottom {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
    margin-top: auto;
}

.sm-link-card-title {
    flex: 1;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text);
}

.sm-link-card-open {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.sm-link-card-open:active { color: var(--accent); }

/* ── Video pick card (add song results) ──────────────────── */
.sm-pick-video-card {
    background: var(--surface);
    border: 2px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sm-pick-video-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.sm-pick-video-card .sm-yt-thumb-wrap {
    border-radius: 0;
    border-top: 1px solid var(--border);
}

.sm-pick-video-bottom {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.sm-pick-video-bottom:active { background: var(--border); }

.sm-pick-video-card.selected .sm-pick-video-bottom { background: var(--accent-dim); }

.sm-pick-video-bottom .sm-pick-label {
    flex: 1;
    font-size: 14px;
    line-height: 1.3;
}

.sm-pick-sublabel {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-pick-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 6px 0 4px;
    margin-top: 4px;
}

/* ── Link entry with preview ─────────────────────────────── */
.sm-link-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.sm-link-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.sm-link-row .sm-link-item {
    flex: 1;
    min-width: 0;
}

.sm-preview-btn {
    flex-shrink: 0;
    width: 46px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--accent);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sm-preview-btn.open {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.sm-preview-btn:active { opacity: 0.75; }

/* ── Embed wrapper ───────────────────────────────────────── */
.sm-embed-wrap {
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    position: relative;
}

.sm-embed-wrap.hidden { display: none; }

.sm-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.sm-embed-spotify {
    aspect-ratio: unset;
    height: auto;
    width: 100%;
    background: transparent;
    overflow: visible;
    grid-column: 1 / -1;
}

.sm-embed-spotify iframe {
    position: static;
    width: 100%;
    height: 152px;
    border-radius: 12px;
}

/* ── Library picks (add-link panel) ─────────────────────── */
.sm-link-lib-picks {
    margin-bottom: 10px;
}

.sm-link-lib-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 4px;
}

/* ── Add link area ───────────────────────────────────────── */
.sm-add-link-area {
    padding-top: 4px;
}

.sm-add-link-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-family: inherit;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, border-color 0.1s;
}

.sm-add-link-btn:active { background: var(--surface2); }
.sm-add-link-btn.open { border-color: var(--accent); color: var(--accent); }
.sm-image-upload-btn.sm-image-upload-dragover {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

.sm-link-search-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.sm-link-search-wrap.hidden { display: none; }

.sm-link-search-input {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    width: 100%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.sm-link-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.sm-link-search-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sm-link-result {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.1s;
}

.sm-link-result .sm-yt-thumb-wrap {
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    pointer-events: none; /* tap whole card to add */
}

.sm-link-result-label {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.3;
    transition: background 0.1s;
}

.sm-link-result:active .sm-link-result-label { background: var(--border); }

/* ── Lyrics ──────────────────────────────────────────────── */
.sm-lyrics-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 10px;
}

/* ── Note field ──────────────────────────────────────────── */
.sm-note-field {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
    margin-bottom: 10px;
}

.sm-note-field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Stage chips ─────────────────────────────────────────── */
.sm-stage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
}

.sm-stage-chip {
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
}

.sm-stage-chip.selected[data-stage="want_to_learn"] { background: #ebebf0; color: #3a3a40; border-color: #a0a0aa; }
.sm-stage-chip.selected[data-stage="early"]         { background: #dde8fc; color: var(--blue);   border-color: var(--blue); }
.sm-stage-chip.selected[data-stage="middle"]        { background: #fdf0d0; color: var(--yellow); border-color: var(--yellow); }
.sm-stage-chip.selected[data-stage="getting_close"] { background: #fde8d8; color: var(--orange); border-color: var(--orange); }
.sm-stage-chip.selected[data-stage="perfected"]     { background: #d6f0dd; color: var(--green);  border-color: var(--green); }

.sm-practice-spacer { height: 24px; }

/* ── Add Song View ───────────────────────────────────────── */
.sm-add-form {
    width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sm-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sm-input {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
    width: 100%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

.sm-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Typeahead ────────────────────────────────────────────── */
.sm-field-typeahead {
    display: flex;
    flex-direction: column;
}

.sm-input-search {
    font-size: 18px;
    padding: 16px;
    border-radius: 12px;
}

.sm-typeahead {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 6px;
}

.sm-typeahead.hidden { display: none; }

.sm-typeahead-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sm-typeahead-thumb {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
}
.sm-typeahead-info { flex: 1; min-width: 0; }

.sm-typeahead-item:last-child { border-bottom: none; }

.sm-typeahead-item:active,
.sm-typeahead-item.focused { background: var(--accent-dim); }

.sm-typeahead-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.sm-typeahead-artist {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}

.sm-search-btn {
    width: 100%;
    padding: 13px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-top: 4px;
}

.sm-search-btn:active { opacity: 0.85; }
.sm-search-btn:disabled { opacity: 0.5; cursor: default; }

.sm-save-btn {
    display: block;
    width: auto;
    margin: 8px auto 24px;
    padding: 12px 40px;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(30,138,64,0.25);
}

.sm-save-btn:active { opacity: 0.85; box-shadow: none; }
.sm-save-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

.sm-error {
    color: var(--red);
    font-size: 14px;
    padding: 8px 0;
}

.sm-error.hidden { display: none; }

/* ── Pick list (add song results) ────────────────────────── */
.sm-pick-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sm-pick-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.sm-pick-group-label--full {
    grid-column: 1 / -1;
}

.sm-pick-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, border-color 0.15s;
}

.sm-pick-item.selected {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.sm-pick-item:active { background: var(--surface2); }

.sm-pick-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
}

.sm-pick-item.selected .sm-pick-check {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.sm-pick-label {
    font-size: 14px;
    line-height: 1.35;
    flex: 1;
}

/* ── In Library indicator ────────────────────────────────── */
.sm-in-library-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(52, 168, 100, 0.18);
    color: #4ade80;
    border: 1px solid rgba(52, 168, 100, 0.35);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
}

.sm-pick-item.sm-in-library {
    cursor: pointer;
}

.sm-pick-item.sm-in-library:hover,
.sm-pick-item.sm-in-library:active {
    background: rgba(52, 168, 100, 0.08);
}

.sm-typeahead-item.sm-typeahead-in-library .sm-in-library-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
}

.sm-ug-link-preview {
    font-size: 14px;
    color: var(--blue);
    word-break: break-all;
    padding-bottom: 10px;
}

/* ── Library View ────────────────────────────────────────── */
.sm-library-list {
    padding: 8px 12px 16px;
}

.sm-library-group {
    margin-bottom: 20px;
}

.sm-library-group-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 10px 4px 6px;
}

.sm-library-song {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    padding: 12px 14px;
    cursor: pointer;
    margin-bottom: 6px;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s, transform 0.1s;
}

.sm-library-song:active { box-shadow: none; transform: scale(0.99); }

.sm-library-song-info { flex: 1; min-width: 0; }

.sm-lib-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-lib-artist {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Loading ─────────────────────────────────────────────── */
.sm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 16px;
    color: var(--text-muted);
}

.sm-loading.hidden { display: none; }

.sm-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────── */
.sm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 60px 24px;
    text-align: center;
}

.sm-empty.hidden { display: none; }

.sm-empty-icon { font-size: 48px; }

.sm-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.sm-empty-text {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 260px;
}

/* ── Drag & drop ─────────────────────────────────────────── */
.sm-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
    opacity: 0.55;
    padding: 2px 4px;
}

.sm-drag-handle:active { cursor: grabbing; }

.sm-link-yt-card.sm-dragging {
    opacity: 0.35;
    border-style: dashed;
}

.sm-link-item-wrap.sm-dragging {
    opacity: 0.35;
    outline: 2px dashed var(--border);
    border-radius: 8px;
}

/* ── Delete button (inline on cards and link items) ─────── */
.sm-item-delete {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, color 0.1s;
}

.sm-item-delete svg {
    display: block;
    pointer-events: none;
}

.sm-item-delete:hover,
.sm-item-delete:active {
    background: rgba(196, 43, 43, 0.1);
    color: var(--red);
}

/* Wrapper for text link items that need a delete button */
.sm-link-item-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sm-link-item-wrap .sm-link-item {
    flex: 1;
    min-width: 0;
}

/* ── Saved Clips ─────────────────────────────────────────── */
.sm-clip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    animation: clipRowIn .25s ease forwards;
}
@keyframes clipRowIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}
.sm-clip-row:last-child { border-bottom: none; }
.sm-clip-row:hover { background: var(--surface2); }
.sm-clip-row:active { background: var(--accent-dim); }

.sm-clip-play-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 50%;
    transition: background .12s;
}
.sm-clip-row:hover .sm-clip-play-icon {
    background: var(--accent);
    color: #fff;
}

.sm-clip-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sm-clip-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-clip-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-clip-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.sm-clip-duration {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    background: var(--surface2);
    padding: 2px 6px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

/* ── Image drop zone ─────────────────────────────────────── */
.sm-image-drop-zone {
    border: 2px dashed transparent;
    border-radius: var(--radius, 12px);
    transition: border-color .15s, background .15s;
    padding: 2px;
}
.sm-image-drop-active {
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* ── Image grid ──────────────────────────────────────────── */
.sm-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.sm-image-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface2);
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-sm);
}

.sm-image-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.sm-image-delete {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.sm-image-delete:hover,
.sm-image-delete:active {
    background: var(--red);
}

.sm-image-drag-handle {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    cursor: grab;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    user-select: none;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 6px;
    padding: 2px 5px;
    opacity: 0.7;
}

.sm-image-drag-handle:active { cursor: grabbing; opacity: 1; }

.sm-image-item.sm-dragging {
    opacity: 0.3;
    outline: 2px dashed var(--border);
}

.sm-image-annotation-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ── Image Carousel ─────────────────────────────────────── */
.sm-carousel-overlay {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.sm-carousel-img {
    max-width: calc(100% - 80px);
    max-height: calc(100% - 120px);
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
    -webkit-user-drag: none;
}

.sm-carousel-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    padding: 4px 8px;
}

.sm-carousel-close:hover { color: #fff; }

.sm-carousel-counter {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    z-index: 2;
}

.sm-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 8px;
    z-index: 2;
    transition: background 0.15s;
}

.sm-carousel-nav:hover { background: rgba(255, 255, 255, 0.22); }
.sm-carousel-nav-prev { left: 12px; }
.sm-carousel-nav-next { right: 12px; }

.sm-carousel-delete {
    position: absolute;
    top: 12px;
    right: 60px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s;
}

.sm-carousel-delete svg { width: 16px; height: 16px; }
.sm-carousel-delete:hover { background: var(--red); color: #fff; }

.sm-carousel-annotation {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 12px 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
}

.sm-carousel-annotation-text {
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
    padding: 4px 0;
}

.sm-carousel-annotation-placeholder {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.sm-carousel-annotation-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    outline: none;
}

.sm-carousel-annotation-input:focus {
    border-color: var(--accent);
}

.sm-carousel-annotation-save {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.sm-carousel-annotation-save:active { opacity: 0.8; }

/* ── Add Link Modal ──────────────────────────────────────── */
.sm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 600;
    display: flex;
    align-items: flex-end;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sm-modal-overlay.open { opacity: 1; }
.sm-modal-overlay.hidden { display: none; }

.sm-modal-sheet {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
}

.sm-modal-overlay.open .sm-modal-sheet {
    transform: translateY(0);
}

.sm-modal-pill {
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.sm-modal-header {
    display: flex;
    align-items: center;
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 12px;
}

.sm-modal-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sm-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface2);
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.sm-modal-close:active { background: var(--border); }

.sm-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 20px 48px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Search input */
.sm-modal-search-row {
    position: relative;
}

.sm-modal-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
    pointer-events: none;
    line-height: 1;
}

.sm-modal-search-input {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 13px 14px 13px 40px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sm-modal-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Results grid — identical layout to add-song video picks */
.sm-modal-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Divider */
.sm-modal-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sm-modal-divider::before,
.sm-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* URL paste row */
.sm-modal-url-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sm-modal-url-input {
    flex: 1;
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 13px 14px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    min-width: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sm-modal-url-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Label row that appears below URL input after paste */
.sm-modal-label-row {
    margin-top: 8px;
}
.sm-modal-label-row.hidden { display: none; }

.sm-modal-label-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: var(--surface2);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sm-modal-label-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.sm-modal-add-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.1s;
}

.sm-modal-add-btn:active { opacity: 0.82; }
.sm-modal-add-btn:disabled { opacity: 0.35; cursor: default; }

/* YouTube thumbnail preview in URL paste */
.sm-modal-url-preview {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.sm-modal-url-preview.hidden { display: none; }

/* Video card tap-to-add (reuses sm-pick-video-card) */
.sm-modal-video-card {
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.sm-modal-video-card:active {
    transform: scale(0.97);
    box-shadow: none;
}

.sm-modal-card-add-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sm-modal-lib-source {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Library list (non-video categories) */
.sm-modal-lib-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sm-modal-lib-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sm-modal-lib-item:active { background: var(--surface2); }

/* ── Utility ─────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (min-width: 700px) {
    :root { --content-max: 1400px; }

    .sm-header {
        left: 50%; transform: translateX(-50%);
        right: auto; width: 100%;
        max-width: var(--content-max);
    }
    .sm-nav {
        left: 50%; transform: translateX(-50%);
        right: auto; width: 100%;
        max-width: var(--content-max);
    }
    .sm-main {
        width: 100%;
        max-width: var(--content-max);
        margin: 0 auto;
    }

    .sm-section {
        padding: 20px 24px 8px;
    }

    .sm-practice-hero {
        padding: 24px 24px 16px;
    }

    .sm-song-list {
        padding: 8px 24px;
    }

    .queue-toolbar {
        padding: 10px 24px 6px;
    }

    /* Add song Spotify: horizontal row, max 3 cards filling full width */
    #add-spotify-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* Video pick grid: keep at 2 columns for larger thumbnails */
    .sm-pick-list-grid {
        grid-template-columns: 1fr 1fr;
    }


    /* Practiced button: inline rather than full-width */
    .sm-practiced-btn {
        width: auto;
        min-width: 260px;
    }

    /* Add song search form */
    #add-search-form {
        padding: 20px 24px 12px;
    }
    #add-search-form .sm-field-typeahead,
    #add-search-form .sm-search-btn {
        width: 100%;
    }

    /* Library grid: 3 cols on tablet+ */
    .sm-link-lib-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Modal: floated sheet centered */
    .sm-modal-overlay {
        align-items: center;
        justify-content: center;
    }
    .sm-modal-sheet {
        max-width: 900px;
        width: 92%;
        border-radius: 20px;
        max-height: 88dvh;
    }
    .sm-modal-results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    :root { --content-max: 1400px; }

    .sm-section {
        padding: 22px 28px 10px;
    }

    .sm-song-list {
        padding: 8px 28px;
    }

    .queue-toolbar {
        padding: 10px 28px 6px;
    }

    /* Video pick grid: keep at 2 columns for larger thumbnails */
    .sm-pick-list-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Practice view: 2-column section layout */
    #view-practice {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
    .sm-practice-hero,
    .sm-practiced-btn,
    #practiced-toast,
    .sm-practice-spacer {
        grid-column: 1 / -1;
    }
    #view-practice .sm-section {
        border-bottom: none;
        border-right: 1px solid var(--border);
        min-height: 80px;
    }

    /* Explicit column assignments — left column */
    #section-tutorials  { grid-column: 1; }
    #section-ug-tabs    { grid-column: 1; }
    #section-images     { grid-column: 1; }
    #section-note       { grid-column: 1; }

    /* Explicit column assignments — right column (no border-right separator) */
    #section-performances { grid-column: 2; border-right: none; }
    #section-spotify      { grid-column: 2; border-right: none; }
    #section-lyrics       { grid-column: 2; border-right: none; }
    #section-stage        { grid-column: 2; border-right: none; }

    /* Modal: wider at large screens */
    .sm-modal-sheet {
        max-width: 1100px;
    }
    .sm-modal-results-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── YouTube In-Page Player Modal ──────────────────────── */
.sm-yt-player-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 56px 0 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sm-yt-player-overlay.open { opacity: 1; }
.sm-yt-player-overlay.hidden { display: none; }

.sm-yt-player-inner {
    position: relative;
    width: 96vw;
    max-width: 1200px;
}

.sm-yt-player-close {
    position: absolute;
    top: -44px;
    right: 0;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sm-yt-player-close:hover { background: rgba(255,255,255,0.25); }

.sm-yt-player-frame {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}

.sm-yt-player-frame iframe,
#yt-player-frame-target {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Timestamp panel below player */
.sm-yt-ts-panel {
    width: 100%;
}

.sm-yt-ts-markrow {
    padding: 10px 16px;
}

.sm-yt-mark-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.sm-yt-mark-btn:hover { background: rgba(255,255,255,0.18); }

.sm-ts-add-row {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.sm-ts-add-row.hidden { display: none; }

.sm-ts-add-input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    padding: 7px 10px;
    outline: none;
    font-family: inherit;
}
.sm-ts-add-input:focus { border-color: var(--accent); }

.sm-ts-save-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sm-ts-skip-btn {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}

.sm-yt-timestamps-wrap {
    position: relative;
}

.sm-yt-timestamps {
    padding: 4px 0;
    max-height: calc(4 * 37px + 20px); /* peek ~half a 5th row */
    overflow-y: auto;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.sm-ts-more-pill {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    pointer-events: none;
    transition: opacity 0.2s;
}
.sm-yt-timestamps-wrap.sm-ts-at-bottom .sm-ts-more-pill {
    opacity: 0;
}

.sm-ts-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.sm-ts-row:hover { background: rgba(255,255,255,0.05); }

.sm-ts-time {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 40px;
}

.sm-ts-note {
    flex: 1;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}

.sm-ts-edit {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
    opacity: 0.5;
    flex-shrink: 0;
}
.sm-ts-row:hover .sm-ts-edit { opacity: 1; }

.sm-ts-del {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}
.sm-ts-del:hover { color: var(--red); }

/* Timestamp count badge on video card thumbnail */
.sm-ts-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 10px;
    pointer-events: none;
}

/* Open YouTube top button in add-video modal */
.sm-modal-yt-btn {
    width: 100%;
    margin-bottom: 4px;
    background: #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sm-modal-yt-btn:hover { background: #cc0000; }

/* Thumbnail opens player modal on click */
.sm-modal-thumb-preview {
    cursor: pointer;
}

/* ── Spotify Web Playback Player ─────────────────────────── */
.sm-sp-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #121212;
    border-radius: 14px;
    padding: 12px 14px;
    color: #fff;
}

.sm-sp-art-col { flex-shrink: 0; }

.sm-sp-art {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    background: #282828;
    display: block;
}

.sm-sp-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sm-sp-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.sm-sp-artist {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-sp-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.sm-sp-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}

.sm-sp-fill {
    height: 100%;
    background: #1DB954;
    border-radius: 2px;
    transition: width 0.5s linear;
    width: 0%;
}

.sm-sp-time {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    flex-shrink: 0;
}

.sm-sp-play-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1DB954;
    border: none;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.1s, background 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.sm-sp-play-btn:active { transform: scale(0.93); background: #1aa34a; }
.sm-sp-play-btn svg { display: block; pointer-events: none; }

/* Connect Spotify button */
.sm-sp-connect-btn {
    display: block;
    margin-top: 10px;
    background: #1DB954;
    color: #000;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    border-radius: 50px;
    padding: 11px 16px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sm-sp-connect-btn:hover { background: #1aa34a; }

/* ── Practice footer (delete song) ──────────────────────── */
.sm-practice-footer {
    padding: 24px 16px 8px;
    display: flex;
    justify-content: center;
}

.sm-delete-song-btn {
    background: none;
    border: none;
    color: var(--red);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sm-delete-song-btn:hover { background: rgba(196,43,43,0.08); }

/* ── Confirm dialog ──────────────────────────────────────── */
.sm-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sm-confirm-overlay.open { opacity: 1; }
.sm-confirm-overlay.hidden { display: none; }

.sm-confirm-sheet {
    background: var(--surface);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 24px 20px 32px;
    width: 100%;
    max-width: 560px;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sm-confirm-overlay.open .sm-confirm-sheet { transform: translateY(0); }

.sm-confirm-msg {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.45;
}

.sm-confirm-skip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    justify-content: center;
    cursor: pointer;
}
.sm-confirm-skip.hidden { display: none; }

.sm-confirm-btns {
    display: flex;
    gap: 10px;
}

.sm-confirm-cancel,
.sm-confirm-ok {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.sm-confirm-cancel {
    background: var(--surface2);
    color: var(--text);
}
.sm-confirm-cancel:hover { background: var(--border); }

.sm-confirm-ok {
    background: var(--red);
    color: #fff;
}
.sm-confirm-ok:hover { background: #a82020; }

/* ── UG Auto-scraped Tabs section ────────────────────────── */
.sm-ug-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

.sm-ug-tab-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
}

.sm-ug-tab-card.sm-dragging {
    opacity: 0.35;
    border-style: dashed;
}

.sm-ug-drag-handle {
    font-size: 18px;
    padding: 0 6px 0 2px;
    align-self: center;
}

.sm-ug-tab-card.open {
    box-shadow: var(--shadow-md);
}

.sm-ug-tab-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.sm-ug-tab-header:active { background: var(--surface2); }

.sm-ug-tab-header-left {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.sm-ug-tab-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 1px;
}

.sm-ug-tab-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

.sm-ug-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.sm-ug-badge-chords {
    background: rgba(0, 85, 200, 0.1);
    color: var(--blue);
}

.sm-ug-badge-tab {
    background: rgba(180, 80, 0, 0.1);
    color: var(--orange);
}

.sm-ug-badge-official {
    background: rgba(218, 165, 32, 0.15);
    color: #daa520;
}

.sm-ug-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.sm-ug-rating {
    font-size: 11px;
    color: var(--yellow);
    font-weight: 600;
}

.sm-ug-open-btn {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.sm-ug-open-btn:hover { color: var(--accent); }

.sm-ug-delete-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.sm-ug-delete-btn:hover { color: var(--red); }

.sm-ug-star-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.sm-ug-star-btn:hover { color: var(--yellow, #f5a623); }
.sm-ug-star-btn.starred { color: var(--yellow, #f5a623); }


.sm-ug-notation {
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre;
    overflow-x: auto;
    padding: 12px 14px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}

.sm-ug-ext-hint {
    font-size: 13px;
    color: var(--text-muted, #6e6e73);
    padding: 10px 14px;
    background: var(--accent-dim, rgba(212,98,42,0.1));
    border: 1px solid var(--accent, #d4622a);
    border-radius: 10px;
    line-height: 1.5;
}
.sm-ug-ext-hint a {
    color: var(--accent, #d4622a);
    font-weight: 600;
    text-decoration: none;
}
.sm-ug-ext-hint a:hover { text-decoration: underline; }
.sm-ug-rescrape-area {
    margin-top: 4px;
}
.sm-ug-scraping-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-muted, #6e6e73);
    border: 1px solid var(--border, #e5e5ea);
    border-radius: 10px;
    margin-top: 8px;
}

/* ── UG Rendered content ──────────────────────────────────────── */
.ug-meta-bar {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    padding: 6px 14px 4px;
    border-bottom: 1px solid var(--border);
}

.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;
}

/* 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;
}

.ug-tab-block {
    font-family: '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.5;
    -webkit-overflow-scrolling: touch;
}

/* ── UG Full-Screen Reader ──────────────────────────────────────── */

#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;
}

/* ── Karaoke "Midnight Karaoke" reader theme ─────────────────────── */

/* Background — multi-layer gradient */
#ug-reader-overlay {
    background:
        radial-gradient(ellipse 120% 80% at 20% 15%, rgba(15,25,60,0.6), transparent 60%),
        radial-gradient(ellipse 100% 100% at 80% 85%, rgba(30,15,45,0.5), transparent 50%),
        linear-gradient(160deg, #0a0e1a 0%, #111832 35%, #1a1028 65%, #0c1f2e 100%);
}
/* Vignette overlay */
#ug-reader-overlay::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, rgba(0,0,0,0.35) 100%);
}

/* Lyrics — warm white with cool glow */
#ug-reader-overlay .ug-lyrics {
    color: #f0f0f5;
    font-weight: 700;
    -webkit-text-stroke: 0.5px rgba(0,0,0,0.4);
    paint-order: stroke fill;
    text-shadow: 0 0 8px rgba(200,210,240,0.15);
}
/* Chords — amber gold with warm glow */
#ug-reader-overlay .ug-chords {
    color: #ffc940;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255,201,64,0.35), 0 0 16px rgba(255,180,40,0.15);
}
/* Section labels — cyan-teal accent */
#ug-reader-overlay .ug-section-label {
    color: #5de0d8;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(93,224,216,0.25);
}
/* Tab blocks — cool muted blue-grey */
#ug-reader-overlay .ug-tab-block { color: rgba(180,195,220,0.75); }
#ug-reader-overlay .ug-tab-block .ug-chord { color: #ffc940; text-shadow: 0 0 4px rgba(255,201,64,0.2); }

/* Header — frosted glass */
#ug-reader-overlay .ug-reader-header {
    background: rgba(8,10,20,0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(255,255,255,0.06);
    position: relative; z-index: 2;
}
#ug-reader-overlay .ug-rh-title { color: #f0f0f5; }
#ug-reader-overlay .ug-rh-meta { color: rgba(255,255,255,0.45); }
#ug-reader-overlay .ug-rh-close { color: rgba(255,255,255,0.5); }

/* Toolbar — frosted glass */
#ug-reader-overlay .ug-reader-toolbar {
    background: rgba(8,10,20,0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top-color: rgba(255,255,255,0.06);
    position: relative; z-index: 2;
}
#ug-reader-overlay .ug-tb-btn {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
}
#ug-reader-overlay .ug-tb-autoscroll {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
}
#ug-reader-overlay .ug-tb-autoscroll.active { background: #2979ff; border-color: #2979ff; color: #fff; }
#ug-reader-overlay .ug-tb-font { color: rgba(255,255,255,0.6); }
#ug-reader-overlay .ug-tb-instrument-btn { color: #ffc940; }
#ug-reader-overlay .ug-tb-speed { accent-color: #2979ff; }

/* Scroll area */
#ug-reader-overlay .ug-reader-scroll {
    background: transparent;
    position: relative; z-index: 1;
}

/* Chord-playing animation — gold pulse */
#ug-reader-overlay .chord-playing {
    animation: karaoke-chord-pulse 0.8s ease-in-out infinite;
    background: rgba(255,201,64,0.12);
}
@keyframes karaoke-chord-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,201,64,0); }
    50%      { box-shadow: 0 0 0 5px rgba(255,201,64,0.25); }
}

/* Misc elements */
#ug-reader-overlay .ug-repeat-marker { color: rgba(255,255,255,0.35); }
#ug-reader-overlay .ug-end-marker { color: rgba(255,255,255,0.3); }
#ug-reader-overlay .ug-tb-star-btn.starred { color: #ffc940; }
#ug-reader-overlay .ug-tb-theory-btn { color: rgba(255,255,255,0.5); }
#ug-reader-overlay .ug-tb-theory-btn.active { background: #ffc940; color: #0a0e1a; border-color: #ffc940; }
#ug-reader-overlay .ug-tb-chord-scroll-btn { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
#ug-reader-overlay .ug-tb-chord-scroll-btn.active { background: #e0723a; border-color: #e0723a; color: #fff; }
#ug-reader-overlay .ug-tb-trippy-btn { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
#ug-reader-overlay .ug-tb-key-btn { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); }
#ug-reader-overlay .ug-tb-capo-val { color: rgba(255,255,255,0.5); }
#ug-reader-overlay .ug-tb-tempo-label { color: rgba(255,255,255,0.5); }
#ug-reader-overlay .ug-tb-tempo-slider { accent-color: #ffc940; }
#ug-reader-overlay .ug-tb-save-btn { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }

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

/* When trippy is on, make structural layers transparent so canvas shows through */
#ug-reader-overlay.trippy-on {
    background: transparent;
}
#ug-reader-overlay.trippy-on .ug-reader-header {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}
#ug-reader-overlay.trippy-on .ug-reader-scroll {
    background: transparent;
    position: relative;
    z-index: 1;
}
#ug-reader-overlay.trippy-on .ug-reader-toolbar {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top-color: rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

/* Text legibility — blocky white text with heavy black outline for contrast */
#ug-reader-overlay.trippy-on .ug-reader-content {
    position: relative;
    z-index: 1;
}
#ug-reader-overlay.trippy-on .ug-lyrics {
    color: #fff;
    font-weight: 800;
    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.8);
    paint-order: stroke fill;
    text-shadow:
        -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        0 0 12px rgba(0, 0, 0, 1),
        0 0 24px rgba(0, 0, 0, 0.8);
}
#ug-reader-overlay.trippy-on .ug-chords .ug-chord {
    color: #ffd700;
    font-weight: 900;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.9);
    paint-order: stroke fill;
    text-shadow:
        -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        0 0 10px rgba(0, 0, 0, 1),
        0 0 20px rgba(255, 215, 0, 0.3);
}
#ug-reader-overlay.trippy-on .ug-section-label {
    color: #fff;
    font-weight: 900;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.9);
    paint-order: stroke fill;
    text-shadow:
        -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        0 0 12px rgba(0, 0, 0, 1);
}
#ug-reader-overlay.trippy-on .ug-tab-block {
    color: #fff;
    font-weight: 700;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
    paint-order: stroke fill;
    text-shadow:
        -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        0 0 10px rgba(0, 0, 0, 1);
}
#ug-reader-overlay.trippy-on .ug-tab-block .ug-chord {
    color: #ffd700;
    font-weight: 900;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.9);
    paint-order: stroke fill;
    text-shadow:
        -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        0 0 10px rgba(0, 0, 0, 1);
}

/* Trippy button styling */
.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;
}

/* ── Scroll area ── */
.ug-reader-scroll {
    flex: 1;
    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 with readable max-width */
.ug-reader-content {
    max-width: 960px;
    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: space-around;
    height: 64px;
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 0 6px;
    gap: 2px;
}

.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-size: 14px;
    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; padding: 0 12px; font-size: 12px; font-weight: 600; }

.ug-tb-autoscroll {
    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;
    -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;
}

/* ── 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 {
    border-color: var(--border, #e5e5ea);
    background: var(--surface2, #f2f2f7);
    color: var(--text, #1c1c1e);
}
#ug-chord-popup .ug-tb-btn:active { background: var(--border, #e5e5ea); }

/* ── Lyrics Viewer Overlay ─────────────────────────────── */
#lv-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

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

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

.lv-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.lv-content {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    font-size: var(--lv-font-size, 18px);
    line-height: 1.7;
}

.lv-line {
    margin: 0;
    padding: 0;
    color: var(--text);
}

.lv-spacer {
    height: 0.85em;
    margin: 0;
}

.lv-section-label {
    margin: 1.8em 0 0.5em;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lv-content .lv-section-label:first-child {
    margin-top: 0;
}

/* ── "Read Lyrics" button in song detail ───────────────── */
.sm-open-lyrics-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.sm-open-lyrics-btn:hover {
    background: var(--surface2, var(--border));
}

/* ── Album artwork thumbnails ────────────────────────────── */
.sm-song-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface2);
}
.sm-song-thumb-placeholder {
    background: var(--border);
}

/* Practice hero artwork */
.sm-practice-hero-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.sm-practice-art {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}
.sm-practice-hero-text {
    flex: 1;
    min-width: 0;
}

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

/* ── UG Reader — Save to Practice toolbar button ─────────── */
.ug-tb-save-btn {
    padding: 0 12px;
    height: 34px;
    width: auto;
    border-radius: 8px;
    border: 1.5px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    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; }

/* ── Play Tab — Recent Plays ─────────────────────────────── */
.play-recents-section {
    padding: 16px 0 0;
}

.play-recents-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 0 16px 8px;
}

.play-recents-list {
    display: flex;
    flex-direction: column;
}

.play-recent-card {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 11px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}
.play-recent-card:active { background: var(--surface2); }

.play-recent-info { flex: 1; min-width: 0; }

.play-recent-name {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.play-recent-artist {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.play-recent-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

.play-recent-play-icon {
    flex-shrink: 0;
    color: var(--accent);
    font-size: 16px;
    opacity: 0.7;
}

.play-recents-empty {
    text-align: center;
    padding: 60px 24px 24px;
    color: var(--text-muted);
}
.play-recents-empty-icon { font-size: 44px; margin-bottom: 14px; }
.play-recents-empty-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.play-recents-empty-text { font-size: 14px; line-height: 1.5; }

.play-recents-spacer { height: 80px; } /* breathing room above fixed search bar */

/* ── Play Search Bar (fixed above nav, Play tab only) ─────── */
.play-search-bar {
    position: fixed;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    z-index: 99;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.07);
}
.play-search-bar.hidden { display: none; }

.play-search-input-wrap { position: relative; }

.play-search-input {
    width: 100%;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
    transition: border-color 0.15s;
}
.play-search-input:focus { border-color: var(--accent); }

/* Typeahead pops UP from the bottom search bar */
.play-typeahead {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.14);
    max-height: 340px;
    overflow-y: auto;
    z-index: 102;
    -webkit-overflow-scrolling: touch;
}
.play-typeahead.hidden { display: none; }

.play-typeahead .sm-typeahead-item {
    border-bottom: 1px solid var(--border);
}
.play-typeahead .sm-typeahead-item:last-child { border-bottom: none; }

/* ── Unified Typeahead sections ──────────────────────────── */
.ta-section {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

/* Artist card in typeahead */
.ta-artist-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    background: var(--accent-bg);
    -webkit-tap-highlight-color: transparent;
    transition: background .1s;
}
.ta-artist-card:active { background: var(--accent-dim); }

.ta-artist-photo {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--surface2);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    border: 2px solid rgba(212,98,42,.25);
    overflow: hidden;
}
.ta-artist-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.ta-artist-info { flex: 1; min-width: 0; }
.ta-artist-name { font-size: 16px; font-weight: 700; color: var(--text); }
.ta-artist-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ta-artist-cta { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 3px; }

.ta-in-lib-pill {
    font-size: 11px; font-weight: 600;
    color: var(--green);
    background: rgba(30,138,64,.1);
    border: 1px solid rgba(30,138,64,.25);
    border-radius: 4px;
    padding: 1px 6px;
    display: inline-block;
    margin-top: 3px;
}
.ta-artist-arrow { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }

/* Song row in typeahead (unified) */
.ta-song {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .1s;
}
.ta-song:last-child { border-bottom: none; }
.ta-song:active { background: var(--accent-dim); }

.ta-thumb {
    width: 40px; height: 40px;
    border-radius: 5px;
    background: var(--surface2);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0; overflow: hidden;
}
.ta-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ta-info { flex: 1; min-width: 0; }
.ta-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-artist-line { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.ta-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.played-badge {
    font-size: 10px; font-weight: 600;
    color: var(--blue);
    background: rgba(0,85,200,.08);
    border: 1px solid rgba(0,85,200,.2);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}
[data-theme="dark"] .played-badge {
    background: rgba(77,163,255,.12);
    border-color: rgba(77,163,255,.25);
}

.ta-stage-badge {
    font-size: 10px; font-weight: 600;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}
.ta-stage-badge[data-stage="want_to_learn"]  { background: #ebebf0; color: #5a5a60; }
.ta-stage-badge[data-stage="early"]          { background: #dde8fc; color: var(--blue); }
.ta-stage-badge[data-stage="middle"]         { background: #fdf0d0; color: var(--yellow); }
.ta-stage-badge[data-stage="getting_close"]  { background: #fde8d8; color: var(--orange); }
.ta-stage-badge[data-stage="perfected"]      { background: #d6f0dd; color: var(--green); }

[data-theme="dark"] .ta-stage-badge[data-stage="want_to_learn"]  { background: #2a2a30; color: #98989e; }
[data-theme="dark"] .ta-stage-badge[data-stage="early"]          { background: rgba(77,163,255,.15); color: var(--blue); }
[data-theme="dark"] .ta-stage-badge[data-stage="middle"]         { background: rgba(255,214,10,.12); color: var(--yellow); }
[data-theme="dark"] .ta-stage-badge[data-stage="getting_close"]  { background: rgba(255,159,10,.12); color: var(--orange); }
[data-theme="dark"] .ta-stage-badge[data-stage="perfected"]      { background: rgba(48,209,88,.12); color: var(--green); }

.ta-add-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all .12s;
    font-family: var(--font);
    line-height: 1;
}
.ta-add-btn:active, .ta-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

/* ── Artist drill-down panel ─────────────────────────────── */
.artist-drill {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 120;
}
.artist-drill.open { transform: translateX(0); }

@media (min-width: 700px) {
    .artist-drill {
        right: auto;
        width: 100%;
        max-width: var(--content-max);
        left: 50%;
        transform: translateX(calc(-50% + 100vw));
        box-shadow: -20px 0 60px rgba(0,0,0,.14), 20px 0 60px rgba(0,0,0,.14);
    }
    .artist-drill.open { transform: translateX(-50%); }

    .drill-hdr { height: 60px; }
    .drill-hdr-title { font-size: 18px; }

    .drill-artist-strip { padding: 20px 24px; gap: 18px; }
    .drill-artist-avatar { width: 72px; height: 72px; font-size: 36px; }
    .drill-artist-name { font-size: 20px; }
    .drill-artist-sub { font-size: 14px; }

    .drill-filter { padding: 10px 20px; }
    .drill-section-label { padding: 14px 24px 6px; }
    .drill-song { padding: 12px 24px; }
    .drill-thumb { width: 46px; height: 46px; }
}

.drill-hdr {
    height: 52px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    padding: 0 4px 0 0;
    flex-shrink: 0;
}
.drill-back-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 22px;
    cursor: pointer;
    padding: 8px 12px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.drill-hdr-title {
    flex: 1;
    font-size: 17px; font-weight: 600;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drill-hdr-count { font-size: 13px; color: var(--text-muted); padding-right: 16px; }

.drill-artist-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.drill-artist-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--surface2);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    border: 2px solid var(--border);
    overflow: hidden;
}
.drill-artist-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.drill-artist-meta { flex: 1; }
.drill-artist-name { font-size: 18px; font-weight: 700; color: var(--text); }
.drill-artist-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.drill-filter {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.drill-filter::-webkit-scrollbar { display: none; }
.dchip {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
    transition: all .12s;
    -webkit-tap-highlight-color: transparent;
}
.dchip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.drill-song-list {
    flex: 1;
    overflow-y: auto;
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
}

.drill-section-label {
    padding: 12px 16px 4px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface2);
}

.drill-song {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .1s;
}
.drill-song:last-child { border-bottom: none; }
.drill-song:active { background: var(--accent-dim); }

.drill-num { width: 18px; font-size: 12px; color: var(--text-muted); text-align: right; flex-shrink: 0; }
.drill-thumb {
    width: 40px; height: 40px;
    border-radius: 5px;
    background: var(--surface2);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0; overflow: hidden;
}
.drill-thumb img { width: 100%; height: 100%; object-fit: cover; }
.drill-info { flex: 1; min-width: 0; }
.drill-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drill-album { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.drill-right { flex-shrink: 0; }

.drill-add-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all .12s;
    line-height: 1;
}
.drill-add-btn:active, .drill-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.drill-loading, .drill-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.drill-scroll-sentinel { height: 1px; }

.drill-loading-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.drill-load-more-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px 16px;
    padding: 10px 0;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s, border-color .12s;
}
.drill-load-more-btn:hover, .drill-load-more-btn:active {
    background: var(--accent-dim);
    border-color: var(--accent);
}
.drill-load-more-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (min-width: 700px) {
    .play-search-bar {
        left: 50%; transform: translateX(-50%);
        right: auto; width: 100%;
        max-width: var(--content-max);
    }
}

/* ── Unified Song Card (Play + Jam queues) ─────────────────────────── */

.song-card {
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.12s;
}

.song-card:active {
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transform: scale(0.99);
}

/* Playing state — accent left border */
.song-card.song-card-playing {
    border-left: 3px solid var(--accent);
    background: #fff9f7;
}

/* Played state — dimmed */
.song-card.song-card-played {
    opacity: 0.6;
}

/* Drag handle — left strip, only shown on Up Next cards */
.song-card-drag {
    display: flex;
    align-items: center;
    padding: 0 4px 0 8px;
    color: var(--border);
    font-size: 18px;
    cursor: grab;
    flex-shrink: 0;
    align-self: stretch;
    touch-action: none;
}

.song-card-drag:active {
    cursor: grabbing;
}

/* Artwork */
.song-card-art {
    width: 48px;
    height: 48px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 6px;
    align-self: center;
    margin: 8px 0 8px 8px;
}

.song-card-art-placeholder {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--border);
    border-radius: 6px;
    align-self: center;
    margin: 8px 0 8px 8px;
}

/* Main info — center column */
.song-card-info {
    flex: 1;
    min-width: 0;
    padding: 10px 10px 10px 12px;
}

.song-card-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.song-card-artist {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tab info row — badge + title, informational only */
.song-card-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.song-card-tab-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--accent);
    background: rgba(212, 98, 42, 0.10);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

.song-card-tab-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    font-size: 12px;
}

/* Last played time */
.song-card-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    opacity: 0.8;
}

/* Right actions column */
.song-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 8px 8px 4px;
    flex-shrink: 0;
    align-self: stretch;
    justify-content: center;
}

.song-card-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 6px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.song-card-btn:active {
    background: var(--surface2);
}

.song-card-star-btn {
    font-size: 18px;
    color: var(--border);
}

.song-card-star-btn.starred {
    color: #f0a030;
}

.song-card-remove-btn {
    color: var(--red, #ff3b30);
    font-size: 14px;
}

/* Dragging state */
.song-card.dragging {
    opacity: 0.5;
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

/* Queue section layout helpers */
.queue-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
}

.queue-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.queue-section-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 8px;
}


/* ── UG Reader Versions Sheet ──────────────────────────────────────── */

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

.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;
}

/* ── Play page typeahead + button ──────────────────────────────────── */

.play-typeahead-item {
    display: flex;
    align-items: center;
    position: relative;
}

.play-typeahead-add-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 18px;
    line-height: 1;
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.play-typeahead-add-btn:active,
.play-typeahead-add-btn:disabled {
    background: var(--surface2);
}

/* Queue empty hint */
.queue-empty-hint {
    padding: 16px;
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
}

/* Add button in queue section header */
.btn-queue-add {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.btn-queue-add:active {
    background: var(--surface2);
}

/* ── UG Scrape overlay (play page — finding tabs) ─────────── */
.play-scrape-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.play-scrape-overlay.hidden { display: none; }
.play-scrape-msg {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: 0 32px;
}
.play-scrape-hint {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    text-align: center;
}
.play-scrape-dismiss {
    margin-top: 4px;
    padding: 8px 28px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
}
.play-scrape-dismiss:hover { background: rgba(255,255,255,0.18); }

/* ═══════════════════════════════════════════════════════════════
   Theory Mode — UG Reader chord analysis & ear training
   ═══════════════════════════════════════════════════════════════ */

/* ── Theory toolbar button ──────────────────────────────────────── */
.ug-tb-theory-btn {
    width: auto;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.ug-tb-theory-btn.active {
    background: var(--accent, #d4622a);
    color: #fff;
}

/* ── Level picker popover ───────────────────────────────────────── */
#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 slider (in toolbar) ──────────────────────────────────── */
.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);
}

/* ── Function color coding (Learn & Practice levels) ────────────── */
.fn-tonic        { color: #5B9BD5 !important; } /* blue — tonic family */
.fn-subdominant  { color: #70AD47 !important; } /* green — subdominant */
.fn-dominant     { color: #E85D5D !important; } /* red — dominant */
.fn-nondiatonic  { color: #E8A84C !important; } /* amber — non-diatonic */

/* ── Theory chord display ───────────────────────────────────────── */
.theory-roman {
    font-weight: 700;
    font-size: 1em;
}

.theory-chord-sub {
    font-size: 0.8em;
    opacity: 0.55;
    font-weight: 400;
}

.theory-hidden {
    font-weight: 600;
    opacity: 0.5;
    font-size: 0.9em;
    letter-spacing: 0.02em;
}

/* ── Peek tooltip ───────────────────────────────────────────────── */
.theory-peek {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface, #1c1c1e);
    border: 1px solid var(--border, #38383a);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #e5e5e7);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}
.theory-peek.visible {
    opacity: 1;
}

/* Make chord elements position-relative for peek tooltip anchoring */
.theory-learn .ug-chord,
.theory-practice .ug-chord,
.theory-ear .ug-chord,
.theory-memory .ug-chord {
    position: relative;
    cursor: pointer;
}

/* In theory mode, override the default chord popup on click
   — peek replaces it for levels 2-4 */
.theory-practice .ug-chord,
.theory-ear .ug-chord,
.theory-memory .ug-chord {
    -webkit-tap-highlight-color: transparent;
}

/* ── Section play button ────────────────────────────────────────── */
.ug-theory-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border, #38383a);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #6e6e73);
    font-size: 11px;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    padding: 0;
}
.ug-theory-play-btn:hover {
    background: var(--surface2, #2c2c2e);
    color: var(--text, #e5e5e7);
}
.ug-theory-play-btn.playing {
    background: var(--accent, #d4622a);
    color: #fff;
    border-color: var(--accent, #d4622a);
}

/* ── Section progression label ─────────────────────────────────── */
.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;
}

/* ── Playing chord highlight / pulse ────────────────────────────── */
@keyframes chord-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 98, 42, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(212, 98, 42, 0.3); }
}

.chord-playing {
    border-radius: 3px;
    animation: chord-pulse 0.8s ease-in-out infinite;
    background: rgba(212, 98, 42, 0.15);
}

/* ── Spotify button + embed in UG reader ───────────────────────── */
.ug-rh-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.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);
}

.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; }
.ug-spotify-embed iframe {
    display: block;
    border-radius: 12px;
}

/* ── Scale fretboard toggle button in reader header ───────────── */
.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; }

/* ── Scale fretboard panel — floating right-side overlay ──────── */
.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: 26px;
    height: 26px;
    cursor: se-resize;
    border-radius: 0 0 10px 0;
    z-index: 100;
    background-color: rgba(180, 160, 140, 0.25);
    background-image:
        radial-gradient(circle, rgba(106, 96, 85, 0.7) 1.4px, transparent 1.4px);
    background-size: 5px 5px;
    background-position: 6px 6px;
    background-repeat: repeat;
    transition: opacity 0.15s ease, background-color 0.15s;
    opacity: 1;
    touch-action: none;
}
.ug-sf-resize-grip:hover {
    background-color: rgba(180, 160, 140, 0.45);
}

.ug-sf-resize-grip-left {
    right: auto;
    left: 0;
    cursor: sw-resize;
    border-radius: 0 0 0 10px;
    background-position: 4px 6px;
}

/* ── A/B Loop Panel ────────────────────────────────────── */
.sm-loop-panel {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Shared row layout */
.sm-loop-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 5px;
    flex-wrap: wrap;
}

/* Row 1: transport strip */
.sm-loop-row-transport {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 7px 12px;
    flex-wrap: wrap;
    row-gap: 6px;
}

/* Vertical divider between marker group and loop controls */
.sm-loop-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.12);
    margin: 0 3px;
    flex-shrink: 0;
}

/* A / B set buttons — compact */
.sm-loop-set-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: rgba(255,255,255,0.65);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    cursor: pointer;
    text-transform: uppercase;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.sm-loop-set-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* Time chips — monospace, compact */
.sm-loop-chip {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 3px;
    padding: 4px 6px;
    min-width: 48px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sm-loop-chip.is-set {
    color: var(--accent);
    background: rgba(212,98,42,0.1);
    border-style: solid;
    border-color: rgba(212,98,42,0.35);
}

/* Current-time chip */
.sm-loop-now {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    border-style: solid;
    font-size: 11px;
    min-width: 44px;
}

/* Arrow separator */
.sm-loop-sep {
    color: rgba(255,255,255,0.18);
    font-size: 11px;
    flex-shrink: 0;
}

/* Icon buttons — compact squares */
.sm-loop-icon-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 5px;
    color: rgba(255,255,255,0.5);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.sm-loop-icon-btn:hover { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); }
.sm-loop-icon-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Repeat count */
.sm-loop-count {
    width: 30px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    text-align: center;
    padding: 3px;
    outline: none;
    font-family: inherit;
    flex-shrink: 0;
}
.sm-loop-count:focus { border-color: rgba(212,98,42,0.5); }

.sm-loop-count-label {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    margin-left: -3px;
    flex-shrink: 0;
}

/* Row 2: modifiers strip — speed, pitch, zoom inline */
.sm-loop-row-controls {
    gap: 12px;
    padding: 6px 12px 8px;
    flex-wrap: wrap;
}

.sm-loop-control-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sm-loop-control-icon {
    color: rgba(255,255,255,0.28);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.sm-loop-control-icon svg { width: 12px; height: 12px; }

/* Speed buttons */
.sm-loop-speed-btns {
    display: flex;
    gap: 3px;
}

.sm-loop-speed-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: rgba(255,255,255,0.38);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    cursor: pointer;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.sm-loop-speed-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }
.sm-loop-speed-btn.active {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
}

/* Pitch controls */
.sm-loop-pitch-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}

.sm-loop-pitch-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: rgba(255,255,255,0.38);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.sm-loop-pitch-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }

.sm-loop-pitch-label {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 3px 6px;
    min-width: 42px;
    text-align: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.sm-loop-pitch-label:hover { color: rgba(255,255,255,0.5); }
.sm-loop-pitch-label.is-shifted {
    color: var(--accent);
    background: rgba(212,98,42,0.1);
    border-color: rgba(212,98,42,0.4);
}

/* Save trigger — compact pill in transport row */
.sm-loop-save-trigger {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(212,98,42,0.1);
    border: 1px solid rgba(212,98,42,0.25);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 8px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
    margin-left: 2px;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.sm-loop-save-trigger:hover:not(:disabled) {
    background: rgba(212,98,42,0.22);
    border-color: rgba(212,98,42,0.45);
    color: #fff;
}
.sm-loop-save-trigger:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Inline save row — below controls, hidden until triggered */
.sm-loop-save-row {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(212,98,42,0.15);
    align-items: center;
    background: rgba(212,98,42,0.04);
    animation: loopSaveSlide 0.18s ease-out;
}
@keyframes loopSaveSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.sm-loop-save-row.hidden { display: none; }

/* Saved loops section */
.sm-saved-loops-list {
    padding: 0;
}
.sm-saved-loops-list:not(:empty) {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 2px;
}
.sm-saved-loops-list:not(:empty)::before {
    content: 'SAVED LOOPS';
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.25);
    padding: 6px 14px 2px;
}

.sm-saved-loop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 0;
    transition: background 0.12s;
    cursor: default;
    animation: loopItemIn 0.2s ease-out both;
}
@keyframes loopItemIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}
.sm-saved-loop-item:hover { background: rgba(255,255,255,0.04); }
.sm-saved-loop-item.is-active {
    background: rgba(212,98,42,0.08);
    border-left: 2px solid var(--accent);
    padding-left: 12px;
}

.sm-saved-loop-name {
    font-size: 12px;
    color: rgba(255,255,255,0.88);
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-saved-loop-range {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', 'Courier New', monospace;
    color: var(--accent);
    opacity: 0.7;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

.sm-saved-loop-load {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: rgba(255,255,255,0.6);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.sm-saved-loop-load:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.sm-saved-loop-load.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    pointer-events: none;
    font-size: 9px;
}

.sm-saved-loop-del {
    background: none;
    border: none;
    color: rgba(255,255,255,0.18);
    cursor: pointer;
    padding: 3px 4px;
    flex-shrink: 0;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.sm-saved-loop-del:hover { color: var(--red); }

/* Zoom button/label — matches pitch style */
.sm-loop-zoom-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: rgba(255,255,255,0.38);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.sm-loop-zoom-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); }

.sm-loop-zoom-label {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 3px 6px;
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.sm-loop-zoom-label:hover { color: rgba(255,255,255,0.5); }
.sm-loop-zoom-label.is-zoomed {
    color: #4fc3f7;
    background: rgba(79,195,247,0.1);
    border-color: rgba(79,195,247,0.4);
}

/* ── Zoom overlay on the video ────────────────────────────── */
.sm-zoom-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    cursor: crosshair;
}
.sm-zoom-overlay.active {
    pointer-events: auto;
}

.sm-zoom-crosshair {
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.sm-zoom-crosshair.visible { opacity: 1; }
.sm-zoom-crosshair::before,
.sm-zoom-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.6);
    border-radius: 1px;
}
.sm-zoom-crosshair::before {
    width: 2px;
    height: 24px;
    left: 11px;
    top: 0;
}
.sm-zoom-crosshair::after {
    width: 24px;
    height: 2px;
    left: 0;
    top: 11px;
}

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.sm-theme-toggle {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
}
.sm-theme-toggle:active { opacity: 0.7; }
/* Sun in light mode, moon in dark */
.sm-theme-toggle::before { content: '☽'; }
[data-theme="dark"] .sm-theme-toggle::before { content: '☀'; }

/* Dark mode — specific hardcoded colour overrides */
[data-theme="dark"] .sm-header {
    background: var(--surface);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .sm-nav {
    background: var(--surface);
    border-top-color: var(--border);
}
[data-theme="dark"] .app-logo path { fill: var(--accent); stroke: var(--text); }
[data-theme="dark"] .app-logo circle { stroke: var(--text); }
[data-theme="dark"] .app-logo circle:last-child { fill: var(--text); }