/* A5 CRM — css/marketing.css  (screens/marketing.js, route #/marketing «Рассылки»)
   The owner kept «Таблица» (2026-10-21; the three-look version: scratchpad mk/marketing.css.bak-3looks). Blocks: status
   marks, the list (tabs, figures, table), a campaign's page (funnel, the recipients table with the replies that wait for us
   first, the aside: «Сообщение» with button presses, errors, details), «Новая рассылка» (sections + WhatsApp preview + cost), the templates drawer.
   Tokens only (base.css), light + dark; calm rules of DESIGN-CALM: grey selection, accent on the primary button, links,
   checks and chart bars only. */

html[data-route="marketing"] .main > :is(.top,.phead) > .wrap{max-width:none}
#title .mk-mock{align-self:center;margin-left:4px}

/* ── page actions ── */
.mk-pa{display:flex;align-items:center;gap:8px}

/* ── the section ── */
.mk{min-height:0;overflow:auto;padding:0 var(--page-pad) 48px}
.mk b{font-weight:600;color:var(--text-strong)}
.mk small{font:var(--t-caption);color:var(--text-3)}
.mk-help{margin:8px 0 0;font:var(--t-caption);color:var(--text-2);display:flex;gap:6px;align-items:flex-start}
.mk-help .ic{flex:none;margin-top:2px;color:var(--icon)}
.mk-link{display:inline;padding:0;font:inherit;color:var(--link);text-decoration:underline;text-underline-offset:2px}
.mk-link:hover{color:var(--link-hover)}
.mk-help:has(.mk-link){display:block}
.mk-lbl{display:block;margin-bottom:6px;font:var(--t-caption-strong);color:var(--text-2)}
.mk-none{padding:32px 0;text-align:center;font:var(--t-body);color:var(--text-3)}
.mk-dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-4);flex:none}
.mk code{font:var(--t-mono);font-size:11px;color:var(--text-3)}
.mk-sp{flex:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* status marks: a small dot + the word (DESIGN-CALM §3.7) */
.mk-sm{display:inline-flex;align-items:center;gap:6px;font:var(--t-body-medium);color:var(--text-strong);white-space:nowrap}
.mk-sm::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,var(--dot-neutral))}
.mk-sm.sent{--c:var(--dot-green)}
.mk-sm.sending{--c:var(--dot-sky)}
.mk-sm.sending::before{animation:mk-pulse 1.6s ease-in-out infinite}
.mk-sm.scheduled{--c:var(--dot-purple)}
.mk-sm.draft{--c:var(--dot-neutral)}
.mk-sm.bad{--c:var(--dot-red)}
.mk-sm.paused{--c:var(--dot-orange)}
.mk-sm.stopped{--c:var(--dot-red)}
.mk-sm.cancelled{--c:var(--dot-neutral)}
.mk-tplst{align-items:center;flex-wrap:wrap;margin:12px 0 0}
.mk-tplst .btn{margin-left:4px}
@keyframes mk-pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--dot-sky) 25%,transparent)}}
@media (prefers-reduced-motion: reduce){ .mk-sm.sending::before{animation:none} }
.mk-ts{display:inline-flex;align-items:center;gap:5px;font:var(--t-caption-strong);white-space:nowrap;color:var(--text-2)}
.mk-ts::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot-neutral)}
.mk-ts.ok::before{background:var(--dot-green)} .mk-ts.wait::before{background:var(--dot-orange)} .mk-ts.bad{color:var(--danger)} .mk-ts.bad::before{background:var(--dot-red)}
.mk-tc{display:inline-flex;align-items:center;height:16px;padding:0 4px;margin-left:2px;border-radius:var(--radius-xs);background:var(--badge-neutral-bg);color:var(--badge-neutral-text);font:600 10px/16px var(--font-sans);letter-spacing:.02em;vertical-align:1px}
.mk-wait{color:var(--accent-text);font-weight:600}
.mk-est{color:var(--text-3)}

/* the stacked bar of a campaign's recipients (sending rows, the «Идёт» line) */
.mk-sb{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--surface-offset);box-shadow:inset 0 0 0 1px var(--border-soft)}
.mk-sb i{display:block;height:100%}
.mk-sb .rep{background:var(--accent)}
.mk-sb .rd{background:color-mix(in srgb,var(--accent) 40%,var(--surface))}
.mk-sb .dl{background:var(--dot-neutral)}
.mk-sb .sn{background:color-mix(in srgb,var(--dot-neutral) 45%,var(--surface))}
.mk-sb .fl{background:var(--dot-red)}

/* underline tabs inside the page (status tabs, recipient filters) */
.mk .tabs .tab{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0;flex:none}
.mk .tabs .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:var(--tab-ink)}
.mk .tabs .tab .n{margin-left:0;font-variant-numeric:tabular-nums}

/* ── the list: status tabs + figures + the table ── */
.mk-tb{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.mk-tb .tabs{flex:1;min-width:0;gap:24px;overflow-x:auto;scrollbar-width:none}
.mk-tb > .btn .n{font-weight:400;color:var(--text-3)}
.mk-kpi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:28px;border:1px solid var(--border-soft);border-radius:var(--radius-l)}
.mk-kpi > div{display:grid;gap:2px;padding:14px 18px;min-width:0}
.mk-kpi > div + div{border-left:1px solid var(--border-soft)}
.mk-kpi .l{font:var(--t-caption-strong);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-kpi .v{font:var(--t-metric);color:var(--text-strong);font-variant-numeric:tabular-nums}
.mk-kpi small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container view (max-width: 1100px){ .mk-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} .mk-kpi > div:nth-child(4){border-left:0} .mk-kpi > div:nth-child(n+4){border-top:1px solid var(--border-soft)} }

.mk-t{width:100%;border-collapse:collapse;font:var(--t-body)}
.mk-t th{height:36px;padding:0 12px;border-bottom:1px solid var(--border);text-align:left;font:var(--t-caption-strong);color:var(--text-2);white-space:nowrap}
.mk-t th:first-child,.mk-t td:first-child{padding-left:0}
.mk-t td{height:64px;padding:8px 12px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.mk-t td > b,.mk-t td > small{display:block}
.mk-t td.nm b{font:var(--t-body-medium);color:var(--text-strong)}
.mk-t td.nm small{margin-top:2px}
.mk-t td.stc{width:210px}
.mk-t td.stc small{display:block;margin-top:2px}
.mk-t td.stc .mk-sb{margin-top:6px;max-width:160px}
.mk-t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-t td.num b{font-weight:500}
.mk-t th.act,.mk-t td.act{width:40px;padding-right:0;text-align:right}
.mk-t td.act .btn{opacity:0;transition:opacity var(--dur-1)}
.mk-t tr.r{cursor:pointer}
.mk-t tr.r:hover td{background:var(--surface-hover)}
.mk-t tr.r:hover td.act .btn,.mk-t tr.r:focus-within td.act .btn,.mk-t td.act .btn[aria-expanded="true"]{opacity:1}
.mk-t tr.r:focus-visible{outline:none}
.mk-t tr.r:focus-visible td{box-shadow:inset 0 1px 0 var(--focus-color),inset 0 -1px 0 var(--focus-color)}
@container view (max-width: 1180px){ .mk-t th:nth-child(5),.mk-t td:nth-child(5),.mk-t th:nth-child(8),.mk-t td:nth-child(8){display:none} }

/* ── a campaign's page: head line, funnel ── */
.mk-rh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:20px;font:var(--t-body);color:var(--text-2)}
.mk-rh > span{display:inline-flex;align-items:center;gap:6px}
.mk-rh .ic{color:var(--icon)}
.mk-fun{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:16px;border:1px solid var(--border-soft);border-radius:var(--radius-l)}
.mk-fc{position:relative;display:grid;gap:6px;padding:16px 20px 18px;min-width:0}
.mk-fc + .mk-fc{border-left:1px solid var(--border-soft)}
.mk-fc .l{font:var(--t-caption-strong);color:var(--text-2)}
.mk-fc .v{display:flex;align-items:baseline;gap:8px;min-width:0}
.mk-fc .v b{font:var(--t-metric);color:var(--text-strong);font-variant-numeric:tabular-nums}
.mk-fc .v small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-fc .bar{height:4px;border-radius:2px;background:var(--surface-offset);overflow:hidden}
.mk-fc .bar i{display:block;height:100%;background:var(--accent);border-radius:2px}
.mk-fa{position:absolute;right:-7px;top:50%;z-index:1;width:12px;height:12px;margin-top:-6px;padding:1px;border-radius:50%;background:var(--bg);color:var(--text-4)}
.mk-going,.mk-plan{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:12px 16px;border-radius:var(--radius-l);background:var(--surface-offset);font:var(--t-body);color:var(--text)}
.mk-going .mk-sb{width:160px;flex:none}
.mk-going > span{flex:1;min-width:0}
.mk-plan > .ic{flex:none;color:var(--icon)}
.mk-plan > span{flex:1;min-width:0;display:grid;color:var(--text-2)}
.mk-plan > span b{font:var(--t-body-strong)}
.mk-plan.bad{background:var(--banner-critical-bg);box-shadow:inset 0 0 0 1px var(--banner-critical-border)}
.mk-plan.bad > .ic{color:var(--danger)}

.mk-split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start;margin-top:8px}
.mk-aside{position:sticky;top:0;display:grid;gap:16px;min-width:0}
@container view (max-width: 1080px){ .mk-split{grid-template-columns:minmax(0,1fr)} .mk-aside{position:static} }

/* section heads inside the main column */
.mk-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:12px}
.mk-sh h3{margin:0;font:var(--t-heading-s);color:var(--text-strong)}
.mk-sh .n{font:var(--t-body);color:var(--text-3);font-variant-numeric:tabular-nums}

.mk-av.cl-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--font-sans);background:var(--av-bg,var(--surface-pressed));color:var(--av-text,var(--text-strong))}
.mk-av.cl-av.sm{width:26px;height:26px;font-size:10px}

/* everyone, one compact line each */
.mk-rhd{display:flex;align-items:center;gap:16px;margin-bottom:2px}
.mk-rhd .tabs{flex:1;min-width:0}
.mk-rt{gap:20px;overflow-x:auto;scrollbar-width:none}
.mk-rt::-webkit-scrollbar{display:none}
.mk-q{flex:none;display:flex;align-items:center;gap:6px;width:220px;height:var(--control-h);padding:0 8px;border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px var(--control-border);color:var(--text-3)}
.mk-q:focus-within{box-shadow:inset 0 0 0 1px var(--focus-color)}
.mk-q .ic{width:12px;height:12px;stroke-width:2.4;flex:none}
.mk-q input{flex:1;min-width:0;border:0;outline:0;background:none;font:var(--t-body);color:var(--text-strong)}
.mk-q input::placeholder{color:var(--text-4)}
.mk-q input:focus-visible{box-shadow:none}   /* the label draws the one focus line; the global :focus-visible ring made a second box inside it */
/* the recipients table (owner's pick «Таблица»): who waits for us first, pastel tags, no fills, no frames */
.mk-err{color:var(--danger);font:var(--t-caption)}
.mk-err code{color:var(--text-3)}
.mk-rows .w{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mk-rows .ic{display:inline-block;margin-right:4px;vertical-align:-1px;color:var(--icon)}
.mk-rows .badge{flex:none}
.mk-rows .act{display:flex;justify-content:flex-end}
.mk-hov{opacity:0;transition:opacity var(--dur-1)}
.mk-rt-r:hover .mk-hov,.mk-hov:focus-visible{opacity:1}

/* column heads, pastel status tags; who waits = an amber «Ждёт ответа» tag */
.mk-th,.mk-rt-r{display:grid;grid-template-columns:minmax(180px,1.1fr) 130px minmax(0,1.8fr) 120px 112px;gap:16px;align-items:center}
.mk-th{height:36px;border-bottom:1px solid var(--border);font:var(--t-caption-strong);color:var(--text-2)}
.mk-rt-r{min-height:52px;padding:6px 0;border-bottom:1px solid var(--border-soft);font:var(--t-body)}
.mk-rt-r .who{display:grid;min-width:0}
.mk-rt-r .who b{font:var(--t-body-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-rt-r .tx{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;color:var(--text)}
.mk-rt-r .tm{font:var(--t-caption);color:var(--text-3);white-space:nowrap}
.mk-rt-r.unread .who b{font-weight:600}

@container view (max-width: 1240px){
  .mk-q{width:170px}
  .mk-th,.mk-rt-r{grid-template-columns:minmax(130px,1fr) 120px minmax(0,1.4fr) 104px} .mk-th > :nth-child(4),.mk-rt-r .tm{display:none}
}

/* ── aside cards ── */
.mk-card-s{padding:16px;border:1px solid var(--border-soft);border-radius:var(--radius-l);background:var(--surface);min-width:0}
.mk-cs-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;min-height:28px}
.mk-cs-h h4{margin:0;flex:1;font:var(--t-body-strong);color:var(--text-strong)}
.mk-cs-n{font:var(--t-caption-strong);color:var(--text-3);font-variant-numeric:tabular-nums}
.mk-cs-f{display:flex;align-items:center;gap:8px;margin:12px 0 0;font:var(--t-caption);color:var(--text-3)}
.mk-kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;font:var(--t-body);color:var(--text-2)}
.mk-kv + .mk-kv{border-top:1px solid var(--border-soft)}
.mk-kv b{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-kv.tot b{font-weight:600}
.mk-why{display:flex;gap:6px;align-items:flex-start;margin:10px 0 0;font:var(--t-caption);color:var(--danger)}
.mk-why .ic{flex:none;margin-top:2px}
.mk-pl{gap:4px}
.mk-pl > button{height:24px;padding:0 6px;font:var(--t-caption-strong);gap:4px}
.mk-pl > button[disabled]{opacity:.45;pointer-events:none}

.mk-more{justify-self:start;padding:0;font:var(--t-body-medium);color:var(--link)}
.mk-more:hover{color:var(--link-hover)}
.mk-more:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.mk-var{padding:0 2px;border-radius:3px;background:var(--accent-bg);color:var(--accent-soft-text)}
.mk-bh{border-radius:7px}
.mk-bh.img{height:120px;display:grid;place-content:center;justify-items:center;gap:6px;background:var(--surface-pressed);color:var(--text-2);font:var(--t-caption)}
.mk-bh.img .ic{width:22px;height:22px;stroke-width:1.6;color:var(--icon)}
.mk-bh.doc{display:flex;align-items:center;gap:8px;padding:10px;background:var(--surface-offset);font:var(--t-caption-strong);color:var(--text-strong)}
.mk-bh.doc .ic{flex:none;color:var(--danger)}
.mk-bh.doc .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fold{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}

/* «Сообщение»: the text, button presses, replies per language */
.mk-msg{display:grid}
.mk-msg .mk-bh{margin-bottom:10px}
.mk-st-txt{font:var(--t-body);color:var(--text-strong);overflow-wrap:anywhere}
.mk-msg .mk-more{margin-top:4px}
.mk-st-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft)}
.mk-st-b{display:grid;grid-template-columns:minmax(0,1fr) 90px 28px;align-items:center;gap:10px;min-height:30px}
.mk-st-b .b{display:inline-flex;align-items:center;gap:6px;min-width:0;font:var(--t-body-medium);color:var(--accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-st-b .bar{height:4px;border-radius:2px;background:var(--surface-offset);overflow:hidden}
.mk-st-b .bar i{display:block;height:100%;background:var(--accent)}
.mk-st-b b{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}

/* the WhatsApp preview of «Новая рассылка» and the templates drawer */
.mk-ph{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.mk-ph-top{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;border-bottom:1px solid var(--border-soft)}
.mk-ph-av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--brand-logo);color:#fff;font:700 11px/1 var(--font-sans)}
.mk-ph-n{display:grid;line-height:1.2}
.mk-ph-n b{font:var(--t-body-strong)}
.mk-ph-chat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 12px 18px;background:var(--surface-offset);min-height:200px}
.mk-ph.compact .mk-ph-chat{min-height:0}
.mk-ph-empty{align-items:center;justify-content:center;font:var(--t-body);color:var(--text-3)}
.mk-bub{width:100%;max-width:310px;border-radius:4px 10px 10px 10px;background:var(--surface);box-shadow:0 0 0 1px var(--border-soft),0 1px 1px rgba(0,0,0,.04);overflow:hidden}
.mk-bub .mk-bh{margin:4px 4px 0}
.mk-bt{padding:8px 10px 2px;font:var(--t-body);color:var(--text-strong);overflow-wrap:anywhere}
.mk-bf{display:flex;justify-content:space-between;gap:8px;padding:4px 10px 6px;font:var(--t-caption);color:var(--text-3)}
.mk-bb{width:100%;max-width:310px;height:34px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;background:var(--surface);box-shadow:0 0 0 1px var(--border-soft);color:var(--accent-text);font:var(--t-body-medium)}
.mk-bb .ic{color:var(--accent-text)}
.mk-who{display:flex;align-items:center;gap:4px;margin:-4px 0 10px}
.mk-who > span{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:8px;font:var(--t-body-medium);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── «Новая рассылка»: sections ── */
.mk-name{display:block;margin-bottom:16px}
.mk-name input,.mk-fb input,.mk-at,.mk-pace select{height:36px;padding:0 10px;border:0;border-radius:var(--radius-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--control-border);font:var(--t-body);color:var(--text-strong);outline:0}
.mk-name input{width:100%;font:var(--t-lead)}
.mk-name input:focus,.mk-fb input:focus,.mk-at:focus,.mk-pace select:focus{box-shadow:inset 0 0 0 1px var(--focus-color)}
.mk-name input::placeholder{color:var(--text-4)}
.mk-sec{margin-bottom:16px;padding:20px 24px 22px;border:1px solid var(--border-soft);border-radius:var(--radius-l);background:var(--surface)}
.mk-sec > header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.mk-sec h3{margin:0;font:var(--t-heading-s);color:var(--text-strong)}
.mk-sum{margin-left:auto;font:var(--t-body);color:var(--text-2)}
.mk-n{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-pressed);font:var(--t-caption-strong);color:var(--text-strong)}
.mk-segs{display:grid;gap:6px}
.mk-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:8px 14px;border-radius:var(--radius-m);box-shadow:inset 0 0 0 1px var(--border-soft);cursor:pointer;transition:background var(--dur-1),box-shadow var(--dur-1)}
.mk-opt:hover{background:var(--surface-hover)}
.mk-opt.on{background:var(--row-selected);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mk-opt input{margin:0;accent-color:var(--accent)}
.mk-opt .t{display:grid;min-width:0}
.mk-opt .t b{font:var(--t-body-medium)}
.mk-opt .n{font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums}
.mk-excl{margin-top:18px}
.mk-chk{display:flex;align-items:center;gap:10px;min-height:30px;font:var(--t-body);color:var(--text);cursor:pointer}
.mk-chk input{margin:0;accent-color:var(--accent)}
.mk-chk > span:first-of-type{flex:1;min-width:0}
.mk-chk .n{color:var(--text-3);font-variant-numeric:tabular-nums}
.mk-chk:has(input[disabled]){cursor:default;color:var(--text-2)}
.mk-langs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);font:var(--t-body);color:var(--text-2)}
.mk-langs .mk-lbl{margin:0}
.mk-tpls{display:grid;gap:8px;margin-top:14px}
/* what goes into each {{n}} of the template: a text for everyone or the contact's name */
.mk-vars{display:grid;gap:8px;margin-top:16px}
.mk-vr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(180px,300px);gap:12px;align-items:center;min-height:40px}
.mk-vr .k{display:flex;align-items:baseline;gap:8px;min-width:0}
.mk-vr .k mark{flex:none}
.mk-vr .k small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-vm{gap:4px}
.mk-vm > button{height:26px;padding:0 8px;font:var(--t-caption-strong)}
.mk-vr input{height:34px;padding:0 10px;border:0;border-radius:var(--radius-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--control-border);font:var(--t-body);color:var(--text-strong);outline:0;min-width:0}
.mk-vr input:focus{box-shadow:inset 0 0 0 1px var(--focus-color)}
.mk-vr input::placeholder{color:var(--text-4)}
/* «Из карточки»: the field of each recipient's card */
.mk-vr select{height:34px;padding:0 28px 0 10px;border:0;border-radius:var(--radius-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--control-border);font:var(--t-body);color:var(--text-strong);outline:0;min-width:0;text-overflow:ellipsis}
.mk-vr select:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}
.mk-vname{font:var(--t-caption);color:var(--text-3)}
@container view (max-width: 1240px){ .mk-vr{grid-template-columns:minmax(0,1fr) auto} .mk-vr input,.mk-vr select,.mk-vname{grid-column:1 / -1} }
.mk-fb{display:block;margin-top:16px}
.mk-fb input{width:220px}
/* «Когда»: rows «Начать» / «Часы» / «Темп», a label column on the left */
.mk-wr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:40px;margin-bottom:6px;font:var(--t-body);color:var(--text)}
.mk-wl{flex:none;width:64px;color:var(--text-2)}
.mk-wh{font:var(--t-caption);color:var(--text-3)}
.mk-chk-in{min-height:0}
.mk-hrs{display:inline-flex;align-items:center;gap:8px}
.mk-hrs.off{opacity:.5}
.mk-wr select{height:30px;padding:0 6px;border:0;border-radius:var(--radius-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--control-border);font:var(--t-body);color:var(--text-strong);outline:0}
.mk-wr select:focus{box-shadow:inset 0 0 0 1px var(--focus-color)}
.mk-langs .seg{gap:4px}
.mk-langs .seg > button{height:28px;padding:0 10px;font:var(--t-caption-strong);gap:6px}
.mk-langs .seg .n{font-weight:400;color:var(--text-3)}
.mk-whenrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.mk-pace{display:flex;align-items:center;gap:10px;margin-bottom:8px;font:var(--t-body);color:var(--text)}
.mk-pace > span:first-child{width:44px;color:var(--text-2)}
.mk-pace select{height:30px;padding:0 6px}
.mk-cost .mk-kv.tot b{font:var(--t-heading-s)}

/* templates drawer */
.mk-tpl-l{display:grid;gap:20px}
.mk-tpl-i{display:grid;gap:10px}
.mk-tpl-h{display:flex;align-items:flex-start;gap:12px}
.mk-tpl-h .t{flex:1;display:grid}
.mk-tpl-h .t b{font:var(--t-body-strong);color:var(--text-strong)}
.mk-tpl-h .t small{font:var(--t-caption);color:var(--text-3)}

/* ── «Новая рассылка», 2026-10-22 (the owner: «сделай эту страницу чуть покрасивее, добавив красивых анимаций»): sections rise
   in on open, a finished step draws its check, segment cards in two columns, one bar of who gets it and who is left out,
   toggles with a sliding thumb, a day track of the sending span, a WhatsApp phone that «печатает…» before the message
   arrives, the cost big with a forecast. Moves are carried over the page's redraws by screens/marketing.js (motionPlay). ── */
.mk-new{--mk-slow:560ms;--mk-thumb:var(--surface)}
:root[data-theme="dark"] .mk-new{--mk-thumb:var(--surface-pressed)}
@keyframes mk-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mk-fade{from{opacity:0}to{opacity:1}}
.mk-enter .mk-main > *,.mk-enter .mk-aside > *{animation:mk-up 560ms var(--ease-out) both}
.mk-enter .mk-main > :nth-child(2){animation-delay:60ms}
.mk-enter .mk-main > :nth-child(3){animation-delay:120ms}
.mk-enter .mk-main > :nth-child(4){animation-delay:180ms}
.mk-enter .mk-aside > :nth-child(1){animation-delay:90ms}
.mk-enter .mk-aside > :nth-child(2){animation-delay:200ms}

/* the name reads as the page's own title; a box only on hover and focus */
.mk-new .mk-name{margin-bottom:18px}
.mk-new .mk-name input{height:44px;width:calc(100% + 12px);margin-left:-12px;padding:0 12px;background:transparent;box-shadow:none;font:600 22px/1.3 var(--font-sans);letter-spacing:-.01em;transition:background var(--dur-2),box-shadow var(--dur-2)}
.mk-new .mk-name input:hover{background:var(--surface-hover)}
.mk-new .mk-name input:focus{background:var(--surface);box-shadow:inset 0 0 0 1px var(--focus-color)}

/* sections: the one being filled lifts a little; the step number becomes a check */
.mk-new .mk-sec{transition:box-shadow var(--dur-4) var(--ease-out),border-color var(--dur-4)}
.mk-new .mk-sec:focus-within{border-color:var(--border);box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 20px rgba(0,0,0,.04)}
.mk-new .mk-n{transition:background var(--dur-4),color var(--dur-4)}
.mk-n.done{background:var(--accent);color:var(--on-accent)}
.mk-n svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-n.pop{animation:mk-pop 440ms var(--ease-spring)}
.mk-n.pop path{stroke-dasharray:20;animation:mk-draw 380ms var(--ease-out) 140ms both}
@keyframes mk-pop{from{transform:scale(.5)}to{transform:none}}
@keyframes mk-draw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
.mk-sum .mk-num{font-variant-numeric:tabular-nums}

/* «Кому»: the segments as two columns of cards */
.mk-new .mk-segs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mk-new .mk-opt{align-items:start;min-height:66px;padding:12px 14px;transition:background var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2) var(--ease-out)}
.mk-new .mk-opt input{margin-top:2px}
.mk-new .mk-opt .t small{line-height:16px;margin-top:2px}
.mk-new .mk-opt:hover{box-shadow:inset 0 0 0 1px var(--border)}
.mk-new .mk-opt.on{box-shadow:inset 0 0 0 1px var(--border-strong)}
.mk-new .mk-opt:active{transform:scale(.99)}
.mk-new .mk-opt.mk-pulse{animation:mk-pick 420ms var(--ease-out)}
@keyframes mk-pick{0%{transform:scale(.98);box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 5px color-mix(in srgb,var(--text-strong) 7%,transparent)}100%{transform:none;box-shadow:inset 0 0 0 1px var(--border-strong),0 0 0 0 transparent}}
@container view (max-width: 760px){ .mk-new .mk-segs{grid-template-columns:minmax(0,1fr)} }

/* who gets it: one bar of the segment, the parts left out greyed by reason; the rows below carry the same swatches */
.mk-aud{margin-top:16px;padding:14px 16px;border-radius:var(--radius-m);background:var(--surface-offset)}
.mk-aud-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-bottom:10px;font:var(--t-body);color:var(--text-2)}
.mk-aud-h > b{font:600 26px/1 var(--font-sans);letter-spacing:-.02em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.mk-aud-h .mk-num{font-variant-numeric:tabular-nums}
.mk-aud-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-pressed)}
.mk-aud-bar i{display:block;flex:none;height:100%;margin-right:2px;transition:width var(--mk-slow) var(--ease-out),opacity var(--dur-3)}
.mk-aud-bar i[style*="width:0.00%"]{margin-right:0}
.mk-aud-bar:has(i:hover) i:not(:hover){opacity:.35}
.mk-aud-k{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;font:var(--t-caption);color:var(--text-2)}
.mk-aud-k span{display:inline-flex;align-items:center;gap:6px}
.mk-aud-k b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.sw{display:inline-block;flex:none;width:9px;height:9px;border-radius:2px;transition:opacity var(--dur-3)}
.mk-aud-bar .send,.sw.send{background:var(--accent)}
.mk-aud-bar .cap,.sw.cap{background:color-mix(in srgb,var(--accent) 30%,var(--surface))}
.mk-aud-bar .queued,.sw.queued{background:repeating-linear-gradient(135deg,var(--text-4) 0 2px,var(--dot-neutral) 2px 5px)}
.mk-aud-bar .recent,.sw.recent{background:var(--text-4)}
.mk-aud-bar .wrote,.sw.wrote{background:color-mix(in srgb,var(--text-4) 55%,var(--surface))}
.mk-aud-bar .refused,.sw.refused{background:color-mix(in srgb,var(--dot-orange) 60%,var(--surface))}
.mk-aud-bar .optout,.sw.optout{background:color-mix(in srgb,var(--dot-red) 70%,var(--surface))}
.mk-aud-bar .lang,.sw.lang{background:var(--dot-neutral)}
.mk-aud-bar .nodata,.sw.nodata{background:repeating-linear-gradient(135deg,var(--dot-neutral) 0 2px,transparent 2px 5px)}
.mk-aud-bar .nophone,.sw.nophone{background:color-mix(in srgb,var(--dot-neutral) 50%,var(--surface))}
.mk-new .mk-chk .sw{margin-left:10px}
.mk-new .mk-chk .n{min-width:28px;text-align:right}
.mk-chk:has(input:not(:checked)) .sw{opacity:.2}
.mk-sec:has(.mk-chk[data-k="refused"]:hover) .mk-aud-bar i:not(.refused),
.mk-sec:has(.mk-chk[data-k="queued"]:hover) .mk-aud-bar i:not(.queued),
.mk-sec:has(.mk-chk[data-k="recent"]:hover) .mk-aud-bar i:not(.recent),
.mk-sec:has(.mk-chk[data-k="wrote"]:hover) .mk-aud-bar i:not(.wrote),
.mk-sec:has(.mk-chk[data-k="optout"]:hover) .mk-aud-bar i:not(.optout),
.mk-sec:has(.mk-chk[data-k="nodata"]:hover) .mk-aud-bar i:not(.nodata){opacity:.25}
.mk-new .mk-chk{border-radius:var(--radius-s);margin:0 -8px;padding:0 8px;transition:background var(--dur-2)}
.mk-new .mk-chk:hover{background:var(--surface-hover)}

/* toggles: a track with one thumb that slides to the choice */
:is(.mk-new,.mk-te) .seg[data-thumb]{position:relative;gap:0;padding:2px;border-radius:8px;background:var(--surface-offset);box-shadow:inset 0 0 0 1px var(--border-soft)}
:is(.mk-new,.mk-te) .seg[data-thumb] > button{position:relative;z-index:1;height:28px;padding:0 10px;background:none;box-shadow:none;color:var(--text-2);transition:color var(--dur-3)}
:is(.mk-new,.mk-te) .seg[data-thumb] > button:hover,:is(.mk-new,.mk-te) .seg[data-thumb] > button.on,:is(.mk-new,.mk-te) .seg[data-thumb] > button.on:hover{background:none;box-shadow:none;color:var(--text-strong)}
:is(.mk-new,.mk-te) .seg[data-thumb] > button:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}
:is(.mk-new,.mk-te) .seg[data-thumb] > button[disabled]{opacity:.4}
.mk-new .seg.mk-pl[data-thumb] > button{height:22px;padding:0 8px}
.mk-new .seg.mk-vm[data-thumb] > button{height:26px}
.mk-thumb{position:absolute;left:0;top:2px;bottom:2px;z-index:0;width:0;border-radius:6px;background:var(--mk-thumb);box-shadow:0 0 0 1px var(--border),0 1px 2px rgba(0,0,0,.06);opacity:0;pointer-events:none;transition:transform 380ms var(--ease-spring),width 380ms var(--ease-spring),opacity var(--dur-2)}


/* «Когда»: the day, the sending hours, the span the campaign takes (it flows while it waits to start) and now */
.mk-day{margin:8px 0 14px;padding:12px 14px 8px;border-radius:var(--radius-m);background:var(--surface-offset)}
.mk-day-l{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-bottom:10px;font:var(--t-body);color:var(--text-2)}
.mk-day-l b{font-weight:600;color:var(--text-strong)}
.mk-day-t{position:relative;height:24px;border-radius:6px;background:var(--surface) repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),var(--border-soft) calc(12.5% - 1px) 12.5%);box-shadow:inset 0 0 0 1px var(--border-soft)}
.mk-day-t i{position:absolute;display:block}
.mk-day-t .win{top:0;bottom:0;background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 35%,transparent),inset -1px 0 0 color-mix(in srgb,var(--accent) 35%,transparent);transition:left var(--mk-slow) var(--ease-out),width var(--mk-slow) var(--ease-out)}
.mk-day-t .run{top:5px;bottom:5px;min-width:6px;border-radius:4px;background:linear-gradient(90deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 50%,#fff) 50%,var(--accent) 100%) 0 0 / 200% 100%;animation:mk-flow 2.4s linear infinite;transition:left var(--mk-slow) var(--ease-out),width var(--mk-slow) var(--ease-out)}
@keyframes mk-flow{to{background-position:-200% 0}}
.mk-day-t .now{top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--text-strong)}
.mk-day-t .now::before{content:"";position:absolute;top:-3px;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--text-strong)}
.mk-day-x{position:relative;height:18px;margin-top:4px;font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.mk-day-x span{position:absolute;top:0;transform:translateX(-50%)}
.mk-day-x span:first-child{transform:none}
.mk-day-x span:last-child{transform:translateX(-100%)}

/* the cost, big, and the forecast */
.mk-cost-v{display:flex;align-items:baseline;gap:6px;margin:-4px 0 6px;font:400 20px/1 var(--font-sans);color:var(--text-3)}
.mk-cost-v .mk-num{font:600 34px/1.1 var(--font-sans);letter-spacing:-.02em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.mk-prs .mk-lbl{margin-bottom:8px}
.mk-pr{display:grid;grid-template-columns:84px minmax(0,1fr) 52px;align-items:center;gap:10px;min-height:28px;font:var(--t-body);color:var(--text-2)}
.mk-pr .bar{height:6px;border-radius:3px;background:var(--surface-offset);overflow:hidden}
.mk-pr .bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width var(--mk-slow) var(--ease-out)}
.mk-pr b{text-align:right;font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}

/* «Отправить»: the plane leans on hover and flies while the campaign is being created */
.mk-go .ic{transition:transform var(--dur-4) var(--ease-spring)}
.mk-go:hover .ic{transform:translate(2px,-2px)}
.mk-go .mk-num{font-variant-numeric:tabular-nums}
.mk-busy{pointer-events:none;overflow:hidden;opacity:.85}
.mk-busy .ic{animation:mk-fly 900ms var(--ease-move) infinite}
@keyframes mk-fly{0%{transform:none;opacity:1}45%{transform:translate(12px,-12px);opacity:0}55%{transform:translate(-12px,12px);opacity:0}100%{transform:none;opacity:1}}

/* «Так увидит»: a WhatsApp phone (WhatsApp's own colours, light and dark) */
.mk-pv .mk-who{margin:-2px 0 12px}
.mk-wa{--wa-bg:#EFEAE2;--wa-bar:#FFFFFF;--wa-bub:#FFFFFF;--wa-text:#111B21;--wa-meta:#667781;--wa-btn:#027EB5;--wa-line:rgba(11,20,26,.08);--wa-icon:#54656F;--wa-chip:#FFFFFF;--wa-in:#FFFFFF;--wa-green:#00A884;--wa-sh:0 1px .5px rgba(11,20,26,.13);
  --wa-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23000' stroke-opacity='.055' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 34a11 11 0 1 1 5 8l-7 2 2-6'/%3E%3Cpath d='M72 16l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M128 26h26v17h-26zM128 26l13 10 13-10'/%3E%3Ccircle cx='40' cy='96' r='10'/%3E%3Cpath d='M36 93h.01M44 93h.01M35.5 99.5a6 6 0 0 0 9 0'/%3E%3Cpath d='M96 84v18M87 93h18'/%3E%3Cpath d='M146 92c0-6 9-6 9 0 0 6-9 11-9 11s-9-5-9-11c0-6 9-6 9 0'/%3E%3Cpath d='M22 152l10-12 8 8 12-14'/%3E%3Cpath d='M88 142l12-9 12 9v14H88z'/%3E%3Cpath d='M146 140l10 10M156 140l-10 10'/%3E%3C/svg%3E");
  margin:4px 7px 6px;border-radius:28px;overflow:hidden;background:var(--wa-bg);box-shadow:0 0 0 1px var(--border),0 0 0 6px var(--surface-offset),0 0 0 7px var(--border-soft),0 14px 34px rgba(0,0,0,.08)}
:root[data-theme="dark"] .mk-wa{--wa-bg:#0B141A;--wa-bar:#1F2C34;--wa-bub:#202C33;--wa-text:#E9EDEF;--wa-meta:#8696A0;--wa-btn:#53BDEB;--wa-line:rgba(233,237,239,.08);--wa-icon:#AEBAC1;--wa-chip:#182229;--wa-in:#2A3942;--wa-sh:0 1px .5px rgba(0,0,0,.3);
  --wa-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23fff' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 34a11 11 0 1 1 5 8l-7 2 2-6'/%3E%3Cpath d='M72 16l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M128 26h26v17h-26zM128 26l13 10 13-10'/%3E%3Ccircle cx='40' cy='96' r='10'/%3E%3Cpath d='M36 93h.01M44 93h.01M35.5 99.5a6 6 0 0 0 9 0'/%3E%3Cpath d='M96 84v18M87 93h18'/%3E%3Cpath d='M146 92c0-6 9-6 9 0 0 6-9 11-9 11s-9-5-9-11c0-6 9-6 9 0'/%3E%3Cpath d='M22 152l10-12 8 8 12-14'/%3E%3Cpath d='M88 142l12-9 12 9v14H88z'/%3E%3Cpath d='M146 140l10 10M156 140l-10 10'/%3E%3C/svg%3E");
  box-shadow:0 0 0 1px var(--border),0 0 0 6px var(--surface-offset),0 0 0 7px var(--border-soft),0 14px 34px rgba(0,0,0,.4)}
.mk-wa .wi{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk-wa-sb{display:flex;align-items:center;justify-content:space-between;height:28px;padding:2px 20px 0 24px;background:var(--wa-bar);color:var(--wa-text);font:600 12.5px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.mk-wa-sb b{font-weight:600;color:inherit}
.mk-wa-sb .ws{width:48px;height:11px}
.mk-wa-top{position:relative;z-index:1;display:flex;align-items:center;gap:8px;height:54px;padding:0 14px 0 6px;background:var(--wa-bar);box-shadow:0 1px 0 var(--wa-line)}
.mk-wa-top .bk{width:20px;height:20px;flex:none;color:var(--wa-text);stroke-width:2.2}
.mk-wa-top .mk-ph-av{width:36px;height:36px;font-size:12px}
.mk-wa-n{flex:1;min-width:0;display:grid;line-height:1.25}
.mk-wa-n b{font:600 15px/1.3 var(--font-sans);color:var(--wa-text)}
.mk-wa-n small{display:grid;font:12px/1.35 var(--font-sans);color:var(--wa-meta)}
.mk-wa-n small > span{grid-area:1 / 1}
.mk-wa-n .ty{opacity:0;color:var(--wa-green)}
.mk-wa-ac{display:flex;gap:18px;color:var(--wa-icon)}
.mk-wa-chat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:300px;padding:10px 12px 16px 16px;background:var(--wa-bg) var(--wa-doodle) 0 0 / 180px 180px}
.mk-wa-day{align-self:center;margin:2px 0 10px;padding:5px 10px;border-radius:8px;background:var(--wa-chip);box-shadow:var(--wa-sh);font:500 12px/1.2 var(--font-sans);color:var(--wa-meta)}
.mk-wa-msg{display:grid;gap:3px;width:100%;max-width:292px}
.mk-wa-bub{position:relative;padding:3px;border-radius:0 8px 8px 8px;background:var(--wa-bub);box-shadow:var(--wa-sh);color:var(--wa-text);transform-origin:0 0}
.mk-wa-bub::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:var(--wa-bub);clip-path:polygon(0 0,100% 0,100% 100%)}
.mk-wa-bub .mk-bh{margin:0 0 3px;border-radius:6px}
.mk-wa-tx{padding:4px 6px 0;font:14px/19px var(--font-sans);color:var(--wa-text);overflow-wrap:anywhere}
.mk-wa-tx b{font-weight:700;color:inherit}
.mk-wa-meta{display:flex;align-items:flex-end;gap:10px;padding:3px 6px 2px;font:12px/16px var(--font-sans);color:var(--wa-meta)}
.mk-wa-meta span{flex:1;min-width:0}
.mk-wa-meta time{flex:none;font-size:11px}
.mk-wa-bt{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:8px;background:var(--wa-bub);box-shadow:var(--wa-sh);color:var(--wa-btn);font:500 14px/1 var(--font-sans)}
.mk-wa-bt .ic{color:var(--wa-btn)}
.mk-wa-empty{align-self:center;margin:auto;padding:8px 12px;border-radius:8px;background:var(--wa-chip);box-shadow:var(--wa-sh);font:var(--t-body);color:var(--wa-meta)}
.mk-wa-in{display:flex;align-items:center;gap:6px;padding:6px 8px 12px;background:var(--wa-bg)}
.mk-wa-in .f{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:21px;background:var(--wa-in);box-shadow:var(--wa-sh);color:var(--wa-icon);font:15px/1 var(--font-sans)}
.mk-wa-in .f > span{flex:1;color:var(--wa-meta)}
.mk-wa-in .mic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--wa-green);color:#fff}
.mk-wa-in .mic .wi{width:19px;height:19px}
/* the message arrives: the header types, the bubble pops in from its corner, the buttons follow */
@keyframes mk-typing{0%{opacity:0}14%,80%{opacity:1}100%{opacity:0}}
@keyframes mk-status{0%{opacity:1}14%,80%{opacity:0}100%{opacity:1}}
@keyframes mk-arrive{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.mk-wa.arrive .ty{animation:mk-typing 1000ms ease both}
.mk-wa.arrive .st{animation:mk-status 1000ms ease both}
.mk-wa.arrive .mk-wa-bub{animation:mk-arrive 460ms var(--ease-spring) 720ms both}
.mk-wa.arrive .mk-wa-bt{animation:mk-arrive 380ms var(--ease-out) both;animation-delay:calc(900ms + var(--i) * 80ms)}
.mk-wa.arrive .mk-wa-day{animation:mk-fade 320ms ease both}
.mk-wa.swap .mk-wa-tx{animation:mk-fade 360ms ease both}
@media (prefers-reduced-motion: reduce){ .mk-day-t .run{animation:none} }

/* ── the owner's picks of the competitor list (2026-10-22): «Свой фильтр», «По прошлой рассылке», A/B, the 131049 retry, the
   day limit and the number's quality, drafts, «Новый шаблон». Calm rules as above: grey fills, accent on bars and checks. ── */
.mk-te{--mk-slow:560ms;--mk-thumb:var(--surface)}
:root[data-theme="dark"] .mk-te{--mk-thumb:var(--surface-pressed)}

/* «Свой фильтр»: rows of conditions; «По прошлой рассылке»: the campaign and chips of what its people did */
.mk-flt,.mk-rtg{display:grid;gap:8px;margin-top:10px;padding:12px 14px;border-radius:var(--radius-m);background:var(--surface-offset)}
.mk-fr{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mk-fand{width:34px;flex:none;margin-right:2px;text-align:right;font:var(--t-caption-strong);color:var(--text-3)}
.mk-fsel{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:var(--radius-s);background:var(--surface-offset);font:var(--t-body);color:var(--text-strong)}   /* «Выбранные в «Сделках» · N» (screens/pipe.js bulk «Рассылка») */
.mk-fr select,.mk-fr input,.mk-rtg select,.mk-rtr select{height:30px;min-width:0;max-width:300px;padding:0 8px;border:0;border-radius:var(--radius-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--control-border);font:var(--t-body);color:var(--text-strong);outline:0}
.mk-fr input[type=number]{width:84px}
.mk-fr input[type=text]{width:180px}
.mk-fr :is(select,input):focus-visible,.mk-rtg select:focus-visible,.mk-rtr select:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}
.mk-fa2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-left:42px}
.mk-fa2 small{flex:1;min-width:0;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-rtg-c{display:flex;align-items:center;gap:10px}
.mk-rtg-c .mk-lbl{margin:0}
.mk-rtg-c select{flex:1;max-width:560px}
.mk-rtg-r{display:flex;flex-wrap:wrap;gap:6px}
.mk-rtg .mk-help{margin:0}
.mk-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:15px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);font:var(--t-body-medium);color:var(--text-2);transition:background var(--dur-2),box-shadow var(--dur-2),color var(--dur-2)}
.mk-chip:hover{color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mk-chip.on,.mk-chip.on:hover{background:var(--text-strong);color:var(--bg);box-shadow:none}
.mk-chip .n{font-weight:400;opacity:.7;font-variant-numeric:tabular-nums}
.mk-chip[disabled]{opacity:.45;pointer-events:none}
.mk-chip:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}

/* A/B: the switch under the variables */
.mk-msgx{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border-soft)}
.mk-msgx .mk-chk{flex:1;min-width:260px}

/* «Когда»: the 131049 retry and today's limit */
.mk-rtr{margin:4px 0 2px}
.mk-rtr .mk-chk{flex:1;min-width:0}
.mk-lim{margin:-4px 0 14px;padding:10px 14px;border-radius:var(--radius-m);background:var(--surface-offset)}
.mk-lim-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-bottom:8px;font:var(--t-body);color:var(--text-2)}
.mk-lim-h b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.mk-lim-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--surface-pressed)}
.mk-lim-bar i{display:block;flex:none;height:100%}
.mk-lim-bar .u{background:var(--text-4)}
.mk-lim-bar .n{background:var(--accent);transition:width var(--mk-slow,560ms) var(--ease-out)}
.mk-lim .mk-help{margin-top:8px}

/* the list: the number strip above the 30-day figures */
.mk-nb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px;border:1px solid var(--border-soft);border-radius:var(--radius-l)}
.mk-nb > div{display:grid;align-content:start;gap:3px;padding:12px 18px;min-width:0}
.mk-nb > div + div{border-left:1px solid var(--border-soft)}
.mk-nb .l{font:var(--t-caption-strong);color:var(--text-2)}
.mk-nb .v{font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums}
.mk-nb .v .mk-ts{font:var(--t-body-strong)}
.mk-nb .v .mk-ts:not(.bad){color:var(--text-strong)}
.mk-nb .mk-lim-bar{max-width:220px;margin-top:5px}
.mk-nb > p{grid-column:1 / -1;margin:0;padding:10px 18px;border-top:1px solid var(--border-soft)}
@container view (max-width: 900px){ .mk-nb{grid-template-columns:minmax(0,1fr)} .mk-nb > div + div{border-left:0;border-top:1px solid var(--border-soft)} }

/* drafts: «Черновик сохранён · 21:05» left of the page actions */
.mk-saved{margin-right:4px;font:var(--t-caption);color:var(--text-3);white-space:nowrap}
.mk-saved.flash{animation:mk-fade 420ms ease both}

/* a campaign's page: A/B, «Повтор» */
.mk-ab-r{display:grid;grid-template-columns:24px minmax(0,1fr) 64px 40px;align-items:center;gap:10px;padding:8px 0}
.mk-ab-r + .mk-ab-r{border-top:1px solid var(--border-soft)}
.mk-ab-r .k{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--surface-pressed);font:var(--t-caption-strong);color:var(--text-strong)}
.mk-ab-r.win .k{background:var(--accent);color:var(--on-accent)}
.mk-ab-r .t{display:grid;min-width:0}
.mk-ab-r .t b{font:var(--t-body-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ab-r .bar{height:6px;border-radius:3px;background:var(--surface-offset);overflow:hidden}
.mk-ab-r .bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.mk-ab-r > b{text-align:right;font-variant-numeric:tabular-nums}

/* the templates drawer: Meta's latest decisions */
.mk-rv{margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border-soft)}
.mk-rv .mk-kv small{margin-left:6px;color:var(--text-3)}

/* «Новый шаблон»: the form left, the WhatsApp phone right */
.mk-te{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.mk-te-f{display:grid;gap:14px;min-width:0}
.mk-te-r{display:grid;gap:6px}
.mk-te-r .mk-lbl{margin:0}
.mk-te-l{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mk-te-l small{font:var(--t-caption);color:var(--text-3)}
.mk-te textarea,.mk-te input[type=text]{width:100%;border:0;border-radius:var(--radius-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--control-border);font:var(--t-body);color:var(--text-strong);outline:0}
.mk-te textarea{min-height:150px;padding:8px 10px;line-height:20px;resize:vertical}
.mk-te input[type=text]{height:34px;padding:0 10px}
.mk-te :is(textarea,input):focus{box-shadow:inset 0 0 0 1px var(--focus-color)}
.mk-te :is(textarea,input)::placeholder{color:var(--text-4)}
.mk-te-tb{display:flex;align-items:center;gap:8px;margin-top:-6px}
.mk-te-n{font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.mk-te-ex{display:grid;gap:6px}
.mk-te-ex:empty{display:none}
.mk-te-x{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:8px}
.mk-te-bt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk-te-chk{display:grid;gap:5px;padding:12px 14px;border-radius:var(--radius-m);background:var(--surface-offset)}
.mk-te-chk .mk-lbl{margin-bottom:3px}
.mk-te-c{display:flex;align-items:flex-start;gap:8px;font:var(--t-caption);color:var(--text-2)}
.mk-te-c .ic{flex:none;margin-top:1px}
.mk-te-c.ok .ic{color:var(--dot-green)}
.mk-te-c.bad,.mk-te-c.bad .ic{color:var(--danger)}
.mk-te-c.warn .ic{color:var(--dot-orange)}
.mk-te-p{position:sticky;top:0;display:grid;gap:8px}
.mk-te-p .mk-wa{margin:4px 7px 6px}
.mk-te-tok{margin:0;padding:10px 12px;border-radius:var(--radius-m);background:var(--surface-offset)}
@media (max-width: 900px){ .mk-te{grid-template-columns:minmax(0,1fr)} }

/* ── the template picker (2026-10-22, the owner kept «Карточки» of three looks): every approved template of the language as a
   card, a click picks it — grey selection + an accent check, as the segment cards of «Кому»; «Новый шаблон» = the dashed card ── */
.mk-new .mk-tpls{gap:14px}
.mk-tref{margin-left:auto}
.mk-tl{display:grid;gap:8px;min-width:0}
.mk-tl.off{opacity:.55}
.mk-tl-h{display:flex;align-items:baseline;gap:8px;font:var(--t-caption);color:var(--text-3)}
.mk-tl-h b{font:var(--t-caption-strong);color:var(--text-2)}
.mk-tl-h span{font-variant-numeric:tabular-nums}
.mk-to{position:relative;display:grid;align-content:start;gap:10px;min-width:0;padding:12px 14px;border-radius:var(--radius-m);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft);text-align:left;color:var(--text);transition:box-shadow var(--dur-2),background var(--dur-2),transform var(--dur-2) var(--ease-out)}
.mk-to:hover{box-shadow:inset 0 0 0 1px var(--border)}
.mk-to:active{transform:scale(.99)}
.mk-to:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}
.mk-to.on,.mk-to.on:hover{background:var(--row-selected);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mk-to .ck{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--border-strong);color:transparent;transition:background var(--dur-3),box-shadow var(--dur-3),color var(--dur-3)}
.mk-to.on .ck{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.mk-to .ck svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.mk-to .tx{min-width:0;font:var(--t-body);color:var(--text-strong);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.mk-to .ft{display:grid;gap:2px;min-width:0;font:var(--t-caption);color:var(--text-3)}
.mk-to .ft > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-to .nm{font:var(--t-mono);font-size:11px;color:var(--text-2)}
.mk-to .mt:empty{display:none}
.mk-to.dim{opacity:.55;cursor:default}
.mk-to.alt .tx{color:var(--text-2)}
.mk-to.add{display:flex;align-items:center;justify-content:center;gap:6px;background:none;box-shadow:none;outline:1px dashed var(--border);outline-offset:-1px;color:var(--text-3);font:var(--t-body-medium)}
.mk-to.add:hover{color:var(--text-strong);outline-color:var(--border-strong);background:var(--surface-hover)}
.mk-to.add .ic{width:14px;height:14px}

.mk-tl-o{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.mk-tl-o .mk-to{grid-template-rows:auto 1fr;min-height:124px;padding-right:38px}
.mk-tl-o .mk-to .ck{position:absolute;top:12px;right:12px}
.mk-tl-o .mk-to .ft{align-self:end}
.mk-tl-o .mk-to.add{min-height:124px;padding-right:14px}