:root {
  --bg:#f5f7fc;
  --white:#fff;
  --navy:#101d3a;
  --navy2:#17294c;
  --blue:#3563ed;
  --text:#17233e;
  --muted:#8390a6;
  --border:#e9edf5;
  --shadow:0 8px 30px rgba(24,45,86,.045);
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,
  "Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}

button,input { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }

.login-screen {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:25px;
  background:
    radial-gradient(circle at 15% 20%,#253d79 0,transparent 35%),
    linear-gradient(135deg,#0a142a,#13294e);
}

.login-card {
  width:100%;
  max-width:440px;
  background:#fff;
  padding:45px 38px;
  border-radius:22px;
  box-shadow:0 30px 100px #0004;
  text-align:center;
}

.brand-logo {
  font-size:45px;
  font-weight:900;
  color:#193b80;
  line-height:1;
}

.brand-logo span,.mini-logo span { color:#38a4ff; }

.brand-name {
  margin-top:10px;
  font-size:25px;
  font-weight:900;
  letter-spacing:3px;
  color:#162b50;
}

.brand-subtitle {
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  color:#8895ac;
  margin-top:6px;
}

.login-card h2 {
  margin:35px 0 7px;
  font-size:25px;
}

.muted {
  color:var(--muted);
  font-size:13px;
}

.login-card form {
  margin-top:30px;
  text-align:left;
}

.login-card label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin:18px 0 8px;
}

.login-card input {
  width:100%;
  padding:15px 16px;
  border:1px solid #dfe5f0;
  border-radius:10px;
  outline:none;
  background:#f9fbff;
}

.login-card input:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px #3563ed16;
}

.primary-btn {
  width:100%;
  border:0;
  color:#fff;
  background:linear-gradient(110deg,#315fe6,#4778ff);
  border-radius:10px;
  padding:16px;
  font-weight:800;
  margin-top:25px;
}

.primary-btn:disabled { opacity:.6; }

.error-message {
  color:#dc3545;
  margin-top:14px;
  font-size:12px;
  min-height:16px;
}

.login-footer {
  color:#9ba5b5;
  font-size:11px;
  margin-top:30px;
  line-height:1.8;
}

.app-layout {
  display:flex;
  min-height:100vh;
}

.sidebar {
  width:255px;
  flex-shrink:0;
  background:var(--navy);
  color:#fff;
  position:fixed;
  inset:0 auto 0 0;
  display:flex;
  flex-direction:column;
  z-index:30;
}

.sidebar-brand {
  display:flex;
  align-items:center;
  gap:12px;
  padding:28px 23px 34px;
}

.mini-logo {
  width:42px;
  height:42px;
  background:#ffffff13;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:22px;
}

.sidebar-brand strong {
  display:block;
  font-size:19px;
  letter-spacing:1px;
}

.sidebar-brand small {
  display:block;
  font-size:9px;
  color:#8ca0c8;
  letter-spacing:1.7px;
  margin-top:5px;
}

.menu-label {
  color:#6f85af;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
  padding:20px 25px 12px;
}

.nav-item {
  width:calc(100% - 24px);
  margin:3px 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#a9b9d5;
  padding:14px 18px;
  text-align:left;
  font-size:13px;
  font-weight:600;
}

.nav-item:hover,.nav-item.active {
  background:#294579;
  color:#fff;
}

.sidebar-bottom {
  margin-top:auto;
  padding:22px;
  border-top:1px solid #ffffff14;
}

.online-indicator {
  font-size:11px;
  color:#9aaccb;
  margin-bottom:18px;
}

.online-dot {
  display:inline-block;
  width:8px;
  height:8px;
  background:#24d9a1;
  border-radius:50%;
  margin-right:7px;
}

.logout-btn {
  width:100%;
  background:#ffffff12;
  color:#fff;
  border:1px solid #ffffff20;
  padding:12px;
  border-radius:9px;
}

.main-area {
  margin-left:255px;
  width:calc(100% - 255px);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.topbar {
  height:85px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 35px;
  border-bottom:1px solid var(--border);
}

.topbar-left,.topbar-right {
  display:flex;
  align-items:center;
  gap:15px;
}

.topbar h2 {
  font-size:19px;
  margin:0;
}

.topbar p {
  font-size:11px;
  color:var(--muted);
  margin:5px 0 0;
}

.status-badge {
  color:#12956b;
  background:#e9faf3;
  padding:9px 12px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
}

.avatar,.profile-avatar {
  display:grid;
  place-items:center;
  background:#e5edff;
  color:#3563ed;
  border-radius:12px;
  font-weight:800;
}

.avatar {
  width:39px;
  height:39px;
}

.agent-heading strong {
  display:block;
  font-size:12px;
}

.agent-heading small {
  color:var(--muted);
  font-size:10px;
}

.menu-toggle {
  display:none;
  background:transparent;
  border:0;
  font-size:22px;
}

.content {
  padding:30px 35px;
  flex:1;
  max-width:1600px;
  width:100%;
  margin:auto;
}

.welcome-panel {
  background:linear-gradient(110deg,#18366f,#3159a4);
  border-radius:17px;
  padding:32px 36px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
}

.eyebrow {
  color:#9ec6ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}

.welcome-panel h1 {
  margin:10px 0;
  font-size:26px;
}

.welcome-panel p {
  margin:0;
  color:#c2d5f3;
  font-size:12px;
}

.welcome-decoration {
  font-size:80px;
  font-weight:900;
  opacity:.15;
}

.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:24px 0;
}

.stat-card,.panel,.wallet-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:15px;
  box-shadow:var(--shadow);
}

.stat-card {
  padding:24px;
}

.stat-icon {
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:22px;
  margin-bottom:18px;
}

.blue { background:#eaf0ff;color:#3766e9; }
.green { background:#e6fbf3;color:#15a879; }
.purple { background:#f1eaff;color:#8a55d7; }
.orange { background:#fff2e4;color:#ed9940; }

.stat-label {
  color:#7d8aa0;
  font-size:12px;
}

.stat-value {
  font-size:27px;
  font-weight:800;
  margin:8px 0;
  overflow-wrap:anywhere;
}

.stat-note {
  color:#a1abbb;
  font-size:11px;
}

.dashboard-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:20px;
}

.panel {
  padding:24px;
  min-width:0;
}

.panel-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:22px;
}

.panel-header h3 {
  margin:0;
  font-size:15px;
}

.text-button {
  border:0;
  background:transparent;
  color:var(--blue);
  font-weight:700;
  font-size:12px;
}

.empty-state {
  text-align:center;
  color:#96a2b4;
  padding:40px 15px;
  font-size:13px;
}

.section-heading {
  margin-bottom:25px;
}

.section-heading h2 {
  margin:0 0 7px;
  font-size:24px;
}

.section-heading p {
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.wallet-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.wallet-card {
  padding:24px;
}

.wallet-card h3 {
  margin:0 0 12px;
}

.wallet-card p {
  color:var(--muted);
  font-size:12px;
  overflow-wrap:anywhere;
}

.table-scroll {
  overflow-x:auto;
}

table {
  width:100%;
  border-collapse:collapse;
  min-width:600px;
}

th {
  text-align:left;
  color:#8390a6;
  font-size:11px;
  padding:15px 12px;
  background:#f8faff;
}

td {
  padding:17px 12px;
  border-bottom:1px solid var(--border);
  font-size:12px;
}

.profile-panel {
  max-width:650px;
  text-align:center;
}

.profile-avatar {
  width:85px;
  height:85px;
  font-size:35px;
  margin:10px auto 18px;
}

.profile-panel>p {
  color:var(--muted);
}

.profile-details {
  margin-top:30px;
  text-align:left;
}

.profile-details>div {
  display:flex;
  justify-content:space-between;
  padding:17px 0;
  border-bottom:1px solid var(--border);
  gap:15px;
}

.profile-details span {
  color:var(--muted);
  font-size:12px;
}

.profile-details strong {
  font-size:12px;
  overflow-wrap:anywhere;
}

.footer {
  text-align:center;
  padding:25px;
  color:#a1aaba;
  font-size:11px;
}

@media(max-width:1100px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .wallet-grid { grid-template-columns:repeat(2,1fr); }
}

@media(max-width:850px) {
  .sidebar {
    transform:translateX(-100%);
    transition:transform .2s;
  }

  .sidebar.open { transform:translateX(0); }

  .main-area {
    margin-left:0;
    width:100%;
  }

  .menu-toggle { display:block; }

  .topbar { padding:0 20px; }

  .content { padding:22px 18px; }
}

@media(max-width:600px) {
  .login-card { padding:35px 24px; }

  .stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .stat-card { padding:17px; }
  .stat-value { font-size:21px; }

  .dashboard-grid,.wallet-grid {
    grid-template-columns:1fr;
  }

  .welcome-panel { padding:25px; }
  .welcome-panel h1 { font-size:22px; }
  .welcome-decoration { display:none; }

  .agent-heading,.status-badge { display:none; }
  .panel { padding:16px; }
}


/* SAVEXPAY_WALLET_LOGO_STYLE_V1 */
.wallet-provider-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 12px;
  flex-shrink: 0;
}

.wallet-card {
  overflow: hidden;
}

.wallet-card .wallet-provider-logo {
  display: inline-block;
}

@media (max-width: 600px) {
  .wallet-provider-logo {
    width: 38px;
    height: 38px;
    margin-right: 10px;
  }
}


/* SAVEXPAY_COMPANY_LOGO_V2 */
.brand-logo img {
  width:90px;
  height:90px;
  object-fit:contain;
  border-radius:16px;
}
.mini-logo img {
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:10px;
}