/**
 * Frontend Stylesheet for AMT Quiz Maker
 * Version: 5.4.0
 */

.amt-quiz-container, .amt-course-card {
    --font-sans: 'Inter', sans-serif;
    --bg: #f8f9fa;
    --bg-alt: #ffffff;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --border: #e2e8f0;
    --primary: #4f46e5;
    --primary-light: #e0e7ff;
    --primary-dark: #4338ca;
    --green: #10b981;
    --red: #ef4444;
    --orange: #f97316;
    --purple: #8b5cf6;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

.amt-quiz-container:fullscreen {
    overflow-y: auto;
}

.amt-quiz-container[data-theme='dark'] {
    --bg: #1a202c;
    --bg-alt: #2d3748;
    --text-primary: #f7fafc;
    --text-secondary: #a0aec0;
    --border: #4a5568;
    --primary: #667eea;
    --primary-light: #3c366b;
    --primary-dark: #7f9cf5;
}

.amt-quiz-container * { box-sizing: border-box; }
.amt-quiz-container button { font-family: var(--font-sans); cursor: pointer; border: none; transition: all 0.2s ease-in-out; }
.amt-quiz-container .hidden { display: none !important; }
.amt-quiz-container .mobile-only { display: none; }
.amt-quiz-container .screen { min-height: 100vh; display: flex; flex-direction: column; }
.amt-quiz-container .card { background-color: var(--bg-alt); border-radius: 12px; box-shadow: var(--shadow-md); border: 1px solid var(--border); transition: background-color 0.3s, border-color 0.3s; }
.amt-quiz-container .input-field { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 1rem; background-color: var(--bg); color: var(--text-primary); margin-top: 0.5rem; }

/* --- Landing Screen --- */
#series-landing-screen { justify-content: flex-start; align-items: stretch; padding-top: 2rem;}
.amt-quiz-container .series-container { max-width: 900px; margin: 0 auto; width: 100%; padding: 2rem 1rem; }
.amt-quiz-container .series-header { font-size: 1.75rem; font-weight: 700; margin-bottom: 2rem; color: var(--text-primary); }

.amt-quiz-container .tabs-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--border);
}
.amt-quiz-container .tabs-container::-webkit-scrollbar {
    height: 8px;
}
.amt-quiz-container .tabs-container::-webkit-scrollbar-track {
    background: var(--border);
    border-radius: 4px;
}
.amt-quiz-container .tabs-container::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 4px;
}
.amt-quiz-container .tabs-container.level-1,
.amt-quiz-container .tabs-container.level-2 {
    margin-left: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    border-bottom: none;
}
.amt-quiz-container .tab-btn {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 99px;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}
.amt-quiz-container .tab-btn:hover {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
.amt-quiz-container .tab-btn.active {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.amt-quiz-container .tab-content { display: none; } 
.amt-quiz-container .tab-content.active { display: block; }
.amt-quiz-container .tab-content-panels { padding-top: 1rem; }
.amt-quiz-container .test-list-container { display: flex; flex-direction: column; gap: 1rem; }
.amt-quiz-container .test-card { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.5rem; background-color: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s; position: relative; }
.amt-quiz-container .test-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.amt-quiz-container .test-card-left { display: flex; align-items: center; gap: 1.5rem; flex-grow: 1; }
.amt-quiz-container .test-icon-container { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #eef2ff; color: var(--primary); border-radius: 8px; }
.amt-quiz-container .test-details .test-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem 0; color: var(--text-primary); }
.amt-quiz-container .test-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; font-size: 0.875rem; color: var(--text-secondary); }
.amt-quiz-container .test-meta span { display: flex; align-items: center; gap: 0.5rem; }
.amt-quiz-container .btn-attempt { background: var(--primary); color: white; padding: 10px 24px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.amt-quiz-container .test-card.is-expired .btn-attempt { background-color: var(--text-secondary); cursor: not-allowed; }
.amt-quiz-container .test-card.is-expired::after { content: 'EXPIRED'; position: absolute; top: 1rem; right: 1rem; background-color: var(--red); color: white; padding: 4px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 4px; }
.amt-quiz-container .quiz-attempt-history-container { width: 100%; flex-basis: 100%;}


/* --- Content Drip / Locked State Styles --- */
.amt-quiz-container .test-card.is-locked {
    background-color: var(--bg);
    opacity: 0.8;
}
.amt-quiz-container .test-card.is-locked:hover {
    box-shadow: var(--shadow-sm); /* Prevent hover effect */
    transform: none;
}
.amt-quiz-container .test-card.is-locked .test-icon-container {
    background-color: #e2e8f0;
    color: var(--text-secondary);
}
.amt-quiz-container .locked-message {
    padding: 10px 24px;
    border-radius: 8px;
    background-color: var(--border);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: not-allowed;
    white-space: nowrap;
}


/* --- Product Slider (NEW UI) --- */
.amt-product-slider {
    position: relative;
    max-width: 700px;
    margin: 0 auto 2rem auto;
    padding: 0 40px;
}
.slider-main-view {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-lg);
    background-color: var(--border);
}
.slider-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    z-index: 10;
}
.slider-nav:hover {
    background-color: white;
    transform: translateY(-50%) scale(1.1);
}
.slider-nav.prev { left: 0; }
.slider-nav.next { right: 0; }
.slider-thumbnails {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.slider-thumbnail-item {
    width: 80px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
    opacity: 0.6;
}
.slider-thumbnail-item:hover {
    opacity: 1;
    transform: scale(1.05);
}
.slider-thumbnail-item.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
    opacity: 1;
}
.slider-thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Instructions Screen --- */
#instructions-screen { justify-content: center; align-items: center; padding: 1rem; }
.amt-quiz-container .instructions-box {
    max-width: 900px;
    width: calc(100% - 2rem);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 95vh;
}
.amt-quiz-container .instructions-box h2 { font-size: 1.5rem; margin: 0; text-align: center; padding: 1.5rem 1rem; border-bottom: 1px solid var(--border); }
.amt-quiz-container .instructions-content { padding: 1.5rem 2rem 2rem; flex-grow: 1; overflow-y: auto; }
.amt-quiz-container .instructions-footer { padding: 1.5rem 2rem; border-top: 1px solid var(--border); text-align: right; }
.amt-quiz-container .btn-start-now { background-color: var(--primary); color: white; padding: 10px 24px; font-size: 1rem; border-radius: 6px; font-weight: 600; }

/* --- Quiz Screen --- */
#quiz-screen { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background-color: var(--bg); }
.amt-quiz-container .quiz-header { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; height: 65px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; box-shadow: var(--shadow-sm); }
.amt-quiz-container .quiz-title { font-weight: 600; font-size: 1.25rem; }
.amt-quiz-container .header-right { display: flex; align-items: center; gap: 1rem; }
#timer { font-size: 1.2rem; font-weight: 700; color: var(--text-secondary); }
.amt-quiz-container .user-profile { display: flex; align-items: center; gap: 0.75rem; }
.amt-quiz-container .user-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: white; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 1.1rem; }
.amt-quiz-container .theme-toggle { background: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.amt-quiz-container .lang-dropdown { background-color: var(--bg); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 0.9rem; -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em; padding-right: 2.5rem; }
.amt-quiz-container .section-bar { display: flex; align-items: center; justify-content: flex-start; padding: 0 1.5rem; height: 55px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.amt-quiz-container .section-tabs { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0.5rem; background-color: var(--bg); border-radius: 8px; white-space: nowrap; }
.amt-quiz-container .section-tab { padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--text-secondary); flex-shrink: 0; }
.amt-quiz-container .section-tab.active { background: var(--primary); color: white; box-shadow: var(--shadow-md); }
.amt-quiz-container .quiz-main { display: flex; flex-grow: 1; overflow: hidden; gap: 1.5rem; padding: 1.5rem; }
.amt-quiz-container .question-panel { flex-grow: 1; padding: 2rem; overflow-y: auto; display: flex; flex-direction: column; }
#question-header { display:flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); }
.question-instruction-box { background-color: var(--primary-light); border-left: 4px solid var(--primary); padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px; font-size: 0.95rem; line-height: 1.7; }
#question-text { font-size: 1.2rem; line-height: 1.7; margin: 0 0 2rem 0; color: var(--text-primary); }
.amt-quiz-container .options-container { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.amt-quiz-container .option { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.2s; position: relative; }
.amt-quiz-container .option:hover { border-color: var(--primary); transform: translateY(-2px); }
.amt-quiz-container .option.selected { border-color: var(--primary); background-color: var(--primary-light); }
.amt-quiz-container .option.selected .option-label { background: var(--primary); color: white; border-color: var(--primary); }
.amt-quiz-container .option-label { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); display: flex; justify-content: center; align-items: center; font-weight: 600; flex-shrink: 0; }
.amt-quiz-container .multi-choice-checkbox { width: 20px; height: 20px; accent-color: var(--primary); margin-right: -0.25rem; }

/* Action Bar & Buttons UI Enhancement */
.amt-quiz-container .action-bar {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.amt-quiz-container .action-bar > div {
    display: flex;
    gap: 0.75rem;
}
.amt-quiz-container .action-bar .btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.7rem 1.4rem;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}
.amt-quiz-container .action-bar .btn:active {
    transform: scale(0.97);
}
.amt-quiz-container .btn-save {
    background-color: var(--primary);
    color: white;
}
.amt-quiz-container .btn-save:hover {
    background-color: var(--primary-dark);
}
.amt-quiz-container .btn-mark {
    background-color: var(--purple);
    color: white;
}
.amt-quiz-container .btn-mark:hover {
    background-color: #7c3aed;
}
.amt-quiz-container .btn-clear {
    background-color: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border);
}
.amt-quiz-container .btn-clear:hover {
    border-color: var(--red);
    color: var(--red);
    background-color: #ef44441a;
}

.amt-quiz-container .btn-bookmark {
    background-color: transparent;
    color: var(--orange);
    border: 2px solid var(--orange);
}
.amt-quiz-container .btn-bookmark:hover {
    background-color: #f973161a;
}
.amt-quiz-container .btn-bookmark.active {
    background-color: var(--orange);
    color: white;
    border-color: var(--orange);
}

.amt-quiz-container .palette-panel { width: 320px; flex-shrink: 0; padding: 1.5rem; display: flex; flex-direction: column; }
.amt-quiz-container .palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 1rem; flex-grow: 1; overflow-y: auto; padding: .5rem; }
.amt-quiz-container .palette-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; font-size: 1rem; font-weight: 600; }
.amt-quiz-container .palette-btn.active { border-color: var(--primary); transform: scale(1.1); box-shadow: 0 0 0 3px var(--primary-light); }
.amt-quiz-container .palette-btn.not-visited { background-color: var(--bg); color: var(--text-secondary); }
.amt-quiz-container .palette-btn.not-answered { background-color: var(--red); color: white; border-color: var(--red); }
.amt-quiz-container .palette-btn.answered { background-color: var(--green); color: white; border-color: var(--green); }
.amt-quiz-container .palette-btn.marked-review { background-color: var(--purple); color: white; border-color: var(--purple); }
.amt-quiz-container .palette-btn.answered-marked-review { background: linear-gradient(135deg, var(--purple) 50%, var(--green) 50%); color: white; border:none; }
#submit-btn { width: 100%; padding: 0.8rem; margin-top: 1.5rem; font-size: 1.1rem; border-radius: 8px; background-color: var(--primary); color: white; }
#close-palette-btn { display: none; }
.amt-quiz-container .palette-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden; }
.amt-quiz-container .palette-overlay.open { opacity: 1; visibility: visible; }

/* --- Submit Screen --- */
#submit-summary-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; justify-content: center; align-items: center; text-align: center; }
.amt-quiz-container .submit-summary-box { max-width: 450px; width: 100%; padding: 2.5rem; margin: 1rem; }
.amt-quiz-container .summary-stats { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 2rem; text-align: left; }
.amt-quiz-container .stat-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; }
.amt-quiz-container .stat-item:not(:last-child) { border-bottom: 1px solid var(--border); }

/* --- Result Screen & Analysis Styles --- */
#result-screen { height: auto; min-height: 100vh; overflow: visible; }
.result-header { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; height: 65px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.result-container { max-width: 1200px; margin: 0 auto; width: 100%; padding: 2rem 1rem;}
.result-section-title { font-size: 1.25rem; margin: 0 0 1.5rem 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.result-tab-nav { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; flex-wrap: wrap; }
.result-tab-link { background: none; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 600; color: var(--text-secondary); position: relative; border: none; }
.result-tab-link.active { color: var(--primary); }
.result-tab-link.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--primary); }
.result-tab-pane { display: none; }
.result-tab-pane.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Overview Tab Layout */
#overview-tab.active {
    display: grid;
    gap: 1.5rem;
}

#test-summary.card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: stretch;
}
.summary-item {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.summary-item h3 { margin: 0 0 1.5rem 0; font-size: 1.1rem; color: var(--text-secondary); border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }
.summary-item p { display: flex; justify-content: space-between; margin: 0.75rem 0; }
.score-details { display: flex; align-items: center; justify-content: space-around; text-align: center; margin-top: auto; }
.score-circle { position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; }
.score-circle::before { content: ''; position: absolute; width: 100px; height: 100px; background: var(--bg-alt); border-radius: 50%; }
.score-text { z-index: 1; font-size: 1.8rem; font-weight: 700; color: var(--text-primary); }
.status { font-weight: bold; padding: 5px 12px; border-radius: 6px; color: white; }
.status.pass { background-color: var(--green); }
.status.fail { background-color: var(--red); }

/* Enhanced Score Breakdown */
#score-breakdown-card, .charts-container.card, #section-analysis-card.card {
    padding: 1.5rem;
}
.breakdown-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.breakdown-header h3 { margin: 0; }
.breakdown-header p { margin: 0; font-weight: 600; color: var(--text-primary); }
.breakdown-circles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; text-align: center; }
.breakdown-item .circle-viz {
    width: 120px; height: 120px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    position: relative;
    background-color: var(--bg);
}
.breakdown-item .circle-viz span { font-size: 2.2em; font-weight: 700; color: var(--text-primary); }
.breakdown-item p.label { font-weight: 500; color: var(--text-secondary); margin: 0; }
#correct-circle-viz {
    background: conic-gradient(var(--green) 100%, var(--border) 0deg);
}
#correct-circle-viz span { color: var(--green); }
.breakdown-summary { margin-top: 2rem; text-align: center; color: var(--text-secondary); line-height: 1.7; }
.breakdown-summary strong { color: var(--text-primary); }

/* Enhanced Charts Container */
.charts-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.charts-container h3 { margin-top: 0; margin-bottom: 1.5rem; text-align: center; }
.chart-wrapper { position: relative; height: 350px; width: 100%; }
canvas#scoreComparisonChart, canvas#accuracyComparisonChart, canvas#timeDistributionChart {
    display: block;
    box-sizing: border-box;
    height: 300px !important;
    width: 100% !important;
}

/* Section Analysis */
#section-analysis-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
#section-cards-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--border);
}
#section-cards-container::-webkit-scrollbar { height: 8px; }
#section-cards-container::-webkit-scrollbar-track { background: var(--border); border-radius: 4px; }
#section-cards-container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 4px; }
.section-card {
    background-color: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
}
.section-card h4 { margin: 0; font-size: 1.1em; color: var(--text-primary); }
.section-score-viz { text-align: center; }
.section-score-viz .score { font-size: 2.8em; font-weight: 700; color: var(--primary); line-height: 1.1; }
.section-score-viz .max-score { font-size: 1em; color: var(--text-secondary); }
.section-stats { border-top: 1px solid var(--border); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.section-stats p { display: flex; justify-content: space-between; margin: 0; font-size: 0.9em; }
.section-stats .value { font-weight: 600; color: var(--text-primary); }

/* Enhanced Question Analysis */
.filter-buttons { margin-bottom: 20px; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter-buttons button { background: var(--bg); border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px; font-weight: 500; cursor: pointer; transition: all 0.3s; }
.filter-buttons button:hover { background-color: var(--primary-light); }
.filter-buttons button.active { background-color: var(--primary); color: white; border-color: var(--primary); }

.question-item { border: 1px solid var(--border); border-left: 5px solid; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; background-color: var(--bg-alt); }
.question-item.correct { border-left-color: var(--green); }
.question-item.wrong { border-left-color: var(--red); }
.question-item.unattempted { border-left-color: var(--orange); }
.question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.difficulty { font-size: 0.8em; padding: 3px 8px; border-radius: 12px; color: white; }
.difficulty.easy { background-color: var(--green); }
.difficulty.medium { background-color: var(--orange); }
.difficulty.hard { background-color: var(--red); }
.answers { margin-top: 15px; }
.answers p { margin: 5px 0; display: flex; align-items: center; }
.answers .material-symbols-outlined { margin-right: 8px; font-size: 1.4em; }
.correct-answer { color: var(--green); }
.wrong-answer { color: var(--red); }

.toggle-explanation { background: none; border: none; color: var(--primary); cursor: pointer; font-weight: bold; margin-top: 10px; display: flex; align-items: center; gap: 4px; padding: 0; }
.explanation { display: none; margin-top: 15px; padding: 15px; background-color: var(--bg); border-radius: 8px; border-top: 2px solid var(--border); }

/* Enhanced Leaderboard */
.leaderboard-header { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); flex-direction: column; }
.leaderboard-header h3 { margin: 0; display: flex; align-items: center; gap: 10px; }
.top-performers { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-bottom: 32px; text-align: center; }
.performer { width: 30%; padding: 20px 10px; border-radius: 12px; position: relative; transition: transform 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.performer:hover { transform: translateY(-10px); }
.performer .rank-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 700; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); }
.performer .rank-badge .material-symbols-outlined { font-size: 30px; }
.performer .rank-1-icon { color: #ffd700; } .performer .rank-2-icon { color: #c0c0c0; } .performer .rank-3-icon { color: #cd7f32; }
.performer .user-avatar,
.performer .user-avatar-initials {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin: 0 auto 8px auto;
    border: 4px solid;
    box-sizing: border-box;
    border-radius: 50%;
}
.performer .user-avatar-initials {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}
.performer.rank-1 .user-avatar, .performer.rank-1 .user-avatar-initials { border-color: #ffd700; }
.performer.rank-2 .user-avatar, .performer.rank-2 .user-avatar-initials { border-color: #c0c0c0; }
.performer.rank-3 .user-avatar, .performer.rank-3 .user-avatar-initials { border-color: #cd7f32; }
.performer .user-name { font-weight: 600; margin: 4px 0; color: var(--text-primary); }
.performer .user-score { font-weight: 700; font-size: 18px; color: var(--primary); }
.performer.rank-1 { background: linear-gradient(145deg, #fff0b3, #ffe380); order: 2; height: 220px; }
.performer.rank-2 { background: linear-gradient(145deg, #f0f0f0, #d9d9d9); order: 1; height: 190px; }
.performer.rank-3 { background: linear-gradient(145deg, #f0d8c9, #e6c1ac); order: 3; height: 190px; }

.leaderboard-list-container { max-height: 400px; overflow-y: auto; overflow-x: auto; }
.leaderboard-list { width: 100%; border-collapse: collapse; min-width: 600px; }
.leaderboard-list thead { position: sticky; top: 0; background-color: var(--bg-alt); z-index: 10; }
.leaderboard-list .user-avatar,
.leaderboard-list .user-avatar-initials {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}
.leaderboard-list .user-avatar-initials {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.my-rank { margin-top: 24px; padding: 16px; background-color: var(--primary); color: white; border-radius: 12px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 600; }
.my-rank .rank-value { font-size: 24px; font-weight: 700; }

/* --- UI ENHANCEMENT: Topic Analysis Question Buttons and Detail View --- */
.topic-analysis-header { display: flex; justify-content: space-between; align-items: center; }
#topic-section-filter { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); background-color: var(--bg-alt); }
.topic-item-container { border-bottom: 1px solid var(--border); padding: 15px 10px; }
.topic-item-container:last-child { border-bottom: none; }
.topic-item { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.topic-info { display: flex; align-items: center; gap: 15px; flex-grow: 1; }
.topic-stats { flex-shrink: 0; text-align: right; }
.topic-number { width: 30px; height: 30px; border-radius: 50%; background-color: #999; color: white; display: grid; place-items: center; font-weight: bold; flex-shrink: 0; }
.topic-number.high-accuracy { background-color: var(--green); }
.toggle-questions-btn { background: none; border: 1px solid var(--primary); color: var(--primary); cursor: pointer; font-weight: 500; padding: 5px 10px; border-radius: 6px; transition: background-color 0.2s; display: flex; align-items: center; gap: 5px; }
.toggle-questions-btn:hover { background-color: #eef1ff; }
.topic-questions-list { padding: 15px 0 5px 55px; display: flex; flex-wrap: wrap; gap: 10px; }

.topic-question-btn {
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}
.topic-question-btn.is-correct {
    background-color: var(--green);
    color: white;
}
.topic-question-btn.is-wrong {
    background-color: var(--red);
    color: white;
}
.topic-question-btn.is-unattempted {
    background-color: var(--border);
    color: var(--text-secondary);
}
.topic-question-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
.topic-question-btn.active {
    box-shadow: 0 0 0 3px var(--primary-light);
    transform: scale(1.05);
}

.topic-question-detail-view-inner {
    padding: 1.5rem;
    margin-top: 1rem;
    margin-left: 55px;
    background-color: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.topic-question-detail-view-inner h4 {
    margin-top: 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}
.topic-question-detail-view-inner .explanation {
    background-color: var(--bg-alt);
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}
/* --- END UI ENHANCEMENT --- */

/* Solutions Tab */
#view-answers-container { margin-top: 0; background-color: transparent; padding: 0; }
.view-answers-q-card { margin-bottom: 1.5rem; padding: 1.5rem; }
.view-answers-option { padding: 0.75rem 1rem; border-radius: 6px; margin: 0.5rem 0; border: 1px solid var(--border); position: relative; }
.view-answers-option.correct { background: #10b98120; border-color: var(--green); color: var(--green); font-weight: 600; }
.view-answers-option.incorrect { background: #ef444420; border-color: var(--red); text-decoration: line-through; }
.explanation { background-color: var(--bg); padding: 1rem; margin-top: 1rem; border-radius: 8px; border: 1px solid var(--border); }

/* Leaderboard Tab */
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th, .leaderboard-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); }
.leaderboard-table th { background-color: var(--bg); font-weight: 600; }
.user-avatar-sm { width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; margin-right: 10px; }
#my-rank-info { margin-top: 24px; padding: 16px; background-color: var(--primary); color: white; border-radius: 12px; display: flex; justify-content: space-around; font-weight: 600; }
.rank-value { font-size: 24px; font-weight: 700; }

/* --- Custom Reviews Section --- */
.amt-reviews-section {
    max-width: 900px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.reviews-main-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.reviews-summary-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    background-color: var(--bg-alt);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    align-items: center;
}

.summary-overview {
    text-align: center;
    padding-right: 2rem;
    border-right: 1px solid var(--border);
}

.average-rating-value {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.average-rating-stars {
    color: var(--orange);
    margin: 0.5rem 0;
}

.average-rating-stars .material-symbols-outlined {
    font-size: 1.5rem;
}

.total-reviews-count {
    font-size: 1rem;
    color: var(--text-secondary);
}

.summary-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.breakdown-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.breakdown-label {
    color: var(--text-secondary);
    width: 50px;
    flex-shrink: 0;
}

.progress-bar-container {
    flex-grow: 1;
    height: 8px;
    background-color: var(--border);
    border-radius: 99px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: var(--orange);
    border-radius: 99px;
}

.breakdown-count {
    font-weight: 600;
    color: var(--text-primary);
    width: 30px;
    text-align: right;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-card {
    background-color: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.reviewer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reviewer-info {
    flex-grow: 1;
}

.reviewer-name {
    font-weight: 600;
    color: var(--text-primary);
}

.review-rating {
    color: var(--orange);
}

.review-rating .material-symbols-outlined {
    font-size: 1.1rem;
}

.review-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.review-body p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}


/* --- Responsive Styles --- */
@media (max-width: 1024px) {
    .amt-quiz-container .mobile-only { display: flex; }
    .amt-quiz-container .quiz-header { flex-direction: column; height: auto; gap: 0.75rem; padding: 0.75rem 1rem; align-items: center; }
    .amt-quiz-container .quiz-title { order: 1; font-size: 1.1rem; text-align: center; }
    .amt-quiz-container .header-right { order: 2; width: 100%; justify-content: space-between; }
    .amt-quiz-container .quiz-main { flex-direction: column; padding: 0; gap: 0; overflow-y: auto; flex-grow: 1; }
    .amt-quiz-container .question-panel { padding: 1.5rem; padding-bottom: 120px; }
    .amt-quiz-container .palette-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 80vw; z-index: 2000; transform: translateX(100%); transition: transform 0.3s; border-radius: 0; padding-top: 50px; }
    .amt-quiz-container .palette-panel.open { transform: translateX(0); }
    #close-palette-btn { display: block; position: absolute; top: 10px; right: 15px; font-size: 2rem; background: none; border: none; }
    .amt-quiz-container .palette-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden; }
    .amt-quiz-container .palette-overlay.open { opacity: 1; visibility: visible; }
}
@media (max-width: 768px) {
    .amt-quiz-container .test-card { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    
    .summary-item:nth-child(2) {
        border-right: none;
    }

    /* Enhanced Result Page Tablet Styles */
    .breakdown-circles { grid-template-columns: repeat(2, 1fr); }
    .topic-analysis-header { flex-direction: column; align-items: stretch; }
    .top-performers { flex-direction: column; align-items: center; gap: 24px; }
    .performer { width: 80%; order: unset !important; height: auto !important; }
    .charts-container { grid-template-columns: 1fr; }

    /* Reviews Responsive */
    .reviews-summary-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .summary-overview {
        border-right: none;
        padding-right: 0;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
    }
}
@media (max-width: 480px) {
    #user-name-display { display: none; }
    .header-right { gap: 0.5rem; }
    
    .summary-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    
    /* Enhanced Result Page Mobile Styles */
    #test-summary.card { grid-template-columns: 1fr; }
    .breakdown-circles { grid-template-columns: repeat(2, 1fr); }
    .topic-analysis-header { flex-direction: column; align-items: stretch; }
    .top-performers { flex-direction: column; align-items: center; gap: 24px; }
    .performer { width: 80%; order: unset !important; height: auto !important; }
    .my-rank { flex-direction: column; text-align: center; gap: 15px; }
    .topic-item { flex-direction: column; align-items: flex-start; }
    .topic-stats { text-align: left; margin-top: 10px; width: 100%; }
    .charts-container { grid-template-columns: 1fr; }
    .chart-wrapper { height: 300px; }
    
    /* Reviews Responsive */
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .review-date {
        margin-top: 0.5rem;
        width: 100%;
        text-align: left;
    }
}

/* --- Guest Popup Screen (v4.1.0) --- */
#guest-popup-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.amt-quiz-container .guest-popup-box {
    max-width: 420px;
    width: 100%;
    padding: 2.5rem;
    margin: 1rem;
    position: relative;
    animation: popup-fade-in 0.3s ease-out;
}
@keyframes popup-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.amt-quiz-container .guest-popup-box h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.amt-quiz-container .guest-popup-box p {
    margin-bottom: 2rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.amt-quiz-container .guest-popup-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.amt-quiz-container .guest-popup-actions .btn {
    flex: 1;
}
.amt-quiz-container .guest-popup-box button#guest-popup-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 300;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    transition: color 0.2s ease;
}
.amt-quiz-container .guest-popup-box button#guest-popup-close-btn:hover {
    color: var(--text-primary);
}


/* --- Course Card Shortcode Styles (v4.2.0) --- */
.amt-course-card {
    background-color: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 380px;
    margin: 1rem auto;
}
.amt-card-badge {
    position: absolute;
    top: 1.5rem;
    right: -5px;
    color: white;
    padding: 4px 12px;
    border-radius: 5px 0 0 5px;
    font-size: 0.8rem;
    font-weight: 600;
}
.amt-card-badge.amt-badge-orange { background-color: var(--orange); }
.amt-card-badge.amt-badge-red { background-color: var(--red); }
.amt-card-header { display: flex; align-items: center; gap: 1rem; }
.amt-card-icon { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: var(--bg); font-size: 1.5rem; font-weight: 600; color: var(--text-secondary); }
.amt-card-title { font-size: 1.2rem; font-weight: 600; margin: 0; color: var(--text-primary); }
.amt-card-body { flex-grow: 1; }
.amt-card-meta {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
.amt-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.amt-card-features { list-style: none; padding-left: 0; margin: 1rem 0 0 0; font-size: 0.9rem; }
.amt-card-features li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.amt-card-features .material-symbols-outlined { color: var(--green); }
.amt-card-footer {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.amt-card-terms {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: -0.25rem;
    line-height: 1.4;
}
.amt-card-terms a {
    color: var(--text-secondary);
    text-decoration: none;
}
.amt-card-terms a:hover {
    color: var(--primary);
    text-decoration: underline;
}
.amt-card-categories .woocommerce-LoopProduct-link {
    color: var(--text-secondary);
    text-decoration: none;
}
.amt-card-categories .woocommerce-LoopProduct-link:hover {
    color: var(--primary);
    text-decoration: underline;
}
.amt-card-pricing { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.amt-original-price { font-size: 1rem; color: var(--text-secondary); text-decoration: line-through; }
.amt-discount { font-size: 0.9rem; color: var(--green); background-color: #ecfdf5; padding: 2px 8px; border-radius: 99px; }
.amt-btn { text-decoration: none; display: inline-block; text-align: center; }
.amt-btn-primary { background: var(--primary); color: white; padding: 10px 24px; border-radius: 8px; font-weight: 600; }
.amt-btn-enroll {
    display: block;
    width: 100%;
    background-color: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}
.amt-btn-enroll:hover {
    background-color: var(--primary-dark);
    color: white;
}

/* --- Free Quiz Badge Styles (v4.3.0) --- */
.amt-quiz-container .test-card .quiz-access-badge.free {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--green);
    color: white;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 12px 0 8px 0;
    z-index: 2;
}

/* --- Lesson System Styles --- */
.amt-quiz-container .btn-view-lesson {
    background: var(--purple);
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}
.amt-quiz-container .btn-view-lesson:hover {
    background-color: #7c3aed;
}

/* --- Full Screen Lesson Viewer Styles --- */
#lesson-viewer-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
}

#lesson-viewer-screen:not(.hidden) {
    transform: translateY(0);
}

.lesson-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    height: 65px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    position: relative;
}

#lesson-viewer-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lesson-viewer-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lesson-viewer-close-btn:hover {
    background-color: var(--border);
}

.lesson-viewer-main {
    flex-grow: 1;
    overflow-y: auto;
    position: relative; /* Stacking context for watermark */
    padding: 2rem;
}

/* Watermark for lesson viewer */
.lesson-viewer-main::before {
    content: '';
    position: fixed; /* Fixed to viewport */
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    transform: translate(-50%, -50%); 
    background-image: url("https://examups.com/wp-content/uploads/2025/09/cropped-examups.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.08;
    pointer-events: none; 
}

/* Ensure content is above watermark */
.lesson-viewer-main > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .lesson-viewer-main {
        padding: 1.5rem 1rem;
    }
    #lesson-viewer-title {
        font-size: 1.1rem;
    }
}

/* --- Rich Content & Read Mode Styles --- */
.lesson-viewer-header .lesson-font-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.lesson-font-controls button {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
}

.lesson-font-controls button:hover {
    background-color: var(--border);
    color: var(--text-primary);
}

.lesson-font-controls .font-size-indicator {
    font-weight: 600;
    min-width: 40px;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.lesson-text-container {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 18px; /* Base font size */
    transition: font-size 0.2s ease-in-out;
    background-color: var(--bg-alt);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    padding: 2rem 2.5rem;
}

@media (max-width: 768px) {
    .lesson-text-container {
        padding: 1.5rem;
    }
}

/* Rich Content Element Styling */
.lesson-text-container h1,
.lesson-text-container h2,
.lesson-text-container h3,
.lesson-text-container h4 {
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-primary);
}
.lesson-text-container h1 { font-size: 2em; }
.lesson-text-container h2 { font-size: 1.75em; }
.lesson-text-container h3 { font-size: 1.5em; }
.lesson-text-container h4 { font-size: 1.25em; }

.lesson-text-container p {
    margin-bottom: 1.25em;
}

.lesson-text-container a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid var(--primary-light);
}
.lesson-text-container a:hover {
    border-bottom-color: var(--primary);
}

.lesson-text-container ul,
.lesson-text-container ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}
.lesson-text-container li {
    margin-bottom: 0.5em;
}

.lesson-text-container blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid var(--primary);
    background-color: var(--primary-light);
    color: var(--text-primary);
}
.lesson-text-container blockquote p:last-child {
    margin-bottom: 0;
}

.lesson-text-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5em 0;
    box-shadow: var(--shadow-md);
}

.lesson-text-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    border: none;
    box-shadow: var(--shadow-md);
    margin: 1.5em 0;
}

.lesson-text-container pre {
    background-color: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 1.5em;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.lesson-text-container code {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

.lesson-text-container pre > code {
    background: none;
    padding: 0;
}

.lesson-text-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    box-shadow: var(--shadow-sm);
}
.lesson-text-container th,
.lesson-text-container td {
    border: 1px solid var(--border);
    padding: 0.75em 1em;
    text-align: left;
}
.lesson-text-container th {
    background-color: var(--bg);
    font-weight: 700;
}
.lesson-text-container tr:nth-child(even) {
    background-color: var(--bg);
}

/* --- Custom PDF Viewer Styles --- */
.lesson-viewer-main .lesson-pdf-container {
    display: flex;
    flex-direction: column;
    
    background-color: var(--bg);
    padding: 0;
    margin: -2rem; /* Counteract parent padding to be truly full-area */
}

.pdf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.pdf-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pdf-toolbar-button {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
}
.pdf-toolbar-button:hover {
    background-color: var(--bg);
    color: var(--text-primary);
}
.pdf-toolbar-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pdf-page-controls input {
    width: 50px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px;
    background-color: var(--bg);
    color: var(--text-primary);
    -moz-appearance: textfield; /* Firefox */
}
.pdf-page-controls input::-webkit-outer-spin-button,
.pdf-page-controls input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pdf-page-info {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.pdf-viewer-body {
    flex-grow: 1;
    overflow: auto;
    padding: 1.5rem;
    text-align: center;
}

#pdf-render-area {
    display: inline-block;
}

#pdf-render-area canvas {
    display: block;
    margin: 0 auto 1rem auto;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

.pdf-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
    gap: 1rem;
}
.pdf-loader {
    border: 5px solid var(--border);
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: pdf-spin 1s linear infinite;
}
@keyframes pdf-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Custom Video Player & Notes Styles --- */
.lesson-video-wrapper {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.lesson-video-player-container {
    flex-grow: 1;
    min-width: 0; /* Prevents flexbox overflow */
    position: relative;
}

.lesson-video-player-container .vjs-big-play-button {
    background-color: rgba(45, 55, 72, 0.7) !important;
    border-color: var(--primary) !important;
    border-width: 3px !important;
    height: 2em !important;
    width: 2em !important;
    border-radius: 50% !important;
    margin-top: -1em !important;
    margin-left: -1em !important;
}

.video-js .vjs-control-bar {
    background-color: rgba(45, 55, 72, 0.85) !important;
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    background: var(--primary) !important;
}

.video-js .vjs-slider {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.video-watermark {
    position: absolute;
    top: 15px;
    right: 15px;
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 1;
}

.lesson-video-notes-container {
    flex-basis: 350px;
    flex-shrink: 0;
    background-color: var(--bg-alt);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 1.5rem;
    height: 500px; /* Or adjust as needed */
    display: flex;
    flex-direction: column;
}

.lesson-video-notes-container h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

#video-notes-list {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
    list-style: none;
    padding: 0;
}

.video-note-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.video-note-item:last-child {
    border-bottom: none;
}

.video-note-timestamp {
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    margin-right: 0.5rem;
}

.video-note-text {
    color: var(--text-secondary);
}

#add-video-note-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#add-video-note-form textarea {
    width: 100%;
    min-height: 70px;
    border-radius: 6px;
    border: 1px solid var(--border);
    padding: 0.5rem;
    font-family: var(--font-sans);
    resize: vertical;
}

#add-video-note-form button {
    background-color: var(--primary);
    color: white;
    padding: 0.6rem;
    border-radius: 6px;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .lesson-video-wrapper {
        flex-direction: column;
    }
    .lesson-video-notes-container {
        width: 100%;
        flex-basis: auto;
        height: auto;
        max-height: 400px;
    }
}

/* --- Product Page Layout --- */
.amt-product-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.amt-product-main-content {
    flex: 1;
    min-width: 65%;
}

.amt-product-sidebar {
    flex-basis: 350px;
    flex-grow: 1;
}

.amt-product-sidebar .amt-course-card {
    max-width: none;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 2rem;
}

@media (max-width: 960px) {
    .amt-product-layout-wrapper {
        flex-direction: column;
    }

    .amt-product-sidebar {
        order: -1; /* Moves the card to the top on smaller screens */
    }
}

/* --- Course Progress Bar (v5.9.0) --- */
.amt-course-progress-container {
    background-color: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
}
.amt-course-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.amt-course-progress-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}
.amt-course-progress-percentage {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}
.amt-course-progress-bar {
    width: 100%;
    height: 12px;
    background-color: var(--border);
    border-radius: 99px;
    overflow: hidden;
}
.amt-course-progress-fill {
    height: 100%;
    width: 0%; /* Will be set by JS */
    background-color: var(--primary);
    border-radius: 99px;
    transition: width 0.5s ease-in-out;
}

/* --- Quiz Attempt History (v5.9.0) --- */
.quiz-card-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.btn-view-history {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-view-history:hover {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
.amt-quiz-container .btn-attempt[disabled] {
    background-color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}
.quiz-attempt-history-container {
    display: none; /* Hidden by default */
    background-color: var(--bg);
    margin-top: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    animation: fadeIn 0.3s;
}
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.history-table th, .history-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.history-table th {
    font-weight: 600;
    color: var(--text-secondary);
}
.history-table tr:last-child td {
    border-bottom: none;
}
.history-loader {
    display: block;
    margin: 1rem auto;
    width: 24px;
    height: 24px;
    border: 3px solid var(--primary-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: history-spin 1s linear infinite;
}
@keyframes history-spin {
    to { transform: rotate(360deg); }
}

/* --- Interactive Question Types (NEW) --- */
.interactive-question-container {
    margin-top: 1rem;
}

/* Fill in the Blanks */
#question-text .fill-blank-input {
    border: none;
    border-bottom: 2px solid var(--border);
    background: transparent;
    padding: 4px 8px;
    font-size: 1.1rem;
    font-family: inherit;
    color: var(--text-primary);
    width: 160px;
    text-align: center;
    border-radius: 0;
    margin: 0 4px;
}
#question-text .fill-blank-input:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

/* Matching */
.matching-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}
.matching-prompts, .matching-answers {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.matching-prompt-item {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}
.prompt-text {
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.prompt-dropzone {
    flex-basis: 200px;
    flex-shrink: 0;
    border: 2px dashed var(--border);
    border-radius: 8px;
    min-height: 50px;
    transition: all 0.2s;
    padding: 0.5rem;
}
.prompt-dropzone.hover {
    border-color: var(--primary);
    background-color: var(--primary-light);
}
.matching-answer-item {
    padding: 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: grab;
    box-shadow: var(--shadow-sm);
}
.matching-answer-item:active {
    cursor: grabbing;
    box-shadow: var(--shadow-lg);
}

/* Ordering */
.ordering-container {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ordering-item {
    padding: 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: grab;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ordering-item .material-symbols-outlined {
    color: var(--text-secondary);
}
.ui-sortable-placeholder {
    border: 2px dashed var(--primary);
    background-color: var(--primary-light);
    height: 50px;
    visibility: visible !important;
    border-radius: 8px;
}

/* Hotspot */
.hotspot-image-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: pointer;
}
.hotspot-image-container img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}
.hotspot-click-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid var(--primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* My Courses Dashboard & Bookmarks */
.amt-dashboard-table-container { background-color: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; overflow-x: auto;}
.amt-dashboard-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.amt-dashboard-table th, .amt-dashboard-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
.amt-dashboard-table th { font-weight: 600; color: #4a5568; }
.amt-dashboard-table tbody tr:hover { background-color: #f8f9fa; }
.amt-dashboard-table .question-text-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amt-dashboard-collapsible-section { margin-top: 2.5rem; }
.amt-dashboard-collapsible-section summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.amt-dashboard-collapsible-section summary::-webkit-details-marker { display: none; }
.amt-dashboard-collapsible-section summary .amt-dashboard-section-title { margin: 0; border-bottom: none; }
.amt-dashboard-collapsible-section .amt-collapsible-icon { font-size: 2rem; color: #6b7280; transition: transform 0.2s ease-in-out; }
.amt-dashboard-collapsible-section[open] > summary .amt-collapsible-icon { transform: rotate(180deg); }
.amt-dashboard-collapsible-section > .amt-dashboard-table-container { margin-top: 1.5rem; }

/* --- Practice Mode Styles (NEW) --- */
.practice-mode-launcher {
    background-color: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}
.btn-practice-mode {
    background-color: var(--primary);
    color: white;
    font-size: 1.1rem;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}
.btn-practice-mode:hover {
    background-color: var(--primary-dark);
}
.practice-mode-launcher p {
    margin: 0.75rem 0 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.practice-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 4000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s;
}
.practice-modal-content {
    background: var(--bg-alt);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
}
.practice-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.practice-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}
.close-modal-btn {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
}
.practice-modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.practice-modal-body .form-group {
    margin: 0;
}
.practice-modal-body label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.practice-modal-body select,
.practice-modal-body input[type="range"] {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font-size: 1rem;
}
.practice-modal-body input[type="range"] {
    padding: 0;
    accent-color: var(--primary);
}
.practice-modal-body #practice-topics {
    min-height: 120px;
}
.adaptive-mode-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--bg);
    padding: 1rem;
    border-radius: 8px;
}
.adaptive-mode-toggle label {
    margin: 0;
}
.adaptive-mode-toggle .toggle-switch {
    margin-left: auto;
    flex-shrink: 0;
}
.adaptive-mode-toggle .description {
    display: none; /* Hide for now, can be enabled if needed */
}
.toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; background-color: #ccc; border-radius: 99px; transition: background-color 0.3s; cursor: pointer; -webkit-appearance: none; appearance: none; outline: none; }
.toggle-switch::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: white; top: 4px; left: 4px; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch:checked { background-color: var(--green); }
.toggle-switch:checked::after { transform: translateX(22px); }
.practice-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    text-align: right;
}
.btn-start-practice {
    background-color: var(--green);
    color: white;
    font-size: 1rem;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
}

/* --- Video.js Seek Buttons Plugin Styles (NEW) --- */
.video-js .vjs-seek-button {
    font-size: 1.5em; /* Adjust icon size */
    width: 2.2em;
    top: 50%;
    transform: translateY(-50%);
}

.vjs-seek-button .vjs-icon-placeholder:before {
    line-height: 1.5; /* Vertically align the icon */
}

.video-js .vjs-control-bar .vjs-seek-button:hover {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    transform: translateY(-50%) scale(1.1);
}