/* --- Roboto, self-hosted. Variable font: one file covers 100-900. --- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Salvaged from ui/index.html's bundled template.
 * Fonts were inlined as base64 in the bundle manifest and are now real
 * files in ../fonts/, named by their original asset UUID. */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/1cd8b175-a407-4d10-a47b-45598b8f9a17.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/9e1209e4-089b-429f-a61d-ba6c1802c8a6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/9e39cb81-3959-496d-87b1-a332fd1e185c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fd52b00a-5cbf-4283-9e5a-339618953ccf.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/2c8aa516-ee86-49e9-85e6-93a2abb8262a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/48438bbc-a7e3-4d1a-8342-77be2d397bcc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { font-family: 'Roboto', system-ui, sans-serif; color: #0E1B33; -webkit-font-smoothing: antialiased; }
  /* Design tokens. Every template styles itself from these, so retheming the
     whole app is a matter of changing the values here -- Find Jobs, Job Detail
     and the six portal screens all follow without touching their markup. */
  .fs-app {
    --bg:#FFFFFF; --surface:#FFFFFF; --soft:#F8F9FA;
    --ink:#202124; --sub:#5F6368; --line:#DADCE0;
    --nav-bg:#FFFFFF;
    --accent:#1A73E8; --accent-d:#1558B0;
    --accent-soft:#E8F0FE; --accent-soft-line:#D2E3FC; --accent-strong:#1558B0;
    --font-display:'Roboto'; --font-body:'Roboto';
    /* Elevation, Material-style: a tight key shadow over a soft ambient one. */
    --shadow-1: 0 1px 2px rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
    --shadow-2: 0 1px 3px rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
  }
  ::selection { background: #1A73E8; color: #fff; }
  input, button, textarea, select { font-family: inherit; }
  @keyframes fsFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fsBar { from { width: 6%; } to { width: 100%; } }
  @keyframes fsPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
  @keyframes fsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  @keyframes fsSpin { to { transform: rotate(360deg); } }
  .fs-rise { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  .fs-prereveal .fs-rise { opacity: 0; transform: translateY(18px); }
  .fs-card-hover { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .2s; }
  .fs-card-hover:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -20px rgba(13,30,70,.28); border-color: #C9D6F0 !important; }
  /* Job listing cards: 2 up on desktop, dropped to 1 per row below 600px in
     the mobile breakpoint -- an inline style can't be overridden there. */
  .fs-jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .fs-btn { transition: transform .18s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
  .fs-btn:hover { transform: translateY(-2px); }
  .fs-btn:active { transform: translateY(0); }
  .fs-link { transition: color .18s; }
  @keyframes fsBounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
  .fs-bounce { animation: fsBounce 1.9s ease-in-out infinite; }
  .fs-bounce:hover { animation-play-state: paused; }
  .fs-row:hover { background: #F6F9FF !important; }
  header button, header h1 { white-space: nowrap; }
  .fs-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
  .fs-scroll::-webkit-scrollbar-thumb { background: #D4DEF0; border-radius: 8px; }

/* --- Plain file input, matching the pre-redesign homepage's native
   <input type="file"> + separate submit button (no drag-and-drop chrome).
   Sizing (font sizes, padding, pill button) follows that archived page's
   own CSS rather than the bundle's smaller upload-card scale. --- */
#fsu-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; width: 100%; }
/* htmx's own .htmx-indicator rule only fades opacity, never sets display,
   so #fsu-progress kept reserving its full height in this flex column even
   at rest -- the empty box below the button. Hide it outright until htmx
   adds .htmx-request to it (the element hx-indicator points at). */
#fsu-progress.htmx-indicator { display: none; }
#fsu-progress.htmx-indicator.htmx-request { display: block; }
.fsu-file-wrap { position: relative; display: block; width: 80%; margin: 0 auto; }
.fsu-file-input {
  display: block; width: 100%;
  font-size: 1.5rem; color: transparent;
  cursor: pointer;
  padding: 1.25rem; border: 2px solid var(--fsu-line, var(--line)); border-radius: 14px;
  background-color: var(--soft);
  transition: background-color .2s ease, border-color .2s ease;
}
.fsu-file-input::file-selector-button { color: var(--fsu-sub, var(--sub)); }
.fsu-file-input:hover { background-color: var(--accent-soft); border-color: var(--accent); }
.fsu-file-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Mirrors the native button's text so the visible span below starts exactly
   where the real button ends, then centers in whatever space is left. */
.fsu-file-display {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  pointer-events: none;
  font-size: 1.5rem; color: var(--fsu-sub, var(--sub));
}
.fsu-file-btnspace { visibility: hidden; white-space: pre; padding: 0 1.25rem; }
.fsu-file-name {
  flex: 1; text-align: center; padding: 0 1.25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fsu-submit {
  background-color: var(--accent); color: #fff;
  border: none; cursor: pointer;
  padding: 1.25rem 3.75rem; font-size: 1.6rem; font-weight: 500;
  border-radius: 36px;
  transition: background-color .3s ease, transform .1s ease;
}
.fsu-submit:hover { background-color: var(--accent-d); transform: translateY(-1px); }
.fsu-submit:active { transform: translateY(0); }

/* --- Upload card, salvaged from ui/UploadCard.dc.html's FSU_CSS --- */
.fsu{font-family:var(--font-body),system-ui,sans-serif;width:100%}.fsu-drop{border:1.5px dashed var(--fsu-line);background:var(--fsu-bg);border-radius:24px;padding:34px 26px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s,transform .18s;outline:none}.fsu-drop:hover{border-color:var(--fsu-accent);background:var(--fsu-bg-hi)}.fsu-drop:focus-visible{box-shadow:0 0 0 3px var(--fsu-ring);border-color:var(--fsu-accent)}.fsu-drop.is-drag{border-color:var(--fsu-accent);background:var(--fsu-bg-hi);border-style:solid;transform:scale(1.01)}.fsu-mark{width:52px;height:52px;border-radius:14px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--fsu-mark-bg);color:var(--fsu-accent)}.fsu-title{font-family:var(--font-display),system-ui,sans-serif;font-size:19px;font-weight:800;color:var(--fsu-ink);letter-spacing:-.01em}.fsu-sub{font-size:14.5px;color:var(--fsu-sub);margin-top:5px}.fsu-meta{font-size:12.5px;color:var(--fsu-sub);opacity:.8;margin-top:12px;letter-spacing:.02em}.fsu-trust{font-size:12.5px;color:var(--fsu-sub);margin-top:16px;padding-top:14px;border-top:1px solid var(--fsu-line-soft)}.fsu-error{margin-top:14px;background:var(--fsu-err-bg);color:var(--fsu-err);border:1px solid var(--fsu-err-line);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600}.fsu-panel{border:1.5px solid var(--fsu-line);background:var(--fsu-bg);border-radius:24px;padding:26px 24px;text-align:left}.fsu-filerow{display:flex;align-items:center;gap:10px}.fsu-fileicon{color:var(--fsu-accent);flex:none;display:flex}.fsu-filename{font-size:14.5px;font-weight:700;color:var(--fsu-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fsu-bar{height:6px;border-radius:99px;background:var(--fsu-line-soft);overflow:hidden;margin:16px 0 10px}.fsu-bar-fill{height:100%;width:40%;border-radius:99px;background:var(--fsu-accent);animation:fsu-slide 1.15s ease-in-out infinite}@keyframes fsu-slide{0%{margin-left:-40%}100%{margin-left:100%} }.fsu-step{font-size:13.5px;color:var(--fsu-sub)}.fsu-donerow{display:flex;align-items:flex-start;gap:12px}.fsu-check{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--fsu-ok-bg);color:var(--fsu-ok)}.fsu-warn{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--fsu-err-bg);color:var(--fsu-err)}.fsu-title-sm{font-family:var(--font-display),system-ui,sans-serif;font-size:16.5px;font-weight:800;color:var(--fsu-ink)}.fsu-sub-sm{font-size:13.5px;color:var(--fsu-sub);margin-top:3px;line-height:1.5}.fsu-fields{margin:16px 0 4px;border:1px solid var(--fsu-line-soft);border-radius:12px;overflow:hidden}.fsu-field{display:flex;gap:12px;padding:9px 13px;font-size:13.5px;border-bottom:1px solid var(--fsu-line-soft)}.fsu-field:last-child{border-bottom:none}.fsu-field-k{color:var(--fsu-sub);min-width:74px;flex:none}.fsu-field-v{color:var(--fsu-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fsu-cta{width:100%;margin-top:16px;background:var(--accent);color:#fff;border:none;border-radius:24px;padding:14px 20px;font-family:var(--font-body),system-ui,sans-serif;font-size:15.5px;font-weight:700;cursor:pointer;transition:background .16s}.fsu-cta:hover{background:var(--accent-d)}.fsu-ghost{width:100%;margin-top:9px;background:none;border:none;color:var(--fsu-sub);font-family:var(--font-body),system-ui,sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;padding:7px;border-radius:9px}.fsu-ghost:hover{color:var(--fsu-ink)}.fsu-light{--fsu-ink:var(--ink);--fsu-sub:var(--sub);--fsu-accent:var(--accent);--fsu-line:var(--accent-soft-line);--fsu-line-soft:var(--line);--fsu-bg:#fff;--fsu-bg-hi:var(--accent-soft);--fsu-mark-bg:var(--accent-soft);--fsu-ring:rgba(26,115,232,.28);--fsu-ok:#0F7B4F;--fsu-ok-bg:#E3F5EC;--fsu-err:#B4232B;--fsu-err-bg:#FDECEC;--fsu-err-line:#F6CFCF}.fsu-warm{--fsu-ink:var(--ink);--fsu-sub:var(--sub);--fsu-accent:var(--accent);--fsu-line:#EAD9C6;--fsu-line-soft:#F0E4D6;--fsu-bg:rgba(255,255,255,.86);--fsu-bg-hi:#FFF6EC;--fsu-mark-bg:#FFF0DE;--fsu-ring:rgba(26,115,232,.24);--fsu-ok:#0F7B4F;--fsu-ok-bg:#E3F5EC;--fsu-err:#B4232B;--fsu-err-bg:#FDECEC;--fsu-err-line:#F6CFCF}.fsu-dark{--fsu-ink:#F4F7FF;--fsu-sub:rgba(233,240,255,.72);--fsu-accent:#8FAcFF;--fsu-line:rgba(255,255,255,.26);--fsu-line-soft:rgba(255,255,255,.16);--fsu-bg:rgba(255,255,255,.06);--fsu-bg-hi:rgba(255,255,255,.12);--fsu-mark-bg:rgba(255,255,255,.12);--fsu-ring:rgba(143,172,255,.45);--fsu-ok:#7EE7B4;--fsu-ok-bg:rgba(126,231,180,.16);--fsu-err:#FFB4B4;--fsu-err-bg:rgba(255,180,180,.14);--fsu-err-line:rgba(255,180,180,.32)}@media (prefers-reduced-motion: reduce){.fsu-bar-fill{animation:none;width:100%}.fsu-drop{transition:none} }

/* ===================================================================
   Theme: Google-style chrome. Classes rather than the inline styles the
   salvaged bundle markup uses, because these are shared across every page
   and inline styles cannot be overridden from a stylesheet.
   =================================================================== */

.fs-nav {
  /* 75px -> 60.6px -> 45.3px -> 47.5px, and held there since. The logo below
     is sized to fill the bar rather than the bar growing around it: vertical
     padding is 0 so the height is exactly logo + border. That is only safe
     because fs.jpg is a square with wide white margins of its own on a white
     nav, so the visible "FS" still clears the edges -- swap in a tighter-
     cropped or transparent logo and this needs padding back.
     Shared across every page via partials/_nav.html, so this applies
     everywhere at once, not just the homepage. */
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: flex-end; gap: 1.8rem;
  padding: 0 2rem;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  font-size: 1rem; font-weight: 500; color: var(--sub);
}
.fs-nav-brand { margin-right: auto; display: flex; align-items: center; }
.fs-nav-logo {
  height: 46.5px; width: auto; border-radius: 8px;
  transition: transform .2s ease;
}
.fs-nav-brand:hover .fs-nav-logo { transform: scale(1.05); }
.fs-nav-links { display: flex; align-items: center; gap: 1.6rem; }
.fs-nav-links a {
  color: var(--sub); text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.fs-nav-links a:hover { color: var(--accent); transform: translateY(-1px); }
.fs-nav-cta {
  background: var(--accent); color: #fff !important;
  /* Vertical padding scaled down alongside the nav's own height each time --
     otherwise this pill (not the logo) ends up the tallest thing in the bar
     and the nav doesn't actually get shorter. */
  padding: .19rem 1.25rem; border-radius: 24px;
}
.fs-nav-cta:hover { background: var(--accent-d); transform: translateY(-1px); }
/* The logout control is a form because LogoutView is POST-only in Django 5. */
.fs-nav-logout { margin: 0; display: flex; }
.fs-nav-logout button {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--sub);
  transition: color .2s ease;
}
.fs-nav-logout button:hover { color: var(--accent); }

.fs-footer {
  padding: 1.5rem 2rem; text-align: center;
  font-size: .9rem; color: var(--sub);
  border-top: 1px solid var(--line);
}
.fs-footer a { color: var(--sub); text-decoration: none; }
.fs-footer a:hover { color: var(--accent); text-decoration: underline; }
.fs-footer-sep { margin: 0 .6rem; color: var(--line); }

/* --- Home: the centred upload card --- */
.fs-home {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
}
.fs-home-card {
  width: 100%; max-width: 672px; text-align: center;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 36px;
  padding: 3.5rem;
  /* Archived page's own soft, diffuse boundary rather than the tighter
     Material elevation of --shadow-2, which reads as a harder bottom edge. */
  box-shadow: 0 6px 20px rgba(32,33,36,.28);
  transition: box-shadow .2s ease, max-width .25s ease;
}
.fs-home-card:hover { box-shadow: 0 8px 24px rgba(32,33,36,.3); }
.fs-home-card h1 {
  font-size: 2rem; font-weight: 600; color: var(--ink);
  margin: 0 0 .5rem;
}
/* No subtitle under the heading here, so the h1 carries the full gap down
   to the flash message / upload card that .fs-home-sub used to provide.
   Selector needs to out-specify ".fs-home-card h1" above (same .5rem
   margin-bottom otherwise wins on specificity regardless of source order). */
.fs-home-card h1.fs-home-title-only { margin-bottom: 2rem; }

/* --- Auth: login and signup, on the home page's centred-card shell ---
   These two screens were salvaged from the bundle as a dark split panel with
   inline styles, which is why the reskin passed them by. They now build from
   the same tokens, card and chrome as the home page. */
.fs-auth {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3rem 1.5rem;
}
.fs-auth-card {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 36px;
  padding: 3rem;
  box-shadow: var(--shadow-2);
}
/* Signup carries four fields, two of them side by side, so it needs the room. */
.fs-auth-card-wide { max-width: 580px; }
.fs-auth-card h1 {
  font-size: 2rem; font-weight: 600; color: var(--ink);
  margin: 0 0 .5rem; text-align: center;
}
.fs-auth-sub { font-size: 1rem; color: var(--sub); margin: 0 0 2rem; text-align: center; }

.fs-auth-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.fs-field { display: block; min-width: 0; grid-column: span 2; }
/* Only the short pair shares a row; everything else runs full width. */
.fs-field-half { grid-column: span 1; }
.fs-field-label {
  display: block; font-size: .875rem; font-weight: 500;
  color: var(--sub); margin-bottom: .4rem;
}
.fs-input {
  width: 100%;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 12px; padding: .85rem 1rem;
  font-size: 1rem; color: var(--ink); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fs-input:hover { border-color: var(--sub); }
.fs-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fs-field-help { display: block; font-size: .8rem; color: var(--sub); margin-top: .35rem; }

/* The bundle used .fsu-error here, whose colours are variables scoped to the
   upload card's theme classes -- outside one it rendered with no colour at all. */
.fs-auth-error {
  background: #FCE8E6; color: #C5221F; border: 1px solid #F5C6C3;
  border-radius: 10px; padding: .6rem .8rem;
  font-size: .875rem; font-weight: 500;
}
.fs-field .fs-auth-error { margin-top: .4rem; }
.fs-auth-error-top { margin-bottom: 1.25rem; }

.fs-auth-submit {
  width: 100%; margin-top: 1.5rem;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  border-radius: 24px; padding: .9rem 1.25rem;
  font-size: 1rem; font-weight: 500;
}
.fs-auth-submit:hover { background: var(--accent-d); }
.fs-auth-alt {
  display: block; width: 100%; box-sizing: border-box;
  text-align: center; text-decoration: none;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--line); border-radius: 24px;
  padding: .85rem 1.25rem; font-size: 1rem; font-weight: 500;
}
.fs-auth-alt:hover { background: var(--accent-soft); border-color: var(--accent-soft-line); }
/* The rules either side of "or" are the pseudo-elements, so the markup is one span. */
.fs-auth-or {
  display: flex; align-items: center; gap: .9rem;
  margin: 1.5rem 0; font-size: .875rem; color: var(--sub);
}
.fs-auth-or::before, .fs-auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.fs-auth-foot { text-align: center; font-size: .95rem; color: var(--sub); margin: 1.75rem 0 0; }
.fs-auth-foot a { color: var(--accent); font-weight: 500; text-decoration: none; }
.fs-auth-foot a:hover { text-decoration: underline; }

/* Signup's "we already have your resume" banner. */
.fs-auth-note {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1.25rem;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-line);
  border-radius: 12px; padding: .75rem .9rem;
  font-size: .875rem; font-weight: 500; color: var(--accent-strong);
}
.fs-auth-note svg { flex: none; }

/* Flash messages, styled as the mockup's breadcrumb pill. */
.fs-flash {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  background: var(--soft); border-radius: 30px;
  padding: .75rem 1.5rem; margin-bottom: 1.5rem;
  font-size: 1rem; font-weight: 500;
  box-shadow: inset 0 0 3px rgba(0,0,0,.08);
}
.fs-flash::before { content: "\203A"; color: var(--sub); font-weight: 600; }
.fs-flash .success { color: #0F9D58; }
.fs-flash .error   { color: #D93025; }

/* Body must be a column so .fs-home's flex:1 can centre between nav and footer. */
body.fs-app { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }

@media (max-width: 600px) {
  .fs-nav { gap: 1rem; font-size: .95rem; padding: 0 1.1rem; }
  .fs-nav-links { gap: .9rem; }
  .fs-home-card { padding: 2.25rem 1.5rem; border-radius: 24px; }
  .fs-home-card h1 { font-size: 1.6rem; }
  .fs-jobs-grid { grid-template-columns: 1fr; }
  /* .fsu-file-wrap, not .fsu-file-input, is the 80%-width element now that
     the button/filename display lives in a wrapper -- the input itself is
     already 100% of that wrap at every size. .fsu-file-display gets the same
     font-size so its invisible button-width spacer still lines up with the
     real (now smaller) native button. */
  .fsu-file-wrap, .fsu-submit { width: 100%; }
  .fsu-file-input, .fsu-file-display, .fsu-submit { font-size: 1.3rem; }
  .fsu-submit { padding: 1rem 1.5rem; }
  .fs-auth-card { padding: 2.25rem 1.5rem; border-radius: 24px; }
  .fs-auth-card h1 { font-size: 1.6rem; }
  .fs-auth-fields { grid-template-columns: 1fr; }
  .fs-field, .fs-field-half { grid-column: span 1; }
  .fs-footer { font-size: .8rem; }
}