/* bundle-app.css — player + toolkit + blog + phases + community + profile + songs + gomi */
/* ========================================
   player.css - Music Player Styles
======================================== */

/* Music Player Container */
.music-player-container {
    background: linear-gradient(135deg, var(--card-bg) 0%, #1f1035 100%);
    border-radius: 24px;
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 20px 60px rgba(217, 70, 239, 0.3);
    border: 1px solid rgba(217, 70, 239, 0.2);
}

.player-display {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.album-art {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(217, 70, 239, 0.4);
    flex-shrink: 0;
}

.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.album-art.playing img {
    animation: rotate 20s linear infinite;
}

.vinyl-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #0a0514 30%, transparent 30%);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

.now-playing-info {
    flex: 1;
    min-width: 250px;
}

.now-playing-info h2 {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.now-playing-info p {
    font-size: 1.3rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}

.song-genre {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(217, 70, 239, 0.2);
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(217, 70, 239, 0.3);
}

.player-controls {
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(217, 70, 239, 0.1);
}

.progress-container {
    margin-bottom: 1.5rem;
}

.time-display {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.7rem;
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 500;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent-purple));
    width: 0%;
    transition: width 0.1s ease;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.6);
}

.control-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.control-btn {
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(217, 70, 239, 0.4);
}

.control-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(217, 70, 239, 0.6);
}

.play-btn {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.volume-control span:first-child {
    font-size: 1.5rem;
}

.volume-slider {
    width: 200px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(217, 70, 239, 0.5);
}

.volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 10px rgba(217, 70, 239, 0.5);
}

#volumeValue {
    min-width: 50px;
    font-weight: 600;
    color: var(--text);
}

.playlist-section {
    margin-top: 3rem;
}

.playlist-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.playlist-container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem 1.5rem;
    background: rgba(217, 70, 239, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.playlist-item:hover {
    background: rgba(217, 70, 239, 0.15);
    border-color: rgba(217, 70, 239, 0.3);
    transform: translateX(8px);
}

.playlist-item.active {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.2), rgba(168, 85, 247, 0.2));
    border-color: var(--primary);
}

.playlist-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dim);
    min-width: 40px;
}

.playlist-info {
    flex: 1;
}

.playlist-song-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--text);
}

.playlist-artist {
    font-size: 0.9rem;
    color: var(--text-dim);
}

.playlist-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* Music Dashboard */
.music-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.song-card {
    background: var(--card-bg-alpha, rgba(26,15,46,0.4));
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.song-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.1), rgba(239, 68, 68, 0.1));
    opacity: 0;
    transition: opacity 0.3s;
}

.song-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(217, 70, 239, 0.4);
}

.song-card:hover::before { opacity: 1; }

.song-card-content { position: relative; z-index: 1; }

.song-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.song-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-card-artist {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.song-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.song-card-genre {
    background: rgba(217, 70, 239, 0.2);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
}

/* Song Detail Page */
.song-detail-page {
    display: none;
    position: fixed;
    top: 3rem;
    left: 260px;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0514 0%, #1a0a2e 50%, #16001e 100%);
    z-index: 100;   /* ✅ sidebar (z-index 1) se zyada, lekin modals (2000) se kam */
    overflow-y: auto;
    padding-bottom: 120px;
}

.song-detail-page.active { display: block; }

.song-detail-container {
    max-width: 1400px;
    margin: 0 auto;
}

.song-detail-header {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: flex-start;
}

.song-detail-artwork { flex-shrink: 0; }

.song-detail-artwork img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(217, 70, 239, 0.4);
}

.song-detail-info {
    flex: 1;
    padding-top: 1rem;
    min-width: 0;
    overflow: hidden;
}

.back-button {
    background: rgba(217, 70, 239, 0.2);
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.back-button:hover {
    background: var(--primary);
    color: white;
    transform: translateX(-5px);
}

.song-detail-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, var(--primary), var(--accent-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.song-detail-artist {
    font-size: 1.5rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}

.song-detail-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.action-button {
    background: rgba(217, 70, 239, 0.2);
    border: 2px solid var(--primary);
    color: var(--text);
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-button:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(217, 70, 239, 0.4);
}

.action-button.primary {
    background: var(--primary);
    color: white;
}

.song-detail-stats {
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    background: var(--card-bg-alpha, rgba(26,15,46,0.4));
    border-radius: 15px;
    border: 2px solid rgba(217, 70, 239, 0.2);
    flex-wrap: wrap;
}

.stat-item { text-align: center; }
.stat-item .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.stat-item .stat-label { font-size: 0.9rem; color: var(--text-dim); margin-top: 0.3rem; }

.song-detail-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
    align-items: start; /* ← prevents sidebar from stretching to main col height */
}

.song-detail-main { flex: 1; min-width: 0; }

.song-detail-sidebar {
    background: var(--card-bg-alpha, rgba(26,15,46,0.4));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1.5rem;
    border: 2px solid rgba(217, 70, 239, 0.2);
    /* Sticky: stays at top of viewport while left column scrolls past */
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 200px); /* viewport minus top bar + bottom player */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clip, inner list scrolls */
}

.section-title-small {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary);
}

.lyrics-section {
    background: var(--card-bg-alpha, rgba(26,15,46,0.4));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 2px solid rgba(217, 70, 239, 0.2);
}

.lyrics-text { line-height: 2; color: var(--text); white-space: pre-line; }

/* Comments Section */
.comments-section { background: var(--card-bg-alpha, rgba(26,15,46,0.4)); backdrop-filter: blur(10px); border-radius: 20px; padding: 2rem; border: 2px solid rgba(217, 70, 239, 0.2); }
.comment-input-wrapper { display: flex; gap: 1rem; margin-bottom: 2rem; }
.comment-input { flex: 1; background: var(--input-bg, rgba(18,8,32,0.6)); border: 2px solid rgba(217, 70, 239, 0.3); border-radius: 10px; padding: 1rem; color: var(--text); font-size: 1rem; font-family: 'Outfit', sans-serif; resize: vertical; min-height: 60px; }
.comment-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 20px rgba(217, 70, 239, 0.3); }
.comment-submit-btn { background: var(--primary); border: none; color: white; padding: 1rem 2rem; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.3s; }
.comment-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(217, 70, 239, 0.4); }
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 480px;  /* ~5-6 comments visible; grows with future comments via scroll */
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(217,70,239,0.3) transparent;
}
.comments-list::-webkit-scrollbar { width: 4px; }
.comments-list::-webkit-scrollbar-track { background: transparent; }
.comments-list::-webkit-scrollbar-thumb { background: rgba(217,70,239,0.3); border-radius: 4px; }
.comment-item { background: var(--card-bg-alpha, rgba(26,15,46,0.4)); border-radius: 10px; padding: 1rem; border: 1px solid rgba(217, 70, 239, 0.2); }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.comment-author { font-weight: 600; color: var(--primary); }
.comment-time { font-size: 0.85rem; color: var(--text-dim); }
.comment-text { color: var(--text); line-height: 1.6; }

/* Similar Songs / Up Next */
.similar-songs-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    overflow-y: auto;
    flex: 1;            /* fills remaining sidebar height */
    padding-right: 4px; /* room for scrollbar */
    /* custom thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(217,70,239,0.4) transparent;
}
.similar-songs-list::-webkit-scrollbar { width: 4px; }
.similar-songs-list::-webkit-scrollbar-track { background: transparent; }
.similar-songs-list::-webkit-scrollbar-thumb { background: rgba(217,70,239,0.4); border-radius: 4px; }
.similar-song-item { display: flex; gap: 1rem; padding: 0.8rem; background: var(--card-bg-alpha, rgba(26,15,46,0.4)); border-radius: 10px; cursor: pointer; transition: all 0.3s; border: 1px solid transparent; }
.similar-song-item:hover { background: rgba(217, 70, 239, 0.2); border-color: var(--primary); transform: translateX(5px); }
.similar-song-image { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; }
.similar-song-info { flex: 1; min-width: 0; overflow: hidden; }
.similar-song-title { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.similar-song-artist { font-size: 0.85rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* Bottom Player Bar */
.bottom-player-bar { display: none; position: fixed; bottom: 0; left: 260px; right: 0; background: var(--modal-bg, rgba(26,15,46,0.95)); backdrop-filter: blur(20px); border-top: 2px solid rgba(217, 70, 239, 0.3); padding: 1rem 2rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1000; box-shadow: 0 -5px 30px rgba(217, 70, 239, 0.3); }
.bottom-player-bar.active { display: block; }
.bottom-player-content { display: flex; align-items: center; gap: 2rem; max-width: 1600px; margin: 0 auto; }
.bottom-player-top-row { display: contents; }
.bottom-player-song-info { display: flex; align-items: center; gap: 1rem; min-width: 250px; max-width: 280px; transition: all 0.3s; overflow: hidden; }
.bottom-player-song-info:hover { background: rgba(217, 70, 239, 0.1); border-radius: 12px; padding: 0.5rem; margin: -0.5rem; }
.bottom-player-artwork { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; transition: all 0.3s; }
.bottom-player-song-info:hover .bottom-player-artwork { transform: scale(1.05); box-shadow: 0 4px 15px rgba(217, 70, 239, 0.5); }
.bottom-player-text { flex: 1; }
.bottom-player-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.bottom-player-artist { font-size: 0.9rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.bottom-player-controls-wrapper { flex: 1; display: flex; flex-direction: column; gap: 0.8rem; }
.bottom-player-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.bottom-control-btn { background: none; border: none; color: var(--text); font-size: 1.8rem; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; }
.bottom-control-btn:hover { color: var(--primary); background: rgba(217, 70, 239, 0.2); transform: scale(1.1); }
.bottom-control-btn.play-btn { background: var(--primary); color: white; font-size: 2rem; width: 50px; height: 50px; }
.bottom-control-btn.play-btn:hover { background: var(--accent-purple); transform: scale(1.15); }
/* Shuffle / Repeat — smaller, dimmed by default, lit up when active */
.bottom-control-btn.shuffle-btn,
.bottom-control-btn.repeat-btn  { font-size: 1.1rem; width: 36px; height: 36px; opacity: 0.45; transition: opacity 0.2s, transform 0.2s, background 0.2s; }
.bottom-control-btn.shuffle-btn:hover,
.bottom-control-btn.repeat-btn:hover  { opacity: 0.9; background: rgba(217, 70, 239, 0.15); }
.bottom-control-btn.shuffle-btn.active,
.bottom-control-btn.repeat-btn.active { opacity: 1; color: var(--primary); position: relative; }
/* Dot indicator under active shuffle/repeat */
.bottom-control-btn.shuffle-btn.active::after,
.bottom-control-btn.repeat-btn.active::after  { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
/* Repeat-one gets a red tint */
.bottom-control-btn.repeat-btn.repeat-one { color: var(--accent-red, #ef4444); }
.bottom-control-btn.repeat-btn.repeat-one::after { background: var(--accent-red, #ef4444); }
.bottom-progress-wrapper { display: flex; align-items: center; gap: 1rem; }
.bottom-progress-time { font-size: 0.85rem; color: var(--text-dim); min-width: 45px; }
.bottom-progress-bar { flex: 1; height: 6px; background: rgba(217, 70, 239, 0.2); border-radius: 10px; cursor: pointer; position: relative; overflow: visible; transition: height 0.2s; }
.bottom-progress-bar:hover { height: 8px; box-shadow: 0 0 8px rgba(217, 70, 239, 0.5); }
.bottom-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent-red)); border-radius: 10px; width: 0%; position: relative; will-change: width; overflow: visible; }
.bottom-progress-fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: white; border-radius: 50%; box-shadow: 0 0 10px rgba(217, 70, 239, 0.8); opacity: 0; transition: opacity 0.2s; }
.bottom-progress-bar:hover .bottom-progress-fill::after { opacity: 1; }
.bottom-player-volume { display: flex; align-items: center; gap: 0.8rem; min-width: 150px; }
.volume-icon { color: var(--text); font-size: 1.5rem; }
.bottom-volume-slider { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: rgba(217, 70, 239, 0.2); border-radius: 10px; outline: none; cursor: pointer; }
.bottom-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--primary); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(217, 70, 239, 0.6); }
.bottom-volume-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--primary); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 10px rgba(217, 70, 239, 0.6); }
.bottom-volume-value { font-size: 0.85rem; color: var(--text-dim); min-width: 35px; }

/* Playback Speed Control */
.playback-speed-control { display: flex; align-items: center; margin-left: 1rem; }
.speed-selector { background: rgba(217, 70, 239, 0.2); border: 2px solid var(--primary); color: var(--text); padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: 'Outfit', sans-serif; }
.speed-selector:hover { background: var(--primary); color: white; }
.speed-selector:focus { outline: none; box-shadow: 0 0 15px rgba(217, 70, 239, 0.5); }

/* A-B Loop Control */
.ab-loop-control { display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; }
.ab-loop-btn { background: rgba(217, 70, 239, 0.2); border: 2px solid rgba(217, 70, 239, 0.5); color: var(--text); width: 35px; height: 35px; border-radius: 8px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
.ab-loop-btn:hover { background: rgba(217, 70, 239, 0.3); border-color: var(--primary); transform: scale(1.05); }
.ab-loop-btn.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 0 15px rgba(217, 70, 239, 0.6); }
.ab-loop-btn.set { background: var(--accent-orange); border-color: var(--accent-orange); color: white; }

/* Flowing Comments */
.flowing-comment {
    position: absolute;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: white;
    z-index: 2;
}

.flowing-comment:nth-child(5n+1) { background: linear-gradient(135deg, #ec4899, #d946ef); }
.flowing-comment:nth-child(5n+2) { background: linear-gradient(135deg, #f97316, #fb923c); }
.flowing-comment:nth-child(5n+3) { background: linear-gradient(135deg, #10b981, #34d399); }
.flowing-comment:nth-child(5n+4) { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.flowing-comment:nth-child(5n+5) { background: linear-gradient(135deg, #a855f7, #c084fc); }

.flowing-comment[data-direction="0"] { animation: tunnelFromTop 10s linear forwards; }
.flowing-comment[data-direction="1"] { animation: tunnelFromRight 10s linear forwards; }
.flowing-comment[data-direction="2"] { animation: tunnelFromBottom 10s linear forwards; }
.flowing-comment[data-direction="3"] { animation: tunnelFromLeft 10s linear forwards; }

.comments-background.active { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   Mini Equalizer — bottom player bar, right side
   Bars animate independently while playing, freeze when paused.
   Toggle .playing class via JS on #csEqualizer
   ═══════════════════════════════════════════════════════ */

.cs-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
    padding-right: 6px;
    opacity: 0.55;
    transition: opacity 0.4s;
    flex-shrink: 0;
}

.cs-eq.playing {
    opacity: 1;
}

.cs-eq-bar {
    display: block;
    width: 3px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, var(--primary), var(--accent-purple));
    min-height: 4px;
    height: 4px; /* resting height */
    animation: none;
    transition: height 0.15s ease;
    box-shadow: 0 0 6px rgba(217, 70, 239, 0.4);
}

/* Only animate when playing */
.cs-eq.playing .cs-eq-bar:nth-child(1) { animation: cs-eq-bounce 0.82s ease-in-out infinite 0.00s; }
.cs-eq.playing .cs-eq-bar:nth-child(2) { animation: cs-eq-bounce 0.65s ease-in-out infinite 0.15s; }
.cs-eq.playing .cs-eq-bar:nth-child(3) { animation: cs-eq-bounce 0.90s ease-in-out infinite 0.05s; }
.cs-eq.playing .cs-eq-bar:nth-child(4) { animation: cs-eq-bounce 0.72s ease-in-out infinite 0.22s; }
.cs-eq.playing .cs-eq-bar:nth-child(5) { animation: cs-eq-bounce 0.78s ease-in-out infinite 0.10s; }

@keyframes cs-eq-bounce {
    0%, 100% { height: 4px; }
    30%       { height: 18px; }
    60%       { height: 8px; }
    80%       { height: 14px; }
}

/* ═══════════════════════════════════════════════════════
   Staggered entry animation for music dashboard song cards
   ═══════════════════════════════════════════════════════ */
#musicDashboard .song-card {
    animation: fadeIn 0.4s ease both;
}
#musicDashboard .song-card:nth-child(1)  { animation-delay: 0ms; }
#musicDashboard .song-card:nth-child(2)  { animation-delay: 55ms; }
#musicDashboard .song-card:nth-child(3)  { animation-delay: 110ms; }
#musicDashboard .song-card:nth-child(4)  { animation-delay: 165ms; }
#musicDashboard .song-card:nth-child(5)  { animation-delay: 220ms; }
#musicDashboard .song-card:nth-child(6)  { animation-delay: 275ms; }
#musicDashboard .song-card:nth-child(7)  { animation-delay: 330ms; }
#musicDashboard .song-card:nth-child(8)  { animation-delay: 385ms; }

@media (prefers-reduced-motion: reduce) {
    #musicDashboard .song-card { animation: none; }
    .cs-eq.playing .cs-eq-bar { animation: none !important; height: 12px; }
}

/* ═══════════════════════════════════════════════════════
   ROOT FIX — Mobile: Virtual Keyboard / Bottom Player Bar
   
   Android Chrome does not resize the viewport when the
   virtual keyboard opens. position:fixed bottom:0 stays
   anchored to the old viewport bottom — visually behind
   the keyboard. This hides the player bar when both:
     • width ≤ 768px (mobile device)
     • height ≤ 450px (keyboard has pushed viewport height down)
   This is a CSS-only solution requiring no JS changes.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) and (max-height: 450px) {
    .bottom-player-bar {
        display: none !important;
    }
}

/* ── Phase-2: Locked Song Cards (Music Player) ───────────────────── */
.song-card--locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.7);
}
.song-card-locked-thumb {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.song-card-lock-icon {
    font-size: 2rem;
    opacity: 0.6;
}
.song-card-title--locked {
    color: rgba(255,255,255,0.35);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   MUSIC BEAT — Redesigned Music Player Dashboard
   Inspired by modern music streaming UI (music beat style)
   ═══════════════════════════════════════════════════════ */

/* Override default grid for new layout */
#musicDashboard {
    display: block !important;
    grid-template-columns: unset !important;
    gap: unset !important;
    margin-top: 0 !important;
}

/* Main two-column wrapper */
.mp-beat-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}

.mp-beat-main { min-width: 0; }

/* Section row header */
.mp-beat-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    margin-top: 1.8rem;
}
.mp-beat-row-header:first-child { margin-top: 0; }

.mp-beat-row-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
}

.mp-beat-view-all {
    font-size: 0.82rem;
    color: var(--primary);
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    transition: background 0.2s;
}
.mp-beat-view-all:hover { background: rgba(217,70,239,0.15); }

/* Horizontal scroll row */
.mp-beat-scroll-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(217,70,239,0.3) transparent;
}
.mp-beat-scroll-row::-webkit-scrollbar { height: 4px; }
.mp-beat-scroll-row::-webkit-scrollbar-thumb { background: rgba(217,70,239,0.3); border-radius: 4px; }

/* Featured cards */
.mp-beat-feat-card {
    flex-shrink: 0;
    width: 180px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mp-beat-feat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(217,70,239,0.35);
}
.mp-beat-feat-card img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    display: block;
}
.mp-beat-feat-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.75) 70%);
    padding: 1.2rem 0.8rem 0.8rem;
}
.mp-beat-feat-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-beat-feat-artist {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-beat-feat-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 20px rgba(217,70,239,0.6);
}
.mp-beat-feat-card:hover .mp-beat-feat-play { transform: translate(-50%, -50%) scale(1); }

/* ── Trending Section ── */
.mp-beat-trending-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(217,70,239,0.12);
    border-radius: 18px;
    overflow: hidden;
}

.mp-beat-trend-cover {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.mp-beat-trend-cover img {
    width: 200px;
    height: 100%;
    min-height: 240px;
    max-height: 280px;
    object-fit: cover;
    display: block;
}
.mp-beat-trend-cover-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 2rem 1rem 0.8rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.mp-beat-trend-list {
    padding: 0.8rem 0.8rem 0.8rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: center;
}

.mp-beat-trend-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.mp-beat-trend-item:hover { background: rgba(217,70,239,0.12); }
.mp-beat-trend-item.active { background: rgba(217,70,239,0.18); }

.mp-beat-trend-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dim);
    min-width: 22px;
}
.mp-beat-trend-item.active .mp-beat-trend-num { color: var(--primary); }

.mp-beat-trend-info { flex: 1; min-width: 0; }
.mp-beat-trend-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-beat-trend-sub {
    font-size: 0.78rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-beat-trend-duration {
    font-size: 0.78rem;
    color: var(--text-dim);
    flex-shrink: 0;
}

.mp-beat-trend-play-icon {
    font-size: 0.8rem;
    color: var(--primary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
}
.mp-beat-trend-item:hover .mp-beat-trend-play-icon { opacity: 1; }
.mp-beat-trend-item.active .mp-beat-trend-play-icon { opacity: 1; }

/* ── Recommended small cards ── */
.mp-beat-rec-card {
    flex-shrink: 0;
    width: 140px;
    cursor: pointer;
    transition: transform 0.22s ease;
}
.mp-beat-rec-card:hover { transform: translateY(-4px); }
.mp-beat-rec-card img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    display: block;
}
.mp-beat-rec-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-beat-rec-artist {
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Right Sidebar ── */
.mp-beat-sidebar {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(217,70,239,0.12);
    border-radius: 18px;
    padding: 1.2rem;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 200px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mp-beat-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.mp-beat-sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.mp-beat-side-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(217,70,239,0.3) transparent;
}
.mp-beat-side-list::-webkit-scrollbar { width: 3px; }
.mp-beat-side-list::-webkit-scrollbar-thumb { background: rgba(217,70,239,0.3); border-radius: 4px; }

.mp-beat-side-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.mp-beat-side-item:hover { background: rgba(217,70,239,0.12); }
.mp-beat-side-item.active { background: rgba(217,70,239,0.2); }

.mp-beat-side-img {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.mp-beat-side-info { flex: 1; min-width: 0; }
.mp-beat-side-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-beat-side-sub {
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-beat-side-dur {
    font-size: 0.75rem;
    color: var(--text-dim);
    flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .mp-beat-layout {
        grid-template-columns: 1fr;
    }
    .mp-beat-sidebar { display: none; }
}
@media (max-width: 768px) {
    .mp-beat-trending-layout {
        grid-template-columns: 1fr;
    }
    .mp-beat-trend-cover img { min-height: 160px; max-height: 180px; width: 100%; }
    .mp-beat-feat-card { width: 150px; }
    .mp-beat-feat-card img { width: 150px; height: 150px; }
    .mp-beat-rec-card { width: 120px; }
    .mp-beat-rec-card img { width: 120px; height: 120px; }

    /* FIX: bundle-app.css sets display:flex on these with no media query,
       which loads AFTER bundle-critical.css and overrides its mobile
       display:none. !important here restores the correct mobile layout:
       only artwork + song info + prev/play/next visible on mobile. */
    .bottom-progress-wrapper { display: none !important; }
    .bottom-player-volume    { display: none !important; }

    /* Shuffle / repeat slightly smaller on mobile to keep bar compact */
    .bottom-control-btn.shuffle-btn,
    .bottom-control-btn.repeat-btn  { font-size: 1rem; width: 30px; height: 30px; }
}
/* ========================================
   toolkit.css - Chord Toolkit Styles
======================================== */

#toolkit {
    max-width: 1100px;
    margin: auto;
}

.toolkit-section {
    padding: 25px;
    margin-bottom: 30px;
    background: rgba(26, 15, 46, 0.7);
    border-radius: 14px;
}

.toolkit-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, var(--primary), var(--accent-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tool-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tool-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.toolkit-section select,
.toolkit-section input,
.toolkit-section textarea {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border-radius: 8px;
    background: var(--output-bg, rgba(15,8,30,0.95));
    color: #f0e7ff;
    border: 1px solid rgba(217, 70, 239, 0.5);
}

/* Dropdown Arrow Color */
.toolkit-section select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #d946ef 50%),
        linear-gradient(135deg, #d946ef 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    background-color: rgba(15, 8, 30, 0.95);
    padding-right: 35px;
    cursor: pointer;
}

.toolkit-section option {
    background: var(--card-bg);
    color: #f0e7ff;
}

.toolkit-section select:focus,
.toolkit-section textarea:focus,
.toolkit-section input:focus {
    outline: none;
    border-color: #d946ef;
    box-shadow: 0 0 12px rgba(217, 70, 239, 0.5);
}

#inputChords,
#outputChords {
    min-height: 120px;
    resize: none;
}

#copyBtn {
    width: 100%;
    margin-top: 15px;
    padding: 12px;
    font-size: 15px;
    border-radius: 10px;
}

.output-box {
    min-height: 90px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
    background: var(--output-bg, rgba(15,8,30,0.95));
    border: 1px solid rgba(217, 70, 239, 0.3);
    border-radius: 8px;
    color: var(--text);
}

#progressionOutput h3 {
    margin-top: 10px;
    font-size: 15px;
    color: var(--primary);
}

/* Practice Controls */
.practice-controls-section {
    background: var(--card-bg-alpha, rgba(26,15,46,0.4));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 2px solid rgba(217, 70, 239, 0.2);
}

.practice-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.practice-control-group {
    background: var(--input-bg, rgba(18,8,32,0.6));
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(217, 70, 239, 0.3);
}

.practice-control-label {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* Speed Slider */
.speed-slider-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.speed-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.speed-value-display {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.25), rgba(239, 68, 68, 0.25));
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 0.6rem 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    min-width: 75px;
    text-align: center;
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.speed-value-display.changing {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(217, 70, 239, 0.6);
    border-color: var(--accent-red);
}

.speed-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right,
        rgba(217, 70, 239, 0.2) 0%,
        rgba(217, 70, 239, 0.5) 50%,
        rgba(217, 70, 239, 0.2) 100%);
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.speed-slider:hover {
    background: linear-gradient(to right,
        rgba(217, 70, 239, 0.3) 0%,
        rgba(217, 70, 239, 0.7) 50%,
        rgba(217, 70, 239, 0.3) 100%);
}

.speed-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent-red));
    cursor: grab;
    box-shadow: 0 2px 10px rgba(217, 70, 239, 0.6);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.speed-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.15);
    box-shadow: 0 4px 20px rgba(217, 70, 239, 0.9);
}

.speed-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(217, 70, 239, 0.8);
}

.speed-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent-red));
    cursor: grab;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(217, 70, 239, 0.6);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.speed-slider:active::-moz-range-thumb {
    cursor: grabbing;
    transform: scale(1.15);
    box-shadow: 0 4px 20px rgba(217, 70, 239, 0.9);
}

.speed-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-dim);
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.speed-selector-large {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--output-bg, rgba(10,5,20,0.9));
    border: 2px solid rgba(217, 70, 239, 0.4);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.speed-selector-large:hover {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
}

/* A-B Loop Large Buttons */
.ab-loop-buttons {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.ab-loop-btn-large {
    flex: 1;
    min-width: 70px;
    padding: 1rem;
    background: var(--output-bg, rgba(10,5,20,0.9));
    border: 2px solid rgba(217, 70, 239, 0.4);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.ab-loop-btn-large:hover {
    border-color: var(--primary);
    background: rgba(217, 70, 239, 0.2);
    transform: translateY(-2px);
}

.ab-loop-btn-large.set {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.3), rgba(239, 68, 68, 0.3));
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.4);
}

.ab-loop-btn-large.active {
    background: linear-gradient(135deg, var(--primary), var(--accent-red));
    color: white;
    border-color: var(--primary);
    box-shadow: 0 0 25px rgba(217, 70, 239, 0.6);
    animation: pulse 1.5s infinite;
}

.loop-keyboard-hint {
    margin-top: 1rem;
    padding: 0.8rem;
    background: var(--output-bg-light, rgba(10,5,20,0.6));
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}

.loop-keyboard-hint p {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0.3rem 0;
}

.loop-keyboard-hint code {
    background: rgba(217, 70, 239, 0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--primary);
    font-weight: 600;
}

/* Key Detection & Transpose Styles */
.key-display-container {
    background: var(--key-display-bg, linear-gradient(135deg,rgba(10,5,20,0.9),rgba(26,15,46,0.7)));
    border: 2px solid rgba(217, 70, 239, 0.4);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.detected-key {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.3rem;
    font-family: 'Space Grotesk', sans-serif;
}

.key-type {
    color: var(--text-dim);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.transpose-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.transpose-btn {
    flex: 1;
    padding: 0.8rem;
    background: var(--output-bg, rgba(10,5,20,0.9));
    border: 2px solid rgba(217, 70, 239, 0.4);
    border-radius: 10px;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.transpose-btn:hover {
    border-color: var(--primary);
    background: rgba(217, 70, 239, 0.2);
    transform: translateY(-2px);
}

.transpose-btn:active { transform: translateY(0); }

.transpose-value {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.25), rgba(239, 68, 68, 0.25));
    border: 2px solid var(--primary);
    border-radius: 10px;
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
}

.reset-key-btn {
    width: 100%;
    padding: 0.7rem;
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.2), rgba(239, 68, 68, 0.2));
    border: 2px solid rgba(217, 70, 239, 0.3);
    border-radius: 10px;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 1rem;
}

.reset-key-btn:hover {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.3), rgba(239, 68, 68, 0.3));
    border-color: var(--primary);
    color: var(--text);
}

.key-info-hint {
    margin-top: 1rem;
    padding: 0.8rem;
    background: var(--output-bg-light, rgba(10,5,20,0.6));
    border-radius: 8px;
    border-left: 3px solid var(--accent-orange);
}

.key-info-hint p {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin: 0.2rem 0;
}

.detecting-animation {
    display: inline-block;
    animation: pulse-glow 1.5s infinite;
}

/* ================================================================
   TOOLKIT v2 — Card Grid + Tool Modals
   Added: card grid, modal overlay, Metronome, Scale Finder,
          Chord Diagram styles. All existing styles kept intact.
================================================================ */

/* ── Tool Cards Grid ─────────────────────────────────────────── */
.tk-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.tk-card {
    position: relative;
    background: rgba(26, 15, 46, 0.65);
    border: 1px solid rgba(217, 70, 239, 0.15);
    border-radius: 18px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
    backdrop-filter: blur(10px);
}
.tk-card:hover, .tk-card:focus {
    transform: translateY(-4px);
    border-color: rgba(217, 70, 239, 0.5);
    box-shadow: 0 12px 40px rgba(217, 70, 239, 0.18);
    outline: none;
}
.tk-card:active { transform: translateY(-2px); }

/* Gradient glow on hover */
.tk-card-glow {
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    opacity: 0;
    background: linear-gradient(135deg, var(--tk-color, #d946ef), transparent 60%);
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.tk-card:hover .tk-card-glow { opacity: 0.08; }

.tk-card-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.25rem;
    position: relative;
    z-index: 1;
}

/* Icon wrap */
.tk-card-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--tk-color, #d946ef) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--tk-color, #d946ef) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.tk-card:hover .tk-card-icon-wrap { transform: scale(1.08); }
.tk-card-emoji { font-size: 1.55rem; line-height: 1; }

/* Text */
.tk-card-text {
    flex: 1;
    min-width: 0;
}
.tk-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #f0e7ff;
    margin: 0 0 0.2rem;
}
.tk-card-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196, 181, 212, 0.55);
    margin: 0;
    line-height: 1.45;
}
.tk-card-badge {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.12rem 0.55rem;
    background: linear-gradient(135deg, rgba(217,70,239,0.35), rgba(168,85,247,0.25));
    border: 1px solid rgba(217, 70, 239, 0.45);
    border-radius: 50px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #e879f9;
    text-transform: uppercase;
}

/* Arrow */
.tk-card-arrow {
    font-size: 1.1rem;
    color: rgba(217, 70, 239, 0.4);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}
.tk-card:hover .tk-card-arrow {
    transform: translateX(4px);
    color: rgba(217, 70, 239, 0.8);
}

/* ── Tool Modal Overlay ──────────────────────────────────────── */
.tk-tool-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tk-tool-modal.open { display: flex; }

/* Modal box */
.tk-tool-box {
    background: linear-gradient(160deg, #0d0720 0%, #180930 60%, #0a0415 100%);
    border: 1px solid rgba(217, 70, 239, 0.25);
    border-radius: 22px;
    box-shadow:
        0 0 0 1px rgba(217,70,239,0.08),
        0 30px 80px rgba(0,0,0,0.8);
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
/* Subtle grid texture */
.tk-tool-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background-image:
        linear-gradient(rgba(217,70,239,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217,70,239,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Modal header */
.tk-tool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(217, 70, 239, 0.12);
    position: sticky;
    top: 0;
    background: linear-gradient(160deg, #0d0720 0%, #180930 100%);
    border-radius: 22px 22px 0 0;
    z-index: 1;
}
.tk-tool-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tk-tool-header-emoji {
    font-size: 1.6rem;
    line-height: 1;
}
.tk-tool-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f0e7ff;
    margin: 0;
    letter-spacing: 0.03em;
}
.tk-tool-header span {
    font-size: 0.72rem;
    color: rgba(196,181,212,0.45);
    letter-spacing: 0.05em;
}
.tk-tool-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(217,70,239,0.2);
    background: rgba(217,70,239,0.08);
    color: rgba(196,181,212,0.7);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.tk-tool-close:hover {
    background: rgba(217,70,239,0.2);
    color: #f0e7ff;
}

/* Modal body */
.tk-tool-body {
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Label inside modals */
.tk-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(196,181,212,0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Metronome ────────────────────────────────────────────────── */
.metro-beats {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.75rem;
}
.metro-beat {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(217,70,239,0.08);
    border: 2px solid rgba(217,70,239,0.2);
    transition: background 0.05s ease, border-color 0.05s ease, transform 0.05s ease;
}
.metro-beat.accent {
    background: rgba(217,70,239,0.25);
    border-color: rgba(217,70,239,0.6);
}
.metro-beat.active {
    background: rgba(217,70,239,0.7) !important;
    border-color: #d946ef !important;
    transform: scale(1.12);
    box-shadow: 0 0 16px rgba(217,70,239,0.7);
}

.metro-bpm-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}
.metro-bpm-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(217,70,239,0.3);
    background: rgba(217,70,239,0.1);
    color: #d946ef;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
    user-select: none;
}
.metro-bpm-btn:hover {
    background: rgba(217,70,239,0.25);
    border-color: rgba(217,70,239,0.6);
}
.metro-bpm-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #f0e7ff;
    min-width: 5ch;
    text-align: center;
    letter-spacing: -0.02em;
}

.metro-slider-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 1.5rem;
}
.metro-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 4px;
    background: rgba(217,70,239,0.25);
    outline: none;
    cursor: pointer;
}
.metro-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d946ef;
    box-shadow: 0 0 8px rgba(217,70,239,0.7);
    cursor: pointer;
}
.metro-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d946ef;
    border: none;
    box-shadow: 0 0 8px rgba(217,70,239,0.7);
}

.metro-timesig-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.metro-timesig-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(196,181,212,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.metro-timesig-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.metro-sig-btn {
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(217,70,239,0.2);
    background: rgba(217,70,239,0.06);
    color: rgba(196,181,212,0.6);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.metro-sig-btn:hover, .metro-sig-btn.active {
    background: rgba(217,70,239,0.2);
    border-color: rgba(217,70,239,0.5);
    color: #f0e7ff;
}

.metro-controls {
    display: flex;
    gap: 0.75rem;
}
.metro-tap-btn {
    flex: 1;
    padding: 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(217,70,239,0.3);
    background: rgba(217,70,239,0.1);
    color: #c084fc;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.metro-tap-btn:hover { background: rgba(217,70,239,0.2); }
.metro-tap-btn:active { transform: scale(0.97); }

.metro-play-btn {
    flex: 1;
    padding: 0.8rem;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 16px rgba(217,70,239,0.35);
}
.metro-play-btn:hover { box-shadow: 0 6px 20px rgba(217,70,239,0.5); }
.metro-play-btn.running {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 16px rgba(239,68,68,0.35);
}

/* ── Scale Finder ─────────────────────────────────────────────── */
.scale-notes-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.scale-note-pill {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    background: rgba(217,70,239,0.12);
    border: 1px solid rgba(217,70,239,0.3);
    color: #d946ef;
    transition: all 0.15s;
}
.scale-note-pill.root {
    background: rgba(217,70,239,0.35);
    border-color: #d946ef;
    color: #f0e7ff;
    box-shadow: 0 0 10px rgba(217,70,239,0.4);
}
.scale-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}
.scale-info-item {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(217,70,239,0.12);
    border-radius: 10px;
    padding: 0.75rem 1rem;
}
.scale-info-item label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(196,181,212,0.4);
    display: block;
    margin-bottom: 0.3rem;
}
.scale-info-item span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #c084fc;
}
.scale-pattern-display {
    margin-top: 1rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(217,70,239,0.12);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(196,181,212,0.7);
    letter-spacing: 0.15em;
}

/* ── Chord Diagram ────────────────────────────────────────────── */
.cd-filter-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.cd-filter-btn {
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
    border: 1px solid rgba(217,70,239,0.2);
    background: rgba(217,70,239,0.06);
    color: rgba(196,181,212,0.6);
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.cd-filter-btn:hover, .cd-filter-btn.active {
    background: rgba(217,70,239,0.22);
    border-color: rgba(217,70,239,0.5);
    color: #f0e7ff;
}

.cd-chord-list {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.cd-chord-btn {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(168,85,247,0.2);
    background: rgba(168,85,247,0.07);
    color: rgba(196,181,212,0.7);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.cd-chord-btn:hover, .cd-chord-btn.active {
    background: rgba(168,85,247,0.25);
    border-color: #a855f7;
    color: #f0e7ff;
}

.cd-diagram-area {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(217,70,239,0.12);
    border-radius: 14px;
    padding: 1.25rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.cd-diagram-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #d946ef;
    text-align: center;
}
.cd-svg-wrap {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

/* ── Progression key selector ────────────────────────────────── */
#progressionKey {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border-radius: 8px;
    background: var(--output-bg, rgba(15,8,30,0.95));
    color: #f0e7ff;
    border: 1px solid rgba(217,70,239,0.5);
}

/* ── Light theme overrides ───────────────────────────────────── */
[data-theme="light"] .tk-card {
    background: rgba(253,250,255,0.82);
    border-color: rgba(185,31,214,0.15);
}
[data-theme="light"] .tk-card:hover {
    border-color: rgba(185,31,214,0.4);
    box-shadow: 0 12px 40px rgba(185,31,214,0.12);
}
[data-theme="light"] .tk-card-title { color: #1a0535; }
[data-theme="light"] .tk-card-desc  { color: rgba(91,45,140,0.55); }
[data-theme="light"] .tk-tool-box {
    background: linear-gradient(160deg, #f5eeff 0%, #ede0ff 60%, #f0e6ff 100%);
    border-color: rgba(185,31,214,0.2);
}
[data-theme="light"] .tk-tool-header {
    background: linear-gradient(160deg, #f5eeff 0%, #ede0ff 100%);
    border-bottom-color: rgba(185,31,214,0.15);
}
[data-theme="light"] .tk-tool-header h2 { color: #1a0535; }
[data-theme="light"] .tk-card-icon-wrap {
    background: color-mix(in srgb, var(--tk-color, #d946ef) 12%, white);
    border-color: color-mix(in srgb, var(--tk-color, #d946ef) 25%, white);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tk-cards-grid { grid-template-columns: 1fr; gap: 0.85rem; }
    .tk-tool-box { border-radius: 18px; }
    .metro-bpm-num { font-size: 2.5rem; }
    .scale-info-grid { grid-template-columns: 1fr; }
    .cd-svg-wrap { gap: 1rem; }
}

/* ── Combined Chord Tools card — full-width on its row ───────── */
.tk-card--wide {
    grid-column: 1 / -1;
}

/* ── Wider modal box for Chord Tools ─────────────────────────── */
.tk-tool-box--wide {
    max-width: 700px;
}

/* ── Chord Tools tab bar ─────────────────────────────────────── */
.ct-tabs {
    display: flex;
    gap: 0;
    padding: 0 1.5rem;
    border-bottom: 1px solid rgba(217, 70, 239, 0.12);
    background: rgba(0,0,0,0.15);
}
.ct-tab {
    padding: 0.65rem 1.1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(196,181,212,0.45);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
    margin-bottom: -1px;
}
.ct-tab:hover { color: rgba(196,181,212,0.8); }
.ct-tab.active {
    color: #d946ef;
    border-bottom-color: #d946ef;
}

/* ── Tab panels ──────────────────────────────────────────────── */
.ct-panel { display: none; }
.ct-panel.active { display: block; }

/* ── Light theme ─────────────────────────────────────────────── */
[data-theme="light"] .ct-tabs {
    background: rgba(255,255,255,0.3);
    border-bottom-color: rgba(185,31,214,0.12);
}
[data-theme="light"] .ct-tab { color: rgba(91,45,140,0.45); }
[data-theme="light"] .ct-tab:hover { color: rgba(91,45,140,0.8); }
[data-theme="light"] .ct-tab.active { color: #b91fd6; border-bottom-color: #b91fd6; }

/* ── Mobile: scrollable tabs ─────────────────────────────────── */
@media (max-width: 500px) {
    .ct-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ct-tab  { padding: 0.6rem 0.85rem; font-size: 0.78rem; }
    .tk-tool-box--wide { max-width: 100%; }
}

/* ================================================================
   LIGHT MODE COMPREHENSIVE FIXES — Toolkit Modals
   Fixes: selects, output-box, metronome, scale finder, chord diagram
================================================================ */

/* ── Selects & inputs inside modals (light mode) ────────────── */
[data-theme="light"] .toolkit-section select,
[data-theme="light"] .toolkit-section input,
[data-theme="light"] .toolkit-section textarea,
[data-theme="light"] #scaleRoot,
[data-theme="light"] #scaleType,
[data-theme="light"] #progressionKey {
    background-color: rgba(255,255,255,0.9);
    color: #1a0535;
    border-color: rgba(185,31,214,0.4);
}
[data-theme="light"] .toolkit-section select,
[data-theme="light"] #scaleRoot,
[data-theme="light"] #scaleType,
[data-theme="light"] #progressionKey {
    background-image:
        linear-gradient(45deg, transparent 50%, #b91fd6 50%),
        linear-gradient(135deg, #b91fd6 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
[data-theme="light"] .toolkit-section option,
[data-theme="light"] #scaleRoot option,
[data-theme="light"] #scaleType option {
    background: #f5eeff;
    color: #1a0535;
}

/* ── output-box in light mode ────────────────────────────────── */
[data-theme="light"] .output-box {
    background: rgba(255,255,255,0.75);
    border-color: rgba(185,31,214,0.2);
    color: #1a0535;
}
[data-theme="light"] #progressionOutput h3 { color: #b91fd6; }

/* ── Metronome light mode ────────────────────────────────────── */
[data-theme="light"] .metro-bpm-num {
    color: #1a0535;
}
[data-theme="light"] .metro-beat {
    background: rgba(185,31,214,0.1);
    border-color: rgba(185,31,214,0.35);
}
[data-theme="light"] .metro-beat.accent {
    background: rgba(185,31,214,0.22);
    border-color: rgba(185,31,214,0.6);
}
[data-theme="light"] .metro-timesig-label {
    color: rgba(91,45,140,0.7);
}
[data-theme="light"] .metro-sig-btn {
    color: rgba(91,45,140,0.7);
    border-color: rgba(185,31,214,0.25);
    background: rgba(185,31,214,0.07);
}
[data-theme="light"] .metro-sig-btn:hover,
[data-theme="light"] .metro-sig-btn.active {
    background: rgba(185,31,214,0.18);
    border-color: rgba(185,31,214,0.55);
    color: #1a0535;
}
[data-theme="light"] .metro-slider {
    background: rgba(185,31,214,0.25);
}
[data-theme="light"] .metro-tap-btn {
    background: rgba(185,31,214,0.1);
    border-color: rgba(185,31,214,0.3);
    color: #7c3aed;
}
[data-theme="light"] .metro-tap-btn:hover {
    background: rgba(185,31,214,0.2);
}
[data-theme="light"] .metro-bpm-btn {
    background: rgba(185,31,214,0.1);
    border-color: rgba(185,31,214,0.3);
    color: #b91fd6;
}
[data-theme="light"] .metro-bpm-btn:hover {
    background: rgba(185,31,214,0.2);
    border-color: rgba(185,31,214,0.55);
}

/* ── Scale Finder light mode ─────────────────────────────────── */
[data-theme="light"] .scale-info-item {
    background: rgba(255,255,255,0.7);
    border-color: rgba(185,31,214,0.2);
}
[data-theme="light"] .scale-info-item label {
    color: rgba(91,45,140,0.55);
}
[data-theme="light"] .scale-info-item span {
    color: #7c3aed;
}
[data-theme="light"] .scale-pattern-display {
    background: rgba(255,255,255,0.7);
    border-color: rgba(185,31,214,0.2);
    color: rgba(91,45,140,0.8);
}
[data-theme="light"] .scale-note-pill {
    background: rgba(185,31,214,0.1);
    border-color: rgba(185,31,214,0.3);
    color: #7c3aed;
}
[data-theme="light"] .scale-note-pill.root {
    background: rgba(185,31,214,0.25);
    border-color: #b91fd6;
    color: #1a0535;
    box-shadow: 0 0 10px rgba(185,31,214,0.3);
}

/* ── Chord Diagram light mode ────────────────────────────────── */
[data-theme="light"] .cd-diagram-area {
    background: rgba(255,255,255,0.7);
    border-color: rgba(185,31,214,0.2);
}
[data-theme="light"] .cd-filter-btn {
    color: rgba(91,45,140,0.65);
    border-color: rgba(185,31,214,0.22);
    background: rgba(185,31,214,0.06);
}
[data-theme="light"] .cd-filter-btn:hover,
[data-theme="light"] .cd-filter-btn.active {
    background: rgba(185,31,214,0.18);
    border-color: rgba(185,31,214,0.5);
    color: #1a0535;
}
[data-theme="light"] .cd-chord-btn {
    color: rgba(91,45,140,0.75);
    border-color: rgba(168,85,247,0.25);
    background: rgba(168,85,247,0.07);
}
[data-theme="light"] .cd-chord-btn:hover,
[data-theme="light"] .cd-chord-btn.active {
    background: rgba(168,85,247,0.2);
    border-color: #a855f7;
    color: #1a0535;
}
[data-theme="light"] .cd-diagram-title { color: #b91fd6; }


/* ── Harmonium Fullscreen Modal ─────────────────────────────── */
.tk-tool-modal--fullscreen {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.tk-harmonium-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.tk-harmonium-back {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.9rem;
    background: rgba(10, 5, 20, 0.88);
    border: 1.5px solid rgba(217, 70, 239, 0.45);
    border-radius: 999px;
    color: #e879f9;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(217, 70, 239, 0.25);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.tk-harmonium-back:hover {
    background: rgba(217, 70, 239, 0.18);
    border-color: rgba(217, 70, 239, 0.7);
    box-shadow: 0 0 16px rgba(217, 70, 239, 0.4);
}
.tk-harmonium-back:active {
    transform: scale(0.96);
}
.tk-harmonium-frame {
    width: 100%;
    height: 100%;
    flex: 1;
    border: none;
    display: block;
    background: #0a0514;
}

/* ── Harmonium Integrated Modal ─────────────────────────────── */
.hm-app-root {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #0a0514;
    font-family: 'Outfit', sans-serif;
}
.hm-back-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.9rem;
    background: rgba(10, 5, 20, 0.88);
    border: 1.5px solid rgba(217, 70, 239, 0.55);
    border-radius: 999px;
    color: #e879f9;
    font-family: 'Space Grotesk', 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(217, 70, 239, 0.28);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.hm-back-btn:hover {
    background: rgba(217, 70, 239, 0.2);
    border-color: rgba(217, 70, 239, 0.8);
    box-shadow: 0 0 18px rgba(217, 70, 239, 0.45);
}
.hm-back-btn:active { transform: scale(0.96); }

/* ── Back button repositioned inside header/topbar ── */
.hm-back-btn {
    position: static !important;
    top: auto !important;
    left: auto !important;
    flex-shrink: 0;
    align-self: center;
    margin-right: 0.6rem;
}
/* Scoped to harmonium modal only */
#tkModal-harmonium .hm-header { gap: 0.8rem; }
#tkModal-harmonium .hm-top-left { gap: 0.4rem; }
/* ═══════════════════════════════════════════════════════════════════
   blog.css — ChordStar Blog
   SYSTEM REFINEMENT v2 — mathematically consistent design system
   Modular scale: 1.25 ratio | 8px grid | Token-first
   All selectors scoped to #tkModal-blog
═══════════════════════════════════════════════════════════════════ */

/* ── Reset inside blog wrap ── */
#tkModal-blog .blog-wrap *,
#tkModal-blog .blog-wrap *::before,
#tkModal-blog .blog-wrap *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

/* ══════════════════════════════════════
   DESIGN TOKENS
   ──────────────────────────────────────
   Typography: 1.25 Modular Scale (Major Third)
   Spacing:    8px base grid
   Color:      1 bg · 1 surface · 1 text · 1 dim · 1 accent
══════════════════════════════════════ */
#tkModal-blog {
  /* — Font families — */
  --font-heading: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* — Modular type scale (×1.25 ratio, base 16px) —
       xs   → 0.64rem  (10.24px) Meta, labels, tags, dates
       sm   → 0.80rem  (12.80px) Secondary text, captions, authors
       base → 1.00rem  (16.00px) Body default
       md   → 1.25rem  (20.00px) Card titles, sub-headings
       lg   → 1.563rem (25.00px) Section headings
       xl   → 1.953rem (31.25px) Featured card heading
       2xl  → 2.441rem (39.06px) Article title / hero
  */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;

  /* — Color primitives — */
  --blog-bg:          #07060f;
  --blog-surface:     #0e0c1c;
  --blog-text:        #ede9f6;
  --blog-dim:         rgba(237,233,246,0.48);
  --blog-dim2:        rgba(237,233,246,0.25);
  --blog-accent:      #c084fc;
  --blog-accent-hi:   rgba(192,132,252,0.18);
  --blog-accent-lo:   rgba(192,132,252,0.08);
  --blog-border:      rgba(255,255,255,0.06);
  --blog-border-md:   rgba(255,255,255,0.10);

  /* — Radii — */
  --blog-r:      12px;
  --blog-r-sm:   8px;
  --blog-r-pill: 999px;

  /* — Spacing (strict 8px grid) — */
  --blog-s1:  8px;
  --blog-s2:  16px;
  --blog-s3:  24px;
  --blog-s4:  32px;
  --blog-s5:  48px;
  --blog-s6:  64px;
  --blog-s7:  96px;

  /* — Shadows — */
  --blog-shadow:      0 8px 32px rgba(0,0,0,0.4);
  --blog-shadow-lift: 0 20px 56px rgba(0,0,0,0.5), 0 0 48px rgba(192,132,252,0.06);
}

/* ── Blog wrap = body equivalent ── */
#tkModal-blog .blog-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--blog-bg);
  font-family: var(--font-body);
  color: var(--blog-text);
  line-height: 1.75;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Grain overlay */
#tkModal-blog .blog-wrap::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.28;
}

/* ══════════════════════════════════════
   NAV → .blog-header
══════════════════════════════════════ */
#tkModal-blog .blog-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(var(--blog-s3), 5vw, var(--blog-s6));
  height: 64px;
  background: rgba(7,6,15,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--blog-border);
}

#tkModal-blog .blog-header-left { display: flex; align-items: center; gap: var(--blog-s2); }

#tkModal-blog .blog-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-md);
  letter-spacing: -0.03em;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--blog-text) 0%, var(--blog-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#tkModal-blog .blog-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--blog-accent);
  background: var(--blog-accent-lo);
  border: 1px solid rgba(192,132,252,0.18);
  padding: 4px 10px;
  border-radius: var(--blog-r-pill);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#tkModal-blog .blog-close-btn {
  font-size: var(--text-sm);
  color: var(--blog-dim);
  display: flex;
  align-items: center;
  gap: var(--blog-s1);
  transition: color 200ms ease;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 12px;
  border-radius: var(--blog-r-pill);
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
}
#tkModal-blog .blog-close-btn:hover { color: var(--blog-text); }

/* ══════════════════════════════════════
   PAGE INTRO — replaces inline styles
   Role: establishes page-level hierarchy
══════════════════════════════════════ */
#tkModal-blog .blog-intro {
  padding: 0 0 var(--blog-s5);
  opacity: 0;
  animation: blogFadeUp 0.45s ease forwards 0.08s;
}

#tkModal-blog .blog-intro-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blog-dim2);
  margin-bottom: var(--blog-s1);
  line-height: 1;
}

#tkModal-blog .blog-intro-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--blog-text);
  margin-bottom: var(--blog-s2);
}

#tkModal-blog .blog-intro-tagline {
  font-size: var(--text-sm);
  color: var(--blog-dim);
  line-height: 1.75;
  max-width: 480px;
}

/* ══════════════════════════════════════
   FILTER BAR
══════════════════════════════════════ */
#tkModal-blog .filter-bar {
  display: flex;
  align-items: center;
  gap: var(--blog-s1);
  padding: var(--blog-s5) clamp(var(--blog-s3), 5vw, var(--blog-s6)) var(--blog-s4);
  flex-wrap: wrap;
  opacity: 0;
  animation: blogFadeUp 0.45s ease forwards 0.12s;
}

#tkModal-blog .filter-btn {
  padding: 8px 18px;
  border-radius: var(--blog-r-pill);
  border: 1px solid var(--blog-border-md);
  background: transparent;
  color: var(--blog-dim);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
#tkModal-blog .filter-btn:hover {
  border-color: rgba(192,132,252,0.4);
  color: var(--blog-text);
}
#tkModal-blog .filter-btn.active {
  background: var(--blog-accent-hi);
  border-color: rgba(192,132,252,0.35);
  color: var(--blog-accent);
}

/* ══════════════════════════════════════
   LAYOUT CONTAINER
══════════════════════════════════════ */
#tkModal-blog .section-wrap {
  padding: 0 clamp(var(--blog-s3), 5vw, var(--blog-s6));
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ══════════════════════════════════════
   FEATURED CARD — GOLDEN RATIO
══════════════════════════════════════ */
#tkModal-blog .featured-card {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 0;
  border-radius: var(--blog-r);
  overflow: hidden;
  background: var(--blog-surface);
  border: 1px solid var(--blog-border-md);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
  margin-bottom: var(--blog-s6);
  opacity: 0;
  animation: blogFadeUp 0.45s ease forwards 0.22s;
  min-height: 400px;
}
/* Slider slides must NEVER run blogFadeUp — JS controls their opacity */
#tkModal-blog .fs-track .featured-card {
  animation: none !important;
  opacity: 0;
  margin-bottom: 0;
  /* CRITICAL: Explicitly preserve grid layout to prevent corruption after multiple reload cycles */
  display: grid !important;
  grid-template-columns: 1.618fr 1fr !important;
}
#tkModal-blog .featured-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--blog-shadow-lift);
}

#tkModal-blog .featured-thumb {
  position: relative;
  overflow: hidden;
}

#tkModal-blog .featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
  display: block;
}
#tkModal-blog .featured-card:hover .featured-thumb img { transform: scale(1.03); }

#tkModal-blog .thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(14,12,28,0.6) 100%);
  pointer-events: none;
}

#tkModal-blog .read-time {
  position: absolute;
  bottom: var(--blog-s2);
  right: var(--blog-s2);
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 5px 10px;
  border-radius: var(--blog-r-sm);
  letter-spacing: 0.05em;
}

#tkModal-blog .featured-body {
  padding: var(--blog-s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

/* ══════════════════════════════════════
   POST TAGS — SINGLE ACCENT SYSTEM
══════════════════════════════════════ */
#tkModal-blog .post-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--blog-s1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--blog-r-pill);
  margin-bottom: var(--blog-s3);
  width: fit-content;
  background: var(--blog-accent-lo);
  color: var(--blog-accent);
  border: 1px solid rgba(192,132,252,0.2);
}

/* All category tags → single accent (removes category-color fragmentation) */
#tkModal-blog .tag-guitar,
#tkModal-blog .tag-theory,
#tkModal-blog .tag-ear,
#tkModal-blog .tag-tips,
#tkModal-blog .tag-piano {
  background: var(--blog-accent-lo);
  color: var(--blog-accent);
  border: 1px solid rgba(192,132,252,0.2);
}

/* Featured heading — Heading XL role */
#tkModal-blog .featured-body h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(var(--text-md), 2.2vw, var(--text-xl));
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--blog-s3);
  color: var(--blog-text);
}

/* Featured excerpt — Body SM role */
#tkModal-blog .featured-body > p {
  color: var(--blog-dim);
  font-size: var(--text-sm);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: var(--blog-s4);
}

#tkModal-blog .post-meta {
  display: flex;
  align-items: center;
  gap: var(--blog-s2);
}

#tkModal-blog .meta-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(192,132,252,0.6), rgba(192,132,252,0.2));
  border: 1px solid rgba(192,132,252,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

#tkModal-blog .meta-info { display: flex; flex-direction: column; gap: 3px; }
#tkModal-blog .meta-author { font-size: var(--text-sm); font-weight: 500; color: var(--blog-text); letter-spacing: 0.01em; }
#tkModal-blog .meta-date {
  font-size: var(--text-xs);
  color: var(--blog-dim2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  line-height: 1;
}

#tkModal-blog .read-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--blog-s1);
  padding: 10px 20px;
  border-radius: var(--blog-r-pill);
  background: var(--blog-accent-hi);
  border: 1px solid rgba(192,132,252,0.3);
  color: var(--blog-accent);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
  letter-spacing: 0.01em;
  font-family: var(--font-body);
}
#tkModal-blog .read-btn:hover {
  background: rgba(192,132,252,0.25);
  transform: translateX(2px);
}

/* ══════════════════════════════════════
   SECTION TITLE — Meta role
══════════════════════════════════════ */
#tkModal-blog .section-title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blog-dim2);
  margin-bottom: var(--blog-s4);
  line-height: 1;
}

/* ══════════════════════════════════════
   BLOG GRID
══════════════════════════════════════ */
#tkModal-blog .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--blog-s3);
  margin-bottom: var(--blog-s6);
}

/* ══════════════════════════════════════
   BLOG CARD
══════════════════════════════════════ */
#tkModal-blog .blog-card {
  background: var(--blog-surface);
  border-radius: var(--blog-r);
  overflow: hidden;
  border: 1px solid var(--blog-border);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  opacity: 0;
  animation: blogFadeUp 0.45s ease forwards;
  display: flex;
  flex-direction: column;
}
#tkModal-blog .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--blog-shadow-lift);
  border-color: var(--blog-border-md);
}

#tkModal-blog .card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(14,12,28,0.8);
  flex-shrink: 0;
}

#tkModal-blog .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
  display: block;
}
#tkModal-blog .blog-card:hover .card-thumb img { transform: scale(1.04); }

#tkModal-blog .card-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--blog-accent-lo), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
#tkModal-blog .blog-card:hover .card-thumb-overlay { opacity: 1; }

#tkModal-blog .thumb-guitar,
#tkModal-blog .thumb-theory,
#tkModal-blog .thumb-ear,
#tkModal-blog .thumb-tips,
#tkModal-blog .thumb-piano {
  background: linear-gradient(135deg, var(--blog-accent-lo), transparent);
}

#tkModal-blog .card-read-time {
  position: absolute;
  bottom: var(--blog-s1);
  right: var(--blog-s1);
  background: rgba(0,0,0,0.82);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 4px 8px;
  border-radius: var(--blog-r-sm);
  letter-spacing: 0.03em;
}

#tkModal-blog .card-body {
  padding: var(--blog-s3);
  display: flex;
  flex-direction: column;
  flex: 1;
}

#tkModal-blog .card-tag { margin-bottom: var(--blog-s2); }

/* Card title — Heading MD role */
#tkModal-blog .card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: var(--blog-s2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--blog-text);
}

/* Card excerpt — Body SM role */
#tkModal-blog .card-excerpt {
  font-size: var(--text-sm);
  color: var(--blog-dim);
  line-height: 1.7;
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--blog-s3);
  flex: 1;
}

#tkModal-blog .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--blog-s2);
  border-top: 1px solid var(--blog-border);
  margin-top: auto;
}

#tkModal-blog .card-author {
  display: flex;
  align-items: center;
  gap: var(--blog-s1);
}
#tkModal-blog .card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(192,132,252,0.5), rgba(192,132,252,0.15));
  border: 1px solid rgba(192,132,252,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  flex-shrink: 0;
}
#tkModal-blog .card-author-name {
  font-size: var(--text-sm);
  color: var(--blog-dim);
  font-weight: 500;
  letter-spacing: 0.01em;
}
#tkModal-blog .card-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--blog-dim2);
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════
   ARTICLE OVERLAY → .article-modal
══════════════════════════════════════ */
#tkModal-blog .article-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(7,6,15,0.97);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  -webkit-overflow-scrolling: touch;
}
#tkModal-blog .article-modal.open {
  opacity: 1;
  pointer-events: all;
}

/* Article inner — ~68ch optimised reading column */
#tkModal-blog .article-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--blog-s4) clamp(var(--blog-s3), 5vw, var(--blog-s4)) var(--blog-s7);
  transform: translateY(24px);
  transition: transform 320ms ease;
}
#tkModal-blog .article-modal.open .article-inner { transform: translateY(0); }

#tkModal-blog .article-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--blog-s5);
  position: sticky;
  top: 0;
  padding: var(--blog-s2) 0;
  background: rgba(7,6,15,0.92);
  backdrop-filter: blur(16px);
  z-index: 10;
}

#tkModal-blog .art-back-btn {
  display: flex;
  align-items: center;
  gap: var(--blog-s1);
  background: var(--blog-surface);
  border: 1px solid var(--blog-border-md);
  color: var(--blog-dim);
  padding: 8px 16px;
  border-radius: var(--blog-r-pill);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}
#tkModal-blog .art-back-btn:hover { color: var(--blog-text); border-color: rgba(192,132,252,0.4); }

#tkModal-blog .art-share-btn {
  display: flex;
  align-items: center;
  gap: var(--blog-s1);
  background: var(--blog-accent-lo);
  border: 1px solid rgba(192,132,252,0.2);
  color: var(--blog-accent);
  padding: 8px 16px;
  border-radius: var(--blog-r-pill);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 200ms ease;
}
#tkModal-blog .art-share-btn:hover { background: var(--blog-accent-hi); }

#tkModal-blog .article-hero-img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--blog-r);
  margin-bottom: var(--blog-s4);
  display: block;
}

#tkModal-blog .article-tag { margin-bottom: var(--blog-s2); }

/* Article title — Heading 2XL role */
#tkModal-blog .article-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: var(--blog-s3);
  color: var(--blog-text);
}

#tkModal-blog .article-meta {
  display: flex;
  align-items: center;
  gap: var(--blog-s2);
  padding-bottom: var(--blog-s4);
  border-bottom: 1px solid var(--blog-border);
  margin-bottom: var(--blog-s5);
}

#tkModal-blog .art-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(192,132,252,0.6), rgba(192,132,252,0.15));
  border: 1px solid rgba(192,132,252,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  flex-shrink: 0;
}

#tkModal-blog .art-meta-info { flex: 1; }
#tkModal-blog .art-author { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; }
#tkModal-blog .art-date {
  font-size: var(--text-xs);
  color: var(--blog-dim2);
  font-family: var(--font-mono);
  margin-top: 3px;
  letter-spacing: 0.04em;
  line-height: 1;
}

#tkModal-blog .art-read-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--blog-dim2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--blog-border-md);
  padding: 6px 14px;
  border-radius: var(--blog-r-pill);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ── Article body typography ── */
#tkModal-blog .article-body {
  font-size: var(--text-base);
  line-height: 1.8;
  font-weight: 300;
  color: var(--blog-dim);
}

/* Section heading — Heading LG role */
#tkModal-blog .article-body h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  margin: var(--blog-s5) 0 var(--blog-s2);
  color: var(--blog-text);
  line-height: 1.2;
}

/* Sub-section heading — accent, smaller */
#tkModal-blog .article-body h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  margin: var(--blog-s4) 0 var(--blog-s2);
  color: var(--blog-accent);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Body paragraphs — Body MD role */
#tkModal-blog .article-body p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: rgba(237,233,246,0.72);
  margin-bottom: var(--blog-s3);
}

#tkModal-blog .article-body strong { color: var(--blog-text); font-weight: 600; }

/* ── Inline blog-to-blog contextual links ── */
#tkModal-blog .article-body .inline-blog-link {
  color: rgba(192,132,252,0.95);
  text-decoration: underline;
  text-decoration-color: rgba(192,132,252,0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s, text-decoration-color 0.15s;
  cursor: pointer;
  font-weight: 500;
}
#tkModal-blog .article-body .inline-blog-link:hover {
  color: rgba(232,180,255,1);
  text-decoration-color: rgba(232,180,255,0.7);
}

#tkModal-blog .article-body ul,
#tkModal-blog .article-body ol {
  padding-left: var(--blog-s3);
  margin-bottom: var(--blog-s3);
  color: rgba(237,233,246,0.72);
}
#tkModal-blog .article-body li {
  margin-bottom: var(--blog-s1);
  font-size: var(--text-base);
  line-height: 1.75;
}

#tkModal-blog .callout {
  background: var(--blog-accent-lo);
  border-left: 2px solid var(--blog-accent);
  border-radius: 0 var(--blog-r) var(--blog-r) 0;
  padding: var(--blog-s3) var(--blog-s4);
  margin: var(--blog-s4) 0;
  font-size: var(--text-base);
  color: var(--blog-dim);
  font-style: italic;
  line-height: 1.75;
}

#tkModal-blog .article-body code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: rgba(192,132,252,0.06);
  border: 1px solid rgba(192,132,252,0.15);
  padding: 2px 7px;
  border-radius: var(--blog-r-sm);
  color: var(--blog-accent);
}

#tkModal-blog .chord-box {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--blog-border-md);
  border-radius: var(--blog-r);
  padding: var(--blog-s3);
  margin: var(--blog-s4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--blog-s1);
}

#tkModal-blog .chord-pill {
  background: var(--blog-accent-lo);
  border: 1px solid rgba(192,132,252,0.2);
  color: var(--blog-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--blog-r-pill);
  letter-spacing: 0.06em;
}

#tkModal-blog .footer-cta {
  background: linear-gradient(135deg, rgba(192,132,252,0.12), rgba(192,132,252,0.04));
  border: 1px solid rgba(192,132,252,0.2);
  border-radius: var(--blog-r);
  padding: var(--blog-s5) var(--blog-s4);
  text-align: center;
  margin-top: var(--blog-s6);
}
#tkModal-blog .footer-cta h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
  margin-bottom: var(--blog-s1);
  color: var(--blog-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
#tkModal-blog .footer-cta p {
  font-size: var(--text-sm);
  color: var(--blog-dim);
  margin-bottom: var(--blog-s3);
  line-height: 1.75;
}
#tkModal-blog .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--blog-s1);
  background: var(--blog-accent);
  color: #0a0010;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 12px 28px;
  border-radius: var(--blog-r-pill);
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: filter 200ms ease, transform 200ms ease;
  letter-spacing: 0.01em;
}
#tkModal-blog .cta-btn:hover { filter: brightness(1.1); transform: scale(1.02); }

/* ── Reading progress bar ── */
#tkModal-blog .read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blog-accent), rgba(192,132,252,0.4));
  z-index: 9998;
  width: 0%;
  transition: width 80ms linear;
  border-radius: 0 var(--blog-r-pill) var(--blog-r-pill) 0;
  display: none;
}
#tkModal-blog .read-progress.visible { display: block; }

/* ── YouTube embed ── */
#tkModal-blog .yt-embed-wrap {
  margin: var(--blog-s4) 0;
  border-radius: var(--blog-r);
  overflow: hidden;
  position: relative;
}
#tkModal-blog .yt-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  cursor: pointer;
  display: block;
  background: #000;
  border-radius: var(--blog-r);
  overflow: hidden;
}
#tkModal-blog .yt-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease, filter 200ms ease;
  filter: brightness(0.82);
}
#tkModal-blog .yt-thumbnail:hover img {
  transform: scale(1.02);
  filter: brightness(0.65);
}
#tkModal-blog .yt-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tkModal-blog .yt-play-btn {
  transition: transform 200ms ease, filter 200ms ease;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}
#tkModal-blog .yt-thumbnail:hover .yt-play-btn {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 28px rgba(255,0,0,0.45));
}
#tkModal-blog .yt-duration-badge {
  position: absolute;
  bottom: 52px;
  right: var(--blog-s2);
  background: rgba(0,0,0,0.88);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--blog-r-sm);
  letter-spacing: 0.03em;
}
#tkModal-blog .yt-title-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--blog-s2);
  background: linear-gradient(transparent, rgba(0,0,0,0.88));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#tkModal-blog .yt-label { font-size: var(--text-sm); font-weight: 600; color: #fff; letter-spacing: 0.02em; }
#tkModal-blog .yt-channel { font-size: var(--text-xs); color: rgba(255,255,255,0.55); font-family: var(--font-mono); }
#tkModal-blog .yt-embed-wrap iframe {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border: none;
  border-radius: var(--blog-r);
}

/* ── Thumbnail placeholder backgrounds ── */
#tkModal-blog .thumb-bg-1 { background: linear-gradient(135deg, #0f0820 0%, #1e1040 50%, #0f0820 100%); }
#tkModal-blog .thumb-bg-2 { background: linear-gradient(135deg, #0b0f1e 0%, #14213d 50%, #0b0f1e 100%); }
#tkModal-blog .thumb-bg-3 { background: linear-gradient(135deg, #0a0d15 0%, #111d2e 50%, #0a0d15 100%); }
#tkModal-blog .thumb-bg-4 { background: linear-gradient(135deg, #150a1f 0%, #2a1040 50%, #150a1f 100%); }
#tkModal-blog .thumb-bg-5 { background: linear-gradient(135deg, #100d20 0%, #1e1840 50%, #100d20 100%); }
#tkModal-blog .thumb-bg-6 { background: linear-gradient(135deg, #0c0a1c 0%, #1a1538 50%, #0c0a1c 100%); }

#tkModal-blog .thumb-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  opacity: 0.28;
}
#tkModal-blog .featured-thumb .thumb-icon { font-size: 4.5rem; }

/* ══════════════════════════════════════
   FEATURED SLIDER
══════════════════════════════════════ */
#tkModal-blog .featured-slider {
  position: relative;
  margin-bottom: var(--blog-s5);
  opacity: 0;
  animation: blogFadeUp 0.45s ease forwards 0.22s;
}

#tkModal-blog .fs-track {
  display: grid;
  /* CRITICAL: Explicit grid structure prevents browser from creating
     unstable implicit grids after multiple innerHTML rebuilds.
     Single 1x1 cell for stacking all slides via grid-area: 1/1 */
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border-radius: var(--blog-r);
  overflow: hidden;
}

#tkModal-blog .fs-slide.featured-card {
  grid-area: 1 / 1;
  margin-bottom: 0;
  /* Override the base .featured-card animation completely.
     Without this, every new slide injected by _reloadTrack
     fires blogFadeUp independently, fighting the JS opacity
     system and corrupting layout after ~5 cycles. */
  animation: none !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  will-change: opacity;
  /* Ensure the grid layout is never disturbed by stale
     inline styles from track fade-in/out cycles */
  min-height: 360px;
  /* CRITICAL FIX: Explicitly preserve internal grid structure.
     Without these, after 2+ reload cycles the browser loses
     the 2-column layout and image expands to full height. */
  display: grid !important;
  grid-template-columns: 1.618fr 1fr !important;
}
#tkModal-blog .fs-slide.featured-card.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

#tkModal-blog .fs-slide .featured-body {
  opacity: 0;
  transform: translateY(12px);
  transition: none;
}
#tkModal-blog .fs-slide.is-active .featured-body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 380ms ease 120ms, transform 380ms ease 120ms;
}

/* CRITICAL: Lock slider thumbnail dimensions to prevent expansion bug.
   Without this, after multiple reload cycles the thumbnail can break
   out of its grid column and expand to full card height. */
#tkModal-blog .fs-slide .featured-thumb {
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: 500px;
}
#tkModal-blog .fs-slide .featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#tkModal-blog .fs-controls {
  display: flex;
  align-items: center;
  gap: var(--blog-s2);
  padding: var(--blog-s2) 0 0;
}

#tkModal-blog .fs-progress {
  flex: 1;
  height: 2px;
  background: var(--blog-border-md);
  border-radius: 2px;
  overflow: hidden;
}
#tkModal-blog .fs-progress-line {
  height: 100%;
  background: var(--blog-accent);
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 2px;
  will-change: transform;
}

#tkModal-blog .fs-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#tkModal-blog .fs-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--blog-r-pill);
  background: var(--blog-border-md);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 240ms ease, background 240ms ease, opacity 240ms ease;
  opacity: 0.5;
  flex-shrink: 0;
}
#tkModal-blog .fs-dot.is-active {
  width: 20px;
  background: var(--blog-accent);
  opacity: 1;
}
#tkModal-blog .fs-dot:hover:not(.is-active) {
  opacity: 0.8;
  background: var(--blog-dim2);
}

#tkModal-blog .fs-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--blog-border-md);
  background: transparent;
  color: var(--blog-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  padding: 0;
}
#tkModal-blog .fs-arrow:hover {
  border-color: rgba(192,132,252,0.35);
  color: var(--blog-text);
  background: var(--blog-accent-lo);
}
#tkModal-blog .fs-arrow:active {
  transform: scale(0.92);
  transition-duration: 80ms;
}

/* ── Animations ── */
@keyframes blogFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

#tkModal-blog .blog-card:nth-child(1) { animation-delay: 0.28s; }
#tkModal-blog .blog-card:nth-child(2) { animation-delay: 0.36s; }
#tkModal-blog .blog-card:nth-child(3) { animation-delay: 0.44s; }
#tkModal-blog .blog-card:nth-child(4) { animation-delay: 0.52s; }
#tkModal-blog .blog-card:nth-child(5) { animation-delay: 0.56s; }
#tkModal-blog .blog-card:nth-child(6) { animation-delay: 0.60s; }

/* ── Responsive ── */
@media (max-width: 960px) {
  #tkModal-blog .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #tkModal-blog .featured-card { grid-template-columns: 1fr; min-height: auto; }
  #tkModal-blog .fs-track .featured-card { grid-template-columns: 1fr !important; }
  #tkModal-blog .featured-thumb { aspect-ratio: 16 / 7; min-height: 0; max-height: 220px; }
  #tkModal-blog .featured-body { padding: var(--blog-s4) var(--blog-s3); }
  #tkModal-blog .featured-body h2 { font-size: var(--text-md); }
  #tkModal-blog .blog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--blog-s2); }
  #tkModal-blog .filter-bar { padding-top: var(--blog-s3); }
}
@media (max-width: 520px) {
  #tkModal-blog .blog-grid { grid-template-columns: 1fr; }
  #tkModal-blog .blog-close-btn { display: none; }
  #tkModal-blog .featured-card { margin-bottom: var(--blog-s4); }
  #tkModal-blog .fs-track .featured-card { grid-template-columns: 1fr !important; }
  #tkModal-blog .featured-thumb { aspect-ratio: 16 / 6; max-height: 180px; }
  #tkModal-blog .featured-body { padding: 14px 16px; }
  #tkModal-blog .featured-body h2 { font-size: 1.1rem; line-height: 1.35; }
  #tkModal-blog .featured-body p { font-size: 0.82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #tkModal-blog .article-inner { padding: var(--blog-s3) var(--blog-s2) var(--blog-s6); }
  #tkModal-blog .filter-bar { gap: 6px; }
  #tkModal-blog .filter-btn { padding: 7px 14px; font-size: var(--text-xs); }
  #tkModal-blog .fs-arrow { display: none; }
  #tkModal-blog .fs-controls { justify-content: center; }
  #tkModal-blog .fs-progress { display: none; }
}
/* ============================================================
   phase3.css — Phase-3 Connected Learning Loop Styles
   ChordStar

   Covers:
     • .p3-bridge-toast       — Lesson→ET and ET→Song toasts
     • .lpw-*                 — Learning Progress Widget
     • .ls-card--just-unlocked — Lesson-unlocked song card
     • .cl-badge--lesson / --et / --song — Continue card badges
   ============================================================ */

/* ── Phase-3 Bridge Toast ─────────────────────────────────── */

.p3-bridge-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    max-width: 340px;
    width: calc(100vw - 48px);
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
                opacity   0.28s ease;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
    font-family: 'Outfit', 'Inter', sans-serif;
}

.p3-bridge-toast--visible {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.p3-toast-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 16px 18px;
    position: relative;
}

.p3-toast--lesson .p3-toast-inner {
    background: linear-gradient(135deg, rgba(26,12,46,0.97) 0%, rgba(40,10,70,0.97) 100%);
    border-left: 3px solid #a855f7;
}

.p3-toast--et .p3-toast-inner {
    background: linear-gradient(135deg, rgba(12,30,46,0.97) 0%, rgba(10,40,65,0.97) 100%);
    border-left: 3px solid #3b82f6;
}

.p3-toast-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.p3-toast-body {
    flex: 1;
    min-width: 0;
}

.p3-toast-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(196,181,212,0.55);
    margin: 0 0 4px;
}

.p3-toast-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f0e8ff;
    margin: 0 0 4px;
    line-height: 1.3;
}

.p3-toast-reason {
    font-size: 0.78rem;
    color: rgba(196,181,212,0.75);
    margin: 0 0 12px;
    line-height: 1.4;
}

.p3-toast-action {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
}

.p3-toast--lesson .p3-toast-action {
    background: linear-gradient(135deg, #a855f7, #d946ef);
    color: #fff;
}

.p3-toast--et .p3-toast-action {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: #fff;
}

.p3-toast-action:hover  { opacity: 0.88; transform: translateY(-1px); }
.p3-toast-action:active { opacity: 1;    transform: translateY(0); }

.p3-toast-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(196,181,212,0.45);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s;
}
.p3-toast-close:hover { color: rgba(196,181,212,0.9); }

/* Mobile */
@media (max-width: 480px) {
    .p3-bridge-toast {
        bottom: 72px; /* above bottom nav */
        right: 12px;
        left: 12px;
        max-width: 100%;
        width: auto;
    }
}

/* ── Learning Progress Widget ─────────────────────────────── */

.lpw-card {
    margin-top: 0.75rem;
}

.lpw-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.lpw-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lpw-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lpw-item-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.lpw-item-title {
    flex: 1;
    font-size: 0.83rem;
    font-weight: 600;
    color: rgba(240,232,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpw-item-pct {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(196,181,212,0.65);
    flex-shrink: 0;
}
.lpw-item-pct.lpw-done { color: #34d399; }

.lpw-bar-wrap {
    height: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    overflow: hidden;
}

.lpw-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s ease;
}

.lpw-item-sub {
    font-size: 0.71rem;
    color: rgba(196,181,212,0.45);
}

/* ── Continue Learning card badges (Phase-3 types) ─────────── */

.cl-badge--lesson {
    background: rgba(59,130,246,0.18);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.3);
}

.cl-badge--et {
    background: rgba(16,185,129,0.18);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.3);
}

.cl-badge--song {
    background: rgba(245,158,11,0.18);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.3);
}

/* ── Lesson-unlocked song card ─────────────────────────────── */

.ls-card--just-unlocked {
    cursor: pointer;
    border: 1px solid rgba(16,185,129,0.35) !important;
    box-shadow: 0 0 18px rgba(16,185,129,0.12);
}

.ls-card--just-unlocked:hover {
    border-color: rgba(16,185,129,0.6) !important;
    box-shadow: 0 0 28px rgba(16,185,129,0.22);
}
/* ================================================================
   phase7.css — Phase-7 Daily Practice UI
   ChordStar

   Covers:
     .dpc-*   — DailyPracticeCard component
     .dpc-*   — Progress bar, pill chips, start button
     Full dark + light theme support via CSS variables.
     Mobile-first responsive layout.
   ================================================================ */

/* ── Root container ───────────────────────────────────────────── */
#dpc-root {
    margin-bottom: 2rem;
    width: 100%;
}

/* Hidden state — card not yet rendered */
#dpc-root:empty { display: none; }

/* ── Card wrapper ─────────────────────────────────────────────── */
.dpc-card {
    position: relative;
    background: rgba(26, 15, 46, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    overflow: hidden;
    border: 1px solid rgba(217, 70, 239, 0.18);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.dpc-card:hover {
    border-color: rgba(217, 70, 239, 0.32);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(217, 70, 239, 0.08);
}

/* Ambient glow orb — background decoration only */
.dpc-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(
        circle,
        rgba(217, 70, 239, 0.14) 0%,
        transparent 70%
    );
    pointer-events: none;
    border-radius: 50%;
}

/* ── Card header row ──────────────────────────────────────────── */
.dpc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.dpc-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dpc-label {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary, #d946ef);
    opacity: 0.85;
}

.dpc-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text, #f0e7ff);
    line-height: 1.25;
    margin: 0;
}

.dpc-date {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: var(--text-dim, #c4b5fd);
    opacity: 0.6;
    margin-top: 0.15rem;
}

/* ── Trainer pill chips ───────────────────────────────────────── */
.dpc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
}

.dpc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform 0.18s ease, opacity 0.18s ease;
    cursor: default;
    white-space: nowrap;
}

.dpc-chip--chord {
    background: rgba(168, 85, 247, 0.14);
    border-color: rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

.dpc-chip--interval {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.dpc-chip--note {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.dpc-chip--scale {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

/* "Done" state — chip goes grey when session complete */
.dpc-chip--done {
    opacity: 0.35;
    text-decoration: line-through;
}

.dpc-chip-icon { font-size: 0.95rem; }
.dpc-chip-count {
    font-weight: 800;
    font-size: 0.88rem;
}

/* ── Progress bar ─────────────────────────────────────────────── */
.dpc-progress-wrap {
    margin-bottom: 1.4rem;
}

.dpc-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
}

.dpc-progress-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--text-dim, #c4b5fd);
    opacity: 0.7;
}

.dpc-progress-count {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary, #d946ef);
}

.dpc-progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
}

.dpc-progress-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary, #d946ef), #a855f7);
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

/* ── Action row ───────────────────────────────────────────────── */
.dpc-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

/* Primary CTA — Start Practice */
.dpc-btn-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    min-height: 48px;          /* ≥ 44px tap target */
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    background: linear-gradient(135deg, var(--primary, #d946ef), #a855f7);
    box-shadow: 0 4px 18px rgba(217, 70, 239, 0.35);
    transition:
        transform  0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        opacity    0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.dpc-btn-start:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 28px rgba(217, 70, 239, 0.5);
}

.dpc-btn-start:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(217, 70, 239, 0.3);
}

.dpc-btn-start:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── All-done state ───────────────────────────────────────────── */
.dpc-done-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    animation: dpc-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Skeleton / loading state ─────────────────────────────────── */
.dpc-skeleton {
    border-radius: 20px;
    overflow: hidden;
    height: 148px;
    background: rgba(217, 70, 239, 0.05);
    border: 1px solid rgba(217, 70, 239, 0.1);
    animation: dpc-pulse 1.6s ease-in-out infinite;
}

@keyframes dpc-pulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1;   }
}

@keyframes dpc-pop-in {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ── Light theme overrides ────────────────────────────────────── */
[data-theme="light"] .dpc-card {
    background: rgba(253, 250, 255, 0.88);
    border-color: rgba(185, 31, 214, 0.16);
    box-shadow:
        0 4px 24px rgba(185, 31, 214, 0.08),
        0 0 0 1px rgba(185, 31, 214, 0.04) inset;
}

[data-theme="light"] .dpc-card:hover {
    border-color: rgba(185, 31, 214, 0.3);
    box-shadow: 0 8px 36px rgba(185, 31, 214, 0.12);
}

[data-theme="light"] .dpc-card::before {
    background: radial-gradient(
        circle, rgba(185, 31, 214, 0.08) 0%, transparent 70%
    );
}

[data-theme="light"] .dpc-title  { color: #1a0535; }
[data-theme="light"] .dpc-date   { color: #5b2d8c; opacity: 0.7; }

[data-theme="light"] .dpc-chip--chord    { background: rgba(139,53,214,0.1);  border-color: rgba(139,53,214,0.22); color: #7c22aa; }
[data-theme="light"] .dpc-chip--interval { background: rgba(37,99,235,0.1);   border-color: rgba(37,99,235,0.22);  color: #1d4ed8; }
[data-theme="light"] .dpc-chip--note     { background: rgba(5,150,105,0.1);   border-color: rgba(5,150,105,0.22);  color: #047857; }
[data-theme="light"] .dpc-chip--scale    { background: rgba(217,119,6,0.1);   border-color: rgba(217,119,6,0.22);  color: #b45309; }

[data-theme="light"] .dpc-progress-track { background: rgba(0,0,0,0.07); }
[data-theme="light"] .dpc-progress-label { color: #5b2d8c; opacity: 0.8; }

[data-theme="light"] .dpc-skeleton {
    background: rgba(185, 31, 214, 0.04);
    border-color: rgba(185, 31, 214, 0.1);
}

/* ── Mobile responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .dpc-card {
        padding: 1.25rem 1.15rem;
        border-radius: 16px;
    }

    .dpc-title { font-size: 1.15rem; }

    .dpc-chips { gap: 0.45rem; }

    .dpc-chip {
        padding: 0.38rem 0.75rem;
        font-size: 0.78rem;
    }

    .dpc-btn-start {
        width: 100%;          /* full-width on mobile */
        justify-content: center;
        min-height: 52px;     /* larger tap target on touch */
        font-size: 1rem;
    }

    .dpc-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .dpc-card { padding: 1rem; }
    .dpc-header { margin-bottom: 1rem; }
    .dpc-chips  { margin-bottom: 1rem; }
}

/* ── Daily Practice Card — Gate States (Guest / Explorer) ────── */

.dpc-gate-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem 0.5rem;
    text-align: center;
}

.dpc-gate-icon {
    font-size: 2rem;
    line-height: 1;
}

.dpc-gate-text {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    max-width: 28ch;
    line-height: 1.5;
}

.dpc-gate-text strong {
    color: #c084fc;
}

/* Sign-in button (guest) */
.dpc-btn-signin {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 0.25rem;
}
.dpc-btn-signin:hover { opacity: 0.85; }


/* ── Upgrade button (explorer) */
.dpc-btn-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.5rem;
    border: 2px solid #a855f7;
    border-radius: 999px;
    background: transparent;
    color: #c084fc;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-top: 0.25rem;
}
.dpc-btn-upgrade:hover {
    background: rgba(168,85,247,0.15);
    color: #fff;
}

/* ================================================================
   Phase-8: Today's Focus — Heatmap Skill Indicators
   Sits between .dpc-header and .dpc-chips when smart plan data
   is available. No-op if focus array is empty.
================================================================ */

/* ── Section wrapper ──────────────────────────────────────────── */
.dpc-focus {
    margin-bottom: 1.25rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(217, 70, 239, 0.12);
}

/* ── Section heading ──────────────────────────────────────────── */
.dpc-focus-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary, #d946ef);
    opacity: 0.85;
    margin-bottom: 0.7rem;
}

/* ── Individual skill row ─────────────────────────────────────── */
.dpc-focus-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.dpc-focus-item:last-child { border-bottom: none; }

/* Skill name — fixed width keeps bars aligned across all rows */
.dpc-focus-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text, #f0e7ff);
    min-width: 5.5rem;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Heatmap bar ──────────────────────────────────────────────── */
.dpc-hm-bar {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
}

.dpc-hm-block {
    display: inline-block;
    width: 10px;
    height: 18px;
    border-radius: 3px;
}

/* Filled block: inherits the tier colour from the parent row's CSS var */
.dpc-hm-block--on {
    background: var(--dpc-tier-color, #a855f7);
    box-shadow: 0 0 6px var(--dpc-tier-color, #a855f7);
    opacity: 0.9;
}

/* Empty block: matches the progress-track empty bg for visual consistency */
.dpc-hm-block--off {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Percentage / "NEW" label ─────────────────────────────────── */
.dpc-focus-pct {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dim, #c4b5fd);
    min-width: 2.8rem;
    text-align: right;
    flex-shrink: 0;
}

/* ── Tier badge pill ──────────────────────────────────────────── */
.dpc-focus-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 99px;
    /* Both color and bg are driven by --dpc-tier-color/bg on the row */
    color: var(--dpc-tier-color, #a855f7);
    background: var(--dpc-tier-bg, rgba(168, 85, 247, 0.14));
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Light theme overrides ────────────────────────────────────── */
[data-theme="light"] .dpc-focus {
    border-bottom-color: rgba(185, 31, 214, 0.12);
}
[data-theme="light"] .dpc-focus-item {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .dpc-focus-name   { color: #1a0535; }
[data-theme="light"] .dpc-focus-pct    { color: #5b2d8c; }
[data-theme="light"] .dpc-hm-block--off { background: rgba(0, 0, 0, 0.07); }

/* ── Trainer-type group block ─────────────────────────────────── */
.dpc-focus-group {
    margin-bottom: 0.9rem;
}
.dpc-focus-group:last-child {
    margin-bottom: 0;
}

/* Sub-heading sits above each trainer group; visually lighter than
   the top-level .dpc-focus-heading so the hierarchy is clear.    */
.dpc-focus-group-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim, #c4b5fd);
    opacity: 0.75;
    margin-bottom: 0.45rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dpc-focus-group-icon {
    font-size: 0.8rem;
    line-height: 1;
}

/* Light theme */
[data-theme="light"] .dpc-focus-group-heading {
    color: #5b2d8c;
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ── Mobile: compress label and block sizes ───────────────────── */
@media (max-width: 480px) {
    .dpc-focus-name  { min-width: 4rem; font-size: 0.82rem; }
    .dpc-hm-block    { width: 9px; height: 16px; }
    .dpc-focus-pct   { min-width: 2.4rem; font-size: 0.73rem; }
    .dpc-focus-badge { font-size: 0.63rem; padding: 2px 6px; }
    .dpc-focus-item  { gap: 0.5rem; }
}
/* ============================================================
   community.css — Community Section
   Reuses ls- pill styles from learnSongs.css.
   All new classes prefixed with "cm-" to avoid conflicts.
   ============================================================ */

/* ── Community Filter Bar (same structure as ls-filter-bar) ── */
.cm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

/* Reuse ls-filter-btn styles via shared class — no duplication needed */

/* ── View Panels ─────────────────────────────────────────────── */
.cm-view { display: none; }
.cm-view.active { display: block; }

/* ── Discover Grid ───────────────────────────────────────────── */
.cm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.6rem;
    margin-bottom: 4rem;
}

/* ── User Card ───────────────────────────────────────────────── */
.cm-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(217, 70, 239, 0.15);
    border-radius: 16px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    cursor: default;
}

.cm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.2);
    border-color: rgba(217, 70, 239, 0.45);
}

/* ── v42 Compact Card — Discord/GitHub style ─────────────────── */
.cm-card--v42 {
    padding: 14px 14px 12px;
    gap: 0.28rem;
}

/* Batch • Instrument meta line */
.cm-card-meta {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    color: rgba(196, 181, 212, 0.55);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Stats row — 4 columns, icon on top, number below, NO text labels */
.cm-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    width: 100%;
    margin: 0.4rem 0 0.2rem;
}

.cm-stat-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.14);
    border-radius: 8px;
    padding: 0.4rem 0.2rem;
}

.cm-cs-icon {
    font-size: 1rem;
    line-height: 1;
}

.cm-cs-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #d946ef;
    line-height: 1;
}

/* Buttons row — Follow + View Profile side by side */
.cm-card-btns {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.25rem;
}

.cm-card-btns .cm-follow-btn {
    flex: 1;
    max-width: none;
    margin-top: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.74rem;
}

.cm-card-btns .cm-view-profile-btn--v42 {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    padding: 0.35rem 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    color: rgba(168, 85, 247, 0.8);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.cm-card-btns .cm-view-profile-btn--v42:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.5);
}

/* Skill score label in following/followers list */
.cm-list-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #a855f7;
}

/* Avatar */
.cm-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    /* Default ring for users with no streak; ring overridden by .cm-avatar-wrap--hot/cool */
    box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.15);
    transition: box-shadow 0.3s;
}

.cm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-card-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    margin: 0;
}

/* Batch Badge — same purple pill as rest of app */
.cm-batch-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    background: linear-gradient(135deg, #d946ef22, #a855f722);
    border: 1px solid rgba(217, 70, 239, 0.35);
    color: #d946ef;
    letter-spacing: 0.4px;
}

.cm-card-interest {
    font-size: 0.8rem;
    color: var(--text-dim, #9ca3af);
    margin: 0;
}

/* Follow Button */
.cm-follow-btn {
    margin-top: 0.4rem;
    padding: 0.45rem 1.4rem;
    border-radius: 50px;
    border: 1.5px solid rgba(217, 70, 239, 0.5);
    background: rgba(217, 70, 239, 0.08);
    color: #d946ef;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s;
    width: 100%;
    max-width: 140px;
}

.cm-follow-btn:hover {
    background: rgba(217, 70, 239, 0.2);
    border-color: #d946ef;
    transform: translateY(-1px);
}

.cm-follow-btn.following {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(217, 70, 239, 0.35);
}

.cm-follow-btn.following:hover {
    background: rgba(217, 70, 239, 0.25);
    color: #d946ef;
    border-color: rgba(217, 70, 239, 0.5);
    box-shadow: none;
}

/* ── Activity Feed ───────────────────────────────────────────── */
.cm-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 4rem;
    max-width: 680px;
}

.cm-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(217, 70, 239, 0.12);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    transition: border-color 0.2s;
}

.cm-feed-item:hover {
    border-color: rgba(217, 70, 239, 0.3);
}

.cm-feed-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.cm-feed-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-feed-content {
    flex: 1;
}

.cm-feed-text {
    font-size: 0.88rem;
    color: var(--text-primary, #f1f0ff);
    margin: 0 0 0.25rem;
    line-height: 1.5;
}

.cm-feed-text strong {
    color: #d946ef;
}

.cm-feed-time {
    font-size: 0.74rem;
    color: var(--text-dim, #9ca3af);
}

.cm-feed-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ── Following / Followers List ──────────────────────────────── */
.cm-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 4rem;
    max-width: 620px;
}

.cm-list-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(217, 70, 239, 0.12);
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    transition: border-color 0.2s, transform 0.2s;
}

.cm-list-row:hover {
    border-color: rgba(217, 70, 239, 0.35);
    transform: translateX(3px);
}

.cm-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.cm-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-list-info {
    flex: 1;
}

.cm-list-name {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    margin: 0 0 0.2rem;
}

.cm-list-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(217, 70, 239, 0.12);
    border: 1px solid rgba(217, 70, 239, 0.3);
    color: #d946ef;
}

.cm-view-profile-btn {
    padding: 0.38rem 1rem;
    border-radius: 50px;
    border: 1.5px solid rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.08);
    color: #a855f7;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.cm-view-profile-btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: #a855f7;
}

/* ── Empty State ─────────────────────────────────────────────── */
.cm-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--text-dim, #9ca3af);
}

.cm-empty-icon {
    font-size: 2.8rem;
    margin-bottom: 0.8rem;
}

.cm-empty p {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto;
}

/* ── Login CTA Modal (inline) ────────────────────────────────── */
#cmLoginModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 999;
    align-items: center;
    justify-content: center;
}

#cmLoginModal.open { display: flex; }

.cm-modal-box {
    background: #1a1030;
    border: 1px solid rgba(217, 70, 239, 0.35);
    border-radius: 20px;
    padding: 2.2rem 2rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.3);
}

.cm-modal-box h3 {
    font-size: 1.15rem;
    color: #f1f0ff;
    margin: 0 0 0.6rem;
}

.cm-modal-box p {
    font-size: 0.88rem;
    color: #9ca3af;
    margin: 0 0 1.4rem;
}

.cm-modal-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
}

.cm-modal-actions button {
    padding: 0.55rem 1.4rem;
    border-radius: 50px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.cm-btn-login {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(217, 70, 239, 0.35);
}

.cm-btn-login:hover { opacity: 0.9; transform: translateY(-1px); }

.cm-btn-cancel {
    background: transparent;
    border: 1.5px solid rgba(217, 70, 239, 0.3);
    color: #9ca3af;
}

.cm-btn-cancel:hover { border-color: #d946ef; color: #d946ef; }

/* ── Avatar wrapper with streak ring glow ────────────────────── */
.cm-avatar-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    margin-bottom: 0.2rem;
}

/* Glowing ring — purple for at-risk streak */
.cm-avatar-wrap--cool .cm-avatar {
    box-shadow:
        0 0 0 3px rgba(217, 70, 239, 0.55),
        0 0 14px rgba(217, 70, 239, 0.35);
    transition: box-shadow 0.3s;
}

/* Glowing ring — amber for practiced today */
.cm-avatar-wrap--hot .cm-avatar {
    box-shadow:
        0 0 0 3px rgba(245, 158, 11, 0.7),
        0 0 18px rgba(245, 158, 11, 0.45);
    animation: cm-streak-pulse 2.2s ease-in-out infinite;
}

@keyframes cm-streak-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245,158,11,0.7), 0 0 18px rgba(245,158,11,0.45); }
    50%       { box-shadow: 0 0 0 4px rgba(245,158,11,0.9), 0 0 26px rgba(245,158,11,0.6); }
}

/* ── Streak fire PIN badge (sits bottom-right of avatar) ──────── */
.cm-streak-pin {
    position: absolute;
    bottom: -4px;
    right: -6px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0.18rem 0.45rem 0.18rem 0.3rem;
    border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    transition: transform 0.2s;
    z-index: 2;
}

.cm-card:hover .cm-streak-pin {
    transform: scale(1.1);
}

/* Purple — streak exists but not practiced today */
.cm-streak-pin--cool {
    background: linear-gradient(135deg, #2d0a4e, #1e0835);
    border: 1.5px solid rgba(217, 70, 239, 0.7);
    color: #e879f9;
    box-shadow: 0 2px 8px rgba(217, 70, 239, 0.4);
}

/* Amber — practiced today, streak hot */
.cm-streak-pin--hot {
    background: linear-gradient(135deg, #3d2000, #2a1500);
    border: 1.5px solid rgba(245, 158, 11, 0.8);
    color: #fbbf24;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.5);
}

.cm-streak-pin-flame {
    font-size: 0.75rem;
    line-height: 1;
}

.cm-streak-pin-count {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* Avatar initials fallback */
.cm-avatar-initials {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

/* Streak in list rows (Following / Followers tabs) */
.cm-list-streak {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: #d946ef;
    background: rgba(217,70,239,0.1);
    border: 1px solid rgba(217,70,239,0.25);
    border-radius: 50px;
    padding: 0.15rem 0.55rem;
}

.cm-list-streak.cm-streak-active {
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.3);
}

/* ── Loading Skeleton ────────────────────────────────────────── */
.cm-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: cm-shimmer 1.4s infinite;
    border-radius: 12px;
    height: 180px;
}

@keyframes cm-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Mobile Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
    .cm-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    .cm-list-row { flex-wrap: wrap; gap: 0.6rem; }
    .cm-view-profile-btn { width: 100%; text-align: center; }
}

/* ================================================================
   WEEKLY COMMUNITY CHALLENGE CARD
   Full-width highlight card at top of Discover view.
   All classes prefixed cm-challenge- to avoid conflicts.
   ================================================================ */

/* ── Outer card ─────────────────────────────────────────────────── */
.cm-challenge-card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(30, 10, 60, 0.97) 0%,
        rgba(20, 5, 45, 0.98) 50%,
        rgba(30, 10, 55, 0.97) 100%);
    border: 1.5px solid rgba(217, 70, 239, 0.45);
    border-radius: 20px;
    padding: 1.5rem 1.8rem;
    margin-bottom: 1.8rem;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.12),
        0 8px 40px rgba(168, 85, 247, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    animation: cm-challenge-enter 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes cm-challenge-enter {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0);     }
}

.cm-challenge-card:hover {
    border-color: rgba(217, 70, 239, 0.65);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.2),
        0 12px 50px rgba(168, 85, 247, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Decorative glow orb — top right corner */
.cm-challenge-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.18) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

/* ── Top label row ──────────────────────────────────────────────── */
.cm-challenge-label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cm-challenge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, rgba(217,70,239,0.3), rgba(168,85,247,0.25));
    border: 1px solid rgba(217, 70, 239, 0.5);
    border-radius: 50px;
    padding: 0.25rem 0.85rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #e879f9;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.cm-challenge-week {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196, 181, 212, 0.55);
    font-weight: 500;
}

/* ── Main body — text + CTA side by side ───────────────────────── */
.cm-challenge-body {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cm-challenge-text {
    flex: 1;
    min-width: 0;
}

/* ── Title ─────────────────────────────────────────────────────── */
.cm-challenge-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 800;
    background: linear-gradient(90deg, #f0e7ff 0%, #d946ef 60%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

/* ── Description ───────────────────────────────────────────────── */
.cm-challenge-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    color: rgba(196, 181, 212, 0.75);
    line-height: 1.55;
    margin: 0 0 0.75rem;
    max-width: 540px;
}

/* ── Song row ──────────────────────────────────────────────────── */
.cm-challenge-song-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cm-challenge-song-icon {
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.cm-challenge-song-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: #d946ef;
}

.cm-challenge-song-artist {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgba(196, 181, 212, 0.6);
}

/* ── CTA area ──────────────────────────────────────────────────── */
.cm-challenge-cta-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.cm-challenge-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.5rem;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border: none;
    border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(217, 70, 239, 0.45);
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s;
    letter-spacing: 0.2px;
}

.cm-challenge-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(217, 70, 239, 0.6);
}

.cm-challenge-cta:active {
    transform: translateY(0);
    opacity: 0.9;
}

.cm-challenge-join-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(196, 181, 212, 0.45);
    margin: 0;
    text-align: center;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cm-challenge-card {
        padding: 1.2rem 1.2rem;
    }

    .cm-challenge-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .cm-challenge-cta-wrap {
        align-items: flex-start;
        width: 100%;
    }

    .cm-challenge-cta {
        width: 100%;
        justify-content: center;
    }

    .cm-challenge-join-hint {
        text-align: left;
    }
}

/* ============================================================
   BATCH LEADERBOARD — community.css additions
   All classes prefixed cm-lb- to avoid conflicts.
   ============================================================ */

/* ── Leaderboard container & header ──────────────────────────── */
#cmLeaderboardContainer {
    margin-bottom: 4rem;
}

.cm-lb-header {
    margin-bottom: 1.8rem;
}

.cm-lb-title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.5rem;
}

.cm-lb-trophy {
    font-size: 2.2rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.1rem;
}

.cm-lb-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    margin: 0 0 0.4rem;
}

.cm-lb-batch-tag {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.4px;
    font-family: 'Space Grotesk', sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.cm-lb-subtitle {
    font-size: 0.78rem;
    color: var(--text-dim, #9ca3af);
    font-family: 'Outfit', sans-serif;
    margin: 0.4rem 0 0;
}

/* ── Podium ───────────────────────────────────────────────────── */
.cm-lb-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 1.2rem 0.5rem 0;
    overflow: hidden;
}

.cm-lb-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    max-width: 130px;
    position: relative;
}

.cm-lb-podium-medal {
    font-size: 1.5rem;
    line-height: 1;
}

.cm-lb-podium-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    border: 2.5px solid rgba(217,70,239,0.5);
    box-shadow: 0 4px 16px rgba(217,70,239,0.3);
    flex-shrink: 0;
}

.cm-lb-podium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-lb-podium-you .cm-lb-podium-avatar {
    border-color: #d946ef;
    box-shadow: 0 0 0 3px rgba(217,70,239,0.4), 0 4px 20px rgba(217,70,239,0.5);
}

.cm-lb-podium-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    font-family: 'Outfit', sans-serif;
    text-align: center;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cm-lb-podium-mins {
    font-size: 0.72rem;
    color: #d946ef;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    margin: 0;
}

.cm-lb-podium-stage {
    width: 100%;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg,
        rgba(217,70,239,0.25) 0%,
        rgba(168,85,247,0.1) 100%);
    border: 1px solid rgba(217,70,239,0.2);
    border-bottom: none;
    transition: height 0.5s ease;
}

/* Stage color variants by rank */
.cm-lb-podium-item:nth-child(2) .cm-lb-podium-stage { /* 1st place (center) */
    background: linear-gradient(180deg, rgba(217,70,239,0.35) 0%, rgba(168,85,247,0.15) 100%);
    border-color: rgba(217,70,239,0.4);
}

/* ── Ranked List ──────────────────────────────────────────────── */
.cm-lb-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cm-lb-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s, border-color 0.2s;
}

.cm-lb-row:hover {
    background: rgba(217,70,239,0.07);
    border-color: rgba(217,70,239,0.2);
}

/* Top 3 accent */
.cm-lb-row--top1 { border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.05); }
.cm-lb-row--top2 { border-color: rgba(209,213,219,0.3); background: rgba(209,213,219,0.04); }
.cm-lb-row--top3 { border-color: rgba(180,120,60,0.3);  background: rgba(180,120,60,0.04);  }

/* Current user highlight */
.cm-lb-row--you {
    background: rgba(217,70,239,0.12) !important;
    border-color: #d946ef !important;
    box-shadow: 0 0 0 1px rgba(217,70,239,0.2), 0 4px 20px rgba(217,70,239,0.15);
}

/* Outside-top-10 user row */
.cm-lb-row--outside {
    background: rgba(217,70,239,0.08);
    border-color: rgba(217,70,239,0.35);
    border-style: dashed;
}

/* Rank column */
.cm-lb-rank {
    width: 36px;
    flex-shrink: 0;
    text-align: center;
}

.cm-lb-rank-num {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dim, #9ca3af);
    font-family: 'Space Grotesk', sans-serif;
}

.cm-lb-rank-emoji {
    font-size: 1.4rem;
    line-height: 1;
}

/* Avatar */
.cm-lb-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.cm-lb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info column */
.cm-lb-info {
    flex: 1;
    min-width: 0;
}

.cm-lb-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    font-family: 'Outfit', sans-serif;
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cm-lb-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cm-lb-streak {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim, #9ca3af);
    font-family: 'Outfit', sans-serif;
}

.cm-lb-streak--hot {
    color: #f59e0b;
}

.cm-lb-active-days {
    font-size: 0.68rem;
    color: var(--text-dim, #9ca3af);
    font-family: 'Outfit', sans-serif;
    opacity: 0.7;
}

/* Score column */
.cm-lb-score {
    flex-shrink: 0;
    text-align: right;
}

.cm-lb-mins {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #d946ef;
    font-family: 'Space Grotesk', sans-serif;
    white-space: nowrap;
}



/* ── "You" tag ────────────────────────────────────────────────── */
.cm-lb-you-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 50px;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    color: #fff;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Divider between top 10 and user's row ────────────────────── */
.cm-lb-divider {
    text-align: center;
    color: var(--text-dim, #9ca3af);
    font-size: 0.9rem;
    padding: 0.3rem 0;
    letter-spacing: 4px;
}

/* ── Unranked user message ────────────────────────────────────── */
.cm-lb-you-unranked {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(217,70,239,0.4);
    background: rgba(217,70,239,0.06);
    font-size: 0.85rem;
    color: var(--text-dim, #9ca3af);
    font-family: 'Outfit', sans-serif;
}

/* ── Empty / error states ─────────────────────────────────────── */
.cm-lb-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-dim, #9ca3af);
    font-family: 'Outfit', sans-serif;
}

.cm-lb-error {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-dim, #9ca3af);
    font-family: 'Outfit', sans-serif;
}

.cm-lb-retry-btn {
    margin-top: 0.8rem;
    padding: 0.5rem 1.2rem;
    background: rgba(217,70,239,0.15);
    border: 1px solid rgba(217,70,239,0.35);
    border-radius: 50px;
    color: #d946ef;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.cm-lb-retry-btn:hover { background: rgba(217,70,239,0.25); }

/* ── Refresh hint ─────────────────────────────────────────────── */
.cm-lb-refresh-hint {
    font-size: 0.72rem;
    color: var(--text-dim, #9ca3af);
    font-family: 'Outfit', sans-serif;
    text-align: center;
    margin-top: 1rem;
    opacity: 0.7;
}

.cm-lb-refresh-btn {
    background: none;
    border: none;
    color: #a855f7;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    padding: 0;
    text-decoration: underline;
    opacity: 0.8;
}

.cm-lb-refresh-btn:hover { opacity: 1; }

/* ── Mobile responsiveness ────────────────────────────────────── */
@media (max-width: 600px) {
    .cm-lb-title { font-size: 1.1rem; }
    .cm-lb-trophy { font-size: 1.8rem; }

    .cm-lb-podium {
        gap: 0.25rem;
        padding: 0.8rem 0.25rem 0;
    }

    .cm-lb-podium-avatar {
        width: 42px;
        height: 42px;
    }

    .cm-lb-podium-name {
        font-size: 0.7rem;
    }

    .cm-lb-row {
        padding: 0.65rem 0.75rem;
        gap: 0.65rem;
    }

    .cm-lb-avatar {
        width: 38px;
        height: 38px;
    }

    .cm-lb-name {
        font-size: 0.82rem;
    }

    .cm-lb-mins {
        font-size: 0.85rem;
    }

    .cm-lb-rank {
        width: 28px;
    }

    .cm-lb-rank-emoji {
        font-size: 1.15rem;
    }

    /* Hide active-days on very small screens to save space */
    .cm-lb-active-days {
        display: none;
    }
}

/* ============================================================
   WEEKLY CHALLENGE UPGRADES — countdown + completion CTA
   ============================================================ */

.wc-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wc-countdown {
    font-size: 0.78rem;
    color: #f59e0b;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
}

.wc-countdown--ended {
    color: #f87171;
}

.wc-status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    border: 1px solid rgba(217, 70, 239, 0.35);
    color: rgba(196, 181, 212, 0.8);
    white-space: nowrap;
}

.wc-status-done {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.08);
}

/* Second CTA button — complete button */
.wc-complete-btn {
    margin-top: 0.5rem;
    background: linear-gradient(135deg, rgba(217,70,239,0.2), rgba(168,85,247,0.2)) !important;
    border: 1.5px solid rgba(217, 70, 239, 0.5) !important;
    color: #d946ef !important;
    box-shadow: none !important;
    font-size: 0.88rem !important;
    padding: 0.65rem 1.2rem !important;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}

.wc-complete-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(217,70,239,0.35), rgba(168,85,247,0.35)) !important;
    border-color: #d946ef !important;
    box-shadow: 0 4px 16px rgba(217,70,239,0.35) !important;
}

/* State 3 — Completed (green, locked) */
.wc-done-btn {
    margin-top: 0rem;
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(74,222,128,0.3) !important;
    font-size: 0.88rem !important;
    padding: 0.65rem 1.2rem !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
}

/* State 2 — In Progress (amber/yellow) */
.wc-continue-btn {
    font-size: 0.88rem !important;
    padding: 0.65rem 1.2rem !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-continue-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.55) !important;
}

/* State 1 — Not Started (purple, the original) */
.wc-learn-btn {
    font-size: 0.88rem !important;
    padding: 0.65rem 1.2rem !important;
}

/* ── Status badge: in-progress state ─────────────────────────── */
.wc-status-inprogress {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
}

/* ── Card state modifier: completed → green border accent ───── */
.cm-challenge-card--completed {
    border-color: rgba(74, 222, 128, 0.45) !important;
    box-shadow:
        0 0 0 1px rgba(74, 222, 128, 0.12),
        0 8px 40px rgba(74, 222, 128, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* ── Card state modifier: in-progress → amber border accent ─── */
.cm-challenge-card--inprogress {
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.10),
        0 8px 40px rgba(245, 158, 11, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 600px) {
    .wc-meta-row { gap: 0.4rem; }
    .wc-countdown { font-size: 0.72rem; }
}

/* ============================================================
   ACTIVITY FEED POLISH — Clickable cards, empty state, refresh
   ============================================================ */

/* ── Load More button wrapper ────────────────────────────────── */
.cm-feed-load-more {
    display: flex;
    justify-content: center;
    padding: 1.4rem 0 0.5rem;
}

.cm-load-more-btn {
    background: transparent;
    border: 1.5px solid rgba(168, 85, 247, 0.4);
    color: #a855f7;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.15s ease;
}

.cm-load-more-btn:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.7);
    transform: translateY(-1px);
}

.cm-load-more-btn:active { transform: translateY(0); }

/* ── Song/challenge subtitle inside activity text ────────────── */
.cm-feed-subtitle {
    font-style: normal;
    font-size: 0.80rem;
    color: rgba(196, 181, 212, 0.65);
    display: block;
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* ── Clickable activity card ─────────────────────────────────── */
.cm-feed-item--clickable {
    cursor: pointer;
    user-select: none;
    transition:
        background  0.20s ease,
        border-color 0.20s ease,
        transform   0.18s ease,
        box-shadow  0.20s ease;
}

.cm-feed-item--clickable:hover {
    background: rgba(217, 70, 239, 0.07);
    border-color: rgba(217, 70, 239, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.12);
}

.cm-feed-item--clickable:active {
    transform: translateY(0);
    background: rgba(217, 70, 239, 0.12);
}

/* Focus ring for keyboard nav */
.cm-feed-item--clickable:focus-visible {
    outline: 2px solid rgba(217, 70, 239, 0.7);
    outline-offset: 2px;
}

/* Subtle arrow hint on hover — desktop only */
@media (min-width: 641px) {
    .cm-feed-item--clickable::after {
        content: '›';
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%) translateX(4px);
        color: rgba(217, 70, 239, 0);
        font-size: 1.1rem;
        font-weight: 700;
        transition: color 0.2s ease, transform 0.2s ease;
        pointer-events: none;
    }

    .cm-feed-item { position: relative; }

    .cm-feed-item--clickable:hover::after {
        color: rgba(217, 70, 239, 0.6);
        transform: translateY(-50%) translateX(0);
    }
}

/* ── Empty state card ────────────────────────────────────────── */
.cm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 2rem 4rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px dashed rgba(217, 70, 239, 0.2);
    border-radius: 20px;
    max-width: 420px;
    margin: 0 auto;
    animation: cm-fade-in 0.4s ease both;
}

@keyframes cm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.cm-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 0.8rem;
    filter: drop-shadow(0 0 12px rgba(217, 70, 239, 0.4));
    animation: cm-icon-pulse 2.5s ease-in-out infinite;
}

@keyframes cm-icon-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%       { transform: scale(1.08); opacity: 0.85; }
}

.cm-empty-state-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    margin: 0 0 0.45rem;
}

.cm-empty-state-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: var(--text-dim, #9ca3af);
    margin: 0 0 1.5rem;
    line-height: 1.55;
}

.cm-empty-state-cta {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border: none;
    border-radius: 50px;
    padding: 0.65rem 1.8rem;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(217, 70, 239, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cm-empty-state-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(217, 70, 239, 0.55);
}

.cm-empty-state-cta:active { transform: translateY(0); }

/* ── Mobile: activity cards stack cleanly ────────────────────── */
@media (max-width: 640px) {
    .cm-feed-item {
        padding: 0.85rem 1rem;
        gap: 0.75rem;
    }

    .cm-feed-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .cm-feed-text {
        font-size: 0.84rem;
    }

    .cm-feed-time {
        font-size: 0.7rem;
    }

    .cm-feed-icon {
        font-size: 1rem;
    }

    .cm-empty-state {
        padding: 2.5rem 1.2rem 3rem;
        border-radius: 16px;
    }

    .cm-empty-state-title { font-size: 1rem; }
}


/* ============================================================
   CONTINUE LEARNING CARD
   ============================================================ */

#cmContinueLearning,
#prdContinueLearning {
    display: none; /* hidden by default; shown by JS only when in-progress item exists */
    margin-bottom: 1.2rem;
}

.cl-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(217, 70, 239, 0.08));
    border: 1.5px solid rgba(168, 85, 247, 0.35);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cl-card:hover {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 4px 24px rgba(168, 85, 247, 0.18);
}

.cl-card-left {
    flex-shrink: 0;
}

.cl-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #d946ef);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
}

.cl-card-body {
    flex: 1;
    min-width: 0;
}

.cl-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #a855f7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.2rem;
}

.cl-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #f1f0ff);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cl-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 50px;
    padding: 0.2rem 0.7rem;
    white-space: nowrap;
}

.cl-badge--weekly {
    background: rgba(217, 70, 239, 0.15);
    color: #d946ef;
    border: 1px solid rgba(217, 70, 239, 0.3);
}

.cl-badge--daily {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.cl-resume-btn {
    background: linear-gradient(135deg, #a855f7, #d946ef);
    border: none;
    border-radius: 50px;
    padding: 0.45rem 1.1rem;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(168, 85, 247, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cl-resume-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
}

.cl-resume-btn:active {
    transform: translateY(0);
}

/* Profile page variant — slight style tweak */
#prdContinueLearning .cl-card {
    border-radius: 14px;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cl-card {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.9rem 1rem;
    }

    .cl-card-right {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .cl-name {
        font-size: 0.88rem;
    }

    .cl-resume-btn {
        font-size: 0.78rem;
        padding: 0.4rem 0.9rem;
    }
}


/* ============================================================
   LEADERBOARD PHASE-2 UPGRADES
   ============================================================ */

/* ── Position Insight bar ─────────────────────────────────── */
.cm-lb-insight {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: var(--text-primary, #f1f0ff);
    line-height: 1.45;
}

.cm-lb-insight--leader {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}

.cm-lb-insight--leader .cm-lb-insight-icon {
    font-size: 1.15rem;
}

.cm-lb-insight-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.cm-lb-insight strong {
    color: #d946ef;
    font-weight: 700;
}

.cm-lb-insight--leader strong {
    color: #f59e0b;
}

/* ── Current user row — subtle, professional highlight ─────── */
.cm-lb-row--you {
    background: rgba(168, 85, 247, 0.07) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.28) !important;
    border-radius: 12px;
    position: relative;
}





/* ── Metric labels — clear "Practice Days" text ────────────── */
.cm-lb-mins {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    line-height: 1.1;
}

.cm-lb-mins-label {
    display: block;
    font-size: 0.68rem;
    color: var(--text-dim, #9ca3af);
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
}

/* ── Subtitle / countdown ──────────────────────────────────── */
.cm-lb-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: var(--text-dim, #9ca3af);
    margin: 0.2rem 0 0;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cm-lb-insight {
        font-size: 0.82rem;
        padding: 0.65rem 0.85rem;
        border-radius: 10px;
        flex-wrap: wrap;
    }

    .cm-lb-row--you {
        border-radius: 10px;
    }
}


/* ============================================================
   LEADERBOARD PHASE-3 — PREMIUM VISUAL UPGRADES
   ============================================================ */

/* ── Weekly progress bar inside each row ───────────────────── */
.cm-lb-progress-wrap {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 99px;
    margin-top: 0.4rem;
    overflow: hidden;
}

.cm-lb-progress-bar {
    height: 100%;
    border-radius: 99px;
    min-width: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── "Active today" green dot next to name ─────────────────── */
.cm-lb-active-dot {
    font-size: 0.5rem;
    color: #4ade80;
    vertical-align: middle;
    margin-left: 0.3rem;
    animation: cm-dot-pulse 2s ease-in-out infinite;
}

@keyframes cm-dot-pulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.4; }
}

/* ── Podium: subtle float animation ────────────────────────── */
@keyframes cm-float {
    0%, 100% { transform: translateY(0);   }
    50%       { transform: translateY(-5px); }
}

/* Gold (#1) — center podium */
.cm-lb-podium-gold .cm-lb-podium-avatar {
    border-color: #f59e0b;
    box-shadow:
        0 0 0 2px rgba(245, 158, 11, 0.25),
        0 0 18px rgba(245, 158, 11, 0.45),
        0 6px 20px rgba(0, 0, 0, 0.3);
    animation: cm-float 3.5s ease-in-out infinite;
}

.cm-lb-podium-gold .cm-lb-podium-stage {
    background: linear-gradient(180deg,
        rgba(245, 158, 11, 0.3) 0%,
        rgba(245, 158, 11, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.35);
}

.cm-lb-podium-gold .cm-lb-podium-medal {
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7));
}

/* Silver (#2) — left podium */
.cm-lb-podium-silver .cm-lb-podium-avatar {
    border-color: #cbd5e1;
    box-shadow:
        0 0 0 2px rgba(203, 213, 225, 0.2),
        0 0 14px rgba(203, 213, 225, 0.3),
        0 6px 20px rgba(0, 0, 0, 0.3);
    animation: cm-float 4s ease-in-out infinite 0.5s;
}

.cm-lb-podium-silver .cm-lb-podium-stage {
    background: linear-gradient(180deg,
        rgba(203, 213, 225, 0.22) 0%,
        rgba(203, 213, 225, 0.06) 100%);
    border-color: rgba(203, 213, 225, 0.25);
}

.cm-lb-podium-silver .cm-lb-podium-medal {
    filter: drop-shadow(0 0 5px rgba(203, 213, 225, 0.5));
}

/* Bronze (#3) — right podium */
.cm-lb-podium-bronze .cm-lb-podium-avatar {
    border-color: #cd7c3a;
    box-shadow:
        0 0 0 2px rgba(205, 124, 58, 0.2),
        0 0 14px rgba(205, 124, 58, 0.3),
        0 6px 20px rgba(0, 0, 0, 0.3);
    animation: cm-float 4.5s ease-in-out infinite 1s;
}

.cm-lb-podium-bronze .cm-lb-podium-stage {
    background: linear-gradient(180deg,
        rgba(205, 124, 58, 0.22) 0%,
        rgba(205, 124, 58, 0.06) 100%);
    border-color: rgba(205, 124, 58, 0.25);
}

.cm-lb-podium-bronze .cm-lb-podium-medal {
    filter: drop-shadow(0 0 5px rgba(205, 124, 58, 0.5));
}

/* Disable animation for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .cm-lb-podium-gold .cm-lb-podium-avatar,
    .cm-lb-podium-silver .cm-lb-podium-avatar,
    .cm-lb-podium-bronze .cm-lb-podium-avatar,
    .cm-lb-active-dot {
        animation: none;
    }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cm-lb-progress-wrap {
        height: 3px;
        margin-top: 0.3rem;
    }

    .cm-lb-active-dot {
        font-size: 0.45rem;
    }
}


/* ============================================================
   LEADERBOARD — CHALLENGES COMPLETED STAT
   ============================================================ */

/* 🎯 Challenges badge inside row meta */
.cm-lb-challenges {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(168, 85, 247, 0.75);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Separator dot between streak and challenges */
.cm-lb-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* 🎯 Challenges line under podium practice days */
.cm-lb-podium-challenges {
    font-size: 0.65rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: rgba(168, 85, 247, 0.7);
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cm-lb-challenges {
        font-size: 0.68rem;
    }

    .cm-lb-podium-challenges {
        font-size: 0.6rem;
    }

    .cm-lb-meta {
        gap: 0.35rem;
    }
}


/* ============================================================
   LEADERBOARD PHASE-3 — ENGAGEMENT UPGRADES
   ============================================================ */

/* ── Feature 1: Win Zone — enhanced user row ───────────────── */
.cm-lb-row--you {
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.1) 0%,
        rgba(217, 70, 239, 0.06) 100%
    ) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.38) !important;
    border-radius: 13px;
    position: relative;
}

/* Left accent stripe on user row */
.cm-lb-row--you::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #a855f7, #d946ef);
}

.cm-lb-row--you .cm-lb-name {
    color: #e9d5ff;
    font-weight: 700;
}

.cm-lb-row--you .cm-lb-mins {
    color: #d946ef;
    font-weight: 700;
}

/* ── Feature 1: Progress bar load animation ────────────────── */
@keyframes cm-bar-grow {
    from { width: 0; }
    to   { width: var(--bar-width, 0%); }
}

.cm-lb-progress-bar--animate {
    width: var(--bar-width, 0%) !important;
    animation: cm-bar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger rows so bars animate in sequence */
.cm-lb-list .cm-lb-row:nth-child(1)  .cm-lb-progress-bar--animate { animation-delay: 0.05s; }
.cm-lb-list .cm-lb-row:nth-child(2)  .cm-lb-progress-bar--animate { animation-delay: 0.10s; }
.cm-lb-list .cm-lb-row:nth-child(3)  .cm-lb-progress-bar--animate { animation-delay: 0.15s; }
.cm-lb-list .cm-lb-row:nth-child(4)  .cm-lb-progress-bar--animate { animation-delay: 0.20s; }
.cm-lb-list .cm-lb-row:nth-child(5)  .cm-lb-progress-bar--animate { animation-delay: 0.25s; }
.cm-lb-list .cm-lb-row:nth-child(6)  .cm-lb-progress-bar--animate { animation-delay: 0.30s; }
.cm-lb-list .cm-lb-row:nth-child(7)  .cm-lb-progress-bar--animate { animation-delay: 0.35s; }
.cm-lb-list .cm-lb-row:nth-child(8)  .cm-lb-progress-bar--animate { animation-delay: 0.40s; }
.cm-lb-list .cm-lb-row:nth-child(9)  .cm-lb-progress-bar--animate { animation-delay: 0.45s; }
.cm-lb-list .cm-lb-row:nth-child(10) .cm-lb-progress-bar--animate { animation-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
    .cm-lb-progress-bar--animate { animation: none; }
}

/* ── Feature 2: Countdown pill ─────────────────────────────── */
.cm-lb-countdown-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: 50px;
    padding: 0.18rem 0.7rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: #c084fc;
    white-space: nowrap;
}

/* Override subtitle to allow pill to sit inline */
.cm-lb-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: var(--text-dim, #9ca3af);
    margin: 0.3rem 0 0;
}

/* ── Feature 3: Motivational insight variants ──────────────── */
.cm-lb-insight--top3 {
    background: rgba(251, 191, 36, 0.07);
    border-color: rgba(251, 191, 36, 0.22);
}

.cm-lb-insight--top3 strong {
    color: #fbbf24;
}

.cm-lb-insight--close {
    background: rgba(52, 211, 153, 0.07);
    border-color: rgba(52, 211, 153, 0.22);
}

.cm-lb-insight--close strong {
    color: #34d399;
}

.cm-lb-insight--guest {
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.2);
}

/* ── Batch pill in list rows ──────────────────────────────────── */
.cm-lb-batch-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    font-size: 0.66rem;
    font-weight: 700;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #a855f7;
    letter-spacing: 0.3px;
}

/* ── Feature 4: Elite badges ───────────────────────────────── */
.cm-lb-elite-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50px;
    padding: 0.15rem 0.55rem;
    vertical-align: middle;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

/* 🏆 Weekly Leader — gold */
.cm-lb-badge--leader {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
}

/* ⭐ Consistent Performer — purple */
.cm-lb-badge--consistent {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #a855f7;
}

/* Name row wraps cleanly with badges */
.cm-lb-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #f1f0ff);
    margin: 0 0 0.3rem;
    line-height: 1.3;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cm-lb-countdown-pill {
        font-size: 0.7rem;
        padding: 0.15rem 0.6rem;
    }

    .cm-lb-elite-badge {
        font-size: 0.6rem;
        padding: 0.12rem 0.45rem;
    }

    .cm-lb-row--you::before {
        width: 2px;
    }

    .cm-lb-name {
        font-size: 0.84rem;
        gap: 0.3rem;
    }
}
/* ========================================
   profile.css — My Profile Page Styles
   Matches existing ChordStar dark theme.
   Variables from base.css are used.
======================================== */

/* ─── Profile Section Layout ─────────────────────────────── */
#profile {
    padding-bottom: 6rem; /* space for bottom player bar */
}

#profile .section-header {
    margin-bottom: 1.8rem;
}

/* ─── Profile Input Fields ───────────────────────────────── */
.profile-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--input-bg, rgba(0,0,0,0.35));
    border: 1.5px solid rgba(217, 70, 239, 0.25);
    border-radius: 10px;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.25s, box-shadow 0.25s;
    margin: 0; /* override base textarea */
    min-height: unset;
    resize: vertical;
}

.profile-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(217, 70, 239, 0.25);
}

/* Style native <select> to match theme */
.profile-input option {
    background: var(--card-bg);
    color: var(--text);
}

/* ─── Profile Field Row ──────────────────────────────────── */
.profile-field-row {
    margin-bottom: 1.1rem;
}

.profile-field-row:last-child {
    margin-bottom: 0;
}

.profile-label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Profile Section Card Title ─────────────────────────── */
.profile-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(217, 70, 239, 0.2);
}

/* ─── Batch Badge ────────────────────────────────────────── */
.batch-badge {
    display: inline-block;
    white-space: nowrap;
}

/* ─── Toast animation ────────────────────────────────────── */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* ─── Responsive: stack profile top card on mobile ──────── */
@media (max-width: 600px) {
    .profile-top-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }
}

/* ================================================================
   STREAK CARD — Daily Practice Streak
   Injected into profile top area by streak.js + profile.js
   ================================================================ */

.streak-card {
    /* Base styles are inline (dynamic color based on active state).
       This class exists for any overrides or media queries. */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover lift */
.streak-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 35px rgba(217, 70, 239, 0.22) !important;
}

/* Milestone toast — ensure it's above all modals */
#streakMilestoneToast {
    pointer-events: none; /* don't block clicks */
}

/* Sidebar streak badge */
#sidebarStreakBadge {
    font-size: 0.75rem;
    transition: opacity 0.3s ease;
}

/* Mobile — stack streak card elements */
@media (max-width: 480px) {
    .streak-card {
        gap: 1rem !important;
    }

    #streakFlameIndicator {
        font-size: 2rem !important;
    }
}

/* ================================================================
   PRACTICE WINDOW — Time Slot Pill Selector
   Used in the Practice Routine card in My Profile.
   Classes: .pw-pill-group  .pw-pill  .pw-pill.active  .pw-hint
   ================================================================ */

.pw-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.pw-pill {
    /* Unselected state — subtle, matches existing batch/filter pills */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 1.5px solid rgba(217, 70, 239, 0.25);
    background: rgba(217, 70, 239, 0.06);
    color: var(--text-dim);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    user-select: none;
    white-space: nowrap;
}

.pw-pill:hover {
    border-color: rgba(217, 70, 239, 0.55);
    background: rgba(217, 70, 239, 0.12);
    color: var(--text);
    transform: translateY(-1px);
}

/* Active / selected state — matches app's primary gradient style */
.pw-pill.active {
    background: linear-gradient(135deg, rgba(217,70,239,0.28), rgba(168,85,247,0.22));
    border-color: #d946ef;
    color: #f0e7ff;
    box-shadow:
        0 0 0 1px rgba(217,70,239,0.3),
        0 4px 14px rgba(217,70,239,0.25);
    transform: translateY(-1px);
}

.pw-pill.active:hover {
    box-shadow:
        0 0 0 1px rgba(217,70,239,0.5),
        0 6px 18px rgba(217,70,239,0.35);
}

/* Hint text below the pills */
.pw-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 0.65rem;
    margin-bottom: 0;
    line-height: 1.5;
}

.pw-hint strong {
    color: #d946ef;
    font-weight: 700;
}

/* ── Mobile: stack pills into 2-column grid on small screens ── */
@media (max-width: 480px) {
    .pw-pill-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .pw-pill {
        justify-content: center;
        font-size: 0.8rem;
        padding: 0.5rem 0.7rem;
    }
}

/* ============================================================
   PROFILE PROGRESS DASHBOARD — mature mode UI
   All classes prefixed prd- to avoid conflicts.
   ============================================================ */

.prd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 4rem;
}

.prd-card {
    background: var(--card-bg-alpha, rgba(26,15,46,0.4));
    border: 1px solid rgba(217,70,239,0.18);
    border-radius: 16px;
    padding: 1.2rem 1.3rem;
    transition: border-color 0.2s;
}

.prd-card:hover {
    border-color: rgba(217,70,239,0.35);
}

.prd-card--wide {
    grid-column: 1 / -1;
}

.prd-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(196,181,212,0.85);
    margin: 0 0 0.9rem;
    letter-spacing: 0.3px;
}

/* Stats row inside a card */
.prd-stats-row {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.prd-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 60px;
}

.prd-stat-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #d946ef;
    line-height: 1;
}

.prd-stat-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(196,181,212,0.5);
}

.prd-loading {
    opacity: 0.4;
    font-size: 1rem;
}

/* Batch row */
.prd-batch-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.prd-batch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    min-width: 90px;
    gap: 0.15rem;
    position: relative;
    transition: border-color 0.2s;
}

.prd-batch-item.prd-batch-reached {
    background: rgba(217,70,239,0.08);
    border-color: rgba(217,70,239,0.25);
}

.prd-batch-item.prd-batch-current {
    border-color: #d946ef;
    background: rgba(217,70,239,0.15);
    box-shadow: 0 0 12px rgba(217,70,239,0.2);
}

.prd-batch-emoji {
    font-size: 1.2rem;
    line-height: 1;
}

.prd-batch-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(196,181,212,0.7);
    text-align: center;
    white-space: nowrap;
}

.prd-batch-current .prd-batch-name {
    color: #d946ef;
}

.prd-batch-days {
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    color: rgba(196,181,212,0.4);
    text-align: center;
}

.prd-batch-curr-tag {
    font-size: 0.58rem;
    font-weight: 700;
    color: #d946ef;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.prd-batch-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.73rem;
    color: rgba(196,181,212,0.4);
    margin: 0;
}

/* Recent activity list */
.prd-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prd-loading-row {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgba(196,181,212,0.4);
    padding: 0.5rem 0;
}

.prd-empty {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgba(196,181,212,0.45);
    text-align: center;
    padding: 1rem 0;
}

/* ── Premium activity empty state ────────────────────────────── */
.prd-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem 2.2rem;
    background: rgba(255,255,255,0.015);
    border: 1px dashed rgba(217,70,239,0.18);
    border-radius: 14px;
    animation: prd-es-in 0.4s ease both;
}
@keyframes prd-es-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.prd-empty-icon {
    font-size: 2.2rem;
    margin-bottom: 0.55rem;
    filter: drop-shadow(0 0 10px rgba(217,70,239,0.35));
    animation: prd-icon-pulse 2.8s ease-in-out infinite;
}
@keyframes prd-icon-pulse {
    0%,100% { opacity: 1;    transform: scale(1);    }
    50%      { opacity: 0.8; transform: scale(1.07); }
}
.prd-empty-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    margin: 0 0 0.4rem;
}
.prd-empty-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196,181,212,0.6);
    margin: 0 0 1.1rem;
    line-height: 1.55;
    max-width: 280px;
}
.prd-empty-cta {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border: none;
    border-radius: 50px;
    padding: 0.5rem 1.4rem;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(217,70,239,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.prd-empty-cta:hover  { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(217,70,239,0.55); }
.prd-empty-cta:active { transform: translateY(0); }

.prd-activity-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}

.prd-act-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
}

.prd-act-body {
    flex: 1;
    min-width: 0;
}

.prd-act-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgba(196,181,212,0.85);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prd-act-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    color: rgba(196,181,212,0.45);
    margin: 0.1rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prd-act-time {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    color: rgba(196,181,212,0.4);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 600px) {
    .prd-grid {
        grid-template-columns: 1fr;
    }

    .prd-card--wide {
        grid-column: 1;
    }

    .prd-stat-val {
        font-size: 1.2rem;
    }

    .prd-batch-row {
        gap: 0.45rem;
    }

    .prd-batch-item {
        min-width: 76px;
        padding: 0.45rem 0.6rem;
    }
}
/* ============================================================
   learnSongs.css — Practice Songs Section
   Same dark purple theme as existing project.
   All classes prefixed with "ls-" to avoid conflicts.
   ============================================================ */

/* ── Practice Section Header — title row with Surprise Me button ─ */
.ls-practice-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ls-practice-header-top .ls-surprise-btn {
    float: none;          /* override the float:right from base style */
    margin-top: 3rem;
    flex-shrink: 0;
    align-self: flex-start;
}

/* ── Filter Bar ──────────────────────────────────────────────── */
.ls-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.ls-filter-btn {
    padding: 0.5rem 1.1rem;
    border-radius: 50px;
    border: 1.5px solid rgba(217, 70, 239, 0.3);
    background: rgba(217, 70, 239, 0.08);
    color: var(--text-dim);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.3px;
}

.ls-filter-btn:hover {
    background: rgba(217, 70, 239, 0.2);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.ls-filter-btn.active {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(217, 70, 239, 0.4);
}

/* ── Songs Grid ──────────────────────────────────────────────── */
.ls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.8rem;
    margin-bottom: 4rem;
}

/* ── Song Card ───────────────────────────────────────────────── */
.ls-card {
    background: var(--detail-bg, linear-gradient(135deg,rgba(26,15,46,0.92),rgba(18,8,32,0.92)));
    border: 2px solid rgba(217, 70, 239, 0.25);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    position: relative;
    /* stagger animation */
    animation: lsCardIn 0.5s ease both;
}

@keyframes lsCardIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ls-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.08), rgba(239, 68, 68, 0.08));
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.ls-card:hover::before { opacity: 1; }

.ls-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--primary);
    box-shadow: 0 18px 50px rgba(217, 70, 239, 0.55);
}

/* ── Thumbnail ───────────────────────────────────────────────── */
.ls-thumb-wrap {
    position: relative;
    width: 100%;
    height: 190px;
    overflow: hidden;
}

.ls-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.ls-card:hover .ls-thumb {
    transform: scale(1.07);
}

/* play overlay on hover */
.ls-play-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-bg, rgba(0,0,0,0.52));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.ls-card:hover .ls-play-overlay { opacity: 1; }

.ls-play-circle {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, #d946ef, #ef4444);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    box-shadow: 0 4px 20px rgba(217, 70, 239, 0.7);
    animation: lsPulse 2s infinite;
}

@keyframes lsPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.12); }
}

/* ── Card Body ───────────────────────────────────────────────── */
.ls-card-body {
    padding: 1.3rem 1.4rem 1.4rem;
}

.ls-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-card-artist {
    font-size: 0.88rem;
    color: var(--text-dim);
    margin-bottom: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tags ────────────────────────────────────────────────────── */
.ls-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ls-tag {
    padding: 0.28rem 0.75rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
}

.ls-tag-beginner {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}
.ls-tag-intermediate {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.4);
}
.ls-tag-advanced {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}
.ls-tag-hindi {
    background: rgba(168, 85, 247, 0.2);
    color: #e9d5ff;
    border-color: rgba(168, 85, 247, 0.4);
}
.ls-tag-english {
    background: rgba(59, 130, 246, 0.2);
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.4);
}
.ls-tag-bollywood {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.4);
}
.ls-tag-pop {
    background: rgba(236, 72, 153, 0.2);
    color: #fbcfe8;
    border-color: rgba(236, 72, 153, 0.4);
}
.ls-tag-rock {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}
.ls-tag-acoustic {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}

/* ── No Results ──────────────────────────────────────────────── */
.ls-no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-dim);
    font-family: 'Outfit', sans-serif;
    grid-column: 1/-1;
}
.ls-no-results .ls-no-emoji { font-size: 3rem; margin-bottom: 1rem; }

/* ── Full Empty State (no songs at all) ─────────────────────── */
.ls-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem 5rem;
    background: rgba(255,255,255,0.015);
    border: 1.5px dashed rgba(217,70,239,0.2);
    border-radius: 20px;
    animation: ls-fade-in 0.45s ease both;
}
@keyframes ls-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.ls-empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 14px rgba(217,70,239,0.4));
    animation: ls-icon-float 3s ease-in-out infinite;
}
@keyframes ls-icon-float {
    0%,100% { transform: translateY(0);   }
    50%      { transform: translateY(-6px); }
}
.ls-empty-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #f1f0ff);
    margin: 0 0 0.5rem;
}
.ls-empty-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    color: var(--text-dim, #9ca3af);
    margin: 0 0 1.6rem;
    max-width: 320px;
    line-height: 1.6;
}
.ls-empty-cta {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border: none;
    border-radius: 50px;
    padding: 0.7rem 2rem;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(217,70,239,0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ls-empty-cta:hover  { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(217,70,239,0.55); }
.ls-empty-cta:active { transform: translateY(0); }
@media (max-width: 480px) {
    .ls-empty-state { padding: 3rem 1.5rem 4rem; }
    .ls-empty-icon  { font-size: 2.8rem; }
    .ls-empty-title { font-size: 1.05rem; }
}

/* ── SONG DETAIL MODAL ───────────────────────────────────────── */
.ls-detail-modal {
    display: none;
    position: fixed;
    top: 3rem;         /* below ticker (desktop) */
    left: 260px;       /* beside sidebar */
    right: 0;
    bottom: 0;
    background: var(--page-bg, linear-gradient(135deg,#0a0514,#1a0a2e,#16001e));
    z-index: 500;
    overflow-y: auto;
    padding: 2rem 3rem 6rem;   /* TASK 3: slightly tighter top for alignment */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ls-detail-modal.active {
    display: block;
    transform: translateY(0);
}

/* Close button */
.ls-detail-close {
    position: fixed;
    top: 4.2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ef4444, #d946ef);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5);
    transition: all 0.3s;
    z-index: 501;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ls-detail-close:hover {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 28px rgba(239, 68, 68, 0.7);
}

/* Detail Header */
.ls-detail-header {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

/* ── Thumbnail wrap — hosts thumbnail img OR inline YT player ── */
.ls-detail-thumb-wrap {
    width: 280px;
    aspect-ratio: 1 / 1;      /* square for thumbnail */
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    align-self: flex-start;   /* TASK 3: never stretch to match info column height */
    position: relative;
    box-shadow: 0 16px 50px rgba(217, 70, 239, 0.45);
    border: 3px solid rgba(217, 70, 239, 0.4);
    background: var(--card-bg);
    transition: aspect-ratio 0.3s ease, box-shadow 0.3s ease;
}

/* When player is active — wider 16:9, vertically centered in flex row */
.ls-detail-thumb-wrap.ls-wrap-playing {
    width: 340px;            /* wider → taller 16:9 = 191px, less visual drop */
    aspect-ratio: 16 / 9;
    align-self: center;      /* center in flex row so it doesn't sit at very top */
    box-shadow: 0 8px 40px rgba(217, 70, 239, 0.6);
}

.ls-detail-thumb {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    box-shadow: none;
    border: none;
    display: block;
    flex-shrink: 0;
}

/* ── Inline YouTube player ─────────────────────────────────────── */
#lsInlinePlayer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#lsInlinePlayer iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Custom play/pause overlay (Chordify-style) ───────────────────
   Sits on top of the iframe (cross-origin, so we can't touch YT's
   native controls directly). Intercepts all clicks → toggle play/pause.
   controls: 0 in playerVars removes YouTube's own control bar entirely.
──────────────────────────────────────────────────────────────────── */
#lsPlayerOverlay {
    position: absolute;
    inset: 0;
    z-index: 3;                  /* above iframe, below fallback */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* The circular button in the centre */
.ls-overlay-btn {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.62);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    color: #fff;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.22s ease, transform 0.18s ease;
    pointer-events: none;        /* overlay div handles the click */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 2px 18px rgba(0,0,0,0.45);
    user-select: none;
}

/* Show button on hover over overlay */
#lsPlayerOverlay:hover .ls-overlay-btn {
    opacity: 1;
    transform: scale(1);
}

/* Keep visible when paused (so user knows how to resume) */
#lsPlayerOverlay.ls-overlay-paused .ls-overlay-btn {
    opacity: 1;
    transform: scale(1);
}

/* Brief flash animation when toggling — fades quickly while playing */
#lsPlayerOverlay.ls-overlay-flash .ls-overlay-btn {
    opacity: 1;
    transform: scale(1.08);
}

/* ── Embed-disabled fallback UI ───────────────────────────────── */
.ls-embed-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(13, 13, 20, 0.95);
    text-align: center;
}

.ls-embed-fallback-icon {
    font-size: 2rem;
    line-height: 1;
}

.ls-embed-fallback-msg {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
    line-height: 1.4;
}

.ls-embed-fallback-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: linear-gradient(135deg, #d946ef, #ef4444);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.ls-embed-fallback-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.ls-detail-info {
    flex: 1;
    min-width: 220px;
}

.ls-detail-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    background: linear-gradient(90deg, #d946ef, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.ls-detail-artist {
    font-size: 1.2rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
}

.ls-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;   /* action bar owns its own top margin */
}

/* ── Unified Action Bar ──────────────────────────────────────────
   Holds Watch Tutorial, Play, divider, and Key selector in one row.
   Wraps gracefully on mobile.
────────────────────────────────────────────────────────────────── */
.ls-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;          /* T4: 14.4px desktop rhythm */
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

/* Shared pill height & padding for visual rhythm */
.ls-action-btn {
    height: 44px;          /* T1: fixed height — matches .ls-action-key */
    padding: 0 1.5rem;
    border-radius: 50px;
    border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease,  /* T3: unified timing */
                background 0.18s ease, border-color 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.ls-action-primary {
    background: linear-gradient(135deg, #d946ef, #ef4444);
    color: #fff;
    box-shadow: 0 4px 18px rgba(217, 70, 239, 0.45);
}
.ls-action-primary:hover {
    transform: translateY(-1px);          /* T3: subtle lift, no scale jitter */
    box-shadow: 0 6px 20px rgba(217, 70, 239, 0.55);
}
.ls-action-primary:active { transform: translateY(0); }

.ls-action-secondary {
    background: rgba(217, 70, 239, 0.12);
    color: #f0e6ff;
    border: 1.5px solid rgba(217, 70, 239, 0.45);
}
.ls-action-secondary:hover {
    background: rgba(217, 70, 239, 0.22);
    border-color: rgba(217, 70, 239, 0.75);
    transform: translateY(-1px);          /* T3: matches primary lift magnitude */
    box-shadow: 0 4px 10px rgba(217, 70, 239, 0.2);
}
.ls-action-secondary:active { transform: translateY(0); }

/* Thin vertical divider between buttons and key selector */
.ls-action-divider {
    width: 1px;
    height: 28px;
    background: rgba(167, 139, 250, 0.25);
    border-radius: 1px;
    flex-shrink: 0;
    align-self: center;
    margin: 0 0.15rem;
}

/* ── Key Selector inside the action bar ──────────────────────── */
.ls-action-key {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1.5px solid rgba(139, 92, 246, 0.4);
    border-radius: 50px;
    padding: 0 0.85rem 0 1.1rem;
    transition: border-color 0.18s ease, background 0.18s ease,  /* T3: unified timing */
                box-shadow 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
    cursor: default;
}
.ls-action-key:hover {
    background: rgba(139, 92, 246, 0.16);
    border-color: rgba(167, 139, 250, 0.65);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.15); /* T3: subtle, not glaring */
    transform: translateY(-1px);                       /* T3: same lift as buttons */
}

.ls-action-key-label {
    font-size: 0.75rem;
    font-weight: 500;          /* T2: reduced from 700 — label recedes */
    color: #c4b5fd;
    opacity: 0.72;             /* T2: dimmed so key value reads first */
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

/* select + caret wrapper */
.ls-action-key-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ls-action-key-select {
    appearance: none;
    -webkit-appearance: none;
    opacity: 1;                /* T2: full brightness — key value dominates */
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(109, 40, 217, 0.65));
    border: 1.5px solid rgba(167, 139, 250, 0.6);
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.02em;
    /* extra right padding for the caret */
    padding: 0.28rem 1.75rem 0.28rem 0.8rem;
    outline: none;
    min-width: 58px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.ls-action-key-select:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.75), rgba(109, 40, 217, 0.85));
    border-color: #a78bfa;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.45);
}
.ls-action-key-select:focus {
    outline: none;             /* T5: suppress browser default */
}
.ls-action-key-select:focus-visible {
    outline: none;
    border-color: #c4b5fd;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.35); /* T5: soft purple, accessible */
}
.ls-action-key-select option {
    background: var(--card-bg);
    color: #e9d5ff;
    font-weight: 600;
}

/* SVG caret overlaid on the select */
.ls-action-key-caret {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    color: #c4b5fd;
    pointer-events: none;
    flex-shrink: 0;
}

/* Detail Sections */
.ls-detail-section {
    background: var(--card-bg-alpha, rgba(26,15,46,0.4));
    border: 2px solid rgba(217, 70, 239, 0.25);
    border-radius: 18px;
    padding: 1.8rem 2rem;
    margin-bottom: 1.8rem;
    backdrop-filter: blur(10px);
}

.ls-detail-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(217, 70, 239, 0.2);
}

.ls-detail-desc {
    color: var(--text-dim);
    line-height: 1.8;
    font-size: 1rem;
}

/* Chords Grid */
.ls-chords-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
}

.ls-chord-card {
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(239, 68, 68, 0.15));
    border: 2px solid rgba(217, 70, 239, 0.35);
    border-radius: 14px;
    padding: 1.2rem;
    text-align: center;
    transition: all 0.3s;
}
.ls-chord-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(217, 70, 239, 0.4);
}
.ls-chord-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Space Grotesk', sans-serif;
}
.ls-chord-type {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 0.2rem;
}

/* Tabs Box */
.ls-tabs-box {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(217, 70, 239, 0.2);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--text-dim);
    line-height: 1.9;
    white-space: pre-wrap;
    overflow-x: auto;
    /* ── Inner scroll: page stays fixed, tabs box scrolls internally ── */
    max-height: min(60vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Practice Notes in Detail */
.ls-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ls-note-item {
    background: rgba(217, 70, 239, 0.08);
    border-left: 3px solid #d946ef;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    color: var(--text-dim);
}
.ls-note-date {
    font-size: 0.72rem;
    color: #d946ef;
    margin-bottom: 0.2rem;
    font-weight: 600;
}
.ls-note-empty {
    color: var(--text-dim);
    font-size: 0.88rem;
    font-style: italic;
}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* TASK 4B: Modal must sit below ticker(26px) + app-header(55px) = 81px */
    .ls-detail-modal {
        top: 81px;
        left: 0;
        padding: 1.2rem 1rem 5rem;
        /* Ensure it never overlaps the fixed app-header above it */
        max-height: calc(100dvh - 81px);
    }
    /* Close button: show on mobile, repositioned to top of modal */
    .ls-detail-close {
        display: flex;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 44px;
        border-radius: 0;
        background: rgba(10, 5, 20, 0.92);
        border-bottom: 1px solid rgba(217, 70, 239, 0.2);
        justify-content: flex-start;
        align-items: center;
        padding: 0 1rem;
        gap: 0.5rem;
        font-size: 0.9rem;
        font-family: 'Outfit', sans-serif;
        font-weight: 600;
        color: rgba(217, 70, 239, 0.9);
        box-shadow: none;
        z-index: 502;
        margin-bottom: 0.5rem;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .ls-detail-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
    }
    .ls-detail-thumb-wrap {
        width: 100%;
        max-width: 320px;
        aspect-ratio: 1 / 1;
        align-self: center;
    }
    .ls-detail-thumb-wrap.ls-wrap-playing {
        width: 100%;
        max-width: 320px;
        aspect-ratio: 16 / 9;
    }
    .ls-detail-thumb {
        width: 100%;
        height: 100%;
    }
    .ls-detail-title { font-size: 1.8rem; }
    .ls-detail-tags { justify-content: center; }
    .ls-detail-actions {
        justify-content: center;
        gap: 0.65rem;
    }
    /* TASK 4C: Timeline — clear separation from buttons above it */
    .ls-timeline-bar {
        margin-top: 1rem;
        padding: 0 0.25rem;  /* slight inset so thumb never clips edges */
    }
    /* On narrow screens the divider becomes a full-width row break */
    .ls-action-divider {
        width: 100%;
        height: 1px;
        margin: 0.1rem 0;
    }
    .ls-grid {
        grid-template-columns: 1fr;
    }
    .ls-filter-bar {
        gap: 0.4rem;
    }
    .ls-filter-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }
    /* Tabs inner scroll: shorter on mobile to leave room for player + actions */
    .ls-tabs-box {
        max-height: 55vh;
    }
}

/* ================================================================
   SURPRISE / RECENTLY UPDATED BUTTON
   Premium glowing gradient button in Practice Songs header
   ================================================================ */

.ls-surprise-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.2rem;
    background: linear-gradient(135deg, #d946ef 0%, #a855f7 60%, #7c3aed 100%);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    float: right;
    margin-top: 0.5rem;
    position: relative;
    box-shadow:
        0 0 18px rgba(217, 70, 239, 0.55),
        0 4px 20px rgba(168, 85, 247, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: lsSurprisePulse 2.8s ease-in-out infinite;
}

.ls-surprise-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 0 28px rgba(217, 70, 239, 0.75),
        0 8px 28px rgba(168, 85, 247, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.2);
    animation: none; /* pause pulse on hover so glow stays bright */
}

.ls-surprise-btn:active {
    transform: translateY(0) scale(0.98);
}

.ls-surprise-icon {
    font-size: 1rem;
    display: inline-block;
    animation: lsSpinStar 4s linear infinite;
}

@keyframes lsSurprisePulse {
    0%, 100% { box-shadow: 0 0 14px rgba(217,70,239,0.45), 0 4px 16px rgba(168,85,247,0.3), inset 0 1px 0 rgba(255,255,255,0.15); }
    50%       { box-shadow: 0 0 26px rgba(217,70,239,0.75), 0 6px 24px rgba(168,85,247,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
}

@keyframes lsSpinStar {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(1); }
}


/* ================================================================
   RANDOM PICK MODAL — Premium upgrade
   ================================================================ */

.ls-random-modal-backdrop {
    /* Override generic .modal display — keep base .modal show/hide behaviour */
    backdrop-filter: blur(12px) !important;
    background: rgba(5, 0, 20, 0.82) !important;
}

.ls-random-modal-content {
    position: relative;
    background: linear-gradient(145deg, #1a0a2e 0%, #110720 55%, #0d0518 100%);
    border: 2px solid rgba(217, 70, 239, 0.55);
    border-radius: 24px;
    padding: 2.8rem 2.4rem 2.2rem;
    width: 100%;
    max-width: 420px;
    margin: 1rem;
    text-align: center;
    box-shadow:
        0 0 60px rgba(217, 70, 239, 0.3),
        0 30px 80px rgba(5, 0, 20, 0.7),
        inset 0 1px 0 rgba(255,255,255,0.06);
    animation: lsModalScaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes lsModalScaleIn {
    from { opacity: 0; transform: scale(0.82) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.ls-random-close {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    background: none;
    border: none;
    color: rgba(196, 181, 212, 0.7);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}
.ls-random-close:hover {
    color: #d946ef;
    transform: scale(1.15);
}

.ls-random-header {
    margin-bottom: 1.8rem;
}

.ls-random-dice {
    font-size: 3.2rem;
    margin-bottom: 0.4rem;
    display: inline-block;
    animation: lsDiceBounce 0.6s ease;
}

@keyframes lsDiceBounce {
    0%   { transform: scale(0.4) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); }
}

.ls-random-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, #d946ef, #a855f7, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.ls-random-song-wrap {
    background: rgba(217, 70, 239, 0.07);
    border: 1px solid rgba(217, 70, 239, 0.25);
    border-radius: 16px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.8rem;
}

.ls-random-song-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.35rem;
}

.ls-random-artist {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: rgba(196, 181, 212, 0.85);
    margin: 0 0 0.4rem;
}

.ls-random-meta {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    color: rgba(217, 70, 239, 0.8);
    margin: 0;
    font-weight: 600;
}

.ls-random-cta {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: linear-gradient(135deg, #d946ef 0%, #a855f7 100%);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(217, 70, 239, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 1rem;
}
.ls-random-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(217, 70, 239, 0.65);
}

.ls-random-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    color: rgba(196, 181, 212, 0.5);
    margin: 0;
    transition: color 0.2s;
}
.ls-random-hint:hover {
    color: rgba(217, 70, 239, 0.8);
}

/* Mobile */
@media (max-width: 480px) {
    .ls-random-modal-content {
        padding: 2.2rem 1.5rem 1.8rem;
    }
    .ls-random-song-name {
        font-size: 1.3rem;
    }
    .ls-surprise-btn {
        font-size: 0.7rem;
        padding: 0.45rem 0.9rem;
    }
}

/* ================================================================
   WEEKLY CHALLENGE BADGE — on song cards in Learn Songs grid
   ================================================================ */

/* Wrapper — sits over the thumbnail, top-left corner */
.ls-weekly-badge-wrap {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    pointer-events: none;
}

/* Badge pill */
.ls-weekly-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.65rem;
    background: linear-gradient(135deg, rgba(217,70,239,0.92), rgba(168,85,247,0.92));
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(217, 70, 239, 0.5);
    backdrop-filter: blur(4px);
}

/* Subtle border glow on the card itself when it's the challenge song */
.ls-card--challenge {
    border-color: rgba(217, 70, 239, 0.5) !important;
    box-shadow:
        0 0 0 1.5px rgba(217, 70, 239, 0.25),
        0 4px 20px rgba(168, 85, 247, 0.2);
}

/* Make sure ls-thumb-wrap is position:relative for badge to overlay */
.ls-thumb-wrap {
    position: relative;
}

/* ================================================================
   DAILY 3-MINUTE CHALLENGE CARD
   Sits above song grid in Practice section.
   All classes prefixed dc- to avoid conflicts.
   ================================================================ */

/* ── Outer card ─────────────────────────────────────────────────── */
.dc-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(30,10,60,0.97) 0%,
        rgba(20,5,45,0.98) 60%,
        rgba(28,8,50,0.97) 100%);
    border: 1.5px solid rgba(217,70,239,0.4);
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.6rem;
    box-shadow:
        0 0 0 1px rgba(168,85,247,0.1),
        0 8px 36px rgba(168,85,247,0.18),
        0 2px 6px rgba(0,0,0,0.35);
    transition: border-color 0.3s, box-shadow 0.3s;
    animation: dc-enter 0.45s cubic-bezier(0.34,1.4,0.64,1) both;
}

@keyframes dc-enter {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0);     }
}

.dc-card:hover {
    border-color: rgba(217,70,239,0.6);
    box-shadow:
        0 0 0 1px rgba(168,85,247,0.18),
        0 12px 46px rgba(168,85,247,0.25),
        0 2px 6px rgba(0,0,0,0.35);
}

/* Decorative glow orb */
.dc-card-orb {
    position: absolute;
    top: -50px; right: -50px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ── Label row ──────────────────────────────────────────────────── */
.dc-label-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
    flex-wrap: wrap;
}

.dc-pill {
    display: inline-block;
    background: linear-gradient(135deg, rgba(217,70,239,0.28), rgba(168,85,247,0.22));
    border: 1px solid rgba(217,70,239,0.48);
    border-radius: 50px;
    padding: 0.22rem 0.85rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    color: #e879f9;
    letter-spacing: 0.3px;
}

/* Difficulty badges */
.dc-diff-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.65rem;
    border-radius: 50px;
    border: 1px solid;
}
.dc-diff-beginner    { color: #4ade80; border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.08); }
.dc-diff-intermediate{ color: #f59e0b; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
.dc-diff-advanced    { color: #ef4444; border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.08);  }

/* ── Body — text + CTA ──────────────────────────────────────────── */
.dc-body {
    display: flex;
    align-items: flex-end;
    gap: 1.4rem;
    flex-wrap: wrap;
}

.dc-text { flex: 1; min-width: 0; }

.dc-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.05rem, 2.8vw, 1.3rem);
    font-weight: 800;
    background: linear-gradient(90deg, #f0e7ff 0%, #d946ef 55%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.4rem;
    line-height: 1.25;
}

.dc-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    color: rgba(196,181,212,0.75);
    line-height: 1.55;
    margin: 0 0 0.5rem;
    max-width: 500px;
}

.dc-time-hint {
    font-family: 'Outfit', sans-serif;
    font-size: 0.73rem;
    color: rgba(196,181,212,0.42);
    margin: 0;
}

/* ── CTA ────────────────────────────────────────────────────────── */
.dc-cta-wrap { flex-shrink: 0; }

.dc-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.45rem;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border: none;
    border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(217,70,239,0.42);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    letter-spacing: 0.2px;
}

.dc-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(217,70,239,0.58);
}

.dc-cta-btn:active {
    transform: translateY(0);
    opacity: 0.9;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .dc-card {
        padding: 0.85rem 1rem;
        margin-bottom: 1rem;
        border-radius: 14px;
    }

    /* Hide decorative orb on mobile to save space */
    .dc-card-orb { display: none; }

    /* Label row — keep on one line, smaller */
    .dc-label-row {
        gap: 0.35rem;
        margin-bottom: 0.6rem;
        flex-wrap: nowrap;
        align-items: center;
    }

    .dc-pill {
        font-size: 0.66rem;
        padding: 0.14rem 0.6rem;
        white-space: nowrap;
    }

    .dc-diff-badge {
        font-size: 0.63rem;
        padding: 0.12rem 0.45rem;
        white-space: nowrap;
    }

    /* Body — side by side: text left, button right */
    .dc-body {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }

    .dc-text {
        flex: 1;
        min-width: 0; /* allows text to shrink */
    }

    .dc-title {
        font-size: 0.95rem;
        margin-bottom: 0.2rem;
        /* Let it wrap naturally — don't truncate */
        white-space: normal;
        line-height: 1.3;
        -webkit-text-fill-color: unset;
        background: linear-gradient(90deg, #f0e7ff 0%, #d946ef 55%, #a855f7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .dc-desc {
        font-size: 0.75rem;
        line-height: 1.4;
        margin-bottom: 0.2rem;
        color: rgba(196,181,212,0.7);
        /* Max 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dc-time-hint {
        font-size: 0.65rem;
        margin: 0;
    }

    /* CTA — compact vertical button on the right */
    .dc-cta-wrap {
        flex-shrink: 0;
        width: auto;
    }

    .dc-cta-btn {
        flex-direction: column;
        gap: 0.05rem;
        padding: 0.55rem 0.85rem;
        font-size: 0.75rem;
        white-space: nowrap;
        width: auto;
        line-height: 1.25;
        justify-content: center;
        min-width: 90px;
    }
}

/* ================================================================
   CHORD HIGHLIGHT — Guided Playback (lsYouTube.js)
   Applied via JS: .ls-chord-card.ls-chord-active
   ================================================================ */

.ls-chord-card {
    /* Ensure transition covers the new active state properties */
    transition: all 0.18s ease;   /* tightened from 0.3s for snappier sync */
}

/* Active chord — illuminates when song plays this chord */
.ls-chord-card.ls-chord-active {
    transform: translateY(-3px);
    border-color: rgba(168, 85, 247, 0.8);
    box-shadow:
        0 0 0 2px rgba(168, 85, 247, 0.35),
        0 6px 20px rgba(168, 85, 247, 0.25);
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.2),
        rgba(217, 70, 239, 0.18)
    );
}

/* Active chord name gets a brightness boost */
.ls-chord-card.ls-chord-active .ls-chord-name {
    color: #e879f9;    /* slightly brighter than --primary for pop */
}

/* Subtle pulse animation on initial activation */
@keyframes lsChordPop {
    0%   { transform: translateY(-3px) scale(1); }
    40%  { transform: translateY(-4px) scale(1.04); }
    100% { transform: translateY(-3px) scale(1); }
}
.ls-chord-card.ls-chord-active {
    animation: lsChordPop 0.18s ease forwards;
}

/* Mobile — keep lift but reduce intensity */
@media (max-width: 600px) {
    .ls-chord-card.ls-chord-active {
        transform: translateY(-2px);
    }
}

/* ================================================================
   TIMELINE SLIDER — Chordify-style progress bar
   Sits below the action bar; hidden until a song is loaded.
   ================================================================ */

.ls-timeline-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* Visible state — toggled by JS when player starts */
.ls-timeline-bar.ls-timeline-visible {
    opacity: 1;
    pointer-events: auto;
}

.ls-timeline-time {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
    min-width: 2.8rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ── Track ────────────────────────────────────────────────────── */
.ls-timeline-track {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    touch-action: none; /* allow custom touch handling */
    transition: height 0.15s ease;
}
.ls-timeline-track:hover,
.ls-timeline-track:focus {
    height: 8px;
    outline: none;
}

/* ── Fill (progress) ──────────────────────────────────────────── */
.ls-timeline-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #a855f7, #7c3aed);
    border-radius: 999px;
    transition: width 0.18s linear;
    pointer-events: none;
}

/* ── Draggable thumb ─────────────────────────────────────────── */
.ls-timeline-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #a855f7;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
    cursor: grab;
    transition: width 0.15s ease, height 0.15s ease, box-shadow 0.15s ease;
    pointer-events: none; /* track handles the events */
}
.ls-timeline-track:hover .ls-timeline-thumb,
.ls-timeline-track:focus .ls-timeline-thumb,
.ls-timeline-track.ls-timeline-dragging .ls-timeline-thumb {
    width: 18px;
    height: 18px;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.85);
}
.ls-timeline-track.ls-timeline-dragging {
    cursor: grabbing;
}
/* Disable fill transition while dragging for instant feedback */
.ls-timeline-track.ls-timeline-dragging .ls-timeline-fill {
    transition: none;
}

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ls-timeline-bar {
        gap: 0.45rem;
        margin-top: 0.7rem;
    }
    .ls-timeline-time {
        font-size: 0.68rem;
        min-width: 2.4rem;
    }
    .ls-timeline-track {
        height: 8px; /* easier to tap on mobile */
    }
    .ls-timeline-thumb {
        width: 18px;
        height: 18px;
    }
}


/* ================================================================
   Learning Course Full-Screen Page (lcp-*)
   Mirrors .song-detail-page positioning pattern exactly
   ================================================================ */

/* Page shell */
.lcp-page {
    display: none;
    position: fixed;
    top: 3rem;
    left: 260px;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0514 0%, #1a0a2e 50%, #16001e 100%);
    z-index: 500;
    overflow-y: auto;
    padding-bottom: 120px;
}
.lcp-page.active { display: block; }

/* Inner container — full-width like tab-section, no narrow centering */
.lcp-container {
    max-width: 100%;
    padding: 2rem;
}

/* ── Back button ─────────────────────────────────────────── */


/* ── Course hero header ──────────────────────────────────── */
.lcp-course-hero {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    margin-bottom: 1.5rem;
}

.lcp-hero-icon {
    font-size: 3.8rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 16px rgba(217,70,239,0.6));
}

.lcp-hero-info { flex: 1; }

.lcp-hero-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.lcp-course-title {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f0e7ff, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

/* Level badges */
.lcp-level-badge {
    padding: 0.25rem 0.8rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.lcp-badge--beginner { background: rgba(74,222,128,0.18); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.lcp-badge--intermediate { background: rgba(251,191,36,0.18); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
.lcp-badge--advanced { background: rgba(239,68,68,0.18); color: #f87171; border: 1px solid rgba(239,68,68,0.4); }

.lcp-hero-meta {
    font-size: 0.88rem;
    color: var(--text-dim);
    margin-bottom: 0.9rem;
}
.lcp-hero-dot { margin: 0 0.4rem; opacity: 0.5; }

/* Progress bar */
.lcp-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.lcp-progress-bar {
    flex: 1;
    max-width: 280px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 99px;
    overflow: hidden;
}
.lcp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #d946ef, #a855f7);
    border-radius: 99px;
    transition: width 0.6s ease;
}
.lcp-progress-label {
    font-size: 0.78rem;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Divider */
.lcp-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(217,70,239,0.4), transparent);
    margin: 1.5rem 0 2rem;
}

/* Section title */
.lcp-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 1.4rem;
    letter-spacing: 0.02em;
}

/* ── Lesson cards grid ───────────────────────────────────── */
.lcp-lessons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.8rem;
    margin-bottom: 3rem;
}

/* ── Individual lesson card ──────────────────────────────── */
.lcp-lesson-card {
    background: linear-gradient(135deg, rgba(26,15,46,0.92), rgba(18,8,32,0.92));
    border: 2px solid rgba(217,70,239,0.22);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    position: relative;
    animation: lsCardIn 0.5s ease both;
}

.lcp-lesson-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: var(--primary);
    box-shadow: 0 16px 45px rgba(217,70,239,0.5);
}

/* First lesson highlight */
.lcp-lesson-card--first {
    border-color: rgba(217,70,239,0.55);
    box-shadow: 0 0 0 1px rgba(217,70,239,0.2), 0 8px 28px rgba(217,70,239,0.35);
}

.lcp-start-here {
    background: linear-gradient(135deg, rgba(217,70,239,0.25), rgba(168,85,247,0.25));
    color: #e879f9;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(217,70,239,0.2);
}

/* Thumbnail image area */
.lcp-lesson-thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #0a0514;
    overflow: hidden;
    cursor: pointer;
}
.lcp-lesson-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.lcp-lesson-card:hover .lcp-lesson-thumb img {
    transform: scale(1.04);
}
.lcp-thumb-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.28);
    transition: background 0.25s;
}
.lcp-lesson-card:hover .lcp-thumb-play-overlay {
    background: rgba(0,0,0,0.15);
}
.lcp-thumb-play-icon {
    width: 52px;
    height: 52px;
    background: rgba(217,70,239,0.88);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 24px rgba(217,70,239,0.6);
    transition: transform 0.25s, box-shadow 0.25s;
}
.lcp-lesson-card:hover .lcp-thumb-play-icon {
    transform: scale(1.12);
    box-shadow: 0 6px 32px rgba(217,70,239,0.8);
}


/* Card body */
.lcp-lesson-body {
    padding: 1.2rem 1.3rem 1.3rem;
}

.lcp-lesson-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.lcp-lesson-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-purple);
}

/* Difficulty badges */
.lcp-diff {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.lcp-diff--easy  { background: rgba(74,222,128,0.15);  color: #4ade80;  border: 1px solid rgba(74,222,128,0.3); }
.lcp-diff--mid   { background: rgba(251,191,36,0.15);  color: #fbbf24;  border: 1px solid rgba(251,191,36,0.3); }
.lcp-diff--hard  { background: rgba(239,68,68,0.15);   color: #f87171;  border: 1px solid rgba(239,68,68,0.3); }

.lcp-lesson-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.lcp-lesson-sub {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-bottom: 0.9rem;
    line-height: 1.4;
}

.lcp-lesson-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8rem;
}

.lcp-lesson-dur {
    font-size: 0.78rem;
    color: var(--text-dim);
}

/* Start / Play button */
.lcp-start-btn {
    background: rgba(217,70,239,0.18);
    border: 1.5px solid rgba(217,70,239,0.45);
    color: var(--primary);
    padding: 0.45rem 1rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    font-family: inherit;
}
.lcp-start-btn:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 14px rgba(217,70,239,0.5);
}
.lcp-start-btn--primary {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(217,70,239,0.45);
}
.lcp-start-btn--primary:hover {
    box-shadow: 0 6px 24px rgba(217,70,239,0.7);
    transform: scale(1.03);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lcp-page {
        left: 0;
        top: 3rem;
        padding-bottom: 100px;
    }
    .lcp-container {
        padding: 1rem;
        padding-top: 1.2rem;
    }
    .lcp-course-hero {
        flex-direction: column;
        gap: 0.8rem;
    }
    .lcp-hero-icon { font-size: 2.8rem; }
    .lcp-course-title { font-size: 1.6rem; }
    .lcp-lessons-grid {
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }
}


/* ================================================================
   Lesson Watch Mode — Full Viewport Overlay (llp-*)
   Covers ticker + sidebar completely. z-index: 1001 beats both.
   ================================================================ */

/* ── Page shell: true full-screen, no sidebar gap ───────────── */
.llp-page {
    display: none;
    position: fixed;
    inset: 0;                        /* top:0 left:0 right:0 bottom:0 */
    z-index: 8000;                   /* above all modals, below mobile sidebar(9000) + header(9500) */
    background: #07030f;
    overflow: hidden;                /* inner .llp-scroll handles scroll */
    flex-direction: column;
}
.llp-page.active {
    display: flex;
}

/* ── Slim immersive top bar ──────────────────────────────────── */
.llp-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    height: 52px;
    flex-shrink: 0;
    background: rgba(10, 3, 22, 0.96);
    border-bottom: 1px solid rgba(217,70,239,0.15);
    backdrop-filter: blur(10px);
}
.llp-topbar-course {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(240,231,255,0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.llp-topbar-brand {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(217,70,239,0.7);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Scrollable content area below topbar ────────────────────── */
.llp-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1rem 5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(217,70,239,0.3) transparent;
}
.llp-container::-webkit-scrollbar { width: 5px; }
.llp-container::-webkit-scrollbar-track { background: transparent; }
.llp-container::-webkit-scrollbar-thumb { background: rgba(217,70,239,0.35); border-radius: 99px; }

/* ── Two-column watch layout ─────────────────────────────────── */
.llp-watch-layout {
    display: grid;
    width: 100%;                           /* force full container fill */
    grid-template-columns: 1fr 320px;      /* video fills ALL remaining, playlist fixed 320px */
    gap: 1.2rem;
    align-items: stretch;
}

/* ── Left: player column ─────────────────────────────────────── */
.llp-player-col { min-width: 0; }

.llp-meta-line {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-dim, #8b7aa3);
    margin-bottom: 0.5rem;
}
.llp-dot { opacity: 0.4; margin: 0 0.15rem; }
.llp-lesson-num-label {
    font-weight: 700;
    color: #a855f7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}
.llp-diff-badge {
    font-size: 0.71rem;
    font-weight: 700;
    padding: 0.14rem 0.52rem;
    border-radius: 10px;
    background: rgba(217,70,239,0.14);
    color: #d946ef;
    border: 1px solid rgba(217,70,239,0.28);
    letter-spacing: 0.03em;
}
.llp-dur-label { color: var(--text-dim, #8b7aa3); }

.llp-title {
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f0e7ff, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.28rem;
    line-height: 1.25;
}
.llp-subtitle {
    font-size: 0.88rem;
    color: var(--text-dim, #8b7aa3);
    margin: 0 0 1.1rem;
}

/* Video — full column width, perfect 16:9 */
.llp-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(217,70,239,0.15);
    margin-bottom: 1.1rem;
}
.llp-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Description below video */
.llp-desc-area {
    width: 100%;
    background: rgba(20,8,36,0.7);
    border: 1px solid rgba(217,70,239,0.13);
    border-radius: 12px;
    padding: 0.95rem 1.3rem;
}
.llp-desc-text {
    font-size: 0.87rem;
    color: var(--text-dim, #8b7aa3);
    line-height: 1.6;
    margin: 0;
}

/* ── Right: playlist column ──────────────────────────────────── */
.llp-playlist-col {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Push playlist down to align with video top edge (below meta+title+subtitle) */
    padding-top: 6.3rem;
}

.llp-playlist-panel {
    background: rgba(14, 5, 28, 0.9);
    border: 1px solid rgba(217,70,239,0.2);
    border-radius: 14px;
    overflow: hidden;
    width: 100%;           /* fill the 320px column exactly */
    flex: 1;               /* stretch to full column height */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.llp-playlist-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid rgba(217,70,239,0.13);
    background: rgba(217,70,239,0.07);
    flex-shrink: 0;
}
.llp-playlist-icon { font-size: 1rem; }
.llp-playlist-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f0e7ff;
    letter-spacing: 0.02em;
}

/* Scrollable rows */
.llp-playlist-items {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(217,70,239,0.3) transparent;
}
.llp-playlist-items::-webkit-scrollbar { width: 4px; }
.llp-playlist-items::-webkit-scrollbar-track { background: transparent; }
.llp-playlist-items::-webkit-scrollbar-thumb { background: rgba(217,70,239,0.35); border-radius: 99px; }

/* Single row */
.llp-pl-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.18s;
    min-height: 44px;
}
.llp-pl-item:last-child { border-bottom: none; }
.llp-pl-item:hover { background: rgba(217,70,239,0.09); }
.llp-pl-item.active {
    background: rgba(217,70,239,0.15);
    border-left: 3px solid #d946ef;
    padding-left: calc(0.9rem - 3px);
}

/* Thumbnail */
.llp-pl-thumb {
    position: relative;
    width: 78px;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    border-radius: 7px;
    overflow: hidden;
    background: #0a0514;
}
.llp-pl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.llp-pl-now-badge {
    position: absolute;
    inset: 0;
    background: rgba(217,70,239,0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

/* Text */
.llp-pl-info { flex: 1; min-width: 0; }
.llp-pl-num {
    font-size: 0.64rem;
    color: #a855f7;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
}
.llp-pl-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f0e7ff;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}
.llp-pl-item.active .llp-pl-name { color: #e879f9; }

.llp-pl-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.llp-pl-dur { font-size: 0.68rem; color: var(--text-dim, #8b7aa3); }
.llp-pl-badge {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.09rem 0.4rem;
    border-radius: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.llp-pl-badge.easy { background: rgba(74,222,128,0.14); color: #4ade80; border: 1px solid rgba(74,222,128,0.28); }
.llp-pl-badge.mid  { background: rgba(251,191,36,0.14); color: #fbbf24; border: 1px solid rgba(251,191,36,0.28); }
.llp-pl-badge.hard { background: rgba(239,68,68,0.14);  color: #f87171; border: 1px solid rgba(239,68,68,0.28); }
.llp-pl-badge.now  { background: linear-gradient(135deg,#d946ef,#a855f7); color:#fff; border:none; }

/* ── Responsive ──────────────────────────────────────────────── */

/* Tablet: stack columns, playlist scrolls in-place */
@media (max-width: 900px) {
    .llp-watch-layout {
        grid-template-columns: 1fr;
    }
    .llp-playlist-col {
        padding-top: 0; /* stacked layout — no offset needed */
    }
    .llp-playlist-panel {
        max-height: 420px;
    }
}

/* Mobile: tighten spacing */
@media (max-width: 640px) {
    .llp-topbar { padding: 0 1rem; }
    .llp-topbar-brand { display: none; }         /* hide brand on tiny screens */
    .llp-topbar-course { font-size: 0.8rem; }
    .llp-container { padding: 1rem 0.9rem 5rem; }
    .llp-title { font-size: 1.3rem; }
    .llp-video-wrap { border-radius: 10px; }
    .llp-desc-area, .llp-playlist-panel { border-radius: 10px; }
    .llp-playlist-panel { max-height: 340px; }
    .llp-pl-thumb { width: 68px; }
}

/* ══════════════════════════════════════════════════════
   Mobile Back Buttons — lesson player + course page
   Only visible on mobile (desktop uses OS back or sidebar nav)
   ══════════════════════════════════════════════════════ */
.llp-back-btn,
.lcp-back-btn {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    .llp-back-btn {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        background: none;
        border: none;
        color: rgba(217, 70, 239, 0.85);
        font-family: 'Outfit', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        padding: 0.3rem 0.6rem;
        border-radius: 6px;
        flex-shrink: 0;
        white-space: nowrap;
        transition: color 0.2s;
    }
    .llp-back-btn:hover { color: var(--primary, #d946ef); }

    .lcp-back-btn {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        background: rgba(217, 70, 239, 0.08);
        border: 1px solid rgba(217, 70, 239, 0.22);
        color: rgba(217, 70, 239, 0.85);
        font-family: 'Outfit', sans-serif;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
        padding: 0.45rem 1rem;
        border-radius: 20px;
        margin-bottom: 1rem;
        transition: all 0.2s;
    }
    .lcp-back-btn:hover {
        background: rgba(217, 70, 239, 0.15);
        color: var(--primary, #d946ef);
    }
}

/* ══════════════════════════════════════════
   Mobile drag handle at top of ls-detail-modal
   Gives visual cue that swipe-down closes modal
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    .ls-detail-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(217, 70, 239, 0.3);
        border-radius: 2px;
        margin: 0 auto 0.8rem;
    }
}

/* ================================================================
   Learning Hub — Sequential Lesson Unlock System  v1
   New states: locked, completed, complete button, playlist badges
   ================================================================ */

/* ── Locked lesson card ──────────────────────────────────────── */
.lcp-lesson-card--locked {
    opacity: 0.6;
    cursor: default;
}
.lcp-lesson-card--locked:hover {
    transform: none;
    border-color: rgba(217,70,239,0.15);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    cursor: not-allowed;
}
.lcp-lesson-card--locked .lcp-start-here--locked {
    background: rgba(100,100,120,0.25);
    color: rgba(200,200,220,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Lock overlay on thumbnail */
.lcp-thumb-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
}
.lcp-thumb-lock-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

/* Locked button state */
.lcp-start-btn--locked {
    background: rgba(80,80,100,0.2);
    border-color: rgba(150,150,170,0.3);
    color: rgba(180,180,200,0.55);
    cursor: not-allowed;
    opacity: 0.7;
}
.lcp-start-btn--locked:hover {
    background: rgba(80,80,100,0.2);
    color: rgba(180,180,200,0.55);
    box-shadow: none;
    transform: none;
}

/* Lock note below lesson title */
.lcp-locked-note {
    font-size: 0.75rem;
    color: rgba(180,180,200,0.55);
    margin-bottom: 0.5rem;
    font-style: italic;
}

/* ── Completed lesson card ───────────────────────────────────── */
.lcp-lesson-card--completed {
    border-color: rgba(74,222,128,0.4);
    box-shadow: 0 0 0 1px rgba(74,222,128,0.15), 0 6px 20px rgba(0,0,0,0.35);
}
.lcp-lesson-card--completed:hover {
    border-color: rgba(74,222,128,0.7);
    box-shadow: 0 12px 36px rgba(74,222,128,0.3);
}
.lcp-start-here--done {
    background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(16,185,129,0.2));
    color: #4ade80;
    border-bottom: 1px solid rgba(74,222,128,0.2);
}

/* Green checkmark overlay on completed thumbnails */
.lcp-thumb-done-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16,185,129,0.3);
}
.lcp-thumb-done-icon {
    width: 52px;
    height: 52px;
    background: rgba(16,185,129,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    box-shadow: 0 4px 20px rgba(16,185,129,0.6);
}

/* Completed button state */
.lcp-start-btn--done {
    background: rgba(74,222,128,0.12);
    border-color: rgba(74,222,128,0.4);
    color: #4ade80;
}
.lcp-start-btn--done:hover {
    background: rgba(74,222,128,0.22);
    color: #4ade80;
    box-shadow: 0 4px 14px rgba(74,222,128,0.3);
}

/* ── Skeleton loading shimmer for lesson cards ───────────────── */
.lcp-lesson-card--skeleton {
    pointer-events: none;
    animation: lcp-shimmer 1.4s ease-in-out infinite;
}
.lcp-skeleton-thumb {
    background: rgba(217,70,239,0.07);
    padding-top: 56.25%;
    width: 100%;
}
.lcp-skeleton-line {
    background: rgba(217,70,239,0.08);
    border-radius: 4px;
    animation: lcp-shimmer 1.4s ease-in-out infinite;
}
@keyframes lcp-shimmer {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}

/* ── Locked toast animation ──────────────────────────────────── */
@keyframes lcp-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* ── Mark Complete button in lesson player ───────────────────── */
.llp-complete-area {
    margin-top: 1.1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.3rem;
    background: rgba(20,8,36,0.7);
    border: 1px solid rgba(217,70,239,0.15);
    border-radius: 12px;
}

.llp-complete-btn {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    color: #fff;
    border: none;
    padding: 0.65rem 1.6rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s;
    box-shadow: 0 4px 18px rgba(217,70,239,0.4);
    flex-shrink: 0;
}
.llp-complete-btn:hover:not(:disabled) {
    box-shadow: 0 6px 28px rgba(217,70,239,0.65);
    transform: scale(1.03);
}
.llp-complete-btn:disabled {
    cursor: default;
    opacity: 0.8;
}

.llp-complete-btn--done {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 18px rgba(16,185,129,0.4);
}
.llp-complete-btn--done:hover {
    box-shadow: 0 4px 18px rgba(16,185,129,0.4) !important;
    transform: none !important;
}

.llp-complete-note {
    font-size: 0.82rem;
    color: var(--text-dim, #8b7aa3);
    margin: 0;
    line-height: 1.45;
}

/* ── Playlist: completed / locked item states ────────────────── */
.llp-pl-item.done {
    background: rgba(16,185,129,0.06);
}
.llp-pl-item.done:hover {
    background: rgba(16,185,129,0.12);
}
.llp-pl-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.llp-pl-item.locked:hover {
    background: transparent;
}

/* Playlist done/lock badges on thumbnail */
.llp-pl-done-badge,
.llp-pl-lock-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-radius: 7px;
}
.llp-pl-done-badge {
    background: rgba(16,185,129,0.55);
    color: #fff;
    font-weight: 700;
}
.llp-pl-lock-badge {
    background: rgba(0,0,0,0.45);
}

/* Playlist done badge pill */
.llp-pl-badge.done {
    background: rgba(16,185,129,0.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,0.3);
}

/* ================================================================
   Learning Hub — Auth Gate  v1
   Full-width overlay over course cards for guests.
   Cards are blurred underneath (preview effect).
   ================================================================ */

/* Wrapper that holds both the cards grid and the gate overlay */
.lhub-content-wrap {
    position: relative;
}

/* When gate is showing — blur the cards behind it */
.lhub-content-wrap:has(#lhubLoginGate[style*="flex"]) .learning-grid {
    filter: blur(6px) brightness(0.45);
    pointer-events: none;
    user-select: none;
}

/* Gate overlay */
.lhub-gate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 2rem 1rem;
    /* Subtle gradient from transparent to dark so blur context merges nicely */
    background: radial-gradient(ellipse at 50% 40%, rgba(15,6,30,0.82) 0%, rgba(8,3,18,0.72) 100%);
}

/* Gate card box */
.lhub-gate-box {
    background: linear-gradient(135deg, rgba(26,12,52,0.97), rgba(14,6,28,0.97));
    border: 1.5px solid rgba(217,70,239,0.45);
    border-radius: 24px;
    padding: 2.8rem 2.4rem 2.4rem;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(217,70,239,0.12),
        0 30px 80px rgba(0,0,0,0.7),
        0 0 60px rgba(168,85,247,0.2);
    backdrop-filter: blur(20px);
    animation: lhub-gate-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes lhub-gate-in {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

/* Big emoji icon */
.lhub-gate-icon {
    font-size: 3.6rem;
    margin-bottom: 0.8rem;
    display: block;
    filter: drop-shadow(0 0 24px rgba(217,70,239,0.7));
    animation: lhub-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes lhub-icon-pulse {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(217,70,239,0.6)); }
    50%       { filter: drop-shadow(0 0 36px rgba(217,70,239,0.95)); }
}

/* Title */
.lhub-gate-title {
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f0e7ff, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.7rem;
    line-height: 1.25;
}

/* Description */
.lhub-gate-desc {
    font-size: 0.9rem;
    color: rgba(200,185,240,0.8);
    line-height: 1.6;
    margin: 0 0 1.4rem;
    font-family: 'Outfit', sans-serif;
}

/* Perks row */
.lhub-gate-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    justify-content: center;
    margin-bottom: 1.8rem;
}
.lhub-gate-perks span {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(168,85,247,0.9);
    background: rgba(168,85,247,0.1);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
}

/* CTA button */
.lhub-gate-btn {
    width: 100%;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    color: #fff;
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: all 0.25s;
    box-shadow: 0 6px 28px rgba(217,70,239,0.45);
    letter-spacing: 0.01em;
    margin-bottom: 1.1rem;
}
.lhub-gate-btn:hover {
    box-shadow: 0 8px 40px rgba(217,70,239,0.7);
    transform: translateY(-2px) scale(1.01);
}
.lhub-gate-btn:active {
    transform: translateY(0) scale(0.99);
}

/* Footer note */
.lhub-gate-footer {
    font-size: 0.8rem;
    color: rgba(160,140,200,0.65);
    margin: 0;
    font-family: 'Outfit', sans-serif;
}
.lhub-gate-link {
    color: rgba(217,70,239,0.85);
    text-decoration: underline;
    text-decoration-color: rgba(217,70,239,0.4);
    cursor: pointer;
    font-weight: 600;
    transition: color 0.2s;
}
.lhub-gate-link:hover {
    color: #d946ef;
    text-decoration-color: #d946ef;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .lhub-gate-box {
        padding: 2rem 1.4rem 1.8rem;
    }
    .lhub-gate-title  { font-size: 1.35rem; }
    .lhub-gate-icon   { font-size: 2.8rem; }
    .lhub-gate-perks  { gap: 0.4rem 0.6rem; }
}

/* ── Phase-2: Locked Song Cards ──────────────────────────────────── */
.ls-card--locked {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.6);
}
.ls-thumb-wrap--locked {
    background: rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-radius: 10px 10px 0 0;
}
.ls-locked-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.4rem;
}
.ls-lock-icon {
    font-size: 2rem;
    opacity: 0.7;
}
.ls-locked-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ls-card-title--locked {
    color: rgba(255,255,255,0.4);
    font-style: italic;
}
/* ============================================================
   lessonResume.css — Continue Learning (Lesson) Card Styles
   Matches the visual language of cm-challenge-card / dcCard.
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
#clLessonContainer {
    display: none; /* shown by JS */
    margin-bottom: 1.2rem;
}

/* ── Skeleton loader ───────────────────────────────────────── */
.clr-skeleton {
    height: 88px;
    border-radius: 18px;
    background: linear-gradient(90deg,
        rgba(168,85,247,0.08) 25%,
        rgba(168,85,247,0.16) 50%,
        rgba(168,85,247,0.08) 75%);
    background-size: 200% 100%;
    animation: clr-shimmer 1.4s ease infinite;
}

@keyframes clr-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Base card ─────────────────────────────────────────────── */
.clr-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: 18px;
    border: 1.5px solid rgba(168, 85, 247, 0.35);
    background: linear-gradient(135deg,
        rgba(30, 10, 60, 0.96) 0%,
        rgba(20, 5, 45, 0.97) 60%,
        rgba(28, 8, 55, 0.96) 100%);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.1),
        0 6px 32px rgba(168, 85, 247, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    animation: clr-enter 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.clr-card:hover {
    border-color: rgba(217, 70, 239, 0.55);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.18),
        0 10px 42px rgba(168, 85, 247, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

@keyframes clr-enter {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* decorative glow orb */
.clr-glow {
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Resume variant — slightly brighter accent ─────────────── */
.clr-card--resume {
    border-color: rgba(168, 85, 247, 0.45);
}

/* ── Completed variant — teal accent ──────────────────────── */
.clr-card--done {
    border-color: rgba(52, 211, 153, 0.35);
}
.clr-card--done .clr-glow {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.12) 0%, transparent 70%);
}
.clr-card--done .clr-btn--start {
    background: linear-gradient(135deg, #059669, #10b981);
}

/* ── Start variant ─────────────────────────────────────────── */
.clr-card--start {
    border-color: rgba(99, 102, 241, 0.35);
}
.clr-card--start .clr-glow {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 70%);
}

/* ── Icon ──────────────────────────────────────────────────── */
.clr-icon-wrap {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.25);
}

/* ── Text body ─────────────────────────────────────────────── */
.clr-body {
    flex: 1;
    min-width: 0;
}

.clr-label {
    font-size: 0.65rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(168, 85, 247, 0.85);
    margin: 0 0 0.15rem;
}

.clr-course {
    font-size: 0.7rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: rgba(196, 181, 253, 0.65);
    margin: 0 0 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clr-title {
    font-size: 0.92rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: #f0e7ff;
    margin: 0 0 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clr-sub {
    font-size: 0.72rem;
    font-family: 'Outfit', sans-serif;
    color: rgba(196, 181, 212, 0.6);
    margin: 0;
}

.clr-meta {
    font-size: 0.7rem;
    font-family: 'Outfit', sans-serif;
    color: rgba(196, 181, 212, 0.55);
    margin: 0;
}

/* ── Button ────────────────────────────────────────────────── */
.clr-btn {
    flex-shrink: 0;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    border: none;
    font-size: 0.8rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}
.clr-btn:hover  { opacity: 0.88; transform: scale(1.03); }
.clr-btn:active { transform: scale(0.97); }

.clr-btn--resume {
    background: linear-gradient(135deg, #a855f7, #d946ef);
    color: #fff;
}

.clr-btn--start {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
}

/* ── Light theme overrides ─────────────────────────────────── */
[data-theme="light"] .clr-card {
    background: linear-gradient(135deg,
        rgba(245, 238, 255, 0.97) 0%,
        rgba(237, 224, 255, 0.98) 100%);
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.1),
        0 6px 24px rgba(168, 85, 247, 0.12);
}
[data-theme="light"] .clr-title { color: #1a0535; }
[data-theme="light"] .clr-course { color: rgba(90, 50, 140, 0.75); }
[data-theme="light"] .clr-sub,
[data-theme="light"] .clr-meta  { color: rgba(90, 50, 140, 0.55); }
[data-theme="light"] .clr-label { color: #7c3aed; }
[data-theme="light"] .clr-icon-wrap { background: rgba(168, 85, 247, 0.1); }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .clr-card {
        flex-wrap: wrap;
        padding: 1rem 1.1rem;
        gap: 0.75rem;
    }
    .clr-btn {
        width: 100%;
        text-align: center;
        padding: 0.6rem 1rem;
    }
    .clr-title { font-size: 0.85rem; }
}
/* ================================================================
   skillTree.css — Duolingo-style Skill Tree
   ChordStar Music Learning Portal

   All classes prefixed st- to avoid conflicts.
   Matches the app's dark theme: Space Grotesk / Outfit fonts,
   rgba purple/dark palette, glassmorphism cards.
   ================================================================ */

/* ── View Toggle ─────────────────────────────────────────────── */
.st-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px;
    padding: 0.25rem;
    width: fit-content;
}

.st-toggle-btn {
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    border: none;
    background: transparent;
    color: rgba(196,181,212,0.55);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.st-toggle-btn:hover {
    color: rgba(196,181,212,0.9);
}

.st-toggle-btn--active {
    background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(217,70,239,0.2));
    color: #e879f9;
    box-shadow: 0 2px 12px rgba(168,85,247,0.25);
}

/* ── Skill Tree Container ─────────────────────────────────────── */
#skillTreeContainer {
    padding-bottom: 2rem;
}

/* ── Loading state ───────────────────────────────────────────── */
.st-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
}

.st-loading-bar {
    width: 120px;
    height: 4px;
    background: rgba(168,85,247,0.15);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.st-loading-bar::after {
    content: '';
    position: absolute;
    left: -40%;
    top: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #a855f7, transparent);
    animation: st-shimmer 1.2s ease infinite;
}

@keyframes st-shimmer {
    from { left: -40%; }
    to   { left: 100%; }
}

.st-loading-txt {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    color: rgba(196,181,212,0.4);
}

/* ── Guest prompt ────────────────────────────────────────────── */
.st-guest-prompt {
    text-align: center;
    padding: 3rem 1rem;
    max-width: 380px;
    margin: 0 auto;
}

.st-guest-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 16px rgba(168,85,247,0.4));
}

.st-guest-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0 0 0.6rem;
}

.st-guest-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    color: rgba(196,181,212,0.6);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.st-guest-btn {
    padding: 0.75rem 1.75rem;
    background: linear-gradient(135deg, #d946ef, #a855f7);
    border: none;
    border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(217,70,239,0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.st-guest-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(217,70,239,0.55);
}

/* ── Header ──────────────────────────────────────────────────── */
.st-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.2rem 1.4rem;
    background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(217,70,239,0.06));
    border: 1px solid rgba(168,85,247,0.18);
    border-radius: 16px;
    flex-wrap: wrap;
}

.st-header-text {}

.st-header-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0 0 0.2rem;
}

.st-header-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: rgba(196,181,212,0.55);
    margin: 0;
}

.st-header-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.st-overall-bar {
    width: 120px;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.st-overall-fill {
    height: 100%;
    background: linear-gradient(90deg, #d946ef, #a855f7);
    border-radius: 8px;
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

.st-overall-pct {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(168,85,247,0.8);
    min-width: 32px;
}

/* ── Path container ──────────────────────────────────────────── */
.st-path {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 680px;
    margin: 0 auto;
}

/* ── Skill node ──────────────────────────────────────────────── */
.st-node {
    position: relative;
    animation: st-node-enter 0.4s cubic-bezier(0.34,1.4,0.64,1) both;
}

@keyframes st-node-enter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Stagger animation per node */
.st-node:nth-child(1)  { animation-delay: 0.00s; }
.st-node:nth-child(2)  { animation-delay: 0.05s; }
.st-node:nth-child(3)  { animation-delay: 0.10s; }
.st-node:nth-child(4)  { animation-delay: 0.15s; }
.st-node:nth-child(5)  { animation-delay: 0.20s; }
.st-node:nth-child(6)  { animation-delay: 0.25s; }
.st-node:nth-child(7)  { animation-delay: 0.30s; }
.st-node:nth-child(8)  { animation-delay: 0.35s; }
.st-node:nth-child(9)  { animation-delay: 0.40s; }
.st-node:nth-child(10) { animation-delay: 0.45s; }
.st-node:nth-child(11) { animation-delay: 0.50s; }
.st-node:nth-child(12) { animation-delay: 0.55s; }
.st-node:nth-child(13) { animation-delay: 0.60s; }
.st-node:nth-child(14) { animation-delay: 0.65s; }

/* ── Connector line ──────────────────────────────────────────── */
.st-connector {
    width: 3px;
    height: 32px;
    background: rgba(255,255,255,0.08);
    margin: 0 0 0 28px;         /* align with circle center */
    border-radius: 3px;
}

.st-connector--done {
    background: linear-gradient(180deg, rgba(34,197,94,0.6), rgba(34,197,94,0.25));
}

/* ── Node row (circle + card) ────────────────────────────────── */
.st-node-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* ── Circle indicator ────────────────────────────────────────── */
.st-node-circle {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.st-node-circle--done {
    background: radial-gradient(circle, rgba(34,197,94,0.25), rgba(16,185,129,0.15));
    border: 2.5px solid rgba(34,197,94,0.6);
    box-shadow: 0 0 20px rgba(34,197,94,0.2);
}

.st-node-circle--active {
    background: radial-gradient(circle, rgba(var(--skill-accent-rgb, 168,85,247),0.25), rgba(var(--skill-accent-rgb, 168,85,247),0.1));
    border: 2.5px solid var(--skill-accent, #a855f7);
    box-shadow: 0 0 24px rgba(168,85,247,0.3);
    animation: st-pulse 2.5s ease-in-out infinite;
}

@keyframes st-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(168,85,247,0.25); }
    50%       { box-shadow: 0 0 32px rgba(168,85,247,0.5); }
}

.st-node-circle--locked {
    background: rgba(255,255,255,0.04);
    border: 2px solid rgba(255,255,255,0.1);
}

.st-node-circle:hover {
    transform: scale(1.06);
}

.st-node-icon-inner {
    font-size: 1.5rem;
    line-height: 1;
}

.st-node-icon-inner--done {
    font-size: 1.4rem;
    color: #4ade80;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
}

.st-node-icon-inner--locked {
    font-size: 1.1rem;
    opacity: 0.4;
    filter: grayscale(1);
}

/* ── Skill card ──────────────────────────────────────────────── */
.st-card {
    flex: 1;
    min-width: 0;
    border-radius: 16px;
    padding: 1rem 1.2rem;
    margin-bottom: 0;          /* gap handled by connector */
    transition: border-color 0.25s, box-shadow 0.25s;
}

.st-card--active {
    background: linear-gradient(135deg, rgba(20,8,40,0.97), rgba(14,4,30,0.98));
    border: 1.5px solid var(--skill-accent, #a855f7);
    box-shadow:
        0 0 0 1px rgba(168,85,247,0.08),
        0 6px 28px rgba(168,85,247,0.14);
}

.st-card--active:hover {
    box-shadow:
        0 0 0 1px rgba(168,85,247,0.15),
        0 10px 38px rgba(168,85,247,0.22);
}

.st-card--done {
    background: linear-gradient(135deg, rgba(6,20,14,0.97), rgba(4,14,10,0.98));
    border: 1.5px solid rgba(34,197,94,0.35);
    box-shadow: 0 4px 18px rgba(34,197,94,0.1);
}

.st-card--locked {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    opacity: 0.65;
}

/* ── Card header ─────────────────────────────────────────────── */
.st-card-header { margin-bottom: 0.7rem; }

.st-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.st-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    color: #f0e7ff;
    margin: 0;
    line-height: 1.3;
}

.st-card--locked .st-card-title {
    color: rgba(196,181,212,0.4);
}

.st-card-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: rgba(196,181,212,0.5);
    margin: 0;
    line-height: 1.5;
}

/* ── State badge ─────────────────────────────────────────────── */
.st-state-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 50px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.st-state-badge--done {
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.4);
    color: #4ade80;
}

.st-state-badge--active {
    background: rgba(168,85,247,0.18);
    border: 1px solid rgba(168,85,247,0.4);
    color: #d8b4fe;
}

.st-state-badge--locked {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(196,181,212,0.35);
}

/* ── Progress bar ────────────────────────────────────────────── */
.st-progress-track {
    height: 5px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.st-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #d946ef, #a855f7);
    border-radius: 4px;
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}

.st-progress-fill--done {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.st-progress-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    color: rgba(196,181,212,0.4);
    margin-bottom: 0.65rem;
}

/* ── Lesson tags ─────────────────────────────────────────────── */
.st-lessons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.st-lesson-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    color: rgba(196,181,212,0.55);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 0.18rem 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.st-lesson-tag--done {
    color: #4ade80;
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.25);
}

.st-lesson-tag--more {
    color: rgba(168,85,247,0.7);
    background: rgba(168,85,247,0.08);
    border-color: rgba(168,85,247,0.2);
}

/* ── Action button ───────────────────────────────────────────── */
.st-card-footer { display: flex; }

.st-action-btn {
    padding: 0.55rem 1.2rem;
    border-radius: 50px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
    border: none;
    letter-spacing: 0.15px;
}

.st-action-btn--start {
    background: linear-gradient(135deg, #d946ef, #a855f7);
    color: #fff;
    box-shadow: 0 4px 16px rgba(217,70,239,0.38);
}

.st-action-btn--start:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 24px rgba(217,70,239,0.52);
}

.st-action-btn--review {
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.35);
    color: #4ade80;
}

.st-action-btn--review:hover {
    background: rgba(34,197,94,0.2);
    transform: translateY(-1px);
}

.st-action-btn--locked {
    background: rgba(255,255,255,0.05);
    color: rgba(196,181,212,0.25);
    cursor: not-allowed;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ── Light theme overrides ───────────────────────────────────── */
[data-theme="light"] .st-toggle-btn {
    color: rgba(60,40,90,0.5);
}
[data-theme="light"] .st-toggle-btn--active {
    color: #9333ea;
    background: rgba(168,85,247,0.12);
}
[data-theme="light"] .st-card--active {
    background: linear-gradient(135deg, rgba(250,245,255,0.98), rgba(245,240,255,0.97));
    border-color: var(--skill-accent, #a855f7);
}
[data-theme="light"] .st-card--done {
    background: linear-gradient(135deg, rgba(240,253,244,0.98), rgba(220,252,231,0.97));
    border-color: rgba(34,197,94,0.4);
}
[data-theme="light"] .st-card--locked {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .st-card-title { color: #1e0a3a; }
[data-theme="light"] .st-card--locked .st-card-title { color: rgba(60,40,90,0.3); }
[data-theme="light"] .st-card-desc { color: rgba(60,40,90,0.5); }
[data-theme="light"] .st-header {
    background: rgba(168,85,247,0.06);
    border-color: rgba(168,85,247,0.15);
}
[data-theme="light"] .st-header-title { color: #1e0a3a; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .st-view-toggle { width: 100%; justify-content: center; }
    .st-toggle-btn  { flex: 1; text-align: center; font-size: 0.78rem; padding: 0.45rem 0.75rem; }

    .st-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1rem; }
    .st-header-stats { width: 100%; }
    .st-overall-bar  { flex: 1; }

    .st-node-circle { width: 48px; height: 48px; }
    .st-node-icon-inner { font-size: 1.2rem; }
    .st-connector { margin-left: 22px; }

    .st-card { padding: 0.85rem 1rem; border-radius: 12px; }
    .st-card-title { font-size: 0.9rem; }
    .st-card-title-row { flex-wrap: nowrap; }
    .st-state-badge { font-size: 0.58rem; }

    .st-lesson-tag { max-width: 140px; }

    .st-action-btn { font-size: 0.78rem; padding: 0.5rem 1rem; }
}
/* ================================================================
   gomi.css — Gomi AI Robot Assistant for ChordStar
   v3.0 — PNG image robot. Cyan/teal theme. Full state animations.
   ================================================================ */

/* === CONTAINER === */
.gomi-container {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .gomi-container { right: 12px; bottom: 110px; align-items: flex-end; }
}

/* === ROBOT BUTTON === */
.gomi-robot-btn {
  pointer-events: all;
  width: 100px;
  height: 150px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  padding: 0;
}
.gomi-robot-btn:hover  { transform: scale(1.07) translateY(-4px); }
.gomi-robot-btn:active { transform: scale(0.96); }

/* === ANIMATION WRAPPER === */
.gomi-anim-wrap {
  width: 100px;
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* === LOTTIE CONTAINER === */
.gomi-lottie-el {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 4;
}

/* State-driven CSS drop-shadow on the Lottie SVG output */
.gomi-anim-wrap.gomi--sleeping .gomi-lottie-el {
  animation: gomiFloat 4s ease-in-out infinite;
  filter:
    drop-shadow(0 0 4px rgba(0,180,220,0.3))
    drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
@keyframes gomiFloat {
  0%,100% { transform: translateY(0)    rotate(0deg); }
  38%      { transform: translateY(-8px) rotate(-0.7deg); }
  72%      { transform: translateY(3px)  rotate(0.4deg); }
}

.gomi-anim-wrap.gomi--listening .gomi-lottie-el {
  /* Lottie drives the float internally; CSS adds outer glow */
  filter:
    drop-shadow(0 0 10px rgba(0,220,255,0.75))
    drop-shadow(0 0 22px rgba(0,170,230,0.4))
    drop-shadow(0 5px 12px rgba(0,0,0,0.35));
}

.gomi-anim-wrap.gomi--speaking .gomi-lottie-el {
  filter:
    drop-shadow(0 0 14px rgba(0,230,255,0.95))
    drop-shadow(0 0 30px rgba(0,175,240,0.55))
    drop-shadow(0 5px 14px rgba(0,0,0,0.4));
  animation: gomiSpeakGlow 0.42s ease-in-out infinite alternate;
}
@keyframes gomiSpeakGlow {
  from { filter: drop-shadow(0 0 10px rgba(0,210,255,0.8)) drop-shadow(0 5px 12px rgba(0,0,0,0.4)); }
  to   { filter: drop-shadow(0 0 18px rgba(0,240,255,1))   drop-shadow(0 0 35px rgba(0,185,245,0.6)) drop-shadow(0 5px 14px rgba(0,0,0,0.4)); }
}

/* === STATE RING === */
.gomi-state-ring {
  position:absolute; inset:-8px; border-radius:50%;
  border:2px solid transparent; pointer-events:none;
  opacity:0; transition:border-color 0.3s, opacity 0.3s;
}
.gomi-robot-btn.gomi--listening .gomi-state-ring {
  border-color:rgba(0,210,255,0.65); opacity:1;
  animation:gomiStateRing 1.2s ease-in-out infinite;
}
.gomi-robot-btn.gomi--speaking .gomi-state-ring {
  border-color:rgba(0,230,255,0.88); opacity:1;
  animation:gomiStateRing 0.45s ease-in-out infinite alternate;
}
@keyframes gomiStateRing {
  0%,100% { transform:scale(1);    opacity:0.6; }
  50%      { transform:scale(1.08); opacity:1; }
}

/* === ZZZ BADGE === */
.gomi-zzz-badge {
  position:absolute; top:6px; right:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:0.68rem; font-weight:700;
  color:rgba(0,200,255,0.75); pointer-events:none;
  animation:gomiZzz 3.2s ease-in-out infinite;
  letter-spacing:0.02em; z-index:6;
}
@keyframes gomiZzz {
  0%   { opacity:0; transform:translate(0,0); }
  22%  { opacity:1; }
  80%  { opacity:0.4; }
  100% { opacity:0; transform:translate(5px,-10px); }
}
.gomi-robot-btn.gomi--listening .gomi-zzz-badge,
.gomi-robot-btn.gomi--speaking  .gomi-zzz-badge { display:none; }

/* === TOOLTIP === */
.gomi-tooltip {
  position:absolute; bottom:calc(100% + 10px); right:0;
  background:rgba(6,14,28,0.96); border:1px solid rgba(0,200,255,0.38);
  border-radius:8px; padding:5px 11px;
  font-family:'Outfit',sans-serif; font-size:0.72rem;
  color:rgba(180,235,255,0.9); white-space:nowrap;
  pointer-events:none; opacity:0; transform:translateY(5px);
  transition:opacity 0.2s,transform 0.2s;
  box-shadow:0 4px 14px rgba(0,0,0,0.5); z-index:10;
}
.gomi-robot-btn:hover .gomi-tooltip { opacity:1; transform:translateY(0); }

/* === SPEECH BUBBLE === */
.gomi-bubble {
  pointer-events:all;
  background:linear-gradient(145deg,rgba(6,14,28,0.98) 0%,rgba(4,10,20,0.98) 100%);
  border:1.5px solid rgba(0,200,255,0.42);
  border-radius:18px; padding:14px 16px 12px;
  max-width:295px; min-width:235px;
  box-shadow:
    0 0 0 1px rgba(0,200,255,0.07),
    0 0 18px rgba(0,180,255,0.17),
    0 10px 36px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(0,200,255,0.1);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:
    opacity 0.28s cubic-bezier(0.34,1.56,0.64,1),
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin:bottom right; position:relative;
}
.gomi-bubble::after {
  content:''; position:absolute; bottom:-9px; right:24px;
  width:18px; height:10px; background:rgba(4,10,20,0.98);
  border-right:1.5px solid rgba(0,200,255,0.42);
  border-bottom:1.5px solid rgba(0,200,255,0.42);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
@media (max-width:768px) { .gomi-bubble { max-width:280px; min-width:240px; } }
.gomi-bubble--hidden {
  opacity:0; transform:scale(0.8) translateY(12px); pointer-events:none;
}
.gomi-bubble--visible { opacity:1; transform:scale(1) translateY(0); }

.gomi-bubble-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.gomi-name-badge {
  display:flex; align-items:center; gap:5px;
  font-family:'Space Grotesk',sans-serif; font-size:0.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:0.12em;
  background:linear-gradient(90deg,#00d4ff,#00a8e8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gomi-name-dot {
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  -webkit-text-fill-color:unset; background-clip:unset; -webkit-background-clip:unset;
}
.gomi-name-dot.dot--idle   { background:rgba(180,235,255,0.3); }
.gomi-name-dot.dot--listen { background:#00d4ff; animation:gomiDotBlink 0.85s ease-in-out infinite; }
.gomi-name-dot.dot--speak  { background:#00e5ff; animation:gomiDotBlink 0.42s ease-in-out infinite; }
@keyframes gomiDotBlink { 0%,100%{opacity:1;} 50%{opacity:0.28;} }

.gomi-bubble-text {
  font-family:'Outfit',sans-serif; font-size:0.875rem; line-height:1.6;
  color:rgba(220,245,255,0.93); margin-bottom:10px; min-height:22px; word-wrap:break-word;
}
.gomi-bubble-footer {
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px;
}
.gomi-dots { display:none; align-items:center; gap:4px; }
.gomi-dots.active { display:flex; }
.gomi-dots span {
  width:7px; height:7px; border-radius:50%; background:#00d4ff;
  animation:gomiDotJump 1.1s ease-in-out infinite;
}
.gomi-dots span:nth-child(2) { animation-delay:0.18s; }
.gomi-dots span:nth-child(3) { animation-delay:0.36s; }
@keyframes gomiDotJump {
  0%,80%,100%{transform:translateY(0);opacity:0.5;}
  40%{transform:translateY(-6px);opacity:1;}
}
.gomi-waves { display:none; align-items:center; gap:3px; height:18px; }
.gomi-waves.active { display:flex; }
.gomi-waves span {
  display:block; width:3px; border-radius:2px; background:#00d4ff;
  animation:gomiWave 0.75s ease-in-out infinite alternate;
}
.gomi-waves span:nth-child(1){height:6px;animation-delay:0s;}
.gomi-waves span:nth-child(2){height:14px;animation-delay:0.1s;}
.gomi-waves span:nth-child(3){height:10px;animation-delay:0.2s;}
.gomi-waves span:nth-child(4){height:16px;animation-delay:0.05s;}
.gomi-waves span:nth-child(5){height:8px;animation-delay:0.15s;}
@keyframes gomiWave {
  from{transform:scaleY(0.5);opacity:0.6;}
  to{transform:scaleY(1.3);opacity:1;}
}
.gomi-mic-hint {
  font-family:'Outfit',sans-serif; font-size:0.7rem;
  color:rgba(180,235,255,0.45); letter-spacing:0.04em;
}
.gomi-close-btn {
  background:none; border:none; color:rgba(180,235,255,0.38);
  font-size:1.05rem; cursor:pointer; padding:2px 4px; line-height:1;
  transition:color 0.2s; border-radius:4px; flex-shrink:0; margin-left:auto;
}
.gomi-close-btn:hover { color:rgba(0,220,255,0.95); }

.gomi-bubble-text.is-typing::after {
  content:'|'; animation:gomiCaret 0.55s step-end infinite;
  color:rgba(0,210,255,0.9); margin-left:1px;
}
@keyframes gomiCaret { 0%,100%{opacity:1;} 50%{opacity:0;} }

[data-theme="light"] .gomi-bubble {
  background:linear-gradient(145deg,rgba(240,250,255,0.98) 0%,rgba(230,245,255,0.98) 100%);
}
[data-theme="light"] .gomi-bubble::after { background:rgba(240,250,255,0.98); }
[data-theme="light"] .gomi-bubble-text   { color:rgba(10,30,50,0.93); }
[data-theme="light"] .gomi-mic-hint      { color:rgba(0,120,180,0.55); }