/**
 * GDfm Live Stats - Frontend Styles
 * v1.4.3
 */

/* ═══ Page container ═══ */
.gdls-page {
    max-width: 720px !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* ═══ Hero metric cards ═══ */
.gdls-hero-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    justify-items: center !important;
}

.gdls-hero-card {
    background: var(--gd-bg-alt, #f7f7f7) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    text-align: center !important;
    width: 100% !important;
}

.gdls-hero-label {
    font-size: 11px !important;
    color: var(--gd-text-faint, #999) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
}

.gdls-hero-num {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--gd-text, #222) !important;
    line-height: 1.1 !important;
}

.gdls-hero-red {
    color: #d32f2f !important;
}

/* ═══ Jump nav ═══ */
.gdls-jump {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 32px !important;
}

.gdls-jump a {
    display: block !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gd-text-secondary, #555) !important;
    text-decoration: none !important;
    border: 1px solid var(--gd-border, #e8e8e8) !important;
    border-radius: 8px !important;
    line-height: 1.2 !important;
    transition: all 0.12s ease !important;
    background: var(--gd-surface, #fff) !important;
}

.gdls-jump a:hover {
    color: var(--gd-text, #222) !important;
    border-color: #ccc !important;
    background: var(--gd-surface-raised, #f5f5f5) !important;
}

/* ═══ Sections ═══ */
.gdls-sec {
    margin-bottom: 24px !important;
    background: var(--gd-surface, #fff) !important;
    border: 1px solid var(--gd-border, #e8e8e8) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
}

.gdls-sec-hdr {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    border-top: none !important;
    border-bottom: 2px solid #222 !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}

.gdls-sec-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--gd-text, #222) !important;
    line-height: 1.2 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

.gdls-sec-sub {
    font-size: 12px !important;
    color: var(--gd-text-faint, #999) !important;
    line-height: 1.2 !important;
    margin-left: auto !important;
    font-style: italic !important;
}

/* ═══ Rows ═══ */
.gdls-row {
    display: grid !important;
    gap: 4px 10px !important;
    padding: 10px 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    align-items: center !important;
    border-radius: 6px !important;
    transition: background 0.1s ease !important;
}

.gdls-row:hover {
    background: var(--gd-bg-alt, #f8f8f8) !important;
}

.gdls-row:last-child {
    border-bottom: none !important;
}

/* ═══ Featured #1 card ═══ */
.gdls-featured {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: var(--gd-bg-alt, #f7f7f7) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin-bottom: 8px !important;
}

.gdls-row-featured {
    background: var(--gd-bg-alt, #f7f7f7) !important;
    border-radius: 10px !important;
    padding: 14px 8px !important;
    margin-bottom: 8px !important;
}

.gdls-feat-rk {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 36px !important;
    color: var(--gd-link, #0383D9) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.gdls-feat-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.gdls-feat-plays {
    text-align: right !important;
    flex-shrink: 0 !important;
}

.gdls-feat-num {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--gd-text, #222) !important;
    line-height: 1.1 !important;
}

.gdls-feat-pct {
    font-size: 12px !important;
    color: var(--gd-text-faint, #999) !important;
    line-height: 1.2 !important;
}

.gdls-row-3col {
    grid-template-columns: 26px 1fr auto !important;
}

.gdls-cols-album {
    grid-template-columns: 26px 32% 55px 1fr !important;
}

.gdls-cols-songs {
    grid-template-columns: 26px 1fr 70px 80px !important;
}

.gdls-row-streak {
    grid-template-columns: 26px minmax(0, 140px) 1fr !important;
}

.gdls-row-once {
    grid-template-columns: 28px 1fr auto !important;
}

.gdls-once-date {
    font-size: 13px !important;
    color: var(--gd-text-secondary, #555) !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.gdls-once-ago {
    font-weight: 600 !important;
}

.gdls-ago-hot {
    color: #d32f2f !important;
}

.gdls-ago-warm {
    color: #e65100 !important;
}

.gdls-ago-recent {
    color: #2e7d32 !important;
}

/* ═══ Rank numbers ═══ */
.gdls-rk {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gd-text-faint, #aaa) !important;
    text-align: right !important;
    min-width: 22px !important;
    line-height: 1.2 !important;
}

/* ═══ Song name / meta ═══ */
.gdls-song {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gd-text, #222) !important;
    line-height: 1.2 !important;
}

.gdls-meta {
    font-size: 12px !important;
    color: var(--gd-text-muted, #888) !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
}

/* ═══ Numbers ═══ */
.gdls-num {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gd-text, #222) !important;
    text-align: right !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.gdls-num-sm {
    font-size: 12px !important;
    color: var(--gd-text-muted, #888) !important;
    text-align: right !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    min-width: 44px !important;
}

/* ═══ Column headers ═══ */
.gdls-col-hdr {
    display: grid !important;
    gap: 4px 10px !important;
    padding: 0 0 5px !important;
    border-bottom: 1px solid var(--gd-border-strong, #ccc) !important;
    margin-bottom: 2px !important;
    font-size: 11px !important;
    color: var(--gd-text-muted, #888) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
}

.gdls-col-r {
    text-align: right !important;
}

/* ═══ Album bars ═══ */
.gdls-album-plays {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gd-text, #222) !important;
    text-align: right !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.gdls-album-bar-wrap {
    display: flex !important;
    align-items: center !important;
}

.gdls-album-bar {
    height: 22px !important;
    border-radius: 3px !important;
}

/* ═══ Gap badges ═══ */
.gdls-gap-badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.gdls-gap-hot {
    color: #b71c1c !important;
    background: #ffebee !important;
}

.gdls-gap-warm {
    color: #e65100 !important;
    background: #fff3e0 !important;
}

.gdls-gap-med {
    color: #33691e !important;
    background: #f1f8e9 !important;
}

/* ═══ Context badges (one-play) ═══ */
.gdls-ctx-badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    color: #4527a0 !important;
    background: #ede7f6 !important;
}

/* ═══ Year select ═══ */
.gdls-ybust-controls {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.gdls-year-select {
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gd-text, #222) !important;
    border: 1px solid var(--gd-border-strong, #ccc) !important;
    border-radius: 4px !important;
    background: var(--gd-surface, #fff) !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
}

/* ═══ Streak bars ═══ */
.gdls-streak-name {
    min-width: 0 !important;
    overflow: hidden !important;
}

.gdls-streak-name .gdls-song {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

.gdls-streak-bar-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.gdls-streak-bar {
    flex: 1 !important;
    height: 5px !important;
    background: #eee !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.gdls-streak-fill {
    height: 100% !important;
    border-radius: 3px !important;
}

.gdls-streak-count {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gd-text, #222) !important;
    min-width: 32px !important;
    text-align: right !important;
    line-height: 1.2 !important;
}

/* ═══ Cover toggle ═══ */
.gdls-cover-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: var(--gd-text-muted, #888) !important;
    cursor: pointer !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
}

.gdls-cover-toggle input[type="checkbox"] {
    margin: 0 !important;
    cursor: pointer !important;
}

/* ═══ Visibility ═══ */
.gdls-hidden {
    display: none !important;
}

/* ═══ Footer ═══ */
.gdls-footer {
    border-top: 1px solid var(--gd-border, #e0e0e0) !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    color: var(--gd-text-muted, #888) !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.gdls-footer a {
    color: var(--gd-text-muted, #888) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.gdls-footer a:hover {
    text-decoration: underline !important;
}

/* ═══ First / Last / X Played ═══ */
.gdls-flp-covernav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 0 !important;
    margin-bottom: 20px !important;
}

.gdls-flp-covernav a {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}

.gdls-flp-covernav a:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important;
}

.gdls-flp-covernav a img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    display: block !important;
}

.gdls-flp-misc-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #999 !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 4px !important;
}

.gdls-flp-card {
    background: var(--gd-surface, #fff) !important;
    border: 1px solid var(--gd-border, #e0e0e0) !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

.gdls-flp-hdr {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    background: #f5f7fa !important;
    border-bottom: 1px solid var(--gd-border, #e0e0e0) !important;
}

.gdls-flp-cover {
    width: 50px !important;
    height: 50px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.gdls-flp-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--gd-text, #222) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
}

.gdls-flp-cols {
    display: grid !important;
    grid-template-columns: 1fr 80px 120px 120px !important;
    gap: 0 10px !important;
    padding: 0 20px !important;
    align-items: center !important;
}

.gdls-flp-cols-rk {
    display: grid !important;
    grid-template-columns: 50px 1fr 80px 120px 120px !important;
    gap: 0 10px !important;
    padding: 0 20px !important;
    align-items: center !important;
}

.gdls-flp-rank {
    font-size: 13px !important;
    color: var(--gd-text-faint, #999) !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.gdls-flp-colhdr {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--gd-border-strong, #ddd) !important;
    font-size: 11px !important;
    color: var(--gd-text-muted, #888) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.gdls-flp-col-c {
    text-align: center !important;
}

.gdls-flp-row {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.1s ease !important;
}

.gdls-flp-row:last-child {
    border-bottom: none !important;
}

.gdls-flp-row:hover {
    background: var(--gd-bg-alt, #f8f8f8) !important;
}

.gdls-flp-row .gdls-song {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.gdls-flp-badge {
    display: inline-block !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    min-width: 32px !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.gdls-flp-date {
    font-size: 13px !important;
    color: var(--gd-text-secondary, #555) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    font-family: 'Courier New', Courier, monospace !important;
}

.gdls-flp-row-zero {
    background: #fdf2f2 !important;
}

.gdls-flp-row-zero:hover {
    background: #fbe8e8 !important;
}

.gdls-flp-badge-zero {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gd-text-faint, #aaa) !important;
    padding: 2px 10px !important;
    border: 2px dashed #ccc !important;
    border-radius: 4px !important;
    min-width: 32px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    background: transparent !important;
}

.gdls-flp-row-zero .gdls-flp-date {
    color: #bbb !important;
}

/* ═══ Milestones ═══ */
.gdls-ms-card {
    background: var(--gd-surface, #fff) !important;
    border: 1px solid var(--gd-border, #e0e0e0) !important;
    border-radius: 8px !important;
    margin-bottom: 24px !important;
    padding: 20px !important;
    overflow: hidden !important;
}

.gdls-ms-club-hdr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 16px !important;
}

.gdls-ms-club-name {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.gdls-ms-club-count {
    font-size: 12px !important;
    color: var(--gd-text-faint, #999) !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
}

.gdls-ms-pills {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.gdls-ms-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--gd-border, #e8e8e8) !important;
    border-radius: 6px !important;
    background: var(--gd-bg-alt, #fafafa) !important;
}

.gdls-ms-pill-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.gdls-ms-pill-name .gdls-song {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.gdls-ms-pill-badge {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    line-height: 1.2 !important;
    min-width: 36px !important;
    text-align: center !important;
}

/* Approaching */
.gdls-ms-legend {
    font-size: 12px !important;
    color: var(--gd-text-muted, #666) !important;
    margin-bottom: 16px !important;
    line-height: 1.2 !important;
}

.gdls-ms-dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 2px !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
}

.gdls-ms-approach-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.gdls-ms-approach-card {
    border: 1px solid var(--gd-border, #e0e0e0) !important;
    border-radius: 8px !important;
    padding: 14px !important;
    background: var(--gd-surface, #fff) !important;
}

.gdls-ms-ac-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.gdls-ms-ac-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--gd-text, #222) !important;
}

.gdls-ms-ac-last {
    font-size: 12px !important;
    font-style: italic !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

.gdls-ms-ac-badge {
    flex-shrink: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.gdls-ms-ac-stats {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: var(--gd-text-secondary, #444) !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

.gdls-ms-ac-togo {
    color: var(--gd-text, #222) !important;
}

.gdls-ms-ac-bar-bg {
    width: 100% !important;
    height: 5px !important;
    background: var(--gd-border, #e8e8e8) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.gdls-ms-ac-bar {
    height: 100% !important;
    background: #0383D9 !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
}

/* Aged out */
.gdls-ms-aged-hdr {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gd-text-muted, #888) !important;
    letter-spacing: 0.04em !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    padding-top: 16px !important;
    padding-bottom: 8px !important;
    border-top: 1px dashed #ddd !important;
    line-height: 1.2 !important;
}

.gdls-ms-aged-list {
    font-size: 13px !important;
    color: var(--gd-text-muted, #666) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ═══ Debut Chart ═══ */
.gdls-dc-header {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--gd-text-secondary, #555) !important;
    letter-spacing: 0.04em !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--gd-border-strong, #ddd) !important;
    margin-bottom: 24px !important;
    line-height: 1.2 !important;
}

.gdls-dc-year-block {
    margin-bottom: 32px !important;
}

.gdls-dc-year-hdr {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding-bottom: 6px !important;
    border-bottom: 3px solid #333 !important;
    margin-bottom: 16px !important;
}

.gdls-dc-year {
    font-size: 36px !important;
    font-weight: 900 !important;
    color: var(--gd-text, #222) !important;
    line-height: 1 !important;
}

.gdls-dc-year-count {
    font-size: 13px !important;
    color: var(--gd-text-muted, #888) !important;
    line-height: 1.2 !important;
}

.gdls-dc-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.gdls-dc-card {
    border: 1px solid var(--gd-border, #e0e0e0) !important;
    border-radius: 8px !important;
    background: var(--gd-bg-alt, #fafafa) !important;
    overflow: hidden !important;
}

.gdls-dc-card-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 14px 14px 10px !important;
    min-height: 70px !important;
}

.gdls-dc-card-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.gdls-dc-song-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--gd-text, #222) !important;
    margin-bottom: 6px !important;
}

.gdls-dc-song-name .gdls-song {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.gdls-dc-album-badge {
    display: inline-block !important;
    background: #333 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 3px 7px !important;
    border-radius: 3px !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.gdls-dc-cover-artist {
    font-size: 13px !important;
    color: #8E44AD !important;
    font-style: italic !important;
    line-height: 1.2 !important;
}

.gdls-dc-album-art {
    width: 50px !important;
    height: 50px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin-left: 10px !important;
}

.gdls-dc-card-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 14px !important;
    border-top: 1px solid var(--gd-border, #e8e8e8) !important;
}

.gdls-dc-date {
    font-size: 12px !important;
    color: var(--gd-text-muted, #666) !important;
    font-family: 'Courier New', Courier, monospace !important;
    line-height: 1.2 !important;
}

.gdls-dc-setlist {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--gd-link, #0383D9) !important;
    text-decoration: none !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
}

.gdls-dc-setlist:hover {
    text-decoration: underline !important;
}

/* ═══ Never Played Live ═══ */
.gdls-np-summary {
    background: var(--gd-surface, #fff) !important;
    border: 1px solid var(--gd-border, #e0e0e0) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

.gdls-np-summary-stats {
    display: flex !important;
    justify-content: space-around !important;
    text-align: center !important;
    margin-bottom: 14px !important;
}

.gdls-np-stat {
    display: flex !important;
    flex-direction: column !important;
}

.gdls-np-stat-num {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--gd-text, #222) !important;
    line-height: 1.2 !important;
}

.gdls-np-stat-label {
    font-size: 11px !important;
    color: var(--gd-text-muted, #888) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

.gdls-np-bar-bg {
    width: 100% !important;
    height: 8px !important;
    background: #E8453C !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
}

.gdls-np-bar-fill {
    height: 100% !important;
    background: #2BAF4A !important;
    border-radius: 4px !important;
}

.gdls-np-bar-label {
    font-size: 12px !important;
    color: var(--gd-text-muted, #888) !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.gdls-np-album {
    margin-bottom: 24px !important;
}

.gdls-np-album-hdr {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #333 !important;
    margin-bottom: 12px !important;
}

.gdls-np-album-cover {
    width: 36px !important;
    height: 36px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.gdls-np-album-name {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--gd-text, #222) !important;
    line-height: 1.2 !important;
    margin-right: 8px !important;
}

.gdls-np-album-count {
    font-size: 13px !important;
    color: var(--gd-text-faint, #999) !important;
    line-height: 1.2 !important;
}

.gdls-np-pills {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}

.gdls-np-pill {
    padding: 10px 12px !important;
    background: var(--gd-bg-alt, #fafafa) !important;
    border: 1px solid var(--gd-border, #e8e8e8) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--gd-text-secondary, #444) !important;
    line-height: 1.2 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
}

.gdls-np-pill:hover {
    border-color: var(--gd-link, #0383D9) !important;
    box-shadow: 0 0 0 2px rgba(3, 131, 217, 0.3) !important;
}

.gdls-np-pill .gdls-song {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* ═══ Song/album links ═══ */
a.gdls-song {
    color: var(--gd-link, #0383D9) !important;
    text-decoration: none !important;
}

a.gdls-song:hover {
    text-decoration: underline !important;
}

/* ═══ Responsive ═══ */
@media (max-width: 600px) {
    .gdls-hero-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .gdls-hero-num {
        font-size: 22px !important;
    }

    .gdls-featured {
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .gdls-feat-rk {
        font-size: 24px !important;
    }

    .gdls-feat-num {
        font-size: 18px !important;
    }

    .gdls-feat-pct {
        font-size: 11px !important;
    }
    .gdls-jump {
        grid-template-columns: 1fr 1fr !important;
    }

    .gdls-stats-row {
        flex-wrap: wrap !important;
    }

    .gdls-stat {
        min-width: 25% !important;
    }

    .gdls-stat-val {
        font-size: 22px !important;
    }

    .gdls-stat-sm {
        font-size: 18px !important;
    }

    .gdls-cols-songs {
        grid-template-columns: 22px 1fr 60px !important;
    }

    .gdls-cols-songs .gdls-num-sm {
        display: none !important;
    }

    .gdls-row-streak {
        grid-template-columns: 22px minmax(0, 100px) 1fr !important;
    }

    .gdls-streak-name .gdls-meta {
        display: none !important;
    }

    .gdls-row-once {
        grid-template-columns: 28px 1fr auto !important;
    }

    .gdls-once-date {
        font-size: 11px !important;
    }

    .gdls-ctx-badge {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        margin-top: 2px !important;
    }

    .gdls-gap-badge {
        font-size: 11px !important;
    }

    .gdls-sec-sub {
        display: none !important;
    }

    /* First/Last mobile */
    .gdls-flp-covernav {
        gap: 5px !important;
        padding: 8px 0 !important;
        margin-bottom: 14px !important;
    }

    .gdls-flp-covernav a,
    .gdls-flp-covernav a img,
    .gdls-flp-misc-icon {
        width: 38px !important;
        height: 38px !important;
    }

    .gdls-flp-misc-icon {
        font-size: 16px !important;
    }

    .gdls-flp-cols {
        grid-template-columns: 1fr 55px 75px 75px !important;
        gap: 0 4px !important;
        padding: 0 10px !important;
    }

    .gdls-flp-cols-rk {
        grid-template-columns: 30px 1fr 55px 75px 75px !important;
        gap: 0 4px !important;
        padding: 0 10px !important;
    }

    .gdls-flp-hdr {
        padding: 10px 10px !important;
    }

    .gdls-flp-title {
        font-size: 14px !important;
    }

    .gdls-flp-cover {
        width: 36px !important;
        height: 36px !important;
    }

    .gdls-flp-badge {
        font-size: 11px !important;
        padding: 2px 5px !important;
        min-width: 26px !important;
    }

    .gdls-flp-badge-zero {
        font-size: 11px !important;
        padding: 1px 5px !important;
        min-width: 26px !important;
    }

    .gdls-flp-date {
        font-size: 11px !important;
    }

    .gdls-flp-row {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .gdls-flp-row .gdls-song {
        font-size: 13px !important;
    }

    .gdls-flp-rank {
        font-size: 11px !important;
    }

    .gdls-flp-colhdr {
        font-size: 10px !important;
    }

    /* Milestones mobile */
    .gdls-ms-pills {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gdls-ms-approach-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .gdls-ms-club-name {
        font-size: 18px !important;
    }

    .gdls-ms-card {
        padding: 14px !important;
    }

    /* Debut chart mobile */
    .gdls-dc-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .gdls-dc-year {
        font-size: 28px !important;
    }

    .gdls-dc-song-name,
    .gdls-dc-song-name .gdls-song {
        font-size: 14px !important;
    }

    /* Never played mobile */
    .gdls-np-pills {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gdls-np-stat-num {
        font-size: 22px !important;
    }

    .gdls-np-album-name {
        font-size: 16px !important;
    }

    .gdls-np-pill {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

/* ═══ Cross Stats: Most Streamed, Least Played ═══ */
#gdls-cross .gdls-row {
    grid-template-columns: 26px 1fr auto !important;
}
.gdls-row-main {
    min-width: 0 !important;
}
.gdls-cross-plays {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1DB954 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}
.gdls-cross-plays-zero {
    color: #e53935 !important;
    font-weight: 800 !important;
}


/* ─── Dark mode overrides ──────────────────────────────────── */

html[data-theme="dark"] .gdls-sec {
  background: var(--gd-surface) !important;
}
html[data-theme="dark"] .gdls-flp-card,
html[data-theme="dark"] .gdls-ms-card,
html[data-theme="dark"] .gdls-ms-approach-card,
html[data-theme="dark"] .gdls-np-summary {
  background: var(--gd-surface) !important;
  border-color: var(--gd-border) !important;
}

/* Tinted status backgrounds */
html[data-theme="dark"] .gdls-gap-warm    { background: rgba(239,159,39,0.1) !important; }
html[data-theme="dark"] .gdls-gap-cool    { background: rgba(88,166,255,0.1) !important; }
html[data-theme="dark"] .gdls-gap-cold    { background: var(--gd-surface-raised) !important; }

/* Status tint overrides (milestones, etc) */
html[data-theme="dark"] [class*="gdls-"][style*="background: #ffebee"],
html[data-theme="dark"] [class*="gdls-"][style*="background:#ffebee"] { background: rgba(244,112,103,0.1) !important; }
html[data-theme="dark"] [class*="gdls-"][style*="background: #fff3e0"],
html[data-theme="dark"] [class*="gdls-"][style*="background:#fff3e0"] { background: rgba(239,159,39,0.1) !important; }
html[data-theme="dark"] [class*="gdls-"][style*="background: #f1f8e9"],
html[data-theme="dark"] [class*="gdls-"][style*="background:#f1f8e9"] { background: rgba(62,207,142,0.1) !important; }
html[data-theme="dark"] [class*="gdls-"][style*="background: #ede7f6"],
html[data-theme="dark"] [class*="gdls-"][style*="background:#ede7f6"] { background: rgba(100,80,200,0.1) !important; }

/* Table rows */
html[data-theme="dark"] .gdls-table tr:nth-child(even) {
  background: var(--gd-surface-raised) !important;
}