@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --primary: #244c89;
  --primary-2: #1f8a9b;
  --accent: #ffad3d;
  --accent-2: #ff6f61;
  --mint: #35c2a3;
  --rose: #f4798f;
  --ink: #172033;
  --muted: #667085;
  --surface: rgba(255, 255, 255, .82);
  --surface-strong: #ffffff;
  --line: rgba(46, 63, 99, .12);
  --bg: #fff7ec;
  --shadow-soft: 0 18px 42px rgba(61, 72, 102, .12);
  --shadow-deep: 0 28px 70px rgba(73, 49, 23, .18);
}

* {
  letter-spacing: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background:
    linear-gradient(120deg, rgba(255, 243, 225, .92), rgba(240, 249, 255, .88) 48%, rgba(255, 237, 231, .92)),
    #fff7ec;
  position: relative;
  overflow-x: hidden;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(132deg, transparent 0 14%, rgba(255, 173, 61, .16) 14% 24%, transparent 24% 52%, rgba(31, 138, 155, .13) 52% 62%, transparent 62%),
    linear-gradient(38deg, transparent 0 50%, rgba(244, 121, 143, .10) 50% 58%, transparent 58%);
  animation: premiumBackdrop 16s ease-in-out infinite alternate;
}

body:after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 48vh;
  z-index: -1;
  background: linear-gradient(0deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.app-navbar {
  background: rgba(27, 54, 95, .88);
  box-shadow: 0 18px 50px rgba(33, 53, 84, .22);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.navbar .nav-link {
  border-radius: 999px;
  padding: .52rem .82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .82) !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.navbar .nav-link:hover {
  background: rgba(255, 255, 255, .13);
  color: #fff !important;
  transform: translateY(-1px);
}

.navbar .top-context-label,
.navbar .top-context-label:hover {
  cursor: default;
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .72) !important;
  transform: none;
}

.navbar-brand {
  color: #fff !important;
}

.portal-toast-wrap {
  position: fixed;
  top: 86px;
  right: 18px;
  z-index: 3000;
  display: grid;
  gap: 10px;
  max-width: min(360px, calc(100vw - 36px));
}

.portal-toast {
  transform: translateX(18px);
  opacity: 0;
  padding: 12px 14px;
  border-radius: 16px;
  color: #17325f;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow: 0 18px 38px rgba(36, 54, 89, .16);
  font-weight: 800;
  transition: transform .2s ease, opacity .2s ease;
}

.portal-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.portal-toast-success {
  border-left: 5px solid #16a37a;
}

.portal-toast-error {
  border-left: 5px solid #e5484d;
}

.portal-toast-warning {
  border-left: 5px solid var(--accent);
}

.portal-toast-info {
  border-left: 5px solid var(--primary-2);
}

.nav-logo {
  width: 218px;
  max-height: 48px;
  object-fit: contain;
  background: rgba(255, 255, 255, .96);
  border-radius: 10px;
  padding: 5px 8px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .18);
}

.app-shell {
  min-height: calc(100vh - 130px);
}

.footer-band {
  background: rgba(29, 42, 70, .92);
  color: #eef4ff;
  border-top: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px);
}

.content-wrap {
  max-width: 1240px;
  padding: 30px 18px;
}

.hero-band {
  min-height: 360px;
  display: flex;
  align-items: center;
  color: #172033;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .82), rgba(255, 243, 222, .72)),
    linear-gradient(135deg, #fff0d8, #eaf8ff 58%, #ffe6e2);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .8);
}

.hero-band:before {
  content: "";
  position: absolute;
  inset: 24px 7% auto auto;
  width: 360px;
  height: 210px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255, 173, 61, .22), rgba(53, 194, 163, .18));
  transform: rotate(-10deg) skewX(-8deg);
  box-shadow: var(--shadow-deep);
  animation: premiumFloat 5.5s ease-in-out infinite;
}

.hero-band:after {
  inset: auto auto -42px 8%;
  width: 360px;
  height: 130px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(36, 76, 137, .13), rgba(244, 121, 143, .15));
  transform: rotate(8deg);
}

.hero-band h1,
.candidate-hero-copy h1 {
  color: #17325f;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 8px 24px rgba(36, 76, 137, .12);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  margin-bottom: 15px;
  border-radius: 999px;
  color: #8a4f00;
  background: linear-gradient(135deg, rgba(255, 201, 105, .40), rgba(255, 255, 255, .72));
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 12px 24px rgba(255, 143, 61, .14);
  font-weight: 900;
  font-size: .82rem;
}

.hero-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.career-hero-pro {
  overflow: hidden;
}

.career-hero-pro .content-wrap {
  width: 100%;
}

.career-visual-3d {
  min-height: 280px;
  position: relative;
  perspective: 1000px;
}

.career-visual-3d.compact {
  min-height: 230px;
}

.career-glass-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(255, 255, 255, .86);
  box-shadow: 0 22px 48px rgba(42, 56, 92, .16);
  backdrop-filter: blur(18px);
  color: #17325f;
  font-weight: 900;
  animation: premiumFloat 5s ease-in-out infinite;
}

.career-glass-card i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, var(--accent-2), var(--accent));
  box-shadow: 0 14px 28px rgba(255, 111, 97, .24);
}

.career-glass-card.card-a {
  top: 18px;
  right: 92px;
  transform: rotateY(-14deg) rotateX(8deg);
}

.career-glass-card.card-b {
  left: 18px;
  bottom: 66px;
  animation-delay: .75s;
  transform: rotateY(13deg) rotateX(-7deg);
}

.career-glass-card.card-c {
  right: 16px;
  bottom: 18px;
  animation-delay: 1.2s;
  transform: rotateY(-8deg) rotateX(8deg);
}

.career-cube-scene {
  position: absolute;
  top: 76px;
  right: 122px;
  width: 160px;
  height: 160px;
  transform: rotateX(58deg) rotateZ(42deg);
  transform-style: preserve-3d;
}

.career-cube-scene span {
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(135deg, #ffc45b, #fff4d8);
  box-shadow: 26px 26px 55px rgba(107, 75, 34, .20);
  animation: cubeLift 4.4s ease-in-out infinite;
}

.career-cube-scene span:nth-child(2) {
  transform: translate3d(34px, 34px, 34px);
  background: linear-gradient(135deg, #72d7c2, #effff9);
  animation-delay: .4s;
}

.career-cube-scene span:nth-child(3) {
  transform: translate3d(68px, 68px, 68px);
  background: linear-gradient(135deg, #8fb4ff, #fff);
  animation-delay: .8s;
}

.job-card-pro {
  position: relative;
  min-height: 292px;
  overflow: hidden;
}

.job-card-pro:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 173, 61, .10), transparent 42%, rgba(31, 138, 155, .10));
  pointer-events: none;
}

.job-card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  box-shadow: 0 18px 34px rgba(36, 76, 137, .20);
}

.job-card-pro > * {
  position: relative;
}

.job-card-summary {
  min-height: 72px;
  color: #52627a;
  line-height: 1.55;
}

.job-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.job-description-panel {
  max-width: 1080px;
}

.formatted-jd {
  display: grid;
  gap: 14px;
  color: #26364d;
  line-height: 1.7;
}

.formatted-jd h3 {
  margin: 8px 0 0;
  color: #17325f;
  font-size: 1.08rem;
  font-weight: 900;
}

.formatted-jd p {
  margin: 0;
}

.formatted-jd ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formatted-jd li {
  position: relative;
  padding: 11px 12px 11px 38px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(36, 76, 137, .10);
}

.formatted-jd li:before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 12px;
  top: 12px;
  color: #08755e;
}

.admin-hero-pro {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 244, 226, .62)),
    linear-gradient(120deg, rgba(255, 173, 61, .12), rgba(31, 138, 155, .10));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.admin-hero-pro:before {
  content: "";
  position: absolute;
  inset: auto 15% -48px auto;
  width: 300px;
  height: 130px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(244, 121, 143, .14), rgba(53, 194, 163, .14));
  transform: rotate(-8deg);
}

.admin-hero-stack {
  display: flex;
  gap: 10px;
  margin-left: auto;
  margin-right: 18px;
}

.admin-hero-stack span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 18px 34px rgba(255, 111, 97, .20);
  animation: premiumFloat 4s ease-in-out infinite;
}

.admin-hero-stack span:nth-child(2) {
  background: linear-gradient(145deg, var(--primary-2), var(--mint));
  animation-delay: .55s;
}

.admin-hero-stack span:nth-child(3) {
  background: linear-gradient(145deg, var(--primary), #86aef7);
  animation-delay: 1s;
}

.assessment-start-hero {
  margin-bottom: 22px;
}

.content-wrap.assessment-center-page,
.content-wrap.question-bank-page,
.content-wrap.assessment-review-page {
  max-width: 1400px;
}

.assessment-workspace {
  min-width: 0;
}

.assessment-hero-actions,
.question-bank-metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.assessment-hero-actions span,
.question-bank-metrics span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .84);
  color: #44536b;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(36, 54, 89, .08);
}

.assessment-hero-actions strong,
.question-bank-metrics strong {
  color: #17325f;
}

.assessment-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.assessment-bank-panel {
  min-width: 0;
}

.assessment-description {
  max-width: 440px;
}

.assessment-side-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-self: start;
}

.assessment-setup-panel {
  min-width: 0;
}

.assessment-setup-panel .section-heading-row {
  align-items: flex-start;
}

.assessment-mode-switch {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .70);
  border: 1px solid rgba(36, 76, 137, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.assessment-mode-switch button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #44536b;
  font-weight: 900;
}

.assessment-mode-switch button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 24px rgba(36, 76, 137, .18);
}

.assessment-mode-panel {
  display: none;
}

.assessment-mode-panel.active {
  display: block;
}

.assessment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.assessment-form-grid .span-2 {
  grid-column: span 2;
}

.assessment-action-panel {
  position: static;
}

.question-composer {
  position: sticky;
  top: 94px;
}

.assessment-lower-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.section-heading-row,
.panel-icon-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-icon-title {
  justify-content: flex-start;
}

.panel-icon-title > i {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 16px 30px rgba(255, 111, 97, .20);
}

.empty-state-pro {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 247, 235, .72));
  border: 1px dashed rgba(36, 76, 137, .22);
  color: #52627a;
  font-weight: 800;
}

.empty-state-pro i {
  font-size: 1.45rem;
  color: var(--accent-2);
}

.assessment-attempts-hero,
.assessment-review-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.assessment-attempts-panel {
  min-width: 0;
}

.attempt-list-pro {
  display: grid;
  gap: 14px;
}

.attempt-row-pro {
  display: grid;
  grid-template-columns: minmax(220px, 1.05fr) minmax(360px, 1.35fr) minmax(280px, .8fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 248, 239, .72));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow: 0 14px 28px rgba(36, 54, 89, .08);
}

.attempt-main h3 {
  margin: 10px 0 3px;
  font-size: 1.05rem;
  color: #17233b;
}

.attempt-main p {
  margin-bottom: 2px;
  color: #44536b;
}

.attempt-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.attempt-metrics div,
.attempt-score-strip div {
  min-height: 66px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(36, 76, 137, .09);
}

.attempt-metrics span,
.attempt-score-strip span {
  display: block;
  margin-bottom: 4px;
  color: #71809a;
  font-size: .76rem;
  font-weight: 900;
}

.attempt-metrics strong,
.attempt-score-strip strong {
  color: #17325f;
  font-weight: 950;
}

.attempt-actions {
  display: grid;
  gap: 8px;
}

.attempt-actions form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
}

.retry-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dcfff3, #f7fffb);
  color: #08755e;
  font-weight: 900;
  font-size: .78rem;
}

.attempt-score-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.assessment-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  gap: 18px;
  align-items: start;
}

.attempt-answer-panel {
  min-width: 0;
}

.attempt-answer-scroll {
  max-height: 62vh;
  overflow: auto;
  padding-right: 8px;
  display: grid;
  gap: 12px;
}

.answer-review-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(150px, 180px);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(247, 252, 255, .76));
  border: 1px solid rgba(36, 76, 137, .08);
}

.answer-review-row.answer-correct {
  background: linear-gradient(135deg, rgba(238, 255, 249, .92), rgba(255, 255, 255, .78));
}

.answer-review-row.answer-wrong {
  background: linear-gradient(135deg, rgba(255, 242, 242, .92), rgba(255, 255, 255, .78));
}

.answer-review-row.answer-empty {
  background: linear-gradient(135deg, rgba(246, 249, 252, .94), rgba(255, 255, 255, .78));
}

.answer-index {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #17325f;
  background: linear-gradient(135deg, #fff1d8, #fff);
  font-weight: 950;
}

.answer-body h3 {
  margin: 0 0 8px;
  color: #17233b;
  font-size: .96rem;
  line-height: 1.35;
}

.answer-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  color: #59677f;
  font-size: .84rem;
}

.answer-options span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.answer-outcome {
  display: grid;
  gap: 7px;
}

.answer-outcome span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: #687891;
  font-size: .8rem;
  font-weight: 800;
}

.answer-outcome strong {
  color: #17325f;
}

.attempt-review-sidebar {
  position: sticky;
  top: 92px;
}

.proctoring-mini-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}

.proctoring-mini-list > div:not(.empty-state-pro) {
  padding: 11px 0;
  border-bottom: 1px solid rgba(36, 76, 137, .10);
}

.proctoring-mini-list p {
  margin: 6px 0 0;
  color: #687891;
  font-size: .82rem;
}

.question-bank-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.question-bank-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 18px;
  align-items: start;
}

.question-list-pro {
  display: grid;
  gap: 14px;
}

.question-review-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(255, 248, 238, .76));
  border: 1px solid rgba(255, 255, 255, .84);
  box-shadow: 0 14px 32px rgba(36, 54, 89, .10);
}

.question-review-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--accent), var(--mint), var(--rose));
}

.question-review-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.question-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  box-shadow: 0 14px 28px rgba(36, 76, 137, .20);
  font-weight: 900;
}

.question-review-top h3 {
  margin: 0;
  color: #17325f;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.question-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-left: 54px;
}

.question-option-chip {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(36, 76, 137, .10);
  color: #52627a;
  font-size: .9rem;
}

.question-option-chip strong {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf8ff;
  color: #244c89;
}

.question-option-chip span {
  overflow-wrap: anywhere;
}

.question-option-chip.is-correct {
  background: linear-gradient(135deg, rgba(220, 255, 243, .92), rgba(247, 255, 251, .96));
  border-color: rgba(8, 117, 94, .20);
  color: #08755e;
  font-weight: 800;
}

.question-option-chip.is-correct strong {
  background: #08755e;
  color: #fff;
}

.question-composer {
  align-self: start;
}

.assessment-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.assessment-rule-grid span {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255, 247, 235, .78));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 14px 30px rgba(38, 52, 86, .08);
  font-weight: 800;
}

.assessment-rule-grid i {
  color: var(--accent-2);
  font-size: 1.35rem;
}

.assessment-shell {
  min-height: calc(100vh - 74px);
  background:
    linear-gradient(120deg, rgba(255, 247, 236, .92), rgba(239, 250, 255, .94) 46%, rgba(255, 235, 231, .90)),
    #fff7ec;
}

.assessment-topbar {
  position: sticky;
  top: 74px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: rgba(27, 54, 95, .9);
  color: #fff;
  box-shadow: 0 18px 42px rgba(33, 53, 84, .22);
  backdrop-filter: blur(18px);
}

.assessment-topbar span {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .85rem;
}

.assessment-timer {
  min-width: 110px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  text-align: center;
  font-weight: 900;
  box-shadow: 0 16px 30px rgba(255, 111, 97, .26);
}

.assessment-paper {
  max-width: 980px;
}

.assessment-question-card,
.assessment-question-row {
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: var(--shadow-soft);
}

.assessment-question-card h2 {
  font-size: 1.08rem;
  color: #17325f;
  margin-bottom: 14px;
}

.assessment-option {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(36,76,137,.10);
  cursor: pointer;
  font-weight: 700;
}

.assessment-option:has(input:checked) {
  background: linear-gradient(135deg, rgba(255, 195, 90, .26), rgba(53, 194, 163, .16));
  border-color: rgba(255, 143, 61, .4);
}

.assessment-submit-bar {
  position: sticky;
  bottom: 0;
  padding: 16px 0;
  background: linear-gradient(0deg, rgba(255, 247, 236, .96), rgba(255, 247, 236, .50));
  backdrop-filter: blur(12px);
}

.status-Passed {
  background: linear-gradient(135deg, #dcfff3, #f7fffb);
  color: #08755e;
}

.status-Failed,
.status-Disqualified {
  background: linear-gradient(135deg, #ffe3e5, #fff7f7);
  color: #b42318;
}

.status-InProgress,
.status-UnderReview {
  background: linear-gradient(135deg, #fff1d8, #fffaf0);
  color: #9a5b00;
}

.lead,
.text-muted {
  color: var(--muted) !important;
}

.panel,
.dash-card-pro,
.form-paper {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 22px;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
}

.panel,
.dash-card-pro {
  transform-style: preserve-3d;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.panel:hover,
.dash-card-pro:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, .95);
  border-color: rgba(255, 173, 61, .32);
}

.panel-pad {
  padding: 24px;
}

.illustration {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-2) 56%, var(--rose));
  box-shadow: 0 22px 42px rgba(255, 111, 97, .24), inset 0 1px 0 rgba(255, 255, 255, .45);
  transform: rotateX(10deg) rotateY(-10deg);
}

.illustration i {
  filter: drop-shadow(0 7px 10px rgba(84, 38, 25, .26));
}

.btn {
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(31, 44, 71, .08);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(31, 44, 71, .14);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
}

.btn-warning {
  background: linear-gradient(135deg, #ffc35a, #ff8f3d);
  border-color: transparent;
  color: #25180c;
}

.btn-outline-primary {
  color: #244c89;
  border-color: rgba(36, 76, 137, .34);
  background: rgba(255, 255, 255, .46);
}

.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning {
  background: rgba(255, 255, 255, .52);
}

.form-control,
.form-select {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(36, 76, 137, .16);
  background-color: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
  font-weight: 600;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(255, 143, 61, .82);
  box-shadow: 0 0 0 .24rem rgba(255, 173, 61, .18), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.table thead th {
  background: transparent;
  border: 0;
  color: #52627a;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
}

.table tbody tr {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 9px 22px rgba(36, 54, 89, .07);
}

.table tbody td {
  border: 0;
  padding: 14px 12px;
}

.table tbody td:first-child {
  border-radius: 14px 0 0 14px;
}

.table tbody td:last-child {
  border-radius: 0 14px 14px 0;
}

.status-badge,
.badge {
  border-radius: 999px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

.status-badge {
  padding: .46rem .76rem;
  background: linear-gradient(135deg, #eaf8ff, #fff);
  color: #244c89;
}

.status-Submitted,
.status-UnderReview {
  background: linear-gradient(135deg, #fff1d8, #fffaf0);
  color: #9a5b00;
}

.status-Shortlisted,
.status-Selected,
.status-Joined {
  background: linear-gradient(135deg, #dcfff3, #f7fffb);
  color: #08755e;
}

.status-InterviewScheduled {
  background: linear-gradient(135deg, #e5f3ff, #fff);
  color: #1f5f9b;
}

.status-Rejected {
  background: linear-gradient(135deg, #ffe3e5, #fff7f7);
  color: #b42318;
}

.status-Withdrawn {
  background: linear-gradient(135deg, #f1f5f9, #fff);
  color: #475569;
}

.quick-action-bar form,
.application-row-pro form {
  display: inline-flex;
  margin: 0;
}

.admin-grid {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
}

.admin-menu {
  top: 88px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.admin-menu a {
  min-height: 44px;
  align-items: center;
  margin-bottom: 4px;
  border-radius: 16px;
  color: #44536b;
  font-weight: 800;
}

.admin-menu a:hover {
  background: linear-gradient(135deg, rgba(255, 173, 61, .20), rgba(31, 138, 155, .12));
  color: #17325f;
  transform: translateX(3px);
}

.metric {
  border-left: 0;
  overflow: hidden;
  position: relative;
}

.metric:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(180deg, var(--accent), var(--mint), var(--rose));
}

.metric .fs-3 {
  color: #17325f;
}

.chart-fallback {
  display: grid;
  gap: 10px;
  min-height: 220px;
  align-content: center;
}

.chart-fallback div {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(36, 76, 137, .08);
}

.chart-fallback span,
.chart-fallback strong {
  position: relative;
  z-index: 1;
}

.chart-fallback span {
  color: #44536b;
  font-weight: 800;
}

.chart-fallback strong {
  color: #17325f;
  font-weight: 950;
}

.chart-fallback em {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 173, 61, .22), rgba(31, 138, 155, .14));
  border-radius: inherit;
}

.kanban-board {
  grid-template-columns: repeat(6, minmax(250px, 1fr));
  gap: 18px;
}

.kanban-column {
  min-height: 560px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 248, 238, .74));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}

.kanban-column:nth-child(2n) {
  background: linear-gradient(180deg, rgba(245, 252, 255, .72), rgba(255, 255, 255, .68));
}

.kanban-card {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 246, 232, .92));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 16px 34px rgba(49, 62, 91, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.kanban-card:hover {
  transform: rotateX(2deg) rotateY(-2deg) translateY(-4px);
}

.notification-row {
  border-radius: 18px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, .58);
}

.notification-row.unread {
  background: linear-gradient(135deg, rgba(255, 246, 224, .95), rgba(234, 248, 255, .88));
  border-color: rgba(255, 173, 61, .35);
}

.notification-row i {
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, var(--primary-2), var(--primary));
  box-shadow: 0 12px 26px rgba(36, 76, 137, .2);
}

.timeline {
  border-left-color: rgba(255, 173, 61, .35);
}

.timeline-item:before {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 5px rgba(255, 173, 61, .18);
}

.form-paper {
  max-width: 1080px;
  padding: 30px;
}

.company-form-header {
  border: 0;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(255, 239, 216, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.application-title {
  text-decoration: none;
  color: #17325f;
  font-size: 24px;
}

.form-section-title {
  border: 0;
  border-radius: 16px 16px 0 0;
  color: #17325f;
  background: linear-gradient(135deg, rgba(255, 198, 90, .34), rgba(31, 138, 155, .14));
}

.saral-form-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 0 0 16px 16px;
}

.saral-form-table th,
.saral-form-table td {
  border-color: rgba(36, 76, 137, .12);
  background: rgba(255, 255, 255, .62);
}

.saral-form-table th {
  background: rgba(255, 247, 235, .92);
  color: #17325f;
}

.saral-form-label {
  background: rgba(242, 250, 252, .9);
  color: #27364d;
}

.form-paper-actions {
  background: rgba(255, 250, 242, .86);
  backdrop-filter: blur(14px);
  border-top-color: rgba(36, 76, 137, .10);
}

.step-pill {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .72);
  color: #617086;
  box-shadow: 0 10px 22px rgba(36, 54, 89, .10);
}

.step-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  animation: premiumPulse 1.8s ease-in-out infinite;
}

.progress {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  box-shadow: inset 0 1px 4px rgba(23, 32, 51, .09);
}

.progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--mint)) !important;
}

.candidate-dashboard {
  background:
    linear-gradient(120deg, rgba(255, 247, 236, .92), rgba(239, 250, 255, .94) 46%, rgba(255, 235, 231, .90)),
    #fff7ec;
}

.candidate-hero-3d {
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(255, 241, 220, .72)),
    linear-gradient(135deg, #ffffff, #eaf8ff 54%, #ffe7df);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.candidate-hero-3d:before {
  inset: -30% -10% auto 28%;
  background: linear-gradient(135deg, rgba(255, 173, 61, .30), rgba(53, 194, 163, .16), rgba(244, 121, 143, .14));
  transform: rotate(-13deg) skewX(-10deg);
  animation: premiumFloat 6s ease-in-out infinite;
}

.assessment-result-page {
  min-height: calc(100vh - 132px);
}

.result-card-pro {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(255, 247, 235, .78)),
    linear-gradient(120deg, rgba(234, 248, 255, .88), rgba(255, 232, 226, .76));
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.result-card-pro:before {
  content: "";
  position: absolute;
  inset: -32% -10% auto 45%;
  height: 330px;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(255, 173, 61, .28), rgba(53, 194, 163, .18), rgba(244, 121, 143, .16));
  transform: rotate(-12deg) skewX(-10deg);
}

.result-hero-pro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 28px;
  align-items: center;
}

.result-copy {
  max-width: 760px;
}

.result-kicker {
  margin: 20px 0 8px;
  color: #9a5b00;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.result-copy h1 {
  margin: 0;
  color: #17325f;
  font-size: 3rem;
  font-weight: 950;
}

.result-copy h2 {
  margin: 8px 0 8px;
  color: #17233b;
  font-size: 1.35rem;
  font-weight: 900;
}

.result-copy p {
  color: #66758d;
  font-size: 1rem;
  line-height: 1.65;
}

.score-orb {
  position: relative;
  width: 178px;
  height: 178px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 24px 54px rgba(36, 54, 89, .16), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.score-orb svg {
  width: 148px;
  height: 148px;
  transform: rotate(-90deg);
}

.score-track,
.score-progress {
  fill: none;
  stroke-width: 12;
}

.score-track {
  stroke: rgba(36, 76, 137, .10);
}

.score-progress {
  stroke: #ff8d43;
  stroke-linecap: round;
  stroke-dasharray: 339.29;
  stroke-dashoffset: var(--score-offset);
  filter: drop-shadow(0 8px 12px rgba(255, 111, 97, .22));
}

.result-passed .score-progress {
  stroke: #16a37a;
}

.result-review .score-progress {
  stroke: #f6a623;
}

.score-orb > div {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
}

.score-orb strong {
  color: #17325f;
  font-size: 2.1rem;
  font-weight: 950;
}

.score-orb span {
  color: #66758d;
  font-weight: 900;
}

.result-metric-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.result-metric-grid div {
  min-height: 104px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(36, 76, 137, .08);
  box-shadow: 0 16px 32px rgba(36, 54, 89, .08);
}

.result-metric-grid i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.result-metric-grid span {
  display: block;
  color: #71809a;
  font-size: .78rem;
  font-weight: 900;
}

.result-metric-grid strong {
  display: block;
  margin-top: 3px;
  color: #17325f;
  font-size: 1.08rem;
  font-weight: 950;
}

.result-action-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
}

.floating-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 24px 52px rgba(32, 43, 69, .18);
}

.floating-card i {
  color: var(--accent-2);
}

.cube-stack span {
  background: linear-gradient(135deg, #ffc35a, #fff4db);
  box-shadow: 28px 28px 52px rgba(113, 76, 29, .20);
}

.cube-stack span:nth-child(2) {
  background: linear-gradient(135deg, #7fd7c5, #f3fffb);
}

.cube-stack span:nth-child(3) {
  background: linear-gradient(135deg, #86aef7, #ffffff);
}

.dash-card-pro {
  border-radius: 24px;
}

.summary-strip div,
.activity-item,
.stage-item,
.application-row-pro {
  border: 1px solid rgba(255, 255, 255, .82);
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255, 247, 235, .78));
  box-shadow: 0 14px 30px rgba(38, 52, 86, .08);
}

.next-action-card {
  background: linear-gradient(135deg, #244c89, #1f8a9b 62%, #35c2a3);
}

.progress-ring {
  box-shadow: inset 0 12px 24px rgba(255, 255, 255, .92), 0 22px 44px rgba(255, 143, 61, .20);
  background:
    radial-gradient(circle at center, #fff 58%, transparent 59%),
    conic-gradient(#ff8f3d calc(var(--progress) * 1%), #dbeafe 0);
}

@keyframes premiumBackdrop {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-18px, 12px, 0) scale(1.03); }
}

@keyframes premiumFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

@keyframes premiumPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 143, 61, .28); }
  50% { box-shadow: 0 0 0 10px rgba(255, 143, 61, 0); }
}

@media (max-width: 900px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-menu {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px;
  }

  .admin-menu a {
    min-width: 0;
    align-items: center;
    overflow-wrap: anywhere;
  }

  .hero-band {
    min-height: 300px;
  }

  .nav-logo {
    width: 190px;
  }

  .career-visual-3d {
    min-height: 210px;
  }

  .career-glass-card.card-a {
    right: 36px;
  }

  .career-glass-card.card-b {
    left: 8px;
  }

  .career-cube-scene {
    right: 78px;
    scale: .78;
  }

  .admin-hero-pro {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .assessment-command-grid,
  .assessment-side-stack,
  .assessment-lower-grid,
  .question-bank-grid,
  .assessment-review-grid,
  .attempt-row-pro,
  .result-hero-pro {
    grid-template-columns: 1fr;
  }

  .assessment-action-panel,
  .question-composer,
  .attempt-review-sidebar,
  .import-panel {
    position: static;
  }

  .assessment-attempts-hero,
  .assessment-review-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .attempt-score-strip,
  .attempt-metrics,
  .result-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .score-orb {
    justify-self: start;
  }

  .question-bank-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-hero-stack {
    margin: 8px 0;
  }
}

@media (max-width: 768px) {
  .navbar > .container,
  .navbar > .container-fluid {
    gap: 8px;
  }

  .navbar-brand {
    margin-right: 0;
    min-width: 0;
  }

  .nav-logo {
    width: min(176px, 52vw);
    max-height: 42px;
  }

  .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  .navbar .nav-link {
    padding: .42rem .56rem;
    font-size: .82rem;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .top-context-label {
    max-width: 54vw;
    white-space: normal;
    line-height: 1.2;
  }

  .admin-hero-pro,
  .candidate-hero-3d,
  .assessment-attempts-hero,
  .assessment-review-hero,
  .question-bank-hero {
    border-radius: 20px;
  }

  .section-heading-row,
  .card-head,
  .assessment-hero-actions,
  .question-bank-metrics,
  .hero-action-row,
  .quick-action-bar {
    flex-wrap: wrap;
  }

  .table-responsive,
  .attempt-answer-table,
  .panel.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 640px;
  }

  .assessment-answer-panel {
    max-height: none;
  }

  .answer-palette {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .assessment-topbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .assessment-timer {
    min-width: 92px;
  }
}

@media (max-width: 560px) {
  .content-wrap {
    padding: 20px 12px;
  }

  .panel-pad,
  .form-paper {
    padding: 16px;
  }

  .admin-grid {
    gap: 12px;
  }

  .admin-menu {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .admin-menu a {
    padding: 9px 10px;
  }

  .notification-row {
    grid-template-columns: 42px 1fr;
  }

  .notification-row time {
    grid-column: 2;
  }

  .career-visual-3d {
    display: none;
  }

  .hero-band {
    min-height: auto;
    padding: 30px 0;
  }

  .hero-band h1,
  .candidate-hero-copy h1 {
    font-size: 2rem;
    line-height: 1.08;
  }

  .hero-quick-row .btn,
  .hero-action-row .btn,
  .assessment-hero-actions .btn,
  .section-heading-row .btn {
    width: 100%;
    justify-content: center;
  }

  .section-heading-row,
  .assessment-hero-actions,
  .question-bank-metrics {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .assessment-setup-panel .section-heading-row {
    flex-direction: column;
  }

  .assessment-mode-switch {
    width: 100%;
  }

  .assessment-mode-switch button {
    flex: 1;
    justify-content: center;
    min-width: 0;
    padding-inline: 8px;
  }

  .assessment-form-grid {
    grid-template-columns: 1fr;
  }

  .assessment-form-grid .span-2 {
    grid-column: span 1;
  }

  .attempt-score-strip,
  .attempt-metrics,
  .result-metric-grid,
  .answer-review-row,
  .answer-options,
  .attempt-actions form {
    grid-template-columns: 1fr;
  }

  .result-card-pro {
    padding: 18px;
  }

  .result-copy h1 {
    font-size: 2.2rem;
  }

  .answer-index {
    width: 34px;
    height: 34px;
  }

  .question-review-top {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .question-review-top .status-badge {
    grid-column: 2;
    width: max-content;
  }

  .question-option-grid {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .assessment-submit-bar,
  .form-paper-actions,
  .attempt-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .assessment-submit-bar .btn,
  .form-paper-actions .btn,
  .attempt-actions .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .content-wrap {
    padding-inline: 10px;
  }

  .nav-logo {
    width: min(150px, 48vw);
    padding: 4px 6px;
  }

  .navbar .nav-link {
    font-size: .78rem;
    padding: .36rem .48rem;
  }

  .panel-pad,
  .form-paper,
  .dash-card-pro {
    padding: 14px;
  }

  .hero-band h1,
  .candidate-hero-copy h1,
  .result-copy h1 {
    font-size: 1.72rem;
  }

  .answer-palette {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
  }

  .answer-tile {
    min-height: 40px;
    font-size: .72rem;
  }

  .result-metric-grid,
  .attempt-score-strip,
  .attempt-metrics {
    grid-template-columns: 1fr;
  }
}