/* ==========================================================================
   Portal siswa & halaman ujian (mobile-first, ringan)
   ========================================================================== */
.stu-body { min-height: 100vh; background: var(--cbt-bg); }
.stu-wrap { max-width: 1100px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.stu-header { position: sticky; top: 0; z-index: 1020; background: color-mix(in srgb, var(--cbt-surface) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cbt-border); padding: .6rem 0; }

/* ---------- Login siswa ---------- */
.stu-login {
    min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem;
    background: radial-gradient(900px 500px at 0% 0%, rgba(99, 102, 241, .35), transparent 60%),
                radial-gradient(800px 500px at 100% 100%, rgba(147, 51, 234, .3), transparent 55%),
                linear-gradient(160deg, #1e1b4b, #312e81);
}
.stu-login-card { width: 100%; max-width: 420px; background: var(--cbt-surface); border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .6); overflow: hidden; }
.stu-login-head { padding: 2rem 2rem 1.25rem; text-align: center; }
.stu-login-head .brand-logo { width: 64px; height: 64px; border-radius: 18px; font-size: 1.8rem; margin: 0 auto 1rem; }
.stu-login-head h1 { font-size: 1.45rem; font-weight: 800; margin-bottom: .25rem; }
.stu-login-body { padding: 0 2rem 2rem; }
.stu-login .form-control { padding-top: .85rem; padding-bottom: .85rem; font-size: 1.05rem; }
.pin-input { letter-spacing: .5em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.stu-login-foot { text-align: center; color: rgba(255, 255, 255, .7); font-size: .8rem; margin-top: 1.25rem; }
.stu-login-foot a { color: #fff; font-weight: 600; }

/* ---------- Kartu ujian ---------- */
.exam-card { border-radius: 18px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.exam-card:hover { transform: translateY(-2px); box-shadow: var(--cbt-shadow); }
.exam-card .ec-head { padding: 1.1rem 1.25rem; display: flex; gap: .9rem; align-items: center; }
.exam-card .ec-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.exam-card .ec-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: var(--cbt-text-2); padding: 0 1.25rem 1rem; }
.exam-card .ec-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.exam-card .ec-foot { padding: .9rem 1.25rem; border-top: 1px solid var(--cbt-border); background: var(--cbt-surface-2); display: flex; align-items: center; gap: .75rem; }

/* ---------- Konfirmasi ---------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.info-grid .ig { padding: .8rem 1rem; border-radius: 12px; background: var(--cbt-surface-2); border: 1px solid var(--cbt-border); }
.info-grid .ig small { display: block; color: var(--cbt-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.info-grid .ig b { font-size: 1rem; }
.rules li { margin-bottom: .35rem; }
.token-input { font-size: 1.6rem; letter-spacing: .45em; text-align: center; font-weight: 800; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: .8rem; }

/* ==========================================================================
   HALAMAN UJIAN
   ========================================================================== */
.ex-body { background: var(--cbt-bg); min-height: 100vh; -webkit-user-select: none; user-select: none; }
.ex-body input, .ex-body textarea, .ex-body select { -webkit-user-select: text; user-select: text; }
.ex-top { position: sticky; top: 0; z-index: 1030; background: var(--cbt-surface); border-bottom: 1px solid var(--cbt-border); }
.ex-top .inner { max-width: 1200px; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: .75rem; }
.ex-title { min-width: 0; flex: 1; line-height: 1.25; }
.ex-title strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-title small { color: var(--cbt-muted); }
.ex-timer { display: flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 12px; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; background: var(--cbt-primary-soft); color: var(--cbt-primary); white-space: nowrap; }
.ex-timer.warn { background: rgba(245, 158, 11, .15); color: #b45309; }
.ex-timer.danger { background: rgba(244, 63, 94, .14); color: #e11d48; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .65; } }
.ex-net { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .3rem .6rem; border-radius: 999px; white-space: nowrap; }
.ex-net.ok { background: rgba(16, 185, 129, .12); color: #047857; }
.ex-net.saving { background: var(--cbt-primary-soft); color: var(--cbt-primary); }
.ex-net.off { background: rgba(244, 63, 94, .12); color: #e11d48; }
[data-bs-theme="dark"] .ex-net.ok { color: #6ee7b7; }
[data-bs-theme="dark"] .ex-timer.warn { color: #fcd34d; }

.ex-main { max-width: 1200px; margin: 0 auto; padding: 1rem; display: grid; grid-template-columns: 1fr 300px; gap: 1rem; align-items: start; }
.ex-qcard { border-radius: 18px; }
.ex-qhead { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--cbt-border); }
.ex-qnum { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--cbt-primary); color: #fff; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }
.ex-qbody { padding: 1.25rem; font-size: var(--q-size, 1rem); min-height: 280px; }
.ex-qfoot { display: flex; gap: .5rem; align-items: center; padding: .9rem 1.25rem; border-top: 1px solid var(--cbt-border); background: var(--cbt-surface-2); border-radius: 0 0 18px 18px; }
.btn-doubt.active { background: #f59e0b; border-color: #f59e0b; color: #fff; }

.ex-nav { position: sticky; top: 76px; border-radius: 18px; }
.ex-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.ex-grid button {
    aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--cbt-border); background: var(--cbt-surface);
    font-weight: 700; font-size: .9rem; color: var(--cbt-text-2); position: relative; padding: 0;
}
.ex-grid button.answered { background: var(--cbt-primary); border-color: var(--cbt-primary); color: #fff; }
.ex-grid button.doubt { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.ex-grid button.current { box-shadow: 0 0 0 3px rgba(var(--cbt-primary-rgb), .35); border-color: var(--cbt-primary); }
.ex-grid button.unsynced::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #e11d48; }
.ex-legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .75rem; color: var(--cbt-muted); }
.ex-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: .3rem; vertical-align: -1px; border: 1.5px solid var(--cbt-border); }

.ex-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .82); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 1rem; color: #fff; text-align: center; }
.ex-overlay.show { display: flex; }
.ex-overlay .box { max-width: 440px; }
.ex-overlay .bi { font-size: 3.5rem; }

@media (max-width: 991.98px) {
    .ex-main { grid-template-columns: 1fr; padding: .75rem; }
    .ex-nav { display: none; }
    .ex-grid { grid-template-columns: repeat(6, 1fr); }
    .ex-qbody { padding: 1rem; }
    .ex-qfoot .btn span.lbl { display: none; }
}
@media (min-width: 992px) { .ex-only-mobile { display: none !important; } }