/*
  JOB AGENT DESIGN SYSTEM

  Foundations  — raw values: type, color, spacing, radius, shadow and motion.
  Semantic     — values named by purpose, never by appearance.
  Components   — one shared contract for buttons, tabs, fields, cards and statuses.

  Usage rules
  1. New UI must use an existing semantic token before adding a new primitive.
  2. Controls use --text-control; body copy uses --text-body; metadata uses --text-meta.
  3. Containers use --surface-card + --border-default + --radius-card.
  4. Selection is always --interactive-selected; feedback states use status tokens only.
*/

/* 1. Foundations */
:root {
  color-scheme: light;

  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-48: 48px;
  --line-height-18: 18px;
  --line-height-20: 20px;
  --line-height-24: 24px;
  --line-height-28: 28px;
  --line-height-32: 32px;
  --line-height-36: 36px;
  --line-height-52: 52px;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-heavy: 800;

  --gray-0: #ffffff;
  --gray-25: #fafafa;
  --gray-50: #f5f5f2;
  --gray-100: #e9e9e5;
  --gray-150: #e6e6e2;
  --gray-200: #cecec9;
  --gray-300: #bcbcb7;
  --gray-500: #737373;
  --gray-600: #5f5f5b;
  --gray-700: #3f3f3b;
  --gray-900: #111111;
  --gray-850: #262626;

  --blue-50: #dceaff;
  --blue-200: #b9d1f4;
  --blue-700: #174f9b;
  --violet-50: #e7ddff;
  --violet-200: #cbb8f4;
  --violet-700: #51339a;
  --amber-50: #ffecb8;
  --amber-200: #e6cb84;
  --amber-800: #7a4d00;
  --orange-50: #ffe1ce;
  --orange-200: #efb993;
  --orange-800: #8f3d0e;
  --indigo-50: #ddd9ff;
  --indigo-200: #bbb3f2;
  --indigo-700: #413699;
  --green-50: #d6f1df;
  --green-200: #a8ddb8;
  --green-800: #14652f;
  --red-50: #fad9d9;
  --red-200: #eab1b1;
  --red-800: #982c2c;
  --telegram: #229ed9;
  --hh: #d6001c;
  --habr: #303b44;
  --linkedin: #0a66c2;

  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;

  --radius-control: 10px;
  --radius-card: 14px;
  --radius-container: 18px;
  --radius-pill: 999px;

  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, .04);
  --shadow-menu: 0 10px 35px rgba(0, 0, 0, .10);
  --shadow-drawer: 0 24px 64px rgba(0, 0, 0, .08);
  --shadow-subtle: 0 4px 14px rgba(0, 0, 0, .035);
  --shadow-switch-thumb: 0 1px 3px rgba(0, 0, 0, .18);

  --duration-fast: 150ms;
  --duration-base: 200ms;
  --ease-standard: ease;
}

/* 2. Semantic tokens */
:root {
  --surface-page: var(--gray-25);
  --surface-card: var(--gray-0);
  --surface-subtle: var(--gray-50);
  --surface-muted: var(--gray-100);
  --surface-overlay: rgba(0, 0, 0, .16);
  --surface-header: rgba(250, 250, 250, .94);
  --surface-pressed: rgba(0, 0, 0, .045);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-tertiary: var(--gray-600);
  --text-on-dark: var(--gray-0);

  --border-default: var(--gray-150);
  --border-strong: var(--gray-200);
  --border-interactive: var(--gray-300);

  --interactive-primary: var(--gray-900);
  --interactive-primary-hover: var(--gray-850);
  --interactive-selected: var(--gray-900);
  --interactive-subtle-hover: var(--gray-50);
  --focus-ring: 0 0 0 3px rgba(17, 17, 17, .12);

  --text-meta: var(--font-size-12);
  --text-body: var(--font-size-14);
  --text-control: var(--font-size-14);
  --text-heading-small: var(--font-size-16);
  --text-heading-section: var(--font-size-20);
  --text-heading-drawer: var(--font-size-24);
  --text-display: var(--font-size-48);

  --leading-meta: var(--line-height-18);
  --leading-body: var(--line-height-20);
  --leading-heading-small: var(--line-height-24);
  --leading-heading-section: var(--line-height-28);
  --leading-heading-drawer: var(--line-height-32);
  --leading-display: var(--line-height-52);

  --control-height-sm: 36px;
  --control-height-md: 40px;
  --control-height-lg: 46px;
  --layout-content-width: 1000px;
}

/* Status colors communicate process state and are never used decoratively. */
:root {
  --status-new-bg: var(--gray-100);
  --status-new-border: var(--gray-200);
  --status-new-text: var(--gray-700);
  --status-applied-bg: var(--blue-50);
  --status-applied-border: var(--blue-200);
  --status-applied-text: var(--blue-700);
  --status-hr-bg: var(--violet-50);
  --status-hr-border: var(--violet-200);
  --status-hr-text: var(--violet-700);
  --status-interview-bg: var(--amber-50);
  --status-interview-border: var(--amber-200);
  --status-interview-text: var(--amber-800);
  --status-test-bg: var(--orange-50);
  --status-test-border: var(--orange-200);
  --status-test-text: var(--orange-800);
  --status-final-bg: var(--indigo-50);
  --status-final-border: var(--indigo-200);
  --status-final-text: var(--indigo-700);
  --status-offer-bg: var(--green-50);
  --status-offer-border: var(--green-200);
  --status-offer-text: var(--green-800);
  --status-reject-bg: var(--red-50);
  --status-reject-border: var(--red-200);
  --status-reject-text: var(--red-800);
}

/* 3. Base */
* { box-sizing: border-box; }
html { background: var(--surface-page); }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.muted { color: var(--text-secondary); }
.panel { display: none; }
.panel.active { display: block; }

/* 4. Typography roles */
h1 {
  max-width: 760px;
  margin: 0 0 var(--space-10);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -.045em;
}
.section-head h2 {
  margin: 0;
  font-size: var(--text-heading-section);
  line-height: var(--leading-heading-section);
  letter-spacing: -.02em;
}
.drawer-header h3 {
  margin: 0;
  font-size: var(--text-heading-drawer);
  line-height: var(--leading-heading-drawer);
  letter-spacing: -.025em;
}
.card h4, .pref-block h4, .settings-card h4, .resume-head strong,
.field label, .stepper-label, .upload-title, .job-title {
  font-size: var(--text-heading-small);
  line-height: var(--leading-heading-small);
  font-weight: var(--font-bold);
}
.company, .item, .resume-summary div, .knowledge-item,
.suggest-card p, .source-name, .custom-source-name, .option-label, .settings-empty,
.drawer-header p, .upload-sub, .file-name, .supporting-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.chip, .file-meta, .source-description, .meta, .source-meta {
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}
.result-value { font-size: var(--text-heading-small); line-height: var(--leading-heading-small); font-weight: var(--font-bold); }

/* 5. Shared controls */
.btn, .icon-btn, .link-btn, .menu button, .segmented button, .drawer-tabs button,
.pill, .select-chip, .settings-choice, .toolbar button, .stage-pill, .step button {
  font-size: var(--text-control);
  line-height: var(--leading-body);
}
.btn, .icon-btn {
  min-height: var(--control-height-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.btn { padding: 9px 14px; }
.btn:hover, .icon-btn:hover { background: var(--interactive-subtle-hover); }
.btn.dark { background: var(--interactive-primary); border-color: var(--interactive-primary); color: var(--text-on-dark); }
.btn.dark:hover { background: var(--interactive-primary-hover); }
.btn[disabled] { cursor: not-allowed; opacity: .35; }
.icon-btn { width: var(--control-height-md); padding: 0; display: grid; place-items: center; }
.link-btn { border: 0; background: transparent; color: var(--text-secondary); padding: var(--space-1); }
.link-btn:hover { color: var(--text-primary); }

/* Segmented controls and navigation tabs share one selected-state pattern. */
.segmented, .drawer-tabs {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
}
.segmented { grid-template-columns: repeat(2, 1fr); }
.segmented button, .drawer-tabs button {
  min-height: var(--control-height-sm);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--text-secondary);
  white-space: nowrap;
}
.segmented button.active, .drawer-tabs button.active {
  background: var(--interactive-selected);
  color: var(--text-on-dark);
}
#profileMode { grid-template-columns: repeat(3, 1fr); }

/* Pills are compact filters; selectable chips are form choices. */
.filters, .select-row, .settings-choice-row, .toolbar, .chips, .city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pill, .select-chip, .settings-choice, .toolbar button {
  min-height: var(--control-height-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 7px var(--space-3);
  background: var(--surface-card);
  color: var(--text-primary);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.pill:hover, .select-chip:hover, .settings-choice:hover, .toolbar button:hover { border-color: var(--border-interactive); }
.pill.active, .select-chip.active, .settings-choice.active, .toolbar button.active {
  background: var(--interactive-selected);
  border-color: var(--interactive-selected);
  color: var(--text-on-dark);
}

/* 6. Form fields */
.field { margin: 0; }
.field label { display: block; margin-bottom: var(--space-2); color: var(--text-primary); }
.field input, .field textarea, .city-add input, .add-row input, .source-add input, .source-search {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  color: var(--text-primary);
  padding: 11px var(--space-3);
  line-height: var(--leading-body);
  outline: none;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:hover, .field textarea:hover, .city-add input:hover, .add-row input:hover, .source-add input:hover, .source-search:hover { border-color: var(--border-interactive); }

/* 7. Layout and header */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--space-18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-header);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-bold); }
.header-actions, .drawer-actions, .resume-head-actions, .resume-edit-actions, .actions, .outcome-row { display: flex; align-items: center; gap: var(--space-2); }
.page { max-width: var(--layout-content-width); margin: 0 auto; padding: var(--space-18) var(--space-6) var(--space-24); }

/* 8. Main composer and vacancy list */
.composer { margin-bottom: var(--space-12); }
.composer .segmented { width: 320px; margin-bottom: var(--space-3); }
.vacancy-input-row {
  min-height: var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-container);
  padding: var(--space-2);
  background: var(--surface-card);
}
.vacancy-input-row input { flex: 1; min-width: 0; height: var(--control-height-lg); border: 0; outline: 0; background: transparent; padding: 0 var(--space-4); font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-primary); }
.vacancy-input-row:hover, .vacancy-input-row:focus-within, .vacancy-input-row:has(input:hover) { border-color: var(--border-default); background: var(--surface-card); box-shadow: none; transform: none; }
.vacancy-input-row input:hover, .vacancy-input-row input:focus, .vacancy-input-row input:focus-visible { border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; transform: none; }
.vacancy-input-row .btn { height: var(--control-height-lg); padding: 0 var(--space-5); flex: 0 0 auto; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin: 0 0 var(--space-4); }
.jobs { display: grid; gap: var(--space-3); }
.job {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 40px;
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.job:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); }
.job.dragging { opacity: .45; }
.job.drag-over { outline: 2px solid var(--interactive-primary); outline-offset: 2px; }
.job-title { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-bold); }
.job-copy { min-width: 0; }
.job-title-row { display: flex; align-items: center; gap: var(--space-2); }
.unread-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--blue-700); box-shadow: 0 0 0 3px var(--blue-50); }
.company { margin-top: 2px; color: var(--text-secondary); }
.job-salary { color: var(--text-primary); }
.source-meta, .meta { margin-top: var(--space-1); color: var(--text-secondary); }
.job .company, .job .source-meta { font-size: var(--text-body); line-height: var(--leading-body); }
.more { width: var(--control-height-md); height: var(--control-height-md); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); font-size: var(--text-heading-section); }
.more:hover { background: var(--surface-subtle); }
.empty { padding: var(--space-16) 0; text-align: center; color: var(--text-secondary); font-size: var(--text-body); }

/* Status component */
.stage-pill { justify-self: end; min-width: 112px; border: 1px solid; border-radius: var(--radius-pill); padding: 7px var(--space-3); text-align: center; white-space: nowrap; }
.stage-new { background: var(--status-new-bg); border-color: var(--status-new-border); color: var(--status-new-text); }
.stage-applied { background: var(--status-applied-bg); border-color: var(--status-applied-border); color: var(--status-applied-text); }
.stage-hr { background: var(--status-hr-bg); border-color: var(--status-hr-border); color: var(--status-hr-text); }
.stage-interview { background: var(--status-interview-bg); border-color: var(--status-interview-border); color: var(--status-interview-text); }
.stage-test { background: var(--status-test-bg); border-color: var(--status-test-border); color: var(--status-test-text); }
.stage-final { background: var(--status-final-bg); border-color: var(--status-final-border); color: var(--status-final-text); }
.stage-offer { background: var(--status-offer-bg); border-color: var(--status-offer-border); color: var(--status-offer-text); }
.stage-reject { background: var(--status-reject-bg); border-color: var(--status-reject-border); color: var(--status-reject-text); }

/* 9. Drawers */
.backdrop { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; background: var(--surface-overlay); transition: opacity var(--duration-base); }
.backdrop.show { pointer-events: auto; opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; z-index: 50; width: min(780px, 94vw); height: 100vh; display: flex; flex-direction: column; background: var(--surface-card); box-shadow: var(--shadow-drawer); transform: translateX(102%); transition: transform var(--duration-base); }
.drawer.show { transform: translateX(0); }
.drawer.small { width: min(560px, 94vw); }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) var(--space-6) var(--space-4); }
.drawer-header p { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.drawer-tabs { grid-template-columns: repeat(4, 1fr); margin: 0 var(--space-6) var(--space-4); }
.drawer-body { padding: var(--space-6) var(--space-6) var(--space-12); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.drawer-body::-webkit-scrollbar { display: none; }

/* 10. Cards and content patterns */
.card, .resume-card, .pref-section, .settings-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  background: var(--surface-card);
}
.card { margin: var(--space-4) 0; }
.card h4, .pref-block h4, .settings-card h4 { margin: 0 0 var(--space-3); }
.list, .resume-summary, .pref-fields, .knowledge-list, .suggest-list, .agent-stack { display: grid; }
.list, .resume-summary { gap: var(--space-3); }
.pref-fields { gap: var(--space-5); padding-top: var(--space-1); }
.knowledge-list, .suggest-list { gap: var(--space-3); }
.agent-stack { gap: var(--space-4); }
.item { display: flex; gap: var(--space-2); }
.item .dot { width: 18px; flex: 0 0 18px; }
.chips { margin-top: var(--space-3); }
.chip { border-radius: var(--radius-pill); padding: 6px 10px; background: var(--surface-subtle); }
.resume-head, .source-row, .custom-source-row, .option-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.source-name, .custom-source-name, .file-name { font-weight: var(--font-bold); }
.actions { flex-wrap: wrap; margin: var(--space-5) 0; }
.secondary-actions { display: flex; justify-content: flex-end; margin-top: var(--space-6); }

/* 11. Vacancy detail */
.overview-chips { margin: 0 0 var(--space-4); }
.vacancy-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.vacancy-facts > div { min-width: 0; padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface-subtle); }
.vacancy-facts span, .vacancy-facts strong { display: block; }
.vacancy-facts span { margin-bottom: var(--space-1); color: var(--text-secondary); font-size: var(--text-meta); line-height: var(--leading-meta); }
.vacancy-facts strong { overflow: hidden; color: var(--text-primary); font-size: var(--text-body); line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
.match-mark { color: var(--text-primary); font-weight: var(--font-bold); }
.empty-panel { padding: var(--space-6) 0; color: var(--text-secondary); text-align: center; }
.raw-vacancy { margin: var(--space-4) 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-card); }
.raw-vacancy summary { padding: var(--space-4) var(--space-5); font-size: var(--text-heading-small); line-height: var(--leading-heading-small); font-weight: var(--font-bold); cursor: pointer; }
.raw-vacancy[open] summary { border-bottom: 1px solid var(--border-default); }
.raw-vacancy-text { padding: var(--space-5); color: var(--text-tertiary); font-size: var(--text-body); line-height: var(--leading-heading-small); white-space: pre-wrap; }
.stepper { margin: var(--space-6) 0 var(--space-8); }
.stepper-label { margin-bottom: var(--space-4); }
.steps { display: grid; grid-template-columns: repeat(8, 1fr); align-items: start; }
.steps-six { grid-template-columns: repeat(6, 1fr); }
.step { position: relative; text-align: center; }
.step:not(:last-child)::before { content: ""; position: absolute; top: 8px; left: 50%; right: -50%; height: 1px; background: var(--border-default); }
.step.done:not(:last-child)::before, .step.active:not(:last-child)::before { background: var(--interactive-primary); }
.step button { width: 100%; border: 0; padding: 0; background: transparent; color: var(--text-secondary); }
.step-dot { position: relative; z-index: 2; display: block; width: 16px; height: 16px; margin: 0 auto var(--space-2); border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface-card); }
.step.done .step-dot, .step.active .step-dot { border-color: var(--interactive-primary); background: var(--interactive-primary); }
.step button:hover, .step.active button { color: var(--text-primary); }
.step button:hover .step-dot { border-color: var(--interactive-primary); }
.step.active button { font-weight: var(--font-bold); }

/* 12. Profile */
.profile-segment { margin-bottom: var(--space-6); }
.profile-segment .segmented { width: 100%; }
.profile-pane { display: none; }
.profile-pane.active { display: block; }
#prefsPane.profile-pane.active { display: grid; }
.is-hidden { display: none; }
.upload { display: block; width: 100%; min-height: 168px; margin: 0 0 var(--space-4); padding: var(--space-8) var(--space-6); overflow: hidden; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--surface-card); text-align: center; cursor: pointer; }
.upload.drag { background: var(--surface-subtle); }
.upload input { display: none; }
.upload-icon { margin: var(--space-2) auto var(--space-3); color: var(--text-secondary); font-size: var(--text-heading-drawer); line-height: var(--leading-heading-drawer); }
.upload-sub { margin-top: var(--space-1); color: var(--text-secondary); }
.file-state { display: none; grid-template-columns: 34px minmax(0, 1fr) 36px; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-card); }
.file-state.show { display: grid; }
.file-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-control); background: var(--surface-subtle); font-size: var(--text-heading-small); }
.file-copy, .source-copy, .custom-source-copy { min-width: 0; }
.file-meta { margin-top: 3px; color: var(--text-secondary); }
.file-remove, .source-remove, .icon-delete, .plus { border: 0; background: transparent; color: var(--text-secondary); }
.file-remove { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-control); padding: 0; font-size: var(--text-heading-section); }
.file-remove:hover, .source-remove:hover, .suggest-card .plus:hover { background: var(--surface-pressed); color: var(--text-tertiary); }
.resume-edit-actions { display: none; }
.resume-card.editing #editResume { display: none; }
.resume-card.editing .resume-edit-actions { display: flex; }
.resume-summary { margin-top: var(--space-4); }
.resume-summary span { color: var(--text-secondary); }
.resume-summary.hide { display: none; }
.resume-edit { display: none; }
.resume-edit.show { display: grid; gap: var(--space-5); margin-top: var(--space-5); }

/* Search settings: grouped containers, consistent internal rhythm. */
#prefsPane { gap: var(--space-4); }
.pref-section-stack { display: grid; gap: var(--space-6); }
.pref-block { margin: 0; }
.city-tags { margin-bottom: var(--space-3); }
.city-tag { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 7px 10px; background: var(--surface-subtle); font-size: var(--text-body); line-height: var(--leading-body); }
.city-tag button { border: 0; padding: 0; background: transparent; color: var(--text-secondary); font-size: var(--text-heading-small); line-height: var(--leading-body); }
.city-add, .add-row, .source-add { display: flex; gap: var(--space-2); }
.city-add input, .add-row input, .source-add input { flex: 1; min-width: 0; }

/* Additional information */
.knowledge-item, .suggest-card { display: grid; grid-template-columns: 1fr 32px; gap: var(--space-3); align-items: center; border-radius: var(--radius-card); padding: var(--space-4); }
.knowledge-item { border: 1px solid var(--border-strong); background: var(--surface-card); box-shadow: var(--shadow-subtle); }
.suggest-card { border: 1px solid transparent; background: var(--surface-subtle); }
.suggest-card p { margin: 0; color: var(--text-tertiary); }
.icon-delete { padding: 0; font-size: var(--text-heading-section); }
.plus, .source-remove { width: 32px; height: 32px; border-radius: var(--radius-control); font-size: var(--text-heading-section); }
.add-row { margin: var(--space-4) 0 var(--space-8); }

/* Agent settings */
.agent-tabs { grid-template-columns: repeat(2, 1fr); }
.agent-pane { display: none; }
.agent-pane.active { display: block; }
.settings-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.settings-card-head h4 { margin-bottom: var(--space-1); }
.settings-card-head p { margin: 0; color: var(--text-secondary); font-size: var(--text-meta); line-height: var(--leading-meta); }
.settings-count { flex: 0 0 auto; border-radius: var(--radius-pill); padding: 6px 9px; background: var(--surface-subtle); color: var(--text-secondary); font-size: var(--text-meta); line-height: var(--leading-meta); }
.source-list, .custom-source-list, .company-source-list { display: grid; gap: 0; }
.source-search { width: 100%; margin-bottom: var(--space-3); }
.source-filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.source-filter-row .settings-choice { flex: 0 0 auto; }
.settings-options { display: grid; gap: 0; }
.option-row { padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.source-row, .custom-source-row, .company-source-row { justify-content: initial; }
.source-row .switch { margin-left: auto; }
.company-source-row .switch { margin-left: auto; }
.custom-source-row .source-actions { margin-left: auto; }
.option-row:first-child { padding-top: 0; }
.option-row:last-child { padding-bottom: 0; border-bottom: 0; }
.source-description { margin-top: 3px; color: var(--text-secondary); }
.custom-source-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-row, .custom-source-row, .company-source-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  background: transparent;
}
.source-row:last-child, .custom-source-row:last-child, .company-source-row:last-child { border-bottom: 0; }
.company-source-row { transition: opacity var(--duration-fast); }
.company-mark { background: var(--surface-card); color: var(--text-primary); }
.custom-source-row.is-disabled .source-platform-icon,
.custom-source-row.is-disabled .custom-source-copy { opacity: .42; }
.source-actions { display: flex; align-items: center; gap: var(--space-2); }
.custom-source-meta {
  margin-top: var(--space-half);
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-platform-icon { width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; border-radius: var(--radius-control); font-size: var(--text-meta); line-height: 1; font-weight: var(--font-bold); }
.source-platform-icon svg { width: 24px; height: 24px; }
.source-platform-icon.telegram { background: var(--telegram); }
.source-platform-icon.telegram svg { fill: var(--text-on-dark); }
.source-platform-icon.brand-hh { background: var(--hh); color: var(--text-on-dark); }
.source-platform-icon.brand-habr { background: var(--habr); color: var(--text-on-dark); }
.source-platform-icon.brand-linkedin { background: var(--linkedin); color: var(--text-on-dark); }
.source-platform-icon.neutral { border: 1px solid var(--border-default); background: var(--surface-subtle); color: var(--text-primary); }
.role-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.editable-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-height-sm); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 7px 8px 7px var(--space-3); background: var(--surface-card); font-size: var(--text-body); line-height: var(--leading-body); }
.editable-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--text-secondary); font-size: var(--text-heading-small); }
.editable-chip button:hover { background: var(--surface-subtle); color: var(--text-primary); }
.career-site-list { display: grid; gap: 0; }
.career-site-row { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-default); }
.career-site-row .source-actions { margin-left: auto; }
.career-site-row.is-disabled .source-platform-icon, .career-site-row.is-disabled .source-copy { opacity: .42; }
.source-add { margin-top: var(--space-4); }
.switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 0; background: var(--surface-muted); transition: background var(--duration-base), border-color var(--duration-base); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-card); box-shadow: var(--shadow-switch-thumb); transition: transform var(--duration-base); }
.switch.active { border-color: var(--interactive-primary); background: var(--interactive-primary); }
.switch.active::after { transform: translateX(18px); }
.switch:disabled { cursor: not-allowed; opacity: .35; }
.settings-empty { padding: var(--space-1) 0; color: var(--text-secondary); }
.settings-empty-large { padding: var(--space-7) 0; text-align: center; }
.runtime-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6); background: var(--surface-subtle); }
.runtime-copy { min-width: 0; }
.runtime-card h4 { margin-bottom: var(--space-2); }
.runtime-card .btn { flex: 0 0 auto; }
.runtime-status { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-body); line-height: var(--leading-body); }
.runtime-status::before { content: ""; width: var(--space-2); height: var(--space-2); flex: 0 0 auto; border-radius: 50%; background: var(--border-strong); }
.runtime-status.is-ready::before { background: var(--status-offer-text); }
.runtime-status.is-working::before { background: var(--status-interview-text); }
.runtime-status.is-error::before { background: var(--status-reject-text); }

/* 13. Floating feedback */
.menu { position: fixed; z-index: 70; display: none; min-width: 180px; border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 6px; background: var(--surface-card); box-shadow: var(--shadow-menu); }
.menu.show { display: block; }
.menu button { display: block; width: 100%; border: 0; border-radius: 7px; padding: 9px 10px; background: transparent; text-align: left; }
.menu button:hover { background: var(--surface-subtle); }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 100; pointer-events: none; opacity: 0; transform: translate(-50%, 20px); border-radius: var(--radius-control); padding: 11px 14px; background: var(--interactive-primary); color: var(--text-on-dark); font-size: var(--text-body); line-height: var(--leading-body); transition: opacity var(--duration-base), transform var(--duration-base); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 14. Responsive rules */
@media (max-width: 820px) {
  header { height: var(--space-16); padding: 0 var(--space-4); }
  .page { padding: var(--space-12) 18px var(--space-18); }
  h1 { margin-bottom: var(--space-8); font-size: var(--font-size-32); line-height: 36px; }
  .composer { margin-bottom: var(--space-10); }
  .composer .segmented { width: 100%; }
  .section-head { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .job { grid-template-columns: minmax(0, 1fr) 40px; gap: var(--space-3); padding: var(--space-4); }
  .stage-pill { grid-column: 1; grid-row: 2; justify-self: start; }
  .more { grid-column: 2; grid-row: 1; justify-self: end; }
  .drawer-header { padding: var(--space-5) var(--space-5) var(--space-3); }
  .drawer-tabs { margin: 0 var(--space-5) var(--space-3); overflow: auto; }
  .drawer-body { padding: var(--space-5) var(--space-5) var(--space-10); }
  .steps { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
  .step:nth-child(4)::before { display: none; }
  .vacancy-facts { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .brand { font-size: 0; }
  .header-actions .btn { padding: var(--space-2) 10px; }
  .vacancy-input-row { align-items: stretch; flex-direction: column; }
  .vacancy-input-row .btn { width: 100%; }
  .pref-section { padding: var(--space-4); }
}