body.vkc { overflow: auto; }
.vkc main { max-width: 1000px; margin: 0 auto; padding: 16px; }
/* разделы — карточки: тёплая подложка, шапка с красной меткой; «Сохранить» внутри относится к своему разделу */
.vkc section { margin-top: 18px; border: 1px solid var(--card-line); border-radius: 14px; padding: 0 18px 18px; background: var(--soft);
  box-shadow: 0 1px 2px rgba(31, 27, 23, .05), 0 6px 18px -10px rgba(31, 27, 23, .18); overflow: hidden; }
.vkc h2 { display: flex; align-items: center; gap: 10px; margin: 0 -18px 14px; padding: 12px 18px; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  text-transform: none; color: var(--fg); background: linear-gradient(180deg, var(--panel), var(--soft)); border-bottom: 1px solid var(--card-line); }
.vkc h2::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); flex: none; }
.vkc section input:not([type=checkbox]):not([type=radio]):not([type=file]), .vkc section select, .vkc section textarea { background-color: var(--field); }
.vkc .vkc-tbl { background: var(--panel); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); }
.vkc input.hm { width: 76px; text-align: center; } .vkc input.dmy { width: 140px; }
/* переключатель «обычный / акция» */
.vkc input[type=radio] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 4px 0 0; padding: 0; border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--panel); vertical-align: -3px; display: inline-grid; place-content: center; }
.vkc input[type=radio]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s; }
.vkc input[type=radio]:checked { border-color: var(--accent); } .vkc input[type=radio]:checked::after { transform: scale(1); }
.vkc input[type=radio]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* загрузка фона перетаскиванием */
.vkc-drop { position: relative; flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; min-height: 64px; padding: 12px 16px;
  border: 2px dashed var(--line); border-radius: 12px; background: var(--panel); text-align: center; transition: border-color .15s, background .15s; }
.vkc-drop:hover, .vkc-drop.over { border-color: var(--accent); background: var(--hover); }
.vkc-drop.has { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.vkc-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vkc #preview { width: 100%; aspect-ratio: 1920 / 768; background: #222; border-radius: 6px; display: block; }
.vkc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vkc-row input[type=number] { width: 80px; }
.vkc-err { color: var(--accent); font-weight: 600; }
#err:not([hidden]) { position: sticky; top: 0; z-index: 5; background: var(--bg, #fff); padding: 8px 0; }  /* ошибка видна, где бы ни был экран */
.vkc-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; }
.vkc-bg { border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.vkc-bg.on { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.vkc-bg img { width: 100%; aspect-ratio: 1920 / 768; display: block; border-radius: 4px; }
.vkc-bg p { margin: 6px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vkc-tp { width: 100%; font: inherit; }
.vkc-tbl { border-collapse: collapse; width: 100%; margin: 8px 0; }
.vkc-tbl th, .vkc-tbl td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.vkc-wide { min-width: 260px; }
.vkc-mid { width: 110px; }
.vkc label:has(> input[type=checkbox]), .vkc label:has(> input[type=radio]) { display: inline-flex; align-items: center; gap: 6px; }