/* /funcionalidades/agentticvault/ — the unlocked vault, and the extension
   filling a login. Four scenes (pantallas-escenas.js): 0 the list, the
   resting state; 1 an item opened and its password copied; 2 the page
   scrolled to Import passwords, a Bitwarden export encrypted and imported;
   3 the client's sign-in page with the AgentticVault popup, Fill. Every
   rule states the scene's final frame; the motion only plays up to it. */

@property --vt-n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 38;
}

.pn-frame[data-screen="vault"] {
  --vt-accent: #467557;
  --vt-accent-10: rgb(70 117 87 / 0.1);
  --vt-elev: #f6f6f7;
  --vt-success: #187c49;
  --vt-success-soft: #e6f6eb;
}

/* ---------- the page ---------- */

.pn-frame[data-screen="vault"] .pn-body.is-module { gap: 19px; }

.pn-frame[data-screen="vault"] .md-btn.is-danger { border-color: var(--ac-bad); background: var(--ac-bad); color: #fff; }
.pn-frame[data-screen="vault"] .md-btn.is-sm { gap: 5px; padding: 5px 9px; border-radius: 8px; font-size: 10px; }
.pn-frame[data-screen="vault"] .md-btn.is-sm svg { width: 12px; height: 12px; }

.pn-frame[data-screen="vault"] .vt-i { width: 13px; height: 13px; flex-shrink: 0; }

.pn-frame[data-screen="vault"] .vt-ibtn {
  display: inline-grid;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  color: var(--ac-mut);
}

.pn-frame[data-screen="vault"] .vt-ibtn.is-boxed { border: 1px solid var(--ac-line); background: #fff; }

.pn-frame[data-screen="vault"] .vt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 19px;
}

.pn-frame[data-screen="vault"] .vt-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.pn-frame[data-screen="vault"] .vt-fine { padding: 0 1px; color: var(--ac-mut); font-size: 9.5px; line-height: 1.5; }
.pn-frame[data-screen="vault"] .vt-muted { color: var(--ac-mut); }

/* ---------- the saved items ---------- */

/* TableToolbar wraps: the title, then the tools, which wrap among
   themselves and keep to the right — at this width the column picker takes
   a second line, as it does in the product. */
.pn-frame[data-screen="vault"] .vt-items .md-tools { flex-wrap: wrap; gap: 6px 10px; }
.pn-frame[data-screen="vault"] .vt-items .md-tools-side { flex-wrap: wrap; gap: 6px; }
.pn-frame[data-screen="vault"] .vt-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pn-frame[data-screen="vault"] .vt-items .md-btn { white-space: nowrap; }
.pn-frame[data-screen="vault"] .vt-items .md-select { width: 141px; box-sizing: border-box; justify-content: space-between; }
.pn-frame[data-screen="vault"] .vt-items .md-select em { max-width: 118px; }
.pn-frame[data-screen="vault"] .vt-items .md-search { width: 205px; box-sizing: border-box; }
.pn-frame[data-screen="vault"] .vt-items .md-search em { overflow: hidden; text-overflow: ellipsis; }

.pn-frame[data-screen="vault"] .vt-table th,
.pn-frame[data-screen="vault"] .vt-table td { padding-right: 13px; padding-left: 13px; }
.pn-frame[data-screen="vault"] .vt-table td { padding-top: 8px; padding-bottom: 8px; font-size: 11px; }
.pn-frame[data-screen="vault"] .vt-table .is-check { padding-right: 0; }
.pn-frame[data-screen="vault"] .vt-table .is-acts { padding-left: 3px; text-align: right; }
.pn-frame[data-screen="vault"] .vt-table td.is-acts { padding-top: 4px; padding-bottom: 4px; }

.pn-frame[data-screen="vault"] :is(.vt-title, .vt-acct > *, .vt-site em) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-frame[data-screen="vault"] .vt-title { color: var(--ac-ink); font-weight: 500; }
.pn-frame[data-screen="vault"] .vt-acct { display: block; min-width: 0; }
.pn-frame[data-screen="vault"] .vt-acct b { color: var(--ac-ink); font-weight: 400; }
.pn-frame[data-screen="vault"] .vt-acct em { color: var(--ac-mut); font-size: 9.5px; font-style: normal; }
.pn-frame[data-screen="vault"] .vt-site { display: flex; min-width: 0; align-items: center; gap: 6px; }
.pn-frame[data-screen="vault"] .vt-site em { flex: 1; color: var(--ac-mut); font-style: normal; }
.pn-frame[data-screen="vault"] .vt-site .vt-ibtn { width: 22px; height: 22px; }
.pn-frame[data-screen="vault"] .vt-none { color: var(--ac-dim); font-style: normal; }

/* whitespace-nowrap and no clipping, as the product sets it: a long date
   runs into the actions column's empty left side. */
.pn-frame[data-screen="vault"] .vt-date {
  display: block;
  color: var(--ac-mut);
  font-size: 9.5px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- the cards beside and below ---------- */

.pn-frame[data-screen="vault"] .vt-card { display: flex; flex-direction: column; }
.pn-frame[data-screen="vault"] .vt-devices { align-self: start; }

.pn-frame[data-screen="vault"] .vt-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 19px;
  border-bottom: 1px solid var(--ac-line);
}

.pn-frame[data-screen="vault"] .vt-card-icon {
  display: grid;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  background: var(--vt-accent-10);
  color: var(--vt-accent);
}

.pn-frame[data-screen="vault"] .vt-card-icon svg { width: 14px; height: 14px; }
.pn-frame[data-screen="vault"] .vt-card-text { min-width: 0; flex: 1 1 0; }
.pn-frame[data-screen="vault"] .vt-card-text p { font-size: 13px; font-weight: 600; line-height: 1.35; }

.pn-frame[data-screen="vault"] .vt-card-text em {
  display: block;
  margin-top: 2px;
  color: var(--ac-mut);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

/* The two meters the product puts in this header's action slot; a 288px
   card has no room for them beside the title, so they take the next line. */
.pn-frame[data-screen="vault"] .vt-caps {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  gap: 6px;
  padding-left: 33px;
}

.pn-frame[data-screen="vault"] .vt-caps .md-cap { min-width: 0; }

.pn-frame[data-screen="vault"] .vt-card-body { padding: 16px 19px; font-size: 11px; }

.pn-frame[data-screen="vault"] .vt-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
}

.pn-frame[data-screen="vault"] .vt-stack > span:not(.vt-field) { display: flex; }
.pn-frame[data-screen="vault"] .vt-device-list { display: flex; flex-direction: column; gap: 6px; }

.pn-frame[data-screen="vault"] .vt-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
}

.pn-frame[data-screen="vault"] .vt-device > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pn-frame[data-screen="vault"] .vt-field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.pn-frame[data-screen="vault"] .vt-field > em { font-style: normal; }

.pn-frame[data-screen="vault"] .vt-input {
  display: flex;
  min-height: 30px;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 1px rgb(17 19 24 / 0.03);
}

.pn-frame[data-screen="vault"] .vt-picker { padding: 5px 5px 5px 10px; }
.pn-frame[data-screen="vault"] .vt-picker > b,
.pn-frame[data-screen="vault"] .vt-picker .vt-swap { flex: 1; min-width: 0; color: var(--ac-mut); font-weight: 400; }

.pn-frame[data-screen="vault"] .vt-swap { display: inline-grid; }
.pn-frame[data-screen="vault"] .vt-swap > * { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-frame[data-screen="vault"] .vt-file .is-chosen { color: var(--ac-ink); font-weight: 400; visibility: hidden; }
.pn-frame[data-screen="vault"] .vt-file .is-none { font-weight: 400; }

.pn-frame[data-screen="vault"] .vt-how {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  border-radius: 8px;
  background: var(--vt-elev);
}

.pn-frame[data-screen="vault"] .vt-h { color: var(--ac-ink); font-size: 11px; font-weight: 600; }
.pn-frame[data-screen="vault"] .vt-how .vt-h + ul { margin-bottom: 5px; }
.pn-frame[data-screen="vault"] .vt-how ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-left: 16px; color: var(--ac-mut); list-style: disc; }
.pn-frame[data-screen="vault"] .vt-how p:not(.vt-h) { color: var(--ac-mut); line-height: 1.5; }

/* The import's progress and preview: rendered only while there is one, so
   they take no room at rest and open in place when the file is read. */
.pn-frame[data-screen="vault"] .vt-fold { max-height: 0; overflow: hidden; visibility: hidden; }
.pn-frame[data-screen="vault"] .vt-stack > .vt-fold { margin-top: -13px; }

.pn-frame[data-screen="vault"] .vt-progress {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 13px;
  padding: 10px;
  border-radius: 8px;
  background: var(--vt-accent-10);
  font-weight: 500;
}

.pn-frame[data-screen="vault"] .vt-progress .vt-swap > b { font-weight: 500; }
.pn-frame[data-screen="vault"] .vt-progress .is-uploading { visibility: hidden; }

.pn-frame[data-screen="vault"] .vt-n { counter-reset: vt-n var(--vt-n); font-weight: 500; font-variant-numeric: tabular-nums; }
.pn-frame[data-screen="vault"] .vt-n::after { content: counter(vt-n); }

.pn-frame[data-screen="vault"] .vt-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #fff;
}

.pn-frame[data-screen="vault"] .vt-bar u { display: block; width: 100%; height: 100%; border-radius: 99px; background: var(--vt-accent); }

.pn-frame[data-screen="vault"] .vt-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 13px;
  padding: 10px;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
}

.pn-frame[data-screen="vault"] .vt-preview-list {
  display: flex;
  max-height: 166px;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.pn-frame[data-screen="vault"] .vt-preview-list li { padding: 5px 8px; border-radius: 6px; background: var(--vt-elev); }
.pn-frame[data-screen="vault"] .vt-preview-list b { display: block; color: var(--ac-ink); font-weight: 500; }
.pn-frame[data-screen="vault"] .vt-preview-list em { display: block; margin-top: 1px; color: var(--ac-mut); font-size: 9.5px; font-style: normal; }
.pn-frame[data-screen="vault"] .vt-more { color: var(--ac-mut); font-size: 9.5px; }
.pn-frame[data-screen="vault"] .vt-acts { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- View {title} ---------- */

.pn-frame[data-screen="vault"] .vt-overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: none;
  place-items: center;
  padding: 13px;
  background: rgb(17 19 24 / 0.25);
}

.pn-frame[data-screen="vault"][data-mk-scene="1"] .vt-overlay { display: grid; }

.pn-frame[data-screen="vault"] .vt-modal {
  width: 784px;
  max-width: 100%;
  border: 1px solid var(--ac-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 24px 60px rgb(17 19 24 / 0.18), 0 2px 8px rgb(17 19 24 / 0.08);
}

.pn-frame[data-screen="vault"] .vt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 19px 19px 13px;
  border-bottom: 1px solid var(--ac-line);
}

.pn-frame[data-screen="vault"] .vt-modal-head p { font-size: 14px; font-weight: 600; }
.pn-frame[data-screen="vault"] .vt-close { width: 14px; height: 14px; flex-shrink: 0; color: var(--ac-dim); }

.pn-frame[data-screen="vault"] .vt-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 19px 18px;
  font-size: 11px;
}

.pn-frame[data-screen="vault"] .vt-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(218px, 0.85fr);
  align-items: start;
  gap: 16px;
}

.pn-frame[data-screen="vault"] .vt-preview-grid section { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.pn-frame[data-screen="vault"] .vt-details { overflow: hidden; border: 1px solid var(--ac-line); border-radius: 8px; }
.pn-frame[data-screen="vault"] .vt-detail { padding: 9px 10px; }
.pn-frame[data-screen="vault"] .vt-detail + .vt-detail { border-top: 1px solid var(--ac-line); }
.pn-frame[data-screen="vault"] .vt-detail > em { color: var(--ac-mut); font-size: 9.5px; font-style: normal; font-weight: 500; }
.pn-frame[data-screen="vault"] .vt-detail > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.pn-frame[data-screen="vault"] .vt-detail b { min-width: 0; overflow: hidden; color: var(--ac-ink); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.pn-frame[data-screen="vault"] .vt-detail b.is-mono { font-family: var(--ac-mono); letter-spacing: 0.04em; }

.pn-frame[data-screen="vault"] .vt-record {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--vt-elev);
  color: var(--ac-mut);
  font-size: 9.5px;
}

.pn-frame[data-screen="vault"] .vt-record dt { color: var(--ac-ink); font-weight: 500; }
.pn-frame[data-screen="vault"] .vt-record dd { margin: 3px 0 0; font-variant-numeric: tabular-nums; }
.pn-frame[data-screen="vault"] .vt-record dd.is-big { font-size: 11px; }
.pn-frame[data-screen="vault"] .vt-record .is-rule { padding-top: 10px; border-top: 1px solid var(--ac-line); }

.pn-frame[data-screen="vault"] .vt-notes { padding: 13px; border: 1px solid var(--ac-line); border-radius: 8px; }
.pn-frame[data-screen="vault"] .vt-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pn-frame[data-screen="vault"] .vt-notes > p { margin-top: 8px; color: var(--ac-mut); }

.pn-frame[data-screen="vault"] .vt-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--ac-line);
}

/* ---------- the toasts ---------- */

.pn-frame[data-screen="vault"] .vt-toast {
  position: absolute;
  z-index: 6;
  right: 77px;
  bottom: 19px;
  display: none;
  align-items: center;
  gap: 10px;
  width: 272px;
  box-sizing: border-box;
  padding: 8px 8px 8px 10px;
  border: 1px solid rgb(24 124 73 / 0.35);
  border-radius: 10px;
  background: var(--vt-success-soft);
  box-shadow: 0 10px 24px rgb(17 19 24 / 0.12);
  color: var(--vt-success);
}

.pn-frame[data-screen="vault"] .vt-toast p { flex: 1; color: var(--ac-ink); font-size: 11px; font-weight: 500; }
.pn-frame[data-screen="vault"] .vt-toast-i { width: 13px; height: 13px; flex-shrink: 0; }

.pn-frame[data-screen="vault"] .vt-toast-x {
  display: grid;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  place-items: center;
  border: 1.5px solid rgb(24 124 73 / 0.45);
  border-radius: 99px;
}

.pn-frame[data-screen="vault"] .vt-toast-x .vt-i { width: 11px; height: 11px; }

.pn-frame[data-screen="vault"][data-mk-scene="1"] .vt-toast.is-copied,
.pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-toast.is-imported { display: flex; }

/* ---------- Import passwords, further down the page ---------- */

.pn-frame[data-screen="vault"] .pn-scroll { overflow: hidden; }

/* How far the page scrolls depends on what sits above the card, and the
   English page is 65px shorter there: one toolbar row and one subtitle line
   fewer. The card itself is the same height in both languages. */
.pn-frame[data-screen="vault"] { --vt-lift: 0px; }
html[lang="en"] .pn-frame[data-screen="vault"] { --vt-lift: 65px; }
.pn-frame[data-screen="vault"][data-mk-scene="2"] .pn-body { transform: translateY(calc(var(--vt-lift) - 818px)); }

/* ---------- the client's sign-in page ---------- */

.pn-frame[data-screen="vault"] .vt-web {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: none;
  place-items: center;
  background: linear-gradient(180deg, #eef3f8 0%, #e6edf5 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.pn-frame[data-screen="vault"][data-mk-scene="3"] .vt-web { display: grid; }

.pn-frame[data-screen="vault"] .vt-web-card {
  display: flex;
  width: 352px;
  box-sizing: border-box;
  flex-direction: column;
  padding: 30px 30px 26px;
  border: 1px solid #dbe3ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgb(15 76 129 / 0.1);
  color: #14202e;
}

.pn-frame[data-screen="vault"] .vt-web-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.pn-frame[data-screen="vault"] .vt-web-brand b { font-weight: 700; letter-spacing: -0.01em; }
.pn-frame[data-screen="vault"] .vt-web-logo { width: 26px; height: 26px; }

.pn-frame[data-screen="vault"] .vt-web-kicker {
  margin-top: 22px;
  color: #5b6b7d;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pn-frame[data-screen="vault"] .vt-web-title { margin-top: 5px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.pn-frame[data-screen="vault"] .vt-web-lede { margin-top: 4px; margin-bottom: 18px; color: #5b6b7d; font-size: 11px; }

.pn-frame[data-screen="vault"] .vt-web-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.pn-frame[data-screen="vault"] .vt-web-field em { color: #2b3a4a; font-size: 10px; font-style: normal; font-weight: 600; }

.pn-frame[data-screen="vault"] .vt-web-input {
  display: flex;
  height: 34px;
  box-sizing: border-box;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
}

.pn-frame[data-screen="vault"] .vt-web-input b { font-weight: 400; }
.pn-frame[data-screen="vault"] .vt-web-input.is-pass b { letter-spacing: 0.1em; }

.pn-frame[data-screen="vault"] .vt-web-submit {
  display: grid;
  height: 36px;
  margin-top: 5px;
  place-items: center;
  border-radius: 8px;
  background: #0f4c81;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.pn-frame[data-screen="vault"] .vt-web-forgot { margin-top: 13px; color: #0f4c81; font-size: 10.5px; text-align: center; text-underline-offset: 2px; }

/* ---------- the AgentticVault popup ---------- */

:has(> .pn-frame[data-screen="vault"]) > .browser-bar .mk-ext {
  display: grid;
  width: 24px;
  height: 24px;
  margin-left: auto;
  place-items: center;
  border-radius: 6px;
  color: #111827;
}

:has(> .pn-frame[data-screen="vault"]) > .browser-bar .mk-ext-i { width: 15px; height: 15px; }
:has(> .pn-frame[data-screen="vault"][data-mk-scene="3"]) > .browser-bar .mk-ext { background: #e8ebf0; }

/* The popup is the extension's own page, 400px wide, at this frame's scale. */
.pn-frame[data-screen="vault"] .vt-pop {
  position: absolute;
  z-index: 8;
  top: 4px;
  right: 10px;
  display: none;
  width: 320px;
  overflow: hidden;
  border-radius: 9px;
  background: #f4f7fb;
  box-shadow: 0 14px 36px rgb(17 24 39 / 0.2), 0 0 0 1px rgb(17 24 39 / 0.08);
  color: #111827;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  transform-origin: top right;
}

.pn-frame[data-screen="vault"][data-mk-scene="3"] .vt-pop { display: block; }

.pn-frame[data-screen="vault"] .vt-pop-mast {
  display: flex;
  min-height: 53px;
  box-sizing: border-box;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid #dbe2ec;
  background: rgb(255 255 255 / 0.9);
}

.pn-frame[data-screen="vault"] .vt-pop-mark {
  display: grid;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  background: #111827;
  color: #fff;
}

.pn-frame[data-screen="vault"] .vt-pop-mark .vt-i { width: 16px; height: 16px; }
.pn-frame[data-screen="vault"] .vt-pop-brand { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.pn-frame[data-screen="vault"] .vt-pop-brand b { font-size: 11.2px; font-weight: 700; letter-spacing: -0.01em; }
.pn-frame[data-screen="vault"] .vt-pop-brand em { color: #667085; font-size: 8.8px; font-style: normal; }

.pn-frame[data-screen="vault"] .vt-pop-ibtn {
  display: grid;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  box-sizing: border-box;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #4b5563;
}

.pn-frame[data-screen="vault"] .vt-pop-ibtn.is-bordered { border-color: #cfd8e5; background: #fff; }

.pn-frame[data-screen="vault"] .vt-pop-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 17px 14px 14px;
}

.pn-frame[data-screen="vault"] .vt-pop-heading { display: flex; align-items: flex-start; gap: 8px; }
.pn-frame[data-screen="vault"] .vt-pop-heading > span:first-child { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }

.pn-frame[data-screen="vault"] .vt-pop-heading b {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-frame[data-screen="vault"] .vt-pop-heading em { color: #667085; font-size: 10.4px; font-style: normal; }
.pn-frame[data-screen="vault"] .vt-pop-actions { display: flex; align-items: center; gap: 6px; }

.pn-frame[data-screen="vault"] .vt-pop-primary {
  display: inline-flex;
  min-height: 32px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #111827;
  border-radius: 7px;
  background: #111827;
  box-shadow: 0 1px 2px rgb(17 24 39 / 0.18);
  color: #fff;
  font-size: 12.8px;
  font-weight: 700;
}

.pn-frame[data-screen="vault"] .vt-pop-primary.is-compact { min-height: 27px; padding: 0 8px; font-size: 8.8px; }
.pn-frame[data-screen="vault"] .vt-pop-primary.is-compact .vt-i { width: 12px; height: 12px; }

.pn-frame[data-screen="vault"] .vt-pop-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid #d7dfea;
  border-radius: 9px;
  background: #e9eef5;
}

.pn-frame[data-screen="vault"] .vt-pop-tabs b {
  display: grid;
  min-height: 29px;
  place-items: center;
  border-radius: 6px;
  color: #596579;
  font-size: 9.6px;
  font-weight: 750;
}

.pn-frame[data-screen="vault"] .vt-pop-tabs b.is-on { background: #fff; box-shadow: 0 1px 3px rgb(16 24 40 / 0.12); color: #111827; }

.pn-frame[data-screen="vault"] .vt-pop-tools { display: grid; grid-template-columns: minmax(0, 1fr) 106px; gap: 6px; }

.pn-frame[data-screen="vault"] :is(.vt-pop-search, .vt-pop-select) {
  display: flex;
  min-height: 30px;
  box-sizing: border-box;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #cfd8e5;
  border-radius: 8px;
  background: #fff;
  color: #7a8493;
}

.pn-frame[data-screen="vault"] :is(.vt-pop-search, .vt-pop-select) em { min-width: 0; flex: 1; overflow: hidden; font-size: 9.6px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.pn-frame[data-screen="vault"] .vt-pop-select em { color: #111827; font-size: 8.8px; }

.pn-frame[data-screen="vault"] .vt-pop-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d7dfea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
}

.pn-frame[data-screen="vault"] .vt-pop-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.pn-frame[data-screen="vault"] .vt-pop-copy b { overflow: hidden; font-size: 10.4px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pn-frame[data-screen="vault"] .vt-pop-copy em { display: flex; align-items: center; gap: 4px; color: #667085; font-size: 8.8px; font-style: normal; }
.pn-frame[data-screen="vault"] .vt-pop-copy em .vt-i { width: 11px; height: 11px; }
.pn-frame[data-screen="vault"] .vt-fill { align-self: start; min-height: 27px; }

.pn-frame[data-screen="vault"] .vt-pop-quick {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid #edf0f5;
}

.pn-frame[data-screen="vault"] .vt-pop-quick b {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 7px;
  background: #f2f5f8;
  color: #536070;
  font-size: 8px;
  font-weight: 700;
}

.pn-frame[data-screen="vault"] .vt-pop-quick .vt-i { width: 12px; height: 12px; }

.pn-frame[data-screen="vault"] .vt-pop-generator {
  display: flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #b9c4d2;
  border-radius: 8px;
  color: #344054;
  font-size: 8.8px;
  font-weight: 700;
}

.pn-frame[data-screen="vault"] .vt-pop-foot { display: flex; align-items: center; justify-content: space-between; color: #7a8493; font-size: 8px; }
.pn-frame[data-screen="vault"] .vt-pop-foot em { font-style: normal; }
.pn-frame[data-screen="vault"] .vt-pop-foot b { display: inline-flex; min-height: 26px; align-items: center; gap: 6px; padding: 0 6px; color: #4b5563; font-size: 10.4px; font-weight: 700; }
.pn-frame[data-screen="vault"] .vt-pop-foot b .vt-i { width: 12px; height: 12px; }

.pn-frame[data-screen="vault"] .vt-pop-toast {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1d4d3f;
  box-shadow: 0 8px 24px rgb(17 24 39 / 0.16);
  color: #fff;
  font-size: 9.6px;
  font-weight: 650;
}

/* ---------- the motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* 0 — the list; the first item is pointed at and opened. */
  .pn-frame[data-screen="vault"][data-mk-scene="0"] tr.is-picked td { animation: vt-hover 0.01s step-start 2.9s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="0"] tr.is-picked .vt-title { animation: vt-link 0.01s step-start 2.9s both, vt-press 0.34s ease 3.55s; }

  /* 1 — the item: its access details; Copy password. */
  .pn-frame[data-screen="vault"][data-mk-scene="1"] .vt-overlay { animation: vt-fade 0.2s ease-out both; }
  .pn-frame[data-screen="vault"][data-mk-scene="1"] .vt-modal { animation: vt-land 0.28s ease-out both; }
  .pn-frame[data-screen="vault"][data-mk-scene="1"] .vt-copy { animation: vt-press 0.34s ease 2.2s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="1"] .vt-toast.is-copied { animation: vt-toast-in 0.3s ease-out 2.45s both; }

  /* 2 — down to Import passwords, then on to its preview; Encrypt and
     import, the count through the items; the toast, and the card at rest —
     which leaves the page shorter, so the view settles on its new end. */
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .pn-body { animation: vt-scroll 5.3s linear both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-file .is-chosen { animation: vt-off 5.3s step-end both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-file .is-none { animation: vt-on 5.3s step-end both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-preview-fold { animation: vt-shut 5.3s step-end both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-progress-fold { animation: vt-open-shut 5.3s step-end both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-preview .vt-acts .md-btn { animation: vt-dim 0.01s step-start 2.7s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-preview .vt-acts .vt-commit { animation: vt-press 0.34s ease 2.45s both, vt-dim 0.01s step-start 2.7s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-progress .is-encrypting { animation: vt-off 4.2s step-end both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-progress .is-uploading { animation: vt-on 4.2s step-end both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-n.is-enc { animation: vt-count 1.3s linear 2.8s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-n.is-up { animation: vt-count 0.85s linear 4.25s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-bar u { animation: vt-bar 2.4s linear 2.75s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="2"] .vt-toast.is-imported { animation: vt-toast-in 0.3s ease-out 5.35s both; }

  /* 3 — the client's site: AgentticVault opened, Fill, the form filled. */
  .pn-frame[data-screen="vault"][data-mk-scene="3"] .vt-web { animation: vt-fade 0.25s ease-out both; }
  :has(> .pn-frame[data-screen="vault"][data-mk-scene="3"]) > .browser-bar .mk-ext { animation: vt-ext 0.5s ease 0.35s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="3"] .vt-pop { animation: vt-pop 0.22s ease-out 0.6s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="3"] .vt-fill { animation: vt-press 0.34s ease 2.35s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="3"] .vt-web-input b { animation: vt-fade 0.12s ease-out 2.6s both; }
  .pn-frame[data-screen="vault"][data-mk-scene="3"] .vt-web-input { animation: vt-filled 1.4s ease-out 2.6s; }
  .pn-frame[data-screen="vault"][data-mk-scene="3"] .vt-pop-toast { animation: vt-toast-in 0.3s ease-out 2.7s both; }
}

@keyframes vt-hover {
  from { background: transparent; }
  to { background: var(--vt-elev); }
}

@keyframes vt-link {
  from { color: var(--ac-ink); text-decoration: none; }
  to { color: var(--vt-accent); text-decoration: underline; }
}

@keyframes vt-press {
  0%, 100% { transform: none; }
  45% { transform: scale(0.94); }
}

@keyframes vt-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vt-land {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes vt-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Measured on the built Spanish page (design px): Import passwords starts
   at 887, its preview ends at 1752, the page shows 668, and without the
   preview the page ends at 1486. So: the card's title near the top, then
   the preview's buttons in view, then the end of the shorter page. */
@keyframes vt-scroll {
  0%, 2.8% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  16%, 25.5% { transform: translateY(calc(var(--vt-lift) - 871px)); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  36.8% { transform: translateY(calc(var(--vt-lift) - 1132px)); animation-timing-function: step-end; }
  99.9% { transform: translateY(calc(var(--vt-lift) - 1132px)); animation-timing-function: step-end; }
  100% { transform: translateY(calc(var(--vt-lift) - 818px)); }
}

@keyframes vt-off {
  0% { visibility: visible; }
  100% { visibility: hidden; }
}

@keyframes vt-on {
  0% { visibility: hidden; }
  100% { visibility: visible; }
}

@keyframes vt-shut {
  0% { max-height: 420px; visibility: visible; }
  100% { max-height: 0; visibility: hidden; }
}

/* Absent until Encrypt and import (2.7s of 5.3), there until the toast. */
@keyframes vt-open-shut {
  0% { max-height: 0; visibility: hidden; }
  50.9% { max-height: 90px; visibility: visible; }
  100% { max-height: 0; visibility: hidden; }
}

@keyframes vt-dim {
  from { opacity: 1; }
  to { opacity: 0.55; }
}

@keyframes vt-count {
  from { --vt-n: 1; }
  to { --vt-n: 38; }
}

@keyframes vt-bar {
  0% { width: 0; }
  56% { width: 100%; }
  56.5% { width: 0; }
  95%, 100% { width: 100%; }
}

@keyframes vt-ext {
  0%, 100% { transform: none; }
  45% { transform: scale(0.88); }
}

@keyframes vt-pop {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes vt-filled {
  from { border-color: var(--vt-accent); box-shadow: 0 0 0 3px rgb(70 117 87 / 0.18); }
  to { border-color: #cfd8e3; box-shadow: none; }
}