/* ==========================================================================
   HERO  (ref img1/img4 – Home hero;  img5 – Jobs hero;  img6 – Guidance;
          img2 – Industry;  img3 – dashboard side-panel)
   ========================================================================== */
.hero {
  position: relative;
  color: #fff;
  background: linear-gradient(112deg, var(--navy-950) 0%, var(--navy-800) 52%, #123a68 100%);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center right;
  opacity: 0.78;
}
/* The whole wash comes from the admin's "Image shades" screen: one custom
   property per surface carries the gradient that screen builds.  The value in
   the fallback is the shipped design, so the page still reads correctly if the
   table is missing or the inline block has not loaded. */
.hero__scrim {
  position: absolute; inset: 0;
  background: var(--shade-hero, linear-gradient(
    100deg,
    rgba(6,26,50,.97) 22%,
    rgba(10,36,64,.88) 48%,
    rgba(10,36,64,.36) 78%,
    rgba(10,36,64,.14) 100%
  ));
}
/* Container padding — keeps the gutter.  The landing hero is deliberately
   compact so it matches the reference banner (ref img4, ≈425px tall). */
.hero__inner { position: relative; padding: 34px var(--gutter) 22px; }

/* Two-column grid (copy left + promo right) — landing page only */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 44px;
  align-items: center;
}
.hero__copy          { max-width: 820px; min-width: 0; }
.hero__aside         { display: flex; justify-content: flex-end; align-items: center; }
.hero__aside-inner   { width: 100%; max-width: 372px; }

/* Animated teal glow */
.hero__glow {
  position: absolute; inset: -20% -10% auto auto;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,217,195,.22), transparent 66%);
  pointer-events: none;
  animation: hero-glow 14s ease-in-out infinite alternate;
}
@keyframes hero-glow {
  from { transform: translate3d(0,0,0) scale(1); opacity: .75; }
  to   { transform: translate3d(-70px,50px,0) scale(1.12); opacity: 1; }
}

/* Eyebrow label (teal uppercase) */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal-500);
}

/* Hero h1 */
.hero h1 {
  font-size: 56px; font-weight: 800; line-height: 1.05; color: #fff;
  margin-top: 10px; letter-spacing: -.03em;
}
/* Home headline is a single white block (ref img1 / img4); the teal accent is
   reserved for the inner page banners such as Placement Guidance. */
.hero h1 .accent { color: #fff; display: block; }
.hero--inner h1 .accent { color: var(--teal-500); }

.hero__sub {
  margin-top: 10px; font-size: 16px; line-height: 1.5;
  color: rgba(255,255,255,.86); max-width: 500px;
}

/* Script watermark (e.g. "Better Skills Brighter Careers") */
.hero__script {
  position: absolute; right: 6%; top: 34px;
  font-family: var(--font-script); font-size: 31px; line-height: 1.14;
  color: rgba(255,255,255,.94); transform: rotate(-5deg);
  text-align: center; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.26);
}
.hero__script::after {
  content: ""; display: block; width: 62px; height: 3px;
  background: var(--teal-500); border-radius: 2px;
  margin: 8px auto 0; transform: rotate(4deg);
}

/* ── Hero search bar (Home / Jobs listing) ───────────────────────────────── */
.hero-search {
  margin-top: 16px;
  display: flex; align-items: center; gap: 0;
  background: #fff; border-radius: var(--r-lg);
  padding: 6px; box-shadow: var(--sh-lg); max-width: 900px;
  transition: box-shadow var(--t-base);
}
.hero-search:focus-within {
  box-shadow: 0 24px 60px rgba(0,0,0,.34), var(--sh-focus);
}
.hero-search__field {
  display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0;
  padding: 0 14px;
}
.hero-search__field svg   { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.hero-search__field input {
  border: 0; outline: none; background: transparent; width: 100%;
  font-size: 14.5px; padding: 12px 0; color: var(--ink-800);
}
.hero-search__field input::placeholder { color: var(--ink-300); }
.hero-search__sep  { width: 1px; align-self: stretch; margin: 6px 0; background: var(--line); }
.hero-search .btn  { height: 48px; padding-inline: 28px; flex: none; border-radius: var(--r-md); }

/* Pill variant (feed pages — compact) */
.hero-search--pill {
  border-radius: var(--r-pill); padding: 5px 22px 5px 18px;
  max-width: 400px; box-shadow: 0 16px 36px rgba(0,0,0,.28);
}
.hero-search--pill .hero-search__field         { padding: 0; }
.hero-search--pill .hero-search__field input   { padding: 13px 0; font-size: 14px; }
.hero-search--pill .hero-search__field svg     { width: 19px; height: 19px; }

/* ── Popular searches ─────────────────────────────────────────────────────── */
.popular-searches {
  margin-top: 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.popular-searches__label { font-size: 13px; color: rgba(255,255,255,.76); }
.popular-searches a {
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.34);
  font-size: 12.5px; color: #fff; transition: all var(--t-fast);
}
.popular-searches a:hover {
  background: rgba(255,255,255,.18); border-color: #fff; transform: translateY(-1px);
}

/* ── WhatsApp promo card ──────────────────────────────────────────────────── */
.hero-promo {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: var(--r-lg); padding: 14px 16px;
  box-shadow: 0 20px 42px rgba(0,0,0,.3); min-width: 0; width: 100%;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.hero-promo:hover { transform: translateY(-3px); box-shadow: 0 28px 56px rgba(0,0,0,.36); }
.hero-promo__icon {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--teal-050); color: var(--teal-600);
}
.hero-promo__icon svg    { width: 26px; height: 26px; }
.hero-promo strong       { display: block; font-size: 14.5px; color: var(--ink-900); }
.hero-promo span         { font-size: 12.5px; color: var(--ink-500); }
.hero-promo .arrow {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--blue-600); color: #fff;
  transition: transform var(--t-base); margin-left: auto;
}
.hero-promo:hover .arrow { transform: translateX(3px); }
.hero-promo .arrow svg   { width: 16px; height: 16px; }

/* ── Hero inline search (compact pill input, no button) ───────────────────── */
.hero-inline-search {
  margin-top: 24px; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: var(--r-pill); padding: 5px 5px 5px 18px;
  max-width: 560px; box-shadow: var(--sh-md);
}
.hero-inline-search svg   { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.hero-inline-search input {
  border: 0; outline: none; background: transparent; flex: 1;
  font-size: 14px; padding: 12px 0; color: var(--ink-800); min-width: 0;
}
.hero-inline-search input::placeholder { color: var(--ink-400); }

/* Hero stats strip (displayed below hero on pages that show aggregate numbers) */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border-top: 1px solid var(--line);
}
.stats__item {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.stats__item:last-child { border-right: 0; }
.stats__icon {
  width: 38px; height: 38px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-600);
}
.stats__icon svg { width: 20px; height: 20px; }
.stats__value    { font-size: 22px; font-weight: 800; font-family: var(--font-head); color: var(--ink-900); line-height: 1; }
.stats__label    { font-size: 12.5px; color: var(--ink-500); margin-top: 3px; }

/* ── Hero feature strip ───────────────────────────────────────────────────── */
.hero-features {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(var(--feature-count, 4), minmax(0, 1fr));
  gap: 20px; max-width: 100%;
}
.hero-feature          { display: flex; align-items: flex-start; gap: 10px; }
.hero-feature__icon    {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  color: var(--teal-500);
}
.hero-feature__icon svg{ width: 22px; height: 22px; }
.hero-feature strong   { display: block; font-size: 13.5px; color: #fff; font-weight: 700; }
.hero-feature span     { font-size: 12px; color: rgba(255,255,255,.7); }

/* Round variant (Placement Guidance hero) */
.hero-features--round { gap: 28px; }
.hero-features--round .hero-feature { align-items: center; gap: 14px; }
.hero-features--round .hero-feature__icon {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(43,217,195,.55);
  background: rgba(43,217,195,.1);
  transition: transform var(--t-base), background var(--t-base);
}
.hero-features--round .hero-feature__icon svg { width: 19px; height: 19px; }
.hero-features--round .hero-feature:hover .hero-feature__icon {
  transform: scale(1.07); background: rgba(43,217,195,.2);
}

/* ── Hero stats (mobile) ──────────────────────────────────────────────────── */
.hero-stats {
  margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; max-width: 640px;
}
.hero-stat strong { display: block; font-size: 20px; font-weight: 800; color: #fff; }
.hero-stat span   { font-size: 11.5px; color: rgba(255,255,255,.68); }

/* ── Hero size variants ───────────────────────────────────────────────────── */
/* Page banners (Jobs / Guidance / Industry / Toolkit) all share one fixed
   banner height so every non-home banner lines up exactly. */
.hero--inner .hero__inner          {
  padding: 40px var(--gutter) 46px;
  min-height: var(--hero-banner-h, 360px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero--inner h1                    { font-size: 46px; margin-top: 8px; }
.hero--inner .hero__sub            { margin-top: 10px; font-size: 15px; max-width: 640px; }

.hero--compact .hero__inner        { padding: 22px var(--gutter) 28px; }
.hero--compact h1                  { font-size: 36px; margin-top: 6px; letter-spacing: -.022em; }
.hero--compact .hero__sub          { margin-top: 7px; font-size: 14px; }
.hero--compact .hero__script       { font-size: 32px; top: 24px; }

.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}

/* ==========================================================================
   Home – Featured Job Opportunities  (ref img1 / img4)
   ========================================================================== */
/* 4 job cards + 1 wide promo campus card */
.jobs-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.28fr;
  gap: 18px;
}

.featured-job {
  display: flex; flex-direction: column; padding: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.featured-job:hover            { box-shadow: var(--sh-md); transform: translateY(-2px); }
.featured-job h3               { font-size: 16px; margin-top: 14px; }
.featured-job .company         { font-size: 13px; color: var(--ink-500); margin-top: 3px; }
.featured-job .meta            { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.featured-job .meta span       { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-600); }
.featured-job .meta svg        { width: 15px; height: 15px; color: var(--ink-400); }
.featured-job .chips           { display: flex; gap: 8px; margin-top: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.featured-job .btn             { margin-top: auto; }

/* Campus promo card (dark teal) */
.promo-campus {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 28px 24px; border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(120% 100% at 18% 0%, #14494a 0%, #0d3350 46%, #0a2340 100%);
  border: 1px solid rgba(255,255,255,.08);
  position: relative; overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.promo-campus::after {
  content: ""; position: absolute; right: -70px; bottom: -80px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,217,195,.22), transparent 68%);
}
.promo-campus:hover            { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.promo-campus__art             { height: 64px; display: grid; place-items: center; margin-bottom: 8px; }
.promo-campus__art svg         { filter: drop-shadow(0 6px 16px rgba(23,191,169,.35)); }
.promo-campus h3               { font-size: 22px; line-height: 1.16; color: #fff; }
.promo-campus p                { font-size: 13.5px; color: rgba(255,255,255,.76); }
.promo-campus .btn {
  margin-top: 14px; align-self: flex-start; position: relative; z-index: 1;
  background: #fff; color: var(--navy-900);
}
.promo-campus .btn:hover       { box-shadow: 0 12px 26px rgba(0,0,0,.24); }

/* ==========================================================================
   Home – Career Guidance strip  (ref img1 / img4)
   ========================================================================== */
.guidance-strip {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 16px;
}

.strip-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  min-height: 138px; display: flex; align-items: flex-end;
  padding: 16px; color: #fff;
  background: linear-gradient(120deg, var(--navy-800), var(--navy-600));
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.strip-card:hover             { transform: translateY(-2px); box-shadow: var(--sh-md); }
.strip-card__img              { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .56; }
.strip-card__scrim            { position: absolute; inset: 0; background: var(--shade-strip_card, linear-gradient(180deg, rgba(8,24,44,.22) 0%, rgba(8,24,44,.86) 100%)); }
.strip-card__body             { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.strip-card h3                { color: #fff; font-size: 15.5px; line-height: 1.26; }
.strip-card .tag              { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-500); margin-bottom: 5px; display: block; }
.strip-card .go {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.7); color: #fff;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.strip-card:hover .go         { background: #fff; color: var(--navy-800); border-color: #fff; }
.strip-card .go svg           { width: 14px; height: 14px; }

/* ==========================================================================
   Jobs listing  (ref img5)
   ========================================================================== */
.jobs-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px; padding: 24px 0 48px; align-items: start;
}

/* Left filter panel */
.filters                      { position: sticky; top: calc(var(--header-h) + 16px); padding: 18px; }
.filters__head                { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.filters__head h3             { font-size: 17px; }
.filters__clear               { font-size: 12.5px; color: var(--blue-600); font-weight: 600; background: none; border: 0; padding: 0; }
.filters__clear:hover         { text-decoration: underline; }
.filter-group                 { border-top: 1px solid var(--line-soft); padding: 14px 0 4px; }
.filter-group:first-of-type   { border-top: 0; }
.filter-group__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; padding: 0 0 10px; font-size: 13.5px; font-weight: 700;
  color: var(--ink-800); font-family: var(--font-head);
}
.filter-group__toggle svg     { width: 16px; height: 16px; color: var(--ink-400); transition: transform var(--t-base); }
.filter-group.is-collapsed .filter-group__toggle svg { transform: rotate(180deg); }
.filter-group.is-collapsed .filter-group__body       { display: none; }
.filter-group__body           { display: flex; flex-direction: column; gap: 1px; }
.filter-search                { position: relative; margin-bottom: 8px; }
.filter-search svg            { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-400); }
.filter-search input          { padding: 8px 10px 8px 32px; font-size: 13px; }
.filter-more                  { font-size: 12.5px; color: var(--blue-600); font-weight: 600; background: none; border: 0; padding: 8px 0 2px; display: inline-flex; align-items: center; gap: 5px; }
.filter-more svg              { width: 14px; height: 14px; transition: transform var(--t-base); }
.filter-more.is-open svg      { transform: rotate(180deg); }
.checkline[hidden],
.checkline.is-hidden          { display: none !important; }

/* Salary slider */
.salary-slider                { position: relative; padding: 6px 2px 0; }
.salary-track                 { position: relative; height: 4px; border-radius: 3px; background: var(--line-strong); margin: 16px 2px 30px; }
.salary-fill                  { position: absolute; top: 0; bottom: 0; background: var(--blue-600); border-radius: 3px; }
.salary-slider input[type="range"] {
  position: absolute; left: 0; right: 0; top: 20px; width: 100%;
  margin: 0; height: 16px; background: transparent; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.salary-slider input[type="range"]:focus { outline: none; }
.salary-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.salary-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 15px; height: 15px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--blue-600);
  box-shadow: var(--sh-xs); cursor: pointer;
}
.salary-slider input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.salary-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--blue-600); box-shadow: var(--sh-xs); cursor: pointer;
}
.salary-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-500); margin-top: 4px; }
.salary-value  { margin: 0 2px 2px; font-size: 13px; font-weight: 700; color: var(--blue-600); font-family: var(--font-head); letter-spacing: -0.01em; }

/* Toolbar */
.jobs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.jobs-toolbar .count  { font-size: 15px; font-weight: 700; color: var(--ink-900); font-family: var(--font-head); }
.jobs-toolbar .sort   { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-500); }
.jobs-toolbar .sort .select { width: auto; padding: 8px 34px 8px 12px; font-size: 13px; }

/* List search bar */
.list-search {
  display: flex; align-items: center; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 6px; margin-bottom: 18px;
}
.list-search__field { display: flex; align-items: center; gap: 10px; flex: 1 1 0; padding: 0 14px; min-width: 0; }
.list-search__field svg   { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.list-search__field input { border: 0; outline: none; width: 100%; padding: 12px 0; font-size: 14px; background: transparent; }
.list-search__sep   { width: 1px; align-self: stretch; margin: 6px 0; background: var(--line); }
.list-search .btn   { height: 46px; padding-inline: 24px; }

/* Job row card */
.job-row {
  display: flex; gap: 18px; padding: 20px 24px; margin-bottom: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.job-row:hover                { box-shadow: var(--sh-md); border-color: var(--line-strong); }
.job-row__logo {
  width: 74px; height: 74px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--accent, var(--blue-600));
  color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -.02em;
  font-family: var(--font-head);
}
.job-row__logo img            { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 8px; }
.job-row__logo.is-emblem      { font-size: 26px; }
.job-row__body                { flex: 1; min-width: 0; }
.job-row__title               { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.job-row__title h3            { font-size: 19px; }
.job-row__company             { font-size: 13.5px; color: var(--ink-500); margin-top: 3px; }
.job-row__meta                { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.job-row__meta span           { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-600); }
.job-row__meta svg            { width: 16px; height: 16px; color: var(--ink-400); }
.job-row__tags                { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.job-row__side                { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; flex: none; }
.job-row__side .btn           { min-width: 196px; }
.job-row__side-top            { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 38px; }
.job-row__side-top .badge     { animation: badge-in var(--t-base) both; }
@keyframes badge-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.bookmark-btn                 { color: var(--ink-400); }
.bookmark-btn.is-saved        { color: var(--blue-600); }
.bookmark-btn.is-saved svg    { fill: currentColor; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 0 6px; }
.pagination button {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: #fff; font-size: 13.5px; color: var(--ink-700);
}
.pagination button:hover:not(:disabled) { border-color: var(--blue-600); color: var(--blue-600); }
.pagination button.is-active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; font-weight: 600; }
.pagination button:disabled  { opacity: 0.45; cursor: not-allowed; }

/* ==========================================================================
   Placement Guidance – "How we get you placed"
   The page heading, then the three guided routes as illustrated cards: a tinted
   tile, the route's name and one line about it, with the artwork in the card's
   own accent colour filling the space that is left.
   ========================================================================== */
.guidance-lead { padding-top: 40px; }
.guidance-head { max-width: 760px; }
.guidance-head h1,
.guidance-head h2 { font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; }
.guidance-head p {
  color: var(--ink-500); font-size: 15px; line-height: 1.55; margin-top: 8px;
}

.mode-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin-top: 26px;
}
.mode-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 252px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  background:
    radial-gradient(115% 95% at 100% 0%, var(--accent-soft) 0%, transparent 62%),
    linear-gradient(155deg, #fff 12%, var(--accent-soft) 130%);
  transition: transform var(--t-base), box-shadow var(--t-base),
              border-color var(--t-fast);
}
.mode-card:hover {
  transform: translateY(-3px); border-color: var(--blue-200);
  box-shadow: var(--sh-lg);
}
.mode-card:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; }

.mode-card__icon {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: var(--r-lg);
  background: var(--accent); color: #fff; box-shadow: var(--sh-sm);
}
.mode-card__icon svg { width: 25px; height: 25px; }

/* The drawing sits behind the words: pale where the text runs, solid where it
   does not, so a long description is never printed over a solid shape. */
/* Kept inside the card rather than bleeding off its edge: the shape is soft
   enough that the extra pixels buy nothing, and nothing then pokes out of the
   page at any width. */
.mode-card__art {
  position: absolute; z-index: -1; pointer-events: none;
  top: 6%; right: 0; width: 54%; max-width: 280px;
  color: var(--accent);
}
.mode-card__art svg { display: block; width: 100%; height: auto; }

.mode-card__copy {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: auto; padding-top: 26px; max-width: 64%;
}
.mode-card h3 { font-size: 20px; line-height: 1.25; color: var(--ink-900); }
.mode-card__text { font-size: 14px; line-height: 1.5; color: var(--ink-600); }

/* Placement videos ------------------------------------------------------- */
.guidance-videos { padding-top: 44px; }
.guidance-videos__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.video-carousel__nav { display: flex; gap: 8px; padding-bottom: 4px; }
.video-carousel__nav .icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line-strong);
  color: var(--blue-600);
  transition: background var(--t-fast), border-color var(--t-fast),
    opacity var(--t-fast);
}
.video-carousel__nav .icon-btn:hover:not(:disabled) {
  background: var(--blue-050); border-color: var(--blue-200);
}
.video-carousel__nav .icon-btn:disabled { opacity: .38; cursor: default; }

/* The carousel is driven with a transform, so the viewport clips the overflow
   and no scrollbar is ever drawn. */
.video-carousel { margin-top: 24px; }
.video-carousel__viewport {
  overflow: hidden; padding: 6px 0 10px;
  margin: -6px 0 -10px;
  /* Dragging the rail is the desktop gesture, so the pointer says so. */
  cursor: grab;
}
.video-carousel__viewport.is-dragging {
  cursor: grabbing; user-select: none;
}
.video-carousel__viewport.is-dragging .video-card { pointer-events: none; }
.video-carousel__viewport:focus-visible {
  outline: 3px solid var(--blue-200); outline-offset: 4px; border-radius: var(--r-md);
}
.video-rail {
  display: flex; gap: 20px;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.video-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-top: 12px;
}
.video-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--line-strong); cursor: pointer;
  transition: width var(--t-fast), background var(--t-fast);
}
.video-dot:hover { background: var(--blue-300); }
.video-dot[aria-current="true"] { width: 24px; background: var(--blue-600); }
.video-dot:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }

.video-card {
  flex: 0 0 calc((100% - 40px) / 3); min-width: 0;
  display: flex; flex-direction: column; text-align: left;
  padding: 0; overflow: hidden; cursor: pointer; font: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform var(--t-base), box-shadow var(--t-base),
    border-color var(--t-base);
}
.video-card:hover {
  transform: translateY(-3px); border-color: var(--blue-200);
  box-shadow: var(--sh-md);
}
.video-card:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; }

.video-card__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--navy-800);
}
.video-card__thumb--empty {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
}
.video-card__thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.video-card__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: var(--shade-video_thumb, linear-gradient(180deg, rgba(6,18,41,0) 40%, rgba(6,18,41,.6) 100%));
}
.video-card__play {
  position: absolute; inset: 0; z-index: 1; margin: auto;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--blue-600);
  box-shadow: 0 8px 20px rgba(6,18,41,.32);
  transition: transform var(--t-fast), background var(--t-fast);
}
.video-card:hover .video-card__play { transform: scale(1.06); background: #fff; }
.video-card__play svg { width: 20px; height: 20px; margin-left: 2px; }
.video-card__time {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(6,18,41,.72); color: #fff;
  font-size: 11.5px; font-weight: 600;
}
.video-card__body {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px 16px;
}
.video-card__body strong {
  font-size: 15px; line-height: 1.35; color: var(--ink-900);
}
.video-card__meta { font-size: 12.5px; color: var(--ink-500); }

/* The video popup is edge-to-edge: the shared modal's padding would letterbox
   the player, so the body is emptied and the player keeps a 16:9 frame. */
.modal--video { max-width: 960px; background: #0b1220; }
.modal--video .modal__head {
  background: #0b1220; border-bottom-color: rgba(255,255,255,.12);
}
.modal--video .modal__head h3 { color: #fff; }
.modal--video .modal__head p  { color: #b8c6da; }
.modal--video .modal__head .icon-btn { color: #dce6f5; }
.modal--video .modal__head .icon-btn:hover {
  background: rgba(255,255,255,.12); color: #fff;
}
.modal--video .modal__body { padding: 0; }
.video-player {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border: 0;
}
.video-player--embed iframe {
  display: block; width: 100%; height: 100%; border: 0;
}

/* Support cards */
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.support-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 130px; align-items: center; gap: 12px;
  padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: #fff; overflow: hidden; position: relative;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.support-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.support-card h3    { font-size: 16.5px; }
.support-card p     { font-size: 13px; color: var(--ink-500); margin: 6px 0 12px; }
.support-card .link-more { font-size: 13.5px; }
.support-card__media {
  border-radius: var(--r-md); overflow: hidden; align-self: stretch;
  display: grid; place-items: center; background: var(--accent-soft, var(--blue-050));
}
.support-card__media img { width: 100%; height: 100%; object-fit: cover; }
.support-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}

/* ==========================================================================
   Industry Updates  (ref img2)
   ========================================================================== */
.tabs-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 22px 0 26px; }

.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 32px; padding-bottom: 32px;
}
.feature-article { display: flex; flex-direction: column; }
.feature-article__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--surface-alt);
}
.feature-article__media img  { width: 100%; height: 100%; object-fit: cover; }
.feature-article__badge      { position: absolute; left: 14px; top: 14px; }
.feature-article h2          { font-size: 27px; margin-top: 18px; }
.feature-article .excerpt    { font-size: 14.5px; color: var(--ink-600); margin-top: 10px; }
.article-byline              { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.article-byline .avatar      { width: 34px; height: 34px; font-size: 12px; }
.article-byline strong       { font-size: 13.5px; color: var(--ink-800); display: block; }
.article-byline span         { font-size: 12.5px; color: var(--ink-500); }
.feature-article .read-link  { margin-left: auto; align-self: flex-end; }

.news-list                   { display: flex; flex-direction: column; gap: 4px; }
.news-item {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.news-item:last-child        { border-bottom: 0; }
.news-item__media            { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-alt); }
.news-item__media img        { width: 100%; height: 100%; object-fit: cover; }
.news-item h3                { font-size: 16px; margin-top: 8px; }
.news-item:hover h3          { color: var(--blue-600); }
.news-item .excerpt          { font-size: 13px; color: var(--ink-500); margin-top: 6px; }
.news-item .meta             { font-size: 12.5px; color: var(--ink-400); margin-top: 8px; }

.article-body                { max-width: 760px; margin-inline: auto; padding: 32px 0 52px; }
.article-body h1             { font-size: 36px; }
.article-body .content       { font-size: 15.5px; line-height: 1.76; color: var(--ink-600); margin-top: 22px; }
.article-body .content p     { margin-bottom: 16px; }
.article-body__cover         { border-radius: var(--r-lg); overflow: hidden; margin-top: 24px; }

/* ==========================================================================
   Dashboard / User Panel  (ref img3)
   ========================================================================== */
.panel {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: calc(100vh - var(--header-h));
  background: var(--surface-alt);
}

/* Sidebar-less panel: every panel page (including the profile page) renders in
   one full-width column, so no viewport ever reserves a sidebar track.  Two
   classes keep this winning over the single-class column rules in
   responsive.css. */
.panel.panel--wide { grid-template-columns: minmax(0, 1fr); }

/* Dark sidebar */
.side-nav {
  background: linear-gradient(178deg, var(--navy-900) 0%, #0d3159 100%);
  padding: 20px 14px 24px; display: flex; flex-direction: column; gap: 8px;
}
.side-user {
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 16px; color: #fff;
}
.side-user .avatar       { width: 48px; height: 48px; font-size: 16px; background: rgba(255,255,255,.14); color: #fff; border: 2px solid rgba(255,255,255,.28); }
.side-user strong        { display: block; font-size: 15px; font-family: var(--font-head); }
.side-user a             { font-size: 12.5px; color: var(--teal-500); display: inline-flex; align-items: center; gap: 5px; }
.side-user a svg         { width: 13px; height: 13px; }

.side-menu               { display: flex; flex-direction: column; gap: 3px; }
.side-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-md);
  font-size: 14px; color: #c3d3e5; transition: background var(--t-fast), color var(--t-fast);
}
.side-menu a svg         { width: 18px; height: 18px; opacity: .85; }
.side-menu a:hover       { background: rgba(255,255,255,.08); color: #fff; }
.side-menu a.is-active   { background: rgba(45,122,235,.28); color: #fff; font-weight: 600; }

.side-promo {
  margin-top: auto; position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 18px; color: #fff;
  background: linear-gradient(150deg, rgba(28,78,140,.95), rgba(16,52,96,.95));
  border: 1px solid rgba(255,255,255,.12);
}
.side-promo__art         { display: grid; place-items: center; margin-bottom: 10px; color: var(--teal-500); }
.side-promo h3           { color: #fff; font-size: 18px; line-height: 1.2; }
.side-promo p            { font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 8px; }
.side-promo .btn         { margin-top: 14px; font-size: 12.5px; padding: 9px 14px; }

/* Panel main content.
   The panel content sits in the site's own container so its left and right
   edges line up with the header and the footer at every width.  Full-bleed, a
   1920px screen started the panel at 26px while the header started at 285px;
   on the container both start at the same gutter.  The panel's tinted
   background still covers the whole row - it is painted by .panel above. */
.panel-main {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 22px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 18px;
}

/* Profile hero row */
.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 18px;
}
.profile-card {
  display: flex; gap: 22px; padding: 24px; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(120deg, #eef4ff 0%, #f2f8ff 55%, #f7fbff 100%);
}
.profile-card__body      { min-width: 0; }
.profile-card__name      { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-card__name h1   { font-size: 34px; }
.profile-card .headline  { font-size: 15px; color: var(--ink-700); margin-top: 8px; }
.profile-card .locality  { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-600); margin-top: 8px; }
.profile-card .locality svg { width: 16px; height: 16px; color: var(--ink-400); }
.profile-card .bio       { font-size: 13.5px; color: var(--ink-500); margin-top: 12px; max-width: 620px; }

/* The course track the student is enrolled in, on the dashboard profile card. */
.course-track            { margin-top: 6px; }
.course-track .badge     { display: inline-flex; align-items: center; gap: 6px;
                           padding: 3px 12px; border-radius: var(--r-pill);
                           background: var(--blue-600); color: #fff;
                           font-size: 12px; font-weight: 600; }
.course-track .badge svg { width: 14px; height: 14px; flex: none; }

/* The domain line above the resume card's progress bar. */
.domain-line             { margin-bottom: 8px; color: var(--blue-600); font-weight: 600; }
.domain-line .inline-icon svg { color: var(--blue-600); }

.growth-banner {
  display: flex; align-items: center; gap: 12px; padding: 24px;
  border-radius: var(--r-lg); border: 1px solid var(--teal-100);
  background: linear-gradient(120deg, var(--teal-050) 0%, #f2fbf9 100%);
}
.growth-banner h2        { font-size: 25px; line-height: 1.18; color: var(--navy-900); }
.growth-banner p         { font-size: 13.5px; color: var(--ink-600); margin-top: 8px; }
.growth-banner__art      { margin-left: auto; flex: none; }

/* Dashboard 2-column grid */
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dash-col  { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }

.dash-card__head { display: flex; align-items: flex-start; gap: 12px; }
.dash-card__head .tile    { width: 38px; height: 38px; border-radius: var(--r-md); }
.dash-card__head .tile svg{ width: 20px; height: 20px; }
.dash-card__head h3       { font-size: 19px; }
.dash-card__head .sub     { font-size: 13px; color: var(--ink-500); margin-top: 2px; }
.dash-card__head .actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

/* Card body wrapper - keeps the dashboard cards free of inline padding and
   lets long job titles shrink instead of pushing the card wider. */
.dash-card__body { min-width: 0; }
/* Long course titles ("Build Resume for …") must wrap inside the card rather
   than widen it past the phone viewport. */
.dash-card .btn {
  max-width: 100%; white-space: normal; text-align: center;
}

/* Compact stat row inside a dashboard card (sessions / score / streak).
   Wraps instead of squeezing three figures onto one line on a phone. */
.stat-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 8px; font-size: 13px; color: var(--ink-500);
}
.stat-row > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.stat-row svg    { width: 15px; height: 15px; color: var(--ink-400); flex: none; }

/* An icon that sits inside a sentence.  Without a size an inline <svg> falls
   back to its intrinsic 300x150 box and swallows the whole card. */
.inline-icon { display: inline-flex; align-items: center; vertical-align: -3px; }
.inline-icon svg { width: 15px; height: 15px; flex: none; }

/* Form footer: an optional status line on the left, the action on the right.
   Shared by the profile and job-alert forms, which used to align the button
   with an inline style that could not reflow. */
.form-actions {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 12px; margin-top: 16px;
}

/* Skill chips */
.skill-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.skill-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--surface-soft); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink-800);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.skill-chip:hover { border-color: var(--line-strong); background: #fff; }
.skill-chip__icon {
  width: 24px; height: 24px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line-soft);
  color: var(--accent, var(--blue-600));
}
.skill-chip__icon svg { width: 15px; height: 15px; }
.skill-chip__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-xs); }
.skill-chip button {
  border: 0; background: none; padding: 2px; display: grid; place-items: center;
  color: var(--ink-400); border-radius: 4px; transition: color var(--t-fast), background var(--t-fast);
}
.skill-chip button:hover  { color: #d92d3c; background: #fdeef0; }
.skill-chip button svg    { width: 14px; height: 14px; }

/* Progress bar */
.progress-bar     { height: 9px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; margin-top: 12px; }
.progress-bar span{ display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--teal-600), var(--teal-500)); transition: width 700ms cubic-bezier(.22,.61,.36,1); }

/* Mini job rows (dashboard saved jobs) */
.mini-jobs { display: flex; flex-direction: column; gap: 4px; }
.mini-job {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mini-job:last-child { border-bottom: 0; }
.mini-job__logo {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--accent, var(--blue-600)); border: 1px solid var(--line-soft);
  font-weight: 800; font-size: 13px; color: #fff; font-family: var(--font-head);
}
.mini-job__logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #fff; }
.mini-job h4        { font-size: 15px; }
.mini-job .line     { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-500); margin-top: 3px; flex-wrap: wrap; }
.mini-job .line .dot{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
.mini-job .tags     { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mini-job .bookmark-btn { margin-left: auto; }

/* Alert box (WhatsApp alerts) */
.alert-box {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border-radius: var(--r-md); background: var(--green-050);
  border: 1px solid var(--green-200);
}
.alert-box__icon {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #fff; color: var(--teal-600);
}
.alert-box__icon svg { width: 22px; height: 22px; }
.alert-box p         { font-size: 13.5px; color: var(--ink-700); }
.alert-box .btn      { margin-left: auto; flex: none; }

/* Goal box */
.goal-box {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(120deg, #eef4ff, #f7fbff);
  border: 1px solid var(--line);
}
.goal-box__art       { flex: none; }
.goal-box strong     { display: block; font-size: 15px; color: var(--ink-900); margin-top: 3px; }
.goal-box .label     { font-size: 12px; color: var(--ink-500); }
.goal-box .go        { margin-left: auto; color: var(--ink-400); flex: none; }
.goal-box:hover .go  { color: var(--blue-600); }

/* ==========================================================================
   My Profile page
   ========================================================================== */
.form-grid         { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }

/* The photo is the details form's last row (span-2 inside .form-grid), with
   the form's save button bottom-right beside it. */
.profile-photo-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: end; margin-top: 2px;
}
.profile-photo { min-width: 0; }
.profile-photo__body {
  display: flex; align-items: flex-start; gap: 14px;
  flex-wrap: wrap; margin-top: 8px;
}
.profile-photo .image-preview {
  width: 116px; max-width: 116px; aspect-ratio: 1 / 1; flex: none;
}
.profile-photo__pick { flex: 1 1 170px; min-width: 0; }
.profile-photo__pick .input { width: 100%; }
.profile-save {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; flex-wrap: wrap;
}

/* ==========================================================================
   Login / Auth page  (left aside + right form card)
   ========================================================================== */
.auth-page {
  min-height: 100vh; display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--surface);
}
.auth-aside {
  position: relative; overflow: hidden; padding: 54px 58px; color: #fff;
  background: linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 55%, #12406f 100%);
  display: flex; flex-direction: column;
}
.auth-aside::after {
  content: ""; position: absolute; right: -160px; bottom: -180px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,217,195,.22), transparent 68%);
}
.auth-aside .brand__text      { color: #fff; }
.auth-aside .brand__text em   { color: #6aa0ff; }
.auth-aside__tag              { font-size: 13.5px; color: #9fb3c9; margin-top: 8px; }
.auth-aside__body             { margin-top: auto; position: relative; z-index: 1; }
.auth-aside__body h1          { font-size: 44px; color: #fff; line-height: 1.1; }
.auth-aside__body h1 span     { display: block; color: var(--teal-500); }
.auth-aside__body p           { color: rgba(255,255,255,.82); font-size: 15px; margin-top: 16px; max-width: 420px; }
.auth-aside__points           { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.auth-aside__points li        { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.9); }
.auth-aside__points svg       { width: 18px; height: 18px; color: var(--teal-500); flex: none; }

.auth-panel  { display: grid; place-items: center; padding: 40px 24px; background: var(--surface-alt); }
.auth-card   { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--sh-sm); }
.auth-card h1 { font-size: 26px; }
.auth-card .sub { font-size: 14px; color: var(--ink-500); margin-top: 6px; }
.auth-form   { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.pw-wrap     { position: relative; }
.pw-wrap .input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; z-index: 2;
  width: 36px; height: 36px; padding: 0;
  border: 0; background: none; color: var(--ink-500); border-radius: var(--r-sm);
  cursor: pointer; line-height: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.pw-toggle:hover { color: var(--blue-700); background: var(--surface-alt); }
.pw-toggle:focus-visible {
  outline: 2px solid var(--blue-600); outline-offset: 2px;
  color: var(--blue-700);
}
/* Showing the password is a state, so the button stays lit while it is on. */
.pw-toggle.is-on { color: var(--blue-600); background: var(--blue-050); }
.pw-toggle.is-on:hover { background: var(--blue-100); }
.pw-toggle svg   { width: 18px; height: 18px; }
.auth-aside__muted { font-size: 12.5px; color: #8ba2ba; margin-top: auto; position: relative; z-index: 1; }

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 0 48px; }
.admin-grid  {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.admin-nav {
  padding: 12px; position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px); overflow: auto;
}
.admin-nav__group { padding: 12px 10px 5px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }
.admin-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--ink-600); transition: all var(--t-fast);
}
.admin-nav a:hover    { background: var(--surface-alt); color: var(--ink-900); }
.admin-nav a.is-active{ background: var(--blue-100); color: var(--blue-700); font-weight: 600; }
.admin-nav a svg      { width: 16px; height: 16px; }

.admin-head  { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-head h1 { font-size: 26px; }
.admin-head p  { font-size: 13.5px; color: var(--ink-500); margin-top: 4px; }

.table-wrap  { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
table.data   { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.data th {
  text-align: left; padding: 12px 16px; background: var(--surface-soft);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-500); border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td       { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); vertical-align: middle; }
table.data tr:last-child td  { border-bottom: 0; }
table.data tbody tr:hover    { background: var(--surface-soft); }
table.data .cell-actions     { display: flex; gap: 6px; justify-content: flex-end; }
table.data .thumb {
  width: 38px; height: 38px; border-radius: var(--r-sm); object-fit: cover;
  border: 1px solid var(--line); background: var(--surface-alt);
}
.status-dot         { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); }
.status-dot.is-on::before   { background: var(--green-500); }
.status-dot.is-off::before  { background: var(--ink-300); }
.status-dot.is-warn::before { background: var(--amber-500); }

.admin-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-toolbar .input, .admin-toolbar .select { width: auto; min-width: 180px; }
.admin-toolbar .search-wrap { position: relative; flex: 1; max-width: 320px; }
.admin-toolbar .search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-400); }
.admin-toolbar .search-wrap .input { padding-left: 36px; width: 100%; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { padding: 18px; display: flex; align-items: center; gap: 14px; }
.stat-card .tile   { width: 42px; height: 42px; }
.stat-card strong  { display: block; font-size: 22px; font-family: var(--font-head); color: var(--ink-900); line-height: 1.1; }
.stat-card span    { font-size: 12.5px; color: var(--ink-500); }

.image-preview {
  width: 100%; max-width: 240px; aspect-ratio: 16 / 10; border-radius: var(--r-md);
  border: 1px dashed var(--line-strong); background: var(--surface-alt);
  display: grid; place-items: center; overflow: hidden; color: var(--ink-400);
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-preview svg { width: 26px; height: 26px; }

/* ==========================================================================
   Motion — entrance choreography
   ========================================================================== */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.featured-job, .job-row, .mode-card, .support-card, .strip-card,
.news-item, .news-list, .feature-article, .stat-card, .skill-chip,
.promo-campus, .mini-jobs > * {
  animation: rise-in 520ms cubic-bezier(.22,.61,.36,1) both;
}

.filters, .dash-card, .profile-card, .growth-banner {
  animation: hero-rise 460ms cubic-bezier(.22,.61,.36,1) both;
}

.jobs-strip > *:nth-child(1), .guidance-strip > *:nth-child(1),
.support-grid > *:nth-child(1),
.mode-cards > *:nth-child(1), .news-list > *:nth-child(1)  { animation-delay: 40ms; }
.jobs-strip > *:nth-child(2), .guidance-strip > *:nth-child(2),
.support-grid > *:nth-child(2),
.mode-cards > *:nth-child(2), .news-list > *:nth-child(2)  { animation-delay: 110ms; }
.jobs-strip > *:nth-child(3), .guidance-strip > *:nth-child(3),
.support-grid > *:nth-child(3), .mode-cards > *:nth-child(3),
.news-list > *:nth-child(3)                                { animation-delay: 180ms; }
.jobs-strip > *:nth-child(4), .guidance-strip > *:nth-child(4),
.news-list > *:nth-child(4)                                { animation-delay: 250ms; }
.jobs-strip > *:nth-child(5), .guidance-strip > *:nth-child(5) { animation-delay: 320ms; }

#jobs-results > *:nth-child(2) { animation-delay:  60ms; }
#jobs-results > *:nth-child(3) { animation-delay: 100ms; }
#jobs-results > *:nth-child(4) { animation-delay: 140ms; }
#jobs-results > *:nth-child(5) { animation-delay: 180ms; }
#jobs-results > *:nth-child(6) { animation-delay: 220ms; }
#jobs-results > *:nth-child(n+7){ animation-delay: 260ms; }

@keyframes hero-rise {
  from { transform: translateY(16px); }
  to   { transform: none; }
}
.hero__copy > * { animation: hero-rise 640ms cubic-bezier(.22,.61,.36,1) both; }
.hero__copy > *:nth-child(2) { animation-delay:  70ms; }
.hero__copy > *:nth-child(3) { animation-delay: 130ms; }
.hero__copy > *:nth-child(4) { animation-delay: 190ms; }
.hero__copy > *:nth-child(5) { animation-delay: 250ms; }
.hero__copy > *:nth-child(6) { animation-delay: 310ms; }
.hero__aside-inner { animation: hero-rise 700ms cubic-bezier(.22,.61,.36,1) 220ms both; }

.progress-bar span {
  transform-origin: left center;
  animation: bar-grow 900ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ==========================================================================
   Misc utilities
   ========================================================================== */
.brand-slogan  { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-500); }
.load-more-wrap{ display: flex; justify-content: center; padding-top: 8px; }
.page-hero-pad { padding-top: 22px; }
.company-monogram { background: var(--accent, var(--blue-600)); }