:root {
  --navy: #12388b;
  --navy-dark: #0c2766;
  --red: #c4262e;
  --ink: #1b2233;
  --muted: #5a6377;
  --bg: #f3f5fa;
  --white: #ffffff;
  --border: #d6dce8;
  --success: #15803d;
  --error: #c81e1e;
  --radius: 6px;
  /* Base font: Eczar is the only one of these with real Devanagari glyph coverage
     (Arizonia and Figtree are Latin-only), so it carries the page's Nepali text. The
     old Devanagari fonts stay as fallbacks for any glyph Eczar is missing. */
  --font-devanagari:
    "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  /* English-only UI text: the page title, "Online Examination", headings, buttons,
     package labels, etc. Figtree has no Devanagari glyphs, so any Nepali text sharing
     an element with it (e.g. a heading combining both scripts) falls through to
     --font-devanagari per character automatically — this is normal CSS behaviour,
     nothing extra to configure. */
  --font-heading: "Poppins", var(--font-devanagari);
  --font-ui: "Montserrat", var(--font-devanagari);
  /* A decorative accent for a short, all-English flourish (the footer credit) —
     Arizonia has no Devanagari glyphs, so it must stay off any Nepali text. */
  --font-accent: "Arizonia", cursive, var(--font-heading);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}

/* NOTE ON THE "PREETI" FONT REQUEST — see the chat reply for the full explanation.
   Preeti is not a Unicode font: it maps Devanagari shapes onto plain ASCII/Latin
   character codes, so it only displays correctly on text that was TYPED in Preeti's
   own encoding. All of this page's Nepali text is normal Unicode (the same encoding
   every modern site, phone and screen reader expects) — applying font-family: Preeti
   to it would not "restyle" it, it would either show boxes/garbled Latin-ish glyphs or
   silently fall through to the next font in this list, depending on the browser. Kept
   as a CSS variable so it's a one-line change if/when this is resolved (see the reply).*/
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-devanagari);
  font-size: 1.125rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
main.wrap {
  flex: 1;
  padding-top: 24px;
  padding-bottom: 36px;
}

/* Header */
.site-header {
  position: relative;
  background: var(--white);
  padding: 18px 0 20px;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--navy) 0 82%, var(--red) 82% 100%);
}
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.logo {
  display: block;
  width: 150px;
  height: auto;
}
.site-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-family: var(--font-heading);
}
.site-header h1 {
  margin: 2px 0 0;
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 600;
}
.exam-date {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* Panels */
.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 18px;
}
.panel h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--navy);
}
.panel p {
  margin: 0 0 14px;
}
.step {
  color: var(--red);
  margin-right: 6px;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
fieldset:disabled {
  opacity: 0.7;
}

/* Exam selection */
.select-panel {
  text-align: center;
}
.exam-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  text-align: left;
}
.exam-option {
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}
.exam-option:hover {
  border-color: var(--navy);
  background: #f5f8ff;
}
.exam-option .arrow {
  color: var(--navy);
  font-weight: 700;
  flex: none;
}
.selected-exam-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 1rem;
}
.link-btn {
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--navy);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.link-btn:hover {
  border-color: var(--navy);
  background: #f5f8ff;
}

/* Fields */
.field {
  margin-bottom: 18px;
}
.field:last-child {
  margin-bottom: 0;
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.req {
  color: var(--error);
  font-weight: 400;
  font-size: 0.95rem;
}

input[type="text"] {
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
}
input:focus {
  border-color: var(--navy);
}
input.invalid {
  border-color: var(--error);
}
input[readonly] {
  background: var(--bg);
  color: var(--muted);
}
:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

.field-error {
  color: var(--error);
  font-weight: 600;
  margin: 6px 0 0 !important;
  font-size: 1rem;
}
.field-error:empty {
  display: none;
}

/* Upload */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 130px;
  padding: 20px 14px;
  margin: 0;
  cursor: pointer;
  border: 2px dashed var(--navy);
  border-radius: var(--radius);
  background: #f5f8ff;
}
.upload-area:hover {
  background: #eaf0ff;
}
.visually-hidden:focus-visible + .upload-area {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}
.upload-area.has-file {
  border-style: solid;
  border-color: var(--success);
  background: #f0faf3;
}
.upload-text {
  font-size: 1.2rem;
  color: var(--navy);
}
.upload-hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 4px;
}

.file-info,
.receipt {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.file-info dt,
.receipt dt {
  font-weight: 600;
}
.file-info dd,
.receipt dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Buttons */
.btn {
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 26px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-primary {
  background: var(--navy);
  color: var(--white);
}
.btn-primary:hover:not(:disabled) {
  background: var(--navy-dark);
}
.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover {
  background: #f5f8ff;
}
.btn:disabled {
  background: #b8c1d3;
  border-color: #b8c1d3;
  color: var(--white);
  cursor: not-allowed;
}
.btn-block {
  display: flex;
  width: 100%;
}
#beginBtn {
  margin-top: 18px;
}

.submit-hint,
.begin-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  margin: 10px 0 0 !important;
}

/* Alerts / status */
.alert {
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-weight: 600;
}
.alert-error {
  background: #fef2f2;
  color: #991b1b;
  border: 2px solid var(--error);
}
.upload-status {
  margin-top: 16px;
  padding: 18px;
  text-align: center;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
}
.upload-status p {
  margin: 0 0 10px;
}
.upload-note {
  color: var(--muted);
  font-size: 1rem;
  margin: 10px 0 0 !important;
}
.progress {
  height: 10px;
  background: #dce3f1;
  border-radius: 5px;
  overflow: hidden;
}
.progress-bar {
  width: 40%;
  height: 100%;
  background: var(--red);
  border-radius: 5px;
  animation: slide 1.3s ease-in-out infinite;
}
@keyframes slide {
  0% {
    margin-left: -40%;
  }
  100% {
    margin-left: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    animation: none;
    width: 100%;
  }
}

/* Question viewer */
.qframe-wrap {
  position: relative;
}
.qframe {
  display: block;
  width: 100%;
  height: 75vh;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
/* Covers the corner where Google Drive's own "open in new window" icon sits, so a tap
   there hits this (inert) element instead of Drive's icon underneath. Best-effort only
   — see the chat reply: it can't reach anything Drive renders elsewhere in the frame,
   and Drive could reposition that icon in a future update. */
.qframe-shield {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 52px;
  border-top-right-radius: var(--radius);
  z-index: 2;
}
.qp-ended-notice {
  margin: 0;
  padding: 16px 18px;
  background: #fff7ed;
  color: #9a3412;
  border: 2px solid #fdba74;
  border-radius: var(--radius);
  font-weight: 600;
}

/* Timer bar */
.timer-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--navy);
  color: var(--white);
}
.timer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}
.timer-inner strong {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.timer-bar.warn {
  background: var(--error);
}

/* Success / time-up */
.success-panel {
  border-left-color: var(--success);
}
.success-panel h2 {
  color: var(--success);
  font-size: 1.4rem;
}
.success-panel h2:focus {
  outline: none;
}
.timeup-panel {
  border-left-color: var(--error);
}
.timeup-panel h2 {
  color: var(--error);
  font-size: 1.4rem;
}

/* Dialogs */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  padding: 16px;
  overflow-y: auto;
  background: rgba(12, 39, 102, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 22px;
  width: 100%;
  max-width: 440px;
  margin: auto;
}
.dialog p {
  margin: 0 0 12px;
}
.confirm-detail {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.dialog-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  margin-top: 18px;
}
.dialog-actions .btn {
  width: 100%;
}

.welcome {
  max-width: 480px;
  text-align: center;
  border-top: 5px solid var(--red);
  animation: rise 0.35s ease-out;
}
.welcome .logo {
  width: 130px;
  margin: 0 auto 6px;
}
.welcome h2 {
  margin: 0 0 4px;
  font-size: 1.8rem;
  color: var(--navy);
}
.welcome-exam {
  font-weight: 700;
  color: var(--red);
}
.welcome-steps {
  text-align: left;
  margin: 0 0 14px;
  padding-left: 1.4em;
}
.welcome-steps li {
  margin-bottom: 6px;
}
.welcome-time {
  text-align: left;
  background: #f5f8ff;
  border-left: 4px solid var(--navy);
  padding: 10px 12px;
  border-radius: var(--radius);
}
.welcome-wish {
  color: var(--muted);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .welcome {
    animation: none;
  }
}

/* Footer */
.site-footer {
  background: var(--navy-dark);
  color: #c9d3ec;
  padding: 16px 0;
  font-size: 0.92rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
}
.site-footer strong {
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: 400;
}
.site-footer a {
  color: #c9d3ec;
}

[hidden] {
  display: none !important;
}

@media (min-width: 640px) {
  body {
    font-size: 1.0625rem;
  }
  .header-inner {
    flex-direction: row;
    text-align: left;
    gap: 22px;
  }
  .site-header h1 {
    font-size: 1.9rem;
  }
  .panel {
    padding: 24px 26px;
  }
  .exam-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dialog-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
  .dialog-actions .btn {
    width: auto;
  }
}

/* Package selection */
.package-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.package-option {
  font-family: var(--font-ui);
  flex: 1 1 140px;
  min-height: 54px;
  padding: 10px 16px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.package-option:hover {
  border-color: var(--navy);
  background: #f5f8ff;
}
.package-option.selected {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}
.package-grid.locked .package-option {
  cursor: not-allowed;
  opacity: 0.85;
}

.welcome-back {
  display: inline-flex;
  margin-bottom: 14px;
  font-size: 0.95rem;
}