/* ============================================================
   Brandlevate CBT System – Front-end Styles
   Author: Brandlevate Technologies  |  v2.5.0
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    /* Core identity: deep navy (authority/trust) + royal blue + a warm
       academic gold for achievement/opportunity + teal as a second accent.
       Chosen for a school exam portal rather than a generic SaaS blue. */
    --blv-ink:            #16213E;
    --blv-ink-soft:       #253458;
    --blv-primary:        #2A4494;
    --blv-primary-dark:   #1B2F66;
    --blv-primary-light:  #EAEFFD;
    --blv-gold:           #F0A202;
    --blv-gold-light:     #FDF1DA;
    --blv-teal:           #0E8388;
    --blv-teal-light:     #E4F4F3;
    --blv-success:        #1E8E5A;
    --blv-success-light:  #E9F7EF;
    --blv-danger:         #D8483A;
    --blv-danger-light:   #FCEEEC;
    --blv-warning:        #C97A0A;
    --blv-warning-light:  #FDF1DE;
    --blv-secondary:      #5B6478;
    --blv-gray-50:        #F7F6F2;
    --blv-gray-100:       #F0EFEA;
    --blv-gray-200:       #E4E2DB;
    --blv-gray-300:       #D2CFC5;
    --blv-gray-400:       #9C9A90;
    --blv-gray-600:       #555450;
    --blv-gray-700:       #3A3934;
    --blv-gray-800:       #1F2430;
    --blv-white:          #ffffff;
    --blv-radius:         8px;
    --blv-radius-lg:      14px;
    --blv-shadow:         0 1px 3px rgba(22,33,62,.10), 0 1px 2px rgba(22,33,62,.08);
    --blv-shadow-lg:      0 14px 32px rgba(22,33,62,.14);
    --blv-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --blv-font-display:   'Fraunces', Georgia, 'Times New Roman', serif;
    --blv-transition:     all .2s ease;
}

/* ── Reset / Base ──────────────────────────────────────────── */
.blv-cbt-wrap *, .blv-cbt-wrap *::before, .blv-cbt-wrap *::after,
.blv-modal *, .blv-exam-container *, .blv-exam-container *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.blv-cbt-wrap, .blv-exam-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--blv-font);
    color: #1F2430;
    color: var(--blv-gray-800);
    line-height: 1.6;
}

/* The portal's own canvas — a warm paper tone rather than stark white,
   with a quiet navy wash behind the header so the page reads as a distinct
   "portal" rather than plain content sitting on the theme's white page. */
.blv-cbt-wrap {
    background:
        radial-gradient(1100px 420px at 15% 0%, rgba(42,68,148,.07), transparent 60%),
        #F7F6F2;
    background:
        radial-gradient(1100px 420px at 15% 0%, rgba(42,68,148,.07), transparent 60%),
        var(--blv-gray-50);
}

/* ── Login Card ────────────────────────────────────────────── */
.blv-login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 20px;
    background:
        radial-gradient(900px 400px at 50% -10%, rgba(240,162,2,.10), transparent 60%),
        linear-gradient(160deg, #16213E 0%, #2A4494 62%, #1B2F66 100%);
    background:
        radial-gradient(900px 400px at 50% -10%, rgba(240,162,2,.10), transparent 60%),
        linear-gradient(160deg, var(--blv-ink) 0%, var(--blv-primary) 62%, var(--blv-primary-dark) 100%);
}

.blv-login-card {
    position: relative;
    background: #ffffff;
    background: var(--blv-white);
    border-radius: 14px;
    border-radius: var(--blv-radius-lg);
    box-shadow: 0 14px 32px rgba(22,33,62,.14);
    box-shadow: var(--blv-shadow-lg);
    padding: 44px 36px 36px;
    width: 100%;
    max-width: 420px;
    border-top: 5px solid #F0A202;
    border-top: 5px solid var(--blv-gold);
}

.blv-login-header {
    text-align: center;
    margin-bottom: 28px;
}

.blv-school-logo {
    max-height: 72px;
    object-fit: contain;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.blv-login-header h2 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-family: var(--blv-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: #16213E;
    color: var(--blv-ink);
    margin-bottom: 4px;
}

.blv-subtitle {
    font-size: .875rem;
    color: #5B6478;
    color: var(--blv-secondary);
}

.blv-login-hint {
    text-align: center;
    font-size: .8rem;
    color: #9C9A90;
    color: var(--blv-gray-400);
    margin-top: 16px;
}

/* ── Forms ─────────────────────────────────────────────────── */
.blv-form-group {
    margin-bottom: 16px;
    flex: 1;
}

.blv-form-group label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #3A3934;
    color: var(--blv-gray-700);
    margin-bottom: 6px;
}

.blv-form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.blv-form-row .blv-form-group { flex: 1; min-width: 140px; }

.blv-input, .blv-select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #D2CFC5;
    border: 1.5px solid var(--blv-gray-300);
    border-radius: 8px;
    border-radius: var(--blv-radius);
    font-size: .9rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--blv-font);
    color: #1F2430;
    color: var(--blv-gray-800);
    background: #ffffff;
    background: var(--blv-white);
    transition: all .2s ease;
    transition: var(--blv-transition);
    outline: none;
}

.blv-input:focus, .blv-select:focus {
    border-color: #2A4494;
    border-color: var(--blv-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.blv-input-wrap {
    position: relative;
}

.blv-input-wrap .blv-input { padding-right: 40px; }

.blv-toggle-pw {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9C9A90;
    color: var(--blv-gray-400);
    padding: 4px;
    display: flex;
    align-items: center;
}

.blv-hint { font-size: .78rem; color: #9C9A90; color: var(--blv-gray-400); margin-top: 4px; }

.blv-portal-badge, .blv-portal-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #E4F4F3;
    background: var(--blv-teal-light);
    color: #0E8388;
    color: var(--blv-teal);
    font-weight: 700;
    font-size: .78rem;
    padding: 3px 12px;
    border-radius: 999px;
}
.blv-portal-badge-sm { font-size: .7rem; padding: 2px 9px; }
.blv-top-bar .blv-portal-badge-sm,
.blv-dash-header .blv-portal-badge-sm {
    background: rgba(255,255,255,.14);
    color: #ffffff;
    color: var(--blv-white);
}

/* ── Buttons ───────────────────────────────────────────────── */
.blv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    border-radius: var(--blv-radius);
    font-size: .875rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--blv-font);
    cursor: pointer;
    transition: all .2s ease;
    transition: var(--blv-transition);
    text-decoration: none;
    white-space: nowrap;
}

.blv-btn:disabled { opacity: .5; cursor: not-allowed; }

.blv-btn-primary  { background: #2A4494; background: var(--blv-primary); color: #ffffff; color: var(--blv-white); border-color: #2A4494; border-color: var(--blv-primary); box-shadow: 0 2px 8px rgba(42,68,148,.22); }
.blv-btn-primary:hover { background: #1B2F66; background: var(--blv-primary-dark); border-color: #1B2F66; border-color: var(--blv-primary-dark); color: #ffffff; color: var(--blv-white); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(42,68,148,.28); }

.blv-btn-secondary { background: #ffffff; background: var(--blv-white); color: #16213E; color: var(--blv-ink); border-color: #D2CFC5; border-color: var(--blv-gray-300); }
.blv-btn-secondary:hover { background: #F7F6F2; background: var(--blv-gray-50); border-color: #9C9A90; border-color: var(--blv-gray-400); }
/* On the dark navy top bar (student/staff header), the logout button reads
   as a quiet ghost button rather than a mismatched white block. */
.blv-top-bar .blv-btn-secondary,
.blv-dash-header .blv-btn-secondary {
    background: rgba(255,255,255,.08);
    color: #ffffff;
    color: var(--blv-white);
    border-color: rgba(255,255,255,.35);
}
.blv-top-bar .blv-btn-secondary:hover,
.blv-dash-header .blv-btn-secondary:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.55);
}

.blv-btn-outline  { background: transparent; color: #2A4494; color: var(--blv-primary); border-color: #2A4494; border-color: var(--blv-primary); }
.blv-btn-outline:hover { background: #EAEFFD; background: var(--blv-primary-light); }

.blv-btn-danger   { background: #D8483A; background: var(--blv-danger); color: #ffffff; color: var(--blv-white); border-color: #D8483A; border-color: var(--blv-danger); }
.blv-btn-danger:hover { background: #B93A2E; border-color: #B93A2E; color: #ffffff; color: var(--blv-white); }

.blv-btn-block { width: 100%; }
.blv-btn-sm    { padding: 7px 14px; font-size: .8rem; }
.blv-btn-xs    { padding: 4px 10px; font-size: .75rem; }
.blv-btn-lg    { padding: 14px 28px; font-size: 1rem; }

/* ── Spinner ───────────────────────────────────────────────── */
.blv-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: blv-spin .6s linear infinite;
    display: inline-block;
}

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

/* ── Alert ─────────────────────────────────────────────────── */
.blv-alert {
    padding: 12px 16px;
    border-radius: 8px;
    border-radius: var(--blv-radius);
    font-size: .875rem;
    margin-bottom: 16px;
    border-left: 4px solid;
}
.blv-alert-success { background: #E9F7EF; background: var(--blv-success-light); border-color: #1E8E5A; border-color: var(--blv-success); color: #1E8E5A; color: var(--blv-success); }
.blv-alert-error   { background: #FCEEEC; background: var(--blv-danger-light);  border-color: #D8483A;  border-color: var(--blv-danger);  color: #D8483A;  color: var(--blv-danger);  }
.blv-alert-warning { background: #FDF1DE; background: var(--blv-warning-light); border-color: #C97A0A; border-color: var(--blv-warning); color: #C97A0A; color: var(--blv-warning); }

/* ── Badges ────────────────────────────────────────────────── */
.blv-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.blv-badge-success   { background: #E9F7EF; background: var(--blv-success-light); color: #1E8E5A; color: var(--blv-success); }
.blv-badge-danger    { background: #FCEEEC; background: var(--blv-danger-light);  color: #D8483A;  color: var(--blv-danger); }
.blv-badge-warning   { background: #FDF1DE; background: var(--blv-warning-light); color: #C97A0A; color: var(--blv-warning); }
.blv-badge-secondary { background: #F0EFEA; background: var(--blv-gray-100);      color: #5B6478;      color: var(--blv-secondary); }

/* ── Dashboard Header ──────────────────────────────────────── */
.blv-dash-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: linear-gradient(120deg, #16213E 0%, #2A4494 100%);
    background: linear-gradient(120deg, var(--blv-ink) 0%, var(--blv-primary) 100%);
    border-bottom: 3px solid #F0A202;
    border-bottom: 3px solid var(--blv-gold);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 14px 32px rgba(22,33,62,.14);
    box-shadow: var(--blv-shadow-lg);
}

.blv-top-logo { max-height: 40px; object-fit: contain; }

.blv-student-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blv-student-name { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-family: var(--blv-font-display); font-weight: 600; font-size: 1.1rem; color: #ffffff; color: var(--blv-white); }
.blv-student-meta { font-size: .78rem; color: rgba(255,255,255,.72); }

.blv-dash-header .blv-btn-outline,
.blv-top-bar .blv-btn-outline {
    background: rgba(255,255,255,.08);
    color: #ffffff;
    color: var(--blv-white);
    border-color: rgba(255,255,255,.4);
}
.blv-dash-header .blv-btn-outline:hover,
.blv-top-bar .blv-btn-outline:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.6);
}

/* ── Dash Body / Tabs ──────────────────────────────────────── */
.blv-dash-body { padding: 24px 20px; max-width: 1180px; margin: 0 auto; }

.blv-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 2px solid #E4E2DB; border-bottom: 2px solid var(--blv-gray-200); }

.blv-tab-btn {
    background: none;
    border: none;
    padding: 11px 20px;
    font-size: .875rem;
    font-weight: 600;
    color: #5B6478;
    color: var(--blv-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 8px 8px 0 0;
    transition: all .2s ease;
    transition: var(--blv-transition);
}

.blv-tab-btn:hover { background: #F0EFEA; background: var(--blv-gray-100); color: #16213E; color: var(--blv-ink); }
.blv-tab-btn.active { color: #16213E; color: var(--blv-ink); background: #FDF1DA; background: var(--blv-gold-light); border-bottom-color: #F0A202; border-bottom-color: var(--blv-gold); }
.blv-tab-pane { display: none; }
.blv-tab-pane.active { display: block; }

/* ── Quick-stat tiles (dashboard summary strip) ──────────────
   Each tile carries a distinct accent colour tied to its meaning (identity /
   level / class / opportunity / history) rather than one repeated blue, set
   via the --tile-accent custom property from PHP. */
.blv-stat-tile {
    background: #ffffff;
    background: var(--blv-white);
    border: 1px solid #E4E2DB;
    border: 1px solid var(--blv-gray-200);
    border-left: 4px solid #2A4494;
    border-left: 4px solid var(--tile-accent, var(--blv-primary));
    border-radius: 10px;
    padding: 14px 18px;
    flex: 1;
    min-width: 140px;
    box-shadow: 0 1px 3px rgba(22,33,62,.10), 0 1px 2px rgba(22,33,62,.08);
    box-shadow: var(--blv-shadow);
}
.blv-stat-tile .blv-stat-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #5B6478;
    color: var(--tile-accent, var(--blv-secondary));
    margin-bottom: 4px;
}
.blv-stat-tile .blv-stat-value {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-family: var(--blv-font-display);
    font-weight: 600;
    font-size: 1.35rem;
    color: #16213E;
    color: var(--blv-ink);
}
.blv-stat-tile .blv-stat-value.mono {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 1rem;
    word-break: break-all;
}

/* ── Exam Grid ─────────────────────────────────────────────── */
.blv-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.blv-exam-card {
    background: #ffffff;
    background: var(--blv-white);
    border: 1.5px solid #E4E2DB;
    border: 1.5px solid var(--blv-gray-200);
    border-top: 4px solid #E4E2DB;
    border-top: 4px solid var(--blv-gray-200);
    border-radius: 14px;
    border-radius: var(--blv-radius-lg);
    padding: 20px;
    transition: all .2s ease;
    transition: var(--blv-transition);
    box-shadow: 0 1px 3px rgba(22,33,62,.10), 0 1px 2px rgba(22,33,62,.08);
    box-shadow: var(--blv-shadow);
}

.blv-exam-card.available { border-top-color: #F0A202; border-top-color: var(--blv-gold); }
.blv-exam-card.available:hover { box-shadow: 0 14px 32px rgba(22,33,62,.14); box-shadow: var(--blv-shadow-lg); transform: translateY(-3px); }
.blv-exam-card.locked { opacity: .72; }

.blv-exam-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.blv-exam-subject { font-size: .75rem; font-weight: 700; color: #2A4494; color: var(--blv-primary); text-transform: uppercase; letter-spacing: .06em; }

.blv-exam-title { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-family: var(--blv-font-display); font-size: 1.08rem; font-weight: 600; color: #16213E; color: var(--blv-ink); margin-bottom: 12px; }

.blv-exam-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: #5B6478;
    color: var(--blv-secondary);
    margin-bottom: 16px;
}

/* ── Exam Container ────────────────────────────────────────── */
.blv-exam-container {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: #F7F6F2;
    background: var(--blv-gray-50);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--blv-font);
}

.blv-exam-top-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #2A4494;
    background: var(--blv-primary);
    color: #ffffff;
    color: var(--blv-white);
    flex-shrink: 0;
}

.blv-exam-title-bar { flex: 1; font-weight: 700; font-size: 1rem; }

.blv-timer {
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,.15);
    padding: 6px 14px;
    border-radius: 8px;
    border-radius: var(--blv-radius);
    min-width: 90px;
    text-align: center;
}

.blv-timer.danger { background: #D8483A; background: var(--blv-danger); animation: blv-pulse 1s infinite; }
@keyframes blv-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

.blv-exam-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.blv-question-panel {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blv-question-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8rem;
    color: #5B6478;
    color: var(--blv-secondary);
    font-weight: 600;
}

.blv-progress-bar { flex: 1; height: 6px; background: #E4E2DB; background: var(--blv-gray-200); border-radius: 999px; overflow: hidden; }
.blv-progress-fill { height: 100%; background: #2A4494; background: var(--blv-primary); border-radius: 999px; transition: width .3s ease; }

.blv-question-text {
    background: #ffffff;
    background: var(--blv-white);
    border: 1.5px solid #E4E2DB;
    border: 1.5px solid var(--blv-gray-200);
    border-radius: 14px;
    border-radius: var(--blv-radius-lg);
    padding: 20px 24px;
    font-size: 1.05rem;
    font-weight: 500;
    color: #1F2430;
    color: var(--blv-gray-800);
    line-height: 1.7;
    box-shadow: 0 1px 3px rgba(22,33,62,.10), 0 1px 2px rgba(22,33,62,.08);
    box-shadow: var(--blv-shadow);
}

#blv-question-image img { max-width: 100%; border-radius: 8px; border-radius: var(--blv-radius); margin-bottom: 8px; }

.blv-options { display: flex; flex-direction: column; gap: 10px; }

.blv-option-label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #ffffff;
    background: var(--blv-white);
    border: 1.5px solid #E4E2DB;
    border: 1.5px solid var(--blv-gray-200);
    border-radius: 8px;
    border-radius: var(--blv-radius);
    cursor: pointer;
    font-size: .9rem;
    transition: all .2s ease;
    transition: var(--blv-transition);
    box-shadow: 0 1px 3px rgba(22,33,62,.10), 0 1px 2px rgba(22,33,62,.08);
    box-shadow: var(--blv-shadow);
}

.blv-option-label:hover { border-color: #2A4494; border-color: var(--blv-primary); background: #EAEFFD; background: var(--blv-primary-light); }
.blv-option-label.selected { border-color: #2A4494; border-color: var(--blv-primary); background: #EAEFFD; background: var(--blv-primary-light); font-weight: 600; }

.blv-option-key {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F0EFEA;
    background: var(--blv-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
    text-transform: uppercase;
}

.blv-option-label.selected .blv-option-key {
    background: #2A4494;
    background: var(--blv-primary);
    color: #ffffff;
    color: var(--blv-white);
}

.blv-option-label input[type="radio"] { display: none; }

.blv-short-answer .blv-input { font-size: 1rem; }

/* ── Question Nav Panel ────────────────────────────────────── */
.blv-nav-panel {
    width: 180px;
    border-left: 1px solid #E4E2DB;
    border-left: 1px solid var(--blv-gray-200);
    background: #ffffff;
    background: var(--blv-white);
    overflow-y: auto;
    padding: 16px;
    flex-shrink: 0;
}

.blv-nav-header { font-size: .8rem; font-weight: 700; color: #5B6478; color: var(--blv-secondary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }

.blv-q-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.blv-q-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border-radius: var(--blv-radius);
    border: 1.5px solid #E4E2DB;
    border: 1.5px solid var(--blv-gray-200);
    background: #F7F6F2;
    background: var(--blv-gray-50);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    transition: var(--blv-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blv-q-nav-btn.answered { background: #E9F7EF; background: var(--blv-success-light); border-color: #1E8E5A; border-color: var(--blv-success); color: #1E8E5A; color: var(--blv-success); }
.blv-q-nav-btn.current  { background: #2A4494; background: var(--blv-primary); border-color: #2A4494; border-color: var(--blv-primary); color: #ffffff; color: var(--blv-white); }

/* ── Exam Footer ───────────────────────────────────────────── */
.blv-exam-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: #ffffff;
    background: var(--blv-white);
    border-top: 1px solid #E4E2DB;
    border-top: 1px solid var(--blv-gray-200);
    flex-shrink: 0;
    gap: 12px;
}

.blv-save-status { font-size: .8rem; color: #5B6478; color: var(--blv-secondary); flex: 1; text-align: center; }

/* ── Modal ─────────────────────────────────────────────────── */
.blv-modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.blv-modal-content {
    background: #ffffff;
    background: var(--blv-white);
    border-radius: 14px;
    border-radius: var(--blv-radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 14px 32px rgba(22,33,62,.14);
    box-shadow: var(--blv-shadow-lg);
}

.blv-modal-lg { max-width: 680px; }

.blv-modal-content h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; }

.blv-modal-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ── Result Card ───────────────────────────────────────────── */
.blv-result-content { text-align: center; }

.blv-result-score {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-family: var(--blv-font-display);
    font-size: 3rem;
    font-weight: 700;
    color: #2A4494;
    color: var(--blv-primary);
    line-height: 1;
    margin: 12px 0;
}

.blv-result-pass { color: #1E8E5A; color: var(--blv-success); }
.blv-result-fail { color: #D8483A; color: var(--blv-danger); }

.blv-corrections { text-align: left; margin-top: 20px; }
.blv-correction-item {
    border: 1px solid #E4E2DB;
    border: 1px solid var(--blv-gray-200);
    border-radius: 8px;
    border-radius: var(--blv-radius);
    padding: 12px 16px;
    margin-bottom: 10px;
    font-size: .875rem;
}
.blv-correction-item.correct { border-left: 4px solid #1E8E5A; border-left: 4px solid var(--blv-success); }
.blv-correction-item.wrong   { border-left: 4px solid #D8483A; border-left: 4px solid var(--blv-danger); }

/* ── Empty state ───────────────────────────────────────────── */
.blv-empty { text-align: center; padding: 40px 20px; color: #5B6478; color: var(--blv-secondary); font-size: .9rem; }
.blv-loading { text-align: center; padding: 20px; color: #5B6478; color: var(--blv-secondary); }

/* ── Results Table ─────────────────────────────────────────── */
.blv-results-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.blv-results-table th, .blv-results-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid #E4E2DB; border-bottom: 1px solid var(--blv-gray-200); }
.blv-results-table th {
    font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: #5B6478;
    color: var(--blv-secondary); background: #F7F6F2; background: var(--blv-gray-50);
}
.blv-results-table tbody tr:hover { background: #FDF1DA; background: var(--blv-gold-light); }

/* ── Student Profile Card ─────────────────────────────────── */
.blv-profile-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #ffffff;
    background: var(--blv-white);
    border: 1.5px solid #E4E2DB;
    border: 1.5px solid var(--blv-gray-200);
    border-radius: 14px;
    border-radius: var(--blv-radius-lg);
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(22,33,62,.10), 0 1px 2px rgba(22,33,62,.08);
    box-shadow: var(--blv-shadow);
    margin-bottom: 4px;
}

.blv-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A4494, #16213E);
    background: linear-gradient(135deg, var(--blv-primary), var(--blv-ink));
    color: #ffffff;
    color: var(--blv-white);
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-family: var(--blv-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(22,33,62,.28);
}

.blv-profile-details { flex: 1; }

.blv-profile-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2430;
    color: var(--blv-gray-800);
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.blv-profile-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px 20px;
}

.blv-profile-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.blv-profile-meta-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9C9A90;
    color: var(--blv-gray-400);
}

.blv-profile-meta-value {
    font-size: .84rem;
    font-weight: 600;
    color: #3A3934;
    color: var(--blv-gray-700);
}

/* ── Anti-cheat: disable text selection during exam ──────── */
body.blv-exam-active {
    overflow: hidden !important;
}

.blv-exam-container {
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
}

/* Allow selection only inside short-answer textarea */
.blv-exam-container textarea,
.blv-exam-container input[type="text"] {
    -webkit-user-select: text;
    -moz-user-select:    text;
    user-select:         text;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .blv-login-card { padding: 28px 20px; }
    .blv-exam-body  { flex-direction: column; }
    .blv-nav-panel  { width: 100%; border-left: none; border-top: 1px solid #E4E2DB; border-top: 1px solid var(--blv-gray-200); padding: 12px; }
    .blv-q-nav      { grid-template-columns: repeat(8, 1fr); }
    .blv-exam-title-bar { display: none; }
    .blv-exam-top-bar { padding: 10px 14px; }
    .blv-question-panel { padding: 16px; }
    .blv-question-text { font-size: .95rem; padding: 16px; }
    .blv-option-label   { padding: 12px 14px; }
    .blv-exam-grid      { grid-template-columns: 1fr; }
    .blv-modal-content  { padding: 20px 16px; }
}

@media (max-width: 480px) {
    .blv-form-row { flex-direction: column; }
    .blv-dash-header { gap: 10px; }
    .blv-timer { font-size: 1.1rem; min-width: 70px; }
    .blv-q-nav { grid-template-columns: repeat(6, 1fr); }
    .blv-profile-card { flex-direction: column; align-items: center; text-align: center; }
    .blv-profile-meta-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Exam type tag (Terminal Examination / Continuous Assessment) ── */
.blv-type-tag { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.blv-type-tag.terminal { background:#e0e7ff; color:#3730a3; }
.blv-type-tag.ca       { background:#fef3c7; color:#92400e; }
.blv-type-tag.termly   { background:#dcfce7; color:#166534; }

/* ── Subjects at the foot of the student portal ── */
.blv-class-subjects { margin-top: 28px; background:#fff; border:1.5px solid #E4E2DB; border:1.5px solid var(--blv-gray-200); border-radius:12px; padding:18px 20px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.blv-class-subjects-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; margin-bottom:12px; }
.blv-class-subjects-head h3 { margin:0; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#5B6478; color:var(--blv-secondary); }
.blv-class-subjects-head span { font-size:.8rem; color:#5B6478; color:var(--blv-secondary); font-weight:600; }
.blv-class-subjects-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.blv-class-subjects-grid li { display:flex; flex-direction:column; gap:1px; padding:9px 12px; border:1.5px solid #E4E2DB; border:1.5px solid var(--blv-gray-200); border-radius:10px; background:#F7F6F2; background:var(--blv-gray-50, #f9fafb); }
.blv-class-subjects-grid li.mine { border-color:#0E8388; border-color:var(--blv-teal); background:#E4F4F3; background:var(--blv-teal-light); }
.blv-class-subjects-grid .nm { font-weight:700; font-size:.88rem; color:#16213E; color:var(--blv-ink, #111827); }
.blv-class-subjects-grid .tg { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#5B6478; color:var(--blv-secondary); }
.blv-class-subjects-grid li.mine .tg { color:#0E8388; color:var(--blv-teal); font-weight:700; }
.blv-class-subjects-empty { color:#5B6478; color:var(--blv-secondary); margin:0; font-size:.88rem; }

/* ── Legacy-browser layout fallbacks (auto-generated) ───────── */
@supports not (display: grid) {
.blv-exam-grid { display: flex; flex-wrap: wrap; }
.blv-exam-grid > * { box-sizing: border-box; width: calc(50.000% - 8px); margin: 0 4px 8px; }
.blv-q-nav { display: flex; flex-wrap: wrap; }
.blv-q-nav > * { box-sizing: border-box; width: calc(25.000% - 8px); margin: 0 4px 8px; }
.blv-profile-meta-grid { display: flex; flex-wrap: wrap; }
.blv-profile-meta-grid > * { box-sizing: border-box; width: calc(50.000% - 8px); margin: 0 4px 8px; }
.blv-class-subjects-grid { display: flex; flex-wrap: wrap; }
.blv-class-subjects-grid > * { box-sizing: border-box; width: calc(50.000% - 8px); margin: 0 4px 8px; }
}
@supports not (inset: 0) {
.blv-form-row > * { margin-right: 16px; margin-bottom: 16px; }
.blv-portal-badge > *,
.blv-portal-badge-sm > * { margin-right: 5px; }
.blv-btn > * { margin-right: 6px; }
.blv-dash-header > * { margin-right: 16px; margin-bottom: 16px; }
.blv-tabs > * { margin-right: 4px; }
.blv-exam-meta > * { margin-right: 12px; margin-bottom: 12px; }
.blv-exam-top-bar > * { margin-right: 16px; }
.blv-question-panel > * { margin-bottom: 16px; }
.blv-question-progress > * { margin-right: 12px; }
.blv-options > * { margin-bottom: 10px; }
.blv-option-label > * { margin-right: 14px; }
.blv-exam-footer > * { margin-right: 12px; }
.blv-modal-actions > * { margin-right: 10px; margin-bottom: 10px; }
.blv-profile-card > * { margin-right: 20px; }
.blv-profile-name > * { margin-right: 8px; margin-bottom: 8px; }
.blv-profile-meta-item > * { margin-bottom: 2px; }
.blv-class-subjects-head > * { margin-right: 6px; margin-bottom: 6px; }
.blv-class-subjects-grid li > * { margin-bottom: 1px; }
}