.app-shell{
  display:flex;
  min-height:100vh;
}

/* ===== Sidebar ===== */
.sidebar{
  width:var(--sidebar-width);
  flex:0 0 auto;
  background:linear-gradient(180deg,var(--navy) 0%, var(--teal) 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  transform:translateX(-100%);
  transition:transform .2s ease;
  z-index:40;
}
.sidebar.open{transform:translateX(0);}

.sidebar .brand{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:900;
  padding:22px 20px 18px;
}

.sidebar nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:6px 12px;overflow-y:auto;}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:10px;
  color:rgba(255,255,255,.85);font-size:14px;font-weight:500;
  transition:background .15s ease;
}
.sidebar nav a .nav-icon{font-size:17px;width:22px;text-align:center;}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff;}
.sidebar nav a.active{background:rgba(255,255,255,.16);color:#fff;font-weight:700;}

.sidebar .user-box{
  padding:14px 16px 20px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;gap:10px;
}
.sidebar .avatar{
  width:34px;height:34px;border-radius:50%;background:var(--sky);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex:0 0 auto;color:#fff;
}
.sidebar .user-meta{flex:1;min-width:0;}
.sidebar .user-meta .name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar .user-meta .email{font-size:11px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar .logout-btn{
  border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  border-radius:8px;padding:5px 9px;font-size:11px;cursor:pointer;flex:0 0 auto;
}
.sidebar .logout-btn:hover{background:rgba(255,255,255,.12);}

/* ===== Main column ===== */
.main-col{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
}
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.hamburger{
  border:none;background:var(--sky-pale);color:var(--navy);
  width:36px;height:36px;border-radius:10px;font-size:18px;cursor:pointer;
  flex:0 0 auto;
}
.topbar-title{font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;color:var(--navy);}

.content{flex:1;padding:20px 20px 60px;max-width:980px;width:100%;margin:0 auto;}

.drawer-backdrop{
  display:none;position:fixed;inset:0;background:rgba(10,25,35,.35);z-index:30;
}
.drawer-backdrop.open{display:block;}

@media(min-width:900px){
  .sidebar{position:sticky;transform:none;height:100vh;}
  .hamburger{display:none;}
  .drawer-backdrop{display:none !important;}
  .content{padding:28px 32px 70px;}
}