:root {
  font-family: Zain, Tahoma, sans-serif;
  font-size: 19px;
  color: #173640;
  background: #f2f7f6;
  --ink: #173640;
  --deep: #0d2935;
  --accent: #008d76;
  --line: #dce9e6;
}
body, button, input, select, textarea { font-family: Zain, Tahoma, sans-serif; }
body { line-height: 1.55; background: #f2f7f6; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #27caa9; outline-offset: 3px; }
.muted { color: #647e84; }
.surface { border-color: var(--line); border-radius: 20px; box-shadow: 0 14px 35px rgba(23,54,64,.055); }
.btn { border-radius: 12px; min-height: 48px; font-size: .95rem; padding: .58rem 1.2rem; }
.btn.primary { background: #008d76; box-shadow: 0 8px 18px rgba(0,141,118,.16); }
.btn.primary:hover { background: #00735f; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(0,141,118,.25); }
.btn.outline { border-color: #bfd4cf; }
.btn.small { min-height: 39px; font-size: .85rem; }
.brand-mark { border-radius: 16px; background: linear-gradient(145deg,#00aa8c,#007e71); box-shadow: 0 12px 25px rgba(0,141,118,.28); }
.brand-mark.small-mark { border-radius: 11px; }
.eyebrow, .page-kicker { color: #008d76; font-size: .83rem; letter-spacing: 0; }
.badge { border-radius: 999px; font-size: .76rem; padding: .15rem .62rem; }
.badge.warning { background: #fff0cf; color: #8c5812; }
.empty { padding: 2.5rem 1rem; }
.empty h3 { font-size: 1.15rem; }
.empty p { font-size: .89rem; }
.empty-icon { width: 54px; height: 54px; border-radius: 16px; }

/* A focused entry point: sign in or create an account. */
.auth-page-simple { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 1.5rem; overflow: hidden; background: radial-gradient(circle at 14% 12%,#d2f4e8 0,transparent 27%), radial-gradient(circle at 82% 75%,#d7eeec 0,transparent 34%), #edf5f3; }
.auth-page-simple::before { content: ''; position: absolute; width: 580px; height: 580px; border: 1px solid rgba(0,141,118,.16); border-radius: 50%; left: -250px; top: -240px; box-shadow: 0 0 0 100px rgba(255,255,255,.11),0 0 0 200px rgba(255,255,255,.09); pointer-events: none; }
.auth-glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: #b0e6d9; filter: blur(95px); opacity: .44; bottom: -170px; right: -60px; pointer-events: none; }
.auth-shell { position: relative; width: min(100%,520px); z-index: 1; }
.auth-identity { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: 0 0 1.25rem; color: var(--deep); font-size: 1.65rem; font-weight: 900; }
.auth-identity .brand-mark { width: 51px; height: 51px; font-size: 1.6rem; }
.auth-page-simple .auth-form { width: 100%; padding: clamp(1.35rem,4vw,2.5rem); border: 1px solid #d8e8e4; border-radius: 26px; box-shadow: 0 28px 70px rgba(12,59,63,.14); }
.auth-page-simple .auth-tabs { margin: 0 0 1.7rem; background: #ecf4f2; padding: .35rem; border-radius: 14px; }
.auth-page-simple .auth-tab { font-size: .98rem; min-height: 48px; border-radius: 11px; }
.auth-page-simple .auth-tab.active { color: #007a68; box-shadow: 0 5px 15px #0f172a12; }
.auth-title h1 { font-size: clamp(1.7rem,4vw,2.2rem); margin: .2rem 0 .35rem; line-height: 1.2; }
.auth-title p { color: #6d858a; margin-bottom: 1.6rem; font-size: .96rem; }
.auth-page-simple .field { font-size: .91rem; }
.auth-page-simple .field input { min-height: 55px; font-size: 1rem; }
.auth-page-simple .stack { gap: 1.15rem; margin: 0; }
.auth-submit { min-height: 55px; margin-top: .3rem; font-size: 1.07rem; justify-content: space-between; }
.auth-resend { display: block; background: none; border: 0; color: #008d76; font-size: .86rem; margin: 1.25rem auto 0; text-decoration: underline; }
.auth-notice { background: #e4f7ef; color: #07634d; border: 1px solid #ace4cd; border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1.1rem; font-size: .9rem; }

/* Owner and employee workspaces share the same visual language. */
.owner-layout { grid-template-columns: 268px minmax(0,1fr); }
.owner-header, .topbar { background: rgba(255,255,255,.94); backdrop-filter: blur(18px); border-color: #dce9e6; }
.owner-header { padding: 0 1.8rem; height: 78px; }
.owner-header .brand, .sidebar-brand { font-size: 1.25rem; }
.owner-header .brand small { color: #789499; }
.owner-sidebar, .sidebar { background: linear-gradient(170deg,#102d39,#102535 62%,#082a31); color: #d5e6e5; padding: 1.35rem .8rem; }
.owner-sidebar { top: 78px; height: calc(100vh - 78px); }
.sidebar { width: 258px; }
.sidebar-label, .owner-sidebar .sidebar-label { color: #83aaa9; font-size: .77rem; margin: 1.3rem .8rem .7rem; }
.nav-item { border-radius: 12px; padding: .67rem .8rem; font-size: .91rem; min-height: 46px; transition: background .2s,transform .2s; }
.nav-item:hover { background: #234655; color: white; transform: translateX(-2px); }
.nav-item.active { background: #008d76; color: white; box-shadow: 0 8px 16px #001e2633; }
.nav-count { margin-right: auto; min-width: 27px; height: 27px; padding: 0 6px; display: grid; place-items: center; background: #ffcf70; color: #593704; border-radius: 8px; font-size: .83rem; font-weight: 900; }
.owner-main { max-width: 1550px; padding: clamp(1.2rem,3vw,2.7rem); }
.content { max-width: 1700px; padding: clamp(1.2rem,3vw,2.7rem); }
.owner-main > .page-heading, .content > .page-heading { background: linear-gradient(110deg,#fff,#f2faf7); border: 1px solid #dcebe6; border-radius: 22px; padding: 1.5rem 1.8rem; margin-bottom: 1.6rem; box-shadow: 0 12px 30px rgba(15,60,55,.045); }
.page-heading h1, .owner-main .page-heading h1, .content .page-heading h1 { font-size: clamp(1.8rem,2.7vw,2.65rem); line-height: 1.15; margin: .2rem 0 .4rem; }
.page-heading p { font-size: .97rem; line-height: 1.55; color: #698187; }
.owner-summary { grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0 0 1.6rem; gap: .9rem; }
.metrics { gap: .9rem; }
.metric { border-radius: 18px; min-height: 147px; padding: 1.1rem 1.2rem; background: #fff; position: relative; overflow: hidden; }
.metric::after { content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 4px; height: 100%; background: #13b498; opacity: .8; }
.metric-top { font-size: .91rem; color: #54727a; }
.metric-top i { border-radius: 12px; padding: .32rem .65rem; }
.metric strong { font-size: clamp(1.55rem,2.3vw,2.1rem); line-height: 1.1; margin-top: .65rem; }
.metric small { font-size: .77rem; }
.section { padding: 1.45rem; margin-bottom: 1.2rem; }
.section-heading { margin-bottom: 1rem; }
.section-heading h2 { font-size: 1.26rem; }
.section-heading span { font-size: .82rem; }
.owner-insights { gap: .9rem; }
.owner-insights > section { padding: 1.4rem; }
.attention-panel { background: linear-gradient(145deg,#fff,#effaf5); }
.attention-grid { gap: .72rem; }
.attention-grid > div { border-radius: 14px; padding: .9rem; }
.attention-grid b { font-size: 1.7rem; }
.attention-grid span { font-size: .82rem; }
.company-grid { gap: 1rem; }
.company-card { border-radius: 20px; min-height: 295px; padding: 1.5rem; transition: transform .2s, box-shadow .2s; }
.company-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px rgba(16,57,61,.12); }
.company-avatar { width: 52px; height: 52px; border-radius: 15px; font-size: 1.25rem; }
.company-card h3 { font-size: 1.35rem; }
.company-card p, .company-counts { font-size: .87rem; }
.settings-grid { gap: 1rem; }
.staff-list > div { border-radius: 11px; font-size: .87rem; }
.field { font-size: .88rem; }
.field input, .field select, .field textarea, .toolbar input, .toolbar select, .copy-row input, #public-filter { border-color: #c9dcd7; border-radius: 11px; min-height: 48px; font-size: .94rem; }
.company-name-pill { background: #eaf7f1; color: #086e5b; border: 1px solid #cde9dc; border-radius: 10px; padding: .35rem .8rem; font-size: .92rem; font-weight: 800; white-space: nowrap; }
.topbar { min-height: 75px; }
.location-label { font-size: .95rem; }
.user-pill { font-size: .89rem; }
.table-wrap { border: 1px solid #e5eeee; border-radius: 14px; }
table { font-size: .88rem; }
th { color: #4f7376; background: #f2f8f7; }
th,td { padding: .88rem .85rem; }
.toolbar { gap: .75rem; }
.toolbar input,.toolbar select { max-width: 230px; }
.pipeline-column { border-radius: 15px; min-width: 225px; }
.pipeline-card { border-radius: 12px; padding: .85rem; }
.pipeline-card b { font-size: .9rem; }
.pipeline-card small { font-size: .77rem; }
.work-alerts > div { border-radius: 16px; }
.work-alerts strong { font-size: .94rem; }
.work-alerts small { font-size: .79rem; }
.notice { border-radius: 12px; font-size: .9rem; }
.demo-banner { border-radius: 14px; font-size: .9rem; }
.modal { border-radius: 20px; }
.modal-body { font-size: .95rem; }

/* Review queue is a real destination in the owner sidebar. */
.pending-callout { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; margin-bottom: 1.3rem; border-radius: 17px; background: linear-gradient(105deg,#0f6f69,#0a9e7c); color: white; box-shadow: 0 13px 26px rgba(4,115,96,.18); }
.pending-callout-icon { font-size: 1.7rem; line-height: 1; }
.pending-callout span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.pending-callout strong { font-size: 1.12rem; }
.pending-callout small { font-size: .81rem; color: #d8f5ed; }
.pending-callout:hover { transform: translateY(-2px); }
.pending-employees { padding: 1.6rem; }
.pending-employees .section-heading { align-items: end; }
.pending-employees .section-heading h2 { margin: .15rem 0 0; }
.pending-list { gap: .8rem; }
.pending-person { display: flex; align-items: center; gap: 1rem; border-color: #deebe7; background: #f8fbfa; border-radius: 16px; padding: 1rem; }
.pending-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex: none; background: #d8f2e9; color: #086e5b; border-radius: 14px; font-size: 1.2rem; font-weight: 900; }
.pending-details { flex: 1; min-width: 0; }
.pending-details strong { font-size: 1.06rem; }
.pending-details small { font-size: .8rem; }
.pending-company { display: flex; flex-direction: column; gap: .15rem; font-size: .76rem; color: #607b7f; }
.pending-company select { min-width: 210px; min-height: 43px; border: 1px solid #c9dcd7; border-radius: 10px; padding: .3rem .6rem; background: #fff; color: var(--ink); }

/* The three customer links keep the same style and readable sizing. */
.public-header { background: radial-gradient(circle at 10% 90%,#126b65,#102b39 70%); }
.public-hero h1 { font-size: clamp(2.1rem,4.4vw,3.6rem); }
.public-hero p { font-size: 1.05rem; }
.public-main .section-heading h2 { font-size: 1.7rem; }
.candidate-info h3 { font-size: 1.24rem; }
.candidate-info p { font-size: .92rem; }
.candidate-facts span { font-size: .8rem; }
.candidate-card { transition: transform .2s, box-shadow .2s; }
.candidate-card:hover { transform: translateY(-4px); box-shadow: 0 20px 35px rgba(14,49,55,.11); }

@media(max-width:1250px) { .owner-summary { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .owner-layout { grid-template-columns: minmax(0,1fr); } .owner-sidebar { top: 78px; height: calc(100vh - 78px); } .owner-sidebar.open { right: 0; } .owner-main { max-width: 100%; } .pending-person { flex-wrap: wrap; } .pending-details { min-width: 55%; } }
@media(max-width:700px) { .owner-main,.content { padding: 1rem; } .owner-main > .page-heading,.content > .page-heading { padding: 1.25rem; } .owner-summary,.metrics,.company-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .metric { min-height: 128px; } .owner-insights { grid-template-columns: 1fr; } .owner-main .page-heading { align-items: flex-start; } .pending-callout { flex-wrap: wrap; } .pending-callout > span:last-child { width: 100%; padding-right: 2.7rem; } .pending-company,.pending-company select,.pending-person .btn { width: 100%; } .pending-person { align-items: stretch; } .pending-details { min-width: 0; } .topbar { padding: 0 .9rem; } .company-name-pill { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } }
@media(max-width:480px) { .auth-page-simple { padding: 1rem; } .auth-page-simple .auth-form { padding: 1.2rem; } .owner-summary,.metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; } .owner-summary .metric,.metric { padding: .9rem; } .metric strong { font-size: 1.48rem; } .company-grid,.candidate-grid { grid-template-columns: 1fr; } .page-heading h1,.owner-main .page-heading h1 { font-size: 1.85rem; } .owner-header { padding: 0 .9rem; } .owner-header .header-actions { gap: .3rem; } .pending-person { flex-direction: row; } .pending-avatar { width: 42px; height: 42px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition: none!important; animation-duration: .01ms!important; } }