/* KITA TABUNG V15.16 — Optional TOTP 2-step authentication */
.mfa-security-card{position:relative;overflow:hidden}
.mfa-security-card::after{content:"";position:absolute;right:-38px;top:-38px;width:130px;height:130px;border-radius:999px;background:radial-gradient(circle,rgba(79,70,229,.16),rgba(79,70,229,0) 68%);pointer-events:none}
.mfa-security-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.mfa-security-title{display:flex;align-items:flex-start;gap:12px;min-width:0}
.mfa-security-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);flex:0 0 auto}
.mfa-security-title h4{margin:0 0 4px}.mfa-security-title p{margin:0;color:var(--text-muted);font-size:.78rem;line-height:1.55}
.mfa-status-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-color);border-radius:999px;padding:7px 10px;font-size:.72rem;font-weight:800;white-space:nowrap;background:var(--surface)}
.mfa-status-pill .dot{width:8px;height:8px;border-radius:999px;background:var(--text-muted)}
.mfa-status-pill.active{color:#059669;border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.08)}
.mfa-status-pill.active .dot{background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.10)}
.mfa-status-pill.pending{color:#d97706;border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.08)}
.mfa-status-pill.pending .dot{background:#f59e0b}
.mfa-security-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.mfa-meta-box{border:1px solid var(--border-color);border-radius:14px;padding:12px;background:color-mix(in srgb,var(--surface) 88%,var(--bg) 12%)}
.mfa-meta-box span{display:block;color:var(--text-muted);font-size:.68rem;margin-bottom:4px}.mfa-meta-box strong{font-size:.8rem;color:var(--text-main)}
.mfa-actions{display:flex;gap:10px;flex-wrap:wrap}.mfa-actions button{min-height:44px}
.mfa-note{margin:12px 0 0;color:var(--text-muted);font-size:.72rem;line-height:1.55}
.mfa-modal{z-index:820!important}
.mfa-modal .modal-content{max-width:520px;box-shadow:0 32px 90px -30px rgba(0,0,0,.72)}
.mfa-setup-intro{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border-color);background:color-mix(in srgb,var(--primary) 7%,var(--surface));border-radius:16px;margin-bottom:16px}
.mfa-setup-intro i{color:var(--primary);font-size:1.1rem;margin-top:2px}.mfa-setup-intro p{margin:0;color:var(--text-muted);font-size:.78rem;line-height:1.55}
.mfa-qr-wrap{display:grid;place-items:center;margin:12px auto 16px;padding:14px;width:min(250px,100%);background:#fff;border-radius:20px;border:1px solid rgba(15,23,42,.1)}
.mfa-qr-wrap img{width:100%;height:auto;display:block;image-rendering:auto}
.mfa-secret{display:flex;gap:8px;align-items:center;background:var(--bg);border:1px solid var(--border-color);border-radius:14px;padding:10px 12px;margin:10px 0 16px}
.mfa-secret code{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--text-main);font-size:.78rem;font-weight:800;letter-spacing:.06em}
.mfa-secret button{width:40px;height:40px;border-radius:11px;border:1px solid var(--border-color);background:var(--surface);color:var(--text-main);cursor:pointer}
.mfa-step{display:flex;gap:10px;align-items:flex-start;margin:10px 0;color:var(--text-muted);font-size:.76rem;line-height:1.5}.mfa-step b{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:var(--primary);color:white;font-size:.68rem;flex:0 0 auto}
.mfa-code-input{font-variant-numeric:tabular-nums;letter-spacing:.26em;text-align:center;font-size:1.1rem;font-weight:800}
.mfa-warning{padding:12px 14px;border-radius:14px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.22);color:#b45309;font-size:.72rem;line-height:1.55;margin:12px 0}
html[data-theme="dark"] .mfa-warning, body.dark .mfa-warning{color:#fbbf24}
.mfa-login-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}.mfa-login-brand .icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;display:grid;place-items:center;font-size:1.15rem}
.mfa-login-email{padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--border-color);color:var(--text-muted);font-size:.75rem;overflow-wrap:anywhere;margin:12px 0}
.mfa-factor-select{margin-bottom:12px}
.mfa-login-help{font-size:.7rem;color:var(--text-muted);line-height:1.5;margin-top:10px}
.mfa-danger-button{border-color:rgba(239,68,68,.28)!important;color:var(--danger)!important}
@media(max-width:560px){.mfa-security-head{align-items:flex-start;flex-direction:column}.mfa-security-meta{grid-template-columns:1fr}.mfa-actions{flex-direction:column}.mfa-actions button{width:100%}.mfa-modal .modal-content{border-radius:24px 24px 0 0}.mfa-qr-wrap{width:min(220px,100%)}}