*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07051a;--bg2:#0d0b20;--bg3:#12102a;--bg4:#1a1738;
  --panel:#0f0d24;--border:#252060;--brd2:#352a70;
  --acc:#7c3aed;--acc2:#a78bfa;--acc3:rgba(124,58,237,.22);
  --teal:#0e9488;--red:#e11d48;--logo:#c026d3;
  --adbg:#3b5bdb;--adbd:#2d4abf;--gen:#e91e8c;
  --tx:#e2d9f3;--tx2:#a78bfa;--tx3:#8a7ab0;--tx4:#4a3f7a;--tx5:#2d1f6e;
  --grn:#16a34a;--amb:#d97706;
  --glow:rgba(124,58,237,.45);
  --font:'Inter',sans-serif;
  --radius:10px;
}
body{font-family:var(--font);background:var(--bg);color:var(--tx);height:100vh;overflow:hidden;font-size:13px}
*::-webkit-scrollbar{width:4px}*::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}*::-webkit-scrollbar-track{background:transparent}
a{color:var(--acc2);text-decoration:none}
option{background:var(--panel);color:var(--tx)}

body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%,rgba(124,58,237,.12) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%,rgba(14,148,136,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 50%,rgba(192,38,211,.06) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:bgPulse 8s ease-in-out infinite alternate;
}
@keyframes bgPulse{
  0%{opacity:.7}
  50%{opacity:1}
  100%{opacity:.6}
}
#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh}

/* TOP BAR */
#top{
  display:grid;
  grid-template-columns: 162px 1fr 120px; /* 162px exactly matches the sidebar below it */
  height:50px;
  border-bottom:1.5px solid var(--border);
  flex-shrink:0;
  background:rgba(7,5,26,.85);
  backdrop-filter:blur(20px);
}
.tlogo{
  background:linear-gradient(135deg,#7c3aed,#c026d3);
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  position:relative;overflow:hidden;transition:filter .2s;
}
.tlogo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:translateX(-100%);transition:transform .5s}
.tlogo:hover::after{transform:translateX(100%)}
.tlogo:hover{filter:brightness(1.15)}
.tlogo-icon{font-size:18px;color:#fff;animation:iconFloat 3s ease-in-out infinite}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.tlogo-txt{color:#fff;font-weight:800;font-size:14px;letter-spacing:.8px}
.tlogo-txt em{color:#f9a8d4;font-style:normal}
.tad{
  background:linear-gradient(90deg,#3b5bdb,#1d4ed8);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;position:relative;overflow:hidden;
}
.tad-badge{position:absolute;top:3px;left:9px;font-size:7px;color:#a5b4fc;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.tad-dot{width:6px;height:6px;border-radius:50%;background:#f59e0b;flex-shrink:0;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 8px #f59e0b}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.6)}}
.tad-txt{font-size:11px;color:#fff;font-weight:500}
.tlogin{
  background:linear-gradient(135deg,#3b5bdb,#2d4abf);
  border-left:1.5px solid var(--adbd);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 10px;
  transition:filter .2s;
}
.tlogin:hover{filter:brightness(1.15)}
.tlogin span{color:#fff;font-size:11px;font-weight:600;text-align:center}

/* BODY */
#body{display:grid;grid-template-columns:162px 1fr 176px;flex:1;overflow:hidden}

/* LEFT SIDEBAR */
#lsb{
  background:rgba(15,13,36,.95);backdrop-filter:blur(20px);
  border-right:1.5px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
.nav-section{padding:10px 0;flex-shrink:0}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 14px;
  font-size:12px;color:var(--tx3);cursor:pointer;
  transition:all .2s;border-right:2.5px solid transparent;
  user-select:none;position:relative;border-radius:0;
}
.nav-item i{font-size:18px;flex-shrink:0;width:20px;text-align:center;transition:transform .2s}
.nav-item:hover{background:var(--bg3);color:var(--acc2)}
.nav-item:hover i{transform:scale(1.15)}
.nav-item.on{background:var(--bg4);color:var(--acc2);border-right-color:var(--acc)}
.nav-item.on::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,transparent,var(--acc),transparent);
  border-radius:2px;
}
.divider{border:none;border-top:1px solid var(--border);margin:4px 0;flex-shrink:0}

.sb-vc{
  margin:8px;border-radius:var(--radius);padding:10px 12px;
  display:flex;align-items:center;gap:9px;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,#0e9488,#0d6e88);
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 15px rgba(14,148,136,.25);
}
.sb-vc:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(14,148,136,.4)}
.sb-av{
  width:28px;height:28px;border-radius:50%;
  background:var(--red);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.sb-vname{font-size:11px;color:#fff;font-weight:700}
.sb-vlang{font-size:8px;color:#99f6e4;margin-top:1px}

.sb-sliders{padding:8px 14px;flex-shrink:0}
.sl-row{margin-bottom:10px}
.sl-label{font-size:9px;color:var(--tx4);text-transform:uppercase;letter-spacing:.07em;display:flex;justify-content:space-between;margin-bottom:5px;font-weight:600}
.sl-label span{color:var(--acc2);font-weight:700}
.sl-row input[type=range]{
  width:100%;height:3px;accent-color:var(--acc);cursor:pointer;
  background:var(--bg4);border-radius:2px;outline:none;border:none;
  transition:accent-color .2s;
}
.sl-row input[type=range]:hover{accent-color:var(--acc2)}

.sb-prof{display:flex;align-items:center;gap:9px;padding:9px 14px;cursor:pointer;flex-shrink:0;transition:background .15s}
.sb-prof:hover{background:var(--bg3)}
.prof-av{
  width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--adbg),var(--acc));
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;
  flex-shrink:0;font-weight:700;box-shadow:0 2px 8px rgba(124,58,237,.3);
}
.prof-name{font-size:11px;color:var(--tx3);font-weight:500}

.sb-ads{margin-top:auto;border-top:1px solid var(--border)}
.sb-ad{
  background:var(--bg3);border-top:1px dashed var(--brd2);
  padding:8px 12px;cursor:pointer;position:relative;overflow:hidden;
  transition:background .15s;
}
.sb-ad:hover{background:var(--bg4)}
.sb-ad-tag{font-size:7px;color:#f59e0b;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px;display:block;font-weight:700}
.sb-ad-txt{font-size:10px;color:var(--tx3);line-height:1.4}
.sb-ad-glow{position:absolute;inset:0;border:1px solid transparent;animation:glw 3s ease-in-out infinite;pointer-events:none}
@keyframes glw{0%,100%{border-color:transparent}50%{border-color:var(--brd2)}}

/* RIGHT ADS 2x2 */
#rsb{
  background:linear-gradient(180deg,#1d2a6b,#1a2461);
  display:grid;grid-template-rows:1fr 1fr;border-left:1.5px solid var(--adbd);
}
.r-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid var(--adbd)}
.r-row:last-child{border-bottom:none}
.r-ad{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px;border-right:1.5px solid var(--adbd);cursor:pointer;
  position:relative;overflow:hidden;transition:background .15s;text-align:center;
}
.r-ad:last-child{border-right:none}
.r-ad:hover{background:rgba(255,255,255,.08)}
.r-ad-tag{font-size:7px;color:#a5b4fc;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.r-ad-txt{font-size:10px;color:#c5d3ff;text-align:center;line-height:1.4;font-weight:500}
.shimmer{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:shim 2.5s ease-in-out infinite;transform:translateX(-100%);pointer-events:none;
}
@keyframes shim{0%{transform:translateX(-100%)}100%{transform:translateX(100%)};}

/* MOBILE NAV */
@media(max-width:640px){
  #body{grid-template-columns:1fr}
  #lsb,#rsb{display:none}
  #app{padding-bottom:60px}
  .mob-nav{display:flex!important}
}
.mob-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:rgba(15,13,36,.95);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);z-index:50;
  justify-content:space-around;padding:8px 0 12px;
}
.m-ni{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;color:var(--tx4);cursor:pointer;padding:0 12px;transition:color .15s;font-weight:600}
.m-ni.on{color:var(--acc2)}
.m-ni i{font-size:21px}