/* Local new-password hint: it inherits the page palette and adds no backdrop. */
.password-vault {
  --pv-ink: #18355e;
  --pv-muted: #65728a;
  --pv-line: #8aa9d047;
  --pv-surface: #f3f7ff95;
  --pv-case: #e4edfa;
  --pv-door: #f4f8ff;
  --pv-blue: #245de8;
  --pv-cyan: #21a9a5;
  --pv-weak: #c96058;
  --pv-basic: #d59142;
  --pv-good: #b9a34c;
  --pv-strong: #29957a;
  --pv-metal-dark: #416186;
  --pv-metal-mid: #89add0;
  --pv-metal-light: #e2f0fd;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  width: 100%;
  min-width: 0;
  margin: 3px 0 1px;
  padding: 13px 14px 13px 10px;
  border: 1px solid var(--pv-line);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--pv-surface), transparent);
  box-shadow: inset 0 1px 0 #ffffff60;
  color: var(--pv-ink);
}

:root[data-theme=night] .password-vault {
  --pv-ink: #dce9fa;
  --pv-muted: #adbed3;
  --pv-line: #8cafd739;
  --pv-surface: #14283d85;
  --pv-case: #1b3552;
  --pv-door: #15304d;
  --pv-blue: #99bfff;
  --pv-cyan: #28d9ce;
  --pv-weak: #ee9a90;
  --pv-basic: #ffb45e;
  --pv-good: #e2cf7d;
  --pv-strong: #63cda7;
  --pv-metal-dark: #163855;
  --pv-metal-mid: #5885a9;
  --pv-metal-light: #bfdff0;
  box-shadow: inset 0 1px 0 #ffffff08;
}

.password-vault-visual { perspective: 280px; min-width: 0; }
.pv-vault-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 3px #09223b25); }
.pv-metal-dark { stop-color: var(--pv-metal-dark); }
.pv-metal-mid { stop-color: var(--pv-metal-mid); }
.pv-metal-light { stop-color: var(--pv-metal-light); }
.password-vault-copy { min-width: 0; }
.password-vault-caption { display: block; font-size: 10px; font-weight: 650; line-height: 1.5; letter-spacing: .06em; color: var(--pv-muted); margin-bottom: 4px; }
:root .password-vault .password-vault-copy .password-vault-status { display: block; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--pv-ink); }
:root .password-vault .password-vault-copy .password-vault-hint { display: block; font-size: 12px; font-weight: 400; line-height: 1.65; color: var(--pv-muted); overflow-wrap: anywhere; }
.password-vault-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 8px 0; }
.password-vault-bar { display: block; height: 4px; border-radius: 3px; background: #93a9c325; box-shadow: inset 0 1px 0 #64799b12; transition: background .3s ease, box-shadow .3s ease; }
.password-vault-bar:nth-child(1).is-active { background: var(--pv-weak); }
.password-vault-bar:nth-child(2).is-active { background: var(--pv-basic); }
.password-vault-bar:nth-child(3).is-active { background: var(--pv-good); }
.password-vault-bar:nth-child(4).is-active { background: var(--pv-strong); box-shadow: 0 0 7px #29957a2a; }

.pv-safe-body { opacity: .2; transform: scale(.83); transform-origin: 50% 50%; transform-box: fill-box; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.pv-safe-case { stroke: var(--pv-blue); stroke-width: 1.2; }
.pv-case-side { fill: var(--pv-metal-dark); stroke: var(--pv-blue); stroke-width: 1; }
.pv-case-bevel { fill: none; stroke: var(--pv-metal-light); stroke-width: 1; opacity: .65; }
.pv-case-bolt { fill: var(--pv-metal-dark); stroke: var(--pv-metal-light); stroke-width: .5; }
.pv-bolt-slot { fill: none; stroke: var(--pv-metal-light); stroke-width: .6; }
.pv-inner-case { fill: #102b503d; stroke: var(--pv-cyan); stroke-width: 1; }
.pv-safe-feet, .pv-hinges { fill: none; stroke: var(--pv-blue); stroke-width: 2.4; stroke-linecap: round; }
.pv-vault-door { opacity: 0; transform-box: fill-box; transform-origin: 100% 50%; transform: scale(.86); transition: opacity .45s ease, transform .65s cubic-bezier(.2, .8, .2, 1); }
.pv-door-face { stroke: var(--pv-blue); stroke-width: 1.4; }
.pv-door-rim { stroke: var(--pv-metal-light); stroke-width: 1; }
.pv-door-disc { stroke: var(--pv-metal-dark); stroke-width: .8; }
.pv-door-groove { fill: none; stroke: var(--pv-metal-light); stroke-width: .65; opacity: .55; }
.pv-door-edge { fill: none; stroke: var(--pv-cyan); stroke-width: 1.2; opacity: .7; }
.pv-vault-wheel { fill: none; stroke: var(--pv-blue); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(-50deg); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pv-padlock { opacity: 1; transform-box: fill-box; transform-origin: 50% 65%; transform: translateY(0) scale(1); transition: opacity .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.pv-shackle { fill: none; stroke: var(--pv-blue); stroke-width: 3.4; stroke-linecap: round; }
.pv-lock-face { stroke: var(--pv-blue); stroke-width: 1.5; }
.pv-keyhole { fill: var(--pv-cyan); }
.pv-keyhole-stem { fill: none; stroke: var(--pv-cyan); stroke-width: 2.2; stroke-linecap: round; }
.pv-lock-reflection { fill: none; stroke: var(--pv-blue); stroke-width: 1; opacity: .3; }

.password-vault[data-level="1"] .pv-safe-body { opacity: .35; transform: scale(.88); }
.password-vault[data-level="2"] .pv-safe-body { opacity: .75; transform: scale(.94); }
.password-vault[data-level="2"] .pv-padlock { transform: translateY(3px) scale(.85); }
.password-vault[data-level="2"] .pv-vault-door { opacity: .4; transform: scale(.95); }
.password-vault[data-level="3"] .pv-safe-body,
.password-vault[data-level="4"] .pv-safe-body { opacity: 1; transform: scale(1); }
.password-vault[data-level="3"] .pv-vault-door,
.password-vault[data-level="4"] .pv-vault-door { opacity: 1; transform: scale(1); }
.password-vault[data-level="3"] .pv-padlock { opacity: 0; transform: translateY(8px) scale(.55); }
.password-vault[data-level="4"] .pv-padlock { opacity: 0; transform: translateY(12px) scale(.4); }
.password-vault[data-level="3"] .pv-vault-wheel { transform: rotate(0deg); }
.password-vault[data-level="4"] .pv-vault-wheel { transform: rotate(100deg); }
.password-vault[data-level="4"] .pv-vault-door { transform: perspective(180px) rotateY(-24deg); }
.password-vault[data-level="4"] .pv-inner-case { fill: #28d9ce24; }

@media (max-width: 480px) {
  .password-vault { grid-template-columns: 64px minmax(0, 1fr); padding: 12px 11px 12px 7px; gap: 9px; }
  .password-vault-caption { font-size: 9px; letter-spacing: .04em; }
  :root .password-vault .password-vault-copy .password-vault-status { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .password-vault *, .password-vault *::before, .password-vault *::after { animation: none !important; transition: none !important; }
  .password-vault[data-level="4"] .pv-vault-door { transform: none; }
}