/* vgogo 登录后的主壳（C 风格）
 * 结构：全宽顶栏 #vg-top（品牌 / 主导航 / 通知 / 账号）+ .vg-body（侧栏 #sidebar + 内容 main）+ 手机底部 Tab。
 * 书房（回忆录分区）不显示侧栏；照片、我的分区的二级导航留在左侧浅色侧栏，手机上是抽屉。
 * 颜色、字体全部来自 css/tokens.css；回忆录页面本身的组件样式在 style.css 的 .mm-* 与 memoir-*.css。
 */
#main-app.theme-memoir { background: var(--vg-bg); color: var(--vg-ink); }
body.share-mode #main-app.theme-memoir { background: transparent; }
body.share-mode #vg-top, body.share-mode #sidebar, body.share-mode #vg-pagebar, body.share-mode #tabbar { display: none; }

/* ── 顶栏 ── */
.vg-top { position: relative; background: var(--vg-bg); border-bottom: 1px solid var(--vg-line); }
.vg-navrow { display: flex; align-items: center; gap: 16px; min-height: 64px; padding-inline: max(var(--vg-gutter), env(safe-area-inset-left, 0px)) max(var(--vg-gutter), env(safe-area-inset-right, 0px)); }
.vg-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--vg-ink); text-decoration: none; font: 700 20px var(--vg-serif); letter-spacing: .02em; flex: none; }
#vg-top .vg-brand .vgogo-book-mark { width: 34px; height: 30px; }
.vg-nav { align-items: center; gap: 2px; margin-left: 8px; }
#main-app #vg-top .vg-nav .nav-primary {
  width: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 0;
  background: transparent; border: 0; box-shadow: none; color: var(--vg-ink2); font: 500 16px var(--vg-sans); cursor: pointer;
}
#main-app #vg-top .vg-nav .nav-primary i { display: none; }
#main-app #vg-top .vg-nav .nav-primary:hover { background: transparent; color: var(--vg-ink); }
#main-app #vg-top .vg-nav .nav-primary.is-active { background: transparent; box-shadow: none; color: var(--vg-ink); font-weight: 700; }
#main-app #vg-top .vg-nav .nav-primary.is-active::before { content: ""; width: 8px; height: 8px; background: var(--vg-seal); border-radius: 2px; rotate: -6deg; flex: none; }
.vg-navright { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

.vg-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--vg-tap); min-height: var(--vg-tap); height: var(--vg-tap); padding: 0 12px;
  background: transparent; border: 0; border-radius: 9999px; color: var(--vg-ink); font: 500 14px var(--vg-sans); cursor: pointer;
}
.vg-iconbtn:hover { background: rgba(20, 20, 20, .06); }
.vg-iconbtn i { font-size: 20px; }
#vg-top .site-c-control-label { font-size: 14px; color: var(--vg-ink2); }
@media (max-width: 767px) { #vg-top .site-c-control-label { display: none; } }
.vg-badge { position: absolute; top: 6px; right: 5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 8px; background: var(--vg-seal); color: var(--vg-on-seal); font: 700 12px/18px var(--vg-sans); text-align: center; }
.vg-badge.hidden { display: none; }
#main-app #vg-top #notif-bell-btn { position: relative; background: transparent; border: 0; border-radius: 9999px; padding: 0 12px; min-width: var(--vg-tap); }
#main-app #vg-top #notif-bell-btn:hover { background: rgba(20, 20, 20, .06); }

/* 账号：头像 + 积分，点开进“我的”；三点菜单里是邀请 / 退出 */
.vg-user { position: relative; display: flex; align-items: center; gap: 2px; }
.vg-user > div:first-child { display: flex; align-items: center; gap: 2px; }
.vg-userchip { display: inline-flex; align-items: center; gap: 12px; min-height: var(--vg-tap); padding: 0 8px 0 4px; border-radius: 9999px; cursor: pointer; color: var(--vg-ink); }
.vg-userchip:hover { background: rgba(20, 20, 20, .06); }
#vg-top .vg-userchip .user-avatar { width: 36px; height: 36px; border: 1px solid var(--vg-line); border-radius: 50%; object-fit: cover; }
#vg-top .vg-userchip .user-name { display: none; margin: 0; font-size: 14px; color: var(--vg-ink); max-width: 7em; }
#vg-top .vg-userchip > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
#vg-top .vg-userchip > div > div { font-size: 14px; color: var(--vg-ink2); gap: 4px; }
#vg-top .vg-userchip .user-score { font: 700 14px var(--vg-sans); color: var(--vg-ink); }
#vg-top .vg-userchip .ph-coin { color: var(--vg-seal); }
@media (min-width: 1100px) { #vg-top .vg-userchip .user-name { display: block; } }

.vg-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--vg-z-pop); width: 280px; overflow: hidden;
  background: var(--vg-paper); color: var(--vg-ink); border: 1px solid var(--vg-line); border-radius: var(--vg-r-md); box-shadow: var(--vg-shadow-pop);
}
.vg-pop.hidden { display: none; }
#notif-panel { top: calc(100% + 8px); }

/* ── 页面条：书名 / 返回 / 页面级操作（memoir.js 写入 #shell-title、#shell-actions；照片分区是搜索与批量工具） ── */
.vg-pagebar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 60px;
  padding: 8px max(var(--vg-gutter), env(safe-area-inset-right, 0px)) 8px max(var(--vg-gutter), env(safe-area-inset-left, 0px));
  background: var(--vg-bg); border-bottom: 1px solid var(--vg-line);
}
.vg-pagebar > div { min-width: 0; }
.vg-pagebar > div:first-child { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; }
.vg-pagebar > div:last-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
#main-app[data-group="memoir"][data-page="shelf"] #vg-pagebar { display: none; }   /* 书房首页自带问候和操作 */
.shell-h1 { margin: 0; font: 700 20px/1.3 var(--vg-serif); letter-spacing: .02em; color: var(--vg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#shell-title .mm-iconbtn, #shell-actions .mm-iconbtn { color: var(--vg-ink2); }
#shell-title .mm-iconbtn:hover, #shell-actions .mm-iconbtn:hover { background: rgba(20, 20, 20, .06); color: var(--vg-ink); }

/* ── 侧栏：只在照片、我的分区出现 ── */
#main-app.theme-memoir #sidebar { background: var(--vg-bg); border-right: 1px solid var(--vg-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
#main-app[data-group="memoir"] #sidebar, #main-app[data-group="memoir"] #mobile-menu-btn { display: none; }
#sidebar .nav-item.bg-glass { background: var(--vg-soft); border-color: var(--vg-line); }

/* 积分购买是独立触控入口，保留文字链接外观并提供完整点击区域。 */
#view-points .vg-points-purchase { display: inline-flex; align-items: center; min-height: var(--vg-tap); padding: 8px 4px; }

/* ── 回忆录视图容器 ── */
#view-memoir { padding: 0; }
#view-memoir.mm-light-host { background: var(--vg-paper); }

/* 书目录页：桌面两栏（左目录 / 右待办），窄屏单栏 */
@media (min-width: 1024px) {
  .mm-book-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "main side"; gap: 32px; align-items: start; }
  .mm-book-cols .mm-col-main { grid-area: main; min-width: 0; }
  .mm-book-cols .mm-col-side { grid-area: side; min-width: 0; position: sticky; top: 16px; }
  .mm-book-cols .mm-col-side > .mm-h2:first-child, .mm-book-cols .mm-col-main > .mm-h2:first-child { margin-top: 4px; }
  #view-memoir .mm-wrap.wide { max-width: 1120px; }
}

/* 嵌入主壳时，回忆录自带的 .mm-top 不用（标题写在页面条） */
.mm-app:not(.mm-standalone) > .mm-top { display: none; }

/* ── 手机：底部 Tab ── */
#tabbar { display: none; }
@media (max-width: 767px) {
  .vg-navrow { gap: 8px; min-height: 58px; padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
  .vg-brand span { display: none; }
  .vg-pagebar { padding-inline: 12px; gap: 4px; }
  .vg-pagebar > div:first-child { flex-basis: 100%; }
  .vg-pagebar > div:last-child { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; padding-bottom: 8px; }
  .vg-pagebar > div:last-child::-webkit-scrollbar { display: none; }
  #shell-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  #shell-actions .mm-btn, #shell-actions .mm-iconbtn { flex: none; white-space: nowrap; min-height: 44px; padding: 0 16px; font-size: 14px; }
  .shell-h1 { font-size: 18px; }
  #tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: var(--vg-bg); border-top: 1px solid var(--vg-line); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #tabbar button {
    flex: 1; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 12px; color: var(--vg-ink2); background: transparent; border: 0; cursor: pointer;
  }
  #tabbar button i { font-size: 24px; }
  #tabbar button.is-active { color: var(--vg-seal); font-weight: 700; }
  #main-app #tabbar { background: var(--vg-bg); }
  #main-app #tabbar button, #main-app #tabbar button.is-active { background: transparent; }
  #main-app.theme-memoir .view-section { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  #view-memoir .mm-wrap { padding-bottom: 32px; }
}
@media print {
  #tabbar, #vg-top, #vg-pagebar, #sidebar { display: none !important; }
  /* style.css 的旧规则只认识 main 为主壳直属子节点；现在 main 在 .vg-body 内。 */
  #main-app > .vg-body { display: block !important; position: static !important; height: auto !important; overflow: visible !important; }
}

/* 侧栏（照片、我的分区）：浅色，图标统一成次要色 */
body.theme-c #main-app #sidebar { background: var(--vg-bg) !important; }
body.theme-c #main-app #sidebar .nav-item i, body.theme-c #main-app #sidebar .nav-item .ph { color: var(--vg-ink2) !important; }
body.theme-c #main-app #sidebar .nav-item.bg-glass i { color: var(--vg-seal) !important; }

/* 旧分区（照片、我的、积分、签到等，仍是 Tailwind 类名的页面）与弹窗的统一：标题用衬线、主按钮药丸、弹窗小圆角 */
body.theme-c #main-app .view-section :is(h1, h2) { font-family: var(--vg-serif); font-weight: 700; color: var(--vg-ink); }
body.theme-c #main-app :is(button, a).bg-brand-primary, body.theme-c .modal-overlay :is(button, a).bg-brand-primary { border-radius: 9999px; }
body.theme-c .modal-overlay :is(h1, h2, h3) { font-family: var(--vg-serif); font-weight: 700; }
body.theme-c #main-app [class*="bg-brand-primary/"] { background: var(--vg-seal-soft) !important; color: var(--vg-seal-dk) !important; border-color: rgba(184, 50, 31, .4) !important; }
body.theme-c #main-app [class*="bg-brand-primary/"] :is(i, span) { color: var(--vg-seal-dk) !important; }

/* 顶栏：与访客首页同一款悬浮胶囊（半透明 + 背景模糊，随内容宽度居中）；手机上占满一行 */
@media screen {
  #main-app #vg-top { background: transparent; border: 0; padding: max(16px, env(safe-area-inset-top, 0px)) var(--vg-gutter) 8px; }
  #main-app #vg-top .vg-navrow {
    width: max-content; max-width: 100%; min-height: 52px; margin-inline: auto; padding: 4px 4px 4px 16px; gap: 16px;
    border: 1px solid var(--vg-line); border-radius: 9999px;
    background: color-mix(in srgb, var(--vg-bg) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgb(76 43 27 / 14%);
  }
  #main-app #vg-top .vg-navright { margin-left: 8px; }
  #main-app #vg-top .vg-badge { right: auto; left: 28px; top: 4px; }   /* 角标贴在铃铛图标上，不压「消息」二字 */
}
@media screen and (max-width: 767px) {
  #main-app #vg-top .vg-navrow { width: 100%; padding-inline: 8px 4px; }
  #main-app #vg-top .vg-navright { margin-left: auto; }
}