:root {
	--bg-main: #fff;
	--bg-dark: #1e1e1e;
	--bg-light-gray: #fff;
	--bg-gray: #f5f5f5;
	--text-main: #555;
	--text-title: #2c3e50;
	--text-danger: #f44336;
	--text-success: #28a745;
	--search-input: #fff;
	--border-main: #eaeaea;
	--border-light: #e0e0e0;
	--light-font: #59bb66;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif}
body{color:var(--text-main);font-size:100%;font-family:Arial,Helvetica,sans-serif;word-break:break-all;padding-top:env(safe-area-inset-top);min-height:100vh;background-color:var(--bg-main)}
body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,select,span,table,td,textarea,th,ul{margin:0;padding:0}
button,input,label,select{vertical-align:middle}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
img,td{border:0;vertical-align:middle;max-width:100%}
html{font-size:14pt}
em,i{font-style:normal}
li,ul{list-style:none}
a{color:var(--text-main);text-decoration:none}
a:hover{color:var(--text-main)}
.container{margin:0 auto;max-width:1440px;padding:0 3%}
.left{float:left}.right{float:right}.gray{color:#ccc}.red{color:var(--text-danger)}.green{color:var(--text-success)}.orange{color:#fa6900}.blue,.light{color:var(--light-font)}
.ft12{font-size:1.2em}.ft10{font-size:1em}.ft8{font-size:.8em}.ft6{font-size:.6em}.ft4{font-size:.4em}.mt20{margin-top:20px}.block{clear:both;height:20px;overflow:hidden;display:block}.hidden{display:none}
.loading{color:#999;text-align:center;padding:20px;}
/* 头部搜索 */
.head{width:100%;padding:10px 20px;background:var(--bg-main);display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:10}
.head-logo a{line-height:0;display:inline-block}
.head-logo img{height:60px;object-fit:contain}
.head-search{position:relative;display:inline-flex;align-items:center}
#searchCity{padding:8px 12px;border:1px solid var(--border-main);border-radius:16px;outline:none;font-size:14px;background:var(--search-input);color:var(--text-main);transition:border-color .2s;width: 320px;}
#searchCity:focus{border-color:var(--light-font)}
.search-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg-main);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-height:240px;overflow-y:auto;display:none;z-index:999;border:1px solid var(--border-main)}
.search-dropdown.active{display:block}
.search-item{padding:8px 12px;cursor:pointer;font-size:13px;color:var(--text-main)}
.search-item:hover{background:var(--bg-gray)}
body.dark #searchCity::placeholder{color:#888}

/* 路径导航 */
.navpath{border-radius:8px;padding-left:25px;padding-right:10px;background: url("../img/home.png") no-repeat left 10px center var(--bg-light-gray);background-size: auto 35%;height:35px;overflow:hidden;color:var(--text-title);font-size:13px;box-shadow:0 2px 10px rgba(0,0,0,.05);margin:12px 0;}
.navpath a{font-size:13px;color:var(--text-title);line-height:35px;margin:0 3px;}

/* 地图样式 */
.map-svg path {animation-iteration-count: 1;animation-delay: 0.5s;-webkit-animation-delay: 0.5s;stroke: #fff;}
.map-link:hover path {fill:#2095f2;}
.map-text{text-anchor: middle;font:12px Arial;cursor: pointer;fill: "#000000";stroke: "none";}

/* 天气卡片 */
.today-card{color:#fff;padding:10px 15px;border-radius:16px;margin:12px 0;box-shadow:0 8px 20px rgba(0,0,0,.1);position:relative;overflow:hidden}
.today-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.today-card .info h1{font-size:20px;font-weight:500;margin-bottom:4px}
.today-card .info p{opacity:.9;font-size:14px}
.today-card .aqi-tag{background:rgba(255,255,255,.2);border-radius:20px;padding:6px 12px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.today-card .air-1{background:#a3d665}.air-2{background:#f8d93e}.air-3{background:#f79d54}.air-4{background:#f56c6c}.air-5{background:#a468b5}.air-6{background:#994c4c}
.today-card .aqi-tag img{border-radius:50%;padding:1%;background:#fff;width:20px;height:20px;object-fit:contain}
.today-card .aqi-tag span{color:#fff;font-size:14px}
.today-card .main{margin-bottom:30px;text-align:center}
.today-card .row-icon{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}
.today-card .degree{font-size:88px;font-weight:700;line-height:1;animation:tempIn .8s ease-out}
.today-card .weather-icon{width:64px;height:64px;object-fit:contain}
.today-card .row-info{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:30px}
.today-card .weather-text{font-size:24px;opacity:.95;color:#fff}
.today-card .detail-box{display:flex;justify-content:center;align-items:center;gap:12px;text-align:center;margin-bottom:10px;flex-wrap:wrap}
.today-card .detail-item{opacity:.95;display:flex;align-items:center}
.today-card .detail-item i{display:inline-flex;align-items:center;width:18px;height:18px;margin-right:4px}
.today-card .detail-item span{font-size:16px}
.today-card .detail-sun{opacity:.95;display:flex;align-items:center;gap:6px}
.today-card .detail-sun i{display:inline-block;width:26px;height:26px;vertical-align:middle}
.today-card .detail-sun span{font-size:14px;vertical-align:middle}

.tomorrow-card{background:var(--bg-light-gray);border-radius:16px;margin:10px 0;padding:20px 15px;display:flex;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.tomorrow-card .item{width:50%;display:flex;justify-content:space-between;align-items:center;text-align:left}
.tomorrow-card .item:first-child{border-right:1px solid #f0f0f0;padding-right:15px}
.tomorrow-card .item:last-child{padding-left:15px}
.tomorrow-card .left-wrap{flex:1}
.tomorrow-card .date{font-size:18px;color:var(--text-title);margin-bottom:4px;font-weight:600}
.tomorrow-card .weather{color:var(--text-title);font-size:16px}
.tomorrow-card .right-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.tomorrow-card .temp{font-size:18px;color:var(--text-title);font-weight:500}
.tomorrow-card .icon-wrap{display:flex;align-items:center;gap:6px}
.tomorrow-card .icon{width:24px;height:24px}

.hours-card,.days-card,.life-card{background:var(--bg-light-gray);border-radius:16px;margin:10px 0;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.hours-card .list{display:flex;overflow-x:auto;padding-bottom:10px;gap:16px}
.hours-card .item{min-width:60px;text-align:center;flex-shrink:0}
.hours-card .time{color:var(--text-title);margin-bottom:8px;font-size:14px}
.hours-card .icon{width:24px;height:24px;margin:0 auto 8px}
.hours-card .temp{font-size:14px;color:var(--text-title);font-weight:500}

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

.life-card .list{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.life-card .item{text-align:center;padding:8px 4px}
.life-card .icon{width:44px;height:44px;margin:0 auto 8px}
.life-card .name{color:var(--text-title);margin-bottom:4px;font-size:14px}
.life-card .info{font-size:12px;color:#999}

.days-card .title,.hours-card .title,.life-card .title{padding:0 0 12px;font-size:18px;font-weight:700;color:var(--text-title);margin-bottom:15px;border-bottom:1px solid #f5f5f5}

/* 地区导航 */
.area-title{padding:0 0 12px;font-size:22px;font-weight:700;color:var(--text-title);margin-bottom:15px;text-align:center}
.area-intro{padding:0 0 12px;font-size:16px;color:var(--text-title);border-bottom:1px solid #f5f5f5}
.area-province{margin:10px 0 20px}
.area-item{margin-bottom:15px}
.area-name{font-size:20px;font-weight:bold;margin-bottom:12px;color:var(--text-title);}
.area-link{display:flex;flex-wrap:wrap;gap:8px}
.area-link a{padding:6px 12px;background:var(--bg-gray);border-radius:8px}
.area-link a:hover{background-color:var(--light-font);color:var(--bg-main);transform:translateY(-2px)}

/* 城市导航 */
.city-card{background:var(--bg-light-gray);border-radius:16px;margin:10px 0;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.city-card .title{padding:0 0 12px 0;font-size:18px;font-weight:700;color:var(--text-title);margin-bottom:15px;border-bottom:1px solid var(--border-light)}
.city-card ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;justify-content:flex-start}
.city-card li{height:28px;line-height:28px;text-align:center;margin:6px 6px 6px 0;white-space:nowrap;flex-shrink:0}
.city-card a{padding:6px 12px;background:var(--bg-gray);border-radius:8px;transition:all .2s ease}
.city-card a:hover{background-color:var(--light-font);color:var(--bg-main);border-color:var(--light-font);transform:translateY(-2px)}

/* 天气背景与动画 */
.today-card[weather*="晴"]{background:linear-gradient(315deg,#63B4ED,#87CEFA,#B2E5FF)}
.today-card[weather*="云"],.today-card[weather*="阴"]{background:linear-gradient(315deg,#9CCAE8,#BED8EB,#E0F0FF)}
.today-card[weather*="雨"]{background:linear-gradient(315deg,#5A92D1,#70A1D9,#87B0E0)}
.today-card[weather*="雪"]{background:linear-gradient(315deg,#E2E8F0,#EDF2F7,#F7FAFC);color:#4A5568}
.today-card[weather*="雾"]{background:linear-gradient(315deg,#CBD5E0,#E2E8F0,#EDF2F7);color:#4A5568}
.today-card[weather*="霾"]{background:linear-gradient(315deg,#89949F,#A0AEC0,#CBD5E0)}
.today-card[weather*="霜"]{background:linear-gradient(315deg,#9CD5F7,#BEE3FF,#E0F0FF);color:#2C5282}
.today-card[weather*="风"],.today-card[weather*="沙"],.today-card[weather*="尘"]{background:linear-gradient(315deg,#B0B7C0,#C9CFD6,#D9DDE2)}
.today-card[weather*="雹"]{background:linear-gradient(315deg,#A0B6D2,#BECFE4,#D7E2F0)}
.today-card[weather*="雷"]{background:linear-gradient(315deg,#2D3748,#4A5568,#718096)}

.today-card[weather*="雨"]::after{content:"";position:absolute;inset:0;background-image:radial-gradient(3px 3px at 12% 18%,rgba(255,255,255,.35),transparent),radial-gradient(3px 3px at 30% 52%,rgba(255,255,255,.33),transparent),radial-gradient(3px 3px at 48% 28%,rgba(255,255,255,.35),transparent),radial-gradient(3px 3px at 66% 62%,rgba(255,255,255,.3),transparent),radial-gradient(3px 3px at 84% 38%,rgba(255,255,255,.32),transparent);background-size:180px 120px;opacity:.9;pointer-events:none;animation:rain_big 1.3s linear infinite}
@keyframes rain_big{0%{background-position:0 0}100%{background-position:12px 120px}}

.today-card[weather*="雪"]::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#fff 1.2px,transparent 1.2px);background-size:35px 35px;opacity:.9;pointer-events:none;animation:snow 8s linear infinite}
@keyframes snow{0%{background-position:0 0;transform:translateY(-100px)}100%{background-position:50px 500px;transform:translateY(0)}}

.today-card[weather*="雷"]::before{content:"";position:absolute;inset:0;background:transparent;z-index:1;pointer-events:none;animation:lightning-hard 3.5s infinite}
@keyframes lightning-hard{0%,82%{background:transparent}83%{background:rgba(255,255,255,.65)}84%{background:transparent}86%{background:rgba(255,255,255,.8)}87%{background:transparent}100%{background:transparent}}

.today-card[weather*="云"]::after,.today-card[weather*="阴"]::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='80' fill='rgba(255,255,255,.15)'%3E%3Ccircle cx='50' cy='40' r='22'%3E%3C/circle%3E%3Ccircle cx='110' cy='40' r='28'%3E%3C/circle%3E%3Ccircle cx='170' cy='40' r='22'%3E%3C/circle%3E%3C/svg%3E");background-repeat:repeat-x;background-size:300px 80px;opacity:.4;pointer-events:none;animation:cloud 25s linear infinite}
@keyframes cloud{0%{background-position-x:0}100%{background-position-x:-300px}}

.today-card[weather*="雾"]::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.2);backdrop-filter:blur(3px);pointer-events:none;animation:fog 12s infinite alternate}
@keyframes fog{0%{transform:translateX(-6%);opacity:.4}100%{transform:translateX(6%);opacity:.7}}

.today-card[weather*="霾"]::after{content:"";position:absolute;inset:0;background:rgba(200,200,200,.15);backdrop-filter:blur(4px);pointer-events:none;animation:haze 8s infinite alternate}
@keyframes haze{0%{opacity:.3}100%{opacity:.6}}

.today-card[weather*="霜"]::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.1);pointer-events:none;animation:frost 4s infinite alternate ease-in-out}
@keyframes frost{0%{backdrop-filter:brightness(1);opacity:.2}100%{backdrop-filter:brightness(1.15);opacity:.4}}

.today-card[weather*="风"]::after,.today-card[weather*="沙"]::after,.today-card[weather*="尘"]::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.05);backdrop-filter:blur(1px);pointer-events:none;animation:wind 5s infinite alternate ease-in-out}
@keyframes wind{0%{transform:translateX(-2%)}100%{transform:translateX(2%)}}

.today-card[weather*="沙尘"]::after,.today-card[weather*="浮尘"]::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(200,180,140,.3) .5px,transparent .5px);background-size:30px 30px;pointer-events:none;animation:dust 7s linear infinite}
@keyframes dust{0%{background-position:0 0}100%{background-position:-30px 60px}}

.today-card[weather*="雹"]::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1px);background-size:22px 22px;transform:skewX(-5deg);pointer-events:none;animation:hail 1.2s linear infinite}
@keyframes hail{0%{background-position:0 0}100%{background-position:22px 100px}}

.today-card[weather*="晴"]::before{content:"";position:absolute;width:220px;height:220px;top:-60px;right:60px;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 60%);border-radius:50%;pointer-events:none;animation:sun-glow 6s infinite alternate ease-in-out}
@keyframes sun-glow{0%{transform:scale(1);opacity:.4}100%{transform:scale(1.15);opacity:.2}}

@keyframes tempIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes breath{0%{transform:scale(1)}100%{transform:scale(1.06)}}

.friendlink{margin:20px 0;border-radius:8px;position:relative;border:1px solid var(--border-light)}
.friendlink h3{padding:10px;line-height:20px;border-bottom:1px solid var(--border-main)}
.friendlink a{display:block;padding:0 5px;text-align:left;border-radius:5px;font-size:14px}
.friendlink ul{padding:10px 15px;overflow:hidden}
.friendlink li{float:left;height:28px;line-height:28px;text-align:center}

.footer{clear:both;color:var(--text-main);background-color:var(--border-light);font-family:"Comic Sans MS";text-align:center;border-top:1px solid var(--border-main);padding:1em;overflow:hidden;letter-spacing:.1em;font-size:.6em;opacity:.75;text-transform:uppercase;line-height:1.8}
.footer a{color:var(--text-main)}

/* 悬浮按钮 */
.scroll-nav{position:fixed;right:20px;bottom:90px;z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.scroll-nav a{display:flex;align-items:center;transition:all .3s ease;opacity:1;transform:translateY(0)}
.scroll-nav a.top{opacity:0;transform:translateY(20px)}
.scroll-nav a .text-tip{padding:6px 12px;border-radius:4px;background-color:#555;color:#fff;font-size:14px;margin-right:8px;opacity:0;transform:translateX(10px);transition:all .3s ease;white-space:nowrap}
.scroll-nav a .icon{width:40px;height:40px;border-radius:6px;background-color:#555;display:flex;align-items:center;justify-content:center;margin-left:auto;background-size:24px;background-repeat:no-repeat;background-position:center}
.scroll-nav a.visible{opacity:1;transform:translateY(0);animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.scroll-nav a:hover{transform:translateX(-10px)}
.scroll-nav a:hover .icon{background-color:#555}
.scroll-nav a:hover .text-tip{opacity:1;transform:translateX(0)}
.scroll-nav .top .icon{background-image:url(../img/gotop.png)}
.scroll-nav .theme .icon{background-image:url(../img/theme-sun.png)}

/* 响应式 */
@media screen and (max-width:320px){html{font-size:8pt}
.container{padding:0 2%}
.today-card .degree{font-size:60px}
.life-card .list{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:360px){html{font-size:10pt}
.today-card .degree{font-size:72px}
.life-card .list{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:480px){.head{flex-direction:column;align-items:stretch;padding:10px 15px}
.head-logo{text-align:center}
.head-search{width:100%}
#searchCity{width:100%}
.city-card {padding: 15px;}
.city-card .title {font-size: 16px;}
.city-card a {padding: 4px 8px;font-size: 13px;}
}
@media screen and (max-width:600px){.container{padding-top:15px}
.tomorrow-card{flex-direction:column;gap:15px}
.tomorrow-card .item{width:100%;border-right:none;padding:0}
.tomorrow-card .item:first-child{border-right:none;padding-right:0;border-bottom:1px solid #f0f0f0;padding-bottom:15px}
.tomorrow-card .item:last-child{padding-left:0;padding-top:15px}
}
@media screen and (max-width:768px){
  .city-card li {margin: 4px 4px 4px 0;}
  .city-card a {padding: 5px 10px;font-size: 16px;}
}
@media screen and (min-width:1280px){html{font-size:14pt}
.container{max-width:1440px;padding:0 4%}
}
/* 深色模式 */
body.dark {
	--bg-main: var(--bg-dark);
	--text-main: #e0e0e0;
	--text-title: #f0f0f0;
	--bg-light-gray: #2d2d2d;
	--bg-gray: #333;
	--search-input: #171717;
	--border-main: #555;
	--border-light: #555;
	background-color: var(--bg-main);
	color: var(--text-main)
}