/* ============ 嗨天气 - 主样式表 ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Microsoft YaHei", "SimSun", Arial, sans-serif;
    font-size: 14px; color: #333; background: #fff; line-height: 1.5;
}
a { text-decoration: none; color: #06c; }
a:hover { color: #f60; text-decoration: underline; }
ul, li { list-style: none; }
table { border-collapse: collapse; width: 100%; }
.container { width: 1000px; margin: 0 auto; }

/* ===== 顶部导航条 ===== */
.top-bar { background: #f5f5f5; border-bottom: 1px solid #e5e5e5; font-size: 12px; line-height: 30px; }
.top-links a { color: #666; margin: 0 2px; }
.top-links span { color: #ddd; margin: 0 2px; }
.top-links a:hover { color: #06c; }

/* ===== 头部 ===== */
.header { padding: 15px 0; }
.header .container { display: flex; align-items: center; gap: 20px; }
.logo { font-size: 22px; font-weight: bold; color: #06c; white-space: nowrap; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.logo i { font-size: 28px; color: #f90; }
.logo:hover { color: #06c; text-decoration: none; }

.header-city-links { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.header-city-links a { color: #333; font-size: 14px; white-space: nowrap; }
.header-city-links a:hover { color: #06c; }
.header-city-links .city-temp { color: #f60; font-weight: bold; }

.search-box { position: relative; flex: 1; max-width: 480px; min-width: 200px; display: flex; border: 2px solid #06c; height: 36px; margin-left: auto; }
.search-box input { flex: 1; padding: 0 10px; border: none; font-size: 14px; outline: none; line-height: 32px; }
.search-box button { width: 40px; background: #06c; color: #fff; border: none; cursor: pointer; font-size: 16px; }
.search-box button:hover { background: #05a; }
.search-dropdown { position: absolute; top: 100%; left: -2px; right: -2px; background: #fff; border: 1px solid #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; display: none; max-height: 300px; overflow-y: auto; }
.search-dropdown.active { display: block; }
.search-dropdown a { display: block; padding: 6px 12px; border-bottom: 1px solid #f0f0f0; color: #333; font-size: 13px; }
.search-dropdown a:hover { background: #f0f6ff; color: #06c; text-decoration: none; }

/* ===== 子标题 ===== */
.sub-title { font-size: 14px; color: #666; padding: 0; margin-bottom: 8px; }

/* ===== 面包屑 ===== */
.breadcrumb { padding: 8px 0; color: #999; font-size: 12px; border-bottom: 1px solid #e5e5e5; margin-bottom: 15px; }
.breadcrumb a { color: #666; }
.share-btns { float: right; }
.share-btns span { color: #999; }
.share-btns a { margin-left: 6px; color: #666; font-size: 12px; }
.share-btns a:hover { color: #06c; }

/* ===== 省份列表 ===== */
.section { margin-bottom: 20px; }
.section-title { font-size: 16px; font-weight: bold; color: #06c; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #e5e5e5; }
.section-desc { color: #999; margin-bottom: 12px; }
.province-list { display: flex; flex-wrap: wrap; }
.province-list li { width: 8.33%; text-align: center; margin-bottom: 2px; }
.province-list li a { display: block; padding: 6px 0; color: #333; font-size: 14px; }
.province-list li a:hover { background: #f0f6ff; color: #06c; text-decoration: none; }

/* ===== 城市索引 ===== */
.city-row { display: flex; padding: 6px 0; border-bottom: 1px dotted #e5e5e5; align-items: flex-start; }
.city-row:last-child { border-bottom: none; }
.city-letter { width: 28px; font-weight: bold; color: #06c; font-size: 14px; flex-shrink: 0; padding-top: 2px; }
.city-links { flex: 1; display: flex; flex-wrap: wrap; }
.city-links a { padding: 2px 6px; color: #333; font-size: 14px; white-space: nowrap; }
.city-links a:hover { color: #06c; text-decoration: underline; }

/* ===== 城市网格 ===== */
.city-grid { display: flex; flex-wrap: wrap; }
.city-grid li { width: 20%; }
.city-grid a { display: block; padding: 6px 8px; color: #333; font-size: 14px; }
.city-grid a:hover { background: #f0f6ff; color: #06c; text-decoration: none; }

/* ============ 城市详情页 ============ */
.weather-detail { display: flex; border: 1px solid #e5e5e5; }
.weather-main { flex: 1; min-width: 0; padding: 20px; }

/* 当前天气 */
.current-weather { margin-bottom: 0; }
.current-header { margin-bottom: 10px; }
.current-header h2 { font-size: 22px; color: #333; display: inline; }
.current-header .date { font-size: 12px; color: #999; margin-left: 8px; }
.current-body { padding: 5px 0; }
.current-temp-block { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.current-temp-block .w-icon { font-size: 48px; color: #f90; }
.current-temp-block .w-temp { font-size: 52px; font-weight: bold; color: #333; line-height: 1; }
.current-temp-block .w-temp sup { font-size: 22px; font-weight: normal; }
.current-temp-block .w-desc { font-size: 16px; color: #666; }
.current-temp-block .w-desc .range { color: #f60; font-weight: bold; }
.current-info { font-size: 13px; color: #666; }
.current-info p { margin-bottom: 3px; }
.current-info .weather-desc { color: #999; font-size: 12px; margin-top: 6px; line-height: 1.8; }

/* 右侧预报区 */
.weather-sidebar { width: 340px; flex-shrink: 0; background: #fafafa; padding: 20px; border-left: 1px solid #e5e5e5; }
.forecast-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.forecast-header h1 { font-size: 16px; color: #333; }
.forecast-header .more-link { font-size: 12px; color: #06c; }

.forecast-list { display: flex; margin-bottom: 16px; }
.forecast-item { flex: 1; text-align: center; padding: 8px 2px; border-right: 1px solid #eee; }
.forecast-item:last-child { border-right: none; }
.forecast-item.today { background: #f0f6ff; }
.fc-date { font-size: 12px; color: #666; }
.fc-week { font-size: 12px; color: #999; }
.fc-icon { font-size: 22px; color: #f90; margin: 4px 0; }
.fc-condition { font-size: 12px; color: #333; }

/* 温度曲线 */
.temp-chart { margin: 10px 0; text-align: center; background: #fff; padding: 10px; border: 1px solid #eee; }
.temp-chart canvas { max-width: 100%; }

/* AQI行 */
.aqi-row { display: flex; margin-top: 8px; }
.aqi-row .aqi-item { flex: 1; text-align: center; font-size: 12px; }

/* AQI徽标 */
.aqi-badge { display: inline-block; padding: 1px 6px; font-size: 12px; font-weight: bold; color: #fff; }
.aqi-good { background: #7bc96e; }
.aqi-light { background: #f5a623; }
.aqi-moderate { background: #f56c23; }
.aqi-heavy { background: #d0021b; }
.aqi-severe { background: #8b1a4a; }

/* 24小时预报 */
.hourly-section { margin-top: 20px; border: 1px solid #e5e5e5; padding: 15px; }
.hourly-section h2 { font-size: 16px; color: #333; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #e5e5e5; }
.hourly-list { display: flex; overflow-x: auto; }
.hourly-item { flex-shrink: 0; width: 70px; text-align: center; padding: 6px 2px; border-right: 1px solid #f0f0f0; font-size: 12px; }
.hourly-item:last-child { border-right: none; }
.hl-time { color: #666; margin-bottom: 2px; }
.hl-icon { font-size: 16px; color: #f90; margin: 2px 0; }
.hl-condition { color: #333; font-size: 12px; }
.hl-temp { color: #f60; font-weight: bold; margin: 2px 0; }
.hl-aqi { margin-top: 2px; }

/* 周边城市 */
.nearby-section { margin-top: 20px; border: 1px solid #e5e5e5; padding: 15px; }
.nearby-section h2 { font-size: 16px; color: #333; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #e5e5e5; }
.nearby-list { display: flex; flex-wrap: wrap; }
.nearby-list li { width: 20%; padding: 4px 0; }
.nearby-list li a { color: #333; font-size: 13px; }
.nearby-list li .ntemp { color: #f60; font-size: 12px; margin-left: 4px; }

/* ========== 下辖区县乡镇 ========== */
.district-section {
    margin-top: 28px;
}
.district-section .section-title {
    font-size: 17px; font-weight: bold; color: #222;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 2px solid #e8e8e8;
}
.district-groups {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.district-group {
    width: calc(33.333% - 7px); min-width: 200px;
    background: #fff; border: 1px solid #e8e8e8;
    border-radius: 8px; overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}
.district-group:hover { border-color: #b8d4f0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* 展开/折叠头部 */
.district-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; cursor: pointer;
    background: #fafbfc; user-select: none;
    transition: background .15s;
}
.district-header:hover { background: #f0f5fa; }
.district-toggle {
    font-size: 10px; color: #aaa; transition: transform .25s;
    flex-shrink: 0; width: 20px; height: 20px; text-align: center;
    line-height: 20px; border-radius: 50%; cursor: pointer;
}
.district-toggle:hover { color: #1890ff; background: #e6f0fa; }
.district-group.open .district-toggle { transform: rotate(90deg); }
.district-name {
    flex: 1; font-size: 15px; font-weight: 600; color: #222;
    text-decoration: none;
}
.district-name:hover { color: #1890ff; }
.district-count {
    font-size: 11px; color: #999; white-space: nowrap;
    background: #f0f0f0; padding: 2px 8px; border-radius: 10px;
}

/* 乡镇列表（默认折叠） */
.district-body {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
}
.district-group.open .district-body {
    max-height: 300px; padding: 4px 14px 12px;
}
.district-towns {
    display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.town-link {
    display: inline-block; padding: 3px 10px;
    font-size: 13px; color: #555;
    background: #f5f7fa; border-radius: 14px;
    text-decoration: none;
    transition: all .15s;
}
.town-link:hover {
    color: #fff; background: #1890ff;
}

/* ===== 15天表格 ===== */
.forecast15-table { overflow-x: auto; }
.forecast15-table table { border: 1px solid #e5e5e5; }
.forecast15-table th { background: #f5f5f5; padding: 8px 12px; font-weight: bold; font-size: 13px; border-bottom: 2px solid #ddd; text-align: center; }
.forecast15-table td { padding: 8px 12px; text-align: center; border-bottom: 1px solid #eee; font-size: 13px; }
.forecast15-table tbody tr:hover { background: #fafafa; }
.temp-high { color: #f60; font-weight: bold; }
.temp-low { color: #06c; font-weight: bold; }

/* ===== AQI表格 ===== */
.aqi-table table { border: 1px solid #e5e5e5; }
.aqi-table th { background: #f5f5f5; padding: 8px 12px; font-weight: bold; font-size: 13px; border-bottom: 2px solid #ddd; text-align: center; }
.aqi-table td { padding: 8px 12px; text-align: center; border-bottom: 1px solid #eee; font-size: 13px; }

/* ===== 景点/国际卡片 ===== */
.spot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.spot-card { background: #fff; border: 1px solid #e5e5e5; padding: 16px; text-align: center; }
.spot-card:hover { border-color: #06c; }
.spot-card h3 { font-size: 16px; margin-bottom: 4px; }
.spot-city { color: #999; font-size: 12px; margin-bottom: 10px; }
.spot-weather { font-size: 22px; color: #f90; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.spot-temp { font-size: 24px; font-weight: bold; color: #f60; }
.spot-card .btn-link { display: inline-block; margin-top: 8px; padding: 4px 16px; background: #06c; color: #fff; font-size: 12px; }
.spot-card .btn-link:hover { background: #05a; text-decoration: none; }

/* 省份锚点 */
.province-anchors { display: flex; flex-wrap: wrap; gap: 4px; }
.province-anchors a { padding: 4px 12px; color: #06c; font-size: 14px; border: 1px solid #e5e5e5; }
.province-anchors a:hover { background: #f0f6ff; text-decoration: none; border-color: #06c; }

/* 景点表格 */
.spot-table { width: 100%; border: 1px solid #e5e5e5; }
.spot-table td { padding: 8px 12px; border-bottom: 1px solid #eee; vertical-align: top; }
.spot-table tr:last-child td { border-bottom: none; }
.spot-city-cell { width: 80px; background: #f9f9f9; text-align: center; font-weight: bold; }
.spot-city-cell h3 { font-size: 14px; font-weight: bold; color: #333; }
.spot-list-cell { }
.spot-inline-list { display: flex; flex-wrap: wrap; gap: 4px; }
.spot-inline-list li { }
.spot-inline-list a { display: inline-block; padding: 2px 10px; color: #333; font-size: 14px; white-space: nowrap; }
.spot-inline-list a:hover { color: #06c; text-decoration: underline; }

/* ===== 页脚 ===== */
.footer { background: #333; color: #999; text-align: center; padding: 20px 0; margin-top: 30px; font-size: 12px; }
.footer p { margin-bottom: 3px; line-height: 1.8; }

/* ===== 响应式 ===== */
@media (max-width: 1000px) {
    .container { width: auto; padding: 0 10px; }
    .weather-detail { flex-direction: column; }
    .weather-sidebar { width: 100%; border-left: none; border-top: 1px solid #e5e5e5; }
    .province-list li { width: 12.5%; }
    .city-grid li { width: 25%; }
    .nearby-list li { width: 33%; }
    .header .container { flex-wrap: wrap; }
    .search-box { max-width: 100%; }
}
@media (max-width: 640px) {
    .province-list li { width: 25%; }
    .city-grid li { width: 50%; }
    .nearby-list li { width: 50%; }
    .forecast-item { flex: 0 0 25%; border-bottom: 1px solid #eee; }
    .spot-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}