/* ============================================================
   车型介绍页 — Modern Archive Style
   统一命名空间: tm-
   ============================================================ */

/* ===== CSS 变量 ===== */
.tm-page {
  --tm-red: #C41E3A;
  --tm-blue: #2563EB;
  --tm-green: #16A34A;
  --tm-divider: #E5E5E5;
}

/* ===== 加载态 — 5 箭头依次淡入动画 ===== */
.tm-loading {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-app);
}
.tm-loading-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 24px;
  letter-spacing: 2px;
}
.tm-arrow-loader {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.tm-arrow-loader .arrow {
  width: 28px;
  height: 28px;
  fill: var(--color-primary);
  opacity: 0.12;
  animation: loadingArrowFade 1.5s ease-in-out infinite backwards;
}
.tm-arrow-loader .arrow:nth-child(1) { animation-delay: 0s; }
.tm-arrow-loader .arrow:nth-child(2) { animation-delay: 0.15s; }
.tm-arrow-loader .arrow:nth-child(3) { animation-delay: 0.3s; }
.tm-arrow-loader .arrow:nth-child(4) { animation-delay: 0.45s; }
.tm-arrow-loader .arrow:nth-child(5) { animation-delay: 0.6s; }
.tm-loading-text {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ===== 主容器 ===== */
.tm-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  min-height: 100vh;
}

/* ===== Hero — 公众号文章风格 ===== */
.tm-hero {
  padding: 0 0 32px;
}
.tm-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: 20px;
  transition: color 0.2s;
  user-select: none;
}
.tm-hero__back:hover { color: var(--color-primary); }
/* 封面图 */
.tm-hero__image {
  margin-bottom: 28px;
  border-radius: 8px;
  overflow: hidden;
}
.tm-hero__image img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
/* 标题区 */
.tm-hero__code {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--color-text-primary);
}
.tm-hero__sub {
  font-size: 15px;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
  line-height: 1.5;
}
.tm-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-tertiary);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--tm-divider);
}
.tm-hero__meta span {
  white-space: nowrap;
}
.tm-hero__meta-dot {
  color: var(--tm-divider);
  user-select: none;
}
/* 系列标记 — 内联小色块 */
.tm-hero__series-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

/* 系列标记色 */
.tm-hero__series-tag--cr  { background: rgba(196,30,58,0.1);  color: #C41E3A; }
.tm-hero__series-tag--crh { background: rgba(37,99,235,0.1);  color: #2563EB; }
.tm-hero__series-tag--dg  { background: rgba(22,163,74,0.1);  color: #16A34A; }
.tm-hero__series-tag--other { background: var(--color-bg-hover); color: var(--color-text-secondary); }

/* ===== 正文区 ===== */
.tm-body {
  padding-top: 8px;
}

/* ===== 双栏布局 (桌面端) ===== */
.tm-body__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.tm-body__left,
.tm-body__right {
  min-width: 0;
}

/* ===== 区块变体 ===== */
.tm-section--full {
  grid-column: 1 / -1;
}
.tm-section--no-border {
  border-bottom: none !important;
}
.tm-section--compact {
  padding: 20px 0;
}
.tm-empty--compact {
  padding: 16px 12px;
}
.tm-empty--compact h3 {
  font-size: 14px;
  margin: 0 0 4px;
}
.tm-empty--compact p {
  font-size: 12px;
  margin: 2px 0;
}

@media (min-width: 768px) {
  .tm-body__columns {
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
  }
}

/* ===== 区块 ===== */
.tm-section {
  padding: 36px 0;
  border-bottom: 1px solid var(--tm-divider);
}
.tm-section:last-child {
  border-bottom: none;
}
.tm-section__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

/* ===== 技术参数网格 ===== */
.tm-params {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--tm-divider);
  border: 1px solid var(--tm-divider);
  border-radius: 8px;
  overflow: hidden;
}
.tm-param {
  background: var(--color-bg-surface);
  padding: 24px 20px;
}
@media (min-width: 900px) {
  .tm-params {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .tm-params {
    grid-template-columns: 1fr;
  }
}
.tm-param__label {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.tm-param__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  word-break: break-all;
}

/* ===== 席别卡片 ===== */
.tm-seats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.tm-seat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--tm-divider);
  border-radius: 8px;
  transition: border-color 0.2s;
}
.tm-seat:hover {
  border-color: var(--color-primary);
}
.tm-seat__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  font-family: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
  min-width: 28px;
  flex-shrink: 0;
}
.tm-seat__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.tm-seat__count {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ===== 特色标签 ===== */
.tm-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tm-tag {
  padding: 6px 14px;
  border: 1px solid var(--tm-divider);
  border-radius: 20px;
  font-size: 13px;
  color: var(--color-text-primary);
  transition: all 0.2s;
}
.tm-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ===== 命名解析 - 白板笔记风格 (列布局) ===== */
.tm-naming-board {
  background: var(--color-bg-surface);
  border: 1px solid var(--tm-divider);
  border-radius: 12px;
  padding: 28px 20px 24px;
  margin-bottom: 20px;
}
.tm-naming-columns {
  display: flex;
  justify-content: center;
  gap: 24px;
  min-width: fit-content;
}
.tm-naming-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: 220px;
}
/* 顶部标签 */
.tm-naming-top-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
/* 代码块 */
.tm-naming-code-part {
  font-family: 'Cascadia Code', 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.tm-naming-col:nth-child(1) .tm-naming-code-part { color: #C41E3A; }
.tm-naming-col:nth-child(2) .tm-naming-code-part { color: #2563EB; }
.tm-naming-col:nth-child(3) .tm-naming-code-part { color: #16A34A; }
.tm-naming-col:nth-child(4) .tm-naming-code-part { color: #D89860; }
.tm-naming-col:nth-child(5) .tm-naming-code-part { color: #7C3AED; }
.tm-naming-col:nth-child(6) .tm-naming-code-part { color: #0891B2; }
.tm-naming-col:nth-child(7) .tm-naming-code-part { color: #DB2777; }
.tm-naming-col:nth-child(8) .tm-naming-code-part { color: #65A30D; }
/* 手绘弯曲箭头 */
.tm-naming-arrow-svg {
  display: block;
  color: var(--color-text-tertiary);
  opacity: 0.65;
  margin: 4px 0;
}
/* 底部释义 */
.tm-naming-meaning-text {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
}

.tm-naming-extra {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--color-bg-hover);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ===== 行程列表 (时间线+卡片) ===== */
.tm-trips {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tm-trip {
  display: flex;
  align-items: stretch;
  gap: 12px;
  cursor: pointer;
}
.tm-trip__timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12px;
  flex-shrink: 0;
  padding-top: 4px;
}
.tm-trip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}
.tm-trip__line {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: var(--color-border-light);
  margin-top: 4px;
}
.tm-trip__card {
  flex: 1;
  min-width: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: background 0.2s, box-shadow 0.2s;
}
.tm-trip__card:hover {
  background: var(--color-bg-hover);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tm-trip__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tm-trip__station {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-trip__train-badge {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--color-bg-hover);
  letter-spacing: 0.5px;
}
.tm-trip__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tm-trip__date {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.tm-trip__info {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.tm-trip__price {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 500;
  margin-left: auto;
}

/* ===== Markdown 正文 ===== */
.tm-markdown {
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-text-primary);
}
.tm-markdown p {
  margin: 0 0 1.2em;
}
.tm-markdown h1,
.tm-markdown h2,
.tm-markdown h3,
.tm-markdown h4,
.tm-markdown h5,
.tm-markdown h6 {
  margin: 1.8em 0 0.6em;
  font-weight: 600;
  color: var(--color-text-primary);
}
.tm-markdown h1 { font-size: 28px; }
.tm-markdown h2 { font-size: 22px; }
.tm-markdown h3 { font-size: 18px; }
.tm-markdown h4 { font-size: 16px; }
.tm-markdown blockquote {
  margin: 1.4em 0;
  padding: 12px 18px;
  background: var(--color-bg-hover);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 6px 6px 0;
  font-size: 15px;
  color: var(--color-text-secondary);
}
.tm-markdown blockquote p:last-child {
  margin-bottom: 0;
}
.tm-markdown ul,
.tm-markdown ol {
  margin: 0.8em 0 1.2em;
  padding-left: 1.6em;
}
.tm-markdown li {
  margin: 0.3em 0;
  line-height: 1.7;
}
.tm-markdown ul li {
  list-style-type: disc;
}
.tm-markdown ol li {
  list-style-type: decimal;
}
.tm-markdown li::marker {
  color: var(--color-primary);
}
.tm-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14px;
  border: 1px solid var(--tm-divider);
  border-radius: 8px;
  overflow: hidden;
}
.tm-markdown th,
.tm-markdown td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--tm-divider);
  text-align: left;
}
.tm-markdown th {
  background: var(--color-bg-hover);
  font-weight: 600;
  color: var(--color-text-primary);
}
.tm-markdown tr:last-child td {
  border-bottom: none;
}
.tm-markdown tr:hover td {
  background: var(--color-bg-hover);
}
.tm-markdown a {
  color: var(--color-primary);
  text-decoration: none;
}
.tm-markdown a:hover {
  text-decoration: underline;
}
.tm-markdown strong {
  font-weight: 700;
}
.tm-markdown em {
  font-style: italic;
}
.tm-markdown code:not(pre code) {
  font-family: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
  font-size: 0.85em;
  padding: 2px 6px;
  background: var(--color-bg-hover);
  border-radius: 4px;
  color: var(--color-primary);
}
.tm-markdown pre {
  margin: 1.4em 0;
  padding: 16px 20px;
  background: #1e1e1e;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.tm-markdown pre code {
  font-family: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
  font-size: 14px;
  background: transparent;
  padding: 0;
  color: #d4d4d4;
  display: block;
}
.tm-markdown hr {
  border: none;
  height: 1px;
  background: var(--tm-divider);
  margin: 2em 0;
}
.tm-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 1.2em auto;
}
.tm-markdown .md-image-wrap {
  margin: 1.2em 0;
}
.tm-markdown .md-image-caption {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 6px;
}

/* ===== 空状态 ===== */
.tm-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--color-text-secondary);
}
.tm-empty h3 {
  font-size: 16px;
  color: var(--color-text-primary);
  margin: 0 0 6px;
}
.tm-empty p {
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0;
}

/* ===== Footer ===== */
.tm-footer {
  padding: 40px 0 0;
  text-align: center;
}
.tm-footer__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border: 1px solid var(--tm-divider);
  border-radius: 20px;
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
}
.tm-footer__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ===== 暗色主题 ===== */
[data-theme="dark"] .tm-page {
  --tm-divider: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .tm-param {
  background: #1e1e1e;
}
[data-theme="dark"] .tm-markdown pre {
  background: #111;
}
[data-theme="dark"] .tm-markdown code:not(pre code) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-primary-light);
}
[data-theme="dark"] .tm-trip__card:hover {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
[data-theme="dark"] .tm-naming-extra {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .tm-markdown blockquote {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="dark"] .tm-markdown tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .tm-markdown table {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .tm-markdown th,
[data-theme="dark"] .tm-markdown td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ===== 响应式 ===== */
/* 手机 (<640px) — 默认即为单列，仅微调内边距与字号 */
@media (max-width: 639px) {
  .tm-page {
    max-width: 100%;
    padding: 0 16px 32px;
  }
  .tm-hero { padding: 0 0 20px; }
  .tm-hero__code { font-size: 24px; }
  .tm-hero__sub { font-size: 13px; }
  .tm-hero__meta { font-size: 12px; gap: 4px; }
  .tm-hero__image img { max-height: 240px; }
  .tm-params { grid-template-columns: repeat(2, 1fr); }
  .tm-param { padding: 14px 12px; }
  .tm-naming-board { padding: 16px 8px 14px; }
  .tm-naming-columns { gap: 10px; }
  .tm-naming-code-part { font-size: 22px; }
  .tm-naming-col { max-width: 120px; }
  .tm-naming-top-label { font-size: 10px; }
  .tm-naming-meaning-text { font-size: 11px; line-height: 1.3; }
  .tm-naming-arrow-svg { width: 16px; height: 24px; }
  .tm-trip { gap: 8px; }
  .tm-trip__card { padding: 12px 14px; }
  .tm-trip__station { font-size: 14px; }
  .tm-section { padding: 28px 0; }
  .tm-section__label { font-size: 10px; margin-bottom: 12px; }
  .tm-markdown { font-size: 15px; line-height: 1.75; }
  .tm-markdown h1 { font-size: 22px; }
  .tm-markdown h2 { font-size: 19px; }
  .tm-markdown h3 { font-size: 16px; }
  .tm-markdown pre { padding: 12px 14px; font-size: 13px; }
  .tm-markdown pre code { font-size: 13px; }
  .tm-footer__btn { padding: 10px 20px; font-size: 13px; }
}

/* 平板竖屏 (640–899px) */
@media (min-width: 640px) and (max-width: 899px) {
  .tm-page { max-width: 620px; padding: 0 20px 48px; }
  .tm-hero__code { font-size: 28px; }
  .tm-hero__image img { max-height: 320px; }
  .tm-params { grid-template-columns: repeat(2, 1fr); }
  .tm-naming-board { padding: 20px 14px 18px; }
  .tm-naming-columns { gap: 18px; }
  .tm-naming-code-part { font-size: 28px; }
  .tm-naming-col { max-width: 160px; }
  .tm-section { padding: 36px 0; }
}

/* 笔记本/小平板横屏 (900–1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
  .tm-page { max-width: 820px; padding: 0 32px 56px; }
  .tm-hero__code { font-size: 32px; }
  .tm-hero__image img { max-height: 400px; }
  .tm-params { grid-template-columns: repeat(3, 1fr); }
  .tm-naming-board { padding: 28px 24px 24px; }
  .tm-naming-columns { gap: 28px; }
  .tm-naming-code-part { font-size: 36px; }
  .tm-naming-col { max-width: 200px; }
}

/* 桌面宽屏 (≥1200px) */
@media (min-width: 1200px) {
  .tm-page { max-width: 880px; padding: 0 40px 64px; }
  .tm-hero__code { font-size: 38px; }
  .tm-hero__image img { max-height: 480px; }
  .tm-params { grid-template-columns: repeat(3, 1fr); }
  .tm-naming-board { padding: 32px 28px 28px; }
  .tm-naming-columns { gap: 32px; }
  .tm-naming-code-part { font-size: 42px; }
  .tm-naming-col { max-width: 220px; }
  .tm-naming-top-label { font-size: 11px; }
  .tm-naming-meaning-text { font-size: 13px; }
  .tm-trips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tm-trip__timeline { display: none; }
  .tm-trip__card { margin-bottom: 0; }
}

.seat-position-badge, .quiet-car-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex: 0 0 auto;
}
.seat-position-badge { border: 1px solid transparent; }
.quiet-car-badge { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); margin-left: 8px; }


.seat-position-badge.seat-window {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.seat-position-badge.seat-aisle {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}

.seat-position-badge.seat-middle {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.seat-position-badge.seat-upper,
.seat-position-badge.seat-middle-berth,
.seat-position-badge.seat-lower {
  background: color-mix(in srgb, #7B1FA2 15%, transparent);
  color: #7B1FA2;
  border-color: color-mix(in srgb, #7B1FA2 30%, transparent);
}