/* ═══════════════════════════════════════════
 *  布局（栅格、头部、侧栏、主区域）
 * ═══════════════════════════════════════════ */

/* ── Layout ──────────────────────────────── */
#app { display:grid; grid-template-rows:var(--header-h) 1fr; grid-template-columns:var(--sidebar-w) 1fr; grid-template-areas:"header header" "sidebar main"; height:100vh }

/* ── Header ──────────────────────────────── */
#header { grid-area:header; display:flex; align-items:center; padding:0 20px; background:var(--bg2); border-bottom:1px solid var(--border); z-index:100; gap:16px }
.header-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text) }
.logo-icon { width:32px; height:32px; flex-shrink:0; display:block; }
.logo-text { font-size:14px; font-weight:700; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; white-space:nowrap; }
.header-notice { flex:1; display:flex; align-items:center; gap:8px; padding:5px 12px; background:rgba(110,231,183,0.06); border:1px solid rgba(110,231,183,0.15); border-radius:20px; font-size:12px; color:var(--accent); max-width:320px; cursor:pointer; transition:background var(--trans) }
.header-notice:hover { background:rgba(110,231,183,0.12) }
.dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 2s infinite; flex-shrink:0 }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.header-right { display:flex; align-items:center; gap:10px; margin-left:auto }
.btn-ghost { padding:6px 14px; background:transparent; border:1px solid var(--border); border-radius:20px; color:var(--text-muted); font-size:13px; cursor:pointer; font-family:var(--sans); transition:all var(--trans) }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent) }
#menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:4px; color:var(--text); font-size:22px; line-height:1 }

/* ── Sidebar ─────────────────────────────── */
#sidebar { grid-area:sidebar; background:var(--bg2); border-right:1px solid var(--border); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; display:flex; flex-direction:column }
#sidebar::-webkit-scrollbar { width:4px }
#sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px }
.sidebar-section { padding:8px 0 }
.sidebar-label { padding:14px 16px 6px; font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:#9ca3af; font-weight:600; display:flex; align-items:center; gap:6px; }
.sidebar-label::before { content:''; flex-shrink:0; width:3px; height:11px; background:linear-gradient(180deg, var(--accent), var(--accent2)); border-radius:2px; }

/* 可折叠分组 */
.nav-group-header { padding:14px 16px 6px; font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:#9ca3af; font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; transition:color var(--trans); }
.nav-group-header:hover { color: var(--text); }
.nav-group-header::before { content:''; flex-shrink:0; width:3px; height:11px; background:linear-gradient(180deg, var(--accent), var(--accent2)); border-radius:2px; }
.nav-group-header .arrow-down { margin-left:auto; font-size:9px; transition:transform 0.2s; opacity:0.5; }
.nav-group.collapsed .nav-group-header .arrow-down { transform:rotate(-90deg); }
.nav-group-children { overflow:hidden; transition: max-height 0.3s ease; }
.nav-group.collapsed .nav-group-children { max-height: 0 !important; }
.nav-divider { height:1px; background:var(--border); margin:4px 16px }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; transition:all var(--trans); color:#9ca3af; font-size:13.5px; user-select:none; border-left:2px solid transparent }
.nav-item:hover { background:rgba(255,255,255,0.04); color:var(--text) }
.nav-item.active { background:rgba(110,231,183,0.07); color:var(--accent); border-left-color:var(--accent) }
.nav-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0 }

/* 加载骨架 */
.nav-skeleton { padding:9px 16px; display:flex; align-items:center; gap:10px }
.skel-icon { width:22px; height:14px; background:var(--border); border-radius:4px }
.skel-text { height:12px; background:var(--border); border-radius:4px; width:70px; animation:shimmer 1.2s infinite }
@keyframes shimmer { 0%,100%{opacity:.4} 50%{opacity:.9} }

/* ── Main ────────────────────────────────── */
#main { grid-area:main; overflow:hidden; position:relative; background:var(--bg); display:flex; flex-direction:column }

/* 页面加载中蒙层 */
#page-loading { display:none; position:absolute; inset:0; align-items:center; justify-content:center; flex-direction:column; gap:14px; background:var(--bg); z-index:10 }
.page-spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .9s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }

/* iframe 渲染动态页面 */
#page-frame { display:none; width:100%; flex:1; border:none }

/* ── Sidebar overlay (mobile) ── */
/* ── Sidebar overlay (mobile) ── */
#sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:99 }