*{box-sizing:border-box}
body,html{height:100%}
body{
  margin:0; font-family:var(--font); font-size:var(--size);
  color:var(--text); background:var(--bg); display:flex;
}
.app{display:flex; width:100%}

/* Sidebar */
.sidebar{
  width:70px; background:var(--panel);
  display:flex; flex-direction:column; align-items:center;
  box-shadow:var(--shadow); position:fixed; inset:0 auto 0 0; z-index:5;
}
.logo{font-size:18px; margin:10px 0 15px}
.nav-btn{
  background:none; border:none; color:var(--muted);
  font-size:18px; cursor:pointer; margin:12px 0; position:relative;
}
.nav-btn:hover{color:var(--text)}
.nav-btn:hover::after{
  content:attr(data-tooltip); position:absolute; left:60px;
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  padding:4px 8px; border-radius:6px; box-shadow:var(--shadow);
}

/* Main */
.main{margin-left:70px; display:flex; flex-direction:column; width:100%}
.topbar{
  background:var(--panel); box-shadow:var(--shadow);
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; position:sticky; top:0; z-index:4;
}
.icon-btn{background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer}
.icon-btn:hover{color:var(--text)}
.search-wrap{flex:1; margin:0 12px}
.input-search{width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:6px 10px}
.top-actions{display:flex; align-items:center; gap:8px}
.avatar{font-size:18px}

.content{padding:18px}
.h1{margin:0 0 12px}
.h2{margin:0 0 8px}
.h3,.h4{margin:8px 0}
.muted{color:var(--muted)}

.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* Footer */
.footer{text-align:center; background:var(--panel); padding:10px; color:var(--muted); box-shadow:var(--shadow)}

/* Side Panel */
.side-panel{
  position:fixed; right:-320px; top:0; width:320px; height:100vh;
  background:var(--panel); box-shadow:var(--shadow);
  transition:right .3s; display:flex; flex-direction:column;
  border-left:1px solid var(--border); z-index:6;
}
.side-panel.active{right:0}
.side-panel-header{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border)}
.side-panel-body{padding:14px; overflow:auto}
.switch{display:flex; align-items:center; gap:6px; margin:8px 0}
.divider{border:0; border-top:1px solid var(--border); margin:12px 0}
.notif-list{margin:0; padding-left:16px}

@media (max-width:768px){
  .sidebar{left:-100%; transition:left .3s}
  .sidebar.active{left:0}
  .main{margin-left:0}
  .grid{grid-template-columns:1fr}
}