/* ==========================================================
	Bank Swift Unified UI Styles (Dimmed Version)
	========================================================== */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
html { -webkit-text-size-adjust:100%; height:-webkit-fill-available; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Arial,sans-serif; line-height:1.4; color:#dbe2e9; background:radial-gradient(at 30% 20%,#111a28 0%,#0a1017 60%) fixed; -webkit-font-smoothing:antialiased; overflow-y:auto; overflow-x:hidden; min-height:100dvh; min-height:-webkit-fill-available; -webkit-tap-highlight-color:transparent; touch-action:manipulation; overscroll-behavior-y: contain; scrollbar-gutter: stable both-edges; }

/* Media: responsive images/videos */
img,svg,video,canvas { max-width:100%; height:auto; }

/* Respect safe-area on mobile */
.auth-wrapper { padding-top: max(0.75rem, env(safe-area-inset-top)); padding-bottom: max(0.9rem, env(safe-area-inset-bottom)); padding-left: max(0.9rem, env(safe-area-inset-left)); padding-right: max(0.9rem, env(safe-area-inset-right)); }

/* Compact vertical mode (for short viewport heights) */
.vh-compact .auth-card{padding:.85rem .85rem .8rem;gap:.55rem;max-height:100dvh}
.vh-compact .auth-head{gap:.3rem;margin-bottom:.2rem}
.vh-compact .auth-logo{width:48px;height:48px}
.vh-compact .auth-title{font-size:1.15rem}
.vh-compact .auth-sub,.vh-compact .social-row,.vh-compact .divider-auth{display:none!important}
.vh-compact form{gap:.6rem}
.vh-compact .field label{font-size:.6rem}
.vh-compact .input-base{padding:.55rem .65rem .5rem;font-size:.75rem}
.vh-compact .btn-full{padding:.68rem .8rem .62rem;font-size:.72rem}
.vh-compact .auth-alt{font-size:.62rem}

:root { --clr-bg-dark:#0d1117; --clr-surface:rgba(255,255,255,0.06); --clr-surface-alt:rgba(255,255,255,0.10); --clr-border:rgba(255,255,255,0.10); --clr-border-focus:#585fc8; --clr-accent:#585fc8; --clr-accent-grad:linear-gradient(90deg,#585fc8,#7061cd 55%,#585fc8); --clr-danger:#ef4444; --radius-xs:4px; --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --shadow-sm:0 2px 4px -1px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25); --shadow-md:0 4px 18px -2px rgba(0,0,0,.55),0 2px 6px -1px rgba(0,0,0,.35); --trans-fast:.18s cubic-bezier(.4,0,.2,1); --max-auth-width:440px; --focus-ring:0 0 0 2px rgba(255,255,255,.75),0 0 0 4px var(--clr-accent);
	/* Safe-area insets for iOS */
	--safe-top: env(safe-area-inset-top); --safe-right: env(safe-area-inset-right); --safe-bottom: env(safe-area-inset-bottom); --safe-left: env(safe-area-inset-left);
}

.hero-background::before,.hero-background::after{content:"";position:absolute;inset:0}
.hero-background{position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 20% 25%,rgba(99,102,241,.16) 0%,transparent 48%),radial-gradient(circle at 82% 72%,rgba(139,92,246,.14) 0%,transparent 52%),radial-gradient(circle at 50% 50%,rgba(14,165,233,.08) 0%,transparent 58%);filter:blur(0) saturate(105%)}
.particles{position:fixed;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(60deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px);opacity:.12;mix-blend-mode:overlay}

.auth-wrapper{min-height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;padding:clamp(.75rem,2.2vh,.9rem) .9rem .9rem;position:relative}
.auth-card{width:100%;max-width:var(--max-auth-width);background:linear-gradient(160deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.035) 60%);backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:clamp(1rem,1.2rem + .6vh,1.6rem) clamp(0.9rem,1.1rem + .5vw,1.5rem);box-shadow:0 4px 18px -6px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:1rem;position:relative;overflow:auto;max-height:92dvh}
.auth-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 55%);mix-blend-mode:overlay;pointer-events:none}
.auth-head{text-align:center;display:flex;flex-direction:column;gap:.55rem;margin-bottom:.35rem}
.auth-logo{width:60px;height:60px;margin-inline:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.auth-title{font-size:clamp(1.35rem,1.15rem + .9vw,2rem);font-weight:700;letter-spacing:-.5px;margin:0}
.auth-sub{margin:0;font-size:clamp(.72rem,.68rem + .35vw,.9rem);font-weight:500;color:rgba(255,255,255,.64)}
.alert-auth{min-height:1.1rem;font-size:.78rem;font-weight:600;letter-spacing:.35px;color:var(--clr-danger);text-align:center}
form{margin:0;display:flex;flex-direction:column;gap:.85rem}
.form-row-2{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
@media (max-width:540px){.form-row-2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem;position:relative}
.field label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.75px;color:rgba(255,255,255,.68)}
.input-base{width:100%;padding:.72rem .85rem .66rem;font-size:.85rem;font-weight:500;background:rgba(255,255,255,.06);border:1px solid var(--clr-border);border-radius:6px;color:#fff;outline:none;transition:var(--trans-fast)}
.input-base:focus{border-color:var(--clr-border-focus);box-shadow:var(--focus-ring);background:rgba(255,255,255,.085)}
.input-base::placeholder{color:rgba(255,255,255,.32)}
.pw-wrap{position:relative;display:flex}
.pw-wrap .input-base{padding-right:4.2rem}
.pw-toggle{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);background:rgba(255,255,255,.10);color:#fff;font-size:.62rem;font-weight:600;letter-spacing:.7px;border:1px solid rgba(255,255,255,.22);padding:.38rem .55rem;border-radius:4px;cursor:pointer;text-transform:uppercase;transition:var(--trans-fast)}
.pw-toggle:hover{background:rgba(255,255,255,.18)}
.pw-toggle:active{scale:.95}
.btn-full,.btn-shared{--btn-grad:linear-gradient(90deg,#585fc8,#7061cd 55%,#585fc8)}
.btn-full,.btn-shared,.social-btn-shared{font-family:inherit}
.btn-full{width:100%;border:none;background:var(--clr-accent-grad);color:#fff;font-weight:700;letter-spacing:.6px;font-size:.82rem;padding:.9rem 1rem .85rem;border-radius:6px;cursor:pointer;box-shadow:0 2px 6px -3px rgba(0,0,0,.5),0 4px 14px -6px rgba(0,0,0,.6);position:relative;overflow:hidden;transition:var(--trans-fast)}
.btn-full:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-full:hover:not(:disabled){filter:brightness(1.07) saturate(108%)}
.btn-full:active:not(:disabled){transform:translateY(1px)}
.btn-outline{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:600;padding:.55rem .95rem;font-size:.72rem;border-radius:6px;backdrop-filter:blur(6px);cursor:pointer;transition:var(--trans-fast);letter-spacing:.6px}
.btn-outline:hover{background:rgba(255,255,255,.10)}
.btn-outline:active{transform:translateY(1px)}
.divider-auth{display:flex;align-items:center;gap:.85rem;font-size:.65rem;letter-spacing:1px;font-weight:600;color:rgba(255,255,255,.38);margin:.2rem 0 .3rem}
.divider-auth span{position:relative;padding:0 .55rem}
.divider-auth span::before,.divider-auth span::after{content:"";position:absolute;top:50%;width:120px;max-width:26vw;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.16),rgba(255,255,255,.04))}
.divider-auth span::before{right:100%}
.divider-auth span::after{left:100%}
.social-row{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.social-btn-shared{flex:1 1 90px;display:flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none;font-size:.65rem;font-weight:600;letter-spacing:.7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;padding:.55rem .75rem;border-radius:6px;transition:var(--trans-fast)}
.social-btn-shared:hover{background:rgba(255,255,255,.12)}
.auth-alt{margin-top:.25rem;text-align:center;font-size:.7rem;color:rgba(255,255,255,.55)}
.auth-alt a{color:#818cf8;font-weight:600;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,.pw-toggle:focus-visible,.input-base:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (max-height:640px){.auth-card{gap:.7rem;padding:1rem .95rem}.auth-head{gap:.4rem}.auth-title{font-size:1.25rem}.auth-sub{font-size:.68rem}form{gap:.7rem}.field label{font-size:.63rem}.input-base{padding:.6rem .7rem .55rem;font-size:.78rem}.btn-full{padding:.72rem .85rem .68rem;font-size:.74rem}.auth-logo{width:52px;height:52px}}
@media (max-height:520px){.auth-sub{display:none}.social-row,.divider-auth{display:none}.auth-card{max-height:100dvh}}
/* Narrow viewport adjustments */
@media (max-width: 420px){
	.auth-title{font-size:1.1rem}
	.auth-card{padding:0.9rem}
	/* Prevent iOS zoom on focus: keep >=16px */
	.input-base{font-size:16px}
	.btn-full{font-size:15px}
}
/* Light theme removed: single dark theme retained */
::-webkit-scrollbar{width:0;height:0}
.input-msg{font-size:.6rem;font-weight:600;letter-spacing:.4px;margin-top:.2rem;min-height:.75rem;color:rgba(255,255,255,.55);opacity:.9;transition:var(--trans-fast)}
.field.error .input-base{border-color:var(--clr-danger);box-shadow:0 0 0 1px var(--clr-danger),0 0 0 4px rgba(239,68,68,.35)}
.field.success .input-base{border-color:#16a34a;box-shadow:0 0 0 1px #16a34a,0 0 0 4px rgba(34,197,94,.35)}
.field.error .input-msg{color:var(--clr-danger);animation:msgPop .5s}
.field.success .input-msg{color:#34d399}
@keyframes msgPop{0%{transform:translateY(-4px);opacity:0}40%{opacity:1}100%{transform:translateY(0);opacity:1}}
.pw-strength{display:flex;flex-direction:column;gap:.35rem;margin-top:.35rem}
.pw-strength-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.pw-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.pw-bar.fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f87171,#fb923c,#fbbf24,#34d399,#4ade80);filter:saturate(140%);animation:fillGrow .5s ease forwards}
@keyframes fillGrow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.pw-strength-label{font-size:.6rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pw-strength-label.weak{color:#f87171}
.pw-strength-label.fair{color:#fbbf24}
.pw-strength-label.good{color:#34d399}
.pw-strength-label.strong{color:#4ade80}
.alert-auth{position:relative}
.alert-auth.show{animation:alertPulse .65s ease}
@keyframes alertPulse{0%{transform:translateY(-6px);opacity:0}45%{transform:translateY(0);opacity:1}70%{transform:translateY(0)}100%{opacity:1}}
/* Theme toggle styles removed (single theme) */
/* Light & dim theme variant rules removed */
.alert-auth { min-height:1.1rem; font-size:.78rem; font-weight:600; letter-spacing:.35px; color:var(--clr-danger); text-align:center; }

/* Global safe-area helpers for headers/footers/sidebars across app pages */
header, .app-header { padding-top: calc(1rem + var(--safe-top)) !important; }
footer, .app-footer { padding-bottom: max(1rem, var(--safe-bottom)) !important; }
.mobile-menu-toggle { top: calc(18px + var(--safe-top)) !important; }
.sidebar { padding-top: calc(1.2rem + var(--safe-top)) !important; }

/* Utility: absolute top-left button respecting safe areas */
.safe-fixed-top-left { position:absolute; top: calc(18px + var(--safe-top)); left: calc(18px + var(--safe-left)); z-index:100; }

/* Form controls base on small screens to avoid iOS zoom */
@media (max-width: 520px){
	input, select, textarea { font-size:16px; }
}

/* Improve tap areas on touch */
@media (pointer: coarse){
	.btn-full, .btn-outline, button, .pw-toggle { min-height:44px; }
}


/* ==========================================================
	 Compact mobile sizing across app pages
	 Applies on small screens to reduce box/form sizes consistently
	 ========================================================== */
@media (max-width: 520px){
	/* Layout containers */
	header, .app-header, .appbar { padding: .75rem .9rem !important; }
	header h1 { font-size: .95rem !important; }

	/* Panels/cards */
	.panel, .chart-card, .hero, .summary, .detail, .tx-list { 
		padding: .75rem .8rem .9rem !important; 
		border-radius: 10px !important; 
	}

	/* Pills and small chips */
	.pill, .status-pill { padding: .28rem .5rem !important; font-size: .65rem !important; border-radius: 999px !important; }

	/* Grids/gaps */
	.grid, .accounts-grid, .panels-2, .hero-stats, .row { gap: .6rem !important; }

	/* Form fields */
	.field { gap: .3rem !important; }
	.field label { font-size: .68rem !important; letter-spacing: .6px !important; }
	.field input, .field select, .field textarea { 
		padding: .6rem .7rem !important; 
		font-size: 16px !important; /* keep >=16px to avoid iOS zoom */
		border-radius: 6px !important;
	}

	/* Tabs and buttons */
	.tab { padding: .45rem .65rem !important; font-size: .75rem !important; border-radius: 8px !important; }
	.btn, .btn-primary, .btn-outline, .btn-full { 
		padding: .65rem .85rem !important; 
		font-size: 15px !important; 
		border-radius: 8px !important; 
	}

	/* Tables */
	.transactions th, .transactions td { padding: 10px !important; }

	/* Icons and visual elements */
	.tx-icon { width:30px !important; height:30px !important; }
	.amount-line .value { font-size: 1.3rem !important; }
}

@media (max-width: 380px){
	header h1 { font-size: .9rem !important; }
	.btn, .btn-primary, .btn-outline, .btn-full { font-size: 14px !important; padding: .6rem .75rem !important; }
	.tab { font-size: .72rem !important; padding: .4rem .6rem !important; }
	.field input, .field select, .field textarea { padding: .55rem .65rem !important; }
	.pill, .status-pill { font-size: .62rem !important; padding: .25rem .45rem !important; }
}

/* Toast animations */
@keyframes toastIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }