:root {
  --blue: #50A2FF; /* deliberate: public pages run the lighter primary (styles.css uses #3b82f6) */
  /* --blue-dark removed: unused, and it held the navy while styles.css's
     --blue-dark is a darker blue — same-name-different-concept hazard. */
  --blue-mid: #1d4ed8;
  --navy: #020C45;
  /* Same value as styles.css:--ink. Duplicated because these pages do NOT load styles.css:
     a custom property is inherited through the DOM, not shared between stylesheets, so a
     var(--ink) here would be invalid-at-computed-value-time and silently fall back to
     `inherit`. Keep in step with styles.css. */
  --ink: #020C45;
  --bg: #f0f5ff;
  --white: #ffffff;
  --gray-light: #e4ecf9;
  --gray-mid: #c0cfe8;
  --text: #020C45;
  --text-muted: #5a6a8a;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(2,12,69,0.09);
  --error: #ef4444;
  --error-bg: #fef2f2;
  --success: #008000;
  --success-bg: #e6faf3;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── NAV ── */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  box-shadow: 0 2px 12px rgba(2,12,69,0.07);
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.logo .check { color: var(--blue); }
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; }
.nav-signin {
  font-size: 0.88rem;
  color: var(--text-muted);
}
.nav-signin a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}
.nav-signin a:hover { text-decoration: underline; }

/* ── MAIN ── */
main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px 60px;
}

/* ── SHELL ── */
.signup-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  max-width: 940px;
  width: 100%;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 16px 60px rgba(2,12,69,0.12);
  border: 1.5px solid var(--gray-light);
}
/* No overflow:hidden here. It existed only to round the navy panel's corners,
   and .panel-left clips its own decoration anyway — but on the step column it
   also clipped the Turnstile widget, which is the one child that can be wider
   or taller than the box it was designed for (an interactive challenge expands
   in place). Round the navy panel directly instead and let the column breathe.
   Inset by the shell's 1.5px border so the curves still line up. */
.panel-left {
  border-radius: calc(16px - 1.5px) 0 0 calc(16px - 1.5px);
}

/* ── LEFT PANEL ── */
.panel-left {
  background: var(--navy);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.panel-left::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(80,162,255,0.1);
}
.panel-left::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(80,162,255,0.06);
}
.panel-logo {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.panel-logo .check { color: var(--blue); }

/* Step nav in sidebar */
.step-nav {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.step-nav-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0.45;
  transition: opacity 0.3s;
}
.step-nav-item.active { opacity: 1; }
.step-nav-item.done { opacity: 0.7; }

.step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
}
.step-nav-item.active .step-dot {
  background: var(--blue);
  border-color: var(--blue);
}
.step-nav-item.done .step-dot {
  background: var(--success);
  border-color: var(--success);
}
.step-dot span {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
}
.step-dot .check-mark {
  display: none;
}
.step-nav-item.done .step-dot span { display: none; }
.step-nav-item.done .step-dot .check-mark { display: block; }

.step-nav-text strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 2px;
}
.step-nav-text span {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.55);
}

.step-connector {
  width: 2px;
  height: 24px;
  background: rgba(255,255,255,0.12);
  margin-left: 14px;
  margin: 6px 0 6px 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

.panel-footer-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  position: relative;
  z-index: 1;
  margin-top: auto;
}

/* ── RIGHT PANEL ── */
.panel-right {
  padding: 40px 48px 48px;
  display: flex;
  flex-direction: column;
}

/* Progress bar */
.progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.progress-bar-track {
  flex: 1;
  height: 4px;
  background: var(--gray-light);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 25%;
}
.progress-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 600;
}

/* Global alert */
.form-alert {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.88rem;
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  line-height: 1.4;
  border: 1px solid rgba(239,68,68,0.25);
  background: var(--error-bg);
  color: #991b1b;
}
.form-alert.visible { display: flex; }
.form-alert svg { flex-shrink: 0; margin-top: 1px; }
.form-alert.success {
  background: var(--success-bg);
  color: #065f46;
  border-color: rgba(0,194,122,0.3);
}

/* Turnstile's 'flexible' size fills its container but will not go below 300px, and the step
   column is narrower than that on a 375px phone. The shell used to clip the overflow (badly —
   it cut the widget); now that it doesn't, contain the spill here instead, so a widget wider
   than its column scrolls inside its own box rather than pushing the whole page sideways. */
#captchaBox {
  max-width: 100%;
  overflow-x: auto;
}

/* The captcha hint when it is an INSTRUCTION rather than a status. Turnstile's
   Managed mode escalates to a "Verify you are human" checkbox for clients it
   trusts less, and the whole failure was people not realising the greyed button
   was waiting on that tick — the hint was 0.85rem muted grey, indistinguishable
   from the field hints around it. This makes the one line that asks for an
   action look like one. */
.captcha-hint-action {
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 0.9rem !important;
  background: rgba(80,162,255,0.1);
  border: 1px solid rgba(80,162,255,0.35);
  border-radius: 8px;
  padding: 9px 12px;
}

/* ── STEP PANELS ── */
/* `backwards`, not `both`. `both` retains the final keyframe forever, and that
   keyframe sets transform: translateX(0) — a non-none transform makes the panel
   a containing block AND a stacking context for good, so anything Turnstile
   overlays for an interactive challenge is trapped inside step 4's box and
   painted under the sticky nav. `backwards` still applies the `from` state
   before the run, so the slide-in looks identical; it just stops holding a
   transform the design never needed after the animation ends. */
.step-panel {
  display: none;
  flex-direction: column;
  animation: stepIn 0.35s ease backwards;
}
.step-panel.active { display: flex; }

@keyframes stepIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.step-header { margin-bottom: 28px; }
.step-eyebrow {
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin-bottom: 6px;
}
.step-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  line-height: 1.2;
}
.step-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── FORM ELEMENTS ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 18px;
}
.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.required { color: var(--blue); }
.label-hint {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.field-hint {
  font-size: 0.77rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap svg.input-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s;
}
.input-wrap input {
  width: 100%;
  border: 1.5px solid var(--gray-mid);
  border-radius: 8px;
  padding: 11px 14px 11px 40px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.93rem;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.input-wrap input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80,162,255,0.15);
}
.input-wrap:focus-within svg.input-icon { color: var(--blue); }
.input-wrap input::placeholder { color: var(--text-muted); opacity: 0.7; }
.input-wrap input[type="number"]::-webkit-inner-spin-button,
.input-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Error state */
.input-wrap.error input {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
.field-error {
  font-size: 0.78rem;
  color: var(--error);
  display: none;
  align-items: center;
  gap: 4px;
}
.field-error.visible { display: flex; }

/* Password toggle */
.pw-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
  transition: color 0.2s;
}
.pw-toggle:hover { color: var(--ink); }
.input-wrap input[type="password"],
.input-wrap input.has-toggle { padding-right: 44px; }

/* Password strength */
.pw-strength-bar {
  height: 3px;
  background: var(--gray-light);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.pw-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.4s, background 0.4s;
}
.pw-strength-label {
  font-size: 0.75rem;
  margin-top: 3px;
  font-weight: 600;
}

/* ── PHOTO UPLOAD ── */
.photo-upload-area {
  border: 2px dashed var(--gray-mid);
  border-radius: var(--radius);
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  position: relative;
}
.photo-upload-area:hover {
  border-color: var(--blue);
  background: rgba(80,162,255,0.03);
}
.photo-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-align: center;
}
.photo-preview svg { color: var(--gray-mid); }
.photo-preview span { font-size: 0.85rem; font-weight: 500; }
.photo-hint { font-size: 0.75rem; color: var(--gray-mid); }
.btn-remove-photo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--error);
  cursor: pointer;
  font-weight: 500;
}
.btn-remove-photo:hover { text-decoration: underline; }

/* ── OTP ── */
.otp-notice {
  background: rgba(80,162,255,0.08);
  border: 1px solid rgba(80,162,255,0.2);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 18px;
  line-height: 1.5;
}
.otp-inputs {
  display: flex;
  gap: 10px;
}
.otp-box {
  width: 46px;
  height: 54px;
  border: 1.5px solid var(--gray-mid);
  border-radius: 8px;
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--white);
  -webkit-appearance: none;
  appearance: none;
}
.otp-box:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80,162,255,0.15);
}
.otp-box.filled { border-color: var(--blue); }
.otp-box.error-box { border-color: var(--error); }
.otp-resend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.83rem;
  color: var(--text-muted);
}
.btn-link {
  background: none;
  border: none;
  color: var(--blue);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.btn-link:hover { text-decoration: underline; }

/* ── SKILLS GRID ── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.skill-chip {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  position: relative;
}
/* The checkbox must stay in the tab order: an invisible overlay (the
   consent.css switch pattern), not display:none, so the chips remain
   keyboard-operable with a visible focus ring on the styled span. */
.skill-chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.skill-chip input[type="checkbox"]:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.skill-chip span {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--gray-mid);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--white);
  transition: all 0.18s;
  cursor: pointer;
  text-align: center;
  display: block;
}
.skill-chip input:checked + span {
  background: rgba(80,162,255,0.1);
  border-color: var(--blue);
  color: var(--ink);
  font-weight: 600;
}
.skill-chip:hover span {
  border-color: var(--blue);
}

/* ── TERMS ── */
.terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.5;
}
.terms-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}
.terms-label a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.terms-label a:hover { text-decoration: underline; }

/* ── STEP ACTIONS ── */
.step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--gray-mid);
  border-radius: 8px;
  padding: 10px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-back:hover { border-color: var(--ink); color: var(--ink); }

.btn-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 11px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-next:hover {
  background: #0a1a5c;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2,12,69,0.2);
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 11px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  min-width: 180px;
}
.btn-submit:hover:not(:disabled) {
  background: var(--blue-mid);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(80,162,255,0.3);
}
.btn-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Spinner */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn-submit.loading .spinner { display: block; }
.btn-submit.loading .btn-label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── SUCCESS STATE ── */
.success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
}
.success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--success-bg);
  border: 2px solid rgba(0,194,122,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.btn-go-jobs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #ffffff;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.97rem;
  font-weight: 700;
  margin-top: 28px;
  transition: background 0.2s, transform 0.15s;
}
.btn-go-jobs:hover { background: var(--blue-mid); transform: translateY(-1px); }

/* ── FOOTER ── */
footer {
  background: var(--navy);
  color: rgba(255,255,255,0.6);
  text-align: center;
  padding: 22px;
  font-size: 0.85rem;
}
footer a { color: var(--blue); text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .signup-shell { grid-template-columns: 1fr; }
  .panel-left { display: none; }
  .panel-right { padding: 32px 28px 40px; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  nav { padding: 14px 20px; }
  .panel-right { padding: 24px 20px 36px; }
  .form-row { grid-template-columns: 1fr; }
  .otp-inputs { gap: 6px; }
  .otp-box { width: 40px; height: 48px; font-size: 1.1rem; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── COUNTRY SELECT (matches .input-wrap input) ── */
.input-wrap select {
  width: 100%;
  border: 1.5px solid var(--gray-mid);
  border-radius: 8px;
  padding: 11px 36px 11px 40px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.93rem;
  color: var(--text);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%235a6a8a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.input-wrap select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80,162,255,0.15);
}

/* ── ABOUT-YOU TEXTAREA ── */
.wizard-textarea {
  width: 100%;
  border: 1.5px solid var(--gray-mid);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.93rem;
  color: var(--text);
  background: var(--white);
  outline: none;
  resize: vertical;
  min-height: 78px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wizard-textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(80,162,255,0.15); }
.wizard-textarea::placeholder { color: var(--text-muted); opacity: 0.7; }

/* ── SKILLS EDITOR (category + free-form name + evidence) ── */
.skills-editor { margin-top: 4px; }
.skills-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.skills-list:empty { display: none; }
.skill-item { border: 1.5px solid var(--gray-mid); border-radius: 8px; padding: 9px 11px; background: var(--white); }
.skill-item-head { display: flex; align-items: center; gap: 9px; }
.skill-cat { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); background: rgba(80,162,255,0.12); padding: 2px 8px; border-radius: 50px; white-space: nowrap; }
.skill-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.skill-evidence-toggle { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 0.76rem; font-family: 'DM Sans', sans-serif; padding: 4px 8px; border-radius: 6px; }
.skill-evidence-toggle:hover { color: var(--blue); background: rgba(80,162,255,0.1); }
.skill-evidence-toggle.has-evidence { color: var(--success); }
.skill-remove { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 1.1rem; line-height: 1; padding: 0 2px; }
.skill-remove:hover { color: var(--error); }
.skill-evidence-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.skill-evidence-items:empty { display: none; }
.ev-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--gray-light); border-radius: 6px; padding: 3px 6px 3px 8px; font-size: 0.76rem; color: var(--text); }
.ev-chip .ev-label { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-chip .ev-remove { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 0.9rem; line-height: 1; padding: 0 2px; }
.ev-chip .ev-remove:hover { color: var(--error); }
.skill-evidence-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.skill-evidence-form select, .skill-ev-value { padding: 8px 10px; border: 1.5px solid var(--gray-mid); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; background: var(--white); color: var(--text); outline: none; }
.skill-ev-value { flex: 1; min-width: 150px; }
.skill-evidence-form select:focus, .skill-ev-value:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(80,162,255,0.15); }
.skill-ev-btn { border: 1.5px solid var(--gray-mid); background: var(--white); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.skill-ev-btn:hover { border-color: var(--blue); color: var(--blue); }
.skill-ev-btn.primary { background: var(--blue); border-color: var(--blue); color: #ffffff; }
.skill-ev-btn.primary:hover { color: #ffffff; }
.skills-add { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.skills-field { display: flex; flex-direction: column; gap: 5px; }
.skills-add .skills-field label { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.skills-add select, .skills-add input[type="text"] { padding: 10px 12px; border: 1.5px solid var(--gray-mid); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; background: var(--white); color: var(--text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.skills-add select:focus, .skills-add input[type="text"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(80,162,255,0.15); }
.skill-add-btn { padding: 10px 18px; border: none; border-radius: 8px; background: var(--navy); color: #ffffff; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.18s; }
.skill-add-btn:hover { background: var(--blue-mid); }

/* ---------- Dark mode — toggled by JS/theme.js ---------- */
body.dark {
  --bg: #0b1226;
  --white: #111a38;           /* surface flips; always-white text is literal #ffffff */
  --gray-bg: #0e1832;
  --gray-light: #26325c;
  --gray-mid: #34426e;
  --border: #26325c;
  --text: #dbe4f8;
  --ink: #e8eefc;
  --text-muted: #93a3c8;
  --blue-pale: rgba(59,130,246,0.16);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  /* --navy is NOT flipped: it is the bg of heroes/footers/panels (already dark) */
  background: #0b1226;
  color: #dbe4f8;
}
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5 { color: #e8eefc; }
/* ── QA dark-mode accessibility fixes (signup is self-contained → repaint nav + field labels) ── */
body.dark { color-scheme: dark; }
body.dark nav { background: #111a38; border-bottom-color: #26325c; }
body.dark nav .logo { color: #ffffff; }
body.dark .nav-links a { color: var(--text, #dbe4f8); }
body.dark .nav-links a:hover, body.dark .nav-links a.active { color: #50A2FF; }
body.dark .form-group label, body.dark .skills-add .skills-field label, body.dark .skill-name { color: #dbe4f8; }
body.dark .btn-back:hover { border-color: #50A2FF; color: #e8eefc; }
body.dark .pw-toggle:hover { color: #e8eefc; }