/* ==========================================================================
   JUNO — Calm Confidence (#38B6FF · #76787C · Poppins)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --blue: #38B6FF;
  --blue-700: #1E97DC;
  --blue-300: #8FD5FF;
  --blue-100: #DEF1FF;
  --blue-50:  #F0F8FF;
  --blue-glow: rgba(56, 182, 255, 0.32);

  --gray: #76787C;
  --gray-700: #4D4F53;
  --gray-500: #76787C;
  --gray-400: #9DA0A4;
  --gray-300: #C7C9CD;
  --gray-200: #E4E6EA;
  --gray-100: #F0F2F5;
  --gray-50:  #F7F8FA;

  /* Semantic */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-3: #F4F6F9;
  --line: #ECEFF3;
  --line-strong: #DBE0E6;

  --ink: #0F1216;
  --ink-soft: #2A2D32;
  --ink-muted: #76787C;
  --ink-faint: #A4A6AA;

  --green: #1FB079;
  --green-pale: #E5F5EE;
  --amber: #E8A62C;
  --amber-pale: #FBF1DC;
  --red: #E55353;
  --red-pale: #FDEAEA;

  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Legacy aliases — old HTML inline styles map to new palette */
  --oxblood: var(--blue);
  --oxblood-deep: var(--blue-700);
  --oxblood-bright: var(--blue);
  --forest: var(--green);
  --forest-deep: var(--green);
  --forest-bright: var(--green);
  --ochre: var(--blue);
  --ochre-deep: var(--blue-700);
  --bone: var(--bg);
  --bone-shadow: var(--surface-2);
  --paper: var(--surface);
  --paper-deep: var(--surface-2);
  --line-soft: var(--line);
  --line-faint: var(--line);
  --gold-pale: var(--amber-pale);
  --serif: var(--sans);

  /* Topbar (light) */
  --topbar-bg: rgba(255, 255, 255, 0.85);

  --shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.04), 0 1px 3px rgba(15, 18, 22, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 18, 22, 0.05), 0 1px 3px rgba(15, 18, 22, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 18, 22, 0.08), 0 4px 8px rgba(15, 18, 22, 0.04);
  --shadow-blue: 0 8px 24px rgba(56, 182, 255, 0.28);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

body {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(56, 182, 255, 0.04), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(56, 182, 255, 0.03), transparent 50%);
  min-height: 100vh;
}

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

::selection { background: var(--blue); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-300); }

/* ==========================================================================
   TYPE UTILITIES
   ========================================================================== */

.mono { font-family: var(--mono); }

.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.label-blue { color: var(--blue); }
.label-ink  { color: var(--ink); }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--blue-100);
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.display {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.italic { font-style: italic; }

/* ==========================================================================
   LOGIN
   ========================================================================== */

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--bg);
  position: relative;
}

.login-art {
  position: relative;
  background: linear-gradient(135deg, #0F1216 0%, #16191E 60%, #0A0C10 100%);
  color: #fff;
  padding: 48px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Glow + dot grid in hero */
.login-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 600px at 80% 30%, rgba(56, 182, 255, 0.22), transparent 60%),
    radial-gradient(500px 400px at 10% 90%, rgba(56, 182, 255, 0.12), transparent 60%);
  pointer-events: none;
}

.login-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  mask: radial-gradient(ellipse 70% 60% at 60% 40%, black 30%, transparent 70%);
  pointer-events: none;
}

.login-art > * { position: relative; z-index: 2; }

.login-mark {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-mark .symbol {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  box-shadow: var(--shadow-blue);
  position: relative;
}

.login-mark .symbol::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 1px solid rgba(56, 182, 255, 0.3);
}

.login-mark .word {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.login-mark .word b { color: var(--blue); }

.login-headline {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(56px, 7.5vw, 96px);
  line-height: 1;
  letter-spacing: -0.045em;
  margin-bottom: 28px;
}

.login-headline .accent {
  color: var(--blue);
  font-weight: 300;
  font-style: italic;
}

.login-blurb {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  max-width: 480px;
  color: rgba(255,255,255,0.72);
}

.login-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.login-meta .pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.login-meta .pill {
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}

.login-meta .pill .num {
  color: var(--blue);
  font-family: var(--mono);
  font-weight: 600;
}

.login-meta .ver {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
}

/* Form side */
.login-form {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 72px;
  position: relative;
}

.login-form-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-muted);
}

.login-form-top a {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 2px;
  transition: all 180ms ease;
}

.login-form-top a:hover { color: var(--blue); border-color: var(--blue); }

.login-form-main { max-width: 400px; width: 100%; align-self: center; }

.login-form-main .eyebrow { margin-bottom: 22px; }

.login-form-main h2 {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 12px;
}

.login-form-main h2 em {
  font-style: italic;
  color: var(--blue);
  font-weight: 300;
}

.login-form-main .lead {
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 36px;
  line-height: 1.55;
}

.login-error {
  margin-top: 16px;
  padding: 11px 14px;
  background: var(--red-pale);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
}


.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: 0.005em;
}

.field-input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 0 16px;
  transition: all 180ms ease;
}

.field-input:focus-within {
  border-color: var(--blue);
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--blue-100);
}

.field-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}

.field-input input::placeholder { color: var(--ink-faint); }

.field-input .field-key {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-muted);
}

.login-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.login-row input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 160ms ease;
}

.login-row input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}

.login-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.login-row a { color: var(--blue); font-weight: 500; }
.login-row a:hover { color: var(--blue-700); }

.btn-primary {
  width: 100%;
  margin-top: 26px;
  padding: 16px 22px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
  position: relative;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-blue);
}

.btn-primary:hover {
  background: var(--blue-700);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(56, 182, 255, 0.4);
}

.btn-primary:active { transform: translateY(0); }

.btn-primary .arrow {
  transition: transform 200ms ease;
  font-size: 16px;
}

.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-secondary {
  margin-top: 12px;
  width: 100%;
  padding: 15px 22px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 180ms ease;
}

.btn-secondary:hover { border-color: var(--ink); background: var(--bg); }

.divider-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 500;
}

.divider-or::before, .divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.login-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-faint);
}

.login-footer a:hover { color: var(--blue); }

#login-err {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--red-pale);
  border: 1px solid #F5C2C2;
  font-size: 13px;
  font-weight: 500;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   APP SHELL
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 0 14px;
}

.sidebar-mark {
  padding: 22px 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.sidebar-mark .v {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  background: var(--gray-100);
  padding: 3px 7px;
  border-radius: 4px;
}

.sidebar-section { padding: 14px 0 6px; }

.sidebar-section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 12px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sidebar-section-label .num { color: var(--ink-faint); font-family: var(--mono); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-700);
  border-radius: 8px;
  position: relative;
  transition: all 160ms ease;
  cursor: pointer;
  margin-bottom: 2px;
}

.nav-item .num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  font-weight: 500;
  width: 18px;
}

.nav-item:hover {
  background: var(--gray-100);
  color: var(--ink);
}

.nav-item.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(56, 182, 255, 0.22);
}

.nav-item.active .num { color: rgba(255,255,255,0.7); }

.nav-item .badge {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.22);
  color: #fff;
  padding: 2px 7px;
  border-radius: 100px;
}

.nav-item:not(.active) .badge {
  background: var(--blue);
  color: #fff;
}

.sidebar-foot {
  margin-top: auto;
  padding: 14px 0 18px;
  border-top: 1px solid var(--line);
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--line);
  transition: all 180ms ease;
}

.user-card:hover { border-color: var(--gray-300); }

.user-avatar {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(56, 182, 255, 0.28);
}

.user-meta { flex: 1; min-width: 0; }
.user-meta .name { font-size: 13px; font-weight: 600; }
.user-meta .role {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
}

.user-card .pulse {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.user-card .pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-ring 1.8s ease-in-out infinite;
  opacity: 0.4;
}

@keyframes pulse-ring {
  0%, 100% { transform: scale(0.85); opacity: 0; }
  50% { transform: scale(1.6); opacity: 0.5; }
}

/* ==========================================================================
   MAIN AREA
   ========================================================================== */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 36px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-muted);
}

.crumbs .sep { color: var(--gray-300); }
.crumbs .here { color: var(--ink); font-weight: 600; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.juno-mark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.juno-text {
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #42A5F5 0%, #1E88E5 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.juno-o {
  display: inline-block;
  width: 19px;
  height: 19px;
  /* Sit immediately after the 'n' with no extra gap — letter-spacing on
     .juno-text already provides the natural inter-letter rhythm. */
  margin-left: 0;
  vertical-align: middle;
  /* Nudge to align the ring center with the lowercase x-height */
  position: relative;
  top: 1px;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius);
  width: 320px;
  font-size: 13px;
  color: var(--ink-muted);
  transition: all 180ms ease;
}

.search:hover { border-color: var(--gray-300); background: var(--bg); }
.search:focus-within { border-color: var(--blue); background: var(--bg); box-shadow: 0 0 0 4px var(--blue-100); }

.search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--ink);
}

.search .keys {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
}

.icon-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 160ms ease;
  position: relative;
  font-size: 16px;
  color: var(--gray-700);
}

.icon-btn:hover { background: var(--bg); border-color: var(--gray-300); color: var(--ink); }

.icon-btn .dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--blue);
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.content {
  padding: 36px 40px 80px;
  max-width: 1480px;
  width: 100%;
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.page-header {
  padding-bottom: 32px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  border-bottom: 1px solid var(--line);
}

.page-header .pre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 500;
}

.page-header .pre .ed {
  background: var(--ink);
  color: #fff;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}

.page-header .pre .dot { color: var(--blue); }

.page-header h1 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.page-header h1 em {
  font-style: italic;
  color: var(--blue);
  font-weight: 300;
}

.page-header .lede {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-muted);
  max-width: 520px;
  margin-top: 16px;
  line-height: 1.55;
}

.page-header .actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
}

.btn-dark {
  background: var(--ink);
  color: #fff;
}

.btn-dark:hover { background: var(--blue); box-shadow: var(--shadow-blue); }

.btn-blue {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}

.btn-blue:hover { background: var(--blue-700); transform: translateY(-1px); }

.btn-ghost {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-ghost:hover { border-color: var(--gray-300); background: var(--bg); }

.btn .arrow { font-size: 14px; transition: transform 180ms ease; }
.btn:hover .arrow { transform: translateX(2px); }

/* ==========================================================================
   STATS / METRICS
   ========================================================================== */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  position: relative;
  transition: all 220ms ease;
  overflow: hidden;
}

.stat::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at 100% 0%, var(--blue-100), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

.stat:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.stat:hover::before { opacity: 1; }

.stat .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}

.stat .head .label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  text-transform: none;
}

.stat .head .label .num {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--blue-50);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.stat .delta {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 100px;
}

.stat .delta.up { color: var(--green); background: var(--green-pale); }
.stat .delta.down { color: var(--red); background: var(--red-pale); }

.stat .value {
  font-family: var(--sans);
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat .value sub {
  font-size: 16px;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: middle;
}

.stat .foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 400;
}

.stat .spark {
  height: 22px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.stat .spark span {
  flex: 1;
  background: var(--gray-200);
  min-height: 3px;
  border-radius: 1px;
}

.stat .spark span.hi { background: var(--blue); }

/* ==========================================================================
   GRID LAYOUTS
   ========================================================================== */

.row {
  display: grid;
  gap: 20px;
  margin-bottom: 24px;
}

.row.r-2 { grid-template-columns: 1.6fr 1fr; }
.row.r-2eq { grid-template-columns: 1fr 1fr; }
.row.r-3 { grid-template-columns: 1fr 1fr 1fr; }
.row.r-12 { grid-template-columns: 1fr 2fr; }
.row.r-21 { grid-template-columns: 2fr 1fr; }

/* ==========================================================================
   PANELS / CARDS
   ========================================================================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.panel-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-head .title {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.panel-head h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.panel-head h3 em { font-style: italic; color: var(--blue); font-weight: 400; }

.panel-head .meta {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 500;
}

.panel-head .right {
  display: flex;
  gap: 14px;
  align-items: center;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 100px;
}

.tabs button {
  color: var(--ink-muted);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100px;
  transition: all 160ms ease;
}

.tabs button.active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.tabs button:not(.active):hover { color: var(--ink); }

.panel-body { padding: 22px 24px; }

.panel-body.flush { padding: 0; }

/* ==========================================================================
   ACTIVITY FEED
   ========================================================================== */

.feed-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  transition: background 180ms ease;
}

.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: var(--surface-2); }

.feed-item .when {
  font-size: 11px;
  color: var(--ink-muted);
  padding-top: 4px;
  font-weight: 500;
}

.feed-item .icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.feed-item.t-score .icon { background: var(--green-pale); color: var(--green); }
.feed-item.t-msg .icon { background: var(--amber-pale); color: var(--amber); }
.feed-item.t-job .icon { background: var(--blue-100); color: var(--blue); }
.feed-item.t-int .icon { background: var(--gray-100); color: var(--ink); }

.feed-item .body { line-height: 1.5; }

.feed-item .body .who {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.feed-item .body .verb {
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 13.5px;
}

.feed-item .body .what {
  color: var(--blue);
  font-weight: 500;
}

.feed-item .body .detail {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 400;
}

.feed-item .score {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.04em;
  align-self: center;
}

.feed-item .score sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 500;
}

.score-good { color: var(--green); }
.score-mid { color: var(--amber); }
.score-low { color: var(--red); }

/* ==========================================================================
   INTERVIEW LIST
   ========================================================================== */

.interview {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 160ms ease;
}

.interview:hover { background: var(--surface-2); }
.interview:last-child { border-bottom: none; }

.interview .time {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  width: 64px;
}

.interview .time .ampm { color: var(--ink-faint); font-size: 10px; font-weight: 500; text-transform: uppercase; }

.interview .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.interview .role {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.interview .pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0;
}

.interview .pill.confirmed { background: var(--green-pale); color: var(--green); }
.interview .pill.pending { background: var(--amber-pale); color: var(--amber); }

/* ==========================================================================
   CANDIDATE TABLE / ROW
   ========================================================================== */

.cand-row {
  display: grid;
  grid-template-columns: 32px 2fr 1.4fr 0.9fr 1.4fr 0.5fr;
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 160ms ease;
}

.cand-row:hover { background: var(--surface-2); }
.cand-row:last-child { border-bottom: none; }

.cand-row.head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 12px 24px;
}

.cand-row.head:hover { background: var(--surface-2); }

.cand-row .index {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 500;
}

.cand-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.cand-meta {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 3px;
  font-weight: 400;
}

.cand-job {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
}

.cand-job .at { color: var(--ink-faint); }

.cand-stage {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
}

.cand-stage::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.cand-stage.s-review { background: var(--blue-100); color: var(--blue-700); }
.cand-stage.s-screen { background: var(--amber-pale); color: var(--amber); }
.cand-stage.s-int { background: var(--green-pale); color: var(--green); }

.cand-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cand-bar .num {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.03em;
  width: 36px;
  text-align: right;
}

.bar {
  flex: 1;
  height: 5px;
  background: var(--gray-100);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.bar .fill {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform-origin: left;
  border-radius: 100px;
}

.bar .fill.mid { background: var(--amber); }
.bar .fill.low { background: var(--red); }

.cand-action {
  font-size: 18px;
  text-align: right;
  color: var(--ink-faint);
  transition: all 160ms ease;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cand-row:hover .cand-action { color: var(--blue); background: var(--blue-100); }

/* ==========================================================================
   PIPELINE
   ========================================================================== */

.pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.pipe-stage {
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  transition: all 220ms ease;
}

.pipe-stage:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pipe-stage::after {
  content: "→";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 11px;
  color: var(--ink-muted);
  z-index: 2;
  font-weight: 600;
}

.pipe-stage:last-child::after { display: none; }

.pipe-stage .stage-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 8px;
  font-weight: 600;
}

.pipe-stage .stage-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.pipe-stage .count {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 300;
  margin-top: 14px;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}

.pipe-stage .delta {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 8px;
  font-weight: 500;
}

.pipe-stage .delta.up { color: var(--green); }
.pipe-stage .delta.down { color: var(--red); }

/* ==========================================================================
   JOBS PAGE
   ========================================================================== */

.job-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 16px;
  position: relative;
  transition: all 240ms ease, max-height 350ms cubic-bezier(.4, 0, .2, 1);
  cursor: pointer;
}

.job-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.job-card:hover:not(.expanded)::before {
  content: "Click to view candidates ↓";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  pointer-events: none;
}

.job-card.expanded {
  cursor: default;
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: var(--blue-700);
}
.job-card.expanded:hover { transform: none; }

/* keep inner interactive elements feeling clickable */
.job-card a,
.job-card .src-btn,
.job-card .stage-pill,
.job-card .total {
  cursor: pointer;
}

.job-expansion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 380ms cubic-bezier(.4, 0, .2, 1), margin-top 380ms ease;
  margin-top: 0;
  position: relative;
  border-top: 1px solid transparent;
}
.job-card.expanded .job-expansion {
  max-height: 90vh;
  margin-top: 20px;
  border-top-color: var(--line);
}
.job-expansion-iframe {
  width: 100%;
  height: 78vh;
  border: 0;
  display: block;
  border-radius: 8px;
  background: var(--surface-2);
}
.job-expansion-close {
  position: absolute;
  top: -14px;
  right: 14px;
  z-index: 3;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.job-expansion-close:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* Embed mode (applicants page rendered inside an iframe in a job card)
   — suppress the global chrome (sidebar + topbar) AND the redundant in-page
   chrome (breadcrumb + h1) that's already shown on the parent card. */
body[data-embed="1"] .app-shell {
  display: block;
  min-height: 0;
  padding-top: 0;
}
body[data-embed="1"] .sidebar,
body[data-embed="1"] .topbar {
  display: none !important;
}
body[data-embed="1"] .main {
  display: block;
}
body[data-embed="1"] .content {
  padding: 12px 18px 24px;
}
body[data-embed="1"] .app-banner .crumb,
body[data-embed="1"] .app-banner h1 {
  display: none;
}
body[data-embed="1"] .app-banner {
  padding-top: 12px;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
body[data-embed="1"] .app-banner .role-summary {
  margin-top: 0;
}

.job-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.job-head .ribbon {
  font-size: 11px;
  font-weight: 500;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--ink-muted);
  align-items: center;
}

.job-head .ribbon .live {
  color: var(--green);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--green-pale);
  padding: 3px 10px;
  border-radius: 100px;
}

.job-head .ribbon .live::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(31, 176, 121, 0.18);
}

.job-head .ribbon span:not(.live) {
  font-family: var(--mono);
  font-size: 11px;
}

.job-head h2 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.job-head h2 em { font-style: italic; color: var(--blue); font-weight: 300; }

.job-head .deck {
  font-size: 14px;
  color: var(--ink-muted);
  margin-top: 8px;
  max-width: 540px;
  line-height: 1.55;
}

.job-head .stats-mini {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.job-head .stats-mini .big {
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}

.job-head .stats-mini .lbl {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
}

.req-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.req-col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.req-col h4 b {
  margin-left: auto;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 11px;
}

.req-col.must h4 { color: var(--blue); }

.req-col h4::after {
  content: "";
  flex: 0 0 auto;
  width: 0;
}

.req-list { list-style: none; }

.req-list li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  align-items: baseline;
  color: var(--ink-soft);
  font-weight: 400;
}

.req-list li:last-child { border-bottom: none; }

.req-list li .check {
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 600;
}

.req-list li .weight {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
}

.req-list.must li .check { color: var(--blue); }

.job-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-muted);
}

.job-foot .src {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
}

.job-foot .src::before {
  content: "↻";
  font-size: 14px;
  color: var(--blue);
}

.job-foot .links {
  display: flex;
  gap: 18px;
}

.job-foot .links a {
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}

.job-foot .links a:hover { border-color: var(--blue); color: var(--blue); }

/* Pipeline strip on a job card */
.job-pipe {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}
.job-pipe .total {
  display: flex;
  flex-direction: column;
  line-height: 1;
  border-right: 1px solid var(--line);
  padding-right: 22px;
}
.job-pipe .total .n {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.job-pipe .total .l {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.job-pipe .stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.job-pipe .stage-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.job-pipe a.stage-pill:hover {
  border-color: var(--ink);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -10px rgba(0,0,0,0.4);
}
.job-pipe a.total {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: 8px;
  transition: background 120ms ease;
}
.job-pipe a.total:hover { background: var(--bg); }
.job-pipe .stage-pill .c {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
}
.job-pipe .stage-pill.applied .c { color: var(--blue); }
.job-pipe .stage-pill.sourced .c { color: var(--gray-500); }
.job-pipe .stage-pill.screen .c  { color: var(--amber); }
.job-pipe .stage-pill.submit .c  { color: var(--green); }
.job-pipe .stage-pill.interview .c { color: var(--green); }
.job-pipe .stage-pill.disqual .c { color: var(--red); }
.job-pipe .empty {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
}
.job-pipe.is-loading .empty {
  background: linear-gradient(90deg, transparent, var(--blue-100), transparent);
  background-size: 240px 100%;
  background-repeat: no-repeat;
  background-position: -240px 0;
  animation: pipeShimmer 1.4s linear infinite;
  padding: 6px 10px;
  border-radius: 6px;
  font-style: normal;
  color: var(--blue-700);
}
.job-pipe.is-loading .total .n {
  color: var(--ink-faint);
  font-weight: 300;
}
@keyframes pipeShimmer {
  to { background-position: 100% 0; }
}

/* Source / footer link buttons on job card */
.job-foot .src-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--blue);
  color: #fff;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
  border: none;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.job-foot .src-btn:hover {
  background: var(--blue-700);
  box-shadow: var(--shadow-blue);
  transform: translateY(-1px);
}

/* Toolbar above req list — search + filter dropdown + active chips */
.job-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "search filter"
    "chips  chips";
  gap: 12px;
  margin-bottom: 18px;
  align-items: center;
  /* Each .rise card forms its own stacking context via transform; lift the
     toolbar so its open dropdown panel paints above later sibling cards. */
  position: relative;
  z-index: 50;
}

.job-search {
  grid-area: search;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: all 180ms ease;
  min-width: 0;
}
.job-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-100);
}
.job-search > svg { flex: 0 0 auto; color: var(--ink-muted); }
.job-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 0;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
  min-width: 0;
}
.job-search input::placeholder { color: var(--ink-faint); }
.job-search .count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--surface-2);
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.job-search .clear {
  font-size: 18px;
  color: var(--ink-faint);
  padding: 4px 8px;
  cursor: pointer;
  user-select: none;
  transition: color 160ms ease;
}
.job-search .clear:hover { color: var(--ink); }

/* Filter dropdown */
.filter-dropdown {
  grid-area: filter;
  position: relative;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.filter-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.filter-btn[aria-expanded="true"] {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-100);
  background: var(--surface);
}
.filter-btn .chev {
  color: var(--ink-muted);
  transition: transform 200ms ease;
}
.filter-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.filter-btn.has-active { border-color: var(--blue-300); background: var(--blue-50); }
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 540px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: filterPop 160ms cubic-bezier(.2,.7,.3,1.1);
  transform-origin: top right;
}
.filter-panel[hidden],
.filter-badge[hidden] { display: none; }
@keyframes filterPop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.filter-panel-head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.filter-panel-head input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.filter-panel-head input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.filter-clear {
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
}
.filter-clear:hover { color: var(--red); border-color: var(--red); background: var(--red-pale); }

.filter-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.filter-group {
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--line);
}
.filter-group:last-child { border-bottom: none; }
.filter-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.filter-group-head .meta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 120ms ease;
  user-select: none;
}
.filter-option:hover { background: var(--surface-2); }
.filter-option input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: 4px;
  background: var(--surface);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 140ms ease;
  flex: 0 0 auto;
}
.filter-option input:hover { border-color: var(--blue); }
.filter-option input:checked {
  background: var(--blue);
  border-color: var(--blue);
}
.filter-option input:checked::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.filter-option .name {
  flex: 1;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-option .role {
  font-size: 11px;
  color: var(--ink-faint);
  margin-left: 4px;
}
.filter-option .count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 5px;
  flex: 0 0 auto;
}
.filter-option.checked .name { color: var(--ink); font-weight: 500; }
.filter-option.checked .count { background: var(--blue-50); color: var(--blue-700); }
.filter-option.dim { display: none; }

.filter-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

.filter-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.filter-panel-foot #filter-foot-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.filter-apply {
  padding: 8px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 8px;
  cursor: pointer;
  transition: all 140ms ease;
}
.filter-apply:hover { background: var(--blue-700); }

/* Active filter chips */
.filter-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}
.filter-chips:empty { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 10px;
  background: var(--blue-50);
  border: 1px solid var(--blue-300);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--blue-700);
}
.filter-chip .group {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: 0.75;
}
.filter-chip button {
  display: grid;
  place-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(56, 182, 255, 0.18);
  color: var(--blue-700);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: all 140ms ease;
}
.filter-chip button:hover { background: var(--blue); color: #fff; }

/* ==========================================================================
   SCORING PAGE
   ========================================================================== */

.weights-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.weight-row {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 28px 1fr 320px 80px;
  gap: 24px;
  align-items: center;
}

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

.weight-row .num {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weight-row .info h4 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.weight-row .info p {
  font-size: 13px;
  color: var(--ink-muted);
  max-width: 480px;
  line-height: 1.5;
  font-weight: 400;
}

.slider {
  position: relative;
  height: 6px;
  background: var(--gray-100);
  border-radius: 100px;
  cursor: pointer;
}

.slider .filled {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform-origin: left;
  border-radius: 100px;
}

.slider .knob {
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  background: var(--bg);
  border: 2px solid var(--blue);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  transition: scale 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 4px 8px rgba(56, 182, 255, 0.28);
}

.slider .knob:hover { scale: 1.1; box-shadow: 0 4px 12px rgba(56, 182, 255, 0.4); }
.slider .knob:active { cursor: grabbing; }

.weight-row .pct {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.04em;
  text-align: right;
  color: var(--ink);
}

.weight-row .pct sub {
  font-size: 13px;
  color: var(--ink-faint);
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 6px;
}

.score-summary {
  display: flex;
  gap: 32px;
  padding: 32px 36px;
  background: linear-gradient(135deg, #0F1216 0%, #1A1D22 100%);
  color: #fff;
  margin-bottom: 28px;
  align-items: center;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.score-summary::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--blue-glow), transparent 70%);
  pointer-events: none;
}

.score-summary > * { position: relative; z-index: 2; }

.score-summary .display-num {
  font-family: var(--sans);
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 300;
}

.score-summary .display-num em {
  font-style: italic;
  color: var(--blue);
  font-weight: 200;
  font-size: 56px;
  letter-spacing: 0;
  margin-left: -10px;
}

.score-summary .breakdown {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.score-summary .breakdown .bd-cell {
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 18px;
}

.score-summary .breakdown .bd-cell:first-child { border-left: none; padding-left: 0; }

.score-summary .bd-cell .lbl {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
  line-height: 1.3;
}

.score-summary .bd-cell .lbl b { color: var(--blue); font-family: var(--mono); margin-right: 4px; }

.score-summary .bd-cell .val {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.score-summary .bd-cell .micro {
  height: 4px;
  background: rgba(255,255,255,0.08);
  margin-top: 10px;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.score-summary .bd-cell .micro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform-origin: left;
  border-radius: 100px;
}

.thresholds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.threshold {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: all 220ms ease;
}

.threshold:hover { border-color: var(--gray-300); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.threshold::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
}

.threshold.t-pass::before { background: var(--green); }
.threshold.t-review::before { background: var(--amber); }
.threshold.t-reject::before { background: var(--red); }

.threshold .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.threshold .head .lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 100px;
}

.threshold.t-pass .head .lbl { color: var(--green); background: var(--green-pale); }
.threshold.t-review .head .lbl { color: var(--amber); background: var(--amber-pale); }
.threshold.t-reject .head .lbl { color: var(--red); background: var(--red-pale); }

.threshold .range {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  color: var(--ink);
}

.threshold .range em { font-style: normal; color: var(--ink-faint); margin: 0 4px; font-weight: 300; }

.threshold .desc {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 400;
  line-height: 1.5;
}

/* ==========================================================================
   SCREENING / CHAT
   ========================================================================== */

.chat-shell {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  height: 720px;
  overflow: hidden;
}

.chat-list {
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.chat-list .filter-bar {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 4px;
  background: var(--surface-2);
}

.chat-list .filter-bar button {
  color: var(--ink-muted);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100px;
  transition: all 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chat-list .filter-bar button.active {
  color: var(--ink);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}

.chat-list .filter-bar button .ct {
  background: var(--gray-200);
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
}

.chat-list .filter-bar button.active .ct {
  background: var(--blue);
  color: #fff;
}

.conv {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 160ms ease;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
}

.conv:hover { background: var(--surface-2); }

.conv.active {
  background: var(--blue-50);
  border-left: 3px solid var(--blue);
  padding-left: 15px;
}

.conv .avatar {
  width: 38px; height: 38px;
  background: var(--gray-100);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conv.active .avatar { background: var(--blue); color: #fff; }

.conv .conv-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.conv .nm {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.conv-meta {
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 500;
}

.conv .preview {
  font-size: 12.5px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 6px;
  font-weight: 400;
}

.conv .stage {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--gray-100);
  color: var(--ink-muted);
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-block;
}

.conv.active .stage { background: var(--blue); color: #fff; }

.chat-thread {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
}

.thread-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
}

.thread-head .who h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.thread-head .who .sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-weight: 500;
}

.thread-head .actions { display: flex; gap: 8px; }

.thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.bubble {
  max-width: 78%;
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  position: relative;
  border-radius: 14px;
  font-weight: 400;
}

.bubble.from-bot {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

.bubble.from-bot::before {
  content: "Juno";
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bubble.from-bot::after {
  content: "";
  position: absolute;
  top: -16px;
  left: -10px;
  width: 6px; height: 6px;
  background: var(--blue);
  border-radius: 50%;
}

.bubble.from-cand {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bubble.from-cand::before {
  content: "Candidate";
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
}

.bubble .time {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  margin-top: 8px;
  color: var(--ink-faint);
  font-weight: 500;
}

.bubble.from-cand .time { color: rgba(255,255,255,0.65); }

.bubble strong {
  color: var(--blue);
  font-style: italic;
  font-weight: 600;
}

.thread-foot {
  border-top: 1px solid var(--line);
  padding: 18px 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thread-foot textarea {
  width: 100%;
  min-height: 56px;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--sans);
  color: var(--ink);
}

.thread-foot textarea::placeholder { color: var(--ink-faint); }

.thread-foot .controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thread-foot .ai-suggest {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.thread-foot .ai-suggest .sugg {
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 160ms ease;
  color: var(--ink-soft);
  background: var(--surface-2);
}

.thread-foot .ai-suggest .sugg:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-50);
}

.cand-detail {
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 22px 22px 32px;
  background: var(--bg);
}

.cand-detail .head-block {
  text-align: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.cand-detail .big-avatar {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--blue), var(--blue-700));
  color: #fff;
  font-weight: 600;
  font-size: 30px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: var(--shadow-blue);
}

.cand-detail h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cand-detail .sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
  font-weight: 500;
}

.cand-detail .score-block {
  text-align: center;
  margin: 24px 0;
  padding: 24px;
  background: linear-gradient(135deg, var(--blue-50), var(--bg));
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
}

.cand-detail .score-block .big {
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--blue);
}

.cand-detail .score-block .big sub {
  font-size: 18px;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
}

.cand-detail .score-block .lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
}

.detail-section { margin-bottom: 24px; }

.detail-section h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.detail-section .row-kv {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.detail-section .row-kv .k { color: var(--ink-muted); font-weight: 500; }
.detail-section .row-kv .v { font-weight: 600; color: var(--ink); font-family: var(--mono); font-size: 12px; }

.detail-section .resume-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.detail-section .resume-item:last-child { border-bottom: none; }

.detail-section .resume-item .role {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.detail-section .resume-item .where {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-weight: 500;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--gray-100);
  color: var(--ink-soft);
  border-radius: 100px;
}

.tag.match { background: var(--green-pale); color: var(--green); }
.tag.miss { background: var(--red-pale); color: var(--red); text-decoration: line-through; }

.sync-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.7;
}

.sync-status .sync-row { display: flex; justify-content: space-between; }
.sync-status .ok { color: var(--green); font-weight: 600; }

/* ==========================================================================
   INTEGRATIONS
   ========================================================================== */

.integ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Home launcher: cards are links, so strip default anchor styling. */
a.integ-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.signed-as {
  align-self: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.integ-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  position: relative;
  transition: all 240ms ease;
  overflow: hidden;
}

.integ-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.integ-card.connected {
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--bg) 50%);
}

.integ-card .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.integ-logo {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 14px;
  border: 1px solid var(--line);
  letter-spacing: -0.04em;
}

.integ-card.connected .integ-logo {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: var(--shadow-blue);
}

.integ-card .status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--gray-100);
  color: var(--ink-muted);
}

.integ-card .status.live {
  background: var(--green-pale);
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
}

.integ-card .status.live::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.integ-card h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.integ-card .deck {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.5;
}

.integ-card .stats-mini {
  display: flex;
  gap: 24px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.integ-card .stats-mini .si { display: flex; flex-direction: column; gap: 2px; }

.integ-card .stats-mini .si .v {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.integ-card .stats-mini .si .l {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.integ-card .actions {
  margin-top: 18px;
  display: flex;
  gap: 8px;
}

.btn-mini {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 160ms ease;
  border: 1px solid transparent;
}

.btn-mini.dark { background: var(--ink); color: #fff; }
.btn-mini.dark:hover { background: var(--blue); box-shadow: var(--shadow-blue); }

.btn-mini.blue { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-mini.blue:hover { background: var(--blue-700); }

.btn-mini.ghost { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.btn-mini.ghost:hover { border-color: var(--gray-300); background: var(--bg); }

/* ==========================================================================
   WRITEBACK LOG
   ========================================================================== */

.wb-row {
  display: grid;
  grid-template-columns: 100px 36px 1fr auto;
  gap: 18px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 13px;
  transition: background 160ms ease;
}

.wb-row:hover { background: var(--surface-2); }

.wb-row .ts {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
}

.wb-row .icon {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
}

.wb-row .icon.score { background: var(--green-pale); color: var(--green); }
.wb-row .icon.note { background: var(--amber-pale); color: var(--amber); }
.wb-row .icon.msg { background: var(--blue-100); color: var(--blue); }

.wb-row .desc { font-weight: 400; color: var(--ink-soft); }
.wb-row .desc em { font-style: normal; color: var(--ink); font-weight: 600; }

.wb-row .target {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 4px;
}

.wb-row .ok {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--green-pale);
  padding: 3px 9px;
  border-radius: 100px;
}

.wb-row .ok::before { content: "✓"; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flicker {
  from { opacity: 0; }
  to { opacity: 1; }
}

.rise { animation: rise 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.flicker { animation: flicker 800ms ease-out both; }

.r-1 { animation-delay: 60ms; }
.r-2 { animation-delay: 120ms; }
.r-3 { animation-delay: 180ms; }
.r-4 { animation-delay: 240ms; }
.r-5 { animation-delay: 300ms; }
.r-6 { animation-delay: 360ms; }
.r-7 { animation-delay: 420ms; }
.r-8 { animation-delay: 480ms; }

/* ==========================================================================
   MISC
   ========================================================================== */

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.divider .sym {
  color: var(--blue);
  font-size: 14px;
}

.empty-asterisk {
  text-align: center;
  font-size: 18px;
  color: var(--gray-300);
  padding: 40px 0;
  letter-spacing: 0.4em;
}

/* Responsive niceties */
@media (max-width: 1280px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .pipe-stage::after { display: none; }
}

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-art { min-height: 360px; padding: 32px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .row.r-2, .row.r-3, .row.r-12, .row.r-21, .row.r-2eq { grid-template-columns: 1fr; }
  .chat-shell { grid-template-columns: 1fr; height: auto; }
  .chat-list, .cand-detail { display: none; }
  .integ-grid, .thresholds { grid-template-columns: 1fr; }
  .req-grid { grid-template-columns: 1fr; }
  .content { padding: 24px; }
}

/* ==========================================================================
   DARK THEME — html[data-theme="dark"]
   ========================================================================== */

html[data-theme="dark"] {
  --bg:        #0B0D10;
  --surface:   #12151A;
  --surface-2: #161A20;
  --surface-3: #1B2028;
  --line:      #232831;
  --line-strong: #2E3540;

  --ink:       #ECEEF1;
  --ink-soft:  #C6CAD0;
  --ink-muted: #8A8E96;
  --ink-faint: #5C6068;

  --gray-50:  #161A20;
  --gray-100: #1B2028;
  --gray-200: #232831;
  --gray-300: #2E3540;
  --gray-400: #5C6068;
  --gray-500: #8A8E96;
  --gray-700: #C6CAD0;

  --blue-50:  rgba(56, 182, 255, 0.08);
  --blue-100: rgba(56, 182, 255, 0.16);

  --green-pale: rgba(31, 176, 121, 0.14);
  --amber-pale: rgba(232, 166, 44, 0.14);
  --red-pale:   rgba(229, 83, 83, 0.14);

  --topbar-bg: rgba(18, 21, 26, 0.78);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(56, 182, 255, 0.10), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(56, 182, 255, 0.06), transparent 50%);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-color: var(--bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Cards / surfaces with hardcoded white-ink contrast */
html[data-theme="dark"] .btn-dark {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
html[data-theme="dark"] .btn-dark:hover {
  background: var(--blue-700);
  box-shadow: 0 8px 28px rgba(56, 182, 255, 0.42);
}

/* Page-header eyebrow chip — was dark on cream, becomes light on near-black */
html[data-theme="dark"] .page-header .pre .ed {
  background: var(--blue);
  color: #fff;
}

/* Sidebar surfaces */
html[data-theme="dark"] .sidebar { background: var(--surface-2); }
html[data-theme="dark"] .user-card { background: var(--surface-3); }
html[data-theme="dark"] .sidebar-mark .v { background: var(--surface-3); color: var(--ink-muted); }

/* Search keys/keycaps */
html[data-theme="dark"] .search .keys,
html[data-theme="dark"] .field-key {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--ink-muted);
}

/* Inputs — make sure they read on dark */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  color: var(--ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--ink-faint);
}

/* Image-like blocks that rely on near-white backgrounds */
html[data-theme="dark"] .icon-btn { background: var(--surface-3); }
html[data-theme="dark"] .icon-btn:hover { background: var(--surface-2); }

/* Theme toggle button itself */
.theme-toggle {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  background: var(--bg);
  border-color: var(--gray-300);
  color: var(--ink);
}
.theme-toggle .sun, .theme-toggle .moon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 220ms ease, transform 220ms ease;
}
.theme-toggle .moon { opacity: 0; transform: rotate(-40deg) scale(0.6); }
.theme-toggle .sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(40deg) scale(0.6); }
html[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: rotate(0) scale(1); }

/* Login page toggle (placed in top-right) */
.login-theme-toggle {
  position: absolute;
  top: 22px; right: 24px;
  z-index: 5;
}
html[data-theme="dark"] .login-art { background: #07090C; }
html[data-theme="dark"] .login-form { background: var(--bg); }
html[data-theme="dark"] .field-input,
html[data-theme="dark"] .login-form input[type="email"],
html[data-theme="dark"] .login-form input[type="password"] {
  color: var(--ink);
}

/* ============================================================
   APPLICANTS PAGE — candidate list, score column, drawer
   ============================================================ */

.app-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 60%, var(--blue-50) 100%);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.app-banner::before {
  content: '';
  position: absolute;
  right: -120px; top: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(closest-side, var(--blue-glow), transparent 70%);
  pointer-events: none;
}
.app-banner .meta { flex: 1 1 320px; min-width: 0; }
.app-banner .crumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.app-banner .crumb a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
}
.app-banner .crumb a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.app-banner h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--ink);
}
.app-banner h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--blue-700);
}
.app-banner p.deck {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}
.app-banner .right-cluster {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  min-width: 200px;
}
/* Stage tabs row — matches the closed-card .job-pipe .stage-pill aesthetic */
.stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
  padding: 0;
}
.stage-tabs .stage-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.stage-tabs .stage-pill:hover {
  border-color: var(--ink);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -10px rgba(0,0,0,0.4);
}
.stage-tabs .stage-pill.active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.stage-tabs .stage-pill.active:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.stage-tabs .stage-pill .c {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
}
.stage-tabs .stage-pill.applied .c   { color: var(--blue); }
.stage-tabs .stage-pill.sourced .c   { color: var(--gray-500); }
.stage-tabs .stage-pill.screen .c    { color: var(--amber); }
.stage-tabs .stage-pill.submit .c    { color: var(--green); }
.stage-tabs .stage-pill.interview .c { color: var(--green); }
.stage-tabs .stage-pill.disqual .c   { color: var(--red); }
.stage-tabs .stage-pill.active .c {
  /* When the chip is filled (active state), keep the count readable on dark fill */
  color: rgba(255,255,255,0.85);
}

/* score actions toolbar */
.score-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 18px;
  position: sticky;
  top: 12px;
  z-index: 8;
  box-shadow: 0 6px 24px -22px rgba(0,0,0,0.35);
}
.score-bar .selcount {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
}
.score-bar .selcount .n {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.score-bar .gap { flex: 1; }
.score-bar .applicant-q {
  flex: 0 1 280px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 100px;
}
.score-bar .applicant-q input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.score-bar .applicant-q svg { color: var(--ink-muted); flex: none; }
.score-bar .btn-score {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 140ms ease;
}
.score-bar .btn-score:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0,0,0,0.4); }
.score-bar .btn-score:disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.score-bar .btn-score.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.score-bar .btn-score.ghost:hover { border-color: var(--ink); background: var(--surface-2); }
.score-bar .btn-score .badge-mini {
  font-family: var(--mono);
  font-size: 10.5px;
  background: rgba(255,255,255,0.18);
  padding: 1px 6px;
  border-radius: 100px;
}
.score-bar .btn-score.ghost .badge-mini { background: var(--surface-2); color: var(--ink-muted); }

/* Bulk Remove (dismiss briefs) — dark orange to read as destructive but reversible */
.score-bar #btn-dismiss-selected {
  background: #b8560f;
  color: #fff;
  border: 1px solid #b8560f;
}
.score-bar #btn-dismiss-selected:hover {
  background: #944311;
  border-color: #944311;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,0.4);
}
.score-bar #btn-dismiss-selected:disabled {
  background: #b8560f;
  border-color: #b8560f;
  opacity: 0.4;
}
.score-bar #btn-dismiss-selected .badge-mini {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.score-bar .progress {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--blue-700);
  display: none;
  align-items: center;
  gap: 8px;
}
.score-bar .progress.live { display: inline-flex; }
.score-bar .progress .spinner {
  width: 12px; height: 12px;
  border: 1.6px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* candidate table */
.cand-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.cand-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cand-table thead th {
  text-align: left;
  padding: 14px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.cand-table thead th.sortable { cursor: pointer; user-select: none; }
.cand-table thead th.sortable:hover { color: var(--ink); }
.cand-table thead th .sort-arrow { color: var(--blue); margin-left: 4px; }
.cand-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 100ms ease;
}
.cand-table tbody tr:last-child { border-bottom: 0; }
.cand-table tbody tr:hover { background: var(--surface-2); }
.cand-table tbody tr.selected { background: var(--blue-50); }
.cand-table td {
  padding: 14px 16px;
  vertical-align: middle;
  color: var(--ink-soft);
}
.cand-table td.col-check { width: 36px; padding-right: 0; }
.cand-table td.col-check input {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}
.cand-table td.col-name { min-width: 200px; }
.cand-table td.col-name a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  cursor: pointer;
}
.cand-table td.col-name a:hover {
  color: var(--blue-700);
  border-bottom-color: var(--blue);
}
.cand-table td.col-name .sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.cand-table td.col-title { min-width: 220px; }
.cand-table td.col-title .org {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.cand-table td.col-loc {
  font-size: 12px;
  color: var(--ink-muted);
  max-width: 160px;
}
.cand-table td.col-stage span {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--blue-100);
}
.cand-table td.col-stage span.applied  { background: var(--blue-50);   color: var(--blue-700);  border-color: var(--blue-100); }
.cand-table td.col-stage span.sourced  { background: var(--gray-100);  color: var(--gray-700);  border-color: var(--gray-200); }
.cand-table td.col-stage span.screen   { background: var(--amber-pale); color: var(--amber);    border-color: #F2DDA8; }
.cand-table td.col-stage span.submit,
.cand-table td.col-stage span.interview { background: var(--green-pale); color: var(--green); border-color: #BFE9D5; }
.cand-table td.col-stage span.disqual  { background: var(--red-pale);   color: var(--red);     border-color: #F5C7C7; }
.cand-table td.col-source {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.cand-table td.col-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.cand-table td.col-score { width: 110px; }
.cand-table .score-bubble {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  cursor: default;
}
.cand-table .score-bubble.s-high   { background: #E8F8EF; border-color: #BFE9D5; color: var(--green); }
.cand-table .score-bubble.s-mid    { background: var(--amber-pale); border-color: #F2DDA8; color: var(--amber); }
.cand-table .score-bubble.s-low    { background: var(--red-pale); border-color: #F5C7C7; color: var(--red); }
.cand-table .score-bubble.s-pending {
  background: transparent;
  color: var(--ink-faint);
  border: 1px dashed var(--line-strong);
}
.cand-table .score-bubble.s-running {
  color: var(--blue);
  border-color: var(--blue-100);
  background: var(--blue-50);
}
.cand-table .score-bubble .pct { font-size: 9.5px; opacity: 0.7; letter-spacing: 0.04em; }
.cand-table .empty-state {
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-muted);
}

/* candidate detail drawer */
.drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.4);
  backdrop-filter: blur(4px);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.drawer-mask.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(900px, 96vw);
  background: var(--bg);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 60px -30px rgba(0,0,0,0.35);
  border-left: 1px solid var(--line);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.drawer-head .avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  flex: none;
  border: 1px solid var(--blue-100);
  overflow: hidden;
}
.drawer-head .avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-head .name-block { flex: 1; min-width: 0; }
.drawer-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}
.drawer-head .role {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}
.drawer-head .email-line {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
}
.drawer-head .email-line a { color: var(--blue-700); text-decoration: none; }
.drawer-head .email-line a:hover { text-decoration: underline; }
.drawer-head .meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.drawer-head .meta a { color: var(--blue-700); text-decoration: none; }
.drawer-head .meta a:hover { text-decoration: underline; }
.drawer-head .close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: all 120ms ease;
}
.drawer-head .close:hover { background: var(--surface-3); border-color: var(--ink); }
.drawer-body {
  flex: 1;
  overflow: auto;
  padding: 22px 28px 60px;
  display: grid;
  /* Score analysis (left) is the primary read; everything else stacks
     compactly on the right at a fixed-ish width. */
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 32px;
  align-content: start;
}
.drawer-body .col-main { min-width: 0; }
.drawer-body .col-side { min-width: 0; }
.drawer-section {
  margin-bottom: 26px;
}
.drawer-section h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.drawer-section .empty {
  font-size: 12.5px;
  color: var(--ink-faint);
  font-style: italic;
}
.exp-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.exp-row:last-child { border-bottom: 0; }
.exp-row .when {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  padding-top: 3px;
}
.exp-row .what .role {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.exp-row .what .org {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.exp-row .what .desc {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 6px;
  line-height: 1.55;
}
.edu-row {
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink);
}
.edu-row .school { font-weight: 500; }
.edu-row .degree { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.edu-row .when {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-muted); margin-top: 2px;
}

.skill-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.skill-chips span {
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.note-row {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.55;
}
.note-row .meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-muted);
  margin-bottom: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.score-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  margin-bottom: 22px;
}
.score-card .num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--sans);
}
.score-card .num .big {
  font-size: 52px;
  font-weight: 200;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 0.95;
}
.score-card .num .out {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
}
.score-card .ribbon {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.score-card.s-high .ribbon { color: var(--green); }
.score-card.s-mid  .ribbon { color: var(--amber); }
.score-card.s-low  .ribbon { color: var(--red); }
.score-card .breakdown {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.score-card .br-row {
  font-family: var(--mono);
  font-size: 11px;
}
.score-card .br-row .label {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.score-card .br-row .label .val { color: var(--ink); }
.score-card .br-row .bar {
  height: 4px;
  background: var(--line);
  border-radius: 100px;
  overflow: hidden;
}
.score-card .br-row .bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-300), var(--blue));
  border-radius: 100px;
  transition: width 320ms ease;
}
.score-card .matched {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.6;
}
.score-card .matched strong {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.score-card .matched .hint {
  margin-top: 6px;
  font-style: italic;
  font-size: 10.5px;
  color: var(--ink-faint);
}
.score-card .matched .kw {
  display: inline-block;
  padding: 1px 9px;
  margin: 2px 4px 2px 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink);
}
.score-card .matched .kw.kw-hit {
  background: #E8F8EF;
  border-color: #BFE9D5;
  color: var(--green);
}
.score-card .matched .kw.kw-miss {
  background: var(--red-pale);
  border-color: #F5C7C7;
  color: var(--red);
  text-decoration: line-through;
  text-decoration-color: rgba(229,83,83,0.35);
}

.score-card .score-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.score-card .score-sources .src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
}
.score-card .score-sources .src::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.score-card .score-sources .src.ok {
  color: var(--green);
  background: var(--green-pale);
  border-color: transparent;
}
.score-card .score-sources .src.ok::before { background: var(--green); }
.score-card .score-sources .src.none {
  color: var(--ink-muted);
  background: var(--surface-2);
}
.score-card .score-sources .src.none::before { background: var(--gray-300); }

.score-card .verdict {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.55;
}
.score-card.s-high .verdict { border-left-color: var(--green); }
.score-card.s-mid  .verdict { border-left-color: var(--amber); }
.score-card.s-low  .verdict { border-left-color: var(--red); }
.score-card .verdict strong {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.score-card .verdict p {
  margin: 0;
  white-space: pre-wrap;
}

.score-card .analysis {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.score-card .analysis > strong {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.score-card .analysis-row {
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.score-card .analysis-row:last-child { border-bottom: 0; }
.score-card .analysis-row .head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.score-card .analysis-row .head .dim {
  color: var(--ink);
  font-weight: 500;
}
.score-card .analysis-row .head .meta {
  margin-left: auto;
  color: var(--ink-muted);
}
.score-card .analysis-row .head .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
}
.score-card .analysis-row.v-strong  .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(31,176,121,0.15); }
.score-card .analysis-row.v-partial .dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(232,166,44,0.15); }
.score-card .analysis-row.v-neutral .dot { background: var(--ink-faint); box-shadow: 0 0 0 3px rgba(164,166,170,0.18); }
.score-card .analysis-row.v-weak    .dot { background: var(--red); box-shadow: 0 0 0 3px rgba(229,83,83,0.15); }
.score-card .analysis-row p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
  font-family: var(--sans);
}

html[data-theme="dark"] .score-card .verdict { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .score-card .matched .kw.kw-hit {
  background: rgba(31,176,121,0.10); border-color: rgba(31,176,121,0.25); color: var(--green);
}
html[data-theme="dark"] .score-card .matched .kw.kw-miss {
  background: rgba(229,83,83,0.10); border-color: rgba(229,83,83,0.25); color: var(--red);
}
.score-card .score-this {
  margin-top: 16px;
  width: 100%;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 140ms ease;
}
.score-card .score-this:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0,0,0,0.4); }
.score-card .score-this:disabled { background: var(--gray-300); color: var(--gray-500); cursor: not-allowed; transform: none; box-shadow: none; }

.score-card .score-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.score-card .score-actions .score-this { margin-top: 0; }
.score-card .btn-screen {
  width: 100%;
  padding: 10px 16px;
  background: var(--blue-700);
  color: #fff;
  border: 0;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}
.score-card .btn-screen:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px var(--blue-glow); }
.score-card .btn-screen:disabled { background: var(--gray-300); color: var(--gray-500); cursor: not-allowed; transform: none; box-shadow: none; }

.contact-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  font-size: 12.5px;
}
.contact-card .row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.contact-card .row:last-child { border-bottom: 0; }
.contact-card .row .k {
  flex: 0 0 80px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 2px;
}
.contact-card .row .v { flex: 1; color: var(--ink); word-break: break-word; }
.contact-card .row .v a { color: var(--blue-700); text-decoration: none; }
.contact-card .row .v a:hover { text-decoration: underline; }

.files-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 8px;
  transition: all 120ms ease;
}
.files-list a:hover {
  border-color: var(--ink);
  background: var(--surface-3);
}
.files-list a .ico { color: var(--blue-700); }
.files-list a .meta {
  margin-left: auto;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-muted);
}

/* Compact right rail — every section here is secondary to the score on the
   left, so we slim down typography, padding, and chrome.                    */
.col-side.compact .drawer-section { margin-bottom: 18px; }
.col-side.compact .drawer-section h3 {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

/* Contact card: stack key over value so the 320px column doesn't squeeze. */
.col-side.compact .contact-card {
  padding: 12px 14px;
  font-size: 12px;
  border-radius: 10px;
}
.col-side.compact .contact-card .row {
  display: block;
  padding: 6px 0;
}
.col-side.compact .contact-card .row .k {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  margin-bottom: 2px;
  padding-top: 0;
}
.col-side.compact .contact-card .row .v { font-size: 12px; line-height: 1.4; }

/* Work history: single-column layout so the dates sit above the role,
   freeing horizontal room for the role title and organization.            */
.col-side.compact .exp-row {
  display: block;
  padding: 10px 0;
}
.col-side.compact .exp-row .when {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  padding-top: 0;
  text-transform: uppercase;
}
.col-side.compact .exp-row .what .role { font-size: 12.5px; line-height: 1.35; }
.col-side.compact .exp-row .what .org  { font-size: 11px; }
.col-side.compact .exp-row .what .desc {
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 4px;
  /* Long descriptions in a narrow column quickly become a wall of text — clamp
     to 4 lines and let the user expand via the existing toggle if present. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.col-side.compact .files-list a {
  padding: 8px 10px;
  font-size: 11.5px;
  margin-bottom: 6px;
  border-radius: 8px;
}
.col-side.compact .files-list a .meta { font-size: 9.5px; }

.col-side.compact .edu-row { font-size: 12px; padding: 6px 0; }
.col-side.compact .skill-list { font-size: 11.5px; }

@media (max-width: 760px) {
  .drawer-body { grid-template-columns: 1fr; }
}

/* dark mode overrides for the new components */
html[data-theme="dark"] .app-banner {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 60%, rgba(56,182,255,0.06) 100%);
}
html[data-theme="dark"] .app-banner::before { opacity: 0.5; }
html[data-theme="dark"] .cand-table tbody tr.selected { background: rgba(56,182,255,0.10); }
html[data-theme="dark"] .cand-table td.col-stage span.applied { background: rgba(56,182,255,0.10); border-color: rgba(56,182,255,0.25); color: var(--blue-300); }
html[data-theme="dark"] .cand-table td.col-stage span.sourced { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: var(--ink-soft); }
html[data-theme="dark"] .cand-table td.col-stage span.screen { background: rgba(232,166,44,0.10); border-color: rgba(232,166,44,0.25); color: var(--amber); }
html[data-theme="dark"] .cand-table td.col-stage span.submit,
html[data-theme="dark"] .cand-table td.col-stage span.interview { background: rgba(31,176,121,0.10); border-color: rgba(31,176,121,0.25); color: var(--green); }
html[data-theme="dark"] .cand-table td.col-stage span.disqual { background: rgba(229,83,83,0.10); border-color: rgba(229,83,83,0.25); color: var(--red); }
html[data-theme="dark"] .score-bar .btn-score { background: var(--blue); color: #051620; }
html[data-theme="dark"] .score-card .score-this { background: var(--blue); color: #051620; }
html[data-theme="dark"] .drawer { background: var(--bg); }
html[data-theme="dark"] .app-banner .stage-chips a.active { background: var(--blue); color: #051620; border-color: var(--blue); }
html[data-theme="dark"] .cand-table .score-bubble.s-high { background: rgba(31,176,121,0.10); border-color: rgba(31,176,121,0.25); color: var(--green); }
html[data-theme="dark"] .cand-table .score-bubble.s-mid { background: rgba(232,166,44,0.10); border-color: rgba(232,166,44,0.25); color: var(--amber); }
html[data-theme="dark"] .cand-table .score-bubble.s-low { background: rgba(229,83,83,0.10); border-color: rgba(229,83,83,0.25); color: var(--red); }
html[data-theme="dark"] .cand-table .score-bubble.s-running { background: rgba(56,182,255,0.10); border-color: rgba(56,182,255,0.25); color: var(--blue-300); }


/* === LLM-backed score card additions === */
.score-card .gate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.score-card .gate {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.score-card .gate-ok { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.score-card .gate-fail { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }

.score-card .headline {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  margin: 12px 0 8px;
}
.score-card .btn-rewrite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.15s;
}
.score-card .btn-rewrite:hover { background: var(--gray-50); border-color: var(--gray-300); }
.score-card .btn-rewrite:disabled { opacity: 0.6; cursor: default; }

.score-card .why-block {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--gray-50);
  border-radius: 8px;
  font-size: 12.5px;
}
.score-card .why-block strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.score-card .why-block p { margin: 0; line-height: 1.55; color: var(--ink-soft); }

.score-card .bullets-block { margin: 14px 0; }
.score-card .bullets-block strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--ink-muted);
}
.score-card .bullets { list-style: none; padding: 0; margin: 0; }
.score-card .bullet {
  position: relative;
  padding: 8px 10px 8px 28px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 6px;
  margin-bottom: 4px;
}
.score-card .bullet::before {
  position: absolute;
  left: 10px;
  top: 8px;
  font-weight: 700;
}
.score-card .bullet-strength { background: rgba(34, 197, 94, 0.06); }
.score-card .bullet-strength::before { content: "\2713"; color: #15803d; }
.score-card .bullet-gap { background: rgba(239, 68, 68, 0.06); }
.score-card .bullet-gap::before { content: "\2717"; color: #b91c1c; }
.score-card .bullet-gap-blocking { background: rgba(239, 68, 68, 0.13); }
.score-card .bullet .b-label { font-weight: 600; color: var(--ink); }
.score-card .bullet .b-evidence {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 2px;
}
.score-card .bullet .b-flag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  background: #b91c1c;
  color: white;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.04em;
  font-style: normal;
}
.score-card .overflow {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 4px;
  font-style: italic;
}

.score-card .next-step {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--blue-500, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
}
.score-card .next-step strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--blue-700, #1d4ed8);
}
.score-card .next-step p { margin: 0; color: var(--ink); line-height: 1.5; }

.jd-stale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #92400e;
  border-radius: 8px;
  margin: 0 0 12px;
  font-size: 13px;
}
.jd-stale button {
  font-size: 12px;
  padding: 5px 12px;
  background: white;
  border: 1px solid #d97706;
  color: #92400e;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.jd-stale button:hover { background: #fef3c7; }

/* ===== applicants banner: role summary, JD drawer, recruiter notes ===== */

.role-summary {
  margin: 12px 0 10px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.role-summary-loading {
  color: var(--ink-muted);
  font-style: italic;
}
.role-actions {
  display: flex;
  gap: 16px;
  margin: 4px 0 0;
  font-size: 13px;
}
.btn-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 13px;
  color: var(--blue-700);
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

.notes-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  max-width: 70ch;
}
.notes-panel[hidden] { display: none; }
.notes-panel textarea {
  width: 100%;
  resize: vertical;
  min-height: 110px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  box-sizing: border-box;
}
.notes-panel textarea:focus {
  outline: none;
  border-color: var(--blue-700);
}
.notes-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}
.notes-foot .notes-count { color: var(--ink-muted); }
.notes-foot .notes-spacer { flex: 1; }
.notes-foot .notes-status { color: var(--ink-muted); }
.notes-foot .notes-status.ok { color: var(--green); }
.notes-foot .notes-status.warn { color: var(--amber); }
.notes-foot .notes-status .muted { color: var(--ink-muted); }
.notes-foot .notes-status a { color: var(--blue-700); }
.custom-jd-active { font-size: 13px; margin-bottom: 8px; color: var(--ink-muted); }
.custom-jd-active.set { color: var(--green); }
.btn-save {
  padding: 6px 14px;
  background: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.btn-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* JD detail drawer (reuses .drawer chrome from candidate detail) */
.jd-drawer-body { display: block; padding: 16px 20px; }
.jd-drawer-body section { margin: 18px 0; }
.jd-drawer-body section:first-child { margin-top: 0; }
.jd-drawer-body h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 6px 0;
  font-weight: 600;
}
.jd-drawer-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.jd-drawer-body ul { margin: 0; padding-left: 18px; font-size: 14px; }
.jd-drawer-body ul li { margin: 3px 0; }
.jd-drawer-body .muted { color: var(--ink-muted); }
.jd-drawer-body .mono { font-family: ui-monospace, monospace; font-size: 11px; }
.jd-drawer-body .jd-html { font-size: 14px; line-height: 1.55; color: var(--ink); }
.jd-drawer-body .jd-html p { margin: 8px 0; }
.jd-drawer-body .jd-html ul { margin: 8px 0; padding-left: 18px; }
.jd-drawer-body .jd-html h1,
.jd-drawer-body .jd-html h2,
.jd-drawer-body .jd-html h3 {
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  margin: 14px 0 6px;
}

/* ===== SOURCING PAGE ===== */

.credits-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.credits-badge .cb-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.source-query {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 16px 0;
}
.source-query .sq-presets {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.source-query .sq-presets-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.source-query .sq-presets-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.source-query .sq-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 120ms ease;
}
.source-query .sq-chip:hover {
  border-color: var(--blue-700);
  color: var(--blue-700);
}
.source-query .sq-chip-academic { background: #EAF4FB; border-color: #C5E1F2; color: #1E5A82; }
.source-query .sq-chip-academic:hover { background: #D9EAF7; color: #144A6E; border-color: #1E97DC; }
.source-query .sq-chip-ca_state { background: #F1ECF8; border-color: #DDD0EE; color: #5C3A8C; }
.source-query .sq-chip-ca_state:hover { background: #E5DBF2; color: #432471; border-color: #7A4FBF; }
.source-query .sq-chip-federal { background: #FBEEE9; border-color: #F2D2C5; color: #9A3D1E; }
.source-query .sq-chip-federal:hover { background: #F7DDD2; color: #7B2D14; border-color: #C9651E; }
.source-query .sq-chip-clear {
  font-style: italic;
  color: var(--ink-muted);
  background: transparent;
  border-style: dashed;
}

.source-query .sq-grid {
  display: grid;
  grid-template-columns: 180px 1fr 120px 120px;
  gap: 10px 14px;
  align-items: end;
}
.source-query .sq-field { display: flex; flex-direction: column; gap: 4px; }
.source-query .sq-field span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-weight: 600;
}
.source-query .sq-field input,
.source-query .sq-field select {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
.source-query .sq-field input:focus,
.source-query .sq-field select:focus {
  outline: none; border-color: var(--blue-700);
}
.source-query .sq-wide { grid-column: span 3; }
.source-query .sq-narrow input { width: 100%; }
.source-query .sq-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-soft);
}
.source-query .sq-toggle input { margin: 0; }
.source-query .sq-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px;
}
.source-query .btn-search {
  padding: 8px 18px;
  background: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.source-query .btn-search:hover { transform: translateY(-1px); }
.source-query .btn-search:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.source-query .sq-status { font-size: 12px; color: var(--ink-muted); }
.source-query .sq-status.ok { color: var(--green); }
.source-query .sq-status.warn { color: var(--amber); }

.revealed-panel {
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.revealed-panel summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
}
.revealed-panel summary::-webkit-details-marker { display: none; }
.revealed-panel summary::before {
  content: "▸ ";
  color: var(--ink-muted);
  margin-right: 4px;
  display: inline-block;
  transition: transform 150ms ease;
}
.revealed-panel[open] summary::before { content: "▾ "; }
.revealed-panel summary .muted { font-weight: 400; color: var(--ink-muted); margin-left: 6px; }
.revealed-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.rp-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rp-photo {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.rp-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.rp-meta { min-width: 0; flex: 1; }
.rp-name { font-weight: 600; color: var(--ink); font-size: 13px; }
.rp-sub { font-size: 12px; }
.rp-foot {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 11px;
  margin-top: 4px;
  color: var(--ink-muted);
}
.rp-foot a { color: var(--blue-700); text-decoration: none; }
.rp-foot a:hover { text-decoration: underline; }

/* ===== source drawer (in applicants.html) ===== */
.src-drawer .src-drawer-body {
  padding: 18px 22px;
  display: block;
  font-size: 14px;
}
.src-drawer .src-step h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.src-drawer .src-help {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 8px 0 14px;
}
.src-drawer textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  box-sizing: border-box;
}
.src-drawer textarea:focus { outline: none; border-color: var(--blue-700); }
.src-drawer .src-field {
  display: block;
  margin: 12px 0;
}
.src-drawer .src-field span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.src-drawer .src-field select,
.src-drawer .src-field textarea {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
.src-drawer .src-field-help {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.4;
}
.src-drawer .src-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.src-drawer .btn-save {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
}
.src-drawer .btn-link {
  font-size: 13px;
  color: var(--ink-muted);
}
.src-drawer .src-steps {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.src-drawer .src-steps li {
  font-size: 14px;
  margin: 8px 0;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.src-drawer .src-pmark {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  margin-right: 6px;
  font-family: ui-monospace, monospace;
  color: var(--ink-muted);
}
.src-drawer .src-pmark:not(:empty) { color: var(--blue-700); }

/* Distinguish brief rows in the candidate table */
.cand-table tr.brief-row {
  background: linear-gradient(to right, rgba(30,151,220,0.04) 0%, transparent 60%);
}
.cand-table tr.brief-row .col-name .brief-name {
  color: var(--ink);
  font-weight: 600;
}
.cand-table tr.brief-row .col-name .sub {
  color: var(--blue-700);
  font-size: 11px;
  display: block;
  font-weight: 500;
}
.cand-table .brief-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(30,151,220,0.10);
  border: 1px solid rgba(30,151,220,0.30);
  color: var(--blue-700);
  white-space: nowrap;
}
.cand-table .score-bubble .pct { font-size: 9px; }

.source-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin: 12px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.source-bar .selcount {
  font-size: 13px;
  color: var(--ink-soft);
}
.source-bar .selcount .n {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.source-bar .sb-total {
  font-size: 12px;
  color: var(--ink-muted);
}
.source-bar .gap { flex: 1; }
.source-bar .btn-score {
  padding: 8px 14px;
  background: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.source-bar .btn-score:disabled { opacity: 0.4; cursor: not-allowed; }
.source-bar .badge-mini {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Sourcing-specific table cell tweaks */
.cand-table .col-name .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  margin-right: 8px;
  flex: none;
}
.cand-table .col-name:has(.avatar) {
  display: flex; align-items: center;
}
.cand-table .col-name .name-block .sub {
  display: block; font-size: 11px; color: var(--green);
}

.cand-table .col-prior {
  font-size: 12px;
  max-width: 220px;
}
.cand-table .col-reason {
  font-size: 12px;
  color: var(--ink-soft);
  max-width: 320px;
}

.cand-table .score-bubble.s-strong { background: #E8F8EF; border-color: #BFE9D5; color: var(--green); }
.cand-table .score-bubble.s-weak { background: var(--red-pale, #FBE9E9); border-color: #F5C7C7; color: var(--red, #c33); }

.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--ink-muted);
  white-space: nowrap;
}
.src-badge.ok { background: #E8F8EF; border-color: #BFE9D5; color: var(--green); }
.src-badge.warn { background: var(--amber-pale); border-color: #F2DDA8; color: var(--amber); }
.src-badge.running { color: var(--ink-soft); }
.src-badge .spinner {
  display: inline-block;
  width: 8px; height: 8px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.src-badge a { color: inherit; text-decoration: underline; }

.load-more-row {
  display: flex; justify-content: center;
  margin: 14px 0 24px;
}

/* Modal */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 100;
}
.modal-mask.open { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 101;
}
.modal.open { pointer-events: auto; }
.modal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.3);
  padding: 24px 26px;
  max-width: 480px;
  width: calc(100vw - 40px);
  transform: translateY(8px);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.modal.open .modal-card { transform: translateY(0); opacity: 1; }
.modal-card h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--ink); }
.modal-card p { margin: 8px 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.modal-card p.muted { font-size: 12px; color: var(--ink-muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.modal-actions .btn-link { color: var(--ink-muted); }

/* ==========================================================================
   Tailwind-style utilities (used by login.html, admin.html)
   Hand-written subset — no build step.
   ========================================================================== */

/* layout */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }

/* sizing */
.w-full { width: 100%; }
.max-w-sm { max-width: 384px; }

/* spacing */
.p-8 { padding: 32px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.mb-2 { margin-bottom: 8px; }
.mb-6 { margin-bottom: 24px; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }

/* radius / borders / shadow */
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 10px; }
.border { border: 1px solid transparent; }
.border-gray-200 { border-color: var(--gray-200); }
.shadow-sm { box-shadow: var(--shadow-sm); }

/* background */
.bg-gray-50 { background-color: var(--gray-50); }
.bg-white { background-color: var(--surface); }
.bg-gray-900 { background-color: var(--ink); }
.hover\:bg-gray-800:hover { background-color: var(--ink-soft); }

/* type */
.text-center { text-align: center; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.text-2xl { font-size: 24px; line-height: 1.25; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-white { color: #fff; }
.text-gray-400 { color: var(--ink-faint); }
.text-gray-500 { color: var(--ink-muted); }
.text-red-600 { color: var(--red); }

/* layout (admin) */
.justify-between { justify-content: space-between; }
.inline { display: inline; }
.overflow-hidden { overflow: hidden; }

/* sizing (admin) */
.max-w-4xl { max-width: 896px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.flex-1 { flex: 1 1 0%; }

/* spacing (admin) */
.p-6 { padding: 24px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.pb-3 { padding-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
.mt-3 { margin-top: 12px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* radius / borders (admin) */
.rounded { border-radius: 4px; }
.border-b { border-bottom: 1px solid transparent; }
.border-t { border-top: 1px solid transparent; }
.border-gray-100 { border-color: var(--gray-100); }
.border-gray-300 { border-color: var(--gray-300); }

/* type (admin) */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.uppercase { text-transform: uppercase; }
.text-gray-600 { color: var(--ink-soft); }
.text-gray-900 { color: var(--ink); }
.text-green-600 { color: var(--green); }
.text-red-800 { color: #991b1b; }
.text-yellow-800 { color: #854d0e; }
.hover\:text-gray-900:hover { color: var(--ink); }
.hover\:text-red-800:hover { color: #991b1b; }

/* badge backgrounds (admin) */
.bg-yellow-100 { background-color: #fef3c7; }
.bg-green-100 { background-color: var(--green-pale); }
.bg-gray-100 { background-color: var(--gray-100); }

.empty-note { color: var(--ink-muted, #76787C); font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 15px; }

.screening-panel { margin-top: 14px; }
.sc-head { display:flex; align-items:center; gap:10px; }
.sc-head h3 { margin:0; flex:0 0 auto; }
.sc-status { color:var(--ink-muted,#76787C); font-size:12px; }
.sc-refresh { margin-left:auto; background:none; border:none; cursor:pointer; font-size:16px; }
.sc-fit { margin:6px 0; font-size:14px; }
.sc-reason { color:var(--ink-muted,#76787C); font-size:13px; margin-bottom:6px; }
.sc-note { color:#b45309; font-size:13px; margin:4px 0; }
.sc-thread { display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.sc-q { font-weight:600; }
.sc-a { padding-left:6px; }
.sc-ts { color:var(--ink-muted,#76787C); font-size:11px; margin-right:4px; }
.sc-await { color:var(--ink-muted,#76787C); font-style:italic; padding-left:6px; }
.sc-chip { font-size:11px; border:1px solid var(--line,#ECEFF3); border-radius:10px; padding:0 6px; cursor:pointer; background:none; }
.sc-rat { font-size:12px; color:var(--ink-muted,#76787C); padding:2px 0 0 14px; }
.sc-actions { display:flex; gap:8px; margin-top:10px; }
.btn-sc { padding:6px 10px; border:1px solid var(--line,#ECEFF3); border-radius:6px; background:#fff; cursor:pointer; font-size:13px; }
.btn-sc.danger { border-color:#dc2626; color:#dc2626; }