/* 天气页面特定样式 - 基于common.css主题系统 */  /* 天气页面容器优化 - 更宽 */ body.weather-page .container {     max-width: 1500px;     margin: 0 auto;     padding: 0 24px; }  body.weather-page main {     padding-top: 110px;     padding-bottom: 50px; }  /* 页面标题区域 */ .section-header {     margin-bottom: 30px;     text-align: center; }  .section-header h2 {     font-size: 2rem;     font-weight: 700;     color: var(--text-primary);     letter-spacing: 1px;     background: var(--gradient-primary);     -webkit-background-clip: text;     -webkit-text-fill-color: transparent;     background-clip: text; }  /* 搜索容器 */ .search-container {     display: flex;     justify-content: center;     align-items: stretch;     gap: 8px;     margin-bottom: 20px;     width: 100%;     padding: 15px;     background: rgba(0, 0, 0, 0.02);     border-radius: var(--radius-md);     border: 1px solid var(--border-color); }  [data-theme="dark"] .search-container {     background: rgba(255, 255, 255, 0.03); }  #city-input {     padding: 10px 16px;     background: var(--card-bg);     border: 2px solid var(--border-color);     border-radius: 50px;     flex: 1;     min-width: 0;     max-width: 350px;     font-size: 13px;     color: var(--text-primary);     outline: none;     transition: all var(--transition-normal); }  #city-input::placeholder {     color: var(--text-muted); }  #city-input:focus {     border-color: var(--primary-color);     box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15); }  /* 搜索和定位按钮 */ #search-btn, #location-btn {     padding: 10px 16px;     background: var(--gradient-primary);     color: white;     border: none;     border-radius: 50px;     cursor: pointer;     font-size: 12px;     font-weight: 600;     transition: all var(--transition-normal);     display: flex;     align-items: center;     justify-content: center;     gap: 5px;     white-space: nowrap;     flex-shrink: 0;     box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3); }  #search-btn:hover, #location-btn:hover {     transform: translateY(-2px);     box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }  #search-btn:active, #location-btn:active {     transform: translateY(0); }  #location-btn {     background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));     box-shadow: 0 3px 10px rgba(118, 75, 162, 0.3); }  #location-btn:hover {     box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4); }  #location-btn:disabled {     opacity: 0.5;     cursor: not-allowed;     transform: none;     box-shadow: none; }  #location-btn i {     font-size: 12px; }  #location-btn.loading i {     animation: spin 1s linear infinite; }  @keyframes spin {     from { transform: rotate(0deg); }     to { transform: rotate(360deg); } }  /* 当前天气 */ .current-weather {     text-align: center;     padding: 50px 0;     border-bottom: 1px solid var(--border-color);     margin-bottom: 35px;     background: linear-gradient(180deg, rgba(102, 126, 234, 0.03), transparent);     border-radius: var(--radius-lg) var(--radius-lg) 0 0; }  .location h2 {     font-size: 2.8rem;     font-weight: 700;     color: var(--text-primary);     margin-bottom: 10px;     letter-spacing: 1px; }  #date-time {     font-size: 1.05rem;     color: var(--text-secondary);     margin-bottom: 30px;     font-weight: 500; }  .weather-info {     display: flex;     justify-content: center;     align-items: center;     gap: 35px;     margin-bottom: 30px;     flex-wrap: wrap; }  .temp {     font-size: 5.5rem;     font-weight: 700;     color: var(--text-primary);     line-height: 1;     letter-spacing: -2px; }  .temp span:last-child {     font-size: 2.2rem;     color: var(--text-secondary);     vertical-align: super; }  .condition {     display: flex;     flex-direction: column;     align-items: center;     gap: 8px;     font-size: 1.6rem;     color: var(--text-primary);     font-weight: 600; }  #weather-icon {     font-size: 4rem;     background: var(--gradient-primary);     -webkit-background-clip: text;     -webkit-text-fill-color: transparent;     background-clip: text;     filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3)); }  .details {     display: flex;     justify-content: center;     gap: 45px;     flex-wrap: wrap;     padding: 25px;     background: rgba(0, 0, 0, 0.02);     border-radius: var(--radius-lg);     border: 1px solid var(--border-color); }  [data-theme="dark"] .details {     background: rgba(255, 255, 255, 0.03); }  .detail-item {     display: flex;     flex-direction: column;     align-items: center;     gap: 6px;     font-size: 0.95rem;     color: var(--text-secondary);     font-weight: 500; }  .detail-item i {     color: var(--primary-color);     font-size: 1.3rem;     margin-bottom: 2px; }  /* 天气预报区域 */ .forecast h3 {     text-align: center;     font-size: 1.4rem;     color: var(--text-primary);     margin-bottom: 30px;     font-weight: 700;     letter-spacing: 0.5px; }  .forecast h3 span {     font-weight: 400;     opacity: 0.7; }  /* 温度曲线图 */ .temperature-chart-container {     background: var(--card-bg);     border: 1px solid var(--border-color);     border-radius: var(--radius-lg);     padding: 25px;     margin-bottom: 30px;     box-shadow: var(--shadow-sm); }  .chart-header {     display: flex;     justify-content: space-between;     align-items: center;     margin-bottom: 20px;     padding-bottom: 15px;     border-bottom: 1px solid var(--border-color); }  .chart-title {     font-size: 1.1rem;     font-weight: 700;     color: var(--text-primary);     letter-spacing: 0.3px; }  .chart-legend {     display: flex;     gap: 20px; }  .legend-item {     display: flex;     align-items: center;     gap: 6px;     font-size: 0.9rem;     color: var(--text-secondary);     font-weight: 500; }  .legend-color {     width: 14px;     height: 14px;     border-radius: 4px;     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }  .legend-color.max {     background: linear-gradient(135deg, #ff6b6b, #ee5a6f); }  .legend-color.min {     background: linear-gradient(135deg, #4facfe, #00f2fe); }  .temperature-chart {     width: 100%;     height: 280px;     position: relative; }  .temperature-chart canvas {     width: 100%;     height: 100%; }  /* 预报卡片区域 - 7 天居中显示 */ .forecast-scroll-wrapper {     margin: 0;     padding: 0;     overflow: visible; }  .forecast-cards {     display: flex;     justify-content: center;     align-items: stretch;     gap: 12px;     padding: 20px 0 30px;     flex-wrap: wrap; }  .forecast-card {     flex: 0 0 auto;     width: 160px;     background: var(--card-bg);     border: 1px solid var(--border-color);     border-radius: var(--radius-lg);     padding: 24px 16px;     text-align: center;     transition: all var(--transition-normal);     position: relative;     overflow: hidden; }  .forecast-card::before {     content: '';     position: absolute;     top: 0;     left: 0;     right: 0;     height: 3px;     background: var(--gradient-primary);     opacity: 0;     transition: opacity var(--transition-normal); }  .forecast-card:hover {     border-color: transparent;     transform: translateY(-5px);     box-shadow: var(--shadow-lg); }  .forecast-card:hover::before {     opacity: 1; }  .forecast-card.predicted-data {     border-color: rgba(138, 43, 226, 0.4);     background: linear-gradient(135deg, var(--card-bg), rgba(138, 43, 226, 0.08)); }  .forecast-card.predicted-data::before {     background: linear-gradient(135deg, #8a2be2, #9b59b6); }  .forecast-date {     font-size: 1.05rem;     font-weight: 700;     color: var(--text-primary);     margin-bottom: 12px;     letter-spacing: 0.5px; }  .data-badge {     display: inline-block;     font-size: 0.7rem;     padding: 3px 8px;     border-radius: 6px;     margin-top: 6px;     font-weight: 600;     text-transform: uppercase;     letter-spacing: 0.3px; }  .data-badge.real {     background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 212, 255, 0.25));     color: #00e676;     border: 1px solid rgba(0, 255, 136, 0.4);     box-shadow: 0 2px 8px rgba(0, 255, 136, 0.15); }  .data-badge.predicted {     background: linear-gradient(135deg, rgba(138, 43, 226, 0.25), rgba(155, 89, 182, 0.25));     color: #c9a8ff;     border: 1px solid rgba(138, 43, 226, 0.4);     box-shadow: 0 2px 8px rgba(138, 43, 226, 0.15); }  .forecast-icon {     font-size: 2.8rem;     margin: 15px 0;     color: var(--primary-color);     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); }  .forecast-desc {     font-size: 0.95rem;     color: var(--text-secondary);     margin-bottom: 12px;     font-weight: 500;     min-height: 40px;     display: flex;     align-items: center;     justify-content: center; }  .forecast-temp {     display: flex;     justify-content: center;     gap: 12px;     margin-bottom: 10px;     padding: 8px 0;     border-top: 1px solid var(--border-color);     border-bottom: 1px solid var(--border-color);     background: rgba(0, 0, 0, 0.02); }  [data-theme="dark"] .forecast-temp {     background: rgba(255, 255, 255, 0.03); }  .forecast-temp-max {     font-size: 1.2rem;     font-weight: 700;     color: #ff6b6b;     text-shadow: 0 1px 2px rgba(255, 107, 107, 0.2); }  .forecast-temp-min {     font-size: 1.2rem;     font-weight: 700;     color: #4facfe;     text-shadow: 0 1px 2px rgba(79, 172, 254, 0.2); }  .forecast-humidity {     font-size: 0.85rem;     color: var(--text-muted);     margin-top: 8px;     font-weight: 500; }  /* 响应式优化 */ @media (max-width: 1024px) {     .forecast-card {         width: 145px;         padding: 20px 14px;     }          .forecast-icon {         font-size: 2.5rem;     } }  @media (max-width: 768px) {     .weather-info {         flex-direction: column;         gap: 20px;     }      .temp {         font-size: 4rem;     }      .details {         gap: 20px;     }      .location h2 {         font-size: 2.2rem;     }      .forecast-cards {         gap: 10px;         padding: 15px 0 25px;     }      .forecast-card {         width: calc(33.333% - 7px);         min-width: 110px;         padding: 18px 12px;     }      .forecast-icon {         font-size: 2.2rem;         margin: 12px 0;     }      .forecast-temp {         gap: 10px;         padding: 6px 0;     }      .forecast-temp-max,     .forecast-temp-min {         font-size: 1.05rem;     }      .temperature-chart {         height: 200px;     }          .chart-title {         font-size: 0.95rem;     } }  @media (max-width: 480px) {     .search-container {         flex-direction: column;         align-items: center;     }      #city-input {         max-width: 100%;         width: 100%;     }      #search-btn, #location-btn {         width: 100%;     }      .temp {         font-size: 3.5rem;     }      .location h2 {         font-size: 1.8rem;     }      .temperature-chart {         height: 180px;     }      .chart-header {         flex-direction: column;         gap: 10px;     }      .chart-title {         font-size: 0.9rem;     }      .forecast-cards {         gap: 8px;     }      .forecast-card {         width: calc(50% - 5px);         padding: 16px 10px;     }      .forecast-icon {         font-size: 2rem;         margin: 10px 0;     }      .forecast-desc {         min-height: 36px;         font-size: 0.85rem;     }      .forecast-temp-max,     .forecast-temp-min {         font-size: 1rem;     }          .data-badge {         font-size: 0.65rem;         padding: 2px 6px;     } }