*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}html{overflow-x:auto;background:#c8e0f5}html,body{height:100%;font-family:Songti SC,STSong,SimSun,"Noto Serif SC",serif}body{width:500px;margin:0 auto;overflow:hidden;background:linear-gradient(180deg,#fff,#f0f7ff 30%,#c8e0f5);color:#2c2c2c;position:relative}#root{height:100%}.top-bar{position:fixed;top:0;left:50%;width:500px;transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-top) + 16px) 20px 12px;z-index:10}.top-bar .icon-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#2c2c2c;cursor:pointer;border:none;background:none;font-weight:300;line-height:1}.city-name{font-size:24px;font-weight:400;letter-spacing:3px;margin:0}.shichen-box{position:fixed;top:calc(var(--safe-top) + 60px);left:50%;width:500px;transform:translate(-50%);text-align:right;padding-right:20px;z-index:10}.shichen-name{font-size:22px;letter-spacing:1px;margin-bottom:2px}.shichen-desc{font-size:16px;color:#666;letter-spacing:1px}.poem-area{position:absolute;top:50%;left:8%;transform:translateY(calc(-55% - 30px));display:flex;gap:30px;align-items:flex-start}.poem-column{display:flex;flex-direction:column;align-items:center;font-size:38px;line-height:1.6;letter-spacing:2px;writing-mode:vertical-rl;text-orientation:upright}.poem-column#poemRight{margin-top:40px}.weather-area{position:fixed;bottom:calc(var(--safe-bottom) + 70px);left:50%;width:500px;transform:translate(-50%);padding:0 24px;z-index:10}.weather-main{display:flex;align-items:center;margin-bottom:12px}.weather-main-left{display:flex;align-items:baseline;flex-shrink:0;margin-left:25px}.weather-text{font-size:52px;font-weight:400;letter-spacing:1px;margin-right:4px}.weather-temp{font-size:56px;font-weight:300}.weather-temp .degree{font-size:32px;vertical-align:super}.weather-main-right{display:flex;flex-direction:column;justify-content:center;margin-left:0;font-size:17px;color:#555;line-height:1.9}.weather-main-right span{margin-right:6px}.aqi-value{font-weight:400}.weather-forecast{display:flex;justify-content:space-between;padding-top:12px}.forecast-col{text-align:center;flex:1}.forecast-col .date-line{font-size:20px;margin-bottom:10px;letter-spacing:1px}.forecast-col .sub-line{font-size:17px;color:#555;margin-bottom:2px}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:100;background:linear-gradient(180deg,#fff,#f0f7ff 30%,#c8e0f5);transition:opacity .5s}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-spinner{width:32px;height:32px;border:2px solid rgba(0,0,0,.1);border-top-color:#2c2c2c;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-tip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:50;display:none}.error-tip.show{display:block}.error-tip p{font-size:16px;color:#666;margin-bottom:16px}.error-tip button{padding:8px 28px;border:1px solid #999;border-radius:20px;background:transparent;font-size:15px;font-family:inherit;cursor:pointer;color:#333}.city-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:200;display:none;align-items:flex-end;justify-content:center}.city-modal.show{display:flex}.city-panel{background:#fff;width:100%;max-width:500px;border-radius:20px 20px 0 0;padding:calc(var(--safe-top) + 20px) 24px calc(var(--safe-bottom) + 20px);animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.city-panel h3{font-size:18px;font-weight:400;margin-bottom:16px;text-align:center}.city-search{width:100%;padding:10px 16px;border:1px solid #ddd;border-radius:10px;font-size:16px;font-family:inherit;outline:none;margin-bottom:12px}.city-search:focus{border-color:#7aaed0}.city-list{max-height:300px;overflow-y:auto}.city-item{padding:12px 8px;border-bottom:1px solid #f0f0f0;font-size:16px;cursor:pointer}.city-item:active{background:#f5f5f5}.city-item .city-adm{font-size:13px;color:#999;margin-left:8px}.city-empty{padding:20px;text-align:center;color:#999}@media (max-width: 500px){body{width:100%}.top-bar,.shichen-box,.weather-area{width:100%;left:0;transform:none}}.footer-info{position:fixed;bottom:calc(var(--safe-bottom) + 8px);left:50%;width:500px;transform:translate(-50%);text-align:center;z-index:5;font-size:12px;color:#888}.footer-info .app-download{margin-bottom:4px}.footer-info .app-download a{color:#666;text-decoration:none;font-size:13px}.footer-info .app-download a:hover{color:#333}.footer-info .app-download-hint{margin:0;color:#888;font-size:12px}.footer-info .icp-info p{font-size:11px;color:#999}@media (max-width: 500px){.footer-info{width:100%;left:0;transform:none}}.rain-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden;display:none}.rain-container.active{display:block}.raindrop{position:absolute;top:-40px;background-image:url(/image/rain.png);background-size:contain;background-repeat:no-repeat;animation:rainFall linear infinite}@keyframes rainFall{0%{transform:translateY(0) translate(0);opacity:0}10%{opacity:var(--rain-opacity, .6)}90%{opacity:var(--rain-opacity, .6)}to{transform:translateY(calc(100vh + 40px)) translate(var(--rain-drift, -10px));opacity:0}}