/* The Data and AI School of London , application wizard styling (modern, card-based) */
:root {
  --dais-navy:        #081830;   /* dark royal blue: header, footer, headings */
  --dais-blue:        #0a2240;   /* accent: buttons, active, focus, required */
  --dais-blue-dark:   #0e3268;
  --dais-heading:     #0a2240;   /* heading/emphasis text (light in dark mode) */
  --dais-success:     #166534;   /* success status text */
  --dais-gold:        #7a4d08;   /* gold status text */
  --dais-white:       #FFFFFF;
  --dais-body:        #3F4754;   /* body text */
  --dais-muted:       #6B7280;   /* secondary text */
  --dais-bg:          #f5f0e8;   /* page background */
  --dais-surface:     #FFFFFF;   /* cards */
  --dais-border:      #dfe4ec;   /* default field border */
  --dais-border-strong:#c7cfdd;  /* hover border */
  --dais-ring:        rgba(10,34,64,0.18);
  --dais-radius:      12px;
  --dais-radius-lg:   16px;
  --dais-shadow:      0 10px 30px -12px rgba(8,24,48,0.22), 0 2px 6px -2px rgba(8,24,48,0.08);
}

* { box-sizing: border-box; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--dais-body);
  background: #F5F0E8;  /* parchment, matches the home page and the rest of the site */
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- HEADER ---- */
.dais-header {
  background: var(--dais-navy);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 2px 12px rgba(8,24,48,0.18);
}
.dais-header__logo img { height: 40px; width: auto; display: block; }
.dais-header__title {
  font-family: 'DM Sans', sans-serif;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---- PROGRESS BAR ---- */
.dais-progress {
  background: rgba(255,255,255,0.7);
  backdrop-filter: saturate(140%) blur(4px);
  border-bottom: 1px solid #e2e8f0;
  padding: 1.25rem 1rem 1.1rem;
  overflow-x: auto;
}
.dais-progress__track {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 0; min-width: 640px; max-width: 880px; margin: 0 auto;
}
.dais-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.dais-step + .dais-step::before {
  content: ''; position: absolute; top: 16px; left: -50%;
  width: 100%; height: 2px; background: #cdd5e1; z-index: 0;
}
.dais-step--completed + .dais-step::before,
.dais-step--active + .dais-step::before { background: var(--dais-blue); }
.dais-step__circle {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700; font-family: 'DM Sans', sans-serif;
  border: 2px solid #cdd5e1; background: var(--dais-white);
  color: #9aa4b5; position: relative; z-index: 1;
  transition: all 0.2s ease;
}
.dais-step--completed .dais-step__circle {
  background: var(--dais-navy); border-color: var(--dais-navy); color: #fff;
}
.dais-step--active .dais-step__circle {
  background: var(--dais-blue); border-color: var(--dais-blue); color: #fff;
  box-shadow: 0 0 0 4px var(--dais-ring);
}
.dais-step__label {
  font-size: 0.62rem; font-family: 'DM Sans', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; margin-top: 8px;
  color: #9aa4b5; text-align: center; width: 100%; max-width: 66px;
  word-break: break-word; overflow-wrap: break-word; line-height: 1.3;
}
.dais-step--active .dais-step__label { color: var(--dais-blue); }
.dais-step--completed .dais-step__label { color: var(--dais-navy); }

/* ---- FORM CARD ---- */
.dais-form-card {
  position: relative;
  background: var(--dais-surface);
  border: 1px solid #e9edf3;
  border-radius: var(--dais-radius-lg);
  box-shadow: var(--dais-shadow);
  padding: 2.25rem 2.4rem 2rem;
  max-width: 680px;
  margin: 2rem auto;
  overflow: hidden;
}
.dais-form-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--dais-navy), var(--dais-blue));
}
.dais-form-card__title {
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 1.6rem; line-height: 1.2; color: var(--dais-navy);
  margin: 0.25rem 0 0.3rem;
}
.dais-form-card__subtitle {
  font-size: 0.9rem; color: var(--dais-muted); margin: 0 0 1.6rem;
}

/* ---- FORM FIELDS ---- */
.dais-field { margin-bottom: 1.15rem; }
.dais-label {
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: 0.82rem; color: var(--dais-navy); margin-bottom: 0.45rem;
}
.dais-label .required { color: var(--dais-blue); margin-left: 3px; font-weight: 700; }

.dais-static-value {
  width: 100%; border: 1px solid var(--dais-border); border-radius: var(--dais-radius);
  padding: 0.65rem 0.85rem; background: #f7f9fc; font-size: 0.92rem;
  color: var(--dais-navy); font-weight: 600;
}

.dais-input, .dais-select, .dais-textarea {
  width: 100%;
  border: 1.5px solid var(--dais-border);
  border-radius: var(--dais-radius);
  padding: 0.68rem 0.9rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--dais-navy);
  background: var(--dais-white);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  outline: none;
  appearance: none; -webkit-appearance: none;
}
.dais-input::placeholder, .dais-textarea::placeholder { color: #aab2c0; }
.dais-input:hover, .dais-select:hover, .dais-textarea:hover { border-color: var(--dais-border-strong); }
.dais-input:focus, .dais-select:focus, .dais-textarea:focus {
  border-color: var(--dais-blue);
  box-shadow: 0 0 0 4px var(--dais-ring);
  background: #fff;
}
/* Native date control keeps its picker */
.dais-input[type="date"] { appearance: auto; -webkit-appearance: none; }

/* Custom chevron for selects */
.dais-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

.dais-textarea { resize: vertical; min-height: 90px; appearance: none; }

.dais-file-input { display: block; width: 100%; font-size: 0.9rem; color: var(--dais-muted); }
.dais-file-input::file-selector-button {
  margin-right: 1rem; padding: 0.5rem 1.1rem; background: var(--dais-navy);
  color: #FFFFFF; border: none; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 0.82rem;
  cursor: pointer; transition: background 0.15s;
}
.dais-file-input::file-selector-button:hover { background: var(--dais-blue-dark); }

.dais-checkbox-label { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; cursor: pointer; }
.dais-checkbox-label input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; margin-top: 2px;
  accent-color: var(--dais-blue); cursor: pointer;
}

.dais-error { font-size: 0.8rem; color: #dc2626; margin-top: 0.35rem; font-weight: 600; }
.dais-help { font-size: 0.78rem; color: var(--dais-muted); margin-top: 0.3rem; line-height: 1.5; }

/* ---- BUTTONS ---- */
.dais-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.7rem; border-radius: var(--dais-radius);
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.9rem;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.08s ease, background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.dais-btn:active { transform: translateY(1px); }
.dais-btn--primary {
  background: var(--dais-blue); color: #FFFFFF; border-color: var(--dais-blue);
  box-shadow: 0 6px 16px -6px rgba(10,34,64,0.6);
}
.dais-btn--primary:hover { background: var(--dais-blue-dark); border-color: var(--dais-blue-dark); box-shadow: 0 8px 20px -6px rgba(10,34,64,0.65); }
.dais-btn--secondary, .dais-btn--outline {
  background: var(--dais-white); color: var(--dais-body); border-color: var(--dais-border-strong);
}
.dais-btn--secondary:hover, .dais-btn--outline:hover { border-color: var(--dais-blue); color: var(--dais-blue); }

.dais-btn-group {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid #eef0f4;
  gap: 0.75rem;
}

/* ---- NOTICE BANNER ---- */
.dais-notice {
  background: #f5f0e8; border: 1px solid #cdd9e6; border-left: 4px solid var(--dais-blue);
  border-radius: var(--dais-radius); padding: 0.9rem 1.1rem;
  font-size: 0.85rem; color: #0a2240; margin-bottom: 1.5rem; line-height: 1.55;
}
.dais-notice--info { border-color: #9db4ce; border-left-color: var(--dais-blue); }

/* ---- SECTION DIVIDER ---- */
.dais-section-divider {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--dais-navy);
  border-bottom: 2px solid #e9edf3; padding-bottom: 0.5rem; margin: 1.9rem 0 1.3rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.dais-section-divider::before {
  content: ''; width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, var(--dais-navy), var(--dais-blue)); flex-shrink: 0;
}

/* ---- GRID ---- */
/* Each field shares the row's track sizes via subgrid (label / control / help /
   error), so the input boxes line up even when labels wrap to different heights. */
.dais-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; row-gap: 0; align-items: start; }
.dais-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 1.25rem; row-gap: 0; align-items: start; }
@media (max-width: 560px) { .dais-grid-3 { grid-template-columns: 1fr; } }
.dais-grid-2 > div > .dais-field:last-child,
.dais-grid-3 > div > .dais-field:last-child { margin-bottom: 1.15rem; }

/* Opt-in row alignment: add `dais-grid--align` to a grid whose fields are a single
   clean row of simple label+input cells (no help text below the input). Each field
   shares the row's label and input track heights via subgrid, so the input boxes
   line up even when one label wraps to more lines. Only use on grids that fill
   their columns exactly (2 fields in grid-2, 3 in grid-3). */
.dais-grid--align { grid-template-rows: auto auto; }
.dais-grid--align > .dais-field { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
@media (max-width: 560px) {
  .dais-grid--align { grid-template-rows: none; display: block; }
  .dais-grid--align > .dais-field { display: block; }
}
@media (max-width: 560px) {
  .dais-grid-2 { grid-template-columns: 1fr; }
  .dais-header__title { font-size: 0.8rem; }
  .dais-form-card { padding: 1.5rem 1.25rem 1.4rem; margin: 1rem auto; border-radius: 14px; }
  .dais-form-card__title { font-size: 1.35rem; }
}

/* ---- COURSE DATES ---- */
.dais-course-dates {
  background: #f4f7fc; border: 1px solid #e2e8f0; border-left: 4px solid var(--dais-blue);
  border-radius: var(--dais-radius); padding: 0.9rem 1.1rem; font-size: 0.9rem; margin-top: 0.85rem;
}

/* ---- CONFIRMATION ---- */
.dais-confirm-box {
  background: #f0fdf4; border: 1.5px solid #86efac; border-radius: var(--dais-radius-lg);
  padding: 2.5rem 2rem; text-align: center; max-width: 600px; margin: 3rem auto;
  box-shadow: var(--dais-shadow);
}
.dais-confirm-box__icon { font-size: 3rem; margin-bottom: 1rem; }
.dais-confirm-box__ref {
  font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--dais-navy);
  font-size: 0.95rem; background: #ecfdf5; padding: 0.5rem 1.1rem; border-radius: 8px;
  display: inline-block; margin: 0.75rem 0; letter-spacing: 0.05em;
}

/* ---- FOOTER ---- */
.dais-footer { background: var(--dais-navy); color: #FFFFFF; padding: 2.25rem 1.5rem; font-size: 0.82rem; margin-top: 3.5rem; }
.dais-footer__inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.dais-footer__heading {
  font-family: 'DM Sans', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem;
}
.dais-footer a { color: #cdd9f0; text-decoration: none; }
.dais-footer a:hover { text-decoration: underline; color: #fff; }
.dais-footer__copy { text-align: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #2E508E; font-size: 0.75rem; color: #cdd9f0; }
@media (max-width: 560px) { .dais-footer__inner { grid-template-columns: 1fr; } }

/* ---- UPLOAD FILE NAME PREVIEW ---- */
.dais-file-name { font-size: 0.78rem; color: #a8690a; margin-top: 0.3rem; font-style: italic; }

/* ---- DOCUMENT CHECKLIST ---- */
.dais-doc-checklist { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.9rem; }
.dais-doc-checklist li { padding: 0.5rem 0 0.5rem 1.6rem; position: relative; border-bottom: 1px solid #f1f3f7; }
.dais-doc-checklist li::before { content: '\2192'; position: absolute; left: 0; color: var(--dais-blue); font-weight: 700; }
.dais-doc-checklist li .required-tag { font-size: 0.7rem; font-weight: 700; color: #dc2626; margin-left: 6px; text-transform: uppercase; }

/* ---- FIELD TOOLTIP ---- */
.dais-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--dais-navy);
  color: #ffffff; font-size: 9px; font-weight: 700; font-style: normal;
  cursor: default; margin-left: 6px; position: relative; vertical-align: middle;
  flex-shrink: 0; line-height: 1; transition: background 0.15s; user-select: none;
}
.dais-tip:hover { background: var(--dais-blue); color: #fff; }
.dais-tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); background: #111827; color: #fff; font-size: 11.5px;
  font-weight: 400; font-family: 'DM Sans', sans-serif; line-height: 1.45;
  padding: 8px 11px; border-radius: 8px; width: max-content; max-width: 240px;
  white-space: normal; text-align: left; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s; z-index: 9999; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.dais-tip::before {
  content: ''; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #111827; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity 0.18s, visibility 0.18s; z-index: 9999;
}
.dais-tip:hover::after, .dais-tip:hover::before { opacity: 1; visibility: visible; }
.dais-tip.tip-down::after { bottom: auto; top: calc(100% + 7px); }
.dais-tip.tip-down::before { bottom: auto; top: calc(100% + 1px); border-top-color: transparent; border-bottom-color: #111827; }

/* ============================================================================
   DARK MODE. The wizard palette (--dais-*) plus some hardcoded light hex are
   remapped for dark. --dais-navy and --dais-blue are used for BOTH backgrounds
   and text, so the text uses (headings, labels, input text) are overridden
   explicitly to stay legible. Accent becomes the site's dark-mode gold so the
   wizard matches the rest of the site in dark mode.
   ========================================================================= */
html[data-theme="dark"] {
  --dais-bg:            #0C1524;
  --dais-surface:       #14233C;
  --dais-white:         #14233C;   /* only ever used as a background */
  --dais-body:          #C7D3E3;
  --dais-muted:         #93A6BF;
  --dais-border:        #26374F;
  --dais-border-strong: #3A567F;
  --dais-navy:          #0A1526;   /* header / footer background */
  --dais-blue:          #C89930;   /* accent -> site dark-mode gold */
  --dais-blue-dark:     #DFB040;
  --dais-heading:       #ECE7DB;
  --dais-success:       #56D68A;
  --dais-gold:          #E0A83A;
  --dais-ring:          rgba(200,153,48,0.30);
  --dais-shadow:        0 10px 30px -12px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4);
}
html[data-theme="dark"] body { background: var(--dais-bg); color: var(--dais-body); }

/* Header title / footer text stay white on the dark navy bg (already hardcoded). */

/* --- Progress bar (was translucent-white + light greys) --- */
html[data-theme="dark"] .dais-progress { background: rgba(20,35,60,0.72); border-bottom-color: var(--dais-border); }
html[data-theme="dark"] .dais-step + .dais-step::before { background: var(--dais-border); }
html[data-theme="dark"] .dais-step__circle { border-color: var(--dais-border-strong); color: var(--dais-muted); }
html[data-theme="dark"] .dais-step__label { color: var(--dais-muted); }
html[data-theme="dark"] .dais-step--completed .dais-step__circle { background: var(--dais-blue); border-color: var(--dais-blue); color: #0C1524; }
html[data-theme="dark"] .dais-step--active   .dais-step__circle { color: #0C1524; }
html[data-theme="dark"] .dais-step--completed .dais-step__label { color: var(--dais-blue); }

/* --- Card + text that used --dais-navy as a colour --- */
html[data-theme="dark"] .dais-form-card { border-color: var(--dais-border); }
html[data-theme="dark"] .dais-form-card__title,
html[data-theme="dark"] .dais-section-divider,
html[data-theme="dark"] .dais-label,
html[data-theme="dark"] .dais-static-value { color: #ECE7DB; }

/* --- Fields --- */
html[data-theme="dark"] .dais-input,
html[data-theme="dark"] .dais-select,
html[data-theme="dark"] .dais-textarea { color: var(--dais-body); }
html[data-theme="dark"] .dais-input::placeholder,
html[data-theme="dark"] .dais-textarea::placeholder { color: #6C7E97; }
html[data-theme="dark"] .dais-input:focus,
html[data-theme="dark"] .dais-select:focus,
html[data-theme="dark"] .dais-textarea:focus { background: var(--dais-white); }
html[data-theme="dark"] .dais-static-value { background: #0F1C30; }
html[data-theme="dark"] .dais-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A6BF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* --- Buttons: primary is gold in dark, so its text goes dark --- */
html[data-theme="dark"] .dais-btn--primary { color: #0C1524; }
html[data-theme="dark"] .dais-btn-group { border-top-color: var(--dais-border); }

/* --- Notice / info / section divider borders --- */
html[data-theme="dark"] .dais-notice { background: #14233C; border-color: var(--dais-border); color: var(--dais-body); }
html[data-theme="dark"] .dais-notice--info { border-color: var(--dais-border-strong); }
html[data-theme="dark"] .dais-section-divider { border-bottom-color: var(--dais-border); }
html[data-theme="dark"] .dais-course-dates { background: #14233C; border-color: var(--dais-border); }
html[data-theme="dark"] .dais-doc-checklist li { border-bottom-color: var(--dais-border); }

/* --- Confirmation (green box) --- */
html[data-theme="dark"] .dais-confirm-box { background: #10241C; border-color: #2E6B4C; }
html[data-theme="dark"] .dais-confirm-box__ref { background: #12302A; color: #86EFAC; }

/* --- File name + errors keep meaning, lifted for dark contrast --- */
html[data-theme="dark"] .dais-file-name { color: #E0A83A; }
html[data-theme="dark"] .dais-error,
html[data-theme="dark"] .dais-doc-checklist li .required-tag { color: #F87171; }

/* --- Account pages (register / register-interest) use inline .acct-* styles;
       override for dark here. The html[data-theme] prefix outranks the inline
       light rules by specificity, regardless of source order. --- */
html[data-theme="dark"] .acct-card { background: var(--dais-surface); border-color: var(--dais-border); box-shadow: var(--dais-shadow); }
html[data-theme="dark"] .acct-card h1 { color: #ECE7DB; }
html[data-theme="dark"] .acct-lead { color: var(--dais-muted); }
html[data-theme="dark"] .approval-pending-notice,
html[data-theme="dark"] .acct-msg { background: #14233C; border-color: var(--dais-border); border-left-color: var(--dais-blue); color: var(--dais-body); }
html[data-theme="dark"] .acct-form label { color: #ECE7DB; }
html[data-theme="dark"] .acct-form input,
html[data-theme="dark"] .acct-form select,
html[data-theme="dark"] .acct-form textarea { background: #14233C; border-color: var(--dais-border); color: var(--dais-body); }
html[data-theme="dark"] .acct-form input::placeholder,
html[data-theme="dark"] .acct-form textarea::placeholder { color: #6C7E97; }
html[data-theme="dark"] .acct-form input:focus,
html[data-theme="dark"] .acct-form select:focus,
html[data-theme="dark"] .acct-form textarea:focus { border-color: var(--dais-blue); box-shadow: 0 0 0 3px var(--dais-ring); }
html[data-theme="dark"] .acct-form .btn-submit { background: var(--dais-blue); color: #0C1524; }
html[data-theme="dark"] .acct-form .btn-submit:hover { background: var(--dais-blue-dark); }
html[data-theme="dark"] .acct-form .err { color: #F87171; }
html[data-theme="dark"] .acct-alt { color: var(--dais-muted); }
html[data-theme="dark"] .acct-alt a { color: var(--dais-blue); }

/* AUTO / SYSTEM mode: mirror of the dark block above for data-theme=system
   when the OS prefers dark, so the wizard matches the rest of the site. */
@media (prefers-color-scheme: dark) {
html[data-theme="system"] {
  --dais-bg:            #0C1524;
  --dais-surface:       #14233C;
  --dais-white:         #14233C;   /* only ever used as a background */
  --dais-body:          #C7D3E3;
  --dais-muted:         #93A6BF;
  --dais-border:        #26374F;
  --dais-border-strong: #3A567F;
  --dais-navy:          #0A1526;   /* header / footer background */
  --dais-blue:          #C89930;   /* accent -> site dark-mode gold */
  --dais-blue-dark:     #DFB040;
  --dais-heading:       #ECE7DB;
  --dais-success:       #56D68A;
  --dais-gold:          #E0A83A;
  --dais-ring:          rgba(200,153,48,0.30);
  --dais-shadow:        0 10px 30px -12px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4);
}
html[data-theme="system"] body { background: var(--dais-bg); color: var(--dais-body); }

/* Header title / footer text stay white on the dark navy bg (already hardcoded). */

/* --- Progress bar (was translucent-white + light greys) --- */
html[data-theme="system"] .dais-progress { background: rgba(20,35,60,0.72); border-bottom-color: var(--dais-border); }
html[data-theme="system"] .dais-step + .dais-step::before { background: var(--dais-border); }
html[data-theme="system"] .dais-step__circle { border-color: var(--dais-border-strong); color: var(--dais-muted); }
html[data-theme="system"] .dais-step__label { color: var(--dais-muted); }
html[data-theme="system"] .dais-step--completed .dais-step__circle { background: var(--dais-blue); border-color: var(--dais-blue); color: #0C1524; }
html[data-theme="system"] .dais-step--active   .dais-step__circle { color: #0C1524; }
html[data-theme="system"] .dais-step--completed .dais-step__label { color: var(--dais-blue); }

/* --- Card + text that used --dais-navy as a colour --- */
html[data-theme="system"] .dais-form-card { border-color: var(--dais-border); }
html[data-theme="system"] .dais-form-card__title,
html[data-theme="system"] .dais-section-divider,
html[data-theme="system"] .dais-label,
html[data-theme="system"] .dais-static-value { color: #ECE7DB; }

/* --- Fields --- */
html[data-theme="system"] .dais-input,
html[data-theme="system"] .dais-select,
html[data-theme="system"] .dais-textarea { color: var(--dais-body); }
html[data-theme="system"] .dais-input::placeholder,
html[data-theme="system"] .dais-textarea::placeholder { color: #6C7E97; }
html[data-theme="system"] .dais-input:focus,
html[data-theme="system"] .dais-select:focus,
html[data-theme="system"] .dais-textarea:focus { background: var(--dais-white); }
html[data-theme="system"] .dais-static-value { background: #0F1C30; }
html[data-theme="system"] .dais-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A6BF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* --- Buttons: primary is gold in dark, so its text goes dark --- */
html[data-theme="system"] .dais-btn--primary { color: #0C1524; }
html[data-theme="system"] .dais-btn-group { border-top-color: var(--dais-border); }

/* --- Notice / info / section divider borders --- */
html[data-theme="system"] .dais-notice { background: #14233C; border-color: var(--dais-border); color: var(--dais-body); }
html[data-theme="system"] .dais-notice--info { border-color: var(--dais-border-strong); }
html[data-theme="system"] .dais-section-divider { border-bottom-color: var(--dais-border); }
html[data-theme="system"] .dais-course-dates { background: #14233C; border-color: var(--dais-border); }
html[data-theme="system"] .dais-doc-checklist li { border-bottom-color: var(--dais-border); }

/* --- Confirmation (green box) --- */
html[data-theme="system"] .dais-confirm-box { background: #10241C; border-color: #2E6B4C; }
html[data-theme="system"] .dais-confirm-box__ref { background: #12302A; color: #86EFAC; }

/* --- File name + errors keep meaning, lifted for dark contrast --- */
html[data-theme="system"] .dais-file-name { color: #E0A83A; }
html[data-theme="system"] .dais-error,
html[data-theme="system"] .dais-doc-checklist li .required-tag { color: #F87171; }

/* --- Account pages (register / register-interest) use inline .acct-* styles;
       override for dark here. The html[data-theme] prefix outranks the inline
       light rules by specificity, regardless of source order. --- */
html[data-theme="system"] .acct-card { background: var(--dais-surface); border-color: var(--dais-border); box-shadow: var(--dais-shadow); }
html[data-theme="system"] .acct-card h1 { color: #ECE7DB; }
html[data-theme="system"] .acct-lead { color: var(--dais-muted); }
html[data-theme="system"] .approval-pending-notice,
html[data-theme="system"] .acct-msg { background: #14233C; border-color: var(--dais-border); border-left-color: var(--dais-blue); color: var(--dais-body); }
html[data-theme="system"] .acct-form label { color: #ECE7DB; }
html[data-theme="system"] .acct-form input,
html[data-theme="system"] .acct-form select,
html[data-theme="system"] .acct-form textarea { background: #14233C; border-color: var(--dais-border); color: var(--dais-body); }
html[data-theme="system"] .acct-form input::placeholder,
html[data-theme="system"] .acct-form textarea::placeholder { color: #6C7E97; }
html[data-theme="system"] .acct-form input:focus,
html[data-theme="system"] .acct-form select:focus,
html[data-theme="system"] .acct-form textarea:focus { border-color: var(--dais-blue); box-shadow: 0 0 0 3px var(--dais-ring); }
html[data-theme="system"] .acct-form .btn-submit { background: var(--dais-blue); color: #0C1524; }
html[data-theme="system"] .acct-form .btn-submit:hover { background: var(--dais-blue-dark); }
html[data-theme="system"] .acct-form .err { color: #F87171; }
html[data-theme="system"] .acct-alt { color: var(--dais-muted); }
html[data-theme="system"] .acct-alt a { color: var(--dais-blue); }
}