/* ═══════════════════════════════════════════════════════════════════════════
   Единый вид CRM Salmin.

   Шрифты — фирменные, те же, что в кабинете клиента и печатном КП:
   Manrope для текста (хорошая кириллица, читается мелко), Oswald для заголовков
   страниц и крупных цифр. Файлы уже лежат в проекте — никаких внешних загрузок.
   Цифры в таблицах моноширинные (tnum), чтобы суммы стояли столбиком.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'SalminSans';font-weight:400;font-display:swap;src:url(/static/kp-print-fonts/brand-font-1.ttf) format('truetype')}
@font-face{font-family:'SalminSans';font-weight:500;font-display:swap;src:url(/static/kp-print-fonts/brand-font-1.ttf) format('truetype')}
@font-face{font-family:'SalminSans';font-weight:600;font-display:swap;src:url(/static/kp-print-fonts/brand-font-2.ttf) format('truetype')}
@font-face{font-family:'SalminSans';font-weight:700;font-display:swap;src:url(/static/kp-print-fonts/brand-font-3.ttf) format('truetype')}
@font-face{font-family:'SalminSans';font-weight:800;font-display:swap;src:url(/static/kp-print-fonts/brand-font-4.ttf) format('truetype')}
@font-face{font-family:'SalminDisplay';font-weight:500;font-display:swap;src:url(/static/kp-print-fonts/brand-font-5.ttf) format('truetype')}
@font-face{font-family:'SalminDisplay';font-weight:600;font-display:swap;src:url(/static/kp-print-fonts/brand-font-6.ttf) format('truetype')}
@font-face{font-family:'SalminDisplay';font-weight:700;font-display:swap;src:url(/static/kp-print-fonts/brand-font-7.ttf) format('truetype')}

:root{
  --crm-font:'SalminSans','Manrope','Segoe UI',system-ui,sans-serif;
  --crm-display:'SalminDisplay','Oswald','Arial Narrow',sans-serif;
  --crm-ink:#111110;
  --crm-ink-2:#3a3935;
  --crm-muted:#75726b;
  --crm-faint:#a29e95;
  --crm-bg:#f5f3ee;
  --crm-surface:#ffffff;
  --crm-sunken:#efece5;
  --crm-line:#e5e1d8;
  --crm-line-strong:#d4cfc4;
  --crm-sun:#ffd014;
  --crm-sun-soft:#fff6cc;
  --crm-ok:#1f8a4c;
  --crm-ok-soft:#e3f4ea;
  --crm-warn:#b26b00;
  --crm-warn-soft:#fff1d6;
  --crm-err:#b3261e;
  --crm-err-soft:#fbe7e5;
  --crm-info:#1f5fbf;
  --crm-info-soft:#e6efff;
  --crm-client:#6a3fd1;         /* всё, что видит клиент, — фиолетовым: не путается с остальным */
  --crm-client-soft:#efe8ff;
  --crm-r:10px;
  --crm-r-sm:7px;
  --crm-shadow:0 1px 2px rgba(17,17,16,.05),0 4px 16px rgba(17,17,16,.05);
  --crm-shadow-lg:0 12px 40px rgba(17,17,16,.18);
}

/* ─── Кнопки ──────────────────────────────────────────────────────────────── */
.crm-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;
  border-radius:var(--crm-r-sm);border:1px solid var(--crm-line-strong);background:var(--crm-surface);
  color:var(--crm-ink);font:600 13.5px/1 var(--crm-font);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.crm-btn:hover{border-color:var(--crm-ink);background:#fbfaf7}
.crm-btn:focus-visible{outline:2px solid var(--crm-sun);outline-offset:2px}
.crm-btn[disabled]{opacity:.45;cursor:default}
.crm-btn--primary{background:var(--crm-ink);border-color:var(--crm-ink);color:#fff}
.crm-btn--primary:hover{background:#2a2a28;border-color:#2a2a28;color:#fff}
.crm-btn--accent{background:var(--crm-sun);border-color:var(--crm-sun);color:var(--crm-ink)}
.crm-btn--accent:hover{background:#ffc400;border-color:#ffc400}
.crm-btn--danger{background:var(--crm-err);border-color:var(--crm-err);color:#fff}
.crm-btn--danger:hover{background:#951f18;border-color:#951f18;color:#fff}
.crm-btn--ghost{background:transparent;border-color:transparent;color:var(--crm-ink-2)}
.crm-btn--ghost:hover{background:var(--crm-sunken);border-color:transparent}
.crm-btn--sm{height:30px;padding:0 10px;font-size:12.5px}
.crm-btn svg{width:16px;height:16px;flex-shrink:0}

.crm-input{height:36px;padding:0 11px;border:1px solid var(--crm-line-strong);border-radius:var(--crm-r-sm);
  background:#fff;color:var(--crm-ink);font:500 14px var(--crm-font);width:100%;box-sizing:border-box}
.crm-input:focus{outline:none;border-color:var(--crm-ink);box-shadow:0 0 0 3px rgba(255,208,20,.35)}

/* ─── Уведомления внизу ───────────────────────────────────────────────────── */
.crm-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:3000;display:flex;
  flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:calc(100vw - 32px)}
.crm-toast{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:var(--crm-r);
  background:var(--crm-ink);color:#fff;font:600 14px/1.35 var(--crm-font);box-shadow:var(--crm-shadow-lg);
  pointer-events:auto;animation:crmIn .18s ease-out}
.crm-toast--error{background:var(--crm-err)}
.crm-toast--info{background:#2d2c29}
.crm-toast button{background:none;border:0;color:var(--crm-sun);font:700 13px var(--crm-font);cursor:pointer;padding:0}
.crm-toast.out{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
@keyframes crmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─── Диалог ──────────────────────────────────────────────────────────────── */
.crm-dialog-shade{position:fixed;inset:0;background:rgba(17,17,16,.42);z-index:3100;display:flex;
  align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .15s}
.crm-dialog-shade.in{opacity:1}
.crm-dialog{width:min(440px,100%);background:#fff;border-radius:14px;box-shadow:var(--crm-shadow-lg);
  padding:22px 22px 18px;font-family:var(--crm-font);color:var(--crm-ink);transform:translateY(6px);transition:transform .15s}
.crm-dialog-shade.in .crm-dialog{transform:none}
.crm-dialog-title{margin:0 0 8px;font:800 18px/1.3 var(--crm-font)}
.crm-dialog-text{margin:0 0 16px;font:500 14px/1.55 var(--crm-font);color:var(--crm-ink-2)}
.crm-dialog-field{display:block;margin:0 0 16px;font:600 12px var(--crm-font);color:var(--crm-muted)}
.crm-dialog-field .crm-input{margin-top:6px}
.crm-dialog-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ─── Полоска над содержимым ──────────────────────────────────────────────── */
.crm-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin:0 0 14px;
  border-radius:var(--crm-r);font:600 13.5px/1.4 var(--crm-font);background:var(--crm-info-soft);color:#173f7d}
.crm-banner span{flex:1;min-width:200px}
.crm-banner--warn{background:var(--crm-warn-soft);color:#6b4100}
.crm-banner--client{background:var(--crm-client-soft);color:#3d2380}

/* ─── Подсказки ───────────────────────────────────────────────────────────── */
.crm-hint{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:5px;
  border-radius:50%;background:var(--crm-sunken);color:var(--crm-muted);font:800 10.5px/1 var(--crm-font);
  cursor:help;vertical-align:1px;flex-shrink:0}
.crm-hint:hover,.crm-hint:focus{background:var(--crm-ink);color:#fff;outline:none}
.crm-tip{position:fixed;z-index:3200;max-width:300px;padding:9px 12px;border-radius:9px;background:var(--crm-ink);
  color:#fff;font:500 12.5px/1.45 var(--crm-font);box-shadow:var(--crm-shadow-lg);pointer-events:none;
  opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.crm-tip.on{opacity:1;transform:none}

/* Метка «Видно клиенту» — фиолетовая везде, где правка попадает в кабинет */
.crm-visible{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:10px;
  background:var(--crm-client-soft);color:var(--crm-client);font:700 11px/1 var(--crm-font);white-space:nowrap;
  cursor:help;vertical-align:1px}
.crm-visible:focus{outline:2px solid var(--crm-client);outline-offset:1px}

/* ─── Статус сохранения ───────────────────────────────────────────────────── */
.crm-save{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--crm-font);color:var(--crm-muted);white-space:nowrap}
.crm-save::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--crm-faint)}
.crm-save--saved{color:var(--crm-ok)}.crm-save--saved::before{background:var(--crm-ok)}
.crm-save--saving::before{background:var(--crm-sun);animation:crmPulse .8s infinite alternate}
.crm-save--dirty{color:var(--crm-warn)}.crm-save--dirty::before{background:var(--crm-warn)}
.crm-save--error{color:var(--crm-err)}.crm-save--error::before{background:var(--crm-err)}
.crm-save--idle::before{display:none}
@keyframes crmPulse{to{opacity:.3}}

/* ─── Плашки статусов ─────────────────────────────────────────────────────── */
.crm-pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;
  font:700 11.5px/1 var(--crm-font);background:var(--crm-sunken);color:var(--crm-ink-2);white-space:nowrap}
.crm-pill--ok{background:var(--crm-ok-soft);color:var(--crm-ok)}
.crm-pill--warn{background:var(--crm-warn-soft);color:var(--crm-warn)}
.crm-pill--client{background:var(--crm-client-soft);color:var(--crm-client)}

@media print{.crm-toasts,.crm-dialog-shade,.crm-tip,.crm-banner{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─── Данные для кабинета клиента (client-workspace.js) ───────────────────── */
.cd{font-family:var(--crm-font);color:var(--crm-ink)}
.cd-tabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px;background:var(--crm-sunken);border-radius:10px;margin-bottom:16px}
.cd-tabs::-webkit-scrollbar{display:none}
.cd-tab{flex-shrink:0;border:0;background:transparent;border-radius:7px;padding:8px 11px;font:600 13px var(--crm-font);color:var(--crm-ink-2);cursor:pointer;white-space:nowrap}
.cd-tab:hover{background:rgba(255,255,255,.6)}
.cd-tab[aria-selected=true]{background:#fff;color:var(--crm-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cd-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.cd-head>div{flex:1;min-width:0}
.cd-title{margin:0;font:800 17px/1.3 var(--crm-font)}
.cd-where{margin:6px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:500 12.5px var(--crm-font);color:var(--crm-muted)}
.cd-status{font:600 12.5px var(--crm-font);color:var(--crm-ok);white-space:nowrap;padding-top:4px}
.cd-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.cd-grid.cd-single{grid-template-columns:minmax(0,1fr)}
.cd-grid.cd-single .cd-list{display:none}
.cd-list{display:flex;flex-direction:column;gap:6px}
.cd-list>.crm-btn{align-self:flex-start;margin-bottom:4px}
.cd-records{display:flex;flex-direction:column;gap:6px}
.cd-record{text-align:left;border:1px solid var(--crm-line);background:#fff;border-radius:9px;padding:9px 11px;
  font:600 13px/1.35 var(--crm-font);color:var(--crm-ink);cursor:pointer}
.cd-record:hover{border-color:var(--crm-ink)}
.cd-record small{display:block;margin-top:3px;font:500 11.5px var(--crm-font);color:var(--crm-muted)}
.cd-record.is-public small{color:var(--crm-client)}
.cd-empty{color:var(--crm-muted);font-size:13px;margin:6px 0}
.cd-editor{background:#fff;border:1px solid var(--crm-line);border-radius:12px;padding:18px}
.cd-editor .hint{margin:0 0 14px;padding:9px 12px;border-radius:8px;background:var(--crm-client-soft);color:#3d2380;font:500 13px/1.5 var(--crm-font)}
.cd-editor h4{margin:18px 0 10px;font:700 11px/1 var(--crm-font);text-transform:uppercase;letter-spacing:.08em;color:var(--crm-muted)}
.cd-editor h4:first-of-type{margin-top:4px}
.cd-editor .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.cd-editor label{display:flex;flex-direction:column;gap:5px;font:600 12px var(--crm-font);color:var(--crm-ink-2)}
.cd-editor label.wide{grid-column:1/-1}
.cd-editor input,.cd-editor select,.cd-editor textarea{font:500 14px/1.4 var(--crm-font);border:1px solid var(--crm-line-strong);
  border-radius:var(--crm-r-sm);padding:8px 10px;background:#fff;width:100%;min-width:0;color:var(--crm-ink);box-sizing:border-box}
.cd-editor input[type=file]{border:0;padding:2px 0;font-size:12px}
.cd-editor input:focus,.cd-editor select:focus,.cd-editor textarea:focus{outline:none;border-color:var(--crm-ink);box-shadow:0 0 0 3px rgba(255,208,20,.35)}
.cd-editor textarea{min-height:84px;resize:vertical}
.cd-editor .rows{display:grid;gap:10px}
.cd-editor .repeat{border:1px solid var(--crm-line);border-radius:9px;padding:12px;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cd-editor .repeat>button{justify-self:start}
.cd-editor .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--crm-line)}
.cd-danger{color:var(--crm-err)!important;margin-left:auto}
@media(max-width:760px){.cd-grid{grid-template-columns:minmax(0,1fr)}.cd-editor .fields,.cd-editor .repeat{grid-template-columns:1fr}}

/* ─── Шапка ведомостей (statement-editor.js) ──────────────────────────────── */
.toolbar[hidden], .kp-bar[hidden] { display: none !important; }
.st-head { font-family: var(--crm-font); color: var(--crm-ink); background: var(--crm-surface); border: 1px solid var(--crm-line);
  border-radius: 14px; padding: 16px 18px 12px; margin: 0 0 16px; box-shadow: var(--crm-shadow); }
.st-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.st-id { flex: 1; min-width: 260px; }
.st-back { font: 600 12.5px var(--crm-font); color: var(--crm-muted); text-decoration: none; }
.st-back:hover { color: var(--crm-ink); }
.st-title { margin: 4px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-title span { font: 700 24px/1.15 var(--crm-display); text-transform: uppercase; letter-spacing: .01em; }
.st-title em { font: 600 15px var(--crm-font); font-style: normal; color: var(--crm-muted); }
.st-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-more { position: relative; }
.st-more > summary { list-style: none; }
.st-more > summary::-webkit-details-marker { display: none; }
.st-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; padding: 6px; background: #fff;
  border: 1px solid var(--crm-line); border-radius: 12px; box-shadow: var(--crm-shadow-lg); display: flex; flex-direction: column; }
.st-menu button { text-align: left; border: 0; background: none; padding: 9px 11px; border-radius: 8px; font: 600 13.5px var(--crm-font); color: var(--crm-ink); cursor: pointer; }
.st-menu button:hover { background: var(--crm-sunken); }
.st-menu button.danger { color: var(--crm-err); }
.st-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-steps li { display: flex; align-items: flex-end; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--crm-sunken); flex-wrap: wrap; }
.st-steps label { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 5px; font: 700 11px/1 var(--crm-font);
  text-transform: uppercase; letter-spacing: .06em; color: var(--crm-muted); }
.st-steps select { height: 36px; width: 100%; padding: 0 10px; border: 1px solid var(--crm-line-strong); border-radius: 8px;
  background: #fff; font: 600 14px var(--crm-font); color: var(--crm-ink); text-transform: none; letter-spacing: 0; }
.st-n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--crm-ink); color: #fff;
  font: 800 12px/24px var(--crm-font); text-align: center; align-self: center; }
.st-status { margin: 10px 0 0; font: 600 13px var(--crm-font); color: var(--crm-muted); min-height: 0; }
.st-status:empty, .st-status.ok { display: none; }
#st-banners .crm-banner { margin: 12px 0 0; }
.st-meta { margin-top: 12px; border-top: 1px solid var(--crm-line); padding-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 13px var(--crm-font); color: var(--crm-ink-2); }
.st-meta-label { font: 700 11px/1 var(--crm-font); text-transform: uppercase; letter-spacing: .06em; color: var(--crm-muted); }
#st-meta-sum { flex: 1; min-width: 200px; }
.st-meta-edit { border: 0; background: none; padding: 0; cursor: pointer; font: 700 12.5px var(--crm-font); color: var(--crm-ink); text-decoration: underline; }
@media screen { .meta-card.st-collapsed { display: none !important; } }
@media (max-width: 900px) { .st-steps { grid-template-columns: 1fr; } }
@media print { .st-head { display: none !important; } }

/* ─── Ничто не вылезает за рамку ─────────────────────────────────────────────
   Длинные ссылки, имена файлов и слова без пробелов переносятся в любом месте,
   поля и списки не бывают шире своей колонки. Таблицы не трогаем: они живут
   в своих прокручиваемых обёртках. Только для экрана — печать КП и ведомостей
   остаётся как была. */
@media screen {
  body { overflow-wrap: anywhere; }
  table { overflow-wrap: normal; }
  td, th { overflow-wrap: break-word; }
  input, select, textarea { max-width: 100%; min-width: 0; }
  img, video, iframe { max-width: 100%; }
  a[href^="http"], code { overflow-wrap: anywhere; word-break: break-word; }
}

/* Меню «Ещё» в ведомостях на телефоне — снизу во всю ширину, не за краем экрана */
@media (max-width: 600px) {
  .st-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; z-index: 400; }
}

/* ── Staff application design system ───────────────────────────────────────
   Layout-specific styles stay with each module. These shared surfaces, type,
   controls and table treatments replace its old visual theme on SCREEN only.
   Do not move these aliases into :root: legacy PDF/statement print uses them. */
@media screen {
  html.crm-staff-root { background:var(--crm-bg); }
  body.crm-staff {
    --ink:var(--crm-ink); --paper:var(--crm-bg); --bone:var(--crm-sunken);
    --steel:var(--crm-muted); --hairline:var(--crm-line); --white:#fff;
    --bg:var(--crm-bg); --bg2:var(--crm-sunken); --bd:var(--crm-line); --mu:var(--crm-muted);
    font-family:var(--crm-font); background:var(--crm-bg); color:var(--crm-ink);
    -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
    accent-color:var(--crm-ink);
  }
  .crm-staff :is(button,input,select,textarea) { font-family:var(--crm-font); }
  .crm-staff :is(button,a,input,select,textarea,[contenteditable]):focus-visible {
    outline:3px solid #dfb512; outline-offset:3px;
  }
  .crm-staff .crm-btn, .crm-staff .btn { border-radius:8px; transition:background .15s,border-color .15s,box-shadow .15s; }
  .crm-staff :is(.crm-btn--primary,.btn-primary) { background:var(--crm-sun); color:var(--crm-ink); border-color:var(--crm-sun); }
  .crm-staff :is(.crm-btn--primary,.btn-primary):hover { background:#f2c000; color:var(--crm-ink); border-color:#f2c000; }
  .crm-staff :is(.crmnav,.crmnav-section,.sidebar,.sidebar-nav) { font-family:var(--crm-font); }
  .crm-staff :is(.crmnav-head,.sidebar-header) { min-height:72px; }
  .crm-staff :is(.crmnav a.crmnav-link,.sidebar-nav .nav-link) { min-height:37px; border-radius:8px; font-size:12.5px; }
  .crm-staff .crmnav-section { letter-spacing:.12em; font-size:9px; }
  .crm-staff :is(.crmnav-foot,.sidebar-footer) { background:#171715; }

  /* Main CRM views: one page header, one quiet filter surface, readable data. */
  .crm-main .view { padding:30px 32px 44px; }
  .crm-main .view-header { gap:20px; margin-bottom:24px; align-items:center; flex-wrap:wrap; }
  .crm-main .view-header h1 { font:600 32px/1.12 var(--crm-display); letter-spacing:.015em; text-transform:uppercase; }
  .crm-main :is(.detail-card,.dash-card,.stat-card,.table-wrap,.tasks-section,.task-group,.users-table-wrap) {
    background:var(--crm-surface); border:1px solid var(--crm-line); border-radius:14px;
    box-shadow:0 2px 3px #28251a03,0 8px 28px #28251a03;
  }
  .crm-main .detail-card { padding:22px; }
  .crm-main :is(.detail-card h3,.dash-card h3) { font-size:13px; font-weight:800; letter-spacing:.025em; }
  .crm-main :is(.filter-bar,.kanban-filters) { padding:12px 14px; border:1px solid var(--crm-line); border-radius:12px; background:#ffffffa6; gap:10px; }
  .crm-main :is(.filter-select,.filter-input,.search-input) { background:#fff; border-color:var(--crm-line-strong); border-radius:8px; min-height:36px; }
  .crm-main :is(.pipeline-tab,.period-pill) { border-radius:7px; }
  .crm-main :is(.pipeline-tab.active,.period-pill.active) { background:var(--crm-ink); color:white; border-color:var(--crm-ink); }
  .crm-main .kanban { gap:16px; padding-top:8px; }
  .crm-main .kanban-col { background:var(--crm-sunken); border:1px solid var(--crm-line); border-radius:14px; }
  .crm-main .kanban-col-header { padding:15px 14px; }
  .crm-main .kanban-col-title { font-size:12px; font-weight:800; }
  .crm-main .kanban-cards { padding:0 8px 10px; gap:9px; }
  .crm-main .client-card { border:1px solid #e1ddd4; border-radius:10px; box-shadow:0 2px 5px #19171005; }
  .crm-main .client-card:hover { box-shadow:0 5px 16px #1917100d; border-color:#bab4a6; }
  .crm-main .card-body { padding:14px 34px 14px 12px; }
  .crm-main .card-name { font-size:13px; line-height:1.5; }
  .crm-main :is(.client-table,.clients-table,.kp-table,.users-table) { width:100%; background:white; border-collapse:separate; border-spacing:0; border-radius:12px; overflow:hidden; }
  .crm-main :is(.client-table,.clients-table,.kp-table,.users-table) th { background:#f0eee7; color:#656157; font-size:10px; font-weight:800; letter-spacing:.06em; padding:14px 16px; border-color:var(--crm-line); text-align:left; }
  .crm-main :is(.client-table,.clients-table,.kp-table,.users-table) td { padding:15px 16px; border-color:#efede7; font-size:13px; }
  .crm-main :is(.client-table,.clients-table,.kp-table,.users-table) tbody tr:hover { background:#fffbed; }
  .crm-main .view > .toolbar { padding:12px 14px; border:1px solid var(--crm-line); border-radius:12px; background:#ffffffa6; gap:10px; }
  .crm-main #pipeline-tabs { margin-top:12px; }
  .crm-main .kp-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:20px; }
  .crm-main .kp-card { border:1px solid var(--crm-line); border-radius:14px; padding:20px; box-shadow:var(--crm-shadow); }
  .crm-main .kp-card-top { gap:16px; flex-wrap:wrap; }
  .crm-main .kp-card-name { font-size:16px; margin-bottom:8px; }
  .crm-main .kp-card-name a { color:var(--crm-ink)!important; }
  .crm-main .kp-card-name a:hover { text-decoration:underline!important; }
  .crm-main .kp-card-actions { gap:8px!important; padding-top:16px!important; margin-top:16px!important; }
  .crm-main .kp-project-hd { background:var(--crm-sunken); }
  .crm-main .notif-panel { border:1px solid var(--crm-line); box-shadow:var(--crm-shadow-lg); }
  .crm-main .notif-panel-header { background:var(--crm-bg); padding:18px; }
  .crm-main .notif-item { padding:18px; gap:12px; }
  .crm-main .notif-item.unread { background:#fffae9; }
  .crm-main .notif-body { font-size:13px; line-height:1.6; }
  .crm-main .task-row { padding:14px 16px; border-color:var(--crm-line); }
  .crm-main .task-text { font-size:13px; line-height:1.55; }
  .crm-main .badge { border-radius:5px; font-weight:650; }
  .crm-main .modal { border-radius:16px; border:1px solid var(--crm-line); box-shadow:var(--crm-shadow-lg); }
  .crm-main .ws { --ws-gap:20px; }
  .crm-main .kp-active-form[hidden] { display:none; }
  .crm-main .ws .detail-card { box-shadow:none; }
  .crm-main .ws .kp-stages { background:#faf8ff; }
  .crm-main .ws .kp-st-row label:focus-within { color:var(--crm-client); }

  /* Standalone staff tools share the same page grid and component language. */
  body.crm-tool:not(.crm-calculator) { font-size:14px; line-height:1.55; }
  .crm-tool :is(main,.wrap) { max-width:1280px; }
  .crm-tool :is(h1,.st-title) { font:600 30px/1.15 var(--crm-display); text-transform:uppercase; letter-spacing:.02em; color:var(--crm-ink); }
  .crm-tool :is(h2,.card h2) { font-family:var(--crm-font); font-size:15px; font-weight:800; letter-spacing:0; color:var(--crm-ink); }
  .crm-tool :is(.sub,.hint) { color:var(--crm-muted); font:500 12.5px/1.65 var(--crm-font); }
  .crm-tool :is(.card,.by-object,.meta-card,.kp-bar,details,.st-head) {
    background:#fff; border:1px solid var(--crm-line); border-radius:14px;
    box-shadow:0 2px 3px #28251a03,0 8px 28px #28251a03;
  }
  .crm-tool :is(.card,.by-object,.meta-card) { padding:22px; }
  .crm-tool .toolbar { margin-bottom:24px; gap:10px; flex-wrap:wrap; }
  .crm-tool :is(.toolbar h1,.bar h1) { margin-right:auto; }
  .crm-tool .btn { min-height:36px; padding:8px 13px; font:650 12.5px/1.2 var(--crm-font); background:white; color:var(--crm-ink); border:1px solid var(--crm-line-strong); }
  .crm-tool .btn:hover { background:var(--crm-sunken); border-color:#aca696; }
  .crm-tool :is(.btn--ink,.btn-ink,.btn-primary,button.primary) { background:var(--crm-sun); border-color:var(--crm-sun); color:var(--crm-ink); box-shadow:none; }
  .crm-tool :is(.btn--ink,.btn-ink,.btn-primary,button.primary):hover { background:#f2c000; border-color:#f2c000; color:#171717; }
  .crm-tool .btn-sm { min-height:31px; padding:6px 10px; font-size:12px; }
  .crm-tool :is(input,select,textarea):not([type=checkbox]):not([type=color]):not([type=range]):not([type=file]) {
    border-color:var(--crm-line-strong); border-radius:7px; background:#fff; color:var(--crm-ink);
    font-family:var(--crm-font); box-shadow:none;
  }
  .crm-tool :is(input,select,textarea):focus { border-color:#a49564; }
  .crm-tool :is(.mf label,.kp-bar label) { font:700 10px/1.4 var(--crm-font); letter-spacing:.06em; color:var(--crm-muted); }
  .crm-tool .cards { gap:16px; margin-bottom:24px; }
  .crm-tool .card .val { font:600 30px/1.25 var(--crm-display); color:var(--crm-ink); }
  .crm-tool .card .lbl { font:700 10px/1.4 var(--crm-font); letter-spacing:.08em; margin-bottom:8px; }
  .crm-tool .tbl-wrap { border:1px solid var(--crm-line); border-radius:14px; background:#fff; box-shadow:0 6px 24px #28251a04; }
  .crm-tool:not(.crm-calculator) thead th { background:#efede6; color:#514e45; font:800 10px/1.5 var(--crm-font); letter-spacing:.04em; padding:13px 10px; border-bottom:1px solid var(--crm-line-strong); }
  .crm-tool:not(.crm-calculator) tbody td { font-family:var(--crm-font); padding:11px 10px; border-color:#ece9e2; }
  .crm-statement .sec-row td { background:#eae6dc; }
  .crm-statement .sec-inner { padding:10px 12px; }
  .crm-statement .sec-title { color:#3e3a31; font-size:11px; letter-spacing:.055em; }
  .crm-statement .dr td { background:var(--row-bg,transparent); }
  .crm-statement .sb-add { background:#fff; color:var(--crm-ink); border:1px solid #d6cfbd; }
  .crm-statement .sb-del { background:transparent; color:#977069; }
  .crm-statement .sb-del:hover { background:var(--crm-err-soft); color:var(--crm-err); }
  .crm-statement .st-head { padding:22px 24px 16px; margin-bottom:20px; }
  .crm-statement .st-steps { padding-top:20px; gap:16px; }
  .crm-tool .obj-row { padding:11px 0; border-color:var(--crm-line); }
  .crm-tool .savebar { background:var(--crm-bg); border-top:1px solid var(--crm-line); }
  .crm-tool details { box-shadow:none; padding:20px; }
  .crm-tool details summary { color:var(--crm-ink); font:750 14px var(--crm-font); }

  /* The V2 editor is a tool in the same light workspace, with an intact document preview. */
  body.crm-calculator {
    --panel:#f7f5f0; --card:#fff; --card2:#f2efe8; --bd:#e1dcd1; --bd2:#c5bdad;
    --acc:#29261e; --acc2:#171510; --acc-soft:#fff3ba; --acc-glow:0 0 0 3px #ffd01440;
    --tx:#211f19; --tx2:#534f44; --mu:#807969; --grn:#257343; --sh:0 4px 20px #28251a0d;
    --doc-bg:#fff; --doc-tx:#211f19; --doc-mu:#726b5e; --doc-bd:#dfd9ce;
  }
  .crm-calculator #tb { background:#fff; backdrop-filter:none; border-bottom:1px solid var(--crm-line); box-shadow:0 2px 8px #28251a05; }
  .crm-calculator #tb-logo svg text { fill:var(--crm-ink); }
  .crm-calculator #tb button,.crm-calculator #status-sel { background:#fff; color:var(--crm-ink); border:1px solid var(--crm-line-strong); font-family:var(--crm-font); }
  .crm-calculator #tb button:hover { background:var(--crm-sunken); color:var(--crm-ink); border-color:var(--crm-line-strong); }
  .crm-calculator #tb button.pri,.crm-calculator #btn-build { background:var(--crm-sun); color:var(--crm-ink); border-color:var(--crm-sun); box-shadow:none; }
  .crm-calculator #tb button.pri:hover,.crm-calculator #btn-build:hover { background:#f2c000; color:var(--crm-ink); box-shadow:none; }
  .crm-calculator #lft { border-right:1px solid var(--crm-line-strong); }
  .crm-calculator :is(.ps,.cfg,.ar-it) { box-shadow:0 2px 4px #28251a03; border-radius:10px; }
  .crm-calculator .tab.on { background:#fff5c9; border-bottom-color:#d6ad12; color:var(--crm-ink); }
  .crm-calculator :is(.pk.on,.fl-b.on) { background:var(--crm-ink); color:white; box-shadow:none; }
  .crm-calculator :is(.pk,.fl-b) { background:#fff; border-color:var(--crm-line-strong); }
  .crm-calculator .tgb { background:#d6d0c2; }
  .crm-calculator .tgb.on { background:var(--crm-ink); }
  .crm-calculator .ar-tot { color:var(--crm-ink); }
  .crm-calculator :is(.ps-t,.mr label,.cfh,.pr label,.pkr) { font-family:var(--crm-font); }
  .crm-calculator :is(.mr input,.pr input) { background:#fff; }

  @media(max-width:1100px) {
    .crm-main .view { padding:24px 20px 36px; }
    .crm-tool .st-head { padding:18px; }
  }
  @media(max-width:768px) {
    .crm-main .bnav-link { min-width:0; font-size:10px; }
    .crm-main .bnav-link > span { white-space:nowrap; }
    .crm-main .view { padding:18px 14px 32px; }
    .crm-main .view-header { gap:12px; margin-bottom:18px; }
    .crm-main .view-header h1,.crm-tool :is(h1,.st-title) { font-size:26px; }
    .crm-tool :is(.card,.by-object,.meta-card),.crm-main .detail-card { padding:16px; }
    .crm-tool .st-head { padding:16px 14px; }
    .crm-main :is(.filter-bar,.kanban-filters) { padding:10px; }
    .crm-main .client-table td { padding:12px; }
  }
}