/* Оформление группы ВК. Без правил для html/body. */

.mk-tool-vkd {
  max-width: 760px;
}

.mk-tool-vkd__price {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(34, 51, 130, 0.06);
  color: var(--mk-royal, #223382);
  line-height: 1.45;
}

.mk-tool-vkd__form,
.mk-tool-vkd__block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mk-tool-vkd__block {
  padding-top: 0.4rem;
}

.mk-tool-vkd__legend {
  font-family: var(--mk-font-display, Manrope, system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mk-royal, #223382);
  margin: 0;
}

.mk-tool-vkd__hint,
.mk-tool-vkd__note {
  margin: 0;
  color: var(--mk-muted, #5c6480);
  font-family: var(--mk-font-body, Inter, "Segoe UI", system-ui, sans-serif);
  font-size: 0.92rem;
  line-height: 1.45;
}

.mk-tool-vkd__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mk-tool-vkd__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mk-royal, #223382);
}

.mk-tool-vkd__input,
.mk-tool-vkd__select,
.mk-tool-vkd__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--mk-border, rgba(34, 51, 130, 0.16));
  border-radius: 12px;
  background: #fff;
  color: #1c1c24;
  font: inherit;
  font-size: 1rem;
}

.mk-tool-vkd__textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}

.mk-tool-vkd__choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.mk-tool-vkd__choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
}

.mk-tool-vkd__checks {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mk-tool-vkd__check {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  line-height: 1.4;
}

.mk-tool-vkd__rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mk-tool-vkd__row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.45rem;
  align-items: center;
}

.mk-tool-vkd__row--card {
  grid-template-columns: 140px 1fr 1fr auto;
}

.mk-tool-vkd__widget {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid var(--mk-border, rgba(34, 51, 130, 0.16));
  border-radius: 14px;
  background: #fff;
}

.mk-tool-vkd__formats {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-tool-vkd__formats li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(34, 51, 130, 0.08);
  font-size: 0.92rem;
}

.mk-tool-vkd__badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(184, 97, 47, 0.12);
  color: #8a4b24;
  font-size: 0.75rem;
  font-weight: 700;
}

.mk-tool-vkd__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mk-tool-vkd__status.is-error {
  color: #9b2c2c;
}

.mk-tool-vkd__status.is-busy {
  color: var(--mk-royal, #223382);
}

.mk-tool-vkd__previews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

/* Mockup thumbnails reuse the product-card gallery: .mk-tool-pc__gallery-grid,
   .mk-tool-pc__fig, .mk-tool-pc__fig-open and .mk-tool-pc__lightbox from
   tool-product-card.css. Here only the size: small, side by side. */
.mk-tool-vkd__thumbs {
  grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
  align-items: start;
}

.mk-tool-vkd__thumbs .mk-tool-pc__fig {
  max-width: none;
}

@media (max-width: 480px) {
  .mk-tool-vkd__thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .mk-tool-vkd__thumbs .mk-tool-pc__fig {
    padding: 0.5rem;
  }
}

.mk-tool-vkd__failed {
  margin: 0.75rem 0 0;
}

.mk-tool-vkd__failed p {
  margin: 0.45rem 0;
}

.mk-tool-vkd__field[hidden],
.mk-tool-vkd__panel[hidden],
.mk-tool-vkd__sub[hidden],
.mk-tool-vkd__status[hidden] {
  display: none;
}

@media (min-width: 720px) {
  .mk-tool-vkd__previews {
    grid-template-columns: 1fr;
  }

  .mk-tool-vkd__previews:has(.vk-stage) {
    grid-template-columns: 1fr;
  }
}

.mk-tool-vkd:has(.vk-stage) {
  max-width: min(960px, 100%);
}

#kodkonem-vk-design-which[hidden] {
  display: none;
}

.vk-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.vk-stage__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vk-stage__tab {
  min-height: 44px;
  padding: 10px 22px;
  border: 1.5px solid rgba(34, 51, 130, 0.35);
  border-radius: 999px;
  background: #fff;
  color: var(--mk-royal, #223382);
  font-family: var(--mk-font-body, Inter, "Segoe UI", system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
}

.vk-stage__tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--mk-orange, #f98513);
  color: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 68, 0.06), 0 6px 16px rgba(249, 133, 19, 0.2);
}

.vk-stage__frame {
  min-width: 0;
  max-width: 100%;
}

.vk-stage__frame[hidden] {
  display: none;
}

.vk-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: #edeef0;
  border-radius: 12px;
  padding: 0;
  color: #000;
  font-family: "VK Sans Display", "VK Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.vk-sheet {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
}

.vk-page--phone {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.vk-cover {
  position: relative;
  overflow: hidden;
  background: #d7d8db;
}

.vk-cover--desk {
  aspect-ratio: 1920 / 640;
}

.vk-cover--phone {
  aspect-ratio: 1536 / 512;
}

.vk-cover img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

.vk-cover--desk img {
  width: 100%;
  left: 0;
  bottom: 0;
}

.vk-cover--phone img {
  width: calc(100% * 1920 / 1536);
  left: calc(100% * -192 / 1536);
  top: -25%;
}

.vk-head {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: -46px;
  padding: 0 16px;
  min-width: 0;
}

.vk-page--phone .vk-head {
  margin-top: -36px;
}

.vk-avatar {
  box-sizing: border-box;
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border: 4px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  position: relative;
  z-index: 2;
}

.vk-page--phone .vk-avatar {
  width: 72px;
  height: 72px;
}

.vk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vk-who {
  min-width: 0;
  margin-top: 46px;
}

.vk-page--phone .vk-who {
  margin-top: 36px;
}

.vk-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.vk-page--phone .vk-name {
  font-size: 18px;
}

.vk-status {
  margin: 2px 0 0;
  color: #818c99;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vk-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px 16px 0;
}

.vk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 400px) {
  .vk-actions {
    gap: 6px;
    padding: 12px 12px 0;
  }

  .vk-btn {
    padding: 6px 8px;
    font-size: 12px;
  }
}

.vk-btn--primary {
  background: #0077ff;
  color: #fff;
}

.vk-btn--secondary {
  background: rgba(0, 28, 61, 0.05);
  color: #0077ff;
}

.vk-tabs {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  margin: 8px 0 0;
  padding: 0 16px;
  border-bottom: 1px solid #e1e3e6;
}

.vk-tabs span {
  padding: 10px 0 8px;
  color: #818c99;
  font-size: 14px;
  white-space: nowrap;
}

.vk-tabs .is-on {
  color: #000;
  box-shadow: inset 0 -2px 0 #0077ff;
}

.vk-block {
  margin: 0;
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px;
  min-width: 0;
}

.vk-block__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

.vk-tiles {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  min-width: 0;
  padding-bottom: 2px;
}

.vk-tile {
  margin: 0;
  flex: 0 0 auto;
  width: 108px;
}

.vk-tile--tall {
  width: 86px;
}

.vk-tile--menu {
  width: 136px;
}

.vk-tile__pic,
.vk-wide__pic,
.vk-service img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: #d7d8db;
}

.vk-tile--square .vk-tile__pic {
  aspect-ratio: 1 / 1;
}

.vk-tile--tall .vk-tile__pic {
  aspect-ratio: 2 / 3;
}

.vk-tile--menu .vk-tile__pic {
  aspect-ratio: 376 / 256;
}

.vk-tile figcaption,
.vk-wide__item figcaption {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.vk-wide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.vk-wide__item {
  margin: 0;
  min-width: 0;
}

.vk-wide__pic {
  aspect-ratio: 510 / 128;
  border-radius: 8px;
}

.vk-prose {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vk-services {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
}

.vk-page--desk .vk-services {
  flex-wrap: wrap;
}

.vk-service {
  flex: 0 0 148px;
  min-width: 0;
  max-width: 100%;
}

.vk-service img {
  aspect-ratio: 5 / 6;
  border-radius: 8px;
}

.vk-service__title {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.vk-service__descr {
  margin: 2px 0 0;
  color: #818c99;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.vk-info p,
.vk-info a {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.vk-info a {
  color: #0077ff;
  text-decoration: none;
}

.mk-vkd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mk-vkd-steps__n {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff4e8;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #f98513;
}

@media (max-width: 700px) {
  .mk-vkd-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mk-vkd-logo-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mk-royal, #223382);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.mk-tool-vkd__logo-row {
  margin: 0;
}

.mk-vkd-aspects {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0.4rem;
}

.mk-vkd-aspects__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  padding: 12px 10px;
  border: 1px solid rgba(34, 51, 130, 0.16);
  border-radius: 14px;
  background: #fff;
  color: var(--mk-royal, #223382);
  font-size: 0.92rem;
  text-align: center;
}

.mk-vkd-aspects__item:has(input:checked) {
  border-color: #f98513;
  background: #fff8f1;
}

.mk-vkd-aspect {
  display: block;
  background: #fff4e8;
  border: 2px solid #f98513;
  border-radius: 6px;
}

.mk-vkd-aspect--square {
  width: 56px;
  height: 56px;
}

.mk-vkd-aspect--wide {
  width: 84px;
  height: 47px;
}

.mk-vkd-aspect--tall {
  width: 47px;
  height: 84px;
}

#kodkonem-vk-design-approve {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#kodkonem-vk-design-approve[hidden] {
  display: none;
}

/* The live-cover frame: own padding, never glued to the buttons under it. */
#kodkonem-vk-design-approve .mk-tool-vkd__block {
  margin: 0;
  min-width: 0;
  padding: 0.35rem 0.9rem 0.8rem;
  border: 1px solid rgba(34, 51, 130, 0.2);
  border-radius: 12px;
}

#kodkonem-vk-design-approve .mk-tool-vkd__legend {
  padding: 0 0.35rem;
}

#kodkonem-vk-design-approve > .mk-tool-vkd__actions {
  margin-top: 0.25rem;
}

.mk-tool-vkd__step-status {
  margin: 0.85rem 0 0;
  line-height: 1.45;
}

.mk-tool-vkd__step-status[hidden],
.mk-tool-vkd__restart[hidden] {
  display: none;
}

.mk-tool-vkd__restart {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 1rem 0 0;
}

#kodkonem-vk-design-panel .mk-btn:disabled,
#kodkonem-vk-design-panel .mk-vkd-logo-link:disabled {
  opacity: 0.55;
  cursor: progress;
  box-shadow: none;
}

.mk-tool-vkd__picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mk-tool-vkd__picks:empty {
  display: none;
}

.mk-tool-vkd__picks img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  background: #f4f5f8;
}

.mk-tool-vkd__pick {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
}

.mk-tool-vkd__pick img {
  display: block;
}

/* Крестик всегда виден (и на телефоне), как у референсов «Создать картинку». */
.mk-tool-vkd__pick-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #10183e;
  color: #fff;
  font: 700 15px/1 Manrope, system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(16, 24, 62, 0.3);
}

.mk-tool-vkd__pick-remove::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.mk-tool-vkd__pick-remove:hover,
.mk-tool-vkd__pick-remove:focus-visible {
  background: #b8612f;
  outline: none;
}

.mk-tool-vkd__picks {
  padding-top: 6px;
}

.mk-tool-vkd__file-error {
  margin: 0.35rem 0 0;
  color: #9b2c2c;
  font-size: 0.9rem;
}

.mk-tool-vkd__file-error[hidden] {
  display: none;
}

/* Стиль оформления: свёрнутый выбор пресета и выделения фраз. Образцы — чистый CSS, без картинок. */
.mk-tool-vkd__style {
  border: 1px solid rgba(34, 51, 130, 0.14);
  border-radius: 14px;
  padding: 0.55rem 0.85rem;
}

.mk-tool-vkd__style[open] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 0.85rem;
}

.mk-tool-vkd__style-summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  list-style: none;
}

.mk-tool-vkd__style-summary::-webkit-details-marker {
  display: none;
}

.mk-tool-vkd__style-summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--mk-muted, #5c6480);
}

.mk-tool-vkd__style[open] .mk-tool-vkd__style-summary::after {
  content: "▴";
}

.mk-tool-vkd__style-now {
  color: var(--mk-muted, #5c6480);
  font-size: 0.9rem;
}

.mk-tool-vkd__style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.5rem;
}

.mk-tool-vkd__style-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--mk-ink, #1c2340);
}

.mk-tool-vkd__style-opt input,
.mk-tool-vkd__look input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mk-tool-vkd__swatch {
  position: relative;
  display: block;
  aspect-ratio: 5 / 2;
  border-radius: 10px;
  border: 2px solid transparent;
  background:
    radial-gradient(circle at 76% 50%, var(--sw-c) 0 13%, transparent 30%),
    radial-gradient(circle at 76% 50%, var(--sw-d) 0 6%, transparent 7%),
    linear-gradient(120deg, var(--sw-a) 0%, var(--sw-a) 35%, var(--sw-b) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.mk-tool-vkd__swatch::before,
.mk-tool-vkd__swatch::after {
  content: "";
  position: absolute;
  left: 9%;
  height: 9%;
  border-radius: 99px;
  background: var(--sw-d);
}

.mk-tool-vkd__swatch::before {
  top: 30%;
  width: 36%;
  height: 13%;
  background: var(--sw-c);
}

.mk-tool-vkd__swatch::after {
  top: 55%;
  width: 26%;
  opacity: 0.85;
}

.mk-tool-vkd__swatch--auto {
  background: conic-gradient(from 200deg, #7b5cff, #00e5ff, #f1d48a, #ff6b6b, #4ecdc4, #7b5cff);
}

.mk-tool-vkd__swatch--auto::before,
.mk-tool-vkd__swatch--auto::after {
  background: #ffffff;
}

.mk-tool-vkd__style-opt input:checked + .mk-tool-vkd__swatch {
  border-color: var(--mk-royal, #223382);
  box-shadow: 0 0 0 2px rgba(34, 51, 130, 0.18);
}

.mk-tool-vkd__style-opt input:focus-visible + .mk-tool-vkd__swatch,
.mk-tool-vkd__look input:focus-visible + span {
  outline: 2px solid var(--mk-royal, #223382);
  outline-offset: 2px;
}

.mk-tool-vkd__looks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mk-tool-vkd__look {
  position: relative;
  cursor: pointer;
}

.mk-tool-vkd__look span {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 99px;
  border: 1px solid rgba(34, 51, 130, 0.18);
  background: #fff;
  font-size: 0.85rem;
  color: var(--mk-ink, #1c2340);
}

.mk-tool-vkd__look i {
  font-style: normal;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
}

.mk-tool-vkd__look--pill i {
  background: rgba(20, 16, 40, 0.78);
  color: #fff;
  border-radius: 99px;
  box-shadow: inset 3px 0 0 #7b5cff;
}

.mk-tool-vkd__look--accent i {
  background: linear-gradient(transparent 12%, #ffd166 12%, #ffd166 92%, transparent 92%);
}

.mk-tool-vkd__look--gradient i {
  background: linear-gradient(90deg, #4361ee, #b5179e);
  color: #fff;
}

.mk-tool-vkd__look--glow i {
  background: #120d2e;
  color: #fff;
  box-shadow: 0 0 0 1px #b9a2ff, 0 0 10px #7b5cff;
}

.mk-tool-vkd__look--banner i {
  display: inline-block;
  background: #e3121b;
  color: #fff;
  border-radius: 3px 8px 4px 9px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 1px rgba(227, 18, 27, 0.35), 0 2px 8px rgba(41, 212, 255, 0.45);
}

.mk-tool-vkd__look input:checked + span {
  border-color: var(--mk-royal, #223382);
  box-shadow: 0 0 0 2px rgba(34, 51, 130, 0.18);
}

/* Экран результата: ровный ритм секций, карточка макета, список «В пакете». */
.mk-tool-vkd__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
}

.mk-tool-vkd__status:not([hidden]) {
  margin: 20px 0 0;
}

.mk-tool-vkd__panel > :empty,
.mk-tool-vkd__panel > [hidden] {
  display: none;
}

.mk-tool-vkd__panel > .mk-tool-vkd__note,
.mk-tool-vkd__panel > .mk-tool-vkd__failed {
  margin: 0;
}

#kodkonem-vk-design-approve:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#kodkonem-vk-design-approve > * {
  margin: 0;
}

.mk-tool-vkd__mock {
  position: relative;
  width: min(440px, 100%);
  padding: 12px;
  border: 1px solid var(--mk-border, rgba(34, 51, 130, 0.16));
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 24, 62, 0.06);
  box-sizing: border-box;
}

.mk-tool-vkd__mock-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.mk-tool-vkd__mock-open img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.mk-tool-vkd__mock-head--stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mk-tool-vkd__mock-delete {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--mk-border, rgba(34, 51, 130, 0.16));
  border-radius: 10px;
  background: #fff;
  color: var(--mk-muted, #5c6480);
  cursor: pointer;
}

.mk-tool-vkd__mock-delete--corner {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(16, 24, 62, 0.15);
}

.mk-tool-vkd__mock-delete:hover,
.mk-tool-vkd__mock-delete:focus-visible {
  color: #9b2c2c;
  border-color: rgba(155, 44, 44, 0.45);
  outline: none;
}

.mk-tool-vkd__mock-delete:disabled {
  opacity: 0.55;
  cursor: progress;
}

.mk-tool-vkd__plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mk-tool-vkd__plan-title {
  margin: 0 0 8px;
  font-family: var(--mk-font-display, Manrope, system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mk-royal, #223382);
}

.mk-tool-vkd__plan-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-tool-vkd__plan-item {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 12px;
  background: #f4f5f8;
  border: 1px solid var(--mk-border, rgba(34, 51, 130, 0.12));
  box-sizing: border-box;
}

.mk-tool-vkd__plan-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mk-ink, #1c2340);
}

.mk-tool-vkd__plan-sub {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--mk-muted, #5c6480);
  overflow-wrap: anywhere;
}

.mk-tool-vkd__plan .mk-tool-vkd__note {
  margin: 0;
}

/* 1.9.188: корзина в своей строке внутри карточки, оговорка под макетом */
.mk-tool-vkd__mock-bar {
  display: flex;
  justify-content: flex-end;
  margin: -4px -4px 8px 0;
}

.mk-tool-vkd__mock-bar .mk-tool-vkd__mock-delete {
  width: 32px;
  height: 32px;
}

.mk-tool-vkd__mock-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 2px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mk-muted, #6b7390);
}

.mk-tool-vkd__mock-note svg {
  flex: none;
  margin-top: 2px;
  opacity: 0.8;
}

/* Загрузить макет из кабинета */
.mk-tool-vkd__load{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 18px}
.mk-tool-vkd__resume-hint{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;padding:12px 14px;border-radius:12px;background:rgba(124,92,255,.08);border:1px solid rgba(124,92,255,.25)}
.mk-vkd-picker{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,12,20,.6)}
.mk-vkd-picker[hidden]{display:none}
.mk-vkd-picker__box{width:min(720px,100%);max-height:86vh;overflow:auto;background:#fff;color:#14161f;border-radius:16px;padding:18px 18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mk-vkd-picker__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.mk-vkd-picker__title{margin:0;font-size:20px}
.mk-vkd-picker__close{border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:inherit;padding:4px 8px}
.mk-vkd-picker__list{display:grid;align-items:start;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:12px}
.mk-vkd-picker__item{display:flex;flex-direction:column;text-align:left;border:1px solid #e3e5ee;border-radius:12px;background:#fff;padding:0;overflow:hidden;cursor:pointer;color:inherit;font:inherit;transition:border-color .15s,box-shadow .15s}
.mk-vkd-picker__item:hover:not(:disabled){border-color:#7c5cff;box-shadow:0 4px 16px rgba(124,92,255,.2)}
.mk-vkd-picker__item:disabled{cursor:default;opacity:.6}
.mk-vkd-picker__thumb{display:block;height:150px;overflow:hidden;background:#eef0f6}
.mk-vkd-picker .mk-vkd-picker__thumb img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center;display:block}
.mk-vkd-picker__text{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.mk-vkd-picker__name{font-weight:600}
.mk-vkd-picker__date,.mk-vkd-picker__status{font-size:13px;color:#5b6070}
html.mk-vkd-picker-open{overflow:hidden}