/* ── TOPBAR ── */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 0 0;
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border-bottom:0.5px solid var(--line2);
}
.brand{
  display:flex;align-items:center;gap:0;
  width:var(--sidebar-w);padding:0 18px;
  border-right:0.5px solid var(--line);
  height:100%;flex-shrink:0;
}
.brand-logo{
  width:28px;height:28px;border-radius:8px;
  background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  color:#000;font-weight:800;font-size:14px;letter-spacing:-.03em;
  flex-shrink:0;margin-right:10px;
}
.brand-text .name{font-size:13.5px;font-weight:600;letter-spacing:-.02em}
.brand-text .sub{font-size:10.5px;color:var(--grey);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.admin-badge{
  display:flex;align-items:center;gap:6px;
  padding:4px 11px;background:var(--bg3);
  border:0.5px solid var(--line2);border-radius:99px;
  font-size:11.5px;font-weight:500;color:var(--grey);
}
.admin-badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 5px var(--green);
  animation:pulse-dot 2s ease infinite;
}
.lang-toggle{
  display:flex;gap:1px;
  background:var(--bg3);padding:2px;
  border-radius:8px;border:0.5px solid var(--line);
}
.lang-toggle button{
  background:none;border:none;color:var(--grey);
  font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:4px 10px;border-radius:6px;
  cursor:pointer;font-family:inherit;transition:.15s;
}
.lang-toggle button.active{background:rgba(255,255,255,.08);color:var(--white)}

/* ── SIDEBAR ── */
.sidebar{
  position:fixed;top:var(--topbar-h);left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--bg2);
  border-right:0.5px solid var(--line);
  z-index:200;display:flex;flex-direction:column;
  padding:10px 8px;overflow-y:auto;
}
.nav-section-label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey2);font-weight:600;
  padding:12px 10px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:9px;
  font-size:13px;font-weight:500;color:var(--grey);
  cursor:pointer;transition:.15s;
  text-decoration:none;user-select:none;
  position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--white)}
.nav-item.active{
  background:var(--gold3);color:var(--gold);
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:2.5px;border-radius:99px;background:var(--gold);
}
.nav-icon{font-size:15px;flex-shrink:0;width:18px;text-align:center}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:9.5px;font-weight:700;
  padding:1px 6px;border-radius:99px;min-width:17px;text-align:center;
}
.sidebar-footer{
  margin-top:auto;padding:14px 10px;
  border-top:0.5px solid var(--line);
  font-size:11px;color:var(--grey2);line-height:1.6;
}

/* ── MAIN ── */
.main{margin-left:var(--sidebar-w);padding-top:var(--topbar-h);min-height:100vh}
.view{display:none;padding:30px 28px 80px;animation:fade-in .25s ease;max-width:1080px}
.view.active{display:block}
.view-header{margin-bottom:26px}
.view-header h1{margin-bottom:5px}
.view-header p{color:var(--grey);font-size:14px;line-height:1.5}

/* ── PAGE LOADER ── */
.page-loader{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;
}
.page-loader p{color:var(--grey2);font-size:13px}

@media(max-width:768px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-220px);width:220px;transition:.25s}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .view{padding:20px 16px 60px}
}