:root{--bg:#eeece7;--ink:#11151a;--muted:#727880;--line:rgba(17,21,26,.13);--paper:#f9f8f4}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}a{text-decoration:none;color:inherit}button,input,select{font:inherit}
header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1240px)/2))}
.brand{display:flex;gap:10px;align-items:center}.brand>span{width:38px;height:38px;border-radius:12px;background:#11151a;color:#fff;display:grid;place-items:center;font-weight:900}.brand div{display:flex;flex-direction:column}.brand b{font-size:11px;letter-spacing:.08em}.brand small{font-size:7px;letter-spacing:.18em;color:#8b9097;margin-top:4px}.head-actions{display:flex;gap:16px;font-size:10px;font-weight:800}
.shell{width:min(1240px,calc(100% - 40px));margin:auto}.intro{padding:85px 0 70px;display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.eyebrow{font-size:8px;letter-spacing:.18em;color:#83725c;font-weight:900}.intro h1{font-family:Georgia,serif;font-size:clamp(52px,6vw,88px);font-weight:400;line-height:.9;letter-spacing:-.055em;margin:18px 0 24px}.intro h1 em{font-style:normal;color:#7d838b}.intro p{font-size:13px;line-height:1.8;color:var(--muted);max-width:550px}
.system-map{display:grid;grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr;grid-template-rows:1fr 1fr;gap:10px;align-items:center}.system-map div{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;flex-direction:column}.system-map div b{font-size:11px}.system-map div span{font-size:8px;color:var(--muted);margin-top:5px}.system-map i{font-style:normal;text-align:center;color:#9da2a8}.system-map .core{background:#13171d;color:#fff}.system-map div:nth-of-type(5){grid-column:1}.system-map div:nth-of-type(6){grid-column:3}
.workspace{border-top:1px solid var(--line);padding:60px 0 100px;display:grid;grid-template-columns:.6fr 1fr .7fr;gap:30px;align-items:start}.config,.lead-preview{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px}.config label{font-size:9px;color:var(--muted);display:grid;gap:8px}.config select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px}.channel-tabs{display:grid;gap:8px;margin:22px 0}.channel-tabs button{border:1px solid var(--line);background:white;border-radius:11px;padding:11px;display:grid;grid-template-columns:34px 1fr;align-items:center;text-align:left;cursor:pointer}.channel-tabs button.active{background:#13171d;color:white}.channel-tabs span{width:26px;height:26px;border-radius:8px;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}.tg{background:#2898d7}.mx{background:#6e5af0}.vk{background:#1677ff}.feature-list{border-top:1px solid var(--line);padding-top:15px;display:grid;gap:10px}.feature-list div{display:flex;gap:8px;font-size:9px}.feature-list b{color:#5ba477}
.phone-wrap{display:flex;justify-content:center}.phone{width:min(390px,100%);height:690px;background:#11161d;border-radius:42px;padding:11px;box-shadow:0 35px 90px rgba(17,21,26,.2);display:flex;flex-direction:column}.phone-top{height:31px;color:#8b939e;font-size:8px;display:flex;justify-content:center;align-items:center;position:relative}.phone-top i{position:absolute;right:15px;width:6px;height:6px;background:#57b27c;border-radius:50%}.chat-head{height:64px;border-radius:25px 25px 0 0;background:#f7f8fa;display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:0 14px}.avatar{width:36px;height:36px;border-radius:50%;background:#191d23;color:#fff;display:grid;place-items:center;font-weight:900}.chat-head div:nth-child(2){display:flex;flex-direction:column}.chat-head b{font-size:10px}.chat-head span{font-size:8px;color:#7b838d;margin-top:2px}.chat-head em{font-style:normal;color:#8e949c}
.messages{background:#e9edf1;flex:1;padding:16px;overflow:auto;display:flex;flex-direction:column;gap:8px}.msg{max-width:82%;padding:10px 12px;border-radius:13px;font-size:10px;line-height:1.5}.msg.bot{background:white;align-self:flex-start;border-bottom-left-radius:4px}.msg.user{background:#d6f8c8;align-self:flex-end;border-bottom-right-radius:4px}.quick{background:#e9edf1;padding:8px 12px;display:flex;gap:6px;overflow:auto}.quick button{white-space:nowrap;border:1px solid #cbd2d9;background:#fff;border-radius:99px;padding:7px 9px;font-size:8px;cursor:pointer}.phone form{display:grid;grid-template-columns:1fr 38px;gap:7px;background:#f8f9fa;padding:9px;border-radius:0 0 25px 25px}.phone input{border:1px solid #e0e4e8;border-radius:99px;padding:10px 12px;font-size:9px;outline:none}.phone form button{border:0;background:#1e7dc2;color:#fff;border-radius:50%;cursor:pointer}
.lead-preview h2{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:10px 0 18px}.lead-card{border:1px solid var(--line);border-radius:14px;min-height:210px;padding:16px}.empty{font-size:10px;line-height:1.6;color:var(--muted)}.lead-info{display:grid;gap:11px}.lead-info div{border-bottom:1px solid var(--line);padding-bottom:9px}.lead-info span{display:block;font-size:7px;color:#8c9299;text-transform:uppercase;letter-spacing:.1em}.lead-info b{font-size:10px}.lead-preview>a{display:inline-block;margin-top:16px;font-size:9px;font-weight:900;border-bottom:1px solid #111;padding-bottom:4px}
@media(max-width:950px){.intro,.workspace{grid-template-columns:1fr}.system-map{margin-top:20px}.config,.lead-preview{max-width:620px;margin:auto;width:100%}}
@media(max-width:650px){.shell{width:min(100% - 24px,1240px)}.head-actions a:last-child{display:none}.system-map{grid-template-columns:1fr}.system-map i{transform:rotate(90deg)}.system-map div:nth-of-type(5),.system-map div:nth-of-type(6){grid-column:auto}.intro{padding-top:55px}.workspace{padding-top:40px}}


/* V6 bot demo contrast */
:root{--bg:#f4f2ed;--ink:#11151a;--muted:#626a74;--line:rgba(17,21,26,.15);--paper:#fffdf9}
.intro p,.lead-preview .empty{color:#626a74}
.phone{background:linear-gradient(160deg,#0d1218,#1b222b)}
.messages{background:#e5eaf0}
.msg.bot{background:#fff;color:#11151a;box-shadow:0 3px 12px rgba(17,21,26,.06)}
.msg.user{background:#bfe9ae;color:#15220f}
.config,.lead-preview{box-shadow:0 12px 35px rgba(17,21,26,.05)}


/* ==========================================================
   V9 BOT DEMO — SOFT LIGHT UI
========================================================== */
:root{
  --bg:#F4F1EB;
  --ink:#1B2430;
  --muted:#5F6974;
  --line:#D8D4CE;
  --paper:#FFFDFC;
}
body{background:var(--bg)!important;color:var(--ink)!important}
header{background:rgba(244,241,235,.96)!important;border-color:var(--line)!important}
.brand b,.head-actions a{color:var(--ink)!important}
.brand small{color:var(--muted)!important}
.intro h1{color:var(--ink)!important}.intro h1 em{color:#2F647D!important}
.intro p{color:var(--muted)!important}
.system-map div,.config,.lead-preview{background:var(--paper)!important;border-color:var(--line)!important}
.system-map .core{background:#202B35!important;color:#fff!important}
.config label,.empty{color:var(--muted)!important}
.channel-tabs button{background:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}
.channel-tabs button.active{background:#202B35!important;color:#fff!important}
.phone{background:linear-gradient(160deg,#202B35,#141C24)!important}
.chat-head{background:#F8F9FA!important;color:var(--ink)!important}
.messages{background:#E8ECEF!important}
.msg.bot{background:#fff!important;color:var(--ink)!important}
.msg.user{background:#CDE8D2!important;color:#173422!important}
.quick{background:#E8ECEF!important}
.quick button{background:#fff!important;color:var(--ink)!important;border-color:#C7D0D7!important}
.lead-card{background:#fff!important;border-color:var(--line)!important}
.lead-preview h2{color:var(--ink)!important}


/* ==========================================================
   V13 — BOT DEMO MOBILE
========================================================== */
@media(max-width:768px){
  header{height:66px!important;padding:0 12px!important}.brand>span{width:34px!important;height:34px!important}.head-actions{gap:8px!important}.head-actions a{font-size:8px!important}.head-actions a:last-child{display:none!important}
  .shell{width:min(100% - 20px,1240px)!important}.intro{padding:48px 0 44px!important;grid-template-columns:1fr!important;gap:28px!important}.intro h1{font-size:48px!important}.intro p{font-size:12px!important}
  .system-map{grid-template-columns:1fr!important}.system-map i{transform:rotate(90deg)!important}.system-map div{padding:14px!important}.system-map div:nth-of-type(5),.system-map div:nth-of-type(6){grid-column:auto!important}
  .workspace{grid-template-columns:1fr!important;padding:38px 0 70px!important;gap:18px!important}.config,.lead-preview{padding:16px!important;border-radius:16px!important}.config select{min-height:44px!important;font-size:12px!important}.channel-tabs button{min-height:48px!important}
  .phone-wrap{order:2!important}.config{order:1!important}.lead-preview{order:3!important}.phone{width:min(100%,370px)!important;height:650px!important;border-radius:30px!important}.phone-top{height:26px!important}.messages{padding:12px!important}.msg{font-size:10px!important;max-width:87%!important}.phone input{font-size:16px!important}.phone form{grid-template-columns:1fr 42px!important}.phone form button{width:42px!important;height:42px!important}
  .lead-preview h2{font-size:28px!important}.lead-card{min-height:170px!important}
}


/* V15 viewport containment */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:768px){
  *{box-sizing:border-box}
  img,svg,video,canvas{max-width:100%;height:auto}
}