/* ===== Flow OS - Layout ===== */
#appShell { display:flex; height:100vh; width:100vw; overflow:hidden; opacity:0; transition:opacity .3s; }
#appShell.active { opacity:1; }
#sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--glass-bg); backdrop-filter:blur(16px);
  border-right:1px solid var(--glass-border);
  display:flex; flex-direction:column; z-index:50;
  transition:transform .3s;
}
.sidebar-header { padding:24px 20px 16px; }
.sidebar-logo { display:flex; align-items:center; gap:10px; }
.sidebar-logo-icon {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),#7c3aed);
  display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:14px;
}
.sidebar-logo-text { font-size:15px; font-weight:700; letter-spacing:-.3px; }
.sidebar-nav { flex:1; overflow-y:auto; padding:8px 12px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  cursor:pointer; transition:all .2s cubic-bezier(0.4,0,0.2,1); color:#64748b; font-size:.85rem; font-weight:500;
  margin-bottom:4px; border:1px solid transparent; position:relative; overflow:hidden;
}
.dark .nav-item { color:#94a3b8; }
.nav-item:hover { background:rgba(37,99,235,0.06); color:var(--primary); }
.nav-item.active { background:rgba(37,99,235,0.1); color:var(--primary); border-color:rgba(37,99,235,0.15); }
.nav-item i { width:20px; text-align:center; font-size:.9rem; }
.sidebar-footer { padding:16px; border-top:1px solid var(--glass-border); }

#mainArea { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; }
#topBar {
  height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; background:var(--glass-bg); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--glass-border); z-index:40;
}
.top-title { font-size:1.1rem; font-weight:700; }
.top-actions { display:flex; gap:8px; align-items:center; }
#moduleContainer { flex:1; overflow-y:auto; padding:20px 24px; position:relative; overflow-anchor:none; }

/* ===== Module Panels ===== */
.module-panel { display:none; opacity:0; transform:translateY(8px); transition:opacity .3s ease,transform .3s ease; }
.module-panel.active { display:block; opacity:1; transform:translateY(0); animation:fadeIn .35s cubic-bezier(0.4,0,0.2,1); }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }