/* =============================================================
 *  日本语言学校地图 — 视觉系统
 *  设计原则：清晰的信息层级 / 克制的品牌色 / 一致的间距与圆角
 * ============================================================= */

/* ---------- 设计令牌 ---------- */
:root {
  /* 品牌色 —— 取自知途官方 logo 主色 #104df5 */
  --brand: #104df5;
  --brand-600: #0b3ecb;
  --brand-700: #09319e;
  --brand-100: #d3e0fd;
  --brand-050: #eff4ff;

  /* 强调色 */
  --amber: #f59e0b;
  --amber-050: #fffbeb;
  --amber-100: #fef3c7;
  --sky: #0ea5e9;

  /* 中性色 */
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #64748b;
  --muted: #94a3b8;
  --line: #e7ebf2;
  --line-2: #eff3f8;
  --bg: #f5f7fb;
  --card: #ffffff;

  /* 阴影 */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --sh-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --sh-md: 0 8px 24px rgba(15, 23, 42, .09);
  --sh-lg: 0 18px 48px rgba(15, 23, 42, .16);

  /* 圆角 / 尺寸 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sidebar-w: 392px;
  --topbar-h: 70px;

  /* 动效 */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
/* 关键：作者样式里的 display:flex/grid 会覆盖 [hidden] 的 display:none，必须显式兜底 */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }

/* 数字统一等宽，避免计数跳动 */
.num, #result-count, #viewport-count, .sc-badge, .cluster-num { font-variant-numeric: tabular-nums; }

/* 统一焦点样式 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---------- 顶部栏 ---------- */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 22px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 品牌标识：「识途 + 日本留学」完整 logo
   源图纯白底 → 已按边界泛洪抠成透明底（方块内白字保留），并二值化压到 5KB。
   内联为 base64，单文件交付时无需任何外部图片请求。
   深色背景用 logo/logo-lockup-dark.png（蓝框保留、「日本留学」转白）。 */
.brand-logo {
  flex: 0 0 auto;
  height: 40px;
  width: 107px;                 /* 40px × 2.671（logo 原始宽高比） */
  background: url("data:image/png;base64,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") no-repeat left center / contain;
}
/* logo 与页面标题之间的细分隔线 */
.brand-sep {
  flex: 0 0 auto;
  width: 1px; height: 24px;
  background: var(--line);
}
.brand-text { min-width: 0; }
.brand h1 {
  font-size: 17px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand .subtitle {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-wrap {
  position: relative;
  flex: 1 1 auto;
  max-width: 520px;
  display: flex;
  align-items: center;
}
.search-icon { position: absolute; left: 15px; color: var(--muted); pointer-events: none; }
#search-input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
#search-input::placeholder { color: var(--muted); }
#search-input:hover { border-color: #d7dded; }
#search-input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px var(--brand-050);
}
.search-clear {
  position: absolute; right: 10px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--line); color: var(--ink-3);
  cursor: pointer; font-size: 15px; line-height: 1;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.search-clear:hover { background: #dbe1ec; color: var(--ink); }

/* 顶栏右侧统计 */
.topbar-stat {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border-radius: 999px;
  background: var(--brand-050);
  color: var(--brand-700);
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--brand-100);
  white-space: nowrap;
}
.topbar-stat .dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

/* ---------- 主体布局 ----------
 * 高度用 --topbar-real-h（由 JS 实测顶栏高度写入）：
 * 桌面端顶栏正好 --topbar-h，移动端顶栏会换行变高，写死会导致抽屉被顶栏盖住。 */
.main { display: flex; height: calc(100vh - var(--topbar-real-h, var(--topbar-h))); }

/* ---------- 侧栏 ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;   /* 筛选面板以此为定位容器 */
  overflow: hidden;
  z-index: 15;
}
.sidebar.filters-open .filter-panel { transform: translateX(0); }
.sidebar.filters-open .filter-panel { pointer-events: auto; }

/* 列表滚动条 */
.school-list::-webkit-scrollbar,
.fp-body::-webkit-scrollbar { width: 8px; }
.school-list::-webkit-scrollbar-thumb,
.fp-body::-webkit-scrollbar-thumb {
  background: #dde3ee; border-radius: 8px; border: 2px solid #fff;
}
.school-list::-webkit-scrollbar-thumb:hover,
.fp-body::-webkit-scrollbar-thumb:hover { background: #c9d2e3; }

/* 列表工具行：筛选入口 */
.list-actions {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line-2);
}
.btn-filter {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink);
  border-radius: 999px;
  font-size: 13px; font-weight: 650;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.btn-filter svg { color: var(--ink-3); }
.btn-filter:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-050); }
.btn-filter:hover svg { color: var(--brand); }
.btn-filter.has-filter { border-color: var(--brand); color: var(--brand); background: var(--brand-050); }
.btn-filter.has-filter svg { color: var(--brand); }
.btn-filter .bf-count {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.list-hint {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 点聚合大圈后的「圈内聚焦」条 */
.cluster-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 0; padding: 9px 11px;
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  color: var(--brand-700);
  font-size: 12.5px; font-weight: 600;
}
.cluster-banner[hidden] { display: none; }
.cluster-banner .cb-ico { flex: 0 0 auto; color: var(--brand); }
.cluster-banner .cb-text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cluster-banner .cb-clear {
  flex: 0 0 auto;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--brand); border-radius: 999px;
  background: #fff; color: var(--brand);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .15s var(--ease);
}
.cluster-banner .cb-clear:hover { background: var(--brand); color: #fff; }

/* 可折叠筛选组 */
.filter-group {
  border-bottom: 1px solid var(--line-2);
  padding: 2px 0 12px;
}
.filter-group:last-of-type { border-bottom: none; }
.filter-group .fg-head {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 2px;
  border: none; background: none; cursor: pointer;
  color: var(--ink);
  text-align: left;
}
.filter-group .fg-head h3 {
  flex: 1 1 auto;
  font-size: 13.5px; font-weight: 700;
  display: flex; align-items: baseline; gap: 8px;
  margin: 0;
}
.filter-group .fg-head .hint {
  font-size: 11px; color: var(--muted); font-weight: 400;
}
.filter-group .fg-head .chev {
  flex: 0 0 auto; color: var(--muted);
  transition: transform .2s var(--ease);
}
.filter-group.collapsed .fg-head .chev { transform: rotate(-90deg); }
/* 分组已选数量角标 */
.fg-picked {
  flex: 0 0 auto;
  min-width: 18px; height: 18px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.filter-group .fg-body {
  padding: 2px 0 4px;
  overflow: hidden;
}
.filter-group.collapsed .fg-body { display: none; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-row.sub {
  margin-top: 10px; padding-left: 10px;
  border-left: 2px solid var(--brand-100);
}
.chip-empty { font-size: 12px; color: var(--muted); padding: 4px 0; }

/* 分组内的说明文字 */
.fg-note {
  margin: 9px 0 0; font-size: 11.5px; line-height: 1.6;
  color: var(--ink-3);
  background: var(--bg);
  border-radius: 8px;
  padding: 7px 10px;
}

/* 面板内的分区标题（常用 / 更多） */
.fp-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 6px;
  color: var(--ink-3); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em;
}
.fp-sep::before, .fp-sep::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}

.chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
  transition: all .14s var(--ease);
  user-select: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip .chip-n {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chip.active .chip-n { color: rgba(255, 255, 255, .78); }
.chip.active.soft .chip-n { color: var(--brand); }
.chip:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-050);
  transform: translateY(-1px);
}
.chip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 3px 10px rgba(79, 70, 229, .28);
}
.chip.active:hover { background: var(--brand-600); }
.chip.active.soft {
  background: var(--brand-050);
  color: var(--brand-700);
  border-color: var(--brand-100);
  box-shadow: none;
}
.chip.active.soft:hover { background: var(--brand-100); }

/* 计数为 0（当前条件下选它没结果）→ 置灰但不禁用，点了会进入空结果并可一键重置 */
.chip.is-zero {
  color: #c3cbd8;
  background: #fbfcfe;
  border-color: var(--line-2);
}
.chip.is-zero .chip-n { color: #cfd6e2; }
.chip.is-zero:hover { color: var(--ink-3); background: var(--bg); border-color: var(--line); transform: none; }

/* 申请条件：整行式开关 chip */
.chip-wide { width: 100%; justify-content: flex-start; border-radius: 10px; padding: 9px 13px; }
.chip-wide .chip-n { margin-left: auto; }

/* 输入框 */
.text-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.text-input::placeholder { color: var(--muted); }
.text-input:hover { border-color: #d7dded; }
.text-input:focus {
  outline: none; border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 4px var(--brand-050);
}

/* ---------- 结果列表（侧栏唯一主视图，独占全高） ---------- */
.results {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.results-head {
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.results-head .rh-main {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
#result-count { font-size: 13.5px; font-weight: 700; color: var(--ink); }
#viewport-count {
  font-weight: 500; color: var(--ink-3); font-size: 12px;
  padding: 1px 8px; border-radius: 999px; background: var(--line-2);
}
#viewport-count:empty { display: none; }

.sort-select {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 8px center;
  -webkit-appearance: none; appearance: none;
  font-size: 12px; color: var(--ink-2);
  cursor: pointer;
}
.sort-select:hover { border-color: var(--brand); color: var(--brand); }

.school-list {
  overflow-y: auto;
  padding: 12px 14px 20px;
  flex: 1;
  overscroll-behavior: contain;
}

/* ---------- 学校卡片 ---------- */
.school-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 13px 14px 11px;
  margin-bottom: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.school-card::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand);
  opacity: 0;
  transition: opacity .16s var(--ease);
}
.school-card:hover {
  border-color: #cfd6ea;
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.school-card:hover::before { opacity: 1; }
.school-card.is-pending { background: #fffdf7; border-color: #f3e3c3; }

.sc-top { display: flex; align-items: flex-start; gap: 10px; }
.sc-title { flex: 1 1 auto; min-width: 0; }
.sc-name {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-jp {
  font-size: 11.5px; color: var(--muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-badge {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}

.sc-facts {
  list-style: none; margin: 9px 0 0; padding: 0;
  display: grid; gap: 5px;
  font-size: 12.5px; color: var(--ink-2);
}
.sc-facts li { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.sc-facts li svg { flex: 0 0 auto; margin-top: 2px; color: var(--muted); }
.sc-facts li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-facts li b { color: var(--ink); font-weight: 650; }

.sc-tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.sc-tag {
  font-size: 11px; color: var(--brand-700);
  background: var(--brand-050); border: 1px solid var(--brand-100);
  padding: 2px 8px; border-radius: 6px;
}
.sc-pending {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  font-size: 11px; font-weight: 600; color: #b45309;
  background: var(--amber-100); border: 1px solid #fde68a;
  padding: 2px 8px; border-radius: 6px;
}
.sc-foot {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sc-cta {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--brand); font-size: 12.5px; font-weight: 650;
  margin-right: auto;
}
.sc-cta svg { transition: transform .16s var(--ease); }
.school-card:hover .sc-cta svg { transform: translateX(3px); }
.sc-note { font-size: 11px; color: var(--muted); }
/* 列表卡片上的“详情”入口：跳官网详情页 */
.sc-detail {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 650;
  color: var(--brand-700); background: var(--brand-050);
  border: 1px solid var(--brand-100);
  padding: 3px 9px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.sc-detail::after { content: "↗"; font-size: 10px; margin-left: 3px; }
.sc-detail:hover { background: var(--brand-100); border-color: var(--brand); color: var(--brand-700); }

.empty {
  text-align: center; color: var(--ink-3);
  padding: 48px 20px; font-size: 13px;
}
.empty strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.empty svg { color: #cbd5e1; margin-bottom: 10px; }
.empty span { display: block; line-height: 1.7; }
.empty-reset {
  margin-top: 14px; padding: 8px 18px;
  border: 1px solid var(--brand-100); background: var(--brand-050);
  color: var(--brand); border-radius: 999px;
  font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: all .15s var(--ease);
}
.empty-reset:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- 卡片角标 / 指标行（横向信息密度） ---------- */
.sc-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sc-badge.hot { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.sc-badge.legal { color: var(--brand-700); background: var(--brand-050); border-color: var(--brand-100); }
.sc-badge.soft { color: #0f766e; background: #f0fdfa; border-color: #99f6e4; }
.sc-badge.rate { color: #b45309; background: #fffbeb; border-color: #fde68a; }

.sc-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.scm {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.scm.rate { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.scm.rate i { font-style: normal; font-weight: 500; opacity: .65; font-size: 10px; }
.sc-facts li em { font-style: normal; color: var(--ink-3); font-size: 11.5px; }

/* ---------- 筛选面板（覆盖整个侧栏） ---------- */
.filter-panel {
  position: absolute; inset: 0;
  z-index: 20;
  display: flex; flex-direction: column;
  background: var(--card);
  transform: translateX(-101%);
  transition: transform .26s var(--ease);
  pointer-events: none;
  will-change: transform;
}
.fp-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.fp-title { font-size: 15px; font-weight: 750; color: var(--ink); }
.fp-close {
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
  transition: all .15s var(--ease);
}
.fp-close:hover { background: var(--bg); color: var(--ink); border-color: #d7dded; }

.fp-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px 20px;
}

/* 面板顶部「已选条件」区 */
.fp-active {
  margin-bottom: 10px; padding: 10px 11px;
  background: linear-gradient(180deg, #f8f9ff, var(--brand-050));
  border: 1px solid var(--brand-100);
  border-radius: 12px;
}
.fpa-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; color: var(--brand-700);
  margin-bottom: 8px;
}
.fpa-clear {
  border: none; background: #fff; color: var(--brand);
  font-size: 11.5px; font-weight: 650; cursor: pointer;
  padding: 2px 9px; border-radius: 999px;
  box-shadow: var(--sh-xs, 0 1px 2px rgba(15,23,42,.08));
}
.fpa-clear:hover { background: var(--brand); color: #fff; }
.fpa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fpa-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--brand-100); background: #fff;
  color: var(--brand-700);
  font-size: 12px; font-weight: 600;
  padding: 4px 8px 4px 10px; border-radius: 999px;
  cursor: pointer;
  transition: all .14s var(--ease);
}
.fpa-chip:hover { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.fpa-x { display: inline-flex; opacity: .65; }
.fpa-chip:hover .fpa-x { opacity: 1; }

.fp-foot {
  flex: 0 0 auto;
  display: flex; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.fp-clear {
  flex: 0 0 auto;
  padding: 0 18px; height: 44px;
  border: 1px solid var(--line); background: #fff;
  color: var(--ink-2); border-radius: 12px;
  font-size: 13.5px; font-weight: 650; cursor: pointer;
  transition: all .15s var(--ease);
}
.fp-clear:hover { border-color: var(--ink-3); color: var(--ink); background: var(--bg); }
.fp-apply {
  flex: 1 1 auto;
  height: 44px;
  border: none; border-radius: 12px;
  background: var(--brand); color: #fff;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .3);
  transition: all .15s var(--ease);
}
.fp-apply:hover { background: var(--brand-600); }

/* 申请条件开关列表 */
.switch-list { display: grid; gap: 7px; }

/* ---------- 地图 ---------- */
.map-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
#map { position: absolute; inset: 0; }
.maplibregl-ctrl-group {
  border-radius: 10px !important;
  box-shadow: var(--sh-md) !important;
  overflow: hidden;
}

.demo-badge {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  background: rgba(255, 255, 255, .94);
  color: #b45309;
  border: 1px solid var(--amber-100);
  font-size: 11px; font-weight: 650;
  padding: 5px 11px; border-radius: 999px;
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(6px);
}
.geo-status {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .96);
  color: var(--ink-2);
  font-size: 12px; font-weight: 500;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--sh-md);
  max-width: min(80%, 460px);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(6px);
}
.geo-status::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
}
.geo-status:empty { display: none; }

.map-fab {
  position: absolute; z-index: 6;
  right: 12px; bottom: 26px;
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff; box-shadow: var(--sh-md);
  color: var(--ink-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .16s var(--ease);
}
.map-fab:hover { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand); transform: translateY(-2px); }
/* 图层被关掉时：按钮变灰，让人一眼看出「现在是隐藏状态」 */
.map-fab.is-off { color: var(--muted); background: #fff; }
.map-fab.is-off svg { opacity: .45; }

/* ---------- 地图图例 ---------- */
/* 选中点的校名标签（HTML Marker，跟随地图移动）
   注意：MapLibre 会直接覆写元素 transform（按 anchor 定位），
   这里必须用 width:max-content 收窄，否则绝对定位 div 会撑满整行 */
.sel-label {
  width: max-content;
  max-width: 240px;
  background: #ffc806;
  color: #3b2708;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  padding: 5px 9px;
  border-radius: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 5px 14px rgba(161, 98, 7, .42);
  pointer-events: none;
  position: relative;
}
.sel-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffc806;
}
.map-legend {
  position: absolute; left: 12px; bottom: 16px; z-index: 6;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  font-size: 11.5px; color: var(--ink-2);
  overflow: hidden;
  backdrop-filter: saturate(180%) blur(10px);
  max-width: 260px;
}
.map-legend .lg-head {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 8px 11px;
  border: none; background: none; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--ink);
  letter-spacing: .03em;
}
.map-legend .lg-head .chev { margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
.map-legend.collapsed .lg-head .chev { transform: rotate(-90deg); }
.map-legend .lg-body { padding: 0 12px 10px; }
.map-legend.collapsed .lg-body { display: none; }
.map-legend .lg-item { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.map-legend .dot {
  flex: 0 0 auto;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .14);
}
.map-legend .dot.precise { background: var(--brand); }
.map-legend .dot.approx { background: #f59e0b; }
.map-legend .dot.cluster { width: 15px; height: 15px; background: var(--brand); opacity: .94; }
/* 轨道交通：画成一小段彩色线条，呼应线路各自的官方配色 */
.map-legend .dot.transit {
  width: 16px; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #104df5 0%, #e11d48 50%, #f59e0b 100%);
}

/* ---------- 地图弹卡 ---------- */
.maplibregl-popup { max-width: 330px !important; }
.maplibregl-popup-content {
  padding: 0 !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  overflow: hidden;
  border: 1px solid var(--line);
  /* 固定「头 + 底」、中间内容区滚动：保证底部的「进入学校详情页」按钮永远可见，
     不会被长内容挤出屏幕（弹窗锚点会随地图翻转，高度必须可控）。 */
  display: flex;
  flex-direction: column;
  max-height: min(360px, calc(100vh - 220px));
}
.maplibregl-popup-close-button {
  font-size: 20px; padding: 3px 9px; color: var(--ink-3);
  border-radius: 0 var(--r-lg) 0 8px;
  transition: background .15s var(--ease);
}
.maplibregl-popup-close-button:hover { background: var(--line-2); color: var(--ink); }
.maplibregl-popup-tip { border-top-color: #fff !important; border-bottom-color: #fff !important; }

/* 桌面端：选中学校的详情卡固定停靠在地图左侧。
   原先用 MapLibre 气泡，浮在点的上方/下方会挡住地图中心；改停靠左边后视野更完整。
   内部复用 .pop-card 结构，头/底固定、中段滚动。 */
.map-sidecard {
  position: absolute;
  left: 14px;
  top: 14px;
  width: min(336px, 42%);
  /* 底部给左下角的图例留出位置 */
  max-height: calc(100% - 84px);
  z-index: 7;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  animation: sideCardIn .24s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sideCardIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
/* 让 .pop-card 撑满卡片高度，这样 .pop-body 才会在卡片内滚动而不是溢出 */
.map-sidecard > .pop-card { flex: 1 1 auto; min-height: 0; }

.pop-card { font-size: 13px; display: flex; flex-direction: column; min-height: 0; }
.pop-head {
  padding: 14px 16px 11px;
  background: linear-gradient(180deg, #fafbff, #fff);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  position: relative;
}
.pop-head .p-name { font-weight: 700; font-size: 15px; line-height: 1.35; padding-right: 26px; }
.pop-head .p-jp { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* 详情卡自带的关闭按钮（桌面端卡片不再由 MapLibre 气泡提供关闭入口） */
.pop-close {
  position: absolute; top: 9px; right: 9px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-3);
  font-size: 19px; line-height: 1; cursor: pointer; border-radius: 8px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pop-close:hover { background: var(--line-2); color: var(--ink); }
/* 弹卡里的徽标行（热门 / 法人类型 / 评分） */
.pop-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
/* 弹卡里的标签墙 */
/* ---- 卡片里的「周边车站」区块 ---- */
.pop-near { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 9px; }
.pn-head {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px;
}
.pn-head svg { color: var(--brand); flex: 0 0 auto; }
.pn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.near-stn { display: grid; gap: 4px; }
.ns-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ns-top b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ns-dist { font-size: 11px; color: var(--muted); }
.ns-lines { display: flex; flex-wrap: wrap; gap: 4px; }
/* 线路色标签：--lc 由 JS 注入该线路的官方配色 */
.nl-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; line-height: 1.55; padding: 1px 7px;
  border-radius: 999px; color: #fff; background: var(--lc, #64748b);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* 点击地铁站时的小气泡 */
.pop-stn { display: grid; gap: 3px; font-size: 12px; }
.pop-stn b { font-size: 12.5px; color: var(--ink); }
.pop-stn span { color: var(--ink-3); }

.pop-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.pop-body { padding: 12px 16px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.pop-row {
  display: flex; gap: 10px; margin-bottom: 7px;
  color: var(--ink-2); line-height: 1.5;
}
.pop-row:last-child { margin-bottom: 0; }
.pop-row .k { flex: 0 0 62px; color: var(--muted); }
.pop-row .v { flex: 1; color: var(--ink); min-width: 0; }
.pop-foot {
  flex: 0 0 auto;
  padding: 11px 16px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
  display: flex; gap: 8px; align-items: stretch;
}
/* 主行动：进入官网学校详情页 */
.pop-detail {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--brand); color: #fff; text-decoration: none;
  padding: 10px 12px; border-radius: 10px;
  font-weight: 650; font-size: 13px; white-space: nowrap;
  transition: background .15s var(--ease);
}
.pop-detail:hover { background: var(--brand-600); color: #fff; }
.pop-detail svg { flex: 0 0 auto; }
.pop-desc {
  margin-top: 10px; padding: 10px 11px;
  font-size: 12px; color: var(--ink-2);
  background: var(--bg); border-radius: 10px; line-height: 1.65;
}
/* 次行动：地图居中（描边按钮，不与主行动抢视觉） */
.pop-center {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--brand-700);
  border: 1px solid var(--brand-100);
  padding: 10px 12px; border-radius: 10px;
  font-weight: 650; font-size: 13px; white-space: nowrap; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.pop-center:hover { background: var(--brand-050); border-color: var(--brand); }

/* ---------- 移动端专用元素（桌面端隐藏） ----------
 * 交互范式参考高德地图：全屏地图 + 顶部悬浮搜索 + 横向快捷筛选 + 可拖拽底部卡片 + 右侧悬浮控件。 */
.sheet-grab, .ms-sortbar, .quick-strip, .fp-grab { display: none; }

/* ---------- 移动端：学校详情收进底部面板 ----------
 * 曾经的做法是在地图上再浮一张详情卡，结果「面板 + 卡片」两件套把地图盖得只剩一条。
 * 现在详情直接长在面板内部（#school-detail），入口是排序行最左边的「学校详情」chip，
 * 屏幕上始终只有一个遮挡物。 */
/* 排序行最左边的详情 chip：列表 ↔ 详情切换，右侧 × 取消选中 */
.ms-detail {
  flex: 0 0 auto;
  display: flex; align-items: center;
  margin-right: 8px;
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  transition: background .18s ease, border-color .18s ease;
}
.ms-detail[hidden] { display: none; }
.msd-main {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; background: none; color: var(--brand);
  font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 3px 6px 10px; cursor: pointer; white-space: nowrap;
}
.msd-x {
  border: none; background: none; color: var(--brand);
  font: inherit; font-size: 15px; line-height: 1;
  padding: 5px 9px 5px 2px; cursor: pointer; opacity: .72;
}
.msd-x:active { opacity: 1; }
.ms-detail.active { background: var(--brand); border-color: var(--brand); }
.ms-detail.active .msd-main,
.ms-detail.active .msd-x { color: #fff; }

/* 详情视图：列表相关的东西全部让位 */
.results[data-view="detail"] > .results-head,
.results[data-view="detail"] > .list-actions,
.results[data-view="detail"] > .cluster-banner,
.results[data-view="detail"] > .school-list { display: none; }
/* 详情自己占满面板剩余高度并滚动，跟列表同一套布局逻辑 */
.school-detail {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;        /* 只允许纵向滑动，避免与地图/面板的横向手势打架 */
  padding: 14px 16px 22px;
}
.school-detail[hidden] { display: none; }

.map-card-head { display: flex; align-items: flex-start; gap: 10px; }
.map-card-head .mc-t { flex: 1 1 auto; min-width: 0; }
.map-card-head .mc-name {
  font-size: 15px; font-weight: 750; line-height: 1.32; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.map-card-head .mc-jp {
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-card-head .mc-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: var(--line-2); color: var(--ink-3);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.mc-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mc-rows { margin-top: 8px; display: grid; gap: 4px; }
.mc-row {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
}
.mc-row svg { flex: 0 0 auto; margin-top: 2px; color: var(--muted); }
.mc-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-row b { color: var(--ink); font-weight: 650; }
.mc-foot { display: flex; gap: 8px; margin-top: 11px; }
.mc-primary {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--brand); color: #fff; text-decoration: none;
  padding: 9px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 650; white-space: nowrap;
}
.mc-primary:active { background: var(--brand-600); }
.mc-ghost {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--brand-700);
  border: 1px solid var(--brand-100);
  padding: 9px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer;
}

/* ---------- 主权声明 / 边界标注（合规过渡期提示条） ----------
 * 浮在地图上、压在底部面板/悬浮控件之下（z-index 6 < 面板 20 / 控件 21），
 * 不挡操作。桌面端贴底居中；移动端随面板高度浮在面板上沿之上。 */
.boundary-note {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 6;
  display: inline-flex; align-items: flex-start; gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 11px 12px 11px 12px;
  border-radius: 12px;
  background: rgba(17, 24, 39, .9); color: #fff;
  font-size: 12px; line-height: 1.5; font-weight: 500;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .32);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.boundary-note[hidden] { display: none; }
.boundary-note .bn-badge {
  flex: 0 0 auto; align-self: flex-start;
  background: #d4351c; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.boundary-note .bn-text {
  min-width: 0; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.boundary-note .bn-close {
  flex: 0 0 auto; border: none; background: rgba(255, 255, 255, .16);
  color: #fff; width: 22px; height: 22px; border-radius: 50%;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  margin-top: -1px;
}
.boundary-note .bn-close:active { background: rgba(255, 255, 255, .3); }

/* =============================================================
 *  移动端布局（高德范式）
 * ============================================================= */
@media (max-width: 900px) {
  :root {
    --topbar-h: 62px;
    --peek-h: 300px;          /* 底部卡片最低档露出的高度 */
    --sheet-visible: 300px;   /* 卡片当前可见高度，由 JS 实时写入 */
    --grab-h: 22px;           /* 底部面板抓手高度，用于把内部滚动区限制在可见高度内 */
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --ctrl-top: calc(102px + env(safe-area-inset-top, 0px));
  }

  /* --- 顶栏 → 悬浮搜索层（脱离文档流，不占地图高度） --- */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: auto; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 0;
    background: transparent; border-bottom: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    gap: 8px; align-items: center;
    z-index: 22;
    pointer-events: none;
  }
  .brand { flex: 0 0 auto; gap: 0; pointer-events: auto; }
  /* 只留方标，做成白色圆角小胶囊（等价于高德左上角的功能按钮位） */
  .brand-logo {
    width: 42px; height: 42px;
    background-image: url("data:image/png;base64,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");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px auto;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
  }
  .brand-sep, .brand-text { display: none; }
  .topbar-stat { display: none; }
  .search-wrap { flex: 1 1 auto; max-width: none; pointer-events: auto; }
  .search-icon { left: 14px; color: var(--ink-3); }
  #search-input {
    height: 42px; font-size: 14px;
    background: #fff; border-color: transparent;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
    padding: 0 38px 0 40px;
  }
  #search-input:focus {
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .16), 0 0 0 3px var(--brand-050);
  }

  /* --- 快捷筛选条（横向滚动 chips） --- */
  .quick-strip {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0;
    top: calc(58px + env(safe-area-inset-top, 0px));
    z-index: 21;
    padding: 2px 10px 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quick-strip::-webkit-scrollbar { display: none; }
  .quick-strip .qs-chip {
    flex: 0 0 auto;
    height: 32px; padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 999px;
    background: rgba(255, 255, 255, .97);
    color: var(--ink-2);
    font-size: 12.5px; font-weight: 650;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .13);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    cursor: pointer; white-space: nowrap;
    transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
  }
  .quick-strip .qs-chip.on {
    background: var(--brand); color: #fff; border-color: var(--brand);
    box-shadow: 0 4px 12px rgba(16, 77, 245, .34);
  }

  /* --- 地图铺满全屏 --- */
  .main { display: block; height: 100vh; height: 100dvh; }
  .map-wrap { position: fixed; inset: 0; z-index: 0; }

  /* 移动端改用底部详情卡，桌面端这张左侧停靠卡不出现 */
  .map-sidecard { display: none !important; }

  /* --- 侧栏 → 可拖拽底部卡片 --- */
  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; flex: none;
    height: 86vh; height: 86dvh;
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 34px rgba(15, 23, 42, .2);
    transform: translateY(calc(100% - var(--peek-h)));
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    z-index: 20;
    will-change: transform;
    z-index: 20;
  }
  .sidebar[data-snap="peek"] { transform: translateY(calc(100% - var(--peek-h))); }
  .sidebar[data-snap="half"] { transform: translateY(34%); }
  .sidebar[data-snap="full"] { transform: translateY(0); }
  .sidebar.dragging { transition: none; }

  /* 抓手 */
  .sheet-grab {
    display: flex; align-items: center; justify-content: center;
    height: 22px; flex: 0 0 auto;
    cursor: grab; touch-action: none;
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet-grab:active { cursor: grabbing; }
  .sheet-grab .sg-bar {
    width: 40px; height: 4px; border-radius: 999px;
    background: #d3dae6;
    transition: background .16s var(--ease), width .16s var(--ease);
  }
  .sidebar.dragging .sheet-grab .sg-bar { background: var(--brand); width: 54px; }

  /* 排序 Tab 行（高德：左边排序、右边筛选） */
  .ms-sortbar {
    display: flex; align-items: center; gap: 8px;
    flex: 0 0 auto;
    padding: 0 12px 6px;
    background: var(--card);
  }
  .ms-tabs {
    display: flex; align-items: center; gap: 2px;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .ms-tabs::-webkit-scrollbar { display: none; }
  .ms-tab {
    position: relative; flex: 0 0 auto;
    border: none; background: none; cursor: pointer;
    padding: 7px 9px 9px;
    font-size: 14px; font-weight: 600; color: var(--ink-3);
    white-space: nowrap;
    transition: color .15s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .ms-tab.on { color: var(--ink); font-weight: 750; }
  .ms-tab.on::after {
    content: ""; position: absolute; left: 50%; bottom: 2px;
    transform: translateX(-50%);
    width: 18px; height: 3px; border-radius: 2px; background: var(--brand);
  }
  .ms-filter {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    border: none; background: none; cursor: pointer;
    padding: 7px 2px 9px;
    font-size: 13.5px; font-weight: 650; color: var(--ink-2);
    white-space: nowrap;
  }
  .ms-filter svg { color: var(--ink-3); }
  .ms-filter.has-filter, .ms-filter.has-filter svg { color: var(--brand); }
  .ms-filter .bf-count {
    min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 999px; background: var(--brand); color: #fff;
    font-size: 10.5px; font-weight: 750;
    display: grid; place-items: center;
  }

  /* 列表头：窄屏只留计数 */
  /* 关键修复：底部面板是「固定全高 + translateY 位移」，内部滚动容器原本会拿到
     全高（含被位移藏到屏幕外的部分），导致下半截内容被 overflow:hidden 截掉且
     无滚动区间。这里把 .results 上限锁到「可见高度 − 抓手高度」，让 .school-list /
     .school-detail 等 flex:1 子项正好填满可见区，内部滚动才正常、内容才滚得到。 */
  .results {
    border-radius: 0;
    max-height: calc(var(--sheet-visible, 300px) - var(--grab-h, 22px));
  }
  .results-head {
    padding: 0 14px 8px; border-bottom: none;
    background: var(--card); flex-wrap: nowrap;
  }
  #result-count { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
  #viewport-count, .sort-select, .list-actions { display: none; }

  /* 列表本体：更紧凑的高德式条目 */
  .school-list { padding: 0 12px calc(26px + var(--safe-b)); }
  .school-card { border-radius: 14px; padding: 12px 13px 10px; margin-bottom: 9px; }
  .sc-name { font-size: 15px; }
  .sc-jp { font-size: 11px; }
  .sc-facts { margin: 8px 0 0; gap: 4px; }
  .sc-facts li { font-size: 12.5px; }
  .sc-tags .sc-tag:nth-child(n+4) { display: none; }
  .sc-foot { margin-top: 9px; padding-top: 8px; }
  .sc-detail { padding: 5px 11px; }
  .empty { padding: 34px 16px; }

  /* --- 筛选面板 → 从底部上滑的抽屉 --- */
  .filter-panel {
    position: absolute; inset: 0;
    transform: translateY(101%);
    border-radius: 20px 20px 0 0;
    box-shadow: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .sidebar.filters-open .filter-panel { transform: translateY(0); }
  .fp-grab {
    display: flex; align-items: flex-start; justify-content: center;
    height: 18px; flex: 0 0 auto; padding-top: 7px;
  }
  .fp-grab span { width: 40px; height: 4px; border-radius: 999px; background: #d3dae6; }
  .fp-head { padding: 6px 16px 12px; }
  .fp-body { padding: 12px 14px 18px; }
  .fp-foot { padding-bottom: calc(12px + var(--safe-b)); }

  /* --- 右侧悬浮控件：永远贴在卡片上沿之上 --- */
  .maplibregl-ctrl-top-right { top: var(--ctrl-top); right: 10px; }
  .maplibregl-ctrl-group {
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .16) !important;
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .maplibregl-ctrl-group button { width: 42px; height: 42px; }
  .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
  .map-fab {
    right: 10px;
    width: 42px; height: 42px; border-radius: 14px;
    bottom: calc(var(--sheet-visible) + 12px);
    transition: bottom .34s cubic-bezier(.22, 1, .36, 1),
                transform .16s var(--ease), background .16s var(--ease);
  }
  #toggle-legend { bottom: calc(var(--sheet-visible) + 62px); }
  /* 第三个按钮再往上叠一层，避免和上面两个挤在一起 */
  #toggle-transit { bottom: calc(var(--sheet-visible) + 112px); }
  .map-legend {
    left: 10px;
    bottom: calc(var(--sheet-visible) + 12px);
    max-width: min(64vw, 260px);
    transition: bottom .34s cubic-bezier(.22, 1, .36, 1);
  }
  .map-legend.collapsed { max-width: none; }

  /* 移动端：边界条浮在底部面板之上（跟着面板高度走），不压面板内容 */
  .boundary-note { bottom: calc(var(--sheet-visible, 300px) + 14px); font-size: 11px; }

  /* 详情视图：详情自己撑高，跟着面板一起滚 */
  .school-detail {
    animation: sdIn .22s cubic-bezier(.22, 1, .36, 1);
    padding: 12px 14px calc(24px + var(--safe-b, 0px));
  }
  @keyframes sdIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  /* 演示数据标记在手机上不显示（避免与右上控件重叠） */
  .demo-badge { display: none; }
  .geo-status { top: calc(100px + env(safe-area-inset-top, 0px)); max-width: 88%; }

  /* 触屏不显示 hover 抬升，避免“点了还在飘” */
  .chip:hover, .map-fab:hover, .school-card:hover { transform: none; }
}

/* 更窄的屏幕：卡片最低档再压低一点，给地图留出空间 */
@media (max-width: 400px) {
  :root { --peek-h: 278px; }
  .ms-tab { font-size: 13.5px; padding: 7px 7px 9px; }
  .ms-filter { font-size: 13px; }
}

/* 尊重用户减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}