/* ═══════════════ AIRWRIX DESIGN SYSTEM ═══════════════ */
:root{
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  --rose-500:#f43f5e; --green-500:#22c55e; --amber-500:#f59e0b;
  --grad:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%);
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-full:999px;
  --shadow-card:0 4px 18px rgba(15,23,42,.04); --shadow-lg:0 12px 32px rgba(15,23,42,.08); --shadow-teal:0 8px 24px rgba(13,148,136,.18);
  --font:'Inter',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:var(--font);color:var(--slate-900);background:var(--slate-50);-webkit-font-smoothing:antialiased;line-height:1.5}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit;font-size:15px;width:100%;outline:none}
img{display:block;max-width:100%}

/* layout */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--slate-50);position:relative}
.pad{padding:20px}
.stack>*+*{margin-top:16px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border-radius:var(--r-full);font-weight:600;font-size:15px;transition:transform .12s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-teal)}
.btn-primary:disabled{opacity:.6}
.btn-ghost{background:#fff;color:var(--slate-700);border:1.5px solid var(--slate-200)}
.btn-ghost:hover{background:var(--slate-50)}

/* inputs */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--slate-400);text-transform:uppercase;letter-spacing:.05em;margin:0 0 7px 12px}
.input-wrap{position:relative}
.input-wrap .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--slate-300);font-size:14px}
.input-wrap input{padding:14px 16px 14px 44px;background:var(--slate-50);border:1.5px solid var(--slate-200);border-radius:var(--r-full);transition:border .2s,background .2s}
.input-wrap input:focus{border-color:var(--teal-500);background:#fff}
.input-wrap .eye{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--slate-300);font-size:14px}

/* cards */
.card{background:#fff;border:1px solid var(--slate-100);border-radius:var(--r-xl);box-shadow:var(--shadow-card)}
.balance-card{background:var(--grad);border-radius:var(--r-xl);padding:24px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-teal)}
.balance-card .glow{position:absolute;border-radius:50%;pointer-events:none}
.balance-card .glow1{right:-40px;top:-40px;width:160px;height:160px;background:rgba(255,255,255,.08);filter:blur(32px)}

/* metric grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.metric{background:#fff;border:1px solid var(--slate-100);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-card)}
.metric .mic{width:38px;height:38px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.metric .ml{font-size:11px;font-weight:600;color:var(--slate-400);text-transform:uppercase;letter-spacing:.04em}
.metric .mv{font-size:24px;font-weight:700;color:var(--slate-800);margin-top:2px}

/* tabs */
.tabs{display:flex;padding:5px;background:var(--slate-100);border-radius:var(--r-full);margin-bottom:24px}
.tabs button{flex:1;padding:11px;border-radius:var(--r-full);font-size:14px;font-weight:600;color:var(--slate-500);transition:all .2s}
.tabs button.on{background:#fff;color:var(--teal-600);box-shadow:0 1px 4px rgba(0,0,0,.06)}

/* quick actions */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qa a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;background:#fff;border:1px solid var(--slate-100);border-radius:var(--r-md);box-shadow:var(--shadow-card);transition:transform .12s}
.qa a:active{transform:scale(.96)}
.qa .qi{width:42px;height:42px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:flex;align-items:center;justify-content:center;font-size:17px}
.qa .ql{font-size:11px;font-weight:600;color:var(--slate-600)}

/* bottom tab bar */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-top:1px solid var(--slate-100);display:flex;padding:10px 0 14px;z-index:30}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--slate-400)}
.tabbar a.on{color:var(--teal-600)}
.tabbar a i{font-size:18px}

/* section heads */
.sec-h{display:flex;align-items:center;justify-content:between;margin-bottom:14px}
.sec-t{font-size:15px;font-weight:700;color:var(--slate-800)}

/* toast (TOP, fintech) */
#toast{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-150%);min-width:280px;max-width:90%;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:12px;z-index:9999;transition:transform .35s cubic-bezier(.4,0,.2,1);border-left:4px solid var(--teal-500)}
#toast.show{transform:translateX(-50%) translateY(20px)}
#toast.success{border-left-color:var(--green-500)}
#toast.error{border-left-color:var(--rose-500)}
#toast .ti{font-size:18px;color:var(--teal-500)}
#toast.success .ti{color:var(--green-500)}
#toast.error .ti{color:var(--rose-500)}
#toast .tm{font-size:14px;font-weight:500;color:var(--slate-700)}

/* utility */
.muted{color:var(--slate-400)}.center{text-align:center}.mt-s{margin-top:8px}.mt-m{margin-top:16px}.mt-l{margin-top:24px}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0}.divider .line{flex:1;height:1px;background:var(--slate-100)}.divider span{font-size:10px;font-weight:600;color:var(--slate-400);text-transform:uppercase;letter-spacing:.08em}

@media(min-width:768px){
  .app{max-width:480px}
}

/* ═══════════════ FINTECH ANIMATIONS ═══════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes popIn{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

.anim-up{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both}
.anim-in{animation:fadeIn .7s ease both}
.anim-pop{animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}
.float{animation:float 3.5s ease-in-out infinite}
/* stagger delays */
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.4s}.d6{animation-delay:.48s}

/* hover lift (desktop) */
@media(hover:hover){
  .feat,.metric,.qa a,.card{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
  .feat:hover,.metric:hover,.qa a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
}
/* shimmer skeleton for loading states */
.skeleton{background:linear-gradient(90deg,var(--slate-100) 25%,var(--slate-200) 50%,var(--slate-100) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}