::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.tab-active { border-bottom: 2px solid #3b82f6; color: #3b82f6; font-weight: 600; }
body { -webkit-tap-highlight-color: transparent; padding-top: env(safe-area-inset-top); }
.loader { border: 3px solid #f3f3f3; border-radius: 50%; border-top: 3px solid #3b82f6; width: 20px; height: 20px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.view-hidden { display: none !important; }
.nav-active { color: #3b82f6; }
.info-icon { cursor: pointer; color: #9ca3af; transition: color 0.2s; margin-left: 4px; }
.info-icon:hover { color: #3b82f6; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* ── Centered Dark Toast ── */
#toast-container { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; align-items:center; width:100%; padding:0 20px; }
.toast-item { display:flex; align-items:center; gap:10px; min-width:220px; max-width:320px; padding:14px 18px; border-radius:12px; background:#1e293b; color:#f8fafc; box-shadow:0 10px 40px rgba(0,0,0,0.3); pointer-events:all; transform:translateY(20px) scale(0.95); transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s; opacity:0; border-left:4px solid #3b82f6; }
.toast-item.show { transform:translateY(0) scale(1); opacity:1; }
.toast-item.hide { transform:translateY(-20px) scale(0.95); opacity:0; }
.toast-icon { font-size:18px; flex-shrink:0; }
.toast-msg { font-size:14px; font-weight:600; line-height:1.4; }
.toast-progress { position:absolute; bottom:0; left:0; height:3px; border-radius:0 0 0 8px; background:currentColor; opacity:.5; animation:toast-shrink linear forwards; }
@keyframes toast-shrink { from{width:100%} to{width:0} }

/* ── Custom Dialog ── */
#dialog-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:8000; display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; transition:opacity .2s; pointer-events:none; }
#dialog-overlay.show { opacity:1; pointer-events:all; }
#dialog-box { background:#fff; border-radius:20px; padding:28px 24px 20px; max-width:360px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.25); transform:scale(.92) translateY(10px); transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
#dialog-overlay.show #dialog-box { transform:scale(1) translateY(0); }
#dialog-icon { width:52px; height:52px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:22px; }
#dialog-title { font-size:17px; font-weight:700; color:#0f172a; text-align:center; margin-bottom:8px; }
#dialog-text { font-size:13px; color:#475569; text-align:center; line-height:1.55; margin-bottom:18px; }
#dialog-input-wrap { margin-bottom:18px; }
#dialog-input { width:100%; border:2px solid #e2e8f0; border-radius:10px; padding:10px 12px; font-size:14px; outline:none; transition:border-color .2s; }
#dialog-input:focus { border-color:#3b82f6; }
#dialog-btns { display:flex; gap:10px; }
#dialog-btns button { flex:1; padding:11px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; border:none; transition:opacity .15s, transform .1s; }
#dialog-btns button:active { transform:scale(.97); }
#dialog-cancel { background:#f1f5f9; color:#475569; }
#dialog-confirm { background:#3b82f6; color:#fff; }
#dialog-confirm.danger { background:#ef4444; }

/* PIN & Biometric Keypad */
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; transition: background 0.2s; }
.pin-dot.filled { background: #fff; }
.keypad-btn { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #fff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); transition: all 0.1s; user-select: none; cursor: pointer;}
.keypad-btn:active { background: rgba(255,255,255,0.3); transform: scale(0.95); }