/* ════════════════════════════════════════════════════════
   领事提醒与应急通讯录 — consular.html 专用样式
   ─────────────────────────────────────────────────────────
   依赖 tokens.css（先于本文件加载）：颜色/间距/字号/圆角/阴影全部走设计变量，
   暗色模式由 tokens.css 的 [data-theme="dark"] 与 prefers-color-scheme 块接管，
   本文件不重复定义任何颜色字面量。

   命名：全部 .cs- 前缀（consular），与 App 主样式隔离 —— 本页是独立 HTML，
   不加载 style.css / components.css，但共用 tokens.css，前缀可防将来合并时撞名。

   设计取向：这是紧急场景页面，不是营销页。
     · 号码必须大、必须高对比、必须一眼扫到
     · 触控目标 ≥44px（var(--tap)），手抖也要点得中
     · 不用任何装饰性动效，只在状态变化时给最弱反馈
   ════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.cs-page {
  max-width: 720px;      /* 比 App 画布(480)宽：这是内容查阅页，桌面端多列更省滚动 */
  margin: 0 auto;
  padding-bottom: calc(var(--sp-2xl) + var(--safe-bottom));
}

/* ── 顶栏 ───────────────────────────────────────────── */
.cs-top {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: calc(var(--sp-md) + var(--safe-top)) var(--pad-page) var(--sp-md);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}
.cs-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.cs-logo {
  display: inline-flex;
  width: 26px; height: 26px;
  color: var(--accent);
}
.cs-logo svg { width: 100%; height: 100%; display: block; }
.cs-brandname { font-weight: var(--fw-bold); letter-spacing: .02em; font-size: var(--fs-md); }
.cs-toptag {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--safe);
  background: var(--safe-bg);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  /* 顶栏四件内容放不下时会把「打开应用」整颗推出视口（实测 375px 溢出 22px）：
     允许这颗标签收缩省略，动作按钮永远保住。 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 手机档（≤430）收起这句状态标签：顶栏放不下四件内容时，先让位的是说明性文字，
   「在线客服」和「打开应用」两颗动作按钮必须永远点得到。 */
@media (max-width: 430px) { .cs-toptag { display: none; } }
.cs-topapp {
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--fw-medium);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.cs-topapp:hover { background: var(--pill); }
/* 顶栏在线客服（consular.html #cs-support-btn）：与 .cs-topapp 同一视觉档位，
   差别只在它是 <button>，要把浏览器默认外观清掉。 */
.cs-topsup {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: var(--fw-medium);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-topsup:hover { background: var(--pill); }

/* ── 12308 热线 ─────────────────────────────────────── */
/* 用 danger 语义色而非品牌蓝：这是「紧急」区，要和普通内容在视觉上分开 */
.cs-hotline {
  margin: var(--sp-md) var(--pad-page);
  padding: var(--sp-md);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--danger-bg), var(--warn-bg));
  border: 1px solid var(--border-strong);
}
.cs-hl-main { display: flex; align-items: flex-start; gap: var(--sp-sm); }
.cs-hl-dot {
  width: 10px; height: 10px;
  margin-top: 7px;
  border-radius: var(--radius-full, 50%);
  background: var(--danger);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--danger-bg);
}
.cs-hl-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text);
}
.cs-hl-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.cs-hl-sub strong { color: var(--danger); font-weight: var(--fw-bold); }

/* 号码格用 auto-fit + 100% 上限：轨道最窄也要 ≤ 容器宽，窄屏自动退成单列。
   写成 `1fr 1fr` 会卡在号码本身的 nowrap 最小宽度上（一列 ≈250px），
   375–480 视口必定横向溢出（实测 483px 溢出 59px），这是紧急页面最不能犯的错。 */
.cs-hl-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
.cs-hl-nums > * { min-width: 0; }

.cs-hl-more { margin-top: var(--sp-md); border-top: 1px solid var(--border); padding-top: var(--sp-sm); }
.cs-hl-more summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-2);
  padding: 6px 0;
  list-style: none;
}
.cs-hl-more summary::-webkit-details-marker { display: none; }
.cs-hl-more summary::before { content: '› '; color: var(--accent); font-weight: var(--fw-bold); }
.cs-hl-more[open] summary::before { content: '⌄ '; }
.cs-hl-morebody { padding-top: var(--sp-sm); }
.cs-hl-morebody ul { margin: 0; padding-left: var(--sp-md); }
.cs-hl-morebody li { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 4px; }
.cs-hl-fraud {
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border-left: 3px solid var(--warn);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-snug);
}

/* ── 号码按钮（热线与馆站共用）──────────────────────── */
/* 紧急场景核心控件：大字号号码 + 44px 触控高度 + 拨号/复制双动作 */
.cs-numbtn {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-width: 0;
  min-height: var(--tap);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.cs-numbtn:hover { background: var(--surface-2); }
.cs-numbtn:active { transform: scale(.985); }
.cs-numbtn-main { flex: 1; min-width: 0; }
.cs-numbtn-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 1px;
}
.cs-numbtn-num {
  display: block;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-numbtn-ic { width: 20px; height: 20px; color: var(--safe); flex-shrink: 0; }
.cs-numbtn-ic svg { width: 100%; height: 100%; display: block; }

/* 复制按钮：只有图标，独立于拨号链接（避免点复制误触发拨号） */
.cs-copybtn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.cs-copybtn:hover { color: var(--accent); background: var(--pill); }
.cs-copybtn svg { width: 17px; height: 17px; display: block; }

/* ── 搜索 + 筛选 ─────────────────────────────────────── */
.cs-find { padding: 0 var(--pad-page) var(--sp-md); }
.cs-search {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: 0 var(--sp-md);
  min-height: var(--tap);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.cs-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.cs-search-ic { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.cs-search-in {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: var(--fs-md); color: var(--text);
  padding: 11px 0;
}
.cs-search-in::placeholder { color: var(--muted); }
/* 隐藏 webkit 搜索框自带的清除按钮，用我们自己的（样式统一） */
.cs-search-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cs-search-clear {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: var(--bg-2); color: var(--text-2);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

.cs-regions {
  display: flex; gap: var(--sp-xs); overflow-x: auto;
  padding: var(--sp-sm) 0 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cs-regions::-webkit-scrollbar { display: none; }
.cs-region {
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.cs-region[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--fw-medium);
}
.cs-region-count { opacity: .65; font-size: var(--fs-xs); margin-left: 3px; }

/* 热门目的地：出境最高频的 8 国，一键直达，省掉搜索这一步 */
.cs-quick { display: flex; flex-wrap: wrap; gap: var(--sp-xs); padding-top: var(--sp-sm); }
.cs-quick-label { font-size: var(--fs-xs); color: var(--muted); padding: 6px 0; margin-right: 2px; }
.cs-quick-btn {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--pill);
  color: var(--pill-text);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.cs-quick-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ── 国家列表 ─────────────────────────────────────────── */
.cs-main { padding: 0 var(--pad-page); }

.cs-region-group { margin-bottom: var(--sp-lg); }
.cs-region-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 var(--sp-sm);
  padding-left: 2px;
}

.cs-country {
  display: flex; align-items: center; gap: var(--sp-md);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cs-country:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cs-country:active { background: var(--bg-2); }

.cs-country-main { flex: 1; min-width: 0; }
.cs-country-name {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--text);
}
.cs-country-meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-country-flag { font-size: 22px; line-height: 1; flex-shrink: 0; }
.cs-country-arrow { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.cs-country-arrow svg { width: 100%; height: 100%; display: block; }

/* 风险徽标：只有官方发过 danger/alert 级提醒的国家才显示 */
.cs-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  vertical-align: 1px;
  font-weight: var(--fw-medium);
}
.cs-badge-danger { background: var(--danger-bg); color: var(--danger); }
.cs-badge-alert  { background: var(--warn-bg);   color: var(--warn); }
.cs-badge-info   { background: var(--pill);      color: var(--pill-text); }

/* 列表页的快捷拨号：不点进详情也能直接打领保电话 */
.cs-country-call {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--safe-bg);
  color: var(--safe);
  flex-shrink: 0;
  text-decoration: none;
}
.cs-country-call svg { width: 18px; height: 18px; display: block; }

/* ── 详情页 ─────────────────────────────────────────── */
.cs-detail {
  position: fixed;
  inset: 0;
  z-index: var(--z-subpage);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-detail[hidden] { display: none; }
.cs-detail-head {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: calc(var(--sp-md) + var(--safe-top)) var(--pad-page) var(--sp-md);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.cs-back {
  display: inline-flex; align-items: center; gap: 2px;
  border: 0; background: transparent;
  color: var(--accent);
  font-family: inherit; font-size: var(--fs-md);
  cursor: pointer;
  padding: 6px 8px 6px 2px;
  min-height: var(--tap);
  flex-shrink: 0;
}
.cs-back svg { width: 20px; height: 20px; display: block; }
.cs-detail-title {
  margin: 0; flex: 1; min-width: 0;
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-detail-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-md) var(--pad-page) calc(var(--sp-2xl) + var(--safe-bottom));
}

.cs-card {
  margin-bottom: var(--sp-md);
  padding: var(--sp-md);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.cs-card-title {
  margin: 0 0 var(--sp-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--muted);
  letter-spacing: .04em;
  display: flex; align-items: center; gap: 6px;
}
.cs-card-title svg { width: 15px; height: 15px; }

/* 当地紧急号码网格：同 .cs-hl-nums，auto-fit + 100% 上限保证窄列不撑破详情面板 */
.cs-local-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--sp-sm); }
.cs-local-grid > * { min-width: 0; }
.cs-local-item {
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-sm);
}
.cs-local-item-main { flex: 1; min-width: 0; }
.cs-local-label { display: block; font-size: var(--fs-xs); color: var(--muted); }
.cs-local-num {
  display: block;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-decoration: none;
  color: var(--text);
}
a.cs-local-num:hover { color: var(--accent); }
.cs-local-item--missing { opacity: .55; }
.cs-local-item--missing .cs-local-num { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.cs-local-copy {
  width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2);
  cursor: pointer; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-local-copy svg { width: 14px; height: 14px; display: block; }

/* 未经官方核实的提示条 —— 诚实标注，不把通用号码伪装成已核实 */
.cs-unverified {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.cs-unverified svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--warn); }

/* 馆站块 */
.cs-mission { padding: var(--sp-md); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); margin-bottom: var(--sp-md); }
.cs-mission-head { margin-bottom: var(--sp-md); }
.cs-mission-type {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--pill);
  color: var(--pill-text);
  font-weight: var(--fw-medium);
  margin-bottom: 6px;
}
.cs-mission-name { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.cs-mission-city { font-size: var(--fs-sm); color: var(--muted); margin: 2px 0 0; }

.cs-field { display: flex; gap: var(--sp-sm); padding: 7px 0; border-top: 1px solid var(--border); }
.cs-field:first-of-type { border-top: 0; }
.cs-field-k { flex-shrink: 0; width: 68px; font-size: var(--fs-sm); color: var(--muted); }
.cs-field-v { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text); word-break: break-word; }
.cs-field-v a { color: var(--accent); text-decoration: none; }
.cs-field-v a:hover { text-decoration: underline; }
.cs-field-v--mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.cs-nums-stack { display: grid; gap: var(--sp-sm); }

.cs-switch-note {
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: var(--lh-snug);
}

/* 领区划分 */
.cs-district {
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-snug);
}
.cs-district-k { font-weight: var(--fw-semi); color: var(--text); }

/* 领事提醒条目 */
.cs-advisory { padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius); background: var(--surface-2); border-left: 3px solid var(--muted); margin-bottom: var(--sp-sm); }
.cs-advisory--danger { border-left-color: var(--danger); background: var(--danger-bg); }
.cs-advisory--alert  { border-left-color: var(--warn);   background: var(--warn-bg); }
.cs-advisory--caution{ border-left-color: var(--accent); }
.cs-advisory-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text); margin: 0 0 3px; }
.cs-advisory-body { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-snug); margin: 0; }
.cs-advisory-src { font-size: var(--fs-xs); margin: 6px 0 0; }
.cs-advisory-src a { color: var(--muted); }

/* 来源与追溯 */
.cs-src { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-snug); margin: 0; }
.cs-src a { color: var(--muted); text-decoration: underline; text-decoration-style: dotted; }
.cs-src-row { display: flex; flex-wrap: wrap; gap: 4px var(--sp-md); }

/* ── 空态 / 页脚 / Toast ───────────────────────────── */
.cs-empty { padding: var(--sp-2xl) var(--sp-md); text-align: center; }
.cs-empty-t { font-size: var(--fs-lg); font-weight: var(--fw-semi); margin: 0 0 var(--sp-sm); }
.cs-empty-s { font-size: var(--fs-sm); color: var(--text-2); margin: 0; line-height: var(--lh-base); }

.cs-foot { padding: var(--sp-xl) var(--pad-page) 0; border-top: 1px solid var(--border); margin-top: var(--sp-xl); }
.cs-foot-disc, .cs-foot-src, .cs-foot-off { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-base); margin: 0 0 var(--sp-sm); }
.cs-foot-off { color: var(--warn); }
.cs-foot-nav { display: flex; gap: var(--sp-md); padding-bottom: var(--sp-md); }
.cs-foot-nav a { font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; }
.cs-foot-nav a:hover { color: var(--accent); }

.cs-toast {
  position: fixed;
  left: 50%; bottom: calc(var(--sp-xl) + var(--safe-bottom));
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
  z-index: var(--z-toast);
  max-width: 80vw;
  text-align: center;
}
.cs-toast.show { opacity: 1; transform: translate(-50%, 0); }

.cs-noscript { padding: var(--sp-xl) var(--pad-page); text-align: center; }
.cs-noscript-num a {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--danger);
  text-decoration: none;
  margin: var(--sp-sm) 0;
}

/* ── 桌面端：详情页不用全屏遮罩，改为列表右侧并排 ────── */
@media (min-width: 900px) {
  .cs-page { max-width: 1080px; }
  /* 未选中国家：单列铺满画布，列表自己排成多栏目录。
     旧写法恒定「400px + 1fr」两栏，详情 hidden 时列表被钉在 400px，
     右边空出 600 多 px 死区 —— 这就是桌面端不像桌面端的原因。 */
  .cs-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); align-items: start; }
  .cs-main:has(.cs-detail:not([hidden])) { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .cs-list:has(+ .cs-detail[hidden]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-lg);
    align-items: start;
  }
  .cs-list:has(+ .cs-detail[hidden]) .cs-region-group { margin-bottom: 0; }
  .cs-detail {
    position: sticky;
    top: calc(var(--topbar-h) + var(--sp-md) + var(--safe-top));
    inset: auto;
    max-height: calc(100vh - var(--topbar-h) - var(--sp-xl));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
  }
  .cs-detail-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .cs-detail[hidden] { display: none; }
  .cs-main:has(.cs-detail:not([hidden])) .cs-list { max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 4px; }
}