/* ============================================================================
   个人工作经验分享 · 样式表
   零构建，单文件。分区：① 设计变量 ② 基础样式 ③ 布局骨架
   ④ 通用组件 ⑤ 各栏目页面 ⑥ Markdown 正文 ⑦ 响应式
   ========================================================================= */

/* ---------------------------------------------------------------- ① 变量 -- */
:root {
  /* 主色：科技蓝。运维场景长时间盯屏，饱和度压低一档，避免刺眼 */
  --brand:        #1E5EFF;
  --brand-dark:   #1546D6;
  --brand-soft:   #EDF2FF;
  --brand-border: #C7D7FF;

  /* 语义色。涨红跌绿是 A 股惯例，但这里用于状态而非行情，按国际惯用红=错/危险 */
  --ok:      #0E9F6E;
  --ok-soft: #E6F6F0;
  --warn:      #C2751A;
  --warn-soft: #FDF3E3;
  --danger:      #DC2B3F;
  --danger-soft: #FDECEE;
  --info:      #6B4EE6;
  --info-soft: #F1EEFE;

  /* 中性色阶 */
  --bg:       #F5F7FA;
  --surface:  #FFFFFF;
  --surface-2:#FAFBFC;
  --border:   #E6E9EF;
  --border-strong: #D3D8E2;
  --text:     #111827;
  --text-2:   #4B5565;
  --text-3:   #78828F;
  --text-4:   #A2AAB6;

  --radius-sm: 6px;
  --radius:    9px;
  --radius-lg: 12px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 4px 14px rgba(16, 24, 40, .07);
  --shadow-3: 0 12px 32px rgba(16, 24, 40, .13);

  /* 顶栏高度与内容最大宽度：两者共同决定画面重心，改任一个都要回来看首屏 */
  --topbar-h: 62px;
  --page-w:   1200px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas,
               "Liberation Mono", Menlo, monospace;
}

/* ------------------------------------------------------------ ② 基础样式 -- */
*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性必须真的隐藏。UA 的 [hidden]{display:none} 敌不过任何一条
   类选择器的 display（.field{display:flex} 就压过了它），
   踩过：教程行的「站内文章 / 外部链接」二选一两个都显示，栅格多出一列挤到换行。 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.35; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

img { max-width: 100%; display: block; }

/* 数字统一等宽，避免列表里数字跳动 */
.num, .stat-value, .meta-num { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: #CFE0FF; }

/* 滚动条：细一点，别抢视线 */
* { scrollbar-width: thin; scrollbar-color: #C6CCD8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #C6CCD8; border-radius: 6px; border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #A9B2C1; background-clip: content-box; }

/* ---------------------------------------------------------- ③ 布局骨架 -- */
/* 单行顶栏 + 居中内容。
   为什么不用左侧栏：纵向菜单把画面重心压在左上，宽屏下正文被挤得偏右，
   整体读起来像博客模板；横向主导航 + 居中容器才是"平台"的默认构图。 */

body { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  position: relative;
  max-width: var(--page-w); margin: 0 auto;
  height: var(--topbar-h); padding: 0 24px;
  display: flex; align-items: center;
}

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { display: flex; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-text strong { font-size: 15px; font-weight: 650; letter-spacing: .1px; white-space: nowrap; }
.brand-text small {
  font-size: 9.5px; letter-spacing: 1.6px; color: var(--text-4);
  font-family: var(--font-mono); text-transform: uppercase;
}

/* 导航横向贴底，活动项用下划线而不是胶囊：
   胶囊让人想到 App 底部 Tab，下划线才是网站主导航的默认语言。 */
.nav {
  display: flex; align-items: stretch; height: 100%;
  margin-left: 20px; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav-item {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 13px;
  font-size: 14px; color: var(--text-2); white-space: nowrap;
  transition: color .14s ease;
}
.nav-item:hover { color: var(--text); }
.nav-item.is-active { color: var(--brand); font-weight: 600; }
.nav-item.is-active::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--brand);
}
.nav-count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-4); font-weight: 400; }
.nav-item.is-active .nav-count { color: var(--brand); opacity: .7; }

.nav-skeleton {
  width: 58px; height: 12px; border-radius: 4px; margin: auto 11px;
  background: linear-gradient(90deg, #EEF1F6 25%, #F8FAFC 50%, #EEF1F6 75%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}

/* 空间不够时先摘计数：数字是辅助信息，栏目名才是入口本身。
   摘掉的顺序是"先次要后主要"，所以这一步永远发生在收进「更多」之前。 */
.nav.is-compact .nav-count { display: none; }

/* 「更多」收纳：究竟收几个由 app.js 按可用宽度算，不写死断点。
   断点只能覆盖设计时想到的几种屏幕，用户把窗口拖窄 5px 就该变的情况它管不了。 */
.nav.is-overflow { overflow: visible; }
.nav-more { display: none; position: relative; height: 100%; }
.nav-more.is-on { display: inline-flex; align-items: stretch; }
.nav-more-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 100%; padding: 0 12px; border: 0; background: none;
  font-size: 14px; color: var(--text-2); cursor: pointer; white-space: nowrap;
  transition: color .14s ease;
}
.nav-more-btn:hover { color: var(--text); }
.nav-more-btn[aria-expanded="true"] { color: var(--brand); }
.nav-more-btn .ic { transition: transform .16s ease; }
.nav-more-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
/* 活动项被收进下拉时，按钮本身要顶上"我在这"的位置信号 */
.nav-more.is-active .nav-more-btn { color: var(--brand); font-weight: 600; }
.nav-more.is-active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--brand);
}

.nav-more-panel {
  position: absolute; top: calc(100% - 8px); right: 0; z-index: 46;
  min-width: 196px; max-width: 280px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-3);
}
.nav-more-panel[hidden] { display: none !important; }
.nav-more-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--text-2); white-space: nowrap;
}
.nav-more-link:hover { background: var(--surface-2); color: var(--text); }
.nav-more-link.is-active { color: var(--brand); font-weight: 600; background: var(--brand-soft, #F2F6FF); }
.nav-more-link .nav-count { margin-left: auto; }

/* padding-left 是最小间距：顶栏空间不足时 margin-left:auto 会被导航
   收缩挤成 0，文字会直接贴到搜索图标上 */
.topbar-right { margin-left: auto; padding-left: 10px; display: flex; align-items: center; gap: 8px; }
.topbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }

/* 搜索框固定宽度：在顶栏里它不该抢导航的位置，
   宽度随内容变化会让整行抖动。 */
.search { position: relative; width: 232px; flex: 0 0 auto; }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-4); pointer-events: none;
}
.search input {
  width: 100%; height: 34px; padding: 0 10px 0 31px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); font-size: 13px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--text-4); }
.search input:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(30, 94, 255, .1);
}

/* 搜索建议面板：挂在输入框正下方，绝对定位不挤压顶栏布局。
   宽度比输入框宽——建议项里要放标题和栏目名，232px 会折成两行。 */
.search-suggest {
  position: absolute; right: 0; top: calc(100% + 8px);
  z-index: 60; width: 380px; max-width: calc(100vw - 32px);
  max-height: 62vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 11px; box-shadow: var(--shadow-3); padding: 6px;
}
.suggest-group-title {
  font-size: 11px; letter-spacing: .6px; color: var(--text-4);
  padding: 8px 10px 4px; font-weight: 600;
}
.suggest-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--text); text-align: left; width: 100%;
  background: none; border: 0;
}
.suggest-item:hover, .suggest-item.is-active { background: var(--surface-2); }
.suggest-item .suggest-ico { flex: 0 0 auto; color: var(--text-4); display: flex; }
.suggest-item mark { background: none; color: var(--brand); font-weight: 600; }
.suggest-item .suggest-hint {
  margin-left: auto; font-size: 11.5px; color: var(--text-4);
  font-family: var(--font-mono);
}
.suggest-empty { padding: 14px 12px; font-size: 13px; color: var(--text-3); }

/* 窄屏下搜索折叠成图标，点开才占整行——顶栏只有一行，
   把搜索常驻会让导航被挤成横向滚动条。
   带上 .topbar 提权重：.icon-btn 在组件层里声明了 display，
   同权重会被它盖回去（真实踩过：宽屏下按钮和搜索框同时出现）。 */
.topbar .search-toggle { display: none; }

.content {
  flex: 1;
  max-width: var(--page-w); width: 100%;
  margin: 0 auto; padding: 28px 24px 56px;
}
.content:focus { outline: none; }

/* 页脚只承担两件事：说明"这是个持续维护的站点"、给出接口文档入口 */
.site-foot { border-top: 1px solid var(--border); background: var(--surface); }
.foot-inner {
  max-width: var(--page-w); margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-4);
}
.site-foot a { color: var(--text-3); }
.site-foot a:hover { color: var(--brand); }
/* 备案号是一串不可断的编号，换行拆开会很难看 */
.foot-icp { white-space: nowrap; }
.foot-sep { color: var(--border-strong); }
.foot-note { margin-left: auto; }

/* -------------------------------------------------------- ④ 通用组件 -- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: 20px 22px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--text-2);
  font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.btn:hover { border-color: #BFC6D2; color: var(--text); background: var(--surface-2); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(30, 94, 255, .3);
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border); }

.btn-sm { height: 29px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 14.5px; border-radius: 9px; }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: background .14s, color .14s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.chip-brand { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-dark); }
.chip-ok      { background: var(--ok-soft);      border-color: #BCE6D6; color: #0A7D57; }
.chip-warn    { background: var(--warn-soft);    border-color: #F2DCB8; color: #A2601A; }
.chip-danger  { background: var(--danger-soft);  border-color: #F6C8CE; color: #C01F31; }
.chip-info    { background: var(--info-soft);    border-color: #D9D0FB; color: #5A3ECC; }
.chip-mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2px; }
/* 来源徽标：中性灰而不是彩色。
   它是「出处说明」，不是状态也不是推荐，用彩色会跟分类、精选抢注意力。 */
.chip-source { background: transparent; border-style: dashed; color: var(--text-3); gap: 4px; }

/* 抓取内容的转载声明。放在标题下方、正文之前，
   用浅色提示条而不是大段文字——它必须被看到，但不该比内容更显眼。 */
.source-notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 9px 12px;
  border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.65; color: var(--text-3);
}
.source-notice .ic { margin-top: 2px; flex: 0 0 auto; }
.source-notice a {
  color: var(--brand-dark); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2px;
}
.source-notice a:hover { text-decoration: underline; }

/* 卡片整体是链接，但视觉上要像卡片而不是链接文字 */
a.post, a.tool-card, a.res-item, a.channel-card { color: inherit; }
a.post:hover h3, a.tool-card:hover h3, a.res-item:hover h3, a.channel-card:hover h3 { color: var(--brand-dark); }

/* 实心星标：收藏/热门场景下空心星太轻，压不住旁边的数字 */
.fill-star { fill: currentColor; }

.ic { flex: 0 0 auto; vertical-align: -2px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-center { justify-content: center; }

/* 检索词回显：搜索不准时，这是用户唯一能看到的线索，值得占一行位置 */
.search-terms {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.search-terms-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-3); padding-top: 3px; white-space: nowrap;
}
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--brand-border); color: var(--brand-dark); background: var(--brand-soft); }

.badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 5px;
  font-size: 11.5px; font-weight: 500;
  background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border);
}

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 22px; letter-spacing: -.2px; }
.page-head .lede { margin-top: 6px; color: var(--text-3); font-size: 13.5px; max-width: 720px; }

.crumb {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-3); margin-bottom: 12px;
}
.crumb a { color: var(--text-3); }
.crumb a:hover { color: var(--brand); }
.crumb-sep { color: var(--text-4); }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.toolbar-spacer { flex: 1; }

.select {
  height: 34px; padding: 0 30px 0 11px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378828F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; font-size: 13px; color: var(--text-2); cursor: pointer;
}
.select:focus { outline: none; border-color: var(--brand-border); box-shadow: 0 0 0 3px rgba(30,94,255,.1); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.input {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); width: 100%;
}
.input:focus { outline: none; border-color: var(--brand-border); box-shadow: 0 0 0 3px rgba(30,94,255,.1); }

.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.seg button {
  border: 0; background: none; cursor: pointer;
  padding: 5px 12px; border-radius: 6px;
  font-size: 12.5px; color: var(--text-3);
  transition: background .14s, color .14s;
}
.seg button:hover { color: var(--text); }
.seg button.is-active {
  background: var(--surface); color: var(--brand-dark);
  font-weight: 500; box-shadow: var(--shadow-1);
}

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.pager-info { font-size: 12.5px; color: var(--text-3); margin: 0 6px; font-variant-numeric: tabular-nums; }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 64px 24px; text-align: center;
  color: var(--text-3);
}
.empty-mark {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-4); margin-bottom: 2px;
}
.empty strong { color: var(--text-2); font-size: 14.5px; }
.empty p { font-size: 13px; max-width: 380px; }

.page-loading {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 90px 0; color: var(--text-3); font-size: 13px;
}
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.4px solid var(--border-strong); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}

.skeleton-line {
  height: 13px; border-radius: 5px;
  background: linear-gradient(90deg, #EEF1F5 25%, #F6F8FA 50%, #EEF1F5 75%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.toast-root {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 9px;
  min-width: 220px; max-width: 380px;
  padding: 11px 14px;
  background: #1B2436; color: #E8EDF6;
  border-radius: 10px; box-shadow: var(--shadow-3);
  font-size: 13px; line-height: 1.5;
  animation: toast-in .2s ease;
  pointer-events: auto;
}
.toast.is-ok    { background: #0B6B4C; }
.toast.is-error { background: #A81C2C; }
.toast-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; margin-top: 7px; flex: 0 0 auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 元信息行 */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 12.5px; color: var(--text-3);
}
.meta-item { display: inline-flex; align-items: center; gap: 5px; }

/* 头像 */
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; flex: 0 0 auto;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 3px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: border-color .14s, box-shadow .14s;
}
.user-chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }

/* 账号区必须是 flex：user-chip 曾是块级 flex，会把退出按钮挤到下一行 */
.account { display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .user-chip .name { display: none; }
  .user-chip { padding-right: 3px; }
}
.user-chip .name { font-size: 13px; color: var(--text-2); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14, 22, 38, .45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 400px;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); animation: pop .18s ease;
  max-height: 88vh; overflow-y: auto;
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px 0;
}
.modal-head h2 { font-size: 17px; }
.modal-head p { margin-top: 5px; font-size: 13px; color: var(--text-3); }
.modal-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-close {
  border: 0; background: none; cursor: pointer; color: var(--text-4);
  padding: 4px; border-radius: 6px; line-height: 0;
}
.modal-close:hover { background: var(--surface-2); color: var(--text-2); }

/* ------------------------------------------------------ ⑤ 栏目页面 -- */

/* --- 概览页 --- */
.hero {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(900px 260px at 88% -30%, rgba(30,94,255,.36), transparent 62%),
    linear-gradient(135deg, #101B31 0%, #16233F 58%, #1B2A4C 100%);
  color: #fff; padding: 34px 32px; margin-bottom: 26px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 78%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 620px; }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2.2px;
  text-transform: uppercase; color: #7C93BC; margin-bottom: 14px;
}
.hero h1 { font-size: 27px; letter-spacing: -.4px; }
.hero p { margin-top: 9px; color: #AFC0DD; font-size: 14px; line-height: 1.7; }

/* Hero 里的两个入口：一个主行动，一个轻量。用白底实心按钮而不是品牌蓝，
   深色底上的蓝按钮对比度不够，还和右上角的光晕撞色。 */
.hero-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hero-btn {
  height: 38px; padding: 0 18px; border-radius: 8px;
  display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 600;
  background: #fff; color: #12203A; border: 1px solid #fff;
  transition: background .15s, border-color .15s, transform .12s;
}
.hero-btn:hover { background: #EDF2FF; border-color: #EDF2FF; color: #12203A; }
.hero-btn:active { transform: translateY(.5px); }
.hero-btn-ghost {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24);
  color: #E7EDF8; font-weight: 500;
}
.hero-btn-ghost:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .38); color: #fff; }

/* 统计用竖线分隔而不是加大间距：四个数字并排时，间距分不出组，竖线一眼就分开了 */
.hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; }
.hero-stat { padding-right: 30px; }
.hero-stat + .hero-stat { padding-left: 30px; border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-stat strong { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.hero-stat span { font-size: 12px; color: #8FA3C6; }

.section { margin-bottom: 30px; }
.section-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
}
.section-head h2 { font-size: 16px; }
.section-head .more { margin-left: auto; font-size: 13px; }

.channel-grid {
  display: grid; gap: 14px;
  /* 205 是试出来的下限：1200 容器正好放下 5 个栏目不孤卡，
     再小卡片里的两行简介会折成三行 */
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
}
.channel-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 18px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  text-align: left;
}
.channel-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-2);
  border-color: var(--brand-border);
}
.channel-card-top { display: flex; align-items: center; gap: 10px; }
.channel-glyph {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  flex: 0 0 auto;
}
.channel-card h3 { font-size: 14.5px; }
.channel-card p { font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.channel-card-foot {
  margin-top: auto; padding-top: 4px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-4);
}

/* --- 文章卡片 --- */
.post-list { display: flex; flex-direction: column; gap: 12px; }

.post {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.post:hover { border-color: var(--brand-border); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.post-body { flex: 1; min-width: 0; }
.post h3 {
  font-size: 15.5px; margin-bottom: 7px; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-summary {
  font-size: 13px; color: var(--text-3); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-foot { margin-top: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: var(--text-4); }
.post-cover {
  flex: 0 0 132px; width: 132px; height: 84px; border-radius: 9px;
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--border);
}
@media (max-width: 620px) { .post-cover { display: none; } }

/* --- 工具卡片 --- */
.tool-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tool-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 18px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--brand-border); }
.tool-head { display: flex; align-items: flex-start; gap: 11px; }
.tool-logo {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
  font-weight: 700; font-size: 15px; color: var(--brand); overflow: hidden;
}
.tool-logo img { width: 100%; height: 100%; object-fit: cover; }
.tool-title { min-width: 0; flex: 1; }
.tool-title h3 { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.tool-title .repo {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-4);
  display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-summary {
  font-size: 12.8px; color: var(--text-3); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 42px;
}
.tool-foot {
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--text-3);
}
.star-count { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-variant-numeric: tabular-nums; }

/* --- 资源列表 --- */
.res-list { display: flex; flex-direction: column; gap: 11px; }
.res-item {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .16s;
}
.res-item:hover { border-color: var(--brand-border); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.res-glyph {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid var(--brand-border); letter-spacing: .3px;
}
.res-glyph.ext-conf  { background: var(--warn-soft); color: #A2601A; border-color: #F2DCB8; }
.res-glyph.ext-sh    { background: var(--ok-soft);   color: #0A7D57; border-color: #BCE6D6; }
.res-glyph.ext-txt, .res-glyph.ext-md { background: var(--info-soft); color: #5A3ECC; border-color: #D9D0FB; }
.res-body { flex: 1; min-width: 0; }
.res-body h3 { font-size: 14.5px; margin-bottom: 5px; }
.res-meta { display: flex; flex-wrap: wrap; gap: 11px; font-size: 12px; color: var(--text-3); }
.res-action { flex: 0 0 auto; }

/* --- 详情页 --- */
.detail-head {
  padding: 26px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 22px;
}
.detail-head h1 { font-size: 25px; line-height: 1.4; letter-spacing: -.3px; }
.detail-head .lede { margin-top: 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
.detail-meta {
  margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  font-size: 12.5px; color: var(--text-3);
}

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 30px; align-items: start; }
@media (max-width: 1040px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } }

.side-card { padding: 18px 20px; }
.side-card h3 { font-size: 13px; color: var(--text-3); font-weight: 600; letter-spacing: .3px; margin-bottom: 13px; text-transform: uppercase; }
.kv { display: flex; flex-direction: column; gap: 11px; }
.kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.kv-row dt { color: var(--text-3); flex: 0 0 auto; }
.kv-row dd { margin: 0; text-align: right; color: var(--text); min-width: 0; word-break: break-all; }
.kv-row dd.mono { font-family: var(--font-mono); font-size: 12px; }

/* --- 题库 --- */
.stat-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 24px;
}
.stat-card {
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.stat-label { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.stat-value { font-size: 26px; font-weight: 600; margin-top: 7px; line-height: 1.2; }
.stat-value small { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 2px; }

/* 按方向刷题：分类卡用小方块而不是列表。
   列表会把十来个方向拉成一长条，一屏放不下，
   用户反而看不到「还有 Windows Server / 安全加固」这层信息。 */
.quiz-cats { margin-bottom: 24px; }
.quiz-cat-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
}
.quiz-cat {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 14px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.quiz-cat:hover:not(:disabled) {
  border-color: var(--brand-border); box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
/* 0 题的分类保持可读但明确不可点，别让它看起来像坏了 */
.quiz-cat.is-empty { cursor: default; background: var(--surface-2); box-shadow: none; }
.quiz-cat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.quiz-cat-name { font-size: 14px; font-weight: 600; color: var(--text); }
.quiz-cat-count {
  font-size: 11.5px; color: var(--text-4); flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.quiz-cat-bar { height: 4px; border-radius: 3px; background: #E9EDF3; overflow: hidden; }
.quiz-cat-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.quiz-cat.is-empty .quiz-cat-bar { visibility: hidden; }
.quiz-cat-hint { font-size: 11.8px; color: var(--text-4); }

/* --- 工具详情的「四类实战教程」 --- */
/* 四列等宽而不是一列长列表：四类教程是并列的四种落地阶段，
   竖排会让人误以为要先看完部署才能看优化。窄屏自动折成两列/一列。 */
.guide-panel {
  margin: 22px 0 26px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.guide-panel-head { margin-bottom: 16px; }
.guide-panel-head h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.guide-panel-head p { font-size: 12.5px; color: var(--text-3); margin: 0; line-height: 1.6; }
.guide-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.guide-col-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; margin-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.guide-col-title {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.8px; font-weight: 600; color: var(--brand-dark);
}
.guide-col-hint { font-size: 11.5px; color: var(--text-4); }
.guide-list { display: flex; flex-direction: column; gap: 4px; }
.guide-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 9px; margin: 0 -9px; border-radius: 8px;
  color: inherit; text-decoration: none;
  transition: background .13s;
}
.guide-item:hover { background: var(--surface-2); }
.guide-item-title {
  font-size: 13px; line-height: 1.55; color: var(--text);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.guide-item:hover .guide-item-title { color: var(--brand-dark); }
.guide-ext {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--text-4); flex: 0 0 auto;
}
.guide-item-sum {
  font-size: 11.8px; color: var(--text-4); line-height: 1.55;
  /* 摘要最多两行：教程名才是主信息，摘要长了会把整列拉得高矮不齐 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- 资源详情的外部下载地址 --- */
.res-links { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.res-links-head {
  font-size: 11.5px; color: var(--text-4);
  margin-bottom: 6px; padding-top: 12px; border-top: 1px solid var(--border);
}
.res-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 8px; margin: 0 -8px; border-radius: 8px;
  color: inherit; text-decoration: none;
  transition: background .13s;
}
.res-link:hover { background: var(--surface-2); }
.res-link-icon { color: var(--text-4); flex: 0 0 auto; }
.res-link:hover .res-link-icon { color: var(--brand); }
.res-link-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.res-link-label {
  font-size: 13px; color: var(--text);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.res-link:hover .res-link-label { color: var(--brand-dark); }
.res-link-kind {
  font-size: 10.5px; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; flex: 0 0 auto;
}
.res-link-note { font-size: 11.5px; color: var(--text-4); line-height: 1.5; }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }.tab {
  border: 0; background: none; cursor: pointer;
  padding: 10px 14px; font-size: 13.5px; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .14s, border-color .14s;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); font-weight: 500; }

.quiz-card { padding: 22px 24px; margin-bottom: 16px; }
.quiz-stem { font-size: 15.5px; line-height: 1.7; margin-bottom: 6px; }
.quiz-stem .qno {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; margin-right: 9px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 12px; font-weight: 600; vertical-align: 1px;
}
.quiz-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 15px; }

.opts { display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 15px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--surface-2);
  cursor: pointer; transition: border-color .14s, background .14s;
  text-align: left; width: 100%;
}
.opt:hover { border-color: var(--brand-border); background: var(--brand-soft); }
.opt.is-picked { border-color: var(--brand); background: var(--brand-soft); }
.opt.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.opt.is-wrong   { border-color: var(--danger); background: var(--danger-soft); }
.opt.is-readonly { cursor: default; }
.opt.is-readonly:hover { border-color: var(--border); background: var(--surface-2); }
.opt.is-readonly.is-correct:hover { border-color: var(--ok); background: var(--ok-soft); }
.opt.is-readonly.is-wrong:hover { border-color: var(--danger); background: var(--danger-soft); }
.opt-mark {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  font-family: var(--font-mono); margin-top: 1px;
}
.opt.is-picked .opt-mark { background: var(--brand); border-color: var(--brand); color: #fff; }
.opt.is-correct .opt-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.opt.is-wrong .opt-mark { background: var(--danger); border-color: var(--danger); color: #fff; }
.opt-text { font-size: 13.8px; line-height: 1.6; padding-top: 1px; }

.verdict {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid; display: flex; flex-direction: column; gap: 9px;
}
.verdict.is-correct { background: var(--ok-soft); border-color: #BCE6D6; }
.verdict.is-wrong   { background: var(--danger-soft); border-color: #F6C8CE; }
.verdict-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.verdict.is-correct .verdict-head { color: #0A7D57; }
.verdict.is-wrong .verdict-head { color: #C01F31; }
.verdict-body { font-size: 13.2px; color: var(--text-2); line-height: 1.7; }
.verdict-body .k {
  font-family: var(--font-mono); font-size: 12.5px;
  background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.07);
  padding: 0 5px; border-radius: 4px; margin: 0 2px;
}

.score-panel { text-align: center; padding: 34px 24px; }
.score-ring {
  width: 132px; height: 132px; margin: 0 auto 20px;
  border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: conic-gradient(var(--brand) calc(var(--pct, 0) * 1%), #E9EDF3 0);
  position: relative;
}
.score-ring::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface);
}
.score-ring-inner { position: relative; z-index: 1; }
.score-ring strong { font-size: 33px; line-height: 1; font-variant-numeric: tabular-nums; }
.score-ring span { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.score-summary { display: flex; justify-content: center; gap: 34px; margin: 22px 0 24px; }
.score-summary div { text-align: center; }
.score-summary strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.score-summary span { font-size: 12px; color: var(--text-3); }

.wrong-item { padding: 18px 20px; }
.wrong-item + .wrong-item { margin-top: 12px; }
.wrong-item header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.wrong-item header .stem { flex: 1; font-size: 14.5px; line-height: 1.65; }
.answer-pair {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0;
  font-size: 12.5px; color: var(--text-3);
}
.answer-pair b { font-family: var(--font-mono); color: var(--danger); font-weight: 600; }
.answer-pair i { font-family: var(--font-mono); color: var(--ok); font-style: normal; font-weight: 600; }
.explain {
  margin-top: 13px; padding: 12px 14px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-2); line-height: 1.75;
}
.explain b { color: var(--text); font-weight: 600; }

.quiz-progress {
  display: flex; align-items: center; gap: 13px; margin-bottom: 18px;
}
.quiz-progress .bar {
  flex: 1; height: 6px; border-radius: 3px; background: #E4E8EF; overflow: hidden;
}
.quiz-progress .bar i {
  display: block; height: 100%; border-radius: 3px; background: var(--brand);
  transition: width .28s ease;
}
.quiz-progress span { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ ⑥ Markdown -- */
.prose { font-size: 14.6px; line-height: 1.85; color: #1F2937; }
.prose > *:first-child { margin-top: 0; }
/* 正文插图：截图宽度不可控，一律收到栏宽内等比缩放，否则长图会把整页撑出横向滚动。 */
.prose img {
  max-width: 100%; height: auto; display: block; margin: 18px auto;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.prose h2 {
  font-size: 19px; margin: 34px 0 13px; padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.prose h3 { font-size: 16.5px; margin: 27px 0 10px; }
.prose h4 { font-size: 15px; margin: 22px 0 8px; }
.prose p { margin: 13px 0; }
.prose ul, .prose ol { margin: 13px 0; padding-left: 23px; }
.prose li { margin: 5px 0; }
.prose li::marker { color: var(--text-4); }
.prose blockquote {
  margin: 16px 0; padding: 11px 17px;
  border-left: 3px solid var(--brand-border);
  background: var(--brand-soft); border-radius: 0 8px 8px 0;
  color: var(--text-2);
}
.prose blockquote p { margin: 5px 0; }
.prose code {
  font-family: var(--font-mono); font-size: 12.9px;
  background: #F0F3F8; border: 1px solid #E2E7F0;
  padding: 1.5px 5px; border-radius: 5px; color: #B4315C;
  word-break: break-word;
}
.prose pre {
  margin: 16px 0; padding: 15px 17px; overflow-x: auto;
  background: #0F1726; border-radius: 10px; border: 1px solid #1D2A44;
}
.prose pre code {
  background: none; border: 0; padding: 0; color: #D6E0F0;
  font-size: 12.8px; line-height: 1.72;
}
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 600; color: #0F172A; }
.prose hr { margin: 26px 0; border: 0; border-top: 1px solid var(--border); }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 600; }

/* ------------------------------------------------------ ⑦ 响应式 -- */
/* 断点依据是顶栏还能不能放下。两级机制配合：
   ① 宽屏放宽容器与间距（下面两条 min-width）；
   ② 空间真不够时由 app.js 按实测宽度先摘计数、再把尾部栏目收进「更多」，
      所以 1200 以下不再需要"猜"某个宽度塞不塞得下。
   固定断点只管搜索框与品牌副标这类结构性收缩。
   1200 收搜索宽度 → 1000 收品牌副标 → 880 搜索折叠成图标 → 700 导航换行。 */

/* 2K / 4K：容器跟着放大。1200px 的正文在 2560 宽屏上两侧各空 680px，
   读起来像一张贴在中间的纸条，顶栏也会被挤在同一条窄带里。 */
@media (min-width: 1600px) {
  :root { --page-w: 1360px; }
  .topbar-inner { padding: 0 28px; }
  .nav { margin-left: 26px; }
  .nav-item { padding: 0 15px; }
  .search { width: 260px; }
  .content { padding-left: 28px; padding-right: 28px; }
}

@media (min-width: 1920px) {
  :root { --page-w: 1480px; }
  .nav-item { padding: 0 17px; }
  .search { width: 288px; }
}

@media (max-width: 1200px) {
  .topbar-inner, .foot-inner { padding-left: 20px; padding-right: 20px; }
  .content { padding-left: 20px; padding-right: 20px; }
  .search { width: 200px; }
  .nav-item { padding: 0 11px; }
}

@media (max-width: 1000px) {
  .search { width: 168px; }
  .brand-text small { display: none; }
  .nav { margin-left: 14px; }
}

/* 搜索折叠：图标常驻，点开后从顶栏下方展开一整行。
   不用遮罩——它只影响自己那一行，遮住页面反而让人以为进了新页面。 */
@media (max-width: 880px) {
  .search { display: none; }
  .topbar .search-toggle { display: inline-flex; }
  .topbar.is-search-open .search {
    display: block;
    position: absolute; left: 16px; right: 16px; top: calc(100% + 8px);
    width: auto; z-index: 61;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-3); padding: 8px;
  }
  .topbar.is-search-open .search input { height: 38px; background: var(--surface-2); }
  .search-suggest { position: absolute; right: 0; left: 0; width: auto; }
  .hero { padding: 28px 24px; }
  .hero h1 { font-size: 23px; }
  .detail-layout { gap: 20px; }
  .content { padding: 22px 16px 48px; }
  .topbar-inner, .foot-inner { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 700px) {
  .topbar { position: sticky; }
  .topbar-inner { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 0; row-gap: 0; }
  .brand { order: 1; padding-bottom: 10px; }
  .topbar-right { order: 2; padding-bottom: 10px; }
  /* 导航独占第二行，横向可滚；活动项由 JS 滚到中间，否则切到靠右栏目时看不见自己在哪 */
  .nav {
    order: 3; flex-basis: 100%; height: 42px;
    margin: 0 -16px; padding: 0 6px;
    border-top: 1px solid var(--border);
  }
  /* 移动端回到"整排横滚"，不启用「更多」：
     手指横滑是这里的肌肉记忆，多一层下拉反而多一次点击。 */
  .nav.is-overflow { overflow-x: auto; overflow-y: hidden; }
  .nav-more { display: none !important; }
  .nav.is-compact .nav-count { display: inline; }
  .nav-item { padding: 0 12px; }
  .nav-item.is-active::after { bottom: 0; }
  .nav-skeleton { margin: auto 8px; }
  .topbar-sep { display: none; }
  .topbar.is-search-open .search { top: calc(100% + 4px); left: 8px; right: 8px; }
  .foot-note { display: none; }
}

@media (max-width: 560px) {
  .brand-text strong { font-size: 14px; }
  .detail-head h1 { font-size: 20px; }
  .page-head h1 { font-size: 19px; }
  .toolbar { gap: 8px; }
  .select { flex: 1; min-width: 132px; }
  .score-summary { gap: 22px; }
  .hero { padding: 24px 20px; }
  .hero-stats { gap: 18px 0; }
  .hero-stat { padding-right: 18px; }
  .hero-stat + .hero-stat { padding-left: 18px; }
}

/* ------------------------------------------------------ ⑧ 订单与服务 -- */
/* 订单页是这个站点里唯一"有状态、有下一步动作"的地方，所以单独一层样式：
   状态色、时间轴、动作区、表单。不与知识库的阅读型样式混在一起，
   免得改阅读排版时把订单按钮一起改了。 */

.mono { font-family: var(--font-mono); font-size: 12px; }
.muted-note { font-size: 12.5px; color: var(--text-3); line-height: 1.7; margin: 0; }
.hint { font-size: 11.5px; color: var(--text-4); font-weight: 400; margin-left: 6px; }

/* --- 状态徽标：与 orders.js 的 tone 一一对应 --- */
.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
}
.status-chip.is-warn   { color: var(--warn);   background: var(--warn-soft);   border-color: #F3DFC0; }
.status-chip.is-info   { color: var(--info);   background: var(--info-soft);   border-color: #DDD6FB; }
.status-chip.is-ok     { color: var(--ok);     background: var(--ok-soft);     border-color: #C6EBDD; }
.status-chip.is-danger { color: var(--danger); background: var(--danger-soft); border-color: #F6C8CE; }
.status-chip.is-muted  { color: var(--text-3); background: var(--surface-2);   border-color: var(--border); }

.tab-count {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark);
  font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums;
}

/* --- 订单卡片 --- */
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-card {
  display: flex; align-items: center; gap: 18px;
  padding: 17px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); color: inherit;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.order-card:hover {
  border-color: var(--brand-border); box-shadow: var(--shadow-2);
  transform: translateY(-1px); color: inherit;
}
.order-card-main { flex: 1; min-width: 0; }
.order-card-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3);
}
.order-type { color: var(--text-2); }
.order-card h3 {
  margin: 8px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.order-card-meta {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12.5px; color: var(--text-3);
}
.order-card-side {
  flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 6px;
}
.order-card-side .amount-tag { font-size: 17px; }
.order-countdown { font-size: 12px; color: var(--warn); }
.order-countdown.is-over { color: var(--danger); }

.amount-tag { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* --- 详情页 --- */
.order-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-title-row h1 { font-size: 23px; line-height: 1.45; }

.status-banner {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
  margin-bottom: 20px;
}
.status-banner.is-warn   { background: var(--warn-soft);   border-color: #F3DFC0; }
.status-banner.is-info   { background: var(--info-soft);   border-color: #DDD6FB; }
.status-banner.is-ok     { background: var(--ok-soft);     border-color: #C6EBDD; }
.status-banner.is-danger { background: var(--danger-soft); border-color: #F6C8CE; }
.status-banner-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.status-banner-main strong { font-size: 14.5px; }
.status-banner-main span { font-size: 13px; color: var(--text-2); }
.status-banner-tips {
  margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.8;
}

.block-title { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.block-head .block-title { margin: 0; }

/* 时间轴：竖线由伪元素画，最后一条不画，避免多出一截断头线 */
.tl { list-style: none; margin: 0; padding: 0 0 0 4px; }
.tl-node { position: relative; padding: 0 0 18px 22px; }
.tl-node:last-child { padding-bottom: 0; }
.tl-node::before {
  content: ''; position: absolute; left: 3px; top: 12px; bottom: 0;
  width: 1.5px; background: var(--border);
}
.tl-node:last-child::before { display: none; }
.tl-dot {
  position: absolute; left: 0; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong); box-shadow: 0 0 0 3px var(--surface);
}
.tl-node.is-current .tl-dot { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tl-label { font-size: 13.5px; font-weight: 500; }
.tl-node.is-current .tl-label { color: var(--brand-dark); }
.tl-time { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* 会话 */
.session-list { display: flex; flex-direction: column; gap: 10px; }
.session-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2);
}
.session-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.session-time { font-size: 12.5px; color: var(--text-3); }
.session-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* 评价 */
.review-score { display: flex; align-items: center; gap: 8px; }
.review-score strong { font-size: 17px; }
.stars { color: #F5A623; letter-spacing: 1px; font-size: 14px; }
.stars i { color: var(--border-strong); font-style: normal; }
.review-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.review-content {
  margin: 0; font-size: 14px; line-height: 1.8; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.review-time { margin-top: 8px; font-size: 12px; color: var(--text-4); }
.review-reply {
  margin-top: 12px; padding: 12px 14px; border-radius: 9px;
  background: var(--surface-2); border-left: 2.5px solid var(--brand-border);
}
.review-reply strong { font-size: 12.5px; color: var(--text-2); }
.review-reply p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; }
.evidence-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* 金额与操作 */
.amount-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-3); }
.amount-value { font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.settle-note {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text-3); line-height: 1.8;
}
.action-stack { display: flex; flex-direction: column; gap: 9px; }

/* --- 表单 --- */
textarea.input { height: auto; padding: 10px 12px; line-height: 1.7; resize: vertical; min-height: 84px; }

.field-row, .form-row { display: grid; gap: 14px; }
.field-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.form-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 18px; }

.chips-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-pick {
  cursor: pointer; background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text-2); transition: all .14s;
}
.chip-pick:hover { border-color: var(--brand-border); color: var(--brand-dark); }
.chip-pick.is-on {
  background: var(--brand-soft); border-color: var(--brand-border);
  color: var(--brand-dark); font-weight: 500;
}
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.form-summary {
  padding: 12px 14px; border-radius: 9px; background: var(--brand-soft);
  color: var(--text-2); font-size: 13px; line-height: 1.7; margin: 0 0 18px;
}
.form-actions { display: flex; gap: 10px; align-items: center; }

.check-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2); margin: 10px 0;
}

.steps, .tips-list {
  margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); line-height: 1.9;
}
.steps li::marker { color: var(--brand); }

.instruction {
  padding: 12px 14px; border-radius: 9px; background: var(--warn-soft);
  font-size: 13px; line-height: 1.75; margin: 0 0 16px; color: var(--text-2);
}

/* --- 支付通道选择 --- */
.pay-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.pay-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 9px;
  font-size: 13.5px; cursor: pointer; transition: border-color .14s, background .14s;
}
.pay-item:hover { border-color: var(--brand-border); background: var(--surface-2); }
.pay-item:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pay-item.is-disabled { opacity: .6; cursor: not-allowed; }
.pay-name { flex: 1; }

/* --- 星级打分 --- */
.star-picker { display: flex; gap: 2px; }
.star-btn {
  border: 0; background: none; cursor: pointer; padding: 0 1px;
  font-size: 22px; line-height: 1; color: var(--border-strong);
  transition: color .12s, transform .12s;
}
.star-btn:hover { transform: scale(1.08); }
.star-btn.is-on { color: #F5A623; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #C12034; border-color: #C12034; color: #fff; }

/* --- 接单大厅 --- */
.hall-list { display: flex; flex-direction: column; gap: 12px; }
.hall-card { display: flex; align-items: center; gap: 20px; padding: 18px 20px; }
.hall-main { flex: 1; min-width: 0; }
.hall-head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.hall-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.hall-desc {
  margin: 8px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hall-meta { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-3); }
.hall-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hall-hint { font-size: 11.5px; color: var(--text-4); }

@media (max-width: 780px) {
  .order-card { flex-direction: column; align-items: stretch; gap: 12px; }
  .order-card-side { text-align: left; flex-direction: row; align-items: center; justify-content: space-between; }
  .hall-card { flex-direction: column; align-items: stretch; }
  .hall-side { align-items: stretch; }
  .hall-side .btn { width: 100%; }
  .session-item { flex-direction: column; align-items: flex-start; }
  .form-actions { flex-direction: column; align-items: stretch; }
}

/* --- 内容投稿 / 我的投稿 --- */
.page-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.muted-note { font-size: 12.5px; color: var(--text-4); line-height: 1.6; margin: 0; }

/* 正文是多行 Markdown，用等宽字体：缩进、命令、代码块在比例字体里会错位，
   而投稿内容九成含命令行。 */
.code-input {
  font-family: var(--font-mono); font-size: 12.8px; line-height: 1.75;
  resize: vertical; min-height: 240px;
}

/* Markdown 编辑器的图片工具条：按钮 + 一句"能粘贴"的提示。
   提示必须写出来——不写的话没人知道可以直接 Ctrl+V。 */
.md-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.md-tools-hint { font-size: 12px; color: var(--text-3); }
.md-tools .btn { gap: 6px; }

/* 拖拽悬停时给输入框一个明确的落点反馈，否则用户不知道松手会不会生效。 */
.code-input.is-drop-target {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(30,94,255,.12);
  background: var(--brand-soft, rgba(30,94,255,.04));
}

/* 上传中：边框呼吸，说明"正在处理"，避免用户以为没反应又贴一次。 */
.code-input[data-md-uploading] { border-style: dashed; }

.contrib-list { display: flex; flex-direction: column; gap: 10px; }
.contrib-row {
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.contrib-main { min-width: 0; }
.contrib-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.contrib-title { font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--text); }
a.contrib-title { text-decoration: none; }
a.contrib-title:hover { color: var(--brand-dark); }
.contrib-meta {
  margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; font-size: 12.3px; color: var(--text-3);
}
/* 驳回原因要能一眼看到，否则用户会以为稿件"消失了" */
.contrib-note {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: var(--danger-soft); border: 1px solid #F6C8CE;
  font-size: 12.5px; line-height: 1.65; color: #8C2230;
  display: flex; align-items: flex-start; gap: 7px;
}
.contrib-note .ic { margin-top: 2px; flex: 0 0 auto; }

/* ====================================================== 运营后台 ====== */

/* 后台是密集的信息界面：行高压到 1.6、字号比正文小一档，
   为的是让「一屏能看几行」而不是「读起来舒服」——运营一天要看几百行。 */
.admin { padding-bottom: 40px; }
.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.admin-kicker {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
  color: var(--brand-dark); background: var(--brand-soft);
  border: 1px solid var(--brand-border); border-radius: 999px;
  padding: 3px 9px; margin-bottom: 8px;
}
.admin-title { font-size: 21px; letter-spacing: -.2px; }
.admin-desc { margin-top: 6px; font-size: 13px; color: var(--text-3); max-width: 68ch; line-height: 1.65; }
.admin-actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; }

.admin-subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px; padding-bottom: 0;
}
.admin-nav-item {
  padding: 8px 12px 10px; border-radius: 8px 8px 0 0;
  font-size: 13px; color: var(--text-3); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-nav-item:hover { color: var(--text); background: var(--surface-2); }
.admin-nav-item.is-active {
  color: var(--brand-dark); font-weight: 600;
  border-bottom-color: var(--brand); background: transparent;
}

/* --- 概览 --- */
.admin-stats {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.admin-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); text-decoration: none;
  transition: border-color .14s, transform .14s;
}
.admin-stat:hover { border-color: var(--brand-border); transform: translateY(-1px); }
.admin-stat-label { font-size: 12.5px; color: var(--text-3); }
.admin-stat-value {
  font-size: 26px; font-weight: 650; line-height: 1.2;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.admin-stat-hint { font-size: 11.8px; color: var(--text-4); }
.admin-stat.is-warn .admin-stat-value { color: #A2601A; }
.admin-stat.is-danger .admin-stat-value { color: #C01F31; }

.admin-cols {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.admin-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.admin-sec-head h2 { font-size: 14.5px; }
.link-sm {
  font-size: 12.3px; color: var(--brand-dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: 3px;
}
.link-sm:hover { text-decoration: underline; }

.admin-mini-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border);
  text-decoration: none;
}
.admin-mini-row:last-child { border-bottom: 0; }
.admin-mini-row:not(.is-static):hover .admin-mini-title { color: var(--brand-dark); }
.admin-mini-title {
  font-size: 13px; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-mini-meta { font-size: 11.8px; color: var(--text-4); white-space: nowrap; }
.is-danger { color: #C01F31; }

/* --- 列表 / 表格 --- */
.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 15px 18px;
}
.admin-row-main { min-width: 0; }
.admin-row-title {
  font-size: 14.5px; font-weight: 600; line-height: 1.5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.admin-row-meta {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12.2px; color: var(--text-3);
}
.admin-row-summary {
  margin-top: 7px; font-size: 12.8px; color: var(--text-2);
  line-height: 1.6; max-width: 78ch;
}
.admin-row-ops { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }

.admin-table-wrap { padding: 0; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; font-size: 11.8px; font-weight: 600; color: var(--text-3);
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); white-space: nowrap;
}
.admin-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--border-soft, var(--border));
  vertical-align: top; color: var(--text-2);
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--surface-2); }
.admin-cell-title { font-size: 13.2px; font-weight: 600; color: var(--text); }
a.admin-cell-title { text-decoration: none; }
a.admin-cell-title:hover { color: var(--brand-dark); text-decoration: underline; }
.admin-cell-sub { margin-top: 3px; font-size: 11.8px; color: var(--text-4); }
.admin-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-ops { text-align: right; white-space: nowrap; }
.admin-ops .btn + .btn { margin-left: 6px; }
.admin-mono { font-family: var(--font-mono); font-size: 12.3px; }

/* 后台表格上方的说明条：解释这一步对钱/内容的影响，不是装饰。 */
.admin-hint {
  margin: 0 0 14px; padding: 10px 13px;
  border-radius: var(--radius); background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.3px; color: var(--text-2); line-height: 1.7;
}
.modal-sub { font-size: 12.3px; color: var(--text-3); margin-top: 4px; }

/* 需要人多看一眼的说明（比如"这人还有在途订单"）。 */
.admin-hint-warn {
  background: var(--warn-soft); border-color: #F2DCB8; color: #8A5416;
}

/* 用户详情弹窗的分块。比一长串 label + value 更容易扫，
   也让"订单与资金""专家档案""操作记录"三段在视觉上是并列的。 */
.admin-detail-block { margin-top: 16px; }
.admin-detail-block h3 {
  margin: 0; font-size: 12.4px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-3); text-transform: none;
}
.admin-kv {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 7px 12px; margin: 10px 0 0; font-size: 12.6px; line-height: 1.6;
}
.admin-kv dt { color: var(--text-4); }
.admin-kv dd { margin: 0; color: var(--text-1); word-break: break-word; }

.admin-audit { list-style: none; margin: 8px 0 0; padding: 0; }
.admin-audit-item { padding: 9px 0; border-top: 1px solid var(--border); }
.admin-audit-item:first-child { border-top: 0; padding-top: 4px; }

.admin-filters .input { height: 34px; }
.admin-pager { margin-top: 16px; }
.admin-pager:empty { display: none; }

.admin-note-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px;
  border-radius: 10px; background: var(--info-soft, var(--surface-2));
  border: 1px solid var(--border); font-size: 12.6px; color: var(--text-2);
}
.admin-note-bar span { display: inline-flex; align-items: center; gap: 7px; line-height: 1.6; }

/* --- 编辑器与配置 --- */
.admin-editor { display: flex; flex-direction: column; gap: 16px; }
.admin-editor .field label em { font-style: normal; color: var(--text-4); font-weight: 400; }
.admin-editor-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
.admin-seo { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; }
.admin-seo summary { cursor: pointer; font-size: 12.5px; color: var(--text-3); }
.admin-seo .field { margin-top: 12px; }
.admin-preview {
  margin: 0; max-height: 56vh; overflow: auto;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; color: var(--text-2);
}
.modal.is-wide { max-width: 760px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.admin-form { display: flex; flex-direction: column; gap: 14px; }
.admin-check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.8px; color: var(--text-2); line-height: 1.55; cursor: pointer;
}
.admin-check input { margin-top: 2px; }
.admin-check em { font-style: normal; color: var(--text-4); }

.admin-guides { display: flex; flex-direction: column; gap: 14px; }
.admin-guide-sec { padding: 14px 16px; }
.admin-guide-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.admin-guide-head h3 { font-size: 13.5px; display: flex; align-items: baseline; gap: 8px; }
.admin-guide-head h3 em { font-style: normal; font-size: 11.8px; color: var(--text-4); font-weight: 400; }
.admin-guide-rows { display: flex; flex-direction: column; gap: 10px; }
.admin-guide-row {
  display: grid; gap: 10px; align-items: end;
  grid-template-columns: 128px minmax(200px, 1.4fr) minmax(160px, 1fr) minmax(150px, 1fr) 34px;
  padding: 10px 12px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.admin-guide-row .field label { font-size: 11.5px; }
.admin-guide-row .input, .admin-guide-row .select { height: 34px; font-size: 12.5px; }
/* 外链行比教程行少一列（没有「说明」），地址栏跨两列把宽度吃掉，
   否则删除按钮会落在宽列里、最后一列 34px 空着。 */
.admin-guide-row .admin-grow { grid-column: span 2; }
.admin-guide-row .input[type="number"] { width: 100%; }
.admin-row-del { color: var(--text-4); }
.admin-row-del:hover { color: #C01F31; background: var(--danger-soft); }

/* 后台入口：账号区里的一枚小按钮，用描边而不是实心，
   避免和"登录"抢注意力。 */
.admin-entry { text-decoration: none; }

/* 后台的 tab 用链接而不是 button：刷新后要能回到同一个 tab。 */
.seg a {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 6px;
  font-size: 12.5px; color: var(--text-3); text-decoration: none;
}
.seg a:hover { color: var(--text); }
.seg a.is-active {
  background: var(--surface); color: var(--brand-dark);
  font-weight: 500; box-shadow: var(--shadow-1);
}

@media (max-width: 860px) {
  .admin-guide-row { grid-template-columns: 1fr 1fr; }
  .admin-guide-row .admin-row-del { justify-self: end; }
  .admin-head { flex-direction: column; }
}

/* ======================================================================
   ⑨ 专家与服务方页面
   —— 专家广场 / 专家详情 / 入驻申请 / 专家工作台
   ====================================================================== */

/* --- 广场：筛选与卡片 --- */
.expert-search { display: flex; gap: 8px; }
.expert-search .input { width: 220px; height: 34px; }
.toolbar-count { font-size: 12.5px; color: var(--text-3); }

.expert-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.expert-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 14px;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.expert-card:hover {
  border-color: var(--brand-border); box-shadow: var(--shadow-2); transform: translateY(-1px);
}
.expert-card-head { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.expert-card-title { min-width: 0; flex: 1; }
.expert-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.expert-name { font-size: 15px; font-weight: 600; color: var(--text); }
.expert-name:hover { color: var(--brand); }
.verified {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; color: var(--ok); background: var(--ok-soft);
  border: 1px solid #C6EBDD; border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.expert-card-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip-more { color: var(--text-4); }

.expert-card-stats {
  display: flex; gap: 18px; padding: 11px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.expert-stat { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text-3); }
.expert-stat b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

.expert-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.expert-price { color: var(--text); font-size: 13px; }
.expert-price b { font-size: 17px; font-weight: 650; }
.expert-price span { color: var(--text-3); margin-left: 2px; font-size: 12px; }
.expert-card-actions { display: flex; align-items: center; gap: 8px; }

.recruit {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 22px; padding: 20px 22px; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #EDF2FF, #F6F9FF);
  border: 1px solid var(--brand-border);
}
.recruit h3 { margin: 0 0 5px; font-size: 15px; }
.recruit p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.7; }

/* --- 详情：头部与侧栏 --- */
.expert-hero { display: flex; gap: 18px; align-items: flex-start; }
.expert-hero-main { min-width: 0; flex: 1; }
.expert-hero-main h1 { font-size: 20px; margin: 0; }
.expert-hero-stats {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px;
  font-size: 12px; color: var(--text-3);
}
.expert-hero-stats span { display: flex; flex-direction: column; gap: 3px; }
.expert-hero-stats b { font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.expert-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.skill-table { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
.skill-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; background: var(--surface); }
.skill-line-name { font-size: 13.5px; color: var(--text); }
.skill-line-meta { font-size: 12px; color: var(--text-3); }
.quote-row { display: flex; gap: 12px; margin-top: 16px; }
.quote-item {
  flex: 1; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px;
}
.quote-label { font-size: 11.5px; color: var(--text-3); }
.quote-item b { font-size: 18px; font-weight: 650; }

.expert-side { position: sticky; top: calc(var(--topbar-h) + 16px); }
.expert-side-price { font-size: 26px; font-weight: 650; letter-spacing: -.4px; }
.expert-side-price span { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 3px; }
.expert-side-hint { margin: 10px 0 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.75; }
.expert-side .btn-block { width: 100%; margin-bottom: 8px; }
.expert-side-note {
  display: flex; gap: 6px; align-items: flex-start; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--text-4); line-height: 1.65;
}

/* --- 入驻申请表单 --- */
.apply-section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.apply-section:last-of-type { border-bottom: 0; margin-bottom: 6px; padding-bottom: 4px; }
.apply-section h3 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 6px; font-size: 14.5px; font-weight: 600;
}
.apply-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 12px; font-weight: 600;
}
.apply-hint { margin: 0 0 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.75; }

.picked-skills { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.picked-row {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: minmax(0, 1fr) 96px 76px 22px 28px;
}
.picked-name { font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked-row .select, .picked-row .input { height: 32px; font-size: 12.5px; }
.picked-unit { font-size: 12px; color: var(--text-3); }

.upload-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-inline .hint { font-size: 11.5px; color: var(--text-4); }
.upload-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.upload-list .muted { font-size: 12.5px; }
.cert-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
}
.cert-icon { color: var(--brand); display: inline-flex; }
.cert-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-add {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px dashed var(--border-strong); background: var(--surface);
  font-size: 12.5px; color: var(--text-2);
  transition: border-color .14s, color .14s, background .14s;
}
.upload-add:hover { border-color: var(--brand-border); color: var(--brand-dark); background: var(--brand-soft); }

/* 表单里的提示：正常是浅蓝底，出错转红，成功转绿 */
.form-summary.is-error { background: var(--danger-soft); color: var(--danger); }
.form-summary.is-ok { background: var(--ok-soft); color: #0A7D57; }
.hint.is-error { color: var(--danger); }

/* --- 状态说明条 --- */
.notice { padding: 14px 16px; border-radius: var(--radius); margin-bottom: 18px; border: 1px solid transparent; }
.notice strong { display: block; font-size: 14px; margin-bottom: 5px; }
.notice p { margin: 0 0 4px; font-size: 13px; line-height: 1.75; color: var(--text-2); }
.notice .btn { margin-top: 8px; }
.notice.is-warn { background: var(--warn-soft); border-color: #F2DCB8; }
.notice.is-warn strong { color: #A2601A; }
.notice.is-danger { background: var(--danger-soft); border-color: #F6C8CE; }
.notice.is-danger strong { color: var(--danger); }

/* --- 申请状态页 --- */
.apply-status-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.apply-status-head h2 { margin: 0; font-size: 17px; }
.apply-status .kv { max-width: 460px; }
.apply-status-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-3); line-height: 1.75;
}

/* --- 工作台 --- */
.workbench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.workbench-head .lede { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.workbench-name { color: var(--text-2); }
.workbench-switch { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.workbench-switch .hint { font-size: 12px; color: var(--text-3); }
.switch-label { font-size: 12.5px; color: var(--text-2); }

.switch {
  position: relative; width: 40px; height: 22px; padding: 0;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-2); cursor: pointer; transition: background .16s, border-color .16s;
}
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface);
  box-shadow: var(--shadow-1); transition: transform .16s;
}
.switch.is-on { background: var(--ok); border-color: var(--ok); }
.switch.is-on .switch-knob { transform: translateX(18px); }
.switch:disabled { opacity: .6; cursor: not-allowed; }

.metric-grid {
  display: grid; gap: 12px; margin: 18px 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.metric-card {
  padding: 14px 16px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px;
}
.metric-label { font-size: 11.5px; color: var(--text-3); }
.metric-value { font-size: 21px; font-weight: 650; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.metric-sub { font-size: 11.5px; color: var(--text-4); }
.metric-income .metric-value, .metric-balance .metric-value { color: var(--brand-dark); }

.workbench-tabs { margin-bottom: 14px; }

/* --- 工作台表格 --- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th, .data-table td {
  padding: 9px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.data-table th { font-weight: 500; color: var(--text-3); background: var(--surface-2); font-size: 11.5px; }
.data-table td { color: var(--text-2); }
.data-table td b { color: var(--text); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .mono { font-family: var(--font-mono); font-size: 11.5px; }
.data-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 1040px) {
  .expert-side { position: static; }
}

@media (max-width: 780px) {
  .expert-grid { grid-template-columns: 1fr; }
  .expert-search { width: 100%; }
  .expert-search .input { flex: 1; width: auto; }
  .expert-hero { flex-direction: column; }
  .recruit { flex-direction: column; align-items: flex-start; }
  .workbench-head { flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picked-row { grid-template-columns: minmax(0, 1fr) 84px 66px 22px 26px; }
  .quote-row { flex-direction: column; }
}

/* --------------------------------------------------------- 财务对账 -- */
/* 校验区按"账不平/数据不全/正常"三档着色。不平给红不是装饰：
   这一块唯一的作用就是让人一眼看到钱对不上，灰色提示等于没提示。 */
.admin-checks { display: grid; gap: 8px; }
.admin-check-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.admin-check-item.is-bad  { background: var(--danger-soft); border-color: #F3C3C9; }
.admin-check-item.is-warn { background: var(--warn-soft);   border-color: #EFD6AE; }
.admin-check-mark {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  background: var(--ok-soft); color: var(--ok);
}
.admin-check-item.is-bad  .admin-check-mark { background: var(--danger); color: #fff; }
.admin-check-item.is-warn .admin-check-mark { background: var(--warn);   color: #fff; }
.admin-check-title { font-size: 12.8px; font-weight: 600; color: var(--text); }
.admin-check-msg   { margin-top: 2px; font-size: 12.2px; color: var(--text-2); }
.admin-check-samples { margin-top: 6px; font-size: 12px; color: var(--text-2); }
.admin-check-samples summary { cursor: pointer; color: var(--brand); }
.admin-check-samples ul { margin: 6px 0 0; padding-left: 18px; }
.admin-check-samples li { font-family: var(--font-mono); font-size: 11.6px; line-height: 1.7; }

/* 净现金为负要看得见：那天从平台账上净流出去了 */
.admin-table td.is-neg { color: var(--danger); }
.admin-table td.is-pos { color: var(--ok); }
.admin-filters .btn-ghost { height: 34px; }
.admin-range-hint { margin: 0 0 12px; font-size: 12.2px; color: var(--text-3); }
.admin-money-cards { margin-bottom: 16px; }
.admin-day-table td:first-child { white-space: nowrap; }
.admin-day-table th.num, .admin-day-table td.num { text-align: right; }
.admin-modal-table { overflow-x: auto; }
.admin-modal-table .admin-table { min-width: 560px; }

/* --------------------------------------------------------- 系统配置 -- */
/* 抽佣比例是这一页唯一会直接影响钱的操作，所以数字给到 40px：
   运营点进来第一眼要能确认"现在到底抽多少"，而不是去表格里找。 */
.setting-rate {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 14px;
}
.setting-rate-num {
  flex: none;
  font-size: 40px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.setting-rate-num span {
  font-size: 18px; font-weight: 600; color: var(--text-3); margin-left: 2px;
}
.setting-rate-meta { flex: 1; min-width: 240px; font-size: 12.8px; color: var(--text-2); }
.setting-rate-meta p + p { margin-top: 5px; }

/* 技能按类目分组：每组一张小表，比一张长表少了"这行属于哪个类目"的横向对照。 */
.setting-group + .setting-group { margin-top: 20px; }
.setting-group-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.setting-group-head h3 { font-size: 13px; font-weight: 600; color: var(--text); }

/* --------------------------------------------------------- 专家评价区 -- */
/* 星级用固定的琥珀色，不走语义色板：评分是中性刻度，不是"状态"。
   借用 --warn（橙）会让人第一眼读成"这里有警告"。 */
.rv-stars { display: inline-flex; gap: 1px; align-items: center; }
.rv-star { color: var(--border-strong); }
.rv-star.is-on { color: #F0A020; fill: #F0A020; }

.rv-summary {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px;
  align-items: center;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--border);
}
.rv-score { display: grid; justify-items: center; gap: 6px; }
.rv-score b {
  font-size: 38px; line-height: 1; font-weight: 700;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.rv-dist { display: grid; gap: 5px; }
.rv-dist-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
.rv-dist-label, .rv-dist-num { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rv-dist-num { text-align: right; }
.rv-dist-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rv-dist-bar i { display: block; height: 100%; border-radius: 3px; background: #F0A020; }

.rv-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.rv-item:last-child { border-bottom: 0; }
.rv-item-head { display: flex; align-items: center; gap: 9px; }
.rv-item-who { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.rv-item-who b { font-size: 13.5px; font-weight: 600; }
.rv-item-time { font-size: 11.5px; color: var(--text-4); }
.rv-item-text { margin: 10px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.rv-item-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rv-reply {
  margin-top: 10px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  border-left: 2px solid var(--brand-border);
}
.rv-reply b { font-size: 12px; color: var(--brand); font-weight: 600; }
.rv-reply p { margin: 4px 0 0; font-size: 13px; }

[data-more-reviews] { margin-top: 14px; }

@media (max-width: 640px) {
  .rv-summary { grid-template-columns: 1fr; gap: 16px; }
  .rv-score { justify-items: start; }
}

/* --------------------------------------------------------- 问答广场 -- */
/* 顶部一块轻量 hero：有数字、有主按钮，但不做成营销大图——
   问答页的转化动作是「提问」，把它压在折线以下就白做了。 */
.qa-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qa-hero-main { flex: 1; min-width: 240px; }
.qa-hero-main h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.qa-hero-main p { margin-top: 6px; font-size: 13.5px; color: var(--text-2); }
.qa-hero-stats { display: flex; gap: 18px; font-size: 12px; color: var(--text-3); }
.qa-hero-stats b {
  display: block; font-size: 20px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.qa-hero-ask { flex: none; }

.qa-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.qa-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2);
  border-radius: var(--radius-sm); }
.qa-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px; border-radius: calc(var(--radius-sm) - 2px);
  font-size: 13px; color: var(--text-2); font-family: inherit;
}
.qa-tab.is-active { background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%); }
.qa-search { display: flex; gap: 8px; margin-left: auto; }
.qa-search .input { width: 240px; }

.qa-list { display: grid; gap: 10px; }
.qa-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.qa-card:hover { border-color: var(--brand-border); box-shadow: 0 2px 10px rgb(0 0 0 / 5%); }
.qa-card-main { flex: 1; min-width: 0; }
.qa-card-title { display: flex; align-items: center; gap: 7px; }
.qa-card-title h2 {
  font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--text);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.qa-solved { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok-soft, #E8F7EE); color: var(--ok, #14803C); }
.qa-card-excerpt {
  margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--text-2);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.qa-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.qa-card-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 12px; color: var(--text-3);
}
.qa-dot { color: var(--border-strong); }
.qa-card-side { flex: none; display: grid; justify-items: end; gap: 6px; min-width: 74px; }
.qa-card-count { text-align: center; }
.qa-card-count b {
  display: block; font-size: 19px; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.qa-card-count.is-hot b { color: var(--brand); }
.qa-card-count span { font-size: 11px; color: var(--text-4); }
.qa-card-views { font-size: 11.5px; color: var(--text-4); }

/* 详情：问题卡 + 回答列表 */
.qa-q-head h1 { font-size: 21px; font-weight: 700; line-height: 1.4; }
.qa-q-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: var(--text-3);
}
.qa-q-body { margin-top: 16px; }
.qa-q-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.qa-answers { margin-top: 16px; }
.qa-answers .block-head { margin-bottom: 4px; }

.qa-answer { padding: 16px 0; border-bottom: 1px solid var(--border); }
.qa-answer:last-of-type { border-bottom: 0; }
.qa-answer.is-accepted {
  margin: 8px -10px; padding: 16px 10px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  border-bottom: 0;
}
.qa-accepted-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--ok, #14803C); margin-bottom: 8px;
}
.qa-a-head { display: flex; align-items: center; gap: 9px; }
.qa-a-who { display: grid; gap: 3px; margin-right: auto; min-width: 0; }
.qa-a-who b { font-size: 13.5px; font-weight: 600; }
.qa-a-sub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-4); }
.qa-badge {
  padding: 1px 6px; border-radius: 4px;
  background: var(--surface-3, #F0F1F3); color: var(--text-3); font-size: 11px;
}
.qa-a-ops { display: flex; align-items: center; gap: 6px; }
.qa-a-body { margin-top: 10px; }
.qa-like { display: inline-flex; align-items: center; gap: 4px; }
.qa-like b { font-variant-numeric: tabular-nums; font-weight: 600; }
.qa-like.is-on { color: var(--brand); border-color: var(--brand-border); }

.qa-answer-form {
  margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border-strong);
}
.qa-answer-form .block-title { font-size: 14px; margin-bottom: 10px; }

/* 提问页的技能选择：可点选的小块，比多选下拉更容易一次点对 */
.qa-skill-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-pick { cursor: pointer; font-family: inherit; }
.chip-pick.is-on { border-color: var(--brand-border); background: var(--brand-soft); color: var(--brand); }

/* 功能收起提示条 */
.notice-bar { margin-bottom: 16px; border-left: 3px solid var(--warn, #D98A00); }
.notice-bar b { font-size: 14px; }
.notice-bar p { margin-top: 6px; }

@media (max-width: 720px) {
  .qa-search { margin-left: 0; width: 100%; }
  .qa-search .input { width: 100%; flex: 1; }
  .qa-card { padding: 14px; }
  .qa-hero { padding: 18px; }
}

/* --- 投稿入口的类型切换 --- */
/* 一个入口两个表单：用户不知道平台内部把内容分成 articles 与 quiz_questions，
   他只知道自己「想交点什么」。所以 tab 是并列的两个链接，不是步骤。 */
.contrib-tabs {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.contrib-tab {
  padding: 7px 18px; border-radius: 8px; text-decoration: none;
  font-size: 13px; font-weight: 500; color: var(--text-3); line-height: 1.5;
  transition: background .15s, color .15s;
}
.contrib-tab:hover { color: var(--text-2); }
.contrib-tab.is-active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-1); font-weight: 600;
}

/* --- 题目录入：选项与答案 --- */
/* 选项行用固定的字母块 + 输入框，读题时"第几项"和"内容"能分开看；
   判断题的选项由系统填写，没有输入框，靠 .is-fixed 去掉悬空感。 */
.q-opt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.q-opt-row { display: flex; align-items: center; gap: 10px; }
.q-opt-key {
  flex: 0 0 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.q-opt-text { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.q-opt-row.is-fixed { padding: 3px 0; }
.q-opt-actions { display: flex; gap: 8px; margin-top: 10px; }

/* 答案区做成整块可点的 label：比"复选框 + 文本"两处目标更好点中。 */
.q-answer-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.q-answer-item {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 13px 7px 10px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  transition: border-color .15s, background .15s;
}
.q-answer-item:hover { border-color: var(--border-strong); }
/* 原生控件留着（键盘可达），但视觉上收进字母块里 */
.q-answer-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.q-answer-item:has(input:checked) {
  background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-dark);
}
.q-answer-item:has(input:focus-visible) { outline: 2px solid var(--brand-border); outline-offset: 2px; }
.q-answer-key {
  flex: 0 0 auto; min-width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); font-size: 11.5px; font-weight: 600;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.q-answer-item:has(input:checked) .q-answer-key { background: var(--brand); color: #fff; }
.q-answer-text {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- 后台工具条与批量导入 --- */
/* 筛选项是"看"，导入/新建是"写"：分成左右两组，别让主按钮混在筛选框里。 */
.admin-toolbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.admin-toolbar .admin-filters { flex: 1 1 auto; }

/* 整批失败时逐行列出问题，所以这块会很长，给个滚动上限免得弹窗被撑出屏幕 */
.admin-import-errors {
  margin-top: 4px; padding: 12px 14px; border-radius: 10px;
  background: var(--danger-soft); border: 1px solid #F6C8CE;
  font-size: 12.6px; line-height: 1.7; color: #8C2230;
  max-height: 240px; overflow: auto;
}
.admin-import-errors ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
.admin-import-errors li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.admin-import-errors .chip { flex: 0 0 auto; }

/* --- 教程集（ToolBook） --- */
/* 教程集是「有顺序的系统路径」，与工具四类教程（散装推荐）语义不同，
   所以视觉上也要分开：这里是阶梯感，那边是卡片墙。 */
.book-block { margin-top: 28px; }
.book-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px;
}
.book-card {
  display: flex; gap: 12px; padding: 14px 16px; text-decoration: none;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.book-card:hover {
  border-color: var(--brand-border); box-shadow: var(--shadow-2); transform: translateY(-1px);
}
.book-cover {
  flex: 0 0 44px; height: 56px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--brand-soft), var(--surface-2));
  color: var(--brand); border: 1px solid var(--brand-border);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.book-main { min-width: 0; flex: 1 1 auto; }
.book-title {
  font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.book-sub {
  margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3);
}
.book-summary {
  margin: 7px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 三个级别用同一条色带上的深浅，不用三种颜色：深浅本身就在表达"深度" */
.book-level {
  padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border);
}
.book-level.is-beginner { background: var(--ok-soft); color: #14803C; border-color: #BFE6CE; }
.book-level.is-advanced { background: var(--info-soft); color: #1D5FA8; border-color: #C3DAF3; }
.book-level.is-expert { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand-border); }

/* 教程集详情：左边正文，右边（下）目录 */
.book-hero { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.book-hero-main { flex: 1 1 320px; min-width: 0; }
.book-hero h1 { margin: 6px 0 0; font-size: 22px; line-height: 1.35; }
.book-hero p { margin: 8px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.75; }
.book-hero-side {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-3);
}
.book-hero-side b { display: block; font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }

/* 目录树：<details> 原生折叠，不引 JS 状态；marker 换成右侧 chevron。 */
.book-toc { display: flex; flex-direction: column; gap: 6px; }
.book-chapter {
  border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--border); overflow: hidden;
}
.book-chapter > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; list-style: none; font-size: 13.8px; font-weight: 600;
  color: var(--text); line-height: 1.5;
}
.book-chapter > summary::-webkit-details-marker { display: none; }
.book-chapter > summary:hover { background: var(--surface-2); }
.book-chapter-no {
  flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.book-chapter-title { flex: 1 1 auto; min-width: 0; }
.book-chapter > summary .ic { flex: 0 0 auto; color: var(--text-4); transition: transform .15s; }
.book-chapter[open] > summary .ic { transform: rotate(180deg); }
.book-chapter-count { font-size: 11.5px; color: var(--text-4); font-weight: 400; }
.book-sections { margin: 0; padding: 4px 14px 12px 46px; list-style: none; }
.book-sec { padding: 7px 0; border-top: 1px dashed var(--border); }
.book-sec:first-child { border-top: 0; }
.book-sec a {
  display: flex; align-items: baseline; gap: 8px; text-decoration: none;
  font-size: 13.2px; color: var(--text-2); line-height: 1.6;
}
.book-sec a:hover { color: var(--brand-dark); }
.book-sec-no { flex: 0 0 auto; font-size: 11.5px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.book-sec-summary { display: block; margin: 2px 0 0 26px; font-size: 12px; color: var(--text-4); }
/* 失效节点（文章被删/下线）后台标红：看不到就改不了 */
.book-sec.is-broken a { color: var(--danger); text-decoration: line-through; }
.book-sec.is-broken .book-sec-no { color: var(--danger); }

/* 后台大纲编辑：等宽 + 行号感，让「# 与 ## 的层级」一眼分组 */
.outline-input { min-height: 340px; }
.outline-warn {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  background: var(--warn-soft); border: 1px solid #F2DCA8;
  font-size: 12.4px; line-height: 1.7; color: #8A5B00;
}
.outline-warn ul { margin: 6px 0 0; padding-left: 18px; }

@media (max-width: 720px) {
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-toolbar .admin-filters { flex-wrap: wrap; }
  .book-hero-side { width: 100%; justify-content: space-between; }
  .book-sections { padding-left: 18px; }
  .q-answer-text { max-width: 160px; }
}

/* 功能开关：被 FLAGS 收起的入口（页脚链接等）用这个类摘掉。 */
.hidden { display: none !important; }

/* ======================================================================
   ⑫ 注册登录与发言权限
   —— 认证弹窗 / 我的账号页 / 后台发言申请
   ====================================================================== */

/* 登录与注册是两件事，做成页签而不是两个入口：
   新用户找"注册"时习惯性先点"登录"，页签能接住这一步。 */
.auth-tabs {
  display: flex; gap: 2px; padding: 3px; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.auth-tab {
  flex: 1 1 0; border: 0; background: none; cursor: pointer;
  padding: 7px 0; border-radius: 6px;
  font-size: 13px; color: var(--text-3);
  transition: background .14s, color .14s;
}
.auth-tab:hover { color: var(--text); }
.auth-tab.is-active {
  background: var(--surface); color: var(--brand-dark);
  font-weight: 500; box-shadow: var(--shadow-1);
}

/* 提示行：跟着操作变化（正在发送 / 已发送 / 出错），所以给固定高度，
   免得文字的增减把下面的按钮顶上顶下。 */
.auth-tip {
  min-height: 18px; margin: 2px 0 12px;
  font-size: 12.3px; line-height: 1.6; color: var(--text-3);
}

/* 「用验证码登录 · 改用手机号」这类退路：是文字按钮，不是次按钮。
   做成按钮会和主按钮抢视觉权重，而它们本来就是少数人才需要点的。 */
.auth-links {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: 12.5px; color: var(--text-4);
}
.auth-links button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--text-2);
}
.auth-links button:hover { color: var(--brand-dark); text-decoration: underline; }
.auth-sep { color: var(--text-4); }

/* 注册页底部说明"注册后是只读账号"。这段话必须留下：
   不说清楚，用户注册完点提问只会看到"需要申请"，以为注册没成功。 */
.auth-note {
  margin: 14px 0 0; padding: 10px 12px;
  border-radius: var(--radius); background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  font-size: 12.2px; line-height: 1.75; color: var(--text-2);
}
.auth-note strong { color: var(--brand-dark); font-weight: 600; }

/* 选填标记：跟标签同一行，字号小一档，不额外占一行。 */
.auth-optional { color: var(--text-4); font-weight: 400; }

/* --- 我的账号 --- */
.me-page { display: grid; gap: 16px; max-width: 760px; }
.me-card { padding: 20px 22px; }
.me-card-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.me-avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); border: 1px solid var(--brand-border);
  color: var(--brand-dark); font-size: 17px; font-weight: 600;
}
.me-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.me-sub { margin-top: 3px; font-size: 12.5px; color: var(--text-3); }

/* 资料行用两列表格而不是 label 堆叠：一眼能横向对比"邮箱是什么、手机号是什么"。 */
.me-rows { margin: 0; display: grid; gap: 0; }
.me-rows > div {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.me-rows > div:last-child { border-bottom: 0; }
.me-rows dt { font-size: 12.5px; color: var(--text-3); }
.me-rows dd { margin: 0; font-size: 13.2px; color: var(--text); word-break: break-all; }
.me-actions { display: flex; gap: 8px; margin-top: 16px; }

.me-hint {
  margin: 0 0 14px; font-size: 13px; line-height: 1.75; color: var(--text-2);
}
.me-form { display: grid; gap: 12px; max-width: 420px; }
.me-form .btn { justify-self: start; }

/* 驳回原因给红条：这是"上次为什么没过"，不是普通提示，必须第一眼看到。 */
.me-reject {
  margin: 0 0 14px; padding: 11px 13px; border-radius: var(--radius);
  background: var(--danger-soft); border: 1px solid #F6C8CE;
}
.me-reject strong { display: block; font-size: 12.3px; color: #C01F31; margin-bottom: 4px; }
.me-reject p { margin: 0; font-size: 12.8px; line-height: 1.7; color: var(--text-2); }

/* --- 后台：申请理由列 --- */
/* 理由可能一句话也可能一段，给个宽度上限，别让某一列把整张表挤歪。 */
.admin-cell-note {
  max-width: 320px; font-size: 12.4px; line-height: 1.7;
  color: var(--text-2); white-space: normal;
}

@media (max-width: 720px) {
  .me-card { padding: 16px; }
  .me-rows > div { grid-template-columns: 80px 1fr; gap: 8px; }
  .me-form { max-width: none; }
}