/* 从 nav.html 原位迁移，必须保持原有选择器和级联顺序。 */
  /* 页签栏收起/展开时，"标题到上方边界"的距离保持一致（= 容器上内边距 20px）：
     收起态主内容区紧贴顶栏底部，offset+collapsed 的透明感应条悬浮在容器上内边距区域内；
     展开态页签栏把内容下推 open-height，栏底即内容顶。
     必须保持 offset + collapsed-height ≤ 容器上内边距(20px)，否则感应条盖住标题。 */
  :root { --bozhi-topbar-height: 44px; --bozhi-tabs-offset: 4px; --bozhi-tabs-collapsed-height: 16px; --bozhi-tabs-open-height: 36px; --bozhi-shell-dark: #0b1220; --bozhi-shell-dark-2: #121b2b; }
  html { height: 100%; overflow: hidden; }
  body { display: flex; height: 100%; margin: 0; overflow: hidden !important; font-family: "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }
  .top-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--bozhi-topbar-height); background: #ffffff; border-bottom: 1px solid #e7eaf1; display: flex; align-items: center; padding: 0 14px 0 18px; z-index: 100; -webkit-app-region: drag; }
  .window-controls { display: flex; align-items: center; gap: 7px; margin-right: 12px; -webkit-app-region: no-drag; flex-shrink: 0; }
  .top-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; -webkit-app-region: no-drag; }
  /* 顶栏壳级动作用纯图标：带边框+文字的按钮在空顶栏里呈卡片感，与左侧窗口按钮体系不协调；
     可发现性由按钮 title/aria-label 的 tooltip 兜底。
     按钮带 window-btn 类只为进入 ops-classic.css 归一化的 :not() 排除清单（该规则 border/background
     全 !important，常规特异性赢不了）；选择器用 .window-btn.top-bar-action（0-2-0）压过 .window-btn（0-1-0）
     的 12px 圆形交通灯样式，hover 需 0-3-0 同时盖掉 .window-btn:hover 的 brightness 滤镜。 */
  .window-btn.top-bar-action { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #475467; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
  .window-btn.top-bar-action:hover { background: #f2f4f7; color: #6941c6; filter: none; }
  .window-btn.top-bar-action:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(127,86,217,.16); }
  .window-btn.top-bar-action svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  .window-btn { width: 12px; height: 12px; border: 0; border-radius: 50%; cursor: pointer; font-size: 0; line-height: 1; padding: 0; transition: filter 0.15s; }
  .top-bar-logo { display: flex; align-items: center; gap: 10px; -webkit-app-region: no-drag; }
  .top-bar-logo-mark { width: 32px; height: 32px; display: block; }
  .top-bar-brand { font-size: 20px; font-weight: 700; color: #0b1220; letter-spacing: 0; line-height: 1; }
  .top-bar-slogan { font-size: 12px; color: #667085; margin-top: 3px; font-weight: 600; }
  .top-bar-slogan .focus { color: #7f56d9; font-weight: 700; }
  .top-bar-user { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; -webkit-app-region: no-drag; }
  .top-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #9e77ed, #6941c6); display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 700; box-shadow: none; }
  .top-user-trigger { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border: 0; background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: #344054; box-shadow: none; }
  .top-user-trigger:hover { background: transparent; box-shadow: none; }
  .top-user-trigger:hover .top-user-avatar { box-shadow: 0 0 0 3px rgba(127,86,217,.14); }
  .top-user-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(127,86,217,.16); }
  .user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
  .user-menu { position: absolute; top: 46px; right: 0; width: 220px; background: #fff; border: 1px solid #eaecf0; border-radius: 8px; box-shadow: 0 18px 42px rgba(15,23,42,.16); display: none; overflow: hidden; }
  .user-menu.show { display: block; }
  .user-menu-head { padding: 14px; border-bottom: 1px solid #f0f2f5; }
  .window-btn.close { background: #ff5f57; }
  .window-btn.minimize { background: #febc2e; }
  .window-btn.maximize { background: #28c840; }
  .window-btn:hover { filter: brightness(0.85); }
  .user-menu-item { width: 100%; height: 40px; border: 0; background: #fff; color: #344054; text-align: left; padding: 0 14px; cursor: pointer; font-size: 14px; }
  .user-menu-item:hover { background: #f9fafb; }
  .page-tabs-bar { position: fixed; top: calc(var(--bozhi-topbar-height) + var(--bozhi-tabs-offset)); left: 216px; right: 0; height: var(--bozhi-tabs-collapsed-height); z-index: 88; display: flex; align-items: center; gap: 8px; padding: 0 22px; background: transparent; border-bottom: 1px solid transparent; overflow: hidden; transition: left .2s ease, height .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease; -webkit-app-region: no-drag; }
  .page-tabs-bar:hover,
  .page-tabs-bar:focus-within { height: var(--bozhi-tabs-open-height); background: rgba(247,249,251,.94); border-bottom-color: rgba(228,231,236,.86); box-shadow: 0 10px 26px rgba(15,23,42,.06); backdrop-filter: blur(12px); }
  body.page-tabs-pinned .page-tabs-bar { height: var(--bozhi-tabs-open-height); background: rgba(247,249,251,.94); border-bottom-color: rgba(228,231,236,.86); box-shadow: 0 10px 26px rgba(15,23,42,.06); backdrop-filter: blur(12px); }
  /* 页签条为纯文字页签行：无底槽容器，宽度随内容收缩、超宽时横向滚动。
     当前页用经营总览指标卡同款紫色高亮（淡紫底 + 紫边 + 辉光）指示，替代过去的药丸/分段控件。 */
  .page-tabs { display: flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .16s ease, transform .18s ease; }
  .page-tabs-bar:hover .page-tabs,
  .page-tabs-bar:focus-within .page-tabs,
  body.page-tabs-pinned .page-tabs { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tabs-tools { display: inline-flex; align-items: center; gap: 4px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .16s ease, transform .18s ease; flex: 0 0 auto; }
  .page-tabs-bar:hover .page-tabs-tools,
  .page-tabs-bar:focus-within .page-tabs-tools,
  body.page-tabs-pinned .page-tabs-tools { opacity: 1; transform: translateY(0); pointer-events: auto; }
  /* 固定按钮做成无边框幽灵图标，保持在页签末尾（工具区惯例，且自动隐藏条展开时位置稳定）：
     平时弱灰，hover 淡紫底，固定态实心品牌紫，不再画成带框方块。 */
  .page-tabs-tool { width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: #98a2b3; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
  .page-tabs-tool:hover { background: #f4ebff; color: #7f56d9; }
  .page-tabs-tool.active { background: #7f56d9; color: #fff; box-shadow: 0 0 0 3px rgba(127,86,217,.14); }
  .page-tabs-tool svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  /* 页签为纯文字样式：默认无边框无底色；hover 淡紫轻反馈；选中页签直接框上品牌紫——
     白底 + #7f56d9 实框（不叠光晕环，避免边框外看起来多一层框），紫色与侧栏选中态同一品牌紫锚点。 */
  .page-tab { height: 30px; max-width: 210px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #667085; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12.5px; font-weight: 650; line-height: 1; cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }
  .page-tab:hover { background: rgba(127,86,217,.06); border-color: rgba(127,86,217,.18); color: #475467; }
  .page-tab.active { background: #ffffff; border-color: #7f56d9; color: #6941c6; }
  .page-tab-title { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* 关闭按钮平时隐藏、hover 或激活页签才显示；始终保留 16px 占位，避免显隐时标题横向跳动。 */
  .page-tab-close { width: 16px; height: 16px; border: 0; border-radius: 999px; background: transparent; color: #98a2b3; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; font-size: 14px; line-height: 1; flex: 0 0 auto; opacity: 0; pointer-events: none; transition: opacity .12s ease, background .16s ease, color .16s ease; }
  .page-tab:hover .page-tab-close, .page-tab.active .page-tab-close, .page-tab-close:focus-visible { opacity: 1; pointer-events: auto; }
  .page-tab-close:hover { background: #f2f4f7; color: #344054; }
  body.sidebar-collapsed .page-tabs-bar { left: 72px; }
  .sidebar { width: 216px; background: #ffffff; color: #475467; min-height: calc(100vh - var(--bozhi-topbar-height)); position: fixed; left: 0; top: var(--bozhi-topbar-height); z-index: 90; transition: width .2s ease; overflow: visible; display: flex; flex-direction: column; border-right: 1px solid #e7eaf1; }
  body.sidebar-state-preloading .sidebar,
  body.sidebar-state-preloading .main-content,
  body.sidebar-state-preloading .page-tabs-bar { transition: none !important; }
  .sidebar-toggle { position: absolute; top: 14px; right: -26px; width: 26px; height: 64px; border: 1px solid #e7eaf1; border-left: 0; border-radius: 0 14px 14px 0; background: #ffffff; color: #667085; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 8px 12px 28px rgba(15,23,42,.10); opacity: 0; pointer-events: none; transform: translateX(-6px); transition: opacity .16s ease, transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease; z-index: 3; }
  .sidebar:hover .sidebar-toggle, .sidebar.sidebar-toggle-visible .sidebar-toggle, .sidebar-toggle:focus-visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .sidebar-toggle:hover, .sidebar-toggle:focus-visible { background: #f8f5ff; border-color: #e0d8fb; color: #7f56d9; outline: none; }
  .sidebar-toggle svg { width: 17px; height: 17px; transition: transform .2s ease; }
  .sidebar-brand { margin: 16px 14px 14px; padding: 0; min-height: 52px; border: 0; border-radius: 0; display: flex; align-items: center; gap: 11px; background: transparent; box-shadow: none; overflow: hidden; }
  .sidebar-brand-mark { width: 38px; height: 38px; border-radius: 10px; display: block; flex: 0 0 auto; box-shadow: 0 10px 22px rgba(158,119,237,.30); }
  .sidebar-brand-copy { min-width: 0; display: grid; gap: 3px; }
  .sidebar-brand-name { color: #101828; font-size: 18px; font-weight: 900; line-height: 1; white-space: nowrap; }
  .sidebar-brand-sub { color: #667085; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
  /* 品牌紫锚点：slogan 高亮、选中态、头像统一走柔化色阶 #9e77ed / #7f56d9 / #6941c6 / #53389e（2026-07-25 由霓虹色阶降饱和，logo SVG 保留原亮紫属品牌资产），禁止再引入第二种紫。 */
  .sidebar-brand-sub .focus { color: #9e77ed; font-weight: 900; }
  .sidebar-menu { padding: 0 10px 12px; display: grid; grid-auto-rows: max-content; align-content: start; gap: 2px; overflow-x: hidden; overflow-y: auto; flex: 0 0 auto; min-height: 0; max-height: calc(100vh - 210px); scrollbar-width: none; }
  .sidebar-menu::-webkit-scrollbar { display: none; }
  .sidebar-section { margin: 13px 2px 5px; padding: 0 10px; color: #98a2b3; font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
  .sidebar-section:first-child { margin-top: 2px; }
  .sidebar-item { min-height: 38px; height: 38px; padding: 0 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #475467; position: relative; white-space: nowrap; }
  .sidebar-item:hover { background: #f8f5ff; color: #475467; }
  /* 选中态只用"微渐变底 + 轻投影"表达，不要再加左竖条，避免选中信号叠加。 */
  .sidebar-item.active { background: linear-gradient(135deg, #f8f4ff 0%, #f0e9ff 100%); color: #7f56d9; font-weight: 700; box-shadow: 0 6px 14px rgba(158,119,237,.16), inset 0 1px 0 rgba(255,255,255,.85); }
  .sidebar-icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #98a2b3; transition: color .15s ease; }
  .sidebar-item:hover .sidebar-icon { color: #8a7d9e; }
  .sidebar-item.active .sidebar-icon { color: #9e77ed; }
  .sidebar-count-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f04438; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
  .sidebar-count-badge[hidden] { display: none; }
  .sidebar-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .sidebar-label { overflow: hidden; text-overflow: ellipsis; transition: opacity .16s ease; }
  .sidebar.collapsed,
  body.sidebar-collapsed .sidebar { width: 72px; }
  .sidebar.collapsed .sidebar-toggle svg,
  body.sidebar-collapsed .sidebar .sidebar-toggle svg { transform: rotate(180deg); }
  .sidebar-user { margin: auto 10px 14px; position: relative; -webkit-app-region: no-drag; }
  .sidebar-user-trigger { width: 100%; min-height: 52px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #344054; padding: 8px 10px; display: flex; align-items: center; justify-content: flex-start; gap: 11px; cursor: pointer; text-align: left; box-shadow: none; }
  .sidebar-user-trigger:hover { background: #f8f5ff; }
  .sidebar-user .top-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #9e77ed, #6941c6); color: #fff; flex: 0 0 auto; box-shadow: 0 8px 18px rgba(105,65,198,.22); }
  .sidebar-user-setting-label { color: #475467; font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
  .sidebar-user .user-menu { left: 0; right: 0; top: auto; bottom: 62px; width: 100% !important; max-height: calc(100vh - 88px); box-sizing: border-box; padding: 8px !important; border-radius: 10px !important; border-color: #d9e0ea !important; background: #fff !important; box-shadow: 0 18px 42px rgba(15,23,42,.20) !important; z-index: 120; overflow-x: hidden !important; overflow-y: auto !important; }
  .sidebar-user .user-menu-head { padding: 8px 10px 10px !important; border-bottom: 1px solid #edf0f3 !important; }
  .sidebar-user .user-menu .user-name { max-width: 100%; color: #101828 !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 850 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu-group { padding: 6px 0; border-bottom: 1px solid #edf0f3; }
  .user-menu-group:last-child { border-bottom: 0; padding-bottom: 0; }
  .user-menu-section-label { padding: 3px 9px 5px; color: #98a2b3; font-size: 11px; font-weight: 800; line-height: 1.2; }
  .sidebar-user .user-menu-item { width: 100%; height: 38px !important; min-height: 38px !important; margin: 1px 0 0 !important; padding: 0 9px !important; border-radius: 8px !important; color: #344054 !important; font-size: 13px !important; font-weight: 750 !important; display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
  .user-menu-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; flex: 0 0 auto; }
  .user-menu-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .sidebar-user .user-menu-item:hover { background: #f6f8fb !important; color: #101828 !important; }
  .sidebar-user .user-menu-item.active { background: #f4ebff !important; color: #6941c6 !important; }
  .sidebar-user .user-menu-item.danger { color: #b42318 !important; }
  .sidebar-user .user-menu-item.danger:hover { background: #fff1f3 !important; color: #912018 !important; }
  .sidebar.collapsed .sidebar-brand,
  body.sidebar-collapsed .sidebar .sidebar-brand { justify-content: center; margin: 14px 9px 12px; padding: 0; min-height: 48px; }
  .sidebar.collapsed .sidebar-brand-copy,
  body.sidebar-collapsed .sidebar .sidebar-brand-copy,
  .sidebar.collapsed .sidebar-user-setting-label,
  body.sidebar-collapsed .sidebar .sidebar-user-setting-label { display: none; }
  .sidebar.collapsed .sidebar-brand-mark,
  body.sidebar-collapsed .sidebar .sidebar-brand-mark,
  .sidebar.collapsed .sidebar-user .top-user-avatar,
  body.sidebar-collapsed .sidebar .sidebar-user .top-user-avatar { width: 38px; height: 38px; }
  .sidebar.collapsed .sidebar-menu,
  body.sidebar-collapsed .sidebar .sidebar-menu { padding-left: 10px; padding-right: 10px; }
  .sidebar.collapsed .sidebar-item,
  body.sidebar-collapsed .sidebar .sidebar-item { justify-content: center; padding: 0; gap: 0; }
  .sidebar.collapsed .sidebar-count-badge,
  body.sidebar-collapsed .sidebar .sidebar-count-badge { position: absolute; top: 1px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; line-height: 16px; }
  .sidebar.collapsed .sidebar-label,
  body.sidebar-collapsed .sidebar .sidebar-label { width: 0; opacity: 0; pointer-events: none; }
  .sidebar.collapsed .sidebar-section,
  body.sidebar-collapsed .sidebar .sidebar-section { height: 1px; margin: 8px 0 3px; padding: 0; color: transparent; overflow: hidden; }
  .sidebar.collapsed .sidebar-user,
  body.sidebar-collapsed .sidebar .sidebar-user { margin-left: 9px; margin-right: 9px; }
  .sidebar.collapsed .sidebar-user-trigger,
  body.sidebar-collapsed .sidebar .sidebar-user-trigger { justify-content: center; min-height: 62px; padding: 0; }
  .sidebar.collapsed .sidebar-user .user-menu,
  body.sidebar-collapsed .sidebar .sidebar-user .user-menu { left: 58px; right: auto; bottom: 8px; width: 212px !important; }
  /* 套餐到期/快到期常驻徽章：告警黄语义（不占用品牌紫），收起态退化为圆点避免 72px 宽度溢出。 */
  .plan-expired-badge { margin: 0 2px 8px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #fedf89; border-radius: 8px; background: #fffaeb; color: #b54708; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
  .plan-expired-badge:hover { background: #fef0c7; border-color: #fec84b; }
  .plan-expired-badge[hidden] { display: none; }
  .plan-expired-dot { width: 7px; height: 7px; border-radius: 999px; background: #dc6803; flex: 0 0 auto; }
  .sidebar.collapsed .plan-expired-badge,
  body.sidebar-collapsed .sidebar .plan-expired-badge { justify-content: center; padding: 7px 0; }
  .sidebar.collapsed .plan-expired-text,
  body.sidebar-collapsed .sidebar .plan-expired-text { display: none; }
  .main-content,
  body.ops-page[class] .main-content {
    position: fixed !important;
    left: 216px !important;
    right: 0 !important;
    top: var(--bozhi-topbar-height) !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    flex: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: left .2s ease, top .18s ease;
  }
  /* 展开态把主内容区下推到页签栏底部，收起态紧贴顶栏底部——
     两种状态下"标题到上方边界"的距离都等于容器上内边距 20px，切换时标题相对间距不变。 */
  .page-tabs-bar:hover ~ .main-content,
  .page-tabs-bar:focus-within ~ .main-content,
  body:has(.page-tabs-bar:hover) .main-content,
  body:has(.page-tabs-bar:focus-within) .main-content,
  body.page-tabs-pinned .main-content,
  body.ops-page[class]:has(.page-tabs-bar:hover) .main-content,
  body.ops-page[class]:has(.page-tabs-bar:focus-within) .main-content,
  body.ops-page[class].page-tabs-pinned .main-content { top: calc(var(--bozhi-topbar-height) + var(--bozhi-tabs-offset) + var(--bozhi-tabs-open-height)) !important; }
  /* 收起态感应条悬浮在内容上方，不带毛玻璃，避免滚动时内容经过感应条出现模糊带；
     展开时才启用毛玻璃，让页签栏与下方内容拉开层次。 */
  body.page-tabs-hover-suppressed .page-tabs-bar { height: var(--bozhi-tabs-collapsed-height) !important; background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
  body.page-tabs-hover-suppressed .page-tabs,
  body.page-tabs-hover-suppressed .page-tabs-tools { opacity: 0 !important; transform: translateY(-8px) !important; pointer-events: none !important; visibility: hidden !important; }
  body.page-tabs-hover-suppressed .page-tabs-tool { pointer-events: none !important; }
  /* 抑制态下栏体保持收起高度，主内容区也必须停在收起位置；
     特异性与上方 hover 下推规则持平，靠级联顺序取胜，不要提前。 */
  body.page-tabs-hover-suppressed .main-content,
  body.ops-page[class].page-tabs-hover-suppressed .main-content { top: var(--bozhi-topbar-height) !important; }
  body.sidebar-collapsed .main-content,
  body.ops-page[class].sidebar-collapsed .main-content { left: 72px !important; }
  .app-back-btn { width: 44px; height: 44px; border: 1px solid #d9e0ea; border-radius: 12px; background: #fff; color: #344054; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 8px 22px rgba(16,24,40,.06); -webkit-app-region: no-drag; }
  .app-back-btn:hover { color: #7f56d9; border-color: #e2d8fa; background: #f8f5ff; transform: translateX(-1px); box-shadow: 0 10px 26px rgba(127,86,217,.10); }
  .app-back-btn:focus-visible { outline: none; border-color: #7f56d9; box-shadow: 0 0 0 3px rgba(127,86,217,.14); }
  .app-back-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  /* 全局 toast 与个人中心弹窗一致走浅色卡片 + 品牌紫点缀，禁止回退深色浮层。
     位置尽量贴近右上角：顶部基于 --bozhi-topbar-height（Electron 44px / 浏览器运行时 0），
     只留 8px 间隙，右侧 12px；不能用固定 56px，否则浏览器运行时（无顶栏）会悬空。 */
  .global-toast { position: fixed; right: 12px; top: calc(var(--bozhi-topbar-height) + 8px); z-index: 2000; min-width: 300px; max-width: 420px; background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 14px 16px; box-shadow: 0 18px 42px rgba(15,23,42,.16); display: none; }
  .global-toast.show { display: block; animation: appAlertIn .16s ease-out; }
  .global-toast-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #101828; display: flex; align-items: center; gap: 8px; }
  .global-toast-title::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #9e77ed; flex: 0 0 auto; }
  .global-toast-message { font-size: 13px; color: #475467; line-height: 1.5; }
  /* 告警变体与侧栏套餐到期徽章同一套黄：#fffaeb/#fedf89/#b54708/#dc6803，状态色全站唯一来源。 */
  .global-toast.warning { background: #fffaeb; border-color: #fedf89; }
  .global-toast.warning .global-toast-title { color: #b54708; }
  .global-toast.warning .global-toast-title::before { background: #dc6803; }
  .global-toast.warning .global-toast-message { color: #b54708; }
  .profile-modal { position: fixed; inset: 0; background: rgba(15,23,42,.22); backdrop-filter: blur(10px); z-index: 2100; display: none; align-items: center; justify-content: center; padding: 22px; }
  .profile-modal.show { display: flex; }
  .profile-panel { width: min(760px, calc(100vw - 44px)); min-height: min(520px, calc(100vh - 44px)); background: #fff; border-radius: 14px; border: 1px solid rgba(228,231,236,.92); box-shadow: 0 28px 72px rgba(15,23,42,.22); overflow: hidden; display: grid; grid-template-columns: 178px minmax(0, 1fr); position: relative; }
  /* 个人中心弹窗与全站一致走浅色 + 品牌紫：侧栏浅紫灰、激活页签白底紫字，禁止回退深色侧栏。 */
  .profile-sidebar { background: #f8f7fc; border-right: 1px solid #eceaf4; padding: 24px 10px; }
  .profile-title { font-weight: 850; font-size: 17px; color: #0f172a; line-height: 1; margin: 0 10px 18px; }
  .profile-tabs { display: grid; gap: 4px; }
  .profile-tab { position: relative; height: 38px; border: 0; border-radius: 8px; background: transparent; color: #667085; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 14px; font-weight: 750; text-align: left; cursor: pointer; box-shadow: none; transform: none; }
  .profile-modal .profile-tab:not(.active),
  body .profile-modal .profile-tab:not(.active) { border: 0 !important; background: transparent !important; color: #667085 !important; box-shadow: none !important; transform: none !important; }
  .profile-tab:hover { background: #efecf8; color: #101828; }
  .profile-modal .profile-tab:hover { background: #efecf8 !important; color: #101828 !important; }
  .profile-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(127,86,217,.16); }
  .profile-tab.active,
  .profile-tab.active:hover,
  .profile-modal .profile-tab.active,
  .profile-modal .profile-tab.active:hover { background: #ffffff !important; border: 0 !important; color: #6941c6 !important; box-shadow: 0 1px 3px rgba(15,23,42,.08) !important; }
  .profile-tab svg,
  .profile-row-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  .profile-main { padding: 50px 44px 34px; min-width: 0; }
  .profile-close { position: absolute; right: 25px; top: 24px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #667085; cursor: pointer; font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  .profile-close:hover { background: #f2f4f7; color: #111827; }
  .profile-form { padding-top: 28px; }
  .profile-pane { display: none; padding-top: 16px; }
  .profile-pane.active { display: block; }
  .profile-section { display: grid; gap: 0; }
  .profile-field { min-height: 58px; border-bottom: 1px solid #edf0f3; display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 16px; }
  .profile-field label { color: #344054; font-size: 14px; font-weight: 750; }
  .profile-field input { width: 100%; height: 38px; border: 1px solid transparent; border-radius: 8px; padding: 0 10px; color: #475467; background: transparent; font-size: 14px; outline: none; text-align: right; }
  .profile-field input:not(:disabled):hover { background: #f8fafc; border-color: #e4e7ec; }
  .profile-field input:focus { border-color: #9e77ed; box-shadow: 0 0 0 3px rgba(158,119,237,.12); }
  .profile-field input:disabled,
  .profile-modal .profile-field input:disabled { color: #667085 !important; -webkit-text-fill-color: #667085 !important; background: #eef2f6 !important; background-color: #eef2f6 !important; border-color: #d0d5dd !important; box-shadow: inset 0 0 0 999px #eef2f6 !important; cursor: not-allowed; opacity: 1 !important; }
  .profile-section-actions { display: flex; justify-content: flex-end; padding-top: 12px; }
  .profile-btn { height: 38px; border-radius: 8px; border: 1px solid #d0d5dd; background: #fff; color: #344054; padding: 0 15px; cursor: pointer; font-weight: 700; }
  .profile-btn.primary { border-color: #6941c6; background: #6941c6; color: #fff; }
  .profile-message { min-height: 18px; margin-top: 12px; font-size: 13px; color: #667085; text-align: right; }
  .profile-message.error { color: #b42318; }
  .profile-message.success { color: #067647; }
  @media (max-width: 720px) {
    .profile-panel { grid-template-columns: 1fr; width: min(520px, calc(100vw - 28px)); }
    .profile-sidebar { border-right: 0; border-bottom: 1px solid #e4e7ec; padding: 18px 18px 14px; background: #fbfcfe; }
    .profile-title { color: #101828; margin: 0 0 14px; }
    .profile-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-modal .profile-tab:not(.active) { color: #667085 !important; }
    .profile-modal .profile-tab:hover { background: #f6f8fb !important; color: #101828 !important; }
    .profile-main { padding: 54px 22px 24px; }
    .profile-field { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; align-items: start; }
    .profile-field input { text-align: left; padding-left: 0; }
    .profile-field input:disabled { padding-left: 10px; }
  }
  .app-alert-overlay { position: fixed; inset: 0; z-index: 2300; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(15,23,42,.36); backdrop-filter: blur(4px); }
  .app-alert-overlay.show { display: flex; }
  .app-alert-dialog { width: min(420px, 100%); background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; box-shadow: 0 28px 70px rgba(15,23,42,.28); overflow: hidden; animation: appAlertIn .16s ease-out; }
  .app-alert-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 8px; }
  .app-alert-icon { width: 34px; height: 34px; border-radius: 999px; background: #f0e9ff; color: #7f56d9; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; }
  .app-alert-icon.error { background: #fef3f2; color: #d92d20; }
  .app-alert-icon.warning { background: #fffaeb; color: #dc6803; }
  .app-alert-title { color: #101828; font-size: 17px; font-weight: 700; line-height: 1.3; }
  .app-alert-message { color: #475467; font-size: 14px; line-height: 1.65; padding: 6px 18px 20px 64px; white-space: pre-wrap; word-break: break-word; }
  .app-alert-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; background: #f8fafc; border-top: 1px solid #edf0f3; }
  .app-alert-btn { height: 38px; min-width: 86px; border: 1px solid #7f56d9; border-radius: 8px; background: #7f56d9; color: #fff; padding: 0 16px; cursor: pointer; font-size: 14px; font-weight: 600; }
  .app-alert-btn:hover { background: #53389e; border-color: #53389e; }
  .app-alert-btn.secondary { border-color: #d0d5dd; background: #fff; color: #344054; }
  .app-alert-btn.secondary:hover { background: #f8fafc; border-color: #b8c0cc; }
  .bozhi-select { position: relative; width: 100%; min-width: 0; display: block; }
  .bozhi-native-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; left: 0; top: 0; }
  .bozhi-select-trigger { width: 100%; height: var(--bozhi-select-height, 38px); border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: #344054; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px 0 12px; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; white-space: nowrap; min-width: 0; }
  .bozhi-select-trigger:hover { background: #fbfcfd; border-color: #b8c0cc; }
  .bozhi-select.open .bozhi-select-trigger { border-color: #7f56d9; box-shadow: 0 0 0 3px rgba(127,86,217,.12); }
  .bozhi-select-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-flex; align-items: center; gap: 8px; }
  .bozhi-select-arrow { width: 16px; height: 16px; flex: none; color: #667085; transition: transform .16s ease; }
  .bozhi-select.open .bozhi-select-arrow { transform: rotate(180deg); }
  .bozhi-select-menu { position: fixed; z-index: 2400; min-width: 160px; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid #e4e7ec; border-radius: 10px; background: #fff; box-shadow: 0 18px 42px rgba(15,23,42,.18); display: none; }
  .bozhi-select-menu.open { display: block; }
  .bozhi-select-option { width: 100%; min-height: 34px; border: 0; border-radius: 7px; background: transparent; color: #344054; display: flex; align-items: center; gap: 8px; padding: 7px 9px; font-size: 14px; cursor: pointer; text-align: left; line-height: 1.35; }
  .bozhi-select-option:hover { background: #f8fafc; }
  .bozhi-select-option.selected { background: #f0e9ff; color: #0f5f5c; font-weight: 700; }
  .bozhi-select-check { width: 15px; flex: none; color: #7f56d9; visibility: hidden; text-align: center; }
  .bozhi-select-option.selected .bozhi-select-check { visibility: visible; }
  .bozhi-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bozhi-select-avatar { width: 26px; height: 26px; border-radius: 999px; background: #f0e9ff; color: #7f56d9; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; overflow: hidden; flex: 0 0 auto; }
  .bozhi-select-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .platform-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid #d8dee8; background: #fff; color: #5b6472; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
  .platform-badge.douyin { border-color: #d8dee8; background: #fff; color: #5b6472; }
  body .sidebar {
    background: #ffffff !important;
  }
  body .top-bar {
    height: var(--bozhi-topbar-height) !important;
    background: #ffffff !important;
    border-bottom-color: #e7eaf1 !important;
    box-shadow: none !important;
  }
  body .page-tabs-bar {
    top: calc(var(--bozhi-topbar-height) + var(--bozhi-tabs-offset)) !important;
  }
  body .sidebar {
    top: var(--bozhi-topbar-height) !important;
    min-height: calc(100vh - var(--bozhi-topbar-height)) !important;
  }
  body .sidebar-item.active {
    background: linear-gradient(135deg, #f8f4ff 0%, #f0e9ff 100%) !important;
    color: #7f56d9 !important;
    box-shadow: 0 6px 14px rgba(158,119,237,.16), inset 0 1px 0 rgba(255,255,255,.85) !important;
  }
  body .sidebar-item.active .sidebar-icon {
    color: #9e77ed !important;
  }
  body .sidebar-item.active .sidebar-label {
    color: #7f56d9 !important;
  }
  body .sidebar-item.active::before {
    display: none !important;
  }
  body .sidebar-item:hover {
    background: #f8f5ff !important;
    color: #475467 !important;
  }
  body .sidebar-user-trigger,
  body .sidebar-user-trigger:hover,
  body .sidebar-user-trigger:active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  body .sidebar-user-trigger:focus-visible,
  body .sidebar-brand:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(127,86,217, .18), inset 0 1px 0 rgba(255,255,255,.06);
  }
  /* page-tabs-tool 的 hover/active 视觉已由上方基础规则完整表达（幽灵按钮），不再参与这里的
     !important 覆盖；ops-classic 的 :is() 主按钮规则含 ID 分支，危险态必须限定复用按钮
     #appAlertOk，才能在双方都有 !important 时稳定覆盖紫色。 */
  body .app-back-btn:hover {
    background: #f0e9ff !important;
    border-color: #e2d8fa !important;
    color: #6941c6 !important;
  }
  body .app-alert-btn {
    background: #6941c6 !important;
    border-color: #6941c6 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(51, 78, 125, .14) !important;
  }
  /* ops-classic 会把所有弹窗图标覆盖成品牌紫；这里只恢复 error 告警的红色语义，普通提示继续沿用品牌色。 */
  body.ops-page .app-alert-icon.error {
    background: #fef3f2 !important;
    border-color: #fecdca !important;
    color: #d92d20 !important;
  }
  body.ops-page button#appAlertOk.app-alert-btn.danger:not(.secondary) {
    background: #d92d20 !important;
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .14) !important;
  }
  body.ops-page button#appAlertOk.app-alert-btn.danger:not(.secondary):hover {
    background: #b42318 !important;
    border-color: #b42318 !important;
  }
  @keyframes appAlertIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* 浏览器运行时没有窗口控制按钮，顶部条整条约掉；侧边栏/页签条/主内容的偏移都基于 --bozhi-topbar-height，置 0 后界面自动整体上移。 */
  body[data-bozhi-runtime="browser"] { --bozhi-topbar-height: 0px; }
  body[data-bozhi-runtime="browser"] .top-bar { display: none !important; }

  /* ===== 移动端抽屉导航（≤720px） =====
     设计约束：
     1. 抽屉是临时态：开关只切换 body.sidebar-drawer-open，禁止写 localStorage 的
        bozhiSidebarCollapsed（那是桌面端的持久偏好，污染后回桌面侧栏会被意外收起）。
     2. 桌面 collapsed(72px) 偏好在移动端一律忽略，抽屉永远以 216px 完整宽度展开。
     3. 覆盖 main-content/page-tabs-bar 的选择器必须与上方 L128-145/L160-161 保持完全
        相同的特异性并位于文件末尾，平级 !important 靠级联顺序取胜，不要改写更短的选择器。
     4. z-index 层级：遮罩 1500、抽屉 1510，必须高于 top-bar(100) 且低于
        global-toast(2000)/profile-modal(2100)，保证抽屉打开时弹窗提示仍可见。 */
  .sidebar-drawer-toggle { display: none; position: fixed; top: calc(var(--bozhi-topbar-height) + 10px); left: 10px; width: 44px; height: 44px; border: 1px solid #d9e0ea; border-radius: 12px; background: #fff; color: #344054; cursor: pointer; align-items: center; justify-content: center; padding: 0; z-index: 89; box-shadow: 0 8px 22px rgba(16,24,40,.06); }
  .sidebar-drawer-toggle:hover { color: #7f56d9; border-color: #e2d8fa; background: #f8f5ff; }
  .sidebar-drawer-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
  .sidebar-drawer-overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(15,23,42,.36); backdrop-filter: blur(4px); }
  .sidebar-drawer-overlay[hidden] { display: none; }
  @media (max-width: 720px) {
    .sidebar-drawer-toggle { display: inline-flex; }
    body.ops-page .sidebar,
    body.ops-page.sidebar-collapsed .sidebar,
    body.ops-page .sidebar.collapsed {
      width: 216px !important;
      top: 0 !important;
      min-height: 100vh !important;
      z-index: 1510;
      transform: translateX(-105%);
      transition: transform .22s ease;
      overflow-y: auto !important;
      box-shadow: none;
    }
    body.ops-page.sidebar-drawer-open .sidebar { transform: translateX(0); box-shadow: 24px 0 60px rgba(15,23,42,.22); }
    /* 桌面收起按钮 hover 才出现，触屏无法 hover，移动端直接隐藏。 */
    .sidebar-toggle { display: none !important; }
    body .page-tabs-bar,
    body.sidebar-collapsed .page-tabs-bar { left: 0 !important; }
    body.ops-page[class] .main-content,
    body.ops-page[class].sidebar-collapsed .main-content { left: 0 !important; }
  }