:root{
  --menu-bg:#ffffff;
  --menu-fg:#111827;
  --menu-accent:#2563eb;
  --menu-hover:#f3f4f6;
  --border:#e5e7eb;
}

.app-shell{display:flex;min-height:100vh;background:#fff;color:#111}
.app-menu{
  position:fixed; top:0; left:0; height:100vh;
  width:56px; background:var(--menu-bg); color:var(--menu-fg);
  transition:width .2s ease; z-index:1000; border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:stretch; overflow:hidden;
}
.app-menu.expanded{ width:220px; }
.app-menu .brand{
  display:flex; align-items:center; gap:10px; padding:12px 12px; border-bottom:1px solid var(--border);
}
.app-menu .brand .burger{ width:32px; height:32px; border-radius:8px; background:#1f2430; display:grid; place-items:center; cursor:pointer; }
.app-menu .brand .title{ font-weight:600; white-space:nowrap; opacity:.95; }
.app-menu nav{ display:flex; flex-direction:column; padding:8px 6px; gap:4px; }
.app-menu a{
  display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:8px; color:var(--menu-fg);
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-menu a:hover{ background:var(--menu-hover); }
.app-menu a.active{ background:#0b1220; outline:1px solid #0f172a; }
.app-menu .icon{ width:28px; min-width:28px; display:grid; place-items:center; opacity:.9; }
.app-menu .text{ flex:1; }
.app-content{
  margin-left:56px; transition: margin-left .2s ease; width:100%;
}
.app-menu.expanded ~ .app-content{ margin-left:220px; }

/* Hover expansion on desktops */
@media (hover:hover){
  .app-menu:not(.expanded):hover{ width:220px; }
  .app-menu:not(.expanded):hover ~ .app-content{ margin-left:220px; }
}

/* Optional top bar for pages that want a header */
.page-header{
  position:sticky; top:0; z-index:5; background:#fff;
  padding:12px 16px; border-bottom:1px solid #e5e7eb;
  display:flex; justify-content:space-between; align-items:center;
}