* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}
html,body {
  width:100%;
  min-height:100vh;
}
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:#F5F7FA;
  color:#1F2937;
  line-height:1.6;
}

.head {
  width:100%;
  padding:14px 20px;
  background:#FFF;
  font-size:14px;
  color:#6B7280;
  border-bottom:1px solid #E5E7EB;
}
.head a {
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  letter-spacing:.5px;
}
.head a span:nth-child(1){color:#4285F4;}
.head a span:nth-child(2){color:#EA4335;}
.head a span:nth-child(3){color:#FBBC05;}
.head a span:nth-child(4){color:#34A853;}

.today {
  width:100%;
  padding:40px 20px 36px;
  color:#fff;
  background:linear-gradient(315deg,#4cc2ff,#42a5f6,#64b5f6);
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.today .area h1 {
  font-size:24px;
  font-weight:600;
  margin-bottom:4px;
}
.today .area p {
  font-size:13px;
  opacity:.9;
}
.today .air {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.22);
  padding:6px 14px;
  font-size:14px;
  margin:12px 0;
}
.today .air img {
  width:18px;
  height:18px;
}
.today .info {
  display:flex;
  align-items:center;
  gap:20px;
  margin:20px 0;
}
.today .weather img {
  width:60px;
  height:60px;
}
.today .degree {
  font-size:64px;
  font-weight:100;
  line-height:1;
}
.today .tips {
  font-size:15px;
  margin-bottom:16px;
}
.today .observe {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  font-size:13px;
  opacity:.95;
}

.container {
  width:100%;
  margin:0 auto;
}

.card {
  width:100%;
  background:#fff;
  padding:24px 20px;
  margin:16px 0;
  box-shadow:0 2px 14px rgba(0,0,0,.04);
}
.card .tit {
  font-size:18px;
  font-weight:600;
  margin-bottom:20px;
  color:#111827;
}

.tomorrow {
  display:flex;
  gap:14px;
  padding:0 20px;
  margin:20px 0;
}
.tomorrow .item {
  flex:1;
  background:#fff;
  padding:24px 16px;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.tomorrow .date {
  font-size:15px;
  color:#4B5563;
  margin-bottom:8px;
}
.tomorrow .temperature {
  font-size:17px;
  font-weight:600;
  color:#111827;
  margin-bottom:12px;
}
.tomorrow .weather {
  font-size:14px;
  color:#6B7280;
  margin-bottom:10px;
}
.tomorrow .bottom img {
  width:40px;
  height:40px;
}

.hours-row {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px;
  row-gap:16px;
}
.hours-row li {
  width:56px;
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  list-style:none;
  font-size:13px;
  color:#4B5563;
  line-height:1.3;
}
.hours-row li p {
  margin:0 0 4px;
}
.hours-row li img {
  width:28px;
  height:28px;
  margin:2px 0 4px;
}
.hours-row li span {
  font-weight:500;
  margin-top:auto;
}

.days dl {
  border-bottom:1px solid #F3F4F6;
  padding:14px 0;
}
.days dd {
  display:flex;
  align-items:center;
  padding:10px 0;
  font-size:14px;
}
.days dd span {
  flex:1;
  text-align:center;
}
.days dd span img {
  width:26px;
  height:26px;
  vertical-align:middle;
}

.index {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.index .item {
  flex:1 1 calc(25% - 12px);
  min-width:110px;
  max-width:160px;
  background:#F9FAFB;
  padding:18px 12px;
  text-align:center;
  font-size:12px;
  color:#4B5563;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100px;
}
.index .item img {
  width:36px;
  height:36px;
  margin-bottom:8px;
}
.index .item span {
  line-height:1.4;
  margin-bottom:4px;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.index .item p {
  color:#9CA3AF;
  margin-top:auto;
}

.nearby {
  width:100%;
  padding:20px;
  background:#fff;
  margin:16px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.nearby .link-title {
  font-size:16px;
  font-weight:600;
  color:#111827;
  margin-bottom:14px;
}
.grid-link {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:10px 8px;
}
.grid-link a {
  display:block;
  text-align:center;
  padding:8px 0;
  color:#374151;
  text-decoration:none;
  border-radius:4px;
  transition:.2s;
  font-size:14px;
}
.grid-link a:hover {
  background:#EFF6FF;
  color:#2563EB;
}

.copyright {
  width:100%;
  text-align:center;
  padding:16px 20px;
  font-size:12px;
  color:#9CA3AF;
  margin-top:10px;
}

@media (max-width:480px){
  .days dd span:nth-child(2),
  .days dd span:nth-child(6){display:none;}
}