:root{
  --bg:#0F0B1F;
  --bg-soft:#151027;
  --card:#1B1730;
  --card-border:#2C2650;
  --indigo:#6366F1;
  --indigo-deep:#4F46E5;
  --violet:#8B5CF6;
  --text:#F3F1FA;
  --text-dim:#A79FC9;
  --text-faint:#6C6494;
  --success:#22C55E;
  --success-bg:rgba(34,197,94,0.12);
  --warn:#F59E0B;
  --warn-bg:rgba(245,158,11,0.12);
  --danger:#F87171;
  --danger-bg:rgba(248,113,113,0.12);
}
*{box-sizing:border-box;}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 800px 500px at 15% -10%, rgba(99,102,241,0.20), transparent),
    radial-gradient(ellipse 600px 400px at 100% 10%, rgba(139,92,246,0.15), transparent);
  color:var(--text);
  font-family:'Inter', sans-serif;
  margin:0;
}
.mono{font-family:'JetBrains Mono', 'Noto Sans', 'Segoe UI', Roboto, sans-serif, monospace;}
.display{font-family:'Space Grotesk', sans-serif;}

/* Layout */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:220px; flex-shrink:0;
  background:var(--bg-soft);
  border-right:1px solid var(--card-border);
  padding:24px 16px;
  display:flex; flex-direction:column; gap:28px;
}
.main{flex:1; padding:28px 36px; min-width:0;}

/* Logo */
.logo{display:flex; align-items:center; gap:10px; padding:0 8px;}
.logo-mark{
  width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg, var(--indigo), var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px;
  box-shadow:0 4px 14px rgba(99,102,241,0.4);
}
.logo-text{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px;}
.logo-text span{color:var(--violet);}

/* Nav */
.nav-group{display:flex; flex-direction:column; gap:2px;}
.nav-label{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); padding:0 12px; margin-bottom:6px; font-weight:600;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:8px;
  font-size:13.5px; color:var(--text-dim);
  text-decoration:none; cursor:pointer;
  transition:all .15s;
}
.nav-item:hover{background:rgba(255,255,255,0.04); color:var(--text);}
.nav-item.active{
  background:linear-gradient(90deg, rgba(99,102,241,0.18), rgba(139,92,246,0.06));
  color:var(--text); border-left:2px solid var(--indigo);
  padding-left:10px; font-weight:500;
}
.nav-dot{width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex-shrink:0;}
.nav-item.active .nav-dot{background:var(--indigo); box-shadow:0 0 8px var(--indigo);}

/* Topbar */
.topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; flex-wrap:wrap; gap:14px;}
.greeting{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600;}
.greeting-sub{font-size:13px; color:var(--text-dim); margin-top:4px;}
.user-chip{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--card-border); padding:8px 14px 8px 8px; border-radius:100px;}
.user-avatar{width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--indigo),var(--violet)); display:flex;align-items:center;justify-content:center; font-size:12px; font-weight:600;}
.logout-btn{background:none; border:none; color:var(--text-dim); font-size:13px; cursor:pointer; margin-left:4px;}
.logout-btn:hover{color:var(--danger);}

/* Cards & Grid */
.grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:16px;}
.stat-card{background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:18px;}
.stat-top{display:flex; justify-content:space-between; align-items:flex-start;}
.stat-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px;}
.stat-label{font-size:12px; color:var(--text-dim); margin-top:12px;}
.stat-value{font-family:'JetBrains Mono', 'Noto Sans', 'Segoe UI', Roboto, sans-serif, monospace; font-size:20px; font-weight:600; margin-top:4px;}
.stat-delta{font-size:11px; margin-top:6px; display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:6px;}
.up{color:var(--success); background:var(--success-bg);}
.warn-badge{color:var(--warn); background:var(--warn-bg);}

.section-head{display:flex; justify-content:space-between; align-items:center; margin:26px 0 14px;}
.section-title{font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:600;}
.section-link{font-size:12.5px; color:var(--indigo); cursor:pointer; text-decoration:none; font-weight:500;}

.two-col{display:grid; grid-template-columns:1.6fr 1fr; gap:16px;}

.tx-card{background:var(--card); border:1px solid var(--card-border); border-radius:14px; overflow:hidden;}
.tx-row{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--card-border);}
.tx-row:last-child{border-bottom:none;}
.tx-left{display:flex; align-items:center; gap:12px;}
.tx-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.tx-name{font-size:13.5px; font-weight:500;}
.tx-id{font-size:11px; color:var(--text-faint); font-family:'JetBrains Mono', 'Noto Sans', 'Segoe UI', Roboto, sans-serif, monospace; margin-top:2px;}
.tx-amount{font-family:'JetBrains Mono', 'Noto Sans', 'Segoe UI', Roboto, sans-serif, monospace; font-size:13.5px; font-weight:600;}
.tx-time{font-size:11px; color:var(--text-faint); text-align:right; margin-top:2px;}

.empty-row{padding:24px 18px; text-align:center; color:var(--text-faint); font-size:13px;}

/* Login page */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:100%; max-width:380px; background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:32px 28px;}
.login-title{font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600; text-align:center;}
.login-sub{font-size:12.5px; color:var(--text-dim); text-align:center; margin-top:6px; margin-bottom:24px;}
.form-group{margin-bottom:16px;}
.form-label{font-size:12.5px; color:var(--text-dim); display:block; margin-bottom:6px; font-weight:500;}
.form-input{
  width:100%; background:var(--bg-soft); border:1px solid var(--card-border);
  border-radius:9px; padding:11px 13px; color:var(--text); font-size:13.5px;
  font-family:'Inter',sans-serif;
}
.form-input:focus{outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,0.15);}
.form-error{color:var(--danger); font-size:12px; margin-top:5px;}
.form-check{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); margin-bottom:20px;}
.alert-error{background:var(--danger-bg); border:1px solid rgba(248,113,113,0.3); color:#FCA5A5; font-size:12.5px; padding:10px 13px; border-radius:9px; margin-bottom:16px;}
.alert-success{background:var(--success-bg); border:1px solid rgba(34,197,94,0.3); color:#86EFAC; font-size:12.5px; padding:10px 13px; border-radius:9px; margin-bottom:16px;}

.btn{border:none; border-radius:9px; padding:11px 16px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; width:100%;}
.btn-primary{background:linear-gradient(135deg, var(--indigo-deep), var(--violet)); color:#fff;}
.btn-primary:hover{opacity:0.92;}

/* Wallet hero card (user dashboard) */
.wallet-card{
  grid-column:span 2;
  background:linear-gradient(135deg, #4338CA 0%, #6D28D9 55%, #7C3AED 100%);
  border-radius:16px; padding:24px 26px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; min-height:150px;
}
.wallet-card::before{
  content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
}
.wallet-label{font-size:12px; color:rgba(255,255,255,0.75); letter-spacing:0.04em; text-transform:uppercase; font-weight:600;}
.wallet-balance{font-family:'JetBrains Mono', 'Noto Sans', 'Segoe UI', Roboto, sans-serif, monospace; font-size:34px; font-weight:600; margin-top:6px; letter-spacing:-0.5px; color:#fff;}
.wallet-actions{display:flex; gap:10px; margin-top:16px;}
.btn-inline{border:none; border-radius:9px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; text-decoration:none; display:inline-block;}
.btn-white{background:rgba(255,255,255,0.95); color:#4338CA;}
.btn-ghost{background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.25);}

/* Services grid (ID-card motif) */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.service-card{background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:16px 17px; position:relative; overflow:hidden; transition:border-color .15s; text-decoration:none; color:var(--text); display:block;}
.service-card:hover{border-color:var(--indigo);}
.service-chip{width:100%; height:6px; border-radius:3px; background:linear-gradient(90deg, rgba(99,102,241,0.5), rgba(139,92,246,0.15)); margin-bottom:14px;}
.service-top{display:flex; justify-content:space-between; align-items:flex-start;}
.service-icon{font-size:18px; width:36px; height:36px; border-radius:9px; background:rgba(99,102,241,0.14); display:flex; align-items:center; justify-content:center;}
.service-status{font-size:10px; font-weight:600; padding:2px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:0.03em;}
.status-live{background:var(--success-bg); color:var(--success);}
.service-name{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-top:12px;}
.service-desc{font-size:12px; color:var(--text-dim); margin-top:3px; line-height:1.4;}
.service-price{font-family:'JetBrains Mono', 'Noto Sans', 'Segoe UI', Roboto, sans-serif, monospace; font-size:13px; color:var(--text-dim); margin-top:12px; padding-top:12px; border-top:1px dashed var(--card-border);}
.service-price b{color:var(--text); font-weight:600;}

/* Mobile hamburger + drawer sidebar */
.mobile-menu-btn{
  display:none;
  background:var(--card); border:1px solid var(--card-border);
  color:var(--text); width:38px; height:38px; border-radius:9px;
  font-size:18px; align-items:center; justify-content:center; cursor:pointer;
  flex-shrink:0;
}
.sidebar-backdrop{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:40;
}
.sidebar-backdrop.open{ display:block; }

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .main{padding:16px;}
  .wallet-card{grid-column:span 2;}

  .mobile-menu-btn{ display:flex; }

  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:50;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:0 0 30px rgba(0,0,0,0.5);
    overflow-y:auto;
  }
  .sidebar.open{ transform:translateX(0); }

  .topbar{ align-items:center; }
  .topbar-left{ display:flex; align-items:center; gap:12px; }
}