/*! tier2-lite.css — KSpace 第二档 · 第三方控件类名兼容层  r9-20260916（r11 原样保留）
 *
 * 为什么存在：
 *   第二档「知识专题」前端 topic-app.js 是按 Bootstrap 5.3 的第三方控件类名写的
 *   （原文见审计目录同名控件使用规范文档），原设计会引入一套
 *   与线上皮肤不同的第三方样式表。老K 定稿口径：外观必须与第一档一致
 *   （console-theme 体系），第三方皮肤不得进入页面。
 *   因此 r9 在壳适配层拦截第三方样式注入（tier2-shell.js §1），
 *   并由本文件用 console-theme 的既有设计令牌，把第二档真正用到的那些类名补齐。
 *
 * r11 现状（2026-09-16）：知识专题**已并入**（topic-app.js / topic-api.js 随包）；
 *   本文件由"惰性"转为**生效**——知识专题页的全部组件外观由本文件提供。
 *   注意：壳层 tier2-shell.js §1 已删除，因为 topic-app.js 的**资源源头**已本地化
 *   （不再加载任何第三方样式表、不再设置亮色主题标记），无需运行时拦截。
 *
 * 边界（重要）：
 *   - 本文件**只新增类名**，不覆盖线上第一档任何既有选择器；不加 !important 到共用类上。
 *   - 只覆盖 topic-app.js 实际用到的类（下方逐条来自代码统计，不是全量 Bootstrap）。
 *   - 令牌全部取自线上既有 --console-* / --ink / --line / --surface / --accent，不引入新色。
 */

/* ───────── 基础排版容器 ───────── */
.page-content { max-width: 1220px; margin: 0 auto; color: var(--console-text); font-size: .78rem; line-height: 1.6; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4 { color: var(--console-text); }

/* ───────── 栅格（Bootstrap row/col） ───────── */
.row { display: flex; flex-wrap: wrap; margin: 0 -.45rem; }
.row > [class*="col-"] { padding: 0 .45rem; box-sizing: border-box; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.g-2 > [class*="col-"] { margin-bottom: .55rem; }
.g-3 > [class*="col-"] { margin-bottom: .8rem; }
@media (min-width: 768px) {
  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}
@media (min-width: 1200px) {
  .col-xl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
}

/* ───────── 间距工具 ───────── */
.mt-1 { margin-top: .28rem; } .mt-2 { margin-top: .55rem; } .mt-3 { margin-top: .85rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: .55rem; } .mb-3 { margin-bottom: .85rem; }
.me-1 { margin-right: .28rem; }
.p-0 { padding: 0; } .p-3 { padding: .85rem; } .p-lg-4 { padding: .85rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 992px) { .p-lg-4 { padding: 1.2rem; } }
.w-100 { width: 100%; }

/* ───────── Flex 工具 ───────── */
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.align-middle { vertical-align: middle; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: .55rem; } .gap-3 { gap: .85rem; }

/* ───────── 文本工具 ───────── */
.text-secondary { color: var(--console-muted); }
.text-body-secondary { color: var(--console-muted); }
.text-dark { color: var(--console-text); }
.text-danger { color: var(--console-danger); }
.text-end { text-align: right; }
.text-break { word-break: break-word; overflow-wrap: anywhere; }
.text-nowrap { white-space: nowrap; }
.font-monospace { font-family: Consolas, "SFMono-Regular", Menlo, monospace; }
.fs-nano { font-size: .62rem; }
.fs-sm { font-size: .7rem; }
.fs-md { font-size: .78rem; }
.fw-500 { font-weight: 550; }

/* ───────── 按钮 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 30px; padding: 0 .72rem; border: 1px solid var(--console-line);
  border-radius: var(--console-radius); background: var(--console-panel);
  color: var(--console-text); font: inherit; font-size: .72rem; font-weight: 550;
  cursor: pointer; text-decoration: none; transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--console-page); border-color: var(--console-muted); }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-sm { min-height: 25px; padding: 0 .55rem; font-size: .66rem; border-radius: 5px; }
.btn-outline-default { background: var(--console-panel); border-color: var(--console-line); color: var(--console-text); }
.btn-outline-default:hover { border-color: var(--accent, #2f6654); color: var(--accent, #2f6654); background: var(--console-panel); }
.btn-system { background: var(--accent, #2f6654); border-color: var(--accent, #2f6654); color: #fff; }
.btn-system:hover { background: color-mix(in srgb, var(--accent, #2f6654) 88%, #000); border-color: transparent; color: #fff; }
.btn-close {
  width: 1.1rem; height: 1.1rem; padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--console-muted); font-size: .95rem; line-height: 1; cursor: pointer;
}
.btn-close::before { content: "\00d7"; }
.btn-close:hover { color: var(--console-text); background: var(--console-page); }

/* ───────── 标签 / 徽标 ───────── */
.badge {
  display: inline-flex; align-items: center; padding: .12rem .45rem; border-radius: 999px;
  background: var(--console-page); color: var(--console-muted); font-size: .62rem; font-weight: 600;
}
.bg-secondary { background: #eceef3; color: #61667a; }
.bg-success { background: #e2f5ee; color: #17694f; }
.bg-danger { background: var(--danger-soft, #f2ded9); color: var(--console-danger); }
.bg-warning { background: var(--warn-soft, #f3e6cf); color: var(--warn, #9a6427); }
.bg-info { background: #e6eefb; color: #2c5aa0; }
.bg-body-tertiary { background: var(--console-page); }

/* ───────── 表单 ───────── */
.form-label { display: block; margin-bottom: .28rem; color: var(--console-muted); font-size: .66rem; font-weight: 600; }
.form-control, .form-select {
  width: 100%; min-height: 30px; padding: 0 .55rem; box-sizing: border-box;
  border: 1px solid var(--console-line); border-radius: var(--console-radius);
  background: var(--console-panel); color: var(--console-text); font: inherit; font-size: .72rem;
}
.form-control:focus, .form-select:focus { outline: 2px solid color-mix(in srgb, var(--accent, #2f6654) 28%, transparent); outline-offset: 0; border-color: var(--accent, #2f6654); }
.form-control[readonly], .form-control[disabled], .form-select[disabled] { background: var(--console-page); color: var(--console-muted); }
textarea.form-control { min-height: 74px; padding: .45rem .55rem; line-height: 1.55; resize: vertical; }
.form-check { display: flex; align-items: center; gap: .38rem; min-height: 24px; }
.form-check-input { width: .95rem; height: .95rem; margin: 0; accent-color: var(--accent, #2f6654); }
.form-check-label { font-size: .72rem; color: var(--console-text); }

/* ───────── 表格 ───────── */
.table-responsive { width: 100%; overflow-x: auto; border: 1px solid var(--console-line); border-radius: var(--console-radius); background: var(--console-panel); }
.table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.table > thead th { padding: .55rem .6rem; border-bottom: 1px solid var(--console-line); background: var(--console-page); color: var(--console-muted); font-size: .64rem; font-weight: 650; text-align: left; white-space: nowrap; }
.table > tbody td { padding: .55rem .6rem; border-bottom: 1px solid var(--console-line); color: var(--console-text); vertical-align: middle; }
.table > tbody tr:last-child td { border-bottom: 0; }
.table > tbody tr:hover td { background: color-mix(in srgb, var(--console-page) 70%, transparent); }
.table-sm > thead th, .table-sm > tbody td { padding: .38rem .5rem; }

/* ───────── 选项卡 ───────── */
.nav { display: flex; flex-wrap: wrap; gap: .15rem; border-bottom: 1px solid var(--console-line); }
.nav-item { display: inline-flex; }
.nav-link { display: inline-flex; align-items: center; min-height: 32px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--console-muted); font: inherit; cursor: pointer; }
.nav-link:hover { color: var(--console-text); }
.nav-link.active { color: var(--accent, #2f6654); border-bottom-color: var(--accent, #2f6654); font-weight: 600; }
.tab-content { padding-top: .85rem; }
.tab-pane { display: none; }
.tab-pane.show.active { display: block; }
.fade { transition: opacity 180ms ease; }

/* ───────── 卡片 / 面板 ───────── */
.panel { display: flex; gap: .7rem; border: 1px solid var(--console-line); border-radius: var(--console-radius); background: var(--console-panel); box-shadow: var(--console-shadow); overflow: hidden; }
.panel-icon { flex: 0 0 34px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, #2f6654) 9%, transparent); color: var(--accent, #2f6654); font-size: .9rem; }
.panel-content { flex: 1 1 auto; min-width: 0; padding: .85rem 1rem; }
.panel-content > header, .panel-content h2, .panel-content h3 { margin: 0 0 .45rem; font-size: .82rem; font-weight: 650; color: var(--console-text); }
.panel-content p { margin: 0 0 .45rem; color: var(--console-text); }
.panel-content p:last-child { margin-bottom: 0; }

/* ───────── 提示条 ───────── */
.alert { display: flex; align-items: flex-start; gap: .5rem; padding: .6rem .8rem; border: 1px solid var(--console-line); border-left: 3px solid var(--console-muted); border-radius: var(--console-radius); background: var(--console-panel); font-size: .72rem; }
.alert-success { border-left-color: var(--console-success); background: color-mix(in srgb, var(--console-success) 7%, #fff); }
.alert-warning { border-left-color: var(--console-warning); background: color-mix(in srgb, var(--console-warning) 9%, #fff); }
.alert-danger { border-left-color: var(--console-danger); background: color-mix(in srgb, var(--console-danger) 7%, #fff); }
.alert-info { border-left-color: #2c5aa0; background: #f2f6fd; }
.alert-dismissible { position: relative; padding-right: 2rem; }
.alert-dismissible .btn-close { position: absolute; top: .45rem; right: .5rem; }
.alert-link { color: inherit; font-weight: 650; text-decoration: underline; }

/* ───────── 进度 ───────── */
.progress { display: flex; height: 6px; border-radius: 999px; background: var(--console-page); overflow: hidden; }
.progress-bar { background: var(--accent, #2f6654); transition: width 200ms ease; }

/* ───────── 分页 ───────── */
.pagination { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.page-item { display: inline-flex; }
.page-link { min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .45rem; border: 1px solid var(--console-line); border-radius: 5px; background: var(--console-panel); color: var(--console-text); font: inherit; font-size: .68rem; cursor: pointer; }
.page-link:hover { border-color: var(--console-muted); }
.page-item.active .page-link { background: var(--accent, #2f6654); border-color: var(--accent, #2f6654); color: #fff; }
.page-item.disabled .page-link { opacity: .5; pointer-events: none; }

/* ───────── 模态框 ───────── */
.modal { position: fixed; inset: 0; z-index: calc(var(--z-dialog, 40) + 5); display: none; overflow-y: auto; background: rgba(24, 26, 34, .38); }
.modal.show { display: block; }
.modal-dialog { margin: 6vh auto; width: min(720px, calc(100vw - 2rem)); }
.modal-dialog-scrollable .modal-content { max-height: 80vh; display: flex; flex-direction: column; }
.modal-lg { width: min(960px, calc(100vw - 2rem)); }
.modal-content { border: 1px solid var(--console-line); border-radius: var(--console-radius); background: var(--console-panel); box-shadow: 0 18px 50px rgba(24, 32, 38, .16); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--console-line); }
.modal-title { margin: 0; font-size: .85rem; font-weight: 650; }
.modal-body { padding: 1rem; overflow-y: auto; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--console-line); }

/* ───────── 第二档自有 ───────── */
.custom-scroll { scrollbar-width: thin; }
.custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--console-line); border-radius: 999px; }
.border-sm { border: 1px solid var(--console-line); border-radius: var(--console-radius); }

/* 图标：sprite 已本地化为 assets/tier2-icons/sprite.svg（tier2-shell.js 运行时改写 href） */
.sa-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }
/* 2026-09-18 修正：知识专题页与全站其他页观感不一致
 * 真浏览器实测现象：
 *   1) topic-app.js 的 panel() 把 panel-icon 加在面板根上，整块面板被染成
 *      color-mix(accent 9%) 淡底（观感＝米色块），而全站卡片是纯白；
 *   2) panel-icon 带 display:grid 与 place-items:center，面板退化成居中网格项，
 *      卡片标题被居中并按浏览器默认 h2 渲染（21.6px/700），与全站卡片头 .82rem/650 左对齐不符；
 *   3) .panel-hdr / .panel-toolbar / .panel-container 三个类此前在全部前端资源里零 CSS 定义。
 * 修法：面板根改用新类 .topic-panel（不再借用 panel-icon），并补齐三个结构类。
 * 边界：本段只新增选择器，不改动本文件任何既有选择器；色值全部取既有 --console-* 令牌。
 */
.topic-panel { flex-direction: column; gap: 0; }
.panel-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .95rem; border-bottom: 1px solid var(--console-line); background: var(--console-panel);
}
.panel-hdr h2 { margin: 0; color: var(--console-text); font-size: .82rem; font-weight: 650; line-height: 1.4; }
.panel-toolbar { display: inline-flex; align-items: center; gap: .35rem; }
.panel-container { flex: 1 1 auto; min-width: 0; }