:root.gate-locked { overflow: hidden; }
:root.gate-locked .app-shell,
:root.gate-locked > body > .modal-backdrop,
:root.gate-locked > body > .toast { visibility: hidden; }

.vault-gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; padding: 28px 20px; text-align: center; background: radial-gradient(circle at 50% 32%, #1c3b28 0, #111613 48%, #0c0f0d 100%); overflow: hidden; transition: opacity .45s ease, visibility .45s ease; }
.vault-gate::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(92,218,139,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(92,218,139,.035) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle, black, transparent 75%); }
.vault-gate.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-brand { position: relative; z-index: 1; margin-bottom: 16px; }.gate-mark { display: inline-grid; place-items: center; width: 48px; height: 37px; border: 1px solid #58d98b; border-radius: 8px; box-shadow: inset 0 0 0 3px #142a1c, 0 0 24px rgba(87,215,140,.16); color: #9bf3bd; background: #173524; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; }
.vault-gate h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(27px, 4vw, 38px); letter-spacing: -1.2px; }.vault-gate > p { position: relative; z-index: 1; color: #9fac9f; margin: 8px 0 24px; }
.digital-safe { position: relative; width: 214px; height: 174px; margin: 0 auto 25px; perspective: 760px; filter: drop-shadow(0 26px 22px rgba(0,0,0,.35)); }.safe-body { position: absolute; inset: 10px 0 0; border-radius: 16px; background: linear-gradient(145deg, #3d5548, #1a2920 68%); border: 1px solid #638272; box-shadow: inset 0 0 0 8px #273b2f; }.safe-panel { position: absolute; inset: 22px; border: 1px solid #557363; border-radius: 9px; background: #14251b; }.safe-wheel,.door-wheel { position:absolute; width:37px; height:37px; border:7px solid #84a190; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 3px #21392a; }.safe-wheel:after,.door-wheel:after{content:"";position:absolute;width:7px;height:7px;background:#8ff0b5;border-radius:50%;left:8px;top:8px}.safe-line{position:absolute;width:72px;height:1px;background:#476554;left:50%;transform:translateX(-50%)}.line-one{top:41px}.line-two{bottom:41px}.safe-door { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(.2,.8,.2,1); }.door-rim { position: absolute; inset: 0; padding: 9px; background: linear-gradient(145deg, #4e6a5a, #263f30); border: 1px solid #7b9b88; border-radius: 16px; }.door-face { position: relative; height: 100%; background: linear-gradient(135deg, #284536, #15251b); border: 1px solid #62806d; border-radius: 10px; box-shadow: inset 0 0 0 8px #1a3224; }.door-lock { position:absolute; width:13px; height:31px; border-radius:8px; background:#8debb2; right:31px; top:50%; transform:translateY(-50%); box-shadow:0 0 13px rgba(129,239,176,.5); }.digital-safe.safe-unlocked .safe-door { transform: rotateY(-112deg); }.digital-safe.safe-unlocked .door-wheel { animation: wheel .8s ease both; }@keyframes wheel{to{transform:translate(-50%,-50%) rotate(250deg)}}
.gate-form { position: relative; z-index: 1; width: min(100%, 340px); text-align: left; }.gate-form label { color: #9cb0a2; font-size: 10px; font-weight: 700; letter-spacing: 1px; }.password-field { display: flex; margin-top: 7px; background: #111814; border: 1px solid #3a5444; border-radius: 8px; overflow: hidden; }.password-field:focus-within { border-color: #62d98e; box-shadow: 0 0 0 3px rgba(87,215,140,.1); }.password-field input { flex: 1; min-width: 0; border: 0; padding: 12px; color: #edf5ee; background: transparent; outline: 0; font: inherit; }.toggle-password { width: 43px; border: 0; border-left: 1px solid #2e4235; background: transparent; color: #87a493; cursor: pointer; }.gate-error { min-height: 18px; margin: 7px 0 0; color: #ff9995; font-size: 11px; }.unlock-btn { width: 100%; margin-top: 7px; padding: 12px 15px; border: 0; border-radius: 8px; color: #102117; background: #66dc92; font: 750 13px inherit; cursor: pointer; transition: .2s; }.unlock-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }.unlock-btn span { float: right; font-size: 17px; line-height: 13px; }.vault-gate small { position: relative; z-index: 1; color: #66776c; margin-top: 14px; font-size: 10px; }
.password-modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(5,8,6,.76); }.password-modal { position: relative; width: min(100%, 460px); padding: 28px; border: 1px solid #3b5143; border-radius: 12px; background: #1a211d; box-shadow: 0 20px 60px rgba(0,0,0,.4); }.password-modal h2 { margin: 7px 0 4px; font-size: 19px; }.password-modal > p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
@media(max-width: 520px){.vault-gate h1{font-size:27px}.digital-safe{transform:scale(.9);margin-top:-5px;margin-bottom:9px}.vault-gate>p{font-size:12px;margin-bottom:16px}.password-modal{padding:24px 19px}}