/* The Vault theme */
.vault { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #15171C; color: #E8EAF0; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
.vault-door { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto; perspective: 900px; }
.vault-door .inside { position: absolute; inset: 6%; border-radius: 50%; background: #0B0C0F; display: grid; place-items: center; overflow: hidden; }
.vault-door .inside svg { width: 62%; }
.vault-door .door { position: absolute; inset: 0; transform-origin: 6% 50%; transition: transform 1.1s cubic-bezier(.3,.8,.2,1); }
.vault-door .door svg { width: 100%; height: 100%; display: block; }
.vault-door .dial { transition: transform .6s cubic-bezier(.3,.8,.2,1); transform-origin: 150px 150px; }
.vault.open .door { transform: rotateY(-105deg); }
.vault-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.door-name { margin: 0; font: 800 22px var(--font-display); letter-spacing: -0.02em; }
.door-name span { color: #9AA0AE; font-weight: 600; font-size: 15px; }
.code { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.code span { aspect-ratio: 3 / 4; max-height: 86px; border-radius: 12px; background: #0B0C0F; display: grid; place-items: center; font: 700 clamp(28px, 5vw, 46px) 'SF Mono', 'JetBrains Mono', ui-monospace, monospace; color: #3A3F4B; box-shadow: inset 0 0 0 2px #262A33; transition: color .3s, box-shadow .3s; }
.code span.on { color: var(--strand); box-shadow: inset 0 0 0 2px var(--strand); }
.code span.lost { animation: lost .5s ease; }
@keyframes lost { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.alarms { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #9AA0AE; }
.alarms i { width: 14px; height: 14px; border-radius: 50%; background: #2A2E37; }
.alarms i.on { background: #FF4D4D; box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.25); }
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.doors span { padding: 8px 4px; border-radius: 10px; text-align: center; font: 700 13px var(--font-body); background: var(--sunken); color: var(--muted); }
.doors span.now { box-shadow: inset 0 0 0 2px var(--strand); color: var(--fg); }
.doors span.done { background: var(--strand); color: var(--strand-ink); }
.vault-flash { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); padding: 10px 22px; border-radius: 999px; font: 800 clamp(20px, 3.4vw, 34px) var(--font-display); background: var(--accent); color: #1C1C1E; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 3; }
.vault-flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vault-flash.alarm { background: #FF4D4D; color: #fff; }
.end { text-align: center; padding: 18px; }
.end .big { font: 800 clamp(36px, 6vw, 56px) var(--font-display); letter-spacing: -0.03em; margin: 0; }
@media (max-width: 640px) { .vault { grid-template-columns: minmax(0, 1fr); } .vault-door { max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { .vault-door .door, .vault-door .dial { transition: none; } }