/* SVI Home 06.10: продукты и их путь, решения изнутри, база знаний, тень, подписки, листы. Токены — app.css,
   стекло и плитки — home.css (облик 30.09). Обводок нет: плитки, свет, тени. */

/* ── меню ─────────────────────────────────────────────────────────────────────────────── */
.nav-item .nav-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;
  font:700 11px Inter,sans-serif;color:#04121c;background:var(--accent)}
.nav-site{display:flex;align-items:center;gap:11px;margin-top:14px;padding:10px 12px;border-radius:12px;color:var(--quieter);
  font:600 13px Inter,sans-serif;transition:color .18s ease,background .18s ease}
.nav-site:hover{color:var(--text-3);background:rgba(255,255,255,.04)}
.nav-site svg{font-size:17px}
@media(max-width:900px){.nav-site{display:none}}
/* 07.10: язык Home (i18n.js) — явный выбор человека, тихой строкой под «Сайт SVI» */
.nav-lang{display:block;margin-top:2px;padding:6px 12px 6px 40px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;
  color:var(--quieter);font:600 12px Inter,sans-serif;transition:color .18s ease,background .18s ease}
.nav-lang:hover{color:var(--text-3);background:rgba(255,255,255,.04)}
@media(max-width:900px){.nav-lang{display:none}}

/* ── общие ────────────────────────────────────────────────────────────────────────────── */
.section-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:40px 0 14px}
.section-row .section{margin:0}
.btn-quiet{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;padding:8px 14px;border-radius:999px;
  font:600 13px Inter,sans-serif;color:var(--accent);background:rgba(77,214,255,.1);transition:background .18s ease,transform .14s ease}
.btn-quiet:hover{background:rgba(77,214,255,.18)}
.btn-quiet:active{transform:scale(.97)}
.btn-quiet svg{font-size:15px}
.act{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;cursor:pointer;white-space:nowrap;
  padding:10px 15px;border-radius:13px;font:600 13.5px Inter,sans-serif;color:var(--text-3);text-decoration:none;
  background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .18s ease,transform .14s ease,box-shadow .2s ease,opacity .2s}
.act:hover{background:rgba(255,255,255,.11)}
.act:active{transform:scale(.97)}
.act:disabled{opacity:.55;cursor:default}
.act svg{font-size:15px}
.act.main{color:#04121c;background:linear-gradient(135deg,#8ae6ff,#4dd6ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 26px -14px rgba(77,214,255,.95)}
.act.main:hover{background:linear-gradient(135deg,#a2ecff,#5fdcff)}
.act.main.warn{background:linear-gradient(135deg,#fde68a,#fbbf24);box-shadow:0 12px 26px -14px rgba(251,191,36,.9)}
.act.quiet{color:var(--quieter);background:transparent;box-shadow:none}
.act.quiet:hover{color:var(--text-3);background:rgba(255,255,255,.05)}
.act.danger{color:var(--red);background:rgba(251,113,133,.08)}
.act.icon{padding:10px;color:var(--quieter)}
.act.icon:hover{color:var(--red)}
.act.file{position:relative}
.pill.ok{color:#05140d;background:var(--green)}
.pill.warn{color:#1c1405;background:var(--yellow)}
.pill.up{color:#05140d;background:linear-gradient(135deg,#a7f3d0,var(--green));cursor:pointer}
.link{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.none-box{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:20px;background:rgba(255,255,255,.035);color:var(--quiet-2);font-size:14px}
.none-box > svg{font-size:24px;color:var(--accent);margin-top:2px}
.none-box b{display:block;color:var(--text-3);font-size:15px;margin-bottom:4px}
.none-box span{display:block;margin-bottom:12px}
.skeleton.sm{min-height:90px}

/* ── внимание ─────────────────────────────────────────────────────────────────────────── */
.attn{display:grid;gap:8px;margin-top:24px}
.attn-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(100deg,rgba(77,214,255,.09),rgba(255,255,255,.025) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);animation:rise .45s cubic-bezier(.22,.7,.2,1) both}
.attn-row .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--accent);box-shadow:0 0 0 4px rgba(77,214,255,.15)}
.attn-row.k-shadow .dot{background:var(--lilac);box-shadow:0 0 0 4px rgba(167,139,250,.16)}
.attn-row.k-waiting .dot{background:var(--green);box-shadow:0 0 0 4px rgba(61,220,151,.16)}
.attn-row.k-paused .dot,.attn-row.k-ending .dot{background:var(--yellow);box-shadow:0 0 0 4px rgba(251,191,36,.16)}
.attn-row .t{min-width:0;flex:1}
.attn-row b{display:block;font:650 14.5px Inter,sans-serif}
.attn-row span{display:block;font-size:13px;color:var(--quiet-2)}
.attn-row .act{flex:none}

/* ── Mai ──────────────────────────────────────────────────────────────────────────────── */
.plate.mai .name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mai-line{margin:2px 0 0;color:var(--quiet-2);font-size:14px;max-width:520px}
.mai-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;align-items:center}
.mai-acts .btn-go{margin-top:0}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;padding:11px 16px;border-radius:999px;
  font:600 13.5px Inter,sans-serif;color:var(--text-3);background:rgba(255,255,255,.08);transition:background .18s ease}
.btn-ghost:hover{background:rgba(255,255,255,.13)}
.btn-ghost svg{font-size:15px;color:var(--accent)}
.spend-row.sub{padding-top:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.spend-row.sub b{color:var(--text-3);font-weight:650}
.spend-links{display:flex;justify-content:flex-end;gap:14px;margin-top:auto}

/* ── продукт ──────────────────────────────────────────────────────────────────────────── */
.plate.product{cursor:default;gap:12px;min-height:0}
.plate.product::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;opacity:.85;
  background:linear-gradient(90deg,var(--pa,var(--accent)),transparent)}
.plate.product.m-shadow::before{background:linear-gradient(90deg,var(--lilac),transparent)}
.plate.product.m-paused::before{background:linear-gradient(90deg,var(--yellow),transparent)}
.plate.product:hover{transform:translateY(-2px)}
.steps-mini{display:flex;gap:6px;flex-wrap:wrap}
.steps-mini span{display:inline-flex;align-items:center;gap:6px;font:600 11.5px Inter,sans-serif;color:var(--quieter);
  padding:4px 9px 4px 7px;border-radius:99px;background:rgba(255,255,255,.04)}
.steps-mini i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.steps-mini .done{color:var(--quiet-2)}
.steps-mini .done i{background:var(--green)}
.steps-mini .now{color:var(--text-3);background:rgba(77,214,255,.12)}
.steps-mini .now i{background:var(--accent);box-shadow:0 0 0 3px rgba(77,214,255,.25);animation:pulse 1.8s ease infinite}
.steps-mini .now.paused{background:rgba(251,191,36,.12)}
.steps-mini .now.paused i{background:var(--yellow);box-shadow:0 0 0 3px rgba(251,191,36,.22)}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(77,214,255,0)}}
.plate.product .foot{margin-top:0}
.plate.product .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.plate.product .acts .act{padding:9px 13px;font-size:13px}
.plate.product.hoh{cursor:pointer}
.plate.add{border:0;font:inherit;color:inherit;text-align:left}

/* черновики */
.drafts{display:grid;gap:8px}
.draft{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.draft .t{min-width:0;flex:1}
.draft b{display:block;font:650 14px Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.draft span{display:block;font-size:12.5px;color:var(--quieter)}
.logo.s{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;font:800 13px Inter,sans-serif;color:#04121c;
  background:linear-gradient(135deg,var(--c1,#4dd6ff),var(--c2,#6366f1))}
.logo.s.plus{background:rgba(77,214,255,.12);color:var(--accent);font-size:18px}

/* ── каталог решений ──────────────────────────────────────────────────────────────────── */
.search{position:relative;margin:24px 0 18px;max-width:560px}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:17px;color:var(--quieter)}
.search input{width:100%;padding:13px 16px 13px 44px;border-radius:16px;border:0;outline:0;color:var(--text-3);
  font:500 14.5px Inter,sans-serif;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.search input:focus{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1.5px rgba(77,214,255,.55)}
.sol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:16px}
.sol{position:relative;display:flex;flex-direction:column;gap:10px;padding:0 20px 20px;border-radius:22px;overflow:hidden;
  background:radial-gradient(380px 200px at 100% 0%,color-mix(in srgb,var(--a) 16%,transparent),transparent 65%),
    linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 50px -30px rgba(0,0,0,.9);
  opacity:0;transform:translateY(10px);animation:rise .5s cubic-bezier(.22,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * 60ms)}
.sol-band{height:12px;margin:0 -20px 6px;background:linear-gradient(90deg,var(--a),var(--a2))}
.sol-band.b-crane{background:repeating-linear-gradient(-45deg,var(--a) 0 12px,#14161c 12px 24px)}
.sol-band.b-skyline{height:16px;background:linear-gradient(0deg,var(--a) 0 3px,transparent 3px),
  repeating-linear-gradient(90deg,#0c1220 0 14px,transparent 14px 18px,#0c1220 18px 26px,transparent 26px 30px),linear-gradient(90deg,var(--a2),var(--a))}
.sol-band.b-ripples{background:radial-gradient(circle at 10px -4px,transparent 9px,var(--a) 10px 12px,transparent 13px) 0 0/20px 12px,linear-gradient(90deg,var(--a2),var(--a))}
.sol-band.b-steam{background:repeating-conic-gradient(var(--a) 0 25%,#fff3e6 0 50%) 0 0/12px 12px}
.sol-band.b-ship{background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px 9px),linear-gradient(90deg,var(--a),var(--a2))}
.sol-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sol-niche{font:700 11px var(--numbers);letter-spacing:.12em;text-transform:uppercase;color:var(--a)}
.sol-badge{font:700 11px Inter,sans-serif;padding:3px 9px;border-radius:99px;color:var(--ink);background:linear-gradient(135deg,var(--a),var(--a2))}
.sol h3{margin:0;font:700 20px/1.2 var(--numbers);letter-spacing:-.02em}
.sol-for{margin:0;color:var(--quiet-2);font-size:13.5px}
.sol-does{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.sol-does li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px}
.sol-does li svg{color:var(--a);font-size:15px;margin-top:2px}
.sol-team{display:flex;flex-wrap:wrap;gap:6px}
.sol-team span{font:600 11.5px Inter,sans-serif;padding:4px 9px;border-radius:99px;color:var(--quiet-2);background:rgba(255,255,255,.06)}
.sol-cab{display:flex;align-items:center;gap:8px;font:600 12.5px Inter,sans-serif;color:var(--text-3);padding:9px 11px;border-radius:12px;
  background:color-mix(in srgb,var(--a) 12%,transparent)}
.sol-cab svg{color:var(--a);font-size:16px}
.sol-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:auto;padding-top:8px}
.sol-price b{font:700 22px var(--numbers);letter-spacing:-.02em}
.sol-price span{color:var(--quiet-2);font-size:13px}
.sol-price em{flex-basis:100%;font-style:normal;font:600 12px Inter,sans-serif;color:var(--green)}
.sol-acts{display:flex;gap:8px;flex-wrap:wrap}
.sol-acts .act.main{background:linear-gradient(135deg,var(--a),var(--a2));color:var(--ink);box-shadow:0 12px 26px -14px var(--a)}
.more-grid .plate.eco{flex-direction:row;align-items:center;gap:14px;min-height:0;padding:18px 20px;border:0;font:inherit;color:inherit;text-align:left}
.plate.eco .icon{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:21px;color:#04121c}
.icon.c1,.ci.c1{background:linear-gradient(135deg,#8ae6ff,#4dd6ff)}
.icon.c2,.ci.c2{background:linear-gradient(135deg,#c4b5fd,#8b5cf6)}
.icon.c3,.ci.c3{background:linear-gradient(135deg,#a7f3d0,#34d399)}
.ci.c4{background:linear-gradient(135deg,#fde68a,#fbbf24)}
.plate.eco .name{min-width:0;flex:1}
.plate.eco .name b{white-space:normal}
.plate.eco .name span{white-space:normal;font-size:13px}
.plate.eco .go{position:static}

/* ── лист ─────────────────────────────────────────────────────────────────────────────── */
.sheet-back{position:fixed;inset:0;z-index:60;background:rgba(3,5,10,.62);opacity:0;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .25s ease}
.sheet-back.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:61;left:50%;top:50%;width:min(620px,calc(100vw - 32px));max-height:min(86vh,860px);
  display:flex;flex-direction:column;border-radius:24px;overflow:hidden;
  background:linear-gradient(170deg,rgba(26,36,56,.97),rgba(11,16,27,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.95);
  opacity:0;pointer-events:none;transform:translate(-50%,-46%) scale(.98);transition:opacity .22s ease,transform .3s cubic-bezier(.22,.7,.2,1)}
.sheet.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.sheet-grip{display:none}
.sheet-top{display:flex;align-items:center;gap:12px;padding:18px 18px 10px 22px}
.sheet-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font:700 17px var(--numbers);letter-spacing:-.02em}
.sheet-title svg{font-size:19px;color:var(--accent)}
.sh-dot{width:10px;height:10px;border-radius:50%;flex:none}
.sheet-x{width:36px;height:36px;border:0;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--quiet-2);
  background:rgba(255,255,255,.06);font-size:17px}
.sheet-x:hover{color:var(--text-3);background:rgba(255,255,255,.1)}
.sheet-body{padding:6px 22px 22px;overflow-y:auto;overscroll-behavior:contain}
.sheet-note{margin:0 0 14px;color:var(--quiet-2);font-size:14px}
.sheet-note.small{font-size:12.5px;margin:12px 0 0;color:var(--quieter)}
.sheet-acts{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}
body.sheet-on{overflow:hidden}
.fl{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;font:600 12.5px Inter,sans-serif;color:var(--quiet-2)}
.fl > svg{display:none}
.fl input,.fl textarea,.fl select,.inl input,.copy input,textarea#ask-text,#kb-text{width:100%;border:0;outline:0;border-radius:13px;padding:12px 14px;
  color:var(--text-3);font:500 14.5px Inter,sans-serif;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);resize:vertical}
.fl input:focus,.fl textarea:focus,.fl select:focus,.inl input:focus,textarea#ask-text:focus,#kb-text:focus{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1.5px rgba(77,214,255,.55)}
.fl select option{color:#0b1220}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inl{display:flex;gap:8px;align-items:stretch}
.inl input{flex:1;min-width:0}
.inl.two{margin-top:10px}
.copy{display:flex;gap:8px}
.copy input{flex:1;min-width:0;font-size:13px;color:var(--quiet-2)}
.choices{display:grid;gap:8px}
.choice{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit;
  background:rgba(255,255,255,.045);transition:background .18s ease,transform .14s ease}
.choice:hover{background:rgba(255,255,255,.08)}
.choice:active{transform:scale(.99)}
.choice .ci{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;font-size:19px;color:#04121c}
.choice > div:nth-child(2){min-width:0;flex:1}
.choice b{display:block;font:650 14.5px Inter,sans-serif}
.choice span{display:block;font-size:12.5px;color:var(--quiet-2)}
.choice > svg{color:var(--quieter);font-size:16px}
.done-box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 6px}
.done-box svg{width:54px;height:54px;padding:13px;border-radius:50%;color:#05140d;background:var(--green);
  box-shadow:0 0 0 8px rgba(61,220,151,.14),0 14px 40px -12px rgba(61,220,151,.9);animation:pop .5s var(--spring) both}
.done-box b{font:700 19px var(--numbers);letter-spacing:-.02em}
.done-box span{color:var(--quiet-2);font-size:14px;max-width:420px}
.done-box.big{padding:30px 6px}
@keyframes pop{from{transform:scale(.4);opacity:0}}

/* мастер */
.wiz-rail{list-style:none;margin:0 0 18px;padding:0;display:flex;gap:4px;counter-reset:s}
.wiz-rail li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font:600 11px Inter,sans-serif;color:var(--quieter);text-align:center}
.wiz-rail li::before{content:"";position:absolute;top:13px;left:calc(-50% + 16px);right:calc(50% + 16px);height:2px;background:rgba(255,255,255,.08)}
.wiz-rail li:first-child::before{display:none}
.wiz-rail li.done::before,.wiz-rail li.now::before{background:linear-gradient(90deg,var(--green),var(--accent))}
.wiz-rail i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 12px Inter,sans-serif;font-style:normal;
  background:rgba(255,255,255,.06);color:var(--quiet-2);position:relative;z-index:1}
.wiz-rail i svg{font-size:14px}
.wiz-rail li.done i{background:var(--green);color:#05140d}
.wiz-rail li.now{color:var(--text-3)}
.wiz-rail li.now i{background:var(--accent);color:#04121c;box-shadow:0 0 0 4px rgba(77,214,255,.18)}
.wiz-rail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wiz-body h3{margin:0 0 6px;font:700 18px var(--numbers);letter-spacing:-.02em}
.pick{display:grid;gap:8px;margin-bottom:12px}
.pick-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:15px;cursor:pointer;background:rgba(255,255,255,.04);transition:background .15s}
.pick-row:hover{background:rgba(255,255,255,.07)}
.pick-row:has(input:checked){background:rgba(77,214,255,.1);box-shadow:inset 0 0 0 1.5px rgba(77,214,255,.5)}
.pick-row input{flex:none}
.pick-row > div:last-child{min-width:0}
.pick-row b{display:block;font:650 14px Inter,sans-serif}
.pick-row span{display:block;font-size:12.5px;color:var(--quiet-2)}
.kb-quick .fl{margin-bottom:14px}
.kq-out{display:grid;gap:6px}
.kq-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--green)}
.kq-line.bad{color:var(--yellow)}
.kq-line svg{font-size:15px}
.chan{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);margin-bottom:10px}
.chan-h{display:flex;align-items:center;gap:9px;margin-bottom:10px;font:650 14px Inter,sans-serif}
.chan-h svg{font-size:18px;color:var(--accent)}
.chan-h .pill{margin-left:auto}
.chan.link{display:flex;align-items:center;gap:12px;color:inherit}
.chan.link > svg:first-child{font-size:18px;color:var(--accent)}
.chan.link > div{flex:1;min-width:0}
.chan.link b{display:block;font:650 14px Inter,sans-serif}
.chan.link span{display:block;font-size:12.5px;color:var(--quiet-2)}
.chan.link > svg:last-child{color:var(--quieter)}
.how{margin-top:10px;font-size:13px;color:var(--quiet-2)}
.how summary{cursor:pointer;color:var(--accent);font-weight:600}
.how ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.how a{color:var(--accent)}
.how code{font:600 12.5px ui-monospace,monospace;background:rgba(255,255,255,.08);padding:1px 5px;border-radius:6px;color:var(--text-3)}
.ticks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--quiet-2)}
.ticks li b{color:var(--text-3)}
.ticks li svg{color:var(--green);font-size:16px;margin-top:2px}
.ticks.small li{font-size:13.5px}
.pay-card{position:relative;padding:18px;border-radius:18px;overflow:hidden;margin:6px 0 14px;
  background:radial-gradient(300px 160px at 100% 0%,rgba(77,214,255,.18),transparent 65%),rgba(255,255,255,.05)}
.pay-top b{display:block;font:700 16px var(--numbers)}
.pay-top span{font-size:13px;color:var(--quiet-2)}
.pay-price{font:700 28px var(--numbers);letter-spacing:-.02em;margin:8px 0 2px}
.pay-tab{display:flex;align-items:center;gap:9px;margin:14px -18px -18px;padding:12px 18px;font:700 13.5px Inter,sans-serif;color:#04121c;
  background:linear-gradient(135deg,#8ae6ff,#4dd6ff)}
.pay-tab svg{font-size:17px}

/* ── база знаний ──────────────────────────────────────────────────────────────────────── */
#kb{display:grid;gap:16px;margin-top:24px}
#kb > .grid{margin:0}
.plate.co{cursor:pointer}
.back{display:inline-flex;align-items:center;gap:8px;font:600 13px Inter,sans-serif;color:var(--quiet-2);justify-self:start}
.back svg{transform:rotate(180deg);font-size:15px}
.back:hover{color:var(--text-3)}
.kb-head .block-head .act{margin-left:auto}
.used{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--quiet-2)}
.bh{display:flex;align-items:center;gap:9px;margin:0;font:650 15px Inter,sans-serif}
.bh svg{color:var(--accent);font-size:17px}
.secs{display:grid;gap:6px}
.sec{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.035)}
.sec > div:first-child{min-width:0;flex:1}
.sec b{display:block;font:600 14px Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec span{font-size:12px;color:var(--quieter)}
.seg{display:flex;padding:3px;border-radius:11px;background:rgba(255,255,255,.06);flex:none}
.seg button{border:0;background:none;color:var(--quiet-2);font:600 12px Inter,sans-serif;padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.seg button.on{color:#04121c;background:var(--accent)}
.fold-b{cursor:default}
.fold-b summary{display:flex;align-items:center;gap:9px;cursor:pointer;font:650 15px Inter,sans-serif;list-style:none}
.fold-b summary::-webkit-details-marker{display:none}
.fold-b summary svg{color:var(--accent);font-size:17px}
.fold-b[open] summary{margin-bottom:12px}
#kb-text{min-height:280px;font:500 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.vers{display:grid;gap:6px;max-height:420px;overflow:auto}
.ver{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035)}
.ver > div{min-width:0;flex:1}
.ver b{display:block;font:600 13.5px Inter,sans-serif}
.ver span{display:block;font-size:12px;color:var(--quieter);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── подписки ─────────────────────────────────────────────────────────────────────────── */
#billing{margin-top:24px}
.bill-top{margin-top:0}
.bill-top .plate{gap:10px}
.bill-top .label{font:600 12.5px Inter,sans-serif;color:var(--quieter)}
.bill-top .big{font:700 30px/1.1 var(--numbers);letter-spacing:-.03em}
.bill-top .big small{font:600 13px Inter,sans-serif;color:var(--quieter);margin-left:8px;letter-spacing:0}
.pay-how{display:flex;gap:10px;margin:0;color:var(--quiet-2);font-size:14px}
.pay-how svg{color:var(--green);font-size:18px;margin-top:2px}
.subs{display:grid;gap:8px}
.sub{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);color:inherit}
.sub .t{min-width:0;flex:1}
.sub b{font:650 14.5px Inter,sans-serif}
.sub .t b{display:block}
.sub .t span{display:block;font-size:12.5px;color:var(--quiet-2)}
.sub .sum{white-space:nowrap;font-family:var(--numbers)}
.sub.inv > svg{color:var(--quieter)}
.sub.inv:hover{background:rgba(255,255,255,.07)}

/* ── уведомление ──────────────────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:28px;z-index:80;max-width:min(520px,calc(100vw - 32px));padding:12px 18px;border-radius:14px;
  font:600 13.5px Inter,sans-serif;color:#04121c;background:var(--green);box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s ease,transform .3s cubic-bezier(.22,.7,.2,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--yellow);color:#1c1405}

/* ── телефон ──────────────────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .tabs a{min-width:0}
  .tabs a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .attn-row{flex-wrap:wrap}
  .attn-row .t{flex-basis:calc(100% - 30px)}
  .attn-row .act{margin-left:23px}
  .grid .plate.product{flex-direction:column;align-items:stretch;flex-wrap:nowrap;padding:18px}
  .grid .plate.product .foot{padding-left:0}
  .grid .plate.co{flex-direction:column;align-items:stretch}
  .grid .plate.co .foot{padding-left:0}
  .sheet{left:0;right:0;top:auto;bottom:0;width:100%;max-height:92vh;border-radius:24px 24px 0 0;transform:translateY(100%)}
  .sheet.open{transform:translateY(0)}
  .sheet-grip{display:block;width:40px;height:4px;border-radius:99px;margin:10px auto 0;background:rgba(255,255,255,.18)}
  .sheet-top{padding:10px 14px 6px 18px}
  .sheet-body{padding:6px 18px calc(22px + env(safe-area-inset-bottom))}
  .sheet-acts{position:sticky;bottom:-22px;margin:18px -18px -22px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(11,16,27,0),rgba(11,16,27,.96) 30%)}
  .sheet-acts .act{flex:1}
  .row2{grid-template-columns:1fr}
  .wiz-rail span{font-size:10px}
  .sub{flex-wrap:wrap}
  .sub .t{flex-basis:100%}
  .sec{flex-wrap:wrap}
  .sec .seg{width:100%}
  .sec .seg button{flex:1}
  .toast{bottom:96px}
  .draft .act.main{padding:9px 12px}
}
@media(max-width:420px){.sol{padding:0 16px 16px}.sol-band{margin:0 -16px 6px}.inl{flex-wrap:wrap}.inl .act{flex:1}}
@media(prefers-reduced-motion:reduce){.sol,.attn-row{animation:none;opacity:1;transform:none}.steps-mini .now i{animation:none}}
.sol-band.b-feed{background:radial-gradient(circle at 8px 6px,transparent 3px,#fff 3.2px 4.4px,transparent 4.6px) 0 0/22px 12px,linear-gradient(90deg,var(--a),var(--a2))}
/* 06.10 по снимкам: карточка продукта шире, шаги в одну строку, черновик на телефоне в две строки */
#grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.steps-mini{flex-wrap:nowrap;gap:4px}
.steps-mini span{padding:4px 8px 4px 6px;font-size:11px}
@media(max-width:900px){
  .draft{flex-wrap:wrap}
  .draft .t{flex-basis:calc(100% - 50px)}
  .draft .act.main{flex:1;margin-left:48px}
}
.sol-acts .act.main{flex:1 0 100%}
.sol-acts .act:not(.main){flex:1;padding:9px 12px;font-size:13px}
/* галочки: текст с <b> внутри не должен рваться на колонки — строка обычным потоком, знак слева */
.ticks li{display:block;position:relative;padding-left:26px}
.ticks li svg{position:absolute;left:0;top:3px;margin:0}
.act.file-pick{flex:1;min-width:0;justify-content:flex-start}
.act.file-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* подключения: каналы и системы для заявок одним экраном */
.conns{display:grid;gap:8px;margin-bottom:6px}
.conn{border-radius:16px;background:rgba(255,255,255,.04);overflow:hidden}
.conn.on{background:linear-gradient(100deg,rgba(61,220,151,.07),rgba(255,255,255,.035) 60%)}
.conn > summary,.conn-sum{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;list-style:none}
.conn > summary::-webkit-details-marker{display:none}
.conn > summary > div,.conn-sum > div{min-width:0;flex:1}
.conn b{display:block;font:650 14px Inter,sans-serif}
.conn summary span:not(.pill):not(.ci-s),.conn-sum span:not(.pill):not(.ci-s){display:block;font-size:12.5px;color:var(--quiet-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-s{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:18px;color:var(--accent);background:rgba(77,214,255,.1)}
.ci-s.mark{font:800 12px Inter,sans-serif;color:#04121c;background:var(--mc,#8b93a7)}
.conn-body{padding:2px 14px 14px}
.conn-body .sheet-acts{margin-top:8px}
.conn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;margin-bottom:10px;border-radius:12px;background:rgba(255,255,255,.04);font-size:13.5px}
.conn-row > span{flex:1;min-width:0}
.conn-row .warn{color:var(--yellow);font-style:normal}
.hook{padding:10px 12px;margin-bottom:10px;border-radius:12px;background:rgba(77,214,255,.06)}
.hook > b{display:block;font:650 13px Inter,sans-serif;margin-bottom:8px}
.copy.pad{padding:0 14px 14px}
h3.mt{margin-top:22px}
@media(max-width:900px){.conn-row .act{flex:1}}

.conn-body .sheet-acts{position:static;margin:8px 0 0;padding:0;background:none}
a.chan.link,a.chan.link *{text-decoration:none}

.choice b .lvl{font:600 11px Inter,sans-serif;font-style:normal;margin-left:6px;padding:2px 8px;border-radius:99px;color:var(--accent);background:rgba(77,214,255,.1);white-space:nowrap}

.plate .logo.prod{background:linear-gradient(135deg,var(--c1),var(--c2))}
.more-grid .plate.eco .name span{max-width:none}
@media(min-width:901px){.more-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}

/* база: выборка «продукт × раздел» и данные кабинетов */
.kgrid-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.kgrid{border-collapse:separate;border-spacing:0 6px;min-width:100%;font-size:13px}
.kgrid th{font:600 11.5px Inter,sans-serif;color:var(--quiet-2);text-align:center;padding:0 8px 4px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kgrid th:first-child{text-align:left}
.kgrid td{background:rgba(255,255,255,.035);padding:8px 10px;text-align:center}
.kgrid td:first-child{text-align:left;border-radius:10px 0 0 10px;font-weight:600;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kgrid td:last-child{border-radius:0 10px 10px 0}
.kchk{display:inline-grid;place-items:center;cursor:pointer}
.kchk input{position:absolute;opacity:0;pointer-events:none}
.kchk i{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .15s}
.kchk input:checked + i{background:var(--accent)}
.kchk input:checked + i::after{content:"";width:10px;height:6px;border:2.5px solid #04121c;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.cabkb{border-radius:14px;background:rgba(255,255,255,.035);margin-top:8px}
.cabkb summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.cabkb summary::-webkit-details-marker{display:none}
.cabkb summary b{flex:1;font:650 14px Inter,sans-serif}
.cabkb pre{margin:0;padding:0 12px 12px;white-space:pre-wrap;font:500 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--quiet-2);max-height:320px;overflow:auto}

.ready-box{padding:14px 16px;border-radius:16px;margin:4px 0 14px;background:rgba(251,191,36,.08)}
.ready-box.ok{background:rgba(61,220,151,.08)}
.ready-box b{display:block;font:650 14px Inter,sans-serif;margin-bottom:6px}
.ready-box ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ready-box li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--quiet-2)}
.ready-box li.on{color:var(--text-3)}
.ready-box li svg{color:var(--green);font-size:16px;flex:none;margin-top:2px}
.ready-box .dot-o{width:12px;height:12px;border-radius:50%;border:2px solid var(--yellow);flex:none;margin:4px 2px 0}