/* AE Vault (8.3): the AE apps' look (the same greys, type, 12 to 16px corners, soft side menu with a
   bar on the chosen item), with AE Vault's own colour, the blue of its icon, as AE Chat has purple and
   AE Inspect green. Text on the blue is white in both themes (5:1 or better). */
:root{
  --c-canvas:#f6f6f7; --c-surface:#ffffff; --c-inset:#efeff1; --c-divider:#e3e3e6; --c-border:#d4d4d8;
  --c-text:#18181b; --c-text-2:#55555b;
  --c-brand:#1b5fd1; --c-brand-press:#164fae; --c-brand-text:#1a56bd; --c-brand-soft:#e8f0fd;
  --c-ok:#176534; --c-ok-bg:#e9f6ed; --c-warn:#855500; --c-warn-bg:#fff3d8; --c-err:#a32032; --c-err-bg:#fcecef;
  --r-sm:10px; --r:14px; --r-lg:20px; --tap:48px;
  --sh-1:0 1px 2px rgba(16,24,40,.05); --sh-2:0 4px 16px rgba(16,24,40,.08); --sh-3:0 16px 48px rgba(16,24,40,.18);
  color-scheme:light;
}
/* 8.4: dark when the device is dark (unless Light is chosen in the menu), or when Dark is chosen */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --c-canvas:#101012; --c-surface:#1c1c1f; --c-inset:#252529; --c-divider:#2e2e33; --c-border:#3a3a40;
    --c-text:#f4f4f5; --c-text-2:#b7b7be;
    --c-brand:#1f63d6; --c-brand-press:#1a56bd; --c-brand-text:#8db4ff; --c-brand-soft:#16233a;
    --c-ok:#75d89a; --c-ok-bg:#12301f; --c-warn:#ffd27a; --c-warn-bg:#3a2a10; --c-err:#ff8997; --c-err-bg:#3a1a21;
    --sh-1:none; --sh-2:0 4px 16px rgba(0,0,0,.45); --sh-3:0 16px 48px rgba(0,0,0,.6); color-scheme:dark; }
}
:root[data-theme="dark"]{ --c-canvas:#101012; --c-surface:#1c1c1f; --c-inset:#252529; --c-divider:#2e2e33; --c-border:#3a3a40;
  --c-text:#f4f4f5; --c-text-2:#b7b7be;
  --c-brand:#1f63d6; --c-brand-press:#1a56bd; --c-brand-text:#8db4ff; --c-brand-soft:#16233a;
  --c-ok:#75d89a; --c-ok-bg:#12301f; --c-warn:#ffd27a; --c-warn-bg:#3a2a10; --c-err:#ff8997; --c-err-bg:#3a1a21;
  --sh-1:none; --sh-2:0 4px 16px rgba(0,0,0,.45); --sh-3:0 16px 48px rgba(0,0,0,.6); color-scheme:dark; }
/* the Light / Dark / Match device choice in the account menu */
.v-theme{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin:4px 6px 6px; padding:4px; border-radius:var(--r-sm); background:var(--c-inset); }
.v-theme-label{ margin:6px 14px 0; color:var(--c-text-2); font-size:.8125rem; font-weight:600; }
.v-menu .v-theme button{ min-height:40px; padding:0 6px; border-radius:8px; text-align:center; font-size:.8125rem; font-weight:600; color:var(--c-text-2); }
.v-menu .v-theme button[aria-pressed="true"]{ background:var(--c-surface); color:var(--c-text); box-shadow:var(--sh-1); }
*{ box-sizing:border-box; }
html, body{ margin:0; min-height:100%; background:var(--c-canvas); color:var(--c-text); font:15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-text-size-adjust:100%; }
button, input, select, textarea{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
h1{ margin:0 0 6px; font-size:1.625rem; line-height:1.2; font-weight:700; letter-spacing:-.015em; }
h2{ margin:0; font-size:1.0625rem; font-weight:700; }
:focus-visible{ outline:2px solid var(--c-brand); outline-offset:2px; }
svg{ flex:none; }

.v-app{ min-height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* top bar */
.v-top{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; min-height:64px; padding:8px 16px; background:var(--c-surface); border-bottom:1px solid var(--c-divider); }
.v-brand{ display:flex; align-items:center; gap:10px; font-size:1.0625rem; font-weight:700; }
.v-logo{ width:32px; height:32px; border-radius:8px; }
.v-spacer{ flex:1; }
.v-lockbtn{ gap:8px; }
.v-avatar-btn{ display:flex; align-items:center; gap:10px; min-height:var(--tap); padding:4px 10px 4px 4px; border:1px solid transparent; border-radius:999px; background:none; cursor:pointer; }
.v-avatar-btn:hover{ background:var(--c-inset); }
.v-avatar{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--c-brand-soft); color:var(--c-brand-text); font-size:.8125rem; font-weight:700; }
.v-who{ max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--c-text-2); font-size:.875rem; }
.v-menu{ position:absolute; right:16px; top:68px; z-index:6; display:flex; flex-direction:column; min-width:240px; padding:6px; border:1px solid var(--c-divider); border-radius:var(--r); background:var(--c-surface); box-shadow:var(--sh-3); }
.v-menu button{ min-height:var(--tap); padding:0 14px; border:0; border-radius:var(--r-sm); background:none; text-align:left; cursor:pointer; font-weight:500; }
.v-menu button:hover{ background:var(--c-inset); }
.v-menu-note{ margin:4px 0 0; padding:10px 14px 6px; border-top:1px solid var(--c-divider); color:var(--c-text-2); font-size:.8125rem; }
.v-menu-note:empty{ display:none; }
.v-banner{ margin:0; padding:10px 16px; background:var(--c-warn-bg); color:var(--c-warn); font-size:.875rem; }

/* sign in, unlock, set up */
.v-card{ background:var(--c-surface); border:1px solid var(--c-divider); border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.v-narrow{ max-width:440px; margin:max(24px, 7vh) auto 24px; padding:32px 28px 28px; width:calc(100% - 32px); }
.v-hero-icon{ display:block; width:64px; height:64px; margin:0 0 18px; border-radius:16px; box-shadow:var(--sh-2); }
.v-step{ display:inline-block; margin:0 0 10px; padding:3px 10px; border-radius:999px; background:var(--c-brand-soft); color:var(--c-brand-text); font-size:.8125rem; font-weight:600; }
.v-sub{ margin:0 0 22px; color:var(--c-text-2); }
.v-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; font-size:.875rem; font-weight:600; }
.v-field input, .v-field select, .v-field textarea{ width:100%; min-height:var(--tap); padding:11px 14px; border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-surface); font-size:max(16px, 1rem); font-weight:400; transition:border-color .15s, box-shadow .15s; }
.v-field input:focus, .v-field select:focus, .v-field textarea:focus{ outline:none; border-color:var(--c-brand); box-shadow:0 0 0 3px var(--c-brand-soft); }
.v-field textarea{ resize:vertical; }
.v-pw{ position:relative; display:flex; align-items:center; gap:8px; }
.v-pw input{ flex:1; min-width:0; padding-right:78px; }
.v-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); min-height:36px; min-width:64px; padding:0 10px; border:0; border-radius:8px; background:var(--c-inset); color:var(--c-text); font-size:.8125rem; font-weight:600; cursor:pointer; }
.v-pw .v-btn{ flex:none; }
#f-edit .v-pw input{ padding-right:78px; }
#f-edit .v-pw .v-eye{ right:auto; left:auto; position:static; transform:none; min-height:var(--tap); }
#f-edit .v-pw input{ padding-right:14px; }
.v-code-in{ font-size:1.375rem !important; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums; }
.v-meter{ height:6px; margin:-8px 0 8px; border-radius:3px; background:var(--c-inset); overflow:hidden; }
.v-meter i{ display:block; height:100%; width:0; border-radius:3px; background:var(--c-err); transition:width .2s, background .2s; }
.v-meter[data-level="1"] i{ width:25%; background:var(--c-err); }
.v-meter[data-level="2"] i{ width:50%; background:var(--c-warn); }
.v-meter[data-level="3"] i{ width:75%; background:var(--c-ok); }
.v-meter[data-level="4"] i{ width:100%; background:var(--c-ok); }
.v-hint{ margin:0 0 16px; color:var(--c-text-2); font-size:.8125rem; }
.v-hint.good{ color:var(--c-ok); font-weight:600; }
.v-err{ margin:0 0 14px; padding:10px 12px; border-radius:var(--r-sm); background:var(--c-err-bg); color:var(--c-err); font-size:.875rem; }
.v-err:empty{ display:none; }
.v-check{ display:flex; gap:12px; align-items:flex-start; margin:16px 0; padding:12px 14px; border-radius:var(--r-sm); background:var(--c-inset); font-size:.9375rem; cursor:pointer; }
.v-check input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--c-brand); flex:none; }
.v-code{ margin:0 0 14px; padding:18px; border:2px dashed var(--c-border); border-radius:var(--r); background:var(--c-inset); font:600 1.1875rem/1.6 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing:.06em; word-break:break-all; text-align:center; }

/* buttons */
.v-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--tap); padding:0 18px; border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-surface); font-weight:600; cursor:pointer; text-decoration:none; color:var(--c-text); transition:background .15s, border-color .15s; }
.v-btn:hover{ background:var(--c-inset); }
.v-btn:disabled{ opacity:.5; cursor:default; }
.v-primary{ background:var(--c-brand); border-color:var(--c-brand); color:#fff; }
.v-primary:hover{ background:var(--c-brand-press); border-color:var(--c-brand-press); }
.v-soft{ background:var(--c-brand-soft); border-color:transparent; color:var(--c-brand-text); }
.v-soft:hover{ background:var(--c-brand-soft); filter:brightness(.97); }
.v-danger{ background:var(--c-err-bg); border-color:transparent; color:var(--c-err); }
.v-danger:hover{ background:var(--c-err-bg); filter:brightness(.97); }
.v-ghost{ background:none; border-color:transparent; }
.v-small{ min-height:40px; padding:0 14px; font-size:.875rem; }
.v-wide{ width:100%; }
.v-link{ display:block; width:100%; min-height:44px; margin-top:8px; border:0; background:none; color:var(--c-brand-text); font-weight:600; cursor:pointer; }
.v-row{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px; }
.v-row .v-btn{ flex:1 1 auto; }

/* the vault: side menu of vaults, logins on the right */
.v-main{ display:grid; grid-template-columns:280px minmax(0, 1fr); min-height:calc(100dvh - 64px); }
.v-side{ border-right:1px solid var(--c-divider); background:var(--c-surface); padding:20px 12px; }
.v-side-head{ display:flex; align-items:center; gap:8px; margin:0 4px 14px; }
.v-side-head h2{ flex:1; font-size:.8125rem; color:var(--c-text-2); text-transform:uppercase; letter-spacing:.06em; }
.v-pane{ padding:24px clamp(16px, 3vw, 40px); min-width:0; max-width:1000px; }
.v-pane-head{ display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.v-pane-head h2{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.5rem; letter-spacing:-.01em; }
.v-back{ display:none; padding:0 10px 0 4px; }
.v-search-wrap{ display:flex; align-items:center; gap:10px; min-height:var(--tap); margin-bottom:16px; padding:0 14px; border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-surface); color:var(--c-text-2); }
.v-search-wrap:focus-within{ border-color:var(--c-brand); box-shadow:0 0 0 3px var(--c-brand-soft); }
.v-search{ flex:1; min-width:0; min-height:44px; border:0; background:none; font-size:max(16px, 1rem); outline:none; }
.v-list{ display:flex; flex-direction:column; gap:6px; }
.v-vault-btn{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 12px; border:0; border-radius:var(--r-sm); background:none; text-align:left; cursor:pointer; position:relative; }
.v-vault-btn:hover{ background:var(--c-inset); }
.v-vault-btn.on{ background:var(--c-brand-soft); }
.v-vault-btn.on::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--c-brand); }
.v-vault-ic{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--c-inset); color:var(--c-text-2); }
.v-vault-btn.on .v-vault-ic{ background:var(--c-surface); color:var(--c-brand-text); }
.v-row-btn{ display:flex; align-items:center; gap:14px; width:100%; min-height:68px; padding:10px 12px 10px 14px; border:1px solid var(--c-divider); border-radius:var(--r); background:var(--c-surface); text-align:left; cursor:pointer; box-shadow:var(--sh-1); transition:border-color .15s; }
.v-row-btn:hover{ border-color:var(--c-border); }
.v-row-btn:disabled{ cursor:default; opacity:.7; }
.v-login{ display:flex; align-items:center; gap:8px; }
.v-login .v-row-btn{ flex:1; min-width:0; }
.v-site{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; color:#fff; font-weight:700; font-size:1rem; flex:none; }
.v-site.c0{ background:#1b5fd1; } .v-site.c1{ background:#176534; } .v-site.c2{ background:#855500; } .v-site.c3{ background:#a32032; } .v-site.c4{ background:#55555b; } .v-site.c5{ background:#5b21b6; }
.v-row-main{ display:flex; flex-direction:column; min-width:0; flex:1; }
.v-row-main b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-row-main small{ color:var(--c-text-2); font-size:.8125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-chev{ color:var(--c-text-2); }
.v-copy{ flex:none; min-height:68px; padding:0 14px; }
.v-empty{ margin:8px 2px; color:var(--c-text-2); font-size:.9375rem; }
.v-empty:empty{ display:none; }
.v-blank{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:48px 16px; text-align:center; color:var(--c-text-2); border:1px dashed var(--c-border); border-radius:var(--r-lg); }
.v-blank b{ color:var(--c-text); font-size:1.0625rem; }
.v-blank .v-blank-ic{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; background:var(--c-brand-soft); color:var(--c-brand-text); }

/* sheets (pop-ups) */
.v-sheet{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,10,12,.5); }
.v-sheet-card{ width:min(520px, 100%); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border-radius:var(--r-lg); background:var(--c-surface); box-shadow:var(--sh-3); }
.v-wide-card{ width:min(720px, 100%); }
.v-sheet-head{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.v-sheet-head h2{ flex:1; min-width:0; overflow-wrap:anywhere; font-size:1.25rem; }
.v-facts{ margin:0 0 12px; border:1px solid var(--c-divider); border-radius:var(--r); }
.v-fact{ padding:12px 14px; border-top:1px solid var(--c-divider); }
.v-fact:first-child{ border-top:0; }
.v-fact dt{ color:var(--c-text-2); font-size:.8125rem; font-weight:600; margin-bottom:4px; }
.v-fact dd{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
.v-val{ flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
.v-mono{ font-family:ui-monospace, "SF Mono", Consolas, monospace; letter-spacing:.02em; }
.v-notes{ white-space:pre-wrap; }
.v-acts{ display:flex; gap:6px; }
.v-link-out{ color:var(--c-brand-text); overflow-wrap:anywhere; font-weight:500; }
.v-meta{ margin:0 0 16px; color:var(--c-text-2); font-size:.8125rem; }
.v-person{ display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--c-divider); }
.v-person:first-child{ border-top:0; }
#people-add{ margin-top:16px; padding-top:16px; border-top:1px solid var(--c-divider); }
#btn-vault-del{ margin-top:16px; }
.v-log{ display:flex; flex-wrap:wrap; gap:4px 6px; padding:12px 0; border-top:1px solid var(--c-divider); font-size:.9375rem; }
.v-log small{ flex-basis:100%; color:var(--c-text-2); }
.v-toast{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:40; transform:translateX(-50%); max-width:calc(100% - 32px); margin:0; padding:12px 18px; border-radius:var(--r); background:#18181b; color:#fff; font-size:.9375rem; box-shadow:var(--sh-3); }

/* phones: the vault list, then one vault at a time */
@media (max-width:759px){
  .v-main{ grid-template-columns:minmax(0, 1fr); }
  .v-side{ border-right:0; background:none; padding:16px; }
  .v-main.pane-open .v-side{ display:none; }
  .v-main:not(.pane-open) .v-pane{ display:none; }
  .v-pane{ padding:12px 16px 24px; }
  .v-back{ display:inline-flex; }
  .v-pane-head h2{ font-size:1.25rem; flex-basis:100%; order:2; }
  .v-pane-head .v-back{ order:1; margin-right:auto; }
  .v-pane-head #btn-people, .v-pane-head #btn-new-item{ order:1; }
  .v-sheet{ align-items:flex-end; padding:0; }
  .v-sheet-card{ border-radius:20px 20px 0 0; max-height:92dvh; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .v-who{ display:none; }
  .v-lockbtn span{ display:none; }
  .v-lockbtn{ padding:0 12px; }
  .v-narrow{ margin-top:16px; padding:24px 20px; }
  .v-copy span{ display:none; }
}
@media print{
  body.print-code .v-app > *{ display:none !important; }
  body.print-code #s-recovery{ display:block !important; box-shadow:none; border:0; }
  body.print-code #s-recovery .v-row, body.print-code #s-recovery .v-check, body.print-code #s-recovery .v-btn, body.print-code #s-recovery .v-step{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }