/**
 * 首页壳 · 布局结构切换
 * top（顶部导航） / sidebar（左侧平台导航，飞书 / GPT 式）
 * 侧栏模式：顶栏整条隐藏；账号 / 主题 / 布局 / 连接迁入左侧栏底部
 */

:root {
  --hub-rail-w: 256px;
  /* 顶栏工具钮 / 账号条 · 明亮主题配色规范 */
  --hub-chrome-face: #f0f0f0;
  --hub-chrome-face-bar: #f4f4f4;
  --hub-chrome-ink: #5c5c5c;
  --hub-chrome-ink-strong: #111111;
  --hub-chrome-border: rgba(0, 0, 0, 0.08);
  --hub-chrome-btn-shadow:
    inset 0 0.5px #fff,
    inset 0 -1px 2px rgba(0, 0, 0, 0.08),
    0 2px 6px -3px rgba(0, 0, 0, 0.12);
  --hub-chrome-btn-shadow-hover:
    inset 0 0.5px #fff,
    0 0 0 3px rgba(0, 0, 0, 0.06),
    0 4px 10px -4px rgba(0, 0, 0, 0.14);
  --hub-chrome-bar-shadow:
    inset 0 0.5px #fff,
    inset 0 -1px 2px rgba(0, 0, 0, 0.06),
    0 3px 8px -4px rgba(0, 0, 0, 0.1);
  --hub-chrome-logout-face: #f2f2f2;
  --hub-chrome-logout-shadow:
    inset 0 0.5px hsla(0, 0%, 100%, 0.9),
    inset 0 -1px 1.5px 0 hsla(0, 0%, 0%, 0.08),
    0px 3px 8px -4px hsla(0 0% 0% / calc(0.12 * (1 - var(--hub-chrome-active, 0)))),
    0 0 0 calc(var(--hub-chrome-active, 0) * 0.15rem) hsla(0 0% 0% / 0.05);
}

html[data-theme="dark"] {
  --hub-chrome-face: hsl(0 0% 12% / 0.9);
  --hub-chrome-face-bar: hsl(0 0% 12% / 0.95);
  --hub-chrome-ink: rgba(255, 255, 255, 0.65);
  --hub-chrome-ink-strong: #ffffff;
  --hub-chrome-border: rgba(255, 255, 255, 0.08);
  --hub-chrome-btn-shadow:
    inset 0 0.5px hsl(0, 0%, 100%, 0.14),
    inset 0 -1px 2px hsl(0, 0%, 0%, 0.5),
    0 3px 8px -4px rgba(0, 0, 0, 0.5);
  --hub-chrome-btn-shadow-hover:
    inset 0 0.5px hsl(0, 0%, 100%, 0.18),
    0 0 0 3px hsla(0 0% 100% / 0.1),
    0 4px 10px -4px rgba(0, 0, 0, 0.55);
  --hub-chrome-bar-shadow:
    inset 0 0.5px hsl(0, 0%, 100%, 0.12),
    inset 0 -1px 2px hsl(0, 0%, 0%, 0.55),
    0 4px 10px -4px rgba(0, 0, 0, 0.55);
  --hub-chrome-logout-face: hsl(0 0% 12% / 1);
  --hub-chrome-logout-shadow:
    inset 0 0.5px hsla(0, 0%, 100%, 0.55),
    inset 0 -1px 1.5px 0 hsla(0, 0%, 0%, 0.55),
    0px 3px 8px -4px hsla(0 0% 0% / calc(0.55 * (1 - var(--hub-chrome-active, 0)))),
    0 0 0 calc(var(--hub-chrome-active, 0) * 0.15rem) hsla(0 0% 100% / 0.06);
}

.hub-app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
}

.hub-stage {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── 工具条（顶栏横排 / 侧栏竖排共用同一 DOM） ── */
.hub-utilities {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.hub-utilities__tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 顶栏右侧：贴右；从右往左 = 用户 ← 布局/主题 ← 平台菜单 */
body.lg-shell[data-hub-layout="top"] .hub-utilities,
body.lg-shell:not([data-hub-layout]) .hub-utilities {
  gap: 12px;
  margin-left: 0;
}
body.lg-shell[data-hub-layout="top"] .hub-top-account-group,
body.lg-shell:not([data-hub-layout]) .hub-top-account-group {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}
body.lg-shell[data-hub-layout="top"] .hub-top-account-group .hub-top-nav,
body.lg-shell:not([data-hub-layout]) .hub-top-account-group .hub-top-nav,
body.lg-shell[data-hub-layout="top"] .hub-top-account-group .platform-nav-host,
body.lg-shell:not([data-hub-layout]) .hub-top-account-group .platform-nav-host {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin: 0;
}
/* 主题/布局 与 用户信息 之间的细分割线 */
body.lg-shell[data-hub-layout="top"] .hub-utilities__tools::after,
body.lg-shell:not([data-hub-layout]) .hub-utilities__tools::after {
  content: "";
  width: 1px;
  height: 18px;
  margin-left: 2px;
  background: var(--border);
  flex-shrink: 0;
  opacity: 0.9;
}
body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar {
  margin-right: 0;
}

/* 顶栏布局时不展示主区 eyebrow，避免干扰原有顶栏结构 */
.hub-hero__eyebrow {
  display: none;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── 布局切换按钮 ── */
.hub-layout-toggle {
  color: var(--muted);
  border: 1px solid transparent;
}
.hub-layout-toggle:hover {
  color: var(--text);
  background: var(--surface-hover, #f5f5f5);
}
.hub-layout-toggle__glyph {
  display: none;
  width: var(--chrome-icon-glyph, 18px);
  height: var(--chrome-icon-glyph, 18px);
  line-height: 0;
}
.hub-layout-toggle__glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 主题切换：与布局按钮同款面性图标（实心填充，替代卡通日夜开关） */
.theme-toggle__glyph {
  display: none;
  width: var(--chrome-icon-glyph, 18px);
  height: var(--chrome-icon-glyph, 18px);
  line-height: 0;
}
.theme-toggle__glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
.theme-toggle.is-dark .theme-toggle__glyph--to-light,
html[data-theme="dark"] .theme-toggle:not(.is-light) .theme-toggle__glyph--to-light {
  display: block;
}
.theme-toggle.is-light .theme-toggle__glyph--to-dark,
html:not([data-theme="dark"]) .theme-toggle:not(.is-dark) .theme-toggle__glyph--to-dark {
  display: block;
}
.theme-toggle:not(.is-dark):not(.is-light) .theme-toggle__glyph--to-light {
  display: block;
}

body.lg-shell[data-hub-layout="top"] .hub-layout-toggle__glyph--to-sidebar,
body.lg-shell:not([data-hub-layout]) .hub-layout-toggle__glyph--to-sidebar,
body:not(.lg-shell)[data-hub-layout="top"] .hub-layout-toggle__glyph--to-sidebar,
body:not(.lg-shell):not([data-hub-layout]) .hub-layout-toggle__glyph--to-sidebar,
html[data-hub-layout="top"] .hub-layout-toggle__glyph--to-sidebar {
  display: block;
}
body.lg-shell[data-hub-layout="sidebar"] .hub-layout-toggle__glyph--to-top,
body:not(.lg-shell)[data-hub-layout="sidebar"] .hub-layout-toggle__glyph--to-top,
html[data-hub-layout="sidebar"] .hub-layout-toggle__glyph--to-top {
  display: block;
}

/* ── 左侧平台导航（默认不占位；跟随明暗主题） ── */
.hub-rail {
  display: none;
  flex-direction: column;
  width: var(--hub-rail-w);
  min-width: var(--hub-rail-w);
  max-width: var(--hub-rail-w);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 20px 14px 14px;
  border-right: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  background: var(--cursor-bg-sidebar, var(--surface-muted, #f3f3f3));
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  z-index: calc(var(--platform-chrome-z, 200) + 1);
}

.hub-rail__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 6px 18px;
}

.hub-rail__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lg-font-display, "Alimama ShuHeiTi", "PingFang SC", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cursor-primary-fg, #fff);
  background: linear-gradient(145deg, #3a3a3a 0%, #1f1f1f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.hub-rail__brand {
  font-family: var(--lg-font-display, "Alimama ShuHeiTi", "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text);
  line-height: 1.35;
  padding-top: 4px;
}

.hub-rail__label {
  margin: 0 8px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}

.hub-rail__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 2px;
}

.hub-rail__nav-slot {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* 顶栏宿主：同一份 #platformNav 横排放入 */
.platform-nav-host {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: max-content;
}
.platform-nav-host:empty {
  display: none !important;
}
body[data-hub-layout="top"] .platform-nav-host:not(:empty),
body:not([data-hub-layout]) .platform-nav-host:not(:empty) {
  display: inline-flex;
}
.platform-nav-host .platform-nav,
.platform-nav-host .hub-rail__nav {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0;
  min-width: max-content;
}
.platform-nav-host .hub-rail__icon,
.platform-nav-host .wb-sidebar-platform__icon {
  display: none;
}
/* 顶栏横排：全圆角（药丸形）；优先级需压过侧栏 .hub-rail__item 的 10px */
body.lg-shell .platform-nav-host .hub-rail__item.nav-tab,
body.lg-shell .platform-nav-host .wb-sidebar-platform__item,
.platform-nav-host .hub-rail__item.nav-tab,
.platform-nav-host .wb-sidebar-platform__item {
  width: auto !important;
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}

/* 侧栏导航气质基准（已确认）：柔和选中底 + 细亮边，不做顶栏那套跑光 */
body.lg-shell .hub-rail__item.nav-tab,
.hub-rail__item.nav-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  border-radius: 12px !important;
  padding: 9px 11px !important;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body.lg-shell .hub-rail__item.nav-tab:hover:not(.is-active),
.hub-rail__item.nav-tab:hover:not(.is-active) {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
}

body.lg-shell .hub-rail__item.nav-tab.is-active,
.hub-rail__item.nav-tab.is-active {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: var(--surface-active, rgba(0, 0, 0, 0.06));
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px var(--border, rgba(0, 0, 0, 0.08)),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.hub-rail__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  color: inherit;
  opacity: 0.85;
}
.hub-rail__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 侧栏底部停靠区 */
.hub-rail__dock {
  margin-top: auto;
  flex-shrink: 0;
  padding: 12px 8px 8px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.hub-rail__dock:empty {
  display: none;
}

/* ── 侧栏内工具排版：对齐 / 亲密 / 对比 ── */
.hub-rail .hub-utilities {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

/* 工具条：主题 + 布局成组靠左，不再两端拉开 */
.hub-rail .hub-utilities__tools {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0 2px;
  box-sizing: border-box;
}

.hub-rail .hub-utilities__tools::before,
.hub-rail .hub-utilities__tools::after {
  display: none !important;
  content: none !important;
}

.hub-rail .hub-layout-toggle,
.hub-rail .st-sunMoonThemeToggleBtn {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  margin-left: 0;
  flex-shrink: 0;
}
.hub-rail .hub-layout-toggle:hover,
.hub-rail .st-sunMoonThemeToggleBtn:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.05);
  border-color: transparent;
}

/* 账号区：合并芯片「XX团队 · 访客」+ 退出 */
body.lg-shell .hub-rail .auth-bar,
.hub-rail .auth-bar,
[data-hub-layout="sidebar"] [data-platform-chrome] .auth-bar {
  order: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.hub-rail .auth-identity,
[data-hub-layout="sidebar"] [data-platform-chrome] .auth-identity {
  flex: 1 1 auto;
  max-width: none;
  height: 36px;
  padding: 0 8px 0 4px;
  border-radius: 10px;
  gap: 8px;
}

.hub-rail .auth-bar__avatar,
[data-hub-layout="sidebar"] [data-platform-chrome] .auth-bar__avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  background: linear-gradient(145deg, #e6e6e6, #f5f5f5);
  border-color: var(--border, rgba(0, 0, 0, 0.08));
  color: var(--text);
  flex-shrink: 0;
}

.hub-rail .auth-identity__text,
[data-hub-layout="sidebar"] [data-platform-chrome] .auth-identity__text {
  font-size: 12.5px;
}

.hub-rail .auth-identity__user {
  font-weight: 600;
  color: var(--text);
}

.hub-rail .auth-bar .btn--sm,
[data-hub-layout="sidebar"] [data-platform-chrome] .auth-bar .btn--sm {
  margin-left: 0;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  opacity: 0.75;
  flex-shrink: 0;
}
.hub-rail .auth-bar .btn--sm:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.05);
  opacity: 1;
}

/* 旧侧栏团队块（若缓存未刷新 DOM）隐藏，避免双份 */
.hub-rail .auth-team,
[data-hub-layout="sidebar"] [data-platform-chrome] .auth-team {
  display: none !important;
}

.hub-rail .auth-bar__team-select {
  display: none !important;
}

.hub-rail .auth-bar__user {
  display: none !important;
}

/* ── 暗黑主题：深色侧栏（非玻璃页的兜底实底） ── */
html[data-theme="dark"] .hub-rail {
  background: #141414;
  border-right-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
}

/* 首页壳 · 侧栏液态玻璃：半透明 + 模糊，透出页面光晕，避免闷黑实底 */
body.lg-shell .hub-rail {
  isolation: isolate;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(var(--lg-blur, 32px)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--lg-blur, 32px)) saturate(1.2);
  border-right-color: var(--lg-topbar-edge, rgba(0, 0, 0, 0.08));
  box-shadow: var(--lg-glass-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
}
body.lg-shell .hub-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--lg-glass-shine, linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 60%));
  opacity: 0.28;
}
body.lg-shell .hub-rail > * {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] body.lg-shell .hub-rail {
  background: rgba(22, 22, 22, 0.52);
  border-right-color: var(--lg-topbar-edge, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] body.lg-shell .hub-rail::before {
  opacity: 0.4;
}

html[data-theme="dark"] .hub-rail__mark {
  color: #f5f5f5;
  background: linear-gradient(145deg, #3a3a3a 0%, #1f1f1f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .hub-rail__brand {
  color: rgba(255, 255, 255, 0.92);
}

html[data-theme="dark"] .hub-rail__label {
  color: rgba(255, 255, 255, 0.38);
}

html[data-theme="dark"] body.lg-shell .hub-rail__item.nav-tab,
html[data-theme="dark"] .hub-rail__item.nav-tab {
  color: rgba(255, 255, 255, 0.55);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}

html[data-theme="dark"] body.lg-shell .hub-rail__item.nav-tab:hover:not(.is-active),
html[data-theme="dark"] .hub-rail__item.nav-tab:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.88);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] body.lg-shell .hub-rail__item.nav-tab.is-active,
html[data-theme="dark"] .hub-rail__item.nav-tab.is-active {
  color: rgba(255, 255, 255, 0.96);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="dark"] .hub-rail__dock {
  border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .hub-rail .hub-layout-toggle,
html[data-theme="dark"] .hub-rail .st-sunMoonThemeToggleBtn {
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border-color: transparent;
}
html[data-theme="dark"] .hub-rail .hub-layout-toggle:hover,
html[data-theme="dark"] .hub-rail .st-sunMoonThemeToggleBtn:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body.lg-shell .hub-rail .auth-bar,
html[data-theme="dark"] .hub-rail .auth-bar,
html[data-theme="dark"] [data-hub-layout="sidebar"] [data-platform-chrome] .auth-bar {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255, 255, 255, 0.9);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .hub-rail .auth-bar__avatar,
html[data-theme="dark"] [data-hub-layout="sidebar"] [data-platform-chrome] .auth-bar__avatar {
  background: linear-gradient(145deg, #4a4a4a, #2c2c2c);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f4f4f4;
}

html[data-theme="dark"] .hub-rail .auth-identity:hover,
html[data-theme="dark"] [data-hub-layout="sidebar"] [data-platform-chrome] .auth-identity:hover {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .hub-rail .auth-identity__user {
  color: rgba(255, 255, 255, 0.92);
}

html[data-theme="dark"] .hub-rail .auth-identity__chevron {
  color: rgba(255, 255, 255, 0.45);
}

html[data-theme="dark"] .hub-rail .auth-bar .btn--sm {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0.9;
}
html[data-theme="dark"] .hub-rail .auth-bar .btn--sm:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

/* ── 左侧布局激活 ── */
body[data-hub-layout="sidebar"] .hub-rail,
body.lg-shell[data-hub-layout="sidebar"] .hub-rail {
  display: flex;
}

body.lg-shell[data-hub-layout="sidebar"] .hub-stage > .topbar,
body.lg-shell[data-hub-layout="sidebar"] #hubTopbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ── 侧栏模式下：主区信息层次加精 ── */
body.lg-shell[data-hub-layout="sidebar"] .hub-stage {
  background: transparent;
}

body.lg-shell[data-hub-layout="sidebar"] .hub-stage > .page-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding:
    var(--hub-page-pad-top, 28px)
    max(var(--hub-page-inline, 28px), env(safe-area-inset-right, 0px))
    var(--hub-page-pad-bottom, 72px)
    max(var(--hub-page-inline, 28px), env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

body.lg-shell[data-hub-layout="sidebar"] .hub-hero {
  margin-bottom: 8px;
  padding-bottom: 4px;
}

body.lg-shell[data-hub-layout="sidebar"] .hub-hero__eyebrow {
  display: block;
}

body.lg-shell[data-hub-layout="sidebar"] .hub-hero h1 {
  font-size: clamp(26px, 2.8vw, 32px);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  line-height: 1.2;
}

body.lg-shell[data-hub-layout="sidebar"] .hub-hero p {
  max-width: 52em;
  font-size: 13.5px;
  line-height: 1.75;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
}

body.lg-shell[data-hub-layout="sidebar"] .hub-actions {
  margin: 22px 0 4px;
  padding: 0;
  gap: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.lg-shell[data-hub-layout="sidebar"] .hub-search {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
}

body.lg-shell[data-hub-layout="sidebar"] .section-title {
  margin: 28px 0 14px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  opacity: 0.72;
}

body.lg-shell[data-hub-layout="sidebar"] .project-grid {
  gap: 20px;
  margin-top: 0;
}

body.lg-shell[data-hub-layout="sidebar"] .project-card {
  border-radius: 16px;
  padding: 22px 22px 18px;
}

body.lg-shell[data-hub-layout="sidebar"] .project-card__name {
  font-size: 18px;
  letter-spacing: 0.01em;
}

body.lg-shell[data-hub-layout="sidebar"] .project-card__summary {
  font-size: 13.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--muted) 95%, transparent);
}

html[data-theme="dark"] body.lg-shell[data-hub-layout="sidebar"] .hub-actions {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 手机 */
@media (max-width: 768px) {
  :root {
    --hub-rail-w: min(216px, 44vw);
  }

  body.lg-shell[data-hub-layout="sidebar"] .hub-rail {
    position: sticky;
    height: 100dvh;
    padding: 14px 10px 10px;
  }

  body.lg-shell[data-hub-layout="sidebar"] .hub-stage > .page-main {
    padding:
      24px
      max(16px, env(safe-area-inset-right, 0px))
      56px
      max(16px, env(safe-area-inset-left, 0px));
  }

  body.lg-shell[data-hub-layout="sidebar"] .hub-actions {
    padding: 0;
  }

}

/* ═══════════════════════════════════════════════
 * 工作台 · 单列侧栏 + 平台/工作台导航解耦
 * 顶栏布局：顶栏右侧平台菜单；侧栏仅工作台导航
 * 左侧布局：藏顶栏；平台壳 + 工作台壳同列；工具条进侧栏脚
 * ═══════════════════════════════════════════════ */

.hub-layout-toggle-host {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.hub-layout-toggle-host:empty {
  display: none;
}

.hub-rail a.hub-rail__item,
.hub-rail a.nav-tab,
.platform-nav-host a.hub-rail__item,
.platform-nav-host a.nav-tab {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

/* 工作台顶栏右侧簇：唯一平台菜单宿主 + 工具靠右 */
body:not(.lg-shell) .wb-topbar-end {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-left: 0;
}

/* 左侧布局：整条顶栏隐藏（与首页侧栏模式一致） */
body:not(.lg-shell)[data-hub-layout="sidebar"] > #wbTopbar,
body:not(.lg-shell)[data-hub-layout="sidebar"] > .topbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
body:not(.lg-shell)[data-hub-layout="sidebar"] {
  --topbar-h: 0px;
}
body:not(.lg-shell)[data-hub-layout="sidebar"] > .workbench,
body:not(.lg-shell)[data-hub-layout="sidebar"] > .shell-nav-mask {
  margin-left: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 平台壳 / 工作台壳：结构解耦；侧栏布局时左右两列（飞书式） */
:root {
  --wb-platform-rail-w: 200px;
}

.wb-platform-chrome {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: 0;
}
.wb-platform-chrome .wb-sidebar-platform {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.wb-platform-chrome .hub-rail__nav-slot {
  flex: 1 1 auto;
}
.wb-platform-chrome .hub-rail__dock,
.wb-platform-chrome__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 10px 14px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
html[data-theme="dark"] .wb-platform-chrome .hub-rail__dock,
html[data-theme="dark"] .wb-platform-chrome__foot {
  border-top-color: rgba(255, 255, 255, 0.08);
}
/* 脚区有子节点时勿被 .hub-rail__dock:empty 误伤 */
.wb-platform-chrome__foot:not(:empty) {
  display: flex !important;
}
.wb-workbench-chrome {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.wb-workbench-chrome .platform-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
}
.wb-workbench-chrome .file-explorer {
  flex: 1 1 auto;
  min-height: 0;
}

/* 侧栏布局：整条侧栏变为「平台列 | 工作台列」 */
body:not(.lg-shell)[data-hub-layout="sidebar"] .platform-sidebar {
  flex-direction: row;
  align-items: stretch;
  width: calc(var(--wb-platform-rail-w, 200px) + var(--sidebar-w, 268px)) !important;
  min-width: calc(var(--wb-platform-rail-w, 200px) + var(--sidebar-w, 268px)) !important;
  max-width: calc(var(--wb-platform-rail-w, 200px) + min(420px, 45vw)) !important;
  border-right: none;
  background: transparent;
}
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome {
  display: flex;
  flex-direction: column;
  width: var(--wb-platform-rail-w, 200px);
  min-width: var(--wb-platform-rail-w, 200px);
  max-width: var(--wb-platform-rail-w, 200px);
  height: 100%;
  min-height: 100%;
  align-self: stretch;
  isolation: isolate;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(var(--lg-blur, 24px)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--lg-blur, 24px)) saturate(1.15);
  border-right: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  color: var(--text, #171717);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome {
  background: rgba(22, 22, 22, 0.55);
  border-right-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-workbench-chrome {
  width: var(--sidebar-w, 268px);
  min-width: var(--sidebar-w, 268px);
  max-width: min(420px, 45vw);
  flex: 0 0 auto;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text, #171717);
}
[data-theme="dark"] body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-workbench-chrome {
  background: var(--cursor-bg-sidebar, #141414);
  border-right-color: rgba(255, 255, 255, 0.1);
}

/* 嵌入/独立分享工作台：卸掉平台壳 */
html[data-wb-standalone="1"] .wb-platform-chrome,
body[data-wb-standalone="1"] .wb-platform-chrome {
  display: none !important;
}
html[data-wb-standalone="1"] body:not(.lg-shell)[data-hub-layout="sidebar"] .platform-sidebar,
body[data-wb-standalone="1"]:not(.lg-shell)[data-hub-layout="sidebar"] .platform-sidebar {
  width: var(--sidebar-w, 268px);
  min-width: var(--sidebar-w, 268px);
}

/* 左列：平台导航内容 */
.wb-sidebar-platform {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 12px 8px;
  gap: 4px;
  border-bottom: none;
}
.wb-platform-chrome__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 4px 16px;
}
.wb-platform-chrome__head .synapse-brand {
  width: 100%;
}
.wb-platform-chrome__mark.synapse-brand__mark,
.synapse-brand__mark.wb-platform-chrome__mark {
  /* 品牌 mark 样式以 synapse-brand 为准，避免与旧「视」字标重复打架 */
  font-size: 0;
}
.wb-platform-chrome__brand.synapse-brand__zh-title,
.wb-platform-chrome__brand.synapse-brand__name {
  padding-top: 0;
  line-height: 1.35;
}
html[data-theme="dark"] .wb-platform-chrome__brand {
  color: rgba(255, 255, 255, 0.94);
}

.wb-sidebar-section-label {
  margin: 0 4px 8px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .wb-sidebar-section-label,
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .hub-rail__label {
  color: var(--muted);
  opacity: 1;
}
html[data-theme="dark"] body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .wb-sidebar-section-label,
html[data-theme="dark"] body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .hub-rail__label {
  color: rgba(255, 255, 255, 0.38);
}

.wb-sidebar-platform__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
}

.wb-sidebar-platform__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .wb-sidebar-platform__item {
  color: var(--muted);
}
html[data-theme="dark"] body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .wb-sidebar-platform__item {
  color: rgba(255, 255, 255, 0.55);
}
.wb-sidebar-platform__item:hover {
  color: var(--text);
  background: var(--surface-hover, rgba(0, 0, 0, 0.05));
}
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .wb-sidebar-platform__item:hover {
  color: var(--text);
  background: var(--surface-hover, rgba(0, 0, 0, 0.05));
}
html[data-theme="dark"] body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .wb-sidebar-platform__item:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
}
/* 与首页侧栏导航同气质 */
.wb-sidebar-platform__item.is-active,
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .wb-sidebar-platform__item.is-active {
  color: var(--text);
  font-weight: 600;
  background: var(--surface-active, rgba(0, 0, 0, 0.06));
  box-shadow:
    inset 0 0 0 1px var(--border, rgba(0, 0, 0, 0.08)),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .wb-sidebar-platform__item.is-active,
html[data-theme="dark"] body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-platform-chrome .wb-sidebar-platform__item.is-active {
  color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.wb-sidebar-platform__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  color: inherit;
  opacity: 0.9;
}
.wb-sidebar-platform__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 侧栏头：项目切换 + 模式切换（纵向） */
.wb-sidebar-project {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin-bottom: 8px;
}
.wb-sidebar-project__row {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.wb-sidebar-project__select.topbar__project-select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100% !important;
  max-width: none;
  box-sizing: border-box;
  height: 32px;
  padding: 0 22px 0 4px;
  font-size: 14px;
  font-weight: 650;
  field-sizing: fixed;
}
.wb-sidebar-project__chevron {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  opacity: 0.75;
}
.wb-sidebar-project .project-code-tag {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

/* 工作台脚区已并入平台列，避免双列底部并排打架 */
.wb-sidebar-foot {
  display: none;
}

/* 平台列底部：就绪 → 主题/布局 → 账号卡片（竖排对齐） */
.wb-status-dock:empty {
  display: none;
}
.wb-status-host:empty {
  display: none;
}

.wb-sidebar-status {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.wb-platform-chrome__foot .platform-status {
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}
.wb-platform-chrome__foot .platform-status:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}

.wb-sidebar-utilities-dock {
  display: none;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-sidebar-utilities-dock {
  display: flex;
}
/* 有工具条时强制显示；勿用 :empty+!important 把刚迁入的节点盖掉 */
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-sidebar-utilities-dock:has(.hub-utilities),
body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-sidebar-utilities-dock:has(.wb-utilities) {
  display: flex !important;
}
.wb-sidebar-utilities-dock:empty {
  display: none;
}

/* 平台列底部工具条（深色轨 · 对齐竖排） */
.wb-sidebar-utilities-dock .wb-utilities,
.wb-sidebar-utilities-dock .hub-utilities {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.wb-sidebar-utilities-dock .hub-utilities__tools {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 0 2px;
}
.wb-sidebar-utilities-dock .hub-utilities__tools::after,
.wb-sidebar-utilities-dock .hub-utilities__tools::before {
  display: none !important;
  content: none !important;
}
.wb-sidebar-utilities-dock .hub-layout-toggle,
.wb-sidebar-utilities-dock .theme-toggle,
.wb-sidebar-utilities-dock .st-sunMoonThemeToggleBtn {
  margin-left: 0;
  flex-shrink: 0;
  color: var(--muted);
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}
.wb-sidebar-utilities-dock .hub-layout-toggle:hover,
.wb-sidebar-utilities-dock .theme-toggle:hover,
.wb-sidebar-utilities-dock .st-sunMoonThemeToggleBtn:hover {
  color: var(--text);
  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
}
html[data-theme="dark"] .wb-sidebar-utilities-dock .hub-layout-toggle,
html[data-theme="dark"] .wb-sidebar-utilities-dock .theme-toggle,
html[data-theme="dark"] .wb-sidebar-utilities-dock .st-sunMoonThemeToggleBtn {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .wb-sidebar-utilities-dock .hub-layout-toggle:hover,
html[data-theme="dark"] .wb-sidebar-utilities-dock .theme-toggle:hover,
html[data-theme="dark"] .wb-sidebar-utilities-dock .st-sunMoonThemeToggleBtn:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.12);
}
.wb-sidebar-utilities-dock .hub-layout-toggle-host {
  margin-left: auto;
}

/* 账号区：头像 + 用户名 + 退出（与首页侧栏同布局，勿用旧三列网格） */
.wb-sidebar-utilities-dock .auth-bar {
  order: 1;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.04);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}
html[data-theme="dark"] .wb-sidebar-utilities-dock .auth-bar {
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
}
.wb-sidebar-utilities-dock .auth-identity {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: 36px;
  padding: 0 8px 0 4px;
  border-radius: 10px;
  gap: 8px;
}
.wb-sidebar-utilities-dock .auth-bar__avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  background: linear-gradient(145deg, #e6e6e6, #f5f5f5);
  border-color: var(--border, rgba(0, 0, 0, 0.08));
  color: var(--text);
  flex-shrink: 0;
}
html[data-theme="dark"] .wb-sidebar-utilities-dock .auth-bar__avatar {
  background: linear-gradient(145deg, #4a4a4a, #2c2c2c);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f4f4f4;
}
.wb-sidebar-utilities-dock .auth-identity__text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  pointer-events: none;
}
.wb-sidebar-utilities-dock .auth-identity__user {
  font-weight: 600;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
html[data-theme="dark"] .wb-sidebar-utilities-dock .auth-identity__user {
  color: rgba(255, 255, 255, 0.92);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
}
.wb-sidebar-utilities-dock .auth-bar .btn--sm {
  margin-left: 0;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  opacity: 0.75;
  flex-shrink: 0;
}
.wb-sidebar-utilities-dock .auth-bar .btn--sm:hover {
  color: var(--text);
  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
  opacity: 1;
}
html[data-theme="dark"] .wb-sidebar-utilities-dock .auth-bar .btn--sm {
  border-color: transparent;
  color: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .wb-sidebar-utilities-dock .auth-bar .btn--sm:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
/* 旧结构兜底隐藏 */
.wb-sidebar-utilities-dock .auth-team,
.wb-sidebar-utilities-dock .auth-team:hover,
.wb-sidebar-utilities-dock .auth-bar__team-select,
.wb-sidebar-utilities-dock .auth-bar > .auth-bar__user {
  display: none !important;
}

/* 左侧布局：工作台列默认宽（总宽 = 平台列 + 工作台列） */
body:not(.lg-shell)[data-hub-layout="sidebar"] {
  --sidebar-w: 268px;
}

/* 顶栏上唯一平台菜单视觉 */
body:not(.lg-shell) .platform-nav-host .nav-tab {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  border: none;
}
body:not(.lg-shell) .platform-nav-host .nav-tab:hover {
  color: var(--text);
  background: var(--surface-hover, rgba(0, 0, 0, 0.05));
}

body:not(.lg-shell)[data-hub-layout="sidebar"] .workbench-main {
  position: relative;
}
.wb-shell-nav-host:empty {
  display: none;
}
@media (max-width: 768px) {
  body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-shell-nav-fab-host {
    display: inline-flex;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: calc(var(--platform-chrome-z, 200) + 5);
  }
  body:not(.lg-shell)[data-hub-layout="sidebar"] .wb-shell-nav-fab-host .topbar-spine-toggle {
    display: inline-flex !important;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  body:not(.lg-shell)[data-hub-layout="sidebar"] {
    --wb-platform-rail-w: min(168px, 38vw);
    --sidebar-w: min(220px, 52vw);
  }
  body:not(.lg-shell)[data-hub-layout="sidebar"] .platform-sidebar {
    top: 0;
    width: min(92vw, calc(var(--wb-platform-rail-w) + var(--sidebar-w))) !important;
    min-width: min(92vw, calc(var(--wb-platform-rail-w) + var(--sidebar-w))) !important;
    max-width: 92vw !important;
  }
  body:not(.lg-shell)[data-hub-layout="sidebar"] .workbench .platform-sidebar,
  body:not(.lg-shell)[data-hub-layout="sidebar"] .workbench.spine-collapsed .platform-sidebar {
    width: min(92vw, calc(var(--wb-platform-rail-w) + var(--sidebar-w))) !important;
    min-width: min(92vw, calc(var(--wb-platform-rail-w) + var(--sidebar-w))) !important;
    max-width: 92vw !important;
  }
  body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .hub-rail__icon,
  body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .wb-sidebar-platform__icon {
    display: none;
  }
}

@media (max-width: 900px) {
  body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab {
    padding: 6px 8px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════
 * 顶栏右簇 · 描边流光（淡、慢、低调）
 * 原理：背后转一圈淡光，正面实心盖住，只露细描边
 * 仅顶栏布局；侧栏隐藏跑光
 * ═══════════════════════════════════════════════ */

@keyframes hub-chrome-rotate {
  to { transform: rotate(360deg); }
}

/* 右簇轻托底，不抢描边 */
body.lg-shell[data-hub-layout="top"] .hub-top-account-group,
body.lg-shell:not([data-hub-layout]) .hub-top-account-group,
body:not(.lg-shell)[data-hub-layout="top"] .wb-topbar-end,
body:not(.lg-shell):not([data-hub-layout]) .wb-topbar-end {
  gap: 10px;
  padding: 2px;
  border-radius: 999px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ── 平台菜单 / 退出：流光按钮壳 ── */
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab,
body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar #authLogout,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar #authLogout {
  --hub-chrome-active: 0;
  --hub-chrome-face: var(--hub-chrome-logout-face);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: visible;
  z-index: 0;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: scale(calc(1 + (var(--hub-chrome-active) * 0.02)));
  transform-origin: center;
  transition: transform 0.35s ease, color 0.22s ease, -webkit-text-fill-color 0.22s ease;
  color: var(--hub-chrome-ink);
  -webkit-text-fill-color: var(--hub-chrome-ink);
  font-weight: 550;
  cursor: pointer;
}

body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab {
  padding: 7px 16px !important;
  letter-spacing: 0.01em;
}

body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar #authLogout,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar #authLogout {
  height: 26px;
  min-height: 26px;
  padding: 0 11px !important;
  font-size: 12px;
  align-self: center;
}

/* 正面实心底（盖住转光中心，只留描边） */
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab::before,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab::before,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab::before,
body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout::before,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar #authLogout::before,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout::before,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar #authLogout::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--hub-chrome-face);
  box-shadow: var(--hub-chrome-logout-shadow);
  transition: box-shadow 0.35s ease, opacity 0.25s ease;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

/* 悬停高光层（中性白，不用紫） */
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab::after,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab::after,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab::after,
body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout::after,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar #authLogout::after,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout::after,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar #authLogout::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    radial-gradient(at 51% 89%, hsla(0, 0%, 100%, 0.12) 0px, transparent 52%),
    radial-gradient(at 100% 100%, hsla(0, 0%, 80%, 0.08) 0px, transparent 50%),
    hsla(0, 0%, 100%, 0.03);
  opacity: calc(var(--hub-chrome-active) * 0.55);
  transition: opacity 0.35s ease;
  z-index: 2;
  pointer-events: none;
}

body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible),
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible),
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible),
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible) {
  --hub-chrome-active: 1;
  color: var(--hub-chrome-ink-strong);
  -webkit-text-fill-color: var(--hub-chrome-ink-strong);
  font-weight: 550;
}

body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab:is(:hover, :focus-visible),
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab:is(:hover, :focus-visible),
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab:is(:hover, :focus-visible),
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab.is-active,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab.is-active,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab.is-active {
  --hub-chrome-active: 1;
  color: var(--hub-chrome-ink-strong);
  -webkit-text-fill-color: var(--hub-chrome-ink-strong);
  font-weight: 550;
}

/* 选中 / 悬停：露出实心底，才能「抠」出描边流光 */
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab:is(:hover, :focus-visible)::before,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab:is(:hover, :focus-visible)::before,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab:is(:hover, :focus-visible)::before,
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab.is-active::before,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab.is-active::before,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab.is-active::before,
body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible)::before,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible)::before,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible)::before,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible)::before {
  opacity: 1;
}

/* 选中态默认就有实心底 + 持续流光（不必悬停） */
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab.is-active,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab.is-active,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab.is-active {
  --hub-chrome-active: 1;
}

body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab:active,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab:active,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab:active,
body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout:active,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar #authLogout:active,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout:active,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar #authLogout:active {
  transform: scale(1);
}

/* 文案压在最上层 */
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab > span:not(.hub-chrome-dots),
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab > span:not(.hub-chrome-dots),
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab > span:not(.hub-chrome-dots),
.hub-chrome-label {
  position: relative;
  z-index: 10;
}

/* 描边流光层：比按钮大 2px，白光旋转，只露边缘一圈 */
body.lg-shell[data-hub-layout="top"] .hub-chrome-dots,
body.lg-shell:not([data-hub-layout]) .hub-chrome-dots,
body:not(.lg-shell)[data-hub-layout="top"] .hub-chrome-dots,
body:not(.lg-shell):not([data-hub-layout]) .hub-chrome-dots {
  --size_border: calc(100% + 2px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size_border);
  height: var(--size_border);
  border-radius: inherit;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  z-index: -10;
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab.is-active > .hub-chrome-dots,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab.is-active > .hub-chrome-dots,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab.is-active > .hub-chrome-dots,
body.lg-shell[data-hub-layout="top"] .platform-nav-host .hub-rail__item.nav-tab:is(:hover, :focus-visible) > .hub-chrome-dots,
body.lg-shell:not([data-hub-layout]) .platform-nav-host .hub-rail__item.nav-tab:is(:hover, :focus-visible) > .hub-chrome-dots,
body:not(.lg-shell)[data-hub-layout="top"] .platform-nav-host .nav-tab:is(:hover, :focus-visible) > .hub-chrome-dots,
body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible) > .hub-chrome-dots,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible) > .hub-chrome-dots,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible) > .hub-chrome-dots,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar #authLogout:is(:hover, :focus-visible) > .hub-chrome-dots {
  opacity: 0.5;
}

body.lg-shell[data-hub-layout="top"] .hub-chrome-dots::before,
body.lg-shell:not([data-hub-layout]) .hub-chrome-dots::before,
body:not(.lg-shell)[data-hub-layout="top"] .hub-chrome-dots::before,
body:not(.lg-shell):not([data-hub-layout]) .hub-chrome-dots::before {
  content: "";
  position: absolute;
  top: 28%;
  left: 50%;
  width: 100%;
  height: 1.1rem;
  background-color: rgba(255, 255, 255, 0.38);
  transform-origin: left;
  transform: rotate(0deg);
  mask: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-mask: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.8) 100%);
  animation: hub-chrome-rotate 3.4s linear infinite;
}

html:not([data-theme="dark"]) body.lg-shell .hub-chrome-dots::before,
html:not([data-theme="dark"]) body:not(.lg-shell) .hub-chrome-dots::before {
  background-color: rgba(0, 0, 0, 0.2);
}

body[data-hub-layout="sidebar"] .hub-chrome-dots {
  display: none !important;
}

/* 工具钮轻凹凸 · 跟随明暗主题 token */
body.lg-shell[data-hub-layout="top"] .hub-utilities__tools .chrome-icon-btn,
body.lg-shell:not([data-hub-layout]) .hub-utilities__tools .chrome-icon-btn,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities__tools .chrome-icon-btn,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities__tools .chrome-icon-btn {
  border-radius: 999px;
  background: var(--hub-chrome-face);
  color: var(--hub-chrome-ink);
  box-shadow: var(--hub-chrome-btn-shadow);
  transition: transform 0.22s ease, color 0.2s ease, box-shadow 0.22s ease;
}
body.lg-shell[data-hub-layout="top"] .hub-utilities__tools .chrome-icon-btn:hover,
body.lg-shell:not([data-hub-layout]) .hub-utilities__tools .chrome-icon-btn:hover,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities__tools .chrome-icon-btn:hover,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities__tools .chrome-icon-btn:hover {
  transform: scale(1.06);
  color: var(--hub-chrome-ink-strong);
  box-shadow: var(--hub-chrome-btn-shadow-hover);
}

/* 账号条：矮一截，顶栏上下留呼吸边距 */
body.lg-shell[data-hub-layout="top"] .hub-utilities .auth-bar,
body.lg-shell:not([data-hub-layout]) .hub-utilities .auth-bar,
body:not(.lg-shell)[data-hub-layout="top"] .hub-utilities .auth-bar,
body:not(.lg-shell):not([data-hub-layout]) .hub-utilities .auth-bar {
  padding: 2px 3px 2px 2px;
  height: 30px;
  max-height: 30px;
  border-radius: 999px;
  border: 1px solid var(--hub-chrome-border);
  background: color-mix(in srgb, var(--hub-chrome-face-bar) 72%, transparent);
  box-shadow: var(--hub-chrome-bar-shadow);
  color: var(--hub-chrome-ink-strong);
  -webkit-text-fill-color: var(--hub-chrome-ink-strong);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  align-self: center;
}

body.lg-shell[data-hub-layout="top"] .hub-utilities__tools::after,
body.lg-shell:not([data-hub-layout]) .hub-utilities__tools::after {
  height: 14px;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .hub-chrome-dots::before {
    animation: none !important;
  }
}