/* Новые разделы CRM — на тех же переменных, что и основная страница (--ca, --cr, --cp…) */
.x-head { display:flex;align-items:center;gap:12px;padding:0 20px;background:#fff;border-bottom:1px solid var(--cr);flex-shrink:0; }
.x-head h2 { flex:1;min-width:0;margin:0;font-size:17px;color:var(--cd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.x-head-actions { display:flex;align-items:center;gap:8px; }
.x-body { flex:1;min-height:0;overflow-y:auto;padding:20px clamp(12px, 2.4vw, 28px) 40px; }
.x-ico { display:inline-flex;flex:none; }
.x-loading { padding:40px 0;text-align:center;color:var(--cs);font-size:14px; }
.x-empty { margin:40px auto;max-width:420px;text-align:center;color:var(--cs);font-size:14px;line-height:1.5;text-wrap:pretty; }
.x-empty strong { display:block;margin-bottom:6px;font:600 17px/1.3 var(--display);letter-spacing:-.03em;color:var(--ct); }
.x-list { display:flex;flex-direction:column;gap:14px;max-width:980px; }
.x-wide { max-width:none; }

/* Вкладки-«таблетки» */
.x-tabs { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px; }
.x-tab { display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--cr2);background:#fff;color:var(--cm);font:600 13.5px/1 var(--body);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease); }
.x-tab:hover { border-color:var(--ca);color:var(--ca); }
.x-tab.is-on, .x-tab.is-on:hover { background:var(--cd);border-color:var(--cd);color:#fff; }
.x-count { display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--cb);color:var(--ca);font:600 11px/1 var(--body); }
.x-tab.is-on .x-count { background:rgba(255,255,255,.18);color:#fff; }

/* Карточки */
.x-card { background:#fff;border:1px solid var(--cr);border-radius:24px;padding:18px 20px; }
.x-card.is-muted { opacity:.6; }
.x-card-head { display:flex;align-items:center;gap:12px;margin-bottom:14px; }
.x-card-title { flex:1;min-width:0; }
.x-avatar { flex:none;width:44px;height:44px;border-radius:14px;background:var(--cb);color:var(--ca);display:grid;place-items:center;font:600 16px/1 var(--display);text-transform:uppercase; }
.x-name { font-weight:600;font-size:15.5px;color:var(--ct);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.x-sub { font-size:12.5px;color:var(--cs);margin-top:2px; }
.x-grid { display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:12px 18px; }
.x-kv { display:flex;flex-direction:column;gap:4px;min-width:0; }
.x-kv > span:last-child, .x-kv > a { font-size:14px;color:var(--ct);overflow-wrap:anywhere; }
.x-link { display:inline-flex;align-items:center;gap:6px;color:var(--ca) !important;text-decoration:none; }
.x-link:hover { text-decoration:underline; }
.x-comment { margin:14px 0 0;padding:10px 14px;border-radius:14px;background:var(--cp);font-size:13.5px;line-height:1.5;color:var(--cm);white-space:pre-wrap; }
.x-note { margin-top:14px;padding:10px 14px;border-radius:14px;background:#FFF6E3;color:#6B4A00;font-size:13px;line-height:1.45; }
.x-similar { margin-top:14px;display:flex;flex-direction:column;gap:6px; }
.x-similar .panel-lbl { margin-bottom:2px; }
.x-radio { display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:1px solid var(--cr);font-size:14px;cursor:pointer; }
.x-radio:has(input:checked) { border-color:var(--ca);background:var(--cb); }
.x-radio input { accent-color:var(--ca);width:16px;height:16px; }
.x-actions { display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--cr); }
.x-actions select { max-width:280px; }
.x-actions-btns { display:flex;gap:8px;margin-left:auto; }
.x-danger:hover { color:#B32322 !important;border-color:#B32322 !important; }
.x-danger-fill { background:#B32322;border-color:#B32322; }
.x-danger-fill:hover { background:#951b1a;border-color:#951b1a; }

/* Таблица изменений */
.x-diff { width:100%;border-collapse:collapse;font-size:14px; }
.x-diff th { text-align:left;font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cs);padding:0 10px 8px 0; }
.x-diff td { padding:9px 10px 9px 0;border-top:1px solid var(--cr);vertical-align:top;overflow-wrap:anywhere; }
.x-diff td.panel-lbl { width:28%; }
.x-old { color:var(--cs);text-decoration:line-through;text-decoration-color:rgba(92,109,131,.45); }
.x-new { color:var(--ct);font-weight:600; }

/* Модальное окно и поля */
.x-modal-back { position:fixed;inset:0;z-index:700;background:rgba(5,24,51,.55);display:flex;align-items:center;justify-content:center;padding:16px; }
.x-modal { background:#fff;border-radius:28px;padding:24px;width:min(520px, 100%);max-height:calc(100dvh - 32px);overflow-y:auto;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:14px; }
.x-modal-head { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.x-modal-head h3 { margin:0;font-size:18px;color:var(--cd); }
.x-modal-foot { display:flex;justify-content:flex-end;gap:8px;margin-top:4px; }
.x-field { display:flex;flex-direction:column;gap:6px; }
.x-field small { font-size:12px;color:var(--cs); }
.x-row2 { display:grid;grid-template-columns:1fr 1fr;gap:12px; }

/* Таблицы реестров */
.x-toolbar { display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px; }
.x-toolbar .crm-input { border-radius:999px;padding:8px 14px; }
.x-search { position:relative;flex:1 1 240px;min-width:200px;max-width:360px; }
.x-search .x-ico { position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--cq);pointer-events:none; }
.x-search input { width:100%;padding-left:36px !important; }
.x-table-wrap { background:#fff;border:1px solid var(--cr);border-radius:24px;overflow:auto; }
.x-table { width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px; }
.x-table th { position:sticky;top:0;background:#fff;text-align:left;font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cs);padding:14px 12px;border-bottom:1px solid var(--cr);white-space:nowrap;z-index:1; }
.x-table td { padding:12px;border-bottom:1px solid var(--cr);vertical-align:middle; }
.x-table tr:last-child td { border-bottom:none; }
.x-table tbody tr { cursor:pointer;transition:background-color .15s; }
.x-table tbody tr:hover { background:var(--cp); }
.x-table .num { text-align:right;font-family:var(--mono);white-space:nowrap; }
.x-cell-main { font-weight:600;color:var(--ct); }
.x-cell-sub { font-size:12px;color:var(--cs);margin-top:2px; }
.x-stats { display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:12px;margin-bottom:16px; }
.x-stat { background:#fff;border:1px solid var(--cr);border-radius:22px;padding:16px 18px; }
.x-stat .stat-num { color:var(--cd);margin-top:4px; }
.x-stat.is-bad { border-color:#F3B9B5; }
.x-stat.is-bad .stat-num { color:#B32322; }

@media (max-width: 768px) {
  .x-head { padding:0 12px; }
  .x-body { padding:14px 12px 32px; }
  .x-card { padding:16px;border-radius:20px; }
  .x-actions select { max-width:none;flex:1 1 100%; }
  .x-actions-btns { width:100%; }
  .x-actions-btns > * { flex:1; }
  .x-row2 { grid-template-columns:1fr; }
  .x-diff td.panel-lbl { width:auto; }
}

/* Формы, карточки клиента, строки сроков */
.x-modal-wide { width:min(880px, 100%); }
.x-form { display:flex;flex-direction:column;gap:12px; }
.x-section { margin-top:6px;font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ca); }
.x-row3 { display:grid;grid-template-columns:120px 1fr 160px;gap:12px; }
.x-hint { margin:0;font-size:13px;line-height:1.45;color:var(--cs);text-wrap:pretty; }
.x-error { margin:0;padding:10px 14px;border-radius:12px;background:#FFEAE9;color:#B32322;font-size:14px; }
.x-card-h { margin:0 0 6px;font-size:16px;color:var(--cd); }
.x-card > .x-hint { margin-bottom:14px; }
.x-steps { margin:8px 0 14px;padding-left:20px;font-size:14px;line-height:1.6;color:var(--ct); }
.x-line { display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--cr);border-radius:16px;background:#fff; }
.x-line + .x-line { margin-top:6px; }
.x-line.is-overdue { border-color:#F3B9B5;background:#FFF8F7; }
.x-line.is-done { opacity:.62; }
.x-line-date { flex:none;width:52px;font:500 14px/1 var(--mono);color:var(--ct); }
.x-line-form { flex-wrap:wrap; }
.x-line-form > .crm-input { flex:1 1 160px;min-width:0; }
.x-rep > .crm-input:first-child { flex:1 1 calc(100% - 50px); }
.x-rep { row-gap:10px; }
.x-status-sel { max-width:150px;padding:6px 30px 6px 12px !important;border-radius:999px;font-size:12.5px; }
.x-day { padding:14px 16px; }
.x-day-head { display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:600;font-size:14.5px;color:var(--ct); }
.x-day-head.is-bad { color:#B32322; }
.x-day .x-line { border-color:var(--cp);background:var(--cp); }
.x-day .x-line.is-overdue { background:#FFF2F1;border-color:#FFE1DE; }
.x-month { display:inline-flex;align-items:center;gap:8px;margin-right:6px; }
.x-month strong { min-width:130px;text-align:center;font:600 15px/1 var(--display);letter-spacing:-.02em;color:var(--ct);text-transform:capitalize; }
.x-month .icon-btn { width:34px;height:34px;font-size:18px; }
.x-linkbtn { border:0;background:none;padding:0;color:var(--ca);font-weight:600;cursor:pointer;text-align:left; }
.x-linkbtn:hover { text-decoration:underline; }
.x-table-plain tbody tr { cursor:default; }
.x-table tr.is-muted td { opacity:.5; }
@media (max-width: 768px) {
  .x-row3 { grid-template-columns:1fr; }
  .x-line { flex-wrap:wrap; }
  .x-status-sel { max-width:none;flex:1 1 100%; }
}

/* Раздел «Сайт». Цвета серий графика — синий бренда и оранжевый: пара проверена
   валидатором палитры ещё в админке сайта (контраст ≥ 3:1, различимы при дальтонизме). */
:root { --series-1:#0E5FB8; --series-2:#eb6834; --grid:#E7EEF5; }
.sx-tiles { display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:10px;margin-top:6px; }
.sx-tile { position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 56px 14px 16px;border:1px solid var(--cr);border-radius:18px;background:#fff;cursor:pointer;transition:border-color .2s var(--ease); }
.sx-tile:hover { border-color:var(--ca); }
.sx-tile-n { position:absolute;top:14px;right:14px;min-width:30px;height:26px;padding:0 8px;border-radius:999px;background:var(--cb);color:var(--ca);display:grid;place-items:center;font:600 12px/1 var(--mono); }
.sx-subtabs .x-tab { height:34px;padding:0 13px;font-size:13px; }
.sx-item { cursor:pointer; }
.sx-item:hover { border-color:var(--ca); }
.sx-thumb { flex:none;width:52px;height:40px;border-radius:10px;object-fit:cover;background:var(--cp); }
.sx-thumb-empty { display:block; }
.sx-ellipsis { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sx-move { display:inline-flex;gap:2px; }
.sx-move .close-x { width:28px;height:28px;font-size:15px; }
.sx-move .close-x:disabled { opacity:.25;cursor:default; }
.sx-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px 14px; }
.sx-f.full { grid-column:1 / -1; }
.sx-check { display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;cursor:pointer; }
.sx-check input { width:18px;height:18px;accent-color:var(--ca); }
.sx-color { height:42px;padding:4px !important;width:90px; }
.sx-image { display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.sx-image-prev { width:160px;height:110px;border-radius:14px;background:var(--cp);display:grid;place-items:center;overflow:hidden;text-align:center; }
.sx-image-prev img { width:100%;height:100%;object-fit:cover; }
.sx-image-btns { display:flex;gap:8px;flex-wrap:wrap; }
.sx-image--focus { align-items:flex-start; }
.sx-focus { display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap; }
.sx-focus[hidden], .sx-focus-note[hidden], .sx-image-prev[hidden] { display:none; }
.sx-focus-stage { position:relative;display:inline-block;line-height:0;border-radius:12px;overflow:hidden;background:var(--cp);cursor:crosshair;touch-action:none;user-select:none; }
.sx-focus-stage:focus-visible { outline:2px solid var(--ca);outline-offset:2px; }
.sx-focus-stage img { display:block;max-width:min(240px, 62vw);max-height:240px;width:auto;height:auto;pointer-events:none; }
.sx-focus-dot { position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;background:rgba(14,95,184,.35);box-shadow:0 0 0 2px var(--ca),0 2px 8px rgba(0,0,0,.35);pointer-events:none; }
.sx-focus-side { display:flex;flex-direction:column;gap:6px; }
.sx-focus-cap { font-size:12px;color:var(--cs); }
.sx-focus-view { width:132px;border-radius:12px;overflow:hidden;background:var(--cp); }
.sx-focus-view img { display:block;width:100%;height:100%;object-fit:cover; }
.sx-focus-note { flex-basis:100%; }
.sx-image-btns input[type=file] { position:absolute;inset:0;opacity:0;cursor:pointer; }
.sx-num { max-width:110px;text-align:right;margin-left:auto;font-family:var(--mono); }
.sx-two { display:grid;grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr));gap:14px; }
.sx-chart { margin-top:12px; }
.sx-chart svg { display:block;width:100%;overflow:visible; }
.sx-grid-lines line { stroke:var(--grid);stroke-width:1;shape-rendering:crispEdges; }
.sx-axis text { fill:var(--cq);font:11px var(--mono); }
.sx-bar { fill:var(--series-1); }
.sx-col.is-hover .sx-bar, .sx-col:focus .sx-bar { fill:#3a7fd0; }
.sx-col:focus { outline:none; }
.sx-hit { fill:transparent; }
.sx-empty { fill:var(--cq);font-size:13px; }
.sx-tip { position:fixed;z-index:800;pointer-events:none;min-width:150px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--cr);box-shadow:0 8px 24px rgba(6,24,46,.14);font-size:13px; }
.sx-tip-t { color:var(--cs);margin-bottom:4px; }
.sx-tip-r { display:flex;align-items:baseline;gap:8px; }
.sx-tip-r b { font-size:15px;font-variant-numeric:tabular-nums; }
.sx-tip-r span { color:var(--cs); }
.sx-tip-k { width:10px;height:2px;border-radius:1px;background:var(--series-1);align-self:center; }
.sx-hbars { list-style:none;margin:0;padding:0; }
.sx-hbars li { margin:0 0 10px; }
.sx-hbar-top { display:flex;justify-content:space-between;gap:12px;font-size:14px; }
.sx-hbar-top b { font-variant-numeric:tabular-nums; }
.sx-hbar-track { margin-top:5px;height:8px; }
.sx-hbar-fill { height:100%;min-width:4px;border-radius:0 4px 4px 0;background:var(--series-1); }
.sx-kv { list-style:none;margin:0;padding:0; }
.sx-kv li { display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--cr);font-size:14px; }
.sx-kv li:last-child { border-bottom:0; }
.sx-kv b { font-variant-numeric:tabular-nums; }
.sx-split { display:flex;gap:2px;height:12px; }
.sx-split div { height:100%; }
.sx-split div:first-child { border-radius:4px 0 0 4px; }
.sx-split div:last-child { border-radius:0 4px 4px 0; }
.sx-split div:only-child { border-radius:4px; }
.sx-legend { display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13.5px;color:var(--cs); }
.sx-legend span { display:inline-flex;align-items:center;gap:8px; }
.sx-legend i { width:10px;height:10px;border-radius:3px; }
.sx-legend b { color:var(--ct);font-variant-numeric:tabular-nums; }
@media (max-width: 768px) {
  .sx-grid { grid-template-columns:1fr; }
  .sx-tile { padding-right:52px; }
}

/* ---------- Главная ---------- */
.hx { max-width:1180px; }
.hx-hello { margin:2px 2px 18px; }
.hx-title { margin:0;font-size:clamp(22px, 2.6vw, 28px);color:var(--cd); }
.hx-date-line { margin:6px 0 0;font-size:14px;color:var(--cs); }
.hx-tiles { margin-bottom:18px; }
.hx-tile { display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .2s var(--ease),transform .15s var(--ease); }
.hx-tile:hover { border-color:var(--ca); }
.hx-tile:active { transform:scale(.99); }
.hx-tile-sub { margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--cs); }
.hx-tile-sub.is-bad { color:#B32322; }
.hx-cols { display:grid;grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr));gap:14px;align-items:start; }
.hx-block { padding:16px 14px 10px; }
.hx-block-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 6px 8px; }
.hx-block-head .x-card-h { margin:0; }
.hx-rows { display:flex;flex-direction:column; }
.hx-row { display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border:0;border-top:1px solid var(--cp);background:none;border-radius:12px;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .15s; }
.hx-row:first-child { border-top:0; }
.hx-row:hover { background:var(--cp); }
.hx-av { width:36px;height:36px;border-radius:12px;font-size:14px; }
.hx-main { flex:1;min-width:0;display:flex;flex-direction:column; }
.hx-ellipsis { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.hx-meta { flex:none;font-size:12.5px;color:var(--cs); }
.hx-date { flex:none;width:46px;font:500 13.5px/1 var(--mono);color:var(--ct); }
.hx-meta.is-bad, .hx-date.is-bad { color:#B32322; }
.hx-empty { margin:6px 6px 12px;font-size:14px;color:var(--cs); }

/* ---------- Доступ в кабинет ---------- */
.cx-results { display:flex;flex-direction:column;margin-top:10px; }
.cx-results .x-line { flex-wrap:wrap; }
.cx-tools { display:flex;gap:8px;justify-content:flex-end;white-space:nowrap; }
.cx-danger { color:#B32322 !important; }
.cx-secret { margin:0;padding:14px 16px;border-radius:14px;background:var(--cp);font:500 14px/1.6 var(--mono);white-space:pre-wrap;word-break:break-all;user-select:all; }

/* ---------- Настройки: шаблоны ---------- */
.sx-tpl { white-space:pre-wrap;overflow-wrap:anywhere; }
@media (max-width:480px) {
  .hx-tile .stat-num { font-size:22px; }
  .hx-tiles { gap:10px; }
}