*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#0f172a;--color-surface:#1e293b;--color-surface-hover:#334155;--color-border:#334155;--color-text:#f1f5f9;--color-text-secondary:#94a3b8;--color-accent:#38bdf8;--color-accent-glow:#38bdf826;--color-warm:#fb923c;--color-cool:#38bdf8;--color-rain:#818cf8;--radius:16px;--radius-sm:10px;--shadow:0 4px 24px #0000004d;--font:"Noto Sans SC", system-ui, -apple-system, sans-serif}html{font-size:16px}body{font-family:var(--font);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}#app{flex-direction:column;min-height:100vh;display:flex}.header{z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border);background:#0f172ad9;align-items:center;gap:20px;padding:16px 24px;display:flex;position:sticky;top:0}.logo{white-space:nowrap;letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.search-wrapper{flex:1;max-width:420px;position:relative}.search-input{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);width:100%;color:var(--color-text);font-size:.95rem;font-family:var(--font);outline:none;padding:10px 16px;transition:border-color .2s,box-shadow .2s}.search-input::placeholder{color:var(--color-text-secondary)}.search-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}.search-dropdown{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);max-height:260px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden auto}.search-dropdown.hidden{display:none}.search-item{cursor:pointer;padding:10px 16px;font-size:.9rem;transition:background .15s}.search-item:hover,.search-item.active{background:var(--color-surface-hover)}.search-item .city-name{font-weight:500}.search-item .city-meta{color:var(--color-text-secondary);font-size:.8rem}.main-content{flex:1;width:100%;max-width:960px;margin:0 auto;padding:24px}.welcome-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:80px 20px;display:flex}.welcome-icon{margin-bottom:8px;font-size:4rem}.welcome-screen h2{font-size:1.4rem;font-weight:500}.welcome-screen p{color:var(--color-text-secondary)}.loading{flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:80px 20px;display:flex}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}.error-msg{text-align:center;color:#f87171;padding:40px 20px;font-size:1rem}.today-section{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:24px;padding:28px 32px}.today-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.today-location h2{font-size:1.5rem;font-weight:700}.today-location .today-date{color:var(--color-text-secondary);font-size:.9rem}.today-temp-main{align-items:center;gap:16px;display:flex}.today-icon{font-size:3.5rem;line-height:1}.today-temp{letter-spacing:-.04em;font-size:3.5rem;font-weight:300}.today-temp span{vertical-align:super;color:var(--color-text-secondary);font-size:1.5rem}.today-desc{color:var(--color-text-secondary);margin-bottom:20px;font-size:1.1rem}.today-details{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.detail-card{border-radius:var(--radius-sm);text-align:center;background:#ffffff0a;padding:14px 16px}.detail-card .detail-label{text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-secondary);margin-bottom:4px;font-size:.75rem}.detail-card .detail-value{font-size:1.15rem;font-weight:500}.section-title{margin-bottom:16px;font-size:1.1rem;font-weight:600}.chart-section{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:24px;padding:24px}.chart-wrapper{width:100%;height:220px;position:relative}.chart-wrapper canvas{width:100%!important;height:100%!important}.forecast-section{margin-bottom:24px}.forecast-list{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;display:grid}.forecast-card{background:var(--color-surface);border-radius:var(--radius-sm);text-align:center;box-shadow:var(--shadow);padding:16px 12px;transition:transform .2s,box-shadow .2s}.forecast-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px #0006}.forecast-card .fc-day{color:var(--color-text-secondary);margin-bottom:8px;font-size:.8rem}.forecast-card .fc-icon{margin-bottom:8px;font-size:2rem;line-height:1}.forecast-card .fc-temp{font-size:.95rem;font-weight:500}.forecast-card .fc-temp .fc-low{color:var(--color-text-secondary);font-weight:300}.forecast-card .fc-desc{color:var(--color-text-secondary);margin-top:4px;font-size:.75rem}.forecast-card.today-highlight{border:1px solid var(--color-accent);background:linear-gradient(135deg,#38bdf814,#0000)}.footer{text-align:center;color:var(--color-text-secondary);border-top:1px solid var(--color-border);padding:20px;font-size:.8rem}@media (width<=640px){.header{flex-direction:column;align-items:stretch;gap:12px;padding:12px 16px}.logo{text-align:center}.search-wrapper{max-width:none}.main-content{padding:16px}.today-section{padding:20px}.today-temp-main{justify-content:center}.today-header{text-align:center;flex-direction:column;align-items:center}.today-temp,.today-icon{font-size:2.8rem}.forecast-list{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px}.chart-wrapper{height:180px}}