:root {
  --ink: #082e35;
  --muted: #557478;
  --line: #d5e2e3;
  --paper: #f4f7f7;
  --white: #fff;
  --navy: #082e35;
  --navy-2: #0c4651;
  --orange: #d98e4a;
  --orange-soft: #fff3e7;
  --green: #1a7a55;
  --green-soft: #e8f5ef;
  --amber: #a46714;
  --amber-soft: #fff5df;
  --red: #a34444;
  --red-soft: #fceeee;
  --shadow: 0 16px 45px rgba(24, 33, 48, 0.08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar {
  background: var(--navy);
  color: #fff;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: grid; gap: 6px; align-items: start; padding: 0 10px 28px; }
.brand img { display: block; width: 184px; height: auto; }
.brand-product {
  color: #fff; font: 600 12px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase; margin-top: 6px;
}
.brand-provider { color: #a9bec1; font-size: 12px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 11px;
  font-family: "Archivo", sans-serif; font-size: 24px;
}
.brand strong { display: block; font-family: "Archivo", sans-serif; font-size: 22px; letter-spacing: .02em; }
.brand span { display: block; color: #a9bec1; font-size: 12px; margin-top: 2px; text-transform: uppercase; letter-spacing: .13em; }
.tenant-lockup {
  margin: 0 8px 24px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.035);
}
.tenant-lockup > span { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; font: 700 14px "Archivo", sans-serif; }
.tenant-lockup strong { display: block; font-size: 11px; letter-spacing: .15em; }
.tenant-lockup small { display: block; margin-top: 3px; color: #82968f; font: 10px "Archivo", sans-serif; }
nav { display: grid; gap: 5px; }
.nav-item {
  border: 0; color: #b9cbcd; background: transparent; border-radius: 9px;
  padding: 12px; text-align: left; display: flex; align-items: center; gap: 10px;
  font-size: 15px;
  transition: .18s ease;
}
.nav-item:hover, .nav-item.active { background: var(--navy-2); color: #fff; }
.nav-item.active { box-shadow: inset 3px 0 var(--orange); }
.nav-icon { color: #8190a5; width: 20px; text-align: center; font-size: 17px; }
.nav-count {
  margin-left: auto; background: var(--orange); color: #fff; min-width: 20px; height: 20px;
  border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.appliance-card {
  margin-top: auto; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035);
  border-radius: 12px; padding: 14px;
}
.status-line { font-size: 12px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.status-dot { width: 7px; height: 7px; background: #4fd69d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(79,214,157,.12); }
.appliance-card p { margin: 12px 0 3px; font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9d1dc; }
.appliance-card > span { color: #a9bec1; font-size: 12px; }
main { min-width: 0; padding-bottom: 60px; }
.topbar {
  min-height: 94px; padding: 20px 34px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(246,245,241,.88); backdrop-filter: blur(18px);
  position: sticky; top: 0; z-index: 10;
}
.eyebrow {
  margin: 0 0 5px; color: var(--muted); font: 600 11px/1.3 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .13em; text-transform: uppercase;
}
.eyebrow.accent { color: var(--orange); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 600 29px "Archivo", sans-serif; letter-spacing: -.015em; }
h2 { font: 600 clamp(34px, 4vw, 54px)/1.03 "Archivo", sans-serif; max-width: 740px; margin-bottom: 18px; letter-spacing: -.025em; }
h3 { font: 600 23px "Archivo", sans-serif; margin-bottom: 0; letter-spacing: -.015em; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.signed-in-user {
  color: #536070; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 11px; font-size: 10px; font-weight: 750;
}
.local-badge, .demo-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .11em; color: var(--green); background: var(--green-soft);
  border-radius: 999px; padding: 9px 12px; display: flex; align-items: center; gap: 6px; margin-right: 4px;
}
.demo-badge { color: #7d5a21; background: #f5e8c8; }
.local-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.button {
  border: 1px solid transparent; border-radius: 8px; padding: 10px 15px; font-weight: 700; font-size: 12px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--orange); color: var(--navy); box-shadow: 0 8px 22px rgba(217,142,74,.22); }
.button.primary:hover { background: #e5a363; }
.button.secondary { background: #fff; border-color: var(--line); color: #39414d; }
.button.ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.button.danger { color: var(--red); background: var(--red-soft); border-color: #f4caca; }
.view { display: none; padding: 28px 34px 0; }
.view.active { display: block; animation: appear .25s ease; }
@keyframes appear { from { opacity: .5; transform: translateY(4px); } }
.hero {
  background: var(--navy); color: #fff; min-height: 325px; padding: 44px 48px; border-radius: 16px;
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; overflow: hidden; position: relative;
  box-shadow: var(--shadow);
}
.hero::after {
  content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%; right: -200px; top: -140px; box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012);
}
.hero p:not(.eyebrow) { color: #b5c0d0; line-height: 1.65; max-width: 680px; font-size: 15px; }
.hero-actions { display: flex; gap: 10px; margin-top: 26px; }
.workflow-map { align-self: center; position: relative; z-index: 1; }
.workflow-map div {
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: 10px;
  padding: 13px 16px; display: grid; grid-template-columns: 34px 1fr; align-items: center;
}
.workflow-map span { grid-row: 1 / 3; color: var(--orange); font: 700 11px ui-monospace, monospace; }
.workflow-map strong { font-size: 13px; }
.workflow-map small { color: #8796aa; margin-top: 3px; }
.workflow-map i { display: block; height: 19px; padding-left: 26px; color: #536176; font-style: normal; transform: rotate(90deg); width: 40px; }
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 18px; }
.stat-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 19px 20px;
  min-height: 128px; position: relative;
}
.stat-card::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: #d8dde2; border-radius: 0 3px 3px 0; }
.stat-card.highlight::before { background: var(--orange); }
.stat-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.stat-card strong { display: block; font: 600 35px "Archivo", sans-serif; margin: 12px 0 5px; letter-spacing: -.02em; }
.stat-card small { color: #9299a3; font-size: 10px; }
.dashboard-grid, .system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 24px; box-shadow: 0 5px 22px rgba(20,28,40,.035); }
.span-two { grid-column: span 2; }
.dashboard-grid .span-two { grid-column: span 2; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.panel-header.wrap { flex-wrap: wrap; }
.panel-copy { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.text-button { background: none; border: 0; color: var(--orange); font-weight: 750; font-size: 11px; padding: 4px; }
.empty-state, .empty-cell { color: #969da6; font-size: 12px; text-align: center; padding: 40px 18px; border: 1px dashed #d9dde1; border-radius: 9px; }
.priority-list { display: grid; gap: 3px; }
.priority-row {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 12px 4px;
  border-top: 1px solid #eef0f2;
}
.priority-row:first-child { border-top: 0; }
.score { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font: 700 13px ui-monospace, monospace; }
.priority-row strong { display: block; font-size: 12px; margin-bottom: 3px; }
.priority-row small { color: var(--muted); font-size: 10px; }
.money { font: 500 13px ui-monospace, monospace; }
.control-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.control-list li { display: flex; align-items: center; gap: 12px; }
.control-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-weight: 800; }
.control-icon.good { color: var(--green); background: var(--green-soft); }
.control-list strong { display: block; font-size: 12px; margin-bottom: 3px; }
.control-list small { color: var(--muted); font-size: 10px; }
.legend { display: flex; gap: 6px; }
.pill { display: inline-flex; border-radius: 99px; padding: 5px 8px; font-size: 9px; font-weight: 800; }
.pill.priority { color: var(--green); background: var(--green-soft); }
.pill.review { color: var(--amber); background: var(--amber-soft); }
.pill.watch { color: var(--red); background: var(--red-soft); }
.pill.ready { color: var(--green); background: var(--green-soft); }
.pill.hold { color: var(--red); background: var(--red-soft); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { color: #89919c; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
td { padding: 14px 10px; border-bottom: 1px solid #eef0f2; vertical-align: middle; }
td strong { display: block; font-size: 11px; margin-bottom: 3px; }
td small { color: var(--muted); font-size: 9px; }
.risk-tags { display: flex; gap: 4px; max-width: 240px; flex-wrap: wrap; }
.risk { background: var(--red-soft); color: var(--red); padding: 4px 6px; border-radius: 4px; font-size: 8px; font-weight: 700; }
.clear { color: var(--green); font-size: 9px; font-weight: 750; }
.decision { text-transform: capitalize; color: var(--muted); }
.approval-list { display: grid; gap: 10px; }
.approval-card { border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.approval-card h4 { margin: 0 0 6px; font: 600 18px "Archivo", sans-serif; }
.approval-card p { margin: 0; color: var(--muted); font-size: 11px; }
.approval-actions { display: flex; gap: 7px; }
.approval-actions button { border: 0; padding: 8px 11px; border-radius: 6px; font-size: 10px; font-weight: 750; }
.approve { background: var(--green-soft); color: var(--green); }
.reject { background: var(--red-soft); color: var(--red); }
.audit-list { display: grid; }
.audit-row { display: grid; grid-template-columns: 150px 170px 1fr; gap: 20px; padding: 14px 4px; border-top: 1px solid #eef0f2; font-size: 11px; }
.audit-row:first-child { border-top: 0; }
.audit-row time { color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; }
.audit-event { font-weight: 800; color: #47505e; letter-spacing: .035em; font-size: 9px; }
.audit-detail { color: var(--muted); }
dl { margin: 22px 0 0; }
dl div { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #eef0f2; padding: 12px 0; font-size: 11px; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 700; text-align: right; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.danger-zone p:last-child { color: var(--muted); font-size: 11px; margin: 8px 0 0; }
.hero-proof {
  align-self: center; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.045); border-radius: 12px; padding: 26px;
}
.hero-proof > span { color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.hero-proof strong { display: block; font: 600 27px "Archivo", sans-serif; margin: 14px 0 10px; }
.hero-proof p { font-size: 12px !important; margin-bottom: 18px; }
.hero-proof small { color: #809890; font: 10px ui-monospace, monospace; }
.flywheel { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr; align-items: center; }
.flywheel button {
  border: 1px solid var(--line); background: #fbfbf9; border-radius: 10px; padding: 18px;
  text-align: left; min-height: 112px; color: var(--ink);
}
.flywheel button:hover { border-color: #c9b2a6; box-shadow: 0 8px 20px rgba(24,33,48,.06); }
.flywheel button span { display: block; color: var(--orange); font: 700 9px ui-monospace, monospace; margin-bottom: 14px; }
.flywheel button strong { display: block; font: 600 19px "Archivo", sans-serif; margin-bottom: 5px; }
.flywheel button small { color: var(--muted); line-height: 1.35; }
.flywheel i { text-align: center; color: #bdc4c3; font-style: normal; }
.compact-list { display: grid; }
.compact-row { display: grid; grid-template-columns: 58px 1fr; gap: 11px; padding: 12px 0; border-top: 1px solid #eef0f2; align-items: center; }
.compact-row:first-child { border-top: 0; }
.compact-row strong { display: block; font-size: 11px; margin-bottom: 3px; }
.compact-row small { color: var(--muted); font-size: 9px; }
.due { display: inline-flex; justify-content: center; padding: 5px 7px; border-radius: 5px; font-size: 8px; font-weight: 800; }
.due.overdue { color: var(--red); background: var(--red-soft); }
.due.due-soon { color: var(--amber); background: var(--amber-soft); }
.role-panel { display: grid; grid-template-columns: minmax(220px, .8fr) 2fr auto; gap: 24px; align-items: end; margin-bottom: 16px; }
.role-panel select {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 11px 12px;
  color: var(--ink); font-weight: 700; font-size: 12px;
}
.role-brief { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.role-brief div { border-left: 1px solid var(--line); padding-left: 13px; min-height: 42px; }
.role-brief span { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 6px; }
.role-brief strong { font-size: 10px; line-height: 1.35; display: block; }
.credential { background: #edf3f0; color: #315f53; padding: 4px 6px; border-radius: 4px; font-size: 8px; font-weight: 700; }
.approval-card { grid-template-columns: auto 1fr auto; }
.candidate-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #edf3f0; color: #315f53; font: 700 11px ui-monospace, monospace; }
.approval-card h4 span { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font: 700 9px ui-monospace, monospace; margin-left: 5px; }
.approval-card small { color: var(--muted); font-size: 9px; }
.place { background: var(--orange); color: #fff; }
.approved-label { color: var(--green); font-size: 10px; font-weight: 800; align-self: center; }
.rejected-label { color: var(--red); font-size: 10px; font-weight: 800; }
.placement-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.placement-layout .span-two { grid-column: auto; }
.checkin-actions { display: grid; gap: 9px; }
.checkin-card { border: 1px solid var(--line); border-radius: 9px; padding: 14px; display: grid; gap: 14px; }
.checkin-card h4 { font: 600 16px "Archivo", sans-serif; margin: 9px 0 4px; }
.checkin-card p { font-size: 9px; color: var(--muted); margin: 0; }
.checkin-card > div:last-child { display: flex; gap: 6px; }
.checkin-card button { border: 0; border-radius: 6px; padding: 7px 9px; font-size: 8px; font-weight: 800; }
.risk-check { color: var(--red); background: var(--red-soft); }
.healthy-check { color: var(--green); background: var(--green-soft); }
.report-banner {
  background: var(--navy); color: #fff; border-radius: 15px; padding: 38px 42px; display: flex;
  justify-content: space-between; align-items: center; gap: 30px; box-shadow: var(--shadow);
}
.report-banner h2 { font-size: 40px; margin-bottom: 12px; }
.report-banner p:not(.eyebrow) { color: #a9bbb5; font-size: 12px; margin: 0; }
.hold-stats { margin-top: 18px; }
.method-tag { color: #315f53; background: #edf3f0; border-radius: 5px; padding: 6px 8px; font: 700 9px ui-monospace, monospace; }
.rules { padding: 0; margin: 24px 0 0; list-style: none; counter-reset: rules; display: grid; gap: 20px; }
.rules li { counter-increment: rules; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; }
.rules li::before { content: "0" counter(rules); grid-row: 1 / 3; color: var(--orange); font: 700 9px ui-monospace, monospace; padding-top: 3px; }
.rules strong { font-size: 11px; margin-bottom: 4px; }
.rules span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.timeline-panel p:not(.eyebrow) { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 18px 0; }
.timeline { display: flex; align-items: center; }
.timeline span { min-width: 76px; font: 700 9px ui-monospace, monospace; color: var(--orange); }
.timeline small { display: block; color: var(--muted); font: 8px ui-sans-serif, sans-serif; margin-top: 4px; }
.timeline i { height: 1px; flex: 1; background: var(--line); margin: 0 8px; position: relative; }
.timeline i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
#toast {
  position: fixed; z-index: 30; right: 26px; bottom: 26px; background: var(--navy); color: #fff;
  padding: 12px 16px; border-radius: 8px; font-size: 11px; box-shadow: var(--shadow);
  transform: translateY(20px); opacity: 0; pointer-events: none; transition: .2s ease;
}
#toast.show { transform: translateY(0); opacity: 1; }
body:has(.login-screen:not(.hidden)) { overflow: hidden; }
.hidden { display: none !important; }
.login-screen {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: rgba(13, 24, 37, .96);
}
.login-card {
  width: min(430px, 100%); background: #fff; padding: 38px; border-radius: 16px; box-shadow: var(--shadow);
  display: grid; gap: 18px;
}
.login-logo { display: block; width: min(260px, 80%); height: auto; margin-bottom: 4px; }
.login-card h2 { font-size: 32px; margin: 0; }
.login-card p { color: var(--muted); line-height: 1.6; margin: 0; font-size: 14px; }
.login-card label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.login-card input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px;
  color: var(--ink); font: 600 13px ui-sans-serif, sans-serif;
}
.login-card input:focus { outline: 2px solid rgba(185,91,48,.15); border-color: #c88667; }
.login-card small { color: var(--red); min-height: 16px; }
.login-card .powered-by {
  border-top: 1px solid var(--line); padding-top: 16px; color: var(--steel, #557478);
  font-size: 12px; text-align: center;
}
.login-card .powered-by strong { color: var(--navy); font-family: "Archivo", sans-serif; }
.account-link {
  justify-self: center;
  border: 0;
  background: transparent;
  color: var(--orange);
  padding: 2px 6px;
  font-size: 13px;
  font-weight: 750;
}
.account-link:hover { text-decoration: underline; }
.login-card small.success-message { color: var(--green); }
.password-change-card { border-top: 5px solid var(--orange); }
.form-error {
  align-self: center;
  color: var(--red);
  font-size: 12px;
  min-height: 18px;
}
.danger-text { color: var(--red); }
.current-account-note { color: var(--muted); font-size: 11px; white-space: nowrap; }
.account-security .panel-header { align-items: center; }
.account-password-form { max-width: 760px; }
.account-button { white-space: nowrap; }
.page-intro {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 18px;
  background: var(--navy); color: #fff; padding: 32px 36px; border-radius: 14px;
}
.page-intro h2 { margin: 5px 0 10px; font-size: 34px; }
.page-intro p:last-child { color: #aeb9c6; max-width: 760px; line-height: 1.6; font-size: 12px; margin: 0; }
.plain-badge, .demo-label {
  color: #dca083; background: rgba(185, 91, 48, .13); border: 1px solid rgba(220,160,131,.25);
  border-radius: 99px; padding: 7px 10px; font-size: 8px; font-weight: 800; white-space: nowrap;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 750; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 10px 11px;
  color: var(--ink); font: 500 11px ui-sans-serif, sans-serif; resize: vertical;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: 2px solid rgba(185,91,48,.15); border-color: #c88667;
}
.form-grid .span-two { grid-column: span 2; }
.form-help { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 14px 0; }
.source-list { display: grid; gap: 8px; margin-top: 14px; }
.source-row {
  display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px;
  background: #f8f8f5; border: 1px solid var(--line); border-radius: 8px;
}
.source-row strong { display: block; font-size: 10px; }
.source-row small { color: var(--muted); font-size: 8px; display: block; margin-top: 4px; }
.empty-state.compact { padding: 18px 12px; }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.account-card { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: #fbfbf9; }
.account-card h4 { margin: 12px 0 5px; font: 600 19px "Archivo", sans-serif; }
.account-card p, .account-card > small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.account-card dl { margin: 14px 0; }
.account-card dl div { font-size: 9px; padding: 8px 0; }
.admin-notes { margin-top: 0; }
.admin-notes div { font-size: 10px; }
.user-list { display: grid; gap: 8px; }
.user-row {
  display: grid; grid-template-columns: minmax(180px, 1fr) auto auto minmax(150px, .7fr) auto;
  align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 9px; background: #fbfbf9;
}
.user-row strong { display: block; font-size: 12px; }
.user-row small { color: var(--muted); font-size: 9px; }
.user-actions { display: flex; gap: 8px; justify-content: flex-end; }
.user-actions { flex-wrap: wrap; }
.diagnostic-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.diagnostic-actions a { text-decoration: none; display: inline-flex; align-items: center; }
.diagnostics-summary, .heartbeat-status {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px;
}
.diagnostics-summary > div, .heartbeat-status > div {
  position: relative; min-height: 86px; padding: 15px 16px; border: 1px solid var(--line);
  border-radius: 9px; background: #fafbf9; display: grid; align-content: center; gap: 4px;
}
.diagnostics-summary strong, .heartbeat-status strong { font-size: 14px; overflow-wrap: anywhere; }
.diagnostics-summary small, .heartbeat-status small { color: var(--muted); font-size: 11px; }
.health-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9ca5a5;
  box-shadow: 0 0 0 4px rgba(156,165,165,.12); margin-right: 8px;
}
.health-dot.healthy { background: var(--green); box-shadow: 0 0 0 4px rgba(26,122,85,.12); }
.health-dot.warning { background: var(--amber); box-shadow: 0 0 0 4px rgba(164,103,20,.12); }
.health-dot.failing, .health-dot.attention { background: var(--red); box-shadow: 0 0 0 4px rgba(163,68,68,.12); }
.diagnostics-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.diagnostic-check {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: 9px; padding: 13px 14px; background: #fff;
}
.diagnostic-check strong { display: block; font-size: 13px; }
.diagnostic-check small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.diagnostics-incidents { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.panel-header.compact { margin-bottom: 10px; }
.panel-header.compact h4 { margin: 0; font-size: 15px; }
.incident-row {
  display: grid; grid-template-columns: 170px minmax(190px, .65fr) 1.5fr; align-items: start; gap: 15px;
  padding: 12px 0; border-top: 1px solid #e9eeee;
}
.incident-row time, .incident-row small { color: var(--muted); font-size: 11px; }
.incident-row strong, .incident-row small { display: block; }
.incident-row p { margin: 0; color: var(--muted); font-size: 12px; }
.support-note {
  margin: 15px 0 0; border-left: 3px solid var(--orange); background: var(--orange-soft);
  border-radius: 0 7px 7px 0; padding: 12px 14px; color: #5d4b3d; font-size: 12px; line-height: 1.5;
}
.heartbeat-error { grid-column: 1 / -1; margin: 0; color: var(--red); font-size: 12px; }
.intake-panel { margin-bottom: 16px; }
.candidate-form { grid-template-columns: repeat(4, 1fr); }
.candidate-form .span-two { grid-column: span 2; }
.checkbox { display: flex !important; grid-auto-flow: column; justify-content: start; align-items: center; }
.checkbox input { width: auto; }
.form-actions { display: flex; gap: 9px; align-items: center; }
.file-button {
  display: inline-flex !important; place-items: center; padding: 10px 14px; color: var(--ink) !important;
  background: #fff; border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.file-button input { display: none; }
a { color: var(--orange); }
.overview-heading, .section-heading {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin: 2px 0 22px;
}
.overview-heading {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px;
  box-shadow: 0 4px 18px rgba(20,28,40,.03);
}
.overview-heading h2, .section-heading h2 { margin: 4px 0 7px; font-size: 34px; }
.overview-heading p:last-child, .section-heading p:last-child { color: var(--muted); font-size: 11px; margin: 0; }
.overview-actions { display: flex; gap: 9px; }
.stage-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stage-summary div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafaf8; }
.stage-summary span { color: var(--muted); font-size: 8px; display: block; text-transform: uppercase; letter-spacing: .07em; }
.stage-summary strong { display: block; margin-top: 7px; font: 600 22px "Archivo", sans-serif; }
.candidate-heading { position: relative; align-items: center; }
.intake-disclosure > summary { list-style: none; cursor: pointer; }
.intake-disclosure > summary::-webkit-details-marker { display: none; }
.intake-popover {
  position: absolute; z-index: 20; right: 0; top: 58px; width: min(900px, calc(100vw - 310px));
  padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 20px 55px rgba(15,27,40,.18);
}
.candidate-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, .75fr); gap: 16px; margin-bottom: 16px; }
.candidate-board-panel { min-width: 0; }
.candidate-pipeline { display: grid; grid-template-columns: repeat(7, minmax(170px, 1fr)); gap: 9px; overflow-x: auto; padding-bottom: 8px; }
.pipeline-column { min-width: 170px; background: #f6f7f5; border: 1px solid #e7e9e5; border-radius: 9px; padding: 9px; }
.pipeline-column header { display: flex; justify-content: space-between; align-items: center; padding: 3px 3px 10px; }
.pipeline-column header strong { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.pipeline-column header span { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: #e5e9e4; color: #6e766f; font-size: 8px; font-weight: 800; }
.candidate-card {
  width: 100%; display: grid; gap: 5px; text-align: left; padding: 12px; margin-bottom: 7px; border: 1px solid #e1e4df;
  border-radius: 8px; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(18,29,39,.025);
}
.candidate-card:hover, .candidate-card.selected { border-color: #c7805e; box-shadow: 0 5px 16px rgba(185,91,48,.09); }
.candidate-card { cursor: grab; }
.candidate-card:active { cursor: grabbing; }
.candidate-card.dragging { opacity: .42; transform: rotate(1deg); }
.pipeline-column { transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.pipeline-column.drag-over {
  border-color: var(--orange); background: #fff8f3; box-shadow: inset 0 0 0 2px rgba(207,104,57,.14);
}
.candidate-card strong { font-size: 10px; }
.candidate-card span, .candidate-card small { color: var(--muted); font-size: 8px; }
.candidate-card em { color: var(--orange); font-style: normal; font-size: 8px; border-top: 1px solid #eff0ed; padding-top: 7px; margin-top: 2px; }
.pipeline-empty { color: #a0a5a0; font-size: 8px; text-align: center; padding: 18px 6px; margin: 0; }
.operations-progress { margin-bottom: 16px; }
.operations-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.operations-progress-copy h3 { margin: 4px 0 10px; }
.operations-progress-copy > strong { color: var(--orange); font: 600 20px "Archivo", sans-serif; }
.progress-track { width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: #e7ebe7; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--orange); transition: width .35s ease; }
.operations-diagnostics { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.operations-diagnostics summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.operations-diagnostics dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 13px 0 0; }
.operations-diagnostics dl div { display: grid; grid-template-columns: 105px 1fr; gap: 9px; }
.operations-diagnostics dt { color: var(--muted); font-size: 11px; }
.operations-diagnostics dd { margin: 0; overflow-wrap: anywhere; font: 500 11px "IBM Plex Mono", ui-monospace, monospace; }
.candidate-detail-panel { min-width: 0; }
.candidate-record-header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; }
.candidate-avatar.large { width: 50px; height: 50px; font-size: 13px; }
.candidate-record-header h3 { margin: 3px 0 4px; font-size: 22px; }
.candidate-record-header p:last-child { color: var(--muted); font-size: 9px; margin: 0; }
.record-facts { margin-top: 18px; }
.record-facts div { font-size: 9px; padding: 9px 0; }
.record-facts dd { max-width: 60%; }
.record-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
.record-tags span { background: #edf3f0; color: #315f53; padding: 5px 7px; border-radius: 5px; font-size: 8px; font-weight: 700; }
.stage-actions { display: flex; justify-content: space-between; gap: 8px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.candidate-activity h4 { margin: 18px 0 10px; font-size: 11px; }
.activity-feed { display: grid; gap: 8px; max-height: 190px; overflow: auto; }
.activity-feed > div { border-left: 2px solid #dfe4df; padding: 2px 0 2px 10px; }
.activity-feed span { color: var(--orange); text-transform: uppercase; font-size: 7px; font-weight: 800; }
.activity-feed p { font-size: 8px; line-height: 1.45; margin: 4px 0; color: #4f5862; }
.activity-feed time { color: #9aa19d; font-size: 7px; }
.activity-composer { display: grid; grid-template-columns: 85px 1fr; gap: 7px; margin-top: 14px; }
.activity-composer input, .activity-composer select {
  border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: 8px; min-width: 0; background: #fff;
}
.activity-composer input[name="nextAction"] { grid-column: span 2; }
.activity-composer button { grid-column: 2; justify-self: end; }
.record-editor { margin: 14px 0; }
.record-editor > summary { list-style: none; cursor: pointer; width: fit-content; }
.record-editor > summary::-webkit-details-marker { display: none; }
.candidate-edit-form {
  margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 9px;
  background: #fafaf8; grid-template-columns: 1fr 1fr;
}
.resume-section { padding: 16px 0; border-top: 1px solid var(--line); }
.resume-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.resume-heading h4 { margin: 0 0 4px; font-size: 14px; }
.resume-heading small, .resume-list small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.resume-list { display: grid; gap: 7px; margin-top: 12px; }
.resume-list > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fafaf8;
}
.resume-list strong { font-size: 12px; }
.resume-suggestions {
  margin-top: 12px; padding: 13px; border: 1px solid #cfe0d8; border-radius: 8px; background: #f2f8f5;
}
.resume-suggestions > strong { font-size: 13px; }
.resume-suggestions > p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.operations-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.operations-status-grid h3 { margin: 5px 0 8px; font-size: 18px; }
.operations-queue { display: grid; gap: 10px; }
.operations-item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); gap: 20px;
  padding: 16px 18px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 9px; background: #fbfbf9;
}
.operations-item.priority-high { border-left-color: #c95145; }
.operations-item.priority-medium { border-left-color: #d7a03d; }
.operations-item.priority-low { border-left-color: #4f9278; }
.operations-item.compact { display: block; padding: 12px 14px; }
.operations-item-heading { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.operations-item-heading strong { margin-left: auto; color: var(--ink); }
.operations-item h4 { margin: 9px 0 5px; font-size: 15px; }
.operations-item p, .operations-item small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.operations-action { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding-left: 18px; border-left: 1px solid var(--line); }
.operations-action > span { font-size: 12px; line-height: 1.5; }
.operations-action > div, .operations-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.operations-links { margin-top: 10px; }
.operations-links a { font-size: 12px; }

/* Product readability baseline: operational detail should remain legible at laptop distance. */
.signed-in-user, .local-badge, .demo-badge { font-size: 12px; }
.button { min-height: 40px; font-size: 13px; }
.stat-card span { font-size: 12px; }
.stat-card strong { font-family: "Archivo", sans-serif; font-weight: 600; }
.stat-card small, .priority-row small, .control-list small { font-size: 11px; line-height: 1.45; }
.text-button { font-size: 12px; }
.pill { font-size: 11px; }
table { font-size: 13px; }
th {
  color: var(--muted); font: 600 11px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
}
td strong { font-size: 13px; }
td small { font-size: 11px; }
.risk, .clear, .credential, .due { font-size: 10px; }
.approval-card h4, .hero-proof strong, .flywheel button strong, .checkin-card h4,
.account-card h4, .stage-summary strong {
  font-family: "Archivo", sans-serif; font-weight: 600;
}
.approval-card p, .approval-card small, .audit-row, dl div, .danger-zone p:last-child,
.compact-row strong, .compact-row small, .role-brief strong, .checkin-card p,
.rules strong, .rules span, .timeline-panel p:not(.eyebrow), .form-help,
.source-row strong, .source-row small, .account-card p, .account-card > small,
.account-card dl div, .admin-notes div, .user-row small,
.overview-heading p:last-child, .section-heading p:last-child {
  font-size: 12px; line-height: 1.5;
}
.audit-row time, .audit-event { font-size: 11px; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.hero-proof > span, .flywheel button span, .role-brief span, .stage-summary span,
.pipeline-column header strong {
  font: 600 11px "IBM Plex Mono", ui-monospace, monospace;
}
.form-grid label { font-size: 12px; }
.form-grid input, .form-grid select, .form-grid textarea { font-size: 13px; min-height: 42px; }
.pipeline-column header span { font-size: 11px; }
.candidate-card { gap: 7px; padding: 13px; }
.candidate-card strong { font-size: 13px; }
.candidate-card span, .candidate-card small, .candidate-card em, .pipeline-empty { font-size: 11px; line-height: 1.4; }
.candidate-record-header p:last-child, .record-facts div, .record-tags span { font-size: 12px; }
.candidate-activity h4 { font-size: 13px; }
.activity-feed span { font: 600 10px "IBM Plex Mono", ui-monospace, monospace; }
.activity-feed p { font-size: 12px; }
.activity-feed time { font: 400 10px "IBM Plex Mono", ui-monospace, monospace; }
.activity-composer input, .activity-composer select { min-height: 38px; font-size: 12px; }
.money, .appliance-card p, .workflow-map span, .timeline span, .method-tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* Production polish: calmer density, consistent chips and progressive disclosure. */
.pill, .method-tag, .credential {
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 5px 9px;
  font: 700 10px/1.15 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .035em;
  white-space: nowrap;
}
.legend, .record-tags, .operations-links, .user-actions { gap: 8px; }
.record-tags span {
  border-radius: 999px;
  padding: 6px 9px;
  font: 650 11px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .01em;
}
.candidate-workspace { align-items: start; }
.candidate-detail-panel {
  position: sticky;
  top: 112px;
  max-height: calc(100vh - 132px);
  overflow: auto;
}
.candidate-board-panel { align-self: start; }
.operations-preview .compact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.operations-preview .operations-item.compact { min-height: 150px; }
.operations-item h4 { font-size: 16px; line-height: 1.35; }
.operations-item p { margin-bottom: 8px; }
.operations-rationale { margin-top: 8px; }
.operations-rationale summary {
  width: fit-content;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.operations-rationale small { display: block; margin-top: 8px; }
.job-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) minmax(170px, .75fr) minmax(150px, .65fr);
  gap: 12px;
  padding: 14px;
  margin: -4px 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8faf9;
}
.job-toolbar label { display: grid; gap: 6px; }
.job-toolbar label > span {
  color: var(--muted);
  font: 650 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.job-toolbar input, .job-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 11px;
  font-size: 13px;
}
.job-toolbar input:focus, .job-toolbar select:focus {
  outline: 2px solid rgba(217,142,74,.18);
  border-color: var(--orange);
}
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  color: var(--muted);
  font-size: 12px;
}
.table-pagination > div { display: flex; gap: 8px; }
.table-pagination .button { min-height: 34px; padding: 7px 12px; }
.source-manager { padding: 0; overflow: hidden; }
.source-manager > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}
.source-manager > summary::-webkit-details-marker { display: none; }
.source-manager > summary:hover { background: #fbfcfb; }
.source-manager-body {
  padding: 24px;
  border-top: 1px solid var(--line);
  background: #fbfcfb;
}
.source-manager .source-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}
.source-row { min-width: 0; }
.source-row > div { min-width: 0; }
.source-row strong, .source-row small { overflow-wrap: anywhere; }
.audit-list .audit-row:nth-child(n+21) { background: #fcfdfc; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; }
  .workflow-map { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .flywheel { grid-template-columns: 1fr 18px 1fr; row-gap: 12px; }
  .flywheel i:nth-of-type(2) { display: none; }
  .role-panel { grid-template-columns: 1fr; align-items: stretch; }
  .placement-layout { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .account-grid { grid-template-columns: 1fr 1fr; }
  .user-row { grid-template-columns: 1fr auto auto; }
  .user-row > small, .user-actions { grid-column: span 3; justify-content: flex-start; }
  .candidate-form { grid-template-columns: 1fr 1fr; }
  .candidate-workspace { grid-template-columns: 1fr; }
  .candidate-detail-panel { position: static; max-height: none; }
  .job-toolbar { grid-template-columns: 1fr 1fr; }
  .job-search { grid-column: span 2; }
  .source-manager .source-list { grid-template-columns: 1fr; }
  .operations-status-grid { grid-template-columns: 1fr; }
  .diagnostics-summary, .heartbeat-status { grid-template-columns: 1fr 1fr; }
  .intake-popover { width: calc(100vw - 290px); }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 16px; }
  .sidebar nav { grid-template-columns: repeat(5, 1fr); overflow-x: auto; }
  .nav-item { justify-content: center; font-size: 0; }
  .nav-icon { font-size: 17px; }
  .brand { padding-bottom: 14px; }
  .appliance-card { display: none; }
  .topbar { padding: 16px 18px; position: static; }
  .local-badge, .demo-badge, .button.secondary { display: none; }
  .account-button { display: inline-flex !important; }
  .signed-in-user { display: none; }
  .view { padding: 18px 16px 0; }
  .hero { padding: 30px 24px; min-height: auto; }
  .stat-grid, .dashboard-grid, .system-grid { grid-template-columns: 1fr; }
  .span-two, .dashboard-grid .span-two { grid-column: auto; }
  .audit-row { grid-template-columns: 1fr; gap: 5px; }
  .tenant-lockup { display: none; }
  .flywheel { grid-template-columns: 1fr; }
  .flywheel i { display: none; }
  .role-brief { grid-template-columns: 1fr 1fr; }
  .report-banner { padding: 28px 24px; align-items: flex-start; flex-direction: column; }
  .approval-card { grid-template-columns: auto 1fr; }
  .approval-actions { grid-column: span 2; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .form-grid, .candidate-form, .account-grid { grid-template-columns: 1fr; }
  .form-grid .span-two, .candidate-form .span-two { grid-column: auto; }
  .overview-heading, .section-heading { align-items: flex-start; flex-direction: column; }
  .overview-actions { width: 100%; }
  .candidate-heading { flex-direction: row; align-items: center; }
  .intake-popover { position: fixed; inset: 90px 16px auto; width: auto; max-height: calc(100vh - 110px); overflow: auto; }
  .candidate-pipeline { grid-template-columns: repeat(7, 180px); }
  .operations-item { grid-template-columns: 1fr; }
  .operations-preview .compact-list { grid-template-columns: 1fr; }
  .operations-action { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .job-toolbar { grid-template-columns: 1fr; }
  .job-search { grid-column: auto; }
  .table-pagination { align-items: flex-start; flex-direction: column; }
  .diagnostic-actions { width: 100%; justify-content: flex-start; }
  .diagnostics-summary, .heartbeat-status, .diagnostics-checks { grid-template-columns: 1fr; }
  .incident-row { grid-template-columns: 1fr; gap: 5px; }
}