:root {
      --bg: #f8fafc;
      --surface: #ffffff;
      --surface-subtle: #f1f5f9;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --text-light: #94a3b8;
      --border: #e2e8f0;
      --border-focus: #cbd5e1;
      --primary: #0284c7;
      --primary-dark: #0369a1;
      --primary-light: #e0f2fe;
      --accent: #2563eb;
      --success: #10b981;
      --success-light: #d1fae5;
      --warning: #f59e0b;
      --warning-light: #fef3c7;
      --danger: #ef4444;
      --danger-light: #fee2e2;
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
      --radius: 8px;
      --radius-sm: 6px;
      --radius-full: 9999px;
      --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font);
      background-color: var(--bg);
      color: var(--text-main);
      line-height: 1.5;
      letter-spacing: 0;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    a:hover {
      color: var(--primary);
    }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }

    /* Top Navigation Header */
    .site-header {
      background: #0f172a;
      color: #f8fafc;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      gap: 20px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
      color: #ffffff;
      white-space: nowrap;
    }

    .logo span {
      color: #38bdf8;
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
      display: none;
    }

    .nav-item {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      color: #cbd5e1;
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }

    .nav-item:hover, .nav-item.active {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
    }

    .header-search {
      display: flex;
      align-items: center;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: var(--radius);
      padding: 4px 10px;
      width: 240px;
    }

    .header-search input {
      background: transparent;
      border: none;
      outline: none;
      color: #ffffff;
      font-size: 13px;
      width: 100%;
    }

    .header-search input::placeholder {
      color: #64748b;
    }

    /* Sub Navigation / Breadcrumb */
    .subnav-bar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
     }

    .subnav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      gap: 16px;
      flex-wrap: nowrap;
    }

    .breadcrumbs {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .breadcrumbs a {
      color: var(--text-muted);
    }

    .breadcrumbs a:hover {
      color: var(--primary);
    }

    .breadcrumbs .sep {
      color: #94a3b8;
    }

    .breadcrumbs .current {
      color: var(--text-main);
      font-weight: 600;
    }

    .breadcrumbs span {
      color: var(--text-light);
    }

    .channel-tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      flex-shrink: 0;
    }

    .channel-tab {
      font-size: 13px;
      padding: 4px 10px;
      border-radius: var(--radius-sm);
      background: var(--surface-subtle);
      color: var(--text-muted);
      font-weight: 500;
      white-space: nowrap;
    }

    .channel-tab:hover {
      background: var(--primary-light);
      color: var(--primary-dark);
    }

    .channel-tab.active {
      background: var(--primary);
      color: #ffffff;
    }

    @media (max-width: 991px) {
      .subnav-inner {
        flex-wrap: wrap;
        gap: 10px;
      }
      .channel-tabs {
        margin-left: 0;
        width: 100%;
      }
    }

    /* Main Grid Layout */
    .main-wrapper {
      padding: 24px 0 48px;
    }

   .layout-grid {
     display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 20px;
      align-items: start;
   }

   .content-left {
     min-width: 0;
     max-width: 100%;
   }

   .sidebar-right {
     min-width: 0;
     max-width: 100%;
   }

    @media (max-width: 992px) {
     .layout-grid {
       grid-template-columns: 1fr;
     }
   }

    /* Content Cards & Sections */
    .section-title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    /* Card Header & Title Single-Line Layout */
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .card-header-left {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .card-icon,
    .icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      flex-shrink: 0;
    }

    .card-icon-red { color: #ef4444 !important; }
    .card-icon-green { color: #10b981 !important; }
    .card-icon-blue { color: #0284c7 !important; }
    .card-icon-sky { color: #0284c7 !important; }
    .card-icon-orange { color: #f97316 !important; }
    .card-icon-amber { color: #f59e0b !important; }
    .card-icon-rose { color: #f43f5e !important; }

    .card-icon svg,
    .icon-wrap svg,
    .hourly-chart-svg {
      display: block;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    img, svg, .w-icon {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-drag: none;
    }

    .section-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--text-main);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      line-height: 1.4;
      white-space: nowrap;
    }

    .section-title::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 16px;
      background: var(--primary);
      border-radius: 2px;
      flex-shrink: 0;
    }

    .card-header-left .card-icon + .section-title::before,
    .card-header-left .icon-wrap + .section-title::before {
      display: none;
    }

    .card-subtitle {
      font-size: 13px;
      color: var(--text-muted);
      margin-left: auto;
      text-align: right;
      white-space: nowrap;
      font-weight: normal;
    }

    .section-more {
      font-size: 13px;
      color: var(--primary);
      margin-left: auto;
      white-space: nowrap;
      text-decoration: none;
    }

    .section-more:hover {
      text-decoration: underline;
    }

    .block-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 24px;
      box-shadow: var(--shadow-sm);
      scroll-margin-top: 120px;
    }

    /* Hero Weather Showcase */
    .weather-hero {
      position: relative;
      border-radius: var(--radius-sm);
      overflow: hidden;
      margin-bottom: 24px;
      color: #ffffff;
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
      background-color: #1e63c7;
      background-size: cover;
      background-position: center right;
      background-repeat: no-repeat;
      min-height: 220px;
      transition: background-image 0.3s ease;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-drag: none;
    }

    /* Atmospheric real photography weather backgrounds */
    .weather-hero.bg-sunny { background: #1e6fd5 url("../images/weather-bg/sunny.jpg") center/cover no-repeat; }
    .weather-hero.bg-partly-cloudy { background: #1e6fd5 url("../images/weather-bg/partly-cloudy.jpg") center/cover no-repeat; }
    .weather-hero.bg-cloudy { background: #1e63c7 url("../images/weather-bg/cloudy.jpg") center/cover no-repeat; }
    .weather-hero.bg-overcast { background: #4778b0 url("../images/weather-bg/overcast.jpg") center/cover no-repeat; }
    .weather-hero.bg-light-rain { background: #1d5aa8 url("../images/weather-bg/light-rain.jpg") center/cover no-repeat; }
    .weather-hero.bg-shower { background: #1d5aa8 url("../images/weather-bg/shower.jpg") center/cover no-repeat; }
    .weather-hero.bg-moderate-rain { background: #1d5aa8 url("../images/weather-bg/moderate-rain.jpg") center/cover no-repeat; }
    .weather-hero.bg-heavy-rain { background: #1d5aa8 url("../images/weather-bg/heavy-rain.jpg") center/cover no-repeat; }
    .weather-hero.bg-rain { background: #1d5aa8 url("../images/weather-bg/rain.jpg") center/cover no-repeat; }
    .weather-hero.bg-rainstorm { background: #142f72 url("../images/weather-bg/rainstorm.jpg") center/cover no-repeat; }
    .weather-hero.bg-thunderstorm { background: #193b86 url("../images/weather-bg/thunderstorm.jpg") center/cover no-repeat; }
    .weather-hero.bg-light-snow { background: #2f75ca url("../images/weather-bg/light-snow.jpg") center/cover no-repeat; }
    .weather-hero.bg-moderate-snow { background: #2f75ca url("../images/weather-bg/moderate-snow.jpg") center/cover no-repeat; }
    .weather-hero.bg-heavy-snow { background: #235caa url("../images/weather-bg/heavy-snow.jpg") center/cover no-repeat; }
    .weather-hero.bg-snow { background: #2f75ca url("../images/weather-bg/snow.jpg") center/cover no-repeat; }
    .weather-hero.bg-blizzard { background: #1b4f9a url("../images/weather-bg/blizzard.jpg") center/cover no-repeat; }
    .weather-hero.bg-sleet { background: #2f75ca url("../images/weather-bg/sleet.jpg") center/cover no-repeat; }
    .weather-hero.bg-fog { background: #6688a8 url("../images/weather-bg/fog.jpg") center/cover no-repeat; }
    .weather-hero.bg-dense-fog { background: #5b778f url("../images/weather-bg/dense-fog.jpg") center/cover no-repeat; }
    .weather-hero.bg-haze { background: #7f8790 url("../images/weather-bg/haze.jpg") center/cover no-repeat; }
    .weather-hero.bg-severe-haze { background: #666b72 url("../images/weather-bg/severe-haze.jpg") center/cover no-repeat; }
    .weather-hero.bg-dust { background: #9a7a45 url("../images/weather-bg/dust.jpg") center/cover no-repeat; }
    .weather-hero.bg-sandstorm { background: #8d6530 url("../images/weather-bg/sandstorm.jpg") center/cover no-repeat; }
    .weather-hero.bg-hot { background: #d9772c url("../images/weather-bg/hot.jpg") center/cover no-repeat; }
    .weather-hero.bg-cold { background: #286fb8 url("../images/weather-bg/cold.jpg") center/cover no-repeat; }
    .weather-hero.bg-wind { background: #246fc4 url("../images/weather-bg/wind.jpg") center/cover no-repeat; }
    .weather-hero.bg-night { background: #123a88 url("../images/weather-bg/night.jpg") center/cover no-repeat; }

    /* Left navy-blue atmospheric mask for maximum text contrast */
    .weather-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(14, 43, 92, 0.92) 0%, rgba(16, 52, 108, 0.78) 40%, rgba(20, 60, 120, 0.38) 68%, rgba(0, 0, 0, 0.05) 100%),
                  linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(8, 40, 100, 0.15) 100%);
    }

    .weather-hero-inner {
      position: relative;
      z-index: 2;
      padding: 24px 28px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .hero-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .hero-title-wrap {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
    }

    .hero-eyebrow {
      display: block;
      width: 100%;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.88);
      margin-bottom: 2px;
      letter-spacing: 0.5px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .hero-city-name,
    .hero-main-title {
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
      line-height: 1.2;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .hero-switch-btn {
      font-size: 13px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.88);
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .hero-switch-btn:hover {
      color: #38bdf8;
      text-decoration: underline;
    }

    .hero-badges {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 2px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
      backdrop-filter: blur(6px);
      white-space: nowrap;
    }

    .badge-realtime {
      background: rgba(255, 255, 255, 0.22);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.38);
    }

    .badge-station {
      background: rgba(16, 185, 129, 0.28);
      color: #ecfdf5;
      border: 1px solid rgba(52, 211, 153, 0.45);
    }

    .hero-city-switch-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.35);
      color: #ffffff;
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .hero-city-switch-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.6);
      transform: translateY(-1px);
    }

    .hero-city-switch-btn svg {
      vertical-align: middle;
    }

    /* Core Hero Grid: Left Temperature Block + Right Visual Block */
    .hero-core-grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      margin: 14px 0 20px;
    }

    .hero-temp-block {
      flex: 1;
      min-width: 0;
    }

    .hero-temp-display {
      display: flex;
      align-items: baseline;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .hero-temp-current {
      font-size: 64px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -1.5px;
      color: #ffffff;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      font-variant-numeric: tabular-nums;
    }

    .hero-deg {
      font-size: 28px;
      font-weight: 600;
      margin-left: 2px;
      vertical-align: super;
      letter-spacing: 0;
    }

    .hero-temp-meta {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .hero-temp-desc {
      font-size: 20px;
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    }

    .hero-temp-range {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.88);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .hero-temp-range strong {
      color: #ffffff;
      font-weight: 700;
    }

    /* Track bar comparing temperature with today */
    .hero-today-track {
      max-width: 440px;
      background: rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 8px;
      padding: 8px 14px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .hero-track-bar {
      height: 6px;
      background: rgba(255, 255, 255, 0.22);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 6px;
    }

    .hero-track-fill {
      height: 100%;
      background: linear-gradient(90deg, #38bdf8, #fbbf24 60%, #f97316 100%);
      border-radius: 4px;
      transition: width 0.4s ease;
    }

    .hero-track-labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.3;
    }

    /* Right visual condition block in hero */
    .hero-visual-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      padding-right: 18px;
      flex-shrink: 0;
    }

    .hero-condition-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-condition-icon .w-icon {
      width: 72px;
      height: 72px;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
    }

    .hero-condition-icon .night-icon {
      width: 48px;
      height: 48px;
    }

    .hero-condition-name {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.95);
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      white-space: nowrap;
    }

    /* Bottom 5-Metric Columns Grid in Tomorrow/Third Hero */
    .hero-stats-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1px;
      background: rgba(255, 255, 255, 0.22);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 8px;
      overflow: hidden;
      backdrop-filter: blur(8px);
      margin-top: 10px;
    }

    .hero-stat-col {
      background: rgba(15, 23, 42, 0.25);
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .hero-stat-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.2;
      white-space: nowrap;
    }

    .hero-stat-val {
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hero-update-text {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.82);
      margin-bottom: 16px;
      line-height: 1.4;
    }

    .hero-main-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }

    /* Pure CSS Weather Icons System (QWeather vector-flat style, purely CSS background) */
    .w-icon {
      display: inline-block;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      vertical-align: middle;
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
      background-image: url("../images/weather-icons/101.png");
    }

    .w-icon.hero-weather-symbol,
    .hero-weather-symbol {
      width: 70px;
      height: 70px;
      filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .w-icon.hourly-icon-img,
    .hourly-icon-img {
      width: 30px;
      height: 30px;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .w-icon.day-cond-icon,
    .w-icon.daily-icon-img,
    .day-cond-icon,
    .daily-icon-img {
      width: 24px;
      height: 24px;
      margin-right: 4px;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .w-icon.night-cond-icon,
    .w-icon.night-icon-img,
    .night-cond-icon,
    .night-icon-img {
      width: 20px;
      height: 20px;
      margin-left: 4px;
      opacity: 0.85;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .w-icon-2xl {
      width: 56px;
      height: 56px;
    }
    .w-icon-xl {
      width: 48px;
      height: 48px;
    }
    .w-icon-lg {
      width: 40px;
      height: 40px;
    }
    .w-icon-md {
      width: 36px;
      height: 36px;
    }
    .w-icon-sm {
      width: 16px;
      height: 16px;
    }
    .w-icon-xs {
      width: 14px;
      height: 14px;
    }

    /* Individual weather icon background-images */
    .w-icon-100 { background-image: url("../images/weather-icons/100.png"); }
    .w-icon-101 { background-image: url("../images/weather-icons/101.png"); }
    .w-icon-102 { background-image: url("../images/weather-icons/102.png"); }
    .w-icon-103 { background-image: url("../images/weather-icons/103.png"); }
    .w-icon-104 { background-image: url("../images/weather-icons/104.png"); }
    .w-icon-150 { background-image: url("../images/weather-icons/150.png"); }
    .w-icon-151 { background-image: url("../images/weather-icons/151.png"); }
    .w-icon-152 { background-image: url("../images/weather-icons/152.png"); }
    .w-icon-153 { background-image: url("../images/weather-icons/153.png"); }
    .w-icon-154 { background-image: url("../images/weather-icons/154.png"); }
    .w-icon-300 { background-image: url("../images/weather-icons/300.png"); }
    .w-icon-301 { background-image: url("../images/weather-icons/301.png"); }
    .w-icon-302 { background-image: url("../images/weather-icons/302.png"); }
    .w-icon-303 { background-image: url("../images/weather-icons/303.png"); }
    .w-icon-304 { background-image: url("../images/weather-icons/304.png"); }
    .w-icon-305 { background-image: url("../images/weather-icons/305.png"); }
    .w-icon-306 { background-image: url("../images/weather-icons/306.png"); }
    .w-icon-307 { background-image: url("../images/weather-icons/307.png"); }
    .w-icon-308 { background-image: url("../images/weather-icons/308.png"); }
    .w-icon-309 { background-image: url("../images/weather-icons/309.png"); }
    .w-icon-310 { background-image: url("../images/weather-icons/310.png"); }
    .w-icon-311 { background-image: url("../images/weather-icons/311.png"); }
    .w-icon-312 { background-image: url("../images/weather-icons/312.png"); }
    .w-icon-313 { background-image: url("../images/weather-icons/313.png"); }
    .w-icon-314 { background-image: url("../images/weather-icons/314.png"); }
    .w-icon-315 { background-image: url("../images/weather-icons/315.png"); }
    .w-icon-316 { background-image: url("../images/weather-icons/316.png"); }
    .w-icon-317 { background-image: url("../images/weather-icons/317.png"); }
    .w-icon-318 { background-image: url("../images/weather-icons/318.png"); }
    .w-icon-350 { background-image: url("../images/weather-icons/350.png"); }
    .w-icon-351 { background-image: url("../images/weather-icons/351.png"); }
    .w-icon-399 { background-image: url("../images/weather-icons/399.png"); }
    .w-icon-400 { background-image: url("../images/weather-icons/400.png"); }
    .w-icon-401 { background-image: url("../images/weather-icons/401.png"); }
    .w-icon-402 { background-image: url("../images/weather-icons/402.png"); }
    .w-icon-403 { background-image: url("../images/weather-icons/403.png"); }
    .w-icon-404 { background-image: url("../images/weather-icons/404.png"); }
    .w-icon-405 { background-image: url("../images/weather-icons/405.png"); }
    .w-icon-406 { background-image: url("../images/weather-icons/406.png"); }
    .w-icon-407 { background-image: url("../images/weather-icons/407.png"); }
    .w-icon-408 { background-image: url("../images/weather-icons/408.png"); }
    .w-icon-409 { background-image: url("../images/weather-icons/409.png"); }
    .w-icon-410 { background-image: url("../images/weather-icons/410.png"); }
    .w-icon-456 { background-image: url("../images/weather-icons/456.png"); }
    .w-icon-457 { background-image: url("../images/weather-icons/457.png"); }
    .w-icon-499 { background-image: url("../images/weather-icons/499.png"); }
    .w-icon-500 { background-image: url("../images/weather-icons/500.png"); }
    .w-icon-501 { background-image: url("../images/weather-icons/501.png"); }
    .w-icon-502 { background-image: url("../images/weather-icons/502.png"); }
    .w-icon-503 { background-image: url("../images/weather-icons/503.png"); }
    .w-icon-504 { background-image: url("../images/weather-icons/504.png"); }
    .w-icon-507 { background-image: url("../images/weather-icons/507.png"); }
    .w-icon-508 { background-image: url("../images/weather-icons/508.png"); }
    .w-icon-509 { background-image: url("../images/weather-icons/509.png"); }
    .w-icon-510 { background-image: url("../images/weather-icons/510.png"); }
    .w-icon-511 { background-image: url("../images/weather-icons/511.png"); }
    .w-icon-512 { background-image: url("../images/weather-icons/512.png"); }
    .w-icon-513 { background-image: url("../images/weather-icons/513.png"); }
    .w-icon-514 { background-image: url("../images/weather-icons/514.png"); }
    .w-icon-515 { background-image: url("../images/weather-icons/515.png"); }
    .w-icon-900 { background-image: url("../images/weather-icons/900.png"); }
    .w-icon-901 { background-image: url("../images/weather-icons/901.png"); }
    .w-icon-999 { background-image: url("../images/weather-icons/999.png"); }

    .hero-temp-large {
      font-size: 64px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -1px;
      color: #ffffff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .hero-cond-text {
      font-size: 28px;
      font-weight: 600;
      font-style: normal;
      color: #ffffff;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
      margin-left: 4px;
    }

    /* Metric Row at Bottom - Grid matching reference */
    .hero-metric-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 0;
      padding: 0;
      margin: 0;
      list-style: none;
      width: 100%;
    }

    .hero-metric-row li {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 5px;
      flex: 1 1 0;
      min-width: 0;
      padding: 0 5px;
      color: rgba(255, 255, 255, 0.95);
      white-space: nowrap;
      border-right: 1px solid rgba(255, 255, 255, 0.22);
    }

    .hero-metric-row li:first-child {
      padding-left: 0;
    }

    .hero-metric-row li:last-child {
      border-right: 0;
    }

    .hero-metric-row i {
      grid-row: 1 / span 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.95);
      font-style: normal;
      font-size: 11px;
      line-height: 1;
    }

    .hero-metric-row span {
      color: rgba(255, 255, 255, 0.82);
      font-size: 12px;
      line-height: 1.2;
    }

    .hero-metric-row strong {
      font-weight: 700;
      font-size: 13px;
      line-height: 1.35;
      color: #ffffff;
      white-space: nowrap;
    }

    @media (max-width: 768px) {
      .hero-metric-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px 0;
      }
      .hero-metric-row li {
        padding: 0 8px;
      }
      .hero-metric-row li:nth-child(4n) {
        border-right: 0;
      }
    }

    @media (max-width: 480px) {
      .hero-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .hero-metric-row li:nth-child(2n) {
        border-right: 0;
      }
    }

    .weather-hero-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .city-info h1 {
      font-size: 26px;
      font-weight: 700;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .city-badge {
      font-size: 12px;
      font-weight: 500;
      background: rgba(255, 255, 255, 0.2);
      padding: 2px 8px;
      border-radius: var(--radius-full);
    }

    .update-time {
      font-size: 13px;
      opacity: 0.85;
    }

    .weather-hero-body {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 32px;
      align-items: center;
    }

    .temp-large {
      display: flex;
      align-items: baseline;
      font-size: 64px;
      font-weight: 800;
      line-height: 1;
    }

    .temp-unit {
      font-size: 28px;
      font-weight: 500;
      margin-left: 4px;
    }

    .weather-condition {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cond-text {
      font-size: 22px;
      font-weight: 600;
    }

    .temp-range {
      font-size: 14px;
      opacity: 0.9;
    }

    .hero-meta-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px 24px;
      background: rgba(0, 0, 0, 0.15);
      padding: 14px 18px;
      border-radius: var(--radius);
    }

    .hero-meta-item {
      display: flex;
      flex-direction: column;
    }

    .meta-label {
      font-size: 12px;
      opacity: 0.8;
      margin-bottom: 2px;
    }

    .meta-val {
      font-size: 14px;
      font-weight: 600;
    }

    /* 24-Hour Forecast Horizontal Scroll with Continuous Temperature Line */
    .hourly-scroll-container {
      position: relative;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      background: #ffffff;
      border-radius: var(--radius-sm);
      padding: 10px 0 12px;
      -webkit-overflow-scrolling: touch;
    }

    .hourly-scroll-container::-webkit-scrollbar {
      height: 6px;
    }

    .hourly-scroll-container::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 4px;
      margin: 0 8px;
    }

    .hourly-scroll-container::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 4px;
    }

    .hourly-scroll-container::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    .hourly-track {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      min-width: 100%;
      gap: 0;
    }

    .hourly-chart-svg {
      position: absolute;
      top: 6px;
      left: 0;
      pointer-events: none;
      z-index: 10;
      overflow: visible;
    }

    .hourly-col {
      flex: 0 0 70px;
      width: 70px;
      min-width: 70px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 0 4px 6px;
      border-right: 1px solid #f1f5f9;
      position: relative;
      z-index: 1;
      transition: background-color 0.15s ease;
    }

    .hourly-col:last-child {
      border-right: none;
    }

    .hourly-col.hourly-current {
      background: #f0f7ff;
      border: 1px solid #e0f2fe;
      border-radius: 8px;
      z-index: 2;
    }

    .hourly-spacer {
      height: 56px;
      flex-shrink: 0;
      width: 100%;
    }

    .hourly-icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      margin: 4px 0 6px;
    }

    .hourly-icon-img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
    }

    .hourly-time {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      white-space: nowrap;
      line-height: 1.2;
      text-align: center;
      margin-bottom: 2px;
    }

    .hourly-time.hourly-now {
      color: #0284c7;
      font-weight: 700;
    }

    /* 7-Day Forecast Modern Table */
    .forecast-table-wrap {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .forecast-table-head {
      display: grid;
      grid-template-columns: 110px 140px 1fr 110px 75px;
      align-items: center;
      padding: 10px 18px;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }

    .fth-aqi {
      text-align: right;
    }

    .forecast-table-body {
      display: flex;
      flex-direction: column;
    }

    .forecast-row {
      display: grid;
      grid-template-columns: 110px 140px 1fr 110px 75px;
      align-items: center;
      padding: 13px 18px;
      border-bottom: 1px solid #f1f5f9;
      font-size: 13px;
      color: #1e293b;
      transition: background 0.15s ease;
    }

    .forecast-row:last-child {
      border-bottom: none;
    }

    .forecast-row:hover {
      background: #f8fafc;
    }

    .forecast-row.row-today {
      background: #f0f9ff;
      border-left: 3px solid #0284c7;
      padding-left: 15px;
    }

    .fc-col {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .fc-date {
      gap: 8px;
    }

    .fc-week-badge {
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      padding: 2px 7px;
      background: #f1f5f9;
      border-radius: 5px;
      line-height: 1.3;
      white-space: nowrap;
    }

    .fc-week-badge.badge-today {
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.28);
    }

    .fc-week-badge.badge-tomorrow {
      background: #e0f2fe;
      color: #0369a1;
    }

    .fc-date-num {
      font-size: 12px;
      color: #64748b;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      white-space: nowrap;
    }

    .fc-cond {
      gap: 10px;
    }

    .fc-cond-icon-wrap {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
    }

    .fc-weather-icon {
      display: inline-block;
      width: 26px;
      height: 26px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      vertical-align: middle;
    }

    .fc-night-icon {
      opacity: 0.85;
    }

    .fc-cond-text {
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fc-temp,
    .fc-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 8px;
      min-width: 0;
    }

    /* 7-Day Forecast Page Full List */
    .daily-forecast-list {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .daily-item {
      display: grid;
      grid-template-columns: 130px 180px 1fr 130px 110px;
      align-items: center;
      padding: 14px 20px;
      border-bottom: 1px solid #f1f5f9;
      font-size: 13px;
      color: #1e293b;
      transition: background 0.15s ease;
    }

    .daily-item:last-child {
      border-bottom: none;
    }

    .daily-item:hover {
      background: #f8fafc;
    }

    .daily-item.fc-today-row {
      background: #f0f9ff;
      border-left: 3px solid #0284c7;
      padding-left: 17px;
    }

    .daily-item .fc-col {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .daily-item .fc-col.fc-cond {
      gap: 8px;
    }

    .daily-item .fc-col.fc-cond .w-icon {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
    }

    .daily-item .fc-cond-text {
      font-weight: 500;
      color: #334155;
      white-space: nowrap;
    }

    .daily-item .fc-col.fc-wind {
      display: flex;
      align-items: center;
    }

    .daily-item .fc-wind-text {
      font-size: 12px;
      color: #64748b;
      white-space: nowrap;
    }

    .daily-item .fc-col.fc-aqi {
      justify-content: flex-end;
    }

    .fc-wind-dir {
      font-weight: 500;
      color: #334155;
    }

    .fc-wind-text {
      font-size: 12px;
      color: #64748b;
    }

    .fc-aqi-pill {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      line-height: 1.4;
    }

    .aqi-pill-1,
    .aqi-pill-good {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .aqi-pill-2,
    .aqi-pill-moderate {
      background: #fefce8;
      color: #ca8a04;
      border: 1px solid #fef08a;
    }

    .aqi-pill-3,
    .aqi-pill-warn {
      background: #fff7ed;
      color: #ea580c;
      border: 1px solid #fed7aa;
    }

    .aqi-pill-4,
    .aqi-pill-bad {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .aqi-pill-5 {
      background: #fdf2f8;
      color: #9333ea;
      border: 1px solid #f5d0fe;
    }

    .aqi-pill-6 {
      background: #4c1d95;
      color: #ffffff;
    }

    .fc-temp-num {
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .fc-temp-min {
      color: #475569;
      min-width: 28px;
      text-align: right;
    }

    .fc-temp-max {
      color: #0f172a;
      min-width: 28px;
      text-align: left;
    }

    .fc-temp-bar-bg {
      flex: 1;
      height: 6px;
      background: #e2e8f0;
      border-radius: 999px;
      position: relative;
      overflow: hidden;
      min-width: 60px;
    }

    .fc-temp-bar-fill {
      position: absolute;
      top: 0;
      bottom: 0;
      background: linear-gradient(90deg, #38bdf8 0%, #34d399 40%, #fbbf24 75%, #f97316 100%);
      border-radius: 999px;
      transition: all 0.3s ease;
    }

    .fc-wind {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.2;
    }

    .fc-wind-lvl {
      font-size: 11px;
      color: #94a3b8;
    }

    .fc-aqi {
      justify-content: flex-end;
    }

    .aqi-chip {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 999px;
      line-height: 1.25;
      text-align: center;
      white-space: nowrap;
    }

    .aqi-chip.aqi-good {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .aqi-chip.aqi-moderate {
      background: #fffbeb;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .aqi-chip.aqi-warn {
      background: #fff1f2;
      color: #e11d48;
      border: 1px solid #fecdd3;
    }

    @media (max-width: 768px) {
      .forecast-table-head {
        grid-template-columns: 85px 110px 1fr 60px;
        padding: 8px 10px;
      }
      .fth-wind {
        display: none;
      }
      .forecast-row {
        grid-template-columns: 85px 110px 1fr 60px;
        padding: 10px 10px;
      }
      .fc-wind {
        display: none;
      }
    }

    /* Life Indices Grid (22 items showcase) */
    .indices-grid,
    .life-indices-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .index-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 14px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
      min-height: 84px;
      min-width: 0;
      box-sizing: border-box;
      cursor: default;
    }

    .index-card:hover {
      background: #ffffff;
      border-color: #38bdf8;
      box-shadow: 0 4px 12px rgba(56, 189, 248, 0.12);
      transform: translateY(-1px);
    }

    .index-icon-wrap {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
      user-select: none;
      -webkit-user-select: none;
    }

    .index-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .index-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .index-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .index-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      padding: 1px 7px;
      border-radius: 4px;
      line-height: 1.4;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .index-badge-good {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .index-badge-warn {
      background: #fff1f2;
      color: #e11d48;
      border: 1px solid #fecdd3;
    }

    .index-badge-info {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .index-desc {
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 36px;
      word-break: break-all;
    }
    /* Life Indices Subpage (22 Full Display Cards) */
    .life-indices-grid .index-card {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 14px 16px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      min-height: 104px;
      box-sizing: border-box;
    }

    .life-indices-grid .index-card:hover {
      border-color: #38bdf8;
      box-shadow: 0 4px 12px rgba(56, 189, 248, 0.12);
      transform: translateY(-2px);
    }

    .index-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .index-icon-box {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    .index-title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      min-width: 0;
      gap: 8px;
    }

    .life-indices-grid .index-desc {
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 36px;
    }

    @media (max-width: 1024px) {
      .indices-grid,
      .life-indices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .indices-grid,
      .life-indices-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* District & Attribute Table */
    .attr-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 14px;
    }

    .attr-card {
      background: var(--surface-subtle);
      border-radius: var(--radius-sm);
      padding: 12px;
      text-align: center;
    }

    .attr-label {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .attr-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-main);
    }

    .pill-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .sub-pill {
      font-size: 12px;
      padding: 4px 10px;
      border-radius: var(--radius-sm);
      background: var(--surface-subtle);
      color: var(--text-main);
      border: 1px solid var(--border);
    }

    .sub-pill:hover {
      background: var(--primary-light);
      border-color: var(--primary);
      color: var(--primary-dark);
    }

    /* Attractions Grid */
    .attraction-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    @media (max-width: 600px) {
      .attraction-grid {
        grid-template-columns: 1fr;
      }
    }

    .attraction-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      background: var(--surface-subtle);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .attraction-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .attraction-grade {
      font-size: 10px;
      padding: 1px 5px;
      border-radius: 3px;
      background: #fef08a;
      color: #854d0e;
      font-weight: 700;
    }

    .attraction-meta {
      font-size: 12px;
      color: var(--text-muted);
    }

    .attraction-weather {
      text-align: right;
    }

    .attraction-temp {
      font-size: 18px;
      font-weight: 700;
      color: var(--primary-dark);
    }

    .attraction-status {
      font-size: 11px;
      color: var(--success);
      font-weight: 600;
    }

    /* Route / Logistics Table */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .data-table th {
      background: var(--surface-subtle);
      text-align: left;
      padding: 10px 12px;
      color: var(--text-muted);
      font-weight: 600;
      border-bottom: 1px solid var(--border);
    }

    .data-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      color: var(--text-main);
    }

    .data-table tr:hover td {
      background: #f8fafc;
    }

    .badge-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 3px;
      background: #e2e8f0;
      color: var(--text-muted);
    }

    .badge-tag.highlight {
      background: var(--primary-light);
      color: var(--primary-dark);
    }

    /* Right Sidebar Widgets */
    .sidebar-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.15s ease;
    }

    .sidebar-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    /* AQI Dashboard Banner */
    .aqi-dashboard-banner {
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 12px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
    }

    .aqi-level-good {
      background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
      border-color: #bbf7d0;
    }

    .aqi-level-moderate {
      background: linear-gradient(180deg, #fefce8 0%, #ffffff 100%);
      border-color: #fef08a;
    }

    .aqi-level-warn {
      background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
      border-color: #fecdd3;
    }

    .aqi-hero-top {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
    }

    .aqi-score-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      min-width: 60px;
    }

    .aqi-score-num {
      font-size: 34px;
      font-weight: 800;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .aqi-level-good .aqi-score-num { color: #15803d; }
    .aqi-level-moderate .aqi-score-num { color: #b45309; }
    .aqi-level-warn .aqi-score-num { color: #e11d48; }

    .aqi-score-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      margin-top: 4px;
      line-height: 1.2;
    }

    .tag-good {
      background: #16a34a;
      color: #ffffff;
    }

    .tag-moderate {
      background: #f59e0b;
      color: #ffffff;
    }

    .tag-warn {
      background: #ef4444;
      color: #ffffff;
    }

    .aqi-hero-info {
      flex: 1;
      min-width: 0;
    }

    .aqi-status-text {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .aqi-prime-item {
      font-size: 12px;
      color: #64748b;
    }

    .aqi-prime-item strong {
      color: #0284c7;
      font-weight: 600;
    }

    /* 5-Segment AQI Scale */
    .aqi-scale-wrapper {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .aqi-scale-bar {
      height: 6px;
      display: flex;
      gap: 2px;
      position: relative;
      border-radius: 999px;
      padding: 1px 0;
    }

    .aqi-scale-segment {
      flex: 1;
      height: 5px;
      border-radius: 2px;
    }

    .seg-1 { background: #10b981; }
    .seg-2 { background: #f59e0b; }
    .seg-3 { background: #f97316; }
    .seg-4 { background: #ef4444; }
    .seg-5 { background: #8b5cf6; }

    .aqi-indicator-pin {
      position: absolute;
      top: -3px;
      width: 10px;
      height: 10px;
      background: #ffffff;
      border: 2.5px solid #0f172a;
      border-radius: 50%;
      transform: translateX(-50%);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
      z-index: 2;
    }

    .aqi-scale-ticks {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: #94a3b8;
      font-weight: 500;
    }

    /* AQI Tip Box */
    .aqi-tip-box {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 12px;
    }

    .aqi-tip-icon {
      flex-shrink: 0;
      color: #16a34a;
      margin-top: 2px;
      display: flex;
    }

    .aqi-tip-text {
      margin: 0;
      font-size: 12px;
      color: #166534;
      line-height: 1.5;
    }

    /* Pollutant Grid */
    .pollutant-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .pollutant-cell {
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 8px;
      padding: 8px 6px;
      text-align: center;
      transition: all 0.15s ease;
    }

    .pollutant-cell:hover {
      background: #ffffff;
      border-color: #10b981;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
    }

    .pollutant-key {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.2;
    }

    .pollutant-num {
      display: block;
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
      margin: 2px 0 1px;
      line-height: 1.2;
    }

    .pollutant-unit {
      display: block;
      font-size: 10px;
      color: #94a3b8;
      line-height: 1;
    }

    /* Astronomy & Solar Term Styles */
    .solar-term-pill {
      font-size: 11px;
      font-weight: 700;
      color: #b45309;
      background: #fef3c7;
      border: 1px solid #fde68a;
      padding: 2px 9px;
      border-radius: 999px;
    }

    .astro-calendar-box {
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .astro-calendar-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
    }

    .astro-solar-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      color: #1e293b;
    }

    .astro-lunar-sub {
      border-top: 1px dashed #e2e8f0;
      padding-top: 6px;
      color: #64748b;
      font-size: 11px;
    }

    .astro-next-term {
      color: #b45309;
      font-weight: 600;
      background: #fefce8;
      padding: 1px 6px;
      border-radius: 4px;
    }

    /* Sun Cards Duo */
    .sun-cards-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 12px;
    }

    .sun-mini-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      transition: transform 0.15s ease;
    }

    .sun-mini-card.sunrise {
      background: #fffbeb;
      border: 1px solid #fef3c7;
    }

    .sun-mini-card.sunset {
      background: #fff7ed;
      border: 1px solid #ffedd5;
    }

    .sun-card-visual {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sun-card-info {
      display: flex;
      flex-direction: column;
    }

    .sun-card-time {
      font-size: 17px;
      font-weight: 800;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }

    .sun-card-lbl {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }

    /* Solar Track Wrapper */
    .solar-track-wrapper {
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 8px;
      padding: 12px 14px;
    }

    .solar-track-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #475569;
      margin-bottom: 8px;
    }

    .solar-dur-txt strong {
      color: #0f172a;
    }

    .solar-status-pill {
      font-size: 11px;
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 600;
    }

    .solar-progress-bar {
      height: 6px;
      background: #e2e8f0;
      border-radius: 999px;
      position: relative;
      margin: 10px 0 8px;
    }

    .solar-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #f59e0b 0%, #0284c7 50%, #ea580c 100%);
      border-radius: 999px;
      position: relative;
      max-width: 100%;
    }

    .solar-sun-pin {
      position: absolute;
      right: -8px;
      top: -5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.4));
    }

    .solar-track-footer {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #94a3b8;
      font-weight: 500;
    }

    /* Hot Links Mesh List */
    .hot-links-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      font-size: 13px;
    }

    .hot-link-item {
      padding: 6px 8px;
      background: var(--surface-subtle);
      border-radius: var(--radius-sm);
      color: var(--text-main);
      display: flex;
      justify-content: space-between;
    }

    .hot-link-item:hover {
      background: var(--primary-light);
      color: var(--primary-dark);
    }

    /* Nationwide Province Directory (Spider Highway) */
    .province-highway {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 32px 0;
      margin-top: 24px;
    }

    .province-block {
      margin-bottom: 16px;
    }

    .province-head {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 6px;
    }

    .province-cities {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 13px;
      color: var(--text-muted);
    }

    /* Footer */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      font-size: 13px;
      padding: 36px 0 24px;
      border-top: 1px solid #1e293b;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 32px;
      margin-bottom: 24px;
    }

    @media (max-width: 768px) {
      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    .footer-title {
      color: #f1f5f9;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding-top: 18px;
      text-align: center;
      font-size: 12px;
    }

    /* Portal Homepage Specific Enhancement Components */
    .hero-channel-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .channel-pill {
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
      text-decoration: none;
      transition: all 0.15s ease;
    }

    .channel-pill:hover {
      background: #ffffff;
      color: var(--primary-dark);
    }

    .btn-switch-city {
      background: rgba(255, 255, 255, 0.2);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: var(--radius-sm);
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .btn-switch-city:hover {
      background: #ffffff;
      color: var(--primary-dark);
    }

    /* Ranking List Components */
    .rank-segmented-tabs {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
      margin-bottom: 12px;
      gap: 3px;
    }

    .rank-segment-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: center;
      outline: none;
    }

    .rank-segment-btn:hover {
      color: #0f172a;
    }

    .rank-segment-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      font-weight: 700;
    }

    .ranking-list {
      display: flex;
      flex-direction: column;
    }

    .ranking-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 8px;
      border-bottom: 1px solid #f8fafc;
      text-decoration: none;
      color: inherit;
      transition: background 0.12s ease;
      border-radius: 4px;
    }

    .ranking-row:last-child {
      border-bottom: none;
    }

    .ranking-row:hover {
      background: #f8fafc;
    }

    .rank-left-group {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .rank-num {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0;
      line-height: 1;
    }

    .rank-gold {
      background: #f59e0b;
      color: #ffffff;
    }

    .rank-silver {
      background: #94a3b8;
      color: #ffffff;
    }

    .rank-bronze {
      background: #d97706;
      color: #ffffff;
    }

    .rank-default {
      color: #94a3b8;
      background: transparent;
      font-weight: 600;
    }

    /* Ice theme for low temp */
    .rank-ice-1 { background: #0284c7; color: #ffffff; }
    .rank-ice-2 { background: #38bdf8; color: #ffffff; }
    .rank-ice-3 { background: #7dd3fc; color: #0369a1; }

    /* Leaf theme for air best */
    .rank-leaf-1 { background: #10b981; color: #ffffff; }
    .rank-leaf-2 { background: #34d399; color: #ffffff; }
    .rank-leaf-3 { background: #6ee7b7; color: #065f46; }

    /* Warn theme for air worst */
    .rank-warn-1 { background: #ef4444; color: #ffffff; }
    .rank-warn-2 { background: #f87171; color: #ffffff; }
    .rank-warn-3 { background: #fca5a5; color: #991b1b; }

    .rank-city-name {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap;
    }

    .rank-prov-text {
      font-size: 11px;
      color: #94a3b8;
      white-space: nowrap;
      margin-left: 6px;
    }

    .rank-cond-text {
      font-size: 12px;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-left: 4px;
    }

    .rank-quality-chip {
      font-size: 11px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 4px;
      margin-left: 4px;
    }

    .rank-quality-chip.good {
      background: #ecfdf5;
      color: #059669;
    }

    .rank-quality-chip.warn {
      background: #fff1f2;
      color: #e11d48;
    }

    .rank-metric-val {
      font-size: 13px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .rank-metric-val.hot {
      color: #dc2626;
    }

    .rank-metric-val.cold {
      color: #0284c7;
    }

    .rank-metric-val.aqi.good {
      color: #059669;
    }

    .rank-metric-val.aqi.warn {
      color: #e11d48;
    }

    /* Air Quality Subpage 6 Pollutants Grid */
    .aqi-pollutants-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .pollutant-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 16px 18px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
      box-sizing: border-box;
    }

    .pollutant-card:hover {
      border-color: #38bdf8;
      box-shadow: 0 4px 12px rgba(56, 189, 248, 0.1);
      transform: translateY(-1px);
    }

    .pollutant-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .pollutant-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
    }

    .pollutant-status {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 4px;
      line-height: 1.4;
      white-space: nowrap;
    }

    .pollutant-status.status-good {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .pollutant-status.status-moderate {
      background: #fefce8;
      color: #ca8a04;
      border: 1px solid #fef08a;
    }

    .pollutant-status.status-warn {
      background: #fff1f2;
      color: #e11d48;
      border: 1px solid #fecdd3;
    }

    .pollutant-val {
      font-size: 26px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .pollutant-val .unit {
      font-size: 12px;
      font-weight: 500;
      color: #64748b;
      margin-left: 4px;
    }

    .pollutant-desc {
      font-size: 12px;
      color: #64748b;
      line-height: 1.4;
      margin: 0;
    }

    /* ==========================================================================
       Scenic Spot Weather Grid (城市/区县热门景点天气卡片 - 4列网格)
       ========================================================================== */
    .spot-weather-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 4px;
    }

    .spot-weather-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      text-decoration: none;
      color: var(--text-main);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      min-height: 102px;
      box-sizing: border-box;
    }

    .spot-weather-card:hover {
      border-color: #0284c7;
      background: #f8fafc;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
      transform: translateY(-2px);
    }

    .spot-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 5px;
    }

    .spot-card-name {
      font-size: 14px;
      font-weight: 600;
      color: #0f172a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
    }

    .spot-card-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 4px;
      white-space: nowrap;
      line-height: 1.4;
      flex-shrink: 0;
    }

    .spot-card-badge.badge-gold {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .spot-card-badge.badge-blue {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }

    .spot-card-badge.badge-emerald {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .spot-card-badge.badge-green {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0;
    }

    .spot-card-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #64748b;
      margin-bottom: 8px;
      overflow: hidden;
      white-space: nowrap;
    }

    .spot-card-rating {
      color: #d97706;
      font-weight: 600;
      flex-shrink: 0;
    }

    .spot-card-district {
      color: #475569;
      flex-shrink: 0;
    }

    .spot-card-cat {
      color: #94a3b8;
      font-size: 11px;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    .spot-card-cat::before {
      content: "·";
      margin-right: 4px;
    }

    .spot-card-weather {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 12px;
      color: #475569;
    }

    .spot-weather-info {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .spot-weather-temp {
      font-weight: 700;
      color: #0284c7;
    }

    .spot-weather-comfort {
      color: #059669;
      font-weight: 500;
      margin-left: 2px;
      font-size: 11px;
    }

    .spot-card-arrow {
      color: #94a3b8;
      font-size: 14px;
      font-weight: bold;
      line-height: 1;
      transition: transform 0.2s ease, color 0.2s ease;
      flex-shrink: 0;
    }

    .spot-weather-card:hover .spot-card-arrow {
      color: #0284c7;
      transform: translateX(2px);
    }

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

    @media (max-width: 860px) {
      .spot-weather-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .card-header-right .card-subtitle {
        display: none;
      }
    }

    @media (max-width: 520px) {
      .spot-weather-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* ==========================================================================
       Subdistrict & Nearby Cities Weather Grid (一行三个卡片)
       ========================================================================== */
    .subdistrict-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 4px;
    }

    .subdistrict-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 10px 14px;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
      transition: all 0.2s ease;
      box-sizing: border-box;
      min-width: 0;
    }

    .subdistrict-card:hover {
      background: #f8fafc;
      border-color: #38bdf8;
      box-shadow: 0 3px 10px rgba(56, 189, 248, 0.12);
      transform: translateY(-1px);
    }

    .subdistrict-name {
      font-size: 15px;
      font-weight: 500;
      color: #1e293b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
      margin-right: 8px;
    }

    .subdistrict-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .w-icon.w-icon-sub,
    .w-icon-sub {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }

    .subdistrict-range {
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .subdistrict-arrow {
      color: #94a3b8;
      flex-shrink: 0;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .subdistrict-card:hover .subdistrict-arrow {
      color: #0284c7;
      transform: translateX(2px);
    }

    @media (max-width: 860px) {
      .subdistrict-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 520px) {
      .subdistrict-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
       City Weather Matrix (全国城市天气预报速查矩阵)
       ========================================================================== */
    .matrix-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .matrix-main-title {
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
      line-height: 1.4;
      letter-spacing: -0.2px;
    }

    .matrix-nav-tabs {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .matrix-nav-tab {
      background: transparent;
      border: none;
      padding: 4px 2px;
      font-size: 14px;
      font-weight: 500;
      color: #475569;
      cursor: pointer;
      position: relative;
      transition: color 0.15s ease;
      outline: none;
      line-height: 1.4;
    }

    .matrix-nav-tab:hover {
      color: #0284c7;
    }

    .matrix-nav-tab.active {
      color: #0284c7;
      font-weight: 700;
    }

    .matrix-nav-tab.active::after {
      content: "";
      position: absolute;
      bottom: -3px;
      left: 0;
      right: 0;
      height: 2px;
      background: #0284c7;
      border-radius: 1px;
    }

    .city-text-grid {
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr));
      gap: 14px 10px;
      padding: 4px 0 8px;
      width: 100%;
      box-sizing: border-box;
    }

    .matrix-pane {
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr));
      gap: 14px 10px;
      padding: 6px 0 10px;
      width: 100%;
      box-sizing: border-box;
    }

    .matrix-city-link {
      font-size: 13px;
      color: #334155;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      line-height: 1.6;
      text-align: left;
      transition: color 0.15s ease;
    }

    .matrix-city-link:hover {
      color: #0284c7;
      text-decoration: underline;
    }

    .city-text-link {
      font-size: 13px;
      color: #334155;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      line-height: 1.6;
      text-align: left;
      transition: color 0.15s ease;
    }

    .city-text-link:hover {
      color: #0284c7;
      text-decoration: underline;
    }

    @media (max-width: 992px) {
      .city-text-grid,
      .matrix-pane {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px 8px;
      }
    }

    @media (max-width: 768px) {
      .city-text-grid,
      .matrix-pane {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px 6px;
      }
    }

    @media (max-width: 480px) {
      .city-text-grid,
      .matrix-pane {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        font-size: 12.5px;
        gap: 8px 6px;
      }
    }

    /* ==========================================================================
       City Switcher Modal (快捷城市切换浮层弹窗)
       ========================================================================== */
    .city-modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 99999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .city-modal-backdrop.open {
      display: flex;
    }

    .city-modal-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 24px;
      max-width: 580px;
      width: 100%;
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);
      border: 1px solid #e2e8f0;
      box-sizing: border-box;
      animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes modalFadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .city-chips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      gap: 8px;
      padding-right: 4px;
    }

    .city-chip {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      color: #334155;
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.15s ease;
    }

    .city-chip:hover {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      transform: translateY(-1px);
    }


/* ==========================================================================
   National Weather Channel Navigation & Province Directory Styles
   ========================================================================== */
.hub-cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) {
  .hub-cities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .hub-cities-grid {
    grid-template-columns: 1fr;
  }
}

.hub-city-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  position: relative;
}
.hub-city-card:hover {
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
  transform: translateY(-2px);
}
.hub-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.hub-card-city {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.hub-card-temp {
  font-size: 20px;
  font-weight: 800;
  color: #0284c7;
}
.hub-card-body {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.hub-card-cond {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.hub-card-range {
  font-size: 12px;
  color: #64748b;
  margin-left: auto;
}
.hub-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
}
.hub-card-wind {
  color: #64748b;
}

/* Zone & Province Blocks */
.zone-section {
  margin-bottom: 24px;
}
.zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 14px;
}
.zone-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.zone-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 13px;
  font-weight: 700;
}
.zone-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.zone-subtitle {
  font-size: 12px;
  color: #64748b;
}

.province-cards-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-province-block {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  transition: border-color 0.2s;
}
.nav-province-block:hover {
  border-color: #cbd5e1;
}
.nav-prov-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.nav-prov-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-prov-link {
  font-size: 15px;
  font-weight: 700;
  color: #0284c7;
  text-decoration: none;
  transition: color 0.15s;
}
.nav-prov-link:hover {
  color: #0369a1;
  text-decoration: underline;
}
.nav-prov-badge {
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 7px;
  border-radius: 10px;
}
.nav-prov-more {
  font-size: 12px;
  color: #0284c7;
  text-decoration: none;
}
.nav-prov-more:hover {
  text-decoration: underline;
}
.nav-cities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nav-city-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #334155;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.nav-city-pill:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Province Page City Cards Grid */
.prov-cities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .prov-cities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .prov-cities-grid {
    grid-template-columns: 1fr;
  }
}
.prov-city-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.prov-city-card:hover {
  border-color: #38bdf8;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.08);
}
.prov-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.prov-city-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
}
.prov-city-title:hover {
  color: #0284c7;
}
.prov-city-tag {
  font-size: 11px;
  padding: 2px 7px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 4px;
}
.prov-weather-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.prov-city-temp {
  font-size: 26px;
  font-weight: 800;
  color: #0284c7;
  line-height: 1;
}
.prov-cond-col {
  display: flex;
  flex-direction: column;
}
.prov-city-cond {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}
.prov-city-range {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.prov-metrics-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #475569;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.prov-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.prov-action-btn {
  font-size: 12px;
  padding: 3px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s ease;
}
.prov-action-btn:hover {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #bae6fd;
}

/* Province District Deep Matrix */
.city-district-group {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.city-dist-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.city-dist-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.city-dist-title span {
  font-weight: normal;
  color: #64748b;
  font-size: 12px;
}
.districts-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.district-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 12px;
  color: #334155;
  text-decoration: none;
  transition: all 0.15s ease;
}
.district-pill:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

/* Scenic Spots Grid in Province */
.province-spots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  .province-spots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.spot-mini-card {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
}
.spot-mini-card:hover {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
}
.spot-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.spot-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.spot-card-tag {
  color: #0284c7;
  font-weight: 600;
}
.spot-card-city {
  color: #64748b;
}

/* Neighbor Provinces Cards */
.neighbor-provinces-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.neighbor-prov-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-decoration: none;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.neighbor-prov-pill:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}
.neighbor-prov-pill span {
  font-size: 11px;
  opacity: 0.8;
}

/* Numbered rank aliases & tab button styles for portal ranking cards */
.rank-1 { background: #f59e0b !important; color: #ffffff !important; }
.rank-2 { background: #94a3b8 !important; color: #ffffff !important; }
.rank-3 { background: #d97706 !important; color: #ffffff !important; }
.rank-cold-1 { background: #0284c7 !important; color: #ffffff !important; }
.rank-cold-2 { background: #38bdf8 !important; color: #ffffff !important; }
.rank-cold-3 { background: #7dd3fc !important; color: #0369a1 !important; }
.rank-air-1 { background: #10b981 !important; color: #ffffff !important; }
.rank-air-2 { background: #34d399 !important; color: #ffffff !important; }
.rank-air-3 { background: #6ee7b7 !important; color: #065f46 !important; }
.temp-high { color: #dc2626 !important; }
.temp-low { color: #0284c7 !important; }
.rank-card .section-title,
.sidebar-card .section-title,
.sidebar-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

.rank-card .card-header,
.sidebar-card .card-header,
.sidebar-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.sidebar-card-header-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.sidebar-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0284c7 !important;
  flex-shrink: 0 !important;
}

.rank-tab-btns {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: #f1f5f9 !important;
  padding: 2px 3px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.rank-tab-btn {
  border: none !important;
  background: transparent !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.3 !important;
  transition: all 0.15s ease !important;
}

.rank-tab-btn:hover {
  color: #0f172a !important;
}

.rank-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}


    /* Weather Alert Center */
    .alert-status-banner {
      border-radius: 10px;
      padding: 24px 20px;
      text-align: center;
      margin-bottom: 20px;
    }

    .alert-status-green {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }

    .alert-status-icon {
      font-size: 40px;
      margin-bottom: 10px;
      line-height: 1;
    }

    .alert-status-title {
      font-size: 20px;
      font-weight: 700;
      color: #166534;
      margin: 0 0 8px;
    }

    .alert-status-badge {
      display: inline-block;
      background: #dcfce7;
      color: #15803d;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 16px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .alert-status-desc {
      font-size: 13px;
      color: #15803d;
      line-height: 1.6;
      max-width: 620px;
      margin: 0 auto;
    }

    .alert-guide-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .alert-guide-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 14px 16px;
      box-sizing: border-box;
    }

    .alert-guide-name {
      font-weight: 700;
      color: #0284c7;
      margin-bottom: 6px;
      font-size: 14px;
    }

    .alert-guide-text {
      font-size: 12px;
      color: #475569;
      line-height: 1.5;
    }

    @media (max-width: 640px) {
      .alert-guide-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* ==========================================================================
       Scenic Spots Module Styles (城市景点频道/省份/城市/景点详情通用样式)
       ========================================================================== */
    .jingdian-banner {
      background: linear-gradient(135deg, #0369a1 0%, #0284c7 60%, #38bdf8 100%);
      border-radius: 8px;
      padding: 24px 28px;
      color: #ffffff;
      margin-bottom: 20px;
      box-shadow: 0 4px 16px rgba(2, 132, 199, 0.15);
    }
    .jingdian-banner-title {
      font-size: 22px;
      font-weight: 800;
      margin: 0 0 6px 0;
      letter-spacing: 0;
      color: #ffffff;
    }
    .jingdian-banner-desc {
      font-size: 13px;
      color: #e0f2fe;
      margin: 0 0 16px 0;
      line-height: 1.5;
    }
    .jingdian-stats-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .jingdian-stat-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 12px;
      color: #ffffff;
    }
    .jingdian-stat-pill strong {
      font-size: 13px;
      font-weight: 700;
    }

    /* 4-column scenic cards grid */
    .scenic-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    @media (max-width: 1100px) {
      .scenic-grid-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 820px) {
      .scenic-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 540px) {
      .scenic-grid-4 {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* Scenic card */
    .scenic-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-decoration: none;
      color: #1e293b;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      min-height: 140px;
      box-sizing: border-box;
    }
    .scenic-card:hover {
      border-color: #0284c7;
      background: #f8fafc;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.1);
      transform: translateY(-2px);
    }
    .scenic-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 6px;
    }
    .scenic-card-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 4px;
      white-space: nowrap;
      line-height: 1.3;
    }
    .scenic-badge-gold {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }
    .scenic-badge-blue {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }
    .scenic-badge-emerald {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }
    .scenic-badge-purple {
      background: #f5f3ff;
      color: #7c3aed;
      border: 1px solid #ddd6fe;
    }
    .scenic-card-star {
      font-size: 11px;
      font-weight: 700;
      color: #d97706;
      white-space: nowrap;
    }
    .scenic-card-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 4px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .scenic-card-loc {
      font-size: 11px;
      color: #64748b;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .scenic-card-weather {
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 6px;
      padding: 5px 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 12px;
    }
    .scenic-w-left {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #334155;
    }
    .scenic-w-temp {
      font-weight: 700;
      color: #0284c7;
    }
    .scenic-w-comfort {
      font-size: 11px;
      font-weight: 600;
      color: #059669;
      background: #ecfdf5;
      padding: 1px 6px;
      border-radius: 3px;
    }
    .scenic-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 6px;
      border-top: 1px dashed #f1f5f9;
      font-size: 11px;
      color: #64748b;
    }
    .scenic-card-link {
      color: #0284c7;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .scenic-card-link:hover {
      color: #0369a1;
      text-decoration: underline;
    }

    /* Geographic Province Matrix (大区省份景点网格) */
    .zone-matrix-band {
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid #f1f5f9;
    }
    .zone-matrix-band:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .zone-band-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .zone-band-title {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .zone-band-title::before {
      content: "";
      width: 3px;
      height: 12px;
      background: #0284c7;
      border-radius: 2px;
    }
    .zone-prov-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 8px;
    }
    .zone-prov-chip {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 7px 10px;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      transition: all 0.15s ease;
    }
    .zone-prov-chip:hover {
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
    }
    .zone-prov-chip-name {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2px;
    }
    .zone-prov-chip-meta {
      font-size: 11px;
      color: #64748b;
    }

    /* Popular Tourism Cities Grid (热门旅游城市网格) */
    .tourism-cities-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    @media (max-width: 900px) {
      .tourism-cities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 500px) {
      .tourism-cities-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .tourism-city-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.15s ease;
    }
    .tourism-city-card:hover {
      border-color: #0284c7;
      background: #f8fafc;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.08);
      transform: translateY(-1px);
    }
    .tourism-city-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .tourism-city-name {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }
    .tourism-city-temp {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
    }
    .tourism-city-spots {
      font-size: 11px;
      color: #64748b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
    }
    .tourism-city-badge {
      font-size: 11px;
      color: #059669;
      background: #ecfdf5;
      padding: 1px 6px;
      border-radius: 3px;
      align-self: flex-start;
    }

    /* Category Pills Grid */
    .scenic-cat-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }
    @media (max-width: 900px) {
      .scenic-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 500px) {
      .scenic-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    .scenic-cat-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 10px;
      text-align: center;
      text-decoration: none;
      color: inherit;
      transition: all 0.15s ease;
    }
    .scenic-cat-card:hover {
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.08);
    }
    .scenic-cat-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: #e0f2fe;
      color: #0284c7;
      margin-bottom: 6px;
    }
    .scenic-cat-name {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2px;
    }
    .scenic-cat-count {
      font-size: 11px;
      color: #64748b;
    }

    /* Single Spot Hero Header */
    .spot-detail-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }
    .spot-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .spot-detail-title-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .spot-detail-name {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
      margin: 0;
    }
    .spot-detail-subname {
      font-size: 15px;
      color: #0284c7;
      font-weight: 600;
    }
   .spot-detail-badges {
     display: flex;
     gap: 6px;
     align-items: center;
   }
   .spot-meta-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px 16px;
      margin-bottom: 16px;
      font-size: 13px;
    }
   .spot-meta-item {
     display: flex;
     align-items: baseline;
      gap: 12px;
     line-height: 1.6;
   }
    .spot-meta-item strong,
    .spot-meta-label {
     color: #475569;
     font-weight: 600;
     min-width: 82px;
     flex-shrink: 0;
   }
    .spot-meta-item span,
    .spot-meta-val {
     color: #0f172a;
     font-weight: 500;
     flex: 1;
     min-width: 0;
     word-break: break-all;
   }
    .spot-comfort-tag {
      color: #059669;
      font-weight: 700;
      margin-right: 6px;
    }
    .spot-comfort-desc {
      color: #475569;
      font-weight: 400;
    }
    @media (max-width: 640px) {
      .spot-meta-item {
        flex-direction: column;
        gap: 2px;
      }
      .spot-meta-item strong,
      .spot-meta-label {
        min-width: auto;
      }
    }

    /* Spot Microclimate Bar */
    .spot-microclimate-bar {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      border-radius: 8px;
      padding: 16px 20px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }
    .spot-weather-primary {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .spot-weather-temp-lg {
      font-size: 32px;
      font-weight: 800;
      line-height: 1;
    }
    .spot-weather-cond-lg {
      font-size: 16px;
      font-weight: 600;
      color: #e0f2fe;
    }
    .spot-weather-stats-list {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 12px;
    }
    .spot-w-stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .spot-w-stat-item span {
      color: #bae6fd;
      font-size: 11px;
    }
    .spot-w-stat-item strong {
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
    }

    /* Filter chip buttons */
    .scenic-filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .scenic-filter-chip {
      padding: 5px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      background: #ffffff;
      font-size: 12px;
      color: #475569;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.15s ease;
    }
    .scenic-filter-chip:hover {
      border-color: #0284c7;
      color: #0284c7;
    }
    .scenic-filter-chip.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      font-weight: 600;
    }

    /* Single Spot Top Weather Primary Icon Fix */
    .spot-weather-primary .w-icon {
      width: 44px;
      height: 44px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
    }

    /* ==========================================================================
       景区未来 3 天出游天气精选卡片 (Scenic Spot 3-Day Forecast Cards)
       ========================================================================== */
    .spot-3day-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 14px;
    }

    .spot-3day-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: all 0.2s ease-in-out;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    }

    .spot-3day-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px -3px rgba(2, 132, 199, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      border-color: #7dd3fc;
    }

    /* 顶部微高亮边线与背景微渐变 */
    .spot-3day-card.is-today {
      border-top: 3px solid #0284c7;
      background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 42%);
    }

    .spot-3day-card.is-tomorrow {
      border-top: 3px solid #0ea5e9;
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 42%);
    }

    .spot-3day-card.is-third {
      border-top: 3px solid #94a3b8;
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 42%);
    }

    /* 卡片头部 */
    .spot-3day-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #e2e8f0;
    }

    .spot-3day-date-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .spot-3day-daytag {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      padding: 2px 8px;
      border-radius: 4px;
      background: #e2e8f0;
      line-height: 1.3;
    }

    .spot-3day-card.is-today .spot-3day-daytag {
      background: #0284c7;
      color: #ffffff;
    }

    .spot-3day-card.is-tomorrow .spot-3day-daytag {
      background: #e0f2fe;
      color: #0369a1;
    }

    .spot-3day-date {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    /* 出游适宜度胶囊徽章 */
    .spot-3day-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      line-height: 1.3;
    }

    .spot-badge-sunny {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .spot-badge-cloudy {
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .spot-badge-overcast {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

    .spot-badge-rain {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .spot-badge-snow {
      background: #f0fdfa;
      color: #0f766e;
      border: 1px solid #99f6e4;
    }

    .spot-badge-default {
      background: #f8fafc;
      color: #334155;
      border: 1px solid #e2e8f0;
    }

    /* 中部天气核心区 */
    .spot-3day-weather-body {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 8px 0 12px;
    }

    .spot-3day-icon-wrap {
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .spot-3day-icon {
      width: 48px;
      height: 48px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .spot-3day-condition {
      display: flex;
      flex-direction: column;
      text-align: left;
    }

    .spot-3day-cond-main {
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.25;
    }

    .spot-3day-cond-sub {
      font-size: 12px;
      color: #64748b;
      margin-top: 3px;
    }

    /* 气温区间与温差贴士 */
    .spot-3day-temp-section {
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 6px;
      padding: 10px 12px;
      margin-bottom: 12px;
    }

    .spot-3day-temp-display {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .spot-temp-item {
      display: flex;
      flex-direction: column;
    }

    .spot-temp-label {
      font-size: 11px;
      color: #94a3b8;
      font-weight: 500;
      margin-bottom: 2px;
    }

    .spot-temp-high .spot-temp-num {
      font-size: 19px;
      font-weight: 800;
      color: #ea580c;
      line-height: 1;
    }

    .spot-temp-low .spot-temp-num {
      font-size: 19px;
      font-weight: 700;
      color: #0284c7;
      line-height: 1;
    }

    .spot-temp-num small {
      font-size: 12px;
      font-weight: 600;
      margin-left: 1px;
    }

    .spot-temp-divider {
      flex: 1;
      margin: 0 12px;
      display: flex;
      align-items: center;
    }

    .spot-temp-range-bar {
      height: 4px;
      width: 100%;
      border-radius: 2px;
      background: linear-gradient(90deg, #38bdf8 0%, #fb923c 100%);
      opacity: 0.85;
    }

    .spot-3day-temp-hint {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: #64748b;
      margin-top: 8px;
      padding-top: 6px;
      border-top: 1px solid #e2e8f0;
    }

    /* 底部出行参数胶囊 */
    .spot-3day-card-footer {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: auto;
    }

    .spot-3day-meta-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #475569;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 5px 8px;
      line-height: 1.2;
    }

    .spot-3day-meta-pill svg {
      flex-shrink: 0;
    }

    @media (max-width: 768px) {
      .spot-3day-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
       Administrative Division System (行政区划五级页面体系)
       ========================================================================== */
    .district-banner {
      background: linear-gradient(135deg, #0369a1 0%, #0284c7 60%, #38bdf8 100%);
      border-radius: 8px;
      padding: 24px 28px;
      color: #ffffff;
      margin-bottom: 20px;
      box-shadow: 0 4px 16px rgba(2, 132, 199, 0.15);
    }
    .district-banner-title {
      font-size: 22px;
      font-weight: 700;
      margin: 0 0 8px 0;
      color: #ffffff;
      line-height: 1.3;
    }
    .district-banner-desc {
      font-size: 13px;
      color: #e0f2fe;
      line-height: 1.6;
      margin: 0 0 16px 0;
      max-width: 900px;
    }
    .district-stat-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .district-stat-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.28);
      backdrop-filter: blur(4px);
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      color: #ffffff;
    }
    .district-stat-pill strong {
      font-weight: 700;
      color: #ffffff;
    }

    /* 4-Item Geo Attribute Matrix */
    .geo-attr-matrix {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }
    .geo-attr-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 12px 14px;
    }
    .geo-attr-box .label {
      font-size: 12px;
      color: #64748b;
      margin-bottom: 4px;
    }
    .geo-attr-box .val {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
      display: flex;
      align-items: baseline;
      gap: 6px;
    }
    .geo-attr-box .val code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      background: #e2e8f0;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 14px;
      color: #0369a1;
    }

    /* Regional Accordion / Grouping Block */
    .region-group-band {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 16px 18px;
      margin-bottom: 16px;
    }
    .region-group-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f1f5f9;
    }
    .region-group-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }
    .region-group-count {
      font-size: 12px;
      color: #64748b;
    }

    /* Province Cards Grid in Channel Index */
    .prov-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .prov-district-card {
      display: flex;
      flex-direction: column;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 12px 14px;
      text-decoration: none;
      color: inherit;
      transition: all 0.15s ease;
    }
    .prov-district-card:hover {
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
      transform: translateY(-1px);
    }
    .prov-district-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .prov-district-name {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }
    .prov-district-code {
      font-family: ui-monospace, monospace;
      font-size: 12px;
      color: #0284c7;
      font-weight: 600;
      background: #e0f2fe;
      padding: 1px 6px;
      border-radius: 4px;
    }
    .prov-district-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #64748b;
    }

    /* District Data Table */
    .district-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
    }
    .district-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      text-align: left;
    }
    .district-table th {
      background: #f8fafc;
      color: #475569;
      font-weight: 600;
      padding: 10px 12px;
      border-bottom: 1px solid #e2e8f0;
      white-space: nowrap;
    }
    .district-table td {
      padding: 10px 12px;
      border-bottom: 1px solid #f1f5f9;
      color: #334155;
      vertical-align: middle;
    }
    .district-table tr:hover td {
      background: #f8fafc;
    }
    .district-table code {
      font-family: ui-monospace, monospace;
      font-size: 12px;
      background: #f1f5f9;
      color: #0369a1;
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* Code Breakdown Visualizer */
    .code-breakdown-box {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 6px;
      padding: 14px 18px;
      margin-bottom: 16px;
    }
    .code-digits-wrap {
      display: flex;
      gap: 6px;
      font-family: ui-monospace, monospace;
      font-size: 18px;
      font-weight: 700;
    }
    .code-digit-chunk {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      border: 1px solid #86efac;
      border-radius: 4px;
      padding: 4px 8px;
      color: #166534;
      line-height: 1.1;
    }
    .code-digit-chunk small {
      font-size: 10px;
      font-weight: 500;
      color: #15803d;
      margin-top: 3px;
    }

    @media (max-width: 960px) {
      .geo-attr-matrix {
        grid-template-columns: repeat(2, 1fr);
      }
      .prov-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 600px) {
      .geo-attr-matrix {
        grid-template-columns: 1fr;
      }
      .prov-cards-grid {
        grid-template-columns: 1fr;
      }
      .code-breakdown-box {
        flex-direction: column;
        align-items: flex-start;
      }
    }

/* ==========================================================================
   World Time System (世界时间高保真样式体系)
   ========================================================================== */
.wt-hero-banner {
  background: linear-gradient(135deg, #091e3a 0%, #0f2b48 50%, #0369a1 100%);
  border-radius: 8px;
  padding: 24px 28px;
  color: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(3, 105, 161, 0.16);
}
.wt-hero-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #ffffff;
}
.wt-hero-desc {
  font-size: 13px;
  color: #bae6fd;
  line-height: 1.6;
  margin: 0 0 16px 0;
  max-width: 960px;
}
/* Dual Master Clocks */
.wt-master-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
.wt-master-box {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}
.wt-master-label {
  font-size: 13px;
  font-weight: 600;
  color: #e0f2fe;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wt-master-digits {
  font-size: 34px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.wt-master-digits i {
  font-style: normal;
  font-size: 20px;
  color: #7dd3fc;
  font-weight: 500;
}
.wt-master-meta {
  font-size: 12px;
  color: #bae6fd;
}

/* World Clock Wall */
.wt-wall-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .wt-wall-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .wt-wall-grid { grid-template-columns: repeat(2, 1fr); }
  .wt-master-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wt-wall-grid { grid-template-columns: 1fr; }
}

.wt-clock-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.wt-clock-card:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);
  transform: translateY(-2px);
}
.wt-clock-card.is-night {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border-color: #334155;
  color: #ffffff;
}
.wt-clock-card.is-night:hover {
  border-color: #38bdf8;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.18);
}
.wt-clock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.wt-clock-city {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.wt-clock-card.is-night .wt-clock-city {
  color: #ffffff;
}
.wt-clock-country {
  font-size: 12px;
  color: #64748b;
}
.wt-clock-card.is-night .wt-clock-country {
  color: #94a3b8;
}
.wt-clock-time-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
}
.wt-clock-large {
  font-size: 26px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0284c7;
  letter-spacing: 0.5px;
}
.wt-clock-card.is-night .wt-clock-large {
  color: #38bdf8;
}
.wt-clock-sec {
  font-size: 14px;
  font-style: normal;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
}
.wt-clock-sub-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 8px;
}
.wt-clock-card.is-night .wt-clock-sub-row {
  color: #94a3b8;
}
.wt-clock-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
  font-size: 11px;
}
.wt-clock-card.is-night .wt-clock-footer {
  border-top-color: #334155;
}

/* Badges */
.diff-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.diff-pill.diff-fast {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.diff-pill.diff-slow {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.diff-pill.diff-same {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.wt-clock-card.is-night .diff-pill.diff-fast {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.4);
}
.wt-clock-card.is-night .diff-pill.diff-slow {
  background: rgba(249, 115, 22, 0.2);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.4);
}
.wt-clock-card.is-night .diff-pill.diff-same {
  background: rgba(14, 165, 233, 0.2);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.4);
}

.gmt-chip {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #64748b;
}
.wt-clock-card.is-night .gmt-chip {
  color: #94a3b8;
}

.dst-tag {
  color: #e11d48;
  font-weight: 600;
  margin-left: 2px;
}

/* 24h & Global Matrix Tables */
.wt-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.wt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
}
.wt-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.wt-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  white-space: nowrap;
}
.wt-table tr:hover td {
  background: #f8fafc;
}
.wt-table td.highlight-bj {
  font-weight: 700;
  color: #0284c7;
  background: #f0f9ff;
}
.wt-table tr:hover td.highlight-bj {
  background: #e0f2fe;
}
.shift-tag {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}
.shift-tag.shift-next {
  background: #fee2e2;
  color: #dc2626;
}
.shift-tag.shift-prev {
  background: #fef3c7;
  color: #d97706;
}

/* Continents Group */
.wt-continent-band {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.wt-continent-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.wt-continent-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.wt-countries-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (max-width: 1024px) {
  .wt-countries-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .wt-countries-grid { grid-template-columns: repeat(2, 1fr); }
}
.wt-country-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  color: #334155;
  transition: all 0.15s ease;
}
.wt-country-pill:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}
.wt-country-pill:hover span {
  color: #ffffff;
}

/* City Detail Hero Clock */
.wt-city-hero-box {
  background: linear-gradient(135deg, #091e3a 0%, #1e293b 60%, #0369a1 100%);
  border-radius: 8px;
  padding: 24px 28px;
  color: #ffffff;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(3, 105, 161, 0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.wt-city-hero-left h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #ffffff;
}
.wt-city-hero-left p {
  font-size: 13px;
  color: #bae6fd;
  margin: 0;
}
.wt-city-hero-center {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.wt-city-big-time {
  font-size: 46px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #ffffff;
  letter-spacing: 1px;
  line-height: 1;
}
.wt-city-big-sec {
  font-size: 22px;
  font-style: normal;
  color: #7dd3fc;
  font-family: ui-monospace, monospace;
}
.wt-city-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* 24h Conversion Status Badges */
.work-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.work-badge.status-work {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.work-badge.status-sleep {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.work-badge.status-morning {
  background: #fefce8;
  color: #b45309;
  border: 1px solid #fef08a;
}
.work-badge.status-call {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

/* City & Country Attributes Matrix */
.wt-attr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .wt-attr-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .wt-attr-grid { grid-template-columns: 1fr; }
}
.wt-attr-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.wt-attr-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}
.wt-attr-value {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.wt-attr-value.highlight {
  color: #0284c7;
}
.wt-attr-value.code-font {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}


/* Hot Countries Quick Grid */
.wt-hot-countries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1200px) {
  .wt-hot-countries-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .wt-hot-countries-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .wt-hot-countries-grid { grid-template-columns: repeat(2, 1fr); }
}
.wt-hot-country-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.18s ease;
}
.wt-hot-country-card:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
  transform: translateY(-1px);
}
.hc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hc-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.hc-code {
  font-size: 11px;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
}
.hc-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hc-time {
  font-size: 18px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #0284c7;
}
.hc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #64748b;
  border-top: 1px dashed #f1f5f9;
  padding-top: 4px;
}

/* China 34 Provinces Directory */
.wt-prov-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 16px;
}
.wt-prov-quick-pill {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.wt-prov-quick-pill:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}
.wt-prov-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.wt-prov-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.wt-prov-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.wt-prov-cities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wt-prov-city-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
  color: #334155;
  text-decoration: none;
  transition: all 0.15s ease;
}
.wt-prov-city-pill:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}
.wt-prov-city-pill .pill-badge {
  font-size: 10px;
  color: #94a3b8;
}
.wt-prov-city-pill:hover .pill-badge {
  color: #bae6fd;
}

/* Multi-Timezone Box */
.wt-tz-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.wt-tz-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

/* Full City Table */
.wt-all-city-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wt-all-city-table th {
  background: #f8fafc;
  color: #475569;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  text-align: left;
  font-weight: 600;
}
.wt-all-city-table td {
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  color: #334155;
}
.wt-all-city-table tr:hover td {
  background: #f0f9ff;
}

/* ========================================================
   Route Channel Styles (交通路线频道专属组件)
   ======================================================== */

/* 1. 顶部两地快捷路线查询器 Hero */
.route-hero-search {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%);
  border-radius: var(--radius);
  padding: 24px 28px;
  color: #ffffff;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}
.route-hero-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.route-hero-desc {
  font-size: 13px;
  color: #e0f2fe;
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 860px;
}
.route-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}
.route-input-group {
  flex: 1;
  min-width: 160px;
  position: relative;
}
.route-input-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.route-input-group input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease;
}
.route-input-group input:focus {
  border-color: #0284c7;
}
.route-swap-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0284c7;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
  margin-top: 14px;
  flex-shrink: 0;
}
.route-swap-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  transform: rotate(180deg);
}
.route-submit-btn {
  background: #f97316;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 14px;
  white-space: nowrap;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.route-submit-btn:hover {
  background: #ea580c;
}
.route-quick-tags {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #e0f2fe;
}
.route-tag-pill {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.route-tag-pill:hover {
  background: #ffffff;
  color: #0284c7;
}

/* 2. 详情页 4 核心指标看板 */
.route-metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .route-metrics-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}
.route-metric-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.route-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.route-metric-card .rm-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}
.route-metric-card .rm-value {
  font-size: 26px;
  font-weight: 800;
  margin-top: 4px;
  line-height: 1.1;
}
.route-metric-card .rm-unit {
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
}
.route-metric-card .rm-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
}

/* 3. 多交通方式横向对比表格与卡片 */
.route-modes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 12px;
}
.route-modes-table th {
  background: #f1f5f9;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  text-align: left;
  font-weight: 700;
  color: #475569;
}
.route-modes-table td {
  padding: 12px;
  border: 1px solid #e2e8f0;
  color: #334155;
  vertical-align: middle;
}
.route-modes-table tr:hover td {
  background: #f8fafc;
}
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}
.mode-plane { background: #e0f2fe; color: #0369a1; }
.mode-hightrain { background: #dcfce7; color: #15803d; }
.mode-slowtrain { background: #fef3c7; color: #b45309; }
.mode-car { background: #ffedd5; color: #c2410c; }
.mode-coach { background: #f1f5f9; color: #475569; }

/* 4. 途经地级市进度条链条 */
.route-along-timeline {
  position: relative;
  margin-top: 16px;
  padding-left: 8px;
}
.along-city-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px dashed #e2e8f0;
  transition: background 0.15s ease;
}
.along-city-row:hover {
  background: #f8fafc;
}
.along-idx {
  width: 22px;
  height: 22px;
  background: #0284c7;
  color: #ffffff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.along-city-name {
  width: 120px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  flex-shrink: 0;
}
.along-city-name a {
  color: #0f172a;
}
.along-city-name a:hover {
  color: #0284c7;
}
.along-progress-wrap {
  flex: 1;
  background: #e2e8f0;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  min-width: 80px;
}
.along-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #0284c7);
  border-radius: 4px;
}
.along-stat {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}
.along-action-links {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.along-link-btn {
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s ease;
}
.along-link-btn:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

/* 5. 全国 24 大核心交通动脉卡片矩阵 */
.route-trunk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.route-trunk-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.15s ease;
  text-decoration: none;
  color: inherit;
}
.route-trunk-card:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
  transform: translateY(-2px);
}
.trunk-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.trunk-cities {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}
.trunk-name {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
}
.trunk-meta-row {
  display: flex;
  justify-content: space-between;
  background: #f8fafc;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  color: #475569;
}
.trunk-meta-row strong {
  color: #0284c7;
}

/* 6. 省会出发网络矩阵 */
.route-capital-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.route-capital-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 14px;
}
.capital-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 10px;
}
.capital-prov-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.capital-city-badge {
  font-size: 11px;
  background: #e0f2fe;
  color: #0284c7;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.capital-routes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.capital-route-pill {
  font-size: 12px;
  padding: 3px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  color: #334155;
  text-decoration: none;
  transition: all 0.15s ease;
}
.capital-route-pill:hover {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

/* 7. 高速免费通行日历卡片 */
.route-free-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.free-cal-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.free-cal-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.free-cal-days {
  font-size: 18px;
  font-weight: 800;
  color: #10b981;
  margin: 4px 0;
}
.free-cal-dates {
  font-size: 11px;
  color: #64748b;
}

/* 8. 常见出行问答 FAQ 卡片 */
.route-faq-item {
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 0;
}
.route-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.route-faq-q {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.route-faq-q::before {
  content: "Q";
  display: inline-flex;
  width: 20px;
  height: 20px;
  background: #0284c7;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.route-faq-a {
  font-size: 13px;
  color: #475569;
  line-height: 1.7;
  padding-left: 28px;
}


/* ==========================================================================
   火车时刻查询模块专项样式 (Train Schedule Module) - Weather.vip
   ========================================================================== */
.train-hero-banner {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 45%, #0f172a 100%);
  color: #fff;
  padding: 44px 0 38px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.train-hero-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.train-hero-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.train-hero-desc {
  font-size: 15px;
  color: #e0f2fe;
  max-width: 820px;
  margin: 0 auto 26px;
  line-height: 1.6;
}
.train-search-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  max-width: 780px;
  margin: 0 auto 20px;
  flex-wrap: wrap;
}
.train-search-item {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 240px;
}
.train-search-item.border-r {
  border-right: 1px solid #e2e8f0;
  padding-right: 12px;
}
.train-search-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  color: #0f172a;
  background: transparent;
}
.train-search-btn {
  background: #0284c7;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.train-search-btn:hover {
  background: #0369a1;
}
.train-search-btn.dark {
  background: #0f172a;
}
.train-search-btn.dark:hover {
  background: #1e293b;
}

/* 车型 Badge 徽章系统 */
.badge-train {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.2;
}
.badge-train-g { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; } /* 高铁 红色 */
.badge-train-d { background: #dcfce7; color: #15803d; border: 1px solid #86efac; } /* 动车 绿色 */
.badge-train-c { background: #e0f2fe; color: #0284c7; border: 1px solid #7dd3fc; } /* 城际 天蓝 */
.badge-train-k { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; } /* 快速 橙黄 */
.badge-train-z { background: #f3e8ff; color: #7e22ce; border: 1px solid #d8b4fe; } /* 直达 紫色 */
.badge-train-t { background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; } /* 特快 蓝灰 */
.badge-train-s { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; } /* 市郊 活力橙 */
.badge-train-y { background: #ccfbf1; color: #0f766e; border: 1px solid #5eead4; } /* 旅游 墨绿 */

/* 24 大核心高铁干线网格 */
.train-routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.train-route-card {
  display: block;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.train-route-card:hover {
  border-color: #38bdf8;
  background: #f0f9ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(2, 132, 199, 0.08);
}
.train-route-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.train-route-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.train-route-card-meta {
  font-size: 13px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
}

/* 车型分类矩阵与 Tab */
.train-matrix-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.train-matrix-tab-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.train-matrix-tab-btn:hover {
  background: #e0f2fe;
  color: #0284c7;
}
.train-matrix-tab-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}
.train-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.train-code-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.train-code-card:hover {
  background: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* 省份火车站名录卡片 */
.train-prov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.train-prov-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
}
.train-prov-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.train-station-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.station-tag {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: #334155;
  text-decoration: none;
  transition: background 0.15s;
}
.station-tag em {
  font-style: normal;
  color: #0284c7;
  font-size: 11px;
  margin-left: 4px;
  font-weight: 600;
}
.station-tag:hover {
  background: #e0f2fe;
  color: #0284c7;
}

/* 车次详情页经停站表格与时间轴 */
.train-journey-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 24px 20px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.train-journey-hub {
  text-align: center;
  flex: 1;
  min-width: 140px;
}
.train-journey-mid {
  text-align: center;
  flex: 0 0 200px;
  position: relative;
}
.train-journey-line {
  height: 2px;
  background: #38bdf8;
  width: 100%;
  position: relative;
  margin: 12px 0 8px;
}
.train-journey-stops-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #0284c7;
  color: #0284c7;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  white-space: nowrap;
}

/* 经停站点数据表 */
.train-stops-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 14px;
}
.train-stops-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
}
.train-stops-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.train-stops-table tr:hover td {
  background: #f8fafc;
}
.train-stops-table td.st-seq {
  color: #94a3b8;
  font-weight: 600;
  width: 60px;
}
.train-stops-table td.st-name {
  font-weight: 700;
  color: #0f172a;
}
.train-stops-table tr.st-start td.st-name {
  color: #0284c7;
}
.train-stops-table tr.st-end td.st-name {
  color: #15803d;
}

/* 两地气象实况对比看板 */
.train-weather-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 18px;
  margin-top: 14px;
}
.train-weather-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e2e8f0;
}
.train-weather-col {
  text-align: center;
  flex: 1;
  min-width: 130px;
}
.train-weather-col .city {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.train-weather-col .temp {
  font-size: 26px;
  font-weight: 800;
  color: #0284c7;
}
.train-weather-col .cond {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}
.train-weather-tip {
  font-size: 13px;
  color: #0369a1;
  background: #e0f2fe;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 线路直达车次列表 */
.train-line-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.train-line-item:hover {
  border-color: #38bdf8;
  background: #f8fafc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.train-line-no {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
}
.train-line-no strong {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}
.train-line-schedule {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  justify-content: center;
}
.train-line-schedule .point {
  text-align: center;
}
.train-line-schedule .point .time {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}
.train-line-schedule .point .station {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}
.train-line-schedule .duration {
  font-size: 12px;
  color: #0284c7;
  font-weight: 600;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 2px 8px;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .train-hero-title { font-size: 24px; }
  .train-search-box { flex-direction: column; align-items: stretch; }
  .train-search-item.border-r { border-right: none; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; padding-right: 0; }
  .train-journey-card { flex-direction: column; text-align: center; }
  .train-line-item { flex-direction: column; gap: 12px; align-items: flex-start; }
  .train-line-schedule { width: 100%; justify-content: space-between; }
}

/* 火车时刻分页组件 */
.train-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 24px 0 12px;
  flex-wrap: wrap;
}
.train-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}
.train-page-link:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #f0f9ff;
}
.train-page-link.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  font-weight: 700;
}
.train-page-info {
  font-size: 13px;
  color: #64748b;
  margin: 0 10px;
}

/* 车站与省份卡片扩展样式 */
.station-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  text-decoration: none;
  color: #334155;
  transition: all 0.15s ease;
}
.station-tag:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #f0f9ff;
  transform: translateY(-1px);
}
.station-tag.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}
.station-tag.active strong,
.station-tag.active em {
  color: #ffffff !important;
}

.train-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.train-city-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.18s ease;
}
.train-city-card:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
  transform: translateY(-2px);
}
.train-city-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.train-city-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.train-city-card:hover .train-city-card-name {
  color: #0284c7;
}
.train-city-card-meta {
  font-size: 12px;
  color: #64748b;
  display: flex;
  gap: 10px;
}
.train-city-card-stations {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}