/* ---- прячем шапку и подвал сайта: навигация у нас своя ---- */
header .navbar, header.navbar, nav.navbar, .web-footer, footer.web-footer,
.footer-info, .footer-powered, .footer-links, .page-breadcrumbs,
.page-header-wrapper { display: none !important; }
body { background: #F4F7F6; }
.page_content, .webpage-content, article.web-page-content,
.page-content-wrapper > main { padding: 0 !important; margin: 0 !important; }

.crm *, .crm *::before, .crm *::after { box-sizing: border-box; }
.crm { font-family: 'Segoe UI', system-ui, Arial, sans-serif; color: #17332C; box-sizing: border-box; }
.crm button, .crm input, .crm select, .crm textarea { font-family: inherit; }
.crm-full { width: var(--crm-vw, 100vw); position: relative; left: 50%;
  margin-left: calc(var(--crm-vw, 100vw) / -2); padding: 0 10px; }
.crm-app { display: flex; min-height: 94vh; background: #F4F7F6; }

.crm-rail { width: 56px; flex: none; background: #0D6B5C; display: flex; flex-direction: column; align-items: center; padding: 10px 0; position: sticky; top: 0; height: 100vh; z-index: 30; }
.crm-rail .brand { width: 34px; height: 34px; border-radius: 9px; background: #fff; color: #0D6B5C; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; flex: none; text-decoration: none; }
.crm-rl { width: 40px; height: 40px; border-radius: 10px; border: none; background: none; color: rgba(255,255,255,.72); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-bottom: 3px; position: relative; flex: none; text-decoration: none; }
.crm-rl:hover { background: rgba(255,255,255,.14); color: #fff; }
.crm-rl.on { background: #fff; color: #0D6B5C; }
.crm-rl .tip { position: absolute; left: 48px; background: #17332C; color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.crm-rl:hover .tip { opacity: 1; }
.crm-rail .gap { flex: 1; }

.crm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-hd { background: #fff; border-bottom: 1px solid #DCE5E1; position: sticky; top: 0; z-index: 20; }
.crm-hd h1 { font-size: 16px; font-weight: 600; margin: 0 10px 0 0; }
.crm-l { display: flex; align-items: center; gap: 7px; padding: 7px 10px; flex-wrap: wrap; border-top: 1px solid #F0F4F3; }
.crm-l:first-child { border-top: none; }
.crm-kpi { display: inline-flex; align-items: baseline; gap: 6px; background: #F8FAF9; border-radius: 8px; padding: 3px 10px; font-size: 12px; color: #5E7A72; }
.crm-kpi b { font-size: 13px; color: #17332C; font-weight: 600; }

.crm input.crm-q { border: 1px solid #DCE5E1; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; height: 30px; width: 240px; color: #17332C; }
.crm input.crm-q:focus { outline: 2px solid #0D6B5C; outline-offset: -1px; border-color: #0D6B5C; }
.crm-b { border: 1px solid #DCE5E1; background: #fff; color: #3E564E; border-radius: 8px; padding: 0 11px; height: 30px; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.crm-b:hover { border-color: #0D6B5C; color: #0D6B5C; }
.crm-b.on, .crm-b.pri { background: #0D6B5C; border-color: #0D6B5C; color: #fff; }
.crm-b.pri { font-weight: 600; }
.crm-b[disabled] { opacity: .5; cursor: default; }
.crm-b .n { background: rgba(255,255,255,.25); border-radius: 99px; font-size: 10.5px; padding: 1px 6px; font-weight: 600; }
.crm-grow { margin-left: auto; }
.crm-sep { width: 1px; height: 20px; background: #E2E9E6; margin: 0 3px; }
.crm-tog { display: inline-flex; border: 1px solid #DCE5E1; border-radius: 8px; overflow: hidden; height: 30px; }
.crm-tog button { border: none; background: #fff; color: #5E7A72; font-size: 12.5px; padding: 0 10px; cursor: pointer; }
.crm-tog button.on { background: #0D6B5C; color: #fff; }
.crm-chip { border: 1px solid #DCE5E1; background: #fff; border-radius: 99px; padding: 3px 12px; font-size: 12.5px; color: #3E564E; cursor: pointer; }
.crm-chip b { font-weight: 600; }
.crm-chip.on { background: #0D6B5C; border-color: #0D6B5C; color: #fff; }
.crm-tag { display: inline-flex; align-items: center; gap: 5px; background: #EAF3F0; color: #0D6B5C; border-radius: 7px; padding: 3px 5px 3px 9px; font-size: 12px; }
.crm-tag button { border: none; background: none; color: #0D6B5C; cursor: pointer; font-size: 14px; line-height: 1; }
.crm-lnk { background: none; border: none; color: #5E7A72; font-size: 12px; cursor: pointer; text-decoration: underline; }
.crm-panel { display: none; padding: 10px 10px 12px; background: #FBFDFC; border-top: 1px solid #F0F4F3; }
.crm-panel.open { display: block; }
.crm-ff { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.crm-ff label { display: block; font-size: 11px; color: #8AA098; margin-bottom: 3px; }
.crm-ff select { width: 100%; border: 1px solid #DCE5E1; border-radius: 8px; padding: 5px 8px; font-size: 12.5px; height: 30px; background: #fff; color: #17332C; }
.crm-cols { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.crm-cols label { font-size: 12.5px; color: #3E564E; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }
.crm-cols input[type="checkbox"] { width: 15px; height: 15px; accent-color: #0D6B5C; cursor: pointer; }
.crm-hint { font-size: 12px; color: #8AA098; margin-top: 8px; }

.crm-tw { padding: 0 0 30px; }
.crm table { width: 100%; border-collapse: collapse; background: #fff; margin: 0; table-layout: fixed; }
.crm thead th { position: sticky; top: var(--crm-hd, 100px); z-index: 10; background: #F2F5F4; text-align: left; font-size: 11px; font-weight: 600; color: #5E7A72; text-transform: uppercase; letter-spacing: .3px; padding: 0 8px; height: 30px; border-bottom: 1px solid #DCE5E1; white-space: nowrap; cursor: pointer; user-select: none; overflow: hidden; text-overflow: ellipsis; }
.crm thead th:hover { color: #0D6B5C; background: #EAF3F0; }
.crm thead th.no { cursor: default; }
.crm thead th.drop { box-shadow: inset 3px 0 0 #0D6B5C; background: #DFEDE8; }
.crm thead th .ar { color: #0D6B5C; margin-left: 3px; font-size: 10px; }
.crm-ghost { position: fixed; z-index: 90; background: #0D6B5C; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; pointer-events: none; text-transform: uppercase; letter-spacing: .3px; }
.crm tbody td { padding: 0 8px; border-bottom: 1px solid #F0F4F3; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm tbody tr { height: 30px; cursor: pointer; }
.crm tbody tr:nth-child(even) { background: #FBFDFC; }
.crm tbody tr:hover { background: #EAF3F0; }
.crm tbody tr.sel { background: #DFEDE8; }
.crm.roomy tbody tr { height: 42px; }
.crm.roomy tbody td { font-size: 13.5px; }
.crm-num { text-align: right; font-variant-numeric: tabular-nums; }
.crm-mut { color: #8AA098; }
.crm td.stl { border-left: 3px solid transparent; }
.crm-pill { font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.crm-col { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.crm-col > span { overflow: hidden; text-overflow: ellipsis; }
.crm-sw { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0,0,0,.18); flex: none; }
.crm-sw.duo { background-image: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); }
.crm-sw.big { width: 20px; height: 20px; border-radius: 5px; }
.crm-ph { width: 34px; height: 22px; border-radius: 4px; background: #EFF3F1; border: 1px solid #E2E9E6; display: block; object-fit: cover; }
.crm-empty { padding: 40px; text-align: center; color: #8AA098; font-size: 13px; background: #fff; }

.crm-scrim { position: fixed; inset: 0; background: rgba(10,30,25,.45); opacity: 0; pointer-events: none; transition: opacity .16s; z-index: 40; }
.crm-scrim.on { opacity: 1; pointer-events: auto; }
.crm-mdwrap { position: fixed; inset: 0; z-index: 41; display: none; align-items: center; justify-content: center; padding: 22px; }
.crm-mdwrap.on { display: flex; }
.crm-md { background: #fff; border-radius: 16px; width: 100%; max-width: 1000px; max-height: 90vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(8,36,28,.3); overflow: hidden;
  animation: crmpop .16s ease-out; }
@keyframes crmpop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; } }
.crm-md.sm { max-width: 620px; }
.crm-md.md { max-width: 780px; }
.crm-md > header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #EFF3F1; flex: none; }
.crm-md > header .t { font-weight: 600; font-size: 17px; }
.crm-md > header .sub { font-size: 12px; color: #8AA098; }
.crm-md > header .x { border: none; background: #F2F5F4; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; color: #5E7A72; font-size: 17px; margin-left: auto; flex: none; }
.crm-md > header .x:hover { background: #E2E9E6; color: #17332C; }
.crm-md > .bd { padding: 18px; overflow: auto; flex: 1; }
.crm-md > footer { padding: 12px 18px; border-top: 1px solid #EFF3F1; display: flex; gap: 8px; justify-content: flex-end; flex: none; background: #FBFDFC; flex-wrap: wrap; }

.crm-top { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 60%); gap: 20px; margin-bottom: 4px; }
.crm-hero { background: #F4F7F6; border: 1px solid #EFF3F1; border-radius: 12px; height: 220px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.crm-hero img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.crm-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.crm-thumbs img { width: 58px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid #E2E9E6; cursor: pointer; }
.crm-thumbs img:hover { border-color: #0D6B5C; }
.crm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.crm-fact .k { font-size: 11px; color: #8AA098; margin-bottom: 2px; }
.crm-fact .v { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.crm-block { margin-top: 20px; }
.crm-block > .ttl { font-size: 11px; color: #8AA098; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid #EFF3F1; margin-bottom: 12px; }
.crm-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.crm-cell { background: #F8FAF9; border-radius: 10px; padding: 10px 12px; }
.crm-cell.acc { background: #EAF3F0; }
.crm-cell .k { font-size: 11px; color: #8AA098; }
.crm-cell .v { font-size: 14px; font-weight: 600; margin-top: 3px; }
.crm-note { font-size: 13px; color: #3E564E; line-height: 1.55; background: #F8FAF9; border-radius: 10px; padding: 10px 12px; }

.crm-fm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.crm-fm .full { grid-column: 1 / -1; }
.crm-fm h4 { grid-column: 1 / -1; font-size: 11px; color: #8AA098; margin: 6px 0 0; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding-bottom: 6px; border-bottom: 1px solid #EFF3F1; }
.crm-fm label { display: block; font-size: 11px; color: #8AA098; margin-bottom: 3px; }
.crm-fm input, .crm-fm select, .crm-fm textarea { width: 100%; border: 1px solid #DCE5E1; border-radius: 8px; padding: 7px 10px; font-size: 13px; background: #fff; color: #17332C; }
.crm-fm input:focus, .crm-fm select:focus, .crm-fm textarea:focus { outline: 2px solid #0D6B5C; outline-offset: -1px; border-color: #0D6B5C; }
/* флажок — это флажок, а не поле ввода */
.crm-fm input[type="checkbox"], .crm-fm input[type="radio"] {
  width: 17px; height: 17px; min-width: 17px; padding: 0; margin: 0;
  border: 1px solid #C6D3CE; border-radius: 4px; accent-color: #0D6B5C;
  cursor: pointer; flex: none; box-shadow: none; }
.crm-fm input[type="radio"] { border-radius: 99px; }
.crm-fm .chk { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #3E564E; }
.crm-fm .chk label { margin: 0; font-size: 13px; color: #3E564E; cursor: pointer; }
.crm-err { background: #FBECEC; color: #A33B3B; border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; display: none; }
.crm-err.on { display: block; }

.crm-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: #17332C; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 95; opacity: 0; pointer-events: none; transition: all .2s; }
.crm-toast.on { opacity: 1; transform: translateX(-50%); }
.crm-toast.bad { background: #A33B3B; }
.crm-lb { position: fixed; inset: 0; background: rgba(8,24,20,.9); display: none; align-items: center; justify-content: center; z-index: 96; }
.crm-lb.on { display: flex; }
.crm-lb img { max-width: 94vw; max-height: 90vh; border-radius: 8px; }
@media (max-width: 900px) { .crm-rail { display: none; } .crm-full { padding: 0 6px; }
  .crm-top { grid-template-columns: 1fr; } .crm-mdwrap { padding: 8px; } }

/* crm-rz */
.crm thead th .crm-rz { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 12; }
.crm thead th .crm-rz:hover { background: #0D6B5C; opacity: .3; }
@media (max-width: 900px) { .crm thead th .crm-rz { display: none; } }

/* card-dense */
.crm-hero { height: 150px; border-radius: 10px; }
.crm-thumbs img { width: 50px; height: 36px; }
.crm-facts { gap: 8px 14px; }
.crm-fact .v { font-size: 13.5px; }
.crm-grid4 { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; }
.crm-cell { padding: 7px 10px; border-radius: 8px; }
.crm-cell .v { font-size: 13.5px; margin-top: 2px; }
.crm-block { margin-top: 13px; }
.crm-block > .ttl { padding-bottom: 4px; margin-bottom: 8px; }
.crm-cell:has(> .v > .crm-mut) { background: transparent; padding-left: 0; padding-right: 0; }
#st-log { max-height: 190px; overflow-y: auto; }
.crm-md > .bd { padding-top: 12px; }

/* cpick */
.crm-cpick-hd { font-size: 12px; color: #8AA098; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.crm-cpick-list { max-height: 230px; overflow-y: auto; border: 1px solid #EFF3F1; border-radius: 9px; }
.crm-cpick-i { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #F4F7F6; }
.crm-cpick-i:last-child { border-bottom: none; }
.crm-cpick-i:hover { background: #EAF3F0; }
.crm-cpick-i span:last-child { font-size: 14px; }
.crm-cpick-new { margin-top: 14px; padding-top: 12px; border-top: 1px solid #EFF3F1; }
.crm-cpick-inp { width: 100%; height: 34px; margin-bottom: 10px; }
.crm-cpick-note { font-size: 12px; color: #8AA098; margin-bottom: 8px; }
.crm-cpick-pal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; margin-bottom: 10px; }
.crm-cpick-dot { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); cursor: pointer; }
.crm-cpick-dot.sel { border: 2px solid #0D6B5C; box-shadow: 0 0 0 2px #DFEDE8; }
.crm-cpick-dual { font-size: 12px; color: #8AA098; margin-bottom: 10px; }
.crm-cpick-half { color: #0D6B5C; cursor: pointer; text-decoration: underline; }
.crm-cpick-half.on { font-weight: 600; }

/* ==== cpop ==== */
.crm-cpop-ov{position:fixed;inset:0;z-index:99999;background:rgba(20,30,28,.10)}
.crm-cpop{position:fixed;width:300px;max-height:72vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(15,40,35,.25);padding:10px 10px 12px;font-size:13.5px;overflow-y:auto}
.crm-cpop.center{left:50%;top:14vh;transform:translateX(-50%)}
.crm-cpop-hd{display:flex;align-items:center;justify-content:space-between;font-weight:700;padding:2px 4px 8px}
.crm-cpop-x{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:#8AA098;padding:0 4px}
.crm-cpop-q{width:100%;box-sizing:border-box;border:1px solid #DCE5E2;border-radius:9px;padding:7px 10px;margin-bottom:8px;font-size:13.5px}
.crm-cpop-list{overflow-y:auto;border:1px solid #EEF2F0;border-radius:10px;min-height:60px;max-height:240px}
.crm-cpop-i{display:flex;align-items:center;gap:9px;padding:7px 10px;cursor:pointer}
.crm-cpop-i:hover{background:#F2F6F4}
.crm-cpop-none{padding:12px;color:#8AA098;font-size:12.5px}
.crm-cpop-add{padding-top:8px}
.crm-cpop-lnk{font-size:12.5px;color:#0D6B5C;text-decoration:none}
.crm-cpop-new{margin-top:8px}
.crm-cpop-inp{width:100%;box-sizing:border-box;border:1px solid #DCE5E2;border-radius:9px;padding:7px 10px;font-size:13.5px}
.crm-cpop-halves{display:flex;gap:8px;margin-top:7px;font-size:12px}
.crm-cpop-half{padding:3px 9px;border:1px solid #DCE5E2;border-radius:999px;cursor:pointer;color:#5B6E68}
.crm-cpop-half.on{background:#0D6B5C;border-color:#0D6B5C;color:#fff}
.crm-cpop-pal{display:flex;flex-wrap:wrap;gap:7px;margin:9px 2px}
.crm-cpop-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.crm-cpop-dot.sel{border-color:#0D6B5C}
.crm-cpop-ok{margin-top:4px;width:100%}

/* ==== fields: базовая подложка ==== */
:where(.crm, .crm-md, .crm-cpop) input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
:where(.crm, .crm-md, .crm-cpop) select,
:where(.crm, .crm-md, .crm-cpop) textarea{
  border:1px solid #DCE5E2;
  border-radius:10px;
  padding:9px 12px;
  font-size:13.5px;
  background:#fff;
  color:#243430;
  font-family:inherit;
  box-sizing:border-box;
  outline:none;
}
:where(.crm, .crm-md, .crm-cpop) input:not([type=checkbox]):not([type=radio]):focus,
:where(.crm, .crm-md, .crm-cpop) select:focus,
:where(.crm, .crm-md, .crm-cpop) textarea:focus{
  border-color:#0D6B5C;
  box-shadow:0 0 0 3px rgba(13,107,92,.12);
}