/* ==============================================================
   万相方洲 · 中文仓 · 样式表
   版本：V1.0（批 4）
   日期：2026-09-26
   合规：字体合规（思源黑体/Noto Sans CJK/文泉驿）
   原则：只新增，不改造
   ============================================================== */

/* ---------- 0. 字体合规注释 ----------
   禁用：微软雅黑 / 方正 / 宋体 / 黑体 / 楷体 / 仿宋
   只用：思源黑体 / Noto Sans CJK / 文泉驿 / HarmonyOS Sans / 阿里巴巴普惠体
   全部可闭源商用
----------------------------------------------------- */

/* ---------- 1. CSS 变量 ---------- */
:root {
  --仓-背景: #0d1117;
  --仓-背景-次: #161b22;
  --仓-背景-三: #21262d;
  --仓-边框: #30363d;
  --仓-边框-亮: #58a6ff;

  --仓-文字: #c9d1d9;
  --仓-文字-次: #8b949e;
  --仓-文字-亮: #f0f6fc;

  --仓-紫: #58a6ff;
  --仓-青绿: #39d353;
  --仓-蓝: #58a6ff;
  --仓-橙: #f0883e;
  --仓-红: #f85149;
  --仓-灰: #6e7681;

  --仓-字体: system-ui, -apple-system, "Noto Sans SC",
             "Source Han Sans SC", "HarmonyOS Sans SC",
             "Alibaba PuHuiTi", "WenQuanYi Micro Hei",
             sans-serif;
  --仓-字体-等宽: "Noto Sans Mono CJK SC", "Source Han Mono SC",
                   "WenQuanYi Micro Hei Mono", ui-monospace,
                   "Cascadia Code", monospace;

  --仓-圆角: 6px;
  --仓-圆角-小: 4px;
  --仓-间距: 16px;
  --仓-间距-小: 8px;
  --仓-间距-大: 24px;

  --仓-阴影: 0 2px 8px rgba(0, 0, 0, 0.3);
  --仓-阴影-亮: 0 0 0 3px rgba(88, 166, 255, 0.3);
}

/* ---------- 2. 全局重置 ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--仓-字体);
  background: var(--仓-背景);
  color: var(--仓-文字);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--仓-蓝);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- 3. 顶部导航区 ---------- */
.仓-顶部导航 {
  background: var(--仓-背景-次);
  border-bottom: 1px solid var(--仓-边框);
  padding: var(--仓-间距) var(--仓-间距-大);
  position: sticky;
  top: 0;
  z-index: 100;
}

.仓-顶部导航-内 {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--仓-间距);
}

.仓-标题 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--仓-文字-亮);
  margin-right: auto;
}

.仓-标题-图标 {
  margin-right: var(--仓-间距-小);
}

/* 返回首页（对齐 8 个页统一） */
.返回首页 {
  color: #58a6ff;
  text-decoration: none;
  font-size: 14px;
}

.返回首页:hover {
  text-decoration: underline;
}

/* ---------- 4. 8 大模块标签栏 ---------- */
.仓-模块栏 {
  background: var(--仓-背景-次);
  border-bottom: 1px solid var(--仓-边框);
  padding: 0 var(--仓-间距-大);
  overflow-x: auto;
  white-space: nowrap;
}

.仓-模块栏-内 {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: var(--仓-间距-小);
}

.仓-模块按钮 {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--仓-文字-次);
  font-family: var(--仓-字体);
  font-size: 0.95rem;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.仓-模块按钮:hover {
  color: var(--仓-文字-亮);
  background: var(--仓-背景-三);
}

.仓-模块按钮.激活 {
  color: var(--仓-蓝);
  border-bottom-color: var(--仓-蓝);
  font-weight: 600;
}

/* ---------- 5. 主内容区 ---------- */
.仓-主区 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--仓-间距-大);
}

.仓-模块内容 {
  display: none;
}

.仓-模块内容.激活 {
  display: block;
}

/* ---------- 6. 面板 ---------- */
.仓-面板 {
  background: var(--仓-背景-次);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角);
  padding: var(--仓-间距-大);
  margin-bottom: var(--仓-间距);
}

.仓-面板-标题 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--仓-文字-亮);
  margin-bottom: var(--仓-间距);
  padding-bottom: var(--仓-间距-小);
  border-bottom: 1px solid var(--仓-边框);
}

/* ---------- 7. 按钮 ---------- */
.仓-按钮 {
  background: var(--仓-背景-三);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角-小);
  color: var(--仓-文字);
  font-family: var(--仓-字体);
  font-size: 0.9rem;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.仓-按钮:hover {
  background: var(--仓-边框);
  border-color: var(--仓-边框-亮);
  color: var(--仓-文字-亮);
}

.仓-按钮:focus {
  outline: none;
  box-shadow: var(--仓-阴影-亮);
}

.仓-按钮.主色 {
  background: var(--仓-蓝);
  border-color: var(--仓-蓝);
  color: #fff;
}

.仓-按钮.主色:hover {
  background: #79b8ff;
  border-color: #79b8ff;
}

.仓-按钮.紫 {
  background: var(--仓-紫);
  border-color: var(--仓-紫);
  color: #fff;
}

.仓-按钮.青绿 {
  background: var(--仓-青绿);
  border-color: var(--仓-青绿);
  color: #0d1117;
}

/* ---------- 8. 按钮组 ---------- */
.仓-按钮组 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--仓-间距-小);
  margin-top: var(--仓-间距);
}

.仓-按钮组 .仓-按钮 {
  flex: 0 0 auto;
}

/* ---------- 9. 卡片网格 ---------- */
.仓-卡片网格 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--仓-间距);
}

.仓-卡片 {
  background: var(--仓-背景-次);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角);
  padding: var(--仓-间距);
  transition: all 0.15s ease;
  cursor: pointer;
}

.仓-卡片:hover {
  border-color: var(--仓-边框-亮);
  transform: translateY(-2px);
  box-shadow: var(--仓-阴影);
}

.仓-卡片-标题 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--仓-文字-亮);
  margin-bottom: var(--仓-间距-小);
}

.仓-卡片-描述 {
  font-size: 0.85rem;
  color: var(--仓-文字-次);
  line-height: 1.5;
}

/* ---------- 10. 搜索栏 ---------- */
.仓-搜索栏 {
  display: flex;
  gap: var(--仓-间距-小);
  margin-bottom: var(--仓-间距);
}

.仓-搜索框 {
  flex: 1;
  background: var(--仓-背景);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角-小);
  color: var(--仓-文字);
  font-family: var(--仓-字体);
  font-size: 0.95rem;
  padding: 10px 14px;
}

.仓-搜索框:focus {
  outline: none;
  border-color: var(--仓-边框-亮);
  box-shadow: var(--仓-阴影-亮);
}

.仓-搜索框::placeholder {
  color: var(--仓-文字-次);
}

/* ---------- 11. 表格 ---------- */
.仓-表格 {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.仓-表格 th {
  background: var(--仓-背景-三);
  color: var(--仓-文字-亮);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--仓-边框);
}

.仓-表格 td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--仓-边框);
}

.仓-表格 tr:hover {
  background: var(--仓-背景-三);
}

/* ---------- 12. 标签 ---------- */
.仓-标签 {
  display: inline-block;
  background: var(--仓-背景-三);
  border: 1px solid var(--仓-边框);
  border-radius: 999px;
  color: var(--仓-文字-次);
  font-size: 0.75rem;
  padding: 2px 10px;
  margin-right: 4px;
}

.仓-标签.紫 { color: var(--仓-紫); border-color: var(--仓-紫); }
.仓-标签.青绿 { color: var(--仓-青绿); border-color: var(--仓-青绿); }
.仓-标签.蓝 { color: var(--仓-蓝); border-color: var(--仓-蓝); }
.仓-标签.橙 { color: var(--仓-橙); border-color: var(--仓-橙); }
.仓-标签.红 { color: var(--仓-红); border-color: var(--仓-红); }

/* ---------- 13. 空状态 ---------- */
.仓-空状态 {
  text-align: center;
  padding: var(--仓-间距-大) var(--仓-间距);
  color: var(--仓-文字-次);
}

.仓-空状态-图标 {
  font-size: 3rem;
  margin-bottom: var(--仓-间距);
  opacity: 0.5;
}

/* ---------- 14. 加载状态 ---------- */
.仓-加载 {
  text-align: center;
  padding: var(--仓-间距-大);
  color: var(--仓-文字-次);
}

/* ---------- 15. 底部 ---------- */
.仓-底部 {
  border-top: 1px solid var(--仓-边框);
  padding: var(--仓-间距-大);
  text-align: center;
  color: var(--仓-文字-次);
  font-size: 0.85rem;
  margin-top: var(--仓-间距-大);
}

/* ---------- 16. 响应式 ---------- */
@media (max-width: 768px) {
  .仓-顶部导航-内 {
    flex-wrap: wrap;
  }

  .仓-主区 {
    padding: var(--仓-间距);
  }

  .仓-卡片网格 {
    grid-template-columns: 1fr;
  }

  .仓-表格 {
    font-size: 0.8rem;
  }
}

/* ---------- 17. 工具类 ---------- */
.仓-隐藏 { display: none !important; }
.仓-居中 { text-align: center; }
.仓-右 { text-align: right; }
.仓-上间距 { margin-top: var(--仓-间距); }
.仓-下间距 { margin-bottom: var(--仓-间距); }

/* ==============================================================
   批 5.1 补充：无前缀别名（兼容 中文仓.html 现有类名）
   原则：只新增，不改造（不删旧类，只加别名）
   ============================================================== */

/* 顶部 */
.顶部 {
  background: var(--仓-背景-次);
  border-bottom: 1px solid var(--仓-边框);
  padding: var(--仓-间距) var(--仓-间距-大);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--仓-间距);
}

.标题 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--仓-文字-亮);
  margin-right: var(--仓-间距);
}

.合规标识 {
  font-size: 0.8rem;
  color: var(--仓-青绿);
}

/* 标签栏 */
.标签栏 {
  background: var(--仓-背景-次);
  border-bottom: 1px solid var(--仓-边框);
  padding: 0 var(--仓-间距-大);
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  gap: var(--仓-间距-小);
}

.标签 {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--仓-文字-次);
  font-family: var(--仓-字体);
  font-size: 0.95rem;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.标签:hover {
  color: var(--仓-文字-亮);
  background: var(--仓-背景-三);
}

.标签.激活 {
  color: var(--仓-蓝);
  border-bottom-color: var(--仓-蓝);
  font-weight: 600;
}

/* 内容区 */
.内容区 {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--仓-间距-大);
}

.模块 {
  display: none;
}

.模块.显示 {
  display: block;
}

.模块标题 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--仓-文字-亮);
  margin-bottom: var(--仓-间距);
  padding-bottom: var(--仓-间距-小);
  border-bottom: 1px solid var(--仓-边框);
}

/* 统计条 */
.统计条 {
  display: flex;
  gap: var(--仓-间距);
  flex-wrap: wrap;
  margin-bottom: var(--仓-间距-大);
}

.统计项 {
  background: var(--仓-背景-次);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角);
  padding: var(--仓-间距);
  min-width: 100px;
  text-align: center;
}

.统计数字 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--仓-蓝);
}

.统计标签 {
  font-size: 0.8rem;
  color: var(--仓-文字-次);
  margin-top: 4px;
}

/* 按钮组（内容区通用） */
.按钮组 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--仓-间距-小);
  margin-top: var(--仓-间距);
}

.按钮 {
  background: var(--仓-背景-三);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角-小);
  color: var(--仓-文字);
  font-family: var(--仓-字体);
  font-size: 0.9rem;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.按钮:hover {
  background: var(--仓-边框);
  border-color: var(--仓-边框-亮);
  color: var(--仓-文字-亮);
}

.按钮.主色 {
  background: var(--仓-蓝);
  border-color: var(--仓-蓝);
  color: #fff;
}

.按钮.紫 {
  background: var(--仓-紫);
  border-color: var(--仓-紫);
  color: #fff;
}

/* 面板 */
.面板 {
  background: var(--仓-背景-次);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角);
  padding: var(--仓-间距-大);
  margin-bottom: var(--仓-间距);
}

.面板标题 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--仓-文字-亮);
  margin-bottom: var(--仓-间距);
}

/* 卡片网格 */
.卡片网格 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--仓-间距);
}

.卡片 {
  background: var(--仓-背景-次);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角);
  padding: var(--仓-间距);
  transition: all 0.15s ease;
}

.卡片:hover {
  border-color: var(--仓-边框-亮);
  transform: translateY(-2px);
  box-shadow: var(--仓-阴影);
}

.卡片标题 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--仓-文字-亮);
  margin-bottom: var(--仓-间距-小);
}

.卡片描述 {
  font-size: 0.85rem;
  color: var(--仓-文字-次);
  line-height: 1.5;
}

/* ==============================================================
   批 5.1 补充 2：无前缀变量 + 空态/进度条类
   ============================================================== */

/* 无前缀变量（兼容 HTML 现有 var(--青绿) 等） */
:root {
  --青绿: #39d353;
  --紫: #58a6ff;
  --蓝: #58a6ff;
  --红: #f85149;
  --橙: #f0883e;
  --灰浅: #21262d;
  --灰: #6e7681;
  --文字: #c9d1d9;
  --文字次: #8b949e;
}

/* 空态 */
.空态 {
  text-align: center;
  padding: var(--仓-间距-大) var(--仓-间距);
  color: var(--仓-文字-次);
  background: var(--仓-背景-次);
  border: 1px dashed var(--仓-边框);
  border-radius: var(--仓-圆角);
  margin-top: var(--仓-间距);
}

.空态图标 {
  font-size: 3rem;
  margin-bottom: var(--仓-间距);
  opacity: 0.5;
}

/* 进度条 */
.进度条 {
  background: var(--仓-背景-三);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin: 8px 0;
}

.进度填充 {
  background: linear-gradient(90deg, var(--仓-蓝), var(--仓-青绿));
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* 按钮组（内容区通用） */
.按钮组 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--仓-间距-小);
  margin-top: var(--仓-间距);
}

.按钮 {
  background: var(--仓-背景-三);
  border: 1px solid var(--仓-边框);
  border-radius: var(--仓-圆角-小);
  color: var(--仓-文字);
  font-family: var(--仓-字体);
  font-size: 0.9rem;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.按钮:hover {
  background: var(--仓-边框);
  border-color: var(--仓-边框-亮);
  color: var(--仓-文字-亮);
}

.按钮.主色 {
  background: var(--仓-蓝);
  border-color: var(--仓-蓝);
  color: #fff;
}

.按钮.紫 {
  background: var(--仓-紫);
  border-color: var(--仓-紫);
  color: #fff;
}

/* ==============================================================
   批 8.5 · 中文仓 · 翻译面板（高级版）
   ============================================================== */

.翻译面板 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.翻译区块 {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 16px;
  transition: border-color 0.2s ease;
}

.翻译区块:hover {
  border-color: #58a6ff;
}

.翻译区块-标题 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #f0f6fc;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #30363d;
}

.翻译区块-标题-右 {
  font-size: 12px;
  color: #8b949e;
  font-weight: 400;
}

.翻译方向-行 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}

.翻译方向-行:last-child {
  margin-bottom: 0;
}

.翻译方向-标签 {
  color: #8b949e;
  font-size: 12px;
  min-width: 56px;
  font-weight: 500;
}

.翻译输入框,
.翻译输出框 {
  width: 100%;
  min-height: 120px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  color: #c9d1d9;
  font-family: "Noto Sans Mono CJK SC", ui-monospace, monospace;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.翻译输入框:focus,
.翻译输出框:focus {
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

.翻译输出框 {
  min-height: 150px;
  white-space: pre-wrap;
  overflow-y: auto;
}

.翻译按钮组 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .翻译区块 {
    padding: 12px;
  }
  .翻译方向-标签 {
    min-width: 48px;
  }
}