/* ============================================================
   layout.css — App shell (topbar, content, footer)
   ============================================================ */
.app{opacity:0;transition:opacity .5s var(--ease)}
.app.is-in{opacity:1}
.no-scroll{overflow:hidden}

.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}

/* Topbar — mobile only */
.topbar{
  position:sticky;top:0;z-index:40;display:none;align-items:center;gap:14px;
  padding:12px 18px;background:rgba(242,246,240,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px}
.icon-btn{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);
  transition:transform .18s,color .2s,background .2s;
}
.icon-btn:hover{color:var(--ink);background:var(--surface-2)}
.icon-btn svg{width:20px;height:20px}

.content{flex:1;width:100%;overflow-x:hidden}
.app-footer{
  border-top:1px solid var(--line);padding:26px 0;margin-top:20px;
  font-size:13px;color:var(--muted);
}
.app-footer .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}