:root {
  --bg: #070b16;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-2: rgba(255, 255, 255, 0.03);
  --panel-strong: #10182b;
  --border: rgba(255, 255, 255, 0.09);
  --text: #eef2fb;
  --muted: #93a0bd;
  --brand: #e9b64d;
  --brand-2: #f7d47a;
  --brand-3: #38bdf8;
  --green: #39d98a;
  --red: #ff6b7d;
  --amber: #f5a623;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.4);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 88% -6%, rgba(233, 182, 77, 0.16), transparent 60%),
    radial-gradient(820px 560px at 6% 4%, rgba(56, 189, 248, 0.12), transparent 58%),
    radial-gradient(700px 520px at 50% 118%, rgba(57, 217, 138, 0.10), transparent 60%),
    linear-gradient(180deg, #070b16 0%, #080d1b 50%, #070a14 100%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 70%);
}
/* frosted-glass surfaces (dark theme) */
.login-card, .card, .stat, .sidebar, .badge { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.card, .stat { box-shadow: var(--shadow-soft); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* LOGIN */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 22px; position: relative; z-index: 1; }
.login-card { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 24px; padding: 36px; width: min(390px, 100%); box-shadow: var(--shadow); }
.login-card input { width: 100%; margin: 8px 0; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.login-card input::placeholder { color: #5c6a86; }
.login-card input:focus { outline: none; border-color: rgba(233,182,77,.6); box-shadow: 0 0 0 4px rgba(233,182,77,.15); background: rgba(255,255,255,.05); }
.login-card button#loginBtn { width: 100%; margin-top: 14px; padding: 14px; border: none; border-radius: 12px; background: linear-gradient(100deg, var(--brand), var(--brand-2)); color: #0a0e1a; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 14px 30px rgba(233,182,77,.3); transition: transform .14s ease, box-shadow .14s ease; }
.login-card button#loginBtn:hover { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(233,182,77,.4); }
.login-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.login-logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #0a0e1a; background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 12px 28px rgba(233,182,77,.34); }
.secure-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--green); background: rgba(57,217,138,.12); border: 1px solid rgba(57,217,138,.28); padding: 5px 10px; border-radius: 20px; }
.secure-chip svg { width: 14px; height: 14px; }
.secure-chip.sm { font-size: 11px; padding: 4px 9px; }
.login-title { margin: 0; font-size: 24px; letter-spacing: -.6px; }
.login-sub { margin: 4px 0 18px; color: var(--muted); font-size: 14px; }
.login-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 10px 0 2px; }
.trust-strip { display: flex; justify-content: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.trust-item svg { width: 15px; height: 15px; color: var(--brand); }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 18px 2px 8px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; flex-wrap: wrap; }

/* notifications */
.notif-bell { position: relative; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 11px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--text); transition: background .15s ease, box-shadow .15s ease; }
.notif-bell:hover { background: rgba(255,255,255,.09); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.notif-bell svg { width: 20px; height: 20px; }
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 10px; background: linear-gradient(135deg, #ff6b7d, #ff9a6b); color: #1a0b0e; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(255,107,125,.4); }
.notif-panel { position: absolute; right: 0; top: 48px; width: min(380px, 86vw); max-height: 460px; overflow-y: auto; background: var(--panel-strong); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); z-index: 20; padding: 8px; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.notif-item { display: flex; gap: 10px; padding: 10px; border-radius: 11px; align-items: flex-start; }
.notif-item:hover { background: rgba(255,255,255,.05); }
.notif-item.unread { background: rgba(233,182,77,.09); }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; background: var(--brand); }
.notif-dot.success { background: var(--green); } .notif-dot.error { background: var(--red); } .notif-dot.warning { background: var(--amber); }
.notif-item .nt { font-weight: 700; font-size: 13px; }
.notif-item .nm { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.notif-item .ntime { font-size: 11px; color: var(--muted); margin-top: 3px; }
.notif-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }

/* modal */
.p2c-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(3,6,14,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 18px; }
.p2c-modal-card { background: var(--panel-strong); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 22px; width: min(460px, 100%); }
.p2c-modal-card .field input, .p2c-modal-card .toolbar select { width: 100%; }
.demo-creds { display: flex; gap: 8px; margin-top: 16px; }
.ghost { background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--muted); padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 12px; flex: 1; }
.ghost:hover { color: var(--text); border-color: rgba(233,182,77,.5); }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #0a0e1a; font-size: 13px; box-shadow: 0 10px 24px rgba(233,182,77,.3); }
/* full Pay AGL wordmark logo */
.wordmark { font-weight: 800; font-size: 21px; letter-spacing: -0.3px; color: #fff; }
.wordmark .dot { color: var(--brand); -webkit-text-fill-color: var(--brand); }

/* APP LAYOUT */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; position: relative; z-index: 1; }
.sidebar { background: rgba(255,255,255,.03); border-right: 1px solid var(--border); padding: 22px 16px; display: flex; flex-direction: column; box-shadow: 12px 0 40px rgba(0,0,0,.3); }
.sidebar nav { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar nav button { text-align: left; background: transparent; border: 1px solid transparent; color: var(--muted); padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 14px; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.sidebar nav button:hover { background: rgba(255,255,255,.05); color: var(--text); border-color: var(--border); transform: translateX(2px); }
.sidebar nav button.active { background: linear-gradient(100deg, rgba(233,182,77,.16), rgba(247,212,122,.1)); color: #fff; font-weight: 700; border-color: rgba(233,182,77,.28); box-shadow: inset 3px 0 0 var(--brand); }
.sidebar-footer { border-top: 1px solid var(--border); padding-top: 14px; }
.user-info { font-size: 13px; margin-bottom: 10px; }
.user-info .name { font-weight: 600; }
.user-info .email { color: var(--muted); font-size: 12px; }

.content { padding: 0 32px 44px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 24px 0; position: sticky; top: 0; background: rgba(7, 11, 22, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 5; }
.topbar h1 { font-size: 25px; margin: 0; letter-spacing: -.5px; background: linear-gradient(100deg, #fff, var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.badge { font-size: 11px; text-transform: uppercase; letter-spacing: .55px; padding: 5px 10px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted); }

/* CARDS / STATS */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { --accent: #e9b64d; --accent2: #f7d47a; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 18px; padding: 18px; position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--accent), var(--accent2)); }
.stat::after { content: ""; position: absolute; inset: auto -28px -46px auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent); }
.stat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.stat .label { color: var(--muted); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat .label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.stat .value { font-size: 30px; font-weight: 800; margin-top: 8px; letter-spacing: -.5px; position: relative; background: linear-gradient(100deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* rotating accent palette so each card pops with its own color */
.stat:nth-child(6n+1) { --accent:#e9b64d; --accent2:#f7d47a; }
.stat:nth-child(6n+2) { --accent:#39d98a; --accent2:#7ef0b8; }
.stat:nth-child(6n+3) { --accent:#f5a623; --accent2:#ff7a59; }
.stat:nth-child(6n+4) { --accent:#38bdf8; --accent2:#7dd3fc; }
.stat:nth-child(6n+5) { --accent:#ff6b7d; --accent2:#ff9a6b; }
.stat:nth-child(6n+6) { --accent:#a78bfa; --accent2:#c4b5fd; }

.card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 18px; padding: 20px; margin-bottom: 20px; transition: box-shadow .16s ease, border-color .16s ease; }
.card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.35); border-color: rgba(233,182,77,.18); }
.card h2 { margin: 0 0 14px; font-size: 17px; letter-spacing: -.2px; display: flex; align-items: center; gap: 9px; }
.card h2::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); flex: 0 0 auto; }

/* TABLE */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; overflow: hidden; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
tr:hover td { background: rgba(255,255,255,.035); }

.pill { font-size: 11px; padding: 4px 10px; border-radius: 20px; font-weight: 700; letter-spacing: .2px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.success, .pill.completed, .pill.active { background: rgba(57,217,138,.14); color: var(--green); border-color: rgba(57,217,138,.3); }
.pill.failed, .pill.suspended, .pill.closed { background: rgba(255,107,125,.14); color: var(--red); border-color: rgba(255,107,125,.3); }
.pill.pending, .pill.approved { background: rgba(245,166,35,.15); color: var(--amber); border-color: rgba(245,166,35,.3); }

.btn { background: linear-gradient(100deg, var(--brand), var(--brand-2)); border: none; color: #0a0e1a; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 800; box-shadow: 0 10px 24px rgba(233,182,77,.24); transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(233,182,77,.32); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: default; }

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar select, .toolbar input { background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: 10px; font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.toolbar select option { background: #10182b; color: var(--text); }
.toolbar select:focus, .toolbar input:focus, .field input:focus, .field textarea:focus { outline: none; border-color: rgba(233,182,77,.62); box-shadow: 0 0 0 4px rgba(233,182,77,.14); background: rgba(255,255,255,.05); }
.amount { font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); padding: 20px; text-align: center; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar { width: 100%; background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-radius: 8px 8px 0 0; min-height: 4px; box-shadow: 0 8px 18px rgba(233,182,77,.2); }
.bar-label { font-size: 11px; color: var(--muted); }

/* ---- additions for full build ---- */
.demo-label { font-size: 12px; margin: 16px 0 6px; }
.sidebar nav { overflow-y: auto; max-height: calc(100vh - 200px); }
.ghostbtn { background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--muted); box-shadow: none; }
.ghostbtn:hover { color: var(--text); border-color: rgba(233,182,77,.4); background: rgba(255,255,255,.07); box-shadow: none; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea, .field select { width: 100%; max-width: 480px; background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 10px; }
.field input::placeholder, .field textarea::placeholder { color: #5c6a86; }
.field select option { background: #10182b; color: var(--text); }
.card h3 { font-size: 14px; margin: 16px 0 6px; }
pre { background: #05070e; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 15px; overflow-x: auto; font-size: 12.5px; color: #c8d0e0; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
code { background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; border: 1px solid var(--border); color: var(--brand-2); }
.ticket { border: 1px solid var(--border); border-radius: 14px; padding: 15px; margin-bottom: 12px; background: rgba(255,255,255,.03); }
.ticket-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ticket-msgs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.msg { background: rgba(255,255,255,.05); border-radius: 10px; padding: 9px 11px; font-size: 13px; }
a { color: var(--brand-2); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; }
.perm-item { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.perm-item input { width: 15px; height: 15px; accent-color: var(--brand); }
/* AI Admin Agent chat */
.ag-log { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.ag-row { display: flex; }
.ag-row.you { justify-content: flex-end; }
.ag-bubble { max-width: 80%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.ag-bubble.you { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #0a0e1a; font-weight: 600; border-bottom-right-radius: 4px; }
.ag-bubble.agent { background: rgba(255,255,255,.05); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.agent-card { width: 100%; margin: 8px 0 2px; font-size: 13px; }
.agent-card td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
.agent-card td.ak { color: var(--muted); width: 42%; }
.ag-actions { display: flex; gap: 8px; margin-top: 10px; }

@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar nav { max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .content { padding: 0 18px 34px; }
  .topbar { position: static; }
}

/* lively entrance + interaction pops */
@keyframes p2cFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#page > * { animation: p2cFadeUp .28s ease both; }
#page > *:nth-child(2) { animation-delay: .04s; }
#page > *:nth-child(3) { animation-delay: .08s; }
#page > *:nth-child(4) { animation-delay: .12s; }
.btn:active { transform: translateY(1px) scale(.99); }
tbody tr { transition: background .12s ease; }
.bars .bar { transition: height .4s cubic-bezier(.2,.8,.2,1); }
.badge { background: linear-gradient(100deg, rgba(233,182,77,.16), rgba(247,212,122,.12)); color: var(--brand-2); border-color: rgba(233,182,77,.3); font-weight: 700; }
/* PAY AGL TRUSTED PAYMENT GATEWAY THEME */
:root{--navy:#0b1f3a;--navy2:#102a4c;--blue:#1769e0;--cyan:#15a6c9;--green:#0f9f6e;--bg:#f4f7fb;--text:#142033;--muted:#66758a;--border:#dce4ee;--shadow:0 8px 26px rgba(16,42,76,.08)}
*{box-sizing:border-box}html,body{background:var(--bg)!important;color:var(--text)!important}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important}button,input,select,textarea{font:inherit}.hidden{display:none!important}a{color:var(--blue)}
.login-wrap{min-height:100vh!important;display:grid!important;place-items:center!important;padding:28px 18px!important;background:radial-gradient(circle at 15% 15%,rgba(21,166,201,.18),transparent 32%),linear-gradient(135deg,#07172b,#0b2746 55%,#0b1f3a)!important}.login-wrap.hidden{display:none!important}.login-card{width:min(100%,460px)!important;background:#fff!important;border:1px solid rgba(255,255,255,.7)!important;border-radius:18px!important;padding:34px!important;box-shadow:0 28px 80px rgba(0,0,0,.3)!important}.login-head{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:26px!important}.login-logo{width:46px!important;height:46px!important;display:grid!important;place-items:center!important;border-radius:12px!important;background:linear-gradient(135deg,var(--blue),var(--cyan))!important;color:#fff!important;font-weight:900!important}.login-card .brand{color:var(--navy)!important;font-size:20px!important;font-weight:800!important}.wordmark{font-weight:800!important}.brand .dot,.wordmark .dot{color:var(--blue)!important}.secure-chip{margin-left:auto!important;border:1px solid #bfe8dc!important;background:#ecfdf7!important;color:#087456!important;border-radius:999px!important;padding:6px 10px!important;font-size:10px!important;font-weight:800!important}.login-title{color:var(--navy)!important;font-size:28px!important;margin:0 0 8px!important}.login-sub{color:var(--muted)!important;margin:0 0 24px!important}.login-label,label{color:#34465c!important;font-size:12px!important;font-weight:700!important}.login-card input{width:100%!important;height:48px!important;margin:7px 0 17px!important}.login-card button{width:100%!important;min-height:48px!important}.trust-strip{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;border-top:1px solid var(--border)!important;margin-top:22px!important;padding-top:17px!important}.trust-item{color:#526277!important;text-align:center!important;font-size:11px!important;font-weight:700!important}.trust-item:before{content:"✓";color:var(--green);font-weight:900;margin-right:5px}
.app{min-height:100vh!important;display:grid!important;grid-template-columns:260px minmax(0,1fr)!important;background:var(--bg)!important}.sidebar{width:auto!important;min-height:100vh!important;position:sticky!important;top:0!important;align-self:start!important;background:linear-gradient(180deg,#0a1d36,#0d2848)!important;color:#dce8f6!important;border-right:1px solid rgba(255,255,255,.08)!important;padding:22px 16px 18px!important;box-shadow:8px 0 28px rgba(11,31,58,.08)!important;z-index:20}.sidebar>.brand{color:#fff!important;font-size:21px!important;padding:4px 10px 20px!important;margin-bottom:8px!important;border-bottom:1px solid rgba(255,255,255,.1)!important}.sidebar>.brand:before{content:"AG";display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;margin-right:9px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:12px;vertical-align:middle}.sidebar nav{display:flex!important;flex-direction:column!important;gap:3px!important}.sidebar nav button{width:100%!important;min-height:42px!important;padding:0 13px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#b9c8db!important;text-align:left!important;font-size:13px!important;font-weight:600!important}.sidebar nav button:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}.sidebar nav button.active{background:linear-gradient(90deg,rgba(23,105,224,.3),rgba(21,166,201,.12))!important;border-color:rgba(98,170,255,.22)!important;color:#fff!important;box-shadow:inset 3px 0 0 #47b8ff!important}.sidebar-footer{margin-top:18px!important;padding:16px 10px 4px!important;border-top:1px solid rgba(255,255,255,.1)!important}.sidebar-footer .name{color:#fff!important;font-weight:750!important}.sidebar-footer .email{color:#93a7bf!important;font-size:11px!important}.sidebar .ghost{margin-top:12px!important;border:1px solid rgba(255,255,255,.17)!important;background:rgba(255,255,255,.05)!important;color:#fff!important;border-radius:8px!important;padding:8px 12px!important}
.content{min-width:0!important;background:var(--bg)!important;color:var(--text)!important;padding:0 32px 28px!important}.topbar{min-height:78px!important;display:flex!important;align-items:center!important;gap:12px!important;position:sticky!important;top:0!important;z-index:15!important;background:rgba(244,247,251,.95)!important;backdrop-filter:blur(12px)!important;border-bottom:1px solid var(--border)!important;margin:0 -32px 24px!important;padding:0 32px!important}.topbar h1{color:var(--navy)!important;font-size:24px!important;font-weight:800!important}.badge{border:1px solid #bdd2f3!important;background:#eaf2ff!important;color:#0f54ba!important;border-radius:999px!important;padding:5px 9px!important;font-size:10px!important;font-weight:800!important}.notif{margin-left:auto!important}.notif-bell{width:40px!important;height:40px!important;border-radius:10px!important;border:1px solid var(--border)!important;background:#fff!important;color:var(--navy)!important;box-shadow:0 2px 10px rgba(16,42,76,.07)!important}
.btn,button[type=submit],button.primary{border:1px solid var(--blue)!important;background:var(--blue)!important;color:#fff!important;border-radius:9px!important;padding:10px 15px!important;font-weight:700!important;box-shadow:0 3px 8px rgba(23,105,224,.14)!important}.btn:hover,button[type=submit]:hover{background:#0f54ba!important}.btn.ghostbtn,.ghostbtn,.btn.secondary{background:#fff!important;color:#33445b!important;border-color:#cfd9e6!important;box-shadow:0 1px 3px rgba(16,42,76,.04)!important}.btn.sm{padding:7px 11px!important;font-size:12px!important}button:disabled{opacity:.5!important}input,select,textarea{border:1px solid #cfd9e6!important;background:#fff!important;color:var(--text)!important;border-radius:9px!important;padding:10px 12px!important;min-height:42px!important;box-shadow:0 1px 2px rgba(16,42,76,.03)!important}textarea{min-height:100px!important}input:focus,select:focus,textarea:focus{outline:0!important;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(23,105,224,.11)!important}input::placeholder,textarea::placeholder{color:#94a1b2!important}
.toolbar{display:flex!important;align-items:end!important;flex-wrap:wrap!important;gap:9px!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:12px!important;padding:12px!important;margin-bottom:14px!important;box-shadow:0 2px 10px rgba(16,42,76,.06)!important}.muted{color:var(--muted)!important}.card,.panel,.modal-card{background:#fff!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:12px!important;box-shadow:0 2px 10px rgba(16,42,76,.06)!important;padding:20px!important}.card h2,.card h3,.panel h2,.panel h3{color:var(--navy)!important}.stat-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:14px!important;margin:16px 0!important}.stat{position:relative!important;overflow:hidden!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:12px!important;padding:18px!important;box-shadow:0 2px 10px rgba(16,42,76,.06)!important}.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--blue),var(--cyan))}.stat .label{color:var(--muted)!important;font-size:11px!important;font-weight:750!important;text-transform:uppercase!important;letter-spacing:.04em!important}.stat .value{color:var(--navy)!important;font-size:26px!important;font-weight:850!important;margin-top:8px!important}
table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:12px!important;overflow:hidden!important;box-shadow:0 2px 10px rgba(16,42,76,.06)!important}thead{background:#f0f5fb!important}th{color:#42536a!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.05em!important;padding:12px 14px!important;border-bottom:1px solid var(--border)!important}td{color:#26374c!important;padding:13px 14px!important;border-bottom:1px solid #e8edf3!important}tbody tr:last-child td{border-bottom:0!important}tbody tr:hover td{background:#f8fbff!important}.empty{color:var(--muted)!important;background:#f8fafc!important;border:1px dashed #cad6e3!important;border-radius:10px!important;padding:28px!important;text-align:center!important}.modal,.dialog-backdrop{background:rgba(7,23,43,.62)!important;backdrop-filter:blur(4px)!important}.modal-card{box-shadow:0 24px 70px rgba(7,23,43,.24)!important;max-height:90vh!important;overflow:auto!important}.err,.error{background:#fff1f3!important;color:#b4233e!important;border:1px solid #ffc9d2!important;border-radius:8px!important;padding:10px 12px!important}.success{background:#ecfdf7!important;color:#087456!important;border:1px solid #bfe8dc!important;border-radius:8px!important;padding:10px 12px!important}.app-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;color:#7b899a!important;border-top:1px solid var(--border)!important;margin-top:28px!important;padding:18px 2px 0!important;font-size:11px!important}.app-footer .secure-chip{margin-left:0!important}
@media(max-width:1000px){.app{grid-template-columns:220px minmax(0,1fr)!important}.content{padding-left:20px!important;padding-right:20px!important}.topbar{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}.stat-grid{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:720px){.app{display:block!important}.sidebar{position:relative!important;min-height:auto!important;width:100%!important;padding:14px!important}.sidebar nav{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:5px!important}.sidebar nav button{min-height:38px!important;font-size:12px!important}.sidebar-footer{display:flex!important;align-items:center!important;justify-content:space-between!important}.sidebar .ghost{margin-top:0!important}.content{padding:0 14px 22px!important}.topbar{min-height:66px!important;margin:0 -14px 16px!important;padding:0 14px!important}.stat-grid{grid-template-columns:1fr 1fr!important}.toolbar{align-items:stretch!important}.card,.panel,.modal-card{padding:15px!important}table{display:block!important;overflow-x:auto!important;white-space:nowrap!important}}@media(max-width:430px){.login-card{padding:24px 20px!important}.trust-strip{grid-template-columns:1fr!important}.sidebar nav{grid-template-columns:1fr!important}.stat-grid{grid-template-columns:1fr!important}}

/* PAY AGL responsive navigation refinement */
@media (max-width:720px){
  .app{display:block!important;min-height:100vh!important}
  .sidebar{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;z-index:2!important}
  .sidebar nav{max-height:230px!important;overflow-y:auto!important;padding-right:4px!important}
  .sidebar-footer{margin-top:10px!important;padding-top:10px!important}
  .content,main,.main{display:block!important;width:100%!important;max-width:100%!important;margin-left:0!important;transform:none!important;position:relative!important;z-index:1!important}
}

/* PAY AGL official cyan + royal blue identity */
:root{--navy:#071b66!important;--blue:#0968ee!important;--cyan:#00dec9!important;--gold:#00dec9!important;--border:#dce7f3!important}
.brand{width:210px!important;height:58px!important;min-height:58px!important;background:url('/rupio-logo.svg') left center/contain no-repeat!important;display:block!important}
.brand .logo,.brand .wordmark{visibility:hidden!important}
.sidebar{background:linear-gradient(180deg,#06174d 0%,#071f62 62%,#063a7b 100%)!important}
.sidebar nav button.active{background:linear-gradient(90deg,rgba(9,104,238,.34),rgba(0,222,201,.12))!important;border-color:rgba(0,222,201,.35)!important;box-shadow:inset 4px 0 0 #00dec9!important}
.sidebar nav button:hover{background:rgba(9,104,238,.18)!important;color:#fff!important}
.btn,button[type=submit],button.primary{background:linear-gradient(135deg,#075fe0,#0a8cff)!important;border-color:#075fe0!important}
.btn:hover,button[type=submit]:hover{background:linear-gradient(135deg,#064fbd,#087be0)!important}
.login-shell{background:radial-gradient(circle at 18% 22%,rgba(0,222,201,.16),transparent 31%),radial-gradient(circle at 82% 12%,rgba(9,104,238,.23),transparent 30%),linear-gradient(135deg,#061747 0%,#07286e 58%,#064b83 100%)!important}
.login-card{border-top:4px solid #00dec9!important}
.secure-chip{color:#057668!important;background:#e7fffb!important;border-color:#b5f5eb!important}
.stat:before{background:linear-gradient(#0968ee,#00dec9)!important}
h1,h2,h3,.card h2,.card h3,.panel h2,.panel h3{color:#071b66!important}
@media(max-width:720px){.brand{width:190px!important;height:52px!important;min-height:52px!important}}
.sidebar .brand{background-image:url('/rupio-logo.svg')!important;width:220px!important}.login-head .brand{width:230px!important;margin:0 auto 8px!important}.brand>*{display:none!important}
.sidebar .brand::before{content:none!important;display:none!important}

/* Global native dropdown readability fix — 2026-08-23 */
html,body,select{color-scheme:light!important}
select option,select optgroup,.toolbar select option,.field select option{background-color:#ffffff!important;color:#102a4c!important}
select option:disabled{color:#7b8ba1!important}

/* PAYAGL NEXUS THEME v1 — full interface redesign 2026-08-30 */
:root{
  --bg:#061019!important;--panel:#0b1b28!important;--panel2:#102536!important;
  --text:#eaf7ff!important;--muted:#88a6b8!important;--border:#1b3a4d!important;
  --blue:#12b8ff!important;--blue2:#006dff!important;--cyan:#34f5d0!important;
  --green:#2ee59d!important;--red:#ff6b81!important;--amber:#ffcc66!important;
  --shadow:0 18px 50px rgba(0,0,0,.28)!important;
}
*{scrollbar-width:thin;scrollbar-color:#28536a #07141f}
html,body{background:#061019!important;color:#eaf7ff!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}
body{background:
 radial-gradient(circle at 85% 0%,rgba(18,184,255,.10),transparent 34rem),
 linear-gradient(145deg,#061019 0%,#071722 50%,#061019 100%)!important}
.app{grid-template-columns:272px minmax(0,1fr)!important;min-height:100vh!important;background:transparent!important}
.sidebar{width:272px!important;height:100vh!important;position:sticky!important;top:0!important;padding:24px 18px 20px!important;background:
 linear-gradient(180deg,rgba(13,35,51,.98),rgba(6,19,29,.99))!important;border-right:1px solid #18384a!important;box-shadow:18px 0 45px rgba(0,0,0,.18)!important}
.sidebar:before{content:"OPERATIONS CLOUD";display:block;position:absolute;top:88px;left:24px;color:#4c758a;font-size:9px;font-weight:900;letter-spacing:2.2px}
.sidebar .brand{width:196px!important;height:50px!important;margin:0 0 48px 4px!important;background-image:url('/rupio-logo.svg')!important;background-repeat:no-repeat!important;background-position:left center!important;background-size:contain!important}
.sidebar nav{display:flex!important;flex-direction:column!important;gap:5px!important;max-height:calc(100vh - 230px)!important;padding-right:3px!important}
.sidebar nav button{min-height:40px!important;padding:10px 14px!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;color:#9bb6c6!important;font-size:13px!important;font-weight:650!important;text-align:left!important;box-shadow:none!important;transition:.18s ease!important}
.sidebar nav button:hover{background:#10293a!important;color:#fff!important;border-color:#21475b!important;transform:translateX(2px)}
.sidebar nav button.active{background:linear-gradient(100deg,#056fe8,#08aeea)!important;color:#fff!important;border-color:#20c8ff!important;box-shadow:0 10px 28px rgba(0,116,255,.28)!important}
.sidebar-footer{margin-top:auto!important;padding:16px!important;border:1px solid #1b3e52!important;border-radius:14px!important;background:rgba(13,36,52,.8)!important}
.user-info .name{color:#fff!important;font-weight:800!important}.user-info .email{color:#7498ac!important}
.content{padding:0 34px 32px!important;background:transparent!important;min-width:0!important}
.topbar{height:84px!important;margin:0 -34px 24px!important;padding:0 34px!important;background:rgba(6,16,25,.82)!important;border-bottom:1px solid #173446!important;backdrop-filter:blur(18px)!important}
.topbar h1{font-size:25px!important;font-weight:850!important;letter-spacing:-.5px!important;color:#f4fbff!important}
.badge,.secure-chip{background:#0d2b3b!important;border:1px solid #1c5369!important;color:#65e8ff!important;border-radius:999px!important;font-weight:800!important;letter-spacing:.3px!important}
.notif-bell{background:#0c2130!important;border:1px solid #1d465b!important;color:#bfefff!important;border-radius:12px!important;box-shadow:none!important}
.toolbar{gap:10px!important;margin:0 0 18px!important;padding:12px!important;background:rgba(9,26,39,.72)!important;border:1px solid #17394c!important;border-radius:14px!important}
.toolbar .muted,.muted{color:#7f9eb1!important}
.btn,button[type=submit],button.primary{border:1px solid #16bfff!important;background:linear-gradient(115deg,#0878f5,#09bfe9)!important;color:#fff!important;border-radius:10px!important;font-weight:800!important;box-shadow:0 8px 24px rgba(0,121,255,.20)!important}
.btn:hover,button[type=submit]:hover,button.primary:hover{filter:brightness(1.08)!important;transform:translateY(-1px)}
.btn.ghostbtn,.ghostbtn,.btn.secondary,button.ghost{background:#0d2231!important;color:#acd4e7!important;border-color:#24495d!important;box-shadow:none!important}
input,select,textarea{background:#091c29!important;color:#eaf7ff!important;border:1px solid #21465a!important;border-radius:10px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important}
input:focus,select:focus,textarea:focus{border-color:#16bfff!important;box-shadow:0 0 0 3px rgba(18,184,255,.14)!important}
input::placeholder,textarea::placeholder{color:#55788c!important}
select option,select optgroup,.toolbar select option,.field select option{background:#0b1b28!important;color:#eaf7ff!important}
.field label,.login-label{color:#8eb0c2!important;font-weight:750!important}
.stat-grid{gap:14px!important;margin:16px 0 22px!important}
.stat{min-height:122px!important;padding:20px!important;border:1px solid #1a4053!important;border-radius:16px!important;background:
 linear-gradient(145deg,rgba(16,43,59,.96),rgba(9,26,39,.96))!important;box-shadow:0 16px 36px rgba(0,0,0,.16)!important;overflow:hidden!important}
.stat:before{content:"";position:absolute!important;inset:0 auto auto 0!important;width:100%!important;height:3px!important;background:linear-gradient(90deg,#12b8ff,#34f5d0)!important}
.stat:after{content:"";position:absolute;right:-24px;bottom:-35px;width:100px;height:100px;border-radius:50%;background:rgba(18,184,255,.08)}
.stat .label{color:#7d9caf!important;text-transform:uppercase!important;letter-spacing:1px!important;font-size:10px!important;font-weight:850!important}
.stat .value{margin-top:12px!important;color:#f6fcff!important;font-size:28px!important;font-weight:900!important;letter-spacing:-1px!important}
.card,.panel,.settings-card,.merchant-card,.modal-card,.p2c-modal-card{border:1px solid #1a3c50!important;border-radius:17px!important;background:
 linear-gradient(155deg,rgba(14,37,53,.96),rgba(8,24,36,.98))!important;box-shadow:0 18px 44px rgba(0,0,0,.20)!important}
.card{padding:22px!important;margin-bottom:18px!important}
.card h2,.card h3,.panel h2,.panel h3{color:#f1faff!important;font-weight:850!important;letter-spacing:-.25px!important}
.table-wrap{border:1px solid #1a3b4e!important;border-radius:14px!important;overflow:auto!important;background:#091923!important}
table{background:transparent!important;color:#d9edf8!important}
thead th{background:#0b2231!important;color:#7197aa!important;text-transform:uppercase!important;letter-spacing:.9px!important;font-size:10px!important;border-bottom:1px solid #21465a!important}
tbody tr{border-bottom:1px solid #143143!important}tbody tr:hover{background:rgba(18,184,255,.06)!important}
td{color:#c9deea!important;border-color:#153448!important}
.empty{padding:44px 18px!important;color:#6f91a4!important;border:1px dashed #21485d!important;border-radius:13px!important;background:rgba(5,20,30,.35)!important}
.status,.pill,.chip{border-radius:999px!important;font-weight:850!important}
.status.success,.success{color:#42edb0!important}.status.failed,.failed{color:#ff8394!important}.status.pending,.pending{color:#ffd36f!important}
.notif-panel{background:#0b1d2b!important;border:1px solid #245069!important;border-radius:15px!important;box-shadow:0 24px 60px rgba(0,0,0,.45)!important}
.modal,.p2c-modal{background:rgba(1,8,13,.76)!important;backdrop-filter:blur(8px)!important}
.app-footer{color:#5f8296!important;border-top:1px solid #153445!important;margin-top:30px!important}
.login-wrap{background:
 radial-gradient(circle at 15% 20%,rgba(18,184,255,.15),transparent 28rem),
 linear-gradient(140deg,#04101a,#081d2a 55%,#041019)!important}
.login-card{background:rgba(8,25,37,.96)!important;border:1px solid #1f4b61!important;border-radius:22px!important;box-shadow:0 30px 90px rgba(0,0,0,.45)!important}
.login-title{color:#f2fbff!important}.login-sub{color:#7799ab!important}.trust-strip{background:#081b28!important;border:1px solid #193e52!important}
@media(max-width:960px){
 .app{grid-template-columns:1fr!important}.sidebar{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;padding:18px!important}
 .sidebar:before{display:none}.sidebar .brand{margin-bottom:14px!important}.sidebar nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;max-height:none!important}
 .sidebar-footer{margin-top:14px!important}.content{padding:0 18px 24px!important}.topbar{margin:0 -18px 18px!important;padding:0 18px!important}
}
@media(max-width:640px){.sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}.stat-grid{grid-template-columns:1fr 1fr!important}.toolbar{align-items:stretch!important}.content{padding:0 12px 20px!important}}


/* PayAGL Horizon UI — original fintech design */
:root{--ink:#17233b;--muted:#6b7890;--line:#e7ebf2;--surface:#fff;--canvas:#f6f8fc;--primary:#3761ee;--primary2:#6547e8;--success:#0b9b73;--danger:#df4058;--warning:#e39421;--nav:#11182b;--nav2:#18213a;--radius:12px;--shadow:0 10px 30px rgba(20,34,70,.08)}
body{background:var(--canvas)!important;color:var(--ink)!important;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
.app-shell{background:var(--canvas)!important}.sidebar{width:252px!important;background:linear-gradient(180deg,var(--nav),var(--nav2))!important;border-right:0!important;padding:18px 12px!important;box-shadow:4px 0 24px rgba(11,18,38,.12)}
.sidebar .brand,.sidebar-brand{padding:4px 10px 20px!important;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px!important}
.sidebar .brand img,.sidebar-logo{max-width:150px!important}.sidebar #nav{display:flex;flex-direction:column;gap:3px}
#nav button{position:relative!important;display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:42px!important;padding:9px 12px!important;border-radius:8px!important;border:0!important;background:transparent!important;color:#aeb9d1!important;font-size:13px!important;font-weight:600!important;letter-spacing:.01em!important;text-align:left!important;transition:.18s ease!important}
#nav button:hover{color:#fff!important;background:rgba(255,255,255,.07)!important;transform:none!important}
#nav button.active{color:#fff!important;background:linear-gradient(90deg,rgba(75,101,238,.35),rgba(89,69,224,.16))!important;box-shadow:inset 3px 0 0 #6f8cff!important}
.nav-icon{width:19px;height:19px;display:grid;place-items:center;flex:0 0 19px;color:currentColor}.nav-icon svg{width:18px;height:18px;stroke:currentColor}
.content{margin-left:252px!important;background:var(--canvas)!important}.topbar{height:72px!important;padding:0 30px!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:blur(12px);position:sticky!important;top:0;z-index:20}
.topbar h1{font-size:20px!important;font-weight:700!important;color:var(--ink)!important}.badge{border-radius:999px!important;background:#eef2ff!important;color:#425cc7!important;border:1px solid #dfe5ff!important}
#page{padding:28px 30px 45px!important;max-width:1600px}.card,.panel,.stat,.metric-card,.login-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:0 2px 8px rgba(20,34,70,.035)!important}
.card:hover,.stat:hover{box-shadow:var(--shadow)!important}.stats{gap:16px!important}.stat{padding:20px!important}.stat .value,.stat strong{color:var(--ink)!important;font-weight:750!important}
.btn,button.primary{min-height:38px!important;border-radius:7px!important;font-weight:650!important;box-shadow:none!important;transition:.16s ease!important}.btn.primary,.btn:not(.ghostbtn):not(.danger):not(.secondary){background:var(--primary)!important;border-color:var(--primary)!important;color:white!important}.btn:hover{transform:translateY(-1px);filter:brightness(.98)}.ghostbtn,.btn.secondary{background:#fff!important;color:#34415c!important;border:1px solid #dce2ec!important}.btn.danger{background:#fff1f3!important;color:#c8324c!important;border:1px solid #ffd7de!important}
input,select,textarea{min-height:40px!important;border:1px solid #dce2ec!important;border-radius:7px!important;background:#fff!important;color:var(--ink)!important;box-shadow:0 1px 2px rgba(20,34,70,.03)!important}input:focus,select:focus,textarea:focus{border-color:#6e88f5!important;box-shadow:0 0 0 3px rgba(55,97,238,.12)!important;outline:0!important}
table{border-collapse:separate!important;border-spacing:0!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:10px!important;overflow:hidden}th{background:#f8f9fc!important;color:#68758d!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.055em!important;font-weight:700!important;border-bottom:1px solid var(--line)!important}td{border-bottom:1px solid #edf0f5!important;color:#33405a!important}tr:last-child td{border-bottom:0!important}tbody tr:hover td{background:#fafbfe!important}
.tabs,.filterbar{background:#fff!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:8px!important}.pill,.status,.chip{border-radius:999px!important}.notif-bell{border:1px solid var(--line)!important;background:#fff!important;border-radius:8px!important}.app-footer{color:#8490a5!important;border-top:1px solid var(--line)!important}
.login-wrap{background:radial-gradient(circle at 18% 20%,rgba(78,104,240,.18),transparent 28%),linear-gradient(135deg,#0f1730,#1a2550)!important}.login-card{max-width:430px!important;padding:34px!important}.login-logo{display:none!important}.login-head:before{content:"";display:block;width:154px;height:44px;background:url('/rupio-logo.svg') center/contain no-repeat}
@media(max-width:900px){.sidebar{width:218px!important}.content{margin-left:218px!important}#page{padding:20px!important}}@media(max-width:700px){.sidebar{position:relative!important;width:100%!important}.content{margin-left:0!important}.topbar{padding:0 16px!important}}


/* Scalable dashboard organization */
.sidebar{height:100vh!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#34405b transparent}
.nav-section{padding:16px 12px 7px;color:#687795;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#nav .nav-section:first-child{padding-top:6px}
#page{width:100%;max-width:1440px;margin:0 auto;box-sizing:border-box;overflow-x:clip}
#page>.card,#page>.panel{max-width:100%}.stats,.metrics,.cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.table-wrap,.table-scroll,.card:has(>table),.panel:has(>table){max-width:100%;overflow-x:auto!important}
table{width:100%!important;min-width:720px}form{max-width:100%}.form-grid,.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.page-head,.toolbar,.filters,.actions-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap!important}
@media(min-width:1500px){.sidebar{width:272px!important}.content{margin-left:272px!important}#page{padding:34px 42px 52px!important}.topbar{padding:0 42px!important}.stats,.metrics{gap:20px!important}}
@media(max-width:1180px){.sidebar{width:228px!important}.content{margin-left:228px!important}#nav button{font-size:12px!important;padding-left:10px!important}.topbar{padding:0 22px!important}#page{padding:22px!important}}
@media(max-width:760px){.app-shell{display:block!important}.sidebar{position:relative!important;width:100%!important;height:auto!important;max-height:none!important;padding:12px!important}.sidebar #nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.nav-section{grid-column:1/-1;padding:12px 8px 4px}.content{margin-left:0!important}.topbar{position:sticky!important;height:60px!important}.topbar h1{font-size:17px!important}#page{padding:15px!important}.stats,.metrics,.cards,.form-grid,.grid{grid-template-columns:1fr!important}table{min-width:650px}.app-footer{padding:20px 15px!important;flex-direction:column;gap:8px}}


/* Dashboard fit + contrast correction */
.sidebar{width:224px!important;padding:12px 10px!important}.content{margin-left:224px!important}.sidebar .brand,.sidebar-brand{padding:2px 8px 12px!important;margin-bottom:5px!important}.sidebar #nav{gap:1px!important}#nav button{min-height:34px!important;padding:6px 10px!important;font-size:12px!important;gap:10px!important;border-radius:7px!important}.nav-icon{width:16px!important;height:16px!important;flex-basis:16px!important}.nav-icon svg{width:16px!important;height:16px!important}.nav-section{padding:10px 10px 4px!important;font-size:9px!important}.sidebar .user-card,.sidebar-user{padding:10px!important;margin-top:8px!important}.topbar{height:62px!important;padding:0 24px!important}#page{max-width:none!important;padding:20px 24px 32px!important}
#page,#page h1,#page h2,#page h3,#page h4,#page p,#page label,#page legend,#page td,#page strong,#page b{color:#17233b!important}
#page .muted,#page small,#page .sub,#page .hint,#page .help,#page .subtitle,#page .meta{color:#68758d!important}
#page input,#page select,#page textarea,#page option{color:#17233b!important;background:#fff!important}
#page select option{color:#17233b!important;background:#fff!important}
#page .badge,#page .status,#page .pill,#page .chip{color:inherit}
#page .success,#page .status.success{color:#08795b!important;background:#e9f8f3!important}
#page .failed,#page .danger,#page .status.failed{color:#bd3049!important;background:#fff0f3!important}
#page .pending,#page .warning,#page .status.pending{color:#9a6415!important;background:#fff6e6!important}
.stats{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))!important;gap:10px!important}.stat{padding:14px 16px!important}.stat .value,.stat strong{font-size:clamp(18px,2vw,25px)!important}
@media(max-width:1100px){.sidebar{width:205px!important}.content{margin-left:205px!important}#page{padding:16px!important}.topbar{padding:0 16px!important}}
@media(max-width:760px){.sidebar{width:100%!important}.content{margin-left:0!important}.sidebar #nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}#nav button{min-height:38px!important}}


/* Full-screen layout correction */
.app{display:grid!important;grid-template-columns:240px minmax(0,1fr)!important;width:100%!important;max-width:none!important;min-height:100vh!important;overflow:visible!important}
.sidebar{width:240px!important;min-width:240px!important;max-width:240px!important;box-sizing:border-box!important;margin:0!important;position:sticky!important;top:0!important}
.content{margin-left:0!important;width:100%!important;min-width:0!important;max-width:none!important;padding:0!important;box-sizing:border-box!important;overflow:hidden!important}
.topbar{width:100%!important;box-sizing:border-box!important;margin:0!important}
#page{width:100%!important;max-width:none!important;margin:0!important;padding:20px 24px 32px!important;box-sizing:border-box!important}
#page>*{max-width:none!important;box-sizing:border-box}
#page>.card,#page>.panel,#page>.table-wrap,#page>.section{width:100%!important}
.card,.panel{box-sizing:border-box!important}
.table-wrap,.table-scroll{width:100%!important;max-width:100%!important}
table{width:100%!important;max-width:100%!important}
@media(max-width:1050px){.app{grid-template-columns:210px minmax(0,1fr)!important}.sidebar{width:210px!important;min-width:210px!important;max-width:210px!important}#page{padding:16px!important}}
@media(max-width:760px){.app{display:block!important}.sidebar{position:relative!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important}.content{width:100%!important}#page{padding:14px!important}}


/* Critical view-state correction */
.hidden,#loginView.hidden,#appView.hidden,.login-wrap.hidden,.app.hidden{display:none!important;visibility:hidden!important}
#loginView:not(.hidden){display:grid!important;min-height:100vh!important}
#appView:not(.hidden){display:grid!important;visibility:visible!important}


/* PayAGL Night Gateway — original cinematic login */
#loginView.login-wrap{position:relative!important;isolation:isolate;overflow:hidden!important;display:grid!important;place-items:center!important;min-height:100vh!important;padding:34px 20px!important;background:radial-gradient(circle at 50% 18%,#204a82 0,#101f45 28%,#071128 62%,#040918 100%)!important}
#loginView.login-wrap:before{content:"";position:absolute;inset:0;z-index:-6;background-image:radial-gradient(circle,#b9e8ff 0 1px,transparent 1.5px),radial-gradient(circle,#8fbfff 0 1px,transparent 1.5px),radial-gradient(circle,#fff 0 1px,transparent 1.4px);background-size:79px 83px,123px 117px,173px 157px;background-position:0 0,34px 21px,80px 47px;opacity:.48;animation:starsDrift 28s linear infinite}
.login-scene{position:absolute;inset:0;pointer-events:none;z-index:-4;overflow:hidden}.login-moon{position:absolute;width:165px;height:165px;border-radius:50%;left:50%;top:10%;transform:translateX(-50%);background:radial-gradient(circle at 40% 35%,#fffde7 0,#d8eeff 52%,#75a8e9 100%);box-shadow:0 0 80px rgba(136,205,255,.38),0 0 180px rgba(63,116,214,.22);opacity:.92}
.login-horizon{position:absolute;left:-8%;right:-8%;bottom:0;height:45%;background:linear-gradient(160deg,transparent 25%,#101b3d 26% 43%,#0b1431 44%);clip-path:polygon(0 45%,14% 31%,27% 42%,42% 15%,54% 34%,69% 19%,84% 36%,100% 20%,100% 100%,0 100%)}
.login-dune{position:absolute;left:-10%;right:-10%;bottom:-12%;height:44%;border-radius:50% 50% 0 0/28% 32% 0 0;background:linear-gradient(180deg,#17274d,#071127 62%);transform:rotate(-2deg);box-shadow:0 -20px 80px rgba(40,86,145,.2)}
.login-path{position:absolute;left:50%;bottom:-2%;width:42%;height:58%;transform:translateX(-50%);background:linear-gradient(90deg,transparent 0,rgba(64,183,255,.03) 18%,rgba(72,214,255,.22) 48%,rgba(110,229,255,.32) 50%,rgba(72,214,255,.22) 52%,rgba(64,183,255,.03) 82%,transparent);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);filter:blur(.2px);animation:pathPulse 3.4s ease-in-out infinite}
.login-beam{position:absolute;left:50%;top:21%;width:360px;height:70%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(113,222,255,.16),rgba(66,132,255,.03) 70%,transparent);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);filter:blur(7px);animation:beamBreath 4s ease-in-out infinite}
.login-card{position:relative!important;z-index:4!important;width:min(430px,calc(100vw - 38px))!important;padding:32px 34px 28px!important;border-radius:18px!important;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(242,247,255,.93))!important;border:1px solid rgba(210,229,255,.72)!important;box-shadow:0 30px 90px rgba(0,8,29,.55),0 0 0 1px rgba(255,255,255,.45) inset!important;backdrop-filter:blur(22px);animation:cardArrive .85s cubic-bezier(.2,.8,.2,1) both}
.login-card:before{content:"SECURE PAYMENT COMMAND";display:block;font-size:9px;letter-spacing:.18em;font-weight:850;color:#54709a;margin-bottom:16px}
.login-head{justify-content:center!important;margin-bottom:16px!important}.login-head:before{width:166px!important;height:46px!important}.login-head .secure-chip{position:absolute;top:17px;right:18px;font-size:0!important;padding:7px!important;background:#e9f9f5!important;border-color:#c8eee4!important}.login-head .secure-chip svg{width:14px!important;height:14px!important}
.login-title{text-align:center!important;color:#13203a!important;font-size:25px!important}.login-sub{text-align:center!important;color:#6a7890!important;margin-bottom:22px!important}
.login-label{color:#44516b!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.06em!important;font-weight:750!important}
.login-card input{height:45px!important;border-radius:9px!important;background:#fff!important;color:#15223c!important;border:1px solid #d8e1ef!important;margin:6px 0 10px!important;padding:0 14px!important}
.login-card input:focus{border-color:#4f7cff!important;box-shadow:0 0 0 4px rgba(55,97,238,.12)!important}
.login-card button#loginBtn{height:48px!important;border-radius:9px!important;background:linear-gradient(105deg,#1f6cf0,#5a55e5)!important;color:white!important;font-size:14px!important;letter-spacing:.01em!important;box-shadow:0 13px 28px rgba(47,91,225,.28)!important;position:relative;overflow:hidden}
.login-card button#loginBtn:after{content:"";position:absolute;top:-60%;left:-25%;width:20%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(18deg);animation:buttonShine 3.8s ease-in-out infinite}
.trust-strip{border-top:1px solid #e1e7f0!important;margin-top:21px!important;padding-top:16px!important;gap:12px!important}.trust-item{color:#65738b!important;font-size:10px!important}.trust-item svg{color:#2783ee!important}
.login-card a{color:#3269d5!important}.demo-creds{display:none!important}
@keyframes starsDrift{to{background-position:79px 83px,157px 138px,253px 204px}}@keyframes pathPulse{50%{opacity:.55;filter:blur(2px)}}@keyframes beamBreath{50%{opacity:.55;transform:translateX(-50%) scaleX(1.08)}}@keyframes cardArrive{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}@keyframes buttonShine{0%,60%{left:-30%}85%,100%{left:120%}}
@media(max-width:600px){.login-moon{width:115px;height:115px;top:7%}.login-card{padding:28px 22px 24px!important}.login-card:before{text-align:center}.login-head .secure-chip{display:none!important}.login-path{width:85%}}
@media(prefers-reduced-motion:reduce){#loginView.login-wrap:before,.login-path,.login-beam,.login-card,.login-card button#loginBtn:after{animation:none!important}}


/* Cinematic login QA corrections */
#loginView .login-card{width:min(390px,calc(100vw - 32px))!important;padding:25px 28px 22px!important;border-radius:16px!important}
#loginView .login-head{min-height:48px!important;margin:0 0 10px!important;display:flex!important;justify-content:center!important}
#loginView .login-head .brand{display:none!important;background:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important}
#loginView .login-head:before{content:""!important;display:block!important;width:158px!important;height:45px!important;background:url('/rupio-logo.svg') center/contain no-repeat!important}
#loginView .login-title{font-size:23px!important;margin-top:2px!important}
#loginView .login-sub{font-size:13px!important;margin:3px 0 17px!important}
#loginView .login-card:before{margin-bottom:10px!important;text-align:center!important}
#loginView .login-card input{height:42px!important;font-size:14px!important;margin:5px 0 8px!important}
#loginView .login-card button#loginBtn{height:44px!important;margin-top:10px!important}
#loginView #loginError:empty{display:none!important}
#loginView #loginError:not(:empty){display:block!important;margin:10px 0 0!important;padding:9px 11px!important;border-radius:8px!important;background:#fff0f3!important;border:1px solid #ffcdd6!important;color:#b82f48!important;font-size:12px!important}
#loginView .trust-strip{display:grid!important;grid-template-columns:repeat(3,1fr)!important;background:transparent!important;border:0!important;border-top:1px solid #e1e7f0!important;margin:17px 0 0!important;padding:14px 0 0!important}
#loginView .trust-item{justify-content:center!important;white-space:nowrap!important;color:#67758c!important;background:transparent!important}
#loginView .trust-item:before{display:none!important}
#loginView .muted{color:#718099!important}
#loginView .muted a{font-size:11px!important;text-decoration:none!important}
#loginView .login-moon{top:8%!important}
@media(max-height:720px){#loginView.login-wrap{padding:18px!important}#loginView .login-card{padding:20px 25px 18px!important}#loginView .login-head{min-height:38px!important}#loginView .login-head:before{height:38px!important}#loginView .login-title{font-size:21px!important}#loginView .login-sub{margin-bottom:12px!important}.trust-strip{margin-top:12px!important}}
@media(max-width:430px){#loginView .login-card{padding:22px 19px 19px!important}#loginView .trust-strip{grid-template-columns:1fr!important;gap:8px!important}}


/* Site-wide QA and empty-state corrections */
.err:empty,.error:empty,.msg:empty,.message:empty,.alert:empty,.form-error:empty,.form-message:empty{display:none!important}
.hidden{display:none!important}
input,select,textarea,option{color:#17233b!important;background-color:#fff!important}
select option{color:#17233b!important;background:#fff!important}
.card,.panel,.modal-card,.stat{max-width:100%;box-sizing:border-box}
.table-wrap,.table-scroll{max-width:100%;overflow-x:auto}
button:disabled,.btn:disabled{opacity:.6;cursor:not-allowed}
img{max-width:100%}


/* Sign-in button interaction correction */
#loginView .login-card #loginBtn,
#loginView .login-card #loginBtn:hover,
#loginView .login-card #loginBtn:focus,
#loginView .login-card #loginBtn:focus-visible,
#loginView .login-card #loginBtn:active{
background:linear-gradient(105deg,#1f6cf0,#5a55e5)!important;
background-color:#315fe8!important;
color:#fff!important;
border:0!important;
-webkit-text-fill-color:#fff!important;
box-shadow:0 13px 28px rgba(47,91,225,.28)!important;
outline:none!important}
#loginView .login-card #loginBtn:hover{filter:brightness(1.04)!important;transform:translateY(-1px)!important}
#loginView .login-card #loginBtn:active{filter:brightness(.94)!important;transform:translateY(1px)!important;box-shadow:0 7px 16px rgba(47,91,225,.25)!important}
#loginView .login-card #loginBtn:focus-visible{box-shadow:0 0 0 4px rgba(94,126,255,.3),0 13px 28px rgba(47,91,225,.28)!important}
#loginView .login-card #loginBtn:disabled{background:linear-gradient(105deg,#6e91e8,#8581df)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

/* Live USDT/INR market ticker */
.usdt-rate{margin-left:auto;display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #d8e3f2;border-radius:12px;background:#f8fbff;color:#14213d;white-space:nowrap;box-shadow:0 4px 14px rgba(15,35,70,.05)}.usdt-dot{width:8px;height:8px;border-radius:50%;background:#16c784;box-shadow:0 0 0 4px rgba(22,199,132,.12)}.usdt-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:#60708c}.usdt-rate strong{font-size:15px;color:#0f1f3d}.usdt-rate small{font-size:11px;font-weight:700}.rate-up{color:#07885d}.rate-down{color:#d9435f}.usdt-rate.rate-stale{opacity:.72}.usdt-rate.rate-stale .usdt-dot{background:#f0ad35;box-shadow:0 0 0 4px rgba(240,173,53,.12)}@media(max-width:760px){.usdt-rate{padding:7px 9px;gap:5px}.usdt-label,.usdt-rate small{display:none}.usdt-rate strong{font-size:13px}}

/* Stacked live and operational exchange rates */
.usdt-rate{flex-direction:column;align-items:stretch;gap:5px;padding:8px 13px}.rate-line{display:flex;align-items:center;gap:8px;min-height:20px}.our-rate-line{padding-top:5px;border-top:1px solid #e2eaf4}.our-rate-dot{width:8px;height:8px;border-radius:50%;background:#2d6df6;box-shadow:0 0 0 4px rgba(45,109,246,.12)}.our-rate-line strong{color:#174cb8}.our-rate-line small{color:#60708c}@media(max-width:760px){.usdt-rate{gap:4px}.rate-line{gap:5px}.our-rate-line small{display:none}}

/* Rupio visual system */
:root{--bg:#080617!important;--panel:#12102a!important;--panel-2:#171433!important;--panel-strong:#1d1940!important;--border:rgba(167,139,250,.18)!important;--text:#f7f5ff!important;--muted:#a8a2c7!important;--brand:#a78bfa!important;--brand-2:#e879f9!important;--brand-3:#22d3ee!important;--green:#34d399!important;--red:#fb7185!important;--amber:#fbbf24!important;--primary:#8b5cf6!important;--ink:#f7f5ff!important;--shadow:0 22px 70px rgba(3,1,20,.46)!important}
body{background:radial-gradient(circle at 85% 0,rgba(139,92,246,.22),transparent 32%),radial-gradient(circle at 15% 100%,rgba(34,211,238,.12),transparent 30%),#080617!important;color:#f7f5ff!important}body:before{background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px)!important;background-size:34px 34px!important}.sidebar{background:linear-gradient(180deg,#12102b,#0b091d)!important;border-right:1px solid rgba(167,139,250,.22)!important;box-shadow:18px 0 55px rgba(2,1,14,.38)!important;padding:18px 12px!important}.sidebar .brand,.sidebar-brand{background:linear-gradient(145deg,rgba(139,92,246,.13),rgba(34,211,238,.05))!important;border:1px solid rgba(167,139,250,.17)!important;border-radius:18px!important;padding:14px!important}#nav button,.sidebar nav button{border-radius:999px!important;padding:9px 14px!important;color:#aaa4ca!important}#nav button:hover,.sidebar nav button:hover{background:rgba(139,92,246,.12)!important;color:#fff!important;transform:translateX(3px)!important}#nav button.active,.sidebar nav button.active{background:linear-gradient(90deg,#7c3aed,#a855f7)!important;color:#fff!important;box-shadow:0 8px 24px rgba(124,58,237,.28)!important;border-color:transparent!important}.topbar{background:rgba(8,6,23,.76)!important;border-bottom:1px solid rgba(167,139,250,.12)!important;backdrop-filter:blur(22px)!important}.topbar h1{color:#fff!important;background:none!important;font-size:22px!important;letter-spacing:-.7px!important}#page{padding:28px 30px 44px!important}.card,.panel,.modal-card{background:linear-gradient(145deg,rgba(25,21,55,.96),rgba(14,12,34,.96))!important;border:1px solid rgba(167,139,250,.16)!important;border-radius:24px!important;box-shadow:0 16px 48px rgba(3,1,20,.28)!important}.stat{background:linear-gradient(145deg,rgba(27,23,61,.98),rgba(14,12,34,.98))!important;border:1px solid rgba(167,139,250,.18)!important;border-radius:22px 8px 22px 8px!important;padding:20px!important}.stat:before{width:100%!important;height:3px!important;bottom:auto!important;background:linear-gradient(90deg,#8b5cf6,#d946ef,#22d3ee)!important}.stat .value,.stat strong{color:#fff!important;background:linear-gradient(90deg,#fff,#c4b5fd)!important;-webkit-background-clip:text!important;background-clip:text!important}.btn.primary,.btn:not(.ghostbtn):not(.danger):not(.secondary),button.primary{background:linear-gradient(100deg,#7c3aed,#c026d3)!important;border:0!important;color:#fff!important;border-radius:999px!important;box-shadow:0 9px 24px rgba(124,58,237,.25)!important}.ghostbtn,.btn.secondary{background:rgba(167,139,250,.08)!important;color:#ddd6fe!important;border:1px solid rgba(167,139,250,.2)!important;border-radius:999px!important}input,select,textarea{background:#0d0b22!important;border-color:rgba(167,139,250,.2)!important;color:#f8f7ff!important;border-radius:12px!important}table{border-collapse:separate!important;border-spacing:0 7px!important}tbody tr{background:rgba(167,139,250,.045)!important}.badge,.status{border-radius:999px!important}@media(max-width:720px){#page{padding:18px 14px 34px!important}.card,.panel{border-radius:18px!important}}

#loginView .login-head:before{width:238px!important;height:66px!important;background-color:#0d0b22!important;background-size:205px auto!important;background-position:center!important;border:1px solid rgba(139,92,246,.25)!important;border-radius:18px!important;box-shadow:0 14px 34px rgba(15,8,45,.22)!important}

/* Rupio Operations UI v2 */
#appView{background:#f3f6fb!important;color:#122033!important}
#appView .sidebar{width:252px!important;min-width:252px!important;max-width:252px!important;background:#081422!important;border-right:0!important;padding:20px 14px!important;box-shadow:12px 0 36px rgba(8,20,34,.14)!important}
#appView .content{margin-left:252px!important;background:#f3f6fb!important}
#appView .sidebar .brand,#appView .sidebar-brand{background:#0d2034!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important}
#appView #nav button{border-radius:10px!important;color:#8fa3b8!important;padding:9px 12px!important}
#appView #nav button:hover{background:#10273d!important;color:#fff!important;transform:none!important}
#appView #nav button.active{background:#e8ff65!important;color:#111b27!important;box-shadow:none!important;font-weight:800!important}
#appView .nav-section{color:#577087!important;letter-spacing:.14em!important}
#appView .topbar{height:72px!important;background:rgba(243,246,251,.9)!important;border-bottom:1px solid #dfe6ef!important;padding:0 30px!important;backdrop-filter:blur(14px)!important}
#appView .topbar h1{color:#102033!important;font-size:23px!important;font-weight:780!important}
#appView #page{padding:28px 30px 48px!important;color:#122033!important}
#appView .card,#appView .panel,#appView .modal-card{background:#fff!important;border:1px solid #e1e7ef!important;border-radius:16px!important;box-shadow:0 8px 28px rgba(32,51,75,.055)!important;color:#122033!important}
#appView .card h2,#appView .panel h2{color:#14243a!important;font-size:16px!important}
#appView .muted{color:#718096!important}
#appView input,#appView select,#appView textarea{background:#fff!important;color:#14243a!important;border:1px solid #d7e0ea!important;border-radius:9px!important}
#appView label{color:#52647a!important}
#appView table{border-collapse:collapse!important;border-spacing:0!important;color:#23354c!important}
#appView thead th{background:#f7f9fc!important;color:#718096!important;border-bottom:1px solid #dfe6ef!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.08em!important}
#appView tbody tr{background:#fff!important}
#appView tbody td{border-bottom:1px solid #edf1f5!important;border-top:0!important;color:#2c3e54!important}
#appView .btn.primary,#appView .btn:not(.ghostbtn):not(.danger):not(.secondary),#appView button.primary{background:#155eef!important;color:#fff!important;border-radius:9px!important;box-shadow:none!important}
#appView .ghostbtn,#appView .btn.secondary{background:#fff!important;color:#354960!important;border:1px solid #d8e1eb!important;border-radius:9px!important}
.ops-dashboard{display:flex;flex-direction:column;gap:18px}
.dash-command{min-height:156px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 32px;border-radius:20px;background:linear-gradient(115deg,#0a1a2d,#12385b 62%,#155eef);color:#fff;overflow:hidden;position:relative}
.dash-command:after{content:"";position:absolute;width:260px;height:260px;border:55px solid rgba(232,255,101,.12);border-radius:50%;right:-80px;top:-100px}
.dash-eyebrow{display:block;color:#e8ff65;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:9px}
.dash-command h2{font-size:29px!important;color:#fff!important;margin:0 0 7px!important;letter-spacing:-.8px}
.dash-command p{color:#b8c9da;margin:0;max-width:640px;font-size:13px}
.dash-health{position:relative;z-index:1;min-width:150px;text-align:right}.dash-health span{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#d8e4ef;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.dash-health i{width:8px;height:8px;border-radius:50%;background:#e8ff65;box-shadow:0 0 0 5px rgba(232,255,101,.14)}.dash-health strong{display:block;margin-top:9px;font-size:17px;color:#fff}
.dash-filterbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:14px 16px;background:#fff;border:1px solid #e1e7ef;border-radius:14px}
.dash-presets,.dash-dates{display:flex;align-items:flex-end;gap:8px}.dash-presets>span{font-size:11px;font-weight:800;color:#718096;text-transform:uppercase;letter-spacing:.08em;margin:0 6px 10px 0}.dash-dates .field{margin:0!important}.dash-dates input{height:36px!important;margin:4px 0 0!important}
.dash-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:0!important}
#appView .dash-kpis .stat{min-height:116px;background:#fff!important;border:1px solid #e1e7ef!important;border-radius:14px!important;padding:17px 18px!important;box-shadow:none!important}
#appView .dash-kpis .stat:before,#appView .dash-kpis .stat:after{display:none!important}
#appView .dash-kpis .stat-primary{grid-column:span 2;background:linear-gradient(135deg,#155eef,#0b43b5)!important;border-color:#155eef!important}
#appView .dash-kpis .label{font-size:10px!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:#718096!important}
#appView .dash-kpis .stat-primary .label,#appView .dash-kpis .stat-primary .kpi-foot{color:#bcd0ff!important}
#appView .dash-kpis .value{font-size:27px!important;color:#122033!important;background:none!important;-webkit-text-fill-color:initial!important;margin-top:10px!important}
#appView .dash-kpis .stat-primary .value{color:#fff!important}
.kpi-foot{font-size:10px;color:#9aa8b8;margin-top:10px}
.dash-workspace{display:grid;grid-template-columns:minmax(320px,.75fr) minmax(500px,1.25fr);gap:14px}
#appView .dash-workspace .card{padding:0!important;overflow:hidden!important;margin:0!important}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e8edf3}.panel-head span{display:block;font-size:9px;font-weight:800;color:#8a98aa;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}.panel-head h2{margin:0!important}.panel-head>b{font-size:10px;color:#52647a;background:#f0f4f8;border-radius:999px;padding:6px 9px}
.chart-panel .bars{min-height:230px;padding:28px 20px 20px!important;align-items:flex-end}.chart-panel .bar{background:linear-gradient(180deg,#155eef,#67a4ff)!important;border-radius:7px 7px 2px 2px!important}.activity-panel .empty,.chart-panel .empty{min-height:180px;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#8090a3}.activity-panel .empty strong,.chart-panel .empty strong{color:#33475f}
@media(max-width:1100px){.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dash-workspace{grid-template-columns:1fr}.dash-filterbar{align-items:flex-start;flex-direction:column}.dash-dates{flex-wrap:wrap}}
@media(max-width:720px){#appView .content{margin-left:0!important}.dash-command{padding:23px;align-items:flex-start;flex-direction:column}.dash-health{text-align:left}.dash-health span{justify-content:flex-start}.dash-kpis{grid-template-columns:1fr!important}.dash-kpis .stat-primary{grid-column:span 1!important}.dash-presets{flex-wrap:wrap}.dash-dates{width:100%}}

/* Rupio layout hotfix */
html,body{max-width:100%;overflow-x:hidden!important}
#appView.app{grid-template-columns:252px minmax(0,1fr)!important;width:100%!important;max-width:100vw!important;overflow:hidden!important}
#appView .sidebar{grid-column:1!important;width:252px!important;min-width:252px!important;max-width:252px!important}
#appView .content{grid-column:2!important;margin-left:0!important;min-width:0!important;width:auto!important;max-width:100%!important;overflow-x:hidden!important}
#appView .topbar{width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important}
#appView #page{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important}
#appView .ops-dashboard,#appView .dash-workspace,#appView .dash-filterbar,#appView .dash-kpis{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
#appView .sidebar .brand{height:60px!important;width:auto!important;margin:0 4px 12px!important;background-color:#0d2034!important;background-image:url('/rupio-logo.svg')!important;background-repeat:no-repeat!important;background-position:center!important;background-size:190px auto!important}
#appView .dash-command h2{color:#fff!important;-webkit-text-fill-color:#fff!important}
#appView .dash-command p{color:#b8c9da!important}
#appView .dash-filterbar{flex-wrap:wrap!important}
#appView .dash-presets,#appView .dash-dates{min-width:0!important;flex-wrap:wrap!important}
#appView .dash-dates{margin-left:auto!important}
#appView .usdt-rate{max-width:min(560px,55vw)!important;min-width:0!important;overflow:hidden!important}
#appView .table-wrap{max-width:100%!important;overflow:auto!important}
@media(max-width:900px){#appView.app{grid-template-columns:210px minmax(0,1fr)!important}#appView .sidebar{width:210px!important;min-width:210px!important;max-width:210px!important}#appView .sidebar .brand{background-size:160px auto!important}#appView #page{padding:22px 18px 40px!important}}
@media(max-width:720px){#appView.app{display:block!important}#appView .content{width:100%!important}#appView .dash-dates{margin-left:0!important}}

/* Rupio dashboard continuity hotfix */
#appView .sidebar{position:sticky!important;top:0!important;align-self:start!important;height:100vh!important;min-height:100vh!important;overflow:hidden!important}
#appView .sidebar .nav{overflow-y:auto!important;min-height:0!important}
#appView .dash-workspace .empty{background:linear-gradient(145deg,#f8fbff,#f1f5fa)!important;border:1px dashed #cbd8e6!important;color:#6f8097!important;border-radius:18px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important}
#appView .dash-workspace .empty strong{color:#17233b!important}
#appView .dash-workspace .empty span{color:#8090a6!important}
@media(max-width:720px){#appView .sidebar{position:relative!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important}}

/* Rupio fixed sidebar hotfix */
@media(min-width:721px){
#appView .sidebar{position:fixed!important;left:0!important;top:0!important;bottom:0!important;height:100vh!important;min-height:100vh!important;z-index:50!important;display:flex!important;flex-direction:column!important}
#appView .sidebar .nav{flex:1 1 auto!important;overflow-y:auto!important}
#appView .content{grid-column:2!important;margin-left:0!important}
}

/* Rupio homepage experience v2 */
.home{background:#f7f9ff;color:#111d38}
.home .hnav{position:sticky!important;top:0!important;z-index:100!important;background:rgba(10,7,31,.94)!important;backdrop-filter:blur(18px)!important;border-bottom:1px solid rgba(255,255,255,.1)!important;box-shadow:0 10px 35px rgba(12,8,35,.16)!important}
.home .hnav .links a{color:#cbd5f5!important;font-weight:700!important;transition:.2s ease!important}
.home .hnav .links a:hover{color:#fff!important;transform:translateY(-1px)!important}
.home .hnav .actions .light{color:#fff!important;border-color:rgba(255,255,255,.5)!important;background:rgba(255,255,255,.06)!important}
.home .hero{position:relative!important;overflow:hidden!important;min-height:calc(100vh - 92px)!important;background:radial-gradient(circle at 76% 26%,rgba(111,77,255,.2),transparent 28%),radial-gradient(circle at 88% 78%,rgba(0,214,184,.12),transparent 25%),linear-gradient(135deg,#fbfcff 0%,#f5f7ff 48%,#eef2ff 100%)!important}
.home .hero:before{content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;background-image:linear-gradient(rgba(42,65,130,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(42,65,130,.045) 1px,transparent 1px)!important;background-size:42px 42px!important;mask-image:linear-gradient(to right,transparent 15%,#000 75%)!important}
.home .hero:after{content:"INDIA PAYMENT NETWORK"!important;position:absolute!important;right:5%!important;bottom:5%!important;font-size:12px!important;font-weight:900!important;letter-spacing:.24em!important;color:rgba(44,66,135,.35)!important}
.home .hero-in{position:relative!important;z-index:2!important;gap:72px!important}
.home .hero .eyebrow{background:linear-gradient(90deg,#e8ff67,#c9ff5c)!important;color:#16213d!important;border:1px solid rgba(92,115,24,.14)!important;box-shadow:0 9px 25px rgba(184,218,49,.2)!important}
.home .hero h1{max-width:760px!important;color:#101d55!important;background:linear-gradient(125deg,#102060 0%,#244bc1 62%,#6b36d9 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;letter-spacing:-.055em!important;text-wrap:balance!important}
.home .hero p{color:#526784!important;max-width:780px!important}
.home .hbtn.primary{background:linear-gradient(135deg,#275df2,#7547e8)!important;box-shadow:0 12px 28px rgba(50,79,220,.28)!important;border:0!important;transition:transform .2s ease,box-shadow .2s ease!important}
.home .hbtn.primary:hover{transform:translateY(-2px)!important;box-shadow:0 16px 34px rgba(50,79,220,.36)!important}
.home .hero .hbtn.light{background:rgba(255,255,255,.78)!important;border-color:#cbd5ea!important;color:#17223f!important;backdrop-filter:blur(10px)!important}
.home .trust{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
.home .trust span{background:rgba(255,255,255,.75)!important;border:1px solid #dce4f2!important;border-radius:999px!important;padding:9px 14px!important;color:#445672!important;box-shadow:0 8px 22px rgba(40,57,110,.07)!important}
.home .trust span:before{content:""!important;display:inline-grid!important;place-items:center!important;width:19px!important;height:19px!important;margin-right:7px!important;border-radius:50%!important;background:#dffbed!important;color:#0a9d67!important;font-size:12px!important;font-weight:900!important}
.home .console{position:relative!important;transform:rotate(-1deg)!important;background:linear-gradient(145deg,#0b1329,#151d3d 58%,#21175a)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 35px 70px rgba(30,34,84,.3),0 0 0 8px rgba(255,255,255,.42)!important}
.home .console:before{content:"SMART ROUTING ACTIVE"!important;position:absolute!important;right:-20px!important;top:-24px!important;padding:10px 14px!important;border-radius:12px!important;background:#dfff65!important;color:#17203d!important;font-size:11px!important;font-weight:900!important;letter-spacing:.1em!important;box-shadow:0 12px 25px rgba(51,61,30,.2)!important;transform:rotate(2deg)!important}
.home .console:after{content:"¹  Live settlement view"!important;position:absolute!important;left:-34px!important;bottom:-24px!important;padding:11px 16px!important;border-radius:14px!important;background:#fff!important;color:#263759!important;font-size:12px!important;font-weight:800!important;box-shadow:0 14px 32px rgba(30,46,92,.2)!important;transform:rotate(1deg)!important}
.home .console-top{color:#b7c4e7!important}
.home .screen{background:linear-gradient(145deg,#fff,#f5f7ff)!important}
.home .screen-head b{color:#17223e!important}
.home .mini>div{background:#fff!important;border:1px solid #e0e6f2!important;box-shadow:0 9px 22px rgba(33,51,99,.08)!important}
.home .mini small{color:#687a97!important}
.home .mini strong{color:#18254a!important}
.home .chart{border:1px solid #dbe4ff!important;background-color:#eef3ff!important;box-shadow:inset 0 1px 0 #fff!important}
.home .feature,.home .step{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}
.home .feature:hover,.home .step:hover{transform:translateY(-6px)!important;box-shadow:0 22px 45px rgba(29,43,91,.13)!important;border-color:#bdc9f5!important}
@media(max-width:900px){.home .hero{min-height:auto!important}.home .hero-in{gap:42px!important}.home .console:before{right:8px!important}.home .console:after{left:8px!important}.home .hero:after{display:none!important}}