/* Hub. Job Portal - Minimalist CSS */

/* ═══════════════════════════════════════════════════════
   Global design tokens — change a value here and every
   component using that token updates app-wide.
   ═══════════════════════════════════════════════════════ */
:root {
  /* Brand blue */
  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-light:  #3b82f6;
  --color-primary-soft:   #eff6ff;
  --color-primary-line:   #d3e0fd;

  /* Ink / text */
  --color-ink:            #0f172a; /* headings, strong text */
  --color-ink-strong:     #111827; /* near-black surfaces (active pills, dark CTAs) */
  --color-ink-solid:      #111111; /* body copy, default text colour */
  --color-text-muted:     #6b7280; /* secondary / helper text */

  /* Borders & surfaces */
  --color-border:         #e5e7eb;
  --color-page-bg:        #f7f7f7;

  /* Status */
  --color-success:        #16a34a;
  --color-success-dark:   #15803d;
  --color-success-soft:   #f0fdf4;
  --color-success-line:   #bbf7d0;
  --color-danger:         #ef4444;
  --color-warning:        #d97706;
  --color-accent:         #f97316;
  --color-accent-dark:    #ea580c;

  /* Radii & easing shared across components */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  /* Shared responsive breakpoints (documented for reference; media queries
     still hardcode px values since CSS cannot @media on a custom property) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;

  /* ── Redesign tokens (banner + job list + about rail) ── */
  --fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-16:16px;
  --fs-17:17px;--fs-18:18px;--fs-20:20px;--fs-24:24px;--fs-28:28px;--fs-32:32px;
  --fs-36:36px;--fs-52:52px;

  --s-2:2px;--s-4:4px;--s-6:6px;--s-8:8px;--s-10:10px;--s-12:12px;--s-14:14px;--s-16:16px;
  --s-18:18px;--s-20:20px;--s-24:24px;--s-28:28px;--s-32:32px;--s-40:40px;--s-48:48px;
  --s-56:56px;--s-64:64px;--s-80:80px;

  --r-6:6px;--r-8:8px;--r-10:10px;--r-12:12px;--r-14:14px;--r-16:16px;
  --r-20:20px;--r-24:24px;--r-pill:999px;

  --ctl:40px;

  --ink:#0e1226;
  --ink-2:#3d4260;
  --ink-3:#6c7290;
  --mute:#9aa0bb;
  --line:#e4e7f0;
  --line-2:#eef0f7;
  --page:#fbfcfe;

  --blue:#3b6cf6;--blue-ink:#2a55d4;--blue-soft:#eef3ff;--blue-line:#d3e0fd;
  --violet:#7c5cf0;--violet-soft:#f3efff;--violet-line:#ded4ff;
  --cyan:#0aa5c4;--cyan-soft:#e6f7fb;
  --ok:#0f9d63;--ok-soft:#e8f8f0;--ok-line:#c6ecd9;
  --li:#0a66c2;--li-soft:#eaf3fc;--li-line:#bcdcf7;
  --or:#f97316;--or-ink:#ea580c;--or-soft:#fff4ec;--or-line:#ffd7b8;
  --amber:#c07d09;--bad:#d3372c;--bad-soft:#fdeceb;

  --e0:0 1px 2px rgba(14,18,38,.05);
  --e1:0 1px 3px rgba(14,18,38,.06),0 10px 24px -14px rgba(14,18,38,.22);
  --grad:linear-gradient(100deg,var(--blue),var(--violet));
}

.num { font-variant-numeric: tabular-nums; }

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

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-solid);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

.app-layout { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
.main-content { flex: 1; background: var(--page); }

/* Footer */
.site-footer {
  background: #ffffff;
  border-top: 1px solid #ebebeb;
}

.site-footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #6b6b6b;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.inline-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
 }

/* ---- Email template preview page (/email-templates) ---- */
.et-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 20px 42px;
}

.et-hero h1 {
  margin: 0 0 8px;
  font-size: 31px;
  line-height: 1.2;
  color: var(--color-ink);
}

.et-hero p {
  margin: 0;
  max-width: 820px;
  font-size: 15px;
  line-height: 1.65;
  color: #42566f;
}

.et-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}

.et-card,
.et-side {
  background: #ffffff;
  border: 1px solid #dde5f1;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.et-card {
  padding: 18px;
}

.et-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.et-card-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-ink-strong);
}

.et-card-head p {
  margin: 5px 0 0;
  font-size: 13px;
  color: #52657f;
}

.et-open-template {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #cdd9ed;
  background: #f8fbff;
  color: #1f4fd6;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 12px;
  white-space: nowrap;
}

.et-open-template:hover {
  background: var(--color-primary-soft);
}

.et-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #445a76;
  margin-bottom: 12px;
}

.et-meta code {
  background: #f1f5f9;
  color: var(--color-ink);
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
}

.et-paper-frame {
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  overflow: hidden;
  background: #edf2f9;
}

.et-paper-frame iframe {
  width: 100%;
  height: 760px;
  border: 0;
  background: #edf2f9;
}

.et-help {
  margin-top: 14px;
  border-top: 1px dashed #d4dfef;
  padding-top: 14px;
}

.et-help h3,
.et-side h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-ink);
}

.et-help ol {
  margin: 0;
  padding-left: 20px;
  color: #334155;
  font-size: 13.5px;
  line-height: 1.65;
}

.et-help li {
  margin-bottom: 6px;
}

.et-side {
  padding: 16px;
  align-self: flex-start;
}

.et-side ul {
  margin: 0 0 16px;
  padding-left: 18px;
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
}

.et-side li {
  margin-bottom: 6px;
}

.et-side p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #475569;
}

@media (max-width: 992px) {
  .et-grid {
    grid-template-columns: 1fr;
  }

  .et-card-head {
    flex-direction: column;
  }

  .et-open-template {
    width: 100%;
  }

  .et-paper-frame iframe {
    height: 620px;
  }
}

/* Navbar */
.navbar {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #ebebeb;
}

.navbar-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.navbar-brand {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.navbar-links { display: flex; align-items: center; gap: 30px; }

.nav-link-item {
  color: #666666;
  font-size: 13.5px;
  font-weight: 400;
  transition: color 0.15s;
}

.nav-link-item:hover { color: var(--color-ink-solid); }

.nav-btn-signup {
  background: var(--color-ink-solid);
  color: #ffffff;
  border: none;
  padding: 7px 17px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  padding: 7px;
}

.hamburger span { display: block; height: 2px; background: #111; margin: 4px 0; }

/* Hero */
.hero {
  width: 100%;
  /* background: linear-gradient(180deg, #f8faff 0%, #f4f6fc 100%); */
  padding: 42px 24px 54px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: radial-gradient(ellipse 42% 56% at 50% 86%, rgba(37, 99, 235, 0.08), transparent 74%); */
  z-index: 0;
}

.hero::after {
  display: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
    width: 150px;
    height: 50px;
    margin-bottom: 10px;
    object-fit: contain; 
}

.hero-headline {
  font-size: 44px;
  font-weight: 800;
  color: var(--color-ink);
  letter-spacing: 0;
  line-height: 1.15;
  margin-bottom: 8px;
}

.hero-headline:focus,
.hero-headline:focus-visible {
  outline: none;
}

.hero-sub {
  font-size: 15px;
  color: #66749a;
  line-height: 1.55;
  margin-bottom: 26px;
  white-space: normal;
}

.hero-perks { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center; }

.hero-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #3e4b69;
  background: #ffffff;
  border: 1px solid #e4e9f2;
  padding: 7px 13px;
  border-radius: 9999px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
}

.hero-perk-verified { color: #059669; }
.hero-perk-remote { color: #7c3aed; }
.hero-perk-pay { color: var(--color-accent); }
.hero-perk-fast { color: var(--color-primary); }
.hero-perk-growth { color: #0f9f99; }

.hero-cta-wrap { width: 100%; max-width: 820px; }

.hero-form-card {
  padding: 0;
}

.hero-cta-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
  display: block;
}

.hero-bar {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #edf0f6;
  border-radius: 9999px;
  padding: 5px 7px 5px 20px;
  box-shadow: 0 15px 34px rgba(38, 61, 111, 0.13);
}

.hero-bar-disabled {
  border-color: #dbe3ef;
}

.hero-bar-input {
  flex: 1;
  min-width: 0;
  border: none;
   background: transparent;
  font-size: 15px;
  color: var(--color-ink);
  padding: 9px 0;
}

.hero-bar-input:focus,
.hero-bar-input:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
 }

.hero-bar-input::placeholder { color: #94a3b8; }
.hero-bar-sep { width: 1px; height: 24px; background: var(--color-border); margin: 0 14px; }

.hero-bar-upload {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: #7180a3;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
}

.hero-bar-upload-text {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-bar-upload-disabled {
  color: #b0bdd1;
  cursor: not-allowed;
}

.hero-bar-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  padding: 12px 27px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 700;
  margin-left: 6px;
}

.hero-bar-btn:disabled {
  background: #93b4f7;
   cursor: not-allowed;
}

.hero-gdpr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 0;
  font-size: 12px;
  color: #2c2c2c;
  line-height: 1.5;
  text-align: center;
}

.hero-gdpr-accepted {
}

.hero-gdpr-attention {
  animation: hero-gdpr-shake 0.42s ease;
}

@keyframes hero-gdpr-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.hero-resume-help {
  margin-top: 10px;
  font-size: 12px;
  color: #95a3c5;
  text-align: center;
}

.hero-gdpr-cb { width: 18px; height: 18px; margin-top: 0; accent-color: var(--color-primary); }
.hero-error { font-size: 12.5px; color: #dc2626; margin-top: 10px; }

.hero-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 0;
  min-height: 80px;
}
.hero-success[hidden] { display: none; }

.hero-success h3 { font-size: 20px; font-weight: 700; color: var(--color-ink); }
.hero-success p { font-size: 14px; color: #475569; }

/* ═══════════════════════════════════════════════════════
   Job section — header, toolbar, filter chips, grid
   ═══════════════════════════════════════════════════════ */
.shell{max-width:1300px;margin:0 auto;padding:0 var(--s-32)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);
  border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-13);height:38px;
  padding:0 var(--s-18);transition:.16s ease;flex:none;white-space:nowrap}
.btn svg{width:14px;height:14px}
.btn-lg{height:52px;padding:0 var(--s-32);font-size:var(--fs-15)}
.btn-cta{background:var(--blue);color:#fff;box-shadow:0 6px 18px -6px rgba(59,108,246,.55)}
.btn-cta:hover{background:var(--blue-ink)}
.btn-line{border:1px solid var(--line);background:#fff;color:var(--ink-2);font-weight:600}
.btn-line:hover{border-color:var(--blue-line);color:var(--blue-ink);background:var(--blue-soft)}
.btn-li{background:var(--li);color:#fff;box-shadow:0 6px 16px -6px rgba(10,102,194,.5)}
.btn-li:hover{background:#08549f;color:#fff}
/* Apply Now — black, 10px radius, NOT a pill */
.btn-apply{background:var(--ink);color:#fff;border-radius:var(--r-10);
  box-shadow:0 4px 12px -4px rgba(14,18,38,.45)}
.btn-apply:hover{background:#000;color:#fff;box-shadow:0 8px 20px -6px rgba(14,18,38,.55)}

.jobs-sec{padding:0 0 var(--s-80);background:var(--page)}

.jhead{margin-bottom:var(--s-24)}
.kick{display:inline-flex;align-items:center;gap:var(--s-10);font-size:var(--fs-11);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.kick::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.jhead h2{margin-top:var(--s-10);font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.jhead p{margin-top:var(--s-8);font-size:var(--fs-14);color:var(--ink-3);max-width:70ch}

/* Toolbar — every control is exactly --ctl tall and sits on one baseline */
.jfb-backdrop{position:fixed;inset:0;z-index:50}

/* Mirrors .grid's columns so the toolbar/chips row ends exactly where the rail begins,
   instead of drifting from a hand-computed max-width. */
.jrow-align{display:grid;gap:var(--s-24)}
.jrow-align > .jtools,.jrow-align > .afcs{grid-column:1;min-width:0}

.jtools{position:relative;z-index:60;display:flex;align-items:center;gap:var(--s-10);
  flex-wrap:wrap;margin-bottom:var(--s-20)}

.jsearch{flex:0 1 260px;min-width:187px;max-width:187px;height:var(--ctl);display:flex;align-items:center;
  gap:var(--s-10);padding:0 var(--s-16);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);box-shadow:var(--e0);transition:.16s ease}
.jsearch svg{width:16px;height:16px;color:var(--mute);flex:none}
.jsearch input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:var(--fs-14);color:var(--ink)}
.jsearch input::placeholder{color:var(--mute)}
.jsearch:focus-within{border-color:var(--blue-line);box-shadow:0 0 0 4px rgba(59,108,246,.10)}

.jfilters{display:flex;align-items:center;gap:var(--s-10);flex-wrap:wrap}
.jfilter-chip{position:relative;display:inline-flex;align-items:center}
.jfilter-drop{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  border-radius:50%;display:inline-grid;place-items:center;color:var(--mute);background:#f1f3fa;
  opacity:0;pointer-events:none;transition:.16s ease;border:none;}
.jfilter-chip:hover .jfilter-drop,.jfilter-chip:focus-within .jfilter-drop{opacity:1;pointer-events:auto}
.jfilter-drop:hover{background:var(--bad-soft);color:var(--bad)}
.jfilter-drop svg{width:11px;height:11px}

.jf-pill{position:relative}
.jf-pill-btn{height:var(--ctl);display:inline-flex;align-items:center;gap:var(--s-6);
  padding:0 var(--s-32) 0 var(--s-14);border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;box-shadow:var(--e0);font-size:var(--fs-13);font-weight:600;color:var(--ink-2);transition:.16s ease}
.jf-pill-btn svg{width:14px;height:14px;color:var(--mute)}
.jf-pill-btn:hover{border-color:var(--blue-line);color:var(--blue-ink);background:var(--blue-soft)}
.jf-pill.is-selected .jf-pill-btn{border-color:var(--blue-line);background:var(--blue-soft);color:var(--blue-ink)}
.jf-pill.is-open .jf-pill-btn{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-ink)}

.jf-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:190px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-12);box-shadow:var(--e1);padding:var(--s-8);z-index:2200}
.jf-dd-row{display:flex;align-items:center;gap:var(--s-10);padding:var(--s-8) var(--s-10);
  border-radius:var(--r-8);cursor:pointer;font-size:var(--fs-13);color:var(--ink-2)}
.jf-dd-row:hover{background:var(--blue-soft);color:var(--blue-ink)}
.jf-dd-row input{width:15px;height:15px;accent-color:var(--blue)}
.jf-dropdown-loc{min-width:260px;display:flex;flex-direction:column;gap:var(--s-8)}
.jf-loc-group{display:flex;flex-direction:column;gap:var(--s-4)}
.jf-loc-label{font-size:var(--fs-12);color:var(--ink-3)}
.jf-loc-select{height:36px;border:1px solid var(--line);border-radius:var(--r-8);background:#fff;
  padding:0 var(--s-10);font-size:var(--fs-13);color:var(--ink)}
.jf-loc-select:disabled{background:#f7f8fc;color:var(--mute)}
.jf-loc-clear{align-self:flex-start;border:1px solid var(--line);border-radius:var(--r-8);
  padding:var(--s-6) var(--s-10);font-size:var(--fs-12);font-weight:700;color:var(--ink-2)}
.jf-loc-clear:hover{border-color:var(--bad);color:var(--bad)}
.jf-dropdown-add{min-width:176px;display:flex;flex-direction:column;gap:var(--s-4)}
.jf-add-item{width:100%;text-align:left;border:0;border-radius:var(--r-8);background:#fff;
  font-size:var(--fs-13);color:var(--ink-2);padding:var(--s-8) var(--s-10)}
.jf-add-item:hover,.jf-add-item:focus-visible{background:#f7f8fc;color:var(--ink-2);outline:0}

.addf-wrap{position:relative}
.addf{height:var(--ctl);display:inline-flex;align-items:center;gap:var(--s-8);padding:0 var(--s-14);
  border:1px dashed #c9d0e4;border-radius:var(--r-pill);background:#fff;font-size:var(--fs-13);
  font-weight:700;color:var(--ink-2);transition:.16s ease}
.addf-plus{width:20px;height:20px;border-radius:50%;background:#f1f3fa;display:inline-grid;
  place-items:center;color:var(--ink-3);transition:.16s ease}
.addf-plus svg{width:12px;height:12px}
.addf:hover{border-style:solid;border-color:var(--blue);color:var(--blue-ink);background:var(--blue-soft)}
.addf:hover .addf-plus{background:var(--blue);color:#fff}
.addf-badge{min-width:20px;height:20px;padding:0 var(--s-6);border-radius:var(--r-pill);
  background:var(--blue);color:#fff;font-size:var(--fs-11);font-weight:800;display:inline-grid;place-items:center}

.jtools-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-10);flex-wrap:wrap}
.sortwrap{height:var(--ctl);display:inline-flex;align-items:center;gap:var(--s-8);padding:0 var(--s-14);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--e0)}
.sortwrap-label{font-size:var(--fs-13);color:var(--ink-3);white-space:nowrap}
.sortwrap-select{border:0;outline:none;background:none;font-size:var(--fs-13);font-weight:700;color:var(--ink);cursor:pointer}
.sortwrap-select:disabled{color:var(--mute);cursor:not-allowed}

.countpill{height:var(--ctl);display:inline-flex;align-items:center;gap:var(--s-8);padding:0 var(--s-14);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--e0)}
.countpill-ic{width:24px;height:24px;border-radius:var(--r-8);background:var(--blue-soft);color:var(--blue);
  display:inline-grid;place-items:center;flex:none}
.countpill-ic svg{width:14px;height:14px}
.countpill-val{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:var(--fs-16);font-weight:800;
  color:var(--ink);letter-spacing:-.02em}
.countpill-unit{font-size:var(--fs-13);color:var(--ink-3)}
.countpill-sep{width:1px;height:18px;background:var(--line-2)}
.countpill-new{display:inline-flex;align-items:center;gap:var(--s-6);font-size:var(--fs-12);
  font-weight:700;color:var(--ok);white-space:nowrap}
.countpill-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,157,99,.5)}100%{box-shadow:0 0 0 7px rgba(15,157,99,0)}}

/* Active filter chips */
.afcs{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap;margin-bottom:var(--s-20)}
.afc{height:32px;display:inline-flex;align-items:center;gap:var(--s-8);padding:0 var(--s-6) 0 var(--s-12);
  border-radius:var(--r-pill);background:var(--blue-soft);border:1px solid var(--blue-line);
  font-size:var(--fs-13);font-weight:700;color:var(--blue-ink)}
.afc-x{width:18px;height:18px;border-radius:50%;background:rgba(59,108,246,.16);color:var(--blue-ink);border:none;
  display:inline-grid;place-items:center;transition:.16s ease}
.afc-x svg{width:10px;height:10px}
.afc-x:hover{background:var(--blue);color:#fff}
.afc-clear{height:32px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font-size:var(--fs-13);font-weight:700;color:var(--ink-3);padding:0 var(--s-12);transition:.16s ease}
.afc-clear:hover{border-color:var(--bad);color:var(--bad)}

/* Layout grid — the rail ends level with the LAST JOB CARD, so the pager gets its own row */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto;
  gap:var(--s-24);align-items:stretch}
.grid > .jobs-panel{grid-column:1;grid-row:1;min-width:0}
.grid > .rail{grid-column:2;grid-row:1}
.grid > .pager{grid-column:1;grid-row:2}

.jobs-panel{background:transparent}

/* Toolbar and chips sit inside the left list panel; they remain visually aligned with the rail in the adjacent column. */
.rh-match-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-success-soft);
  border: 1px solid var(--color-success-line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

.rh-match-banner-left { display: flex; flex-direction: column; }
.rh-match-banner-title { font-size: 13.5px; font-weight: 700; color: var(--color-success-dark); }
.rh-match-banner-sub { font-size: 12px; color: #22c55e; }
.rh-match-banner-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-success-line);
  border-radius: 8px;
  background: transparent;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-success);
}

/* ── Job cards — two text lines, nothing more ── */
.jobs{display:flex;flex-direction:column;gap:var(--s-12)}

.rh-empty-state{border:1px dashed #d1d5db;border-radius:var(--r-14);background:#f9fafb;
  color:var(--ink-2);font-size:var(--fs-14);font-weight:600;text-align:center;padding:var(--s-24) var(--s-16)}

.job{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  gap:var(--s-16);align-items:center;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-16);padding:var(--s-20);box-shadow:var(--e0);transition:.2s ease}
.job.job-match{grid-template-columns:56px minmax(0,1fr) auto auto}
.job::before{content:"";position:absolute;left:0;top:var(--s-16);bottom:var(--s-16);width:3px;
  border-radius:0 3px 3px 0;background:var(--grad);opacity:0;transition:opacity .2s ease}
.job:not(.job-skeleton):hover{transform:translateY(-2px);border-color:var(--blue-line);
  box-shadow:0 1px 3px rgba(59,108,246,.08),0 16px 32px -18px rgba(59,108,246,.42);z-index:5}
.job:not(.job-skeleton):hover::before{opacity:1}
/* Above the floating chat launcher so an open justification panel is never clipped. */
.job:has(.rh-match-more-menu[open]){z-index:2200}

.jlogo{width:56px;height:56px;border-radius:var(--r-14);position:relative;overflow:hidden;
  display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(14,18,38,.45);flex:none}
.jlogo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jlogo-txt{display:grid;place-items:center;font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:var(--fs-20);font-weight:800;color:#fff;line-height:1}

.jbody{min-width:0}
.jtitle-row{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}
.jtitle{margin:0;font-size:15px;font-weight:700;letter-spacing:-.022em;color:var(--ink);line-height:1.3}
.job:hover .jtitle{color:var(--blue-ink)}
.jnew{height:20px;display:inline-flex;align-items:center;padding:0 var(--s-6);border-radius:var(--r-6);
  background:var(--violet-soft);border:1px solid var(--violet-line);color:var(--violet);
  font-size:var(--fs-11);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.jranked{height:20px;display:inline-flex;align-items:center;gap:var(--s-4);padding:0 var(--s-8);
  border-radius:var(--r-pill);background:var(--blue-soft);border:1px solid var(--blue-line);
  color:var(--blue-ink);font-size:var(--fs-11);font-weight:800}
.jranked svg{width:11px;height:11px}

.jmeta{display:flex;flex-wrap:wrap;gap:var(--s-6) var(--s-14);margin-top:var(--s-8)}
.jm{display:inline-flex;align-items:center;gap:var(--s-6);font-size:var(--fs-13);font-weight:500;color:var(--ink-3)}
.jm svg{width:13px;height:13px;color:var(--mute);flex:none}
.jm-ok{color:var(--ok);font-weight:600}
.jm-ok svg{color:var(--ok)}

.jact{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:var(--s-10);flex:none}
.jposted{font-size:var(--fs-12);color:var(--mute);white-space:nowrap}
/* Job list skeleton (shown while IsLoading / IsAiRefining, before jobs/scores exist) */
.rh-job-card-skeleton { cursor: default; }
.job-skeleton { cursor: default; }
.jlogo-skel { width: 56px; height: 56px; border-radius: var(--r-14); flex: none; }
.rh-skel-posted { width: 66px; height: 9px; }

.rh-skel {
  background: linear-gradient(90deg, #eef0f3 25%, #e2e5ea 37%, #eef0f3 63%);
  background-size: 400% 100%;
  animation: rh-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

.rh-skel-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; }

.rh-skel-line { height: 10px; border-radius: 5px; }

.rh-skel-title { width: 55%; height: 13px; margin-bottom: 12px; }

.rh-skel-tag { width: 64px; }

.rh-skel-meta { width: 90px; }

.rh-skel-btn { width: 108px; height: 38px; border-radius: 12px; }

@keyframes rh-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Job detail skeleton (/jobs/{id} while the job loads). Sizes below mirror the real elements:
   90px logo box, 32px title, 28px tags/chips, 28px overview icons, 48px apply button. */

/* The hero is a dark banner, so it gets its own dark shimmer - the light .rh-skel gradient used
   everywhere else would read as a white hole at the top of the page. */
.jd-skel-hero {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #071022 25%, #0d1b33 37%, #071022 63%);
  background-size: 400% 100%;
  animation: rh-skel-shimmer 1.4s ease-in-out infinite;
}

.jd-skel-logo { width: 100%; height: 100%; border-radius: 17px; }
.jd-skel-badge { width: 128px; height: 30px; border-radius: 9999px; }

.jd-skel-company { width: 110px; margin-bottom: 12px; }
.jd-skel-title { width: 70%; height: 30px; border-radius: 8px; margin-bottom: 18px; }
.jd-skel-tag { width: 84px; height: 28px; border-radius: 8px; }

.jd-skel-para { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.jd-skel-bullets { display: flex; flex-direction: column; gap: 12px; }

.jd-skel-heading { width: 180px; height: 14px; margin-top: 28px; margin-bottom: 14px; }

.jd-skel-w-100 { width: 100%; }
.jd-skel-w-95 { width: 95%; }
.jd-skel-w-80 { width: 80%; }
.jd-skel-w-60 { width: 60%; }

.jd-skel-chip { height: 28px; border-radius: 20px; }
.jd-skel-chip-a { width: 84px; }
.jd-skel-chip-b { width: 104px; }
.jd-skel-chip-c { width: 68px; }

.jd-skel-rate { width: 120px; height: 24px; }

.jd-skel-ov-icon { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; }
.jd-skel-ov-label { width: 72px; flex-shrink: 0; }
/* margin-left:auto reproduces the flex:1 on the real .crew-ov-label, keeping the value right-aligned */
.jd-skel-ov-value { width: 88px; margin-left: auto; }

.jd-skel-apply { width: 100%; height: 48px; border-radius: 9px; }

@media (prefers-reduced-motion: reduce) {
  .rh-skel,
  .jd-skel-hero { animation: none; }
}

.rh-match-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 118px;
}

.rh-match-ring {
  --match-color: var(--color-primary);
  --match-value: 0;
  width: 58px;
  height: 58px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--match-color) calc(var(--match-value) * 1%), var(--color-border) 0);
}

.rh-match-ring::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #ffffff;
}

.rh-match-ring-value {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink-strong);
}

.rh-match-low { --match-color: var(--color-danger); }
.rh-match-mid { --match-color: var(--color-primary-light); }
.rh-match-high { --match-color: #22c55e; }

/* "Skill Match" caption under the ring when there is no justification to expand. Sized to
   match .rh-match-skills-btn so the ring does not shift between the two states. */
.rh-match-label {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  white-space: nowrap;
}

.rh-match-more-menu {
  position: relative;
}

.rh-match-skills-btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
   padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-primary);
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  background: var(--color-primary-soft);
  cursor: pointer;
  user-select: none;
}

.rh-match-skills-btn:hover {
  background: #dbeafe;
}

.rh-match-more-menu[open] .rh-match-skills-btn svg {
  transform: rotate(180deg);
}

.rh-match-skills-btn::-webkit-details-marker {
  display: none;
}

.rh-match-more-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
    min-width: 300px;
    max-width: 300px;
    max-height: 250px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 8px;
  z-index: 20;
}

/* Inside the dropdown the reason blocks own the full panel width, so drop the 220px cap that
   keeps them narrow when rendered inline on the card. */
.rh-match-more-dropdown .rh-match-reason {
  max-width: none;
}

.rh-match-more-dropdown .rh-match-reason + .rh-match-reason {
  margin-top: 6px;
}

.rh-match-reason-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.rh-match-reason-skeleton-gap {
  border-color: #fde68a;
  background: #fffbeb;
}

.rh-match-skeleton-line {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 37%, #e2e8f0 63%);
  background-size: 400% 100%;
  animation: rh-skel-shimmer 1.4s ease-in-out infinite;
}

.rh-match-skeleton-line-wide { width: 100%; }
.rh-match-skeleton-line-medium { width: 82%; }
.rh-match-skeleton-line-short { width: 58%; }

.rh-match-more-item {
  font-size: 12px;
  color: #334155;
  padding: 7px 8px;
  border-radius: 8px;
}

.rh-match-more-item:hover {
  background: #f8fafc;
}

/* ── Pagination — left readout, buttons pushed right ── */
.pager{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap}
/* .pager-reset{margin-left:auto} */
.pagerbar{display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap;width:100%}
.pagerbar-showing{font-size:var(--fs-13);color:var(--ink-3)}
.pagerbar-btns{display:flex;align-items:center;gap:var(--s-6);margin-left:auto;flex-wrap:wrap}
.pg{min-width:36px;height:36px;padding:0 var(--s-10);border:1px solid var(--line);border-radius:var(--r-10);
  background:#fff;font-size:var(--fs-13);font-weight:700;color:var(--ink);transition:.16s ease}
.pg:hover:not(:disabled):not(.is-current){background:#f1f3f8;border-color:var(--ink)}
.pg.is-current{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 6px 14px -6px rgba(14,18,38,.55)}
.pg:disabled{color:var(--mute);cursor:not-allowed}
/* ═══════════════════════════════════════════════════════
   Right rail — one card, stat rows absorb leftover height
   ═══════════════════════════════════════════════════════ */
.rail{display:flex;flex-direction:column}
.rcard{flex:1;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-20);overflow:hidden;
  box-shadow:0 2px 8px rgba(14,18,38,.04),0 28px 60px -34px rgba(14,18,38,.30)}
.rtop{flex:1;padding:var(--s-20) var(--s-20) var(--s-16);display:flex;flex-direction:column}

.aid{display:flex;align-items:center;gap:var(--s-12)}
.amark{width:48px;height:48px;display:grid;
  place-items:center;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:var(--fs-18);
  font-weight:800;color:#fff;flex:none}
.amark-img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-14);background:#fff}
.amark-txt{width:100%;height:100%;place-items:center}
.aname{font-size:17px;font-weight:700;}
.atag{margin-top:var(--s-12);font-size:var(--fs-14);font-weight:500;color:var(--ink-2)}
.adesc{margin-top:var(--s-8);font-size:var(--fs-13);color:var(--ink-3);line-height:1.7;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}

.apills{display:flex;flex-wrap:wrap;gap:var(--s-6);margin-top:var(--s-14)}
.apill{height:24px;display:inline-flex;align-items:center;gap:var(--s-6);padding:0 var(--s-10);
  border-radius:var(--r-pill);font-size:11px;font-weight:700;border:1px solid}
.apill svg{width:12px;height:12px}
.apill-ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.apill-blue{color:var(--blue-ink);background:var(--blue-soft);border-color:var(--blue-line)}
.apill-violet{color:var(--violet);background:var(--violet-soft);border-color:var(--violet-line)}

/* flex:1 1 0 with no max-height is what keeps the card flush with the job column */
.astats{margin-top:var(--s-16);border:1px solid var(--line-2);border-radius:var(--r-14);
  overflow:hidden;background:#fff;flex:1 1 auto;display:flex;flex-direction:column}
.arow{display:flex;align-items:center;gap:var(--s-12);flex:1 1 0;min-height:42px;
  padding:0 var(--s-14);transition:background .16s ease}
.arow + .arow{border-top:1px solid var(--line-2)}
.arow:hover{background:#fafbff}
.aic{width:28px;height:28px;border-radius:var(--r-8);display:grid;place-items:center;flex:none}
.aic svg{width:15px;height:15px}
.aic-blue{background:var(--blue-soft);color:var(--blue)}
.aic-li{background:var(--li-soft);color:var(--li)}
.aic-violet{background:var(--violet-soft);color:var(--violet)}
.aic-ok{background:var(--ok-soft);color:var(--ok)}
.alabel{font-size:var(--fs-13);font-weight:500;color:var(--ink-3)}
.aval{margin-left:auto;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:var(--fs-16);
  font-weight:800;color:var(--ink);letter-spacing:-.02em}
.aval sup{font-size:var(--fs-11);color:var(--ink-3);vertical-align:5px;font-weight:700}

.afoot{display:flex;gap:var(--s-8);margin-top:auto;padding-top:var(--s-16)}
.afoot .btn{flex:1;height:36px;font-size:var(--fs-13)}

/* Mura AI band — built but switched off; flip to flex to re-enable. Orange lives ONLY here. */
.rchat{display:none;margin-top:auto;border-top:1px solid var(--line-2);
  background:#fffaf5;padding:var(--s-12) var(--s-14)}
.rc-row{display:flex;align-items:center;gap:var(--s-12);width:100%;text-align:left;background:#fff;
  border:1px solid var(--or-line);border-radius:var(--r-14);padding:var(--s-10) var(--s-12);
  transition:.16s ease;cursor:pointer}
.rc-row:hover{border-color:var(--or);box-shadow:0 6px 18px -8px rgba(249,115,22,.55);transform:translateY(-1px)}
.rc-bot{width:32px;height:32px;border-radius:var(--r-10);flex:none;display:grid;place-items:center;
  position:relative;background:linear-gradient(140deg,var(--or),#ffb15c);color:#fff;
  box-shadow:0 5px 14px -5px rgba(249,115,22,.7)}
.rc-bot .live{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--ok);border:2px solid #fff}
.rc-txt{display:flex;flex-direction:column;min-width:0}
.rc-t{font-size:var(--fs-14);font-weight:800;color:var(--ink);letter-spacing:-.015em;line-height:1.25}
.rc-s{font-size:var(--fs-12);color:var(--ink-3);line-height:1.4;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-go{margin-left:auto;width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--or);color:#fff;box-shadow:0 5px 14px -5px rgba(249,115,22,.7);transition:.16s ease}
.rc-row:hover .rc-go{transform:translateX(2px)}

/* ── Job section responsive ── */
@media (max-width:1080px){
  .grid{grid-template-columns:1fr;grid-template-rows:none}
  .grid > main,.grid > .rail,.grid > .pager{grid-column:1;grid-row:auto}
  .grid > main{order:1}
  .grid > .pager{order:2}
  .grid > .rail{order:3}
  .rail{position:static}
}

@media (max-width:720px){
  .shell{padding:0 var(--s-20)}
  .jobs-sec{padding:0 0 40px}
  .jhead h2{font-size:var(--fs-20)}
  .jtools-right{margin-left:0;width:100%}
  .jsearch{max-width:none}
  .job{grid-template-columns:48px minmax(0,1fr);row-gap:var(--s-14)}
  .job.job-match{grid-template-columns:48px minmax(0,1fr)}
  .jlogo{width:48px;height:48px}
  .job .rh-match-visual{grid-column:1 / -1;flex-direction:row;align-items:center;gap:var(--s-12);min-width:0}
  .jact{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .pagerbar-btns{margin-left:0}
}
/* AI refining indicator (resume match) */
.rh-ai-refining {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary-soft);
  border: 1px solid #bfdbfe;
  color: var(--color-primary-hover);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

.rh-ai-refining-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-light);
  animation: rh-ai-pulse 1.1s ease-in-out infinite;
}

@keyframes rh-ai-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Crew Detail */
.crew-hero {
  width: 100%;
  height: 260px;
  position: relative;
  overflow: visible;
  background: linear-gradient(175deg, #010407 0%, #02091c 25%, #050e24 50%, #08152e 72%, #0e1e3c 88%, #14263e 100%);
}

/* Job banner image (JobMaster.JobImage; falls back to the company hero image) */
.crew-hero-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the banner edges so the logo box and status badge stay readable */
.crew-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 4, 7, 0.30) 0%, rgba(1, 4, 7, 0.05) 45%, rgba(1, 4, 7, 0.45) 100%);
}

.crew-scroll-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: #ffffff;
  border-bottom: 1px solid #ebebeb;
  padding: 20px 5%;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.crew-scroll-header-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
}

.crew-scroll-header-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.crew-scroll-job-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crew-scroll-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-solid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crew-scroll-company {
  font-size: 12px;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crew-scroll-back {
  background: none;
  border: 1px solid #e0e0e0;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #666666;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.crew-scroll-apply-btn {
  background: var(--color-ink-solid);
  color: #ffffff;
  border: none;
  padding: 9px 20px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
}

.crew-scroll-apply-btn:disabled {
  background: #e0e0e0;
  color: #aaaaaa;
}

.crew-logo-on-hero { position: absolute; bottom: -45px; left: 5%; }

/* Brand mark on the banner, opposite the job logo box */
.crew-hero-brand {
  position: absolute;
      top: 25px;
    right: 2%;
    height: 30px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(1, 4, 7, 0.45));
}

@media (max-width: 720px) {
  .crew-hero-brand { height: 26px; top: 16px; }
}

.crew-logo-box {
  width: 90px;
  height: 90px;
  background: #fff;
  border: 3px solid #ffffff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  color: #fff;
  font-weight: 700;
}

.crew-logo-img {
  width: 70px;
  height: 65px;
  object-fit: cover;
  border-radius: 12px;
}

.crew-page-wrap { width: 100%; padding: 56px 5% 80px; background: var(--page); }
.crew-top-badge-row { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 24px; margin-top: -40px; }

.crew-layout {
  display: grid;
  grid-template-columns: 56% 1fr;
  gap: 40px;
  align-items: start;
  width: 100%;
}

.crew-left { min-width: 0; }

.crew-company-name { font-size: 14px; color: #999999; margin-bottom: 8px; }

.crew-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-ink-solid);
  letter-spacing: -1.2px;
  line-height: 1.15;
  margin-bottom: 18px;
}

.crew-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ebebeb;
}

.crew-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  color: #555555;
  font-weight: 500;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  padding: 5px 11px;
  border-radius: 6px;
}

.crew-dept-tag {
  background: #fff8f0;
  color: #b35000;
  border-color: #fdd8a0;
  font-weight: 600;
}

.crew-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 12.5px;
  color: #888888;
  font-weight: 500;
  margin-left: auto;
}

.crew-body-text { font-size: 14px; color: #444444; line-height: 1.82; }

.crew-section-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-ink-solid);
  letter-spacing: -0.3px;
  margin-top: 28px;
  margin-bottom: 14px;
}

.crew-bullet-list { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; }

.crew-bullet-list li {
  font-size: 14px;
  color: #444444;
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
}

.crew-bullet-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: #999999;
  font-size: 18px;
  line-height: 1.4;
}

.crew-skills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.crew-skill-chip {
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  color: #333333;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
}

.crew-about-section { margin-top: 40px; padding-top: 28px; border-top: 1px solid #ebebeb; }
.crew-li-link { display: inline-flex; margin-top: 14px; color: #0a66c2; font-size: 13px; font-weight: 600; }

.crew-right { position: sticky; top: 120px; align-self: start; min-width: 0; }

@media (min-width: 1025px) {
  /* When form is taller than JD, keep JD fixed and let form side be the scrolling content. */
  .crew-layout.crew-mode-right-taller .crew-left {
    position: sticky;
    top: 120px;
    align-self: start;
  }

  .crew-layout.crew-mode-right-taller .crew-right {
    position: static;
  }

  .crew-layout.crew-mode-right-taller .crew-right .apply-modal-inline {
    max-height: none;
    overflow: visible;
  }
}

.crew-overview-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.crew-ov-rate-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0f0f0;
}

.crew-ov-rate-amount { font-size: 24px; font-weight: 800; color: var(--color-ink-solid); letter-spacing: -0.8px; }

.crew-ov-rate-type {
  font-size: 12px;
  font-weight: 500;
  color: #aaaaaa;
  background: #f5f5f5;
  border: 1px solid #ebebeb;
  padding: 2px 8px;
  border-radius: 20px;
}

.crew-ov-rows { display: flex; flex-direction: column; margin-bottom: 22px; }

.crew-ov-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #f5f5f5;
}

.crew-ov-icon {
  width: 28px;
  height: 28px;
  border: 1px solid #ebebeb;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  background:#f5f5f5;
}

.crew-ov-row:last-child { border-bottom: none; }
.crew-ov-label { font-size: 12px; color: #aaaaaa; font-weight: 500; flex: 1; }
.crew-ov-value { font-size: 13px; font-weight: 600; color: #222222; text-align: right; max-width: 55%; }

.crew-apply-big-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-ink-solid);
  color: #ffffff;
  border: none;
  padding: 14px 20px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
}

.crew-apply-closed { background: #e0e0e0; color: #aaaaaa; cursor: not-allowed; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
}

.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; }

.status-badge.open { background: var(--color-success-soft); color: #1a7a3e; border: 1px solid #c3e8cc; }
.status-badge.open .dot { background: #1a7a3e; }
.status-badge.closed { background: #fff2f2; color: #b82828; border: 1px solid #f8c4c4; }
.status-badge.closed .dot { background: #b82828; }

/* Modal fallback */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 400;
}

.apply-modal {
  position: fixed;
  top: 6vh;
  right: 20px;
  width: min(560px, calc(100vw - 32px));
  max-height: 88vh;
  overflow: auto;
  z-index: 450;
  border: 1px solid #dbe4ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.24);
  padding: 20px 20px 18px;
}

.apply-modal-inline {
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
  z-index: auto;
  border: 1px solid #dbe4ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  padding: 18px;
}

.apply-modal::-webkit-scrollbar {
  width: 10px;
}

.apply-modal::-webkit-scrollbar-thumb {
  background: #cdd8e6;
  border-radius: 9999px;
}

.apply-modal::-webkit-scrollbar-track {
  background: transparent;
}

.modal-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ghost-button { border: 1px solid #e0e0e0; background: #fff; border-radius: 6px; padding: 6px 12px; }
.form-grid.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.text-input { width: 100%; min-height: 40px; border: 1px solid #d8d8d8; border-radius: 7px; padding: 8px 10px; margin-top: 8px; }
.skill-years-row { display: grid; grid-template-columns: 1fr 100px; gap: 8px; align-items: center; margin-top: 8px; }
.apply-button { width: 100%; min-height: 44px; background: #111; color: #fff; border: none; border-radius: 8px; margin-top: 12px; }

.crew-form-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
}

.crew-form-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -2px -2px 16px;
  padding: 6px 2px 10px;
  position: sticky;
  top: -2px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 75%, rgba(255, 255, 255, 0));
}

.crew-form-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.45px;
  margin: 0;
}

.crew-form-back-btn {
  background: #ffffff;
  border: 1px solid #d8e1ed;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  transition: all 0.15s ease;
}

.crew-form-back-btn:hover {
  border-color: #bac9dd;
  color: var(--color-ink);
}

.crew-form-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 10px;
}

.crew-candidate-image-field {
  padding: 12px 14px;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  background: #f8fafc;
}

.crew-candidate-image-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 124px;
}

.crew-candidate-image-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  overflow: hidden;
  border: 1px solid #e4eaf2;
  border-radius: 50%;
  background: #ffffff;
  color: #8da0ba;
}

.crew-candidate-image-avatar > svg {
  width: 20px;
  height: 20px;
}

.crew-candidate-image-content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.crew-candidate-image-title {
  color: #243247;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}

.crew-candidate-image-hint {
  color: #8094b3;
  font-size: 13px;
  line-height: 1.4;
}

.crew-candidate-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crew-candidate-image-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 5px;
}

.crew-candidate-image-name {
  max-width: 220px;
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-candidate-image-picker,
.crew-candidate-image-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid #b9cced;
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: #2563eb;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.crew-candidate-image-picker {
  width: 112px;
  height: 62px;
  flex: 0 0 112px;
  gap: 6px;
  border-color: #2864ff;
  border-radius: 7px;
  padding: 0 9px;
  line-height: 1.2;
}

.crew-candidate-image-picker:hover {
  background: #f2f6ff;
}

.crew-candidate-image-picker svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.crew-candidate-image-remove {
  width: 34px;
  flex: 0 0 34px;
  padding: 0;
  color: #b42318;
  font-size: 18px;
}

@media (max-width: 480px) {
  .crew-candidate-image-field {
    padding: 10px;
  }

  .crew-candidate-image-row {
    gap: 12px;
    min-height: 112px;
  }

  .crew-candidate-image-avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .crew-candidate-image-hint {
    font-size: 12px;
  }

  .crew-candidate-image-name {
    max-width: 110px;
  }
}

.crew-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.crew-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #333333;
}

.crew-req { color: #e53e3e; }

.crew-input {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--color-ink-solid);
  background: #ffffff;
}

.crew-input:focus,
.crew-textarea:focus,
.crew-year-input:focus {
  outline: none;
  border-color: #7aa5de !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.crew-input-invalid {
  border-color: #e53e3e !important;
}

.crew-textarea {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--color-ink-solid);
  min-height: 260px;
  resize: vertical;
}

.crew-cover-letter-wrap {
  position: relative;
}

.crew-textarea-ai {
  padding-bottom: 44px;
}

.crew-ai-draft-btn {
  position: absolute;
  right: 10px;
  bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background:#fff;
  color: var(--color-primary-hover);
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
 }

.crew-ai-draft-btn:hover {
  border-color: #9ebcf0;
  background: linear-gradient(180deg, #f3f8ff 0%, #e7f0ff 100%);
}

.crew-ai-draft-btn .inline-icon {
  width: 13px;
  height: 13px;
  margin: 0;
}

.crew-ai-draft-btn:disabled {
  opacity: 0.75;
  cursor: wait;
}

.crew-cover-letter-hint {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--color-primary-hover);
}

.crew-resume-drop {
    border: 1.9px dashed #3c8dff;
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
     display: flex;
    background: linear-gradient(313deg, #d5e6ff 20%, #f6faff 70%, #ffffff 100%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Selected state: confirms the resume was accepted. */
.crew-resume-drop-filled {
    border-color: #22c55e;
    background: linear-gradient(313deg, #dcfce7 20%, #f0fdf4 70%, #ffffff 100%);
}
.crew-resume-drop-filled .crew-drop-selected { color: #15803d; }
.crew-resume-drop-filled .crew-drop-hint { color: #4ade80; }


.crew-drop-text { font-size: 13px; color: #777777; }
.crew-browse-link { color: #0a66c2; font-weight: 600; }
.crew-drop-hint { font-size: 11px; color: #bbbbbb; }
.crew-drop-selected {
  display: block;
  max-width: 100%;
  font-size: 12px;
  color: #3c8dff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crew-label-section { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.crew-label-hint { font-size: 11px; color: #aaaaaa; }

.crew-skill-inputs {
  display: flex;
  flex-direction: column;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.crew-skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #edf2f7;
  gap: 12px;
}

.crew-skill-row:hover {
  background: #f8fbff;
}

.crew-skill-row:last-child { border-bottom: none; }

.crew-skill-row-name { font-size: 13px; font-weight: 500; color: #333333; }

.crew-skill-year-input { display: flex; align-items: center; gap: 6px; }

.crew-year-input {
  display: inline-block;
  flex: 0 0 auto;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  width: 56px !important;
  min-width: 56px;
  height: 32px;
  text-align: center;
  border: 1px solid #d8d8d8 !important;
  border-radius: 6px;
  background: #ffffff;
  padding: 6px 8px !important;
  font-size: 13px !important;
  opacity: 1;
  visibility: visible;
  line-height: 1;
}

.crew-year-input::-webkit-inner-spin-button,
.crew-year-input::-webkit-outer-spin-button {
  opacity: 1;
}

.crew-year-suffix { font-size: 11.5px; color: #aaaaaa; width: 24px; }

.crew-consent-wrap {
   margin-bottom: 6px;
}

.crew-recaptcha-field {
  margin-top: 8px;
}

.crew-recaptcha-slot {
  min-height: 78px;
  display: flex;
  align-items: center;
}

.crew-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
  color: #1f2937;
  line-height: 1.5;
}

.crew-consent-checkbox {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--color-ink-solid);
  flex: 0 0 auto;
}

.crew-consent-link {
  color: #0a66c2;
  margin-right: 4px;
}

.crew-resume-save-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.crew-validation-error {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: #e53e3e;
}

.crew-error-pulse {
  animation: crewErrorPulse 1s ease;
}

@keyframes crewErrorPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.crew-submit-btn {
  width: 100%;
  margin-top: 14px;
  background: linear-gradient(135deg, var(--color-ink) 0%, #1e293b 100%);
  color: #ffffff;
  border: none;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.crew-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.32);
}

.crew-submit-btn:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  transform: none;
}

.crew-success {
  width: 100%;
  margin-top: 8px;
  background: var(--color-success-soft);
  border: 1px solid #c3e8cc;
  color: #1a7a3e;
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.crew-thankyou-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 10000;
  overscroll-behavior: contain;
  touch-action: none;
}

.crew-thankyou-popup {
  width: min(420px, calc(100% - 36px));
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe4ef;
  box-shadow: 0 28px 50px rgba(2, 6, 23, 0.32);
  padding: 24px 22px 20px;
  text-align: center;
  animation: crewPopupIn 0.18s ease-out;
}

.crew-thankyou-popup::before {
  content: "\2713";
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  margin-bottom: 10px;
  background: #22c55e;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
}

@keyframes crewPopupIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.crew-thankyou-title {
  margin: 0;
  font-size: 18px;
  color: var(--color-ink);
  letter-spacing: -0.4px;
}

.crew-thankyou-copy {
  margin: 10px 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
}

.crew-thankyou-ok {
  border: none;
  background: linear-gradient(135deg, var(--color-ink) 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 24px;
  cursor: pointer;
  min-width: 112px;
}

.crew-thankyou-ok:hover {
  filter: brightness(1.05);
}

#blazor-error-ui {
  color-scheme: light only;
  background: #fff1f2;
  border-top: 1px solid #fecdd3;
  bottom: 0;
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 12px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

@media (max-width: 1024px) {
  .crew-layout { grid-template-columns: 1fr; gap: 32px; }
  .crew-right { position: static; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .crew-page-wrap { padding: 40px 4% 60px; }
  .crew-title { font-size: 26px; }
  .crew-ov-rows { gap: 10px; }
  .crew-share-modal { width: 420px; }
}

@media (max-width: 768px) {
  .navbar-container { padding: 0 20px; }
  .hero { padding: 48px 16px 56px; }
  .hero-headline { font-size: 36px; letter-spacing: -2px; }
  .hero-sub { white-space: normal; font-size: 14px; }
  .hero-bar { flex-wrap: wrap; padding: 10px; gap: 8px; }
  .hero-bar-sep { display: none; }
  .hero-bar-btn { width: 100%; justify-content: center; margin-left: 0; }
  .navbar-links { display: none; }
  .navbar-links.open {
    display: flex;
    position: absolute;
    top: 56px;
    left: 20px;
    right: 20px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 12px;
    flex-direction: column;
    gap: 10px;
  }
  .hamburger { display: inline-block; }
  .form-grid.two-col { grid-template-columns: 1fr; }
  .crew-form-grid2 { grid-template-columns: 1fr; }
  .crew-thankyou-popup { width: calc(100% - 24px); padding: 22px 16px 18px; }
  .crew-thankyou-title { font-size: 22px; }
  .crew-scroll-header {
    top: 0;
    padding: 8px 20px;
  }
}

/* Share Modal (FDS §5g) */
.crew-share-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 900;
}
.crew-share-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  width: 460px;
  max-width: calc(100% - 32px);
  z-index: 910;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.crew-share-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.crew-share-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--color-ink-strong); }
.crew-share-close {
  width: 28px; height: 28px; border: none; background: #f3f4f6;
  border-radius: 50%; font-size: 18px; cursor: pointer; display: grid; place-items: center;
}
.crew-share-close:hover { background: var(--color-border); }
.crew-share-url-row {
  display: flex; gap: 8px; margin-bottom: 20px;
}
.crew-share-url {
  flex: 1; background: #f9fafb; border: 1px solid var(--color-border); cursor: default;
}
.crew-share-copy {
  padding: 8px 14px; border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; font-weight: 600; font-size: 13px; cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
}
.crew-share-copy:hover { background: #f3f4f6; }
.crew-share-copied { color: var(--color-success); border-color: var(--color-success); }
.crew-share-social {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.crew-share-social-btn {
  padding: 10px 0; border: none; border-radius: 8px; color: #fff;
  font-weight: 600; font-size: 13px; cursor: pointer; transition: opacity 0.15s;
}
.crew-share-social-btn:hover { opacity: 0.88; }
.crew-sh-linkedin { background: #0077b5; }
.crew-sh-facebook { background: #1877f2; }
.crew-sh-x { background: #000000; }
.crew-sh-whatsapp { background: #25d366; }

@media (max-width: 768px) {
  .crew-share-modal { width: auto; left: 16px; right: 16px; transform: translate(0, -50%); }
  .crew-share-social { grid-template-columns: 1fr; }
}

/* ---- AI match justification on job cards ---- */

.rh-match-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 220px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #4b5563;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 9px;
  text-align: left;
}

.rh-match-gap {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.rh-match-gap .inline-icon {
  color: var(--color-warning);
}

.rh-match-reason .inline-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: #f59e0b;
}

/* ---- Apply form: AI auto-fill status ---- */

.crew-autofill-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-primary-hover);
  margin-top: 6px;
}

.crew-autofill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-light);
  animation: rh-ai-pulse 1.1s ease-in-out infinite;
}

.crew-autofill-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--or-ink);
  background: var(--or-soft);
  border: 1px solid var(--or-line);
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 6px;
  margin-bottom:10px;
}

.crew-autofill-note svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  color: var(--or);
}

/* ---- Apply form: resume-first upload step ---- */

.crew-upload-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 4px;
}

.crew-upload-intro {
  font-size: 13px;
  line-height: 1.55;
  color: #555555;
  margin: 0;
}

.crew-upload-step .crew-resume-drop {
  padding: 28px 16px;
}

.crew-manual-fill-link {
  background: none;
  border: none;
  align-self: center;
  padding: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: #0a66c2;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.crew-upload-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 36px 16px;
  border: 1.5px dashed #bfdbfe;
  border-radius: 8px;
  background: #f0f7ff;
}

.crew-upload-wait-inline {
  margin-top: 8px;
}

.crew-upload-wait .crew-autofill-dot {
  width: 12px;
  height: 12px;
}

.crew-upload-wait-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary-hover);
}

.crew-upload-wait-file {
  max-width: 100%;
  font-size: 12px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crew-upload-wait-hint {
  font-size: 11.5px;
  color: #64748b;
}

.crew-parse-timing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
}

.crew-parse-bolt {
  color: var(--color-warning);
}

/* ---- Apply form: prominent LinkedIn field ---- */

.crew-linkedin-field {
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px;
}

.crew-linkedin-field .crew-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0b66c2;
}

.crew-linkedin-field .crew-label .inline-icon {
  width: 15px;
  height: 15px;
}

.crew-linkedin-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #0b66c2;
  background: #dbeafe;
  border-radius: 9999px;
  padding: 2px 8px;
}

.crew-linkedin-hint {
  display: block;
  font-size: 11px;
  color: #475569;
  margin-top: 5px;
}

.crew-linkedin-nudge {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 7px 10px;
  margin-top: 6px;
}

/* ---- Apply form: relocation question ---- */

.crew-relocate-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #dbe4ef;
  background: #f8fbff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #1f2937;
  line-height: 1.45;
  cursor: pointer;
}

.crew-relocate-label:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}

.crew-relocate-checkbox {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: #0f766e;
  flex: 0 0 auto;
}

.crew-relocate-copy {
  display: block;
  color: var(--color-ink);
  font-weight: 500;
}

/* ---- Apply form: AI match summary ----
   Full form width rather than the job card's narrow 118px column, so the justification reads as
   a paragraph instead of a stack of clipped lines. Reuses .rh-match-ring for the dial so the
   score looks identical to the one on the job list. */

.crew-match-panel {
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.crew-match-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crew-match-head-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.crew-match-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
}

.crew-match-sub {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.5;
}

.crew-match-block {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.crew-match-block-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
}

.crew-match-block-label .inline-icon {
  color: #f59e0b;
  margin: 0;
}

.crew-match-text {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #334155;
}

.crew-match-block-gap {
  border-color: #fde68a;
  background: #fffbeb;
}

.crew-match-block-gap .crew-match-block-label {
  color: #92400e;
}

.crew-match-block-gap .crew-match-block-label .inline-icon {
  color: var(--color-warning);
}

.crew-match-block-gap .crew-match-text {
  color: #92400e;
}

/* ---- Job list: load failure banner ---- */

.rh-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff8f1;
  border: 1px solid #f5c48b;
  color: #7a3e06;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.8rem;
}

.rh-load-retry {
  border: 1px solid #cc7a00;
  background: #fff;
  color: #7a3e06;
  font-weight: 600;
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.rh-load-retry:hover {
  background: #fff3e4;
}

/* ---- Terms & Conditions page (/terms) ----
   Themed like the rest of the portal: dark hero band (same gradient family as .hero/.crew-hero)
   with the white logo and an orange eyebrow, white content card, orange-gradient CTA. */

.tw-terms-page {
  background: #fafafa;
  padding-bottom: 20px;
}

.tw-terms-hero {
  background: linear-gradient(175deg, #010407 0%, #02091c 25%, #050e24 50%, #08152e 72%, #0e1e3c 88%, #14263e 100%);
  padding: 52px 24px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tw-terms-hero-logo {
  height: 34px;
  margin-bottom: 22px;
  filter: drop-shadow(0 0 16px rgba(249, 115, 22, 0.25));
}

.tw-terms-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: #fb923c;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.tw-terms-title {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1.25;
  max-width: 720px;
  margin-bottom: 10px;
}

/* Blazor's FocusOnNavigate focuses the h1 on load; suppress the resulting outline. */
.tw-terms-title:focus,
.tw-terms-title:focus-visible {
  outline: none;
}

.tw-terms-updated {
  font-size: 12.5px;
  color: #94a3b8;
}

/* Card overlaps the banner like the job-detail logo box does */
.tw-terms-card {
  max-width: 1000px;
  margin: -32px auto 0;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 48px;
  box-shadow: 0 8px 32px rgba(2, 9, 28, 0.12);
  position: relative;
}

.tw-terms-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.tw-terms-back:hover { color: var(--color-ink-solid); }

.tw-terms-accepted-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--color-success-soft);
  border: 1px solid var(--color-success-line);
  color: var(--color-success-dark);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.tw-terms-accepted-banner .inline-icon { margin-top: 2px; }

.tw-terms-card h2 {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 28px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--color-accent);
}

.tw-terms-card p {
  font-size: 14px;
  color: #444444;
  line-height: 1.75;
  margin-bottom: 10px;
}

.tw-terms-card ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tw-terms-card li {
  font-size: 14px;
  color: #444444;
  line-height: 1.7;
}

.tw-terms-card ol {
  margin: 0 0 12px;
  padding-left: 24px;
}

.tw-terms-card ol li {
  padding-left: 4px;
  margin-bottom: 7px;
}

.tw-terms-section-eight h2 {
  margin-bottom: 14px;
}

.tw-terms-section-eight p:last-child {
  margin-top: 12px;
}

.tw-terms-danger {
  margin: 30px 0 4px;
  padding: 18px 20px 14px;
  background: #fff1f2;
  border-left: 4px solid var(--color-danger);
  border-radius: 0 10px 10px 0;
}

.tw-terms-danger h2 {
  margin-top: 0;
  color: #991b1b;
  border-left: 0;
  padding-left: 0;
}

.tw-terms-danger ul {
  margin-bottom: 0;
}

.tw-terms-danger li,
.tw-terms-danger li strong {
  color: #b42318;
}

.tw-terms-consent-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid #d1d5db;
  box-shadow: 0 -5px 18px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
}

.tw-terms-consent-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.tw-terms-consent-control {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.tw-terms-consent-control input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}

.tw-terms-consent-control strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink-strong);
}

.tw-terms-consent-button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  padding: 11px 18px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tw-terms-consent-button:disabled {
  background: #d1d5db;
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.tw-terms-card a { color: var(--color-accent-dark); font-weight: 600; }
.tw-terms-card a:hover { text-decoration: underline; }
.tw-terms-card a.tw-terms-back { color: var(--color-text-muted); }
.tw-terms-card a.tw-terms-back:hover { color: var(--color-ink-solid); text-decoration: none; }

.tw-terms-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #ebebeb;
}

/* Same gradient as the hero "Find Jobs" CTA */
.tw-terms-card a.tw-terms-accept-btn,
.tw-terms-accept-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 700;
}

.tw-terms-card a.tw-terms-accept-btn:hover,
.tw-terms-accept-btn:hover { text-decoration: none; filter: brightness(1.05); }

.tw-terms-card a.tw-terms-continue {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.tw-terms-card a.tw-terms-continue:hover { color: var(--color-ink-solid); text-decoration: none; }

/* Consent-line links (hero + apply form) */
.hero-gdpr-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-gdpr-link:hover { color: var(--color-primary-hover); }

.site-footer-link { color: #6b6b6b; }
.site-footer-link:hover { color: var(--color-ink-solid); text-decoration: underline; }

@media (max-width: 720px) {
  .tw-terms-page { padding-bottom: 150px; }
  .tw-terms-card { margin: -32px 16px 0; padding: 26px 20px; }
  .tw-terms-title { font-size: 22px; }
  .tw-terms-consent-inner { padding: 12px 16px; align-items: stretch; flex-direction: column; gap: 10px; }
  .tw-terms-consent-button { width: 100%; }
}

/* Textbox fetch state: green with a tick icon when a value exists, red/orange with an X icon
   when it is missing. Icons are inline SVG data-URIs painted as background images. */
.crew-input-fetch-ok,
.crew-input-fetch-missing,
.crew-input-fetch-optional {
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 18px 18px;
  padding-right: 38px;
}

.crew-input-fetch-ok {
  border-color: #4ade80;
  background-color: var(--color-success-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2322c55e'/%3E%3Cpath d='m7 12.4 3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.crew-input-fetch-missing {
  border-color: #f87171;
  background-color: #fef2f2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ef4444'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.crew-input-fetch-optional {
  border-color: #fdba74;
  background-color: #fff7ed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23f97316'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Hero error popup */
.hero-error-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 16px;
}

.hero-error-modal {
  text-align: center;
  width: min(520px, 100%);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.34);
  padding: 18px 18px 16px;
}

.hero-error-modal h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #ff2d2d;
  font-weight: 800;
}

.hero-error-modal p {
  margin: 0 0 14px;
  font-size: 14px;
  color: #334155;
  line-height: 1.45;
}

.hero-error-ok-btn {
width: 20%;
    min-height: 35px;
    border: none;
    border-radius: 10px;
    background: var(--color-ink-solid);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

body.jp-popup-open .navbar,
body.jp-popup-open .crew-scroll-header {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* "Sending your code" loader shown while the OTP request is in flight */
.otp-send-overlay {
  position: fixed;
  inset: 0;
  z-index: 1350;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(248, 250, 252, 0.72);
  backdrop-filter: blur(3px);
  animation: otpSendFade 180ms ease;
}

.otp-send-card {
  width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 26px 24px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 60px -24px rgba(14, 18, 38, 0.32);
  animation: otpSendIn 220ms cubic-bezier(.65, 0, .35, 1);
}

.otp-send-orb {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}

.otp-send-arc {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--blue);
  border-right-color: var(--violet);
  animation: otpSendSpin 0.9s linear infinite;
}

.otp-send-title {
  margin: 6px 0 0;
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--ink);
}

.otp-send-mail {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--ink-3);
}

.otp-send-mail strong {
  color: var(--ink);
  font-weight: 700;
}

.otp-send-dots {
  display: inline-flex;
  gap: 6px;
  margin-top: 6px;
}

.otp-send-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: otpSendDot 1.2s ease-in-out infinite;
}

.otp-send-dots i:nth-child(2) { animation-delay: 0.16s; }
.otp-send-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes otpSendSpin { to { transform: rotate(360deg); } }
@keyframes otpSendFade { from { opacity: 0; } }
@keyframes otpSendIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
}
@keyframes otpSendDot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .otp-send-overlay,
  .otp-send-card,
  .otp-send-arc,
  .otp-send-dots i { animation: none; }
}

/* OTP popup for resume upload verification */
.otp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(16, 24, 40, 0.5);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 12px;
  transition: opacity 220ms ease;
}

.otp-card-modal {
  width: min(400px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;
  transform: translateY(0) scale(1);
  transition: transform 220ms ease, opacity 220ms ease;
}

.otp-modal-open {
  opacity: 1;
}

.otp-modal-open .otp-card-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: otpModalIn 220ms ease;
}

.otp-modal-closing {
  opacity: 0;
}

.otp-modal-closing .otp-card-modal {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
}

.otp-card {
  background: #ffffff;
  border: 1px solid #e4e8f0;
  border-radius: 14px;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.otp-brand-strip {
  background:
    radial-gradient(circle at 88% 0%, rgba(59, 130, 246, 0.25), transparent 28%),
    linear-gradient(150deg, var(--color-ink) 0%, #16305e 60%, var(--color-ink-strong) 100%);
  border-bottom: 2px solid var(--color-primary);
  min-height: 156px;
  display: grid;
  place-items: center;
  gap: 9px;
  padding: 20px 16px 20px;
}

.otp-brand-logo {
  width: 100px;
  max-width: 84%;
  opacity: 0.95;
}

.otp-brand-shield {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-primary-light);
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  place-items: center;
}

.otp-brand-shield .inline-icon {
  width: 16px;
  height: 16px;
}

.otp-head {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.otp-head h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #f6f8fc;
  font-weight: 700;
}

.otp-head p {
  margin: 0;
  color: #c5cddd;
  font-size: 11px;
  line-height: 1.45;
}

.otp-head strong {
  color: var(--color-primary-light);
  font-weight: 700;
}

.otp-role-pill {
  justify-self: center;
  margin-top: 3px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #ecf1fb;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.otp-form {
  display: grid;
  gap: 10px;
  padding: 12px 18px 13px;
  background: #ffffff;
}

.otp-label-heading {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9.5px;
  color: #9aa5b8;
  font-weight: 700;
}

.otp-input-field {
  height: 40px;
  width: 100%;
  border: 1px solid #e2e8f2;
  background: #f9fbff;
  border-radius: 10px;
  display: block;
  padding: 0 12px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.34em;
  font-weight: 600;
  color: #9aa3b1;
  caret-color: var(--color-ink-strong);
  outline: none;
}

.otp-input-field::placeholder {
  letter-spacing: 0;
  font-size: 12px;
  color: #b8c1cf;
  font-weight: 600;
}

.otp-input-field:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  border-color: var(--color-primary-light);
}

.otp-code-box-active {
  border-color: var(--color-primary);
  color: #252627;
  background: #ffffff;
}

.otp-code-box-invalid {
  border-color: #f5b4b0;
  background: #fff4f3;
  color: #c0392b;
}

.otp-code-box-verified {
  border-color: #9dd9b2;
  background: #edfaf1;
  color: #157347;
}

.otp-status {
  margin: 0;
  border-radius: 10px;
  border: 1px solid;
    padding: 6px 6px;
    font-size: 10.5px;
    font-weight: 600;
}

.otp-status-neutral,
.otp-status-warning {
  border-color: var(--color-primary-line);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.otp-status-invalid {
  border-color: #f8c3c0;
  background: #fff3f2;
  color: #dc2626;
}

.otp-status-verified {
  border-color: #b8e7ca;
  background: #ecfaf1;
  color: var(--color-success-dark);
}

.otp-meta-line {
  margin: 0;
  text-align: center;
  font-size: 10.5px;
  color: #3d4044;
}

.otp-meta-line span {
  color: #b0b8c5;
}

.otp-row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.otp-btn {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 11.5px;
  min-height: 38px;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.otp-btn:hover {
  transform: translateY(-1px);
}

.otp-btn-primary {
  background: linear-gradient(180deg, #101218 0%, #0c0d12 100%);
  color: #f8fafc;
  box-shadow: 0 6px 16px rgba(15, 17, 24, 0.3);
  flex: 1 1 auto;
}

.otp-btn-primary:disabled {
  background: linear-gradient(180deg, var(--color-border) 0%, #dfe3e8 100%);
  color: #9aa3af;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.otp-btn-success {
  background: linear-gradient(180deg, #22c55e 0%, var(--color-success) 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.32);
  flex: 1 1 auto;
}

.otp-btn-cancel {
  background: #eff2f7;
  color: #374151;
  border-color: #e2e7ef;
  min-width: 86px;
}

.otp-hint {
  margin: -1px 0 0;
  color: #0f766e;
  font-size: 10.5px;
  text-align: center;
  font-weight: 600;
}

.otp-footer-note {
  margin: 3px 0 0;
  padding-top: 8px;
  border-top: 1px solid #edf1f7;
  text-align: center;
  color: #3d4044;
  font-size: 11px;
}

@keyframes otpModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .otp-card-modal {
    width: min(300px, 100%);
  }

  .otp-head h1 {
    font-size: 33px;
  }

  .otp-row {
    flex-wrap: wrap;
  }

  .otp-btn-cancel,
  .otp-btn-primary,
  .otp-btn-success {
    min-width: 100%;
  }

  .otp-btn {
    flex: 1 1 100%;
  }
}

/* ═══════════════════════════════════════════════════════
   HeroBanner — Techwaukee job-board hero
   All classes prefixed tw-hero__ to avoid collisions.
   ═══════════════════════════════════════════════════════ */

/* ── Tokens ── */
.tw-hero {
    --tw-ink:        #0e1226;
    --tw-ink-2:      #3d4260;
    --tw-ink-3:      #6c7290;
    --tw-mute:       #9aa0bb;
    --tw-line:       #e7e9f2;
    --tw-line-2:     #eff1f7;
    --tw-page:       #fbfcfe;
    --tw-blue:       var(--color-primary);
    --tw-blue-ink:   var(--color-primary-hover);
    --tw-blue-soft:  var(--color-primary-soft);
    --tw-blue-line:  var(--color-primary-line);
    --tw-violet:     #7c5cf0;
    --tw-violet-soft:#f0edfe;
    --tw-cyan:       #0aa5c4;
    --tw-cyan-soft:  #e8f7fa;
    --tw-ok:         #0f9d63;
    --tw-ok-soft:    #e8f8f0;
    --tw-amber:      #c07d09;
    --tw-bad:        #d3372c;
    --tw-bad-soft:   #fdeceb;
    --tw-bad-text:   #a32b22;

    --tw-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --tw-font-ui:      'Inter', system-ui, -apple-system, sans-serif;

    --tw-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── Hero container ── */
.tw-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 50px 32px;
    text-align: center;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 55%, var(--page) 100%);
    border-bottom: 1px solid var(--tw-line-2);
    overflow: hidden;
    font-family: var(--tw-font-ui);
    color: var(--tw-ink-2);
    box-sizing: border-box;
}

/* Matched-jobs state: the success message is much shorter than the search form, so the
   70vh min-height leaves a large blank gap before the job list — collapse it here. */
.tw-hero--compact {
    min-height: auto;
    padding: 140px 32px 32px;
}

/* Square grid layer */
.tw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(14,18,38,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14,18,38,.055) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: center;
    -webkit-mask-image:
        radial-gradient(68% 56% at 50% 46%, transparent 0%, transparent 46%, #000 80%),
        linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.22) 82%, transparent 96%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(68% 56% at 50% 46%, transparent 0%, transparent 46%, #000 80%),
        linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.22) 82%, transparent 96%);
    mask-composite: intersect;
}

/* Colour wash layer */
.tw-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(46% 60% at 8% 6%, rgba(59,108,246,.10), transparent 68%),
      radial-gradient(40% 56% at 96% 10%, rgba(124,92,240,.09), transparent 68%);
}

/* ── Content ── */
.tw-hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    gap: 27px;
}

/* Kept mounted at all times (toggled via hidden) so hero-banner.js's cached element
   references never go stale; needs the same flex layout .tw-hero__content used to give it. */
.tw-hero__form-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 27px;
}
.tw-hero__form-wrap[hidden] {
    display: none;
}

/* ── Headline ── */
.tw-hero__headline {
    font-family: var(--tw-font-display);
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.045em;
    color: var(--tw-ink);
    margin: 0;
}

/* Blazor's FocusOnNavigate programmatically focuses this h1 for screen readers;
   suppress the resulting visible outline since it isn't a real keyboard focus stop. */
.tw-hero__headline:focus {
    outline: none;
}

.tw-hero__gradient {
    background: linear-gradient(100deg, var(--tw-blue), var(--tw-violet));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Sub-line ── */
.tw-hero__subline {
    font-size: 18px;
    font-weight: 400;
    color: var(--tw-ink-3);
    margin: 0;
    max-width: 700px;
    line-height: 1.55;
}

/* ── Trust row ── */
.tw-hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 32px;
    margin-top: 4px;
}

.tw-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tw-hero__medallion {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        inset 0 0 0 1px rgba(14,18,38,.04),
        0 4px 12px -6px rgba(14,18,38,.30);
    transition: transform 180ms var(--tw-ease);
}
.tw-hero__medallion:hover {
    transform: translateY(-2px);
}

.tw-hero__medallion--ok     { color: var(--tw-ok);     background: var(--tw-ok-soft); }
.tw-hero__medallion--blue   { color: var(--tw-blue);   background: var(--tw-blue-soft); }
.tw-hero__medallion--violet { color: var(--tw-violet);  background: var(--tw-violet-soft); }
.tw-hero__medallion--cyan   { color: var(--tw-cyan);   background: var(--tw-cyan-soft); }

.tw-hero__trust-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tw-ink);
}

/* ── Search bar ── */
.tw-hero__bar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1080px;
    background: #fff;
    border-radius: 999px;
    padding: 8px;
    border: 1px solid var(--tw-line-2);
    box-shadow:
        0 2px 6px rgba(14,18,38,.05),
        0 18px 40px -14px rgba(14,18,38,.18),
        0 44px 88px -34px rgba(14,18,38,.26);
    transition: border-color 180ms var(--tw-ease), box-shadow 180ms var(--tw-ease);
    box-sizing: border-box;
}

.tw-hero__bar:focus-within {
    border-color: var(--tw-blue-line);
    box-shadow:
        0 0 0 4px rgba(59,108,246,.10),
        0 2px 6px rgba(14,18,38,.05),
        0 18px 40px -14px rgba(14,18,38,.18),
        0 44px 88px -34px rgba(14,18,38,.26);
}

.tw-hero__bar--error {
    border-color: #f85646  !important;
 
}

/* ── Email segment ── */
.tw-hero__email {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    min-width: 0;
}

.tw-hero__email-icon {
    flex-shrink: 0;
    color: var(--tw-mute);
}

.tw-hero__email-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--tw-font-ui);
    font-size: 16px;
    color: var(--tw-ink);
    min-width: 0;
}
.tw-hero__email-input::placeholder {
    color: var(--tw-mute);
}

.tw-hero__email--error {
    box-shadow: inset 0 0 0 1.5px var(--tw-bad);
    border-radius: 999px;
}

/* ── Divider ── */
.tw-hero__divider {
    width: 1px;
    height: 34px;
    background: var(--tw-line);
    flex-shrink: 0;
}

/* ── Upload segment ── */
.tw-hero__upload {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 290px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tw-blue);
    cursor: pointer;
    border-radius: 999px;
    transition: color 180ms var(--tw-ease), background 180ms var(--tw-ease), box-shadow 180ms var(--tw-ease);
    user-select: none;
    position: relative;
}

.tw-hero__upload:hover:not(.tw-hero__upload--locked) {
    background: var(--tw-blue-soft);
}

/* Hidden by default — toggled by JS state classes */
.tw-hero__upload-tick,
.tw-hero__upload-name,
.tw-hero__upload-size,
.tw-hero__upload-remove { display: none; }
.tw-hero__upload-lock   { display: none; margin-left: auto; }

/* Label + size hint stacked inside the upload control */
.tw-hero__upload-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
}
.tw-hero__upload-hint {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--tw-mute);
    white-space: nowrap;
    margin-top:4px;
}

/* Locked state */
.tw-hero__upload--locked {
    color: var(--tw-mute);
    cursor: default;
    pointer-events: auto;
}
.tw-hero__upload--locked .tw-hero__upload-lock {
    display: flex;
}

/* Has-file state */
.tw-hero__upload--has-file {
    color: var(--tw-ok);
}
.tw-hero__upload--has-file .tw-hero__upload-doc,
.tw-hero__upload--has-file .tw-hero__upload-text,
.tw-hero__upload--has-file .tw-hero__upload-label { display: none; }
.tw-hero__upload--has-file .tw-hero__upload-tick  { display: flex; }
.tw-hero__upload--has-file .tw-hero__upload-name  { display: inline-block; }
.tw-hero__upload--has-file .tw-hero__upload-size  { display: inline-block; }
.tw-hero__upload--has-file .tw-hero__upload-remove { display: inline-flex; }

.tw-hero__upload-name {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    font-size: 14px;
}

.tw-hero__upload-size {
    font-size: 13px;
    font-weight: 400;
    color: var(--tw-mute);
    white-space: nowrap;
}

.tw-hero__upload-remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(14,18,38,.06);
    color: var(--tw-ink-3);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    transition: background 160ms var(--tw-ease), color 160ms var(--tw-ease);
}
.tw-hero__upload-remove:hover {
    background: rgba(14,18,38,.12);
    color: var(--tw-ink);
}

.tw-hero__upload--error {
    box-shadow: inset 0 0 0 1.5px var(--tw-bad);
    border-radius: 999px;
    margin-right:5px;
}

/* ── Submit button ── */
.tw-hero__submit {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 16px 32px;
    background: var(--tw-blue);
    color: #fff;
    font-family: var(--tw-font-ui);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 180ms var(--tw-ease), box-shadow 180ms var(--tw-ease);
    box-shadow: 0 4px 14px -4px rgba(59,108,246,.45);
}
.tw-hero__submit:hover {
    background: var(--tw-blue-ink);
}
.tw-hero__submit:focus-visible {
    outline: 2px solid var(--tw-blue);
    outline-offset: 2px;
}

/* ── Consent line ── */
.tw-hero__consent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    transition: color 220ms var(--tw-ease);
}

.tw-hero__consent-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: var(--tw-ink-2);
    user-select: none;
}

.tw-hero__cb-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tw-hero__cb-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #c6cade;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    transition: background 160ms var(--tw-ease), border-color 160ms var(--tw-ease), box-shadow 160ms var(--tw-ease);
}
.tw-hero__cb-box svg {
    opacity: 0;
    transition: opacity 160ms var(--tw-ease);
}

.tw-hero__cb-input:checked + .tw-hero__cb-box {
    background: var(--tw-blue);
    border-color: var(--tw-blue);
}
.tw-hero__cb-input:checked + .tw-hero__cb-box svg {
    opacity: 1;
}

.tw-hero__cb-input:focus-visible + .tw-hero__cb-box {
    outline: 2px solid var(--tw-blue);
    outline-offset: 2px;
}

.tw-hero__required-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--tw-blue-soft);
    color: var(--tw-blue-ink);
    line-height: 1;
    white-space: nowrap;
}

.tw-hero__consent-text {
    font-size: 14px;
    color: var(--tw-ink-2);
}

.tw-hero__terms-link {
    color: var(--tw-blue-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: color 160ms var(--tw-ease);
}
.tw-hero__terms-link:hover {
    color: var(--tw-blue);
}

/* Consent accepted */
.tw-hero__consent--accepted .tw-hero__consent-text {
    color: var(--tw-ok);
}
.tw-hero__consent--accepted .tw-hero__required-tag {
    display: none;
}

/* Consent flash — a brief shake when a locked upload is clicked */
.tw-hero__consent--flash {
    animation: tw-shake 400ms var(--tw-ease);
}

/* Consent error — persists (no auto-fade) while terms remain unchecked after a failed submit */
.tw-hero__consent--error .tw-hero__consent-text,
.tw-hero__consent--error .tw-hero__consent-label,
.tw-hero__consent--flash .tw-hero__consent-text,
.tw-hero__consent--flash .tw-hero__consent-label {
    color: var(--tw-amber);
}
.tw-hero__consent--error .tw-hero__cb-box,
.tw-hero__consent--flash .tw-hero__cb-box {
    border-color: var(--tw-amber) !important;
    box-shadow: 0 0 0 4px rgba(192,125,9,.14);
}

.tw-hero__consent--error .tw-hero__required-tag,
.tw-hero__consent--flash .tw-hero__required-tag {
    background: var(--tw-bad-soft);
    color: var(--tw-bad-text);
}

/* ── Validation errors ── */
.tw-hero__errors {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 300ms var(--tw-ease), opacity 220ms var(--tw-ease);
    width: 100%;
    max-width: 1080px;
    margin: -16px auto 0;
    padding-left: 6px;
    text-align: left;
}
.tw-hero__errors--visible {
    max-height: 200px;
    opacity: 1;
}

.tw-hero__error-msg {
    display: block;
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tw-bad);
     padding-left: 20px;
}

/* ══════════════════════════════════════════════════════
   Animations
   ══════════════════════════════════════════════════════ */
@keyframes tw-shake {
    0%, 100% { transform: translateX(0); }
    12%  { transform: translateX(-6px); }
    28%  { transform: translateX(5px); }
    44%  { transform: translateX(-4px); }
    60%  { transform: translateX(3px); }
    76%  { transform: translateX(-2px); }
    92%  { transform: translateX(1px); }
}

@keyframes tw-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   Responsive — below 760px
   ══════════════════════════════════════════════════════ */
@media (max-width: 759px) {
    .tw-hero {
        min-height: auto;
        padding: 48px 20px;
    }

    .tw-hero__headline {
        font-size: 32px;
    }

    .tw-hero__subline {
        font-size: 16px;
    }

    .tw-hero__bar {
        flex-direction: column;
        border-radius: 20px;
        padding: 8px;
        gap: 8px;
    }

    .tw-hero__email {
        width: 100%;
        border: 1px solid var(--tw-line-2);
        border-radius: 14px;
        padding: 14px 16px;
        box-sizing: border-box;
    }

    .tw-hero__divider {
        display: none;
    }

    .tw-hero__upload {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--tw-line-2);
        border-radius: 14px;
        padding: 14px 16px;
        box-sizing: border-box;
    }

    .tw-hero__submit {
        width: 100%;
        border-radius: 14px;
    }

    .tw-hero__consent {
        flex-direction: column;
        gap: 8px;
    }
}

/* ══════════════════════════════════════════════════════
   Reduced motion
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .tw-hero *, .tw-hero *::before, .tw-hero *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ── Candidate photo: compact single row ── */
.cp-photo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-top: 4px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    transition: border-color .15s, background .15s;
}
.cp-photo:hover {
    border-color: #93c5fd;
    background: #f5f9ff;
}

/* Avatar — clickable, shows preview once selected */
.cp-photo-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    cursor: pointer;
    margin: 0;
}
.cp-photo-avatar svg { width: 22px; height: 22px; }
.cp-photo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Title + hint / file name */
.cp-photo-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cp-photo-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}
.cp-photo-optional {
    font-weight: 400;
    font-size: 12px;
    color: #94a3b8;
}
.cp-photo-hint {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Selected file chip */
.cp-photo-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    width: fit-content;
    padding: 2px 4px 2px 10px;
    font-size: 12px;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
}
.cp-photo-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.cp-photo-remove {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: #64748b;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.cp-photo-remove:hover { background: #fee2e2; color: #dc2626; }

/* Upload / Change button */
.cp-photo-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #1e40af;
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.cp-photo-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.cp-photo-btn svg { width: 15px; height: 15px; }

/* Keyboard focus on the hidden input shows on the button */
.cp-photo:focus-within .cp-photo-btn {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.cp-photo-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #dc2626;
}

/* Small phones: button drops under the text */
@media (max-width: 480px) {
    .cp-photo { flex-wrap: wrap; }
    .cp-photo-btn { width: 100%; justify-content: center; }
    .cp-photo-file-name { max-width: 160px; }
}