/* =====================================================================
   Flow OS · Layout — "Quiet System"
   实心暖表面 + 发丝边框，移除毛玻璃；导航激活用朱红指示条。
   ===================================================================== */
#appShell {
  display:flex; height:100vh; height:100dvh; width:100vw; overflow:hidden;
  opacity:0; transition: opacity .35s var(--ease-out);
  background: transparent; position:relative; z-index:1;
}
#appShell.active { opacity:1; }

/* ===== Sidebar（实心暖卡面 + 右侧发丝边框） ===== */
#sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background: var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:50;
  transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1), width .3s var(--ease-out);
}
.sidebar-header { padding:22px 18px 14px; display:flex; align-items:center; justify-content:space-between; }
.sidebar-logo { display:flex; align-items:center; gap:11px; }
.sidebar-logo-icon {
  width:34px; height:34px; flex-shrink:0;
  border-radius:var(--radius-sm);
  object-fit:contain;
}
.sidebar-logo-text {
  font-family: var(--font-display);
  font-size:19px; font-weight:600; letter-spacing:-0.02em; color:var(--text-primary);
  font-optical-sizing:auto;
}
.sidebar-nav { flex:1; overflow-y:auto; padding:6px 12px; }
.nav-item {
  display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:var(--radius-sm);
  cursor:pointer; transition: background .18s var(--ease-out), color .18s var(--ease-out); color:var(--text-secondary);
  font-size:.9rem; font-weight:500; margin-bottom:3px; border:1px solid transparent;
  position:relative; overflow:hidden; user-select:none;
}
.nav-item:hover { background: var(--surface-3); color:var(--text-primary); }
.nav-item.active {
  background: var(--accent-weak); color:var(--accent-ink); font-weight:700;
}
/* 激活指示条（朱红，加粗 + 微光），替代蓝色填充 */
.nav-item.active::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:20px; border-radius:0 3px 3px 0; background:var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.nav-item i { width:20px; text-align:center; font-size:1rem; opacity:.9; }
.nav-group { margin-top:6px; }
.nav-group-title { font-size:.72rem; font-weight:600; color:var(--text-muted); padding:12px 14px 4px; letter-spacing:.06em; text-transform:uppercase; }

.sidebar-footer { padding:14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }

/* ===== Collapse button ===== */
.sidebar-collapse-btn {
  width:30px; height:30px; border:none; border-radius:8px; background:transparent;
  color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease-out), color .2s var(--ease-out); flex-shrink:0;
}
.sidebar-collapse-btn:hover { background: var(--surface-3); color:var(--text-primary); }
.sidebar-collapse-btn i { transition: transform .3s var(--ease-out); }
@media (min-width:769px) {
  #appShell.sidebar-collapsed #sidebar { width:0; min-width:0; transform:translateX(-100%); overflow:hidden; }
  #appShell.sidebar-collapsed #menuToggle { display:inline-flex !important; }
  #appShell.sidebar-collapsed .sidebar-collapse-btn i { transform:rotate(180deg); }
}

/* ===== Main Area ===== */
#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 22px; background: var(--surface);
  border-bottom:1px solid var(--border); z-index:40;
}
.top-title {
  font-family: var(--font-display);
  font-size:1.1rem; font-weight:600; letter-spacing:-0.02em; color:var(--text-primary);
  font-optical-sizing:auto;
}
.top-actions { display:flex; gap:8px; align-items:center; }
.top-date { margin-left:auto; font-size:.78rem; color:var(--text-muted); white-space:nowrap; padding-right:4px; }

#moduleContainer { flex:1; overflow-y:auto; padding:clamp(20px, 2.4vw, 40px); position:relative; overflow-anchor:none; z-index:1; }
#moduleContainer > .module-panel { max-width:var(--content-max, 1320px); margin-inline:auto; }
:root { --content-max: 1320px; }
@media (min-width:1700px) { :root { --content-max: 1480px; } }
@media (min-width:2200px) { :root { --content-max: 1640px; } }

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

/* ===== Mobile overlay ===== */
.mobile-overlay { position:fixed; inset:0; background:rgba(1,1,2,0.5); z-index:45; display:none; }
.mobile-overlay.active { display:block; }