* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, Helvetica, sans-serif; }
body { background:#f4f6f8; color:#333; }
header { position:sticky; top:0; z-index:100; background:#0b5ed7; color:white; padding:12px; text-align:center; font-size:20px; }
footer { position:sticky; bottom:0; background:#fff; padding:10px; box-shadow:0 -2px 10px rgba(0,0,0,0.05); font-size:14px; text-align:center; }
.container { max-width:1000px; margin:auto; padding:20px; }
.balance, .auth-form, .transactions, .security, .card { background:white; padding:20px; margin-bottom:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.08); }
button { background:#0b5ed7; color:white; border:none; padding:12px; border-radius:8px; cursor:pointer; font-size:16px; }
button:hover { background:#084298; }
input, select { width:100%; padding:10px; margin-top:8px; margin-bottom:15px; border-radius:6px; border:1px solid #ccc; }
.service-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:15px; margin-top:10px; }
.service-card { background:#0b5ed7; color:white; padding:15px; border-radius:10px; text-align:center; text-decoration:none; font-weight:bold; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.service-card:hover { background:#084298; }
.card { background:#f8f9fa; padding:12px; margin-top:10px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; }
.success { color:#0a8f3d; font-weight:bold; }
.pending { color:#d39e00; font-weight:bold; }
@media (max-width:600px){ header h1{font-size:20px;padding:10px;} .container{padding:10px;} .balance h2{font-size:22px;} .service-grid{grid-template-columns:1fr; gap:10px;} .service-card, .card{font-size:14px; padding:12px; flex-direction:column; align-items:flex-start;} }