/* Ink on paper. Blue means Vowkey is acting: the Fill button, the frame on a filled field, the source glyph, the caret. Selection, focus and structure use ink and tone steps. */
:root {
  --paper: #F5F4F0; --surface: #FFFFFF; --ink: #121216; --muted: #5B5D66; --faint: #8A8A94; --line: #E2E0DA; --line2: #ECEAE4;
  --blue: #2563EB; --blue-ink: #1D4ED8; --blue-soft: #E6EEFE; --green: #128A5A; --green-soft: #E4F4EC;
  --amber: #A65F0C; --amber-soft: #FBF0DE; --red: #C2352B;
  --sel: rgba(18,18,22,.07); --hover: rgba(18,18,22,.045); --glass: rgba(251,251,252,.84); --win: #FFFFFF; --side: rgba(240,238,232,.68); --canvas: #F6F5F1; --card: #FFFFFF;
  --wall-a: #DDE3F0; --wall-b: #C6D0E5; --mbar: rgba(246,246,249,.74);
  --wp: radial-gradient(820px 560px at 6% 2%, rgba(238,222,242,.7), transparent 62%), radial-gradient(760px 540px at 96% 18%, rgba(190,214,250,.85), transparent 64%), radial-gradient(900px 640px at 58% 104%, rgba(246,222,206,.75), transparent 62%), linear-gradient(168deg, var(--wall-a), var(--wall-b));
  --r-ctl: 8px; --r-row: 10px; --r-pop: 16px; --r-win: 12px;
  --sh-pop: 0 18px 44px -12px rgba(20,24,40,.30), 0 2px 8px rgba(20,24,40,.08);
  --sh-win: 0 0 0 .5px rgba(14,18,34,.34), 0 32px 68px -22px rgba(14,20,44,.5), 0 10px 22px -12px rgba(14,20,44,.28);
  --f: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
:root:lang(ja) {
  --f: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Be Vietnam Pro", system-ui, sans-serif;
}
:root:lang(ko) {
  --f: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Be Vietnam Pro", system-ui, sans-serif;
  word-break: keep-all;
}
:root:lang(zh-CN) {
  --f: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Be Vietnam Pro", system-ui, sans-serif;
}
:root:lang(zh-TW) {
  --f: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Be Vietnam Pro", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --paper: #101115; --surface: #17181D; --ink: #ECEDF1; --muted: #A2A5AF; --faint: #6E717B; --line: #2A2C33; --line2: #222329;
  --blue: #5B8DF8; --blue-ink: #A9C3FF; --blue-soft: #1A2644; --green: #3FBF8A; --green-soft: #15302A;
  --amber: #E2A04A; --amber-soft: #33270F; --red: #E5675D;
  --sel: rgba(255,255,255,.09); --hover: rgba(255,255,255,.055); --glass: rgba(33,34,41,.84); --win: #1C1D23; --side: rgba(30,32,42,.66); --canvas: #16171B; --card: #1F2027;
  --wall-a: #2A3042; --wall-b: #14161E; --mbar: rgba(22,23,29,.7);
  --wp: radial-gradient(820px 560px at 8% 4%, rgba(92,70,150,.5), transparent 62%), radial-gradient(760px 540px at 96% 18%, rgba(46,92,170,.5), transparent 64%), radial-gradient(900px 640px at 58% 104%, rgba(120,62,60,.34), transparent 62%), linear-gradient(168deg, var(--wall-a), var(--wall-b));
  --sh-pop: 0 20px 50px -12px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  --sh-win: 0 0 0 .5px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07), 0 32px 68px -22px rgba(0,0,0,.8), 0 10px 22px -12px rgba(0,0,0,.5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: 2px; }
.f { fill: currentColor; fill-opacity: .13; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 12px; height: 12px; }
svg.i.lg { width: 20px; height: 20px; }
svg.mk { width: 20px; height: 20px; flex: none; }

/* ===== Gallery frame ===== */
.page { max-width: 1260px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-right)) 72px max(16px, env(safe-area-inset-left)); display: grid; gap: 18px; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.brandrow { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.brandrow small { color: var(--muted); font-weight: 500; font-size: 14px; letter-spacing: 0; }
.tabs { display: flex; gap: 22px; overflow-x: auto; max-width: 100%; margin-left: auto; }
.tabs button { border: 0; background: none; padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
.themebtn { width: 34px; height: 34px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; }
.themebtn:hover { background: var(--hover); }
.tab { display: none; gap: 12px; }
.tab.on { display: grid; }
.ctls { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.ctl { display: flex; align-items: center; gap: 10px; }
.ctl > b { font-size: 13px; color: var(--muted); font-weight: 500; }
.seg { display: inline-flex; padding: 2px; background: var(--sel); border-radius: var(--r-ctl); gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 4px 11px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.stage-wrap { position: relative; width: 100%; aspect-ratio: 1120 / 700; overflow: hidden; border-radius: var(--r-win); border: 1px solid var(--line); background: var(--wall-b); isolation: isolate; }
.stage { position: absolute; left: 0; top: 0; width: 1120px; height: 700px; transform-origin: 0 0; transform: scale(var(--s, 1)); overflow: hidden; font-size: 14px; line-height: 1.4; color: var(--ink); background: var(--wp); }

/* ===== Atoms ===== */
.av { width: 24px; height: 24px; border-radius: 7px; background: var(--sel); display: inline-block; overflow: hidden; flex: none; vertical-align: middle; }
.av svg, .av img { width: 100%; height: 100%; display: block; object-fit: cover; }
.av.sm { width: 20px; height: 20px; font-size: 10px; border-radius: 6px; }
.av.lg { width: 36px; height: 36px; font-size: 13px; border-radius: 10px; }
.av.xl { width: 56px; height: 56px; font-size: 17px; border-radius: 14px; }
.gl { width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); flex: none; }
.gl svg.i { width: 18px; height: 18px; }
.gl.vk { color: var(--ink); }
.gl.vk svg.mk { width: 22px; height: 22px; }
.gl.src { color: var(--blue-ink); }
.gl.need { color: var(--amber); }
.gl.sq { width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: var(--paper); }
.gl.sq svg.i { width: 18px; height: 18px; }
.kbd { font-family: var(--f-mono); font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 4px; background: var(--sel); color: var(--muted); min-width: 20px; text-align: center; white-space: nowrap; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-ctl); padding: 6px 14px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.p { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.btn.p:hover { background: color-mix(in srgb, var(--blue) 88%, #000); }
.btn.p[disabled] { opacity: .4; cursor: not-allowed; }
.btn.g { border-color: transparent; background: none; color: var(--blue-ink); font-weight: 600; }
.btn.g:hover { background: var(--hover); }
.btn.t { border-color: transparent; background: none; color: var(--muted); }
.btn.t:hover { color: var(--ink); background: var(--hover); }
.btn.sm { padding: 3px 10px; font-size: 13px; border-radius: 6px; }
.ibtn { width: 28px; height: 28px; border-radius: 7px; border: 0; background: none; display: inline-grid; place-items: center; color: var(--muted); }
.ibtn:hover { background: var(--hover); color: var(--ink); }
.tag { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.tag.amber { color: var(--amber); }
.tag.green { color: var(--green); }
.tag.blue { color: var(--blue-ink); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: absolute; z-index: 90; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--ink); color: var(--paper); border-radius: 99px; padding: 9px 18px; font-size: 14px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 9px; animation: rise .22s cubic-bezier(.22,1,.36,1); box-shadow: var(--sh-pop); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
.pop { position: absolute; z-index: 60; background: var(--surface); backdrop-filter: none; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--r-pop); box-shadow: var(--sh-pop); padding: 5px; min-width: 200px; animation: popin .14s cubic-bezier(.22,1,.36,1); }
.pop button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 14px; }
.pop button:hover, .pop button.hi { background: var(--sel); }
.pop button .kbd { margin-left: auto; }
.pop hr { border: 0; height: 1px; background: var(--line); margin: 4px 6px; }
.pop .ph { font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 10px 4px; }
@keyframes popin { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ===== Desktop scene ===== */
.menubar { position: absolute; left: 0; top: 0; right: 0; height: 28px; background: var(--mbar); backdrop-filter: blur(20px); display: flex; align-items: center; gap: 16px; padding: 0 14px; font-size: 13px; font-weight: 500; z-index: 40; }
.menubar .apple { width: 12px; height: 14px; border-radius: 50% 50% 46% 46%; background: var(--ink); }
.menubar b { font-weight: 700; }
.menubar .rt { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.menubar svg.i { width: 15px; height: 15px; stroke-width: 1.5; }
.mbi { position: relative; width: 30px; height: 22px; border: 0; background: none; border-radius: 6px; display: grid; place-items: center; color: var(--ink); padding: 0; }
.mbi:hover { background: var(--hover); }
.mbi.on { background: var(--sel); }
.mbi svg.mk { width: 17px; height: 17px; }
.mbi.cue::after { content: ""; position: absolute; inset: -3px; border-radius: 9px; border: 1.5px solid var(--blue); animation: cue 2s ease-out 2; }
@keyframes cue { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: var(--mbar); backdrop-filter: blur(20px); display: none; align-items: center; justify-content: center; gap: 8px; z-index: 40; border-top: 1px solid var(--line); }
.taskbar .ti { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.taskbar .ti i { width: 18px; height: 18px; border-radius: 5px; background: var(--faint); opacity: .5; }
.taskbar .ti.on { background: var(--sel); }
.taskbar .tray { position: absolute; right: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.25; }
[data-platform="win"] .menubar { display: none; }
[data-platform="win"] .taskbar { display: flex; }
.win { position: absolute; background: var(--win); border-radius: var(--r-win); box-shadow: var(--sh-win); overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); display: flex; flex-direction: column; }
[data-platform="win"] .win { border-radius: 8px; }
.wbar { height: 38px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: color-mix(in srgb, var(--ink) 3%, var(--win)); border-bottom: 1px solid var(--line2); font-size: 13px; font-weight: 500; position: relative; }
.lights { display: flex; gap: 7px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #EC6A5E; }
.lights i:nth-child(2) { background: #F4BF4F; } .lights i:nth-child(3) { background: #61C554; }
[data-platform="win"] .lights { display: none; }
.wbar .t { position: absolute; left: 0; right: 0; text-align: center; color: var(--muted); pointer-events: none; }
[data-platform="win"] .wbar .t { text-align: left; left: 14px; }
.wctl { display: none; margin-left: auto; gap: 18px; color: var(--muted); font-size: 12px; letter-spacing: .1em; }
[data-platform="win"] .wctl { display: flex; }

/* ===== The page being filled (the site's own styling) ===== */
.site { --s-ink: #1B1F27; --s-mut: #5C6370; --s-line: #CBD0D8; background: #fff; color: var(--s-ink); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color-scheme: light; }
.pg { position: relative; padding: 24px 32px 44px; }
.pg h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.pg .lede { margin: 0 0 20px; color: var(--s-mut); font-size: 14px; }
.fsec { margin-bottom: 22px; }
.fsh { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #D7DBE2; }
.fsh h3 { margin: 0; font-size: 16px; font-weight: 700; color: #1B3A6B; }
.who { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 3px 6px; border-radius: 6px; font: 500 13px/1.2 var(--f); color: #4A4F5A; }
.who b { font-weight: 700; color: #1B1F27; }
.who:hover { background: rgba(18,18,22,.06); }
.who svg.i { width: 11px; height: 11px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; padding-top: 16px; }
.fld { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.fld > label { font-size: 13px; font-weight: 700; color: var(--s-ink); line-height: 1.25; }
.fld .fnote { grid-column: 2; }
.inp { position: relative; }
.ftab { position: absolute; left: -1px; bottom: 100%; margin-bottom: 1px; height: 16px; padding: 0 7px; background: #2563EB; color: #fff; font: 700 11px/16px var(--f); border-radius: 4px 4px 0 0; white-space: nowrap; display: none; z-index: 3; pointer-events: none; }
.inp:hover .ftab.on, .inp.hov .ftab.on, .inp:focus-within .ftab.on { display: block; }
.inp input { width: 100%; height: 40px; border: 1px solid #9AA1AD; border-radius: 6px; padding: 0 12px; background: #fff; color: var(--s-ink); font-family: Arial, Helvetica, sans-serif; font-size: 15px; outline: none; }
.inp input:focus { border-color: #1A56DB; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }
.inp input.filled { border: 1.5px solid rgba(37,99,235,.62); background: #fff; }
.inp input.filled:hover, .inp input.filled:focus, .inp.hov input.filled { border-color: #2563EB; border-radius: 0 6px 6px 6px; }
.inp input.close { border: 1.5px solid #C9892B; background: #fff; }
.inp input.need { border: 1.5px dashed #C9892B; background: #fff; }
.has-ic input { padding-right: 58px; }
.fnote { font-size: 12px; color: #8A4F08; margin-top: 4px; display: flex; gap: 8px; align-items: center; font-family: var(--f); font-weight: 500; }
.fnote button { border: 0; background: none; padding: 0; color: #1D4ED8; font-weight: 700; font-size: 12px; }
.sbtn { height: 42px; padding: 0 24px; border: 0; border-radius: 6px; background: #1B3A6B; color: #fff; font-weight: 700; font-size: 15px; font-family: Arial, Helvetica, sans-serif; }
.sbtn:hover { background: #162F57; }
.sdone { display: inline-flex; margin-left: 12px; color: #1F7A4D; font-weight: 700; font-size: 14px; align-items: center; gap: 6px; }

/* the Vowkey icon inside a field: a quiet chip until it has something to say */
.vk-ic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 26px; min-width: 40px; padding: 0 7px 0 6px; border: 0; border-radius: 6px; background: rgba(18,18,22,.06); color: #1E2430; display: inline-flex; align-items: center; justify-content: center; gap: 3px; transition: background .12s, box-shadow .12s; }
.vk-ic svg.mk { width: 17px; height: 17px; }
.vk-ic svg.i { width: 10px; height: 10px; stroke-width: 2; color: #5C6370; }
.vk-ic:hover { background: rgba(37,99,235,.12); }
.vk-ic.on, .inp input:focus ~ .vk-ic { background: #DCE7FD; }
.vk-ic.on svg.i { color: #1D4ED8; }
.vk-ic svg.lk { display: none; width: 15px; height: 15px; color: #1E2430; stroke-width: 1.8; }
.vk-ic.locked svg.mk { display: none; }
.vk-ic.locked svg.lk { display: block; }
.vk-ic .srcl { display: none; align-items: center; gap: 5px; font: 600 12px/1 var(--f); color: #1D4ED8; white-space: nowrap; }
.vk-ic .srcl svg.i { width: 14px; height: 14px; color: #1D4ED8; stroke-width: 1.7; }
.vk-ic .srcl .t { display: none; }
.vk-ic.filled, .vk-ic.close { background: transparent; padding: 0 5px 0 6px; min-width: 0; }
.vk-ic.close .srcl, .vk-ic.close .srcl svg.i { color: #8A4F08; }
.vk-ic.filled .srcl, .vk-ic.close .srcl { display: inline-flex; }
.vk-ic.filled svg.mk, .vk-ic.close svg.mk { display: none; }
.inp:hover .vk-ic.filled .srcl .t, .inp:hover .vk-ic.close .srcl .t, .inp.hov .vk-ic .srcl .t, .inp:focus-within .vk-ic.filled .srcl .t { display: inline; }
.inp:hover .vk-ic.filled, .inp:hover .vk-ic.close, .inp.hov .vk-ic.filled, .inp:focus-within .vk-ic.filled { background: #fff; box-shadow: inset 0 0 0 1px #BFD0F6; }
.inp:hover .vk-ic.close { box-shadow: inset 0 0 0 1px #E3C07E; }
.has-ic input.filled, .has-ic input.close { padding-right: 40px; }
[data-icon-mode="focus"] .vk-ic:not(.on) { opacity: 0; pointer-events: none; }
[data-icon-mode="focus"] .inp:hover .vk-ic, [data-icon-mode="focus"] .inp:focus-within .vk-ic, [data-icon-mode="focus"] .vk-ic.filled, [data-icon-mode="focus"] .vk-ic.close { opacity: 1; pointer-events: auto; }
[data-icon-mode="off"] .vk-ic { display: none; }
[data-icon-mode="off"] .has-ic input { padding-right: 12px; }

/* flat PDF form */
.pdfscroll { flex: 1; min-height: 0; overflow-y: auto; background: #8E939C; padding: 20px 0 28px; }
[data-theme="dark"] .pdfscroll { background: #3B3E46; }
.pdfpage { background: #fff; color: #1B1F27; font-family: "Times New Roman", "Noto Serif", Georgia, serif; width: 520px; margin: 0 auto; padding: 28px 34px 32px; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.12); color-scheme: light; }
.pdfpage h1 { margin: 0; font-size: 19px; text-align: center; letter-spacing: .04em; }
.pdfpage .sub { text-align: center; font-size: 11px; color: #555; margin: 3px 0 14px; letter-spacing: .06em; }
.pdfpage .psh { font-size: 11px; font-weight: 700; letter-spacing: .08em; border-bottom: 1.5px solid #1B1F27; margin: 12px 0 7px; padding-bottom: 2px; }
.pdfpage .pg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.pdfpage .pf { position: relative; }
.pdfpage .pf label { display: block; font-size: 10.5px; color: #444; margin-bottom: 1px; }
.pdfpage .pf input { width: 100%; height: 25px; border: 0; border-bottom: 1px solid #1B1F27; background: rgba(120,160,255,.13); padding: 0 5px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #111; outline: none; border-radius: 2px 2px 0 0; }
.pdfpage .pf input:focus { background: rgba(120,160,255,.28); box-shadow: 0 0 0 1.5px #3B7BF6; }
.pdfpage .pf input.filled { background: #fff; border: 0; box-shadow: 0 0 0 1.5px rgba(37,99,235,.7); border-radius: 2px; }
.pdfpage .pf input.close { background: #fff; border: 0; box-shadow: 0 0 0 1.5px #C9892B; border-radius: 2px; }
.pdfpage .pf input.need { background: rgba(217,164,65,.14); border: 0; box-shadow: 0 0 0 1.5px #C9892B; border-radius: 2px; }
.pdfpage .pf input.target { background: rgba(37,99,235,.18); box-shadow: 0 0 0 2px #2563EB; border-radius: 2px; }
.pdfpage .cc { position: absolute; right: 3px; top: 12px; width: 15px; height: 15px; border-radius: 50%; border: 0; background: #C9892B; color: #fff; display: grid; place-items: center; padding: 0; }
.pdfpage .cc svg { width: 9px; height: 9px; stroke-width: 3; }
.prevbar { height: 36px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line2); color: var(--muted); font-size: 13px; }
.prevbar svg.i { width: 14px; height: 14px; }

/* ===== Menu under a field ===== */
.imenu { position: absolute; z-index: 30; width: 364px; background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: var(--r-pop); box-shadow: var(--sh-pop); padding: 5px; font-family: var(--f); font-size: 14px; line-height: 1.35; animation: popin .14s cubic-bezier(.22,1,.36,1); color-scheme: initial; }
.imenu .mh { display: flex; align-items: center; gap: 8px; padding: 3px 5px 5px 4px; }
.imenu .mh .sp { margin-left: auto; font-size: 13px; color: var(--muted); padding-right: 6px; }
.imenu .who { color: var(--muted); margin-left: 0; }
.imenu .who b { color: var(--ink); }
.imenu .who:hover { background: var(--hover); }
.mrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px 8px 8px; border-radius: var(--r-row); }
.mrow b { display: block; font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow.sel { background: var(--sel); }
.mrow .kbd { visibility: hidden; }
.mrow.sel .kbd { visibility: visible; }
.mrow.fillall { margin-top: 2px; }
.imenu hr { border: 0; height: 1px; background: var(--line); margin: 4px 6px; }
.mnone { padding: 8px 10px 6px; color: var(--muted); font-size: 14px; }
.mnone b { color: var(--ink); font-weight: 600; }
.mlock { display: grid; justify-items: start; gap: 12px; padding: 8px 8px 6px; }
.mlock .row { display: flex; align-items: center; gap: 10px; }
.pwline { font-family: var(--f-mono); font-size: 13px; }
.pwline .d { color: var(--blue-ink); } .pwline .s { color: var(--red); }

/* ===== Save prompt ===== */
.note { position: absolute; z-index: 35; right: 20px; top: 12px; width: 372px; background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); border-radius: var(--r-pop); box-shadow: var(--sh-pop); padding: 14px; font-family: var(--f); font-size: 14px; line-height: 1.4; display: grid; gap: 12px; animation: slidein .26s cubic-bezier(.22,1,.36,1); }
@keyframes slidein { from { opacity: 0; transform: translateY(-8px); } }
.note .nh { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.note .nh .x { margin-left: auto; }
.nseg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: var(--r-ctl); background: var(--sel); }
.nseg button { border: 0; background: none; padding: 6px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.nseg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.nprev { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; margin: 0 -14px; padding: 0 14px; }
.nprev .pr { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.nprev b { display: block; font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nprev small { display: block; font-size: 13px; color: var(--muted); }
.nprev input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; background: var(--paper); font-size: 14px; }
.nprev input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.nfoot { display: flex; align-items: center; gap: 8px; }
.nfoot .dest { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 5px 6px; border-radius: 6px; font-size: 14px; color: var(--muted); text-align: left; }
.nfoot .dest b { color: var(--ink); font-weight: 600; }
.nfoot .dest:hover { background: var(--hover); }
.nlist { display: grid; gap: 2px; }
.nlist button { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 12px; align-items: center; border: 0; background: none; text-align: left; padding: 8px; border-radius: var(--r-row); }
.nlist button:hover { background: var(--hover); }
.nlist button[aria-pressed="true"] { background: var(--sel); }
.nlist .rd { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--faint); display: grid; place-items: center; }
.nlist button[aria-pressed="true"] .rd { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.nlist .rd svg { width: 10px; height: 10px; stroke-width: 3; display: none; }
.nlist button[aria-pressed="true"] .rd svg { display: block; }
.nok { display: flex; align-items: center; gap: 12px; }
.nok .ring { color: var(--green); display: grid; place-items: center; flex: none; }

/* ===== Browser window ===== */
.browser .tabrow { height: 38px; flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 0 14px; background: color-mix(in srgb, var(--ink) 5%, var(--win)); }
.browser .btab { height: 30px; min-width: 200px; padding: 0 12px; display: flex; align-items: center; gap: 8px; background: var(--win); border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 500; }
.browser .btab i { width: 12px; height: 12px; border-radius: 3px; background: #1B3A6B; }
.browser .addr { height: 40px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--win); border-bottom: 1px solid var(--line2); }
.browser .url { flex: 1; height: 28px; border-radius: 99px; background: var(--sel); display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 13px; color: var(--muted); }
.browser .url svg.i { width: 12px; height: 12px; }
.browser .body { position: relative; flex: 1; min-height: 0; overflow-y: auto; }
.browser .ext { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; }

/* ===== The pill ===== */
.pillhost { position: absolute; z-index: 50; display: flex; flex-direction: column; gap: 8px; width: 468px; }
[data-platform="mac"] .pillhost { top: 34px; right: 44px; transform-origin: 88% 0; }
[data-platform="win"] .pillhost { bottom: 56px; right: 40px; flex-direction: column-reverse; transform-origin: 88% 100%; }
.pillhost.in { animation: pillin .22s cubic-bezier(.22,1,.36,1); }
@keyframes pillin { from { opacity: 0; transform: scale(.95) translateY(-6px); } }
.pill { height: 52px; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 6px; background: var(--glass); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 99px; box-shadow: var(--sh-pop); }
.p-mark { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; flex: none; padding: 0; color: var(--ink); }
.p-mark:hover { background: var(--hover); }
.p-mark svg.mk { width: 24px; height: 24px; }
.p-search { flex: 1; min-width: 0; display: flex; align-items: center; height: 40px; padding: 0 6px 0 2px; cursor: text; }
.p-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 16px; caret-color: var(--blue); }
.p-search input::placeholder { color: var(--faint); }
.p-who { height: 36px; border: 0; background: none; border-radius: 99px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px 0 6px; flex: none; color: var(--muted); }
.p-who:hover { background: var(--hover); }
.p-who svg.i { width: 11px; height: 11px; }
.p-fill { height: 36px; border: 0; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; padding: 0 18px; flex: none; margin-left: 4px; }
.p-fill:hover { background: color-mix(in srgb, var(--blue) 88%, #000); }
.p-stat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 6px; height: 40px; }
.p-stat .ok { color: var(--green); display: grid; place-items: center; flex: none; }
.p-stat .ok.warn { color: var(--amber); }
.p-stat b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; line-height: 1.2; }
.p-stat small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.p-stat .prog { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 5px; }
.p-stat .prog i { display: block; height: 100%; background: var(--blue); width: 0; animation: fillbar .9s ease forwards; }
@keyframes fillbar { to { width: 100%; } }
.qpanel { background: var(--glass); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 20px; box-shadow: var(--sh-pop); padding: 6px; position: relative; animation: popin .16s cubic-bezier(.22,1,.36,1); }
.qlist { max-height: 320px; overflow-y: auto; display: grid; gap: 1px; align-content: start; scrollbar-width: thin; }
.qsh { font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 12px 4px; display: flex; align-items: center; gap: 8px; }
.qrow { display: grid; grid-template-columns: 24px 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 6px 12px 6px 10px; border: 0; background: none; border-radius: var(--r-row); text-align: left; }
.qrow .l { display: block; font-size: 14px; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .v { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.qrow .v.mono { font-family: var(--f-mono); font-size: 14px; }
.qrow .r { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.qrow .r .hint { display: none; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.qrow.sel { background: var(--sel); }
.qrow.sel .r .src { display: none; }
.qrow.sel .r .hint { display: inline-flex; }
.qrow.need .v { color: var(--amber); }
.qempty { padding: 20px 14px; color: var(--muted); font-size: 14px; text-align: center; }
.qfoot { display: flex; align-items: center; gap: 10px; padding: 9px 12px 5px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.qfoot .dest { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qfoot .dest b { color: var(--ink); font-weight: 600; }
.qfoot .sp { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.qfoot button.k { border: 0; background: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); padding: 2px 4px; border-radius: 6px; }
.qfoot button.k:hover { background: var(--hover); color: var(--ink); }
.qfoot button.k b { font-weight: 600; color: var(--ink); }
.qact { position: absolute; right: 10px; bottom: 46px; width: 260px; z-index: 5; }
.qwho { display: grid; padding: 0 6px 6px; }
.qwho .sec { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 3px 6px; font-size: 14px; }
.qwho .sec > span { color: var(--muted); }
.qwho .who { color: var(--muted); font-size: 14px; margin-left: 0; }
.qwho .who b { color: var(--ink); }
.qwho .who:hover { background: var(--hover); }
.ctx { position: absolute; z-index: 70; width: 240px; }

/* ===== Vault ===== */
.vwin { position: absolute; left: 20px; top: 16px; width: 1080px; height: 668px; border-radius: var(--r-win); box-shadow: var(--sh-win); overflow: hidden; display: flex; isolation: isolate; }
.vside { width: 232px; flex: none; background: var(--side); -webkit-backdrop-filter: blur(34px) saturate(1.7); backdrop-filter: blur(34px) saturate(1.7); border-right: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; scrollbar-width: none; }
.vside .lights { padding: 2px 6px 14px; }
.acct { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 6px 8px; margin-bottom: 8px; border-radius: var(--r-row); }
.acct:hover { background: var(--hover); }
.acct .av { width: 32px; height: 32px; border-radius: 10px; }
.acct > span:not(.av) { min-width: 0; flex: 1; }
.acct b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1.25; }
.acct small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.acct > svg.i { color: var(--muted); width: 14px; height: 14px; }
.vnav { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; border: 0; background: none; text-align: left; padding: 0 8px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; color: var(--ink); }
.vnav:hover { background: var(--hover); }
.vnav.on { background: color-mix(in srgb, var(--ink) 10%, transparent); font-weight: 600; }
.vnav svg.i { color: color-mix(in srgb, var(--ink) 72%, transparent); width: 18px; height: 18px; }
.vnav.on svg.i { color: var(--ink); }
.vnav .bd { margin-left: auto; color: var(--amber); font-size: 13px; font-weight: 700; }
.vsec { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 18px 8px 5px; }
.vmain { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--win); }
.vtool { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 12px; border-bottom: 1px solid var(--line); }
.vsearch { flex: 1; max-width: 440px; height: 32px; display: flex; align-items: center; gap: 8px; background: var(--sel); border-radius: var(--r-ctl); padding: 0 10px; }
.vsearch:focus-within { background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink); }
.vsearch svg.i { color: var(--muted); }
.vsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 14px; }
.vbody { flex: 1; min-height: 0; display: flex; }
.vlist { width: 288px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--win); }
.vlh { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px 18px; min-height: 46px; }
.vlh b { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.vlh .n { color: var(--faint); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.vlh .ibtn { margin-left: auto; }
.vls { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; display: grid; gap: 1px; align-content: start; scrollbar-width: thin; }
.vgrp { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 16px 10px 5px; }
.vitem { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 6px 10px 6px 8px; min-height: 48px; border-radius: var(--r-row); }
.vitem:hover { background: var(--hover); }
.vitem.on { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.vitem b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitem small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vitem svg.i.sm { color: var(--faint); }
.vdet { flex: 1; min-width: 0; overflow-y: auto; position: relative; background: var(--canvas); scrollbar-width: thin; }
.dh { display: flex; align-items: center; gap: 16px; padding: 24px 28px 2px; }
.dh h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.dh small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.dh .sp { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.dgroup { padding: 0 28px; margin-top: 20px; }
.dgroup > h4 { margin: 0; padding: 0 4px 8px; font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; }
.dcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.frow { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 16px; min-height: 44px; margin: 0; border-top: 1px solid var(--line2); position: relative; }
.frow:first-child { border-top: 0; }
.dcard.stack .frow { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 9px 16px 10px; min-height: 56px; }
.dcard.stack .frow .fl { font-size: 13px; }
.frow .fl { font-size: 14px; color: var(--muted); }
.frow .fv { font-size: 15px; font-weight: 500; overflow-wrap: break-word; word-break: normal; min-width: 0; letter-spacing: -.005em; }
.frow .fv.mono { font-family: var(--f-mono); font-size: 14px; }
.frow .fa { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .1s; background: inherit; padding-left: 6px; }
.frow:hover .fa, .frow:focus-within .fa, .frow.hl .fa { opacity: 1; }
.frow[data-copy] { cursor: copy; }
.frow:hover { background: color-mix(in srgb, var(--ink) 3.5%, var(--card)); }
.frow.hl { background: color-mix(in srgb, var(--blue) 7%, var(--card)); }
.frow .fv input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; background: var(--paper); font-size: 15px; }
.frow .fv input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--sel); }
.frow .fa .ibtn { width: 28px; height: 28px; }
.srcbtn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--blue-ink); font-size: 13px; font-weight: 600; padding: 3px 7px; border-radius: 6px; }
.srcbtn:hover { background: var(--blue-soft); }
.cardviz { margin: 18px 28px 0; width: 340px; height: 196px; border-radius: 16px; background: linear-gradient(135deg, #1E2430, #34425F); color: #fff; padding: 22px; display: grid; align-content: space-between; box-shadow: 0 16px 32px -14px rgba(20,24,34,.5); }
.cardviz .n { font-family: var(--f-mono); font-size: 16px; letter-spacing: .09em; }
.cardviz .row { display: flex; justify-content: space-between; align-items: end; font-size: 13px; }
.otp { display: flex; align-items: center; gap: 10px; }
.otp .ring { --p: 50; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(var(--ink) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; }
.otp .ring::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--win); }
.strength { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--green); font-weight: 600; }
.docsplit { display: flex; min-height: 0; }
.docview { flex: 1; min-width: 0; background: color-mix(in srgb, var(--ink) 5%, var(--win)); overflow-y: auto; padding: 24px; display: flex; justify-content: center; align-items: flex-start; }
.docpane { width: 280px; flex: none; border-left: 1px solid var(--line2); overflow-y: auto; padding: 8px; display: grid; gap: 1px; align-content: start; }
.docpane .dr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: var(--r-row); }
.docpane .dr:hover { background: var(--hover); }
.docpane .dr.on { background: var(--sel); }
.docpane .dr small { display: block; color: var(--muted); font-size: 13px; }
.docpane .dr b { display: block; font-weight: 500; font-size: 16px; overflow-wrap: break-word; }
.docpane .dr input { width: 100%; height: 30px; border: 1px solid var(--ink); border-radius: 6px; padding: 0 8px; background: var(--surface); font-size: 14px; outline: none; }
.dtabs { display: flex; gap: 22px; padding: 12px 24px 0; border-bottom: 1px solid var(--line2); align-items: center; }
.dtabs button { border: 0; background: none; padding: 6px 0 10px; font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 -2px 0 transparent; }
.dtabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
.paper { width: 440px; background: #fff; color: #1B1F27; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 10px 28px rgba(0,0,0,.16); padding: 26px 26px 24px; font-family: Arial, Helvetica, sans-serif; color-scheme: light; }
.paper .ph { background: #2F5E9E; color: #fff; border-radius: 3px; padding: 12px 14px; margin-bottom: 12px; }
.paper .ph b { display: block; font-size: 15px; letter-spacing: .02em; }
.paper .ph small { font-size: 10.5px; opacity: .85; }
.paper .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dbox { position: relative; border: 1px solid #D5DAE2; background: #F6F8FB; border-radius: 3px; padding: 6px 8px; font-size: 11.5px; line-height: 1.3; cursor: pointer; }
.dbox small { display: block; font-size: 9.5px; color: #6B7280; }
.dbox.wide { grid-column: 1 / -1; }
.dbox:hover { border-color: #93B1F5; }
.dbox.hl { border: 1.5px solid #2563EB; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.dbox.hl::before { content: attr(data-l); position: absolute; left: -1.5px; bottom: calc(100% + 1px); height: 16px; padding: 0 7px; background: #2563EB; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; border-radius: 4px 4px 0 0; white-space: nowrap; }
.mrz { margin-top: 10px; border-top: 1px dashed #B9C0CC; padding-top: 8px; font-family: var(--f-mono); font-size: 10px; line-height: 1.6; color: #2B3340; letter-spacing: .05em; word-break: break-all; }
.mrz em { display: block; font-style: normal; font-family: Arial, sans-serif; font-size: 10.5px; color: #138A5B; margin-top: 4px; letter-spacing: 0; font-weight: 700; }
.srow { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 0; }
.srow b { font-weight: 600; font-size: 14px; display: block; }
.srow small { color: var(--muted); font-size: 13px; display: block; }
.srow .sp { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sw { width: 38px; height: 22px; border-radius: 99px; border: 0; background: var(--faint); position: relative; padding: 0; opacity: .6; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.sw[aria-checked="true"] { background: var(--ink); opacity: 1; }
.sw[aria-checked="true"]::after { transform: translateX(16px); background: var(--paper); }
.agcard { margin: 12px 28px 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; }
.agcard .top { display: flex; align-items: center; gap: 12px; }
.agcard .top b { font-size: 16px; }
.agcard ul { margin: 0; padding: 0; list-style: none; display: grid; }
.agcard li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0 6px 48px; }
.agcard li svg.i { color: var(--muted); }
.empty { padding: 60px 28px; text-align: center; color: var(--muted); }

/* ===== Unlock and approvals ===== */
.lockwin { left: 64px; top: 56px; width: 420px; height: 520px; display: flex; flex-direction: column; align-items: stretch; }
.lockwin .in { flex: 1; display: grid; justify-items: center; align-content: center; gap: 14px; padding: 24px 40px; text-align: center; }
.lockwin h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.lockwin p { margin: 0; color: var(--muted); font-size: 14px; }
.bio { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; position: relative; }
.bio svg.i { width: 32px; height: 32px; stroke-width: 1.4; }
.bio:hover { background: var(--hover); }
.bio.run { border-color: var(--blue); color: var(--blue); }
.bio.run::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--blue); animation: cue 1s ease-out infinite; }
.bio.ok { color: var(--green); border-color: var(--green); }
.pwf { width: 100%; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 0 6px 0 12px; height: 42px; background: var(--surface); }
.pwf:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--sel); }
.pwf input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 15px; }
.pwf.bad { border-color: var(--red); }
.errl { color: var(--red); font-size: 13px; }
.agentwrap { position: absolute; left: 540px; top: 56px; width: 520px; display: grid; gap: 14px; }
.appr { background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--r-pop); box-shadow: var(--sh-pop); padding: 18px; display: grid; gap: 14px; }
.appr .hd { display: flex; align-items: center; gap: 12px; }
.appr .hd b { font-size: 16px; font-weight: 700; line-height: 1.25; display: block; letter-spacing: -.015em; }
.appr .hd small { color: var(--muted); font-size: 13px; }
.appr .field { border-top: 0; }
.appr .field .frow { grid-template-columns: 110px minmax(0, 1fr); padding: 9px 0; margin: 0; }
.appr .field .frow .fv { font-size: 14px; }
.appr .agent-note { font-size: 14px; line-height: 1.45; }
.appr .agent-note small { display: block; color: var(--muted); font-size: 13px; margin-bottom: 2px; }
.appr .acts { display: flex; gap: 8px; align-items: center; }
.appr .acts .t { margin-left: auto; }
.recap { display: flex; align-items: center; gap: 12px; }
.termc { background: #121318; color: #C8CAD4; border-radius: var(--r-pop); padding: 14px 16px; font-family: var(--f-mono); font-size: 13px; line-height: 1.75; box-shadow: var(--sh-pop); }
.termc .o { color: #5BD39A; } .termc .r { color: #8FB2FF; } .termc .d { color: #7B7E8A; }

/* ===== Phones ===== */
.phone { position: absolute; top: 20px; width: 330px; height: 660px; border-radius: 50px; background: #0E0E12; padding: 11px; box-shadow: 0 28px 56px -20px rgba(0,0,0,.5), 0 0 0 2px #2A2B31 inset; }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: var(--win); display: flex; flex-direction: column; font-size: 15px; }
.phone .isl { position: absolute; z-index: 20; left: 50%; top: 10px; width: 92px; height: 26px; border-radius: 99px; background: #000; transform: translateX(-50%); }
.phone .sb { height: 48px; flex: none; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 4px; font-weight: 600; font-size: 14px; }
.phone .sb span:last-child { display: flex; gap: 5px; align-items: center; }
.sfari { background: #fff; color: #1B1F27; flex: 1; min-height: 0; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; color-scheme: light; }
.sfari .pgm { padding: 14px 18px; overflow: hidden; flex: 1; }
.sfari h1 { margin: 6px 0 14px; font-size: 22px; }
.sfari .fld { display: block; margin-bottom: 12px; }
.sfari .fld > label { display: block; font-size: 14px; margin-bottom: 5px; }
.sfari .fld .inp input { height: 44px; font-size: 16px; border-radius: 10px; }
.addrbar { height: 40px; flex: none; margin: 4px 14px 6px; border-radius: 12px; background: #EDEEF1; display: flex; align-items: center; justify-content: center; font-size: 14px; gap: 6px; color: #444; }
.kbd-ios { flex: none; background: #D2D5DB; color: #111; padding-bottom: 28px; }
[data-theme="dark"] .kbd-ios { background: #2A2B30; color: #fff; }
.qt { height: 44px; display: flex; align-items: center; gap: 1px; padding: 5px 4px 3px; }
.qt button { flex: 1; min-width: 0; height: 36px; border: 0; background: none; border-radius: 8px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.qt button + button { border-left: 1px solid rgba(0,0,0,.14); border-radius: 0; }
.qt .vw { font-weight: 600; }
.keys { padding: 6px 4px 0; display: grid; gap: 9px; }
.keys .kr { display: flex; gap: 5px; justify-content: center; }
.keys i { flex: 1; max-width: 27px; height: 38px; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.3); }
[data-theme="dark"] .keys i { background: #4A4B52; }
.ioshdr { padding: 6px 20px 8px; }
.ioshdr h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.iossrch { margin: 0 16px 8px; height: 38px; border-radius: 11px; background: var(--sel); display: flex; align-items: center; gap: 8px; padding: 0 11px; color: var(--muted); font-size: 16px; }
.chips { display: flex; gap: 6px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; }
.chips button { border: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 99px; padding: 5px 13px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.iosl { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px; scrollbar-width: none; }
#phB { background: var(--canvas); }
.iosl .grp { margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.iosl .it { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 12px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 9px 14px 9px 12px; border-top: 1px solid var(--line2); }
.iosl .it:first-child { border-top: 0; }
.iosl .it b { display: block; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iosl .it small { display: block; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iosl .it > svg.i { color: var(--faint); width: 12px; height: 12px; }
.tabbar { height: 78px; flex: none; border-top: 1px solid var(--line); display: flex; justify-content: space-around; padding-top: 8px; background: color-mix(in srgb, var(--ink) 2%, var(--win)); }
.tabbar button { border: 0; background: none; display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--faint); padding: 0 8px; height: 46px; }
.tabbar button svg.i { width: 22px; height: 22px; }
.tabbar button.on { color: var(--ink); font-weight: 600; }
.navh { height: 44px; flex: none; display: flex; align-items: center; padding: 0 10px; gap: 4px; color: var(--blue-ink); font-size: 16px; }
.navh button { border: 0; background: none; color: var(--blue-ink); display: flex; align-items: center; gap: 2px; font-size: 16px; padding: 4px; }
.ioshd { padding: 6px 20px 10px; }
.ioshd h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ioshd small { color: var(--muted); font-size: 14px; }
.iosd { flex: 1; overflow-y: auto; padding: 0 20px; scrollbar-width: none; }
.iosd .gh { font-size: 13px; font-weight: 600; color: var(--muted); padding: 14px 4px 6px; }
.iosd .gcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.iosd .r { width: 100%; border: 0; background: none; text-align: left; display: block; padding: 10px 14px; border-top: 1px solid var(--line2); }
.iosd .r:first-child { border-top: 0; }
.iosd .r small { display: block; font-size: 13px; color: var(--muted); }
.iosd .r b { font-weight: 500; font-size: 16px; display: block; }
.fillsheet { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.28); padding: 10px 18px 28px; display: grid; gap: 8px; animation: sheet .25s cubic-bezier(.22,1,.36,1); color: var(--ink); }
.fillsheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line); justify-self: center; }
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
.scrim { position: absolute; inset: 0; z-index: 14; background: rgba(0,0,0,.28); }

/* ===== System sheet ===== */
.sysgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; }
.sysc { grid-column: span 6; display: grid; gap: 14px; align-content: start; min-width: 0; }
.sysc.w { grid-column: span 12; }
@media (max-width: 860px) { .sysc { grid-column: span 12; } }
.sysc h3 { margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 14px; font-weight: 700; }
.sw8 { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.swc i { display: block; height: 52px; border-radius: 8px; }
.swc span { display: block; padding: 6px 0 0; font-size: 13px; line-height: 1.3; font-weight: 600; }
.swc code { font-family: var(--f-mono); font-size: 12px; color: var(--muted); display: block; font-weight: 400; }
.tyrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.tyrow code { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.states { display: flex; flex-wrap: wrap; gap: 18px 24px; }
.stc { display: grid; gap: 8px; justify-items: start; font-size: 13px; color: var(--muted); }
.stc .site { padding: 20px 12px 12px; border-radius: 10px; border: 1px solid var(--line); }
.stc .inp { width: 220px; }
.rowdemo { display: grid; gap: 4px; }
.rowdemo > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.av.md { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
.pop.pm button { padding: 7px 10px; gap: 12px; }
.pop.pm button.cur { background: var(--sel); }
.pop.pm button svg.i:last-child { margin-left: auto; color: var(--ink); }
.appr .who { margin-left: 0; color: var(--muted); font-size: 14px; }
.appr .who b { color: var(--ink); }
.appr .who:hover { background: var(--hover); }

/* ===== Content with its own identity ===== */
.favi { display: inline-grid; place-items: center; border-radius: 7px; flex: none; }
.favi svg { width: 64%; height: 64%; }
.dthumb { background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(18,18,22,.16), 0 1px 3px rgba(0,0,0,.12); overflow: hidden; flex: none; justify-self: center; display: block; }
.dthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.cthumb { width: calc(var(--px) * 1.4); height: var(--px); border-radius: 5px; background: linear-gradient(135deg, #1E2430, #34425F); position: relative; flex: none; justify-self: center; }
.cthumb i { position: absolute; left: 12%; top: 28%; width: 20%; height: 22%; border-radius: 2px; background: #E8C66A; }
.av.md { width: 28px; height: 28px; border-radius: 8px; }
.av.xl { width: 56px; height: 56px; border-radius: 14px; }
.av.lg { width: 36px; height: 36px; border-radius: 10px; }
.lead56 { width: 56px; height: 56px; display: grid; place-items: center; flex: none; }
.lead56 .favi { width: 56px !important; height: 56px !important; border-radius: 14px; }
.lead56 .dthumb { --px: 56px !important; }
.lead56 .cthumb { --px: 40px !important; }

/* site pages with a brand of their own */
.sitehdr { display: flex; align-items: center; gap: 11px; background: #1B3A6B; color: #fff; padding: 12px 32px; font-family: Arial, Helvetica, sans-serif; }
.sitehdr b { font-size: 16px; letter-spacing: .01em; }
.sitehdr nav { margin-left: auto; display: flex; gap: 20px; font-size: 13px; opacity: .88; }
.sitehdr nav .on { font-weight: 700; box-shadow: inset 0 -2px #fff; padding-bottom: 2px; }
.steps { display: flex; align-items: center; gap: 8px; padding: 12px 32px 0; font: 600 12px Arial, Helvetica, sans-serif; color: #5C6370; }
.steps i { width: 24px; height: 3px; border-radius: 2px; background: #CBD0D8; }
.steps i.on { background: #1B3A6B; }
.route { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 11px 14px; border-radius: 8px; background: #EAF3F8; color: #123; font-size: 14px; }
.ptab { width: 100%; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; }
.ptab th, .ptab td { border: 1px solid #CBD0D8; padding: 12px 14px; text-align: left; vertical-align: middle; }
.ptab th { width: 190px; background: #F5F6F8; font-size: 14px; font-weight: 700; }
.ptab th small { display: block; font-weight: 400; color: #5C6370; font-size: 12px; margin-top: 1px; }
.ptab td { padding: 14px 14px 12px; }
.pdfhdr { display: flex; align-items: center; gap: 10px; margin: -28px -34px 14px; padding: 9px 34px; background: #2B3340; color: #fff; font: 600 10.5px Arial, Helvetica, sans-serif; letter-spacing: .08em; }
.pdfhdr span:last-child { margin-left: auto; font-family: var(--f-mono); letter-spacing: .12em; opacity: .8; }

/* ===== Asking: the bar becomes a capsule ===== */
.askhost { position: absolute; z-index: 50; top: 34px; right: 16px; width: 880px; display: grid; gap: 8px; animation: pillin .24s cubic-bezier(.22,1,.36,1); transform-origin: 92% 0; }
.ask { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; background: var(--glass); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 99px; box-shadow: var(--sh-pop); }
.ask .ab { width: 42px; height: 42px; flex: none; display: block; }
.ask .at { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0; border-radius: 10px; }
.ask .at b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.012em; white-space: nowrap; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.ask .at small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.ask .at:hover small { color: var(--ink); }
.ask .no { border: 0; background: none; color: var(--muted); font-weight: 600; padding: 0 12px; height: 40px; border-radius: 99px; font-size: 14px; }
.ask .no:hover { background: var(--hover); color: var(--ink); }
.ask .always { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 0 16px; height: 40px; font-size: 14px; font-weight: 600; }
.ask .always:hover { background: var(--hover); }
.ask .once { border: 0; background: var(--blue); color: #fff; border-radius: 99px; padding: 0 20px; height: 40px; font-size: 14px; font-weight: 600; }
.ask .once:hover { background: color-mix(in srgb, var(--blue) 88%, #000); }
.ask .res { display: grid; place-items: center; flex: none; color: var(--green); }
.ask .res.warn { color: var(--amber); }
.ask .lnk { margin-left: auto; }
.mbi .dot { position: absolute; top: 1px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1.5px var(--mbar); }
.askpanel { background: var(--glass); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 20px; box-shadow: var(--sh-pop); padding: 6px 10px 8px; margin: 0 64px 0 52px; position: relative; animation: popin .16s cubic-bezier(.22,1,.36,1); }
.askpanel .frow { grid-template-columns: 150px minmax(0, 1fr); padding: 9px 4px; margin: 0; }
.askpanel .frow:last-child { border-bottom: 0; }
.askpanel .frow .fv { font-size: 14px; }
.askpanel .who { margin-left: 0; color: var(--muted); font-size: 14px; }
.askpanel .who b { color: var(--ink); }
.askpanel .who:hover { background: var(--hover); }
.term { background: #121318; border-color: #25262E; color: #C8CAD4; }
.term .wbar { background: #1A1B21; border-color: #25262E; }
.term .wbar .t { color: #8B8E9A; }
.term .tb { padding: 14px 16px; font-family: var(--f-mono); font-size: 13px; line-height: 1.75; white-space: pre-wrap; flex: 1; overflow: hidden; }
.term .tb .o { color: #5BD39A; } .term .tb .r { color: #8FB2FF; } .term .tb .d { color: #7B7E8A; } .term .tb .a { color: #F0A26A; }
.bubble { position: absolute; z-index: 45; background: #16171C; color: #fff; border-radius: 14px; padding: 10px 16px; font-size: 14px; line-height: 1.35; box-shadow: var(--sh-pop); animation: popin .2s cubic-bezier(.22,1,.36,1); }
.bubble b { display: block; font-weight: 700; }
.bubble small { color: #B9BBC6; font-size: 13px; }
.inp input.wait { border: 1.5px dashed #2563EB; background: #F6F9FF; font-family: var(--f-mono); color: #1D4ED8; font-size: 14px; }
.ftab.wait { display: block; }

/* per-detail permission in the vault */
.permtag { font-family: var(--f); letter-spacing: 0; display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; color: var(--muted); font-size: 13px; font-weight: 500; vertical-align: 1px; }
.permtag svg.i { width: 14px; height: 14px; }
.permtag.never { color: var(--amber); }
.actrow { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 8px; margin: 0 -8px; border-bottom: 0; }
.actrow b { font-weight: 600; font-size: 15px; display: block; }
.actrow small { color: var(--muted); font-size: 13px; display: block; }
.actrow .w { color: var(--muted); font-size: 14px; }
.actrow .k { font-size: 13px; font-weight: 600; }
.actrow .k.ok { color: var(--green); } .actrow .k.no { color: var(--amber); }

/* motion with a reason: a fill lands, the source name flashes once, content swaps softly */
@keyframes frameIn { 0% { box-shadow: 0 0 0 7px rgba(37,99,235,.26); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } }
.inp input.filled { animation: frameIn .65s cubic-bezier(.22,1,.36,1); }
.ftab.fresh { display: block !important; animation: tabFlash 1.9s ease both; }
@keyframes tabFlash { 0% { opacity: 0; transform: translateY(3px); } 10% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; } }

.vitem, .vnav, .frow, .qrow, .mrow, .docpane .dr { transition: background-color .08s; }
.pillhost.wide { width: 468px; }

.vk-ic.empty { display: none; }
.sitehdr .favi { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }

.frow .fa { gap: 0; }
.frow .fa .srcbtn { margin-right: 2px; }
[data-theme="dark"] .pop { background: var(--win); }
#ctrls, #rowdemo, #fstates, #content { pointer-events: none; user-select: none; }
.wctl svg.i { width: 14px; height: 14px; stroke-width: 1.4; }
.keys i { display: grid; place-items: center; font: 400 16px/1 var(--f); color: #111; font-style: normal; }
[data-theme="dark"] .keys i { color: #fff; }

/* document images with the reader's boxes */
.docimg { position: relative; flex: none; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 12px 32px -8px rgba(0,0,0,.28); }
.docimg img { display: block; width: 100%; height: auto; border-radius: 4px; }
.dbx { position: absolute; border: 1px dashed rgba(37,99,235,.55); border-radius: 3px; background: rgba(37,99,235,.06); padding: 0; transition: background-color .1s, border-color .1s; }
.dbx:hover { background: rgba(37,99,235,.18); border-color: rgba(37,99,235,.9); }
.dbx.on { border: 2px solid #2563EB; background: rgba(37,99,235,.14); border-radius: 0 3px 3px 3px; box-shadow: 0 0 0 3px rgba(37,99,235,.18); z-index: 2; }
.dbx i { position: absolute; left: -2px; bottom: 100%; margin-bottom: 1px; height: 17px; padding: 0 7px; background: #2563EB; color: #fff; font: 700 11px/17px var(--f); font-style: normal; border-radius: 4px 4px 0 0; white-space: nowrap; pointer-events: none; }
.docview { position: relative; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: 18px 24px 32px; }
.docview .pager { position: sticky; top: 0; z-index: 3; align-self: center; flex: none; background: var(--sel); backdrop-filter: blur(10px); }
.dverify { display: flex; align-items: center; gap: 7px; padding: 10px; color: var(--green); font-size: 13px; font-weight: 600; margin-top: 4px; }
.dverify svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.amark { width: var(--px); height: var(--px); border-radius: calc(var(--px) * .28); background: #17181C; display: grid; place-items: center; flex: none; }
.amark .cc { width: calc(var(--px) * .62); height: calc(var(--px) * .39); image-rendering: pixelated; display: block; }
.amark .hm { width: calc(var(--px) * .58); height: calc(var(--px) * .58); filter: invert(1) brightness(1.1); display: block; }
.av img { object-position: center 30%; }

.btn, .seg button, .ibtn, .p-fill, .ask button, .mrow, .qrow, .vnav, .vitem, .tabs button { transition: background-color .08s, transform .08s cubic-bezier(.22,1,.36,1); }
.btn:active, .ibtn:active, .p-fill:active, .ask .once:active, .ask .always:active, .seg button:active { transform: scale(.97); }
.vitem:active, .qrow:active, .mrow:active { transform: scale(.995); }
.btab .favi { border-radius: 4px; }
.lockwin .appicon { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 6px 16px -6px rgba(18,18,22,.35), 0 0 0 1px rgba(18,18,22,.08); }
.docpane { scrollbar-width: thin; }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.xtag { margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--amber); }

.frow .st { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 14px; transition: opacity .08s; pointer-events: none; }
.frow:hover .st, .frow.hl .st, .frow:focus-within .st { opacity: 0; }
.frow .st .permtag { margin: 0; }

.frow.exp .fv { color: var(--amber); }

.imenu .mh .who { white-space: nowrap; flex: none; }
.imenu .mh .sp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ===== Adding a document ===== */
.sheetscrim { position: absolute; inset: 0; z-index: 70; background: rgba(18,18,22,.22); animation: fade .16s ease-out; }
@keyframes fade { from { opacity: 0; } }
.opensheet { position: absolute; z-index: 71; left: 50%; top: 0; width: 540px; transform: translateX(-50%); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-top: 0; border-radius: 0 0 var(--r-pop) var(--r-pop); box-shadow: var(--sh-pop); animation: sheetin .22s cubic-bezier(.22,1,.36,1); }
@keyframes sheetin { from { transform: translate(-50%, -16px); opacity: 0; } }
.osh { padding: 18px 20px 8px; }
.osh b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.osh small { color: var(--muted); font-size: 13px; }
.osl { padding: 4px 10px 8px; display: grid; gap: 1px; max-height: 330px; overflow-y: auto; }
.frw { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: var(--r-row); }
.frw:hover { background: var(--hover); }
.frw.on { background: var(--sel); }
.frw b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frw small { display: block; color: var(--muted); font-size: 13px; }
.ftic { width: 26px; height: 32px; display: block; justify-self: center; }
.osf { display: flex; align-items: center; gap: 12px; padding: 12px 20px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.osf .sp { margin-left: auto; display: flex; gap: 8px; }

/* reading a document */
.capbar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; font-size: 14px; }
.capbar b { font-weight: 600; font-size: 15px; }
.capbar .mut { color: var(--muted); }
.capok { align-self: center; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 14px; font-weight: 600; }
.capok svg.i { width: 15px; height: 15px; stroke-width: 2.4; }
.docimg .pc { position: absolute; border: 1px solid rgba(37,99,235,.4); border-radius: 2px; background: rgba(37,99,235,.05); pointer-events: none; opacity: 0; animation: pcin .3s ease-out forwards; animation-delay: calc(var(--y) * 1000ms); }
.docimg .pc.got { border: 2px solid #2563EB; background: rgba(37,99,235,.14); opacity: 1; animation: gotin .35s cubic-bezier(.22,1,.36,1); animation-delay: 0s; z-index: 2; }
.docimg.still .pc { animation: none; opacity: 1; }
.docimg.still .scan { display: none; }
@keyframes pcin { to { opacity: 1; } }
@keyframes gotin { from { box-shadow: 0 0 0 6px rgba(37,99,235,.28); } to { box-shadow: 0 0 0 0 rgba(37,99,235,0); } }
.scan { position: absolute; inset: 0; pointer-events: none; transform: translateY(-100%); animation: scan 1.1s cubic-bezier(.4,0,.2,1) forwards; z-index: 3; border-radius: 4px; overflow: hidden; }
.scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, rgba(37,99,235,0), rgba(37,99,235,.2)); border-bottom: 2px solid #2563EB; }
@keyframes scan { to { transform: translateY(0); opacity: .0; } 85% { opacity: 1; } }
.dr.in { animation: rowIn .24s cubic-bezier(.22,1,.36,1); }
@keyframes rowIn { from { opacity: 0; transform: translateY(5px); } }
.dr .tag { white-space: nowrap; }
.dr .chk { color: var(--amber); font-size: 13px; margin-top: 2px; }
.capfail { display: grid; gap: 10px; justify-items: start; padding: 22px 16px; }
.capfail b { font-size: 17px; letter-spacing: -.01em; }
.capfail p { margin: 0; color: var(--muted); font-size: 14px; }
.capfail .acts { display: flex; gap: 8px; margin-top: 6px; }
.avfb { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); }
.avfb svg.i { width: 62%; height: 62%; stroke-width: 1.6; }
@media (prefers-reduced-motion: reduce) { .docimg .pc { opacity: 1; } .scan { display: none; } }

.docpane { width: 304px; }
.docpane .dr b { overflow-wrap: break-word; word-break: normal; font-size: 15px; }
.vnav span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docimg.fail img { filter: saturate(.8); }

/* ===== The site's own dropdown, a frame from another site, the card page ===== */
.inp { position: relative; }
.sitelist { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #9AA1AD; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.14); font: 400 15px Arial, Helvetica, sans-serif; color: #1B1F27; }
.sitelist li { padding: 7px 10px; border-radius: 4px; cursor: pointer; }
.sitelist li:hover, .sitelist li.on { background: #E8F0FE; }
.fsec.xf { margin-left: -12px; padding: 10px 12px 14px; border-left: 3px solid #C9CED8; background: #F7F8FA; border-radius: 0 6px 6px 0; }
.fsec.xf .fsh { border-bottom-color: #D7DBE2; }
.xo { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--f); color: #5C6370; padding: 3px 8px; border-radius: 99px; background: #E9ECF1; }
.xo svg.i { width: 12px; height: 12px; }
.xf .fsh .who { margin-left: auto; }
.fsec.xf .fsh h3 { font-size: 15px; }
.gl.need svg.i { color: var(--amber); }
.mlock .gl.need { color: var(--amber); }
.pwline { font-family: var(--f-mono); }

/* ===== First run, delete, Large Type, history, drop ===== */
.firstrun { display: grid; justify-items: center; align-content: center; gap: 12px; padding: 90px 40px; text-align: center; min-height: 100%; }
.firstrun h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.firstrun p { margin: 0; color: var(--muted); font-size: 16px; max-width: 360px; }
.firstrun .acts { display: flex; gap: 8px; margin-top: 6px; }
.confirm { position: absolute; z-index: 72; left: 50%; top: 50%; width: 420px; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--r-pop); box-shadow: var(--sh-pop); padding: 22px; display: grid; gap: 8px; animation: popin .16s cubic-bezier(.22,1,.36,1); }
.confirm b { font-size: 18px; letter-spacing: -.02em; line-height: 1.25; }
.confirm p { margin: 0; color: var(--muted); font-size: 14px; }
.confirm .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn.danger:hover { background: color-mix(in srgb, var(--red) 88%, #000); }
.ltype { position: absolute; z-index: 73; inset: 0; background: var(--surface); display: grid; align-content: center; justify-items: center; gap: 18px; padding: 40px; text-align: center; animation: fade .16s ease-out; }
.lt-l { color: var(--muted); font-size: 16px; }
.lt-v { font-family: var(--f-mono); font-size: 76px; font-weight: 500; letter-spacing: .02em; line-height: 1.15; max-width: 940px; word-break: break-all; }
.lt-v .ld { color: var(--blue-ink); } .lt-v .ls { color: var(--red); } .lt-v .lsp { display: inline-block; width: .5em; }
.lt-h { color: var(--faint); font-size: 13px; }
.hist .hrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.hist .hrow span:first-child { flex: 1; min-width: 0; }
.hist .hrow b { display: block; font-weight: 600; font-size: 15px; }
.hist .hrow small { color: var(--muted); font-size: 13px; }
.hnote { color: var(--muted); font-size: 13px; padding: 6px 10px 8px; }
.dropveil { position: absolute; inset: 0; z-index: 80; background: color-mix(in srgb, var(--blue) 10%, var(--surface)); display: grid; place-items: center; border: 2px dashed var(--blue); border-radius: var(--r-win); }
.dropveil div { display: grid; justify-items: center; gap: 10px; color: var(--blue-ink); font-size: 20px; }
.dropveil svg.i { width: 34px; height: 34px; stroke-width: 1.4; }
.acct small.off { color: var(--amber); font-weight: 600; }
input.lbl { font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; width: 100%; background: var(--paper); color: var(--muted); }
input.lbl:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--sel); color: var(--ink); }
.frw[draggable="true"] { cursor: grab; }

.qfirst { display: grid; justify-items: center; gap: 8px; padding: 20px 16px 16px; text-align: center; }
.qfirst b { font-size: 16px; letter-spacing: -.01em; }
.qfirst p { margin: 0; color: var(--muted); font-size: 14px; max-width: 300px; }
.qfirst .acts { display: flex; gap: 8px; margin-top: 6px; }

.hist .hrow b { white-space: nowrap; }
.hist .hrow .btn { display: inline-flex; width: auto; flex: none; white-space: nowrap; }
.hist .hrow .tag { flex: none; }

#pStat > div b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pStat > div small { display: block; }
#pStat .btn { flex: none; }
.firstrun p, .qfirst p { text-wrap: balance; }

.srcdot { display: inline-flex; align-items: center; opacity: .9; }
.srcdot .dthumb { border-radius: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.dmeta { padding: 18px 32px 8px; color: var(--faint); font-size: 13px; }
.dcard .srow { padding: 12px 16px; border-top: 1px solid var(--line2); }
.dcard .srow:first-child { border-top: 0; }
.dcard .actrow { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line2); }
.dcard .actrow:first-child { border-top: 0; }
.gsrc { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; padding: 2px 4px 2px 8px; border-radius: 7px; }
.gsrc:hover { background: var(--hover); color: var(--ink); }
.gsrc .dthumb { border-radius: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
@keyframes dIn { from { opacity: 0; transform: translateY(5px); } }
.vdet.swap > * { animation: dIn .24s cubic-bezier(.22,1,.36,1) both; }
.vdet.swap > .dgroup:nth-child(3) { animation-delay: .03s; } .vdet.swap > .dgroup:nth-child(4) { animation-delay: .06s; } .vdet.swap > .dgroup:nth-child(n+5) { animation-delay: .09s; }
.ibtn.cp { pointer-events: none; }

/* ===== AI agents, environments, recently deleted, generator ===== */
.waitrow { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; }
.waitrow .wt b { display: block; font-size: 15px; font-weight: 600; }
.waitrow .wt small { display: block; color: var(--muted); font-size: 13px; }
.waitrow .wa { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.polrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line2); font-size: 14px; color: var(--muted); }
.actbar { display: flex; align-items: center; gap: 14px; margin: 16px 0 10px; }
.actbar small { color: var(--muted); font-size: 13px; }
.arow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 84px; gap: 12px; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--line2); background: none; text-align: left; padding: 10px 16px; }
.arow:first-child { border-top: 0; }
.arow:hover { background: color-mix(in srgb, var(--ink) 3.5%, var(--card)); }
.arow b { display: block; font-weight: 600; font-size: 14px; }
.arow small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .aw { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }
.actsheet .why { color: var(--muted); font-size: 13px; margin-left: 6px; }
.opensheet.connect { width: 580px; }
.opensheet.connect .cseg { padding: 0 16px 8px; }
.csteps { margin: 0; padding: 4px 18px 10px 38px; display: grid; gap: 14px; max-height: 420px; overflow-y: auto; }
.csteps li { padding-left: 4px; }
.csteps li b { display: block; font-size: 14px; font-weight: 600; }
.csteps li small { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.codeblk { position: relative; border: 1px solid var(--line); background: var(--canvas); border-radius: 10px; padding: 9px 76px 9px 12px; }
.codeblk pre { margin: 0; font: 13px/1.5 var(--f-mono); white-space: pre-wrap; word-break: break-word; }
.codeblk.tall pre { font-size: 12.5px; max-height: 168px; overflow-y: auto; }
.codeblk .btn { position: absolute; right: 7px; top: 7px; }
.swrow { display: flex; align-items: center; gap: 12px; }
.swl { color: var(--muted); font-size: 13px; min-width: 0; }
.dim { color: var(--muted); }
.sel { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A8A94' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; padding: 6px 30px 6px 11px; font-size: 14px; color: var(--ink); }
.frow .sel { width: 100%; max-width: 240px; }
.inwrap { display: flex; gap: 8px; align-items: center; width: 100%; }
.inwrap input { flex: 1; min-width: 0; }
.envpick { grid-template-columns: 22px minmax(0, 1fr) auto; cursor: pointer; }
.envpick input { accent-color: var(--ink); width: 16px; height: 16px; }
.envkey { width: 100%; border: 0; border-top: 1px solid var(--line2); background: none; text-align: left; grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
.envkey:first-child { border-top: 0; }
.envkey:hover { background: color-mix(in srgb, var(--ink) 3.5%, var(--card)); }
.envkey .fl { font-size: 13px; color: var(--blue-ink); }
.envprev { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 14px; }
.envprev pre { margin: 0; font: 13px/1.7 var(--f-mono); overflow-x: auto; }
.envacts { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.delrow { grid-template-columns: 34px minmax(0, 1fr) auto; }
.delrow .dm b { display: block; font-weight: 600; }
.delrow .dm small { display: block; color: var(--muted); font-size: 13px; }
.delrow .da { display: flex; gap: 6px; }
.delrow .dl { display: grid; place-items: center; }
.exnote { display: flex; gap: 10px; padding: 0 20px 14px; align-items: flex-start; }
.exnote p { margin: 0; font-size: 14px; color: var(--muted); }
.pop.gen { padding: 14px; display: grid; gap: 12px; }
.gprev { display: flex; align-items: center; gap: 8px; background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 10px 12px; }
.gprev .mono { flex: 1; min-width: 0; font: 15px/1.4 var(--f-mono); word-break: break-all; }
.gprev i { font-style: normal; }
.gprev .gd { color: var(--blue-ink); }
.gprev .gs { color: var(--amber); }
.gstr { margin-top: -6px; }
.glen { display: grid; grid-template-columns: 70px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.glen input { accent-color: var(--ink); width: 100%; }
.glen b { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.gopts { display: flex; gap: 18px; font-size: 14px; }
.gopts label { display: flex; align-items: center; gap: 8px; }
.gfoot { display: flex; gap: 8px; justify-content: flex-end; }
.pop.gen .gfoot .btn, .pop.gen .gprev .ibtn { width: auto; }
.pop.gen .seg button { width: auto; display: inline-block; }
.vnav .bd.dot { color: var(--blue); }
.pop .sw { width: 38px; height: 22px; padding: 0; display: inline-block; flex: none; }
.pop .sw:hover { background: var(--faint); }
.pop .sw[aria-checked="true"]:hover { background: var(--ink); }



/* ==========================================================================
   Vowkey Website — Directly built from pitch/deck.html + design/client-experience.html
   + 1Password 8 Reference Stills + Inspo Split-Studio / Feature-Stack Rhythm
   ========================================================================== */
:root {
  --vk-paper: #F5F4F0;
  --vk-card: #FFFFFF;
  --vk-ink: #121216;
  --vk-ink-2: #4A4A55;
  --vk-ink-3: #8A8A94;
  --vk-line: #E2E0DA;
  --vk-night: #0B0B10;
  --vk-blue: #2563EB;
  --vk-blue-soft: #E6EEFE;
  --vk-green: #128A5A;
  --vk-green-soft: #E4F4EC;
  --vk-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Noto Sans JP", system-ui, sans-serif;
  --vk-jp: "Noto Sans JP", "Be Vietnam Pro", sans-serif;
  --vk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

html { scroll-behavior: smooth; }
body {
  background: var(--vk-paper);
  color: var(--vk-ink);
  font-family: var(--vk-sans);
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: rgba(37, 99, 235, 0.16);
  color: var(--vk-ink);
}
.vk-svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.vk-svg .f {
  fill: currentColor;
  fill-opacity: 0.1;
}

/* Sticky Top Bar */
.vk-topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(245, 244, 240, 0.88);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid var(--vk-line);
}
html[data-theme="dark"] .vk-topbar {
  background: rgba(21, 21, 26, 0.88);
  border-bottom-color: #2A2A33;
}
.vk-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 32px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.vk-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: "Geist", var(--vk-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.vk-logo img { width: 26px; height: 26px; }
.vk-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vk-nav a {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vk-ink-2);
  text-decoration: none;
  transition: background 120ms, color 120ms;
}
.vk-nav a:hover {
  color: var(--ink);
  background: rgba(18, 18, 22, 0.05);
}
.vk-topbar-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vk-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--vk-blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px rgba(18, 18, 22, 0.12), 0 6px 16px -6px rgba(37, 99, 235, 0.45);
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-cta-pill:hover { background: #1D4ED8; }
.vk-cta-pill:active { transform: scale(0.985); }
.vk-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  color: var(--vk-ink);
  font-size: 13.5px;
  font-weight: 550;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(18, 18, 22, 0.04);
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1), border-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-cta-ghost:hover { background: #ECEAE3; }
.vk-cta-ghost:active { transform: scale(0.985); }

/* Section Rhythm */
.vk-sec {
  padding-block: clamp(68px, 7.5vw, 96px);
  border-bottom: 1px solid var(--vk-line);
}
.vk-sec.dark {
  background: var(--vk-night);
  color: #F4F4F6;
  border-bottom-color: #22222A;
}
.vk-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 32px;
}
.vk-kicker {
  display: none;
}
.vk-h1 {
  font-size: clamp(38px, 4.7vw, 62px);
  font-weight: 650;
  letter-spacing: -0.034em;
  line-height: 1.06;
  margin: 0;
  max-width: 960px;
  text-wrap: balance;
}
.vk-h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin: 0;
  max-width: 900px;
  text-wrap: balance;
}
.vk-lede {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--vk-ink-2);
  margin-top: 14px;
  max-width: 720px;
}
.vk-sec.dark .vk-lede { color: #B9B9C4; }
.vk-v { color: var(--vk-blue); }
.vk-sec.dark .vk-v { color: #8FB0FF; }
.vk-jp { font-family: var(--vk-jp); white-space: nowrap; }
.vk-mono { font-family: var(--vk-mono); }

/* Slide 01 Chips Row */
.vk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 32px;
}
.vk-chip {
  position: relative;
  border: 2px solid var(--vk-blue);
  background: #fff;
  border-radius: 4px;
  padding: 11px 16px 9px;
  font-family: var(--vk-mono);
  font-size: 15px;
  color: #1E2430;
}
.vk-chip b {
  position: absolute;
  top: -11px;
  left: 10px;
  background: var(--vk-blue);
  color: #fff;
  font-family: var(--vk-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--vk-paper);
}

/* Proportional Scaled Slide 04 Scene Wrapper (1680x760 -> fits 1216px width cleanly) */
.vk-scene-outer {
  margin-top: 40px;
  width: 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(16, 16, 24, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.07);
  background: #EEF1F6;
}
.vk-scene-scaler {
  width: 1680px;
  height: 760px;
  transform-origin: top left;
  position: relative;
  background: radial-gradient(120% 90% at 0% 100%, #DCE6FF 0%, rgba(220,230,255,0) 55%),
              radial-gradient(90% 80% at 100% 0%, #E6ECFA 0%, rgba(230,236,250,0) 60%),
              #EEF1F6;
  overflow: hidden;
  color: #121216;
}
.vk-scene-scaler .mb { position: absolute; left: 0; right: 0; top: 0; height: 38px; display: flex; align-items: center; gap: 22px; padding: 0 22px; font-size: 15.5px; color: #1C1D22; background: rgba(250,250,252,0.82); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid rgba(0,0,0,0.06); z-index: 6; }
.vk-scene-scaler .mb b { font-weight: 700; } .vk-scene-scaler .mb > span { font-weight: 500; }
.vk-scene-scaler .mb-r { margin-left: auto; display: flex; align-items: center; gap: 18px; font-weight: 500; }
.vk-scene-scaler .mb-vk { position: relative; width: 34px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.10); }
.vk-scene-scaler .mb-vk img { width: 20px; height: 20px; }
.vk-scene-scaler .mb-vk.busy::after { content: ""; position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: #2563EB; box-shadow: 0 0 0 2px rgba(250,250,252,0.95); }
.vk-scene-scaler .pl { position: relative; display: inline-flex; align-items: center; gap: 13px; height: 60px; padding: 8px 30px; border-radius: 999px; background: #FFFFFF; border: 1px solid rgba(10,10,12,0.07); box-shadow: 0 1px 2px rgba(10,10,12,0.06), 0 14px 32px -12px rgba(10,10,12,0.22), 0 14px 34px -16px rgba(139,92,246,0.45); white-space: nowrap; font-family: var(--vk-sans); font-size: 19px; font-weight: 600; color: #0A0A0C; }
.vk-scene-scaler .pl-glyph { color: #7C5CF0; font-size: 21px; line-height: 1; margin-right: -4px; }
.vk-scene-scaler .shim { font-weight: 600; background: linear-gradient(90deg, #6D4AE8 0%, #6D4AE8 32%, #A78BFA 46%, #D9CCFF 52%, #A78BFA 58%, #6D4AE8 72%, #6D4AE8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vk-scene-scaler .xl { width: 26px; height: 26px; border-radius: 7px; background: #1D6F42; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.vk-scene-scaler .pl-meta { font-family: var(--vk-mono); font-size: 14.5px; font-weight: 600; color: #8E8E93; }
.vk-scene-scaler .dwin { position: absolute; background: #fff; border-radius: 16px; box-shadow: 0 28px 70px rgba(30,24,50,0.18), 0 0 0 1px rgba(0,0,0,0.06); overflow: hidden; }
.vk-scene-scaler .win-bar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #F7F6F4; border-bottom: 1px solid #E8E6E1; font-size: 15px; color: #6B6B75; }
.vk-scene-scaler .dot { width: 12px; height: 12px; border-radius: 50%; }
.vk-scene-scaler .win-title { flex: 1; text-align: center; font-weight: 600; color: #3A3A42; margin-right: 60px; }
.vk-scene-scaler .src-box { position: absolute; border: 3px solid #2F6BFF; border-radius: 2px; background: rgba(47,107,255,0.07); box-shadow: 0 0 0 4px rgba(47,107,255,0.14); }
.vk-scene-scaler .src-tag { position: absolute; top: -15px; right: 10px; background: #2F6BFF; color: #fff; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.vk-scene-scaler .rk { font-family: var(--vk-jp); color: #111; background: #fff; padding: 12px 18px 0; }
.vk-scene-scaler .rk-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; }
.vk-scene-scaler .rk-title { font-size: 19px; font-weight: 700; letter-spacing: 0.5em; }
.vk-scene-scaler .rk-date { font-size: 11px; }
.vk-scene-scaler .rk-grid { display: grid; grid-template-columns: 1fr 76px; gap: 0 10px; }
.vk-scene-scaler table.rk-t { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.vk-scene-scaler table.rk-t td { border: 1px solid #222; padding: 3px 7px; vertical-align: top; position: relative; }
.vk-scene-scaler table.rk-t .sm { font-size: 9.5px; color: #333; }
.vk-scene-scaler table.rk-t .big { font-size: 18px; font-weight: 500; letter-spacing: 0.06em; }
.vk-scene-scaler .rk-photo { border: 1px dashed #777; height: 96px; background: linear-gradient(#EEF0F3, #E2E5EA); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.vk-scene-scaler .rk-hist td { height: 22px; }
.vk-scene-scaler .rk-hist td.y { width: 44px; text-align: center; } .vk-scene-scaler .rk-hist td.m { width: 26px; text-align: center; }
.vk-scene-scaler .xl-ribbon { height: 40px; background: #F3F2F0; border-bottom: 1px solid #E3E1DC; display: flex; align-items: center; gap: 26px; padding: 0 22px; font-size: 14px; color: #55555E; }
.vk-scene-scaler .xl-ribbon b { color: #1D6F42; border-bottom: 2px solid #1D6F42; padding-bottom: 8px; margin-top: 10px; }
.vk-scene-scaler .xl-fx { height: 38px; display: flex; align-items: center; border-bottom: 1px solid #E3E1DC; font-size: 15px; }
.vk-scene-scaler .xl-fx .ref { width: 86px; text-align: center; color: #55555E; border-right: 1px solid #E3E1DC; height: 100%; display: flex; align-items: center; justify-content: center; }
.vk-scene-scaler .xl-fx .fx { width: 46px; text-align: center; color: #9A9AA3; font-style: italic; border-right: 1px solid #E3E1DC; height: 100%; display: flex; align-items: center; justify-content: center; }
.vk-scene-scaler .xl-fx .val { padding-left: 14px; color: #2563EB; font-family: var(--vk-mono); font-size: 15px; }
.vk-scene-scaler .xl-cols { display: grid; grid-template-columns: 34px repeat(8, 1fr); height: 26px; background: #F7F6F4; border-bottom: 1px solid #E3E1DC; font-size: 12px; color: #8A8A94; }
.vk-scene-scaler .xl-cols span { display: flex; align-items: center; justify-content: center; border-right: 1px solid #ECEAE6; }
.vk-scene-scaler .xl-sheet { position: relative; padding: 22px 34px 0 64px; background-image: linear-gradient(#EFEDE9 1px, transparent 1px), linear-gradient(90deg, #EFEDE9 1px, transparent 1px); background-size: 100% 34px, 96px 100%; height: 100%; }
.vk-scene-scaler .xl-rows { position: absolute; left: 0; top: 0; bottom: 0; width: 34px; background: #F7F6F4; border-right: 1px solid #E3E1DC; }
.vk-scene-scaler .f-title { text-align: center; font-family: "Times New Roman", "Noto Serif", serif; font-size: 22px; letter-spacing: 0.02em; margin: 6px 0 18px; }
.vk-scene-scaler .f-sec { font-family: "Times New Roman", "Noto Serif", serif; font-size: 17px; margin: 0 0 8px 40px; }
.vk-scene-scaler table.f { width: 100%; border-collapse: collapse; background: #fff; font-family: "Times New Roman", "Noto Serif", serif; }
.vk-scene-scaler table.f td { border: 1.5px solid #111; height: 64px; font-size: 13px; vertical-align: middle; position: relative; }
.vk-scene-scaler table.f td.lb { width: 92px; text-align: center; padding: 0 6px; }
.vk-scene-scaler table.f td.fv { padding: 0 12px; }
.vk-scene-scaler .fill { position: absolute; inset: 7px 6px 6px; border: 2.5px solid #2F6BFF; background: rgba(47,107,255,0.07); box-shadow: 0 0 0 3px rgba(47,107,255,0.12); border-radius: 2px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-family: var(--vk-sans); font-size: 19px; font-weight: 600; color: #15151A; }
.vk-scene-scaler .badge { font-size: 12.5px; font-weight: 700; color: #2F6BFF; background: #fff; border: 1px solid #C9D8FF; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.vk-scene-scaler .typing { position: absolute; inset: 4px; border: 3px solid #2F6BFF; background: rgba(47,107,255,0.06); border-radius: 2px; display: flex; align-items: center; padding: 0 12px; font-family: var(--vk-sans); font-size: 19px; font-weight: 600; color: #15151A; box-shadow: 0 0 0 4px rgba(47,107,255,0.14); }
.vk-scene-scaler .caret { display: inline-block; width: 2px; height: 22px; background: #2F6BFF; margin-left: 2px; }
.vk-scene-scaler .cursor { position: absolute; z-index: 7; display: flex; align-items: flex-start; }
.vk-scene-scaler .cursor .cpill { margin: 26px 0 0 -8px; background: #2F6BFF; color: #fff; font-size: 15px; font-weight: 700; padding: 4px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(47,107,255,0.35); }
.vk-scene-scaler .dwin.dterm { right: 22px; top: 114px; width: 506px; background: #141413; box-shadow: 0 30px 80px rgba(10,12,20,0.38), 0 0 0 1px rgba(0,0,0,0.35); z-index: 8; border-radius: 14px; }
.vk-scene-scaler .term-bar { height: 36px; background: #2A2A28; border-bottom: 1px solid #0E0E0D; color: #9A9A95; }
.vk-scene-scaler .term-bar .win-title { color: #B5B4AE; font-weight: 500; font-family: var(--vk-mono); font-size: 12.5px; }
.vk-scene-scaler .cc { font-family: var(--vk-mono); font-size: 13px; line-height: 1.38; color: #E8E6E1; padding: 12px 18px 12px; }
.vk-scene-scaler .cc-l { white-space: pre; }
.vk-scene-scaler .cc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.vk-scene-scaler .cc-logo { width: 54px; height: 34px; }
.vk-scene-scaler .cc-head div { display: flex; flex-direction: column; line-height: 1.35; }
.vk-scene-scaler .cc-head b { color: #F4F3EE; font-weight: 700; } .vk-scene-scaler .cc-head span { color: #8E8D86; font-size: 12px; }
.vk-scene-scaler .cc .u { color: #8E8D86; margin-bottom: 4px; }
.vk-scene-scaler .cc .ok { color: #4ADE80; }
.vk-scene-scaler .cc .g { color: #7A7973; } .vk-scene-scaler .cc .q { color: #E9C46A; } .vk-scene-scaler .cc .t { color: #8FB0FF; }
.vk-scene-scaler .cc .r { color: #A9A8A2; padding-left: 20px; }
.vk-scene-scaler .cc .sp { color: #D97757; margin-top: 4px; } .vk-scene-scaler .cc .sp b { color: #D97757; }
.vk-scene-scaler .cc-input { margin-top: 5px; border: 1px solid #4A4944; border-radius: 8px; padding: 6px 12px; color: #8E8D86; }
.vk-scene-scaler .cc-caret { display: inline-block; width: 8px; height: 16px; background: #E8E6E1; vertical-align: -3px; }

/* Slide 02 Problem Cards & Voice Bar */
.vk-cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}
.vk-card {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 22px;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
}
.vk-tag {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--vk-ink-3);
  margin-bottom: 12px;
}
.vk-stat-n {
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--vk-blue);
}
.vk-stat-t {
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--vk-ink-2);
  margin-top: 14px;
}
.vk-src {
  font-size: 13.5px;
  color: var(--vk-ink-3);
  margin-top: auto;
  padding-top: 18px;
}
.vk-voice {
  margin-top: 24px;
  background: var(--vk-ink);
  border-radius: 20px;
  padding: 24px 32px;
  color: #C9C9D2;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
}

/* Slide 03 Flow & 3-Row Icon Wall */
.vk-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}
.vk-flow > div {
  font-size: 16px;
  line-height: 1.55;
  color: var(--vk-ink-2);
  padding-top: 16px;
  border-top: 1px solid var(--vk-line);
}
.vk-flow > div > b {
  display: block;
  color: var(--vk-ink);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.vk-lwall {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}
.vk-lrow {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--vk-line);
}
.vk-lrow:first-child { border-top: 1px solid var(--vk-line); }
.vk-lrow-en { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; color: var(--vk-ink); }
.vk-lrow-sub { display: none; }
.vk-lrow-t { display: flex; gap: 20px; flex-wrap: wrap; }
.vk-lt { flex: 1; min-width: 112px; padding: 0 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--vk-ink); }
.vk-lt-i { height: 48px; display: flex; align-items: center; justify-content: center; color: var(--vk-ink); }
.vk-lt-i svg { width: 42px; height: 42px; }
.vk-lt-n { font-size: 15px; font-weight: 600; color: var(--vk-ink-2); white-space: nowrap; }
.vk-ftile { width: 38px; height: 46px; border-radius: 5px 11px 5px 5px; color: #fff; font-weight: 800; font-size: 13.5px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }

/* Slide 05 Market Gap Table & 1Password Reference Pairings */
table.vk-t {
  border-collapse: collapse;
  width: 100%;
  font-size: 15.5px;
  margin-top: 32px;
  font-variant-numeric: tabular-nums;
}
table.vk-t th {
  text-align: left;
  font-size: 13px;
  color: var(--vk-ink-3);
  font-weight: 600;
  padding: 0 20px 12px 0;
  border-bottom: 1px solid var(--vk-ink);
}
table.vk-t td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--vk-line);
  color: var(--vk-ink-2);
  vertical-align: top;
  line-height: 1.45;
}
table.vk-t td:first-child { color: var(--vk-ink); font-weight: 600; }
table.vk-t .yes { color: var(--vk-green); font-weight: 600; }

/* 1Password Reference vs Vowkey Visual Comparison Rows */
.vk-ref-stack {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vk-ref-row {
  display: grid;
  grid-template-columns: 1fr 44px 1.15fr;
  align-items: stretch;
}
.vk-ref-col {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 18px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vk-ref-col.op { background: #ECEAE3; }
.vk-ref-col.vk { border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 12px 32px -18px rgba(37, 99, 235, 0.16); }
.vk-ref-arr {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vk-ink-3);
}
.vk-ref-col h3 { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; margin: 0; }
.vk-ref-col p { font-size: 15px; line-height: 1.5; color: var(--vk-ink-2); margin: 0; }
.vk-ref-shot {
  margin-top: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  box-shadow: 0 12px 28px -12px rgba(16,16,24,0.14);
}
.vk-ref-shot img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* Slide 07 Mizuho Bank Zengin Form */
.vk-mz { font-family: var(--vk-jp); color: #15151A; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #D9DEE6; }
.vk-mz-h { background: #13265E; color: #fff; padding: 12px 16px 10px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #D0263A; }
.vk-mz-t { font-size: 14px; font-weight: 700; } .vk-mz-s { font-size: 10px; opacity: 0.85; margin-top: 2px; }
.vk-mz-sec { font-size: 12px; font-weight: 700; color: #13265E; margin: 12px 16px 6px; padding-left: 8px; border-left: 3px solid #13265E; }
table.vk-mz-tb { width: calc(100% - 32px); margin: 0 16px 14px; border-collapse: collapse; }
table.vk-mz-tb td { border: 1px solid #D9DEE6; height: 46px; }
td.vk-mz-l { width: 148px; background: #F3F5F8; font-size: 11px; padding: 0 8px; }
.vk-mz-req { display: inline-block; background: #D0263A; color: #fff; font-size: 8.5px; font-weight: 700; padding: 1px 4px; border-radius: 3px; margin-left: 3px; }
td.vk-mz-v { padding: 10px 8px 4px; }
.vk-mzf { position: relative; border: 2px solid #2F6BFF; background: rgba(47,107,255,0.07); border-radius: 3px; height: 28px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.vk-mzf-tag { position: absolute; left: 6px; top: -10px; background: #2F6BFF; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; font-family: var(--vk-sans); }
.vk-mzf-bdg { font-size: 10.5px; font-weight: 700; color: #2F6BFF; background: #fff; border: 1px solid #C9D8FF; border-radius: 999px; padding: 1px 7px; }

/* Slide 12 Permission Banner */
.vk-perm {
  margin-top: 28px;
  padding: 24px 28px;
  border-radius: 22px;
  border: 1px solid var(--vk-line);
  display: flex;
  align-items: center;
  gap: 18px;
  background: radial-gradient(70% 140% at 0% 100%, #DCE6FF 0%, rgba(220,230,255,0) 60%),
              radial-gradient(60% 120% at 100% 0%, #E8EEFB 0%, rgba(232,238,251,0) 60%),
              #EEF1F6;
  flex-wrap: wrap;
}
.vk-mx { width: 360px; flex: none; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 32px -12px rgba(22,28,45,0.22), 0 0 0 1px rgba(0,0,0,0.05); color: #121216; }
.vk-mx-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #F7F6F4; border-bottom: 1px solid #ECEAE6; font-size: 12px; color: #6B6B75; }
.vk-mx-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; display: inline-block; }
.vk-mx-bar i:nth-child(2) { background: #FEBC2E; } .vk-mx-bar i:nth-child(3) { background: #28C840; }
.vk-mx-bar span { flex: 1; text-align: center; margin-right: 30px; font-family: var(--vk-jp); font-weight: 600; color: #3A3A42; }
.vk-mx-row { display: grid; grid-template-columns: 112px 1fr; height: 74px; }
.vk-mx-lb { border-right: 1px solid #DCDAD4; font-family: "Times New Roman", serif; font-size: 13.5px; display: flex; align-items: center; justify-content: center; }
.vk-mx-v { padding: 22px 12px 0; }
.vk-wf { position: relative; height: 36px; border: 2px dashed #2F6BFF; border-radius: 0 7px 7px 7px; display: flex; align-items: center; padding: 0 12px; font-family: var(--vk-mono); font-size: 14px; font-weight: 600; color: #2563EB; }
.vk-wf .tb { position: absolute; left: -2px; bottom: 100%; height: 20px; line-height: 20px; padding: 0 8px; background: #2F6BFF; color: #fff; font-family: var(--vk-sans); font-size: 11px; font-weight: 700; border-radius: 6px 6px 0 0; }
.vk-cn { flex: 1; min-width: 32px; position: relative; height: 4px; background-image: radial-gradient(circle, #8FB0FF 1.6px, transparent 1.9px); background-size: 11px 4px; background-repeat: repeat-x; }
.vk-ask-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid rgba(10,10,12,0.07); box-shadow: 0 14px 32px -12px rgba(10,10,12,0.22); color: #0A0A0C; flex-wrap: wrap; }
.vk-ask-ag { width: 36px; height: 36px; border-radius: 50%; background: #D97757; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.vk-ask-tx { display: flex; flex-direction: column; line-height: 1.25; padding-right: 12px; }
.vk-ask-tx b { font-size: 15px; font-weight: 700; } .vk-ask-tx small { font-size: 12.5px; color: #6B6B75; }
.vk-ask-b { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; }
.vk-ask-b.q { color: #52525B; }
.vk-ask-b.s { background: #F2F2F4; color: #121216; }
.vk-ask-b.p { background: var(--vk-blue); color: #FFFFFF; }

/* Slide 06 Dark Tech Stack Pipeline */
.vk-pipe {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
  align-items: stretch;
}
.vk-pstep {
  background: #15151C;
  border: 1px solid #26262E;
  border-radius: 20px;
  padding: 24px 22px;
}
.vk-pstep.hot { border-color: #3B7BFF; box-shadow: 0 0 0 1px #3B7BFF; }
.vk-pn { font-size: 14px; font-weight: 600; color: #8A8A96; }
.vk-pt { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; line-height: 1.2; color: #FFFFFF; }
.vk-pk { display: block; font-size: 14.5px; font-weight: 700; color: #8FB0FF; margin-top: 8px; padding-bottom: 14px; border-bottom: 1px solid #282B38; }
.vk-pstep p { font-size: 15.5px; line-height: 1.5; color: #A9A9B6; margin-top: 14px; }
.vk-parr { display: flex; align-items: center; justify-content: center; font-size: 22px; color: #5D5D6A; }
.vk-anote {
  margin-top: 24px;
  border-radius: 18px;
  background: #12141C;
  border: 1px solid #262A36;
  padding: 22px 26px;
}
.vk-anote-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.vk-anote-h b { font-size: 20px; color: #fff; }
.vk-anote-h span { font-size: 15px; color: #8A8A96; }
.vk-anote-b { display: grid; grid-template-columns: 1.05fr 36px 1fr; align-items: center; margin-top: 16px; }
.vk-acode { margin: 0; font-family: var(--vk-mono); font-size: 14px; line-height: 1.5; color: #C9CCD6; background: #0A0C12; border: 1px solid #262A36; border-radius: 12px; padding: 14px 18px; overflow-x: auto; }
.vk-acode .k { color: #fff; font-weight: 700; } .vk-acode .f { color: #8A8FA0; } .vk-acode .s { color: #8FB0FF; }
.vk-acode .n { color: #0A0C12; background: #FFE58A; border-radius: 4px; padding: 0 4px; }
.vk-achk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: #D7D9E0; }
.vk-achk i { font-style: normal; display: inline-flex; width: 22px; height: 22px; border-radius: 5px; background: #2563EB; color: #fff; font-size: 13px; font-weight: 800; align-items: center; justify-content: center; margin-right: 10px; }
.vk-achk i.w { background: #C98A1A; }

/* Slide 08 Real Agency Use Case + Paper Studio */
.vk-usecase-row {
  display: grid;
  grid-template-columns: 0.9fr 64px 1.3fr;
  align-items: center;
  margin-top: 36px;
}
.vk-shot { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(16,16,24,0.16), 0 0 0 1px rgba(0,0,0,0.08); background: #fff; }
.vk-shot img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: top center; }
.vk-studio-box {
  margin-top: 44px;
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 22px;
  overflow: hidden;
}
.vk-studio-head {
  padding: 16px 24px;
  background: #ECEAE3;
  border-bottom: 1px solid var(--vk-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.vk-studio-body {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
}
.vk-studio-canvas {
  padding: 24px;
  background: var(--vk-paper);
  border-right: 1px solid var(--vk-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vk-studio-canvas img {
  max-width: 100%;
  max-height: 460px;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(16,16,24,0.14);
}
.vk-studio-info {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vk-form-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.vk-form-link {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 16px;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--vk-ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 120ms, transform 120ms;
}
.vk-form-link:hover { border-color: var(--vk-blue); transform: translateY(-2px); }
.vk-form-link b { font-size: 17px; font-weight: 700; }
.vk-form-link span { font-size: 14px; color: var(--vk-ink-2); line-height: 1.45; }

/* Preserved Form Detail Page Styles (for site/forms/*.html) */
.topbar { position: sticky; top: 0; z-index: 80; background: rgba(245,244,240,0.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; }
.topbar-nav { display: flex; gap: 12px; }
.topbar-nav a { font-size: 13px; color: var(--muted); padding: 5px 10px; border-radius: 6px; text-decoration: none; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }
.lang-switch { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
.lang-btn { padding: 3px 8px; border-radius: 5px; font-size: 12px; color: var(--muted); border: 0; background: none; cursor: pointer; }
.lang-btn.active { background: var(--surface); color: var(--ink); font-weight: 600; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.form-page-header { padding: 32px 0 24px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.form-page-title-row { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.form-page-title-row h1 { margin: 8px 0; font-size: 28px; font-weight: 720; letter-spacing: -0.02em; }
.form-page-title-row p { margin: 0; color: var(--muted); max-width: 68ch; font-size: 15px; }
.form-page-cta-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.form-page-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; padding: 28px 0; align-items: start; }
.form-viewer-card, .mapping-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.form-viewer-toolbar { padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.viewer-tabs { display: flex; gap: 4px; }
.viewer-tab { padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 550; color: var(--muted); border: 0; background: none; cursor: pointer; }
.viewer-tab.active { background: var(--surface); color: var(--ink); }
.form-viewer-canvas { padding: 18px; background: var(--canvas); display: flex; justify-content: center; }
.form-viewer-canvas img { max-width: 100%; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.form-viewer-caption { padding: 10px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
.mapping-card { padding: 18px 20px; }
.mapping-card h2 { margin: 0 0 6px; font-size: 18px; }
.mapping-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 12px; }
.mapping-table th, .mapping-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.mapping-table th { background: var(--card); font-weight: 640; }
.vk-token-pill { font-family: var(--f-mono); font-size: 11.5px; background: var(--blue-fill); color: var(--blue-ink); padding: 2px 6px; border-radius: 5px; }
.status-badge { display: inline-flex; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-badge.filled { background: var(--green-fill); color: var(--green); }
.status-badge.skip { background: var(--amber-fill); color: var(--amber); }

@media (max-width: 980px) {
  .vk-cards-2, .vk-flow, .vk-lrow, .vk-ref-row, .vk-pipe, .vk-anote-b, .vk-usecase-row, .vk-studio-body, .vk-form-grid, .form-page-grid {
    grid-template-columns: 1fr;
  }
  .vk-ref-arr, .vk-parr { display: none; }
}


/* ==========================================================================
   Normalized Customer Hero & 1Password vs. Vowkey Side-by-Side Stage
   (Uses exact video & pitch deck tokens: #F5F4F0, #2563EB, #0B0B10, Be Vietnam Pro, JetBrains Mono)
   ========================================================================== */
.vk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.vk-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1), border-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-btn-lg.primary {
  background: var(--vk-blue);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px rgba(18, 18, 22, 0.14), 0 10px 24px -10px rgba(37, 99, 235, 0.55);
}
.vk-btn-lg.primary:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}
.vk-btn-lg.primary:active {
  transform: scale(0.985);
}
.vk-btn-lg.secondary {
  background: var(--vk-card);
  color: var(--vk-ink);
  border-color: var(--vk-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(18, 18, 22, 0.04);
}
.vk-btn-lg.secondary:hover {
  background: #ECEAE3;
}
.vk-btn-lg.secondary:active {
  transform: scale(0.985);
}
.vk-btn-lg svg.nudge,
.vk-form-link svg.nudge,
.vk-studio-link svg.nudge {
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-btn-lg:hover svg.nudge,
.vk-form-link:hover svg.nudge,
.vk-studio-link:hover svg.nudge {
  transform: translateX(2.5px);
}
.vk-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--vk-ink-3);
}
.vk-hero-meta a {
  color: var(--vk-ink-2);
  text-decoration: none;
  transition: color 140ms ease;
}
.vk-hero-meta a:hover {
  color: var(--vk-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vk-hero-meta .sep {
  color: #C5C3BC;
  user-select: none;
}

/* Side-by-Side Stage Outer */
.vk-sbs-stage {
  margin-top: 32px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 22, 0.09);
  box-shadow: 0 24px 60px -16px rgba(16, 16, 24, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03);
  background:
    radial-gradient(120% 90% at 0% 100%, #DCE6FF 0%, rgba(220, 230, 255, 0) 55%),
    radial-gradient(90% 80% at 100% 0%, #E6ECFA 0%, rgba(230, 236, 250, 0) 60%),
    #EEF1F6;
  color: #121216;
}

/* Stage Top Bar */
.vk-sbs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  background: rgba(250, 250, 252, 0.88);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(18, 18, 22, 0.07);
  flex-wrap: wrap;
}
.vk-sbs-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #6B6D78;
}
.vk-sbs-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #6B6D78;
  white-space: nowrap;
}
.vk-sbs-cue svg {
  color: var(--vk-blue);
  opacity: 0.72;
}
@media (max-width: 900px) {
  .vk-sbs-cue { display: none; }
}
.vk-sbs-dots {
  display: inline-flex;
  gap: 6px;
}
.vk-sbs-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.vk-sbs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(18, 18, 22, 0.06);
  padding: 4px;
  border-radius: 999px;
}
.vk-sbs-tab {
  border: 0;
  background: transparent;
  padding: 7px 15px;
  border-radius: 999px;
  font-family: var(--vk-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: #4A4A55;
  cursor: pointer;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.vk-sbs-tab:hover {
  color: #121216;
}
.vk-sbs-tab.active {
  background: #FFFFFF;
  color: #121216;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(18, 18, 22, 0.1);
}
.vk-sbs-replay {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  background: #FFFFFF;
  color: var(--vk-blue);
  font-family: var(--vk-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
  transition: background-color 150ms cubic-bezier(0.22, 1, 0.36, 1), transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-sbs-replay svg {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-sbs-replay:hover {
  background: var(--vk-blue-soft);
}
.vk-sbs-replay:hover svg {
  transform: rotate(35deg);
}
.vk-sbs-replay:active {
  transform: scale(0.985);
}

/* Split-Screen Grid Inside Stage */
.vk-sbs-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 18px;
  padding: 20px;
  align-items: stretch;
}
.vk-sbs-win {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(18, 18, 22, 0.09);
  box-shadow: 0 16px 40px -12px rgba(20, 24, 40, 0.1);
  position: relative;
}
.vk-sbs-win.op-win {
  background: #FAFAFC;
}
.vk-sbs-win.vk-win {
  border: 1.5px solid rgba(37, 99, 235, 0.48);
  box-shadow: 0 20px 48px -14px rgba(37, 99, 235, 0.16);
}

/* Window Header inside Split Screen */
.vk-sbs-win-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #E6E5E0;
  background: #F4F3EF;
  flex-wrap: wrap;
}
.vk-sbs-win.vk-win .vk-sbs-win-head {
  background: #F3F7FF;
  border-bottom-color: #D6E3FF;
}
.vk-sbs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vk-sbs-brand-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  flex: none;
}
.vk-sbs-brand-ic.op {
  background: #1A2B49;
  color: #FFFFFF;
}
.vk-sbs-brand-ic.vk {
  background: #2563EB;
  color: #FFFFFF;
}
.vk-sbs-brand b {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: #121216;
  line-height: 1.2;
}
.vk-sbs-brand small {
  display: none;
}
.vk-sbs-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vk-sbs-score.op {
  background: #FBF0DE;
  color: #9A5206;
  border: 1px solid #F1D2A2;
}
.vk-sbs-score.vk {
  background: #2563EB;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Form Context Banner inside each Window */
.vk-sbs-form-banner {
  padding: 10px 18px;
  background: #FFFFFF;
  border-bottom: 1px solid #ECEAE4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: #5B5D66;
}
.vk-sbs-form-banner b {
  color: #121216;
  font-weight: 700;
  font-size: 13.5px;
}

/* Rows inside the Side-by-Side Form */
.vk-sbs-rows {
  padding: 14px 18px 16px;
  display: grid;
  gap: 11px;
  flex: 1;
}
.vk-sbs-row {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.vk-sbs-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: #4A4A55;
  line-height: 1.25;
}
.vk-sbs-box {
  position: relative;
  min-height: 38px;
  border-radius: 6px;
  padding: 6px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* 1Password basic filled field (first 3 fields) */
.vk-sbs-box.op-ok {
  background: #F3F4F6;
  border: 1.5px solid #CBD0D8;
  color: #1E2430;
}
.vk-sbs-box.op-ok .src-pill {
  font-size: 11px;
  font-weight: 600;
  color: #5B5D66;
  background: #E5E7EB;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
/* 1Password missed/empty field (the remaining 7 fields!) */
.vk-sbs-box.op-miss {
  background: #FFF9F5;
  border: 1.5px dashed #E09F67;
  color: #9A4D12;
  font-weight: 500;
  font-size: 12.5px;
}
.vk-sbs-box.op-miss .miss-tag {
  font-size: 11px;
  font-weight: 700;
  color: #B45309;
  background: #FEF3C7;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Vowkey Filled Field (Exact video & pitch deck @vk: blue frame + top-left floating pill + source badge) */
.vk-sbs-box.vk-ok {
  background: rgba(47, 107, 255, 0.06);
  border: 2px solid #2F6BFF;
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.10);
  color: #121216;
  border-radius: 0 6px 6px 6px;
  margin-top: 6px;
}
.vk-sbs-box.vk-ok .vk-flt {
  position: absolute;
  top: -15px;
  left: -2px;
  background: #2F6BFF;
  color: #FFFFFF;
  font-family: var(--vk-sans);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px 4px 0 0;
  line-height: 14px;
  white-space: nowrap;
}
.vk-sbs-box.vk-ok .vk-val {
  font-family: var(--vk-sans);
  font-weight: 700;
  color: #121216;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vk-sbs-box.vk-ok .vk-val.mono {
  font-family: var(--vk-mono);
  font-size: 13px;
}
.vk-sbs-box.vk-ok .vk-src-bdg {
  font-size: 11px;
  font-weight: 700;
  color: #2563EB;
  background: #FFFFFF;
  border: 1px solid #C9D8FF;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.vk-sbs-box.vk-ok.animating {
  background: rgba(47, 107, 255, 0.14);
  font-family: var(--vk-mono);
  color: #2563EB;
}

/* Window Footer Summary Bar */
.vk-sbs-foot {
  padding: 12px 18px;
  border-top: 1px solid #E6E5E0;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vk-sbs-foot.op {
  background: #F5F2EB;
  color: #7C4A15;
}
.vk-sbs-foot.vk {
  background: #EBF3FF;
  color: #1E40AF;
  border-top-color: #C9D8FF;
}

/* Clean Video-Style 3-Pane Vault & Everyday Scenes (No creepy raw ID scans!) */
.vk-everyday-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.vk-everyday-card {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 22px;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 28px rgba(18, 18, 22, 0.04);
}
.vk-everyday-card h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.vk-everyday-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--vk-ink-2);
}
.vk-mini-ui {
  margin-top: auto;
  background: #F5F6FA;
  border: 1px solid #E2E5EE;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.vk-mini-row {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 9px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.vk-mini-row b {
  color: #121216;
  font-weight: 700;
}
.vk-mini-row code {
  font-family: var(--vk-mono);
  font-size: 12.5px;
  color: #2563EB;
  background: #EBF2FF;
  padding: 2px 7px;
  border-radius: 5px;
}

/* Interactive 4-Tab Normalized App Showcase (Modeled on Video Frames f-02, f-04, f-10, f-12) */
.vk-tour-shell {
  margin-top: 32px;
  border-radius: 24px;
  border: 1px solid var(--vk-line);
  background: var(--vk-card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(18, 18, 22, 0.08);
}
.vk-tour-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  background: #F4F3EF;
  border-bottom: 1px solid var(--vk-line);
}
.vk-tour-btn {
  border: 1px solid transparent;
  background: transparent;
  padding: 9px 16px;
  border-radius: 10px;
  font-family: var(--vk-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--vk-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vk-tour-btn:hover {
  color: var(--vk-ink);
  background: rgba(18, 18, 22, 0.04);
}
.vk-tour-btn.active {
  background: #FFFFFF;
  color: var(--vk-blue);
  border-color: #C9D8FF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.vk-tour-pane {
  display: none;
  padding: 28px;
  background:
    radial-gradient(90% 80% at 0% 100%, #DCE6FF 0%, rgba(220, 230, 255, 0) 55%),
    #EEF1F6;
}
.vk-tour-pane.active {
  display: block;
}

/* Clean 3-Pane Vault Mock inside Tour Pane 1 (Directly from Video Frame f-02.jpg) */
.vk-vault-mock {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(18, 18, 22, 0.1);
  box-shadow: 0 24px 56px rgba(16, 20, 36, 0.14);
  display: grid;
  grid-template-columns: 220px 260px 1fr;
  min-height: 400px;
  overflow: hidden;
}
.vk-vm-side {
  background: #F3F2EE;
  border-right: 1px solid #E4E2DC;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vk-vm-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E4E2DC;
}
.vk-vm-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2563EB;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
}
.vk-vm-cat {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #4A4A55;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vk-vm-cat.on {
  background: #DCE6FF;
  color: #1D4ED8;
  font-weight: 700;
}
.vk-vm-mid {
  border-right: 1px solid #E4E2DC;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FAFAFC;
}
.vk-vm-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid #E6E5E0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vk-vm-item.on {
  border-color: #2563EB;
  background: #F0F5FF;
}
.vk-vm-det {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Pricing / Download 3-Column Grid */
.vk-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.vk-price-card {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vk-price-card.featured {
  border: 1.5px solid rgba(37, 99, 235, 0.5);
  box-shadow: 0 18px 42px -18px rgba(37, 99, 235, 0.18);
}
.vk-price-num {
  font-size: 36px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--vk-ink);
  font-variant-numeric: tabular-nums;
}
.vk-price-num small {
  font-size: 15px;
  font-weight: 500;
  color: var(--vk-ink-3);
}
.vk-price-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  color: var(--vk-ink-2);
}
.vk-price-list li::before {
  content: "✓ ";
  color: var(--vk-green);
  font-weight: 800;
}

@media (max-width: 980px) {
  .vk-sbs-grid,
  .vk-everyday-grid,
  .vk-vault-mock,
  .vk-price-grid {
    grid-template-columns: 1fr;
  }
  .vk-sbs-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Fix single-line topbar & pricing buttons */
.vk-nav a,
.lang-btn,
.vk-cta-ghost,
.vk-cta-pill,
.vk-btn-lg {
  white-space: nowrap;
}
.vk-topbar-inner {
  gap: 16px;
}
.vk-nav {
  gap: 2px;
}
.vk-nav a {
  padding: 6px 10px;
}

@media (max-width: 820px) {
  .vk-nav,
  .vk-cta-ghost {
    display: none;
  }
  .vk-topbar-inner,
  .vk-wrap {
    padding-inline: 18px;
  }
  .vk-sbs-grid {
    padding: 14px;
  }
}

/* ==========================================================================
   MODALS: DOWNLOAD PACKAGES (macOS / Windows / Browser / CLI) & 1-CLICK IMPORT
   ========================================================================== */
.vk-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 11, 16, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vk-modal-backdrop.open {
  display: flex;
}
.vk-modal {
  width: min(860px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--vk-paper);
  border: 1px solid rgba(18, 18, 22, 0.14);
  border-radius: 26px;
  box-shadow: 0 36px 90px -16px rgba(11, 11, 16, 0.55);
  padding: 28px 32px;
  color: var(--vk-ink);
  position: relative;
}
.vk-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.vk-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--vk-line);
  background: #FFFFFF;
  color: var(--vk-ink);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.vk-modal-close:hover {
  background: #EFECE6;
}

/* Platform Switcher Pill Tabs inside Download Modal */
.vk-os-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: #E8E6E0;
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.vk-os-tab {
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: 10px;
  font-family: var(--vk-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--vk-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.vk-os-tab.active {
  background: #FFFFFF;
  color: var(--vk-ink);
  box-shadow: 0 2px 8px rgba(18, 18, 22, 0.08);
}

/* Dark Night-Studio DMG Installer Stage inside Download Modal */
.vk-dmg-stage {
  background: var(--vk-night);
  color: #F5F4F0;
  border-radius: 20px;
  padding: 24px 28px;
  border: 1px solid #23232E;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 24px;
  align-items: center;
  box-shadow: 0 18px 40px -16px rgba(11, 11, 16, 0.4);
}
.vk-dmg-visual {
  background: linear-gradient(180deg, #161722 0%, #101118 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.vk-dmg-winbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: #8E90A2;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.vk-dmg-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 0 4px;
}
.vk-dmg-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #FFFFFF;
}
.vk-dmg-node-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #F5F4F0;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.vk-dmg-node-box.apps {
  background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
  color: #FFFFFF;
}
.vk-dmg-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #60A5FA;
  font-size: 11px;
  font-weight: 700;
}

/* 3-Step Onboarding Strip in Download Modal */
.vk-dl-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.vk-dl-step {
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  border-radius: 14px;
  padding: 14px 16px;
}
.vk-dl-step-num {
  font-family: var(--vk-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--vk-blue);
  background: var(--vk-blue-soft);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 6px;
}
.vk-dl-step > b {
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
}
.vk-dl-step span {
  font-size: 12.5px;
  color: var(--vk-ink-2);
  line-height: 1.4;
  display: block;
}

/* Provider Grid in Import Modal */
.vk-imp-providers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.vk-imp-prov {
  background: #FFFFFF;
  border: 1.5px solid var(--vk-line);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  font-family: var(--vk-sans);
  transition: border-color 0.15s, background 0.15s;
}
.vk-imp-prov:hover,
.vk-imp-prov.active {
  border-color: var(--vk-blue);
  background: #F4F8FF;
}
.vk-imp-prov b {
  display: block;
  font-size: 14px;
  color: var(--vk-ink);
  margin-top: 4px;
}
.vk-imp-prov small {
  font-size: 12px;
  color: var(--vk-ink-3);
}

/* Credibility & FAQ Section */
.vk-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.vk-trust-card {
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vk-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.vk-faq-item {
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  border-radius: 16px;
  padding: 20px 22px;
}
.vk-faq-item > b {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--vk-ink);
}
.vk-faq-item p {
  margin: 0;
  font-size: 14px;
  color: var(--vk-ink-2);
  line-height: 1.55;
}
.vk-dl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.vk-dl-card {
  background: #FFFFFF;
  border: 1.5px solid var(--vk-line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--vk-ink);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.vk-dl-card:hover {
  border-color: var(--vk-blue);
  box-shadow: 0 12px 28px -12px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}
.vk-dl-card.primary-dl {
  border: 2px solid var(--vk-blue);
  background: linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 100%);
}
.vk-dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--vk-blue-soft);
  color: var(--vk-blue);
  width: fit-content;
}
.vk-dl-badge.ok {
  background: var(--vk-green-soft);
  color: var(--vk-green);
}
.vk-dl-btn {
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--vk-blue);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.vk-dl-card:not(.primary-dl) .vk-dl-btn {
  background: #121216;
}
.vk-import-drop {
  border: 2px dashed #93B4FA;
  background: #F5F8FF;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.vk-import-drop:hover,
.vk-import-drop.dragover {
  background: #EAF1FF;
  border-color: var(--vk-blue);
}
.vk-import-results {
  margin-top: 16px;
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  border-radius: 16px;
  padding: 16px 18px;
}
.vk-import-list {
  display: grid;
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
  margin: 12px 0;
}
.vk-import-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #F7F8FA;
  border: 1px solid #E5E7EB;
  font-size: 13.5px;
}
@media (max-width: 680px) {
  .vk-dl-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LANGUAGE DROPDOWN & CLIENT EXPERIENCE SPECIMEN DROP STRIP
   (Exact tokens from design/client-experience.html: --card, --line, --ink, --blue)
   ========================================================================== */
.vk-lang-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.vk-lang-select {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  padding: 0 28px 0 11px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 560;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.vk-lang-select:hover,
.vk-lang-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ring);
  outline: none;
}

#form-library .page {
  max-width: 100%;
  padding: 6px 0 28px;
}

.vk-drop-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.vk-drop-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 6px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 540;
  cursor: grab;
  user-select: none;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.vk-drop-file:hover {
  border-color: var(--blue);
  background: var(--blue-fill);
  color: var(--blue-ink);
}
.vk-drop-file:active {
  cursor: grabbing;
}
.vk-drop-file.active {
  border-color: var(--blue);
  background: var(--blue-fill);
  color: var(--blue-ink);
  box-shadow: 0 0 0 2px var(--blue-ring);
}
.vk-drop-file .ft {
  width: 18px;
  height: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vk-drop-file .ft svg {
  width: 18px;
  height: 22px;
  display: block;
}
.vk-drop-file small {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 480;
}

/* ==========================================================================
   PRIVACY TIER INTERACTIVE WIRE TOGGLE (#security) & EFFORTLESS @vk: AGENTS (#agents)
   ========================================================================== */
.vk-agent-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}
.vk-agent-card {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 18px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vk-agent-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--vk-blue-soft);
  color: var(--vk-blue);
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}
.vk-agent-ic .vk-svg {
  width: 18px;
  height: 18px;
}
.vk-agent-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.vk-agent-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vk-ink-2);
}

.vk-priv-shell {
  margin-top: 32px;
  background: #14151D;
  border: 1px solid #282B38;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 56px -20px rgba(0, 0, 0, 0.55);
}
.vk-priv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  background: #101118;
  border-bottom: 1px solid #242734;
}
.vk-priv-tab {
  border: 1px solid #2A2E3D;
  background: #181A24;
  color: #B6B9C9;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--vk-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.vk-priv-tab:hover {
  color: #FFFFFF;
  border-color: #4668B8;
}
.vk-priv-tab[aria-selected="true"] {
  background: var(--vk-blue);
  border-color: var(--vk-blue);
  color: #FFFFFF;
}
.vk-priv-body {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  padding: 26px 28px;
  align-items: start;
}
.vk-priv-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vk-priv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.16);
  color: #93C5FD;
  border: 1px solid rgba(147, 197, 253, 0.25);
}
.vk-priv-badge.zero {
  background: rgba(18, 138, 90, 0.2);
  color: #6EE7B7;
  border-color: rgba(110, 231, 183, 0.28);
}
.vk-priv-summary h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 780;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}
.vk-priv-summary p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: #C2C5D3;
}
.vk-priv-points {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: #D7DAE6;
}
.vk-priv-points li::before {
  content: "✓ ";
  color: #6EE7B7;
  font-weight: 700;
}
.vk-priv-wire {
  background: #0B0C12;
  border: 1px solid #262A38;
  border-radius: 14px;
  overflow: hidden;
}
.vk-priv-wire-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  background: #12141E;
  border-bottom: 1px solid #232736;
  font-family: var(--vk-mono);
  font-size: 12px;
  color: #9499AD;
}
.vk-priv-wire pre {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--vk-mono);
  font-size: 13px;
  line-height: 1.55;
  color: #E2E6F3;
  overflow-x: auto;
  white-space: pre;
}

.vk-os-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ==========================================================================
   IMPORTER CATEGORY COUNTS & STANDALONE /import.html STYLES
   ========================================================================== */
.vk-imp-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.vk-imp-stat {
  background: #F6F7FA;
  border: 1px solid var(--vk-line);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}
.vk-imp-stat b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--vk-ink);
  font-variant-numeric: tabular-nums;
}
.vk-imp-stat small {
  font-size: 12px;
  font-weight: 600;
  color: var(--vk-ink-2);
}
.vk-imp-error {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  font-size: 13.5px;
  display: none;
}
.vk-imp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.vk-imp-step-card {
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vk-imp-step-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 750;
}
.vk-imp-step-card ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--vk-ink-2);
  line-height: 1.5;
}

/* ==========================================================================
   SUBPAGE STYLES (site/forms/*.html & site/import.html)
   ========================================================================== */
.mono { font-family: var(--vk-mono); }
.jp { font-family: var(--vk-jp); }
:root {
  --ink-secondary: #4A4A55;
  --ink-muted: #6B6D78;
  --ink-subtle: #8A8A94;
  --border: #E2E0DA;
  --border-strong: #C5C3BC;
  --blue-border: #93C5FD;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(245, 244, 240, 0.9);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--vk-line);
}
.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--vk-ink);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--vk-blue);
  color: #FFFFFF;
  display: inline-grid;
  place-items: center;
  position: relative;
}
.brand-mark svg {
  width: 17px;
  height: 17px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nav-links a {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--vk-ink-2);
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--vk-ink);
  background: rgba(18, 18, 22, 0.06);
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--vk-blue);
  color: #FFFFFF;
  border-color: var(--vk-blue);
}
.btn-primary:hover { background: #1D4ED8; }
.btn-secondary {
  background: #FFFFFF;
  color: var(--vk-ink);
  border-color: var(--vk-line);
}
.btn-secondary:hover { background: #ECEAE3; }
.btn-sm {
  padding: 6px 13px;
  font-size: 13px;
}

.form-page-hero {
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--vk-line);
  background: linear-gradient(180deg, #FAF9F6 0%, #F5F4F0 100%);
}
.breadcrumb a {
  color: var(--vk-ink-2);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--vk-blue); }
.form-page-header-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 28px;
  align-items: start;
}
.form-official-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.official-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  color: var(--vk-ink-2);
}
.official-badge.primary {
  background: var(--vk-blue-soft);
  border-color: #BFDBFE;
  color: var(--vk-blue);
}
.form-page-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
}
.form-page-subtitle {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--vk-ink-2);
}
.download-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.form-action-box {
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 10px 26px -14px rgba(18, 18, 22, 0.08);
}
.form-action-box-title {
  font-size: 14px;
  font-weight: 750;
  margin-bottom: 10px;
  color: var(--vk-ink);
}
.required-docs-chips {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}
.doc-req-chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--vk-ink);
  background: #F6F7FA;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 6px 10px;
}
.form-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 26px;
  padding: 32px 0 40px;
  align-items: start;
}
.mode-switcher-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #EFECE6;
  padding: 3px;
  border-radius: 9px;
}
.mode-btn {
  border: 0;
  background: transparent;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vk-ink-2);
  cursor: pointer;
}
.mode-btn.active {
  background: #FFFFFF;
  color: var(--vk-blue);
  box-shadow: 0 1px 4px rgba(18, 18, 22, 0.08);
}
.form-viewer-stage {
  padding: 20px;
  background: #ECEAE3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-viewer-stage img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(18, 18, 22, 0.14);
}
.form-sheet-stamp {
  font-family: var(--vk-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border: 1.5px solid var(--vk-ink);
  border-radius: 4px;
}
.field-guide-card {
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.field-guide-card h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.015em;
}
.guide-sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--vk-ink-2);
  line-height: 1.55;
}
.site-footer {
  padding: 28px 0 48px;
  border-top: 1px solid var(--vk-line);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
}

/* ==========================================================================
   INTERACTIVE JAPANESE MARRIAGE REGISTRATION (婚姻届) TEST FORM
   ========================================================================== */
.konin-live-shell {
  margin: 8px 0 44px;
  background: #FFFFFF;
  border: 1.5px solid #C9BEB0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px -18px rgba(34, 24, 16, 0.14);
}
.konin-live-head {
  padding: 18px 24px;
  background: #FAF6F0;
  border-bottom: 1.5px solid #DFD4C5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.konin-sheet {
  padding: 24px;
  background: #FFFEFC;
  font-family: var(--vk-jp);
}
.konin-banner {
  border: 2px solid #5B3E2B;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: #FBF8F3;
}
.konin-banner h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: #3E2718;
}
.konin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.konin-col {
  border: 1.5px solid #6E503B;
  border-radius: 8px;
  padding: 16px;
  background: #FFFFFF;
}
.konin-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1.5px solid #D9CBB8;
}
.konin-col-head b {
  font-size: 16px;
  color: #3E2718;
}
.konin-prof-pill {
  font-family: var(--vk-sans);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--vk-blue-soft);
  color: var(--vk-blue);
}
.konin-field {
  margin-bottom: 11px;
}
.konin-field:last-child {
  margin-bottom: 0;
}
.konin-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 700;
  color: #4A3728;
  margin-bottom: 4px;
}
.konin-field label code {
  font-family: var(--vk-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--vk-blue);
}
.konin-field input,
.konin-field select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #B9AA99;
  border-radius: 5px;
  background: #FFFFFF;
  font-size: 13.5px;
  color: #16161A;
}
.konin-field input.vk-filled-inp,
.konin-field select.vk-filled-inp {
  border: 1.5px solid #2563EB;
  background: #F4F8FF;
}
.konin-field input.vk-tag-inp {
  border: 1.5px dashed #2563EB;
  background: #EFF5FF;
  color: #1D4ED8;
  font-family: var(--vk-mono);
  font-size: 12.5px;
}
.konin-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.konin-era-row {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.75fr 0.75fr;
  gap: 6px;
}
.konin-choice-box {
  border: 1.5px dashed #C27D2B;
  background: #FFFBF4;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
}

@media (max-width: 980px) {
  .vk-agent-cards,
  .vk-priv-body,
  .vk-imp-counts,
  .vk-imp-steps-grid,
  .form-page-header-grid,
  .form-detail-layout,
  .konin-two-col {
    grid-template-columns: 1fr;
  }
  .vk-os-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Guided 3-Step Interactive Walkthrough (#vkWalkthrough)
   ========================================================================== */
.vk-wt {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px -22px rgba(18, 18, 22, 0.14);
}
.vk-wt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 20px;
  background: #ECEAE3;
  border-bottom: 1px solid var(--vk-line);
}
.vk-wt-docs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.vk-wt-bar-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--vk-ink-2);
  margin-right: 4px;
}
.vk-wt-doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--vk-line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--vk-ink-2);
  font-size: 13px;
  font-weight: 600;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.vk-wt-doc-btn:hover {
  background: #FFFFFF;
  color: var(--vk-ink);
}
.vk-wt-doc-btn.active {
  background: #FFFFFF;
  color: var(--vk-ink);
  border-color: var(--vk-ink);
  box-shadow: 0 2px 6px rgba(18, 18, 22, 0.06);
}
.vk-wt-badge {
  font-family: var(--vk-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #E6EEFE;
  color: #1D4ED8;
}
.vk-wt-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vk-wt-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--vk-line);
  background: #FFFFFF;
  color: var(--vk-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms;
}
.vk-wt-ghost-btn:hover {
  background: #F5F4F0;
}

/* 3-Step Progress Rail */
.vk-wt-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--vk-line);
  background: #FAF9F6;
}
.vk-wt-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 0;
  border-right: 1px solid var(--vk-line);
  background: transparent;
  text-align: left;
  transition: background 120ms;
}
.vk-wt-step:last-child {
  border-right: 0;
}
.vk-wt-step:hover {
  background: rgba(18, 18, 22, 0.03);
}
.vk-wt-step.current {
  background: #FFFFFF;
  box-shadow: inset 0 -2.5px 0 var(--vk-blue);
}
.vk-wt-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: #E7E5DE;
  color: var(--vk-ink-2);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.vk-wt-step.current .vk-wt-step-num {
  background: var(--vk-blue);
  color: #FFFFFF;
}
.vk-wt-step.done .vk-wt-step-num {
  background: var(--vk-green);
  color: #FFFFFF;
}
.vk-wt-step-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vk-wt-step-copy b {
  font-size: 14px;
  font-weight: 700;
  color: var(--vk-ink);
  line-height: 1.25;
}
.vk-wt-step-copy small {
  font-size: 12.5px;
  color: var(--vk-ink-3);
  line-height: 1.3;
  margin-top: 2px;
}

/* Coach Strip */
.vk-wt-coach {
  display: none;
}
.vk-wt-pri-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: var(--vk-blue);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px -6px rgba(37, 99, 235, 0.5);
  transition: background-color 150ms cubic-bezier(0.22, 1, 0.36, 1), transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vk-wt-pri-btn:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}
.vk-wt-pri-btn:active {
  transform: scale(0.985);
}
.vk-wt-sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #C5D6FA;
  background: #FFFFFF;
  color: #1D4ED8;
  font-size: 13px;
  font-weight: 600;
}
.vk-wt-sec-btn:hover {
  background: #F7FAFF;
}

/* Two-Window Workspace Stage */
.vk-wt-stage {
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  gap: 18px;
  padding: 20px;
  background: linear-gradient(168deg, #E7ECF6 0%, #D9E2F1 100%);
  align-items: stretch;
}
.vk-wt-win {
  position: relative;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(18, 18, 22, 0.1);
  box-shadow: 0 18px 42px -18px rgba(16, 20, 36, 0.24);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 540px;
}
.vk-wt-winbar {
  height: 40px;
  padding: 0 14px;
  background: #F7F6F3;
  border-bottom: 1px solid #E7E5DE;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--vk-ink-2);
  flex: none;
}
.vk-wt-lights {
  display: inline-flex;
  gap: 6px;
}
.vk-wt-lights i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #EC6A5E;
  display: inline-block;
}
.vk-wt-lights i:nth-child(2) { background: #F4BF4F; }
.vk-wt-lights i:nth-child(3) { background: #61C554; }
.vk-wt-wintitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--vk-ink);
}
.vk-wt-winmeta {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vk-green);
  background: var(--vk-green-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.vk-wt-url {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #ECEAE3;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--vk-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Vault Left Window */
.vk-wt-vault-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #FAF9F6;
  padding: 16px;
  gap: 14px;
}
.vk-wt-dropcard {
  flex: 1;
  border: 1.5px dashed #BFC8DA;
  border-radius: 14px;
  background: #FFFFFF;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.vk-wt-dropcard:hover,
.vk-wt-dropcard.dragover {
  border-color: var(--vk-blue);
  background: #F6F9FF;
}
.vk-wt-spec-preview {
  position: relative;
  width: 240px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 22, 0.14);
  box-shadow: 0 12px 28px -12px rgba(18, 18, 22, 0.25);
  background: #FFFFFF;
}
.vk-wt-spec-preview img {
  display: block;
  width: 100%;
  height: 152px;
  object-fit: cover;
  object-position: center top;
}
.vk-wt-spec-stamp {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(18, 18, 22, 0.78);
  color: #FFFFFF;
  font-family: var(--vk-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.vk-wt-dropcard h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--vk-ink);
}
.vk-wt-dropcard p {
  margin: 0;
  font-size: 13.5px;
  color: var(--vk-ink-2);
  max-width: 36ch;
  line-height: 1.45;
}

/* Vault Captured State: Specimen Image w/ Boxes + Extracted Detail List */
.vk-wt-docstage {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--vk-line);
  background: #ECEAE3;
}
.vk-wt-docimg-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #F1EFE9;
  line-height: 0;
}
.vk-wt-docimg-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
.vk-wt-docimg-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 256px;
}
.vk-wt-scanbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--vk-blue);
  box-shadow: 0 0 16px 3px rgba(37, 99, 235, 0.55);
  animation: vkWtScan 0.42s ease-out forwards;
  pointer-events: none;
}
@keyframes vkWtScan {
  from { top: 4%; opacity: 1; }
  to { top: 94%; opacity: 0; }
}
.vk-wt-bbox {
  position: absolute;
  border: 1.5px solid rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.08);
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  transition: border-color 100ms, background 100ms, box-shadow 100ms;
}
.vk-wt-bbox:hover,
.vk-wt-bbox.active {
  border: 2px solid #2563EB;
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
  z-index: 3;
}
.vk-wt-doccaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: #FFFFFF;
  border-top: 1px solid var(--vk-line);
  font-size: 12px;
  color: var(--vk-ink-2);
}
.vk-wt-detlist {
  background: #FFFFFF;
  border: 1px solid var(--vk-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vk-wt-dethead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #F7F6F3;
  border-bottom: 1px solid var(--vk-line);
  font-size: 12px;
  font-weight: 700;
  color: var(--vk-ink-2);
}
.vk-wt-detrow {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid #EFECE6;
  background: #FFFFFF;
  text-align: left;
  font-size: 13px;
  transition: background 100ms;
}
.vk-wt-detrow:last-child {
  border-bottom: 0;
}
.vk-wt-detrow:hover,
.vk-wt-detrow.active {
  background: #EEF4FF;
}
.vk-wt-detrow .lbl {
  color: var(--vk-ink-2);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vk-wt-detrow .val {
  font-weight: 600;
  color: var(--vk-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vk-wt-detrow .val.mono {
  font-family: var(--vk-mono);
  font-size: 12.5px;
}
.vk-wt-detrow .loc {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vk-blue);
  white-space: nowrap;
}

/* Right Window: Target Form + Quick Bar + AI Capsule */
.vk-wt-form-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  padding: 18px 20px 20px;
  gap: 14px;
}
.vk-wt-form-body.pdf-mode {
  background: #8E939C;
  padding: 16px;
}
.vk-wt-pdf-sheet {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 18px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vk-wt-qbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(18, 18, 22, 0.12);
  box-shadow: 0 12px 28px -10px rgba(18, 18, 22, 0.28);
}
.vk-wt-qbar-who {
  font-size: 12.5px;
  color: var(--vk-ink-2);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vk-wt-qbar-who b {
  color: var(--vk-ink);
  font-weight: 700;
}
.vk-wt-qbar-fill {
  height: 32px;
  padding: 0 15px;
  border-radius: 999px;
  border: 0;
  background: var(--vk-blue);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  flex: none;
}
.vk-wt-qbar-fill:hover {
  background: #1D4ED8;
}
.vk-wt-form-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vk-line);
}
.vk-wt-form-hdr h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--vk-ink);
}
.vk-wt-form-hdr p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--vk-ink-2);
}
.vk-wt-fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.vk-wt-fld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vk-wt-fld.wide {
  grid-column: 1 / -1;
}
.vk-wt-fld label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--vk-ink-2);
}
.vk-wt-inpwrap {
  position: relative;
}
.vk-wt-inpwrap input {
  width: 100%;
  height: 38px;
  padding: 0 74px 0 11px;
  border-radius: 8px;
  border: 1px solid #C5C8D2;
  background: #FFFFFF;
  font-size: 13.5px;
  color: var(--vk-ink);
  outline: none;
  transition: border-color 120ms, background 120ms;
}
.vk-wt-inpwrap input:focus {
  border-color: var(--vk-ink);
}
.vk-wt-inpwrap input.filled {
  border: 1.5px solid #2563EB;
  background: #F6F9FF;
  font-weight: 500;
}
.vk-wt-inpwrap input.tagged {
  border: 1.5px dashed #2563EB;
  background: #EFF5FF;
  color: #1D4ED8;
  font-family: var(--vk-mono);
  font-size: 12.5px;
}
.vk-wt-inpwrap input.needs-you {
  border: 1.5px dashed #C9892B;
  background: #FFFBF3;
  padding-right: 12px;
}
.vk-wt-fic {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid rgba(18, 18, 22, 0.08);
  background: #F5F4F0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vk-ink);
}
.vk-wt-fic:hover {
  background: #E6EEFE;
  border-color: #93C5FD;
}
.vk-wt-fic.pulse {
  border-color: var(--vk-blue);
  background: #E6EEFE;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.vk-wt-fic.src {
  background: #E6EEFE;
  border-color: #BFDBFE;
  color: #1D4ED8;
}
.vk-wt-fhint {
  font-size: 11.5px;
  color: var(--vk-amber, #A65F0C);
  font-weight: 500;
}
.vk-wt-status {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F5F4F0;
  font-size: 13px;
  color: var(--vk-ink-2);
}
.vk-wt-status.ok {
  background: #E4F4EC;
  color: #0E6B45;
  font-weight: 600;
}
.vk-wt-ai-box {
  border-radius: 12px;
  background: #14151B;
  color: #ECEEF4;
  padding: 12px 14px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vk-wt-ai-term {
  font-family: var(--vk-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #B9C0D4;
}
.vk-wt-ai-term code {
  color: #93C5FD;
}
.vk-wt-ai-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--vk-ink);
}
.vk-wt-popover {
  position: absolute;
  z-index: 40;
  width: 280px;
  background: #FFFFFF;
  border: 1px solid rgba(18, 18, 22, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(18, 18, 22, 0.3);
  padding: 6px;
}
.vk-wt-popover button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  text-align: left;
}
.vk-wt-popover button:hover {
  background: #F2F4F8;
}
.vk-wt-popover button.fill-all {
  background: #EFF4FF;
  color: #1D4ED8;
  font-weight: 700;
  margin-top: 3px;
}
.vk-wt-popover button.fill-all:hover {
  background: #DCE8FF;
}

@media (max-width: 980px) {
  .vk-wt-steps,
  .vk-wt-stage,
  .vk-wt-fgrid {
    grid-template-columns: 1fr;
  }
  .vk-wt-step {
    border-right: 0;
    border-bottom: 1px solid var(--vk-line);
  }
  .vk-wt-step:last-child {
    border-bottom: 0;
  }
  .vk-wt-win {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .vk-topbar-inner {
    padding-inline: 14px;
    gap: 8px;
  }
  .vk-logo {
    font-size: 17.5px;
    gap: 7px;
  }
  .vk-logo img {
    width: 22px;
    height: 22px;
  }
  .vk-topbar-r {
    gap: 6px;
  }
  .vk-lang-select {
    max-width: 108px;
    padding: 5px 22px 5px 8px;
    font-size: 12px;
  }
  .vk-topbar .vk-cta-pill {
    padding: 0 11px;
    font-size: 12px;
    height: 32px;
    white-space: nowrap;
  }
  .vk-sbs-tabs {
    border-radius: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
    scrollbar-width: none;
  }
  .vk-sbs-tabs::-webkit-scrollbar {
    display: none;
  }
  .vk-sbs-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Launch Pages: Legal (/privacy, /terms), Security White Paper (/security),
   4-Tier Pricing (/pricing), Multi-OS Download Strip & Responsive Safeguards
   ========================================================================== */
.vk-dl-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.vk-dl-strip-extra {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13.5px;
  color: var(--vk-ink-2);
}

.vk-dl-strip-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.vk-dl-strip-links a {
  color: var(--vk-blue);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.vk-dl-strip-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vk-subpage-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 4px;
  margin-bottom: 22px;
  scrollbar-width: none;
}

.vk-subpage-nav::-webkit-scrollbar {
  display: none;
}

.vk-subpage-nav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vk-ink-2);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--vk-line);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.vk-subpage-nav a:hover {
  background: var(--vk-card);
  color: var(--vk-ink);
}

.vk-subpage-nav a.active {
  background: var(--vk-ink);
  color: #FFFFFF;
  border-color: var(--vk-ink);
}

.vk-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--vk-blue-soft);
  color: var(--vk-blue);
  margin-bottom: 14px;
}

.vk-doc-hero {
  padding-top: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--vk-line);
}

.vk-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.vk-summary-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vk-summary-card {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vk-summary-card b {
  font-size: 15px;
  font-weight: 650;
  color: var(--vk-ink);
  letter-spacing: -0.01em;
}

.vk-summary-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vk-ink-2);
}

.vk-doc-layout {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.vk-doc-toc {
  position: sticky;
  top: 82px;
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 16px;
  padding: 18px;
}

.vk-doc-toc-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vk-ink-3);
  margin: 0 0 10px;
}

.vk-doc-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vk-doc-toc-list a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--vk-ink-2);
  text-decoration: none;
  line-height: 1.35;
  transition: background 120ms, color 120ms;
}

.vk-doc-toc-list a:hover {
  background: var(--vk-paper);
  color: var(--vk-blue);
}

.vk-doc-article {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.vk-doc-card {
  background: var(--vk-card);
  border: 1px solid var(--vk-line);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 34px);
  scroll-margin-top: 84px;
  min-width: 0;
}

.vk-doc-card h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--vk-ink);
  line-height: 1.24;
}

.vk-doc-card h3 {
  margin: 20px 0 8px;
  font-size: 16px;
  font-weight: 650;
  color: var(--vk-ink);
}

.vk-doc-card p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--vk-ink-2);
}

.vk-doc-card p:last-child {
  margin-bottom: 0;
}

.vk-doc-list {
  margin: 8px 0 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--vk-ink-2);
}

.vk-doc-list:last-child {
  margin-bottom: 0;
}

.vk-doc-list li strong,
.vk-doc-card p strong {
  color: var(--vk-ink);
  font-weight: 650;
}

.vk-code-card {
  margin: 14px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: #0E1016;
  border: 1px solid #252836;
  color: #E5E7F0;
  font-family: var(--vk-mono);
  font-size: 12.5px;
  line-height: 1.58;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
}

.vk-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 14px;
  border: 1px solid var(--vk-line);
  border-radius: 14px;
  background: var(--vk-card);
}

table.vk-spec-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

table.vk-spec-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vk-ink-2);
  background: #F7F6F2;
  border-bottom: 1px solid var(--vk-line);
}

table.vk-spec-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--vk-line);
  color: var(--vk-ink-2);
  vertical-align: top;
  line-height: 1.5;
}

table.vk-spec-table tr:last-child td {
  border-bottom: 0;
}

table.vk-spec-table td:first-child {
  font-weight: 600;
  color: var(--vk-ink);
}

/* 4-Tier Pricing Grid & Comparison Matrix */
.vk-price-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
  align-items: stretch;
}

.vk-price-grid-4 .vk-price-card {
  padding: 24px 22px;
  min-width: 0;
}

.vk-price-card .vk-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.vk-plan-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--vk-green-soft);
  color: var(--vk-green);
}

.vk-plan-tag.blue {
  background: var(--vk-blue-soft);
  color: var(--vk-blue);
}

.vk-cli-box {
  background: #0E1016;
  color: #E5E7F0;
  border: 1px solid #252836;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--vk-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  max-width: 100%;
}

.vk-card-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vk-card-actions .vk-btn-lg {
  width: 100%;
  justify-content: center;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.vk-card-sublink {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vk-blue);
  text-decoration: none;
}

.vk-card-sublink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Unified Site Footer */
.vk-site-footer {
  background: var(--vk-night);
  color: #A9A9B6;
  padding: 48px 0;
  border-top: 1px solid #22222A;
}

.vk-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px 40px;
}

.vk-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}

.vk-footer-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.vk-footer-brand-row img {
  width: 26px;
  height: 26px;
}

.vk-footer-brand-row b {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.vk-footer-brand p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #8E90A2;
}

.vk-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
}

.vk-footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 120px;
}

.vk-footer-col b {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.vk-footer-col a {
  color: #A9A9B6;
  text-decoration: none;
  font-size: 13.5px;
  transition: color 120ms;
}

.vk-footer-col a:hover {
  color: #FFFFFF;
}

@media (max-width: 1280px) {
  .vk-topbar .vk-nav {
    display: none;
  }
}

@media (max-width: 1160px) {
  .vk-price-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vk-topbar .vk-cta-ghost {
    display: none;
  }
}

@media (max-width: 980px) {
  .vk-dl-grid-4,
  .vk-summary-grid,
  .vk-summary-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vk-doc-layout {
    grid-template-columns: 1fr;
  }
  .vk-doc-toc {
    position: static;
  }
  .vk-nav {
    display: none;
  }
}

@media (max-width: 760px) {
  .vk-faq-grid,
  .vk-price-grid-4,
  .vk-dl-grid-4,
  .vk-summary-grid,
  .vk-summary-grid.cols-4 {
    grid-template-columns: 1fr;
  }
  .vk-doc-hero {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .vk-footer-cols {
    gap: 22px 28px;
  }
  .vk-mx {
    width: 100%;
    max-width: 100%;
  }
  .vk-mx-row {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .vk-ref-col,
  .vk-card,
  .vk-price-card {
    min-width: 0;
    padding-inline: 20px;
  }
  .vk-perm {
    padding: 16px;
  }
}





/* Install switcher: equal-width platform tabs with a sliding indicator. Every panel shares one grid
   cell, so switching platforms never changes the page height. */
.vk-install {
  margin-top: 28px;
  border: 1.5px solid var(--vk-line);
  border-radius: 18px;
  background: var(--vk-card);
  overflow: hidden;
}
.vk-install-tabs {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 5px;
  border-bottom: 1px solid var(--vk-line);
  background: var(--vk-paper);
}
.vk-install-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--tab-width, 0);
  border-radius: 11px;
  background: var(--vk-card);
  box-shadow: 0 1px 2px rgba(18, 18, 22, 0.08), 0 0 0 1px var(--vk-line);
  transform: translateX(var(--tab-x, 0));
}
.vk-install-tabs.animate .vk-install-indicator {
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vk-install-tab {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--vk-ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.vk-install-tab[aria-selected="true"] {
  color: var(--vk-ink);
}
.vk-install-tab:focus-visible {
  outline: 2px solid var(--vk-ink);
  outline-offset: -2px;
  border-radius: 11px;
}
.vk-install-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.vk-install-panel {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.vk-install-panel.active {
  visibility: visible;
  opacity: 1;
}
.vk-install-text {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.vk-install-kicker {
  color: var(--vk-blue);
  font-size: 12px;
  font-weight: 700;
}
.vk-install-title {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.vk-install-desc {
  margin: 0;
  max-width: 620px;
  color: var(--vk-ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.vk-install-desc code {
  color: var(--vk-ink);
}
.vk-install-meta {
  color: var(--vk-ink-3);
  font-size: 12px;
}
.vk-install-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vk-install-btn {
  flex: none;
  height: 46px;
  padding: 0 20px;
  font-size: 14px;
}
@media (max-width: 760px) {
  .vk-install-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }
  .vk-install-tab {
    flex: 1 1 auto;
    overflow: visible;
  }
  .vk-install-indicator {
    display: none;
  }
  .vk-install-tab[aria-selected="true"] {
    border-radius: 11px;
    background: var(--vk-card);
    box-shadow: 0 0 0 1px var(--vk-line);
  }
  .vk-install-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .vk-install-btn {
    justify-content: center;
    height: auto;
    min-height: 46px;
    padding: 10px 16px;
    white-space: normal;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vk-install-tabs.animate .vk-install-indicator,
  .vk-install-panel {
    transition: none;
  }
}