/* «Карта SkuScan» (№288): сайт /karta/ (pro/karta.py page_html, web/karta.js) и кабинет /cabinet/karta (web/pro/karta.html, web/pro-karta.js).
   Только общие переменные сайта (web/seo.css) и кабинета (web/pro.css): --card, --line, --line3, --ink, --ink2, --mute, --a2, --r, --sh, --mono.
   Фирменные пятна и свечение за курсором - из каркаса страницы (.s-bg + glow.js на сайте, фон и glow.css в кабинете), здесь не трогаем. */
/* акцент карты: в кабинете - цвет площадки экрана (--a2 из web/pro.css), на сайте - цвет выбранной площадки (тема th-* на body) */
body[data-mod="karta"]{--km:var(--a2)}
.k-karta{--km:#7A1FC2}
.k-karta.th-ozon{--km:#005BFF}
.k-karta.th-market{--km:#B7791F}
.k-karta.th-avito{--km:#00A050}
.km-mp.wb,.km-chips .mp-wb,.km-plat.mp-wb{--c:#CB11AB}
.km-mp.ozon,.km-chips .mp-ozon,.km-plat.mp-ozon{--c:#005BFF}
.km-mp.ym,.km-chips .mp-ym,.km-plat.mp-ym{--c:#F2B705}
.km-mp.avito,.km-chips .mp-avito,.km-plat.mp-avito{--c:#00BA5D}
.km-mp.all,.km-plat.mp-all{--c:#6B1FB3}

/* ---------- общая разметка: темы, блоки, карточки функций ---------- */
.km-wrap,.km-main{min-width:0}
.km-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.km-nav a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;color:var(--ink2);text-decoration:none;font-size:13px;font-weight:500;
  box-shadow:inset 0 0 0 1px var(--line3);transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}
.km-nav a:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.km-nav a:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--km),0 0 0 3px color-mix(in srgb,var(--km) 30%,transparent)}
.km-nav a[hidden]{display:none}

.km-blk,.km-first,.km-tariffs{display:flex;flex-direction:column;gap:16px;min-width:0;scroll-margin-top:96px}
.km-blk[hidden]{display:none}
.km-bh{display:flex;gap:14px;align-items:flex-start}
.km-bn{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;margin-top:1px;border-radius:10px;font:600 14px/1 var(--mono);color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--km) 72%,#fff),var(--km));box-shadow:0 8px 18px -10px var(--km)}
.km-bh h2{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.035em;font-weight:600;color:var(--ink);text-wrap:balance}
.km-blead{margin:6px 0 0;max-width:720px;color:var(--mute);font-size:14.5px;line-height:1.55;text-wrap:pretty}

.km-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.km-it{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 20px 16px;border-radius:var(--r,16px);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--sh);scroll-margin-top:110px;transition:border-color .18s}
.km-it[hidden]{display:none}
.km-it:hover{border-color:color-mix(in srgb,var(--km) 32%,var(--line))}
.km-it:target{animation:kmHit 2.2s ease-out 1}
@keyframes kmHit{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--km) 30%,transparent)}100%{box-shadow:var(--sh)}}
.km-it-h{display:flex;align-items:flex-start;gap:10px 12px;justify-content:space-between}
.km-it h3{flex:1;min-width:0;margin:0;font-size:17px;line-height:1.3;letter-spacing:-.02em;font-weight:600;color:var(--ink);text-wrap:balance}
.km-done{display:inline-block;margin-left:8px;vertical-align:2px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--green,#177245)}
.km-done:before{content:"✓ "}
.km-done[hidden]{display:none}
.km-it.km-ok{border-color:color-mix(in srgb,var(--green,#177245) 35%,var(--line))}
.km-why{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.55;text-wrap:pretty}
.km-gain{display:flex;flex-direction:column;gap:3px;margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--km) 7%,transparent);
  font-size:14px;line-height:1.5;color:var(--ink)}
.km-gain b,.km-where b{font:500 10.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.km-gain b{color:var(--km)}
.km-where{display:flex;flex-direction:column;gap:3px;margin:0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.km-plan{flex:none;display:inline-flex;align-items:center;height:24px;margin-top:-1px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.km-plan.free{background:color-mix(in srgb,var(--green,#177245) 12%,transparent);color:var(--green,#177245)}
.km-plan.pay{background:color-mix(in srgb,var(--km) 11%,transparent);color:var(--km)}
.km-plan.ok{background:color-mix(in srgb,var(--green,#177245) 12%,transparent);color:var(--green,#177245)}
.km-plan.ok:before{content:"✓";margin-right:6px}
.km-plan.up{background:transparent;color:var(--km);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--km) 45%,transparent)}
.km-plan.up:hover{background:color-mix(in srgb,var(--km) 8%,transparent)}
.km-note{margin-top:2px;color:var(--mute);font-size:12.5px;line-height:1.4}
.km-ft{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;margin-top:auto;padding-top:2px}
.km-mps{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font:500 12px var(--mono);color:var(--ink2)}
.km-go{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.km-go span{text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:4px;transition:text-decoration-color .15s}
.km-go i{font-style:normal;color:var(--km);transition:transform .2s}
.km-go:hover span{text-decoration-color:currentColor}
.km-go:hover i{transform:translateX(3px)}
.km-go:focus-visible{outline:2px solid var(--km);outline-offset:3px;border-radius:4px}
.km-mp{display:inline-flex;align-items:center;gap:6px}
.km-mp i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.km-mp.all{color:var(--mute)}
.km-acts{display:flex;flex-wrap:wrap;gap:8px}
.km-acts:empty{display:none}

/* «Как пользоваться» - шаги урока, совет и скриншот урока, если он есть */
.km-how{border-top:1px dashed var(--line3);margin-top:2px;padding-top:2px}
.km-how summary{display:flex;align-items:center;gap:8px;padding:8px 0 2px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--ink);
  -webkit-tap-highlight-color:transparent}
.km-how summary::-webkit-details-marker{display:none}
.km-how summary:after{content:"";width:7px;height:7px;margin-left:2px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .18s;color:var(--mute)}
.km-how[open] summary:after{transform:rotate(-135deg) translateY(-1px)}
.km-how summary:hover{color:var(--km)}
.km-how summary:focus-visible{outline:2px solid var(--km);outline-offset:2px;border-radius:6px}
.km-how-b{display:flex;flex-direction:column;gap:10px;padding:8px 0 4px}
.km-how ol{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:6px}
.km-how li{font-size:14px;line-height:1.55;color:var(--ink2)}
.km-how li::marker{color:var(--km);font:600 12.5px var(--mono)}
.km-tip{margin:0;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--km) 6%,transparent);font-size:13.5px;line-height:1.5;color:var(--ink2)}
.km-tip b{color:var(--ink)}
.km-fig{margin:0;display:flex;flex-direction:column;gap:6px}
.km-fig img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--bg,#F2F1F5)}
.km-fig figcaption{color:var(--mute);font-size:12px;line-height:1.45}

/* «С чего начать» в кабинете: пять шагов на 15 минут */
.km-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.km-step{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px 14px;padding:12px 14px;border-radius:14px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--sh)}
.km-sn{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--km) 12%,transparent);
  color:var(--km);font:600 12px/1 var(--mono)}
.km-ok .km-sn{background:var(--green,#177245);color:#fff;font-size:0}
.km-ok .km-sn:after{content:"✓";font-size:12px}
.km-st{display:flex;flex-direction:column;gap:2px;min-width:0}
.km-st b{font-size:14.5px;font-weight:600;color:var(--ink)}
.km-st span{font-size:13.5px;color:var(--ink2);line-height:1.45}
.km-min{font:500 12px var(--mono);color:var(--mute);white-space:nowrap}
.km-step-a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* прогресс в кабинете */
.km-prog{display:flex;align-items:center;gap:18px}
.km-prog[hidden]{display:none}
.km-prog-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.km-prog-t b{font-size:15px;color:var(--ink)}
.km-prog-t small{color:var(--mute);font-size:12.5px;line-height:1.4}
.km-prog-bar{flex:0 0 38%;height:8px;border-radius:999px;background:color-mix(in srgb,var(--km) 12%,transparent);overflow:hidden}
.km-prog-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--km);transition:width .4s}

/* ---------- кабинет ---------- */
.km-cab{display:flex;flex-direction:column;gap:30px;margin-top:4px}
.km-cab .km-nav{position:sticky;top:var(--head-h,0);z-index:3;margin:-6px 0 -12px;padding:8px 0;background:linear-gradient(var(--bg,#F2F1F5) 70%,transparent)}
.km-plat{display:inline-flex;align-items:center;gap:7px;vertical-align:6px;margin-left:8px;height:24px;padding:0 10px;border-radius:999px;font:600 12px/1 var(--sans);
  letter-spacing:0;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line3)}
.km-plat:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.km-plat[hidden]{display:none}

/* ---------- сайт /karta/ ---------- */
.km-main{max-width:1120px}
.km-main .s-hero{max-width:820px}
.km-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 26px}
.km-facts div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line)}
.km-facts b{font-size:22px;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.km-facts span{font-size:13px;line-height:1.4;color:var(--mute)}
.km-bar{position:sticky;top:64px;z-index:5;display:flex;flex-direction:column;gap:10px;margin:0 0 30px;padding:12px 0;
  background:linear-gradient(var(--bg) 82%,color-mix(in srgb,var(--bg) 0%,transparent));border-bottom:1px solid var(--line)}
.km-chips{display:flex;gap:6px;flex-wrap:wrap}
.km-chips[hidden]{display:none}
.km-chips button{appearance:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:0;border-radius:999px;background:transparent;
  color:var(--ink2);font:600 13.5px var(--sans);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line3);transition:background .15s,color .15s,box-shadow .15s}
.km-chips button:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.km-chips button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.km-chips button:focus-visible{outline:2px solid var(--km);outline-offset:2px}
.km-chips i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.km-main .km-blk,.km-main .km-first,.km-main .km-tariffs{margin:0 0 44px}
.km-main .km-it{background:rgba(255,255,255,.86)}
.km-none{margin:-10px 0 30px;color:var(--mute);font-size:15px}
.km-none[hidden]{display:none}
.km-main .km-v[hidden]{display:none}
.s-btn.sm{height:38px;padding:0 16px;font-size:14px}

/* путь клиента на сайте: пять шагов из уроков №225 */
.km-pcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.km-pc{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;border-radius:16px;background:rgba(255,255,255,.86);border:1px solid var(--line);box-shadow:var(--sh)}
.km-pc-h{display:flex;gap:10px;align-items:flex-start}
.km-pc-h div{display:flex;flex-direction:column;gap:2px;min-width:0}
.km-pc-h b{font-size:15px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.km-pc-h small{font:500 11.5px var(--mono);color:var(--mute)}
.km-pc p{margin:0;flex:1;color:var(--ink2);font-size:13.5px;line-height:1.5}
.km-pc .s-btn{align-self:stretch;max-width:100%;white-space:normal;height:auto;min-height:38px;padding:8px 10px;font-size:13.5px;line-height:1.25;text-align:center;justify-content:center}   /* во всю ширину карточки: длинная подпись переносится внутри, а не вылезает */

/* тарифы на сайте */
.km-tariffs h2{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.035em}
.km-tariffs .km-blead{margin:-6px 0 0}
.km-tps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.km-tp{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px var(--line)}
.km-tp b{font-size:15px;color:var(--ink)}
.km-tp span{font-size:22px;letter-spacing:-.03em;font-weight:600;color:var(--ink)}
.km-tp small{color:var(--mute);font-size:13px;line-height:1.45}
.km-tmore{margin:0}
.km-tmore a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:4px}
.km-tmore a:hover{text-decoration-color:currentColor}
.km-faq{margin:0 0 40px}

@media (max-width:1100px){
  .km-pcs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .km-grid{grid-template-columns:minmax(0,1fr)}
  .km-cab{gap:26px}
  .km-cab .km-nav{position:static;margin:0 -16px;padding:0 16px;background:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .km-cab .km-nav::-webkit-scrollbar{display:none}
  .km-cab .km-nav a{flex:none}
  .km-step{grid-template-columns:auto minmax(0,1fr) auto;padding:12px}
  .km-step-a{grid-column:2/-1;justify-content:flex-start}
  .km-prog{flex-direction:column;align-items:stretch;gap:10px}
  .km-prog-bar{flex:none}
}
@media (max-width:700px){
  .km-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .km-facts b{font-size:19px}
  .km-bar{top:56px;margin:0 -16px 24px;padding:10px 16px}
  .km-bar .km-nav,.km-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .km-bar .km-nav::-webkit-scrollbar,.km-chips::-webkit-scrollbar{display:none}
  .km-chips button,.km-bar .km-nav a{flex:none}
  .km-pcs{grid-template-columns:minmax(0,1fr)}
  .km-tps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .km-it{padding:16px}
  .km-bh h2{font-size:21px}
  .km-plat{vertical-align:4px}
}
@media (prefers-reduced-motion:reduce){.km-it:target{animation:none}.km-prog-bar i{transition:none}.km-go i{transition:none}}
/* карта в кабинете - рамка площадки и цветом: акцент Ozon и Авито (Маркет красит pro-mpnav.css по body[data-plat="ym"]) */
body[data-mod="karta"][data-plat="ozon"]{--a1:#3D8BFF;--a2b:#005BFF;--a3:#0033A0}
body[data-mod="karta"][data-plat="avito"]{--a1:#00B85C;--a2b:#007D3F;--a3:#00592C}