:root{color-scheme:dark}body{font-family:Arial,sans-serif;background:#0f172a;color:white}.card{background:#111827;border:1px solid rgba(255,255,255,.08)}.input{background:#0b1220;border:1px solid rgba(255,255,255,.1);outline:none}.input:focus{border-color:#60a5fa}.tab-active{background:#2563eb;color:white}.badge{padding:.25rem .55rem;border-radius:999px;font-size:.75rem}.badge-pending{background:rgba(234,179,8,.15);color:#fde68a}.badge-paid,.badge-success,.badge-approved,.badge-online{background:rgba(34,197,94,.15);color:#86efac}.badge-failed,.badge-expired,.badge-offline{background:rgba(239,68,68,.15);color:#fca5a5}.badge-received,.badge-active{background:rgba(59,130,246,.15);color:#93c5fd}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}th{color:#94a3b8;font-weight:500}
.badge-unremitted{background:rgba(234,179,8,.15);color:#fde68a}.badge-remitted{background:rgba(59,130,246,.15);color:#93c5fd}.badge-settled{background:rgba(34,197,94,.15);color:#86efac}

.badge-trial_free{background:rgba(59,130,246,.15);color:#93c5fd}

/* XPayLink smooth UI improvements */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.card, .input, button, a, .badge { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease; }
button:hover, a:hover { transform: translateY(-1px); }
button:active, a:active { transform: translateY(0); }
table { contain: layout paint; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .input, button, a, .badge { transition: none !important; }
  button:hover, a:hover, button:active, a:active { transform: none !important; }
}


/* Clean dashboard UI v2 */

body.xpl-body{font-family:Inter,Arial,sans-serif;background:#0b1220;color:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.xpl-shell{display:flex;min-height:100vh}
.xpl-sidebar{width:250px;background:#0f172a;border-right:1px solid rgba(255,255,255,.08);padding:20px;gap:18px}
.xpl-brand{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.xpl-logo{width:40px;height:40px;flex:0 0 40px;border-radius:12px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.xpl-brand-name{font-size:1rem;font-weight:700;line-height:1.1;margin:0}
.xpl-brand-sub{font-size:.75rem;color:#94a3b8;line-height:1.35;margin-top:2px}
.xpl-nav{display:grid;gap:8px;margin-top:18px}
.xpl-nav-link{display:block;padding:11px 14px;border-radius:12px;color:#cbd5e1;font-size:.92rem;font-weight:600}
.xpl-nav-link:hover{background:rgba(255,255,255,.05);transform:none}
.xpl-nav-link.tab-active,.tab-active.xpl-nav-link{background:#2563eb !important;color:#fff !important;box-shadow:0 10px 24px rgba(37,99,235,.22)}
.xpl-logout{display:block;text-align:center;padding:11px 14px;border-radius:12px;background:#fff;color:#111827;font-size:.9rem;font-weight:700}
.xpl-logout:hover{transform:none;opacity:.96}
.xpl-main{flex:1;min-width:0;padding:24px 28px 48px}
.xpl-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.xpl-page-head h1{font-size:1.9rem;line-height:1.1;font-weight:700;margin:0}
.xpl-page-head p{margin-top:6px;color:#94a3b8;font-size:.92rem}
.xpl-head-actions{display:flex;flex-wrap:wrap;gap:10px}
.xpl-head-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:.84rem;font-weight:600}
.xpl-head-actions a:hover{background:rgba(255,255,255,.11);transform:none}
.card{border-radius:20px !important;box-shadow:0 12px 28px rgba(0,0,0,.14)}
.card:hover{transform:none}
button:hover,a:hover{transform:none}
table{font-size:.9rem}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
@media (max-width: 767px){.xpl-main{padding:16px 14px 36px}.xpl-page-head{flex-direction:column}.xpl-page-head h1{font-size:1.55rem}.xpl-head-actions{width:100%}.xpl-head-actions a{flex:1}}


/* Layout fix v3: prevents raw logo image from taking over the dashboard */
.xpl-logo,img.xpl-logo{display:block!important;width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;min-width:40px!important;min-height:40px!important;object-fit:contain!important}.xpl-floating-action{display:none!important}.xpl-shell{display:flex!important;min-height:100vh!important}.xpl-sidebar{width:250px!important;min-width:250px!important;max-width:250px!important}.xpl-main{flex:1!important;min-width:0!important}@media(max-width:767px){.xpl-shell{display:block!important}.xpl-sidebar{display:none!important}}


/* Clean paginated dashboard v4 */
.xpl-compact-grid .card,
.xpl-stat-card{
  padding:16px !important;
  border-radius:18px !important;
}
.xpl-stat-card p{
  margin:0;
  color:#94a3b8;
  font-size:.82rem;
  font-weight:600;
}
.xpl-stat-card h2{
  margin:.35rem 0 0;
  font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.025em;
}
.xpl-stat-card span{
  display:block;
  margin-top:.45rem;
  color:#64748b;
  font-size:.75rem;
}
.xpl-warn-card{
  border-color:rgba(234,179,8,.32) !important;
}
.xpl-warn-card p{color:#facc15}
.xpl-table-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.xpl-table-head h2{
  font-size:1.05rem;
  font-weight:750;
  margin:0;
}
.xpl-table-head span{
  color:#94a3b8;
  font-size:.78rem;
  white-space:nowrap;
}
.xpl-pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.xpl-pagination a,
.xpl-pagination span{
  min-width:34px;
  height:34px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:#cbd5e1;
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
}
.xpl-pagination a.active{
  background:#2563eb;
  color:white;
  border-color:#3b82f6;
}
.xpl-pagination a:hover{
  background:rgba(255,255,255,.11);
  transform:none;
}
@media (max-width: 767px){
  .xpl-pagination{justify-content:flex-start}
  .xpl-table-head{align-items:flex-start;flex-direction:column}
}