/* ===== Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== FORCE LANDSCAPE ON ALL PAGES ===== */
@page {
    size: landscape;
    margin: 0;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background: #f5f7fa;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1a1a2e;
    padding: 16px;
}

/* ===== WIDE LANDSCAPE CONTAINER ===== */
.container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    padding: 24px 32px;
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.06);
    min-height: 85vh;
}

/* ===== Typography ===== */
h1, h2, h3, p {
    font-family: 'Inter', sans-serif;
}

/* ===== CleverMent Branding ===== */
.header {
    text-align: center;
    padding: 6px 0 12px 0;
    margin-bottom: 20px;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
}

.logo-image {
    max-width: 100%;
    height: auto;
    max-height: 100px;
    width: auto;
    display: block;
}

.tagline {
    color: #6b7a8f;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
}

/* ===== Landing Page ===== */
#landingPage {
    text-align: center;
    padding: 30px 0;
}

#landingPage h2 {
    font-size: 32px;
    margin-bottom: 8px;
}

#landingPage button {
    min-width: 200px;
    padding: 14px 36px;
    font-size: 16px;
}

/* ===== Student Access ===== */
#studentAccess {
    padding: 10px 0;
    max-width: 600px;
    margin: 0 auto;
}

#assessmentCode {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
}

/* ===== Custom Class Wrappers ===== */
.custom-class-wrapper-student,
.custom-class-wrapper-teacher {
    margin-top: 8px;
    animation: slideDown 0.3s ease;
}

/* ===== Teacher Auth ===== */
#teacherAuth {
    max-width: 500px;
    margin: 0 auto;
}

#teacherAuth h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* ===== Form Elements ===== */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #dce1e8;
    border-radius: 10px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    background: white;
    transition: border-color 0.2s ease;
    color: #1a1a2e;
}

.form-input:focus {
    outline: none;
    border-color: #2d6cdf;
    box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.1);
}

.form-input::placeholder {
    color: #a0aec0;
}

select.form-input {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a8f' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.helper-text {
    font-size: 12px;
    color: #8a9aa8;
    margin-top: 4px;
    font-style: italic;
}

/* ===== Subject Dropdown ===== */
.subject-wrapper {
    position: relative;
}

.subject-select {
    cursor: pointer;
}

.custom-subject-wrapper-teacher {
    margin-top: 8px;
    animation: slideDown 0.3s ease;
}

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

/* ===== Buttons ===== */
button {
    border: none;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.2px;
}

.primary-btn {
    background: #2d6cdf;
    color: white;
}

.primary-btn:hover {
    background: #1a4fad;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(45, 108, 223, 0.25);
}

.secondary-btn {
    background: #eef2f6;
    color: #1a1a2e;
}

.secondary-btn:hover:not(:disabled) {
    background: #dce1e8;
    transform: translateY(-2px);
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.full-width {
    width: 100%;
    margin-top: 8px;
}

/* ===== Timer ===== */
#timerDisplay,
#studentTimerDisplay {
    font-weight: 600;
    color: #2d6cdf;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

#timerDisplay.warning,
#studentTimerDisplay.warning {
    color: #dc3545;
    animation: pulse 1s ease-in-out infinite;
}

#timerDisplay.expired,
#studentTimerDisplay.expired {
    color: #dc3545;
    animation: pulse 0.5s ease-in-out infinite;
    font-weight: 700;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ===== Time Up Overlay ===== */
.time-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.time-up-box {
    background: white;
    padding: 40px 50px;
    border-radius: 20px;
    text-align: center;
    max-width: 450px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.time-up-box h2 {
    color: #dc3545;
    font-size: 32px;
    margin-bottom: 10px;
}

.time-up-box p {
    color: #4a5a6e;
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.time-up-box button {
    background: #2d6cdf;
    color: white;
    border: none;
    padding: 14px 40px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-up-box button:hover {
    background: #1a4fad;
    transform: translateY(-2px);
}

/* ===== Quiz Navigation ===== */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-buttons button {
    flex: 1;
    min-width: 100px;
}

#submitBtn,
#studentSubmitBtn {
    background: #2d9c5c;
    color: white;
}

#submitBtn:hover,
#studentSubmitBtn:hover {
    background: #1f7a46;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(45, 156, 92, 0.25);
}

/* ===== Student Quiz ===== */
#studentQuizSection .quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

#studentQuizSection .quiz-header h2 {
    color: #1a1a2e;
    font-size: 20px;
    font-weight: 600;
}

#studentQuizSection .quiz-stats {
    background: #eef2f6;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #4a5a6e;
    display: flex;
    align-items: center;
    gap: 8px;
}

#studentQuestionBoxesContainer {
    margin: 12px 0 20px 0;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1.5px solid #eef2f6;
}

#studentQuestionBoxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#studentQuestionBoxes .q-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: #eef2f6;
    color: #4a5a6e;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

#studentQuestionBoxes .q-box:hover {
    transform: scale(1.06);
}

#studentQuestionBoxes .q-box.answered {
    background: #2d9c5c;
    color: white;
    border-color: #1f7a46;
}

#studentQuestionBoxes .q-box.current {
    border-color: #2d6cdf;
    border-width: 2.5px;
    background: #dce6f5;
    transform: scale(1.06);
}

#studentQuestionBoxes .q-box.answered.current {
    background: #2d9c5c;
    border-color: #1a4fad;
}

#studentQuestionContainer {
    background: #f8fafc;
    padding: 28px 32px;
    border-radius: 16px;
    margin: 8px 0;
    border: 1.5px solid #eef2f6;
}

#studentQuestionText {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 22px;
    color: #1a1a2e;
    line-height: 1.6;
}

#studentOptionsContainer .option {
    display: block;
    padding: 14px 20px;
    margin: 8px 0;
    background: white;
    border: 1.5px solid #dce1e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a2e;
}

#studentOptionsContainer .option:hover {
    border-color: #2d6cdf;
    background: #f5f8ff;
    transform: translateX(4px);
}

#studentOptionsContainer .option.selected {
    border-color: #2d6cdf;
    background: #dce6f5;
}

#studentOptionsContainer .option.correct {
    border-color: #2d9c5c;
    background: #e3f5eb;
}

#studentOptionsContainer .option.wrong {
    border-color: #dc3545;
    background: #fde8ea;
}

/* ===== Student Results ===== */
#studentResultsSection {
    background: #f8fafc;
    padding: 28px 32px;
    border-radius: 16px;
    border: 1.5px solid #eef2f6;
}

#studentResultsSection h2 {
    color: #1a1a2e;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
}

#studentScoreDisplay {
    font-size: 34px;
    font-weight: 700;
    text-align: center;
    color: #2d9c5c;
    padding: 24px;
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1.5px solid #eef2f6;
}

#studentScoreDisplay .grade {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #4a5a6e;
    margin-top: 4px;
}

#studentScoreDisplay .result-details {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #6b7a8f;
    margin-top: 4px;
}

#studentCorrectionsContainer h3 {
    color: #1a1a2e;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
}

#studentCorrectionsContainer .correction-item {
    background: white;
    padding: 18px 22px;
    margin: 10px 0;
    border-radius: 10px;
    border-left: 4px solid #2d6cdf;
    border: 1.5px solid #eef2f6;
    border-left-width: 4px;
}

#studentCorrectionsContainer .correction-item p {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Certificate ===== */
#studentCertificatePreview {
    background: white;
    border: 6px solid #C9A84C;
    border-radius: 20px;
    padding: 50px 60px;
    max-width: 850px;
    margin: 0 auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}

#studentCertificatePreview h1 {
    font-family: 'Georgia', serif;
    font-size: 42px;
    color: #1a1a2e;
    text-align: center;
    letter-spacing: 8px;
    margin: 4px 0;
    font-weight: 700;
}

#studentCertificatePreview h2 {
    font-family: 'Georgia', serif;
    font-size: 24px;
    color: #C9A84C;
    text-align: center;
    letter-spacing: 6px;
    margin-top: -8px;
    font-weight: 400;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 12px;
}

#studentCertificatePreview h3 {
    font-family: 'Georgia', serif;
    font-size: 36px;
    color: #1a1a2e;
    text-align: center;
    margin: 6px 0;
    letter-spacing: 2px;
    font-weight: 700;
    border-bottom: 2px solid #f5f0e8;
    padding-bottom: 6px;
}

#studentCertificatePreview h4 {
    font-family: 'Georgia', serif;
    font-size: 28px;
    color: #C9A84C;
    text-align: center;
    margin: 4px 0;
    letter-spacing: 2px;
    font-weight: 600;
}

#studentCertificatePreview .cert-score {
    font-family: 'Georgia', serif;
    font-size: 42px;
    color: #1a1a2e;
    text-align: center;
    margin: 2px 0;
    font-weight: 700;
}

@media (max-width: 640px) {
    #studentCertificatePreview {
        padding: 20px;
    }
    #studentCertificatePreview h1 {
        font-size: 28px;
        letter-spacing: 4px;
    }
    #studentCertificatePreview h2 {
        font-size: 18px;
        letter-spacing: 3px;
    }
    #studentCertificatePreview h3 {
        font-size: 24px;
    }
    #studentCertificatePreview h4 {
        font-size: 20px;
    }
    #studentCertificatePreview .cert-score {
        font-size: 30px;
    }
}

@media print {
    #studentCertificatePreview {
        border: 6px solid #C9A84C !important;
        box-shadow: none !important;
        padding: 40px !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    body {
        background: white !important;
        padding: 0 !important;
    }
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .header, .footer, .nav-buttons, .quiz-header, .quiz-stats {
        display: none !important;
    }
    #studentCertificateSection {
        padding: 20px !important;
    }
}

/* ===== Teacher Dashboard ===== */
#uploadSection {
    background: #f8fafc;
    padding: 28px 32px;
    border-radius: 16px;
    margin-bottom: 24px;
    border: 1.5px solid #eef2f6;
}

#uploadSection h3 {
    color: #1a1a2e;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

.csv-format-hint {
    margin-top: 14px;
    padding: 10px 16px;
    background: #eef6ff;
    border-radius: 8px;
    border-left: 3px solid #2d6cdf;
}

.csv-format-hint p {
    color: #1e3a6f;
    font-size: 13px;
    font-weight: 500;
}

/* ===== Admin Section ===== */
#adminSection {
    background: #f8fafc;
    padding: 28px 32px;
    border-radius: 16px;
    border: 1.5px solid #eef2f6;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.admin-header h3 {
    color: #1a1a2e;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.admin-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-controls .form-input {
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
}

.admin-controls .primary-btn,
.admin-controls .secondary-btn {
    padding: 8px 16px;
    font-size: 13px;
}

/* ===== Statistics Cards ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: white;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1.5px solid #eef2f6;
    text-align: center;
}

.stat-card h3 {
    font-size: 12px;
    font-weight: 500;
    color: #6b7a8f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-card p {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
}

.stat-card p.green { color: #2d9c5c; }
.stat-card p.blue { color: #2d6cdf; }
.stat-card p.orange { color: #e67e22; }
.stat-card p.red { color: #dc3545; }
.stat-card p.purple { color: #6f42c1; }

/* ===== Results Table ===== */
#teacherResultsTableContainer,
#adminResultsTableContainer {
    background: white;
    border-radius: 12px;
    border: 1.5px solid #eef2f6;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#teacherResultsTable,
#adminResultsTable {
    width: max-content;
    min-width: 1220px;
    border-collapse: collapse;
    font-size: 14px;
}

#teacherResultsTable thead,
#adminResultsTable thead {
    background: #f8fafc;
}

#teacherResultsTable th,
#adminResultsTable th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #4a5a6e;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

#teacherResultsTable td,
#adminResultsTable td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f2f5;
    color: #1a1a2e;
}

#teacherResultsTable tbody tr:hover,
#adminResultsTable tbody tr:hover {
    background: #f8fafc;
}

#teacherResultsTable .score-high,
#adminResultsTable .score-high {
    color: #2d9c5c;
    font-weight: 600;
}

#teacherResultsTable .score-mid,
#adminResultsTable .score-mid {
    color: #e67e22;
    font-weight: 600;
}

#teacherResultsTable .score-low,
#adminResultsTable .score-low {
    color: #dc3545;
    font-weight: 600;
}

.result-action-cell {
    white-space: nowrap;
    text-align: center;
}

.result-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    padding: 7px 11px;
    background: #2d6cdf;
    color: #fff;
    font: 600 12px 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.result-action-btn:hover {
    background: #245bbb;
}

/* ===== Teacher Published List ===== */
#teacherPublishedList .helper-text {
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}

/* ===== Admin Teacher List ===== */
#adminTeacherList .helper-text {
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}

/* ===== Hide/Show Password Button ===== */
#loginToggleBtn,
#signupToggleBtn,
#confirmToggleBtn,
#adminToggleBtn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7a8f;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
}

#loginToggleBtn:hover,
#signupToggleBtn:hover,
#confirmToggleBtn:hover,
#adminToggleBtn:hover {
    color: #2d6cdf;
}

/* ===== Footer ===== */
.footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1.5px solid #eef2f6;
    color: #6b7a8f;
}

.footer p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.footer-sub {
    font-size: 12px !important;
    color: #8a9aa8;
    margin-top: 4px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .container {
        padding: 16px;
        max-width: 100%;
    }
    
    .logo-image {
        max-height: 70px;
    }
    
    .tagline {
        font-size: 11px;
        letter-spacing: 1px;
    }
    
    #landingPage h2 {
        font-size: 24px;
    }
    
    #landingPage button {
        min-width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    #questionText,
    #studentQuestionText {
        font-size: 17px;
    }
    
    .option,
    #studentOptionsContainer .option {
        font-size: 14px;
        padding: 12px 16px;
    }
    
    .nav-buttons button {
        font-size: 13px;
        padding: 10px 16px;
        min-width: 70px;
    }
    
    .quiz-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .quiz-stats {
        width: 100%;
        justify-content: space-between;
    }
    
    #scoreDisplay,
    #studentScoreDisplay {
        font-size: 28px;
        padding: 18px;
    }
    
    #questionContainer,
    #studentQuestionContainer {
        padding: 20px;
    }
    
    #uploadSection {
        padding: 20px;
    }
    
    #resultsSection,
    #studentResultsSection {
        padding: 20px;
    }
    
    #adminSection {
        padding: 20px;
    }
    
    .admin-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .admin-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .admin-controls .form-input,
    .admin-controls .primary-btn,
    .admin-controls .secondary-btn {
        width: 100%;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    #teacherResultsTable,
    #adminResultsTable {
        font-size: 12px;
    }
    
    #teacherResultsTable th,
    #teacherResultsTable td,
    #adminResultsTable th,
    #adminResultsTable td {
        padding: 8px 10px;
    }
    
    .time-up-box {
        padding: 30px 24px;
        margin: 20px;
    }
    
    .time-up-box h2 {
        font-size: 26px;
    }
    
    #teacherAuth {
        padding: 0 10px;
    }
}

/* ===== Print Styles ===== */
@media print {
    @page {
        size: A4 landscape !important;
        margin: 0 !important;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: white !important;
    }
    
    .certificate {
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 auto !important;
        page-break-before: avoid !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
    }
    
    #studentCertificatePreview {
        display: block !important;
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: white !important;
    }
    
    .header, .footer, .nav-buttons, .quiz-header, .quiz-stats {
        display: none !important;
    }
    
    #studentCertificateSection {
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }
    
    img {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
/* ============================================================
   SCROLLABLE PANELS (dashboard lists/tables that grow over time)
   ============================================================ */
.scrollable-panel {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

.scrollable-panel::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollable-panel::-webkit-scrollbar-thumb {
    background: #c3ccd6;
    border-radius: 4px;
}

.scrollable-panel::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-panel table {
    min-width: 700px;
}

#teacherResultsTable,
#adminResultsTable {
    min-width: 1220px;
}

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

/* ============================================================
   DASHBOARD SIDEBAR NAVIGATION
   (Teacher & Admin dashboards: one section shown at a time)
   ============================================================ */
.dash-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.dash-sidebar {
    width: 230px;
    flex: 0 0 230px;
    min-width: 0;
    background: #f8fafc;
    border: 1.5px solid #eef2f6;
    border-radius: 14px;
    padding: 14px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.22s ease, flex-basis 0.22s ease, padding 0.22s ease;
}

/* CleverMent branding inside dashboard sidebars */
.dash-branding {
    width: 100%;
    padding: 4px 4px 14px;
    margin-bottom: 8px;
    text-align: center;
    transition: padding 0.22s ease, margin 0.22s ease;
}

.dash-logo-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72px;
    margin: 0 auto 7px;
    object-fit: contain;
    transition: max-height 0.22s ease, max-width 0.22s ease, margin 0.22s ease;
}

.dash-tagline {
    margin: 0;
    color: #6b7a8f;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 0.7px;
    overflow-wrap: anywhere;
    transition: opacity 0.15s ease, max-height 0.22s ease;
}

.sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #dce3eb;
    border-radius: 8px;
    background: #ffffff;
    color: #4a5a6e;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease, transform 0.22s ease;
}

.sidebar-collapse-toggle:hover {
    background: #eef2f6;
    color: #1a1a2e;
}

.sidebar-collapse-toggle span {
    display: block;
    transform: translateY(-1px);
}

.dash-sidebar nav {
    display: flex;
    flex-direction: column;
}

.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #4a5a6e;
    cursor: pointer;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, color 0.15s ease, padding 0.22s ease, gap 0.22s ease;
}

.dash-nav-item svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.dash-nav-item span {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
    overflow-wrap: anywhere;
    transition: opacity 0.12s ease;
}

.dash-nav-item:hover {
    background: #eef2f6;
    transform: none;
    box-shadow: none;
}

.dash-nav-item.active {
    background: #2d6cdf;
    color: #ffffff;
}

/* Desktop collapsed state: icon-only navigation with a compact CleverMent logo. */
.dash-layout.sidebar-collapsed .dash-sidebar {
    width: 72px;
    flex-basis: 72px;
    padding: 12px 8px;
}

.dash-layout.sidebar-collapsed .dash-branding {
    padding: 34px 0 10px;
    margin-bottom: 10px;
}

.dash-layout.sidebar-collapsed .dash-logo-image {
    max-width: 42px;
    max-height: 42px;
    margin: 0 auto;
}

.dash-layout.sidebar-collapsed .dash-tagline {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.dash-layout.sidebar-collapsed .sidebar-collapse-toggle {
    right: 50%;
    transform: translateX(50%);
    width: 26px;
    height: 26px;
    font-size: 21px;
}

.dash-layout.sidebar-collapsed .sidebar-collapse-toggle span {
    transform: rotate(180deg) translateY(1px);
}

.dash-layout.sidebar-collapsed .dash-nav-item {
    justify-content: center;
    gap: 0;
    padding: 11px 0;
}

.dash-layout.sidebar-collapsed .dash-nav-item span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dash-layout.sidebar-collapsed .dash-nav-item svg {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
}

.dash-main {
    flex: 1;
    min-width: 0;
}

.dash-panel {
    display: none;
}

.dash-panel.active {
    display: block;
    animation: slideDown 0.25s ease;
}

.dashboard-menu-top {
    margin-bottom: 14px;
}

.sidebar-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: #2d6cdf;
    color: #ffffff;
    border: none;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
}

.sidebar-backdrop {
    display: none;
}

/* WhatsApp support buttons */
.whatsapp-float-btn {
    position: fixed;
    left: 16px;
    bottom: 66px;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 24px;
    background: #25D366;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.whatsapp-float-btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.whatsapp-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor;
}

.whatsapp-icon-inline {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    color: #ffffff;
}

@media (max-width: 900px) {
    .dash-layout {
        flex-direction: column;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .sidebar-collapse-toggle {
        display: none;
    }

    .dash-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(250px, 88vw);
        flex-basis: auto;
        max-height: none;
        border-radius: 0;
        z-index: 1200;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    /* Never carry the desktop collapsed width into the mobile drawer. */
    .dash-layout.sidebar-collapsed .dash-sidebar {
        width: min(250px, 88vw);
        flex-basis: auto;
        padding: 14px;
    }

    .dash-layout.sidebar-collapsed .dash-branding {
        padding: 4px 4px 14px;
        margin-bottom: 8px;
    }

    .dash-layout.sidebar-collapsed .dash-logo-image {
        max-width: 100%;
        max-height: 72px;
        margin: 0 auto 7px;
    }

    .dash-layout.sidebar-collapsed .dash-tagline {
        opacity: 1;
        max-height: none;
        overflow-wrap: anywhere;
        pointer-events: auto;
    }

    .dash-layout.sidebar-collapsed .dash-nav-item {
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 12px;
    }

    .dash-layout.sidebar-collapsed .dash-nav-item span {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        border: 0;
        flex: 1 1 auto;
    }

    .dash-layout.sidebar-collapsed .dash-nav-item svg {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }

    .dash-layout.sidebar-open .dash-sidebar {
        transform: none;
    }

    .dash-layout.sidebar-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1100;
    }
}

@media (max-width: 520px) {
    .whatsapp-float-btn {
        left: 12px;
        bottom: 66px;
        padding: 9px 13px;
        font-size: 13px;
    }

    #needHelpBtn {
        left: 12px !important;
        bottom: 12px !important;
    }
}

/* ============================================================
   LIVE NOW (students currently taking an assessment)
   ============================================================ */
.live-item {
    background: white;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1.5px solid #eef2f6;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2d9c5c;
    display: inline-block;
    animation: pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* ===== FINAL MOBILE RESULTS WIDTH FIX =====
   Keep the dashboard itself inside the viewport while allowing only
   the results table wrapper to scroll horizontally. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.dash-layout,
.dash-main,
.dash-panel,
.dash-panel.active,
#adminSection,
#adminResultsSection {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

#teacherResultsTableContainer,
#adminResultsTableContainer {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

#teacherResultsTable,
#adminResultsTable {
    width: max-content !important;
    min-width: 1220px !important;
    max-width: none !important;
}

@media (max-width: 900px) {
    .dash-main {
        width: 100%;
        max-width: 100%;
    }

    .dash-panel.active {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }
}

/* ============================================================
   CLEVERBOT
   ============================================================ */
#cleverBotRoot{position:fixed;inset:0;z-index:7000;pointer-events:none;font-family:Inter,Arial,sans-serif}
#cleverBotFloat{position:fixed;right:20px;bottom:76px;width:48px;height:48px;border:0;border-radius:50%;background:#1a1a2e;color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;cursor:grab;pointer-events:auto;touch-action:none;user-select:none}
#cleverBotFloat:active{cursor:grabbing}
.cleverbot-mark{font-size:25px;line-height:1;font-weight:800}
#cleverBotPanel[hidden]{display:none!important}
.cleverbot-panel{position:fixed;right:20px;bottom:134px;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 155px));background:#fff;border-radius:16px;box-shadow:0 14px 45px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column;pointer-events:auto;border:1px solid #e5e9f0}
.cleverbot-header{height:62px;flex:0 0 62px;background:#1a1a2e;color:#fff;padding:10px 12px;display:flex;align-items:center;justify-content:space-between}
.cleverbot-title-wrap{display:flex;align-items:center;gap:10px}.cleverbot-title-wrap strong{display:block;font-size:15px}.cleverbot-title-wrap small{display:block;opacity:.75;font-size:11px;margin-top:2px}
.cleverbot-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2d6cdf;color:#fff;font-weight:800}
.cleverbot-close{background:transparent;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.cleverbot-messages{flex:1;overflow-y:auto;padding:14px;background:#f7f9fc;display:flex;flex-direction:column;gap:10px}
.cleverbot-msg{position:relative;max-width:86%;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.cleverbot-msg.bot{align-self:flex-start;background:#fff;border:1px solid #e6ebf2;color:#1a1a2e;border-bottom-left-radius:5px;padding-top:36px}.cleverbot-msg.user{align-self:flex-end;background:#2d6cdf;color:#fff;border-bottom-right-radius:5px}.cleverbot-msg-body{white-space:pre-wrap;overflow-wrap:anywhere}.cleverbot-copy{position:absolute;top:7px;right:7px;height:25px;display:inline-flex;align-items:center;gap:5px;border:1px solid #e1e6ed;border-radius:7px;background:#fff;color:#5f6368;padding:0 7px;font:600 10px/1 Inter,Arial,sans-serif;cursor:pointer}.cleverbot-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cleverbot-copy:hover{background:#f5f7fa;color:#202124}.cleverbot-copy.copied{color:#16834b;border-color:#b9e2cb;background:#f0faf4}.cleverbot-copy.copied svg{stroke:#16834b}
.cleverbot-msg.system{align-self:center;background:#eef2f7;color:#6b7a8f;font-size:11px;padding:6px 9px}
.cleverbot-attachments{padding:7px 10px;border-top:1px solid #edf0f4;background:#fff;max-height:78px;overflow:auto}.cleverbot-attachment-chip{display:inline-flex;align-items:center;gap:5px;background:#f0f4f9;border-radius:8px;padding:5px 8px;margin:2px;font-size:11px;color:#334155}.cleverbot-attachment-chip button{border:0;background:transparent;cursor:pointer;color:#6b7a8f}
.cleverbot-composer{display:flex;align-items:flex-end;gap:4px;padding:8px;border-top:1px solid #e7ebf1;background:#fff}.cleverbot-composer textarea{flex:1;resize:none;border:1px solid #dce2ea;border-radius:18px;padding:9px 11px;max-height:100px;min-height:38px;font:inherit;font-size:13px;outline:none}.cleverbot-composer textarea:focus{border-color:#2d6cdf}.cleverbot-tool,.cleverbot-send{width:36px;height:36px;min-width:36px;flex:0 0 36px;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;appearance:none;-webkit-appearance:none}.cleverbot-tool{border-radius:8px;background:transparent;color:#5f6368}.cleverbot-tool:hover{background:#f1f3f4;color:#202124}.cleverbot-tool svg,.cleverbot-send svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.cleverbot-send{border-radius:50%;background:#2d6cdf;color:#fff}.cleverbot-send:hover{background:#245dc0}.cleverbot-send svg{width:19px;height:19px;fill:currentColor;stroke:none}.cleverbot-tool.recording{border-radius:8px;background:#dc3545;color:#fff;animation:cleverBotPulse 1s infinite}.cleverbot-tool.recording svg{display:block}.cleverbot-send:disabled{opacity:.5;cursor:not-allowed}
.cleverbot-note{font-size:9px;color:#8a94a3;text-align:center;padding:4px 8px 7px;background:#fff}
.cleverbot-typing-label{font-weight:600;margin-right:6px}.cleverbot-typing{display:inline-flex;gap:3px;align-items:center}.cleverbot-typing span{width:5px;height:5px;border-radius:50%;background:#8a94a3;animation:cleverBotTyping 1s infinite}.cleverbot-typing span:nth-child(2){animation-delay:.15s}.cleverbot-typing span:nth-child(3){animation-delay:.3s}
@keyframes cleverBotTyping{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
@keyframes cleverBotPulse{50%{transform:scale(1.06)}}
@media(max-width:600px){#cleverBotFloat{right:14px;bottom:72px;width:44px;height:44px}.cleverbot-panel{right:12px;bottom:124px;width:calc(100vw - 24px);height:min(560px,calc(100vh - 145px))}}


/* Published assessment question editor */
.assessment-editor-card {
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
}
.assessment-editor-card-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}
.assessment-editor-card label {
    display:block;
    font-size:12px;
    font-weight:600;
    color:#526276;
    margin:0 0 5px;
}
.assessment-editor-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
}
.assessment-editor-bottom {
    display:flex;
    gap:10px;
    margin-top:10px;
    align-items:flex-end;
    flex-wrap:wrap;
}
.assessment-editor-delete {
    border:0;
    border-radius:6px;
    padding:6px 10px;
    background:#fdecec;
    color:#c62828;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
}
@media (max-width: 640px) {
    .assessment-editor-options { grid-template-columns:1fr; }
    #assessmentEditorModal { padding:7px !important; }
}

/* Question image upload/preview controls */
.assessment-editor-image-box{flex:3;min-width:260px}
.assessment-editor-image-preview{margin:6px 0 8px;min-height:52px;max-height:180px;border:1px solid #e3eaf2;border-radius:8px;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.assessment-editor-image-preview img{display:block;max-width:100%;max-height:170px;object-fit:contain}
.assessment-editor-image-preview .assessment-editor-image-broken-text{display:none;font-size:11px;color:#b42318;padding:10px}
.assessment-editor-image-preview.broken .assessment-editor-image-broken-text{display:block}
.assessment-editor-no-image{font-size:11px;color:#8a97a8;border:1px dashed #d5dde8;border-radius:8px;padding:10px;margin:6px 0 8px;background:#fbfcfe}
.assessment-editor-image-actions{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.assessment-editor-image-actions button{font-size:12px!important;padding:7px 10px!important}
.assessment-editor-remove-image{border:1px solid #f2c6c6;border-radius:6px;padding:6px 10px;background:#fff5f5;color:#c62828;cursor:pointer;font-size:12px}
.assessment-editor-remove-image:hover{background:#fdecec}
@media(max-width:640px){.assessment-editor-image-box{min-width:100%}}


/* Student access attempt log */
.teacher-access-log-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: 13px;
    background: #ffffff;
}
.teacher-access-log-table th,
.teacher-access-log-table td {
    border-bottom: 1px solid #e7edf4;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.teacher-access-log-table th {
    background: #eef4fa;
    color: #243447;
    font-weight: 700;
    white-space: nowrap;
}
.cm-access-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.cm-access-success { background: #e7f7ed; color: #217a43; }
.cm-access-warning { background: #fff3d9; color: #946200; }
.cm-access-info { background: #e9f2ff; color: #245ea8; }
.cm-access-error { background: #fdebec; color: #b4232f; }



/* ============================================================================
   CLEVERMENT 3D LAYER OVERRIDES  (additive — original rules preserved above)
   ============================================================================ */
#cleverment-3d-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;   /* never blocks clicks, typing, or proctoring */
}

/* App container removed visually: no card, no frosted glass, no shadow.
   The app content now sits directly on the 3D world with nothing in front
   of the scene. position + z-index are KEPT on purpose: they keep the app's
   content painted above the 3D canvas (without them the canvas would cover
   the content). Width / padding / min-height are untouched so every page
   keeps exactly the same layout. */
.container {
    position: relative;
    z-index: 1;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
}

/* Major panels become frosted glass */
.studentQuestionContainer,
.studentOptionsContainer,
.studentResultsSection,
.studentCertificateSection,
.scrollable-panel,
.quiz-stats,
.stat-card,
.uploadSection,
.adminSection,
.teacherPublishedList,
.adminTeacherList,
.dash-sidebar {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 14px;
}

/* Popups stay readable glass */
.time-up-box,
.cleverbot-panel {
    background: rgba(255, 255, 255, 0.75) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Inputs: readable but still glassy */
.form-input,
#assessmentCode {
    background: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Certificate preview + editor stay opaque (print/export quality) */
.studentCertificatePreview,
.assessment-editor-card,
.time-up-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============================================================
   CLEVERBOT - formatted replies (headings, lists, tables, code)
   Added so CleverBot's answers look like ChatGPT / Claude / Gemini.
   ============================================================ */
.cleverbot-msg-body.md{white-space:normal;line-height:1.55;min-width:0}
.cleverbot-msg-body.md>*:first-child{margin-top:0}
.cleverbot-msg-body.md>*:last-child{margin-bottom:0}
.cleverbot-msg-body.md p{margin:0 0 .6em}
.cleverbot-msg-body.md ul,.cleverbot-msg-body.md ol{margin:.3em 0 .6em;padding-left:1.35em}
.cleverbot-msg-body.md li{margin:.15em 0}
.cleverbot-msg-body.md .cb-h{font-weight:700;margin:.8em 0 .35em;line-height:1.3}
.cleverbot-msg-body.md .cb-h1{font-size:1.2em}
.cleverbot-msg-body.md .cb-h2{font-size:1.12em}
.cleverbot-msg-body.md .cb-h3,.cleverbot-msg-body.md .cb-h4,.cleverbot-msg-body.md .cb-h5,.cleverbot-msg-body.md .cb-h6{font-size:1.04em}
.cleverbot-msg-body.md blockquote{margin:.5em 0;padding:.25em .8em;border-left:3px solid #c9d6ea;color:#475569;background:#f6f9fd;border-radius:0 8px 8px 0}
.cleverbot-msg-body.md hr{border:0;border-top:1px solid #e1e6ed;margin:.8em 0}
.cleverbot-msg-body.md a{color:#2d6cdf;text-decoration:underline}
.cleverbot-msg-body.md code.cb-inline{background:#eef2f7;border-radius:5px;padding:.1em .35em;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cb-table-wrap{overflow-x:auto;max-width:100%;margin:.5em 0}
.cb-table-wrap table{border-collapse:collapse;font-size:12px;min-width:100%}
.cb-table-wrap th,.cb-table-wrap td{border:1px solid #e1e6ed;padding:5px 8px;text-align:left;vertical-align:top}
.cb-table-wrap th{background:#f3f6fb;font-weight:700}
.cb-code{margin:.6em 0;border:1px solid #1e293b;border-radius:10px;overflow:hidden;background:#0f172a;max-width:100%}
.cb-code-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;background:#1e293b;color:#cbd5e1;font:600 10px/1 Inter,Arial,sans-serif}
.cb-lang{text-transform:uppercase;letter-spacing:.04em}
.cb-csv .cb-lang{color:#7dd3fc}
.cb-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cb-btn{border:1px solid #475569;background:#0f172a;color:#e2e8f0;border-radius:6px;padding:5px 9px;font:600 10px/1 Inter,Arial,sans-serif;cursor:pointer}
.cb-btn:hover{background:#334155}
.cb-code pre{margin:0;padding:10px 12px;overflow:auto;max-height:360px;white-space:pre;color:#e2e8f0;font:11.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;-webkit-overflow-scrolling:touch}
.cb-code pre code{white-space:pre;background:none;padding:0;font:inherit;color:inherit}

/* CleverBot live status line (shown while the answer is being prepared) */
.cleverbot-status{font-size:12px;font-style:italic;opacity:.75;margin-top:6px;animation:cleverbotStatusPulse 1.4s ease-in-out infinite}
@keyframes cleverbotStatusPulse{0%,100%{opacity:.45}50%{opacity:.9}}


/* ============================================================
   CLEVERBOT - round bot launcher + dark chat theme
   ============================================================ */
#cleverBotFloat{
    width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;max-width:56px!important;max-height:56px!important;
    padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;aspect-ratio:1/1;flex:none;
    background:#2d6cdf!important;color:#fff;font-size:0;line-height:1;
    box-shadow:0 6px 20px rgba(45,108,223,.5),0 0 0 3px rgba(255,255,255,.12)!important;
    display:flex;align-items:center;justify-content:center;
}
#cleverBotFloat svg{width:30px;height:30px;display:block}
@media(max-width:600px){#cleverBotFloat{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;max-width:52px!important;max-height:52px!important}}
.cleverbot-avatar svg{width:22px;height:22px;display:block}

.cleverbot-panel{background:#0f1220!important;border:1px solid #262b45!important;color:#e6e9f5;box-shadow:0 14px 45px rgba(0,0,0,.55)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.cleverbot-header{background:#0a0c18;border-bottom:1px solid #1f2440}
.cleverbot-messages{background:#0f1220}
.cleverbot-msg.bot{background:#181c33;border-color:#262b45;color:#e6e9f5}
.cleverbot-msg.user{background:#2d6cdf;color:#fff}
.cleverbot-msg.system{background:#1a1f38;color:#9aa6c4}
.cleverbot-copy{background:#1f2440;border-color:#2e3558;color:#c3cbe6}
.cleverbot-copy:hover{background:#283058;color:#fff}
.cleverbot-copy.copied{background:#12301f;border-color:#235c3a;color:#6ee7a0}
.cleverbot-copy.copied svg{stroke:#6ee7a0}
.cleverbot-attachments{background:#0f1220;border-top:1px solid #1f2440}
.cleverbot-attachment-chip{background:#1f2440;color:#c3cbe6}
.cleverbot-attachment-chip button{color:#9aa6c4}
.cleverbot-composer{background:#0a0c18;border-top:1px solid #1f2440}
.cleverbot-composer textarea{background:#181c33;border-color:#2e3558;color:#e6e9f5}
.cleverbot-composer textarea::placeholder{color:#7f8aaa}
.cleverbot-composer textarea:focus{border-color:#4d86f0}
.cleverbot-tool{color:#a9b4d4}
.cleverbot-tool:hover{background:#1f2440;color:#fff}
.cleverbot-note{background:#0a0c18;color:#7f8aaa}
.cleverbot-typing span{background:#7f8aaa}
.cleverbot-msg-body.md a{color:#7aa7ff}
.cleverbot-msg-body.md blockquote{border-left-color:#3a4478;color:#b6c0de;background:#141830}
.cleverbot-msg-body.md hr{border-top-color:#2e3558}
.cleverbot-msg-body.md code.cb-inline{background:#232a4d;color:#e6e9f5}
.cb-table-wrap th,.cb-table-wrap td{border-color:#2e3558}
.cb-table-wrap th{background:#1f2440}
.cleverbot-msg-body .katex{font-size:1.05em}
.cleverbot-msg-body .katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}

/* Hide the floating WhatsApp button while a student is taking an assessment */
body.cb-assessment-active #whatsappFloatBtn{display:none!important}

/* Students taking an assessment never see CleverBot (teacher tool) or WhatsApp */
body.cb-assessment-active #cleverBotFloat,
body.cb-assessment-active #cleverBotPanel{display:none!important}

/* Collapsed sidebar shows the CM emblem only (browsers without support just show the small full logo) */
.dash-layout.sidebar-collapsed .dash-logo-image{content:url('logo-icon.png')}


/* ===== Results page: top action bar (icons) ===== */
.result-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
}
.result-icon-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform .12s ease, box-shadow .12s ease;
}
.result-icon-btn:active { transform: scale(0.95); }
.result-icon-pdf { background: #C9A84C; }
.result-icon-img { background: #2d6cdf; }
.result-icon-tag { font-size: 9px; font-weight: 800; letter-spacing: .5px; line-height: 1; }
.result-take-another {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 16px;
    border: 1.5px solid #2d6cdf;
    border-radius: 12px;
    background: #fff;
    color: #2d6cdf;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
    justify-content: center;
    min-width: 170px;
}
.result-take-another:active { background: #eef3fd; }

/* ===== Fast-answer warning popup ===== */
.fast-answer-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 23, 42, 0.72);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.fast-answer-box {
    background: #fff;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    padding: 24px 22px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    border-top: 6px solid #e67e22;
}
.fast-answer-icon { color: #e67e22; margin-bottom: 6px; }
.fast-answer-box h3 { margin: 0 0 10px; color: #1a1a2e; font-size: 19px; }
.fast-answer-box p { margin: 0 0 10px; color: #4a5568; font-size: 14px; line-height: 1.5; }
.fast-answer-box button { margin-top: 8px; width: 100%; }
.fast-answer-box button:disabled { opacity: .6; cursor: not-allowed; }


/* ===== Results dashboard: multi-select + bulk actions ===== */
.select-cell { width: 34px; text-align: center; }
.select-cell input, .result-select-box { width: 18px; height: 18px; cursor: pointer; }
.bulk-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin: 10px 0;
    background: #172033;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.bulk-count { font-weight: 700; font-size: 14px; margin-right: auto; }
.bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.bulk-btn-cert { background: #C9A84C; color: #1a1a2e; }
.bulk-btn-delete { background: #dc3545; }
.bulk-btn:disabled { opacity: .6; cursor: wait; }
tr.result-row-selected td { background: #eef3fd; }

/* ===== Edit-assessment settings panel ===== */
.assessment-settings-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}
.assessment-settings-box h4 { margin: 0 0 4px; color: #172033; font-size: 15px; }
.assessment-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.assessment-settings-grid label { display: block; font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.assessment-settings-toggles { margin-top: 12px; display: grid; gap: 8px; }
.assessment-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #172033;
}
.assessment-settings-toggle input { width: 18px; height: 18px; }


/* ===== Live messages: student banners ===== */
.live-msg-stack {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 0;
    right: 0;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    pointer-events: none;
}
.live-msg-card {
    pointer-events: auto;
    width: 100%;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: #172033;
    color: #fff;
    border-left: 5px solid #C9A84C;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    animation: liveMsgIn .35s ease-out;
}
@keyframes liveMsgIn { from { transform: translateY(-24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.live-msg-icon { color: #C9A84C; flex: 0 0 auto; display: flex; }
.live-msg-body { flex: 1; min-width: 0; }
.live-msg-from { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #C9A84C; margin-bottom: 2px; }
.live-msg-text { font-size: 14.5px; line-height: 1.4; word-wrap: break-word; }
.live-msg-ok {
    flex: 0 0 auto;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    background: #C9A84C;
    color: #172033;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

/* ===== Live Now: message buttons ===== */
.live-toolbar { margin-bottom: 10px; }
.live-msg-all-btn, .live-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.live-msg-all-btn { background: #172033; color: #fff; padding: 9px 14px; }
.live-msg-btn { background: #eef3fd; color: #2d6cdf; padding: 7px 11px; border: 1.5px solid #cfe1ff; }
.live-last-msg { font-size: 12px; color: #6b7a8f; }

/* ===== Live message dialog ===== */
.live-msg-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(15, 23, 42, 0.6);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.live-msg-dialog {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow: auto;
    padding: 20px 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.live-msg-dialog h3 { margin: 0 0 4px; color: #172033; }
.live-msg-label { display: block; font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.live-msg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }


/* ===== Update 1 additions ===== */
.assessment-editor-credit {
    margin-left: auto;
    margin-right: 8px;
    border: 1.5px solid #cfe1ff;
    background: #eef3fd;
    color: #2d6cdf;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.whatsapp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 4px 12px;
    background: #25D366 !important;
    color: #fff !important;
}


/* ===== Connecting banner ===== */
.connect-banner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 10px;
    right: 10px;
    max-width: 520px;
    margin: 0 auto;
    z-index: 99995;
    background: #172033;
    color: #fff;
    border-left: 5px solid #C9A84C;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* ===== Class positions + student progress ===== */
.pos-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.pos-tab {
    border: 1.5px solid #cfe1ff;
    background: #fff;
    color: #2d6cdf;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
}
.pos-tab.active { background: #2d6cdf; color: #fff; border-color: #2d6cdf; }
.pos-refresh { margin-left: auto; border-color: #e2e8f0; color: #475569; }
.pos-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.pos-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pos-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.pos-chip { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; text-align: center; }
.pos-chip-value { font-size: 20px; font-weight: 800; color: #172033; }
.pos-chip-label { font-size: 11px; font-weight: 700; color: #6b7a8f; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.pos-trend-up .pos-chip-value { color: #2d9c5c; }
.pos-trend-down .pos-chip-value { color: #dc3545; }
.pos-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.pos-table th { background: #172033; color: #fff; text-align: left; font-size: 12px; padding: 9px 10px; white-space: nowrap; }
.pos-table td { padding: 9px 10px; border-bottom: 1px solid #e8edf3; font-size: 13.5px; background: #fff; }
.pos-table tr:nth-child(even) td { background: #f6f8fb; }
.pos-rank { font-weight: 800; white-space: nowrap; }
.pos-top-1 td { background: #fff6d6 !important; }
.pos-top-2 td { background: #eef1f6 !important; }
.pos-top-3 td { background: #fbeee2 !important; }
.pos-footer-row td { background: #e2e8f4 !important; font-weight: 800; }
.pos-missing { color: #a0aab8; }
.pos-remark { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.pos-remark.pass { background: #e1f5ea; color: #1d7a45; }
.pos-remark.fail { background: #fde7e9; color: #b4232f; }
.prog-matches { display: grid; gap: 8px; margin-top: 8px; }
.prog-match {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
    width: 100%; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 14px; color: #172033;
}
.prog-match span { font-size: 12px; color: #6b7a8f; }
.prog-match.active { border-color: #2d6cdf; background: #eef3fd; }
.prog-chart { width: 100%; height: auto; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; }
.prog-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.prog-dot.pass { background: #2d9c5c; }
.prog-dot.fail { background: #dc3545; }
.prog-bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.prog-bar-label { flex: 0 0 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.prog-bar-track { flex: 1; height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.prog-bar-fill { height: 100%; background: #2d6cdf; border-radius: 999px; }
.prog-bar-value { flex: 0 0 46px; text-align: right; font-weight: 700; }


/* ===== Quiz header: student picture + circular timer ===== */
#studentQuizSection .quiz-header { align-items: center; }
.quiz-student { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 220px; }
.quiz-student-text { min-width: 0; }
.student-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #dfe8fb;
    border: 2.5px solid #C9A84C;
    display: flex;
    align-items: center;
    justify-content: center;
}
.student-avatar img { width: 100%; height: 100%; object-fit: cover; }
.student-avatar span { width: 100%; height: 100%; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; color: #2d6cdf; }

#studentQuizSection .quiz-stats {
    background: transparent;
    padding: 0;
    flex-direction: column;
    gap: 4px;
    border-radius: 0;
}
.quiz-timer {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(23, 32, 51, 0.12);
}
.quiz-timer svg { width: 100%; height: 100%; display: block; }
.quiz-timer .qt-track { fill: none; stroke: #e6ebf1; stroke-width: 9; }
.quiz-timer .qt-arc { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .9s linear, stroke .4s ease; }
.quiz-timer.ok .qt-arc { stroke: #2d9c5c; }
.quiz-timer.caution .qt-arc { stroke: #f0a500; }
.quiz-timer.danger .qt-arc { stroke: #dc3545; }
.quiz-timer #studentTimerDisplay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.3px;
    animation: none;
}
.quiz-timer #studentTimerDisplay.long { font-size: 15px; }
.quiz-timer.ok #studentTimerDisplay { color: #1d7a45; }
.quiz-timer.caution #studentTimerDisplay { color: #b87a00; }
.quiz-timer.danger #studentTimerDisplay { color: #c62d3a; }
.quiz-timer.pulse { animation: qtPulse 1s ease-in-out infinite; }
@keyframes qtPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5); }
    50% { box-shadow: 0 0 0 9px rgba(220, 53, 69, 0); }
}
@media (prefers-reduced-motion: reduce) { .quiz-timer.pulse { animation: none; } .quiz-timer .qt-arc { transition: none; } }
#studentProgress { font-size: 13px; font-weight: 700; color: #4a5a6e; }
#studentNoTimeLimit { font-size: 13px; font-weight: 700; color: #4a5a6e; }
@media (max-width: 600px) {
    #studentQuizSection .quiz-header { flex-direction: row; align-items: center; }
    #studentQuizSection .quiz-stats { width: auto; justify-content: center; }
}

/* number boxes now sit at the bottom of the assessment */
#studentQuestionBoxesContainer { margin: 20px 0 12px 0; }

/* ===== Roster pictures ===== */
.roster-photo-bulk { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.roster-photo-cell { position: relative; flex: 0 0 auto; }
.roster-photo-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px dashed #b8c4d6;
    background: #f4f7fb;
    color: #6b7a8f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}
.roster-photo-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roster-photo-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #dc3545;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}


/* ===== Charts ===== */
.cm-host { margin: 12px 0; }
.cm-chart { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.cm-chart-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.cm-chart-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #475569; flex: 1 1 170px; }
.cm-chart-controls .form-input { margin: 0; }
.cm-toggle { flex: 0 0 auto; padding: 9px 14px; font-size: 13px; }
.cm-canvas-wrap { position: relative; height: 270px; }
.qt-dialog { max-width: 640px; }
@media (max-width: 600px) { .cm-canvas-wrap { height: 240px; } }


/* ===== Refresh buttons ===== */
.cm-refresh-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0 0 10px; }
.cm-refresh-status { font-size: 12px; color: #6b7a8f; }
.cm-refresh-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid #cfe1ff; background: #eef3fd; color: #2d6cdf;
    font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.cm-refresh-btn:disabled { opacity: .6; cursor: wait; }


/* ===== Floating buttons: icons only ===== */
#needHelpBtn.help-float-btn {
    position: fixed !important; bottom: 16px !important; left: 16px !important; z-index: 500;
    width: 50px !important; height: 50px !important; padding: 0 !important; border-radius: 50% !important;
    background: #2d6cdf !important; color: #fff !important; border: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25); cursor: pointer; overflow: hidden;
}
#needHelpBtn.help-float-btn svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#whatsappFloatBtn.whatsapp-float-btn {
    width: 50px !important; height: 50px !important; min-width: 0 !important; padding: 0 !important; gap: 0 !important;
    border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
}
#whatsappFloatBtn.whatsapp-float-btn svg { width: 28px !important; height: 28px !important; margin: 0 !important; }
#whatsappFloatBtn.whatsapp-float-btn span { display: none !important; }

/* ===== Flag a question ===== */
.q-flag-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.q-flag-btn {
    display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #e2e8f0; background: #fff; color: #6b7a8f;
    font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; cursor: pointer;
}
.q-flag-btn.flagged { color: #dc3545; border-color: #f3b5ba; background: #fdecec; }
.flag-reason { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1.5px solid #e2e8f0; border-radius: 10px; margin-bottom: 6px; font-size: 14px; cursor: pointer; }
.flag-reason input { width: 18px; height: 18px; flex: 0 0 auto; }
.flag-box { background: #fff; border: 1.5px solid #f3d9a8; border-radius: 12px; padding: 12px; margin: 10px 0 14px; }
.flag-count { display: inline-block; min-width: 24px; text-align: center; padding: 2px 8px; border-radius: 999px; background: #fde7e9; color: #b4232f; font-weight: 800; }
.flag-note { font-size: 12px; color: #6b7a8f; font-style: italic; margin-bottom: 4px; }
.flag-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #fde7e9; color: #b4232f; font-size: 12px; font-weight: 800; }


/* ===== Keyboard hint (computers only) ===== */
.kb-hint { display: none; margin: 10px 0 0; font-size: 12px; color: #6b7a8f; text-align: center; }
@media (hover: hover) and (pointer: fine) { .kb-hint { display: block; } }


/* ===== Delivery A ===== */
.q-flag-row { gap: 8px; flex-wrap: wrap; }
.q-flag-btn.marked { color: #b87a00; border-color: #f0d28a; background: #fff6dd; }
[id^="student-qbox-"].review { position: relative; box-shadow: inset 0 0 0 2px #f0a500; }
[id^="student-qbox-"].review::after { content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #f0a500; }
.review-chip { display: inline-block; min-width: 40px; margin: 3px 4px 3px 0; padding: 7px 10px; border: 1.5px solid #cfe1ff; background: #eef3fd; color: #2d6cdf; border-radius: 10px; font-weight: 800; cursor: pointer; }
.explain { margin: 6px 0 0; padding: 8px 10px; background: #fff9e6; border-left: 4px solid #C9A84C; border-radius: 6px; font-size: 13.5px; color: #4a3d12; }


/* ===== Delivery B ===== */
.grade-chip { display: inline-block; min-width: 26px; text-align: center; padding: 2px 8px; border-radius: 8px; font-weight: 800; background: #e1f5ea; color: #1d7a45; }
.grade-chip.g-C, .grade-chip.g-D { background: #fff3cd; color: #8a6d00; }
.grade-chip.g-E, .grade-chip.g-F { background: #fde7e9; color: #b4232f; }
.wa-parent-btn { border: none; background: #25D366; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.quality-good { color: #1d7a45; font-weight: 700; }
.quality-warn { color: #8a6d00; font-weight: 700; }
.quality-bad { color: #b4232f; font-weight: 800; }


/* ===== Schools ===== */
.school-brand-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 14px; background: var(--cm-primary, #2d6cdf); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .3px; border-bottom: 4px solid var(--cm-accent, #C9A84C); }
.school-brand-bar img { height: 38px; max-width: 120px; object-fit: contain; background: rgba(255,255,255,0.92); border-radius: 8px; padding: 3px 6px; }
body.school-branded .primary-btn { background: var(--cm-primary, #2d6cdf) !important; border-color: var(--cm-primary, #2d6cdf) !important; }
body.school-branded .student-avatar { border-color: var(--cm-accent, #C9A84C); }
body.school-branded .live-msg-card { border-left-color: var(--cm-accent, #C9A84C); }
body.school-branded .dash-nav-item.active { background: var(--cm-primary, #2d6cdf) !important; color: #fff !important; }


/* ===== Compact header: [logo] | [tagline] ===== */
#mainHeader { display: flex !important; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 14px !important; text-align: left !important; flex-wrap: wrap; }
#mainHeader .logo { margin: 0 !important; }
#mainHeader .logo-image { height: 34px !important; width: auto !important; max-width: none !important; }
#mainHeader .header-divider { width: 2px; height: 26px; background: #d5dce6; border-radius: 2px; flex: 0 0 auto; }
#mainHeader .tagline { margin: 0 !important; font-size: 12px !important; letter-spacing: .3px !important; color: #6b7a8f !important; text-align: left !important; line-height: 1.3; }
#mainHeader .school-header-logo { height: 34px; width: auto; max-width: 110px; object-fit: contain; }

/* School links: CleverMent branding is replaced by the school's */
body.school-branded #mainHeader .logo,
body.school-branded #mainHeader .header-divider,
body.school-branded #mainHeader .tagline,
body.school-branded .dash-logo-image,
body.school-branded .dash-tagline { display: none !important; }
body.school-branded #mainHeader .school-header-logo { display: block !important; }
body.school-link #landingAdminBtn { display: none !important; }


/* ===== Student accounts ===== */
.sl-suggest { display: grid; gap: 6px; margin-top: 6px; }
.sl-suggest button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; font-size: 15px; cursor: pointer; }
.sl-suggest button span { color: #6b7a8f; font-size: 13px; }
.sa-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sa-profile { display: flex; align-items: center; gap: 12px; }
.sa-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #dfe8fb; border: 2.5px solid #C9A84C; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #2d6cdf; font-size: 20px; flex: 0 0 auto; }
.sa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sa-name { font-size: 19px; font-weight: 800; color: #172033; }
.sa-panel { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.sa-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1.5px solid #e2e8f0; border-radius: 12px; margin-bottom: 8px; }
.sa-badge { font-size: 12px; font-weight: 700; color: #6b7a8f; background: #f1f4f8; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.student-login-landing-btn { font-weight: 700; box-shadow: 0 3px 10px rgba(23,32,51,.12); }
.roster-custom-class-entry { display:flex; align-items:stretch; gap:8px; }
.roster-custom-class-entry .form-input { flex:1; min-width:0; }
.roster-custom-class-entry button { display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
#studentAreaPage { max-width:none !important; min-height:calc(100vh - 24px); box-sizing:border-box; padding:20px 20px 24px 204px !important; }
#studentAreaPage .sa-top { padding:4px 0 16px; border-bottom:1px solid #e2e8f0; }
#studentAreaPage .sa-panel { max-width:1100px; box-shadow:0 3px 14px rgba(23,32,51,.04); }
.sa-nav { position:fixed; left:0; top:0; bottom:0; width:176px; display:flex; flex-direction:column; justify-content:flex-start; gap:6px; background:#172033; z-index:400; padding:24px 10px; box-sizing:border-box; }
.sa-nav button { width:100%; flex:0 0 auto; border:0; border-radius:9px; background:transparent; color:#cbd5e1; text-align:left; padding:13px 14px; font-weight:700; font-size:14px; cursor:pointer; }
.sa-nav button.active { color:#fff; background:#26354f; box-shadow:inset 3px 0 0 #C9A84C; }
@media (max-width: 640px) {
  #studentAreaPage { padding:14px 12px 20px 150px !important; }
  .sa-nav { width:132px; padding:18px 7px; }
  .sa-nav button { padding:12px 9px; font-size:13px; }
  .sa-card { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 380px) {
  #studentAreaPage { padding-left:124px !important; }
  .sa-nav { width:110px; }
  .sa-nav button { font-size:12px; }
}

/* Student access and login refinements */
.student-access-code-btn { max-width:360px; display:block; margin:0 auto; padding:11px 16px; font-size:15px; }
#studentAccess h2 { font-size:22px; }
#studentAccess > p { font-size:14px; }
#studentAccess .form-group label { font-size:14px; }
#studentAccess .form-input { font-size:15px; }
.student-login-alternative { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:20px auto 0; padding:14px; max-width:440px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; color:#64748b; font-size:13px; }
.student-login-access-btn { display:inline-flex; align-items:center; gap:8px; background:#172033!important; color:#fff!important; border:1px solid #C9A84C!important; padding:9px 14px!important; font-size:14px!important; }
.student-login-access-btn svg,.sa-nav svg,.sa-collapse svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.student-login-page { min-height:calc(100vh - 120px); max-width:100%!important; padding:28px 16px 24px!important; margin:0!important; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; }
.student-login-page > * { width:min(100%,420px); box-sizing:border-box; }
.student-login-page > button:first-child { width:auto; align-self:center; margin:0 0 22px; }
.student-login-page h2 { text-align:center; font-size:28px; margin:0 0 8px!important; }
.student-login-page > .helper-text { text-align:center; margin:0 auto 22px; max-width:360px; }
.student-login-page label { display:block; margin:12px 0 6px; }
.student-login-page .form-input { width:100%; }
.student-login-page > button.primary-btn { width:100%; }
.student-login-page #slStatus { text-align:center; }
.student-login-footnote { margin-top:auto; padding-top:36px; text-align:center; color:#718096; font-size:12px; }
#studentAreaPage { max-width:none!important; min-height:100vh; padding:22px 28px 32px 250px!important; background:#f4f6fb; }
#studentAreaPage .sa-nav { position:fixed; left:0; top:0; bottom:0; width:224px; display:flex; flex-direction:column; gap:7px; background:#172033; z-index:400; padding:20px 12px; box-sizing:border-box; border-right:1px solid rgba(201,168,76,.35); transition:width .2s ease; }
#studentAreaPage .sa-brand { display:flex; align-items:center; gap:9px; padding:0 8px 22px; color:#fff; font-weight:800; font-size:17px; border-bottom:1px solid #334155; margin-bottom:12px; min-height:44px; }
#studentAreaPage .sa-brand img { width:34px;height:34px;object-fit:contain;background:#fff;border-radius:7px;padding:2px; }
#studentAreaPage .sa-collapse { margin-left:auto; padding:6px!important; width:auto!important; }
#studentAreaPage .sa-nav button { width:100%; display:flex; align-items:center; gap:12px; flex:0 0 auto; border:0; border-radius:9px; background:transparent; color:#cbd5e1; text-align:left; padding:13px 12px; font-weight:700; font-size:13px; cursor:pointer; }
#studentAreaPage .sa-nav button.active { color:#fff; background:#26354f; box-shadow:inset 3px 0 0 #C9A84C; }
#studentAreaPage .sa-nav button:hover { background:#26354f; color:#fff; }
#studentAreaPage .sa-nav-spacer { flex:1; }
#studentAreaPage .sa-top { background:#fff; padding:16px 18px; border:1px solid #e2e8f0; border-radius:14px; margin-bottom:18px; }
#studentAreaPage .sa-panel { max-width:1200px; padding:22px; box-shadow:0 3px 14px rgba(23,32,51,.04); }
#studentAreaPage.sa-sidebar-collapsed { padding-left:94px!important; }
#studentAreaPage.sa-sidebar-collapsed .sa-nav { width:76px; }
#studentAreaPage.sa-sidebar-collapsed .sa-brand span,#studentAreaPage.sa-sidebar-collapsed .sa-nav button span { display:none; }
#studentAreaPage.sa-sidebar-collapsed .sa-brand { padding-left:8px; padding-right:0; }
#studentAreaPage.sa-sidebar-collapsed .sa-collapse { margin-left:0; }
#studentAreaPage.sa-sidebar-collapsed .sa-nav button { justify-content:center; padding:13px 8px; }
#studentAreaPage .sa-mobile-logout { display:none; }
@media(max-width:640px) {
 #studentAreaPage { padding:14px 12px 24px 160px!important; }
 #studentAreaPage .sa-nav { width:146px; padding:14px 7px; }
 #studentAreaPage .sa-brand { gap:6px; font-size:13px; padding:0 3px 16px; }
 #studentAreaPage .sa-brand img { width:27px;height:27px; }
 #studentAreaPage .sa-collapse { display:none!important; }
 #studentAreaPage .sa-nav button { gap:7px; padding:12px 7px; font-size:11px; }
 #studentAreaPage .sa-nav button svg { width:17px;height:17px; }
 #studentAreaPage .sa-panel { padding:14px; }
 #studentAreaPage .sa-card { align-items:flex-start; flex-direction:column; }
 #studentAreaPage.sa-sidebar-collapsed { padding-left:76px!important; }
 #studentAreaPage.sa-sidebar-collapsed .sa-nav { width:64px; }
 #studentAreaPage.sa-sidebar-collapsed .sa-nav button span { display:none; }
 #studentAreaPage.sa-sidebar-collapsed .sa-nav button { justify-content:center; }
}
.sa-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.sa-summary-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px; border:1px solid #e2e8f0; border-radius:12px; background:linear-gradient(145deg,#fff,#f8faff); }
.sa-summary-card > span { color:#64748b; font-size:13px; font-weight:700; }
.sa-summary-card > strong { color:#172033; font-size:32px; line-height:1.1; }
.sa-summary-card .helper-text { margin:0; }
.sa-quick-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ============================================================
   Unified off-canvas navigation: Teacher, Admin and Student
   Sidebars are fully hidden until the top-left hamburger is tapped.
   ============================================================ */
.dashboard-menu-top.sidebar-toggle,
.student-menu-open {
    display: inline-flex;
    position: fixed;
    left: 16px;
    top: 14px;
    z-index: 1500;
    width: 46px;
    height: 46px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: #172033;
    color: #fff;
    box-shadow: 0 4px 14px rgba(23,32,51,.18);
    cursor: pointer;
}
.dashboard-menu-top svg,
.student-menu-open svg { width: 24px; height: 24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.dashboard-menu-top { font-size:0; margin:0; }
.dash-layout { display:block !important; }
.dash-layout .dash-main { width:100%; min-width:0; }
.dash-layout .dash-sidebar {
    position:fixed !important; top:0 !important; bottom:0 !important; left:0 !important;
    width:min(290px, 88vw) !important; max-height:none !important; height:100dvh;
    border-radius:0 16px 16px 0 !important; z-index:1600 !important;
    overflow-y:auto; transform:translateX(-110%) !important;
    transition:transform .24s ease !important;
    box-shadow:0 14px 48px rgba(0,0,0,.28);
    padding:22px 14px !important; box-sizing:border-box;
}
.dash-layout.sidebar-open .dash-sidebar { transform:translateX(0) !important; }
.dash-layout .sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(10,16,28,.56); z-index:1550; }
.dash-layout.sidebar-open .sidebar-backdrop { display:block !important; }
.dash-layout.sidebar-collapsed .dash-sidebar { width:min(290px, 88vw) !important; flex-basis:auto !important; }
.dash-layout.sidebar-collapsed .dash-branding { padding:4px 4px 14px !important; margin-bottom:8px !important; }
.dash-layout.sidebar-collapsed .dash-logo-image { max-width:100% !important; max-height:72px !important; }
.dash-layout.sidebar-collapsed .dash-tagline { opacity:1 !important; max-height:none !important; }
.dash-layout.sidebar-collapsed .dash-nav-item { justify-content:flex-start !important; gap:10px !important; padding:10px 12px !important; }
.dash-layout.sidebar-collapsed .dash-nav-item span { display:block !important; position:static !important; width:auto !important; height:auto !important; clip:auto !important; overflow:visible !important; }
.dash-layout .sidebar-collapse-toggle { display:none !important; }
.sidebar-close-btn {
    display:flex; align-items:center; justify-content:center; position:sticky; top:0; margin-left:auto; margin-bottom:8px;
    width:38px; height:38px; border:1px solid #d7deea; border-radius:10px; background:#fff;
    color:#172033; font-size:28px; line-height:1; cursor:pointer; z-index:3;
}
#teacherDashboard, #adminDashboard { padding-top:0; }
#studentAreaPage {
    width:100% !important; max-width:none !important; min-height:0; margin:0 !important;
    padding:6px 0 28px !important; box-sizing:border-box; position:relative; left:0 !important; right:auto !important;
    background:#f4f6fb;
}
#studentAreaPage .sa-nav {
    position:fixed !important; top:0 !important; bottom:0 !important; left:0 !important;
    width:min(290px, 88vw) !important; height:100dvh; padding:20px 14px !important;
    border-radius:0 16px 16px 0; transform:translateX(-110%); transition:transform .24s ease;
    z-index:1600 !important; box-shadow:0 14px 48px rgba(0,0,0,.28); box-sizing:border-box;
}
#studentAreaPage.sa-sidebar-open .sa-nav { transform:translateX(0); }
#studentAreaPage .sa-brand { padding-bottom:18px; }
#studentAreaPage .sa-menu-close {
    display:flex; align-items:center; justify-content:center; margin-left:auto; padding:0 !important;
    width:38px !important; height:38px; border:1px solid #475569 !important; border-radius:10px;
    background:#26354f !important; color:#fff !important; font-size:28px; line-height:1; cursor:pointer;
}
#studentAreaPage.sa-sidebar-open::before { content:""; position:fixed; inset:0; z-index:1500; background:rgba(10,16,28,.56); }
#studentAreaPage .sa-nav { z-index:1601 !important; }
#studentAreaPage .sa-panel { width:100%; max-width:none; box-sizing:border-box; }
#studentAreaPage .sa-top { width:100%; box-sizing:border-box; }
#studentAreaPage .sa-mobile-logout { display:inline-flex; }
.student-login-page { min-height:calc(100dvh - 20px) !important; padding:36px 16px 74px !important; justify-content:center; }
.student-login-footnote {
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important;
    margin:0 !important; padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    box-sizing:border-box; text-align:center !important; color:#718096; font-size:12px; line-height:1.5;
    background:rgba(244,246,251,.97); border-top:1px solid #e2e8f0; z-index:20;
}
@media (max-width:900px) {
    #teacherDashboard, #adminDashboard { padding:0 0 20px !important; }
    #studentAreaPage { padding:6px 0 24px !important; }
    #studentAreaPage .sa-nav { width:min(290px, 88vw) !important; }
    #studentAreaPage.sa-sidebar-collapsed { padding-left:14px !important; }
    #studentAreaPage.sa-sidebar-collapsed .sa-nav { width:min(290px, 88vw) !important; }
    #studentAreaPage.sa-sidebar-collapsed .sa-brand span,
    #studentAreaPage.sa-sidebar-collapsed .sa-nav button span { display:inline !important; }
    #studentAreaPage.sa-sidebar-collapsed .sa-nav button { justify-content:flex-start !important; }
    .student-login-page { padding-left:18px !important; padding-right:18px !important; }
}


/* ============================================================
   LAYOUT FIX: logo top-left ABOVE the menu button, footer at the foot,
   student pages left-aligned (student pages now sit inside .container)
   ============================================================ */
.container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
}
.container > div { width: 100%; }
.container > .cm-flex-spacer { flex: 1 0 0; width: auto; min-height: 0; }
.container > #mainFooter { flex: 0 0 auto; }

/* The menu button is no longer fixed over the logo: it sits right under it in the page flow,
   and stays at the top of the screen (sticky) while the page scrolls. */
.dashboard-menu-top.sidebar-toggle,
.student-menu-open {
    position: sticky;
    left: auto;
    top: 10px;
    margin: 0 0 12px 0;
    vertical-align: top;
    align-self: flex-start;
    flex: 0 0 auto;
}
.dashboard-menu-top.sidebar-toggle { display: flex; }

/* Student login page: sits under the logo, no second footer */
#studentLoginPage[style*="display: block"] { display: flex !important; }
.container > .student-login-page { min-height: 0 !important; padding: 18px 16px 24px !important; }
.student-login-footnote { display: none !important; }

/* Student dashboard pages are aligned to the left edge, like the logo */
#studentAreaPage { text-align: left; }
#studentAreaPage .sa-panel, #studentAreaPage .sa-top { margin-left: 0; margin-right: auto; }

/* ===== History: open one finished assessment ===== */
.sa-card.sa-card-click { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.sa-card.sa-card-click:hover { border-color: #2d6cdf; box-shadow: 0 3px 12px rgba(45,108,223,.12); }
.sa-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-review-title { color: #1a1a2e; font-size: 22px; font-weight: 600; margin: 14px 0 12px; text-align: left; }
#saReviewScore {
    font-size: 34px; font-weight: 700; text-align: left; color: #2d9c5c; padding: 24px; background: white;
    border-radius: 12px; margin-bottom: 20px; border: 1.5px solid #eef2f6;
}
#saReviewScore .grade { display: block; font-size: 18px; font-weight: 500; color: #4a5a6e; margin-top: 4px; }
#saReviewScore .result-details { display: block; font-size: 16px; font-weight: 400; color: #6b7a8f; margin-top: 4px; }
#saReviewCorrections h3 { color: #1a1a2e; margin-bottom: 16px; font-size: 18px; font-weight: 600; }
#saReviewCorrections .correction-item {
    background: white; padding: 18px 22px; margin: 10px 0; border-radius: 10px;
    border: 1.5px solid #eef2f6; border-left: 4px solid #2d6cdf;
}
#saReviewCorrections .correction-item p { margin: 4px 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 768px) {
    #saReviewScore { font-size: 28px; padding: 18px; }
    #saReviewCorrections .correction-item { padding: 14px 16px; }
}

#mainHeader { padding-left: 0 !important; }
@media (max-width: 768px) { .container > #mainFooter { padding-bottom: 84px; } }

/* ===== Messages, progress, study, profile ===== */
.cm-bubbles { display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; padding:6px 2px; margin-bottom:10px; }
.cm-bubble { max-width:85%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.cm-bubble small { display:block; opacity:.65; font-size:11px; margin-top:3px; }
.cm-bubble.them { align-self:flex-start; background:#fff; border:1.5px solid #e3e9f2; }
.cm-bubble.me { align-self:flex-end; background:#2d6cdf; color:#fff; }
.cm-compose { width:100%; box-sizing:border-box; min-height:70px; padding:10px; border:1.5px solid #dbe3ee; border-radius:10px; font:inherit; resize:vertical; }
.cm-dot { display:inline-block; min-width:18px; padding:0 5px; margin-left:6px; border-radius:10px; background:#dc3545; color:#fff; font-size:11px; font-weight:700; text-align:center; line-height:18px; }
.cm-stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:10px 0 16px; }
.cm-stat { background:#fff; border:1.5px solid #eef2f6; border-radius:12px; padding:12px; }
.cm-stat span { display:block; font-size:12px; color:#6b7a8f; }
.cm-stat strong { font-size:24px; }
.cm-bar { height:10px; background:#e8edf5; border-radius:6px; overflow:hidden; } .cm-bar i { display:block; height:100%; background:#2d6cdf; }
.cm-tip { background:#fff; border:1.5px solid #eef2f6; border-left:4px solid #C9A84C; border-radius:10px; padding:10px 14px; margin:8px 0; font-size:14px; }
.cm-flash { background:#fff; border:1.5px solid #dbe3ee; border-radius:14px; padding:18px; margin:12px 0; }
.cm-trow { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid #eef2f6; font-size:14px; }

/* ===== beeping new-message bar ===== */
.cm-msgbar { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; padding:12px 16px; margin:0 0 12px; border-radius:12px; background:#dc3545; color:#fff; font-weight:700; font-size:15px; cursor:pointer; animation:cmBeep 1.1s ease-in-out infinite; }
@keyframes cmBeep { 0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(220,53,69,.55); } 50% { opacity:.78; transform:scale(1.015); box-shadow:0 0 0 8px rgba(220,53,69,0); } }
@media (prefers-reduced-motion: reduce) { .cm-msgbar { animation:none; } }

/* ===== time limit rollers ===== */
.cm-tp { position:relative; max-width:280px; }
.cm-tp-none { display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:8px; cursor:pointer; }
.cm-tp-rollers { position:relative; display:flex; gap:10px; justify-content:center; background:#0b0b0d; border-radius:14px; padding:6px 10px; }
.cm-tp-col { position:relative; flex:1; display:flex; justify-content:center; }
.cm-roll { height:132px; overflow-y:scroll; scroll-snap-type:y mandatory; padding:44px 0; box-sizing:border-box; width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cm-roll::-webkit-scrollbar { display:none; }
.cm-roll-item { height:44px; line-height:44px; text-align:center; font-size:26px; color:#555; scroll-snap-align:center; user-select:none; }
.cm-roll-item.on { color:#eee; font-size:34px; }
.cm-tp-unit { position:absolute; right:14%; top:50%; transform:translateY(-35%); color:#eee; font-size:15px; font-weight:700; pointer-events:none; }
.cm-tp.off .cm-tp-rollers { opacity:.35; pointer-events:none; }

.cm-announce { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; margin:0 0 10px; border-radius:12px; background:#eaf2ff; border:1.5px solid #bcd3fb; color:#1c3d7a; font-size:14px; }
.cm-announce button { margin-left:auto; border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer; color:#1c3d7a; }

.cm-lesson { background:#fff; border:1.5px solid #eef2f6; border-radius:12px; padding:14px 16px; margin:12px 0; line-height:1.6; font-size:15px; }
.cm-lesson h3 { margin:14px 0 6px; color:#1a1a2e; font-size:17px; }
.cm-lesson svg { display:block; margin:8px 0; }
.learn-opt { cursor:pointer; }

/* ===== My Learning Space: search, scrolling lists, assessment-style practice ===== */
.learn-search { width:100%; box-sizing:border-box; margin:8px 0 10px; }
.learn-scroll { max-height:62vh; overflow-y:auto; padding-right:6px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.learn-scroll::-webkit-scrollbar { width:8px; } .learn-scroll::-webkit-scrollbar-thumb { background:#b9c4d6; border-radius:6px; }
.learn-strand { margin:14px 0 6px; color:#2d6cdf; font-size:16px; }
.learn-top { display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:#4a5a6e; margin-bottom:6px; }
.learn-bar { height:8px; background:#e8edf5; border-radius:6px; overflow:hidden; margin-bottom:12px; } .learn-bar i { display:block; height:100%; background:#2d6cdf; transition:width .3s; }
#learnQuestionBox { background:#f8fafc; padding:22px 20px; border-radius:16px; margin:8px 0 12px; border:1.5px solid #eef2f6; }
#learnQuestionText { font-size:19px; font-weight:600; margin-bottom:18px; color:#1a1a2e; line-height:1.6; }
#learnQuestionText svg { display:block; margin:0 auto 10px; max-width:100%; height:auto; }
#learnOptions .option { display:block; padding:14px 20px; margin:8px 0; background:white; border:1.5px solid #dce1e8; border-radius:10px; cursor:pointer; transition:all .2s ease; font-size:16px; font-weight:500; color:#1a1a2e; }
#learnOptions .option:hover { border-color:#2d6cdf; background:#f0f6ff; }
#learnOptions .option.correct { background:#e6f7ec; border-color:#2d9c5c; }
#learnOptions .option.wrong { background:#fdecec; border-color:#dc3545; }
.learn-verdict { font-weight:700; margin:12px 0 6px; }