body {background:#f6faff;font-family:'Segoe UI',Arial,sans-serif;margin:0;}
.navbar {
  background:#2367c3;color:#fff;padding:13px 0 13px 18px;font-size:1.13em;
  display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 18px #2367c320;
}
.logo-title {display:flex;align-items:center;font-weight:bold;font-size:1.22em;}
.logo-icon {height:32px;width:32px;border-radius:50%;background:#fff;margin-right:9px;}
.logout-btn {background:linear-gradient(90deg,#e91e63 0%, #2367c3 98%);color:#fff;font-weight:700;border:none;border-radius:12px;padding:9px 21px;font-size:1.08em;cursor:pointer;}
.main-panel {display:flex;flex-direction:column;gap:24px;max-width:370px;margin:38px auto 0 auto;width:97vw;}
.form-box {
  background:#fff;border-radius:15px;box-shadow:0 2px 12px #2367c320;padding:24px 18px;margin-bottom:0;display:flex;flex-direction:column;gap:13px;
}
input, select {width:100%;padding:12px 10px;border-radius:8px;border:1.3px solid #bfc7d6;font-size:1.09em;}
.login-btn {
  width:100%;padding:13px 0;border:none;border-radius:10px;font-size:1.13em;font-weight:700;cursor:pointer;
  background:linear-gradient(90deg,#4ed9c3 0%, #2367c3 98%);color:#fff;margin-bottom:7px;box-shadow:0 2px 10px #2367c330;transition:background 0.18s,transform 0.12s;
}
.login-btn:hover, .action-btn:hover, .logout-btn:hover {background:linear-gradient(90deg,#2367c3 10%, #174b93 98%);transform:scale(1.04);}
.signup-link {text-align:right;margin-top:2px;}
.signup-link a {color:#2367c3;text-decoration:underline;font-size:1em;font-weight:500;}
.user-panel-container {max-width:430px;width:97vw;margin:0 auto;}
/* Profile card */
.profile-card-flex {
  margin:23px 0 10px 0;
  background:#fff;
  border-radius:15px;
  box-shadow:0 2px 18px #2367c320;
  display:flex;align-items:center;gap:13px;padding:15px 13px 10px 13px;
  position:relative;
  flex-wrap: wrap;
}
.profile-avatar {
  width:55px;height:55px;border-radius:50%;background:#e3eefd;display:flex;align-items:center;justify-content:center;font-size:2.1em;color:#2367c3;font-weight:bold;
  flex-shrink: 0;
}
.profile-details {display:flex;flex-direction:column;gap:4px;}
.pname {font-weight:600;font-size:1.09em;color:#2367c3;}
.pmobile {color:#888;font-size:1em;}
.p-balance {position:absolute;right:18px;top:16px;font-weight:700;color:#2367c3;font-size:1.09em;}
/* Card UI */
.bankcard-outer {
  position:relative;
  margin:8px 0 20px 0;
  min-height:110px;
}
.bankcard-bg {
  width:100%;max-width:380px;border-radius:14px;box-shadow:0 2px 18px #2367c350;display:block;
}
.bankcard-content {
  position:absolute;top:0;left:0;width:100%;height:100%;padding:18px 17px 13px 17px;box-sizing:border-box;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;
}
.bankcard-row {display:flex;justify-content:space-between;color:#fff;font-size:1em;}
.card-cvv {font-weight:600;}
.card-expiry {font-weight:600;}
.bankcard-num {
  margin:18px 0 0 0;
  color:#fff;font-size:1.26em;letter-spacing:3px;font-family:'Roboto Mono',monospace;text-shadow:0 2px 7px #174b93,0 1px 4px #174b93;
}
.bankcard-holder {
  color:#fff;font-size:1.06em;font-family:sans-serif;margin-top:4px;font-weight:600;text-shadow:0 1px 2px #174b9380;
}
.user-actions {
  display:flex;flex-direction:column;gap:0;margin:14px 0 14px 0;justify-content:center;
}
.action-btn {
  width:100%;padding:13px 0;border:none;border-radius:10px;font-size:1.13em;font-weight:700;cursor:pointer;
  background:linear-gradient(90deg,#174b93 0%, #2367c3 98%);
  color:#fff;margin-bottom:13px;box-shadow:0 2px 10px #174b9390;transition:background 0.18s,transform 0.12s;
}
.live-history-box {background:#f7faff;border-radius:8px;padding:10px 15px;margin-top:9px;margin-bottom:18px;box-shadow:0 2px 8px #2367c340;}
.live-chat-box {background:#e3eefd;padding:10px 14px;border-radius:8px;margin-top:8px;}
/* Modal */
.modal-panel {position:fixed;z-index:200;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.13);}
.modal-content {
  background:#fff;border-radius:12px;box-shadow:0 2px 18px #2367c330;padding:20px 17px;max-width:320px;width:88vw;display:flex;flex-direction:column;gap:13px;
}
.deposit-info {font-size:1em;color:#2367c3;margin-bottom:9px;}
/* Marquee */
.footer-marquee-outer {overflow:hidden;background:#edf2fa;border-radius:8px;margin:18px auto 0 auto;max-width:430px;min-height:44px;display:flex;align-items:center;}
.footer-marquee-inner {display:inline-block;white-space:nowrap;animation:marquee 18s linear infinite;font-size:1.07em;color:#2367c3;font-weight:500;padding-right:60vw;}
@keyframes marquee {0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}
@media (max-width: 650px) {
  .user-panel-container,.footer-marquee-outer {max-width:99vw;}
  .bankcard-bg {max-width:98vw;}
}
/* Error */
.error {color:#d63c3c;background:#ffd7d7;padding:8px 10px;border-radius:7px;display:none;margin-bottom:7px;}