* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", sans-serif; line-height: 1.5; color: #333; background: #f4f4f4; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 10px; }
header { background: #fff; padding: 10px 0; border-bottom: 2px solid #d9534f; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 22px; font-weight: bold; text-decoration: none; color: #333; }
#nav {display: flex; justify-content: space-between; align-items: center; width: 100%;}
.nav-links a { margin-left: 15px; font-size: 14px; color: #555; text-decoration: none; }
.city-group { background: #fff; margin: 15px 0; padding: 15px; border-radius: 4px; }
.group-title { font-size: 15px; border-left: 3px solid #d9534f; padding-left: 10px; margin-bottom: 12px; color: #333; font-weight: bold; }
.hot-cities { background: #fffdfd; border: 1px solid #ffebeb; }
.hot-cities .group-title { border-left-color: #e67e22; color: #e67e22; }
.hot-cities .city-item a {color: #d9534f;font-weight: bold;border-color: #d9534f;}
.hot-cities .city-item a:hover {background: #d9534f;color: #fff;}
.city-grid { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.city-item a { text-decoration: none; color: #666; font-size: 13px; padding: 5px 12px; border: 1px solid #eee; border-radius: 3px; display: inline-block; transition: 0.2s; }
.city-item a:hover { border-color: #d9534f; color: #d9534f; background: #fff5f5; }
footer { text-align: center; padding: 20px; font-size: 12px; color: #999; background: #fff;margin-top: 40px;}
footer p {text-align: center;font-size: 12px; color: #999;line-height: 30px;}
footer p a {text-decoration:none;color: #999;}