/* ---------- app shell ---------- */
#app{display:flex;min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);flex:0 0 auto;border-right:1px solid var(--line-soft);
  padding:var(--s5) var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  position:sticky;top:0;height:100vh;background:var(--glass);backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:baseline;gap:1px;padding:0 var(--s3) var(--s5);}
.brand b{font-family:var(--f-display);font-weight:700;font-size:23px;letter-spacing:.01em;text-transform:uppercase;}
.brand i{color:var(--accent);font-style:normal;font-size:23px;font-family:var(--f-display);font-weight:700;}

.nav-item{
  display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);border-radius:10px;
  color:var(--dim);font-weight:500;font-size:14.5px;transition:var(--dur) var(--ease);width:100%;
  text-align:left;position:relative;
}
.nav-item svg{width:18px;height:18px;stroke-width:2;flex:0 0 auto;}
.nav-item:hover{background:var(--surface-2);color:var(--text);}
.nav-item.active{background:var(--accent-glow);color:var(--accent);}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent);
}
.nav-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--line-soft);}
.user-chip{display:flex;align-items:center;gap:var(--s3);padding:8px var(--s3);border-radius:10px;}
.avatar{
  width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:15px;flex:0 0 auto;
}
.user-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:30;background:var(--glass);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);padding:var(--s3) var(--s5);
  display:flex;align-items:center;gap:var(--s3);
}
.topbar h1{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:.04em;text-transform:uppercase;}
.content{padding:var(--s5);max-width:var(--maxw);width:100%;margin:0 auto;flex:1;}

.view{animation:fadeUp .35s var(--ease-out);}
.grid{display:grid;gap:var(--s4);}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}

/* mobile: sidebar becomes bottom tab bar */
@media (max-width:860px){
  #app{flex-direction:column;}
  .sidebar{
    position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:auto;
    flex-direction:row;border-right:none;border-top:1px solid var(--line);
    padding:var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));z-index:40;gap:0;
  }
  .brand,.nav-foot{display:none;}
  .nav-item{flex-direction:column;gap:3px;font-size:10.5px;padding:7px 4px;justify-content:center;}
  .nav-item.active::before{display:none;}
  .nav-item svg{width:20px;height:20px;}
  .content{padding:var(--s4) var(--s4) 84px;}
  .topbar{padding:var(--s3) var(--s4);}
  .g4{grid-template-columns:repeat(2,1fr);}
  .g3,.g2{grid-template-columns:1fr;}
}