/* Блоки кіта Atelier v13.1 — скопійовані ДОСЛІВНО з
   13v12/дизайн/YOLT-v13.1/kit-v13/hub-kit.css.
   Правило скіла: «перед тим як щось малювати — перевір, чи цього немає в кіті».
   Тут лише ті блоки, які реально використані на сторінці:
     k2  · скоркарти (section-01)      k8  · cross-port (section-08)
     k4b · status pills (section-04b)  k11 · форми (section-11)
     k12 · бейджі й тултіпи (section-12)
   Свого :root тут немає — токени приходять із tokens.css (§0.2). */

.card-h{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.card-h h3{ margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-0); letter-spacing: -0.005em; }
.card-h .sub{ font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.card-h .right{ margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kit-frame.center{ align-items: center; }
.k2-strip .lbl{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.k2-strip .big{
  font-family:var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.035em;
  line-height: 1;
}
.k2-strip .big .unit{ font-size: 16px; color: var(--ink-2); margin-left: 5px; font-weight: 400; letter-spacing: 0; }
.k2-strip .under{
  height: 1px;
  margin-top: auto;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 8px);
  opacity: 0.4;
}
.k2-strip .foot{
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
}
.k2-strip .foot .period{
  color: var(--ink-3);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.k2-strip.empty .big{ font-size: 28px; color: var(--ink-3); letter-spacing: 0; }
.k2-compound.kit-deck::before{ background: color-mix(in oklch,var(--on-sage) 22%,transparent); border-color: color-mix(in oklch,var(--on-sage) 22%,transparent); }
.k2-compound.kit-deck::after{ background: color-mix(in oklch,var(--on-sage) 22%,transparent); border-color: color-mix(in oklch,var(--on-sage) 22%,transparent); }
.k2-compound .head{
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
}
.k2-compound .lbl{ color: color-mix(in oklch,var(--on-sage) 92%,transparent); font-weight: 500; }
.k2-compound .q{
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch,var(--on-sage) 22%,transparent);
  color: color-mix(in oklch,var(--on-sage) 72%,transparent);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size: 9px;
  display: grid; place-items: center;
}
.k2-compound .big{
  font-family:var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--on-sage);
  line-height: 1;
}
.k2-compound .big .unit{ font-size: 16px; color: color-mix(in oklch,var(--on-sage) 84%,transparent); margin-left: 5px; font-weight: 400; letter-spacing: 0; }
.k2-compound .foot{
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
}
.k2-compound .foot .k2-delta{ background: color-mix(in oklch,var(--on-sage) 22%,transparent); color: var(--on-sage); }
.k2-compound .foot .period{
  color: color-mix(in oklch,var(--on-sage) 84%,transparent);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.k2-spark .head{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
}
.k2-spark .head .lbl{ color: var(--ink-1); }
.k2-spark .big{
  font-family:var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.03em;
  line-height: 1;
}
.k2-spark .big .unit{ font-size: 15px; color: var(--ink-2); margin-left: 4px; font-weight: 400; letter-spacing: 0; }
.k2-pvf .head{
  display: flex; align-items: baseline; gap: 10px;
}
.k2-pvf .head .lbl{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.k2-pvf .head .period{
  font-size: 12px;
  color: var(--ink-2);
  margin-left: auto;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
}
.k2-pvf .meta{
  display: flex; flex-direction: column;
  gap: 12px;
}
.k2-tophl .accent{
  height: 4px;
  width: 100%;
  background: var(--good);
}
.k2-tophl.lose .accent{ background: var(--bad); }
.k2-tophl .top{
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px 0;
}
.k2-tophl .top .kind{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--good);
  font-weight: 600;
}
.k2-tophl.lose .top .kind{ color: var(--bad); }
.k2-tophl .top .badge{
  margin-left: auto;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
.k2-tophl .left .name{
  font-size: 17px;
  color: var(--ink-0);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.k2-tophl .left .meta{
  display: flex; flex-direction: column; gap: 6px;
}
.k2-tophl .left .meta > span{
  font-family:var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-1);
  display: flex; align-items: baseline; gap: 8px;
}
.k2-tophl .left .meta .mk{
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 50px;
  font-weight: 500;
}
.k2-tophl .right{
  display: flex; flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}
.k2-tophl .right .big{
  font-family:var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.025em;
  line-height: 1;
}
.k2-tophl.lose .right .big{ color: var(--bad); }
.k2-vmm .head{
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.k2-vmm .head .lbl{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.k2-power .cell .lbl{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.k2-power .cell .big{
  font-family:var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-0);
  letter-spacing: -0.025em;
  line-height: 1;
}
.k2-power .cell .big .unit{ font-size: 13px; color: var(--ink-2); margin-left: 4px; font-weight: 400; }
.k2-barlist .head{
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px;
}
.k2-barlist .head h3{
  margin: 0;
  font-size: 14px;
  color: var(--ink-0);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.k2-barlist .head .hint{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: auto;
}
.k2-dim .head{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.k2-dim .head h3{
  margin: 0;
  font-size: 14px;
  color: var(--ink-0);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.k2-dim .head .hint{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.k2-barlist .head .scroll-tag,
.k2-dim .head .scroll-tag{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--info);
  background: var(--info-bg);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-weight: 600;
  margin-left: 8px;
}
.k8-cp .side{
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-low);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.k8-cp .side .accent{
  height: 4px;
  background: var(--sage-0);
}
.k8-cp .side.right .accent{ background: var(--info); }
.k8-cp .side .head{
  padding: 16px 22px 12px;
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.k8-cp .side .kind-tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-0);
  font-weight: 700;
  align-self: flex-start;
}
.k8-cp .side.right .kind-tag{ color: var(--info); }
.k8-cp .side h3{ margin: 0; font-size: 16px; color: var(--ink-0); font-weight: 600; letter-spacing: -0.01em; }
.k8-cp .side .sub{ font-size: 12px; color: var(--ink-2); }
.k8-cp .side .imp{
  font-family:var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
  color: var(--sage-0);
}
.k8-cp .side.right .imp{ color: var(--info); }
.k8-cp .side .imp small{ font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.k8-cp .side .recs{
  flex: 1;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px 22px 16px;
}
.k8-cp-rec{
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 140ms, background 140ms;
}
.k8-cp-rec:hover{ border-color: var(--ink-3); background: var(--paper); }
.k8-cp-rec .rec-head{
  display: flex; align-items: center; gap: 8px;
}
.k8-cp-rec .rec-tag{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.k8-cp-rec .rec-tag.creative{ background: var(--info-bg);  color: var(--info); }
.k8-cp-rec .rec-tag.targeting{ background: var(--sage-bg-2); color: var(--sage-0); }
.k8-cp-rec .rec-tag.tactic{ background: var(--warn-bg);  color: var(--warn); }
.k8-cp-rec .rec-impact{
  margin-left: auto;
  font-family:var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--good);
  letter-spacing: -0.01em;
}
.k8-cp-rec .rec-nm{
  font-size: 13.5px;
  color: var(--ink-0);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.k8-cp-rec .rec-desc{
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.k8-cp-rec .rec-foot{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.k8-cp-rec .rec-conf{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.k8-cp-rec .rec-conf b{ color: var(--ink-1); font-weight: 600; margin-left: 4px; }
.k8-cp-rec .rec-cta{
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 1px dashed var(--sage-0);
  color: var(--sage-0);
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: border-style 140ms, background 140ms;
}
.k8-cp-rec .rec-cta:hover{ border-style: solid; background: var(--sage-bg-2); }
.k8-cp .center{
  display: flex; align-items: center; justify-content: center;
}
.k8-cp .center .lnk{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.k8-cp .center .arrow{
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size: 26px;
  color: var(--ink-2);
  letter-spacing: -0.05em;
}
.k8-cp .center .pair-lbl{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  max-width: 56px;
  line-height: 1.4;
}
.k8-det .x, .k8-modal .x{
  background: transparent; border: 0;
  font-size: 18px; color: var(--ink-3);
  cursor: pointer; padding: 0 4px;
  line-height: 1;
  transition: color 140ms;
}
.k8-det .x:hover, .k8-modal .x:hover{ color: var(--ink-0); }
.k8-det .links, .k8-rec .foot{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.k8-det .lnk, .k8-rec .lnk{
  font-family:var(--font-num);font-variant-numeric:tabular-nums; font-size: 11px;
  color: var(--sage-0); font-weight: 600;
  text-decoration: none; cursor: pointer;
  letter-spacing: 0.04em;
}
.k8-det .lnk:hover, .k8-rec .lnk:hover{ text-decoration: underline; }
.k8-modal .m-imp .lbl{
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.k4b-pill.md{ font-size: 10.5px; padding: 3px 11px; }
.k4b-pill.sm{ font-size: 9.5px; padding: 1px 8px; }
.k4b-pill.dashed{ border-style: dashed; border-color: currentColor; opacity: 0.7; }
.k4b-pill .dot{ width: 5px; height: 5px; border-radius: 50%; }
.k4b-pill.sm .dot{ width: 4px; height: 4px; }
.k11-fld{ display: flex; flex-direction: column; gap: 6px; }
.k11-fld .lbl{
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.k11-fld .help{ font-size: 11px; color: var(--ink-3); }
.k11-fld .help.error{ color: var(--bad); }
.k11-fld .help.success{ color: var(--good); }
.k11-fld .help.focus{ color: var(--info); }
.k11-in{
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-0);
  outline: 0;
  transition: border-color 140ms, background 140ms, box-shadow 140ms;
}
.k11-in.state-hover{ border-color: var(--ink-3); }
.k11-in.state-focus{ border-color: var(--sage-0); box-shadow: 0 0 0 3px var(--sage-bg-2); }
.k11-in.state-disabled{
  background: repeating-linear-gradient(45deg, var(--paper) 0 4px, var(--paper-2) 4px 8px);
  color: var(--ink-3);
  cursor: not-allowed;
}
.k11-in.state-error{ border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.k11-in.state-success{
  border-bottom-style: dashed;
  border-color: var(--good);
  background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in oklch, var(--good) 4%, transparent) 100%);
}
.k11-area{ resize: vertical; min-height: 60px; font-family: var(--font-ui); }
.k12-tt.rich .lnk{ color: var(--sage-0); text-decoration: none; font-weight: 600; }
.k12-tt.rich .lnk:hover{ text-decoration: underline; }
.k2-compound.light.kit-deck::before{ background: var(--paper); border-color: var(--line-soft); }
.k2-compound.light.kit-deck::after{ background: var(--paper); border-color: var(--line-soft); }
.k2-compound.light .lbl{ color: var(--ink-1); }
.k2-compound.light .q{ border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-3); }
.k2-compound.light .big{ color: var(--ink-0); }
.k2-compound.light .big .unit{ color: var(--ink-2); }
.k2-compound.light .foot .period{ color: var(--ink-3); }
.k2-compound.light .foot .k2-delta{ background: var(--paper-2); color: var(--ink-2); }
.k2-compound.light .foot .k2-delta.up{ background: var(--good-bg); color: var(--good); }
.k2-compound.light .foot .k2-delta.dn{ background: var(--bad-bg); color: var(--bad); }
/* ── C · текст на sage-заливці: підняті пороги прозорості ──
   62% і 72% на світлій заливці читались як привид («+18% попередній період»).
   Мінімум для тексту на заливці — 78%; підкладки й лінії лишаються слабкими. */
.k2-compound .bd .col .k,.k2-compound .bd .col .v,
.x-sc.anchor .x-sc-bd .col .k,.x-sc.anchor .x-sc-bd .col .v,
.row10-wrap .hero-card .lbl,.row10-wrap .hero-card .period,.row10-wrap .hero-card .meta,
.k18-funnel .tier .lbl,.k18-funnel .tier .step-conv,.k18-fbars .fb-bar .val,
.m-card.sage .m-lbl,.m-card.sage .m-delta,.m-stack-card.sage .m-lbl,
.st-card.deck .es-mlabel,.st-card.deck .st-s,.st-card.deck .fn-dl,
.term-frame .pm-due .o-lbl,.term-frame .cart-sum .o-lbl,.term-frame .mn-sum .o-lbl{color:color-mix(in oklch,var(--on-sage) 84%,transparent)}
.k2-compound .big .unit,.x-sc.anchor .x-sc-num .unit{color:color-mix(in oklch,var(--on-sage) 88%,transparent)}