/* Discover page styles (UnQbdWeb2) - Phase 1: Hero + Continue Reading + Recommended */

/* ==============================================
   DISCOVER V2 DESIGN TOKENS (--dsc-*)
   Theme via the body.dark-mode class ONLY -- no OS media-query or theme
   attribute selectors are used anywhere in this file.
   Light values below; dark overrides in the body.dark-mode block further down.
   Later Discover V2 tasks consume these token names, not raw hex values.
   ============================================== */

:root {
    --dsc-bg: #F4FAFF;
    --dsc-bg-alt: #E9F3FF;
    --dsc-surface: #FFFFFF;
    --dsc-surface-alt: #F4F9FE;
    --dsc-ink: #131A24;
    --dsc-muted: #495A6E;
    --dsc-faint: #7F8DA1;
    --dsc-border: #E4EBF3;
    --dsc-border-subtle: rgba(2, 6, 23, 0.06);
    --dsc-link: #0174B1;
    --dsc-chip-bg: rgba(1, 116, 177, 0.10);
    --dsc-card-shadow: 0 12px 30px rgba(2, 6, 23, 0.10);
    --dsc-card-shadow-hover: 0 22px 50px rgba(2, 6, 23, 0.17);
    --dsc-rank-stroke: rgba(19, 26, 36, 0.15);
}

body.dark-mode {
    --dsc-bg: #080B12;
    --dsc-bg-alt: #0C1119;
    --dsc-surface: #141B27;
    --dsc-surface-alt: #1B2432;
    --dsc-ink: #EEF3FA;
    --dsc-muted: #A7B3C4;
    --dsc-faint: #8A97AA;
    --dsc-border: rgba(255, 255, 255, 0.09);
    --dsc-border-subtle: rgba(255, 255, 255, 0.05);
    --dsc-link: #4EC8FF;
    --dsc-chip-bg: rgba(0, 180, 255, 0.15);
    --dsc-card-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
    --dsc-card-shadow-hover: 0 24px 56px rgba(0, 0, 0, 0.7);
    --dsc-rank-stroke: rgba(255, 255, 255, 0.22);
}

/* ==============================================
   LOADING STATE
   ============================================== */

.discover-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7rem 2rem 3rem 2rem;
    background-color: var(--bg-color, #ffffff);
}

.discover-loading-spinner {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
    border: 5px solid rgba(0, 180, 255, 0.2);
    border-top-color: var(--primary-color, #00b4ff);
    border-radius: 50%;
    animation: discover-spin 0.8s linear infinite;
}

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

.discover-loading-text {
    margin: 0;
    color: #64748b;
    font-size: 1rem;
}

/* ==============================================
   PAGE LAYOUT
   ============================================== */

.discover-page {
    min-height: 100vh;
    background-color: var(--bg-color, #ffffff);
}

/* Discover V2 reskin root (id="page-discover" in Discover.razor). Base color only for now;
   later Discover V2 tasks layer section-specific styles on top of the --dsc-* tokens. */
.page-discover {
    min-height: 100vh;
    background: var(--dsc-bg);
    color: var(--dsc-ink);
}

/* ==============================================
   CONTINUE READING SECTION
   ============================================== */

.continue-reading-section {
    padding: 4rem 0 2rem 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, transparent 100%);
}

.continue-reading-container {
    /* Full-width to match the plain rails and the bands (was capped at 1400px, which left it
       noticeably narrower than the rest of Discover on large screens). Side padding keeps a gutter. */
    max-width: none;
    margin: 0;
    padding: 0 2rem;
}

.continue-reading-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    gap: 2rem;
}

.continue-reading-welcome {
    flex: 1;
}

.continue-reading-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.continue-reading-greeting {
    font-size: 2.5rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -1px;
    line-height: 1.1;
}

.continue-reading-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0;
}

.continue-reading-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.continue-reading-tier-premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.continue-reading-tier-badge i {
    font-size: 1rem;
}

/* Empty State for Continue Reading */
.continue-reading-empty-state {
    max-width: 600px;
    margin: 0 auto;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 180, 255, 0.1), rgba(0, 180, 255, 0.05));
    border-radius: 50%;
    border: 2px solid rgba(0, 180, 255, 0.2);
}

.empty-state-icon i {
    font-size: 2.5rem;
    color: var(--primary-color, #00b4ff);
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem 0;
}

.empty-state-description {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.empty-state-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.empty-state-btn-primary {
    background: var(--primary-color, #00b4ff);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 180, 255, 0.3);
}

.empty-state-btn-primary:hover {
    background: #0096d9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 180, 255, 0.4);
}

.empty-state-btn-secondary {
    background: transparent;
    color: var(--primary-color, #00b4ff);
    border: 2px solid var(--primary-color, #00b4ff);
}

.empty-state-btn-secondary:hover {
    background: rgba(0, 180, 255, 0.1);
    transform: translateY(-2px);
}

.empty-state-btn i {
    font-size: 1.1rem;
}

/* Mobile: tighter continue-reading section */
@media (max-width: 768px) {
    .continue-reading-section {
        padding: 2rem 0 1rem 0;
    }

    .continue-reading-container {
        padding: 0 1rem;
    }

    .continue-reading-greeting {
        font-size: 1.75rem;
    }

    .continue-reading-header {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .continue-reading-section {
        padding: 1.5rem 0 0.75rem 0;
    }

    .continue-reading-greeting {
        font-size: 1.5rem;
    }
}

/* Status badges (.book-progress-badge etc.) are standardized in book-card.css */

/* Trending Badge for Trending Now section */
.book-trending-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #ff5722, #e64a19);
    color: white;
    padding: 0.35rem 0.7rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(255, 87, 34, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

.book-trending-badge i {
    font-size: 0.875rem;
    animation: flicker 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(255, 87, 34, 0.4);
    }
    50% {
        box-shadow: 0 6px 20px rgba(255, 87, 34, 0.6);
    }
}

@keyframes flicker {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* NEW Badge for Recommended section */
.book-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    color: white;
    padding: 0.35rem 0.7rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
}

.book-new-badge i {
    font-size: 0.875rem;
}

/* Top 10 Rank Numbers - Netflix/Spotify-style oversized ranking */
.top10-book-item {
    display: flex;
    align-items: flex-end;
    position: relative;
}

.top10-rank-number {
    font-size: 7rem;
    font-weight: 900;
    font-style: italic;
    line-height: 0.75;
    color: rgba(255, 193, 7, 0.65);
    -webkit-text-stroke: 3px rgba(255, 152, 0, 0.85);
    text-stroke: 3px rgba(255, 152, 0, 0.85);
    user-select: none;
    pointer-events: none;
    position: relative;
    z-index: 2;
    margin-right: -1rem;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 3px 10px rgba(255, 152, 0, 0.4));
    transition: transform 0.25s ease, color 0.25s ease, filter 0.25s ease, -webkit-text-stroke-color 0.25s ease;
    flex-shrink: 0;
    font-family: 'Impact', 'Arial Black', 'Helvetica Neue', sans-serif;
    letter-spacing: -0.04em;
}

.top10-book-item:hover .top10-rank-number {
    transform: scale(1.05);
    color: rgba(255, 193, 7, 0.85);
    -webkit-text-stroke-color: var(--primary-color, #00b4ff);
    text-stroke-color: var(--primary-color, #00b4ff);
    filter: drop-shadow(0 4px 20px rgba(0, 180, 255, 0.5));
}

.top10-book-card-wrapper {
    position: relative;
    z-index: 1;
}

/* Dark mode */
body.dark-mode .top10-rank-number {
    color: rgba(255, 193, 7, 0.75);
    -webkit-text-stroke-color: rgba(255, 193, 7, 0.9);
    text-stroke-color: rgba(255, 193, 7, 0.9);
    filter: drop-shadow(0 3px 10px rgba(255, 193, 7, 0.5));
}

body.dark-mode .top10-book-item:hover .top10-rank-number {
    color: var(--primary-color, #00b4ff);
    -webkit-text-stroke-color: rgba(79, 195, 247, 0.9);
    text-stroke-color: rgba(79, 195, 247, 0.9);
    filter: drop-shadow(0 4px 24px rgba(0, 180, 255, 0.6));
}

/* Two-digit numbers need smaller font to fit */
.top10-book-item:nth-child(n+10) .top10-rank-number {
    font-size: 5.5rem;
    margin-right: -0.75rem;
}

/* Responsive scaling */
@media (max-width: 1200px) {
    .top10-rank-number {
        font-size: 6rem;
        -webkit-text-stroke-width: 2.5px;
    }
    .top10-book-item:nth-child(n+10) .top10-rank-number {
        font-size: 4.5rem;
    }
}

@media (max-width: 768px) {
    .top10-rank-number {
        font-size: 5rem;
        -webkit-text-stroke-width: 2px;
    }
    .top10-book-item:nth-child(n+10) .top10-rank-number {
        font-size: 4rem;
    }
}

@media (max-width: 480px) {
    .top10-rank-number {
        font-size: 4rem;
        -webkit-text-stroke-width: 1.5px;
        margin-right: -0.5rem;
    }
    .top10-book-item:nth-child(n+10) .top10-rank-number {
        font-size: 3.25rem;
    }
}

/* ==============================================
   CONTENT RAIL SECTIONS (Modern DESIGN)
   ============================================== */

.content-rail {
    padding: 1.25rem 0 0.75rem 0;
    background: transparent;
}

.rail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
    padding: 0 2rem 0.5rem 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.rail-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rail-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.rail-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.rail-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rail-subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0 0 0.75rem 0;
    padding: 0 2rem;
    line-height: 1.5;
}

/* Reduce spacing after carousel track */
.content-rail .streaming-carousel-container {
    margin-bottom: 0;
}

.content-rail .streaming-carousel-wrapper {
    padding-bottom: 0.5rem;
}

/* ==============================================
   RECOMMENDED FOR YOU - Purple THEME
   ============================================== */

.recommended-rail .rail-header {
    border-bottom-color: rgba(156, 39, 176, 0.15);
}

.recommended-icon {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(156, 39, 176, 0.08));
    color: #9c27b0;
}

.recommended-badge {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
    color: white;
    box-shadow: 0 3px 10px rgba(156, 39, 176, 0.3);
}

/* ==============================================
   TRENDING NOW - Orange/Red THEME
   ============================================== */

.trending-rail .rail-header {
    border-bottom-color: rgba(255, 87, 34, 0.15);
}

.trending-icon {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(255, 87, 34, 0.08));
    color: #ff5722;
}

.trending-badge {
    background: linear-gradient(135deg, #ff5722, #e64a19);
    color: white;
    box-shadow: 0 3px 10px rgba(255, 87, 34, 0.3);
}

/* ==============================================
   TOP 10 THIS WEEK - Gold/Yellow THEME
   ============================================== */

.top10-rail .rail-header {
    border-bottom-color: rgba(255, 193, 7, 0.15);
}

.top10-icon {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
    color: #ffc107;
}

.top10-badge {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #000;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

/* ==============================================
   AUDIOBOOKS - Purple/Indigo THEME
   ============================================== */

.audiobooks-rail .rail-header {
    border-bottom-color: rgba(103, 58, 183, 0.15);
}

.audiobooks-icon {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.15), rgba(103, 58, 183, 0.08));
    color: #673ab7;
}

.audiobooks-badge {
    background: linear-gradient(135deg, #673ab7, #512da8);
    color: white;
    box-shadow: 0 3px 10px rgba(103, 58, 183, 0.3);
}

/* Mobile: simplify rail section headers */
@media (max-width: 768px) {
    .rail-badge {
        display: none;
    }

    .rail-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .rail-title {
        font-size: 1.35rem;
    }

    .rail-header {
        padding: 0 1rem 0.5rem 1rem;
    }

    .rail-subtitle {
        padding: 0 1rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .rail-title {
        font-size: 1.2rem;
    }
}

/* ==============================================
   AUDIOBOOKS FEATURED SECTION (Special DESIGN)
   ============================================== */

.audiobooks-featured-section {
    margin: 2rem 2rem;
    padding: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(102, 126, 234, 0.28);
    position: relative;
}

.audiobooks-featured-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
    pointer-events: none;
}

.audiobooks-featured-container {
    /* Full-bleed like the plain rails so cards fill the band and the carousel peek clips at the band
       edge, instead of the content capping at 1400px and leaving empty colored band beside a clipped
       card on large screens. */
    max-width: none;
    margin: 0;
    position: relative;
    z-index: 1;
}

.audiobooks-featured-header {
    padding: 1.6rem 2rem 1.25rem 2rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}

.audiobooks-featured-header-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.audiobooks-featured-icon-wrapper {
    position: relative;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audiobooks-featured-icon-pulse {
    position: absolute;
    inset: -10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: pulse-wave 2s ease-out infinite;
}

@keyframes pulse-wave {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.audiobooks-featured-icon {
    font-size: 1.9rem;
    color: white;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.audiobooks-featured-text {
    flex: 1;
    min-width: 250px;
}

.audiobooks-featured-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: white;
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.audiobooks-featured-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.audiobooks-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    color: white;
    padding: 0.875rem 1.75rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.audiobooks-view-all-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.audiobooks-view-all-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.audiobooks-view-all-btn:hover i {
    transform: translateX(4px);
}

.audiobooks-featured-carousel-wrapper {
    padding: 0 0 1.75rem 0;
}

/* =============================================
   Watch featured section (Discover): shows based
   on books. Mirrors the audiobooks/read-along
   featured band with a cinematic dark-blue gradient
   (matches the .wsp- Watch surface) and a plain
   horizontal show-card rail (not a paged carousel).
   Always dark with white text, so it reads the same
   in light and dark mode.
   ============================================= */
.watch-featured-section {
    margin: 2rem 2rem;
    padding: 0;
    background: linear-gradient(135deg, #10182b 0%, #16213e 55%, #0f3460 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(15, 52, 96, 0.35);
    position: relative;
}
.watch-featured-container { max-width: none; margin: 0; position: relative; z-index: 1; }
.watch-featured-header { padding: 1.6rem 2rem 1.25rem 2rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%); }
.watch-featured-header-content { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: space-between; }
.watch-featured-icon-wrapper { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.watch-featured-icon-pulse { position: absolute; inset: -10px; background: rgba(0, 180, 255, 0.25); border-radius: 50%; animation: pulse-wave 2s ease-out infinite; }
.watch-featured-icon { font-size: 1.9rem; color: white; position: relative; z-index: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
.watch-featured-text { flex: 1; min-width: 250px; }
.watch-featured-title { font-size: 1.85rem; font-weight: 800; color: white; margin: 0 0 0.35rem 0; letter-spacing: -0.5px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.watch-featured-subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.92); margin: 0; font-weight: 500; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.watch-view-all-btn { display: inline-flex; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); color: white; padding: 0.875rem 1.75rem; border-radius: 50px; font-size: 1rem; font-weight: 700; border: 2px solid rgba(255, 255, 255, 0.28); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); cursor: pointer; transition: all 0.3s ease; }
.watch-view-all-btn:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.watch-view-all-btn i { font-size: 1.1rem; transition: transform 0.3s ease; }
.watch-view-all-btn:hover i { transform: translateX(4px); }

/* Horizontal show-card rail (plain scroller; SAS thumbnails load eagerly) */
.watch-featured-rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 2rem 1.75rem 2rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.watch-rail-card {
    flex: 0 0 auto;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: white;
    scroll-snap-align: start;
}
.watch-rail-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #0b1220;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.watch-rail-thumb-fallback { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%); }
.watch-rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch-rail-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    background: rgba(8, 12, 24, 0.28);
    transition: background 0.2s ease;
}
.watch-rail-card:hover .watch-rail-thumb { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 180, 255, 0.3); }
.watch-rail-card:hover .watch-rail-play { background: rgba(8, 12, 24, 0.12); }
.watch-rail-title { font-size: 1rem; font-weight: 700; line-height: 1.3; color: white; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.watch-rail-meta { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }

@media (max-width: 768px) {
    .watch-featured-section { margin: 1.5rem 1rem; }
    .watch-featured-header { padding: 1.25rem 1.25rem 1rem; }
    .watch-featured-rail { padding: 0 1.25rem 1.5rem; }
    .watch-rail-card { width: 180px; }
}
body.dark-mode .watch-featured-section { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }

/* Special styling for audiobook cards in this section */
.audiobooks-book-item .book-card {
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.audiobooks-book-item .book-card:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Audiobooks carousel uses the default streaming nav (clean white circle, transparent
   full-height bar) -- no NavButtonCssClass override, so the bar stays transparent rather
   than painting a tall translucent box behind the arrows. */

/* ==============================================
   READ-ALONG FEATURED SECTION (Special Design)
   Mirrors the Audiobooks featured band but in the read-along
   "Ember" orange so the two formats read as a matched pair.
   ============================================== */

.readalong-featured-section {
    margin: 2rem 2rem;
    padding: 0;
    background: linear-gradient(135deg, #FF8A00 0%, #FF5C39 100%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(255, 92, 57, 0.28);
    position: relative;
}

.readalong-featured-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
    pointer-events: none;
}

.readalong-featured-container {
    /* Full-bleed like the plain rails so cards fill the band and the carousel peek clips at the band
       edge, instead of the content capping at 1400px and leaving empty colored band beside a clipped
       card on large screens. */
    max-width: none;
    margin: 0;
    position: relative;
    z-index: 1;
}

.readalong-featured-header {
    padding: 1.6rem 2rem 1.25rem 2rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
}

.readalong-featured-header-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.readalong-featured-icon-wrapper {
    position: relative;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.readalong-featured-icon-pulse {
    position: absolute;
    inset: -10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: pulse-wave 2s ease-out infinite;
}

.readalong-featured-icon {
    position: relative;
    z-index: 1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.readalong-featured-icon svg {
    width: 1.9rem;
    height: 1.9rem;
}

.readalong-featured-text {
    flex: 1;
    min-width: 250px;
}

.readalong-featured-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: white;
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.readalong-featured-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.readalong-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    color: white;
    padding: 0.875rem 1.75rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.readalong-view-all-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.readalong-view-all-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.readalong-view-all-btn:hover i {
    transform: translateX(4px);
}

.readalong-featured-carousel-wrapper {
    padding: 0 0 1.75rem 0;
}

.readalong-book-item .book-card {
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.readalong-book-item .book-card:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Read-along carousel uses the default streaming nav (clean white circle, transparent
   full-height bar) -- no NavButtonCssClass override, so the bar stays transparent rather
   than painting a tall translucent box behind the arrows. */

/* ==============================================
   TRENDING AUTHORS SECTION
   ============================================== */

.trending-authors-section {
    padding: 3rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    margin: 2rem 0;
}

.trending-authors-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.trending-authors-header {
    margin-bottom: 2rem;
}

.trending-authors-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.trending-authors-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.trending-authors-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.trending-authors-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.trending-authors-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

.trending-authors-loading,
.trending-authors-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
}

.trending-authors-loading .loading-spinner,
.authors-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.trending-authors-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trending-author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
}

.trending-author-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.trending-rank-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
}

.trending-rank-badge.rank-1 {
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
}

.trending-rank-badge.rank-2 {
    background: linear-gradient(135deg, #c0c0c0 0%, #9e9e9e 100%);
}

.trending-rank-badge.rank-3 {
    background: linear-gradient(135deg, #cd7f32 0%, #a0522d 100%);
    color: white;
}

.trending-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid white;
}

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

.trending-author-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.5rem;
}

.trending-author-info {
    flex: 1;
    min-width: 0;
}

.trending-author-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trending-author-name:hover {
    color: #3b82f6;
}

.following-badge {
    font-size: 0.7rem;
    color: #10b981;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.trending-author-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #64748b;
}

.trending-author-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.trending-author-stats .stat-item.growth {
    color: #10b981;
}

.trending-author-stats .stat-item.growth-rate {
    color: #3b82f6;
}

.trending-author-action {
    flex-shrink: 0;
}

.follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #3b82f6;
    background: #3b82f6;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.follow-btn:hover:not(:disabled) {
    background: #2563eb;
    border-color: #2563eb;
    transform: scale(1.05);
}

.follow-btn.following {
    background: white;
    color: #3b82f6;
}

.follow-btn.following:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
}

.follow-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.follow-btn .btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ==============================================
   AUTHORS YOU MIGHT LIKE SECTION
   ============================================== */

.authors-you-might-like-section {
    padding: 3rem 0;
    background: #ffffff;
}

.authors-section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.authors-section-header {
    margin-bottom: 1rem; /* Reduced from 2rem */
}

.authors-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.authors-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.authors-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.authors-badge {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.authors-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

@media (max-width: 768px) {
    .authors-title-group {
        gap: 0.5rem;
    }

    .authors-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        border-radius: 8px;
    }

    .authors-title {
        font-size: 1.35rem;
    }

    .authors-badge {
        display: none;
    }
}

@media (max-width: 480px) {
    .authors-title {
        font-size: 1.15rem;
    }
}

.authors-loading,
.authors-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: #64748b;
}

.authors-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.5;
}

.authors-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 -2rem; /* Break out of parent container's padding */
    width: calc(100% + 4rem); /* Compensate for negative margin */
}

.authors-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 2rem 2rem 3rem 2rem; /* Add horizontal padding to track instead for card spacing */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.authors-carousel-track::-webkit-scrollbar {
    display: none;
}

.author-suggestion-card {
    flex: 0 0 300px;
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.author-suggestion-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.author-avatar-wrapper {
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e2e8f0;
    transition: border-color 0.3s ease;
}

.author-avatar:hover {
    border-color: #8b5cf6;
}

.author-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    border: 3px solid #e2e8f0;
}

.author-card-content {
    text-align: center;
    flex: 1;
}

.author-card-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    cursor: pointer;
}

.author-card-name:hover {
    color: #8b5cf6;
}

.author-reason-badge {
    margin-bottom: 0.75rem;
}

.reason-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.reason-tag.similar {
    background: #dbeafe;
    color: #1d4ed8;
}

.reason-tag.mutual {
    background: #fce7f3;
    color: #be185d;
}

.reason-tag.trending {
    background: #fef3c7;
    color: #b45309;
}

.reason-tag.genre {
    background: #d1fae5;
    color: #047857;
}

.reason-tag.read {
    background: #ede9fe;
    color: #6d28d9;
}

.reason-tag.editorial {
    background: #f1f5f9;
    color: #475569;
}

.reason-tag.default {
    background: #f1f5f9;
    color: #475569;
}

.author-card-bio {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.author-card-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.author-card-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.author-interests {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.interest-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.author-card-actions {
    display: flex;
    gap: 0.75rem;
}

.author-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.author-action-btn.primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.author-action-btn.primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transform: scale(1.03);
}

.author-action-btn.primary.following {
    background: white;
    color: #8b5cf6;
    border: 2px solid #8b5cf6;
}

.author-action-btn.secondary {
    background: #f1f5f9;
    color: #475569;
}

.author-action-btn.secondary:hover:not(:disabled) {
    background: #e2e8f0;
}

.author-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Carousel navigation for authors */
.authors-carousel-wrapper .carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    color: #1e293b;
}

.authors-carousel-wrapper .carousel-nav-btn:hover:not(:disabled) {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.authors-carousel-wrapper .carousel-nav-btn:disabled,
.authors-carousel-wrapper .carousel-nav-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

.authors-carousel-wrapper .carousel-nav-prev {
    left: 8px;
}

.authors-carousel-wrapper .carousel-nav-next {
    right: 8px;
}

/* ==============================================
   EXPLORE CATEGORIES SECTION
   ============================================== */

.explore-categories-section {
    padding: 2.5rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.explore-categories-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.explore-categories-header {
    text-align: center;
    margin-bottom: 2rem;
}

.explore-categories-title-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.explore-categories-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.explore-categories-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
}

.explore-categories-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0 0 1.5rem 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.explore-categories-badges {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.category-badge-free {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.category-badge-premium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

/* Categories Grid: compact grid of category tiles (was a tall vertical stack of huge cards) */
.categories-grid {
    display: grid;
    /* min(440px, 100%) lets a track shrink below 440px on phones narrower than that, instead of
       forcing a 440px column that overflows a viewport whose page wrapper is overflow-x: hidden
       (which would clip the category cards). */
    grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
    gap: 1.5rem;
}

/* Category Card */
.category-card {
    background: white;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.category-card:hover {
    /* No transform, no animation - completely static */
}

.category-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.category-card-title-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-card-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.category-card-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stat-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-badge-free {
    background: #d1fae5;
    color: #047857;
}

.stat-badge-premium {
    background: #fef3c7;
    color: #b45309;
}

.category-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: transparent;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-view-all-btn:hover {
    background: #3b82f6;
    color: white;
    transform: translateX(4px);
}

.category-view-all-btn i {
    transition: transform 0.3s ease;
}

.category-view-all-btn:hover i {
    transform: translateX(4px);
}

/* Category Books Grid: a compact strip of small cover thumbnails (a peek at the category) */
.category-books-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.category-cover {
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(2, 6, 23, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-cover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.20);
}

.category-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-book-item {
    min-width: 0;
}

/* Category Empty State */
.category-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: #94a3b8;
    text-align: center;
}

.category-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.category-empty-state p {
    margin: 0;
    font-size: 1rem;
}

/* Explore Categories CTA */
.explore-categories-cta {
    margin-top: 3rem;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%);
    border-radius: 24px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    text-align: center;
}

.explore-categories-cta .cta-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.explore-categories-cta .cta-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.75rem 0;
}

.explore-categories-cta .cta-description {
    font-size: 1rem;
    color: #64748b;
    margin: 0 0 2rem 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.explore-categories-cta .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.explore-categories-cta .cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

.explore-categories-cta .cta-btn i {
    font-size: 1.25rem;
}

/* Mobile Responsive */
/* No 3-column breakpoint: with a fixed Take(4) it would render 3+1 (e.g. iPad portrait at 1024px). */
@media (max-width: 992px) {
    .category-books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .explore-categories-section {
        padding: 2rem 0;
    }

    .explore-categories-container {
        padding: 0 1rem;
    }

    .explore-categories-title-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .explore-categories-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .explore-categories-title {
        font-size: 1.75rem;
    }

    .explore-categories-subtitle {
        font-size: 1rem;
    }

    .category-card {
        padding: 1.5rem;
    }

    .category-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-card-title {
        font-size: 1.25rem;
    }

    .category-view-all-btn {
        width: 100%;
        justify-content: center;
    }

    .category-books-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .explore-categories-cta {
        padding: 2rem 1.5rem;
    }

    .explore-categories-cta .cta-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .explore-categories-cta .cta-title {
        font-size: 1.25rem;
    }

    .explore-categories-cta .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .category-books-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .explore-categories-badges {
        flex-direction: column;
        align-items: center;
    }
}

/* ==============================================
   DARK MODE SUPPORT
   ============================================== */

body.dark-mode .discover-loading {
    background-color: #0f172a;
}

body.dark-mode .discover-page {
    background-color: #0f172a;
}

body.dark-mode .continue-reading-section {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

body.dark-mode .continue-reading-greeting {
    color: #e0e0e0;
}

body.dark-mode .continue-reading-subtitle {
    color: #94a3b8;
}

body.dark-mode .empty-state-title {
    color: #e0e0e0;
}

body.dark-mode .empty-state-description {
    color: #94a3b8;
}

body.dark-mode .empty-state-icon {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.15), rgba(79, 195, 247, 0.08));
    border-color: rgba(79, 195, 247, 0.3);
}

body.dark-mode .empty-state-icon i {
    color: #4fc3f7;
}

body.dark-mode .empty-state-btn-primary {
    background: #4fc3f7;
    color: #0f172a;
}

body.dark-mode .empty-state-btn-primary:hover {
    background: #29b6f6;
}

body.dark-mode .empty-state-btn-secondary {
    color: #4fc3f7;
    border-color: #4fc3f7;
}

body.dark-mode .empty-state-btn-secondary:hover {
    background: rgba(79, 195, 247, 0.15);
}

body.dark-mode .rail-title {
    color: #e0e0e0;
}

body.dark-mode .rail-subtitle {
    color: #94a3b8;
}

body.dark-mode .rail-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .recommended-rail .rail-header {
    border-bottom-color: rgba(156, 39, 176, 0.25);
}

body.dark-mode .recommended-icon {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.25), rgba(156, 39, 176, 0.15));
}

body.dark-mode .trending-rail .rail-header {
    border-bottom-color: rgba(255, 87, 34, 0.25);
}

body.dark-mode .trending-icon {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.25), rgba(255, 87, 34, 0.15));
}

body.dark-mode .top10-rail .rail-header {
    border-bottom-color: rgba(255, 193, 7, 0.25);
}

body.dark-mode .top10-icon {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.15));
}

body.dark-mode .audiobooks-rail .rail-header {
    border-bottom-color: rgba(103, 58, 183, 0.25);
}

body.dark-mode .audiobooks-icon {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.25), rgba(103, 58, 183, 0.15));
}

body.dark-mode .audiobooks-featured-section {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

body.dark-mode .audiobooks-book-item .book-card {
    background: rgba(45, 55, 72, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .audiobooks-book-item .book-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .audiobooks-view-all-btn {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .audiobooks-view-all-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

body.dark-mode .readalong-featured-section {
    background: linear-gradient(135deg, #3a2a1a 0%, #241710 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

body.dark-mode .readalong-book-item .book-card {
    background: rgba(45, 55, 72, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .readalong-book-item .book-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .readalong-view-all-btn {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .readalong-view-all-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ==============================================
   TRENDING AUTHORS & AUTHORS YOU MIGHT LIKE - DARK MODE
   ============================================== */

body.dark-mode .trending-authors-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

body.dark-mode .trending-authors-title,
body.dark-mode .authors-title {
    color: #f1f5f9;
}

body.dark-mode .trending-authors-subtitle,
body.dark-mode .authors-subtitle {
    color: #94a3b8;
}

body.dark-mode .trending-author-card,
body.dark-mode .author-suggestion-card {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .trending-author-name,
body.dark-mode .author-card-name {
    color: #f1f5f9;
}

body.dark-mode .trending-author-name:hover,
body.dark-mode .author-card-name:hover {
    color: #60a5fa;
}

body.dark-mode .authors-you-might-like-section {
    background: #0f172a;
}

body.dark-mode .authors-carousel-wrapper .carousel-nav-btn {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .authors-carousel-wrapper .carousel-nav-btn:hover:not(:disabled) {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

body.dark-mode .author-avatar-placeholder {
    border-color: #334155;
}

body.dark-mode .author-card-bio {
    color: #94a3b8;
}

body.dark-mode .author-card-stats {
    color: #94a3b8;
}

body.dark-mode .interest-tag {
    background: #334155;
    color: #cbd5e1;
}

body.dark-mode .author-action-btn.secondary {
    background: #334155;
    color: #cbd5e1;
}

body.dark-mode .author-action-btn.secondary:hover:not(:disabled) {
    background: #475569;
}

body.dark-mode .trending-author-stats {
    color: #94a3b8;
}

body.dark-mode .authors-empty {
    color: #94a3b8;
}

/* ==============================================
   EXPLORE CATEGORIES - DARK MODE
   ============================================== */

body.dark-mode .explore-categories-section {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

body.dark-mode .explore-categories-title {
    color: #f1f5f9;
}

body.dark-mode .explore-categories-subtitle {
    color: #94a3b8;
}

body.dark-mode .category-card {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .category-card-title {
    color: #f1f5f9;
}

body.dark-mode .stat-badge-free {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

body.dark-mode .stat-badge-premium {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

body.dark-mode .category-view-all-btn {
    color: #60a5fa;
    border-color: #60a5fa;
}

body.dark-mode .category-view-all-btn:hover {
    background: #60a5fa;
    color: #0f172a;
}

body.dark-mode .category-empty-state {
    color: #64748b;
}

body.dark-mode .explore-categories-cta {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.2);
}

body.dark-mode .explore-categories-cta .cta-title {
    color: #f1f5f9;
}

body.dark-mode .explore-categories-cta .cta-description {
    color: #94a3b8;
}