/* ============================================================================
 * search-boss — enterprise UI styles
 * Aligned with shadcn/ui "New York" design system (Tailwind v4 token sheet).
 * Reference: /Users/coldxiangyu/work/百融云创/UI规范/ui/src/styles/globals.css
 * Scope: /Users/coldxiangyu/work/百融云创/search-boss-ui-revamp/public/styles.css
 *
 * Sections
 *   1.  Design tokens (light)
 *   2.  Legacy aliases (to keep older selectors compiling)
 *   3.  Reset & global primitives
 *   4.  Layout shell & topbar
 *   5.  Sidebar & navigation
 *   6.  Buttons
 *   7.  Inputs, forms, segmented controls
 *   8.  Cards, metrics, panels
 *   9.  Lists, empty states, inline statuses
 *   10. Tables & pagination
 *   11. Badges & dashboard affordances
 *   12. Candidate domain
 *   13. Job detail / schedule modals
 *   14. Sync modal & sync summary (sm-*)
 *   15. Runtime console & terminal
 *   16. Live view
 *   17. Recommend filters
 *   18. Work-config bar (wc-*)
 *   19. Setup / login
 *   20. Utility, state & responsive
 *   21. Dark mode overrides
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Design tokens (light) — verbatim from UI规范/src/styles/globals.css
 * -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --font-sans:
    "PingFang SC", "SF Pro Text", "Helvetica Neue", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --font-mono:
    "SFMono-Regular", "JetBrains Mono", "SF Pro Display", "Consolas", monospace;

  /* Control heights */
  --control-height-2xs: 28px;
  --control-height-xs: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;

  /* Spacing scale */
  --space-0: 0px;
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Corner radii */
  --corner-xs: 4px;
  --corner-sm: 6px;
  --corner-md: 8px;
  --corner-lg: 12px;
  --corner-xl: 16px;

  /* Surfaces */
  --background: #f9f9f9;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;

  /* Primary (brand) */
  --primary: #423eec;
  --primary-hover: #717ffc;
  --primary-active: #3833ca;
  --primary-foreground: #ffffff;
  --primary-soft: #ecf0fe;
  --primary-soft-hover: #dce4fd;
  --primary-border: #c0cdfc;
  --primary-border-hover: #9aacfd;
  --primary-emphasis: #2e2c9c;

  /* Neutral secondary/muted/accent */
  --secondary: #f3f3f3;
  --secondary-foreground: #171717;
  --muted: #f3f3f3;
  --muted-foreground: #686868;
  --accent: #f3f3f3;
  --accent-foreground: #171717;
  --surface-disabled: #f3f3f3;

  /* Destructive */
  --destructive: #ee3e34;
  --destructive-hover: #d82518;
  --destructive-active: #b01f14;
  --destructive-foreground: #ffffff;
  --destructive-soft: #fdf1f0;
  --destructive-soft-hover: #fcdfde;
  --destructive-border: #fbc5c3;

  /* Success */
  --success: #29bb54;
  --success-hover: #87e7a8;
  --success-active: #1f9742;
  --success-foreground: #ffffff;
  --success-soft: #effcf3;
  --success-soft-hover: #dafae5;
  --success-border: #b2e7c4;

  /* Warning */
  --warning: #e8a900;
  --warning-hover: #fdda43;
  --warning-active: #c47e00;
  --warning-foreground: #171717;
  --warning-soft: #fefbe7;
  --warning-soft-hover: #fef7bf;
  --warning-border: #fdec87;

  /* Info */
  --info: #1c58f2;
  --info-hover: #5099fe;
  --info-active: #1745da;
  --info-foreground: #ffffff;
  --info-soft: #edf4fe;
  --info-soft-hover: #d7e7fc;
  --info-border: #b9d6fc;

  /* Structural */
  --border: #e1e1e1;
  --border-strong: #686868;
  --input: #e1e1e1;
  --ring: #9aacfd;

  --overlay-scrim: rgb(12 18 36 / 0.48);
  --sidebar-bg: linear-gradient(180deg, #f7f9ff 0%, #ecf0fe 100%);
  --sidebar-brand-bg: #ecf0fe;
  --sidebar-brand-bg-hover: #dce4fd;
  --sidebar-active-text: #2e2c9c;

  --shadow-control: 0 1px 2px rgb(23 23 23 / 0.04);
  --shadow-button:
    0 10px 24px rgb(66 62 236 / 0.2),
    0 4px 8px rgb(66 62 236 / 0.12);
  --shadow-surface:
    0 12px 28px rgb(23 23 23 / 0.06),
    0 2px 6px rgb(23 23 23 / 0.04);
  --shadow-floating:
    0 20px 48px rgb(12 18 36 / 0.16),
    0 8px 18px rgb(12 18 36 / 0.1);
  --shadow-overlay:
    0 28px 72px rgb(12 18 36 / 0.2),
    0 10px 24px rgb(12 18 36 / 0.14);

  /* ---------------------------------------------------------------------------
   * 2. Legacy aliases (so old selectors still resolve against new tokens)
   * ------------------------------------------------------------------------ */
  --bg: var(--background);
  --panel: var(--card);
  --panel-soft: color-mix(in srgb, var(--muted) 55%, var(--card) 45%);
  --panel-strong: #0f112b;
  --line: var(--border);
  --line-soft: color-mix(in srgb, var(--border) 70%, transparent);
  --text: var(--foreground);
  --muted-text: var(--muted-foreground);
  --heading: var(--foreground);
  --accent-soft: var(--primary-soft);
  --shadow: var(--shadow-surface);

  /* Inline-style fallbacks referenced throughout app.js */
  --text-muted: var(--muted-foreground);
  --text-secondary: var(--muted-foreground);
  --color-primary: var(--primary);
  --bg-base: var(--background);
  --bg-card: var(--card);
}

/* -----------------------------------------------------------------------------
 * 3. Reset & global primitives
 * -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--foreground);
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }

p {
  margin: 0;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 150ms ease-out;
}

a:hover {
  color: var(--primary-hover);
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
}

button:focus-visible {
  outline: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}

::selection {
  background: rgb(66 62 236 / 0.18);
}

/* Custom scrollbar to feel native-enterprise */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-foreground) 25%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
  background-clip: padding-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* -----------------------------------------------------------------------------
 * 4. Layout shell & topbar
 * -------------------------------------------------------------------------- */
.layout-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  background: var(--background);
}

.main {
  padding: var(--space-8) var(--space-8);
  min-width: 0;
}

.content {
  display: grid;
  gap: var(--space-5);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.topbar h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.page-description {
  margin: var(--space-2) 0 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.55;
  max-width: 640px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.page {
  display: grid;
  gap: var(--space-5);
}

/* -----------------------------------------------------------------------------
 * 5. Sidebar & navigation
 * -------------------------------------------------------------------------- */
.sidebar {
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 100vh;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-label {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--corner-lg);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 18px;
  font-weight: 700;
  box-shadow: var(--shadow-button);
}

.brand h1 {
  margin: 0;
  color: var(--foreground);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--corner-md);
  background: transparent;
  color: var(--muted-foreground);
  text-align: left;
  transition: background-color 150ms ease-out, color 150ms ease-out,
    border-color 150ms ease-out;
  cursor: pointer;
}

.nav-item:hover {
  background: var(--primary-soft);
  color: var(--primary-emphasis);
}

.nav-item:hover .nav-item-title,
.nav-item:hover .nav-item-desc {
  color: var(--primary-emphasis);
}

.nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 30%, transparent);
}

.nav-item-title,
.nav-item-desc {
  display: block;
  transition: color 150ms ease-out;
}

.nav-item-title {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.nav-item-desc {
  margin-top: var(--space-0_5);
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.4;
}

.nav-item.is-active {
  background: var(--primary-soft-hover);
  color: var(--sidebar-active-text);
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--primary);
}

.nav-item.is-active .nav-item-title {
  color: var(--sidebar-active-text);
}

.nav-item.is-active .nav-item-desc {
  color: color-mix(in srgb, var(--sidebar-active-text) 70%, var(--muted-foreground));
}

/* -----------------------------------------------------------------------------
 * 6. Buttons
 * -------------------------------------------------------------------------- */
.btn,
.button-primary,
.button-secondary,
.button-muted,
.button-danger,
.button-compact,
.topbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--corner-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out,
    color 150ms ease-out, box-shadow 150ms ease-out;
}

.btn:focus-visible,
.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-muted:focus-visible,
.button-danger:focus-visible,
.button-compact:focus-visible,
.topbar-actions button:focus-visible,
.btn-sm:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 30%, transparent);
}

.btn:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.button-muted:disabled,
.button-danger:disabled,
.button-compact:disabled,
.topbar-actions button:disabled,
.btn-sm:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Primary */
.btn-primary,
.button-primary,
.topbar-actions button {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: transparent;
}

.btn-primary:hover,
.button-primary:hover,
.topbar-actions button:hover {
  background: var(--primary-hover);
}

.btn-primary:active,
.button-primary:active,
.topbar-actions button:active {
  background: var(--primary-active);
}

/* Secondary (outline) */
.btn-secondary,
.button-secondary {
  background: var(--card);
  color: var(--foreground);
  border-color: var(--input);
}

.btn-secondary:hover,
.button-secondary:hover {
  background: var(--primary-soft);
  border-color: var(--primary-border-hover);
  color: var(--primary-emphasis);
}

.btn-secondary:active,
.button-secondary:active {
  background: var(--primary-soft-hover);
}

/* Muted / ghost-ish outline */
.button-muted {
  background: var(--card);
  color: var(--muted-foreground);
  border-color: var(--border);
}

.button-muted:hover {
  background: var(--secondary);
  color: var(--foreground);
  border-color: var(--border-strong);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--primary-soft);
  color: var(--primary-emphasis);
}

.btn-ghost:active {
  background: var(--primary-soft-hover);
}

/* Danger */
.btn-danger,
.button-danger {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: transparent;
}

.btn-danger:hover,
.button-danger:hover {
  background: var(--destructive-hover);
}

.btn-danger:active,
.button-danger:active {
  background: var(--destructive-active);
}

/* Small / compact */
.btn-sm,
.button-compact {
  height: var(--control-height-xs);
  padding: 0 var(--space-3);
  border-radius: var(--corner-sm);
  font-size: 12px;
}

.btn-sm {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--input);
}

.btn-sm:hover {
  background: var(--primary-soft);
  color: var(--primary-emphasis);
  border-color: var(--primary-border-hover);
}

.btn-sm.btn-danger {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: transparent;
}

.btn-sm.btn-danger:hover {
  background: var(--destructive-hover);
}

.btn-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
 * 7. Inputs, forms, segmented controls
 * -------------------------------------------------------------------------- */
input,
select,
textarea {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--corner-md);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out,
    background-color 150ms ease-out;
}

input,
select,
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="search"] {
  height: var(--control-height-md);
  padding: 0 var(--space-4);
}

textarea {
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  line-height: 1.55;
  resize: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus,
input[type="time"]:focus,
input[type="date"]:focus {
  outline: none;
  border-color: var(--primary-border-hover);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 25%, transparent);
  background: var(--card);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-disabled);
  color: var(--muted-foreground);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.field,
.form-field,
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
}

.form-group {
  margin-bottom: var(--space-3);
}

.form-label,
.form-group label {
  display: block;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary-border-hover);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 25%, transparent);
}

.hint,
.form-hint,
.sm-hint {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.45;
}

.error-msg {
  color: var(--destructive);
  font-size: 12px;
  line-height: 1.45;
}

.form-field-full {
  grid-column: 1 / -1;
}

/* Checkbox / radio rows */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  color: var(--foreground);
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Segment control — pill group of toggleable radios */
.segment-control {
  display: inline-flex;
  padding: var(--space-0_5);
  border: 1px solid var(--input);
  border-radius: var(--corner-md);
  background: var(--secondary);
  overflow: hidden;
}

.segment-control input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segment-control label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height-xs);
  padding: 0 var(--space-4);
  border-radius: var(--corner-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.segment-control label:hover {
  color: var(--foreground);
}

.segment-control input[type="radio"]:checked + label {
  background: var(--card);
  color: var(--primary-emphasis);
  box-shadow: var(--shadow-control);
}

/* Time range rows */
.time-ranges-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.time-range-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.time-range-row input[type="time"] {
  flex: 1;
  min-width: 0;
}

.time-range-separator {
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.time-range-label {
  color: var(--muted-foreground);
  font-size: 13px;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * 8. Cards, metrics, panels
 * -------------------------------------------------------------------------- */
.card,
.table-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-surface);
}

/* Allow .table-scroll inside .table-card to own the horizontal overflow.
   Without min-width:0 the grid item's intrinsic min-content (the wide
   max-content table) pushes the whole grid track past the viewport, the
   body scrolls instead, and sticky columns appear stuck in place. */
.table-card {
  min-width: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.card-title {
  margin: var(--space-1) 0 0;
  color: var(--foreground);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.card-subtitle {
  margin: var(--space-2) 0 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.55;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.metric {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
  line-height: 1.15;
}

.metric-label {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--space-2);
  letter-spacing: 0.005em;
}

.metric-footnote {
  margin-top: var(--space-3);
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.5;
}

.metric-card {
  position: relative;
  overflow: hidden;
}

/* Subtle accent tint (replaces heavy gradient blob) */
.metric-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary-soft) 80%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.metric-card.is-interactive {
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out,
    background-color 150ms ease-out;
}

.metric-card.is-interactive:hover {
  border-color: var(--primary-border-hover);
  box-shadow: var(--shadow-floating);
}

.metric-card.is-static {
  opacity: 1;
}

.metric-card.is-disabled {
  opacity: 0.6;
  border-style: dashed;
  cursor: not-allowed;
}

/* Highlight panel — lightly tinted primary */
.highlight-panel {
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--card) 100%);
  border: 1px solid var(--primary-border);
  color: var(--foreground);
}

.highlight-panel .card-title,
.highlight-panel .metric,
.highlight-panel .card-subtitle,
.highlight-panel .eyebrow,
.highlight-panel .muted {
  color: inherit;
}

.highlight-panel .eyebrow {
  color: var(--primary-emphasis);
}

.highlight-panel .metric {
  color: var(--primary-emphasis);
}

/* Status grid inside a card */
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.status-box {
  padding: var(--space-4);
  border-radius: var(--corner-md);
  background: var(--secondary);
  border: 1px solid var(--border);
  transition: border-color 150ms ease-out, background-color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.status-box strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--foreground);
  font-size: 16px;
  font-weight: 600;
}

.status-box.is-static {
  opacity: 1;
}

.status-box.is-disabled {
  opacity: 0.6;
  border-style: dashed;
  cursor: not-allowed;
}

/* Overview grids */
.overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: var(--space-5);
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
}

.data-stack {
  display: grid;
  gap: var(--space-5);
}

/* -----------------------------------------------------------------------------
 * 9. Lists, empty states, inline statuses
 * -------------------------------------------------------------------------- */
.list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.list-title {
  margin: 0;
  color: var(--foreground);
  font-weight: 600;
  font-size: 14px;
}

.list-desc {
  margin: var(--space-0_5) 0 0;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.5;
}

.detail {
  color: var(--muted-foreground);
  font-size: 13px;
}

.name {
  color: var(--foreground);
  font-weight: 600;
}

.subtitle {
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.5;
}

.empty-state {
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--corner-lg);
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--card));
  color: var(--muted-foreground);
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
}

.inline-status {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.55;
}

.inline-status-success {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success-active);
}

.inline-status-error {
  background: var(--destructive-soft);
  border-color: var(--destructive-border);
  color: var(--destructive-active);
}

.inline-status-warning {
  background: var(--warning-soft);
  border-color: var(--warning-border);
  color: var(--warning-active);
}

/* 排班列表行：hover 显示行尾的删除小图标 */
.slot-item-hoverable:hover .slot-row-delete { opacity: 1 !important; }
.slot-row-delete:hover { background: rgba(238, 62, 52, 0.1); }

.upgrade-log-panel {
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--secondary);
}

.upgrade-log-panel summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  font-weight: 700;
  color: var(--foreground);
}

.upgrade-log {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--foreground);
}

/* Interactive affordance shared by status-box, list-item, metric-card */
.clickable,
.status-box.is-interactive,
.list-item.is-interactive,
.list-item.clickable,
.metric-card.is-interactive {
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out,
    box-shadow 150ms ease-out, transform 150ms ease-out;
}

.clickable:hover,
.status-box.is-interactive:hover,
.list-item.is-interactive:hover,
.metric-card.is-interactive:hover {
  background: var(--primary-soft);
  border-color: var(--primary-border);
}

.list-item.is-interactive:hover,
.list-item.clickable:hover {
  margin: 0 calc(var(--space-2) * -1);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  border-radius: var(--corner-sm);
}

.clickable:focus-visible,
.status-box.is-interactive:focus-visible,
.list-item.is-interactive:focus-visible,
.metric-card.is-interactive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 30%, transparent);
}

/* -----------------------------------------------------------------------------
 * 10. Tables & pagination
 * -------------------------------------------------------------------------- */
table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td,
.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

th,
.data-table th {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--secondary);
}

tbody tr,
.data-table tbody tr {
  transition: background-color 150ms ease-out;
}

tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--primary-soft);
}

tbody tr:last-child td {
  border-bottom: none;
}

.table-card table th:first-child,
.table-card .data-table th:first-child,
.card table th:first-child {
  border-top-left-radius: var(--corner-md);
}

.table-card table th:last-child,
.table-card .data-table th:last-child,
.card table th:last-child {
  border-top-right-radius: var(--corner-md);
}

.table-scroll {
  overflow-x: auto;
  border-radius: var(--corner-md);
}

.table-scroll table {
  width: max-content;
  min-width: 100%;
}

.table-scroll table td,
.table-scroll table th {
  white-space: nowrap;
}

.table-scroll .sticky-col-left {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.06);
}

.table-scroll .sticky-col-left-2 {
  position: sticky;
  left: 52px;
  z-index: 2;
  background: var(--card);
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.06);
}

.table-scroll .sticky-col-right {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--card);
  box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.06);
}

.table-scroll thead .sticky-col-left,
.table-scroll thead .sticky-col-left-2,
.table-scroll thead .sticky-col-right {
  z-index: 3;
  background: var(--secondary);
}

.table-scroll tr:hover .sticky-col-left,
.table-scroll tr:hover .sticky-col-left-2,
.table-scroll tr:hover .sticky-col-right {
  background: var(--primary-soft);
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.table-row-action {
  cursor: pointer;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.pagination-info {
  color: var(--muted-foreground);
  font-size: 13px;
}

.pagination-select {
  width: 88px;
}

.is-current-page {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: transparent !important;
}

/* -----------------------------------------------------------------------------
 * 11. Badges, status chips, dashboard affordances
 * -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: 999px;
  border: 1px solid var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-emphasis);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-info {
  background: var(--info-soft);
  border-color: var(--info-border);
  color: var(--info-active);
}

.badge-success {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success-active);
}

.badge-warning {
  background: var(--warning-soft);
  border-color: var(--warning-border);
  color: var(--warning-active);
}

.badge-neutral {
  background: var(--secondary);
  border-color: var(--border);
  color: var(--muted-foreground);
}

.badge-danger {
  background: var(--destructive-soft);
  border-color: var(--destructive-border);
  color: var(--destructive-active);
}

/* Status chip (used in topbar) */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-4);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-emphasis);
  border: 1px solid var(--primary-border);
  font-weight: 500;
  font-size: 13px;
}

/* Dashboard affordance pills */
.dashboard-affordance,
.status-hint,
.metric-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: 0 var(--space-2);
  height: 22px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.dashboard-affordance--interactive,
.metric-cta {
  color: var(--primary-emphasis);
  background: var(--primary-soft);
  font-weight: 500;
}

.dashboard-affordance--static,
.status-hint {
  color: var(--muted-foreground);
  background: var(--secondary);
}

.dashboard-affordance--disabled {
  color: var(--muted-foreground);
  background: var(--secondary);
  border: 1px dashed var(--border);
}

/* -----------------------------------------------------------------------------
 * 12. Candidate domain
 * -------------------------------------------------------------------------- */
.candidate-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--corner-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-control);
}

.candidate-filter-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.candidate-filter-date-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.candidate-date-btn-group {
  display: inline-flex;
  border-radius: var(--corner-sm);
  overflow: hidden;
  border: 1px solid var(--input);
  height: var(--control-height-xs);
}

.candidate-date-btn {
  padding: 0 var(--space-4);
  border: none;
  border-right: 1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  height: 100%;
}

.candidate-date-btn:last-child {
  border-right: none;
}

.candidate-date-btn:hover {
  background: var(--secondary);
}

.candidate-date-btn.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.candidate-date-sep {
  display: flex;
  align-items: center;
  color: var(--muted-foreground);
  font-size: 13px;
  height: var(--control-height-xs);
  padding: 0 2px;
}

.candidate-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.candidate-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-3);
}

.candidate-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  border: 1px solid var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-emphasis);
}

.candidate-bulk-checkbox {
  flex-shrink: 0;
}

/* Inline yellow chip that floats above the table when the entire current page is
   selected but the user might want to extend to "all filtered". Variant A from
   docs/prds/candidate-list-export/prototype.html. */
.candidate-export-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--corner-sm);
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  color: #8a6500;
  font-size: 13px;
}
.candidate-export-chip-sep {
  color: var(--muted-foreground);
}
.candidate-export-chip-link {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 0;
}
.candidate-export-chip-link:hover {
  text-decoration: underline;
}

.candidate-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.candidate-select-column {
  width: 52px;
}

.candidate-select-column input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.candidate-contact-cell {
  min-width: 128px;
  max-width: 160px;
  white-space: nowrap;
}

.candidate-contact-value {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted-foreground);
}

.candidate-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.candidate-page-actions {
  display: flex;
  gap: var(--space-2);
}

/* Drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: flex-end;
  z-index: 24;
}

.candidate-drawer {
  width: min(760px, 100%);
  height: 100vh;
  overflow: auto;
  background: var(--card);
  border-left: 1px solid var(--border);
  padding: var(--space-6);
  box-shadow: var(--shadow-overlay);
}

.candidate-detail-sections {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.candidate-detail-section {
  border: 1px solid var(--border);
  border-radius: var(--corner-lg);
  padding: var(--space-5);
  background: var(--card);
  box-shadow: var(--shadow-control);
}

.candidate-detail-grid,
.candidate-followup-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.candidate-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.candidate-detail-stack,
.candidate-sublist {
  display: grid;
  gap: var(--space-3);
}

.candidate-timeline {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.candidate-timeline-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  border: 1px solid var(--border);
  background: var(--card);
}

.candidate-timeline-dot {
  width: 12px;
  height: 12px;
  margin-top: var(--space-1);
  border-radius: 50%;
  background: var(--primary);
}

.candidate-related-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.candidate-resume-text {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 420px;
  overflow: auto;
}

.candidate-resume-section-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.candidate-resume-section-block {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--card);
}

.candidate-resume-section-title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--foreground);
}

.source-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.source-profile-item {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--card);
}

.source-profile-item-wide {
  grid-column: 1 / -1;
}

.source-profile-item strong {
  display: block;
  margin-top: var(--space-1);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .source-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .source-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
 * 13. Job detail / schedule modals
 * -------------------------------------------------------------------------- */
.modal-backdrop,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 1000;
}

.modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  padding: var(--space-6);
  min-width: 400px;
  max-width: 500px;
  box-shadow: var(--shadow-overlay);
}

.modal-content h3 {
  margin: 0 0 var(--space-5);
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.sync-modal {
  width: min(920px, 100%);
  max-height: 85vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-overlay);
}

.job-detail-modal {
  width: min(980px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-overlay);
  max-height: 88vh;
  overflow: auto;
}

.job-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.job-detail-sections {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.job-detail-section {
  border: 1px solid var(--border);
  border-radius: var(--corner-lg);
  padding: var(--space-5);
  background: var(--card);
}

.job-detail-section-title {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
}

.job-detail-tip {
  margin-top: var(--space-2);
  color: var(--muted-foreground);
  font-size: 13px;
}

.job-detail-textarea {
  width: 100%;
  min-height: 132px;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  line-height: 1.65;
  resize: vertical;
}

.job-detail-jd {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--corner-md);
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--foreground);
  white-space: pre-wrap;
  line-height: 1.75;
  font-size: 13px;
}

.job-followup-image-preview {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
}

.job-followup-image-preview img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--secondary);
}

.job-followup-image-meta {
  display: grid;
  gap: var(--space-2);
  color: var(--muted-foreground);
  font-size: 13px;
}

.job-followup-image-meta strong {
  color: var(--foreground);
  font-size: 14px;
}

.job-followup-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}

.job-followup-image-actions .disabled {
  opacity: 0.55;
  pointer-events: none;
}

.job-meta-item {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  background: var(--card);
  border: 1px solid var(--border);
}

.job-meta-item strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.jobs-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Schedule */
.schedule-form {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: var(--space-4) 0;
}

.schedule-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.schedule-form-actions {
  display: flex;
  gap: var(--space-2);
}

.schedule-modal {
  width: min(620px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-overlay);
  max-height: 88vh;
  overflow: auto;
}

.schedule-modal .schedule-form-grid {
  margin-top: var(--space-4);
}

.schedule-modal-header-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.schedule-view-value {
  min-height: var(--control-height-md);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-radius: var(--corner-md);
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
 * 14. Sync modal & sync summary (sm-*)
 * -------------------------------------------------------------------------- */
.sync-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.sync-timeline {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.sync-timeline-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  background: var(--card);
  border: 1px solid var(--border);
}

.sync-timeline-item.is-active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.sync-timeline-item.is-done {
  border-color: var(--success-border);
  background: var(--success-soft);
}

.sync-timeline-dot {
  width: 12px;
  height: 12px;
  margin-top: var(--space-1);
  border-radius: 50%;
  background: var(--muted-foreground);
}

.sync-timeline-item.is-active .sync-timeline-dot {
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft-hover);
}

.sync-timeline-item.is-done .sync-timeline-dot {
  background: var(--success);
}

.sync-log-panel {
  margin-top: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--corner-lg);
  overflow: hidden;
  background: var(--card);
}

.sync-log-toggle {
  width: 100%;
  border: none;
  background: var(--secondary);
  color: var(--primary-emphasis);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.sync-log-toggle:hover {
  background: var(--primary-soft);
}

.sync-log-list {
  max-height: 280px;
  overflow: auto;
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
  background: transparent;
  color: var(--foreground);
  font-size: 12px;
}

.sync-log-item {
  display: grid;
  grid-template-columns: 156px 1fr;
  gap: var(--space-3);
  line-height: 1.5;
  padding: var(--space-1) 0;
}

.sync-log-time {
  color: var(--info-active);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* Inline sync button */
.sync-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  height: var(--control-height-xs);
  padding: 0 var(--space-3);
  border-radius: var(--corner-md);
  border: 1px solid var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-emphasis);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
  flex-shrink: 0;
}

.sync-inline-btn:hover {
  background: var(--primary-soft-hover);
  border-color: var(--primary-border-hover);
}

.sync-inline-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sync-inline-icon {
  font-size: 14px;
  line-height: 1;
}

.sync-inline-label {
  line-height: 1;
}

.sync-stop-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  height: var(--control-height-xs);
  padding: 0 var(--space-3);
  border-radius: var(--corner-md);
  border: 1px solid var(--destructive-border);
  background: var(--destructive-soft);
  color: var(--destructive-active);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.sync-stop-btn:hover {
  background: var(--destructive-soft-hover);
}

/* Sync summary header & sections (sm-*) */
.sm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.sm-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--foreground);
}

.sm-header-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.sm-body {
  padding: var(--space-2) 0 0;
}

.sm-section {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.sm-section:last-child {
  border-bottom: none;
}

.sm-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.sm-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.sm-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sm-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.sm-value {
  min-height: var(--control-height-xs);
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--corner-md);
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
}

.sm-input {
  min-height: var(--control-height-xs);
  height: var(--control-height-xs);
  padding: 0 var(--space-3);
  border-radius: var(--corner-md);
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.sm-input:focus {
  outline: none;
  border-color: var(--primary-border-hover);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 25%, transparent);
}

select.sm-input {
  appearance: auto;
}

.sm-input-group {
  display: flex;
  align-items: center;
  position: relative;
}

.sm-input-group .sm-input {
  padding-right: 40px;
}

.sm-input-suffix {
  position: absolute;
  right: var(--space-3);
  font-size: 12px;
  color: var(--muted-foreground);
  pointer-events: none;
}

.sm-hint {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: var(--space-0_5);
}

.sm-footer {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: var(--space-1);
}

.sm-btn-primary {
  min-height: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0 var(--space-6);
  border-radius: var(--corner-md);
  border: none;
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.sm-btn-primary:hover {
  background: var(--primary-hover);
}

.sm-btn-primary:active {
  background: var(--primary-active);
}

.sm-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sm-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0_5) var(--space-2);
  border-radius: var(--corner-sm);
  font-size: 11px;
  font-weight: 500;
  background: var(--secondary);
  color: var(--muted-foreground);
}

.sm-tag-blue {
  background: var(--primary-soft);
  color: var(--primary-emphasis);
}

/* -----------------------------------------------------------------------------
 * 15. Runtime console & terminal
 * -------------------------------------------------------------------------- */
.runtime-console {
  width: 95vw;
  max-width: 1500px;
  height: min(900px, 92vh);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.72fr);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  overflow: hidden;
  box-shadow: var(--shadow-overlay);
}

.runtime-console.is-browser-focus {
  grid-template-columns: minmax(0, 1fr) 0;
}

.runtime-console-browser {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.runtime-console-browser-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-4);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.runtime-console-browser-copy {
  min-width: 0;
}

.runtime-console-browser-header .eyebrow {
  color: var(--primary-emphasis);
}

.runtime-console-browser-header .card-title {
  margin: var(--space-0_5) 0 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--foreground);
}

.runtime-console-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.runtime-console-status-pill {
  display: inline-flex;
  align-items: center;
  height: var(--control-height-xs);
  padding: 0 var(--space-3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--muted-foreground);
}

.runtime-console-status-pill.is-running {
  color: var(--info-active);
  background: var(--info-soft);
  border-color: var(--info-border);
}

.runtime-console-status-pill.is-pending,
.runtime-console-status-pill.is-idle {
  color: var(--warning-active);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.runtime-console-status-pill.is-completed {
  color: var(--success-active);
  background: var(--success-soft);
  border-color: var(--success-border);
}

.runtime-console-status-pill.is-failed {
  color: var(--destructive-active);
  background: var(--destructive-soft);
  border-color: var(--destructive-border);
}

.runtime-console-browser-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-4) var(--space-5) var(--space-2);
  background: var(--background);
}

.runtime-console-browser-frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  border-radius: var(--corner-lg);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-surface);
}

.runtime-console-browser .live-view-img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--corner-md);
  object-fit: contain;
  box-shadow: var(--shadow-control);
}

.runtime-console-browser-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--card);
}

.runtime-console-browser-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.runtime-console-page-url {
  display: block;
  max-width: 100%;
  color: var(--muted-foreground);
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.runtime-console-browser-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.runtime-console-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--background);
}

.runtime-console.is-browser-focus .runtime-console-sidebar {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.runtime-console-rail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
  padding: var(--space-3);
  overflow: hidden;
}

.runtime-console-panel {
  border-radius: var(--corner-lg);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-control);
  padding: var(--space-4);
}

.runtime-console-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.runtime-console-panel-head > div {
  min-width: 0;
  flex: 1;
}

.runtime-console-panel-head .card-title {
  margin: var(--space-0_5) 0 0;
  font-size: 16px;
  font-weight: 600;
}

.runtime-console-panel-head .card-subtitle {
  margin-top: var(--space-1);
  max-width: 320px;
}

.runtime-console-panel-head--logs {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.runtime-console-panel-head--logs .sync-log-toggle,
.runtime-terminal-actions .button-danger {
  width: auto;
  padding: 0 var(--space-3);
  height: var(--control-height-xs);
  border-radius: var(--corner-md);
  box-shadow: none;
}

.runtime-console-panel--logs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.runtime-console-panel--logs .sync-log-list {
  margin-top: var(--space-3);
}

.runtime-stage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
  margin-top: var(--space-2);
}

.runtime-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--secondary);
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
}

.runtime-stage-chip.is-active {
  background: var(--primary-soft);
  color: var(--primary-emphasis);
}

.runtime-stage-chip.is-done {
  background: var(--success-soft);
  color: var(--success-active);
}

.runtime-stage-chip.is-failed {
  background: var(--destructive-soft);
  color: var(--destructive-active);
}

.runtime-terminal-subtitle {
  margin-top: var(--space-1);
  max-width: none;
}

.runtime-terminal-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.runtime-terminal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
}

.runtime-terminal-meta-item {
  padding: var(--space-0_5) var(--space-2);
  border-radius: 999px;
  background: var(--secondary);
  color: var(--foreground);
}

.runtime-terminal {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  background: #11131a;
  border: 1px solid #22242d;
  color: #f3f3f3;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  min-height: 0;
  height: 100%;
}

.sync-log-list.runtime-terminal {
  display: block;
  gap: 0;
  padding-top: 0;
  overflow: auto;
  max-height: none;
  flex: 1;
}

.runtime-terminal-line {
  display: block;
  padding: 0;
  margin: 0 0 var(--space-1);
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.runtime-terminal-line:last-child {
  margin-bottom: 0;
}

.runtime-terminal-time {
  color: #9aacfd;
}

.runtime-terminal-label {
  color: #c0cdfc;
  margin-left: var(--space-2);
  font-weight: 500;
}

.runtime-terminal-message {
  color: #cecece;
  margin-left: var(--space-2);
}

.runtime-terminal-line.severity-warning .runtime-terminal-label,
.runtime-terminal-line.severity-warning .runtime-terminal-message {
  color: #fdda43;
}

.runtime-terminal-line.severity-error .runtime-terminal-label,
.runtime-terminal-line.severity-error .runtime-terminal-message {
  color: #fa9d99;
}

.runtime-terminal-line.severity-success .runtime-terminal-label,
.runtime-terminal-line.severity-success .runtime-terminal-message {
  color: #87e7a8;
}

/* 列表层 LLM 初筛 — 青绿色 (轻量决策,卡片层) */
.runtime-terminal-line.severity-list-prefilter .runtime-terminal-label,
.runtime-terminal-line.severity-list-prefilter .runtime-terminal-message {
  color: #5ee0d8;
}

/* 详情层 LLM 精筛 — 淡紫色 (重磅决策,读完简历后) */
.runtime-terminal-line.severity-detail-llm .runtime-terminal-label,
.runtime-terminal-line.severity-detail-llm .runtime-terminal-message {
  color: #c4a4ff;
}

.runtime-terminal-empty {
  color: #686868;
}

.runtime-console .sync-log-toggle {
  white-space: nowrap;
}

.runtime-console-browser:fullscreen {
  width: 100vw;
  height: 100vh;
  background: var(--card);
}

.runtime-console-browser:fullscreen .runtime-console-browser-header,
.runtime-console-browser:fullscreen .runtime-console-browser-footer {
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

.runtime-console-browser:fullscreen .runtime-console-browser-body {
  padding: var(--space-5) var(--space-7) var(--space-4);
}

.runtime-console-browser:fullscreen .runtime-console-browser-frame {
  border-radius: var(--corner-lg);
}

/* Legacy runtime-log-summary styles (smaller, token-mapped) */
.runtime-log-summary {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  background: var(--secondary);
  border: 1px solid var(--border);
}

.runtime-log-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.runtime-log-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--card);
  color: var(--primary-emphasis);
  border: 1px solid var(--primary-border);
  font-size: 12px;
  font-weight: 500;
}

.runtime-log-summary-chip.is-warning {
  color: var(--warning-active);
  border-color: var(--warning-border);
  background: var(--warning-soft);
}

.runtime-log-summary-chip.is-error {
  color: var(--destructive-active);
  border-color: var(--destructive-border);
  background: var(--destructive-soft);
}

.runtime-log-summary-chip.is-muted {
  color: var(--muted-foreground);
  border-color: var(--border);
  background: var(--secondary);
}

.runtime-log-summary-text {
  margin-top: var(--space-2);
  color: var(--foreground);
  font-size: 13px;
}

/* Legacy runtime log feed (not primary surface, kept for compat) */
.runtime-log-sections {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
}

.runtime-log-section {
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--card);
  overflow: hidden;
}

.runtime-log-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--secondary);
}

.runtime-log-section-title {
  font-weight: 600;
  color: var(--foreground);
}

.runtime-log-section-meta {
  color: var(--muted-foreground);
  font-size: 12px;
}

.runtime-log-feed {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
}

.runtime-log-feed.is-stream {
  max-height: 280px;
  overflow: auto;
}

.runtime-log-feed-item {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--corner-md);
  background: var(--card);
  border: 1px solid var(--border);
}

.runtime-log-feed-item.is-compact {
  padding: var(--space-2) var(--space-3);
}

.runtime-log-feed-dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--muted-foreground);
}

.runtime-log-feed-item.severity-success .runtime-log-feed-dot {
  background: var(--success);
}

.runtime-log-feed-item.severity-warning .runtime-log-feed-dot {
  background: var(--warning);
}

.runtime-log-feed-item.severity-error .runtime-log-feed-dot {
  background: var(--destructive);
}

.runtime-log-feed-item.severity-list-prefilter .runtime-log-feed-dot {
  background: #0d9488;
}

.runtime-log-feed-item.severity-detail-llm .runtime-log-feed-dot {
  background: #7c3aed;
}

.runtime-log-feed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.runtime-log-feed-label {
  font-weight: 600;
  color: var(--foreground);
}

.runtime-log-feed-stage {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-emphasis);
  font-size: 11px;
  font-weight: 500;
}

.runtime-log-feed-time {
  color: var(--muted-foreground);
  font-size: 12px;
  margin-left: auto;
}

.runtime-log-feed-message {
  margin-top: var(--space-1_5);
  color: var(--foreground);
  line-height: 1.55;
}

.runtime-log-empty {
  padding: var(--space-4);
  color: var(--muted-foreground);
  font-size: 13px;
}

.runtime-console-log-placeholder {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--corner-md);
  background: var(--secondary);
  color: var(--muted-foreground);
  font-size: 13px;
}

/* -----------------------------------------------------------------------------
 * 16. Live view
 * -------------------------------------------------------------------------- */
.live-view-status {
  margin-top: var(--space-1);
  font-size: 12px;
}

.live-view-info {
  color: var(--muted-foreground);
}

.live-view-error {
  color: var(--destructive-active);
}

.live-view-body {
  flex: 1;
  overflow: auto;
  padding: var(--space-3);
  background: #11131a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.live-view-img-wrapper {
  position: relative;
  display: inline-block;
  border-radius: var(--corner-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--card);
}

.live-view-img {
  max-width: 100%;
  max-height: calc(90vh - 150px);
  border-radius: var(--corner-md);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.live-view-click-indicator {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  border: 2px solid color-mix(in srgb, var(--primary) 80%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-soft) 75%, transparent);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  opacity: 0;
}

.live-view-click-indicator.is-active {
  animation: live-view-click-ripple 0.5s ease-out forwards;
}

@keyframes live-view-click-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.live-view-footer {
  padding: var(--space-2) var(--space-6);
  border-top: 1px solid var(--border);
  text-align: center;
}

.live-view-hint {
  font-size: 12px;
  color: var(--muted-foreground);
}

.live-view-manual-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
  margin-top: var(--space-3);
}

.live-view-manual-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.live-view-manual-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.live-view-text-input {
  flex: 1 1 260px;
  min-width: 220px;
  height: var(--control-height-xs);
  padding: 0 var(--space-3);
  border: 1px solid var(--input);
  border-radius: var(--corner-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
}

.live-view-text-input:focus {
  outline: none;
  border-color: var(--primary-border-hover);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 25%, transparent);
}

.live-view-text-input:disabled {
  background: var(--surface-disabled);
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
 * 17. Recommend filters
 * -------------------------------------------------------------------------- */
.recommend-filters-panel {
  padding: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.recommend-filter-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.recommend-filter-row.is-disabled .recommend-filter-label {
  opacity: 0.45;
}

.recommend-filter-label {
  flex-shrink: 0;
  width: 140px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  padding-top: 5px;
  text-align: right;
}

.recommend-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
  flex: 1;
}

.recommend-filter-chip {
  display: inline-flex;
  align-items: center;
  height: var(--control-height-2xs);
  padding: 0 var(--space-3);
  font-size: 12px;
  border: 1px solid var(--input);
  border-radius: 999px;
  background: var(--secondary);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out,
    color 150ms ease-out;
  white-space: nowrap;
}

.recommend-filter-chip:hover {
  background: var(--primary-soft);
  border-color: var(--primary-border-hover);
  color: var(--primary-emphasis);
}

.recommend-filter-chip.is-active {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary-emphasis);
  font-weight: 500;
}

.recommend-filter-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.recommend-filter-subrow {
  margin-top: calc(var(--space-1) * -1);
}

.recommend-filter-inline-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: 12px;
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
}

.recommend-filter-inline-check input[type='checkbox'] {
  margin: 0;
  cursor: pointer;
}

.recommend-filter-multi-tag {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px var(--space-1);
  font-size: 10px;
  border-radius: var(--corner-xs);
  background: var(--primary-soft-hover);
  color: var(--primary-emphasis);
  font-weight: 500;
  vertical-align: middle;
}

.recommend-filter-tag-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px dashed var(--border, #e4e4e7);
}

.recommend-filter-tag-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.recommend-filter-tag-marker {
  color: var(--primary-emphasis);
  font-size: 14px;
}

.recommend-filter-tag-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.recommend-filter-tag-hint {
  font-size: 12px;
  color: var(--muted-foreground);
}

.recommend-filter-chip-editor-wrap {
  flex-direction: column;
  gap: var(--space-1_5);
  align-items: stretch;
}

.recommend-filter-chip-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-2);
  border: 1px solid var(--input, #d4d4d8);
  border-radius: var(--corner-md);
  background: var(--card, #ffffff);
  min-height: var(--control-height-md, 36px);
  flex: 1;
}

.recommend-filter-chip-editor:focus-within {
  border-color: var(--primary-border-hover);
}

.recommend-filter-chip-editor-city {
  padding: 7px 10px;
  gap: 7px 8px;
  border-color: color-mix(in srgb, var(--input, #d4d4d8) 82%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.recommend-filter-chip-editor-city:focus-within {
  border-color: color-mix(in srgb, var(--primary-border-hover, #4f46e5) 72%, #ffffff);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary-soft, #eef2ff) 88%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.recommend-filter-chip-editor-city .recommend-filter-token {
  height: 28px;
  padding-left: 10px;
  border-color: #dbe3ee;
  border-radius: 999px;
  background: #f8fafc;
}

.recommend-filter-chip-editor-city .recommend-filter-token-remove {
  background: transparent;
}

.recommend-filter-token {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-height-2xs);
  padding: 0 var(--space-1) 0 var(--space-3);
  font-size: 12.5px;
  border-radius: var(--corner-sm);
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  white-space: nowrap;
}

.recommend-filter-token-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--space-1);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--muted, #e4e4e7);
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms, color 120ms;
}

.recommend-filter-token-remove:hover {
  background: var(--destructive, #dc2626);
  color: #ffffff;
}

.recommend-filter-token-input {
  flex: 1;
  min-width: 180px;
  height: var(--control-height-2xs);
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--foreground);
}

.recommend-filter-token-input::placeholder {
  color: var(--muted-foreground);
}

.recommend-filter-token-input:focus {
  outline: none;
}

/* Searchable city picker (used inside expectCityWhitelist chip editor) */
.recommend-filter-city-picker {
  position: relative;
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recommend-filter-city-picker .recommend-filter-token-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 2px;
  font-size: 14px;
  line-height: 28px;
}

.recommend-filter-city-input-hint {
  min-height: 16px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.recommend-filter-city-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 420px;
  max-width: 560px;
  background: var(--card, #ffffff);
  border: 1px solid var(--input, #d4d4d8);
  border-radius: var(--corner-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

/* Cascade mode: two columns (province | city) */
.recommend-filter-city-picker-cascade {
  display: grid;
  grid-template-columns: 132px 1fr;
  max-height: 320px;
}

.recommend-filter-city-picker-col-province {
  overflow-y: auto;
  background: var(--background-subtle, #f6f7f9);
  border-right: 1px solid var(--border, #e4e4e7);
  padding: var(--space-1);
}

.recommend-filter-city-picker-province-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px var(--space-2);
  font-size: 12.5px;
  color: var(--foreground);
  border-radius: var(--corner-xs);
  cursor: pointer;
}

.recommend-filter-city-picker-province-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.recommend-filter-city-picker-province-item.is-active {
  background: var(--card, #ffffff);
  color: var(--primary-emphasis);
  font-weight: 500;
}

.recommend-filter-city-picker-province-arrow {
  font-size: 12px;
  color: var(--muted-foreground);
  opacity: 0.6;
}

.recommend-filter-city-picker-col-city {
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-1_5);
  align-content: flex-start;
}

.recommend-filter-city-picker-city-item {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-2);
  font-size: 12.5px;
  color: var(--foreground);
  background: transparent;
  border-radius: var(--corner-xs);
  cursor: pointer;
}

.recommend-filter-city-picker-city-item:hover {
  background: var(--primary-soft, #eff6ff);
  color: var(--primary-emphasis);
}

/* Flat search-result mode */
.recommend-filter-city-picker-flat {
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-1);
}

.recommend-filter-city-picker-group {
  padding: var(--space-1) var(--space-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.recommend-filter-city-picker-item {
  display: flex;
  align-items: center;
  padding: 4px var(--space-2);
  font-size: 12.5px;
  color: var(--foreground);
  border-radius: var(--corner-xs);
  cursor: pointer;
}

.recommend-filter-city-picker-item:hover {
  background: var(--primary-soft, #eff6ff);
  color: var(--primary-emphasis);
}

.recommend-filter-city-picker-empty {
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  color: var(--muted-foreground);
}

.recommend-filter-tag-helper {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.recommend-filter-list-llm-textarea {
  width: 100%;
  min-height: 88px;
  padding: var(--space-3);
  font-family: inherit;
  font-size: 13px;
  color: var(--foreground);
  background: var(--card, #ffffff);
  border: 1px solid var(--input, #d4d4d8);
  border-radius: var(--corner-sm);
  resize: vertical;
}

.recommend-filter-list-llm-textarea:focus {
  outline: none;
  border-color: var(--primary-border-hover);
}

.recommend-filter-list-llm-textarea::placeholder {
  color: var(--muted-foreground);
}

/* -----------------------------------------------------------------------------
 * 18. Work-config bar (wc-*)
 * -------------------------------------------------------------------------- */
.wc-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.wc-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  flex-shrink: 0;
}

.wc-bar-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

.wc-bar-hint {
  font-size: 12px;
  color: var(--muted-foreground);
}

.wc-windows {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
}

.wc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0_5);
  height: var(--control-height-2xs);
  padding: 0 var(--space-1_5);
  border-radius: var(--corner-md);
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
}

.wc-chip-time {
  width: 72px;
  height: 22px;
  padding: 0 var(--space-1);
  border: none;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  min-height: 0;
  border-radius: var(--corner-xs);
}

.wc-chip-time:focus {
  outline: none;
  background: var(--card);
  box-shadow: 0 0 0 2px var(--ring);
}

.wc-chip-sep {
  color: var(--muted-foreground);
  font-size: 12px;
  flex-shrink: 0;
}

.wc-chip-del {
  width: 20px;
  height: 20px;
  border-radius: var(--corner-xs);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: var(--space-0_5);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.wc-chip-del:hover {
  background: var(--destructive-soft);
  color: var(--destructive-active);
}

.wc-add-btn {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.wc-add-btn:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.wc-save-btn {
  height: var(--control-height-2xs);
  padding: 0 var(--space-3);
  border-radius: var(--corner-md);
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease-out, border-color 150ms ease-out,
    color 150ms ease-out;
}

.wc-save-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary-border-hover);
  color: var(--primary-emphasis);
}

.wc-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wc-saved-tip {
  font-size: 12px;
  font-weight: 500;
  color: var(--success-active);
  flex-shrink: 0;
  animation: wc-fade-in 0.2s ease;
}

.wc-error-tip {
  font-size: 12px;
  color: var(--destructive-active);
  flex-shrink: 0;
}

@keyframes wc-fade-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* -----------------------------------------------------------------------------
 * 19. Setup / login (inline-styled in HTML; provide fallback stepper styles)
 * -------------------------------------------------------------------------- */
.setup-container {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  box-shadow: var(--shadow-surface);
}

.setup-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.boss-login-card {
  margin-bottom: var(--space-4);
}

.boss-login-card .highlight-panel {
  border-left: 3px solid var(--primary);
}

.steps {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
}

.step-dot.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.step-dot.done {
  background: var(--success);
  color: var(--success-foreground);
}

.step-panel {
  display: none;
  padding: var(--space-5) 0;
}

.step-panel.active {
  display: block;
}

.check-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--card);
}

.check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.check-icon.ok {
  background: var(--success);
}

.check-icon.fail {
  background: var(--destructive);
}

.check-icon.wait {
  background: var(--warning);
  color: var(--warning-foreground);
}

.check-info {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--foreground);
}

.success-panel {
  padding: var(--space-6);
  text-align: center;
  background: var(--success-soft);
  border: 1px solid var(--success-border);
  border-radius: var(--corner-lg);
  color: var(--success-active);
}

.success-icon {
  font-size: 40px;
  margin-bottom: var(--space-3);
}

/* Login page fallback styles (login.html uses inline) */
.login-wrapper {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--background);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-surface);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.login-brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--corner-lg);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
}

.login-btn {
  height: var(--control-height-md);
  border-radius: var(--corner-md);
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.login-btn:hover {
  background: var(--primary-hover);
}

.login-error {
  padding: var(--space-3);
  background: var(--destructive-soft);
  border: 1px solid var(--destructive-border);
  border-radius: var(--corner-md);
  color: var(--destructive-active);
  font-size: 13px;
}

.login-captcha-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.login-captcha-image {
  height: var(--control-height-md);
  border-radius: var(--corner-md);
  border: 1px solid var(--border);
  cursor: pointer;
}

.login-captcha-hint {
  font-size: 12px;
  color: var(--muted-foreground);
}

/* -----------------------------------------------------------------------------
 * 20. Utility, state & responsive
 * -------------------------------------------------------------------------- */
.hidden {
  display: none !important;
}

.muted {
  color: var(--muted-foreground);
}

.is-active,
.active {
  /* Contextual — see component-specific rules above. */
}

.is-idle {
  color: var(--muted-foreground);
}

.is-pending {
  color: var(--warning-active);
}

.is-running {
  color: var(--info-active);
}

.is-completed,
.is-done {
  color: var(--success-active);
}

.is-failed {
  color: var(--destructive-active);
}

.task-run-events-list {
  max-height: 400px;
  overflow-y: auto;
}

.task-run-events-list .data-table td {
  font-size: 12px;
  padding: var(--space-1_5) var(--space-3);
}

/* Tag-input (search-boss uses .chip-like elements via wc-chip/recommend-chip;
   provide a generic alias in case) */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
  padding: var(--space-1_5);
  border: 1px solid var(--input);
  border-radius: var(--corner-md);
  background: var(--card);
}

.tag-input input {
  flex: 1;
  min-width: 120px;
  height: auto;
  min-height: var(--control-height-2xs);
  padding: 0 var(--space-2);
  border: none;
  background: transparent;
  box-shadow: none;
}

.tag-input input:focus {
  outline: none;
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
 * Responsive adjustments
 * -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .layout-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .main {
    padding: var(--space-5) var(--space-4);
  }

  .split,
  .overview-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .sync-summary-grid,
  .job-detail-grid,
  .sync-log-item,
  .candidate-detail-grid,
  .candidate-followup-box,
  .candidate-facts-grid,
  .candidate-timeline-item,
  .sm-row,
  .sm-row-3 {
    grid-template-columns: 1fr;
  }

  .table-actions {
    min-width: 180px;
  }

  .candidate-filter-bar,
  .candidate-summary-row,
  .candidate-bulk-toolbar,
  .candidate-pagination,
  .candidate-filter-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .candidate-filter-grid {
    grid-template-columns: 1fr;
  }

  .candidate-chip-row,
  .candidate-page-actions,
  .candidate-related-badges {
    justify-content: flex-start;
  }

  .candidate-drawer {
    width: 100%;
  }

  .runtime-console,
  .runtime-console.is-browser-focus {
    grid-template-columns: 1fr;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .runtime-console-browser {
    min-height: 44vh;
  }

  .runtime-console-browser-header,
  .runtime-console-browser-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .runtime-console-sidebar {
    min-height: 0;
  }

  .runtime-console-panel-head,
  .runtime-console-browser-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .runtime-console-browser-actions,
  .runtime-console-toolbar {
    width: 100%;
    justify-content: space-between;
  }
}

/* -----------------------------------------------------------------------------
 * 21. Dark mode overrides (opt-in via .dark class; not applied by default)
 * -------------------------------------------------------------------------- */
.dark {
  color-scheme: dark;

  --background: #11131a;
  --foreground: #f3f3f3;
  --card: #171921;
  --card-foreground: #f3f3f3;
  --popover: #171921;
  --popover-foreground: #f3f3f3;

  --primary: #717ffc;
  --primary-hover: #9aacfd;
  --primary-active: #423eec;
  --primary-foreground: #0f112b;
  --primary-soft: #1f245b;
  --primary-soft-hover: #2a3182;
  --primary-border: #3a469e;
  --primary-border-hover: #717ffc;
  --primary-emphasis: #c0cdfc;

  --secondary: #22252e;
  --secondary-foreground: #f3f3f3;
  --muted: #1d2028;
  --muted-foreground: #cecece;
  --accent: #242837;
  --accent-foreground: #f3f3f3;
  --surface-disabled: #1c2028;

  --destructive: #ee3e34;
  --destructive-hover: #fa9d99;
  --destructive-active: #d82518;
  --destructive-foreground: #ffffff;
  --destructive-soft: #3b1c1d;
  --destructive-soft-hover: #512426;
  --destructive-border: #7b3538;

  --success: #29bb54;
  --success-hover: #87e7a8;
  --success-active: #1f9742;
  --success-foreground: #0d2315;
  --success-soft: #152d1d;
  --success-soft-hover: #1b3b26;
  --success-border: #2d5f3d;

  --warning: #e8a900;
  --warning-hover: #fdda43;
  --warning-active: #c47e00;
  --warning-foreground: #2f2300;
  --warning-soft: #312709;
  --warning-soft-hover: #44370d;
  --warning-border: #68541b;

  --info: #5099fe;
  --info-hover: #89bdfe;
  --info-active: #1c58f2;
  --info-foreground: #081a42;
  --info-soft: #13284f;
  --info-soft-hover: #183468;
  --info-border: #264987;

  --border: #303544;
  --border-strong: #686868;
  --input: #303544;
  --ring: #9aacfd;

  --overlay-scrim: rgb(4 7 16 / 0.68);
  --sidebar-bg: linear-gradient(180deg, #171921 0%, #10131c 100%);
  --sidebar-brand-bg: #1f245b;
  --sidebar-brand-bg-hover: #2a3182;
  --sidebar-active-text: #c0cdfc;

  --shadow-control: 0 1px 2px rgb(0 0 0 / 0.26);
  --shadow-button:
    0 10px 24px rgb(66 62 236 / 0.3),
    0 4px 8px rgb(0 0 0 / 0.26);
  --shadow-surface:
    0 16px 32px rgb(0 0 0 / 0.22),
    0 4px 8px rgb(0 0 0 / 0.16);
  --shadow-floating:
    0 22px 52px rgb(0 0 0 / 0.34),
    0 8px 18px rgb(0 0 0 / 0.24);
  --shadow-overlay:
    0 30px 80px rgb(0 0 0 / 0.42),
    0 12px 28px rgb(0 0 0 / 0.28);
}

/* -----------------------------------------------------------------------------
 * 22. Topbar user chip + evaluation block (app.js runtime injections)
 * -------------------------------------------------------------------------- */
.topbar-user {
  position: relative;
  display: inline-flex;
}

.topbar-user .topbar-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: auto;
  padding: var(--space-1_5) var(--space-3) var(--space-1_5) var(--space-1_5);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-control);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.topbar-user .topbar-user-trigger:hover {
  background: var(--card);
  border-color: color-mix(in srgb, var(--primary, #2563eb) 35%, var(--border));
}
.topbar-user .topbar-user-trigger:active {
  background: var(--card);
}
.topbar-user .topbar-user-trigger:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
  box-shadow: var(--shadow-control);
}
.topbar-user.is-open .topbar-user-trigger {
  border-color: color-mix(in srgb, var(--primary, #2563eb) 45%, var(--border));
  background: var(--card);
  box-shadow: var(--shadow-control);
}

.topbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-emphasis);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.topbar-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.topbar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.topbar-user-sub {
  font-size: 11px;
  color: var(--muted-foreground);
  letter-spacing: 0.01em;
}

.topbar-user-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  transition: transform 0.18s ease, color 0.15s ease;
  margin-left: 2px;
}
.topbar-user.is-open .topbar-user-chevron {
  transform: rotate(180deg);
  color: var(--foreground);
}

.topbar-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e1e1e1);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.10), 0 4px 10px rgb(0 0 0 / 0.06);
  z-index: 30;
  animation: topbarUserMenuFadeIn 0.12s ease-out;
}

@keyframes topbarUserMenuFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.topbar-user-menu-group {
  padding: 4px 0 2px;
}

.topbar-user-menu-label {
  padding: 6px 12px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground, #888);
}

.topbar-user-menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border, #ececec);
}

.topbar-user-menu .topbar-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 7px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground, #171717);
  cursor: pointer;
  text-align: left;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.topbar-user-menu .topbar-user-menu-item:hover {
  background: var(--muted, #f4f4f5);
  color: var(--foreground, #171717);
}
.topbar-user-menu .topbar-user-menu-item:active {
  background: color-mix(in srgb, var(--muted, #f4f4f5) 85%, var(--foreground) 4%);
}
.topbar-user-menu .topbar-user-menu-item:focus-visible {
  outline: none;
  background: var(--muted, #f4f4f5);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary, #2563eb) 35%, transparent);
}

.topbar-user-menu-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-user-menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground, #888);
  flex-shrink: 0;
}

/* Language list item — radio-style, check on the right */
.topbar-user-menu-item--option .topbar-user-menu-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--primary, #2563eb);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.12s ease;
}
.topbar-user-menu-item--option.is-current {
  color: var(--foreground, #171717);
  font-weight: 600;
}
.topbar-user-menu-item--option.is-current .topbar-user-menu-check {
  opacity: 1;
}

.topbar-user-menu-item--danger {
  color: var(--danger, #b91c1c);
}
.topbar-user-menu-item--danger:hover {
  background: color-mix(in srgb, var(--danger, #b91c1c) 8%, transparent) !important;
  color: var(--danger, #b91c1c) !important;
}
.topbar-user-menu-item--danger .topbar-user-menu-item-icon {
  color: var(--danger, #b91c1c);
}

/* Locale switcher (ZH / EN) */
.locale-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 3px 10px;
  background: var(--muted, #f3f3f3);
  border: 1px solid var(--border, #e1e1e1);
  border-radius: 999px;
  height: 32px;
  box-sizing: border-box;
  white-space: nowrap;
}
.locale-switcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground, #686868);
  margin-right: 4px;
  flex-shrink: 0;
}
/* High specificity required to escape the global `.topbar-actions button` primary rule. */
.locale-switcher .locale-switcher-btn {
  appearance: none;
  border: none;
  background: transparent;
  height: auto;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground, #686868);
  cursor: pointer;
  border-radius: 999px;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.locale-switcher .locale-switcher-btn:hover {
  background: transparent;
  color: var(--foreground, #171717);
}
.locale-switcher .locale-switcher-btn:active {
  background: transparent;
}
.locale-switcher .locale-switcher-btn:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
  box-shadow: none;
}
.locale-switcher .locale-switcher-btn.is-active {
  background: var(--card, #fff);
  color: var(--foreground, #171717);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
}
.locale-switcher .locale-switcher-btn.is-active:hover {
  background: var(--card, #fff);
}
.locale-switcher.is-floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04);
}

/* Sticky topbar so the locale switcher and user actions stay visible while scrolling.
   We pull margin-top up by .main's padding so the bg covers all the way to viewport top
   when scrolled. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--background);
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);
  padding: var(--space-6) var(--space-8) var(--space-4);
}

/* Candidate LLM evaluation block — replaces legacy hard-coded inline styles */
.eval-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.eval-block {
  margin-bottom: var(--space-3);
}

.eval-block-label {
  margin: 0 0 var(--space-1);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.eval-block-body {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--muted);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.7;
}

.eval-empty {
  font-size: 13px;
  color: var(--muted-foreground);
}

.eval-evidence-list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.8;
}

.eval-evidence-list li + li {
  margin-top: var(--space-1);
}

.eval-fact-row {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
}

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

.eval-fact-key {
  flex: 0 0 96px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.eval-fact-value {
  font-size: 13px;
  color: var(--foreground);
  word-break: break-word;
}

.eval-unsupported {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--warning-border);
  border-radius: var(--corner-sm);
  background: var(--warning-soft);
  color: var(--warning-active);
  font-size: 12px;
  line-height: 1.5;
}

/* Solid badge variants used only inside evaluation block */
.badge.badge-solid {
  color: var(--primary-foreground);
  border-color: transparent;
}

.badge.badge-solid.badge-success {
  background: var(--success);
  color: var(--success-foreground);
}

.badge.badge-solid.badge-warning {
  background: var(--warning);
  color: var(--warning-foreground);
}

.badge.badge-solid.badge-info {
  background: var(--info);
  color: var(--info-foreground);
}

.badge.badge-solid.badge-danger,
.badge.badge-danger {
  background: var(--destructive);
  color: var(--destructive-foreground);
  border-color: transparent;
}

.candidate-resume-text-pre {
  margin: 0;
  max-height: 500px;
  overflow-y: auto;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  background: var(--muted);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* -----------------------------------------------------------------------------
 * 23. Task-run detail modal (enlarged, sticky header, scrollable events table)
 * -------------------------------------------------------------------------- */
.task-run-detail-modal {
  display: flex;
  flex-direction: column;
  width: min(1280px, calc(100vw - 48px));
  max-height: min(90vh, 880px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--corner-xl);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

.task-run-detail-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.task-run-detail-header .eyebrow {
  margin: 0 0 var(--space-1);
}

.task-run-detail-header .card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.task-run-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  overflow-y: auto;
}

.task-run-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.task-run-detail-grid .schedule-view-value {
  min-height: var(--control-height-md);
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  padding: var(--space-2) var(--space-3);
}

.task-run-detail-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
}

.task-run-detail-events-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: 0.01em;
}

.task-run-detail-events-count {
  margin-left: var(--space-1);
  font-weight: 500;
  color: var(--muted-foreground);
}

.task-run-detail-events .task-run-events-list {
  margin-top: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--corner-md);
  overflow: auto;
  background: var(--card);
}

.task-run-detail-events .task-run-events-list table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.task-run-detail-events .task-run-events-list thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-align: left;
  letter-spacing: 0.04em;
}

.task-run-detail-events .task-run-events-list tbody td {
  padding: var(--space-3);
  font-size: 13px;
  color: var(--foreground);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  vertical-align: top;
}

.task-run-detail-events .task-run-events-list tbody tr:last-child td {
  border-bottom: none;
}

.task-run-detail-events .task-run-events-list .col-time {
  width: 168px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.task-run-detail-events .task-run-events-list .col-stage {
  width: 144px;
  color: var(--muted-foreground);
}

.task-run-detail-events .task-run-events-list .col-type {
  width: 220px;
}

.task-run-detail-events .task-run-events-list .col-type .badge {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-run-detail-events .task-run-events-list .col-message {
  width: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
}

@media (max-width: 960px) {
  .task-run-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-run-detail-events .task-run-events-list .col-time {
    width: 132px;
  }
  .task-run-detail-events .task-run-events-list .col-stage {
    width: 112px;
  }
  .task-run-detail-events .task-run-events-list .col-type {
    width: 160px;
  }
}

@media (max-width: 640px) {
  .task-run-detail-grid {
    grid-template-columns: 1fr;
  }
  .task-run-detail-header,
  .task-run-detail-body {
    padding: var(--space-4) var(--space-5);
  }
  .task-run-detail-events .task-run-events-list table {
    table-layout: auto;
  }
}