:root {
  /* Brand: grounded in the real CareerMargam mark -- forest green +
     warm gold, the same pairing already established on the landing
     page, unified here across the whole app instead of the previous
     generic navy/teal SaaS palette. Variable names kept as -navy/-teal
     so every existing usage cascades to the new brand without needing
     to touch each one individually. */
  --navy: #0F5132;
  --navy-light: #14663f;
  --navy-lighter: #1c7a4d;
  --teal: #1f9d55;
  --teal-dark: #167a41;
  --gold: #c9972e;
  --gold-dark: #a97a1e;
  --gold-bg: #fbf3e2;
  --ink: #1c261f;
  --muted: #5c6a5f;
  --card-bg: #f6f4ed;
  --page-bg: #faf9f4;
  --line: #e5e1d3;
  --green-bg: #e8f5e9;
  --green: #1e7d32;
  --red-bg: #fdecea;
  --red: #b3261e;
  --blue-bg: #e6f1fb;
  --blue: #0c447c;
  --shadow-sm: 0 1px 3px rgba(20, 37, 26, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 37, 26, 0.08);
  --sidebar-width: 250px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); background: var(--page-bg); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); }

/* A real, site-wide base style for text-like form fields -- there was
   previously NO general rule at all, so any input/textarea outside the
   two narrowly-scoped exceptions below (.builder-card, .test-case-row)
   fell back to the bare, unstyled browser default: no padding, a thin
   grey 1px border, and critically no width rule at all, so a textarea
   in a wide container still rendered at the browser's tiny default
   column width rather than filling it -- exactly the cramped, unpolished
   look reported on the Career Coach question box. This is the base
   every text field on the site should have unless a more specific rule
   (already scoped narrower, so it still wins) says otherwise. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="search"], input[type="url"], input[type="date"],
input:not([type]), textarea, select {
  width: 100%; padding: 11px 14px; font-family: var(--font-body); font-size: 14px;
  color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="date"]:focus,
input:not([type]):focus, textarea:focus, select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.15);
}
label { display: block; font-weight: 600; font-size: 13.5px; color: var(--navy); margin: 14px 0 6px; }
label:first-child { margin-top: 0; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  /* A real, confirmed defect this fixes: the gradient used to fade into
     #14182e, a leftover dark navy-blue from before the forest-green
     rebrand -- visibly mismatched against the rest of the palette.
     Now a cohesive deepening of the same green the brand actually uses. */
  background: linear-gradient(180deg, var(--navy) 0%, #081c11 100%);
  color: white; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-nav { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  color: rgba(255,255,255,0.82); text-decoration: none; padding: 9px 14px; border-radius: 8px;
  font-size: 14px; transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover { background: var(--navy-light); color: white; }
.sidebar-nav a.active { background: var(--gold); color: var(--navy); font-weight: 600; }
.sidebar-group-label {
  color: rgba(255,255,255,0.45); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; padding: 14px 14px 4px;
}
.sidebar-group-label:first-child { padding-top: 4px; }
.sidebar-footer { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; }
.sidebar-footer .who { color: rgba(255,255,255,0.65); display: block; margin-bottom: 6px; }
.sidebar-footer a { color: var(--gold); text-decoration: none; }
.sidebar-footer a:hover { text-decoration: underline; }

.main-content { flex: 1; min-width: 0; padding: 30px 32px 60px; }

/* Mobile navigation: a slide-in drawer, not the old approach of
   wrapping every nav link into a horizontal row above the content --
   with 20-30+ links for admin-level roles, that produced several rows
   of tiny wrapped text before any real content appeared at all. */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }

  .mobile-topbar {
    display: flex; align-items: center; gap: 12px; background: var(--navy); color: white;
    padding: 12px 16px; position: sticky; top: 0; z-index: 60; box-shadow: var(--shadow-sm);
  }
  .mobile-topbar .brand-mark-img { width: 28px; height: 28px; }
  .mobile-topbar strong { font-family: var(--font-display); font-size: 16px; }
  .mobile-menu-btn {
    background: none; border: none; color: white; font-size: 22px; line-height: 1; cursor: pointer;
    padding: 4px 8px; margin: -4px 0; border-radius: 6px;
  }
  .mobile-menu-btn:hover { background: rgba(255,255,255,0.12); }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 82vw;
    flex-direction: column; transform: translateX(-100%); transition: transform 0.25s ease-out;
    z-index: 80; box-shadow: 4px 0 20px rgba(0,0,0,0.25);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar .brand { display: none; }  /* already shown in the mobile topbar; avoid showing it twice */
  .sidebar-nav { flex-direction: column; flex-wrap: nowrap; padding: 10px; }
  .sidebar-group-label { display: block; }
  .sidebar-footer { padding: 10px 16px 16px; }

  .sidebar-backdrop.visible {
    display: block; position: fixed; inset: 0; background: rgba(11, 18, 32, 0.55); z-index: 70;
  }

  .main-content { padding: 20px 16px 50px; }
}

.sidebar .brand { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; }
.brand-mark-img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }

h1 {
  /* Real bug fixed here: this rule previously set font-family back to
     Cambria (a generic system serif), silently overriding the
     h1,h2,h3 { font-family: var(--font-display) } rule above it --
     every page title in the app was rendering in Cambria instead of
     the brand's actual Fraunces, since this rule came later in the
     cascade at the same specificity. */
  color: var(--navy);
}
.hint { color: var(--muted); font-size: 13.5px; }

.flash-stack { margin-bottom: 18px; }
.flash { padding: 10px 14px; border-radius: 6px; font-size: 13.5px; margin-bottom: 8px; }
.flash-success { background: var(--green-bg); color: var(--green); }
.flash-error { background: var(--red-bg); color: var(--red); }
.flash-info { background: var(--blue-bg); color: var(--blue); }

.auth-card, .settings-card {
  /* Every specialized card elsewhere in this file already carries
     --shadow-sm or --shadow-md (see gauge-card, availability-item,
     classroom-stage, etc.) -- this base card, used for nearly every
     generic content section across the app, was the one place that
     shadow language was never applied, leaving it visibly flatter
     than everything around it. */
  background: white; border: 1px solid var(--line); border-radius: 10px;
  padding: 24px 26px; margin-bottom: 22px; max-width: 460px; box-shadow: var(--shadow-sm);
}

/* Optional, secondary profile-context fields on the registration form --
   visually set apart from the required fields above so it reads as "a
   nice-to-have, not another hurdle to sign up". */
.register-more-section { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.register-more-heading { font-weight: 600; margin: 0 0 12px; }
.checkbox-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px;
  margin-bottom: 14px;
}
.checkbox-grid-item {
  display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 14px;
  cursor: pointer;
}
.checkbox-grid-item input { width: auto; margin: 0; }

@media (max-width: 480px) {
  .checkbox-grid { grid-template-columns: 1fr; }
}
.settings-card { max-width: 620px; }
.settings-card-wide { max-width: 680px; }

.provider-row { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.provider-active { border-color: var(--teal); background: #f3fbfa; }
.provider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.active-badge { background: var(--teal); color: white; font-size: 10.5px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; margin-left: 8px; }
.provider-form { margin-top: 6px; }
.provider-actions { margin-top: 4px; }
.btn-small { padding: 6px 12px; font-size: 12.5px; margin-top: 6px; }
.inline-select-form { display: inline-block; margin-top: 6px; margin-right: 8px; }
.models-result { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.models-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.models-list code { background: var(--card-bg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; font-size: 12px; }

form label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; color: var(--navy); }
form input[type="text"], form input[type="email"], form input[type="password"], form input[type="number"], form select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 13.5px;
}
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 14px; }
.checkbox-label input { width: auto; }

.btn { display: inline-block; border-radius: 6px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; margin-top: 16px; border: 1px solid var(--navy); background: white; color: var(--navy); text-align: center; white-space: nowrap; transition: background 0.15s, box-shadow 0.15s, transform 0.1s; }
.btn-primary { background: var(--teal); border-color: var(--teal); color: white; }
.btn-primary:hover { background: var(--teal-dark); box-shadow: 0 3px 10px rgba(31, 157, 85, 0.3); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }
.btn-ghost { border-color: var(--line); color: var(--muted); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.inline-form { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }

.auth-switch { font-size: 13px; color: var(--muted); margin-top: 14px; }
.current-value { font-size: 13px; color: var(--muted); }
.current-value code { background: var(--card-bg); padding: 2px 6px; border-radius: 4px; }
.current-value-empty { color: #a33; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; }
.module-card { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; position: relative; }
.module-card-link { text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s, border-color 0.15s; }
.module-card-link:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.module-card h3 { margin: 6px 0 6px; font-size: 15px; color: var(--navy); }
.module-card p { font-size: 13px; color: var(--muted); margin: 0; }
.module-status { display: inline-block; font-size: 10.5px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: var(--card-bg); color: var(--muted); }
.status-planned { background: #fff4e0; color: #8a5c0b; }
.status-active { background: var(--green-bg); color: var(--green); }
.status-locked { background: var(--red-bg); color: var(--red); }
.module-card-locked { opacity: 0.72; background: var(--card-bg); }

.subscribe-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #0a3620 100%);
  color: white; border-radius: 18px; padding: 32px 30px; margin-bottom: 26px;
  box-shadow: var(--shadow-md); text-align: center; border: 1px solid rgba(201, 151, 46, 0.25);
}
.subscribe-banner h2 { margin: 0 0 10px; font-size: 26px; color: white; font-family: var(--font-display); }
.subscribe-banner p { color: rgba(255,255,255,0.85); max-width: 620px; margin: 0 auto 22px; font-size: 15px; }
.subscribe-banner-plans { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.subscribe-banner-plan {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(201, 151, 46, 0.35);
  border-radius: 14px; padding: 18px 20px; width: 220px; text-align: left;
}
.subscribe-banner-plan h3 { margin: 0 0 6px; color: white; font-size: 16px; }
.subscribe-banner-price { font-size: 20px; font-weight: 700; color: var(--gold); margin-bottom: 10px; }
.subscribe-banner-plan ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: rgba(255,255,255,0.85); }
.subscribe-banner-plan li { margin-bottom: 4px; }
.subscribe-banner-cta {
  display: inline-block; background: var(--gold); color: var(--navy); font-weight: 700; padding: 12px 28px;
  border-radius: 999px; text-decoration: none; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: transform 0.12s;
}
.subscribe-banner-cta:hover { transform: scale(1.04); }

@media (max-width: 700px) {
  .subscribe-banner-plans { flex-direction: column; align-items: center; }
  .subscribe-banner-plan { width: 100%; max-width: 320px; }
}

/* Shown instead of the subscribe-banner's pricing while a candidate's
   profile isn't complete yet -- deliberately calmer and lighter than
   the celebratory pricing reveal above, since this is a guided,
   in-progress checklist rather than a "you're ready" moment. */
.profile-gate-banner {
  display: flex; gap: 20px; align-items: flex-start; background: white;
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px;
  margin-bottom: 26px; box-shadow: var(--shadow-sm);
}
.profile-gate-icon { font-size: 34px; line-height: 1; flex-shrink: 0; }
.profile-gate-body h2 { margin: 0 0 6px; font-size: 20px; }
.profile-gate-body > p { margin: 0 0 16px; }
.profile-gate-steps { display: flex; flex-direction: column; gap: 10px; }
.profile-gate-step {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 10px; background: var(--page-bg); font-size: 14px;
}
.profile-gate-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700;
  background: var(--card-bg); color: var(--muted); flex-shrink: 0;
}
.profile-gate-step-done { background: var(--green-bg); }
.profile-gate-step-done .profile-gate-step-icon { background: var(--green); color: white; }
.profile-gate-step-link { margin-left: auto; font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; }
.profile-gate-step-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .profile-gate-banner { flex-direction: column; }
}

/* Availability widget (candidate / trainer / interviewer) */
.availability-add-form {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  background: var(--card-bg); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px;
}
.availability-field { display: flex; flex-direction: column; gap: 6px; }
.availability-field label { font-size: 12.5px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.03em; }
.availability-field input[type="date"], .availability-field select {
  padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 8px; font-size: 14px;
  background: white; color: var(--ink); min-height: 42px; transition: border-color 0.15s, box-shadow 0.15s;
}
.availability-field input[type="date"]:focus, .availability-field select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 168, 160, 0.12);
}
.availability-add-btn { display: flex; align-items: center; gap: 6px; padding: 10px 22px; min-height: 42px; }
.availability-plus { font-size: 17px; font-weight: 700; line-height: 1; }

.availability-list { display: flex; flex-direction: column; gap: 10px; }
.availability-item {
  display: flex; align-items: center; gap: 14px; background: white; border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 10px; padding: 14px 18px; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-left-color 0.15s;
}
.availability-item:hover { box-shadow: var(--shadow-md); border-left-color: var(--gold); }
.availability-item-icon { font-size: 22px; }
.availability-item-info { flex: 1; }
.availability-item-info strong { color: var(--navy); font-size: 14.5px; }
.availability-remove-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: white;
  color: var(--muted); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.availability-remove-btn:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }

.availability-empty { text-align: center; padding: 30px 20px; color: var(--muted); }
.availability-empty-icon { font-size: 32px; margin-bottom: 8px; }

@media (max-width: 600px) {
  .availability-add-form { flex-direction: column; align-items: stretch; }
  .availability-add-btn { width: 100%; justify-content: center; }
}

/* Job openings table */
.job-openings-table-wrap { overflow-x: auto; }
.job-openings-table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.job-openings-table th { text-align: left; background: var(--navy); color: white; padding: 12px 16px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.job-openings-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
.job-openings-table tr:last-child td { border-bottom: none; }
.job-openings-table tr:hover td { background: var(--card-bg); }
.job-openings-table .btn { margin-top: 0; }

/* Job openings scrolling ticker (landing page) */
.job-ticker-wrap {
  display: flex; align-items: center; background: linear-gradient(90deg, #7b2ff7 0%, #f107a3 55%, #ff8a3d 100%);
  border-radius: 12px; margin-bottom: 24px; overflow: hidden; box-shadow: 0 6px 20px rgba(123, 47, 247, 0.25);
  border: 2px solid rgba(255,255,255,0.25);
}
.job-ticker-label {
  flex-shrink: 0; background: rgba(255,255,255,0.95); color: #f107a3; font-weight: 800; font-size: 14px;
  padding: 13px 20px; white-space: nowrap; letter-spacing: 0.02em; display: flex; align-items: center; gap: 7px;
}
.job-ticker-label-icon { width: 15px; height: 15px; flex-shrink: 0; }
.job-ticker-track {
  flex: 1; overflow: hidden; position: relative;
  mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
}
.job-ticker-content { display: flex; width: max-content; animation: job-ticker-scroll 28s linear infinite; }
.job-ticker-item { color: white; font-size: 14.5px; padding: 13px 48px 13px 0; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.job-ticker-item strong { font-size: 15.5px; }
.job-ticker-deadline { background: rgba(255,255,255,0.22); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; margin-left: 4px; }
@keyframes job-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.job-ticker-track:hover .job-ticker-content { animation-play-state: paused; }
.job-ticker-cta {
  flex-shrink: 0; background: rgba(255,255,255,0.95); color: #7b2ff7; font-weight: 800; font-size: 13px;
  padding: 13px 18px; white-space: nowrap; text-decoration: none; transition: background 0.15s;
}
.job-ticker-cta:hover { background: white; }

@media (max-width: 700px) {
  .job-ticker-cta { display: none; }
}

.page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; max-width: 620px; }
.choice-card { display: block; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 20px; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
.choice-card:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.choice-card h3 { margin: 0 0 8px; color: var(--navy); font-size: 15.5px; }
.choice-card p { margin: 0; font-size: 13px; color: var(--muted); }

.builder-card { max-width: 640px; }
.builder-card textarea {
  min-height: 130px; line-height: 1.6; font-size: 14.5px; padding: 12px 14px;
  resize: vertical; font-family: inherit;
}
.builder-card textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.15); }
.builder-role-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.builder-checkbox-pill {
  display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: white; cursor: pointer; font-size: 13.5px; transition: border-color 0.15s, background 0.15s;
}
.builder-checkbox-pill:has(input:checked) { border-color: var(--teal); background: var(--green-bg); font-weight: 600; }
.builder-checkbox-pill input { width: auto; margin: 0; }

.builder-section-title { font-family: Cambria, Georgia, serif; color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: 4px; margin-top: 26px; }
.builder-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.builder-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.builder-repeatable-row { background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
@media (max-width: 600px) { .builder-grid-2, .builder-grid-3 { grid-template-columns: 1fr; } }

.resume-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; max-width: 640px; }
.resume-row { display: flex; align-items: center; justify-content: space-between; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.resume-row:hover { border-color: var(--teal); }
.chevron { color: var(--muted); }

.resume-text, .review-text { white-space: pre-wrap; font-family: 'Segoe UI', Calibri, Arial, sans-serif; font-size: 13.5px; background: var(--card-bg); border-radius: 8px; padding: 16px; margin: 10px 0 0; max-height: 420px; overflow-y: auto; }
.review-block { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.review-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

.ats-score-row { display: flex; align-items: center; gap: 16px; margin: 14px 0 20px; }
.ats-score-big { font-family: Cambria, Georgia, serif; font-weight: bold; font-size: 34px; padding: 10px 22px; border-radius: 10px; }
.ats-score-green { background: var(--green-bg); color: var(--green); }
.ats-score-orange { background: #fff4e0; color: #8a5c0b; }
.ats-score-red { background: var(--red-bg); color: var(--red); }

.ats-category-title { font-size: 14px; color: var(--navy); margin: 18px 0 8px; font-family: Cambria, Georgia, serif; }
.ats-rule-list { display: flex; flex-direction: column; gap: 8px; }
.ats-rule-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; background: var(--card-bg); }
.ats-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.ats-dot-pass { background: var(--green); }
.ats-dot-warn { background: #b8790a; }
.ats-dot-fail { background: var(--red); }
.ats-rule-desc { font-size: 13px; font-weight: 600; color: var(--navy); }
.ats-rule-detail { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.step-num-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: white; font-size: 13px; font-weight: 700; margin-right: 8px; vertical-align: middle; }
.ats-band-label { font-weight: 700; color: var(--navy); font-size: 14px; }

.downloads-card { background: #f3fbfa; border-color: var(--teal); }
.downloads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.download-tile { display: flex; flex-direction: column; gap: 4px; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; text-decoration: none; color: var(--navy); transition: border-color 0.15s, box-shadow 0.15s; }
.download-tile:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }

.company-search-box { width: 100%; max-width: 400px; padding: 9px 14px; margin: 10px 0 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.company-search-box:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,168,160,0.12); }

.code-editor { width: 100%; min-height: 320px; font-family: Consolas, 'Courier New', monospace; font-size: 13.5px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #1e1e2e; color: #e0e0e8; tab-size: 4; line-height: 1.5; }
.test-case-row { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.test-case-row-header { font-size: 12.5px; font-weight: 700; color: var(--navy); display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.test-case-row textarea { min-height: 50px; font-family: Consolas, monospace; }

.ide-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; max-width: 1100px; margin: 0 auto; align-items: start; }
.ide-problem-panel { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.ide-editor-panel { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.ide-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ide-toolbar select { width: auto; padding: 7px 10px; }
@media (max-width: 860px) { .ide-layout { grid-template-columns: 1fr; } }

.ide-solution-block { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.ide-solution-code {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
  font-family: Consolas, monospace; font-size: 13px; white-space: pre-wrap; overflow-x: auto; color: var(--ink);
}

.grid-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.grid-controls .company-search-box { margin: 0; flex: 1; min-width: 220px; }
.grid-controls select { width: auto; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }

.gauge-pair { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.gauge-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-sm); flex: 1; min-width: 260px; text-align: center; }
.gauge-card h2 { margin-top: 0; font-size: 16px; }
.gauge-svg { width: 100%; max-width: 260px; height: auto; }

.leaderboard-rank { font-family: Cambria, Georgia, serif; font-weight: 700; font-size: 18px; color: var(--muted); min-width: 34px; }
.leaderboard-me { background: var(--gold-bg); border-radius: 8px; }
.leaderboard-me .leaderboard-rank { color: var(--gold-dark); }

.interview-avatar-wrap { text-align: center; margin-bottom: 12px; }
.interview-voice-controls { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }

/* Landing page */
.landing-page { max-width: 1200px; margin: -14px auto 0; }
.landing-nav { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 16px; }
.landing-logo { font-size: 20px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.landing-logo-accent { color: var(--gold-dark); }
.landing-nav-actions { display: flex; gap: 10px; }
.btn-ghost-light { background: transparent; border: 1px solid var(--navy); color: var(--navy); padding: 9px 16px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.btn-ghost-light:hover { background: var(--navy); color: white; }

.landing-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #14182e 100%);
  border-radius: 20px; padding: 60px 48px; margin: 10px 0 40px; color: white; text-align: center;
}
.landing-eyebrow { color: var(--gold); letter-spacing: 3px; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.landing-hero h1 { font-family: Cambria, Georgia, serif; font-size: 42px; line-height: 1.2; margin: 0 0 18px; color: white; }
.landing-headline-accent { color: var(--gold); }
.landing-subtext { font-size: 17px; color: rgba(255,255,255,0.82); max-width: 560px; margin: 0 auto 28px; }
.landing-hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.landing-hero-login { color: rgba(255,255,255,0.75); font-size: 14px; text-decoration: underline; }

.landing-section-label { text-align: center; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--navy); margin-bottom: 26px; }
.landing-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 14px; margin-bottom: 0; }
.landing-flow-step { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 20px 16px; box-shadow: var(--shadow-sm); text-align: center; width: 148px; transition: box-shadow 0.15s, transform 0.15s; }
.landing-flow-step:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.landing-step-icon {
  width: 42px; height: 42px; border-radius: 50%; color: var(--navy); background: white;
  border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; margin: 0 auto 12px; font-family: Cambria, Georgia, serif;
}
.landing-flow-step h3 { margin: 0; color: var(--navy); font-family: Cambria, Georgia, serif; font-size: 14.5px; line-height: 1.3; }
.landing-flow-arrow { display: none; }

.landing-flow-connector { width: 2px; height: 30px; background: var(--line); margin: 0 auto; }
.landing-flow-outcome {
  background: linear-gradient(135deg, var(--navy) 0%, #14182e 100%); border-radius: 14px; padding: 22px 30px;
  display: flex; align-items: center; justify-content: center; gap: 22px; box-shadow: var(--shadow-md);
  max-width: 420px; margin: 0 auto;
}
.landing-flow-outcome-item { display: flex; align-items: center; gap: 10px; }
.landing-flow-outcome-icon { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }
.landing-flow-outcome h3 { margin: 0; color: white; font-family: Cambria, Georgia, serif; font-size: 15px; white-space: nowrap; }
.landing-flow-outcome-arrow { color: var(--gold); font-size: 18px; font-weight: 700; }

@media (max-width: 900px) {
  .landing-flow-step { width: calc(33.333% - 10px); }
}
@media (max-width: 600px) {
  .landing-flow-step { width: calc(50% - 8px); }
  .landing-flow-outcome { flex-direction: column; gap: 14px; padding: 20px; }
  .landing-flow-outcome-arrow { transform: rotate(90deg); }
}

.landing-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; padding: 28px; background: var(--card-bg); border-radius: 14px; margin-bottom: 50px; margin-top: 50px; }
.landing-feature { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--navy); }
.landing-feature-icon { width: 19px; height: 19px; color: var(--gold-dark); flex-shrink: 0; }

.landing-cta { text-align: center; padding: 40px 20px 60px; }
.landing-cta h2 { font-family: Cambria, Georgia, serif; color: var(--navy); margin-bottom: 18px; }

@media (max-width: 860px) {
  .landing-hero h1 { font-size: 30px; }
  .landing-nav { flex-direction: column; gap: 14px; }
}

/* Login / Register split layout */
.auth-split { display: flex; min-height: 70vh; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); margin: 20px auto; max-width: 980px; }
.auth-branding-panel {
  flex: 1; background: linear-gradient(135deg, var(--navy) 0%, #14182e 100%);
  color: white; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center;
}
.industry-branding-panel { background: linear-gradient(135deg, #0b3d5c 0%, #062338 100%); }
.auth-branding-panel h2 { font-family: Cambria, Georgia, serif; font-size: 28px; line-height: 1.3; margin: 20px 0 14px; color: white; }
.auth-brand-logo { width: 150px; height: auto; margin-bottom: 12px; display: block; }
.auth-branding-panel p { color: rgba(255,255,255,0.78); font-size: 14.5px; margin-bottom: 22px; }
.auth-branding-list { list-style: none; padding: 0; margin: 0; }
.auth-branding-list li { padding: 8px 0 8px 26px; position: relative; color: rgba(255,255,255,0.9); font-size: 14px; border-top: 1px solid rgba(255,255,255,0.1); }
.auth-branding-list li:before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.auth-form-panel { flex: 1; background: white; display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-form-panel .auth-card { max-width: 360px; width: 100%; box-shadow: none; padding: 0; border: none; margin-bottom: 0; }

@media (max-width: 760px) {
  .auth-split { flex-direction: column; margin: 0; border-radius: 0; }
  .auth-branding-panel { padding: 32px 24px; }
}

.staff-info-list { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.staff-info-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.staff-info-row:last-child { border-bottom: none; }

.proctoring-prompt { max-width: 640px; margin: 0 auto 14px; background: #fff8e6; border: 1px solid #f0d78c; border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: #6b5417; }
.proctoring-notice { position: fixed; top: 16px; right: 16px; z-index: 9999; background: var(--navy); color: white; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); display: none; max-width: 320px; }
.proctoring-notice-high { background: var(--red); font-weight: 600; }
.proctoring-block-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15, 26, 20, 0.92); display: flex; align-items: center; justify-content: center; padding: 20px; }
.proctoring-block-card { background: white; border-radius: 12px; padding: 28px; max-width: 440px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.proctoring-block-card h2 { margin-top: 0; font-size: 20px; }
.proctoring-block-card p { color: var(--muted); margin-bottom: 20px; }

.progress-bar-track { background: var(--line); border-radius: 999px; height: 8px; margin: 10px 0 22px; overflow: hidden; max-width: 500px; }
.progress-bar-fill { background: var(--teal); height: 100%; transition: width 0.3s; }

/* Interview module — professional look */
.interview-intro { max-width: 640px; margin: 0 auto 24px; text-align: center; }
.interview-intro-badge { display: inline-block; background: var(--navy); color: white; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.interview-setup-card { max-width: 560px; margin: 0 auto; }

.difficulty-choice-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
.difficulty-choice { display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 14px; cursor: pointer; position: relative; transition: border-color 0.15s, background 0.15s; }
.difficulty-choice:has(input:checked) { border-color: var(--teal); background: #f3fbfa; }
.difficulty-choice input[type="radio"] { position: absolute; top: 12px; right: 14px; }
.difficulty-choice-label { font-weight: 700; color: var(--navy); font-size: 14px; }
.difficulty-choice-desc { font-size: 12px; color: var(--muted); }

.interview-header-bar { display: flex; align-items: center; justify-content: space-between; max-width: 640px; margin: 0 auto 6px; }
.interview-role-label { font-family: Cambria, Georgia, serif; font-weight: bold; font-size: 17px; color: var(--navy); }
.interview-progress-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
#start-form ~ .progress-bar-track, .interview-header-bar + .progress-bar-track { max-width: 640px; margin-left: auto; margin-right: auto; }

.interview-question-card { max-width: 640px; margin: 0 auto; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 28px 30px; box-shadow: 0 2px 14px rgba(27,31,59,0.06); }
.interview-question-tag { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--teal-dark); background: #f3fbfa; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.interview-question-text { font-family: Cambria, Georgia, serif; font-size: 18px; line-height: 1.5; color: var(--navy); margin: 0 0 20px; }
.interview-answer-box { width: 100%; min-height: 160px; font-size: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: 'Segoe UI', Calibri, Arial, sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.interview-report-header { max-width: 720px; margin: 0 auto 20px; text-align: center; border-bottom: 2px solid var(--navy); padding-bottom: 18px; }
.interview-report-header h1 { margin-bottom: 4px; }

/* Practice test module */
.timer-display { font-family: Consolas, monospace; font-size: 22px; font-weight: 700; color: var(--navy); }
.timer-warning { color: var(--red); animation: timer-pulse 1s infinite; }
@keyframes timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.mcq-options-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mcq-option-choice { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.mcq-option-choice:has(input:checked) { border-color: var(--teal); background: #f3fbfa; }
.mcq-option-choice input { flex-shrink: 0; }
.mcq-option-choice span { font-size: 13.5px; }

.mcq-options-review { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.mcq-option-correct { color: var(--green); font-weight: 700; }

.feedback-answer-box { background: var(--card-bg); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-top: 4px; }

/* AI Tutor classroom */
.classroom-wrap { max-width: 780px; margin: 0 auto; }
.classroom-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.classroom-settings {
  display: flex; gap: 20px; background: var(--card-bg); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px;
}
.classroom-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.classroom-settings select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); }
.classroom-stage { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-md); text-align: center; }
.classroom-progress { height: 6px; background: var(--card-bg); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.classroom-progress-bar { height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width 0.3s; }
.classroom-text { min-height: 160px; display: block; text-align: center; padding: 30px 20px; font-family: Cambria, Georgia, serif; line-height: 1.9; color: var(--navy); font-size: 26px; max-height: 340px; overflow-y: auto; }
.classroom-word { transition: background-color 0.15s, color 0.15s; border-radius: 4px; padding: 0 1px; }
.classroom-word-active { background-color: var(--gold); color: white; }
.classroom-controls { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.classroom-question-box { text-align: left; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.classroom-completion { position: fixed; inset: 0; background: rgba(27,31,59,0.75); display: flex; align-items: center; justify-content: center; z-index: 200; }
.classroom-completion-card { background: white; border-radius: 16px; padding: 40px; text-align: center; max-width: 420px; box-shadow: var(--shadow-md); }

@media (max-width: 640px) {
  .classroom-stage { padding: 20px; }
  .classroom-text { font-size: 22px; min-height: 120px; }
}

/* Voice recording "continue" state -- shown when browser speech recognition
   auto-stops from a pause in speech (not a deliberate stop), so it reads as
   a clear invitation to keep going rather than the plain initial record button. */
.btn-continue-answering {
  background: var(--gold) !important; color: white !important; border-color: var(--gold) !important;
  animation: continue-pulse 1.8s ease-in-out infinite;
}
@keyframes continue-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 134, 31, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(201, 134, 31, 0); }
}

/* Trait Quest */
.quest-wrap { max-width: 900px; margin: 0 auto; }
.quest-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.quest-xp-display { background: var(--navy); color: white; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.realm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 16px; }
.realm-card {
  background: white; border: 2px solid var(--line); border-radius: 14px; padding: 20px 12px; text-align: center;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.realm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.realm-card-done { border-color: var(--green); background: #f2fbf5; }
.realm-icon { font-size: 32px; margin-bottom: 8px; }
.realm-name { font-weight: 700; color: var(--navy); font-size: 14px; }
.realm-status { font-size: 12px; color: var(--muted); margin-top: 4px; }

.quest-stage { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 30px; box-shadow: var(--shadow-md); }
.quest-progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.quest-realm-label { font-weight: 700; color: var(--navy); }
.quest-streak { background: linear-gradient(90deg, #ff8a3d, #ffb703); color: white; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.quest-options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.quest-option-btn {
  text-align: left; padding: 14px 18px; border-radius: 10px; border: 2px solid var(--line); background: white;
  cursor: pointer; font-size: 15px; transition: border-color 0.15s, background 0.15s;
}
.quest-option-btn:hover:not(:disabled) { border-color: var(--gold); background: var(--card-bg); }
.quest-option-btn:disabled { opacity: 0.6; cursor: default; }
.quest-feedback { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.quest-feedback-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.quest-feedback-strong { background: #e3f7ea; color: var(--green); }
.quest-feedback-ok { background: #fff4e0; color: #b0740a; }
.quest-feedback-weak { background: #fdecec; color: #a83232; }
.quest-badge { display: inline-block; background: var(--gold); color: white; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }

@media (max-width: 640px) {
  .quest-stage { padding: 18px; }
  .realm-grid { grid-template-columns: repeat(2, 1fr); }
}

.quest-promo-card { background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 55%, #ff8a3d 100%); color: white; border: none; }
.quest-promo-card h2, .quest-promo-card p { color: white; }
.quest-promo-card .btn-primary { background: white; color: #7b2ff7; border-color: white; }

/* Google Sign-In */
.auth-divider { display: flex; align-items: center; text-align: center; margin: 16px 0; color: var(--muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--line); }
.auth-divider span { padding: 0 12px; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font-weight: 600;
  font-size: 14px; text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s;
}
.btn-google:hover { box-shadow: var(--shadow-sm); border-color: #c9c9c9; }

/* Coding practice list: language pools */
.lang-pool-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.lang-pool-pill {
  padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: white;
  font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.lang-pool-pill:hover { border-color: var(--teal); }
.lang-pool-pill-active { border-color: var(--teal); background: var(--green-bg); color: var(--teal-dark); }
.lang-badge { display: inline-block; background: var(--card-bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; color: var(--navy); }

.job-external-notice {
  margin-top: 10px; padding: 8px 12px; background: var(--gold-bg); border-left: 3px solid var(--gold);
  border-radius: 4px; font-size: 12px; color: var(--gold-dark); white-space: normal; line-height: 1.5;
}

/* Job Tracker */
.tracker-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.tracker-column { flex: 0 0 250px; background: var(--card-bg); border-radius: 10px; padding: 10px; }
.tracker-column-header { font-weight: 700; font-size: 13px; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; background: white; border: 1px solid var(--line); }
.tracker-count { background: var(--line); color: var(--muted); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
.tracker-status-saved { border-left: 3px solid var(--muted); }
.tracker-status-applied { border-left: 3px solid var(--teal); }
.tracker-status-interviewing { border-left: 3px solid var(--gold); }
.tracker-status-offer { border-left: 3px solid var(--green); }
.tracker-status-rejected { border-left: 3px solid #a33; }
.tracker-status-withdrawn { border-left: 3px solid var(--muted); }
.tracker-column-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.tracker-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.tracker-card-notes { font-size: 12px; color: var(--muted); margin-top: 6px; font-style: italic; }
.tracker-card-actions { display: flex; gap: 10px; margin-top: 8px; }
.tracker-card-link { font-size: 12px; font-weight: 600; }
.tracker-move-form { margin-top: 8px; }
.tracker-move-form select { width: 100%; font-size: 12px; padding: 4px 6px; }
@media (max-width: 900px) {
  .tracker-board { flex-direction: column; }
  .tracker-column { flex: none; width: 100%; }
}

/* Candidate dashboard: readiness score */
/* At-a-glance synthesis of the same category data the readiness cards
   below already show, in full -- two scannable columns rather than
   reading through every individual card to piece the takeaway together
   yourself. Deliberately sits above the detailed breakdown, not
   instead of it. */
.insight-summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1180px; margin: 0 auto 22px; }
.insight-summary-col { background: white; border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-sm); border-top: 4px solid; }
.insight-summary-strengths { border-top-color: var(--green); }
.insight-summary-focus { border-top-color: var(--gold); }
.insight-summary-col h3 { margin: 0 0 14px; font-size: 16px; }
.insight-summary-item { padding: 12px 0; border-top: 1px solid var(--line); }
.insight-summary-item:first-of-type { border-top: none; padding-top: 0; }
.insight-summary-item-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 4px; }
.insight-summary-item p { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.insight-summary-score { font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.insight-summary-score-good { background: var(--green-bg); color: var(--green); }
.insight-summary-score-focus { background: var(--gold-bg); color: var(--gold-dark); }
.insight-summary-action { font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; }
.insight-summary-action:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .insight-summary-row { grid-template-columns: 1fr; }
}

.readiness-card { margin-bottom: 20px; border-top: 4px solid var(--teal); max-width: 1180px; }
.readiness-header h2 { margin-bottom: 4px; font-size: 22px; }
.readiness-body { display: grid; grid-template-columns: 280px 1fr 1fr; gap: 24px; margin-top: 18px; align-items: start; }
.readiness-gauge-wrap {
  text-align: center; background: linear-gradient(180deg, var(--card-bg) 0%, white 100%);
  border-radius: 14px; padding: 22px 16px 18px; border: 1px solid var(--line);
}
.readiness-status-chip {
  display: inline-block; margin-top: 8px; padding: 5px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
}
.status-chip-green { background: var(--green-bg); color: var(--green); }
.status-chip-gold { background: var(--gold-bg); color: var(--gold-dark); }
.status-chip-red { background: #fdecec; color: #a33; }
.status-chip-neutral { background: var(--card-bg); color: var(--muted); }
.readiness-trend-note { margin-top: 10px; font-weight: 600; }

.readiness-breakdown { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.readiness-item {
  display: block; background: white; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.readiness-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,30,60,0.09); }
.readiness-item-green { border-left-color: var(--green); }
.readiness-item-gold { border-left-color: var(--gold); }
.readiness-item-red { border-left-color: #d64545; }
.readiness-item-empty { border-left-color: var(--line); }
.readiness-item-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.readiness-item-label { font-weight: 700; font-size: 14.5px; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.readiness-item-icon { font-size: 17px; }
.readiness-item-score { font-weight: 800; font-size: 15px; color: var(--navy); }
.readiness-item-green .readiness-item-score { color: var(--green); }
.readiness-item-gold .readiness-item-score { color: var(--gold-dark); }
.readiness-item-red .readiness-item-score { color: #d64545; }
.readiness-item-score-muted { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.readiness-item-bar-track { height: 6px; background: var(--card-bg); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.readiness-item-bar-fill { height: 100%; border-radius: 4px; background: var(--line); }
.readiness-item-green .readiness-item-bar-fill { background: var(--green); }
.readiness-item-gold .readiness-item-bar-fill { background: var(--gold); }
.readiness-item-red .readiness-item-bar-fill { background: #d64545; }
.readiness-item-message { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 8px; }
.readiness-item-action { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--teal-dark); text-decoration: none; }
@media (max-width: 800px) {
  .readiness-body { grid-template-columns: 1fr; }
}

/* Candidate dashboard: skill shape radar chart */
.radar-card { margin-bottom: 20px; }
.radar-wrap { display: flex; justify-content: center; padding: 10px 0; }
.radar-svg { width: 100%; max-width: 420px; height: auto; }
.radar-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-axis { stroke: var(--line); stroke-width: 1; }
.radar-shape { fill: rgba(31, 157, 85, 0.16); stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.radar-point { fill: var(--teal-dark); }
.radar-label { font-size: 10.5px; fill: var(--muted); font-family: var(--font-body); }

/* AI Career Coach */
.coach-history { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.coach-question { align-self: flex-end; background: var(--card-bg); border-radius: 12px 12px 2px 12px; padding: 10px 16px; max-width: 80%; font-size: 14px; margin-top: 14px; }
.coach-answer { align-self: flex-start; background: var(--green-bg); border-radius: 12px 12px 12px 2px; padding: 12px 16px; max-width: 85%; font-size: 14px; line-height: 1.6; white-space: pre-line; }

/* Focus mode: psychometric/company/coding tests and AI interviews --
   no sidebar, just a minimal topbar with Back/Fullscreen/Home so the
   full screen is available for the actual test, without losing basic
   navigation entirely. */
.focus-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--page-bg); }
.focus-topbar {
  background: var(--navy); color: white; padding: 10px 20px; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm);
}
.focus-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: white; opacity: 0.9; }
.focus-nav-btn {
  background: rgba(255,255,255,0.12); color: white; border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background 0.15s;
}
.focus-nav-btn:hover { background: rgba(255,255,255,0.22); }
.focus-main { flex: 1; padding: 28px; max-width: 900px; margin: 0 auto; width: 100%; }
@media (max-width: 700px) {
  .focus-topbar { padding: 8px 12px; }
  .focus-title { display: none; }
  .focus-main { padding: 16px; }
}

/* AI-generated coding problem verification summary (admin preview) --
   each test case's real, executed verification result against the
   generated solution, not just a generic "review this" notice. */
.ai-verify-summary {
  max-width: 700px; background: white; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.ai-verify-summary-head { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--navy); }
.ai-verify-row { font-size: 13.5px; padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; line-height: 1.5; }
.ai-verify-row:last-child { margin-bottom: 0; }
.ai-verify-row code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.ai-verify-ok { background: var(--green-bg); color: var(--green); }
.ai-verify-warn { background: var(--gold-bg); color: var(--gold-dark); }
.ai-verify-error { background: var(--red-bg); color: var(--red); }
.ai-verify-muted { background: var(--card-bg); color: var(--muted); }

/* Frontier Engineer Program -- built as a genuine flagship feature, so
   deliberately more visually distinct than a standard settings-card
   page: a real hero header, a dark gradient banner (matching the
   subscribe-banner's brand treatment elsewhere), and a proper grouped
   skill-graph layout rather than a plain list. */
.frontier-hero { max-width: 1180px; margin: 0 auto 26px; text-align: center; padding: 34px 20px 10px; }
.frontier-hero-badge {
  display: inline-block; background: var(--gold-bg); color: var(--gold-dark);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 14px;
  border-radius: 999px; margin-bottom: 14px;
}
.frontier-hero h1 { font-size: 38px; margin: 0 0 8px; }
.frontier-hero .hint { font-size: 15px; max-width: 520px; margin: 0 auto; }

.frontier-skill-card { max-width: 1180px; }
.frontier-skill-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 16px; }
.frontier-skill-group h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 10px; }
.frontier-skill-row { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 10px; margin-bottom: 8px; }
.frontier-skill-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frontier-skill-bar { height: 6px; background: var(--page-bg); border-radius: 4px; overflow: hidden; }
.frontier-skill-bar-fill { height: 100%; background: var(--teal); border-radius: 4px; }
.frontier-skill-level { font-size: 11.5px; text-align: right; white-space: nowrap; }

.frontier-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; }
.frontier-module-card {
  display: flex; gap: 14px; align-items: flex-start; background: white; border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.frontier-module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.frontier-module-number {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0;
  background: var(--green-bg); color: var(--green); font-weight: 700; border-radius: 50%; font-size: 14px;
}
.frontier-module-card strong { display: block; margin-bottom: 4px; }
.frontier-module-card p { margin: 0 0 6px; }

@media (max-width: 700px) {
  .frontier-skill-row { grid-template-columns: 90px 1fr 70px; }
}

/* The dashboard's own, smaller Frontier Engineer summary card -- a dark,
   brand-toned card (like the subscribe-banner) so it visually stands
   apart as "the flagship program", distinct from the neutral white
   cards around it on the same page. */
.frontier-dash-card {
  max-width: 1180px; margin: 0 auto 22px; background: linear-gradient(135deg, var(--navy), #0d3320);
  border-radius: 14px; padding: 22px 26px; color: white;
}
.frontier-dash-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.frontier-dash-card-head .btn-ghost { background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.3); }
.frontier-dash-card h3 { margin: 0 0 14px; color: white; font-size: 19px; }
.frontier-dash-card-body { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.frontier-dash-stat-value { font-size: 32px; font-weight: 700; color: var(--gold); line-height: 1; }
.frontier-dash-card .hint { color: rgba(255,255,255,0.7); }
.frontier-dash-top-skills { display: flex; flex-direction: column; gap: 6px; }
.frontier-dash-skill-chip {
  background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 999px; font-size: 13px; display: inline-flex; gap: 6px;
}
.frontier-dash-skill-chip strong { color: var(--gold); }

.frontier-readiness-card { max-width: 1180px; }
.frontier-readiness-headline { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.frontier-readiness-score-big { font-size: 48px; font-weight: 700; color: var(--green); line-height: 1; }
.frontier-readiness-score-big span { font-size: 24px; }
.frontier-readiness-breakdown { display: flex; flex-direction: column; gap: 8px; }
.frontier-readiness-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.frontier-readiness-row:last-child { border-bottom: none; }

.frontier-lesson-content { white-space: pre-wrap; line-height: 1.7; margin-bottom: 24px; }
.frontier-lesson-qa { border-top: 1px solid var(--line); padding-top: 18px; }
.frontier-lesson-qa textarea { min-height: 70px; margin: 8px 0; }

/* Job Openings redesign -- a genuine card-per-listing layout with real
   visual hierarchy for structured fields (location/work mode/salary as
   distinct badges, skills as tags), replacing the old plain table where
   everything lived in one undifferentiated text block. */
.job-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; max-width: 1180px; }
.job-filter-bar select, .job-filter-bar input[type="number"] { width: auto; margin: 0; }
.job-filter-search { flex: 1; min-width: 220px; margin: 0; }
.job-external-banner { background: var(--gold-bg); color: var(--gold-dark); padding: 10px 14px; border-radius: 8px; max-width: 1180px; margin-bottom: 14px; }

.job-card-list { display: flex; flex-direction: column; gap: 14px; max-width: 1180px; }
.job-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; box-shadow: var(--shadow-sm); }
.job-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.job-card-company { font-size: 17px; }
.job-badge {
  display: inline-block; background: var(--page-bg); color: var(--navy); font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; margin-right: 6px; margin-bottom: 4px;
}
.job-badge-salary { background: var(--green-bg); color: var(--green); }
.job-badge-external { background: var(--gold-bg); color: var(--gold-dark); }
.job-card-meta { margin-bottom: 10px; }
.job-card-description { white-space: pre-wrap; margin: 0 0 10px; font-size: 14px; }
.job-skill-tags { margin-bottom: 10px; }
.job-skill-tag {
  display: inline-block; border: 1px solid var(--line); color: var(--muted); font-size: 12px;
  padding: 3px 10px; border-radius: 999px; margin-right: 6px; margin-bottom: 4px;
}
.job-card-contact { margin-bottom: 12px; }
.job-card-contact a { color: var(--green); }
.job-card-actions { display: flex; gap: 8px; }
.job-pagination { display: flex; align-items: center; gap: 14px; margin-top: 18px; max-width: 1180px; }

.tracker-reminders, .tracker-recommendations {
  background: white; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; max-width: 1180px;
}
.tracker-reminders { border-left: 3px solid var(--gold); }
.tracker-recommendations { border-left: 3px solid var(--teal); }
.tracker-reminder-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13.5px; }


/* AI Interview score breakdown (report page) */
.score-headline { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.score-headline-number { font-size: 44px; font-weight: 700; color: var(--navy); line-height: 1; }
.score-headline-number span { font-size: 18px; color: var(--muted); font-weight: 500; }
.score-pillar { padding: 12px 0; border-top: 1px solid var(--line); }
.score-pillar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.score-pillar-score { font-size: 20px; font-weight: 700; color: var(--navy); }
.score-pillar-bar { height: 7px; background: var(--page-bg); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.score-pillar-bar div { height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius: 999px; }
.score-criteria { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink); }
.score-vocal-detail { margin-top: 14px; padding: 14px 16px; background: var(--card-bg); border-radius: 10px; font-size: 13.5px; }


/* Psychometric levels hub */
.pl-section { max-width: 1180px; margin-bottom: 28px; }
.pl-explain { max-width: 820px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 16px; margin-top: 12px; }
.pl-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.pl-card-own { border: 2px solid var(--teal); }
.pl-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pl-num { display: inline-block; background: var(--navy); color: white; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; letter-spacing: 0.02em; }
.pl-tag { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pl-tag-own { background: var(--green-bg); color: var(--green); }
.pl-name { margin: 6px 0 2px; font-size: 20px; }
.pl-tagline { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; }
.pl-dots { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.pl-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.pl-dots span.on { background: var(--gold); }
.pl-dots small { margin-left: 6px; color: var(--muted); font-size: 11.5px; }
.pl-audience, .pl-focus { margin: 0 0 8px; font-size: 13.5px; }
.pl-focus { color: var(--muted); }
.pl-meta { margin: 4px 0 12px; font-size: 12.5px; color: var(--muted); }
.pl-status { font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--line); margin-top: auto; }
.pl-practice-note { display: inline-block; background: var(--gold-bg); color: var(--gold-dark); font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-left: 6px; }
.pl-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.pl-link-button { background: none; border: none; padding: 0; color: var(--teal-dark); font-size: 12.5px; text-decoration: underline; cursor: pointer; font-weight: 600; }
.pl-families { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 12px; }
.pl-family { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.pl-family h3 { margin: 0 0 2px; font-size: 16px; }
.pl-family ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; }
.pl-family li { margin-bottom: 5px; }
.pl-take-badge { margin: 4px 0 8px; font-size: 15px; font-weight: 600; }
.pl-result-group { margin-top: 16px; }
.pl-result-group-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

/* AI Resilience console + Help assistant */
.air-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin: 14px 0; }
.air-tier { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.air-tier-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.air-num { background: var(--navy); color: white; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.air-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.air-closed { background: var(--green-bg); color: var(--green); } .air-open { background: var(--red-bg); color: var(--red); }
.air-half_open { background: var(--gold-bg); color: var(--gold-dark); } .air-idle { background: var(--card-bg); color: var(--muted); }
.air-warn { color: var(--red); font-size: 13px; }
.air-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; display: block; overflow-x: auto; }
.air-table th { text-align: left; background: var(--card-bg); font-weight: 700; padding: 7px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.air-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* Career Coach: static-first answer */
.coach-static { line-height: 1.5; }
.coach-headline { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.coach-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.coach-chip { background: var(--card-bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.coach-chip em { font-style: normal; color: var(--muted); margin-right: 4px; }
.coach-h { margin: 14px 0 4px; color: var(--navy); }
.coach-items { list-style: none; padding: 0; margin: 6px 0; }
.coach-items > li { border-left: 4px solid var(--line); padding: 6px 12px; margin: 8px 0; background: #fff; border-radius: 0 8px 8px 0; }
.coach-items > li.sev-critical { border-left-color: var(--red); } .coach-items > li.sev-improve { border-left-color: var(--gold); }
.coach-items > li.sev-maintain { border-left-color: #6b8fb5; } .coach-items > li.sev-strength { border-left-color: var(--green); }
.coach-actions { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.coach-steps { padding-left: 20px; } .coach-steps li { margin: 4px 0; }
.coach-kb { background: var(--card-bg); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.coach-deep, .coach-deep-ask { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.coach-deep { background: #f4f9f5; border: 1px solid #cfe5d4; border-radius: 8px; padding: 10px 14px; }

.coach-answer .coach-static { white-space: normal; }
.coach-answer .coach-deep-ask, .coach-answer .coach-deep-ask * { white-space: normal; }