:root{
  --bg:#f6f7f9; --card:#fff; --text:#1f2937; --muted:#6b7280;
  --brand:#007bff; --brand-hover:#0056b3; --border:#e5e7eb;
  --danger:#e44a4a; --danger-hover:#c0392b;
}

*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:60px; background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; backdrop-filter:saturate(1.5) blur(10px);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand img{height:34px}
.brand span{font-weight:700; font-size:18px}

/* Hamburger */
.hamburger{
  display:none; width:38px; height:38px; border-radius:8px;
  background:var(--card); border:1px solid var(--border);
  justify-content:center; align-items:center; cursor:pointer;
}
.hamburger-bars,.hamburger-bars::before,.hamburger-bars::after{
  content:""; display:block; width:20px; height:2px; background:var(--text);
  position:relative; transition:.25s;
}
.hamburger-bars::before{position:absolute; top:-6px}
.hamburger-bars::after{position:absolute; top:6px}
.hamburger[aria-expanded="true"] .hamburger-bars{background:transparent}
.hamburger[aria-expanded="true"] .hamburger-bars::before{transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] .hamburger-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* Sidebar */
.sidebar{
  position:fixed; top:60px; left:0; bottom:0; width:250px;
  background:var(--card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:18px 12px; transition:transform .3s ease;
  z-index: 10000;
}
.sidebar.closed{transform:translateX(-100%)}

.nav-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  color:var(--text); text-decoration:none; font-weight:500;
  transition:.2s;
}
.nav-link:hover{background:rgba(0,123,255,.08); color:var(--brand)}
.nav-link.active{background:rgba(0,123,255,.1); color:var(--brand); font-weight:600}
.nav-link i{width:20px; text-align:center;}

/* Footer */
.sidebar-footer{
  border-top:1px solid var(--border);
  padding-top:14px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.sidebar-footer img{
  width:50px; height:50px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border);
}
.sidebar-footer .info{text-align:center;}
.sidebar-footer .name{font-weight:700; font-size:15px; margin-bottom:2px;}
.sidebar-footer .role{font-size:13px; color:var(--muted);}
.sidebar-footer form{width:100%;}
.sidebar-footer .logout{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:38px; border-radius:8px;
  background:var(--danger); color:#fff; text-decoration:none;
  transition:background .2s; font-weight:600; gap:8px;
}
.sidebar-footer .logout:hover{background:var(--danger-hover)}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .hamburger{display:flex;}
}