/* P60 family-shell.css — 从 family-home.html byte 级抠出的 shell CSS
   包含 :root 变量 + [data-theme=light] + .navbar + .fh-hamburger + .fh-mobile-menu + .sidebar-left/right + 移动端 768px media
   用途：所有 13 个目标页统一加载，确保 shell 段 byte 级一致 */

:root {
  --h-bg: #0f0f1a; --h-card: #1a1d2e; --h-border: #2a2a3e;
  --h-text: #eee; --h-secondary: #8899aa; --h-accent: #6366F1;
  --h-accent-soft: rgba(99,102,241,0.12); --h-radius: 14px;
  --h-shadow: 0 2px 12px rgba(0,0,0,0.3); --h-danger: #EF4444;
}
[data-theme=light] {
  --h-bg: #FAFBFC; --h-card: #FFFFFF; --h-border: #E2E6EF;
  --h-text: #1A1D26; --h-secondary: #5A6478;
  --h-accent-soft: rgba(99,102,241,0.06); --h-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
html[data-theme=light] body .sidebar-left { background:rgba(255,255,255,0.95) !important; }
html[data-theme=dark] body .sidebar-left { background:#020617 !important; }
html[data-theme=light] body .sidebar-right { background:rgba(255,255,255,0.95) !important; }
html[data-theme=dark] body .sidebar-right { background:#020617 !important; }

/* 让 body 永远 1265px（=viewport 1280 - scrollbar 15）让 .page 计算可预测 */
html, body { min-width: 1265px; }
@media (max-width: 1280px) { html, body { min-width: 100%; } }

/* ====== Top Navbar ====== */
.navbar {
  display:flex; align-items:center;
  padding:2px 0 8px; border-bottom:1px solid var(--h-border); margin-bottom:8px;
  gap:4px; flex-wrap:wrap;
  position:sticky; top:0; z-index:100; background:var(--h-bg);
}
.navbar .nav-logo { font-size:18px; font-weight:700; text-decoration:none; color:var(--h-text); display:flex; align-items:center; gap:4px; }
.navbar .nav-logo span { color:var(--h-accent); }
.navbar .nav-tabs { display:flex; align-items:center; gap:6px; margin-left:auto; }
.navbar .nav-tabs a, .navbar .nav-tabs button {
  display:flex; align-items:center; gap:4px; padding:6px 12px;
  border-radius:18px; font-size:12px; font-weight:500;
  text-decoration:none; transition:all 0.15s;
  border:1px solid var(--h-border); background:var(--h-card); color:var(--h-text);
}
.navbar .nav-tabs a:hover, .navbar .nav-tabs button:hover { border-color:var(--h-accent); }
.navbar .nav-tabs a.active { background:var(--h-accent); color:#fff; border-color:var(--h-accent); }
.navbar .nav-child-lock { color:#F59E0B; border-color:rgba(245,158,11,0.3); }
.navbar .nav-child-lock:hover { border-color:#F59E0B; background:rgba(245,158,11,0.06); }
.navbar .nav-child-lock.active { background:#F59E0B !important; color:#fff !important; border-color:#F59E0B !important; }
.navbar .nav-gear { padding:5px 6px; border-radius:50%; font-size:13px; width:28px; height:28px; }
.navbar .nav-theme-btn { padding:3px; border-radius:50%; font-size:13px; width:28px; height:28px; border:1px solid var(--h-border); background:var(--h-card); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.navbar .nav-theme-btn:hover { border-color:var(--h-accent); }

/* ====== Sidebar (Left/Right) ====== */
.sidebar-left {
  position:fixed; left:0; top:60px; width:160px; bottom:0;
  background:#020617; border-right:1px solid var(--h-border);
  padding:16px 12px; overflow-y:auto; z-index:40;
}
.sidebar-right {
  position:fixed; right:0; top:60px; width:160px; bottom:0;
  background:#020617; z-index:40;
}
.sidebar-item {
  display:block; padding:12px 8px; margin-bottom:8px;
  background:rgba(255,255,255,0.03); border:1px solid transparent;
  border-radius:10px; text-decoration:none; transition:all 0.2s;
  color:var(--h-secondary);
}
.sidebar-item:hover {
  background:rgba(99,102,241,0.15); border-color:rgba(99,102,241,0.3);
  color:var(--h-text);
}
.sidebar-item.active {
  background:rgba(99,102,241,0.2); border-color:var(--h-accent);
  color:var(--h-text);
}
.sidebar-icon { font-size:20px; margin-bottom:4px; display:block; }
.sidebar-title { font-size:12px; font-weight:600; color:inherit; display:block; }
.sidebar-desc { font-size:10px; color:var(--h-secondary); display:block; margin-top:2px; }

/* ====== Right sidebar ad placeholder ====== */
.ad-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:200px; padding:16px 8px; margin:8px;
  border:1px dashed var(--h-border); border-radius:8px;
  text-align:center; color:var(--h-secondary);
}
.ad-icon { font-size:24px; margin-bottom:8px; }
.ad-size { font-size:10px; margin-top:4px; opacity:0.6; }

/* ====== Hamburger (Mobile) ====== */
.fh-hamburger {
  display:none !important; width:36px; height:36px; border-radius:8px;
  border:1px solid var(--h-border); background:var(--h-card);
  color:var(--h-text); cursor:pointer; align-items:center;
  justify-content:center; transition:all 0.2s; flex-shrink:0;
  z-index:160; pointer-events:auto;
}
.fh-hamburger:hover { border-color:var(--h-accent); }
.fh-mobile-menu {
  display:none; position:fixed; top:54px; right:8px; width:240px; max-width:calc(100vw - 16px);
  max-height:calc(100dvh - 70px); overflow-y:auto;
  background:var(--h-bg); border:1px solid var(--h-border);
  border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,0.25);
  z-index:155; padding:8px;
  flex-direction:column; gap:4px;
}
.fh-mobile-menu.show { display:flex !important; }
.fh-mobile-menu .fh-mm-item:first-child { margin-top:2px; }
.fh-mobile-menu .fh-mm-item {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius:12px; font-size:14px; text-decoration:none;
  color:var(--h-text); background:var(--h-card);
  border:1px solid var(--h-border); cursor:pointer; transition:all 0.15s;
}
.fh-mobile-menu .fh-mm-item:hover { border-color:var(--h-accent); }
.fh-mobile-menu .fh-mm-divider { height:1px; background:var(--h-border); margin:4px 0; }
.fh-mobile-menu .fh-mm-logout { color:#EF4444 !important; }
.fh-mobile-menu .fh-mm-heading { font-size:11px; font-weight:600; color:var(--h-secondary); padding:4px 8px; text-transform:uppercase; }

@media (max-width:768px) {
  .fh-hamburger { display:flex !important; }
  .navbar { flex-wrap:nowrap; }
  .navbar .nav-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; padding-right:4px; align-items:center; min-width:0; }
  .navbar .nav-tabs a, .navbar .nav-tabs button { font-size:11px; padding:4px 8px; white-space:nowrap; }
  .nav-logo { font-size:13px !important; }
  .nav-logo span { font-size:11px !important; }
  #navUserArea { display:none; }
}

/* ====== Page wrapper (shell 注入的页面应使用 .page) ====== */
.page { margin-left:176px; margin-right:176px; max-width:calc(100% - 352px); padding:8px 0 24px; }

@media (max-width:768px) {
  .page { margin-left:0; margin-right:0; padding:8px 0 24px; }
  .sidebar-left, .sidebar-right { display:none !important; }
}