/* ============================================================
   中国行政区划数据 — 公开页样式
   ⚠️ 本文件的值**逐条对齐** bank/public.css（同一平台、同一套设计语言）：
      配色 / 字号 / 间距 / 圆角 / 顶栏 / Hero / 搜索卡 / 卡片 / 表格 / 页脚 / 滚动条
      改这里时若与 bank/public.css 不一致，属于平台级偏差，应同步两边。
   配色：故宫墨红 #8C3232 / 玄石 #363636 / 宣纸 #CAD2C5；区块标题栏另用冷杉 #4A5D4E
   ⚠️ 改动本文件后必须同步 bump region/index.php 里的 ?v=（手工维护，不 bump = 浏览器吃旧缓存）。
   ============================================================ */
:root {
    --brand: #8C3232;
    --brand-600: #6E2727;
    --brand-50: #EDF1EA;   /* 宣纸系淡底（原墨红浅底 #F5EAE9） */
    --brand-100: #CAD2C5;  /* 宣纸系描边（原 #EBD6D4） */
    --ink: #363636;
    --muted: #6B6B6B;
    --line: #DDE3D9;
    --bg: #F2F5F1;
}
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    font-size: 14px; line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; }
/* 内容宽度与落地页 landing.php 的 .container 对齐（1120 / 22px） */
.container { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
/* 结果区与上方搜索卡片的固定间距 */
main.container { margin-top: 24px; }

/* ---------- 顶栏（与 landing.php / bank 对齐：66px / 半透明模糊底 / logo 38 / 名称 16px） ---------- */
.hd { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.hd-in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; pointer-events: none; }
.brand .logo { width: 38px; height: 38px; object-fit: contain; display: block; flex-shrink: 0; }
.brand .nm { font-weight: 700; font-size: 16px; letter-spacing: .2px; color: var(--ink); }
.brand .sub { color: var(--muted); font-size: 12px; margin-top: -2px; }
.sub-mobile { display: none; }
.hd-right { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.hd-right a { color: #4A4A4A; transition: color .15s; }
.hd-right a:hover { color: var(--brand); }
.hd-right .hd-login { font-weight: 600; }
.hd-right a.hd-cta { height: 38px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 600; }
.hd-right a.hd-cta:hover { background: var(--brand-600); color: #fff; }
.nav-user { display: flex; align-items: center; gap: 9px; }
.nav-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; }
.nav-user .nav-avatar { color: #fff; text-decoration: none; }
.nav-user .nav-avatar:hover { color: #fff; }

/* ---------- Hero ---------- */
.hero { background: var(--brand); color: #fff; padding: 34px 0 70px; }
.hero h1 { margin: 0 0 8px; font-size: 26px; font-weight: 700; }
.hero p { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 14px; }
.hero b { color: #fff; }

/* ---------- 解析卡片（与 bank 的 .search-card 同款：白底 / 16 圆角 / 上浮 48px） ---------- */
.search-card { background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(54, 54, 54, 0.10); padding: 18px; margin-top: -48px; position: relative; z-index: 5; }
.search-row { display: flex; gap: 10px; align-items: stretch; }
.s-input { flex: 1; position: relative; }
.s-input .s-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8F8F8F; pointer-events: none; }
.s-input input { width: 100%; height: 48px; padding: 0 44px 0 42px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; color: var(--ink); outline: none; }
.s-input input::placeholder { color: #A3A3A3; }
.s-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.s-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: none; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 8px; background: transparent; color: #8F8F8F; cursor: pointer; }
.s-clear:hover { background: #E4E9E0; color: #5C5C5C; }
.s-input input:not(:placeholder-shown) + .s-clear { display: inline-flex; }
.btn-search { height: 48px; padding: 0 26px; background: var(--brand); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-search:hover { background: var(--brand-600); }
.btn-ghost { height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #5C5C5C; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
/* 示例地址 */
.samples { margin-top: 12px; font-size: 13px; color: #8F8F8F; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.samples a { font-size: 13px; }

/* ---------- 结果 ---------- */
#resultArea { transition: opacity .15s; scroll-margin-top: 78px; }
.result-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.result-head b { color: var(--ink); }
.result-head .rq { font-size: 13px; color: #8F8F8F; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.card + .card, .result-head + .card { margin-bottom: 0; }
/* 卡片内的表单/键值区（内边距与 bank 的 .dlg-bd 一致：6 / 22 / 20） */
.card-bd { padding: 6px 22px 20px; }
.card-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 22px 12px; }
.card-hd h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.card-hd .hint { font-size: 13px; color: #8F8F8F; }
.card-hd .hd-actions { display: flex; align-items: center; gap: 12px; }
/* 区块卡片（按省浏览 / 数据概览）：与上方解析结果拉开层级 —— 深色（#4A5D4E 冷杉）标题横条 + 居中大标题，
   让「区块标题」一眼区别于「解析结果」的普通标题（后者仍是 15px 墨色、居左）。
   深底上标题与右侧说明改用浅色，保证对比度。 */
.card.sec { margin-top: 20px; }
.card.sec > .card-hd { position: relative; justify-content: center; background: #4A5D4E; border-bottom: 1px solid #5A6D5E; padding: 15px 22px; }
.card.sec > .card-hd h3 { font-size: 18px; letter-spacing: .3px; color: #fff; }
.card.sec > .card-hd .hint { color: rgba(255, 255, 255, .62); }
/* 右侧说明 / 「返回上级」绝对定位，脱离文档流，不干扰标题居中 */
.card.sec > .card-hd > .hd-actions,
.card.sec > .card-hd > .hint { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); }
/* 「返回上级」：与 .btn-ghost 同语言的小号按钮（32px / 8 圆角 / hover 品牌色） */
.btn-up { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #5C5C5C; font-size: 13px; white-space: nowrap; }
.btn-up:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
/* 层级链（省 › 市 › 县 › 乡） */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0 14px; }
.chain .sep { color: #C3C3C3; }
/* 面包屑里可点的层级（祖先节点）：去掉下划线，hover 用品牌浅底，与 chip 本体同形 */
.chain a.tier { text-decoration: none; }
.chain a.tier:hover { background: var(--brand-100); }
.tier { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); font-size: 14px; }
.tier em { font-style: normal; font-size: 12px; color: #8F8F8F; }
.tier small { font-size: 12px; color: #8F8F8F; font-variant-numeric: tabular-nums; }
.tier.empty { background: #F4F4F4; border-color: #E6E6E6; color: #A3A3A3; }
/* 地址里没写明、由解析器补全的层级：灰底虚线，标题栏给 title 提示，不喧哗 */
.tier.auto { background: #F7F7F5; border-style: dashed; border-color: var(--line); color: #8F8F8F; }
/* 键值区（与 bank 的 .kv 同款：104px 标签列 / 13px 灰标签 / 14px 值 / 虚线分隔） */
.kv { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #E4E9E0; }
.kv:last-child { border-bottom: none; }
.kv .k { width: 104px; flex-shrink: 0; color: #8F8F8F; font-size: 13px; }
.kv .v { flex: 1; color: var(--ink); font-size: 14px; word-break: break-all; }
.kv .v.mono { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.kv .v .dim { color: #8F8F8F; }

/* ---------- 表格（与 bank 的 table.pt 同款） ---------- */
.table-scroll { overflow-x: auto; }
table.pt { width: 100%; border-collapse: collapse; }
table.pt thead th { background: #EDF1EA; text-align: left; padding: 12px 18px; font-size: 12px; color: #6B6B6B; font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.pt tbody td { padding: 14px 18px; border-bottom: 1px solid #E4E9E0; vertical-align: middle; }
table.pt tbody tr { transition: background .12s; }
table.pt tbody tr:hover { background: #F1F4EF; }
table.pt tbody tr:last-child td { border-bottom: none; }
table.pt td.mono { font-variant-numeric: tabular-nums; letter-spacing: .5px; white-space: nowrap; }
table.pt td.dim { color: #8F8F8F; }
/* 车牌前缀：直辖市的号段很多（北京就有 …京A、京B…京Y 共 18 个），允许换行，避免撑出列宽 */
table.pt td.plate { white-space: normal; overflow-wrap: break-word; }
table.pt td.type { color: #5C5C5C; font-size: 13px; white-space: nowrap; }
table.pt a { font-weight: 600; }

/* ---------- 空态（与 bank 的 .empty 同款） ---------- */
.empty { padding: 64px 20px; text-align: center; color: #8F8F8F; }
.empty .ic { display: flex; justify-content: center; margin-bottom: 12px; color: #C3C3C3; }
.empty b { color: #6B6B6B; }

/* ---------- 提示条 ---------- */
.warn { display: flex; gap: 10px; align-items: flex-start; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 14px; }
.warn.plain { background: #FAFAF8; border-color: var(--line); color: #6B6B6B; }
.warn b { color: var(--ink); }

/* ---------- 概览数字 ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 34px; padding: 0; }
.stats div b { display: block; font-size: 22px; font-weight: 700; color: var(--brand); line-height: 1.3; }
.stats div span { color: #8F8F8F; font-size: 12px; }

/* ---------- 页脚（与 bank 的 .ft 同款） ---------- */
.ft { text-align: center; color: #8F8F8F; font-size: 12px; padding: 34px 20px; }

@media (max-width: 768px) {
    /* 移动端：表格改卡片（字段名取自 data-label，与 bank 同款） */
    .table-scroll { overflow-x: visible; }
    table.pt thead { display: none; }
    table.pt, table.pt tbody { display: block; }
    table.pt tbody tr { display: flex; flex-direction: column; padding: 15px 16px; border-bottom: 1px solid #E4E9E0; }
    table.pt tbody tr:last-child { border-bottom: none; }
    table.pt tbody tr:hover { background: transparent; }
    table.pt tbody td { display: flex; align-items: baseline; gap: 10px; padding: 0; border: none; }
    table.pt tbody td + td { margin-top: 7px; }
    table.pt tbody td::before { content: attr(data-label); flex: 0 0 58px; color: #8F8F8F; font-size: 13px; }
    table.pt tbody td > span { flex: 1; min-width: 0; }
    table.pt tbody td.c-name { order: -1; margin: 0 0 10px; }
    table.pt tbody td.c-name::before { display: none; }
    table.pt tbody td.c-name a { font-size: 15px; }
    .result-head { font-size: 13px; }
    .empty { padding: 44px 20px; }
    .hd-right .hd-home { display: none; }
    .nav-uname { display: none; }
    .nav-logout { display: none; }
    .brand .sub-desk { display: none; }
    .brand .sub-mobile { display: block; }
    .brand { pointer-events: auto; }
}
@media (max-width: 640px) {
    .hero { padding: 26px 0 62px; }
    .hero h1 { font-size: 21px; }
    .search-row { flex-direction: column; }
    .btn-search, .btn-ghost { width: 100%; }
    .hd-right { gap: 18px; }
    .hd-right a.hd-cta { height: 34px; padding: 0 12px; font-size: 13px; }
    .nav-avatar { width: 28px; height: 28px; font-size: 13px; }
    .stats { gap: 22px; }
    .stats div b { font-size: 18px; }
    /* 区块标题：窄屏改上下堆叠 —— 否则右侧说明/「返回上级」会与居中大标题重叠 */
    .card.sec > .card-hd { flex-direction: column; }
    .card.sec > .card-hd > .hint,
    .card.sec > .card-hd > .hd-actions { position: static; transform: none; margin-top: 4px; }
}

/* ---------- 滚动条（统一标准：6px / 滑块 #C3C3C3 圆角 999px / hover #A3A3A3） ----------
   · html          → 页面主滚动条
   · .table-scroll → 结果表格横向滚动
   标准属性供 Firefox / Chrome 121+，::-webkit-* 供 Chromium / Safari；两者取值一致。 */
:is(html, .table-scroll) { scrollbar-width: thin; scrollbar-color: #C3C3C3 transparent; }
:is(html, .table-scroll)::-webkit-scrollbar { width: 6px; height: 6px; }
:is(html, .table-scroll)::-webkit-scrollbar-track { background: transparent; }
:is(html, .table-scroll)::-webkit-scrollbar-thumb { background: #C3C3C3; border-radius: 999px; }
:is(html, .table-scroll)::-webkit-scrollbar-thumb:hover { background: #A3A3A3; }