/* ============================================
   redesign.css — Passkey "petrol & brass" look
   Loaded last: restyles every component surface.
   ============================================ */

/* ── Icons (Font Awesome) ───────────────────── */
i.fa-solid, i.fa-regular { line-height: 1; vertical-align: -0.1em; }
.btn i.fa-solid, .btn i.fa-regular { font-size: 0.95em; }
.btn-icon i { font-size: 15px; }
.empty-icon, .confirm-icon, .breach-intro-icon, .export-card-icon { color: var(--accent-text); }
.empty-icon { font-size: 40px; margin-bottom: var(--space-md); }

/* ── Buttons ────────────────────────────────── */
.btn { border-radius: var(--radius-sm); font-weight: var(--font-semibold); letter-spacing: 0; gap: 8px; transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--accent-primary); color: var(--text-on-accent); border: 1px solid transparent; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); }
.btn-danger { background: var(--danger-subtle); color: var(--danger); border: 1px solid rgba(var(--danger-rgb), 0.4); }
.btn-icon { border-radius: var(--radius-sm); color: var(--text-secondary); }
.btn-icon:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon-danger:hover:not(:disabled) { background: var(--danger-subtle); color: var(--danger); }

/* ── Form controls ──────────────────────────── */
.form-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); letter-spacing: 0; text-transform: none; }
.form-input, .form-textarea, .form-select { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-glow); outline: none; }
.form-input.error { border-color: var(--danger); }
.password-input-wrap .form-input, #master-pass, #confirm-pass { font-family: var(--font-mono); letter-spacing: 0.02em; }
.form-error { color: var(--danger); font-size: var(--text-sm); }

/* ── Auth pages: setup / unlock / recovery ──── */
.centered-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; background: var(--bg-primary); gap: 0; align-items: stretch; }
.auth-aside { background: linear-gradient(160deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%); color: rgba(255,255,255,0.86); display: flex; flex-direction: column; justify-content: center; padding: var(--space-3xl); position: relative; overflow: hidden; }
.auth-aside::after { content: ''; position: absolute; width: 640px; height: 640px; right: -320px; bottom: -320px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 0 60px rgba(255,255,255,0.04), 0 0 0 120px rgba(255,255,255,0.03); pointer-events: none; }
.auth-dial { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; color: #fff; margin-bottom: var(--space-xl); background: radial-gradient(circle, #1d4ed8 58%, transparent 59%), repeating-conic-gradient(from -2deg, rgba(255,255,255,0.75) 0 2deg, transparent 2deg 15deg); box-shadow: 0 0 0 1px rgba(255,255,255,0.3); animation: dialTurn 60s linear infinite; }
.auth-dial i { animation: dialTurn 60s linear infinite reverse; }
@keyframes dialTurn { to { transform: rotate(360deg); } }
.auth-aside-title { font-size: var(--text-4xl); line-height: 1.12; color: #fff; max-width: 14em; margin-bottom: var(--space-xl); }
.auth-points { display: flex; flex-direction: column; gap: var(--space-md); max-width: 30em; position: relative; z-index: 1; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-md); line-height: 1.5; }
.auth-points i { color: #fff; margin-top: 3px; font-size: 16px; }
.auth-card { align-self: center; justify-self: center; width: 100%; max-width: 440px; margin: var(--space-2xl) var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow); backdrop-filter: none; padding: var(--space-xl); }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-lg); }
.auth-logo-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-primary); color: var(--text-on-accent); font-size: 18px; box-shadow: none; }
.auth-logo-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--text-primary); }
.auth-title { font-size: var(--text-3xl); }
.auth-subtitle { font-size: var(--text-base); margin: var(--space-sm) 0 var(--space-lg); }
.lock-icon { color: var(--accent-text); font-size: 34px !important; animation: none !important; }
.auth-footer { color: var(--text-muted); border-top: 1px solid var(--border-subtle); padding-top: var(--space-md); }
.attempt-dot.used { background: var(--danger); }
@media (max-width: 860px) {
  .centered-layout { display: flex; padding: var(--space-md); }
  .auth-aside { display: none; }
  .auth-card { margin: auto; padding: var(--space-lg); }
}

/* ── Modals, panels, toasts ─────────────────── */
.modal-overlay { background: rgba(3, 12, 15, 0.66); backdrop-filter: blur(3px); }
.modal-content, .gen-modal, .confirm-dialog { border-radius: var(--radius-lg); }
.modal-header { border-bottom: 1px solid var(--border-subtle); }
.modal-title { font-family: var(--font-display); display: flex; align-items: center; gap: 10px; }
.modal-title i { color: var(--accent-text); }
.modal-footer { border-top: 1px solid var(--border-subtle); }
.settings-panel { background: var(--bg-secondary); }
.toast { background: var(--bg-card); border: 1px solid var(--border-color); border-left-width: 4px; border-radius: var(--radius-sm); box-shadow: var(--shadow); color: var(--text-primary); }
.toast-success { border-left-color: var(--success); } .toast-success .toast-icon { color: var(--success); }
.toast-error   { border-left-color: var(--danger); }  .toast-error .toast-icon   { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); } .toast-warning .toast-icon { color: var(--warning); }
.toast-info    { border-left-color: var(--accent-primary); } .toast-info .toast-icon { color: var(--accent-text); }

/* ── Detail view, generator, TOTP, health ───── */
.detail-field, .totp-card, .backup-section, .health-stat, .breach-stat, .export-card { border-radius: var(--radius-md); }
.detail-label { color: var(--text-muted); font-weight: var(--font-semibold); letter-spacing: 0; text-transform: none; font-size: var(--text-sm); }
.detail-value-mono, .gen-password-display, .totp-code, .pp-preview, .recovery-key-row { font-family: var(--font-mono); }
.gen-slider::-webkit-slider-thumb { background: var(--accent-primary); }
.expiry-banner, .autolock-warning { border-radius: var(--radius-md); }
.mobile-bottom-nav { background: var(--bg-card); border-top: 1px solid var(--border-color); }
.mobile-nav-btn { color: var(--text-secondary); }
.mobile-nav-add { background: var(--accent-primary); color: var(--text-on-accent); }
.empty-title { font-family: var(--font-display); }