/*
 * Catalog pages — shared styles for courses and videos listing.
 */

.catalog-page { padding-bottom: 18px; }
.catalog-hero { position: relative; overflow: hidden; padding: 54px 0 28px; text-align: center; }
.catalog-hero::before, .catalog-hero::after { content: ""; position: absolute; pointer-events: none; }
.catalog-hero::before { inset: -90px 0 auto 0; height: 310px; background: radial-gradient(circle at 50% 58%, rgba(255,18,103,0.18), transparent 28%), radial-gradient(circle at 31% 58%, rgba(126,30,164,0.12), transparent 30%), radial-gradient(circle at 72% 62%, rgba(255,102,36,0.08), transparent 28%); }
.catalog-hero::after { left: 50%; top: 154px; width: 920px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255,35,111,0.4), transparent); box-shadow: 0 0 32px rgba(255,35,111,0.38); }
.catalog-hero .container-xl { position: relative; z-index: 1; }
.catalog-title { margin: 0; font-size: 48px; line-height: 1.05; letter-spacing: -1.5px; font-weight: 800; }
.catalog-subtitle { max-width: 690px; margin: 14px auto 0; color: var(--muted); font-size: 18px; line-height: 1.55; }

/* Search */
.catalog-search { display: grid; grid-template-columns: minmax(0, 520px) auto; justify-content: center; gap: 12px; margin-top: 24px; }
.catalog-search-field { position: relative; }
.catalog-search-field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: #7f8a9b; }
.catalog-search input { width: 100%; height: 50px; border: 1px solid #243047; border-radius: 10px; background: #0a101c; color: #fff; padding: 0 16px 0 46px; outline: none; font-size: 16px; }
.catalog-search input::placeholder { color: #717c8d; }
.catalog-search input:focus { border-color: #a52b5f; box-shadow: 0 0 0 3px rgba(255,31,109,0.08); }
.catalog-search button { height: 50px; border: 0; border-radius: 10px; padding: 0 24px; color: #fff; font-weight: 750; background: linear-gradient(90deg, #f51165, #ff6e38); box-shadow: 0 10px 24px rgba(255,31,109,0.16); cursor: pointer; }

/* Filters */
.catalog-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.filter-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 15px; border: 1px solid #354158; border-radius: 9px; background: #08101c; color: #e7eaf0; font-size: 14px; font-weight: 650; white-space: nowrap; transition: 0.2s; cursor: pointer; }
.filter-btn:hover, .filter-btn:focus-visible { border-color: #8b2b53; color: #fff; }
.filter-btn.is-active { border-color: transparent; background: linear-gradient(90deg, #f01364, #ff4e7b); color: #fff; box-shadow: 0 9px 22px rgba(255,31,109,0.18); }

/* Grid */
.catalog-section { padding: 20px 0 34px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.catalog-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #222d40; border-radius: 16px; background: linear-gradient(180deg, #0a1321, #07101b); box-shadow: 0 16px 40px rgba(0,0,0,0.19); }
.catalog-card[hidden] { display: none !important; }
.catalog-card-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #111a28; }
.catalog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.catalog-card:hover .catalog-card-media img { transform: scale(1.025); }
.catalog-level { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; background: #e81762; color: #fff; font-size: 12px; font-weight: 800; }
.catalog-level.level-green { background: #168b61; }
.catalog-level.level-purple { background: #8b3bb8; }
.catalog-level.level-orange { background: #dc7b1d; }
.catalog-level.level-blue { background: #2678cc; }
.catalog-level.level-teal { background: #1c9a9a; }
.catalog-play { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.8); border-radius: 50%; background: rgba(4,8,16,0.48); color: #fff; font-size: 13px; }
.catalog-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.catalog-card-topline { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; color: #adb5c1; font-size: 12px; }
.catalog-card-topline .category { color: #dfe3e9; font-weight: 650; }
.catalog-card h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.25px; margin: 0 0 8px; }
.catalog-card h3 a { color: inherit; }
.catalog-card h3 a:hover { color: #ff679a; }
.catalog-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #142033; }
.catalog-card-footer strong { font-size: 20px; color: #fff; }
.catalog-card p { color: #b8c0cb; font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
.catalog-rating { display: flex; align-items: center; gap: 6px; margin-top: auto; color: #ffc23d; font-size: 14px; }
.catalog-rating small { color: #8792a2; font-size: 12px; }
.catalog-price-row { display: flex; align-items: center; gap: 10px; min-height: 27px; margin: 7px 0 13px; color: #aeb7c3; font-size: 13px; }
.catalog-price-row strong { color: #ff3a74; font-size: 18px; }
.old-price { text-decoration: line-through; color: #717c8b; }
.discount { padding: 2px 7px; border-radius: 999px; background: #1aaa77; color: #eafff8; font-size: 12px; font-weight: 800; }
.catalog-card .learn-more { margin-top: auto; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b3265d; border-radius: 8px; color: #ff4f83; font-size: 14px; font-weight: 750; transition: 0.2s; }
.catalog-card .learn-more:hover { background: #1a0e19; color: #ff80a7; border-color: #f03778; }
.catalog-instructor-name { color: #8792a2; font-size: 13px; margin: 0 0 8px; }
.catalog-empty { display: none; text-align: center; color: var(--muted); padding: 50px 0 24px; font-size: 16px; }
.catalog-empty.is-visible { display: block; }

/* Pagination */
.catalog-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.catalog-pagination a { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #263147; border-radius: 8px; background: #08101c; color: #c5cbd4; font-size: 14px; }
.catalog-pagination a.is-current { border-color: #ff246e; background: #ef155e; color: #fff; }
.catalog-pagination a.next { margin-left: 6px; color: #ff5f91; border-color: #9f2d56; white-space: nowrap; }

/* Course finder CTA */
.course-finder { margin: 0 0 36px; }
.course-finder-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 28px 30px; border: 1px solid #4f1d42; border-radius: 18px; background: radial-gradient(circle at 10% 50%, rgba(255,28,105,0.18), transparent 22%), linear-gradient(90deg, #100a1b, #260926 62%, #4b0d32); }
.course-finder-icon { width: 70px; height: 70px; border: 1px solid rgba(255,48,118,0.42); border-radius: 50%; display: grid; place-items: center; color: #ff4b82; background: rgba(255,31,109,0.07); font-size: 29px; box-shadow: 0 0 30px rgba(255,31,109,0.13); }
.course-finder h2 { font-size: 26px; line-height: 1.2; margin: 0; }
.course-finder p { color: #c3c9d2; font-size: 15px; line-height: 1.5; margin: 6px 0 0; }
.course-finder .btn-gradient { min-width: 220px; }

/* Videos page hero variant */
.videos-page { padding-bottom: 16px; }
.videos-hero { position: relative; overflow: hidden; padding: 50px 0 30px; text-align: center; }
.videos-hero::before { content: ""; position: absolute; inset: -60px 0 auto; height: 330px; background: radial-gradient(circle at 50% 48%, rgba(255,22,103,0.15), transparent 24%), radial-gradient(circle at 72% 45%, rgba(255,110,52,0.07), transparent 26%), linear-gradient(180deg, rgba(13,8,27,0.55), transparent); pointer-events: none; }
.videos-hero .container-xl { position: relative; z-index: 1; }
.videos-title { margin: 0; font-size: 48px; line-height: 1.05; letter-spacing: -1.5px; font-weight: 800; }
.videos-subtitle { max-width: 680px; margin: 14px auto 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.videos-library { padding: 20px 0 34px; }

/* Video library cards */
.video-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.video-library-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #222d40; border-radius: 16px; background: linear-gradient(180deg, #0a1321, #07101b); box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
.video-library-media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: #111a28; color: #fff; }
.video-library-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.video-library-card:hover .video-library-media img { transform: scale(1.025); }
.video-library-media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(2,7,14,0.78)); }
.video-badges { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; gap: 7px; }
.video-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.video-badge.free { background: #2eb978; color: #fff; }
.video-badge.starter { background: #ef346e; color: #fff; }
.video-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; display: grid; place-items: center; padding-left: 3px; border: 1px solid rgba(255,255,255,0.88); border-radius: 50%; background: rgba(3,8,16,0.58); font-size: 18px; box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.video-duration { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 5px 8px; border-radius: 7px; background: rgba(0,0,0,0.76); font-size: 12px; font-weight: 750; }
.video-library-body { display: flex; flex: 1; flex-direction: column; padding: 19px; }
.video-library-body h3 { margin: 0 0 9px; font-size: 22px; line-height: 1.23; letter-spacing: -0.3px; }
.video-library-body h3 a { color: inherit; }
.video-library-body h3 a:hover { color: #ff679a; }
.video-compact-meta { color: var(--muted); font-size: 14px; margin: 0; }
.video-library-body p { margin: 0 0 15px; color: #b8c0cb; font-size: 15.5px; line-height: 1.55; }
.video-meta { display: flex; align-items: center; gap: 12px; margin-top: auto; margin-bottom: 14px; color: #9da7b5; font-size: 13px; }
.video-meta strong { margin-left: auto; color: #ff4a7f; font-size: 18px; }
.watch-link { min-height: 41px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b3265d; border-radius: 8px; color: #ff4f83; font-size: 14px; font-weight: 750; transition: 0.2s; }
.watch-link:hover { background: #1a0e19; color: #ff80a7; border-color: #f03778; }

/* ── Video detail page ───────────────────────────────────── */
.video-locked-banner { position: relative; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, #0a1324, #0f0820); border: 1px solid var(--line); margin-bottom: 28px; aspect-ratio: 16/9; }
.video-locked-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-locked-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.55); }
.video-locked-inner { padding: 56px 28px; text-align: center; }
.video-locked-icon { font-size: 48px; }
.video-locked-inner h3 { font-size: 24px; margin: 0 0 10px; }
.video-locked-inner p { color: var(--muted); margin: 0 0 20px; max-width: 400px; margin-left: auto; margin-right: auto; }
.video-player-wrapper { margin-bottom: 28px; border-radius: var(--radius-md); overflow: hidden; }
.video-player-wrapper iframe { display: block; width: 100%; }
.video-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.video-detail-main h1 { font-size: 36px; line-height: 1.15; margin: 0 0 16px; }
.video-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.video-detail-sidebar { display: flex; flex-direction: column; gap: 18px; }
.video-detail-sidebar h4 { font-size: 16px; margin: 0 0 14px; }
.instructor-mini { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.instructor-mini img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.instructor-mini strong { display: block; font-size: 15px; }
.instructor-mini small { display: block; margin-top: 2px; }
/* ── Video purchase card ──────────────────────────────────── */
.video-purchase-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
}

.video-purchase-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.video-purchase-label {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 16px;
}

.video-purchase-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

/* ── Content access plan cards ───────────────────────────── */
.access-plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.access-plan-card {
    position: relative;
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #08111f;
}
.access-plan-card.is-recommended {
    border-color: #ff3c7f;
    box-shadow: 0 0 0 1px rgba(255, 60, 127, 0.2), 0 20px 50px rgba(255, 31, 109, 0.12);
}
.access-recommended {
    position: absolute;
    right: 14px;
    top: 14px;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 8px;
    border-radius: 999px;
    background: #ff1f6d;
    color: #fff;
}
.access-plan-card h4 { font-size: 21px; margin: 0 0 8px; }
.access-plan-price {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 14px;
}
.access-plan-price span {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
}
.access-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.access-plan-features li {
    margin: 8px 0;
    font-size: 14px;
    color: #c5cbd3;
}
.access-plan-features li::before { content: none; }
.access-plan-cta {
    width: 100%;
    text-align: center;
}
.access-individual {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.access-individual p { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.access-individual-price {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 12px;
}
.access-owned { display: flex; align-items: center; gap: 12px; }
.access-free-guest p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.access-login-hint { color: var(--muted); font-size: 14px; margin: 0; text-align: center; }
.access-login-link { color: var(--pink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.access-membership { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.access-membership .section-kicker { margin: 0; }
.access-membership .btn-gradient { width: 100%; }
.access-membership .text-action { font-size: 13px; }
.access-starting-price { font-size: 15px; color: var(--muted); margin: 0; }
.access-starting-price strong { color: var(--text); font-size: 20px; }

/* ── Checkout page ─────────────────────────────────────── */
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 900px; margin: 0 auto; }
.checkout-plan-name { font-size: 28px; margin: 0 0 8px; }
.checkout-plan-desc { color: var(--muted); font-size: 15px; margin: 0 0 20px; line-height: 1.5; }
.checkout-features { list-style: none; padding: 0; margin: 0 0 24px; }
.checkout-features li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.checkout-features li:last-child { border-bottom: 0; }
.checkout-features li small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.checkout-price-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--line); }
.checkout-price { font-size: 28px; font-weight: 800; }

@media (max-width: 767.98px) {
    .access-plan-cards { grid-template-columns: 1fr; }
    .checkout-grid { grid-template-columns: 1fr; }
}

.video-purchase-divider {
    color: var(--muted);
    font-size: 13px;
    margin: 12px 0;
    position: relative;
}

.video-purchase-divider::before,
.video-purchase-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--line);
}

.video-purchase-divider::before { left: 0; }
.video-purchase-divider::after { right: 0; }

.video-locked-actions { margin-bottom: 8px; }
.video-locked-plan-btn { margin-top: 8px; }

.video-plan-link {
    display: block;
    padding: 10px 14px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.video-plan-link:hover {
    border-color: var(--pink);
    background: rgba(255, 93, 147, 0.06);
}

.related-video-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.related-video-item:last-child { border-bottom: 0; padding-bottom: 0; }
.related-video-item a { color: var(--text); font-weight: 600; font-size: 15px; }
.related-video-item a:hover { color: #ff5d93; }
.related-video-item small { display: block; margin-top: 3px; }
.related-videos-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 991.98px) { .related-videos-carousel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .related-videos-carousel { grid-template-columns: 1fr; } }

/* ── Course detail page ──────────────────────────────────── */
.course-detail-hero { text-align: center; padding: 20px 0 30px; }
.course-detail-hero h1 { font-size: 42px; line-height: 1.1; margin: 0 0 12px; max-width: 800px; margin-left: auto; margin-right: auto; }
.course-detail-hero > p { color: var(--muted); font-size: 18px; max-width: 680px; margin: 0 auto; }
.course-detail-hero-img { width: 100%; border-radius: var(--radius-md); margin-bottom: 24px; }
.course-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.course-detail-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
.course-sidebar-card { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #08111f; text-align: center; }
.course-sidebar-card .catalog-level { position: static; display: inline-flex; align-items: center; margin-bottom: 12px; }
.course-sidebar-card .course-meta-list { list-style: none; padding: 0; margin: 14px 0; text-align: left; }
.course-sidebar-card .course-meta-list li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; justify-content: space-between; }
.course-sidebar-card .course-meta-list li:last-child { border-bottom: 0; }
.course-sidebar-card .course-meta-list li strong { color: var(--text); }
.curriculum-section { margin-top: 36px; }
.curriculum-section h2 { font-size: 28px; margin: 0 0 18px; }
.module-block { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; background: #08111f; overflow: hidden; }
.module-header { padding: 16px 18px; font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--line); }
.lesson-row { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid rgba(26,38,56,0.5); font-size: 15px; }
.lesson-row:last-child { border-bottom: 0; }
.lesson-row .lesson-icon { color: var(--muted); font-size: 14px; }
.lesson-row .lesson-icon.preview { color: #2eb978; }
.lesson-row .lesson-title { flex: 1; }
.lesson-row .lesson-link { color: var(--text); text-decoration: none; }
.lesson-row .lesson-link:hover { color: var(--pink); }
.lesson-row .lesson-duration { color: var(--muted); font-size: 13px; }
.lesson-row .badge-preview { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #2eb978; color: #fff; }
.reviews-section { margin-top: 36px; }
.reviews-section h2 { font-size: 28px; margin: 0 0 18px; }
.reviews-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.review-card { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #08111f; margin-bottom: 14px; }
.review-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.review-stars { color: #ffc13d; font-size: 16px; letter-spacing: 2px; margin-bottom: 10px; }
.review-text { color: var(--muted); font-size: 15px; line-height: 1.6; }
.related-courses { margin-top: 36px; }
.related-courses h2 { font-size: 28px; margin: 0 0 18px; }

/* Responsive */
@media (max-width: 991.98px) {
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .course-finder-inner { grid-template-columns: auto 1fr; }
    .course-finder .btn-gradient { grid-column: 2; justify-self: start; }
    .catalog-title, .videos-title { font-size: 42px; }
    .video-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .video-detail-grid, .course-detail-grid { grid-template-columns: 1fr; }
    .course-detail-sidebar { position: static; }
}

@media (max-width: 767.98px) {
    .catalog-hero, .videos-hero { padding-top: 34px; }
    .catalog-search { grid-template-columns: 1fr; }
    .catalog-search button { width: 100%; }
    .catalog-filters { justify-content: flex-start; }
    .filter-btn { min-height: 44px; }
    .catalog-grid, .video-library-grid { grid-template-columns: 1fr; }
    .catalog-card-media { aspect-ratio: 16/9; }
    .video-library-media { aspect-ratio: 16/9; }
    .course-finder-inner { grid-template-columns: 1fr; }
    .course-finder .btn-gradient { grid-column: auto; justify-self: stretch; }
    .course-finder-icon { width: 60px; height: 60px; }
    .catalog-title, .videos-title { font-size: 38px; }
    .catalog-subtitle, .videos-subtitle { font-size: 16px; }
}

/* ── Content Intensity Badges ──────────────────────────── */
.intensity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
/* ── Content → Action Cards ─────────────────────────────── */
.content-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.content-action-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.content-action-card:hover {
    border-color: var(--accent, #E53E3E);
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.15);
    text-decoration: none;
    color: inherit;
}
.content-action-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}
.content-action-card strong {
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.content-action-card small {
    font-size: 0.8rem;
    color: var(--text-muted, #6c757d);
}

/* ── Explore Page ───────────────────────────────────────── */
.explore-mood-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.explore-mood-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: border-color 0.2s;
}
.explore-mood-card:hover {
    border-color: var(--accent, #E53E3E);
    text-decoration: none;
    color: inherit;
}
.explore-mood-emoji {
    font-size: 2rem;
    margin-bottom: 8px;
}

.intensity-educational { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.intensity-personal { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.intensity-playful { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.intensity-sexy { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.intensity-intimate { background: rgba(168, 85, 247, 0.15); color: #a855f7; }