*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
        html{scroll-behavior:smooth;}
        body{background-color:#f0f4f9;color:#2d3748;padding:0;}
        .header{background:linear-gradient(90deg,#1558b8,#1967d2);color:#fff;padding:18px 20px;}
        .header .container-inner{max-width:1140px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
        .logo{font-size:22px;font-weight:700;}
        .header-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
        .header-links a{color:#ffffff;text-decoration:none;font-size:15px;padding:6px 10px;border-radius:6px;transition:0.24s ease;opacity:0.92;}
        .header-links a:hover{opacity:1;background:rgba(255,255,255,0.15);text-decoration:none;}
        .hamburger{display:none;font-size:24px;background:transparent;border:none;color:#fff;cursor:pointer;padding:4px 8px;}
        @media(max-width:640px){
            .header .container-inner{flex-wrap:wrap;}
            .logo{font-size:20px;}
            .hamburger{display:block;}
            .header-links{display:none;width:100%;margin-top:12px;flex-direction:column;gap:6px;}
            .header-links.show{display:flex;}
        }
        .container{max-width:1140px;margin:0 auto;padding:16px;}
        .card{background:#ffffff;border-radius:16px;padding:24px 26px;margin-bottom:20px;box-shadow:0 2px 14px rgba(25,103,210,0.08);}
        .loading-box{min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;color:#64748b;}
        .load-spinner{width:44px;height:44px;border:4px solid #e2ebfa;border-top-color:#1967d2;border-radius:50%;animation:spin 0.8s linear infinite;}
        @keyframes spin{to{transform:rotate(360deg);}}
        .error-box{min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#dc2626;gap:10px;text-align:center;padding:0 10px;}
        .title-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
        .city-name{font-size:22px;font-weight:bold;display:flex;color:#1967d2;}
        .city-switch{font-size:0.85rem;color:#1967d2;cursor:pointer;margin-left:8px;display:inline-block;background:transparent;border:none;padding:0;}
        .publish-time{font-size:13px;color:#64748b;}
        .real-main{display:flex;flex-wrap:wrap;gap:28px;align-items:center;}
        .temp-big{font-size:64px;font-weight:400;}
        .weather-info-text{font-size:18px;color:#444;}
        .meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:14px;margin-top:22px;}
        .meta-item{background:linear-gradient(135deg,#f7fafe,#eaf2fc);padding:16px 14px;border-radius:12px;border:1px solid #e2ebfa;box-shadow:0 2px 6px rgba(25,103,210,0.05);display:flex;align-items:center;gap:12px;transition:0.24s ease;}
        .meta-item:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(25,103,210,0.12);}
        .meta-icon{width:42px;height:42px;background:#d7e7fc;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;}
        .meta-text-wrap{flex:1;}
        .meta-label{font-size:13px;color:#64748b;}
        .meta-val{font-size:20px;font-weight:600;margin-top:4px;color:#1967d2;}
        .comfort-tag{display:inline-block;padding:6px 14px;border-radius:10px;color:#fff;font-size:14px;}
        h3{margin-bottom:18px;color:#1967d2;font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px;}
        h3::before{content:"";width:4px;height:18px;background:#1967d2;border-radius:2px;}
        .air-block{padding:22px 24px;border-radius:12px;transition:background 0.3s ease;}
        .air-top{display:flex;align-items:center;gap:18px;margin-bottom:14px;flex-wrap:wrap;}
        .air-aqi-num{font-size:44px;font-weight:bold;line-height:1;}
        .air-level-tag{padding:8px 18px;border-radius:10px;font-size:15px;font-weight:500;color:#fff;}
        .air-desc{font-size:14px;line-height:1.7;}
        .hour-wrap{overflow-x:auto;padding:8px 4px 12px 4px;-webkit-overflow-scrolling:touch;}
        .hour-wrap::-webkit-scrollbar{height:6px;}
        .hour-wrap::-webkit-scrollbar-thumb{background:#c8d8f0;border-radius:3px;}
        .hour-list{display:flex;gap:14px;min-width:max-content;}
        .hour-item{min-width:130px;background:linear-gradient(145deg,#f7fafe,#edf4fc);padding:16px 12px;border-radius:12px;font-size:13px;text-align:center;box-shadow:0 2px 6px rgba(25,103,210,0.06);border:1px solid #e4edfa;}
        .hour-item>div:first-child{font-weight:600;color:#1967d2;font-size:15px;margin-bottom:10px;}
        .hour-item>div{margin:6px 0;color:#444;}
        .forecast-wrap{overflow-x:auto;padding:8px 4px 12px 4px;-webkit-overflow-scrolling:touch;}
        .forecast-wrap::-webkit-scrollbar{height:6px;}
        .forecast-wrap::-webkit-scrollbar-thumb{background:#c8d8f0;border-radius:3px;}
        .forecast-row{display:flex;gap:16px;min-width:max-content;}
        .day-item{min-width:170px;background:linear-gradient(145deg,#f7fafe,#edf4fc);border-radius:14px;padding:18px 14px;box-shadow:0 2px 8px rgba(25,103,210,0.06);border:1px solid #e4edfa;}
        .day-date{font-weight:600;margin-bottom:12px;color:#1967d2;font-size:15px;}
        .day-weather,.night-weather{margin:10px 0;line-height:1.6;font-size:14px;}
        .day-item>div:last-child{margin-top:12px;font-size:13px;color:#60789c;}
        .weather-tag{display:inline-block;padding:3px 8px;border-radius:6px;font-size:13px;}
        .tag-sun{background:#fed7aa;color:#c2410c;}
        .tag-cloud{background:#e2e8f0;color:#475569;}
        .tag-rain{background:#bae6fd;color:#0369a1;}
        .tag-snow{background:#e0e7ff;color:#4338ca;}
        .warn-card{background:#fff3cd;}
        .warn-title{color:#b45309;font-weight:bold;font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:10px;}
        .warn-img{width:48px;height:48px;object-fit:contain;border-radius:8px;flex-shrink:0;}
        .warn-content{font-size:14px;line-height:1.7;color:#78350f;}
        .footer{background:#ffffff;margin-top:40px;padding:24px 16px;text-align:center;font-size:14px;color:#64748b;border-top:1px solid #e2ebfa;}

        .city-modal { display: none; position: fixed; inset:0; background:rgba(0,0,0,0.45); z-index:999; align-items:center; justify-content:center; padding:20px; }
        .city-modal.show { display:flex; }
        .city-modal-inner { width:100%; max-width:980px; max-height:85vh; background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 30px rgba(0,0,0,0.2); }
        .city-modal-head { padding:16px 20px; background:#1967d2; color:#fff; display:flex; justify-content:space-between; align-items:center; font-size:1.1rem; }
        .city-modal-head .close-btn { cursor:pointer; font-size:1.5rem; line-height:1; }
        .city-modal-body { padding:16px 20px; overflow-y:auto; flex:1; }
        .province-group { margin-bottom:18px; }
        .province-title { font-weight:bold; color:#1967d2; padding:6px 0; border-bottom:1px solid #eee; margin-bottom:8px; }
        .city-list { display:flex; flex-wrap:wrap; gap:8px; }
        .city-item { padding:6px 14px; background:#f0f4f9; border-radius:20px; cursor:pointer; font-size:0.95rem; transition:0.2s; border:1px solid transparent; }
        .city-item:hover { background:#1967d2; color:#fff; border-color:#1967d2; }

        .recent-search { background:#ffffff; padding:16px 20px; border-radius:16px; margin-bottom:20px; box-shadow:0 2px 14px rgba(25,103,210,0.08); display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
        .recent-search .label { font-weight:600; color:#1967d2; font-size:0.95rem; }
        .recent-search a { color:#2d3748; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; transition:0.2s; font-size:0.95rem; }
        .recent-search a:hover { border-bottom-color:#1967d2; color:#1967d2; }
        .recent-search .sep { color:#ccc; user-select:none; }

        @media(max-width:768px){
            .container{padding:12px;}
            .card{padding:18px 16px;}
            .real-main{flex-direction:column;align-items:flex-start;gap:20px;}
            .temp-big{font-size:52px;}
            .meta-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
            .air-block{padding:16px 14px;}
            .air-aqi-num{font-size:36px;}
            .city-modal-inner{max-width:100%;margin:10px;}
        }
        @media(max-width:480px){
            .temp-big{font-size:44px;}
            .city-name{font-size:19px;}
            .meta-icon{width:36px;height:36px;font-size:17px;}
            .meta-val{font-size:17px;}
            .hour-item{min-width:110px;}
            .day-item{min-width:145px;}
        }