/* =======================================================================
   副页面外壳：账号设置 / 超级管理员后台 / 以后新增的后台页都用它
   视觉语言跟首页（style.css 的 .home-head / .board-card）和画板页（.topbar）
   保持同一套：玻璃顶栏 + 主色 #1677ff + 同半径圆角 + 同一条渐变背景

   加载顺序：auth.css → usermenu.css → page.css
   auth.css 里那些登录卡片用的基础件（.field / .btn / .msg / .pf-* / .pk-*）
   这里直接复用，只做「副页面需要、卡片里没有」的补充。
   ======================================================================= */

/* ---------------------------------------------------------------
   最关键的一条：解除 auth.css 给 body 上的 flex 居中
   auth.css 为了让登录卡片垂直居中，把 body 设成了 display:flex。
   副页面有两个块级子节点（顶栏 + 正文），在 flex 默认 row 下会被
   并排挤成左右两列 —— 顶栏变成一小条，正文被推到右边。
   这里改回流式布局，副页面自己用 margin:auto 控制宽度。
   --------------------------------------------------------------- */
body.page-body {
  display: block;
  padding: 0;
  min-height: 100%;
}

/* ---------------- 顶栏（吸顶，跟首页 .home-head 同一质感） ---------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  background: var(--panel-glass);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 5px 22px rgba(52, 89, 129, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-head .logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
  flex: 0 0 auto;
}

.site-head .logo:hover { opacity: 0.82; }

.site-head .logo-img {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.sh-crumb { color: var(--muted); font-size: 15px; flex: 0 0 auto; }

.sh-here {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-spacer { flex: 1; min-width: 0; }

/* 手机端顶栏正中间的品牌名：桌面端由左侧 logo 承担，这里不显示 */
.sh-title {
  display: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}

.sh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--sub);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.sh-btn:hover {
  background: var(--accent-soft);
  border-color: rgba(22, 119, 255, 0.32);
  color: var(--accent);
}

.sh-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.28);
}

.sh-btn.primary:hover {
  color: #fff;
  filter: brightness(1.06);
}

/* 右上角头像菜单：外壳只提供位置，样式在 usermenu.css */
.site-head .user-chip {
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  flex: 0 0 auto;
}

/* ---------------- 内容区 ---------------- */

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 26px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-title { padding: 2px 0 4px; }

.page-title h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.page-title .sub {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--sub);
  line-height: 1.7;
}

/* 玻璃面板：宽度比登录卡片宽，跟首页卡片同一质感 */
.panel {
  position: relative;
  padding: 22px 26px 24px;
  border-radius: 16px;
  background: var(--panel-glass);
  border: 1px solid var(--panel-border);
  box-shadow: 0 10px 34px rgba(52, 89, 129, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.panel > h1,
.panel > h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.panel > h1 + .desc,
.panel > h2 + .desc {
  margin-top: 0;
  margin-bottom: 18px;
}

/* 面板内的分区标题（比 h2 弱一级） */
.panel .sec-title {
  margin: 22px 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* 顶部一行：左边标题，右边操作 */
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}

.panel-head h2 { margin: 0 0 4px; }
.panel-head .desc { margin: 0; }
.panel-head .ph-txt { flex: 1; min-width: 220px; }
.panel-head .ph-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- 按钮：auth.css 里 .btn 是 width:100%，
                    副页面的按钮多数不需要撑满，这里收回来 ---------------- */

.page .btn {
  width: auto;
  min-width: 96px;
  padding: 0 18px;
}

/* 上面这条是为了后台表格里的小按钮，但它同样会命中登录卡片里的「登录」，
   把本该撑满卡片的主按钮压成一个小方块。卡片内的主按钮恢复整宽，
   并排的白色次要按钮交给 .alt-row 的 flex 均分。 */
.page .card .btn {
  width: 100%;
  padding: 0 18px;
}

.page .card .alt-row > .btn {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 12px;
}

.page .btn.block,
.page a.btn.block {
  width: 100%;
  display: block;
  text-align: center;
  text-decoration: none;
}

/* auth.css 只给 .field .hint 上过样式，副页面里裸用的 .hint 也要有样子 */
.hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
}

/* 提示条直接放在 .page 流里时，别再叠一层 margin（外层已有 gap） */
.page > .msg { margin-bottom: 0; }

/* 表格行里的小按钮：必须跟着内容走，否则 mini-form 会被撑爆 */
.btn.mini,
.mini-form .btn {
  width: auto;
  min-width: 0;
  height: 30px;
  margin-top: 0;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 7px;
  box-shadow: none;
}

.btn.ghost.mini { height: 30px; }

/* ---------------- 无权限提示 ---------------- */

.panel.denied {
  text-align: center;
  padding: 40px 26px 34px;
}

.denied-ico {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--danger);
  background: #ffeceb;
}

.panel.denied h2 { margin: 0 0 8px; }
.panel.denied .desc { margin: 0 0 6px; }

.denied-who {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------------- 后台用的小组件 ---------------- */

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.62);
}

.stat .k { font-size: 12px; color: var(--muted); }
.stat .n { font-size: 22px; font-weight: 700; color: var(--text); margin-top: 3px; }
.stat .n.sm { font-size: 16px; font-weight: 600; }
.stat-row { font-size: 12.5px; line-height: 1.85; color: var(--sub); }

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.dot.g { background: var(--ok); }
.dot.r { background: var(--danger); }

.split { height: 1px; background: var(--line-2); margin: 20px 0 18px; }

/* 说明性文字块 */
.note-box {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--sub);
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line-2);
}

.note-box code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: #f0f4fa;
  color: var(--text);
}

/* 页签 */
.tabs {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabs a {
  flex: 1 0 auto;
  text-align: center;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sub);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}

.tabs a:hover { color: var(--text); }

.tabs a.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.26);
}

/* 窄屏：四个页签横着排会超出屏幕（只能滑，最后那个看着像被裁了），
   改两列网格，一眼四个全在。 */
@media (max-width: 430px) {
  .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .tabs a {
    padding: 7px 6px;
    font-size: 12.5px;
  }
}

/* 邀请码展示 */
.code-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.code-box code {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  user-select: all;
  word-break: break-all;
}

.code-box.off { background: #f5f6f8; border-color: var(--line); }
.code-box.off code { color: var(--muted); }

/* 租户表格 */
.mb-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}

table.mb {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* 操作列里有输入框 + 按钮，宽度给够，窄屏交给 .mb-wrap 横向滚动，
     否则三套操作会被挤成一堆换行，看着就是「界面乱了」 */
  min-width: 860px;
}

table.mb th:last-child,
table.mb td:last-child { text-align: right; padding-right: 0; }

table.mb th {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

table.mb td {
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}

table.mb tr:last-child td { border-bottom: none; }

.who { display: flex; align-items: center; gap: 9px; }

.who .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 30px;
  overflow: hidden;
  background: linear-gradient(135deg, #4b86ff, #2455e6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}

.who .av img { width: 100%; height: 100%; object-fit: cover; }
.who b { font-weight: 600; display: block; }
.who small { color: var(--muted); font-size: 11.5px; }

.tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.tag.admin { background: var(--accent-soft); color: var(--accent); }
.tag.user { background: #f0f2f5; color: var(--sub); }
.tag.off { background: #ffe9e8; color: var(--danger); }

.row-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.mini-form {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  flex-wrap: nowrap;
}

.mini-input {
  width: 96px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  height: 30px;
  font-size: 16px;   /* iOS 聚焦不缩放 */
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
}

.mini-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12);
}

.sql-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f5f7fa;
  border: 1px solid var(--line);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--sub);
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
  max-height: 260px;
  overflow: auto;
}

details.fold { margin-top: 14px; }

details.fold > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 0;
  list-style: none;
}

details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '▸ '; }
details.fold[open] > summary::before { content: '▾ '; }

/* ---------------- 移动端 ---------------- */

@media (max-width: 768px) {
  .site-head { height: 54px; padding: 0 12px; gap: 8px; }
  .site-head .logo span { display: none; }
  .sh-crumb, .sh-here { display: none; }
  /* 「返回画板主页」已收进右上角账户菜单，顶栏不再放这个按钮 */
  .sh-back { display: none; }
  .page { padding: 18px 12px 56px; gap: 12px; }
  .page-title h1 { font-size: 20px; }
  .panel { padding: 18px 16px 20px; border-radius: 14px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .row-acts { justify-content: flex-start; }
  .mini-input { width: 96px; }
  .page .btn { min-width: 84px; }

  /* ---- 登录页顶栏：左边图标、中间品牌名、右边「返回导航台」 ---- */
  .site-head.login-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 8px;
  }

  .login-head .logo { justify-self: start; }

  /* grid 下弹性占位块会自己抢一格，把右边的按钮挤到第二行 */
  .login-head .sh-spacer { display: none; }

  .login-head .sh-title {
    display: block;
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }

  .login-head .sh-nav {
    grid-column: 3;
    justify-self: end;
  }

  /* 窄屏顶栏放不下三个元素，注册入口已在登录卡片下方提供 */
  .login-head .sh-reg { display: none; }

  /* ---- 副页面顶栏：左图标、中间「Drawing board」、右边账户菜单 ---- */
  .site-head:not(.login-head) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 8px;
  }

  .site-head:not(.login-head) .logo { justify-self: start; }

  /* grid 下弹性占位块会自己抢一格，把右边的头像挤到第二行 */
  .site-head:not(.login-head) .sh-spacer { display: none; }

  .site-head:not(.login-head) .sh-title {
    display: block;
    grid-column: 2;
    justify-self: center;
    text-align: center;
    font-size: 14.5px;
  }

  .site-head:not(.login-head) .user-chip {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 400px) {
  .login-head .sh-title { font-size: 14.5px; }
  .login-head .sh-nav { height: 32px; padding: 0 9px; font-size: 12.5px; gap: 4px; }
}

@media (max-width: 360px) {
  /* 再窄就只留文字，保证「Drawing board」和「返回导航台」都不被截断 */
  .login-head .sh-nav svg { display: none; }
  .login-head .sh-title { font-size: 14px; }
  /* 两个白色按钮仍并排，只把图标收紧 */
  .alt-row > .btn { font-size: 12.5px; padding: 0 8px; gap: 5px; }
  .alt-row > .btn svg { display: none; }
}

@media (max-width: 420px) {
  .page { padding: 14px 10px 48px; }
  .panel { padding: 16px 13px 18px; }
  .stat .n { font-size: 19px; }
  .mini-input { width: 88px; font-size: 15px; }
}

/* =======================================================================
   紧凑排版（2026-10 改版）
   账号设置 / 后台的每个面板原来一行一个大标题、44px 高的输入框，桌面上
   一屏放不下两块内容，手机上更是一路往下滚。这里统一收一档：
   字号 −1~2px、内边距 −25%、行距 −15%，桌面改成两列卡片。
   ======================================================================= */

.page {
  max-width: 1000px;
  padding: 20px 20px 56px;
  gap: 12px;
}

.page-title { padding: 0; }

.page-title h1 {
  font-size: 20px;
  letter-spacing: 0;
}

.page-title .sub {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
}

.panel {
  padding: 16px 18px 18px;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(52, 89, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.panel > h1,
.panel > h2 {
  margin: 0 0 4px;
  font-size: 15.5px;
}

.panel > h1 + .desc,
.panel > h2 + .desc {
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.65;
}

.panel .sec-title {
  margin: 14px 0 8px;
  font-size: 11.5px;
}

.panel-head {
  padding-bottom: 12px;
  gap: 10px;
}

.panel-head .ph-txt { min-width: 180px; }

/* 输入框：高度 44 → 38，圆角收一档。字号保留 16px，iOS 聚焦才不会自动放大。 */
.page .field { margin-bottom: 11px; }

.page .field label {
  font-size: 12px;
  margin-bottom: 5px;
}

.page .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.page .field select,
.page .field textarea {
  height: 38px;
  padding: 0 11px;
  border-radius: 9px;
}

.page .field .hint { font-size: 11px; }

/* 统计块 */
.grid2,
.grid3 { gap: 10px; }

.stat {
  padding: 10px 12px;
  border-radius: 10px;
}

.stat .k { font-size: 11.5px; }
.stat .n { font-size: 19px; margin-top: 2px; }
.stat .n.sm { font-size: 14px; }
.stat-row { font-size: 12px; line-height: 1.7; }

.note-box {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.7;
  border-radius: 9px;
}

.split { margin: 14px 0 12px; }

/* 页签 */
.tabs a {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 8px;
}

.code-box {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.code-box code { font-size: 16px; }

/* 表格 / 行内小控件 */
table.mb { font-size: 12.5px; }
table.mb th { padding-bottom: 6px; }
table.mb td { padding: 9px 8px 9px 0; }
.who .av { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; }
.mini-input { height: 27px; border-radius: 6px; }
.btn.mini, .mini-form .btn, .btn.ghost.mini { height: 27px; padding: 0 9px; font-size: 11.5px; }
.row-acts { gap: 6px; }

/* 桌面两列：账号设置里「个人资料 / 密码」并排，通行密钥整行；
   后台的「邀请码 / 数据存储」这类短卡片也能两列摆开。 */
.page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.page-grid > .wide { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .page-grid > .wide { grid-column: auto; }
}

/* ------------------------------------------------------------------
   租户表格在手机上换卡片式
   操作列里塞了三套「输入框 + 按钮」，横向滚动在手机上基本没法用
   （滑到右边就看不到这是谁了），所以窄屏把每行拆成一张小卡片：
   第一行头像名字，中间「角色 / 最后登录 / 注册时间」左标签右值，
   底部虚线下面才是操作。
   ------------------------------------------------------------------ */
table.mb td.c-when { white-space: nowrap; }

@media (max-width: 760px) {
  .mb-wrap { overflow: visible; margin: 0; padding: 0; }

  table.mb,
  table.mb tbody,
  table.mb tr,
  table.mb td {
    display: block;
    width: auto;
    min-width: 0;
  }

  table.mb { font-size: 13px; }
  table.mb thead { display: none; }

  table.mb tr {
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 11px 13px 12px;
    margin-bottom: 9px;
    background: #fff;
  }

  table.mb tr:last-child { margin-bottom: 0; }

  table.mb td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    padding: 3px 0;
    text-align: left;
    white-space: normal;
  }

  /* 单元格左边的小标签，值靠右，扫一眼就是「角色：成员」 */
  table.mb td[data-l]::before {
    content: attr(data-l);
    color: var(--muted);
    font-size: 11.5px;
    flex: 0 0 auto;
  }

  table.mb td.c-when { white-space: nowrap; font-size: 12px; color: var(--sub); }

  /* 卡片标题行：不要标签，头像名字占满一行 */
  table.mb td.c-who { padding: 0 0 8px; }
  table.mb td.c-who::before { content: none; }
  table.mb .who b { font-size: 14px; }

  /* 操作区独立成块 */
  table.mb td.c-acts {
    display: block;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px dashed var(--line-2);
  }

  table.mb td.c-acts::before { content: none; }

  table.mb td.c-acts .row-acts {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }

  table.mb td.c-acts .mini-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }

  table.mb td.c-acts .mini-input {
    flex: 1 1 96px;
    width: auto;
    min-width: 0;
  }

  table.mb td.c-acts .btn.mini {
    flex: 0 1 auto;
    height: 30px;
    padding: 0 12px;
  }
}

/* 主按钮 + 「取消」并排，别把取消拉成一条满宽灰条（看着像禁用的输入框） */
.form-acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.form-acts .btn {
  width: auto;
  flex: 0 0 auto;
}

/* 「取消」用的是 .mini，直接放主按钮旁边会小得像标签，
   这里把它拉到和主按钮同一档高度 */
.form-acts .btn.mini {
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 10px;
}

/* 需要认真读的提示块（比如「数据目录在网站根里」）：红边 + 宽行距，
   .msg 是给单行提示用的，多行挤在一起看不清。 */
.note-box.warn {
  background: #fff5f5;
  border: 1px solid #ffd8d4;
  color: #8a1f18;
  line-height: 1.8;
}

.note-box.warn b { color: #b42318; }

.note-box.warn code {
  background: rgba(180, 35, 24, 0.08);
  color: #8a1f18;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

/* ------------------------------------------------------------------
   「运行环境」页：键值表 + 迷你表格
   容器部署时路径很长（/www/sites/xxx/... ），所以值一律允许折行、
   而且用等宽字体，方便一眼比对。
   ------------------------------------------------------------------ */
.env-kv {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 7px 16px;
  margin: 0;
  font-size: 13px;
}

.env-kv dt { color: var(--muted); }

.env-kv dd {
  margin: 0;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text);
}

.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tbl-mini {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.tbl-mini th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 10px 7px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

table.tbl-mini td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
  vertical-align: top;
}

table.tbl-mini tr:last-child td { border-bottom: 0; }

table.tbl-mini td.path {
  white-space: normal;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--sub);
}

table.tbl-mini .ok { color: #18794e; }
table.tbl-mini .no { color: #b42318; }
table.tbl-mini .warn { color: #a15c00; }

.badge-ok,
.badge-no {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.75;
  font-family: var(--font, inherit);
}

.badge-ok { background: #e8f7ee; color: #18794e; border: 1px solid #bfe7cd; }
.badge-no { background: #fdecea; color: #b42318; border: 1px solid #ffd8d4; }

.steps-mini {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.95;
}

.steps-mini code {
  background: #f2f3f5;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

.code-mini {
  margin: 6px 0 2px;
  padding: 8px 10px;
  background: #f7f8fa;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
}

@media (max-width: 640px) {
  .env-kv { grid-template-columns: 1fr; gap: 4px; }
  .env-kv dt { margin-top: 8px; }

  /* 窄屏把体检表转成卡片：六列挤在 390px 里，路径会被折断成竖排，
     打勾那几列也会竖着堆一列。改成一行一个目录、标签在值前面。 */
  table.tbl-mini.stack,
  table.tbl-mini.stack tbody,
  table.tbl-mini.stack tr,
  table.tbl-mini.stack td { display: block; width: auto; }

  table.tbl-mini.stack thead { display: none; }

  table.tbl-mini.stack tr {
    padding: 10px 0 11px;
    border-bottom: 1px solid var(--line-2);
  }

  table.tbl-mini.stack tr:last-child { border-bottom: 0; }

  table.tbl-mini.stack td {
    border: 0;
    padding: 1px 10px;
    white-space: normal;
  }

  table.tbl-mini.stack td.path { margin-bottom: 4px; }

  /* 打勾那几列排成一行，别竖着堆 */
  table.tbl-mini.stack td[data-l] {
    display: inline-block;
    margin-right: 12px;
    font-size: 12px;
  }

  table.tbl-mini.stack td[data-l]::before {
    content: attr(data-l);
    margin-right: 3px;
    color: var(--muted);
  }

  /* 结论单独占一行 */
  table.tbl-mini.stack td.c-verdict {
    display: block;
    margin-top: 5px;
    padding-left: 10px;
  }
}

/* 「推荐」小标签：不许跟着长路径折行 */
table.tbl-mini .tag-rec {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(22, 119, 255, 0.1);
  color: var(--accent, #1677ff);
  font-size: 11px;
  line-height: 1.7;
  vertical-align: 1px;
  white-space: nowrap;
}

/* 「现在用的」小标签：和「推荐」区分开，别让人以为要动它 */
table.tbl-mini .tag-cur {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: #f0f2f5;
  color: var(--sub, #6b7280);
  font-size: 11px;
  line-height: 1.7;
  vertical-align: 1px;
  white-space: nowrap;
}

/* 表格路径下面那行小字（落盘位置）、键值表里的补充说明：
   必须换回正文字体，否则在等宽字体的单元格里像乱码 */
.sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif);
  font-size: 11.5px;
  line-height: 1.65;
  white-space: normal;
}

.sub b { color: var(--text, #1f2328); font-weight: 600; }