:root{--sidebar-w:250px;--sidebar-c:60px}
body{margin:0;display:flex;background:#f5f7fb;font-family:system-ui}
#sidebar{width:var(--sidebar-w);background:#0f172a;color:#fff;min-height:100vh;transition:.25s;position:fixed;left:0;top:0;z-index:1000;overflow:hidden}
body.collapsed #sidebar{width:var(--sidebar-c)}
#sidebar .brand{padding:18px 14px;display:flex;gap:10px;align-items:center;font-weight:700;white-space:nowrap}
#sidebar .menu{list-style:none;padding:0;margin:0}
#sidebar .menu li a{color:#cbd5e1;display:flex;align-items:center;gap:14px;padding:12px 16px;text-decoration:none;white-space:nowrap}
#sidebar .menu li a:hover{background:#1e293b;color:#fff}
#sidebar .menu i{font-size:1.3rem;min-width:28px;text-align:center}
body.collapsed .text{display:none}
#main{margin-left:var(--sidebar-w);flex:1;transition:.25s;width:100%}
body.collapsed #main{margin-left:var(--sidebar-c)}
.topbar{background:#fff;border-bottom:1px solid #e5e7eb;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:500}
.card{border:none;box-shadow:0 2px 12px rgba(0,0,0,.06);border-radius:14px}
@media(max-width:768px){
  #sidebar{transform:translateX(-100%)}
  body.collapsed #sidebar{transform:translateX(0);width:var(--sidebar-c)}
  #main{margin-left:0 !important}
  body:not(.collapsed) #sidebar{transform:translateX(0);width:var(--sidebar-w)}
}