/* 站内唯一一份样式表。
 *
 * 视觉基准是 law-search 演示站：深海军蓝顶栏（sticky）+ 金色点缀、浅灰页面底、
 * 白色圆角卡片配柔和投影；提交按钮深蓝、强调按钮金色。这里沿用它的配色变量与
 * 卡片语言，但钩子仍是本站模板自己的语义类名——一个 utility class 都不写。
 *
 * 约束（改样式前先读）：
 * - 不引入内联样式，也不加 <style> 块：CSP 的 style-src 要能收在 'self'。
 * - `.searchbar` 系列钩子被 apps/core/tests/test_searchbar_hook.py 钉着：只认类，
 *   不认 form[role="search"]；`form > .filters` 的间距规则也不能删。
 * - `[x-cloak]`、`[data-reading].text-*`、`mark[data-find]` 是 JS 的样式接口，别动。
 *
 * 换行与编码：本文件按普通 UTF-8 提交即可。
 */

:root {
  /* law-search 同款主色 */
  --navy: #0d2540;
  --navy-2: #14355c;
  --gold: #c8a45c;
  --gold-2: #b8934a;
  --link: #1f6feb;
  --danger: #d93026;
  --ok: #1a9e56;

  --bg: #f5f7fa;
  --card: #ffffff;
  --ink: #24292f;
  --muted: #6a737d;
  --line: #e4e8ee;
  --line-strong: #cdd6e0;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(13, 37, 64, .08), 0 4px 14px rgba(13, 37, 64, .06);

  /* 旧变量名继续可用：主操作色统一成深蓝 */
  --accent: var(--navy);
  --accent-soft: #eef3fa;
  --warn-bg: #fff8e6;
  --warn-line: #e6c35c;
  --error: #d93026;
  --measure: 46rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Alpine 未初始化前要盖住的区块 */
[x-cloak] { display: none !important; }

/* ------------------------------------------------------------------ 文字 */

h1, h2, h3, h4 { line-height: 1.4; margin: 1.6em 0 .5em; font-weight: 600; color: var(--navy); }
h1 { font-size: 1.5rem; margin-top: .4em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; color: var(--muted); }
p { margin: .7em 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }

a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

small { font-size: .85em; color: var(--muted); }
main small { color: var(--muted); }
s { color: var(--muted); }
code, kbd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; }

mark {
  background: #ffe9a8;
  color: inherit;
  padding: 0 .12em;
  border-radius: 2px;
}

ul, ol { padding-left: 1.4em; }
li { margin: .25em 0; }

/* ------------------------------------------------------------------ 页头（深蓝顶栏） */

.site-head {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  /* 滚动收起（见 static/js/site_head.js）。加过渡是为了「滑出去」而不是「啪一下没了」；
     只动 transform，不触发重排。 */
  transition: transform .24s ease;
  will-change: transform;
}

/* 向下滚时顶栏让出视口（长文阅读页多出 60~96px 的阅读面积）。
   JS 只切这一个类；无脚本时这个类永远不会被加上，顶栏照旧常驻。 */
.site-head.head-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .site-head { transition: none; }
}

.site-head-inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: .45rem 20px;
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 24px;
}

.brand { display: flex; align-items: center; gap: 8px; color: #fff; }
a.brand:hover, a.brand:focus-visible { text-decoration: none; }
.brand-icon { font-size: 1.35rem; }
.brand-name { font-size: 1.2rem; font-weight: 700; letter-spacing: .12em; }
.brand-sub {
  font-size: .75rem;
  color: var(--gold);
  border-left: 1px solid rgba(255, 255, 255, .25);
  padding-left: 8px;
  margin-left: 2px;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; }
.site-nav a {
  color: rgba(255, 255, 255, .82);
  padding: 6px 13px;
  border-radius: 6px;
  font-size: .95rem;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.site-nav a.active { color: #fff; background: rgba(255, 255, 255, .14); }

/* 律师工作台下拉：外挂服务的入口（..\workbench\），六项能力收在菜单里。
   主链接直接可点（新窗口），caret 只是提示还有更多；整块由 workbench_url 是否为空控制渲染。 */
.wb-nav { position: relative; }
.wb-nav .wb-toggle { display: inline-flex; align-items: center; gap: 5px; }
.wb-caret { font-size: .7rem; opacity: .7; }
.wb-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 268px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(13, 37, 64, .18);
}
.wb-menu a {
  display: block; padding: 8px 10px; border-radius: 6px;
  color: var(--ink); font-size: .9rem; line-height: 1.35;
}
/* 下拉项在主色深底顶栏之外，必须覆盖 .site-nav a 的白色文字与 hover 底色 */
.wb-menu a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.wb-item-label { display: block; font-weight: 600; }
.wb-item-desc { display: block; color: var(--muted); font-size: .78rem; margin-top: 1px; }
.wb-foot {
  margin: 4px 2px 0; padding: 6px 8px 2px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: .74rem;
}

/* 顶栏统一搜索框 */
.topbar-search { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.topbar-search input[type="search"] {
  width: 170px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: background .15s;
}
.topbar-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .55); }
.topbar-search input[type="search"]:focus { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); }
.topbar-search button {
  border: none;
  background: var(--gold);
  color: #4c3a10;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 700;
}
.topbar-search button:hover { background: #d9b878; }

/* 右侧用户区：登录/注册做成描边小按钮，注册用金色 */
.auth-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .88rem; }
.auth-nav a { color: #fff; }
.auth-nav a.uname { font-weight: 600; }
.auth-nav form { margin: 0; }
.auth-nav .btn-mini {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
}
.auth-nav .btn-mini:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.auth-nav .btn-mini.gold { background: var(--gold); border-color: var(--gold); color: #4c3a10; font-weight: 600; }
.auth-nav .btn-mini.gold:hover { background: #d9b878; }

/* ------------------------------------------------------------------ 主体 */

main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2rem) 3rem;
}

/* 目录页与详情页要放表格和右侧栏，单栏的阅读宽度不够用。 */
main.page-list,
main.page-detail { max-width: 78rem; }

/* 首页整幅铺开：hero 全宽，下面的内容另起容器。 */
main.page-home { max-width: none; padding: 0; }

main > :first-child { margin-top: 0; }

/* 页脚（深蓝） */
footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .75);
  font-size: .82rem;
  margin-top: 3rem;
}
.footer-inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.4rem 20px 1.8rem;
  text-align: center;
  line-height: 1.9;
}
.footer-inner p { margin: 0; }
footer .footer-fine { color: rgba(255, 255, 255, .45); font-size: .78rem; margin-top: .15rem; }
footer a { color: rgba(255, 255, 255, .8); text-decoration: underline; }
footer a:hover { color: #fff; }

/* 提示消息（Django messages 框架的 tags 直接拼成 .msg-<tag>） */
.messages {
  max-width: var(--measure);
  margin: 1rem auto 0;
  padding: 0 clamp(1rem, 4vw, 2rem);
  list-style: none;
}
.messages li {
  margin: .35rem 0;
  padding: .6rem .95rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: .95rem;
}
.msg-success { border-color: #b5e5cf; background: #e6f7f0; color: #0e6b43; }
.msg-error, .msg-danger { border-color: #f5c6c2; background: #fdeaea; color: var(--danger); }
.msg-warning { border-color: var(--warn-line); background: var(--warn-bg); color: #7a5a06; }

/* ------------------------------------------------------------------ 表单 */

form { margin: 1rem 0; }

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

input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="url"], select, textarea {
  max-width: 100%;
  padding: .4rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
}

textarea { width: 100%; resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .12);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

form input, form select { margin: .15rem .35rem .15rem 0; }

button, .button {
  padding: .4rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
button:disabled { opacity: .55; cursor: progress; }
button[type="submit"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}
button[type="submit"]:hover:not(:disabled) { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }

a.button {
  display: inline-block;
  padding: .42rem 1.05rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .95rem;
}
a.button:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; }

/* 收藏/订阅这类开关按钮：按下态要看得出来 */
[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--navy); color: var(--navy); }

label { display: inline-block; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem; }
legend { padding: 0 .3em; font-weight: 600; }

/* 短字段：年份 / 地区 */
.field-year { width: 6.5rem; }
.field-region { width: 8rem; }

/* ------------------------------------------------------------------ 检索框 */

/* 站内第一视觉。钩子只认 `.searchbar` 这个类——用例
   apps/core/tests/test_searchbar_hook.py 钉着两条实测教训：
   - form[role="search"] 的特异性会串改同表单里 .filters 的排版；
   - 属性选择器选不中表单内的 <div class="searchbar">，高级面板会被排到右边。 */
.searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 1.2rem 0;
}

.searchbar input[type="search"],
.searchbar .field-organ {
  flex: 1 1 20rem;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: .6rem 1.1rem;
  font-size: 1.02rem;
  line-height: 1.5;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.searchbar input[type="search"]:focus-visible {
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .12);
}

/* 制定机关比关键词短一档，别和关键词平分整行。 */
.searchbar .field-organ { flex: 0 3 14rem; }

.searchbar select { margin: 0; }
.searchbar button[type="submit"] { padding: .55rem 1.6rem; border-radius: 999px; }
.searchbar a.button { margin: 0; }

/* 「高级」这种开关长得像链接，不该抢提交按钮的视觉权重。 */
button.linklike {
  padding: .3rem .45rem;
  border: 0;
  background: none;
  color: var(--link);
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: .18em;
}
button.linklike:hover:not(:disabled) { border: 0; color: var(--link); filter: none; }
button.linklike[aria-expanded="true"] { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ 高级检索面板 */

.advanced-panel {
  margin: -.4rem 0 1.2rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .55rem .9rem;
}
.advanced-panel .filter select,
.advanced-panel .filter input { width: 100%; min-width: 0; margin: 0; }
.advanced-panel input[type="number"] { max-width: 8rem; }
.advanced-panel input[type="date"] { max-width: 12rem; }
.panel-hint, .panel-note { margin: .7rem 0 0; font-size: .85rem; color: var(--muted); }
.panel-note { opacity: .8; }

/* 案由下钻候选（static/js/cause_picker.js）。浮层定位在输入框下面，所以宿主要有
   position: relative；z-index 压住同一栅格里后面的字段。 */
.cause-picker { position: relative; }
.picker-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 100%;
  max-width: 26rem;
  margin-top: .2rem;
  padding: .45rem .5rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 10px 28px rgba(13, 37, 64, .16);
}
.picker-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.picker-tabs button {
  padding: .1rem .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: .82rem;
}
.picker-tabs button.on { border-color: var(--navy); color: var(--navy); background: var(--accent-soft); }
.picker-list { margin: .3rem 0 0; padding: 0; list-style: none; max-height: 15rem; overflow-y: auto; }
.picker-list button {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  padding: .2rem .35rem;
  border: 0;
  border-radius: .25rem;
  background: none;
  font-size: .9rem;
  text-align: left;
}
.picker-list button:hover { border: 0; background: var(--accent-soft); color: var(--ink); filter: none; }
.picker-count { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 官方《民事案件案由规定》的上级路径自成一行：案由名常到 12 字，跟路径挤一行两边都读不完。 */
.picker-path { flex: 1 0 100%; color: var(--muted); font-size: .78rem; }
.picker-parts { padding-top: .4rem; }
.picker-note { margin: .35rem 0 0; font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------ 检索页双栏（law-search 版式） */

/* 左筛选卡 + 右结果：筛选卡与关键词行在同一张表单里，点「查询」整表提交。 */
.layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* .filter-card 与 .advanced-panel 同用在一张卡上：这里统一按左栏卡片来排。 */
.filter-card { padding: 1rem 1.05rem 1.1rem; }
.layout .advanced-panel { margin: 0; }
.filter-card h4 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .7rem;
  font-size: .98rem;
  color: var(--navy);
}
.filter-card h4::before { content: ""; width: 4px; height: 16px; background: var(--gold); border-radius: 2px; }
/* 左栏字段竖排：标签在上、控件在下，宽度吃满卡片。 */
.filter-card .filter { margin: 0 0 .75rem; }
.filter-card .filter select, .filter-card .filter input { width: 100%; min-width: 0; }
.filter-card button[type="submit"] { width: 100%; }
.filter-card .panel-hint { margin: .6rem 0 0; }

.results-col { min-width: 0; }
.lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem .8rem;
  margin: 1.6rem 0 0;
}
.lane-head h3 { margin: 0; }
.results-col .lane-head + .rows { margin-top: .8rem; }
.more-link { font-size: .88rem; }

/* 生效条件回显：让用户看清「这一屏结果是哪些条件筛出来的」。 */
.applied {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
  align-items: baseline;
  margin: .3rem 0 .8rem;
  font-size: .9rem;
}
.applied-label { color: var(--danger); font-weight: 700; }
.applied-label::after { content: "："; }

/* 单条已选条件：白底描边小卡 + 删除叉（law-search 的 kw-chip 加可点的 ×）。 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .55rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: .9rem;
}
.chip-x {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 .1rem;
}
.chip-x:hover { color: var(--danger); text-decoration: none; }

/* 左侧快捷筛选：点一项即带条件检索，选中项深蓝实底。 */
.quick-filters .quick-group { margin: 0 0 .85rem; }
.quick-group-label { margin: 0 0 .3rem; font-size: .85rem; color: var(--muted); }
.quick-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.quick-option {
  display: inline-block;
  padding: .16rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: .88rem;
  color: var(--ink);
}
.quick-option:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; }
.quick-option.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
/* 地区候选多：限高滚动 */
.quick-group-scroll .quick-options { max-height: 9.5rem; overflow-y: auto; }

.help { font-size: .85em; color: var(--muted); margin-top: .2rem; }
.error { color: var(--error); font-size: .9em; margin: .3rem 0; }
.warn {
  margin: .8rem 0;
  padding: .6rem .9rem;
  border: 1px solid var(--warn-line);
  border-left: 4px solid var(--gold-2);
  border-radius: 8px;
  background: var(--warn-bg);
  color: #7a5a06;
}
[role="alert"] { color: var(--error); font-weight: 600; }

.disclaimer {
  margin-top: 2rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--line-strong);
  font-size: .88em;
  color: var(--muted);
}

/* ------------------------------------------------------------------ 表格 */

table { border-collapse: collapse; width: 100%; margin: .8rem 0; }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { border-bottom: 2px solid var(--line-strong); font-weight: 600; }
tbody tr:hover { background: rgba(13, 37, 64, .035); }
table table { margin: 0; }

/* 直接躺在页面上的表格（订单页）与计算器输入表：整块做成白卡片。 */
main > table,
table.tool-form {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
main > table th, main > table td,
table.tool-form th, table.tool-form td { padding: .6rem .85rem; }
main > table thead th { background: #f2f5f9; color: var(--navy); border-bottom: 2px solid var(--line-strong); }

/* 计算器输入表：左列标签、右列控件 */
.tool-form th { width: 12rem; font-weight: 500; color: var(--muted); }
.tool-form td { min-width: 14rem; }
.tool-form input[type="text"] { width: 100%; margin: 0; }
.tool-form select { width: 100%; margin: 0; }

/* ------------------------------------------------------------------ 列表 / 分页 */

.pagination, main nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  align-items: center;
  justify-content: center;
  margin: 1.4rem 0;
}

/* 版本切换行不是分页：回到常规左对齐的行内流。 */
main nav.versions { display: block; margin: .9rem 0; }

/* 分页码做成可点的小方块，当前页深蓝实底。 */
.pagination a, .pagination .current {
  display: inline-block;
  min-width: 2.1rem;
  text-align: center;
  padding: .28rem .7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  font-size: .9rem;
}
.pagination a:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; }
.pagination .current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* 内容列表：首页卡片（.cards）与笔记（.my-notes）各自另有版式；其余结果列表
   每行一张白卡片（law-search 的 .result-item 版式）。 */
main > ul:not(.cards), main > section > ul, .result-list, .rows {
  list-style: none;
  padding: 0;
}
.rows {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 1rem 0;
}
.rows > li {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.05rem 1.25rem;
}
.rows > .row-empty {
  background: none;
  box-shadow: none;
  padding: 3rem 0;
  text-align: center;
  color: var(--muted);
}

.row-title { font-weight: 600; color: var(--navy); font-size: 1.02rem; }
.row-title:hover { color: var(--link); }
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.1rem;
  margin: .3rem 0 0;
  font-size: .88rem;
  color: var(--muted);
}
.meta-item { display: inline-flex; gap: .3em; align-items: baseline; min-width: 0; }
.meta-label { color: var(--ink); opacity: .55; }
.meta-label::after { content: "："; }

/* 检索结果里的命中片段：law-search 的 snippet 版式——浅底 + 左侧竖线。 */
.excerpt {
  margin: .5rem 0 0;
  font-size: .92rem;
  line-height: 1.75;
  color: #424a53;
  background: #f8fafc;
  border-left: 3px solid #e3e9f1;
  padding: .5rem .85rem;
  border-radius: 0 6px 6px 0;
  overflow-wrap: break-word;
}

.result-count { margin: .9rem 0 .2rem; font-size: .9rem; color: var(--muted); }

/* 敏感词拦截提示：醒目但不回显命中的词或类别 */
.blocked-tip {
  margin: 1.2rem 0;
  padding: .8rem 1rem;
  border: 1px solid #f5c6c2;
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  background: #fdeaea;
  color: var(--danger);
  font-weight: 600;
}

/* ---- 反爬相关的提示（apps/core/services/bot_guard.py）---- */

/* 限流提示：四个检索页共用（templates/core/_rate_limited.html）。
   配色刻意用金色而不是红色 —— 这是「等一下」不是「你错了」，
   红色会让人以为账号或权限出了问题。 */
.rate-limited-tip {
  margin: 1.2rem 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #fdfaf3;
  color: var(--ink);
}

/* 匿名翻页到顶的提示（templates/core/_anon_page_capped.html）。 */
.anon-capped-tip {
  margin: 1rem 0;
  padding: .8rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink);
  font-size: .9rem;
}
.anon-capped-tip a { color: var(--link); font-weight: 600; }

/* 反爬蜜罐：只对「解析 HTML 的脚本」可见，对任何真人不可达。
   display:none 而不是「移到屏幕外」—— 后者会被读屏和 Tab 键摸到。 */
.hp-trap-wrap { display: none; }

/* ===== 法律文书页（用户协议 / 隐私政策） ===== */
.legal-page { max-width: var(--measure); margin: 0 auto; }
.legal-page h1 { margin-top: .4em; }
.legal-page h2 { margin-top: 1.8em; padding-bottom: .25rem; border-bottom: 2px solid var(--line); font-size: 1.1rem; }
.legal-meta { color: var(--muted); font-size: .88rem; }
.legal-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: .8rem 0; font-size: .92rem; }
.legal-table th, .legal-table td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table thead th { background: #f2f5f9; color: var(--navy); font-weight: 600; }
.legal-table tr:last-child th, .legal-table tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------ 法规正文 */

.versions { font-size: .92rem; color: var(--muted); margin: .9rem 0; }
.versions a { color: var(--muted); }
.versions a:hover { color: var(--navy); }
.versions a.current { color: var(--navy); font-weight: 700; }

.articles { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; margin: .6rem 0 0; }
.articles > li {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: .7rem 1rem .8rem;
  scroll-margin-top: 4.75rem;
}
.articles > li:target { border-left-color: var(--gold-2); background: #fdfaf3; }
.articles > li strong a { font-weight: 600; color: var(--gold-2); }

/* 章/节标题：拆条文时写进每条的 heading，详情页按相邻同名分组，一组只出现一次。 */
.article-chapter {
  margin: 1.4rem 0 .1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-2);
  letter-spacing: .02em;
}
.article-chapter + .articles > li:first-child { margin-top: .2rem; }

.article-content { line-height: 1.95; }

/* ------------------------------------------------------------------ 会员中心（定价页） */

.vip-hero {
  background: linear-gradient(135deg, #2b1d05, #5b4513 45%, #8a6a2a);
  color: #f5e9cf;
  text-align: center;
  padding: 2.4rem 1.2rem 2.2rem;
  border-radius: var(--radius);
  margin: 1rem 0 1.6rem;
}
.vip-hero h2 { margin: 0 0 .4rem; font-size: 1.5rem; letter-spacing: .1em; color: #f5e9cf; }
.vip-hero p { margin: 0; font-size: .92rem; color: rgba(245, 233, 207, .8); }
.vip-status-bar {
  display: inline-block;
  margin: .9rem auto 0;
  padding: .45rem 1.3rem;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #f0dfb6;
  font-size: .92rem;
}
.vip-status-bar a { color: #ffd591; text-decoration: underline; }

/* 套餐卡：law-search 的 .plan 版式——热门档金色描边 + 顶部角标。 */
.plans { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.plan { position: relative; }
.plan.hot { border-color: var(--gold); }
.plan-tagline {
  position: absolute;
  top: -.7rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #4c3a10;
  font-size: .78rem;
  font-weight: 700;
  padding: .15rem .85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.price small { font-size: .9rem; font-weight: 400; color: var(--muted); }
.card button[type="submit"] {
  width: 100%;
  margin-top: .5rem;
  background: linear-gradient(120deg, var(--gold), #dbb875);
  border-color: var(--gold);
  color: #4c3a10;
  font-weight: 700;
}
.card button[type="submit"]:hover:not(:disabled) {
  background: linear-gradient(120deg, #d9b878, #c8a45c);
  border-color: var(--gold);
  color: #4c3a10;
}

/* 免费档说明：白卡片 + ✓ 清单 */
.panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 1.4rem 0;
}
.panel h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
}
.panel h3::before { content: ""; width: 4px; height: 16px; background: var(--gold); border-radius: 2px; }
.perks ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.perks li { position: relative; padding: .25rem 0 .25rem 1.4rem; color: #4a545e; font-size: .95rem; }
.perks li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }

/* ------------------------------------------------------------------ 首页 / 运营位 */

/* hero：深蓝渐变大区 + 居中检索（law-search 首页版式）。 */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #1d4a7c 100%);
  color: #fff;
  text-align: center;
  padding: 56px 20px 60px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "§";
  position: absolute;
  right: 4%;
  top: -30px;
  font-size: 200px;
  color: rgba(255, 255, 255, .05);
  font-family: Georgia, serif;
  line-height: 1;
}
.hero h1 { font-size: 2rem; letter-spacing: .12em; color: #fff; margin: 0 0 .45rem; }
.hero .hero-sub { color: rgba(255, 255, 255, .72); font-size: .95rem; margin: 0 auto 1.7rem; }
.hero .search-panel { max-width: 620px; margin: 0 auto; position: relative; z-index: 2; }
.hero .searchbar { margin: 0; justify-content: center; }
.hero .searchbar input[type="search"] { background: #fff; border-color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); }
.hero .searchbar button[type="submit"] { background: var(--gold); border-color: var(--gold); color: #4c3a10; font-weight: 700; }
.hero .searchbar button[type="submit"]:hover:not(:disabled) { background: #d9b878; border-color: #d9b878; }
.hero .hot-kws { margin: 1.1rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .65); }
.hero .hot-kws a { color: #ffd591; margin: 0 .35rem; }

.home-body { max-width: 72rem; margin: 0 auto; padding: 1.6rem clamp(1rem, 4vw, 2rem) 2rem; }

.site-banners { margin: 1rem 0; }
/* 会员状态 / 运营横幅：law-search 的金色 promo 调。 */
.site-banner {
  margin: .5rem 0;
  padding: .8rem 1.1rem;
  border: 1px solid #eadfc8;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: #faf5ea;
  color: #5c4d28;
}
.site-banner a { color: #8a6a2a; font-weight: 600; }
.site-banner strong { display: block; }
.site-banner small { color: #8a7343; }

.cards, .tool-cards {
  display: grid;
  /* auto-fit：卡片数量少于轨道数时收掉空轨道，三张卡也能铺满整行。 */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.cards > li, .cards > .card, .tool-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 1.2rem 1.25rem;
  transition: transform .15s, box-shadow .15s;
}
.cards > li:hover, .tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(13, 37, 64, .14);
}
.cards > li h3, .tool-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.cards > li h3 a, .tool-card h3 a { color: var(--navy); }
.cards > li p, .tool-card p { margin: 0; font-size: .92em; color: var(--muted); }

/* ===== 首页热搜榜 ===== */
.hot-searches { margin: 2rem 0 0; }
.hot-searches h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; margin: 0 0 .2rem; }
.hot-searches h2::before { content: ""; width: 5px; height: 20px; background: var(--gold); border-radius: 3px; }
.hot-searches .hot-meta { color: var(--muted); font-size: .82rem; margin: 0 0 .6rem; }
.hot-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hot-chip {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .9rem;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.hot-chip:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; transform: translateY(-1px); }

/* 定价卡（billing/pricing.html 的 <section class="card">）：law-search 的 .plan 版式。 */
.cards > .card { display: flex; flex-direction: column; }
.price { font-size: 2.1rem; font-weight: 800; color: var(--navy); margin: .3rem 0 .2rem; }
.price strong { font-weight: 800; }
.card ul { list-style: none; padding: 0; margin: .6rem 0; flex: 1; }
.card ul li { position: relative; padding: .3rem 0 .3rem 1.4rem; color: #4a545e; font-size: .95rem; }
.card ul li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.card button[type="submit"] { width: 100%; margin-top: .4rem; }

.tool-result {
  margin: 1.4rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.tool-result h3 { margin-top: 0; }

/* ------------------------------------------------------------------ 收藏 / 笔记 */

.save-tools {
  margin: 1.2rem 0;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}
.save-tools button { margin-right: .4rem; }
.save-tools-error { color: var(--error); }
.my-notes { list-style: none; padding: 0; }
.my-notes li {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  align-items: baseline;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--line);
}
.my-notes li span { flex: 1 1 14rem; }

/* ------------------------------------------------------------------ 目录页 */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: end;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.filter { display: flex; flex-direction: column; gap: .15rem; font-size: .88rem; color: var(--muted); }
.filter select, .filter input { margin: 0; min-width: 9rem; }

/* 目录页把胶囊行和筛选块装进同一张表单：这时 `form { margin: 1rem 0 }` 管不到块级筛选，
   所以只给「表单直接子元素」这一种情况补上间距——独立成表单的 `.filters`（案例目录页）不受影响。 */
form > .filters { margin-top: .5rem; }

/* ------------------------------------------------------------------ 详情页 */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}

/* 文档头：law-search 的 .doc-head 卡片。 */
.doc-head {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.6rem;
  margin: 0 0 1rem;
}
.doc-head h2 { margin: 0 0 .5rem; font-size: 1.45rem; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  align-items: baseline;
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
}

/* 徽章：默认浅蓝药丸；时效性必须一眼分得清——引错一版废止文本是后果最重的误读。 */
.badge {
  display: inline-block;
  padding: .08rem .6rem;
  border: 1px solid #d6e2ef;
  border-radius: 999px;
  font-size: .8rem;
  background: #eef3f9;
  color: #45607d;
}
.badge-ok { border-color: #bfe8d6; background: #e6f7f0; color: #0e8a5f; }
.badge-warn { border-color: #f2ddb5; background: #fdf3e0; color: #b06f0e; }
.case-number { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

/* 右侧栏：滚动时留在屏幕上（顶栏是 sticky 的，top 要让过它），读长正文时目录和笔记不用来回翻。 */
.rail {
  position: sticky;
  top: 4.6rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: .92rem;
}
.rail-block {
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.rail-block h3 { margin: 0 0 .4rem; font-size: .95rem; }
.rail .save-tools { margin: 0; }

.toc { list-style: none; margin: 0; padding: 0; }
.toc li { margin: .1rem 0; border: 0; padding: .1rem 0; }
.toc a { display: block; color: var(--ink); }
.toc a:hover { color: var(--navy); }

.size-row { display: flex; gap: .4rem; align-items: baseline; margin: .3rem 0; }
.size-row button { padding: .1rem .5rem; }
.find-row { display: flex; gap: .4rem; align-items: center; margin: .3rem 0; }
.find-row input { flex: 1; min-width: 0; margin: 0; }
.find-count, .find-empty { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.find-nav { display: flex; gap: .4rem; margin: .3rem 0 0; }
.find-nav button { padding: .1rem .5rem; }
.cite { font-size: .88rem; color: var(--muted); }

/* 详情页右栏的相关推荐 */
.related-list { list-style: none; margin: 0; padding: 0; }
.related-list li { margin: 3px 0; }
.related-list a { display: block; color: var(--ink); overflow-wrap: anywhere; }
.related-list a:hover { color: var(--navy); }

/* 字段表：一行一组「展示名 → 值」，名称由后台配置给。整组一张白卡片，标题带金色短杠。 */
.field-group {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 1rem 0;
  /* 目录点击跳到这里时要让过吸顶顶栏，标题不能被盖住。 */
  scroll-margin-top: 4.75rem;
}
.field-group > h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .6rem;
  font-size: 1.05rem;
}
.field-group > h3::before { content: ""; width: 4px; height: 16px; background: var(--gold); border-radius: 2px; }

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 0 clamp(1rem, 3vw, 2rem);
  margin: .6rem 0 0;
}
.field {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0 .8rem;
  padding: .3rem 0;
  border-bottom: 1px dotted var(--line);
  break-inside: avoid;
}
.field dt { color: var(--muted); font-weight: 500; }
.field dd { margin: 0; overflow-wrap: anywhere; }
/* 多行文本一整块占满一行：夹在窄列里读不动。 */
.field-block { grid-column: 1 / -1; grid-template-columns: 1fr; }
.field-block dt { margin-bottom: .2rem; font-weight: 600; color: var(--ink); }
.field-prose { line-height: 1.95; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags li {
  margin: 0;
  padding: .05rem .55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  font-size: .88em;
  color: #45607d;
}

/* 整篇正文：单独一张白卡片，行距和段距按阅读来排。
   注意不要加 `white-space: pre-wrap`——正文已按自然段切成 `<p>`（core 的 paragraphs 过滤器），
   模板源码里的换行会被 pre-wrap 再渲染一遍，凭空多出一堆空行。 */
.doc {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 1rem 0;
  scroll-margin-top: 4.75rem;
}
.doc > h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .6rem;
  font-size: 1.02rem;
}
.doc > h3::before { content: ""; width: 4px; height: 16px; background: var(--gold); border-radius: 2px; }

.doc-body {
  line-height: 2;
  overflow-wrap: anywhere;
}

/* 自然段首行缩进两格。裁判文书原文的缩进是全角空格，实测落款又用全角空格对齐签名
   （「审判长　　陈军」），所以原文里的空格一律不参与排版：切段时只剥行首那一点，
   缩进全部由这里给——换字号时缩进跟着字号走，不会像手打空格那样错位。 */
.doc-body p,
.field-prose p,
.article-content p {
  margin: .12em 0;
  text-indent: 2em;
}
/* 条文第一款接着条号读（「第一条　为了…」），缩进来就成了断句；从第二款起才各缩两格。 */
.article-content p:first-child { text-indent: 0; }

/* ---------------------------------------------------------------- 正文里的法条引用
   案例文书（以及将来任何带引用索引的正文）里，`《民法典》第一千一百六十五条` 这类
   引用被渲染成 `<a class="cite">`，鼠标悬浮弹出条文全文（见 static/js/cite_hover.js）。
   视觉与「律师工作台」法规详情页的阅读区保持一致：虚线底边表示「可看原文」，
   悬浮时实线 + 淡底表示「正在看」。 */
.doc-body a.cite,
.field-prose a.cite,
.article-content a.cite {
  color: #185fa5;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  cursor: help;
  padding-bottom: .5px;
}
.doc-body a.cite:hover,
.field-prose a.cite:hover,
.article-content a.cite:hover {
  background: rgba(24, 95, 165, .12);
  border-bottom-style: solid;
}
/* 键盘可达：Tab 聚焦时与悬浮同款反馈 */
.doc-body a.cite:focus-visible,
.field-prose a.cite:focus-visible {
  outline: 2px solid rgba(24, 95, 165, .45);
  outline-offset: 1px;
}

/* 法律名超链接：点「民事诉讼法」这类法名直接跳法律详情页（与条号链接同色，但
   用 pointer 光标提示「可点击跳转」，而非仅悬浮预览）。 */
.doc-body a.cite-law,
.field-prose a.cite-law,
.article-content a.cite-law {
  color: #185fa5;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  cursor: pointer;
  padding-bottom: .5px;
}
.doc-body a.cite-law:hover,
.field-prose a.cite-law:hover,
.article-content a.cite-law:hover {
  background: rgba(24, 95, 165, .12);
  border-bottom-style: solid;
}

/* ---------------------------------------------------------------- 引用悬浮卡片
   position: fixed + JS 给 left/top（相对视口），卡片不参与正文排版、不会把段落撑开。
   .below 表示「卡片在引用下方」，无此类的默认状态是「在引用上方」——
   用 transform 上移自身高度，这样 JS 只需算一个 top，不必两种情形分别取值。 */
.citecard {
  position: fixed;
  z-index: 80;
  display: none;
  width: min(396px, calc(100vw - 32px));
  max-width: calc(100vw - 16px);
  /* 卡片整体不超出视口：高度超了由 .ccbody 自己滚（它是 flex 子项，min-height:0 才肯缩）。
     不留死高度——条文长短差别极大，写死会被长条文顶穿。 */
  max-height: calc(100vh - 24px);
  padding: 10px 12px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(13, 37, 64, .16);
  font-size: .84rem;
  line-height: 1.75;
  text-align: left;
  flex-direction: column;
}
.citecard:not(.below) { transform: translateY(-100%); }

/* 透明「桥」：卡片紧贴引用，但视觉上要留一点缝，于是把缝做进卡片的**命中区**——
   在朝引用那一侧伸出一条 8px 的无色区域（::before）。这样鼠标从引用挪到卡片的
   整条路径都落在卡片自己的盒子里，事件层不会再判成「走开了」。
   只加自定义属性里的偏移，不写内联样式（CSP 的 style-src 收在 'self'）。 */
.citecard::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: transparent;
}
.citecard.below::before { top: -8px; }
.citecard:not(.below)::before { bottom: -8px; }
.citecard .cchd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.citecard .cclaw { color: var(--muted); }
.citecard .ccno { font-weight: 600; color: #185fa5; }
.citecard .ccch { margin: 0 0 4px; font-size: .8rem; color: var(--muted); }
/* 版本判定条：适用版本标签 + 更新提示。金色标签区分于正文，
   橙色小字提示「有更新版本」——这是防误读的关键信息，不能和正文混在一起。 */
.citecard .ccver {
  margin: 0 0 4px;
  font-size: .78rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.citecard .ccver em {
  font-style: normal;
  font-weight: 600;
  color: #8a6d1f;
  background: #fdf6e3;
  padding: 0 5px;
  border-radius: 3px;
}
.citecard .ccverwarn { color: #8a5300; }
.citecard .ccverwarnonly { color: #8a5300; }
/* 卡片正文区：卡片高度受 place() 给的 maxHeight 限制，多出来的部分全由这里滚。
   min-height:0 是关键——flex 子项默认 min-height:auto 会撑满内容、撑破卡片，
   写 0 才肯收缩并长出滚动条。flex:1 让它吃掉卡片除表头外的全部高度。
   max-height 给个上限：条文短时卡片自然收缩，条文长时也不会一路顶到视口边。 */
.citecard .ccbody { flex: 1 1 auto; overflow: auto; min-height: 0; max-height: 340px; }
/* 卡片里每个自然段各自缩进两字：只用一条 pre-wrap 的话 text-indent 只管首行。 */
.citecard .ccpara { margin: 0 0 .45em; text-indent: 2em; }
.citecard .ccpara:last-child { margin-bottom: 0; }
.citecard .ccmsg { margin: 0; color: var(--muted); }
.citecard .ccmsg.warn { color: #b45309; }

/* 字号切换由 static/js/reading.js 加类，不写内联样式（CSP 的 style-src 收在 'self'）。 */
[data-reading].text-s { font-size: .9rem; }
[data-reading].text-l { font-size: 1.125rem; }
[data-reading].text-xl { font-size: 1.3rem; }

/* 本篇内查找的命中标记：当前那一处要跳出来，否则「3/17」看不出是哪一处。 */
mark[data-find] { background: #ffe58a; }
mark.hit-current { background: #ff9f43; color: #fff; }

/* ------------------------------------------------------------------ 窄屏 */

@media (max-width: 720px) {
  .site-head { position: static; }
  .site-head-inner { padding: .4rem 14px; gap: .3rem 12px; }
  .brand-sub { display: none; }
  /* 导航换行到品牌下面一行，横向滚动兜底 */
  .site-nav { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 2px; }
  .topbar-search { order: 4; flex-basis: 100%; }
  .topbar-search input[type="search"] { flex: 1; width: auto; }

  .hero { padding: 40px 16px 44px; }
  .hero h1 { font-size: 1.5rem; letter-spacing: .08em; }

  .home-body { padding: 1.4rem 14px 2.4rem; }

  .tool-form, .tool-form tbody, .tool-form tr, .tool-form th, .tool-form td { display: block; width: auto; }
  .tool-form tr { padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .tool-form th { border: 0; padding-bottom: 0; }
  .tool-form td { border: 0; padding-top: .2rem; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  /* 窄屏收成单列，侧栏跟到正文后面：sticky 在手机上只会挡住正文。 */
  .detail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* 检索页双栏在窄屏收成单列：筛选卡排到关键词行下面、结果前面。 */
  .layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- 认证页（注册/登录/找回密码）
 *
 * 版式：左侧深蓝品牌面板 + 右侧白色卡片，与站内「深蓝顶栏 + 金色点缀 + 白卡片」
 * 的语言一致，但把主色面积放大，让注册/登录这两个「门面页」显得更完整。
 *
 * 覆盖策略：登录/注册/登出/找回密码都有专门模板（走 .auth-wrap）；
 * 其余 allauth 页面（改密码、邮箱管理、账号停用…）没单独写模板，
 * 它们产出的是一段**没有类名**的裸表单 —— 由本文件末尾的 .auth-page > form
 * 用元素选择器兜底，免得在站点外壳里裸奔。
 */

.auth-page {
  max-width: 1060px;
  padding: 2.5rem clamp(1rem, 4vw, 2rem) 4rem;
}

.auth-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
  gap: 26px;
  /* stretch（不是 start）：注册页比登录页长得多，左panel 跟着卡片等高才不显得
     「一块深蓝浮在左边半空」。 */
  align-items: stretch;
}

/* ---- 左侧品牌面板 ---- */

.auth-aside {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: 40px 36px;
  /* 面板要跟右侧卡片等高（.auth-wrap 是 stretch），内容随之垂直居中，
     否则注册页那种长卡片会让文字全挤在面板顶部、下面一大片空深蓝。 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
  color: #eaf0f8;
  background: linear-gradient(152deg, var(--navy) 0%, var(--navy-2) 58%, #1d4571 100%);
  box-shadow: 0 10px 30px rgba(13, 37, 64, .18);
}

/* 右下角金色光斑：整块深蓝容易发闷，用一层柔和的金色提一下。 */
.auth-aside::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 164, 92, .42), rgba(200, 164, 92, 0) 70%);
}

.auth-aside-inner { position: relative; z-index: 1; }

.auth-aside-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.auth-aside-icon { font-size: 1.7rem; line-height: 1; color: var(--gold); }
.auth-aside-name { font-size: 1.55rem; font-weight: 700; letter-spacing: .14em; color: #fff; }
.auth-aside-sub {
  margin: 0 0 30px;
  font-size: .92rem;
  letter-spacing: .1em;
  color: rgba(234, 240, 248, .7);
}

.auth-aside-list { list-style: none; margin: 0 0 30px; padding: 0; }
.auth-aside-list li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: .95rem;
  line-height: 1.7;
  color: rgba(234, 240, 248, .9);
}
.auth-aside-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.auth-aside-list b { color: #fff; font-weight: 600; }
.auth-aside-foot { margin: 0; font-size: .8rem; color: rgba(234, 240, 248, .5); }

/* ---- 右侧卡片 ---- */

.auth-card {
  padding: 34px 32px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.auth-head { margin: 0 0 4px; }
.auth-title { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: .04em; color: var(--navy); }
.auth-sub { margin: 0; font-size: .88rem; line-height: 1.8; color: var(--muted); }
/* 金色短横线：与站内卡片的小节标题同一个装饰语言 */
.auth-head::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--gold);
}

.auth-form { margin: 22px 0 0; }

/* ---- 字段 ---- */

.afield { margin: 0 0 16px; }
.afield-label {
  display: block;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
}
.afield-req { margin-left: 3px; color: var(--danger); }

/* 站内全局给 input 留了右外边距（form input { margin: .15rem .35rem ... }），
   在认证页要清掉，否则输入框和右边框之间会空一块。 */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"] {
  width: 100%;
  margin: 0;
  padding: .62rem .78rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fbfcfe;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-form input[type="text"]:focus,
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="tel"]:focus { background: #fff; }

.afield-hint { margin: 6px 0 0; font-size: .8rem; line-height: 1.65; color: var(--muted); }
.afield-hint ul { margin: 4px 0 0; padding-left: 1.15em; }
.afield-hint li { margin: 0; }
.afield-hint a { color: var(--link); }
.afield-err { margin: 6px 0 0; font-size: .82rem; color: var(--danger); }
.afield.is-invalid input[type="text"],
.afield.is-invalid input[type="email"],
.afield.is-invalid input[type="password"],
.afield.is-invalid input[type="tel"] { border-color: var(--danger); background: #fff8f7; }

/* ---- 验证码那一行 ---- */

.acode-row { display: flex; gap: 10px; }
.acode-row input { flex: 1 1 auto; min-width: 0; letter-spacing: .32em; font-family: Consolas, Menlo, monospace; }
.acode-btn {
  flex: 0 0 auto;
  padding: .62rem 1rem;
  border: 1px solid var(--navy);
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
}
.acode-btn:hover:not(:disabled) { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
/* 倒计时期间保持灰态而不是半透明：半透明配上跳动的秒数会显得像坏掉了 */
.acode-btn:disabled {
  background: #eef1f6;
  border-color: var(--line-strong);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}

.afield-msg { min-height: 1.15em; margin: 6px 0 0; font-size: .82rem; }
.afield-msg.is-ok { color: var(--ok); }
.afield-msg.is-error { color: var(--danger); }
.afield-msg.is-info { color: var(--muted); }

/* ---- 图形验证码 ---- */

.acaptcha-row { display: flex; align-items: center; gap: 10px; }
/* 选择器写成 .acaptcha-row input 而不是 .acaptcha-input：要盖过上面那条
   `.auth-form input[type="text"] { width: 100% }`（特异度 0,2,1）。
   同理这里给 flex 而不是 width —— 宽度交给 flex 分配，右边才放得下图片和按钮。 */
.acaptcha-row input {
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: .28em;
  font-family: Consolas, Menlo, monospace;
  /* 只影响观感：真正的大小写归一在服务端做（services/captcha.py::normalize_answer），
     前端 CSS 不是安全边界。 */
  text-transform: uppercase;
}
.acaptcha-img {
  flex: 0 0 auto;
  display: block;
  width: 132px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg-2);
  cursor: pointer;
}
.acaptcha-refresh {
  flex: 0 0 auto;
  padding: .5rem .72rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--navy);
  font-size: .82rem;
  white-space: nowrap;
}
.acaptcha-refresh:hover:not(:disabled) { border-color: var(--navy); background: var(--bg-2); }
.acaptcha-refresh:disabled { color: var(--muted); cursor: not-allowed; }
/* 「换一张」的提示行平时不该占位，否则整块会莫名多出一行空白。 */
.acaptcha .afield-msg { min-height: 0; }

/* ★ hidden 必须真的隐藏。注册页发码成功后用 el.hidden = true 把整个验证码控件
   收起来（换成下面那句「已通过」），若这里没有 !important 兜底，任何一条把
   display 设回 block 的规则都会让收起失效 —— 表现成「点了发码，图还在那儿」，
   而 JS 里一切正常，属于最难查的那类。 */
[hidden] { display: none !important; }
/* 发码成功后替代验证码控件的那句提示。 */
.acaptcha-done { color: var(--ok); }

/* ---- 勾选框行 ---- */

.afield-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .86rem;
  line-height: 1.75;
  color: var(--ink);
  cursor: pointer;
}
.afield-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: .34em 0 0;
  accent-color: var(--navy);
}
.afield-terms { margin: 4px 0 18px; }
.afield-terms .afield-check span { color: var(--muted); }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 20px;
  font-size: .86rem;
}
.auth-link { color: var(--link); }

/* ---- 选填项折叠区 ---- */

.auth-optional {
  margin: 4px 0 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
}
.auth-optional > summary {
  padding: .72rem .95rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.auth-optional > summary::-webkit-details-marker { display: none; }
.auth-optional > summary::after { content: "▾"; float: right; color: var(--muted); font-weight: 400; }
.auth-optional[open] > summary::after { content: "▴"; }
.auth-optional-body { padding: 2px .95rem 0; border-top: 1px solid var(--line); }
.auth-optional-body .afield { margin: 14px 0; }

/* ---- 提交与页脚 ---- */

.auth-submit {
  width: 100%;
  margin-top: 4px;
  padding: .74rem 1rem;
  border: 1px solid var(--navy);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
}
.auth-submit:hover:not(:disabled) { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }

.auth-alt {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--muted);
  text-align: center;
  /* 显式写死，别让全局 `footer{background:var(--navy)}` 漏进来 —— 卡片里这一条
     原本是 <footer>，于是整条被染成深蓝，链接也变成白字压在深蓝上。 */
  background: transparent;
}
.auth-alt a { text-decoration: none; }

.auth-alert {
  margin: 18px 0 0;
  padding: .72rem .92rem;
  border: 1px solid #f0c9c5;
  border-radius: 10px;
  background: #fdf4f3;
  color: #8a2b22;
  font-size: .86rem;
  line-height: 1.7;
}
.auth-alert p { margin: 0; }
.auth-alert p + p { margin-top: .4rem; }

.auth-note {
  margin: 18px 0 0;
  padding: .85rem .95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.8;
}
.auth-note p { margin: 0; }
.auth-note p + p { margin-top: .4rem; }

/* ---- 兜底：没单独写模板的 allauth 页面 ----
 *
 * 这些页面产出的是 `<h1><p><form><p><label><input>` 这种**无类名**结构，
 * 只能用元素选择器接住。它们不会落进 .auth-card（那是给 .auth-wrap 用的），
 * 所以这里直接把 form 本身做成卡片。
 */
.auth-page > h1 { margin: 0 0 6px; font-size: 1.4rem; }
.auth-page > p { margin: .4rem 0; font-size: .88rem; color: var(--muted); }
.auth-page > form {
  max-width: 520px;
  margin: 22px 0 0;
  padding: 30px 30px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.auth-page > form > p { margin: 0 0 16px; }
.auth-page > form > p > label {
  display: block;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
}
.auth-page > form input[type="text"],
.auth-page > form input[type="email"],
.auth-page > form input[type="password"] {
  width: 100%;
  margin: 0;
  padding: .62rem .78rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fbfcfe;
}
.auth-page > form .helptext { display: block; margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
.auth-page > form .helptext ul { margin: 4px 0 0; padding-left: 1.15em; }
.auth-page > form .errorlist {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: var(--danger);
}

@media (max-width: 900px) {
  /* 窄屏把品牌面板收到上面、卡片放下面：并排会让两边都变得很窄。 */
  .auth-wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .auth-aside { min-height: 0; padding: 26px 22px; }
  .auth-aside-sub { margin-bottom: 20px; }
  .auth-aside-list { margin-bottom: 18px; }
  .auth-aside-list li { margin-bottom: 10px; }
  .auth-card { padding: 26px 22px 22px; }
}

@media (max-width: 480px) {
  .acode-row { flex-wrap: wrap; }
  .acode-btn { width: 100%; }
  /* 132 + 输入框 + 按钮在 360px 宽的手机上挤不下：让答案框独占一行，
     图片和「换一张」并排落在第二行 —— 比把图片压扁到看不清要好。 */
  .acaptcha-row { flex-wrap: wrap; }
  .acaptcha-row input { flex: 1 1 100%; }
  .auth-row { flex-direction: column; align-items: flex-start; }
}

/* 个人中心的资料表单：复用认证页的字段样式，但收窄，按钮也不必通栏。 */
.profile-form { max-width: 560px; margin-top: 14px; }
.profile-form .profile-submit { width: auto; min-width: 140px; letter-spacing: .06em; }

/* ------------------------------------------- 法务长文（隐私政策等）的微调 */

/* 这几条原先是 templates/core/privacy.html 里的一个 <style> 块 —— 那是违规写法：
 * 公开页 CSP 的 style-src 收在 'self'（见文件头「约束」），内联 <style> 会被浏览器拦掉。
 * 2026-10-08 之前一直没暴露，只是因为 CSP 还跑在**只报告**模式（CSP_REPORT_ONLY=1），
 * 它只记违规、不拦；等收紧成强制，那一页的排版就会整块失效。搬进这份静态表天然过 CSP。
 *
 * ★ 作用域挂在 <main class="legal-doc">（模板用 {% block main_class %} 挂上），
 *   绝不能写成裸元素选择器 —— 那样全站的 h1 / table 都会跟着变。
 *
 * ★ 只补「全局没有、或全局会被盖掉」的四条。下面这些**不要**在这里重复声明，
 *   它们本来就由上面的 `main > table` 段负责（白卡片底、圆角、阴影、单元格内边距、
 *   表头底色字色）。两处各写一份的后果是日后改一处漏一处：
 *     border-collapse / border-spacing / background / border-radius / box-shadow
 *     th,td 的 padding —— `.6rem .85rem` 那条特异性是 (0,0,3)，
 *                          比这里的 (0,1,2) 低，所以写在这里也不会生效，纯噪音。
 *
 * 与原来那个 <style> 块的两处细微差别（都是往设计变量上靠，肉眼基本不可辨）：
 *   · 边框色 #ccc → var(--line-strong)（#cdd6e0）
 *   · 表头行的下边框由 2px 变成与其它三边一致的 1px
 *     （原来 `th,td` 的 border 简写被全局表头规则的 2px 压着，现在统一） */
main.legal-doc h1 { font-size: 1.8em; }
main.legal-doc > table { margin: 1em 0; }
main.legal-doc th,
main.legal-doc td { border: 1px solid var(--line-strong); }
/* 第三方 SDK 表格里是整条隐私政策 URL，不折行会把表格撑破。
 * 收在 `table a` 而不是 `a`：同一页正文里的普通链接不该被拆词，
 * 这样 `legal-doc` 才能安全复用到别的法务长文（见 templates/core/agreement.html）。 */
main.legal-doc table a { word-break: break-all; }