:root{
  --bg:#0b0f1a;
  --surface:#141824;
  --surface2:#1c2235;
  --border:#ffffff12;
  --accent:#4f7cff;
  --accent2:#c4ff5c;
  --text:#e8eaf0;
  --text-muted:#7b82a0;
  --font-display:'Bebas Neue', sans-serif;
  --font-body:'DM Sans', sans-serif;
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
}
a{color:inherit; text-decoration:none;}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; bottom:0; left:0; width:100%; z-index:1000;
  background:var(--surface2); border-top:1px solid var(--border);
  color:var(--text); padding:14px 20px;
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap; font-size:.9rem;
}
.cookie-banner button{
  background:var(--accent); color:#fff; border:none;
  padding:6px 16px; border-radius:8px; cursor:pointer; font-weight:600;
}

/* ---------- Sidebar / header ---------- */
#header{
  position:fixed; top:0; left:0; height:100%; width:230px;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:32px 16px; z-index:1020;
  overflow-y:auto;
}
.profile img{
  width:80px; height:80px; border-radius:50%;
  border:2px solid var(--accent2); object-fit:cover;
}
.profile h1{
  font-family:var(--font-display);
  font-size:1.3rem; letter-spacing:2px; margin-top:14px; text-align:center;
}
.social-links{display:flex; gap:14px; margin-top:14px; justify-content:center;}
.social-links a{
  font-size:1.1rem; color:var(--text-muted);
  transition:.2s;
}
.social-links a:hover{color:var(--accent2);}

.nav-menu{width:100%; margin-top:40px;}
.nav-menu ul{list-style:none; padding:0; margin:0;}
.nav-menu li{margin-bottom:12px;}
.nav-menu a{
  display:flex; align-items:center; gap:10px;
  background:var(--surface2); border:1px solid var(--border);
  padding:12px 14px; border-radius:var(--radius);
  color:var(--text-muted); font-weight:500; font-size:.92rem;
  transition:.2s;
}
.nav-menu a img{width:28px; height:auto;}
.nav-menu a:hover, .nav-menu a.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
}

#navToggle.mobile-nav-toggle{
  display:none !important; position:fixed !important; top:16px !important; right:16px !important;
  left:auto !important; bottom:auto !important;
  font-size:1.6rem !important; color:var(--text) !important; background:var(--surface2) !important;
  border:1px solid var(--border) !important; border-radius:8px !important; padding:6px 10px !important;
  cursor:pointer; width:auto !important; height:auto !important;
}

/* ---------- Main content offset ---------- */
.main-content{margin-left:230px; min-height:100vh; display:flex; flex-direction:column;}
#main{
  background:var(--bg) !important;
  margin:0 !important;
  margin-left:0 !important;
  padding:0 !important;
  width:auto !important;
}

/* ---------- Footer ---------- */
#footer{
  background:var(--surface); border-top:1px solid var(--border);
  text-align:center; padding:20px; color:var(--text-muted); font-size:.85rem;
  margin-left:230px;
  position:static !important;
  width:auto !important;
  left:auto !important;
  bottom:auto !important;
  z-index:auto !important;
}
#footer strong span{color:var(--text);}

.back-to-top{
  position:fixed; bottom:24px; right:24px; z-index:1010;
  width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow:0 8px 24px rgba(79,124,255,.35);
}

/* ---------- Responsive sidebar ---------- */
@media (max-width: 991px){
  #header{
    width:230px; left:-250px; transition:left .3s ease;
  }
  #header.show{left:0;}
  .main-content{margin-left:0;}
  #footer{margin-left:0;}
  #navToggle.mobile-nav-toggle{display:flex !important; align-items:center; z-index:1030 !important;}
}