.station-count {
  color: var(--text-secondary);
  font-size: 14px;
}

.empty-stations {
  text-align: center;
  padding: 40px 0;
  color: var(--text-secondary);
  font-size: 16px;
}

/* 鎺掕�岄儴鍒嗘牱�??�?? */
.ranking-section {
  margin-bottom: 32px;
}

.ranking-stats {
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-base);
  padding: 16px;
}

.ticket-grid {
  column-count: 3;
  column-gap: var(--card-margin);
}

/* ==================== Ticket Cards ==================== */
.ticket-card {
  break-inside: avoid;
  margin-bottom: var(--card-margin);
  position: relative;
  background-color: var(--color-bg-surface);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ticket-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.ticket-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* 澶氶��?�ā�??忎笅鐨勬牱�??�?? */
.ticket-card.multi-select-mode .ticket-header {
  padding-left: 36px; /* 涓洪��?��?��?�嗙�??鍑虹┖闂�?? */
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right {
  display: flex;
  align-items: center;
}

.train-number {
  background-color: var(--color-primary);
  color: white;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--font-bold);
  letter-spacing: 0.5px;
}

.journey-number {
  background-color: var(--color-primary);
  color: white;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  margin-right: var(--space-2);
}

.connecting-details {
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background-color: var(--color-bg-hover);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.train-type {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.check-gate {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

.detail-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: 8px;
}

.detail-label {
  color: var(--text-tertiary);
  margin-right: 8px;
}

.detail-value {
  color: var(--text-primary);
  margin-right: 0;
}

.price {
  color: var(--primary);
  font-weight: bold;
  font-size: 16px;
}

/* 鍜岃�??鍙�?��?�娈婃牱�??�?? */
.train-type:contains('鍜岃�??鍙�') {
  background-color: rgba(30, 136, 229, 0.8);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 12px;
}

/* 确保 .train-type 与 .train-number 保持在同一行 */
.header-left {
  flex-wrap: nowrap;
}

.header-left > * {
  white-space: nowrap;
}

.ticket-route {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.station {
  font-size: 20px;
  font-weight: bold;
  color: var(--primary);
  padding: 0 12px;
}

.arrow {
  color: var(--primary);
  font-size: 16px;
  margin: 0 20px;
}

.ticket-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
}

.time-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.time {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 0;
}

.time-section .station {
  font-size: 16px;
  font-weight: normal;
  color: var(--text-secondary);
  padding: 0;
}

.scheduled-time {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
  white-space: nowrap;
}

.time-arrow {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.railway-bureau {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}

.arrow-line {
  width: 80%;
  min-width: 120px;
  height: 2px;
  background-color: var(--primary);
  position: relative;
  margin-bottom: 8px;
  align-self: center;
}

.arrow-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 8px solid var(--primary);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.date {
  font-size: 14px;
  color: var(--text-tertiary);
}

.duration {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  background-color: var(--color-primary-light);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.ticket-weather-card {
  background: linear-gradient(135deg, var(--color-primary-subtle) 0%, var(--color-primary-light) 100%);
  color: var(--color-primary);
  padding: 12px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

[data-theme="dark"] .ticket-weather-card {
  background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-hover) 100%);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* 鏈�鍑鸿�屽崱鐗囨牱�??�?? - 缂╁�??�??�绁ㄥ彛鍜屽腑浣嶅瓧鍙� */
.ticket-card.upcoming .check-gate {
  font-size: 12px;
  color: var(--text-secondary);
}

.ticket-card.upcoming .ticket-details .detail-row {
  font-size: 12px;
}

.ticket-card.upcoming .ticket-details .detail-value {
  font-size: 13px;
}

.ticket-card.upcoming .ticket-details .detail-label {
  font-size: 12px;
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-card.upcoming .check-gate {
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-card.upcoming .ticket-details {
  color: var(--text-secondary);
}

[data-theme="dark"] .ticket-card.upcoming .ticket-details .detail-value {
  color: var(--text-primary);
}

/* 详情页：列车实时位置面板 */
.detail-live-panel {
  margin-bottom: 16px;
  padding: 16px;
  background: linear-gradient(135deg, var(--primary-light) 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--radius-md);
}

[data-theme="dark"] .detail-live-panel {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.detail-live-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.detail-live-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.detail-live-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-live-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

.detail-live-segment {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.detail-live-segment-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  margin-right: 2px;
}

[data-theme="dark"] .detail-live-segment {
  color: var(--text-primary);
}

.detail-live-station {
  color: var(--primary);
  font-weight: 600;
}

.detail-live-arrow {
  color: var(--text-secondary);
  opacity: 0.7;
}

.detail-live-arrival {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 行程卡片高亮动画 */
.ticket-highlight {
  animation: ticketHighlightPulse 0.6s ease-out;
  box-shadow: 0 0 0 3px var(--primary), 0 0 20px color-mix(in srgb, var(--primary) 35%, transparent) !important;
  border-color: var(--primary) !important;
}

@keyframes ticketHighlightPulse {
  0% {
    box-shadow: 0 0 0 0px var(--primary), 0 0 30px color-mix(in srgb, var(--primary) 50%, transparent);
    transform: scale(1.02);
  }
  50% {
    box-shadow: 0 0 0 4px var(--primary), 0 0 20px color-mix(in srgb, var(--primary) 35%, transparent);
    transform: scale(1.01);
  }
  100% {
    box-shadow: 0 0 0 3px var(--primary), 0 0 20px color-mix(in srgb, var(--primary) 35%, transparent);
    transform: scale(1);
  }
}

.weather-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.weather-icon {
  font-size: 18px;
}

.weather-title {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}

.weather-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.weather-main-info {
  flex: 1;
}

.weather-temp-wrapper {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.weather-temp {
  font-size: 32px;
  font-weight: bold;
}

.weather-text {
  font-size: 16px;
  opacity: 0.9;
}

.weather-location {
  font-size: 12px;
  opacity: 0.7;
}

.weather-alerts {
  margin-left: 12px;
  flex-shrink: 0;
}

.alert-item {
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-base);
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
  max-width: 180px;
}

.alert-item:last-child {
  margin-bottom: 0;
}

.alert-item.red {
  background: rgba(255, 77, 77, 0.3);
}

.alert-item.orange {
  background: rgba(255, 152, 0, 0.3);
}

.alert-item.yellow {
  background: rgba(255, 235, 59, 0.3);
}

.alert-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.alert-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alert-title {
  font-size: 12px;
  font-weight: 600;
}

.alert-desc {
  font-size: 11px;
  opacity: 0.85;
}

.ticket-details-main {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-primary);
}

.ticket-details-main .detail-row.main-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  line-height: 1.4;
}

.ticket-details-main .detail-row.main-info:last-child {
  margin-bottom: 0;
}

.ticket-details-main .detail-label {
  color: var(--text-secondary);
  margin-right: 8px;
  min-width: 40px;
}

.ticket-details-main .detail-value {
  color: var(--text-primary);
  font-weight: 500;
}

.ticket-details-main .detail-value.price {
  color: var(--error);
  font-weight: 600;
  font-size: 16px;
}

.ticket-info-card {
  background: linear-gradient(135deg, var(--color-primary-subtle) 0%, var(--color-primary-light) 100%);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

[data-theme="dark"] .ticket-info-card {
  background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-hover) 100%);
}

.info-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.info-row:first-child {
  padding-top: 0;
}

.info-row:last-child {
  padding-bottom: 0;
}

.info-label {
  color: var(--text-secondary);
  font-size: 13px;
  margin-right: 10px;
  min-width: 44px;
}

.info-value {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}

.weather-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  background: var(--color-info-bg);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  min-height: 60px;
}

.weather-bar .weather-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.weather-bar .weather-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.weather-bar .weather-icon {
  font-size: 22px;
}

.weather-bar .temp-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.weather-bar .weather-temp {
  color: var(--color-info);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}

.weather-bar .weather-temp-range {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.weather-bar .weather-text {
  color: var(--text-secondary);
  font-size: 14px;
}

.weather-bar .weather-city {
  color: var(--text-tertiary);
  font-size: 13px;
  margin-left: auto;
}

.weather-bar .weather-loading {
  color: var(--text-tertiary);
  font-size: 14px;
}

.weather-bar.today .weather-main {
  justify-content: center;
}

.weather-bar.today .weather-city {
  margin-left: 12px;
}

.weather-alert-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-error);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.weather-alert-bar .alert-icon {
  font-size: 16px;
}

.weather-alert-bar .alert-text {
  color: var(--color-text-inverse);
  font-size: 14px;
  font-weight: 500;
}

.expand-section {
  margin-top: 4px;
}

.expand-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-base);
  color: var(--text-tertiary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-trigger:hover {
  border-color: var(--primary);
  color: var(--text-secondary);
}

.expand-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.expand-arrow.expanded {
  transform: rotate(180deg);
}

.expand-content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border-light);
}

.expand-detail {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.expand-detail:last-of-type {
  margin-bottom: 0;
}

.expand-detail .detail-label {
  color: var(--text-tertiary);
  margin-right: 12px;
  min-width: 50px;
}

.expand-detail .detail-value {
  color: var(--text-primary);
}

.expand-detail .detail-value.price {
  color: var(--error);
  font-weight: 600;
}

[data-theme="dark"] .expand-detail .detail-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .expand-detail .detail-value {
  color: var(--text-primary);
}

.check-gate-row {
  background: linear-gradient(135deg, var(--color-primary-subtle) 0%, var(--color-primary-light) 100%);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.check-gate-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

/* 未出行卡片的天气面板 */
.journey-weather-panel {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--card-background) 0%, color-mix(in srgb, var(--color-primary) 5%, transparent) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.journey-weather-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
}

.journey-weather-info svg {
  flex-shrink: 0;
}

.journey-weather-temp {
  font-size: 15px;
  font-weight: 600;
}

.journey-weather-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.journey-weather-location {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .journey-weather-panel {
  background: linear-gradient(135deg, var(--card-background) 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 100%);
  border-color: var(--border);
}

[data-theme="dark"] .journey-weather-text,
[data-theme="dark"] .journey-weather-location {
  color: var(--text-secondary);
}

.early-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-error-bg);
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

[data-theme="dark"] .early-warning {
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
}

.early-warning .warning-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.early-warning .warning-text {
  color: var(--error);
  font-size: 13px;
  line-height: 1.5;
}

.early-warning .highlight {
  font-weight: 700;
}

.early-warning .date-bold {
  font-weight: 600;
}

.ticket-details {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-primary);
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  line-height: 1.4;
  flex-wrap: wrap;
}

.detail-label {
  color: var(--text-tertiary);
  margin-right: 8px;
  margin-bottom: 4px;
  font-weight: bold;
  min-width: 40px;
}

.detail-value {
  color: var(--text-primary);
  margin-right: 16px;
  margin-bottom: 4px;
  flex: 1;
  min-width: 100px;
}

.detail-row:last-child {
  margin-bottom: 0;
  justify-content: space-between;
}

.discount {
  font-size: 14px;
  color: var(--text-tertiary);
  background-color: var(--color-primary-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

.detail-row span:first-child {
  font-weight: 500;
  color: var(--text-secondary);
}

.ticket-note {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 10px;
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--primary);
}

[data-theme="dark"] .ticket-note {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

[data-theme="dark"] .discount {
  color: var(--text-secondary);
}

[data-theme="dark"] .detail-row span:first-child {
  color: var(--text-secondary);
}

[data-theme="dark"] .check-gate-value {
  color: var(--color-primary);
}

/* 鑱旂▼杞︾エ鏍峰�?? */
.connecting-details {
  margin-top: 12px;
  padding: 12px;
  background-color: var(--background-light);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border);
}

.connecting-details h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: bold;
}

.connecting-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.connecting-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.connecting-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.connecting-time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-primary);
}

.connecting-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* 杞︾エ鑿滃崟鎸�?�挳 */
.ticket-menu-button {
  position: absolute;
  bottom: 24px;
  right: 16px;
  display: flex;
  flex-direction: row;
  gap: 4px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  transition: background-color 200ms;
  z-index: var(--z-dropdown);
}

.ticket-menu-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.menu-dot {
  width: 4px;
  height: 4px;
  background-color: var(--text-secondary);
  border-radius: 50%;
}

/* 杞︾エ鑿滃崟 */
.ticket-menu {
  position: absolute;
  bottom: 40px;
  right: 16px;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  min-width: 100px;
  z-index: var(--z-header);
  overflow: hidden;
}

.menu-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 200ms;
  text-align: left;
}

.menu-item:hover {
  background-color: var(--color-bg-hover);
}

[data-theme="dark"] .menu-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.menu-item.danger {
  color: var(--secondary);
}

.menu-item.danger:hover {
  background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
}