:root { --vault-bg: #080c14; --vault-card: #101722; --vault-line: #263142; }
body { min-height: 100vh; background: radial-gradient(circle at 15% 10%, #14233d 0, var(--vault-bg) 35%); color: #e7edf6; }
.navbar { background: rgba(8, 12, 20, .82); backdrop-filter: blur(12px); }
.navbar-brand { color: #74a7ff; letter-spacing: .02em; }
.card { background: rgba(16, 23, 34, .94); border: 1px solid var(--vault-line); border-radius: 1rem; overflow: hidden; }
.auth-card { max-width: 500px; }
.form-control { background-color: #0b111b; border-color: #334158; padding: .75rem 1rem; }
.form-control:focus { background-color: #0b111b; border-color: #6397f2; box-shadow: 0 0 0 .2rem rgba(99,151,242,.15); }
.code { font-size: 1.7rem; letter-spacing: .55rem; font-variant-numeric: tabular-nums; }
.qr-wrap { display: inline-block; background: white; border-radius: 1rem; padding: .75rem; }
.qr-wrap img { display: block; }
.shield { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #123d31; color: #58dda8; font-size: 1.5rem; }
.table > :not(caption) > * > * { padding: 1rem; background: transparent; border-color: var(--vault-line); }
.password-value { color: #ffc966; overflow-wrap: anywhere; }
.password-field { position: relative; }
.password-input { padding-right: 3rem; }
.password-toggle { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; color: #9aa9bc; border-radius: .4rem; }
.password-toggle:hover, .password-toggle:focus-visible { color: #fff; background: #253247; outline: none; }
.eye-icon { display: inline-block; width: 1.1rem; height: .75rem; border: 2px solid currentColor; border-radius: 70% 30%; transform: rotate(45deg); position: relative; }
.eye-icon::after { content: ""; position: absolute; width: .3rem; height: .3rem; background: currentColor; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
[aria-pressed="true"] .eye-icon::before { content: ""; position: absolute; width: 1.4rem; height: 2px; background: currentColor; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); z-index: 1; }
.credential-secret { display: flex; align-items: center; gap: .45rem; min-width: 15rem; }
.credential-secret .password-value { flex: 1; }
.vault-toast { position: fixed; right: 1.5rem; bottom: 1.5rem; padding: .75rem 1.1rem; color: #07140f; background: #58dda8; border-radius: .6rem; font-weight: 700; opacity: 0; transform: translateY(.5rem); pointer-events: none; transition: .2s ease; z-index: 1080; }
.vault-toast.show { opacity: 1; transform: translateY(0); }