/* ═══════════════════════════════════════════════════════════
   SCGE GUEST PROFILE — Two-Column Light Redesign (v10.8)
   New .sp-* classes used by SCGE_Shortcodes::profile()
   ═══════════════════════════════════════════════════════════ */
.scge-app.scge-sp {
    --sp-bg: #FAFAF7;
    --sp-bg-2: #F4F3ED;
    --sp-card: #FFFFFF;
    --sp-ink: #18181B;
    --sp-ink-2: #3F3F46;
    --sp-ink-3: #71717A;
    --sp-ink-4: #A1A1AA;
    --sp-line: #E8E7E0;
    --sp-line-2: #EFEFE9;
    --sp-gold: #B8862A;
    --sp-gold-2: #D4A857;
    --sp-gold-dark: #8B6914;
    --sp-gold-soft: #FAF6EC;
    --sp-indigo: #4F46E5;
    --sp-indigo-soft: #EEF2FF;
    --sp-green: #059669;
    --sp-green-soft: #ECFDF5;
    --sp-blue: #1D9BF0;
    --sp-blue-soft: #EFF6FF;
    --sp-shadow-sm: 0 1px 2px rgba(24,24,27,.04), 0 2px 4px rgba(24,24,27,.04);
    --sp-shadow-md: 0 4px 8px rgba(24,24,27,.04), 0 8px 16px rgba(24,24,27,.06);
    --sp-shadow-lg: 0 8px 16px rgba(24,24,27,.06), 0 20px 40px rgba(24,24,27,.08);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: var(--sp-bg) !important;
    color: var(--sp-ink) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
}
.scge-app.scge-sp *,
.scge-app.scge-sp *::before,
.scge-app.scge-sp *::after {
    box-sizing: border-box !important;
}
.scge-app.scge-sp img { max-width: 100% !important; display: block !important; }
.scge-app.scge-sp a { color: inherit !important; text-decoration: none !important; }
.scge-app.scge-sp button { font-family: inherit !important; cursor: pointer !important; border: none !important; background: none !important; }
.scge-app.scge-sp h1,
.scge-app.scge-sp h2,
.scge-app.scge-sp h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═══ CLAIM BANNER ═══ */
.scge-app.scge-sp .sp-claim-banner {
    background: linear-gradient(90deg, var(--sp-indigo-soft), #FEF3C7) !important;
    padding: 12px 20px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: var(--sp-ink-2) !important;
    border-radius: 10px !important;
    margin: 20px auto 0 !important;
    max-width: 1160px !important;
}
.scge-app.scge-sp .sp-claim-banner a {
    color: var(--sp-indigo) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* ═══ HEADER ═══ */
.scge-app.scge-sp .sp-hdr {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px 0 !important;
}
.scge-app.scge-sp .sp-hdr-top {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
}
/* v10.15.7 — photo column wrapper so rank pill + photo + caption stack vertically */
.scge-app.scge-sp .sp-hdr-photo-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
.scge-app.scge-sp .sp-hdr-rank {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    height: 26px !important;
    padding: 0 12px !important;
    background: var(--sp-gold, #B8862A) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    letter-spacing: -.01em !important;
    box-shadow: 0 2px 6px rgba(184,134,42,.25) !important;
    white-space: nowrap !important;
}
.scge-app.scge-sp .sp-hdr-rank-hash {
    font-size: 11px !important;
    opacity: .75 !important;
    margin-right: 1px !important;
}
.scge-app.scge-sp .sp-hdr-rank-caption {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: var(--sp-muted, #6b7280) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
}
.scge-app.scge-sp .sp-hdr-photo {
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
    box-shadow: var(--sp-shadow-md) !important;
}
.scge-app.scge-sp .sp-hdr-photo.is-gold {
    box-shadow:
        0 0 0 3px var(--sp-gold),
        0 0 0 6px rgba(184,134,42,.15),
        0 16px 32px rgba(184,134,42,.2) !important;
}
.scge-app.scge-sp .sp-hdr-photo.is-pro {
    box-shadow:
        0 0 0 3px var(--sp-blue),
        0 0 0 6px rgba(29,155,240,.12),
        var(--sp-shadow-md) !important;
}
.scge-app.scge-sp .sp-hdr-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.scge-app.scge-sp .sp-hdr-photo-initials {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1e293b, #475569) !important;
    color: rgba(255,255,255,.9) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
}

.scge-app.scge-sp .sp-hdr-info {
    flex: 1 !important;
    min-width: 260px !important;
}

/* ═══ CHIPS ═══ */
.scge-app.scge-sp .sp-chips {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 14px !important;
}
.scge-app.scge-sp .sp-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 11px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    border-radius: 6px !important;
    border: 1px solid !important;
    line-height: 1.3 !important;
    font-family: 'Inter', sans-serif !important;
}
.scge-app.scge-sp .sp-chip--gold { background: var(--sp-gold-soft) !important; color: var(--sp-gold-dark) !important; border-color: #E8D495 !important; }
.scge-app.scge-sp .sp-chip--indigo { background: var(--sp-indigo-soft) !important; color: var(--sp-indigo) !important; border-color: #C7D2FE !important; }
.scge-app.scge-sp .sp-chip--green { background: var(--sp-green-soft) !important; color: var(--sp-green) !important; border-color: #A7F3D0 !important; }
.scge-app.scge-sp .sp-chip--blue { background: var(--sp-blue-soft) !important; color: #1864AB !important; border-color: #BFDBFE !important; }

/* ═══ NAME + TITLE + BUTTONS ═══ */
.scge-app.scge-sp .sp-hdr-name {
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    color: var(--sp-ink) !important;
}
.scge-app.scge-sp .sp-hdr-title {
    font-size: 15px !important;
    color: var(--sp-ink-2) !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
    max-width: 620px !important;
}
.scge-app.scge-sp .sp-hdr-ctas {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* ═══ BUTTONS ═══ */
.scge-app.scge-sp .sp-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    transition: all .18s !important;
    letter-spacing: .01em !important;
    font-family: 'Inter', sans-serif !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}
.scge-app.scge-sp .sp-btn svg { width: 15px !important; height: 15px !important; }
.scge-app.scge-sp .sp-btn--gold {
    background: var(--sp-gold) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(184,134,42,.22) !important;
}
.scge-app.scge-sp .sp-btn--gold:hover {
    background: var(--sp-gold-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(184,134,42,.3) !important;
    color: #fff !important;
}
.scge-app.scge-sp .sp-btn--outline {
    background: var(--sp-card) !important;
    color: var(--sp-ink) !important;
    border: 1px solid var(--sp-line) !important;
}
.scge-app.scge-sp .sp-btn--outline:hover {
    background: var(--sp-bg-2) !important;
    border-color: var(--sp-ink-4) !important;
    color: var(--sp-ink) !important;
}
.scge-app.scge-sp .sp-btn--lg {
    padding: 14px 22px !important;
    font-size: 14px !important;
    width: 100% !important;
    justify-content: center !important;
}

/* ═══ MAIN LAYOUT ═══ */
.scge-app.scge-sp .sp-main {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 32px 20px 80px !important;
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 40px !important;
    align-items: start !important;
}
.scge-app.scge-sp .sp-main--full {
    grid-template-columns: 1fr !important;
    max-width: 860px !important;
}

/* ═══ CONTENT CARDS ═══ */
.scge-app.scge-sp .sp-card {
    background: var(--sp-card) !important;
    border: 1px solid var(--sp-line) !important;
    border-radius: 18px !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--sp-shadow-sm) !important;
}
.scge-app.scge-sp .sp-card-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    margin: 0 0 18px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--sp-line-2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    color: var(--sp-ink) !important;
    line-height: 1.2 !important;
}
.scge-app.scge-sp .sp-card-count {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--sp-ink-3) !important;
    background: var(--sp-bg-2) !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    letter-spacing: 0 !important;
}

/* ═══ ABOUT ═══ */
.scge-app.scge-sp .sp-about {
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: var(--sp-ink-2) !important;
    max-height: 220px !important;
    overflow: hidden !important;
    position: relative !important;
    transition: max-height .4s ease !important;
}
.scge-app.scge-sp .sp-about.is-expanded { max-height: 3000px !important; }
.scge-app.scge-sp .sp-about::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 60px !important;
    background: linear-gradient(to bottom, transparent, var(--sp-card)) !important;
    pointer-events: none !important;
    transition: opacity .3s !important;
}
.scge-app.scge-sp .sp-about.is-expanded::after { opacity: 0 !important; }
.scge-app.scge-sp .sp-about p { margin: 0 0 14px !important; }
.scge-app.scge-sp .sp-about p:last-child { margin-bottom: 0 !important; }
.scge-app.scge-sp .sp-about strong { color: var(--sp-ink) !important; }

.scge-app.scge-sp .sp-about-toggle {
    margin-top: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--sp-gold) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: 'Inter', sans-serif !important;
    padding: 0 !important;
}
.scge-app.scge-sp .sp-about-toggle:hover { color: var(--sp-gold-dark) !important; }
.scge-app.scge-sp .sp-about-toggle svg { transition: transform .3s !important; }
.scge-app.scge-sp .sp-about-toggle.is-open svg { transform: rotate(180deg) !important; }

/* ═══ EPISODES ═══ */
.scge-app.scge-sp .sp-ep-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
}
.scge-app.scge-sp .sp-ep {
    background: var(--sp-bg-2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all .25s !important;
    border: 1px solid var(--sp-line-2) !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}
.scge-app.scge-sp .sp-ep:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sp-shadow-md) !important;
    border-color: var(--sp-ink-4) !important;
    color: inherit !important;
}
.scge-app.scge-sp .sp-ep-thumb {
    aspect-ratio: 16/10 !important;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #1e293b, #475569) !important;
}
.scge-app.scge-sp .sp-ep-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .6s ease !important;
}
.scge-app.scge-sp .sp-ep:hover .sp-ep-thumb img { transform: scale(1.05) !important; }
.scge-app.scge-sp .sp-ep-color-0 { background: linear-gradient(135deg, #1e1b4b, #4c1d95) !important; }
.scge-app.scge-sp .sp-ep-color-1 { background: linear-gradient(135deg, #164e63, #0e7490) !important; }
.scge-app.scge-sp .sp-ep-color-2 { background: linear-gradient(135deg, #064e3b, #047857) !important; }
.scge-app.scge-sp .sp-ep-color-3 { background: linear-gradient(135deg, #7c2d12, #c2410c) !important; }
.scge-app.scge-sp .sp-ep-color-4 { background: linear-gradient(135deg, #581c87, #7e22ce) !important; }
.scge-app.scge-sp .sp-ep-color-5 { background: linear-gradient(135deg, #831843, #be185d) !important; }
.scge-app.scge-sp .sp-ep-play {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity .25s !important;
    background: rgba(0,0,0,.35) !important;
    color: #fff !important;
}
.scge-app.scge-sp .sp-ep:hover .sp-ep-play { opacity: 1 !important; }
.scge-app.scge-sp .sp-ep-play svg { width: 44px !important; height: 44px !important; }
.scge-app.scge-sp .sp-ep-dur {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    background: rgba(0,0,0,.8) !important;
    color: #fff !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    z-index: 2 !important;
}
.scge-app.scge-sp .sp-ep-body { padding: 14px 16px 16px !important; }
.scge-app.scge-sp .sp-ep-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--sp-ink) !important;
    margin: 0 0 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.scge-app.scge-sp .sp-ep-date {
    font-size: 11px !important;
    color: var(--sp-ink-3) !important;
    font-weight: 500 !important;
}

/* ═══ BOOKS ═══ */
.scge-app.scge-sp .sp-books {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
}
.scge-app.scge-sp .sp-book {
    background: var(--sp-bg-2) !important;
    border: 1px solid var(--sp-line-2) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center !important;
    transition: all .25s !important;
}
.scge-app.scge-sp .sp-book:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--sp-shadow-md) !important;
    border-color: var(--sp-ink-4) !important;
}
.scge-app.scge-sp .sp-book-cover {
    aspect-ratio: 2/3 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,.08),
        0 8px 24px rgba(0,0,0,.12) !important;
    position: relative !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    background-color: #1a1a1a !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* v10.15.4 — Blurred-bg trick: the div itself shows a blurred, darker version of
   the cover using background-image (set inline). The actual <img> sits on top with
   object-fit: contain so the FULL cover is visible regardless of its aspect ratio.
   This way portrait, landscape, and square covers all look clean. */
.scge-app.scge-sp .sp-book-cover::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(24px) saturate(1.3) brightness(.55) !important;
    transform: scale(1.2) !important;
    z-index: 1 !important;
}
.scge-app.scge-sp .sp-book-cover img {
    position: relative !important;
    z-index: 2 !important;
    width: auto !important;
    height: auto !important;
    max-width: 92% !important;
    max-height: 92% !important;
    object-fit: contain !important;
    border-radius: 3px !important;
    box-shadow:
        0 2px 6px rgba(0,0,0,.35),
        0 8px 20px rgba(0,0,0,.25) !important;
    inset: auto !important;
}
/* Fallback colors for books with no cover image */
.scge-app.scge-sp .sp-book-color-0 {
    background: linear-gradient(135deg, var(--sp-gold) 0%, var(--sp-gold-dark) 100%) !important;
    padding: 18px !important;
}
.scge-app.scge-sp .sp-book-color-1 {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
    padding: 18px !important;
}
.scge-app.scge-sp .sp-book-color-2 {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
    padding: 18px !important;
}
.scge-app.scge-sp .sp-book-color-0::before,
.scge-app.scge-sp .sp-book-color-1::before,
.scge-app.scge-sp .sp-book-color-2::before { display: none !important; }
.scge-app.scge-sp .sp-book-color-0 > span,
.scge-app.scge-sp .sp-book-color-1 > span,
.scge-app.scge-sp .sp-book-color-2 > span { position: relative !important; z-index: 2 !important; }

.scge-app.scge-sp .sp-book-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--sp-ink) !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}
.scge-app.scge-sp .sp-book-sub {
    font-size: 11px !important;
    color: var(--sp-ink-3) !important;
    margin-bottom: 12px !important;
}

/* v10.15.5 — Amazon button lives INSIDE the cover frame, revealed on hover.
   Text-only (no icons). On touch devices (no hover capability) it stays visible. */
.scge-app.scge-sp .sp-book-amazon-btn {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(.94) !important;
    z-index: 10 !important;
    padding: 10px 22px !important;
    background: var(--sp-gold) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    box-shadow:
        0 2px 6px rgba(0,0,0,.3),
        0 8px 20px rgba(0,0,0,.35) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease, transform .25s ease, background .18s ease !important;
}
/* Soften the cover behind the button on hover so the button pops */
.scge-app.scge-sp .sp-book-cover::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.35) !important;
    opacity: 0 !important;
    transition: opacity .25s ease !important;
    z-index: 5 !important;
    pointer-events: none !important;
}
.scge-app.scge-sp .sp-book:hover .sp-book-cover::after { opacity: 1 !important; }
.scge-app.scge-sp .sp-book:hover .sp-book-amazon-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
}
.scge-app.scge-sp .sp-book-amazon-btn:hover {
    background: var(--sp-gold-dark) !important;
    color: #fff !important;
}
/* Touch devices (no hover capability) — button always visible at the bottom
   of the cover as a fixed pill rather than centered, so it doesn't block the cover art. */
@media (hover: none) {
    .scge-app.scge-sp .sp-book-amazon-btn {
        top: auto !important;
        bottom: 10px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translate(-50%, 0) scale(1) !important;
        padding: 7px 14px !important;
        font-size: 10px !important;
    }
    .scge-app.scge-sp .sp-book-cover::after {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%) !important;
    }
}

/* Legacy sp-book-link retained for backward compat in other templates */
.scge-app.scge-sp .sp-book-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--sp-gold) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}
.scge-app.scge-sp .sp-book-link:hover { color: var(--sp-gold-dark) !important; }

/* ═══ STICKY SIDEBAR ═══ */
.scge-app.scge-sp .sp-sidebar {
    position: sticky !important;
    top: 80px !important;
}
.scge-app.scge-sp .sp-book-card {
    background: var(--sp-card) !important;
    border: 1px solid var(--sp-line) !important;
    border-radius: 18px !important;
    padding: 26px !important;
    box-shadow: var(--sp-shadow-md) !important;
}
.scge-app.scge-sp .sp-book-card-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 18px !important;
    letter-spacing: -.01em !important;
    color: var(--sp-ink) !important;
}
.scge-app.scge-sp .sp-book-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}
.scge-app.scge-sp .sp-book-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--sp-line-2) !important;
}
.scge-app.scge-sp .sp-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: var(--sp-ink-2) !important;
    font-weight: 500 !important;
}
.scge-app.scge-sp .sp-meta-row svg {
    width: 15px !important;
    height: 15px !important;
    color: var(--sp-gold) !important;
    flex-shrink: 0 !important;
}
.scge-app.scge-sp[data-tier="pro"] .sp-meta-row svg { color: var(--sp-indigo) !important; }
.scge-app.scge-sp .sp-book-tags {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--sp-line-2) !important;
    margin-top: 4px !important;
}

/* Pro tier uses indigo instead of gold for buttons */
.scge-app.scge-sp[data-tier="pro"] .sp-btn--gold {
    background: var(--sp-indigo) !important;
    box-shadow: 0 4px 12px rgba(79,70,229,.22) !important;
}
.scge-app.scge-sp[data-tier="pro"] .sp-btn--gold:hover {
    background: #3730A3 !important;
    box-shadow: 0 6px 16px rgba(79,70,229,.3) !important;
}
.scge-app.scge-sp[data-tier="pro"] .sp-about-toggle,
.scge-app.scge-sp[data-tier="pro"] .sp-book-link { color: var(--sp-indigo) !important; }
.scge-app.scge-sp[data-tier="free"] .sp-about-toggle,
.scge-app.scge-sp[data-tier="starter"] .sp-about-toggle,
.scge-app.scge-sp[data-tier="free"] .sp-book-link,
.scge-app.scge-sp[data-tier="starter"] .sp-book-link { color: var(--sp-indigo) !important; }

/* ═══ MOBILE ═══ */
@media (max-width: 960px) {
    .scge-app.scge-sp .sp-hdr { padding: 32px 20px 0 !important; }
    .scge-app.scge-sp .sp-hdr-top { gap: 20px !important; }
    .scge-app.scge-sp .sp-hdr-photo { width: 100px !important; height: 100px !important; }
    .scge-app.scge-sp .sp-hdr-name { font-size: 36px !important; }
    .scge-app.scge-sp .sp-hdr-title { font-size: 14px !important; }
    .scge-app.scge-sp .sp-main {
        grid-template-columns: 1fr !important;
        padding: 24px 20px 60px !important;
        gap: 24px !important;
    }
    .scge-app.scge-sp .sp-sidebar { position: static !important; }
    .scge-app.scge-sp .sp-card { padding: 24px 22px !important; }
    .scge-app.scge-sp .sp-card-title { font-size: 22px !important; }
    .scge-app.scge-sp .sp-ep-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .scge-app.scge-sp .sp-books { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .scge-app.scge-sp .sp-hdr-name { font-size: 30px !important; }
    .scge-app.scge-sp .sp-hdr-photo { width: 88px !important; height: 88px !important; }
    .scge-app.scge-sp .sp-hdr-photo-initials { font-size: 32px !important; }
    .scge-app.scge-sp .sp-card { padding: 20px 18px !important; }
    .scge-app.scge-sp .sp-card-title { font-size: 20px !important; }
    /* v10.15.7 — rank pill scales down on mobile to match smaller photo column */
    .scge-app.scge-sp .sp-hdr-rank {
        height: 22px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
    .scge-app.scge-sp .sp-hdr-rank-hash { font-size: 10px !important; }
    .scge-app.scge-sp .sp-hdr-rank-caption { font-size: 8px !important; }
    .scge-app.scge-sp .sp-hdr-photo-col { gap: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════
   v10.10 ADDITIONS — new chips, stat strip, appears on
   ═══════════════════════════════════════════════════════════ */

/* New rose chip for Top Guest */
.scge-app.scge-sp .sp-chip--rose {
    background: #FFF1F2 !important;
    color: #E11D48 !important;
    border-color: #FECDD3 !important;
}

/* Inline stat strip — sits between hdr-title and hdr-ctas */
.scge-app.scge-sp .sp-stat-strip {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 18px !important;
    font-size: 13px !important;
    color: var(--sp-ink-2) !important;
    font-weight: 600 !important;
    flex-wrap: wrap !important;
    max-width: 620px !important;
}
.scge-app.scge-sp .sp-stat-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 16px !important;
    position: relative !important;
    white-space: nowrap !important;
}
.scge-app.scge-sp .sp-stat-item:first-child {
    padding-left: 0 !important;
}
.scge-app.scge-sp .sp-stat-item:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 1px !important;
    height: 14px !important;
    background: var(--sp-line) !important;
    transform: translateY(-50%) !important;
}
.scge-app.scge-sp .sp-stat-item svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--sp-gold) !important;
    flex-shrink: 0 !important;
}
.scge-app.scge-sp .sp-stat-item strong {
    color: var(--sp-ink) !important;
    font-weight: 800 !important;
}
.scge-app.scge-sp .sp-stat-rank {
    color: var(--sp-gold-dark) !important;
}

/* Appears On grid — between About and Episodes */
.scge-app.scge-sp .sp-appears-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}
.scge-app.scge-sp .sp-appears-chip {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    background: var(--sp-bg-2) !important;
    border: 1px solid var(--sp-line-2) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sp-ink-2) !important;
    transition: all .2s !important;
}
.scge-app.scge-sp .sp-appears-chip:hover {
    background: #fff !important;
    border-color: var(--sp-gold) !important;
    box-shadow: 0 4px 12px rgba(184,134,42,.08) !important;
    transform: translateY(-1px) !important;
}
.scge-app.scge-sp .sp-appears-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--sp-gold-soft), #fff) !important;
    border: 1px solid #E8D495 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--sp-gold) !important;
    flex-shrink: 0 !important;
}
.scge-app.scge-sp .sp-appears-icon svg {
    width: 18px !important;
    height: 18px !important;
}
.scge-app.scge-sp .sp-appears-name {
    line-height: 1.3 !important;
}

/* Mobile stat strip wrapping */
@media (max-width: 600px) {
    .scge-app.scge-sp .sp-stat-item {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
    /* Appears On: 2-column compact layout on mobile to pack shows tightly */
    .scge-app.scge-sp .sp-appears-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .scge-app.scge-sp .sp-appears-chip {
        padding: 10px 12px !important;
        gap: 9px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    .scge-app.scge-sp .sp-appears-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 6px !important;
    }
    .scge-app.scge-sp .sp-appears-icon svg {
        width: 14px !important;
        height: 14px !important;
    }
    .scge-app.scge-sp .sp-appears-name {
        font-size: 12px !important;
        font-weight: 600 !important;
    }
}

/* Short bio — plain paragraph below the professional title in header.
   v10.15.8: Hard-clamp display to 2 lines with ellipsis as a safety net for
   any legacy bios that were saved before the 190-char input limit was added. */
.scge-app.scge-sp .sp-hdr-short {
    font-size: 15px !important;
    color: var(--sp-ink-2) !important;
    line-height: 1.65 !important;
    margin: 0 0 18px !important;
    max-width: 620px !important;
    font-weight: 400 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ═══════════════════════════════════════════════════════════
   v10.11 — Social icons, Share button, Mobile redesign
   ═══════════════════════════════════════════════════════════ */

/* Social icons row — sits below header CTAs */
.scge-app.scge-sp .sp-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 14px !important;
    max-width: 620px !important;
}
.scge-app.scge-sp .sp-social {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--sp-card) !important;
    border: 1px solid var(--sp-line) !important;
    color: var(--sp-ink-2) !important;
    transition: all .2s ease !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}
.scge-app.scge-sp .sp-social:hover {
    background: var(--sp-gold-soft) !important;
    border-color: var(--sp-gold) !important;
    color: var(--sp-gold-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(184,134,42,.12) !important;
}
.scge-app.scge-sp .sp-social svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

/* Share button — matches outline button pattern */
.scge-app.scge-sp .sp-share-btn {
    cursor: pointer !important;
    font-family: inherit !important;
}

/* ─── MOBILE REDESIGN (v10.11) ─────────────────────────────── */

/* ≤960px: sidebar moves above About, touch targets grow */
@media (max-width: 960px) {
    /* Switch .sp-main from grid to flex column so we can reorder children */
    .scge-app.scge-sp .sp-main {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Sidebar first, content second */
    .scge-app.scge-sp .sp-sidebar {
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
    }
    .scge-app.scge-sp .sp-content {
        order: 1 !important;
        width: 100% !important;
    }
    /* Book card full width on mobile */
    .scge-app.scge-sp .sp-book-card {
        max-width: 100% !important;
    }
    /* Touch targets: all buttons ≥44px */
    .scge-app.scge-sp .sp-btn {
        min-height: 44px !important;
        padding: 12px 18px !important;
    }
    .scge-app.scge-sp .sp-social {
        width: 44px !important;
        height: 44px !important;
    }
    .scge-app.scge-sp .sp-social svg {
        width: 20px !important;
        height: 20px !important;
    }
    /* Stat strip: smaller padding, wraps to 2 rows gracefully */
    .scge-app.scge-sp .sp-stat-strip {
        gap: 4px 0 !important;
        font-size: 12px !important;
    }
    .scge-app.scge-sp .sp-stat-item {
        padding: 4px 12px !important;
    }
}

/* ≤600px: phone — stack header vertically, single-col episodes */
@media (max-width: 600px) {
    /* Header: photo on top, info below, centered */
    .scge-app.scge-sp .sp-hdr {
        padding: 24px 16px 0 !important;
    }
    .scge-app.scge-sp .sp-hdr-top {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 18px !important;
    }
    .scge-app.scge-sp .sp-hdr-info {
        width: 100% !important;
        text-align: center !important;
    }
    /* Chips centered */
    .scge-app.scge-sp .sp-chips {
        justify-content: center !important;
    }
    /* Name centered, badges inline */
    .scge-app.scge-sp .sp-hdr-name {
        justify-content: center !important;
        font-size: 28px !important;
    }
    /* Short bio centered */
    .scge-app.scge-sp .sp-hdr-short {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Stat strip centered and wraps cleanly */
    .scge-app.scge-sp .sp-stat-strip {
        justify-content: center !important;
    }
    /* CTAs centered */
    .scge-app.scge-sp .sp-hdr-ctas {
        justify-content: center !important;
    }
    .scge-app.scge-sp .sp-hdr-ctas .sp-btn {
        flex: 1 !important;
        min-width: 140px !important;
        justify-content: center !important;
    }
    /* Social row centered */
    .scge-app.scge-sp .sp-socials {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Main section: tighter padding */
    .scge-app.scge-sp .sp-main {
        padding: 20px 16px 50px !important;
        gap: 16px !important;
    }
    /* Cards: tighter padding */
    .scge-app.scge-sp .sp-card {
        padding: 22px 18px !important;
    }
    /* Book card: tighter */
    .scge-app.scge-sp .sp-book-card {
        padding: 22px 20px !important;
    }
    /* Episodes: 1 column with larger thumbs */
    .scge-app.scge-sp .sp-ep-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Books: keep 2 col, they work at this size */
    .scge-app.scge-sp .sp-books {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    /* Appears On: full width single column already set earlier */
    /* Stat strip items smaller font */
    .scge-app.scge-sp .sp-stat-item {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
    .scge-app.scge-sp .sp-stat-item svg {
        width: 12px !important;
        height: 12px !important;
    }
    /* Section title tighter */
    .scge-app.scge-sp .sp-hdr-title {
        font-size: 12px !important;
        letter-spacing: .06em !important;
    }
}

/* Extra-narrow phones (≤400px): Appears On falls to 1 column but stays compact */
@media (max-width: 400px) {
    .scge-app.scge-sp .sp-appears-grid {
        grid-template-columns: 1fr !important;
    }
}

/* v10.12 — Role label byline above name (Founder / Co-Founder / Partner / Team) */
.scge-app.scge-sp .sp-hdr-role-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--sp-gold-dark) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: inline-block !important;
}