.student-university-page {
  background:
    radial-gradient(
      circle at 84% 7%,
      rgba(214, 178, 94, 0.13),
      transparent 31%
    ),
    radial-gradient(
      circle at 8% 52%,
      rgba(55, 112, 187, 0.10),
      transparent 32%
    ),
    #060e1c;
}

.su-page {
  position: relative;
  min-height: calc(100vh - 88px);
  padding: clamp(72px, 8vw, 120px) 0;
  overflow: hidden;
}

.su-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );
  background-size: 44px 44px;
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7),
      transparent 78%
    );
}

.su-shell {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 1180px);
  margin-inline: auto;
}

.su-hero {
  max-width: 820px;
}

.su-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.su-score-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
  color: #d8d3c4;
}

.su-score-breakdown li span:last-child {
  color: #f4f0e6;
  font-weight: 600;
}

.su-eyebrow,
.su-card-audience,
.su-form-heading > span,
.su-status-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #f0d58a;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.su-eyebrow::before,
.su-form-heading > span::before,
.su-status-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: #d6b25e;
}

.su-hero h1,
.su-form-intro h1,
.su-thank-you-card h1 {
  margin: 0;
  color: #f7f3e8;
  font-size: var(--font-hero, clamp(2.1rem, 3.4vw, 3.35rem));
  font-weight: 800;
  line-height: var(--hero-line-height, 1.12);
  letter-spacing: var(--hero-letter-spacing, -0.025em);
}

.su-lead,
.su-form-intro > p,
.su-thank-you-card > p {
  max-width: 760px;
  margin: 26px 0 0;
  color: #b9c5d6;
  font-size: var(--font-body-lead, clamp(1.02rem, 1.15vw, 1.18rem));
  line-height: 1.75;
}

.su-institution-overview {
  margin-top: 56px;
  padding-top: 42px;
  border-top: 1px solid rgba(214, 178, 94, 0.16);
  scroll-margin-top: 110px;
}

.su-institution-overview h2 {
  margin: 0;
  color: #f7f3e8;
  font-size: var(--font-h2, clamp(1.65rem, 2.4vw, 2.35rem));
  font-weight: 800;
  line-height: var(--h2-line-height, 1.18);
}

.su-institution-overview .su-lead {
  max-width: 720px;
}

.su-status-card p {
  margin: 12px 0 0;
  color: #aebbd0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.su-availability {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.su-status-card {
  padding: 26px;
  border: 1px solid rgba(214, 178, 94, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(16, 36, 67, 0.88),
      rgba(8, 20, 40, 0.94)
    );
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

.su-status-card-live {
  border-color: rgba(105, 214, 168, 0.34);
}

.su-status-card-live .su-status-label {
  color: #8de5bf;
}

.su-status-card-live .su-status-label::before {
  background: #69d6a8;
}

.su-status-card h2 {
  margin: 0;
  color: #f4f0e6;
  font-size: 1.1rem;
  line-height: 1.35;
}

.su-status-card ul {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.su-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #cfd3dc;
}

.su-checkbox-label input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
}

.su-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.9rem;
}

.su-data-table th,
.su-data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(244, 240, 230, 0.12);
  color: #cfd3dc;
}

.su-data-table th {
  color: #f4f0e6;
  font-weight: 600;
}

.su-photo-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.su-photo-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(244, 240, 230, 0.2);
  flex: 0 0 auto;
}

.su-photo-avatar-empty {
  background: rgba(244, 240, 230, 0.08);
}

.su-photo-row form {
  flex: 1 1 260px;
  min-width: 220px;
}

.su-status-card li {
  position: relative;
  padding-left: 22px;
  color: #aebbd0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.su-status-card li::before {
  content: "";
  position: absolute;
  top: 0.66em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d6b25e;
  box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.10);
}

.su-hub-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

/* One clear group of actions per audience, instead of several
   competing cards that all lead to the same handful of routes. */
.su-cta-group {
  margin-top: 34px;
  padding: 28px 30px;
  border: 1px solid rgba(214, 178, 94, 0.18);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(16, 36, 67, 0.6), rgba(8, 20, 40, 0.7));
}

.su-cta-group h2 {
  margin: 0;
  color: #f4f0e6;
  font-size: 1.2rem;
}

.su-cta-group-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 18px;
}

.su-cta-group-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c6d0df;
  font-size: 0.88rem;
  font-weight: 800;
  transition: color 160ms ease;
}

.su-cta-group-tertiary:hover,
.su-cta-group-tertiary:focus-visible {
  color: #f0d58a;
}

@media (max-width: 560px) {
  .su-cta-group-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .su-cta-group .button {
    width: 100%;
    text-align: center;
  }
}

/* "We found most of your profile" — only the fields the readiness
   scorer actually finds missing, never a full re-ask of everything. */
.su-missing-items-banner {
  margin: 24px 0 0;
  padding: 20px 24px;
  border: 1px solid rgba(214, 178, 94, 0.25);
  border-radius: 16px;
  background: rgba(16, 36, 67, 0.5);
}

.su-missing-items-heading {
  margin: 0 0 10px;
  color: #f4f0e6;
  font-weight: 800;
}

.su-missing-items-label {
  margin: 0 0 4px;
  color: #f0d58a;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.su-missing-items-banner ul {
  margin: 0 0 4px;
  padding-left: 20px;
  color: #c6d0df;
  font-size: 0.9rem;
}

.su-missing-items-optional {
  margin-top: 10px;
}

.su-status-note {
  margin: 8px 0;
  color: #c6d0df;
  font-size: 0.86rem;
}

.su-otp-state {
  margin: 4px 0 0;
  color: #c6d0df;
}

.su-otp-state-error {
  color: #ffb5b5;
}

.su-cv-parse-status {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #7fd99a;
  min-height: 1.1em;
}

.su-cv-parse-error {
  color: #ffb5b5;
}

.su-cv-alt-select {
  margin-top: 6px;
  width: 100%;
}

.su-cv-parse-warning,
.su-cv-uncertain-hint {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: #f0c05a;
}

.su-field-uncertain {
  border-color: #f0c05a !important;
  box-shadow: 0 0 0 2px rgba(240, 192, 90, 0.16);
}

/* Dashboard section nav (Q/R: dashboard IA + always-reachable nav) */
.su-dashboard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(214, 178, 94, 0.14);
}

.su-dashboard-nav a {
  color: #c8d1df;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.su-dashboard-nav a:hover,
.su-dashboard-nav a:focus-visible {
  color: #f0d58a;
}

.su-contact-status-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.su-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.su-card-actions form {
  margin: 0;
}

/* CV history table */
.su-table-scroll {
  overflow-x: auto;
  margin-top: 18px;
}

.su-history-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.su-history-table th,
.su-history-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(214, 178, 94, 0.14);
  font-size: 0.86rem;
}

.su-history-row-active {
  background: rgba(214, 178, 94, 0.06);
}

.su-history-actions {
  display: flex;
  gap: 12px;
}

.su-history-actions form {
  margin: 0;
  display: inline;
}

/* CV comparison review */
.su-compare-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(214, 178, 94, 0.1);
}

.su-compare-row:last-child {
  border-bottom: none;
}

.su-compare-check {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9rem;
}

.su-compare-values {
  margin: 6px 0 0 26px;
  color: #b6c0d0;
  font-size: 0.82rem;
}

.su-compare-actions {
  margin-top: 24px;
}

.su-missing-items-optional summary {
  color: #7f8ea4;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* Consolidated one-page profile review (student_university/profile_forms.py
   + templates/student_university/profile.html). One section per real-world
   grouping (education, skills, ...), each its own small independently-
   saving form — inline add/edit/remove via formsets, never a dedicated
   page per record. */
.su-review-section {
  margin-top: 28px;
  padding: 24px clamp(18px, 3vw, 30px);
  border: 1px solid rgba(214, 178, 94, 0.14);
  border-radius: 18px;
  background: rgba(12, 28, 52, 0.4);
}

.su-review-section h2 {
  margin: 0 0 16px;
  color: #f4f0e6;
  font-size: 1.1rem;
}

.su-review-row {
  position: relative;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.su-review-row-new {
  border-style: solid;
  border-color: rgba(214, 178, 94, 0.22);
  background: rgba(214, 178, 94, 0.04);
}

.su-review-row-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 16px;
}

.su-review-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #c6d0df;
}

.su-review-field input[type="text"],
.su-review-field input[type="number"],
.su-review-field input[type="date"],
.su-review-field input[type="email"],
.su-review-field input[type="url"],
.su-review-field select,
.su-review-field textarea {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: rgba(6, 14, 28, 0.6);
  color: #f4f0e6;
  font: inherit;
}

.su-review-field textarea {
  min-height: 72px;
}

.su-review-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.su-review-field-error {
  color: #ffb5b5;
  font-size: 0.72rem;
  font-weight: 700;
}

.su-review-row-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #ffb5b5;
  font-size: 0.78rem;
  font-weight: 800;
}

.su-review-needs-check {
  display: inline-block;
  margin-top: 10px;
  margin-left: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(214, 178, 94, 0.14);
  color: #f0d58a;
  font-size: 0.72rem;
  font-weight: 800;
}

.su-review-row-add-label {
  display: block;
  margin-top: 8px;
  color: #7f8ea4;
  font-size: 0.76rem;
  font-style: italic;
}

.su-submit-quiet {
  min-height: 42px;
  margin-top: 10px;
  padding: 9px 18px;
  background: none;
  border: 1px solid rgba(214, 178, 94, 0.4);
  color: #f0d58a;
  box-shadow: none;
}

.su-submit-quiet:hover,
.su-submit-quiet:focus-visible {
  background: rgba(214, 178, 94, 0.08);
  box-shadow: none;
}

.su-autosave-indicator {
  display: block;
  min-height: 18px;
  margin-top: 10px;
  color: #7fd99a;
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 560px) {
  .su-review-row-fields {
    grid-template-columns: 1fr;
  }
}

.su-hub-card {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(214, 178, 94, 0.24);
  border-radius: 26px;
  background:
    linear-gradient(
      145deg,
      rgba(18, 42, 82, 0.92),
      rgba(8, 22, 44, 0.98)
    );
  box-shadow:
    0 32px 75px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.su-hub-card::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(214, 178, 94, 0.18),
      transparent 68%
    );
  transition: transform 220ms ease;
}

.su-hub-card:hover,
.su-hub-card:focus-visible {
  transform: translateY(-7px);
  border-color: rgba(214, 178, 94, 0.58);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(214, 178, 94, 0.08);
}

.su-hub-card:hover::after,
.su-hub-card:focus-visible::after {
  transform: scale(1.15);
}

.su-card-number {
  position: absolute;
  top: 24px;
  right: 28px;
  color: rgba(240, 213, 138, 0.25);
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
}

.su-hub-card h2 {
  max-width: 430px;
  margin: 6px 0 0;
  color: #f7f3e8;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.su-hub-card p {
  max-width: 500px;
  margin: 20px 0 0;
  color: #aebbd0;
  line-height: 1.7;
}

.su-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 32px;
  color: #f0d58a;
  font-weight: 900;
}

.su-card-action span {
  font-size: 1.35rem;
  transition: transform 180ms ease;
}

.su-hub-card:hover .su-card-action span,
.su-hub-card:focus-visible .su-card-action span {
  transform: translateX(6px);
}

.su-notice {
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid rgba(214, 178, 94, 0.16);
  border-radius: 14px;
  background: rgba(214, 178, 94, 0.045);
  color: #aebbd0;
  font-size: 0.9rem;
  line-height: 1.65;
}

.su-notice strong {
  color: #f0d58a;
}

.su-form-shell {
  max-width: 1180px;
}

.su-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  color: #c6d0df;
  font-size: 0.88rem;
  font-weight: 800;
  transition: color 160ms ease;
}

.su-back-link:hover,
.su-back-link:focus-visible {
  color: #f0d58a;
}

.su-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #8b96a8;
  font-size: 0.78rem;
  font-weight: 700;
}

.su-breadcrumb a {
  color: #8b96a8;
}

.su-breadcrumb a:hover,
.su-breadcrumb a:focus-visible {
  color: #f0d58a;
}

.su-breadcrumb [aria-current="page"] {
  color: #d8bd77;
}

/* Journey stepper: compact horizontal stage strip, not a Kanban board. */
.journey-stepper {
  margin: 8px 0 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(214, 178, 94, 0.14);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.journey-stepper ol {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: max-content;
}

.journey-stepper li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px 8px 0;
  color: #8b96a8;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.journey-stepper li:not(:last-child)::after {
  content: "";
  width: 26px;
  height: 1px;
  margin-left: 10px;
  background: rgba(214, 178, 94, 0.28);
}

.journey-stepper a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #c6d0df;
  transition: color 160ms ease;
}

.journey-stepper a:hover,
.journey-stepper a:focus-visible {
  color: #f0d58a;
}

.journey-stepper-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(214, 178, 94, 0.3);
  border-radius: 50%;
  color: #aab7ca;
  font-size: 0.72rem;
}

.journey-stepper li.is-current .journey-stepper-index {
  border-color: #d6b25e;
  background: #d6b25e;
  color: #08182c;
}

.journey-stepper li.is-current .journey-stepper-label {
  color: #f4f0e6;
}

.journey-stepper li.is-static {
  color: #6b7688;
  font-style: italic;
  font-weight: 700;
}

.journey-stepper li.is-static .journey-stepper-index {
  border-style: dashed;
}

@media (max-width: 640px) {
  .journey-stepper {
    margin-bottom: 34px;
  }

  .journey-stepper li {
    padding-right: 14px;
  }

  .journey-stepper li:not(:last-child)::after {
    width: 16px;
  }
}

.su-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(540px, 1.2fr);
  align-items: start;
  gap: clamp(42px, 7vw, 90px);
}

.su-form-intro {
  position: sticky;
  top: 130px;
  padding-top: 18px;
}

.su-form-intro h1 {
  font-size: clamp(2.25rem, 4.3vw, 4rem);
  line-height: 1.04;
}

.su-side-note {
  margin-top: 32px;
  padding: 22px;
  border-left: 3px solid #d6b25e;
  border-radius: 0 14px 14px 0;
  background: rgba(214, 178, 94, 0.055);
}

.su-side-note strong {
  color: #f0d58a;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.su-side-note p {
  margin: 8px 0 0;
  color: #aebbd0;
  font-size: 0.9rem;
  line-height: 1.65;
}

.su-form-card {
  padding: clamp(26px, 4.2vw, 46px);
  border: 1px solid rgba(214, 178, 94, 0.24);
  border-radius: 26px;
  background:
    linear-gradient(
      150deg,
      rgba(15, 34, 65, 0.97),
      rgba(7, 19, 38, 0.99)
    );
  box-shadow:
    0 34px 85px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.su-form-heading {
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(214, 178, 94, 0.14);
}

.su-form-heading h2 {
  margin: 0;
  color: #f7f3e8;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  letter-spacing: -0.025em;
}

.su-form-heading p {
  margin: 9px 0 0;
  color: #96a6bd;
  font-size: 0.9rem;
}

.su-intake-form {
  display: grid;
  gap: 0;
  margin-top: 26px;
}

.su-intake-form > p {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 14px 0;
}

.su-intake-form > p + p {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.su-intake-form label {
  color: #d9e0ea;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.4;
}

.su-intake-form input:not([type="checkbox"]),
.su-intake-form select,
.su-intake-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(154, 168, 191, 0.28);
  border-radius: 11px;
  outline: none;
  background: rgba(4, 13, 28, 0.72);
  color: #f4f0e6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.su-intake-form input:not([type="checkbox"]):hover,
.su-intake-form select:hover,
.su-intake-form textarea:hover {
  border-color: rgba(214, 178, 94, 0.42);
}

.su-intake-form input:not([type="checkbox"]):focus,
.su-intake-form select:focus,
.su-intake-form textarea:focus {
  border-color: #d6b25e;
  background: rgba(7, 20, 40, 0.94);
  box-shadow:
    0 0 0 3px rgba(214, 178, 94, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.su-intake-form textarea {
  min-height: 135px;
  max-height: 320px;
  resize: vertical;
}

.su-intake-form select {
  cursor: pointer;
}

.su-intake-form input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin: 2px 8px 0 0;
  accent-color: #d6b25e;
  vertical-align: top;
}

.su-intake-form input[type="checkbox"] + label,
.su-intake-form p:has(input[type="checkbox"]) label {
  display: inline;
  color: #c7d1df;
  font-weight: 700;
}

.su-intake-form .helptext {
  color: #8393aa;
  font-size: 0.78rem;
  line-height: 1.55;
}

.su-intake-form .errorlist,
.su-form-errors .errorlist,
.errorlist.nonfield {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 159, 159, 0.28);
  border-radius: 9px;
  background: rgba(255, 80, 80, 0.075);
  color: #ffb5b5;
  font-size: 0.8rem;
  list-style: none;
}

/* Django's own form.as_p() output already includes non-field errors
   as this exact <ul class="errorlist nonfield"> -- templates must
   never ALSO render {{ form.non_field_errors }} manually alongside
   {{ form.as_p }}, or every non-field error (e.g. "An account with
   this email already exists") shows up twice. This unscoped rule
   (not just .su-intake-form .errorlist) covers the couple of forms
   that don't carry that class too, and adds spacing since this now
   renders as a bare sibling before the field <p> tags, not inside a
   wrapping div. */
.errorlist.nonfield {
  margin-bottom: 18px;
}

/* Evidence Strength Map + Clarification Queue (CV Diagnostic page). */
.su-evidence-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0 18px;
}

.su-evidence-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: #7f8ea4;
}

.su-evidence-filters select {
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(214, 178, 94, 0.24);
  background: rgba(20, 22, 28, 0.6);
  color: #f4f0e6;
  font-size: 0.86rem;
}

.su-evidence-list,
.su-clarification-list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.su-evidence-item,
.su-clarification-item {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(214, 178, 94, 0.14);
  background: rgba(255, 255, 255, 0.02);
}

.su-evidence-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.su-evidence-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(214, 178, 94, 0.14);
  color: #d6b25e;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.su-evidence-provenance {
  font-size: 0.74rem;
  color: #7f8ea4;
}

.su-evidence-claim {
  margin: 0 0 4px;
  font-weight: 600;
  color: #f4f0e6;
}

.su-evidence-source {
  margin: 0 0 4px;
  font-style: italic;
  color: #aebbd0;
  font-size: 0.86rem;
}

.su-evidence-explanation {
  margin: 0 0 4px;
  color: #d8d3c4;
  font-size: 0.86rem;
  line-height: 1.5;
}

.su-evidence-supported_by_cv_text .su-evidence-badge,
.su-evidence-verified_externally .su-evidence-badge {
  background: rgba(94, 214, 138, 0.16);
  color: #7fe0a4;
}

.su-evidence-claimed_without_support .su-evidence-badge,
.su-evidence-contradictory .su-evidence-badge {
  background: rgba(255, 100, 100, 0.16);
  color: #ffb5b5;
}

.su-evidence-needs_clarification .su-evidence-badge,
.su-evidence-quantified_but_context_weak .su-evidence-badge {
  background: rgba(255, 178, 94, 0.16);
  color: #ffcf94;
}

.su-evidence-learning_or_exposure .su-evidence-badge,
.su-evidence-not_applicable .su-evidence-badge {
  background: rgba(160, 170, 190, 0.16);
  color: #aebbd0;
}

.su-clarification-form {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.su-clarification-form textarea,
.su-clarification-form select,
.su-clarification-form input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(214, 178, 94, 0.24);
  background: rgba(20, 22, 28, 0.6);
  color: #f4f0e6;
  font-size: 0.88rem;
  font-family: inherit;
}

.su-clarification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* Recoverable Score / Impact Simulator. */
.su-impact-totals li span:last-child {
  color: #7fe0a4;
}

.su-impact-subheading {
  margin: 20px 0 10px;
  font-size: 0.95rem;
  color: #f4f0e6;
}

.su-impact-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.su-impact-item {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(214, 178, 94, 0.14);
  background: rgba(255, 255, 255, 0.02);
}

.su-impact-resolved {
  opacity: 0.6;
}

.su-impact-resolved .su-evidence-claim::after {
  content: " (resolved)";
  color: #7fe0a4;
  font-weight: 400;
}

.su-submit {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
  padding: 13px 20px;
  border: 1px solid #d6b25e;
  border-radius: 11px;
  background:
    linear-gradient(
      135deg,
      #f0d58a,
      #d6b25e
    );
  color: #07111f;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 15px 36px rgba(214, 178, 94, 0.17);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.su-submit:hover,
.su-submit:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 20px 42px rgba(214, 178, 94, 0.25);
}

.su-privacy-note {
  margin: 18px 0 0;
  color: #7f8ea4;
  font-size: 0.76rem;
  line-height: 1.55;
  text-align: center;
}

/* Compact onboarding progress: Upload -> Verify email -> Verify mobile
   -> Review -> Build CV, with the current stage highlighted. */
.su-journey-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid rgba(214, 178, 94, 0.18);
  border-radius: 14px;
  background: rgba(16, 36, 67, 0.4);
  font-size: 0.78rem;
  font-weight: 700;
  color: #7f8ea4;
}

.su-journey-stepper .is-current,
.su-journey-stepper .is-done {
  color: #f0d58a;
}

.su-journey-stepper .is-done::after {
  content: " \2713";
}

@media (max-width: 560px) {
  .su-journey-stepper {
    flex-direction: column;
    gap: 6px;
  }
}

.su-thank-you {
  display: grid;
  place-items: center;
}

.su-thank-you-card {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(34px, 6vw, 64px);
  border: 1px solid rgba(105, 214, 168, 0.26);
  border-radius: 28px;
  background:
    linear-gradient(
      150deg,
      rgba(15, 38, 66, 0.96),
      rgba(7, 20, 39, 0.99)
    );
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.36);
  text-align: center;
}

.su-success-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  margin: 0 auto 24px;
  border: 1px solid rgba(105, 214, 168, 0.42);
  border-radius: 50%;
  background: rgba(105, 214, 168, 0.09);
  color: #8de5bf;
  font-size: 1.8rem;
  font-weight: 900;
}

.su-thank-you-card .su-eyebrow {
  justify-content: center;
}

.su-thank-you-card h1 {
  font-size: clamp(2.5rem, 6vw, 4.7rem);
}

.su-thank-you-card > p {
  margin-inline: auto;
}

.su-submit-link {
  width: fit-content;
  margin: 32px auto 0;
}

@media (max-width: 900px) {
  .su-availability,
  .su-hub-split,
  .su-form-layout {
    grid-template-columns: 1fr;
  }

  .su-form-layout {
    gap: 34px;
  }

  .su-form-intro {
    position: static;
  }

  .su-hub-card {
    min-height: 290px;
  }
}

@media (max-width: 640px) {
  .su-page {
    padding: 54px 0 72px;
  }

  .su-shell {
    width: min(calc(100% - 28px), 1180px);
  }

  .su-hero h1,
  .su-form-intro h1 {
    font-size: clamp(2.15rem, 11vw, 3.15rem);
  }

  .su-lead,
  .su-form-intro > p {
    margin-top: 20px;
  }

  .su-availability {
    margin-top: 30px;
  }

  .su-status-card,
  .su-hub-card,
  .su-form-card {
    border-radius: 19px;
  }

  .su-hub-card {
    min-height: 270px;
    padding: 26px;
  }

  .su-card-number {
    top: 19px;
    right: 22px;
    font-size: 2.5rem;
  }

  .su-form-card {
    padding: 24px 19px;
  }

  .su-intake-form input:not([type="checkbox"]),
  .su-intake-form select,
  .su-intake-form textarea {
    font-size: 16px;
  }

  .su-submit {
    width: 100%;
  }
}

/* Student Portal additions (registration, dashboard, profile, CV builder).
   Scoped to this app's own su- namespace; no shared/global rule is edited. */

.su-portal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.su-portal-nav a {
  color: #c6d0df;
  font-size: 0.86rem;
  font-weight: 800;
  transition: color 160ms ease;
}

.su-portal-nav a:hover,
.su-portal-nav a:focus-visible {
  color: #f0d58a;
}

.su-next-action {
  margin: 28px 0 0;
  padding: 16px 22px;
  border: 1px solid rgba(214, 178, 94, 0.28);
  border-radius: 14px;
  background: rgba(214, 178, 94, 0.06);
  color: #d9e0ea;
  font-size: 0.92rem;
}

.su-next-action strong {
  margin-right: 8px;
  color: #f0d58a;
}

.su-next-action a {
  color: #f7f3e8;
  font-weight: 800;
  text-decoration: underline;
}

.su-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.su-package-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.su-package-card ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
}

.su-package-card li {
  position: relative;
  padding-left: 20px;
  color: #aebbd0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.su-package-card li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d6b25e;
}

.su-package-price {
  margin: 6px 0 10px;
  color: #f0d58a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
}

.su-package-card .button,
.su-package-card .su-status-pill {
  margin-top: auto;
  align-self: flex-start;
}

.su-hub-card-secondary {
  min-height: auto;
  padding: 22px 26px;
}

.su-hub-card-secondary .su-card-audience {
  color: #96a6bd;
}

.su-hub-card-secondary h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.su-hub-card-secondary .su-card-action {
  padding-top: 16px;
  font-size: 0.9rem;
}

.su-status-pill {
  display: inline-flex;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.su-status-pill-pending {
  border: 1px solid rgba(214, 178, 94, 0.4);
  background: rgba(214, 178, 94, 0.09);
  color: #f0d58a;
}

.su-status-pill-verified {
  border: 1px solid rgba(105, 214, 168, 0.4);
  background: rgba(105, 214, 168, 0.09);
  color: #8de5bf;
}

.su-status-card .button {
  display: inline-flex;
  margin-top: 18px;
}

.su-dashboard-logout {
  margin-top: 34px;
}

.su-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.su-profile-section {
  margin-top: 24px;
}

.su-profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.su-profile-section li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.su-profile-section-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  font-size: 0.82rem;
}

.su-profile-section-actions a,
.su-link-button {
  color: #f0d58a;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.su-empty-note {
  margin: 8px 0 0;
  color: #7f8ea4;
  font-size: 0.86rem;
}

.su-form-card-single {
  max-width: 640px;
  margin-inline: auto;
}

.su-readiness-meter {
  margin: 28px 0;
}

.su-readiness-meter-bar {
  width: 100%;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(214, 178, 94, 0.28);
  border-radius: 999px;
  background: rgba(4, 13, 28, 0.72);
}

.su-readiness-meter-fill {
  height: 100%;
  background: linear-gradient(135deg, #f0d58a, #d6b25e);
  transition: width 220ms ease;
}

.su-readiness-meter p {
  margin: 10px 0 0;
  color: #aebbd0;
  font-size: 0.88rem;
}

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

@media (prefers-reduced-motion: reduce) {
  .su-hub-card,
  .su-hub-card::after,
  .su-card-action span,
  .su-submit {
    transition: none;
  }
}

/* QERIONN_ONBOARDING_STEPPER_EXACT_GAP_START */
.su-form-page .su-journey-stepper {
  margin: 18px 0 0;
}

.su-form-page .su-journey-stepper + .su-form-layout {
  margin-top: 34px;
}

@media (max-width: 760px) {
  .su-form-page .su-journey-stepper + .su-form-layout {
    margin-top: 26px;
  }
}
/* QERIONN_ONBOARDING_STEPPER_EXACT_GAP_END */

/* CV Diagnostic action-first redesign (screen-reader-only utility). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Report layout: main column + sticky rail on wide viewports. */
.su-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

@media (min-width: 1024px) {
  .su-report-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

.su-report-main {
  min-width: 0;
}

.su-report-rail {
  display: none;
}

@media (min-width: 1024px) {
  .su-report-rail {
    display: block;
    position: sticky;
    top: 24px;
    align-self: start;
  }

  .su-report-rail-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid rgba(214, 178, 94, 0.2);
    background: rgba(20, 22, 28, 0.75);
  }

  .su-report-rail-inner .button {
    margin-top: 10px;
    text-align: center;
  }
}

/* Executive summary. */
.su-exec-summary {
  border-color: rgba(214, 178, 94, 0.32);
}

.su-exec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}

@media (max-width: 900px) {
  .su-exec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .su-exec-grid {
    grid-template-columns: 1fr;
  }
}

.su-exec-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.su-exec-stat-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7f8ea4;
}

.su-exec-stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: #f4f0e6;
}

.su-exec-stat-value-sm {
  font-size: 1.2rem;
}

.su-exec-stat-unit {
  font-size: 1rem;
  color: #7f8ea4;
  font-weight: 400;
}

.su-exec-stat-score {
  grid-column: span 1;
}

.su-exec-stat-positive .su-exec-stat-value {
  color: #7fe0a4;
}

.su-exec-stat-amber .su-exec-stat-value {
  color: #ffcf94;
}

.su-exec-interpretation {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #d8d3c4;
}

.su-notice-critical {
  border-color: rgba(255, 100, 100, 0.35);
  background: rgba(255, 80, 80, 0.06);
  color: #ffcfcf;
}

/* Primary actions. */
.su-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 26px;
}

.su-primary-actions .button {
  white-space: nowrap;
}

/* Priority action cards. */
.su-action-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0 18px;
}

.su-action-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: #7f8ea4;
}

.su-action-filters select {
  min-width: 200px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(214, 178, 94, 0.24);
  background: rgba(20, 22, 28, 0.6);
  color: #f4f0e6;
  font-size: 0.86rem;
}

.su-action-cards {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.su-action-card {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(214, 178, 94, 0.16);
  background: rgba(255, 255, 255, 0.02);
  border-left: 4px solid rgba(160, 170, 190, 0.4);
}

.su-action-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.su-action-card-title {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 1.02rem;
  color: #f4f0e6;
}

.su-action-card-recovery {
  margin: 0 0 8px;
  color: #7fe0a4;
  font-weight: 600;
}

.su-action-card-line {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: #d8d3c4;
}

.su-action-card-cta {
  margin: 10px 0;
  display: inline-flex;
}

.su-action-card-details {
  margin-top: 8px;
}

.su-action-card-details summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: #7f8ea4;
}

.su-detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #aebbd0;
}

.su-detail-list dt {
  font-weight: 600;
  color: #7f8ea4;
}

.su-detail-list dd {
  margin: 0;
  word-break: break-word;
}

/* Severity: color + text label together, never color alone. */
.su-severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.su-severity-badge-critical,
.su-severity-badge-critical::before {
  background: rgba(255, 80, 80, 0.18);
  color: #ff9d9d;
}

.su-severity-badge-critical::before { content: "\26A0"; }

.su-severity-badge-high {
  background: rgba(255, 100, 100, 0.14);
  color: #ffb5b5;
}

.su-severity-badge-medium {
  background: rgba(255, 178, 94, 0.16);
  color: #ffcf94;
}

.su-severity-badge-low {
  background: rgba(160, 170, 190, 0.16);
  color: #aebbd0;
}

.su-action-card.su-severity-critical { border-left-color: #ff6464; }
.su-action-card.su-severity-high { border-left-color: #ffb26a; }
.su-action-card.su-severity-medium { border-left-color: #ffcf94; }
.su-action-card.su-severity-low { border-left-color: #7f8ea4; }

/* Accordions (native <details>/<summary> -- fully keyboard/screen-
   reader accessible without hand-rolled ARIA). */
.su-accordion-group {
  display: grid;
  gap: 18px;
}

.su-accordion > summary {
  cursor: pointer;
  list-style: none;
}

.su-accordion > summary::-webkit-details-marker {
  display: none;
}

.su-accordion > summary::after {
  content: "\2304";
  float: right;
  font-size: 1.1rem;
  color: #7f8ea4;
  transition: transform 0.15s ease;
}

.su-accordion[open] > summary::after {
  transform: rotate(180deg);
}

.su-accordion > summary:focus-visible {
  outline: 2px solid #d6b25e;
  outline-offset: 3px;
}

/* Clarification wizard. */
.su-wizard-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: #7f8ea4;
}

/* Findings list (Layer 4 "Full findings"). */
.su-findings-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.su-finding-item {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(214, 178, 94, 0.14);
  background: rgba(255, 255, 255, 0.02);
  border-left: 4px solid rgba(160, 170, 190, 0.4);
}

.su-finding-item.su-severity-critical { border-left-color: #ff6464; }
.su-finding-item.su-severity-high { border-left-color: #ffb26a; }
.su-finding-item.su-severity-medium { border-left-color: #ffcf94; }
.su-finding-item.su-severity-low { border-left-color: #7f8ea4; }

.su-evidence-summary-counts {
  margin-bottom: 14px;
}

/* Focus visibility across interactive report controls. */
.su-report-main a:focus-visible,
.su-report-main button:focus-visible,
.su-report-main select:focus-visible,
.su-report-main input:focus-visible,
.su-report-main textarea:focus-visible {
  outline: 2px solid #d6b25e;
  outline-offset: 2px;
}

/* Responsive: ensure no horizontal overflow and readable stacking at
   small widths (360/390/768px). */
@media (max-width: 768px) {
  .su-exec-summary,
  .su-action-card,
  .su-finding-item,
  .su-evidence-item,
  .su-clarification-item {
    padding: 14px;
  }

  .su-primary-actions .button {
    flex: 1 1 100%;
    text-align: center;
  }

  .su-detail-list {
    grid-template-columns: 1fr;
  }

  .su-detail-list dt {
    margin-top: 6px;
  }
}

@media (max-width: 480px) {
  .su-exec-stat-value {
    font-size: 1.4rem;
  }
}

.su-evidence-source,
.su-evidence-explanation,
.su-evidence-claim {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Override the generic ".su-profile-section li { display: flex;
   justify-content: space-between; }" label/value row rule (line ~1650)
   for every card-style <li> introduced across the Evidence Strength
   Map / Clarification Queue / Impact Simulator / redesign slices --
   without this, that broad rule wins on specificity over the
   single-class card rules above regardless of source order, and forces
   each card's whole content (title, recovery line, action line, etc.)
   into one unwrapped flex row instead of stacking, which is nearly
   invisible on wide desktop viewports but breaks badly on mobile. */
.su-profile-section .su-action-card,
.su-profile-section .su-evidence-item,
.su-profile-section .su-clarification-item,
.su-profile-section .su-finding-item,
.su-profile-section .su-impact-item {
  display: block;
}