:root{
  --bg:#0a0e17;
  --bg-2:#0d1220;
  --panel:#11172a;
  --panel-2:#161d33;
  --border:#232c47;
  --border-soft:#1a2138;
  --text:#eef1f8;
  --muted:#8891ac;
  --copper:#3b6df0;        /* primary accent (kept var name for compatibility) */
  --copper-bright:#5b8cff; /* primary accent, brighter */
  --amber:#f0a93b;
  --green:#22c17a;
  --red:#ef5b5b;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-sm:0 4px 14px -6px rgba(0,0,0,.4);
}
*{box-sizing:border-box;}
::selection{background:var(--copper);color:#fff;}
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(59,109,240,.16) 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(34,193,122,.08) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif;}
h2{font-size:21px;letter-spacing:-.2px;}
p{line-height:1.55;}
a{color:var(--copper-bright);text-decoration:none;}
a:hover{color:var(--text);}
.wrap{max-width:480px;margin:0 auto;padding:28px 18px 60px;}
.wrap-wide{max-width:920px;margin:0 auto;padding:28px 18px 60px;}

/* ---------------------------------------------------------------
   Top navigation
   --------------------------------------------------------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 22px;border-bottom:1px solid var(--border-soft);
  background:rgba(13,18,32,.78);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:10;
}
.topbar .brand{
  font-weight:700;font-size:18px;letter-spacing:.2px;
  display:flex;align-items:center;gap:9px;
}
.topbar .brand .logo-mark{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--copper),var(--green));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px -4px rgba(59,109,240,.6);
}
.topbar .brand .logo-mark svg{width:16px;height:16px;color:#fff;}
.topbar .brand-text{
  background:linear-gradient(90deg,var(--text),var(--copper-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.topbar nav{display:flex;align-items:center;}
.topbar nav a{
  color:var(--muted);margin-left:4px;font-size:13.5px;font-weight:500;
  padding:8px 12px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s, color .15s;
}
.topbar nav a svg{width:15px;height:15px;opacity:.85;flex:0 0 auto;}
.topbar nav a:hover{color:var(--text);background:rgba(255,255,255,.05);}
.topbar nav a.active{color:#fff;background:linear-gradient(90deg,var(--copper),var(--copper-bright));box-shadow:var(--shadow-sm);}
.topbar nav a.nav-logout{color:var(--red);}
.topbar nav a.nav-logout:hover{background:rgba(239,91,91,.12);}

/* ---------------------------------------------------------------
   Cards / surfaces
   --------------------------------------------------------------- */
.card{
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  position:relative;
}
.card h2{margin:0 0 4px;font-size:19px;}
.card + .card{margin-top:0;}
.muted{color:var(--muted);font-size:13px;}

.page-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.page-header h2{margin:0;}
.page-header .muted{margin-top:2px;}
.page-eyebrow{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--copper-bright);
  background:rgba(59,109,240,.12);border:1px solid rgba(59,109,240,.25);
  padding:4px 10px;border-radius:20px;margin-bottom:8px;
}

.amount-display{
  font-family:'Space Grotesk',sans-serif;
  font-size:38px;font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(90deg,var(--copper-bright),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:6px 0 2px;
}

.method-box{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 16px;margin:14px 0;
}
.method-box .num{font-size:18px;font-weight:600;letter-spacing:.4px;font-family:'Space Grotesk',sans-serif;}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  border:1px solid transparent;
}
.badge-bkash{background:#e2136e1c;color:#ff5aa0;border-color:#e2136e33;}
.badge-nagad{background:#f7941e1c;color:#ffb15c;border-color:#f7941e33;}
.badge-rocket{background:#5c2d911c;color:#b98aff;border-color:#5c2d9133;}
.badge-upay{background:#00a99d1c;color:#3ddcce;border-color:#00a99d33;}
.badge-mcash{background:#1e88e51c;color:#6cb3f7;border-color:#1e88e533;}
.badge-any{background:#ffffff12;color:var(--muted);border-color:var(--border);}
.badge-paid{background:#22c17a1c;color:var(--green);border-color:#22c17a3a;}
.badge-pending{background:#f0a93b1c;color:var(--amber);border-color:#f0a93b3a;}
.badge-expired,.badge-cancelled{background:#ef5b5b1c;color:var(--red);border-color:#ef5b5b3a;}

/* ---------------------------------------------------------------
   Forms
   --------------------------------------------------------------- */
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px;font-weight:600;letter-spacing:.1px;}
input[type=text],input[type=number],input[type=password],input[type=url],input[type=email],select,textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-2);color:var(--text);
  font-size:15px;font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#5b6483;}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(59,109,240,.18);
}

button,.btn{
  display:inline-block;border:none;cursor:pointer;
  background:linear-gradient(90deg,var(--copper),var(--copper-bright));
  color:#fff;font-weight:700;font-size:15px;
  padding:13px 20px;border-radius:var(--radius-sm);width:100%;text-align:center;
  box-shadow:0 8px 20px -8px rgba(59,109,240,.55);
  transition:transform .1s ease, opacity .2s, box-shadow .2s;
}
button:hover,.btn:hover{opacity:.94;box-shadow:0 10px 24px -8px rgba(59,109,240,.65);}
button:active{transform:scale(.98);}
.btn-secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border);box-shadow:none;}
.btn-secondary:hover{background:var(--bg-2);}
.btn-danger{background:linear-gradient(90deg,#b6453f,var(--red));box-shadow:0 8px 20px -8px rgba(239,91,91,.5);}
.btn-block{width:100%;margin-top:8px;}
.btn-sm{width:auto;padding:8px 14px;font-size:13px;border-radius:8px;}

/* ---------------------------------------------------------------
   Tables
   --------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{padding:11px 12px;border-bottom:1px solid var(--border-soft);text-align:left;}
th{color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;}
tbody tr{transition:background .12s;}
tr:hover td{background:rgba(255,255,255,.025);}

.alert{padding:13px 15px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px;border:1px solid transparent;display:flex;align-items:flex-start;gap:8px;}
.alert-error{background:#ef5b5b14;color:#ff9490;border-color:#ef5b5b3d;}
.alert-success{background:#22c17a14;color:#7fe0a8;border-color:#22c17a3d;}
.alert-info{background:#3b6df014;color:#9db8ff;border-color:#3b6df03d;}

.center{text-align:center;}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px;}
.stat-box{
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);border-radius:var(--radius);padding:17px;
  box-shadow:var(--shadow-sm);
}
.stat-box .num{font-size:23px;font-weight:700;font-family:'Space Grotesk',sans-serif;letter-spacing:-.3px;}
.stat-box .lbl{font-size:12px;color:var(--muted);margin-top:3px;font-weight:500;}

.copy-row{display:flex;gap:8px;}
.copy-row input{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;}
.copy-row button{width:auto;padding:12px 16px;}

.spinner{width:16px;height:16px;border:2px solid #ffffff44;border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}

.footer-note{text-align:center;color:var(--muted);font-size:12px;margin-top:24px;}

/* ---------------------------------------------------------------
   Login screen
   --------------------------------------------------------------- */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{
  width:100%;max-width:380px;
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);border-radius:18px;
  padding:34px 30px 30px;box-shadow:var(--shadow);
  text-align:center;
}
.login-logo{
  width:54px;height:54px;border-radius:15px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--copper),var(--green));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(59,109,240,.65);
}
.login-logo svg{width:28px;height:28px;color:#fff;}
.login-card h2{margin:0 0 4px;font-size:21px;}
.login-card .muted{margin-bottom:22px;}
.login-card form{text-align:left;}
.login-card label{margin-top:16px;}
.login-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:22px;}

/* ---------------------------------------------------------------
   Responsive: admin panel usable on phones AND makes good use of
   space on PC/desktop screens.
   --------------------------------------------------------------- */
@media (max-width:700px){
  .topbar{ flex-wrap:wrap; row-gap:10px; padding:12px 14px; }
  .topbar .brand{ font-size:16px; }
  .topbar nav{
    display:flex; width:100%; gap:2px; overflow-x:auto;
    -webkit-overflow-scrolling:touch; padding-bottom:2px;
  }
  .topbar nav a{ margin-left:0; flex:0 0 auto; font-size:12.5px; padding:7px 10px; }

  table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }

  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .card{ padding:18px; }
  .page-header{ align-items:flex-start; }
}

/* Wider PC/desktop screens: let the dashboard stat cards and content
   use the extra horizontal space instead of staying cramped/narrow. */
@media (min-width:900px){
  .wrap-wide{ max-width:1100px; }
  .stat-grid{ grid-template-columns:repeat(4,1fr); }
}