/* Shared password overlay styling.
   DOM: #passwordOverlay > .password-box > .lock-icon, h2, p, .password-input-wrap > input,
        .password-btn, .password-error-msg
   Standardized: padding 2.5rem 2rem, border-radius 16px (per refactor decision).
   --bg-card has a fallback to --bg2 for pages that use the alt naming scheme. */

.authed .password-overlay { display: none !important; }

.password-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s, visibility 0.5s; }
.password-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.password-box { text-align: center; padding: 2.5rem 2rem; border-radius: 16px; background: var(--bg-card, var(--bg2)); border: 1px solid var(--border); box-shadow: var(--shadow); max-width: 400px; width: 90%; animation: fadeUp 0.5s ease; }
.password-box .lock-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-glow); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.password-box .lock-icon svg { width: 26px; height: 26px; stroke: var(--accent); }
.password-box h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; }
.password-box p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.8rem; }

.password-input-wrap { position: relative; margin-bottom: 1rem; }
.password-input-wrap input { width: 100%; padding: 0.9rem 1.2rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; text-align: center; letter-spacing: 0.3em; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.password-input-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.password-input-wrap input.error { border-color: #e74c5e; box-shadow: 0 0 0 3px rgba(231, 76, 94, 0.15); animation: shake 0.4s ease; }

.password-btn { width: 100%; padding: 0.9rem; border-radius: 12px; border: none; background: var(--accent); color: #0b0f14; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.password-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow-strong); }

.password-error-msg { color: #e74c5e; font-size: 0.85rem; margin-top: 0.8rem; opacity: 0; transition: opacity 0.3s; }
.password-error-msg.show { opacity: 1; }