:root{
--acc:var(--zwork-preview-accent,#B4884A);
--ff:var(--zwork-preview-font-family,Inter);
--fs:var(--zwork-preview-type-scale,1);
--den:var(--zwork-preview-density,1);
--mot:var(--zwork-preview-motion,1);
--canvas:#FAF8F5;--surf:#FFF;--surf2:#F4F0E9;--ink:#17130E;--ink2:#453E34;--mut:#7E7568;--mut2:#A69D90;
--line:#EAE3D9;--line2:#F2ECE3;--sand:#F7EFE2;--ok:#2E7D5B;--warn:#9C6B1D;--bad:#B23A31;
--sh:0 1px 2px rgba(23,19,14,.04),0 10px 28px -12px rgba(23,19,14,.1);
--sh2:0 2px 6px rgba(23,19,14,.05),0 30px 60px -26px rgba(23,19,14,.18);
--r2:22px;--pl:999px;--serif:'Instrument Serif',Georgia,'Times New Roman',serif;
--sans:var(--ff),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
html[data-t=dark]{--canvas:#121212;--surf:#171718;--surf2:#1D1D1F;--ink:#F5F5F6;--ink2:#D5D5D8;--mut:#A3A6AF;--mut2:#7D818A;--line:#2A2A2C;--line2:#202022;--sand:#3A2418;--acc:#FBE1D1;--ok:#5DB08A;--warn:#D2A054;--bad:#E0847C;--sh:0 1px 2px rgba(0,0,0,.45),0 10px 28px -12px rgba(0,0,0,.55);--sh2:0 2px 6px rgba(0,0,0,.5),0 30px 60px -26px rgba(0,0,0,.7)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:calc(15.5px*var(--fs));line-height:1.6;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
::selection{background:var(--ink);color:var(--canvas)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg{flex:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:10px}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.d{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.04}
h3,h4{font-weight:500;letter-spacing:-.02em;line-height:1.25}
em{font-style:italic}
.mut{color:var(--mut)}.sm{font-size:13.5px}.xs{font-size:12.5px}.center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.eyebrow:before{content:"";width:24px;height:1px;background:var(--acc)}
.i14{width:14px;height:14px}.i16{width:16px;height:16px}.i18{width:18px;height:18px}.i20{width:20px;height:20px}.i22{width:22px;height:22px}
.hide-m{}
/* объявление сверху сайта: задаётся в админ-панели — раздел «Сайт» */
.promo-bar{background:var(--ink);color:var(--canvas);text-align:center;font-size:13px;padding:9px 16px;line-height:1.4}

.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--canvas) 84%,transparent);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);transition:box-shadow .35s}
.nav.on{box-shadow:0 1px 0 var(--line),0 8px 24px -20px rgba(23,19,14,.3)}
.N{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.logo{display:inline-flex;align-items:center;gap:11px;font-size:17px;font-weight:500;letter-spacing:-.025em}
.logo b{width:27px;height:27px;border-radius:9px;background:var(--ink);color:var(--canvas);display:grid;place-items:center;font-family:var(--serif);font-weight:400;font-size:16px;padding-bottom:1px}
.menu{display:flex;gap:32px;font-size:14.5px;color:var(--mut)}
.menu a:hover{color:var(--ink)}
.nr{display:flex;gap:9px;align-items:center}
.burger{display:none;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center}
/*
 * Мобильное меню.
 *
 * Раньше оно открывалось на фиксированной высоте сверху (78px) и оставалось
 * открытым после нажатия на пункт — то есть полностью закрывало страницу,
 * и работать с сайтом на телефоне было нельзя.
 * Теперь: своё закрытие по любому нажатию, прокрутка внутри, кнопка «Закрыть»
 * и отдельные кнопки входа и регистрации.
 */
.mnav{display:none;position:fixed;inset:0;background:var(--canvas);z-index:70;
  flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mnav.open{display:flex}
.mnav-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:62px;padding:0 16px;border-bottom:1px solid var(--line);flex:none}
.mnav-body{display:flex;flex-direction:column;padding:4px 16px 28px}
.mnav-body a,.mnav-body button{display:block;width:100%;text-align:left;padding:16px 2px;
  font-size:20px;font-family:var(--serif);color:var(--ink);border-bottom:1px solid var(--line);
  background:none;border-radius:0}
.mnav-body a:active,.mnav-body button:active{color:var(--acc)}
.mnav-body .mn-cta{display:grid;gap:10px;margin-top:22px}
.mnav-body .mn-cta a,.mnav-body .mn-cta button{border-bottom:none;padding:0}
/* Пока меню открыто, страница под ним не прокручивается */
body.mnav-open{overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:var(--pl);font-size:14.5px;font-weight:500;border:1px solid transparent;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .2s,border-color .2s}
.btn.p{background:var(--ink);color:var(--canvas)}
.btn.p:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.btn.s{background:var(--surf);border-color:var(--line)}
.btn.s:hover{border-color:var(--mut2);transform:translateY(-2px);box-shadow:var(--sh)}
.btn.g{color:var(--mut)}.btn.g:hover{color:var(--ink);background:var(--surf2)}
.btn.lg{height:56px;padding:0 30px;font-size:15.5px}
.btn.sm{height:38px;padding:0 16px;font-size:13.5px}
.btn.fw{width:100%}.btn.dgr{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.btn.n{height:34px;padding:0 14px;font-size:13px;background:var(--surf);border-color:var(--line)}
.btn:disabled{opacity:.42;pointer-events:none}
.ar{transition:transform .25s}.btn:hover .ar{transform:translateX(3px)}
.hero{padding:calc(104px*var(--den)) 0 calc(64px*var(--den))}
.hin{display:grid;grid-template-columns:1.02fr .98fr;gap:calc(56px*var(--den));align-items:center}
.h1{font-size:clamp(44px,5.6vw,84px)}
.h1 em{color:var(--acc)}
.lead{font-size:clamp(16.5px,1.5vw,19px);color:var(--mut);max-width:540px;line-height:1.6}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.micro{font-size:13px;color:var(--mut2)}
.mock{background:var(--surf);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh2);overflow:hidden}
.mock .tb{display:flex;align-items:center;gap:11px;padding:16px 20px;border-bottom:1px solid var(--line2);font-size:13.5px}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.mock .bd{padding:22px;display:grid;gap:13px}
.bub{max-width:86%;padding:12px 16px;border-radius:18px;font-size:14.5px;line-height:1.5}
.bub.a{background:var(--surf2);border-bottom-left-radius:6px}
.bub.u{background:var(--ink);color:var(--canvas);justify-self:end;border-bottom-right-radius:6px}
.slots{display:flex;gap:8px;flex-wrap:wrap}
.slot{height:37px;padding:0 15px;border-radius:12px;border:1px solid var(--line);background:var(--surf);font-size:13.5px;display:inline-flex;align-items:center;font-variant-numeric:tabular-nums;transition:all .2s}
.slot:hover,.slot.on{border-color:var(--ink);background:var(--ink);color:var(--canvas)}
.conf{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent);padding:11px 15px;border-radius:13px}
.menu button{transition:color .2s;font-size:14.5px;color:var(--mut)}.menu button:hover{color:var(--ink)}
.mnav button{padding:12px 0;font-size:26px;font-family:var(--serif);border-bottom:1px solid var(--line);text-align:left;color:var(--ink)}
.mnav .mnav-body button{font-size:20px;padding:16px 2px}
.fg button{display:block;color:var(--mut);padding:6px 0;font-size:14.5px;text-align:left}.fg button:hover{color:var(--ink)}
.trust{display:flex;gap:46px;flex-wrap:wrap;justify-content:space-between;padding:calc(40px*var(--den)) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--mut2);font-size:12px;letter-spacing:.2em;font-weight:500}
.sec{padding:calc(118px*var(--den)) 0}
.sec.tight{padding:calc(76px*var(--den)) 0}
.hd{max-width:680px}
.hd h2{font-size:clamp(33px,4.1vw,58px);margin:20px 0 18px}
.hd p{color:var(--mut);font-size:17px;line-height:1.62}
.hd.c{margin-left:auto;margin-right:auto;text-align:center}
.grid{display:grid;gap:calc(20px*var(--den))}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r2);padding:calc(30px*var(--den))}
.card.lift{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card.lift:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.card h3{font-size:17.5px;margin-bottom:9px}
.ic{width:44px;height:44px;border-radius:14px;background:var(--sand);color:var(--acc);display:grid;place-items:center;margin-bottom:22px}
.ic svg{width:21px;height:21px}
.step{display:grid;grid-template-columns:104px 1fr;gap:24px;padding:calc(34px*var(--den)) 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:var(--serif);font-size:30px;color:var(--acc);line-height:1}
.step h3{font-size:24px;margin-bottom:8px;font-family:var(--serif);font-weight:400}
.met{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.met .v{font-family:var(--serif);font-size:52px;line-height:1;letter-spacing:-.02em}
.met .l{color:var(--mut);font-size:14px;margin-top:12px}
.q{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.q .card{display:flex;flex-direction:column;gap:18px}
.stars{display:flex;gap:3px;color:var(--acc)}
.stars svg{width:15px;height:15px;fill:currentColor;stroke:none}
.who{display:flex;align-items:center;gap:11px;margin-top:auto}
.av{width:36px;height:36px;border-radius:50%;background:var(--sand);color:var(--acc);display:grid;place-items:center;font-size:12.5px;font-weight:500;flex:none;letter-spacing:0}
.av.dk{background:var(--ink);color:var(--canvas)}
/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{background:var(--surf);border:1px solid var(--line);border-radius:26px;padding:34px;display:flex;flex-direction:column;position:relative;transition:transform .35s,box-shadow .35s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.plan.pop{border-color:var(--ink);box-shadow:var(--sh2)}
.tagi{position:absolute;top:26px;right:26px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);background:var(--sand);padding:5px 11px;border-radius:var(--pl)}
.plan .nm{font-family:var(--serif);font-size:26px}
.plan .ds{color:var(--mut);font-size:14px;margin-top:6px}
.price{font-family:var(--serif);font-size:54px;line-height:1;margin:26px 0 6px;letter-spacing:-.02em}
.price small{font-family:var(--sans);font-size:14px;color:var(--mut);letter-spacing:0}
.plan ul{list-style:none;display:grid;gap:13px;margin:26px 0 30px;font-size:14.5px;flex:1}
.plan li{display:flex;gap:11px;align-items:flex-start;color:var(--ink2)}
.plan li svg{width:16px;height:16px;color:var(--acc);margin-top:3px}
.faq{border-top:1px solid var(--line)}
.q-i{border-bottom:1px solid var(--line)}
.q-i button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;padding:26px 0;font-size:19px;font-family:var(--serif)}
.q-i .a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.8,.2,1),opacity .3s;opacity:0}
.q-i.open .a{max-height:360px;opacity:1}
.q-i .a p{color:var(--mut);padding:0 0 26px;max-width:760px}
.q-i .pm{transition:transform .35s}.q-i.open .pm{transform:rotate(45deg)}
.final{background:var(--ink);color:var(--canvas);border-radius:32px;padding:calc(72px*var(--den)) 56px;text-align:center}
.final h2{font-size:clamp(32px,4vw,56px);margin-bottom:18px}
.final p{color:color-mix(in srgb,var(--canvas) 68%,transparent);max-width:520px;margin:0 auto 34px}
.final .btn.s{background:transparent;color:var(--canvas);border-color:color-mix(in srgb,var(--canvas) 28%,transparent)}
.final .btn.s:hover{background:color-mix(in srgb,var(--canvas) 10%,transparent)}
.final .btn.p{background:var(--canvas);color:var(--ink)}
.foot{padding:calc(64px*var(--den)) 0 40px;border-top:1px solid var(--line)}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.fg h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:18px}
.fg a{display:block;color:var(--mut);padding:6px 0;font-size:14.5px}
.fg a:hover{color:var(--ink)}
.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:52px;padding-top:26px;border-top:1px solid var(--line);color:var(--mut2);font-size:13px}
/* prose */
.doc{display:grid;grid-template-columns:236px 1fr;gap:72px;padding:calc(64px*var(--den)) 0 calc(100px*var(--den))}
.dnav{position:sticky;top:104px;align-self:start;display:flex;flex-direction:column;gap:2px}
.dnav button{text-align:left;padding:9px 13px;border-radius:11px;font-size:14.5px;color:var(--mut)}
.dnav button:hover{background:var(--surf2);color:var(--ink)}
.prose{max-width:740px}
.prose h1{font-size:clamp(38px,4.4vw,56px);margin-bottom:18px}
.prose h2{font-size:30px;margin:60px 0 16px;font-family:var(--serif);font-weight:400}
.prose h3{font-size:18px;margin:32px 0 10px}
.prose p,.prose li{color:var(--ink2);font-size:16px;line-height:1.75}
.prose p{margin-bottom:15px}
.prose code{background:var(--surf2);padding:2px 7px;border-radius:7px;font-size:13.5px;font-family:ui-monospace,Menlo,monospace}
.note{border:1px solid var(--line);background:var(--surf);border-radius:16px;padding:20px 22px;margin:22px 0;font-size:15px;color:var(--ink2)}
/* auth */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth .l{padding:56px 7vw;display:flex;flex-direction:column;justify-content:center}
.auth .frm{width:100%;max-width:420px;margin:0 auto}
.auth .r{background:var(--ink);color:var(--canvas);padding:56px 5vw;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth .r h2{font-family:var(--serif);font-size:clamp(30px,3.2vw,46px);font-weight:400;line-height:1.1}
.auth .r .rows{display:grid;gap:16px;margin-top:36px}
.auth .r .rw{display:flex;gap:12px;align-items:center;font-size:14.5px;color:color-mix(in srgb,var(--canvas) 74%,transparent)}
.auth .r .rw svg{color:var(--acc);width:17px;height:17px}
.auth .r .glow{position:absolute;width:520px;height:520px;right:-160px;top:-140px;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 26%,transparent),transparent 68%);pointer-events:none}
.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--surf2)}
.auth-switch button{height:40px;border-radius:10px;color:var(--mut);font-size:13.5px;transition:background .2s,color .2s,box-shadow .2s}
.auth-switch button:hover{color:var(--ink)}
.auth-switch button.on{background:var(--surf);color:var(--ink);font-weight:500;box-shadow:var(--sh)}
.demo-b{margin-top:26px;border:1px dashed var(--line);border-radius:16px;padding:16px 18px;font-size:13.5px;color:var(--mut)}
.demo-b button{color:var(--ink);text-decoration:underline;font-size:13.5px}
.fld{display:block;margin-bottom:18px}
.fld>span{display:block;font-size:13.5px;color:var(--ink2);margin-bottom:9px;font-weight:500}
.inp{width:100%;height:50px;border:1px solid var(--line);border-radius:14px;background:var(--surf);padding:0 16px;font-size:15px;transition:border-color .2s,box-shadow .2s}
.inp:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 20%,transparent)}
textarea.inp{height:auto;min-height:112px;padding:14px 16px;resize:vertical;line-height:1.6}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237E7568' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.err{color:var(--bad);font-size:13px;min-height:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sw{position:relative;width:44px;height:26px;border-radius:var(--pl);background:var(--line);transition:background .25s;flex:none}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.sw.on{background:var(--ink)}.sw.on:after{transform:translateX(18px)}
/* app */
.app{display:grid;grid-template-columns:266px 1fr;min-height:100vh}
.side{border-right:1px solid var(--line);padding:26px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow-y:auto}
.side .logo{padding:4px 12px 24px}
.navi{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;font-size:14.5px;color:var(--mut);transition:all .2s}
.navi svg{width:18px;height:18px}
.navi:hover{color:var(--ink);background:var(--surf2)}
.navi.on{background:var(--surf);color:var(--ink);font-weight:500;box-shadow:var(--sh)}
.grp{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);padding:22px 13px 7px;font-weight:500}
.me{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px}
.me .t{flex:1;min-width:0}
.me .t div{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{min-width:0}
.min{max-width:1080px;padding:calc(36px*var(--den)) calc(42px*var(--den)) 90px}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.ph h1{font-size:32px;font-family:var(--serif);font-weight:400}
.ph p{color:var(--mut);margin-top:8px;font-size:14.5px}
.kpi{font-size:40px;font-family:var(--serif);margin-top:14px;line-height:1}
.kpi small{font-family:var(--sans);font-size:14px;color:var(--mut);letter-spacing:0}
.bdg{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--pl);font-size:12.5px;background:var(--surf2);color:var(--ink2);white-space:nowrap}
.bdg.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.bdg.wa{background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn)}
.bdg.ba{background:color-mix(in srgb,var(--bad) 11%,transparent);color:var(--bad)}
.bdg.dk{background:var(--ink);color:var(--canvas)}
.tw{background:var(--surf);border:1px solid var(--line);border-radius:var(--r2);overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:600px}
.tbl th{text-align:left;font-weight:500;color:var(--mut);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;padding:22px 22px 12px}
.tbl td{padding:16px 22px;border-top:1px solid var(--line2);vertical-align:middle}
.tbl tr:hover td{background:var(--surf2)}
.li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line2)}
.li:last-child{border-bottom:none}
/* диаграмма: столбцы растут от низа контейнера */
.bars{display:flex;align-items:flex-end;gap:10px;height:180px;margin-top:10px}
.bars .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;height:100%}
.bars .b{width:100%;max-width:40px;height:0;background:var(--surf2);border-radius:10px;transition:height 1s cubic-bezier(.2,.8,.2,1)}
.bars .c.hi .b{background:var(--acc)}
.bars .x{font-size:11px;color:var(--mut2)}
.bars .c .v{font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.bars .c .bwrap{display:flex;align-items:flex-end;justify-content:center;flex:1;width:100%}
.meter{height:8px;background:var(--surf2);border-radius:var(--pl);overflow:hidden;margin-top:16px}
.meter i{display:block;height:100%;background:var(--acc);border-radius:var(--pl);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.tabs{display:inline-flex;gap:4px;background:var(--surf2);padding:4px;border-radius:14px;margin-bottom:26px;flex-wrap:wrap}
.tabs button{height:36px;padding:0 16px;border-radius:11px;font-size:13.5px;color:var(--mut);transition:all .2s}
.tabs button.on{background:var(--surf);color:var(--ink);box-shadow:var(--sh)}
.empty{text-align:center;padding:56px 20px;color:var(--mut);font-size:14.5px}
.code{background:var(--ink);color:color-mix(in srgb,var(--canvas) 88%,transparent);border-radius:16px;padding:20px 22px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.75;overflow-x:auto;white-space:pre}
.chk{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line2);font-size:14.5px;color:var(--ink2)}
.chk:last-child{border-bottom:none}
.chk .bx{width:20px;height:20px;border-radius:7px;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;margin-top:2px;transition:all .2s}
.chk.done .bx{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.chk svg{width:12px;height:12px}
/* chat */
.chat{display:grid;grid-template-columns:272px 1fr;height:calc(100vh - 210px);min-height:520px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
/* В демо-чате на лендинге фиксированная высота: сообщения прокручиваются внутри */
/* Демо-чат на главной: панель чата без списка диалогов, поэтому сетку
   нужно переключить на одну колонку — иначе окно съезжало вбок. */
#demoChat .chat{display:block;height:440px;min-height:0;max-height:440px;border:none;border-radius:0;overflow:hidden;background:var(--surf)}
#demoChat .chat>.cl{display:none}
#demoChat .cv{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;padding:0}
#demoChat .cv>.hd{display:none}
#demoChat .msgs{padding:20px 22px;flex:1;min-height:0;overflow-y:auto}
#demoChat .chips{padding:0 22px 12px;flex:none}
#demoChat .comp{padding:12px 16px;flex:none}
/* документация и остальные стили ниже */
.cl{border-right:1px solid var(--line2);overflow-y:auto}
.cl .ci{padding:16px 18px;border-bottom:1px solid var(--line2);cursor:pointer;width:100%;text-align:left;transition:background .2s}
.cl .ci:hover,.cl .ci.on{background:var(--surf2)}
.cl .ci .t{font-size:14px;font-weight:500;display:flex;justify-content:space-between;gap:10px}
.cl .ci .p{font-size:12.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.cv{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.cv .hd{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line2)}
.msgs{flex:1;min-height:0;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.msgs .row{display:flex;gap:11px;align-items:flex-end;max-width:78%}.msgs .row.u{align-self:flex-end;flex-direction:row-reverse}
/* Текст сообщения: длинные ответы и технические строки переносятся,
   а не растягивают окно чата. */
.msgs .row .tx{padding:13px 17px;border-radius:18px;font-size:14.5px;line-height:1.55;background:var(--surf2);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.msgs .row.a .tx{border-bottom-left-radius:6px}
.msgs .row.u .tx{background:var(--ink);color:var(--canvas);border-bottom-right-radius:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 28px 14px}
.chip{height:34px;padding:0 14px;border:1px solid var(--line);border-radius:var(--pl);font-size:13px;background:var(--surf);transition:all .2s}
.chip:hover{border-color:var(--ink);background:var(--ink);color:var(--canvas)}
.comp{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line2);align-items:center}
.comp input{flex:1;height:50px;border-radius:var(--pl);border:1px solid var(--line);background:var(--canvas);padding:0 20px;transition:all .2s}
.comp input:focus{outline:none;border-color:var(--ink);background:var(--surf)}
.comp .snd{width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--canvas);display:grid;place-items:center;flex:none;transition:transform .2s}
.comp .snd:hover{transform:scale(1.06)}
.typing{display:inline-flex;gap:4px;padding:15px 17px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mut2);animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.days{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;margin-bottom:22px}
.day{flex:none;padding:11px 16px;border:1px solid var(--line);border-radius:14px;font-size:13.5px;text-align:center;min-width:82px;background:var(--surf);transition:all .2s}
.day b{display:block;font-size:19px;font-family:var(--serif);font-weight:400;margin-top:2px}
.day.on{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px}
.sl{height:40px;border-radius:12px;border:1px solid var(--line);font-size:13.5px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;background:var(--surf)}
.sl:hover{border-color:var(--ink)}
.sl.busy{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
/* modal */
.ov{position:fixed;inset:0;z-index:120;background:rgba(23,19,14,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:grid;place-items:center;padding:24px;animation:fd .25s}
.modal{background:var(--surf);border-radius:26px;padding:36px;width:100%;max-width:540px;max-height:88vh;overflow-y:auto;box-shadow:var(--sh2);animation:pp .32s cubic-bezier(.2,.9,.25,1);position:relative}
.modal h3{font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:8px}
.modal .x{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--mut)}
.modal .x:hover{background:var(--surf2);color:var(--ink)}
.toasts{position:fixed;bottom:26px;right:26px;z-index:140;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{background:var(--ink);color:var(--canvas);padding:15px 21px;border-radius:15px;font-size:14px;box-shadow:var(--sh2);animation:pp .28s;max-width:360px}
.toast.ba{background:var(--bad);color:#fff}
/* служебные состояния */
.boot{min-height:100vh;display:grid;place-items:center;gap:18px;text-align:center;align-content:center}
.boot-mark{width:52px;height:52px;border-radius:16px;background:var(--ink);color:var(--canvas);display:grid;place-items:center;font-family:var(--serif);font-size:28px;justify-self:center;padding-bottom:2px}
.boot-text{color:var(--mut);font-size:14.5px}
.spin{width:15px;height:15px;border:1.8px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;animation:spn .7s linear infinite;vertical-align:-2px}
@keyframes spn{to{transform:rotate(360deg)}}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:13.5px}
.dnav-i{display:block;padding:9px 13px;border-radius:11px;font-size:14.5px;color:var(--mut)}
.dnav-i:hover{background:var(--surf2);color:var(--ink)}
.tw table.tbl td .empty{padding:40px 20px}

@keyframes pp{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fd{from{opacity:0}to{opacity:1}}
@keyframes bl{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.rv{opacity:0;transform:translateY(18px);transition:opacity calc(.75s/var(--mot)) cubic-bezier(.2,.8,.2,1),transform calc(.75s/var(--mot)) cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
/* документация: группы, поиск, разделы */
.dnav-grp{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);padding:18px 13px 6px;font-weight:500}
.dnav-grp:first-child{padding-top:0}
.dnav-i{display:block;width:100%;text-align:left;padding:8px 13px;border-radius:11px;font-size:14px;color:var(--mut);transition:all .2s}
.dnav-i:hover{background:var(--surf2);color:var(--ink)}
.dnav-i.on{background:var(--sand);color:var(--ink);font-weight:500}
.doc-search{position:sticky;top:96px;z-index:5;background:var(--canvas);padding:14px 0 18px;margin-bottom:8px}
.doc-search-row{display:flex;gap:8px;align-items:center}
.doc-search-row .inp{flex:1;height:52px;font-size:15px;border-radius:16px}
.doc-search-row .btn{height:52px;width:52px;padding:0;font-size:17px;border-radius:16px}
.doc-search-hint{font-size:12.5px;color:var(--mut);margin-top:8px;min-height:16px;line-height:1.5}
.doc-search-hint b{color:var(--ink)}
/* подсветка найденного: все совпадения и текущее */
mark.doc-hit{background:color-mix(in srgb,var(--acc) 26%,transparent);color:inherit;border-radius:4px;padding:0 2px;transition:background .2s}
mark.doc-hit-on{background:var(--ink);color:var(--canvas)}
mark.doc-hit-on::selection{background:var(--acc)}
.doc-sec{padding-top:12px;scroll-margin-top:150px}
.doc-sec h2{margin-top:44px}
.doc-sec:first-child h2{margin-top:6px}
/* шаги AI в чате: честно показывают, что он делает */
.steps-inline{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.steps-inline span{font-size:11.5px;color:var(--acc);background:var(--sand);padding:4px 10px;border-radius:999px;white-space:nowrap}
.thinking-text{margin-left:8px;font-size:13.5px;color:var(--mut)}
/* кнопка-пункт меню (например, «Глазами бизнеса») */
button.navi{width:100%;text-align:left;background:none;border:none;cursor:pointer;font:inherit}
button.navi:hover{color:var(--ink);background:var(--surf2)}

/* модальные окна и уведомления в кабинете */
.mtop .btn.g{height:38px;width:38px;padding:0;border-radius:12px;display:grid;place-items:center}

/* подвал кабинета: слева в сайдбаре и снизу в мобильной шапке */
.side-foot{display:flex;flex-wrap:wrap;gap:6px 16px;padding:16px 22px;border-top:1px solid var(--line)}
.side-foot a,.mfoot a{font-size:12px;color:var(--mut);text-decoration:none}
.side-foot a:hover,.mfoot a:hover{color:var(--ink);text-decoration:underline}
.mfoot{display:flex;flex-wrap:wrap;gap:6px 18px;padding:6px 18px 14px}

/* меню профиля (клик по аватару в мобильной шапке) */
#profileMenu{display:none}
.pmenu-back{position:fixed;inset:0;z-index:298;background:rgba(0,0,0,.25)}
.pmenu{position:fixed;top:64px;right:10px;z-index:299;width:290px;max-width:calc(100vw - 20px);
  background:var(--canvas);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;padding:8px}
.pm-h{display:flex;gap:12px;align-items:center;padding:14px 14px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pm-h .av{width:40px;height:40px;flex:none}
.pm-i{display:flex;align-items:center;gap:11px;width:100%;padding:11px 14px;border:none;background:none;
  font:inherit;font-size:14px;color:var(--ink);text-decoration:none;border-radius:11px;cursor:pointer;text-align:left}
.pm-i:hover{background:var(--surf2)}
.pm-out{color:#B3261E}

.mtop{display:none}

/* ---------------- графики аналитики ---------------- */
.bars{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:10px;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:6px;min-width:26px;flex:1 0 auto;height:100%}
.bars-c .bar{min-width:18px;flex:0 0 auto}
.bar .bv{font-size:10.5px;color:var(--mut);height:14px;white-space:nowrap}
.bar .bt{width:100%;max-width:34px;height:100%;display:flex;align-items:flex-end;
  background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:6px}
.bar .bt i{display:block;width:100%;border-radius:6px;transition:height .35s ease}
.bar .bl{font-size:10.5px;color:var(--mut2);white-space:nowrap}

.chart-line{position:relative;padding:6px 0 4px}
.chart-line svg{display:block;width:100%;height:150px}
.chart-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mut2);margin-top:6px}

.shares{display:grid;gap:12px}
.share .sh-head{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px}
.share .sh-head b{font-variant-numeric:tabular-nums}
.share .sh-bar{height:8px;background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:999px;overflow:hidden}
.share .sh-bar i{display:block;height:100%;background:var(--ink);border-radius:999px;transition:width .35s ease}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip{background:var(--surf2);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:13px}
.chips .chip b{color:var(--ink);margin-left:4px}

@media (max-width:640px){
  .bars{height:140px;gap:4px}
  .bar{min-width:20px}
  .chart-line svg{height:120px}
}

/* ---------------- вход через Telegram ---------------- */
.tgauth{margin-bottom:22px}
.tgauth-line{display:flex;align-items:center;gap:12px;color:var(--mut2);font-size:12.5px;margin-bottom:16px}
.tgauth-line::before,.tgauth-line::after{content:'';flex:1;height:1px;background:var(--line)}
.tgauth-slot{display:flex;justify-content:center;min-height:44px;align-items:center}
.tgauth-slot iframe{border-radius:12px}
.tgauth .center{text-align:center}

/* ---------------- выбор периода подписки ---------------- */
.periods{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.period{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:12px;
  border:1px solid var(--line);border-radius:13px;background:var(--surf);cursor:pointer;text-align:left}
.period:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.period.on{border-color:var(--ink);background:var(--sand)}
.period .p-t{font-size:13.5px;font-weight:500;color:var(--ink)}
.period .p-d{font-size:11.5px;color:var(--mut)}

/* ---------------- календарь на месяц вперёд ---------------- */
.month{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.mday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;
  border:1px solid var(--line);border-radius:10px;background:var(--surf);cursor:pointer;
  transition:border-color .18s,background .18s}
.mday:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.mday .md-n{font-size:13px;font-weight:500;color:var(--ink)}
.mday .md-c{font-size:10.5px;color:var(--mut)}
.mday.free .md-c{color:var(--mut2)}
.mday.busy{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.mday.today{border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.mday.on{background:var(--ink);border-color:var(--ink)}
.mday.on .md-n,.mday.on .md-c{color:var(--canvas)}
@media (max-width:980px){.month{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media (max-width:640px){.month{grid-template-columns:repeat(5,minmax(0,1fr))}.mday{padding:7px 1px}}

/* Отметка числа записей на кнопке дня */
.day{position:relative}
.day .day-n{position:absolute;top:4px;right:6px;font-size:10px;font-style:normal;
  color:var(--mut);font-weight:500}

/* Свободное окно в дневной сетке кликается */
.sl.free{cursor:pointer}
.sl.free:hover{border-color:var(--ink);color:var(--ink)}

/* ---------------- выбор формы кнопки виджета ---------------- */
.shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shape{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surf);cursor:pointer;
  transition:border-color .2s,background .2s;min-height:96px}
.shape:hover{border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.shape.on{border-color:var(--ink);background:var(--sand)}
.shape-name{font-size:13.5px;font-weight:500;color:var(--ink)}
.shape-hint{font-size:11.5px;color:var(--mut);line-height:1.4}
.shape-prev{display:block;width:34px;height:34px;background:var(--ink)}
.shape-prev-circle{border-radius:50%}
.shape-prev-rounded{border-radius:11px}
.shape-prev-square{border-radius:3px}
.shape-prev-pill{width:54px;height:28px;border-radius:999px}
.shape-prev-bar{width:64px;height:20px;border-radius:8px}
.shape-prev-tab{width:30px;height:44px;border-radius:7px}

/* ---------------- подвал внутри личного кабинета ---------------- */
.app-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  padding:34px 34px 20px;border-top:1px solid var(--line);margin-top:8px}
.app-foot .af-t{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut2);margin-bottom:10px;font-weight:500}
.app-foot .af-col{display:flex;flex-direction:column;gap:8px}
.app-foot .af-col a,.app-foot .af-col button{font-size:13.5px;color:var(--mut);text-align:left;padding:0}
.app-foot .af-col a:hover,.app-foot .af-col button:hover{color:var(--ink)}
.app-foot .lnk{background:none;border:none;font:inherit;cursor:pointer;text-decoration:underline}
.app-foot .af-bot{grid-column:1/-1;display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-size:12.5px;color:var(--mut2);padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:860px){.app-foot{grid-template-columns:1fr 1fr;padding:26px 16px 18px;gap:20px}}
@media (max-width:520px){.app-foot{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Calder marketing: editorial product presentation */
.marketing{
  --canvas:#f5f2eb;--surf:#fffefa;--surf2:#eee9df;--ink:#24231f;--ink2:#45433d;
  --mut:#77746c;--mut2:#969187;--line:#ded9ce;--line2:#ebe7df;--sand:#eee9df;
  --acc:#a66d35;--sh:0 1px 2px rgba(32,28,21,.04),0 18px 44px -32px rgba(32,28,21,.24);
  --sh2:0 24px 70px -42px rgba(32,28,21,.32)
}
.marketing .hero-editorial{padding:88px 0 72px;background:var(--canvas)}
.marketing .hero-editorial .hin{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:56px;align-items:center}
.marketing .hero-editorial .hin>div:first-child{max-width:510px}
.marketing .hero-editorial .h1{max-width:620px;font-size:clamp(50px,5.3vw,76px);line-height:.99;letter-spacing:-.035em;margin:25px 0 23px!important}
.marketing .hero-editorial .h1 em{font-weight:400;color:var(--acc)}
.marketing .hero-editorial .lead{max-width:470px;font-size:17px;line-height:1.62;color:var(--mut)}
.marketing .hero-editorial .cta{gap:10px}
.marketing .hero-editorial .btn.p{background:#24231f;color:#fffefa}
.marketing .hero-editorial .btn.s{background:transparent;border-color:#c9c2b6}
.marketing .hero-editorial .offer-badges{gap:7px!important;margin:0 0 14px!important}
.marketing .hero-editorial .bdg{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--ink2);padding:6px 10px}
.marketing .hero-editorial .bdg.ok{background:#e9eee7;border-color:#dbe3d8;color:#45634d}
.marketing .hero-editorial .micro{font-size:12.5px;line-height:1.5;max-width:400px;color:var(--mut2)}
.ops-preview{background:var(--surf);border:1px solid #d9d3c8;border-radius:12px;box-shadow:var(--sh2);overflow:hidden;min-width:0;color:var(--ink)}
.ops-top{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line2);font-size:12.5px}
.ops-brand{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.ops-mark,.ops-ai-mark{display:grid;place-items:center;background:var(--ink);color:var(--surf);font-family:var(--serif);font-size:14px;font-weight:400}
.ops-mark{width:24px;height:24px;border-radius:7px}
.ops-divider{width:1px;height:18px;background:var(--line);margin:0 3px}
.ops-caption{font-weight:400;color:var(--mut)}
.ops-live{display:flex;align-items:center;gap:7px;color:#52704f;font-size:11.5px}
.ops-live i,.ops-pulse{width:7px;height:7px;border-radius:50%;background:#6b9166;display:inline-block}
.ops-content{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(190px,.86fr);min-height:294px}
.ops-agenda,.ops-inbox{padding:22px 21px 17px;min-width:0}
.ops-agenda{border-right:1px solid var(--line2)}
.ops-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ops-overline{display:block;font-size:9px;line-height:1.3;letter-spacing:.12em;color:var(--mut2);font-weight:600}
.ops-section-head h2{font:400 25px/1.05 var(--serif);letter-spacing:-.015em;margin-top:7px}
.ops-date,.ops-count{display:grid;place-items:center;border:1px solid var(--line);color:var(--mut);font-size:10px}
.ops-date{height:25px;padding:0 9px;border-radius:999px}
.ops-count{width:23px;height:23px;border-radius:50%;font-size:11px;color:var(--ink2)}
.ops-dayline{display:grid;grid-template-columns:repeat(9,1fr);align-items:center;margin:23px 0 7px;color:var(--mut2);font:10px/1 var(--sans)}
.ops-dayline i{height:1px;background:var(--line2)}
.ops-appointments{position:relative}
.ops-appointment{display:grid;grid-template-columns:36px 8px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:61px;border-top:1px solid var(--line2)}
.ops-appointment time{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--mut)}
.ops-time-dot{width:7px;height:7px;border-radius:50%;background:#b7844d;box-shadow:0 0 0 3px #f4ede2}
.ops-appointment>div{display:grid;gap:4px;min-width:0}
.ops-appointment b{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ops-appointment span{font-size:9.5px;color:var(--mut)}
.ops-appointment em{font-style:normal;font-size:8.5px;color:#52704f;background:#edf2eb;padding:4px 6px;border-radius:999px;white-space:nowrap}
.ops-appointment.is-open .ops-time-dot{background:#8d9983;box-shadow:0 0 0 3px #edf0e9}
.ops-appointment.is-open em{color:var(--mut);background:#f1efe9}
.ops-agenda-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:13px;font-size:9px;color:var(--mut2)}
.ops-agenda-foot>span{display:flex;align-items:center;gap:5px}
.ops-agenda-foot>span svg{color:#668168}
.ops-agenda-foot a{display:flex;align-items:center;gap:5px;color:var(--ink2);font-size:9.5px}
.ops-contact{display:flex;align-items:center;gap:9px;margin-top:22px;padding:12px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.ops-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9e4da;color:#615a4f;font-size:9px}
.ops-contact>div{display:grid;gap:3px;min-width:0}
.ops-contact b{font-size:10.5px;font-weight:500}
.ops-contact span:not(.ops-avatar){font-size:9px;color:var(--mut)}
.ops-contact time{margin-left:auto;align-self:flex-start;font-size:8.5px;color:var(--mut2)}
.ops-conversation{display:grid;gap:10px;padding:15px 0}
.ops-conversation p,.ops-conversation>div{padding:10px 11px;border-radius:9px;font-size:10px;line-height:1.5}
.ops-conversation p{justify-self:end;max-width:90%;background:#f1eee8;color:var(--ink2)}
.ops-conversation>div{display:flex;align-items:flex-start;gap:7px;background:#f7f5f0;border:1px solid var(--line2)}
.ops-ai-mark{flex:none;width:17px;height:17px;border-radius:5px;font-size:10px}
.ops-inbox-foot{display:flex;align-items:center;gap:7px;font-size:9px;color:var(--mut)}
.ops-pulse{background:#788a70}
.ops-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--line2);background:#fbfaf7}
.ops-bottom span:first-child{font-size:8px;letter-spacing:.12em;color:var(--mut2);font-weight:600}
.ops-bottom span:last-child{font-size:9.5px;color:var(--mut)}
.marketing>.sec{border-top:1px solid var(--line2)}
.marketing .card,.marketing .plan{border-radius:12px;box-shadow:none}
.marketing .card{padding:26px;border-color:var(--line)}
.marketing .card.lift:hover,.marketing .plan:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.marketing .plan{padding:28px;border-color:var(--line)}
.marketing .plan.pop{border-color:#a66d35;box-shadow:inset 0 2px 0 #a66d35}
.marketing .final{border-radius:12px;background:#24231f}
.marketing .sec .hd h2{letter-spacing:-.025em}
.marketing .foot{background:var(--canvas)}
@media (max-width:1080px){
  .marketing .hero-editorial{padding:66px 0 58px}
  .marketing .hero-editorial .hin{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px}
  .marketing .hero-editorial .h1{font-size:clamp(46px,5.2vw,62px)}
  .ops-agenda,.ops-inbox{padding-left:16px;padding-right:16px}
}
@media (max-width:900px){
  .marketing .hero-editorial .hin{grid-template-columns:1fr;gap:34px}
  .marketing .hero-editorial .hin>div:first-child{max-width:640px}
  .marketing .hero-editorial .h1{max-width:680px;font-size:clamp(52px,8vw,76px)}
  .ops-preview{max-width:760px;width:100%}
}
@media (max-width:560px){
  .marketing .hero-editorial{padding:42px 0 42px}
  .marketing .hero-editorial .h1{font-size:clamp(41px,11vw,54px)!important;line-height:1.01}
  .marketing .hero-editorial .lead{font-size:15.5px}
  .marketing .hero-editorial .cta{display:grid;grid-template-columns:1fr}
  .marketing .hero-editorial .cta .btn{width:100%}
  .ops-content{grid-template-columns:1fr}
  .ops-agenda{border-right:0;border-bottom:1px solid var(--line2)}
  .ops-inbox{padding-top:18px}
  .ops-top{padding:0 13px}
  .ops-agenda,.ops-inbox{padding-left:14px;padding-right:14px}
  .ops-appointment{grid-template-columns:34px 8px minmax(0,1fr) auto;gap:7px}
  .ops-bottom{padding:10px 13px;align-items:flex-start;flex-direction:column;gap:5px}
}
@media (max-width:1180px){.hin{grid-template-columns:1fr;gap:44px}.met,.g4,.q{grid-template-columns:repeat(2,1fr)}.chat{grid-template-columns:1fr}.cl{display:none}}
@media (max-width:980px){.app{grid-template-columns:1fr}.side{display:none}.mtop{display:block;position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--canvas) 90%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.mtop .r1{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;gap:12px}.mtop .r2{display:flex;gap:7px;overflow-x:auto;padding:0 18px 14px;scrollbar-width:none}.mtop .r2::-webkit-scrollbar{display:none}.mtop .r2 a{flex:none;padding:8px 15px;border-radius:var(--pl);font-size:13.5px;border:1px solid var(--line);color:var(--mut)}.mtop .r2 a.on{background:var(--ink);color:var(--canvas);border-color:var(--ink)}.min{padding:26px 22px 70px}.doc{grid-template-columns:1fr;gap:32px}.dnav{display:none}}
@media (max-width:860px){.menu,.nr .hide-m{display:none}.burger{display:flex}.met,.g3,.g4,.plans,.q,.g2,.fg{grid-template-columns:1fr}.trust{gap:22px;justify-content:flex-start}.auth{grid-template-columns:1fr}.auth .r{display:none}.step{grid-template-columns:72px 1fr}.final{padding:56px 26px;border-radius:26px}.row2{grid-template-columns:1fr}.ph h1{font-size:26px}}

/* ============ МОБИЛЬНАЯ АДАПТАЦИЯ (телефоны) ============ */
@media (max-width:640px){
  html{font-size:15px}
  .wrap{padding:0 16px}
  .N{height:62px}.logo{font-size:15.5px}
  .hero{padding:34px 0 30px}.hin{gap:26px}
  .ph h1,.hin h1{font-size:25px!important;line-height:1.12}
  .lead{font-size:15px}
  .btn{height:44px;padding:0 16px;font-size:13.5px}
  .btn.lg{height:50px;font-size:15px}
  .sec{padding:52px 0}
  .card{padding:20px;border-radius:18px}
  .plan{padding:22px;border-radius:20px}
  .kpi{font-size:27px}
  .ph{margin-bottom:18px}.ph h1{margin-bottom:4px}
  .min{padding:16px 14px 90px}
  .mtop .r1{padding:10px 14px}.mtop .r2{padding:0 12px 10px;gap:6px}.mtop .r2 a{padding:8px 12px;font-size:12.5px}
  .mfoot{padding:8px 14px 12px}
  /* таблицы и строки данных — в карточки, чтобы не скроллить вбок */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
  .rows .rw{font-size:13.5px}
  /* крупный тап: интерактивные элементы не мельче 44px */
  a.navi,.pm-i,.mtop .r2 a{min-height:44px}
  button,.btn,.slot,.inp,select,input[type=date],input[type=time]{min-height:44px}
  .fld .inp{padding:12px 14px;font-size:16px}
  /* диалоги и чат на весь экран без боковин */
  .chat{gap:14px}.bub{max-width:92%;font-size:14px}
  .mock{border-radius:18px}
  .final{padding:36px 18px}
  .av{width:32px;height:32px;font-size:11px}
  .me{padding:12px 16px}
  /* модалки — на весь экран телефона */
  .modal,.modal-card{max-width:100vw!important;width:100vw!important;border-radius:0!important}
  code,.code{font-size:12px;word-break:break-all}
  .promo-bar{font-size:12px;padding:8px 12px}
}

/* Midday reference system, applied consistently across every Calder route */
:root{
  --canvas:#dbdad7;--surf:#fff;--surf2:#e6e4e0;--ink:#121212;--ink2:#292929;
  --mut:#616161;--mut2:#767676;--line:#c9c8c4;--line2:#d5d4d0;--sand:#e6e4e0;
  --acc:#18181b;--ok:#4caf50;--warn:#80652f;--bad:#983e38;--sh:none;--sh2:none;
  --r2:8px;--pl:9999px;--serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif
}
html[data-t=dark]{
  --canvas:#18181b;--surf:#232326;--surf2:#303034;--ink:#f5f5f2;--ink2:#e0e0dc;
  --mut:#b2b2ac;--mut2:#969690;--line:#414145;--line2:#36363a;--sand:#303034;
  --acc:#f5f5f2;--ok:#79c67c;--warn:#d2b36d;--bad:#e28b82
}
body{letter-spacing:.015em}
.d,.prose h1,.prose h2,.prose h3,.ph h1{letter-spacing:-.025em}
.eyebrow{font-size:14px;letter-spacing:.035em;text-transform:none;color:var(--mut)}
.eyebrow:before{display:none}
.nav{background:var(--canvas);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.on{box-shadow:none}
.N{height:72px}
.logo{letter-spacing:.025em}
.logo b{border-radius:50%;background:var(--surf2);color:var(--ink)}
.menu{gap:24px;letter-spacing:.035em}
.btn{border-radius:9999px;box-shadow:none!important;letter-spacing:.035em}
.btn.p{background:#18181b;color:#fff}
html[data-t=dark] .btn.p{background:#f5f5f2;color:#18181b}
.btn.s{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.p:hover,.btn.s:hover{transform:translateY(-1px);box-shadow:none}
.btn.g:hover{background:var(--surf2)}
.btn.n,.burger{border-radius:9999px}
.mnav{background:var(--canvas)}
.mnav-body a,.mnav-body button{font-family:var(--sans);letter-spacing:.025em}
.hero{background:var(--canvas)}
.h1 em,.marketing .d em,.marketing .hd em{font-style:normal;color:inherit}
.mock,.ops-preview,.card,.plan,.tw,.chat,.note,.modal{border-radius:8px;box-shadow:none}
.card{padding:24px;background:var(--surf);border-color:var(--line)}
.card.lift:hover,.plan:hover{transform:none;box-shadow:none}
.ic{width:36px;height:36px;border-radius:8px;background:var(--surf2);color:var(--ink);margin-bottom:18px}
.plan{padding:24px;background:var(--surf);border-color:var(--line)}
.plan.pop{border-color:var(--ink);box-shadow:inset 0 2px var(--ink)}
.tagi{font-size:12px;letter-spacing:.035em;text-transform:none;color:var(--ink);background:var(--surf2);border:1px solid var(--line);padding:5px 10px}
.met .v{font-size:42px}
.trust{letter-spacing:.05em;color:var(--mut)}
.final{border-radius:8px;background:#18181b}
html[data-t=dark] .final{background:#303034}
.final .btn.p{background:#fff;color:#18181b}
html[data-t=dark] .final .btn.p{background:#f5f5f2;color:#18181b}
.final .btn.s{border-color:color-mix(in srgb,var(--canvas) 42%,transparent)}
.foot{border-color:var(--line)}
.fg h4{font-size:14px;letter-spacing:.035em;text-transform:none;color:var(--ink2)}
.dnav button,.dnav-i{border-radius:9999px}
.dnav-i.on{background:var(--surf2)}
.doc-search{background:var(--canvas)}
.doc-search-row .inp,.doc-search-row .btn{border-radius:9999px}
.prose h1{font-size:clamp(38px,4.4vw,56px)}
.note{background:var(--surf2);border-color:transparent}
.auth{background:var(--canvas)}
.auth .r{background:#18181b}
html[data-t=dark] .auth .r{background:#303034}
.auth .r .glow{display:none}
.auth-switch{border:0;border-radius:9999px;background:var(--surf2)}
.auth-switch button,.auth-switch button.on{border-radius:9999px;box-shadow:none}
.auth-switch button.on{background:var(--surf);color:var(--ink)}
.demo-b{border:0;border-radius:8px;background:var(--surf2)}
.inp{border-radius:8px;background:var(--surf);border-color:var(--line);letter-spacing:.025em}
.inp:focus{border-color:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 12%,transparent)}
.app{background:var(--canvas)}
.side{background:var(--canvas);border-right-color:var(--line)}
.navi{border-radius:9999px;letter-spacing:.025em;box-shadow:none!important}
.navi.on{background:var(--surf2);color:var(--ink)}
.grp{font-size:12px;letter-spacing:.05em;text-transform:none;color:var(--mut)}
.me,.tbl td,.li,.chk,.app-foot,.cl,.cl .ci,.cv .hd,.comp{border-color:var(--line2)}
.bdg{border-radius:9999px;background:var(--surf2);letter-spacing:.025em}
.bdg.ok{background:#edf5ed;color:#35683a}
.bdg.wa{background:#f1eee5;color:#735a29}
.bdg.ba{background:#f5e9e8;color:#8f3934}
html[data-t=dark] .bdg.ok{background:#263a29;color:#a1d5a3}
html[data-t=dark] .bdg.wa{background:#3b3526;color:#dfc886}
html[data-t=dark] .bdg.ba{background:#402a29;color:#e7a29b}
.tw,.chat{background:var(--surf);border-color:var(--line)}
.tbl th{font-size:12px;letter-spacing:.04em;text-transform:none}
.tabs{border-radius:9999px;background:var(--surf2)}
.tabs button,.tabs button.on{border-radius:9999px;box-shadow:none}
.tabs button.on{background:var(--surf);color:var(--ink)}
.code{border-radius:8px;background:#18181b}
html[data-t=dark] .code{background:#111113}
.chk .bx{border-radius:4px}
.msgs .row .tx{border-radius:8px;background:var(--surf2);letter-spacing:.015em}
.msgs .row.a .tx{border-bottom-left-radius:8px}
.msgs .row.u .tx{background:#18181b;color:#fff;border-bottom-right-radius:8px}
html[data-t=dark] .msgs .row.u .tx{background:#444449;color:#fff}
.chip{border:0;background:var(--surf2);border-radius:9999px;letter-spacing:.025em}
.chip:hover{background:#18181b;color:#fff}
html[data-t=dark] .chip:hover{background:#f5f5f2;color:#18181b}
.comp input{border-radius:9999px;background:var(--surf2);border-color:transparent}
.comp .snd{background:#18181b;color:#fff}
html[data-t=dark] .comp .snd{background:#f5f5f2;color:#18181b}
.day,.sl,.period,.shape{border-radius:8px;background:var(--surf);border-color:var(--line)}
.day.on,.sl.busy,.period.on,.shape.on{background:#18181b;color:#fff;border-color:#18181b}
html[data-t=dark] .day.on,html[data-t=dark] .sl.busy,html[data-t=dark] .period.on,html[data-t=dark] .shape.on{background:#f5f5f2;color:#18181b;border-color:#f5f5f2}
.meter,.bars .b{border-radius:4px}
.bars .c.hi .b,.meter i{background:var(--ok)}
.modal,.toast,.pmenu{box-shadow:none}
.marketing{--canvas:#dbdad7;--surf:#fff;--surf2:#e6e4e0;--ink:#121212;--ink2:#292929;--mut:#616161;--mut2:#767676;--line:#c9c8c4;--line2:#d5d4d0;--sand:#e6e4e0;--acc:#18181b;--ok:#4caf50;--sh:none;--sh2:none}
html[data-t=dark] .marketing{--canvas:#18181b;--surf:#232326;--surf2:#303034;--ink:#f5f5f2;--ink2:#e0e0dc;--mut:#b2b2ac;--mut2:#969690;--line:#414145;--line2:#36363a;--sand:#303034;--acc:#f5f5f2}
.marketing .hero-editorial .h1 em{font-style:normal;color:inherit}
.marketing .hero-editorial .btn.p{background:#18181b;color:#fff}
html[data-t=dark] .marketing .hero-editorial .btn.p{background:#f5f5f2;color:#18181b}
.marketing .hero-editorial .btn.s{background:transparent;border-color:var(--line)}
.marketing .hero-editorial .bdg.ok{background:#edf5ed;border-color:transparent;color:#35683a}
.marketing .card,.marketing .plan{border-radius:8px;box-shadow:none}
.marketing .plan.pop{border-color:var(--ink);box-shadow:inset 0 2px var(--ink)}
.marketing .final{border-radius:8px;background:#18181b}
html[data-t=dark] .marketing .final{background:#303034}
@media(max-width:640px){.card{border-radius:8px;padding:18px}.plan{border-radius:8px;padding:20px}.final{border-radius:8px}.marketing .card,.marketing .plan{border-radius:8px}.auth{min-height:100svh}}




/* ==========================================================================
   Визуал Steep
   --------------------------------------------------------------------------
   Не «перекраска», а смена композиции: огромный серифный заголовок по центру,
   много воздуха, пастельные карточки и мягкие блоки. Функции и разметка
   прежние — меняется только оформление.
   ========================================================================== */

/* ------------------------------- шрифты ---------------------------------- */

@font-face {
  font-family: 'Steep Serif';
  src: url('/fonts/signifier.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Steep Serif';
  src: url('/fonts/signifier-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Steep Sans';
  src: url('/fonts/sohne.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Steep Sans';
  src: url('/fonts/sohne-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------- палитра --------------------------------- */

:root,
html[data-t='light'] {
  --acc: #121212;
  --ff: 'Steep Sans';
  --canvas: #ffffff;
  --surf: #ffffff;
  --surf2: #f7f7f8;
  --ink: #000000;
  --ink2: #2f2f33;
  --mut: #777b86;
  --mut2: #a3a6af;
  --line: #ececec;
  --line2: #f2f2f3;
  --sand: #fbe1d1;
  --blue: #d3e3fc;
  --ok: #2c7a4b;
  --warn: #9c6b1d;
  --bad: #b23a31;
  --sh: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .04);
  --sh2: 0 0 0 1px rgba(0, 0, 0, .05), 0 18px 60px rgba(0, 0, 0, .10);
  --r2: 20px;
  --pl: 9999px;
  --serif: 'Steep Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Steep Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

html[data-t='dark'] {
  --canvas: #121212;
  --surf: #171718;
  --surf2: #1d1d1f;
  --ink: #f5f5f6;
  --ink2: #d5d5d8;
  --mut: #a3a6af;
  --mut2: #7d818a;
  --line: #2a2a2c;
  --line2: #202022;
  --sand: #3a2418;
  --blue: #1b2739;
  --acc: #fbe1d1;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.006em;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ======================= ЛЕНДИНГ: композиция Steep ======================== */

.marketing { background: #fff !important; }

/* шапка: тонкая, по центру меню, справа чёрная пилюля */
.marketing .nav { background: rgba(255, 255, 255, .9); border-bottom: 1px solid transparent; }
.marketing .nav.on { border-bottom-color: var(--line); box-shadow: none; }
.marketing .N { height: 68px; }
.marketing .logo { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.marketing .logo b {
  background: var(--sand); color: #5d2a1a;
  border-radius: 8px; font-family: var(--serif); font-size: 15px;
}
.marketing .menu { font-size: 15.5px; gap: 4px; color: #000; }
.marketing .menu a { padding: 8px 14px; border-radius: 9999px; transition: background-color .16s; }
.marketing .menu a:hover { background: var(--surf2); }

/* герой: белое поле, всё по центру, огромный сериф */
.marketing .hero-editorial {
  padding: 110px 0 96px;
  background: #fff !important;
  text-align: center;
}
.marketing .hero-editorial .hin {
  display: block !important;
  max-width: 1180px;
  margin: 0 auto;
}
.marketing .hero-editorial .hin > div:first-child { max-width: 100% !important; margin: 0 auto; }

.marketing .hero-editorial .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--surf2);
  color: var(--mut);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: none;
}
.marketing .hero-editorial .eyebrow:before { display: none; }

.marketing .hero-editorial .h1,
.marketing .hero-editorial h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px) !important;
  line-height: .98 !important;
  letter-spacing: -.03em !important;
  margin: 26px auto 22px !important;
  max-width: 15ch !important;
  text-align: center;
}
.marketing .hero-editorial .h1 em { font-style: normal; color: inherit; }

.marketing .hero-editorial .lead {
  font-size: clamp(17px, 1.45vw, 20px) !important;
  line-height: 1.5 !important;
  color: var(--mut);
  max-width: 620px !important;
  margin: 0 auto !important;
  text-align: center;
}

.marketing .hero-editorial .cta {
  justify-content: center;
  gap: 14px !important;
  margin-top: 34px !important;
}

.marketing .hero-editorial .offer-badges {
  justify-content: center;
  gap: 8px !important;
  margin-top: 22px !important;
}
.marketing .hero-editorial .bdg {
  background: var(--surf2);
  border: 0;
  border-radius: 9999px;
  color: var(--ink2);
  padding: 8px 14px;
  font-size: 13px;
}
.marketing .hero-editorial .bdg.ok { background: var(--sand); color: #6d3a22; }
.marketing .hero-editorial .micro {
  margin: 18px auto 0;
  text-align: center;
  color: var(--mut2);
  font-size: 13px;
  max-width: 46ch;
}

/* продукт: пастельная плашка, внутри белая карточка */
.marketing .ops-preview {
  background: linear-gradient(180deg, #eaf1fd 0%, var(--blue) 100%) !important;
  border: 0 !important;
  border-radius: 28px !important;
  padding: 26px 22px 18px;
  box-shadow: none !important;
  margin: 56px auto 0;
  max-width: 1080px;
}
.marketing .ops-top,
.marketing .ops-content,
.marketing .ops-bottom {
  background: #fff;
  border-radius: 18px 18px 0 0;
}
.marketing .ops-bottom { border-radius: 0 0 18px 18px; }
.marketing .ops-caption { color: #4a5b75; }
.marketing .ops-live { color: #3f5d45; }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; min-height: 48px; padding: 14px 26px;
  border-radius: 9999px; border: 0;
  font-family: var(--sans); font-size: 16px; font-weight: 430; line-height: 1.2;
  transition: background-color .16s, transform .16s, box-shadow .16s;
}
.btn.p { background: #121212; color: #fff; }
.btn.p:hover { background: #000; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.btn.s { background: var(--surf2); color: #000; box-shadow: none; border: 0; }
.btn.s:hover { background: #ececee; transform: translateY(-1px); }
.btn.sm { min-height: 38px; padding: 9px 18px; font-size: 14.5px; }
.btn.n { min-height: 34px; padding: 7px 14px; font-size: 13.5px; }
html[data-t='dark'] .btn.p { background: #fff; color: #111; }

/* секции: много воздуха, заголовок по центру */
.marketing .sec { padding: 120px 0 !important; background: #fff !important; }
.marketing .sec.tight { padding: 84px 0 !important; }
.marketing h2,
.marketing .h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -.025em;
  max-width: 20ch;
}
.marketing .sec > .wrap > .h2,
.marketing .sec .center .h2 { margin-left: auto; margin-right: auto; }

/* карточки-плитки: пастель вместо рамок */
.marketing .met,
.marketing .g4,
.marketing .q { gap: 20px !important; }

.marketing .met > *,
.marketing .g4 > *,
.marketing .q > *,
.marketing .card {
  background: var(--surf2);
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  padding: 26px 24px !important;
}

.marketing .met > *:nth-child(3n+1),
.marketing .g4 > *:nth-child(3n+1) { background: var(--blue); }

.marketing .met > *:nth-child(3n+2),
.marketing .g4 > *:nth-child(3n+2) { background: var(--sand); }

.marketing .met h3,
.marketing .g4 h3 { font-family: var(--sans); font-size: 17px; font-weight: 500; }
.marketing .met .ic { background: rgba(255, 255, 255, .6); color: #121212; border-radius: 12px; }

/* цифры-метрики как на Steep: огромный сериф */
.marketing .num,
.marketing .kpi { font-family: var(--serif); letter-spacing: -.03em; }

/* тарифы: белые карточки, у выбранной — чёрная обводка */
.marketing .plans { gap: 18px !important; }
.marketing .plan {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  padding: 30px 28px !important;
}
.marketing .plan.pop {
  border: 2px solid #121212 !important;
  box-shadow: none !important;
}
.marketing .plan .price,
.marketing .plan .sum { font-family: var(--serif); letter-spacing: -.03em; }

/* финальный блок: чёрный, круглый, с большим серифом */
.marketing .final {
  background: #121212 !important;
  border-radius: 28px !important;
  padding: 80px 40px !important;
  color: #fff;
}
.marketing .final h2,
.marketing .final .h2 { color: #fff; }

/* подвал спокойный */
.marketing .foot, .marketing footer { border-top: 1px solid var(--line); }

/* ============================== КАБИНЕТ ================================== */

.app { grid-template-columns: 248px 1fr; }
.side { background: #fff; border-right: 1px solid var(--line); padding: 22px 14px; }
html[data-t='dark'] .side { background: #121212; }

.navi {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  transition: background-color .16s, color .16s;
}
.navi:hover { background: var(--surf2); color: var(--ink); }
.navi.on { background: var(--surf2); color: var(--ink); font-weight: 430; box-shadow: none; }

.card {
  background: var(--surf);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
html[data-t='dark'] .card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }

.kpi { font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -.02em; }

.tabs { border-radius: 9999px; background: var(--surf2); padding: 4px; }
.tabs button { border-radius: 9999px; font-size: 14px; }
.tabs button.on { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }

.chip, .chips .chip { border-radius: 9999px; border: 1px solid var(--line); background: #fff; }
.chip:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

input[type='text'], input[type='email'], input[type='password'], input[type='tel'],
input[type='url'], input[type='number'], input[type='search'], select, textarea {
  border-radius: 12px; border: 0; background: var(--surf2);
  padding: 13px 16px; font-size: 15.5px; color: var(--ink); box-shadow: none;
  transition: box-shadow .16s, background-color .16s;
}
input:focus, select:focus, textarea:focus {
  outline: 0; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut2); font-weight: 500; }
td { border-top: 1px solid var(--line); }
.badge, .tag, .status { border-radius: 9999px; font-size: 12px; padding: 4px 10px; }

.modal, .sheet, .dialog {
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 80px rgba(0, 0, 0, .18);
}

@media (max-width: 900px) {
  .marketing .hero-editorial { padding: 64px 0 56px; }
  .marketing .sec { padding: 72px 0 !important; }
  .marketing .ops-preview { margin-top: 36px; padding: 16px 12px 12px; }
}


/* ==========================================================================
   Кабинет в визуале Steep: композиция, а не только цвета.
   Крупные серифные цифры, пастельные карточки, воздух, пилюли.
   ========================================================================== */

/* ------------------------------ каркас ----------------------------------- */

/* каркас — только на широких экранах, на телефоне работает их мобильная сетка */
@media (min-width: 981px) {
  .app { grid-template-columns: 248px minmax(0, 1fr); }
  .side { background: #fff; border-right: 1px solid var(--line); padding: 22px 14px; }
  .min { padding: 40px 44px 72px !important; max-width: 1180px; }
}
html[data-t='dark'] .side { background: #121212; }

.side .logo { padding: 2px 10px 22px; font-size: 17px; font-weight: 500; }
.side .logo b {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--sand); color: #5d2a1a;
  font-family: var(--serif); font-size: 15px;
}

.navi {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--mut);
  transition: background-color .16s, color .16s;
}
.navi svg { width: 17px; height: 17px; }
.navi:hover { background: var(--surf2); color: var(--ink); }
.navi.on { background: var(--surf2); color: var(--ink); font-weight: 430; box-shadow: none; }

/* ------------------------------- заголовок -------------------------------- */

.ph { align-items: flex-end; margin-bottom: 30px; }
.ph h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.ph p { color: var(--mut); font-size: 16px; margin-top: 10px; }

/* --------------------------------- карточки ------------------------------- */

.grid.g4 { gap: 18px !important; }
.grid.g2 { gap: 18px !important; }

.card {
  background: var(--surf);
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06) !important;
}
html[data-t='dark'] .card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) !important; }

/* пастель как на дашборде Steep */
.grid.g4 > .card:nth-child(4n+1) { background: var(--blue); box-shadow: none !important; }
.grid.g4 > .card:nth-child(4n+2) { background: var(--sand); box-shadow: none !important; }
.grid.g4 > .card:nth-child(4n+3) { background: var(--surf2); box-shadow: none !important; }
.grid.g4 > .card:nth-child(4n+4) { background: var(--surf2); box-shadow: none !important; }

.grid.g4 > .card .xs.mut { color: #4a4a52; }

/* цифры */
.kpi {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.03em;
  margin-top: 16px !important;
}
.kpi small { font-family: var(--sans); font-size: 14px; color: var(--mut); letter-spacing: 0; }

/* ------------------------------- график ----------------------------------
   Столбики оставляем как в их коде, только цвет и подложка. */

.bars { height: 168px; }
.bars .b { background: #d3e3fc; border-radius: 8px; }
.bars .c.hi .b { background: #20518f; }
.bars .c .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.bars .x { color: var(--mut2); }
/* ------------------------------- кнопки ---------------------------------- */

.btn {
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 9999px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 430;
  border: 0;
  transition: background-color .16s, transform .16s, box-shadow .16s;
}
.btn.p { background: #121212; color: #fff; }
.btn.p:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, .16); }
html[data-t='dark'] .btn.p { background: #fff; color: #111; }
.btn.s { background: var(--surf2); color: var(--ink); border: 0; }
.btn.s:hover { background: #ececee; transform: translateY(-1px); box-shadow: none; }
.btn.sm { min-height: 36px; padding: 8px 16px; font-size: 14px; }
.btn.n { min-height: 32px; padding: 6px 14px; font-size: 13px; }

/* ------------------------------ прочее ----------------------------------- */

.empty {
  border-radius: 16px;
  background: var(--surf2);
  color: var(--mut);
  padding: 22px;
  font-size: 15px;
}

.chip, .chips .chip {
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: #fff;
  height: 36px;
}
.chip:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

input[type='text'], input[type='email'], input[type='password'], input[type='tel'],
input[type='url'], input[type='number'], input[type='search'], select, textarea {
  border-radius: 12px;
  border: 0;
  background: var(--surf2);
  padding: 13px 16px;
  font-size: 15.5px;
  box-shadow: none;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut2); font-weight: 500; }
td { border-top: 1px solid var(--line); }

.mtop { border-bottom: 1px solid var(--line); }

@media (max-width: 1100px) {
  .min { padding: 26px 22px 64px !important; }
  .kpi { font-size: 38px; }
}

/* --------------------------- кабинет на телефоне -------------------------- */

@media (max-width: 980px) {
  .min { padding: 20px 16px 64px !important; }
  .ph h1 { font-size: 28px; }
  .ph { margin-bottom: 18px; }
  .ph p { font-size: 14.5px; }

  .grid.g4 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .grid.g4 > .card { padding: 16px 16px 14px !important; border-radius: 16px !important; }
  .kpi { font-size: 30px; margin-top: 6px !important; }
  .grid.g4 .xs.mut { font-size: 11.5px; }

  .grid.g2 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .card { padding: 18px !important; border-radius: 16px !important; }

  .mtop .r1 { padding: 12px 16px; }
  .mtop .r2 { padding: 0 12px 12px; gap: 6px; }
  .mtop .r2 a { padding: 7px 13px; font-size: 13px; }

  .side-foot { padding: 10px 16px !important; gap: 4px 14px !important; border-top: 1px solid var(--line); }
  .side-foot a { font-size: 11.5px; }

  .btn { min-height: 42px; padding: 10px 18px; font-size: 14.5px; }
}

@media (max-width: 520px) {
  .grid.g4 { grid-template-columns: 1fr !important; }
  .kpi { font-size: 34px; }
}

/* ==========================================================================
   Экраны кабинета: записи, услуги, виджет, подписка — одна композиция Steep
   Списки с воздухом, пастельные плитки, пилюли вместо рамок, сериф в заголовках.
   ========================================================================== */

/* ---------- карточки в сетках больше не разъезжаются ---------- */

.grid { min-width: 0; }
.grid > .card { min-width: 0; }
.card { min-width: 0; }

.card > h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* ---------- строки списков (услуги, знания, платежи, заявки) ---------- */

.li { gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.li > div:first-child { min-width: 0; flex: 1 1 auto; }
.li .sm { line-height: 1.4; }
.li .xs.mut { line-height: 1.45; }
.li:last-child { border-bottom: 0; }

/* ---------- переключатель ---------- */

.sw { background: #e9e9ec; }
.sw.on { background: #121212; }
html[data-t='dark'] .sw { background: #2a2a2c; }
html[data-t='dark'] .sw.on { background: #fff; }

/* ---------- календарь записей ---------- */

.days { gap: 8px; padding-bottom: 4px; }
.day {
  border: 0;
  border-radius: 16px;
  background: var(--surf2);
  min-width: 78px;
  padding: 10px 14px;
  transition: background-color .16s, color .16s, transform .16s;
}
.day:hover { background: #ececee; transform: translateY(-1px); }
.day.on { background: #121212; color: #fff; }
.day b { font-family: var(--serif); font-weight: 400; }

/* месяц — календарной сеткой по неделям */
.month { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mday {
  border: 0;
  border-radius: 14px;
  background: var(--surf2);
  padding: 10px 4px;
  transition: background-color .16s, transform .16s, color .16s;
}
.mday:hover { background: #ececee; transform: translateY(-1px); }
.mday .md-n { font-size: 13px; font-weight: 500; }
.mday .md-c { font-size: 11px; }
.mday.on { background: #121212; color: #fff; }
.mday.on .md-n, .mday.on .md-c { color: #fff; }

/* слоты времени — пилюли */
.slots { gap: 8px; }
.slot {
  border: 0;
  border-radius: 9999px;
  background: var(--surf2);
  height: 38px;
  padding: 0 16px;
  transition: background-color .16s, color .16s;
}
.slot:hover { background: #ececee; color: var(--ink); }
.slot.on { background: #121212; color: #fff; }
.slot.busy, .slot[disabled] { background: #f2f2f3; color: var(--mut2); }

/* ---------- формы ---------- */

.card .field, .card label { font-size: 13.5px; }
textarea { min-height: 96px; }

/* выбор файла — как кнопка */
input[type='file'] {
  padding: 8px;
  background: var(--surf2);
  border-radius: 12px;
  color: var(--mut);
  font-size: 13.5px;
}
input[type='file']::file-selector-button {
  border: 0;
  border-radius: 9999px;
  padding: 9px 16px;
  margin-right: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
input[type='file']::file-selector-button:hover { background: #ececee; }

/* ---------- тарифы в подписке ---------- */

.plans { gap: 16px; }
.plan {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: none;
}
.plan:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.plan.pop {
  border: 2px solid #121212;
  box-shadow: none;
}
.plan .nm { font-family: var(--serif); font-size: 24px; letter-spacing: -.02em; }
.plan .pr, .plan .price { font-family: var(--serif); letter-spacing: -.02em; }
.plan ul { gap: 10px; margin: 20px 0 24px; }

/* ---------- уведомления и плашки ---------- */

.note {
  border-radius: 16px;
  background: var(--blue);
  color: #22314a;
  padding: 16px 18px;
  font-size: 14.5px;
}
.note.warn, .note.wa { background: var(--sand); color: #6d3a22; }

.bdg { border-radius: 9999px; }

/* ---------- виджет: превью ---------- */

.card .preview, .card .wprev { border-radius: 18px; }

@media (max-width: 1100px) {
  .month { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .day { min-width: 68px; padding: 9px 12px; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .month { gap: 4px; }
  .mday { padding: 8px 2px; border-radius: 10px; }
  .li { flex-wrap: wrap; }
  .card > h3 { font-size: 19px; }
}

/* ---------- строки услуг и знаний: текст не вылезает за карточку ---------- */

.li { flex-wrap: wrap; row-gap: 10px; }
.li > div { min-width: 0; }
.li > div > div { overflow-wrap: anywhere; }

/* блок с переключателем и кнопками идёт отдельной строкой внутри карточки */
.card > div[style*="display:flex"] {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.card > div[style*="display:flex"]:last-child { margin-bottom: 0; }

/* длинные подписи в карточках не расширяют колонку */
.card { overflow-wrap: anywhere; }
/* ---------- планшет и узкие экраны: одна колонка, ничего не вылезает ---------- */

@media (max-width: 1100px) {
  .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .grid > * { min-width: 0; }
  .card { max-width: 100%; }
  .card > div[style*="display:flex"],
  .li,
  .plan ul li { flex-wrap: wrap; }
  .wprev, .wpreview, .preview { max-width: 100%; }
}

@media (max-width: 900px) {
  .plan { padding: 22px 18px; border-radius: 18px; }
  .plan ul { gap: 8px; }
  .btn, .btn.p, .btn.s { max-width: 100%; }
  .bdg { max-width: 100%; }
  a.btn, button.btn { white-space: normal; }
}

@media (max-width: 768px) {
  .plans { grid-template-columns: minmax(0, 1fr) !important; }
  .tabs { width: 100%; overflow-x: auto; }
}
/* ==========================================================================
   Финальная вычистка кабинета под визуал Steep
   ========================================================================== */

/* шапка страницы: редакционная линия под заголовком */
.ph { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ph h1 { letter-spacing: -.028em; }

/* карточки: то же кольцо, что на сайте */
.card { border-radius: 20px; }
.card > h3 + .xs.mut { max-width: 60ch; line-height: 1.5; }

/* чат: панель как карточка сайта */
.chat {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
  overflow: hidden;
  background: #fff;
}
html[data-t='dark'] .chat { box-shadow: 0 0 0 1px rgba(255, 255, 255, .07); background: #171718; }

.chat .cl { border-right: 1px solid var(--line); background: #fff; }
html[data-t='dark'] .chat .cl { background: #141415; }

.ci {
  border-radius: 12px;
  border: 0;
  padding: 12px 14px;
  transition: background-color .16s;
}
.ci:hover { background: var(--surf2); }
.ci.on { background: var(--surf2); box-shadow: none; }

.chat .hd {
  border-bottom: 1px solid var(--line);
  padding: 16px 22px;
  font-size: 13px;
  letter-spacing: .02em;
}

/* пузыри: скругления как на Steep */
.msgs .row .tx { border-radius: 18px; }
.msgs .row.a .tx { border-bottom-left-radius: 6px; background: var(--surf2); }
.msgs .row.u .tx { border-bottom-right-radius: 6px; background: #121212; color: #fff; }
html[data-t='dark'] .msgs .row.u .tx { background: #fff; color: #111; }

/* поля и подписи */
.card label, .card .field > span { color: var(--mut); font-size: 12.5px; }

/* мобильная шапка кабинета */
.mtop {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
html[data-t='dark'] .mtop { background: rgba(18, 18, 18, .92); }

/* таблицы: воздух и тонкие линии */
table td { padding: 14px 12px; }
table th { padding-bottom: 12px; }

/* ссылки-кнопки в списках */
.li .btn.n { border: 1px solid var(--line); background: #fff; }
.li .btn.n:hover { background: var(--surf2); border-color: transparent; }
/* ============================ Экран приветствия ============================ */

.onb { min-height: 100vh; background: #fff; display: flex; flex-direction: column; align-items: center; }
html[data-t='dark'] .onb { background: #121212; }

.onb-logo { margin: 26px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.onb-logo b {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--sand); color: #5d2a1a;
  font-family: var(--serif); font-size: 15px; font-weight: 400;
}

.onb-in { width: 100%; max-width: 760px; padding: 48px 24px 72px; text-align: center; }

.onb-hello { font-size: 14px; color: var(--mut); margin: 0 0 14px; }

.onb-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 18px;
}

.onb-lead {
  font-size: 17px;
  line-height: 1.5;
  color: var(--mut);
  max-width: 54ch;
  margin: 0 auto 26px;
}

.onb-steps {
  display: flex; justify-content: center; align-items: center; gap: 22px;
  font-size: 13px; color: var(--mut2); margin-bottom: 26px; flex-wrap: wrap;
}
.onb-steps span { display: inline-flex; align-items: center; gap: 8px; }
.onb-steps b {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surf2); color: var(--mut); font-size: 12px; font-weight: 500;
}
.onb-steps .on { color: var(--ink); }
.onb-steps .on b { background: #121212; color: #fff; }

.onb-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.onb-form input {
  flex: 1 1 340px; min-width: 240px; height: 56px;
  border-radius: 9999px; border: 0; background: var(--surf2);
  padding: 0 22px; font-size: 16px;
}
.onb-form input:focus { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.onb-form .btn { height: 56px; padding: 0 28px; font-size: 16px; }

.onb-hint { font-size: 13px; color: var(--mut2); margin: 12px 0 0; }
.onb-result {
  margin: 18px auto 0; max-width: 520px;
  background: var(--surf2); border-radius: 14px; padding: 14px 18px; font-size: 14px;
}
.onb-result a { color: #1f5fbf; text-decoration: underline; text-underline-offset: 3px; }

.onb-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin: 44px 0 26px; text-align: left;
}
.onb-cols b { font-family: var(--serif); font-size: 26px; color: #d8d8db; display: block; }
.onb-cols p { font-size: 14px; color: var(--mut); margin: 8px 0 0; line-height: 1.45; }

.onb-skip { font-size: 14px; color: var(--mut); }
.onb-skip:hover { color: var(--ink); }

@media (max-width: 720px) {
  .onb-in { padding: 28px 18px 56px; }
  .onb-cols { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .onb-form .btn { width: 100%; }
  .onb-steps { gap: 12px; font-size: 12px; }
}
/* ====================== Виджет: проще и как в видео ======================= */

/* переключатель устройства в предпросмотре */
.wt-dev { display: inline-flex; gap: 4px; background: var(--surf2); border-radius: 9999px; padding: 4px; }
.wt-dev-btn {
  border: 0; background: transparent; cursor: pointer;
  border-radius: 9999px; padding: 8px 16px;
  font: inherit; font-size: 13.5px; color: var(--mut);
  transition: background-color .16s, color .16s;
}
.wt-dev-btn:hover { color: var(--ink); }
.wt-dev-btn.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }

/* предпросмотр в режиме телефона */
.wt-preview { transition: max-width .25s ease, margin .25s ease; }
.wt-preview.wt-phone { max-width: 380px; margin: 0 auto; }

/* свёрнутый блок нейросети */
.wt-ai { padding: 0; overflow: hidden; }
.wt-ai > summary {
  cursor: pointer; list-style: none;
  padding: 18px 22px; font-size: 15px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wt-ai > summary::-webkit-details-marker { display: none; }
.wt-ai > summary:after { content: '+'; font-size: 18px; color: var(--mut); }
.wt-ai[open] > summary:after { content: '–'; }
.wt-ai > summary:hover { background: var(--surf2); }
.wt-ai > .card, .wt-ai > div { margin: 0 22px 18px !important; }

@media (max-width: 900px) {
  .wt-dev-btn { padding: 7px 12px; font-size: 12.5px; }
  .wt-preview.wt-phone { max-width: 100%; }
}
/* --------- аккордеоны настроек в экране виджета --------- */

#widgetView details.acc { padding: 0; overflow: hidden; margin-bottom: 12px; }
#widgetView details.acc > summary {
  cursor: pointer; list-style: none;
  padding: 16px 20px;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#widgetView details.acc > summary::-webkit-details-marker { display: none; }
#widgetView details.acc > summary:after {
  content: '+'; font-size: 18px; color: var(--mut); font-weight: 400;
}
#widgetView details.acc[open] > summary:after { content: '–'; }
#widgetView details.acc > summary:hover { background: var(--surf2); }
#widgetView details.acc[open] > summary { border-bottom: 1px solid var(--line); }
#widgetView details.acc > *:not(summary) { margin-left: 20px; margin-right: 20px; }
#widgetView details.acc > *:not(summary):first-of-type { margin-top: 16px; }
#widgetView details.acc > *:not(summary):last-child { margin-bottom: 18px; }

/* карточка с кодом — видная сверху */
#widgetView .code { word-break: break-all; }
/* ============ Меню кабинета группами + вкладки виджета (как в Quickchat) ==== */

.navg {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut2);
  padding: 16px 12px 6px;
  font-weight: 500;
}
.navg:first-child { padding-top: 6px; }

/* вкладки на экране виджета */
.wt-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--surf2);
  border-radius: 9999px;
  padding: 4px;
  margin: 0 0 18px;
}
.wt-tab {
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 9999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  color: var(--mut);
  transition: background-color .16s, color .16s;
}
.wt-tab:hover { color: var(--ink); }
.wt-tab.on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
html[data-t='dark'] .wt-tab.on { background: #202022; }

@media (max-width: 700px) {
  .wt-tabs { width: 100%; overflow-x: auto; }
  .wt-tab { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
}
/* ---------------- Приветствие и шаги на «Обзоре» (как в Quickchat) --------- */

.qc-hello { padding: 4px 0 26px; }
.qc-hello h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0 0 8px;
}
.qc-hello p { color: var(--mut); font-size: 16px; margin: 0; }

.qc-next { margin: 0 0 26px; }
.qc-next-t { font-size: 13px; color: var(--mut2); margin-bottom: 12px; }
.qc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qc-step {
  display: block;
  background: var(--surf2);
  border-radius: 16px;
  padding: 18px 20px;
  transition: background-color .16s, transform .16s;
}
.qc-step:nth-child(1) { background: var(--blue); }
.qc-step:nth-child(2) { background: var(--sand); }
.qc-step:hover { transform: translateY(-2px); }
.qc-step b { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.qc-step span { font-size: 13.5px; color: var(--ink2); line-height: 1.45; display: block; }

@media (max-width: 900px) {
  .qc-steps { grid-template-columns: 1fr; }
  .qc-hello h1 { font-size: 28px; }
}
/* ------------------- выбор режима: кнопка / чат / страница ---------------- */

.wt-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.wt-mode {
  text-align: left;
  background: var(--surf2);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 14px 16px;
  cursor: pointer;
  font: inherit;
  transition: background-color .16s, border-color .16s, transform .16s;
}
.wt-mode:hover { transform: translateY(-1px); }
.wt-mode b { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--ink); }
.wt-mode i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--mut); }
.wt-mode.on { background: #fff; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18,18,18,.06); }
html[data-t='dark'] .wt-mode.on { background: #1c1c1e; border-color: #fff; }

@media (max-width: 900px) { .wt-modes { grid-template-columns: 1fr; } }
/* ------------------------- «Моя панель» в кабинете ------------------------ */

.qc-panel { margin: 0 0 26px; }
.qc-panel-t { font-size: 13px; color: var(--mut2); margin-bottom: 12px; }
.qc-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qc-tile {
  position: relative;
  display: block;
  background: var(--surf2);
  border-radius: 18px;
  padding: 20px 20px 54px;
  min-height: 132px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.qc-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.07); }
.qc-tile.blue { background: var(--blue); }
.qc-tile.sand { background: var(--sand); }
.qc-tile b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: -.01em; margin-bottom: 8px; color: var(--ink); }
.qc-tile span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.qc-tile i {
  position: absolute; left: 20px; bottom: 18px;
  font-style: normal; font-size: 13px; color: var(--mut);
}

@media (max-width: 1024px) { .qc-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qc-panel-grid { grid-template-columns: 1fr; } .qc-tile { min-height: 0; padding-bottom: 46px; } }
/* ==========================================================================
   Кабинет: мягкий градиент на фоне и больше воздуха.
   Тот же приём, что на главной: несколько радиальных пятен под содержимым.
   ========================================================================== */
.app, .app-shell, body.app-bg { background: transparent; }
body.cabinet {
  background:
    radial-gradient(1200px 700px at 8% -10%, #eef1ff 0%, rgba(238,241,255,0) 62%),
    radial-gradient(900px 560px at 92% 0%, #ffe9df 0%, rgba(255,233,223,0) 58%),
    radial-gradient(1100px 760px at 50% 108%, #fff5e6 0%, rgba(255,245,230,0) 62%),
    #fbfbfc !important;
  background-attachment: fixed !important;
}
.side { background: rgba(255,255,255,.72) !important; backdrop-filter: blur(8px); }
.main { padding-bottom: 40px; }
.page-head { margin: 26px 0 22px; }
.card { box-shadow: 0 10px 30px rgba(17,17,26,.04); border-color: rgba(17,17,26,.06); }

/* Переключатель превью «Компьютер / Телефон / Чат» после чтения сайта */
[data-onb-view] {
  border: 1px solid rgba(17,17,26,.10); background: #fff; color: #52525b;
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; transition: all .15s ease;
}
[data-onb-view]:hover { border-color: rgba(17,17,26,.22); color: #121212; }
[data-onb-view].on { background: #121212; border-color: #121212; color: #fff; }


/* Скрытая вкладка превью не должна занимать место */
[data-onb-box][hidden] { display: none !important; }
[data-onb-preview] { max-width: 760px; margin-left: auto; margin-right: auto; text-align: left; }
[data-onb-preview] > div:first-child { gap: 10px 16px; }


/* ==========================================================================
   Виджет: настройки слева, живое превью справа.
   Раньше всё шло одной колонкой, и до превью приходилось долго листать.
   ========================================================================== */
.wt-grid { display: block; }
/* превью первым блоком, настройки — под ним; обычный поток, ничего не перекрывается */
.wt-grid > .grid { display: flex; flex-direction: column; gap: 12px; }
.wt-grid > .grid > .wt-prev { order: -1; position: static; margin: 0; }
.wt-grid .card { margin-bottom: 14px; }
.wt-grid h3 { font-size: 17px; margin-bottom: 6px; }
.wt-grid .fld > span { font-size: 12.5px; color: var(--mut); }
.wt-prev .card { background: rgba(255,255,255,.9); backdrop-filter: blur(6px); }
/* превью стоит под настройками: так ничего не перекрывает кнопки */
.wt-prev { display: block; }
.pv-canvas #wPreviewPanel { max-height: 300px !important; bottom: 88px !important; }


/* Экран превью после чтения сайта */
[data-pv-view] {
  border: 1px solid rgba(17,17,26,.10); background: #fff; color: #52525b;
  border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
}
[data-pv-view]:hover { border-color: rgba(17,17,26,.22); color: #121212; }
[data-pv-view].on { background: #121212; border-color: #121212; color: #fff; }
[data-pv-box][hidden] { display: none !important; }


/* ==========================================================================
   Предпросмотр виджета: вкладки и холст в точку, как в Quickchat.
   ========================================================================== */
.pv-wrap { max-width: 1180px; }
.pv-tab {
  border: 0; background: transparent; color: #6b6b73; font-family: inherit;
  font-size: 12.5px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.pv-tab:hover { color: #121212; }
.pv-tab.on { background: #fff; color: #121212; box-shadow: 0 1px 3px rgba(17,17,26,.12); }


/* --------------------------------------------------------------------------
   Виджет: превью в рамке браузера на холсте в точку — как на экране
   предпросмотра.
   -------------------------------------------------------------------------- */
.pv-card { padding: 14px; }
.pv-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: #fbfbfc; border-bottom: 1px solid #ededf0;
}
.pv-dots { display: flex; gap: 6px; }
.pv-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.pv-dots i:nth-child(1) { background: #ff5f57; }
.pv-dots i:nth-child(2) { background: #febc2e; }
.pv-dots i:nth-child(3) { background: #28c840; }
.pv-url {
  flex: 1; text-align: center; background: #f2f2f4; border-radius: 8px;
  padding: 5px 10px; font-size: 11.5px; color: #8a8a92;
}
.pv-ext { color: #b0b0b8; font-size: 12px; }
.pv-canvas {
  background: #8f8f93;
  background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 16px 16px;
}
/* внутри холста окно чата остаётся белым */
.pv-canvas #wPreviewPanel { box-shadow: 0 18px 44px rgba(0,0,0,.22); }
/* кнопки «Компьютер / Телефон» в настройках — те же пилюли */
.wt-dev { display: flex; gap: 4px; background: #f2f2f5; border-radius: 999px; padding: 4px; }
.wt-dev-btn {
  border: 0; background: transparent; color: #6b6b73; font-family: inherit;
  font-size: 12.5px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.wt-dev-btn.on { background: #fff; color: #121212; box-shadow: 0 1px 3px rgba(17,17,26,.12); }
.wt-tabs { display: flex; gap: 4px; background: #f2f2f5; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.wt-tab {
  border: 0; background: transparent; color: #6b6b73; font-family: inherit;
  font-size: 12.5px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.wt-tab.on { background: #fff; color: #121212; box-shadow: 0 1px 3px rgba(17,17,26,.12); }


/* В настройках виджета превью сверху, код — ниже */
.wt-prev { display: flex; flex-direction: column; gap: 14px; }
.wt-prev > .card { margin-bottom: 0; }
.wt-prev > .card:first-child { order: 2; }
.pv-canvas #wPreviewPanel { max-height: 300px !important; bottom: 88px !important; }
.pv-canvas #wPreviewBox > div:first-of-type { position: relative; z-index: 3; }


/* Вкладки «Виджет / Код / Страница чата» — сверху, как в Quickchat */
.wt-grid > .wt-tabs { margin: 0 0 4px; width: max-content; }


/* ==========================================================================
   РАЗДЕЛ «ВИДЖЕТ НА САЙТЕ» — новая вёрстка.
   Всё в обычном потоке: заголовок, превью, вкладки, поля. Ничего не
   перекрывается и не «заползает» друг на друга.
   ========================================================================== */

.wp { max-width: 1080px; }

/* ------------------------------- шапка ---------------------------------- */
.wp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.wp-h1 {
  font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: 36px; line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 6px; color: var(--ink);
}
.wp-sub { font-size: 13.5px; color: var(--mut); margin: 0; }
.wp-head-act { display: flex; gap: 8px; }

/* ------------------------------- карточки -------------------------------- */
.wp-card {
  background: #fff; border: 1px solid rgba(17,17,26,.08); border-radius: 16px;
  padding: 18px 20px; margin-bottom: 16px;
}
.wp-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.wp-card-title {
  font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 14px;
}
.wp-card-head .wp-card-title { margin-bottom: 0; }
.wp-note { font-size: 12.5px; color: var(--mut); }

/* ------------------------------- превью ---------------------------------- */
.wp-seg { display: flex; gap: 4px; background: #f3f3f6; border-radius: 999px; padding: 4px; }
.wp-seg-btn {
  border: 0; background: transparent; color: #6b6b73; font-family: inherit;
  font-size: 12.5px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.wp-seg-btn.on { background: #fff; color: #121212; box-shadow: 0 1px 3px rgba(17,17,26,.14); }

.wp-canvas {
  border: 1px solid #e8e8eb; border-radius: 14px; overflow: hidden;
  background: #fff; transition: max-width .18s ease;
}
.wp-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: #fbfbfc; border-bottom: 1px solid #ededf0;
}
.wp-dots { display: flex; gap: 6px; }
.wp-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.wp-dots i:nth-child(1) { background: #ff5f57; }
.wp-dots i:nth-child(2) { background: #febc2e; }
.wp-dots i:nth-child(3) { background: #28c840; }
.wp-url {
  flex: 1; text-align: center; background: #f2f2f4; border-radius: 8px;
  padding: 5px 10px; font-size: 11.5px; color: #8a8a92;
}

.wp-stage {
  position: relative; height: 380px; overflow: hidden;
  background: #8f8f93;
  background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 16px 16px;
}
.wp-page-mock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 44px; font-weight: 600; letter-spacing: -.03em;
  color: rgba(255,255,255,.30); white-space: nowrap;
}

.wp-panel {
  position: absolute; bottom: 90px; right: 20px; width: 320px;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
}
.wp-panel-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; color: #fff;
}
.wp-ava {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: grid; place-items: center;
  font-size: 14px; flex: 0 0 auto;
}
.wp-panel-name {
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.wp-panel-close { margin-left: auto; font-size: 16px; opacity: .7; }
.wp-panel-body {
  padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 8px;
  min-height: 96px;
}
.wp-msg {
  background: #f4f4f5; border-radius: 12px; padding: 9px 12px;
  font-size: 12px; line-height: 1.5; color: #2b2b31; max-width: 92%;
}
.wp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-chip-static {
  border: 1px solid #e6e6e9; border-radius: 999px; padding: 5px 10px;
  font-size: 11.5px; color: #4a4a52; background: #fff;
}
.wp-input {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid #f0f0f2;
  font-size: 12px; color: #a8a8b0;
}
.wp-input span:first-child { flex: 1; }
.wp-send {
  width: 22px; height: 22px; border-radius: 50%; background: #ececef;
  color: #fff; display: grid; place-items: center; font-size: 11px;
}

.wp-launcher {
  position: absolute; right: 20px; bottom: 20px;
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: #17130e; color: #faf8f5; cursor: pointer;
  display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* ------------------------------- вкладки --------------------------------- */
.wp-tabs {
  display: flex; gap: 4px; background: #f3f3f6; border-radius: 999px;
  padding: 4px; width: max-content; margin: 4px 0 16px;
}
.wp-tab {
  border: 0; background: transparent; color: #6b6b73; font-family: inherit;
  font-size: 12.5px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.wp-tab.on { background: #fff; color: #121212; box-shadow: 0 1px 3px rgba(17,17,26,.14); }

/* ------------------------------- поля ------------------------------------ */
.wp-pane { display: block; }
.wp-pane[hidden] { display: none !important; }

.wp-row { display: flex; gap: 14px; flex-wrap: wrap; }
.wp-row-2 > .wp-field { flex: 1 1 220px; min-width: 0; }

.wp-field {
  display: block; margin-bottom: 14px; min-width: 0;
}
.wp-field > span {
  display: block; font-size: 12px; color: var(--mut); margin-bottom: 6px;
}
.wp-field input[type="text"],
.wp-field input[type="number"],
.wp-field input[type="url"],
.wp-field select,
.wp-field textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px;
  color: var(--ink); background: #fff; border: 1px solid #e4e4e7;
  border-radius: 10px; padding: 10px 12px; outline: none;
}
.wp-field textarea { resize: vertical; min-height: 84px; }
.wp-field input:focus, .wp-field select:focus, .wp-field textarea:focus {
  border-color: #12121233; box-shadow: 0 0 0 3px rgba(18,18,18,.06);
}
.wp-field input[type="color"] {
  width: 46px; height: 34px; padding: 2px; border: 1px solid #e4e4e7;
  border-radius: 8px; background: #fff; cursor: pointer;
}
.wp-field input[type="range"] { width: 100%; margin: 6px 0 4px; }
.wp-field b { font-size: 12.5px; color: var(--ink); font-weight: 500; }

.wp-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--ink); margin: 10px 0;
  cursor: pointer;
}
.wp-check input { width: 16px; height: 16px; accent-color: #121212; }

.wp-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wp-theme {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #e4e4e7; background: #fff; border-radius: 999px;
  padding: 7px 13px 7px 8px; font-family: inherit; font-size: 12.5px;
  color: var(--ink); cursor: pointer;
}
.wp-theme:hover { border-color: #c9c9d0; }
.wp-theme-swatch { width: 18px; height: 18px; border-radius: 50%; display: block; }

.wp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wp-chip {
  border: 1px solid #e4e4e7; background: #fff; border-radius: 999px;
  padding: 8px 14px; font-family: inherit; font-size: 12.5px;
  color: var(--ink); cursor: pointer;
}
.wp-chip:hover { border-color: #c9c9d0; }
.wp-chip.on { background: #121212; border-color: #121212; color: #fff; }

.wp-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-mode {
  border: 1px solid #e4e4e7; background: #fff; border-radius: 12px;
  padding: 12px 16px; font-family: inherit; font-size: 13px;
  color: var(--ink); cursor: text; cursor: pointer;
}
.wp-mode.on { border-color: #121212; box-shadow: 0 0 0 2px rgba(18,18,18,.08); }

.wp-code {
  background: #121212; color: #f5f5f6; border-radius: 12px;
  padding: 14px 16px; font-size: 12px; line-height: 1.6;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  margin: 0;
}

/* ------------------------------ телефон ---------------------------------- */
@media (max-width: 560px) {
  .wp-h1 { font-size: 28px; }
  .wp-stage { height: 320px; }
  .wp-panel { width: calc(100% - 40px); }
}


/* ==========================================================================
   Виджет: стиль главной страницы — воздух, мягкие карточки без рамок,
   серифные заголовки и чёрные пилюли-кнопки.
   ========================================================================== */

/* контент кабинета по центру: справа не остаётся пустая полоса */
.min { margin-left: auto; margin-right: auto; }

/* общий контейнер раздела */
.wp { width: 100%; max-width: 1040px; margin: 0 auto; }

.wp-h1 {
  font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: clamp(30px, 3vw, 44px); line-height: 1.03; letter-spacing: -.03em;
  margin: 0 0 10px;
}
.wp-sub { font-size: 14.5px; color: var(--mut); margin: 0; max-width: 520px; line-height: 1.5; }

.wp-card {
  background: #fff; border: 0; border-radius: 20px;
  box-shadow: 0 12px 34px rgba(17,17,26,.06);
  padding: 24px 26px; margin-bottom: 20px;
}

.wp-card-title { font-size: 15px; font-weight: 500; margin-bottom: 16px; }
.wp-note { font-size: 12.5px; color: var(--mut); line-height: 1.5; }

/* поля: мягкие, без жёстких рамок */
.wp-field > span { font-size: 12.5px; color: var(--mut); margin-bottom: 8px; }
.wp-field input[type="text"],
.wp-field input[type="number"],
.wp-field input[type="url"],
.wp-field select,
.wp-field textarea {
  background: #f6f6f7; border: 1px solid transparent; border-radius: 12px;
  padding: 12px 14px; font-size: 14.5px;
}
.wp-field input:focus, .wp-field select:focus, .wp-field textarea:focus {
  background: #fff; border-color: rgba(17,17,26,.18);
  box-shadow: 0 0 0 4px rgba(17,17,26,.05);
}
.wp-field input[type="color"] { border-radius: 10px; border-color: #e8e8eb; }

/* пилюли: темы, формы, режимы */
.wp-theme, .wp-chip, .wp-mode {
  border: 1px solid rgba(17,17,26,.10); background: #fff; border-radius: 999px;
}
.wp-theme { padding: 8px 15px 8px 9px; }
.wp-theme:hover, .wp-chip:hover { border-color: rgba(17,17,26,.28); }
.wp-mode { border-radius: 999px; padding: 11px 18px; }
.wp-mode.on { border-color: #121212; box-shadow: 0 0 0 2px rgba(18,18,18,.10); }
.wp-chip.on { background: #121212; border-color: #121212; color: #fff; }

/* вкладки — как на главной: спокойный сегмент */
.wp-tabs { background: rgba(17,17,26,.05); }
.wp-tab { padding: 9px 18px; }
.wp-tab.on { box-shadow: 0 1px 4px rgba(17,17,26,.14); }

/* превью */
.wp-stage { height: 400px; }
.wp-panel { box-shadow: 0 26px 60px rgba(0,0,0,.28); border-radius: 18px; }
.wp-launcher { box-shadow: 0 14px 34px rgba(0,0,0,.28); }

.wp-code { border-radius: 14px; }

@media (max-width: 900px) {
  .wp-head { align-items: flex-start; }
  .wp-head-act { width: 100%; }
  .wp-head-act .btn { flex: 1; }
}


/* вкладки на телефоне не должны растягивать страницу */
.wp-tabs {
  width: max-content; max-width: 100%; box-sizing: border-box;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.wp-tabs::-webkit-scrollbar { display: none; }
.wp-tab { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .wp-tabs { border-radius: 14px; }
  .wp-card { padding: 18px 16px; border-radius: 16px; }
}


/* ==========================================================================
   Превью внутри раздела: три режима на одном холсте.
   ========================================================================== */
.wp-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.wp-view { position: absolute; inset: 0; }
.wp-view[hidden] { display: none !important; }

/* режим «вставка»: окно по центру холста */
.wp-embed-holder {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 44px)); max-height: calc(100% - 40px);
  display: flex;
}
.wp-embed-holder .wp-panel {
  position: static !important; width: 100% !important;
  max-height: 100%; box-shadow: 0 26px 60px rgba(0,0,0,.28);
}

/* режим «страница чата»: список слева, чат справа */
.wp-chatpage {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: 210px 1fr; background: #fff;
}
.wp-chatpage-side { border-right: 1px solid #f0f0f2; padding: 16px 14px; }
.wp-chatpage-logo {
  font-family: var(--serif, Georgia, serif); font-size: 15px; color: #121212;
  margin-bottom: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-chatpage-item { font-size: 12.5px; color: #6b6b73; padding: 7px 0; }
.wp-chatpage-item.on { color: #121212; font-weight: 500; }
.wp-chatpage-group {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: #b0b0b8; margin: 16px 0 8px;
}
.wp-chatpage-ph { height: 10px; border-radius: 6px; background: #f1f1f3; margin-bottom: 9px; }
.wp-chatpage-main { display: flex; min-width: 0; }
.wp-chatpage-main .wp-panel {
  position: static !important; width: 100% !important; border-radius: 0 !important;
  box-shadow: none; max-height: 100%;
}

@media (max-width: 720px) {
  .wp-chatpage { grid-template-columns: 1fr; }
  .wp-chatpage-side { display: none; }
}


/* --------------------------------------------------------------------------
   Живой чат в превью: поле ввода, кнопка, пузыри сообщений, ключ API.
   -------------------------------------------------------------------------- */
.wp-input input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 12.5px; color: #121212;
}
.wp-input input::placeholder { color: #a8a8b0; }
.wp-send {
  border: 0; cursor: pointer; width: 26px; height: 26px; border-radius: 50%;
  background: #121212; color: #fff; display: grid; place-items: center;
  font-size: 12px; flex: 0 0 auto;
}
.wp-send:hover { opacity: .86; }
.wp-panel-close {
  margin-left: auto; border: 0; background: transparent; color: inherit;
  opacity: .7; font-size: 17px; cursor: pointer; line-height: 1;
}
.wp-panel-body { overflow-y: auto; }

.wp-bubble {
  font-size: 12px; line-height: 1.5; padding: 9px 12px; border-radius: 12px;
  max-width: 88%; word-break: break-word;
}
.wp-bubble-me {
  align-self: flex-end; background: #121212; color: #fff; border-bottom-right-radius: 4px;
}
.wp-bubble-bot {
  align-self: flex-start; background: #f4f4f5; color: #2b2b31; border-bottom-left-radius: 4px;
}
.wp-typing { color: #9a9aa2; font-style: italic; }

/* ключ API */
.wp-key { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(17,17,26,.07); }
.wp-key-label { font-size: 12px; color: var(--mut); margin-bottom: 8px; }
.wp-key-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wp-key-row code {
  flex: 1 1 260px; min-width: 0; background: #f6f6f7; border-radius: 10px;
  padding: 11px 14px; font-size: 12.5px; color: #121212; overflow-x: auto;
  white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace;
}


/* окно чата не вылезает за холст, даже когда сообщений много */
.wp-view .wp-panel {
  max-height: calc(100% - 34px);
  display: flex; flex-direction: column;
}
.wp-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wp-panel-head { flex: 0 0 auto; }
.wp-input { flex: 0 0 auto; }


/* окно в режиме «виджет» всегда целиком в холсте: шапка не уезжает вверх */
.wp-view[data-wp-view="widget"] .wp-panel { max-height: calc(100% - 128px); }
.wp-panel-body { scroll-behavior: smooth; }


/* Аватар в списках не должен растягиваться в овал: фиксируем размер */
/* у .li > div:first-child стоит flex:1 — перебиваем его для аватара */
.li > div.av:first-child,
.li > div.av { flex: 0 0 auto; width: 36px; height: 36px; min-width: 36px; }
@media (max-width: 700px) {
  .li > div.av:first-child,
  .li > div.av { width: 32px; height: 32px; min-width: 32px; }
}


/* --------------------------------------------------------------------------
   Проверка своих файлов: зона загрузки и карточки результатов.
   -------------------------------------------------------------------------- */
.wp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 28px 20px; border: 1.5px dashed rgba(17,17,26,.18);
  border-radius: 16px; background: #fafafb; cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.wp-drop:hover { border-color: rgba(17,17,26,.42); background: #fff; }
.wp-drop input[type="file"] { display: none; }
.wp-drop-icon {
  width: 34px; height: 34px; border-radius: 50%; background: #121212; color: #fff;
  display: grid; place-items: center; font-size: 15px;
}
.wp-drop-text { font-size: 14px; color: #121212; }
.wp-drop-hint { font-size: 12px; color: #9a9aa2; }

.wp-file {
  border: 1px solid rgba(17,17,26,.08); border-radius: 14px;
  padding: 14px 16px; margin-top: 12px; background: #fff;
}
.wp-file-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wp-file-name { font-size: 13.5px; font-weight: 500; word-break: break-all; }
.wp-file-badge {
  font-size: 11px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.wp-file-badge.ok { background: #e8f5ee; color: #1f7a52; }
.wp-file-badge.warn { background: #fff2e2; color: #a4621a; }
.wp-file-badge.mute { background: #f1f1f3; color: #6b6b73; }
.wp-file-point { font-size: 12.5px; color: #6b6b73; margin-top: 8px; line-height: 1.5; }
.wp-file-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }


/* Фон-градиент как в демо 21st.dev — для холста предпросмотра виджета */
:root { --demo-gradient: radial-gradient(125% 125% at 50% 101%, #F55702 10.5%, #F57802 16%, #F58C02 17.5%, #F5AA64 25%, #EEAECA 40%, #CAB3D6 65%, #94C9E9 100%); }
.wp-stage {
  background: var(--demo-gradient) !important;
  background-size: cover;
}
.wp-stage:before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.10); pointer-events: none; }


/* pv-sandbox-v2 */
.pv-wrap{
  position:relative; border-radius:22px; overflow:hidden; padding:30px 22px 26px;
  background: radial-gradient(125% 125% at 50% 101%, #F55702 10.5%, #F57802 16%, #F58C02 17.5%, #F5AA64 25%, #EEAECA 40%, #CAB3D6 65%, #94C9E9 100%);
  min-height:500px; display:flex; flex-direction:column; align-items:center; width:100%; max-width:100% !important;
}
.pv-wrap[data-pv-theme="dark"]{ background: radial-gradient(125% 125% at 50% 101%, #2A1206 10.5%, #3A1708 18%, #4A2412 25%, #2B2230 44%, #1B1A24 66%, #0E0E12 100%); }
.pv-inner{ width:100%; max-width:620px; display:flex; flex-direction:column; gap:14px; flex:1 }
.pv-top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.pv-title{ font-size:13.5px; font-weight:500; color:rgba(17,17,26,.72) }
.pv-wrap[data-pv-theme="dark"] .pv-title{ color:rgba(255,255,255,.72) }
.pv-theme{ display:inline-flex; gap:4px; padding:3px; border-radius:999px; background:rgba(255,255,255,.5) }
.pv-wrap[data-pv-theme="dark"] .pv-theme{ background:rgba(255,255,255,.1) }
.pv-tbtn{ border:0; background:transparent; font:inherit; font-size:12px; padding:6px 12px; border-radius:999px; color:rgba(17,17,26,.62); cursor:pointer }
.pv-tbtn.on{ background:#fff; color:#111; box-shadow:0 1px 3px rgba(0,0,0,.12) }
.pv-wrap[data-pv-theme="dark"] .pv-tbtn{ color:rgba(255,255,255,.62) }
.pv-wrap[data-pv-theme="dark"] .pv-tbtn.on{ background:rgba(255,255,255,.92); color:#111 }
.pv-log{ flex:1; display:flex; flex-direction:column; gap:10px; justify-content:flex-end; min-height:150px; padding:6px 2px }
.pv-hello{ font-size:13px; color:rgba(17,17,26,.55); text-align:center; padding:22px 0 }
.pv-wrap[data-pv-theme="dark"] .pv-hello{ color:rgba(255,255,255,.5) }
.pv-msg{ max-width:86%; font-size:13.5px; line-height:1.55; padding:10px 14px; border-radius:16px }
.pv-msg.u{ align-self:flex-end; background:rgba(17,17,26,.88); color:#fff; border-bottom-right-radius:6px }
.pv-msg.a{ align-self:flex-start; background:rgba(255,255,255,.95); color:#111; border-bottom-left-radius:6px; box-shadow:0 10px 26px -14px rgba(17,17,26,.4) }
.pv-wrap[data-pv-theme="dark"] .pv-msg.a{ background:rgba(24,24,28,.94); color:#F4F4F2 }
.pv-composer{ position:relative; width:100%; display:flex; justify-content:center }
.pv-card{
  position:relative; margin:0 auto; height:48px; border-radius:24px; padding:0 !important;
  border:1px solid rgba(17,17,26,.12); background:#fff; box-shadow:0 18px 40px -22px rgba(17,17,26,.55);
  transition:width .4s cubic-bezier(.175,.885,.32,1.275), height .4s cubic-bezier(.175,.885,.32,1.275), background .25s, border-color .25s;
  overflow:hidden;
}
.pv-card.open{ height:116px }
.pv-wrap[data-pv-theme="dark"] .pv-card{ background:#151518; border-color:rgba(255,255,255,.14) }
.pv-input{
  position:absolute; left:0; right:0; top:0; width:100%; height:68px; resize:none; border:0; outline:none; background:transparent;
  padding:14px 46px 0 16px; font:inherit; font-size:13.5px; line-height:22px; color:#111; box-sizing:border-box;
  opacity:0; transform:scale(.97) translateY(-4px); pointer-events:none; transition:opacity .25s, transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.pv-card.open .pv-input{ opacity:1; transform:none; pointer-events:auto }
.pv-wrap[data-pv-theme="dark"] .pv-input{ color:#F4F4F2 }
.pv-input::placeholder{ color:rgba(17,17,26,.45); font-weight:500 }
.pv-wrap[data-pv-theme="dark"] .pv-input::placeholder{ color:rgba(255,255,255,.42) }
.pv-fake{
  position:absolute; left:16px; top:0; height:47px; display:flex; align-items:center; border:0; background:transparent; cursor:text;
  font:inherit; font-size:13.5px; font-weight:500; color:rgba(17,17,26,.45);
}
.pv-card.open .pv-fake{ opacity:0; pointer-events:none }
.pv-actions{
  position:absolute; left:10px; right:46px; bottom:8px; display:flex; align-items:center; gap:2px;
  opacity:0; transform:translateY(6px); pointer-events:none; filter:blur(3px);
  transition:opacity .3s, transform .3s, filter .3s;
}
.pv-card.open .pv-actions{ opacity:1; transform:none; filter:none; pointer-events:auto }
.pv-chip{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 8px; border:0; border-radius:999px; background:transparent; color:rgba(17,17,26,.5); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer }
.pv-chip:hover{ background:rgba(17,17,26,.06); color:#111 }
.pv-wrap[data-pv-theme="dark"] .pv-chip{ color:rgba(255,255,255,.5) }
.pv-wrap[data-pv-theme="dark"] .pv-chip:hover{ background:rgba(255,255,255,.09); color:#fff }
.pv-plus{ margin-left:auto; width:26px; height:26px; border:0; border-radius:999px; background:transparent; color:rgba(17,17,26,.5); cursor:pointer; display:grid; place-items:center }
.pv-wrap[data-pv-theme="dark"] .pv-plus{ color:rgba(255,255,255,.5) }
.pv-send{ position:absolute; right:8px; bottom:8px; width:32px; height:32px; border:0; border-radius:999px; background:#111; color:#fff; display:grid; place-items:center; cursor:pointer }
.pv-wrap[data-pv-theme="dark"] .pv-send{ background:#F4F4F2; color:#111 }
.pv-send svg{ position:absolute; transition:opacity .22s, transform .3s cubic-bezier(.175,.885,.32,1.275) }
.pv-send .pv-i-arrow{ opacity:0; transform:scale(.5) rotate(45deg) }
.pv-send .pv-i-mic{ opacity:1 }
.pv-send .pv-i-stop{ opacity:0; transform:scale(.5) }
.pv-send.has-value .pv-i-arrow{ opacity:1; transform:none }
.pv-send.has-value .pv-i-mic{ opacity:0; transform:scale(.5) rotate(-45deg) }
.pv-send.busy .pv-i-stop{ opacity:1; transform:none }
.pv-send.busy .pv-i-arrow{ opacity:0 }
.pv-send:disabled{ opacity:.45; cursor:default }
.pv-attach{ display:flex; gap:8px; padding:0 0 8px 2px; overflow-x:auto; width:100%; max-width:480px; margin:0 auto }
.pv-thumb{ position:relative; width:48px; height:48px; border-radius:12px; overflow:hidden; flex:none; border:1px solid rgba(17,17,26,.12); background:#fff }
.pv-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.pv-thumb button{ position:absolute; top:3px; right:3px; width:15px; height:15px; border:0; border-radius:999px; background:rgba(255,255,255,.92); color:#111; font-size:10px; line-height:1; cursor:pointer }


/* wp-form-robust */
/* Форма настроек виджета: не даём полям и чипам наезжать друг на друга
   на любой ширине окна и при любом зуме браузера. */
.wp-card { overflow: clip; }
.wp-row-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px;
}
.wp-row-2 > .wp-field { min-width: 0; max-width: 100%; }
.wp-field { min-width: 0; max-width: 100%; }
.wp-field > span { display: block; white-space: normal; overflow-wrap: anywhere; }
.wp-field input[type="range"] { width: 100%; max-width: 100%; display: block; }
.wp-field input, .wp-field select, .wp-field textarea { max-width: 100%; }
.wp-field b { display: inline-block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.wp-chips { min-width: 0; }
.wp-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }

@media (max-width: 1180px) {
  .wp-row-2 { grid-template-columns: minmax(0, 1fr) !important; }
}