*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei','Segoe UI',Arial,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#333;line-height:1.6;min-height:100vh;padding:20px}
.container{max-width:1200px;margin:0 auto;background:rgba(255,255,255,0.95);border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,0.1);padding:30px;backdrop-filter:blur(10px)}
.header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid rgba(102,126,234,0.1)}
.location-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:30px}
.city-name{font-size:2.5em;font-weight:bold;color:#2c3e50}
.auto-location{color:#27ae60;font-size:14px;background:rgba(39,174,96,0.1);padding:8px 16px;border-radius:20px;display:inline-flex;align-items:center;gap:8px}
.location-container{background:white;padding:20px;border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,0.05);margin-bottom:30px}
#changeCity{display:flex;gap:10px;align-items:center}
#q,button[type="submit"]{padding:12px 20px;border:2px solid #e0e0e0;border-radius:10px;font-size:16px;transition:all 0.3s ease}
#q{flex:1;background:white;cursor:pointer}
#q:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1)}
button[type="submit"]{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;cursor:pointer;font-weight:600}
button[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,0.4)}
.current-weather{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:40px}
.weather-card{background:linear-gradient(135deg,#eff0f4 0%,#d6e9f9 100%);border-radius:20px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,0.08);border:1px solid rgba(102,126,234,0.1)}
.current-weather .weather-card:first-child{background:linear-gradient(135deg,#fff8f5 0%,#fff0e6 100%)}
.current-weather .weather-card:last-child{background:linear-gradient(135deg,#f0fff4 0%,#e6ffee 100%)}
.temp-large{font-size:5em;font-weight:300;color:#2c3e50;line-height:1}
.weather-status{font-size:1.8em;margin:10px 0;display:flex;align-items:center;gap:10px}
.weather-details{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:20px}
.detail-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0}
.sun-times{display:flex;justify-content:center;gap:30px;margin:15px 0;padding:10px;background:rgba(255,204,0,0.1);border-radius:10px;font-size:14px}
.sun-time-item{display:flex;align-items:center;gap:8px}
.hourly-forecast-container{position:relative;margin:20px 0 40px}
.hourly-forecast{display:flex;overflow-x:auto;overflow-y:hidden;gap:15px;padding:15px 10px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.hourly-forecast::-webkit-scrollbar{height:8px}
.hourly-forecast::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}
.hourly-forecast::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:4px}
.hourly-forecast::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a6fd8 0%,#6a42a0 100%)}
.hourly-forecast{scrollbar-width:thin;scrollbar-color:#667eea #f1f1f1}
.hour-item{flex:0 0 auto;width:100px;text-align:center;padding:15px 10px;background:white;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,0.08);transition:all 0.3s ease;position:relative}
.hour-item{background:linear-gradient(135deg,#fafbff 0%,#e3eafc 100%);border:1px solid rgba(102,126,234,0.05)}
.hour-item:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,0.12)}
.hour-item.sunrise{/**border-left:3px solid #ff9900;**/background:rgba(255,153,0,0.05)}
.hour-item.sunset{/**border-left:3px solid #9966cc;**/background:rgba(153,102,204,0.05)}
.hour-item.current{/**border:2px solid #ff4444;**/box-shadow:0 0 10px rgba(255,68,68,0.3);transform:scale(1.05);z-index:10}
.hour-time{font-weight:600;margin-bottom:8px;color:#2c3e50;font-size:14px}
.hour-temp{font-size:1.3em;font-weight:500;margin:8px 0;color:#2c3e50}
.scroll-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:white;border:none;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,0.15);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:5;opacity:0.8;transition:all 0.3s ease}
.scroll-nav:hover{opacity:1;transform:translateY(-50%) scale(1.1)}
.scroll-nav.left{left:10px}
.scroll-nav.right{right:10px}
.scroll-nav.hidden{display:none}
.scroll-hint{text-align:center;color:#666;font-size:12px;margin-top:5px;opacity:0.7}
.forecast-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:40px}
.forecast-day{text-align:center;transition:transform 0.3s ease}
.forecast-day{background:linear-gradient(135deg,#f8f9ff 0%,#e3eafc 100%);border-radius:15px;padding:20px;border:1px solid rgba(102,126,234,0.1)}
.forecast-day:hover{transform:translateY(-5px)}
.day-name{font-weight:600;margin-bottom:10px;color:#667eea}
.forecast-temp{font-size:1.5em;font-weight:300;margin:10px 0}
.life-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.index-item{background:linear-gradient(135deg,#f8f9ff 0%,#f0f4ff 100%);border-radius:15px;padding:20px;border:1px solid rgba(102,126,234,0.1)}
.index-title{font-weight:600;margin-bottom:10px;color:#2c3e50;display:flex;align-items:center;gap:10px}
.index-desc{color:#666;font-size:0.9em}

@media (max-width:768px){
    body{padding:0px}
    .container{padding:15px;border-radius:0px;}
    .current-weather{grid-template-columns:1fr}
    .city-name{font-size:2em}
    .temp-large{font-size:4em}
    #changeCity{flex-direction:column}
    #q,button[type="submit"]{width:100%}
    .hourly-forecast{gap:10px;padding:10px 5px}
    .hour-item{width:90px;padding:12px 8px}
    .scroll-nav{width:35px;height:35px;font-size:16px}
    .scroll-nav.left{left:5px}
    .scroll-nav.right{right:5px}
    .forecast-container{grid-template-columns:1fr}
    .life-index{grid-template-columns:1fr}
}
/* 预警信息样式 */
.alert-section{margin-bottom:40px}
.alerts-container{display:grid;gap:15px}
.alert-item{background:white;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1);cursor:pointer;transition:all 0.3s ease;overflow:hidden}
.alert-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.15)}
.alert-header{padding:15px 20px;color:white;display:flex;align-items:center;gap:10px;font-weight:600}
.alert-type{flex:0.5}
.alert-level{background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:10px;font-size:0.9em}
.alert-content{padding:15px 20px}
.alert-title{font-weight:500;margin-bottom:8px;color:#2c3e50}
.alert-time{font-size:0.9em;color:#666;margin-bottom:8px}
.alert-more{font-size:0.8em;color:#3498db;text-align:right}

.modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);overflow:auto}
.modal-content{background-color:white;border-radius:15px;width:100%;max-width:500px;position:fixed;z-index:10000;box-shadow:0 10px 40px rgba(0,0,0,0.2);animation:modalSlideIn 0.3s ease}

@keyframes modalSlideIn {
    from {opacity: 0;transform: translateY(-50px);}
    to {opacity: 1;transform: translateY(0);}
}
.close{position:absolute;right:15px;top:15px;color:#aaa;font-size:28px;font-weight:bold;cursor:pointer;z-index:10}
.close:hover{color:#333}
.modal-alert-header{padding:20px;color:white;border-radius:15px 15px 0 0;display:flex;align-items:center;gap:10px;font-weight:600}
.modal-alert-content{padding:20px;line-height:1.6;color:#2c3e50;overflow-y:auto;max-height:50vh}
.modal-alert-time{padding:15px 20px;background:#f8f9fa;border-radius:0 0 15px 15px;font-size:0.9em;color:#666;text-align:center}

@media (max-width: 768px) {
    .modal-content {width: 95%;max-width: 95%;}
    .modal-alert-content {max-height: 60vh;}
}

@media (max-height: 600px) and (orientation: landscape) {
    .modal-content {width: 80%;max-height: 90vh;}
    .modal-alert-content {max-height: 70vh;}
}