/* =========================================================================
   环宙 ORBITA · 样式表
   设计语言：深夜丝路 —— 深靛底 + 丝路金 / 珊瑚红 / 青玉
   ========================================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root {
  --bg: #06080f;
  --bg-soft: #0a0e1a;
  --bg-elev: #0e1424;
  --surface: rgba(255, 255, 255, 0.038);
  --surface-2: rgba(255, 255, 255, 0.068);
  --surface-3: rgba(255, 255, 255, 0.10);
  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #eaf0fa;
  --text-2: #b9c3d6;
  --muted: #8892a8;
  --dim: #5b6478;

  --gold: #e9b949;
  --coral: #f2617a;
  --teal: #2fc4a8;
  --indigo: #7c8cf8;
  --amber: #f0a020;

  --s-casia: #f0a020;
  --s-caucasus: #2fc4a8;
  --s-europe: #7c8cf8;
  --s-africa: #ef5d7a;

  --grad: linear-gradient(100deg, var(--gold), var(--coral) 55%, #c86dd7);
  --glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 50px -18px rgba(0, 0, 0, 0.9);
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-full: 999px;

  --pad: clamp(16px, 4vw, 40px);
  --maxw: 1280px;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Source Han Sans SC",
    "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  --bg: #f4f2ee;
  --bg-soft: #eceae4;
  --bg-elev: #ffffff;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.92);
  --surface-3: rgba(20, 23, 31, 0.06);
  --line: rgba(20, 23, 31, 0.10);
  --line-2: rgba(20, 23, 31, 0.20);
  --text: #14171f;
  --text-2: #3c434f;
  /* M19-C：这两个值原为 #6b7280 / #9aa1ad，实测在浅底上只有
     4.32:1 与 2.33:1，均不达 WCAG AA。保持色相压暗到刚好达标并留余量：
     --muted 4.60:1（底色）/4.98:1（卡片），--dim 3.10:1 / 3.35:1。
     --dim 是页脚版权行、日期、字数统计等次要信息的用色，
     2.33:1 意味着浅色主题下这批字几乎读不出来。 */
  --muted: #676e7b;
  --dim: #848a94;
  --gold: #b7820f;
  --coral: #d9455f;
  --teal: #0d8f79;
  --indigo: #5560d8;
  --amber: #c47c10;
  --s-casia: #c47c10;
  --s-caucasus: #0d8f79;
  --s-europe: #5560d8;
  --s-africa: #d9455f;
  --glow: 0 0 0 1px rgba(20, 23, 31, 0.06), 0 18px 44px -22px rgba(20, 23, 31, 0.28);
  --shadow: 0 22px 50px -30px rgba(20, 23, 31, 0.35);
}

/* ---------- 2. 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 78px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
body.locked { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--gold); color: #10131a; }

/* 背景光晕 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60vw 44vw at 12% -6%, rgba(233, 185, 73, 0.14), transparent 62%),
    radial-gradient(52vw 40vw at 88% 4%, rgba(124, 140, 248, 0.14), transparent 60%),
    radial-gradient(60vw 50vw at 50% 108%, rgba(47, 196, 168, 0.10), transparent 62%);
}
[data-theme="light"] body::before { opacity: 0.55; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); position: relative; z-index: 1; }

/* ---------- 3. 通用组件 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 20px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 14px; font-weight: 600;
  transition: transform 0.22s var(--ease), background 0.22s, border-color 0.22s, box-shadow 0.22s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--line-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn--primary {
  background: var(--grad); color: #12131a; border: 0; font-weight: 800;
  box-shadow: 0 10px 30px -12px rgba(233, 185, 73, 0.7);
}
.btn--primary:hover { filter: brightness(1.06); box-shadow: 0 14px 36px -12px rgba(233, 185, 73, 0.85); }
.btn--ghost { background: transparent; }
.btn--sm { padding: 7px 14px; font-size: 13px; }

/* M19-C：触摸目标尺寸。
   实测 390px 窄屏下 83 个可点元素里有 50 个宽或高不足 44px
   （WCAG 2.5.5 / iOS HIG 建议值），其中 .btn 高 36px、纯文字链接仅 17px。
   只在「粗指针」或「窄屏」下放大 —— 鼠标用户在桌面端不需要更大的点击区，
   无差别加高会把整个页面撑松。 */
@media (pointer: coarse), (max-width: 760px) {
  .btn, .btn--sm { min-height: 44px; }
  .nav__links a, .nav__brand { min-height: 44px; display: inline-flex; align-items: center; }
  .range-btn, .chip, .picks__more { min-height: 44px; display: inline-flex; align-items: center; }
  .cmt__form input, .search input { min-height: 44px; }
  /* 各种分段/筛选切换条与 tabbar 同理：都是高频点击区 */
  .routes__tabs button, .segfilter button, .picks__tabs button { min-height: 44px; }
  /* 纯文字链接触摸时给足点击热区（页脚的 li 版本见 .foot 一节，
     那里用 display:block + padding 避免相邻链接热区粘连） */
  .picker a, .views a { padding-block: 6px; }
}
.btn--icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
/* M19-C：图标按钮触摸时补到 44×44（桌面端 40×40 已足够，圆形视觉不变） */
@media (pointer: coarse), (max-width: 760px) {
  .btn--icon { width: 44px; height: 44px; }
  .btn--sm { min-height: 44px; }
}
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2); white-space: nowrap;
}
.chip--gold { color: var(--gold); border-color: rgba(233, 185, 73, 0.35); background: rgba(233, 185, 73, 0.1); }
.chip--teal { color: var(--teal); border-color: rgba(47, 196, 168, 0.35); background: rgba(47, 196, 168, 0.1); }
.chip--coral { color: var(--coral); border-color: rgba(242, 97, 122, 0.35); background: rgba(242, 97, 122, 0.1); }
.chip--indigo { color: var(--indigo); border-color: rgba(124, 140, 248, 0.35); background: rgba(124, 140, 248, 0.1); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}

.sec { padding-block: clamp(56px, 9vw, 104px); position: relative; }
.sec__head { max-width: 760px; margin-bottom: clamp(26px, 4vw, 44px); }
.sec__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 14px;
}
.sec__kicker::before { content: ""; width: 22px; height: 1px; background: var(--gold); opacity: 0.7; }
.sec__title { font-size: clamp(26px, 4.4vw, 44px); line-height: 1.16; font-weight: 800; letter-spacing: -0.02em; }
.sec__title em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec__desc { color: var(--muted); margin-top: 14px; font-size: 15.5px; max-width: 660px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 滚动显现 */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 4. 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 80;
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 82%, transparent) 72%,
    color-mix(in srgb, var(--bg) 55%, transparent) 100%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.nav.stuck { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 18px; height: 66px; }
.nav__brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -0.01em; }
.nav__mark {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: var(--grad); display: grid; place-items: center;
  color: #12131a; font-size: 15px; font-weight: 900;
  box-shadow: 0 6px 18px -8px rgba(233, 185, 73, 0.9);
}
.nav__name { font-size: 16px; line-height: 1.15; }
.nav__name small { display: block; font-size: 9.5px; letter-spacing: 0.26em; color: var(--muted); font-weight: 600; }
.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 8px 13px; border-radius: var(--r-full); font-size: 14px; color: var(--muted);
  font-weight: 600; transition: color 0.2s, background 0.2s;
}
.nav__links a:hover { color: var(--text); background: var(--surface); }
.nav__links a.active { color: var(--text); background: var(--surface-2); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__cta { margin-left: 4px; }

@media (max-width: 1080px) { .nav__links { display: none; } .nav__actions { margin-left: auto; } }

/* ---------- 5. 移动端底部标签栏 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--line);
}
.tabbar__inner { display: flex; }
.tabbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px; border-radius: 12px; color: var(--dim); font-size: 10.5px; font-weight: 700;
  transition: color 0.2s, background 0.2s;
}
/* M19-C：移动端底部主导航是全局最高频的点击区，实测仅 36px 高。
   底部导航不像桌面按钮可以"看到就行"——它常被单手拇指误触，
   44px 是底线；同时把 padding 补够，别让 min-height 挤掉图标间距。 */
@media (max-width: 760px), (pointer: coarse) {
  .tabbar button { min-height: 44px; justify-content: center; padding-block: 9px; }
  .asst__fab { min-width: 44px; min-height: 44px; justify-content: center; }
  .cmt__act, .post__act { min-height: 44px; display: inline-flex; align-items: center; }
}
.tabbar button svg { width: 21px; height: 21px; stroke-width: 1.9; }
.tabbar button.active { color: var(--gold); background: rgba(233, 185, 73, 0.1); }
@media (max-width: 760px) {
  .tabbar { display: block; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  html { scroll-padding-top: 70px; }
}

/* ---------- 6. 首屏 ---------- */
.hero { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(24px, 4vw, 40px); position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__kicker {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 8px;
  border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-bottom: 22px;
}
.hero__kicker b { color: var(--gold); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(47, 196, 168, 0.7); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 196, 168, 0.6); } 70% { box-shadow: 0 0 0 9px rgba(47, 196, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 196, 168, 0); } }

.hero__title { font-size: clamp(38px, 8.4vw, 86px); line-height: 0.98; font-weight: 900; letter-spacing: -0.035em; }
.hero__title span { display: block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { margin-top: 20px; color: var(--text-2); font-size: clamp(14.5px, 1.6vw, 17px); max-width: 520px; }
.hero__route { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 11px; }

/* 数据条 */
.stats { margin-top: clamp(34px, 5vw, 52px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--bg-soft); padding: 20px 18px; }
.stat__n { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; font-variant-numeric: tabular-nums; }
.stat__n.u { font-size: clamp(14px, 1.6vw, 17px); font-weight: 700; }
.stat__l { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* 倒计时卡 */
.clock {
  position: relative; padding: 26px; border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--surface-2), transparent 70%), var(--bg-soft);
  border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden;
}
.clock::after {
  content: ""; position: absolute; width: 240px; height: 240px; right: -80px; top: -110px;
  background: radial-gradient(circle, rgba(233, 185, 73, 0.24), transparent 68%); pointer-events: none;
}
.clock__label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.clock__big { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.clock__num { font-size: clamp(54px, 11vw, 86px); font-weight: 900; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.clock__unit { font-size: 17px; color: var(--text-2); font-weight: 700; }
.clock__date { margin-top: 12px; color: var(--text-2); font-size: 13.5px; }
.clock__bar { margin-top: 18px; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.clock__fill { height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width 1s var(--ease-out); }
.clock__foot { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.clock__now { margin-top: 16px; padding: 13px 15px; border-radius: var(--r-sm); background: rgba(233, 185, 73, 0.09); border: 1px solid rgba(233, 185, 73, 0.24); font-size: 13.5px; }
.clock__now b { color: var(--gold); }

/* ---------- 7. 分段概览 ---------- */
.segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .segs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .segs { grid-template-columns: 1fr; } }
.segcard { padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; transition: transform 0.3s var(--ease), border-color 0.3s; }
.segcard:hover { transform: translateY(-3px); border-color: var(--line-2); }
.segcard__bar { position: absolute; inset: 0 auto 0 0; width: 3px; }
.segcard__n { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.segcard__t { font-size: 19px; font-weight: 800; margin-top: 8px; letter-spacing: -0.01em; }
.segcard__d { color: var(--muted); font-size: 13.5px; margin-top: 8px; min-height: 44px; }
.segcard__m { margin-top: 14px; display: flex; gap: 12px; font-size: 12.5px; color: var(--text-2); }
.segcard__m b { color: var(--text); }

/* ---------- 8. 地图 ---------- */
.mapwrap {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(170deg, #0a1020, #070a13 65%);
  box-shadow: var(--shadow);
}
[data-theme="light"] .mapwrap { background: linear-gradient(170deg, #eef1f8, #e6e9f2 65%); }
#map { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
#map.grabbing { cursor: grabbing; }
.map__land { fill: #16203a; stroke: #2b3a5e; stroke-width: 1; vector-effect: non-scaling-stroke; }
[data-theme="light"] .map__land { fill: #dfe4f0; stroke: #b9c2d8; }
.map__grat { stroke: rgba(255, 255, 255, 0.045); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
[data-theme="light"] .map__grat { stroke: rgba(20, 23, 31, 0.07); }
.map__route { fill: none; stroke-width: 2.7; stroke-linecap: round; opacity: 0.95; vector-effect: non-scaling-stroke; }
.map__route.land { stroke-dasharray: none; }
.map__route.air { stroke-dasharray: 5 4; }
.map__node { cursor: pointer; }
.map__node circle.halo { fill: currentColor; opacity: 0.14; }
.map__node circle.core { fill: var(--bg); stroke: currentColor; stroke-width: 1.9; }
.map__node text { font-size: 8.6px; fill: var(--text-2); font-weight: 700; paint-order: stroke; stroke: var(--bg); stroke-width: 2.4px; stroke-linejoin: round; }
.map__node.active circle.halo { opacity: 0.3; }
.map__node.active circle.core { fill: currentColor; }
.map__node.dim { opacity: 0.28; }
.map__traveler { fill: #fff; filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.95)); pointer-events: none; }

.mapui { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; pointer-events: none; }
.mapui > * { pointer-events: auto; }
.mapui__panel { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-full); background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.mapui__panel button { padding: 7px 13px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 700; color: var(--muted); transition: 0.2s; }
.mapui__panel button:hover { color: var(--text); }
.mapui__panel button.on { background: var(--surface-3); color: var(--text); }
.mapui__right { margin-left: auto; display: flex; gap: 6px; }

.maplegend {
  position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(14px); max-width: calc(100% - 28px);
}
.maplegend button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 700; color: var(--muted); transition: 0.2s; }
.maplegend button i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.maplegend button.on { color: var(--text); background: var(--surface-3); }
.maplegend button.off { opacity: 0.42; }

.map__hint { position: absolute; right: 14px; bottom: 14px; font-size: 11.5px; color: var(--dim); background: color-mix(in srgb, var(--bg) 82%, transparent); padding: 6px 11px; border-radius: var(--r-full); border: 1px solid var(--line); }
.map__hint b { color: var(--gold); font-weight: 400; }
@media (max-width: 760px) {
  .map__hint { display: none; }
  /* 手机上地图只有 ~210px 高，控件不再悬浮压图，改为排在图下 */
  .mapui { position: static; top: auto; left: auto; right: auto; padding: 10px 12px 0; gap: 6px; }
  .mapui__right { margin-left: auto; }
  .mapui__panel { background: var(--bg-soft); backdrop-filter: none; gap: 4px; }
  .mapui__panel button { padding: 6px 8px; font-size: 11.5px; }
  .maplegend { position: static; margin: 10px 14px 14px; }
  .mapwrap { padding-bottom: 4px; }
}

.tip {
  position: absolute; pointer-events: none; z-index: 12; padding: 9px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent); border: 1px solid var(--line-2);
  box-shadow: var(--shadow); font-size: 12.5px; min-width: 130px;
  opacity: 0; transform: translateY(6px); transition: opacity 0.16s, transform 0.16s;
}
.tip.on { opacity: 1; transform: none; }
.tip b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.tip span { color: var(--muted); }

/* ---------- 8b. MapLibre 卫星 3D 地形地图 ---------- */
/* SVG 版靠 viewBox 自适应高度，WebGL 版需给容器显式高度 */
#mapHost { position: relative; height: clamp(360px, 52vh, 560px); }
#mapHost .maplibregl-canvas { outline: none; }
.loop-mk { position: absolute; display: block; cursor: pointer; }
.loop-mk__dot {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 2px solid currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
  transition: transform .2s, box-shadow .2s;
}
.loop-mk.active .loop-mk__dot { background: currentColor; transform: scale(1.18); box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 30%, transparent); }
.loop-mk.dim { opacity: .28; }
.loop-mk__mode {
  position: absolute; left: 11px; top: -9px; font-size: 9px; font-weight: 800; line-height: 1;
  color: var(--text-2); background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 3px; pointer-events: none;
}
.mapwrap.modes-off .loop-mk__mode { display: none; }
.loop-mk__label {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 12px; font-weight: 700;
  color: var(--text); paint-order: stroke; -webkit-text-stroke: 2.4px var(--bg); text-shadow: 0 0 3px var(--bg);
  pointer-events: none;
}
#mapHost.labels-off .loop-mk__label { display: none; }
/* 暗色地形模式下：底图只剩山体阴影 + 深底，城市标签改用浅描边提升可读性 */
#mapHost.dark-terrain .loop-mk__label { color: #eef2ff; -webkit-text-stroke: 2.6px #060912; text-shadow: 0 0 4px rgba(6,9,18,.85); }
#mapHost.dark-terrain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 80px 8px rgba(4,7,16,.55); border-radius: inherit;
}
.loop-traveler {
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, .9); border: 2px solid #2FC4A8;
}
.loop-geo {
  width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: #2f9bff;
  transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 0 0 5px rgba(47, 155, 255, .28);
}
.maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--muted); }
.maplibregl-ctrl-attrib a { color: var(--text-2); }
.maplibregl-ctrl-attrib-button { filter: invert(.85); }
@media (max-width: 760px) { #mapHost { height: 320px; } }

/* ---------- 9. 时间轴 ---------- */
.tlctl { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.segfilter { display: flex; gap: 6px; flex-wrap: wrap; padding: 5px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); }
.segfilter button { padding: 7px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 700; color: var(--muted); transition: 0.2s; }
.segfilter button.on { color: var(--text); background: var(--surface-3); }

.tl { position: relative; padding-left: 26px; }
.tl::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent); }
.tl__seghead { position: relative; margin: 34px 0 16px; padding-left: 0; }
.tl__seghead:first-child { margin-top: 0; }
.tl__seghead::before { content: ""; position: absolute; left: -26px; top: 6px; width: 13px; height: 13px; border-radius: 4px; background: var(--sg); box-shadow: 0 0 0 3px var(--bg); transform: rotate(45deg); }
.tl__seghead h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl__seghead h3 small { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; }
.tl__seghead p { color: var(--muted); font-size: 13.5px; margin-top: 3px; }

.tl__item { position: relative; margin-bottom: 10px; }
.tl__item::before { content: ""; position: absolute; left: -23px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--sg); transition: 0.25s; }
.tl__item.open::before { background: var(--sg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sg) 22%, transparent); }
.tlc {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  overflow: hidden; transition: border-color 0.25s, background 0.25s;
}
.tlc:hover { border-color: var(--line-2); }
.tl__item.open .tlc { background: var(--surface-2); border-color: color-mix(in srgb, var(--sg) 46%, var(--line)); }
.tlc__head { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; }
.tlc__day { font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--sg); }
.tlc__day span { display: block; color: var(--dim); font-weight: 500; font-size: 11px; white-space: nowrap; }
.tlc__name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tlc__name small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.tlc__flag { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tlc__right { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.tlc__mode { font-size: 18px; display: inline-flex; color: var(--text-2); }
.tlc__mode svg { width: 20px; height: 20px; }
.tlc__chev { transition: transform 0.3s var(--ease); width: 18px; height: 18px; opacity: 0.6; }
.tl__item.open .tlc__chev { transform: rotate(180deg); }
.tlc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s var(--ease); }
.tl__item.open .tlc__body { grid-template-rows: 1fr; }
.tlc__inner { overflow: hidden; }
.tlc__pad { padding: 2px 16px 18px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 14px; }
.tlc__note { color: var(--text-2); font-size: 14px; }
.tlc__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 16px; }
.tlc__h { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin-bottom: 8px; }
.tlc__list li { position: relative; padding-left: 15px; font-size: 13.5px; color: var(--text-2); margin-bottom: 5px; }
.tlc__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--sg); opacity: 0.8; }
.tlc__tip { font-size: 13.5px; color: var(--text-2); background: var(--surface); border-left: 2px solid var(--gold); padding: 10px 12px; border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.tlc__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 640px) {
  .tlc__head { grid-template-columns: 58px 1fr; gap: 10px; }
  .tlc__right { grid-column: 1 / -1; justify-content: space-between; padding-top: 4px; border-top: 1px dashed var(--line); }
}

/* ---------- 10. 预算 ---------- */
.bgrid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .bgrid { grid-template-columns: 1fr; } }
.bsticky { position: sticky; top: 92px; }
@media (max-width: 900px) { .bsticky { position: static; } }
.donutwrap { position: relative; display: grid; place-items: center; }
.donut { width: min(320px, 74vw); aspect-ratio: 1; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 20; stroke-linecap: butt; transition: stroke-width 0.25s, opacity 0.25s; }
.donut circle.off { opacity: 0.26; }
.donut__c { position: absolute; text-align: center; }
.donut__c b { display: block; font-size: clamp(28px, 5vw, 40px); font-weight: 900; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.donut__c span { color: var(--muted); font-size: 12.5px; }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid transparent; transition: 0.22s; cursor: default; }
.bar:hover { background: var(--surface); border-color: var(--line); }
.bar__i { font-size: 19px; text-align: center; width: 22px; }
.bar__i svg { width: 21px; height: 21px; display: block; margin: 0 auto; }
.bar__t { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; }
.bar__t span { color: var(--muted); font-weight: 600; font-size: 12px; }
.bar__track { height: 7px; border-radius: var(--r-full); background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.bar__fill { height: 100%; border-radius: inherit; transition: width 0.8s var(--ease-out); }
.bar__v { font-family: var(--mono); font-size: 14px; font-weight: 700; text-align: right; }
.bar__v small { display: block; color: var(--dim); font-size: 11px; font-weight: 500; }
.bar__note { grid-column: 2 / -1; font-size: 12px; color: var(--dim); margin-top: -4px; }

.calc { margin-top: 26px; padding: 20px; }
.calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  outline: none; transition: border-color 0.2s, background 0.2s; font-size: 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: var(--surface-2); }
/* M19-C：上面只改 1px 边框色，视觉指示太弱（实测 16 个表单控件
   全部 outline=none 且无 box-shadow）。这里补一条真正可见的焦点环，
   用 :focus-visible 以免鼠标点击时也冒出外框。 */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.65; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.ranges { display: flex; gap: 6px; flex-wrap: wrap; }
.range-btn { flex: 1; min-width: 74px; padding: 9px 6px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--muted); transition: 0.2s; }
.range-btn.on { color: #12131a; background: var(--grad); border-color: transparent; }
.calc__out { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.calc__cell { background: var(--bg-soft); padding: 15px 16px; }
.calc__cell b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc__cell span { color: var(--muted); font-size: 12px; }

/* ---------- 11. 国家 / 签证 ---------- */
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.ccard { padding: 17px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: transform 0.28s var(--ease), border-color 0.28s; position: relative; overflow: hidden; cursor: pointer; }
.ccard:hover { transform: translateY(-3px); border-color: var(--line-2); }
.ccard__flag { display: block; line-height: 1; }
/* 国家代码徽标：不依赖 emoji 字体（Windows 无国旗字形、部分系统会显示豆腐块） */
.ccb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 29px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--gold); text-indent: 0.14em;
}
.calc__i { display: inline-flex; width: 15px; height: 15px; flex: 0 0 15px; }
.calc__i svg { width: 15px; height: 15px; }
.ccard__t { font-size: 17px; font-weight: 800; margin-top: 10px; letter-spacing: -0.01em; }
.ccard__e { font-size: 11px; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1px; }
.ccard__v { margin-top: 11px; display: flex; gap: 6px; flex-wrap: wrap; }
.ccard__raw { margin-top: 10px; font-size: 12px; color: var(--dim); display: flex; gap: 10px; flex-wrap: wrap; }
.vt { padding: 3px 9px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 700; }
.vt.free { background: rgba(47, 196, 168, 0.14); color: var(--teal); }
.vt.voa { background: rgba(240, 160, 32, 0.14); color: var(--amber); }
.vt.evisa { background: rgba(124, 140, 248, 0.14); color: var(--indigo); }
.vt.schengen { background: rgba(233, 185, 73, 0.14); color: var(--gold); }
.vt.apply { background: rgba(242, 97, 122, 0.14); color: var(--coral); }
.vt.home { background: var(--surface-3); color: var(--muted); }

/* ---------- 12. 装备清单 ---------- */
.gear__top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.gear__prog { flex: 1; min-width: 220px; }
.gear__track { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.gear__fill { height: 100%; background: var(--grad); width: 0; transition: width 0.5s var(--ease-out); }
.gear__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.gear__g { padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.gear__g h3 { font-size: 15px; font-weight: 800; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.gear__g h3 em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; font-family: var(--mono); }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 13.5px; color: var(--text-2); cursor: pointer; transition: color 0.2s; }
.check:hover { color: var(--text); }
.check input { display: none; }
.check i { flex: none; width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--line-2); margin-top: 3px; display: grid; place-items: center; transition: 0.2s; }
.check i svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.5); transition: 0.2s; color: #12131a; }
.check input:checked + i { background: var(--gold); border-color: var(--gold); }
.check input:checked + i svg { opacity: 1; transform: none; }
.check input:checked ~ span { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* 避坑 & 季节 */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.note { padding: 17px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.note b { display: block; font-size: 15px; margin-bottom: 6px; }
.note p { font-size: 13.5px; color: var(--muted); }
.season { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 820px) { .season { grid-template-columns: repeat(2, 1fr); } }
.season__c { padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.season__m { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.season__tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; }
.season__c p { font-size: 12.5px; color: var(--muted); }

/* ---------- 13. 社区 ---------- */
.combar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 20px; position: sticky; top: 74px; z-index: 30; box-shadow: 0 16px 30px -22px rgba(0,0,0,.85); }
[data-theme="light"] .combar { background: #fff; }
.comtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.comtabs button { padding: 8px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 700; color: var(--muted); transition: 0.2s; white-space: nowrap; }
.comtabs button:hover { color: var(--text); background: var(--surface-3); }
.comtabs button.on { color: #12131a; background: var(--grad); }
.search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 150px; padding: 8px 13px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); }
.search input { border: 0; background: none; outline: none; width: 100%; font-size: 13.5px; }
.search svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
@media (max-width: 760px) { .combar { position: static; } }

.feed { columns: 3 300px; column-gap: 14px; }
.post { break-inside: avoid; margin-bottom: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform 0.3s var(--ease), border-color 0.3s; display: inline-block; width: 100%; }
.post:hover { transform: translateY(-3px); border-color: var(--line-2); }
.post__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d1220; }
.post__cover svg { width: 100%; height: 100%; display: block; }
.post__cover img { width: 100%; height: 100%; object-fit: cover; }
.post__badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 800; background: rgba(6, 8, 15, 0.72); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); }
.post__body { padding: 15px 16px 13px; }
.post__title { font-size: 15.5px; font-weight: 800; line-height: 1.42; letter-spacing: -0.005em; }
.post__text { margin-top: 8px; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.post__tags { margin-top: 11px; display: flex; gap: 5px; flex-wrap: wrap; }
.post__loc { margin-top: 11px; font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post__foot { display: flex; align-items: center; gap: 4px; padding: 9px 12px; border-top: 1px solid var(--line); }
.act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 700; color: var(--muted); transition: 0.2s; }
.act:hover { background: var(--surface-3); color: var(--text); }
.act svg { width: 15px; height: 15px; }
.act.on { color: var(--coral); }
.act.on.save { color: var(--gold); }
.act.mine { color: var(--teal); }
.post__spacer { flex: 1; }
.post__author { font-size: 12px; color: var(--dim); }

/* 卡片封面：上传图片 / 多图缩略 */
.post__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__thumbs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; padding: 4px 4px 5px; background: linear-gradient(transparent, rgba(3,5,10,.55)); }
.post__thumbs img { flex: 1; height: 34px; object-fit: cover; border-radius: 5px; opacity: .9; }
.post__more { display: flex; align-items: center; justify-content: center; min-width: 30px; height: 34px; border-radius: 5px; background: rgba(3,5,10,.6); color: #fff; font-size: 12px; font-weight: 800; }
.post__badge--img { left: auto; right: 10px; }

/* 详情：图片画廊 + 灯箱 */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; border-radius: var(--r); overflow: hidden; }
.gal__i { width: 100%; height: 96px; object-fit: cover; cursor: zoom-in; transition: 0.2s; background: #0d1220; }
.gal__i:hover { filter: brightness(1.08); }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(2,4,9,.92); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.on { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__x { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 999px; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; }
.lightbox__x:hover { background: rgba(255,255,255,.22); }

/* 发布：多图上传 */
.uploader { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.uploader__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 92px; height: 92px; border: 1.5px dashed var(--line-2); border-radius: var(--r); color: var(--muted); cursor: pointer; transition: 0.2s; font-size: 12px; font-weight: 700; }
.uploader__add:hover { border-color: var(--teal); color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, transparent); }
.uploader__add svg { width: 22px; height: 22px; }
.uploader__prev { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb { position: relative; width: 92px; height: 92px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none; border-radius: 999px; background: rgba(3,5,10,.72); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; }
.thumb__x:hover { background: var(--coral); }

.feed__empty { padding: 60px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r); }

/* 社区页脚说明 */
.comnote { margin-top: 22px; padding: 16px 18px; border-radius: var(--r); border: 1px dashed var(--line-2); font-size: 13px; color: var(--muted); }
.comnote b { color: var(--text); }
.combar__mode { font-size: 12px; padding: 6px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); letter-spacing: .2px; }
.combar__mode.on { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); background: color-mix(in srgb, var(--teal) 12%, transparent); }
.combar__mode.off { color: var(--muted); background: var(--surface-2); }

/* ---------- 14. 抽屉 / 弹层 ---------- */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(3, 5, 10, 0.62); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.scrim.on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); z-index: 110;
  background: var(--bg-elev); border-left: 1px solid var(--line); display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform 0.4s var(--ease-out); box-shadow: -30px 0 70px -40px #000;
}
.drawer.on { transform: none; }
.drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer__head h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; }
.drawer__head p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.drawer__close { margin-left: auto; flex: none; }
.drawer__body { overflow-y: auto; padding: 20px; flex: 1; -webkit-overflow-scrolling: touch; }
.drawer__foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }
.post__rep { margin-top: 10px; font-size: 12.5px; color: var(--coral); opacity: .88; }
.comadmin { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.comadmin a { color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--line-2); }
.comadmin a:hover { color: var(--gold); }

.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.28s; }
.modal.on { opacity: 1; pointer-events: auto; }
.modal__panel { width: min(620px, 100%); max-height: 88vh; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); transform: translateY(14px) scale(0.985); transition: transform 0.34s var(--ease-out); }
.modal.on .modal__panel { transform: none; }
.modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.modal__head h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.modal__head p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.modal__body { padding: 18px 22px; }
.modal__foot { padding: 0 22px 22px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .formgrid { grid-template-columns: 1fr; } }

.dl { display: grid; grid-template-columns: 92px 1fr; gap: 10px 14px; font-size: 13.5px; }
.dl dt { color: var(--dim); font-weight: 700; }
.dl dd { margin: 0; color: var(--text-2); }

.cmt { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.cmt__av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #12131a; }
.cmt__b { flex: 1; min-width: 0; }
.cmt__m { display: flex; gap: 8px; align-items: baseline; }
.cmt__m b { font-size: 13px; }
.cmt__m span { font-size: 11.5px; color: var(--dim); }
.cmt p { font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; margin-top: 2px; }
.cmt__form { display: flex; gap: 8px; margin-top: 14px; }
.cmt__form input { flex: 1; padding: 10px 13px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); outline: none; font-size: 13.5px; }
.cmt__form input:focus { border-color: var(--gold); }

/* ---------- 15. 提示条 ---------- */
.toast { position: fixed; left: 50%; bottom: 86px; transform: translate(-50%, 24px); z-index: 200; padding: 11px 20px; border-radius: var(--r-full); background: var(--bg-elev); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: 0.3s var(--ease-out); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 16. 页脚 ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 40px; padding-block: 46px 34px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }
.foot h5 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 13px; font-weight: 800; }
.foot li { margin-bottom: 8px; font-size: 13.5px; color: var(--muted); }
/* M19-C：页脚链接实测仅 17–29px 高。给 li 加纵向内边距来撑开
   触摸热区，而不是给 a 加 padding —— 后者会让相邻链接的点击区粘连。 */
@media (pointer: coarse), (max-width: 760px) {
  .foot li { margin-bottom: 0; }
  .foot li a { display: block; padding-block: 11px; }
}
.foot a:hover { color: var(--gold); }
.foot__brand p { color: var(--muted); font-size: 13.5px; max-width: 340px; margin-top: 12px; }
.foot__end { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--dim); }

/* ---------- 17. 工具 ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skiplink { position: absolute; left: 12px; top: -60px; z-index: 999; padding: 10px 16px; border-radius: var(--r-sm); background: var(--gold); color: #12131a; font-weight: 800; transition: top 0.2s; }
.skiplink:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* M19-C：键盘可达性兜底。
   项目里有 5 处 `outline: none`（.field / .search / .cmt__form /
   .asst__form 各加了一条 1px 边框变色），它们的选择器特异性都高于
   `:focus-visible` 这条全局规则，于是**全局焦点环被静默干掉了**。
   实测 16 个 input/select/textarea 完全没有焦点指示。
   这里按元素类型补回，声明放在最后确保胜出；
   用 :focus-visible 而不是 :focus，鼠标点击时不冒外框。 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.search input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.asst__form input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

/* =========================================================================
 * 环宙 ORBITA · 极光品牌升级（科技 / 未来 / 梦想感）
 * ========================================================================= */

/* 极光渐变成为主品牌色，金色降为暖色点缀 */
:root {
  --grad: linear-gradient(100deg, #2FC4A8, #7C8CF8 52%, #EF5D7A);
  --grad-brand: linear-gradient(120deg, #2FC4A8, #7C8CF8 52%, #EF5D7A);
  --brand-glow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 22px 60px -24px rgba(124, 140, 248, 0.55);
  --glass: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] {
  --grad: linear-gradient(100deg, #0d8f79, #5560d8 52%, #d9455f);
  --brand-glow: 0 0 0 1px rgba(20, 23, 31, 0.08), 0 22px 50px -26px rgba(85, 96, 216, 0.4);
}

/* 导航 Logo 标记 */
.nav__brand { gap: 11px; }
.nav__mark {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: url('../brand/logo.svg') center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 22px -10px rgba(124, 140, 248, 0.8);
  text-indent: -9999px; overflow: hidden;
}
.nav__name { font-size: 16px; line-height: 1.05; font-weight: 800; letter-spacing: 0.01em; display: flex; flex-direction: column; }
.nav__name small { font-size: 9.5px; letter-spacing: 0.3em; color: var(--muted); font-weight: 700; margin-top: 3px; }

/* 段落小标题用极光青，整体更冷调科技 */
.sec__kicker { color: var(--indigo); }
.sec__kicker::before { background: var(--indigo); }

/* ---------- 首屏极光 ---------- */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__aurora {
  position: absolute; width: 72vw; height: 72vw; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(47, 196, 168, 0.26), rgba(124, 140, 248, 0.12) 38%, transparent 68%);
  filter: blur(18px); top: -24vw; left: -14vw;
  animation: auroraDrift1 19s ease-in-out infinite alternate;
}
.hero__aurora--2 {
  background: radial-gradient(circle at 50% 50%, rgba(239, 93, 122, 0.22), rgba(124, 140, 248, 0.12) 42%, transparent 70%);
  top: auto; bottom: -28vw; left: auto; right: -16vw; width: 66vw; height: 66vw;
  animation: auroraDrift2 23s ease-in-out infinite alternate;
}
.hero__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.2px 1.2px at 72% 18%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.7px 1.7px at 38% 68%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.1px 1.1px at 86% 58%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1.3px 1.3px at 56% 44%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 28% 82%, rgba(255, 255, 255, 0.5), transparent);
  background-repeat: no-repeat; opacity: 0.55;
}
.hero__orb {
  position: absolute; right: 2%; top: 12%; width: 240px; height: 240px;
  background: url('../brand/logo.svg') center / contain no-repeat;
  opacity: 0.16; filter: drop-shadow(0 0 34px rgba(124, 140, 248, 0.55));
  animation: orbSpin 46s linear infinite; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero__title { font-size: clamp(34px, 6.4vw, 66px); letter-spacing: -0.03em; }
.hero__title span { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__route .arrow { color: var(--dim); align-self: center; margin: 0 1px; font-weight: 700; }
@keyframes auroraDrift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, 5vw, 0) scale(1.14); } }
@keyframes auroraDrift2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vw, -4vw, 0) scale(1.12); } }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .hero__orb { width: 150px; height: 150px; top: 6%; opacity: 0.12; } }

/* 统计卡辉光 */
.stats { box-shadow: var(--brand-glow); }
.stat { background: linear-gradient(180deg, var(--surface-2), var(--bg-soft)); }
.stat__n { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 分段卡片封面图 */
.segcard__cover {
  height: 118px; margin: -20px -20px 14px; position: relative;
  background-size: cover; background-position: center center;
  border-bottom: 1px solid var(--line);
}
.segcard__cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 11, 22, 0.12), rgba(8, 11, 22, 0.82));
}

/* 社区 / 路线区极光氛围 */
#community { position: relative; }
#community::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: 0; pointer-events: none;
  background: url('../img/scenery/community_map.webp') center / cover;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
#routes { background: radial-gradient(80% 60% at 80% 0%, rgba(124, 140, 248, 0.1), transparent 60%); }

/* ---------- 路线库 ---------- */
.routes__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.routes__tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); }
.routes__tabs button {
  padding: 7px 16px; border-radius: var(--r-full); font-size: 13px; font-weight: 700; color: var(--muted);
  transition: 0.22s var(--ease);
}
.routes__tabs button.on { background: var(--grad); color: #0b1026; }
.routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.rcard {
  position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.rcard:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--brand-glow); }
.rcard--on { border-color: transparent; box-shadow: 0 0 0 2px var(--indigo), var(--brand-glow); }
.rcard__cover { position: relative; height: 150px; background-size: cover; background-position: center; }
.rcard__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 11, 22, 0.1), rgba(8, 11, 22, 0.85)); }
.rcard__stats {
  position: absolute; left: 12px; bottom: 10px; display: flex; gap: 12px; font-size: 12.5px; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.rcard__stats b { font-size: 16px; font-weight: 800; }
.rcard__tag {
  position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(8, 11, 22, 0.6); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18);
}
.rcard__tag--mine { color: #bfe9ff; }
.rcard__tag--seed { color: #ffe6b0; }
.rcard__tag--tpl { color: #d9c6ff; }
.rcard__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rcard__t { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.rcard__s { color: var(--muted); font-size: 13px; }
.rcard__ref { font-size: 11.5px; color: var(--dim); line-height: 1.5; border-left: 2px solid var(--line-2); padding-left: 8px; }
.rcard__acts { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.routes__hint { margin-top: 22px; font-size: 12.5px; color: var(--dim); }
.routes__empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r); }

/* 路线编辑器 · 城市列表 */
.stops { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; padding-right: 4px; }
.stop {
  display: grid; grid-template-columns: 1.3fr 1fr 0.7fr 0.7fr 0.6fr 0.8fr 0.7fr 1.4fr auto;
  gap: 6px; align-items: center;
}
.stop input, .stop select { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; min-width: 0; }
.stop__del { width: 30px; height: 30px; border-radius: 8px; color: var(--coral); background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
@media (max-width: 720px) {
  .stop { grid-template-columns: 1fr 1fr; }
  .stop__del { grid-column: 1 / -1; }
}

/* ============ M9 · 封面图懒加载占位 ============ */
/* [data-bg] 在滚到可视区前由 lazybg.js 负责贴图；先给一层极光微光占位，
   避免卡片加载期间出现「黑洞」。贴图完成后打 data-bg-done，动画自动停止。 */
[data-bg]:not([data-bg-done]) {
  background-image: linear-gradient(100deg,
    rgba(47, 196, 168, .05) 28%,
    rgba(124, 140, 248, .14) 50%,
    rgba(239, 93, 122, .05) 72%);
  background-size: 240% 100%;
  background-position: 140% 0;
  animation: lazybgShimmer 1.6s ease-in-out infinite;
}
@keyframes lazybgShimmer {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}
/* 用户开启「减少动态效果」时不做位移动画 */
@media (prefers-reduced-motion: reduce) {
  [data-bg]:not([data-bg-done]) { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============ M9 · 网络状态提示条 ============ */
.netbar {
  position: fixed; left: 50%; bottom: 22px; z-index: 90;
  transform: translate(-50%, 14px);
  max-width: min(92vw, 560px);
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(12, 16, 30, .92);
  border: 1px solid rgba(124, 140, 248, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color: var(--text); font-size: 13.5px; line-height: 1.55;
  text-align: center;
  opacity: 0; transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.netbar.is-on { opacity: 1; transform: translate(-50%, 0); }
.netbar--off { border-color: rgba(239, 93, 122, .5); }
.netbar--warn { border-color: rgba(240, 160, 32, .5); }

/* 地图底片不可用时的角标（离线 / 瓦片被墙） */
.mapnet {
  position: absolute; left: 50%; top: 14px; z-index: 8;
  transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(12, 16, 30, .88);
  border: 1px solid rgba(240, 160, 32, .45);
  color: #ffd79a; font-size: 12.5px; line-height: 1.5;
  pointer-events: none;
}

/* ============ M10 · 移动端「标签栏 = 视图切换」 ============ */
/* 桌面端完全不受影响：仍是一页到底的锚点滚动单页。
   ≤760px 时 body.view-mode 生效，一次只显示一个视图的 section，
   点底部标签 = 换屏（和原生 App 一致），不再长距离拖动页面。 */

.viewtitle { display: none; }

@media (max-width: 760px) {
  body.view-mode #main > section[data-view] { display: none; }
  body.view-mode #main > section[data-view].is-view { display: block; }

  /* 顶部「当前视图」标题条 */
  body.view-mode .viewtitle {
    display: block;
    padding: 0 16px 8px;
    font-size: 11.5px; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    border-top: 1px solid var(--line);
    padding-top: 8px;
  }

  /* 换屏时的轻微入场动效（尊重"减少动态效果"） */
  body.view-mode #main > section[data-view].is-view > * {
    animation: viewIn .3s cubic-bezier(.22, .8, .3, 1) both;
  }
  @keyframes viewIn {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    body.view-mode #main > section[data-view].is-view > * { animation: none; }
  }

  /* 视图模式下首屏顶部不再需要给导航让那么多位*/
  body.view-mode .hero { padding-top: clamp(30px, 6vw, 48px); }
  /* 地图视图：去掉上下留白，让 3D 地图尽量占满整屏 */
  body.view-mode #main > section[data-view="map"].is-view { padding-block: clamp(12px, 3vw, 20px); }
}

/* ============ M11 · 品牌化首屏：品牌标题 + 精选路线 + 当前路线条 ============ */
.hero__title--brand em {
  display: block; font-style: normal;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub--brand { max-width: 560px; }
.hero__sub--brand strong { color: var(--text); }

/* 精选路线：横向卡片轨道 */
.picks { margin-top: clamp(22px, 3.4vw, 34px); }
.picks__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.picks__label {
  font-size: 12px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}
.picks__more { font-size: 13px; color: var(--dim); text-decoration: none; white-space: nowrap; }
.picks__more:hover { color: var(--text); }

.picks__rail {
  display: flex; gap: 12px;
  overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.picks__rail::-webkit-scrollbar { height: 6px; }
.picks__rail::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

.pick {
  position: relative; flex: 0 0 auto; width: 168px;
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  background: var(--surface-1); overflow: hidden; cursor: pointer;
  text-align: left; padding: 0;
  scroll-snap-align: start;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.pick:hover { transform: translateY(-3px); border-color: var(--gold); }
.pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pick__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.pick__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 11, 22, .18) 0%, rgba(8, 11, 22, .82) 62%, rgba(8, 11, 22, .95) 100%);
}
.pick__body { position: relative; padding: 12px 12px 13px; }
.pick__t { font-size: 14px; font-weight: 800; line-height: 1.35; color: #fff; }
.pick__s { font-size: 11.5px; color: var(--dim); margin-top: 3px; line-height: 1.45; }
.pick__m { display: flex; gap: 8px; margin-top: 9px; font-size: 11.5px; font-weight: 700; color: var(--gold); }
.pick__badge {
  position: absolute; top: 9px; right: 9px;
  padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  background: rgba(8, 11, 22, .72); color: var(--text); backdrop-filter: blur(6px);
}
.pick--on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(233, 185, 73, .18); }
.pick--on .pick__badge { background: var(--grad-brand); color: #0b1026; }

/* 当前路线上下文条 */
.now {
  margin-top: clamp(18px, 2.6vw, 26px);
  padding: 14px 16px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
}
.now__label {
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px;
}
.now__title { font-size: clamp(20px, 2.6vw, 27px); font-weight: 900; letter-spacing: -.02em; }
.now__sub { font-size: 13.5px; color: var(--text-2); margin-top: 6px; line-height: 1.6; }
.now__meta { margin-top: 9px; font-size: 14px; color: var(--gold); font-weight: 800; }

@media (max-width: 760px) {
  .pick { width: 150px; }
  .now { padding: 13px 14px 14px; }
}

/* ============ M14 · 首屏能力条 + 实时状态（紧凑） ============ */
/* 定位：属于「品牌介绍」区，紧跟品牌主张与 CTA；
   不属于「你正在看的路线」那半屏。
   形态：一行可换行的能力胶囊 + 一行状态，首屏只求一眼扫过。 */

.capband {
  margin-top: clamp(16px, 2.2vw, 24px);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-1) 62%, transparent);
  box-shadow: var(--brand-glow);
  position: relative; overflow: hidden;
}
.capband::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47, 196, 168, .5), rgba(124, 140, 248, .45), rgba(239, 93, 122, .4), transparent);
}

.capband__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.capband__label {
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.capband__sub {
  font-size: 10px; letter-spacing: .16em;
  color: var(--dim); opacity: .7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 能力胶囊：一行排开放不下就换行，绝不做成大卡片 */
.capband__list { display: flex; flex-wrap: wrap; gap: 7px; }
.cap {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px; border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  transition: border-color .2s, transform .2s, color .2s;
}
.cap:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
}
.cap__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  color: var(--gold);
  background: linear-gradient(140deg, rgba(47, 196, 168, .18), rgba(124, 140, 248, .18));
}
.cap__t { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

/* 状态：一行，四个小点+ 短标签 + 值 */
.statusline {
  list-style: none; margin: 10px 0 0; padding: 9px 0 0;
  border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.st__row { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.st__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--dim); opacity: .5;
}
.st__dot.is-ok {
  background: #2FC4A8; opacity: 1;
  animation: stPulse 2.4s ease-out infinite;
}
@keyframes stPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 196, 168, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(47, 196, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 196, 168, 0); }
}
.st__k { color: var(--dim); }
.st__v {
  color: var(--text-2); font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

@media (max-width: 760px) {
  .capband { padding: 11px 12px; }
  .cap__t { font-size: 12px; }
  .capband__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st__dot.is-ok { animation: none; }
  .cap:hover { transform: none; }
}

/* ===== M16 路线工具箱：对比 / 日历 / 备份 ===== */
.routes__tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -6px 0 22px; padding: 9px 12px;
  border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--surface-2);
}
.routes__tools-l {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); padding-right: 4px;
}
.routes__tools-h { font-size: 12px; color: var(--muted); flex: 1 1 220px; min-width: 0; }

/* 卡片左上角对比勾选 */
.rcard__cmp {
  position: absolute; top: 10px; left: 10px; z-index: 2; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(8, 11, 22, .55); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 800;
  transition: .2s var(--ease);
}
.rcard__cmp:hover { transform: scale(1.08); border-color: rgba(255,255,255,.45); }
.rcard__cmp input { position: absolute; opacity: 0; width: 0; height: 0; }
.rcard__cmp.is-on {
  background: var(--grad); color: #0b1026; border-color: transparent;
  box-shadow: 0 0 0 3px rgba(124, 140, 248, .22);
}
.rcard__cmp input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

/* 对比表 */
.cmp__panel .modal__body { padding-top: 4px; }
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp__t { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 420px; }
.cmp__t th, .cmp__t td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cmp__t thead th {
  font-size: 13.5px; font-weight: 800; color: var(--text);
  border-bottom: 1px solid var(--line-2); vertical-align: middle;
}
.cmp__t thead th .cmp__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px;
}
.cmp__rh { color: var(--dim); font-weight: 700; font-size: 12px; width: 96px; }
.cmp__t tbody td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.cmp__t tbody td.is-best { color: var(--text); font-weight: 800; }
.cmp__best {
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: var(--r-full);
  font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .06em;
  color: #0b1026; background: var(--grad); vertical-align: 1px;
}
.cmp__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; flex-wrap: wrap;
}
.cmp__tip { font-size: 12px; color: var(--muted); flex: 1 1 260px; }

@media (max-width: 760px) {
  .routes__tools { padding: 8px 10px; }
  .routes__tools-h { flex: 1 1 100%; }
  .cmp__rh { width: 76px; }
  .cmp__t th, .cmp__t td { padding: 9px 10px; }
}

/* ===== M17 AI 行程助手 ===== */
.asst { position: fixed; right: clamp(14px, 2.2vw, 26px); bottom: clamp(14px, 2.2vw, 26px); z-index: 120; font: inherit; }
.asst__fab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px 10px 12px; border-radius: 999px; cursor: pointer;
  background: var(--grad); color: #0b1026; font-weight: 800; font-size: 13px;
  border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.asst__fab:hover { transform: translateY(-2px) scale(1.02); }
.asst__fab svg { width: 17px; height: 17px; animation: asstSpin 9s linear infinite; }
@keyframes asstSpin { to { transform: rotate(360deg); } }
.asst.is-open .asst__fab { transform: scale(.92); opacity: .55; }

.asst__panel {
  position: absolute; right: 0; bottom: 58px;
  width: min(390px, calc(100vw - 28px)); height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
  animation: asstIn .22s var(--ease);
}
.asst__panel[hidden] { display: none; }
@keyframes asstIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.asst__head {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}
.asst__head h3 { font-size: 15px; font-weight: 800; }
.asst__head p { margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.asst__x {
  margin-left: auto; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.asst__x:hover { color: var(--text); border-color: var(--line-2); }

.asst__list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.asst__msg { display: flex; }
.asst__bub {
  max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.75;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2);
}
.asst__msg.is-ai .asst__bub { border-top-left-radius: 4px; }
.asst__msg.is-me { justify-content: flex-end; }
.asst__msg.is-me .asst__bub {
  border-top-right-radius: 4px; background: var(--grad); color: #0b1026; border-color: transparent; font-weight: 600;
}
.asst__bub b { color: var(--text); font-weight: 800; }
.asst__msg.is-me .asst__bub b { color: #0b1026; }
.asst__dot {
  display: inline-block; width: 5px; height: 5px; margin: 0 2px; border-radius: 50%;
  background: var(--muted); animation: asstBlink 1.1s ease-in-out infinite;
}
.asst__dot:nth-child(2) { animation-delay: .16s; }
.asst__dot:nth-child(3) { animation-delay: .32s; }
@keyframes asstBlink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.asst__sug { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.asst__chip {
  padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  transition: .18s var(--ease);
}
.asst__chip:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-1px); }

.asst__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface-2); }
.asst__form input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
}
/* M19-C：原来这里写 `outline: none`，把全局 :focus-visible 焦点环干掉了，
   而它自己只改 1px 边框色 —— 等于键盘用户完全看不到焦点在哪。
   现在改成 focus-visible 才画外框：鼠标点击不冒框，键盘 Tab 才冒。 */
.asst__form input:focus { border-color: var(--indigo); }
.asst__form input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.asst__form button {
  width: 38px; border-radius: 10px; cursor: pointer; border: none;
  background: var(--grad); color: #0b1026; font-size: 16px; font-weight: 800;
}

@media (max-width: 760px) {
  /* 给底部标签栏让位 */
  .asst { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); right: 12px; }
  .asst__fab span { display: none; }
  .asst__fab { padding: 11px; }
  .asst__panel { height: min(60vh, calc(100vh - 150px)); bottom: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .asst__fab svg, .asst__dot { animation: none; }
  .asst__panel { animation: none; }
}

/* ===== M17 路线剖面（地图屏） ===== */
.pf {
  padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pf__head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pf__t { font-size: 17px; font-weight: 800; }
.pf__s { margin-top: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 62ch; }
.pf__legend { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pf__legend span { display: inline-flex; align-items: center; gap: 6px; }
.pf__legend i { width: 9px; height: 9px; border-radius: 3px; }
.pf__chart { margin: 4px 0 16px; }
.pf__svg { width: 100%; height: 150px; display: block; color: var(--muted); }
.pf__bar { transition: opacity .18s var(--ease); }
.pf__bar:hover { opacity: 1; }
.pf__lb { font-size: 10px; fill: currentColor; opacity: .75; }
.pf__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pf__cell { padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.pf__cell b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf__k { font-size: 12.5px; color: var(--text-2); font-weight: 700; }
.pf__sub { font-size: 11px; color: var(--muted); }
.pf__notes { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text-2); line-height: 1.7; }
.pf__notes b { color: var(--text); font-weight: 800; }

/* ===== M17 签证进度 ===== */
.vprog {
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.vprog__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vprog__t { font-size: 15px; font-weight: 800; }
.vprog__n { font-size: 13px; color: var(--muted); }
.vprog__n b { font-size: 17px; color: var(--text); font-weight: 800; }
.vprog__skip { font-size: 12px; opacity: .8; }
.vprog__top .btn { margin-left: auto; }
.vprog__track {
  position: relative; margin: 12px 0 10px; height: 8px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden;
}
.vprog__track i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; transition: width .4s var(--ease); }
.vprog__done { background: linear-gradient(90deg, #2FC4A8, #7C8CF8); }
.vprog__doing { background: rgba(233, 185, 73, .75); opacity: .9; }
.vprog__legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.vprog__legend span { display: inline-flex; align-items: center; gap: 6px; }
.vprog__legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.vprog__legend i.is-doing { background: #E9B949; }
.vprog__legend i.is-done { background: #2FC4A8; }
.vprog__hint { margin-top: 9px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* 国家卡上的状态标签 */
.ccard { position: relative; }
.vtag {
  position: absolute; top: 10px; right: 10px; z-index: 2; cursor: pointer;
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; letter-spacing: .02em;
  transition: .18s var(--ease);
}
.vtag.is-todo { background: rgba(255, 255, 255, .07); color: var(--muted); border-color: var(--line-2); }
.vtag.is-doing { background: rgba(233, 185, 73, .16); color: #E9B949; border-color: rgba(233, 185, 73, .4); }
.vtag.is-done { background: rgba(47, 196, 168, .16); color: #2FC4A8; border-color: rgba(47, 196, 168, .4); }
.vtag.is-skip { background: rgba(255, 255, 255, .05); color: var(--muted); border-color: var(--line); cursor: default; opacity: .8; }
.vtag:not(.is-skip):hover { transform: translateY(-1px); }
.vtag:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

@media (max-width: 760px) {
  .pf { padding: 15px 14px; }
  .pf__stats { grid-template-columns: repeat(2, 1fr); }
  .pf__legend { margin-left: 0; }
  .pf__svg { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .vprog__track i, .pf__bar, .vtag { transition: none; }
}

/* ========== M17-C 行程编排台 ========== */
.pln { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 26px; }
.pln__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pln__modes { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); }
.pln__mode { border: 0; background: transparent; color: var(--text-2); font-size: 13px; padding: 7px 15px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: .18s; }
.pln__mode:hover { color: var(--text-1); }
.pln__mode.on { background: var(--text-1); color: var(--bg-1); }
.pln__meta { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.pln__who { color: var(--text-1); font-weight: 600; }
.pln__ok { padding: 3px 9px; border-radius: 999px; background: rgba(52,199,89,.14); color: #2f9e56; font-size: 11.5px; font-weight: 600; }
.pln__lock { padding: 3px 9px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); font-size: 11.5px; }
.pln__rst { border: 1px solid var(--line); background: transparent; color: var(--text-2); font-size: 12px; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.pln__rst:hover:not(:disabled) { color: var(--text-1); border-color: var(--text-2); }
.pln__rst:disabled { opacity: .4; cursor: default; }

.pln__seg { margin-bottom: 20px; }
.pln__segh { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.pln__segh b { font-size: 14px; color: var(--text-1); }
.pln__segh b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sg); margin-right: 8px; vertical-align: 1px; }
.pln__segh span { font-size: 12px; color: var(--text-3); }

.pln__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pln__row { display: grid; grid-template-columns: 30px 1fr auto auto auto auto; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--bg-2); transition: .18s; }
.pln__row:hover { border-color: var(--sg); }
.pln__ix { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }
.pln__nm { font-size: 13.5px; color: var(--text-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pln__nm small { color: var(--text-3); font-size: 11.5px; margin-left: 7px; }
.pln__day2 { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.pln__days { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-1); }
.pln__days.is-ro { color: var(--text-2); }
.pln__du { color: var(--text-3); font-size: 11.5px; }
.pln__dbtn { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--text-2); cursor: pointer; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.pln__dbtn:hover { color: var(--text-1); border-color: var(--text-2); }
.pln__mv { display: inline-flex; gap: 3px; }
.pln__mvb { width: 24px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-1);
  color: var(--text-2); cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.pln__mvb:hover:not(:disabled) { color: var(--text-1); border-color: var(--text-2); }
.pln__mvb:disabled { opacity: .25; cursor: default; }

.pln__grps { display: grid; gap: 18px; }
.pln__grp { }
.pln__grph { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.pln__grph b { font-size: 14px; color: var(--text-1); }
.pln__grph span { font-size: 12px; color: var(--text-3); }
.pln__visa { padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2) !important; font-size: 11px !important; }

.pln__hint { font-size: 12px; color: var(--text-3); margin-top: 16px; line-height: 1.7; }
.pln__hint--ro { color: var(--text-3); }
.pln__newbtn { color: var(--accent, #6b7bff); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pln__newbtn:hover { opacity: .8; }

@media (max-width: 780px) {
  .pln__row { grid-template-columns: 26px 1fr auto; row-gap: 6px; }
  .pln__day2 { display: none; }
  .pln__mv { grid-column: 3; }
}

/* ==========================================================
   M18-A 社区 × 路线联动
   ========================================================== */
.cmsegs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 20px;
}
.cmseg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); font-size: 13px; font-weight: 600;
  transition: all .16s ease; position: relative;
}
.cmseg:hover { border-color: var(--sc, var(--coral)); color: var(--text); }
.cmseg.on {
  background: color-mix(in srgb, var(--sc, var(--coral)) 16%, var(--surface-2));
  border-color: var(--sc, var(--coral)); color: var(--text);
}
.cmseg em {
  font-style: normal; font-size: 11px; opacity: .62;
  background: rgba(128, 128, 128, .16); padding: 1px 6px; border-radius: 999px;
}
.cmseg__mine {
  font-style: normal; font-size: 11px; color: var(--teal);
  font-weight: 800;
}

/* 容器类不能也叫 .cmb —— JS 里 host 用的是 #comBuddies 并加了 .cmb，
   卡片也用 .cmb 会让容器继承 flex/gap 布局，卡片挤成一行。
   这里容器保持 #comBuddies 定位，卡片用 .cmbcard。 */
#comBuddies { margin: 0 0 4px; }
.cmb__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 12px;
}
.cmb__head h3 { font-size: 17px; font-weight: 800; margin: 0; }
.cmb__head span { font-size: 12.5px; color: var(--muted); }
.cmb__grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.cmbcard {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: all .16s ease; width: 100%; font: inherit; color: inherit;
}
.cmbcard:hover { border-color: var(--coral); transform: translateY(-1px); }
.cmbcard.on { background: var(--surface-3); }
.cmb__av {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff;
}
.cmb__b { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cmb__b b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmb__b small { font-size: 11.5px; color: var(--muted); }
.cmb__bar {
  display: block; height: 4px; border-radius: 2px;
  background: var(--line); overflow: hidden; margin-top: 2px;
}
.cmb__bar i { display: block; height: 100%; background: var(--teal); border-radius: 2px; }
.cmb__pct {
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 999px; flex: 0 0 auto;
}
.cmb__pct.hi { background: color-mix(in srgb, var(--teal) 18%, transparent); color: var(--teal); }
.cmb__pct.mid { background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral); }
.cmb__pct.none { background: var(--line); color: var(--muted); font-weight: 600; }

/* ==========================================================
   M18-B 预算拆解
   ========================================================== */
.bs { position: relative; }
.bs__modes { display: flex; gap: 6px; margin-bottom: 14px; }
.bs__mode {
  padding: 7px 15px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
  transition: all .16s ease;
}
.bs__mode.on { background: var(--coral); border-color: var(--coral); color: #fff; }
.bs__sum {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); margin-bottom: 12px;
}
.bs__sum b { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.bs__chk { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.bs__chk.ok { background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--teal); }
.bs__chk.bad { background: color-mix(in srgb, var(--coral) 18%, transparent); color: var(--coral); }
.bs__body { overflow-x: auto; }
.bs__body table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 620px;
}
.bs__body th, .bs__body td { padding: 9px 8px; text-align: right; white-space: nowrap; }
.bs__body thead th {
  font-size: 11px; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  /* 注意：项目里定义的表面色是 --bg / --bg-soft / --surface-2 / --surface-3，
     没有 --surface-1。写错变量名不会报错，只会让 sticky 表头变成透明。 */
  background: var(--bg);
}
.bs__body tbody th {
  text-align: left; font-weight: 700; white-space: normal; min-width: 108px;
}
.bs__body tbody th small {
  display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px;
}
.bs__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 7px;
}
.bs__n { color: var(--muted); font-variant-numeric: tabular-nums; }
.bs__c { font-variant-numeric: tabular-nums; }
.bs__c i {
  display: inline-block; width: 6px; height: 6px; border-radius: 2px; margin-right: 5px;
}
.bs__c--0 { color: var(--muted); opacity: .4; }
.bs__tot { font-weight: 800; font-variant-numeric: tabular-nums; }
.bs__tot em {
  display: block; font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--muted);
}
.bs__barcell { width: 88px; min-width: 88px; }
.bs__bar {
  display: block; height: 6px; border-radius: 3px; opacity: .8;
}
.bs__body tbody tr { border-top: 1px solid var(--line); }
.bs__body tbody tr:hover { background: var(--surface-2); }
.bs__hover {
  margin-top: 10px; font-size: 11.5px; color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   M18-C 本机数据体检
   ========================================================== */
.pv__top {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.pv__stat { display: grid; gap: 1px; }
.pv__stat b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pv__stat span { font-size: 11px; color: var(--muted); }
.pv__acts { margin-left: auto; display: flex; gap: 8px; }
.pv__none { font-size: 13px; color: var(--muted); padding: 16px 2px 2px; }
.pv__t { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.pv__t th, .pv__t td {
  padding: 9px 8px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.pv__t thead th { font-size: 11px; color: var(--muted); font-weight: 600; }
.pv__t tbody th { font-weight: 600; }
.pv__t .mono { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.pv__kind {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--line); color: var(--muted); white-space: nowrap;
}
.pv__kind--ident { background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral); }
.pv__kind--pref { background: color-mix(in srgb, #7C8CF8 16%, transparent); color: #7C8CF8; }
.pv__d { font-size: 12px; color: var(--muted); line-height: 1.5; white-space: normal; max-width: 320px; }
.pv__up { color: var(--coral); font-weight: 700; }
.pv__warn {
  font-style: normal; font-size: 10px; font-weight: 700; margin-left: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--coral) 18%, transparent); color: var(--coral);
}
.pv__del { padding: 4px 10px; font-size: 11.5px; }

@media (max-width: 780px) {
  .cmb__grid { grid-template-columns: 1fr; }
  .pv__acts { margin-left: 0; width: 100%; }
  .pv__d { max-width: none; }
  .bs__body table { font-size: 11.5px; }
}

/* ================================================================
   M19-A · 装备深化（装备准备度审计）
   配色只用项目真实存在的变量：--bg / --bg-soft / --surface /
   --surface-2 / --surface-3 / --line / --line-2 / --text / --text-2 /
   --muted / --dim / --gold / --amber / --coral / --teal / --indigo
   —— 注意本项目没有 --surface-1（M18 踩过：写错变量名不报错，只静默失效）。
   ================================================================ */

/* ---- 准备度总判 ---- */
.gv { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--r); margin-bottom: 16px;
  border: 1px solid var(--line); background: var(--surface); }
.gv b { font-size: 14.5px; font-weight: 800; }
.gv span { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.gv--ok { border-left: 3px solid var(--teal); }
.gv--ok b { color: var(--teal); }
.gv--warn { border-left: 3px solid var(--coral); }
.gv--warn b { color: var(--coral); }

/* ---- 重量条 ---- */
.gw { padding: 16px; border-radius: var(--r); margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--line); }
.gw__nums { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.gw__nums b { font-family: var(--mono); font-size: 22px; font-weight: 800; color: var(--text); }
.gw__nums b.is-over { color: var(--coral); }
.gw__nums span { font-size: 12.5px; color: var(--muted); }
.gw__track { position: relative; height: 8px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden; }
.gw__fill { height: 100%; background: var(--grad); transition: width .5s var(--ease-out); }
.gw__fill.is-over { background: linear-gradient(90deg, var(--amber), var(--coral)); }
.gw__mark { position: absolute; top: -3px; width: 2px; height: 14px;
  background: var(--line-2); transform: translateX(-1px); }
.gw__note { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---- 需求卡 ---- */
.gd__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 24px; }
.gd { padding: 16px 18px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); border-left-width: 3px; }
.gd--critical { border-left-color: var(--coral); }
.gd--high { border-left-color: var(--amber); }
.gd--mid { border-left-color: var(--indigo); }
.gd header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.gd h4 { font-size: 14px; font-weight: 800; line-height: 1.35; }
.gd__sev { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap; }
.gd--critical .gd__sev { background: rgba(239,93,122,.15); color: var(--coral); }
.gd--high .gd__sev { background: rgba(240,160,32,.15); color: var(--amber); }
.gd--mid .gd__sev { background: rgba(124,140,248,.15); color: var(--indigo); }
.gd__why { font-size: 12px; line-height: 1.65; color: var(--muted);
  padding: 9px 11px; border-radius: var(--r-sm); background: var(--bg-soft); margin-bottom: 11px; }
.gd__why b { display: block; font-size: 10.5px; letter-spacing: .06em;
  color: var(--dim); margin-bottom: 3px; font-weight: 700; }
.gd__items { list-style: none; margin: 0 0 10px; }
.gd__items li { display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 12.5px; color: var(--text-2); }
.gd__items li i { flex: none; width: 15px; height: 15px; border-radius: 4px;
  display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 800; }
.gd__items li.is-on i { background: var(--teal); color: var(--bg); }
.gd__items li.is-off i { background: rgba(239,93,122,.18); color: var(--coral); }
.gd__items li.is-on span { color: var(--dim); }
.gd__items li em { margin-left: auto; font-style: normal; font-family: var(--mono);
  font-size: 11px; color: var(--dim); flex: none; }
.gd__gap, .gd__ok { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.gd__gap { color: var(--coral); }
.gd__ok { color: var(--teal); }
.gd__tip { font-size: 11.5px; line-height: 1.6; color: var(--muted);
  padding-top: 8px; border-top: 1px solid var(--line); margin: 0; }

/* ---- 分段速查 ---- */
.gt { padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.gt h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gt h4 span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.gt__scroll { overflow-x: auto; }
.gt table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 480px; }
.gt th, .gt td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.gt thead th { font-size: 11px; font-weight: 700; color: var(--dim);
  letter-spacing: .04em; white-space: nowrap; }
.gt tbody th { font-weight: 700; color: var(--text); white-space: nowrap; }
.gt td { color: var(--text-2); }
.gt__foot { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 780px) {
  .gd__grid { grid-template-columns: 1fr; }
  .gv { flex-direction: column; gap: 5px; }
  .gt { padding: 14px; }
}

/* ================================================================
   M19-B · 分段导航（segnav）
   地图原来只能"按段过滤 + 取景"，回答不了"这段怎么走"。
   这里把每段折算成一份通行档案：主导交通方式 / 最长单程 / 最累的一趟 /
   夜车分布 / 跨段衔接。里程是大圆直线估算，页面上明说口径。
   ================================================================ */

.segnav { margin-top: 26px; }

/* ---- 分段切换条 ---- */
.sgt { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sgt__tab { flex: 1 1 180px; min-width: 168px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: var(--r); font: inherit;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
  transition: border-color .2s, background .2s, transform .2s var(--ease-out); }
.sgt__tab:hover { border-color: var(--line-2); transform: translateY(-1px); }
.sgt__tab:focus-visible { outline: 2px solid var(--sc, var(--gold)); outline-offset: 2px; }
.sgt__tab.on { border-color: var(--sc); background: var(--bg-soft); color: var(--text); }
.sgt__nm { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 4px; }
.sgt__tab.on .sgt__nm { color: var(--sc); }
.sgt__mt { display: block; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.sgt__badge { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-full);
  background: rgba(240,160,32,.15); color: var(--amber); }

/* ---- 跨段衔接 ---- */
.sg__bnd { padding: 13px 16px; border-radius: var(--r); margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.sg__bnd b { font-size: 12.5px; font-weight: 800; }
.sg__bnd ul { list-style: none; margin: 8px 0 0; }
.sg__bnd li { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 4px 0; font-size: 12.5px; color: var(--text-2); }
.sg__bnd li em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.sg__bnd p { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }

/* ---- 档案面板 ---- */
.sg__panel { padding: 18px 20px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); }
.sg__ph { border-left: 3px solid var(--sc); padding-left: 13px; margin-bottom: 14px; }
.sg__ph h3 { font-size: 17px; font-weight: 800; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap; }
.sg__ph h3 span { font-size: 11.5px; font-weight: 600; color: var(--dim); font-family: var(--mono); }
.sg__ph p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.sg__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 9px; margin: 0 0 14px; }
.sg__stats > div { padding: 9px 11px; border-radius: var(--r-sm); background: var(--bg-soft); }
.sg__stats dt { font-size: 10.5px; color: var(--dim); font-weight: 700; letter-spacing: .04em; }
.sg__stats dd { margin: 3px 0 0; font-size: 14px; font-weight: 800;
  font-family: var(--mono); color: var(--text); }

/* ---- 入段首程 ---- */
.sg__entry { padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 13px;
  background: var(--bg-soft); border: 1px dashed var(--line-2); }
.sg__entry > b { display: block; font-size: 11px; color: var(--dim);
  font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; }
.sg__entry > span { font-size: 12.5px; color: var(--text-2); }
.sg__entry em { font-style: normal; color: var(--dim); font-size: 11px; }
.sg__entry i { display: block; font-style: normal; font-size: 11px;
  color: var(--muted); margin-top: 5px; }

/* ---- 交通方式占比条 ---- */
.sg__mix { margin-bottom: 13px; }
.sg__mix > b { font-size: 12.5px; font-weight: 800; }
.sg__mixbar { display: flex; height: 7px; border-radius: var(--r-full);
  overflow: hidden; margin: 8px 0 6px; background: var(--surface-3); }
.sg__mixbar i { display: block; height: 100%; background: var(--mc); }
.sg__mix em { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* ---- 最长 / 最累 ---- */
.sg__long { padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 13px;
  background: var(--bg-soft); }
.sg__long > b { font-size: 11px; color: var(--dim); font-weight: 700;
  letter-spacing: .04em; display: block; margin-bottom: 6px; }
.sg__long ul { list-style: none; margin: 0; }
.sg__long li { font-size: 12.5px; color: var(--text-2); }
.sg__long li em { font-style: normal; color: var(--dim); font-size: 11px; }
.sg__long p { margin: 7px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ---- 航段列表 ---- */
.sg__list > b { font-size: 11px; color: var(--dim); font-weight: 700;
  letter-spacing: .04em; display: block; margin-bottom: 8px; }
.sg__list ul { list-style: none; margin: 0; }
.sg__leg { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: var(--r-xs); font-size: 12.5px;
  color: var(--text-2); border-left: 2px solid transparent; }
.sg__leg:nth-child(odd) { background: var(--bg-soft); }
.sg__leg.is-night { border-left-color: var(--amber); }
.sg__leg b { font-weight: 700; color: var(--text); }
.sg__arw { color: var(--dim); }
.sg__mode { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-full);
  color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, transparent); }
.sg__km, .sg__h { font-size: 11px; color: var(--dim); }
.sg__night { font-size: 10.5px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-full); background: rgba(240,160,32,.15); color: var(--amber); }
.sg__cross { font-size: 10.5px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-full); background: rgba(124,140,248,.15); color: var(--indigo); }

/* ---- 装备联动 ---- */
.sg__gear { padding: 11px 14px; border-radius: var(--r-sm); margin-top: 13px;
  background: rgba(240,160,32,.07); border: 1px solid rgba(240,160,32,.25); }
.sg__gear b { font-size: 12.5px; font-weight: 800; color: var(--amber); }
.sg__gear p { margin: 6px 0 0; font-size: 12px; line-height: 1.65; color: var(--text-2); }
.sg__gear mark { background: rgba(239,93,122,.18); color: var(--coral); padding: 0 4px; border-radius: 3px; }

/* ---- 住宿 / 国家 ---- */
.sg__meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.sg__meta b { font-size: 11px; color: var(--dim); font-weight: 700;
  letter-spacing: .04em; display: block; margin-bottom: 4px; }
.sg__meta p { margin: 0 0 9px; font-size: 11.5px; color: var(--muted); line-height: 1.6; }

/* ---- 口径脚注 ---- */
.sg__foot { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.65; }
.sg__foot mark { background: rgba(240,160,32,.15); color: var(--amber); padding: 0 4px; border-radius: 3px; }

@media (max-width: 780px) {
  .sg__panel { padding: 15px 14px; }
  .sgt__tab { flex-basis: 100%; }
  .sg__stats { grid-template-columns: repeat(2, 1fr); }
  .sg__leg { font-size: 12px; }
}

/* ========================================================================
   M19-D · 跨模块一致性体检（LoopAudit）
   --------------------------------------------------------------------
   配色沿用装备审计的既有语义：teal = 通过、coral = 要紧、amber = 留意。
   新增 critical 一档用更重的红，因为「日期链断裂」这类问题必须
   一眼可见，不能和「节奏不均」共用同一个视觉权重。
   ======================================================================== */
.aud__verdict {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--r); margin-bottom: 18px;
  border: 1px solid var(--line); background: var(--surface);
}
.aud__vmain { display: flex; flex-direction: column; gap: 4px; }
.aud__vmain b { font-size: 16px; font-weight: 800; }
.aud__vmain span { font-size: 12px; color: var(--muted); }
.aud__verdict.is-clear { border-left: 3px solid var(--teal); }
.aud__verdict.is-clear b { color: var(--teal); }
.aud__verdict.is-caution { border-left: 3px solid var(--amber); }
.aud__verdict.is-caution b { color: var(--amber); }
.aud__verdict.is-warn { border-left: 3px solid var(--coral); }
.aud__verdict.is-warn b { color: var(--coral); }
.aud__verdict.is-blocked { border-left: 3px solid #d92d4b; }
.aud__verdict.is-blocked b { color: #d92d4b; }
.aud__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.aud__chip {
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap;
}
.aud__chip.is-ok { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.aud__chip.is-mid { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.aud__chip.is-high { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.aud__chip.is-critical { color: #d92d4b; border-color: color-mix(in srgb, #d92d4b 45%, transparent); }

.aud__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.aud__row {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px;
  padding: 14px 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
}
.aud__tag {
  font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: var(--r-xs);
  text-align: center; height: fit-content; white-space: nowrap;
  background: var(--surface-2); color: var(--muted);
}
.aud__row.is-ok .aud__tag { color: var(--teal); }
.aud__row.is-mid .aud__tag { color: var(--amber); }
.aud__row.is-high .aud__tag { color: var(--coral); }
.aud__row.is-critical .aud__tag { color: #d92d4b; }
.aud__row.is-ok { border-left: 3px solid color-mix(in srgb, var(--teal) 55%, transparent); }
.aud__row.is-mid { border-left: 3px solid color-mix(in srgb, var(--amber) 55%, transparent); }
.aud__row.is-high { border-left: 3px solid color-mix(in srgb, var(--coral) 55%, transparent); }
.aud__row.is-critical { border-left: 3px solid #d92d4b; }
.aud__body b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 5px; }
.aud__body p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.aud__facts {
  margin: 9px 0 0; padding-left: 18px; list-style: none;
}
.aud__facts li {
  font-size: 11.5px; color: var(--dim); line-height: 1.7;
  font-family: var(--mono); position: relative;
}
/* 用自定义圆点而非默认实心方块 —— 这些是「事实清单」不是「待办清单」 */
.aud__facts li::before { content: "·"; position: absolute; left: -12px; color: var(--dim); }
.aud__advice {
  margin-top: 9px !important; padding-top: 9px;
  border-top: 1px dashed var(--line);
  color: var(--text-2) !important;
}
.aud__foot {
  margin: 0; padding: 13px 15px; border-radius: var(--r);
  font-size: 11.5px; color: var(--muted); line-height: 1.75;
  background: var(--surface-2); border: 1px solid var(--line);
}
.aud__foot b { color: var(--text-2); }

/* ---------------- M19-E：可执行整改 ----------------
   整改按钮的配色跟着体检的语义走：按钮是「动手改数据」的动作，
   所以用 teal（本站的正面动作色），与只读的 advice 段落拉开层次 ——
   advice 是灰色斜排的纯文字，button 是实心的，两者不能长得像。 */
.aud__actbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 14px; padding: 13px 15px; border-radius: var(--r);
  background: linear-gradient(135deg, rgba(47, 196, 168, .12), rgba(124, 140, 248, .08));
  border: 1px solid rgba(47, 196, 168, .30);
}
.aud__actbar-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aud__actbar-txt b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.aud__actbar-txt span { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.aud__actbar-txt span b.is-warn { color: var(--coral); }

.aud__fix {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: 11px; padding-top: 11px;
  border-top: 1px dashed var(--line);
}
.aud__btn {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--teal);
  border: 1px solid transparent;
  padding: 7px 14px; border-radius: 999px;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
/* 用 color-mix 而不是硬编码深绿：这样亮色主题下按钮会跟着 --teal 变深，
   暗色主题下自动变亮，不需要写第二套覆盖规则。
   color-mix 在现代浏览器已普遍支持；不支持时上面那条纯色背景依然成立，
   只是没有渐变层次—— 不影响可用性。 */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .aud__btn:not(.aud__btn--ghost):not(:disabled) {
    background: linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 78%, #000));
  }
}
.aud__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(47, 196, 168, .28); }
.aud__btn:active:not(:disabled) { transform: translateY(0); }
.aud__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.aud__btn:disabled { opacity: .42; cursor: not-allowed; }
.aud__btn--ghost {
  color: var(--text-2); background: transparent; border: 1px solid var(--line);
}
.aud__btn--ghost:hover:not(:disabled) { box-shadow: none; border-color: var(--muted); }

.aud__more {
  appearance: none; cursor: pointer; background: none;
  font: inherit; font-size: 11.5px; color: var(--muted);
  border: 0; border-bottom: 1px dashed currentColor; padding: 1px 0;
}
.aud__more:hover { color: var(--text-2); }
.aud__more:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

/* 「这会改什么」默认 hidden（由 JS 去掉属性才显示）。
   刻意不用 max-height 过渡 —— 那会让辅助技术在动画期间读到 0 高度，
   aria-expanded 已经承担了状态表达，视觉上直接显示更诚实。 */
.aud__note {
  flex: 1 0 100%; min-width: 0;
  font-size: 11.5px; color: var(--text-2); line-height: 1.75;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 9px 11px; border-radius: 10px;
}
.aud__note[hidden] { display: none; }

/* 窄屏：标签与正文改为上下堆叠，避免 96px 固定列把正文挤成一条缝 */
@media (max-width: 760px) {
  .aud__row { grid-template-columns: 1fr; gap: 8px; }
  .aud__tag { justify-self: start; }
  .aud__verdict { flex-direction: column; align-items: flex-start; }
  /* 整改工具条也要堆叠：横排会把「说明」压到只剩几个字 */
  .aud__actbar { flex-direction: column; align-items: flex-start; }
  .aud__actbar .aud__btn--ghost { align-self: flex-start; }
}