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;}
.admin-btn {background:#fff;color:#2367c3;border:none;border-radius:10px;padding:7px 21px;font-size:1.08em;font-weight:700;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,.logout-btn-small {
  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-blue,.action-btn-blue {
  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:7px;box-shadow:0 2px 10px #174b9390;transition:background 0.18s,transform 0.12s;
}
.action-btn-blue {width:98%;margin:0 auto 13px auto;}
.logout-btn-small {width:85px;margin:8px auto 0 auto;padding:7px 0;font-size:1em;border-radius:8px;background:linear-gradient(90deg,#e91e63 0%, #2367c3 98%);}
.login-btn:hover,.logout-btn-small:hover,.login-btn-blue:hover,.action-btn-blue:hover {background:linear-gradient(90deg,#2367c3 10%, #174b93 98%);transform:scale(1.04);}
.error {color:#d63c3c;background:#ffd7d7;padding:8px 10px;border-radius:7px;display:none;margin-bottom:7px;}
.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:410px;width:98vw;margin:0 auto;}
.user-profile-card {
  background:#fff;border-radius:13px;box-shadow:0 2px 14px #2367c320;margin:23px 0 10px 0;padding:18px 18px;display:flex;align-items:center;gap:19px;
}
.user-avatar-circle {width:56px;height:56px;background:#e3eefd;border-radius:50%;font-size:2.1em;color:#2367c3;display:flex;align-items:center;justify-content:center;font-weight:bold;}
.user-profile-details {flex:1;min-width:140px;}
.up-balance {font-size:1.09em;color:#2367c3;font-weight:bold;margin-top:5px;}
.real-card-container {position:relative;width:320px;margin:18px auto 0 auto;}
.real-card-img {width:100%;border-radius:16px;box-shadow:0 6px 22px #2367c350;display:block;}
.real-card-overlay {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
.real-card-number {position:absolute;top:60px;left:28px;font-size:1.25em;letter-spacing:3px;color:#fff;font-family:'Roboto Mono',monospace;text-shadow:0 2px 7px #174b93,0 1px 4px #174b93;}
.real-card-holder {position:absolute;bottom:48px;left:28px;font-size:1.08em;color:#fff;font-weight:500;text-shadow:0 2px 7px #174b93,0 1px 4px #174b93;}
.real-card-expiry {position:absolute;bottom:24px;right:38px;font-size:1.08em;color:#fff;font-weight:500;text-shadow:0 2px 7px #174b93,0 1px 4px #174b93;}
.real-card-cvv {position:absolute;bottom:24px;left:28px;font-size:1.06em;color:#fff;background:#174b9350;padding:2px 13px;border-radius:6px;}
.user-actions {
  display:flex;flex-direction:column;gap:0;margin:26px 0 14px 0;justify-content:center;
}
.txn-box {background:#fff;border-radius:12px;box-shadow:0 2px 12px #2367c320;padding:14px 18px;margin-bottom:13px;}
.live-history-box {background:#f7faff;border-radius:8px;padding:10px 15px;margin-top:9px;margin-bottom:18px;box-shadow:0 2px 8px #2367c340;}
.live-status-pending {color:#e67e22;font-weight:bold;}
.live-status-approved {color:#00b894;font-weight:bold;}
.live-status-rejected {color:#d63031;font-weight:bold;}
.live-chat-box {background:#e3eefd;padding:10px 14px;border-radius:8px;margin-top:8px;}
.footer-note {
  text-align:center;
  background:#edf2fa;
  color:#2367c3;
  border-radius:8px;
  margin:18px auto 0 auto;
  padding:14px 9px;
  font-size:1.09em;
  max-width:420px;
}
@media (max-width: 650px) {
  .main-panel,.user-panel-container,.admin-panel-container {padding:0 2vw;}
  .form-box,.user-profile-card,.txn-box,.modal-content {padding:10px 2vw;}
  .navbar-title {font-size:1em;}
  .real-card-container {width:98vw;}
}