:root {
  --bg: #f3f5f9;
  --panel: #ffffff;
  --border: #e4e9f0;
  --border-strong: #cfd7e3;
  --text: #1f2937;
  --muted: #7b8795;
  --accent: #2f6fed;
  --accent-dark: #2359c4;
  --accent-soft: #eaf1fe;
  --green: #2fc76f;
  --green-dark: #21a95b;
  --success: #1f9d55;
  --success-soft: #e8f7ee;
  --red: #f05252;
  --danger: #d14343;
  --danger-soft: #fdecec;
  --warning: #9a6400;
  --warning-soft: #fff4d6;
  --brand-1: #39218f;
  --brand-2: #5a37c4;
  --brand-3: #7c53e2;
  --radius: 8px;
  --mono: "Cascadia Code", "Consolas", ui-monospace, monospace;
  --rail-width: 64px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: auto; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Open Sans", "Segoe UI", "Inter", Roboto, Arial, sans-serif;
}
body { padding-right: var(--rail-width); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -.2px; }

/* ------------------------------- Top bar -------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 56px;
  padding: 0 24px;
  color: #1f2937;
  background: #fff;
  border-bottom: 1px solid #e5eaf0;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .04);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.1px;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #2f6fed, #7c53e2);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.nav { display: flex; align-items: center; gap: 4px; height: 100%; }
.nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  color: #475363;
  font-weight: 400;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: #1f2937; text-decoration: none; }
.nav a.active { color: var(--accent); border-bottom-color: var(--accent); }

.topbar-menu-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #556273;
  cursor: pointer;
}
.topbar-menu-toggle:hover { background: #f2f5f9; color: #1f2937; }
.topbar-menu-toggle svg { width: 19px; height: 19px; }
.topbar-right { display: flex; align-items: center; gap: 1px; margin-left: auto; }

.settings-menu-wrap { position: relative; }
.settings-menu-button { border: 0; background: transparent; cursor: pointer; font: inherit; }
.settings-menu-button.open { color: var(--accent); background: var(--accent-soft); }
.settings-caret { margin-left: 3px; color: #9aa4b0; font-size: 10px; }
.settings-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 80;
  display: grid;
  width: 190px;
  padding: 5px;
  border: 1px solid #e1e7f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(25, 35, 55, .16);
}
.settings-menu a {
  padding: 8px 10px;
  border-radius: 5px;
  color: #3e4b5b;
  font-size: 12px;
}
.settings-menu a:hover { background: #f2f6fb; color: var(--accent); text-decoration: none; }
.settings-menu a.active { background: #eaf1fe; color: #2359c4; }

.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - 56px); }
.app-shell .app { flex: 1; min-width: 0; }
.nav-link {
  padding: 6px 9px;
  color: #556273;
  font-size: 13px;
  font-weight: 400;
  border-radius: 6px;
}
.nav-link:hover { color: #1f2937; background: #f2f5f9; text-decoration: none; }
.nav-link.active { color: var(--accent); background: var(--accent-soft); }
.nav-robots { display: inline-flex; align-items: center; gap: 6px; color: #1f8d55; background: #e8f7ee; font-weight: 500; }
.nav-robots:hover { color: #167446; background: #dcf4e6; }
.nav-robots.active { color: #167446; background: #ccefdc; }
.nav-robots-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fc76f; flex: none; }
.company { margin-left: 14px; color: #8a96a4; font-size: 12px; }
.topbar-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 3px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #556273;
  cursor: pointer;
}
.topbar-bell:hover, .topbar-bell.open { background: #f2f5f9; color: var(--accent); }
.topbar-bell svg { width: 18px; height: 18px; }
.topbar-badge {
  position: absolute;
  top: 1px;
  right: 0;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 2px solid #fff;
  border-radius: 9px;
  background: #f05252;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

/* ------------------------------- Layout --------------------------------- */
.app { padding: 22px 24px 60px; width: 100%; max-width: 2560px; margin: 0 auto; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.page-head h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.page-sub { margin-top: 4px; color: var(--muted); font-size: 12px; }
.page-actions { display: flex; align-items: center; gap: 8px; }

.breadcrumbs { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span { margin: 0 6px; color: var(--border-strong); }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(31, 41, 55, .03);
}
.panel + .panel { margin-top: 16px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { margin: 0; font-size: 14px; }
.panel-body { padding: 16px; }
.panel-note { color: var(--muted); font-size: 12px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.toolbar .grow { flex: 1; }

/* ------------------------------- Buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #f7f9fc; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-create {
  height: 36px;
  padding: 0 18px;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
}
.btn-create:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-danger { color: var(--danger); border-color: #edc9c9; background: #fff; }
.btn-danger:hover { background: var(--danger-soft); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { background: rgba(31, 41, 55, .05); color: var(--text); }
.btn-sm { height: 27px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.btn-link { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: #596574;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.icon-btn:hover { background: #f5f8fc; color: var(--accent); text-decoration: none; }

/* -------------------------------- Inputs -------------------------------- */
input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="url"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .12);
}
input:disabled, select:disabled, textarea:disabled { background: #f6f8fb; color: var(--muted); }
input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); vertical-align: middle; }

.search { width: 260px; }
.filter-select { width: 190px; }

/* -------------------------------- Tables -------------------------------- */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #7d8897;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.grid td {
  padding: 9px 12px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: middle;
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr[data-href] { cursor: pointer; }
table.grid tbody tr[data-href]:hover { background: #f7faff; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid .nowrap { white-space: nowrap; }
table.grid .id { color: var(--muted); font-variant-numeric: tabular-nums; }
table.grid .title { font-weight: 600; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef2f7;
  color: #45546a;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-blue { background: var(--accent-soft); color: var(--accent-dark); }

.empty { padding: 46px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 15px; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}
.pager-buttons { display: flex; gap: 6px; }

/* ------------------------------ List page ------------------------------- */
.list-page { margin: -22px -24px 0; min-height: calc(100vh - 50px); }

.hero {
  padding: 22px 24px 0;
  color: #fff;
  background:
    radial-gradient(900px 280px at 82% -30%, rgba(144, 116, 255, .55), transparent 65%),
    radial-gradient(600px 220px at 20% -20%, rgba(64, 169, 255, .22), transparent 70%),
    linear-gradient(105deg, #39218f 0%, #4b2bb5 45%, #6a43d6 78%, #7c53e2 100%);
}

.hero-top { display: flex; align-items: center; gap: 18px; min-height: 44px; flex-wrap: wrap; }
.hero-top h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.6px; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }

.hero-search { position: relative; width: 320px; }
.hero-search input {
  height: 36px;
  padding-left: 36px;
  padding-right: 30px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
  border-radius: 8px;
}
.hero-search input::placeholder { color: rgba(255, 255, 255, .58); }
.hero-search input:focus {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}
.hero-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  pointer-events: none;
}
.hero-search .search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .65);
  font-size: 16px;
  cursor: pointer;
}
.hero-search .search-clear:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.hero-filter {
  width: 190px;
  height: 36px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
  border-radius: 8px;
}
.hero-filter:focus { border-color: rgba(255, 255, 255, .5); box-shadow: none; }
.hero-filter option { color: var(--text); background: #fff; }

.hero-refresh {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.hero-refresh:hover { background: rgba(255, 255, 255, .2); }

.hero-subnav { display: flex; align-items: center; gap: 8px; padding: 17px 0 14px; flex-wrap: wrap; }
.subnav-pill {
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 15px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.subnav-pill:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.subnav-pill.active { background: #fff; border-color: #fff; color: #3e2a9d; }
.hero-total { margin-left: auto; color: rgba(255, 255, 255, .62); font-size: 12px; }

.content-card {
  margin: 0 12px;
  background: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 4px 18px rgba(26, 16, 74, .12);
  min-height: calc(100vh - 248px);
  overflow: hidden;
}

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #eef4ff;
  border-bottom: 1px solid #dbe7fb;
  font-size: 12px;
  color: #2c4a7c;
}
.bulk-bar strong { font-weight: 700; }
.bulk-bar .grow { flex: 1; }

/* Bitrix-like list table */
.bitrix-table { min-width: 1180px; }
.bitrix-table th {
  height: 40px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #818c9a;
  background: #f7f9fb;
  border-bottom: 1px solid #e9edf3;
}
.bitrix-table td {
  height: 72px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f5;
  vertical-align: middle;
}
.bitrix-table .col-check { width: 34px; padding-right: 0; }
.bitrix-table .col-settings { width: 32px; min-width: 32px; max-width: 32px; padding: 0 !important; text-align: center; }
.column-settings-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #95a0ad;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.column-settings-btn:hover { background: #eef3f9; color: #2f6fed; }
.bitrix-table .col-id { width: 58px; color: #7f8b99; font-variant-numeric: tabular-nums; }
.bitrix-table .col-stage { width: 148px; }
.bitrix-table .col-sum { width: 118px; white-space: nowrap; }
.bitrix-table .col-user { width: 170px; }
.bitrix-table .col-date { width: 112px; white-space: nowrap; }
.bitrix-table .col-source { width: 140px; }
.bitrix-table .col-client { min-width: 180px; }
.bitrix-table .col-deal { min-width: 260px; }
.bitrix-table .col-count { width: 82px; text-align: center; }

.row-title { display: block; color: #2668c5; font-size: 13px; font-weight: 600; line-height: 1.35; }
.row-title:hover { color: #1c55a5; }
.row-subtitle { margin-top: 3px; color: #8b95a3; font-size: 11px; }
.row-comment { color: #66717f; font-size: 12px; line-height: 1.4; max-width: 240px; }
.row-comment .muted-line { color: #97a1ad; }
.cell-muted { color: #9aa4b1; }

.id-cell { color: #7d8897; font-variant-numeric: tabular-nums; }
.money-cell { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }

.stage-cell { width: 124px; }
.stage-track {
  width: 122px;
  height: 7px;
  border-radius: 2px;
  background: #e6eaee;
  overflow: hidden;
}
.stage-track > span { display: block; height: 100%; border-radius: 2px; background: var(--green); }
.stage-track > span.fail { background: var(--red); }
.stage-track > span.warn { background: #e8a317; }
.stage-label { margin-top: 4px; color: #8b95a3; font-size: 11px; }

.user-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-cell .name { color: #3b4655; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  background: #7b68d8;
}

.source-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 130px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e8f7fd;
  color: #1e87b0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-pill i { width: 5px; height: 5px; border-radius: 50%; background: #29a9d6; flex: none; }

/* ------------------------------ Detail page ----------------------------- */
.detail-page { margin: -22px -24px 0; padding: 0 24px 48px; min-height: calc(100vh - 56px); background: var(--bg); }
.detail-header { padding-top: 16px; }
.detail-title-row { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.detail-title-wrap { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 260px); }
.detail-title-wrap h1 { margin: 0; font-size: 26px; font-weight: 600; }
.title-input {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  height: 40px !important;
  padding: 0 8px !important;
  margin-left: -8px;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -.4px;
  border-radius: 7px !important;
}
.detail-title-wrap .title-input { width: auto; }
.title-input:hover { border-color: var(--border) !important; background: #fff !important; }
.title-input:focus { border-color: var(--accent) !important; background: #fff !important; }
.edit-pencil {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9aa4b1;
  font-size: 14px;
  cursor: pointer;
}
.edit-pencil:hover { background: #eef2f7; color: var(--accent); }
.detail-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.detail-page .btn { height: 36px; padding: 0 14px; }
.detail-subtitle { margin-top: 2px; color: var(--muted); font-size: 12px; }

.detail-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 14px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab {
  padding: 11px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #667383;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.stage-bar-wrap { display: flex; align-items: stretch; gap: 8px; margin-top: 16px; }
.stage-bar { display: flex; flex: 1; gap: 3px; overflow-x: auto; padding-bottom: 2px; }
.stage-fail {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #efc9c9;
  border-radius: 6px;
  background: #fff;
  color: var(--danger);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.stage-fail:hover { background: var(--danger-soft); }
.stage-fail.active { background: var(--danger); border-color: var(--danger); color: #fff; }
.fail-reason-list { display: grid; gap: 8px; }
.fail-reason-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.fail-reason-option:hover { border-color: #cbd9e9; background: #f8fbff; }
.fail-reason-option.active { border-color: var(--danger); background: var(--danger-soft); font-weight: 600; }
.fail-reason-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.stage-step {
  flex: 1;
  min-width: 96px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  background: #e9edf2;
  color: #5c6877;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
}
.stage-step:first-child { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.stage-step:hover { background: #dfe5ec; }
.stage-step.passed { opacity: .82; }
.stage-step.active { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.stage-step.active { background: #f05252; color: #fff; }
.stage-step.success { background: var(--green); color: #fff; }
.stage-step:disabled, .stage-fail:disabled { opacity: .7; cursor: default; }

.detail-columns {
  display: grid;
  grid-template-columns: minmax(540px, .92fr) minmax(0, 1.08fr);
  gap: 20px;
  margin-top: 18px;
  align-items: start;
}
.detail-left { min-width: 0; }
.detail-right { min-width: 0; }

.info-card {
  margin-bottom: 16px;
  border: 1px solid #e4eaf0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .04);
  overflow: hidden;
}
.info-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px 0;
}
.info-card-head h2 {
  margin: 0;
  color: #7f8b9a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.card-edit {
  border: 0;
  background: none;
  padding: 0;
  color: #97a1ad;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.card-edit:hover { color: var(--accent); }
.info-card-body { display: grid; gap: 15px; padding: 14px 20px 20px; }
.info-card .field label { color: #8a96a4; font-size: 12px; font-weight: 400; }
.info-card .field .hint { font-size: 11px; }
.info-card .field-static { padding-top: 3px; color: #27313d; font-size: 14px; line-height: 1.35; }

.amount-control { display: flex; align-items: center; gap: 8px; }
.amount-input {
  height: 42px !important;
  border-color: #dbe2ea !important;
  background: #fff !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  font-variant-numeric: tabular-nums;
}
.currency-select { width: 92px; flex: none; }

.system-card > summary {
  padding: 14px 18px;
  color: #7c8795;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.system-card > summary::-webkit-details-marker { display: none; }
.system-card > summary:hover { background: #f1f5f9; }
.system-card[open] > summary { border-bottom: 1px solid #e8edf3; }

/* Timeline */
.timeline {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 320px;
  overflow: visible;
}
.timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 12px;
  border-bottom: 0;
}
.timeline-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.timeline-feed { display: flex; flex-direction: column; gap: 10px; padding: 0; }
.timeline-item { display: flex; gap: 10px; align-items: flex-start; }
.timeline-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: #eaf1fe;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.timeline-icon.green { background: #e8f7ee; color: var(--success); }
.timeline-icon.purple { background: #f0eafe; color: #6a43d6; }
.timeline-icon.orange { background: #fff2df; color: #b7791f; }
.timeline-icon.gray { background: #eef2f7; color: #6b7787; }
.timeline-icon.blue { background: #eaf3ff; color: #2f80ed; }
.timeline-task-type {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 600;
  vertical-align: 1px;
}
.timeline-task-type.is-deal { background: #eaf3ff; color: #2f80ed; }
.timeline-task-type.is-task { background: #f1edff; color: #7c53e2; }
.timeline-task .timeline-title a { color: #334155; font-weight: 500; }
.timeline-task .timeline-title a:hover { color: var(--accent); text-decoration: none; }
.timeline-content {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid #e4eaf0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .035);
}
.timeline-title { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 400; }
.timeline-time { color: #9aa4b0; font-size: 12px; font-weight: 400; white-space: nowrap; }
.timeline-text { margin-top: 5px; color: #5f6b79; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.timeline-text a { color: var(--accent); }
.timeline-hint { padding: 18px; }
.timeline-hint .hint-box { margin: 0; }
.timeline-date { padding: 2px 0 0; color: #97a1ad; font-size: 11px; text-align: center; }

.detail-related { margin-top: 18px; }

.contact-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding: 11px 12px;
  border: 1px solid #e4eaf0;
  border-radius: 9px;
  background: #fff;
}
.contact-preview .grow { flex: 1; min-width: 0; }
.contact-preview .name { display: block; color: #2668c5; font-size: 15px; font-weight: 400; }
.contact-preview .meta { margin-top: 2px; color: #7f8b9a; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.contact-preview.empty-preview { color: #9aa4b1; font-size: 12px; background: #fff; }

.info-card-actions { display: flex; align-items: center; gap: 10px; }
.btn-invoice { border-color: #bfd7fb; background: var(--accent-soft); color: var(--accent-dark); }
.btn-invoice:hover { background: #dceaff; }

/* ------------------------------- Modal ---------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px;
  overflow: auto;
  background: rgba(17, 24, 39, .48);
}
.modal {
  display: flex;
  flex-direction: column;
  width: 760px;
  max-width: 100%;
  max-height: calc(100vh - 56px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(10, 20, 40, .28);
  overflow: hidden;
}
.modal-head, .modal-actions { flex: none; }
.modal-body { overflow-y: auto; }
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.modal-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8793a2;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: #eef2f7; color: var(--text); }
.modal-body { padding: 18px 20px; }
.modal-section { margin-bottom: 16px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-section-title {
  margin: 0 0 10px;
  color: #7c8795;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.modal .form-grid { gap: 12px 16px; }
.modal .field label { font-size: 11px; color: #8793a1; }
.invoice-totals {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}
.invoice-total-row { display: flex; justify-content: space-between; gap: 20px; color: #5f6b79; font-size: 12px; }
.invoice-total-row strong { color: var(--text); font-size: 13px; }
.invoice-total-row.grand { padding-top: 7px; border-top: 1px solid var(--border); font-size: 14px; }
.invoice-total-row.grand strong { font-size: 16px; }
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: #fbfcfd;
}
.invoice-hint { margin-top: 12px; padding: 9px 11px; border-radius: 8px; background: #f8fafc; color: #7c8795; font-size: 11px; line-height: 1.5; }

.card-wide { grid-column: 1 / -1; }
.card-wide .form-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.card-wide .field.span-2 { grid-column: 1 / -1; }
.card-wide textarea { min-height: 58px; }

@media (max-width: 700px) {
  .card-wide .form-grid { grid-template-columns: 1fr; }
  .card-wide .field.span-2 { grid-column: auto; }
  .modal-overlay { padding: 10px; }
  .modal-body { padding: 14px; }
}

/* ------------------------------- Forms ---------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 14px 18px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.span-2 { grid-column: 1 / -1; }
.field label { color: #5b6776; font-size: 12px; font-weight: 600; }
.field label .req { color: var(--red); margin-left: 2px; }
.field .hint { color: var(--muted); font-size: 10.5px; }
.field-static { min-height: 30px; padding: 5px 0; font-size: 13px; overflow-wrap: anywhere; }

.form-section { padding: 16px; border-top: 1px solid var(--border); }
.form-section:first-child { border-top: 0; }
.form-section-title { margin: 0 0 12px; font-size: 14px; }
details.section { border-top: 1px solid var(--border); }
details.section > summary {
  padding: 12px 16px;
  color: #5b6776;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary:hover { background: #fafbfc; }
details.section > .section-body { padding: 0 16px 16px; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #fbfcfd;
  border-radius: 0 0 var(--radius) var(--radius);
}
.form-actions .spacer { flex: 1; }

.mf { display: flex; flex-direction: column; gap: 6px; }
.mf-row { display: flex; gap: 6px; }
.mf-row input { flex: 1; }
.mf-add { align-self: flex-start; }

/* ------------------------------ Related links ---------------------------- */
.related-wrap { margin-top: 0; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.attach-row { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.attach-row select { flex: 1; }
.related-list { margin: 0; padding: 0; list-style: none; }
.related-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #edf1f5;
  font-size: 13px;
}
.related-list li:last-child { border-bottom: 0; }
.related-list .grow { flex: 1; min-width: 0; }
.related-list .meta { color: var(--muted); font-size: 11px; }

/* ------------------------------ Cards ----------------------------------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.card-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.card-head h2 { margin: 0; font-size: 15px; }
.card-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.card-body { padding: 16px; }
.card-body + .card-body { border-top: 1px solid var(--border); }
.form-rows { display: grid; gap: 12px; }
.card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.inline-check { display: flex; align-items: center; gap: 7px; color: #5b6776; font-size: 12px; }

/* ------------------------------ Integrations ----------------------------- */
code, pre, .mono { font-family: var(--mono); font-size: 12px; }
code { padding: 2px 5px; border-radius: 4px; background: #eef2f7; color: #2c3b4f; overflow-wrap: anywhere; }
pre { margin: 10px 0 0; padding: 12px; overflow: auto; border-radius: 8px; background: #172033; color: #e5edf7; line-height: 1.5; }
pre code { padding: 0; background: none; color: inherit; }
.copy-row { display: flex; align-items: center; gap: 6px; }
.copy-row input { flex: 1; font-family: var(--mono); font-size: 12px; }
.hint-box {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.hint-box code { font-size: 11px; }
.log-error { color: var(--danger); font-weight: 600; }
.log-ok { color: var(--success); font-weight: 600; }
.status-line { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.dot.ok { background: var(--success); }
.dot.error { background: var(--danger); }

/* -------------------------------- MyAdmin -------------------------------- */
.admin-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.admin-side { position: sticky; top: 66px; }
.admin-tables { margin: 0; padding: 4px; list-style: none; max-height: calc(100vh - 140px); overflow: auto; }
.admin-tables button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.admin-tables button:hover { background: var(--bg); }
.admin-tables button.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.admin-tables .count { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.admin-main { min-width: 0; }
.sql-editor { width: 100%; min-height: 130px; font-family: var(--mono); font-size: 13px; }
.sql-result { max-height: 440px; overflow: auto; }
.null { color: #a2acb8; font-style: italic; }

/* -------------------------------- Toast --------------------------------- */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  max-width: 420px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #1f2937;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(20, 30, 45, .2);
  opacity: 0;
  visibility: hidden;
}
.toast.show { opacity: 1; visibility: visible; }
.toast.error { background: var(--danger); }
.toast.success { background: #176b45; }

/* ----------------------------- Open lines ------------------------------- */
.openlines-table { min-width: 1380px; }
.openlines-table .col-id { width: 62px; }
.openlines-table td { height: 64px; }
.dialog-client { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dialog-client .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.channel-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e8f7fd;
  color: #1e87b0;
  font-size: 11px;
  font-weight: 600;
}
.crm-links { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.crm-links a { line-height: 1.35; }
.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 600;
}
.channel-chip i { width: 6px; height: 6px; border-radius: 50%; background: #8e9aaa; }
.channel-chip.ok i { background: #39d98a; }
.channel-chip.error { color: #ffd9d9; }
.channel-chip.error i { background: #ff6b6b; }
.channel-chip.off i { background: #e8a317; }
.channel-chip-slot { display: flex; align-items: center; }
.connection-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.connection-banner > div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.connection-banner strong { font-size: 13px; color: var(--text); }
.connection-banner span { color: var(--muted); }
.connection-banner.warn { background: #fffaf0; border-bottom-color: #f3e2bd; }
.connection-banner.warn strong { color: #8a5a00; }
.connection-banner.error { background: #fff4f4; border-bottom-color: #f2cccc; }
.connection-banner.error strong { color: var(--danger); }

/* Settings */
.settings-page .detail-header { padding-top: 18px; }
.settings-page .detail-title-wrap h1 { font-size: 24px; }
.settings-page .detail-actions { margin-left: auto; }
.telegram-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.telegram-logo {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  flex: none;
  border-radius: 50%;
  background: #29a9e8;
  color: #fff;
  font-size: 32px;
  line-height: 1;
}
.telegram-logo.large { width: 86px; height: 86px; font-size: 37px; }
.telegram-card-copy { min-width: 0; }
.telegram-card-copy h2 { margin: 0; font-size: 20px; font-weight: 500; }
.telegram-card-copy p { margin: 4px 0 12px; color: var(--muted); font-size: 12px; }
.telegram-bot-info { display: grid; gap: 4px; color: #5d6978; font-size: 12px; }
.telegram-bot-info b { color: var(--text); }
.telegram-card-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.token-change {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #cfe4fb;
  border-radius: 10px;
  background: #f7fbff;
}
.token-change .field { margin-bottom: 12px; }
.settings-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  margin-top: 22px;
  align-items: start;
}
.settings-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 70px; }
.settings-nav button {
  padding: 8px 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #667382;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.settings-nav button:hover { background: #eef3f9; color: var(--text); }
.settings-nav button.active { background: var(--accent); color: #fff; font-weight: 600; }
.settings-content { min-width: 0; }
.settings-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.settings-card + .settings-card { margin-top: 14px; }
.settings-card-head { padding: 16px 18px 0; }
.settings-card-head h2 { margin: 0; font-size: 17px; font-weight: 500; }
.settings-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.settings-card-body { display: grid; gap: 14px; padding: 16px 18px 20px; }
.settings-divider { height: 1px; background: var(--border); margin: 3px 0; }
.settings-info-row { display: flex; justify-content: space-between; gap: 16px; color: #667382; font-size: 12px; }
.settings-info-row strong { color: var(--text); font-weight: 600; text-align: right; }
.settings-connect { display: flex; align-items: flex-start; gap: 22px; }
.settings-connect-copy { flex: 1; min-width: 0; }
.settings-connect-copy h2 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.settings-connect-copy p { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.settings-connect-copy .field { max-width: 520px; }

/* Chat */
.chat-page {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 310px;
  height: calc(100vh - 50px);
  margin: -22px -24px 0;
  background: #fff;
  overflow: hidden;
}
.chat-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
  background: #f8fafc;
}
.chat-sidebar-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.chat-sidebar-head .icon-btn { flex: none; }
.chat-sidebar-head input { height: 32px; background: #fff; }
.chat-dialog-list { flex: 1; overflow-y: auto; }
.chat-dialog-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f5;
  color: var(--text);
  text-decoration: none;
}
.chat-dialog-item:hover { background: #f0f6fd; text-decoration: none; }
.chat-dialog-item.active { background: #e6f2ff; }
.chat-dialog-copy { flex: 1; min-width: 0; }
.chat-dialog-title { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; }
.chat-dialog-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-dialog-time { flex: none; color: #9aa4b0; font-size: 10px; font-weight: 400; }
.chat-dialog-preview { margin-top: 2px; color: #8793a1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-unread {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.chat-list-empty { padding: 30px 16px; color: var(--muted); font-size: 12px; text-align: center; }
.chat-main { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.chat-header-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-header-client .avatar { width: 34px; height: 34px; font-size: 11px; }
.chat-header h1 { margin: 0; font-size: 15px; font-weight: 600; }
.chat-header-sub { margin-top: 2px; color: var(--muted); font-size: 11px; }
.chat-header-sub .badge { font-size: 10px; padding: 1px 6px; }
.chat-header-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.chat-mobile-back { display: none; }
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  background: linear-gradient(140deg, #edf7f1 0%, #e8f3fb 55%, #dcecfb 100%);
}
.chat-message { display: flex; align-items: flex-end; gap: 8px; max-width: 76%; }
.chat-message.outgoing { align-self: flex-end; }
.chat-message.incoming { align-self: flex-start; }
.chat-avatar { width: 28px; height: 28px; font-size: 10px; }
.chat-bubble {
  min-width: 120px;
  padding: 8px 11px 6px;
  border: 1px solid #e4e9f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .04);
}
.chat-message.outgoing .chat-bubble { background: #e8f3ff; border-color: #cfe4fb; }
.chat-sender { margin-bottom: 3px; color: #3479c9; font-size: 10px; font-weight: 700; }
.chat-message.outgoing .chat-sender { color: #667382; }
.chat-text { color: #2f3b49; font-size: 13px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.chat-time { margin-top: 4px; color: #9aa4b0; font-size: 10px; text-align: right; }
.chat-empty { margin: auto; color: #93a0ae; font-size: 12px; }
.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.chat-composer textarea {
  flex: 1;
  min-height: 38px;
  max-height: 120px;
  height: 38px;
  resize: none;
  padding: 8px 10px;
}
.chat-disabled-hint { padding: 0 16px 9px; color: var(--danger); font-size: 11px; }
.chat-info { border-left: 1px solid var(--border); background: #fbfcfd; overflow-y: auto; }
.chat-info-head { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 24px 18px 18px; border-bottom: 1px solid var(--border); text-align: center; }
.chat-info-avatar { width: 62px; height: 62px; font-size: 19px; }
.chat-info-name { font-size: 15px; font-weight: 600; }
.chat-info-head a { font-size: 12px; }
.chat-info-id { color: var(--muted); font-size: 11px; }
.chat-info-section { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.chat-info-section h3 { margin: 0 0 8px; color: #8a95a3; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.chat-info-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12px; }
.chat-info-row > span:first-child { color: var(--muted); }
.chat-info-row strong { font-weight: 500; text-align: right; }
.chat-info-actions { display: grid; gap: 8px; padding: 16px; }

/* --------------------------- Fields in cards ---------------------------- */
.field-display .field-control { display: none; }
.field-display.is-editing .field-control { display: block; }
.field-display.is-editing .field-value { display: none; }
.field-value {
  min-height: 32px;
  padding: 6px 7px;
  margin: 0 -7px;
  border-radius: 5px;
  color: #27313d;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: text;
}
.field-display:hover .field-value { background: #f3f7fb; }
.field-value .contact-preview { margin-top: 0; }
.field-text { white-space: pre-line; }
.field-display .field-value > a { color: var(--accent); }
.field-display .field-value .badge { margin-top: 0; }
.info-card-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px 13px;
  border-top: 1px solid #edf1f5;
}
.info-card-footer .spacer { flex: 1; }
.card-footer-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #7b8795;
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.card-footer-link:hover { color: var(--accent); }
.card-footer-link.danger { color: var(--danger); }
.add-section-row { padding: 2px 0 14px; }
.card-empty { padding: 8px 0 2px; color: #98a3b0; font-size: 12px; }
.field-delete {
  float: right;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #a2acb8;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.field-delete:hover { background: var(--danger-soft); color: var(--danger); }
.file-field { display: grid; gap: 7px; }
.file-current { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 12px; overflow-wrap: anywhere; }
.file-current a { font-weight: 600; }
.file-field input[type="file"] { font-size: 12px; }
.field-type-list {
  max-height: 310px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.field-type-option {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.field-type-option:last-child { border-bottom: 0; }
.field-type-option:hover { background: #f6f9fd; }
.field-type-option.active { background: #eaf3ff; box-shadow: inset 3px 0 0 var(--accent); }
.field-type-name { display: block; font-size: 12px; font-weight: 600; }
.field-type-desc { display: block; margin-top: 1px; color: var(--muted); font-size: 10.5px; }
.modal-wide { width: 820px; }
.field-picker-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.field-picker-toolbar input[type="text"] { flex: 1; }
.field-picker { max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.field-picker-group { margin-bottom: 16px; }
.field-picker-group:last-child { margin-bottom: 0; }
.field-picker-group h3 {
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  color: #7c8795;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.field-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 14px; }
.field-picker-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.35; cursor: pointer; }
.field-picker-item input { margin-top: 1px; flex: none; }
.field-picker-item:has(input:disabled) { color: #a4aeba; cursor: default; }
.field-picker-item .req { color: var(--danger); }

/* ------------------------------ Settings -------------------------------- */
.settings-home {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
  padding: 24px;
}
.settings-home-card {
  display: block;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}
.settings-home-card:hover { border-color: #bcd7fb; background: #f8fbff; text-decoration: none; }
.settings-home-card h2 { margin: 16px 0 7px; font-size: 19px; font-weight: 500; }
.settings-home-card p { margin: 0; max-width: 460px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.settings-home-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #5d6978;
  font-size: 25px;
}
.setup-content { padding: 24px; }
.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.setup-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.setup-card h2 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.setup-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.setup-card .field > span { color: #5b6776; font-size: 12px; font-weight: 600; }
.field-full { grid-column: 1 / -1; }
.setup-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.setup-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f5f8fc;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.setup-note code { font-size: 11px; overflow-wrap: anywhere; }
.setup-warning { border: 1px solid #f0dfb8; background: #fffaf0; color: #7d5a13; }
.setup-kv { display: grid; gap: 9px; }
.setup-kv > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f6;
  font-size: 12px;
}
.setup-kv > div:last-child { padding-bottom: 0; border-bottom: 0; }
.setup-kv span { flex: none; color: var(--muted); }
.setup-kv strong { font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.setup-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 18px;
}
@media (max-width: 1000px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .setup-content { padding: 14px; }
  .setup-card { padding: 15px; }
  .setup-card .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field-full { grid-column: auto; }
}
.dictionary-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100vh - 235px);
}
.dictionary-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 14px;
  border-right: 1px solid var(--border);
  background: #fbfcfd;
}
.dictionary-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #667382;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.dictionary-nav button:hover { background: #eef3f9; color: var(--text); }
.dictionary-nav button.active { background: #2bb8e6; color: #fff; font-weight: 600; }
.dictionary-count { color: inherit; opacity: .65; font-size: 11px; font-variant-numeric: tabular-nums; }
.dictionary-main { min-width: 0; padding: 20px 22px 28px; }
.dictionary-main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.dictionary-main-head h2 { margin: 0; font-size: 20px; font-weight: 500; }
.dictionary-main-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.dictionary-head-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.dictionary-list { display: grid; gap: 8px; }
.dictionary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 12px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.dictionary-row-handle { cursor: default; opacity: .55; font-size: 16px; }
.dictionary-row-copy { flex: 1; min-width: 0; }
.dictionary-row-name { font-size: 13px; font-weight: 600; }
.dictionary-row-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; font-size: 10px; opacity: .72; }
.dictionary-row-meta code { padding: 0; background: transparent; color: inherit; }
.dictionary-row-actions { display: flex; align-items: center; gap: 2px; }
.dict-action {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  opacity: .72;
}
.dict-action:hover { background: rgba(255, 255, 255, .26); opacity: 1; }
.dict-action.danger { color: var(--danger); }
.row-flag { padding: 0 5px; border: 1px solid currentColor; border-radius: 8px; font-size: 9px; }
.dictionary-note { margin-top: 16px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.fields-list { display: grid; gap: 8px; }
.field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.field-row:hover { border-color: #cbd9e9; background: #fbfdff; }
.field-row-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 7px;
  background: #eef3f9;
  color: #667382;
  font-size: 16px;
}
.field-row-copy { flex: 1; min-width: 0; }
.field-row-name { font-size: 13px; font-weight: 600; }
.field-row-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; color: var(--muted); font-size: 10px; }
.field-row-meta code { padding: 0; background: transparent; color: inherit; }
.field-row-actions { display: flex; gap: 2px; }
.field-row-actions .dict-action { color: #667382; }
.field-row-actions .dict-action:hover { background: #eef3f9; }
.modal-small { width: 540px; }
.modal-actions .spacer { flex: 1; }
.color-preview {
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 16px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.color-palette { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.color-swatch {
  width: 100%;
  aspect-ratio: 1.35;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 4px;
  cursor: pointer;
}
.color-swatch:hover { transform: scale(1.06); }
.color-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.color-custom { display: flex; gap: 8px; margin-top: 10px; }
.color-custom input[type="text"] { flex: 1; text-transform: uppercase; font-family: var(--mono); }
.color-custom input[type="color"] { width: 42px; height: 34px; padding: 2px; cursor: pointer; }

/* ------------------------------- Responsive ------------------------------ */
@media (max-width: 1200px) {
  .detail-columns { grid-template-columns: 1fr; }
  .detail-right { order: 2; }
}

@media (max-width: 900px) {
  .app { padding: 16px 12px 50px; }
  .topbar { padding: 0 12px; gap: 12px; overflow-x: auto; overflow-y: hidden; }
  .topbar > * { flex: none; }
  .topbar-right { margin-left: 8px; }
  .company { display: none; }
  .nav a { padding: 0 9px; }
  .nav-link { padding: 6px 8px; }
  .list-page { margin: -16px -12px 0; }
  .hero { padding: 18px 14px 0; }
  .hero-top h1 { font-size: 23px; }
  .hero-actions { width: 100%; margin-left: 0; }
  .hero-search { flex: 1; width: auto; min-width: 190px; }
  .hero-filter { width: 160px; }
  .content-card { margin: 0 8px; }
  .detail-page { margin: -16px -12px 0; padding: 0 14px 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { position: static; }
  .admin-tables { max-height: 220px; }
  .detail-actions .btn-ghost { display: none; }
}

@media (max-width: 640px) {
  .brand span:last-child { display: none; }
  .nav a { font-size: 12px; padding: 0 7px; }
  .topbar-right .nav-link { font-size: 11px; }
  .detail-title-wrap h1, .title-input { font-size: 19px !important; }
  .detail-actions .icon-btn { display: none; }
  .stage-step { min-width: 110px; }
}

@media (max-width: 1300px) {
  .chat-page { grid-template-columns: 280px minmax(0, 1fr); }
  .chat-info { display: none; }
}

@media (max-width: 900px) {
  .chat-page { grid-template-columns: 240px minmax(0, 1fr); margin: -16px -12px 0; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-home { grid-template-columns: 1fr; padding: 16px; }
  .field-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dictionary-layout { grid-template-columns: 1fr; }
  .dictionary-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  .dictionary-main { padding: 16px; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .settings-connect { flex-direction: column; }
  .telegram-card { flex-wrap: wrap; }
  .telegram-card-actions { width: 100%; margin-left: 0; }
  .settings-page .detail-actions .btn { display: inline-flex; }
}

@media (max-width: 720px) {
  .field-picker-grid { grid-template-columns: 1fr; }
  .info-card-footer { flex-wrap: wrap; gap: 10px; }
  .chat-page { grid-template-columns: 1fr; }
  .chat-sidebar { display: none; }
  .chat-mobile-back { display: inline-grid; }
  .chat-messages { padding: 14px; }
  .chat-message { max-width: 90%; }
  .chat-header { padding: 9px 12px; }
  .chat-header-actions .btn { display: none; }
  .connection-banner { flex-direction: column; align-items: flex-start; }
}

/* ----------------------- Contacts, phones, settings ---------------------- */
.input-with-action { display: flex; align-items: center; gap: 8px; }
.input-with-action input { flex: 1; min-width: 0; }
.input-with-action .btn { flex: none; height: 38px; }

.info-card:has(.contact-search) { overflow: visible; }
.contact-search { position: relative; display: grid; gap: 7px; }
.contact-search-input { position: relative; }
.contact-search-input input { padding-left: 34px; }
.contact-search-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  z-index: 1;
  color: #8a96a4;
  font-size: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.contact-search-candidate { padding: 8px 9px 4px; color: #5f6b79; font-size: 13px; }
.contact-search-create {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #2f6fed;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.contact-search-create:hover { background: #f3f7fc; }
.contact-search-plus {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2fc6f6;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  flex: none;
}
.contact-search-results {
  position: absolute;
  z-index: 20;
  top: 45px;
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: 260px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid #dfe6ee;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(32, 45, 62, .14);
}
.contact-search-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.contact-search-item:hover { background: #f3f7fc; }
.contact-search-item.muted { color: var(--muted); font-size: 12px; }
.contact-search-copy { display: grid; gap: 1px; min-width: 0; }
.contact-search-name { font-size: 14px; }
.contact-search-meta { color: #7f8b9a; font-size: 12px; overflow-wrap: anywhere; }
.contact-search-empty { padding: 10px; color: var(--muted); font-size: 13px; }

.settings-form-actions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.related-company { display: grid; gap: 4px; font-size: 14px; }
.related-company .meta { color: var(--muted); font-size: 12px; }

.entity-company .info-card .field { gap: 4px; }
.entity-company .info-card-main { border-radius: 12px; }
.entity-company .detail-title-wrap .title-input { font-size: 26px !important; }
.entity-company .contact-preview .avatar { width: 30px; height: 30px; font-size: 11px; }
.entity-company .info-card .field-display .field-value { min-height: 30px; }

/* --------------------------- Placeholders -------------------------------- */
.placeholder-status {
  display: flex; align-items: center; gap: 9px; margin: 16px 20px 0; padding: 9px 12px;
  border: 1px solid #f0dfb9; border-radius: 8px; background: #fff9e9; color: #7a652f;
  font-size: 11.5px; line-height: 1.45;
}
.placeholder-status span {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: #f4c95d; color: #5d4a16;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.placeholder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px; }
.placeholder-card { padding: 20px; border: 1px solid #e4eaf0; border-radius: 11px; background: #fff; }
.placeholder-index { display: inline-flex; margin-bottom: 18px; color: #2f6fed; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.placeholder-card h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.placeholder-card p { margin: 0; color: #7f8b9a; font-size: 12px; line-height: 1.55; }
.placeholder-note { padding: 0 20px 20px; color: #9aa4b0; font-size: 11px; }
@media (max-width: 900px) { .placeholder-grid { grid-template-columns: 1fr; padding: 12px; } }

/* ------------------------------ Robots ----------------------------------- */
.robot-content { padding: 0 0 6px; }
.robot-stage-filter { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid #eef2f6; }
.robot-stage-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e4eaf0;
  border-radius: 6px;
  background: #fff;
  color: #5f6b79;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.robot-stage-filter-btn i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.robot-stage-filter-btn span { color: #9aa4b0; font-size: 9px; }
.robot-stage-filter-btn:hover { border-color: #bcd7fb; background: #f8fbff; }
.robot-stage-filter-btn.active { border-color: #b9d7ff; background: #eaf1fe; color: #2359c4; }
.robot-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px 0 22px; }
.robot-card {
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: 15px 16px 12px;
  border: 1px solid #e4eaf0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .03);
}
.robot-card.is-on { border-color: #cfeeda; }
.robot-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.robot-title-wrap { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.robot-dot { width: 8px; height: 8px; margin-top: 5px; flex: none; border-radius: 50%; background: #b7c1cc; }
.robot-card.is-on .robot-dot { background: var(--green); }
.robot-title-wrap h2 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.robot-toggle {
  height: 23px;
  padding: 0 8px;
  flex: none;
  border: 1px solid #dfe6ee;
  border-radius: 5px;
  background: #f4f6f9;
  color: #8a96a4;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.robot-toggle.on { border-color: #cfeeda; background: #e8f7ee; color: #1f8d55; }
.robot-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 12px; color: #6b7785; font-size: 10px; }
.robot-stage-chip { display: inline-flex; padding: 3px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; }
.robot-pipeline { color: #9aa4b0; }
.robot-action { margin-top: 12px; color: #2f6fed; font-size: 11.5px; font-weight: 500; }
.robot-description { margin-top: 4px; color: #7f8b9a; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.robot-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; color: #9aa4b0; font-size: 9.5px; }
.robot-card-footer > div { display: flex; gap: 4px; }
.robot-empty { grid-column: 1 / -1; }
.robot-runs { border-top: 0; }
.robot-runs-head { padding: 16px 20px 10px; }
.robot-runs-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.robot-runs .table-wrap { margin: 0 20px 10px; }
.robot-runs > .empty { margin: 0 20px 18px; }
.robot-runs-table th:nth-child(1) { width: 135px; }
.robot-runs-table th:nth-child(2) { width: 190px; }
.robot-runs-table th:nth-child(3) { width: 85px; }
.robot-runs-table th:nth-child(4) { width: 105px; }
.robot-runs-table th:nth-child(5) { width: 80px; }
.robot-run-status { display: inline-flex; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; }
.robot-run-status.ok { color: #1f8d55; background: #e8f7ee; }
.robot-run-status.error { color: #b33a3a; background: #fdecec; }
.robot-run-message { font-size: 11px; }
.robot-run-message a { margin-left: 4px; white-space: nowrap; }
@media (max-width: 1200px) { .robot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .robot-cards { grid-template-columns: 1fr; } .robot-content { padding: 0 0 6px; } }

.robot-hero { padding-bottom: 0; }
.robot-add-btn {
  border-color: #2fbd6b;
  background: #2fbd6b;
  color: #fff;
  font-weight: 600;
}
.robot-add-btn:hover { border-color: #27a95d; background: #27a95d; color: #fff; }
.robot-subscription {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 500;
}
.robot-subscription:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .2); color: #fff; }
.robot-subscription span { margin-left: 3px; opacity: .7; }
.robot-search { width: 260px; }
.robot-stage-board {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 0 0 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.robot-stage-board::-webkit-scrollbar { height: 5px; }
.robot-stage-board::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 3px; }
.robot-stage-column { display: flex; flex: 1 0 180px; flex-direction: column; gap: 7px; min-width: 180px; max-width: 300px; }
.robot-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  opacity: .95;
}
.robot-stage-head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.robot-stage-count {
  flex: none;
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .16);
  color: inherit;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}
.robot-stage-plus {
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 7px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .88);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.robot-stage-plus:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .18); }
.robot-stage-list { display: flex; flex-direction: column; gap: 7px; min-height: 54px; padding: 2px; border-radius: 8px; transition: background .12s, outline-color .12s; }
.robot-stage-list.drag-target { background: rgba(255, 255, 255, .1); outline: 1px dashed rgba(255, 255, 255, .45); }
.robot-stage-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px;
  border: 1px dashed rgba(255, 255, 255, .2);
  border-radius: 7px;
  color: rgba(255, 255, 255, .48);
  font-size: 9.5px;
  text-align: center;
}
.robot-mini {
  position: relative;
  padding: 9px 9px 8px;
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  cursor: grab;
  transition: opacity .12s, border-color .12s, box-shadow .12s;
}
.robot-mini:hover { border-color: #c7d6ea; box-shadow: 0 2px 7px rgba(16, 24, 40, .08); }
.robot-mini.on { border-color: #c9ead7; }
.robot-mini.is-dragging { opacity: .45; cursor: grabbing; }
.robot-mini.no-drag { cursor: default; }
.robot-mini.no-drag .robot-mini-grip { opacity: .25; }
.robot-mini-head { display: flex; align-items: flex-start; gap: 5px; }
.robot-mini-grip { flex: none; color: #b4bfcc; font-size: 10px; line-height: 1.4; letter-spacing: -1px; cursor: grab; }
.robot-mini-dot { flex: none; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: #b7c1cc; }
.robot-mini.on .robot-mini-dot { background: var(--green); }
.robot-mini-title {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #25303d;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.robot-mini-power {
  flex: none;
  padding: 2px 5px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  color: #8a96a4;
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}
.robot-mini-power.on { border-color: #cfeeda; background: #e8f7ee; color: #1f8d55; }
.robot-mini-action { margin-top: 7px; color: #2f6fed; font-size: 10px; font-weight: 500; line-height: 1.25; }
.robot-mini-meta { margin-top: 2px; color: #8a96a4; font-size: 9.5px; line-height: 1.3; }
.robot-mini-foot { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #9aa4b0; font-size: 8.5px; }
.robot-mini-order { min-width: 0; color: #6b7785; white-space: nowrap; }
.robot-mini-runs { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.robot-mini-actions { display: flex; flex: none; gap: 1px; opacity: .55; transition: opacity .12s; }
.robot-mini:hover .robot-mini-actions { opacity: 1; }
.robot-mini-actions button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #8a96a4;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.robot-mini-actions button:hover { background: #eef3f9; color: #2f6fed; }
.robot-mini.drop-before { box-shadow: 0 -3px 0 #2f6fed; }
.robot-mini.drop-after { box-shadow: 0 3px 0 #2f6fed; }
.robot-hint-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #eef2f6;
  background: #f8fafc;
  color: #6b7785;
  font-size: 11.5px;
  line-height: 1.4;
}
.robot-hint-icon { color: #2f6fed; font-size: 14px; font-weight: 700; }
.robot-hint-count { margin-left: auto; color: #8a96a4; font-size: 10.5px; white-space: nowrap; }
.robot-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 4px;
  border-bottom: 1px solid #eef2f6;
}
.robot-section-head > div { display: flex; align-items: baseline; gap: 9px; padding: 16px 0 12px; }
.robot-section-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.robot-choice-list { display: grid; gap: 10px; }
.robot-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.robot-choice-card:hover { border-color: #a9c7f8; background: #f8fbff; box-shadow: 0 2px 10px rgba(47, 111, 237, .08); }
.robot-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
}
.robot-choice-icon.invoice { color: #1f8d55; background: #e8f7ee; }
.robot-choice-icon.field { color: #365fc8; background: #eaf1fe; }
.robot-choice-copy { display: grid; gap: 4px; min-width: 0; }
.robot-choice-copy strong { color: #1f2a37; font-size: 13px; font-weight: 600; }
.robot-choice-copy span { color: #7f8b9a; font-size: 11.5px; line-height: 1.45; }
@media (max-width: 760px) {
  .robot-search { width: 100%; }
  .robot-subscription { display: none; }
  .robot-stage-board { margin-top: 14px; }
  .robot-hint-bar { flex-wrap: wrap; padding: 10px 12px; }
  .robot-hint-count { margin-left: 0; width: 100%; }
  .robot-runs-head { padding-left: 12px; padding-right: 12px; }
  .robot-runs .table-wrap { margin-left: 12px; margin-right: 12px; }
  .robot-runs > .empty { margin-left: 12px; margin-right: 12px; }
}

/* --------------------------- Deal analytics -------------------------------- */
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 12px; margin-bottom: 12px; }
.analytics-card { padding: 15px 17px; border: 1px solid #e6ecf3; border-radius: 9px; background: #fff; }
.analytics-card + .analytics-card { margin-top: 12px; }
.analytics-grid .analytics-card + .analytics-card { margin-top: 0; }
.analytics-card h3 { margin: 0 0 12px; font-size: 12px; font-weight: 600; }
.analytics-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.analytics-card-head h3 { margin: 0; }
.analytics-total { color: #9aa4b0; font-size: 9.5px; }
.analytics-rows { display: grid; gap: 9px; }
.analytics-rows > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.analytics-rows span { color: #9aa4b0; font-size: 10px; }
.analytics-rows strong { min-width: 0; color: #3e4b5b; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.analytics-rows a { color: #2f6fed; }
.analytics-reaction { background: #f7fbff; }
.analytics-metric { color: #2f6fed; font-size: 30px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.analytics-metric-note { margin-top: 7px; color: #7f8b9a; font-size: 10px; line-height: 1.45; }
.analytics-utm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.analytics-utm-item { display: grid; gap: 4px; padding: 9px 10px; border-radius: 6px; background: #f7f9fc; }
.analytics-utm-item span { color: #9aa4b0; font-size: 9px; }
.analytics-utm-item strong { color: #3e4b5b; font-size: 10.5px; font-weight: 500; overflow-wrap: anywhere; }
.analytics-stage-list { display: grid; gap: 5px; }
.analytics-stage-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px; border-radius: 6px; }
.analytics-stage-row.current { background: #f4f8ff; }
.analytics-stage-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; flex: none; }
.analytics-stage-name { color: #3e4b5b; font-size: 11px; font-weight: 600; }
.analytics-current-badge { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: #eaf1fe; color: #2f6fed; font-size: 8px; font-weight: 600; }
.analytics-stage-meta { margin-top: 2px; color: #9aa4b0; font-size: 9px; }
.analytics-stage-time { flex: none; color: #4e5d70; font-size: 11px; font-weight: 600; white-space: nowrap; }
@media (max-width: 800px) {
  .analytics-grid { grid-template-columns: 1fr; }
  .analytics-utm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------- Deal robots ---------------------------------- */
.deal-robots-hint {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e1ecfb;
  border-radius: 7px;
  background: #f4f8ff;
  color: #5b6b80;
  font-size: 11px;
  line-height: 1.45;
}
.deal-robots-board {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.deal-robots-board::-webkit-scrollbar { height: 5px; }
.deal-robots-board::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.deal-robots-board .robot-stage-column { flex: 1 0 150px; min-width: 150px; max-width: 260px; }
.deal-robots-board .robot-stage-head { height: 34px; padding: 0 8px; font-size: 10.5px; }
.deal-robots-board .robot-stage-list { min-height: 44px; padding: 0; }
.deal-robots-board .robot-stage-empty {
  min-height: 44px;
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #a1aab6;
}
.deal-robot-mini { padding: 8px 8px 7px; cursor: default; }
.deal-robot-mini.done { border-color: #bfe8ce; background: #effaf3; }
.deal-robot-mini.failed { border-color: #f0cccc; background: #fff6f6; }
.deal-robot-mini .robot-mini-dot { background: #b7c1cc; }
.deal-robot-mini.done .robot-mini-dot { background: var(--green); }
.deal-robot-mini.failed .robot-mini-dot { background: #d9534f; }
.deal-robot-mini-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #eef2f6;
  color: #8a96a4;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.deal-robot-mini.done .deal-robot-mini-mark { background: #2fbd6b; color: #fff; }
.deal-robot-mini.failed .deal-robot-mini-mark { background: #d9534f; color: #fff; }
.deal-robot-mini-last { margin-top: 4px; color: #6b7785; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .deal-robots-board .robot-stage-column { flex-basis: 145px; min-width: 145px; }
}

/* -------------------------- My companies --------------------------------- */
.mycompanies-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px; }
.mycompany-card {
  padding: 18px 20px;
  border: 1px solid #e4eaf0;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .04);
}
.mycompany-card.is-default { border-color: #b9d7ff; box-shadow: 0 0 0 1px #e2efff, 0 1px 2px rgba(32, 45, 62, .04); }
.mycompany-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mycompany-card-head h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.mycompany-card-head .badge { margin-bottom: 0; }
.mycompany-card-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.mycompany-card-body { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f3f7; }
.mycompany-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font-size: 12px; }
.mycompany-line span { flex: none; color: #8a96a4; }
.mycompany-line strong { min-width: 0; color: #3e4b5b; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .mycompanies-grid { grid-template-columns: 1fr; padding: 12px; }
}

/* --------------------------- Stage editor -------------------------------- */
.stage-editor { display: grid; gap: 18px; margin-top: 18px; }
.stage-editor-block {
  padding: 18px 20px 12px;
  border: 1px solid #e4eaf0;
  border-radius: 10px;
  background: #fff;
}
.stage-editor-list { display: grid; gap: 7px; }
.stage-editor-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .035);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stage-editor-row:hover { filter: brightness(.97); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .32); }
.stage-editor-handle { width: 12px; flex: none; opacity: .7; font-size: 13px; }
.stage-editor-number { flex: none; opacity: .78; font-size: 11px; font-weight: 700; }
.stage-editor-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.stage-editor-empty { padding: 10px 2px; color: #8a96a4; font-size: 12px; }
.stage-add {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 2px 0;
  border: 0;
  border-top: 1px dashed #e4eaf0;
  background: transparent;
  color: #7f8b9a;
  font: inherit;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.stage-add:hover { color: #2f6fed; }

.stage-final-labels {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 2px;
  color: #2f9e74;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.stage-final-labels::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: #e4eaf0;
}
.stage-final-labels span { position: relative; width: max-content; padding: 0 10px; background: #fff; }
.stage-final-labels .stage-final-title { position: absolute; left: 50%; transform: translateX(-50%); color: #7c8795 !important; font-size: 10px !important; letter-spacing: .02em !important; }
.stage-final-fail-label { justify-self: end; color: #d9534f; }

.stage-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.stage-final-card {
  display: flex;
  flex-direction: column;
  min-height: 140px;
  padding: 18px 20px 10px;
  border: 1px solid #e4eaf0;
  border-radius: 10px;
  background: #fff;
}
.stage-final-card.success { border-color: #d7f0e0; }
.stage-final-card.fail { border-color: #f6dada; }
.stage-final-card .stage-add { margin-top: 8px; }
.stage-final-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin: 12px auto 0;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.stage-final-icon.success { color: #2f9e74; background: #e8f7ee; }
.stage-final-icon.fail { color: #d14343; background: #fdecec; }

.stage-preview-card {
  padding: 16px 20px 18px;
  border: 1px solid #e4eaf0;
  border-radius: 10px;
  background: #fff;
}
.stage-preview-title { margin-bottom: 12px; color: #8a96a4; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.stage-preview-main { display: flex; gap: 4px; min-height: 20px; }
.stage-preview-step {
  display: grid;
  place-items: center;
  flex: 1;
  min-width: 20px;
  height: 20px;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 600;
}
.stage-preview-final-label {
  position: relative;
  margin: 14px 0 8px;
  color: #8a96a4;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}
.stage-preview-final-label::before,
.stage-preview-final-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: #e4eaf0;
}
.stage-preview-final-label::before { left: 0; }
.stage-preview-final-label::after { right: 0; }
.stage-preview-final { display: flex; gap: 22px; align-items: flex-start; }
.stage-preview-side { display: grid; flex: 1; gap: 6px; }
.stage-preview-side-label { font-size: 8.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.stage-preview-side-label.success { color: #2f9e74; }
.stage-preview-side-label.fail { color: #d9534f; }
.stage-preview-bars { display: flex; gap: 4px; min-height: 18px; }
.stage-preview-bars .stage-preview-step { height: 18px; }

@media (max-width: 900px) {
  .stage-final-grid { grid-template-columns: 1fr; }
  .stage-preview-final { flex-direction: column; gap: 10px; }
}

/* ---------------------------- Save dock ---------------------------------- */
.detail-page.has-save-dock { padding-bottom: 108px; }
.save-dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: none;
  border-top: 1px solid #e4eaf0;
  background: #fff;
  box-shadow: 0 -10px 30px rgba(32, 45, 62, .10);
}
.save-dock.is-visible { display: block; }
.save-dock-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1600px;
  min-height: 62px;
  margin: 0 auto;
  padding: 11px 24px;
}
.save-dock-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #f2a33a; }
.save-dock.is-new .save-dock-dot { background: var(--accent); }
.save-dock-text { color: #5f6b79; font-size: 13px; }
.save-dock .spacer { flex: 1; }
.save-dock .btn { height: 38px; padding: 0 22px; }

@media (max-width: 640px) {
  .save-dock-inner { padding: 10px 14px; }
  .save-dock-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .save-dock .btn { flex: none; }
  .detail-page.has-save-dock { padding-bottom: 96px; }
}

/* ------------------------------ Deal tabs ------------------------------- */
.deal-tab-panel { margin-top: 18px; }
.generated-invoices { margin-top: 16px; }
.tab-sheet {
  border: 1px solid #e4eaf0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .04);
  overflow: hidden;
}
.tab-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #eef2f6;
}
.tab-sheet-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.tab-sheet-head p { margin: 3px 0 0; color: #8a96a4; font-size: 12px; }
.tab-sheet-body { padding: 16px 20px; }
.tab-sheet:has(.contact-search) { overflow: visible; }
.relation-contact-search { margin-bottom: 10px; }
.tab-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f3f7; color: #8a96a4; font-size: 12px; }
.tab-empty { padding: 6px 0; color: #9aa4b0; font-size: 13px; }

.relations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.relation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f4f7;
}
.relation-row:last-child { border-bottom: 0; padding-bottom: 0; }
.relation-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.relation-person .grow { min-width: 0; }
.relation-person a { font-size: 14px; }
.relation-person .meta { margin-top: 2px; color: #7f8b9a; font-size: 12px; overflow-wrap: anywhere; }
.relation-person .badge { margin-left: 6px; }
.relation-entity { display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.relation-title { color: #2668c5; font-size: 15px; }
.relation-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.relation-list { margin: 0; }

.history-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid #eef2f6;
}
.history-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 340px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  color: #8a96a4;
  background: #fff;
}
.history-search input { width: 100%; height: 32px; padding: 0; border: 0; background: transparent; font-size: 13px; }
.history-search input:focus { box-shadow: none; }
.history-table td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.history-table th:nth-child(1) { width: 160px; }
.history-table th:nth-child(2) { width: 210px; }
.history-table th:nth-child(3) { width: 110px; }
.history-action { display: inline-flex; padding: 2px 8px; border-radius: 5px; font-size: 12px; font-weight: 500; }
.history-action.add { color: #1f8d55; background: #e8f7ee; }
.history-action.update { color: #2668c5; background: #eaf1fe; }
.history-description { font-size: 13px; line-height: 1.5; }
.history-description.muted { color: #8a96a4; }
.history-change { font-size: 13px; line-height: 1.55; }
.history-field { color: #7f8b9a; }
.history-old { color: #b04a4a; }
.history-new { color: #1f8d55; }
.history-arrow { margin: 0 4px; color: #9aa4b0; }

.system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.system-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid #f1f4f7;
}
.system-row-url { grid-column: 1 / -1; }
.system-label { flex: none; color: #8a96a4; font-size: 12px; }
.system-value { min-width: 0; text-align: right; font-size: 14px; overflow-wrap: anywhere; }
.system-url { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.system-url a { overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 12px; }

@media (max-width: 900px) {
  .relations-grid { grid-template-columns: 1fr; }
  .system-grid { grid-template-columns: 1fr; }
  .system-row-url { grid-column: auto; }
  .history-toolbar { flex-wrap: wrap; }
  .history-search { width: 100%; }
  .history-table { min-width: 760px; }
}

/* ---------------------------- Dialog rail -------------------------------- */
.dialog-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: var(--rail-width);
  padding: 11px 0;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(220px 220px at 50% 12%, rgba(125, 86, 230, .55), transparent 70%),
    linear-gradient(180deg, #1e2b7a 0%, #352997 48%, #552db3 100%);
  box-shadow: -5px 0 18px rgba(24, 16, 74, .14);
  scrollbar-width: none;
}
.dialog-rail::-webkit-scrollbar { display: none; }
.rail-messenger,
.rail-new,
.rail-gpt {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}
.rail-messenger:hover,
.rail-gpt:hover {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .2);
}
.rail-messenger svg { width: 19px; height: 19px; }
.rail-gpt {
  margin-top: auto;
  border-color: rgba(255, 255, 255, .34);
  background: linear-gradient(145deg, rgba(126, 91, 245, .95), rgba(47, 128, 237, .9));
  box-shadow: 0 4px 12px rgba(10, 14, 38, .28);
}
.rail-gpt svg { width: 20px; height: 20px; }
.rail-gpt.active { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.rail-notify { position: relative; }
.rail-notify.open { border-color: #fff; background: rgba(255, 255, 255, .22); }
.rail-notify-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border: 2px solid #352997;
  border-radius: 9px;
  background: #f05252;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}
.rail-sep { flex: none; width: 28px; height: 1px; background: rgba(255, 255, 255, .2); }
.rail-list { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.rail-dialog {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.rail-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .16);
}
.rail-dialog:hover .rail-avatar, .rail-dialog.active .rail-avatar { box-shadow: 0 0 0 2px #fff; }
.rail-dialog.active .rail-avatar { outline: 2px solid rgba(255, 255, 255, .35); outline-offset: 2px; }
.rail-dialog.openline::after {
  content: '';
  position: absolute;
  right: 1px;
  bottom: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #352997;
  border-radius: 50%;
  background: #2fc76f;
}
.rail-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border: 2px solid #352997;
  border-radius: 9px;
  background: #f05252;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}
.rail-hint { padding: 5px 2px; color: rgba(255, 255, 255, .55); font-size: 9px; line-height: 1.3; text-align: center; }
.rail-new {
  margin-top: 0;
  border-style: dashed;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .82);
  font-size: 20px;
  font-weight: 400;
}
.rail-new:hover { background: rgba(255, 255, 255, .17); color: #fff; }

/* --------------------------- Notifications -------------------------------- */
.notifications-panel {
  position: fixed;
  top: 64px;
  right: calc(var(--rail-width) + 12px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: 390px;
  max-width: calc(100vw - 88px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  border: 1px solid #e1e7f0;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(25, 35, 55, .18);
}
.notifications-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #eef2f6;
}
.notifications-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.notifications-head p { margin: 2px 0 0; color: #8a96a4; font-size: 10px; }
.notifications-filters {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #eef2f6;
  background: #f8fafc;
}
.notifications-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #6b7785;
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.notifications-filter span { color: #9aa4b0; font-size: 9px; }
.notifications-filter:hover { background: #eef3f9; }
.notifications-filter.active { background: #eaf1fe; color: #2359c4; }
.notifications-filter.active span { color: #4b7bd6; }
.notifications-list { flex: 1; overflow-y: auto; }
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f4f7;
  background: #fff;
}
.notification-item.is-new { background: #f5f9ff; }
.notification-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
}
.notification-icon.robot { background: #e8f7ee; color: #1f8d55; }
.notification-icon.event { background: #eaf1fe; color: #365fc8; }
.notification-body { flex: 1; min-width: 0; }
.notification-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notification-title-row strong { min-width: 0; color: #25303d; font-size: 11.5px; font-weight: 600; overflow-wrap: anywhere; }
.notification-status { flex: none; padding: 2px 5px; border-radius: 4px; background: #eef2f6; color: #7f8b9a; font-size: 8px; font-weight: 700; white-space: nowrap; }
.notification-status.ok { background: #d9f4e4; color: #1f8d55; }
.notification-status.error { background: #fde6e6; color: #b33a3a; }
.notification-subtitle { margin-top: 2px; color: #6b7785; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.notification-message { margin-top: 3px; color: #8a96a4; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.notification-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; color: #9aa4b0; font-size: 9px; }
.notification-foot a { color: #2f6fed; font-size: 9px; }
.notifications-loading, .notifications-empty { padding: 26px 18px; color: #8a96a4; font-size: 11px; text-align: center; }

/* ----------------------------- Messenger ---------------------------------- */
.messenger-overlay {
  position: fixed;
  top: 0;
  right: var(--rail-width);
  bottom: 0;
  left: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  background: rgba(16, 24, 40, .2);
}
.messenger-panel {
  display: flex;
  width: min(860px, 100%);
  height: 100%;
  min-width: 0;
  background: #fff;
  box-shadow: -12px 0 40px rgba(20, 28, 50, .2);
}
.messenger-side {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 290px;
  min-height: 0;
  border-right: 1px solid #e8edf4;
  background: #fff;
}
.messenger-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 15px 14px 11px;
  border-bottom: 1px solid #eef2f6;
}
.messenger-side-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.messenger-side-head p { margin: 2px 0 0; color: #8a96a4; font-size: 9.5px; }
.messenger-search {
  position: relative;
  margin: 10px 12px;
}
.messenger-search span {
  position: absolute;
  top: 8px;
  left: 9px;
  color: #9aa4b0;
  font-size: 14px;
  pointer-events: none;
}
.messenger-search input {
  height: 33px;
  padding-left: 28px;
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  background: #f8fafc;
  font: inherit;
  font-size: 11px;
}
.messenger-search input:focus { border-color: #a9c7f8; background: #fff; outline: none; }
.messenger-chat-list { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid #eef2f6; }
.messenger-chat-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid #f4f6f9;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.messenger-chat-item:hover { background: #f8fafc; }
.messenger-chat-item.active { background: #eef4ff; }
.messenger-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}
.messenger-avatar.small { width: 27px; height: 27px; font-size: 8.5px; }
.messenger-avatar.tiny { width: 23px; height: 23px; font-size: 8px; }
.messenger-chat-copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
.messenger-chat-name { overflow: hidden; color: #25303d; font-size: 11.5px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.messenger-chat-preview { overflow: hidden; color: #8a96a4; font-size: 9.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.messenger-chat-meta { display: grid; flex: none; justify-items: end; gap: 3px; color: #9aa4b0; font-size: 8.5px; }
.messenger-chat-meta b { display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #2f6fed; color: #fff; font-size: 8px; font-weight: 700; }
.messenger-employees { flex: none; max-height: 190px; padding: 8px 12px 12px; overflow-y: auto; border-top: 1px solid #eef2f6; }
.messenger-section-title { margin-bottom: 4px; color: #9aa4b0; font-size: 8.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.messenger-employee {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 3px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.messenger-employee:hover { background: #f4f7fb; }
.messenger-employee > span:last-child { display: grid; gap: 1px; min-width: 0; }
.messenger-empty-list { padding: 18px 12px; color: #9aa4b0; font-size: 10.5px; text-align: center; }
.messenger-main { display: flex; flex: 1; flex-direction: column; min-width: 0; background: #f6f8fc; }
.messenger-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px 18px;
  border-bottom: 1px solid #e8edf4;
  background: #fff;
}
.messenger-chat-head-copy { min-width: 0; }
.messenger-chat-head h3 { margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.messenger-chat-head p { margin: 2px 0 0; color: #8a96a4; font-size: 9.5px; line-height: 1.35; overflow-wrap: anywhere; }
.messenger-messages { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; padding: 16px 20px; overflow-y: auto; }
.messenger-message-row { display: flex; align-items: flex-end; gap: 6px; width: 100%; }
.messenger-message-row.mine { justify-content: flex-end; }
.messenger-bubble {
  max-width: 72%;
  padding: 8px 11px;
  border: 1px solid #dfe6ef;
  border-radius: 10px 10px 10px 3px;
  background: #fff;
  color: #2d3a49;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.messenger-message-row.mine .messenger-bubble { border-color: #2f6fed; border-radius: 10px 10px 3px 10px; background: #2f6fed; color: #fff; }
.messenger-author { margin-bottom: 3px; color: #6b7785; font-size: 8.5px; font-weight: 700; }
.messenger-text { white-space: pre-wrap; }
.messenger-time { margin-top: 3px; color: #9aa4b0; font-size: 8px; text-align: right; }
.messenger-message-row.mine .messenger-time { color: rgba(255, 255, 255, .7); }
.messenger-empty-chat { display: grid; place-items: center; flex: 1; min-height: 180px; color: #9aa4b0; font-size: 11px; }
.messenger-empty-messages { margin: auto; color: #9aa4b0; font-size: 11px; text-align: center; }
.messenger-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #e8edf4;
  background: #fff;
}
.messenger-composer textarea {
  flex: 1;
  min-height: 38px;
  max-height: 110px;
  padding: 9px 10px;
  border: 1px solid #dfe6ef;
  border-radius: 7px;
  background: #f8fafc;
  color: #2d3a49;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.4;
  resize: vertical;
}
.messenger-composer textarea:focus { border-color: #a9c7f8; background: #fff; outline: none; }
.messenger-composer textarea:disabled { opacity: .6; }
.messenger-composer .btn { height: 36px; font-size: 11px; }

@media (max-width: 900px) {
  body { padding-right: 0; }
  .dialog-rail { display: none; }
  .messenger-overlay { right: 0; }
  .notifications-panel { right: 12px; max-width: calc(100vw - 24px); }
  .toast { right: 20px; }
}
@media (max-width: 620px) {
  .messenger-panel { width: 100%; }
  .messenger-side { width: 225px; }
  .messenger-messages { padding: 12px; }
  .messenger-composer { padding: 8px; }
}
@media (min-width: 901px) {
  #topbar-messenger { display: none; }
  .toast { right: calc(var(--rail-width) + 20px); }
}

/* ----------------------------- Employees ---------------------------------- */
.employees-content { padding: 18px 20px 22px; }
.employees-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.employee-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 12px 14px 15px;
  border: 1px solid #e3e9f1;
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .04);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.employee-card:hover {
  border-color: #b9d2fa;
  box-shadow: 0 5px 16px rgba(30, 60, 120, .09);
  transform: translateY(-1px);
}
.employee-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.employee-admin-mark { color: #a1aab6; font-size: 8.5px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; }
.employee-admin-mark.visible { color: #2f6fed; }
.employee-online { display: inline-flex; align-items: center; gap: 4px; color: #9aa4b0; font-size: 9px; white-space: nowrap; }
.employee-online i { width: 6px; height: 6px; border-radius: 50%; background: #b8c1cc; }
.employee-online.on { color: #1f9d55; }
.employee-online.on i { background: #2fc76f; box-shadow: 0 0 0 2px #d9f4e4; }
.employee-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3px;
}
.employee-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.employee-avatar.card { width: 126px; height: 126px; margin: 17px auto 11px; font-size: 34px; }
.employee-avatar.profile { width: 182px; height: 182px; margin: 10px auto 14px; font-size: 47px; }
.employee-avatar.editor { width: 92px; height: 92px; font-size: 28px; }
.employee-card h2 { margin: 0; max-width: 100%; overflow: hidden; color: #25303d; font-size: 14px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.employee-card-id { margin-top: 3px; color: #9aa4b0; font-size: 9.5px; }
.employee-card-contacts { display: grid; gap: 2px; margin-top: 10px; color: #7f8b9a; font-size: 9.5px; line-height: 1.35; }
.employee-card-contacts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-detail-content { padding: 20px; }
.employee-profile-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); align-items: start; gap: 16px; }
.employee-profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13px 18px 20px;
  border: 1px solid #e3e9f1;
  border-radius: 11px;
  background: #fff;
  text-align: center;
}
.employee-profile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.employee-admin-label { padding: 4px 9px; border-radius: 0 5px 5px 0; background: #2f6fed; color: #fff; font-size: 8.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.employee-profile-card h2 { margin: 0; font-size: 17px; font-weight: 600; }
.employee-profile-id { margin-top: 4px; color: #9aa4b0; font-size: 10px; }
.employee-profile-telegram { margin: 9px 0 14px; color: #8a96a4; font-size: 10.5px; }
.employee-profile-telegram a { color: #2f6fed; }
.employee-info-card { overflow: hidden; border: 1px solid #e3e9f1; border-radius: 11px; background: #fff; }
.employee-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 13px; border-bottom: 1px solid #eef2f6; }
.employee-info-head h2 { margin: 0; font-size: 16px; font-weight: 500; }
.employee-info-head p { margin: 3px 0 0; color: #9aa4b0; font-size: 10px; }
.employee-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; padding: 5px 20px; }
.employee-info-row { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid #f1f4f7; }
.employee-info-row span { color: #9aa4b0; font-size: 10px; }
.employee-info-row strong { min-width: 0; color: #3e4b5b; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.employee-info-row a { color: #2f6fed; }
.employee-info-note { margin: 7px 20px 16px; padding: 10px 12px; border-radius: 6px; background: #f6f9fd; color: #7f8b9a; font-size: 10px; line-height: 1.45; }
.employee-avatar-editor { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.employee-avatar-upload { display: inline-flex; align-items: center; }
.employee-invite-qr { display: grid; place-items: center; padding: 10px; }
.employee-invite-qr img { width: 240px; height: 240px; image-rendering: auto; }
.employee-invite-id { padding: 8px 10px; border-radius: 6px; background: #f4f7fb; color: #5b6b80; font-size: 12px; text-align: center; }
.employee-invite-id strong { color: #25303d; font-family: var(--mono); font-size: 12px; }
.employee-invite-steps { display: grid; gap: 7px; margin-top: 14px; color: #6b7785; font-size: 11px; line-height: 1.45; }
.employee-invite-steps strong { color: #25303d; }
.employee-invite-link { margin-top: 12px; font-size: 11px; text-align: center; }
@media (max-width: 1200px) { .employees-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .employees-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-profile-grid { grid-template-columns: 1fr; }
  .employees-content, .employee-detail-content { padding: 12px; }
}
@media (max-width: 560px) {
  .employees-grid { grid-template-columns: 1fr; }
  .employee-info-grid { grid-template-columns: 1fr; }
  .employee-info-head { flex-wrap: wrap; }
}

/* ------------------------------- Login ------------------------------------ */
.login-content { display: grid; place-items: start center; min-height: calc(100vh - 170px); padding: 28px 16px 50px; }
.login-card {
  width: min(520px, 100%);
  padding: 24px 28px 28px;
  border: 1px solid #e3e9f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(32, 45, 62, .06);
  text-align: center;
}
.login-card h2 { margin: 16px 0 6px; font-size: 20px; font-weight: 600; }
.login-card > p { margin: 0 auto; max-width: 380px; color: #7f8b9a; font-size: 12px; line-height: 1.5; }
.login-card > p strong { color: #25303d; }
.login-qr { display: grid; place-items: center; }
.login-qr img { width: 260px; height: 260px; }
.login-portal { margin-top: 16px; color: #6b7785; font-size: 11px; }
.login-portal strong { color: #25303d; font-family: var(--mono); }
.login-status { margin-top: 14px; padding: 9px 12px; border-radius: 6px; background: #f4f8ff; color: #4e6b92; font-size: 11px; }
.login-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.login-card.logged-in .employee-avatar { margin: 4px auto 2px; }
.login-card.logged-in > p { margin-top: 5px; }
@media (max-width: 560px) {
  .login-content { padding: 14px 10px 30px; }
  .login-card { padding: 18px 16px 22px; }
  .login-qr img { width: 220px; height: 220px; }
}

/* --------------------------- Monitor widths -------------------------------- */
@media (max-width: 1366px) {
  .topbar { gap: 16px; }
  .deal-topline h1 { font-size: 25px; }
  .deal-search-box { max-width: 560px; }
}

@media (max-width: 1200px) {
  .topbar-right > .nav-link[href="#/training"],
  .topbar-right > .nav-link[href="#/appearance"] { display: none; }
  .deal-topline { gap: 8px; }
  .deal-topline h1 { font-size: 24px; }
  .deal-search-box { max-width: none; }
  .employees-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .app { padding: 18px 16px 50px; }
  .list-page { margin: -18px -16px 0; }
  .hero { padding: 18px 16px 0; }
  .content-card { margin: 0 10px; }
  .deal-topline h1 { font-size: 23px; }
  .deal-search-box { flex-basis: 100%; max-width: none; }
  .deals-section-nav { margin-bottom: 10px; }
  .settings-menu { right: -6px; }
}

@media (max-width: 900px) {
  .deal-create-main { padding: 0 10px; }
  .topbar { overflow: visible; }
}

@media (max-width: 700px) {
  .deal-topline h1 { width: 100%; margin-bottom: 1px; }
  .deal-create-split, .filter-open-btn { flex: 1 1 auto; }
  .deal-create-main { flex: 1; }
  .deal-search-box { order: 5; }
  .filter-chip { max-width: 100%; }
}

@media (max-width: 520px) {
  .topbar { gap: 7px; }
  .topbar-menu-toggle { margin-right: 0; }
  .brand { gap: 6px; }
  .deal-create-split, .filter-open-btn { flex: 1 1 100%; }
  .filter-open-btn { justify-content: center; }
  .analytics-utm-grid { grid-template-columns: 1fr; }
}

@media (min-width: 2000px) {
  .deal-search-box { max-width: 940px; }
  .employees-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.left-menu {
  position: sticky;
  top: 56px;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 238px;
  height: calc(100vh - 56px);
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(280px 220px at 20% 0%, rgba(126, 87, 230, .48), transparent 72%),
    linear-gradient(180deg, #253378 0%, #332596 50%, #4c28ab 100%);
  color: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.left-menu::-webkit-scrollbar { width: 4px; }
.left-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
.left-menu-head { padding: 18px 18px 10px; }
.left-menu-caption { color: rgba(255, 255, 255, .48); font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.left-menu-list { display: flex; flex-direction: column; gap: 2px; padding: 0 9px 12px; }
.left-menu-row { position: relative; border-radius: 7px; }
.left-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 8px;
  border-radius: 7px;
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
  line-height: 1.25;
  text-decoration: none;
}
.left-menu-item:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.left-menu-item.active { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.left-menu-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}
.left-menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.left-menu-drag, .left-menu-delete { display: none; }
.left-menu-drag { margin-left: auto; color: rgba(255, 255, 255, .55); font-size: 12px; cursor: grab; }
.left-menu-delete {
  flex: none;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.left-menu-delete:hover { background: #d9534f; color: #fff; }
.left-menu.menu-editing .left-menu-drag, .left-menu.menu-editing .left-menu-delete { display: inline-flex; align-items: center; justify-content: center; }
.left-menu.menu-editing .left-menu-row { outline: 1px dashed rgba(255, 255, 255, .24); }
.left-menu-row.is-dragging { opacity: .42; }
.left-menu-row.drop-before { box-shadow: 0 -2px 0 #fff; }
.left-menu-row.drop-after { box-shadow: 0 2px 0 #fff; }
.left-menu-empty { padding: 20px 14px; color: rgba(255, 255, 255, .55); font-size: 10.5px; line-height: 1.45; text-align: center; }
.left-menu-loading { padding: 16px; color: rgba(255, 255, 255, .5); font-size: 11px; text-align: center; }
.left-menu-foot { margin-top: auto; padding: 9px 9px 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.left-menu-settings {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.left-menu-settings:hover, .left-menu-settings.active { background: rgba(255, 255, 255, .19); }
.left-menu-settings-icon { display: grid; place-items: center; width: 24px; height: 24px; color: rgba(255, 255, 255, .85); font-size: 15px; }
.left-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.left-menu-tools { display: grid; gap: 4px; margin-bottom: 6px; }
.left-menu-tools button {
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .92);
  font: inherit;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}
.left-menu-tools button:hover { background: rgba(255, 255, 255, .17); }
.left-menu-tools #left-menu-done { border-color: rgba(255, 255, 255, .32); color: #fff; }
body.menu-collapsed .left-menu { width: 62px; }
body.menu-collapsed .left-menu-head { padding-left: 0; padding-right: 0; text-align: center; }
body.menu-collapsed .left-menu-caption { font-size: 0; }
body.menu-collapsed .left-menu-caption::after { content: '•'; font-size: 15px; color: rgba(255, 255, 255, .6); }
body.menu-collapsed .left-menu-list { padding-left: 7px; padding-right: 7px; }
body.menu-collapsed .left-menu-item { justify-content: center; padding: 4px; }
body.menu-collapsed .left-menu-text, body.menu-collapsed .left-menu-label, body.menu-collapsed .left-menu-drag, body.menu-collapsed .left-menu-delete { display: none !important; }
body.menu-collapsed .left-menu-settings { justify-content: center; padding: 5px; }
body.menu-collapsed .left-menu-tools { display: none !important; }
body.menu-collapsed .left-menu-item.active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

.rail-profile {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.rail-profile-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, .17);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}
.rail-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-profile:hover .rail-profile-avatar { box-shadow: 0 0 0 2px #fff; }
.rail-profile-name {
  width: 60px;
  overflow: hidden;
  color: rgba(255, 255, 255, .78);
  font-size: 8px;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------- Deals filters -------------------------------- */
.deals-section-nav { display: flex; align-items: center; gap: 3px; margin: -3px 0 15px; flex-wrap: wrap; }
.deals-section-link {
  padding: 6px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  text-decoration: none;
}
.deals-section-link:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.deals-section-link.active { background: rgba(255, 255, 255, .18); color: #fff; }
.deal-filter-bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.deal-filter-bar .hero-total { margin-left: auto; }
.deal-topline { display: flex; align-items: center; gap: 10px; min-height: 44px; flex-wrap: wrap; }
.deal-topline h1 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.6px; }
.deal-create-split { position: relative; display: flex; align-items: stretch; flex: none; height: 37px; }
.deal-create-main,
.deal-create-arrow {
  border: 1px solid #2fbd6b;
  background: #2fbd6b;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.deal-create-main { padding: 0 13px; border-radius: 7px 0 0 7px; }
.deal-create-arrow { width: 31px; padding: 0; border-left: 1px solid rgba(255, 255, 255, .35); border-radius: 0 7px 7px 0; font-size: 15px; font-weight: 400; }
.deal-create-main:hover, .deal-create-arrow:hover { border-color: #27a95d; background: #27a95d; }
.create-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 85;
  display: grid;
  width: 175px;
  padding: 5px;
  border: 1px solid #e1e7f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(25, 35, 55, .16);
}
.create-menu a { padding: 8px 10px; border-radius: 5px; color: #3e4b5b; font-size: 11.5px; }
.create-menu a:hover { background: #f2f6fb; color: var(--accent); text-decoration: none; }
.deal-search-box {
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  gap: 5px;
  min-width: 280px;
  max-width: 650px;
  min-height: 38px;
  padding: 3px 8px 3px 7px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .11);
}
.deal-search-box:focus-within { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16); }
.deal-search-box .filter-chips { gap: 4px; flex-wrap: wrap; }
.deal-search-box .filter-chip { max-width: 260px; height: 27px; border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .13); font-size: 10px; }
.deal-search-box input {
  flex: 1;
  min-width: 90px;
  height: 30px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 11px;
  letter-spacing: .3px;
  outline: none;
}
.deal-search-box input::placeholder { color: rgba(255, 255, 255, .58); }
.deal-search-icon { flex: none; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1; }
.deal-search-clear { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .75); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.deal-search-clear:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.filter-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 37px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font: inherit;
  font-size: 12px;
  flex: none;
  cursor: pointer;
}
.filter-caret { margin-left: 2px; color: rgba(255, 255, 255, .7); font-size: 13px; }
.filter-open-btn:hover { background: rgba(255, 255, 255, .19); border-color: rgba(255, 255, 255, .38); }
.filter-open-icon { color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1; }
.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .95);
  color: #3e2a9d;
  font-size: 9px;
  font-weight: 700;
}
.filter-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 320px;
  height: 28px;
  padding: 0 5px 0 9px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 14px;
  background: rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .92);
  font-size: 10px;
}
.filter-chip button { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .7); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.filter-chip button:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.deal-search { width: 260px; margin-left: 2px; }
.filter-modal { width: min(720px, calc(100vw - 40px)); }
.filter-panel-body { padding: 16px 20px 2px; overflow-y: auto; max-height: calc(100vh - 220px); }
.filter-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #eef2f6; }
.filter-preset-grid .field { margin: 0; }
.filter-fields-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 0 8px; }
.filter-fields-title h3 { margin: 0; font-size: 12px; font-weight: 600; }
.filter-fields-list { display: grid; gap: 9px; padding-bottom: 12px; }
.filter-field-row { display: grid; gap: 4px; }
.filter-field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #6b7785; font-size: 10px; }
.filter-field-label button { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #9aa4b0; font-size: 14px; line-height: 1; cursor: pointer; }
.filter-field-label button:hover { background: #fdecec; color: #c33; }
.filter-field-row input, .filter-field-row select { width: 100%; }
.filter-fields-empty { padding: 16px; border: 1px dashed #dce4ed; border-radius: 7px; color: #9aa4b0; font-size: 11px; text-align: center; }
.filter-fields-modal { width: min(820px, calc(100vw - 40px)); }
.filter-fields-search { position: relative; margin-bottom: 10px; }
.filter-fields-search span { position: absolute; top: 8px; left: 10px; color: #9aa4b0; font-size: 15px; }
.filter-fields-search input { height: 34px; padding-left: 30px; }
.filter-fields-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px 14px; max-height: calc(100vh - 300px); overflow-y: auto; padding: 2px 1px 6px; }
.filter-field-option { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 5px; border-radius: 4px; color: #4b5b70; font-size: 10.5px; cursor: pointer; }
.filter-field-option:hover { background: #f4f8ff; }
.filter-field-option input { flex: none; }
.filter-field-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-field-option small { margin-left: auto; color: #a1aab6; font-size: 8px; }
@media (max-width: 700px) {
  .filter-preset-grid { grid-template-columns: 1fr; }
  .filter-fields-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deal-search { width: 100%; }
  .deal-search-box { flex-basis: 100%; max-width: none; }
  .deal-topline h1 { margin-right: 3px; }
}

.invoices-content { padding: 16px 20px 22px; }
.invoices-table { min-width: 980px; }
.invoices-table td { height: 48px; }
.invoices-table th:nth-child(1) { width: 130px; }
.invoices-table th:nth-child(2) { width: 100px; }
.invoices-table th:nth-child(3) { width: 250px; }
.invoices-table th:nth-child(5) { width: 130px; }
.invoices-table th:nth-child(6) { width: 115px; }
.invoices-table th:nth-child(7) { width: 180px; }
.invoices-table th:nth-child(8) { width: 70px; }
@media (max-width: 900px) {
  .app-shell { display: block; min-height: calc(100vh - 56px); }
  .left-menu {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    z-index: 25;
    width: 250px;
    height: auto;
    transform: translateX(-101%);
    box-shadow: 10px 0 24px rgba(16, 12, 55, .2);
  }
  body.menu-mobile-open .left-menu { transform: translateX(0); }
  body.menu-mobile-open::after {
    content: '';
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 24;
    background: rgba(15, 23, 42, .24);
  }
  body.menu-collapsed .left-menu { width: 250px; }
  body.menu-collapsed .left-menu-text, body.menu-collapsed .left-menu-label,
  body.menu-collapsed .left-menu-drag, body.menu-collapsed .left-menu-delete { display: initial !important; }
  body.menu-collapsed .left-menu-drag, body.menu-collapsed .left-menu-delete { display: none !important; }
  .left-menu.menu-editing .left-menu-drag, .left-menu.menu-editing .left-menu-delete { display: inline-flex !important; }
  body.menu-collapsed .left-menu-list { padding-left: 9px; padding-right: 9px; }
  body.menu-collapsed .left-menu-item { justify-content: flex-start; padding: 4px 8px; }
  body.menu-collapsed .left-menu-settings { justify-content: flex-start; padding: 5px 7px; }
  body.menu-collapsed .left-menu-head { padding-left: 18px; padding-right: 18px; text-align: left; }
  body.menu-collapsed .left-menu-caption { font-size: 9px; }
  body.menu-collapsed .left-menu-caption::after { content: ''; }
}


/* ------------------------------- Tasks ---------------------------------- */
.task-create { background: var(--green); border-color: var(--green); color: #fff; }
.task-create:hover { background: var(--green-dark); border-color: var(--green-dark); }
.task-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.task-count-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 6px;
  background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .78);
  font: inherit; font-size: 12px; cursor: pointer;
}
.task-count-chip strong { color: #fff; font-size: 13px; }
.task-count-chip:hover, .task-count-chip.active { background: rgba(255, 255, 255, .22); color: #fff; border-color: rgba(255, 255, 255, .5); }
.task-count-chip.is-danger strong { color: #ffd6d6; }
.task-count-chip.is-muted { cursor: default; opacity: .7; }
.tasks-content { padding: 16px 20px 22px; }
.tasks-table { min-width: 980px; }
.tasks-table td { height: 50px; }
.tasks-table .task-name-cell { min-width: 300px; }
.tasks-table .task-name { color: #253348; font-weight: 600; }
.tasks-table .task-name:hover { color: var(--accent); }
.tasks-table .task-activity-cell { min-width: 130px; }
.tasks-table .task-check-progress { display: inline-block; margin-left: 8px; color: var(--success); font-size: 10px; }
.task-row { cursor: pointer; }
.task-row:hover td { background: #f8fbff; }
.task-row.is-overdue .task-deadline { color: var(--danger); font-weight: 600; }
.task-deadline.is-overdue { color: var(--danger); font-weight: 600; }
.task-status-pill, .task-priority-pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--task-color) 13%, #fff);
  color: var(--task-color); font-size: 10.5px; font-weight: 600;
}
.task-status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--task-color); }
.task-priority-pill { background: transparent; padding: 0; font-weight: 500; }
.task-type-pill {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px;
  background: #eaf3ff; color: #2f80ed; font-size: 10px; font-weight: 600;
}
.task-type-pill.is-task { background: #f1edff; color: #7c53e2; }
.task-bulk {
  display: flex; align-items: center; gap: 9px; padding: 10px 2px 0; margin-top: 8px;
  border-top: 1px solid var(--border);
}
.task-bulk .hero-filter { color: var(--text); background: #fff; border-color: var(--border); min-width: 170px; }
.task-group { margin-bottom: 20px; }
.task-group-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 7px; color: #435163; }
.task-group-head h3 { margin: 0; font-size: 13px; }
.task-group-head span { color: var(--muted); font-size: 11px; }
.task-group-empty { padding: 14px; border: 1px dashed #dce4ed; border-radius: 7px; color: var(--muted); font-size: 12px; }
.task-calendar { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; }
.task-calendar-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.task-calendar-head h3 { margin: 0; font-size: 14px; text-transform: capitalize; }
.task-calendar-week, .task-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.task-calendar-week span { padding: 7px; color: var(--muted); font-size: 10px; text-align: center; border-bottom: 1px solid var(--border); }
.task-calendar-day { min-height: 92px; padding: 6px; border-right: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; overflow: hidden; }
.task-calendar-day.is-empty { background: #fafbfd; }
.task-calendar-daynum { color: #697687; font-size: 11px; margin-bottom: 5px; }
.task-calendar-day.has-tasks .task-calendar-daynum { color: var(--accent); font-weight: 700; }
.task-calendar-event { display: block; margin: 2px 0; padding: 3px 4px; border-radius: 3px; background: var(--accent-soft); color: #295da8; font-size: 9px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-calendar-event.is-overdue { background: var(--danger-soft); color: var(--danger); }
.task-calendar-more { color: var(--muted); font-size: 9px; }
.task-gantt { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; }
.task-gantt-head { display: flex; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.task-gantt-row { display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 14px; padding: 8px 13px; border-bottom: 1px solid #edf1f5; }
.task-gantt-row > a { color: #334155; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-gantt-track { position: relative; height: 14px; border-radius: 7px; background: #f0f4f9; }
.task-gantt-bar { position: absolute; top: 2px; height: 10px; border-radius: 5px; background: var(--task-color); opacity: .8; }
.task-detail-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr); gap: 18px; align-items: start; }
.task-detail-left { display: grid; gap: 14px; }
.task-detail-card, .task-feed { background: #fff; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.task-detail-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #eef2f6; }
.task-detail-card-head h2, .task-feed-head h2 { margin: 0; font-size: 13px; }
.task-description { padding: 15px; min-height: 44px; white-space: pre-wrap; color: #4b5b70; }
.task-properties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 4px 15px 13px; }
.task-properties > div { display: grid; gap: 3px; padding: 9px 8px 8px 0; border-bottom: 1px solid #f0f3f7; }
.task-properties span { color: var(--muted); font-size: 10px; }
.task-properties strong { color: #354256; font-size: 12px; font-weight: 500; }
.task-properties strong.is-overdue { color: var(--danger); }
.task-links { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 15px; }
.task-link-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 5px; background: var(--accent-soft); color: #2f5f9e; font-size: 11px; }
.task-link-chip small { color: #7891b3; font-size: 9px; }
.task-link-chip button { border: 0; background: transparent; color: #7891b3; cursor: pointer; font-size: 14px; line-height: 1; }
.task-parent, .task-subtasks { padding: 0 15px 13px; color: var(--muted); font-size: 11px; }
.task-subtasks { display: flex; flex-direction: column; gap: 5px; }
.task-subtasks a { font-size: 11px; }
.task-checklist { padding: 9px 15px 5px; display: grid; gap: 4px; }
.task-checklist-row { display: flex; align-items: center; gap: 8px; min-height: 27px; color: #4b5b70; font-size: 12px; }
.task-checklist-row input { accent-color: var(--green); }
.task-checklist-row button { margin-left: auto; border: 0; background: transparent; color: #a3adb9; cursor: pointer; }
.task-checklist-add { display: flex; gap: 6px; padding: 5px 15px 14px; }
.task-checklist-add input { flex: 1; height: 30px; }
.task-result { padding: 13px 15px 4px; white-space: pre-wrap; color: #4b5b70; font-size: 12px; }
.task-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 15px; font-size: 11px; }
.task-feed { position: sticky; top: 72px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.task-feed-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px 15px; border-bottom: 1px solid #eef2f6; }
.task-feed-head > div { display: flex; flex-direction: column; gap: 3px; }
.task-feed-head span { color: var(--muted); font-size: 10px; }
.task-feed-status { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--task-color) 13%, #fff); color: var(--task-color); font-size: 10px; }
.task-feed-list { flex: 1; overflow-y: auto; padding: 12px 15px; background: #fbfcfe; }
.task-feed-item { padding: 9px 10px; margin-bottom: 8px; border-radius: 7px; background: #fff; border: 1px solid #edf1f5; }
.task-feed-item.comment { background: #f5f9ff; }
.task-feed-meta { display: flex; justify-content: space-between; gap: 8px; color: #8290a1; font-size: 10px; }
.task-feed-meta strong { color: #4b5b70; font-size: 11px; }
.task-feed-text { margin-top: 5px; color: #46566b; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; }
.task-feed-compose { display: flex; gap: 7px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid #eef2f6; }
.task-feed-compose textarea { flex: 1; min-height: 34px; max-height: 120px; resize: vertical; }
.task-feed-compose .btn { height: 34px; }
.task-modal { width: min(860px, calc(100vw - 36px)); }
.task-form-warning {
  padding: 8px 10px; border: 1px solid #f0dfb9; border-radius: 6px;
  background: #fff9e9; color: #7a652f; font-size: 10.5px; line-height: 1.45;
}
.task-form-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2f6; }
.task-form-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.task-link-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.task-link-add { display: grid; grid-template-columns: 150px 130px auto; gap: 7px; align-items: center; }
.task-link-add input, .task-link-add select { height: 31px; }
.entity-tasks { display: block; }
.activity-composer-wrap { display: flex; align-items: flex-start; gap: 9px; }
.activity-bubble {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-top: 9px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #5b9bf8;
  color: #fff;
  box-shadow: 0 3px 9px rgba(64, 132, 222, .24);
}
.activity-composer {
  flex: 1;
  min-width: 0;
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .04);
}
.activity-tabs { display: flex; align-items: center; gap: 3px; padding: 9px 11px 0; flex-wrap: wrap; }
.activity-tabs button {
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #7b8798;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.activity-tabs button:hover { color: var(--accent); }
.activity-tabs button.active { border-color: #c5dcff; background: #f1f7ff; color: var(--accent); font-weight: 600; }
.activity-caret { margin-left: 1px; font-size: 10px; }
.activity-collapse {
  margin-left: auto;
  padding: 3px 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: #9aa4b0 !important;
  font-size: 15px !important;
  line-height: 1;
}
.activity-collapse:hover { color: var(--accent) !important; }
.activity-composer.is-collapsed .activity-collapse { display: none; }
.activity-compact {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  margin: 8px 12px 12px;
  padding: 9px 12px;
  border: 1px solid #cfd9e5;
  border-radius: 10px;
  background: #fff;
  cursor: text;
}
.activity-compact:hover { border-color: #b9c9dc; }
.activity-compact-input {
  flex: 1;
  min-width: 0;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #8d99a9;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: text;
}
.activity-compact-input:hover { color: #65758a; }
.activity-compact-actions {
  flex: 0 0 auto;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #8d99a9;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.activity-compact-actions:hover { color: var(--accent); }
.activity-compact[hidden], .activity-composer-body[hidden], .activity-comment-panel[hidden] { display: none !important; }
.activity-composer-body { padding: 13px 14px 14px; border-top: 1px solid #eef2f6; }
.activity-title { width: 100%; height: 37px; padding: 0 10px; border: 1px solid #dfe6ef; border-radius: 6px; font-size: 15px; font-weight: 600; }
.activity-description { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid #e3e9f1; border-radius: 6px; resize: vertical; }
.activity-composer-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; position: relative; }
.activity-composer-row input[type="datetime-local"] { height: 32px; color: #52637a; }
.activity-icon { height: 32px; padding: 0 10px; border: 1px solid #d8e2ee; border-radius: 5px; background: #fff; color: #64748b; font-size: 11px; cursor: pointer; }
.activity-icon:hover { border-color: var(--accent); color: var(--accent); }
.task-actions-menu { position: absolute; right: 0; top: 38px; z-index: 12; width: 235px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 30px rgba(31, 45, 62, .16); }
.task-actions-menu button { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: #52637a; font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.task-actions-menu button:hover { background: #f2f6fc; color: var(--accent); }
.task-actions-menu button:disabled { color: #a4adb9; cursor: not-allowed; opacity: .8; }
.task-actions-menu button:disabled:hover { background: transparent; color: #a4adb9; }
.task-action-soon {
  display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 999px;
  background: #eef2f7; color: #8b96a4; font-size: 8px; font-weight: 600; text-transform: uppercase;
}
.activity-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.task-file-chip { padding: 3px 7px; border-radius: 4px; background: #f1f5f9; color: #52637a; font-size: 10px; }
.activity-actions { display: flex; gap: 7px; margin-top: 12px; }
.activity-actions .btn { height: 32px; }
.activity-comment-panel { padding: 18px; color: var(--muted); font-size: 12px; border-top: 1px solid #eef2f6; }
@media (max-width: 1024px) {
  .task-detail-layout { grid-template-columns: 1fr; }
  .task-feed { position: static; max-height: none; }
}
@media (max-width: 700px) {
  .task-status-row { margin-top: 2px; }
  .task-count-chip { height: 27px; padding: 0 7px; font-size: 10px; }
  .task-properties { grid-template-columns: 1fr; }
  .task-gantt-row { grid-template-columns: 130px 1fr; }
  .task-link-add { grid-template-columns: 1fr; }
  .task-bulk { flex-wrap: wrap; }
  .activity-composer-row { flex-wrap: wrap; }
  .task-actions-menu { left: 0; right: auto; }
}

.entity-comments { display: grid; gap: 8px; margin-bottom: 12px; }
.entity-comment { padding: 8px 10px; border: 1px solid #edf1f5; border-radius: 6px; background: #fbfcfe; color: #4b5b70; font-size: 11.5px; white-space: pre-wrap; }
.entity-comment-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: #8290a1; font-size: 10px; }
.entity-comment-head strong { color: #4b5b70; font-size: 11px; }
.entity-comment-form { display: flex; gap: 7px; align-items: flex-end; }
.entity-comment-form textarea { flex: 1; min-height: 34px; resize: vertical; }

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

.feed-tasks { margin-bottom: 18px; }

/* ----------------------------- Employee desk ---------------------------- */
.desk-page { margin: -22px -24px 0; }
.desk-hero { padding-bottom: 0; }
.desk-user { display: flex; align-items: center; gap: 14px; min-width: 0; }
.desk-avatar {
  width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%; overflow: hidden;
  color: #fff; font-size: 15px; font-weight: 700;
}
.desk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.desk-heading h1 { margin: 0; color: #fff; font-size: 27px; font-weight: 700; letter-spacing: -.6px; }
.desk-subtitle { margin-top: 2px; color: rgba(255, 255, 255, .72); font-size: 12px; }
.desk-employee-select {
  width: 220px; height: 36px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 12px;
}
.desk-employee-select option { color: var(--text); background: #fff; }
.desk-subnav { align-items: center; }
.desk-month-nav {
  display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 15px; background: rgba(255, 255, 255, .09);
}
.desk-month-nav button {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: #fff; font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.desk-month-nav button:hover { background: rgba(255, 255, 255, .16); }
.desk-month-nav span { min-width: 118px; text-align: center; color: #fff; font-size: 12px; font-weight: 600; }
.desk-month-nav-small {
  height: 30px; border-color: var(--border); background: #fff;
}
.desk-month-nav-small button { color: var(--text); }
.desk-month-nav-small button:hover { background: #f1f5fb; }
.desk-content { padding: 18px 20px 26px; min-height: calc(100vh - 248px); }
.desk-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1301px) {
  .desk-kpi.is-wide { grid-column: span 2; }
}
.desk-kpi {
  min-height: 150px; padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 7px;
  border: 1px solid #e3e9f1; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(32, 45, 62, .04);
}
.desk-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.desk-kpi-label { color: #8490a0; font-size: 10px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; line-height: 1.35; }
.desk-kpi-icon {
  width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700;
}
.desk-kpi.is-violet .desk-kpi-icon { background: #f1edff; color: #7c53e2; }
.desk-kpi.is-red .desk-kpi-icon { background: var(--danger-soft); color: var(--danger); }
.desk-kpi.is-green .desk-kpi-icon { background: var(--success-soft); color: var(--success); }
.desk-kpi.is-orange .desk-kpi-icon { background: #fff4e6; color: #c47a17; }
.desk-kpi-value { color: #1f2937; font-size: 29px; font-weight: 700; line-height: 1.08; letter-spacing: -.8px; }
.desk-kpi-hint { margin-top: auto; color: var(--muted); font-size: 11px; line-height: 1.45; }
.desk-kpi-action { margin-top: 1px; }
.desk-kpi-link { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; }
.desk-kpi-link:hover { text-decoration: underline; }
.desk-progress { height: 6px; overflow: hidden; border-radius: 6px; background: #eef2f7; }
.desk-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.desk-progress.is-green span { background: var(--success); }
.desk-progress.is-violet span { background: #7c53e2; }
.desk-lower { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.desk-card { overflow: hidden; border: 1px solid #e3e9f1; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(32, 45, 62, .04); }
.desk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #eef2f6; }
.desk-card-head h2 { margin: 0; color: #334155; font-size: 14px; font-weight: 600; }
.desk-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.desk-calendar { padding: 14px 18px 18px; }
.desk-calendar-weekdays, .desk-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.desk-calendar-weekdays { margin-bottom: 7px; }
.desk-calendar-weekdays span { color: #98a3b2; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.desk-calendar-grid { grid-auto-rows: minmax(65px, auto); }
.desk-calendar-day {
  min-height: 65px; padding: 7px 8px; display: flex; flex-direction: column; gap: 5px;
  border: 1px solid #edf1f6; border-radius: 8px; background: #fff; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.desk-calendar-day:hover { border-color: #b9c9dc; background: #fbfdff; }
.desk-calendar-day.is-locked { cursor: not-allowed; opacity: .78; }
.desk-calendar-day.is-locked:hover { border-color: #edf1f6; background: #f8fafc; }
.desk-calendar-day.is-off { background: #f8fafc; color: #9aa4b0; }
.desk-calendar-day.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.desk-calendar-num { color: inherit; font-size: 12px; font-weight: 600; }
.desk-calendar-shift { color: #7b8795; font-size: 10px; line-height: 1.25; }
.desk-calendar-day.is-off .desk-calendar-shift { color: #aab3bf; }
.desk-calendar-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 10px; }
.desk-calendar-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.desk-calendar-legend i.is-work { background: var(--accent); }
.desk-calendar-legend i.is-off { background: #cfd7e3; }
.desk-calendar-summary { margin-left: auto; color: #5f6b79; }
.desk-side { display: grid; gap: 16px; }
.desk-quick-links { display: grid; gap: 2px; padding: 6px; }
.desk-quick-links a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); }
.desk-quick-links a:hover { background: #f7faff; text-decoration: none; }
.desk-quick-links a > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.desk-quick-links strong { color: #334155; font-size: 12px; font-weight: 600; }
.desk-quick-links small { color: var(--muted); font-size: 10px; }
.desk-quick-links b { margin-left: auto; color: #b0bac6; font-weight: 400; }
.desk-quick-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-weight: 700; }
.desk-quick-icon.is-blue { background: #eaf2ff; color: #2f6fed; }
.desk-quick-icon.is-violet { background: #f1edff; color: #7c53e2; }
.desk-quick-icon.is-green { background: var(--success-soft); color: var(--success); }
.desk-quick-icon.is-orange { background: #fff4e6; color: #c47a17; }
.desk-summary-rows { padding: 6px 16px 12px; }
.desk-summary-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f3f7; font-size: 12px; }
.desk-summary-rows > div:last-child { border-bottom: 0; }
.desk-summary-rows span { color: var(--muted); }
.desk-summary-rows strong { color: #334155; }
.desk-plan-modal, .desk-schedule-modal { width: min(420px, calc(100vw - 36px)); }
.desk-plan-modal .modal-body, .desk-schedule-modal .modal-body { display: grid; gap: 10px; }
.desk-schedule-time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.desk-schedule-hint { color: var(--muted); font-size: 11px; line-height: 1.45; }
@media (min-width: 1001px) and (max-width: 1300px) {
  .desk-kpi.is-wide { grid-column: span 3; }
}
@media (max-width: 1300px) {
  .desk-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .desk-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desk-kpi.is-wide { grid-column: span 2; }
  .desk-lower { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .desk-page { margin: -22px -12px 0; }
  .desk-kpi-grid { grid-template-columns: 1fr; }
  .desk-kpi.is-wide { grid-column: auto; }
  .desk-content { margin: 0; padding: 14px; border-radius: 0; }
  .desk-user { width: 100%; }
  .desk-employee-select { width: 100%; }
  .desk-calendar { padding: 10px; }
  .desk-calendar-weekdays, .desk-calendar-grid { gap: 4px; }
  .desk-calendar-day { min-height: 56px; padding: 5px; }
  .desk-calendar-shift { font-size: 9px; }
  .desk-calendar-summary { width: 100%; margin-left: 0; }
}

/* ----------------------------- GPT assistant ----------------------------- */
.gpt-overlay {
  position: fixed;
  top: 0;
  right: var(--rail-width);
  bottom: 0;
  left: 0;
  z-index: 88;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px 18px 18px 0;
  background: rgba(16, 24, 40, .18);
}
.gpt-panel {
  display: flex;
  flex-direction: column;
  width: min(450px, calc(100vw - var(--rail-width) - 36px));
  height: min(650px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid #dce4ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(18, 27, 56, .3);
}
.gpt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  color: #fff;
  background:
    radial-gradient(260px 110px at 80% 0%, rgba(156, 126, 255, .58), transparent 70%),
    linear-gradient(120deg, #1e2b7a, #4e33b8 60%, #6a43d6);
}
.gpt-avatar {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  background: rgba(255, 255, 255, .16); font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.gpt-head-copy { flex: 1; min-width: 0; }
.gpt-head-copy h2 { margin: 0; color: #fff; font-size: 15px; font-weight: 600; }
.gpt-head-copy p { margin: 2px 0 0; color: rgba(255, 255, 255, .72); font-size: 9.5px; }
.gpt-icon-btn {
  width: 28px; height: 28px; flex: 0 0 28px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: rgba(255, 255, 255, .75); font: inherit; font-size: 17px; cursor: pointer;
}
.gpt-icon-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.gpt-notice {
  padding: 9px 13px; border-bottom: 1px solid #f0dfb9; background: #fff9e9;
  color: #7a652f; font-size: 10.5px; line-height: 1.45;
}
.gpt-notice a { color: #705713; font-weight: 600; }
.gpt-messages {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px;
  padding: 13px; overflow-y: auto; background: #f7f9fd;
}
.gpt-message {
  max-width: 92%; padding: 9px 11px; border: 1px solid #e4eaf2; border-radius: 12px;
  background: #fff; box-shadow: 0 1px 2px rgba(32, 45, 62, .04);
}
.gpt-message.user { align-self: flex-end; border-color: #d5e3ff; background: #edf5ff; }
.gpt-message.assistant { align-self: flex-start; }
.gpt-message-author {
  margin-bottom: 3px; color: #8d99a9; font-size: 8.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.gpt-message-text { color: #334155; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.gpt-welcome { display: grid; justify-items: center; gap: 9px; padding: 26px 8px; text-align: center; }
.gpt-welcome-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(145deg, #7e5bf5, #2f80ed); color: #fff; font-size: 12px; font-weight: 700;
}
.gpt-welcome h3 { margin: 0; color: #334155; font-size: 15px; }
.gpt-welcome p { margin: 0; max-width: 330px; color: #7b8795; font-size: 11px; line-height: 1.5; }
.gpt-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.gpt-suggestions button {
  padding: 6px 9px; border: 1px solid #dce6f2; border-radius: 14px; background: #fff;
  color: #5b6b80; font: inherit; font-size: 10px; cursor: pointer;
}
.gpt-suggestions button:hover { border-color: #abc8f5; background: #f2f7ff; color: var(--accent); }
.gpt-typing { align-self: flex-start; display: flex; gap: 4px; padding: 8px 11px; border: 1px solid #e4eaf2; border-radius: 12px; background: #fff; }
.gpt-typing span { width: 5px; height: 5px; border-radius: 50%; background: #8d99a9; animation: gpt-pulse 1s infinite ease-in-out; }
.gpt-typing span:nth-child(2) { animation-delay: .15s; }
.gpt-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes gpt-pulse { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.gpt-pending {
  margin: 0 12px 9px; padding: 10px; border: 1px solid #f0dfb9; border-radius: 10px;
  background: #fff9e9;
}
.gpt-pending-head { color: #7a652f; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gpt-pending-text { margin-top: 4px; color: #5d4a16; font-size: 11.5px; line-height: 1.45; }
.gpt-pending-actions { display: flex; gap: 7px; margin-top: 8px; }
.gpt-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid #e8edf4; background: #fff; }
.gpt-form textarea {
  flex: 1; min-height: 38px; max-height: 110px; resize: vertical; padding: 8px 9px;
  border: 1px solid #dfe6ef; border-radius: 9px; font: inherit; font-size: 12px;
}
.gpt-form .btn { flex: 0 0 auto; height: 38px; }
.gpt-foot { padding: 0 14px 10px; color: #9aa4b0; font-size: 9px; line-height: 1.35; background: #fff; }
@media (max-width: 700px) {
  .gpt-overlay { right: 0; padding: 0; }
  .gpt-panel { width: 100%; height: 100%; border-radius: 0; }
}

/* ----------------------------- Portal status ----------------------------- */
.status-page .hero-top { align-items: flex-start; }
.status-live { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .74); font-size: 10.5px; }
.status-live i { width: 6px; height: 6px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110, 231, 168, .16); animation: status-live-pulse 2s infinite; }
@keyframes status-live-pulse { 50% { opacity: .4; } }
.status-content { padding: 18px 20px 28px; }
.status-banner {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.status-banner > div { display: grid; gap: 2px; min-width: 0; }
.status-banner strong { font-size: 13px; }
.status-banner span:not(.status-dot) { color: var(--muted); font-size: 10.5px; }
.status-banner .btn { margin-left: auto; }
.status-banner.is-ok { border-color: #cdebd9; background: #f4fcf7; }
.status-banner.is-warning { border-color: #f0dfb9; background: #fff9e9; }
.status-banner.is-error { border-color: #f1cccc; background: #fff5f5; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #9aa4b0; }
.status-dot.is-ok { background: var(--success); }
.status-dot.is-warning { background: #d09a2d; }
.status-dot.is-error { background: var(--danger); }
.status-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.status-summary-card { padding: 13px 14px; border: 1px solid #e4eaf2; border-radius: 10px; background: #fff; }
.status-summary-card.is-ok { border-top: 3px solid var(--success); }
.status-summary-card.is-warning { border-top: 3px solid #d09a2d; }
.status-summary-card.is-error { border-top: 3px solid var(--danger); }
.status-summary-head { display: flex; align-items: center; justify-content: space-between; color: #8490a0; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.status-summary-card strong { display: block; margin-top: 8px; color: #263547; font-size: 18px; font-weight: 700; line-height: 1.2; }
.status-summary-card p { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; overflow-wrap: anywhere; }
.status-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.status-bottom-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.status-panel { border: 1px solid #e4eaf2; border-radius: 11px; background: #fff; overflow: hidden; }
.status-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #eef2f6; }
.status-panel-head h2 { margin: 0; color: #334155; font-size: 13px; font-weight: 600; }
.status-panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; }
.status-list { max-height: 360px; overflow-y: auto; }
.status-list-row { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.7fr) auto; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid #f1f4f8; font-size: 11px; }
.status-list-row:last-child { border-bottom: 0; }
.status-list-name { display: inline-flex; align-items: center; gap: 7px; color: #334155; font-weight: 600; }
.status-list-detail { color: var(--muted); font-size: 10.5px; overflow-wrap: anywhere; }
.status-badge { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.status-badge.is-ok { background: var(--success-soft); color: var(--success); }
.status-badge.is-warning { background: #fff4d6; color: #936c1a; }
.status-badge.is-error { background: var(--danger-soft); color: var(--danger); }
.status-kv { display: grid; gap: 0; padding: 5px 16px; }
.status-kv > div { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f4f8; font-size: 11px; }
.status-kv > div:last-child { border-bottom: 0; }
.status-kv span { color: var(--muted); }
.status-kv strong { display: inline-flex; align-items: center; gap: 6px; color: #334155; font-weight: 500; overflow-wrap: anywhere; }
.status-note { padding: 0 16px 14px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.status-balance { padding: 12px 16px 16px; }
.status-balance-row { display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; gap: 1px 10px; padding: 10px 0; border-bottom: 1px solid #f1f4f8; }
.status-balance-row:last-child { border-bottom: 0; }
.status-balance-row span { color: var(--muted); font-size: 11px; grid-row: span 2; align-self: center; }
.status-balance-row strong { color: #263547; font-size: 18px; }
.status-balance-row small { color: var(--muted); font-size: 9.5px; }
@media (max-width: 1100px) {
  .status-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-two-col,
  .status-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .status-content { padding: 14px; }
  .status-summary-grid { grid-template-columns: 1fr; }
  .status-list-row { grid-template-columns: 1fr auto; }
  .status-list-detail { grid-column: 1 / -1; grid-row: 2; }
  .status-kv > div { grid-template-columns: 1fr; gap: 3px; }
  .status-banner { align-items: flex-start; flex-wrap: wrap; }
  .status-banner .btn { margin-left: 0; }
}

.status-diagnostics { margin-top: 16px; }
.status-diagnostics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.diag-card { padding: 13px 15px 15px; border-right: 1px solid #eef2f6; }
.diag-card:last-child { border-right: 0; }
.diag-card h3 { margin: 0 0 8px; color: #52637a; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.diag-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f5f7fa; font-size: 10.5px; }
.diag-card > div:last-child { border-bottom: 0; }
.diag-card span { color: var(--muted); }
.diag-card strong { color: #334155; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.diag-card strong .status-dot { display: inline-block; margin-right: 4px; vertical-align: 1px; }
.diag-warn-text { color: #a16d1a !important; }
.diag-full { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .status-diagnostics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diag-card:nth-child(2) { border-right: 0; }
  .diag-card:nth-child(-n+2) { border-bottom: 1px solid #eef2f6; }
}
@media (max-width: 650px) {
  .status-diagnostics-grid { grid-template-columns: 1fr; }
  .diag-card { border-right: 0; border-bottom: 1px solid #eef2f6; }
  .diag-card:last-child { border-bottom: 0; }
}

/* ------------------------------- API keys -------------------------------- */
.api-key-list { display: grid; gap: 0; border: 1px solid #e4eaf2; border-radius: 9px; overflow: hidden; }
.api-key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid #eef2f6; background: #fff; }
.api-key-row:last-child { border-bottom: 0; }
.api-key-main { display: grid; gap: 3px; min-width: 0; }
.api-key-main strong { color: #334155; font-size: 12px; font-weight: 600; }
.api-key-main span { color: var(--muted); font-size: 10.5px; overflow-wrap: anywhere; }
.api-key-main code { color: #52637a; font-size: 10px; }
.api-key-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.api-key-meta > span { color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.api-key-create { display: grid; grid-template-columns: minmax(160px, 1fr) 220px auto; gap: 9px; align-items: end; }
.api-key-create .field { margin: 0; }
.api-key-created { padding: 11px 12px; border: 1px solid #cdebd9; border-radius: 8px; background: #f4fcf7; }
.api-key-created-head { margin-bottom: 8px; color: #237a4b; font-size: 11px; font-weight: 600; }
.api-key-created-note { margin-top: 6px; color: var(--muted); font-size: 10px; }
.hint-danger { border-color: #f1cccc !important; background: #fff5f5 !important; color: #8e3b3b !important; }
@media (max-width: 800px) {
  .api-key-create { grid-template-columns: 1fr; }
  .api-key-row { align-items: flex-start; flex-direction: column; }
  .api-key-meta { justify-content: flex-start; }
}

/* ------------------------------- AI / MCP -------------------------------- */
.ai-page { max-width: 1240px; margin: 0 auto; padding-bottom: 26px; }
.ai-page-head { margin-bottom: 18px; }
.ai-top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ai-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ai-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 20px 12px; }
.ai-card-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.2px; }
.ai-card-head p { margin: 5px 0 0; }
.ai-card-head .ai-muted { margin-bottom: 0; }
.ai-card-body { padding: 0 20px 20px; }
.ai-muted { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ai-copy-row { display: flex; align-items: center; gap: 8px; }
.ai-copy-row input { flex: 1; min-width: 0; height: 36px; padding: 0 11px; border: 1px solid #d9e1ea; border-radius: 8px; background: #fff; color: #455468; font-family: var(--mono); font-size: 11px; }
.ai-btn-dark { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border: 1px solid #171717; border-radius: 8px; background: #171717; color: #fff; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.ai-btn-dark:hover { background: #000; border-color: #000; color: #fff; text-decoration: none; }
.ai-btn-dark:disabled { opacity: .55; cursor: default; }
.ai-connection-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--muted); font-size: 10.5px; }
.ai-endpoint-hint { margin-top: 7px; color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.ai-endpoint-hint code { color: #52637a; font-size: 9.5px; }
.ai-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #aab4c0; flex: none; }
.ai-status-dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.ai-status-dot.warn { background: #d99a1e; box-shadow: 0 0 0 3px #fff7e3; }
.ai-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border-radius: 999px; background: #f2f5f8; color: #637083; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.ai-badge.ok { background: var(--success-soft); color: #227a49; }
.ai-badge.warn { background: #fff7e3; color: #956b12; }
.ai-key-block { margin-top: 15px; }
.ai-key-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px dashed #d7e0ea; border-radius: 8px; color: var(--muted); font-size: 10.5px; }
.ai-key-reveal { margin-bottom: 10px; padding: 12px; border: 1px solid #cdebd9; border-radius: 8px; background: #f4fcf7; }
.ai-key-reveal-head { margin-bottom: 8px; color: #237a4b; font-size: 11px; font-weight: 600; line-height: 1.45; }
.ai-keys { border: 1px solid #e4eaf2; border-radius: 9px; overflow: hidden; }
.ai-key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #eef2f6; }
.ai-key-row > div:first-child { display: grid; gap: 3px; min-width: 0; }
.ai-key-row strong { color: #334155; font-size: 11.5px; font-weight: 600; }
.ai-key-row span { color: var(--muted); font-size: 9.5px; }
.ai-key-row code { color: #52637a; font-size: 9.5px; }
.ai-key-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ai-key-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: #fafcfe; color: var(--muted); font-size: 9.5px; }
.ai-tools-panel { margin-top: 15px; padding-top: 14px; border-top: 1px solid #eef2f6; }
.ai-tools-head { margin-bottom: 9px; color: #52637a; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ai-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ai-tool { padding: 10px; border: 1px solid #e8eef5; border-radius: 8px; background: #fbfcfe; }
.ai-tool strong { display: block; color: #405168; font-family: var(--mono); font-size: 10px; }
.ai-tool p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ai-assistant-state { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid #e8eef5; border-radius: 9px; background: #fbfcfe; }
.ai-assistant-state > div:first-child { display: grid; gap: 2px; }
.ai-assistant-state span { color: var(--muted); font-size: 10px; }
.ai-assistant-state strong { color: #334155; font-size: 15px; font-weight: 600; }
.ai-assistant-state small { color: var(--muted); font-size: 10px; }
.ai-assistant-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.ai-provider-form { margin-top: 16px; padding-top: 15px; border-top: 1px solid #eef2f6; }
.ai-provider-form .field { margin-bottom: 10px; }
.ai-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-hint { margin-top: 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.ai-banner { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 13px 16px; border: 1px solid #f0dfb8; border-radius: 12px; background: #fffaf0; }
.ai-banner-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: #fff1cc; color: #a16d08; font-size: 17px; }
.ai-banner > div { display: grid; gap: 3px; min-width: 0; }
.ai-banner strong { color: #654d16; font-size: 12px; font-weight: 600; }
.ai-banner > div span { color: #8b7543; font-size: 10.5px; line-height: 1.45; }
.ai-banner .ai-btn-dark { margin-left: auto; flex: none; }
.ai-connections-card, .ai-faq-card { margin-bottom: 16px; }
.ai-connections-card .ai-card-head { padding-bottom: 16px; }
.ai-connections-card .ai-card-body { padding-top: 0; }
.ai-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 28px 20px; border: 1px dashed #d7e0ea; border-radius: 10px; background: #fcfdff; text-align: center; }
.ai-plug { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 13px; border-radius: 50%; background: #f1f4f8; color: #8b98a8; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.ai-empty strong { color: #334155; font-size: 14px; font-weight: 600; }
.ai-empty p { max-width: 480px; margin: 7px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.ai-connections { display: grid; gap: 8px; }
.ai-connection-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid #e8eef5; border-radius: 9px; background: #fbfcfe; }
.ai-connection-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ai-connection-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.ai-connection-main > div { display: grid; gap: 3px; min-width: 0; }
.ai-connection-main strong { color: #334155; font-size: 12px; font-weight: 600; }
.ai-connection-main span, .ai-connection-meta { color: var(--muted); font-size: 9.5px; }
.ai-connection-meta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ai-faq-item { border-top: 1px solid #eef2f6; }
.ai-faq-item:first-child { border-top: 0; }
.ai-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; color: #344256; font-size: 12px; font-weight: 500; list-style: none; cursor: pointer; }
.ai-faq-item summary::-webkit-details-marker { display: none; }
.ai-faq-item summary span { color: #94a2b3; transition: transform .15s ease; }
.ai-faq-item[open] summary span { transform: rotate(180deg); }
.ai-faq-item p { max-width: 920px; margin: -2px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.ai-faq-item code { color: #52637a; font-size: 10px; overflow-wrap: anywhere; }
.ai-promo { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.ai-promo-icon { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 12px; background: linear-gradient(135deg, #c4b5fd, #7c8cff 55%, #6ec5ff); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.ai-promo-copy { display: grid; gap: 4px; min-width: 0; }
.ai-promo-copy strong { color: #28364a; font-size: 14px; font-weight: 600; }
.ai-promo-copy span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.ai-promo .ai-btn-dark { margin-left: auto; flex: none; }
.settings-ai-icon { background: linear-gradient(135deg, #eef0ff, #e8f7ff); color: #5b5bd6; font-size: 15px; font-weight: 700; letter-spacing: .03em; }
@media (max-width: 1000px) {
  .ai-top-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ai-page { padding-left: 2px; padding-right: 2px; }
  .ai-card-head { padding: 16px 15px 10px; }
  .ai-card-body { padding: 0 15px 16px; }
  .ai-copy-row { align-items: stretch; flex-direction: column; }
  .ai-copy-row input { width: 100%; }
  .ai-banner, .ai-promo { align-items: flex-start; flex-wrap: wrap; }
  .ai-banner .ai-btn-dark, .ai-promo .ai-btn-dark { margin-left: 43px; }
  .ai-assistant-state, .ai-connection-row { align-items: flex-start; flex-direction: column; }
  .ai-assistant-actions, .ai-connection-meta { justify-content: flex-start; }
  .ai-provider-grid, .ai-tools-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-key-row { align-items: flex-start; flex-direction: column; }
  .ai-key-actions { justify-content: flex-start; }
}

/* ------------------------------- Auth screen ---------------------------- */
body.auth-locked { padding-right: 0; background: #0c0920; }
body.auth-locked .topbar,
body.auth-locked .left-menu,
body.auth-locked .dialog-rail,
body.auth-locked #messenger-root { display: none !important; }
body.auth-locked .app-shell { display: block; min-height: 0; }
body.auth-locked .app { width: 100%; max-width: none; margin: 0; padding: 0; }
body.auth-locked #toast { z-index: 400; }

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
  min-height: 100vh;
  overflow: auto;
  background: #f4f6fb;
  color: var(--text);
}

.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 38px 54px 34px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(124, 83, 226, .48), transparent 62%),
    radial-gradient(760px 560px at 96% 90%, rgba(47, 111, 237, .34), transparent 60%),
    linear-gradient(145deg, #171037 0%, #201448 46%, #2d1a66 100%);
}
.auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 26%, transparent 74%, rgba(0,0,0,.18));
}
.auth-brand-grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(720px 620px at 44% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(720px 620px at 44% 42%, #000 20%, transparent 78%);
}
.auth-brand-orb { position: absolute; border-radius: 999px; filter: blur(2px); pointer-events: none; }
.auth-brand-orb-a {
  width: 380px; height: 380px; right: -130px; top: -120px;
  background: radial-gradient(circle at 34% 34%, rgba(180, 156, 255, .55), rgba(90, 55, 196, .08) 62%, transparent 70%);
}
.auth-brand-orb-b {
  width: 460px; height: 460px; left: -190px; bottom: -230px;
  background: radial-gradient(circle at 58% 42%, rgba(72, 152, 255, .40), rgba(47, 111, 237, .05) 66%, transparent 74%);
}
.auth-brand-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.auth-brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #8f6bff, #3d8bff);
  box-shadow: 0 8px 22px rgba(80, 70, 255, .35), inset 0 0 0 1px rgba(255,255,255,.24);
  font-size: 17px; font-weight: 800;
}
.auth-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -.1px; }
.auth-brand-sep { width: 1px; height: 18px; margin: 0 4px; background: rgba(255,255,255,.24); }
.auth-brand-caption { color: rgba(255,255,255,.62); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.auth-brand-copy { position: relative; z-index: 2; max-width: 560px; margin: auto 0; padding: 34px 0; }
.auth-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.82);
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.auth-eyebrow-dot { width: 6px; height: 6px; border-radius: 999px; background: #59e3a7; box-shadow: 0 0 0 4px rgba(89,227,167,.14); }
.auth-brand-copy h1 {
  margin: 22px 0 16px; max-width: 540px;
  color: #fff; font-size: clamp(38px, 4vw, 58px); font-weight: 700;
  line-height: 1.02; letter-spacing: -.045em;
}
.auth-brand-copy h1 span {
  background: linear-gradient(100deg, #c9b7ff 4%, #8fb9ff 58%, #7fe7d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-brand-copy > p {
  max-width: 470px; margin: 0;
  color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.7;
}
.auth-benefits { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
.auth-benefits li { display: flex; align-items: flex-start; gap: 13px; }
.auth-benefit-icon {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 11px;
  background: rgba(255,255,255,.07); color: #b9a8ff;
}
.auth-benefit-icon svg { width: 19px; height: 19px; }
.auth-benefits strong { display: block; color: rgba(255,255,255,.94); font-size: 13px; font-weight: 600; }
.auth-benefits small { display: block; margin-top: 3px; color: rgba(255,255,255,.52); font-size: 11px; }
.auth-brand-foot {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: rgba(255,255,255,.45); font-size: 10px;
}
.auth-secure { display: inline-flex; align-items: center; gap: 8px; }
.auth-secure-dot { width: 7px; height: 7px; border-radius: 999px; background: #59e3a7; box-shadow: 0 0 0 4px rgba(89,227,167,.12); }

.auth-panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 46px 36px 30px;
  background:
    radial-gradient(620px 420px at 92% 4%, rgba(124, 83, 226, .09), transparent 62%),
    radial-gradient(520px 320px at 4% 100%, rgba(47, 111, 237, .08), transparent 64%),
    #f6f8fc;
}
.auth-card {
  width: min(432px, 100%);
  padding: 32px 32px 26px;
  border: 1px solid #e5eaf3;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 28px 70px rgba(28, 34, 70, .10), 0 2px 8px rgba(28, 34, 70, .04);
}
.auth-card-head { text-align: center; }
.auth-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border: 1px solid #dce7fb; border-radius: 999px;
  background: #f0f6ff; color: #2f6fed; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.auth-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: #2f6fed; box-shadow: 0 0 0 3px rgba(47,111,237,.12); }
.auth-card-head h2 { margin: 14px 0 5px; color: #1b2436; font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
.auth-card-head p { margin: 0; color: #8491a3; font-size: 11.5px; line-height: 1.55; }

.auth-first-run {
  display: grid; gap: 4px; margin: 18px 0 0; padding: 12px 14px;
  border: 1px solid #d8e5ff; border-radius: 12px; background: #f2f7ff; text-align: left;
}
.auth-first-run strong { color: #2557b8; font-size: 11.5px; font-weight: 700; }
.auth-first-run span { color: #5d76a1; font-size: 10.5px; line-height: 1.5; }
.auth-first-run.is-admin { border-color: #cfe9dc; background: #f0fbf5; }
.auth-first-run.is-admin strong { color: #147a4a; }
.auth-first-run.is-admin span { color: #4d7b65; }
.auth-first-run.is-warning { border-color: #f1dcae; background: #fff9eb; }
.auth-first-run.is-warning strong { color: #946200; }
.auth-first-run.is-warning span { color: #8a7445; }

.auth-stage { margin-top: 20px; }
.auth-qr-wrap { display: grid; justify-items: center; gap: 13px; }
.auth-qr-frame {
  position: relative;
  display: grid; place-items: center;
  width: 296px; height: 296px; padding: 20px;
  border: 1px solid #e2e8f2; border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 8px #f8fafd, 0 10px 28px rgba(31, 45, 80, .08);
}
.auth-qr-frame::before,
.auth-qr-frame::after {
  content: ""; position: absolute; width: 30px; height: 30px; border: 2px solid #2f6fed; pointer-events: none;
}
.auth-qr-frame::before { left: 9px; top: 9px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.auth-qr-frame::after { right: 9px; bottom: 9px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.auth-qr-link { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }
.auth-qr-link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.auth-qr-overlay {
  position: absolute; inset: 12px; display: grid; place-items: center;
  border-radius: 15px; background: rgba(248, 250, 253, .93);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  text-align: center;
}
.auth-qr-overlay[hidden] { display: none; }
.auth-qr-overlay strong { display: block; margin-bottom: 4px; color: #263246; font-size: 14px; }
.auth-qr-overlay span { display: block; max-width: 190px; color: #7c8899; font-size: 10.5px; line-height: 1.45; }

.auth-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid #e6ecf5; border-radius: 999px;
  background: #f7f9fd; color: #5e6f85; font-size: 10.5px;
}
.auth-status-dot {
  width: 7px; height: 7px; border-radius: 999px; background: #2f6fed;
  box-shadow: 0 0 0 3px rgba(47,111,237,.12);
  animation: auth-pulse 1.8s ease-in-out infinite;
}
.auth-status.is-error { border-color: #f3d3d3; background: #fff5f5; color: #a33a3a; }
.auth-status.is-error .auth-status-dot { background: #e05252; box-shadow: 0 0 0 3px rgba(224,82,82,.12); animation: none; }
.auth-status.is-warning { border-color: #f0e1bd; background: #fffaef; color: #8a6418; }
.auth-status.is-warning .auth-status-dot { background: #d9a21b; box-shadow: 0 0 0 3px rgba(217,162,27,.12); }
.auth-status.is-expired { border-color: #f0d9c5; background: #fff8f1; color: #99603a; }
.auth-status.is-expired .auth-status-dot { background: #d67b3d; box-shadow: 0 0 0 3px rgba(214,123,61,.12); animation: none; }
.auth-status.is-success { border-color: #cfe9dc; background: #f2fbf6; color: #1c7a4e; }
.auth-status.is-success .auth-status-dot { background: #2fc76f; box-shadow: 0 0 0 3px rgba(47,199,111,.14); animation: none; }
.auth-timer { padding-left: 8px; border-left: 1px solid #e2e8f1; color: #7f8da1; font-family: var(--mono); font-size: 10px; }
.auth-timer.is-low { color: #c45c35; }
@keyframes auth-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.auth-actions { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.auth-actions .btn { justify-content: center; height: 36px; padding: 0 10px; font-size: 11px; }
.auth-btn-main { font-weight: 600; }
.auth-btn-main.is-disabled { opacity: .55; cursor: default; pointer-events: none; }
.auth-meta { display: flex; justify-content: center; gap: 14px; margin-top: 12px; color: #98a3b3; font-size: 9.5px; }
.auth-meta strong { color: #69788d; font-family: var(--mono); font-weight: 500; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: #a3adbb; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #edf0f6; }
.auth-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.auth-steps li { display: flex; align-items: center; gap: 11px; }
.auth-step-number {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border: 1px solid #e1e8f4; border-radius: 9px; background: #f8fafd;
  color: #5d79a5; font-size: 10px; font-weight: 700;
}
.auth-steps strong { display: block; color: #39465a; font-size: 11px; font-weight: 600; }
.auth-steps small { display: block; margin-top: 1px; color: #98a3b2; font-size: 9.5px; }
.auth-note {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid #eef1f6; color: #8b96a6; font-size: 9.5px; line-height: 1.55;
}
.auth-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: #7d8ca1; }
.auth-support { margin-top: 14px; color: #a2acb9; font-size: 9.5px; text-align: center; }
.auth-support a { color: #5b7db3; }

.auth-footer { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 24px; color: #9aa5b4; font-size: 9.5px; }
.auth-footer-dot { width: 3px; height: 3px; border-radius: 999px; background: #c3cbd6; }

.auth-qr-skeleton { display: grid; justify-items: center; gap: 12px; padding: 6px 0; }
.auth-skeleton-square {
  width: 296px; height: 296px; border-radius: 22px;
  background: linear-gradient(100deg, #f2f5fa 30%, #e9eef7 50%, #f2f5fa 70%);
  background-size: 220% 100%; animation: auth-shimmer 1.4s ease-in-out infinite;
}
.auth-skeleton-line {
  width: 210px; height: 9px; border-radius: 999px;
  background: linear-gradient(100deg, #f2f5fa 30%, #e9eef7 50%, #f2f5fa 70%);
  background-size: 220% 100%; animation: auth-shimmer 1.4s ease-in-out infinite;
}
.auth-skeleton-line.short { width: 132px; }
@keyframes auth-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.auth-success { display: grid; justify-items: center; gap: 6px; padding: 26px 0 18px; text-align: center; }
.auth-success-mark {
  display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 8px;
  border-radius: 999px; background: #eafaf1; color: #1f9d55;
  box-shadow: 0 0 0 9px rgba(47,199,111,.08);
}
.auth-success-mark svg { width: 30px; height: 30px; }
.auth-success strong { color: #213047; font-size: 17px; }
.auth-success p { margin: 0; color: #7e8b9c; font-size: 11px; }
.auth-progress { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: #7d8ca1; font-size: 10px; }
.auth-progress span { width: 11px; height: 11px; border: 2px solid #cfd8e6; border-top-color: #2f6fed; border-radius: 999px; animation: auth-spin .8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-error { display: grid; justify-items: center; gap: 6px; padding: 26px 0 18px; text-align: center; }
.auth-error-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px;
  border-radius: 999px; background: #fff1f1; color: #d14343; font-size: 20px; font-weight: 700;
}
.auth-error strong { color: #2a3443; font-size: 14px; }
.auth-error p { max-width: 280px; margin: 0 0 8px; color: #8b96a6; font-size: 10.5px; line-height: 1.5; }

.auth-account { width: min(560px, 100%); text-align: left; }
.auth-account-head { display: flex; align-items: center; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid #eef1f6; }
.auth-account-head h2 { margin: 0 0 5px; font-size: 21px; }
.auth-role {
  display: inline-flex; padding: 3px 9px; border-radius: 999px;
  background: #eef3fb; color: #5a6f8e; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.auth-role.is-admin { background: #eaf7f0; color: #197a4a; }
.auth-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.auth-account-grid > div { padding: 11px 13px; border: 1px solid #edf1f7; border-radius: 11px; background: #fafbfe; }
.auth-account-grid span { display: block; margin-bottom: 3px; color: #98a3b2; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.auth-account-grid strong { color: #334155; font-size: 11.5px; font-weight: 600; }
.auth-account-note { margin: 16px 0 0; color: #8592a3; font-size: 11px; line-height: 1.55; }

@media (max-width: 1080px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { display: none; }
  .auth-panel { min-height: 100vh; padding: 28px 18px; }
}
@media (max-width: 560px) {
  .auth-panel { padding: 16px 12px; align-items: start; }
  .auth-card { padding: 24px 18px 20px; border-radius: 18px; box-shadow: 0 16px 42px rgba(28, 34, 70, .10); }
  .auth-card-head h2 { font-size: 21px; }
  .auth-qr-frame, .auth-skeleton-square { width: min(296px, 78vw); height: min(296px, 78vw); padding: 16px; }
  .auth-actions { grid-template-columns: 1fr 1fr; }
  .auth-actions .auth-btn-main { grid-column: 1 / -1; }
  .auth-account-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-meta { flex-wrap: wrap; justify-content: center; }
}

/* --------------------------- Login-only page ---------------------------- */
.auth-boot {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 100vh;
  padding: 24px;
  background: #f6f8fc;
  color: #7b8795;
  font-size: 12px;
  text-align: center;
}
.auth-boot strong { color: #263246; font-size: 14px; }
.auth-boot-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid #dbe3ef;
  border-top-color: #2f6fed;
  border-radius: 999px;
  animation: auth-spin .8s linear infinite;
}