/* Раздел «Уведомления» кабинета FlowFrame.
   Базовые токены и компоненты (.btn, .pill, .card, .txtable, .toggle, .empty, .overlay) берутся из app.html;
   здесь только то, чего там нет. */

/* добавки к общим компонентам кабинета */
.btn--sm{padding:7px 11px;font-size:12.5px}
.pill--off{color:var(--muted);background:var(--raise);border-color:var(--line)}.pill--off .dot{background:var(--line-2)}
.txtable tr.row:hover td{background:var(--raise);cursor:pointer}
.txtable .nm{font-weight:600;color:var(--ink)}
.txtable .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.txtable .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
/* редактор и каталог интеграций шире 1040px кабинета; без :has() раскладка просто схлопывается в одну колонку */
.main:has(>#view-notify:not(.hidden)){max-width:1180px}

.nf-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.nf-tab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.nf-tab:hover{color:var(--ink)}.nf-tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.nf-tab .cnt{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:6px}
.nf-view[hidden]{display:none!important}
.nf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.nf-head>div{min-width:0}
.nf-head h1{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.nf-head p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.nf-sec{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);margin:0 0 12px}
.nf-hint{font-size:12.5px;color:var(--muted)}
.nf-help{font-size:12px;color:var(--muted);margin-top:5px}
.nf-err{color:var(--err);font-size:12px;margin-top:5px}
.nf-field{margin-bottom:12px}.nf-field:last-child{margin-bottom:0}
.nf-field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.nf-field input[type=text],.nf-field input[type=password],.nf-field select,.nf-field textarea{width:100%;max-width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:14px;font-family:var(--sans);background:var(--raise);color:var(--ink)}
.nf-field input:focus,.nf-field select:focus,.nf-field textarea:focus{outline:none;border-color:var(--accent-line);background:#fff;box-shadow:var(--focus)}
.nf-field textarea{min-height:150px;resize:vertical;line-height:1.5}
.nf-field.bad input,.nf-field.bad select,.nf-field.bad textarea{border-color:var(--err)}
.nf-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.nf-row3{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;align-items:end}
.nf-row2>*,.nf-row3>*,.nf-cond>*,.nf-btnrow>*,.nf-cas>*{min-width:0}
.nf-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.nf-seg button{background:none;border:none;padding:9px 13px;font-size:13px;font-weight:500;color:var(--ink-2);border-right:1px solid var(--line-2);cursor:pointer}
.nf-seg button:last-child{border-right:none}.nf-seg button.on{background:var(--ink);color:#fff;font-weight:600}.nf-seg button:disabled{opacity:.5;cursor:default}
.nf-vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nf-var{font-family:var(--mono);font-size:11.5px;padding:3px 8px;border:1px solid var(--line-2);border-radius:100px;background:var(--surface);color:var(--ink);cursor:pointer}
.nf-var:hover{border-color:var(--accent-line);background:var(--accent-wash)}
.nf-cond{display:grid;grid-template-columns:1.2fr .8fr 1.2fr auto;gap:8px;align-items:center;margin-bottom:8px}
.nf-cond select,.nf-cond input[type=text]{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:13.5px;font-family:var(--sans);background:var(--raise);color:var(--ink)}
.nf-cond select:focus,.nf-cond input:focus{outline:none;border-color:var(--accent-line);background:#fff;box-shadow:var(--focus)}
.nf-x{background:none;border:1px solid var(--line-2);border-radius:var(--r-xs);color:var(--muted);width:34px;height:38px;cursor:pointer}
.nf-x:hover{color:var(--err);border-color:var(--err)}
.nf-add{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:1px;margin-top:4px;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;font-family:inherit}
.nf-add:hover{border-color:var(--ink)}
.nf-cascade{display:flex;flex-direction:column;gap:8px}
.nf-cas{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--raise)}
.nf-cas.off{opacity:.55;background:var(--surface)}
.nf-cas .cname{font-weight:600;color:var(--ink);font-size:13.5px}.nf-cas .cst{font-size:12px;color:var(--muted)}
.nf-cas .nf-seg button{padding:6px 10px;font-size:12px}
.nf-mv{display:inline-flex;flex-direction:column;gap:2px}.nf-mv button{background:none;border:1px solid var(--line-2);border-radius:4px;width:24px;height:18px;font-size:10px;line-height:1;color:var(--ink-2);cursor:pointer;padding:0}
.nf-mv button:disabled{opacity:.4;cursor:default}
.nf-btnrow{display:grid;grid-template-columns:1fr 1.2fr 1fr 1.2fr auto;gap:8px;align-items:center;margin-bottom:8px}
.nf-btnrow input[type=text],.nf-btnrow select{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:13.5px;font-family:var(--sans);background:var(--raise);color:var(--ink)}
.nf-btnrow input:focus,.nf-btnrow select:focus{outline:none;border-color:var(--accent-line);background:#fff;box-shadow:var(--focus)}
/* параметр действия из двух списков (воронка и этап у amoCRM) держим в одной ячейке строки кнопки,
   иначе шестой элемент переносится на новую строку сетки */
.nf-bparam{display:grid;grid-template-columns:1fr 1fr;gap:6px}.nf-bparam>*{min-width:0}
.nf-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding-top:6px;flex-wrap:wrap}
.nf-actions .unsaved{margin-right:auto;font-size:12.5px;color:var(--warn)}
.nf-edgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
.nf-edgrid>*,.nf-edcol>*{min-width:0}.nf-edcol{display:flex;flex-direction:column;gap:14px}
.nf-chk{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px}.nf-chk label{display:inline-flex;gap:6px;align-items:center;font-weight:500;color:var(--ink-2)}
.nf-ch{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;font-family:var(--display);flex:none}
.nf-ch--tg{background:#229ED9}.nf-ch--wa{background:#25D366}.nf-ch--sms{background:#5b574c}.nf-ch--max{background:#7b3fe4}.nf-ch--uon{background:#0b6bcb}.nf-ch--amo{background:#3d7be6}.nf-ch--b24{background:#2fc7f7}.nf-ch--yc{background:#17a37a}
.nf-ch--fb{opacity:.45}.nf-chs{display:inline-flex;align-items:center;gap:4px}.nf-chs .arr{color:var(--line-2);font-size:11px}
.nf-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.nf-stat>*{min-width:0}
.nf-stat .card{padding:14px 16px}.nf-stat .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.nf-stat .big{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums}
.nf-stat .sm{font-size:12.5px;color:var(--muted);margin-top:2px}
.nf-preview{position:sticky;top:20px}
.nf-phone{background:#101010;border-radius:28px;padding:12px;box-shadow:0 30px 60px -36px rgba(27,26,20,.6)}
.nf-phone .scr{background:#dfe9f2;border-radius:18px;min-height:420px;padding:14px 12px 16px;position:relative;overflow:hidden}
.nf-phone .scr.sms{background:#f2f2f7}
.nf-phone .top{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.7);margin:-14px -12px 12px;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.06)}
.nf-phone .top .av{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--display)}
.nf-phone .top b{font-size:13px;color:var(--ink);display:block;line-height:1.2}.nf-phone .top span{font-size:11px;color:var(--muted)}
.nf-bub{background:#fff;border-radius:12px;border-top-left-radius:3px;padding:10px 12px;font-size:13.5px;line-height:1.5;color:#1b1a14;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.06);white-space:pre-wrap;overflow-wrap:anywhere}
.nf-bub .t{display:block;text-align:right;font-size:10.5px;color:#8a8a8a;margin-top:4px}
.nf-bbtns{display:flex;flex-direction:column;gap:5px;margin-top:6px;max-width:92%}
.nf-bbtn{background:#fff;border-radius:10px;padding:9px;text-align:center;font-size:13.5px;font-weight:600;color:#229ED9;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.nf-pvtabs{display:flex;gap:6px;margin-bottom:10px}
.nf-pvtab{background:var(--surface);border:1px solid var(--line-2);border-radius:100px;padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.nf-pvtab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.nf-pvnote{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5}.nf-pvnote b{color:var(--ink-2);font-weight:600}
.nf-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:center;padding:26px 28px;background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:18px}
.nf-hero>*{min-width:0}
.nf-hero h2{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.nf-hero p{margin:10px 0 0;font-size:14.5px;color:var(--ink-2);max-width:56ch}
.nf-hero .cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center}.nf-hero .cta .hint{font-size:12.5px;color:var(--muted)}
.nf-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center}
.nf-flow .fb{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-width:0}
.nf-flow .fb .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.nf-flow .fb .v{font-weight:600;color:var(--ink);font-size:13px;margin-top:3px;line-height:1.35}.nf-flow .fb .s{font-size:12px;color:var(--muted);margin-top:4px}
.nf-flow .fa{color:var(--line-2);font-size:18px}
.nf-flow .back{grid-column:1/-1;text-align:center;font-size:12px;color:var(--muted);border-top:1px dashed var(--line-2);padding-top:8px;margin-top:2px}
.nf-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.nf-benefits>*{min-width:0}
.nf-benefits .card{padding:16px 18px}.nf-benefits h3{font-family:var(--display);font-weight:700;font-size:14.5px;margin-bottom:6px}
.nf-benefits p{margin:0;font-size:13px;color:var(--ink-2)}.nf-benefits .ex{margin-top:8px;font-size:12.5px;color:var(--muted);border-left:2px solid var(--accent);padding-left:8px}
.nf-step{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.nf-step:last-child{border-bottom:none}
.nf-step .n{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink-2)}
.nf-step.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.nf-step h3{font-size:14.5px;font-weight:600;margin-bottom:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nf-step p{margin:0;font-size:13px;color:var(--muted)}
.nf-svc{display:inline-flex;gap:3px}.nf-svc .nf-ch,.nf-svc .nf-mark{width:20px;height:20px;font-size:8px;border-radius:5px}
.nf-tpls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.nf-tpls>*{min-width:0}
.nf-tpl{padding:14px 16px;display:flex;flex-direction:column;gap:6px}.nf-tpl h3{font-size:14px;font-weight:600}.nf-tpl p{margin:0;font-size:12.5px;color:var(--ink-2)}
.nf-tpl .meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.nf-intg{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}.nf-intg>*{min-width:0}
.nf-il-group{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:12px 14px 6px}
.nf-il{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--line);padding:11px 14px;font-size:13.5px;color:var(--ink-2);cursor:pointer;font-family:inherit}
.nf-il:hover{background:var(--raise)}.nf-il.on{background:var(--accent-wash);color:var(--ink)}
.nf-il .nm{font-weight:600;color:var(--ink)}.nf-il .sb{display:block;font-size:12px;color:var(--muted);font-weight:400}
.nf-mark{width:28px;height:28px;border-radius:8px;display:inline-grid;place-items:center;font-size:11px;font-weight:700;color:#fff;font-family:var(--display);flex:none}
.nf-panel{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.nf-panel .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nf-panel .hd .nm{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink)}
.nf-panel p{margin:0;font-size:13.5px;color:var(--ink-2)}
.nf-panel .kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-top:1px solid var(--line);padding-top:8px}
.nf-panel .kv .k{color:var(--muted)}.nf-panel .kv .v{font-weight:600;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.nf-panel .bts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.nf-panel ol{margin:0;padding-left:20px;font-size:13px;color:var(--ink-2)}.nf-panel ol li{margin-bottom:4px}
.nf-warn{background:var(--warn-bg);border:1px solid #ecdcae;border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;color:var(--warn)}
.nf-warn b{color:var(--warn)}
.nf-errbox{background:var(--err-bg);border:1px solid #eecfc9;border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;color:var(--err)}
.nf-errbox b{color:var(--err)}
.nf-okbox{background:var(--ok-bg);border:1px solid #cfe6d8;border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;color:var(--ok)}
.nf-soon{font-size:13px;color:var(--muted)}
.nf-filters{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1.3fr auto;gap:8px;margin-bottom:14px}.nf-filters>*{min-width:0}
.nf-filters select,.nf-filters input{width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:13.5px;font-family:var(--sans);background:var(--raise);color:var(--ink)}
.nf-filters select:focus,.nf-filters input:focus{outline:none;border-color:var(--accent-line);background:#fff;box-shadow:var(--focus)}
.nf-steps{display:flex;flex-direction:column;gap:4px;font-size:12.5px}.nf-steps .st{display:flex;gap:8px;align-items:center}.nf-steps .st .nf-ch{width:18px;height:18px;font-size:9px;border-radius:5px}
.nf-code{font-family:var(--mono);background:var(--raise);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-size:13px;color:var(--ink);overflow-wrap:anywhere;letter-spacing:.02em}
.nf-modal-body{max-height:70vh;overflow:auto}
@media(max-width:1000px){.nf-edgrid,.nf-hero,.nf-intg{grid-template-columns:1fr}.nf-preview{position:static}.nf-stat,.nf-benefits{grid-template-columns:1fr 1fr}.nf-filters{grid-template-columns:1fr 1fr}.nf-tpls{grid-template-columns:1fr}}
@media(max-width:820px){.nf-row2,.nf-row3,.nf-cond,.nf-btnrow,.nf-benefits,.nf-stat,.nf-bparam{grid-template-columns:1fr}.nf-cas{grid-template-columns:auto 1fr auto}.nf-cas .cst{display:none}.nf-flow{grid-template-columns:1fr}.nf-flow .fa{display:none}.nf-step{grid-template-columns:auto 1fr}.nf-head h1{font-size:22px}}
@media(max-width:560px){.nf-filters{grid-template-columns:1fr}.nf-tabs{margin-left:-16px;margin-right:-16px;padding:0 16px}.nf-panel{padding:16px}.nf-hero{padding:18px 16px}}