/* ============================================================
   小菊哥 · 左侧功能栏 HUD 重设计 v6 — 竖向玻璃边栏
   设计：左侧固定竖栏 = 品牌区 + 竖向功能导航 + 底部操作；
         顶部页头随内容滚动，不再固定。
   ============================================================ */

/* ===== 左侧边栏容器 ===== */
.topbar{
  position:fixed;left:0;top:0;bottom:0;z-index:100;
  width:200px;
  /* ═══ 侧栏自持令牌 Sidebar Tokens ═══
     侧栏的职责是「导航定位」，不是「氛围」（小米纪律③：密度靠结构，不靠装饰）。
     色值不再散落在选择器里，主题切换只改这里的令牌值。 */
  --sbb:#F7F9FC;        /* 侧栏底：小米页底家族的偏蓝档 */
  --sb-sub:#F1F3F7;     /* 子菜单 / 次级块底 */
  --sb-hov:rgba(15,23,42,.045);   /* 悬停底 */
  --sb-tint:rgba(255,103,0,.10); /* 激活底（小米橙） */
  --sb-line:#E8E8E8;    /* 分割线 */
  --sb-title:#0F172A;   /* 品牌名 / 用户名：最强一档 */
  --sb-ink:#5A6272;     /* 导航常态文字 */
  --sb-ink-a:#FF6700;   /* 导航激活文字（小米橙） */
  --sb-scroll:rgba(15,23,42,.16);
  color:var(--sb-ink);
  background:var(--sbb);
  border-right:1px solid var(--sb-line);
  box-shadow:none;
  transition:transform .3s ease;
}

[data-theme="dark"] .topbar{
  --sbb:#0B1A3C;--sb-sub:rgba(255,255,255,.06);--sb-hov:rgba(255,255,255,.07);
  --sb-tint:rgba(255,255,255,.13);--sb-line:rgba(255,255,255,.13);
  --sb-title:#FFFFFF;--sb-ink:rgba(255,255,255,.66);--sb-ink-a:#FFFFFF;
  --sb-scroll:rgba(255,255,255,.18);
  background:var(--sbb);border-right:1px solid var(--sb-line);box-shadow:none;
}

/* 顶部流光带（竖向变左侧流光） */
.topbar::before{content:'';display:none}

/* ===== 内部容器：垂直三栏 ===== */
.topbar-inner{
  display:flex;flex-direction:column;
  height:100%;
  padding:16px 12px 14px;
  position:relative;z-index:1;
}

/* ===== 边栏品牌区（简化：头像+名称+状态） ===== */
.sb-brand{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
  padding:0 2px 12px;
  border-bottom:1px solid var(--sb-line);
}
.sb-brand-core{
  display:flex;align-items:center;gap:9px;
  cursor:pointer;transition:opacity .2s;
  flex:1;min-width:0;
}
.sb-brand-core:hover{opacity:.92}
.sb-logo{
  width:36px;height:36px;border-radius:var(--r-sm);object-fit:cover;
  border:none;box-shadow:none;
  flex-shrink:0;
}
.sb-brand-tx{display:flex;flex-direction:column;gap:4px;line-height:1.15;min-width:0}
.sb-brand-name{
  font-size:16px;font-weight:500;letter-spacing:.2px;
  color:var(--sb-title);display:flex;align-items:center;gap:5px;
  white-space:nowrap;flex-shrink:0;
}
.sb-brand-name i{
  font-style:normal;font-size:11px;font-weight:600;
  color:var(--white);background:var(--ac-grad);
  padding:2px 5px;border-radius:var(--r-xs);
  box-shadow:none;
  letter-spacing:.3px;
}
.sb-brand-meta{display:flex;align-items:center}
.sb-meta-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2.5px 7px;border-radius:var(--r-lg);
  font-size:11px;font-weight:500;letter-spacing:.2px;
  color:var(--sb-ink);
  background:var(--sb-sub);
  border:none;
  box-shadow:none;
}
.sb-meta-tag .sb-meta-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--gr-400);
  box-shadow:none;
}
.sb-brand-actions{
  display:flex;align-items:center;gap:5px;
  flex-shrink:0;
}
.sb-close{
  display:none;width:28px;height:28px;border-radius:var(--r-sm);
  border:1px solid var(--sb-line);background:transparent;
  color:var(--sb-ink);font-size:var(--fs-bd);cursor:pointer;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.sb-close:hover{background:var(--sb-hov);color:var(--sb-title)}

/* v7：折叠/展开（.sb-collapse / .sb-reopen / body.topbar-collapsed）已整体下线——
   导航改为顶部横向导航后不存在「边栏折叠」概念。
   注意：老用户 localStorage 里的 xjg_sidebar_collapsed='1' 会把顶栏 translateX(-110%)
   推出屏幕，故 applySidebarCollapseState() 现在主动清理该标记（见 core.js）。 */

/* ===== 竖向导航区 =====
   基础态 = 移动端抽屉内的竖向列表；≥901px 由文件末尾的桌面媒体查询翻转为横向顶栏 */
.topnav-wrap{flex:1;overflow-y:auto;overflow-x:hidden;margin:10px -3px 8px;padding:0 3px}
.topnav-wrap::-webkit-scrollbar{width:3px}
.topnav-wrap::-webkit-scrollbar-thumb{background:var(--sb-scroll);border-radius:var(--r-xs)}
.topnav{
  display:flex;flex-direction:column;gap:4px;
}
.topnav .ni{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;
  color:var(--sb-ink);
  cursor:pointer;white-space:nowrap;letter-spacing:.2px;
  transition:background .18s,color .18s;
  border:none;
  overflow:hidden;
}
.topnav .ni .nv-i{
  width:21px;height:21px;flex-shrink:0;color:currentColor;transition:color .2s;
}
/* 任务待办数角标 */
.topnav .ni .nv-bdg{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-sm);
  background:var(--ac-2);color:var(--white);font-size:var(--fs-cap);font-weight:600;line-height:18px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:none;
}

/* hover 光晕 */
/* 激活指示条：3px 品牌色条（小米式：用位置+色条表达层级，不用浮起+阴影）
   条色随模块变（六色分类板），用户在任何页面一眼知道「我在哪个模块」 */
.topnav .ni::before{content:'';position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;background:var(--sb-ink-a);transform:translateY(-50%);opacity:0;transition:height .2s ease,opacity .2s ease}
.topnav .ni:hover{
  color:var(--sb-title);
  background:var(--sb-hov);
}
.topnav .ni:hover .nv-i{color:currentColor}

/* 激活态：浮起白 pill + 青蓝流光指示条 */
/* 化繁为简 v2：激活态 = 一层淡填充 + 品牌色图标。
   旧版是「白色浮起 pill + 3 层阴影 + 流光指示条」，且 --sl-900 从未定义
   → 深色模式下变成「白字 + 白底」，激活项文案实际不可见。 */
.topnav .ni.act{
  background:var(--sb-tint)!important;
  color:var(--sb-ink-a)!important;font-weight:600;
  border:none;
  box-shadow:none;
  transform:none;
}
.topnav .ni.act::before{height:18px;opacity:1}
.topnav .ni.act .nv-i{color:var(--sb-ink-a)}
.topnav .ni.act::after{content:'';display:none}
/* 六色分类板：激活条按模块着色（小米实测六色板，各出现 44~47 次）
   v9：顶部 7 项——组入口 #nv-data / #nv-crm 取代原先 6 项散列的 id */
#nv-gg.act::before{background:var(--c-blue)}
#nv-zx.act::before{background:var(--c-teal)}
#nv-ai.act::before{background:var(--c-indigo)}
#nv-pyq.act::before{background:var(--c-amber)}
#nv-data.act::before{background:var(--c-green)}
#nv-crm.act::before{background:var(--c-orange)}
#nv-persona.act::before{background:var(--c-orange)}

/* 下拉箭头：折叠面板触发器（v9：AI问答/技能中心/创作中心/数据中心/客户跟进 + 头像区） */
.nv-c{width:12px;height:12px;margin-left:auto;opacity:.7;transition:transform .2s;flex-shrink:0}
.ni.has-menu.open .nv-c{transform:rotate(180deg);opacity:1}

/* 下拉子菜单（侧边栏内展开） */
.ni.has-menu{flex-wrap:wrap;overflow:visible}
.ni.has-menu > .nv-c{margin-left:auto}
/* 侧边栏内子菜单（基础态 = 移动端抽屉内的内嵌折叠块）
   v7：原 `position:relative !important / left:auto !important / top:auto !important`
   的 !important 已去掉——那是为覆盖 style.css 里一条早已不存在的
   `.tn-submenu{position:absolute;left:100%}` 而加的（现全文已无该规则）。
   !important 的害处在此暴露：它会让本文件末尾桌面端的
   `.tn-submenu{position:absolute;left:0;right:0;top:100%}`（全宽下拉大面板）永远失效。 */
.tn-submenu{
  position:relative;
  left:auto;
  top:auto;
  display:none;
  flex:0 0 100%;
  width:100%;
  box-sizing:border-box;
  min-width:0;
  margin:8px 0 6px 0;
  padding:7px 7px 7px 14px;
  background:var(--sb-sub);
  border:none;
  border-radius:var(--r-sm);
  box-shadow:none;
}
.tn-submenu.show{display:block;animation:smIn .22s cubic-bezier(.4,0,.2,1)}
.tn-sub .tns-i{width:20px;text-align:center;flex-shrink:0;font-size:14px}
@keyframes smIn{
  from{opacity:0;transform:scale(.98)}
  to{opacity:1;transform:scale(1)}
}
.tn-sub{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-bd-sm);font-weight:500;color:var(--sb-ink);cursor:pointer;white-space:nowrap;
  transition:all .2s;
}
.tn-sub:hover{background:var(--sb-hov);color:var(--sb-title)}
.tn-sub.act{background:var(--sb-tint);color:var(--sb-ink-a);font-weight:600;box-shadow:none}
.tn-sub .nv-i{width:16px;height:16px;color:currentColor}

/* ===== 辅助条元素（v7 新增，移动/桌面共用） =====
   取代原 .sb-footer（底部用户区），同一份 DOM 两种形态：
   桌面=顶部深色细条（小米 .site-topbar）；移动=抽屉底部区块（order 换位） */
.tb-util{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tb-util-l{display:none;white-space:nowrap;letter-spacing:.4px}
.tb-util-r{display:flex;align-items:center;gap:2px;min-width:0}

.u-btn{
  display:flex;align-items:center;gap:6px;
  height:26px;padding:0 9px;border:none;border-radius:var(--r-xs);
  background:transparent;color:inherit;cursor:pointer;
  font-size:inherit;font-family:inherit;white-space:nowrap;
  transition:background .18s,color .18s;
}
.u-btn svg{width:14px;height:14px;flex-shrink:0}
.u-btn kbd{
  padding:0 4px;border-radius:3px;font-size:10px;line-height:14px;
  font-family:inherit;background:rgba(255,255,255,.14);color:inherit;
}
.u-btn:hover{background:rgba(255,255,255,.10)}
.u-sep{width:1px;height:13px;background:currentColor;opacity:.22;margin:0 6px;flex-shrink:0}

.u-link{
  display:flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:var(--r-xs);
  font-size:12px;white-space:nowrap;cursor:pointer;
  transition:background .18s,color .18s;
}
.u-link .nv-i{width:14px;height:14px;display:none;flex-shrink:0}
.u-link:hover{background:rgba(255,255,255,.10);color:#fff}
.u-link.act{color:#fff}

.tb-util .tb-user{
  position:relative;                 /* v9：头像区成为其折叠面板的定位基准 */
  display:flex;align-items:center;gap:7px;
  padding:2px 8px 2px 2px;border-radius:var(--r-lg);
  cursor:pointer;min-width:0;
}
.tb-util .tb-user:hover{background:rgba(255,255,255,.10)}
.tb-util .tb-user > .u-c{
  width:10px;height:10px;opacity:.55;flex-shrink:0;
  transition:transform .2s;
}
.tb-util .tb-user.open > .u-c{transform:rotate(180deg)}
.tb-util .tb-user .ua{
  width:22px;height:22px;border-radius:50%;object-fit:cover;
  flex-shrink:0;border:none;box-shadow:none;
}
.tb-util .tb-user .ui{min-width:0;line-height:1.15;display:flex;align-items:center;gap:5px}
.tb-util .tb-user .un{font-size:12px;font-weight:500;white-space:nowrap;color:inherit}
.tb-util .tb-user .ur{
  font-size:10px;padding:0 5px;border-radius:3px;
  background:rgba(255,255,255,.14);white-space:nowrap;color:inherit;
}
.u-out{color:#F87171}
.u-out:hover{background:rgba(248,113,113,.16);color:#FCA5A5}

/* 待办角标（v8）：常驻辅助条，成为跨模块可见的「全局提醒位」
   —— 原挂在主导航「任务」项上，但任务数属提醒而非目的地，应脱离具体模块 */
.u-bdg{
  min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:10px;font-weight:700;line-height:1;
  background:var(--da,#EF4444);color:#fff;flex-shrink:0;
}

/* 分组标签：仅抽屉（移动端）显示 */
.nv-group{
  display:none;
  padding:14px 12px 6px;
  font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--tm);
}
/* 组间竖分隔：仅横向导航（桌面端）显示 */
.nv-div{display:none;width:1px;height:16px;background:#E0E0E0;margin:0 8px;flex-shrink:0}

/* 下拉面板内卡片（AI 模式）文案层级 */
.tns-h{display:flex;align-items:center;gap:7px;font-size:var(--fs-bd);color:inherit}
.tns-h b{font-weight:600}
.tns-d{font-size:12px;line-height:1.5;color:var(--tm);white-space:normal}

/* v9：左侧「子功能栏」已整体移除（原 .side / .side-head / .side-body / .side-foot）。
   子功能全部改由顶栏项下方的折叠模块面板承载 —— 在「点击那一刻」就展开全部子页，
   少一层「先进模块、再选子页」的中间态；同时省下 232px 横向空间还给内容区。 */

/* 折叠面板内的分组小标题（技能中心：内容体系 / 运营支撑）。
   flex-basis:100% 让它在 wrap 布局里独占一行，从而强制换行分组。 */
.tns-grp{
  flex:0 0 100%;width:100%;
  padding:2px 2px 0;
  font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--tm);
}

/* ===== 顶部页头（基础态隐藏；桌面端由下方媒体查询启用，仅显示页面标题） ===== */
.mc-header{
  display:none;
  align-items:center;justify-content:space-between;
  gap:16px;
  padding:14px 28px 14px;
  background:var(--cd);
  border-bottom:1px solid var(--line);
  position:relative;z-index:1;
}
[data-theme="dark"] .mc-header{background:rgba(12,26,61,.72);border-bottom-color:rgba(99,179,255,.14)}
.mc-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.mc-header-left .hm{
  display:none;width:38px;height:38px;border:none;background:rgba(60,60,67,.08);
  cursor:pointer;font-size:var(--fs-t-sm);color:var(--tx);border-radius:var(--r-sm);
  align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;
}
.mc-header-left .hm:hover{background:var(--sh);color:var(--p)}
.mc-header-brand{
  display:flex;align-items:center;gap:11px;
  cursor:pointer;transition:opacity .2s;flex-shrink:0;
}
.mc-header-brand:hover{opacity:.85}
.mc-header-brand .tb-logo{
  width:38px;height:38px;border-radius:var(--r-sm);object-fit:cover;
  border:none;
  box-shadow:none;
}
.mc-header-tx{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.mc-header-name{
  font-size:var(--fs-t-sm);font-weight:600;color:var(--tx);display:flex;align-items:center;gap:5px;
}
.mc-header-name i{
  font-style:normal;font-size:var(--fs-cap);font-weight:600;color:var(--white);
  background:var(--ac-grad);padding:2px 5px;border-radius:var(--r-xs);
}
.mc-header-tag{
  font-size:11px;font-weight:500;color:var(--ts);letter-spacing:.3px;
}
.mc-title{
  font-size:var(--fs-t);font-weight:600;color:var(--tx);letter-spacing:-.3px;
  margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:1px solid var(--bd);padding-left:14px;
}
[data-theme="dark"] .mc-title{color:var(--tx)}

/* v7 清理：页头时钟（.tb-status-cluster / .tb-clock / .tb-time-big / .tb-date）、
   页头用户副本（.mc-header-right .tb-user）、以及已空的 .mc-header-right 容器规则全部删除。
   - 时钟：侧栏与页头两处时间全部下线（用户要求「时间去掉」）
   - 用户：单源到 .tb-util .tb-user
   - 搜索触发按钮：迁到 .tb-util 的 .u-btn（原 .tb-cmdk 规则同步删除） */

/* ===== 移动端遮罩 ===== */
.topnav-ol{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;display:none}
.topnav-ol.show{display:block}

/* ===== 响应式：中等屏幕 ===== */
@media(max-width:1200px){
  .topbar{width:190px}
  .topbar-inner{padding:14px 10px 12px}
  .sb-logo{width:38px;height:38px}
  .sb-brand-name{font-size:15px}
  .sb-meta-tag{font-size:var(--fs-cap);padding:2.5px 6px}
  .topnav .ni{padding:10px 11px;font-size:14px;gap:10px}
  .topnav .ni .nv-i{width:20px;height:20px}
  .mc-header{padding:12px 20px}
  .mc-title{font-size:var(--fs-t-sm)}
}

/* ===== 移动端 ===== */
@media(max-width:900px){
  .topbar{
    transform:translateX(-100%);
    width:82%;max-width:300px;
    box-shadow:var(--sd-2);
  }
  .topbar.open{transform:translateX(0)}
  .sb-close{display:flex}
  .topnav-wrap{margin-top:8px}

  .mc-header{display:flex;padding:10px 16px}
  .mc-header-left .hm{display:flex}
  /* 移动端返回按钮（v3.4.1 照 mobile-v2） */
  .mv-back{display:none;width:36px;height:36px;border-radius:12px;border:0;background:transparent;color:var(--p);font-size:24px;line-height:1;align-items:center;justify-content:center;cursor:pointer;margin-right:2px;padding:0}
  .mv-back:active{opacity:.6}
  .mc-header-brand{display:none}
  .mc-title{border-left:none;padding-left:0}
}

/* ============================================================
   v7 · 移动端：辅助条改为抽屉底部区块
   （DOM 在前，用 flex order 换到底部；桌面端 order 无效不冲突）
   ============================================================ */
@media(max-width:900px){
  .tb-main{order:1;display:flex;flex-direction:column;flex:1;min-height:0}
  .tb-util{
    order:2;flex-direction:column;align-items:stretch;gap:2px;
    margin-top:10px;padding-top:10px;
    border-top:1px solid var(--sb-line);
  }
  .tb-util-l{display:none}
  .tb-util-r{flex-direction:column;align-items:stretch;gap:2px}
  .u-sep{display:none}
  .u-btn,.u-link{
    height:38px;padding:0 12px;border-radius:var(--r-sm);
    font-size:var(--fs-bd-sm);color:var(--sb-ink);
  }
  .u-link .nv-i,.u-btn svg{display:block;width:18px;height:18px}
  .u-btn kbd{display:none}
  .u-btn:hover,.u-link:hover{background:var(--sb-hov);color:var(--sb-title)}
  .u-out{color:var(--da)}
  .u-out:hover{background:var(--da);color:var(--white)}
  .tb-util .tb-user{
    padding:6px 10px;border-radius:var(--r-sm);
    background:var(--sb-sub);margin-bottom:4px;
  }
  .tb-util .tb-user .ua{width:30px;height:30px}
  .tb-util .tb-user .ui{flex-direction:column;align-items:flex-start;gap:1px}
  .tb-util .tb-user .un{font-size:12px;color:var(--sb-title)}
  .tb-util .tb-user .ur{background:var(--sb-sub);color:var(--sb-ink)}
  .nv-group{display:block}
  .nv-div{display:none}
  .tns-d{display:none}
}

/* ============================================================
   v7 · 桌面端：顶部横向导航（小米官网机制迁移）
   小米实测依据（home.00fa1b0e.css）：
     .site-topbar {height:40px;font-size:12px;color:#b0b0b0;background:#333}
     .site-header {height:100px;background:#fff}
     .nav-list    {font-size:16px}  .nav-item .link{padding:26px 10px 38px;color:#333;transition:color .2s}
     .nav-item-active .link{color:#ff6700}      ← 激活「只变色」，无底无框无位移
     .header-nav-menu {border-top:1px solid #e0e0e0;background:#fff;box-shadow:0 3px 4px rgba(0,0,0,.18)}
     .children        {background:#fff;border:1px solid #e0e0e0;box-shadow:0 8px 16px rgba(0,0,0,.18)}
   本层为「就地改造」而非追加覆盖层：顶部横栏只在 ≥901px 生效，≤900px 仍是抽屉。
   ============================================================ */
@media(min-width:901px){
  /* 外层：左侧固定竖栏 → 顶部两行横栏 */
  .topbar{
    left:0;right:0;top:0;bottom:auto;
    width:auto;height:auto;
    --tb-util-bg:#2B2F36;
    --tb-util-ink:#B0B0B0;
    border-right:none;border-bottom:1px solid var(--sb-line);
    box-shadow:none;transform:none;transition:none;
    /* 辅助条必须「全出血」（小米 .site-topbar 是通栏深色条）。
       .topbar-inner 带 max-width:1680px 限宽，若把深色底画在 .tb-util 上，
       超宽屏两侧会露出白边。改用 .topbar 自身分层背景：第一层只在顶部 36px 铺深色，
       天然通栏，且不像 100vw 方案那样引入横向溢出。 */
    background:
      linear-gradient(var(--tb-util-bg),var(--tb-util-bg)) top/100% 36px no-repeat,
      #fff;
  }
  [data-theme="dark"] .topbar{
    --tb-util-bg:#081227;--tb-util-ink:rgba(255,255,255,.55);
    background:
      linear-gradient(var(--tb-util-bg),var(--tb-util-bg)) top/100% 36px no-repeat,
      #0B1A3C;
    border-bottom-color:var(--sb-line);
  }
.topbar-inner{
flex-direction:column;height:auto;
max-width:1680px;margin:0 auto;padding:0 22px;
/* v9：桌面端改为 static，把折叠面板的定位祖先让给通栏的 .topbar。
   原为 relative → 面板以限宽 1680 的 .topbar-inner 为基准，超宽屏时
   面板底色盖不满屏幕、且左右各差 22px 导致卡片与导航项错位。
   安全性：桌面端 .ni::before 已是 display:none（见 .ni.act::before），
   头像面板另有 .tb-user{position:relative} 兜底，故无其他绝对定位子元素受影响。 */
position:static;
}

  /* ① 辅助条：深色细条（小米 .site-topbar：小字 / 低对比 / 不抢主导航） */
  .tb-util{
    height:36px;margin:0 -22px;padding:0 22px;
    background:transparent;color:var(--tb-util-ink);font-size:12px;
  }
  .tb-util-l{display:block;font-size:12px}
  .u-btn{height:26px;padding:0 9px}
  .u-link{color:var(--tb-util-ink)}
  .tb-util .tb-user{color:#E8E8E8}
  .tb-util .tb-user .un{color:#E8E8E8}
  .tb-util .tb-user .ur{color:#B0B0B0;background:rgba(255,255,255,.10)}

  /* 头像区折叠面板（v9）：深色辅助条上的浅色浮层，右对齐、窄面板。
     与主导航的全宽面板不同 —— 这里只有 3~4 项，不需要横向铺开，
     窄面板反而更好点：鼠标从头像到目标项的距离最短（费茨定律）。 */
  .tb-util .tb-user .tn-submenu{
    position:absolute;right:0;top:calc(100% + 8px);left:auto;
    display:none;flex:none;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:3px;
    width:226px;padding:8px;margin:0;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.16);
    max-height:none;overflow:visible;white-space:normal;
  }
  [data-theme="dark"] .tb-util .tb-user .tn-submenu{
    background:#0F1E3D;border-color:rgba(255,255,255,.10);
  }
  .tb-util .tb-user .tn-submenu.show{
    display:flex;animation:smIn .18s cubic-bezier(.4,0,.2,1);
  }
  .tb-util .tb-user .tn-sub{
    flex:none;width:auto;
    flex-direction:column;align-items:flex-start;gap:3px;
    padding:10px 12px;
    color:var(--tx);
  }
  [data-theme="dark"] .tb-util .tb-user .tn-sub{color:#E8E8E8}
  /* 面板内分隔线（分隔「退出登录」——破坏性操作需与常规项拉开距离） */
  .tns-sep{height:1px;background:var(--line);margin:5px 4px;flex:none}
  [data-theme="dark"] .tns-sep{background:rgba(255,255,255,.10)}
  .um-out{color:#DC2626 !important}
  .um-out:hover{background:#FEF2F2 !important;color:#B91C1C !important}
  [data-theme="dark"] .um-out{color:#F87171 !important}
  [data-theme="dark"] .um-out:hover{background:rgba(248,113,113,.14) !important}

  /* ② 主导航行：品牌 + 横向分组模块（小米 100px → 这里 60px，内容优先） */
  .tb-main{display:flex;align-items:center;height:60px;gap:clamp(12px,1.3vw,20px)}
  .sb-brand{flex:0 1 auto;min-width:0;border-bottom:none;padding:0;gap:0}
  .sb-brand-core{gap:9px}
  .sb-logo{width:32px;height:32px}
  .sb-brand-tx{flex-direction:row;align-items:center;gap:8px}
  .sb-brand-name{font-size:clamp(13px,.98vw,15px)}
  .sb-meta-tag{padding:2px 7px;font-size:10px}
  .sb-brand-actions{display:none}

  /* 导航条：横向，用行内边距撑行高（小米 .nav-item .link padding:26px 10px 38px） */
  .topnav-wrap{
    flex:1;min-width:0;margin:0;padding:0;
    /* 用长写法显式覆盖基础态的 overflow-x:hidden / overflow-y:auto：
       面板是 .topbar 的绝对定位子元素，本容器不能是滚动容器也不能裁切它 */
    overflow-x:visible;overflow-y:visible;
  }
  .topnav{
    flex-direction:row;align-items:center;gap:0;
    height:60px;flex-wrap:nowrap;
    /* ⚠️ 这里必须是 visible，绝不可写成 overflow-x:auto。
       .tn-submenu 虽然是 .topbar-inner（position:relative）的绝对定位子元素，
       但它依然是 .topnav 的后代，滚动容器会裁切后代 → 全宽下拉面板整块消失，
       且不抛任何错误（静默失效）。导航项放不下时靠下方的流式收紧解决，不靠滚动。 */
    overflow:visible;
  }
  .topnav .ni{
    position:static;
    height:60px;
    /* v10：图标已移除（对齐小米官网的纯文字导航），项宽随之收窄约 25px，
       padding 相应加大，把省下的宽度还给「项与项之间的呼吸感 + 点击热区」。
       gap 归零：项内现在只剩文字 + 下拉箭头，箭头间距由 .nv-c 的 margin-left 控制。 */
    padding:0 clamp(12px,1vw,19px);gap:0;
    border-radius:0;overflow:visible;
    font-size:clamp(12.5px,.92vw,14.5px);font-weight:500;
    color:var(--sb-ink);background:transparent;box-shadow:none;
    flex-shrink:0;
  }
  /* v10：顶部导航图标已整体移除，以下 .nv-i 规则当前不匹配任何元素，
     保留是为了「若日后想恢复图标」时改回去的成本最低（收回 index.html 的
     <svg class="nv-i"> 即可，无需重写样式）。 */
  .topnav .ni .nv-i{
    width:clamp(15px,1.05vw,17px);height:clamp(15px,1.05vw,17px);
    opacity:.72;transition:opacity .2s,color .2s;
  }
  /* 下拉箭头：图标移除后它成为项内唯一的非文字元素，间距从 1px 放宽到 3px，
     否则会贴住最后一个字。opacity 提到 .55 —— 它是「此处有子菜单」的唯一提示，
     不能弱到看不见（小米官网无箭头，但它承担的是功能提示，不纯是装饰）。 */
  .topnav .ni > .nv-c{margin-left:3px;width:11px;height:11px;opacity:.55}
  .topnav .ni .nv-bdg{margin-left:2px}
  .topnav .ni:hover{background:transparent;color:var(--tx)}
  .topnav .ni:hover .nv-i{opacity:1}
  /* 激活：只变色 + 一条 2px 底线（小米 .nav-item-active .link{color:#ff6700} 的迁移）
     六色分类板：底线按模块着色，与首页模块卡同源 */
  .topnav .ni.act{
    background:transparent !important;
    color:var(--tx) !important;font-weight:600;
    box-shadow:inset 0 -2px 0 0 var(--sb-ink-a) !important;
  }
  .topnav .ni.act .nv-i{opacity:1;color:var(--sb-ink-a)}
  .topnav .ni.act::before{display:none}
  #nv-gg.act{box-shadow:inset 0 -2px 0 0 var(--c-blue) !important}
  #nv-ai.act{box-shadow:inset 0 -2px 0 0 var(--c-indigo) !important}
  #nv-pyq.act{box-shadow:inset 0 -2px 0 0 var(--c-amber) !important}
  #nv-zx.act{box-shadow:inset 0 -2px 0 0 var(--c-teal) !important}
  /* v9：顶部 7 项 —— 组入口 #nv-data / #nv-crm 取代原先 6 项散列的 id，
     底线按模块着色（与首页模块卡同源） */
  #nv-data.act{box-shadow:inset 0 -2px 0 0 var(--c-green) !important}
  #nv-crm.act{box-shadow:inset 0 -2px 0 0 var(--c-orange) !important}
  #nv-persona.act{box-shadow:inset 0 -2px 0 0 var(--c-amber) !important}
  #nv-gg.act .nv-i{color:var(--c-blue)}
  #nv-ai.act .nv-i{color:var(--c-indigo)}
  #nv-pyq.act .nv-i{color:var(--c-amber)}
  #nv-zx.act .nv-i{color:var(--c-teal)}
  #nv-data.act .nv-i{color:var(--c-green)}
  #nv-crm.act .nv-i{color:var(--c-orange)}
  #nv-persona.act .nv-i{color:var(--c-amber)}
  .nv-div{display:block}

  /* ===== 全宽下拉大面板（小米 .header-nav-menu / .children 机制） =====
     定位基准说明：.ni 在桌面端改为 position:static，使绝对定位的基准从 .ni
     上移到最近的定位祖先 .topbar-inner（基础态带 position:relative），
     .topbar-inner 上下正好是「辅助条 36px + 主导航行 60px」两行，故 top:100% 即两行之下。
左右对齐：面板的定位祖先从 .topbar-inner 上移到 .topbar（见下方 .topbar-inner
position:static），于是面板左右 0 = 整条顶栏的左右边缘，深色辅助条与白色面板
都是通栏，和 .topbar 自身「背景通栏、内容限宽」的分层做法一致。
面板内容的限宽用 padding 百分比实现：绝对定位元素的百分比 padding 以「包含块宽度」
为基准，而包含块正是通栏的 .topbar，故 50% 即半屏，无需 vw
（vw 会把竖向滚动条宽度也计入，导致内容整体偏左约半个滚动条）。
max(22px, 50% - 818px) 中的 818 = .topbar-inner 的 1680/2 - 22，
因此面板内容的左右边缘与导航项左边缘逐像素对齐。
.ni 的激活指示改用 inset 阴影，不再依赖 ::before（见上方） */
.topnav .ni.has-menu{position:static}
.topnav .tn-submenu{
position:absolute;left:0;right:0;top:100%;
display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;
flex:none;width:auto;min-width:0;
margin:0;padding:0 max(22px,calc(50% - 818px));
max-height:0;overflow:hidden;
background:#fff;
/* 不加 border：max-height:0 时边框仍会渲染出 1px 杂线；
分隔线由 .topbar 自身的 border-bottom 提供，面板紧贴其下方 */
border:none;
border-radius:0;
/* 阴影只在展开时出现：折叠态高度为 0 时阴影仍会画出一条暗带 */
box-shadow:0 8px 16px rgba(0,0,0,0);
transition:max-height .28s cubic-bezier(.4,0,.2,1),
padding-top .28s cubic-bezier(.4,0,.2,1),
padding-bottom .28s cubic-bezier(.4,0,.2,1),
box-shadow .28s ease;
}
  [data-theme="dark"] .topnav .tn-submenu{background:#0F1E3D}
  /* 面板高度上限：技能中心 10 张卡片 + 2 个组标题约需 400px，取 460px 留余量。
     卡片少的面板（数据中心 2 张）实际高度由内容决定，不受该上限影响。
     align-content:flex-start 防止多行卡片被默认的 stretch 拉高。 */
.topnav .tn-submenu{align-content:flex-start}
.topnav .tn-submenu.show{
max-height:460px;
padding-top:22px;padding-bottom:22px;
box-shadow:0 8px 16px rgba(0,0,0,.16);
animation:none;
}
  /* 面板内卡片（借小米商品卡三段式：名称 → 说明） */
  .topnav .tn-sub{
    flex:0 0 auto;width:240px;
    display:flex;flex-direction:column;align-items:flex-start;gap:7px;
    padding:15px 16px;
    border:1px solid var(--line);border-radius:var(--r-sm);
    background:#fff;
    font-size:var(--fs-bd);color:var(--tx);
    transition:border-color .2s,box-shadow .2s;
  }
  [data-theme="dark"] .topnav .tn-sub{background:#132549;border-color:rgba(255,255,255,.10)}
  .topnav .tn-sub:hover{background:#fff;color:var(--tx);border-color:var(--p);box-shadow:var(--sd-1)}
  [data-theme="dark"] .topnav .tn-sub:hover{background:#17305C}
  .topnav .tn-sub .tns-i{font-size:16px}
  .topnav .tn-sub.act{border-color:var(--p);box-shadow:inset 0 0 0 1px var(--p)}

  /* ===== 窄桌面兜底（901~1200px） =====
     v10：导航图标已全局移除。这条 @media 原先的职责正是「窄屏收掉图标、保住全部
     7 项文字」——现在全宽度都是纯文字，收图标这件事失去对象，只保留「进一步收紧
     padding + 隐藏辅助条状态标签」。
     ⚠️ 仍然绝不可改成 overflow-x:auto：滚动容器会裁切全宽下拉面板（见 .topnav 注释），
     且是静默失效，不抛错。 */
  @media(max-width:1200px){
    .topnav .ni{gap:0;padding:0 clamp(9px,.8vw,13px)}
    .sb-meta-tag{display:none}
  }

  /* ===== v9：左侧子功能栏已移除 =====
     原先「桌面固定 232px 侧栏 + 内容区让位」的方案整体撤销，原因：
       · 侧栏需要「先进入模块」才有效，而折叠面板在「点击那一刻」就给出全部子页；
       · 常驻侧栏吃掉 232px 横向空间，而它的内容（技能中心 10 项）多数时候用不到；
       · 两端（桌面/移动）不再需要各自维护一套二级导航形态。
     现子功能统一由顶栏项下方的折叠模块面板承载，内容区恢复全宽。
     内容区原有的横向 tab 条**保留**：它承担「当前模块内换页 + 位置指示」，
     与「跨模块跳转」的折叠面板职责不同，不构成重复入口。 */


  /* 主内容：为侧栏让位；顶部留出固定顶栏高度 96px（36 辅助条 + 60 主导航） */
  .mc{margin-left:0;padding-top:96px;min-height:100vh}

  /* 内容区页头：桌面端启用（仅页面标题；时钟已随 v7 导航重构下线）
     —— 原为基础态 display:none，因为侧栏时代桌面端没有页面标题 */
  .mc-header{
    display:flex;
    position:sticky;top:96px;z-index:20;
    padding:0 28px;height:52px;gap:16px;
    background:var(--cd);
    border-bottom:1px solid var(--line);
  }
  .mc-header-brand{display:none}
  .mc-title{border-left:none;padding-left:0;font-size:var(--fs-t)}
}