:root{
  --sidebar-bg: #0b1220;
  --sidebar-text: #cfe3ff;
  --sidebar-muted: #8fa6c8;
  --sidebar-accent: #3b82f6;
}

.app-layout{display:flex;min-height:100vh;font-family:Inter,system-ui,Arial,Helvetica,sans-serif;overflow-x:hidden;width:100%;}
.sidebar{width:260px;background:var(--sidebar-bg);color:var(--sidebar-text);padding:1.25rem;box-shadow:2px 0 18px rgba(2,6,23,0.6);display:flex;flex-direction:column;flex-shrink:0;}
.content{flex:1;padding:2rem;background:var(--background);overflow-x:hidden;width:100%;max-width:100%;}
.brand{display:flex;align-items:center;gap:0.6rem;margin-bottom:1rem}
.brand img{width:36px;height:36px;border-radius:8px}
.brand-name{font-weight:700;font-size:1.1rem}
.user-row{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.03)}
.avatar{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#223344,#334455);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--sidebar-text)}
.user-name{font-weight:600}
.user-email{font-size:0.8rem;color:var(--sidebar-muted)}
.sidebar-nav{display:flex;flex-direction:column;margin-top:1rem}
.sidebar-nav .nav-item{display:flex;align-items:center;gap:0.75rem;padding:0.65rem 0.6rem;border-radius:8px;color:var(--sidebar-text);text-decoration:none;margin-bottom:0.25rem}
.sidebar-nav .nav-item span{flex:1}
.sidebar-nav .nav-item:hover{background:rgba(255,255,255,0.03);color:var(--sidebar-accent)}
.sidebar-nav .nav-item.active{background:linear-gradient(90deg, rgba(59,130,246,0.12), rgba(59,130,246,0.06));color:var(--sidebar-accent);border-left:3px solid var(--sidebar-accent);padding-left:0.4rem}

/* Mobile: horizontal top bar */
@media(max-width:900px){
  .app-layout{flex-direction:column;overflow-x:hidden;}
  .sidebar{width:100%;flex-direction:row;align-items:center;padding:0.75rem;overflow-x:auto;flex-wrap:wrap;}
  .brand{margin-bottom:0;margin-right:1rem;}
  .brand-name{font-size:1rem;}
  .user-row{margin-bottom:0;border-bottom:none;padding:0.5rem;flex:1;min-width:150px;}
  .user-name{font-size:0.9rem;}
  .user-email{display:none;}
  .sidebar-nav{flex-direction:row;margin-top:0;gap:0.5rem;overflow-x:auto;width:100%;justify-content:flex-start;}
  .sidebar-nav .nav-item{white-space:nowrap;padding:0.5rem 0.75rem;margin-bottom:0;}
  .sidebar-nav .nav-item span{display:inline;}
  .content{padding:1rem;width:100%;max-width:100vw;overflow-x:hidden;}
}

@media(max-width:600px){
  .sidebar{padding:0.5rem;}
  .brand img{width:28px;height:28px;}
  .brand-name{font-size:0.9rem;}
  .avatar{width:36px;height:36px;}
  .user-name{font-size:0.85rem;}
  .sidebar-nav .nav-item{font-size:0.85rem;padding:0.5rem 0.6rem;}
  .content{padding:0.75rem;}
}