/* Bible study, reading plans and My Studies. Loaded after base.css on those pages only. */

.form-error-message {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

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

/* 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;
}

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

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

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

/* Search Autocomplete */
.search-autocomplete-wrapper {
    position: relative;
    flex: 1;
}

/* Ensure dropdown is visible outside hero */
.page-hero .study-search-form {
    position: relative;
    z-index: 50;
    overflow: visible;
}

.page-hero .search-autocomplete-wrapper {
    position: relative;
}

/* Question filters and list styles */
.questions-filters {
    padding: 1.5rem 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-pill .count {
    font-size: 0.75rem;
    opacity: 0.8;
}

.topic-questions-section {
    margin-bottom: 3rem;
}

.topic-questions-section .topic-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #eee;
}

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

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

.question-card .question-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

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

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

.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;
}

@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 .study-chapter {
    font-size: 1.25rem;
    font-weight: 700;
}

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

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

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

.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;
}

/* 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;
}

/* 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;
}

.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 .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.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-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-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-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);
}

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

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

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

/* Draft chapter indicator (visible to editors only) */
.chapter-grid-item.draft {
    background: #fef3c7;
    border: 1px dashed #f59e0b;
    color: #92400e;
}

.chapter-grid-item.draft:hover {
    background: #fde68a;
}

.mobile-chapter-item.draft {
    background: #fef3c7;
    border: 1px dashed #f59e0b;
    color: #92400e;
}

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

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

/* 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 h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.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;
}

.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.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;
}

.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-snippet mark {
    background: rgba(255, 20, 147, 0.2);
    color: inherit;
    padding: 0.1rem 0.25rem;
    border-radius: 0.125rem;
}

/* 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;
}

/* Bible Study Responsive */
@media (max-width: 900px) {
    .study-layout {
            grid-template-columns: 1fr;
        }
    .study-sidebar {
            display: none;
        }
    .book-nav-inner {
            flex-direction: column;
        }
    .book-nav-link {
            width: 100%;
            text-align: center;
        }
}

@media (max-width: 600px) {
    .books-grid {
            grid-template-columns: repeat(2, 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;
        }
    /* 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 .print-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;
        }
    .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;
        }
    /* 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;
        }
}

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

.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-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 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-title {
    font-size: 1rem;
    margin: 0.25rem 0 0.5rem;
    line-height: 1.3;
}

/* 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 .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) {
    .topic-studies-grid {
            grid-template-columns: 1fr;
        }
    .related-topics-grid {
            justify-content: flex-start;
        }
}

.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-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.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;
        }
}

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

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

.questions-popular .view-all-link:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .questions-popular .section-header {
            flex-direction: column;
            text-align: center;
        }
}

.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-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.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 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-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;
}

.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-details .study-title {
    font-size: 1.1rem;
    margin: 0.35rem 0;
}

.study-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #a1a1aa;
}

/* 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;
}

/* Question CTA */
.question-cta {
    padding: 3rem 0;
}

.question-cta .cta-box {
    text-align: center;
    padding: 3rem 2.5rem;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 50%, var(--color-blue) 100%);
    border-radius: var(--radius-xl);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.question-cta .cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 40%);
    pointer-events: none;
}

.question-cta .cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.question-cta .cta-buttons .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 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;
        }
}

/* ========================================
   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);
}

/* 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;
}

.link-more {
    font-size: 0.85rem;
    color: var(--color-blue);
}

.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-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;
}

.highlight-item {
    padding: 0.75rem;
    border-radius: 0.35rem;
    border-left: 3px solid;
}

.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-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;
}

/* Dashboard Responsive */
@media (max-width: 900px) {
    .dashboard-columns {
            grid-template-columns: 1fr;
        }
    .dashboard-welcome {
            flex-direction: column;
            text-align: center;
            gap: 1.5rem;
        }
}

/* =====================================================
   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%;
}

/* 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-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-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.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));
}

.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-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 .restart-form {
    margin: 0;
}

.plan-actions .restart-form .btn {
    width: 100%;
}

/* =====================================================
   SAVED STUDIES PAGE
   ===================================================== */

.saved-studies-page,
.highlights-page,
.history-page {
    padding: 2rem 0 4rem;
}

.header-content h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.header-content p {
    color: var(--color-text-muted);
}

.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;
}

.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);
}

.highlights-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.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;
        }
    .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;
        }
}

/* =====================================================
   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;
}

.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-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;
}

.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;
}

.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;
}

/* 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;
}

.plan-action-btn:active {
    transform: scale(0.98);
}

.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;
        }
    /* Actions column inside hero */
        .plan-hero-actions {
            flex-shrink: 0;
            width: 220px;
        }
    .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-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-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;
}

.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-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-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-actions {
            margin-bottom: 1.5rem;
        }
    .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;
        }
}

/* =====================================================
   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.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.unavailable {
            background: #f4f4f5;
            color: #a1a1aa;
            cursor: default;
            font-weight: 400;
        }
    /* Verse Grid */
        .mobile-panel-section {
            margin-bottom: 1.5rem;
        }
    .mobile-verse-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 0.375rem;
        }
    .mobile-action-btn svg {
            color: var(--color-text-muted);
        }
}

[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-number {
    background: #2e2e33;
    color: #a1a1aa;
}

[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: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: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.draft,
[data-theme="dark"] .mobile-chapter-item.draft {
    background: #422006;
    border-color: #f59e0b;
    color: #fbbf24;
}

[data-theme="dark"] .chapter-grid-item.draft:hover {
    background: #78350f;
}

[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);
}

[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);
}

/* 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);
}

/* 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;
}

/* 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;
}

/* 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;
}

[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;
}

/* 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%;
}

/* 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;
}

.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 */
/* Note: Status toggle button is now in CMS toolbar (see cms-editor.css) */

/* 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;
}

/* 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;
}

.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-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);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bible-study-toolbar {
            min-width: auto;
            max-width: calc(100vw - 40px);
        }
    [data-editable].can-edit:hover::after {
            display: none;
        }
}

/* =====================================================
   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);
}

/* Questions page dark mode */
[data-theme="dark"] .questions-filters {
    background: #27272a;
    border-bottom-color: #3f3f46;
}

[data-theme="dark"] .filter-pill {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .filter-pill:hover {
    background: #3f3f46;
}

[data-theme="dark"] .filter-pill.active {
    background: var(--color-purple);
    color: #fff;
}

[data-theme="dark"] .sort-select {
    background: #2e2e33;
    border-color: #3f3f46;
    color: #e4e4e7;
}

[data-theme="dark"] .topic-questions-section .topic-heading {
    border-bottom-color: #2e2e33;
}

[data-theme="dark"] .topic-questions-section .topic-heading a {
    color: #f4f4f5;
}

[data-theme="dark"] .topic-questions-section .topic-heading a:hover {
    color: var(--color-purple);
}

[data-theme="dark"] .topic-questions-section .question-count {
    color: #71717a;
}

[data-theme="dark"] .question-card {
    background: #27272a;
    border-color: #3f3f46;
}

[data-theme="dark"] .question-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.15);
}

[data-theme="dark"] .question-card .question-text {
    color: #f4f4f5;
}

[data-theme="dark"] .question-card .question-description {
    color: #a1a1aa;
}

[data-theme="dark"] .question-card .study-count {
    color: #71717a;
}

/* Single question page dark mode */
[data-theme="dark"] .question-studies {
    background: #18181b;
}

[data-theme="dark"] .question-studies h2 {
    color: #f4f4f5;
}

[data-theme="dark"] .question-study-card {
    background: #27272a;
    border-color: #3f3f46;
}

[data-theme="dark"] .question-study-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.15);
}

[data-theme="dark"] .study-rank {
    background: #3f3f46;
    color: var(--color-purple);
}

[data-theme="dark"] .question-study-card:hover .study-rank {
    background: var(--color-purple);
    color: #fff;
}

[data-theme="dark"] .study-reference {
    color: #60a5fa;
}

[data-theme="dark"] .study-details .study-title {
    color: #f4f4f5;
}

[data-theme="dark"] .study-details .study-summary {
    color: #a1a1aa;
}

[data-theme="dark"] .study-meta {
    color: #71717a;
}

[data-theme="dark"] .read-arrow {
    color: #71717a;
}

[data-theme="dark"] .question-study-card:hover .read-arrow {
    color: var(--color-magenta);
}

/* Related questions dark mode */
[data-theme="dark"] .related-questions {
    background: #1c1c21;
}

[data-theme="dark"] .related-questions h2 {
    color: #f4f4f5;
}

[data-theme="dark"] .related-question-card {
    background: #27272a;
}

[data-theme="dark"] .related-question-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background: #3f3f46;
}

[data-theme="dark"] .related-question-card .question-text {
    color: #e4e4e7;
}

[data-theme="dark"] .related-question-card .study-count {
    color: #60a5fa;
}

/* Question CTA dark mode - uses same gradient as light mode */
[data-theme="dark"] .question-cta {
    background: #18181b;
}

[data-theme="dark"] .question-cta .cta-box {
    /* Keep the vibrant gradient - it looks great in both modes */
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 50%, var(--color-blue) 100%);
    border: none;
}

[data-theme="dark"] .question-cta .cta-box h3 {
    color: #fff;
}

[data-theme="dark"] .question-cta .cta-box p {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .no-studies-message {
    color: #e4e4e7;
}

[data-theme="dark"] .no-studies-message h2 {
    color: #f4f4f5;
}

[data-theme="dark"] .no-studies-message p {
    color: #a1a1aa;
}

[data-theme="dark"] .no-studies-message ul {
    color: #a1a1aa;
}