/* =========================================================================
   MfiSerli AI — рабочее пространство v4
   Темы, трёхколоночный каркас, шахматы, артефакты, сервисы, тарифы.
   Подключается после основных стилей index.html.
   ========================================================================= */

/* ---------- темы и токены (Premium Dark AI Workspace) ---------- */
:root,
html[data-theme="night"]{
  color-scheme:dark;
  --bg:#090B12; --panel:#101522; --panel2:#151C2B; --panel3:#1C2638;
  --line:rgba(160,175,205,.14); --line2:rgba(160,175,205,.22);
  --txt:#f4f6fc; --txt2:#a3aec2; --txt3:#7c879b;
  --brand:#6A58E8; --brand2:#a092ff; --brand3:#5846CC;
  --brand-soft:rgba(106,88,232,.14);
  --info:#55b9e8; --ok:#48c99a; --err:#f07883; --warn:#e9b968;
  --ws-ease:cubic-bezier(.2,.8,.2,1);
  --ws-shadow:0 18px 50px -24px rgba(0,0,0,.8);
  --ws-radius:14px;
  --ws-glow:rgba(137,120,255,.16);
  --font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  /* радиусы и движение */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --dur:180ms; --ease:cubic-bezier(.2,.8,.2,1);
  --border-soft:rgba(160,175,205,.14);
}
html[data-theme="graphite"]{
  --bg:#101114; --panel:#16181d; --panel2:#1c1f26; --panel3:#23262f;
  --line:#262a33; --line2:#343a46;
  --txt:#f2f3f6; --txt2:#a9aeb9; --txt3:#8A909B;
  --brand:#657385; --brand2:#a9b6c7; --brand3:#4F5C6B;
  --brand-soft:rgba(160,175,195,.14);
  --ok:#4bbd8b; --err:#e8666b; --warn:#d8a04a;
  --ws-glow:rgba(160,175,195,.14);
}
html[data-theme="ocean"]{
  --bg:#061018; --panel:#0b1a24; --panel2:#102430; --panel3:#152e3d;
  --line:#17303d; --line2:#22485c;
  --txt:#e9f4fb; --txt2:#9db8c7; --txt3:#7899AB;
  --brand:#1F78A0; --brand2:#67c8ec; --brand3:#155D7C;
  --brand-soft:rgba(49,169,216,.15);
  --ok:#37c98b; --err:#ff6a72; --warn:#ffc266;
  --ws-glow:rgba(49,169,216,.16);
}
html[data-theme="sand"]{
  --bg:#f6f3ee; --panel:#ffffff; --panel2:#f1ece4; --panel3:#e7e0d5;
  --line:#e2dacd; --line2:#cfc5b5;
  --txt:#20211f; --txt2:#5c5f5a; --txt3:#676961;
  --brand:#9E562F; --brand2:#8F5A3A; --brand3:#7A3E20;
  --brand-soft:rgba(158,86,47,.13);
  --ok:#24744F; --err:#AE3D44; --warn:#8A5F16;
  --ws-shadow:0 18px 40px -26px rgba(90,70,50,.45);
  --ws-glow:rgba(180,101,58,.14);
}
html[data-theme="light"]{
  --bg:#f6f7fa; --panel:#ffffff; --panel2:#f1f3f8; --panel3:#e9edf5;
  --line:#e3e7ef; --line2:#cfd6e3;
  --txt:#161a22; --txt2:#515a6b; --txt3:#626A78;
  --brand:#5c4bd8; --brand2:#6455D6; --brand3:#4334b4;
  --brand-soft:rgba(92,75,216,.1);
  --ok:#177551; --err:#B93B42; --warn:#8B6110;
  --ws-shadow:0 18px 40px -26px rgba(30,40,70,.28);
  --ws-glow:rgba(92,75,216,.12);
}

/* ---------- типографика ---------- */
html[data-theme="sand"], html[data-theme="light"]{ color-scheme:light }
html[data-theme="sand"] body,
html[data-theme="light"] body{ color-scheme:light }
body{ transition:background .3s var(--ws-ease),color .3s var(--ws-ease) }
.msg .who{ letter-spacing:.01em }
.md{ font-size:14.4px; line-height:1.75 }
.md h1,.md h2,.md h3{ font-family:var(--font); letter-spacing:-.02em }
.md table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; border:1px solid var(--line); border-radius:10px; overflow:hidden }
.md th{ text-align:left; background:var(--panel2); padding:7px 10px; font-weight:600; border-bottom:1px solid var(--line) }
.md td{ padding:7px 10px; border-bottom:1px solid var(--line) }
.md tr:last-child td{ border-bottom:0 }
.md pre{ border-radius:12px; border:1px solid var(--line); box-shadow:var(--ws-shadow) }
.md blockquote{ border-left:2px solid var(--brand); padding:2px 0 2px 12px; color:var(--txt2); margin:10px 0 }

/* ---------- каркас приложения ---------- */
#app{ grid-template-columns:auto 1fr; }
.sidebar, #sidebar{ transition:width .22s var(--ws-ease), transform .22s var(--ws-ease) }
.topbar{ backdrop-filter:blur(14px) }

/* ---------- сообщения: человек справа, ИИ слева ---------- */
.msg{ display:flex; gap:12px; margin-bottom:26px; animation:wsRise .32s var(--ws-ease) both }
.msg.user{ flex-direction:row-reverse; text-align:left }
.msg.user .body{ align-items:flex-end }
.msg.user .who{ justify-content:flex-end }
.msg.user .md{ background:linear-gradient(150deg,var(--brand-soft),transparent 70%); border:1px solid var(--line); border-radius:14px 4px 14px 14px; padding:11px 14px }
.msg.bot .md{ padding:2px 0 }
.msg .acts{ opacity:0; transition:opacity .18s var(--ws-ease) }
.msg:hover .acts{ opacity:1 }
@keyframes wsRise{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ---------- правая контекстная колонка ---------- */
.sidepanes{ display:flex; min-height:0 }
.ws-right{ width:340px; flex:0 0 340px; border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--panel) }
.ws-right-top{ display:flex; gap:4px; padding:8px 10px; border-bottom:1px solid var(--line); align-items:center; background:var(--panel); position:sticky; top:0; z-index:2 }
.ws-tab{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9px; font-size:12.5px; color:var(--txt2); transition:.16s var(--ws-ease) }
.ws-tab:hover{ background:var(--panel2); color:var(--txt) }
.ws-tab.on{ background:var(--brand-soft); color:var(--brand2) }
.ws-right-body{ flex:1; min-height:0; overflow:auto; padding:12px }
.ws-right-foot{ border-top:1px solid var(--line); padding:8px 10px; font-size:11.5px; color:var(--txt3); display:flex; gap:8px; align-items:center }

/* артефакты */
.ws-art{ border:1px solid var(--line); border-radius:12px; padding:9px 11px; margin-bottom:8px; cursor:pointer; background:var(--panel2); transition:.18s var(--ws-ease) }
.ws-art:hover{ transform:translateY(-1px); border-color:var(--line2); box-shadow:var(--ws-shadow) }
.ws-art b{ display:block; font-size:13px; font-weight:600 }
.ws-art span{ font-size:11.5px; color:var(--txt3) }
.ws-empty{ color:var(--txt3); font-size:12.5px; text-align:center; padding:26px 12px; line-height:1.7 }
.ws-code{ font-family:var(--mono); font-size:12px; white-space:pre-wrap; word-break:break-word; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px; max-height:46vh; overflow:auto }
.ws-frame{ width:100%; height:44vh; border:1px solid var(--line); border-radius:10px; background:#fff }

/* шахматы */
.ws-chess{ display:flex; flex-direction:column; gap:10px }
.chess-board{
  width:100%; max-width:100%; aspect-ratio:1/1;
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr));
  border-radius:12px; overflow:hidden; border:1px solid var(--line2); box-shadow:var(--ws-shadow)
}
.chess-sq{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; min-width:0; min-height:0; cursor:pointer; user-select:none;
  transition:background .12s; font-size:0; line-height:0
}
.chess-sq.light{ background:#e7e1d5 }
.chess-sq.dark{ background:#8a7e6c }
html[data-theme="night"] .chess-sq.light{ background:#d3cbbb }
html[data-theme="night"] .chess-sq.dark{ background:#6f665a }
.chess-sq.sel{ box-shadow:inset 0 0 0 3px var(--brand) }
.chess-sq.hint::after{ content:""; position:absolute; width:26%; height:26%; border-radius:50%; background:rgba(40,40,40,.32) }
.chess-sq.cap::after{ content:""; position:absolute; inset:6%; border-radius:50%; border:3px solid rgba(200,60,60,.5) }
.chess-sq.last{ box-shadow:inset 0 0 0 999px rgba(255,200,80,.22) }
.chess-piece{
  display:block; width:82%; height:82%;
  background-position:center; background-repeat:no-repeat; background-size:contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))
}
.chess-piece svg{ width:100%; height:100%; display:block }
.chess-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--txt2) }
.chess-moves{ font-size:12px; color:var(--txt2); max-height:88px; overflow:auto; line-height:1.5; font-family:var(--mono) }
.chess-ctl{ display:flex; gap:6px }
.chip{ border:1px solid var(--line2); border-radius:999px; padding:4px 10px; font-size:11.5px; color:var(--txt2) }
.chip.on{ background:var(--brand-soft); color:var(--brand2); border-color:transparent }

/* ---------- сервисы в поповере ---------- */
.pop{ border-radius:14px; box-shadow:var(--ws-shadow) }
.svc{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:10px; cursor:pointer; transition:.15s var(--ws-ease) }
.svc:hover{ background:var(--panel3) }
.svc-dot{ width:7px; height:7px; border-radius:50%; background:var(--txt3) }
.svc-dot.on{ background:var(--ok); box-shadow:0 0 0 3px rgba(53,211,153,.16) }
.svc-form{ display:flex; flex-direction:column; gap:8px; margin-top:8px }
.svc-form input{ background:var(--panel2); border:1px solid var(--line2); border-radius:9px; padding:8px 10px; font-size:12.5px }

/* ---------- карточки тарифов ---------- */
.plans-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding-bottom:6px }
.plan-card{ position:relative; border:1px solid var(--line); border-radius:16px; padding:16px; background:linear-gradient(180deg,var(--panel2),var(--panel)); display:flex; flex-direction:column; gap:10px; min-width:210px; transition:.22s var(--ws-ease) }
.plan-card:hover{ transform:translateY(-3px); box-shadow:var(--ws-shadow) }
.plan-card.current{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand),0 18px 50px -30px var(--brand) }
.plan-card .pc-name{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px }
.plan-card .pc-price{ font-size:22px; font-weight:800; letter-spacing:-.03em }
.plan-card .pc-price small{ font-size:11.5px; font-weight:500; color:var(--txt3) }
.plan-card ul{ list-style:none; display:flex; flex-direction:column; gap:6px; font-size:12.3px; color:var(--txt2) }
.plan-card li{ display:flex; gap:7px; align-items:flex-start }
.plan-card li svg{ margin-top:3px; flex:0 0 auto }
.plan-card li.no{ color:var(--txt3); opacity:.65 }
.plan-badge{ position:absolute; top:-9px; right:14px; background:var(--brand); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:.04em }
.usage-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px }
.usage-card{ border:1px solid var(--line); border-radius:13px; padding:12px; background:var(--panel2) }
.usage-card .uc-name{ font-size:11.5px; color:var(--txt3); text-transform:uppercase; letter-spacing:.06em }
.usage-card .uc-val{ font-size:20px; font-weight:750; letter-spacing:-.02em; margin-top:2px }
.usage-card .uc-sub{ font-size:11.5px; color:var(--txt3) }
.usage-bar{ height:5px; border-radius:99px; background:var(--panel3); margin-top:8px; overflow:hidden }
.usage-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .5s var(--ws-ease) }

/* ---------- модели ---------- */
.modelmenu{ border-radius:14px; box-shadow:var(--ws-shadow); padding:8px }
.mm-row{ border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; cursor:pointer; transition:.15s var(--ws-ease) }
.mm-row:hover{ background:var(--panel3) }
.mm-row.sel{ background:var(--brand-soft) }
.mm-row.locked{ opacity:.55; cursor:not-allowed }
.mm-row .mm-top{ display:flex; align-items:center; gap:8px }
.mm-row b{ font-size:13px; font-weight:600 }
.mm-row small{ font-size:11.5px; color:var(--txt3); line-height:1.45 }
.mm-tag{ font-size:10px; padding:1px 6px; border-radius:99px; background:var(--panel3); color:var(--txt2); border:1px solid var(--line2) }

/* ---------- голосовой режим: аватар в чате ---------- */
.voice-orb{ width:30px; height:30px; border-radius:10px; background:url('/avatar') center/cover no-repeat,linear-gradient(150deg,var(--brand),var(--brand3)); display:flex; align-items:center; justify-content:center; position:relative }
.voice-orb.talk::after{ content:""; position:absolute; inset:-4px; border-radius:14px; border:2px solid var(--brand2); animation:wsPulse 1.4s var(--ws-ease) infinite }
@keyframes wsPulse{ 0%{transform:scale(.94);opacity:.9} 70%{transform:scale(1.12);opacity:0} 100%{opacity:0} }
.voice-inline{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:16px; padding:10px 12px; background:linear-gradient(150deg,var(--panel2),var(--panel)); margin-bottom:10px }
.voice-inline .vi-name{ font-size:12.5px; font-weight:600 }
.voice-inline .vi-state{ font-size:11.5px; color:var(--txt3) }
.voice-wave{ display:flex; align-items:flex-end; gap:3px; height:22px; flex:1 }
.voice-wave i{ width:3px; border-radius:2px; background:var(--brand2); animation:wsWave 1.1s ease-in-out infinite }
@keyframes wsWave{ 0%,100%{height:20%} 50%{height:100%} }
.voice-dot{ width:8px; height:8px; border-radius:50%; background:var(--err); animation:wsPulse 1.2s infinite }

/* ---------- участники чата ---------- */
.people{ display:flex; align-items:center; gap:-6px }
.people .p{ width:22px; height:22px; border-radius:50%; background:var(--panel3); border:2px solid var(--panel); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--txt2); margin-left:-6px }
.people .p:first-child{ margin-left:0 }

/* ---------- адаптив ---------- */
@media (max-width:1200px){ .ws-right{ width:300px; flex-basis:300px } }
@media (max-width:980px){
  .ws-right{ position:fixed; top:0; right:0; bottom:0; width:min(92vw,360px); z-index:60; transform:translateX(102%); transition:transform .24s var(--ws-ease); box-shadow:var(--ws-shadow); background:var(--panel) }
  .ws-right.on{ transform:none }
  .ws-scrim{ position:fixed; inset:0; background:rgba(4,5,8,.55); backdrop-filter:blur(2px); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s }
  .ws-scrim.on{ opacity:1; pointer-events:auto }
  .plans-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .msg.user .md{ max-width:86% }
  .plans-grid{ grid-template-columns:1fr }
  .usage-cards{ grid-template-columns:1fr 1fr }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important }
}

/* ---------- доп. компоненты чата и правой панели ---------- */
.ws-tab[hidden]{ display:none !important }
.ws-bar{ display:flex; align-items:center; gap:8px; padding:2px 2px 10px; border-bottom:1px solid var(--line); margin-bottom:10px }
.ws-bar-t{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--txt3); flex:1 }
.ws-mini{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; color:var(--txt3); border:1px solid transparent }
.ws-mini:hover{ color:var(--txt); background:var(--panel2); border-color:var(--line) }
.ws-list{ display:flex; flex-direction:column; gap:1px }

.msg-chess{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 11px; border:1px solid var(--line2); border-radius:12px; background:var(--panel2) }
.msg-chess .mc-ic{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand2); flex:0 0 auto }
.msg-chess b{ display:block; font-size:12.8px; font-weight:600 }
.msg-chess small{ display:block; font-size:11.2px; color:var(--txt3) }

.mm-top{ display:flex; align-items:center; gap:7px }
.mm-tag{ font-size:9.6px; letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:20px; background:var(--panel3); color:var(--txt3); border:1px solid var(--line) }
.mm-row.locked{ opacity:.62 }
.mm-row.locked:hover{ opacity:.9 }

/* широкая модалка для тарифов */
.modal-card.wide{ max-width:1000px }
.plan-card .pc-name{ text-transform:none }
.plan-card ul{ margin:0 }
@media (max-width:1000px){ .plans-grid{ grid-template-columns:1fr 1fr } .usage-cards{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .plans-grid{ grid-template-columns:1fr } }

/* аватар ассистента в сообщениях и в голосовой панели */
.msg .av.av-ai{ background-size:cover; background-position:center; overflow:hidden }
.voice-inline .voice-orb{ background-size:cover; background-position:center }
.msg .av.av-ai:not(.has-img){ color:var(--brand2); background:var(--brand-soft); border-color:transparent }

/* полоски моделей на лендинге */
.pl-models{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 10px }
.pl-models .mm{ font-size:10.5px; letter-spacing:.02em; padding:2px 7px; border-radius:20px; border:1px solid var(--line2); color:var(--brand2); background:var(--brand-soft) }
.pl-models .mm.off{ color:var(--txt3); background:transparent; border-color:var(--line); text-decoration:line-through; opacity:.7 }

/* =====================================================================
   3D-аватар ИИ (WebGL): компактный в голосовой панели и большой в голосовом чате
   ===================================================================== */
.ava3d-wrap{ position:relative; flex:0 0 auto; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 42%, rgba(124,108,255,.22), rgba(10,12,20,.0) 68%); }
.ava3d-wrap canvas{ width:100%; height:100%; display:block; }
.ava3d-wrap.ava3d-fallback{ background:radial-gradient(circle at 50% 40%, var(--brand2), var(--brand3)); }
.ava3d-sm{ width:54px; height:54px; box-shadow:0 0 0 1px rgba(124,108,255,.35), 0 0 18px rgba(124,108,255,.25) }
.voice-inline .ava3d-wrap{ margin:0 }
.ava3d-hero{ width:min(46vw,300px); height:min(46vw,300px); border-radius:0; background:none; margin:0 auto 10px;
  filter:drop-shadow(0 22px 45px rgba(90,70,255,.35)) }
.voice-card .ava3d-hero::after{ content:''; position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  width:56%; height:8px; border-radius:50%; background:radial-gradient(ellipse, rgba(124,108,255,.55), rgba(124,108,255,0) 70%) }
.av.av-ai.av3d-img{ background-size:cover; background-position:center 32%; box-shadow:0 0 0 1px rgba(124,108,255,.35) inset }
@media (max-width:760px){ .ava3d-hero{ width:58vw; height:58vw } }

/* источники под ответом (веб-поиск) */
.msg-sources{ margin-top:9px; border-top:1px solid var(--line); padding-top:8px; display:flex; flex-direction:column; gap:4px }
.msg-sources .ms-head{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt3); margin-bottom:2px }
.msg-sources .ms-item{ display:flex; gap:7px; align-items:baseline; font-size:12px; color:var(--txt2); text-decoration:none; padding:3px 6px; border-radius:6px; overflow:hidden }
.msg-sources .ms-item:hover{ background:var(--panel2); color:var(--txt) }
.msg-sources .ms-host{ flex:0 0 auto; font-size:11px; color:var(--brand2); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.msg-sources .ms-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* =====================================================================
   Композер и композер чата — в духе чистого минималистичного ассистента:
   скруглённая капсула, крупная круглая кнопка отправки
   ===================================================================== */
.cbox{ border-radius:26px; padding:4px 4px 4px 6px; background:var(--panel);
  border:1px solid var(--line2); box-shadow:0 12px 32px -26px rgba(15,20,40,.45) }
.cbox:focus-within{ border-color:var(--txt3); box-shadow:0 12px 32px -26px rgba(15,20,40,.5) }
.cbox textarea{ padding:12px 12px 4px; font-size:14.5px }
.cbot{ padding:2px 4px 4px }
.send{ width:34px; height:34px; border-radius:50%; background:var(--brand) }
.send:disabled{ background:var(--panel3); color:var(--txt3) }
.tool{ width:32px; height:32px; border-radius:50% }
.voice-btn{ border-radius:999px; height:32px; padding:0 14px; background:transparent; border:1px solid var(--line2) }
.topbar{ background:var(--bg); border-bottom:1px solid var(--line) }
.side-foot .avatar{ border-radius:50% }
.newchat{ border-radius:999px; background:var(--panel2); color:var(--txt); border:1px solid var(--line2); font-weight:560 }
.newchat:hover{ background:var(--panel3) }
.nav-item{ border-radius:999px }
.msg.user .bubble, .msg.user .md{ border-radius:18px }

/* контраст в светлых темах: код и жирный текст не должны «пропадать» */
[data-theme="light"] .md strong,[data-theme="sand"] .md strong{ color:var(--txt) }
[data-theme="light"] .md pre,[data-theme="sand"] .md pre{ background:var(--panel2) }
[data-theme="light"] .md pre code,[data-theme="sand"] .md pre code{ color:var(--txt) }
[data-theme="light"] .md code,[data-theme="sand"] .md code{ color:var(--txt) }
[data-theme="light"] .md table,[data-theme="sand"] .md table{ color:var(--txt) }
[data-theme="light"] .msg .tag,[data-theme="sand"] .msg .tag{ background:var(--panel3); color:var(--txt2) }
[data-theme="light"] .avatar,[data-theme="sand"] .avatar{ color:var(--txt) }
[data-theme="light"] .send,[data-theme="sand"] .send{ color:#fff }

/* ---------- производные токены состояния (для всех тем) ---------- */
html[data-theme="graphite"]{ --info:#8fb4cc; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --dur:180ms; --border-soft:rgba(170,180,200,.14) }
html[data-theme="ocean"]{ --info:#63c6ea; --border-soft:rgba(120,185,215,.18) }
html[data-theme="sand"]{ --info:#276A87; --border-soft:rgba(150,125,95,.18) }
html[data-theme="light"]{ --info:#286F8C; --border-soft:rgba(70,90,130,.14) }

/* фокус: видимый, но не кричащий */
:where(button,a,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--brand2); outline-offset:2px; border-radius:var(--r-sm)
}
/* уважение к reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}
/* скелетоны загрузки */
.skel{ background:linear-gradient(90deg,var(--panel2),var(--panel3),var(--panel2)); background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite; border-radius:var(--r-sm); color:transparent !important }
@keyframes skel{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-line{ height:11px; margin:7px 0 }
/* кнопки: единые состояния default/hover/active/disabled */
.btn,button.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 16px; border-radius:var(--r-md); font-size:13.5px; font-weight:560;
  border:1px solid var(--line2); background:var(--panel2); color:var(--txt);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease) }
.btn:hover{ background:var(--panel3) }
.btn:active{ transform:translateY(1px) }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none }
.btn-primary{ background:var(--brand); border-color:transparent; color:#fff }
.btn-primary:hover{ background:var(--brand2) }
.btn-ghost{ background:transparent; border-color:var(--line2); color:var(--txt2) }
.btn-ghost:hover{ color:var(--txt); border-color:var(--txt3) }
.btn-sm{ height:32px; padding:0 12px; font-size:12.5px; border-radius:var(--r-sm) }
/* поля ввода: единые */
.field input,.field textarea{ border-radius:var(--r-md) }

/* =====================================================================
   Лендинг: двухколоночный hero, категории, шаги, сценарии, FAQ-аккордеон
   ===================================================================== */
.hero2{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
  max-width:1120px; margin:0 auto; padding:clamp(34px,6vh,72px) 26px 26px }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.02em;
  color:var(--txt2); background:var(--panel); border:1px solid var(--line2); border-radius:999px; padding:6px 12px; margin-bottom:18px }
.hero2 h1{ font-size:clamp(30px,4.4vw,50px); line-height:1.06; letter-spacing:-.035em; font-weight:640; margin-bottom:16px; color:var(--txt) }
.hero2-sub{ color:var(--txt2); font-size:15.5px; line-height:1.62; max-width:520px; margin-bottom:24px }
.hero2-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px }
.hero-cta{ height:44px; padding:0 20px; font-size:14px }
.hero2-points{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0; padding:0 }
.hero2-points li{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--txt2) }
.hero2-points svg{ color:var(--ok); flex:0 0 auto; margin-top:2px }
.hero2-right{ position:relative }
.hero-preview,.pv-card{ display:block; align-items:stretch; gap:0; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-lg);
  padding:14px; box-shadow:0 30px 70px -46px rgba(15,20,45,.55) }
.hero-preview{ margin-top:0 }
.pv-msg + .pv-msg{ margin-top:2px }
.pv-msg::after{ letter-spacing:0 }
.pv-top{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--txt3); margin-bottom:12px }
.pv-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok) }
.pv-tag{ margin-left:auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line2); border-radius:999px; padding:2px 7px; color:var(--txt3) }
.pv-msg{ font-size:13px; line-height:1.55; border-radius:14px; padding:9px 12px; margin-bottom:9px; max-width:92% }
.pv-msg.u{ background:var(--panel2); border:1px solid var(--line); margin-left:auto }
.pv-msg.b{ background:transparent; border:1px solid var(--line2) }
.pv-src{ display:block; margin-top:6px; font-size:11px; color:var(--txt3) }
.pv-step{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--txt2);
  border:1px solid var(--line); background:var(--panel2); border-radius:9px; padding:6px 9px; margin-bottom:7px; font-family:var(--mono) }
.pv-ico{ width:7px; height:7px; border-radius:50%; background:var(--brand); flex:0 0 auto }
.pv-step em{ margin-left:auto; font-style:normal; color:var(--txt3); font-size:10.5px }

.cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
.cat{ background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-lg); padding:16px 17px; transition:border-color var(--dur) var(--ease) }
.cat:hover{ border-color:var(--txt3) }
.cat header{ display:grid; grid-template-columns:auto 1fr; gap:2px 11px; align-items:center; margin-bottom:10px }
.cat-ico{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand2); grid-row:span 2 }
.cat h3{ font-size:14.5px; font-weight:620; margin:0 }
.cat header p{ font-size:12.5px; color:var(--txt3); margin:0 }
.cat ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.cat li{ font-size:12.8px; color:var(--txt2); padding-left:14px; position:relative; line-height:1.5 }
.cat li::before{ content:''; position:absolute; left:2px; top:7px; width:5px; height:5px; border-radius:50%; background:var(--brand) }
.cat code{ font-family:var(--mono); font-size:11.5px; background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:0 4px }

.steps3{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0; padding:0; counter-reset:step }
.steps3 li{ background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-lg); padding:16px; position:relative }
.steps3 .num{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:12.5px; font-weight:650; margin-bottom:10px }
.steps3 b{ display:block; font-size:14px; margin-bottom:6px }
.steps3 p{ font-size:12.8px; color:var(--txt2); line-height:1.55; margin:0 }

.scen{ background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-xl); padding:14px }
.scen-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px }
.scen-tab{ height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--line2); background:transparent;
  color:var(--txt2); font-size:13px; font-weight:540; transition:all var(--dur) var(--ease) }
.scen-tab:hover{ color:var(--txt); background:var(--panel2) }
.scen-tab.on{ background:var(--txt); color:var(--bg); border-color:var(--txt) }
.scen-body{ display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:4px 6px 8px }
.scen-txt h3{ font-size:16px; font-weight:620; margin-bottom:8px }
.scen-txt p{ font-size:13.3px; color:var(--txt2); line-height:1.62; margin-bottom:10px }
.scen-txt ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.scen-txt li{ display:flex; gap:8px; font-size:12.6px; color:var(--txt2) }
.scen-txt svg{ color:var(--ok); flex:0 0 auto; margin-top:3px }
.scen-demo{ display:flex; flex-direction:column; justify-content:center; gap:8px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px }
.scen-demo .bubble{ font-size:12.6px; line-height:1.55; padding:8px 11px; border-radius:12px; max-width:95%; color:var(--txt) }
.scen-demo .bubble.u{ background:var(--panel3); margin-left:auto; border:1px solid var(--line2) }
.scen-demo .bubble.b{ background:var(--panel); border:1px solid var(--line2) }
.scen-demo .bubble.mono{ font-family:var(--mono); font-size:11.6px; white-space:pre-wrap }
.scen-demo .mini{ font-family:var(--mono); font-size:11px; color:var(--txt3); border:1px dashed var(--line2); border-radius:9px; padding:6px 9px }

.faq2{ display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; align-items:start }
.faq-group h3{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--txt3); margin-bottom:10px }
.qa2{ border-bottom:1px solid var(--line); padding:10px 0 }
.qa2 summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
  font-size:13.4px; font-weight:560; color:var(--txt); list-style:none }
.qa2 summary::-webkit-details-marker{ display:none }
.qa2 summary svg{ flex:0 0 auto; color:var(--txt3); transition:transform var(--dur) var(--ease) }
.qa2[open] summary svg{ transform:rotate(180deg) }
.qa2-body{ font-size:12.9px; color:var(--txt2); line-height:1.65; padding-top:8px }

@media (max-width:1023px){
  .hero2{ grid-template-columns:1fr; gap:26px }
  .cat-grid{ grid-template-columns:1fr }
  .steps3{ grid-template-columns:1fr }
  .scen-body{ grid-template-columns:1fr }
  .faq2{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .land-nav{ gap:8px; padding:12px 14px }
  .land-nav .brandname{ white-space:nowrap; font-size:12.5px }
  .nav-pill{ padding:8px 13px; font-size:12.5px; white-space:nowrap }
  .hero2{ padding-left:18px; padding-right:18px }
  .hero2 h1{ font-size:clamp(27px,8vw,34px) }
  .hero-cta{ flex:1 1 100% }
  .land-nav .lnk{ display:none }
  .step-card,.cat{ padding:14px }
}

/* ---------- тарифы и сравнительная таблица на лендинге: общий вид ---------- */
.pl-models{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 2px }
.pl-models .mm{ font-size:10.5px; letter-spacing:.01em; padding:2px 8px; border-radius:999px;
  border:1px solid var(--line2); color:var(--txt2); background:var(--panel2); white-space:nowrap }
.pl-models .mm.off{ color:var(--txt3); border-style:dashed; background:transparent; opacity:.75 }
.plan{ border-color:var(--line2); background:var(--panel); border-radius:var(--r-lg) }
.plan .tagline{ color:var(--txt3) }
.plan .price{ color:var(--txt) }
.plan .price small{ color:var(--txt3) }
.plan li{ color:var(--txt2) }
.plan.hot{ border-color:color-mix(in srgb,var(--brand) 55%,transparent);
  background:linear-gradient(180deg,var(--brand-soft),transparent 80%); box-shadow:0 22px 60px -34px var(--brand) }
.plan .pbtn{ border-color:var(--line2); color:var(--txt); background:var(--panel2); min-height:44px }
.plan .pbtn:hover{ background:var(--panel3) }
.plan.hot .pbtn{ background:var(--brand); border-color:var(--brand); color:#fff }
.plan.hot .pbtn:hover{ background:var(--brand2); filter:none }
.plans.five{ align-items:stretch }
.plans.five .plan{ padding:16px 14px }

.cmp{ border:1px solid var(--line2); background:var(--panel); color:var(--txt2); display:table }
.cmp th{ background:var(--panel2); color:var(--txt); border-bottom:1px solid var(--line2) }
.cmp td{ border-top:1px solid var(--line); color:var(--txt2) }
.cmp td:first-child{ color:var(--txt) }
.cmp .no{ color:var(--txt3) }
.cmp-wrap{ -webkit-overflow-scrolling:touch }

.foot-cols{ border-top:1px solid var(--line) }
.foot-cols b{ color:var(--txt3) }
.foot-cols button{ color:var(--txt2) }
.foot-cols button:hover{ color:var(--txt) }
.foot-cols p{ color:var(--txt3) }
.trust div{ border-color:var(--line2); background:var(--panel) }
.trust b{ color:var(--txt) }
.trust small{ color:var(--txt2) }
.sec-head p{ color:var(--txt2) }
.land-foot{ border-top:1px solid var(--line); color:var(--txt3) }

@media (max-width:640px){
  .cmp-wrap{ overflow-x:auto }
  .cmp{ font-size:11.6px }
  .cmp th,.cmp td{ padding:9px 11px; white-space:nowrap }
}

/* ---------- авторизация: поля, подсказки, состояния ---------- */
.auth{ background:color-mix(in srgb,var(--bg) 72%,transparent) }
.auth-card{ background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-xl);
  box-shadow:0 40px 100px -40px rgba(6,10,22,.55); padding:26px; max-width:404px }
.auth-card .lead{ color:var(--txt2) }
.field{ margin-bottom:13px }
.field label{ font-size:12px; font-weight:560; color:var(--txt); margin-bottom:6px; display:block }
.field input{ min-height:44px; background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
  color:var(--txt); font-size:14px; padding:10px 12px; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease) }
.field input::placeholder{ color:var(--txt3) }
.field input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none }
.field input.bad{ border-color:var(--err) }
.fhint{ font-size:11.5px; color:var(--txt3); margin-top:5px; line-height:1.4 }
.fhint.bad{ color:var(--err) }
.pwrap{ position:relative; display:flex }
.pwrap input{ padding-right:44px; width:100% }
.peye{ position:absolute; right:2px; top:2px; width:40px; height:40px; display:grid; place-items:center;
  border-radius:8px; color:var(--txt3); transition:color var(--dur) var(--ease),background var(--dur) var(--ease) }
.peye:hover{ color:var(--txt); background:var(--panel3) }
.alert{ background:color-mix(in srgb,var(--err) 14%,transparent); border:1px solid color-mix(in srgb,var(--err) 40%,transparent);
  color:var(--err); font-size:12.8px; line-height:1.5; padding:9px 12px; border-radius:10px; margin-bottom:12px }
.auth-alt{ color:var(--txt2) }
.auth-alt b{ color:var(--brand); cursor:pointer }
.auth-alt b:hover{ text-decoration:underline }
.legal-links button{ color:var(--txt3); font-size:11.5px }
.legal-links button:hover{ color:var(--txt) }
.btn-primary.loading{ opacity:.75; cursor:progress }

/* ---------- настройки: группы, переключатель тем ---------- */
.set-group{ padding:14px 0; border-bottom:1px solid var(--line) }
.set-group:first-child{ padding-top:2px }
.set-group:last-child{ border-bottom:0; padding-bottom:2px }
.set-group h3{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--txt3); margin-bottom:9px }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 11px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel2); margin-bottom:7px; font-size:13px }
.set-row span{ color:var(--txt2) }
.set-row b{ color:var(--txt); font-weight:560; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.set-note{ font-size:11.8px; color:var(--txt3); line-height:1.55; margin:2px 0 9px }
.set-note a{ color:var(--brand) }
.set-links{ display:flex; flex-direction:column; gap:2px }
.set-links button{ text-align:left; font-size:13px; color:var(--txt2); padding:9px 10px; border-radius:9px; min-height:40px }
.set-links button:hover{ background:var(--panel2); color:var(--txt) }
.set-themes{ display:flex; flex-wrap:wrap; gap:7px }
.set-theme{ display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px;
  border:1px solid var(--line2); background:transparent; color:var(--txt2); font-size:12.5px; min-height:36px;
  transition:all var(--dur) var(--ease) }
.set-theme:hover{ color:var(--txt); background:var(--panel2) }
.set-theme.on{ border-color:var(--brand); color:var(--txt); background:var(--brand-soft) }
.set-theme .sw{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18); display:block }
.sw-night{ background:linear-gradient(140deg,#090b12,#2a3648) }
.sw-graphite{ background:linear-gradient(140deg,#101114,#343a46) }
.sw-ocean{ background:linear-gradient(140deg,#061018,#22485c) }
.sw-sand{ background:linear-gradient(140deg,#f6f3ee,#d9cdb8) }
.sw-light{ background:linear-gradient(140deg,#fff,#cfd6e3) }
.btn-danger{ min-height:44px; border-radius:10px; border:1px solid color-mix(in srgb,var(--err) 40%,transparent);
  background:color-mix(in srgb,var(--err) 10%,transparent); color:var(--err); font-size:13px; font-weight:560 }
.btn-danger:hover{ background:color-mix(in srgb,var(--err) 18%,transparent) }
.modal-card .modal-head b{ font-size:14.5px }

/* ---------- документы: единый шаблон, оглавление, ширина строки ---------- */
.legal-wrap{ max-width:740px; padding:26px 22px 72px }
.legal-wrap h1{ font-size:clamp(22px,4vw,28px); letter-spacing:-.03em; color:var(--txt) }
.legal-wrap .upd{ color:var(--txt3); padding-bottom:14px; border-bottom:1px solid var(--line) }
.legal-wrap h2{ font-size:15.5px; color:var(--txt); scroll-margin-top:16px; margin:26px 0 8px }
.legal-wrap p,.legal-wrap li{ color:var(--txt2); font-size:13.6px; line-height:1.72; max-width:68ch }
.legal-toc{ border:1px solid var(--line2); background:var(--panel); border-radius:var(--r-lg); padding:13px 16px; margin:4px 0 22px }
.legal-toc-t{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--txt3); margin-bottom:8px }
.legal-toc ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px }
.legal-toc a{ color:var(--txt2); font-size:12.8px; text-decoration:none; display:block; padding:3px 0 }
.legal-toc a:hover{ color:var(--brand); text-decoration:underline }
.legal-back{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 13px; margin-bottom:14px;
  border:1px solid var(--line2); border-radius:999px; color:var(--txt2); font-size:13px; background:var(--panel) }
.legal-back:hover{ color:var(--txt); background:var(--panel2) }
@media (max-width:640px){
  .legal-wrap{ padding:18px 16px 60px }
  .legal-toc{ padding:11px 13px }
}

/* ---------- мобильный композер и компактная шапка ---------- */
@media (max-width:640px){
  .cbox{ border-radius:16px }
  .cbox textarea{ font-size:16px; line-height:1.45; padding:10px 12px 2px }
  .cbox textarea::placeholder{ font-size:14px }
  .cbot .tool{ width:38px; height:38px }
}


/* ---------- polish: предсказуемая ширина, семантическая таблица, мобильная шапка ---------- */
.land-wrap{ width:100%; min-width:0 }
.sec,.sec-head,.cmp-wrap{ min-width:0; max-width:100% }
.sec{ width:100%; box-sizing:border-box }
.cmp-wrap{ width:100%; max-height:70vh; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.cmp{ width:100%; min-width:608px; border-collapse:collapse }
.cmp thead th{ position:sticky; top:0; z-index:2; background:var(--panel2); box-shadow:0 1px 0 var(--line2) }
.cmp th[scope="row"]{ font-weight:560; color:var(--txt); white-space:normal }
.cmp .cmp-group th{ padding:9px 12px; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--txt3); background:var(--panel); border-top:1px solid var(--line2); text-align:left }
.cmp-wrap:focus-visible{ outline:2px solid var(--brand2); outline-offset:-2px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.land-links{ display:flex; align-items:center; gap:2px }
.nav-short{ display:none }
.demo-note{ font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--txt3); margin-bottom:8px }
#wsLeftToggle{ display:none }
@media (min-width:981px){
  #wsLeftToggle{ display:grid }
  #app.left-collapsed > aside{ width:0; flex:0 0 0; overflow:hidden; border-right:0 }
  #app.left-collapsed > #scrim{ display:none }
}
@media (max-width:430px){
  .land-nav{ gap:6px; padding:10px 12px }
  .land-nav .brandname{ font-size:12px }
  .nav-round{ width:32px; height:32px }
  .nav-pill{ padding:7px 10px; font-size:12px }
  .nav-full{ display:none }
  .nav-short{ display:inline }
}
@media (max-width:360px){
  .land-nav .brandname{ display:none }
}
.plan .pbtn{ display:block; text-decoration:none }