/* Тема: нейтральная тёмная, как в референсе. Подключается после app.css и переопределяет его. */
:root{--bg:oklch(16% 0 0);--panel:oklch(20% 0 0);--panel2:oklch(23% 0 0);--line:oklch(100% 0 0/.12);--line2:oklch(100% 0 0/.18);
--tx:oklch(98% 0 0);--mut:oklch(70% 0 0);--dim:oklch(52% 0 0);--acc:oklch(25% 0 0);--pop:oklch(22% 0 0)}
body{font:14px/1.45 Inter,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif}
a{color:var(--tx)}
svg.ic{width:16px;height:16px;stroke-width:1.700}

/* боковое меню */
#side{width:210px;padding:14px 12px 12px;display:flex;flex-direction:column}
#app.collapsed #side{margin-left:-210px}
#right{border-left:0}
.brand{padding:4px 8px 16px}
.brand b{font-size:16px;letter-spacing:.2em}
.brand small{font-size:11px}
#nav{flex:1}
#nav h6{margin:16px 8px 6px;font-size:12px;font-weight:500;color:var(--mut)}
#nav h6:first-child{margin-top:0}
#nav a{gap:8px;padding:6px 8px;border-radius:8px;font-weight:500;font-size:14px;margin-bottom:1px;user-select:none}
#nav a:hover{background:var(--acc)}
#nav a.on{background:var(--acc)}
#nav .sub{margin:2px 0 4px 15px;padding-left:10px;border-left:1px solid var(--line)}
#nav .sub.shut{display:none}
#nav .chev svg{width:14px;height:14px;transition:transform .15s}
#nav .chev.shut svg{transform:rotate(-90deg)}
#launch{padding:10px 8px 2px;font-size:12px;color:var(--mut)}
#launch .lr{display:flex;justify-content:space-between}
#launch .lb{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:5px 0 7px}
#launch .lb i{height:2px;border-radius:2px;background:var(--line2)}
#launch .lb i.on{background:var(--tx)}

/* шапка */
#top{padding:12px 24px;gap:12px;border-bottom:1px solid var(--line)}
.icon-btn{background:none;border:1px solid var(--line2);border-radius:7px;width:26px;height:26px}
.icon-btn:hover{background:var(--acc);border-color:var(--line2)}
.dd>button{font-weight:600;font-size:14px;padding:2px 8px 2px 2px;gap:9px}
.dd>button:hover{background:var(--acc)}
.dd .ava{width:30px;height:30px;background:var(--acc);border:1px solid var(--line);color:var(--tx)}
.dd .ava svg{width:15px;height:15px}
.dd>button>svg{width:13px;height:13px;color:var(--mut)}
.menu{background:var(--pop);border-color:var(--line)}
.menu a:hover{background:var(--acc)}
.search{background:oklch(100% 0 0/.045);border-color:var(--line2);border-radius:7px;height:28px;width:210px}
.pill{border-color:var(--line);padding:1px 9px;font-size:12px;font-weight:500;color:var(--mut)}
.tz{background:oklch(100% 0 0/.045);border-color:var(--line);height:30px;border-radius:8px}
.ava.sm{background:var(--acc);border-color:var(--line)}

/* контент */
#main{padding:26px 34px 70px 26px}
h1{font-size:24px;font-weight:700;margin:0 0 2px}
.lead{font-size:15px;margin:0 0 22px}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
h2{font-size:16px;font-weight:700;margin:30px 0 12px;display:flex;align-items:baseline;gap:8px}
h2 small{font-size:12px;margin:0}
h2 svg.ic{align-self:center;color:var(--mut)}
.card{border-radius:14px}
.card>.hd{padding:10px 14px;font-size:13px}
.card>.hd svg.ic{color:var(--mut)}
.wrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.seg{background:var(--panel);border-color:var(--line);border-radius:10px;padding:3px}
.seg button{border-radius:7px;padding:5px 11px;font-size:12.500px;color:var(--tx)}
.seg button.on{background:var(--tx);color:var(--bg)}
.seg.flat{padding:0;gap:0;overflow:hidden;border-radius:8px}
.seg.flat button{border-radius:0;border-right:1px solid var(--line);padding:5px 9px}
.seg.flat button:last-child{border-right:0}
.seg.flat button.on{background:var(--acc);color:var(--tx)}
.seg.tabs{display:flex;background:var(--panel);padding:3px;gap:3px;border-radius:9px;margin-bottom:22px}
.seg.tabs button{flex:1;border:1px solid transparent;border-radius:7px;display:inline-flex;gap:7px;justify-content:center;align-items:center;color:var(--mut);padding:4px}
.seg.tabs button.on{background:var(--acc);border-color:var(--line2);color:var(--tx)}
.seg.tabs svg.ic{width:14px;height:14px}
.btn{background:oklch(100% 0 0/.045);border-color:var(--line2);border-radius:8px;font-size:13px;padding:6px 12px}
.btn:hover{background:var(--acc);border-color:var(--line2)}
.btn.pri{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.btn.pri:hover{background:#fff}
.inp,textarea.inp,select.inp{background:oklch(100% 0 0/.045);border-color:var(--line2);border-radius:8px}
.inp:focus{border-color:oklch(100% 0 0/.4)}
.usearch,.uper,.upg,.ubtn,.uchip{background:oklch(100% 0 0/.045)}
.ucard{background:var(--panel)}
.utable th{background:var(--bg)}
.utable{border-radius:10px}
.tbl{border-radius:10px}
.tbl th{background:var(--bg);height:38px;padding:0 12px;font-size:13px}
.tbl td{padding:10px 12px}
th,td{border-color:var(--line)}
tbody tr.click:hover{background:oklch(100% 0 0/.03)}
.badge{border-radius:6px;padding:1px 7px;font-size:11px}
.modal{background:var(--pop);border-color:var(--line);border-radius:14px}
.modal>.hd{background:var(--pop)}
.toast{background:var(--pop);border-color:var(--line)}
.bar{height:6px;background:oklch(100% 0 0/.06)}
.q{display:inline-grid;place-items:center;width:13px;height:13px;border:1px solid var(--line2);border-radius:50%;font-size:9px;color:var(--mut);cursor:help;margin-left:5px;font-style:normal;font-weight:500;vertical-align:1px}

/* дашборд */
.dbar{position:sticky;top:-26px;z-index:5;background:var(--bg);margin:-26px -34px 0 -26px;padding:10px 34px 10px 26px;border-bottom:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.kpi{padding:12px 14px 14px}
.kpi .t{font-size:12px;justify-content:flex-start;align-items:center}
.kpi .v{font-size:22px;margin-top:6px;line-height:1.15}
.kpi .s{font-size:11px;margin-top:2px}
.kpi.hero{padding:16px 16px 14px;display:flex;flex-direction:column;min-height:126px}
.kpi.hero .v{font-size:42px;font-weight:800;letter-spacing:-.04em;margin-top:6px}
.kpi.hero svg{margin-top:auto;width:100%;height:34px}
.kpi.dash{border-style:dashed}
.nowbar{border-radius:12px;margin-top:10px;padding:10px 14px}
.nowbar>b{font-size:11px;letter-spacing:.1em;border-color:var(--line)}
.nowbar .t{font-size:12px}.nowbar .v{font-family:var(--mono);font-size:14px}
.pad{padding:18px 20px}
.pad h3{margin:0 0 18px;font-size:15px;display:flex;align-items:center;justify-content:space-between}
.pad h3 small{font-weight:400;color:var(--mut);font-size:12px}
.fl{font-size:13px;font-weight:500}
.fl b{font-family:var(--mono)}
.chart{position:relative}
.chart svg{width:100%;height:210px;display:block}
.chart .ax{display:flex;justify-content:space-between;color:var(--mut);font-size:11px;margin-top:4px;padding-left:34px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pc{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:0 6px;font-size:11px;font-family:var(--mono);margin-left:8px;color:var(--mut)}

/* сводная полоса (UTM, рефералы) */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:10px;margin-bottom:14px}
.strip>div{padding:10px 12px;border-right:1px solid var(--line)}
.strip>div:last-child{border-right:0}
.strip .t{font-size:12px;color:var(--mut)}
.strip .v{font-size:19px;font-weight:700;margin-top:3px}
.strip .s{font-size:11px;color:var(--mut)}
.strip.gap{border:0;gap:8px}
.strip.gap>div{border:1px solid var(--line);border-radius:10px}
.tfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}

/* продления */
.when{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.when>div{padding:12px 14px;border-right:1px solid var(--line)}
.when>div:last-child{border-right:0}
.when>div.hot{background:oklch(35% .07 95/.45)}
.when>div.hot .v{color:var(--amber)}
.when .t{font-size:12px;color:var(--mut)}
.when .v{font-size:20px;font-weight:700;margin-top:4px}
.when .s{font-family:var(--mono);font-size:12px;margin-top:2px}

/* сообщения бота */
.chase{display:grid;grid-template-columns:240px 1fr;gap:12px;align-items:start}
.clist{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.clist h6{margin:0;padding:10px 12px;font-size:11px;letter-spacing:.06em;color:var(--mut);font-weight:500;border-bottom:1px solid var(--line)}
.clist a{display:block;padding:9px 12px 9px 26px;position:relative;cursor:pointer;color:var(--tx);font-weight:600;font-size:13px}
.clist a::before{content:"";position:absolute;left:12px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.clist a small{display:block;color:var(--mut);font-weight:400;font-size:11px}
.clist a:hover,.clist a.on{background:var(--acc)}
.tgm{max-width:460px}
.tgm .bubble{max-width:none;background:oklch(26% 0 0);border-radius:12px;font-size:13.500px}
.tgm .kb{max-width:none}
.tgm .kb span{background:#2b6480;border-radius:8px;padding:8px;font-weight:600;font-size:13px}

/* страны */
.srow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow b{min-width:160px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:none}
.dot.ok{background:var(--green)}.dot.bad{background:var(--red)}.dot.wait{background:var(--amber)}
.ticks{flex:1;display:flex;gap:2px;height:16px}
.ticks i{flex:1;border-radius:2px;background:oklch(100% 0 0/.07)}
.ticks i.ok{background:#17b26a}.ticks i.bad{background:var(--red)}

/* строки-настройки */
.lrow{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow>div:first-child{flex:1;min-width:0}
.lrow b{display:block}
.lrow p{margin:2px 0 0;color:var(--mut);font-size:13px}
.blank{display:flex;flex-direction:column;align-items:center;gap:10px;padding:54px 10px;color:var(--tx);font-weight:600}
.blank span{width:34px;height:34px;border-radius:50%;background:var(--acc);display:grid;place-items:center}
@media(max-width:1000px){.two,.five,.four,.three,.strip,.when,.chase{grid-template-columns:1fr!important}.dbar{position:static}}

/* переключатель, лента шагов */
.sw{display:inline-flex;cursor:pointer}
.sw input{display:none}
.sw i{width:30px;height:17px;border-radius:99px;background:oklch(100% 0 0/.16);position:relative;transition:.15s}
.sw i::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:var(--bg);transition:.15s}
.sw input:checked+i{background:var(--tx)}
.sw input:checked+i::after{left:15px}
.clist h6:not(:first-child){border-top:1px solid var(--line)}
.clist a.plain{padding-left:14px;font-weight:500}
.clist a.plain::before{display:none}
.clist a.off::before{background:var(--dim)}
.tl{position:relative;padding-left:0}
.tl::before{content:"";position:absolute;left:105px;top:8px;bottom:8px;width:1px;background:var(--line2)}
.tlm,.tls{display:grid;grid-template-columns:90px 31px 1fr;align-items:start;margin-bottom:18px;position:relative}
.tlm>span,.tls>span{width:9px;height:9px;border-radius:50%;border:2px solid var(--tx);background:var(--bg);margin:5px 0 0 11px;z-index:1}
.tlm>span{grid-column:2;background:var(--tx)}
.tlm>div{grid-column:3}
.tlm b{font-size:11px;letter-spacing:.08em;display:block}
.tlm small,.tlt small{color:var(--mut);font-size:11px;display:block}
.tlm.end{margin-bottom:0}
.tlt{text-align:right}
.tls.off .bubble,.tls.off .kb{opacity:.45}

/* ---------- пользователи: чипы, строки ---------- */
.uchip{border-style:dashed;border-color:var(--line2);height:32px;border-radius:8px;font-size:13px;gap:7px;color:var(--tx)}
.uchip svg.ic{width:15px;height:15px}
.uchip.set{border-style:solid}
.usearch{height:32px;width:250px;border-radius:8px}
.ubtn{height:32px;border-radius:8px}
.uava{position:relative;overflow:hidden;width:36px;height:36px}
.uava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uava.sm{width:36px;height:36px;background:var(--acc);color:var(--mut)}
.uava.xl{width:64px;height:64px;font-size:20px;border-radius:12px}
.uname{font-size:14px}
.tgstar{color:#3b82f6;display:inline-flex}
.tgstar svg{fill:currentColor;width:14px;height:14px}
.usub{font-size:12px;color:var(--mut)}
.uact{font-size:13px}
.uact svg.ic{width:14px;height:14px}
.ustat{display:flex;gap:8px;align-items:flex-start}
.ustat i{width:7px;height:7px;border-radius:50%;background:var(--dim);margin-top:6px;flex:none}
.ustat i.ok{background:var(--green)}.ustat i.blue{background:var(--blue)}.ustat i.red{background:var(--red)}
.ustat b{display:block;font-size:14px}
.ustat small{color:var(--mut);font-size:12px;font-family:var(--mono)}
.ulang{border:1px solid var(--line2);border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700}
.urole{background:var(--acc);border-color:var(--line2);border-radius:7px;padding:3px 9px;font-size:12px;color:var(--mut)}
.utick{width:14px;display:inline-grid;opacity:0}.utick.on{opacity:1}.utick svg{width:13px;height:13px}
.upop{background:var(--pop);border-color:var(--line)}
.upop a:hover{background:var(--acc)}
.upop a.red{color:var(--red)}
.upop hr{border-color:var(--line)}
.utable td{height:58px;border-bottom-color:var(--line)}
.utable tbody tr:hover{background:oklch(100% 0 0/.03)}

/* ---------- карточка пользователя ---------- */
#overlay.ucwrap{align-items:stretch;justify-content:center;padding:10px 0 0}
.ucard2{position:relative;width:min(1140px,100vw);background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden}
.ucx{position:absolute;right:16px;top:16px;border:0}
.uchead{display:flex;gap:16px;padding:22px 24px 16px}
.uctitle{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.uctitle b{font-size:19px}
.ucmeta{display:flex;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:13px;margin-top:6px;align-items:center}
.ucmeta a{color:var(--mut)}.ucmeta a:hover{color:var(--tx)}
.ucmeta span,.ucmeta a{display:inline-flex;align-items:center;gap:4px}
.ucmeta [data-copy]{cursor:pointer}.ucmeta [data-copy]:hover{color:var(--tx)}
.ucmeta svg.ic{width:13px;height:13px}
.botb{border-color:var(--line2);color:var(--tx);font-size:12px;padding:3px 8px;border-radius:7px}
.ucstat{padding:0 24px}
.ucstat .kpi .v small{font-family:var(--mono);margin-left:4px}
.ucacts{display:flex;gap:8px;padding:14px 24px;border-bottom:1px solid var(--line);align-items:center}
.btn.ghost{background:none;border-color:transparent}
.ucbody{display:flex;flex:1;min-height:0}
.ucmain{flex:1;min-width:0;overflow:auto;padding:20px 24px 40px}
.ucnav{width:226px;flex:none;border-left:1px solid var(--line);padding:8px;overflow:auto}
.ucnav h6{margin:16px 8px 6px;font-size:11px;letter-spacing:.06em;color:var(--mut);font-weight:600}
.ucnav a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;font-weight:500;color:var(--tx)}
.ucnav a:hover,.ucnav a.on{background:var(--acc)}
.ucbox>.hd a{display:inline-flex;gap:5px;align-items:center;cursor:pointer;font-weight:600}
.ucbox>.hd a svg{width:13px;height:13px}
.ucbox .lrow{padding:10px 2px}
.ucbox .blank{padding:44px 10px}
.lrow svg.ic{color:var(--mut)}
@media(max-width:800px){.ucbody{flex-direction:column-reverse}.ucnav{width:auto;border-left:0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap}.ucnav h6{display:none}}

/* ---------- шапка ---------- */
#hx{gap:10px;flex-wrap:nowrap}
.hbtn{background:none;border:0;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.hbtn:hover{background:var(--acc)}
.hsel{height:32px;display:inline-flex;align-items:center;gap:8px;background:oklch(100% 0 0/.045);border:0;border-radius:8px;padding:0 12px;cursor:pointer}
.hsel:hover{background:var(--acc)}
.hsel svg.ic{width:15px;height:15px;color:var(--mut)}
.hava{width:30px;height:30px;border-radius:50%;background:var(--acc);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;padding:0}
.hava.lg{width:44px;height:44px;border-radius:10px;cursor:default}
.mecard{display:flex;gap:12px;padding:10px 8px;min-width:230px}
.pbadge{display:inline-flex;align-items:center;gap:4px;margin-top:6px;border:1px solid #92400e;background:#451a03;color:#fb923c;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:600}
.pbadge svg{width:11px;height:11px}
.botava{position:relative;overflow:hidden}
.botava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dd>button>svg.ic{width:13px;height:13px;color:var(--mut)}

/* ---------- светлая тема ---------- */
:root.light{--bg:oklch(99% 0 0);--panel:oklch(100% 0 0);--panel2:oklch(96% 0 0);--line:oklch(0% 0 0/.11);--line2:oklch(0% 0 0/.18);--tx:oklch(18% 0 0);--mut:oklch(48% 0 0);--dim:oklch(65% 0 0);--acc:oklch(94% 0 0);--pop:oklch(100% 0 0);
--green:#16a34a;--green-bg:#dcfce7;--blue:#2563eb;--blue-bg:#dbeafe;--red:#dc2626;--red-bg:#fee2e2;--amber:#b45309}
.light .search,.light .tz,.light .btn,.light .inp,.light .usearch,.light .uper,.light .upg,.light .ubtn,.light .uchip,.light .hsel{background:oklch(0% 0 0/.03)}
.light .btn.pri,.light .upg.cur,.light .seg button.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.light .seg.flat button.on,.light .seg.tabs button.on{background:var(--acc);color:var(--tx)}
.light .utable th,.light .tbl th{background:var(--panel2);color:var(--tx)}
.light .utable tbody tr:hover,.light .utable tbody tr.sel{background:var(--panel2)}
.light .uth:hover{background:var(--acc)}
.light .ub{color:var(--mut);border-color:var(--line2)}
.light .ub.green,.light .badge.g{background:var(--green-bg);border-color:#86efac;color:#15803d}
.light .ub.blue,.light .badge.b{background:var(--blue-bg);border-color:#93c5fd;color:#1d4ed8}
.light .ub.red,.light .badge.r{background:var(--red-bg);border-color:#fca5a5;color:#b91c1c}
.light .ubulk,.light .ubot{background:var(--panel);border-color:var(--line2)}
.light .ucb{background:#fff;border-color:var(--line2)}
.light .ucb:checked{background-color:var(--tx);border-color:var(--tx);filter:invert(0)}
.light .tgm .bubble{background:var(--panel2)}
.light .code{background:var(--panel2)}
.light .note{background:var(--blue-bg);border-color:#93c5fd}
.light .note.warn{background:#fef3c7;border-color:#fcd34d}
.light #overlay{background:#0006}
.light .chart svg path[stroke^="rgba"]{stroke:rgba(0,0,0,.08)}
.light .kpi.hero svg path{stroke:rgba(0,0,0,.45)}
.light .sw i::after{background:#fff}
.light .brand svg path:last-child{stroke:var(--tx)}

/* напоминания: таймлайн, меню шага, редактор сообщения */
.vsw{display:flex;gap:2px;margin-right:6px}
.vsw button{background:none;border:0;color:var(--mut);padding:3px;border-radius:5px;cursor:pointer;display:flex}
.vsw button.on{color:var(--tx);background:var(--acc)}
.vsw svg{width:14px;height:14px}
.tl.v-phone .tgm{max-width:380px}.tl.v-desk .tgm{max-width:620px}
.tgrow{display:flex;gap:8px;align-items:flex-start}
.tgava{width:26px;height:26px;border-radius:50%;background:var(--acc);border:1px solid var(--line);display:grid;place-items:center;flex:none;font-style:normal}
.tgava svg{width:13px;height:13px}
.tgm .kb{display:grid;gap:4px}
.kbr{display:flex;gap:4px}.kbr span{flex:1}
.tgm .kb span.st-primary,.kbchip.st-primary{background:#2b6480}
.tgm .kb span.st-success,.kbchip.st-success{background:#1f7a4a}
.tgm .kb span.st-none,.kbchip.st-none{background:oklch(30% 0 0)}
.bubble b{font-weight:700}.bubble code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.bubble a{color:#6ab3f3}
.pmenu{min-width:200px;z-index:200}
.pmenu a{font-size:13px}.pmenu a svg{width:14px;height:14px;color:var(--mut)}
.pmenu a.red,.pmenu a.red svg{color:var(--red,#f05252)}
.pmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.pmenu.emo{display:grid;grid-template-columns:repeat(8,1fr);min-width:0;width:260px}
.pmenu.emo a{justify-content:center;padding:5px;font-size:17px}
.modal.wide{width:min(560px,calc(100vw - 32px))}
.mbox{border:1px solid var(--line);border-radius:10px;padding:8px}
.seg.lang{display:grid;grid-template-columns:1fr 1fr;margin-bottom:8px}
.seg.lang button{justify-content:center}
.ldot{display:inline-block;width:6px;height:6px;border-radius:50%;background:transparent;margin-left:4px;vertical-align:middle}
.ldot.on{background:#f59e0b}
.rich{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:4px}
.rtb{display:flex;align-items:center;gap:2px;padding:4px 6px;border-bottom:1px solid var(--line)}
.rtb button{background:none;border:0;color:var(--mut);min-width:24px;height:24px;border-radius:5px;cursor:pointer;font-size:12px;display:grid;place-items:center}
.rtb button:hover{background:var(--acc);color:var(--tx)}
.rtb svg{width:13px;height:13px}
.rt-b{font-weight:800}.rt-i{font-style:italic}.rt-u{text-decoration:underline}.rt-s{text-decoration:line-through}
.rtb small{color:var(--mut);font-size:11px}
.rich textarea{width:100%;border:0;background:transparent;color:var(--tx);padding:10px;resize:vertical;font:inherit;outline:none;min-height:120px}
.kbh{text-align:center;color:var(--mut);font-size:11px;letter-spacing:.06em;margin:10px 0 6px;display:flex;align-items:center;gap:8px}
.kbh::before,.kbh::after{content:"";flex:1;border-top:1px solid var(--line)}
.kbe{display:flex;gap:4px;align-items:center;margin-bottom:4px}
.kbe .icon-btn{border:0;width:22px;height:22px;flex:none}
.kbe .icon-btn svg{width:13px;height:13px}
.kbchip{flex:1;min-width:0;border:1px solid transparent;border-radius:7px;padding:7px;text-align:center;color:#fff;font:600 13px/1.2 inherit;outline:none}
.kbchip.on,.kbchip:focus{border-color:var(--tx)}
.kbchip::placeholder{color:#ffffff99}
.kbpop{border:1px solid var(--line2);background:var(--pop);border-radius:9px;padding:10px;display:grid;gap:8px;margin:2px 0 8px}
.kbpop .inp{flex:1}
.swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.swatch.on{border-color:var(--tx);box-shadow:0 0 0 2px var(--bg) inset}
.btn.ghost{background:none;border-color:transparent;color:var(--mut)}
.btn.ghost:hover{color:var(--tx);background:var(--acc)}
.light .tgm .kb span.st-none,.light .kbchip.st-none{background:#8a8a8a}

/* рассылки */
.bcgrid{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start}
.bcgrid>div:first-child{display:grid;gap:14px}
.bcside{position:sticky;top:12px;display:grid;gap:12px}
.mhead{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;cursor:pointer;user-select:none}
.mhead svg{width:15px;height:15px}.mhead .chev svg{transition:transform .15s}.mhead .chev.shut svg{transform:rotate(-90deg)}
.mpick{margin-top:8px;justify-content:flex-start;cursor:pointer}
.mdrop{border:1px dashed var(--line2);border-radius:9px;margin-top:8px;padding:22px;text-align:center;color:var(--mut);display:grid;justify-items:center;gap:6px;font-size:13px}
.mdrop small{font-size:11.5px}
.mico{width:42px;height:42px;border-radius:9px;background:var(--acc);display:grid;place-items:center}.mico svg{width:20px;height:20px}
.pvmedia img,.pvmedia video{max-width:100%;max-height:260px;border-radius:10px;display:block}
.tgm .pvmedia{margin-bottom:4px}.tgm.desk{max-width:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:none;border:1px solid var(--line2);color:var(--tx);border-radius:7px;padding:5px 10px;font:500 13px inherit;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip:hover{background:var(--acc)}.chip.on{background:var(--acc);border-color:var(--tx)}
.chip b{font-weight:600;color:var(--mut)}.chip b.red{color:var(--red,#f05252)}
.chip.emo{padding:5px 9px;font-size:15px}
.hint{font-size:12px;margin:8px 0}
.wrapr{flex-wrap:wrap;gap:10px}
.addkb{width:100%;justify-content:center;border:1px dashed var(--line)}
.btn.wide{width:100%;justify-content:center}
.btn.sm{padding:5px 10px;font-size:13px}
.warns{border-top:1px solid var(--line);margin:12px 0;padding-top:10px;display:grid;gap:6px}
.warns p{margin:0;display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--mut)}
.warns svg{width:14px;height:14px;color:#f59e0b;flex:none;margin-top:2px}
.ub.blue{color:#60a5fa}.ub.gray{color:var(--mut)}.ub.amber{color:#f59e0b}
@media(max-width:1000px){.bcgrid{grid-template-columns:1fr}.bcside{position:static}}