@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/dm-sans-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/instrument-serif-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/instrument-serif-latin-italic.woff2") format("woff2")}

/* MiloJobs application design system: a warm, editorial paper surface with precise product UI. */
:root {
  --mj-ink: #162237;
  --mj-muted: #526579;
  --mj-paper: #f8f7f3;
  --mj-surface: #ffffff;
  --mj-evergreen: #176b53;
  --mj-evergreen-hover: #125741;
  --mj-line: #dce5e0;
  --mj-soft: #edf5f1;
  --mj-font: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mj-display: 'DM Sans', system-ui, sans-serif;
  --mj-shadow: 0 14px 38px rgba(23, 44, 36, .055);
}

html:has(#workspace-navigation) {
  --milo-canvas: var(--mj-paper) !important;
  --milo-surface: var(--mj-surface) !important;
  --milo-card: var(--mj-surface) !important;
  --milo-soft: var(--mj-soft) !important;
  --milo-ink: var(--mj-ink) !important;
  --milo-muted: var(--mj-muted) !important;
  --milo-border: var(--mj-line) !important;
  --milo-brand: var(--mj-evergreen) !important;
  --milo-primary: var(--mj-evergreen) !important;
  --milo-on-brand: #fff !important;
  --milo-brand-hover: var(--mj-evergreen-hover) !important;
  --milo-ring: rgba(23, 107, 83, .18) !important;
  color-scheme: light;
  accent-color: var(--mj-evergreen);
  scroll-behavior: smooth;
}

html:has(#workspace-navigation) body,
html:has(#workspace-navigation) .milo-workspace,
html:has(#workspace-navigation) #workspace-main,
html:has(#workspace-navigation) #workspace-navigation {
  font-family: var(--mj-font) !important;
}
html:has(#workspace-navigation) body,
html:has(#workspace-navigation) .milo-workspace,
html:has(#workspace-navigation) #workspace-main {
  background: var(--mj-paper) !important;
  color: var(--mj-ink) !important;
}
html:has(#workspace-navigation) body { overflow-x: clip; }
html:has(#workspace-navigation) #workspace-main { min-width: 0; max-width: 100%; }
html:has(#workspace-navigation) #workspace-main > div.mx-auto {
  width: 100%;
  max-width: 1260px !important;
  padding-top: 34px !important;
  padding-bottom: 64px !important;
}

/* Calm fixed navigation, strong section grouping and a clear current location. */
html:has(#workspace-navigation) #workspace-navigation {
  background: var(--mj-surface) !important;
  color: var(--mj-ink) !important;
  border-color: var(--mj-line) !important;
  box-shadow: 2px 0 22px rgba(22, 34, 55, .035) !important;
}
html:has(#workspace-navigation) #workspace-navigation > div:first-child,
html:has(#workspace-navigation) #workspace-navigation nav {
  background: var(--mj-surface) !important;
  border-color: var(--mj-line) !important;
}
html:has(#workspace-navigation) #workspace-navigation .milo-nav-group-heading {
  color: #78867f !important;
  font-family: var(--mj-font) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .12em !important;
}
html:has(#workspace-navigation) #workspace-navigation nav a {
  min-height: 40px;
  border-radius: 9px !important;
  color: #425268 !important;
  font-family: var(--mj-font) !important;
  font-size: 13px;
  font-weight: 550;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}
html:has(#workspace-navigation) #workspace-navigation nav a:hover:not([aria-current="page"]) {
  background: #f4f7f5 !important;
  color: var(--mj-evergreen) !important;
}
html:has(#workspace-navigation) #workspace-navigation nav a[aria-current="page"] {
  background: #eaf4ef !important;
  color: #145941 !important;
  box-shadow: inset 3px 0 var(--mj-evergreen) !important;
  font-weight: 700 !important;
}
html:has(#workspace-navigation) #workspace-navigation a[aria-label="Milo home"] {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap;
}
html:has(#workspace-navigation) #workspace-navigation a[aria-label="Milo home"]::after {
  content: 'MiloJobs';
  color: var(--mj-ink);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.045em;
}
html:has(#workspace-navigation) #workspace-navigation .milo-logo-image {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}
html:has(#workspace-navigation) #workspace-navigation .milo-workspace-account,
html:has(#workspace-navigation) #milo-workspace-device-tools {
  background: var(--mj-surface) !important;
  color: var(--mj-ink) !important;
  border-color: var(--mj-line) !important;
  border-radius: 12px !important;
}

/* Header: subtle translucent surface, stable status chips and concise breadcrumb. */
html:has(#workspace-navigation) #workspace-main > .sticky {
  background: rgba(255,255,255,.94) !important;
  color: var(--mj-ink) !important;
  border-color: var(--mj-line) !important;
  backdrop-filter: blur(12px);
}
html:has(#workspace-navigation) #workspace-main > .sticky a,
html:has(#workspace-navigation) #workspace-main > .sticky span {
  border-radius: 8px;
}

/* Refined display hierarchy and readable supporting copy. */
html:has(#workspace-navigation) #workspace-main h1,
html:has(#workspace-navigation) #workspace-main h1.font-display {
  color: var(--mj-ink) !important;
  font-family: var(--mj-display) !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  font-weight: 750 !important;
  line-height: 1.13 !important;
  letter-spacing: -.045em !important;
  opacity: 1 !important;
}
html:has(#workspace-navigation) #workspace-main h2 {
  color: var(--mj-ink) !important;
  font-family: var(--mj-display) !important;
  font-size: clamp(20px, 2vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.03em !important;
  opacity: 1 !important;
}
html:has(#workspace-navigation) #workspace-main h3,
html:has(#workspace-navigation) #workspace-main h4,
html:has(#workspace-navigation) #workspace-main h5,
html:has(#workspace-navigation) #workspace-main h6 {
  color: var(--mj-ink) !important;
  font-family: var(--mj-font) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  opacity: 1 !important;
}
html:has(#workspace-navigation) #workspace-main :is(strong, b, dt, th) { color: var(--mj-ink) !important; }
html:has(#workspace-navigation) #workspace-main :is(p, li, dd, td, small, label, legend) {
  color: var(--mj-muted) !important;
  line-height: 1.65;
  opacity: 1 !important;
}

/* Cards and data panels: consistent radius, fine borders and quiet elevation. */
html:has(#workspace-navigation) #workspace-main :is(section, article, .milo-job-card, .milo-billing-card, .milo-card) {
  border-color: var(--mj-line) !important;
  border-radius: 15px !important;
}
html:has(#workspace-navigation) #workspace-main .rounded-xl,
html:has(#workspace-navigation) #workspace-main .rounded-2xl,
html:has(#workspace-navigation) #workspace-main .rounded-3xl {
  border-radius: 14px !important;
}
html:has(#workspace-navigation) #workspace-main :is(.bg-white, .bg-stone-50, .bg-stone-100) {
  border-color: var(--mj-line) !important;
}
html:has(#workspace-navigation) #workspace-main :is(.border-stone-200, .border-stone-300) { border-color: var(--mj-line) !important; }
html:has(#workspace-navigation) #workspace-main :is(.milo-coming-soon, .milo-upcoming-card) {
  background: #f1f5f3 !important;
  color: #607268 !important;
  border-color: var(--mj-line) !important;
  border-radius: 12px !important;
}

/* Inputs, selects, toggles and buttons retain their existing application behaviour. */
html:has(#workspace-navigation) #workspace-main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px !important;
  border: 1px solid #d3dfd9 !important;
  border-radius: 10px !important;
  background: var(--mj-surface) !important;
  color: var(--mj-ink) !important;
  font: 500 14px/1.5 var(--mj-font) !important;
  box-shadow: 0 1px 2px rgba(22,34,55,.025);
}
html:has(#workspace-navigation) #workspace-main textarea { min-height: unset !important; }
html:has(#workspace-navigation) #workspace-main :is(input, textarea)::placeholder { color: #82908a !important; opacity: 1 !important; }
html:has(#workspace-navigation) #workspace-main :is(input, select, textarea):focus {
  border-color: var(--mj-evergreen) !important;
  box-shadow: 0 0 0 3px rgba(23,107,83,.13) !important;
}
html:has(#workspace-navigation) #workspace-main button { font-family: var(--mj-font) !important; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
html:has(#workspace-navigation) #workspace-main .milo-primary,
html:has(#workspace-navigation) #workspace-main .milo-guide-button,
html:has(#workspace-navigation) #workspace-main :is(button, a)[class*="bg-indigo"],
html:has(#workspace-navigation) #workspace-main :is(button, a)[class*="bg-violet"] {
  border: 1px solid var(--mj-evergreen) !important;
  border-radius: 10px !important;
  background: var(--mj-evergreen) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(23,107,83,.14) !important;
}
html:has(#workspace-navigation) #workspace-main .milo-primary *,
html:has(#workspace-navigation) #workspace-main .milo-guide-button *,
html:has(#workspace-navigation) #workspace-main :is(button, a)[class*="bg-indigo"] *,
html:has(#workspace-navigation) #workspace-main :is(button, a)[class*="bg-violet"] * { color: #fff !important; }
html:has(#workspace-navigation) #workspace-main .milo-primary:hover:not(:disabled),
html:has(#workspace-navigation) #workspace-main .milo-guide-button:hover {
  background: var(--mj-evergreen-hover) !important;
  border-color: var(--mj-evergreen-hover) !important;
  transform: translateY(-1px);
}
html:has(#workspace-navigation) #workspace-main .milo-secondary {
  border: 1px solid var(--mj-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--mj-ink) !important;
}
html:has(#workspace-navigation) #workspace-main :is(button, a)[class*="bg-stone-900"],
html:has(#workspace-navigation) #workspace-main :is(button, a)[class*="bg-stone-800"] {
  border-radius: 9px !important;
  background: var(--mj-soft) !important;
  color: #263b32 !important;
}
html:has(#workspace-navigation) #workspace-main :is(button, a)[aria-pressed="true"],
html:has(#workspace-navigation) #workspace-main :is(button, a)[aria-selected="true"] {
  background: #eaf4ef !important;
  color: #145941 !important;
  border-color: #bdd8ca !important;
}
html:has(#workspace-navigation) #workspace-main a:not([class*="bg-"]) {
  color: #176b53 !important;
  text-underline-offset: 3px;
}
html:has(#workspace-navigation) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--mj-evergreen) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(23,107,83,.12) !important;
}
html:has(#workspace-navigation) #workspace-main [role="status"],
html:has(#workspace-navigation) #workspace-main [role="alert"] { border-radius: 12px !important; }
html:has(#workspace-navigation) #workspace-main table { max-width: 100%; }
html:has(#workspace-navigation) #workspace-main [role="tablist"] { gap: 6px; }
html:has(#workspace-navigation) #workspace-main details > summary { cursor: pointer; }
html:has(#workspace-navigation) .milo-guide-button {
  right: 24px !important;
  bottom: 24px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 26px rgba(18,55,40,.16) !important;
}

/* User-selected dark appearance keeps the same hierarchy and accessible contrast. */
html:has(#workspace-navigation)[data-theme*="dark"] {
  --mj-paper: #101b1b;
  --mj-surface: #192b2a;
  --mj-soft: #253d38;
  --mj-ink: #f0f7f4;
  --mj-muted: #b9ccc6;
  --mj-line: #3b5750;
  --mj-evergreen: #70c7a3;
  --mj-evergreen-hover: #8bdfc0;
  --milo-on-brand: #10291f !important;
  color-scheme: dark;
}
html:has(#workspace-navigation)[data-theme*="dark"] #workspace-navigation a[aria-label="Milo home"]::after { color: #f0f7f4; }
html:has(#workspace-navigation)[data-theme*="dark"] #workspace-main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: #192b2a !important;
  color: #f0f7f4 !important;
  border-color: #3b5750 !important;
}
html:has(#workspace-navigation)[data-theme*="dark"] #workspace-main :is(button, a)[aria-pressed="true"],
html:has(#workspace-navigation)[data-theme*="dark"] #workspace-main :is(button, a)[aria-selected="true"] {
  background: #253d38 !important;
  color: #c5f1dc !important;
}

@media (max-width: 1023px) {
  html:has(#workspace-navigation) #workspace-main > div.mx-auto { padding: 26px 22px 52px !important; }
}
@media (max-width: 640px) {
  html:has(#workspace-navigation) #workspace-main > div.mx-auto { padding: 22px 16px 48px !important; }
  html:has(#workspace-navigation) #workspace-main h1,
  html:has(#workspace-navigation) #workspace-main h1.font-display { font-size: 30px !important; }
  html:has(#workspace-navigation) #workspace-main :is(section, article) { max-width: 100%; }
  html:has(#workspace-navigation) .milo-guide-button { right: 14px !important; bottom: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(#workspace-navigation) *, html:has(#workspace-navigation) *::before, html:has(#workspace-navigation) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* Respect the user's global appearance choice on all static public and workspace pages. */
html[data-theme="milo-dark"],html[data-theme="dark"],html[data-theme*="dark"]{
 color-scheme:dark!important;
 --mj-paper:#101b1b!important;--mj-surface:#192b2a!important;--mj-soft:#253d38!important;
 --mj-ink:#f0f7f4!important;--mj-muted:#bdcec8!important;--mj-line:#3b5750!important;
 --mj-evergreen:#70c7a3!important;--mj-evergreen-hover:#8bdfc0!important;
 --milo-canvas:#101b1b!important;--milo-surface:#192b2a!important;--milo-card:#1d312f!important;
 --milo-soft:#253d38!important;--milo-ink:#f0f7f4!important;--milo-muted:#bdcec8!important;
 --milo-border:#3b5750!important;--milo-brand:#70c7a3!important;--milo-primary:#70c7a3!important;
 --milo-on-brand:#10291f!important;--milo-brand-hover:#8bdfc0!important;--milo-ring:rgba(112,199,163,.3)!important;
}
html[data-theme="milo-light"],html[data-theme="light"]{
 color-scheme:light!important;
 --mj-paper:#f8f7f3!important;--mj-surface:#fff!important;--mj-soft:#edf5f1!important;
 --mj-ink:#162237!important;--mj-muted:#526579!important;--mj-line:#dce5e0!important;
 --mj-evergreen:#176b53!important;--mj-evergreen-hover:#125741!important;
 --milo-canvas:#f9faf8!important;--milo-surface:#fff!important;--milo-card:#fff!important;
 --milo-soft:#edf5f1!important;--milo-ink:#15243a!important;--milo-muted:#526579!important;
 --milo-border:#dce7e2!important;--milo-brand:#176b53!important;--milo-primary:#176b53!important;
 --milo-on-brand:#fff!important;--milo-brand-hover:#125741!important;
}

/* Public pages use the same storage-driven html[data-theme] setting as the workspace. */
html[data-theme*="dark"] body:not(:has(#workspace-navigation)){
 background:#101b1b!important;color:#f0f7f4!important;color-scheme:dark!important;
}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .milo-public-page,
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) main,
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) footer,
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) header{
 background-color:#101b1b!important;color:#f0f7f4!important;border-color:#3b5750!important;
}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(h1,h2,h3,h4,h5,h6,strong,b,dt,th,legend,label,summary){color:#f0f7f4!important;opacity:1!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(p,li,dd,td,small){color:#bdcec8!important;opacity:1!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(a:not([class*="bg-"]),.milo-text-link){color:#8bdfc0!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(.milo-search-panel,.milo-sponsorship-options,.milo-job-card,.milo-results,.milo-search-next,.milo-card,.milo-tool-card,.milo-pricing-card,.milo-public-card,.milo-company-search,.milo-advert-preview){background:#192b2a!important;color:#f0f7f4!important;border-color:#3b5750!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(input,select,textarea){background:#142322!important;color:#f0f7f4!important;border-color:#46625a!important;color-scheme:dark!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(input,textarea)::placeholder{color:#a7bdb5!important;opacity:1!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(button,a)[class*="milo-secondary"],html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .btn:not(.btn-primary){background:#253d38!important;color:#e5f4ed!important;border-color:#4b6a5e!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(.milo-primary,.btn-primary,.milo-guide-button){background:#70c7a3!important;color:#10291f!important;border-color:#70c7a3!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .milo-primary *,html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .btn-primary *{color:#10291f!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .milo-public-header{background:rgba(16,27,27,.96)!important;border-color:#3b5750!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(.milo-public-footer,.milo-footer-grid){background:#101b1b!important;border-color:#3b5750!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) hr{border-color:#3b5750!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is([class*="bg-white"],[class*="bg-stone-50"],[class*="bg-stone-100"],[class*="bg-emerald-50"],[class*="bg-green-50"]){background-color:#192b2a!important;border-color:#3b5750!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(.text-stone-900,.text-stone-800,.text-gray-900,.text-slate-900){color:#f0f7f4!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(.text-stone-700,.text-stone-600,.text-stone-500,.text-gray-600,.text-slate-600){color:#bdcec8!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) :is(.border-stone-200,.border-stone-300,.border-gray-200){border-color:#3b5750!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .milo-appearance-trigger,
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .milo-appearance [role="dialog"],
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .milo-appearance [role="menu"],
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) #appearance-panel{background:#192b2a!important;color:#f0f7f4!important;border-color:#3b5750!important}
html[data-theme*="dark"] body:not(:has(#workspace-navigation)) .milo-appearance :is(button,label,span,p){color:#f0f7f4!important}

/* Prevent utility classes and fixed light-surface overrides from camouflaging text in app routes. */
html[data-theme*="dark"]:has(#workspace-navigation) body,
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main,
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-navigation,
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main>.sticky{background-color:#101b1b!important;color:#f0f7f4!important;color-scheme:dark!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-navigation,
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-navigation nav,
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-navigation>div:first-child,
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-navigation .milo-workspace-account,
html[data-theme*="dark"]:has(#workspace-navigation) #milo-workspace-device-tools{background:#192b2a!important;color:#f0f7f4!important;border-color:#3b5750!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main :is(h1,h2,h3,h4,h5,h6,strong,b,dt,th,legend,label,summary){color:#f0f7f4!important;opacity:1!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main :is(p,li,dd,td,small){color:#bdcec8!important;opacity:1!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main :is(section,article,.bg-white,.bg-stone-50,.bg-stone-100,[class*="bg-stone-9"],[class*="bg-stone-8"],[class*="bg-emerald-9"],[class*="bg-green-9"]){background:#192b2a!important;color:#f0f7f4!important;border-color:#3b5750!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){background:#142322!important;color:#f0f7f4!important;border-color:#46625a!important;color-scheme:dark!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main :is(input,textarea)::placeholder{color:#a7bdb5!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main a:not([class*="bg-"]){color:#8bdfc0!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main .milo-primary,
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main .milo-guide-button,
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main :is(button,a)[class*="bg-indigo"],
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main :is(button,a)[class*="bg-violet"]{background:#70c7a3!important;color:#10291f!important;border-color:#70c7a3!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main .milo-primary *,html[data-theme*="dark"]:has(#workspace-navigation) #workspace-main .milo-guide-button *{color:#10291f!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-navigation nav a{color:#d0e1da!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-navigation nav a[aria-current="page"]{background:#253d38!important;color:#a6e4c6!important}
html[data-theme*="dark"]:has(#workspace-navigation) #workspace-navigation a[aria-label="Milo home"]::after{color:#f0f7f4!important}