/* ПРОСТАЯ НАСТРОЙКА v2 (11.10.2026): «Подключения» и «Шаги воронки». Только токены ui.css, минимум текста */
#view-setup .ss-block{margin-bottom:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ss-sh{display:flex;align-items:center;gap:10px}
.ss-sh h3{margin:0;font-size:16px;font-weight:700;color:var(--txt)}
.ss-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--panel-2);border:1px solid var(--stroke);color:var(--txt-2)}
.ss-n.done{background:var(--ok);border-color:var(--ok);color:#fff}
.ss-note{font-size:12.5px;color:var(--txt-3);padding:2px 0 12px}
.ss-mute{font-size:12.5px;color:var(--txt-3)}
.ss-i{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--stroke);font-size:10px;font-style:normal;color:var(--txt-3);cursor:help;vertical-align:middle}
.ss-x{width:26px;height:26px;border:0;border-radius:var(--r-sm);background:none;color:var(--txt-3);font-size:17px;line-height:1;cursor:pointer;flex:0 0 auto}
.ss-x:hover{background:var(--panel-2);color:var(--txt)}

/* CRM */
.ss-crm{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ss-crm-tile{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-lg);border:1.5px solid var(--stroke);background:var(--panel);font:inherit;color:var(--txt);cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.ss-crm-tile b{flex:1;font-size:15px}
.ss-crm-tile.on{border-color:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb, var(--c1) 12%, transparent)}
.ss-crm-tile:disabled{opacity:.5;cursor:default}
.ss-ico{flex:0 0 34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--txt-3)}
.ss-ico-amocrm{background:#3a7bd5}.ss-ico-bitrix24{background:#2fc6f6}.ss-ico-meta{background:#1877f2;font-size:17px}.ss-ico-tiktok{background:#111;font-size:16px}.ss-ico-sipuni{background:#16a34a;font-size:16px}
.ss-dot{width:9px;height:9px;border-radius:50%;background:var(--stroke);flex:0 0 auto}
.ss-dot.ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent)}

/* карточки сервисов */
.ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;align-items:start}
.ss-svc{padding:0;overflow:hidden;min-width:0}
.ss-svc-h{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;background:none;font:inherit;color:var(--txt);cursor:pointer;text-align:left}
.ss-svc-h b{flex:1;font-size:14px}
.ss-chev{width:22px;height:22px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--txt-3);font-size:16px}
.ss-svc-b,.ss-crmform{padding:4px 14px 14px;display:flex;flex-direction:column;gap:10px}
.ss-crmform{padding:16px}
.ss-crmline{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13.5px;color:var(--txt)}
.ss-crmline b{flex:1;font-weight:600}
.ss-crmline span{font-size:12px;color:var(--txt-3)}
.ss-field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--txt-2);min-width:0}
.ss-field>span{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ss-how{display:inline}
.ss-how summary{display:inline;cursor:pointer;color:var(--c1);font-size:11.5px;list-style:none}
.ss-how summary::-webkit-details-marker{display:none}
.ss-how p{margin:6px 0 0;font-size:11.5px;color:var(--txt-3);line-height:1.4}
.ss-inrow{display:flex;align-items:center;gap:6px;min-width:0}
.ss-inrow .input{flex:1;min-width:0}
.ss-pre,.ss-post{font-size:12.5px;color:var(--txt-3);white-space:nowrap}
.ss-acc{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}
.ss-accrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--stroke);border-radius:var(--r-md);cursor:pointer;font-size:13px;color:var(--txt)}
.ss-accrow.on{border-color:color-mix(in srgb, var(--c1) 45%, var(--stroke));background:color-mix(in srgb, var(--c1) 6%, transparent)}
.ss-accrow b{flex:1;font-weight:500}
.ss-accrow i{font-style:normal;font-size:11px;color:var(--txt-3)}
.ss-res{font-size:12.5px;line-height:1.4;padding:8px 10px;border-radius:var(--r-md)}
.ss-res.ok{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--txt)}
.ss-res.bad{background:color-mix(in srgb, var(--bad) 10%, transparent);color:var(--txt)}
.ss-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ss-off{color:var(--bad);font-size:12.5px;width:auto;padding:0 10px}

/* воронки: лента этапов */
.ss-pipes{display:flex;flex-direction:column;gap:8px}
.ss-pipe{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--stroke);border-left:4px solid var(--pc);border-radius:var(--r-lg);background:var(--panel);min-width:0;transition:opacity .15s}
.ss-pipe:not(.on){opacity:.55;border-left-color:var(--stroke)}
.ss-pipe-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.ss-pipe-b>b{font-size:14px;color:var(--txt)}
.ss-strip{display:flex;flex-wrap:wrap;row-gap:4px;gap:0}
.ss-stg{flex:0 0 auto;position:relative;font:inherit;font-size:12px;line-height:1;color:var(--txt-2);background:var(--panel-2);border:0;padding:7px 14px 7px 18px;margin-right:3px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%);white-space:nowrap}
.ss-stg:first-child{padding-left:12px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);border-radius:var(--r-md) 0 0 var(--r-md)}
.ss-stg.won{background:color-mix(in srgb, var(--ok) 16%, var(--panel-2));color:var(--txt)}
.ss-stg.lost{background:color-mix(in srgb, var(--bad) 12%, var(--panel-2))}
.ss-strip.pick .ss-stg{cursor:pointer}
.ss-strip.pick .ss-stg:hover{background:color-mix(in srgb, var(--c1) 18%, var(--panel-2));color:var(--txt)}
.ss-strip.pick .ss-stg.sel{background:var(--c1);color:#fff}
.ss-strip.pick .ss-stg.after{background:color-mix(in srgb, var(--c1) 22%, var(--panel-2));color:var(--txt)}
.ss-pipes-empty{font-size:13px;color:var(--txt-3);padding:14px;border:1px dashed var(--stroke);border-radius:var(--r-lg)}
.ss-pipes-save{margin-top:4px}
.ss-switch{position:relative;flex:0 0 40px;height:24px;cursor:pointer}
.ss-switch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.ss-switch span{position:absolute;inset:0;border-radius:12px;background:var(--stroke);transition:background .15s}
.ss-switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.ss-switch input:checked+span{background:var(--ok)}
.ss-switch input:checked+span::after{transform:translateX(16px)}
.ss-switch input:focus-visible+span{outline:2px solid var(--c1);outline-offset:2px}
.ss-switch.sm{flex-basis:34px;height:20px}
.ss-switch.sm span::after{width:14px;height:14px}
.ss-switch.sm input:checked+span::after{transform:translateX(14px)}
.ss-next{display:flex;justify-content:flex-end;margin-top:4px}

/* шаги */
.ss-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--panel)}
.ss-bar-t{font-size:13px;color:var(--txt-2)}
.ss-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;align-items:start}
.ss-steps2{margin-top:12px}
.ss-step{padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ss-step.empty{border-style:dashed}
.ss-step-h{display:flex;align-items:center;gap:10px}
.ss-step-h>b{flex:1;font-size:15px;color:var(--txt)}
.ss-num{flex:0 0 26px;height:26px;border-radius:var(--r-md);display:grid;place-items:center;font-size:12px;font-weight:700;background:color-mix(in srgb, var(--c1) 14%, var(--panel-2));color:var(--txt)}
.ss-name{flex:1;min-width:0;font-weight:600}
.ss-conds{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ss-or{font-size:10.5px;font-weight:600;color:var(--txt-3);text-transform:uppercase;letter-spacing:.3px}
.ss-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:5px 4px 5px 10px;border-radius:var(--r-md);font-size:12.5px;line-height:1.2;color:var(--txt);background:var(--panel-2);border:1px solid var(--stroke)}
.ss-chip button{width:20px;height:20px;border:0;border-radius:50%;background:none;color:var(--txt-3);cursor:pointer;font-size:14px;line-height:1;flex:0 0 auto}
.ss-chip button:hover{background:color-mix(in srgb, var(--bad) 14%, transparent);color:var(--bad)}
.ss-chip.k-stage{background:color-mix(in srgb, var(--c1) 12%, var(--panel));border-color:color-mix(in srgb, var(--c1) 30%, var(--stroke))}
.ss-chip.k-tag{background:color-mix(in srgb, var(--c2) 12%, var(--panel));border-color:color-mix(in srgb, var(--c2) 30%, var(--stroke))}
.ss-chip.k-field{background:color-mix(in srgb, var(--c3) 12%, var(--panel));border-color:color-mix(in srgb, var(--c3) 30%, var(--stroke))}
.ss-chip.k-grp{background:color-mix(in srgb, var(--warn) 10%, var(--panel))}
.ss-addbtn{font:inherit;font-size:12.5px;color:var(--c1);background:none;border:1px dashed color-mix(in srgb, var(--c1) 45%, var(--stroke));border-radius:var(--r-md);padding:5px 12px;cursor:pointer}
.ss-addbtn:hover{background:color-mix(in srgb, var(--c1) 8%, transparent)}
.ss-add{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:var(--r-md);background:var(--panel-2);border:1px solid var(--stroke);min-width:0}
.ss-addtabs{display:flex;gap:4px;align-items:center}
.ss-addtabs button:not(.ss-x){font:inherit;font-size:12.5px;padding:5px 12px;border-radius:var(--r-md);border:0;background:none;color:var(--txt-2);cursor:pointer}
.ss-addtabs button.on{background:var(--panel);color:var(--txt);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600}
.ss-addtabs .ss-x{margin-left:auto}
.ss-ptabs{display:flex;gap:4px;flex-wrap:wrap}
.ss-ptabs button{font:inherit;font-size:12px;padding:4px 10px;border-radius:var(--r-md);border:1px solid var(--stroke);background:var(--panel);color:var(--txt-2);cursor:pointer}
.ss-ptabs button.on{border-color:var(--c1);color:var(--txt)}
.ss-addfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ss-addfoot .input,.ss-addfoot .select{flex:1 1 160px;min-width:0}
.ss-addfoot .btn-primary{margin-left:auto}
.ss-chips{display:flex;flex-wrap:wrap;gap:6px}
.ss-pick{font:inherit;font-size:12.5px;padding:5px 10px;border-radius:var(--r-md);border:1px solid var(--stroke);background:var(--panel);color:var(--txt);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.ss-pick i{font-style:normal;font-size:11px;color:var(--txt-3)}
.ss-pick.on{border-color:var(--c1);background:color-mix(in srgb, var(--c1) 12%, var(--panel))}
.ss-newstep{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:110px;border:1.5px dashed var(--stroke);border-radius:var(--r);background:none;font:inherit;font-size:14px;font-weight:600;color:var(--txt-2);cursor:pointer}
.ss-newstep span{font-size:22px;line-height:1;color:var(--c1)}
.ss-newstep small{font-size:11.5px;font-weight:400;color:var(--txt-3)}
.ss-newstep:hover{border-color:var(--c1);color:var(--txt)}
.ss-wide{gap:8px}
.ss-pay{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--txt-2)}
.ss-pay .input,.ss-pay .select{flex:1 1 130px;min-width:0}
.ss-com{padding-top:8px;border-top:1px solid var(--stroke)}
.ss-com>span{flex-basis:100%}
.ss-pct{display:flex;align-items:center;gap:4px;flex:0 0 90px}
.ss-pct .input{width:70px}
.ss-prev{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:14px}
.ss-prev>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--stroke)}
.ss-prev>div.chg{border-color:color-mix(in srgb, var(--warn) 45%, var(--stroke))}
.ss-prev span{font-size:11.5px;color:var(--txt-3)}
.ss-prev b{font-size:18px;color:var(--txt);font-variant-numeric:tabular-nums}
.ss-prev i{font-style:normal;font-size:11px;color:var(--warn)}
.ss-prev small{grid-column:1/-1;font-size:11.5px;color:var(--txt-3)}
@media (max-width:900px){
  .ss-steps,.ss-grid,.ss-crm{grid-template-columns:1fr}
  .ss-pipe{gap:10px;padding:10px 12px}
  .ss-bar{position:static}
}
.ss-wide .ss-addbtn,.ss-step>.ss-addbtn{align-self:flex-start}
.ss-add .ss-stg{background:var(--panel)}.ss-add .ss-stg.won{background:color-mix(in srgb, var(--ok) 16%, var(--panel))}.ss-add .ss-stg.lost{background:color-mix(in srgb, var(--bad) 12%, var(--panel))}