/* ============================================================
   JuaraKelas - Theme
   Base: Bootstrap 5.3 (overridden below) + UBold (admin) + Slima (public)
   ============================================================ */

:root {
    /* Brand palette (Slima-inspired, konsisten dgn tema lama) */
    --bs-primary: #2f7df4;
    --bs-primary-rgb: 47, 125, 244;
    --bs-secondary: #6c757d;
    --bs-success: #0ab39c;
    --bs-success-rgb: 10, 179, 156;
    --bs-info: #299cdb;
    --bs-info-rgb: 41, 156, 219;
    --bs-warning: #f7b84b;
    --bs-warning-rgb: 247, 184, 75;
    --bs-danger: #f06548;
    --bs-danger-rgb: 240, 101, 72;
    --bs-light: #f5f8fc;
    --bs-dark: #14213d;

    /* UBold admin palette accents */
    --admin-primary: #405189;
    --admin-primary-rgb: 64, 81, 137;
    --admin-success: #0ab39c;
    --admin-info: #299cdb;
    --admin-warning: #f7b84b;
    --admin-danger: #f06548;
    --admin-bg: #f5f8fc;
    --admin-sidebar-bg: #2c313a;
    --admin-sidebar-fg: #c8cdd6;
    --admin-sidebar-active: #405189;
    --admin-topbar-bg: #ffffff;

    /* Slima public palette */
    --public-primary: #2f7df4;
    --public-accent: #22c55e;
    --public-bg: #ffffff;
    --public-fg: #344258;
    --public-muted: #65758b;
    --public-line: #e9ebec;

    /* Spacing & radius */
    --bs-body-font-size: 0.94rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-border-color: #e9ebec;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 1.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(20, 33, 61, .05);
    --shadow-md: 0 4px 12px rgba(20, 33, 61, .08);
    --shadow-lg: 0 12px 32px rgba(20, 33, 61, .12);

    /* Hero gradient (Slima) */
    --hero-gradient: radial-gradient(circle at 85% 20%, rgba(47, 125, 244, .65), transparent 30%),
                     radial-gradient(circle at 55% 120%, rgba(34, 197, 94, .25), transparent 40%);

    /* Page header (Slima) */
    --page-header-bg: #ffffff;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--public-fg);
    background: var(--public-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.datatable-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.75rem; border-bottom:1px solid var(--bs-border-color); background:#fff; }
.datatable-search { width:min(100%, 19rem); }
.datatable-filter { width:auto; max-width:12rem; }
.datatable-size { width:auto; margin-left:auto; }
.datatable-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:.75rem; border-top:1px solid var(--bs-border-color); background:#fff; }
.datatable-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.datatable-sortable::after { content:' <>'; color:#94a3b8; font-size:.72em; }
.datatable-sortable[data-order="asc"]::after { content:' ^'; color:var(--bs-primary); }
.datatable-sortable[data-order="desc"]::after { content:' v'; color:var(--bs-primary); }
.competition-tabs { display:flex; gap:.35rem; overflow-x:auto; padding:.35rem; border:1px solid var(--bs-border-color); border-radius:.75rem; background:#fff; }
.competition-tabs a { display:flex; align-items:center; gap:.45rem; white-space:nowrap; padding:.55rem .8rem; color:#64748b; border-radius:.5rem; text-decoration:none; font-size:.82rem; font-weight:600; }
.competition-tabs a span { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; background:#eef2f7; font-size:.7rem; }
.competition-tabs a:hover,.competition-tabs a.active { color:var(--bs-primary); background:color-mix(in srgb, var(--bs-primary) 9%, white); }
.competition-tabs a.active span { background:var(--bs-primary); color:#fff; }
@media (max-width:575.98px) { .datatable-search,.datatable-filter,.datatable-size { width:100%; max-width:none; margin-left:0; } .datatable-footer { justify-content:center; } }
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 22rem;
    background: radial-gradient(circle at 20% 0%, rgba(47, 125, 244, .08), transparent 42%),
                radial-gradient(circle at 85% 5%, rgba(34, 197, 94, .05), transparent 38%);
    pointer-events: none;
    z-index: -1;
}
::selection { background: #b9dbff; color: #123c75; }
[x-cloak] { display: none !important; }

/* ============================================================
   Question preview (admin)
   ============================================================ */
.question-preview-card { transition: border-color .15s, box-shadow .15s; }
.question-preview-card:hover { box-shadow: var(--shadow-md, 0 6px 24px rgba(15,30,60,.06)); }
.question-text-content { color: var(--bs-body-color); }
.question-text-content p { margin: 0 0 .65rem; }
.question-text-content p:last-child { margin-bottom: 0; }
.question-text-content img { max-width: 100%; height: auto; border-radius: .35rem; margin: .35rem 0; }
.question-text-content ol, .question-text-content ul { padding-left: 1.4rem; margin-bottom: .65rem; }
.question-text-content blockquote { border-left: 3px solid var(--bs-primary); padding: .25rem .75rem; color: var(--bs-secondary-color); margin: .5rem 0; background: #f6f8fb; border-radius: 0 .35rem .35rem 0; }
.question-text-content pre, .question-text-content code { background: #f1f4f9; border-radius: .25rem; padding: .1rem .35rem; font-size: .9em; }
.explanation-block > summary::-webkit-details-marker { display: none; }
.explanation-block > summary .chevron { transition: transform .2s; }
.explanation-block[open] > summary .chevron { transform: rotate(180deg); }

a { color: var(--bs-primary); text-decoration: none; }
a:hover { color: #1768dc; }

.skip-link {
    position: fixed; left: 1rem; top: -5rem; z-index: 1000;
    padding: .7rem 1rem; border-radius: .7rem;
    background: var(--bs-dark); color: #fff; font-weight: 700;
    transition: top .2s;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid rgba(47, 125, 244, .32); outline-offset: 2px; }

.app-main { width: 100%; max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 3.5rem; flex: 1; }

/* ============================================================
   Public Navbar (Slima)
   ============================================================ */
.site-nav {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--public-line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.site-nav .navbar-brand {
    display: inline-flex; align-items: center; gap: .55rem;
    color: var(--bs-dark); font-weight: 800; letter-spacing: -.02em;
}
.site-nav .brand-mark {
    width: 2.1rem; height: 2.1rem; border-radius: .7rem;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, #3888fa, #1554b7);
    box-shadow: 0 6px 16px rgba(23, 104, 220, .25);
}
.site-nav .user-chip {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .25rem .65rem .25rem .25rem; border-radius: 999px;
    background: #eef6ff;
    text-decoration: none;
    color: inherit;
    max-width: 14rem;
    transition: background .15s, box-shadow .15s;
    border: 0;
    cursor: pointer;
}
.site-nav .user-chip:hover,
.site-nav .user-chip:focus {
    background: #d9ebff;
    box-shadow: 0 0 0 .2rem rgba(47, 125, 244, .12);
}
.site-nav .user-chip-text {
    flex: 1 1 auto; min-width: 0;
    max-width: 10rem;
}
.site-nav .user-chip-role {
    color: #65758b;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    display: block;
    line-height: 1.2;
}
.site-nav .user-chip-chevron {
    color: #65758b;
    font-size: .75rem;
    transition: transform .2s;
}
.site-nav .user-chip[aria-expanded="true"] .user-chip-chevron { transform: rotate(180deg); }
.site-nav .user-avatar {
    width: 2rem; height: 2rem; border-radius: 50%;
    display: grid; place-items: center; color: #1554b7;
    background: #d9ebff; font-weight: 800; font-size: .78rem;
    flex-shrink: 0;
}

/* === User dropdown menu (desktop) === */
.site-nav .user-dropdown .dropdown-toggle::after { display: none; }
.site-nav .user-dropdown-menu {
    min-width: 16rem;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-lg);
    border-radius: .75rem;
    padding: .35rem;
    margin-top: .35rem;
}
.site-nav .user-dropdown-menu .dropdown-header {
    padding: .65rem .85rem .35rem;
    line-height: 1.3;
}
.site-nav .user-dropdown-menu .dropdown-item {
    border-radius: .5rem;
    padding: .55rem .85rem;
    font-weight: 500;
    display: flex; align-items: center;
}
.site-nav .user-dropdown-menu .dropdown-item:hover,
.site-nav .user-dropdown-menu .dropdown-item:focus {
    background: #eef6ff;
}
.site-nav .user-dropdown-menu .dropdown-item.text-danger:hover {
    background: #fde0de;
    color: #b8412c;
}

/* === User card (mobile collapsed menu) === */
.user-card-mobile {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem .5rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--public-line);
}
.user-card-mobile .avatar-dicebear { flex-shrink: 0; }
.user-card-info { flex: 1 1 auto; }
.user-card-name {
    font-weight: 700;
    color: var(--bs-dark);
    font-size: .95rem;
    line-height: 1.2;
}
.user-card-role {
    color: var(--public-muted);
    font-size: .75rem;
    text-transform: capitalize;
    display: flex; align-items: center; gap: .35rem;
    margin-top: .1rem;
}
.role-dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--public-muted);
    display: inline-block;
}
.role-dot[data-role="admin"] { background: var(--bs-warning); }
.role-dot[data-role="guru"] { background: var(--bs-info); }
.role-dot[data-role="participant"] { background: var(--bs-success); }
.site-nav .nav-link { font-weight: 600; color: #4a5a70; }
.site-nav .nav-link:hover { color: var(--bs-primary); }
.site-nav .nav-link.active { color: var(--bs-primary); }
.site-nav .btn { font-weight: 600; }

/* === Mobile navbar (burger) alignment === */
@media (max-width: 991.98px) {
    .site-nav .navbar-collapse {
        margin-top: .5rem;
        padding: .35rem 0 .5rem;
        border-top: 1px solid var(--public-line);
    }
    .site-nav .navbar-nav {
        gap: 0;
        margin-top: .25rem;
    }
    .site-nav .navbar-nav .nav-item {
        border-bottom: 1px solid var(--public-line);
    }
    .site-nav .navbar-nav .nav-item:last-child {
        border-bottom: 0;
    }
    .site-nav .navbar-nav .nav-link {
        padding: .85rem .25rem;
        text-align: left;
        font-size: .95rem;
    }
    .site-nav .navbar-nav .nav-link.active {
        background: #eef6ff;
        border-radius: .5rem;
        padding-left: .65rem;
        margin: 0 -.4rem;
        color: var(--bs-primary);
    }
    .site-nav .navbar-nav .nav-link-logout {
        padding: .85rem .25rem;
        text-align: left;
    }
    .site-nav .navbar-nav .nav-item-auth .btn {
        padding: .65rem 1rem;
        text-align: center;
    }
    .site-nav .navbar-toggler {
        padding: .35rem .6rem;
        border-radius: .5rem;
        color: var(--bs-primary);
    }
    .site-nav .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(47, 125, 244, .25);
    }
}

/* === Category card (homepage) === */
.category-card {
    transition: transform .18s, box-shadow .18s, border-color .18s;
    border: 1px solid var(--bs-border-color);
    color: inherit;
}
.category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--cat-tone, var(--bs-primary));
}
.category-icon {
    width: 2.8rem; height: 2.8rem; border-radius: .85rem;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--cat-tone, var(--bs-primary)) 12%, white);
    color: var(--cat-tone, var(--bs-primary));
    font-size: 1.3rem;
}

/* === Quick action (dashboard) === */
.quick-action {
    color: inherit;
    border: 1px solid var(--bs-border-color);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.quick-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--qa-tone, var(--bs-primary));
}
.quick-action-icon {
    width: 2.6rem; height: 2.6rem; border-radius: .75rem;
    display: grid; place-items: center;
    margin-bottom: .5rem;
    background: color-mix(in srgb, var(--qa-tone, var(--bs-primary)) 12%, white);
    color: var(--qa-tone, var(--bs-primary));
    font-size: 1.25rem;
}

/* === Hero typewrite (homepage) === */
.typewrite-cursor {
    display: inline-block;
    margin-left: 2px;
    color: var(--bs-info);
    font-weight: 300;
    animation: type-cursor-blink .9s steps(1) infinite;
}
@keyframes type-cursor-blink { 50% { opacity: 0; } }

/* === CTA banner & badge-soft (homepage) === */
.cta-banner {
    background: linear-gradient(140deg, #14213d 0%, #1e3a5f 60%, #2f7df4 100%);
    color: #fff;
    border: 0;
    box-shadow: var(--shadow-md);
}
.cta-banner h3, .cta-banner p { color: #fff; }
.cta-banner p { opacity: .85; }
.cta-banner .btn { align-self: center; }
.badge-soft-primary {
    display: inline-grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff; font-size: 1.3rem;
}

/* === FAQ accordion override === */
.accordion-button:not(.collapsed) {
    background: #eef6ff;
    color: var(--bs-primary);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(47, 125, 244, .18);
}

/* ============================================================
   Public Hero (Slima)
   ============================================================ */
.hero-slima {
    position: relative; overflow: hidden;
    border-radius: 1.5rem;
    background: #14213d;
    color: #fff;
    padding: 2.5rem 1.5rem;
    box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .hero-slima { padding: 3.5rem 2.5rem; } }
.hero-slima::before {
    content: ""; position: absolute; inset: 0;
    background: var(--hero-gradient); opacity: .9; pointer-events: none;
}
.hero-slima > * { position: relative; z-index: 1; }
.hero-slima h1 { font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.hero-slima .lead { color: #d3dceb; }
.hero-slima .hero-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .85rem; border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #c9defb; font-size: .75rem; font-weight: 600;
}
.hero-slima .hero-pill .pulse {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--bs-success); box-shadow: 0 0 0 .25rem rgba(10, 179, 156, .25);
}
.hero-slima .hero-cta-light {
    background: #fff; color: var(--bs-primary);
    border: 1px solid #fff;
}
.hero-slima .hero-cta-light:hover { background: #f5f8fc; color: #1768dc; }
.hero-slima .hero-cta-ghost {
    background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
}
.hero-slima .hero-cta-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hero-illustration {
    width: 100%; max-width: 24rem; max-height: 21rem;
    object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .18));
}

/* ============================================================
   Cards
   ============================================================ */
.card-soft {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s, transform .18s;
}
.card-soft:hover { box-shadow: var(--shadow-md); }

.comp-card {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: .5rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.comp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.stat-card {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--bs-primary);
}
.stat-card.stat-success::before { background: var(--bs-success); }
.stat-card.stat-warning::before { background: var(--bs-warning); }
.stat-card.stat-danger::before { background: var(--bs-danger); }
.stat-card.stat-info::before { background: var(--bs-info); }
.stat-card .stat-label {
    color: var(--public-muted); font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .25rem;
}
.stat-card .stat-value {
    color: var(--bs-dark); font-size: 1.85rem; font-weight: 800; line-height: 1.1; margin: 0;
}
.stat-card .stat-icon {
    position: absolute; right: 1rem; top: 1rem;
    width: 2.6rem; height: 2.6rem; border-radius: .7rem;
    display: grid; place-items: center;
    background: rgba(47, 125, 244, .12); color: var(--bs-primary);
    font-size: 1.3rem;
}
.stat-card.stat-success .stat-icon { background: rgba(10, 179, 156, .12); color: var(--bs-success); }
.stat-card.stat-warning .stat-icon { background: rgba(247, 184, 75, .15); color: #c47e16; }
.stat-card.stat-danger .stat-icon { background: rgba(240, 101, 72, .12); color: var(--bs-danger); }
.stat-card.stat-info .stat-icon { background: rgba(41, 156, 219, .12); color: var(--bs-info); }

.step-number {
    flex: 0 0 auto; width: 1.9rem; height: 1.9rem;
    display: inline-grid; place-items: center; border-radius: .6rem;
    background: #eef6ff; color: var(--bs-primary);
    font-weight: 800; font-size: .82rem;
}

/* ============================================================
   Status pill (kept from old design)
   ============================================================ */
.status-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .65rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    line-height: 1.4;
}
.status-pill.status-success { background: #d1f5ea; color: #0a7e69; }
.status-pill.status-warning { background: #fef0d6; color: #c47e16; }
.status-pill.status-danger  { background: #fde0de; color: #b8412c; }
.status-pill.status-info    { background: #d8f0fa; color: #1d76a8; }
.status-pill.status-neutral { background: #edf0f2; color: #4a5a70; }
.status-pill.status-primary { background: #d9ebff; color: #1554b7; }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
    text-align: center; padding: 3rem 1.5rem;
    background: #fff; border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}
.empty-state-icon { font-size: 2.5rem; opacity: .4; margin-bottom: .5rem; }

/* ============================================================
   Eyebrow / page header
   ============================================================ */
.eyebrow {
    color: var(--bs-primary);
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: .35rem;
}
.page-title {
    color: var(--bs-dark);
    font-size: clamp(1.55rem, 2.3vw, 2.05rem);
    font-weight: 800; letter-spacing: -.035em; line-height: 1.15; margin: 0;
}
.page-subtitle {
    color: var(--public-muted); font-size: .92rem;
    max-width: 46rem; margin: .35rem 0 0;
}
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}

/* ============================================================
   Form (Slima)
   ============================================================ */
.form-label { font-weight: 600; color: #344258; font-size: .85rem; margin-bottom: .4rem; }
.form-control, .form-select { border-radius: .5rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(47, 125, 244, .15);
}
.input-suffix { position: relative; }
.input-suffix .form-control { padding-right: 4rem; }
.input-suffix .suffix-text {
    position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--public-muted); font-size: .8rem; font-weight: 600;
}
.color-field { width: 100%; height: 2.8rem; padding: .25rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: white; }

/* ============================================================
   Buttons (Slima accent + UBold)
   ============================================================ */
.btn { font-weight: 600; border-radius: .5rem; }
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #1768dc;
    --bs-btn-hover-border-color: #1768dc;
    --bs-btn-active-bg: #1554b7;
    --bs-btn-active-border-color: #1554b7;
}
.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: #089487;
    --bs-btn-hover-border-color: #089487;
}
.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: #d54e30;
    --bs-btn-hover-border-color: #d54e30;
}
.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: #e0a32a;
    --bs-btn-hover-border-color: #e0a32a;
    --bs-btn-color: #212529;
    --bs-btn-hover-color: #212529;
}

/* ============================================================
   Public footer (Slima)
   ============================================================ */
.site-footer {
    margin-top: auto;
    background: #fafbfd;
    border-top: 1px solid var(--public-line);
    padding: 1.5rem 0;
    color: #65758b; font-size: .82rem;
}
.site-footer-inner {
    max-width: 80rem; margin: 0 auto; padding: 0 1rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ============================================================
   Auth (centered card, mobile-first)
   ============================================================ */
.auth-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem 1rem;
    background:
        radial-gradient(circle at 15% 10%, rgba(47, 125, 244, .10), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(34, 197, 94, .08), transparent 45%),
        #f5f8fc;
}
@media (min-width: 768px) {
    .auth-page { padding: 2.5rem 1.5rem; }
}
.auth-card {
    width: 100%; max-width: 26rem;
    background: #fff;
    border-radius: 1.1rem;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem 1.25rem;
}
.auth-card-wide {
    max-width: 32rem;
}
@media (min-width: 576px) {
    .auth-card { padding: 2rem 1.75rem; }
}
@media (min-width: 768px) {
    .auth-card { padding: 2.5rem; }
}
.auth-card-header { margin-bottom: 1.25rem; }
.auth-brand {
    display: inline-flex; align-items: center; gap: .55rem;
    color: var(--bs-dark); font-weight: 800; letter-spacing: -.02em;
    text-decoration: none; margin-bottom: 1rem;
}
.auth-brand-mark {
    width: 2.1rem; height: 2.1rem; border-radius: .7rem;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, #3888fa, #1554b7);
    box-shadow: 0 6px 16px rgba(23, 104, 220, .25);
}
.auth-title {
    color: var(--bs-dark);
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    font-weight: 800; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 .35rem;
}
.auth-subtitle {
    color: var(--public-muted); font-size: .9rem; margin: 0;
}

.auth-form { margin: 0; }

/* === Auth: form input merge (icon + field) === */
.input-group-merge > .input-group-text {
    border-right: 0;
    color: #6c7a8c;
    background: #fff;
}
.input-group-merge > .form-control {
    border-left: 0;
    padding-left: 0;
    box-shadow: none !important;
}
.input-group-merge > .form-control:focus { box-shadow: none !important; }
.input-group-merge > .btn { border-left: 0; }
.input-group-merge:focus-within > .input-group-text,
.input-group-merge:focus-within > .form-control,
.input-group-merge:focus-within > .btn {
    border-color: var(--bs-primary);
}
.input-group-merge:focus-within > .input-group-text { color: var(--bs-primary); }

/* === Auth: captcha block (stacked) === */
.captcha-block {
    padding: .75rem; background: #fafbfd;
    border-radius: .6rem; border: 1px dashed var(--bs-border-color);
}
.captcha-image {
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
    padding: .25rem;
    overflow: hidden;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
}
.captcha-image svg { display: block; width: 100%; max-width: 200px; height: 60px; }
.captcha-input {
    flex: 1 1 auto; min-width: 0;
    letter-spacing: .2em;
    font-size: 1rem;
    height: 48px;
}
.captcha-refresh {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}

/* === Auth: parent phone block (register) === */
.parent-phone-block {
    background: #eef6ff;
    border: 1px solid #d9e8ff;
    border-radius: .65rem;
    padding: .75rem .85rem;
}
.parent-phone-block .form-label { color: #1554b7; margin-bottom: .35rem; font-weight: 700; }
.parent-phone-block .form-text { color: #4a6a8f; font-size: .78rem; }
.parent-phone-block .input-group-text { background: #fff; }
.parent-phone-block .input-group-text:first-child { color: var(--bs-primary); }
.parent-phone-block .input-group-text.ps-0 { border-left: 0; padding-left: 0; }

/* === Avatar (DiceBear with initials fallback) === */
.avatar-dicebear {
    display: inline-grid;
    place-items: center;
    width: var(--avatar-size, 2.5rem);
    height: var(--avatar-size, 2.5rem);
    border-radius: 50%;
    overflow: hidden;
    background: var(--avatar-bg, linear-gradient(145deg, #3888fa, #1554b7));
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(20, 33, 61, .08);
}
.avatar-dicebear img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.avatar-fallback {
    display: none;
    place-items: center;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* === Auth: divider === */
.auth-divider {
    display: flex; align-items: center; gap: .75rem;
    color: var(--public-muted); font-size: .78rem;
    margin: 1.1rem 0;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--bs-border-color);
}

/* === Auth: tip disclosure === */
.auth-tip {
    background: #fafbfd;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .5rem .75rem;
}
.auth-tip summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex; align-items: center;
    font-weight: 600;
    color: var(--public-muted);
}
.auth-tip summary:hover { color: var(--bs-primary); }
.auth-tip summary::-webkit-details-marker { display: none; }
.auth-tip summary::marker { content: ''; }

/* === Legacy split-screen classes (kept for backward compat) === */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .auth-shell { grid-template-columns: 1fr 1fr; }
}
.auth-hero {
    display: none;
    background: #14213d;
    color: #fff;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) { .auth-hero { display: flex; flex-direction: column; justify-content: space-between; } }
.auth-hero::before {
    content: ""; position: absolute; inset: 0;
    background: var(--hero-gradient); opacity: .85; pointer-events: none;
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero h1 { font-weight: 800; letter-spacing: -.03em; }
.auth-hero .lead { color: #c0cee3; }
.auth-illustration {
    width: 100%; max-width: 18rem; max-height: 15rem;
    object-fit: contain; opacity: .96;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .14));
}
.auth-form-side {
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.25rem;
    background: var(--public-bg);
}
.auth-form-card {
    width: 100%; max-width: 26rem;
    background: #fff; border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--bs-border-color);
}
@media (min-width: 768px) {
    .auth-form-side { padding: 3rem; }
    .auth-form-card { padding: 2.5rem; }
}

/* ============================================================
   Admin shell (UBold)
   ============================================================ */
body.admin-body {
    background: var(--admin-bg);
    min-height: 100vh;
    display: block;
}
body.admin-body::before { display: none; }

.admin-wrapper {
    display: flex; min-height: 100vh;
}

/* Sidenav */
.admin-sidenav {
    width: 250px;
    background: var(--admin-sidebar-bg);
    color: var(--admin-sidebar-fg);
    flex-shrink: 0;
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0;
    z-index: 1040;
    transition: transform .25s ease;
    overflow-y: auto;
}
.admin-sidenav .sidenav-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(0, 0, 0, .15);
}
.admin-sidenav .sidenav-header strong {
    color: #fff; font-size: 1.05rem; letter-spacing: -.01em;
}
.admin-sidenav .sidenav-header small { color: #8b95a3; }

.admin-sidenav .sidenav-user {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.admin-sidenav .sidenav-user .avatar {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(145deg, #667eea, #405189);
    color: #fff; font-weight: 800; font-size: .9rem;
}
.admin-sidenav .sidenav-user .name { color: #fff; font-weight: 700; line-height: 1.2; font-size: .9rem; }
.admin-sidenav .sidenav-user .role { color: #8b95a3; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }

.admin-sidenav .sidenav-menu { padding: .75rem 0; flex: 1; }
.admin-sidenav .sidenav-title {
    padding: 1rem 1.5rem .35rem;
    color: #6b7686; font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
}
.admin-sidenav .sidenav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem 1.5rem;
    color: var(--admin-sidebar-fg);
    text-decoration: none; font-size: .88rem; font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.admin-sidenav .sidenav-link:hover {
    background: rgba(255, 255, 255, .04);
    color: #fff;
}
.admin-sidenav .sidenav-link.active {
    background: rgba(64, 81, 137, .18);
    color: #fff;
    border-left-color: var(--admin-sidebar-active);
}
.admin-sidenav .sidenav-link i { font-size: 1.05rem; width: 1.1rem; text-align: center; }
.admin-sidenav .sidenav-link .badge { margin-left: auto; }

/* Topbar */
.admin-topbar {
    height: 64px;
    background: var(--admin-topbar-bg);
    border-bottom: 1px solid var(--bs-border-color);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.5rem;
    position: sticky; top: 0; z-index: 1030;
    box-shadow: var(--shadow-sm);
}
.admin-topbar .topbar-toggle { display: none; }
@media (max-width: 991.98px) {
    .admin-topbar .topbar-toggle { display: inline-flex; }
}
.admin-topbar .topbar-title { font-weight: 700; color: var(--bs-dark); margin: 0; font-size: 1rem; }
.admin-topbar .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.admin-topbar .topbar-actions .icon-btn {
    width: 2.4rem; height: 2.4rem; border-radius: .5rem;
    display: grid; place-items: center; color: #65758b;
    background: transparent; border: 0; cursor: pointer;
    transition: background .15s, color .15s;
}
.admin-topbar .topbar-actions .icon-btn:hover { background: #eef6ff; color: var(--bs-primary); }

/* Page content */
.admin-content {
    flex: 1;
    margin-left: 250px;
    min-width: 0;
    display: flex; flex-direction: column;
}
.admin-content .page-content { padding: 1.5rem; }
.admin-content .page-content-inner { max-width: 100%; }

.admin-welcome {
    position: relative; overflow: hidden;
    min-height: 12.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(110deg, #fff 0%, #f5f8ff 68%, #edf3ff 100%);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
}
.admin-welcome::after {
    content: ""; position: absolute; width: 15rem; height: 15rem; right: 8rem; top: -8rem;
    border-radius: 50%; background: rgba(64, 81, 137, .06); pointer-events: none;
}
.admin-welcome-copy { position: relative; z-index: 1; max-width: 42rem; }
.admin-welcome-art {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center;
}
.admin-welcome-illustration {
    width: min(24vw, 14rem); height: 10rem; object-fit: contain;
}
.admin-welcome-art a { color: #7a8798; font-size: .65rem; }
.admin-welcome-art a:hover { color: var(--admin-primary); }
@media (max-width: 767.98px) {
    .admin-welcome { padding: 1.5rem; min-height: auto; }
    .admin-welcome-art { display: none; }
}

@media (max-width: 991.98px) {
    .admin-sidenav { transform: translateX(-100%); }
    .admin-sidenav.show { transform: translateX(0); }
    .admin-content { margin-left: 0; }
}
.admin-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20, 33, 61, .5);
    z-index: 1035;
}
.admin-backdrop.show { display: block; }
@media (min-width: 992px) { .admin-backdrop { display: none !important; } }

/* ============================================================
   Tables (UBold)
   ============================================================ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #495057;
    --bs-table-border-color: var(--bs-border-color);
    margin-bottom: 0;
}
.table > thead {
    background: #fafbfd;
}
.table > thead th {
    color: #65758b; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: .85rem 1rem; border-bottom: 1px solid var(--bs-border-color);
}
.table > tbody td {
    padding: .85rem 1rem; vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color);
}
.table > tbody tr:last-child td { border-bottom: 0; }
.table > tbody tr:hover { background: #fafbfd; }
.table-card {
    background: #fff; border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.table-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-wrap: wrap;
}
.table-card-header h5 { margin: 0; font-weight: 700; color: var(--bs-dark); font-size: 1rem; }
.table-card-body { padding: 0; }
.table-card-body .table { margin: 0; }
.table-card-body .table > thead > tr > th:first-child,
.table-card-body .table > tbody > tr > td:first-child { padding-left: 1.25rem; }
.table-card-body .table > thead > tr > th:last-child,
.table-card-body .table > tbody > tr > td:last-child { padding-right: 1.25rem; }

/* ============================================================
   Flash / alert
   ============================================================ */
.toast-region {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2000;
    display: flex; flex-direction: column; gap: .55rem; max-width: 22rem;
}
.toast-region .toast {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .85rem 1rem; border-radius: .65rem;
    background: #fff; border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-lg);
    color: #344258; font-size: .9rem; font-weight: 500;
    animation: toast-slide .25s ease-out;
}
.toast-region .toast .toast-icon {
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
    background: #eef6ff; color: var(--bs-primary); font-weight: 800; font-size: .85rem;
}
.toast-region .toast.toast-success .toast-icon { background: #d1f5ea; color: var(--bs-success); }
.toast-region .toast.toast-danger .toast-icon { background: #fde0de; color: var(--bs-danger); }
.toast-region .toast.toast-warning .toast-icon { background: #fef0d6; color: #c47e16; }
@keyframes toast-slide {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   Practice banner (gradient Slima)
   ============================================================ */
.practice-banner {
    background: linear-gradient(135deg, #0ab39c, #089487);
    color: #fff;
    border-radius: var(--bs-border-radius-xl);
    padding: 2rem;
    display: flex; flex-direction: column; gap: 1rem;
    align-items: flex-start; justify-content: space-between;
    box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
    .practice-banner { flex-direction: row; align-items: center; }
}
.practice-banner h2 { font-weight: 800; letter-spacing: -.02em; margin: 0; }
.practice-banner p { color: rgba(255, 255, 255, .9); margin: 0; }
.practice-banner .btn-banner {
    background: #fff; color: var(--bs-success);
    border: 1px solid #fff; font-weight: 700;
}
.practice-banner .btn-banner:hover { background: #f0fdf9; color: #089487; }

/* ============================================================
   Certificate (Slima)
   ============================================================ */
.cert-page {
    background: #f5f8fc; padding: 2rem 1rem; min-height: 100vh;
}
.cert-shell {
    max-width: 56rem; margin: 0 auto;
    background: #fff; border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 3rem 2rem;
    position: relative; overflow: hidden;
}
.cert-shell::before {
    content: ""; position: absolute; inset: .5rem;
    border: 2px solid var(--bs-primary);
    border-radius: 1rem; pointer-events: none;
}
.cert-shell::after {
    content: ""; position: absolute; inset: .9rem;
    border: 1px dashed rgba(47, 125, 244, .35);
    border-radius: .8rem; pointer-events: none;
}
.cert-content { position: relative; z-index: 1; text-align: center; }
.cert-content .cert-eyebrow {
    color: var(--bs-primary); font-size: .8rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
}
.cert-content h1 {
    color: var(--bs-dark); font-weight: 800; font-size: 2.25rem;
    letter-spacing: -.03em; margin: .35rem 0;
}
.cert-content .cert-recipient {
    color: var(--bs-primary); font-size: 2.5rem; font-weight: 800;
    letter-spacing: -.025em; margin: 1.5rem 0 .5rem;
    border-bottom: 2px solid var(--bs-primary);
    display: inline-block; padding-bottom: .35rem; min-width: 60%;
}
.cert-content .cert-body { color: #4a5a70; max-width: 36rem; margin: 0 auto; line-height: 1.7; }
.cert-content .cert-meta {
    display: flex; justify-content: space-between; gap: 1.5rem;
    margin-top: 2.5rem; flex-wrap: wrap;
}
.cert-content .cert-meta .meta-block { text-align: center; min-width: 12rem; }
.cert-content .cert-meta .meta-label { color: #65758b; font-size: .78rem; }
.cert-content .cert-meta .meta-value { color: var(--bs-dark); font-weight: 700; margin-top: .25rem; }

@media print {
    .cert-page { background: #fff; padding: 0; }
    .cert-shell { box-shadow: none; border: 0; }
    .no-print { display: none !important; }
}

/* ============================================================
   Exam board (visual chrome, logic stays in exam/board.ejs)
   ============================================================ */
.exam-shell { padding-bottom: 6rem; }
.exam-navbar {
    position: sticky; top: 0; z-index: 1030;
    background: #fff; border-bottom: 1px solid var(--bs-border-color);
    padding: .75rem 0; box-shadow: var(--shadow-sm);
}
.exam-floating-timer {
    position: fixed; top: 5rem; right: 1rem; z-index: 1020;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem; background: #fff;
    border: 1px solid var(--bs-border-color); border-radius: .75rem;
    box-shadow: var(--shadow-md);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-weight: 800; font-size: 1.05rem; color: var(--bs-dark);
    transition: background .2s, color .2s, border-color .2s;
}
.exam-floating-timer.is-danger {
    background: #fde0de; color: #b8412c; border-color: #f8b8a8;
}
.exam-floating-timer i { color: #65758b; }
.exam-floating-timer.is-danger i { color: #b8412c; }

.exam-qnav {
    position: fixed; top: 9rem; right: 1rem; z-index: 1010;
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--bs-border-color); border-radius: .75rem;
    box-shadow: var(--shadow-md);
    padding: .55rem .75rem;
    display: flex; flex-direction: column; gap: .5rem;
    backdrop-filter: blur(8px);
    transition: opacity .35s, transform .35s;
    max-width: 14rem;
}
.exam-qnav.is-hidden { opacity: 0; transform: translateX(20px); pointer-events: none; }
.exam-qnav-toggle {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; padding: .15rem 0;
    border-bottom: 1px solid #eef0f4; padding-bottom: .35rem;
}
.exam-qnav-toggle .label {
    font-size: .65rem; font-weight: 800; color: #65758b;
    text-transform: uppercase; letter-spacing: .08em;
}
.exam-qnav-toggle .icon { color: #8b95a3; transition: transform .25s; }
.exam-qnav-toggle .icon.open { transform: rotate(180deg); }

.exam-qnav-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: .35rem; max-height: 50vh; overflow-y: auto;
}
.exam-qnav-grid::-webkit-scrollbar { display: none; }
.exam-qnav-grid { -ms-overflow-style: none; scrollbar-width: none; }

.qdot {
    width: 28px; height: 28px; border-radius: .35rem;
    display: grid; place-items: center; cursor: pointer;
    font-size: .72rem; font-weight: 700; line-height: 1;
    background: #fff; color: #65758b;
    border: 1.5px solid #d6dde6;
    transition: background .15s, border-color .15s, color .15s;
}
.qdot:hover { background: #eef6ff; }
.qdot.answered { background: #0ab39c; color: #fff; border-color: #089487; }
.qdot.review { background: #f7b84b; color: #fff; border-color: #c47e16; }
.qdot.current { box-shadow: 0 0 0 2px var(--bs-primary); border-color: var(--bs-primary); }

.exam-question-card {
    background: #fff; border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem; box-shadow: var(--shadow-sm);
    scroll-margin-top: 6rem;
}
.exam-option {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem; border: 2px solid var(--bs-border-color);
    border-radius: .65rem; cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #fff;
}
.exam-option:hover { border-color: rgba(47, 125, 244, .55); background: rgba(47, 125, 244, .04); }
.exam-option input[type="radio"] { display: none; }
.exam-option .opt-letter {
    width: 2rem; height: 2rem; border-radius: .5rem;
    display: grid; place-items: center; flex-shrink: 0;
    background: #f5f8fc; border: 1px solid var(--bs-border-color);
    color: #65758b; font-weight: 800; font-size: .85rem;
    transition: background .15s, color .15s, border-color .15s;
}
.exam-option.option-selected {
    border-color: var(--bs-primary);
    background: #eef6ff;
}
.exam-option.option-selected .opt-letter {
    background: var(--bs-primary); color: #fff; border-color: var(--bs-primary);
}
.exam-progress {
    height: 6px; background: #eef0f4; border-radius: 999px; overflow: hidden;
}
.exam-progress > .bar {
    height: 100%; background: var(--bs-primary);
    transition: width .3s ease;
}

.exam-save-toast {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1050;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1rem; background: rgba(20, 33, 61, .92);
    color: #fff; border-radius: .65rem; font-weight: 600; font-size: .85rem;
    box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.exam-save-toast.show { opacity: 1; }
.exam-save-toast i { color: #34d399; }

.exam-error-toast {
    position: fixed; bottom: 5rem; right: 1.5rem; z-index: 1060;
    background: var(--bs-danger); color: #fff;
    padding: .85rem 1rem; border-radius: .65rem;
    box-shadow: var(--shadow-lg);
    max-width: 22rem;
}
.exam-error-toast .progress {
    height: 4px; background: rgba(255, 255, 255, .35); margin-top: .5rem;
}
.exam-error-toast .progress > .bar {
    height: 100%; background: rgba(255, 255, 255, .7);
    transition: width 1s linear;
}
.exam-review-float {
    position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 1015;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem; background: var(--bs-warning); color: #212529;
    border-radius: 999px; font-weight: 700; font-size: .85rem;
    border: 0; box-shadow: var(--shadow-md);
}
.exam-review-float:hover { background: #e0a32a; color: #212529; }
.exam-review-float[hidden] { display: none; }

/* Responsive font sizes for question text */
.qtext-base { font-size: 1rem; line-height: 1.65; }
.qtext-lg   { font-size: 1.12rem; line-height: 1.7; }
.qtext-xl   { font-size: 1.25rem; line-height: 1.8; }
@media (min-width: 640px) {
    .qtext-base { font-size: 1.1rem; }
    .qtext-lg   { font-size: 1.25rem; }
    .qtext-xl   { font-size: 1.4rem; }
}

/* ============================================================
   Responsive helpers
   ============================================================ */
@media (max-width: 575.98px) {
    .exam-floating-timer { top: 4.5rem; right: .75rem; padding: .45rem .8rem; font-size: .95rem; }
    .exam-qnav { top: 8.5rem; right: .75rem; }
}

/* ============================================================
   Utility overrides
   ============================================================ */
.bg-soft-primary { background: #eef6ff !important; color: var(--bs-primary) !important; }
.bg-soft-success { background: #d1f5ea !important; color: var(--bs-success) !important; }
.bg-soft-warning { background: #fef0d6 !important; color: #c47e16 !important; }
.bg-soft-danger  { background: #fde0de !important; color: #b8412c !important; }
.bg-soft-info    { background: #d8f0fa !important; color: #1d76a8 !important; }

.text-muted-2 { color: #65758b !important; }
.text-navy    { color: var(--bs-dark) !important; }

.divider {
    height: 1px; background: var(--bs-border-color); margin: 1.25rem 0;
}

.qr-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .55rem; border-radius: .35rem;
    background: #eef6ff; color: var(--bs-primary);
    font-family: 'SFMono-Regular', Consolas, monospace; font-weight: 700; font-size: .8rem;
}

/* Slima-style hero decoration dots */
.dot-decor {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(47, 125, 244, .3);
}
.dot-decor.green { background: rgba(10, 179, 156, .3); }

/* === Reduced motion: disable decorative animations === */
@media (prefers-reduced-motion: reduce) {
    .typewrite-cursor { animation: none; }
    .counter, .counter * { transition: none !important; animation: none !important; }
    .category-card, .quick-action, .comp-card, .card-soft { transition: none !important; }
}
.competition-info{max-width:1050px;margin:auto}.competition-card{border:1px solid #e4eaf2;border-radius:1.25rem;background:#fff;box-shadow:0 12px 32px #1c375a17}.competition-hero{color:#fff;background:linear-gradient(125deg,#1554b7,#2f7df4 65%,#62adff)}.competition-kicker{color:#dbeaff;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.competition-hero h1{font-size:clamp(1.55rem,3vw,2.25rem)}.competition-description{color:#e7f1ff;font-size:.93rem}.competition-hero-icon{display:inline-grid;place-items:center;width:105px;height:105px;border:2px solid #ffffff40;border-radius:28px;background:#ffffff20}.competition-hero-icon i{font-size:3.1rem}.competition-heading{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem}.competition-heading>span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;color:#fff;background:var(--bs-primary);font-weight:800}.competition-heading h2{margin:0;color:#1b304e;font-size:.96rem;font-weight:800}.competition-heading p{margin:.1rem 0 0;color:#7b8798;font-size:.73rem}.competition-facts .bg-light{border-left:3px solid var(--bs-primary);background:#f5f8fc!important}.competition-start{padding:1rem;border:1px solid #dce7f5;border-radius:1rem;background:#f8fbff}.competition-token{position:relative}.competition-token>i{position:absolute;z-index:1;left:1rem;top:50%;color:#73849b;transform:translateY(-50%)}.competition-token input{height:50px;padding-left:2.7rem;border:2px solid #d9e2ee;border-radius:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.competition-start-btn{min-height:46px;border-radius:.75rem;font-weight:800}@media(max-width:768px){.competition-hero-icon{display:none}.competition-start-btn{width:100%}}

.admin-content .settings-page { width: 100%; max-width: none; }

/* AI question generator */
.ai-question-page { width: 100%; max-width: none; }
.ai-page-heading { align-items: center; }
.ai-stepper { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }
.ai-step { display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border:1px solid var(--border); border-radius:14px; background:#fff; color:var(--text-muted); }
.ai-step > span { width:2rem; height:2rem; display:grid; place-items:center; flex:none; border-radius:50%; background:#edf1f7; font-weight:800; }
.ai-step strong,.ai-step small { display:block; }
.ai-step small { font-size:.75rem; }
.ai-step.active { border-color:rgba(47,125,244,.3); color:var(--navy); }
.ai-step.active > span { color:#fff; background:var(--primary); }
.ai-generator-card { padding:1.5rem; }
.ai-card-title { display:flex; gap:.85rem; align-items:center; margin-bottom:1.25rem; }
.ai-card-title h2 { font-size:1.05rem; margin:0 0 .2rem; }
.ai-card-title p { color:var(--text-muted); font-size:.875rem; margin:0; }
.ai-card-icon { width:2.7rem; height:2.7rem; display:grid; place-items:center; border-radius:12px; color:var(--primary); background:rgba(47,125,244,.1); font-size:1.2rem; }
.ai-form-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border); }
.ai-guide-card { position:sticky; top:5.5rem; }
.ai-guide-list { margin:1rem 0; padding-left:1.2rem; color:var(--text-muted); }
.ai-guide-list li { margin-bottom:.65rem; }
.ai-example { background:#f6f8fc; border-radius:12px; padding:1rem; font-size:.85rem; }
.ai-example p { margin:.35rem 0 0; color:var(--text-muted); }
.ai-review-section { margin-top:2rem; scroll-margin-top:5rem; }
.ai-review-toolbar { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }
.ai-draft-card { overflow:hidden; }
.ai-draft-head { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--border); background:#fbfcfe; }
.ai-draft-body { padding:1.25rem; }
.ai-question-number { width:2.3rem; height:2.3rem; display:grid; place-items:center; border-radius:10px; background:var(--navy); color:#fff; font-weight:800; }
.ai-approve-switch { display:flex; align-items:center; gap:.45rem; margin:0; font-weight:700; color:#16834a; }
.ai-option { height:100%; display:flex; align-items:flex-start; gap:.7rem; padding:.75rem; border:1px solid var(--border); border-radius:10px; background:#fff; }
.ai-option > span { width:1.7rem; height:1.7rem; flex:none; display:grid; place-items:center; border-radius:7px; background:#edf1f7; font-weight:800; }
.ai-option.correct { border-color:#77c99b; background:#f0fbf5; }
.ai-option.correct > span { background:#198754; color:#fff; }
.ai-option > i { margin-left:auto; color:#198754; }
.ai-empty-review { text-align:center; padding:3rem 1rem; border:1px dashed #cbd5e1; border-radius:16px; color:var(--text-muted); }
.ai-empty-review > i { font-size:2rem; color:var(--primary); }
.ai-empty-review h2 { color:var(--navy); font-size:1.1rem; margin:.7rem 0 .3rem; }
@media (max-width: 767.98px) {
 .ai-stepper { grid-template-columns:1fr; }
 .ai-page-heading,.ai-review-toolbar,.ai-form-actions { align-items:stretch; flex-direction:column; }
 .ai-page-heading .d-flex,.ai-review-toolbar .d-flex { width:100%; }
 .ai-page-heading .btn,.ai-review-toolbar .btn,.ai-form-actions .btn { flex:1; }
 .ai-generator-card { padding:1rem; }
 .ai-draft-head { align-items:flex-start; }
}
.ai-review-shell { display:grid; gap:1rem; }
.ai-review-toolbar-card { display:grid; grid-template-columns:minmax(0,1.5fr) auto auto; gap:1rem; align-items:center; padding:1rem 1.25rem; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); box-shadow:var(--shadow-sm,0 10px 30px rgba(15,30,60,.05)); }
.ai-review-metrics { display:flex; flex-wrap:wrap; gap:.75rem; }
.ai-review-metric { min-width:100px; padding:.75rem .9rem; border-radius:14px; background:#fff; border:1px solid rgba(15,30,60,.08); display:flex; flex-direction:column; }
.ai-review-metric strong { font-size:1.1rem; color:var(--navy); line-height:1.1; }
.ai-review-metric small { color:var(--text-muted); }
.ai-review-metric.danger strong { color:#c0392b; }
.ai-review-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.65rem; }
.ai-review-list { display:grid; gap:1rem; }
.ai-review-card { padding:1rem 1.1rem; border:1px solid rgba(15,30,60,.08); transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease; }
.ai-review-card.is-muted { opacity:.78; }
.ai-review-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid rgba(15,30,60,.08); }
.ai-review-card-meta { display:flex; align-items:flex-start; gap:.9rem; min-width:0; }
.ai-review-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.35rem; }
.ai-review-card-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.75rem; }
.ai-delete-selector { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .65rem; border:1px solid rgba(15,30,60,.08); border-radius:999px; background:#fff; color:var(--text-muted); font-size:.85rem; }
.ai-delete-selector input { cursor:pointer; }
.ai-review-card-body { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1rem; }
.ai-review-column { min-width:0; }
.ai-review-textarea { min-height:136px; border-radius:14px; resize:vertical; background:#fbfcfe; }
.ai-review-textarea-sm { min-height:112px; }
.ai-option-list { display:grid; gap:.55rem; }
.ai-review-answer-note { padding:.85rem 1rem; border-radius:14px; border:1px solid rgba(15,30,60,.08); background:#f8fafc; color:#41526a; font-size:.92rem; line-height:1.55; }
@media (max-width: 1199.98px) {
 .ai-review-toolbar-card { grid-template-columns:1fr; }
 .ai-review-actions { justify-content:flex-start; }
}
@media (max-width: 767.98px) {
 .ai-review-toolbar-card { padding:1rem; border-radius:16px; }
 .ai-review-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .ai-review-metric { min-width:0; padding:.65rem .7rem; }
 .ai-review-actions { display:grid; grid-template-columns:1fr 1fr; }
 .ai-review-actions .btn:last-child { grid-column:1 / -1; }
 .ai-review-card { padding:.9rem; border-radius:16px; }
 .ai-review-card-head,.ai-review-card-controls,.ai-review-card-meta { flex-direction:column; align-items:stretch; }
 .ai-review-card-controls { justify-content:flex-start; }
 .ai-review-card-body { grid-template-columns:1fr; }
 .ai-delete-selector,.ai-approve-switch { justify-content:space-between; width:100%; }
 .ai-question-number { width:2rem; height:2rem; }
}
.activation-stat { border:1px solid rgba(15,30,60,.08); }
.activation-stat.pending { background:linear-gradient(180deg,#fffaf0 0%,#ffffff 100%); }
.activation-stat.active { background:linear-gradient(180deg,#f3fcf7 0%,#ffffff 100%); }
.activation-stat.total { background:linear-gradient(180deg,#f3f8ff 0%,#ffffff 100%); }
.activation-history-card { border:1px solid rgba(15,30,60,.08); }
.activation-history-list { max-height:980px; overflow:auto; }
.activation-history-item { padding:1rem; border-bottom:1px solid rgba(15,30,60,.08); }
.activation-history-item:last-child { border-bottom:0; }
.activation-history-icon { width:2rem; height:2rem; border-radius:999px; display:grid; place-items:center; flex:none; }
.activation-history-icon.success { background:#dff7e8; color:#198754; }
.activation-history-icon.danger { background:#fde0de; color:#b8412c; }
@media (max-width: 767.98px) {
 .activation-page .page-header { align-items:flex-start; }
 .activation-history-list { max-height:none; }
}