:root{
  --navy:#0A2342;
  --navy-dark:#071729;
  --teal:#00707F;
  --orange:#C96A16;
  --orange-light:#DBE1EA;
  --orange-tint:#FCEEDD;
  --orange-tint2:#F5DFC0;
  --gray:#4C5A6E;
  --lgray:#DBE1EA;
  --offwhite:#EEF1F6;
  --white:#FFFFFF;
  --red:#9A2B2B;
  --green:#1F7A4D;
  --ink:#13212F;
  --card-bg:#FFFFFF;
  --page-bg:#F6F7F9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --card-bg:#121C2B;
    --page-bg:#0C1420;
    --ink:#E8ECF2;
    --offwhite:#182437;
    --orange-tint:#3A2A18;
    --orange-tint2:#2E2012;
    --lgray:#293651;
    --orange-light:#293651;
    --gray:#A9B6C8;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--ink);
  font-family:'Public Sans', -apple-system, sans-serif;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Source Serif 4', Georgia, serif;
  color:var(--navy);
  margin:0 0 .4em 0;
}
@media (prefers-color-scheme: dark){ h1,h2,h3,h4{ color:#F2F6FA; } }
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:var(--teal);}

/* ===== Toolbar — hidden until the user scrolls, then slides in fixed at top ===== */
body{ padding-top:0; }
.toolbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:10px 20px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--orange-light);
  flex-wrap:wrap;
  transform:translateY(-100%);
  transition:transform 0.25s ease;
}
.toolbar.visible{ transform:translateY(0); }
@media (prefers-color-scheme: dark){ .toolbar{ background:rgba(19,34,53,0.95); } }
.tb-logo{ height:22px; width:auto; display:block; flex-shrink:0; }
.toolbar .tb-group{ display:flex; align-items:center; gap:8px; }
.tb-label{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray); }
.tb-title{ display:flex; flex-direction:column; gap:1px; line-height:1.25; min-width:0; }
.tb-title-kicker{ font-size:11.5px; font-weight:600; letter-spacing:0.02em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-title-programme{ font-size:11px; color:var(--gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (prefers-color-scheme: dark){ .tb-title-kicker{ color:#F2F6FA; } }
@media (max-width:560px){ .tb-title-programme{ display:none; } }
.tb-btn{
  border:1px solid var(--orange-light); background:var(--card-bg); color:var(--ink);
  padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
}
.tb-btn:hover{ background:var(--orange-tint); }
.tb-btn.primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.tb-btn.primary:hover{ filter:brightness(1.1); }
.tb-btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ===== Banner (reused NXTHarbor banner design) ===== */
.banner{
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(58,86,128,0.55) 0%, rgba(58,86,128,0) 55%),
    linear-gradient(180deg, #0D2A4E 0%, #0A2342 60%, #081C38 100%);
  color:#EAF0F8;
  padding:24px 28px;
  border-bottom:3px solid #F28C28;
}
@media (prefers-color-scheme: dark){ .banner{ background:linear-gradient(180deg,#0B1522 0%,#080F19 100%); } }
.banner-inner{ max-width:880px; margin:0 auto; }
.banner-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.banner-brand{ display:flex; align-items:center; gap:12px; }
.banner-logo{ height:36px; width:auto; display:block; flex-shrink:0; }
.banner-kicker{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#9FB6D6; font-weight:600; }
.banner-programme{ font-size:13.5px; color:#C6D4E6; font-style:italic; margin-top:3px; }
.banner h1{ color:#FFFFFF; font-size:29px; font-weight:600; margin-top:18px; max-width:34ch; }
.banner-tag{
  display:inline-block; flex-shrink:0; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:#F6C88C; font-weight:700; background:rgba(242,140,40,0.14);
  border:1px solid rgba(242,140,40,0.4); border-radius:100px; padding:6px 13px;
}
.banner-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.banner-chip{
  font-size:11.5px; letter-spacing:0.03em; font-weight:600;
  padding:5px 11px; border-radius:100px; border:1px solid rgba(255,255,255,0.22);
  color:#EAF0F8; background:rgba(255,255,255,0.06);
}
.banner-chip.accent{ background:rgba(242,140,40,0.18); border-color:rgba(242,140,40,0.45); color:#F6C88C; }
.banner-rule{
  margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.16);
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:#B9C8DD; font-weight:600;
}

.wrap{
  max-width:880px;
  margin:0 auto;
  padding:26px 20px 40px;
}

/* ===== Title card ===== */
.title-card{
  background:var(--card-bg);
  border:1px solid var(--orange-light);
  border-radius:14px;
  padding:26px 28px;
  margin-bottom:20px;
  box-shadow:0 1px 3px rgba(10,35,66,0.06);
}
.kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--teal);
  text-transform:uppercase;
  margin-bottom:6px;
}
.title-card h1{ font-size:30px; margin-bottom:6px; }
.title-card .subtitle{
  font-size:16.5px;
  color:var(--gray);
  margin-bottom:16px;
}
.divider-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--navy);
  background:var(--offwhite);
  border:1px solid var(--orange-light);
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  margin-bottom:16px;
}
@media (prefers-color-scheme: dark){ .divider-tag{ color:#F2F6FA; } }
.stat-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.stat-chip{
  flex:1;
  min-width:120px;
  background:var(--offwhite);
  border:1px solid var(--orange-light);
  border-radius:10px;
  padding:12px 14px;
  text-align:center;
}
.stat-chip .num{
  font-family:'Source Serif 4', serif;
  font-weight:700;
  font-size:22px;
  color:var(--navy);
  display:block;
}
@media (prefers-color-scheme: dark){ .stat-chip .num{ color:#F2F6FA; } }
.stat-chip .lbl{
  font-size:12px;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* ===== Generic card/section ===== */
.card{
  background:var(--card-bg);
  border:1px solid var(--orange-light);
  border-radius:14px;
  padding:24px 28px;
  margin-bottom:20px;
  box-shadow:0 1px 3px rgba(10,35,66,0.05);
}
.card h2{
  font-size:20px;
  border-bottom:2px solid var(--navy);
  padding-bottom:8px;
  margin-bottom:14px;
}
.card h2 .qn{ color:var(--teal); }

ul.clean{ margin:8px 0; padding-left:20px; }
ul.clean li{ margin-bottom:6px; }

.callout{
  background:var(--orange-tint);
  border:1px solid var(--orange-light);
  border-left:4px solid var(--orange);
  border-radius:8px;
  padding:14px 16px;
  margin:14px 0;
  font-size:15px;
}
.callout.underline-strong{ font-weight:600; }

/* ===== Student details / form fields ===== */
.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.field-grid .full{ grid-column:1 / -1; }
@media (max-width:600px){ .field-grid{ grid-template-columns:1fr; } }
label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--navy);
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:5px;
}
@media (prefers-color-scheme: dark){ label{ color:#DCE7F2; } }
input[type=text], input[type=email], input[type=tel], select{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--orange-light);
  border-radius:8px;
  font-family:'Public Sans', sans-serif;
  font-size:14.5px;
  background:var(--card-bg);
  color:var(--ink);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,123,143,0.15);
}
.fixed-badge{
  display:inline-block;
  background:var(--navy);
  color:#fff;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  padding:8px 14px;
  border-radius:8px;
  letter-spacing:.02em;
}

/* ===== Sticky timer (inside .toolbar) ===== */
.timer-phase{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gray);
  background:var(--offwhite);
  border:1px solid var(--orange-light);
  padding:4px 10px;
  border-radius:100px;
}
.timer-phase.done{ color:var(--red); }
.timer-display{
  font-family:'IBM Plex Mono', monospace;
  font-size:19px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:.02em;
  min-width:66px;
  display:inline-block;
}
@media (prefers-color-scheme: dark){ .timer-display{ color:#F2F6FA; } }
.timer-display.warn{ color:var(--red); }
.timer-actions{ display:flex; gap:10px; }

/* ===== Buttons (matched to assessment's tb-btn styling) ===== */
.btn{
  font-family:'Public Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:normal;
  border:1px solid var(--orange-light);
  background:var(--card-bg);
  color:var(--ink);
  padding:7px 14px;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s, transform .1s;
}
@media (prefers-color-scheme: dark){ .btn{ color:var(--ink); } }
.btn:hover{ background:var(--offwhite); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
.btn.primary:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn.submit-btn-lg{
  font-size:18px;
  font-weight:700;
  padding:16px 48px;
  border-radius:12px;
  min-width:280px;
  box-shadow:0 6px 18px rgba(10,35,66,.22);
}
.btn.submit-btn-lg:not(:disabled):hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(10,35,66,.28); }
.btn.submit-btn-lg:disabled{ box-shadow:none; }
@media (max-width:600px){
  .btn.submit-btn-lg{ min-width:0; width:100%; padding:16px 20px; }
}

/* ===== Academic integrity ===== */
.integrity-card{
  background:var(--orange-tint2);
  border:1.5px solid var(--orange);
  border-radius:14px;
  padding:22px 26px;
  margin-bottom:20px;
}
.integrity-card h2{
  color:var(--red);
  border-bottom:2px solid var(--orange-light);
  font-size:19px;
}
@media (prefers-color-scheme: dark){ .integrity-card h2{ color:#E88C99; } }
.integrity-card p{ font-size:15px; }
.declare-box{
  background:var(--card-bg);
  border:1px solid var(--orange-light);
  border-radius:10px;
  padding:16px 18px;
  margin-top:14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.declare-box input[type=checkbox]{
  width:20px;height:20px;
  margin-top:2px;
  accent-color:var(--orange);
  flex:none;
}
.declare-box label{
  text-transform:none;
  font-weight:500;
  font-size:14.5px;
  color:var(--ink);
  letter-spacing:0;
}
.decl-who{ display:block; margin-top:6px; font-size:13px; color:var(--teal); font-weight:600; }

/* ===== Exhibits ===== */
table.exhibit{
  width:100%;
  border-collapse:collapse;
  margin:12px 0 6px;
  font-size:14px;
}
table.exhibit th, table.exhibit td{
  border:1px solid var(--orange-light);
  padding:8px 10px;
  text-align:right;
}
table.exhibit th:first-child, table.exhibit td:first-child{ text-align:left; }
table.exhibit th{
  background:var(--navy);
  color:#fff;
  font-weight:600;
  font-size:13px;
}
table.exhibit tr:nth-child(even) td{ background:var(--orange-tint); }
table.exhibit tr.total td{ font-weight:700; background:var(--orange-tint2); }
.exhibit-title{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--teal);
  text-transform:uppercase;
  margin:18px 0 4px;
}
.exhibit-note{ font-size:13.5px; color:var(--gray); font-style:italic; margin:4px 0 4px; }

/* ===== Case dialogue ===== */
.bubble{
  border:1px solid var(--orange-light);
  background:var(--offwhite);
  border-radius:10px;
  padding:12px 15px;
  margin:10px 0;
  font-size:14.5px;
}
.bubble .who{ font-weight:700; color:var(--navy); }
@media (prefers-color-scheme: dark){ .bubble .who{ color:#F2F6FA; } }

/* ===== Questions ===== */
.question{
  margin-bottom:22px;
  padding-bottom:20px;
  border-bottom:1px dashed var(--orange-light);
}
.question:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.qhead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.qhead .qtext{ font-weight:600; color:var(--navy); font-size:15.5px; }
@media (prefers-color-scheme: dark){ .qhead .qtext{ color:#F2F6FA; } }
.marks-chip{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  background:var(--navy);
  color:#fff;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.formula-line{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  background:var(--offwhite);
  border:1px solid var(--orange-light);
  border-radius:6px;
  padding:6px 10px;
  margin:6px 0 10px;
  display:inline-block;
}
textarea{
  width:100%;
  border:1.5px solid var(--orange-light);
  border-radius:8px;
  padding:12px 14px;
  font-family:'Public Sans', sans-serif;
  font-size:14.5px;
  color:var(--ink);
  background:var(--card-bg);
  resize:vertical;
  min-height:120px;
}
textarea.small{ min-height:80px; }
.helper-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--gray);
  margin-top:5px;
}
.wc{ font-family:'IBM Plex Mono', monospace; }

footer.page-footer{
  text-align:center;
  font-size:12px;
  color:var(--gray);
  padding:16px 20px 10px;
}

/* ===== Submission modal ===== */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(7,23,41,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-box{
  background:var(--card-bg);
  border-radius:14px;
  padding:30px 28px;
  max-width:380px;
  width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(7,23,41,0.35);
}
.modal-title{ font-family:'Source Serif 4', serif; font-size:19px; font-weight:600; color:var(--ink); margin:0 0 6px; }
.modal-sub{ font-size:13.5px; color:var(--gray); margin:0 0 18px; word-break:break-word; }
.spinner{
  width:38px; height:38px; margin:0 auto 16px;
  border:3px solid var(--offwhite);
  border-top-color:var(--navy);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.modal-check{
  width:46px; height:46px; margin:0 auto 14px;
  border-radius:50%;
  background:rgba(31,122,77,0.12);
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700;
}
.modal-check-error{ background:rgba(154,43,43,0.1); color:var(--red); }
.modal-actions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

@media print{
  .modal-overlay, .no-print, .toolbar{ display:none !important; }
  body{ background:#fff; }
  .card, .title-card, .integrity-card{ box-shadow:none; break-inside:avoid; }
  textarea{ min-height:100px; }
}