/* QuoteCall components, built from measured computed styles of the reference design (26 Oct 2026).
 * Needs tokens.css. Prefix `vk-`. Every number below was read off the live app, at 1280x693 viewport, 14px root.
 * Font: Open Sans 400/600/700 (Google Fonts is fine; the reference self-hosts woff2).
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/* MOTION TOKENS: "slide, don't switch" (10-motion-slide-dont-switch.md). Every state change that the user can see
 * moves; use these instead of ad-hoc durations. All measured on the reference except --vk-motion-rail-shut (observed). */
:root {
  --vk-motion-fold: .5s ease;                            /* content folding in/out of a card (.vk-fold) */
  --vk-motion-swap: .35s ease-in-out;                    /* one view sliding out while another slides in */
  --vk-motion-drawer: .25s ease;                         /* phone drawer / sheet sliding in */
  --vk-motion-scrim: .2s linear;                         /* scrim fading to .5 */
  --vk-motion-popover: .25s ease-in-out;                 /* popovers, menus, flyouts fading */
  --vk-motion-morph: .25s cubic-bezier(0, .06, 0, 1);    /* an icon changing meaning (dots → X) */
  --vk-motion-rail: .3s cubic-bezier(.2, .7, .2, 1);     /* rail / pills growing open */
  --vk-motion-rail-shut: .4s cubic-bezier(.4, 0, .2, 1); /* rail sliding back after choosing an item */
  --vk-motion-rail-leave: .25s ease-in-out;              /* rail sliding back when the pointer leaves it */
  --vk-motion-grow: .2s ease-out;                        /* tile/folder growing into a card */
  --vk-motion-hover: .2s ease-out;                       /* hover / selected colour changes */
  --vk-motion-flyout: .2s ease;                          /* org/user flyout sliding out from behind the rail */
  --vk-motion-panel: .25s ease-in-out;                   /* side panel column opening beside a table (Filters) */
  --vk-motion-sheet: .3s ease-in-out;                    /* phone bottom sheet (Filters) sliding up / down */
  --vk-motion-search: .3s ease;                          /* launcher search mode: brand slides away, pill grows into it */
}
/* Exported icons carry only a viewBox: ALWAYS size them. Default 20px (buttons/inputs); 24px in rail/headers; 16px in tables. */
svg:not([width]) { width: 20px; height: 20px; flex: none; }
.vk-icon-24 { width: 24px; height: 24px; } .vk-icon-16 { width: 16px; height: 16px; }
body {
  font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--color-text);                 /* #2c3e4c body text. Headings/emphasis use --color-text-emphasis #030e16 */
  background: var(--color-background-back); /* #f7f9fb page canvas */
}

/* ---------- App shell ---------- */
/* App shell (MEASURED on the reference): the WINDOW never scrolls (html overflow hidden, body clip, app = exactly the viewport);
 * each page scrolls inside .vk-main. So moving between a long and a short page can't add/remove the window scrollbar and
 * shift the whole layout sideways, and the rail/top bar never move. scrollbar-gutter keeps content still inside .vk-main too. */
html:has(.vk-app) { overflow: hidden; height: 100%; }
body:has(.vk-app) { overflow: clip; height: 100%; }
.vk-app { display: grid; grid-template-columns: 60px 1fr; height: 100vh; height: 100dvh; }

/* Rail: 60px wide, white, soft shadow. Items are 40x40 pills at x=10.
 * BEHAVIOUR (measured, data/36-37; driven by tokens/vk.js, NOT by :hover):
 *   rest  -> icons only.
 *   peek  -> ~180ms after the pointer lands on an item, THAT item grows to icon+label (40 -> ~96px) as a grey pill
 *            overhanging the content (class .is-peek on the item).
 *   open  -> after ~1000ms more dwell (≈1.19s total) the whole rail opens: rail 250px, every item 230px,
 *            width animates ≈300ms ease-out (class .is-open on the rail). It overlays content; no layout shift.
 *   close -> ~180ms after the pointer leaves the rail it SNAPS back (no reverse animation; labels opacity 0 at once). */
.vk-rail {
  position: fixed; inset: 0 auto 0 0; width: 60px; z-index: 5;
  padding: 12px 15px 12px 10px; background: var(--color-background-front); box-shadow: 0 0 24px rgba(3,14,22,.1);
  display: flex; flex-direction: column; gap: 0; overflow: visible;
}
.vk-rail.is-open { width: 250px; transition: width var(--vk-motion-rail); }
/* Choosing an item in the open rail: it slides back to 60px over ~.4s (observed on the reference) instead of snapping;
 * the labels are clipped by the shrinking pills and fade out. */
.vk-rail.is-closing, .vk-rail.is-closing .vk-rail__item { transition: width var(--vk-motion-rail-shut); }
.vk-rail.is-closing .vk-rail__label { transition: opacity .25s ease-out; }
/* Pointer leaves the open rail: after the 180ms wait it SLIDES back too (the reference puts min-width .25s ease-in-out on every
 * item at that moment; labels opacity .15s ease). A synthetic pointer sees it snap; a real mouse sees the slide. */
.vk-rail.is-leaving, .vk-rail.is-leaving .vk-rail__item { transition: width var(--vk-motion-rail-leave); }
.vk-rail.is-leaving .vk-rail__label { transition: opacity .15s ease; }
.vk-rail__group { display: flex; flex-direction: column; gap: 10px; }
.vk-rail__spacer { flex: 1; }
.vk-rail__item {
  position: relative; display: flex; align-items: center; gap: 14px; height: 40px; width: 40px; overflow: hidden;
  border-radius: 20px; color: var(--color-text); text-decoration: none; font: 400 14px/20px "Open Sans", sans-serif;
  padding: 0; cursor: pointer; background: transparent; border: 0; white-space: nowrap; flex: none;
}
.vk-rail__item svg { flex: 0 0 24px; width: 24px; height: 24px; margin-left: 8px; }
.vk-rail__item:hover, .vk-rail__item.is-peek { background: var(--color-background-front-hover); }   /* #eaeff3 (dark #313640) */
.vk-rail__item.is-peek { width: max-content; padding-right: 20px; z-index: 2; box-shadow: 0 8px 24px rgba(3,14,22,.15); }   /* measured on the reference: the peeking pill floats, 0 8px 24px at 15% ink */
html[data-color-scheme="dark"] .vk-rail__item.is-peek { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
/* The All products button is the exception: its peek (rail collapsed) is a WHITE pill on the tight small shadow (0 2px 1px 12% + 0 1px 3px 20%,
 * measured on the reference, the same as --color-shadow-small). In the open rail it is grey like its neighbours, with no shadow. */
.vk-rail:not(.is-open) .vk-rail__item.vk-launcher-btn:not([aria-expanded="true"]):is(:hover, .is-peek) { background: var(--color-background-front); }
.vk-rail:not(.is-open) .vk-rail__item.vk-launcher-btn.is-peek:not([aria-expanded="true"]) { box-shadow: var(--color-shadow-small); }
html[data-color-scheme="dark"] .vk-rail:not(.is-open) .vk-rail__item.vk-launcher-btn.is-peek:not([aria-expanded="true"]) { box-shadow: 0 2px 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.5); }
.vk-rail.is-open .vk-rail__item { width: 230px; padding-right: 0; box-shadow: none; transition: width var(--vk-motion-rail); }
.vk-rail__item[aria-current="page"] { background: var(--brand-600); color: #fff; } /* #0285c8 in both themes */
/* Hover is a grey pill, selected is blue, and neither ever shows link blue or an underline. The bridge's prose-link rule
 * (`a:hover` -> blue; Bootstrap -> underline) is for text links; shell anchors keep their own ink on hover, focus and press. */
a.vk-rail__item:is(:hover, :focus, :active), a.vk-drawer__item:is(:hover, :focus, :active) { color: var(--color-text); text-decoration: none; }
a.vk-rail__item[aria-current="page"]:is(:hover, :focus, :active), a.vk-drawer__item[aria-current="page"]:is(:hover, :focus, :active) { color: #fff; }
a.vk-product:is(:hover, :focus, :active) { color: var(--color-text-emphasis); text-decoration: none; }
a.vk-product--circle:is(:hover, :focus, :active) { color: var(--color-text); }
.vk-rail__label { opacity: 0; }
.vk-rail__item.is-peek .vk-rail__label, .vk-rail.is-open .vk-rail__label { opacity: 1; }
.vk-rail__badge { position: absolute; left: 26px; top: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red-500); color: #fff; font: 600 10px/16px "Open Sans", sans-serif; text-align: center; }
.vk-rail__avatar { flex: 0 0 36px; width: 36px; height: 36px; margin-left: 2px; border-radius: 50%;
  background: var(--neutral-800); color: #fff; font-size: 13px; font-weight: 600; line-height: 36px; text-align: center; }

.vk-main { grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior-y: contain; /* y only: contain on x kills the Mac two-finger swipe back/forward */ }

/* Page header strip: 64px tall, 12px vertical padding, title 20/28 bold */
.vk-page { padding: 0 24px 24px; }
.vk-page__header { display: flex; align-items: center; gap: 16px; padding: 18px 0; min-height: 64px; }  /* 64px strip: 18 + 28 title + 18 */
.vk-h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--color-text-emphasis); }
.vk-h1--app { font-size: 18px; line-height: 24px; }              /* sidebar product titles ("Cameras", "Admin") */
.vk-h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--color-text); }
.vk-h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-text); }
.vk-subtitle { font-size: 12px; line-height: 16px; color: var(--color-text-emphasis); }
.vk-caption  { font-size: 12px; line-height: 16px; color: var(--color-text-secondary); }
.vk-overline { font-size: 10px; line-height: 12px; text-transform: uppercase; color: var(--color-text-secondary); }
.vk-toolbar { display: flex; align-items: center; gap: 12px; }
.vk-toolbar__spacer { flex: 1; }

/* ---------- Buttons: ALL pills (radius 99999px), 40px tall, 14/20 semibold, gap 8 ---------- */
.vk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px;
  padding: 10px 15px; border: 1px solid transparent; border-radius: var(--rounding-full);
  font: 600 14px/20px "Open Sans", sans-serif; cursor: pointer; text-decoration: none; transition: all .15s; white-space: nowrap; flex: none;
  color: var(--button-tertiary-color-text);                       /* #232426 */
}
.vk-btn svg { width: 20px; height: 20px; flex: none; }
.vk-btn--primary { background: var(--button-primary-color-background); color: #fff; }             /* #0285c8 */
.vk-btn--primary:hover { background: var(--button-primary-hover-color-background); }              /* #015e8e */
.vk-btn--primary:active { background: var(--button-primary-active-color-background); }            /* #01496e */
.vk-btn--outline { padding: 9px 14px; border-color: var(--button-secondary-color-border); background: transparent; } /* #838e98 */
.vk-btn--outline:hover { background: var(--color-background-front-hover); }                       /* #eaeff3 */
.vk-btn--tertiary { background: var(--neutral-10); border-color: var(--neutral-10); padding: 5px 14px; height: 32px; } /* "Resend Verification", icon-edit circles */
.vk-btn--ghost { background: transparent; }
.vk-btn--ghost:hover { background: var(--color-background-front-hover); }
.vk-btn--danger { background: var(--button-alert-color-background); color: #fff; }                /* #cb2939, hover #8d162a */
.vk-btn--icon { width: 40px; padding: 9px; }                       /* 40x40 circle, 20px icon */
.vk-btn--icon.vk-btn--sm { width: 32px; height: 32px; padding: 5px; }
.vk-btn--floating { background: var(--color-background-front); box-shadow: var(--color-shadow-small); color: var(--color-text-emphasis); } /* the "->" circle on detail panel */
.vk-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vk-btn:disabled { background: var(--button-primary-disabled-color-background); color: var(--button-primary-disabled-color-text); cursor: not-allowed; }   /* text #fff light, #757678 dark: a disabled button reads as disabled in both */

.vk-link { color: var(--link-primary-color-text); background: none; border: 0; padding: 0; font: 400 14px/20px "Open Sans", sans-serif; cursor: pointer; text-decoration: none; }
.vk-link--semibold { font-weight: 600; }

/* ---------- Search pill + toolbar group ---------- */
/* Pill container: 40px tall, #eaeff3 bg (neutral-25), radius 20px, gap 4px. Contains: 38px icon, input (16px text), buttons. */
.vk-searchgroup { display: flex; align-items: center; gap: 4px; height: 40px; min-width: 0; flex: 0 1 auto; background: var(--neutral-25); border-radius: 20px; padding: 0 4px 0 0; }
.vk-search { display: inline-grid; grid-template-columns: 38px minmax(60px,1fr) 38px; min-width: 0; align-items: center; height: 38px; margin: 1px; border-radius: 99999px; border: 1px solid transparent; }
.vk-search svg { width: 20px; height: 20px; justify-self: center; }
.vk-search input { border: 0; outline: 0; background: transparent; font: 400 16px/24px "Open Sans", sans-serif; color: var(--field-color-text); padding: 7px 12px 7px 0; min-width: 0; }
.vk-search input::placeholder { color: var(--field-placeholder-color-text); }
.vk-search:focus-within { border-color: var(--color-focus); background: var(--color-background-front); }   /* popover search: 1px solid #bfc5cd, focus -> #0285c8 */
.vk-searchgroup .vk-btn { background: transparent; }
.vk-badge-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 2px 4px; border-radius: 100%; background: var(--cyan-600); color: #fff; font-size: 12px; line-height: 16px; text-align: center; }

/* Segmented control (view toggle): track #eaeff3 pill, active thumb white 38px circle w/ shadow */
.vk-segmented { display: inline-flex; padding: 1px; gap: 0; background: var(--neutral-25); border-radius: 40px; height: 40px; }
.vk-segmented label { display: grid; place-items: center; width: 38px; height: 38px; padding: 0 5px; border-radius: 40px; border: 1px solid transparent; cursor: pointer; color: var(--neutral-600); }
.vk-segmented input { display: none; }
.vk-segmented label:has(input:checked) { background: var(--color-background-front); color: var(--color-text-emphasis); box-shadow: 0 1px 5px rgba(0,0,0,.06); }

/* ---------- Tabs: underline tabs, 42px tall, 2px bottom border ---------- */
.vk-tabs { display: flex; gap: 16px; }
.vk-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; height: 42px; border-bottom: 2px solid transparent; border-radius: 3px;
  font-weight: 600; color: var(--color-text-secondary); text-decoration: none; }  /* #536573 */
.vk-tab:hover { background: var(--neutral-25); }
.vk-tab[aria-selected="true"] { color: var(--color-text-emphasis); border-bottom-color: var(--color-text-emphasis); border-radius: 3px 3px 0 0; }
.vk-tab__count { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-text-secondary); padding-left: 4px; }

/* ---------- Table (cards, not borders): white, radius 12, header #eff3f7 ---------- */
.vk-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-background-front); border-radius: 12px; overflow: hidden; }
.vk-table th { background: var(--color-background-table-header); text-align: left; height: 37px; padding: 0 24px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-text); }
.vk-table th:hover { background: var(--color-background-table-header-hover); }
.vk-table .vk-col-check { width: 31px; padding: 0 12px; }
.vk-table .vk-col-avatar { width: 64px; padding: 14px 12px 14px 12px; }
.vk-table td, .vk-table tbody th { padding: 14px 24px; border-bottom: 1px solid var(--color-divider); height: 69px; font-weight: 400; vertical-align: middle; }
.vk-table tbody th { font-size: 14px; font-weight: 600; text-align: left; background: transparent; }
.vk-table tbody tr:last-child td, .vk-table tbody tr:last-child th { border-bottom: 0; }
.vk-table tbody tr:hover { background: var(--color-background-front-hover); }
.vk-table tbody tr[aria-selected="true"] { background: var(--color-background-front-selected); }  /* #dcf1fc */
/* The row IS its main action (MEASURED on Users): hover #eaeff3 + pointer anywhere on the row; the name link underlines only
 * when it is hovered itself; keyboard focus outlines the whole row (2px focus colour, inset 2px). vk.js: a click anywhere on
 * the row follows its main link (th[scope=row] a, or [data-vk-row-main]); in .vk-col-actions it opens that row's ⋯ menu;
 * in .vk-col-check it ticks the checkbox. Controls inside the row (links, buttons, inputs) keep their own action. */
.vk-table tbody tr:has(th[scope=row] a[href], [data-vk-row-main]) { cursor: pointer; }
.vk-table tbody th[scope=row] a { color: inherit; text-decoration: none; }
.vk-table tbody th[scope=row] a:hover { text-decoration: underline; }
.vk-table tbody th[scope=row] a:focus-visible { outline: none; }
.vk-table tbody tr:has(th[scope=row] a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.vk-table .vk-col-actions { width: 56px; }

/* chips: 32px pill, #eaeff3 bg, 1px #dce0e4 border, 14px text, padding 0 12 0 10 */
.vk-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 10px; border-radius: 99999px; background: var(--neutral-25); border: 1px solid var(--neutral-75); }
.vk-chip-more { color: var(--brand-600); font-weight: 600; background: none; border: 0; padding: 0 4px; cursor: pointer; border-radius: 4px; }
.vk-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--neutral-75); font-size: 16px; font-weight: 600; color: var(--color-text-emphasis); }
.vk-checkbox { width: 16px; height: 16px; border: 1px solid var(--checkbox-color-border); border-radius: 4px; appearance: none; background: transparent; cursor: pointer; }
.vk-checkbox:checked { background: var(--checkbox-color-background-checked) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color: transparent; }
.vk-status-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--yellow-500); display: inline-block; } /* offline = #fb9717 */

/* ---------- Cards / list rows ---------- */
.vk-card { background: var(--color-background-front); border-radius: 8px; }
.vk-card__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-radius: 8px; }
.vk-card__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-text); }
.vk-card__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 16px 24px; border-top: 1px solid var(--color-divider); min-height: 73px; }
.vk-card__label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.vk-card__value { font-size: 16px; line-height: 24px; color: var(--color-text-emphasis); padding: 7px 12px; }

/* List row with thumbnail (Devices): 70px row, selected #dcf1fc, thumbnail 126x60 white r6 border #e6eaee */
.vk-list { background: var(--color-background-front); border-radius: 8px; padding: 0; margin: 0; list-style: none; }
.vk-list__group { display: flex; align-items: center; gap: 8px; padding: 8px 12px; height: 48px; font-size: 16px; font-weight: 600; color: var(--color-text); border-radius: 6px 6px 0 0; }
.vk-list__row { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 70px; border-top: 1px solid var(--color-divider); }
.vk-list__row:hover { background: var(--color-background-front-hover); }
.vk-list__row[aria-selected="true"] { background: var(--color-background-front-selected); }
.vk-thumb { width: 126px; height: 60px; border-radius: 6px; background: var(--color-background-front); border: 1px solid var(--color-divider); display: grid; place-items: center; }
.vk-row__title { font-weight: 600; color: var(--color-text-emphasis); }
.vk-row__meta { font-size: 14px; color: var(--color-text); display: flex; gap: 5px; align-items: center; }

/* Settings sidebar nav: 224px pills, 44px tall, 12/24 padding, selected #dcf1fc (brand-50) */
.vk-sidenav { width: 240px; padding: 8px; }
.vk-sidenav a { display: block; height: 44px; padding: 12px 24px; border-radius: 50px; color: var(--color-text-emphasis); text-decoration: none; font-weight: 600; }
.vk-sidenav a:hover { background: var(--color-background-front-hover); }
.vk-sidenav a[aria-current="page"] { background: var(--brand-50); }

/* Tile (camera): 233x175, radius ~4 (img), label chip overlay with backdrop #030e16 @ .7 */
.vk-tile { position: relative; width: 233px; height: 175px; border-radius: 4px; overflow: hidden; background: var(--neutral-700); color: #fff; }
.vk-tile__label { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 8px; background: var(--badge-overlay-color-background); }

/* Floating action ("Map") */
.vk-fab { position: fixed; right: 24px; bottom: 32px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 99999px; background: var(--color-background-front); box-shadow: var(--color-shadow-large); font-weight: 600; font-size: 16px; }
.vk-fab__icon { width: 40px; height: 40px; border-radius: 100%; background: #181a1e; color: #cdd1d7; display: grid; place-items: center; }

/* ---------- Overlays ---------- */
/* Modal: native <dialog> (full-viewport, overflow hidden) containing a centred <section>. ALL MEASURED (data/15-modal-panel.json):
 * panel 600 wide, radius 20, padding 0 20, shadow = --color-shadow-small, max-height 72%, centred with translate(-50%,-50%),
 * opens with a 0.15s linear animation. Header 64 (12px v-pad), 1px divider full-bleed, body padding 20, footer 72 (16px v-pad). */
.vk-modal { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; padding: 0; border: 0; background: transparent; overflow: hidden; }
.vk-modal::backdrop { background: color(srgb .247 .318 .373 / .7); }                    /* = --color-background-overlay rgba(63,81,95,.7) */
.vk-modal__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column;
  width: 600px; max-width: calc(100% - 32px); max-height: 72%; padding: 0 20px; background: var(--color-background-front); border-radius: 20px;
  box-shadow: var(--color-shadow-small); color: var(--color-text); }
.vk-modal__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 12px 0; height: 64px; flex: none; }
.vk-modal__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--color-text); }
.vk-modal__rule { height: 1px; margin: 0 -20px; background: var(--color-divider); flex: none; }
.vk-modal__body { margin: 0 -20px; padding: 20px; overflow: auto; font-size: 16px; line-height: 24px; color: var(--color-text-emphasis); }
.vk-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 0; height: 72px; flex: none; border-top: 1px solid var(--color-divider); margin: 0 -20px; padding-inline: 20px; }

/* Popover / menu: white, radius 0 12 12 12 (corner touching rail is square), padding 15, z 8, fade .25s */
.vk-popover { position: absolute; background: var(--color-background-front); border-radius: 0 12px 12px 12px; padding: 15px 0; box-shadow: var(--color-shadow-large); z-index: var(--z-index-popover); }
/* Dropdown menu (MEASURED data/17): container radius 12, shadow-small; ul padding 8px 0; li 44 tall padding 0 8 (2px transparent border = focus slot);
 * item = 40 tall button, radius 8, padding 4 16 4 12 (10 left when selected), gap 12, 14/400 #2c3e4c (regular weight, not 600), selected bg #dcf1fc + trailing 20px check. */
.vk-menu { position: relative; background: var(--color-background-front); border-radius: 12px; box-shadow: var(--color-shadow-small); min-width: 263px; z-index: var(--z-index-popover); }
.vk-menu ul { margin: 0; padding: 8px 0; list-style: none; }
.vk-menu li { height: 44px; padding: 0 8px; border: 2px solid transparent; }
.vk-menu__item { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 4px 16px 4px 12px; border: 0; border-radius: 8px; background: transparent; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text); text-align: left; cursor: pointer; }
.vk-menu__item:hover { background: var(--menu-color-background-hover); }
.vk-menu__item[aria-selected="true"] { background: var(--menu-color-background-selected); padding-left: 10px; }
.vk-menu__item svg { width: 20px; height: 20px; }

/* Filter side panel (MEASURED data/16): 360 wide card, padding 12 16 24, sits BESIDE the table (table shrinks, cells ellipsis); header 40 tall:
 * h2 16/700, "2 Active" link 14/600 #0285c8, "Clear" link, 40px close. Search = 328x43 pill radius 48 bg #f7f9fb padding 0 12 0 16.
 * Sections = 44px rows (button, radius 6, padding 12, h3 14/600 + count badge 20px radius 6 #0285c8 white 12/600 + 16px chevron).
 * Options = 40px rows, radius 6 (8 unselected), padding 4 16 4 12, gap 12, 4px between; selected bg #dcf1fc; checkbox 16px. */
.vk-filter { width: 360px; background: var(--color-background-front); border-radius: 8px; }
.vk-filter__body { padding: 12px 16px 24px; }                       /* padding inside, so the card can fold to 0 wide */
/* Table + side panel (MEASURED on Users > Filters): The reference animates the GRID, not the panel. Opening: the panel column grows
 * 0 -> 360 and the gap 0 -> 16 over .25s ease-in-out while the table narrows; the panel is opaque at once and reflows with its
 * column. Closing: the panel goes at once and the empty column folds away over the same .25s. Toggle via [data-vk-toggle]. */
.vk-withpanel { display: grid; grid-template-columns: minmax(0,1fr) 0px; column-gap: 0; align-items: start; transition: grid-template-columns var(--vk-motion-panel), column-gap var(--vk-motion-panel); }
.vk-withpanel.is-open { grid-template-columns: minmax(0,1fr) 360px; column-gap: 16px; }
.vk-withpanel > .vk-filter { width: auto; min-width: 0; overflow: hidden auto; }
.vk-filter__head { display: flex; align-items: center; gap: 16px; height: 40px; padding: 12px 0 12px 4px; }
.vk-filter__search { display: flex; align-items: center; gap: 8px; height: 43px; padding: 0 12px 0 16px; margin: 12px 0; background: var(--color-background-back); border-radius: 48px; }
.vk-filter__search input { flex: 1; border: 0; outline: 0; background: transparent; padding: 12px; font: 400 14px/20px "Open Sans", sans-serif; }
.vk-filter__section { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 44px; padding: 12px; border: 0; border-radius: 6px; background: var(--color-background-front); font: 600 14px/20px "Open Sans", sans-serif; color: var(--color-text); cursor: pointer; }
.vk-filter__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--brand-600); color: #fff; font-size: 12px; line-height: 20px; font-weight: 600; text-align: center; }
.vk-filter__option { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 4px 16px 4px 12px; border: 0; border-radius: 8px; background: transparent; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text); cursor: pointer; }
.vk-filter__option[aria-selected="true"] { background: var(--brand-50); border-radius: 6px; }

/* Text input with notched floating label (MEASURED data/14): 40 tall, 1px #bfc5cd, radius 8, padding 7 12, 16/24 #030e16.
 * Label = 12/16 #536573 at left 12, sits ON the top border (top -8) over a white patch. Focus border #0285c8. Error #b01d2b. */
.vk-field { position: relative; display: block; }
.vk-field input { width: 100%; height: 40px; padding: 7px 12px; border: 1px solid var(--field-color-border); border-radius: 8px; background: transparent; font: 400 16px/24px "Open Sans", sans-serif; color: var(--field-color-text); outline: 0; }
.vk-field input:hover { border-color: var(--neutral-600); }
.vk-field input:focus { border-color: var(--field-color-border-focus); }
.vk-field__label { position: absolute; left: 12px; top: -8px; padding: 0 4px; margin-left: -4px; background: var(--color-background-front); font-size: 12px; line-height: 16px; color: var(--field-label-color-text); pointer-events: none; }
.vk-field--error input { border-color: var(--field-color-border-error); }
/* Org tile (General settings): 80x80, radius 12, bg #2c3e4c, white 24/700 initials. Meta line: 12/16 label + 12/700 value. */
.vk-orgtile { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 12px; background: var(--neutral-800); color: #fff; font-size: 24px; font-weight: 700; }

/* Product launcher tile (All Products popover): 100x100, 60px icon, 14px label; secondary = 60px circle outline 1px #b0b6be */
.vk-product { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100px; min-height: 100px; padding-bottom: 8px; border-radius: 8px; color: var(--color-text-emphasis); font: 400 14px/20px "Open Sans", sans-serif; text-align: center; text-decoration: none; position: relative; }
.vk-product:hover { background: var(--color-background-hover); }
.vk-product--circle { justify-content: flex-start; padding: 8px 0 0; color: var(--color-text); }   /* = centred for a 1-line label; keeps circles in line when a label wraps */
.vk-product--circle:hover { background: transparent; }
.vk-product--circle .vk-product__icon { width: 60px; height: 60px; border: 1px solid light-dark(var(--neutral-200), var(--neutral-600)); border-radius: 50%; display: grid; place-items: center; }
.vk-product--circle:hover .vk-product__icon { border-color: var(--color-text); }
.vk-product--circle .vk-product__icon svg { width: 24px; height: 24px; }
.vk-product--circle > span:last-child { color: var(--color-text-emphasis); }
/* NEW / BETA tag: #0285c8, 10/12 600 white, radius 3, padding 0 3.5; top 12, left = tile centre (+8 on a circle tool) */
.vk-new { position: absolute; top: 12px; left: 50%; display: flex; align-items: center; padding: 0 3.5px; height: 14px; font-size: 10px; line-height: 12px; font-weight: 600; color: #fff; background: var(--brand-600); border-radius: 3px; }
.vk-product--circle .vk-new { left: calc(50% + 8px); }

/* Status badges */
.vk-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99999px; font-size: 12px; font-weight: 600; background: var(--badge-grey-secondary-color-background); color: var(--badge-grey-secondary-color-text); }
.vk-badge--ok   { background: var(--badge-green-secondary-color-background);  color: var(--badge-green-secondary-color-text); }
.vk-badge--info { background: var(--badge-blue-secondary-color-background);   color: var(--badge-blue-secondary-color-text); }
.vk-badge--warn { background: var(--badge-yellow-secondary-color-background); color: var(--badge-yellow-secondary-color-text); }
.vk-badge--err  { background: var(--badge-red-secondary-color-background);    color: var(--badge-red-secondary-color-text); }

/* ---------- Form modal ("Create New User"; MEASURED data/18, screenshot 15) ----------
 * Panel 600 x up-to-660, radius 20, bg #f7f9fb (canvas, NOT white), 1px #f7f9fb border. Header 72 tall (padding 12 20, gap 12) = 24px outline icon + 16/700 title.
 * Body padding 20 60 -> form column 478 wide, gap 16, scrolls. Footer WHITE, 64 tall, padding 12 20, gap 8, radius 0 0 12 12, buttons right: [Cancel outline 80x40][Next primary 80x40].
 * Disabled primary = #cdd1d7 fill, white text. */
.vk-formmodal { background: var(--color-background-back); border: 1px solid var(--color-background-back); padding: 0; }
.vk-formmodal__head svg { width: 24px; height: 24px; }
.vk-formmodal__head { display: flex; align-items: center; gap: 12px; height: 72px; padding: 12px 20px; font: 700 16px/24px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-formmodal__body { display: flex; flex-direction: column; gap: 16px; padding: 20px 60px; overflow: auto; }
.vk-formmodal__foot { display: flex; justify-content: flex-end; gap: 8px; height: 64px; padding: 12px 20px; background: var(--color-background-front); border-radius: 0 0 12px 12px; }
/* Form field resting state: label is the *placeholder* (16px #73808c, e.g. "First Name*") and floats to the 12px notch when focused/filled. */
.vk-field input::placeholder { color: var(--field-placeholder-color-text); }
/* Dropzone: 478x160, bg #e6eaee, 1px dashed #bfc5cd, radius 8, padding 12, gap 12, text 14 #536573 with 14/600 #0285c8 inline link-buttons, helper 12/16. */
.vk-dropzone svg { width: 24px; height: 24px; }
.vk-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 160px; padding: 12px; background: var(--color-background-front-shade); border: 1px dashed var(--field-color-border); border-radius: 8px; color: var(--color-text-secondary); text-align: center; }
/* Setting row card inside a form: white, radius 5, padding 20 12, icon + (title 14/600 / desc 12/16 #536573 + link) + toggle. */
.vk-settingcard { display: flex; align-items: center; gap: 12px; padding: 20px 12px; background: var(--color-background-front); border-radius: 5px; }
/* Toggle (switch): track 56x32, radius full, 1px #838e98 border, padding 1; thumb 28x28 circle. OFF thumb #536573 left, track transparent. ON state not captured: assume track #0285c8 + thumb white right (verify). */
.vk-toggle { position: relative; display: inline-block; width: 56px; height: 32px; padding: 1px; border: 1px solid var(--neutral-400); border-radius: 99999px; cursor: pointer; }
.vk-toggle input { position: absolute; opacity: 0; inset: 0; }
.vk-toggle::after { content: ""; display: block; width: 28px; height: 28px; border-radius: 99999px; background: var(--neutral-600); transition: transform .15s; }
.vk-toggle:has(input:checked) { background: var(--brand-600); border-color: var(--brand-600); }
.vk-toggle:has(input:checked)::after { background: #fff; transform: translateX(24px); }
.vk-toggle:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* Phone field: country button 74x40 (flag + chevron, same border/radius as inputs) + input 392x40, gap 12. */
.vk-phone { display: flex; gap: 12px; }
.vk-phone__country { display: flex; align-items: center; gap: 8px; width: 74px; height: 40px; padding: 7px 12px; border: 1px solid var(--field-color-border); border-radius: 8px; background: transparent; cursor: pointer; }

/* ---------- Wizard / form-flow additions (screens 17-24, data/23-30) ---------- */
/* Focus = 2px #0285c8: inputs get `border 1px + outline 1px` (reads 2px); buttons get `outline: 2px solid #0285c8`. */
.vk-field input:focus-visible, .vk-field input:focus { border-color: var(--field-color-border-focus); outline: 1px solid var(--field-color-border-focus); }
.vk-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }

/* Small modal ("Add New Site"; data/30): panel 576 wide, radius 12, bg #f7f9fb, 1px #f7f9fb border, shadow-small.
 * header 64 (padding 12 12 12 24, gap 12; h2 16/24 700 #030e16; close 40px). body padding 16 24 (input 526x40, label-as-placeholder).
 * footer 73 (padding 16 24, bg #f7f9fb, top divider, radius 0 0 12 12), single primary at right; disabled = #cdd1d7. */
.vk-modal__panel--sm { width: 576px; padding: 0; border-radius: 12px; background: var(--color-background-back); border: 1px solid var(--color-background-back); }
.vk-modal__panel--sm .vk-modal__head { height: 64px; padding: 12px 12px 12px 24px; }
.vk-modal__panel--sm .vk-modal__body { margin: 0; padding: 16px 24px; }
.vk-modal__panel--sm .vk-modal__foot { margin: 0; height: 73px; padding: 16px 24px; background: var(--color-background-back); border-radius: 0 0 12px 12px; }

/* Wizard header with back button (steps 2+): 40px outline circle (arrow-left 20px) + 24px icon + 16/700 title, gap 12, header 72. */
.vk-formmodal__back { flex: none; }
/* Summary row (step 2 "Finish User Setup"; data/24): white button, radius 5, padding 20 12, height 64, gap 8: 24px icon, title 14/600 #2c3e4c (+16px help icon), spacer, value 14/400 ("Test Design"/"None"/"Add"), 16px chevron. List gap 8. */
.vk-summaryrow { display: flex; align-items: center; gap: 12px; width: 100%; height: 64px; padding: 20px 12px; border: 0; border-radius: 5px; background: var(--color-background-front); font: 600 14px/20px "Open Sans", sans-serif; color: var(--color-text); cursor: pointer; text-align: left; }
.vk-summaryrow__value { margin-left: auto; font-weight: 400; display: inline-flex; align-items: center; gap: 12px; }
.vk-summaryrow:hover { background: var(--color-background-front-hover); }
/* Radio card (roles picker; data/25): label row radius 5? (card white, padding 12-24), radio 16px circle 2px #536573 border (bg #e6eaee unchecked) + 8px dot when checked,
 * gap 12, title 16/700 #2c3e4c, description 16/24 400 same colour. Section heading (e.g. a role name): 24px icon + 16/600 #030e16, padding 24. */
.vk-radiocard { display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding: 16px 12px; background: var(--color-background-front); border-radius: 5px; margin-bottom: 8px; cursor: pointer; }
.vk-radio { width: 16px; height: 16px; margin-top: 4px; border: 2px solid var(--radio-color-border); border-radius: 9999px; background: var(--color-background-front-shade); appearance: none; position: relative; }
.vk-radio:checked { background: var(--color-background-front); } .vk-radio:checked::after { content: ""; position: absolute; inset: 2px; border-radius: 9999px; background: var(--radio-color-dot); }
.vk-radiocard__title { font: 700 16px/24px "Open Sans", sans-serif; color: var(--color-text); }
/* Pick-list footer with "Select All" checkbox at left and Done at right (groups picker): footer white 64px, padding 12 20. List row: white, radius 5, 87px tall incl. padding; name 16/400, right caption "2 members" 14/400. */

/* Full-page wizard step ("Add Devices"; data/28): header row = 40px back circle + h1 20/28 700, gap 10, 12px top. Centred column 300 wide (gap 16):
 * 120px illustration, PILL input 296x43 (radius 100, 1px border, focus #0285c8, padding 10 20, 14px text), an "Or" divider (hairlines + 14 text, gap 10),
 * then outline pill buttons 296x40 with 20px leading icon and centred label. */
.vk-pillinput { display: flex; align-items: center; width: 296px; height: 43px; padding: 0 12px 0 0; border: 1px solid var(--field-color-border); border-radius: 100px; background: transparent; }
.vk-pillinput input { flex: 1; height: 100%; padding: 10px 20px; border: 0; outline: 0; background: transparent; font: 400 14px/21px "Open Sans", sans-serif; color: var(--field-color-text); }
.vk-pillinput:focus-within { border-color: var(--field-color-border-focus); }
.vk-pillinput--error { border-color: var(--field-color-border-error); }                 /* light #b01d2b, dark #e65255 */
.vk-error-text { padding: 0 4px; font-size: 12px; line-height: 16px; color: var(--color-text-error); }   /* light #cb2939, dark #e65255; sits directly under the field (gap ~4) */
.vk-divider-or { display: flex; align-items: center; gap: 10px; width: 300px; }
.vk-divider-or::before, .vk-divider-or::after { content: ""; flex: 1; height: 1px; background: var(--color-divider); }

/* Bulk-selection mode (users table; screenshot dark-05): when >=1 row checked the tabs are replaced by "N user(s) selected" (14/400) and the
 * right cluster becomes [search group][destructive OUTLINE pill "Delete" with 20px trash]. Header checkbox goes indeterminate (blue box, white dash). */
.vk-btn--danger-outline { background: transparent; border-color: var(--button-alert-secondary-color-border); color: var(--button-alert-secondary-color-text); padding: 9px 14px; }
.vk-btn--danger-outline:hover { background: var(--button-alert-secondary-hover-color-background); }
/* Dark theme helper */
html[data-color-scheme="dark"] { color-scheme: dark; } html[data-color-scheme="light"] { color-scheme: light; }
html { background: var(--color-background-back); }

/* ---------- Layout helpers used by the explorer pages ---------- */
/* ---- Launcher (All Products), MEASURED live 26 Oct (the reference, desktop) ----
 * Markup: the launcher lives INSIDE the rail, in an anchor beside its button, so the tab can sit BEHIND the icon:
 *   <div class="vk-launcher-anchor"><button class="vk-rail__item vk-launcher-btn" data-vk-menu="#launcher" aria-expanded="false">{all-products icon}…</button>
 *     <div class="vk-launcher" id="launcher" hidden data-vk-menu-panel><div class="vk-launcher__panel">head + body</div></div></div>
 * .vk-launcher IS the 50x40 white tab behind the button (z -1); the 460-wide panel is its child, so ONE filter
 * (1px hairline + drop-shadow 10px 20px 80px .4) outlines tab+panel as a single shape; ::before = the concave fillet
 * where the tab meets the panel. Open/close = opacity .25s ease-in-out (never display:none, so it fades both ways).
 * Icon: the 4 edge-middle dots of the 3x3 grid rotate -45deg about the centre (+ ~1px nudge) => a 9-dot X, .25s cubic-bezier(0,.06,0,1).
 * Opening focuses the search; Esc, the X and any outside click close it. */
.vk-launcher-anchor { position: relative; z-index: 1; width: 40px; height: 40px; }
.vk-rail__item.vk-launcher-btn { border-radius: 10px; }   /* measured: the All Products button is a 10px-radius square, not a pill */
.vk-rail:has(.vk-launcher:not([hidden])) { z-index: var(--z-index-popover); }
.vk-launcher-btn svg > path:nth-child(2n) { transition: transform var(--vk-motion-morph); transform-box: view-box; transform-origin: center; }
.vk-launcher-btn[aria-expanded="true"] svg > path:nth-child(2) { transform: translate(-.9px, -1.1px) rotate(-45deg); }
.vk-launcher-btn[aria-expanded="true"] svg > path:nth-child(4) { transform: translate(-1.1px, .9px) rotate(-45deg); }
.vk-launcher-btn[aria-expanded="true"] svg > path:nth-child(6) { transform: translate(1.1px, -.9px) rotate(-45deg); }
.vk-launcher-btn[aria-expanded="true"] svg > path:nth-child(8) { transform: translate(.9px, 1.1px) rotate(-45deg); }
.vk-rail__item.vk-launcher-btn[aria-expanded="true"] { background: transparent; width: 40px; box-shadow: none; }
.vk-launcher-btn[aria-expanded="true"] .vk-rail__label { opacity: 0; }
.vk-launcher {
  position: absolute; top: 0; left: 0; z-index: -1; width: calc(100% + 10px); height: 100%;
  background: var(--color-background-front); border-radius: 12px 0 0 12px;
  filter: drop-shadow(1px 0 0 var(--color-shadow-border)) drop-shadow(-1px 0 0 var(--color-shadow-border)) drop-shadow(0 1px 0 var(--color-shadow-border)) drop-shadow(0 -1px 0 var(--color-shadow-border)) drop-shadow(10px 20px 80px rgba(3, 14, 22, .4));
  transform: translateZ(0); opacity: 1; visibility: visible; transition: opacity var(--vk-motion-popover);
}
.vk-launcher[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--vk-motion-popover), visibility 0s linear .25s; }
.vk-launcher::before { content: ""; position: absolute; left: 35px; top: 40px; width: 10px; height: 10px; background: radial-gradient(circle at 0 100%, transparent 9.5px, var(--color-background-front) 10px); }
.vk-launcher__panel {
  position: absolute; left: 45px; top: 0; display: flex; flex-direction: column; width: 460px; min-height: 300px; padding: 15px 0;
  background: var(--color-background-front); border-radius: 0 12px 12px 12px; color: var(--color-text-emphasis); white-space: normal; text-align: left;
}
.vk-launcher__head { display: flex; align-items: center; gap: 10px; height: 40px; margin: 0 15px 15px; padding: 0 5px; }
.vk-launcher__search { display: inline-grid; grid-template-columns: 38px 1fr 38px; align-items: center; flex: 1 1 0; min-width: 0; height: 40px; margin: 0; border: 1px solid var(--color-input-border); border-radius: 99999px; }   /* margin 0: it is a <label>, and a label's bottom margin (Bootstrap's, the bridge's) lifts it off the logo's line */
/* Search mode (MEASURED on All Products): clicking into the search or typing slides the brand away and the pill grows into its
 * space: brand box 115 -> 40 wide (width .3s ease) while its content fades (.2s); the pill is flex:1 so it follows (295 -> 370).
 * The product grids swap for a hint + shortcut with no animation; results replace the hint once you type. Cmd/Ctrl+K opens the
 * launcher straight into search mode (no slide). It stays in search mode until the launcher closes. vk.js drives the classes. */
.vk-launcher__brand { flex: 0 0 auto; display: flex; align-items: center; width: 115px; height: 40px; overflow: hidden; white-space: nowrap; transition: width var(--vk-motion-search); }
.vk-launcher__brand > * { transition: opacity .2s; }
.vk-launcher.is-searching .vk-launcher__brand { width: 40px; }
.vk-launcher.is-searching .vk-launcher__brand > * { opacity: 0; }
.vk-launcher.is-instant .vk-launcher__brand, .vk-launcher.is-instant .vk-launcher__brand > * { transition: none; }
.vk-launcher__hint { display: none; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 12px; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text-secondary); text-align: center; }
.vk-launcher.is-searching .vk-launcher__hint:not([hidden]) { display: flex; }
.vk-launcher.is-searching .vk-launcher__body > .vk-launcher__grid, .vk-launcher.is-searching .vk-launcher__divider { display: none; }
/* Keyboard shortcut caps ("Shortcut: ⌘ + K"): 20x20, radius 4, padding 4, #e6eaee + soft 2-layer shadow, 600 10/12 secondary */
.vk-shortcut { display: inline-flex; align-items: center; gap: 8px; }
.vk-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 4px; border-radius: 4px; background: light-dark(#e6eaee, #313640); box-shadow: rgba(0,0,0,.12) 0 2px 1px 0, rgba(0,0,0,.2) 0 1px 3px 0; font: 600 10px/12px "Open Sans", sans-serif; color: var(--color-text-secondary); }
.vk-launcher__search:focus-within { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.vk-launcher__search svg { justify-self: center; } .vk-launcher__search input { border: 0; outline: 0; background: transparent; font: 400 16px/24px "Open Sans", sans-serif; color: var(--color-text-emphasis); min-width: 0; padding: 7px 12px 7px 0; }
.vk-launcher__body { display: flex; flex-direction: column; gap: 18px; margin-bottom: 4px; }
.vk-launcher__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; place-items: stretch center; padding: 0 12px; }
.vk-launcher__divider { border: 0; border-top: 1px solid var(--color-divider); margin: 0; }
@media (max-width: 960px) {
  .vk-launcher__body { gap: 12px; margin-bottom: 0; }
  .vk-launcher__grid { grid-template-columns: repeat(3, 1fr); gap: 12px 0; padding: 0; }
  .vk-product--circle .vk-product__icon { width: 50px; height: 50px; }
  .vk-product--circle { padding-top: 13px; }
}
.vk-product__icon { width: 60px; height: 60px; }
/* Product art (two-tone, no circle): dark shapes use currentColor, outlines --vk-art-2 (the reference: #2c3e4c + #b0b6be) */
.vk-art { --vk-art-2: var(--neutral-200); color: var(--color-text); display: block; }
html[data-color-scheme="dark"] .vk-art { --vk-art-2: #576978; }
.vk-product__icon svg { width: 60px; height: 60px; }
/* Org / user flyout: 300 wide, full height, slides from rail edge */
/* Org / user flyout (MEASURED desktop 26 Oct): 300 wide, full height, padding 20, flat (no shadow) beside the rail.
 * Org row: 56 tile (radius 10, #2c3e4c, 16/600 white) + 10 + name 16/24 700 + two 12/16.8 #536573 lines. hr margin 15.
 * User: name 14/20 600 #536573 + green check 20; email 14/20 400 + 16 chevron. Actions: 20 apart, each 20 tall,
 * 20px icon + 8 + 14/20 600 #232426, never underlined. Footer links 12/16 700 emphasis + 16 arrow, 20 apart.
 * While open, the avatar's rail item takes the selected blue (reads as a 2px ring round the 36 avatar). */
.vk-flyout { position: fixed; left: 60px; top: 0; bottom: 0; width: 300px; padding: 20px; background: var(--color-background-front); z-index: 4; color: var(--color-text); overflow-y: auto;
  transform: none; visibility: visible; transition: transform var(--vk-motion-flyout), visibility 0s; }
/* slides out from BEHIND the rail (z 4 under the rail's 5): translateX(-300px → 0), .2s ease, reversed on close (measured) */
.vk-flyout[hidden] { display: block; transform: translateX(-100%); visibility: hidden; pointer-events: none; transition: transform var(--vk-motion-flyout), visibility 0s linear .2s; }
.vk-flyout a, .vk-drawer__pane--account a { text-decoration: none; }
.vk-flyout__org { display: flex; gap: 10px; align-items: center; min-height: 58px; }
.vk-flyout__org b { display: block; font: 700 16px/24px "Open Sans", sans-serif; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-flyout__org .vk-caption { line-height: 16.8px; }
.vk-flyout__tile { flex: 0 0 56px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--neutral-800); color: #fff; font: 600 16px/24px "Open Sans", sans-serif; }
.vk-flyout hr, .vk-drawer__pane--account hr { border: 0; border-top: 1px solid var(--color-divider); margin: 15px 0; }
.vk-flyout__name { display: flex; align-items: center; gap: 8px; font: 600 14px/20px "Open Sans", sans-serif; color: var(--color-text-secondary); }
.vk-flyout__name svg { color: var(--green-500, #14ba74); }
.vk-flyout__email { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 400 14px/20px "Open Sans", sans-serif; color: var(--button-tertiary-color-text); }
.vk-flyout__actions { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.vk-flyout__row { display: flex; align-items: center; gap: 8px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; font: 600 14px/20px "Open Sans", sans-serif; color: var(--button-tertiary-color-text); cursor: pointer; text-align: left; }
.vk-flyout__row svg { width: 20px; height: 20px; }
.vk-flyout__small { display: flex; align-items: center; gap: 8px; height: 16px; font: 700 12px/16px "Open Sans", sans-serif; color: var(--color-text-emphasis); transition: color var(--vk-motion-hover); }
.vk-flyout__small + .vk-flyout__small { margin-top: 20px; }
.vk-flyout__small svg { width: 16px; height: 16px; }
.vk-rail__item[data-vk-menu][aria-expanded="true"]:not(.vk-launcher-btn) { background: var(--brand-600); color: #fff; }
/* Key-value row inside a card (settings) */
.vk-kv { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: 0; padding: 16px 24px; min-height: 73px; border-top: 1px solid var(--color-divider); }
.vk-kv__label { font-weight: 600; } .vk-kv__value { font-size: 16px; line-height: 24px; color: var(--color-text-emphasis); padding: 7px 12px; }
.vk-ok { color: var(--green-500); } .vk-err { color: var(--red-500); }
/* Settings / centred 960 layout */
.vk-settings { display: grid; grid-template-columns: 240px 708px; gap: 12px; width: 960px; margin: 0 auto; }
.vk-center960 { width: 960px; margin: 0 auto; }
.vk-split { display: grid; grid-template-columns: 468px 480px; gap: 12px; }
/* Help centre (core page, 04 §6e; the rail's "?" opens it). Measured on the reference's support page (1470x835 window):
 * the page is a 1160px frame CENTRED in the content area (125px each side); the 64px title strip is sticky; under it a 340px side column
 * (sticky at top 76, so it stays put) beside the main column that scrolls with the page: 340 + 16 + 804. Cards are white, radius 8, no
 * shadow. Side: ways to get in touch (46px bars; Call and Email fold open into a list), customer ID, system status, your contact.
 * Main: support access (toggle), open support cases, helpful resources. Bars and rows are <button>s (or anchors given the ink rule near
 * .vk-rail__item): hover is a grey wash, text never turns link blue. */
.vk-help { max-width: 1208px; margin: 0 auto; }   /* 1160 + the page's 24px sides */
.vk-help__header { position: sticky; top: 0; z-index: 5; background: var(--color-background-back); }
.vk-help__grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 24px; }   /* the reference leaves 24px under the strip (grid y 88) */
.vk-help__side { position: sticky; top: 76px; display: grid; gap: 16px; min-width: 0; }   /* 64px strip + 12 */
.vk-help__main { display: grid; gap: 16px; min-width: 0; }
.vk-help__card { padding: 16px; min-width: 0; }
.vk-help__cardtitle { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-text); }
.vk-help__smalltitle { margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--color-text); }
.vk-help__empty { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
/* ways to get in touch: 46px bars, radius 12, 12/16 padding, 12px gap, 14/600 ink on the shade; Call and Email carry a chevron and fold open */
.vk-help__actions { display: grid; gap: 8px; }
.vk-help__action { display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--color-background-front-shade); color: var(--color-text); font: 600 14px/20px "Open Sans", sans-serif; text-align: left; cursor: pointer; transition: background-color var(--vk-motion-hover); }
.vk-help__action:hover { background: color-mix(in srgb, var(--color-background-front-shade), var(--color-text) 6%); }   /* a touch darker in light, lighter in dark */
.vk-help__action:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vk-help__action > svg { flex: none; }
.vk-help__action .vk-help__chev { margin-left: auto; width: 16px; height: 16px; transition: transform var(--vk-motion-fold); }
.vk-help__action[aria-expanded="true"] .vk-help__chev { transform: rotate(180deg); }
.vk-help__action--ai > svg { color: var(--purple-300); }   /* the AI bar's sparkle is the one purple accent */
.vk-help__action--outline { background: transparent; border: 1px solid var(--color-divider); }   /* "View status page": same bar, outlined */
.vk-help__action--outline:hover { background: var(--color-background-front-hover); }
/* the list a bar folds open: the shade again, 38px rows (8/16 padding), a label (14/400 secondary) and its value (14/600 link blue) */
.vk-help__drop { margin-top: 8px; border-radius: 12px; background: var(--color-background-front-shade); }   /* 8px under its bar (inside the fold, so it folds away with it) */
.vk-help__droprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text-secondary); }
.vk-help__droprow a { font-weight: 600; color: var(--link-primary-color-text); text-decoration: none; }
.vk-help__droprow a:hover { text-decoration: underline; }
/* customer ID: a divided row, label 14/600, value 16/600, a 32px ghost copy button */
.vk-help__idrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-divider); font: 600 14px/20px "Open Sans", sans-serif; color: var(--color-text); }
.vk-help__idvalue { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; }
/* system status: a green 36px pill (8/12, radius 8) with a dot; an incident line (12/16) with an amber badge; the outlined button */
.vk-help__status { display: grid; gap: 12px; }
.vk-help__ok { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--badge-green-secondary-color-background); color: var(--badge-green-secondary-color-text); font: 600 14px/20px "Open Sans", sans-serif; }
.vk-help__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.vk-help__incident { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font: 400 12px/16px "Open Sans", sans-serif; color: var(--color-text); }
.vk-help__incident .vk-badge { flex: none; }
/* your contact: label 12/16 secondary, name 16/600, a divider, then icon tile (34px, radius 8) + label + 14/600 link rows */
.vk-help__rep { margin: 0; font: 400 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); }
.vk-help__repname { margin: 0 0 12px; font: 600 16px/24px "Open Sans", sans-serif; color: var(--color-text); }
.vk-help__contacts { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.vk-help__contact { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vk-help__tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--color-background-front-shade); }
.vk-help__contact .vk-help__rep { display: block; }
.vk-help__contact a { font: 600 14px/20px "Open Sans", sans-serif; text-decoration: none; }
/* main column: support access (a title + 480px of copy, the 40px toggle on the right) */
.vk-help__access { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.vk-help__access p { max-width: 480px; margin: 4px 0 0; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text-secondary); }
.vk-toggle--sm { width: 40px; height: 24px; flex: none; }   /* the small switch (the reference's is 40x24) */
.vk-toggle--sm::after { width: 20px; height: 20px; }
.vk-toggle--sm:has(input:checked)::after { transform: translateX(16px); }
/* open support cases: a titled card, an empty line (disabled grey, centred), an inset divider, a "View all" row with a chevron */
.vk-help__cases { padding: 0; }
.vk-help__cases > .vk-help__cardtitle { padding: 16px 24px 0; }
.vk-help__casesempty { margin: 0; padding: 32px 24px; text-align: center; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text-disabled); }
.vk-help__more { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 48px); margin: 0 24px; padding: 16px 0; border: 0; border-top: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font: 600 14px/20px "Open Sans", sans-serif; text-align: left; cursor: pointer; }
.vk-help__more:hover { color: var(--color-text-emphasis); }
.vk-help__more:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
/* helpful resources: 56px title, then 63px rows: 20px icon, name 14/400 over a 12/16 secondary line, a 16px external-link icon (a real link) or a badge */
.vk-help__resources { padding: 0; overflow: hidden; }
.vk-help__resourcestitle { padding: 16px 24px; }
.vk-help__list { margin: 0; padding: 0; list-style: none; }
.vk-help__list li { border-top: 1px solid var(--color-divider); }
.vk-help__resource { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 12px 16px 12px 24px; border: 0; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; transition: background-color var(--vk-motion-hover); }
.vk-help__resource:hover { background: var(--color-background-front-hover); }
.vk-help__resource:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.vk-help__resource > svg { flex: none; align-self: flex-start; margin-top: 2px; width: 20px; height: 20px; }
.vk-help__resource > svg:last-child:not(:first-child) { align-self: center; margin-top: 0; width: 16px; height: 16px; color: var(--color-text-secondary); }   /* the trailing external-link icon */
.vk-help__resourcetext { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.vk-help__resourcename { font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text); }
.vk-help__resourcedesc { font: 400 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); }
.vk-help__resource .vk-badge { flex: none; }
@media (max-width: 800px) { .vk-help__grid { grid-template-columns: minmax(0, 1fr); } .vk-help__side { position: static; } }
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-help__side { position: static; }
  .vk-help__resourcestitle, .vk-help__resource { padding-left: 16px; padding-right: 16px; }
  .vk-help__access { padding: 16px; }
  .vk-help__cases > .vk-help__cardtitle { padding: 16px 16px 0; }
  .vk-help__casesempty { padding: 28px 16px; }
  .vk-help__more { width: calc(100% - 32px); margin: 0 16px; }
}
/* Tile grid */
.vk-tilegrid { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-tile__center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; font-size: 16px; }
/* Product side panel (Cameras) */
.vk-sidepanel { width: 285px; padding: 15px 12px; background: var(--color-background-front); min-height: 100vh; }
.vk-sidepanel__group { font: 600 12px/16px "Open Sans", sans-serif; display: flex; gap: 8px; align-items: center; padding: 12px 0; }
.vk-sidepanel__item { padding: 10px 0 10px 12px; color: var(--color-text-secondary); border-radius: 8px; }
.vk-sidepanel__item[aria-selected="true"] { background: var(--brand-50); color: var(--color-text); }
.vk-columns { display: flex; align-items: stretch; }
.vk-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 320px; margin: 90px auto 0; text-align: center; }
.vk-empty svg.vk-empty__art { width: 240px; height: 240px; }
.vk-empty h2 { margin: 0; font: 700 20px/28px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-empty p { margin: 0 0 20px; color: var(--color-text-emphasis); }
.vk-cluster { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vk-stack { display: grid; gap: 16px; }

/* =====================================================================================================
 * DARK-MODE DELTAS (measured in dark, data/22, 26, 27): things that are not a plain token swap
 * ===================================================================================================== */
/* Table frame: The reference draws it as 1px borders on the outer cells (not on the table), with the 12px radius on the
 * corner cells; the last row keeps its bottom rule. light #e6eaee (= divider), dark #2e3238 ring as measured. */
@media (min-width: 501px) and (min-height: 501px) {
  .vk-table:not(.vk-table--raised) { --vk-table-frame: 1px solid light-dark(#e6eaee, #2e3238); }
  .vk-table:not(.vk-table--raised) thead th { border-top: var(--vk-table-frame); }
  .vk-table:not(.vk-table--raised) tr > :first-child { border-left: var(--vk-table-frame); }
  .vk-table:not(.vk-table--raised) tr > :last-child { border-right: var(--vk-table-frame); }
  .vk-table:not(.vk-table--raised) tbody tr:last-child td, .vk-table:not(.vk-table--raised) tbody tr:last-child th { border-bottom: var(--vk-table-frame); }
  .vk-table:not(.vk-table--raised) thead tr > :first-child { border-top-left-radius: 12px; }
  .vk-table:not(.vk-table--raised) thead tr > :last-child { border-top-right-radius: 12px; }
  .vk-table:not(.vk-table--raised) tbody tr:last-child > :first-child { border-bottom-left-radius: 12px; }
  .vk-table:not(.vk-table--raised) tbody tr:last-child > :last-child { border-bottom-right-radius: 12px; }
  .vk-insettable .vk-table.vk-table { box-shadow: none; }                         /* the cell frame replaces its ring */
}
.vk-avatar { background: var(--color-background-front-active); }                /* #dce0e4 / #2a353e */
html[data-color-scheme="dark"] .vk-chip { background: #45494c; border-color: transparent; color: #fdfefe; }
html[data-color-scheme="dark"] .vk-searchgroup { background: #24282e; }
html[data-color-scheme="dark"] .vk-h1, html[data-color-scheme="dark"] .vk-topbar__title { color: var(--color-text-back); } /* page titles #b0b6be */
html[data-color-scheme="dark"] .vk-table thead th { background: #24282e; }
html[data-color-scheme="dark"] .vk-table tbody th, html[data-color-scheme="dark"] .vk-row__title { color: #f7f9fb; }
html[data-color-scheme="dark"] .vk-checkbox:checked { background-color: var(--brand-600); }
html[data-color-scheme="dark"] .vk-modal__panel { border: 1px solid #313640; }
html[data-color-scheme="dark"] .vk-formmodal__foot, html[data-color-scheme="dark"] .vk-modal__panel--sm .vk-modal__foot { background: var(--color-background-front); }
html[data-color-scheme="dark"] .vk-rail__avatar { background: #cdd1d7; color: #181a1e; }
html[data-color-scheme="dark"] .vk-tab[aria-selected="true"] { color: #f7f9fb; border-bottom-color: #f7f9fb; }

/* =====================================================================================================
 * MOBILE + TABLET LAYER
 * The reference's own breakpoints (from its stylesheets): 500px (phone, 211 rules), 768px, 960px.
 * Verified: at 767px the reference still shows rail + table; at 500px it switches to top bar + hamburger + list rows.
 * A short window is a phone too (measured 28 Oct 2026: 1280x501 keeps the rail, 1280x500 is the phone layout), so every phone rule
 * is the reference's query  (max-width: 500px), (max-height: 500px) and (orientation: landscape)  and every desktop-only rule its
 * opposite  (min-width: 501px) and (min-height: 501px). Write both out in full (CSS has no shared media queries); vk.js uses the same.
 * Helpers: .vk-hide-m (hidden on a phone), .vk-show-m (shown only on a phone).
 * ===================================================================================================== */
@media (min-width: 501px) and (min-height: 501px) { .vk-show-m, .vk-topbar, .vk-drawer, .vk-scrim { display: none !important; } }

/* ---- Top app bar (mobile), data/32: 64px, white, 1px #e6eaee bottom, padding 4px 8px, gap 16, sticky ---- */
.vk-topbar { position: sticky; top: 0; z-index: 4; align-items: center; gap: 4px; height: 64px; padding: 4px 8px; background: var(--color-background-front); border-bottom: 1px solid var(--color-divider); }
.vk-topbar__btn { width: 44px; height: 44px; padding: 10px; }
/* Variant measured on product homes (e.g. Cameras): no border, padding 12, gap 10, 40px button with 20px icon, title 16/24 700 */
.vk-topbar--app { border-bottom: 0; padding: 12px; gap: 10px; }
.vk-topbar--app .vk-topbar__btn { width: 40px; height: 40px; } .vk-topbar--app .vk-topbar__btn svg { width: 20px; height: 20px; }
.vk-topbar--app .vk-topbar__title { font: 700 16px/24px "Open Sans", sans-serif; }                     /* hamburger / back: 44px ghost circle, 24px glyph */
.vk-topbar__btn svg { width: 24px; height: 24px; }
.vk-topbar__title { margin: 0; flex: 1; min-width: 0; font: 700 20px/28px "Open Sans", sans-serif; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-topbar__title small { display: block; font: 400 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); }

/* ---- Navigation drawer (mobile), data/33: 332px, white, z 1020; header 61 (48px launcher btn + product 16/700),
 *      items 302x40 pills at x=10 gap 10 (active #0285c8), bottom bar of 40px icon buttons above a 1px divider ---- */
.vk-drawer { position: fixed; inset: 0 auto 0 0; z-index: 1020; width: 85vw;   /* measured: 332 @390, 363 @427 = 85% of the screen */ flex-direction: column; background: var(--color-background-front); transform: translateX(-100%); transition: transform var(--vk-motion-drawer); }
.vk-drawer.is-open { transform: none; }
.vk-drawer__head { display: flex; align-items: center; gap: 10px; height: 61px; padding: 6px 20px 6px 10px; border-bottom: 1px solid var(--color-divider); font: 700 16px/24px "Open Sans", sans-serif; }
.vk-drawer__head .vk-btn { width: 48px; height: 48px; padding: 12px; }
/* The reference only shows hover fills with a mouse; on touch the header button stays transparent (focus ring for keyboard only) */
@media (hover: none), (pointer: coarse) { .vk-drawer__head .vk-btn:hover, .vk-drawer__head .vk-btn:focus { background: transparent; } }
.vk-drawer__nav { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 15px 0 10px; }
.vk-drawer__item { display: flex; align-items: center; gap: 10px; margin: 0 20px 0 10px; height: 40px; border-radius: 20px; color: var(--color-text); text-decoration: none; font: 400 14px/20px "Open Sans", sans-serif; flex: none; }
.vk-drawer__item svg { width: 24px; height: 24px; margin: 0 8px; }
.vk-drawer__item[aria-current="page"] { background: var(--brand-600); color: #fff; }

.vk-drawer__foot { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; padding: 10px 25px; border-top: 1px solid var(--color-divider); }
.vk-drawer__foot .vk-btn { width: 40px; height: 40px; padding: 8px; } .vk-drawer__foot svg { width: 24px; height: 24px; }
/* All Products on a phone (MEASURED live 26 Oct, 390px): NO popover. The drawer's top-left button switches the drawer body
 * between the page list and a products pane: list -> translateX(100%) + fade out, products left:-100% -> 0 + fade in,
 * both .35s ease-in-out and exactly reversed on the way back. The footer icons travel with the list. The icon does NOT
 * rotate here: it swaps at once to a static 9-dot X (icons/all-products-close.svg); the title becomes "All Products"
 * and the button "Back to main navigation". Closing the drawer resets it to the list. */
/* Drawer PANE STACK (MEASURED on the reference 390/427px): the drawer body is a stack of panes. The page list (with footer) is
 * the main pane; All Products, Account (avatar) and Search each slide in from the LEFT (left -100% → 0 + fade in) while
 * the list slides RIGHT (translateX 100% + fade out), .35s ease-in-out, reversed by the header button. The header button
 * swaps instantly: 9 dots (list) → static 9-dot X (products) → back chevron (account, search); the title becomes the
 * pane's name, and on Search the header holds the search box. Closing the drawer resets it to the list. */
.vk-drawer__panes { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.vk-drawer__main { position: absolute; inset: 0; display: flex; flex-direction: column; transition: var(--vk-motion-swap); }
.vk-drawer__pane { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; overflow-y: auto; padding-top: 15px; opacity: 0; visibility: hidden; transition: var(--vk-motion-swap); }
.vk-drawer.is-pane .vk-drawer__main { transform: translateX(100%); opacity: 0; visibility: hidden; }
.vk-drawer__pane.is-active { left: 0; opacity: 1; visibility: visible; }
.vk-drawer__pane .vk-launcher__divider { margin: 0 5%; }
.vk-drawer__pane--account { padding: 35px 20px 20px; }   /* measured: org tile at (20, 96) = 61 header + 15 + 20 */
.vk-drawer.is-resetting .vk-drawer__main, .vk-drawer.is-resetting .vk-drawer__pane { transition: none; }
.vk-drawer__switch .vk-drawer__x, .vk-drawer__switch .vk-drawer__back, .vk-drawer__panetitle, .vk-drawer__headsearch { display: none; }
.vk-drawer.is-pane .vk-drawer__switch .vk-drawer__dots, .vk-drawer.is-pane [data-lib-drawer-title], .vk-drawer.is-pane .vk-drawer__title { display: none; }
.vk-drawer[data-pane="products"] .vk-drawer__switch .vk-drawer__x { display: inline; }
.vk-drawer.is-pane:not([data-pane="products"]) .vk-drawer__switch .vk-drawer__back { display: inline; }
.vk-drawer.is-pane .vk-drawer__panetitle { display: inline; }
.vk-drawer[data-pane="search"] .vk-drawer__panetitle { display: none; }
.vk-drawer[data-pane="search"] .vk-drawer__headsearch { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 40px; margin: 0; border: 1px solid var(--color-input-border); border-radius: 99999px; padding-left: 8px; }
.vk-drawer__headsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/24px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-drawer__headsearch svg { flex: 0 0 24px; width: 24px; height: 24px; }
/* Scrim: #2c3e4c at .5, fades .2s linear (measured) */
.vk-scrim { position: fixed; inset: 0; z-index: 1019; display: block; background: rgb(44,62,76); opacity: 0; visibility: hidden; transition: opacity var(--vk-motion-scrim), visibility 0s linear .2s; }
.vk-scrim.is-open { opacity: .5; visibility: visible; transition: opacity var(--vk-motion-scrim); }

/* ---- Tablet (<=960): centred-960 layouts become fluid ---- */
@media (max-width: 960px) {
  .vk-center960 { width: auto; margin: 0 24px; }
  .vk-settings { width: auto; grid-template-columns: 240px minmax(0,1fr); }
  .vk-split { grid-template-columns: minmax(0,1fr) minmax(0,480px); }
  .vk-searchgroup .vk-btn span.vk-hide-t { display: none; }
}

/* ---- Phone (<=500) ---- */
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-hide-m { display: none !important; }
  .vk-topbar { display: flex; }
  .vk-drawer { display: flex; }
  .vk-app { grid-template-columns: 1fr; }
  .vk-rail { visibility: hidden; width: 0; padding: 0; box-shadow: none; }   /* hidden; the desktop launcher inside it is not used on phones */
  .vk-product:not(.vk-product--circle) .vk-product__icon, .vk-product:not(.vk-product--circle) .vk-product__icon svg { width: 50px; height: 50px; }
  .vk-main { grid-column: 1; }
  .vk-page { padding: 0; }
  .vk-page__header { display: none; }                         /* title lives in the top bar */

  /* toolbar row: 56px, padding 8px; tabs become outline pills, actions become 40px icon circles + overflow menu */
  .vk-toolbar { gap: 8px; padding: 8px 8px 16px !important; flex-wrap: nowrap; background: var(--color-background-front); } /* white band, 64 tall: 56 row + 8 below */
  .vk-tabs { gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
  .vk-tabs::-webkit-scrollbar { display: none; }
  .vk-toolbar__spacer { display: none; }
  .vk-pager { justify-content: center; padding: 12px 8px; }
  .vk-pager > span, .vk-pager > select { display: none; }
  .vk-pager__pages { margin: 0; }
  .vk-settings .vk-push-index { background: var(--color-background-front); min-height: calc(100vh - 64px); }
  .vk-tab { height: 40px; padding: 9px 14px; border: 1px solid var(--button-secondary-color-border); border-radius: 99999px; color: var(--button-tertiary-color-text); }
  .vk-tab[aria-selected="true"] { background: var(--brand-50); border-color: var(--button-secondary-color-border); border-radius: 99999px; color: var(--button-tertiary-color-text); }
  html[data-color-scheme="dark"] .vk-tab[aria-selected="true"] { background: var(--color-background-front-selected); color: #f7f9fb; }
  .vk-tab__count { display: none; }

  /* table -> two-line list (data/32): li padding 8px 16px, 1px #e6eaee bottom, white; primary 14/600 #232426,
   * secondary 14/400 under it, aside (status) right. Mark cells: .vk-m-primary .vk-m-secondary .vk-m-aside; others hide. */
  .vk-table { border-radius: 0; box-shadow: none; }
  .vk-table thead { display: none; }
  .vk-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "p a" "s a"; column-gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--color-divider); }
  .vk-table tbody tr:last-child { border-bottom: 0; }                     /* rules between rows only: 57 / 56 */
  .vk-table tbody td, .vk-table tbody th { display: none; height: auto; padding: 0; border: 0; }
  .vk-table tbody .vk-m-primary { display: block; grid-area: p; font: 600 14px/20px "Open Sans", sans-serif; color: var(--button-tertiary-color-text); }
  .vk-table tbody .vk-m-secondary { display: block; grid-area: s; }
  .vk-table tbody .vk-m-aside { display: block; grid-area: a; align-self: start; }

  /* modals -> bottom sheets (data/34): full width, anchored bottom, radius 24 24 0 0, height <= 660, body padding 16 */
  .vk-modal__panel, .vk-modal__panel--sm, .vk-carousel { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-width: 100%; max-height: min(660px, calc(100% - 40px)); border-radius: 24px 24px 0 0; animation: vk-sheet-in .25s ease-out; }
  .vk-formmodal__body { padding: 16px; }
  .vk-carousel__hero { height: 200px; }
  .vk-carousel__cards { grid-template-columns: 1fr; gap: 10px; transform: scale(.8); }
  .vk-dropzone { display: none; }                           /* mobile replaces the dropzone with a "Choose a Photo" link */

  /* cards go full-bleed; key-value rows stack (data/35) */
  .vk-card { border-radius: 0; }
  .vk-kv { grid-template-columns: 1fr auto; padding: 16px; }
  .vk-kv__label { grid-column: 1 / -1; margin-bottom: 4px; }
  .vk-center960 { margin: 0; }

  /* push navigation: list/index first, then detail with a back button (settings, master-detail) */
  .vk-settings, .vk-split { grid-template-columns: 1fr; gap: 0; }
  [data-vk-view="index"] .vk-push-detail { display: none; }
  [data-vk-view="detail"] .vk-push-index { display: none; }
  .vk-sidenav { width: auto; padding: 0; }
  .vk-sidenav a { height: 52px; padding: 16px 24px; border-radius: 0; }
  .vk-sidenav a[aria-current="page"] { background: transparent; }

  /* panels that sit beside content on desktop become bottom sheets */
  .vk-withpanel { display: block; }
  /* Filters -> bottom sheet (MEASURED on Users at 390): overlay rgba(63,81,95,.7) + white sheet 95% tall, radius 12 12 0 0, soft
   * 2-layer shadow. Open: sheet slides up from 100% (.3s ease-in-out) while sheet and overlay fade in (.15s linear). Close
   * (.is-closing; vk.js sets [hidden] when it ends): sheet slides down .3s, overlay fades out in the first .15s, sheet in the last .15s. */
  .vk-filter, .vk-withpanel > .vk-filter { position: fixed; inset: 0; z-index: 1021; width: auto; padding-top: 5vh; overflow: hidden; border-radius: 0; background: var(--color-background-overlay); animation: vk-overlay-in .15s linear; }
  .vk-filter > .vk-filter__body { height: 100%; overflow: auto; background: var(--color-background-front); border-radius: 12px 12px 0 0; box-shadow: rgba(0,0,0,.12) 0 2px 1px 0, rgba(0,0,0,.2) 0 1px 3px 0; animation: vk-sheet-up var(--vk-motion-sheet), vk-fade-in .15s linear; }
  .vk-filter.is-closing { animation: vk-overlay-out .15s linear forwards; }
  .vk-filter.is-closing > .vk-filter__body { animation: vk-sheet-down var(--vk-motion-sheet) forwards, vk-sheet-fade-out .3s linear forwards; }
  .vk-launcher { position: fixed; inset: 0; width: auto; height: auto; z-index: 1030; border-radius: 0; filter: none; transform: none; }
  .vk-launcher::before { display: none; }
  .vk-launcher__panel { position: static; width: 100%; min-height: 100%; border-radius: 0; overflow: auto; }
  .vk-launcher__search { width: auto; flex: 1; }
  .vk-flyout { position: fixed; left: 0; width: 100%; z-index: 1030; }
  .vk-sidepanel { width: 100%; min-height: 0; }
  .vk-columns { flex-direction: column; }
  .vk-tile { width: calc(50% - 3px); height: auto; aspect-ratio: 4/3; }
  .vk-fab { right: 16px; bottom: 16px; }
  .vk-empty { width: auto; padding: 0 24px; margin-top: 40px; }
  .vk-empty svg.vk-empty__art { width: 180px; height: 180px; }
}
@keyframes vk-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vk-overlay-in { from { background-color: transparent; } }
@keyframes vk-overlay-out { to { background-color: transparent; } }
@keyframes vk-sheet-up { from { transform: translateY(100%); } }
@keyframes vk-sheet-down { to { transform: translateY(100%); } }
@keyframes vk-sheet-fade-out { 50% { opacity: 1; } to { opacity: 0; } }

/* Mobile overflow menu (data: screenshot m-03): rows 44px, 24px icon + 16/24 label, full-width card under the toolbar */
.vk-overflow { position: absolute; right: 8px; top: 52px; left: 30px; z-index: 6; }
.vk-overflow .vk-menu__item { font-size: 16px; line-height: 24px; height: 44px; }
.vk-overflow .vk-menu__item svg { width: 24px; height: 24px; }

/* =====================================================================================================
 * COMPOSED COMPONENTS: needed by MailMilo (ABP inventory) but NOT seen on the reference.
 * Built strictly from the reference tokens/sizes so they read as native. Treat as "best inference", not captured.
 * ===================================================================================================== */
/* Pagination (DataTables replacement): sits under the table card; 32px circle page buttons, current = accent */
.vk-pager { display: flex; align-items: center; gap: 12px; padding: 12px 8px 0; color: var(--color-text-secondary); font-size: 14px; }
.vk-pager__pages { display: flex; gap: 4px; margin-left: auto; }
.vk-pager__btn { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 99999px; background: transparent; font: 600 14px/20px "Open Sans", sans-serif; color: var(--button-tertiary-color-text); cursor: pointer; display: inline-grid; place-items: center; }
.vk-pager__btn:hover { background: var(--color-background-front-hover); }
.vk-pager__btn[aria-current="page"] { background: var(--brand-600); color: #fff; }
.vk-pager__btn:disabled { color: var(--color-text-disabled); cursor: not-allowed; background: transparent; }
.vk-pager select { height: 32px; }

/* Native select styled like the reference fields (40px, radius 8, #bfc5cd) */
.vk-select { appearance: none; height: 40px; padding: 7px 36px 7px 12px; border: 1px solid var(--field-color-border); border-radius: 8px; background: var(--color-background-front) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23536573' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") right 12px center/16px no-repeat; font: 400 16px/24px "Open Sans", sans-serif; color: var(--field-color-text); }
.vk-select:focus { outline: 1px solid var(--field-color-border-focus); border-color: var(--field-color-border-focus); }
.vk-select--sm { height: 32px; padding: 4px 30px 4px 10px; font-size: 14px; line-height: 20px; border-radius: 99999px; background-position: right 8px center; }
.vk-textarea { width: 100%; min-height: 96px; padding: 8px 12px; border: 1px solid var(--field-color-border); border-radius: 8px; background: transparent; font: 400 16px/24px "Open Sans", sans-serif; color: var(--field-color-text); resize: vertical; }
.vk-textarea:focus { outline: 1px solid var(--field-color-border-focus); border-color: var(--field-color-border-focus); }
.vk-hint { font-size: 12px; line-height: 16px; color: var(--color-text-secondary); padding: 4px 4px 0; }
/* Multi-select (select2 replacement): field box holding removable chips + an inline input */
.vk-multiselect { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 5px 8px; border: 1px solid var(--field-color-border); border-radius: 8px; background: transparent; }
.vk-multiselect:focus-within { border-color: var(--field-color-border-focus); outline: 1px solid var(--field-color-border-focus); }
.vk-multiselect .vk-chip { height: 28px; }
.vk-multiselect .vk-chip button { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; display: grid; }
.vk-multiselect input { flex: 1; min-width: 80px; border: 0; outline: 0; background: transparent; font: 400 16px/24px "Open Sans", sans-serif; color: var(--field-color-text); }
/* Date field + calendar popover (bootstrap-datetimepicker replacement) */
.vk-calendar { width: 296px; padding: 12px; background: var(--color-background-front); border-radius: 12px; box-shadow: var(--color-shadow-small); }
.vk-calendar__head { display: flex; align-items: center; justify-content: space-between; height: 40px; font-weight: 600; }
.vk-calendar__grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 4px 2px; justify-content: space-between; font-size: 12px; text-align: center; }
.vk-calendar__grid b { font-weight: 600; color: var(--color-text-secondary); line-height: 24px; }
.vk-calendar__day { width: 36px; height: 36px; border: 0; border-radius: 99999px; background: transparent; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text); cursor: pointer; }
.vk-calendar__day:hover { background: var(--color-background-front-hover); }
.vk-calendar__day[aria-selected="true"] { background: var(--brand-600); color: #fff; font-weight: 600; }
.vk-calendar__day.is-today { box-shadow: inset 0 0 0 1px var(--brand-600); }
.vk-calendar__day.is-range { background: var(--brand-50); border-radius: 0; }
.vk-calendar__day.is-muted { color: var(--color-text-disabled); }

/* Toast (abp.notify / toastr replacement): bottom-centre on desktop, bottom on mobile; dark contrast pill like the reference overlays */
.vk-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-index-tooltip); display: grid; gap: 8px; justify-items: center; }
.vk-toast { display: flex; align-items: center; gap: 12px; min-height: 48px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; border-radius: 12px; background: var(--neutral-900); color: #fff; box-shadow: var(--color-shadow-large); font-size: 14px; line-height: 20px; animation: vk-sheet-in .2s ease-out; }
.vk-toast__icon { flex: none; display: grid; }
.vk-toast--success .vk-toast__icon { color: var(--green-400); } .vk-toast--error .vk-toast__icon { color: var(--red-300); }
.vk-toast--warning .vk-toast__icon { color: var(--yellow-400); } .vk-toast--info .vk-toast__icon { color: var(--cyan-300); }
.vk-toast .vk-btn { height: 32px; color: #fff; } .vk-toast .vk-btn:hover { background: rgba(255,255,255,.12); }
/* Inline banner / alert (Bootstrap alert replacement): the message tokens, a tinted background and border, the colour in the icon, ink text */
.vk-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; line-height: 20px; color: var(--message-color-text); }
.vk-banner b { display: block; }
.vk-banner--info { background: var(--message-info-color-background); border-color: var(--message-info-color-border); }
.vk-banner--ok { background: var(--message-ok-color-background); border-color: var(--message-ok-color-border); }
.vk-banner--warning { background: var(--message-warning-color-background); border-color: var(--message-warning-color-border); }
.vk-banner--error { background: var(--message-error-color-background); border-color: var(--message-error-color-border); }
.vk-banner--info > .vk-i { color: var(--message-info-color-icon); } .vk-banner--ok > .vk-i { color: var(--message-ok-color-icon); }
.vk-banner--warning > .vk-i { color: var(--message-warning-color-icon); } .vk-banner--error > .vk-i { color: var(--message-error-color-icon); }
/* full-width bar under the top of the page (subscription / impersonation): the solid banner tokens */
.vk-banner--strip { border-radius: 0; border-width: 0; justify-content: center; align-items: center; }
.vk-banner--strip.vk-banner--info { background: var(--banner-info-color-background); color: var(--banner-info-color-text); }
.vk-banner--strip.vk-banner--ok { background: var(--banner-success-color-background); color: var(--banner-success-color-text); }
.vk-banner--strip.vk-banner--warning { background: var(--banner-warning-color-background); color: var(--banner-warning-color-text); }
.vk-banner--strip.vk-banner--error { background: var(--banner-error-color-background); color: var(--banner-error-color-text); }
.vk-banner--strip > .vk-i { color: inherit; }
/* Spinner + busy overlay (abp.ui.setBusy replacement): The reference's page loader is a cyan arc ring */
.vk-spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--cyan-50); border-top-color: var(--cyan-500); animation: vk-spin .8s linear infinite; }
.vk-spinner--sm { width: 20px; height: 20px; border-width: 2px; }
.vk-busy { position: relative; } .vk-busy::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-background-front) 60%, transparent); border-radius: inherit; }
@keyframes vk-spin { to { transform: rotate(360deg); } }
.vk-skeleton { border-radius: 6px; background: linear-gradient(90deg, var(--skeleton-glow-color-1), var(--skeleton-glow-color-2), var(--skeleton-glow-color-1)); background-size: 200% 100%; animation: vk-shine 1.4s ease-in-out infinite; }
@keyframes vk-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Stage bar (Trade enquiry 6-step stage) and linear stepper (campaign wizard): pills, not a progress bar */
.vk-stages { display: flex; gap: 4px; }
.vk-stage { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border-radius: 99999px; display: flex; align-items: center; gap: 6px; background: var(--neutral-25); color: var(--color-text-secondary); font: 600 12px/16px "Open Sans", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-stage.is-done { background: var(--color-background-ok); color: var(--color-text-ok); }
.vk-stage[aria-current="step"] { background: var(--brand-600); color: #fff; }
.vk-stepper { display: grid; gap: 4px; }
.vk-stepper__item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-radius: 50px; color: var(--color-text-emphasis); font-weight: 600; text-decoration: none; }
.vk-stepper__num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--color-background-front-shade); color: var(--color-text-secondary); flex: none; }
.vk-stepper__item[aria-current="step"] { background: var(--brand-50); }
.vk-stepper__item[aria-current="step"] .vk-stepper__num { background: var(--brand-600); color: #fff; }
.vk-stepper__item.is-done .vk-stepper__num { background: var(--green-500); color: #fff; }

/* Timeline (contact activity, notifications) */
.vk-timeline { list-style: none; margin: 0; padding: 0; }
.vk-timeline li { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding: 0 0 20px; }
.vk-timeline li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--color-divider); }
.vk-timeline li:last-child::before { display: none; }
.vk-timeline__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-25); color: var(--color-text); }
.vk-timeline__dot svg { width: 14px; height: 14px; }
.vk-timeline time { font-size: 12px; color: var(--color-text-secondary); }

/* Stat card + chart card (dashboards). Chart colours: --chart-categorical-1..n tokens */
.vk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.vk-stat { padding: 16px 20px; background: var(--color-background-front); border-radius: 8px; display: grid; gap: 4px; }
.vk-stat__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-text-secondary); }
.vk-stat__value { font: 700 28px/36px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-stat__delta { font-size: 12px; font-weight: 600; color: var(--color-text-ok); } .vk-stat__delta.is-down { color: var(--color-text-error); }

/* Tree (jstree replacement) */
.vk-tree, .vk-tree ul { list-style: none; margin: 0; padding: 0; }
.vk-tree ul { padding-left: 24px; }
.vk-tree__node { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 8px; cursor: pointer; }
.vk-tree__node:hover { background: var(--color-background-front-hover); }
.vk-tree__node[aria-selected="true"] { background: var(--brand-50); font-weight: 600; }
.vk-tree__node .vk-caption { margin-left: auto; }

/* Login / account card (captured from the reference's login page, data/38): canvas page, logo above a 516px white card radius 12;
 * top section padding 24 48 (title 24/32 700 #2c3e4c, 14px description, 320px input + inline primary, gap 8);
 * divider; second section padding 16 48 centred; footer line 14px gap 24 under the card. */
.vk-auth { min-height: 100vh; display: grid; justify-items: center; align-content: start; padding: 10px 16px 24px; background: var(--color-background-back); }
.vk-auth__logo { height: 72px; width: 516px; max-width: 100%; display: flex; align-items: center; gap: 10px; font: 700 22px/28px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-auth__card { width: 516px; max-width: 100%; background: var(--color-background-front); border-radius: 12px; padding-top: 24px; overflow: hidden; }
.vk-auth__section { padding: 24px 48px; display: grid; gap: 10px; }
.vk-auth__section + .vk-auth__section { border-top: 1px solid var(--color-divider); padding: 16px 48px 24px; justify-items: center; text-align: center; }
/* Folding card (MEASURED on the reference login → "Set Up Passkeys", 390px + desktop): */
.vk-auth__form { padding-top: 16px; }
.vk-auth__alt { padding: 16px 48px 24px; display: grid; gap: 10px; justify-items: center; text-align: center; transition: padding var(--vk-motion-fold); }
.vk-fold:not(.is-open) > .vk-auth__alt { padding-top: 0; padding-bottom: 0; }
.vk-auth__modehead { display: flex; flex-direction: column; gap: 16px; padding: 0 48px 16px; }
.vk-auth__modehead .vk-auth__title + div { margin-top: 0; }
.vk-auth__title { margin: 0; font: 700 24px/32px "Open Sans", sans-serif; color: var(--color-text); }
.vk-auth__row { display: flex; gap: 8px; } .vk-auth__row .vk-field { flex: 1; }
.vk-auth__legal { text-align: center; font-size: 14px; }
.vk-auth__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 24px; font-size: 14px; color: var(--color-text-emphasis); }
.vk-auth__go svg { display: none; }                                        /* desktop: "Continue" text pill */
/* Phone (MEASURED 390px): the email field stays INLINE; "Continue" becomes a 40px round arrow button (grey #cdd1d7 until valid).
 * Card 7px from the screen edges, content inset 24 (was 48); the passkey picture hides; logo + card centred, footer at the bottom. */
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-auth { display: flex; flex-direction: column; min-height: 100dvh; padding: 0 7px 16px; }
  .vk-auth__logo { margin-top: auto; padding-left: 3px; }
  .vk-auth__section, .vk-auth__section + .vk-auth__section, .vk-auth__modehead { padding-left: 24px; padding-right: 24px; }
  .vk-auth__go { width: 40px; padding: 10px; justify-content: center; flex: 0 0 40px; }
  .vk-auth__go svg { display: block; } .vk-auth__go .vk-auth__go-label { display: none; }
  .vk-auth__art { display: none; }
  .vk-auth__foot { margin-top: auto; padding-top: 24px; flex-direction: column; align-items: center; gap: 4px; }
}

/* Notification panel (top-bar notifications -> rail bell flyout) */
.vk-notes { width: 380px; max-height: 70vh; overflow: auto; }
.vk-note { display: grid; grid-template-columns: 8px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--color-divider); }
.vk-note.is-unread::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--brand-600); margin-top: 6px; }
.vk-note:not(.is-unread)::before { content: ""; }
/* Rich text editor chrome (TinyMCE skin target): toolbar row of 32px ghost icon buttons in a field-styled box */
.vk-editor { border: 1px solid var(--field-color-border); border-radius: 8px; overflow: hidden; background: var(--color-background-front); }
.vk-editor__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--color-divider); background: var(--color-background-back); }
.vk-editor__body { min-height: 180px; padding: 12px 16px; font-size: 16px; line-height: 24px; color: var(--color-text-emphasis); outline: 0; }

/* Bulk-mode helpers (vk.js sets .is-bulk on the [data-vk-bulk] scope when any row is ticked) */
[data-vk-bulk]:not(.is-bulk) .vk-bulk-only { display: none !important; }
[data-vk-bulk].is-bulk .vk-bulk-hide { display: none !important; }
[hidden]:not(.vk-launcher):not(.vk-flyout):not(.vk-notes):not(.vk-withpanel > .vk-filter) { display: none !important; }   /* the launcher and notifications fade, the flyout and filter panel slide instead (see their [hidden] rules); the app's Bootstrap copy leaves [hidden] to this rule */

/* ======================================================================================================
 * MEDIA INDEX + DETAIL PAGE (MEASURED live 26 Oct on the reference; data/39-40). Same markup serves phone.
 * ==================================================================================================== */
/* Page head strip used by these pages: 40 tall, margin 12 24, gap 10; title 20/28 700; search pill max 278; actions inline. */
.vk-headstrip { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 12px 0; }
.vk-headstrip .vk-h1 { white-space: nowrap; }
.vk-pillsearch { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 278px; height: 40px; border: 1px solid var(--color-input-border); border-radius: 99999px; color: var(--color-text-emphasis); }
.vk-pillsearch svg { flex: 0 0 24px; margin-left: 7px; }
.vk-pillsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/19px "Open Sans", sans-serif; color: inherit; padding-right: 12px; }
.vk-pillsearch:focus-within { outline: 2px solid var(--color-focus); outline-offset: -1px; }
/* Dot filter buttons ("● Active  ● Closed"): 36 tall, padding 8, gap 8, 10px dot, 14/20 400 label */
.vk-dotfilter { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 8px; border: 0; border-radius: 99999px; background: transparent; color: var(--button-tertiary-color-text); font: 400 14px/20px "Open Sans", sans-serif; cursor: pointer; }
.vk-dotfilter:hover { background: var(--color-background-front-hover); }
.vk-dotfilter[aria-pressed="false"] { opacity: .5; }
.vk-dotfilter::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--neutral-600)); }
.vk-dotfilter--ok { --dot: var(--green-600); }                       /* #249c69 */

/* Raised table card (index pages): white, radius 12, 2-layer soft shadow; header #e6eaee 12/600; cells 14 20 */
.vk-table.vk-table--raised { box-shadow: rgba(0,0,0,.12) 0 2px 1px -1px, rgba(0,0,0,.2) 0 1px 3px 0; }
.vk-table.vk-table--compact th { height: 37px; padding: 10px 20px; background: light-dark(#e6eaee, #24282e); }
.vk-table.vk-table--compact td { height: auto; padding: 14px 20px; }
/* Media cell: 120x80 thumb (radius 8, placeholder #e6eaee + 24px #b0b6be icon) + 20 gap + title stack (16/700 over 12/16, gap 5) */
.vk-media { display: flex; gap: 20px; }
.vk-media__thumb { flex: 0 0 120px; width: 120px; height: 80px; border-radius: 8px; overflow: hidden; background: light-dark(#e6eaee, #313640); color: var(--neutral-200); display: grid; place-items: center; }
.vk-media__thumb > img, .vk-media__thumb > svg.vk-media__art { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-media__thumb > svg:not(.vk-media__art) { width: 24px; height: 24px; }
.vk-media__text { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.vk-media__title { font: 700 16px/24px "Open Sans", sans-serif; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-media__sub { font: 400 12px/16px "Open Sans", sans-serif; color: var(--color-text); }
.vk-table--raised tbody tr[data-href] { cursor: pointer; }
/* Status pill in tables: 24 tall, padding 0 10, radius 6, 12/600; Active = #52d393 (green-300) */
.vk-statuspill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font: 600 12px/16px "Open Sans", sans-serif; color: #2c3e4c; background: var(--neutral-100); white-space: nowrap; }
.vk-statuspill--ok { background: var(--green-300); }
/* Two-line cell (detail tables): 14/20 over 12/16, gap 5; --strong makes the first line 600 */
.vk-cell2 { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vk-cell2 > :first-child { font: 400 14px/20px "Open Sans", sans-serif; }
.vk-cell2--strong > :first-child { font-weight: 600; }
.vk-cell2 > :last-child { font: 400 12px/16px "Open Sans", sans-serif; }

/* Detail page: back circle · title 20/40 · spacer · grey tag · primary pill · outline pill · ⋯ circle; body centred max 900, gap 20 */
.vk-detailhead { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 12px 0; }
.vk-detailhead__title { margin: 0; flex: 0 1 auto; min-width: 0; font: 700 20px/40px "Open Sans", sans-serif; color: var(--color-text-emphasis); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-detailhead__spacer { flex: 1; }
.vk-tag { display: inline-flex; align-items: center; padding: 1px 3px; border-radius: 3px; background: var(--neutral-100); color: var(--neutral-700); font: 600 10px/12px "Open Sans", sans-serif; }   /* "Beta" */
.vk-detailbody { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.vk-detailsection { display: flex; flex-direction: column; gap: 10px; }
.vk-sectiontitle { margin: 0; font: 700 18px/24px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
/* Fixed-width tabs: 100 wide, padding 10, 14/600 emphasis; selected = 2px #bfc5cd underline (grey, not blue) */
.vk-tabsrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vk-ftabs { display: flex; padding: 5px; }
.vk-ftab { display: flex; align-items: center; justify-content: center; min-width: 100px; height: 40px; padding: 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text-emphasis); font: 600 14px/20px "Open Sans", sans-serif; text-decoration: none; cursor: pointer; }
.vk-ftab[aria-selected="true"] { border-bottom-color: var(--color-input-border); }
.vk-ftab:hover { background: var(--color-background-front-hover); }
.vk-tabselect { display: none; }
.vk-checkline { display: inline-flex; align-items: center; gap: 10px; font: 400 14px/20px "Open Sans", sans-serif; color: var(--color-text-emphasis); cursor: pointer; }
/* Inset table inside a detail body: 20px side inset, no shadow (1px ring) */
.vk-insettable { padding: 0 20px; }
.vk-insettable .vk-table { box-shadow: 0 0 0 1px var(--color-divider); }
.vk-footnote { display: flex; justify-content: center; padding: 12px 16px; text-align: center; font: 400 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); }

/* ---- Phone (<=500): MEASURED on the reference 390px ----
 * Media index: rows become white cards (radius 8, padding 15, 10 apart, 12 from the edges): title 16/700, then
 * owner 12/600 #536573 | 2px divider | grey UPPERCASE status tag (radius 4), description 12/16; thumb 120x80 on the right.
 * Detail: back + ⋯ on the first row, title below; tabs become an outline pill select; actions other than ⋯ hide. */
@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {
  .vk-headstrip { flex-wrap: wrap; margin: 12px; }
  .vk-headstrip .vk-h1, .vk-headstrip .vk-dotfilter, .vk-headstrip .vk-hide-m { display: none; }
  .vk-pillsearch { max-width: none; flex: 1; }
  .vk-table.vk-table--media { display: block; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .vk-table.vk-table--media thead { display: none; }
  .vk-table.vk-table--media tbody { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }
  .vk-table.vk-table--media tbody tr { display: grid; grid-template-columns: auto auto minmax(0,1fr) 120px; grid-template-areas: "t t t t" "o s . p" "d d d p"; grid-template-rows: auto auto 1fr; column-gap: 7px; row-gap: 0;
    padding: 15px; border: 0; border-radius: 8px; background: var(--color-background-front); }
  .vk-table.vk-table--media tbody tr:hover { background: var(--color-background-front); }
  .vk-table.vk-table--media tbody td { display: contents; }
  .vk-table.vk-table--media .vk-media { display: contents; }
  .vk-table.vk-table--media .vk-media__text { display: contents; }
  .vk-table.vk-table--media .vk-media__title { grid-area: t; margin-bottom: 20px; white-space: normal; }
  .vk-table.vk-table--media .vk-media__thumb { grid-area: p; margin-left: 9px; }
  .vk-table.vk-table--media .vk-media__sub { grid-area: d; align-self: start; margin-top: 16px; }
  .vk-table.vk-table--media .vk-m-owner { grid-area: o; align-self: start; display: flex; align-items: center; gap: 7px; font: 600 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); white-space: nowrap; }
  .vk-table.vk-table--media .vk-m-owner::after { content: ""; width: 2px; height: 13px; background: var(--color-divider); }
  .vk-table.vk-table--media .vk-statuspill { grid-area: s; align-self: start; height: 18px; padding: 0 5px; border-radius: 4px; background: light-dark(#e6eaee, #313640); color: var(--color-text); text-transform: uppercase; justify-self: start; }
  .vk-table.vk-table--media .vk-m-hide { display: none; }

  .vk-detailhead { flex-wrap: wrap; margin: 12px; }
  .vk-detailhead__title { order: 2; flex-basis: 100%; white-space: normal; line-height: 28px; margin-top: 12px; }
  .vk-detailhead .vk-hide-m, .vk-detailhead .vk-tag { display: none; }
  .vk-detailbody { padding: 0 12px 12px; }
  .vk-ftabs { display: none; }
  .vk-tabselect { display: inline-block; height: 40px; padding: 0 40px 0 16px; border: 1px solid var(--button-secondary-color-border); border-radius: 99999px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232c3e4c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; appearance: none; font: 600 14px/20px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
  .vk-tabsrow .vk-checkline { display: none; }
  .vk-insettable { padding: 0; }
  .vk-insettable .vk-table thead { display: none; }
  .vk-insettable .vk-table tbody tr { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
  .vk-insettable .vk-table tbody td { display: block; height: auto; padding: 0; border: 0; }
}

/* ---- Fold (MEASURED on the reference's login card): a block that folds open/shut by animating its height.
 *   .vk-fold { grid-template-rows: 0fr→1fr; visibility; 500ms ease }  > .vk-fold__inner { overflow hidden; min-height 0 }
 * Content is CLIPPED as the row grows/shrinks (no fade, no slide), so several folds changing at once read as one
 * smooth "the page folds down and changes". A centred parent glides with it for free. Hidden folds are visibility:hidden
 * (not focusable). Drive with vk.js: [data-vk-modes] container, [data-vk-fold="modeA modeB"] blocks ("default" = no mode),
 * [data-vk-mode="name"] buttons ("" = back to default). */
.vk-fold { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--vk-motion-fold), visibility var(--vk-motion-fold); }
.vk-fold.is-open { grid-template-rows: 1fr; visibility: inherit; }   /* inherit, not visible: an open fold inside a hidden panel (filters, flyout) stays hidden */
/* Inside a hidden panel nothing transitions: its content goes with it at once (an open fold's or a button's own visibility fade would
 * otherwise leave it showing for a moment after the panel has gone). The panel itself keeps its own fade or slide. */
[hidden] * { transition: none !important; }
.vk-fold > .vk-fold__inner { overflow: hidden; min-height: 0; }
.vk-fold--divided { border-top: 1px solid var(--color-divider); }
@media (prefers-reduced-motion: reduce) { .vk-fold, .vk-auth__alt, .vk-withpanel { transition: none; } .vk-filter, .vk-filter > .vk-filter__body { animation: none; } }

/* ---- Full-window horizontal stepper wizard (MEASURED on the reference's "Create Floor Plan", 27 Oct; 08-wizards §D, data/41-64).
 * A <dialog class="vk-modal vk-fullwin" data-vk-hwizard> filling the window: 80px header (title · 120px-column stepper · X),
 * step panels, per-step footer. The reference switches steps instantly; per Rule 0 ours SLIDE (.vk-hpanel, --vk-motion-swap).
 * The reference does not adapt this flow to phones (X off-screen at 390px): the <=500px layer below is OURS (composed). */
.vk-fullwin .vk-fullwin__panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--color-background-front);
  box-shadow: 0 3px 15px rgba(0,0,0,.2); color: var(--color-text-primary); animation: vk-fade-in .3s ease; }        /* open: opacity 0→1, 300ms ease (measured) */
.vk-fullwin::backdrop { background: transparent; }
@keyframes vk-fade-in { from { opacity: 0; } to { opacity: 1; } }
.vk-fullwin__head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 80px; padding: 0 30px;
  border-bottom: 1px solid var(--color-divider); }
.vk-fullwin__title { margin: 0; font: 700 20px/28px "Open Sans", sans-serif; color: var(--color-text-emphasis); white-space: nowrap; }
.vk-fullwin__close { justify-self: end; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--color-text-emphasis); cursor: pointer; }
.vk-fullwin__close svg { width: 26px; height: 26px; }
.vk-fullwin__close:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 99999px; }
.vk-fullwin__count { display: none; }

.vk-hsteps { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.vk-hstep { position: relative; width: 120px; height: 58px; text-align: center; cursor: default; }
.vk-hstep__dot { position: absolute; top: 0; left: 50px; display: flex; align-items: center; }           /* dot + connector row */
.vk-hstep__dot > span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--color-background-front-shade); color: var(--color-text-secondary); transition: background var(--vk-motion-hover), color var(--vk-motion-hover); }
.vk-hstep__dot > span svg { width: 16px; height: 16px; }
.vk-hstep:not(:last-child) .vk-hstep__dot::after { content: ""; width: 100px; border-top: 1px solid var(--color-divider); }   /* never fills */
.vk-hstep__label { display: block; padding-top: 25px; font: 600 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); transition: color var(--vk-motion-hover); }
.vk-hstep.is-done .vk-hstep__dot > span, .vk-hstep[aria-current="step"] .vk-hstep__dot > span { background: var(--color-text-emphasis); color: var(--color-background-front); }
.vk-hstep[aria-current="step"] .vk-hstep__label { color: var(--color-text-emphasis); }                  /* only the current label is dark */
.vk-hstep.is-done { cursor: pointer; }                                                                   /* done steps jump back */
.vk-hsteps__bar { display: none; }

.vk-fullwin__steps { position: relative; flex: 1; overflow: hidden; }
.vk-hpanel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: auto; padding: 20px;
  transform: translateX(100%); visibility: hidden; transition: transform var(--vk-motion-swap), visibility 0s linear .35s; }
.vk-hpanel.is-before { transform: translateX(-100%); }
.vk-hpanel.is-current { transform: none; visibility: visible; transition: transform var(--vk-motion-swap), visibility 0s; }
.vk-hpanel--bleed { padding: 0; }
.vk-hpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 8px; }
.vk-hpanel__title { margin: 0; font: 600 16px/24px "Open Sans", sans-serif; color: var(--color-text-primary); }
.vk-hpanel__body { flex: 1; min-height: 0; }
.vk-hpanel__foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 60px; padding: 0 20px; border-top: 1px solid var(--color-divider); }
.vk-hpanel--bleed .vk-hpanel__foot { justify-content: center; }
.vk-textbtn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 4px; background: none; font: 600 14px/20px "Open Sans", sans-serif; color: var(--brand-600); cursor: pointer; white-space: nowrap; }
.vk-textbtn:disabled { color: var(--color-text-secondary); opacity: .6; cursor: default; }

/* tree of groups (building) → items (floor): 40px rows, guide line, select = brand-50, hover = hover grey */
.vk-ptree__group { display: flex; align-items: center; gap: 8px; height: 40px; margin: 4px 0; padding: 0 12px; border-radius: 2px; font: 400 16px/24px "Open Sans", sans-serif; transition: background var(--vk-motion-hover); }
.vk-ptree__group > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-ptree__group:hover, .vk-ptree__group.is-open { background: var(--color-background-hover); }
.vk-ptree__group.has-selected { background: var(--brand-50); }
.vk-ptree__group .vk-textbtn { opacity: 0; transition: opacity var(--vk-motion-hover); }
.vk-ptree__group:hover .vk-textbtn, .vk-ptree__group.is-open .vk-textbtn { opacity: 1; }
.vk-ptree__chev { transition: transform var(--vk-motion-hover); }
.vk-ptree__group.is-open .vk-ptree__chev { transform: rotate(180deg); }
.vk-ptree__items { margin-left: 21px; padding: 4px 0 4px 12px; border-left: 1px solid var(--color-divider); }
.vk-ptree__item { display: flex; align-items: center; gap: 2px; height: 40px; padding-left: 4px; border-radius: 2px; cursor: pointer; font: 400 16px/24px "Open Sans", sans-serif; transition: background var(--vk-motion-hover); }
.vk-ptree__item > span:not(.vk-ptree__grip) { flex: 1; }
.vk-ptree__item:hover { background: var(--color-background-hover); }
.vk-ptree__item[aria-selected="true"] { background: var(--brand-50); }
.vk-ptree__grip { flex: none; display: grid; place-items: center; width: 22px; color: var(--color-text-secondary); opacity: 0; cursor: grab; }
.vk-ptree__item:hover .vk-ptree__grip, .vk-ptree__item--edit .vk-ptree__grip { opacity: 1; }
.vk-ptree__del { margin-right: 12px; width: 32px; height: 32px; padding: 7px; border: 1px solid var(--color-text-error); border-radius: 99999px; background: none; color: var(--color-text-error); opacity: 0; cursor: pointer; }
.vk-ptree__item:hover .vk-ptree__del { opacity: 1; }
.vk-ptree__item--edit { cursor: default; gap: 6px; }
.vk-ptree__item--edit:hover { background: none; }
.vk-ptree__item--edit input { flex: 1; height: 37px; padding: 7px 12px; border: 1px solid var(--color-input-border); border-radius: 8px; background: transparent; font: 400 14px/21px "Open Sans", sans-serif; color: var(--color-text-emphasis); }
.vk-ptree__item--edit input:focus { border-color: var(--brand-600); outline: 1px solid var(--brand-600); }
.vk-splitpill { display: inline-flex; margin-right: 6px; }
.vk-splitpill button { width: 32px; height: 32px; padding: 7px; border: 1px solid var(--button-secondary-color-border); background: none; color: var(--color-text-primary); cursor: pointer; }
.vk-splitpill button:first-child { border-radius: 99999px 0 0 99999px; }
.vk-splitpill button:last-child { border-radius: 0 99999px 99999px 0; margin-left: -1px; }
.vk-splitpill button:disabled { color: var(--neutral-200); cursor: default; }

/* steps 2-4: centred 500px card (the reference's is old cyan styling; ours keeps the layout, uses our pills) */
.vk-stepcard { width: 500px; max-width: 100%; margin: 20px auto 0; border: 1px solid var(--color-divider); border-radius: 6px; overflow: hidden; }
.vk-stepcard__title { margin: 0; padding: 20px 32px; font: 400 20px/28px "Open Sans", sans-serif; color: var(--color-text-primary); }
.vk-stepcard__body { padding: 0 32px 24px; display: grid; gap: 16px; justify-items: start; }
.vk-stepcard__media { position: relative; height: 350px; background: var(--color-background-back); display: grid; place-items: center; }
.vk-stepcard__file { display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; font-weight: 600; }
.vk-stepcard + .vk-stepcard__next { display: flex; width: 500px; max-width: 100%; margin: 16px auto 0; justify-content: flex-end; }
.vk-mapsearch { position: absolute; left: 25px; right: 63px; bottom: 50px; height: 30px; padding: 0 12px; border: 0; border-radius: 2px; background: var(--color-background-front); box-shadow: 0 1px 4px -1px rgba(0,0,0,.3); font: 400 14px "Open Sans", sans-serif; color: var(--color-text-primary); }
.vk-zoompill { position: absolute; top: 10px; left: 10px; display: grid; width: 40px; border-radius: 40px; background: #030e16; color: #fff; }
.vk-zoompill button { height: 40px; border: 0; background: none; color: inherit; cursor: pointer; }
.vk-placeframe { position: absolute; border: 2px dashed var(--brand-600); }
.vk-placeframe i { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--brand-600); border-radius: 50%; background: #fff; }
.vk-placeframe i:nth-child(1) { top: -7px; left: -7px; } .vk-placeframe i:nth-child(2) { top: -7px; right: -7px; }
.vk-placeframe i:nth-child(3) { bottom: -7px; left: -7px; } .vk-placeframe i:nth-child(4) { bottom: -7px; right: -7px; }
.vk-spinner { width: 40px; height: 40px; border: 3px solid var(--brand-50); border-top-color: var(--brand-600); border-radius: 50%; animation: vk-spin 1.4s linear infinite; }   /* 1.4s linear (measured) */
@keyframes vk-spin { to { transform: rotate(360deg); } }

@media (max-width: 500px), (max-height: 500px) and (orientation: landscape) {   /* COMPOSED: The reference leaves this flow broken on phones */
  .vk-fullwin__head { grid-template-columns: 1fr auto; grid-template-rows: 56px auto; height: auto; padding: 0 8px 12px 16px; row-gap: 0; }
  .vk-fullwin__title { font-size: 18px; }
  .vk-fullwin__close { grid-column: 2; grid-row: 1; width: 40px; height: 40px; display: grid; place-items: center; }
  .vk-fullwin__head .vk-hsteps { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(var(--_n, 4), 1fr); gap: 4px; padding-right: 8px; }
  .vk-hstep { width: auto; height: 4px; border-radius: 2px; background: var(--color-background-front-shade); transition: background var(--vk-motion-hover); }
  .vk-hstep.is-done, .vk-hstep[aria-current="step"] { background: var(--color-text-emphasis); }
  .vk-hstep__dot, .vk-hstep__label { display: none; }
  .vk-fullwin__count { display: block; grid-column: 1 / -1; grid-row: 3; margin-top: 8px; font: 600 12px/16px "Open Sans", sans-serif; color: var(--color-text-secondary); }
  .vk-hpanel { padding: 16px; }
  .vk-hpanel--bleed { padding: 0; }
  .vk-hpanel__foot { position: sticky; bottom: 0; margin: auto -16px -16px; padding: 12px 16px; height: auto; background: var(--color-background-front); }
  .vk-hpanel--bleed .vk-hpanel__foot { margin: 0; }
  .vk-hpanel__foot .vk-btn { flex: 1; justify-content: center; }
  .vk-ptree__del, .vk-ptree__grip, .vk-ptree__group .vk-textbtn { opacity: 1; }     /* no hover on touch (as the reference) */
  .vk-ptree__group .vk-textbtn span { display: none; }                                /* actions → icons only */
  .vk-stepcard { margin-top: 0; }
  .vk-stepcard__title { padding: 16px; } .vk-stepcard__body { padding: 0 16px 16px; } .vk-stepcard__file { padding: 16px; }
  .vk-stepcard__media { height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .vk-hpanel, .vk-hpanel.is-current, .vk-fullwin .vk-fullwin__panel { transition: none; animation: none; } }