/* ===== 全国天气查询工具 · 全站样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",Arial,sans-serif; background: #eef4fb; color: #2c3e50; font-size: 15px; line-height: 1.7; }
a { color: #1668c4; text-decoration: none; }
a:hover { color: #0b4a93; text-decoration: underline; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* ---------- 头部 ---------- */
.site-header { background: linear-gradient(135deg,#0f6bd6 0%,#2ea3e8 60%,#59c3f0 100%); color: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 15px; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo a { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.logo-icon { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.logo-text { font-size: 24px; font-weight: 700; letter-spacing: 1px; }
.slogan { font-size: 13px; opacity: .9; margin-top: 2px; }
.header-search { display: flex; flex: 1; max-width: 460px; min-width: 260px; }
.header-search input { flex: 1; border: none; border-radius: 22px 0 0 22px; padding: 10px 18px; font-size: 14px; outline: none; color: #333; }
.header-search button { border: none; background: #ff9f2e; color: #fff; border-radius: 0 22px 22px 0; padding: 0 24px; font-size: 15px; cursor: pointer; font-weight: 600; }
.header-search button:hover { background: #ff8f10; }
.site-nav { background: rgba(0,0,0,.12); }
.nav-inner { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 15px; }
.nav-inner a { color: #fff; font-size: 14px; padding: 5px 12px; border-radius: 6px; }
.nav-inner a:hover { background: rgba(255,255,255,.22); text-decoration: none; }

.page-main { padding: 18px 0 30px; min-height: 60vh; }

/* ---------- 通用组件 ---------- */
.breadcrumb { font-size: 13px; color: #6b7b8c; margin: 8px 2px 14px; }
.breadcrumb a { color: #1668c4; }
.card { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(30,90,160,.08); padding: 18px 20px; margin-bottom: 16px; }
.card h2 { font-size: 18px; color: #0f4a8a; border-left: 4px solid #1e88e5; padding-left: 10px; margin-bottom: 12px; }
.card h3 { font-size: 15px; color: #1a5fa8; margin: 14px 0 8px; }
.section-desc { color: #5a6b7c; font-size: 13px; margin: -6px 0 12px; }

/* ---------- 实时天气卡片 ---------- */
.now-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.now-place { font-size: 15px; color: #5a6b7c; }
.now-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.share-btn { background: linear-gradient(135deg, #ff7b45, #e04a32); color: #fff; border: none; border-radius: 24px; padding: 9px 18px; font-size: 14px; cursor: pointer; box-shadow: 0 4px 12px rgba(224,74,50,.25); transition: transform .15s, box-shadow .15s; }
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(224,74,50,.35); }
.alert-bar { margin-top: 12px; background: #fff7e8; border: 1px solid #ffd9a0; border-left: 4px solid #f5a623; border-radius: 8px; padding: 10px 14px; font-size: 14px; color: #8a5b00; line-height: 1.7; }
.alert-bar strong { color: #d84315; }
.alert-more { margin-left: 8px; }
.alert-more a { color: #b26a00; text-decoration: underline; }
.now-main { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin: 8px 0; }
.now-temp { font-size: 58px; font-weight: 300; color: #0f4a8a; line-height: 1; }
.now-temp sup { font-size: 24px; }
.now-cond { font-size: 20px; color: #333; }
.now-cond small { display: block; font-size: 13px; color: #7a8896; margin-top: 4px; }
.now-items { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 10px; margin-top: 12px; }
.now-item { background: #f3f8fe; border-radius: 10px; padding: 10px 12px; text-align: center; }
.now-item .k { font-size: 12px; color: #7a8896; }
.now-item .v { font-size: 16px; font-weight: 600; color: #17477e; margin-top: 2px; }
.updated-tag { font-size: 12px; color: #8a97a5; }

/* ---------- 24 小时 ---------- */
.hourly-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hourly-list { display: flex; gap: 6px; min-width: 640px; padding-bottom: 4px; }
.hourly-item { flex: 1; min-width: 46px; background: #f3f8fe; border-radius: 8px; padding: 8px 4px; text-align: center; }
.hourly-item .h { font-size: 12px; color: #7a8896; }
.hourly-item .t { font-size: 14px; font-weight: 700; color: #17477e; margin: 4px 0; }
.hourly-item .c { font-size: 14px; }

/* ---------- 15 天预报 ---------- */
.forecast-table { width: 100%; border-collapse: collapse; }
.forecast-table th { background: #eef5fd; color: #3d5a78; font-size: 13px; padding: 8px 6px; text-align: center; }
.forecast-table td { padding: 9px 6px; text-align: center; border-bottom: 1px solid #eef2f6; font-size: 14px; }
.forecast-table tr:hover td { background: #f7fbff; }
.forecast-table .hi { color: #e2574c; font-weight: 600; }
.forecast-table .lo { color: #3b7dd8; }
.cond-ico { font-size: 20px; }

/* ---------- 搜索 ---------- */
.search-box { text-align: center; padding: 26px 10px; }
.search-box h2 { font-size: 22px; color: #0f4a8a; margin-bottom: 8px; border: none; padding: 0; }
.search-box p { color: #5a6b7c; margin-bottom: 14px; }
.search-form { display: flex; max-width: 560px; margin: 0 auto; }
.search-form input { flex: 1; border: 2px solid #1e88e5; border-radius: 26px 0 0 26px; padding: 12px 20px; font-size: 15px; outline: none; }
.search-form button { border: none; background: #1e88e5; color: #fff; border-radius: 0 26px 26px 0; padding: 0 30px; font-size: 16px; cursor: pointer; }
.search-form button:hover { background: #0f6bd6; }
.hot-words { margin-top: 12px; font-size: 13px; color: #7a8896; }
.hot-words a { margin: 0 6px; color: #1668c4; }
.search-results li { padding: 8px 2px; border-bottom: 1px dashed #e3ebf4; }
.result-level { font-size: 12px; color: #fff; background: #1e88e5; border-radius: 4px; padding: 1px 6px; margin-right: 6px; }

/* ---------- 地区树 ---------- */
.region-tree details { margin-bottom: 4px; }
.region-tree summary { cursor: pointer; font-weight: 600; color: #17477e; padding: 6px 8px; border-radius: 6px; background: #f3f8fe; font-size: 15px; }
.region-tree summary:hover { background: #e6f0fb; }
.region-tree .city-group { margin: 6px 0 10px 18px; }
.region-tree .city-name { font-weight: 600; color: #24466e; margin: 6px 0 2px; font-size: 14px; }
.region-tree .county-links { padding-left: 12px; line-height: 2; }
.region-tree .county-links a { font-size: 13px; color: #3c6ea8; margin-right: 8px; display: inline-block; }
.region-tree .prov-more { font-size: 12px; color: #8a97a5; }

/* ---------- 省份页 ---------- */
.prov-city-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 8px; }
.prov-city-grid a { background: #f3f8fe; border-radius: 8px; padding: 8px 12px; font-size: 14px; color: #17477e; text-align: center; }
.prov-city-grid a:hover { background: #e2effd; text-decoration: none; }
.neighbor-links a { display: inline-block; margin: 4px 8px 4px 0; background: #eef5fd; border-radius: 20px; padding: 4px 14px; font-size: 13px; color: #1668c4; }
.all-prov-links { display: flex; flex-wrap: wrap; gap: 8px; }
.all-prov-links a { background: #f3f8fe; padding: 6px 14px; border-radius: 8px; font-size: 13px; color: #17477e; }

/* ---------- 地图 ---------- */
.map-wrap { position: relative; }
#china-map { width: 100%; height: 560px; }
.map-tip { text-align: center; color: #8a97a5; font-size: 12px; margin-top: 8px; }
.map-legend { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: #7a8896; margin-top: 6px; }
.map-legend i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- 排行榜 ---------- */
.rank-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .rank-tables { grid-template-columns: 1fr; } }
.rank-list { list-style: none; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed #e3ebf4; font-size: 14px; }
.rank-num { width: 26px; height: 26px; border-radius: 50%; background: #eef5fd; color: #3d5a78; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.rank-list li:nth-child(1) .rank-num { background: #ff6b52; color: #fff; }
.rank-list li:nth-child(2) .rank-num { background: #ff9f2e; color: #fff; }
.rank-list li:nth-child(3) .rank-num { background: #ffc55a; color: #fff; }
.rank-temp { margin-left: auto; font-weight: 700; }
.rank-hot .rank-temp { color: #e2574c; }
.rank-cold .rank-temp { color: #3b7dd8; }
.rank-desc { font-size: 13px; color: #7a8896; }

/* ---------- 文章 ---------- */
.article-list li { padding: 12px 4px; border-bottom: 1px dashed #e3ebf4; }
.article-list .date { font-size: 12px; color: #8a97a5; margin-left: 8px; }
.article-body { line-height: 2; color: #34495e; }
.article-body p { margin-bottom: 12px; }
.article-body h2 { font-size: 20px; color: #0f4a8a; border: none; padding: 0; margin: 20px 0 10px; }
.tool-reco { background: #eef5fd; border-radius: 10px; padding: 14px 16px; margin-top: 18px; }
.tool-reco h3 { color: #17477e; margin-bottom: 8px; }
.tool-reco a { display: inline-block; background: #fff; border: 1px solid #cfe2f7; border-radius: 20px; padding: 5px 16px; margin: 4px 6px 0 0; font-size: 13px; }

/* ---------- 工具页选择器 ---------- */
.tool-select { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.tool-select select, .tool-select input[type=text] { padding: 9px 14px; border: 1px solid #c9d8ea; border-radius: 8px; font-size: 14px; outline: none; }
.tool-select button { padding: 9px 20px; background: #1e88e5; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; }

/* ---------- 说明/来源 ---------- */
.source-note { background: #fff7ec; border: 1px solid #ffd9a8; border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #8a5b1e; margin: 10px 0; }
.note-list { font-size: 14px; color: #4a5a6a; }
.note-list li { margin-bottom: 6px; }

/* ---------- 页脚 ---------- */
.site-footer { background: #16324f; color: #c3d3e5; margin-top: 24px; }
.site-footer .container { padding-top: 22px; padding-bottom: 26px; }
.footer-block { margin-bottom: 14px; }
.footer-block h3 { font-size: 15px; color: #fff; margin-bottom: 8px; }
.footer-block p { font-size: 13px; color: #a9bfd6; }
.footer-block .copyright { color: #7e97af; margin-top: 6px; }
.footer-links .prov-links { display: flex; flex-wrap: wrap; gap: 6px; }
.footer-links a { font-size: 13px; color: #b9d2ea; }
.footer-links a:hover { color: #fff; }
.footer-links a::after { content: "·"; color: #5b7690; margin-left: 6px; }
.footer-links a:last-child::after { content: ""; }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .header-inner { flex-direction: column; align-items: stretch; }
  .header-search { max-width: 100%; }
  .now-temp { font-size: 46px; }
  #china-map { height: 420px; }
  .card { padding: 14px; }
  .forecast-table th, .forecast-table td { font-size: 12px; padding: 6px 3px; }
}