/* TUNNEL GO User Dashboard UI */
.user-layout{min-height:100vh;display:grid;grid-template-columns:280px minmax(0,1fr)}
.user-sidebar{
  position:sticky;top:0;height:100vh;padding:18px 14px;
  border-right:1px solid var(--tg-line);
  background:linear-gradient(180deg,rgba(2,6,23,.82),rgba(15,23,42,.62));
  backdrop-filter:blur(18px);
}
.sidebar-head{padding:6px 8px 18px}
.sidebar-nav{display:grid;gap:7px;margin-top:8px}
.nav-item{
  display:flex;align-items:center;gap:10px;border-radius:17px;padding:12px 13px;
  color:#94a3b8;font-weight:900;font-size:14px;transition:.18s ease;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{
  color:#fff;background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(139,92,246,.18));
  border:1px solid rgba(56,189,248,.24);box-shadow:0 0 34px rgba(56,189,248,.08);
}
.nav-icon{width:22px;text-align:center;opacity:.95}
.sidebar-footer{position:absolute;left:14px;right:14px;bottom:16px}
.user-main{min-width:0;padding:18px 20px 96px}
.user-topbar{
  position:sticky;top:0;z-index:30;margin:-18px -20px 20px;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(5,8,22,.78);border-bottom:1px solid var(--tg-line);backdrop-filter:blur(16px);
}
.mobile-brand{display:none}
.topbar-actions{display:flex;align-items:center;gap:9px}
.page-title{margin:0;font-size:clamp(26px,4vw,44px);line-height:1.05;letter-spacing:-.065em}
.page-subtitle{margin:7px 0 0;color:var(--tg-muted);max-width:740px;line-height:1.7}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.balance-card{
  position:relative;overflow:hidden;padding:24px;
  background:
    radial-gradient(circle at 15% 10%,rgba(56,189,248,.26),transparent 32%),
    radial-gradient(circle at 90% 20%,rgba(168,85,247,.24),transparent 32%),
    linear-gradient(135deg,rgba(15,23,42,.95),rgba(30,27,75,.84));
  border:1px solid rgba(56,189,248,.2);
}
.balance-card::after{
  content:"";position:absolute;right:-50px;bottom:-70px;width:220px;height:220px;border-radius:999px;
  background:radial-gradient(circle,rgba(56,189,248,.18),transparent 60%);
}
.balance-label{position:relative;color:#bae6fd;font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:950}
.balance-value{position:relative;margin-top:10px;font-size:clamp(34px,5vw,56px);font-weight:1000;letter-spacing:-.07em}
.balance-meta{position:relative;color:#cbd5e1;margin-top:8px}
.quick-card{
  padding:22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;
  transition:.18s ease;position:relative;overflow:hidden;
}
.quick-card:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.28);box-shadow:var(--tg-glow)}
.quick-icon{font-size:30px;width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:rgba(56,189,248,.10);border:1px solid rgba(56,189,248,.18)}
.quick-card h3{font-size:22px;margin:16px 0 6px}
.quick-card p{margin:0;color:var(--tg-muted)}
.stat-card{padding:18px}
.stat-label{color:#94a3b8;font-size:11px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
.stat-value{margin-top:6px;font-size:26px;font-weight:1000;letter-spacing:-.06em}
.product-list{display:grid;gap:12px}
.product-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px;border:1px solid var(--tg-line);border-radius:20px;background:rgba(15,23,42,.48);
}
.product-main{min-width:0}
.product-title{font-weight:1000;letter-spacing:-.025em}
.product-meta{margin-top:4px;color:var(--tg-muted);font-size:13px;line-height:1.55;word-break:break-word}
.product-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.form-card{padding:22px}
.section-title{font-size:23px;margin:0;letter-spacing:-.05em}
.section-subtitle{margin:6px 0 0;color:var(--tg-muted)}
.summary-box{
  margin-top:16px;padding:16px;border-radius:20px;border:1px solid rgba(56,189,248,.20);
  background:linear-gradient(135deg,rgba(56,189,248,.08),rgba(139,92,246,.08));
}
.summary-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;color:#cbd5e1}
.summary-row strong{color:#fff}
.summary-row.total{border-top:1px solid var(--tg-line);margin-top:6px;padding-top:12px;font-size:18px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.tab{border:1px solid var(--tg-line);background:rgba(15,23,42,.55);color:#cbd5e1;border-radius:999px;padding:10px 13px;font-weight:900;font-size:13px}
.tab.active{background:linear-gradient(135deg,var(--tg-blue),var(--tg-violet));border-color:transparent;color:#fff}
.payment-box{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:center}
.qris-box{background:#fff;border-radius:22px;padding:14px}
.qris-box img{border-radius:14px;width:100%;height:auto}
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:rgba(2,6,23,.88);border-top:1px solid var(--tg-line);backdrop-filter:blur(16px);
  padding:7px 8px calc(7px + env(safe-area-inset-bottom));
}
.bottom-nav a{
  min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:#94a3b8;font-size:10px;font-weight:850;border-radius:14px;padding:7px 5px;
}
.bottom-nav a.active{color:#fff;background:rgba(56,189,248,.10)}
.bottom-nav span{font-size:18px}
@media(max-width:1040px){
  .user-layout{grid-template-columns:1fr}
  .user-sidebar{display:none}
  .mobile-brand{display:flex}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr)}
  .grid,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .user-main{padding:14px 14px 104px}
  .user-topbar{margin:-14px -14px 18px;padding:13px 14px}
  .topbar-actions .btn-soft{display:none}
  .page-head{display:block}
  .grid,.grid2,.grid4{grid-template-columns:1fr}
  .balance-card{padding:20px}
  .product-row{display:grid}
  .product-actions{justify-content:stretch}
  .product-actions .btn{width:100%}
  .payment-box{grid-template-columns:1fr}
}


/* === HOTFIX 2026-05: dashboard scroll background + mobile drawer + no bottom nav === */
html, body {
  min-height: 100%;
  background: #050816 !important;
  overscroll-behavior-y: none;
}
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(56,189,248,.12), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(139,92,246,.14), transparent 28rem),
    linear-gradient(180deg,#050816 0%,#07111f 52%,#050816 100%) !important;
}
.user-layout {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% -10%, rgba(56,189,248,.10), transparent 28rem),
    linear-gradient(180deg, rgba(5,8,22,.98), rgba(7,17,31,.98));
}
.user-main {
  min-height: 100svh;
  background: transparent;
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}
.bottom-nav { display: none !important; }
.mobile-menu-btn { display:none; }
.user-drawer {
  position:fixed; inset:0; z-index:9999; display:flex; justify-content:flex-start;
}
.user-drawer-bg { position:absolute; inset:0; background:rgba(2,6,23,.72); backdrop-filter:blur(10px); }
.user-drawer-panel {
  position:relative; width:min(86vw,340px); min-height:100%; padding:20px 16px;
  background:linear-gradient(180deg,#07111f,#050816);
  border-right:1px solid var(--tg-line); box-shadow:0 28px 90px rgba(0,0,0,.4);
}
.user-drawer-panel .sidebar-nav { margin-top:18px; }
.protocol-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.protocol-card {
  border:1px solid var(--tg-line); background:rgba(15,23,42,.55); color:#cbd5e1;
  border-radius:18px; padding:13px 10px; font-weight:950; text-align:center;
}
.protocol-card.active {
  color:#fff; border-color:rgba(56,189,248,.44);
  background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(139,92,246,.18));
}
.vpn-modal-summary {
  margin-top:14px; border:1px solid var(--tg-line); border-radius:20px; padding:14px;
  background:rgba(15,23,42,.45);
}
@media(max-width:1040px){
  .mobile-menu-btn { display:inline-flex; }
  .user-main { padding-bottom: 34px; }
}
@media(max-width:760px){
  .user-main { padding-bottom: 34px; }
  .topbar-actions .mobile-menu-btn { display:inline-flex; }
  .topbar-actions .badge { display:none; }
  .protocol-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}