.vika {
    --accent: #7b67ee;
    --accent-soft: #efecff;
    --ink: #1a1a1f;
    --ink-2: #5f5f68;
    --ink-3: #9a9aa3;
    --ink-4: #bcbcc4;
    --paper: #ffffff;
    --grouped: #f2f2f6;
    --grouped-2: #e8e8ee;
    --ground: #f7f7fa;
    --line: #e2e2e8;
    --line-soft: #ececf1;
    --radius-card: 10px;
    --radius-row: 10px;
    --btn-r: 10px;
    --btn-h: 46px;
    --btn-h-sm: 34px;
    --btn-pad: 16px;
    --btn-pad-bar: 12px;
    --btn-icon: 42px;
    --btn-min: 88px;
    background: var(--grouped);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  }

  /* Page ground. The record, automation, flow and datasheet-list screens used to
     sit on `--grouped` (#f2f2f6) with white cards floating on it, which read a
     step too deep next to the white screens they share a slide with. They now sit
     on one light neutral ground: lighter than `--grouped`, and deliberately not
     paper, so the phone edge still separates from the deck's white slide. The
     datasheet and the comment drawer keep `--paper` - a spreadsheet page and a
     drawer sheet are paper surfaces, and greying them is what made the first
     phone on the mobile-app slide read as the odd one out. Surfaces that were
     white cards keep `--paper` and read against the ground; list rows stay
     carried by their inset hairlines. */
  #vk-tables,
  #vk-record,
  #vk-record-comments,
  #vk-automation,
  #vk-flow,
  #vk-flow-config { background: var(--ground); }

  /* The four first-run wizard screens are paper, like the first-run home they
     share the entry row with. They were the last screens left on the full
     `--grouped` field, which made the wizard the only grey phone in a row of
     white ones. */
  #vk-wizard-1,
  #vk-wizard-2,
  #vk-wizard-3,
  #vk-wizard-4 { background: var(--paper); }

  .vika .signout { margin-top: 16px; }
  .vika .authhero .logolockup { display: flex; align-items: center; justify-content: center; }
  .vika .authhero h1 { margin-top: 22px; }

  .vika .card { background: var(--paper); }
  .vika .panel { background: var(--paper); }
  .vika .editor { background: var(--paper); }
  .vika .enablerow { background: var(--paper); }
  .vika .field { background: var(--paper); }
  .vika .mini { border: 0; }
  .vika .thumb { background: var(--grouped-2); }

  .vika .muted { color: var(--ink-3); }

  /* labels: sentence-free, wide-tracked upper case */
  .vika .grouphead {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .vika .section h3 {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* tags */
  .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 500; white-space: nowrap; }
  .tag.progress { background: #e9f0ff; color: #2f6bff; }
  .tag.review { background: #fdf1dd; color: #a9720f; }
  .tag.done { background: #e6f5ec; color: #1c8a4c; }
  .tag.blocked { background: #fdeaea; color: #c43b3b; }
  .tag.neutral { background: var(--grouped-2); color: var(--ink-2); }

  /* list primitives */
  .brow { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 11px; align-items: center; padding: 11px 15px; }
  .brow + .brow::before { position: absolute; top: 0; right: 15px; left: 15px; height: 1px; background: var(--line-soft); content: ''; }
  .brow .bt { font-size: 14px; font-weight: 500; letter-spacing: -0.008em; }
  .brow .bm { margin-top: 2px; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .brow .ctail { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
  .thumb { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--grouped-2); color: var(--ink-2); }
  .thumb.photo { border-radius: 50%; }
  .chev { display: flex; align-items: center; color: var(--ink-4); }

  .btn { font-size: 15px; }
  .btn.primary { color: #fff; }

  /* bottom tab bar */
  .tabbar {
    position: absolute; z-index: 3; right: 0; bottom: 34px; left: 0;
    display: flex; align-items: stretch; justify-content: space-around;
    height: 56px; padding-top: 6px;
    border-top: 1px solid rgba(60, 60, 67, 0.16);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .tabbar + .home {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .tabbar a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 6px; color: var(--ink-3); font-size: 10px; font-weight: 400; letter-spacing: 0; }
  .tabbar a svg { display: block; }
  .tabbar a.on { color: var(--accent); }

  /* keep the last list row clear of the glass tab bar */
  #vk-spaces .grouphead.space { padding-top: 8px; }

  /* ── table view ─────────────────────────────────────────── */
  .viewbar { display: flex; flex: none; align-items: center; gap: 8px; padding: 0 15px 12px; }
  .viewbar .chip { flex: none; height: 29px; border-radius: 8px; }
  .viewbar .chip.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

  .thead,
  .trow { display: grid; grid-template-columns: 18px minmax(0, 1fr) 96px 60px; column-gap: 8px; align-items: center; padding: 0 15px; }
  .thead { flex: none; height: 32px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
  .trow { position: relative; flex: none; height: 44px; background: var(--paper); }
  .trow + .trow::before { position: absolute; top: 0; right: 15px; left: 15px; height: 1px; background: var(--line-soft); content: ''; }
  .trow .tn { color: var(--ink-4); font-size: 11px; font-variant-numeric: tabular-nums; }
  .trow .tt { overflow: hidden; font-size: 13.5px; font-weight: 500; letter-spacing: -0.008em; text-overflow: ellipsis; white-space: nowrap; }
  .trow .td { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
  .tblfoot { display: flex; flex: none; align-items: baseline; justify-content: space-between; padding: 13px 20px 0; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }

  /* ── record detail ──────────────────────────────────────── */
  .rec-title { flex: none; padding: 2px 20px 14px; font-size: 22px; font-weight: 600; letter-spacing: -0.024em; line-height: 1.28; }
  .rec-meta { margin-top: 7px; color: var(--ink-3); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
  #vk-record .recpager { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 6px 10px 0; }
  #vk-record .recpager .pgp { display: flex; align-items: center; gap: 1px; height: 40px; padding: 0 10px; border-radius: 9px; color: var(--accent); font-size: 13.5px; letter-spacing: -0.008em; }
  #vk-record .recpager .pgp svg { display: block; }
  #vk-record .recpager .pgp.next { flex-direction: row; }
  #vk-record .recpager .pgc { color: var(--ink-4); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .frow { position: relative; display: grid; grid-template-columns: 20px 72px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 48px; padding: 7px 15px; }
  .frow + .frow::before { position: absolute; top: 0; right: 15px; left: 15px; height: 1px; background: var(--line-soft); content: ''; }
  .frow .fl { display: flex; align-items: center; justify-content: center; color: var(--ink-4); }
  .frow .fk { color: var(--ink-3); font-size: 12.5px; }
  .frow .fv { font-size: 13.5px; letter-spacing: -0.008em; }
  .people { display: flex; align-items: center; gap: 7px; }
  .pav { display: flex; flex: none; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: var(--grouped-2); color: var(--ink-2); font-size: 10.5px; }
  .files { display: flex; flex-wrap: wrap; gap: 7px; }
  .file { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; background: var(--grouped-2); color: var(--ink-2); font-size: 12px; }

  .cmt { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 0 20px; }
  .cmt + .cmt { margin-top: 16px; }
  .cmt .who { font-size: 12.5px; font-weight: 500; }
  .cmt .when { margin-left: 6px; color: var(--ink-4); font-size: 11px; font-variant-numeric: tabular-nums; }
  .cmt .body { margin-top: 4px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }

  .composer { display: flex; flex: none; align-items: center; gap: 10px; padding: 12px 15px 0; }
  .composer .field { flex: 1; height: 42px; border-radius: 21px; }


  /* ── bottom sheet ───────────────────────────────────────── */
  .backdrop { position: absolute; z-index: 3; inset: 0; background: rgba(26, 26, 31, 0.32); }
  .sheet { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; border-radius: 18px 18px 0 0; background: var(--paper); box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.16); }
  .grabber { display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--grouped-2); }
  .sheet h2 { padding: 14px 20px 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
  .opt { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 14.5px; letter-spacing: -0.008em; }
  .opt .tick { display: flex; margin-left: auto; color: var(--accent); }

  /* ── automation ─────────────────────────────────────────── */
  .enablerow { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; margin: 0 15px 14px; padding: 12px 15px; border-radius: 10px; }
  .enablerow .et { font-size: 13.5px; font-weight: 500; letter-spacing: -0.008em; }
  .enablerow .em { margin-top: 2px; color: var(--ink-3); font-size: 11.5px; }

  .canvas { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; padding: 14px 15px 0; }
  .node { flex: none; padding: 12px 14px 13px; border-radius: 10px; background: var(--paper); }
  .node .hd { display: flex; align-items: center; gap: 8px; }
  .node .nt { font-size: 14px; font-weight: 500; letter-spacing: -0.008em; }
  .node .nm { margin-top: 5px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
  .node .nm span { display: block; }
  .badge { display: inline-flex; flex: none; align-items: center; height: 19px; padding: 0 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
  .badge.cond { background: #fdf1dd; color: #a9720f; }
  .badge.act { background: #e6f5ec; color: #1c8a4c; }
  .link { display: flex; flex: none; flex-direction: column; align-items: center; padding: 5px 0; color: var(--ink-4); }
  .link i { width: 2px; height: 12px; background: var(--line); }
  .addstep { display: flex; flex: none; align-items: center; justify-content: center; gap: 7px; height: 44px; border: 1px dashed #d3d3dd; border-radius: 10px; color: var(--ink-3); font-size: 13px; }

  .editor { border-radius: 10px; padding: 13px 14px; }
  .editor p { font-size: 13.5px; line-height: 1.55; }
  .editor .efoot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; color: var(--ink-4); font-size: 11.5px; }

  /* ── copilot ────────────────────────────────────────────── */
  .mini { border-radius: 10px; background: var(--paper); overflow: hidden; }
  .mini .mh,
  .mini .mr { display: grid; grid-template-columns: minmax(0, 1fr) 84px; column-gap: 8px; align-items: center; height: 36px; padding: 0 13px; }
  .mini .mh { height: 32px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
  .mini .mr { position: relative; font-size: 12.5px; }
  .mini .mr + .mr::before { position: absolute; top: 0; right: 13px; left: 13px; height: 1px; background: var(--line-soft); content: ''; }

  /* ── overview ───────────────────────────────────────── */
  .dash { padding: 0 15px; }
  .hero { padding: 15px 15px 17px; }
  .hero .hl { color: var(--ink-3); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
  .hero .hv { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
  .hero .hv b { font-size: 31px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .hero .hv span { color: #1c8a4c; font-size: 12.5px; }
  .chart { display: flex; align-items: flex-end; gap: 12px; height: 84px; margin-top: 18px; }
  .chart .col { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 2px; }
  .chart .seg { display: block; border-radius: 3px; }
  .chart .seg.done { background: var(--accent); }
  .chart .seg.prog { background: #c5b9f9; }
  .chart .seg.over { background: #f2bdb5; }
  .legend { display: flex; gap: 16px; margin-top: 15px; color: var(--ink-3); font-size: 11.5px; }
  .legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 3px; }
  .legend i.done { background: var(--accent); }
  .legend i.prog { background: #c5b9f9; }
  .legend i.over { background: #f2bdb5; }
  .trowd { position: relative; padding: 11px 15px 12px; }
  .trowd + .trowd::before { position: absolute; top: 0; right: 15px; left: 15px; height: 1px; background: var(--line-soft); content: ''; }
  .trowd .tl { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .trowd .tl b { font-size: 13.5px; font-weight: 500; letter-spacing: -0.008em; }
  .trowd .tl > span:last-child { flex: none; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
  .mbar { height: 5px; margin-top: 8px; border-radius: 3px; background: var(--grouped-2); }
  .mbar i { display: block; height: 5px; border-radius: 3px; background: var(--accent); }
  .owners { display: flex; padding: 14px 15px; }
  .ow { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 5px; }
  .ow .pav { width: 30px; height: 30px; font-size: 11px; }
  .ow b { font-size: 12.5px; font-weight: 500; letter-spacing: -0.006em; }
  .ow > span:last-child { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }

  .dot[data-state='new'] { background: var(--accent); }


  /* ── auth — sign in / sign up / create space ─────────────── */
  /* One shell for all three screens and one radius family. The brand
     block, the title and the form start at the same y on every screen
     whatever sits above them, so paging sign in -> sign up -> create
     space never moves the logo. Controls share two radii: a field, a
     primary action and a chip use --radius-card (10px); a control that
     sits inside a field, like Send code, steps down to 8px; the
     checkbox is the one 5px square. Inputs are filled, never outlined,
     which is how the Vika app draws them (#F5F7FA, no border). */
  .vk-auth { background: #fff; }

  .vk-auth .vkmain { display: flex; flex: 1; min-height: 0; flex-direction: column; justify-content: flex-start; padding: 64px 24px 0; }
  .vk-auth .navbar + .vkmain { padding-top: 20px; }

  .vk-auth .vkbrand { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 14px; }
  .vk-auth .logolockup { display: flex; flex: none; align-items: center; }
  .vk-auth .logolockup svg { display: block; }
  .vk-auth .vkbrand p { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; letter-spacing: -0.004em; }

  .vk-auth h1 { margin-top: 26px; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
  .vk-auth .vksub { margin-top: 8px; color: var(--ink-2); font-size: 13px; line-height: 1.5; letter-spacing: -0.004em; }

  .vk-auth .vktabs { display: flex; flex: none; gap: 24px; margin-top: 20px; }
  .vk-auth .vktab { position: relative; padding-bottom: 8px; color: var(--ink-3); font-size: 13px; }
  .vk-auth .vktab.on { color: var(--accent); }
  .vk-auth .vktab.on::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: 1px; background: var(--accent); content: ''; }

  .vk-auth .vkform { display: flex; flex: none; flex-direction: column; margin-top: 18px; }
  .vk-auth h1 + .vkform { margin-top: 24px; }
  .vk-auth .vksub + .vkform { margin-top: 22px; }
  .vk-auth .vkform .vkfield + .vkfield { margin-top: 10px; }

  .vk-auth .vkfield {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--grouped);
  }
  .vk-auth .vkccty { display: flex; align-items: center; gap: 3px; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
  .vk-auth .vkccty svg { color: var(--ink-3); }
  .vk-auth .vkvline { width: 1px; height: 16px; background: rgba(26, 26, 31, 0.12); }
  .vk-auth .vkholder { color: var(--ink-3); font-size: 14px; }
  .vk-auth .vkdots { color: var(--ink); font-size: 14px; letter-spacing: 0.08em; }
  .vk-auth .vknote { margin-left: auto; color: var(--ink-3); font-size: 12.5px; }
  .vk-auth .vkcodesend {
    display: flex;
    flex: none;
    align-items: center;
    height: 30px;
    margin-left: auto;
    padding: 0 11px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12.5px;
    white-space: nowrap;
  }

  .vk-auth .vkagree { display: flex; flex: none; align-items: flex-start; gap: 8px; margin-top: 16px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }
  .vk-auth .vkagree i { color: var(--accent); font-style: normal; }
  .vk-auth .vkbox { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px; background: var(--grouped-2); }
  .vk-auth .vkbox.on { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; }

  .vk-auth .vkthird { display: flex; flex: none; align-items: center; justify-content: center; gap: 40px; margin-top: auto; padding-top: 32px; padding-bottom: 34px; }
  .vk-auth .vkthird svg { display: block; }

  .vk-auth .vkcta {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: 18px;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .vk-auth .vklinks { display: flex; flex: none; justify-content: space-between; margin-top: 16px; color: var(--ink-3); font-size: 12.5px; }
  .vk-auth .vkstrong { color: var(--accent); }

  .vk-auth .vkglabel { margin-top: 22px; color: var(--ink-3); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
  .vk-auth .vkchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .vk-auth .vkchip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--grouped);
    color: var(--ink-2);
    font-size: 13px;
    white-space: nowrap;
  }
  .vk-auth .vkchip.on { background: var(--accent-soft); color: var(--accent); }

  .vk-auth .vkfoot { flex: none; margin-top: auto; padding: 0 24px 10px; color: var(--ink-4); font-size: 11.5px; text-align: center; }
  .vk-auth .vkfoot p + p { margin-top: 6px; }

  /* ── dark filter sheet (real Vika mobile component) ─────── */
  .vkdark {
    --ink: #ffffff;
    --ink-2: #a9a9b4;
    --ink-3: #7d7d8a;
    --ink-4: #5d5d69;
    --paper: #1c1c20;
    --grouped: #232329;
    --grouped-2: #2b2b33;
    --line: #31313a;
    --line-soft: #27272e;
    --accent: #7b67ee;
    --accent-soft: #2b2447;
    background: #1c1c20;
  }

  .vkdark .dnav { display: flex; flex: none; align-items: center; gap: 10px; height: 48px; padding: 0 12px; }
  .vkdark .dnavtitle { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  

  .vkdark .dsheet { display: flex; flex: 1; min-height: 0; flex-direction: column; border-radius: 14px 14px 0 0; background: #202027; }
  .vkdark .dhead { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 18px 18px 4px; font-size: 15px; font-weight: 500; }
  .vkdark .dclose { display: flex; color: var(--ink-3); }

  .vkdark .dempty { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; justify-content: center; padding: 0 34px; text-align: center; }
  .vkdark .demptyt { margin-top: 16px; font-size: 14.5px; font-weight: 500; }
  .vkdark .demptys { margin-top: 7px; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
  .vkdark .dadd {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    margin-top: 20px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
  }
  .vkdark .dadd.wide { width: 100%; justify-content: center; margin-top: 10px; background: #2b2b34; color: var(--ink-2); }

  .vkdark .drules { display: flex; flex: none; flex-direction: column; gap: 8px; padding: 14px 18px 0; }
  .vkdark .drule { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px 0 12px; border-radius: 8px; background: #2b2b34; font-size: 13.5px; }
  .vkdark .dkey { color: var(--ink-3); }
  .vkdark .dop { color: var(--ink-4); font-size: 12.5px; }
  .vkdark .dval { color: var(--ink); font-weight: 500; }
  .vkdark .dval.inline { display: flex; align-items: center; gap: 5px; }
  .vkdark .dval .pav { width: 18px; height: 18px; }
  .vkdark .dx { display: flex; margin-left: auto; color: var(--ink-4); }

  .vkdark .dglabel { margin: 22px 18px 0; color: var(--ink-4); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
  .vkdark .dsort { display: flex; align-items: center; gap: 10px; margin: 10px 18px 0; padding: 0 10px 0 12px; height: 42px; border-radius: 10px; background: #2b2b34; font-size: 13.5px; }
  .vkdark .dseg { display: flex; gap: 3px; margin-left: auto; padding: 2px; border-radius: 7px; background: #1c1c20; }
  .vkdark .dseg i { padding: 5px 9px; border-radius: 5px; color: var(--ink-3); font-size: 12px; font-style: normal; }
  .vkdark .dseg i.on { background: #3a3a45; color: var(--ink); }
  .vkdark .dmatch { margin: 10px 18px 0; color: var(--ink-3); font-size: 12.5px; }

  .vkdark .dfoot { display: flex; flex: none; gap: 10px; margin-top: auto; padding: 14px 18px 0; }

  /* the dark panels are real bottom sheets: dimmed datasheet behind, one surface in front */
  .vkdark .dpage { position: absolute; top: 54px; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; padding-bottom: 34px; background: var(--paper); }
  .vkdark .dscrim { position: absolute; z-index: 1; inset: 0; background: rgba(0, 0, 0, 0.52); }
  .vkdark .dsheet { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 64%; padding-bottom: 34px; box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.45); }
  .vkdark .dgrabber { display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #3a3a45; }
  .vkdark .home { position: relative; z-index: 3; }
  .vkdark .dhead { padding-top: 10px; }
  #vk-filter .dempty { flex: 1; padding: 0 34px; }
  .vkdark .tag.progress { background: rgba(47, 107, 255, 0.2); color: #8fb0ff; }
  .vkdark .tag.review { background: rgba(169, 114, 15, 0.24); color: #e2b268; }
  .vkdark .tag.done { background: rgba(28, 138, 76, 0.22); color: #71d09c; }
  .vkdark .tag.blocked { background: rgba(196, 59, 59, 0.22); color: #f0918f; }
  .vkdark .tag.neutral { background: #2b2b34; color: #a9a9b4; }
  .vkdark .dversion { color: var(--ink-4); }
  .vkdark .dbtn { display: flex; flex: 1; align-items: center; justify-content: center; height: 46px; border-radius: 8px; font-size: 15px; font-weight: 500; }
  .vkdark .dbtn.ghost { background: #2b2b34; color: var(--ink-2); }
  .vkdark .dbtn.off { background: var(--accent-soft); color: #8b7ce8; }
  .vkdark .dbtn.primary { background: var(--accent); color: #fff; }
  

  /* ── filter / sort / hide-columns rules (matches the Vika app) ── */
  .vkdark .drule { display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 6px; height: auto; padding: 10px 12px; border-radius: 10px; background: #2b2b34; }
  .vkdark .dline { display: flex; gap: 6px; }
  .vkdark .dline:first-child { padding-right: 24px; }
  .vkdark .dpick { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 9px; border-radius: 8px; background: #3a3a45; color: #d3d3dc; font-size: 12.5px; }
  .vkdark .dpick.grow { flex: 1; min-width: 0; }
  .vkdark .dph { color: #85858f; font-style: normal; }
  .vkdark .dpick svg, .vkdark .dpick .fico svg { flex: none; color: #a9a9b4; }
  .vkdark .fficon { display: flex; flex: none; color: #a9a9b4; }
  .vkdark .dtrash { position: absolute; top: 20px; right: 9px; display: flex; color: #6d6d78; }
  .vkdark .drule { position: relative; }
  .vkdark .drules { flex-direction: column; gap: 8px; }

  .vkdark .dsortbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; font-size: 13.5px; }
  .vkdark .dsortlist { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 0; }
  .vkdark .dsortrow { display: flex; align-items: center; gap: 6px; padding: 8px 9px 8px 6px; border-radius: 10px; background: #2b2b34; }
  .vkdark .dgrip { display: flex; flex: none; color: #5f5f6a; }
  .vkdark .dsortrow .dpick { padding-right: 6px; background: none; }
  .vkdark .dpills { display: flex; flex: none; gap: 4px; }
  .vkdark .dpills i { padding: 6px 8px; border-radius: 5px; color: #85858f; font-size: 11.5px; font-style: normal; }
  .vkdark .dpills i.on { background: #7b67ee; color: #fff; }
  .vkdark .dsortrow .dtrash { position: static; }

  .vkdark .dhcheck { display: flex; align-items: center; gap: 9px; padding: 16px 18px 0; color: var(--ink-2); font-size: 13.5px; }
  .vkdark .dbox { display: flex; flex: none; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 5px; background: #3a3a45; color: #fff; }
  .vkdark .dbox.on { background: var(--accent); }
  .vkdark .dsearch { display: flex; align-items: center; gap: 8px; height: 36px; margin: 12px 18px 0; padding: 0 11px; border-radius: 8px; background: #1c1c20; color: #85858f; font-size: 13.5px; }
  .vkdark .dhlist { display: flex; flex-direction: column; padding: 14px 18px 0; }
  .vkdark .dhrow { display: flex; align-items: center; gap: 8px; height: 46px; }
  .vkdark .dhrow + .dhrow { border-top: 1px solid #2b2b34; }
  .vkdark .dficon { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: #2b2b34; color: #a9a9b4; }
  .vkdark .dhrowt { flex: 1; min-width: 0; font-size: 13.5px; }
  .vkdark .dswitch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: #3a3a45; }
  .vkdark .dswitch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: none; }
  .vkdark .dswitch.on { background: var(--accent); }
  .vkdark .dswitch.on i { left: 18px; }


  /* ── first-run wizard ───────────────────────────────────── */
  .vkw { padding: 0 20px; }
  .vkw .wnav { display: flex; flex: none; align-items: center; gap: 10px; height: 52px; margin: 0 -20px; padding: 0 12px; }
  .vkw .wstep { flex: none; margin-top: 18px; color: var(--ink-3); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
  .vkw .wskip { flex: none; margin-left: auto; padding-right: 8px; color: var(--ink-3); font-size: 13.5px; }

  .vkw .wstep + h1 { margin-top: 7px; }
  .vkw h1 { flex: none; margin-top: 20px; font-size: 24px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.22; }
  .vkw .wsub { flex: none; margin-top: 9px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; letter-spacing: -0.006em; }

  .vkw .wlist { display: flex; flex: none; flex-direction: column; gap: 10px; margin-top: 26px; }
  .vkw .wopt {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 14px 14px 14px 15px;
    border: 0;
    border-radius: 10px;
    background: var(--grouped);
    font-family: inherit;
    text-align: left;
  }
  .vkw .wopt.on { background: var(--accent-soft); }
  .vkw .wicon { display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--paper); color: var(--ink-2); }
  .vkw .wopt.on .wicon { color: var(--accent); }
  .vkw .wtext { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
  .vkw .wtext b { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
  .vkw .wtext i { color: var(--ink-3); font-size: 12.5px; font-style: normal; }
  .vkw .wradio { flex: none; width: 20px; height: 20px; border: 1px solid #d5d5de; border-radius: 50%; background: var(--paper); }
  .vkw .wopt.on .wradio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, transparent 5.5px); }


  .vkw .whero { flex: none; height: 158px; margin: 14px -20px 0; overflow: hidden; background: #7b67ee; }
  .vkw .whero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .vkw .wchips { display: flex; flex: none; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
  .vkw .wchip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 17px; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
  .vkw .wchip.on { border-color: transparent; background: var(--accent); color: #fff; }
  .vkw .wlist.tight { flex: 1 1 auto; gap: 0; margin: 6px 0 14px; min-height: 0; }
  .vkw .wopt.plain { flex: 1 1 auto; gap: 12px; height: auto; min-height: 44px; max-height: 58px; padding: 0 2px; border-radius: 10px; background: transparent; }
  .vkw .wopt.plain + .wopt.plain { margin-top: 0; }
  .vkw .wopt.plain.on { background: transparent; }
  .vkw .wopt.plain .wtext b { font-weight: 400; font-size: 15px; }
  .vkw .wopt.plain.on .wtext b { color: var(--accent); }
  .vkw .wcbox { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #d5d5de; border-radius: 6px; color: #fff; }
  .vkw .wcbox.on { border-color: transparent; background: var(--accent); }
  .vkw .wcbox.on::after { width: 9px; height: 5px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); content: ''; }
  .vkw .wlink { display: flex; flex: none; align-items: center; height: 48px; margin-top: 24px; padding: 0 15px; border-radius: 10px; background: var(--grouped); color: var(--ink-3); font-size: 13.5px; }
  .vkw .wcta.rose { background: #ff7993; }

  .vkeb { background: var(--paper); }
  .vkeb .ebunder { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 54px 0 34px; background: var(--paper); }
  .vkeb .ebveil { position: absolute; inset: 0; background: rgba(20, 20, 24, 0.5); }
  .vkeb .statusbar { position: relative; z-index: 4; }
  .vkeb .ebcard { position: absolute; z-index: 2; top: 0; right: 20px; bottom: 0; left: 20px; height: fit-content; margin: auto; border-radius: 16px; background: var(--paper); box-shadow: 0 24px 60px rgba(20, 20, 24, 0.28); overflow: hidden; }
  .vkeb .ebclose { position: absolute; z-index: 2; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 20, 24, 0.42); color: #fff; }
  .vkeb .ebhero { height: 154px; overflow: hidden; }
  .vkeb .ebhero img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .vkeb .ebbody { padding: 18px 20px 16px; }
  .vkeb h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; text-align: center; }
  .vkeb p { margin-top: 10px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
  .vkeb .eblabel { display: block; margin-top: 14px; color: var(--ink-2); font-size: 13px; }
  .vkeb .eblist { margin-top: 6px; }
  .vkeb .eblist li { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 13px; }
  .vkeb .eblist b { color: #ffb400; font-weight: 400; }
  .vkeb .ebmore { display: block; margin-top: 8px; color: var(--accent); font-size: 13px; }
  .vkeb .wcta { width: 100%; height: 46px; margin-top: 16px; }
  .vkeb .eblater { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin-top: 2px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: 400 14px/1 inherit; }
  .vkeb .home { position: relative; z-index: 4; }

  .vkguide { background: var(--paper); padding-bottom: 0; }


  .vkinvite { background: #5a66ee; }
  .vkinvite .ivdeco i { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.13); }
  .vkinvite .ivdeco i:nth-child(1) { top: 64px; left: -54px; width: 176px; height: 176px; }
  .vkinvite .ivdeco i:nth-child(2) { top: 138px; right: -40px; width: 132px; height: 132px; background: rgba(255, 255, 255, 0.09); }
  .vkinvite .ivdeco i:nth-child(3) { top: 268px; left: 34px; width: 30px; height: 30px; border-radius: 9px; background: #ffd166; transform: rotate(18deg); }
  .vkinvite .ivdeco i:nth-child(4) { top: 596px; right: 46px; width: 46px; height: 46px; border-radius: 13px; background: #ff7993; transform: rotate(-14deg); }
  .vkinvite .ivdeco i:nth-child(5) { bottom: 92px; left: -30px; width: 128px; height: 128px; }
  .vkinvite .ivcard {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
    margin: auto 0; padding: 34px 22px 24px; border-radius: 14px; background: #33333a; text-align: center;
  }
  .vkinvite .ivmark { display: flex; }
  .vkinvite .ivfrom { margin-top: 22px; color: #a5a5ad; font-size: 14px; }
  .vkinvite .ivcard h1 { margin-top: 8px; color: #fff; font-size: 25px; font-weight: 600; letter-spacing: -0.02em; }
  .vkinvite .ivmeta { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: #a5a5ad; font-size: 13.5px; }
  .vkinvite .ivdot { width: 8px; height: 8px; border-radius: 50%; background: #6f6f78; }
  .vkinvite .ivdot.on { background: #34c759; }
  .vkinvite .ivdot + .ivdot { margin-left: 10px; }
  .vkinvite .ivcta {
    display: flex; flex: none; align-items: center; justify-content: center; width: 100%; height: 46px;
    margin-top: 30px; border: 0; border-radius: 8px; background: #6f79f2; color: #fff; font: 400 15.5px/1 inherit;
  }

  .vkguide .gnav { display: flex; flex: none; align-items: center; height: 52px; margin: 0 -20px; padding: 0 20px; }
  .vkguide .gtitle { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
  .vkguide .gactions { display: flex; margin-left: auto; color: var(--ink-2); }
  .vkguide h1 { margin-top: 14px; font-size: 25px; }
  .vkguide .gtip { display: flex; flex: none; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--accent); color: #fff; }
  .vkguide .gtip .gtx { flex: 1; min-width: 0; }
  .vkguide .gtip b { display: block; font-size: 14.5px; font-weight: 400; letter-spacing: -0.012em; }
  .vkguide .gtip p { margin-top: 3px; font-size: 12.5px; line-height: 1.45; opacity: 0.84; }
  .vkguide .gtip .gchev { display: flex; flex: none; color: rgba(255, 255, 255, 0.72); }
  .vkguide .gsec { flex: none; margin-top: 34px; }
  .vkguide .ghead { display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); font-size: 13px; }
  .vkguide .ghead i { color: var(--ink-3); font-size: 12.5px; font-style: normal; }
  .vkguide .glist { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .vkguide .gcard { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 20px; border-radius: 12px; font-size: 14.5px; }
  .vkguide .gcard img { width: 28px; height: 28px; object-fit: contain; }
  .vkguide .gcard.green { background: #e2f6ef; color: #35a97c; }
  .vkguide .gcard.blue { background: #e0e9ff; color: #4f7df3; }
  .vkguide .gcard.pink { background: #ffe8ec; color: #ff5c7a; }

  .vkw .wfoot + .home { margin-top: 0; }
  .vkw .wfoot { display: flex; flex: none; flex-direction: column; gap: 12px; margin-top: auto; padding-bottom: 12px; }
  .vkw .wcta { display: flex; align-items: center; justify-content: center; height: 50px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; }
  .vkw .whint { color: var(--ink-3); font-size: 12px; text-align: center; }


  /* what the wizard actually created, as real objects rather than a checklist */



  /* ── datasheet (grid view) — mirrors APITable's mobile grid ─── */
  #vk-grid { background: var(--paper); }

  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gtools { display: flex; flex: none; align-items: center; gap: 4px; padding: 0 11px 8px; }
  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gspace { flex: 1; }
  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; border-radius: 8px; color: var(--ink-2); }
  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gtool { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); font-size: 13px; letter-spacing: -0.008em; }
  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gtool svg { flex: none; }
  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gcount { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-style: normal; font-variant-numeric: tabular-nums; }

  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gviews { display: flex; flex: none; align-items: center; gap: 4px; padding: 0 12px 10px; }
  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gvmenu { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 2px; border-radius: 7px; background: var(--grouped); color: var(--ink-2); }
  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gvtab { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; color: var(--ink-3); font-size: 13px; letter-spacing: -0.008em; white-space: nowrap; }
  :is(#vk-grid, #vk-guide-tip, .ebunder, .dpage) .gvtab.on { background: var(--accent); color: #fff; font-weight: 500; }

  :is(#vk-grid, .ebunder, .dpage) .ghead,
  :is(#vk-grid, .ebunder, .dpage) .grow { display: grid; grid-template-columns: 20px minmax(0, 1fr) 48px 72px 46px; column-gap: 6px; align-items: center; padding: 0 13px; }
  :is(#vk-grid, .ebunder, .dpage) .ghead { flex: none; height: 32px; border-bottom: 1px solid var(--line); background: var(--grouped); color: var(--ink-2); font-size: 10.5px; }
  :is(#vk-grid, .ebunder, .dpage) .gf { display: inline-flex; min-width: 0; align-items: center; gap: 3px; }
  :is(#vk-grid, .ebunder, .dpage) .gf svg { flex: none; color: var(--ink-4); }
  :is(#vk-grid, .ebunder, .dpage) .gf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(#vk-grid, .ebunder, .dpage) .gf .gfch { display: inline-flex; flex: none; margin-left: auto; color: var(--ink-4); }
  :is(#vk-grid, .ebunder, .dpage) .gfr { justify-content: flex-end; }
  :is(#vk-grid, .ebunder, .dpage) .grows { flex: 1; min-height: 0; overflow: hidden; }
  :is(#vk-grid, .ebunder, .dpage) .grow { position: relative; height: 44px; }
  :is(#vk-grid, .ebunder, .dpage) .grow + .grow::before { position: absolute; top: 0; right: 13px; left: 13px; height: 1px; background: var(--line-soft); content: ''; }
  :is(#vk-grid, .ebunder, .dpage) .gno { color: var(--ink-4); font-size: 11px; font-variant-numeric: tabular-nums; }
  :is(#vk-grid, .ebunder, .dpage) .gt { overflow: hidden; color: var(--ink); font-size: 13.5px; letter-spacing: -0.008em; text-overflow: ellipsis; white-space: nowrap; }
  :is(#vk-grid, .ebunder, .dpage) .gpav { display: block; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
  :is(#vk-grid, .ebunder, .dpage) .gd { color: var(--ink-3); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

  :is(#vk-grid, .ebunder, .dpage) .gfoot { display: flex; flex: none; align-items: center; gap: 9px; height: 46px; padding: 0 13px; border-top: 1px solid var(--line-soft); }
  :is(#vk-grid, .ebunder, .dpage) .gadd { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
  :is(#vk-grid, .ebunder, .dpage) .gaddl { color: var(--accent); font-size: 13px; letter-spacing: -0.008em; }
  :is(#vk-grid, .ebunder, .dpage) .gmeta { color: var(--ink-4); font-size: 11.5px; font-variant-numeric: tabular-nums; }


  /* ── side drawer (workspace switcher lives here) ─────────── */
  #vk-drawer .dscrim { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background: rgba(18, 18, 24, 0.42); }
  #vk-drawer .dpanel { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 302px; padding: 68px 0 46px; border-radius: 0 14px 14px 0; background: var(--paper); }
  #vk-drawer .statusbar { position: relative; z-index: 4; }

  #vk-drawer .duser { display: flex; flex: none; align-items: center; gap: 12px; padding: 10px 18px 20px; }
  #vk-drawer .duser .avatar { width: 44px; height: 44px; }
  #vk-drawer .dutext { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
  #vk-drawer .dutext b { font-size: 15px; font-weight: 500; letter-spacing: -0.012em; }
  #vk-drawer .dutext i { color: var(--ink-3); font-size: 12px; font-style: normal; }
  #vk-drawer .duchev { display: flex; color: var(--ink-4); }

  #vk-drawer .dglabel { flex: none; margin: 0 18px 6px; color: var(--ink-3); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
  #vk-drawer .dglabel:not(:first-of-type) { margin-top: 20px; }

  #vk-drawer .dwlist { display: flex; flex: none; flex-direction: column; padding: 0 8px; }
  #vk-drawer .dw { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border-radius: 8px; }
  #vk-drawer .dw.on { background: var(--accent-soft); }
  #vk-drawer .dwmark { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; font-size: 12.5px; font-weight: 500; }
  #vk-drawer .dwtext { flex: 1; min-width: 0; font-size: 14px; letter-spacing: -0.008em; }
  #vk-drawer .dw.on .dwtext { color: var(--accent); }
  #vk-drawer .dwcheck { display: flex; color: var(--accent); }

  #vk-drawer .dmlist { display: flex; flex: none; flex-direction: column; padding: 0 8px; }
  #vk-drawer .dmentry { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 10px; border-radius: 8px; font-size: 14px; letter-spacing: -0.008em; }
  #vk-drawer .dmicon { display: flex; flex: none; width: 26px; justify-content: center; color: var(--ink-3); }
  #vk-drawer .dmtrail { margin-left: auto; color: var(--ink-4); font-size: 12.5px; }

  #vk-drawer .dversion { margin: auto 18px 0; color: var(--ink-4); font-size: 11.5px; }
  #vk-drawer .home { position: relative; z-index: 4; }


  /* ── record detail + comment drawer ─────────────────────── */
  #vk-record .navbar,
  #vk-record-comments .navbar { position: relative; }
  .vika .rdbadge { position: relative; }
  .vika .rdbadge i { position: absolute; top: -1px; right: -2px; display: flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--paper); font-size: 9.5px; font-style: normal; }

  #vk-record .frow .people,
  #vk-record-comments .frow .people { display: flex; align-items: center; }
  #vk-record .people .pav + .pav,
  #vk-record-comments .people .pav + .pav { margin-left: -7px; }
  #vk-record .people .pav img,
  #vk-record-comments .people .pav img { box-shadow: 0 0 0 2px var(--paper); border-radius: 50%; }

  #vk-record-comments .cmctx { flex: none; padding: 0 20px 6px; color: var(--ink-3); font-size: 12.5px; letter-spacing: -0.004em; }
  #vk-record-comments .cmfeed { padding-top: 2px; }
  #vk-record-comments .cmday { padding: 16px 20px 14px; color: var(--ink-4); font-size: 11.5px; }
  #vk-record-comments .rcompose { display: flex; flex: none; align-items: center; gap: 10px; padding: 12px 16px 2px; }
  #vk-record-comments .rcompose .field { display: flex; flex: 1; align-items: center; height: 42px; padding: 0 16px; border-radius: 21px; background: var(--grouped); color: var(--ink-3); font-size: 14.5px; }
  #vk-record-comments .rsend { display: flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; }
  #vk-record-comments .home { position: relative; z-index: 4; }


  .vika .actrow { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 15px; }
  .vika .acttext { flex: 1; min-width: 0; color: var(--ink-2); font-size: 12.5px; letter-spacing: -0.004em; }
  .vika .actwhen { flex: none; color: var(--ink-4); font-size: 11.5px; font-variant-numeric: tabular-nums; }



  .vkdark .dhrow.new .dficon.new { background: rgba(123, 103, 238, 0.2); color: #b3a7f6; }
  .vkdark .dhrow.new .dhrowt { color: #b3a7f6; }

  /* ── coach mark over the grid ───────────────────────────── */
  .vkg .gdim { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .vkg .gtopnav { display: flex; flex: none; align-items: center; height: 52px; padding: 0 20px; }
  .vkg .gtitle2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
  .vkg .gtopnav .iconbtn { margin-left: auto; }
  /* the view bar aligns to this screen’s 20px gutter, not vk-grid’s 12px one */
  #vk-guide-tip .gviews { padding: 2px 20px 12px; }
  .vkg .grows2 { display: flex; flex-direction: column; }
  .vkg .gline { position: relative; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; }
  .vkg .gline + .gline::before { position: absolute; top: 0; right: 20px; left: 20px; height: 1px; background: var(--line-soft); content: ''; }
  .vkg .gnum { width: 16px; color: var(--ink-4); font-size: 12px; font-variant-numeric: tabular-nums; }
  .vkg .gtext { flex: 1; min-width: 0; font-size: 14px; }
  .vkg .gtext i { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11.5px; font-style: normal; }
  .vkg .gfoot2 { display: flex; flex: none; align-items: center; gap: 12px; height: 70px; margin-top: auto; padding: 0 20px 6px; }
  .vkg .gcount2 { flex: 1; color: var(--ink-3); font-size: 12.5px; }

  .vkg .gspot { position: relative; z-index: 3; display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; box-shadow: 0 0 0 2000px rgba(16, 16, 20, 0.58); }
  .vkg .gbubble { position: absolute; z-index: 4; right: 20px; bottom: 106px; left: 20px; padding: 18px 18px 16px; border-radius: 14px; background: var(--paper); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); }
  .vkg .gbubble b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.018em; }
  .vkg .gbubble p.gbody { margin-top: 8px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
  .vkg .gbubble .glist { display: grid; gap: 10px; margin-top: 14px; color: var(--ink); font-size: 13.5px; line-height: 1.35; }

  /* ── guide polish ───────────────────────────────────────── */
  .vkguide .gcard { height: 74px; }
  .vkguide .gcard img { width: 34px; height: 34px; }
  .vkguide .gcard .gctx { flex: 1; min-width: 0; }
  .vkguide .gcard .gctx b { display: block; font-size: 14.5px; font-weight: 400; letter-spacing: -0.01em; }
  .vkguide .gcard .gctx i { display: block; margin-top: 2px; font-size: 12px; font-style: normal; opacity: 0.72; }
  .vkguide .gcard .gchev { display: flex; flex: none; opacity: 0.5; }
  .vkguide .gcard.doc { height: 58px; background: var(--grouped); color: var(--ink); gap: 12px; }
  .vkguide .gcard.doc .gdicon { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
  .vkguide .gcard.doc .gctx i { opacity: 1; color: var(--ink-3); }

  /* automation: real section rhythm + a filled (not dashed) add control */
  .vika .fsec { display: flex; flex: none; align-items: baseline; gap: 6px; margin: 0 0 10px; font-size: 15px; font-weight: 500; letter-spacing: -0.012em; }
  .vika .fsec b { color: var(--ink-3); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
  .vika .addstep { border: 0; background: var(--grouped); }

  /* automation flow: one readable chain — trigger, conditions, actions */
  #vk-flow .canvas { padding-top: 12px; }
  #vk-flow .enablerow { margin-bottom: 10px; }
  #vk-flow .fsec { margin-bottom: 9px; }
  #vk-flow .node { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; }
  #vk-flow .node .nbody,
  #vk-flow .fstep .nbody { flex: 1; min-width: 0; }
  #vk-flow .node .nm,
  #vk-flow .fstep .nm { margin-top: 3px; font-size: 11.5px; line-height: 1.42; }
  .vika .fic { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--grouped-2); color: var(--ink-2); }
  .vika .node.trig .fic { background: var(--accent-soft); color: var(--accent); }
  .vika .fchain { display: flex; flex: none; align-items: center; justify-content: center; padding: 2px 0; color: var(--ink-4); }
  .vika .fgroup { flex: none; padding: 4px 0; border-radius: 10px; background: var(--paper); }
  .vika .fcond { display: flex; align-items: center; gap: 9px; padding: 9px 13px; font-size: 13.5px; letter-spacing: -0.006em; }
  .vika .fcond .fic { width: 20px; height: 20px; border-radius: 0; background: none; color: var(--ink-3); }
  .vika .fcx { color: var(--ink-2); font-weight: 500; }
  .vika .fop { color: var(--ink-3); }
  .vika .fval { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 500; }
  .vika .fstep { display: flex; align-items: center; gap: 10px; padding: 10px 13px; }
  .vika .fnum { flex: none; width: 10px; color: var(--ink-4); font-size: 11.5px; font-variant-numeric: tabular-nums; }
  .vika .fstep .fic.dt { background: #e8f1ff; }
  .vika .fstep .fic.dt img { width: 17px; height: 17px; }
  #vk-flow .addstep { margin-top: 12px; }
  .vika .navsave { color: var(--accent); font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
  .vika .navspacer { display: block; flex: none; width: 32px; height: 32px; }
  .vika .field .ell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .vika .field { border-radius: var(--radius-card); }
  .vika .fhint { margin: 7px 2px 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; }
  .vika .segmented2 { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--grouped-2); }
  .vika .segmented2 button { flex: 1; height: 34px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font-family: inherit; font-size: 13.5px; }
  .vika .segmented2 button.on { background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-seg); }

  /* Copilot: an agent picker over this datasheet */
  .vika .cpwrap { display: flex; flex-direction: column; gap: 10px; padding: 0 15px; }
  .vika .cpagent { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 10px; background: var(--paper); }
  .vika .cpagent.on { background: var(--accent-soft); }
  .vika .cpicon { display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--grouped); color: var(--ink-2); }
  .vika .cpagent.on .cpicon { background: var(--paper); color: var(--accent); }
  .vika .cptext { flex: 1; min-width: 0; }
  .vika .cptext b { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
  .vika .cptext i { display: block; margin-top: 3px; color: var(--ink-3); font-size: 12.5px; font-style: normal; line-height: 1.42; }
  .vika .cprev { display: flex; flex: none; color: var(--ink-4); }
  .vika .fieldlabel.cpfirst { margin-top: 18px; }
  .vika .cpchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 15px; }
  .vika .cpchips span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--paper); color: var(--ink-2); font-size: 13px; white-space: nowrap; }
  .vika .cpnote { margin: 20px 20px 0; color: var(--ink-4); font-size: 11.5px; line-height: 1.5; }
  .vika .cpnote span { color: var(--accent); }
  .vika .cpsend { display: flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 21px; background: var(--accent); color: #fff; }
  #vk-copilot .composer { padding-bottom: 12px; }
  .vika .editor .eadd { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 12px; font-weight: 500; }
  .vika .editor .eadd svg { flex: none; }
  #vk-flow-config .fhint { margin-top: 6px; }

  /* ── mobile pricing page (APITable Space edition, 428x1835 → 390) ──── */
  .vkp {
    --ink: #ffffff;
    --ink-2: #b9c1d6;
    --ink-3: #7e87a7;
    --ink-4: #5c6484;
    --paper: #2a2e44;
    --grouped: #323751;
    --grouped-2: #3a4062;
    --line: #3f4566;
    --line-soft: #363b58;
    --accent: #8355ec;
    background: #2a2e44;
  }
  .vkp .statusbar { position: relative; z-index: 6; }
  .vkp .home { position: relative; z-index: 6; }
  .vkp .home i { opacity: 1; }

  .vkpv { position: absolute; inset: 0; overflow: hidden; }
  .vkpp { position: absolute; top: 0; left: 0; width: 428px; padding-bottom: 44px; background: #2a2e44; transform-origin: 0 0; }

  .vkpp .confetti { position: absolute; border-radius: 12.4px; }
  .vkpp .hero { position: absolute; left: 32px; top: 104px; width: 320px; font-size: 30px; font-weight: 600; line-height: 38px; letter-spacing: -0.012em; color: #fff; }

  .vkpp .subtoggle { position: absolute; left: 29px; top: 200px; display: flex; width: 370px; height: 76px; padding: 4px; border-radius: 18px; background: #3a4062; }
  .vkpp .subopt { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 14px; }
  .vkpp .subopt.on { background: #8355ec; }
  .vkpp .subopt b { font-size: 16px; font-weight: 500; letter-spacing: -0.006em; color: #fff; }
  .vkpp .subopt i { font-size: 12px; font-weight: 400; font-style: normal; color: #7e87a7; }
  .vkpp .subopt.on i { color: rgba(255, 255, 255, 0.84); }

  .vkpp .heroSub { position: absolute; left: 24px; top: 296px; width: 380px; font-size: 15px; font-weight: 400; line-height: 21px; color: #b9c1d6; text-align: center; }

  .vkpp .period { position: absolute; left: 139px; top: 332px; display: flex; align-items: center; gap: 10px; }
  .vkpp .period span { font-size: 14px; font-weight: 400; color: #7e87a7; }
  .vkpp .period span.on { color: #fff; }
  .vkpp .period .sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: #8355ec; }
  .vkpp .period .sw::after { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; content: ''; }

  .vkpp .plans { position: absolute; left: 24px; top: 420px; display: flex; width: 380px; flex-direction: column; gap: 16px; }
  .vkpp .pcard { position: relative; padding: 24px; border-radius: 20px; background: #323751; box-shadow: 0 1px 2px rgba(16, 18, 30, 0.4); }
  .vkpp .pcard .pname { font-size: 17px; font-weight: 500; letter-spacing: -0.006em; color: #fff; }
  .vkpp .pcard .pdesc { margin-top: 6px; max-width: 264px; font-size: 13px; font-weight: 400; line-height: 19px; color: #7e87a7; }
  .vkpp .pcard .pbig { margin-top: 16px; font-size: 44px; font-weight: 600; line-height: 48px; letter-spacing: -0.022em; color: #fff; }
  .vkpp .pcard .pbig span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: #b9c1d6; }
  .vkpp .pcard .pwas { position: relative; display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 400; color: #7e87a7; }
  .vkpp .pcard .pwas::after { position: absolute; left: -2px; right: -2px; top: 50%; height: 1px; background: currentColor; content: ''; }
  .vkpp .pcard .pseat { margin-top: 8px; font-size: 12.5px; font-weight: 400; line-height: 18px; color: #b9c1d6; }
  .vkpp .pcard .pcta { display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 20px; border-radius: 10px; font-size: 16px; font-weight: 500; color: #fff; }
  .vkpp .pcard.free .pcta { background: #2ccbdf; color: #093a41; }
  .vkpp .pcard.plus .pcta { background: #f5be0a; color: #3d2c04; }
  .vkpp .pcard .pinc { margin-top: 26px; color: #7e87a7; font-size: 11.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
  .vkpp .pcard .pfeat { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
  .vkpp .pcard .pfeat i { display: flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #7b67ee; }
  .vkpp .pcard .pfeat span { font-size: 14px; color: #b9c1d6; }
  .vkpp .pcard .pmore { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; font-size: 13px; font-weight: 500; color: #a89bf6; }