/* ========== PERSONALIZATION PAGE ========== */
/* Подключается ПОСЛЕ main.css. Общие классы: .container, .section__header, .pretitle, .title, .section__text, .btn */
:root{--ml-ink:#002033;--ml-accent:#FB685B;--ml-bg:#FAF9F7}
.mlSection{padding:88px 0}
.mlSection--dark{background:var(--ml-ink);border-radius:32px}
.mlSection--tinted{background:linear-gradient(180deg,#FFF6EA 0%,#FFEFE0 100%);border-radius:32px}
/* градиент как у первой карточки блока каналов; у секций разное направление, чтобы не читались одинаково */
#personal.mlSection--dark{background:linear-gradient(158deg,var(--ml-ink) 0%,#062E4A 52%,#0B3E63 100%)}
.mlHead{max-width:780px}
.mlHead--center{margin:0 auto;text-align:center}
/* шапка в две колонки: заголовок слева, подводка справа */
.mlHead--split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.mlHead--split .mlHead__text{margin-top:0;padding-bottom:4px}
@media (max-width:991px){.mlHead--split{grid-template-columns:1fr;gap:16px;align-items:start}}
.mlHead__title{margin:12px 0 0;color:var(--ml-ink);font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.6px}
.mlHead__title span{color:var(--ml-accent)}
.mlHead__text{margin-top:16px;color:rgba(0,32,51,.62);font-size:19px;line-height:1.6}
.mlSection--dark .mlHead__title{color:#fff}
.mlSection--dark .mlHead__text{color:rgba(255,255,255,.62)}

/* ---------- hero ---------- */
/* hero по стандарту .pageHero (main.css), здесь только своё */
.mlHero{--heroAside:500px;--heroAccent:var(--ml-accent);padding-bottom:88px}
.mlHero__stage{position:relative;padding:34px;border-radius:28px;background:radial-gradient(rgba(255,255,255,.07) 1.4px,transparent 1.4px) 0 0/18px 18px,var(--ml-ink);box-shadow:0 50px 90px -60px rgba(0,32,51,.8)}

/* макет письма: поля с масками подставляются на глазах */
.letter{position:relative;border-radius:22px;background:#fff;isolation:isolate;border:1px solid rgba(0,32,51,.09);box-shadow:0 50px 90px -50px rgba(88,16,10,.45);overflow:hidden}
.letter__bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(0,32,51,.08);background:#FBFAF9}
.letter__dot{width:9px;height:9px;border-radius:50%;background:rgba(0,32,51,.14)}
.letter__from{margin-left:8px;color:rgba(0,32,51,.5);font-size:13px}
.letter__meta{padding:22px 24px 0;display:grid;gap:8px}
.letter__row{display:flex;gap:10px;font-size:14px;line-height:1.4;min-height:39px;align-items:flex-start}
.letter__key{flex:0 0 52px;color:rgba(0,32,51,.4)}
.letter__val{color:var(--ml-ink)}
.letter__subject{font-weight:600}
.letter__body{padding:20px 24px 24px;display:grid;gap:16px}
/* лёгкий кивок письма в момент подстановки — показываем, что данные сменились */
.letter{isolation:isolate}
/* подсветка подстановки: рамка письма мягко уходит в акцент и возвращается */
.letter{transition:border-color .45s ease,box-shadow .45s ease}
.letter.is-swap{border-color:rgba(58,132,247,.75);box-shadow:0 50px 90px -50px rgba(0,32,51,.5),0 0 0 4px rgba(58,132,247,.16)}
.letter.is-swap{animation:letterNod .9s cubic-bezier(.3,.7,.3,1)}
@keyframes letterNod{0%,100%{translate:0 0}22%{translate:0 -8px}56%{translate:0 3px}}
@media (prefers-reduced-motion:reduce){.letter.is-swap,.letter.is-swap .letterWave{animation:none}}
.letter__hello{color:var(--ml-ink);font-size:17px;font-weight:600;line-height:1.35;min-height:23px}
.letter__lead{color:rgba(0,32,51,.65);font-size:15px;line-height:1.55;min-height:47px}
.letter__cart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.letterItem{padding:12px;border-radius:12px;border:1px solid rgba(0,32,51,.08);background:#FBFAF9;display:grid;gap:7px}
.letterItem__ph{height:56px;border-radius:8px;background:linear-gradient(135deg,rgba(58,132,247,.13),rgba(0,32,51,.05));display:flex;align-items:center;justify-content:center;color:#3A84F7}
.letterItem__ph svg{width:34px;height:34px;display:block;opacity:.85;transition:opacity .26s ease}
.letterItem__ph.is-fade svg,.letterItem.is-fade .letterItem__name,.letterItem.is-fade .letterItem__price{opacity:.18}
.letterItem__name{color:var(--ml-ink);font-size:12px;line-height:1.3;min-height:31px;transition:opacity .26s ease}
.letterItem__price{color:#2F6FE0;font-size:13px;font-weight:600;transition:opacity .26s ease}
.letter__promo{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:12px;background:rgba(58,132,247,.08);border:1px dashed rgba(58,132,247,.45)}
.letter__promoCap{color:rgba(0,32,51,.6);font-size:13px}
.letter__promoCode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:600;color:#2F6FE0;letter-spacing:.06em}
.letter__cta{justify-self:stretch;text-align:center;padding:12px 22px;border-radius:100px;background:#3A84F7;color:#fff;font-size:14px;font-weight:600}
/* подставляемое значение: подсветка маски в момент замены */
.var{position:relative;border-radius:5px;padding:0 3px;margin:0 -3px;transition:background .5s ease,color .5s ease}
.var.is-swap{background:rgba(58,132,247,.16);color:#2F6FE0}
.letter__tag{position:absolute;right:18px;top:64px;display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px;background:var(--ml-ink);color:#fff;font-size:12px;line-height:1.2;box-shadow:0 16px 30px -18px rgba(0,32,51,.8)}
.letter__tagDot{width:6px;height:6px;border-radius:50%;background:#4ED08A}

/* ---------- каналы ---------- */
.mlChan__grid{margin:auto 0 0;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.mlChan__item{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;background:#FAF9F7;border:1px solid rgba(0,32,51,.1);color:rgba(0,32,51,.75);font-size:14px;font-weight:500}
.mlChan__ico{flex:0 0 auto;width:17px;height:17px;background:#2F6FE0;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.mlSection--tinted .mlFact{background:#FFF;border-color:rgba(0,32,51,.08)}
.mlSection--tinted .mlFact:hover{border-color:rgba(251,104,91,.35);box-shadow:0 28px 50px -40px rgba(88,16,10,.45)}
.mlSection--tinted .mlChan__facts .mlFact:first-child{background:linear-gradient(158deg,#fff 0%,#FFF3E8 62%,#FFE9DB 100%);border-color:rgba(251,104,91,.25)}
.mlSection--tinted .mlChan__facts .mlFact:first-child .mlChan__item{background:rgba(255,255,255,.8);border-color:rgba(251,104,91,.2)}
.mlSection--tinted .mlFact__num{background:rgba(251,104,91,.1);border-color:rgba(251,104,91,.25);color:#C2453A}
.mlSection--tinted .mlChan__item,.mlSection--tinted .mlFact__list li{background:rgba(255,255,255,.7)}
.mlSection--tinted .mlCase{border-color:rgba(0,32,51,.07)}
.mlSection--tinted .mlCase__ico{background:rgba(255,255,255,.85);border-color:rgba(251,104,91,.3)}
/* тёмная версия карточек: те же формы, инвертированные тона */
.mlSection--dark .mlFact{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.mlSection--dark .mlFact:hover{border-color:rgba(143,192,255,.45);box-shadow:none}
.mlSection--dark .mlChan__facts .mlFact:first-child{background:radial-gradient(120% 90% at 0% 0%,rgba(143,192,255,.16) 0%,rgba(255,255,255,.03) 58%);border-color:rgba(143,192,255,.5);box-shadow:inset 0 0 0 1px rgba(143,192,255,.14)}
.mlSection--dark .mlFact__num{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2)}
.mlSection--dark .mlFact__name{color:#fff}
.mlSection--dark .mlFact__text{color:rgba(255,255,255,.62)}
.mlSection--dark .mlChan__item,.mlSection--dark .mlFact__list li,.mlSection--dark .mlChan__facts .mlFact:first-child .mlChan__item{background:rgba(0,0,0,.24);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.78)}
.mlSection--dark .mlChan__ico{background:#8FC0FF}
/* две опции отправки: нумерованные карточки без заливки — акцент только в номере и рамке */
.mlChan__facts{margin-top:44px;align-items:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mlFact{position:relative;padding:30px;border-radius:20px;border:1px solid rgba(0,32,51,.1);background:#fff;display:flex;flex-direction:column;transition:border-color .25s ease,box-shadow .25s ease}
.mlFact:hover{border-color:rgba(58,132,247,.4);box-shadow:0 28px 50px -40px rgba(0,32,51,.5)}
.mlChan__facts .mlFact:first-child{background:linear-gradient(158deg,#fff 0%,#F2F6FE 62%,#E8F0FD 100%);border-color:rgba(58,132,247,.22)}
.mlChan__facts .mlFact:first-child .mlChan__item{background:rgba(255,255,255,.72);border-color:rgba(58,132,247,.18)}
.mlFact__num{align-self:flex-start;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:rgba(58,132,247,.1);border:1px solid rgba(58,132,247,.22);font-size:19px;line-height:1;margin-bottom:18px}
.mlFact__name{color:var(--ml-ink);font-size:20px;font-weight:600;line-height:1.3}
.mlFact__text{margin-top:10px;color:rgba(0,32,51,.6);font-size:15px;line-height:1.55}
.mlFact__list{list-style:none;margin:auto 0 0;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
/* фирменные значки сервисов — растровые, поэтому фиксируем размер и скругление */
.mlFact__list--logo li img{width:17px;height:17px;border-radius:4px;object-fit:contain;display:block}
.mlFact__list li{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;background:#FAF9F7;border:1px solid rgba(0,32,51,.1);color:rgba(0,32,51,.75);font-size:14px;font-weight:500}

/* ---------- маски (тёмный блок) ---------- */
/* слева карточка с масками, справа заголовок и подводка */
.mlVars__inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.mlVars__grid{margin:0}
@media (max-width:991px){.mlVars__inner{grid-template-columns:1fr;gap:32px}.mlVars__inner .mlHead{order:-1}}
.mlVars__card{padding:28px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.mlVars__cardTitle{color:#fff;font-size:19px;font-weight:600;line-height:1.3}
.mlVars__cardText{margin-top:10px;color:rgba(255,255,255,.6);font-size:15px;line-height:1.55}
/* типы масок: три строки через разделители */
.mlVars__types{margin-top:44px;display:grid}
.maskType{padding:18px 0;border-top:1px solid rgba(255,255,255,.1)}
.maskType:last-child{padding-bottom:0}
.maskType__name{color:#8FC0FF;font-size:16px;font-weight:600;line-height:1.3}
.maskType__text{margin-top:6px;color:rgba(255,255,255,.6);font-size:15px;line-height:1.5}
.maskType__chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.maskType__chips span{padding:8px 14px;border-radius:100px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.75);font-size:14px;line-height:1.2}
/* маски баблами: слева сама маска, справа подставленное значение */
.maskChip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:100px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.75);font-size:14px;line-height:1.2}
.maskChip b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;color:#8FC0FF}
.mlVars__mask{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#FF9C90}
.mlVars__arrow{color:rgba(255,255,255,.35)}
.mlVars__out{color:#fff}
.mlVars__side{display:grid;gap:12px}
.mlRule{padding:20px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.mlRule__name{color:#fff;font-size:16px;font-weight:600;line-height:1.3}
.mlRule__text{margin-top:7px;color:rgba(255,255,255,.6);font-size:14px;line-height:1.5}

/* ---------- контент письма: рекомендации и промокоды ---------- */
.mlContent__grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mlCard{padding:28px;border-radius:20px;border:1px solid rgba(0,32,51,.09);background:#fff;box-shadow:0 26px 50px -44px rgba(88,16,10,.4)}
.mlCard__ico{width:44px;height:44px;border-radius:13px;background:rgba(251,104,91,.1);border:1px solid rgba(251,104,91,.2);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mlCard__ico svg{width:22px;height:22px;fill:none;stroke:var(--ml-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mlCard__name{color:var(--ml-ink);font-size:19px;font-weight:600;line-height:1.3;margin-bottom:10px}
.mlCard__text{color:rgba(0,32,51,.62);font-size:15px;line-height:1.55}

/* ---------- конструктор писем ---------- */
.mlBuilder__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.mlBuilder__inner .mlHead{order:2}
.mlBuilder__list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.mlBuilder__list li{position:relative;padding-left:30px;color:rgba(0,32,51,.68);font-size:16px;line-height:1.5}
.mlBuilder__list li b{color:var(--ml-ink);font-weight:600}
.mlBuilder__list li::before{content:'';position:absolute;left:2px;top:6px;width:13px;height:7px;border-left:2px solid var(--ml-accent);border-bottom:2px solid var(--ml-accent);rotate:-45deg;border-radius:1px}
.editor{border-radius:20px;border:1px solid rgba(0,32,51,.09);background:#fff;box-shadow:0 40px 80px -50px rgba(88,16,10,.45);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 214px}
.editor__aside{order:2;padding:18px 14px;background:#FBFAF9;border-left:1px solid rgba(0,32,51,.08);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.editor__asideTitle{grid-column:1/-1;color:rgba(0,32,51,.45);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.editor__block{transition:border-color .5s ease,box-shadow .5s ease,background .5s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 6px;border-radius:10px;border:1px solid rgba(0,32,51,.12);background:#fff;color:rgba(0,32,51,.7);font-size:12px;line-height:1.2;text-align:center}
.editor__block .mlChan__ico{width:19px;height:19px;background:#2F6FE0}
/* блок, который сейчас «переносят» на холст */
.editor__block.is-pick{transition-duration:.12s;border-color:#2F6FE0;box-shadow:0 0 0 3px rgba(47,111,224,.16);background:#F5F8FE}
.editor__el.is-in{opacity:1}
.editor__canvas{position:relative;padding:24px;display:grid;gap:12px;align-content:start;background:#fff}
.editor__el{min-height:47px;display:flex;align-items:center;opacity:0;transition:opacity .28s ease;padding:14px 16px;border-radius:12px;border:1px solid rgba(0,32,51,.08);background:#fff;color:var(--ml-ink);font-size:13px;line-height:1.4}
.editor__el--active{background:#fff;color:var(--ml-ink)}
.editor__el--img{height:150px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(58,132,247,.12),rgba(0,32,51,.06))}
.editor__el--img .mlChan__ico{width:34px;height:34px;background:rgba(47,111,224,.55)}
.editor__el--btn{justify-self:stretch;justify-content:center;text-align:center;padding:12px 20px;border-radius:100px;background:var(--ml-accent);color:#fff;border-color:transparent;font-weight:600}

/* ---------- время отправки ---------- */
.mlTime__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.clock{display:grid;gap:14px}
.clockRow{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px}
.clockRow__who{color:rgba(255,255,255,.75);font-size:14px;line-height:1.3}
.clockRow__track{position:relative;height:38px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.clockRow__mark{position:absolute;top:50%;translate:0 -50%;left:var(--at);display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:100px;background:var(--ml-accent);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 14px 26px -16px rgba(251,104,91,.9)}
.clock__scale{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;color:rgba(255,255,255,.4);font-size:12px}
.clock__scaleRow{display:flex;justify-content:space-between}

/* ---------- кейсы ---------- */
.mlCases__grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mlCase{padding:26px 24px;border-radius:16px;border:1px solid rgba(0,32,51,.09);background:#fff;transition:box-shadow .25s ease,border-color .25s ease}
.mlCase:hover{box-shadow:0 24px 44px -30px rgba(88,16,10,.4);border-color:rgba(251,104,91,.35)}
.mlCase__ico{width:40px;height:40px;border-radius:12px;background:rgba(251,104,91,.1);border:1px solid rgba(251,104,91,.2);display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;margin-bottom:14px}
.mlCase__name{color:var(--ml-ink);font-size:17px;font-weight:600;line-height:1.3;margin-bottom:8px}
.mlCase__text{color:rgba(0,32,51,.6);font-size:14px;line-height:1.5}

@media (max-width:1199px){
.mlChan__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.mlHero{--heroAside:440px}
.mlHead__title{font-size:34px}
.mlCases__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mlContent__grid{grid-template-columns:1fr}
}
@media (max-width:991px){
.mlHero__stage{padding:20px}
.mlSection{padding:64px 0}
.mlHero{padding-bottom:64px}
.mlHead__title{font-size:30px}
.mlVars__grid,.mlBuilder__inner,.mlTime__inner{grid-template-columns:1fr;gap:32px}
.mlBuilder__inner .mlHead{order:0}
.mlChan__facts{grid-template-columns:1fr}
.editor{grid-template-columns:1fr}
.editor__aside{order:0;border-left:0;border-bottom:1px solid rgba(0,32,51,.08);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);overflow-x:auto}
.editor__asideTitle{display:none}
}
@media (max-width:767px){
.mlCases__grid{grid-template-columns:1fr}
.letter__cart{grid-template-columns:repeat(2,minmax(0,1fr))}
.letter__tag{display:none}
.clockRow{grid-template-columns:1fr;gap:6px}
.clock__scale{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.var{transition:none}}

/* каретка на блоке, который сейчас набирается */
.editor__el.is-typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;translate:0 2px;background:currentColor;animation:caret .9s steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.editor__el.is-typing::after{display:none}}
.editor__mask{font-style:normal;margin:0 3px;color:var(--ml-accent)}
.editor__el--btn .editor__mask{color:#fff}
.editor__el--muted{display:flex;align-items:center;gap:9px;background:#FBFAF9;color:rgba(0,32,51,.6)}
.editor__el--muted .mlChan__ico{width:17px;height:17px;background:rgba(47,111,224,.7)}

/* ---------- персонализация: шаблон с цветными масками + легенда ---------- */
.mlMask__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.mlLegend{margin-top:28px;display:grid;gap:2px}
.mlLegend__row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.mlLegend__dot{flex:0 0 auto;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
.mlLegend__name{color:#fff;font-size:16px;font-weight:600;line-height:1.3}
.mlLegend__text{margin-top:4px;color:rgba(255,255,255,.55);font-size:14px;line-height:1.5}
.mlTpl{display:flex;flex-direction:column;justify-content:center}
.mlTpl__body{display:grid;gap:12px;justify-items:start}
.mlTpl__line{display:flex;align-items:center;flex-wrap:wrap;padding:16px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.26);color:rgba(255,255,255,.82);font-size:17px;line-height:1.5}
.mk{font-style:normal;margin:0 3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;padding:2px 7px;border-radius:7px;background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 42%,transparent);color:var(--c);white-space:nowrap}
.mk--user{--c:#8FC0FF}
.mk--tool{--c:#7BE0B0}
.mk--sys{--c:#F2C46A}
.mlTpl__foot{display:flex;align-items:center;gap:9px;padding:14px 24px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-size:13px}
.mlTpl__dot{width:7px;height:7px;border-radius:50%;background:#7BE0B0}
@media (max-width:991px){.mlMask__inner{grid-template-columns:1fr;gap:32px}.mlTpl__line{font-size:15px}}


/* ---------- аналитика: окно атрибуции и выручка по каналам ---------- */
.attr{margin-top:44px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;align-items:stretch}
.attr__win{padding:30px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(158deg,var(--ml-ink) 0%,#062E4A 100%)}
/* таблица выручки — тёмная карточка: акцент на деньгах */
.attr__table{padding:30px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(158deg,var(--ml-ink) 0%,#062E4A 100%)}
.attr__winHead{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);font-size:15px;line-height:1.4}
.attr__winHead b{color:#fff;font-weight:600}
/* путь клиента внутри окна: вертикальные шаги — подписи не накладываются друг на друга */
.attrPath{list-style:none;margin:0;padding:0;display:grid}
.attrPath__step{position:relative;display:grid;grid-template-columns:66px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0 14px 26px}
/* линия и точка слева: соединяют шаги в цепочку */
.attrPath__step::before{content:'';position:absolute;left:4px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.14)}
.attrPath__step:first-child::before{top:20px}
.attrPath__step:last-child::before{bottom:auto;height:20px}
.attrPath__step::after{content:'';position:absolute;left:0;top:18px;width:10px;height:10px;border-radius:50%;background:#062E4A;border:2px solid rgba(143,192,255,.7)}
.attrPath__step--buy::after{border-color:var(--ml-accent);background:var(--ml-accent);box-shadow:0 0 0 4px rgba(251,104,91,.16)}
.attrPath__day{color:rgba(255,255,255,.4);font-size:13px;font-variant-numeric:tabular-nums}
.attrPath__name{color:rgba(255,255,255,.85);font-size:15px;line-height:1.45}
.attrPath__step--buy .attrPath__name{color:var(--ml-accent);font-weight:600}
.attr__note{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);font-size:15px;line-height:1.55}
.attr__tableHead{display:grid;grid-template-columns:minmax(0,1fr) 62px 116px;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.4);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.attrRow{display:grid;grid-template-columns:minmax(0,1fr) 62px 116px;gap:8px 12px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.attrRow:last-child{border-bottom:0;padding-bottom:0}
.attrRow__ch{color:#fff;font-size:15px;font-weight:500}
.attrRow__n{color:rgba(255,255,255,.5);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.attrRow__sum{color:#fff;font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
/* доля канала — дорожка во всю ширину строки; заливка внутри, без абсолютного позиционирования */
.attrRow__bar{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.attrRow__bar::before{content:'';display:block;height:100%;width:var(--w);border-radius:2px;background:linear-gradient(90deg,rgba(58,132,247,.5),var(--ml-accent))}
.mlAttr__cards{margin-top:20px}
@media (max-width:1199px){.attr{grid-template-columns:1fr}}
@media (max-width:767px){.attr__win,.attr__table{padding:22px}.attrPath__step{grid-template-columns:1fr;gap:2px}}
/* пустой холст: пунктирная область-подсказка, гаснет с появлением первого блока */
.editor__empty{position:absolute;inset:24px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1.5px dashed rgba(0,32,51,.2);color:rgba(0,32,51,.4);font-size:14px;transition:opacity .28s ease}
.editor__empty.is-hidden{display:none}

/* ========== ПРАВКИ САЙТА ПОВЕРХ ВЕРСТКИ ==========
   Блок ниже добавлен на стороне сайта, в исходнике дизайна его нет.
   При ре-импорте mailing.css из дизайн-проекта — перенести сюда заново. */

/* Блок «Переменные»: в макете строки шаблона сидят на гриде с justify-items:start,
   поэтому каждая подложка шириной по своему тексту. На узком экране это читается
   как рваная лесенка — растягиваем строки на всю ширину колонки. */
@media (max-width: 767px) {
	.mlTpl__body {
		justify-items: stretch;
	}
}

/* Кнопки во всю ширину на узких экранах задаёт стандарт .pageHero__actions
   в main.css — локального правила здесь больше нет. */

/* Подложки секций приводим к трём цветам сайта (токены в main.css).
   В макете было два разных тёмных: плоский #002033 у «Каналов» и градиент
   до #0B3E63 у «Переменных». Переменная --ml-ink не трогается: она же задаёт
   цвет текста и тёмных карточек внутри секций. */
.mlSection--dark,
#personal.mlSection--dark {
	background: var(--surface-dark);
}