* { margin:0; padding:0; box-sizing:border-box; font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
        body { background-color:#f4f5f7; }
        .loading-box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; padding: 20px; color: #fff; font-size: 1.2rem; }
        .loading-box.hide { display: none; }
        .loading-box .loading-spinner { width: 50px; height: 50px; border: 5px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20px; }
        @keyframes spin { to { transform:rotate(360deg); } }
        .loading-box .loading-text { text-align: center; line-height: 1.6; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
        .error-text{ color:#c0392b; margin-bottom:16px; }
        .retry-btn{ padding:8px 20px; background:#3490ed; color:#fff; border:none; border-radius:4px; font-size:0.95rem; cursor:pointer; }
        .retry-btn:hover{ background:#277bc0; }
        .header-bar { background-color:#3490ed; color:#fff; display:flex; justify-content:center; align-items:center; padding:12px 16px; position:relative; }
        .header-bar h1 { font-size:1.3rem; font-weight:500; }
        .menu-icon { position:absolute; right:16px; font-size:1.4rem; cursor:pointer; }
        .drop-menu { position:absolute; top:100%; right:12px; background:#ffffff; box-shadow:0 2px 10px rgba(0,0,0,0.15); border-radius:6px; width:180px; z-index:100; display:none; }
        .drop-menu.show { display:block; }
        .drop-menu a { display:block; padding:10px 14px; color:#333; text-decoration:none; font-size:0.95rem; border-bottom:1px solid #eee; }
        .drop-menu a:last-child { border-bottom:none; }
        .drop-menu a:hover { background:#f0f7ff; }
        .warning-tag { position:fixed; top:90px; right:8px; color:#222; font-weight:bold; padding:6px 12px; border-radius:8px; font-size:0.9rem; z-index:99; display:none; cursor:pointer; transition:opacity 0.2s; }
        .warning-tag.show { display:block; }
        .warning-tag:hover { opacity:0.9; }
        .warning-blue { background:#42a5f5; color:#fff; }
        .warning-yellow { background:#ffaa00; color:#222; }
        .warning-orange { background:#ff7000; color:#fff; }
        .warning-red { background:#e53935; color:#fff; }
        .warning-tag::before { content:"🚨"; margin-right:4px; }
        .weather-card { color:#ffffff; height:250px; width:100%; background-size:cover; background-position:center center; position:relative; overflow:hidden; }
        .weather-card::before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.35); z-index:1; }
        .weather-card-inner { position:relative; z-index:2; height:100%; max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; flex-direction:column; justify-content:center; }
        .update-row { display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; opacity:0.9; cursor:pointer; margin-bottom:28px; }
        .date-inline { text-align:left; margin:8px 0; }
        .pub-time-inline { text-align:right; }
        .city-row { display:flex; align-items:flex-end; gap:6px; font-size:1.6rem; margin-bottom:1px; }
        #provinceName { font-size:0.9rem; opacity:0.85; }
        #cityName { font-size:1.6rem; }
        #citySwitch { font-size:0.9rem; opacity:0.8; cursor:pointer; text-decoration:underline; align-self:flex-start; }
        .temp-main { display:flex; align-items:center; gap:14px; margin:10px 0; }
        .big-icon { font-size:72px; }
        .temp-info h2 { font-size:2.8rem; font-weight:normal; line-height:1; }
        .temp-info p { font-size:1.05rem; opacity:0.95; }
        .meta-row { display:flex; justify-content:space-between; font-size:0.9rem; gap:4px; flex-wrap:wrap; }
        .city-modal { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:200; display:none; padding:20px; }
        .city-modal.show { display:flex; align-items:center; justify-content:center; }
        .city-modal-inner { width:100%; max-width:520px; max-height:85vh; background:#fff; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
        .city-modal-head { padding:14px 16px; background:#3490ed; color:#fff; display:flex; justify-content:space-between; align-items:center; }
        .city-modal-head .close-btn { cursor:pointer; font-size:1.3rem; }
        .city-modal-body { padding:12px 16px; overflow-y:auto; flex:1; }
        .province-group { margin-bottom:14px; }
        .province-title { font-weight:bold; color:#3490ed; padding:6px 0; border-bottom:1px solid #eee; }
        .city-list { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; }
        .city-item { padding:5px 12px; background:#f4f7fb; border-radius:4px; cursor:pointer; font-size:0.92rem; }
        .city-item:hover { background:#3490ed; color:#fff; }
        .hour-section { background:#fff; padding:10px 12px; }
        .hour-section h3 { font-size:1.1rem; font-weight:500; padding-bottom:10px; margin-bottom:10px; border-bottom:2px solid #f4f5f7; }
        .hour-scroll { display:flex; overflow-x:auto; gap:12px; padding-bottom:8px; }
        .hour-scroll::-webkit-scrollbar { height:4px; }
        .hour-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; }
        .hour-item { min-width:96px; text-align:center; flex-shrink:0; background:#f8fafc; border-radius:10px; padding:12px 8px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
        .hour-item .time { font-size:0.92rem; margin-bottom:6px; font-weight:500; color:#1f2937; }
        .hour-item .icon { font-size:30px; margin:6px 0; }
        .hour-item .t { font-size:0.82rem; line-height:1.45; color:#4b5563; }
        .day-wrap-container { background:#fff; margin-top:2px; }
        .day-wrap-title { font-size:1.1rem; font-weight:500; padding:12px 16px 8px; border-bottom:2px solid #f4f5f7; }
        .day-section { display:flex; overflow-x:auto; }
        .day-item { min-width:220px; padding:14px 12px; border-right:1px solid #eee; flex-shrink:0; font-size:0.92rem; }
        .day-date { font-size:1rem; font-weight:500; margin-bottom:8px; }
        .day-weather, .night-weather { margin:5px 0; line-height:1.5; }
        .tag-rain { color:#1976d2; font-weight:500; }
        .tag-sun { color:#f57c00; font-weight:500; }
        .tag-cloud { color:#607d8b; font-weight:500; }
        .tag-default { color:#444; }
        .footer-links { background:#ffffff; padding:12px 16px; color:#444; margin-top:2px; text-align:center; }
        .footer-links span:first-child { display: block; margin-bottom: 4px; }
        .footer-links a { color:#0066bb; text-decoration:none; margin:0 6px; }
        .footer-copyright { background:#e8f4fc; padding:12px 16px; color:#666; text-align:center; }
        .sunrise-section { background: #fff; padding: 10px 12px 4px; }
        .sunrise-title { font-size:1.1rem; font-weight:500; padding-bottom:10px; margin-bottom:6px; border-bottom:2px solid #f4f5f7; }
        .sunrise-svg-box { width: 100%; }
        .sunrise-svg-box svg { width: 100%; height: auto; aspect-ratio: 800 / 400; max-height: 130px; }
        @media (min-width: 360px) { .sunrise-svg-box svg { aspect-ratio: 800 / 400; max-height: 130px; } }
        @media (min-width: 668px) { .sunrise-svg-box svg { max-height: 260px; } }
        @media (min-width: 730px) { .sunrise-svg-box svg { aspect-ratio: 800 / 400; max-height: 275px; } }
        @media (min-width: 1024px) { .sunrise-svg-box svg { aspect-ratio: 100 / 900; max-height: 420px; } }
        @media (min-width: 1524px) { .sunrise-svg-box svg { aspect-ratio: 100 / 900; max-height: 585px; } }
        .recent-search { background: #ffffff; padding: 16px 16px 12px; margin-top: 4px; border-top: 1px solid #e8ecf0; font-size: 0.95rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
        .recent-search .label { flex: 0 0 100%; font-weight: 500; color: #555; margin-right: 4px; }
        .recent-search a { color: #0066bb; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color 0.2s; }
        .recent-search a:hover { border-bottom-color: #0066bb; }
        .recent-search .sep { color: #ccc; user-select: none; }
		
		.pv-stats, .pv-stats *{
			text-align:center !important;
		}
		.pv-stats{
			display:block !important;
			padding:12px 16px 6px !important;
			font-size:13px !important;
			color:#64748b !important;
		}
		.footer{
			display:block !important;
			text-align:center !important;
			padding:6px 16px 24px !important;
			font-size:12px !important;
			color:#94a3b8 !important;
		}