/* ============================================================
   Glass v2 — loaded after app.css / home.css. Remove this one link (includes/layout.php) to go back to the earlier look.
   Layers: aurora background  >  frosted glass surfaces (with light edge)  >  motion  >  headings font  >  accessibility
   ============================================================ */:root {
  --ease: cubic-bezier(.22, 1, .36, 1);          /* smooth out */
  --spring: cubic-bezier(.34, 1.4, .64, 1);      /* soft overshoot for pop-ins */
  --g-blur: 20px;
  --g-top: rgba(255, 255, 255, .66); --g-bot: rgba(255, 255, 255, .38);
  --g-edge: rgba(255, 255, 255, .9);
  --g-shadow: 0 14px 38px -8px rgba(79, 70, 229, .24), 0 2px 8px rgba(49, 46, 129, .08), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .4);
  --g-shadow-hover: 0 22px 48px -12px rgba(79, 70, 229, .28), 0 4px 10px rgba(49, 46, 129, .07), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .4);
  --input-bg: rgba(255, 255, 255, .62);
  --aurora-base: #dfe5ff;
  --muted: #4d5669;                               /* darker than before: 4.5:1 on the glass */
  --font-head: "Sora", var(--bs-body-font-family);
}


/* ---------- 1. aurora background: soft colour blobs that drift slowly behind everything ---------- */body { background: var(--aurora-base); background-attachment: scroll; }
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 36% at 18% 20%, rgba(99, 102, 241, .62), transparent 70%),
    radial-gradient(36% 34% at 84% 14%, rgba(236, 72, 153, .42), transparent 70%),
    radial-gradient(42% 38% at 74% 84%, rgba(249, 115, 22, .4), transparent 70%),
    radial-gradient(38% 34% at 12% 86%, rgba(16, 185, 129, .38), transparent 70%),
    radial-gradient(32% 30% at 50% 50%, rgba(56, 189, 248, .3), transparent 70%);
  animation: glAurora 38s ease-in-out infinite alternate; will-change: transform;
}
@keyframes glAurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.06); }
  100% { transform: translate3d(-3%, 3%, 0) rotate(-3deg) scale(1.03); }
}


/* ---------- 2. glass surfaces: sheen + light edge + depth ---------- */.card, .modal-content, .dropdown-menu, .offcanvas, .toast, .popover {
  background: linear-gradient(150deg, var(--g-top), var(--g-bot));
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(175%); backdrop-filter: blur(var(--g-blur)) saturate(175%);
}
.modal-content { background: linear-gradient(150deg, var(--g-top), var(--g-top)); border-radius: 22px; }
.modal-content .card, .card .card, .dropdown-menu .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-bot); box-shadow: none; }
.card, .quiz-card, .stat-card { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .2s; }
.quiz-card:hover, .stat-card.hoverable:hover, a:hover > .stat-card, .card.hoverable:hover { transform: translateY(-4px); box-shadow: var(--g-shadow-hover); }
.table thead th { background: transparent; border-bottom: 1px solid var(--g-edge); }
.table { --bs-table-hover-bg: rgba(99, 102, 241, .06); }
.table-responsive { border-radius: inherit; }
.stat-icon { box-shadow: 0 10px 22px -8px currentColor, inset 0 1px 0 rgba(255, 255, 255, .45); }
.g1, .g2, .g3, .g4, .g5 { position: relative; }
.progress { background: rgba(99, 102, 241, .1); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08); }
.progress-bar { box-shadow: 0 0 10px rgba(124, 58, 237, .35); }


/* navigation as glass */.sidebar { background: linear-gradient(185deg, rgba(15, 23, 42, .78), rgba(46, 38, 110, .72)); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border-right: 1px solid rgba(255, 255, 255, .1); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04); }
.sidebar .nav-link { transition: background .15s, color .15s, transform .18s var(--ease); }
.sidebar .nav-link:hover { transform: translateX(3px); }
.sidebar .nav-link.active { box-shadow: 0 10px 24px -8px rgba(99, 102, 241, .75), inset 0 1px 0 rgba(255, 255, 255, .3); }
.topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .4)); border-bottom: 1px solid var(--g-edge); -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%); }
.student-nav { background: linear-gradient(90deg, rgba(30, 27, 75, .8), rgba(67, 56, 202, .74) 60%, rgba(109, 40, 217, .74)); border-bottom: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px -14px rgba(30, 27, 75, .7), inset 0 -1px 0 rgba(255, 255, 255, .06); }
.auth-card { background: linear-gradient(150deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .6)); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: 0 30px 80px -24px rgba(30, 20, 100, .5), inset 0 1px 0 #fff; }


/* controls */.form-control, .form-select { background-color: var(--input-bg); border-color: var(--g-edge); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .25s, box-shadow .25s, background-color .25s; }
.form-control:focus, .form-select:focus { background-color: var(--g-top); border-color: #818cf8; box-shadow: 0 0 0 4px rgba(99, 102, 241, .18), 0 8px 20px -8px rgba(99, 102, 241, .35); }
.btn { transition: transform .16s var(--ease), box-shadow .18s var(--ease), background .15s, filter .15s, border-color .15s; }
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.975); transition-duration: .08s; }
.btn-grad { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 22px -8px rgba(79, 70, 229, .65), inset 0 1px 0 rgba(255, 255, 255, .32); }
.btn-grad::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%); transform: translateX(-130%); transition: transform .5s var(--ease); }
.btn-grad:hover::after { transform: translateX(130%); }
.btn-grad:hover { box-shadow: 0 16px 30px -10px rgba(79, 70, 229, .75), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.opt { transition: none; }
@media (hover: hover) and (pointer: fine) { .opt:hover:not(:disabled) { box-shadow: 0 12px 26px -12px rgba(79, 70, 229, .45); } }
.opt.sel { box-shadow: 0 0 0 3px rgba(99, 102, 241, .28), 0 14px 28px -12px rgba(79, 70, 229, .5); }
.nav-dots .dot { transition: transform .3s var(--spring), background .2s; }
.nav-dots .dot.cur { transform: scale(1.25); }


/* ---------- 3. headings font (Sora; Hindi falls back to Noto Sans Devanagari) ---------- */h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .stat-num, .score, .fs-1, .fs-2, .fs-3, .sidebar-brand, .navbar-brand, .quiz-card h5, .modal-title, .topbar h1 {
  font-family: var(--font-head), "Noto Sans Devanagari", system-ui, sans-serif; letter-spacing: -.025em; text-wrap: balance;
}
.stat-num, .score, .timer-pill, .cd .u { font-variant-numeric: tabular-nums; }
body { line-height: 1.55; font-feature-settings: "kern", "liga", "calt"; }
.form-label, .btn, .badge, .nav-link, .table thead th { font-family: var(--bs-body-font-family); }
.table thead th { letter-spacing: .08em; }
p, .text-secondary { text-wrap: pretty; }


/* ---------- 4. motion: page entrance (CSS only) + reveal on scroll (JS adds .rv) + modal pop ---------- */@keyframes glRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes glPop { from { opacity: 0; transform: translateY(22px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes glSheen { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.content > *, .auth-card, .exam-wrap > .card, #exam .q-card, .container > .card, .hero .row > * { animation: glRise .32s var(--ease) both; }
.content > *:nth-child(2) { animation-delay: .03s; }
.content > *:nth-child(3) { animation-delay: .06s; }
.content > *:nth-child(n+4) { animation-delay: .09s; }
.gl-rv { opacity: 0; transform: translateY(14px); }
.gl-rv.gl-in { opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--i, 0) * 30ms); }
.modal.fade .modal-dialog { transform: translateY(18px) scale(.97); opacity: 0; transition: transform .28s var(--spring), opacity .18s ease; }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-backdrop.show { opacity: .38; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.q-card, .opt, .exam-actions .btn { animation-fill-mode: both; }
#qText, #optBox { animation: glRise .25s var(--ease) both; }
.score-ring { animation: glPop .45s var(--spring) both; }
.live-msg, .live-alert .alert { animation: glPop .5s var(--spring) both; }
.spinner-border { border-width: .16em; }


/* ---------- 5. accessibility & robustness ---------- */a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible, summary:focus-visible, .form-check-input:focus-visible { outline: 3px solid #6366f1; outline-offset: 2px; box-shadow: none; }
.btn, .opt, .nav-link, .quiz-card, summary, label.form-check-label, [data-bs-toggle] { cursor: pointer; }
@media (max-width: 575.98px) {:root { --g-blur: 14px; }
               /* lighter blur on phones: smooth scrolling on low-end devices */body::before { inset: -35%; animation-duration: 55s; }
}
@media (prefers-reduced-motion: reduce) {*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.gl-rv { opacity: 1; transform: none; }
}
@media (prefers-contrast: more) {:root { --g-top: rgba(255, 255, 255, .94); --g-bot: rgba(255, 255, 255, .9); --g-edge: rgba(15, 23, 42, .3); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {:root { --g-top: rgba(255, 255, 255, .94); --g-bot: rgba(255, 255, 255, .9); }
.sidebar { background: #12183a; }
}
@media print {body::before { display: none; }
.card { backdrop-filter: none; box-shadow: none; }
}


/* ---------- 6. the home page's own cards, nav and strip as glass; exam header ---------- */.off-card, .ev-card, .notice, .hq-card, .story, .faq .accordion-item, .info-strip, .gal-item, .stat-pill {
  background: linear-gradient(150deg, var(--g-top), var(--g-bot)); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(175%); backdrop-filter: blur(var(--g-blur)) saturate(175%);
}
.notice { border-left: 4px solid var(--brand); }
.off-card, .ev-card, .hq-card, .story { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.off-card:hover, .ev-card:hover, .hq-card:hover, .story:hover { transform: translateY(-5px); box-shadow: var(--g-shadow-hover); }
.home-nav { background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid var(--g-edge); }
.hero h1, .hero-title { font-family: var(--font-head), "Noto Sans Devanagari", sans-serif; }
.thought-card { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35); animation: glFloat 9s ease-in-out infinite; }
@keyframes glFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.exam-top { background: linear-gradient(180deg, var(--g-top), var(--g-bot)); border: 1px solid var(--g-edge); border-top: 0; border-radius: 0 0 20px 20px; box-shadow: var(--g-shadow); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(175%); backdrop-filter: blur(var(--g-blur)) saturate(175%); }
.timer-pill { background: linear-gradient(150deg, var(--g-top), var(--g-bot)); border-color: var(--g-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.timer-pill.low { animation: glPulse 1.2s ease-in-out infinite; }
@keyframes glPulse { 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, .18); } }
.hero h1 { letter-spacing: -.012em; }


/* switching the site theme: colours glide instead of jumping (only while the class is on, ~0.7 s) */.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .3s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, fill .3s ease !important; }


/* menus and pickers always sit above the glass cards that come after them in the page */.dropdown-menu { z-index: 1060; }
.rs-bar, .live-bar, .page-tools, .content > .d-flex, .content > form { position: relative; z-index: 30; }
.dropdown, .btn-group { position: relative; }
.dropdown.show, .btn-group.show { z-index: 40; }


/* a menu is read over busy content, so it is almost solid glass */.dropdown-menu { background: linear-gradient(150deg, rgba(255, 255, 255, .97), rgba(246, 247, 255, .94)); border-radius: 16px; padding: .4rem; box-shadow: 0 18px 44px -12px rgba(49, 46, 129, .35), inset 0 1px 0 #fff; }
.dropdown-item { border-radius: 10px; padding: .5rem .75rem; transition: background .12s, color .12s; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(99, 102, 241, .12); }
.dropdown-menu { background: #fbfbff; -webkit-backdrop-filter: none; backdrop-filter: none; }


/* ---------- selected option: a light runs around its border ---------- */@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.opt.sel:not(.rv) { position: relative; border-color: transparent; }
.opt.sel:not(.rv)::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: conic-gradient(from var(--a), rgba(99, 102, 241, .28) 0%, rgba(99, 102, 241, .28) 52%, #6366f1 66%, #a78bfa 78%, #22d3ee 90%, #fff 96%, rgba(99, 102, 241, .28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: runLine 2.2s linear infinite;
}
.opt.sel:not(.rv):disabled::before { animation-play-state: paused; }
@keyframes runLine { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce) {.opt.sel:not(.rv)::before { animation: none !important; }
}


/* ---------- touch screens: instant, light, no sticky hover ---------- */a, button, .btn, .opt, .dot, summary, label, select, input, [role=button], [data-bs-toggle] { touch-action: manipulation; }
@media (hover: none), (pointer: coarse) {body::before { animation: none; inset: -12%; will-change: auto; }
                                   /* the aurora stays, but still: nothing to repaint while scrolling */.opt, .form-control, .form-select, .btn, .badge, .timer-pill, .exam-actions .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn:hover:not(:disabled):not(.disabled) { transform: none; }
.btn-grad:hover::after { transform: translateX(-130%); }
.btn-grad:hover { box-shadow: 0 10px 22px -8px rgba(79, 70, 229, .65), inset 0 1px 0 rgba(255, 255, 255, .32); }
.quiz-card:hover, .stat-card.hoverable:hover, a:hover > .stat-card, .card.hoverable:hover, .off-card:hover, .ev-card:hover, .hq-card:hover, .story:hover { transform: none; box-shadow: var(--g-shadow); }
.opt:hover:not(:disabled) { box-shadow: none; }
.sidebar .nav-link:hover { transform: none; }
/* the pressed look: a real mouse press (:active) on computers, a .press class set by exam.js while a finger is down on phones (iOS leaves :active stuck on whatever is drawn under the last touch) */
@media (hover: hover) and (pointer: fine) { .opt:active:not(:disabled):not(.sel) { transform: scale(.985); border-color: #a5b4fc; background: rgba(99, 102, 241, .12); transition-duration: .04s; } }
.opt.press:not(:disabled):not(.sel) { transform: scale(.985); border-color: #a5b4fc; background: rgba(99, 102, 241, .12); transition-duration: .04s; }
.btn:active:not(:disabled), .dot:active { transition-duration: .04s; }
.dot.jump::after { inset: -10px; }
.icon-btn { width: 40px; height: 40px; }
.opt, .exam-actions .btn { -webkit-tap-highlight-color: transparent; }
}


/* ---------- speed: blur only where content scrolls under a surface; the aurora only moves on big screens ---------- */.card, .dropdown-menu, .toast, .popover, .off-card, .ev-card, .notice, .hq-card, .story, .faq .accordion-item, .info-strip, .gal-item, .stat-pill, .form-control, .form-select, .opt, .btn, .badge, .timer-pill, .progress, .modal-content .card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.card, .off-card, .ev-card, .hq-card, .story, .info-strip { background: linear-gradient(150deg, var(--g-top), var(--g-bot)); }
body::before { animation: none; will-change: auto; }
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {body::before { animation: glAurora 60s ease-in-out infinite alternate; will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {body::before { animation: none !important; }
}


/* ---------- exam header: readable in both themes; a long quiz title wraps instead of being cut ---------- */.exam-title { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; min-width: 0; flex: 1 1 0; line-height: 1.25; overflow: visible; white-space: normal; }
.exam-title-text { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-head), "Noto Sans Devanagari", sans-serif; letter-spacing: -.015em; font-size: 1rem; }
.exam-top > .d-flex:first-child { align-items: flex-start !important; gap: .5rem; }
.exam-top .timer-pill { margin-top: .05rem; }
.portal-chip { background: rgba(99, 102, 241, .14); color: #4338ca; border: 1px solid rgba(99, 102, 241, .22); }
.timer-pill { background: rgba(99, 102, 241, .13); color: #3730a3; border: 1px solid rgba(99, 102, 241, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.timer-pill .bi { color: inherit; }
.timer-pill.low { background: rgba(220, 38, 38, .13); color: #b91c1c; border-color: rgba(220, 38, 38, .4); }
@media (max-width: 575.98px) {.exam-title-text { font-size: .96rem; }
.portal-chip { font-size: .62rem; padding: .16rem .55rem; }
}
.q-marks { background: rgba(99, 102, 241, .14); color: #3730a3; border: 1px solid rgba(99, 102, 241, .22); }


/* ============================================================
   LIQUID look (the site theme the admin switches to with "Everyone"/"Panel"; the white theme is untouched). It is applied as
   <html data-look="liquid"> on top of the light theme, so every component keeps its readable light-theme colours and only the
   surfaces change: lavender-pink-sky mist, thick glossy glass rim, lilac glossy buttons, pill-shaped options.
   ============================================================ */html[data-look=liquid] {
  --brand: #4a35b3; --brand2: #6b52d6; --brand-soft: rgba(143, 123, 232, .16);
  --page: #d8d6f0; --muted: #47527b; --ink: #26305c; --line: rgba(255, 255, 255, .8);
  --g-top: rgba(255, 255, 255, .64); --g-bot: rgba(238, 241, 255, .32); --g-edge: rgba(255, 255, 255, .94);
  --g-shadow: 0 26px 56px -26px rgba(106, 118, 196, .55), 0 0 0 1.5px rgba(150, 205, 240, .5), inset 0 3px 2px #fff, inset 0 -5px 12px rgba(150, 200, 240, .32), inset 0 0 24px rgba(255, 255, 255, .42);
  --g-shadow-hover: 0 30px 60px -24px rgba(124, 98, 226, .5), 0 0 0 1.5px rgba(176, 160, 240, .6), inset 0 3px 2px #fff, inset 0 -5px 12px rgba(150, 200, 240, .32);
  --input-bg: rgba(255, 255, 255, .72);
  --bs-body-color: #2b3565; --bs-secondary-color: #47527b; --bs-link-color: #4a35b3; --bs-link-color-rgb: 74, 53, 179; --bs-link-hover-color: #35248f;
  --bs-primary: #6a56d6; --bs-primary-rgb: 106, 86, 214;
}
html[data-look=liquid] body { background: #d8d6f0; color: #2b3565; }
html[data-look=liquid] body::before {
  inset: 0; opacity: 1; animation: none; will-change: auto; filter: none;
  background:
    radial-gradient(60% 38% at 6% 28%, rgba(246, 205, 230, .95), transparent 70%),
    radial-gradient(55% 40% at 98% 16%, rgba(250, 222, 236, .9), transparent 70%),
    radial-gradient(70% 45% at 78% 90%, rgba(172, 214, 246, .95), transparent 72%),
    radial-gradient(62% 42% at 10% 98%, rgba(180, 220, 247, .9), transparent 72%),
    radial-gradient(45% 30% at 52% 50%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .5) 34%, rgba(255, 255, 255, 0) 50%, rgba(214, 226, 252, .6) 66%, rgba(255, 255, 255, 0) 82%),
    linear-gradient(180deg, #cfd0f1 0%, #d9d9f3 40%, #c9e0f5 100%);
}
html[data-look=liquid] body::after { content: none; }

/* glass */html[data-look=liquid] .card, html[data-look=liquid] .toast, html[data-look=liquid] .popover, html[data-look=liquid] .offcanvas, html[data-look=liquid] .off-card, html[data-look=liquid] .ev-card, html[data-look=liquid] .notice, html[data-look=liquid] .hq-card, html[data-look=liquid] .story, html[data-look=liquid] .faq .accordion-item, html[data-look=liquid] .info-strip {
  background: linear-gradient(155deg, var(--g-top), var(--g-bot)); border: 2.5px solid var(--g-edge); border-radius: 30px; box-shadow: var(--g-shadow);
}
html[data-look=liquid] .card .card, html[data-look=liquid] .modal-content .card { border-radius: 22px; border-width: 2px; box-shadow: inset 0 2px 1px #fff, 0 0 0 1px rgba(150, 205, 240, .4); background: rgba(255, 255, 255, .5); }
html[data-look=liquid] .modal-content { background: linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(236, 240, 255, .93)); border: 2.5px solid #fff; border-radius: 32px; box-shadow: 0 30px 70px -26px rgba(80, 90, 180, .6), 0 0 0 1.5px rgba(150, 205, 240, .5), inset 0 3px 2px #fff; }
html[data-look=liquid] .dropdown-menu { background: #fbfbff; border: 2px solid #fff; border-radius: 20px; box-shadow: 0 22px 48px -14px rgba(80, 90, 180, .5), 0 0 0 1.5px rgba(150, 205, 240, .45); }
html[data-look=liquid] .dropdown-item { color: #2b3565; border-radius: 12px; }
html[data-look=liquid] .dropdown-item:hover, html[data-look=liquid] .dropdown-item:focus { background: rgba(143, 123, 232, .16); color: #2b1f78; }
html[data-look=liquid] .sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(232, 236, 255, .5)); border-right: 2.5px solid rgba(255, 255, 255, .95); box-shadow: 14px 0 40px -26px rgba(106, 118, 196, .5), inset -1px 0 0 rgba(150, 205, 240, .5); }
html[data-look=liquid] .sidebar-brand, html[data-look=liquid] .sidebar-brand * { color: #2b3565; }
html[data-look=liquid] .sidebar-brand small, html[data-look=liquid] .sidebar .nav-group, html[data-look=liquid] .sidebar .nav-label, html[data-look=liquid] .sidebar .small, html[data-look=liquid] .sidebar .text-white-50 { color: #424d78 !important; }
html[data-look=liquid] .sidebar .nav-link { color: #4b5788; }
html[data-look=liquid] .sidebar .nav-link:hover { background: rgba(255, 255, 255, .7); color: #2b1f78; }
html[data-look=liquid] .sidebar .nav-link.active { background: linear-gradient(180deg, #9b84ee, #6c4dd5); color: #fff; box-shadow: 0 12px 24px -10px rgba(124, 98, 226, .7), inset 0 2px 1px rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(80, 50, 180, .45); }
html[data-look=liquid] .sidebar-foot, html[data-look=liquid] .sidebar-foot * { color: #4b5788; }
html[data-look=liquid] .sidebar-foot .btn-outline-light { border-color: rgba(106, 86, 214, .35); color: #4b3fb0; background: rgba(255, 255, 255, .55); }
html[data-look=liquid] .sidebar-foot .badge { background: #fff !important; color: #5b43c9 !important; }
html[data-look=liquid] .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(240, 243, 255, .42)); border-bottom: 2.5px solid rgba(255, 255, 255, .95); box-shadow: 0 16px 36px -24px rgba(106, 118, 196, .5); }
html[data-look=liquid] .student-nav { background: linear-gradient(90deg, #cbbdf6, #b2c8f4 60%, #a6d2f1); border-bottom: 2.5px solid rgba(255, 255, 255, .9); box-shadow: 0 16px 34px -20px rgba(106, 118, 196, .6), inset 0 2px 1px rgba(255, 255, 255, .6); }
html[data-look=liquid] .student-nav .navbar-brand, html[data-look=liquid] .student-nav .navbar-brand *, html[data-look=liquid] .student-nav .text-white-50, html[data-look=liquid] .student-nav .small { color: #1f2a5c !important; }
html[data-look=liquid] .home-nav { background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(240, 243, 255, .5)); border-bottom: 2.5px solid rgba(255, 255, 255, .95); }
html[data-look=liquid] .auth-bg { background: transparent; }
html[data-look=liquid] .auth-card { background: linear-gradient(155deg, rgba(255, 255, 255, .78), rgba(238, 241, 255, .5)); border: 2.5px solid #fff; border-radius: 36px; }
html[data-look=liquid] .exam-top { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(240, 242, 255, .38)); border: 2.5px solid rgba(255, 255, 255, .95); border-top: 0; border-radius: 0 0 32px 32px; box-shadow: 0 18px 40px -22px rgba(106, 118, 196, .5), 0 0 0 1.5px rgba(150, 205, 240, .45), inset 0 -4px 10px rgba(150, 200, 240, .28); }

/* buttons: lilac glossy pills */html[data-look=liquid] .btn { border-radius: 999px; }
html[data-look=liquid] .btn-grad, html[data-look=liquid] .btn-primary {
  background: linear-gradient(180deg, #9b84ee 0%, #7c60e1 52%, #6c4dd5 100%); color: #fff; border: 2.5px solid rgba(255, 255, 255, .92); font-weight: 700; text-shadow: 0 1px 2px rgba(40, 20, 120, .55);
  box-shadow: 0 16px 30px -12px rgba(124, 98, 226, .7), 0 0 0 1.5px rgba(190, 170, 250, .55), inset 0 3px 2px rgba(255, 255, 255, .85), inset 0 -5px 10px rgba(120, 90, 220, .35);
}
html[data-look=liquid] .btn-grad:hover, html[data-look=liquid] .btn-primary:hover { filter: brightness(1.06); color: #fff; }
html[data-look=liquid] .btn-outline-primary { --bs-btn-color: #5b43c9; --bs-btn-border-color: rgba(143, 123, 232, .6); --bs-btn-hover-bg: rgba(143, 123, 232, .2); --bs-btn-hover-color: #3b2a8f; --bs-btn-hover-border-color: #8f7be8; background: rgba(255, 255, 255, .5); }
html[data-look=liquid] .btn-outline-secondary { --bs-btn-color: #4b5788; --bs-btn-border-color: rgba(255, 255, 255, .95); --bs-btn-hover-bg: rgba(255, 255, 255, .85); --bs-btn-hover-color: #2b1f78; --bs-btn-hover-border-color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, .72), rgba(230, 236, 255, .4)); box-shadow: inset 0 2px 1px #fff, 0 0 0 1.5px rgba(160, 205, 240, .5); }
html[data-look=liquid] .btn-light { --bs-btn-bg: rgba(255, 255, 255, .7); --bs-btn-border-color: #fff; --bs-btn-hover-bg: #fff; --bs-btn-color: #2b3565; box-shadow: inset 0 2px 1px #fff, 0 0 0 1.5px rgba(160, 205, 240, .45); }

/* inputs */html[data-look=liquid] .form-control, html[data-look=liquid] .form-select { background-color: var(--input-bg); color: #26305c; border: 2px solid rgba(255, 255, 255, .95); border-radius: 18px; box-shadow: inset 0 2px 3px rgba(150, 170, 230, .22), 0 0 0 1px rgba(160, 205, 240, .45); }
html[data-look=liquid] .form-control::placeholder { color: #7d88b4; }
html[data-look=liquid] .form-control:focus, html[data-look=liquid] .form-select:focus { background-color: #fff; border-color: #fff; box-shadow: 0 0 0 4px rgba(143, 123, 232, .3), inset 0 2px 3px rgba(150, 170, 230, .22); }
html[data-look=liquid] .input-group-text { background: rgba(255, 255, 255, .6); color: #5a668f; border: 2px solid rgba(255, 255, 255, .95); }

/* exam options: pill glass, lilac when chosen */html[data-look=liquid] .opt { background: linear-gradient(160deg, rgba(255, 255, 255, .74), rgba(230, 236, 255, .4)); border: 2px solid rgba(255, 255, 255, .95); border-radius: 999px; color: #2b3565; box-shadow: 0 10px 22px -14px rgba(106, 118, 196, .5), 0 0 0 1.5px rgba(160, 205, 240, .5), inset 0 2px 1px #fff, inset 0 -3px 8px rgba(150, 200, 240, .3); }
html[data-look=liquid] .opt.rv { border-radius: 24px; }
html[data-look=liquid] .opt .k { background: linear-gradient(160deg, #fff, #e4e9ff); border: 1.5px solid #fff; color: #5a4fd0; border-radius: 50%; box-shadow: inset 0 -2px 4px rgba(150, 170, 230, .35); }
html[data-look=liquid] .opt.sel:not(.rv) { background: linear-gradient(160deg, rgba(214, 200, 252, .95), rgba(176, 160, 240, .8)); color: #2a1d73; font-weight: 700; box-shadow: 0 14px 28px -12px rgba(124, 98, 226, .65), inset 0 3px 2px rgba(255, 255, 255, .9), inset 0 -5px 10px rgba(130, 100, 225, .3); }
html[data-look=liquid] .opt.sel .k { background: linear-gradient(160deg, #fff, #efe9ff); color: #5b3fd0; }
html[data-look=liquid] .opt.right { background: linear-gradient(160deg, rgba(209, 250, 229, .95), rgba(167, 243, 208, .7)); color: #14532d; }
html[data-look=liquid] .opt.wrong { background: linear-gradient(160deg, rgba(254, 226, 226, .96), rgba(252, 165, 165, .55)); color: #7f1d1d; }
@media (hover: hover) and (pointer: fine) { html[data-look=liquid] .opt:hover:not(:disabled):not(.sel) { background: linear-gradient(160deg, #fff, rgba(236, 240, 255, .7)); } }

/* chips, pills, small labels */html[data-look=liquid] .timer-pill, html[data-look=liquid] .portal-chip, html[data-look=liquid] .q-marks, html[data-look=liquid] .count-pill, html[data-look=liquid] .quick-actions a, html[data-look=liquid] .quick-chips .chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(224, 216, 252, .62)); color: #5b43c9; border: 2px solid rgba(255, 255, 255, .95); box-shadow: inset 0 2px 1px #fff, 0 6px 14px -8px rgba(124, 98, 226, .5);
}
html[data-look=liquid] .timer-pill.low { background: linear-gradient(180deg, #fff, #fecaca); color: #991b1b; }
html[data-look=liquid] .quick-actions a { color: #3b3f78; }
html[data-look=liquid] .quick-actions a i { color: #6a56d6; }
html[data-look=liquid] .text-brand, html[data-look=liquid] .q-lead { color: #5b43c9; }
html[data-look=liquid] .nav-dots .dot { background: #cfd6f5; }
html[data-look=liquid] .nav-dots .dot.cur { background: #8f7be8; box-shadow: 0 0 0 4px rgba(143, 123, 232, .3); }
html[data-look=liquid] .nav-dots .dot.correct { background: var(--ok); }
html[data-look=liquid] .nav-dots .dot.wrong { background: var(--bad); }
html[data-look=liquid] .nav-dots .dot.timeout { background: var(--warn); }
html[data-look=liquid] .progress { background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 3px rgba(106, 118, 196, .3); }
html[data-look=liquid] .progress-bar { background: linear-gradient(90deg, #b19df0, #8fc4ee); }
html[data-look=liquid] .table { --bs-table-hover-bg: rgba(255, 255, 255, .5); color: #2b3565; }
html[data-look=liquid] .table thead th { color: #5a668f; background: transparent; border-bottom: 2px solid rgba(255, 255, 255, .9); }
html[data-look=liquid] .table > :not(caption) > * > * { border-bottom-color: rgba(255, 255, 255, .75); }
html[data-look=liquid] .stat-label { color: #5a668f; }
html[data-look=liquid] .q-context { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .95); }
html[data-look=liquid] ::selection { background: rgba(143, 123, 232, .35); }
html[data-look=liquid] .theme-site, html[data-look=liquid] .theme-panel { color: #4b3fb0; }

/* review / live pieces keep their own light-theme state colours; only the card shape follows the glass */html[data-look=liquid] .review-q { border-left-width: 6px; }
html[data-look=liquid] .live-table, html[data-look=liquid] .live-table td { background: transparent; }


/* exam header: just the portal name chip and the small timer */.exam-top .exam-title { flex: 0 1 auto; }
.exam-top .portal-chip { font-size: .72rem; padding: .22rem .75rem; }


/* ---- liquid: readable text colours on the pastel surfaces (checked with a contrast audit: >= 4.5:1 for normal text, >= 3:1 for large) ---- */html[data-look=liquid] .text-secondary, html[data-look=liquid] .form-text, html[data-look=liquid] .stat-label, html[data-look=liquid] small.text-secondary { color: #424d78 !important; }
html[data-look=liquid] .text-success { color: #0d6b41 !important; }
html[data-look=liquid] .text-danger { color: #a8222f !important; }
html[data-look=liquid] .text-warning { color: #8a5a00 !important; }
html[data-look=liquid] .text-info { color: #0a6a86 !important; }
html[data-look=liquid] .btn-outline-danger { --bs-btn-color: #a8222f; --bs-btn-border-color: rgba(168, 34, 47, .55); background: rgba(255, 255, 255, .5); }
html[data-look=liquid] .btn-outline-success { --bs-btn-color: #0d6b41; --bs-btn-border-color: rgba(13, 107, 65, .55); background: rgba(255, 255, 255, .5); }
html[data-look=liquid] .btn-outline-warning { --bs-btn-color: #7a4f00; --bs-btn-border-color: rgba(138, 90, 0, .55); background: rgba(255, 255, 255, .5); }
html[data-look=liquid] .btn-check:checked + .btn-outline-success, html[data-look=liquid] .btn-outline-success:hover { background: #0d6b41; color: #fff; }
html[data-look=liquid] .btn-check:checked + .btn-outline-danger, html[data-look=liquid] .btn-outline-danger:hover { background: #a8222f; color: #fff; }
html[data-look=liquid] .btn-check:checked + .btn-outline-warning, html[data-look=liquid] .btn-outline-warning:hover { background: #8a5a00; color: #fff; }
html[data-look=liquid] .kicker, html[data-look=liquid] .home-brand .bn-sub, html[data-look=liquid] .bh-org .bn-sub { color: #9a3f08; }
html[data-look=liquid] .visit-card .kicker, html[data-look=liquid] .home-foot .kicker, html[data-look=liquid] .hero .kicker { color: #fcd34d; }
html[data-look=liquid] .hero-title .bn-sub, html[data-look=liquid] .home-foot .bn-sub { color: #fcd34d; }
html[data-look=liquid] .pill-live, html[data-look=liquid] .pill-done { color: #0f5f33; }
html[data-look=liquid] .pill-guest { color: #9a3412; }
html[data-look=liquid] .pill-soon { color: #075985; }
html[data-look=liquid] .pill-feat { color: #8a5200; }
html[data-look=liquid] .st.in_progress { color: #0f5f33; }
html[data-look=liquid] .st.completed { color: #3730a3; }
html[data-look=liquid] .st.not_started { color: #475569; }
html[data-look=liquid] code { color: #a01a5c; }
html[data-look=liquid] .avatar[style*=background] { background-blend-mode: multiply !important; background-image: linear-gradient(#858585, #858585) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
html[data-look=liquid] .topbar .avatar { background: linear-gradient(135deg, #6a50d8, #4a35b3); color: #fff; }
html[data-look=liquid] .nav-pills .nav-link.active, html[data-look=liquid] .nav-link.active:not(.sidebar .nav-link) { background: linear-gradient(180deg, #9b84ee, #6c4dd5); color: #fff; }
html[data-look=liquid] .qf-tag { color: #4a35b3; }
html[data-look=liquid] .qf-pct { color: #4a35b3; }
html[data-look=liquid] .off-link, html[data-look=liquid] a:not(.btn):not(.nav-link):not(.dropdown-item) { --bs-link-color-rgb: 74, 53, 179; }
html[data-look=liquid] .badge { box-shadow: none; }
html[data-look=liquid] .exam-actions .btn-outline-secondary, html[data-look=liquid] #btnPrev { color: #3b4678; }
html[data-look=liquid] #btnPrev:disabled { color: #5d6894; opacity: .85; }


/* "SUKH SHANTI BHAWAN" under the name on the login / quiz entry cards: a deep burnt-orange that reads clearly on the glass (>= 4.5:1), in both looks */.auth-card .bh-org .bn-sub, .brand-head .bh-org .bn-sub { color: #a23d06; opacity: 1; font-weight: 800; letter-spacing: .18em; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
html[data-look=liquid] .auth-card .bh-org .bn-sub, html[data-look=liquid] .brand-head .bh-org .bn-sub { color: #8f3405; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }


/* white theme: plain text (no pill); the card behind the name is a mid lilac, so the subtitle is a very dark burnt-brown to stay readable (>= 4.5:1) */html:not([data-look=liquid]) .auth-card .bh-org .bn-sub, html:not([data-look=liquid]) .brand-head .bh-org .bn-sub {
  display: block; margin: .3rem 0 0; padding: 0; background: none; box-shadow: none; border-radius: 0; color: #4d1c00; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); font-weight: 800;
}


/* liquid: form fields need a border you can actually see on the white glass / modals (>= 3:1 against the surface) */html[data-look=liquid] .form-control, html[data-look=liquid] .form-select, html[data-look=liquid] textarea.form-control {
  background-color: rgba(255, 255, 255, .92); border: 2px solid #7a83d0; box-shadow: inset 0 2px 3px rgba(120, 132, 215, .16);
}
html[data-look=liquid] .form-control:hover, html[data-look=liquid] .form-select:hover { border-color: #6f77cc; }
html[data-look=liquid] .form-control:focus, html[data-look=liquid] .form-select:focus { background-color: #fff; border-color: #5a43c9; box-shadow: 0 0 0 4px rgba(106, 86, 214, .25), inset 0 2px 3px rgba(120, 132, 215, .12); }
html[data-look=liquid] .input-group-text { background: rgba(236, 238, 255, .95); border: 2px solid #7a83d0; color: #3f4a78; }
html[data-look=liquid] .input-group > .form-control, html[data-look=liquid] .input-group > .form-select { border-radius: 18px; }
html[data-look=liquid] .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -2px; }
html[data-look=liquid] .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html[data-look=liquid] .form-check-input { border: 2px solid #7b84d2; background-color: rgba(255, 255, 255, .95); }
html[data-look=liquid] .form-check-input:checked { background-color: #6a50d8; border-color: #5a43c9; }
html[data-look=liquid] .form-switch .form-check-input:not(:checked) { background-color: #e3e6fb; }
html[data-look=liquid] .modal-body .form-control, html[data-look=liquid] .modal-body .form-select { background-color: #fff; }


/* a long quiz title wraps; it must not squeeze the button next to it */.auth-card a.d-flex > span:first-child { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.auth-card a.d-flex > .btn { flex: 0 0 auto; white-space: nowrap; margin-left: .6rem; }


/* white theme: form fields (quiz name, description, status, dates, numbers...) get a clearly visible border (>= 3:1 on white), also inside modals */html:not([data-look=liquid]) .form-control, html:not([data-look=liquid]) .form-select, html:not([data-look=liquid]) textarea.form-control {
  background-color: #fff; border: 2px solid #8892b8; box-shadow: inset 0 1px 2px rgba(60, 70, 130, .08);
}
html:not([data-look=liquid]) .form-control:hover, html:not([data-look=liquid]) .form-select:hover { border-color: #6b76a8; }
html:not([data-look=liquid]) .form-control:focus, html:not([data-look=liquid]) .form-select:focus { border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79, 70, 229, .18); }
html:not([data-look=liquid]) .input-group-text { background: #f1f3fc; border: 2px solid #8892b8; color: #3f4a78; }
html:not([data-look=liquid]) .input-group > :not(:first-child) { margin-left: -2px; }
html:not([data-look=liquid]) .form-check-input { border: 2px solid #7b86b4; background-color: #fff; }
html:not([data-look=liquid]) .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
html:not([data-look=liquid]) .form-switch .form-check-input:not(:checked) { background-color: #e6e9f8; }


/* ============================================================
   3D, tactile options: a raised "key" with a solid lower edge. Pressing sinks it, the chosen one stands taller with a glossy top and pops with a spring.
   Transforms and shadows only (cheap on phones). Works in the white and the Liquid look.
   ============================================================ */.opt:not(.rv) { --edge: rgba(99, 102, 241, .32); --edge-sel: rgba(72, 50, 180, .7); margin-bottom: .95rem;
  transition: none; -webkit-tap-highlight-color: transparent; }
html[data-look=liquid] .opt:not(.rv) { --edge: rgba(110, 96, 205, .42); }
.opt:not(.rv):not(.sel) { box-shadow: 0 4px 0 var(--edge), 0 12px 18px -12px rgba(50, 60, 150, .45), inset 0 2px 1px rgba(255, 255, 255, .9), inset 0 -2px 6px rgba(120, 140, 220, .18); }
@media (hover: hover) and (pointer: fine) { .opt:not(.rv):not(.sel):not(:disabled):active { transform: translateY(4px) scale(.992); box-shadow: 0 0 0 var(--edge), 0 3px 6px -4px rgba(50, 60, 150, .4), inset 0 3px 8px rgba(80, 90, 190, .22); transition-duration: .04s; } }
.opt.press:not(.rv):not(.sel):not(:disabled) { transform: translateY(4px) scale(.992); box-shadow: 0 0 0 var(--edge), 0 3px 6px -4px rgba(50, 60, 150, .4), inset 0 3px 8px rgba(80, 90, 190, .22); transition-duration: .04s; }
.opt.sel:not(.rv) { transform: translateY(-3px); background: linear-gradient(165deg, #dcd2ff 0%, #b9a6f7 50%, #9a82ee 100%); border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 8px 0 var(--edge-sel), 0 22px 32px -12px rgba(88, 60, 210, .7), 0 0 0 4px rgba(124, 98, 226, .22), inset 0 3px 2px rgba(255, 255, 255, .95), inset 0 -8px 12px rgba(98, 70, 220, .32); }
.opt.sel:not(.rv)::after { content: ""; position: absolute; left: 14px; right: 14px; top: 3px; height: 44%; pointer-events: none; border-radius: 999px 999px 60px 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
.opt.sel:not(.rv) .k { background: linear-gradient(160deg, #fff, #efe9ff); color: #5b3fd0; box-shadow: 0 3px 0 rgba(98, 70, 220, .45), inset 0 -2px 3px rgba(130, 110, 230, .3); transform: translateY(-1px); }
.opt:not(.rv) .k { box-shadow: 0 2px 0 rgba(120, 130, 210, .35), inset 0 -2px 3px rgba(130, 150, 230, .25); }
.opt.sel:not(.rv) > span { position: relative; z-index: 1; }
@keyframes optPop { 0% { transform: translateY(4px) scale(.965); } 45% { transform: translateY(-8px) scale(1.035); } 72% { transform: translateY(0) scale(.995); } 100% { transform: translateY(-3px) scale(1); } }
@keyframes keyPop { 0% { transform: scale(.55) rotate(-14deg); } 55% { transform: scale(1.22) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.opt.sel.pop:not(.rv) { animation: optPop .52s cubic-bezier(.3, 1.4, .5, 1) both; }
.opt.sel.pop:not(.rv) .k { animation: keyPop .5s cubic-bezier(.3, 1.7, .5, 1) both; }

/* the exam buttons feel pressed too */
.exam-actions .btn:not(:disabled):active { transform: translateY(3px) scale(.99); transition-duration: .04s; }
@media (prefers-reduced-motion: reduce) {.opt.sel.pop:not(.rv), .opt.sel.pop:not(.rv) .k { animation: none !important; }
}
}

/* liquid: small coloured numbers and the student bar buttons stay readable */
html[data-look=liquid] .tally .c { color: #0d5a31; background: rgba(34, 197, 94, .22); }
html[data-look=liquid] .tally .w { color: #8f1d28; background: rgba(239, 68, 68, .2); }
html[data-look=liquid] .tally .t { color: #7a4d00; background: rgba(245, 158, 11, .26); }
html[data-look=liquid] .student-nav .btn-outline-light, html[data-look=liquid] .student-nav .btn-light { color: #1f2a5c; border-color: rgba(31, 42, 92, .45); background: rgba(255, 255, 255, .55); }
html[data-look=liquid] .student-nav .btn-outline-light:hover { background: rgba(255, 255, 255, .85); color: #1f2a5c; }
html[data-look=liquid] .student-nav .btn-warning, html[data-look=liquid] .student-nav .home-pulse { color: #3b2a00; }
html[data-look=liquid] .flag, html[data-look=liquid] .flag.tab { text-shadow: none; }
html[data-look=liquid] .flag { background: #fee2e2; color: #8f1d28; } html[data-look=liquid] .flag.tab { background: #fef3c7; color: #7a3b09; } html[data-look=liquid] .flag.away { background: #e0e7ff; color: #2f2a8f; }

/* the exam warning popup is a dark overlay: its card is solid and readable in both looks, and the page behind it is dimmed, not read */
.exam-warn { background: rgba(20, 16, 50, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.exam-warn .box { background: #fff; color: #26305c; border: 2px solid #fff; border-radius: 28px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); }
.exam-warn .box h5 { color: #26305c; } .exam-warn .box p { color: #424d78; }
.exam-warn .btn-danger { background: #b4232f; border-color: #b4232f; color: #fff; font-weight: 700; border-radius: 999px; }
/* liquid: the remaining small pieces */
html[data-look=liquid] .portal-chip { color: #4a35b3; }
html[data-look=liquid] .btn-grad:disabled, html[data-look=liquid] .btn-grad.disabled { background: linear-gradient(180deg, #b9acd9, #a198c9); color: #fff; opacity: 1; text-shadow: 0 1px 2px rgba(40, 20, 120, .5); }
html[data-look=liquid] .student-nav .home-pulse, html[data-look=liquid] .student-nav .btn-warning { background: #fde68a; border-color: #fff; color: #3b2a00; }
html[data-look=liquid] .student-nav .btn-outline-light span, html[data-look=liquid] .student-nav .btn-outline-light i { color: #1f2a5c; }
html[data-look=liquid] .text-white-50 { color: #424d78 !important; }
html[data-look=liquid] .alert-success { color: #0b4f2b; } html[data-look=liquid] .alert-danger { color: #7f1d1d; } html[data-look=liquid] .alert-warning { color: #6b4200; } html[data-look=liquid] .alert-info { color: #0c4a6e; } html[data-look=liquid] .alert-secondary { color: #334155; }
html[data-look=liquid] .pending-banner { color: #7c2d12; }
html[data-look=liquid] .q-hint.q-guide, html[data-look=liquid] .q-note { color: #5b3a00; }
html[data-look=liquid] .qn-head, html[data-look=liquid] .qn-label, html[data-look=liquid] .qn-body, html[data-look=liquid] .qn-more { color: #5b3a00; }

html[data-look=liquid] .tally .c { color: #08461f; } html[data-look=liquid] .tally .w { color: #7a141f; } html[data-look=liquid] .tally .t { color: #5e3a00; }
html[data-look=liquid] .live-table .score small, html[data-look=liquid] .live-table .qpos small, html[data-look=liquid] .live-table .sub { color: #3c476f; }

/* The chosen option keeps its full look whatever the finger or pointer is doing. iOS keeps :hover / :active on the element under the last touch until the next
   touch or scroll, which used to paint the chosen option pale (hover) or pressed-flat (active) right after the tap. */
.opt.sel:not(.rv):hover, .opt.sel:not(.rv):active, .opt.sel:not(.rv):focus, .opt.sel:not(.rv):focus-visible {
  background: linear-gradient(165deg, #dcd2ff 0%, #b9a6f7 50%, #9a82ee 100%) !important; border-color: rgba(255, 255, 255, .85) !important; color: #2a1d73 !important;
  box-shadow: 0 8px 0 var(--edge-sel), 0 22px 32px -12px rgba(88, 60, 210, .7), 0 0 0 4px rgba(124, 98, 226, .22), inset 0 3px 2px rgba(255, 255, 255, .95), inset 0 -8px 12px rgba(98, 70, 220, .32) !important; }

/* Review: the correct answer is a clear green key, a wrong choice of the student a clear red key (same raised look as the exam options) */
html .opt.rv.right { background: linear-gradient(165deg, #dcf9e9 0%, #a6ebc4 55%, #82dcab 100%); border: 2px solid #3fbf7f; color: #0b3d22;
  box-shadow: 0 5px 0 #2f9e6a, 0 14px 22px -12px rgba(22, 130, 80, .55), inset 0 2px 1px rgba(255, 255, 255, .85); }
html .opt.rv.right .k { background: linear-gradient(160deg, #46d595, #1f9d63); color: #fff; border-color: #fff; box-shadow: 0 2px 0 rgba(15, 100, 60, .45); }
html .opt.rv.wrong { background: linear-gradient(165deg, #ffe3e3 0%, #fbb4b4 55%, #f68f8f 100%); border: 2px solid #ee6a6a; color: #5e0d0d;
  box-shadow: 0 5px 0 #cf4747, 0 14px 22px -12px rgba(190, 40, 40, .5), inset 0 2px 1px rgba(255, 255, 255, .85); }
html .opt.rv.wrong .k { background: linear-gradient(160deg, #f56b6b, #cc3434); color: #fff; border-color: #fff; box-shadow: 0 2px 0 rgba(130, 20, 20, .45); }
html .opt.rv.right .rv-tags, html .opt.rv.right .rv-tags .text-success { color: #0b3d22 !important; font-weight: 600; }
html .opt.rv.wrong .rv-tags { color: #5e0d0d; font-weight: 600; }
.opt.rv.right, .opt.rv.wrong { margin-bottom: .85rem; }

/* exam header = the dashboard's brand bar (site name, Help, timer); no title, home, profile or logout while the exam runs */
.exam-top.student-nav { background: linear-gradient(90deg, rgba(30, 27, 75, .9), rgba(67, 56, 202, .84) 60%, rgba(109, 40, 217, .84)); border: 0; border-radius: 0 0 22px 22px; padding: .55rem .95rem .6rem; color: #fff; box-shadow: 0 12px 28px -14px rgba(30, 27, 75, .75); }
.exam-top.student-nav > .d-flex:first-child { align-items: center !important; gap: .6rem; margin-bottom: .35rem !important; }
.exam-top.student-nav .navbar-brand { margin: 0; padding: 0; pointer-events: none; font-size: 1rem; min-width: 0; }
.exam-top.student-nav .timer-pill { margin-top: 0; }
html[data-look=liquid] .exam-top.student-nav { background: linear-gradient(90deg, #cbbdf6, #b2c8f4 60%, #a6d2f1); border-bottom: 2.5px solid rgba(255, 255, 255, .9); color: #1f2a5c; box-shadow: 0 16px 34px -20px rgba(106, 118, 196, .6), inset 0 2px 1px rgba(255, 255, 255, .8); }
@media (max-width: 400px) { .exam-top.student-nav .bi-text small, .exam-top.student-nav .bn-sub { font-size: .6rem; } }
.exam-top.student-nav .timer-pill { background: rgba(255, 255, 255, .96); color: #3b2fc0; border-color: #fff; box-shadow: 0 2px 8px -3px rgba(20, 15, 80, .5); }
.exam-top.student-nav .timer-pill.low { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* exam heading must never be wider than the phone: the name shrinks (its second line is dropped on narrow screens) and the Help + timer group keeps its size */
.exam-top.student-nav { box-sizing: border-box; }
.exam-top.student-nav > .d-flex:first-child > .navbar-brand { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: normal; }
.exam-top.student-nav > .d-flex:first-child > .d-flex { flex: 0 0 auto; }
.exam-top.student-nav .bi-text, .exam-top.student-nav .bi-text b { min-width: 0; }
.exam-top.student-nav .brand-logo { height: 28px; flex: 0 0 auto; }
@media (max-width: 460px) {
  /* phones: both lines of the name stay (the second one smaller and tighter), the Help button shrinks to its icon so nothing is cut or wider than the screen */
  .exam-top.student-nav .bi-text b { font-size: .86rem; line-height: 1.12; }
  .exam-top.student-nav .bn-main { white-space: nowrap; }
  .exam-top.student-nav .bn-sub { display: block; font-size: .5rem; letter-spacing: .1em; margin-top: .18rem; white-space: nowrap; opacity: .95; }
  .exam-top.student-nav .brand-logo { height: 26px; }
  .exam-top.student-nav .hc-btn { padding: .26rem .6rem; font-size: .85rem; gap: .3rem; }
  .exam-top.student-nav .timer-pill { padding: .26rem .65rem; font-size: .88rem; }
  .exam-top.student-nav > .d-flex:first-child { gap: .45rem; }
}
@media (max-width: 350px) { .exam-top.student-nav .hc-btn .hc-lbl { display: none; } .exam-top.student-nav .bn-sub { font-size: .46rem; letter-spacing: .05em; } .exam-top.student-nav .bi-text b { font-size: .8rem; } }
/* Previous / Next: matching rounded rectangles (not a circle), Previous small */
.exam-actions { gap: .5rem; }
.exam-actions #btnPrev { flex: 0 0 auto; min-height: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; padding: 0 1.1rem !important; }
@media (max-width: 575.98px) { .exam-actions #btnPrev { width: 48px; min-width: 48px; padding: 0 !important; } }   /* phones: just the arrow; wider screens show "← Previous" with room for the word */
.exam-actions #btnNext { min-height: 48px; height: 48px; border-radius: 14px; min-width: 0; }