/* ============================================================
   SSB Quiz — design system
   ============================================================ */:root {
  --brand:#4f46e5; --brand2:#7c3aed; --brand-soft:#eef2ff; --accent:#f97316;
  --ok:#16a34a; --bad:#dc2626; --warn:#f59e0b; --info:#0ea5e9;
  --radius:14px; --radius-sm:10px;
  --surface:#ffffff; --page:#f4f6fb; --line:#e8ebf3; --muted:#6b7280; --ink:#0f172a;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);
  --shadow-lg:0 10px 40px rgba(16,24,40,.12);
  --bs-body-font-family:"Inter","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-primary:#4f46e5; --bs-primary-rgb:79,70,229; --bs-link-color:#4f46e5; --bs-link-color-rgb:79,70,229; --bs-link-hover-color:#4338ca;
}
html {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body {font-family:var(--bs-body-font-family);background:var(--page);min-height:100vh;font-size:.95rem;color:var(--bs-body-color);letter-spacing:-.005em}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-weight:700;letter-spacing:-.02em}
.text-secondary {color:var(--muted)!important}
.text-brand {color:var(--brand)}
::selection {background:rgba(79,70,229,.18)}


/* ---------- buttons ---------- */.btn {border-radius:var(--radius-sm);font-weight:600;letter-spacing:-.01em;transition:transform .12s,box-shadow .15s,background .15s,filter .15s}
.btn-sm {border-radius:8px;font-size:.8rem;padding:.3rem .6rem}
.btn-lg {border-radius:12px;padding:.7rem 1.2rem;font-size:1.02rem}
.btn:active {transform:translateY(1px)}
.btn-primary {--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:#4338ca;--bs-btn-hover-border-color:#4338ca;--bs-btn-active-bg:#3730a3;--bs-btn-active-border-color:#3730a3}
.btn-outline-primary {--bs-btn-color:var(--brand);--bs-btn-border-color:#c7d2fe;--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);--bs-btn-active-bg:#4338ca}
.btn-grad {background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:0;box-shadow:0 6px 16px -6px rgba(79,70,229,.6)}
.btn-grad:hover, .btn-grad:focus {color:#fff;filter:brightness(1.08);box-shadow:0 10px 22px -8px rgba(79,70,229,.7)}
.btn-light {--bs-btn-bg:var(--surface);--bs-btn-border-color:var(--line);--bs-btn-hover-bg:var(--brand-soft);--bs-btn-hover-border-color:var(--line)}


/* ---------- cards / surfaces ---------- */.card {border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface)}
.card-header {background:transparent;border-bottom:1px solid var(--line);padding:.9rem 1.1rem}
.modal-content {border-radius:18px;border:0;box-shadow:var(--shadow-lg)}
.modal-header {border-bottom:1px solid var(--line);padding:1rem 1.25rem}
.modal-footer {border-top:1px solid var(--line)}
.modal-backdrop.show {opacity:.45}
.alert {border-radius:12px;border:0;border-left:4px solid currentColor}
.alert-success {background:#ecfdf5;color:#065f46}
.alert-danger {background:#fef2f2;color:#991b1b}
.alert-warning {background:#fffbeb;color:#92400e}
.alert-info {background:#eff6ff;color:#1e40af}
.alert-secondary {background:#f1f5f9;color:#334155}


/* ---------- forms ---------- */.form-control, .form-select {border-radius:var(--radius-sm);border-color:var(--line);padding:.55rem .8rem;background-color:var(--surface)}
.form-control-lg, .form-select-lg {border-radius:12px;padding:.7rem 1rem}
.form-control:focus, .form-select:focus {border-color:#a5b4fc;box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.form-label {font-weight:600;font-size:.85rem;margin-bottom:.35rem}
.form-check-input:checked {background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus {box-shadow:0 0 0 4px rgba(79,70,229,.15);border-color:#a5b4fc}
.input-group-text {border-color:var(--line);background:var(--page)}


/* ---------- badges: soft pills ---------- */.badge {border-radius:999px;font-weight:600;padding:.38em .72em;letter-spacing:.01em}
.text-bg-success {background:#dcfce7!important;color:#166534!important}
.text-bg-primary {background:#e0e7ff!important;color:#3730a3!important}
.text-bg-danger {background:#fee2e2!important;color:#991b1b!important}
.text-bg-warning {background:#fef3c7!important;color:#92400e!important}
.text-bg-info {background:#e0f2fe!important;color:#075985!important}
.text-bg-secondary {background:#f1f5f9!important;color:#475569!important}
.text-bg-dark {background:#1f2937!important;color:#f9fafb!important}


/* ---------- tables ---------- */.table {--bs-table-bg:transparent;--bs-table-hover-bg:rgba(79,70,229,.035);margin-bottom:0}
.table>:not(caption)>*>* {vertical-align:middle;padding:.85rem 1rem;border-bottom-color:var(--line)}
.table thead th {font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);background:var(--page);border-bottom:1px solid var(--line);white-space:nowrap}
.table tbody tr:last-child>* {border-bottom:0}
.table-responsive {border-radius:var(--radius)}
.progress {background:var(--page);border-radius:999px}
.progress-bar {background:linear-gradient(90deg,var(--brand),var(--brand2))}


/* ---------- auth ---------- */.auth-bg {min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 10% -10%,#6366f1 0,transparent 60%),radial-gradient(900px 500px at 110% 110%,#f97316 0,transparent 55%),linear-gradient(135deg,#1e1b4b,#4c1d95)}
.auth-bg::before {content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.auth-bg .container {max-width:480px;position:relative}
.auth-card {padding:2rem;border:0;border-radius:22px;box-shadow:0 30px 80px -20px rgba(15,10,60,.55);backdrop-filter:blur(6px)}
@media(max-width:575px) {.auth-card {padding:1.4rem}
}
.auth-logo {height:76px;width:auto;display:block;margin:0 auto 1rem;filter:drop-shadow(0 6px 14px rgba(249,115,22,.35))}
.brand-mark {width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:grid;place-items:center;font-size:1.8rem;margin:0 auto 1rem;box-shadow:0 8px 20px rgba(79,70,229,.4)}


/* ---------- admin shell ---------- */.admin-shell {display:flex;min-height:100vh}
.sidebar {width:260px;background:#0f172a;background:linear-gradient(180deg,#0f172a 0%,#1e1b4b 100%);color:#fff;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.04)}
@media(min-width:992px) {.sidebar {position:sticky;top:0;height:100vh;overflow-y:auto}
}
.sidebar-brand {font-weight:800;font-size:1.15rem;padding:1.3rem 1.2rem 1.1rem;display:flex;align-items:center;gap:.6rem;letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:.75rem}
.sidebar .nav-link {color:rgba(226,232,240,.72);border-radius:10px;padding:.62rem .9rem;margin:0 .25rem 3px;display:flex;align-items:center;gap:.75rem;font-weight:500;font-size:.92rem;position:relative;transition:background .15s,color .15s}
.sidebar .nav-link i {font-size:1.05rem;opacity:.85}
.sidebar .nav-link:hover {background:rgba(255,255,255,.06);color:#fff}
.sidebar .nav-link.active {background:linear-gradient(135deg,rgba(99,102,241,.95),rgba(124,58,237,.95));color:#fff;font-weight:600;box-shadow:0 8px 20px -8px rgba(99,102,241,.8)}
.sidebar .nav-link.active i {opacity:1}
.sidebar-foot {margin-top:auto;padding:1rem 1.2rem 1.2rem;border-top:1px solid rgba(255,255,255,.06)}
.sidebar-foot .btn-outline-light {border-color:rgba(255,255,255,.18);color:#e2e8f0}
.sidebar-foot .btn-outline-light:hover {background:rgba(255,255,255,.08);color:#fff}
.admin-main {flex:1;min-width:0}
.topbar {display:flex;align-items:center;gap:.75rem;padding:.85rem 1.25rem;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.topbar h1 {font-size:1.15rem}
.content {padding:1rem}
@media(min-width:992px) {.content {padding:1.75rem 2rem}
}


/* ---------- stats ---------- */.stat-card {padding:1.15rem 1.2rem;display:flex;gap:1rem;align-items:center;transition:transform .15s,box-shadow .15s}
a:hover>.stat-card, .stat-card.hoverable:hover {transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-icon {width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;color:#fff;flex-shrink:0;box-shadow:0 8px 18px -8px currentColor}
.stat-num {font-size:1.75rem;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-label {font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:.3rem}
.g1 {background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.g2 {background:linear-gradient(135deg,#f59e0b,#f97316)}
.g3 {background:linear-gradient(135deg,#10b981,#06b6d4)}
.g4 {background:linear-gradient(135deg,#ec4899,#f43f5e)}
.g5 {background:linear-gradient(135deg,#64748b,#94a3b8)}


/* ---------- student ---------- */.student-nav {background:linear-gradient(90deg,#1e1b4b,#4338ca 60%,#6d28d9);color:#fff;box-shadow:0 4px 20px -8px rgba(30,27,75,.6)}
.student-nav .navbar-brand {color:#fff;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}
.quiz-card {padding:1.25rem;height:100%;display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.quiz-card::before {content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.quiz-card:hover {transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.quiz-card.live::before {background:linear-gradient(90deg,#10b981,#22c55e)}
.quiz-card.soon::before {background:linear-gradient(90deg,#0ea5e9,#6366f1)}
.quiz-card.done::before {background:#cbd5e1}
.quiz-card h5 {font-weight:700}
.cd {display:flex;gap:.45rem}
.cd .u {background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:12px;padding:.45rem .2rem;min-width:58px;text-align:center;line-height:1.1;box-shadow:0 6px 14px -6px rgba(79,70,229,.6)}
.cd .u b {font-size:1.35rem;display:block;font-variant-numeric:tabular-nums}
.cd .u small {font-size:.62rem;opacity:.85;text-transform:uppercase;letter-spacing:.06em}
.hero {background:radial-gradient(600px 200px at 100% 0,rgba(249,115,22,.35),transparent 60%),linear-gradient(135deg,#312e81,#6d28d9);color:#fff;border-radius:18px;padding:1.5rem;box-shadow:0 20px 40px -20px rgba(49,46,129,.7)}


/* ---------- exam ---------- */.exam-wrap {max-width:760px}
.exam-top {position:sticky;top:0;z-index:10;background:var(--page);padding:.7rem 0;border-bottom:1px solid var(--line)}
.timer-pill {font-variant-numeric:tabular-nums;font-weight:700;border-radius:999px;padding:.38rem .95rem;background:var(--brand-soft);color:var(--brand);display:inline-flex;align-items:center;gap:.4rem;border:1px solid #c7d2fe}
.timer-pill.low {background:#fee2e2;color:var(--bad);border-color:#fecaca;animation:pulse 1s infinite}
@keyframes pulse {50%{opacity:.55}}
.qtimer-bar {height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.qtimer-bar>div {height:100%;background:linear-gradient(90deg,var(--ok),var(--warn),var(--bad));transition:width 1s linear}
.q-card {padding:1.5rem}
.q-text {font-size:1.2rem;font-weight:650;white-space:pre-wrap;word-break:break-word;line-height:1.45}
.opt {display:flex;gap:.85rem;align-items:center;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--surface);color:var(--bs-body-color);border-radius:14px;padding:.9rem 1rem;margin-bottom:.65rem;transition:.15s;cursor:pointer;word-break:break-word;font-weight:500}
@media (hover:hover) and (pointer:fine) {.opt:hover:not(:disabled) {border-color:#a5b4fc;background:var(--brand-soft);transform:translateX(2px)}}   /* hover only for a real mouse: touch screens keep it stuck on whatever is under the last touch */
.opt .k {width:34px;height:34px;border-radius:10px;background:var(--page);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;flex-shrink:0}
.opt.sel {border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.opt.sel .k {background:var(--brand);color:#fff;border-color:var(--brand)}
.opt:disabled {cursor:default;opacity:.95}
.opt.right {border-color:var(--ok);background:rgba(22,163,74,.1)}
.opt.right .k {background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong {border-color:var(--bad);background:rgba(220,38,38,.08)}
.opt.wrong .k {background:var(--bad);color:#fff;border-color:var(--bad)}
.nav-dots {display:flex;gap:5px;flex-wrap:wrap}
.dot {width:11px;height:11px;border-radius:50%;background:#cbd5e1;display:inline-block;flex-shrink:0}
.dot.correct {background:var(--ok)}
.dot.wrong {background:var(--bad)}
.dot.timeout {background:var(--warn)}
.dot.skipped {background:#94a3b8}
.dot.pending {background:#e2e8f0}
.dot.cur {background:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.3)}
.score-ring {width:156px;height:156px;border-radius:50%;display:grid;place-items:center;margin:0 auto;font-weight:800;font-size:2rem;
  background:conic-gradient(var(--brand) 0,var(--brand2) calc(var(--p)*1%),var(--line) 0)}
.score-ring span {background:var(--surface);width:122px;height:122px;border-radius:50%;display:grid;place-items:center}
.review-q {padding:1.1rem;margin-bottom:.9rem}
.opt.rv {flex-wrap:wrap}
.rv-text {flex:1 1 8rem;min-width:0;overflow-wrap:anywhere}
.rv-tags {white-space:nowrap}
.rv-tags:empty {display:none}
.review-q.wrong {border-left:4px solid var(--bad)}
.review-q.correct {border-left:4px solid var(--ok)}
.review-q.timeout, .review-q.skipped {border-left:4px solid var(--warn)}


/* ---------- live tracking ---------- */.pulse-dot {display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:ring 1.6s infinite}
@keyframes ring {0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.live-bar {display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;padding:.85rem 1rem}
.live-chip {display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;padding:.35rem .75rem;border-radius:999px;background:#ecfdf5;color:#166534;border:1px solid #bbf7d0;font-variant-numeric:tabular-nums}
.legend {display:flex;flex-wrap:wrap;gap:.9rem;font-size:.78rem;color:var(--muted);font-weight:500}
.legend span {display:inline-flex;align-items:center;gap:.35rem}
.sec-head {display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.sec-head h2 {font-size:1rem;margin:0;display:flex;align-items:center;gap:.5rem}
.sec-head .ic {width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:1rem}
.count-pill {font-size:.75rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;background:var(--page);border:1px solid var(--line);color:var(--muted)}
.count-pill b {color:var(--ink)}
.live-table {table-layout:fixed;min-width:940px;width:100%}
.live-table td {overflow:hidden}
.live-table td.live-act {overflow:visible;white-space:normal}
.live-table td.live-act .btn {margin:.1rem 0}
.who {display:flex;align-items:center;gap:.7rem;min-width:0}
.who .nm {font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .sub {font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who>div {min-width:0}
.avatar {width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.82rem;flex-shrink:0;letter-spacing:.02em}
.st {display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:650;padding:.3rem .65rem;border-radius:999px;white-space:nowrap}
.st::before {content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st.not_started {background:#f1f5f9;color:#64748b}
.st.in_progress {background:#dcfce7;color:#15803d}
.st.in_progress::before {animation:pulse 1.2s infinite}
.st.completed {background:#e0e7ff;color:#4338ca}
.st.closed {background:#1f2937;color:#f9fafb}
.flags {display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.3rem}
.flag {font-size:.68rem;font-weight:700;padding:.12rem .45rem;border-radius:6px;background:#fee2e2;color:#b91c1c}
.flag.tab {background:#fef3c7;color:#92400e}
.flag.away {background:#e0e7ff;color:#3730a3}
.qpos {font-weight:700;font-variant-numeric:tabular-nums}
.qpos small {color:var(--muted);font-weight:500}
.tleft {display:inline-block;margin-top:.2rem;font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:6px;background:var(--brand-soft);color:var(--brand);font-variant-numeric:tabular-nums}
.tleft.low {background:#fee2e2;color:var(--bad)}
.mini-bar {height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:.45rem}
.mini-bar>div {height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .4s}
.tally {display:flex;gap:.3rem;font-variant-numeric:tabular-nums}
.tally span {min-width:30px;text-align:center;font-size:.78rem;font-weight:700;padding:.2rem .35rem;border-radius:7px}
.tally .c {background:#dcfce7;color:#15803d}
.tally .w {background:#fee2e2;color:#b91c1c}
.tally .t {background:#fef3c7;color:#92400e}
.score {font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.score small {color:var(--muted);font-weight:600;font-size:.78rem}
.score-pct {font-size:.72rem;font-weight:700;color:var(--muted)}
.icon-btn {width:32px;height:32px;padding:0;display:inline-grid;place-items:center;border-radius:9px}
.cell-blur {filter:blur(7px);user-select:none;pointer-events:none}
.col-eye {border:0;background:transparent;padding:0;margin-left:.35rem;color:#94a3b8;cursor:pointer;line-height:1;font-size:.85rem;vertical-align:-1px;border-radius:5px}
.col-eye:hover {color:var(--brand)}
.col-eye.on {color:var(--brand)}
.empty {padding:2.2rem 1rem;text-align:center;color:var(--muted)}
.empty i {font-size:1.8rem;display:block;margin-bottom:.4rem;opacity:.5}
.opt-edit {display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.opt-edit .form-check-input {width:1.4em;height:1.4em;flex-shrink:0}
@media(max-width:575px) {.q-text {font-size:1.05rem}
.cd .u {min-width:48px}
.content {padding:.85rem}
}
.brand-logo {height:1.9rem;width:auto}
.exam-warn {position:fixed;inset:0;z-index:2000;background:rgba(15,15,25,.82);display:grid;place-items:center;padding:1rem;backdrop-filter:blur(4px)}
.exam-warn .box {background:var(--surface);border-radius:18px;max-width:440px;padding:1.8rem;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.exam-warn .ic {font-size:2.6rem;color:#dc3545;line-height:1}
.exam-warn p {color:var(--muted);margin:.6rem 0 1.2rem}
.live-alert {position:fixed;top:1rem;right:1rem;z-index:2000;display:flex;flex-direction:column;gap:.5rem;max-width:360px}
.live-alert .alert {box-shadow:var(--shadow-lg)}
tr.row-violation>* {background:rgba(220,53,69,.07)!important}
tr.row-violation>td:first-child {box-shadow:inset 3px 0 0 var(--bad)}
body.exam-page, #exam {-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html, body {overscroll-behavior-y:none}


/* ============================================================
   Glass theme — frosted translucent surfaces over a soft colour mesh
   ============================================================ */:root {
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.7);
  --glass-shadow:0 8px 32px rgba(31,38,135,.10),inset 0 1px 0 rgba(255,255,255,.6);
  --surface:rgba(255,255,255,.62); --line:rgba(15,23,42,.08);
}
body {background:
  radial-gradient(900px 600px at 0% 0%,rgba(99,102,241,.28),transparent 60%),
  radial-gradient(800px 600px at 100% 10%,rgba(236,72,153,.18),transparent 60%),
  radial-gradient(900px 700px at 60% 100%,rgba(249,115,22,.16),transparent 60%),
  radial-gradient(700px 500px at 0% 100%,rgba(16,185,129,.14),transparent 60%),
  #eef1fb;background-attachment:fixed}
.card, .modal-content, .dropdown-menu {background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.modal-content {background:var(--glass-strong)}
.modal-backdrop.show {opacity:.3}
.modal.show {-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.table thead th {background:rgba(255,255,255,.35)}
.form-control, .form-select {background-color:rgba(255,255,255,.7)}
.input-group-text, .count-pill {background:rgba(255,255,255,.5)}
.btn-light {--bs-btn-bg:rgba(255,255,255,.6);--bs-btn-border-color:var(--glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}


/* sidebar + topbar: tinted glass */.sidebar {background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(30,27,75,.78));border-right:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.topbar {background:rgba(255,255,255,.45);border-bottom:1px solid var(--glass-line);box-shadow:0 1px 0 rgba(15,23,42,.04)}
.student-nav {background:linear-gradient(90deg,rgba(30,27,75,.85),rgba(67,56,202,.8) 60%,rgba(109,40,217,.8));
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.exam-top {background:rgba(238,241,251,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-line)}


/* auth: frosted card on the vivid background */.auth-card {background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.6)}


/* options / quiz bits get a lighter glass */.opt {background:rgba(255,255,255,.55);border-color:var(--glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.opt .k {background:rgba(255,255,255,.7)}
.score-ring span {background:var(--glass-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.exam-warn .box {background:var(--glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {.card, .modal-content {background:#fff}
}
.card.live-bar, .card.stat-card {flex-direction:row}
.stat-card>div:last-child {min-width:0}
@media(max-width:575px) {.stat-card {padding:.85rem;gap:.7rem}
.stat-icon {width:38px;height:38px;border-radius:11px;font-size:1.1rem}
.stat-num {font-size:1.4rem}
.stat-label {font-size:.66rem;letter-spacing:.03em;overflow-wrap:normal;word-break:normal;hyphens:none}
.sec-head {padding:.85rem}
.legend {gap:.6rem;font-size:.72rem}
}


/* ---------- mobile-first exam & student polish ---------- */html {-webkit-text-size-adjust:100%;text-size-adjust:100%}
body {overflow-x:hidden}
.exam-wrap {padding-left:max(.75rem,env(safe-area-inset-left));padding-right:max(.75rem,env(safe-area-inset-right))}
.exam-top {padding-top:max(.6rem,env(safe-area-inset-top))}
.exam-title {min-width:0;flex:1 1 auto}
.timer-pill {white-space:nowrap;flex-shrink:0}
.q-card {overflow-wrap:anywhere}
.opt {min-height:56px;touch-action:manipulation}
.opt>span:last-child {min-width:0;flex:1 1 auto}
.exam-actions {display:flex;gap:.6rem}
.exam-actions .btn {min-height:52px;touch-action:manipulation}
@media(hover:none) {.opt:hover:not(:disabled) {transform:none;background:var(--surface);border-color:var(--line)}
.opt.sel:hover {background:var(--brand-soft);border-color:var(--brand)}
}
@media(max-width:575px) {.exam-wrap {padding-top:.4rem!important;padding-bottom:0!important}
.exam-top {padding-bottom:.5rem;margin:0 -.75rem;padding-left:.75rem;padding-right:.75rem}
.timer-pill {padding:.28rem .7rem;font-size:.9rem}
.q-card {padding:1rem;margin-top:.75rem!important}
.q-text {font-size:1.05rem}
.opt {padding:.75rem .8rem;gap:.7rem;border-radius:12px;margin-bottom:.55rem}
.opt .k {width:32px;height:32px;border-radius:9px}
.nav-dots {gap:4px;margin-top:.75rem!important}
.dot {width:9px;height:9px}
.exam-actions {position:sticky;bottom:0;z-index:10;margin:.75rem -.75rem 0!important;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background:var(--page);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.exam-actions #btnPrev span {display:none}
.exam-actions #btnPrev {padding-left:1rem;padding-right:1rem}
.exam-warn {padding:.75rem;align-items:center;overflow-y:auto}
.exam-warn .box {padding:1.3rem;max-height:92dvh;overflow-y:auto}

  /* student dashboard / start / result */.student-nav .brand-logo {height:28px}
.student-nav .navbar-brand {font-size:1rem;margin-right:0;min-width:0}
.student-nav .container {flex-wrap:nowrap;gap:.5rem}
.hero {padding:1.1rem;border-radius:14px}
.quiz-card .btn:not(.btn-sm) {width:100%}
.auth-card {max-width:100%}
.btn-lg {--bs-btn-padding-y:.7rem}
input.form-control, select.form-select, textarea.form-control {font-size:16px}
}
@media(max-height:480px) and (orientation:landscape) {.exam-top {position:static}
.exam-actions {position:static}
}
.pending-banner {display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1.1rem;margin-bottom:1rem;border-radius:14px;
  background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1px solid #fed7aa;border-left:5px solid var(--accent);color:#7c2d12}
.pending-banner>i {font-size:1.4rem;color:var(--accent);line-height:1.2}
.pending-banner span {display:block;opacity:.9}


/* organisation name + portal sub-heading */.brand-head {text-align:center;margin-bottom:1rem}
.bh-org {font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.bh-portal {display:inline-block;margin-top:.35rem;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:.2rem .8rem}
.bi-text {display:flex;flex-direction:column;line-height:1.15;min-width:0}
.bi-text b {font-size:.92rem;font-weight:800;letter-spacing:-.01em;white-space:normal}
.bi-text small {font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.student-nav .navbar-brand {white-space:normal}
@media(max-width:575px) {.student-nav .navbar-brand {overflow:visible;text-overflow:clip;white-space:normal;font-size:.9rem}
.bi-text b {font-size:.78rem}
}


/* ---------- advanced admin ---------- */.nav-group {font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,232,240,.42);padding:1rem 1.3rem .35rem}
.nav-scroll {padding-bottom:.5rem}
.avatar {width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.dash-hero {display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.4rem 1.6rem;border-radius:20px;color:#fff;
  background:radial-gradient(500px 200px at 100% 0,rgba(249,115,22,.4),transparent 60%),linear-gradient(135deg,#1e1b4b,var(--brand) 70%,var(--brand2));box-shadow:0 20px 40px -22px rgba(49,46,129,.8)}
.dh-hi {font-size:1.45rem;font-weight:800;letter-spacing:-.02em}
.dh-sub {opacity:.8;font-size:.9rem}
.quick-actions {display:flex;flex-wrap:wrap;gap:.6rem}
.quick-actions a {display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--bs-body-color);text-decoration:none;font-weight:600;font-size:.88rem;transition:.15s;box-shadow:var(--shadow)}
.quick-actions a i {color:var(--brand)}
.quick-actions a:hover {transform:translateY(-2px);border-color:var(--brand);color:var(--brand)}
.chart-box {position:relative;height:260px;margin-top:.8rem}
.dropdown-menu {border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.dropdown-item i {margin-right:.5rem;opacity:.7}


/* two-line organisation name: main line large, second line smaller */.bn-main {display:block;font-weight:800;letter-spacing:-.015em;line-height:1.1}
.bn-sub {display:block;font-size:.6em;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.25;margin-top:.22em;opacity:.85}
.bh-org {font-size:1.5rem}
.bh-org .bn-sub {color:var(--accent);opacity:1}
.bi-text b {display:block;font-size:1rem;line-height:1.1}
.bi-text b .bn-sub {font-size:.58em;letter-spacing:.16em;margin-top:.15em}
@media(max-width:575px) {.bh-org {font-size:1.3rem}
.bi-text b {font-size:.88rem}
.bn-sub {letter-spacing:.14em}
}
.stat-card {padding:1rem 1.05rem;gap:.85rem}
.stat-label {word-break:normal;overflow-wrap:normal;hyphens:none;letter-spacing:.03em;line-height:1.25}
.stat-icon {width:44px;height:44px;font-size:1.2rem}
.portal-chip {display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:.18rem .65rem;vertical-align:middle;white-space:nowrap}


/* quick date chips + bulk bar */.quick-chips {display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.quick-chips .chip {border:1px solid var(--line);background:var(--surface);color:var(--brand);border-radius:999px;padding:.12rem .6rem;font-size:.74rem;font-weight:600;cursor:pointer;line-height:1.5}
.quick-chips .chip:hover {background:var(--brand-soft)}
.quick-chips .chip-clear {color:var(--muted);font-weight:500}
.bulk-bar {position:sticky;top:.5rem;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.55rem .8rem;margin-bottom:1rem;border-radius:14px;background:var(--brand);color:#fff;box-shadow:0 10px 30px #0003}
.bulk-bar .btn {--bs-btn-padding-y:.2rem;--bs-btn-font-size:.82rem}
.bulk-cb {width:1.15rem;height:1.15rem;accent-color:var(--brand);cursor:pointer}


/* question types in the exam */.q-context {position:relative;padding:1.45rem 1rem .8rem;margin-bottom:.9rem;border:1px solid #c8d1de;border-left:4px solid #64748b;background:#eef2f7;color:#334155;border-radius:0 12px 12px 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem;font-weight:400;line-height:1.55}
.q-image {margin:0 0 1rem;text-align:center}
.q-image img {max-width:100%;max-height:360px;border-radius:12px;border:1px solid var(--line)}
.q-hint {font-size:.85rem;color:var(--muted);margin:-.4rem 0 .7rem}
.opt.multi .k.tick {font-weight:800}
.fill-input {border-radius:14px;padding:.8rem 1rem}
.match-row, .drag-row {display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:center;margin-bottom:.6rem}
.match-left {font-weight:600;overflow-wrap:anywhere}
.order-item {display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;margin-bottom:.5rem;border:1.5px solid var(--line);border-radius:14px;background:var(--surface)}
.order-item .k {width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:700;flex:none}
.order-text {flex:1;min-width:0;overflow-wrap:anywhere}
.order-ctl {display:flex;gap:.3rem;flex:none}
.order-ctl .btn {min-width:38px}
.slot {min-height:44px;border:2px dashed var(--line);border-radius:12px;background:transparent;color:var(--muted);padding:.4rem .6rem;font-size:.92rem;width:100%}
.slot.filled {border-style:solid;border-color:var(--brand);background:var(--brand-soft);color:var(--bs-body-color);font-weight:600}
.slot.hot {border-color:var(--brand);background:var(--brand-soft)}
.drag-bank {display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding:.8rem;border-radius:14px;background:var(--surface);border:1px dashed var(--line);min-height:56px}
.chip-item {border:1.5px solid var(--brand);background:var(--surface);color:var(--bs-body-color);border-radius:999px;padding:.4rem .9rem;font-weight:600;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.chip-item.picked {background:var(--brand);color:#fff}
.chip-ghost {position:fixed;z-index:3000;transform:translate(-50%,-120%);pointer-events:none;background:var(--brand);color:#fff;border-radius:999px;padding:.4rem .9rem;font-weight:600;box-shadow:0 8px 24px #0004}
@media(max-width:575px) {.match-row, .drag-row {grid-template-columns:1fr}
.q-image img {max-height:260px}
}
.review-q.partial {border-left:4px solid var(--brand)}
.rv-line {padding:.45rem .2rem;overflow-wrap:anywhere}
.rv-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem .9rem;align-items:start;font-size:.95rem;overflow-wrap:anywhere}
.rv-h {font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
@media(max-width:575px) {.rv-grid {grid-template-columns:1fr 1fr;font-size:.9rem}
}

/* question editor panels */.pair-edit {display:grid;grid-template-columns:1fr auto 1fr auto;gap:.5rem;align-items:center;margin-bottom:.5rem}
.item-edit {display:grid;grid-template-columns:auto 1fr auto auto auto;gap:.4rem;align-items:center;margin-bottom:.5rem}
.item-edit .num {width:28px;height:28px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);border-radius:8px;font-weight:700;font-size:.8rem}
.ar-choice {display:flex;align-items:flex-start;gap:.6rem;padding:.45rem .2rem;cursor:pointer;line-height:1.35}
@media(max-width:575px) {.pair-edit {grid-template-columns:1fr 1fr auto}
.pair-edit>i {display:none}
.item-edit {grid-template-columns:auto 1fr auto auto auto}
}
.rv-pair {display:grid;grid-template-columns:1fr 1fr 1fr;gap:.35rem .9rem;padding:.55rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;font-size:.95rem}
.rv-pair:last-child {border-bottom:0}
.rv-pair.rv-head {padding:.2rem 0}
.rv-pair .lbl {display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
@media(max-width:575px) {.rv-pair {grid-template-columns:1fr}
}
.drag-label {margin-top:1rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.drag-label+.drag-bank {margin-top:.35rem}
.picking .slot:not(:disabled) {border-color:var(--brand);background:var(--brand-soft);animation:slotPulse 1.2s ease-in-out infinite}
@keyframes slotPulse {50%{box-shadow:0 0 0 4px #4f46e51f}}
@media(prefers-reduced-motion:reduce) {.picking .slot {animation:none}
}

/* mobile admin menu: the link list scrolls inside the drawer while the logo stays on top and Logout stays at the bottom */@media(max-width:991.98px) {.sidebar {height:100vh;height:100dvh;max-height:100dvh;overflow:hidden}
.sidebar .sidebar-brand, .sidebar .sidebar-foot {flex:none}
.sidebar .nav-scroll {flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.sidebar .sidebar-foot {padding-bottom:calc(1.2rem + env(safe-area-inset-bottom))}
}
.q-hint.q-guide {margin:0 0 .9rem;padding:.75rem 1rem;border-radius:14px;background:var(--brand-soft);border:1px solid var(--line);color:var(--bs-body-color);font-size:.92rem;line-height:1.55}
.q-guide ol {margin:.35rem 0 .4rem;padding-left:1.25rem}
.q-guide li {margin:.15rem 0}
.q-guide small {display:block;color:var(--muted)}
.q-marks {display:inline-block;margin-left:.45rem;padding:.08rem .55rem;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:.78rem;vertical-align:middle}


/* note shown above every question that is not a plain single-answer one */.q-hint.q-guide {margin:0 0 .9rem;padding:.8rem 1rem;border-radius:14px;background:#fff8e1;border:1px solid #f1d98a;border-left:5px solid #f5a623;color:#3b2f00;font-size:.95rem;line-height:1.55}
.q-guide .note-title {font-weight:800;margin-bottom:.25rem}
.q-guide ul {margin:.2rem 0 .35rem;padding-left:1.2rem}
.q-guide li {margin:.15rem 0}
.q-guide small {display:block;margin-top:.2rem;opacity:.85}
.q-tag {display:inline-block;margin-left:.3rem;padding:.08rem .55rem;border-radius:999px;background:#fff1cf;color:#8a5300;font-weight:700;font-size:.74rem;vertical-align:middle}
#qNum {display:flex;justify-content:space-between;align-items:center;gap:.6rem}
#qNum .q-marks {margin-left:auto;white-space:nowrap;flex:none}
#qNum .qn-left {min-width:0}


/* Home button that asks for attention (result page): a soft ring pulse and a small bounce */.home-pulse { position: relative; font-weight: 600; animation: homeBounce 1.6s ease-in-out infinite; }
.home-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #ffc107; animation: homeRing 1.6s ease-out infinite; pointer-events: none; }
@keyframes homeRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes homeBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {.home-pulse, .home-pulse::after { animation: none; }
}


/* Gentle how-to hints on answer widgets: they repeat for about 15 seconds, then stop by themselves (or as soon as the question is answered) */.nudge-arrow { position: relative; animation: arrowNudge 1.5s ease-in-out 10; }
.nudge-arrow::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--brand); animation: nudgeRing 1.5s ease-out 10; pointer-events: none; }
@keyframes arrowNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes nudgeRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }
.order-item.just-moved { animation: movedFlash .9s ease-out 1; }
@keyframes movedFlash { 0% { background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(79,70,229,.22); } 100% { background: var(--surface); box-shadow: none; } }
.nudge-select { animation: selectGlow 1.5s ease-in-out 10; }
@keyframes selectGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,0); border-color: var(--line); } 50% { box-shadow: 0 0 0 4px rgba(79,70,229,.22); border-color: var(--brand); } }
.multi-wave .opt.multi .k { animation: tickWave 3s ease-in-out 5; animation-delay: calc(var(--i, 0) * .22s); }
@keyframes tickWave { 0%, 35%, 100% { transform: scale(1); } 15% { transform: scale(1.18); background: var(--brand-soft); border-color: var(--brand); color: var(--brand); } }
@media (prefers-reduced-motion: reduce) {.nudge-arrow, .nudge-arrow::after, .order-item.just-moved, .nudge-select, .multi-wave .opt.multi .k { animation: none; }
}


/* "How to answer" banner: a warm amber tip card, clearly different from the white/indigo answer options below it. */.q-note { margin: 0 0 1rem; border-radius: 14px; background: #fff6df; border: 1px solid #f3d48a; box-shadow: 0 1px 2px rgba(146,100,0,.08); overflow: hidden; }
.q-note[hidden] { display: none; }
.qn-head { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 56px; padding: .6rem .75rem; border: 0; background: none; color: #4a3500; text-align: left; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.qn-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f5b81c; color: #fff; font-size: 1rem; box-shadow: 0 2px 6px rgba(245,184,28,.45); }
.qn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qn-label { font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #9a6a00; }
.qn-title { font-size: .92rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.qn-more { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .6rem; border-radius: 999px; background: #fff; border: 1px solid #f0cd7a; color: #8a5d00; font-size: .76rem; font-weight: 700; }
.qn-chev { transition: transform .2s; font-size: .7rem; }
.qn-head[aria-expanded=true] .qn-chev { transform: rotate(180deg); }
.qn-body { padding: .1rem .9rem .8rem 3.6rem; font-size: .88rem; line-height: 1.55; color: #3d2e00; border-top: 1px dashed #efd596; margin: 0 .75rem; padding-left: 2.85rem; padding-top: .55rem; }
.qn-body[hidden] { display: none; }
.qn-body ul { margin: 0 0 .35rem; padding-left: 1.05rem; }
.qn-body li + li { margin-top: .2rem; }
.qn-body small { display: block; color: #7a5600; }
@media (max-width: 380px) {.qn-head { gap: .55rem; padding: .5rem .6rem; }
.qn-title { font-size: .86rem; }
.qn-ic { width: 30px; height: 30px; }
.qn-body { padding-left: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {.qn-chev { transition: none; }
}
.q-tag[role=button] { cursor: pointer; }


/* Information shown before a question (scenario / statements): muted slate card, labelled, so it is not mistaken for the question itself */.q-context::before { content: "ℹ जानकारी"; position: absolute; top: .4rem; left: 1rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: #64748b; }

/* Assertion (A) and Reason (R): two information cards in different colours */.ar-text { display: flex; flex-direction: column; gap: .55rem; white-space: normal; font-weight: 500; }
.ar-stmt { padding: .6rem .8rem; border-radius: 12px; border: 1px solid; border-left-width: 4px; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ar-lab { display: block; margin-bottom: .1rem; font-size: .74rem; font-weight: 800; letter-spacing: .03em; }
.st-a { background: #e8f3ff; border-color: #a9cdf3; border-left-color: #2b7de9; color: #12304f; }
.st-a .ar-lab { color: #1b5fb8; }
.st-r { background: #e5f7f3; border-color: #9bdacd; border-left-color: #0f9d8a; color: #0d3d37; }
.st-r .ar-lab { color: #0b7a6b; }

/* numbered / "कथन 1" statements: violet cards; the real question lines stay plain and bold */.st-s { background: #f1ebff; border-color: #cdbcf5; border-left-color: #7c4dff; color: #2b1a5a; }
.st-s .ar-lab { color: #5b32d6; }
.ar-text .q-stem { white-space: pre-wrap; font-weight: 650; overflow-wrap: anywhere; }
.st-s { display: flex; gap: .6rem; align-items: baseline; }
.st-s .ar-lab { flex: none; margin: 0; font-size: .9rem; }
.st-s .ar-body { flex: 1; min-width: 0; }

/* The instruction line above every question ("सही क्रम चुनें"): small brand-coloured text with an accent bar - clearly a direction, not the question */.q-lead { display: flex; align-items: center; gap: .5rem; margin: .45rem 0 .6rem; font-size: .84rem; font-weight: 800; letter-spacing: .01em; line-height: 1.3; color: var(--brand); }
.q-lead[hidden] { display: none; }
.q-lead::before { content: ""; flex: none; width: 4px; height: 1.15em; border-radius: 4px; background: linear-gradient(180deg, var(--brand), #c026d3); }


/* ================= Quiz forms: New / Edit quiz and Create from JSON ================= */.qf-wrap { container-type: inline-size; container-name: qf; }
.qf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.qf-cell { min-width: 0; }
@container qf (min-width: 760px) {.qf-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.qf-details { grid-column: span 7; }
.qf-schedule { grid-column: span 5; }
.qf-marks { grid-column: span 12; }
.qf-exam { grid-column: span 5; }
.qf-access { grid-column: span 7; }
.qf-cert { grid-column: span 12; }
}
.qf-sec { height: 100%; margin: 0; padding: 0; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.qf-head { float: none; width: 100%; display: flex; align-items: center; gap: .75rem; margin: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; background: linear-gradient(180deg, var(--brand-soft), transparent); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.qf-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand), #7c3aed); box-shadow: 0 4px 10px rgba(79,70,229,.28); }
.qf-ic-lg { width: 44px; height: 44px; border-radius: 13px; font-size: 1.25rem; }
.qf-ttl { flex: 1; min-width: 0; }
.qf-ttl small { display: block; margin-top: .15rem; font-size: .76rem; font-weight: 500; color: var(--muted); }
.qf-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .74rem; font-weight: 800; color: var(--brand); background: var(--brand-soft); }
.qf-sec > .row { margin: 0; padding: 1rem .75rem 1rem; }
.qf-sec .form-label { font-size: .86rem; font-weight: 650; margin-bottom: .3rem; }
.qf-sec .form-control, .qf-sec .form-select { border-radius: 10px; }
.qf-sec .form-text, .qf-sec .text-secondary { font-size: .8rem; }

/* switches become tidy rows: title on top, hint underneath */.qf-sec .form-check.form-switch { display: block; margin-bottom: .5rem; padding: .6rem .75rem .6rem 3.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--page); transition: border-color .15s, background .15s; }
.qf-sec .form-check.form-switch:hover { border-color: #a5b4fc; }
.qf-sec .form-check.form-switch .form-check-input { margin-left: -2.35rem; margin-top: .15rem; }
.qf-sec .form-check.form-switch .form-check-input:checked ~ .form-check-label { color: var(--bs-body-color); }
.qf-sec .form-check-label small { display: block; margin-top: .1rem; font-weight: 400; }
.qf-sec .border.rounded.bg-body-tertiary { border-radius: 12px !important; }
.qf-sec .quick-chips { margin-top: .4rem; }

/* modal */.qf-modal { border: 0; border-radius: 20px; overflow: hidden; }
.qf-mhead { align-items: center; gap: .85rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--brand-soft), transparent); }
.qf-mbody { padding: 1.1rem 1.25rem; background: var(--page); }
.qf-mfoot { padding: .75rem 1.25rem; background: var(--surface); }
@media (max-width: 575px) {.qf-mbody { padding: .75rem; }
.qf-mhead { padding: .85rem; }
.qf-mfoot .btn { flex: 1 1 100%; }
}

/* create from JSON page */.qf-intro { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(120deg, var(--brand-soft), var(--surface)); }
.qf-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; font-weight: 600; }
.qf-steps li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .35rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.qf-steps b, .qf-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: .78rem; background: linear-gradient(135deg, var(--brand), #7c3aed); flex: none; }
.qf-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.qf-card-h { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; background: linear-gradient(180deg, var(--brand-soft), transparent); }
.qf-card-h h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.qf-card-h p { margin: .15rem 0 0; font-size: .8rem; color: var(--muted); }
.qf-card-b { padding: 1rem; }
.qf-stephead { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 .75rem; font-size: 1.05rem; font-weight: 700; }
.qf-state { flex: none; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.qf-state.ok { background: #e3f6ea; color: #166534; }
.qf-state.warn { background: #fff4d6; color: #92580a; }
.qf-actions { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgba(15,23,42,.1); }
@media (min-width: 1200px) {.qf-side { position: sticky; top: 1rem; }
}

/* prompt options */.qf-mini { margin: 0 0 .6rem; padding: .55rem .75rem .65rem; border: 1px solid var(--line); border-radius: 12px; background: var(--page); min-width: 0; }
.qf-mini legend { float: none; width: auto; margin: 0; padding: 0 .35rem; font-size: .9rem; font-weight: 700; }
.qf-mini.is-off { opacity: .55; }
.qf-tag { margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: var(--brand); background: var(--brand-soft); vertical-align: middle; }
.qf-seg { display: flex; gap: .4rem; }
.qf-seg .btn { flex: 1; padding: .35rem .5rem; font-size: .85rem; font-weight: 600; border-radius: 10px; }
.qf-pct { min-width: 3.2rem; text-align: right; color: var(--brand); }
.qf-body { padding: 1rem .75rem; }
.qf-body > :last-child { margin-bottom: 0 !important; }
.qf-sec .form-check.form-switch .form-check-label { display: block; cursor: pointer; }


/* the heading is drawn as the card's top: no border line running behind the legend */.qf-sec { border-top: 0; border-radius: 0 0 16px 16px; }
.qf-head { border: 1px solid var(--line); border-bottom-color: var(--line); border-radius: 16px 16px 0 0; }
@media (max-width: 575px) {.qf-actions { padding: .6rem .75rem; gap: .5rem; position: static; box-shadow: none; }
.qf-actions .form-check > .text-secondary { display: none; }
.qf-actions > .ms-auto { width: 100%; margin-left: 0 !important; }
.qf-actions > .ms-auto .btn { flex: 1 1 0; }
.qf-steps li { font-size: .78rem; }
}


/* card outline drawn as a ring so the heading sits flush with the edges (no notch where the legend crosses a border) */.qf-sec { border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(15,23,42,.05); }
.qf-head { border: 0; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; }
@media (max-width: 575px) {.qf-mfoot { gap: .5rem !important; }
.qf-mfoot .form-check .text-secondary { display: none; }
.qf-mfoot .btn { flex: 1 1 calc(50% - .25rem); padding: .55rem .5rem; font-size: .9rem; }
.qf-mfoot .btn-grad { flex-basis: 100%; order: -1; }
}


/* sections are plain grouped cards now (role="group"), so the heading is simply the top of the card */.qf-sec { display: block; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.qf-head { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }


/* progress dots that jump to a question (when students may change answers) */.dot.jump { position: relative; cursor: pointer; }
.dot.jump::after { content: ""; position: absolute; inset: -7px; }
.dot.jump:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }


/* ================= Results page: toolbar and table, desktop + phone ================= */.rs-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.rs-item { flex: 0 0 auto; }
.rs-item .btn-group { width: auto !important; }
.rs-act { white-space: nowrap; text-align: right; }
.rs-act .btn { margin-left: .15rem; }
@media (max-width: 575px) {.rs-bar { display: grid; grid-template-columns: 1fr 1fr; }
.rs-sum, .rs-cert { grid-column: 1 / -1; }
.rs-item .btn-group { width: 100% !important; }
.rs-item .btn-group > .btn:first-child { flex: 1 1 auto; }
}
.rs-wrap { container: rs / inline-size; }
.rs-meta { display: none; }
@container rs (max-width: 899.98px) {.rs-table td.rs-x { display: none !important; }
.rs-meta { display: block; }
.rs-table thead { display: none; }
.rs-table, .rs-table tbody { display: block; width: 100%; }
.rs-table tr { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "rank who score" ". pct pct" "act act act"; gap: .3rem .6rem; padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
.rs-table tr:last-child { border-bottom: 0; }
.rs-table td { display: block; padding: 0; border: 0; background: transparent; }
.rs-table td.d-none { display: none !important; }
.rs-rank { grid-area: rank; color: var(--muted); font-weight: 700; }
.rs-who { grid-area: who; min-width: 0; overflow-wrap: anywhere; }
.rs-score { grid-area: score; text-align: right; }
.rs-pct { grid-area: pct; }
.rs-pct .progress { min-width: 0 !important; }
.rs-act { grid-area: act; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-start; text-align: left; margin-top: .2rem; }
.rs-act .btn { margin: 0; }
.rs-act .btn, .rs-act a.btn { flex: 1 1 auto; text-align: center; }
.rs-act { justify-content: flex-end; }
.rs-act .btn, .rs-act a.btn { flex: 0 0 auto; min-width: 44px; min-height: 40px; }
}


/* live message from the admin on the exam screen (toast, stays about 20 seconds, tap to close) */.live-msgs { position: fixed; z-index: 1090; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.live-msg { pointer-events: auto; position: relative; padding: .7rem 2.3rem .75rem .9rem; border-radius: 14px; border-left: 5px solid #f59e0b; background: #1e1b4b; color: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.4); animation: msgIn .3s ease-out; cursor: pointer; }
.live-msg.out { opacity: 0; transform: translateY(-10px); transition: .3s; }
.live-msg-h { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fcd34d; margin-bottom: .2rem; }
.live-msg-t { font-size: 1rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.live-msg-x { position: absolute; top: .2rem; right: .45rem; border: 0; background: none; color: #fff; font-size: 1.5rem; line-height: 1; opacity: .7; }
@keyframes msgIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {.live-msg { animation: none; }
}


/* no double-tap zoom delay on the exam buttons and options (a delayed or doubled tap felt like a "missed" click on phones) */#btnNext, #btnPrev, .opt, .order-ctl .btn, .slot, .chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }


/* answer fields used by the admin's answer editor and the personal "answer the skipped questions" page */.afix .afix-opt { display: block; margin: 0 0 .4rem; padding: .55rem .75rem .55rem 2.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.afix .afix-opt:hover { border-color: #a5b4fc; }
.afix .afix-opt .form-check-input { margin-left: -1.5rem; }
.afix-box > summary { list-style: none; cursor: pointer; }
.afix-box > summary::-webkit-details-marker { display: none; }
.afix-form { padding: .85rem; border: 1px dashed var(--line); border-radius: 12px; background: var(--page); }
.qf-fixhead { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }


/* Next before an answer is selected (quiz does not allow skipping): looks inactive, still clickable so it can explain itself */#btnNext.is-blocked { opacity: .5; filter: grayscale(.35); cursor: not-allowed; box-shadow: none; }
.need-msg { display: flex; align-items: center; gap: .55rem; padding: .65rem .9rem; border-radius: 12px; border: 1px solid #f3b4b4; border-left: 5px solid #dc2626; background: #fff1f1; color: #8a1c1c; font-weight: 600; font-size: .95rem; }
.need-msg[hidden] { display: none; }
.need-msg i { font-size: 1.1rem; color: #dc2626; flex: none; }
.need-msg.shake { animation: needShake .4s ease; }
@keyframes needShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {.need-msg.shake { animation: none; }
}


/* the personal-link page sits on the dark public background: keep small grey text readable inside its cards */.fixv .card .text-secondary { color: #4b4666 !important; }


/* Quiz form: extra rules list and custom popups */.qf-popups { grid-column: 1 / -1; }
.rl-row .form-control { min-width: 0; }
.qp-card { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: .75rem; margin-bottom: .75rem; background: var(--bs-tertiary-bg); }
.qp-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.qp-brow .form-control { min-width: 0; }
.qf-sec .qp-top .form-check.form-switch { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .25rem .6rem .25rem 2.9rem; background: var(--surface); }
.qf-sec .qp-top .form-check.form-switch .form-check-input { margin-top: 0; }
.qf-sec .qp-top .form-check-label { margin: 0; }


/* ================= Live Tracking where the table does not fit (phones, tablets, small laptops): every student is a card, nothing scrolls sideways ================= */.live-wrap { container: live / inline-size; }
@container live (max-width: 939.98px) {.live-table { min-width: 0; table-layout: auto; }
.live-table colgroup, .live-table thead { display: none; }
.live-table, .live-table tbody { display: block; width: 100%; }
.live-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who score" "st q" "prog prog" "tal act"; gap: .55rem .75rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.live-table tr:last-child { border-bottom: 0; }
.live-table td { display: block; padding: 0 !important; border: 0; overflow: visible; background: transparent !important; box-shadow: none !important; min-width: 0; }
.live-table td:nth-child(1) { grid-area: who; }
.live-table td:nth-child(2) { grid-area: st; }
.live-table td:nth-child(3) { grid-area: q; text-align: right; }
.live-table td:nth-child(4) { grid-area: prog; }
.live-table td:nth-child(5) { grid-area: tal; }
.live-table td:nth-child(6) { grid-area: score; text-align: right; }
.live-table td:nth-child(7) { grid-area: act; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; white-space: normal; }
.live-table td.empty { grid-column: 1 / -1; }
.live-table .qpos { display: inline; }
.live-table .tleft { margin: 0 0 0 .35rem; }
.live-table .nav-dots { flex-wrap: wrap; }
.live-table .icon-btn { width: 40px; height: 40px; }
   /* finger-sized */
}

/* Results as cards: quiz, time and status under the name */.rs-wrap .rs-meta { margin-top: .15rem; overflow-wrap: anywhere; }

/* Simple admin tables on phones: each row becomes a small card, the actions wrap under it instead of hiding off-screen */@media (max-width: 575.98px) {.tbl-stack thead { display: none; }
.tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; width: 100%; }
.tbl-stack tr { padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
.tbl-stack tr:last-child { border-bottom: 0; }
.tbl-stack td { padding: .15rem 0 !important; border: 0; text-align: left !important; white-space: normal !important; }
.tbl-stack td:last-child { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .5rem !important; }
.tbl-stack td:last-child:empty { display: none; }
}

/* Rule list editor (Site Settings): one row per rule */.rl-item { margin-bottom: .5rem; }
.rl-item .input-group > .btn { padding-left: .6rem; padding-right: .6rem; }
.rl-prev { margin: .2rem 0 0 2.4rem; overflow-wrap: anywhere; }
.rl-in { resize: none; overflow: hidden; min-height: 38px; line-height: 1.35; }
.rl-item .input-group { align-items: stretch; }
@media (max-width: 575.98px) {.rl-item .input-group { flex-wrap: wrap; }
.rl-item .input-group > .rl-in { flex: 1 1 calc(100% - 2.6rem); width: auto; border-top-right-radius: .375rem !important; border-bottom-right-radius: .375rem !important; }
.rl-item .input-group > .btn { flex: 1 1 30%; margin-left: 0 !important; margin-top: .35rem; border-radius: .375rem !important; }
.rl-prev { margin-left: .25rem; }
}
[data-rule-tok] { max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 575.98px) {.rl-item .input-group > .btn { flex: 0 0 auto; min-width: 46px; padding: .25rem .6rem; margin-top: .25rem; }
.rl-item .input-group > .rl-up { margin-left: auto !important; }
.rl-item .input-group > .rl-dn { margin-left: .3rem !important; }
.rl-item .input-group > .rl-x { margin-left: .3rem !important; }
}
.rl-item .input-group > .input-group-text { flex: 0 0 2.6rem; justify-content: center; padding-left: 0; padding-right: 0; }
@media (max-width: 575.98px) { .rl-item .input-group > .rl-in { flex: 1 1 calc(100% - 2.6rem); min-width: 0; } }

/* ---------- Site Settings: tabs + sticky save bar ---------- */
.set-tabs { gap: .4rem; flex-wrap: wrap; padding: .25rem 0; }
.set-tabs .nav-link { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; font-weight: 600; padding: .5rem .95rem; color: var(--bs-body-color); border: 1px solid var(--line); background: var(--surface); }
.set-tabs .nav-link.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.set-panes > .tab-pane { min-height: 40vh; }
.save-bar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 -10px 30px -18px rgba(30, 30, 80, .45); backdrop-filter: blur(10px); }
.save-note { display: flex; align-items: center; gap: .5rem; color: #0d6b41; font-weight: 600; font-size: .9rem; }
.save-note.dirty { color: #8a5a00; }
@media (max-width: 575.98px) { .set-tabs .nav-link span { display: none; } .set-tabs .nav-link { padding: .6rem .8rem; font-size: 1.05rem; } .set-tabs { flex-wrap: nowrap; overflow-x: auto; } .save-bar { flex-direction: column; align-items: stretch; } .save-bar .btn { width: 100%; } }
.howto-card > summary { list-style: none; } .howto-card > summary::-webkit-details-marker { display: none; }
.howto-card > summary::after { content: "\F282"; font-family: bootstrap-icons; float: right; transition: transform .2s; } .howto-card[open] > summary::after { transform: rotate(180deg); }
.sec-save { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.sec-note { color: #0d6b41; font-weight: 600; }
.sec-note.dirty { color: #8a5a00; }
@media (max-width: 575.98px) { .sec-save { flex-direction: column; align-items: stretch; } .sec-save .btn { width: 100%; } }
@media (min-width: 1200px) { .cert-sticky { position: sticky; top: 6rem; } .cert-sticky #certPreview { height: calc(100vh - 16rem) !important; min-height: 380px; } .cert-sticky #certPreview[style*="390px"] { height: calc(100vh - 16rem) !important; } }