/* TUNNEL GO Dashboard Navigation - Stage 6 */
:root{
  --tg5-bg:#050816;
  --tg5-bg2:#07111f;
  --tg5-panel:rgba(8,15,30,.96);
  --tg5-panel2:rgba(15,23,42,.88);
  --tg5-line:rgba(148,163,184,.16);
  --tg5-line-strong:rgba(56,189,248,.30);
  --tg5-text:#f8fafc;
  --tg5-muted:#9aa8bd;
  --tg5-cyan:#38bdf8;
  --tg5-violet:#8b5cf6;
  --tg5-sidebar:292px;
  --tg5-radius:24px;
  --tg5-shadow:0 22px 70px rgba(0,0,0,.32);
}
html{background:var(--tg5-bg)!important;}
body.is-user-page,
body:has(.user-layout),
body:has(.tg-layout){
  min-height:100vh!important;
  color:var(--tg5-text)!important;
  background:
    radial-gradient(circle at 0 0,rgba(56,189,248,.14),transparent 34rem),
    radial-gradient(circle at 100% 4%,rgba(139,92,246,.16),transparent 34rem),
    linear-gradient(180deg,#050816 0%,#07111f 50%,#020617 100%)!important;
}
.user-layout,.tg-layout{
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:var(--tg5-sidebar) minmax(0,1fr)!important;
  background:transparent!important;
}
.user-main,.tg-main{
  min-width:0!important;
  min-height:100vh!important;
  padding:0 24px 38px!important;
  background:transparent!important;
}
.user-main>*,.tg-main>*{max-width:1280px;margin-left:auto;margin-right:auto;}
.user-topbar,.tg-topbar,.tg-unified-header,[data-tg-header]{
  position:sticky!important;
  top:0!important;
  z-index:900!important;
  min-height:72px!important;
  max-width:none!important;
  margin:0 -24px 22px!important;
  padding:12px 24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  border-bottom:1px solid var(--tg5-line)!important;
  background:rgba(2,8,23,.88)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22)!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
.tg-menu-button{
  flex:0 0 auto!important;
  width:48px!important;
  min-width:48px!important;
  height:46px!important;
  min-height:46px!important;
  padding:0!important;
  border-radius:18px!important;
  border:1px solid rgba(56,189,248,.34)!important;
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.82))!important;
  color:#f8fafc!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.18)!important;
}
.tg-menu-button svg{width:20px!important;height:20px!important;display:block!important;}
.tg-menu-copy{display:none!important;}
.tg-menu-button:hover,.tg-menu-button:focus-visible{
  border-color:rgba(56,189,248,.62)!important;
  background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(139,92,246,.16))!important;
  outline:none!important;
}
.tg-header-brand{margin-left:auto!important;justify-content:flex-end!important;text-align:right!important;}
.tg-brand{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  min-width:0!important;
  color:#fff!important;
  text-decoration:none!important;
}
.tg-logo{
  width:50px!important;
  height:50px!important;
  flex:0 0 50px!important;
  border-radius:20px!important;
  display:grid!important;
  place-items:center!important;
  font-size:14px!important;
  font-weight:1000!important;
  color:#fff!important;
  background:linear-gradient(135deg,#0f172a,#1e1b4b 48%,#7c3aed 76%,#22d3ee)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 46px rgba(56,189,248,.14),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.tg-brand-text{min-width:0!important;display:block!important;}
.tg-brand-title{display:block!important;font-size:15px!important;font-weight:1000!important;letter-spacing:.20em!important;line-height:1.04!important;color:#fff!important;white-space:nowrap!important;}
.tg-brand-sub{display:block!important;margin-top:7px!important;font-size:10px!important;font-weight:900!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#a8b3c7!important;white-space:nowrap!important;}
.user-sidebar,.tg-sidebar,#tgUnifiedNav{
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  min-height:100vh!important;
  z-index:950!important;
  overflow:auto!important;
  padding:24px 18px!important;
  border-right:1px solid var(--tg5-line)!important;
  background:linear-gradient(180deg,rgba(2,8,23,.98),rgba(9,17,31,.94))!important;
  box-shadow:18px 0 58px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
  transform:translate3d(0,0,0)!important;
  transition:transform .16s ease,opacity .16s ease!important;
  will-change:transform!important;
}
.sidebar-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:4px 0 20px!important;
  margin:0 0 16px!important;
  border-bottom:1px solid rgba(148,163,184,.10)!important;
}
.tg-sidebar-close{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  border:1px solid rgba(148,163,184,.18)!important;
  border-radius:15px!important;
  background:rgba(15,23,42,.62)!important;
  color:#cbd5e1!important;
  display:none!important;
  place-items:center!important;
  cursor:pointer!important;
}
.tg-sidebar-close svg{width:18px!important;height:18px!important;}
.sidebar-nav,.tg-nav{
  display:grid!important;
  gap:9px!important;
  margin-top:0!important;
}
.sidebar-nav .nav-item,.tg-nav .nav-item,.tg-nav a{
  position:relative!important;
  min-height:52px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding:12px 13px!important;
  border-radius:18px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#a8b3c7!important;
  text-decoration:none!important;
  text-align:left!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1.2!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease!important;
}
.sidebar-nav .nav-item:hover,.tg-nav .nav-item:hover,.tg-nav a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(148,163,184,.13)!important;
}
.sidebar-nav .nav-item.active,.tg-nav .nav-item.active,.tg-nav a.active{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(139,92,246,.17))!important;
  border-color:rgba(56,189,248,.25)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.14)!important;
}
.nav-icon{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  background:rgba(148,163,184,.09)!important;
  color:#cbd5e1!important;
}
.nav-icon svg{width:17px!important;height:17px!important;display:block!important;}
.nav-item.active .nav-icon{background:rgba(56,189,248,.17)!important;color:#e0f7ff!important;}
.nav-label{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.nav-logout{margin-top:10px!important;border-color:rgba(248,113,113,.18)!important;color:#fecaca!important;}
.nav-logout .nav-icon{background:rgba(248,113,113,.10)!important;color:#fecaca!important;}
.user-sidebar-backdrop,#tgDashboardBackdrop,#tgUnifiedBackdrop{
  position:fixed!important;
  inset:0!important;
  z-index:930!important;
  display:none!important;
  background:rgba(2,6,23,.68)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
body.user-menu-open{overflow:hidden!important;}
body.user-menu-open .user-sidebar-backdrop,body.user-menu-open #tgDashboardBackdrop,body.user-menu-open #tgUnifiedBackdrop{display:block!important;}
body.user-sidebar-collapsed .user-layout,body.user-sidebar-collapsed .tg-layout{grid-template-columns:0 minmax(0,1fr)!important;}
body.user-sidebar-collapsed .user-sidebar,body.user-sidebar-collapsed .tg-sidebar,body.user-sidebar-collapsed #tgUnifiedNav{transform:translate3d(-104%,0,0)!important;opacity:0!important;pointer-events:none!important;}
.user-bottom-nav,.bottom-nav,.mobile-bottom-nav,.bottom-menu,[data-bottom-nav]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
.vpn-drawer,#mobileDrawer,#drawer,.drawer:not(#tgUnifiedNav),.vpn-drawer-panel,.drawer-panel{display:none!important;visibility:hidden!important;pointer-events:none!important;}
.topbar-actions,.user-topbar .actions,.tg-topbar .actions,.user-topbar [data-user-role],.user-topbar [data-refresh],.user-topbar a[href*="topup"]:not(.tg-brand){display:none!important;}
.page-head,.vpn-page-head,.security-hero,.ppob-hero,.smm-hero{margin-top:0!important;padding-top:10px!important;}
.card,.stat-card,.vpn-filter-card,.ppob-stepper,.ppob-order-panel,.smm-card,.security-tabs{border-color:var(--tg5-line)!important;box-shadow:var(--tg5-shadow)!important;}
@media(max-width:1040px){
  .user-layout,.tg-layout{display:block!important;}
  .user-main,.tg-main{padding:0 16px 30px!important;}
  .user-topbar,.tg-topbar,.tg-unified-header,[data-tg-header]{margin:0 -16px 18px!important;padding:10px 16px!important;min-height:66px!important;}
  .tg-menu-button{min-width:48px!important;width:48px!important;height:46px!important;padding:0!important;border-radius:16px!important;}
  .tg-menu-copy{display:none!important;}
  .tg-logo{width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:17px!important;}
  .tg-brand-title{font-size:13px!important;letter-spacing:.17em!important;}
  .tg-brand-sub{font-size:9px!important;letter-spacing:.14em!important;margin-top:6px!important;}
  .user-sidebar,.tg-sidebar,#tgUnifiedNav{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(340px,86vw)!important;
    max-width:86vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    transform:translate3d(-104%,0,0)!important;
    opacity:1!important;
    pointer-events:none!important;
    z-index:960!important;
    padding:20px 16px!important;
  }
  body.user-menu-open .user-sidebar,body.user-menu-open .tg-sidebar,body.user-menu-open #tgUnifiedNav,
  body.menu-open .user-sidebar,body.menu-open .tg-sidebar,body.menu-open #tgUnifiedNav,
  body.tg-menu-open .user-sidebar,body.tg-menu-open .tg-sidebar,body.tg-menu-open #tgUnifiedNav{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
    visibility:visible!important;
    display:block!important;
  }
  body.user-sidebar-collapsed .user-sidebar,body.user-sidebar-collapsed .tg-sidebar,body.user-sidebar-collapsed #tgUnifiedNav{opacity:1!important;}
  .tg-sidebar-close{display:grid!important;}
  .sidebar-nav .nav-item,.tg-nav .nav-item,.tg-nav a{min-height:54px!important;font-size:15px!important;}
}
@media(max-width:760px){
  .user-main,.tg-main{padding-left:14px!important;padding-right:14px!important;}
  .user-topbar,.tg-topbar,.tg-unified-header,[data-tg-header]{margin-left:-14px!important;margin-right:-14px!important;padding-left:14px!important;padding-right:14px!important;}
  .tg-brand{gap:10px!important;}
  .tg-logo{width:42px!important;height:42px!important;flex-basis:42px!important;}
  .tg-brand-title{font-size:12px!important;letter-spacing:.14em!important;}
  .tg-brand-sub{font-size:8.5px!important;letter-spacing:.12em!important;}
  .page-title,.vpn-title{font-size:clamp(28px,8vw,38px)!important;letter-spacing:-.06em!important;}
  .grid,.grid2,.grid4,.vpn-status-row,.dashboard-menu-grid{grid-template-columns:1fr!important;}
}
@media(prefers-reduced-motion:reduce){
  .user-sidebar,.tg-sidebar,#tgUnifiedNav,.sidebar-nav .nav-item,.tg-menu-button{transition:none!important;}
}