/* ============================================================
   GJ · 工作台首页样式
   纯黑白灰 · 玻璃拟物 · 微动效
   ============================================================ */

:root {
  --ink:    #000000;   /* 背景纯黑 */
  --panel:  #0a0a0a;   /* 面板深灰 */
  --line:   #1a1a1a;   /* 分割线 */
  --line2:  #2a2a2a;   /* 强调边框 */
  --line3:  #3a3a3a;   /* 高亮边框 */
  --neon1:  #ffffff;   /* 重点白(原 neon1) */
  --neon2:  #cccccc;   /* 浅灰(原 neon2) */
  --neon3:  #888888;   /* 中灰(原 neon3) */
  --muted:  #6a6a6a;   /* 弱化灰文字 */
}

* { -webkit-tap-highlight-color: transparent; }
html {
  /* 永远给滚动条预留位置(就算页面没有滚动条也占 15px 槽位),
     避免内容因滚动条出现/消失而左右跳(尤其切到长 tab 如 API 支付 时) */
  scrollbar-gutter: stable;
}
html, body { background: var(--ink); }
body {
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  color: #e5e5e5;
}

/* 自定义滚动条 — 极小宽度, 不抢视线 */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.6); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.35) transparent; }

/* ============================================================
   顶部 Logo 标识(目前未用,保留以备后用)
   ============================================================ */
.logo-mark {
  position: relative; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
.logo-mark__core {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #888888);
  box-shadow: 0 0 12px rgba(255,255,255,0.4);
}
.logo-mark__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-top-color: transparent; border-right-color: transparent;
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   导航 / 按钮
   ============================================================ */
.nav-link {
  padding: 0.5rem 0.9rem; border-radius: 8px; color: #c4c4c4;
  transition: background 0.2s, color 0.2s;
}
.nav-link:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* 导航 mega menu(参考 OpenAI:大字号、扁平、宽面板,无圆角无装饰) */
header.sticky.top-0 {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 0;
}
.theme-light header.sticky.top-0 {
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 0;
}

/* ============ 顶部 banner + 菜单浮图 (根目录首页用) ============ */
/* 用 <img> 标签撑高容器, 浏览器自动按图片真实比例算高度.
   user 改图后不用改 CSS, 高度自适应. */

/* tt.jpg 容器外的左右黑色延展: 高度 554 跟 tt.jpg 一致, 宽度跟随视窗自适应 (视窗越宽左右黑越宽) */
.topbar-side-bg {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  width: 100%;
  /* 关键: CSS 兜底 580px (1280 视窗 hero img 高度), JS 同步 hero.offsetHeight 写 inline style.height 精确覆盖.
     之前用 min(calc(100vw * 比例)) 算不准 (sub-pixel round error), 现在用 JS 拿精确像素 */
  height: 580px;
  background: #000;
  z-index: 0;
  pointer-events: none;
}
.topbar-hero {
  position: relative;
  width: 100%;
  max-width: 1280px;            /* 跟下面 max-w-7xl 容器同宽, 居中后左右严格对齐, "视觉工作台" 跟 "常规工单进度" 左边严格一致 */
  margin-left: auto;
  margin-right: auto;
  z-index: 50;                  /* 提到 50, 让 nav (z=9999) 和下拉菜单 (z=99) 真正盖在所有内容之上, 不被 stats-row 等压住 */
  overflow: hidden;
  isolation: isolate;           /* 防止 mix-blend-mode 特效溢出 hero 跟外部内容混合 */
  background: #0a0a0a;          /* 兜底色 (图加载前) */
}
.topbar-hero__img {
  display: block;
  width: 100%;
  height: auto;                 /* 关键: 浏览器按图片真实比例自动算高度, 容器高度跟 tt.jpg 一样 */
  z-index: 0;
  opacity: 1;                   /* 恢复图显示 */
  visibility: visible;
}
/* tt.jpg 底部 90px 高 70% 透明黑色条 (固定高度, 不受特效影响, 浮在所有特效层之上) */
.topbar-hero__strip {
  position: absolute;            /* 浮在 hero 底部, 不参与文档流, 保持 hero 高度 = img 高度 */
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 90px;                   /* 固定 90px, 高度不被特效层影响 */
  background: rgba(0, 0, 0, 0.7); /* 70% 不透明 (30% 透明) 深黑 */
  z-index: 2;                     /* > 特效层 z-index: 1 (holo/grid/sweep/particles/vignette), 浮在所有特效层之上 */
  display: flex; align-items: center;  /* 让内部 link 垂直居中 */
  padding: 0 24px;                /* 跟下面 max-w-7xl 容器 (px-6=24px) 一致: hero 跟 max-w-7xl 同宽 1280 居中, 两边都是 24px 内边距 */
}
/* GJ.html 顶部菜单 (gj-header) — 白色主题下: 黑底 + 文字/按钮/边框/图标颜色 #dbdbdb (浅灰) */
.theme-light .gj-header { background: #000 !important; }
.theme-light .gj-header a,
.theme-light .gj-header button,
.theme-light .gj-header span,
.theme-light .gj-header svg { color: #dbdbdb !important; border-color: #dbdbdb !important; }

/* 透明黑条上左侧菜单链接 — 仅保留 2 个颜色 (初始 #ad8d8 / hover #ff6b19), 其它样式全部默认 */
.topbar-hero__strip-linkwrap { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.topbar-hero__strip-link,
.topbar-hero__strip-link:link,
.topbar-hero__strip-link:visited,
.topbar-hero__strip-link:active {
  color: #8e9091;                  /* 初始: 灰 */
}
.topbar-hero__strip-link:hover {
  color: #ff6b19;                  /* hover: 橙色 */
}
.topbar-hero__strip-menu {
  margin-left: 50px;               /* 紧贴"视觉工作台"右边, 间距 50px */
  font-size: 1rem;                 /* 跟主菜单"视觉工作台"同字号 (副标题继承 .topbar-hero__strip-sub 字号) */
  text-decoration: none;
}
.topbar-hero__strip-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;            /* 比主标题 1rem 小 3px (≈3 号字) */
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-top: 4px;                  /* 行距比原来 2px 增加 1 倍 → 4px */
  margin-left: 0;                  /* 文字左边对齐主标题 */
}
.topbar-hero__veil {
  display: none;                /* 去掉盖在 tt.jpg 上的黑色 veil, 让图片完整显示 */
}
.topbar-hero__nav {
  position: fixed;                 /* 始终固定在顶部, 不管是否滚动 */
  top: 0; left: 0; right: 0;
  z-index: 9999;                   /* 强制最高层, 永远在所有内容上面 */
  background: transparent !important;  /* scroll=0 时透明显 tt.jpg */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  color: #fff;
  isolation: isolate;              /* 新建独立 stacking context, 防止 backdrop-filter 或子元素 z-index 异常 */
  transition: background 180ms ease, backdrop-filter 180ms ease;
}
.topbar-hero__nav.is-scrolled {
  background: #000 !important;     /* 滚动立刻纯黑底, 不透任何内容 */
  backdrop-filter: none !important;  /* 移除 blur, 避免被 blur 透出后面内容 */
  -webkit-backdrop-filter: none !important;
  /* box-shadow 已去掉 (用户要求不要阴影) */
}
/* 鼠标移到 视觉/监测 等带下拉的菜单项时, 整个顶导航底色变黑,
   跟下方弹出的全宽下拉菜单融成一片 */
.topbar-hero__nav:has(.nav-item--mega:hover) {
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* 菜单文字/品牌/logo/链接/按钮 全部白 */
.topbar-hero__nav .text-slate-300 { color: rgba(255, 255, 255, 0.9) !important; }
.topbar-hero__nav .text-xl { color: #fff !important; }
.topbar-hero__nav .nav-link { color: #fff; }
.topbar-hero__nav .nav-link:hover { color: #fff; opacity: 0.85; }
.topbar-hero__nav .btn-ghost,
.topbar-hero__nav .id-logout-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
  min-height: 40px;  /* 统一所有顶部按钮高度 (主题/移动端/ID/退出/铃铛) */
}
.topbar-hero__nav .btn-ghost:hover,
.topbar-hero__nav .id-logout-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.topbar-hero__nav #theme-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
/* 让顶图占满的 spacer (避免内容紧贴图) */
.topbar-hero + * { margin-top: 0; }

/* 强制顶图上的菜单/链接/按钮全白 (覆盖 .theme-light 默认) */
.topbar-hero__nav .nav-link,
.topbar-hero__nav .nav-link:hover,
.topbar-hero__nav .nav-link--active,
.theme-light .topbar-hero__nav .nav-link,
.theme-light .topbar-hero__nav .nav-link:hover,
.theme-light .topbar-hero__nav .nav-link--active {
  color: #fff !important;
}

.nav-item--mega { position: relative; }
.mega-menu {
  position: fixed;
  top: 70px; left: 0; right: 0;
  background: #000;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 0 1.5rem;                /* 顶 0 (紧贴 nav 底), 底 1.5rem (黑色底离文字留一行空) */
  height: auto;                       /* 高度由内容决定 */
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 99;
}
.nav-item--mega:hover .mega-menu,
.nav-item--mega:focus-within .mega-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mega-menu__inner {
  /* 满宽, 不居中, 用 margin-left 接受 JS 动态算的偏移量 */
  max-width: none;
  margin: 0;
  padding: 0 1.5rem 0 0;
  display: flex;
  align-items: flex-start;
  /* --mega-pl = "视觉/监测" 菜单文字精确 left, 让下拉菜单第一列跟 nav 菜单文字对齐 */
  margin-left: var(--mega-pl, 0px);
}
.mega-menu__col + .mega-menu__col {
  margin-left: 3.75rem;      /* 两列水平排, 间距 60px */
}
.mega-menu__col {
  display: flex; flex-direction: column;
  flex: 0 0 auto;
}
.mega-menu__kicker {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 1.5rem;
}
.mega-menu__list {
  display: flex; flex-direction: column; gap: 1.1rem;
}
.mega-menu__item {
  display: block;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.15s, transform 0.15s;
}
.mega-menu__item:hover { color: #fff; transform: translateX(4px); }
.mega-menu__item-sub {
  display: block;
  color: #888;
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 0.25rem;
  letter-spacing: 0;
}
.mega-menu__latest {
  display: flex; flex-direction: column; gap: 0.85rem;
}
.mega-menu__latest-item {
  display: block;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s;
}
.mega-menu__latest-item:hover { color: #fff; opacity: 0.7; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.05rem; border-radius: 10px; font-weight: 500;
  color: #d4d4d4; border: 1px solid var(--line2);
  background: rgba(255,255,255,0.02);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.18s;
  font-size: 0.875rem;
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--line3); color: #fff; transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }
.btn-ghost--lg { padding: 0.85rem 1.6rem; font-size: 0.95rem; }

/* 导航栏 ID 显示(替换原来的"管理"按钮位) */
.nav-id-display {
  font-family: "SF Mono", ui-monospace, "Menlo", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #ddd;
  cursor: pointer;
}
.nav-id-display[data-state="active"] { color: #fff; }
.nav-id-display[data-state="inactive"] { color: #888; }
.nav-id-display:hover { color: #fff; }

/* 退出按钮(只在有 active ID 时显示) */
.nav-id-exit {
  font-size: 0.82rem;
  color: #aaa;
  padding: 0.4rem 0.75rem;
}
.nav-id-exit:hover { color: #ff8585; }

/* ============================================================
   Hero
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  font-size: 0.78rem; color: #c4c4c4;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line2);
  backdrop-filter: blur(8px);
}
.pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,0.6);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

.grad-text {
  background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero 顶部 banner 图(3000x1062 横图,默认与页面最大宽度一致,缩窗时跟随缩) */
.hero-banner {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.hero-banner__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3000 / 1062;
  object-fit: cover;
}
/* 品牌 logo 叠加层(sslg.png):覆盖在 sy.jpg 上,星空 canvas 下 */
.hero-banner__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}
/* 星空 canvas:覆盖在 sy.jpg 之上,半透明,鼠标穿透 */
.hero-banner__starfield {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;          /* 半透明,让 sy.jpg 透出 */
  z-index: 2;
}

/* 状态条 */
.status-bar {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem; border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line2);
  backdrop-filter: blur(12px);
  font-size: 0.82rem;
}
.status-item { display: inline-flex; align-items: center; gap: 0.45rem; }
.status-divider { width: 1px; height: 14px; background: var(--line2); }
.status-label { color: #9b9b9b; font-family: "SF Mono", monospace, monospace; }
.status-text { color: #c4c4c4; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3a3a3a; box-shadow: none;
  transition: background 0.3s, box-shadow 0.3s;
}
.status-dot[data-state="ok"]    { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,0.5); }
.status-dot[data-state="warn"]  { background: #888888; box-shadow: 0 0 8px rgba(136,136,136,0.4); }
.status-dot[data-state="err"]   { background: #4a4a4a; box-shadow: 0 0 8px rgba(74,74,74,0.4); }

/* ============================================================
   通用 Section 头
   ============================================================ */
.section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.section-kicker {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: #888888; margin-bottom: 0.9rem;
  font-family: "SF Mono", monospace;
}
.section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em;
}
.section-sub { margin-top: 0.9rem; color: #888888; font-size: 0.95rem; }

/* hero 按钮下方的引导语(比 section-title 小一号) */
.hero-prompt {
  margin-top: 5rem;     /* 按钮下面空两行 */
  font-size: 1.5rem;   /* section-title 2.5rem 的小一号 */
  color: #8a8a8a;
  font-weight: 700;     /* 粗体 */
  letter-spacing: 0.01em;
}

/* ============================================================
   三大能力卡片
   ============================================================ */
.cap-card {
  position: relative;
  padding: 1.6rem 1.5rem 1.4rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border: 1px solid var(--line2);
  backdrop-filter: blur(12px);
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
  overflow: hidden;
}
.cap-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.10), transparent 60%);
  opacity: 0.5; pointer-events: none;
  transition: opacity 0.3s;
}
.cap-card:hover {
  transform: translateY(-4px);
  border-color: var(--line3);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
.cap-card:hover::before { opacity: 1; }

.cap-card__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  border: 1px solid var(--line2);
  margin-bottom: 1.1rem;
}
.cap-card__icon svg { width: 22px; height: 22px; }

.cap-card__no {
  position: absolute; top: 1.4rem; right: 1.4rem;
  font-family: "SF Mono", monospace; font-size: 0.7rem; color: #4a4a4a;
  letter-spacing: 0.1em;
}
.cap-card__title {
  font-size: 1.15rem; font-weight: 600; margin-bottom: 0.55rem;
  color: #ffffff;
}
.cap-card__desc {
  font-size: 0.88rem; color: #888888; line-height: 1.65; margin-bottom: 1rem;
}
.cap-card__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.cap-card__list li {
  font-size: 0.72rem; padding: 0.28rem 0.6rem; border-radius: 6px;
  background: rgba(255,255,255,0.04); color: #a5a5a5;
  border: 1px solid var(--line2);
}

/* ============================================================
   流水线(桌面水平 / 移动垂直)
   ============================================================ */
.pipeline {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center;
}
.pipe-step {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line2);
  min-width: 150px;
  transition: border-color 0.25s, background 0.25s;
}
.pipe-step--hi {
  border-color: var(--line3);
  background: rgba(255,255,255,0.06);
}
.pipe-step--ok {
  border-color: #ffffff;
  background: rgba(255,255,255,0.10);
}
.pipe-step:hover { transform: translateY(-2px); }
.pipe-step__num {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: #ffffff;
  font-family: "SF Mono", monospace; font-size: 0.78rem; font-weight: 600;
}
.pipe-step__title { font-size: 0.9rem; font-weight: 500; }
.pipe-step__hint  { font-size: 0.7rem; color: #7a7a7a; margin-top: 2px; }
.pipe-arrow {
  color: #4a4a4a; font-size: 1.1rem; padding: 0 0.2rem;
  font-family: "SF Mono", monospace;
}

@media (max-width: 768px) {
  .pipeline { flex-direction: column; align-items: stretch; }
  .pipe-arrow { transform: rotate(90deg); }
}

/* 流程图 */
.flow-diagram {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line2);
  border-radius: 16px; padding: 1.2rem;
  backdrop-filter: blur(8px);
}

/* ============================================================
   快速开始场景卡
   ============================================================ */
.scene-card {
  display: block; padding: 1.3rem 1.2rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  border: 1px solid var(--line2);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  position: relative; overflow: hidden;
}
.scene-card::after {
  content: "→"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  color: #3a3a3a; font-size: 1.1rem; transition: color 0.2s, transform 0.2s;
}
.scene-card:hover { transform: translateY(-2px); border-color: var(--line3); }
.scene-card:hover::after { color: #ffffff; transform: translateY(-50%) translateX(2px); }
.scene-card__no {
  font-family: "SF Mono", monospace; font-size: 0.7rem; color: #4a4a4a; margin-bottom: 0.7rem;
}
.scene-card__title { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; }
.scene-card__desc  { font-size: 0.78rem; color: #7a7a7a; }

/* CTA block */
.cta-block {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.8rem 2rem; border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.10), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.06), transparent 50%),
    rgba(255,255,255,0.02);
  border: 1px solid var(--line2);
  backdrop-filter: blur(12px);
}
.cta-block__title { font-size: 1.25rem; font-weight: 600; }
.cta-block__sub   { font-size: 0.88rem; color: #888888; margin-top: 0.3rem; }

/* ============================================================
   服务状态卡
   ============================================================ */
.svc-card {
  padding: 1.2rem 1.3rem; border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line2);
  transition: border-color 0.2s;
}
.svc-card:hover { border-color: var(--line3); }
.svc-card__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem;
}
.svc-card__name { font-size: 0.95rem; font-weight: 600; }
.svc-card__url  {
  font-family: "SF Mono", monospace; font-size: 0.78rem; color: #7a7a7a;
  word-break: break-all;
}
.svc-card__meta { font-size: 0.78rem; color: #5a5a5a; margin-top: 0.5rem; }

/* ============================================================
   管理菜单下拉
   ============================================================ */
.admin-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 240px;
  background: rgba(10,10,10,0.96);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 0.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  z-index: 50;
}
.admin-dropdown[hidden] { display: none; }
.admin-dropdown__head {
  font-size: 0.65rem;
  color: #5a5a5a;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.4rem 0.7rem 0.3rem;
  font-family: "SF Mono", monospace;
}
.admin-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  color: #d4d4d4;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.admin-dropdown__item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.admin-dropdown__icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  flex-shrink: 0;
  border: 1px solid var(--line2);
}
.admin-dropdown__icon svg { width: 16px; height: 16px; }
.admin-dropdown__title { font-size: 0.88rem; font-weight: 500; line-height: 1.2; }
.admin-dropdown__sub   { font-size: 0.7rem;  color: #7a7a7a; margin-top: 2px; }

/* ============================================================
   Settings 页面专属
   ============================================================ */
.nav-link--active { background: rgba(255,255,255,0.08); color: #fff; }

/* 左菜单 + 右内容 */
.settings-layout {
  display: block;
}
.settings-side {
  position: fixed;
  top: 5rem;
  /* 视窗窄时贴左 1rem, 视窗宽时贴在 main (max-w-6xl=72rem) 左边缘外 */
  left: max(1rem, calc(50% - 36rem));
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  z-index: 10;
}
.settings-content {
  margin-left: 220px;
}
.settings-menu {
  list-style: none; padding: 0; margin: 0;
  border-left: 1px solid var(--line2);
}
.settings-menu__item a {
  display: block; padding: 0.55rem 0 0.55rem 1rem;
  color: #888; font-size: 0.9rem;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.settings-menu__item a:hover { color: #fff; }
.settings-menu__item--active a {
  color: #fff;
  border-left-color: #fff;
}

@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .settings-side { position: static; }
  .settings-menu {
    display: flex; gap: 0.5rem;
    border-left: 0; border-bottom: 1px solid var(--line2);
    padding-bottom: 0.5rem;
  }
  .settings-menu__item a {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.8rem;
    margin-left: 0;
    margin-bottom: -1px;
  }
  .settings-menu__item--active a {
    border-left-color: transparent;
    border-bottom-color: #fff;
  }
}

.api-card {
  position: relative;
  padding: 1.4rem 1.5rem; border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line2);
  transition: border-color 0.2s;
}
.api-card:hover { border-color: var(--line3); }
.api-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
/* 标题 div 强制靠最左 (不让 actions 宽度挤掉 title) */
.api-card__head > div:not(.api-card__caret):not(.api-card__actions):not([class*="__head__"]) {
  margin-right: auto; padding-right: 140px;}
.api-card__name { font-size: 1rem; font-weight: 600; }
.api-card__desc { font-size: 0.78rem; color: #7a7a7a; margin-top: 2px; }
.api-card__status { position: absolute; top: 1.4rem; right: 3.2rem; display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; z-index: 2; }
.api-card__status-text { font-size: 0.78rem; color: #c4c4c4; }
.api-card__body { display: flex; flex-direction: column; gap: 0.4rem; }
.api-card__label {
  font-size: 0.78rem; color: #999; margin-top: 0.5rem;
  display: block; font-weight: 500;
}
.api-card__hint { color: #6a6a6a; font-weight: 400; font-size: 0.72rem; }
.api-card__input {
  width: 100%; padding: 0.6rem 0.85rem; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line2);
  color: #fff; font-size: 0.9rem;
  font-family: "SF Mono", monospace;
  transition: border-color 0.2s, background 0.2s;
}
.api-card__input:focus {
  outline: none;
  border-color: var(--line3);
  background: rgba(255,255,255,0.06);
}
.api-card__input::placeholder { color: #555; }
.api-card__actions {
  display: flex; gap: 0.6rem; margin-top: 1rem; justify-content: flex-end;
}

/* 折叠卡片(head 可点击,默认折叠) */
.api-card--collapsible .api-card__head {
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}
.api-card--collapsible .api-card__head:hover .api-card__name { color: #fff; }
.api-card--collapsible .api-card__body {
  max-height: 10000px;
  overflow: hidden;
  transition: max-height 0.25s ease, margin-top 0.25s ease, opacity 0.2s ease;
  margin-top: 1rem;
  opacity: 1;
}
.api-card--collapsible.api-card--collapsed .api-card__body {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
}
.api-card__caret {
  position: absolute;
  top: 1.4rem; right: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: #888;
  transition: transform 0.2s ease, color 0.2s;
  flex-shrink: 0;
  z-index: 2;
}
.api-card__caret svg { width: 14px; height: 14px; }
.api-card--collapsible .api-card__head:hover .api-card__caret { color: #fff; }
.api-card--collapsible.api-card--collapsed .api-card__caret { transform: rotate(-90deg); }
.api-card--collapsible .api-card__head [data-no-toggle] { position: relative; z-index: 1; }

/* 工作成效目标: 月度卡片可折叠 (12 张太长, 默认折叠) */
.wg-month-card__head:hover { background: rgba(0, 0, 0, 0.025); }
.wg-month-card__body { display: block; }
.wg-month-card--collapsed .wg-month-card__body { display: none; }
.wg-month-card--collapsed .wg-month-card__caret { transform: rotate(-90deg); }
.wg-month-card [data-no-toggle] { position: relative; z-index: 1; }

.theme-light .api-card--collapsible .api-card__head:hover .api-card__name { color: #000; }
.theme-light .api-card--collapsible .api-card__head:hover .api-card__caret { color: #000; }

.pay-card {
  display: block; padding: 1.1rem 1.2rem; border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line2);
  transition: background 0.2s, border-color 0.2s;
  text-decoration: none; color: inherit;
}
.pay-card:hover { background: rgba(255,255,255,0.07); border-color: var(--line3); }
.pay-card__title { font-size: 0.95rem; font-weight: 500; color: #fff; }
.pay-card__sub { font-size: 0.72rem; color: #7a7a7a; margin-top: 2px; }

/* Toast(保存/测试反馈) */
.toast {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 100;
  padding: 0.7rem 1.1rem; border-radius: 10px;
  background: rgba(20,20,20,0.95);
  border: 1px solid var(--line2);
  color: #fff; font-size: 0.88rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast--ok   { border-color: #ffffff; }
.toast--err  { border-color: #555; }

/* ============================================================
   滚动入场动画
   ============================================================ */
[data-anim] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-anim].in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; transform: none; transition: none; }
  .logo-mark__ring { animation: none; }
}

/* ============================================================
   密码小眼睛切换
   ============================================================ */
.pwd-wrap { position: relative; display: block; }
.pwd-wrap > input { padding-right: 2.5rem !important; }
.pwd-toggle {
  position: absolute;
  right: 0.55rem; top: 50%;
  transform: translateY(-50%);
  background: transparent; border: 0; padding: 0.3rem;
  color: #888; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.pwd-toggle:hover { color: #fff; background: rgba(255,255,255,0.06); }
.pwd-toggle svg { width: 16px; height: 16px; display: block; }
.pwd-toggle .eye-on  { display: none; }
.pwd-toggle.showing .eye-on  { display: block; }
.pwd-toggle.showing .eye-off { display: none; }

.theme-light .pwd-toggle { color: #888; }
.theme-light .pwd-toggle:hover { color: #000; background: rgba(0,0,0,0.05); }

/* ============================================================
   Modal(密码验证)
   ============================================================ */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.18s ease;
}
.modal__box {
  position: relative;
  width: 100%; max-width: 380px;
  padding: 1.8rem;
  border-radius: 16px;
  background: rgba(15, 15, 15, 0.96);
  border: 1px solid var(--line2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: pop-in 0.2s cubic-bezier(0.18, 1.25, 0.6, 1);
}
/* 居中变体: 移动端提示等只有图标 + 标题 + 副标题的简洁模态, 整块内容跟 modal 居中对齐 */
.modal__box--center {
  text-align: center;
  padding: 2rem 1.8rem;
}
.modal__box--center .modal__icon { margin: 0 auto 1rem; }
.modal__box--center .modal__title { text-align: center; }
.modal__box--center .modal__sub { text-align: center; margin-bottom: 0; }
.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 50%;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  z-index: 1;
}
.modal__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fg, #fff);
}
.theme-light .modal__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
}
.modal__close svg { width: 18px; height: 18px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line2);
  color: #fff;
  margin-bottom: 1rem;
}
.modal__icon svg { width: 22px; height: 22px; }
.modal__title {
  font-size: 1.15rem; font-weight: 600; color: #fff;
  margin-bottom: 0.3rem;
}
.modal__sub {
  font-size: 0.85rem; color: #ffffff;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.modal__version-row {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.modal__version-label {
  font-size: 0.85rem; color: #999;
  flex-shrink: 0;
}
.modal__version-select {
  flex: 1;
  padding: 0.55rem 0.75rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line2);
  color: #fff; font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.18s, background 0.18s;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 14px;
  padding-right: 2rem;
}
.modal__version-select:focus {
  outline: none;
  border-color: var(--line3);
  background-color: rgba(255, 255, 255, 0.07);
}
.modal__version-select option { background: #1a1a1a; color: #fff; }
.modal__input {
  width: 100%; padding: 0.65rem 0.85rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line2);
  color: #fff; font-size: 0.95rem;
  font-family: "SF Mono", monospace;
  transition: border-color 0.18s, background 0.18s;
}
.modal__input:focus {
  outline: none;
  border-color: var(--line3);
  background: rgba(255, 255, 255, 0.07);
}
.modal__input::placeholder { color: #555; }

/* 模态内 select(下拉)— 沿用 modal__input 视觉 */
.modal__select,
.modal__input[type="select"],
select.modal__input {
  width: 100%;
  padding: 0.65rem 2.2rem 0.65rem 0.85rem;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line2);
  color: #fff;
  font-size: 0.95rem;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 12px;
  text-overflow: ellipsis;
}
.modal__select:focus,
select.modal__input:focus {
  outline: none;
  border-color: var(--line3);
  background-color: rgba(255, 255, 255, 0.07);
}
.theme-light .modal__select,
.theme-light select.modal__input {
  background-color: #fff;
  color: #000;
  border-color: #d0d0d0;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 12px;
}
.theme-light .modal__select:focus,
.theme-light select.modal__input:focus {
  border-color: #000;
  background-color: #fff;
}
/* select option 内部(Webkit) */
.modal__select option { background: #0a0a0a; color: #fff; }
.theme-light .modal__select option { background: #fff; color: #000; }

.modal__error {
  font-size: 0.82rem; color: #ff8585; margin-top: 0.6rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.modal__error::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff8585;
}
.modal__actions {
  display: flex; gap: 0.6rem; margin-top: 1.4rem;
  justify-content: flex-end;
}
.modal__hint {
  font-size: 0.72rem; color: #666;
  margin-top: 1rem; text-align: center;
}

/* 通用确认弹窗(在视口居中,带警告图标 + 危险色按钮) */
.confirm-modal__box {
  max-width: 420px;
  text-align: center;
  padding: 1.75rem 1.5rem 1.25rem;
}
.confirm-modal__icon {
  margin: 0 auto 0.8rem;
  background: rgba(255, 133, 133, 0.12);
  border-color: rgba(255, 133, 133, 0.4);
  color: #ff8585;
}
#confirm-modal .modal__sub {
  white-space: pre-wrap;
  text-align: left;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.confirm-modal__ok--danger {
  background: rgba(255, 133, 133, 0.15);
  border-color: rgba(255, 133, 133, 0.5);
  color: #ff8585;
}
.confirm-modal__ok--danger:hover {
  background: rgba(255, 133, 133, 0.25);
  border-color: #ff8585;
}
/* 输入框(prompt 模式用) */
.confirm-modal__input-wrap {
  margin-bottom: 1rem;
  text-align: left;
}
.confirm-modal__input {
  width: 100%;
  height: 38px; padding: 0 0.7rem;
  background: var(--input-bg, rgba(15,23,42,0.6));
  border: 1px solid var(--line, rgba(148,163,184,0.3));
  border-radius: 6px;
  color: var(--fg, #e2e8f0);
  font-size: 0.9rem;
  outline: none;
  font-family: "SF Mono", ui-monospace, monospace;
  transition: border-color 0.15s;
}
.confirm-modal__input:focus {
  border-color: #3b82f6;
}
.theme-light .confirm-modal__input {
  background: #fff;
  color: #0f172a;
  border-color: rgba(15,23,42,0.2);
}
.confirm-modal__hint {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
}

/* 浅色主题下的 modal */
.theme-light .modal__backdrop { background: rgba(255, 255, 255, 0.6); }
.theme-light .modal__box {
  background: rgba(255, 255, 255, 0.98);
  border-color: #d0d0d0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.theme-light .modal__icon { background: rgba(0, 0, 0, 0.04); border-color: #d0d0d0; color: #000; }
.theme-light .modal__title { color: #000; }
.theme-light .modal__sub { color: #666; }
.theme-light .modal__input { background: #fff; color: #000; border-color: #d0d0d0; }
.theme-light .modal__input:focus { border-color: #000; background: #fff; }
.theme-light .modal__input::placeholder { color: #aaa; }
.theme-light .modal__version-label { color: #666; }
.theme-light .modal__version-select { background-color: #fff; color: #000; border-color: #d0d0d0; }
.theme-light .modal__version-select:focus { border-color: #000; background-color: #fff; }
.theme-light .modal__version-select option { background: #fff; color: #000; }
.theme-light .modal__hint { color: #999; }

/* ============================================================
   主题切换:白色(覆盖在 .theme-light body 上)
   ============================================================ */
.theme-light {
  --ink:    #ffffff;
  --panel:  #f5f5f5;
  --line:   #d0d0d0;
  --line2:  #b0b0b0;
  --neon1:  #000000;
  --neon2:  #333333;
  --neon3:  #666666;
  --muted:  #888888;
}
.theme-light body { color: #111; background: #ffffff; }

.theme-light .nav-link { color: #555; }
.theme-light .nav-link:hover { background: rgba(0,0,0,0.05); color: #000; }
.theme-light .nav-link--active { background: rgba(0,0,0,0.08); color: #000; }

.theme-light .btn-ghost { color: #333; border-color: #b0b0b0; }
.theme-light .btn-ghost:hover { background: rgba(0,0,0,0.05); border-color: #888; color: #000; }

.theme-light .btn-primary { color: #ffffff; background: #000000; border-color: #000000; }
.theme-light .btn-primary:hover { background: #222; box-shadow: 0 4px 16px rgba(0,0,0,0.20); }

.theme-light .pill { color: #333; background: rgba(0,0,0,0.04); border-color: #d0d0d0; }
.theme-light .pill__dot { background: #000; box-shadow: 0 0 8px rgba(0,0,0,0.4); }

.theme-light .grad-text {
  background: linear-gradient(135deg, #000000 0%, #444444 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-light .status-bar { background: rgba(0,0,0,0.03); border-color: #d0d0d0; }
.theme-light .status-divider { background: #d0d0d0; }
.theme-light .status-label { color: #777; }
.theme-light .status-text { color: #222; }
.theme-light .status-dot { background: #cccccc; }
.theme-light .status-dot[data-state="ok"]    { background: #000; box-shadow: 0 0 6px rgba(0,0,0,0.4); }
.theme-light .status-dot[data-state="warn"]  { background: #888; }
.theme-light .status-dot[data-state="err"]   { background: #ccc; }

.theme-light .section-kicker { color: #888; }
.theme-light .section-sub { color: #777; }
.theme-light .hero-prompt { color: #666; }

/* DeepSeek AI 助手 FAQ 块(ChatGPT 风格:长条输入 + 圆形 ↑ + 快捷 pill) */
.deepseek-faq {
  margin-top: 1.4rem;
  width: 100%;
  max-width: 1086px;  /* 输入框缩窄 100px (1186→1086) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.deepseek-faq__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line2);
  border-radius: 28px;
  padding: 0.55rem 0.55rem 0.55rem 1.1rem;
  transition: border-color 0.18s, background 0.18s;
}
.deepseek-faq__input-wrap:focus-within {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
}
.deepseek-faq__textarea {
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f0f0f0;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  min-height: 24px;
  max-height: 160px;
  padding: 0.25rem 0;
}
.deepseek-faq__textarea::placeholder { color: #7a7a7a; }
.deepseek-faq__ask {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; color: #000; border: 0;
  border-radius: 50%; cursor: pointer;
  transition: background 0.18s, transform 0.18s, opacity 0.18s;
}
.deepseek-faq__ask:hover { background: #e5e5e5; transform: translateY(-1px); }
.deepseek-faq__ask:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.deepseek-faq__ask.is-busy { animation: dsk-pulse 1.4s ease-in-out infinite; }
.deepseek-faq__ask svg { width: 18px; height: 18px; }
@keyframes dsk-pulse {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1.0; }
}

.deepseek-faq__suggestions {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
}
.deepseek-faq__suggestion {
  background: transparent;
  border: 1px solid var(--line2);
  color: #cfcfcf;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.deepseek-faq__suggestion:hover { background: rgba(255,255,255,0.06); border-color: #fff; color: #fff; }

.deepseek-faq__answer {
  width: 100%;
  max-width: 1086px;  /* 跟 .deepseek-faq max-width 1086px 一致, 聊天回答框跟输入框同宽 */
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line2);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  max-height: 360px;
  overflow-y: auto;
  text-align: left;
}
.deepseek-faq__answer-text {
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #ececec;
  word-break: break-word;
}

.theme-light .deepseek-faq__input-wrap { background: #f4f4f4; border-color: #d0d0d0; }
.theme-light .deepseek-faq__input-wrap:focus-within { background: #fff; border-color: #000; }
.theme-light .deepseek-faq__textarea { color: #111; }
.theme-light .deepseek-faq__textarea::placeholder { color: #888; }
.theme-light .deepseek-faq__ask { background: #000; color: #fff; }
.theme-light .deepseek-faq__ask:hover { background: #222; }
.theme-light .deepseek-faq__suggestion { color: #1a1a1a; border-color: #d0d0d0; }  /* 文字改深色 #555→#1a1a1a, 线框 #d0d0d0 保持不变 */
.theme-light .deepseek-faq__suggestion:hover { color: #000; border-color: #d0d0d0; background: #fafafa; }  /* hover 时线框保持 #d0d0d0 不变, 背景变浅灰 #fafafa 提示 hover */
/* 视觉展示 tab 标题 hover 时字体颜色 #ff6b19 (active/非 active 状态都生效) */
.visual-tab:hover { color: #ff6b19 !important; }
.theme-light .deepseek-faq__answer { background: #fafafa; border-color: #d0d0d0; }
.theme-light .deepseek-faq__answer-text { color: #222; }

.theme-light .cap-card {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.005));
  border-color: #d0d0d0;
}
.theme-light .cap-card:hover { border-color: #888; background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01)); }
.theme-light .cap-card::before { background: radial-gradient(circle at 50% 0%, rgba(0,0,0,0.08), transparent 60%); opacity: 0.4; }
.theme-light .cap-card__icon { background: rgba(0,0,0,0.05); color: #000; border-color: #d0d0d0; }
.theme-light .cap-card__no { color: #aaa; }
.theme-light .cap-card__title { color: #000; }
.theme-light .cap-card__desc { color: #666; }
.theme-light .cap-card__list li { background: rgba(0,0,0,0.04); color: #555; border-color: #d0d0d0; }

.theme-light .pipe-step { background: rgba(0,0,0,0.02); border-color: #d0d0d0; }
.theme-light .pipe-step--hi { background: rgba(0,0,0,0.05); border-color: #888; }
.theme-light .pipe-step--ok { background: rgba(0,0,0,0.08); border-color: #000; }
.theme-light .pipe-step__num { background: rgba(0,0,0,0.08); color: #000; }
.theme-light .pipe-step__title { color: #000; }
.theme-light .pipe-step__hint  { color: #888; }
.theme-light .pipe-arrow { color: #aaa; }

.theme-light .flow-diagram { background: rgba(0,0,0,0.02); border-color: #d0d0d0; }

.theme-light .scene-card {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.005));
  border-color: #d0d0d0;
}
.theme-light .scene-card:hover { border-color: #888; }
.theme-light .scene-card::after { color: #aaa; }
.theme-light .scene-card:hover::after { color: #000; }
.theme-light .scene-card__no { color: #aaa; }
.theme-light .scene-card__title { color: #000; }
.theme-light .scene-card__desc  { color: #888; }

.theme-light .cta-block {
  background:
    radial-gradient(circle at 0% 0%, rgba(0,0,0,0.05), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,0.03), transparent 50%),
    rgba(0,0,0,0.02);
  border-color: #d0d0d0;
}
.theme-light .cta-block__title { color: #000; }
.theme-light .cta-block__sub   { color: #666; }

.theme-light .svc-card { background: rgba(0,0,0,0.02); border-color: #d0d0d0; }
.theme-light .svc-card:hover { border-color: #888; }
.theme-light .svc-card__name { color: #000; }
.theme-light .svc-card__url  { color: #888; }
.theme-light .svc-card__meta { color: #aaa; }

.theme-light .api-card { background: rgba(0,0,0,0.02); border-color: #d0d0d0; }
.theme-light .api-card:hover { border-color: #888; }
.theme-light .api-card__name { color: #000; }
.theme-light .api-card__desc { color: #888; }
.theme-light .api-card__status-text { color: #222; }
.theme-light .api-card__label { color: #555; }
.theme-light .api-card__hint  { color: #aaa; }
.theme-light .api-card__input {
  background: #ffffff;
  color: #000;
  border-color: #d0d0d0;
}
.theme-light .api-card__input:focus { border-color: #000; background: #fff; }
.theme-light .api-card__input::placeholder { color: #aaa; }

.theme-light .pay-card { background: rgba(0,0,0,0.02); border-color: #d0d0d0; }
.theme-light .pay-card:hover { background: rgba(0,0,0,0.05); border-color: #888; }
.theme-light .pay-card__title { color: #000; }
.theme-light .pay-card__sub { color: #888; }

.theme-light .settings-menu { border-left-color: #d0d0d0; }
.theme-light .settings-menu__item a { color: #888; }
.theme-light .settings-menu__item a:hover { color: #000; }
.theme-light .settings-menu__item--active a { color: #000; border-left-color: #000; }
@media (max-width: 768px) {
  .theme-light .settings-menu { border-bottom-color: #d0d0d0; }
  .theme-light .settings-menu__item--active a { border-bottom-color: #000; }
}

/* Tab pane(API 配置 / H3 支付 切换显示)*/
.tab-pane[hidden] { display: none; }
.tab-pane--active { display: block; }

.theme-light .toast { background: rgba(255,255,255,0.96); color: #000; border-color: #d0d0d0; }
.theme-light .toast--ok { border-color: #000; }

/* ============================================================
   ID 生成 — 列表行
   ============================================================ */
.id-row {
  display: grid;
  /* 6 列:ID号 / 复制图标 / 拥有人 / 备注输入框 / 时间 / 删除 */
  grid-template-columns: auto auto auto 1fr auto 32px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--line);
}
.id-row--compact {
  grid-template-columns: auto auto auto 1fr auto 32px;
  padding: 0.4rem 0.4rem;
  font-size: 0.85rem;
}
.id-row:last-child { border-bottom: 0; }
.id-row__id {
  font-family: "SF Mono", monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  padding-right: 0.4rem;   /* ID 号和复制图标之间多留点间距 */
}
/* 复制 ID 按钮(ID 号右边的小图标) */
.id-row__copy {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line2, rgba(148,163,184,0.25));
  border-radius: 6px;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.id-row__copy:hover {
  color: #3b82f6;
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}
.id-row__copy--ok {
  color: #16a34a !important;
  border-color: #16a34a !important;
  background: rgba(34, 197, 94, 0.08) !important;
}
/* 复制按钮旁的即时提示气泡(点击后立即浮现,2s 后自动消失) */
.copy-tip {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: #16a34a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none;
}
.copy-tip--show {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.copy-tip::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #16a34a;
}
.id-row__copy svg { width: 14px; height: 14px; }
/* 拥有人名字(只读显示,在复制图标和备注输入框之间) */
.id-row__owner {
  font-size: 0.85rem;
  color: var(--fg, #e2e8f0);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 0.5rem;
  min-width: 4rem;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-light .id-row__owner { color: #0f172a; }
.id-row__field input,
.id-row__field select {
  width: 100%;
  padding: 0.4rem 0.6rem; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line2);
  color: #fff; font-size: 0.85rem;
  transition: border-color 0.15s;
}
.id-row__field input:focus,
.id-row__field select:focus {
  outline: none; border-color: var(--line3);
  background: rgba(255,255,255,0.06);
}
.id-row__attr {
  display: flex; gap: 0.4rem;
}
.id-row__attr select { flex: 1; }
.id-row__attr select:nth-child(2) { flex: 1.2; }
.id-row__del {
  background: transparent; border: 1px solid var(--line2);
  color: #888; width: 32px; height: 32px;
  border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.id-row__del:hover { color: #ff8585; border-color: #ff8585; background: rgba(255,80,80,0.06); }
.id-row__del svg { width: 14px; height: 14px; }
.id-row__del:disabled { opacity: 0.35; cursor: not-allowed; }
.id-row__del:disabled:hover { color: #888; border-color: var(--line2); background: transparent; }

/* 属性徽标(在 ID 列表 / 预设列表里展示 type) */
.preset-badge {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line2);
  color: #ddd;
}
.preset-badge--personal {
  background: rgba(255,255,255,0.10);
  border-color: #fff; color: #fff;
}
.preset-badge--department {
  background: rgba(255,255,255,0.04);
  border-color: var(--line2); color: #aaa;
}
.preset-badge--company {
  background: rgba(255,255,255,0.08);
  border-color: #fff; color: #fff;
  letter-spacing: 0.04em;
}
.theme-light .preset-badge { background: #f4f4f4; border-color: #d0d0d0; color: #333; }
.theme-light .preset-badge--personal { background: #000; border-color: #000; color: #fff; }
.theme-light .preset-badge--department { background: #f4f4f4; border-color: #d0d0d0; color: #333; }
.theme-light .preset-badge--company { background: #000; border-color: #000; color: #fff; }

/* 属性预设两级分组 */
.preset-group {
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.preset-group:last-child { margin-bottom: 0; }
.preset-group__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.1rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line2);
}
.preset-group__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.preset-group__hint {
  font-size: 0.74rem;
  color: #888;
}
.preset-group__body { padding: 0.4rem 0.6rem; }
.preset-group__empty {
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
  color: #888;
  font-style: italic;
  line-height: 1.5;
}

/* 二级部门名条目 */
.dept-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.dept-row:hover { background: rgba(255,255,255,0.04); border-color: var(--line2); }
.dept-row__name { flex: 1; font-size: 0.88rem; color: #ddd; transition: color 0.12s; }
.dept-row__name:hover { color: #b58cff; }
.dept-row__count {
  font-size: 0.7rem; color: #888;
  font-family: "SF Mono", monospace;
}
.dept-row__del {
  background: transparent; border: 1px solid var(--line2);
  color: #888; width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.dept-row__del:hover { color: #ff8585; border-color: #ff8585; }
.dept-row__del svg { width: 12px; height: 12px; }

/* 轻量级 section 标题(不是卡片,只是分隔 + 标题 + 计数) */
.preset-section-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.2rem 0.6rem;
  margin-top: 0.4rem;
}
.preset-section-header__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.preset-section-header__hint {
  font-size: 0.74rem;
  color: #888;
  font-family: "SF Mono", monospace;
}
.theme-light .preset-section-header__title { color: #000; }
.theme-light .preset-section-header__hint { color: #666; }

/* 一级(部门大类)条目 */
.category-row {
  margin-bottom: 0.5rem;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}
.category-row:last-child { margin-bottom: 0; }
.category-row__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--line2);
}
.category-row__name { flex: 1; font-size: 0.9rem; font-weight: 600; color: #fff; }
.category-row__count {
  font-size: 0.7rem; color: #aaa;
  font-family: "SF Mono", monospace;
}
.category-row__add {
  background: transparent; border: 1px solid var(--line2);
  color: #ccc; padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
  border-radius: 6px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.category-row__add:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.06); }
.category-row__del {
  background: transparent; border: 1px solid var(--line2);
  color: #888; width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.category-row__del:hover { color: #ff8585; border-color: #ff8585; }
.category-row__del svg { width: 12px; height: 12px; }
.category-row__body { padding: 0.35rem 0.55rem; }
.category-row__empty {
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem; color: #888;
  font-style: italic;
}
.theme-light .category-row { background: #fafafa; border-color: #d0d0d0; }
.theme-light .category-row__head { background: #f4f4f4; border-bottom-color: #d0d0d0; }
.theme-light .category-row__name { color: #000; }
.theme-light .category-row__add { border-color: #d0d0d0; color: #555; }
.theme-light .category-row__add:hover { color: #000; border-color: #000; }
.theme-light .category-row__del { border-color: #d0d0d0; }
.theme-light .category-row__del:hover { color: #d00; border-color: #d00; }
.theme-light .category-row__empty { color: #888; }

/* 公司行(3 级树最外层) */
.company-row {
  margin-bottom: 0.6rem;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  overflow: hidden;
}
.company-row:last-child { margin-bottom: 0; }
.company-row__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid var(--line2);
}
.company-row__name { flex: 1; font-size: 0.95rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; transition: color 0.12s; }
.company-row__name:hover { color: #b58cff; }
.company-row__count {
  font-size: 0.72rem; color: #bbb;
  font-family: "SF Mono", monospace;
}
.company-row__add {
  background: transparent; border: 1px solid var(--line2);
  color: #ddd; padding: 0.28rem 0.6rem;
  font-size: 0.74rem;
  border-radius: 6px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.company-row__add:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }
.company-row__del {
  background: transparent; border: 1px solid var(--line2);
  color: #888; width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.company-row__del:hover { color: #ff8585; border-color: #ff8585; }
.company-row__del svg { width: 12px; height: 12px; }
.company-row__body { padding: 0.4rem 0.55rem; }
.company-row__empty {
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem; color: #888;
  font-style: italic;
}

/* 部门大类 box(二级) */
.cat-box {
  margin-bottom: 0.4rem;
  border: 1px solid var(--line2);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  overflow: hidden;
}
.cat-box:last-child { margin-bottom: 0; }
.cat-box__head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line2);
}
.cat-box__name { flex: 1; font-size: 0.85rem; font-weight: 500; color: #eee; transition: color 0.12s; }
.cat-box__name:hover { color: #b58cff; }
.cat-box__count {
  font-size: 0.7rem; color: #aaa;
  font-family: "SF Mono", monospace;
}
.cat-box__add {
  background: transparent; border: 1px solid var(--line2);
  color: #ccc; padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 5px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cat-box__add:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }
.cat-box__del {
  background: transparent; border: 1px solid var(--line2);
  color: #888; width: 24px; height: 24px;
  border-radius: 5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.cat-box__del:hover { color: #ff8585; border-color: #ff8585; }
.cat-box__del svg { width: 11px; height: 11px; }
.cat-box__body { padding: 0.3rem 0.5rem; }
.cat-box__empty {
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem; color: #888;
  font-style: italic;
}

.theme-light .company-row { background: #fafafa; border-color: #d0d0d0; }
.theme-light .company-row__head { background: #f4f4f4; border-bottom-color: #d0d0d0; }
.theme-light .company-row__name { color: #000; }
.theme-light .company-row__add { border-color: #d0d0d0; color: #555; }
.theme-light .company-row__add:hover { color: #000; border-color: #000; }
.theme-light .company-row__del { border-color: #d0d0d0; }
.theme-light .company-row__del:hover { color: #d00; border-color: #d00; }
.theme-light .company-row__empty { color: #888; }
.theme-light .cat-box { background: #f8f8f8; border-color: #e0e0e0; }
.theme-light .cat-box__head { background: #f0f0f0; border-bottom-color: #e0e0e0; }
.theme-light .cat-box__name { color: #000; }
.theme-light .cat-box__add { border-color: #d0d0d0; color: #555; }
.theme-light .cat-box__add:hover { color: #000; border-color: #000; }
.theme-light .cat-box__del { border-color: #d0d0d0; }
.theme-light .cat-box__del:hover { color: #d00; border-color: #d00; }
.theme-light .cat-box__empty { color: #888; }

.theme-light .preset-group { background: #fafafa; border-color: #d0d0d0; }
.theme-light .preset-group__head { background: #f4f4f4; border-bottom-color: #d0d0d0; }
.theme-light .preset-group__title { color: #000; }
.theme-light .dept-row__name { color: #333; }
.theme-light .preset-group__empty { color: #666; }
.theme-light .dept-row:hover { background: #fff; border-color: #888; }
.theme-light .dept-row__del { border-color: #d0d0d0; }
.theme-light .dept-row__del:hover { color: #d00; border-color: #d00; }

/* ID 分组(按部门) */
.id-group {
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.id-group:last-child { margin-bottom: 0; }
.id-group__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--line2);
}
.id-group__title { font-size: 0.9rem; font-weight: 600; color: #fff; }
.id-group__count {
  font-size: 0.72rem; color: #aaa;
  font-family: "SF Mono", monospace;
}
.id-group__empty {
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem; color: #777;
  font-style: italic;
}
.id-group--uncategorized .id-group__head { background: rgba(255,80,80,0.06); }
.id-group--uncategorized .id-group__title { color: #ff8585; }

/* 折叠分组(默认折叠,点击 head 展开) */
.id-group--collapsible .id-group__head {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.id-group--collapsible .id-group__head:hover { background: rgba(255,255,255,0.07); }
.id-group--collapsible .id-group__body {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}
.id-group--collapsible.id-group--collapsed .id-group__body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.id-group__caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: #aaa;
  margin-left: auto;
  transition: transform 0.2s ease, color 0.2s;
  flex-shrink: 0;
}
.id-group__caret svg { width: 12px; height: 12px; }
.id-group--collapsible .id-group__head:hover .id-group__caret { color: #fff; }
.id-group--collapsible.id-group--collapsed .id-group__caret { transform: rotate(-90deg); }
.id-group--collapsible.id-group--collapsed .id-group__head { border-bottom: 0; }

.theme-light .id-group--collapsible .id-group__head:hover { background: #fff; }
.theme-light .id-group--collapsible .id-group__head:hover .id-group__caret { color: #000; }

.theme-light .id-group { background: #fafafa; border-color: #d0d0d0; }
.theme-light .id-group__head { background: #f4f4f4; border-bottom-color: #d0d0d0; }
.theme-light .id-group__title { color: #000; }
.theme-light .id-group__count { color: #666; }
.theme-light .id-group__empty { color: #888; }
.theme-light .id-group--uncategorized .id-group__head { background: #fff5f5; }
.theme-light .id-group--uncategorized .id-group__title { color: #d00; }

.theme-light .id-row { border-bottom-color: #e0e0e0; }
.theme-light .id-row__id { color: #000; }
.theme-light .id-row__field input,
.theme-light .id-row__field select { background: #fff; color: #000; border-color: #d0d0d0; }
.theme-light .id-row__field input:focus,
.theme-light .id-row__field select:focus { background: #fff; border-color: #000; }
.theme-light .id-row__del { border-color: #d0d0d0; color: #888; }
.theme-light .id-row__del:hover { color: #d00; border-color: #d00; background: rgba(255,0,0,0.04); }

@media (max-width: 768px) {
  .id-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ============================================================
   Form rows(模态内的多字段布局)
   ============================================================ */
.form-row { margin-top: 1rem; }
.form-row__label {
  display: block; font-size: 0.78rem; color: #999; margin-bottom: 0.4rem;
  font-weight: 500;
}
.form-row__value { color: #ffffff; font-size: 0.95rem; }
.form-row__value--id { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 0.12em; }
.theme-light .form-row__value { color: #0f172a; }
.form-row__hint { color: #6a6a6a; font-weight: 400; font-size: 0.72rem; }

.radio-group { display: flex; gap: 0.5rem; }
.radio-group--wrap { flex-wrap: wrap; }
.radio-group--wrap .radio-chip { flex: 0 0 auto; }
.radio-chip {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line2);
  color: #c4c4c4; font-size: 0.88rem;
  cursor: pointer; user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.radio-chip input { accent-color: #fff; }
.radio-chip:has(input:checked) {
  background: rgba(255,255,255,0.10);
  border-color: #fff; color: #fff;
}
.theme-light .radio-chip { background: rgba(0,0,0,0.03); border-color: #d0d0d0; color: #555; }
.theme-light .radio-chip:has(input:checked) { background: rgba(0,0,0,0.06); border-color: #000; color: #000; }

/* 主题切换按钮的图标:哪个主题下显示哪个 */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: inline-block; }
.theme-light .theme-toggle__sun  { display: inline-block; }
.theme-light .theme-toggle__moon { display: none; }

/* ============================================================
 * ID 申请(在 ID 验证模态的底部,3 个下拉级联 + 姓名)
 * ============================================================ */
.modal__divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.25rem 0 0.75rem;
  color: var(--muted, #94a3b8);
  font-size: 0.8rem;
}
.modal__divider span {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg, #e2e8f0);
  letter-spacing: 0.02em;
}
.theme-light .modal__divider span { color: #0f172a; }
.modal__divider::before, .modal__divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--line, rgba(148,163,184,0.25));
}
.apply-form {
  text-align: left;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding-bottom: 1.2rem;   /* 提交申请按钮下面留白(两行) */
}
.apply-form__row {
  display: flex; align-items: center; gap: 0.6rem;
}
.apply-form__label {
  flex-shrink: 0;
  font-size: 0.8rem; color: var(--muted, #94a3b8);
  text-align: left;
  /* label 文字左边 = modal box 左边 = "开始创作" 标题左边 */
}
.apply-form__select, .apply-form__input {
  flex: 1; min-width: 0;
  height: 34px; padding: 0 0.6rem;
  background: var(--input-bg, rgba(15,23,42,0.6));
  border: 1px solid var(--line, rgba(148,163,184,0.3));
  border-radius: 6px;
  color: var(--fg, #e2e8f0);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s;
}
/* select 自定义下拉箭头(向左一些,贴右 0.85rem 而非浏览器默认的最右 0) */
.apply-form__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM5NGEzYjgiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ii8+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 11px 11px;
}
.theme-light .apply-form__input {
  background: #ffffff;
  border-color: rgba(15,23,42,0.15);
  color: #0f172a;
}
/* theme-light 下 select 也要换箭头颜色 → 用更深的灰色 */
.theme-light .apply-form__select {
  background-color: #ffffff;
  border-color: rgba(15,23,42,0.15);
  color: #0f172a;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MjcyODAiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ii8+PC9zdmc+");
}
.apply-form__select:focus, .apply-form__input:focus {
  border-color: #3b82f6;
}
.apply-form__select:disabled, .apply-form__input:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.apply-form__error {
  color: #dc2626; font-size: 0.8rem;
  padding-left: 0;
  text-align: left;
}

/* 申请成功态 */
.apply-success {
  text-align: center;
  padding: 0.5rem 0 0.4rem;
}
.apply-success__icon {
  width: 56px; height: 56px;
  margin: 0 auto 0.8rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 197, 94, 0.12);
  border: 1.5px solid rgba(34, 197, 94, 0.4);
  border-radius: 50%;
  color: #16a34a;
}
.theme-light .apply-success__icon {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.apply-success__icon svg { width: 28px; height: 28px; }
.apply-success__title {
  font-size: 1.15rem; font-weight: 600;
  color: var(--fg, #e2e8f0);
  margin-bottom: 0.4rem;
}
.theme-light .apply-success__title { color: #0f172a; }
.apply-success__msg {
  font-size: 0.9rem;
  color: var(--muted, #94a3b8);
  line-height: 1.5;
}

/* ============================================================
 * ID 申请记录表格(settings.html "ID申请" tab)
 * ============================================================ */
.req-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line, rgba(148,163,184,0.2));
  border-radius: 8px;
}
.req-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.req-table th, .req-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--line, rgba(148,163,184,0.15));
  white-space: nowrap;
}
.req-table th {
  background: var(--th-bg, rgba(15,23,42,0.4));
  font-weight: 600;
  color: var(--muted, #94a3b8);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.theme-light .req-table th { background: rgba(15,23,42,0.05); }
.req-table tbody tr:last-child td { border-bottom: 0; }
.req-table tbody tr:hover { background: rgba(59,130,246,0.06); }
.req-table__op { text-align: right; }
.req-time { color: var(--muted, #94a3b8); font-variant-numeric: tabular-nums; }
.req-id {
  display: inline-block; margin-left: 0.4rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  letter-spacing: 0.05em;
}
.req-id--manual {
  margin-left: 0.3rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #6366f1;
  border-radius: 4px;
  letter-spacing: 0;
}
.theme-light .req-id--manual {
  background: #e0e7ff;
  border-color: #c7d2fe;
  color: #4338ca;
}
.chip {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.chip--ok    { background: rgba(34,197,94,0.15);  color: #16a34a; border: 1px solid rgba(34,197,94,0.3); }
.chip--warn  { background: rgba(234,179,8,0.15);  color: #b45309; border: 1px solid rgba(234,179,8,0.3); }
.theme-light .chip--ok   { background: #dcfce7; color: #166534; border-color: #86efac; }
.theme-light .chip--warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* Nanyan.html 三张图说明文字:黑主题白字,白主题黑字 */
.ny-caption { color: #ffffff; }
.theme-light .ny-caption { color: #0f172a; }

/* 小号按钮(settings 表格里用) */
.btn-ghost--sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}

/* ============================================================
 * 3 级身份: 角色徽章 + 下拉菜单
 * ============================================================ */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
}
.theme-light .role-badge { background: #f3f4f6; color: #1f2937; border-color: #d1d5db; }
.role-badge--dev    { background: rgba(99,102,241,0.18); color: #a5b4fc; border-color: rgba(99,102,241,0.4); }
.role-badge--mgr    { background: rgba(34,197,94,0.18);  color: #86efac; border-color: rgba(34,197,94,0.4); }
.role-badge--worker { background: rgba(234,179,8,0.18);  color: #fde68a; border-color: rgba(234,179,8,0.4); }
.theme-light .role-badge--dev    { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
.theme-light .role-badge--mgr    { background: #dcfce7; color: #166534; border-color: #86efac; }
.theme-light .role-badge--worker { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

.role-btn--active { color: #fbbf24; }
.theme-light .role-btn--active { color: #d97706; }

/* ============ 顶部 ID 按钮 (index.html) ============ */
/* 跟"下载桌面版"用同一种 .btn-ghost 样式, 这里只保留 ID 字符串的等宽字体, 不加特殊色 */
.id-status-btn--logged {
  font-family: "SF Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
}

.role-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 50;
}
.theme-light .role-menu { background: #ffffff; border-color: #d1d5db; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

.role-menu__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.role-menu__item:hover { background: rgba(255,255,255,0.06); }
.theme-light .role-menu__item:hover { background: #f3f4f6; }
.role-menu__item--danger { color: #f87171; }
.theme-light .role-menu__item--danger { color: #dc2626; }
.role-menu__divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0.3rem 0; }
.theme-light .role-menu__divider { background: #e5e7eb; }
.role-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.role-menu__icon--dev    { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.role-menu__icon--mgr    { background: rgba(34,197,94,0.18);  color: #86efac; }
.role-menu__icon--worker { background: rgba(234,179,8,0.18);  color: #fde68a; }
.role-menu__icon--logout { background: rgba(248,113,113,0.18); color: #fca5a5; }
.theme-light .role-menu__icon--dev    { background: #e0e7ff; color: #4338ca; }
.theme-light .role-menu__icon--mgr    { background: #dcfce7; color: #166534; }
.theme-light .role-menu__icon--worker { background: #fef3c7; color: #92400e; }
.theme-light .role-menu__icon--logout { background: #fee2e2; color: #dc2626; }
.role-menu__text { display: flex; flex-direction: column; line-height: 1.25; }
.role-menu__text small { font-size: 0.72rem; opacity: 0.7; margin-top: 0.1rem; }

/* ============================================================
 * 权限分配 / 字段定义: 行
 * ============================================================ */
.perm-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.theme-light .perm-row { border-bottom-color: #f3f4f6; }
.perm-row:last-child { border-bottom: 0; }
.perm-row__label code {
  font-family: var(--tn-mono, monospace);
  font-size: 0.8rem;
  background: rgba(99,102,241,0.12);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: #c4b5fd;
}
.theme-light .perm-row__label code { background: #e0e7ff; color: #4338ca; }
.perm-row__chk {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.perm-row__chk input { width: 16px; height: 16px; accent-color: #6366f1; }

.field-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
.theme-light .field-row { border-color: #e5e7eb; }
.field-row__main { flex: 1; min-width: 0; }
.field-row__del {
  align-self: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: #f87171;
}

/* ============ 管理设置 sub-tab 切换 (管理设置 / 权限分配) ============ */
.admin-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
}
.admin-subtab {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;  /* 盖住 .admin-subtabs 的下边框 */
}
.admin-subtab:hover { color: var(--neon1); }
.admin-subtab.active {
  color: #b36bff;
  border-bottom-color: #b36bff;
}
.admin-sub-pane[hidden] { display: none !important; }

/* white theme: admin-subtab 颜色 */
.theme-light .admin-subtab { color: #999; }
.theme-light .admin-subtab:hover { color: #000; }
.theme-light .admin-subtab.active { color: #b36bff; }

/* ============ 组织管理 树形结构 ============ */
.org-tree { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.25rem 0; }
.org-tree__empty { color: var(--muted); font-size: 0.85rem; padding: 0.5rem 0.25rem; }
.org-node { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; border-radius: 6px; transition: background 0.12s; }
.org-node:hover { background: rgba(179,107,255,0.06); }
.org-node--selected { background: rgba(179,107,255,0.15); }
.org-node__caret {
  display: inline-block;
  width: 14px; height: 14px;
  text-align: center; line-height: 14px;
  color: var(--muted); font-size: 0.7rem; cursor: pointer;
  user-select: none; flex-shrink: 0;
  transition: transform 0.15s;
}
.org-node__caret--expanded { transform: rotate(90deg); }
.org-node__caret--empty { visibility: hidden; }
.org-node__name { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--neon1); }
.org-node__name--editing { background: rgba(179,107,255,0.08); border: 1px solid #b36bff; border-radius: 4px; padding: 2px 6px; outline: none; color: var(--neon1); }
.org-node__level { font-size: 0.7rem; color: var(--muted); padding: 1px 6px; border: 1px solid var(--line2); border-radius: 4px; flex-shrink: 0; }
.org-node__actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.org-node__btn {
  background: transparent; border: 1px solid var(--line2); color: var(--neon2);
  padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; cursor: pointer; font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.org-node__btn:hover { color: var(--neon1); border-color: var(--line3); }
.org-node__btn--add { color: #16a34a; border-color: #16a34a; }
.org-node__btn--add:hover { background: rgba(22,163,74,0.1); }
.org-node__btn--del { color: #dc2626; border-color: #dc2626; }
.org-node__btn--del:hover { background: rgba(220,38,38,0.1); }
.org-children { padding-left: 1.4rem; border-left: 1px dashed var(--line2); margin-left: 0.6rem; }
.org-children[hidden] { display: none; }

/* ============ inline 输入行 (替代 window.prompt) ============ */
.org-input-row {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.5rem; margin-bottom: 0.5rem;
  background: rgba(179,107,255,0.06);
  border: 1px dashed #b36bff;
  border-radius: 6px;
}
.org-input-row__input {
  flex: 1; min-width: 0;
  background: var(--panel); border: 1px solid var(--line2);
  color: var(--neon1); font-size: 0.9rem; font-family: inherit;
  padding: 0.4rem 0.55rem; border-radius: 4px; outline: none;
}
.org-input-row__input:focus { border-color: #b36bff; }
.org-input-row__btn {
  background: transparent; border: 1px solid var(--line3); color: var(--neon2);
  padding: 0.3rem 0.7rem; border-radius: 4px;
  font-size: 0.78rem; cursor: pointer; font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.org-input-row__btn--ok { background: #b36bff; border-color: #b36bff; color: #fff; }
.org-input-row__btn--ok:hover { background: #9b5ce0; }
.org-input-row__btn--cancel:hover { color: var(--neon1); border-color: var(--line3); }

/* ============ inline 确认行 (替代 window.confirm) ============ */
.org-confirm-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.5rem; margin-bottom: 0.5rem;
  background: rgba(220,38,38,0.06);
  border: 1px dashed #dc2626;
  border-radius: 6px;
}
.org-confirm-row--full {
  width: 100%;
  margin-top: 0.5rem;
  box-sizing: border-box;
}
.org-confirm-row__msg { flex: 1; min-width: 0; font-size: 0.85rem; color: #b91c1c; }
.theme-light .org-confirm-row__msg { color: #991b1b; }
.org-confirm-row__btn {
  background: transparent; border: 1px solid var(--line3); color: var(--neon2);
  padding: 0.3rem 0.7rem; border-radius: 4px;
  font-size: 0.78rem; cursor: pointer; font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.org-confirm-row__btn--yes { background: #dc2626; border-color: #dc2626; color: #fff; }
.org-confirm-row__btn--yes:hover { background: #b91c1c; }
.org-confirm-row__btn--no:hover { color: var(--neon1); border-color: var(--line3); }

/* ============ white theme 覆盖 (管理设置/组织管理区) ============ */
.theme-light .org-input-row { background: rgba(179,107,255,0.04); }
.theme-light .org-input-row__input { background: #fff; border-color: #d0d0d0; color: #000; }
.theme-light .org-input-row__input:focus { border-color: #b36bff; background: #fff; }
.theme-light .org-input-row__btn { color: #555; }
.theme-light .org-input-row__btn--ok { color: #fff; }
.theme-light .org-input-row__btn--cancel:hover { color: #000; }
.theme-light .org-node:hover { background: rgba(179,107,255,0.06); }
.theme-light .org-node--selected { background: rgba(179,107,255,0.12); }
.theme-light .org-node__level { color: #555; border-color: #d0d0d0; }
.theme-light .org-confirm-row { background: rgba(220,38,38,0.05); }

/* ============ DI 管理表格 ============ */
.di-empty { color: var(--muted); font-size: 0.85rem; padding: 0.5rem 0.25rem; }
.di-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.di-table th, .di-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); }
.di-table th { color: var(--muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.di-table tbody tr:hover { background: rgba(179,107,255,0.04); }
.theme-light .di-table tbody tr:hover { background: rgba(179,107,255,0.06); }
.di-cell { color: var(--neon1); }
.di-cell--muted { color: var(--muted); }
.theme-light .di-cell--muted { color: #888; }

/* ============ ID 搜索栏 ============ */
.di-search-row { margin-bottom: 0.6rem; }
.di-search-input {
  width: 100%; max-width: 360px;
  background: var(--panel); border: 1px solid var(--line2);
  color: var(--neon1); font-size: 0.85rem; font-family: inherit;
  padding: 0.45rem 0.7rem; border-radius: 4px; outline: none;
}
.di-search-input:focus { border-color: #b36bff; }
.theme-light .di-search-input { background: #fff; border-color: #d0d0d0; color: #000; }

/* ============ ID 按公司分组 ============ */
.di-company { margin-bottom: 0.8rem; }
.di-company__head {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.5rem; border-radius: 4px; cursor: pointer;
  user-select: none;
}
.di-company__head:hover { background: rgba(179,107,255,0.04); }
.theme-light .di-company__head:hover { background: rgba(179,107,255,0.06); }
.di-company__caret {
  display: inline-block; width: 14px; height: 14px;
  text-align: center; line-height: 14px;
  color: var(--muted); font-size: 0.7rem;
  transition: transform 0.15s;
}
.di-company__caret--expanded { transform: rotate(90deg); }
.di-company__name { font-size: 0.95rem; font-weight: 600; color: var(--neon1); }
.di-company__count { font-size: 0.78rem; color: var(--muted); }

/* ============ DI 表单行 (添加 DI 的 inline 表单) ============ */
.di-form-row {
  margin: 0.4rem 0;
  padding: 0.7rem 0.8rem;
  background: rgba(179,107,255,0.05);
  border: 1px dashed #b36bff;
  border-radius: 6px;
}
.theme-light .di-form-row { background: rgba(179,107,255,0.04); }
.di-form-row__title { font-size: 0.85rem; color: var(--neon1); margin-bottom: 0.5rem; font-weight: 600; }
.di-form-row__grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem;
}
.di-form-row__field { display: flex; flex-direction: column; gap: 0.25rem; }
.di-form-row__field--full { grid-column: 1 / -1; }
.di-form-row__label { font-size: 0.72rem; color: var(--muted); }
.di-form-row__input {
  background: var(--panel); border: 1px solid var(--line2);
  color: var(--neon1); font-size: 0.85rem; font-family: inherit;
  padding: 0.4rem 0.55rem; border-radius: 4px; outline: none;
}
.di-form-row__input:focus { border-color: #b36bff; }
.theme-light .di-form-row__input { background: #fff; border-color: #d0d0d0; color: #000; }
.di-form-row__input--di { font-family: 'Menlo', 'Consolas', monospace; letter-spacing: 0.08em; font-weight: 600; }
.di-form-row__di-wrap { display: flex; gap: 0.3rem; }
.di-form-row__di-wrap .di-form-row__input { flex: 1; }
.di-form-row__btn-regen {
  background: transparent; border: 1px solid var(--line3); color: var(--neon2);
  padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.di-form-row__btn-regen:hover { color: var(--neon1); border-color: #b36bff; }
.di-form-row__actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

/* 改密码表单 (复用 di-form-row 视觉, 加专用 class 区分 — 9-11 南焱 加密码项) */
.di-pwd-row {
  margin: 0.4rem 0;
  padding: 0.7rem 0.8rem;
  background: rgba(179,107,255,0.05);
  border: 1px dashed #b36bff;
  border-radius: 6px;
}
.theme-light .di-pwd-row { background: rgba(179,107,255,0.04); }
.di-pwd-row__title { font-size: 0.85rem; color: var(--neon1); margin-bottom: 0.5rem; font-weight: 600; }
.di-pwd-row__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; }
.di-pwd-row__field { display: flex; flex-direction: column; gap: 0.25rem; }
.di-pwd-row__label { font-size: 0.72rem; color: var(--muted); }
.di-pwd-row__input {
  background: var(--panel); border: 1px solid var(--line2);
  color: var(--neon1); font-size: 0.85rem; font-family: inherit;
  padding: 0.4rem 0.55rem; border-radius: 4px; outline: none;
}
.di-pwd-row__input:focus { border-color: #b36bff; }
.theme-light .di-pwd-row__input { background: #fff; border-color: #d0d0d0; color: #000; }
.di-pwd-row__actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

/* ============ 数据库详细数据列表 ============ */
.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
.db-table th, .db-table td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--line, rgba(148,163,184,0.15));
  vertical-align: top;
}
.db-table th {
  font-weight: 500;
  color: var(--muted, #888);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.db-table tbody tr:hover { background: rgba(179,107,255,0.04); }
.theme-light .db-table tbody tr:hover { background: rgba(179,107,255,0.06); }
.db-table .db-key { font-family: "SF Mono", ui-monospace, monospace; font-size: 0.82rem; word-break: break-all; }
.db-table .db-val code { font-family: "SF Mono", ui-monospace, monospace; font-size: 0.8rem; color: var(--neon2, #ccc); word-break: break-all; }
.theme-light .db-table .db-val code { color: #333; }
.db-table .db-size { color: var(--muted, #888); font-size: 0.82rem; white-space: nowrap; }
.db-table .db-time { color: var(--muted, #888); font-size: 0.78rem; white-space: nowrap; }
.db-del-btn {
  background: transparent; border: 1px solid rgba(220,38,38,0.5);
  color: #b91c1c; padding: 0.18rem 0.55rem; border-radius: 4px;
  font-size: 0.78rem; cursor: pointer; font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.db-del-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.db-total-row { background: rgba(179,107,255,0.04); font-weight: 500; }
.theme-light .db-total-row { background: rgba(179,107,255,0.06); }
.db-empty { padding: 1.5rem 0; text-align: center; color: var(--muted, #888); font-size: 0.9rem; }

/* ============ 开始创作 / ID 申请 模态 ============ */
.id-start-modal__box,
.id-apply-modal__box {
  max-width: 440px;
  text-align: left;
  padding: 3rem 1.5rem 3rem;  /* 顶部加 1 行, 底部留 2 行 */
  position: relative;
}
.id-start-modal__title {
  text-align: left;
  margin-bottom: 0.6rem;
}
.id-start-modal__icon,
.id-apply-modal__icon {
  margin: 0 auto 0.8rem;
  background: rgba(179, 107, 255, 0.12);
  border-color: rgba(179, 107, 255, 0.4);
  color: #b36bff;
}
.id-start-modal__box .modal__sub,
.id-apply-modal__box .modal__sub {
  text-align: left;
  white-space: normal;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.id-start-modal__input {
  letter-spacing: 0.12em;
}
/* "没有 ID?" 分隔线: 线条对齐到表单 (内容区) 边线, 而不是 box 边线 */
.id-start-modal__divider {
  margin: 1.4rem 0 0;
  padding: 0;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--line, rgba(148, 163, 184, 0.15));
  height: 1px;
}
.id-start-modal__divider span {
  position: relative;
  top: -0.7em;
  background: var(--panel, #0a0a0a);
  padding: 0 0.8rem;
  color: var(--fg, #e2e8f0);
  font-size: 0.9rem;
  font-weight: 700;
}
.theme-light .id-start-modal__divider span { background: #f5f5f5; color: #0f172a; }
.id-start-modal__apply {
  margin-top: 0.8rem;
  color: var(--muted, #888);
  font-size: 0.85rem;
  line-height: 1.5;
}
.id-start-modal__apply-text {
  text-align: left;
}
.id-apply-modal__loading {
  color: var(--muted, #888);
  padding: 1.5rem 0;
  font-size: 0.9rem;
}
.id-apply-modal__form {
  text-align: left;
}
.id-apply-modal__form .modal__label {
  display: block;
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted, #888);
}
.id-apply-modal__form .modal__input {
  width: 100%;
  height: 36px;
  padding: 0 0.7rem;
  background: var(--input-bg, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--line, rgba(148, 163, 184, 0.3));
  border-radius: 6px;
  color: var(--fg, #e2e8f0);
  font-size: 0.9rem;
  outline: none;
  font-family: inherit;
  margin-bottom: 0.2rem;
}
.id-apply-modal__form .modal__input:focus {
  border-color: #b36bff;
}
.id-apply-modal__form .modal__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* light theme: 申请表单输入框白底 */
.theme-light .id-apply-modal__form .modal__input {
  background: #ffffff;
  color: #0f172a;
  border-color: #d0d0d0;
}
.theme-light .id-apply-modal__form .modal__input:focus {
  border-color: #b36bff;
}
/* 申请表单的"提交申请"按钮: 文字居中 */
#id-apply-submit {
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: 0.8rem;
}

/* ============ ID 退出按钮 (已登录时显示在 ID 按钮右边) ============ */
/* 跟"下载桌面版"用同一种 .btn-ghost 样式, 不加红色 */
.id-logout-btn {
  /* 跟 .btn-ghost 默认一致, 不覆盖 color/border-color */
}

/* 白色主题下, 退出按钮的文字/图标 强制白色 (盖在深色图片背景上) */
.theme-light .id-logout-btn,
.theme-light .id-logout-btn:hover {
  color: #fff;
}
.theme-light .id-logout-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ============ 已登录 ID 信息模态 ============ */
.id-info-modal__box {
  max-width: 420px;
  text-align: left;
  padding: 2rem 1.5rem 1.4rem;
}
.id-info-modal__title {
  text-align: left;
  margin-bottom: 1.2rem;
}
.id-info-modal__id-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line, rgba(148, 163, 184, 0.18));
}
.id-info-modal__id-row:last-of-type {
  border-bottom: 0;
}
.id-info-modal__id-label {
  font-size: 0.82rem;
  color: var(--muted, #888);
}
.id-info-modal__id-value {
  font-size: 0.95rem;
  color: var(--fg, #e2e8f0);
  font-family: "SF Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
}
.theme-light .id-info-modal__id-value { color: #0f172a; }
.theme-light .id-info-modal__id-row { border-bottom-color: #e5e5e5; }

/* 部门三行显示 (公司/一级部门/二级部门) — 整列占满 row 容器, kicker 左对齐 "姓名" 左边, val 右对齐 "ID号" val 右边 */
.id-info-modal__id-row--dept { display: flex; flex-direction: column; align-items: stretch; padding: 0.55rem 0; }
.id-info-modal__org { display: block; width: 100%; }
.id-info-modal__org-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0.02em; padding: 1px 0; }
.id-info-modal__org-kicker { font-size: 0.7rem; color: var(--muted, #888); flex-shrink: 0; text-align: left; }
.id-info-modal__org-val { font-size: 0.95rem; color: var(--fg, #e2e8f0); font-weight: 500; text-align: right; }
.theme-light .id-info-modal__org-val { color: #0f172a; }

/* ============ 申请成功提示框 ============ */
.id-apply-success__box {
  max-width: 380px;
  text-align: center;
  padding: 1.8rem 1.5rem 1.4rem;
}
.id-apply-success__icon {
  width: 48px; height: 48px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.id-apply-success__icon svg { width: 26px; height: 26px; }
.id-apply-success__title {
  text-align: center;
  margin-bottom: 0.5rem;
}
.id-apply-success__msg {
  color: var(--muted, #666);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
  padding: 0 0.3rem;
}
.theme-light .id-apply-success__icon { background: rgba(34, 197, 94, 0.1); border-color: #86efac; color: #16a34a; }

/* ============================================================
   首页 3 张数据看板 (简洁线框 + 色块 + 文字, 无特效)
   - 卡片外: 1.5px 灰边, 透明底
   - 内部: 纯文字 + 浅灰底色块, 不发光/不渐变/不动画
   - ⚠ 警告条保留红字红边 (下方另写)
   ============================================================ */
.dash {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 1.5rem 1.25rem 1.25rem;
  background: transparent;
  border: 1.5px solid #ccc;
  color: #d4d4d4;
  overflow: hidden;
  min-height: 360px;
}
.theme-light .dash {
  border-color: #ccc;
  color: #1a1a1a;
}

/* 卡片头部: 数字badge + 标题 (第一行), 综合评分 (第二行) */
.dash__head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.theme-light .dash__head { border-bottom-color: rgba(0,0,0,0.15); }
.dash__head-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dash__badge {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  background: transparent;
  border: 1px solid #888;
  color: #aaa;
}
.theme-light .dash__badge { border-color: #555; color: #555; }
.dash__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: inherit;
}
.dash__score {
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
  opacity: 0.75;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.dash__score span {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 1;
  color: inherit;
  margin: 0 2px;
}

/* === 成效提升: 正值默认色, 负值红字 === */
.dash__boost {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.7;
  margin-left: 0.5rem;
  color: inherit;
}
.dash__boost.pos { opacity: 0.85; }
.dash__boost.neg {
  color: #ff3b3b;
  opacity: 1;
  font-weight: 700;
}
.dash__boost.zero { opacity: 0.5; }

/* === Card 1: 6 根柱子 柱状图 === */
.dash__bars-chart {
  display: flex;
  gap: 0.4rem;
  flex: 1;
  align-items: stretch;
  min-height: 160px;
  padding: 0.3rem 0.2rem 0.2rem;
}
.dash__bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.dash__bar-col-num {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: inherit;
  line-height: 1.1;
  margin-bottom: 0.4rem;
  text-align: center;
}
.dash__bar-col-unit {
  font-size: 0.62rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.55;
  margin-left: 2px;
}
.dash__bar-col-track {
  width: 100%;
  max-width: 28px;
  flex: 1;
  background: rgba(255,255,255,0.08);
  border-radius: 3px 3px 0 0;
  position: relative;
  overflow: hidden;
}
.theme-light .dash__bar-col-track { background: rgba(0,0,0,0.08); }
.dash__bar-col-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: #aaa;
  border-radius: 2px 2px 0 0;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-light .dash__bar-col-fill { background: #555; }
.dash__bar-col-cap {
  font-size: 0.7rem;
  color: inherit;
  opacity: 0.65;
  text-align: center;
  margin-top: 0.4rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  padding: 0 0.1rem;
}

/* === Card 3 底部统计 === */
.dash__foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 1rem;
  padding: 0.85rem 0.3rem 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.theme-light .dash__foot { border-top-color: rgba(0,0,0,0.15); }
.dash__foot-cell {
  text-align: center;
  border-right: 1px dashed rgba(255,255,255,0.15);
  padding: 0 0.4rem;
}
.dash__foot-cell:last-child { border-right: none; }
.theme-light .dash__foot-cell { border-right-color: rgba(0,0,0,0.15); }
.dash__foot-cap {
  font-size: 0.7rem;
  color: inherit;
  opacity: 0.6;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.dash__foot-num {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  color: inherit;
  line-height: 1.1;
}

/* === 卡片底部警告 (评分 < 60 触发) === */
.dash__warn {
  margin-top: auto;
  padding: 0.45rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ff3b3b;
  background: transparent;
  border: 1px solid rgba(255, 59, 59, 0.35);
  border-radius: 4px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.dash__warn-icon { font-size: 1rem; line-height: 1; }
.dash__warn-text { letter-spacing: 0.04em; }

/* ⚠ 警告保持原样 (用户说不改) - 不写 !important 覆盖, 让原 #ff3b3b 红生效 */
@keyframes dash-warn-pulse {
  0%, 100% {
    box-shadow:
      0 0 calc(8px * var(--warn-intensity, 0)) rgba(255, 59, 59, calc(0.3 * var(--warn-intensity, 0))),
      inset 0 0 calc(12px * var(--warn-intensity, 0)) rgba(255, 59, 59, calc(0.15 * var(--warn-intensity, 0)));
  }
  50% {
    box-shadow:
      0 0 calc(18px * var(--warn-intensity, 0)) rgba(255, 59, 59, calc(0.6 * var(--warn-intensity, 0))),
      inset 0 0 calc(20px * var(--warn-intensity, 0)) rgba(255, 59, 59, calc(0.3 * var(--warn-intensity, 0)));
  }
}
@keyframes dash-warn-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* === 导航胶囊按钮: 移动端 / 登陆ID - 白字 + 透明底 + 灰色边框 (顶图上无底色, 只剩线框) === */
.nav-pill {
  color: #fff !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
.nav-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  color: #fff !important;
}

/* === 顶部黑色延展块 (跟在 hero 后面, 高度 554px 跟 tt.jpg 一样, 跟着 scroll 一起往上滑) === */
.topbar-banner {
  width: 100%;
  max-width: 1222px;
  margin: 0 auto;
  background: #000;
  height: 554px;             /* 跟 .topbar-hero 一样高 */
}

/* === tt.jpg 炫酷特效 V2 (cyberpunk holographic) === */
.topbar-hero {
  overflow: hidden;                 /* 防止 ken-burns 缩放溢出 hero 容器 */
  isolation: isolate;               /* 新建 stacking context, 内部 z-index 不会逃出 */
}
.topbar-hero__img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  visibility: visible;
  animation: hero-kenburns 24s ease-in-out infinite alternate;  /* 慢速微缩放 + 微平移 */
  will-change: transform;
  filter: contrast(1.08) saturate(1.18) brightness(1.03);  /* 提亮 + 增饱和, 让特效更鲜 */
}
@keyframes hero-kenburns {
  0%   { transform: scale(1.05) translateX(0) translateY(0); }
  100% { transform: scale(1.12) translateX(-1.5%) translateY(-1%); }
}

/* 1. 全息边角光晕: 4 角彩色 radial-gradient 呼吸 (青/紫/橙/蓝) */
.topbar-hero__holo {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 38% 30% at 0% 0%,   rgba(0, 255, 209, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 38% 30% at 100% 0%, rgba(179, 107, 255, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 38% 30% at 100% 100%, rgba(255, 107, 26, 0.50) 0%, transparent 60%),
    radial-gradient(ellipse 38% 30% at 0% 100%, rgba(0, 200, 255, 0.50) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: holo-breathe 6s ease-in-out infinite alternate;
}
@keyframes holo-breathe {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

/* 2. 赛博朋克网格: 青+紫 60px grid 脉冲 */
.topbar-hero__grid {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(0, 255, 209, 0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179, 107, 255, 0.16) 1px, transparent 1px);
  background-size: 60px 60px;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: grid-pulse 5s ease-in-out infinite;
}
@keyframes grid-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

/* 3. 多彩扫光: 青→紫→橙 斜向光带 5s 扫过, blur 模糊加亮 */
.topbar-hero__sweep {
  position: absolute;
  top: 0;
  left: -80%;
  width: 35%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(0, 255, 209, 0.30) 25%,
    rgba(179, 107, 255, 0.55) 50%,
    rgba(255, 170, 59, 0.40) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
  animation: hero-sweep 5s ease-in-out infinite;
  mix-blend-mode: screen;
  filter: blur(16px);
}
@keyframes hero-sweep {
  0%   { left: -80%; }
  100% { left: 130%; }
}

/* 4. 彩色粒子: JS 注入 30+ 小光点, 漂升 */
.topbar-hero__particles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.topbar-hero__particle {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  animation: particle-rise 10s linear infinite;
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes particle-rise {
  0%   { transform: translateY(0)    translateX(0);  opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-620px) translateX(40px); opacity: 0; }
}

/* 5. 顶/底暗角: 顶部护菜单可读, 底部护标题可读 */
.topbar-hero__vignette {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.12) 18%,
      transparent 38%,
      transparent 55%,
      rgba(0, 0, 0, 0.60) 100%);
  pointer-events: none;
  z-index: 1;
}

/* === dd01 卡片 (2 排 × 4 张, 底色 dd01.jpg, 卡片之间无间隙无间距, 单张尺寸比 10:8) === */
.dd-card {
  background-image: url('/IMG/dd01.jpg');    /* 底色用 dd01.jpg */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 10 / 8;                     /* 宽:高 = 10:8 = 5:4 (横略宽) */
  border: 0;                                /* 无边框 */
  border-radius: 0;                          /* 无圆角, 让卡片贴紧 */
  background-color: transparent;
  margin: 0; padding: 0;                     /* 无外边距内边距, 让卡片完全贴紧 */
  cursor: pointer;
  transition: opacity 0.2s;
}
.dd-card:hover { opacity: 0.85; }
/* 卡片 2 用 dd02.jpg 底图, 卡片 3 用 dd03.jpg 底图 */
.dd-card--2 { background-image: url('/IMG/dd02.jpg') !important; }
.dd-card--3 { background-image: url('/IMG/dd03.jpg') !important; }
.dd-card--4 { background-image: url('/IMG/dd04.jpg') !important; }
.dd-card--5 { background-image: url('/IMG/dd05.jpg') !important; }
.dd-card--6 { background-image: url('/IMG/dd06.jpg') !important; }
.dd-card--7 { background-image: url('/IMG/dd07.jpg') !important; }
.dd-card--8 { background-image: url('/IMG/dd08.jpg') !important; }
/* 卡片上的文字 (覆盖在底图上, 2 行自然堆叠居中) */
.dd-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dd-card__txt {
  color: #303030;                            /* 文字颜色: 深灰 */
  font-size: 1rem;                           /* 主标题 */
  font-weight: 800;                          /* 主标题粗体 */
  line-height: 1.3;
  margin-top: 3.3rem;                        /* 主标题上方 2 行空行距离 (4.6 - 1 行 = 3.3) */
}
/* 副标题: 比主标题小 2 号 (主 1rem, 副 0.75rem), 不粗体, 行距缩小 1/4 (2px → 1.5px) */
.dd-card__sub { font-size: 0.75rem; font-weight: 400 !important; margin-top: 1.5px; }

/* 卡片内的 "我要下单" 按钮: 文字 + 线框 #ff6b19, 无底色, 居中 */
.dd-card__btn {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 9px;                          /* 高度减 2px (3→2 上下一共 -2px) */
  font-size: 0.75rem; font-weight: 600;        /* 文字小 1 号 (0.85→0.75) */
  color: #ff6b19;                            /* 按钮文字颜色: 橙 */
  background: transparent;                    /* 按钮无底色 */
  border: 1px solid #ff6b19;                 /* 按钮线框颜色: 橙 */
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.05em;
  align-self: center;                         /* flex column 容器内水平居中 */
  transition: background 0.2s, color 0.2s;
  pointer-events: auto;
  cursor: pointer;
}
.dd-card__btn:hover {
  background: #ff6b19;                        /* hover 实色橙底 */
  color: #fff;                                /* hover 白字 */
}

/* 卡片 6 专属: 文字 + 按钮 + 边框全白 */
.dd-card--6 .dd-card__txt { color: #fff; }
.dd-card--6 .dd-card__sub { color: #fff; }
.dd-card--6 .dd-card__btn {
  color: #fff;
  border-color: #fff;
}
.dd-card--6 .dd-card__btn:hover {
  background: #fff;                            /* hover 白底 */
  color: #333;                                /* hover 深字 */
}
  letter-spacing: 0.05em;
  text-align: center;                        /* 文字左右居中 */
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* 卡片 1 / 4 纯链接 (去所有视觉样式, 仅保留可点击 + 文字) */
.dd-card--naked {
  background: transparent !important;       /* 去背景图 */
  aspect-ratio: 10 / 8;                     /* 保持 5:4 比例 (跟其他卡片一致) */
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: #fff;                              /* 文字白色 */
  font-size: 1rem; font-weight: 600;
  border: 0; border-radius: 0;
}
.dd-card--naked:hover { background: rgba(0,0,0,0.15) !important; opacity: 1; }

/* === 标题区: 浮在 tt.jpg 上, 容器右边对齐 登陆ID 按钮右边, 副标题左对齐到标题左侧 === */
.topbar-bottom {
  position: absolute;
  bottom: 190px;         /* 距 hero 底 190px, 整体上移 140px, 让登陆ID 跟合力奔赴行距 308→168 */
  right: 24px;           /* 容器右边对齐到 登陆ID 按钮右 (nav 内容是 max-w-7xl+px-6 居中, ID 在右 24px) */
  left: auto;
  width: auto;           /* 收缩到内容宽 (title 是最宽, ≈345px), 让 title 右对齐到容器右 */
  max-width: calc(100% - 48px);
  z-index: 1;            /* 低于 nav (z-index 50), 不挡住菜单下拉 */
  color: #fff;
  pointer-events: none;  /* 文字不挡 nav 链接 hover */
}
.topbar-bottom__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* pill + title + sub 都右对齐到 inner 右 (= 登陆ID 按钮右) */
  pointer-events: auto;
}
.topbar-bottom__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  font-size: 0.78rem; color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  margin-bottom: 1.5rem;
}
.topbar-bottom__kicker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00ffd1; box-shadow: 0 0 8px rgba(0, 255, 209, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
.topbar-bottom__title {
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.65rem;          /* 标题与副标题行距 1rem → 0.65rem (缩 1/3) */
  color: #fff;
  text-align: left;
}
.topbar-bottom__title .grad-text {
  background: linear-gradient(90deg, #00ffd1 0%, #b36bff 60%, #ffaa3b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar-bottom__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  max-width: 100%;                  /* 填满 .topbar-bottom 容器, 从同一起点左对齐 */
  margin: 0;
  line-height: 1.6;
  text-align: left;
}
@media (max-width: 768px) {
  .topbar-bottom__title { font-size: 2.4rem; }
}

/* === stats-title: "X月工作任务实时进度" 居中标题 (tt.jpg 下面, stats-row 上面) === */
.stats-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;            /* 浅色模式: 深色字 */
  margin: 4.5rem 0 0.23rem;   /* 标题-提示行距再缩 1/3: 0.35rem → 0.23rem */
  letter-spacing: -0.01em;
  white-space: nowrap;
}
html:not(.theme-light) .stats-title { color: #f5f5f5; }   /* 暗黑模式: 浅色字 */

/* === stats-hint: 标题下小字提示 (居中, 浅灰) === */
.stats-hint {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 400;
  color: #888;                /* 浅色模式: 中灰 */
  margin: 0 0 1.25rem;
  letter-spacing: 0.05em;
}
html:not(.theme-light) .stats-hint { color: #888; }   /* 暗黑模式: 同灰, 暗底上仍可读 */

/* === 本月工作进度 4 个百分比 (tt.jpg 下面那排大数字) === */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                            /* 4 个数字紧贴, 用户后续要再窄 */
  margin-top: 0;                     /* 紧贴 hero 底部, 跟图 1 风格一致 (无空隙) */
  margin-left: auto;                 /* 整体居中聚拢, 数字 group 间距自然缩小 */
  margin-right: auto;
  max-width: 700px;                  /* 再收窄 100px: 800→700, 4 cell 各 175px, 数字组紧凑聚拢 */
  padding: 1.25rem 0 0;
  text-align: center;
}
.stats-row__item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }   /* 数字与标签行距 0.5rem → 0.3rem (缩 1/3) */
.stats-row__num {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: #ff6b1a;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  text-shadow: 0 2px 8px rgba(255, 107, 26, 0.18);
}
.stats-row__num .stats-row__plus {
  font-size: 1.6rem;
  font-weight: 700;
  margin-left: 2px;
  color: #ff8a3d;
}
.stats-row__label {
  font-size: 0.9rem;
  color: #888;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .stats-row__num { font-size: 2.4rem; }
}

/* ============ 顶部菜单: 橙底白字 (user 2026-08-21 定制, gz.html / GJ.html / Nanyan.html 共用) ============ */
.theme-light .gj-header.gz-orange-nav,
.theme-light .gj-header.gz-orange-nav * {
  color: #ffffff !important;
}
.theme-light .gj-header.gz-orange-nav {
  background: #ff6b19 !important;
  border-bottom: 1px solid #ff6b19 !important;
}
.theme-light .gj-header.gz-orange-nav svg {
  fill: none !important;
  stroke: #ffffff !important;
}
.theme-light .gj-header.gz-orange-nav button,
.theme-light .gj-header.gz-orange-nav .btn-ghost,
.theme-light .gj-header.gz-orange-nav .nav-pill {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  min-height: 40px;
}
.theme-light .gj-header.gz-orange-nav a:hover,
.theme-light .gj-header.gz-orange-nav button:hover,
.theme-light .gj-header.gz-orange-nav .nav-link:hover,
.theme-light .gj-header.gz-orange-nav .btn-ghost:hover,
.theme-light .gj-header.gz-orange-nav .nav-pill:hover {
  color: #ff6b19 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* ============ Nanyan.html 定制: TN-Nanyan logo 永远无 hover 变化, ID/退出 按钮 hover 改橙色 (透明底) ============ */
/* Nanyan 2026-08-22: 顶部 logo (a[href="/"]) 永远不变, 不参与橙白切换 */
.theme-light .gj-header.gz-orange-nav a[href="/"]:hover {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
}
/* ID 按钮 (QM1EEC0XG / 登陆ID) hover: 文字+图标橙色, 背景透明 */
.theme-light .gj-header.gz-orange-nav #id-status-btn:hover {
  color: #ff6b19 !important;
  background: transparent !important;
  border-color: #ff6b19 !important;
}
.theme-light .gj-header.gz-orange-nav #id-status-btn:hover svg {
  stroke: #ff6b19 !important;
}
/* 退出按钮 (id-auth.js 动态注入 .id-logout-btn) hover: 文字+图标橙色, 背景透明 */
.theme-light .gj-header.gz-orange-nav .id-logout-btn:hover,
.theme-light .gj-header.gz-orange-nav a.id-logout-btn:hover {
  color: #ff6b19 !important;
  background: transparent !important;
  border-color: #ff6b19 !important;
}
.theme-light .gj-header.gz-orange-nav .id-logout-btn:hover svg,
.theme-light .gj-header.gz-orange-nav a.id-logout-btn:hover svg {
  stroke: #ff6b19 !important;
}