:root {
    /* Base brand colors */
    --color-magenta: #eb008b;
    --color-purple: #4b2679;
    --color-blue: #125b9a;
    --color-primary: #eb008b;
    --color-secondary: #4b2679;

    /* Light mode (default) */
    --color-light: #ffffff;
    --color-bg: #f6f6f8;
    --color-bg-elevated: #ffffff;
    --color-bg-subtle: #f0f0f5;
    --color-dark: #1e1a2b;
    --color-text: #1e1a2b;
    --color-text-muted: #71717a;
    --color-text-subtle: #94a3b8;
    --color-text-faint: #64748b;
    --color-grey: #f0f0f5;
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-strong: rgba(0, 0, 0, 0.15);
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-card-bg: #ffffff;
    --color-input-bg: #ffffff;
    --color-header-bg: #ffffff;

    /* Semi-transparent brand colors for shadows/glows */
    --color-magenta-glow: rgba(235, 0, 139, 0.1);
    --color-magenta-shadow: rgba(203, 47, 167, 0.3);
    --color-purple-glow: rgba(75, 38, 121, 0.08);
    --color-purple-shadow: rgba(75, 38, 121, 0.15);
    --color-dark-shadow-subtle: rgba(30, 26, 43, 0.05);
    --color-dark-shadow-light: rgba(30, 26, 43, 0.08);
    --color-dark-shadow: rgba(30, 26, 43, 0.1);
    --color-dark-shadow-medium: rgba(30, 26, 43, 0.12);
    --color-dark-shadow-strong: rgba(30, 26, 43, 0.15);

    /* Border radius - consistent rounding */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 999px;

    /* Shadows - reusable shadow patterns */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 20px var(--color-dark-shadow-subtle);
    --shadow-lg: 0 10px 30px var(--color-dark-shadow-light);
    --shadow-xl: 0 20px 40px var(--color-shadow);
    --shadow-card: 0 10px 30px var(--color-dark-shadow);
    --shadow-card-hover: 0 15px 40px var(--color-dark-shadow-medium);
    --shadow-btn-hover: 0 12px 24px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 3px var(--color-magenta-glow);
    --shadow-purple: 0 20px 60px var(--color-purple-shadow);

    /* Transitions - consistent timing */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Font sizes - commonly repeated */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 0.9rem;
    --text-lg: 1rem;
}

/* Dark mode - neutral grays with purple/blue accents */
[data-theme="dark"] {
    --color-light: #f4f4f5;
    --color-bg: #1c1c21;
    --color-bg-elevated: #232329;
    --color-bg-subtle: #2a2a31;
    --color-dark: #f4f4f5;
    --color-text: #e4e4e7;
    --color-text-muted: #a1a1aa;
    --color-text-subtle: #71717a;
    --color-text-faint: #52525b;
    --color-grey: #2e2e33;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.15);
    --color-shadow: rgba(0, 0, 0, 0.5);
    --color-card-bg: #232329;
    --color-input-bg: #1c1c21;
    --color-header-bg: #18181b;

    /* Adjust brand colors for dark mode */
    --color-magenta: #f472b6;
    --color-purple: #a78bfa;
    --color-primary: #f472b6;
    --color-secondary: #a78bfa;

    /* Dark mode shadows */
    --color-magenta-glow: rgba(244, 114, 182, 0.15);
    --color-purple-glow: rgba(167, 139, 250, 0.1);
    --color-dark-shadow-subtle: rgba(0, 0, 0, 0.2);
    --color-dark-shadow-light: rgba(0, 0, 0, 0.25);
    --color-dark-shadow: rgba(0, 0, 0, 0.3);
    --color-dark-shadow-medium: rgba(0, 0, 0, 0.35);
    --color-dark-shadow-strong: rgba(0, 0, 0, 0.4);
}

/*
 * Note: Light mode is always the default.
 * Dark mode only activates when explicitly set via data-theme="dark"
 * We don't auto-follow system preference to keep light mode as default.
 */
* {
    box-sizing: border-box;
}
html {
    /* Prevent layout shift from scrollbar appearing/disappearing */
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Account for fixed header when scrolling to anchors */
}
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    max-width: 100%;
    display: block;
}
.container {
    width: min(1200px, 90vw);
    margin: 0 auto;
}
.narrow {
    max-width: 720px;
}
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    background: var(--color-magenta);
    color: #fff;
}
.site-header {
    background: var(--color-header-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
}

/* Study Sub-Navigation & Section Sub-Navigation */
.study-subnav,
.section-subnav {
    background: #f8fafc;
    border-top: 1px solid #e4e4e7;
}

.study-subnav-inner,
.section-subnav-inner {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.study-subnav-inner::-webkit-scrollbar,
.section-subnav-inner::-webkit-scrollbar {
    display: none;
}

.study-subnav-item,
.section-subnav-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.study-subnav-item:hover,
.section-subnav-item:hover {
    background: #e4e4e7;
    color: var(--color-dark);
}

.study-subnav-item.active {
    background: var(--color-purple);
    color: #fff;
}

.section-subnav-item.active {
    background: var(--color-magenta);
    color: #fff;
}

.study-subnav-item svg,
.section-subnav-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.study-subnav-item.active svg,
.section-subnav-item.active svg {
    opacity: 1;
}

/* Auth buttons in study subnav */
.study-subnav-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.study-subnav-item.login {
    color: var(--color-text-muted);
}

.study-subnav-item.register {
    background: var(--color-primary);
    color: #fff;
}

.study-subnav-item.register:hover,
.section-subnav-item.register:hover {
    background: var(--color-magenta);
    color: #fff;
}

.section-subnav-item.login {
    color: var(--color-text-muted);
}

.section-subnav-item.register {
    background: var(--color-primary);
    color: #fff;
}

@media (max-width: 768px) {
    .study-subnav-inner,
    .section-subnav-inner {
        padding: 0.375rem 0;
        gap: 0.125rem;
    }

    .study-subnav-item,
    .section-subnav-item {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    .study-subnav-item span,
    .section-subnav-item span {
        display: none;
    }

    .study-subnav-item svg,
    .section-subnav-item svg {
        width: 18px;
        height: 18px;
    }

    /* Keep auth button text visible on mobile */
    .study-subnav-auth .study-subnav-item span,
    .study-subnav-auth .section-subnav-item span {
        display: inline;
    }

    .study-subnav-auth {
        gap: 0.25rem;
    }
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 1rem;
}
.logo {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Fixed dimensions to prevent layout shift when switching logos */
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
}
.logo img {
    width: 200px;
    height: auto;
    max-height: 50px;
    object-fit: contain;
}
.logo-dark {
    display: none;
}
[data-theme="dark"] .logo-light {
    display: none;
}
[data-theme="dark"] .logo-dark {
    display: block;
}
.primary-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.primary-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.35rem 0.4rem;
    position: relative;
}
.primary-nav a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.8rem;
    height: 3px;
    background: var(--color-magenta);
}
.nav-link--cta {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    background: var(--color-magenta);
    color: #fff;
}
.nav-link--ghost {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-dark);
}
.nav-toggle {
    display: none;
}
.nav-toggle-label {
    display: none;
}
.hero {
    background: linear-gradient(120deg, #431657, #cb2fa7);
    color: #fff;
    padding: 3rem 0 3rem;
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background: url('/assets/imgs/gallery/alive-church-worship-congregation.jpg') center/cover no-repeat;
}
.hero-content {
    position: relative;
    z-index: 1;
}
.hero .hero-tag {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(3.5rem, 12vw, 7rem);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.hero .hero-dead-church {
    margin-bottom: 0.75rem;
}

.hero .hero-dead-church a {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--transition-fast);
}

.hero .hero-dead-church a:hover {
    opacity: 1;
}

.hero h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin: 0 0 0.75rem;
    font-weight: 600;
}
.hero p {
    max-width: 600px;
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
}
.hero-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.hero-info-card {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    backdrop-filter: blur(10px);
}
.hero-info-card .info-icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.hero-info-card .info-content {
    flex: 1;
}
.hero-info-card strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.hero-info-card p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.95;
}
.text-link-light {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.text-link-light:hover {
    opacity: 0.8;
}
.hero-dead-church-link {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

.hero-dead-church-link a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--transition-fast);
}

.hero-dead-church-link a:hover {
    opacity: 1;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}
.hero-details {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    gap: 0.5rem;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}
.btn-primary {
    background: var(--color-magenta);
    color: #fff;
}
.btn-secondary {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-dark);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Dark mode - white version for dark backgrounds */
[data-theme="dark"] .btn-secondary,
.hero .btn-secondary,
.watch .btn-secondary,
.site-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-outline {
    border: 1px solid var(--color-dark);
}
a.btn-link {
    display: block;
    font-weight: bold;
    padding: 10px 0;
    text-transform: uppercase;
}
a.btn-link::before {
    content: '\2192';
}
main section {
    padding: 4.5rem 0;
}
.about,
.next-steps,
.content-section {
    background: var(--color-card-bg);
}
.content-section.alt {
    background: var(--color-grey);
}
.split {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}
.card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: 0 20px 40px var(--color-shadow);
}
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.8rem;
}
.info-list strong {
    display: inline-block;
    min-width: 130px;
}
.eyebrow {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color:aquamarine;
    margin-bottom: 0.5rem;
}
.eyebrow.light {
    color:cadetblue !important;
}
.section-heading {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    padding: 1rem 0 0;
}
.stat {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-magenta);
    margin: 0;
}
.stat-label {
    margin: 0;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}
.card-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ministries {
    background: linear-gradient(120deg, #2b63b5, #451a73);
    color: #fff;
}
.ministry-card,
.step-card,
.event-card,
.sermon-card,
.profile-card {
    border-radius: var(--radius-xl);
    padding: 1.8rem;
    border: 1px solid rgba(30, 26, 43, 0.08);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-md);
}
.ministries .ministry-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.center-link {
    text-align: center;
    margin-top: 2.5rem;
}
.sermon-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sermon-meta {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-blue);
}

/* Homepage Sermon Grid */
.sermon-grid-home {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .sermon-grid-home {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .sermon-grid-home {
        grid-template-columns: 1fr;
    }
}

/* Netflix-style Sermon Card */
.sermon-card-netflix {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    text-decoration: none;
    color: inherit;
    display: block;
}
.sermon-card-netflix:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
}
.card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-bg-subtle);
}
.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.sermon-card-netflix:hover .card-thumb img {
    transform: scale(1.08);
}
.thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 100%);
}
.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.sermon-card-netflix:hover .card-overlay {
    opacity: 1;
}
.play-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    color: #000;
    transform: scale(0.8);
    transition: transform var(--transition-fast);
}
.play-btn svg {
    width: 20px;
    height: 20px;
    margin-left: 3px;
}
.sermon-card-netflix:hover .play-btn {
    transform: scale(1);
}
.card-thumb .duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-xs);
}
.card-info {
    padding: 1rem;
}
.card-info h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-info .meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0;
}
.card-info .series-tag {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.event-card {
    background: var(--color-card-bg);
}
.event-date {
    font-weight: 600;
    color: var(--color-magenta);
    margin-bottom: 0.5rem;
}
.text-link {
    font-weight: 600;
    color: var(--color-blue);
}
.site-footer {
    background: #120c1c;
    color: #fff;
    padding: 2rem 0 2rem;
}
.footer-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.footer-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.footer-title img {
    max-width:80%;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover {
    color: var(--color-magenta);
}
.footer-meta {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.85rem;
    opacity: 0.75;
}
.page-hero {
    background: linear-gradient(110deg, #431657, #2b63b5);
    color: #fff;
    text-align: center;
    padding: 5rem 0;
}
.content-section ul {
    padding-left: 1.2rem;
}
.profile-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.form-card {
    display: grid;
    gap: 1rem;
}
.form-card label {
    display: grid;
    gap: 0.3rem;
    font-size: 0.9rem;
}
.form-card label .required {
    color: var(--color-magenta);
}
.form-card label .optional {
    color: #9ca3af;
    font-weight: 400;
}

/* Contact Page Styles */
.contact-info-cards {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.contact-info-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.contact-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
    border-radius: var(--radius-md);
    color: white;
}

.contact-details h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    color: var(--color-dark);
}

.contact-details p {
    margin: 0;
    color: #52525b;
    line-height: 1.5;
}

.contact-details a {
    color: var(--color-magenta);
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline;
}

.contact-note {
    font-size: 0.85rem;
    color: #9ca3af !important;
    margin-top: 0.25rem;
}

.social-connect {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.social-connect h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--color-dark);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-grey);
    color: #52525b;
    transition: all 0.2s;
}

.social-link:hover {
    background: var(--color-magenta);
    color: white;
    transform: translateY(-2px);
}
.notice {
    border-radius: var(--radius-lg);
    padding: 0.9rem 1rem;
    font-weight: 600;
}
.notice-success {
    background: rgba(18, 91, 154, 0.1);
    color: var(--color-blue);
}
.notice-error {
    background: rgba(255, 20, 147, 0.15);
    color: var(--color-magenta);
}
input,
select,
textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--color-border-strong);
    background: var(--color-input-bg);
    color: var(--color-text);
    font: inherit;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
textarea {
    resize: vertical;
}
.map-placeholder {
    height: 280px;
    border-radius: var(--radius-xl);
    background: rgba(18, 91, 154, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.photo-gallery {
    background: var(--color-grey);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.gallery-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.gallery-img:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(30, 26, 43, 0.15);
}

/* New CTA Card Section */
.new-here-cta {
    padding: 4.5rem 0;
    background: var(--color-grey);
}
.cta-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    align-items: center;
    background: linear-gradient(135deg, #431657, #cb2fa7);
    border-radius: var(--radius-2xl);
    padding: 3rem;
    color: #fff;
    box-shadow: 0 20px 60px rgba(203, 47, 167, 0.3);
}
.cta-content h2 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.cta-content p {
    margin: 0 0 1.5rem;
    opacity: 0.95;
}
.cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Featured Sermon Section */
.sermon-feature {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}
.video-player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto 2rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(75, 38, 121, 0.2);
}
.video-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
}
.sermon-info {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.sermon-info h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

/* Weekend Preview Section */
.weekend-preview {
    padding: 4.5rem 0;
    background: var(--color-grey);
}
.weekend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.weekend-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.weekend-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
.weekend-card .event-time {
    display: inline-block;
    background: rgba(255, 20, 147, 0.1);
    color: var(--color-magenta);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.weekend-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}
.weekend-card p {
    margin: 0 0 1rem;
}

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, #2b63b5, #451a73);
    padding: 3rem 0;
    margin: 0;
}
.newsletter-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: center;
    color: #fff;
}
.newsletter-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
}
.newsletter-card p {
    margin: 0;
    opacity: 0.9;
}
.newsletter-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.newsletter-input {
    flex: 1;
    min-width: 250px;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-full);
    border: none;
    font: inherit;
}
.newsletter-form .btn {
    white-space: nowrap;
}

/* Newsletter Messages */
.newsletter-card .notice {
    margin-bottom: 1rem;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-lg);
    font-weight: 500;
}
.notice-success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.notice-error {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-base);
}
.social-link span {
    font-size: 0;
}
.social-link:hover {
    background: var(--color-magenta);
    border-color: var(--color-magenta);
    transform: translateY(-2px);
}

/* Timeline Component */
.what-to-expect {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}
.timeline {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-magenta);
    opacity: 0.3;
}
.timeline-item {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.timeline-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    background: var(--color-card-bg);
    border: 3px solid var(--color-magenta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.timeline-content h3 {
    margin: 0 0 0.5rem;
    color: var(--color-purple);
}
.timeline-content p {
    margin: 0;
}

/* FAQ Section */
.faq-section {
    padding: 4.5rem 0;
    background: var(--color-grey);
}
.faq-list {
    display: grid;
    gap: 1rem;
}
.faq-item {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(30, 26, 43, 0.06);
    cursor: pointer;
    transition: box-shadow 200ms ease;
}
.faq-item:hover {
    box-shadow: 0 8px 20px rgba(30, 26, 43, 0.1);
}
.faq-item summary {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-purple);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--color-magenta);
    flex-shrink: 0;
    margin-left: 1rem;
}
.faq-item[open] summary::after {
    content: '−';
}
.faq-item p {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* Location Section */
.location-section {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}
.location-address {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-purple);
    margin: 0 0 1.5rem;
}
.location-info {
    margin: 1.5rem 0;
}
.location-info p {
    margin: 0 0 1rem;
}
.map-embed iframe {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

/* Events Page */
.events-calendar {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}

/* Event Controls - Search & Month Picker */
.event-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.event-search {
    flex: 1;
    max-width: 400px;
}
.event-search input {
    width: 100%;
    padding: 0.75rem 1.25rem;
    border: 1px solid rgba(30, 26, 43, 0.15);
    border-radius: var(--radius-full);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.event-search input:focus {
    outline: none;
    border-color: var(--color-magenta);
    box-shadow: var(--shadow-focus);
}
.month-picker {
    flex: 0 0 auto;
}
.month-picker select {
    padding: 0.75rem 2.5rem 0.75rem 1.25rem;
    border: 1px solid rgba(30, 26, 43, 0.15);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: var(--color-card-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231e1a2b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--color-dark);
}
.month-picker select:focus {
    outline: none;
    border-color: var(--color-magenta);
    box-shadow: var(--shadow-focus);
}
.month-picker select:hover {
    border-color: rgba(30, 26, 43, 0.3);
}

/* Category Filters */
.event-filters {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}
.filter-btn {
    background: none;
    border: 1px solid var(--color-dark);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-full);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}
.filter-btn:hover {
    background: rgba(30, 26, 43, 0.05);
}
.filter-btn.active {
    background: var(--color-magenta);
    border-color: var(--color-magenta);
    color: #fff;
}
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}
.event-card-detailed {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.event-card-detailed:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
.event-card-detailed.hidden {
    display: none;
}
.event-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.event-content {
    padding: 1.5rem;
}
.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    gap: 0.5rem;
}
.event-category {
    display: inline-block;
    background: rgba(18, 91, 154, 0.1);
    color: var(--color-blue);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.event-recurring-badge {
    display: inline-block;
    background: rgba(255, 20, 147, 0.1);
    color: var(--color-magenta);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.event-date-badge {
    font-weight: 600;
    color: var(--color-magenta);
    font-size: 0.9rem;
}
.event-details {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
}
.event-details p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}
.event-details strong {
    color: var(--color-purple);
}

/* Load More Section */
.load-more-container {
    margin-top: 3rem;
    text-align: center;
}
.load-more-container .btn {
    margin-bottom: 1rem;
}
.events-count {
    color: rgba(30, 26, 43, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
}
.events-count span {
    font-weight: 700;
    color: var(--color-magenta);
}

/* Connect Page - Tab Navigation */
.connect-section {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}
.tab-nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    border-bottom: 2px solid rgba(0,0,0,0.08);
}
.tab-btn {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    color: var(--color-dark);
    opacity: 0.6;
    transition: opacity 200ms;
}
.tab-btn:hover {
    opacity: 0.8;
}
.tab-btn.active {
    opacity: 1;
}
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-magenta);
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}
.connect-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base);
}
.connect-card:hover {
    transform: translateY(-4px);
}
.connect-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.connect-card > div {
    padding: 1.5rem;
}
.connect-card h3 {
    margin: 0 0 0.75rem;
}
.connect-card p {
    margin: 0 0 1rem;
}
.card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}
.card-meta span {
    display: block;
}

/* Serve Opportunities Cards */
.serve-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}
.serve-card h3 {
    margin: 0 0 0.75rem;
    color: var(--color-purple);
}
.serve-card .commitment {
    display: inline-block;
    background: rgba(255, 20, 147, 0.1);
    color: var(--color-magenta);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.serve-card .areas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}
.serve-card .area-tag {
    background: var(--color-grey);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
}

/* Live Stream Section */
.live-stream-section {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 20, 147, 0.15);
    color: var(--color-magenta);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.live-dot {
    width: 8px;
    height: 8px;
    background: var(--color-magenta);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.live-player {
    border: 3px solid var(--color-magenta);
}
.live-chat-cta {
    text-align: center;
    max-width: 600px;
    margin: 2rem auto 0;
    padding: 2rem;
    background: var(--color-grey);
    border-radius: var(--radius-xl);
}
.live-chat-cta h3 {
    margin: 0 0 0.5rem;
}
.live-chat-cta p {
    margin: 0 0 1.5rem;
}
.next-live-info {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem 2rem;
    background: var(--color-grey);
    border-radius: var(--radius-2xl);
}
.next-live-info h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}
.next-live-time {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-magenta);
    margin: 1rem 0;
}
.next-live-info p {
    margin: 0 0 1.5rem;
}

/* Sermon Archive */
.sermon-archive {
    padding: 4.5rem 0;
    background: var(--color-grey);
}
.series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}
.series-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base);
}
.series-card:hover {
    transform: translateY(-4px);
}
.series-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.series-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.series-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 1rem;
    color: #fff;
}
.sermon-count {
    font-size: 0.9rem;
    font-weight: 600;
}
.series-card > h3 {
    padding: 1.5rem 1.5rem 0.5rem;
    margin: 0;
}
.series-meta {
    padding: 0 1.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-blue);
    font-weight: 600;
}
.series-card > p {
    padding: 0.5rem 1.5rem;
    margin: 0;
}
.series-card > a {
    display: block;
    padding: 0 1.5rem 1.5rem;
}

/* Podcast Section */
.podcast-section {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}
.podcast-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.podcast-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--color-card-bg);
    border: 1px solid rgba(30, 26, 43, 0.2);
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all var(--transition-base);
}
.podcast-btn:hover {
    background: var(--color-grey);
    transform: translateX(4px);
}
.podcast-btn img {
    width: 24px;
    height: 24px;
}

/* ================================
   GIVING PAGE STYLES
   ================================ */

/* Giving Form Section */
.giving-form-section {
    padding: 4.5rem 0;
    background: var(--color-grey);
}

.giving-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-purple);
    max-width: 600px;
    margin: 0 auto;
}

.giving-card h2 {
    margin-bottom: 0.5rem;
}

.form-intro {
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

/* Stripe Form */
.stripe-form .form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(30, 26, 43, 0.2);
    border-radius: var(--radius-md);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: all var(--transition-base);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-magenta);
    box-shadow: var(--shadow-focus);
}

/* Amount Buttons */
.amount-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.amount-btn {
    padding: 0.85rem 1rem;
    background: var(--color-card-bg);
    border: 2px solid rgba(30, 26, 43, 0.2);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: all var(--transition-base);
}

.amount-btn:hover {
    border-color: var(--color-magenta);
    background: rgba(255, 20, 147, 0.05);
}

.amount-btn.active {
    background: var(--color-magenta);
    color: #fff;
    border-color: var(--color-magenta);
}

/* Custom Amount Input */
#custom-amount-group {
    display: block;
}

.input-with-icon {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--color-text-light);
}

.amount-input {
    padding-left: 2.5rem;
}

/* Checkbox Group (Gift Aid) */
.checkbox-group {
    background: var(--color-grey);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.checkbox-text {
    flex: 1;
    font-size: 0.95rem;
}

.checkbox-text small {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-text-light);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Stripe Card Element */
.stripe-card-element {
    padding: 0.85rem 1rem;
    border: 1px solid rgba(30, 26, 43, 0.2);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    transition: all var(--transition-base);
}

.stripe-card-element:focus-within {
    border-color: var(--color-magenta);
    box-shadow: var(--shadow-focus);
}

.form-error {
    color: #EF4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Submit Button */
.btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner.hidden {
    display: none;
}

#button-text.hidden {
    display: none;
}

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

/* Stripe Badge */
.stripe-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(30, 26, 43, 0.1);
    color: var(--color-text-light);
    font-size: 0.875rem;
}

.security-note {
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Giving Methods Grid */
.giving-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.giving-method-card {
    background: var(--color-card-bg);
    padding: 2rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px var(--color-purple-glow);
    transition: all var(--transition-base);
}

.giving-method-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--color-purple-shadow);
}

.method-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.giving-method-card h3 {
    margin-bottom: 0.5rem;
}

.giving-method-card > p {
    color: var(--color-text-light);
    margin-bottom: 1.25rem;
}

.method-details {
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 26, 43, 0.1);
}

.method-details p {
    margin-bottom: 0.5rem;
}

.method-details .small-text {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

.copy-btn {
    cursor: pointer;
}

/* Financial Breakdown */
.financial-breakdown {
    max-width: 800px;
    margin: 2.5rem auto 0;
}

.breakdown-item {
    margin-bottom: 2rem;
}

.breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.breakdown-label {
    font-weight: 600;
    color: var(--color-dark);
}

.breakdown-percentage {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-magenta);
}

.breakdown-bar {
    width: 100%;
    height: 12px;
    background: rgba(30, 26, 43, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.breakdown-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
}

.breakdown-description {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.transparency-footer {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(30, 26, 43, 0.1);
}

.transparency-footer p {
    margin-bottom: 0.5rem;
}

.transparency-footer .btn {
    margin-top: 1.5rem;
}

/* Impact Stories */
.impact-stories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.impact-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 20px var(--color-purple-glow);
    transition: all var(--transition-base);
}

.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--color-purple-shadow);
}

.impact-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.impact-content {
    padding: 1.5rem;
}

.impact-content h3 {
    margin-bottom: 1rem;
}

.impact-content p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.impact-author {
    font-weight: 600;
    color: var(--color-dark);
    font-style: italic;
}

/* Section Heading Center Variant */
.section-heading.center {
    text-align: center;
}

/* Center Text Utility */
.center-text {
    text-align: center;
}

/* Small Text Utility */
.small-text {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

@media (max-width: 960px) {
    .primary-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(320px, 70vw);
        background: var(--color-card-bg);
        flex-direction: column;
        padding: 6rem 2rem;
        transform: translateX(100%);
        transition: transform var(--transition-base);
        box-shadow: -20px 0 40px rgba(0, 0, 0, 0.15);
    }
    .nav-toggle:checked ~ .primary-nav {
        transform: translateX(0);
    }
    .nav-toggle-label {
        display: inline-flex;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(30, 26, 43, 0.2);
        cursor: pointer;
    }
    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--color-dark);
        position: relative;
        transition: transform var(--transition-fast);
    }
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        content: '';
        position: absolute;
        left: 0;
    }
    .nav-toggle-label span::before {
        top: -6px;
    }
    .nav-toggle-label span::after {
        top: 6px;
    }
    .nav-toggle:checked + .nav-toggle-label span {
        background: transparent;
    }
    .nav-toggle:checked + .nav-toggle-label span::before {
        transform: translateY(6px) rotate(45deg);
    }
    .nav-toggle:checked + .nav-toggle-label span::after {
        transform: translateY(-6px) rotate(-45deg);
    }
}
@media (max-width: 600px) {
    .hero {
        padding: 2rem 0 2rem;
        min-height: calc(100vh - 70px);
    }
    .header-inner {
        flex-wrap: wrap;
    }
    .giving-card {
        padding: 1.5rem;
    }
    .amount-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    .giving-methods-grid {
        grid-template-columns: 1fr;
    }
    .impact-stories {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CMS Template Styles
   ============================================ */

/* Page Hero Section */
.page-hero {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Hero Texture Patterns */
.hero-texture-dots {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='10' r='2.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='10' cy='30' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}

.hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 100px 100px, 100% 100%;
}

.hero-texture-geometric {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,5 75,65 5,65' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Crect x='10' y='10' width='20' height='20' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none' transform='rotate(15 20 20)'/%3E%3Ccircle cx='65' cy='25' r='10' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='20,70 30,55 10,55' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 80px 80px, 100% 100%;
}

.hero-texture-topographic {
    background:
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 20 C80 25, 95 45, 90 70 C85 95, 55 100, 35 85 C15 70, 20 40, 40 25 C50 18, 55 18, 60 20' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 35 C75 38, 82 52, 78 68 C74 84, 52 88, 40 78 C28 68, 32 48, 45 38 C52 33, 57 33, 60 35' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M60 50 C68 52, 72 60, 70 70 C68 80, 55 82, 48 75 C41 68, 45 58, 52 52 C56 50, 58 50, 60 50' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 120px 120px, 100% 100%;
}

.hero-texture-crosses {
    background:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 20 L25 30 M20 25 L30 25' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.5'/%3E%3Cpath d='M10 5 L10 12 M6.5 8.5 L13.5 8.5' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M42 38 L42 46 M38 42 L46 42' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Cpath d='M8 40 L8 45 M5.5 42.5 L10.5 42.5' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Cpath d='M40 8 L40 14 M37 11 L43 11' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 50px 50px, 100% 100%;
}

.hero-texture-stars {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M15 45 L16.5 51 L23 51 L18 55 L19.5 61 L15 57 L10.5 61 L12 55 L7 51 L13.5 51 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpath d='M65 50 L66 54 L70 54 L67 57 L68 61 L65 58 L62 61 L63 57 L60 54 L64 54 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M60 15 L61 18 L64 18 L61.5 20 L62.5 23 L60 21 L57.5 23 L58.5 20 L56 18 L59 18 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 80px 80px, 100% 100%;
}

.hero-texture-organic {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C60 20, 80 20, 100 10 L100 0 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M0 30 C20 50, 40 40, 60 50 C80 60, 90 50, 100 60 L100 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.02'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='70' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='90' cy='80' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='60' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 200px 200px, 100% 100%;
}

.hero-texture-diamonds {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}

.hero-texture-circuit {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L30 10 L30 30 L50 30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M70 10 L70 25 L90 25' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M10 50 L25 50 L25 70 L40 70 L40 90' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M60 60 L60 80 L80 80 L80 60' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='90' cy='25' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='90' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 100px 100px, 100% 100%;
}

/* Pink/Magenta gradient textures */
.hero-texture-dots.hero-gradient-pink,
.hero-texture-waves.hero-gradient-pink,
.hero-texture-geometric.hero-gradient-pink,
.hero-texture-topographic.hero-gradient-pink,
.hero-texture-crosses.hero-gradient-pink,
.hero-texture-stars.hero-gradient-pink,
.hero-texture-organic.hero-gradient-pink,
.hero-texture-diamonds.hero-gradient-pink,
.hero-texture-circuit.hero-gradient-pink {
    background-image:
        var(--texture-pattern),
        linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
}

/* Override gradient for pink variants - need to duplicate the patterns with pink gradient */
.hero-texture-dots.hero-gradient-pink {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='10' r='2.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='10' cy='30' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
    background-size: 60px 60px, 100% 100%;
}

.hero-texture-waves.hero-gradient-pink {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
    background-size: 100px 100px, 100% 100%;
}

.page-hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.page-hero p {
    //font-size: 0.8rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto; 
}

.page-hero .hero_subtext {
    font-size:0.9rem;
}

.page-hero .study-search-form {
    margin-top: 1.5rem;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.page-hero .study-search-form input {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
}

.page-hero .study-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.page-hero .study-search-form input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Override Safari/iOS autofill styles */
.page-hero .study-search-form input:-webkit-autofill,
.page-hero .study-search-form input:-webkit-autofill:hover,
.page-hero .study-search-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.15) inset !important;
    -webkit-text-fill-color: #fff !important;
}

.topics-hero {
    background: linear-gradient(135deg, rgba(67, 22, 87, 0.85) 0%, rgba(43, 99, 181, 0.85) 100%),
                url('/assets/imgs/gallery/bible-study-topics-hero-image.jpg');
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
}

.page-hero-full {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.page-hero-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(67, 22, 87, 0.75) 0%, rgba(43, 99, 181, 0.75) 100%);
    z-index: 1;
}

.page-hero-image .container {
    position: relative;
    z-index: 2;
}

.hero-minimal {
    background: var(--color-card-bg);
    color: var(--color-dark);
    padding: 3rem 0;
}

.hero-gradient {
    background: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
}

/* Page Content Area */
.page-content {
    padding: 4rem 0;
}

.page-content-full {
    padding: 0;
}

.content-main {
    font-size: 1.1rem;
    line-height: 1.8;
}

.content-main h2 {
    font-size: 2rem;
    margin: 2rem 0 1rem;
    color: var(--color-purple);
}

.content-main h3 {
    font-size: 1.5rem;
    margin: 1.5rem 0 0.75rem;
}

.content-main p {
    margin: 0 0 1.5rem;
}

.content-main ul, .content-main ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}

.content-main li {
    margin-bottom: 0.5rem;
}

.content-main img {
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.content-main blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--color-grey);
    border-left: 4px solid var(--color-purple);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
}

/* Sidebar Layout */
.content-grid-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
}

.content-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.sidebar-widget h3 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    color: var(--color-purple);
}

.sidebar-cta {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
}

.sidebar-cta h4 {
    margin: 0 0 0.5rem;
}

@media (max-width: 900px) {
    .content-grid-sidebar {
        grid-template-columns: 1fr;
    }

    .content-sidebar {
        position: static;
    }
}

/* ============================================
   Template-specific Styles
   ============================================ */

/* Two Column Layout */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.two-column-layout .column-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.two-column-layout .column-media img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
}

/* Split Hero */
.split-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
}

.split-hero-content {
    display: flex;
    align-items: center;
    padding: 4rem;
    background: var(--color-card-bg);
}

.split-hero-text h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: var(--color-purple);
}

.split-hero-image {
    background: var(--color-grey);
}

.split-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .split-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .split-hero-content {
        padding: 3rem 1.5rem;
        order: 2;
    }

    .split-hero-image {
        height: 50vh;
        order: 1;
    }
}

/* Team Grid */
.team-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.team-member {
    text-align: center;
    padding: 2rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.team-member-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-grey);
}

.team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member h3 {
    margin: 0 0 0.25rem;
    color: var(--color-dark);
}

.team-member-role {
    color: var(--color-purple);
    font-weight: 600;
    margin-bottom: 1rem;
}

.team-member-bio {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* Contact Layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}

.contact-info h2 {
    margin-bottom: 2rem;
    color: var(--color-purple);
}

.contact-item {
    margin-bottom: 1.5rem;
}

.contact-item h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--color-card-bg);
}

.contact-map {
    margin-top: 4rem;
}

.contact-map iframe {
    width: 100%;
    height: 400px;
    border: 0;
}

@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Gallery Grid */
.gallery-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.gallery-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

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

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Text Heavy / Narrow Content */
.container-narrow {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.text-heavy-content {
    font-size: 1.1rem;
    line-height: 1.9;
}

.text-heavy-content h2 {
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: var(--color-purple);
}

.text-heavy-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.last-updated {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* Cards Grid */
.cards-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.cards-grid .card {
    padding: 2rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cards-grid .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-purple);
}

.cards-grid .card h3 {
    margin: 0 0 0.75rem;
}

.cards-grid .card p {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.card-link {
    color: var(--color-purple);
    font-weight: 600;
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
}

/* Centered Template */
.page-hero-centered {
    padding: 5rem 0;
}

.content-centered {
    font-size: 1.15rem;
    line-height: 1.8;
}

.text-center {
    text-align: center;
}

/* Video Hero */
.video-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.video-hero-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.video-hero-content {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 2rem;
}

.video-hero-content h1 {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Announcement Template */
.announcement-hero {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
}

.announcement-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.announcement-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
}

.announcement-details {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.announcement-date {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.announcement-location {
    opacity: 0.9;
}

.announcement-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.announcement-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-purple);
}

.announcement-cta-section {
    padding: 4rem 0;
    background: var(--color-grey);
}

.announcement-cta-section h2 {
    margin-bottom: 0.5rem;
}

.announcement-cta-section p {
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
}

/* Landing Page Styles */
.landing-hero {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    text-align: center;
}

.landing-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.landing-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    margin: 0.5rem 0 1.5rem;
    line-height: 1.1;
}

.landing-hero .hero-description {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.landing-features {
    padding: 5rem 0;
    background: var(--color-card-bg);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: var(--color-bg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(75, 38, 121, 0.1);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    color: var(--color-purple);
}

.feature-card p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
}

.landing-content {
    padding: 4rem 0;
}

.landing-cta {
    padding: 5rem 0;
    background: var(--color-bg);
}

.cta-box {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    padding: 4rem;
    border-radius: 2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-box h2 {
    font-size: 2.5rem;
    margin: 0 0 1rem;
}

.cta-box p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .cta-box {
        padding: 2.5rem;
    }

    .cta-box h2 {
        font-size: 1.75rem;
    }
}

/* CMS Edit Mode Body Offset */
body.cms-edit-mode .site-header {
    top: 50px;
}

/* Editable elements styling - only when CMS is active */
body.cms-edit-mode [data-cms-editable] {
    min-height: 1em;
    transition: outline 0.15s ease;
}

body.cms-edit-mode [data-cms-editable]:hover {
    outline: 2px dashed rgba(102, 126, 234, 0.5);
    outline-offset: 4px;
    cursor: text;
}

/* ============================================
   Event Detail Page
   ============================================ */

.event-hero {
    background-size: cover;
    background-position: center;
    padding: 6rem 0 4rem;
    color: #fff;
    margin-top: -1px;
}

.event-hero-content {
    max-width: 700px;
}

.event-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.event-category-badge {
    background: var(--color-magenta);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.event-hero .event-recurring-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
}

.event-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.event-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin: 0 0 1rem;
}

.event-short-desc {
    font-size: 1.1rem;
    opacity: 0.85;
    line-height: 1.6;
    margin: 0;
}

.event-detail-section {
    padding: 3rem 0;
}

.event-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: start;
}

.event-main {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.event-section h2 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    color: var(--color-dark);
}

.event-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}

.event-description p {
    margin: 0 0 1rem;
}

.event-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.event-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-magenta);
    font-weight: bold;
}

.event-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 100px;
}

.event-info-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.event-info-card h3 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

.event-info-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.event-info-item:last-of-type {
    margin-bottom: 1.5rem;
}

.event-info-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.event-info-item strong {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.event-info-item p {
    margin: 0;
    color: var(--color-dark);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.upcoming-dates-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upcoming-dates-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.upcoming-dates-list li:last-child {
    border-bottom: none;
}

.upcoming-dates-list .date {
    font-weight: 500;
}

.upcoming-dates-list .time {
    color: #666;
}

.event-contact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-dark);
    font-size: 0.95rem;
}

.contact-link:hover {
    color: var(--color-magenta);
}

@media (max-width: 900px) {
    .event-layout {
        grid-template-columns: 1fr;
    }

    .event-sidebar {
        position: static;
    }
}

@media (max-width: 600px) {
    .event-hero {
        padding: 4rem 0 3rem;
    }

    .event-hero h1 {
        font-size: 1.75rem;
    }
}

/* ================================================
   BLOG STYLES
   ================================================ */

/* Blog Featured Hero Section */
.blog-featured-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.featured-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.blog-featured-hero .eyebrow {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.blog-featured-hero .post-category {
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

.blog-featured-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.blog-featured-hero .featured-excerpt {
    font-size: 1.15rem;
    opacity: 0.9;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.blog-featured-hero .post-meta {
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

.blog-featured-hero .btn {
    display: inline-block;
}

/* Blog Section */
.blog-section {
    padding: 3rem 0 5rem;
    background: #f8f9fa;
}

.blog-section-title {
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-magenta);
    display: inline-block;
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
}

.blog-main {
    min-width: 0;
}

/* Blog Controls */
.blog-controls {
    margin-bottom: 2rem;
}

.blog-search {
    display: flex;
    gap: 0.5rem;
}

.blog-search input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.blog-search input:focus {
    outline: none;
    border-color: var(--color-magenta);
}

.blog-filter-info {
    background: #f4f4f5;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.blog-filter-info p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clear-filter {
    color: var(--color-magenta);
    text-decoration: none;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.blog-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card-image {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 1.5rem;
}

.blog-card-content h3 {
    font-size: 1.25rem;
    margin: 0.5rem 0;
    line-height: 1.4;
}

.blog-card-content p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Post Category Badge */
.post-category {
    display: inline-block;
    background: var(--color-magenta);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Post Meta */
.post-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 1rem;
}

.post-author {
    font-weight: 500;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e4e4e7;
}

.pagination-info {
    color: var(--color-text-muted);
}

/* Blog Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar-widget {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.sidebar-widget h3 {
    font-size: 1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-magenta);
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 0.25rem;
}

.category-list a {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    text-decoration: none;
    color: #3f3f46;
    border-bottom: 1px solid #f4f4f5;
    transition: color 200ms ease;
}

.category-list a:hover,
.category-list a.active {
    color: var(--color-magenta);
}

.category-list .count {
    background: #f4f4f5;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}

/* Tag Cloud */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #f4f4f5;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    text-decoration: none;
    color: #3f3f46;
    transition: all var(--transition-base);
}

.tag:hover,
.tag.active {
    background: var(--color-magenta);
    color: #fff;
}

/* Sidebar CTA */
.sidebar-cta {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
}

.sidebar-cta h3 {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.sidebar-cta p {
    opacity: 0.9;
    margin-bottom: 1rem;
}

/* Blog Empty State */
.blog-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #f8fafc;
    border-radius: var(--radius-xl);
}

.blog-empty h3 {
    margin-bottom: 0.5rem;
}

.blog-empty p {
    color: var(--color-text-muted);
}

/* ================================================
   BLOG POST PAGE STYLES
   ================================================ */

/* Post Header */
.blog-post-header {
    padding: 5rem 0 4rem;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.blog-post-header .post-category {
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

.blog-post-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blog-post-header .post-meta {
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
}

.draft-notice {
    background: #f59e0b;
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
}

/* Post Content */
.blog-post-content {
    padding: 3rem 0;
    background: #fff;
}

.post-body {
    font-size: 1.1rem;
    line-height: 1.8;
}

.post-body h2 {
    font-size: 1.75rem;
    margin: 2.5rem 0 1rem;
}

.post-body h3 {
    font-size: 1.4rem;
    margin: 2rem 0 1rem;
}

.post-body p {
    margin-bottom: 1.5rem;
}

.post-body ul,
.post-body ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.post-body li {
    margin-bottom: 0.5rem;
}

.post-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--color-grey);
    border-left: 4px solid var(--color-purple);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
}

.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 2rem 0;
}

/* Post Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e4e4e7;
}

.post-tags span {
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Post Share */
.post-share {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}

.post-share span {
    font-weight: 600;
}

.share-link {
    color: var(--color-magenta);
    text-decoration: none;
}

.share-link:hover {
    text-decoration: underline;
}

/* Comments Section */
.blog-comments {
    padding: 3rem 0;
    background: #e8eaed;
}

.blog-comments h2 {
    margin-bottom: 2rem;
}

.comments-list {
    margin-bottom: 3rem;
}

.comment {
    background: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.comment.reply {
    margin-left: 2rem;
    background: #f8fafc;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.comment-author {
    color: var(--color-dark);
    flex-grow: 1;
}

.comment-author-link {
    color: var(--color-dark);
    font-weight: 700;
    text-decoration: none;
    flex-grow: 1;
}

.comment-author-link:hover {
    color: var(--color-magenta);
}

.comment-date {
    color: #a1a1aa;
    font-size: 0.875rem;
}

.comment-content {
    color: #3f3f46;
    line-height: 1.6;
}

.comment-content.truncated {
    max-height: 9.6em; /* Approximately 6 lines */
    overflow: hidden;
    position: relative;
}

.comment-content.truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5em;
    background: linear-gradient(transparent, #fff);
}

.comment.reply .comment-content.truncated::after {
    background: linear-gradient(transparent, #f8fafc);
}

.comment-content.expanded {
    max-height: none;
}

.read-more-btn {
    background: none;
    border: none;
    color: var(--color-magenta);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    margin-right: 1rem;
}

.read-more-btn:hover {
    text-decoration: underline;
}

.comment-replies {
    margin-top: 1rem;
}

.reply-btn {
    background: none;
    border: none;
    color: var(--color-magenta);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    margin-top: 0.75rem;
}

.reply-form-container {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
}

/* Comment Form */
.comment-form-section {
    background: var(--color-card-bg);
    padding: 2rem;
    border-radius: var(--radius-xl);
}

.comment-form-section h3 {
    margin-bottom: 1.5rem;
}

.comment-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-magenta);
}

.comment-form textarea {
    resize: vertical;
    min-height: 120px;
    margin-bottom: 1rem;
}

.comment-form-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}

.comment-form-username {
    font-weight: 600;
    color: var(--color-dark);
}

.comment-login-prompt {
    margin-top: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.comment-login-prompt a {
    color: var(--color-magenta);
    text-decoration: underline;
}

/* Related Posts */
.related-posts {
    padding: 4rem 0;
}

.related-posts h2 {
    text-align: center;
    margin-bottom: 2rem;
}

/* Alert Styles */
.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.alert-success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.alert-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/* User Profile Page */
.user-profile-hero {
    padding: 4rem 0 3rem;
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C60 20, 80 20, 100 10 L100 0 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M0 30 C20 50, 40 40, 60 50 C80 60, 90 50, 100 60 L100 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.02'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='70' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='90' cy='80' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='60' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='75' cy='85' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='30' cy='45' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-dark) 0%, var(--color-purple) 100%);
    background-size: 200px 200px, 100% 100%;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.user-profile-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.user-profile-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(190,49,142,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.user-profile-hero > * {
    position: relative;
    z-index: 1;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.profile-avatar-large {
    flex-shrink: 0;
}

.profile-avatar-large img,
.profile-avatar-large .avatar-initials {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.2);
}

.profile-avatar-large .avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: white;
}

.profile-info h1 {
    margin: 0 0 0.25rem;
    font-size: 2.5rem;
}

.profile-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.profile-role {
    display: inline-block;
    background: var(--color-magenta);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-streak-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
}

.profile-author-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.2s ease;
}

.profile-author-badge:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.profile-author-badge svg {
    opacity: 0.8;
}

.profile-joined {
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
}

.profile-bio {
    color: rgba(255, 255, 255, 0.85);
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 500px;
}

.profile-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.profile-social .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    transition: all var(--transition-fast);
}

.profile-social .social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.profile-bio {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    max-width: 700px;
}

/* Profile Stats */
.profile-stats {
    padding: 3rem 0;
    background: var(--color-bg-subtle);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.stat-card {
    background: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-purple);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Profile Sections */
.profile-section {
    padding: 4rem 0;
}

.profile-section.alt-bg {
    background: var(--color-bg-subtle);
}

.profile-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.profile-section .section-header h2 {
    margin: 0;
}

.profile-section .comment-count {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Profile Comments */
.profile-comments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-comment {
    background: var(--color-card-bg);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.profile-comment .comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.profile-comment .comment-post-link {
    color: var(--color-magenta);
    text-decoration: none;
    font-weight: 500;
}

.profile-comment .comment-post-link:hover {
    text-decoration: underline;
}

.profile-comment .comment-date {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.profile-comment .comment-excerpt {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Studies Grid */
.studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.study-card {
    display: block;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.study-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Profile Responsive */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-info h1 {
        font-size: 1.75rem;
    }

    .profile-avatar-large img,
    .profile-avatar-large .avatar-initials {
        width: 100px;
        height: 100px;
    }

    .profile-social {
        justify-content: center;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-section .section-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Blog Responsive */
@media (max-width: 900px) {
    .blog-featured-hero {
        min-height: 50vh;
    }

    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-widget {
        flex: 1;
        min-width: 250px;
    }
}

@media (max-width: 600px) {
    .blog-featured-hero {
        min-height: 60vh;
    }

    .blog-featured-hero h1 {
        font-size: 1.75rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .comment-form .form-row {
        grid-template-columns: 1fr;
    }

    .comment.reply {
        margin-left: 1rem;
    }
}

/* ============================================
   Bible Study Library Styles
   ============================================ */

/* Bible Study Search Bar */
.bible-study-search {
    padding: 2rem 0;
    background: var(--color-card-bg);
    border-bottom: 1px solid #e4e4e7;
}

.study-search-form {
    display: flex;
    gap: 0.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.study-search-form input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border: 2px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.study-search-form input:focus {
    outline: none;
    border-color: var(--color-purple);
}

.study-search-form.large {
    max-width: 800px;
}

.study-search-form.large input {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
}

/* Bible Study Stats */
.bible-study-stats {
    padding: 2rem 0;
    background: var(--color-grey);
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-purple);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Bible Study Hero (condensed layout) */
.bible-study-hero {
    background: linear-gradient(135deg, rgba(67, 22, 87, 0.85) 0%, rgba(43, 99, 181, 0.85) 100%),
                url('/assets/imgs/gallery/bible-study-hero-image.jpg');
    background-size: cover;
    background-position: center;
    padding: 5rem 0 2.5rem;
}

.bible-study-hero .study-search-form {
    margin-top: 1.5rem;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.bible-study-hero .study-search-form input {
    background: rgba(255, 255, 255, 0.95);
}

.hero-topics-link {
    text-align: center;
    margin-top: 0.75rem;
}

.hero-topics-link .btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.hero-topics-link .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-stat {
    text-align: center;
}

.hero-stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.hero-stat-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 600px) {
    .hero-stats {
        gap: 1.5rem;
    }

    .hero-stat-number {
        font-size: 1.5rem;
    }

    .hero-stat-label {
        font-size: 0.65rem;
    }
}

/* Recent Studies */
.bible-study-recent {
    padding: 3rem 0;
    background: var(--color-card-bg);
}

.bible-study-recent h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.recent-studies-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
}

.recent-study-card {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    background: var(--color-grey);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    scroll-snap-align: start;
}

.recent-study-card:hover {
    background: var(--color-dark);
    color: #fff;
}

.recent-study-card .study-book {
    font-size: 0.875rem;
    color: var(--color-purple);
    font-weight: 600;
}

.recent-study-card:hover .study-book {
    color: var(--color-magenta);
}

.recent-study-card .study-chapter {
    font-size: 1.25rem;
    font-weight: 700;
}

.recent-study-card .study-title {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* Testament Sections */
.bible-study-testament {
    padding: 3rem 0;
}

.bible-study-testament h2 {
    margin-bottom: 0.5rem;
}

.testament-description {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.book-card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.book-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px rgba(75, 38, 121, 0.1);
}

.book-card.has-content {
    border-left: 3px solid var(--color-purple);
}

.book-card.no-content {
    opacity: 0.6;
}

.book-card .book-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.book-card .book-chapters {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.book-card .book-progress {
    font-size: 0.7rem;
    color: var(--color-purple);
    font-weight: 600;
    margin-top: 0.25rem;
}

.book-card .book-coming-soon {
    font-size: 0.7rem;
    color: #a1a1aa;
    font-style: italic;
    margin-top: 0.25rem;
}

/* Bible Study About Section */
.bible-study-about {
    padding: 4rem 0;
    background: var(--color-grey);
}

.about-card {
    background: var(--color-card-bg);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.about-card h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.about-card p {
    color: var(--color-text-muted);
    line-height: 1.8;
}

.about-card a:not(.btn),
.about a:not(.btn),
.content-section a:not(.btn) {
    color: var(--color-magenta);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.about-card a:not(.btn):hover,
.about a:not(.btn):hover,
.content-section a:not(.btn):hover {
    color: var(--color-purple);
}

/* Book Overview Page */
.study-book-hero {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-purple) 100%);
    color: #fff;
}

.book-hero-content {
    max-width: 600px;
}

.book-hero-content .back-link {
    display: inline-block;
    margin-bottom: 1rem;
    opacity: 0.8;
    font-size: 0.9rem;
}

.book-hero-content .back-link:hover {
    opacity: 1;
}

.testament-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.study-book-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 0.5rem;
}

.book-meta {
    opacity: 0.9;
    margin-bottom: 1rem;
}

.book-description {
    opacity: 0.8;
    line-height: 1.7;
}

/* Chapters Grid */
.study-chapters-section {
    padding: 3rem 0;
}

.study-chapters-section h2 {
    margin-bottom: 1.5rem;
}

.chapters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.chapter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid #e4e4e7;
    text-align: center;
    transition: all 0.2s;
}

.chapter-card.available {
    cursor: pointer;
}

.chapter-card.available:hover {
    border-color: var(--color-purple);
    background: var(--color-purple);
    color: #fff;
}

.chapter-card.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.chapter-card .chapter-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.chapter-card .chapter-title {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    opacity: 0.7;
}

.chapter-card .chapter-time {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: 0.25rem;
}

.chapter-card .chapter-status {
    font-size: 0.7rem;
    color: #a1a1aa;
    font-style: italic;
}

/* Book Navigation */
.study-book-nav {
    padding: 2rem 0;
    background: var(--color-grey);
}

.book-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.book-nav-link {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.book-nav-link:hover {
    background: var(--color-dark);
    color: #fff;
}

.book-nav-link .nav-direction {
    font-size: 0.8rem;
    opacity: 0.7;
}

.book-nav-link .nav-book-name {
    font-weight: 600;
}

/* No Studies Message */
.no-studies-message {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
}

.no-studies-message h2 {
    margin-bottom: 0.5rem;
}

.no-studies-message p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* Chapter Study Page */
.bible-study-article {
    min-height: 100vh;
}

.study-header {
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-purple) 100%);
    color: #fff;
}

/* Study header textures */
.study-header.hero-texture-dots {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='10' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='10' cy='50' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='50' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}
.study-header.hero-texture-waves {
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 50 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 10 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 100px 100px, 100% 100%;
}
.study-header.hero-texture-geometric {
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,10 70,30 70,60 40,80 10,60 10,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='40,25 55,35 55,55 40,65 25,55 25,35' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 80px 80px, 100% 100%;
}
.study-header.hero-texture-topographic {
    background: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='60' cy='60' rx='50' ry='30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cellipse cx='60' cy='60' rx='35' ry='20' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cellipse cx='60' cy='60' rx='20' ry='10' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 120px 120px, 100% 100%;
}
.study-header.hero-texture-crosses {
    background: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 10 L25 40 M10 25 L40 25' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 50px 50px, 100% 100%;
}
.study-header.hero-texture-stars {
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 15 L43 30 L58 30 L46 40 L50 55 L40 47 L30 55 L34 40 L22 30 L37 30 Z' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Ccircle cx='15' cy='15' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='65' cy='65' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 80px 80px, 100% 100%;
}
.study-header.hero-texture-organic {
    background: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 100 Q80 50 120 80 T180 100 Q150 150 100 130 T50 100' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M20 50 Q50 20 80 40 T120 30' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M150 150 Q170 180 190 160' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 200px 200px, 100% 100%;
}
.study-header.hero-texture-diamonds {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}
.study-header.hero-texture-circuit {
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 50 L30 50 L30 30 L50 30 L50 50 L70 50 L70 70 L90 70' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='70' cy='70' r='3' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 100px 100px, 100% 100%;
}

.study-header-content {
    max-width: 800px;
}

.study-header .back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    opacity: 0.8;
    font-size: 0.9rem;
}

.study-header .back-link:hover {
    opacity: 1;
}

.study-header h1 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin: 0.5rem 0;
}

.study-title {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.study-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Study Layout */
.study-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    padding: 2rem 0;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Study Sidebar */
.study-sidebar {
    position: relative;
}

.sidebar-sticky {
    position: sticky;
    top: 100px;
}

.sidebar-section {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.sidebar-section h3 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.375rem;
    max-height: 320px;
    overflow-y: auto;
}

.chapter-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--color-grey);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

.chapter-grid-item:hover {
    background: #e4e4e7;
    transform: scale(1.05);
}

.chapter-grid-item.active {
    background: var(--color-purple);
    color: #fff;
}

.chapter-grid-item.active:hover {
    background: var(--color-purple);
    transform: scale(1.05);
}

.chapter-grid-item.unavailable {
    background: #f4f4f5;
    color: #c4c9d4;
    cursor: default;
    font-weight: 400;
}

.chapter-grid-item.unavailable:hover {
    transform: none;
}

.verse-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.verse-nav-item {
    padding: 0.25rem 0.5rem;
    background: var(--color-grey);
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s;
}

.verse-nav-item:hover {
    background: var(--color-purple);
    color: #fff;
}

/* Study Content */
.study-content {
    min-width: 0;
}

.study-summary {
    background: var(--color-grey);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.study-summary h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    margin: 0 0 0.5rem;
}

.study-summary p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* Study Not Available */
.study-not-available {
    background: var(--color-card-bg);
    padding: 3rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    margin-bottom: 2rem;
}

.not-available-icon {
    margin-bottom: 1.5rem;
    color: #a1a1aa;
}

.not-available-icon svg {
    opacity: 0.6;
}

.study-not-available h2 {
    margin: 0 0 1rem;
    color: var(--color-dark);
    font-size: 1.5rem;
}

.study-not-available p {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.study-not-available .available-hint {
    font-size: 0.9rem;
    color: var(--color-purple);
    margin-top: 1.5rem;
}

.study-not-available a {
    color: var(--color-magenta);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.study-not-available a:hover {
    color: #c4006f;
}

.study-body {
    background: var(--color-card-bg);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    font-size: 1.0625rem;
    line-height: 1.8;
    /* Disable iOS native callout menu to allow custom highlight picker */
    -webkit-touch-callout: none;
}

.study-body h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.study-body h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.study-body p {
    margin-bottom: 1.25rem;
}

.study-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--color-grey);
    border-left: 4px solid var(--color-purple);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
}

/* Intro Text - lead paragraph styling */
.study-body .intro-text,
.post-body .intro-text,
.content-main .intro-text,
.content-section .intro-text {
    font-size: 1.25em;
    line-height: 1.7;
    color: var(--color-text-muted);
    font-weight: 400;
    margin-bottom: 2rem;
}

/* Verse Markers */
.verse-marker {
    display: inline-block;
    font-weight: 700;
    color: var(--color-purple);
    margin-right: 0.25rem;
    scroll-margin-top: 120px;
    transition: background 0.3s;
}

.verse-marker.highlighted {
    background: rgba(255, 20, 147, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-xs);
}

/* Chapter Pagination */
.chapter-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e4e4e7;
}

.chapter-nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.chapter-nav:hover {
    background: var(--color-dark);
    color: #fff;
}

.chapter-nav.next {
    text-align: right;
}

.chapter-nav .nav-direction {
    font-size: 0.8rem;
    opacity: 0.7;
}

.chapter-nav .nav-chapter {
    font-weight: 600;
}

/* Search Results Page */
.bible-study-search-page {
    padding: 3rem 0;
}

.verse-match-result {
    margin-bottom: 2rem;
}

.verse-match-result h2 {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.verse-match-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    transition: transform 0.2s;
}

.verse-match-card:hover {
    transform: translateY(-2px);
}

.verse-match-card .verse-ref {
    font-size: 1.25rem;
    font-weight: 700;
}

.verse-match-card .verse-action {
    opacity: 0.9;
}

.search-results h2 {
    margin-bottom: 1.5rem;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-result-card {
    display: block;
    padding: 1.25rem 1.5rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.search-result-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px rgba(75, 38, 121, 0.1);
}

.search-result-card .result-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.search-result-card .result-book {
    font-weight: 700;
    color: var(--color-purple);
}

.search-result-card .result-title {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.search-result-card .result-snippet {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.search-result-card .result-snippet mark {
    background: rgba(255, 20, 147, 0.2);
    color: inherit;
    padding: 0.1rem 0.25rem;
    border-radius: 0.125rem;
}

.search-result-card .result-meta {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #a1a1aa;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
}

.no-results p {
    color: var(--color-text-muted);
}

.no-results ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}

.no-results li {
    padding: 0.25rem 0;
    color: var(--color-text-muted);
}

/* Search Tips */
.search-tips {
    margin-top: 2rem;
}

.search-tips h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.tip {
    background: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e4e4e7;
}

.tip h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--color-purple);
}

.tip p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Bible Study Responsive */
@media (max-width: 900px) {
    .study-layout {
        grid-template-columns: 1fr;
    }

    .study-sidebar {
        display: none;
    }

    .stats-row {
        gap: 2rem;
    }

    .book-nav-inner {
        flex-direction: column;
    }

    .book-nav-link {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .stats-row {
        flex-direction: column;
        gap: 1.5rem;
    }

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

    .chapters-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .study-body {
        padding: 1.25rem;
    }

    .chapter-pagination {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 0.75rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .chapter-pagination > .btn-outline {
        grid-column: 1 / -1;
        order: -1;
        justify-content: center;
        padding: 0.75rem;
    }

    .chapter-nav {
        padding: 0.875rem 1rem;
        border-radius: var(--radius-lg);
        min-height: 70px;
        justify-content: center;
    }

    .chapter-nav.prev {
        text-align: left;
    }

    .chapter-nav.next {
        text-align: right;
    }

    .chapter-nav .nav-direction {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }

    .chapter-nav .nav-chapter {
        font-size: 0.95rem;
    }

    /* When only one nav exists, make it full width */
    .chapter-pagination > div:empty {
        display: none;
    }

    .chapter-pagination > .chapter-nav:only-of-type {
        grid-column: 1 / -1;
        text-align: center !important;
    }
}

/* Hide elements on screen but show in print */
.screen-hidden {
    display: none !important;
}

/* ============================================
   Print Styles for Bible Study
   Creates clean, document-quality printouts
   ============================================ */
@media print {
    /* Override screen-hidden for print */
    .screen-hidden {
        display: block !important;
    }

    /* Reset and base print styles */
    body {
        background: #fff !important;
        color: #000 !important;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Page setup */
    @page {
        margin: 2cm 2.5cm;
        size: A4;
    }

    html, body {
        font-size: 11pt;
        line-height: 1.6;
        visibility: visible !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* Hide everything we don't need */
    .site-header,
    .site-footer,
    .study-sidebar,
    .study-subnav,
    .section-subnav,
    .chapter-pagination,
    .mobile-study-bar,
    .mobile-panel,
    .mobile-panel-overlay,
    .back-link,
    .btn,
    button:not(.print-btn),
    .cross-references,
    .related-studies,
    .highlight-menu,
    .highlight-toast,
    .cms-toolbar,
    .cms-floating-toolbar,
    #cms-toolbar,
    #cms-floating-toolbar,
    .cms-edit-mode-banner,
    .cms-exit-btn,
    .cms-edit-indicator,
    [data-cms-editable]::before,
    [data-cms-editable]::after,
    nav:not(.breadcrumb),
    .primary-nav,
    .nav-toggle,
    .nav-toggle-label,
    .testament-badge,
    .study-topics,
    .save-study-btn,
    .study-header,
    .study-actions,
    .font-settings-wrapper,
    .audio-player,
    footer {
        display: none !important;
    }

    /* Show print-only header */
    .print-header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 2em;
        padding-bottom: 1.5em;
        border-bottom: 2px solid #000;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        text-align: center !important;
    }

    .print-header *:not(.print-logo),
    .print-title,
    .print-title *,
    .print-meta,
    .print-meta * {
        display: block !important;
        visibility: visible !important;
    }

    .print-logo {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 1.5em;
        visibility: visible !important;
    }

    .print-logo img {
        height: 50px !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    .print-title {
        text-align: center;
    }

    .print-title h1 {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 26pt !important;
        font-weight: 700 !important;
        margin: 0 0 0.2em 0 !important;
        letter-spacing: -0.02em;
        color: #1a1a1a !important;
    }

    .print-title .print-subtitle {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 13pt !important;
        font-weight: 400 !important;
        font-style: normal !important;
        color: #555 !important;
        margin: 0 0 0.5em 0 !important;
    }

    .print-meta {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 9pt !important;
        color: #666 !important;
        text-align: center;
    }

    .print-meta span {
        margin: 0 0.5em;
    }

    .print-meta span::before {
        content: "•";
        margin-right: 0.5em;
    }

    .print-meta span:first-child::before {
        content: none;
    }

    /* Print Footer */
    .print-footer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 3em;
        padding-top: 1.5em;
        border-top: 1px solid #ccc;
        text-align: center;
    }

    .print-footer p {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 9pt !important;
        color: #666 !important;
        margin: 0 !important;
        font-style: italic;
    }

    /* Force all article content to be visible (except elements we want hidden) */
    .bible-study-article,
    .bible-study-article *:not(.study-header):not(.study-header *):not(.study-sidebar):not(.study-sidebar *):not(.study-topics):not(.study-topics *):not(.btn):not(button):not(nav):not(nav *):not(.related-studies):not(.related-studies *):not(.cross-references):not(.cross-references *):not(.study-actions):not(.study-actions *):not(.font-settings-wrapper):not(.font-settings-wrapper *):not(.audio-player):not(.audio-player *) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #000 !important;
        position: static !important;
        float: none !important;
        transform: none !important;
    }

    /* Main content area - ensure visibility */
    body,
    main,
    #content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
        position: static !important;
    }

    .bible-study-article,
    .study-layout,
    .study-content {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    .study-layout {
        display: block !important;
        grid-template-columns: none !important;
    }

    .container,
    .container.narrow {
        display: block !important;
        visibility: visible !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Study summary/overview */
    .study-summary {
        background: #f8f8f8 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        border-left: 4px solid #1a1a1a !important;
        padding: 1em 1.5em !important;
        margin-bottom: 1.5em !important;
        page-break-inside: avoid;
    }

    .study-summary h2 {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 11pt !important;
        font-weight: 600 !important;
        margin: 0 0 0.5em 0 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .study-summary p {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 10pt !important;
        margin: 0 !important;
        color: #444 !important;
    }

    /* Main study body content */
    .study-body {
        display: block !important;
        visibility: visible !important;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 11pt !important;
        line-height: 1.75 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: none !important;
        color: #1a1a1a !important;
    }

    .study-body p {
        margin-bottom: 1em !important;
        text-align: left !important;
        orphans: 3;
        widows: 3;
    }

    .study-body h2 {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 14pt !important;
        font-weight: 700 !important;
        margin: 1.5em 0 0.75em 0 !important;
        page-break-after: avoid;
        color: #1a1a1a !important;
    }

    .study-body h3 {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 12pt !important;
        font-weight: 600 !important;
        margin: 1.25em 0 0.5em 0 !important;
        page-break-after: avoid;
        color: #1a1a1a !important;
    }

    .study-body h4 {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 11pt !important;
        font-weight: 600 !important;
        margin: 1em 0 0.5em 0 !important;
        page-break-after: avoid;
        color: #1a1a1a !important;
    }

    /* Verse markers */
    .verse-marker {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-size: 8pt !important;
        font-weight: 700 !important;
        color: #666 !important;
        vertical-align: super !important;
        margin-right: 0.2em;
    }

    /* Blockquotes */
    .study-body blockquote {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        font-style: italic !important;
        border-left: 3px solid #1a1a1a !important;
        margin: 1.25em 0 1.25em 0 !important;
        padding: 0.75em 1.25em !important;
        background: #f8f8f8 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        page-break-inside: avoid;
        color: #333 !important;
    }

    /* Lists */
    .study-body ul,
    .study-body ol {
        margin: 1em 0 1em 2em !important;
        padding: 0 !important;
    }

    .study-body li {
        margin-bottom: 0.5em !important;
    }

    /* User highlights - show with underline instead of background */
    .user-highlight {
        background: none !important;
        text-decoration: underline !important;
        text-decoration-style: wavy !important;
    }

    /* Links - show URL after */
    .study-body a[href]::after {
        content: none; /* Don't show URLs in study content */
    }

    .study-body a {
        text-decoration: underline !important;
    }

    /* Page breaks */
    h1, h2, h3, h4 {
        page-break-after: avoid;
    }

    p, blockquote, ul, ol {
        page-break-inside: avoid;
    }


    /* Ensure images print well */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Hide any interactive elements */
    [contenteditable],
    [data-cms-editable] {
        outline: none !important;
        border: none !important;
    }
}

/* ============================================
   Bible Study Topics Styles
   ============================================ */

.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.topic-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.topic-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px rgba(75, 38, 121, 0.1);
}

.topic-card.no-content {
    opacity: 0.5;
    cursor: default;
}

.topic-card .topic-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.topic-card .topic-info {
    flex: 1;
    min-width: 0;
}

.topic-card .topic-name {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}

.topic-card .topic-description {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.125rem;
}

.topic-card .topic-count {
    background: var(--color-purple);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.topic-card .topic-soon {
    font-size: 0.75rem;
    color: #a1a1aa;
    font-style: italic;
}

/* Single Topic Page */
.topic-hero {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-purple) 100%);
    color: #fff;
    text-align: center;
}

.topic-hero-content {
    max-width: 600px;
    margin: 0 auto;
}

.topic-hero .back-link {
    display: inline-block;
    margin-bottom: 1rem;
    opacity: 0.8;
    font-size: 0.9rem;
}

.topic-hero .back-link:hover {
    opacity: 1;
}

.topic-hero-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.topic-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 0.75rem;
}

.topic-hero .topic-description {
    font-size: 1.125rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.topic-hero .topic-stats {
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Topic Studies Grid */
.topic-studies {
    padding: 3rem 0;
}

.topic-studies h2 {
    margin-bottom: 1.5rem;
}

.topic-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.topic-study-card {
    display: block;
    padding: 1.5rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.topic-study-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 15px rgba(75, 38, 121, 0.1);
    transform: translateY(-2px);
}

.topic-study-card .study-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.topic-study-card .study-book {
    font-weight: 700;
    color: var(--color-purple);
}

.topic-study-card .study-relevance {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    background: var(--color-grey);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
}

.topic-study-card .study-title {
    font-size: 1rem;
    margin: 0.25rem 0 0.5rem;
    line-height: 1.3;
}

.topic-study-card .study-summary {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
    line-height: 1.6;
}

.topic-study-card .study-time {
    font-size: 0.75rem;
    color: #a1a1aa;
}

/* Related Topics */
.related-topics {
    padding: 3rem 0;
    background: var(--color-grey);
}

.related-topics h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

.related-topics-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.related-topic-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-full);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.related-topic-card:hover {
    border-color: var(--color-purple);
    background: var(--color-purple);
    color: #fff;
}

.related-topic-card .topic-icon {
    font-size: 1.25rem;
}

.related-topic-card .topic-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.related-topic-card .topic-count {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Study Topics Display on Chapter Page */
.study-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.study-topic-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    transition: background 0.2s;
}

.study-topic-tag:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Topics Responsive */
@media (max-width: 768px) {
    .popular-topics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .topics-grid {
        grid-template-columns: 1fr;
    }

    .topic-studies-grid {
        grid-template-columns: 1fr;
    }

    .related-topics-grid {
        justify-content: flex-start;
    }
}

/* ============================================
   Cross-References & Related Studies
   ============================================ */

/* Cross References Section */
.cross-references {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e4e4e7;
}

.cross-references h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    margin: 0 0 1rem;
}

.cross-ref-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cross-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.cross-ref-link.has-study {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
}

.cross-ref-link.has-study:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 38, 121, 0.3);
}

.cross-ref-link.has-study .study-available {
    font-size: 0.7rem;
    opacity: 0.8;
    padding: 0.125rem 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
}

.cross-ref-link.no-study {
    color: var(--color-text-muted);
    cursor: default;
}

/* Related Studies Section */
.related-studies {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e4e4e7;
}

.related-studies h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    margin: 0 0 1rem;
}

.related-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.related-study-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.related-study-card:hover {
    background: var(--color-dark);
    color: #fff;
}

.related-study-card .related-book {
    font-weight: 700;
    font-size: 1rem;
}

.related-study-card .related-title {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* Related Sermons */
.related-sermons {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e4e4e7;
}

.related-sermons h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    margin: 0 0 1rem;
}

.related-sermons-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.related-sermon-card {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
}

.related-sermon-card:hover {
    background: var(--color-dark);
    color: #fff;
}

.related-sermon-card .sermon-thumb {
    width: 100px;
    flex-shrink: 0;
}

.related-sermon-card .sermon-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.related-sermon-card .sermon-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.related-sermon-card .sermon-title {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.related-sermon-card .sermon-meta {
    font-size: 0.8125rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* Cross-references Responsive */
@media (max-width: 600px) {
    .cross-ref-list {
        flex-direction: column;
    }

    .cross-ref-link {
        justify-content: space-between;
    }

    .related-studies-grid {
        grid-template-columns: 1fr;
    }
}

/* Inline Scripture Links (in study body content) */
.scripture-link {
    color: var(--color-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-blue);
    transition: all 0.2s;
    cursor: pointer;
}

.scripture-link:hover {
    color: var(--color-magenta);
    border-bottom-color: var(--color-magenta);
    border-bottom-style: solid;
}

.scripture-link.has-study::after {
    content: '\2192';
    font-size: 0.75em;
    margin-left: 0.25em;
    opacity: 0;
    transition: opacity 0.2s;
}

.scripture-link.has-study:hover::after {
    opacity: 1;
}

.scripture-ref.no-study {
    color: var(--color-text-muted);
    font-style: italic;
    cursor: help;
}

/* ========================================
   Hierarchical Topics & Questions System
   ======================================== */

/* Popular Questions Grid */
.questions-popular {
    padding: 3rem 0;
    background: var(--color-grey);
}

.questions-popular h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.popular-questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.popular-question-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    border-left: 3px solid var(--color-magenta);
}

.popular-question-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.popular-question-card .question-text {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.popular-question-card .question-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.8rem;
}

.topic-badge {
    background: var(--color-grey);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}

/* Categories Grid */
.topics-categories {
    padding: 3rem 0;
}

.topics-categories h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

.category-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    transition: all 0.2s;
    border: 1px solid #e4e4e7;
}

.category-card:hover {
    border-color: var(--color-magenta);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.category-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.category-info {
    flex: 1;
}

.category-name {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.category-description {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.category-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Sub-topics A-Z Grid */
.topics-all-subtopics {
    padding: 3rem 0;
    background: var(--color-grey);
}

.topics-all-subtopics h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.subtopics-alpha-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.subtopic-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.subtopic-link.has-content:hover {
    background: var(--color-dark);
    color: #fff;
}

.subtopic-link.no-content {
    opacity: 0.5;
    cursor: default;
}

.subtopic-link .count {
    font-size: 0.75rem;
    opacity: 0.6;
}

/* Category Sub-topics Grid */
.category-subtopics {
    padding: 3rem 0;
}

.category-subtopics h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.subtopics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.subtopic-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    border: 1px solid #e4e4e7;
}

.subtopic-card.has-content:hover {
    border-color: var(--color-blue);
    transform: translateX(4px);
}

.subtopic-card.no-content {
    opacity: 0.6;
}

.subtopic-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.subtopic-info {
    flex: 1;
}

.subtopic-name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.subtopic-description {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.subtopic-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.subtopic-stats .coming-soon {
    font-style: italic;
    color: #a1a1aa;
}

/* Topic Questions Grid */
.topic-questions {
    padding: 3rem 0;
    background: var(--color-grey);
}

.topic-questions h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.question-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    border-left: 3px solid var(--color-purple);
}

.question-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-left-color: var(--color-magenta);
}

.question-card .question-text {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.question-card .question-description {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.question-card .question-studies {
    font-size: 0.75rem;
    color: var(--color-blue);
    margin-top: auto;
}

/* Question Page Styles */
.question-page .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.question-page .breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.question-page .breadcrumb a:hover {
    color: #fff;
}

.question-hero {
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
}

.question-hero-content {
    max-width: 800px;
}

.question-topic-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.question-hero h1 {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.question-description {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.question-stats {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Question Studies List */
.question-studies {
    padding: 3rem 0;
}

.question-studies h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.section-intro {
    text-align: center;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.question-studies-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.question-study-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.question-study-card:hover {
    border-color: var(--color-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.study-rank {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-grey);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-purple);
    flex-shrink: 0;
}

.question-study-card:hover .study-rank {
    background: var(--color-purple);
    color: #fff;
}

.study-details {
    flex: 1;
}

.study-reference {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-blue);
    font-weight: 600;
}

.study-details .study-title {
    font-size: 1.1rem;
    margin: 0.35rem 0;
}

.study-details .study-summary {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.study-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #a1a1aa;
}

.relevance-badge {
    background: rgba(75, 38, 121, 0.1);
    color: var(--color-purple);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
}

.read-arrow {
    font-size: 1.25rem;
    color: #a1a1aa;
    align-self: center;
    transition: transform 0.2s;
}

.question-study-card:hover .read-arrow {
    transform: translateX(4px);
    color: var(--color-magenta);
}

/* Related Questions */
.related-questions {
    padding: 3rem 0;
    background: var(--color-grey);
}

.related-questions h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.related-questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.related-question-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.related-question-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.related-question-card .question-text {
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
}

.related-question-card .study-count {
    font-size: 0.75rem;
    color: var(--color-blue);
    margin-top: 0.5rem;
}

/* Question CTA */
.question-cta {
    padding: 3rem 0;
}

.cta-box {
    text-align: center;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--color-grey) 0%, #e4e4e7 100%);
    border-radius: var(--radius-xl);
}

.cta-box h3 {
    margin-bottom: 0.5rem;
}

.cta-box p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .category-card {
        flex-direction: column;
        text-align: center;
    }

    .category-stats {
        flex-direction: row;
        align-items: center;
    }

    .question-hero h1 {
        font-size: 1.5rem;
    }

    .question-study-card {
        flex-direction: column;
    }

    .study-rank {
        align-self: flex-start;
    }

    .read-arrow {
        display: none;
    }
}

/* ========================================
   Authentication Pages
   ======================================== */

.auth-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

/* Auth page with grey wave texture */
.auth-page.hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23888888' stroke-opacity='0.15' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23888888' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23888888' stroke-opacity='0.12' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23888888' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23888888' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        #f5f5f7;
    background-size: 100px 100px, 100% 100%;
}

[data-theme="dark"] .auth-page.hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23666666' stroke-opacity='0.2' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23666666' stroke-opacity='0.15' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23666666' stroke-opacity='0.18' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23666666' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23666666' stroke-opacity='0.15' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        #1a1a1d;
    background-size: 100px 100px, 100% 100%;
}

.auth-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

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

.auth-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.auth-header p {
    color: var(--color-text-muted);
}

.auth-form .form-group {
    margin-bottom: 1.25rem;
}

.auth-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--color-blue);
}

.form-group.has-error input {
    border-color: #ef4444;
}

.form-error {
    display: block;
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.form-hint {
    display: block;
    color: #a1a1aa;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.link-muted {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.link-muted:hover {
    color: var(--color-magenta);
}

.btn-block {
    width: 100%;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e4e4e7;
    color: var(--color-text-muted);
}

.auth-footer a {
    color: var(--color-blue);
    font-weight: 600;
}

.alert {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.alert-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* ========================================
   User Dashboard
   ======================================== */

.dashboard-hero {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    padding: 2.5rem 0;
    position: relative;
    overflow: hidden;
}

/* Dashboard hero textures (light mode) */
.dashboard-hero.hero-texture-dots {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='10' r='2.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='10' cy='30' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}

.dashboard-hero.hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 100px 100px, 100% 100%;
}

.dashboard-hero.hero-texture-geometric {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,5 75,65 5,65' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Crect x='10' y='10' width='20' height='20' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none' transform='rotate(15 20 20)'/%3E%3Ccircle cx='65' cy='25' r='10' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='20,70 30,55 10,55' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 80px 80px, 100% 100%;
}

.dashboard-hero.hero-texture-topographic {
    background:
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 20 C80 25, 95 45, 90 70 C85 95, 55 100, 35 85 C15 70, 20 40, 40 25 C50 18, 55 18, 60 20' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 35 C75 38, 82 52, 78 68 C74 84, 52 88, 40 78 C28 68, 32 48, 45 38 C52 33, 57 33, 60 35' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M60 50 C68 52, 72 60, 70 70 C68 80, 55 82, 48 75 C41 68, 45 58, 52 52 C56 50, 58 50, 60 50' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 120px 120px, 100% 100%;
}

.dashboard-hero.hero-texture-crosses {
    background:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 20 L25 30 M20 25 L30 25' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.5'/%3E%3Cpath d='M10 5 L10 12 M6.5 8.5 L13.5 8.5' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M42 38 L42 46 M38 42 L46 42' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Cpath d='M8 40 L8 45 M5.5 42.5 L10.5 42.5' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Cpath d='M40 8 L40 14 M37 11 L43 11' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 50px 50px, 100% 100%;
}

.dashboard-hero.hero-texture-stars {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M15 45 L16.5 51 L23 51 L18 55 L19.5 61 L15 57 L10.5 61 L12 55 L7 51 L13.5 51 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpath d='M65 50 L66 54 L70 54 L67 57 L68 61 L65 58 L62 61 L63 57 L60 54 L64 54 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M60 15 L61 18 L64 18 L61.5 20 L62.5 23 L60 21 L57.5 23 L58.5 20 L56 18 L59 18 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 80px 80px, 100% 100%;
}

.dashboard-hero.hero-texture-organic {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C60 20, 80 20, 100 10 L100 0 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M0 30 C20 50, 40 40, 60 50 C80 60, 90 50, 100 60 L100 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.02'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='70' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='90' cy='80' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='60' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 200px 200px, 100% 100%;
}

.dashboard-hero.hero-texture-diamonds {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}

.dashboard-hero.hero-texture-circuit {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L30 10 L30 30 L50 30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M70 10 L70 25 L90 25' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M10 50 L25 50 L25 70 L40 70 L40 90' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M60 60 L60 80 L80 80 L80 60' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='90' cy='25' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='90' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 100px 100px, 100% 100%;
}

.dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-text h1 {
    font-size: 1.75rem;
    margin-bottom: 0.35rem;
}

.welcome-text p {
    opacity: 0.85;
}

.welcome-new {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-top: 0.5rem;
}

.streak-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-xl);
}

.streak-flame {
    font-size: 2rem;
}

.streak-info {
    display: flex;
    flex-direction: column;
}

.streak-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.streak-label {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Dashboard Stats */
.dashboard-stats {
    padding: 2rem 0;
    background: var(--color-grey);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card {
    background: var(--color-card-bg);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-purple);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Today's Reading */
.todays-reading {
    padding: 2rem 0;
}

.todays-reading h2 {
    margin-bottom: 1rem;
}

.todays-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.today-card {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-purple) 100%);
    color: #fff;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
}

.today-plan {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.today-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.today-card p {
    opacity: 0.9;
    margin-bottom: 1rem;
}

.today-card .btn-primary {
    background: var(--color-card-bg);
    color: var(--color-purple);
}

/* Dashboard Grid */
.dashboard-grid {
    padding: 2rem 0;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.dashboard-section {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: 1.1rem;
    margin: 0;
}

.link-more {
    font-size: 0.85rem;
    color: var(--color-blue);
}

/* Plans List */
.plans-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plan-card-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
}

.plan-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.plan-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.plan-details {
    min-width: 0;
}

.plan-details h3 {
    font-size: 0.95rem;
    margin: 0 0 0.2rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.plan-card-progress .plan-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.plan-card-progress .plan-actions .btn {
    white-space: nowrap;
}

.plan-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar {
    width: 80px;
    height: 8px;
    background: #e4e4e7;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-magenta);
    border-radius: var(--radius-full);
}

.progress-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-purple);
}

/* History List */
.history-list {
    display: flex;
    flex-direction: column;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f4f4f5;
}

.history-item:last-child {
    border-bottom: none;
}

.history-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}

.history-subtitle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.completed-badge {
    background: #dcfce7;
    color: #166534;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.progress-badge {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Saved & Highlights */
.saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.saved-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.35rem;
    transition: background 0.2s;
}

.saved-item:hover {
    background: var(--color-grey);
}

.saved-icon {
    font-size: 1rem;
}

.saved-title {
    font-size: 0.9rem;
}

.highlights-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.highlight-item {
    padding: 0.75rem;
    border-radius: 0.35rem;
    border-left: 3px solid;
}

.highlight-yellow {
    background: #fef9c3;
    border-color: #facc15;
}

.highlight-green {
    background: #dcfce7;
    border-color: #22c55e;
}

.highlight-blue {
    background: #dbeafe;
    border-color: #3b82f6;
}

.highlight-pink {
    background: #fce7f3;
    border-color: #ec4899;
}

.highlight-orange {
    background: #ffedd5;
    border-color: #f97316;
}

.highlight-text {
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0.35rem;
}

.highlight-source {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Quick Links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.quick-link:hover {
    background: var(--color-dark);
    color: #fff;
}

.quick-icon {
    font-size: 1.25rem;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 2rem;
}

.empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3 {
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* Dashboard Responsive */
@media (max-width: 900px) {
    .dashboard-columns {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-welcome {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   READING PLANS PAGE
   ===================================================== */

.plans-hero {
    background: linear-gradient(135deg, rgba(67, 22, 87, 0.85) 0%, rgba(43, 99, 181, 0.85) 100%),
                url('/assets/imgs/gallery/bible-study-plans-hero-image.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}

.plans-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.plans-hero p {
    opacity: 0.9;
    font-size: 1.1rem;
}

.plans-hero .plans-search {
    margin-top: 1.5rem;
    justify-content: center;
}

.plans-hero .search-input-wrapper {
    max-width: 400px;
    width: 100%;
}

.plans-hero .search-input {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    -webkit-appearance: none;
    appearance: none;
    color-scheme: dark;
}

.plans-hero .search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.plans-hero .search-input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Override Safari/iOS autofill styles for hero search */
.plans-hero .search-input:-webkit-autofill,
.plans-hero .search-input:-webkit-autofill:hover,
.plans-hero .search-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.15) inset !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.plans-hero .search-icon {
    color: rgba(255, 255, 255, 0.7);
}

.plans-hero .clear-search-btn {
    color: rgba(255, 255, 255, 0.7);
}

.plans-hero .clear-search-btn:hover {
    color: #fff;
}

.plans-hero .search-results-count {
    color: rgba(255, 255, 255, 0.9);
}

.plans-grid-section {
    padding: 3rem 0;
}

.plans-login-prompt {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    margin-bottom: 2rem;
}

.plans-login-prompt a {
    color: var(--color-primary);
    font-weight: 600;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.plan-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.plan-card.plan-active {
    box-shadow: 0 0 0 2px var(--color-primary), 0 2px 10px rgba(0,0,0,0.08);
}

.plan-card.plan-completed {
    box-shadow: 0 0 0 2px #22c55e, 0 2px 10px rgba(0,0,0,0.08);
}

/* Thumbnail area with 16:9 aspect ratio */
.plan-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #eb008b 100%);
}

.plan-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.plan-card:hover .plan-thumbnail img {
    transform: scale(1.05);
}

.plan-thumbnail-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #eb008b 100%);
}

.plan-thumbnail-placeholder .plan-icon {
    font-size: 4rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Badges on thumbnail */
.plan-thumbnail .featured-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    z-index: 2;
}

.plan-status-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    z-index: 2;
}

.plan-status-badge.active {
    background: var(--color-primary);
    color: white;
}

.plan-status-badge.completed {
    background: #22c55e;
    color: white;
}

/* Card content area */
.plan-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.plan-card h2 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.plan-description {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plan-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.plan-duration::before {
    content: "📅 ";
}

.plan-users::before {
    content: "👥 ";
}

.plan-actions {
    margin-top: auto;
}

.plan-actions .btn {
    width: 100%;
}

.plan-actions .restart-form {
    margin: 0;
}

.plan-actions .restart-form .btn {
    width: 100%;
}

/* =====================================================
   SETTINGS PAGE
   ===================================================== */

.settings-page {
    padding: 2rem 0 4rem;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.settings-header h1 {
    font-size: 2rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.settings-section {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.settings-section h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e4e4e7;
}

.settings-section .section-description {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: -1rem 0 1.5rem;
}

.input-with-prefix {
    display: flex;
    align-items: center;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

.input-with-prefix .input-prefix {
    padding: 0.75rem 0.75rem;
    background: #f4f4f5;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
    border-right: 1px solid #e4e4e7;
}

.input-with-prefix input {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    padding-left: 0.75rem !important;
}

.input-with-prefix input:focus {
    box-shadow: none !important;
}

.input-with-prefix:focus-within {
    border-color: var(--color-magenta);
}

[data-theme="dark"] .input-with-prefix {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}

[data-theme="dark"] .input-with-prefix .input-prefix {
    background: #27272a;
    border-color: var(--color-border);
}

.settings-form .form-group {
    margin-bottom: 1.25rem;
}

.settings-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="password"],
.settings-form textarea,
.settings-form select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.settings-form input:focus,
.settings-form textarea:focus,
.settings-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.settings-form input:disabled {
    background: #f4f4f5;
    color: var(--color-text-muted);
}

.settings-form small {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-group input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
}

.stats-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e4e4e7;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-item .stat-label {
    color: var(--color-text-muted);
}

.stat-item .stat-value {
    font-weight: 600;
}

/* =====================================================
   SAVED STUDIES PAGE
   ===================================================== */

.saved-studies-page,
.highlights-page,
.history-page {
    padding: 2rem 0 4rem;
}

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

.header-content h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.header-content p {
    color: var(--color-text-muted);
}

.back-link {
    color: var(--color-primary);
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

.saved-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.saved-study-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.saved-study-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.saved-study-card .study-link {
    display: block;
    padding: 1.5rem;
    color: inherit;
}

.saved-study-card .study-book {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.saved-study-card .study-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.saved-study-card .study-notes {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.saved-study-card .saved-date {
    font-size: 0.75rem;
    color: #a1a1aa;
}

.unsave-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #a1a1aa;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-xs);
    transition: color 0.2s, background 0.2s;
}

.unsave-btn:hover {
    color: #ef4444;
    background: #fef2f2;
}

/* =====================================================
   HIGHLIGHTS PAGE
   ===================================================== */

.highlights-search,
.saved-search,
.plans-search {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    font-size: 1rem;
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.clear-search-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--color-bg-subtle);
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.clear-search-btn:hover {
    background: var(--color-border-strong);
    color: var(--color-text);
}

.search-results-count {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.highlights-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: 2rem;
    background: var(--color-card-bg);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: var(--color-primary);
}

.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.filter-btn.highlight-yellow {
    border-color: #fef08a;
}

.filter-btn.highlight-yellow.active {
    background: #fef08a;
    color: #854d0e;
}

.filter-btn.highlight-green {
    border-color: #bbf7d0;
}

.filter-btn.highlight-green.active {
    background: #bbf7d0;
    color: #166534;
}

.filter-btn.highlight-blue {
    border-color: #bfdbfe;
}

.filter-btn.highlight-blue.active {
    background: #bfdbfe;
    color: #1e40af;
}

.filter-btn.highlight-pink {
    border-color: #fbcfe8;
}

.filter-btn.highlight-pink.active {
    background: #fbcfe8;
    color: #9d174d;
}

.filter-btn.highlight-orange {
    border-color: #fed7aa;
}

.filter-btn.highlight-orange.active {
    background: #fed7aa;
    color: #9a3412;
}

.highlights-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.highlight-card {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fef9c3;
    border-left: 4px solid #eab308;
}

.highlight-card.highlight-green {
    background: #dcfce7;
    border-left-color: #22c55e;
}

.highlight-card.highlight-blue {
    background: #dbeafe;
    border-left-color: #3b82f6;
}

.highlight-card.highlight-pink {
    background: #fce7f3;
    border-left-color: #ec4899;
}

.highlight-card.highlight-orange {
    background: #ffedd5;
    border-left-color: #f97316;
}

.highlight-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    color: #2e2e33;
}

.highlight-note {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.highlight-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
}

.highlight-source {
    color: var(--color-primary);
    font-weight: 500;
}

.highlight-date {
    color: #a1a1aa;
}

.delete-highlight-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: #a1a1aa;
    cursor: pointer;
    padding: 0.25rem;
}

.delete-highlight-btn:hover {
    color: #ef4444;
}

/* =====================================================
   HISTORY PAGE
   ===================================================== */

.history-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.timeline-date {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 1.5rem 0 0.75rem;
}

.timeline-date:first-child {
    margin-top: 0;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.history-card {
    position: relative;
    display: block;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e4e4e7;
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

.history-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.history-card .completed-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
}

.history-book {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-purple);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}

.history-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    color: var(--color-text);
}

.history-card.completed .history-title {
    padding-right: 1.5rem;
}

.history-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.progress-bar-mini {
    flex: 1;
    height: 4px;
    background: #e4e4e7;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-mini .progress-fill {
    height: 100%;
    background: var(--color-purple);
    border-radius: 2px;
}

.time-spent {
    font-size: 0.7rem;
    color: #a1a1aa;
    white-space: nowrap;
}

/* =====================================================
   RESPONSIVE FOR USER PAGES
   ===================================================== */

@media (max-width: 768px) {
    .plans-hero h1 {
        font-size: 1.75rem;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        gap: 1rem;
    }

    .history-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .history-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .highlights-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }

    .filter-btn {
        flex-shrink: 0;
    }
}

/* =====================================================
   USER NAVIGATION (Header)
   ===================================================== */

.user-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1.5rem;
}

.user-nav .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    margin-top: 0;
}

/* User Menu Dropdown */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    transition: background 0.2s;
}

.user-menu-trigger:hover {
    background: #f4f4f5;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--color-purple); /* fallback, overridden by inline style */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.user-name {
    font-weight: 500;
    color: var(--color-dark);
}

.user-menu-trigger .chevron {
    color: var(--color-text-muted);
    transition: transform 0.2s;
}

.user-menu.open .user-menu-trigger .chevron {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    min-width: 200px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 1000;
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    color: var(--color-dark);
    border-radius: var(--radius-md);
    transition: background 0.2s;
    font-size: 0.9375rem;
}

.dropdown-item:hover {
    background: #f4f4f5;
}

.dropdown-item svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.dropdown-item:hover svg {
    color: var(--color-primary);
}

.dropdown-divider {
    height: 1px;
    background: #e4e4e7;
    margin: 0.5rem 0;
}

.dropdown-item-danger {
    color: #dc2626;
}

.dropdown-item-danger:hover {
    background: #fef2f2;
}

.dropdown-item-danger svg {
    color: #dc2626;
}

/* Mobile User Nav */
@media (max-width: 900px) {
    .user-nav {
        position: absolute;
        top: 1rem;
        right: 4rem;
        margin-left: 0;
    }

    .user-name {
        display: none;
    }

    .user-menu-trigger .chevron {
        display: none;
    }

    .btn-login {
        display: none;
    }

    .user-nav .btn-sm {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .user-dropdown {
        right: -1rem;
    }
}

/* =====================================================
   READING PLAN DAY PAGE
   ===================================================== */

.reading-plan-day-page,
.reading-plan-view-page {
    padding: 2rem 0 4rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.breadcrumb a {
    color: var(--color-primary);
}

.breadcrumb .separator {
    color: #a1a1aa;
}

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

.day-label {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    margin-bottom: 0.75rem;
}

.day-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.day-description {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.day-progress .progress-ring {
    width: 60px;
    height: 60px;
    background: #f4f4f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-number {
    font-weight: 700;
    color: var(--color-primary);
}

.scripture-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.scripture-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.scripture-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0369a1;
}

.scripture-reference {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}

.day-content {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

.reflection-prompt h3 {
    margin-bottom: 1rem;
}

.reflection-prompt ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.reflection-prompt li {
    margin-bottom: 0.5rem;
    color: #3f3f46;
}

.day-actions {
    text-align: center;
    margin-bottom: 2rem;
}

.completed-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #dcfce7;
    color: #166534;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.completed-icon {
    font-size: 1.25rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.login-prompt {
    color: var(--color-text-muted);
}

.login-prompt a {
    color: var(--color-primary);
    font-weight: 600;
}

.day-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid #e4e4e7;
}

.nav-prev, .nav-next {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-dark);
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.nav-prev:hover, .nav-next:hover {
    background: #f4f4f5;
}

.nav-overview {
    color: var(--color-primary);
    font-weight: 500;
}

.nav-placeholder {
    width: 100px;
}

/* =====================================================
   READING PLAN DETAIL - Native App-Style Design
   Inspired by Duolingo/Headspace mobile patterns
   ===================================================== */

/*
 * Mobile-first: Simple vertical flow
 * No grids, no complex layouts - just stacked content
 */

.reading-plan-view-page .plan-header {
    margin-bottom: 2rem;
}

/* Hero section with gradient background */
.plan-hero {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 100%);
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: #fff;
    margin-bottom: 1rem;
}

.plan-hero-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    display: block;
}

.plan-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.plan-hero-desc {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}

/* Meta pills below hero */
.plan-meta-bar {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.plan-meta-pill {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
}

/* Progress card - only shown when plan is active */
.plan-progress-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.plan-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.plan-progress-text {
    font-size: 0.9rem;
    color: var(--color-dark);
    font-weight: 500;
}

.plan-progress-pct {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-magenta);
}

.plan-progress-track {
    height: 8px;
    background: var(--color-grey);
    border-radius: 4px;
    overflow: hidden;
}

.plan-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-purple), var(--color-magenta));
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Action button - full width, prominent */
.plan-action-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.plan-action-btn:active {
    transform: scale(0.98);
}

.plan-action-btn.primary {
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.plan-action-btn.primary:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 100%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.plan-action-btn.secondary {
    background: var(--color-card-bg);
    color: var(--color-dark);
    border: 2px solid var(--color-border);
    margin-top: 0.75rem;
}

/* Completed state */
.plan-completed-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #dcfce7;
    color: #166534;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

/* Tablet: slightly larger hero */
@media (min-width: 640px) {
    .plan-hero {
        padding: 2.5rem 2rem;
    }

    .plan-hero-title {
        font-size: 1.75rem;
    }
}

/* Desktop: Full-width hero with content and actions side by side */
@media (min-width: 900px) {
    /* Hero becomes full-width with two-column internal layout */
    .plan-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        padding: 2.5rem 3rem;
        text-align: left;
    }

    .plan-hero-content {
        flex: 1;
    }

    .plan-hero-icon {
        font-size: 3.5rem;
        margin-bottom: 0.75rem;
    }

    .plan-hero-title {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .plan-hero-desc {
        font-size: 1rem;
        max-width: 550px;
        margin-bottom: 1rem;
    }

    /* Meta pills inside hero on desktop */
    .plan-hero .plan-meta-bar {
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .plan-hero .plan-meta-pill {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.3);
        color: #fff;
    }

    /* Actions column inside hero */
    .plan-hero-actions {
        flex-shrink: 0;
        width: 220px;
    }

    .plan-hero .plan-hero-actions .plan-action-btn.primary {
        background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 100%) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.3);
        box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    }

    .plan-hero .plan-hero-actions .plan-action-btn.primary:hover {
        background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 100%) !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        transform: translateY(-1px);
    }

    .plan-hero-actions .plan-action-btn.secondary {
        background: rgba(255,255,255,0.15);
        border-color: rgba(255,255,255,0.4);
        color: #fff;
    }

    .plan-hero-actions .plan-completed-badge {
        background: rgba(255,255,255,0.2);
        color: #fff;
    }

    /* Progress card full width below hero */
    .plan-progress-card {
        margin-top: 1.5rem;
    }
}

/* Large desktop: more breathing room */
@media (min-width: 1200px) {
    .plan-hero {
        padding: 3rem 4rem;
    }

    .plan-hero-icon {
        font-size: 4rem;
    }

    .plan-hero-title {
        font-size: 2.25rem;
    }

    .plan-hero-actions {
        width: 260px;
    }
}

/* Dark mode */
[data-theme="dark"] .plan-hero {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 100%);
}

[data-theme="dark"] .plan-meta-pill {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
}

[data-theme="dark"] .plan-progress-card {
    background: #27272a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="dark"] .plan-progress-text {
    color: #e4e4e7;
}

[data-theme="dark"] .plan-progress-track {
    background: #3f3f46;
}

[data-theme="dark"] .plan-action-btn.primary {
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

[data-theme="dark"] .plan-action-btn.secondary {
    background: #27272a;
    color: #e4e4e7;
    border-color: #3f3f46;
}

[data-theme="dark"] .plan-completed-badge {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.days-list h2 {
    margin-bottom: 1.5rem;
}

.days-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.day-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.day-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.day-card.completed {
    background: #f0fdf4;
}

.day-card.current {
    border: 2px solid var(--color-primary);
}

.day-number {
    width: 40px;
    height: 40px;
    background: #f4f4f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.day-card.completed .day-number {
    background: #22c55e;
    color: #fff;
}

.day-card.current .day-number {
    background: var(--color-primary);
    color: #fff;
}

.day-info {
    flex: 1;
}

.day-info h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.day-scripture {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.current-badge {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
}

/* Today's Reading Card Actions */
.today-card-actions {
    margin-top: 1rem;
}

.today-card-actions .scripture-ref {
    margin-bottom: 0.75rem;
    font-weight: 500;
}

/* Plan Card Progress - Mobile */
@media (max-width: 600px) {
    .plan-card-progress {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .plan-card-progress .plan-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .plan-card-progress .plan-progress {
        width: 100%;
    }

    .plan-card-progress .progress-bar {
        flex: 1;
        width: auto;
    }

    .plan-card-progress .plan-actions .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .reading-plan-day-page,
    .reading-plan-view-page {
        padding: 1rem 0 2rem;
    }

    .reading-plan-view-page .container,
    .reading-plan-day-page .container {
        padding: 0 1rem;
    }

    .days-list h2 {
        font-size: 1.15rem;
        margin-bottom: 1rem;
    }

    .day-card {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    .day-number {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    .day-info h3 {
        font-size: 0.9rem;
    }

    .day-scripture {
        font-size: 0.8rem;
    }

    .current-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    /* Day page mobile */
    .breadcrumb {
        font-size: 0.75rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .day-header {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .day-header h1 {
        font-size: 1.5rem;
    }

    .day-description {
        font-size: 1rem;
    }

    .day-progress {
        align-self: flex-start;
    }

    .day-progress .progress-ring {
        width: 50px;
        height: 50px;
        font-size: 0.8rem;
    }

    .scripture-card {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .scripture-reference {
        font-size: 1.25rem;
    }

    .day-content {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .day-actions {
        margin-bottom: 1.5rem;
    }

    .btn-lg {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        width: 100%;
        max-width: 300px;
    }

    .day-navigation {
        flex-direction: column;
        gap: 0.75rem;
        padding-top: 1.5rem;
    }

    .nav-prev, .nav-next {
        width: 100%;
        justify-content: center;
        padding: 0.875rem;
        background: #f4f4f5;
        border-radius: var(--radius-md);
    }

    .nav-overview {
        order: 0;
        width: 100%;
        text-align: center;
        padding: 0.875rem;
        background: #f0f9ff;
        border-radius: var(--radius-md);
    }

    .nav-placeholder {
        display: none;
    }

    /* Study content on mobile */
    .study-section {
        margin-bottom: 1.5rem;
    }

    .study-section-header h2 {
        font-size: 1.1rem;
    }

    .study-content {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .reflection-prompt h3 {
        font-size: 1.1rem;
    }

    .reflection-prompt ul {
        padding-left: 1.25rem;
    }
}

/* =====================================================
   NAVIGATION DROPDOWNS
   ===================================================== */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0.5rem 0;
}

.nav-dropdown-trigger:hover {
    color: var(--color-primary);
}

.nav-dropdown.is-active .nav-dropdown-trigger {
    color: var(--color-primary);
}

.nav-chevron {
    transition: transform 0.2s;
}

.nav-dropdown.open .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-card-bg);
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    margin-top: 24px;
}

.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.625rem 1rem;
    color: var(--color-dark);
    border-radius: var(--radius-md);
    transition: background 0.2s;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: #f4f4f5;
    color: var(--color-primary);
}

/* Mobile Nav Dropdown */
@media (max-width: 900px) {
    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-trigger {
        width: 100%;
        justify-content: center;
        padding: 1rem;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        background: rgba(0,0,0,0.05);
        border-radius: var(--radius-md);
        margin: 0.5rem 1rem;
        display: none;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .nav-dropdown-menu a {
        text-align: center;
        padding: 0.75rem 1rem;
    }
}

/* Footer Give Section */
.footer-give-text {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.btn-give {
    display: inline-block;
}

.btn-contact {
    display: inline-block;
    margin-top:15px;
}

/* =====================================================
   BIBLE STUDY SAVE & HIGHLIGHT FEATURES
   ===================================================== */

/* Save/Bookmark Button */
.sidebar-actions {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e4e4e7;
}

.save-study-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.save-study-btn:hover {
    background: #f4f4f5;
    border-color: #cbd5e1;
    color: var(--color-dark);
}

.save-study-btn.saved {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

.save-study-btn.saved:hover {
    background: #fde68a;
}

.save-study-btn .bookmark-icon {
    flex-shrink: 0;
}

/* User Highlights */
.user-highlight {
    padding: 0.1em 0.15em;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.user-highlight:hover {
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.4), 0 2px 8px rgba(250, 204, 21, 0.3);
}

.user-highlight.highlight-yellow {
    background: rgba(250, 204, 21, 0.35);
}

.user-highlight.highlight-yellow:hover {
    background: rgba(250, 204, 21, 0.5);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.4), 0 2px 8px rgba(250, 204, 21, 0.3);
}

.user-highlight.highlight-green {
    background: rgba(34, 197, 94, 0.3);
}

.user-highlight.highlight-green:hover {
    background: rgba(34, 197, 94, 0.45);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.4), 0 2px 8px rgba(74, 222, 128, 0.3);
}

.user-highlight.highlight-blue {
    background: rgba(59, 130, 246, 0.25);
}

.user-highlight.highlight-blue:hover {
    background: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.4), 0 2px 8px rgba(96, 165, 250, 0.3);
}

.user-highlight.highlight-pink {
    background: rgba(236, 72, 153, 0.25);
}

.user-highlight.highlight-pink:hover {
    background: rgba(236, 72, 153, 0.4);
    box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.4), 0 2px 8px rgba(244, 114, 182, 0.3);
}

.user-highlight.highlight-orange {
    background: rgba(249, 115, 22, 0.25);
}

.user-highlight.highlight-orange:hover {
    background: rgba(249, 115, 22, 0.4);
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.4), 0 2px 8px rgba(251, 146, 60, 0.3);
}

/* Highlight Color Picker */
.highlight-color-picker {
    position: fixed;
    display: flex;
    gap: 0.35rem;
    background: var(--color-card-bg);
    border-radius: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0.4rem 0.5rem;
    z-index: 10001;
    opacity: 0;
    transform: translateY(4px) scale(0.95);
    transition: opacity 0.15s, transform 0.15s;
}

.highlight-color-picker.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.highlight-color-picker .color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    .highlight-color-picker .color-option {
        width: 36px;
        height: 36px;
    }
}

.highlight-color-picker .color-option:hover {
    transform: scale(1.15);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.highlight-color-picker .color-option:active {
    transform: scale(1.05);
}

[data-theme="dark"] .highlight-color-picker {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .highlight-color-picker .color-option:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Highlight Button (touch devices) */
.highlight-btn {
    position: fixed;
    z-index: 10000;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 2rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(4px) scale(0.95);
    transition: opacity 0.15s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.highlight-btn.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.highlight-btn:active {
    transform: scale(0.95);
}

/* Highlight Delete Menu */
.highlight-menu {
    position: fixed;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0.25rem;
    z-index: 10000;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
}

.highlight-menu.show {
    opacity: 1;
    transform: translateY(0);
}

.highlight-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--color-dark);
    cursor: pointer;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background 0.15s;
}

.highlight-menu-btn:hover {
    background: #f4f4f5;
}

.highlight-menu-btn.delete {
    color: #dc2626;
}

.highlight-menu-btn.delete:hover {
    background: #fef2f2;
}

.highlight-menu-btn svg {
    flex-shrink: 0;
}

/* Selection styling when highlighting */
.study-body ::selection {
    background: rgba(254, 240, 138, 0.9);
}

.study-body ::-moz-selection {
    background: rgba(254, 240, 138, 0.9);
}

/* Toast Notification */
.highlight-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1c1c21;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.highlight-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-icon {
    color: #4ade80;
}

/* =====================================================
   MOBILE STUDY BAR & PANELS
   ===================================================== */

/* Hide mobile bar on desktop */
.mobile-study-bar,
.mobile-panel-overlay,
.mobile-panel {
    display: none;
}

@media (max-width: 900px) {
    /* Mobile Floating Action Bar */
    .mobile-study-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-card-bg);
        border-top: 1px solid #e4e4e7;
        padding: 0.5rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
        justify-content: space-around;
        align-items: center;
        z-index: 100;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    }

    .mobile-bar-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        padding: 0.5rem 0.75rem;
        background: none;
        border: none;
        color: var(--color-text-muted);
        font-size: 0.6875rem;
        font-weight: 500;
        cursor: pointer;
        border-radius: var(--radius-md);
        transition: color 0.2s, background 0.2s;
        text-decoration: none;
    }

    .mobile-bar-btn:hover,
    .mobile-bar-btn:active {
        color: var(--color-primary);
        background: #f4f4f5;
    }

    .mobile-bar-btn.disabled {
        opacity: 0.3;
        pointer-events: none;
    }

    .mobile-bar-btn.saved {
        color: #d97706;
    }

    .mobile-save-btn {
        padding: 0.625rem 1rem;
    }

    /* Add bottom padding to main content to account for bar */
    .bible-study-article {
        padding-bottom: 5rem;
    }

    /* Mobile Panel Overlay */
    .mobile-panel-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
        z-index: 200;
    }

    .mobile-panel-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile Slide-up Panels */
    .mobile-panel {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-card-bg);
        border-radius: 1.5rem 1.5rem 0 0;
        max-height: 70vh;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
        z-index: 201;
        overflow: hidden;
    }

    .mobile-panel.active {
        transform: translateY(0);
    }

    .mobile-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #e4e4e7;
        position: sticky;
        top: 0;
        background: var(--color-card-bg);
    }

    .mobile-panel-header h3 {
        font-size: 1.125rem;
        margin: 0;
    }

    .mobile-panel-close {
        background: none;
        border: none;
        font-size: 1.75rem;
        color: #a1a1aa;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .mobile-panel-content {
        padding: 1rem;
        overflow-y: auto;
        max-height: calc(70vh - 60px);
    }

    /* Chapter Grid */
    .mobile-chapter-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
    }

    .mobile-chapter-item {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        background: #f8fafc;
        border-radius: var(--radius-md);
        font-weight: 600;
        color: var(--color-dark);
        text-decoration: none;
        transition: background 0.2s;
    }

    .mobile-chapter-item:hover,
    .mobile-chapter-item:active {
        background: #e4e4e7;
    }

    .mobile-chapter-item.active {
        background: var(--color-purple);
        color: #fff;
    }

    .mobile-chapter-item.unavailable {
        background: #f4f4f5;
        color: #a1a1aa;
        cursor: default;
        font-weight: 400;
    }

    /* Verse Grid */
    .mobile-panel-section {
        margin-bottom: 1.5rem;
    }

    .mobile-panel-section h4 {
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
        margin-bottom: 0.75rem;
    }

    .mobile-verse-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 0.375rem;
    }

    .mobile-verse-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        background: #f8fafc;
        border-radius: var(--radius-sm);
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--color-dark);
        text-decoration: none;
    }

    .mobile-verse-item:active {
        background: var(--color-primary);
        color: #fff;
    }

    /* Action Buttons */
    .mobile-action-btn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 1rem;
        background: #f8fafc;
        border: none;
        border-radius: var(--radius-md);
        color: var(--color-dark);
        font-size: 0.9375rem;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        margin-bottom: 0.5rem;
    }

    .mobile-action-btn:active {
        background: #e4e4e7;
    }

    .mobile-action-btn svg {
        color: var(--color-text-muted);
    }
}


/* =====================================================
   DARK MODE SPECIFIC OVERRIDES
   ===================================================== */

[data-theme="dark"] .site-footer {
    background: #0a0a0f;
}

[data-theme="dark"] .study-subnav,
[data-theme="dark"] .section-subnav {
    background: #1c1c21;
    border-top-color: #2e2e33;
}

[data-theme="dark"] .study-subnav-item:hover,
[data-theme="dark"] .section-subnav-item:hover {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .scripture-card {
    background: linear-gradient(135deg, #1e293b 0%, #1e1e2e 100%);
}

[data-theme="dark"] .scripture-label {
    color: #60a5fa;
}

[data-theme="dark"] .scripture-reference {
    color: #e4e4e7;
}

[data-theme="dark"] .progress-ring {
    background: #2e2e33;
}

[data-theme="dark"] .progress-number {
    color: #a78bfa;
}


[data-theme="dark"] .day-card {
    background: #1c1c21;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

[data-theme="dark"] .day-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

[data-theme="dark"] .day-card.completed {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .day-card.current {
    border-color: var(--color-primary);
}

[data-theme="dark"] .day-number {
    background: #2e2e33;
    color: #a1a1aa;
}

[data-theme="dark"] .day-info h3 {
    color: #e4e4e7;
}

[data-theme="dark"] .day-info p {
    color: #a1a1aa;
}

[data-theme="dark"] .nav-prev,
[data-theme="dark"] .nav-next {
    color: #e4e4e7;
}

[data-theme="dark"] .nav-prev:hover,
[data-theme="dark"] .nav-next:hover {
    background: #2e2e33;
}

[data-theme="dark"] .nav-overview {
    color: #a78bfa;
}

[data-theme="dark"] .completed-notice {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .mobile-action-btn {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .mobile-action-btn:active {
    background: #3f3f46;
}

[data-theme="dark"] .mobile-panel {
    background: #1c1c21;
}

[data-theme="dark"] .mobile-panel-header {
    border-bottom-color: #2e2e33;
}

[data-theme="dark"] .mobile-chapter-item,
[data-theme="dark"] .mobile-verse-item {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .mobile-chapter-item:hover,
[data-theme="dark"] .mobile-chapter-item:active {
    background: #3f3f46;
}

[data-theme="dark"] .mobile-chapter-item.unavailable {
    background: #1c1c21;
    color: var(--color-text-muted);
}

[data-theme="dark"] .chapter-grid-item {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .chapter-grid-item:hover {
    background: #3f3f46;
}

[data-theme="dark"] .chapter-grid-item.unavailable {
    background: #1c1c21;
    color: var(--color-text-muted);
}

/* Study sidebar - no background, individual sections have backgrounds */

/* User highlights in dark mode - darker backgrounds for readability */
[data-theme="dark"] .user-highlight.highlight-yellow {
    background: rgba(250, 204, 21, 0.25);
    color: #fef08a;
}

[data-theme="dark"] .user-highlight.highlight-yellow:hover {
    background: rgba(250, 204, 21, 0.35);
}

[data-theme="dark"] .user-highlight.highlight-green {
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
}

[data-theme="dark"] .user-highlight.highlight-green:hover {
    background: rgba(34, 197, 94, 0.35);
}

[data-theme="dark"] .user-highlight.highlight-blue {
    background: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}

[data-theme="dark"] .user-highlight.highlight-blue:hover {
    background: rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .user-highlight.highlight-pink {
    background: rgba(236, 72, 153, 0.25);
    color: #f9a8d4;
}

[data-theme="dark"] .user-highlight.highlight-pink:hover {
    background: rgba(236, 72, 153, 0.35);
}

[data-theme="dark"] .user-highlight.highlight-orange {
    background: rgba(249, 115, 22, 0.25);
    color: #fdba74;
}

[data-theme="dark"] .user-highlight.highlight-orange:hover {
    background: rgba(249, 115, 22, 0.35);
}

/* Highlight items (sidebar) */
[data-theme="dark"] .highlight-item {
    background: var(--color-bg-subtle);
}

[data-theme="dark"] .highlight-item.highlight-yellow {
    background: rgba(250, 204, 21, 0.15);
    border-color: #facc15;
}

[data-theme="dark"] .highlight-item.highlight-green {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
}

[data-theme="dark"] .highlight-item.highlight-blue {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

[data-theme="dark"] .highlight-item.highlight-pink {
    background: rgba(236, 72, 153, 0.15);
    border-color: #ec4899;
}

[data-theme="dark"] .highlight-item.highlight-orange {
    background: rgba(249, 115, 22, 0.15);
    border-color: #f97316;
}

[data-theme="dark"] .highlight-item .highlight-text {
    color: var(--color-text);
}

/* Highlight cards (highlights page) */
[data-theme="dark"] .highlight-card {
    background: rgba(234, 179, 8, 0.15);
    border: none;
    border-left: 4px solid #eab308;
    box-shadow: 0 2px 8px var(--color-shadow);
}

[data-theme="dark"] .highlight-card.highlight-green {
    background: rgba(34, 197, 94, 0.15);
    border-left: 4px solid #22c55e;
}

[data-theme="dark"] .highlight-card.highlight-blue {
    background: rgba(59, 130, 246, 0.15);
    border-left: 4px solid #3b82f6;
}

[data-theme="dark"] .highlight-card.highlight-pink {
    background: rgba(236, 72, 153, 0.15);
    border-left: 4px solid #ec4899;
}

[data-theme="dark"] .highlight-card.highlight-orange {
    background: rgba(249, 115, 22, 0.15);
    border-left: 4px solid #f97316;
}

[data-theme="dark"] .highlight-text {
    color: var(--color-text);
}

[data-theme="dark"] .highlight-note {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

[data-theme="dark"] .highlight-menu {
    background: #1c1c21;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .highlight-menu-btn {
    color: #e4e4e7;
}

[data-theme="dark"] .highlight-menu-btn:hover {
    background: #2e2e33;
}

[data-theme="dark"] .highlight-menu-btn.delete {
    color: #f87171;
}

[data-theme="dark"] .highlight-menu-btn.delete:hover {
    background: rgba(248, 113, 113, 0.15);
}

[data-theme="dark"] .user-dropdown {
    background: #1c1c21;
    border-color: #2e2e33;
}

[data-theme="dark"] .dropdown-item:hover {
    background: #2e2e33;
}

[data-theme="dark"] .nav-dropdown-menu {
    background: #1c1c21;
    border-color: #2e2e33;
}

[data-theme="dark"] .nav-dropdown-menu a:hover {
    background: #2e2e33;
}

/* Newsletter card doesn't need background override - parent section has gradient */

[data-theme="dark"] .event-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .book-card,
[data-theme="dark"] .topic-card {
    background: #1c1c21;
}

/* Dark mode transition for smooth theme switching */
body,
.site-header,
.card,
.study-subnav,
.section-subnav,
input,
select,
textarea {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    transition: color 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* Show moon icon in light mode (click to go dark), sun icon in dark mode (click to go light) */
.theme-toggle .theme-icon-light {
    display: none;
}

.theme-toggle .theme-icon-dark {
    display: block;
}

[data-theme="dark"] .theme-toggle .theme-icon-light {
    display: block;
}

[data-theme="dark"] .theme-toggle .theme-icon-dark {
    display: none;
}

/* Additional Dark Mode Overrides */

/* Light gray backgrounds */
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .pagination-btn,
[data-theme="dark"] .badge,
[data-theme="dark"] .tag {
    background: #2e2e33;
    color: #e4e4e7;
    border-color: #3f3f46;
}

[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .pagination-btn:hover {
    background: #3f3f46;
}

[data-theme="dark"] .featured-badge {
    background: #fef3c7;
    color: #92400e;
}

[data-theme="dark"] .filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Tab buttons - keep transparent style */
[data-theme="dark"] .tab-nav {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .tab-btn {
    background: none;
    color: var(--color-text);
}

[data-theme="dark"] .tab-btn.active {
    background: none;
    color: var(--color-text);
}

/* Connect section */
[data-theme="dark"] .connect-section {
    background: var(--color-bg);
}

[data-theme="dark"] .connect-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 15px var(--color-shadow);
}

[data-theme="dark"] .connect-card:hover {
    border-color: var(--color-border-strong);
}

[data-theme="dark"] .card-meta {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}

/* Form elements */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--color-input-bg);
    border-color: #2e2e33;
    color: var(--color-text);
}

[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

[data-theme="dark"] .month-picker select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    border-color: var(--color-border-strong);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--color-purple);
    outline-color: var(--color-purple);
}

/* Buttons */
[data-theme="dark"] .btn-outline {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

[data-theme="dark"] .btn-outline:hover {
    background: #3f3f46;
    border-color: #52525b;
    color: #fff;
}

/* Cards and elevated surfaces */
[data-theme="dark"] .event-card-detailed,
[data-theme="dark"] .study-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .contact-info-card {
    background: var(--color-card-bg);
    border-color: #2e2e33;
}

/* Dark mode plan card thumbnail styles */
[data-theme="dark"] .plan-card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

[data-theme="dark"] .plan-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

[data-theme="dark"] .plan-card.plan-active {
    box-shadow: 0 0 0 2px var(--color-primary), 0 2px 10px rgba(0,0,0,0.3);
}

[data-theme="dark"] .plan-card.plan-completed {
    box-shadow: 0 0 0 2px #22c55e, 0 2px 10px rgba(0,0,0,0.3);
}

[data-theme="dark"] .plan-thumbnail-placeholder {
    background: linear-gradient(135deg, #4c1d95 0%, #581c87 50%, #831843 100%);
}

[data-theme="dark"] .plans-login-prompt {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .contact-details h3 {
    color: #f4f4f5;
}

[data-theme="dark"] .contact-details p {
    color: #a1a1aa;
}

[data-theme="dark"] .contact-note {
    color: #71717a !important;
}

[data-theme="dark"] .social-connect {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .social-connect h3 {
    color: #f4f4f5;
}

[data-theme="dark"] .social-link {
    background: var(--color-bg-subtle);
    color: #a1a1aa;
}

[data-theme="dark"] .social-link:hover {
    background: var(--color-magenta);
    color: white;
}

/* Text colors */
[data-theme="dark"] .card-meta,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .meta,
[data-theme="dark"] .date,
[data-theme="dark"] .time,
[data-theme="dark"] .category {
    color: #a1a1aa;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #f4f4f5;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] label {
    color: #e4e4e7;
}

[data-theme="dark"] a {
    color: inherit;
}

/* Study body content */
[data-theme="dark"] .study-body {
    background: var(--color-card-bg);
    box-shadow: 0 2px 8px var(--color-shadow);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .study-body h1,
[data-theme="dark"] .study-body h2,
[data-theme="dark"] .study-body h3 {
    color: #f4f4f5;
}

[data-theme="dark"] .study-summary {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .study-summary p {
    color: var(--color-text-muted);
}

[data-theme="dark"] .study-not-available {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .study-not-available h2 {
    color: #f4f4f5;
}

[data-theme="dark"] .study-not-available p {
    color: var(--color-text-muted);
}

[data-theme="dark"] .not-available-icon {
    color: var(--color-text-muted);
}

[data-theme="dark"] .chapter-pagination {
    border-top-color: var(--color-border);
}

/* Sidebar */
[data-theme="dark"] .sidebar-section {
    background: var(--color-card-bg);
    box-shadow: 0 2px 8px var(--color-shadow);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .sidebar-section h3 {
    color: var(--color-text-muted);
}

[data-theme="dark"] .chapter-grid-item:hover {
    background: #3f3f46;
}

[data-theme="dark"] .verse-nav-item:hover {
    background: var(--color-purple);
    color: #fff;
}

/* Notice/Alert boxes */
[data-theme="dark"] .notice {
    border-color: #2e2e33;
}

[data-theme="dark"] .notice-success {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

[data-theme="dark"] .notice-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

[data-theme="dark"] .notice-info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* Borders and dividers */
[data-theme="dark"] .dropdown-divider,
[data-theme="dark"] hr {
    border-color: #2e2e33;
}

[data-theme="dark"] .border,
[data-theme="dark"] [class*="border"] {
    border-color: #2e2e33;
}

/* Tables */
[data-theme="dark"] table {
    color: #e4e4e7;
}

[data-theme="dark"] th {
    background: #1c1c21;
    color: #f4f4f5;
}

[data-theme="dark"] td {
    border-color: #2e2e33;
}

[data-theme="dark"] tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Search and filters */
[data-theme="dark"] .search-box,
[data-theme="dark"] .filter-bar {
    background: #1c1c21;
    border-color: #2e2e33;
}

/* Modals */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .popup-content {
    background: #1c1c21;
    color: #e4e4e7;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .popup-header {
    border-color: #2e2e33;
}

/* Toast notifications */
[data-theme="dark"] .highlight-toast {
    background: #2e2e33;
    color: #f4f4f5;
}

/* Cross references and links in study */
[data-theme="dark"] .cross-ref-link {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .cross-ref-link.has-study:hover {
    background: #3f3f46;
}

[data-theme="dark"] .cross-ref-link.no-study {
    color: var(--color-text-muted);
}

/* Related studies */
[data-theme="dark"] .related-study-card {
    background: #2e2e33;
}

[data-theme="dark"] .related-study-card:hover {
    background: #3f3f46;
}

/* Chapter navigation */
[data-theme="dark"] .chapter-nav {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .chapter-nav:hover {
    background: #3f3f46;
}

/* Newsletter section - keep gradient but darker */
[data-theme="dark"] .newsletter-section {
    background: linear-gradient(135deg, #1e3a5f, #2d1f4a);
}

[data-theme="dark"] .newsletter-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

[data-theme="dark"] .newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Blog section */
[data-theme="dark"] .blog-section {
    background: var(--color-bg);
}

[data-theme="dark"] .blog-filter-info {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

[data-theme="dark"] .blog-search input {
    background: var(--color-input-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

[data-theme="dark"] .blog-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .blog-card-content {
    color: var(--color-text);
}

[data-theme="dark"] .blog-card-content h3 {
    color: var(--color-text);
}

[data-theme="dark"] .blog-card-content p {
    color: var(--color-text-muted);
}

[data-theme="dark"] .post-meta {
    color: var(--color-text-muted);
}

[data-theme="dark"] .blog-pagination {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .pagination-info {
    color: var(--color-text-muted);
}

/* Blog sidebar */
[data-theme="dark"] .sidebar-widget {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .category-list a {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .category-list .count {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

[data-theme="dark"] .tag {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

[data-theme="dark"] .blog-empty {
    background: var(--color-bg-subtle);
}

[data-theme="dark"] .blog-empty p {
    color: var(--color-text-muted);
}

/* Blog post page */
[data-theme="dark"] .post-body blockquote,
[data-theme="dark"] .content-main blockquote {
    background: var(--color-bg-subtle);
    border-left-color: var(--color-purple);
}

[data-theme="dark"] .post-tags {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .post-tags span {
    color: var(--color-text-muted);
}

/* Blog post content */
[data-theme="dark"] .blog-post-content {
    background: var(--color-card-bg);
}

/* Blog comments */
[data-theme="dark"] .blog-comments {
    background: #09090b;
}

[data-theme="dark"] .comment {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .comment.reply {
    background: var(--color-bg-subtle);
}

[data-theme="dark"] .comment-date {
    color: var(--color-text-muted);
}

[data-theme="dark"] .comment-author {
    color: var(--color-text);
}

[data-theme="dark"] .comment-author-link {
    color: var(--color-text);
}

[data-theme="dark"] .comment-author-link:hover {
    color: var(--color-magenta);
}

[data-theme="dark"] .comment-content {
    color: var(--color-text-muted);
}

[data-theme="dark"] .comment-content.truncated::after {
    background: linear-gradient(transparent, var(--color-card-bg));
}

[data-theme="dark"] .comment.reply .comment-content.truncated::after {
    background: linear-gradient(transparent, var(--color-bg-subtle));
}

[data-theme="dark"] .comment-form-user {
    background: var(--color-bg-subtle);
}

[data-theme="dark"] .comment-form-username {
    color: var(--color-text);
}

[data-theme="dark"] .comment-form-section {
    background: var(--color-card-bg);
}

[data-theme="dark"] .comment-form input,
[data-theme="dark"] .comment-form textarea {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* User profile dark mode */
/* User profile hero dark mode */
[data-theme="dark"] .user-profile-hero {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C60 20, 80 20, 100 10 L100 0 Z' fill='%23be318e' fill-opacity='0.15'/%3E%3Cpath d='M0 30 C20 50, 40 40, 60 50 C80 60, 90 50, 100 60 L100 100 L0 100 Z' fill='%23be318e' fill-opacity='0.08'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23be318e' fill-opacity='0.2'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%239333ea' fill-opacity='0.15'/%3E%3Ccircle cx='40' cy='70' r='2' fill='%23be318e' fill-opacity='0.2'/%3E%3Ccircle cx='90' cy='80' r='1.5' fill='%239333ea' fill-opacity='0.25'/%3E%3Ccircle cx='10' cy='60' r='1' fill='%23be318e' fill-opacity='0.2'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='%239333ea' fill-opacity='0.15'/%3E%3Ccircle cx='75' cy='85' r='2' fill='%23be318e' fill-opacity='0.12'/%3E%3Ccircle cx='30' cy='45' r='1' fill='%239333ea' fill-opacity='0.2'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #0a0a0c 0%, #1a1025 50%, #2d1f3d 100%);
    background-size: 200px 200px, 100% 100%;
}

[data-theme="dark"] .user-profile-hero::before {
    background: radial-gradient(ellipse, rgba(147,51,234,0.2) 0%, transparent 70%);
}

[data-theme="dark"] .user-profile-hero::after {
    background: radial-gradient(ellipse, rgba(190,49,142,0.25) 0%, transparent 60%);
}

[data-theme="dark"] .profile-stats {
    background: #09090b;
}

[data-theme="dark"] .stat-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .stat-number {
    color: var(--color-magenta);
}

[data-theme="dark"] .profile-section.alt-bg {
    background: #09090b;
}

[data-theme="dark"] .profile-comment {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .study-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .study-card-content h3 {
    color: var(--color-text);
}

/* Event cards */
[data-theme="dark"] .event-card-content {
    color: var(--color-text);
}

[data-theme="dark"] .event-card-description {
    color: var(--color-text-muted);
}

/* Book cards in Bible study */
[data-theme="dark"] .book-card {
    background: var(--color-card-bg);
}

[data-theme="dark"] .book-card:hover {
    background: #2e2e33;
}

[data-theme="dark"] .book-name {
    color: #f4f4f5;
}

[data-theme="dark"] .book-meta {
    color: #a1a1aa;
}

/* Topics */
[data-theme="dark"] .topic-card {
    background: var(--color-card-bg);
}

[data-theme="dark"] .topic-card:hover {
    background: #2e2e33;
}

[data-theme="dark"] .study-topic-tag {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .study-topic-tag:hover {
    background: #3f3f46;
}

/* Save button */
[data-theme="dark"] .save-study-btn {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

[data-theme="dark"] .save-study-btn:hover {
    background: #3f3f46;
    border-color: #52525b;
    color: #fff;
}

[data-theme="dark"] .save-study-btn.saved {
    background: rgba(167, 139, 250, 0.2);
    border-color: var(--color-purple);
    color: var(--color-purple);
}

[data-theme="dark"] .save-study-btn.saved:hover {
    background: rgba(167, 139, 250, 0.3);
}

/* Mobile study bar */
[data-theme="dark"] .mobile-study-bar {
    background: #1c1c21;
    border-color: #2e2e33;
}

[data-theme="dark"] .mobile-bar-btn {
    color: #e4e4e7;
}

[data-theme="dark"] .mobile-bar-btn:hover {
    background: #2e2e33;
}

[data-theme="dark"] .mobile-bar-btn.disabled {
    color: #3f3f46;
}

/* Scrollbars - consistent width in both modes */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-grey);
    border-radius: 6px;
    border: 3px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Selection */
[data-theme="dark"] ::selection {
    background: rgba(167, 139, 250, 0.4);
    color: #fff;
}

/* Login/Register forms */
[data-theme="dark"] .auth-container {
    background: var(--color-bg);
}

[data-theme="dark"] .auth-card {
    background: var(--color-card-bg);
}

/* User menu */
[data-theme="dark"] .user-name {
    color: #e4e4e7;
}

[data-theme="dark"] .dropdown-item {
    color: #e4e4e7;
}

[data-theme="dark"] .dropdown-item-danger {
    color: #f87171;
}

/* Hero sections in dark mode */
[data-theme="dark"] .hero {
    background: linear-gradient(120deg, #1e1033, #121215);
}

[data-theme="dark"] .hero::after {
    opacity: 0.15;
}

[data-theme="dark"] .page-hero {
    background: linear-gradient(110deg, #1e1033, #121215);
}

/* Dark mode hero textures */
[data-theme="dark"] .hero-texture-dots {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='30' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='10' r='2.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='30' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 60px 60px, 100% 100%;
}

[data-theme="dark"] .hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 100px 100px, 100% 100%;
}

[data-theme="dark"] .hero-texture-geometric {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,5 75,65 5,65' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Crect x='10' y='10' width='20' height='20' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none' transform='rotate(15 20 20)'/%3E%3Ccircle cx='65' cy='25' r='10' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpolygon points='20,70 30,55 10,55' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 80px 80px, 100% 100%;
}

[data-theme="dark"] .hero-texture-topographic {
    background:
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 20 C80 25, 95 45, 90 70 C85 95, 55 100, 35 85 C15 70, 20 40, 40 25 C50 18, 55 18, 60 20' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M60 35 C75 38, 82 52, 78 68 C74 84, 52 88, 40 78 C28 68, 32 48, 45 38 C52 33, 57 33, 60 35' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 50 C68 52, 72 60, 70 70 C68 80, 55 82, 48 75 C41 68, 45 58, 52 52 C56 50, 58 50, 60 50' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 120px 120px, 100% 100%;
}

[data-theme="dark"] .hero-texture-crosses {
    background:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 20 L25 30 M20 25 L30 25' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1.5'/%3E%3Cpath d='M10 5 L10 12 M6.5 8.5 L13.5 8.5' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Cpath d='M42 38 L42 46 M38 42 L46 42' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M8 40 L8 45 M5.5 42.5 L10.5 42.5' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M40 8 L40 14 M37 11 L43 11' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 50px 50px, 100% 100%;
}

[data-theme="dark"] .hero-texture-stars {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpath d='M15 45 L16.5 51 L23 51 L18 55 L19.5 61 L15 57 L10.5 61 L12 55 L7 51 L13.5 51 Z' fill='%23ffffff' fill-opacity='0.06'/%3E%3Cpath d='M65 50 L66 54 L70 54 L67 57 L68 61 L65 58 L62 61 L63 57 L60 54 L64 54 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M60 15 L61 18 L64 18 L61.5 20 L62.5 23 L60 21 L57.5 23 L58.5 20 L56 18 L59 18 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 80px 80px, 100% 100%;
}

[data-theme="dark"] .hero-texture-organic {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C60 20, 80 20, 100 10 L100 0 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M0 30 C20 50, 40 40, 60 50 C80 60, 90 50, 100 60 L100 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='40' cy='70' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='90' cy='80' r='1.5' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='10' cy='60' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 200px 200px, 100% 100%;
}

[data-theme="dark"] .hero-texture-diamonds {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 60px 60px, 100% 100%;
}

[data-theme="dark"] .hero-texture-circuit {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L30 10 L30 30 L50 30' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M70 10 L70 25 L90 25' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M10 50 L25 50 L25 70 L40 70 L40 90' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 60 L60 80 L80 80 L80 60' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='90' cy='25' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='40' cy='90' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 100px 100px, 100% 100%;
}

/* Dark mode dashboard hero with textures */
[data-theme="dark"] .dashboard-hero.hero-texture-dots {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='30' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='10' r='2.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='30' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 60px 60px, 100% 100%;
}

[data-theme="dark"] .dashboard-hero.hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 100px 100px, 100% 100%;
}

[data-theme="dark"] .dashboard-hero.hero-texture-geometric {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,5 75,65 5,65' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Crect x='10' y='10' width='20' height='20' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none' transform='rotate(15 20 20)'/%3E%3Ccircle cx='65' cy='25' r='10' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpolygon points='20,70 30,55 10,55' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 80px 80px, 100% 100%;
}

[data-theme="dark"] .dashboard-hero.hero-texture-topographic {
    background:
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 20 C80 25, 95 45, 90 70 C85 95, 55 100, 35 85 C15 70, 20 40, 40 25 C50 18, 55 18, 60 20' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M60 35 C75 38, 82 52, 78 68 C74 84, 52 88, 40 78 C28 68, 32 48, 45 38 C52 33, 57 33, 60 35' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 50 C68 52, 72 60, 70 70 C68 80, 55 82, 48 75 C41 68, 45 58, 52 52 C56 50, 58 50, 60 50' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 120px 120px, 100% 100%;
}

[data-theme="dark"] .dashboard-hero.hero-texture-crosses {
    background:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 20 L25 30 M20 25 L30 25' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1.5'/%3E%3Cpath d='M10 5 L10 12 M6.5 8.5 L13.5 8.5' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Cpath d='M42 38 L42 46 M38 42 L46 42' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M8 40 L8 45 M5.5 42.5 L10.5 42.5' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M40 8 L40 14 M37 11 L43 11' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 50px 50px, 100% 100%;
}

[data-theme="dark"] .dashboard-hero.hero-texture-stars {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpath d='M15 45 L16.5 51 L23 51 L18 55 L19.5 61 L15 57 L10.5 61 L12 55 L7 51 L13.5 51 Z' fill='%23ffffff' fill-opacity='0.06'/%3E%3Cpath d='M65 50 L66 54 L70 54 L67 57 L68 61 L65 58 L62 61 L63 57 L60 54 L64 54 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M60 15 L61 18 L64 18 L61.5 20 L62.5 23 L60 21 L57.5 23 L58.5 20 L56 18 L59 18 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 80px 80px, 100% 100%;
}

[data-theme="dark"] .dashboard-hero.hero-texture-organic {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C60 20, 80 20, 100 10 L100 0 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M0 30 C20 50, 40 40, 60 50 C80 60, 90 50, 100 60 L100 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='40' cy='70' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='90' cy='80' r='1.5' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='10' cy='60' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 200px 200px, 100% 100%;
}

[data-theme="dark"] .dashboard-hero.hero-texture-diamonds {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 60px 60px, 100% 100%;
}

[data-theme="dark"] .dashboard-hero.hero-texture-circuit {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L30 10 L30 30 L50 30' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M70 10 L70 25 L90 25' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M10 50 L25 50 L25 70 L40 70 L40 90' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 60 L60 80 L80 80 L80 60' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='90' cy='25' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='40' cy='90' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 100px 100px, 100% 100%;
}

[data-theme="dark"] .bible-study-hero {
    background: linear-gradient(135deg, rgba(30, 16, 51, 0.9) 0%, rgba(18, 18, 21, 0.9) 100%),
                url('/assets/imgs/gallery/bible-study-hero-image.jpg');
    background-size: cover;
    background-position: center;
}

[data-theme="dark"] .topics-hero {
    background: linear-gradient(135deg, rgba(30, 16, 51, 0.9) 0%, rgba(18, 18, 21, 0.9) 100%),
                url('/assets/imgs/gallery/bible-study-topics-hero-image.jpg');
    background-size: cover;
    background-position: center;
}

[data-theme="dark"] .study-header {
    background: linear-gradient(135deg, #1e1033 0%, #121215 100%);
}

/* Dark mode study header textures */
[data-theme="dark"] .study-header.hero-texture-dots {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='50' cy='10' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='10' cy='50' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='50' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 60px 60px, 100% 100%;
}
[data-theme="dark"] .study-header.hero-texture-waves {
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 50 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 10 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 100px 100px, 100% 100%;
}
[data-theme="dark"] .study-header.hero-texture-geometric {
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,10 70,30 70,60 40,80 10,60 10,30' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpolygon points='40,25 55,35 55,55 40,65 25,55 25,35' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 80px 80px, 100% 100%;
}
[data-theme="dark"] .study-header.hero-texture-topographic {
    background: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='60' cy='60' rx='50' ry='30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cellipse cx='60' cy='60' rx='35' ry='20' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cellipse cx='60' cy='60' rx='20' ry='10' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 120px 120px, 100% 100%;
}
[data-theme="dark"] .study-header.hero-texture-crosses {
    background: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 10 L25 40 M10 25 L40 25' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 50px 50px, 100% 100%;
}
[data-theme="dark"] .study-header.hero-texture-stars {
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 15 L43 30 L58 30 L46 40 L50 55 L40 47 L30 55 L34 40 L22 30 L37 30 Z' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Ccircle cx='15' cy='15' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='65' cy='65' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 80px 80px, 100% 100%;
}
[data-theme="dark"] .study-header.hero-texture-organic {
    background: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 100 Q80 50 120 80 T180 100 Q150 150 100 130 T50 100' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M20 50 Q50 20 80 40 T120 30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M150 150 Q170 180 190 160' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 200px 200px, 100% 100%;
}
[data-theme="dark"] .study-header.hero-texture-diamonds {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 60px 60px, 100% 100%;
}
[data-theme="dark"] .study-header.hero-texture-circuit {
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 50 L30 50 L30 30 L50 30 L50 50 L70 50 L70 70 L90 70' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='70' cy='70' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E"), linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 100px 100px, 100% 100%;
}

[data-theme="dark"] .ministries {
    background: linear-gradient(120deg, #1c1c21, #121215);
}

/* Blog featured hero */
[data-theme="dark"] .blog-featured-hero {
    background: linear-gradient(135deg, #1e1033, #121215);
}


/* ==================== Author Links ==================== */
.author-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.author-link:hover {
    color: var(--color-primary, #fff);
    text-decoration-color: currentColor;
}

/* Author link in light text areas (hero sections) */
.blog-post-header .author-link,
.study-header .author-link {
    color: inherit;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.blog-post-header .author-link:hover,
.study-header .author-link:hover {
    text-decoration-color: #fff;
    color: #fff;
}

/* Author link in regular content areas */
.post-author .author-link {
    font-weight: 500;
}


/* ==================== Avatar Upload (Settings) ==================== */
.avatar-upload-section {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.current-avatar {
    flex-shrink: 0;
}

.current-avatar .avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-border);
}

.current-avatar .avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.avatar-upload-form {
    display: inline;
}

.btn-file {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.avatar-help {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.btn-danger-outline {
    color: #dc2626;
    border-color: #dc2626;
}

.btn-danger-outline:hover {
    background: #dc2626;
    color: white;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dark mode avatar */
[data-theme="dark"] .current-avatar .avatar-preview {
    border-color: var(--color-border);
}

[data-theme="dark"] .btn-danger-outline {
    color: #f87171;
    border-color: #f87171;
}

[data-theme="dark"] .btn-danger-outline:hover {
    background: #dc2626;
    color: white;
}

/* Dark mode history page */
[data-theme="dark"] .timeline-date {
    color: var(--color-text-muted);
}

[data-theme="dark"] .history-card {
    background: var(--color-card-bg);
    border-color: var(--color-border);
}

[data-theme="dark"] .history-card:hover {
    border-color: var(--color-purple);
}

[data-theme="dark"] .history-book {
    color: var(--color-purple);
}

[data-theme="dark"] .history-title {
    color: var(--color-text);
}

[data-theme="dark"] .progress-bar-mini {
    background: var(--color-border);
}

[data-theme="dark"] .time-spent {
    color: var(--color-text-muted);
}

[data-theme="dark"] .completed-badge {
    background: #166534;
    color: #dcfce7;
}

/* =====================================================
   AUDIO PLAYER (Text-to-Speech)
   ===================================================== */

/* Study Action Buttons (Listen, Print) */
.study-body {
    position: relative;
}

.study-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.study-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #c4c4c4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.study-action-btn:hover {
    color: var(--color-text-muted);
}

.study-action-btn:active {
    transform: scale(0.95);
}

/* Listen button - more prominent */
.listen-fab {
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
}

.listen-fab:hover {
    color: var(--color-purple);
    border-color: var(--color-purple);
    transform: scale(1.1);
}

.listen-fab.playing {
    border-color: #22c55e;
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.5), 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.7), 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

.listen-fab .pause-icon {
    display: none;
}

.listen-fab.playing .play-icon {
    display: none;
}

.listen-fab.playing .pause-icon {
    display: block;
}

.mobile-listen-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mobile-listen-btn .pause-icon {
    display: none;
}

/* Font Settings Panel */
.font-settings-wrapper {
    position: relative;
}

.font-settings-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    min-width: 180px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 100;
}

.font-settings-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.font-setting-group {
    margin-bottom: 0.75rem;
}

.font-setting-group:last-of-type {
    margin-bottom: 1rem;
}

.font-setting-group label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.font-size-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.font-size-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.font-size-btn:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
}

.font-size-display {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
}

.font-family-select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
}

.font-family-select:focus {
    outline: none;
    border-color: var(--color-purple);
}

.font-reset-btn {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.font-reset-btn:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

/* Floating Audio Player */
.audio-player {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    background: #8c0053;
    color: white;
    z-index: 1000;
    transition: bottom 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.audio-player.active {
    bottom: 0;
}

@media (max-width: 768px) {
    .audio-player.active {
        bottom: 60px; /* Above mobile nav bar */
    }
}

.audio-player-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.audio-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.audio-title {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-progress-text {
    font-size: 0.75rem;
    opacity: 0.8;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.audio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

.audio-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.audio-play-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
}

.audio-play-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.audio-play-btn .pause-icon {
    display: none;
}

.audio-speed-btn {
    font-size: 0.75rem;
    font-weight: 600;
    width: auto;
    padding: 0 0.5rem;
    border-radius: var(--radius-xs);
}

.audio-progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.audio-progress-fill {
    height: 100%;
    background: white;
    width: 0;
    transition: width 0.3s ease;
}

/* Hide back/forward buttons on small screens */
@media (max-width: 480px) {
    .audio-back-btn,
    .audio-forward-btn {
        display: none;
    }

    .audio-info {
        max-width: 120px;
    }
}

/* Dark mode */
[data-theme="dark"] .study-action-btn {
    color: #6b6b6b;
}

[data-theme="dark"] .study-action-btn:hover {
    color: var(--color-text-muted);
}

[data-theme="dark"] .listen-fab {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .listen-fab:hover {
    color: var(--color-purple);
    border-color: var(--color-purple);
}

[data-theme="dark"] .font-settings-panel {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .font-size-btn {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .font-size-btn:hover {
    border-color: var(--color-purple);
    color: var(--color-purple);
}

[data-theme="dark"] .font-family-select {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .font-reset-btn {
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

[data-theme="dark"] .font-reset-btn:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

[data-theme="dark"] .audio-player {
    background: linear-gradient(135deg, var(--color-purple), #2d1650);
}

/* =====================================================
   LOGIN PROMPT MODAL
   ===================================================== */
.login-prompt-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.login-prompt-modal.active {
    opacity: 1;
    visibility: visible;
}

.login-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.login-modal-content {
    position: relative;
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s;
}

.login-prompt-modal.active .login-modal-content {
    transform: scale(1) translateY(0);
}

.login-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 1.5rem;
    color: var(--color-text-light);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.login-modal-close:hover {
    background: var(--color-bg);
    color: var(--color-dark);
}

.login-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-purple));
    border-radius: 50%;
    color: white;
}

.login-modal-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: var(--color-dark);
}

.login-modal-content > p {
    margin: 0 0 1.5rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.login-feature-text {
    font-weight: 600;
    color: var(--color-primary);
}

.login-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.login-modal-actions .btn {
    flex: 1;
    padding: 0.75rem 1rem;
}

.login-modal-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.login-modal-benefits span {
    white-space: nowrap;
}

/* Dark mode */
[data-theme="dark"] .login-modal-content {
    background: #1a1a2e;
}

[data-theme="dark"] .login-modal-content h3 {
    color: var(--color-light);
}

[data-theme="dark"] .login-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-light);
}

/* ==================== Bible Study Inline Editor ==================== */
/* Uses shared CMS editor variables from cms-editor.css */

/* Status toggle button */
.study-status-toggle {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-card-bg);
    border: 2px solid var(--color-border);
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px var(--color-shadow);
}

.study-status-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-shadow);
}

.study-status-toggle .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
}

.study-status-toggle.published .status-indicator {
    background: var(--cms-success, #10b981);
}

.study-status-toggle .status-text {
    color: var(--color-text);
}

.study-status-toggle.saving {
    opacity: 0.7;
    pointer-events: none;
}

/* Editable elements for Bible study - matches CMS editor styling */
[data-editable].can-edit {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-editable].can-edit:hover {
    outline: 2px dashed var(--cms-purple, var(--color-purple));
    outline-offset: 4px;
}

[data-editable].can-edit:hover::after {
    content: 'Click to edit';
    position: absolute;
    top: -24px;
    right: 0;
    font-size: 0.7rem;
    padding: 2px 8px;
    background: var(--cms-purple, var(--color-purple));
    color: white;
    border-radius: 3px;
    pointer-events: none;
}

[data-editable].editing {
    outline: 2px solid var(--cms-purple, var(--color-purple));
    outline-offset: 4px;
    border-radius: 4px;
}

[data-editable].editing:hover::after {
    display: none;
}

/* Bible study floating toolbar - matches CMS floating toolbar */
.bible-study-toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--color-shadow);
}

.bible-study-toolbar.visible {
    display: flex;
}

.toolbar-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.toolbar-buttons button {
    padding: 0.4rem 0.6rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-buttons button:hover {
    background: var(--cms-purple, var(--color-purple));
    color: white;
    border-color: var(--cms-purple, var(--color-purple));
}

.toolbar-buttons button.active {
    background: var(--cms-purple, var(--color-purple));
    color: white;
    border-color: var(--cms-purple, var(--color-purple));
}

.toolbar-separator {
    width: 1px;
    background: var(--color-border);
    margin: 0 0.25rem;
}

.toolbar-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.toolbar-save,
.toolbar-cancel {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-save {
    background: var(--cms-purple, var(--color-purple));
    color: white;
}

.toolbar-save:hover {
    background: var(--cms-purple-dark, #3d1f63);
}

.toolbar-cancel {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.toolbar-cancel:hover {
    background: var(--color-border);
}

.bible-study-toolbar.has-changes .toolbar-save {
    animation: pulse-save 1s infinite;
}

@keyframes pulse-save {
    0%, 100% { box-shadow: 0 0 0 0 rgba(75, 38, 121, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(75, 38, 121, 0); }
}

.toolbar-status {
    font-size: 0.8rem;
    text-align: center;
    min-height: 1.2em;
}

.toolbar-status.saving {
    color: var(--color-text-muted);
}

.toolbar-status.success {
    color: var(--cms-success, #10b981);
}

.toolbar-status.error {
    color: var(--cms-error, #ef4444);
}

/* Bible Study Media Modal */
.bible-study-media-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.media-modal-content {
    position: relative;
    background: var(--color-card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.media-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.media-modal-header h3 {
    margin: 0;
}

.media-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.25rem 0.5rem;
}

.media-modal-close:hover {
    color: var(--color-text);
}

.media-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.media-upload-area {
    margin-bottom: 1.5rem;
}

.media-upload-area input[type="file"] {
    display: none;
}

.media-upload-area label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.media-upload-area label:hover {
    border-color: var(--color-purple);
    background: var(--color-grey);
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

.media-grid-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.media-grid-item:hover {
    border-color: var(--color-purple);
    transform: scale(1.05);
}

.media-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Notification toast - matches CMS notification */
.bible-study-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 0.75rem 1.5rem;
    background: var(--cms-dark-bg, #1a1a2e);
    color: white;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.bible-study-notification.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.bible-study-notification.success {
    background: var(--cms-success, #059669);
}

.bible-study-notification.error {
    background: var(--cms-error, #dc2626);
}

.bible-study-notification.info {
    background: #0891b2;
}

/* Study text container */
.study-text {
    min-height: 100px;
}

/* Dark mode adjustments */
[data-theme="dark"] .bible-study-toolbar {
    background: var(--cms-dark-bg, #1a1a2e);
    border-color: #333;
}

[data-theme="dark"] .toolbar-buttons button {
    background: var(--cms-dark-bg-light, #2a2a4a);
    border-color: #444;
    color: var(--color-light);
}

[data-theme="dark"] .toolbar-buttons button:hover,
[data-theme="dark"] .toolbar-buttons button.active {
    background: var(--cms-purple, var(--color-purple));
    color: white;
    border-color: var(--cms-purple, var(--color-purple));
}

[data-theme="dark"] .toolbar-cancel {
    background: var(--cms-dark-bg-light, #2a2a4a);
    border-color: #444;
    color: var(--color-light);
}

[data-theme="dark"] .study-status-toggle {
    background: var(--cms-dark-bg, #1a1a2e);
    border-color: #333;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .study-status-toggle {
        top: auto;
        bottom: 80px;
        right: 10px;
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .bible-study-toolbar {
        min-width: auto;
        max-width: calc(100vw - 40px);
    }

    [data-editable].can-edit:hover::after {
        display: none;
    }
}

/* =====================
   Bible Verse Links
   ===================== */
.bible-verse-link {
    color: var(--color-magenta);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-magenta);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bible-verse-link:hover {
    color: var(--color-purple);
    border-bottom-style: solid;
    border-bottom-color: var(--color-purple);
}

/* Dark mode */
[data-theme="dark"] .bible-verse-link {
    color: var(--color-teal);
    border-bottom-color: var(--color-teal);
}

[data-theme="dark"] .bible-verse-link:hover {
    color: var(--color-magenta);
    border-bottom-color: var(--color-magenta);
}

/* =====================================================
   COOKIE CONSENT POPUP
   ===================================================== */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 1rem;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cookie-consent.visible {
    transform: translateY(0);
    opacity: 1;
}

.cookie-consent.hiding {
    transform: translateY(100%);
    opacity: 0;
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border: 1px solid var(--color-border);
}

.cookie-consent-text {
    flex: 1;
}

.cookie-consent-text h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.cookie-consent-text p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.cookie-consent-text a {
    color: var(--color-primary);
    text-decoration: underline;
}

.cookie-consent-text a:hover {
    color: var(--color-secondary);
}

.cookie-consent-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-consent-actions .btn {
    white-space: nowrap;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cookie-consent {
        padding: 0.75rem;
    }

    .cookie-consent-content {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 1rem;
    }

    .cookie-consent-actions {
        width: 100%;
        justify-content: center;
    }

    .cookie-consent-actions .btn {
        flex: 1;
        max-width: 150px;
    }
}

/* Dark mode */
[data-theme="dark"] .cookie-consent-content {
    background: var(--color-bg-elevated);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* =====================================================
   LEGAL PAGES (Privacy, Terms, Cookie Policy, GDPR)
   ===================================================== */
.legal-content {
    padding: 4rem 0;
}

.legal-content .container.narrow {
    max-width: 800px;
}

.legal-content .legal-updated {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.legal-content h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.legal-content h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.legal-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.legal-content ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.legal-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--color-secondary);
}

.legal-content .contact-details {
    list-style: none;
    padding-left: 0;
    background: var(--color-bg-subtle);
    padding: 1.25rem;
    border-radius: var(--radius-md);
}

.legal-content .contact-details li {
    margin-bottom: 0.5rem;
}

.legal-content .contact-details li:last-child {
    margin-bottom: 0;
}

/* Cookie table */
.cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.875rem;
}

.cookie-table th,
.cookie-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.cookie-table th {
    background: var(--color-bg-subtle);
    font-weight: 600;
    color: var(--color-text);
}

.cookie-table td {
    color: var(--color-text-muted);
}

.cookie-table tr:last-child td {
    border-bottom: none;
}

/* GDPR Rights grid */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}

.right-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.right-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--color-primary);
}

.right-card p {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* Footer legal links */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.footer-legal a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--color-primary);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .legal-content {
        padding: 2.5rem 0;
    }

    .legal-content h2 {
        font-size: 1.25rem;
    }

    .cookie-table {
        font-size: 0.8125rem;
    }

    .cookie-table th,
    .cookie-table td {
        padding: 0.5rem;
    }

    .rights-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   POLICIES HUB PAGE
   ===================================================== */
.policies-section {
    padding: 4rem 0;
}

.policy-category {
    margin-bottom: 3rem;
}

.policy-category h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.policy-category > p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.policy-card {
    display: block;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.policy-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.policy-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.policy-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.policy-card p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.policy-contact {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    text-align: center;
}

.policy-contact h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.policy-contact p {
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .policies-section {
        padding: 2.5rem 0;
    }

    .policy-grid {
        grid-template-columns: 1fr;
    }

    .policy-category {
        margin-bottom: 2rem;
    }
}

/* =====================================================
   BIBLE STUDY NAVIGATOR POPUP
   ===================================================== */

/* Browse All Books inline button (below chapter grid) */
.browse-all-books-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.browse-all-books-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.browse-all-books-btn svg {
    stroke: currentColor;
    flex-shrink: 0;
}

/* Backdrop overlay */
.study-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.study-nav-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* Main popup container */
.study-nav-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow:
        0 0 0 1px var(--color-border),
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 12px 24px -8px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.study-nav-popup.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Close button - positioned top right */
.study-nav-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--color-bg-subtle);
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 10;
}

.study-nav-close:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.study-nav-close svg {
    width: 18px;
    height: 18px;
}

/* Scrollable body */
.study-nav-body {
    flex: 1;
    overflow-y: auto;
    padding: 2.5rem 1.5rem 1.5rem;
    overscroll-behavior: contain;
}

/* Testament sections */
.study-nav-testament {
    margin-bottom: 1.5rem;
}

.study-nav-testament:last-child {
    margin-bottom: 0;
}

.study-nav-testament h4 {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

/* Book buttons grid */
.study-nav-book-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.study-nav-book {
    background: var(--color-bg-subtle);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
}

.study-nav-book:hover:not(:disabled) {
    background: var(--color-primary);
    color: white;
}

.study-nav-book.no-studies {
    opacity: 0.35;
    cursor: not-allowed;
}

.study-nav-book .study-count {
    background: var(--color-primary);
    color: white;
    font-size: 0.625rem;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
}

.study-nav-book:hover:not(:disabled) .study-count {
    background: white;
    color: var(--color-primary);
}

/* Back button */
.study-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-bg-subtle);
    border: none;
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0.875rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
}

.study-nav-back:hover {
    background: var(--color-primary);
    color: white;
}

.study-nav-back svg {
    transition: transform 0.2s ease;
}

.study-nav-back:hover svg {
    transform: translateX(-2px);
}

/* Selected book title */
.study-nav-chapters h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

/* Chapter number grid */
.study-nav-chapter-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.study-nav-chapter {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-subtle);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.2s ease;
}

a.study-nav-chapter:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(235, 0, 139, 0.3);
}

.study-nav-chapter.unavailable {
    opacity: 0.25;
    cursor: not-allowed;
    background: transparent;
    border: 1px dashed var(--color-border);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .study-nav-popup {
        width: 95%;
        max-height: 80vh;
        border-radius: var(--radius-xl);
    }

    .study-nav-body {
        padding: 2.25rem 1.25rem 1.25rem;
    }

    .study-nav-chapter-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.375rem;
    }

    .study-nav-chapter {
        font-size: 0.8125rem;
    }
}

/* Dark mode enhancements */
[data-theme="dark"] .study-nav-popup {
    box-shadow:
        0 0 0 1px var(--color-border),
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 12px 24px -8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .study-nav-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .study-nav-chapter.unavailable {
    border-color: var(--color-border);
}