:root {
  --bronze:#CD7F32;--bronze-accent:#B8860B;--bronze-hover:#8C7853;
  --bronze-light:#E8A045;--bronze-dim:rgba(205,127,50,0.15);
  --bronze-glow:rgba(205,127,50,0.35);--bronze-border:rgba(205,127,50,0.4);
  --bg-deep:#050505;--bg-primary:#0A0A0A;--bg-card:#121212;
  --bg-card2:#181818;--bg-card3:#222222;--bg-hover:#252525;
  --border:rgba(255,255,255,0.08);--border-light:rgba(255,255,255,0.12);
  --text-white:#F5F5F7;--text-light:#E0E0E0;--text-muted:#8E8E93;
  --text-dim:#636366;--text-mono:#E0C080;
  --green:#22C55E;--green-dim:rgba(34,197,94,0.1);
  --red:#EF4444;--red-dim:rgba(239,68,68,0.1);
  --blue:#3B82F6;--blue-dim:rgba(59,130,246,0.1);
  --amber:#F59E0B;--amber-dim:rgba(245,158,11,0.1);
  --purple:#8B5CF6;--purple-dim:rgba(139,92,246,0.1);
  --cyan:#06B6D4;--cyan-dim:rgba(6,182,212,0.1);
  --pink:#EC4899;--pink-dim:rgba(236,72,153,0.1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;overflow-x:hidden;margin:0;padding:0;}
body{background:var(--bg-deep);color:var(--text-white);font-family:'Inter',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}

/* ═══════ TOPBAR / HEADER ═══════ */
.topbar{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:0 20px;height:70px;display:flex;align-items:center;justify-content:space-between;background:rgba(10,10,10,0.8);backdrop-filter:blur(30px);border-bottom:1px solid var(--border);transition:all 0.3s ease;}
.logo{display:flex;align-items:center;gap:12px;z-index:1100;}
.logo-icon{width:38px;height:38px;background:linear-gradient(135deg,#CD7F32,#B8860B);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;color:#0A0A0A;box-shadow:0 0 20px rgba(205,127,50,0.35);}
.logo-text{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:22px;background:linear-gradient(90deg,#CD7F32,#E8A045,#B8860B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:0.5px;}

.nav-center{display:flex;gap:4px;margin-left:32px;}
.nav-link{padding:8px 16px;border-radius:8px;font-size:14px;color:var(--text-muted);transition:all 0.25s cubic-bezier(0.4,0,0.2,1);white-space:nowrap;font-weight:500;}
.nav-link:hover{color:var(--text-white);background:rgba(255,255,255,0.06);transform:translateY(-1px);}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;z-index:1100;}

/* Hamburger Menu Icon */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px;z-index:2100;margin-left:auto;}
.hamburger span{display:block;width:24px;height:2px;background:var(--bronze);border-radius:2px;transition:0.3s;}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-wrapper{display:flex;align-items:center;flex:1;}

@media(max-width:1024px){
  .topbar{padding:0 20px;}
  .nav-wrapper{position:fixed;top:0;right:-105%;width:300px;height:100vh;background:rgba(10,10,10,0.98);backdrop-filter:blur(30px);flex-direction:column;padding:100px 24px;transition:0.5s cubic-bezier(0.4,0,0.2,1);border-left:1px solid var(--border);z-index:2000;display:flex;}
  .nav-wrapper.active{right:0;box-shadow:-20px 0 50px rgba(0,0,0,0.8);}
  .nav-center{flex-direction:column;width:100%;margin-left:0;gap:8px;margin-bottom:32px;}
  .nav-link{font-size:16px;width:100%;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.03);}
  .nav-right{flex-direction:column;width:100%;gap:12px;align-items:stretch;}
  .nav-right .btn-primary, .nav-right .btn-ghost{width:100%;text-align:center;padding:14px;}
  .hamburger{display:flex;z-index:2100;}
  .user-profile{width:100%;margin-bottom:10px;}
}

/* Global Buttons */
.btn-ghost{padding:10px 20px;border:1px solid var(--bronze-border);border-radius:8px;color:var(--bronze);font-size:14px;cursor:pointer;background:transparent;transition:all 0.2s;font-weight:600;display:inline-block;text-align:center;}
.btn-ghost:hover{background:var(--bronze-dim);border-color:var(--bronze);}
.btn-primary{padding:11px 24px;background:var(--bronze);border:none;border-radius:8px;color:#0A0A0A;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.25s;display:inline-block;text-align:center;}
.btn-primary:hover{background:var(--bronze-light);transform:translateY(-2px);}

.user-profile{display:flex;align-items:center;gap:12px;padding:8px 16px;background:rgba(255,255,255,0.03);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:12px;}
.user-avatar{width:32px;height:32px;background:var(--bronze);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#000;}
.user-info{display:flex;flex-direction:column;}
.user-name{font-size:14px;font-weight:700;line-height:1.2;color:var(--text-white);}
.user-role{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-weight:600;}