:root{
  --accent:#2563eb; --accent2:#1e40af; --bg:#f4f6fb; --card:#fff; --line:#e6e8ee;
  --ink:#0f172a; --mut:#6b7280; --gold:#16a34a; --warn:#b45309; --dark:#0f172a;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); }

/* header */
header{ display:flex; justify-content:space-between; align-items:center; padding:14px 28px;
  background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; display:grid; place-items:center; font-size:20px; }
header h1{ font-size:19px; margin:0; letter-spacing:-.01em; }
.brand .sub{ font-size:11.5px; color:var(--mut); }
.actions{ display:flex; align-items:center; gap:10px; }

/* buttons */
.btn{ border:1px solid var(--line); background:#fff; padding:8px 14px; border-radius:9px;
  cursor:pointer; font-size:13px; font-weight:500; transition:.12s; }
.btn:hover{ background:#f3f4f6; }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover{ filter:brightness(1.06); }
.btn.dark{ background:var(--dark); color:#fff; border-color:var(--dark); }
.btn.ghost{ border:none; background:none; color:var(--accent); padding-left:0; }
.btn.sm{ padding:5px 10px; font-size:12px; }
.btn.danger{ color:#dc2626; border-color:#fca5a5; }

main{ max-width:1180px; margin:24px auto; padding:0 22px; }
.bar{ display:flex; justify-content:space-between; align-items:center; }
h2{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); }
.search{ border:1px solid var(--line); border-radius:9px; padding:8px 12px; font-size:13px; width:240px; }
.status{ font-size:12px; color:var(--mut); }
.status.running{ color:var(--accent); font-weight:600; } .status.done{ color:var(--gold); }
.status.error{ color:#dc2626; }

/* cards grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:12px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; cursor:pointer; transition:.14s; }
.card:hover{ box-shadow:0 8px 24px rgba(15,23,42,.08); transform:translateY(-2px); border-color:#d3d8e3; }
.card .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.avatar{ width:40px; height:40px; border-radius:50%; background:#eef2ff; color:var(--accent);
  display:grid; place-items:center; font-weight:700; font-size:15px; }
.card h3{ margin:10px 0 2px; font-size:16px; }
.card .titles{ color:var(--mut); font-size:12px; min-height:28px; }
.card .stats{ display:flex; gap:18px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.card .stat b{ display:block; font-size:19px; line-height:1; }
.card .stat span{ font-size:10.5px; color:var(--mut); }
.pill{ font-size:10.5px; padding:3px 9px; border-radius:20px; background:#eef2ff; color:var(--accent); font-weight:600; }
.pill.idle{ background:#f1f5f9; color:#64748b; } .pill.running{ background:#dbeafe; color:#1d4ed8; }
.pill.done{ background:#ecfdf3; color:var(--gold); } .pill.error{ background:#fef2f2; color:#dc2626; }

.mode{ font-size:10.5px; padding:2px 8px; border-radius:6px; font-weight:600; }
.mode.supervised{ background:#eef2ff; color:var(--accent); }
.mode.automated{ background:#fff7ed; color:#c2410c; }

.empty{ text-align:center; padding:60px 0; color:var(--mut); }

/* tables */
table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; font-size:13px; margin-top:6px; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ background:#fafbfc; color:var(--mut); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#fafbff; }
.fit{ font-weight:700; font-size:14px; } .fit.hi{ color:var(--gold); } .fit.mid{ color:var(--accent); } .fit.lo{ color:var(--mut); }
.gold-pill, .warn-pill{ font-size:11px; padding:2px 9px; border-radius:20px; font-weight:600; }
.gold-pill{ background:#ecfdf3; color:var(--gold); } .warn-pill{ background:#fef3e7; color:var(--warn); }
.daytag{ font-size:11px; padding:2px 7px; border-radius:6px; background:#f1f5f9; color:#475569; white-space:nowrap; }
.daytag.today{ background:#ecfdf3; color:var(--gold); font-weight:600; }
.muted{ color:var(--mut); }
.statussel{ border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-size:12px; font-weight:600; cursor:pointer; }
.statussel.st-not_completed{ background:#f1f5f9; color:#64748b; }
.statussel.st-completed{ background:#ecfdf3; color:var(--gold); border-color:#86efac; }
.statussel.st-error{ background:#fef2f2; color:#dc2626; border-color:#fca5a5; }
.actioncell .btn{ margin-right:4px; }

/* detail */
#detailView h2.name{ font-size:22px; margin:6px 0 2px; }
.pagetitle{ font-size:22px; margin:6px 0 4px; text-transform:none; letter-spacing:-.01em; color:var(--ink); }
.profile{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin:12px 0 18px; }
.profile .row{ display:flex; flex-wrap:wrap; gap:20px; }
.profile .fld{ font-size:13px; } .profile .fld span{ color:var(--mut); font-size:11px; display:block; margin-bottom:2px; }
.profile .fld input{ border:1px solid var(--line); border-radius:7px; padding:6px 8px; font-size:13px; min-width:160px; }
.profile .editbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.section-head{ display:flex; justify-content:space-between; align-items:center; margin:22px 0 6px; }
.section-head h3{ font-size:15px; margin:0; }
/* The sort segment is a CHOICE; the export buttons are ACTIONS. With one uniform 6px gap they
   read as a single strip of six equally-weighted controls -- which is exactly how it looked after
   a third sort button was added and the row ran out of room. Separate the two groups, and let the
   row wrap as a whole rather than cramming. */
.sortwrap{ display:flex; gap:6px; align-items:center; font-size:12px; color:var(--mut);
  flex-wrap:wrap; row-gap:8px; }
.sortwrap .exports{ display:inline-flex; gap:6px; align-items:center;
  margin-left:8px; padding-left:14px; border-left:1px solid var(--line); }
/* "Export:" is the group's label, the same role "Sort:" plays for the segment -- saying it once
   here instead of on all three buttons is what buys back the width the third sort button took. */
/* When the row wraps, the exports start a line of their own -- a leading divider on a new line
   reads as a stray mark, so drop it at the width where wrapping actually happens. */
@media (max-width: 1100px){
  .sortwrap .exports{ margin-left:0; padding-left:0; border-left:none; }
}
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button{ border:none; background:#fff; padding:6px 12px; font-size:12px; cursor:pointer; }
.seg button.active{ background:var(--accent); color:#fff; }
.changes{ font-size:11.5px; color:var(--mut); margin:3px 0 0; }
a.joblink{ color:var(--accent); text-decoration:none; font-weight:500; } a.joblink:hover{ text-decoration:underline; }

/* modal */
.modal{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:grid; place-items:center; z-index:50; }
.modal-card{ background:#fff; width:560px; max-width:94vw; max-height:92vh; overflow:auto; border-radius:16px; padding:22px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.modal-head h3{ margin:0; font-size:18px; }
.x{ border:none; background:none; font-size:18px; cursor:pointer; color:var(--mut); }
.drop{ display:block; border:2px dashed #c7d0e0; border-radius:12px; padding:26px; text-align:center;
  color:var(--mut); cursor:pointer; background:#fafbff; }
.drop.has{ border-color:var(--accent); color:var(--accent); background:#f0f5ff; }
.hint{ font-size:12px; color:var(--mut); margin:10px 0 14px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid label{ font-size:12px; color:#374151; display:flex; flex-direction:column; gap:4px; }
.form-grid label.wide{ grid-column:1/3; }
.form-grid small{ color:var(--mut); }
.form-grid input,.form-grid select{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; }
.modal-foot{ display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:18px; }
.hidden{ display:none; }

/* application review modal */
.wide-modal{ width:1000px; max-width:96vw; }
.appmeta{ font-size:12px; color:var(--mut); margin-top:3px; }
.app-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; }
.app-grid h4{ margin:0 0 8px; font-size:14px; } .app-grid h4 small{ color:var(--mut); font-weight:400; }
.lbl{ font-size:11px; color:var(--mut); display:block; margin:10px 0 3px; text-transform:uppercase; letter-spacing:.03em; }
.app-grid textarea{ width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  font-size:13px; font-family:inherit; resize:vertical; line-height:1.5; }
.role-edit{ margin-bottom:10px; }
.role-h{ font-size:12.5px; font-weight:600; color:#334155; margin:8px 0 3px; }
.ansrow{ margin-bottom:9px; }
.ansrow label{ font-size:11.5px; color:#475569; display:block; margin-bottom:3px; }
.ansrow input{ width:100%; border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-size:13px; }
.changes-d{ margin-top:12px; font-size:12px; color:var(--mut); }
.changes-d ul{ margin:6px 0; padding-left:18px; } .changes-d li{ margin:3px 0; }
.statepill{ font-size:10.5px; padding:2px 8px; border-radius:20px; margin-left:8px; font-weight:600; }
.statepill.submitted{ background:#ecfdf3; color:var(--gold); } .statepill.approved{ background:#dbeafe; color:#1d4ed8; }
.statepill.skipped{ background:#f1f5f9; color:#64748b; }

/* ---------------- auth gate (login / first-run) ---------------- */
.authgate{ position:fixed; inset:0; background:var(--bg); display:grid; place-items:center; z-index:100; }
/* two-class rule so it always beats the single-class .hidden regardless of source order */
.authgate.hidden{ display:none; }
.auth-card{ background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:30px 32px; width:360px; max-width:92vw; box-shadow:0 12px 40px rgba(15,23,42,.10); }
.auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.auth-brand h1{ font-size:22px; margin:0; }
.auth-pane h2{ font-size:16px; text-transform:none; letter-spacing:0; color:var(--ink); margin:0 0 14px; }
.auth-pane input{ display:block; width:100%; border:1px solid var(--line); border-radius:9px;
  padding:10px 12px; font-size:14px; margin-bottom:12px; }
.auth-pane input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.auth-pane .btn.primary{ width:100%; padding:10px; font-size:14px; }
.auth-msg{ font-size:12.5px; margin-top:10px; min-height:16px; color:#dc2626; }
.auth-msg.ok{ color:var(--gold); }

/* header user chip */
.userchip{ font-size:12px; color:var(--mut); font-weight:600; padding-left:6px; }

/* Today / This Week / This Month completed counters — recruiter apply-cadence per candidate.
   CARD (default): three stacked bordered tiles in a row (label over number). */
.cw{ display:flex; gap:6px; margin:8px 0 2px; flex-wrap:nowrap; }
.cw-cell{ flex:1 1 0; min-width:0; text-align:center; background:#ecfdf3;
  border:1px solid #c9efd6; border-radius:8px; padding:6px 4px; }
.cw-cell span{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.02em;
  color:#5b6b7a; white-space:nowrap; }
.cw-cell b{ display:block; font-size:18px; line-height:1.15; color:var(--gold); }
/* DETAIL header (inline): one compact line on the "Matched jobs" row — each count KEEPS its
   bordered green box (like dev), label + number side by side, never wrapping mid-word. */
.section-head{ flex-wrap:wrap; row-gap:8px; }
.cw.cw-inline{ display:inline-flex; align-items:center; gap:8px; margin:0; flex:0 0 auto; white-space:nowrap; }
.cw-inline .cw-lab{ font-size:12px; font-weight:600; color:#475569; }
.cw-inline .cw-cell{ display:inline-flex; align-items:baseline; gap:5px; flex:0 0 auto; padding:3px 10px; }
.cw-inline .cw-cell span{ display:inline; font-size:10px; }
.cw-inline .cw-cell b{ display:inline; font-size:14px; }

/* ---------------- admin page (full-width + spacious — matches the dev branch UX) ---------------- */
#adminView{ padding:20px 40px 56px; animation:fadein .18s ease; }        /* full browser width, roomy gutters */
@keyframes fadein{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
#adminView .pagetitle{ margin:10px 0 12px; }
#adminView .section-head{ margin:28px 0 12px; }
#adminView .profile{ padding:22px 24px; margin:0 0 6px; }
#adminView table{ margin-top:6px; }
#adminView th{ padding:12px 14px; }
#adminView td{ padding:14px 14px; font-size:13px; vertical-align:middle; }
#adminView .fld input{ min-width:220px; }
#adminView .btn.sm{ margin-right:6px; }
.assignsel{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; min-width:190px; }
.assignsel:focus, #adminView .fld input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* live-form preview */
.preview-area{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.preview-load{ padding:24px; text-align:center; color:var(--mut); font-size:14px; background:#fafbff; border-radius:10px; }
.preview-head{ font-size:13px; color:#334155; margin-bottom:10px; } .preview-head .muted{ color:var(--mut); }
.preview-img{ width:100%; border:1px solid var(--line); border-radius:10px; box-shadow:0 4px 16px rgba(15,23,42,.08); }

/* §31j matched-jobs pagination */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px;
         flex-wrap:wrap; margin:12px 2px 4px; }
.pager .muted { font-size:13px; }
.pgnav { display:flex; gap:4px; flex-wrap:wrap; }
.pgbtn { border:1px solid #d1d5db; background:#fff; color:#374151; border-radius:6px;
         padding:4px 10px; font-size:13px; cursor:pointer; min-width:34px; }
.pgbtn:hover:not(:disabled):not(.active) { background:#f3f4f6; }
.pgbtn.active { background:#1f4e78; color:#fff; border-color:#1f4e78; font-weight:600; }
.pgbtn:disabled { opacity:.45; cursor:default; }