* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    color: #333;
    background-color: #f8f9fa;
}

/* GLOBAL INFO BUTTON - FIXED POSITIONING */
.global-info-btn {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;/* Force subjects-grid to always be exactly 2 columns */
.subjects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem;
    margin: 2rem 0;
}

/* On mobile, go to 1 column */
@media (max-width: 768px) {
    .subjects-grid {
        grid-template-columns: 1fr !important;
    }
}
    background: #007bff !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999 !important;
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.global-info-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4) !important;
}

/* HEADER */
.header {
    background: white;
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.logo {
    font-size: 2rem !important;
    font-weight: 800;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1;
}

.logo a {
    text-decoration: none;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.author {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: -0.5px;
    margin-top: -0.2rem;
    margin-bottom: -0.2rem;
    line-height: 1.3;
}

.subtitle {
    color: #6c757d;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* PAGE NAVIGATION */
.page-nav {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.25rem;
}

.nav-link {
    color: #007bff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background: rgba(0, 123, 255, 0.1);
    color: #0056b3;
}

/* INFO CARD CONTAINER - Separate from main content */
.info-card-container {
    background: #f8f9fa;
    padding: 2rem 20px 1rem 20px;
}

/* COLOR LEGEND - Compact centered card */
.color-legend {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
}

.legend-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    font-size: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.legend-color.literary-device {
    background-color: rgb(252, 235, 237);
    border-color: rgba(220, 53, 69, 0.3);
}

.legend-color.grammar-point {
    background-color: rgb(225, 243, 252);
    border-color: rgba(0, 123, 255, 0.3);
}

.legend-color.key-vocab {
    background-color: rgb(232, 245, 232);
    border-color: rgba(40, 167, 69, 0.3);
}

.legend-color.character-analysis {
    background-color: rgb(244, 228, 246);
    border-color: rgba(138, 43, 226, 0.3);
}

.legend-color.contrast {
    background-color: rgb(253, 242, 223);
    border-color: rgba(255, 193, 7, 0.4);
}

/* INTERACTIVE TEXT STYLES */

/* Interactive Container Layout */
.interactive-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 20px;
}

/* Text Panel */
.text-panel {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
}

/* Latin Text Styling - INCREASED line spacing for numbers */
.latin-text {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.2rem;
    line-height: 3.5; /* INCREASED from 2.2 to 3.5 to make room for numbers */
    color: #333;
    margin-bottom: 2rem;
    padding: 3rem 1.5rem 2rem 1.5rem; /* INCREASED top padding */
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

/* FIXED: Word container with consistent height for all containers */
.word-container {
     display: inline-block;
    margin: 0 3px;                    
    vertical-align: baseline;
    min-height: 1.6em;
    position: relative;
    line-height: 1.6;
}

/* FIXED: Numbers positioned consistently regardless of highlight styling */
.number {
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 0.75rem;
    color: #6c757d;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    transition: all 0.2s ease;
    font-weight: 500;
    background: rgba(108, 117, 125, 0.1);
    z-index: 10;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    pointer-events: auto;
    min-width: 1.2rem;
    max-width: fit-content;
    display: block;
}

/* ADDED: Ensure highlights don't affect container height */
.highlight {
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
    transition: all 0.2s ease;
    position: relative;
    display: inline;
    line-height: inherit;
    vertical-align: baseline;
    margin: 0;
    box-sizing: border-box;    
}

.highlight:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.highlight.active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.highlight.literary-device {
    background-color: rgb(252, 235, 237);
    border: 1px solid rgb(220, 53, 69);
    border-bottom: 1px solid rgb(185, 35, 50);
}

.highlight.literary-device:hover,
.highlight.literary-device.active {
    background-color: rgba(252, 235, 237, 0.9);
    border-color: rgb(185, 35, 50);
    border-bottom-color: rgb(150, 25, 35);
}

.highlight.grammar-point {
    background-color: rgb(225, 243, 252);
    border: 1px solid rgb(0, 123, 255);
    border-bottom: 1px solid rgb(0, 86, 179);
}

.highlight.grammar-point:hover,
.highlight.grammar-point.active {
    background-color: rgba(225, 243, 252, 0.9);
    border-color: rgb(0, 86, 179);
    border-bottom-color: rgb(0, 65, 135);
}

.highlight.key-vocab {
    background-color: rgb(232, 245, 232);
    border: 1px solid rgb(40, 167, 69);
    border-bottom: 1px solid rgb(30, 130, 52);
}

.highlight.key-vocab:hover,
.highlight.key-vocab.active {
    background-color: rgba(232, 245, 232, 0.9);
    border-color: rgb(30, 130, 52);
    border-bottom-color: rgb(25, 100, 40);
}

.highlight.character-analysis {
    background-color: rgb(244, 228, 246);
    border: 1px solid rgb(138, 43, 226);
    border-bottom: 1px solid rgb(108, 25, 180);
}

.highlight.character-analysis:hover,
.highlight.character-analysis.active {
    background-color: rgba(244, 228, 246, 0.9);
    border-color: rgb(108, 25, 180);
    border-bottom-color: rgb(85, 15, 140);
}

.highlight.contrast {
    background-color: rgb(253, 242, 223);
    border: 1px solid rgb(255, 193, 7);
    border-bottom: 1px solid rgb(200, 150, 0);
}

.highlight.contrast:hover,
.highlight.contrast.active {
    background-color: rgba(253, 242, 223, 0.9);
    border-color: rgb(200, 150, 0);
    border-bottom-color: rgb(160, 120, 0);
}

/* Keep these for consistency */
.highlight .word-container {
    vertical-align: baseline !important;
    display: inline-block !important;
}

.number:hover {
    color: #495057;
    background: rgba(108, 117, 125, 0.2);
    transform: translateX(-50%) scale(1.1);
}

.number.active {
    color: #fff;
    background: #007bff;
    transform: translateX(-50%) scale(1.1);
}

/* Handle multiple numbers side-by-side for compound words */
.word-container .number:first-child {
    left: calc(50% - 12px); /* Shift first number left */
}

.word-container .number:nth-child(2) {
    left: calc(50% + 12px); /* Shift second number right */
}

/* If there are three numbers (rare case) */
.word-container .number:nth-child(3) {
    left: 50%; /* Keep third number centered */
    top: -35px; /* Stack above the other two */
}

/* Vocabulary-specific styling in analysis panel */
.vocab-word {
    font-size: 1.2rem;
    font-weight: 600;
    color: #007bff;
    margin-bottom: 0.5rem;
    font-family: 'Georgia', serif;
}

/* Vocabulary-specific styling in analysis panel */
.vocab-word {
    font-size: 1.2rem;
    font-weight: 600;
    color: #007bff;
    margin-bottom: 0.5rem;
    font-family: 'Georgia', serif;
}

.vocab-meaning {
    font-size: 1.1rem;
    color: #333;
    padding: 0.75rem;
    background: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 4px;
}

/* Literary Analysis header when showing style analysis */
.analysis-content .analysis-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #007bff;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.5rem;
}

/* Style the word being analyzed in literary analysis */
.analysis-word {
    font-size: 1.2rem;
    font-weight: 600;
    color: #007bff;
    margin-bottom: 0.5rem;
    font-family: 'Georgia', serif;
}

/* Analysis Panel */
.analysis-panel {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.analysis-content {
    display: none;
}

.analysis-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.analysis-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #007bff;
    margin-bottom: 0.5rem;
    font-family: 'Georgia', serif;
}

.analysis-translation {
    font-style: italic;
    color: #666;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-left: 3px solid #007bff;
}

.analysis-device {
    margin-bottom: 1rem;
}

.device-name {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analysis-effect {
    background: #e7f3ff;
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #007bff;
}

.effect-title {
    font-weight: 600;
    color: #007bff;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Translation Section - With click overlay */
.section-translation {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.section-translation.blurred .translation-content {
    filter: blur(3px);
    user-select: none;
}

.section-translation.blurred::after {
    content: "Click to reveal translation";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 123, 255, 0.9);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.section-translation:hover {
    background: #e9ecef;
}

.section-translation:hover.blurred::after {
    background: rgba(0, 123, 255, 1);
    transform: translate(-50%, -50%) scale(1.05);
}

.translation-content {
    transition: filter 0.3s ease;
}

/* Hide button for revealed translation */
.translation-hide-btn {
    display: none;
    text-align: center;
    margin-top: 1rem;
}

.translation-hide-btn button {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.translation-hide-btn button:hover {
    background: #545b62;
    transform: translateY(-1px);
}

.section-translation:not(.blurred) .translation-hide-btn {
    display: block;
}

/* Navigation */
.navigation {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

/* SECTION GRID SYSTEM - For interactive text navigation */

/* Section Grid - Similar to chapter selection */
.section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1.5rem 0;
    min-height: 150px; /* ADD THIS LINE */
    align-content: start;
}

.section-btn {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    color: #495057;
    text-decoration: none;
    display: block;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Available sections */
.section-btn.available {
    background: #007bff;
    border-color: #007bff;
    color: white;
    cursor: pointer;
}

.section-btn.available:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

/* Coming soon sections */
.section-btn.coming-soon {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.6;
}

.section-btn.coming-soon:hover {
    background: #f8f9fa;
    transform: none;
    box-shadow: none;
}

/* Section info */
.section-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    font-size: 0.8rem;
    color: #6c757d;
}

.section-status {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.available-indicator {
    color: #007bff;
    font-size: 0.6rem;
}

.coming-soon-indicator {
    color: #adb5bd;
    font-size: 0.6rem;
}

.section-count {
    font-weight: 500;
}

/* LANDING PAGE STYLES */
.landing-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 20px;
}

.landing-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.welcome-section {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.welcome-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

.welcome-section p {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
}

.subjects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .subjects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

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

.subject-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.subject-card p {
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.6;
    flex-grow: 1;
}

.subject-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

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

.subject-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.subject-icon {
    font-size: 2rem;
    opacity: 0.7;
    z-index: 1;
}

.section-content {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

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

.coming-soon {
    position: absolute;
    top: 0.40rem;
    left: 0.40rem;
    background: #ffc107;
    color: #333;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
}

/* NEW BADGE */
.new-badge {
    position: absolute;
    top: 0.40rem;
    left: 0.40rem;
    background: #28a745;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
}

/* EXAM BADGE */
.exam-badge {
    background: #007bff;
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

/* BADGE CONTAINER - Position both badges */
.badge-container {
    position: absolute;
    top: 0.40rem;
    left: 0.40rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

/* PROSE/VERSE BADGE - New styling */
.type-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.type-badge.prose {
    background: #28a745;
    color: white;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.type-badge.verse {
    background: #ffc107;
    color: #333;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

/* REMOVE CENTERED COMING SOON */
.coming-soon-center {
    display: none;
}

/* BUTTONS */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.btn-latin {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
}

.btn-latin:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-latin-secondary {
    background: transparent;
    border: 2px solid #007bff;
    color: #007bff;
}

.btn-latin-secondary:hover {
    background: #007bff;
    color: white;
}

.btn-greek {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
}

.btn-greek:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-greek-secondary {
    background: transparent;
    border: 2px solid #28a745;
    color: #28a745;
}

.btn-greek-secondary:hover {
    background: #28a745;
    color: white;
}

.btn-civ {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.btn-civ:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-civ-secondary {
    background: transparent;
    border: 2px solid #dc3545;
    color: #dc3545;
}

.btn-civ-secondary:hover {
    background: #dc3545;
    color: white;
}

.about-section {
    text-align: center;
    max-width: 600px;
    margin: 2rem auto 0;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.about-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.about-section p {
    color: #666;
    line-height: 1.6;
}

/* MODAL STYLES */
.modal {
    position: fixed !important;
    z-index: 1000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(4px) !important;
}

.modal-content {
    background-color: white !important;
    margin: 3% auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    width: 90% !important;
    max-width: 900px !important;
    position: relative !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
}

.modal-header {
    padding: 1.5rem 2rem 1rem 2rem !important;
}

.modal-header h2 {
    margin: 0 !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #333 !important;
}

.modal-body {
    display: flex !important;
    gap: 2rem !important;
    padding: 1rem 2rem !important;
    align-items: flex-start !important;
}

.modal-text {
    flex: 2 !important;
}

.modal-text p {
    margin: 0 0 1rem 0 !important;
    line-height: 1.5 !important;
    color: #555 !important;
    font-size: 0.9rem !important;
}

.modal-text p:last-child {
    margin-bottom: 0 !important;
}

.modal-image {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.modal-image img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #e0e0e0 !important;
}

.modal-footer {
    padding: 1.5rem 2rem !important;
    border-top: 1px solid #f0f0f0 !important;
    background-color: #fafafa !important;
    border-radius: 0 0 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.contact-items {
    display: flex !important;
    gap: 1rem !important;
}

.contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    background: white !important;
    border-radius: 8px !important;
    border: 1px solid #e5e5e5 !important;
    flex: 1 !important;
}

.contact-icon {
    font-size: 1.2rem !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.contact-info {
    flex: 1 !important;
}

.contact-label {
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 0.85rem !important;
    margin-bottom: 0.15rem !important;
}

.contact-value {
    color: #666 !important;
    font-size: 0.8rem !important;
    font-family: 'Courier New', monospace !important;
}

.modal-signature {
    text-align: center !important;
    margin-top: 1rem !important;
}

.modal-signature p {
    margin: 0.25rem 0 !important;
    color: #777 !important;
    font-size: 0.9rem !important;
}

.modal-signature p:last-child {
    color: #333 !important;
}

.close {
    color: #aaa !important;
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    font-size: 24px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    background: none !important;
    border: none !important;
    padding: 0.5rem !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.close:hover {
    color: #333 !important;
    background-color: #f0f0f0 !important;
}

/* QUIZ PAGE STYLES */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 20px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}

.container-texts {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 20px;
}

.quiz-area {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 2rem;
}

.word-display {
    text-align: center;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
}

.latin-word {
    font-size: 3rem;
    font-weight: bold;
    color: #495057;
    margin-bottom: 0.5rem;
}

.word-info {
    color: #6c757d;
    font-size: 0.9rem;
}

.answer-section {
    max-width: 500px;
    margin: 0 auto;
}

.form-control {
    width: 100%;
    padding: 1rem;
    border: 2px solid #ced4da;
    border-radius: 4px;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.btn-group {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* QUIZ BUTTONS - Updated for simple styling */
.btn {
    background: #007bff !important;
    color: white !important;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.btn:hover {
    background: #0056b3 !important;
}

.btn:disabled {
    background: #6c757d !important;
    cursor: not-allowed;
}

.btn-secondary {
    background: #6c757d !important;
}

.btn-secondary:hover {
    background: #545b62 !important;
}

.btn-warning {
    background: #ffc107 !important;
    color: #212529 !important;
}

.btn-warning:hover {
    background: #e0a800 !important;
}

/* FEEDBACK */
.feedback {
    min-height: 60px;
    text-align: center;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.feedback-correct {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.feedback-incorrect {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.feedback-revealed {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

/* PROGRESS */
.progress-section {
    text-align: center;
    border-top: 1px solid #e9ecef;
    padding-top: 1.5rem;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
    margin: 1rem 0;
}

.progress-fill {
    height: 100%;
    background: #28a745;
    width: 0%;
    transition: width 0.3s ease;
}

.stats {
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* SETTINGS PANEL */
.settings-panel {
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 1.5rem;
    height: fit-content;
}

.settings-panel h3 {
    margin-bottom: 1rem;
    color: #495057;
    font-size: 1.1rem;
}

.setting-section {
    margin-bottom: 2rem;
}

.setting-section h4 {
    margin-bottom: 1rem;
    color: #495057;
    font-size: 1rem;
    font-weight: 600;
}

/* CHAPTER BUTTONS */
.chapter-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.chapter-btn {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    color: #495057;
}

.chapter-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.chapter-btn.active {
    background: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
}

/* LENGTH BUTTONS */
.length-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.length-btn {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    color: #495057;
}

.length-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.length-btn.active {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

/* CHAPTER INFO */
.chapter-info {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 1rem;
    margin-top: 1rem;
}

#chapter-details {
    font-size: 0.85rem;
    color: #6c757d;
    text-align: center;
}

.hidden {
    display: none !important;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

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

    .subject-links {
        justify-content: center;
    }

    .page-nav {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }

    .modal-content {
        margin: 5% auto !important;
        width: 95% !important;
    }

    .modal-body {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .modal-image img {
        width: 100px !important;
        height: 100px !important;
    }

    .contact-items {
        flex-direction: column !important;
    }

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

    .settings-panel {
        order: -1;
    }

    /* Interactive Layout Mobile */
    .interactive-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .analysis-panel {
        position: relative;
        top: 0;
        order: -1;
    }

    .latin-text {
        font-size: 1.1rem;
        padding: 1.5rem;
    }

    .number {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: #6c757d;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    transition: all 0.2s ease;
    font-weight: 500;
    background: rgba(108, 117, 125, 0.1);
    z-index: 10;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    pointer-events: auto;
    min-width: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    /* Section Grid Mobile */
    .section-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .section-btn {
        padding: 0.6rem;
        font-size: 0.8rem;
        min-height: 40px;
    }

    .section-info {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* Passage Analysis Section Styling */
.passage-analysis {
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #007bff;
}

.passage-analysis h3 {
    color: #007bff;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.analysis-section {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.analysis-section h4 {
    color: #333;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.analysis-section p {
    line-height: 1.8;
    color: #495057;
    font-size: 1.05rem;
}

.analysis-list {
    list-style: none;
    padding: 0;
}

.analysis-list li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.8;
    color: #495057;
}

.analysis-list li:before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #007bff;
    font-weight: bold;
}

.analysis-list li strong {
    color: #333;
    font-weight: 600;
}

/* Questions have a different marker */
.analysis-section:last-child .analysis-list li:before {
    content: "?";
    background: #007bff;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    left: -5px;
    top: 2px;
}

.analysis-section:last-child .analysis-list li {
    padding-left: 2rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .passage-analysis {
        padding: 1.5rem 1rem;
        margin-top: 2rem;
    }
    
    .analysis-section {
        padding: 1rem;
    }
    
    .passage-analysis h3 {
        font-size: 1.5rem;
    }
    
    .analysis-section h4 {
        font-size: 1.1rem;
    }
}