* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

.app {
  display: flex;
  height: 100vh;
  background: var(--bg-primary);
}

/* ========== Sidebar ========== */
.sidebar {
  width: var(--sidebar-width);
  /* W7-5 优化B：左轨略带冷灰 + 降透明度，与飞出面板（纯白 #fff）拉开分层对比；
     仍是毛玻璃质感，不动任何业务色（蓝/成功绿等）。 */
  background: rgba(244,245,248,0.82);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
}
.sidebar-header {
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--border-light);
}
.sidebar-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-header p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 500;
}
.nav-menu {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.nav-item:hover {
  background: rgba(0,122,255,0.06);
  color: var(--apple-blue);
}
.nav-item.active {
  background: rgba(0,122,255,0.1);
  color: var(--apple-blue);
  font-weight: 600;
}
.nav-item .icon {
  width: 22px;
  text-align: center;
  font-size: 16px;
}
/* ========== 常用菜单收藏区（飞出式分组，nav-fav.js 渲染收藏项到面板）========== */
/* 常用面板内的空态提示（无收藏时） */
.nav-fav-empty {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-tertiary, #aaa);
  font-style: italic;
  white-space: nowrap;
}
/* 给可导航菜单项加定位锚（加号/叉号绝对定位用） */
.nav-item {
  position: relative;
}
/* hover 加号按钮：在其他菜单的飞出面板内，悬停每个可点击菜单项时浮出➕，点击加入常用。
   只显示➕（不显示➖）——移除入口在常用面板的叉号，不在原菜单项。 */
.fav-add-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0,122,255,0.12);
  color: var(--apple-blue, #007aff);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item:hover .fav-add-btn,
.fav-add-btn:focus-visible {
  opacity: 1;
}
/* 根级子组的 head 本身是导航入口；收藏按钮只放在实际子项，避免标题行布局抖动。 */
.nav-menu > .nav-subgroup > .nav-subgroup-head .nav-item .fav-add-btn {
  display: none;
}
.fav-add-btn:hover {
  background: rgba(0,122,255,0.22);
}
/* 常用面板内收藏项的移除叉号：悬停收藏项时浮出×，点击从常用移除 */
.fav-remove-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(255,59,48,0.12);
  color: var(--apple-red, #ff3b30);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-item:hover .fav-remove-btn,
.fav-remove-btn:focus-visible {
  opacity: 1;
}
.fav-remove-btn:hover {
  background: rgba(255,59,48,0.22);
}
.nav-group {
  margin-bottom: 4px;
  position: relative; /* 飞出面板定位锚点（fallback；实际用 JS fixed 定位跟随轨滚动） */
}
/* W7-2 飞出式菜单：左侧轨只显示一级分组标题（图标+名+右向箭头指示可飞出）。
   hover 分组标题 → .nav-group-items 变 fixed 面板飞出到右侧（定位由 nav-flyout.js 计算，
   跟随轨滚动）。折叠持久化(.expanded)在飞出模型下无意义——已从展开/收起路径解耦：
   .nav-group-items 的显隐只由 .nav-flyout-open（JS hover 态）驱动，与 .expanded 无关。 */
.nav-group-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.15s;
}
.nav-group-title:hover,
.nav-group.nav-flyout-open > .nav-group-title {
  background: rgba(0,122,255,0.06);
  color: var(--text-primary);
}
/* 箭头改右向常驻，提示「hover 向右飞出」；飞出时轻微加深 */
.nav-group-title .nav-arrow {
  font-size: 10px;
  color: var(--text-tertiary);
  transition: color 0.15s ease;
}
.nav-group.nav-flyout-open > .nav-group-title .nav-arrow { color: var(--apple-blue); }

/* 飞出面板本体：默认藏起；.nav-flyout-open 时由 JS 定位并显示。
   W7-5 优化B：与左轨（rgba 半透明毛玻璃白）明显分层——面板纯白 #fff + 柔和阴影 + 极细边框，
   一眼「浮起聚焦」。左轨见 .sidebar 微调（略冷灰 + 降透明度）拉开对比。
   W8 苹果简约风：width:max-content 让面板宽度严格贴合内容（短项不留大块空白、长项不贴边），
   阴影改两级柔光（更接近 macOS 浮层质感），内距收到 10px 更紧凑。 */
.nav-group-items {
  display: none;
  position: fixed;
  z-index: 200;
  /* 不设 width：fixed 元素天然 shrink-to-fit 内容宽度（短面板收紧、长面板撑开，自动贴合），
     max-width 兜底防超宽。min-width 保底避免极窄。 */
  min-width: 200px;
  max-width: 620px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  /* 苹果风两级柔光：大范围淡影 + 近距重影，浮层质感更通透 */
  box-shadow: 0 24px 60px rgba(0,0,0,0.14), 0 4px 14px rgba(0,0,0,0.08);
}
.nav-group.nav-flyout-open > .nav-group-items { display: block; }
/* 优化A：面板【含分类子分组】时，分类块左右并排（每分类=一列：标题在上、其项竖排在下）。
   W9 兼容性修正（2026-07-06）：原用 :has(> .nav-subgroup) 选择器，360 极速浏览器兼容模式/老 Chromium
   不支持 :has()，导致分类卡片布局全部失效、子菜单塌缩。改为 .has-subgroup 类名选择器（HTML 已标记），
   全浏览器兼容；:has() 仅作渐进增强兜底（支持的浏览器额外命中，效果相同）。
   ★必须限定 .nav-flyout-open：否则面板会一直显示（2026-07-06 修）。 */
.nav-group.nav-flyout-open > .nav-group-items.has-subgroup {
  /* W9 终极兼容方案（2026-07-06）：面板用 block，分类卡片用 inline-table 横排。
     踩过的坑：flex 循环引用；inline-block+max-content 老WebKit塌缩；float 不撑高；
     整体 display:table 时扁平项（table-caption）老WebKit宽度异常（一个字一行）。
     inline-table 在老 WebKit 上比 inline-block 稳定，且天然撑开高度。 */
  display: block;
}
/* 渐进增强：支持 :has() 的现代浏览器额外命中 */
.nav-group.nav-flyout-open > .nav-group-items:has(> .nav-subgroup) {
  display: block;
}
/* 分类卡片：inline-table 左右并排（每个卡片自身是个小表格，内容按需撑宽撑高）。
   inline-table 在老 WebKit 上渲染稳定，不会塌缩。相邻卡片用 margin 间距分隔。
   W8 苹果简约风：分类只留极浅背景（--bg-tertiary）做分区，去边框。 */
.nav-group-items.has-subgroup > .nav-subgroup,
.nav-group-items:has(> .nav-subgroup) > .nav-subgroup {
  display: inline-table;
  vertical-align: top;
  width: auto;
  min-width: 120px;
  margin: 0 6px 8px 0;         /* 右/下间距分隔相邻卡片 */
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 6px 6px 8px;
}
.nav-group-items.has-subgroup > .nav-item,
.nav-group-items:has(> .nav-subgroup) > .nav-item {
  /* 扁平项 block 占整行。覆盖基础 .nav-item 的 display:flex + width:100%——
     flex 在某些 table/inline-table 上下文里会让文字竖排（一字一行）。
     white-space:nowrap 确保菜单文字不换行（即使面板偏窄）。 */
  display: block;
  width: auto;
  white-space: nowrap;
  text-align: left;
  margin-top: 4px;
}
/* 飞出内普通项：hover 苹果简约风——蓝底 + 蓝字（不位移、不变形，避免布局抖动）。
   W8 改动：去掉 padding-left 位移和左边框（位移会让相邻项视觉跳动），改纯背景+字色高亮，
   更接近 macOS 系统菜单的悬浮效果。 */
.nav-group-items > .nav-item,
.nav-group-items .nav-subgroup { break-inside: avoid; }
.nav-group-items .nav-item {
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-group-items .nav-item:hover {
  background: rgba(0,122,255,0.08);
  color: var(--apple-blue);
}
/* 当前激活项保持高亮 */
.nav-group-items .nav-item.active {
  background: rgba(0,122,255,0.1);
  color: var(--apple-blue);
  font-weight: 600;
}

/* W7-2：飞出面板内 .nav-subgroup 从「手风琴」改「分类区块」——
   头部作分类标题，子项常展开成列表（不再靠箭头展开）。W3/W5c 的 nav-subgroup 数据结构复用为分类。 */
.nav-subgroup { margin-bottom: 6px; break-inside: avoid; }
.nav-subgroup-head { display: flex; align-items: center; gap: 2px; }
.nav-subgroup-head .nav-item { flex: 1; min-width: 0; margin-bottom: 0; font-weight: 600; }
/* 分类标题：飞出内做成「分区标签」——W8 苹果简约风去掉下分隔线（卡片本身已有背景分区，
   再加横线会显冗余），用小字号+次要色+大写感字距拉开层级，标题不参与 hover 变蓝（保持中性标识）。 */
.nav-group-items .nav-subgroup > .nav-subgroup-head {
  margin-bottom: 2px;
  padding: 2px 6px 0;
}
.nav-group-items .nav-subgroup > .nav-subgroup-head .nav-item {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.nav-group-items .nav-subgroup > .nav-subgroup-head .nav-item:hover {
  background: transparent;
  color: var(--text-tertiary);
}
/* 飞出内箭头无意义（子项常展开），隐藏；轨/移动端仍可能用到，仅飞出内隐藏 */
.nav-group-items .nav-sub-arrow { display: none; }
.nav-sub-arrow {
  border: none;
  background: rgba(0,122,255,0.06);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 6px 9px;
  margin-left: 2px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.nav-sub-arrow:hover { color: var(--apple-blue); background: rgba(0,122,255,0.14); }
/* 飞出内子项列表常展开（不依赖 .expanded）。卡片内去掉大缩进，子项做成有间距的独立行。
   W8 苹果简约风：圆角用 token、字号 13px、行距更舒展（margin-bottom 2px），hover 时仅变蓝底。 */
.nav-group-items .nav-subitems { display: block; padding-left: 0; }
.nav-group-items .nav-subitems .nav-item {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 2px;
}
.nav-subitems { display: none; padding-left: 18px; }
.nav-subgroup.expanded > .nav-subitems { display: block; }
.nav-subitem { padding: 7px 12px; font-size: 13px; }
/* W8：飞出内子项 hover 不再位移（与 .nav-subitems .nav-item 的新 hover 风格一致），
   轨/移动端手风琴里的 .nav-subitem 不受此规则影响，保持默认。 */

/* ============================================================
   W7-5：【根级】.nav-subgroup（直挂 .nav-menu，不在任何 .nav-group 内——当前仅「审批中心」）
   与一级分组行为对齐：轨里只显示 head，hover 向右飞出子项面板（面板=.nav-subitems）。
   用 .nav-menu > .nav-subgroup 精确选中根级；面板内部分类子分组是 .nav-group-items .nav-subgroup，
   不匹配，形态不受影响。飞出显隐只由 .nav-flyout-open 驱动（JS 定位 fixed），与一级分组同款。
   ============================================================ */
/* head 平时作轨内一级入口（内边距/hover 与 .nav-group-title 对齐）；子项藏起，hover 才飞出 */
.nav-menu > .nav-subgroup { margin-bottom: 4px; position: relative; }
.nav-menu > .nav-subgroup > .nav-subgroup-head {
  padding: 4px 8px 4px 6px;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}
.nav-menu > .nav-subgroup > .nav-subgroup-head:hover,
.nav-menu > .nav-subgroup.nav-flyout-open > .nav-subgroup-head {
  background: rgba(0,122,255,0.06);
}
/* 箭头与一级分组箭头对齐：右向常驻示意「hover 飞出」，弱化按钮外观（去底/缩内距），飞出时加深 */
.nav-menu > .nav-subgroup > .nav-subgroup-head .nav-sub-arrow {
  display: inline-block;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 10px;
  padding: 4px 6px;
}
.nav-menu > .nav-subgroup > .nav-subgroup-head .nav-sub-arrow:hover,
.nav-menu > .nav-subgroup.nav-flyout-open > .nav-subgroup-head .nav-sub-arrow {
  color: var(--apple-blue);
  background: transparent;
}
/* 飞出面板本体：与一级分组飞出面板（W8 苹果简约风）同款——纯白 + 两级柔光阴影 + 极细边框，
   明显浮于左轨。定位（left/top）交给 nav-flyout.js；此处只给固定外观。
   width:max-content 让面板宽度贴合内容（与一级分组面板一致）。 */
.nav-menu > .nav-subgroup.nav-flyout-open > .nav-subitems {
  display: block;
  position: fixed;
  z-index: 200;
  min-width: 200px;
  max-width: 620px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.14), 0 4px 14px rgba(0,0,0,0.08);
}
/* 飞出面板内子项：W8 苹果简约风——hover/active 仅蓝底+蓝字，不位移（与一级分组面板一致） */
.nav-menu > .nav-subgroup.nav-flyout-open > .nav-subitems .nav-item {
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-menu > .nav-subgroup.nav-flyout-open > .nav-subitems .nav-item:hover {
  background: rgba(0,122,255,0.08);
  color: var(--apple-blue);
}
.nav-menu > .nav-subgroup.nav-flyout-open > .nav-subitems .nav-item.active {
  background: rgba(0,122,255,0.1);
  color: var(--apple-blue);
  font-weight: 600;
}

/* W2：菜单同级拖拽排序视觉指示（js/menu-prefs.js） */
.nav-menu .mp-dragging { opacity: 0.45; }
.nav-menu .mp-drop-before { box-shadow: 0 -2px 0 0 var(--apple-blue); }
.nav-menu .mp-drop-after { box-shadow: 0 2px 0 0 var(--apple-blue); }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

/* ========== Main ========== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.header {
  height: var(--header-height);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  flex-shrink: 0;
  z-index: 5;
}
.header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Download links in header */
.header-download-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-dl-link {
  position: relative;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}
.header-dl-link:hover {
  background: rgba(0,0,0,0.04);
  color: var(--apple-blue);
}
/* CSS-only QR Code popup */
.qr-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  border: 1px solid #e5e5e5;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 2000;
  text-align: center;
  min-width: 180px;
  pointer-events: none;
}
.qr-popup::after {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}
/* Show popup on hover */
.header-dl-link:hover .qr-popup {
  opacity: 1;
  visibility: visible;
}
/* Prevent hiding when hovering over popup itself */
.header-dl-link:hover .qr-popup,
.qr-popup:hover {
  opacity: 1;
  visibility: visible;
}
#user-info {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.btn-logout {
  padding: 6px 14px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
  font-family: inherit;
}
.btn-logout:hover {
  border-color: var(--apple-red);
  color: var(--apple-red);
  background: rgba(255,59,48,0.04);
}

.content {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.content iframe.page-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  position: absolute;
  inset: 0;
}