/* ==========================================================================
   科学教育资源网 · 设计系统
   --------------------------------------------------------------------------
   基调：学术出版物的克制感 —— 衬线标题、细线分隔、克制的色彩。
   配色：深墨（结构）+ 松绿（行动）+ 鎏金（强调/推荐）
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 色彩 */
  --paper:        #f8f6f1;
  --paper-2:      #efece4;
  --surface:      #ffffff;
  --ink:          #0d1a23;
  --ink-soft:     #2b3944;
  --text:         #1b2732;
  --text-2:       #54626d;
  --text-3:       #8a9299;
  --line:         #e4dfd4;
  --line-strong:  #cec7b7;

  --accent:       #14584c;
  --accent-dark:  #0b3d34;
  --accent-soft:  #e7efec;
  --gold:         #b08d57;
  --gold-ink:     #8a6a33;
  --gold-soft:    #f7f0e1;
  --warm:         #9a6a22;
  --warm-soft:    #f8f1e2;
  --danger:       #9b3b2f;
  --danger-soft:  #f9ece9;

  /* 来源可信度分级色 */
  --l5: #14584c;
  --l4: #2f6b8f;
  --l3: #7a6a2f;
  --l2: #8a7a70;

  /* 字体 */
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* 尺度 */
  --maxw: 1240px;
  --maxw-narrow: 780px;
  --radius: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(13, 26, 35, .05);
  --shadow-md: 0 6px 20px -6px rgba(13, 26, 35, .12), 0 1px 3px rgba(13, 26, 35, .05);
  --shadow-lg: 0 22px 48px -16px rgba(13, 26, 35, .20);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  letter-spacing: .01em;
}

p { margin: 0 0 1em; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

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

::selection { background: #cfe6e1; color: var(--ink); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.container-narrow {
  width: 100%;
  max-width: var(--maxw-narrow);
  margin: 0 auto;
  padding: 0 28px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 3. 顶栏 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 246, 241, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* 顶部细金线：一处即可定住整站的调性 */
.site-header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold);
  opacity: .9;
}

.header-inner {
  display: flex; align-items: center; gap: 36px;
  height: 72px;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 31px; height: 31px; flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--serif); font-size: 17.5px; font-weight: 600;
  letter-spacing: .1em;
}
.brand-sub {
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
}

.nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.nav-link {
  position: relative;
  padding: 7px 13px;
  font-size: 14px; color: var(--text-2);
  border-radius: var(--radius);
  text-decoration: none;
  transition: color .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.nav-link.is-active { color: var(--ink); font-weight: 600; }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

.nav-cta {
  margin-left: 10px;
  padding: 7px 16px;
  font-size: 13.5px;
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: var(--radius);
  background: transparent;
  transition: all .18s var(--ease);
  text-decoration: none;
}
.nav-cta:hover { background: var(--ink); color: #fff; text-decoration: none; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 6px 10px;
  color: var(--ink); margin-left: auto;
}

/* ---------- 4. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px;
  font-size: 14px; font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn:disabled,
.btn[disabled] {
  opacity: .34;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.btn-primary:hover { background: #0d151c; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-accent {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

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

.btn-sm { padding: 6px 13px; font-size: 12.5px; }
.btn-block { width: 100%; }

/* ---------- 5. 首页 Hero ---------- */
.hero {
  position: relative;
  padding: 72px 0 60px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: none;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 64px;
  align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-dark); font-weight: 600;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--accent);
}

.hero-title {
  font-size: clamp(30px, 4.1vw, 46px);
  line-height: 1.24;
  letter-spacing: .005em;
  margin-bottom: 22px;
}
.hero-title em {
  font-style: normal;
  color: var(--accent-dark);
  background: none; box-shadow: inset 0 -.42em 0 #d6ece6;
  padding: 0 2px;
}

.hero-lede {
  font-size: 16.5px; line-height: 1.85;
  color: var(--text-2);
  max-width: 560px;
  margin-bottom: 30px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-num {
  font-family: var(--serif); font-size: 25px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
}
.hero-meta-label { font-size: 12px; color: var(--text-3); letter-spacing: .04em; }

/* Hero 右侧：视觉面板 */
.hero-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-panel-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.hero-panel-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hero-panel-body { padding: 8px 0; }
.hero-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--paper-2);
  transition: background .16s var(--ease);
}
.hero-row:last-child { border-bottom: none; }
.hero-row:hover { background: var(--paper); }
.hero-row-idx {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  width: 20px; flex-shrink: 0;
}
.hero-row-main { min-width: 0; flex: 1; display: block; }
.hero-row-title {
  display: block;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.45;
}
.hero-row-sub {
  display: block;
  font-size: 11.5px; color: var(--text-3);
  line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-row-tag {
  font-size: 10.5px; padding: 2px 7px; border-radius: 2px;
  background: var(--accent-soft); color: var(--accent-dark);
  flex-shrink: 0; letter-spacing: .02em;
}

/* ---------- 6. 区块通用 ---------- */
.section { padding: 68px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 36px;
}
.section-title {
  font-size: 26px; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: 12px;
}
.section-title small {
  font-family: var(--sans); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3); font-weight: 600;
}
.section-desc {
  font-size: 14.5px; color: var(--text-2); max-width: 560px;
  margin-top: 10px; margin-bottom: 0;
}

/* ---------- 7. 卡片 ---------- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

/* 双视角入口卡 */
.path-card {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  text-decoration: none;
  color: inherit;
  transition: all .22s var(--ease);
  overflow: hidden;
}
.path-card::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .28s var(--ease);
}
.path-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.path-card:hover::after { transform: scaleY(1); }

.path-icon {
  width: 38px; height: 38px; margin-bottom: 18px;
  color: var(--accent);
}
.path-kicker {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; margin-bottom: 8px;
}
.path-title { font-size: 19px; margin-bottom: 10px; }
.path-desc { font-size: 14px; color: var(--text-2); line-height: 1.75; margin-bottom: 18px; }
.path-list {
  list-style: none; padding: 0; margin: 0 0 20px;
  font-size: 13px; color: var(--text-2);
}
.path-list li {
  position: relative; padding-left: 16px; margin-bottom: 6px;
}
.path-list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 5px; height: 1px; background: var(--line-strong);
}
.path-go {
  font-size: 13px; font-weight: 600; color: var(--accent-dark);
  display: inline-flex; align-items: center; gap: 6px;
}
.path-card:hover .path-go { gap: 10px; }
.path-go span { transition: margin .2s var(--ease); }

/* ---------- 8. 资源卡片 ---------- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.rcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 20px 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.rcard:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.rcard-top {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 10px;
}
.rcard-title {
  font-family: var(--serif); font-size: 16.5px; font-weight: 600;
  line-height: 1.45; color: var(--ink);
  margin: 0 0 3px;
}
.rcard-title a { color: inherit; }
.rcard-title a:hover { color: var(--accent-dark); text-decoration: none; }
.rcard-en {
  font-size: 11.5px; color: var(--text-3); line-height: 1.4;
  letter-spacing: .01em;
}

.rcard-org {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-2);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rcard-org .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

.rcard-desc {
  font-size: 13.5px; line-height: 1.72; color: var(--text-2);
  margin-bottom: 14px;
  flex: 1;
}

.rcard-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}

.rcard-note {
  display: flex; gap: 7px;
  font-size: 11.5px; line-height: 1.65;
  color: var(--warm);
  background: var(--warm-soft);
  border-radius: var(--radius);
  padding: 7px 9px;
  margin-bottom: 12px;
}
.rcard-note svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 3px; }

.rcard-foot {
  display: flex; align-items: center; gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--paper-2);
}

/* 徽标 */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 2.5px 7px;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.5;
}
.badge-l5 { background: var(--accent-soft); color: var(--accent-dark); }
.badge-l4 { background: #e8f0f6; color: var(--l4); }
.badge-l3 { background: #f4f1e4; color: var(--l3); }
.badge-l2 { background: #f2efec; color: var(--l2); }

.badge-access { background: var(--paper-2); color: var(--text-2); font-weight: 500; }
.badge-access.is-free { background: var(--accent-soft); color: var(--accent-dark); }
.badge-access.is-reg { background: var(--warm-soft); color: var(--warm); }
.badge-access.is-sub { background: var(--danger-soft); color: var(--danger); }

.badge-lang {
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--text-3); font-weight: 500;
}

.badge-cat {
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  font-weight: 500;
}
.badge-new {
  background: #eef4fb;
  color: #2f5f8f;
  font-weight: 600;
}

.tagchip:disabled, .tagchip.is-empty {
  opacity: .38;
  cursor: not-allowed;
}

.tag {
  font-size: 11px; color: var(--text-3);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  white-space: nowrap;
}

/* 卡片操作 */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--text-3);
  transition: all .16s var(--ease);
  flex-shrink: 0;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--paper); }
.icon-btn.is-saved { color: var(--warm); border-color: #e8d5b8; background: var(--warm-soft); }
.icon-btn svg { width: 15px; height: 15px; }

.link-out {
  margin-left: auto;
  font-size: 12.5px; font-weight: 600; color: var(--accent-dark);
  display: inline-flex; align-items: center; gap: 5px;
}
.link-out:hover { text-decoration: none; gap: 8px; }
.link-out svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.link-out:hover svg { transform: translate(1px, -1px); }

/* ---------- 9. 资源库页 ---------- */
.page-head {
  padding: 48px 0 34px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.page-head h1 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
.page-head p { font-size: 15px; color: var(--text-2); max-width: 680px; margin: 0; }
.page-head-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 18px; font-size: 12.5px; color: var(--text-3);
}
.page-head-meta span { display: inline-flex; align-items: center; gap: 6px; }

.library-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 40px;
  padding: 34px 0 80px;
  align-items: start;
}

/* 筛选侧栏 */
.filter-panel {
  position: sticky; top: 96px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-right: 6px;
}
.filter-panel::-webkit-scrollbar { width: 5px; }
.filter-panel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.filter-group { margin-bottom: 26px; }
.filter-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  margin-bottom: 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.filter-label button {
  background: none; border: none; padding: 0;
  font-size: 10px; color: var(--text-3); letter-spacing: 0;
  text-transform: none; cursor: pointer;
}
.filter-label button:hover { color: var(--accent-dark); text-decoration: underline; }

.filter-opts { display: flex; flex-direction: column; gap: 2px; }
.filter-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  font-size: 13px; color: var(--text-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
  user-select: none;
}
.filter-opt:hover { background: var(--paper-2); color: var(--ink); }
.filter-opt input { display: none; }
.filter-opt .box {
  width: 13px; height: 13px; flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface);
  position: relative;
  transition: all .14s var(--ease);
}
.filter-opt input:checked + .box {
  background: var(--accent); border-color: var(--accent);
}
.filter-opt input:checked + .box::after {
  content: ""; position: absolute; left: 3.5px; top: 1px;
  width: 4px; height: 7px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}
.filter-opt.is-checked { color: var(--ink); font-weight: 500; }
.filter-opt .count {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* 工具条 */
.library-main { min-width: 0; }

.toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.search-wrap {
  position: relative; flex: 1; min-width: 240px;
}
.search-wrap svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-3); pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 10px 38px 10px 38px;
  font-size: 14px; font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 88, 76, .10);
}
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 3px;
  color: var(--text-3); display: none;
  line-height: 1;
}
.search-clear:hover { color: var(--ink); }
.search-clear.is-visible { display: block; }

.select {
  padding: 10px 30px 10px 12px;
  font-size: 13px; font-family: inherit; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a939d' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,88,76,.10); }

.view-toggle {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.view-toggle button {
  background: none; border: none;
  padding: 9px 11px;
  color: var(--text-3);
  display: flex; align-items: center;
}
.view-toggle button.is-active { background: var(--ink); color: #fff; }
.view-toggle svg { width: 14px; height: 14px; }

.result-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
  margin-bottom: 4px;
  font-size: 13px; color: var(--text-2);
  flex-wrap: wrap;
}
.result-count strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  border: none;
}
.filter-chip button {
  background: none; border: none; padding: 0;
  color: inherit; opacity: .6; line-height: 1;
  display: flex;
}
.filter-chip button:hover { opacity: 1; }

/* 列表视图 */
.resource-grid.is-list {
  grid-template-columns: 1fr;
  gap: 12px;
}
.resource-grid.is-list .rcard {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 20px;
  align-items: center;
}
.resource-grid.is-list .rcard-desc,
.resource-grid.is-list .rcard-tags { display: none; }
.resource-grid.is-list .rcard-top { margin-bottom: 4px; }
.resource-grid.is-list .rcard-org { margin-bottom: 0; }
.resource-grid.is-list .rcard-foot {
  border-top: none; padding-top: 0;
  grid-row: 1 / 3; grid-column: 2;
  align-self: center;
}

/* 空状态 */
.empty-state {
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.empty-state svg { width: 34px; height: 34px; color: var(--line-strong); margin-bottom: 14px; }
.empty-state h3 { font-size: 16px; margin-bottom: 8px; }
.empty-state p { font-size: 13.5px; color: var(--text-2); margin-bottom: 18px; }

/* ---------- 10. 专题包 ---------- */
.collection-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}
.collection-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.collection-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px;
}
.collection-icon {
  width: 34px; height: 34px; color: var(--accent);
}
.collection-audience {
  font-size: 10.5px; letter-spacing: .04em;
  padding: 3px 8px;
  background: var(--paper-2);
  color: var(--text-2);
  border-radius: 2px;
}
.collection-title { font-size: 18px; margin-bottom: 4px; }
.collection-sub {
  font-size: 11.5px; color: var(--accent-dark);
  letter-spacing: .04em; margin-bottom: 12px; font-weight: 500;
}
.collection-desc {
  font-size: 13.5px; line-height: 1.72; color: var(--text-2);
  margin-bottom: 18px; flex: 1;
}
.collection-items {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-2);
}
.collection-pill {
  font-size: 11px; color: var(--text-2);
  padding: 2px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* ---------- 11. 文章 ---------- */
.article-list { display: flex; flex-direction: column; gap: 0; }

.article-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background .18s var(--ease);
}
.article-row:first-child { border-top: 1px solid var(--line); }
.article-row:hover { background: rgba(255,255,255,.6); }

.article-meta-col { font-size: 12px; color: var(--text-3); line-height: 1.9; }
.article-level {
  display: inline-block;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-dark); font-weight: 600;
  margin-bottom: 6px;
}
.article-title { font-size: 20px; line-height: 1.45; margin-bottom: 10px; }
.article-title a { color: var(--ink); }
.article-title a:hover { color: var(--accent-dark); text-decoration: none; }
.article-abstract {
  font-size: 14px; line-height: 1.8; color: var(--text-2);
  margin-bottom: 12px;
  max-width: 720px;
}
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.article-go {
  font-size: 13px; font-weight: 600; color: var(--accent-dark);
  white-space: nowrap; padding-top: 4px;
}

/* 文章正文排版 */
.article-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.article-hero h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.34;
  margin: 14px 0 18px;
}
.article-hero .lede {
  font-size: 16.5px; line-height: 1.85; color: var(--text-2);
  max-width: 720px;
}
.article-hero-meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3);
}

.prose { padding: 48px 0 72px; font-size: 16px; line-height: 1.95; color: var(--text); }
.prose h2 {
  font-size: 23px; margin: 52px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin: 34px 0 12px; }
.prose p { margin-bottom: 1.25em; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--text-3); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote {
  margin: 26px 0;
  padding: 18px 24px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  color: var(--ink-soft);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--paper-2); padding: 1.5px 5px; border-radius: 2px;
}
.prose table {
  width: 100%; border-collapse: collapse;
  margin: 26px 0; font-size: 14px;
  background: var(--surface);
}

.table-wrap {
  overflow-x: auto;
  margin: 26px 0;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.table-wrap table { margin: 0; min-width: 560px; }
.prose th {
  text-align: left; font-weight: 600; font-size: 12.5px;
  letter-spacing: .04em; color: var(--text-2);
  padding: 11px 14px;
  border-bottom: 1.5px solid var(--line-strong);
  background: var(--paper-2);
}
.prose td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose figcaption, .prose .note {
  font-size: 13px; color: var(--text-3); line-height: 1.7;
}

.callout {
  margin: 30px 0;
  padding: 20px 24px;
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  border: 1px solid #cfe4df;
}
.callout-title {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--accent-dark);
  margin-bottom: 8px;
}
.callout p { font-size: 14.5px; margin-bottom: 0; color: var(--ink-soft); }

/* 参考文献 */
.references { margin-top: 16px; padding-left: 0; list-style: none; }
.references li {
  font-size: 13.5px; line-height: 1.8; color: var(--text-2);
  padding-left: 26px; text-indent: -26px;
  margin-bottom: 12px;
}
.references li em { font-style: italic; }

/* 文章目录 */
.toc {
  position: sticky; top: 96px;
  font-size: 13px;
}
.toc-label {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.toc a {
  display: block;
  padding: 5px 0 5px 12px;
  color: var(--text-2);
  border-left: 1px solid var(--line);
  line-height: 1.5;
  transition: all .16s var(--ease);
}
.toc a:hover, .toc a.is-active {
  color: var(--accent-dark);
  border-left-color: var(--accent);
  text-decoration: none;
  padding-left: 14px;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 60px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

/* ---------- 12. 标准页 ---------- */
.level-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 14px;
}
.level-table th {
  text-align: left; padding: 13px 18px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.level-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.7;
}
.level-table tr:last-child td { border-bottom: none; }
.level-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 2px;
}

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  display: flex; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.75;
  color: var(--text-2);
}
.checklist li:last-child { border-bottom: none; }
.checklist .num {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  flex-shrink: 0; padding-top: 4px; font-weight: 600;
}

/* ---------- 13. 页脚 ---------- */
.site-footer {
  background: var(--ink);
  color: #b9c3cc;
  padding: 56px 0 30px;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: #6f7c88; }
.footer-desc {
  font-size: 13px; line-height: 1.8; color: #8b98a4;
  margin: 16px 0 0;
  max-width: 320px;
}
.footer-col h4 {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: #6f7c88; font-weight: 600;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 13px; color: #b9c3cc;
  padding: 4px 0;
  transition: color .16s var(--ease);
}
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding-top: 24px;
  font-size: 12px; color: #6f7c88;
}
.footer-bottom a { color: #8b98a4; }

/* ---------- 14. 弹层与提示 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(21, 32, 41, .45);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.modal-backdrop.is-open { display: flex; animation: fadeIn .18s var(--ease); }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 620px; width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp .24s var(--ease);
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-size: 17px; }
.modal-head p { font-size: 12.5px; color: var(--text-3); margin: 4px 0 0; }
.modal-close {
  background: none; border: none; padding: 4px;
  color: var(--text-3); line-height: 1; flex-shrink: 0;
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 22px 26px; }
.modal-foot {
  padding: 16px 26px 22px;
  display: flex; gap: 10px; justify-content: flex-end;
}

.cite-box {
  font-family: var(--mono);
  font-size: 12.5px; line-height: 1.85;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 14px;
}
.cite-label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  margin-bottom: 8px;
}

.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff;
  font-size: 13.5px;
  padding: 11px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: all .26s var(--ease);
  z-index: 300;
  display: flex; align-items: center; gap: 8px;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 15px; height: 15px; color: #6ee7b7; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* 移动端筛选抽屉 */
.filter-drawer-toggle { display: none; }

/* ---------- 15. 响应式 ---------- */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-panel { max-width: 560px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
}

@media (max-width: 900px) {
  .library-layout { grid-template-columns: 1fr; gap: 24px; }
  .filter-panel {
    position: fixed; inset: 0; top: 0; z-index: 150;
    background: var(--surface);
    max-height: 100vh;
    padding: 24px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
    display: none;
  }
  .filter-panel.is-open {
    display: block;
    transform: translateX(0);
  }
  .filter-drawer-toggle { display: inline-flex; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .article-row { grid-template-columns: 1fr; gap: 10px; }
  .article-meta-col { display: flex; gap: 16px; align-items: center; }
  .article-go { display: none; }
}

@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 18px; }
  .header-inner { height: 58px; gap: 12px; }
  .nav {
    position: absolute; top: 58px; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch;
    padding: 8px 18px 16px;
    gap: 2px;
    display: none;
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: flex; }
  .nav-link { padding: 10px 12px; }
  .nav-link.is-active::after { display: none; }
  .nav-link.is-active { background: var(--paper-2); border-radius: var(--radius); }
  .nav-cta { margin: 8px 0 0; text-align: center; padding: 10px; }
  .nav-toggle { display: inline-flex; }
  .brand-sub { display: none; }

  .hero { padding: 46px 0 40px; }
  .hero-title { font-size: 28px; }
  .hero-lede { font-size: 15px; }
  .hero-meta { gap: 20px; }
  .hero-meta-num { font-size: 21px; }
  .section { padding: 48px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-grid.is-list .rcard { display: block; }
  .resource-grid.is-list .rcard-foot { border-top: 1px solid var(--paper-2); padding-top: 12px; margin-top: 10px; }
  .prose { font-size: 15.5px; padding: 34px 0 56px; }
  .prose h2 { font-size: 20px; margin-top: 40px; }
  .prose table { font-size: 12.5px; }
  .prose th, .prose td { padding: 8px 9px; }
  .level-table { font-size: 12.5px; }
  .level-table th, .level-table td { padding: 9px 10px; }
  .article-hero { padding: 38px 0 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .toolbar { gap: 8px; }
  .search-wrap { min-width: 100%; }
  .view-toggle { display: none; }
}

/* 注意：v2 新增组件的基础样式定义在 15.5 之后，
   其移动端覆盖必须放在本文件末尾的媒体查询里，否则会被源序覆盖。 */

/* ---------- 15.5 用户区 ---------- */
.user-area { position: relative; margin-left: 8px; }
.user-menu { position: relative; }

.user-trigger {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.user-trigger:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }

.user-avatar {
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
  flex-shrink: 0;
}
.user-name { font-size: 13px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.role-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 2px;
  font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.role-super { background: var(--warm-soft); color: var(--warm); }
.role-admin { background: var(--accent-soft); color: var(--accent-dark); }
.role-user  { background: var(--paper-2); color: var(--text-3); }

.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 9px);
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  z-index: 130;
}
.user-menu.is-open .user-dropdown { display: block; animation: slideUp .16s var(--ease); }

.user-drop-head {
  padding: 9px 11px 11px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.user-drop-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.user-drop-mail { font-size: 11.5px; color: var(--text-3); margin-top: 2px; word-break: break-all; }

.user-dropdown a, .user-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 8px 11px;
  font-size: 13px; color: var(--text-2);
  border: none; background: none;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.user-dropdown a:hover, .user-dropdown button:hover {
  background: var(--paper-2); color: var(--ink); text-decoration: none;
}

/* ---------- 15.6 首页标签栏 ---------- */
.filterbar {
  position: sticky; top: 72px; z-index: 80;
  background: rgba(248, 246, 241, .97);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0 15px;
}

.tagrow {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 3px 0;
}
.tagrow-label {
  flex-shrink: 0; width: 58px;
  font-size: 10.5px; letter-spacing: .12em;
  color: var(--text-3); font-weight: 600;
  padding-top: 8px;
  white-space: nowrap;
}
.taglist { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.tagchip {
  padding: 5px 13px;
  font-size: 12.5px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s var(--ease);
  white-space: nowrap;
  line-height: 1.5;
}
.tagchip:hover { border-color: var(--ink); color: var(--ink); }
.tagchip.is-active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.tagchip.is-active:hover { color: #fff; }

/* 「全部」是重置项，常态下不抢视觉 */
.tagchip[data-val=""] {
  background: transparent;
  border-style: dashed;
  color: var(--text-3);
}
.tagchip[data-val=""].is-active {
  background: var(--paper-2);
  border-style: solid;
  border-color: var(--line-strong);
  color: var(--text-2);
}
.tagchip[data-val=""].is-active .cnt { opacity: .55; }

.tagchip .cnt {
  font-size: 10.5px; opacity: .5; margin-left: 5px;
  font-variant-numeric: tabular-nums;
}
.tagchip.is-active .cnt { opacity: .7; }

/* 二级细分：地区 / 数据库类型 */
.drill {
  margin: 8px 0 4px;
  padding: 6px 16px 8px;
  background: var(--paper-2);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  animation: drillIn .22s var(--ease);
}
.drill .tagrow { padding: 3px 0; }
.drill .tagrow-label { color: var(--gold-ink); padding-top: 7px; }
.drill .tagchip { background: transparent; }
.drill .tagchip:hover { background: var(--surface); }
.drill .tagchip.is-active:not([data-val=""]) { background: var(--ink); }
@keyframes drillIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.tagbar-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3);
  flex-wrap: wrap;
}
.tagbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.seg button {
  border: none; background: none;
  padding: 5px 12px;
  font-size: 12px; color: var(--text-2);
  letter-spacing: .02em;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--ink); background: var(--paper-2); }
.seg button.is-active { background: var(--ink); color: #fff; }
.seg button.is-active:hover { background: var(--ink); color: #fff; }

/* ---------- 15.7 分组区块 ---------- */
.group-section {
  padding: 34px 0 10px;
  border-bottom: 1px solid var(--line);
}
.group-section:last-child { border-bottom: none; padding-bottom: 48px; }

.group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.group-title {
  font-size: 21px;
  display: flex; align-items: baseline; gap: 11px;
  border-left: 3px solid var(--gold);
  padding-left: 13px;
  line-height: 1.3;
}
.group-title .en {
  font-family: var(--sans); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.group-count { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.group-count strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.group-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--accent-dark); font-weight: 600;
  margin-top: 16px;
  border: none; background: none; padding: 0;
  cursor: pointer;
}
.group-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 15.8 认证页 ---------- */
.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 440px;
  min-height: calc(100vh - 72px);
}
.auth-side {
  background: var(--ink);
  color: #e8eef2;
  padding: 64px 60px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  overflow: hidden;
}
.auth-side::before {
  content: "";
  position: absolute; inset: 0;
  background-image: none;
}
.auth-side > * { position: relative; }
.auth-side h2 {
  font-family: var(--serif); font-size: 29px; color: #fff;
  line-height: 1.45; margin-bottom: 18px; max-width: 520px;
}
.auth-side p { font-size: 14.5px; line-height: 1.85; color: #9aa8b4; max-width: 420px; }
.auth-roles { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.auth-role-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  font-size: 13px;
}
.auth-role-row .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.auth-role-row b { color: #fff; font-weight: 600; }
.auth-role-row span { color: #7f8d99; }

.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 36px;
  background: var(--surface);
}
.auth-card { width: 100%; max-width: 360px; }
.auth-card h1 { font-size: 24px; margin-bottom: 8px; }
.auth-sub { font-size: 13.5px; color: var(--text-2); margin-bottom: 26px; }

.auth-tabs {
  display: flex; gap: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.auth-tab {
  padding: 0 0 12px;
  font-size: 14.5px; color: var(--text-3);
  border: none; background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .16s var(--ease);
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

.auth-error {
  font-size: 12.5px; color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin-bottom: 14px;
}

/* ---------- 15.9 表单 ---------- */
.field { margin-bottom: 15px; }
.field > label, .field-label {
  display: block;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  margin-bottom: 6px;
}
.field .req { color: var(--danger); margin-left: 2px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"],
.field textarea,
.field select {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,88,76,.10);
  background: var(--surface);
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.7; }
.field-hint { font-size: 11.5px; color: var(--text-3); margin-top: 5px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 多选标签组 */
.chip-select { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-select label {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  font-size: 12.5px; color: var(--text-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  transition: all .14s var(--ease);
  user-select: none;
}
.chip-select label:hover { border-color: var(--ink); color: var(--ink); }
.chip-select input { display: none; }
.chip-select input:checked + span {
  color: var(--accent-dark);
}
.chip-select label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 500;
}

/* ---------- 15.10 管理后台 ---------- */
.admin-layout {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 40px;
  padding: 30px 0 80px;
  align-items: start;
}
.admin-nav { position: sticky; top: 96px; }
.admin-nav-group { margin-bottom: 22px; }
.admin-nav-label {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  padding: 0 12px; margin-bottom: 8px;
}
.admin-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  font-size: 13.5px; color: var(--text-2);
  border-radius: var(--radius);
  transition: all .14s var(--ease);
}
.admin-nav a:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.admin-nav a.is-active {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.admin-nav .nav-cnt {
  font-size: 11px; color: var(--text-3);
  background: var(--paper-2);
  padding: 1px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.admin-nav a.is-active .nav-cnt { background: var(--accent-soft); color: var(--accent-dark); }

.admin-panel { min-width: 0; }
.admin-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}
.admin-head h1 { font-size: 24px; }
.admin-head p { font-size: 13.5px; color: var(--text-2); margin: 6px 0 0; max-width: 620px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin-bottom: 26px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 17px 19px;
}
.stat-num {
  font-family: var(--serif);
  font-size: 27px; font-weight: 600; color: var(--ink);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.stat-delta { font-size: 11px; color: var(--accent-dark); margin-top: 5px; }

.panel-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.panel-box h3 {
  font-size: 15px; margin-bottom: 4px;
}
.panel-box .panel-desc {
  font-size: 12.5px; color: var(--text-3); margin-bottom: 18px;
}

/* 柱状图 */
.chart { display: flex; align-items: flex-end; gap: 9px; height: 132px; padding-top: 8px; }
.chart-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; height: 100%; }
.chart-fill {
  width: 100%; background: var(--accent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height .35s var(--ease);
}
.chart-col.is-today .chart-fill { background: var(--warm); }
.chart-x { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.chart-y { font-size: 10.5px; color: var(--ink); font-weight: 600; }

/* 排行条 */
.rank-list { display: flex; flex-direction: column; gap: 9px; }
.rank-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.rank-name { width: 130px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-bar { flex: 1; height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.rank-num { width: 34px; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 队列条目 */
.queue-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 11px;
}
.queue-item:last-child { margin-bottom: 0; }
.queue-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.queue-title { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.queue-url { font-size: 11.5px; color: var(--accent-dark); word-break: break-all; margin-top: 2px; }
.queue-desc { font-size: 13px; color: var(--text-2); line-height: 1.7; margin: 8px 0 10px; }
.queue-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.queue-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.status-pill {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 2px;
}
.st-pending { background: var(--warm-soft); color: var(--warm); }
.st-approved { background: var(--accent-soft); color: var(--accent-dark); }
.st-rejected { background: var(--danger-soft); color: var(--danger); }

/* 表格 */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); font-weight: 600;
  padding: 9px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table td {
  padding: 11px 10px; border-bottom: 1px solid var(--paper-2);
  color: var(--text-2); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .cell-title { color: var(--ink); font-weight: 500; }

.empty-mini {
  padding: 40px 20px; text-align: center;
  font-size: 13.5px; color: var(--text-3);
}

.notice-bar {
  display: flex; gap: 10px;
  padding: 12px 15px;
  background: var(--warm-soft);
  border: 1px solid #ecd9bd;
  border-radius: var(--radius);
  font-size: 12.5px; line-height: 1.7;
  color: #7a4d14;
  margin-bottom: 20px;
}
.notice-bar svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* ---------- 15.11 v2 组件的移动端覆盖 ----------
   这些组件的基础样式定义在 15.5–15.10，源序晚于 1219 行的媒体查询，
   因此移动端覆盖必须放在这里，否则会被基础规则覆盖。 */
@media (max-width: 720px) {
  /* 用户区 */
  .user-area { margin-left: 0; width: 100%; }
  .user-menu { width: 100%; }
  .user-trigger { width: 100%; justify-content: flex-start; border-radius: var(--radius); padding: 7px 10px; }
  .user-name { display: none; }
  .role-badge { display: none; }
  .user-dropdown {
    position: static; width: 100%; margin-top: 8px;
    box-shadow: none; border: 1px solid var(--line);
  }

  /* 认证页 */
  .auth-wrap { grid-template-columns: 1fr; min-height: auto; }
  .auth-side { display: none; }
  .auth-main { padding: 36px 20px 48px; min-height: calc(100vh - 58px); }
  .auth-card { max-width: 100%; }

  /* 首页筛选条 */
  .filterbar { position: static; top: auto; padding: 12px 0 14px; }
  .tagrow { flex-direction: column; align-items: stretch; gap: 6px; }
  .tagrow-label { width: auto; padding-top: 0; }
  .taglist { flex-wrap: wrap; gap: 6px; }
  .tagchip { font-size: 12px; padding: 4px 10px; }
  .group-title { font-size: 17px; }

  /* 管理后台 */
  .admin-layout { grid-template-columns: 1fr; gap: 22px; }
  .admin-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .admin-nav-group { margin-bottom: 0; display: flex; gap: 6px; align-items: center; }
  .admin-nav-label { display: none; }
  .admin-nav a { white-space: nowrap; padding: 7px 11px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .rank-name { width: 90px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- 15.12 极简资源卡片与悬浮详情 ---------- */
.resource-grid-mini { gap: 10px; }

.rcard-mini {
  display: flex;
  flex-direction: row;          /* 覆盖 .rcard 的纵向排列 */
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.rcard-mini:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.rm-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rm-name:hover { color: var(--accent-dark); text-decoration: none; }

.rm-out {
  width: 12px; height: 12px;
  margin-left: 5px;
  opacity: 0;
  vertical-align: -1px;
  transition: opacity .15s var(--ease);
}
.rcard-mini:hover .rm-out { opacity: .5; }

/* 分级徽章 */
.lv {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.5;
}
.lv-5 { background: var(--accent-soft); color: var(--accent-dark); }
.lv-4 { background: #e8f0f6; color: #2f6b8f; }
.lv-3 { background: #f4f1e4; color: #7a6a2f; }
.lv-2 { background: #f2efec; color: #8a7a70; }
.lv-1 { background: #f2efec; color: #8a7a70; }

.rm-new {
  flex-shrink: 0;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--warm-soft);
  color: #7a4d14;
  border: 1px solid #ecd9bd;
}

/* 悬浮详情 */
.rcard-tip {
  position: fixed;
  z-index: 300;
  width: max-content;
  max-width: 340px;
  padding: 14px 16px 15px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
  pointer-events: none;
}
.rcard-tip.is-open { opacity: 1; visibility: visible; transform: none; }

.tip-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.tip-title {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45;
}
.tip-desc {
  font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  margin: 0 0 10px;
}
.tip-rows {
  display: grid; gap: 5px;
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.55;
}
.tip-rows > div { display: flex; gap: 10px; }
.tip-rows dt {
  flex-shrink: 0;
  width: 56px;
  color: var(--text-3);
}
.tip-rows dd { margin: 0; color: var(--text-2); }

.tip-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tip-tags span {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--paper-2);
  color: var(--text-3);
}
.tip-note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  line-height: 1.6;
  color: #7a4d14;
}

/* 页脚访问量 */
.footer-visits { font-variant-numeric: tabular-nums; }
.footer-visits b { color: rgba(255,255,255,.86); font-weight: 600; }

/* 手机号 + 验证码 */
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row input { flex: 1; min-width: 0; }
.code-row .btn { flex-shrink: 0; }

/* ---------- 15.13 后台标签管理 ---------- */.tag-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.tag-group-head h3 {
  font-size: 14px; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.tag-group-cnt {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400; color: var(--text-3);
}
.tag-add { display: flex; align-items: center; gap: 6px; }

.tag-edit {
  width: 132px;
  padding: 5px 9px;
  font-family: inherit; font-size: 12.5px; color: var(--text);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.tag-edit:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,88,76,.10);
}
.tag-edit-en { width: 112px; font-family: var(--mono); font-size: 11.5px; }

.tag-name { font-weight: 500; }
.tag-en {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .02em;
  color: var(--text-3);
}

/* ---------- 15.14 首页特别推荐位 ---------- */
#promoBand { margin-top: 26px; }
#promoBand[hidden] { display: none; }

.promo-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.promo-label {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-ink);
  display: inline-flex; align-items: center; gap: 9px;
}
.promo-label::before { content: ""; width: 16px; height: 1px; background: var(--gold); }

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

.promo-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.promo-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
  border-top-color: var(--gold-ink);
}
.promo-badge {
  font-size: 9.5px; letter-spacing: .14em; font-weight: 600;
  color: var(--gold-ink); text-transform: uppercase;
}
.promo-title {
  font-family: var(--serif); font-size: 15.5px; font-weight: 600;
  color: var(--ink); line-height: 1.45;
}
.promo-desc { font-size: 12.5px; line-height: 1.65; color: var(--text-2); }

/* ---------- 15.15 后台：资源库 ---------- */
.admin-head-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.admin-toolbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.admin-toolbar-cnt {
  margin-left: auto; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.search-input.is-plain { padding-left: 12px; padding-right: 12px; }
.select-sm { padding: 6px 28px 6px 10px; font-size: 12.5px; }

.nowrap { white-space: nowrap; }
.dash { color: var(--text-3); }

.res-table td { vertical-align: top; }
.res-table .btn-sm { padding: 4px 8px; font-size: 11.5px; }
.res-table th, .res-table td { padding-left: 8px; padding-right: 8px; }
.cat-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.res-name-line { display: flex; align-items: center; gap: 7px; }
.res-link { color: var(--ink); font-weight: 500; line-height: 1.5; }
.res-link:hover { color: var(--accent-dark); }
.res-org { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }

.mini-tag {
  display: inline-block;
  font-size: 11px; line-height: 1.65;
  padding: 0 7px; margin: 1px 3px 1px 0;
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--text-2);
  white-space: nowrap;
}
.mini-tag.is-cat { background: var(--accent-soft); color: var(--accent-dark); font-weight: 500; }
.mini-tag.is-more { background: transparent; color: var(--text-3); padding: 0 2px; }
.cell-tags { max-width: 210px; white-space: normal; }

.plain-list {
  display: inline-block;
  max-width: 96px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.res-detail > td { background: var(--paper); padding: 0 !important; }
.res-detail-inner { padding: 18px 20px 20px; border-left: 2px solid var(--gold); }
.res-detail-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 9px 24px; margin: 0 0 12px;
  font-size: 12.5px;
}
.res-detail-grid > div { display: flex; gap: 10px; }
.res-detail-grid dt { flex-shrink: 0; width: 62px; color: var(--text-3); }
.res-detail-grid dd { margin: 0; color: var(--text-2); line-height: 1.65; }
.res-apa { font-size: 12px; color: var(--text-3); margin: 0 0 5px; word-break: break-all; line-height: 1.6; }
.res-apa b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.res-apa a { color: var(--accent-dark); }

/* ---------- 15.16 后台：纠错反馈 ---------- */
.fb-item { padding: 16px 0; border-bottom: 1px solid var(--paper-2); }
.fb-item:last-child { border-bottom: none; padding-bottom: 0; }
.fb-item.is-open { border-left: 2px solid var(--warm); padding-left: 14px; }
.fb-item-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.fb-type { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fb-target {
  font-size: 11.5px; color: var(--accent-dark);
  background: var(--accent-soft); padding: 1px 7px; border-radius: 2px;
}
.fb-detail { font-size: 13px; line-height: 1.75; color: var(--text-2); margin: 0 0 8px; }
.fb-meta { font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.fb-item-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }

/* ---------- 15.17 后台：推荐位编辑 ---------- */
.promo-slot-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.promo-slot-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.promo-slot-ops { display: flex; align-items: center; gap: 14px; }
.check-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.check-inline input { accent-color: var(--accent); }
.promo-slot .form-row { margin-bottom: 0; }
.promo-slot textarea { min-height: 64px; }

/* ---------- 15.18 后台：统计图表补充 ---------- */
.chart-tall { height: 172px; }
.chart-hours { height: 108px; gap: 3px; }
.chart-hours .chart-x { font-size: 9px; }
.panel-box-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-box-head h3 { margin: 0; }
.panel-meta { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---------- 15.19 v4 组件的移动端覆盖 ---------- */
@media (max-width: 900px) {
  .promo-grid { grid-template-columns: 1fr; }
  .res-detail-grid { grid-template-columns: 1fr 1fr; }
  .chart-hours { gap: 2px; }
}

@media (max-width: 720px) {
  /* 移动端：每个维度单行横向滚动，避免筛选区把资源挤出首屏 */
  .taglist {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .taglist::-webkit-scrollbar { display: none; }
  .tagchip { flex-shrink: 0; }
  .tagrow { gap: 6px; }

  .drill { padding: 4px 12px 8px; margin: 6px 0 2px; }
  .group-title { font-size: 18px; padding-left: 11px; gap: 9px; }
  .group-title .en { font-size: 9px; }
  .promo-grid { grid-template-columns: 1fr; }
  .promo-card { padding: 14px 16px; }
  .res-detail-grid { grid-template-columns: 1fr; gap: 7px; }
  .res-detail-inner { padding: 14px 14px 16px; }
  .admin-toolbar { padding: 12px 14px; }
  .admin-toolbar .search-input.is-plain { max-width: 100% !important; }
  .admin-toolbar-cnt { margin-left: 0; }
  .admin-toolbar .select { flex: 1; min-width: 0; }
  .chart-tall { height: 140px; }
  .chart-hours { height: 92px; }
  .chart-x { font-size: 9px; }
  .chart-y { font-size: 9.5px; }
  .panel-box-head { padding: 16px 16px 12px; }
  .fb-item.is-open { padding-left: 12px; }
}

/* ---------- 16. 打印 ---------- */
@media print {
  .site-header, .site-footer, .toolbar, .filter-panel,
  .hero-actions, .nav, .toast, .modal-backdrop, .toc { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .container, .container-narrow { max-width: 100%; padding: 0; }
  .rcard, .card, .collection-card { break-inside: avoid; border: 1px solid #ddd; }
  a { color: #000; text-decoration: none; }
  .prose { padding: 0; }
}

/* ---------- 17. 无障碍与动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   18. v5 组件：筛选收起 / 卡片元信息 / 图片推荐位 / 纵向标签管理 / 标签审核
   ========================================================================== */

/* ---------- 18.1 筛选栏收起 ---------- */
.filterbar.is-collapsed { padding: 10px 0 12px; }
.filterbar.is-collapsed .tagrow { display: none; }
.filterbar.is-collapsed .tagbar-foot {
  margin-top: 0; padding-top: 0; border-top: none;
}

/* ---------- 18.2 资源卡片元信息 ---------- */
.rm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-body .rm-name { flex: none; }
.rm-meta {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .03em;
  color: var(--gold-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 18.3 图片推荐位 ---------- */
.promo-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.promo-card.is-image { padding: 0; overflow: hidden; }
.promo-thumb {
  display: block; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--paper-2);
}
.promo-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease);
}
.promo-card.is-image:hover .promo-thumb img { transform: scale(1.03); }
.promo-card.is-image .promo-body { padding: 13px 17px 15px; }

/* ---------- 18.4 标签管理（纵向紧凑） ---------- */
.tag-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tag-card { padding: 0; overflow: hidden; }

.tag-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.tag-card-head h3 {
  font-size: 13.5px; margin: 0;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: .02em;
}

.tag-rows {
  list-style: none; margin: 0; padding: 2px 0;
  max-height: 460px; overflow-y: auto;
}
.tag-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}
.tag-row:last-child { border-bottom: none; }
.tag-row:hover { background: var(--paper); }
.tag-row.is-editing { background: var(--gold-soft); }

.tag-idx {
  font-style: normal; font-family: var(--mono);
  font-size: 10px; color: var(--text-3);
  width: 16px; flex-shrink: 0; text-align: right;
}
.tag-name {
  flex: 1; min-width: 0;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag-en {
  flex-shrink: 0; max-width: 84px;
  font-family: var(--mono); font-size: 10px;
  color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag-use {
  flex-shrink: 0; min-width: 26px; text-align: center;
  font-family: var(--mono); font-size: 10.5px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
}
.tag-use.is-zero { background: transparent; color: var(--text-3); }

.tag-ops {
  flex-shrink: 0; display: flex; gap: 2px;
  opacity: .3; transition: opacity .15s var(--ease);
}
.tag-row:hover .tag-ops,
.tag-row.is-editing .tag-ops { opacity: 1; }

.tag-row .tag-edit { width: 92px; }
.tag-row .tag-edit-en { width: 72px; }
.tag-card-head .tag-edit { width: 116px; }

/* ---------- 18.5 标签审核 ---------- */
.review-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.review-item:last-child { border-bottom: none; }
.review-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.review-tag {
  font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-ink);
}
.review-res { font-size: 12.5px; color: var(--text-2); }
.review-by { font-size: 11.5px; color: var(--text-3); }
.review-ops { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- 18.6 编辑弹层：待审标签 ---------- */
.ed-pending { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-pending-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 5px 3px 10px;
  font-size: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: var(--gold-soft);
}

/* ---------- 18.7 资源表：期刊信息 ---------- */
.res-journal {
  display: inline-block; margin-top: 3px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em;
  color: var(--gold-ink);
}
.res-journal.is-pending { color: var(--warm); }

/* ---------- 18.8 表单标签旁的分级说明链接 ---------- */
.label-link {
  margin-left: 8px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  color: var(--accent-dark);
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
.label-link:hover { text-decoration: none; color: var(--ink); }

/* ---------- 18.9 （已移除）首页报头 ---------- */

/* ---------- 18.10 窄屏 ---------- */
@media (max-width: 980px) {
  .tag-cols { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .promo-card.is-image .promo-body { padding: 12px 14px 14px; }
  .tag-rows { max-height: none; }
  .tag-row .tag-edit { width: 84px; }

  .review-item { flex-direction: column; align-items: flex-start; gap: 9px; }
  .review-ops { width: 100%; }
  .review-ops .btn { flex: 1; }
}

/* ---------- 18.11 资源编辑弹层 ---------- */
.modal-editor { width: min(780px, calc(100vw - 40px)); max-height: 88vh; }
.modal-editor .modal-body { max-height: calc(88vh - 132px); overflow-y: auto; }

.ed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.field.span-2 { grid-column: 1 / -1; }

.chip-select-sm label { padding: 4px 9px; font-size: 12px; }
.chip-select-sm label span { font-size: 12px; }

/* ---------- 18.12 发送邮件 ---------- */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.scope-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px; color: var(--text);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.scope-item:hover { border-color: var(--line-strong); }
.scope-item input { margin: 0; accent-color: var(--accent); }
.scope-item b {
  margin-left: auto;
  font-family: var(--mono); font-size: 11.5px; font-weight: 400;
  color: var(--text-3);
}
.scope-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.scope-item:has(input:checked) b { color: var(--accent-dark); }

.mail-preview {
  margin-top: 12px; padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mail-preview-head { font-size: 12px; color: var(--text-2); }
.mail-preview-head b { color: var(--ink); font-family: var(--mono); }
.mail-preview-head.is-empty { color: var(--text-3); }
.mail-preview-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mail-preview-list span {
  font-family: var(--mono); font-size: 10.5px;
  padding: 2px 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
}
.mail-preview-list .is-more { color: var(--text-3); border-style: dashed; }
.mail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 720px) {
  .ed-grid { grid-template-columns: 1fr; }
  .scope-grid { grid-template-columns: 1fr; }
  .modal-editor { width: calc(100vw - 20px); }
}

/* ---------- 18.13 视觉微调：让金色成为唯一的强调色 ---------- */
.nav-link.is-active::after { background: var(--gold); height: 2px; }
.nav-link.is-active { font-weight: 600; }

/* 筛选行之间的分隔改为极淡的点线，减少横线噪音 */
.tagrow + .tagrow { border-top: 1px dotted rgba(13,26,35,.07); margin-top: 1px; }

/* 分组标题：加金色短竖线，衬线字距略放 */
.group-title { letter-spacing: .02em; }

/* 页脚顶部一道金色细线，与顶栏呼应 */
.site-footer { border-top: 2px solid var(--gold); }

/* 搜索框聚焦时用金色描边，替代默认绿色 */
.search-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,141,87,.12); }

/* 七个维度并存后压缩单行高度，避免筛选栏吃掉首屏 */
.tagrow { padding: 2px 0; }
.tagrow-label { padding-top: 6px; font-size: 10px; }
.tagchip { padding: 4px 10px; font-size: 12px; }
.tagchip .cnt { font-size: 10px; margin-left: 3px; }
.filterbar { padding: 8px 0 10px; }
.tagbar-foot { margin-top: 8px; padding-top: 8px; }

/* 维度名较长时保持单行 */
.tagrow-label { width: 64px; white-space: nowrap; letter-spacing: .06em; }

/* ---------- 18.14 推荐位图片预览 ---------- */
.promo-img-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 4px; padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.promo-img-prev {
  width: 148px; aspect-ratio: 16 / 9; flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.promo-img-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.promo-img-ops label.btn { cursor: pointer; }

@media (max-width: 720px) {
  .promo-img-row { flex-direction: column; align-items: flex-start; }
  .promo-img-prev { width: 100%; }
}

/* ==========================================================================
   19. 视觉重做（v6）
   --------------------------------------------------------------------------
   原则：方形、发丝线、单一强调色、强字号对比、去装饰。
   · 全站取消圆角，改用 1px 发丝线分隔，信息靠留白与字号层级区分
   · 强调色收敛为「墨黑 + 鎏金」，松绿只留给链接与分级徽章
   · 筛选栏改两列网格，六行压成三行；搜索框在筛选栏内可收为图标
   ========================================================================== */

/* ---------- 19.1 令牌收敛 ---------- */
:root {
  --paper:        #f7f6f3;
  --paper-2:      #edeae2;
  --surface:      #fffefc;
  --ink:          #101a21;
  --ink-soft:     #2a353d;
  --text:         #1b242b;
  --text-2:       #5c666d;
  --text-3:       #9aa1a6;
  --line:         #e5e0d5;
  --line-strong:  #d0c9b8;

  --accent:       #16574c;
  --accent-dark:  #0a3a32;
  --accent-soft:  #eaf1ee;
  --gold:         #a98750;
  --gold-ink:     #7c5f2d;
  --gold-soft:    #f6efdf;

  --radius:       0px;
  --radius-lg:    0px;
  --maxw:         1280px;

  --shadow-sm: 0 1px 1px rgba(16, 26, 33, .04);
  --shadow-md: 0 12px 32px -18px rgba(16, 26, 33, .26);
  --shadow-lg: 0 32px 64px -28px rgba(16, 26, 33, .30);
}

body {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .012em;
  background: var(--paper);
}
h1, h2, h3, h4 { letter-spacing: .02em; }
::selection { background: #f0e3c9; color: var(--ink); }

/* ---------- 19.2 顶栏 ---------- */
.site-header {
  background: rgba(247, 246, 243, .93);
  border-bottom: 1px solid var(--line);
}
.site-header::before {
  height: 1px;
  background: var(--gold);
  opacity: .85;
}
.header-inner { height: 76px; gap: 44px; }
.brand-mark { width: 29px; height: 29px; }
.brand-name { font-size: 18px; letter-spacing: .16em; font-weight: 600; }
.brand-sub { font-size: 9px; letter-spacing: .26em; }

.nav { gap: 2px; }
.nav-link {
  padding: 8px 14px;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: var(--text-2);
}
.nav-link:hover { background: transparent; color: var(--ink); }
.nav-link.is-active { font-weight: 500; }
.nav-link.is-active::after {
  left: 14px; right: 14px; bottom: -2px;
  height: 1.5px; background: var(--gold); border-radius: 0;
}
.nav-cta { border-radius: 0; letter-spacing: .06em; }

/* ---------- 19.3 按钮：方形、字距、无位移 ---------- */
.btn {
  border-radius: 0;
  padding: 11px 24px;
  font-size: 13.5px;
  letter-spacing: .08em;
}
.btn-sm { padding: 7px 14px; font-size: 12.5px; letter-spacing: .06em; }
.btn-primary:hover, .btn-accent:hover { transform: none; box-shadow: none; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink-soft); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.icon-btn { border-radius: 0; }

/* ---------- 19.4 筛选栏：两列网格 + 无边框标签 ---------- */
.filterbar {
  top: 76px;
  background: rgba(247, 246, 243, .968);
  border-bottom: 1px solid var(--line);
  padding: 14px 0 12px;
}
.filterbar > .container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  align-items: start;
}
.filterbar .tagbar-foot { grid-column: 1 / -1; }

.tagrow {
  border-top: 0;
  margin: 0;
  padding: 6px 0;
  gap: 10px;
  align-items: baseline;
}
.tagrow + .tagrow { border-top: 0; margin-top: 0; }
.tagrow-label {
  width: auto;
  min-width: 44px;
  padding-top: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--text-3);
  line-height: 2.1;
  white-space: nowrap;
}
.taglist { gap: 1px; }

.tagchip {
  padding: 4px 10px;
  font-size: 12.5px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  letter-spacing: .01em;
}
.tagchip:hover { background: var(--paper-2); border-color: transparent; color: var(--ink); }
.tagchip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 500;
}
.tagchip.is-active:hover { background: var(--ink); color: #fff; }
.tagchip[data-val=""] {
  border-style: solid;
  border-color: transparent;
  background: transparent;
  color: var(--text-3);
}
.tagchip[data-val=""].is-active {
  background: var(--paper-2);
  border-color: transparent;
  color: var(--ink);
}
.tagchip .cnt { font-size: 9.5px; opacity: .4; margin-left: 4px; }
.tagchip.is-active .cnt { opacity: .6; }

.tagbar-foot {
  margin-top: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.tagbar-actions { gap: 4px; }
.tagbar-foot .btn-ghost {
  border-color: transparent;
  padding: 6px 10px;
  color: var(--text-2);
  letter-spacing: .06em;
}
.tagbar-foot .btn-ghost:hover {
  background: var(--paper-2);
  border-color: transparent;
  color: var(--ink);
}

#resultSummary {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.seg { border: 1px solid var(--line); border-radius: 0; background: transparent; }
.seg button {
  padding: 5px 11px;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--text-3);
  background: transparent;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--paper-2); color: var(--ink); }
.seg button.is-active { background: var(--ink); color: #fff; }

/* ---------- 19.5 搜索框：方形，可收为图标 ---------- */
.tagbar-actions .search-wrap { flex: 0 1 268px; min-width: 0; margin-left: 6px; }
.search-input {
  padding: 8px 32px 8px 32px;
  font-size: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface);
}
.search-wrap svg { left: 10px; width: 14px; height: 14px; }
.search-clear { right: 7px; }
.search-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169, 135, 80, .13); }
.search-wrap:focus-within { border-color: transparent; box-shadow: none; }

.search-wrap.is-min { flex: 0 0 34px; width: 34px; }
.search-wrap.is-min .search-input {
  width: 34px;
  padding: 8px 0 8px 31px;
  color: transparent;
  cursor: pointer;
}
.search-wrap.is-min .search-input::placeholder { color: transparent; }
.search-wrap.is-min .search-clear { display: none; }
.search-wrap.is-min svg { left: 10px; color: var(--ink-soft); }

/* ---------- 19.6 资源卡片：无位移、金色顶线 ---------- */
.resource-grid { gap: 20px; }
.rcard {
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 22px 18px;
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.rcard:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: none;
}
.rcard::before {
  content: "";
  position: absolute; left: -1px; top: -1px; right: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--ease);
}
.rcard:hover::before { transform: scaleX(1); }
.rcard-title { font-size: 17px; letter-spacing: .02em; }
.rcard-title a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.rcard-foot { border-top: 1px solid var(--line); padding-top: 12px; }
.rcard-mini { border-radius: 0; }
.badge { border-radius: 0; letter-spacing: .06em; }

/* ---------- 19.7 分组：发丝线 + 金色英文小标 ---------- */
.group-section {
  padding: 36px 0 6px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.group-section:first-child { border-top: 0; }
.group-head { margin-bottom: 20px; }
.group-title {
  font-size: 20px;
  border-left: 0;
  padding-left: 0;
  letter-spacing: .05em;
  gap: 12px;
}
.group-title .en {
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold-ink);
}
.group-count { letter-spacing: .04em; }

/* ---------- 19.8 页头 ---------- */
.page-head {
  padding: 56px 0 30px;
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.page-head p { font-size: 14.5px; line-height: 1.9; color: var(--text-2); }
.page-kicker {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-ink);
}

/* ---------- 19.9 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--gold);
  padding: 64px 0 34px;
}
.footer-grid { gap: 56px; padding-bottom: 44px; }
.footer-col h4 {
  font-size: 10px;
  letter-spacing: .22em;
  color: #7b8894;
  margin-bottom: 16px;
}
.footer-col a { font-size: 12.5px; padding: 5px 0; letter-spacing: .02em; }
.footer-bottom { padding-top: 26px; font-size: 11.5px; letter-spacing: .04em; }

/* ---------- 19.10 关于页三卡 ---------- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 4px 0 0;
}
.about-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 22px 22px;
  background: var(--surface);
  text-decoration: none;
  transition: background .2s var(--ease);
}
.about-card:hover { background: var(--paper); text-decoration: none; }
.about-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.about-card h3 { font-size: 17px; margin: 0; letter-spacing: .03em; }
.about-card p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--text-2); }
.about-more {
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--accent-dark);
}
.about-card:hover .about-more { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 19.11 推荐页：新增标签 ---------- */
.tag-input-row { display: flex; gap: 8px; align-items: stretch; }
.tag-input-row input { flex: 1; min-width: 0; }
.tag-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag-preview:empty { display: none; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 10px;
  font-size: 12px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.tag-chip button {
  border: 0; background: none;
  padding: 0 3px;
  font-size: 14px; line-height: 1;
  color: var(--text-3);
}
.tag-chip button:hover { color: var(--danger); }

/* ---------- 19.12 后台：反馈里的链接 ---------- */
.fb-link-row {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 9px;
  font-size: 12px;
  min-width: 0;
}
.fb-link-label {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--text-3);
}
.fb-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent-dark);
  border-bottom: 1px dotted currentColor;
}
.fb-link:hover { color: var(--ink); text-decoration: none; }
.fb-link-none { color: var(--text-3); }
.fb-link-row.is-empty .fb-link-label { color: var(--line-strong); }

/* ---------- 19.13 后台：维度名与站点文案 ---------- */
.dim-names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}
.dim-name-row { display: flex; align-items: center; gap: 8px; }
.dim-name-key {
  width: 60px; flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text-3);
}
.dim-name-input { width: 88px; }
.dim-name-note {
  flex: 1; min-width: 0;
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.text-actions {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.text-hint { font-size: 11.5px; color: var(--text-3); }
.text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 24px;
}
.text-row { display: flex; align-items: center; gap: 10px; }
.text-row-label {
  width: 128px; flex-shrink: 0;
  font-size: 12px;
  color: var(--text-2);
}
.text-input { width: 100%; min-width: 0; }
.text-input.is-area {
  min-height: 48px;
  padding: 6px 9px;
  font-family: var(--sans);
  line-height: 1.65;
  resize: vertical;
}
.text-row:has(.is-area) { grid-column: 1 / -1; }

/* ---------- 19.14 窄屏 ---------- */
@media (max-width: 1024px) {
  .filterbar > .container { grid-template-columns: 1fr; column-gap: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .text-grid { grid-template-columns: 1fr; }
  .dim-names { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header-inner { height: 60px; gap: 14px; }
  .filterbar { top: 60px; padding: 10px 0 10px; }
  .brand-name { font-size: 16px; letter-spacing: .12em; }
  .brand-sub { display: none; }
  .tagrow { align-items: flex-start; }
  .tagrow-label { width: 40px; padding-top: 5px; }
  .tagbar-actions { width: 100%; }
  .tagbar-actions .search-wrap { flex: 1 1 100%; margin-left: 0; }
  .search-wrap.is-min { flex: 0 0 34px; }
  .page-head { padding: 38px 0 22px; }
  .page-head h1 { font-size: 27px; }
  .group-title { font-size: 18px; }
  .rcard { padding: 18px 18px 15px; }
  .site-footer { padding: 44px 0 26px; }
  .footer-grid { gap: 30px; }
  .text-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .text-row-label { width: auto; }
  .tag-input-row { flex-wrap: wrap; }
}

/* ==========================================================================
   20. v7 视觉重构：墨黑 + 鎏金
   --------------------------------------------------------------------------
   · 顶栏改为深墨色，与深色页脚形成书档，中间留白给内容
   · 强调色收敛为「墨黑 + 鎏金」，深松绿只留给链接与状态
   · 筛选栏改为一排维度标签，悬停展开对应标签面板
   · 补全反馈页此前缺失的样式（fb-card / channel / process）
   ========================================================================== */

/* 20.0 hidden 属性修复：.form-row{display:grid} 等会覆盖 UA 的 [hidden] */
[hidden] { display: none !important; }

/* ---------- 20.1 令牌 ---------- */
:root {
  --paper:        #f7f8fa;
  --paper-2:      #eef0f4;
  --surface:      #ffffff;
  --ink:          #0e1720;
  --ink-soft:     #27313a;
  --text:         #111827;
  --text-2:       #5b6472;
  --text-3:       #98a1ad;
  --line:         #e6e8ec;
  --line-strong:  #d3d7de;
  --gold:         #b08d57;
  --gold-ink:     #7c5e2d;
  --gold-soft:    #f7f1e4;
  --accent:       #0f4c4a;
  --accent-dark:  #0a3533;
  --accent-soft:  #e8efed;
  --radius:       0px;
  --radius-lg:    0px;
  --maxw:         1280px;
  --shadow-sm: 0 1px 1px rgba(15, 27, 33, .05);
  --shadow-md: 0 14px 36px -20px rgba(15, 27, 33, .28);
  --shadow-lg: 0 34px 68px -30px rgba(15, 27, 33, .32);
}
body { background: var(--paper); }

/* ---------- 20.2 顶栏：深墨 ---------- */
.site-header {
  background: var(--ink);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header::before {
  height: 1px;
  background: var(--gold);
  opacity: .75;
}
.header-inner { height: 74px; gap: 40px; }

.brand, .brand:hover { color: #fff; }
.brand-name { color: #fff; font-size: 18px; letter-spacing: .16em; }
.brand-sub { color: rgba(255, 255, 255, .46); font-size: 9px; letter-spacing: .24em; }
.brand-mark { color: var(--gold); }

.site-header .nav-link { color: rgba(255, 255, 255, .66); }
.site-header .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.site-header .nav-link.is-active { color: #fff; font-weight: 500; }
.site-header .nav-link.is-active::after {
  left: 13px; right: 13px; bottom: -1px;
  height: 2px; background: var(--gold); border-radius: 0;
}

.site-header .nav-cta { border-color: rgba(255, 255, 255, .34); color: #fff; }
.site-header .nav-cta:hover { background: #fff; color: var(--ink); border-color: #fff; }
.nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .28); }

.user-trigger {
  border-radius: 0;
  border-color: rgba(255, 255, 255, .30);
  background: transparent;
  color: #fff;
}
.user-trigger:hover { border-color: #fff; box-shadow: none; }
.user-avatar { background: var(--gold); color: var(--ink); }
.user-name { color: #fff; }
.role-badge { border-radius: 0; }
.site-header .role-user { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .82); }
.site-header .role-admin { background: rgba(176, 141, 87, .24); color: #e9d2ab; }
.site-header .role-super { background: rgba(176, 141, 87, .34); color: #f3e3c6; }

/* ---------- 20.3 筛选栏：一排维度 + 悬停面板 ---------- */
.filterbar {
  top: 74px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0;
  box-shadow: 0 1px 0 rgba(15, 27, 33, .03);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.filterbar > .container {
  position: relative;
  display: block;
}

.dimbar-wrap { position: relative; }
.dimbar {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}
.dim-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-size: 13.5px;
  color: var(--text-2);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.dim-tab:hover { color: var(--ink); }
.dim-tab.is-open { color: var(--ink); border-bottom-color: var(--gold); }
.dim-tab.has-value { color: var(--ink); font-weight: 500; }
.dim-tab .dim-val {
  font-size: 12px;
  color: var(--gold-ink);
  max-width: 132px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dim-tab .dim-caret {
  width: 9px; height: 9px;
  opacity: .45;
  transition: transform .18s var(--ease);
}
.dim-tab.is-open .dim-caret { transform: rotate(180deg); opacity: .9; }

.dim-panels {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 60;
  display: none;
  padding: 16px 0 18px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.dim-panels.is-open { display: block; }
.dim-panels .tagrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  margin: 0;
  border: 0;
}
.dim-panels .tagrow + .tagrow { border-top: 1px solid var(--line); }
.dim-panels .tagrow-label {
  width: 52px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-3);
  line-height: 2;
  white-space: nowrap;
}
.dim-panels .taglist { gap: 2px; flex: 1; }
.dim-panels .tagchip { padding: 6px 12px; font-size: 13px; }

.tagbar-foot {
  border-top: 1px solid var(--line);
  margin-top: 0;
  padding: 10px 0;
  gap: 12px;
}
.tagbar-foot .btn-ghost {
  border-color: transparent;
  color: var(--text-2);
  letter-spacing: .06em;
  padding: 6px 10px;
}
.tagbar-foot .btn-ghost:hover { background: var(--paper-2); border-color: transparent; color: var(--ink); }

/* ---------- 20.4 按钮 ---------- */
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-accent { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-accent:hover { background: var(--gold-ink); border-color: var(--gold-ink); }

/* ---------- 20.5 资源卡 ---------- */
.rcard { border: 1px solid var(--line); background: var(--surface); }
.rcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.rcard::before { background: var(--gold); }
.group-section { border-top: 1px solid var(--line); }
.group-title { border-left: 0; padding-left: 0; }
.group-title .en { color: var(--gold-ink); }

/* ---------- 20.6 页头 ---------- */
.page-head { border-bottom: 1px solid var(--line); }
.page-head p { max-width: none; }
.page-kicker { color: var(--gold-ink); }

/* ---------- 20.7 特别推荐：整体缩小 ---------- */
#promoBand { margin-top: 22px; }
.promo-head { margin-bottom: 10px; }
.promo-grid { gap: 10px; }
.promo-card {
  padding: 13px 15px 14px;
  gap: 4px;
  border-top-width: 2px;
}
.promo-card:hover { transform: none; box-shadow: var(--shadow-md); }
.promo-title { font-size: 14px; line-height: 1.4; }
.promo-desc { font-size: 11.5px; line-height: 1.6; }
.promo-badge { font-size: 9px; }

/* 图片位改为「缩略图在左、文字在右」的紧凑横排 */
.promo-card.is-image {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.promo-card.is-image .promo-thumb {
  aspect-ratio: auto;
  height: 100%;
  min-height: 78px;
}
.promo-card.is-image .promo-body {
  padding: 11px 14px;
  justify-content: center;
}

/* ---------- 20.8 页脚 ---------- */
.site-footer { border-top: 1px solid var(--gold); }
.footer-col h4 { color: #7d8a95; }

/* ---------- 20.9 反馈页（此前缺样式） ---------- */
.fb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px 30px 26px;
  margin: 0 0 22px;
}
.fb-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.fb-done {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  padding: 36px 30px 32px;
  text-align: center;
  margin: 0 0 22px;
}
.fb-done-mark {
  width: 46px; height: 46px;
  margin: 0 auto 15px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  color: var(--gold-ink);
}
.fb-done-mark svg { width: 22px; height: 22px; }
.fb-done h3 { font-size: 21px; margin: 0 0 8px; letter-spacing: .04em; }
.fb-done p { font-size: 13px; color: var(--text-2); margin: 0 0 20px; }
.fb-done code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--paper-2);
  padding: 2px 7px;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 22px 0 0;
}
.channel { background: var(--surface); padding: 22px 24px; }
.channel h4 {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 8px;
}
.channel p { font-size: 13px; line-height: 1.8; color: var(--text-2); margin: 0; }
.channel a { color: var(--accent-dark); border-bottom: 1px solid var(--line-strong); }
.channel a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--gold); }

.process {
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.process-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}
.process-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.process-head h3 { font-size: 20px; margin: 0; letter-spacing: .04em; }
.process-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.process-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  background: var(--surface);
}
.process-n {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.process-body strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: .04em;
  margin-bottom: 5px;
}
.process-body p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2); }

/* ---------- 20.10 关于页三卡 ---------- */
.about-card { background: var(--surface); }
.about-card:hover { background: var(--paper); }
.about-card h3 { font-size: 17px; }
.about-more { color: var(--accent-dark); }

/* ---------- 20.11 响应式 ---------- */
@media (max-width: 1024px) {
  .dim-panels { padding: 14px 0 16px; }
  .process-steps { grid-template-columns: 1fr; }
  .channel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header-inner { height: 58px; gap: 12px; }
  .filterbar { top: 58px; }
  .filterbar > .container { padding: 0 18px; }

  /* 移动端导航面板是白底，需把深色顶栏的文字色还原 */
  .site-header .nav { background: var(--surface); }
  .site-header .nav-link { color: var(--text-2); }
  .site-header .nav-link:hover { color: var(--ink); background: var(--paper-2); }
  .site-header .nav-link.is-active { color: var(--ink); background: var(--paper-2); }
  .site-header .nav-cta { border-color: var(--ink); color: var(--ink); }
  .site-header .nav-cta:hover { background: var(--ink); color: #fff; }
  .site-header .user-trigger { color: var(--ink); border-color: var(--line-strong); }
  .site-header .user-name { color: var(--ink); }
  .site-header .user-avatar { background: var(--ink); color: #fff; }

  .dimbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dimbar::-webkit-scrollbar { display: none; }
  .dim-tab { flex-shrink: 0; padding: 12px 13px 10px; }
  .dim-panels { padding: 14px 0 16px; }
  .tagbar-foot { padding: 8px 0; }
  .tagbar-foot .tagbar-actions { width: 100%; }
  .tagbar-actions .search-wrap { flex: 1 1 100%; margin-left: 0; }

  .fb-card { padding: 22px 18px 20px; }
  .fb-done { padding: 28px 18px 26px; }
  .channel { padding: 18px 18px; }
  .process-steps li { padding: 16px 16px; }
  .promo-card.is-image { grid-template-columns: 82px minmax(0, 1fr); }
}

/* ---------- 20.12 推荐页：每个维度下的自定义标签 ---------- */
.tag-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.tag-add-btn {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--gold-ink);
  letter-spacing: .04em;
  cursor: pointer;
}
.tag-add-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.tag-add-input {
  flex: 0 1 220px;
  min-width: 0;
  padding: 5px 9px;
  font-size: 12.5px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
}
.tag-add-input:focus { border-color: var(--gold); outline: none; }

/* ==========================================================================
   21. v8 视觉重构：现代浅色
   --------------------------------------------------------------------------
   · 顶栏由深墨改为浅色毛玻璃，导航改胶囊，整站回到「浅底 + 白卡」的现代版式
   · 建立圆角体系（10 / 16px）与柔和投影，替换此前的直角与硬边
   · 强调色统一为钴蓝，取消鎏金；标题由衬线改无衬线并收紧字距
   · 筛选维度改胶囊标签，展开面板改浮层卡片，左侧维度名重新排版
   · 补齐后台「历史审核 / 退回」所需样式
   ========================================================================== */

/* ---------- 21.1 令牌 ---------- */
:root {
  --paper:        #f7f8fb;
  --paper-2:      #eef1f6;
  --surface:      #ffffff;
  --ink:          #0d1424;
  --ink-soft:     #1f2937;
  --text:         #1a2233;
  --text-2:       #59616f;
  --text-3:       #8b94a3;
  --line:         #e7eaf0;
  --line-strong:  #d5dae3;

  --accent:       #2f4fe0;
  --accent-dark:  #2440bd;
  --accent-soft:  #eef1fe;
  --gold:         #2f4fe0;
  --gold-ink:     #2440bd;
  --gold-soft:    #eef1fe;
  --warm:         #b4590a;
  --warm-soft:    #fff4e6;
  --danger:       #c0322b;
  --danger-soft:  #fdeeec;

  --radius:       10px;
  --radius-lg:    16px;
  --maxw:         1240px;

  --shadow-sm: 0 1px 2px rgba(13, 20, 36, .06);
  --shadow-md: 0 10px 26px -14px rgba(13, 20, 36, .20), 0 2px 6px -2px rgba(13, 20, 36, .06);
  --shadow-lg: 0 30px 64px -28px rgba(13, 20, 36, .30);
}

body {
  background: var(--paper);
  background-image: none;
  font-size: 15px;
  line-height: 1.75;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.012em;
}
::selection { background: #dbe3ff; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- 21.2 顶栏：浅色毛玻璃 + 胶囊导航 ---------- */
.site-header {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header::before { display: none; }
.header-inner { height: 68px; gap: 30px; }

.brand, .brand:hover { color: var(--ink); }
.brand-mark { color: var(--accent); width: 30px; height: 30px; }
.brand-name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.brand-sub { font-size: 9px; letter-spacing: .16em; color: var(--text-3); }

.site-header .nav { gap: 2px; }
.site-header .nav-link {
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--text-2);
  border-radius: 999px;
}
.site-header .nav-link:hover { color: var(--ink); background: var(--paper-2); }
.site-header .nav-link.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.site-header .nav-link.is-active::after { display: none; }

.site-header .nav-cta {
  margin-left: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.site-header .nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-header .nav-toggle { color: var(--ink); border-color: var(--line-strong); border-radius: 9px; }

.site-header .user-trigger {
  border-radius: 999px;
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 4px 11px 4px 4px;
}
.site-header .user-trigger:hover { border-color: var(--accent); box-shadow: none; }
.site-header .user-avatar { background: var(--accent); color: #fff; }
.site-header .user-name { color: var(--ink); }
.site-header .role-badge { border-radius: 999px; }
.site-header .role-user { background: var(--paper-2); color: var(--text-2); }
.site-header .role-admin { background: var(--accent-soft); color: var(--accent-dark); }
.site-header .role-super { background: var(--ink); color: #fff; }

/* ---------- 21.3 筛选栏：胶囊维度 + 浮层卡片 ---------- */
.filterbar {
  top: 68px;
  padding: 8px 0 0;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

.dimbar-wrap { position: static; }
.dimbar {
  align-items: center;
  gap: 4px;
  padding: 2px 0 10px;
}
.dim-tab {
  padding: 7px 14px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.dim-tab:hover { background: var(--paper-2); color: var(--ink); }
.dim-tab.is-open { background: var(--ink); color: #fff; }
.dim-tab.is-open .dim-caret { opacity: .85; }
.dim-tab.has-value { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.dim-tab.has-value.is-open { background: var(--ink); color: #fff; }
.dim-tab .dim-val { font-size: 12px; color: inherit; opacity: .78; }

.dim-panels {
  top: 100%;
  padding: 8px 28px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* 面板内每一行：左侧维度名 + 右侧标签，按栅格对齐 */
.dim-panels .tagrow {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 0 22px;
  padding: 11px 0;
  margin: 0;
  border: 0;
}
.dim-panels .tagrow + .tagrow { border-top: 1px solid var(--line); }
.dim-panels .tagrow-label {
  width: auto;
  min-width: 0;
  padding-top: 5px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
  overflow-wrap: anywhere;
}
.dim-panels .taglist { gap: 6px; flex: none; }
.dim-panels .tagchip { padding: 5px 12px; font-size: 12.5px; }

.tagbar-foot {
  border-top: 1px solid var(--line);
  margin-top: 0;
  padding: 9px 0 11px;
  gap: 12px;
}

/* ---------- 21.4 标签胶囊 ---------- */
.tagchip {
  padding: 5px 13px;
  font-size: 12.5px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
}
.tagchip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.tagchip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tagchip.is-active:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.tagchip[data-val=""] {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--text-3);
}
.tagchip[data-val=""].is-active {
  background: var(--paper-2);
  border-style: solid;
  border-color: var(--line-strong);
  color: var(--text-2);
}
.tagchip:disabled, .tagchip.is-empty { opacity: .38; }
.tagchip .cnt { font-size: 10.5px; opacity: .55; margin-left: 5px; }

/* ---------- 21.5 按钮 ---------- */
.btn { border-radius: 9px; font-weight: 600; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-accent { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-accent:hover {
  background: #1b2540;
  border-color: #1b2540;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-sm { border-radius: 7px; }

/* ---------- 21.6 搜索与分段控件 ---------- */
.tagbar-actions .search-wrap {
  border-radius: 999px;
  border-color: var(--line-strong);
  background: var(--surface);
}
.search-input { border-radius: 999px; border-color: transparent; background: transparent; }
.search-input:focus { border-color: transparent; box-shadow: none; }
.search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 79, 224, .12);
}
.tagbar-foot .btn-ghost { border-color: transparent; color: var(--text-2); }
.tagbar-foot .btn-ghost:hover { background: var(--paper-2); color: var(--ink); border-color: transparent; }

.seg { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 2px; }
.seg button { border-radius: 999px; font-size: 12.5px; padding: 5px 12px; color: var(--text-2); }
.seg button + button { border-left: 0; }
.seg button:hover { background: var(--paper-2); color: var(--ink); }
.seg button.is-active { background: var(--ink); color: #fff; }
.seg button.is-active:hover { background: var(--ink); color: #fff; }

/* ---------- 21.7 资源卡与分组 ---------- */
.rcard, .rcard-mini {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.rcard-mini { padding: 14px 16px; }
.rcard-mini::before { display: none; }
.rcard-mini:hover {
  border-color: #c6cfe6;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.rm-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.rm-name:hover { color: var(--accent); }
.rm-out { opacity: 0; }
.rcard-mini:hover .rm-out { opacity: .45; }

/* 分级徽章：柔和色块 + 圆角 */
.lv { border-radius: 6px; font-size: 10.5px; padding: 2px 7px; }
.lv-5 { background: var(--accent-soft); color: var(--accent-dark); }
.lv-4 { background: #e6f4f1; color: #1c6f63; }
.lv-3 { background: #fdf2e0; color: #8a5a12; }
.lv-2 { background: #eef0f4; color: #5b6472; }
.lv-1 { background: #eef0f4; color: #5b6472; }
.rm-new { border-radius: 6px; border-color: #f2ddc2; }

.group-section { border-top: 1px solid var(--line); padding: 30px 0 8px; }
.group-head { margin-bottom: 16px; }
.group-title { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.group-title .en { font-family: var(--sans); font-size: 10px; letter-spacing: .18em; color: var(--accent); opacity: .8; }
.group-count { font-size: 12px; color: var(--text-3); }
.group-count strong { color: var(--ink); }
.group-more {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 6px 16px;
  font-size: 12.5px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
}
.group-more:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* 悬浮详情卡 */
.rcard-tip { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow-lg); }

/* ---------- 21.8 特别推荐 ---------- */
.promo-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-top-width: 1px;
  background: var(--surface);
}
.promo-card:hover { border-color: #c6cfe6; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.promo-label::before { background: var(--accent); }
.promo-badge { background: var(--accent-soft); color: var(--accent-dark); border-radius: 6px; }
.promo-card.is-image { border-radius: var(--radius); }

/* ---------- 21.9 页头与正文 ---------- */
.page-head { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.page-head h1 { font-size: clamp(26px, 3vw, 33px); letter-spacing: -.02em; }
.page-head p { color: var(--text-2); }
.page-kicker {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--accent);
}
a { color: var(--accent-dark); }
a:hover { text-decoration-color: var(--accent); }

/* ---------- 21.10 表单 ---------- */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"],
.field textarea,
.field select,
.select,
.input,
.tag-add-input { border-radius: 9px; border-color: var(--line-strong); background: var(--surface); }
.field input:focus,
.field textarea:focus,
.field select:focus,
.select:focus,
.tag-add-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 79, 224, .12);
  outline: none;
}
.select { border-radius: 9px; }
.field > label, .field-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chip-select label:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 21.11 页脚 ---------- */
.site-footer {
  background: #0b1120;
  border-top: 0;
  color: rgba(255, 255, 255, .62);
  padding: 56px 0 28px;
}
.footer-grid { border-bottom: 1px solid rgba(255, 255, 255, .08); gap: 44px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: rgba(255, 255, 255, .34); }
.footer-desc { color: rgba(255, 255, 255, .5); }
.footer-col h4 { color: rgba(255, 255, 255, .34); letter-spacing: .14em; }
.footer-col a { color: rgba(255, 255, 255, .62); border-radius: 6px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { color: rgba(255, 255, 255, .34); }
.footer-bottom a { color: rgba(255, 255, 255, .5); }
.footer-visits b { color: rgba(255, 255, 255, .82); }

/* ---------- 21.12 反馈页 / 关于页 ---------- */
.fb-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fb-done { border-radius: var(--radius-lg); border-top: 3px solid var(--accent); box-shadow: var(--shadow-sm); }
.fb-done-mark { border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.fb-done code { border-radius: 6px; background: var(--paper-2); }
.channel-grid, .process-steps { border-radius: var(--radius-lg); overflow: hidden; border-color: var(--line); }
.channel h4, .process-kicker { color: var(--accent); }
.channel a:hover { border-bottom-color: var(--accent); }
.process-n { font-family: var(--sans); font-weight: 600; color: var(--accent); opacity: .55; }
.about-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.about-card:hover { background: var(--surface); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.about-more { color: var(--accent-dark); }

/* ---------- 21.13 后台 ---------- */
.admin-nav a { border-radius: 9px; }
.admin-nav a.is-active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px rgba(47, 79, 224, .16);
}
.admin-nav .nav-cnt { border-radius: 999px; }
.admin-nav a.is-active .nav-cnt { background: var(--accent); color: #fff; }

.panel-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel-box h3 { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.stat-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat-num { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; }
.queue-item { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.queue-title { font-family: var(--sans); font-size: 15.5px; font-weight: 600; }
.queue-url { color: var(--accent-dark); }

.status-pill { border-radius: 999px; }
.badge { border-radius: 6px; letter-spacing: .02em; }
.badge-l5 { background: var(--accent-soft); color: var(--accent-dark); }
.badge-l4 { background: #e6f4f1; color: #1c6f63; }
.badge-l3 { background: #fdf2e0; color: #8a5a12; }
.badge-l2, .badge-l1 { background: #eef0f4; color: #5b6472; }
.badge-access { background: var(--paper-2); color: var(--text-2); }
.badge-cat { background: var(--accent-soft); color: var(--accent-dark); }
.mini-tag { border-radius: 6px; }

/* 审核 / 标签审核 列表 */
.review-item { border-bottom: 1px solid var(--line); }
.review-tag { background: var(--accent-soft); color: var(--accent-dark); }
.review-tag.is-ok { background: #e6f4f1; color: #1c6f63; }
.review-tag.is-no { background: #f2f3f6; color: #7b8492; }
.review-dim {
  font-size: 11px;
  color: var(--text-3);
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.review-res { font-size: 12.5px; color: var(--text-2); }
.panel-more { font-size: 12px; color: var(--text-3); margin: 10px 0 0; }

/* 纠错反馈 */
.fb-item { border-bottom: 1px solid var(--line); }
.fb-item.is-open {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  border-radius: 0 8px 8px 0;
  background: rgba(47, 79, 224, .05);
}
.fb-type { border-radius: 6px; }
.fb-link-row { border-radius: 8px; }
.fb-rounds { font-size: 11px; color: var(--warm); }
.icon-btn { border-radius: 6px; }

/* 资源表 */
.res-table th { background: var(--paper-2); color: var(--text-2); }
.res-table tr.res-main:hover td { background: var(--accent-soft); }
.res-detail-inner { border-radius: 10px; }
.res-journal { color: var(--accent-dark); }

/* 弹层 */
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-head, .modal-foot { border-color: var(--line); }
.modal-backdrop { background: rgba(13, 20, 36, .42); }
.ed-pending-item { border-radius: 999px; background: var(--accent-soft); border-color: #cdd7fb; }

/* 图表 */
.chart-fill { border-radius: 4px 4px 0 0; background: var(--accent); }

/* 登录页 */
.auth-wrap { min-height: calc(100vh - 68px); }
.auth-side h2 { font-family: var(--sans); font-size: 27px; letter-spacing: -.015em; }
.auth-role-row { border-radius: 10px; background: rgba(255, 255, 255, .03); }
.auth-card h1 { letter-spacing: -.02em; }
.auth-tab { border-radius: 8px 8px 0 0; }

/* ---------- 21.14 窄屏 ---------- */
@media (max-width: 1024px) {
  .dim-panels { padding: 6px 28px 14px; }
  .dim-panels .tagrow { grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; }
}

@media (max-width: 720px) {
  .header-inner { height: 58px; }
  .filterbar { top: 58px; }

  /* 移动端导航面板是白底，浅色顶栏下直接沿用即可 */
  .site-header .nav { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); }
  .site-header .nav-link { color: var(--text-2); border-radius: 8px; }
  .site-header .nav-link:hover { color: var(--ink); background: var(--paper-2); }
  .site-header .nav-link.is-active { color: var(--accent); background: var(--accent-soft); }
  .site-header .nav-cta { border-color: var(--ink); color: #fff; background: var(--ink); }
  .site-header .user-trigger { color: var(--ink); border-color: var(--line-strong); }

  .dim-tab { padding: 7px 12px; font-size: 13px; }
  .dim-panels { padding: 4px 18px 12px; }
  .dim-panels .tagrow { grid-template-columns: 58px minmax(0, 1fr); gap: 0 12px; padding: 9px 0; }
  .dim-panels .tagrow-label { font-size: 12.5px; padding-top: 4px; }
  .dim-panels .tagchip { padding: 4px 10px; font-size: 12px; }

  .tagbar-foot { padding: 8px 0 10px; }
  .rcard-mini { padding: 12px 13px; }
  .promo-card.is-image { grid-template-columns: 82px minmax(0, 1fr); }
  .review-item { flex-wrap: wrap; gap: 8px; }
  .review-ops { width: 100%; }
}

/* ==========================================================================
   22. v9 视觉重构：深靛 + 有色画布
   --------------------------------------------------------------------------
   解决「整站过于偏全白」：把页面底色从近白改成带蓝绿渐层的有色画布，
   顶栏回到深靛渐变，分区、卡片、统计卡、推荐位、页脚各自带色，
   形成「深色框 + 有色底 + 白卡」的三层结构，而不是一片白。
   ========================================================================== */

/* ---------- 22.1 令牌与画布 ---------- */
:root {
  --navy:        #0a1730;
  --navy-2:      #12264f;
  --navy-3:      #1b3a72;
  --canvas:      #eef2f9;
  --canvas-2:    #e4ebf6;
  --teal:        #0d7490;
  --teal-soft:   #e2f2f6;
  --amber:       #a55a09;
  --amber-soft:  #fdf1de;
  --violet:      #5b34c4;
  --violet-soft: #eeeafd;
  --rose:        #b3203f;
  --rose-soft:   #fdeaee;
  --radius:      12px;
  --radius-lg:   18px;
}

body {
  background-color: var(--canvas);
  background-image: none;
}

/* ---------- 22.2 顶栏：深靛纯色 ---------- */
.site-header {
  background: var(--navy);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 30px -18px rgba(10, 23, 48, .8);
}
.site-header::before {
  display: block;
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(122, 162, 255, .5);
}
.site-header .brand-name { color: #fff; }
.site-header .brand-sub { color: rgba(255, 255, 255, .42); }
.site-header .brand-mark { color: #7aa2ff; }
.site-header .nav-link { color: rgba(255, 255, 255, .68); }
.site-header .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.site-header .nav-link.is-active { color: #fff; background: rgba(122, 162, 255, .2); }
.site-header .nav-cta { background: #fff; border-color: #fff; color: var(--navy); }
.site-header .nav-cta:hover { background: #dbe6ff; border-color: #dbe6ff; color: var(--navy); }
.site-header .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .28); }
.site-header .user-trigger {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.site-header .user-trigger:hover { border-color: rgba(255, 255, 255, .45); }
.site-header .user-name { color: #fff; }
.site-header .user-avatar { background: #7aa2ff; color: var(--navy); }
.site-header .role-user { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
.site-header .role-admin { background: rgba(122, 162, 255, .22); color: #cddcff; }
.site-header .role-super { background: #fff; color: var(--navy); }
.user-drop-note {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: 6px;
}
.user-drop-note.is-pending { background: var(--amber-soft); color: var(--amber); }
.user-drop-note.is-no { background: var(--rose-soft); color: var(--rose); }

/* ---------- 22.3 筛选栏：浅靛玻璃 + 左侧色条 ---------- */
.filterbar {
  top: 68px;
  padding: 10px 0 0;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid #dbe3f2;
  box-shadow: 0 8px 24px -22px rgba(10, 23, 48, .6);
}
.dim-tab { color: #46536b; }
.dim-tab:hover { background: #e6ecf9; color: var(--navy); }
.dim-tab.is-open { background: var(--navy); color: #fff; }
.dim-tab.has-value { background: #dfe7fb; color: #1c3aa8; }
.dim-tab.has-value.is-open { background: var(--navy); color: #fff; }

.dim-panels {
  background: #fff;
  border: 1px solid #dbe3f2;
  box-shadow: 0 34px 60px -34px rgba(10, 23, 48, .45);
}
.dim-panels .tagrow + .tagrow { border-top: 1px dashed #e3e9f4; }
.dim-panels .tagrow-label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy-2);
  padding-top: 6px;
}
.dim-panels .tagrow-label::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: #2f4fe0;
}
.tagchip { background: #f6f8fd; border-color: #dce3f1; color: #46536b; }
.tagchip:hover { background: #e9eefe; border-color: #9db2ee; color: #1c3aa8; }
.tagchip.is-active { background: #2440bd; border-color: #2440bd; color: #fff; }
.tagchip .cnt { color: inherit; opacity: .55; }

/* ---------- 22.4 分组：有色分区带 ---------- */
.group-section {
  border-top: 0;
  padding: 26px 0 10px;
  margin-bottom: 6px;
}
.group-section .group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 16px 10px 14px;
  border-radius: 12px;
  background: #edf1fe;
  border-left: 3px solid #2f4fe0;
}
.group-section:nth-of-type(4n+2) .group-head {
  background: #e6f2f6;
  border-left-color: var(--teal);
}
.group-section:nth-of-type(4n+3) .group-head {
  background: #fbf0dd;
  border-left-color: #d08713;
}
.group-section:nth-of-type(4n+4) .group-head {
  background: #efeafb;
  border-left-color: var(--violet);
}
.group-title { color: var(--navy); font-size: 19px; }
.group-title .en { color: #6b7a97; opacity: 1; letter-spacing: .16em; }
.group-count {
  margin-left: auto;
  font-size: 12px;
  color: #6b7a97;
  background: #fff;
  border: 1px solid #e0e7f3;
  border-radius: 999px;
  padding: 3px 11px;
}
.group-count strong { color: var(--navy); }

/* ---------- 22.5 资源卡：白卡 + 顶部彩条 ---------- */
.rcard, .rcard-mini { background: #fff; border-color: #e0e7f3; }
.rcard-mini { position: relative; overflow: hidden; }
.rcard-mini::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #2f4fe0;
  opacity: .85;
}
.rcard-mini:nth-child(4n+2)::after { background: var(--teal); }
.rcard-mini:nth-child(4n+3)::after { background: #d08713; }
.rcard-mini:nth-child(4n+4)::after { background: var(--violet); }
.rcard-mini:hover {
  border-color: #b9c7ea;
  box-shadow: 0 18px 34px -22px rgba(10, 23, 48, .38);
  transform: translateY(-2px);
}
.rm-name { color: var(--navy); }
.rm-name:hover { color: #2440bd; }

/* ---------- 22.6 特别推荐：2–6 位自适应 ---------- */
.promo-head { margin-bottom: 12px; align-items: center; }
.promo-label { color: var(--navy); font-weight: 700; letter-spacing: .1em; }
.promo-label::before { background: #2f4fe0; height: 2px; width: 22px; }
.promo-count { margin-left: 10px; font-size: 11px; color: #7b8aa6; letter-spacing: .06em; }

.promo-grid { gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promo-grid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promo-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promo-grid.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promo-grid.n5, .promo-grid.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.promo-card {
  background: #fff;
  border: 1px solid #e0e7f3;
  border-radius: 14px;
  padding: 14px 16px 15px;
  min-height: 0;
}
.promo-card:hover {
  border-color: #b9c7ea;
  box-shadow: 0 18px 34px -22px rgba(10, 23, 48, .38);
}
.promo-badge {
  background: #e8eefd;
  color: #2440bd;
  font-weight: 600;
}
.promo-title { color: var(--navy); font-size: 14px; }
.promo-desc { color: #5b6779; }

/* 图片位：加大缩略图、压缩正文，让 5–6 个位置也放得下 */
.promo-card.is-image {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}
.promo-card.is-image .promo-thumb { height: 100%; min-height: 88px; aspect-ratio: auto; }
.promo-card.is-image .promo-body { padding: 11px 14px 12px; gap: 4px; }
.promo-grid.n2 .promo-card.is-image { grid-template-columns: 1fr; }
.promo-grid.n2 .promo-card.is-image .promo-thumb { aspect-ratio: 16 / 6.4; min-height: 0; height: auto; }
.promo-grid.n2 .promo-card.is-image .promo-body { padding: 12px 16px 14px; }

/* ---------- 22.7 按钮 / 分段 / 搜索 ---------- */
.btn-primary {
  background: #2f4fe0;
  border-color: #2440bd;
}
.btn-primary:hover { background: #2440bd; }
.btn-accent { background: var(--navy); border-color: #0a1730; }
.btn-ghost { background: #fff; border-color: #d6dfef; color: #33415c; }
.btn-ghost:hover { border-color: #9db2ee; color: #2440bd; background: #eef2ff; }
.seg { background: #fff; border-color: #dbe3f2; }
.seg button.is-active { background: var(--navy); }
.tagbar-foot { border-top: 1px dashed #dbe3f2; }
.tagbar-actions .search-wrap { background: #fff; border-color: #d6dfef; }

/* ---------- 22.8 页头 / 正文 / 表单 ---------- */
.page-head {
  border-bottom: 1px solid #dde5f2;
  padding: 34px 0 22px;
  margin-bottom: 8px;
  background: #f4f7fe;
}
.page-head h1 { color: var(--navy); }
.page-kicker { color: #4a63d8; }
.page-head p { color: #4d5a71; }
.section-note { font-size: 12.5px; color: #6b7a97; margin: -4px 0 12px; }
a { color: #1f3bb0; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="url"], .field input[type="tel"], .field input[type="number"],
.field input[type="search"], .field textarea, .field select, .select, .input {
  background: #fbfcff;
  border-color: #d6dfef;
}
.chip-select label { background: #f6f8fd; border-color: #dce3f1; }
.chip-select label:has(input:checked) { background: #e6ecfd; border-color: #2f4fe0; color: #1c3aa8; }
.form-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px;
}

/* ---------- 22.9 页脚：深靛纯色 ---------- */
.site-footer {
  background: #0a1730;
  color: rgba(255, 255, 255, .58);
  padding: 58px 0 26px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(122, 162, 255, .5);
}
.footer-col h4 { color: rgba(255, 255, 255, .38); }
.footer-col a { color: rgba(255, 255, 255, .66); }
.footer-col a:hover { color: #fff; }

/* ---------- 22.10 后台：有色统计卡与工具栏 ---------- */
.stat-card {
  background: #fff;
  border: 1px solid #e0e7f3;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
}
.stat-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: #2f4fe0;
}
.stat-card:nth-child(2)::before { background: var(--teal); }
.stat-card:nth-child(3)::before { background: #d08713; }
.stat-card:nth-child(4)::before { background: var(--violet); }
.stat-card:nth-child(5)::before { background: var(--rose); }
.stat-num { color: var(--navy); }
.stat-label { color: #4d5a71; font-weight: 600; }
.stat-delta { color: #7b8aa6; }

.panel-box {
  background: #fff;
  border: 1px solid #e0e7f3;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(10, 23, 48, .04);
}
.panel-box > h3, .panel-box-head h3 { color: var(--navy); }
.panel-desc { color: #6b7a97; }
.panel-box-head { background: #f3f6fe; }

/* 资源库工具栏：搜索框加粗放大 */
.res-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  background: #f4f7fe;
  border-bottom: 1px solid #e0e7f3;
}
.res-search.is-hero {
  flex: 1 1 380px;
  display: flex; align-items: center; gap: 10px;
  min-width: 260px;
  padding: 0 12px 0 14px;
  height: 44px;
  border: 2px solid #2f4fe0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px -12px rgba(47, 79, 224, .55);
}
.res-search.is-hero svg { width: 18px; height: 18px; color: #2f4fe0; flex-shrink: 0; }
.res-search.is-hero input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: none; background: transparent;
  font-size: 14px; color: var(--navy); font-weight: 500;
}
.res-search.is-hero input::placeholder { color: #94a1b8; font-weight: 400; }
.res-search.is-hero:focus-within { box-shadow: 0 0 0 4px rgba(47, 79, 224, .14); }
.res-search-kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: #6b7a97;
  border: 1px solid #dbe3f2;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  cursor: pointer;
  background: #f6f8fd;
}
.res-filters { padding: 10px 16px 14px; background: #fff; border-bottom: 1px solid #eef2f9; }
.rf-row { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.rf-label {
  flex-shrink: 0; width: 40px; padding-top: 5px;
  font-size: 11.5px; font-weight: 700; color: #6b7a97; letter-spacing: .06em;
}
.rf-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.rf-chip {
  border: 1px solid #dce3f1; background: #f6f8fd; color: #46536b;
  font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.rf-chip:hover { border-color: #9db2ee; color: #2440bd; }
.rf-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.rf-cnt { margin-left: 5px; font-size: 10px; opacity: .6; }

/* 序号格：可编辑优先级 */
.cell-rank { width: 96px; }
.rank-no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px;
  background: #eef2ff; color: #2440bd;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rank-input {
  width: 52px; margin-left: 6px;
  padding: 3px 5px;
  font-size: 11.5px; text-align: center;
  border: 1px solid #dbe3f2; border-radius: 6px;
  background: #fbfcff; color: var(--navy);
}
.rank-input:focus { border-color: #2f4fe0; outline: none; box-shadow: 0 0 0 3px rgba(47, 79, 224, .12); }
.rank-ops { display: inline-flex; gap: 2px; margin-left: 4px; }
.rank-btn {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1px solid #dbe3f2; background: #fff; color: #5b6779;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.rank-btn:hover { border-color: #2f4fe0; color: #2440bd; background: #eef2ff; }
.rank-btn.is-top:hover { border-color: #d08713; color: #a55a09; background: #fdf1de; }

/* 统计排行 */
.stat-rank { font-variant-numeric: tabular-nums; color: #94a1b8; font-weight: 700; }
.rank-dim {
  font-style: normal;
  font-size: 10px;
  color: #6b7a97;
  border: 1px solid #e0e7f3;
  border-radius: 999px;
  padding: 0 6px;
  margin-right: 6px;
}

/* ---------- 22.11 审核 / 驳回理由 ---------- */
.reject-box {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f7f9ff;
  border: 1px solid #dbe3f2;
  border-radius: 12px;
  width: 100%;
}
.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.reason-chips-label {
  font-size: 11px; font-weight: 700; color: #6b7a97;
  letter-spacing: .08em; align-self: center; margin-right: 2px;
}
.reason-chip {
  border: 1px solid #dce3f1; background: #fff; color: #46536b;
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  text-align: left;
}
.reason-chip:hover { border-color: #9db2ee; color: #2440bd; background: #eef2ff; }
.reject-text {
  width: 100%; min-height: 70px; resize: vertical;
  padding: 9px 11px;
  font-family: inherit; font-size: 13px; line-height: 1.7;
  border: 1px solid #d6dfef; border-radius: 9px; background: #fff;
}
.reject-text:focus { border-color: #2f4fe0; outline: none; box-shadow: 0 0 0 3px rgba(47, 79, 224, .12); }
.reject-ops { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- 22.12 反馈页新结构 ---------- */
.fb-card { background: #fff; border-color: #e0e7f3; padding: 0; overflow: hidden; }
.fb-card form { padding: 0 30px 26px; }
.fb-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #e0e7f3;
  margin-bottom: 24px;
}
.fb-switch-btn {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 22px;
  border: 0;
  background: #f4f7fe;
  text-align: left; cursor: pointer;
  transition: background .15s var(--ease);
}
.fb-switch-btn:hover { background: #e9eefe; }
.fb-switch-btn.is-active { background: var(--navy); }
.fb-switch-n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: #8b97ad;
}
.fb-switch-btn.is-active .fb-switch-n { color: #7aa2ff; }
.fb-switch-t { font-size: 15px; font-weight: 600; color: var(--navy); }
.fb-switch-btn.is-active .fb-switch-t { color: #fff; }
.fb-switch-d { font-size: 11.5px; color: #7b8aa6; }
.fb-switch-btn.is-active .fb-switch-d { color: rgba(255, 255, 255, .62); }

.fb-step { padding: 18px 0 4px; border-bottom: 1px dashed #e3e9f4; margin-bottom: 18px; }
.fb-step:last-of-type { border-bottom: 0; }
.fb-step-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  margin-bottom: 12px;
}
.fb-step-n {
  width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2f4fe0;
  color: #fff; font-size: 10.5px; font-weight: 700;
}
.fb-step-desc { font-size: 12.5px; color: #6b7a97; margin: -6px 0 12px; }

.res-picker { border: 1px solid #e0e7f3; border-radius: 12px; overflow: hidden; background: #fbfcff; }
.res-picker-search {
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px; height: 42px;
  border-bottom: 1px solid #e8eef8;
  background: #fff;
}
.res-picker-search svg { width: 16px; height: 16px; color: #7b8aa6; }
.res-picker-search input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 13px; background: transparent; }
.res-picker-list { max-height: 268px; overflow-y: auto; }
.res-picker-list .empty-mini { padding: 18px 14px; }
.res-pick-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 13px;
  border: 0; border-bottom: 1px solid #eef2f9;
  background: #fff; text-align: left; cursor: pointer;
}
.res-pick-row:hover { background: #eef2ff; }
.res-pick-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.res-pick-title { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.res-pick-meta { font-size: 11.5px; color: #7b8aa6; }

.res-picked { padding: 14px 16px; background: #fff; }
.res-picked-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.res-picked-label {
  font-size: 10px; letter-spacing: .12em; color: #2440bd;
  background: #eef2ff; border-radius: 999px; padding: 2px 9px; font-weight: 700;
}
.res-picked-title { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.res-picked-head .btn { margin-left: auto; }
.res-picked-meta { font-size: 12px; color: #6b7a97; margin-top: 6px; }
.res-picked-link { display: block; font-size: 12px; color: #1f3bb0; margin-top: 4px; word-break: break-all; }

.fix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fix-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fix-row.is-wide { grid-column: 1 / -1; }
.fix-label { font-size: 12px; font-weight: 600; color: #46536b; }
.fix-row input, .fix-row select, .fix-row textarea {
  width: 100%;
  padding: 7px 10px;
  font-family: inherit; font-size: 13px;
  border: 1px solid #d6dfef; border-radius: 9px; background: #fff; color: var(--navy);
}
.fix-row input:focus, .fix-row select:focus, .fix-row textarea:focus {
  border-color: #2f4fe0; outline: none; box-shadow: 0 0 0 3px rgba(47, 79, 224, .12);
}
.fb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }

.fb-mine { margin-top: 26px; }
.fb-mine-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.fb-mine-head h3 { font-size: 16px; color: var(--navy); margin: 0; }
.fb-mine-note { font-size: 12px; color: #7b8aa6; }
.fb-mine-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid #e8eef8;
}
.fb-mine-main { min-width: 0; }
.fb-mine-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-mine-type { font-size: 13px; font-weight: 600; color: var(--navy); }
.fb-mine-date { font-size: 11.5px; color: #94a1b8; }
.fb-mine-target { font-size: 12.5px; color: #46536b; margin-top: 4px; }
.fb-mine-detail { font-size: 12.5px; color: #5b6779; line-height: 1.7; margin: 6px 0 0; }
.fb-mine-reason {
  font-size: 12.5px; color: var(--rose); background: var(--rose-soft);
  border-radius: 8px; padding: 7px 10px; margin-top: 8px; line-height: 1.65;
}
.fb-mine-note { font-size: 12px; color: #6b7a97; margin-top: 6px; }

/* ---------- 22.13 推荐页补充 ---------- */
.modal-sm { max-width: 520px; }
.tag-preview-label {
  font-size: 11px; color: #7b8aa6; letter-spacing: .08em;
  align-self: center; margin-right: 2px;
}
.mine-item { align-items: flex-start; }
.mine-main { min-width: 0; flex: 1; }
.mine-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mine-reason b { font-weight: 700; margin-right: 8px; color: var(--rose); }
.mine-tag-rej {
  display: inline-block; margin-right: 8px;
  background: #fff; border: 1px solid #f3ccd4; border-radius: 6px;
  padding: 1px 7px; font-size: 12px;
}
.reg-apply { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 13px; }
.reg-apply-note { margin-bottom: 12px; }

/* ---------- 22.14 可信度分级页尾注 ---------- */
.level-note {
  margin: 34px 0 10px;
  border: 1px solid #dde5f2;
  border-radius: 16px;
  background: #f6f8fe;
  overflow: hidden;
}
.level-note-head { padding: 22px 24px 16px; border-bottom: 1px solid #e8eef8; }
.level-note-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: #4a63d8; text-transform: uppercase;
}
.level-note-head h3 { font-size: 18px; color: var(--navy); margin: 6px 0 6px; }
.level-note-head p { font-size: 13px; color: #5b6779; margin: 0; line-height: 1.75; }
.level-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #e8eef8; }
.level-note-item { display: flex; gap: 12px; padding: 20px 22px; background: #fff; }
.level-note-n {
  font-family: var(--sans); font-size: 20px; font-weight: 700;
  color: #c9d5ee; line-height: 1;
}
.level-note-body strong { display: block; font-size: 13.5px; color: var(--navy); margin-bottom: 5px; }
.level-note-body p { font-size: 12.5px; line-height: 1.8; color: #5b6779; margin: 0; }

/* ---------- 22.15 审核卡片补充 ---------- */
.fb-kind {
  font-size: 10px; letter-spacing: .06em; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: #eef2ff; color: #2440bd;
}
.fb-kind.is-site { background: #eef1f6; color: #5b6779; }
.fb-item.is-needs { border-left: 3px solid var(--rose); padding-left: 14px; border-radius: 0 8px 8px 0; }
.fb-reason {
  font-size: 12.5px; color: var(--rose); background: var(--rose-soft);
  border-radius: 8px; padding: 7px 10px; margin: 8px 0 0; line-height: 1.65;
}
.fb-fixes {
  margin: 10px 0 0;
  border: 1px solid #dbe3f2;
  border-radius: 10px;
  overflow: hidden;
}
.fb-fixes-head {
  font-size: 11.5px; font-weight: 700; color: #2440bd;
  background: #eef2ff; padding: 6px 11px;
}
.fb-fix-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 11px; font-size: 12.5px;
  border-top: 1px solid #eef2f9;
}
.fb-fix-key { color: #6b7a97; min-width: 66px; font-weight: 600; }
.fb-fix-old { color: #94a1b8; text-decoration: line-through; }
.fb-fix-arrow { color: #94a1b8; }
.fb-fix-new { color: #14532d; background: #e8f6ec; border-radius: 5px; padding: 0 6px; }

/* ==========================================================================
   23. v10 修复与打磨：概览待办、资源库表格、推荐位尺寸、可点标签
   ========================================================================== */

/* ---------- 23.1 概览：四类待办卡片 ---------- */
.queue-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.qcard {
  display: block;
  background: #fff;
  border: 1px solid #e0e7f3;
  border-left: 3px solid #c9d4e8;
  border-radius: 12px;
  padding: 13px 16px 14px;
  text-decoration: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.qcard:hover {
  transform: translateY(-2px);
  border-color: #b9c7ea;
  box-shadow: 0 16px 30px -22px rgba(10, 23, 48, .42);
}
.qcard.has-work { border-left-color: #d98324; background: #fffdf8; }
.qcard-top { display: flex; align-items: baseline; gap: 8px; }
.qcard-n {
  font-size: 23px; line-height: 1.2; font-weight: 700;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.qcard.has-work .qcard-n { color: #b3600f; }
.qcard-t { font-size: 12.5px; font-weight: 600; color: #33415c; }
.qcard-d { display: block; margin-top: 3px; font-size: 11.5px; color: #7b8aa6; }

.ov-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed #e6ecf6; font-size: 12.5px;
}
.ov-row:last-child { border-bottom: none; }
.ov-tag {
  flex-shrink: 0; padding: 1px 8px; border-radius: 999px;
  background: #e8eefd; color: #2440bd; font-weight: 600; font-size: 11px;
}
.ov-tag.is-soft { background: #eef1f6; color: #5b6779; }
.ov-dim { flex-shrink: 0; font-size: 11px; color: #7b8aa6; }
.ov-sub {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #33415c;
}
.ov-by { flex-shrink: 0; font-size: 11px; color: #94a1b8; }

/* ---------- 23.2 推荐位：图片放大 + 空位占位卡 ---------- */
.promo-card.is-image { grid-template-columns: 168px minmax(0, 1fr); }
.promo-card.is-image .promo-thumb { min-height: 116px; }
.promo-card.is-image .promo-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* 3 个位置时改成上图下文，图片可以占满整卡宽度 */
.promo-grid.n3 .promo-card.is-image { grid-template-columns: 1fr; }
.promo-grid.n3 .promo-card.is-image .promo-thumb { aspect-ratio: 16 / 8; height: auto; min-height: 0; }
/* 5–6 个位置时卡片窄，缩略图相应收一点但仍然明显 */
.promo-grid.n5 .promo-card.is-image,
.promo-grid.n6 .promo-card.is-image { grid-template-columns: 132px minmax(0, 1fr); }
.promo-grid.n2 .promo-card.is-image .promo-thumb { aspect-ratio: 16 / 7.2; }

.promo-card.is-empty {
  border-style: dashed;
  border-color: #cfd9ea;
  background: #fbfcff;
}
.promo-card.is-empty .promo-badge { background: #eef1f6; color: #7b8aa6; }
.promo-card.is-empty .promo-title { color: #7b8aa6; }
.promo-card.is-empty .promo-desc { color: #9aa7bd; }

/* ---------- 23.3 资源库：工具栏 / 筛选区 / 表格重排 ---------- */
.res-panel {
  box-shadow: 0 20px 44px -36px rgba(10, 23, 48, .5);
  border-color: #dfe6f2;
}
.res-toolbar { padding: 15px 18px; gap: 13px; }
.res-filters {
  padding: 12px 18px 14px;
  background: #fff;
  border-bottom: 1px solid #e6ecf6;
}
.rf-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed #eef2f9;
}
.rf-row:first-child { border-top: 0; padding-top: 2px; }
.rf-label {
  font-size: 11.5px; font-weight: 700; color: #6b7a97;
  letter-spacing: .04em; padding-top: 5px;
}
.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chip {
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  background: #f6f8fd;
  border: 1px solid #e2e8f5;
  color: #46536b;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.rf-chip:hover { background: #e9eefe; border-color: #9db2ee; color: #1c3aa8; }
.rf-chip.is-active { background: #2440bd; border-color: #2440bd; color: #fff; font-weight: 600; }
.rf-chip.is-active .rf-cnt { color: rgba(255, 255, 255, .72); }
.rf-cnt { margin-left: 5px; font-size: 10.5px; color: #8b98b0; font-variant-numeric: tabular-nums; }

.res-table { border-collapse: separate; border-spacing: 0; }
.res-table thead th {
  background: #f7f9fe;
  color: #6b7a97;
  border-bottom: 1px solid #dde5f2;
  padding: 11px 10px;
}
.res-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid #eef2f9;
  background: #fff;
}
.res-table tbody tr.res-main:nth-of-type(4n+3) td { background: #fbfcff; }
.res-table tbody tr.res-main:hover td { background: #eef3ff; }
.res-table tbody tr:last-child td { border-bottom: none; }
.res-table .cell-title { min-width: 200px; }
.res-table .cell-rank { white-space: nowrap; }

/* ---------- 23.4 可点击的标签（资源库筛选 / 标签管理改名） ---------- */
.mini-tag.is-filter {
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.mini-tag.is-filter:hover {
  background: #dfe8fd;
  border-color: #9db2ee;
  color: #1c3aa8;
}
.mini-tag.is-plain { background: #f2f5fb; color: #4d5a71; }
.plain-list.is-chips { display: flex; flex-wrap: wrap; gap: 3px; max-width: 156px; }

.tag-name.is-editable {
  cursor: text;
  border-radius: 5px;
  padding: 2px 5px;
  margin-left: -5px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tag-name.is-editable:hover { background: #eef3ff; color: #2440bd; }
.tag-name.is-editable:focus-visible { outline: 2px solid #9db2ee; outline-offset: 1px; }

/* 用户管理：状态胶囊可直接点击切换启用 / 停用 */
.status-pill.is-clickable {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  line-height: inherit;
}
.status-pill.is-clickable:hover { box-shadow: inset 0 0 0 1px rgba(10, 23, 48, .18); }

/* ==========================================================================
   24. v11 收敛配色与间距
   --------------------------------------------------------------------------
   · 去掉分组/卡片上的彩色竖条与四色轮换，只保留一种蓝 + 中性灰
   · 收紧条目间距，一屏能看更多资源
   · 推荐位固定尺寸：每排 3 个，图片为主，文字极简
   ========================================================================== */

/* ---------- 24.1 去掉彩色装饰 ---------- */
.rcard-mini::after,
.rcard-mini:nth-child(4n+2)::after,
.rcard-mini:nth-child(4n+3)::after,
.rcard-mini:nth-child(4n+4)::after {
  display: none;
  background: none;
}
.group-section .group-head,
.group-section:nth-of-type(4n+2) .group-head,
.group-section:nth-of-type(4n+3) .group-head,
.group-section:nth-of-type(4n+4) .group-head {
  background: #f2f5fb;
  border-left: 3px solid #c3d0e6;
}
.dim-panels .tagrow-label::after { background: #c3d0e6; }
.promo-label::before { background: #c3d0e6; }

/* 分级徽章：统一成由浅到深的单色蓝阶，不再用黄/绿 */
.lv-1 { background: #f1f3f7; color: #6b7a97; }
.lv-2 { background: #eaeef6; color: #5b6779; }
.lv-3 { background: #e4eaf6; color: #46536b; }
.lv-4 { background: #dde6f6; color: #33415c; }
.lv-5 { background: #d5e0f8; color: #1c3aa8; }
.badge-cat, .badge-access { background: #eef2fa; color: #46536b; }

/* ---------- 24.2 收紧条目间距 ---------- */
.resource-grid { gap: 12px; }
.resource-grid-mini { gap: 8px; }
.rcard-mini { padding: 10px 13px; gap: 9px; }
.group-section { padding: 16px 0 4px; margin-bottom: 2px; }
.group-section .group-head { margin: 0 0 9px; padding: 8px 14px 8px 12px; }
.group-title { font-size: 17px; }
.promo-head { margin-bottom: 9px; }
.promo-grid { gap: 12px; }
.tagrow { padding: 6px 0; }
.tagbar-foot { margin-top: 10px; }

/* ---------- 24.3 推荐位：固定尺寸，图片为主 ---------- */
/* 无论 2 个还是 6 个推荐位，单卡尺寸完全一致；4 列排布，图片占绝大部分 */
.promo-grid,
.promo-grid.n2, .promo-grid.n3, .promo-grid.n4,
.promo-grid.n5, .promo-grid.n6 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.promo-grid .promo-card,
.promo-grid.n2 .promo-card,
.promo-grid.n3 .promo-card,
.promo-grid.n4 .promo-card,
.promo-grid.n5 .promo-card,
.promo-grid.n6 .promo-card {
  height: 172px;
  min-height: 172px;
  max-height: 172px;
  box-sizing: border-box;
  overflow: hidden;
}
.promo-grid .promo-card.is-image,
.promo-grid.n2 .promo-card.is-image,
.promo-grid.n3 .promo-card.is-image,
.promo-grid.n4 .promo-card.is-image,
.promo-grid.n5 .promo-card.is-image,
.promo-grid.n6 .promo-card.is-image {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  padding: 0;
}
.promo-grid .promo-card.is-image .promo-thumb,
.promo-grid.n2 .promo-card.is-image .promo-thumb,
.promo-grid.n3 .promo-card.is-image .promo-thumb,
.promo-grid.n4 .promo-card.is-image .promo-thumb,
.promo-grid.n5 .promo-card.is-image .promo-thumb,
.promo-grid.n6 .promo-card.is-image .promo-thumb {
  height: 118px;
  min-height: 0;
  max-height: 118px;
  aspect-ratio: auto;
  display: block;
  overflow: hidden;
}
.promo-grid .promo-card.is-image .promo-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.promo-grid .promo-card.is-image .promo-body,
.promo-grid.n2 .promo-card.is-image .promo-body,
.promo-grid.n3 .promo-card.is-image .promo-body,
.promo-grid.n4 .promo-card.is-image .promo-body,
.promo-grid.n5 .promo-card.is-image .promo-body,
.promo-grid.n6 .promo-card.is-image .promo-body {
  padding: 7px 11px 9px;
  gap: 3px;
  height: 54px;
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
}
/* 图片卡只留一行标题，描述不占位 */
.promo-card.is-image .promo-title {
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.promo-card.is-image .promo-desc { display: none; }
/* 只填了图片+描述、没填标题时，用描述顶一行，避免正文区空白 */
.promo-card.is-image .promo-body:not(:has(.promo-title)) .promo-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
}
.promo-card.is-image .promo-badge {
  font-size: 9.5px;
  padding: 0 5px;
  line-height: 15px;
  height: 15px;
  align-self: flex-start;
}
/* 纯文字卡 / 占位卡同高，并排时不高低不齐 */
.promo-card.is-empty,
.promo-grid .promo-card:not(.is-image) {
  height: 172px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
}
.promo-grid .promo-card:not(.is-image) .promo-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.45;
}

/* ---------- 24.4 维度管理 ---------- */
.dim-table .dim-edit { width: 100%; max-width: 168px; }
.dim-table .tag-edit-en { width: 100%; max-width: 96px; }
.dim-row.is-off td { background: #fafbfe; color: #94a1b8; }
.dim-row.is-off .dim-edit { color: #94a1b8; }
.dim-kind {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef1f6;
  color: #5b6779;
}
.dim-kind.is-custom { background: #e8eefd; color: #2440bd; }
.dim-kind.is-region,
.dim-kind.is-level { background: #f1f3f7; color: #6b7a97; }
.dim-count { font-variant-numeric: tabular-nums; color: #6b7a97; }
.dim-switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #46536b; cursor: pointer;
}
.dim-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) auto;
  gap: 12px;
  align-items: end;
}
.dim-add-row .field { margin: 0; }

/* 概览待办行里的操作按钮 */
.ov-ops { display: flex; gap: 6px; flex-shrink: 0; }
.ov-ops .btn-sm { padding: 3px 9px; font-size: 11.5px; }

/* 危险操作（删除标签记录等）：低调描边，不喧宾夺主 */
.btn.is-danger {
  color: var(--danger);
  border-color: #e6cdc8;
  background: #fff;
}
.btn.is-danger:hover {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
/* 图标按钮的「通过 / 驳回」着色（待审标签、待审资源卡片里用） */
.icon-btn.is-ok {
  color: #1c6f63;
  border-color: #cfe6e1;
  background: #f3faf8;
}
.icon-btn.is-ok:hover { color: #fff; background: #1c6f63; border-color: #1c6f63; }
.icon-btn.is-danger {
  color: var(--danger);
  border-color: #e6cdc8;
  background: #fdf6f4;
}
.icon-btn.is-danger:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ---------- 24.6 维度同步：页脚 / 空维度提示 ---------- */
/* 概览待办行加了操作按钮后允许换行，窄屏不挤 */
.ov-row { flex-wrap: wrap; }
.footer-dims { display: block; }
.footer-dims a { display: block; }
/* 后台资源库筛选：维度还没有任何取值时的占位说明 */
.rf-empty {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  color: #9aa7bd;
  padding: 3px 2px;
}
/* 标签池里有、但暂时没有资源使用的标签：照样可点，只是淡化显示 */
.rf-chip.is-empty {
  color: #98a4ba;
  background: #fbfcfe;
  border-style: dashed;
}
.rf-chip.is-empty .rf-cnt { color: #b3bdcd; }
.rf-chip.is-empty:hover { color: #46536b; background: #f2f5fc; border-color: #c6d2e8; }
.rf-chip.is-empty.is-active { background: #6b7a97; border-color: #6b7a97; border-style: solid; color: #fff; }
/* 首页标签面板：维度已建但还没有标签时的提示 */
.taglist-empty {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  color: #94a1b8;
  padding: 4px 2px;
}
/* 待审资源卡片里「随资源提交的新标签」，可就地通过 / 驳回 */.queue-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 8px 0 2px;
}
.queue-tags-label { font-size: 11.5px; color: #7b8aa6; }
.queue-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 9px;
  border: 1px solid #dfe6f4;
  border-radius: 999px;
  background: #f8fafd;
  font-size: 12px;
  color: #33415c;
}
.queue-tag-dim { font-size: 10.5px; color: #94a1b8; }
.queue-tag .icon-btn { width: 18px; height: 18px; border-radius: 999px; }
.queue-tag .icon-btn svg { width: 11px; height: 11px; }

/* ---------- 22.16 窄屏 ---------- */
@media (max-width: 1024px) {
  .promo-grid, .promo-grid.n2, .promo-grid.n3, .promo-grid.n4, .promo-grid.n5, .promo-grid.n6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .level-note-grid { grid-template-columns: 1fr; }
  .fix-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header-inner { height: 58px; }
  .filterbar { top: 58px; }
  .site-header .nav {
    background: #fff;
    border: 1px solid #dbe3f2;
    border-radius: 12px;
    box-shadow: 0 18px 34px -22px rgba(10, 23, 48, .4);
  }
  .site-header .nav-link { color: #46536b; }
  .site-header .nav-link.is-active { color: #2440bd; background: #eef2ff; }
  .site-header .nav-cta { background: var(--navy); border-color: var(--navy); color: #fff; }
  .site-header .user-trigger { background: #fff; border-color: #dbe3f2; color: var(--navy); }
  .site-header .user-name { color: var(--navy); }

  .promo-grid, .promo-grid.n2, .promo-grid.n3, .promo-grid.n4, .promo-grid.n5, .promo-grid.n6 {
    grid-template-columns: 1fr;
  }
  .promo-card.is-image { grid-template-columns: 96px minmax(0, 1fr); }
  .promo-grid.n2 .promo-card.is-image { grid-template-columns: 1fr; }

  .fb-card form { padding: 0 18px 20px; }
  .fb-switch { grid-template-columns: 1fr; }
  .fb-switch-btn { padding: 14px 16px; }
  .fb-mine-item { flex-wrap: wrap; }
  .res-toolbar { padding: 12px; }
  .res-search.is-hero { flex: 1 1 100%; height: 42px; }
  .rf-label { width: 34px; }
  .cell-rank { width: 88px; }
  .rank-input { width: 44px; }
  .group-section .group-head { padding: 8px 12px; }
  .page-head { padding: 26px 0 18px; }
}

/* ---------- 24.5 v11 窄屏补丁 ---------- */
@media (max-width: 1024px) {
  .dim-add-row { grid-template-columns: 1fr 1fr; }
  .promo-grid,
  .promo-grid.n2, .promo-grid.n3, .promo-grid.n4,
  .promo-grid.n5, .promo-grid.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dim-add-row { grid-template-columns: 1fr; }
  .promo-grid,
  .promo-grid.n2, .promo-grid.n3, .promo-grid.n4,
  .promo-grid.n5, .promo-grid.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo-grid .promo-card,
  .promo-grid .promo-card.is-empty,
  .promo-grid .promo-card:not(.is-image) { height: 156px; min-height: 156px; max-height: 156px; }
  .promo-grid .promo-card.is-image .promo-thumb { height: 104px; max-height: 104px; }
  .promo-grid .promo-card.is-image .promo-body { height: 52px; }
}
@media (max-width: 480px) {
  .promo-grid,
  .promo-grid.n2, .promo-grid.n3, .promo-grid.n4,
  .promo-grid.n5, .promo-grid.n6 { grid-template-columns: 1fr; }
}

/* ---------- 25. 注册类型切换 / 模块管理 / 批量开户 ---------- */
/* 注册页：普通注册 / 管理员注册 两个入口 */
.reg-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.reg-switch-btn {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.reg-switch-btn b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.reg-switch-btn span { display: block; margin-top: 3px; font-size: 11.5px; color: #7b8aa6; line-height: 1.4; }
.reg-switch-btn:hover { border-color: #c6d2e8; background: #fbfcff; }
.reg-switch-btn.is-active {
  border-color: #2440bd;
  background: #f2f6ff;
  box-shadow: inset 0 0 0 1px #2440bd;
}
.reg-switch-btn.is-active b { color: #2440bd; }
.auth-foot-hint {
  margin: 16px 0 0;
  font-size: 12px;
  color: #94a1b8;
  line-height: 1.6;
  text-align: center;
}

/* 导航容器：链接由 app.js 按「模块管理」渲染，用 display:contents 保持原有 flex 布局 */
.nav-links { display: contents; }

/* 模块管理表格 */
.mod-table .mod-edit { width: 100%; max-width: 150px; }
.mod-row.is-off td { background: #fafbfe; color: #94a1b8; }
.mod-row.is-off .mod-edit { color: #94a1b8; }
.mod-kind {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef1f6;
  color: #5b6779;
}
.mod-kind.is-custom { background: #e8eefd; color: #2440bd; }
.mod-url { font-size: 11.5px; color: #7b8aa6; word-break: break-all; }
.mod-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.4fr) auto;
  gap: 12px;
  align-items: end;
}
.mod-add-row .field { margin: 0; }

/* 批量开户 */
.batch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.batch-grid .field { margin: 0 0 14px; }
.batch-textarea {
  width: 100%;
  min-height: 168px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  line-height: 1.8;
  resize: vertical;
}
.batch-result { margin-top: 16px; }
.batch-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.batch-table th, .batch-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f9;
  text-align: left;
}
.batch-table th { background: #f7f9fe; color: #6b7a97; font-weight: 600; }
.batch-pwd { font-family: var(--mono, ui-monospace, Menlo, monospace); color: #2440bd; }
.batch-fail { color: var(--danger); }
@media (max-width: 900px) {
  .batch-grid { grid-template-columns: 1fr; }
  .mod-add-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .mod-add-row { grid-template-columns: 1fr; }
  .reg-switch { grid-template-columns: 1fr; }
}

/* ==========================================================================
   26. 模块内容编辑器 + 推荐位悬浮浮层（v12.1）
   ========================================================================== */

/* ---------- 26.1 模块内容编辑弹窗 ---------- */
.mod-editor { max-width: 760px; }
.mod-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
  padding: 8px 10px;
  background: #f6f8fd;
  border: 1px solid #e6ecf7;
  border-radius: 10px;
}
.mod-toolbar-label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8394b3;
  font-weight: 700;
  margin-right: 2px;
}
.mod-toolbar-sp { flex: 1; }
.mod-count { font-size: 11.5px; color: #8394b3; font-variant-numeric: tabular-nums; }
.btn-xs {
  padding: 4px 9px;
  font-size: 11.5px;
  line-height: 1.5;
  border-radius: 7px;
}
.btn.is-active {
  background: #e8eefd;
  border-color: #b9c7ea;
  color: #2440bd;
}
.mod-body-field textarea {
  width: 100%;
  min-height: 280px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.85;
  resize: vertical;
}
.mod-preview {
  min-height: 280px;
  max-height: 46vh;
  overflow: auto;
  padding: 14px 16px;
  border: 1px dashed #cdd8ec;
  border-radius: 10px;
  background: #fbfcfe;
}
.mod-preview > *:first-child { margin-top: 0; }
.mod-preview h2 { font-size: 17px; margin: 18px 0 8px; color: var(--navy); }
.mod-preview h3 { font-size: 14.5px; margin: 16px 0 6px; color: var(--navy); }
.mod-preview p { margin: 0 0 12px; }
.mod-preview ul, .mod-preview ol { margin: 0 0 12px; padding-left: 22px; }
.mod-preview li { margin-bottom: 5px; }
.mod-preview blockquote {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-left: 3px solid #cdd8ec;
  color: #5b6779;
  background: #f6f8fd;
}
.mod-preview hr { border: 0; border-top: 1px solid #e6ecf7; margin: 16px 0; }
.mod-preview .dash { color: #93a1bb; }

/* 模块地址列做成可点的链接 */
a.mod-url {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11.5px;
  color: #2440bd;
  text-decoration: none;
  border-bottom: 1px dashed #b9c7ea;
}
a.mod-url:hover { color: #0f2a8a; border-bottom-style: solid; }

/* ---------- 26.2 推荐位：前台直接展示开关 ---------- */
.pf-switch-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.pf-switch {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 240px;
  padding: 10px 12px;
  border: 1px solid #e6ecf7;
  border-radius: 10px;
  background: #fafbfe;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.pf-switch:hover { border-color: #c6d3ec; background: #f6f8fd; }
.pf-switch input { margin: 2px 0 0; flex: 0 0 auto; }
.pf-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-switch-text b { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.pf-switch-text i {
  font-style: normal;
  font-size: 11px;
  line-height: 1.55;
  color: #8394b3;
}

/* ---------- 26.3 推荐位：悬浮浮层 ---------- */
.promo-card { position: relative; }
/* 有浮层的卡片裁掉溢出，避免文字多时浮层顶出卡片上沿 */
.promo-card.has-hover { overflow: hidden; }
.promo-hover {
  position: absolute;
  max-height: 100%;
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 14px 12px;
  background: rgba(10, 23, 48, .95);
  color: #eef2fb;
  border-radius: 0 0 13px 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 3;
}
.promo-card:hover .promo-hover,
.promo-card:focus-visible .promo-hover {
  opacity: 1;
  transform: translateY(0);
}
.promo-hover-badge {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #c9b184;
}
.promo-hover-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
}
.promo-hover-desc {
  font-size: 12px;
  line-height: 1.6;
  color: #dbe4f6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 720px) {
  .pf-switch-row { flex-direction: column; }
  .mod-editor { max-width: none; }
}

/* ---------- 26.4 站名变长后的自适应（国际科学教育资源数据库） ---------- */
.brand-text { min-width: 0; }
.brand-name { white-space: nowrap; }
@media (max-width: 900px) {
  .brand-name { font-size: 16.5px; letter-spacing: .08em; }
}
@media (max-width: 480px) {
  .brand-name { font-size: 15px; letter-spacing: .04em; }
  .brand-mark { width: 26px; height: 26px; }
  .brand { gap: 9px; }
}

/* 内容页上的「编辑本页内容」入口（仅管理员可见） */
.page-edit { margin: 14px 0 0; }
.page-edit a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: #2440bd;
  background: #eef2fd;
  border: 1px solid #d5def7;
  border-radius: 999px;
  text-decoration: none;
}
.page-edit a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.page-edit a:hover { background: #e2e9fb; border-color: #b9c7ea; text-decoration: none; }

/* ==========================================================================
   27. 推荐位（v12.2）：图片更大 / 标题居中 / 浮层移到卡片外侧
   ========================================================================== */

/* ---------- 27.1 图片放大：卡片外框尺寸不变，只把图片占的比例加大 ---------- */
.promo-card.is-image { grid-template-columns: 196px minmax(0, 1fr); }
.promo-grid.n5 .promo-card.is-image,
.promo-grid.n6 .promo-card.is-image { grid-template-columns: 196px minmax(0, 1fr); }
/* 上图下文（2 / 3 个位置）时图片区更高一点，正文区相应收紧，卡片总高基本不变 */
.promo-grid.n3 .promo-card.is-image .promo-thumb { aspect-ratio: 16 / 8.6; }
.promo-grid.n2 .promo-card.is-image .promo-thumb { aspect-ratio: 16 / 7.6; }
.promo-card.is-image .promo-body { padding: 10px 12px 11px; gap: 3px; }

/* ---------- 27.2 标题居中，徽章与描述跟随居中 ---------- */
.promo-card .promo-body { align-items: center; text-align: center; }
.promo-card .promo-badge { align-self: center; padding: 1px 8px; border-radius: 999px; }
.promo-card .promo-desc { text-align: center; }

/* ---------- 27.3 浮层移到卡片外侧：不再遮挡、不压缩图片 ---------- */
/* 卡片本身不能再裁切，否则浮层会被切掉；圆角交给图片自己处理 */
.promo-card.is-image,
.promo-card.has-hover { overflow: visible; }
.promo-card.is-image .promo-thumb {
  overflow: hidden;
  border-radius: 13px 0 0 13px;
}
.promo-grid.n2 .promo-card.is-image .promo-thumb,
.promo-grid.n3 .promo-card.is-image .promo-thumb { border-radius: 13px 13px 0 0; }

.promo-hover {
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  top: auto;
  max-height: none;
  overflow: visible;
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(10, 23, 48, .96);
  box-shadow: 0 18px 34px -18px rgba(10, 23, 48, .5);
  transform: translateY(6px);
  z-index: 20;
}
.promo-card:hover .promo-hover,
.promo-card:focus-visible .promo-hover { transform: translateY(0); }
/* 小箭头，指回卡片 */
.promo-hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: rgba(10, 23, 48, .96);
  transform: rotate(45deg);
}
.promo-hover-title { text-align: center; }
.promo-hover-badge { text-align: center; }
.promo-hover-desc { text-align: center; -webkit-line-clamp: 4; }

/* ---------- 27.4 标签数量提示 ---------- */
.taglist-more {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 11.5px;
  color: #7b8aa6;
  background: #f5f7fc;
  border: 1px dashed #dbe3f2;
  border-radius: 999px;
}
.group-trunc {
  margin: 18px 0 0;
  padding: 11px 16px;
  font-size: 12.5px;
  color: #6b7a97;
  background: #f7f9fe;
  border: 1px dashed #dbe3f2;
  border-radius: 10px;
}

/* ==========================================================================
   28. 推荐位（v12.3）：再放大图片、再压缩文字区
   目标：卡片外框尺寸不变，把文字占的比例继续让给图片。
   ========================================================================== */

/* ---------- 28.1 横向布局：图片列再放宽 ---------- */
.promo-card.is-image { grid-template-columns: 240px minmax(0, 1fr); }
.promo-grid.n5 .promo-card.is-image,
.promo-grid.n6 .promo-card.is-image { grid-template-columns: 240px minmax(0, 1fr); }

/* 上图下文（2 / 3 个位置）：图片再高一点，文字区同步压缩，卡片总高保持不变 */
.promo-grid.n3 .promo-card.is-image .promo-thumb { aspect-ratio: 16 / 9.2; }
.promo-grid.n2 .promo-card.is-image .promo-thumb { aspect-ratio: 16 / 8.2; }

/* ---------- 28.2 文字区整体收紧 ---------- */
.promo-card.is-image .promo-body { padding: 8px 10px 9px; gap: 2px; }
.promo-card .promo-title {
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: 0;
}
.promo-card .promo-badge {
  font-size: 8.5px;
  letter-spacing: .1em;
  padding: 1px 7px;
}
.promo-card .promo-desc {
  font-size: 11.5px;
  line-height: 1.6;
}
/* 纯文字卡（没有图片）不需要压得这么紧，保持可读 */
.promo-card:not(.is-image) .promo-body { padding: 13px 15px 14px; gap: 4px; }
.promo-card:not(.is-image) .promo-title { font-size: 14.5px; }

/* ---------- 28.3 标签审核：来源推荐条 ---------- */
.review-item.is-tag { display: block; }
.review-item.is-tag .review-main { width: 100%; }
.review-item.is-tag .review-ops { margin-top: 8px; justify-content: flex-end; }
.review-source {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 7px 0 0;
  padding: 8px 11px;
  font-size: 12px;
  background: #f7f9fe;
  border: 1px solid #e8eef8;
  border-radius: 8px;
}
.review-source-label {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: #2440bd;
  background: #e8eefd;
  border-radius: 999px;
}
.review-source-title {
  font-weight: 600;
  color: #33415c;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-source-link {
  font-size: 11.5px;
  color: #2440bd;
  text-decoration: none;
  border-bottom: 1px dashed #b9c7ea;
}
.review-source-link:hover { border-bottom-style: solid; }
.review-source-meta { font-size: 11.5px; color: #7b8aa6; }

/* ---------- 28.4 重置密码结果 ---------- */
.pwd-result {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: #f0f6ff;
  border: 1px solid #cddffb;
  border-radius: 10px;
}
.pwd-result-label { width: 100%; font-size: 11.5px; color: #5b6779; }
.pwd-result-code {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #2440bd;
}

/* 窄屏：横向布局的图片列收窄，避免文字区被挤没 */
@media (max-width: 620px) {
  .promo-card.is-image,
  .promo-grid.n5 .promo-card.is-image,
  .promo-grid.n6 .promo-card.is-image { grid-template-columns: 150px minmax(0, 1fr); }
}

/* ==========================================================================
   29. 推荐位（v12.4）：图片铺满整卡，标题压成底部一条

   背景：第 24 节把缩略图写死成 height:118px / max-height:118px，正文区固定 54px，
   所以前两轮「放大图片」都被这条规则压住了。这里直接改结构：
   · 缩略图 position:absolute; inset:0 —— 铺满整张卡片（172px 全给图片）
   · 正文区改成压在图片底部的一条半透明深色带，只放一行标题（约 30px）
   · 徽章提到卡片一级，浮在图片左上角，不再占正文区高度
   ========================================================================== */

/* ---------- 29.1 图片卡：定位上下文 + 允许浮层溢出 ---------- */
.promo-grid .promo-card.is-image,
.promo-grid.n2 .promo-card.is-image,
.promo-grid.n3 .promo-card.is-image,
.promo-grid.n4 .promo-card.is-image,
.promo-grid.n5 .promo-card.is-image,
.promo-grid.n6 .promo-card.is-image {
  position: relative;
  overflow: visible;   /* 卡片尺寸仍由第 24 节锁定为 172px，这里只放开裁切让悬浮浮层能出来 */
}

/* ---------- 29.2 缩略图铺满整卡 ---------- */
.promo-grid .promo-card.is-image .promo-thumb,
.promo-grid.n2 .promo-card.is-image .promo-thumb,
.promo-grid.n3 .promo-card.is-image .promo-thumb,
.promo-grid.n4 .promo-card.is-image .promo-thumb,
.promo-grid.n5 .promo-card.is-image .promo-thumb,
.promo-grid.n6 .promo-card.is-image .promo-thumb {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 12px;
}

/* ---------- 29.3 正文压成底部一条 ---------- */
.promo-grid .promo-card.is-image .promo-body,
.promo-grid.n2 .promo-card.is-image .promo-body,
.promo-grid.n3 .promo-card.is-image .promo-body,
.promo-grid.n4 .promo-card.is-image .promo-body,
.promo-grid.n5 .promo-card.is-image .promo-body,
.promo-grid.n6 .promo-card.is-image .promo-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  padding: 5px 10px 6px;
  gap: 0;
  justify-content: center;
  background: rgba(10, 23, 48, .82);
  border-radius: 0 0 12px 12px;
  pointer-events: none;   /* 文字条不拦点击，整卡仍然是一个链接 */
}
.promo-card.is-image .promo-title {
  font-size: 12.5px;
  line-height: 1.45;
  color: #fff;
}
/* 只填了描述、没填标题时的兜底行 */
.promo-card.is-image .promo-body:not(:has(.promo-title)) .promo-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, .86);
}

/* ---------- 29.4 徽章浮在图片左上角 ---------- */
.promo-card.is-image > .promo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  align-self: auto;
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  font-size: 9px;
  letter-spacing: .08em;
  color: #fff;
  background: rgba(10, 23, 48, .72);
  border: 1px solid rgba(255, 255, 255, .26);   /* 深色图上也能看清 */
  border-radius: 999px;
  pointer-events: none;
}

/* ---------- 29.5 纯文字卡：和图片卡并排时内容垂直居中，不留一大片空白 ---------- */
.promo-grid .promo-card:not(.is-image) {
  justify-content: center;
}

/* ---------- 29.6 窄屏：文字条再收一点，图片占比保持不变 ---------- */
@media (max-width: 720px) {
  .promo-grid .promo-card.is-image .promo-body { padding: 4px 9px 5px; }
  .promo-card.is-image .promo-title { font-size: 12px; }
  .promo-card.is-image > .promo-badge { top: 6px; left: 6px; height: 16px; line-height: 16px; font-size: 8.5px; }
}

/* ==========================================================================
   30. 推荐位悬浮提示（v12.5）：改成 fixed 跟随鼠标，不再被页面顶端裁掉

   原来 .promo-hover 是卡片内的绝对定位，向上弹到卡片外侧；推荐位紧贴页面顶部，
   浮层超出视口上沿就被浏览器裁掉了。现在浮层挂到 body 上（.promo-tip），
   由 home.js 定位，和资源条目的 .rcard-tip 同一套交互。
   ========================================================================== */

/* 卡片内部那份只作为数据源，不再直接显示 */
.promo-card .promo-hover { display: none; }

.promo-tip {
  position: fixed;
  z-index: 320;
  width: max-content;
  max-width: 300px;
  padding: 11px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(10, 23, 48, .97);
  color: #eef2fb;
  border-radius: 10px;
  box-shadow: 0 18px 34px -18px rgba(10, 23, 48, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
  pointer-events: none;
}
.promo-tip.is-open { opacity: 1; visibility: visible; transform: none; }
.promo-tip .promo-hover-badge {
  font-size: 9.5px;
  letter-spacing: .1em;
  font-weight: 700;
  text-transform: uppercase;
  color: #c9b184;
  text-align: left;
}
.promo-tip .promo-hover-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  text-align: left;
}
.promo-tip .promo-hover-desc {
  font-size: 12px;
  line-height: 1.6;
  color: #dbe4f6;
  text-align: left;
}

/* ==========================================================================
   31. 后台「驳回管理员操作」（v12.6）
   ========================================================================== */
.revert-tabs { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }

.review-item.is-revert { align-items: flex-start; }
.review-item.is-revert.is-done { opacity: .72; }
.review-item.is-revert .review-main { flex-wrap: wrap; row-gap: 4px; }

.review-tag.is-neutral { background: #eef2fa; color: #46536b; }

/* 这条不是链接（数据可能已被删除），所以用普通文本而不是 a */
.review-res.is-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.review-note {
  width: 100%;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ==========================================================================
   32. 后台「数据备份」（v12.7）
   ========================================================================== */
.bk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
}
.bk-cell {
  background: #f6f8fd;
  border: 1px solid #e3e9f6;
  border-radius: 12px;
  padding: 12px 14px;
}
.bk-cell b {
  display: block;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}
.bk-cell span { display: block; margin-top: 2px; font-size: 11.5px; color: #6b7a97; }

/* 导出：两个范围并排 */
.bk-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 12px;
}
.bk-choice-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #e3e9f6;
  border-radius: 12px;
  background: #fbfcff;
  padding: 15px 16px;
}
.bk-choice-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--navy);
}
.bk-choice-item p {
  flex: 1;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #5a6780;
}
.bk-choice-item .btn { align-self: flex-start; }
.bk-tag {
  font-size: 10.5px; font-weight: 600;
  color: #1c3aa8; background: #e6ecfd;
  border-radius: 999px; padding: 2px 8px;
}

/* 导入 */
.bk-import { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bk-preview {
  margin-top: 14px;
  border: 1px solid #cfdcf5;
  border-radius: 12px;
  background: #f7f9ff;
  padding: 14px 16px;
}
.bk-preview-head { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--navy); }
.bk-meta {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin-top: 6px; font-size: 11.5px; color: #6b7a97;
}
.bk-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0 16px;
  margin-top: 10px;
}
.bk-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 3px 0;
  border-bottom: 1px dashed #e3e9f6;
}
.bk-k { color: #6b7a97; }
.bk-v { color: var(--navy); font-weight: 600; }
.bk-warn {
  margin-top: 12px;
  font-size: 12px; line-height: 1.65;
  color: #8a5a12; background: #fdf6e6;
  border: 1px solid #f0e0bd; border-radius: 10px;
  padding: 9px 12px;
}
.bk-ops { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }