.meteo *,.meteo *::before,.meteo *::after{box-sizing:border-box;margin:0;padding:0}
.meteo{--sky-deep:#0a2f2c;--sky-mid:#0f5953;--sky-light:#2f7f78;
    --gold:#f2c45a;--gold-light:#ffe29a;--sunrise:#e8723a;
    --white:#fff;--white-60:rgba(255,255,255,.6);
    --white-20:rgba(255,255,255,.15);--white-10:rgba(255,255,255,.08);
    --card-bg:rgba(255,255,255,.07);--card-border:rgba(255,255,255,.12);
    --radius:16px;--radius-sm:10px;--shadow:0 8px 32px rgba(0,0,0,.35);}
.meteo{font-family:var(--san);background:var(--sky-deep);color:var(--white);min-height:100vh;overflow-x:hidden}
.meteo::before{content:'';position:absolute;inset:0;background:
    radial-gradient(ellipse 80% 50% at 20% 10%,rgba(47,127,120,.6) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%,rgba(255,112,67,.15) 0%,transparent 50%),
    linear-gradient(160deg,#0a2f2c 0%,#0c3f3a 40%,#0a2f2c 100%);z-index:-1}
.meteo::after{content:'';position:absolute;inset:0;background-image:
    radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 25% 5%, rgba(255,255,255,.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 50% 20%,rgba(255,255,255,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 70% 8%, rgba(255,255,255,.3) 0%,transparent 100%),
    radial-gradient(1px 1px at 88% 18%,rgba(255,255,255,.5) 0%,transparent 100%);
    z-index:-1;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.6}to{opacity:1}}
.meteo .container{max-width:1100px;margin:0 auto;padding:24px 16px 60px}
.meteo .site-header{text-align:center;padding:40px 0 36px;animation:fadeDown .7s ease both}
.meteo .location-badge{display:inline-flex;align-items:center;gap:6px;background:var(--white-20);
    border:1px solid var(--card-border);border-radius:50px;padding:5px 16px;
    font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);margin-bottom:16px}
.meteo .site-header h1{font-family:var(--ser);font-size:clamp(2rem,6vw,3.8rem);
    font-weight:900;line-height:1.1;letter-spacing:-.02em}
.meteo .site-header h1 span{color:var(--gold)}
.meteo .site-header .subtitle{margin-top:8px;font-size:.9rem;color:var(--white-60)}
.meteo .refresh-info{margin-top:12px;font-size:.75rem;color:var(--white-60)}
.meteo .section-title{font-family:var(--ser);font-size:1.1rem;font-weight:700;
    color:var(--gold-light);text-transform:uppercase;letter-spacing:.1em;
    margin-bottom:16px;display:flex;align-items:center;gap:8px}
.meteo .section-title::after{content:'';flex:1;height:1px;background:var(--card-border)}
.meteo .hero-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:32px;animation:fadeUp .6s .1s ease both}
@media(max-width:900px){.meteo .hero-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.meteo .hero-grid{grid-template-columns:1fr}}
.meteo .hero-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:28px;backdrop-filter:blur(20px);box-shadow:var(--shadow);position:relative;overflow:hidden;
    transition:transform .3s ease,box-shadow .3s ease}
.meteo .hero-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.45)}
.meteo .hero-card.today{background:linear-gradient(135deg,rgba(47,127,120,.5) 0%,rgba(15,44,100,.6) 100%);border-color:rgba(242,196,90,.3)}
.meteo .hero-card.today::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;
    background:radial-gradient(circle,rgba(242,196,90,.15) 0%,transparent 70%);pointer-events:none}
.meteo .hero-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:600;margin-bottom:4px}
.meteo .hero-date{font-size:.85rem;color:var(--white-60);margin-bottom:20px}
.meteo .hero-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.meteo .hero-temp{font-family:var(--ser);font-size:clamp(3.5rem,10vw,5rem);font-weight:900;line-height:1;letter-spacing:-.03em}
.meteo .hero-temp sup{font-size:.4em;vertical-align:top;margin-top:.3em}
.meteo .hero-emoji{font-size:3rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));animation:floatIcon 3s ease-in-out infinite}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.meteo .hero-desc{font-size:1rem;color:var(--white-60);margin-top:6px}
.meteo .hero-feel{margin-top:4px;font-size:.85rem;color:var(--gold-light)}
.meteo .hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.meteo .stat-item{background:var(--white-10);border-radius:var(--radius-sm);padding:10px 12px;font-size:.8rem}
.meteo .stat-item .stat-label{color:var(--white-60);font-size:.72rem;margin-bottom:2px}
.meteo .stat-item .stat-val{font-weight:600;font-size:.92rem}
.meteo .sunrise-sunset{display:flex;gap:16px;margin-top:12px}
.meteo .sun-item{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--white-60)}
.meteo .sun-item strong{color:var(--gold-light)}
.meteo .forecast-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:32px;animation:fadeUp .6s .2s ease both}
@media(max-width:900px){.meteo .forecast-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.meteo .forecast-row{grid-template-columns:repeat(2,1fr)}}
.meteo .day-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-sm);
    padding:14px 10px;text-align:center;backdrop-filter:blur(12px);transition:transform .25s ease,background .25s ease}
.meteo .day-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}
.meteo .day-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-light);font-weight:600}
.meteo .day-date{font-size:.7rem;color:var(--white-60);margin-bottom:10px}
.meteo .day-emoji{font-size:1.8rem;display:block;margin:4px 0}
.meteo .day-temps{display:flex;justify-content:center;gap:6px;font-size:.85rem;margin-top:6px}
.meteo .day-max{font-weight:700}
.meteo .day-min{color:var(--white-60)}
.meteo .day-precip{font-size:.7rem;color:#90caf9;margin-top:4px}
.meteo .day-rain-bar{height:3px;background:var(--white-10);border-radius:2px;margin-top:6px;overflow:hidden}
.meteo .day-rain-fill{height:100%;background:linear-gradient(90deg,#42a5f5,#90caf9);border-radius:2px;transition:width 1s ease}
.meteo .aqi-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:24px;backdrop-filter:blur(16px);margin-bottom:32px;animation:fadeUp .6s .3s ease both}
.meteo .aqi-grid{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
@media(max-width:560px){.meteo .aqi-grid{grid-template-columns:1fr}}
.meteo .aqi-number{font-family:var(--ser);font-size:4rem;font-weight:900;line-height:1}
.meteo .aqi-1{color:#66bb6a}
.meteo .aqi-2{color:#ffee58}
.meteo .aqi-3{color:#ffa726}
.meteo .aqi-4{color:#ef5350}
.meteo .aqi-5{color:#ab47bc}
.meteo .aqi-6{color:#8d6e63}
.meteo .aqi-label-text{font-size:.85rem;font-weight:600;margin-top:4px}
.meteo .aqi-bar-wrap{background:var(--white-10);height:8px;border-radius:4px;overflow:hidden;margin:12px 0}
.meteo .aqi-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#66bb6a,#ffee58,#ffa726,#ef5350,#ab47bc)}
.meteo .aqi-pollutants{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin-top:8px}
.meteo .poll-item{background:var(--white-10);border-radius:8px;padding:8px 10px;font-size:.75rem}
.meteo .poll-name{color:var(--white-60)}
.meteo .poll-val{font-weight:600;font-size:.88rem;margin-top:2px}
.meteo .map-section{margin-bottom:32px;animation:fadeUp .6s .4s ease both}
.meteo .map-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.meteo .map-tab{background:var(--white-10);border:1px solid var(--card-border);border-radius:50px;
    padding:6px 18px;font-size:.8rem;font-weight:600;color:var(--white-60);
    cursor:pointer;transition:all .2s ease;letter-spacing:.05em}
.meteo .map-tab.active,.meteo .map-tab:hover{background:var(--gold);border-color:var(--gold);color:var(--sky-deep)}
.meteo .map-panel{display:none}
.meteo .map-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.meteo .map-panel.active{grid-template-columns:1fr}}
.meteo .map-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:20px;backdrop-filter:blur(16px)}
.meteo .map-card-title{font-family:var(--ser);font-size:1rem;font-weight:700;
    color:var(--gold-light);margin-bottom:14px}
.meteo .leaflet-wrap{height:420px;border-radius:10px;overflow:hidden;border:1px solid var(--card-border)}
.meteo .leaflet-popup-content-wrapper{background:#0c3f3a !important;color:#fff !important;
    border:1px solid rgba(255,255,255,.15) !important;border-radius:10px !important;
    box-shadow:0 8px 24px rgba(0,0,0,.5) !important}
.meteo .leaflet-popup-tip{background:#0c3f3a !important}
.meteo .leaflet-popup-content{margin:10px 14px !important;font-family:var(--san)}
.meteo .pop-city{font-weight:700;font-size:.95rem;margin-bottom:4px}
.meteo .pop-temp{font-size:1.4rem;font-weight:900;color:#f2c45a}
.meteo .pop-desc{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:2px}
.meteo .pop-detail{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.meteo .map-legend{display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:420px}
.meteo .legend-item{display:flex;align-items:center;gap:10px;background:var(--white-10);
    border-radius:8px;padding:8px 12px;font-size:.8rem;transition:background .2s;cursor:pointer}
.meteo .legend-item:hover{background:rgba(255,255,255,.14)}
.meteo .legend-item.home{border:2px solid var(--gold)}
.meteo .legend-item.selected{border:2px solid #66bb6a !important;background:rgba(102,187,106,.15) !important;}
.meteo .legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.meteo .legend-city{font-weight:600;flex:1}
.meteo .legend-temp{font-weight:700;font-size:.9rem}
.meteo .site-footer{text-align:center;padding:24px 0;font-size:.75rem;color:var(--white-60);border-top:1px solid var(--card-border)}
.meteo .site-footer a{color:var(--gold-light);text-decoration:none}
.meteo .error-banner{background:rgba(239,83,80,.15);border:1px solid rgba(239,83,80,.3);
    border-radius:var(--radius-sm);padding:16px;text-align:center;color:#ef9a9a;margin-bottom:24px}
.meteo .divider{height:1px;background:var(--card-border);margin:8px 0 28px}
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.meteo{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;padding-top:calc(var(--hh,78px) + 6px);font-family:var(--san);color:#fff;line-height:1.5}
.meteo a{color:inherit}.meteo .lnk-av{color:var(--gold-light);font-weight:600;text-decoration:none}.meteo .lnk-av:hover{text-decoration:underline}
.meteo h1,.meteo h2,.meteo h3{margin:0}.meteo p{margin:0}
.mx1{color:var(--gold-light);text-decoration:none}
.mx2{color:var(--gold-light);font-weight:600}
.mx3{font-size:.65rem;color:var(--white-60);font-weight:400;letter-spacing:.05em}
.mx4{text-align:center}
.mx5{font-size:.72rem;color:var(--white-60);margin-top:4px}
.mx6{color:var(--white-60);font-size:.68rem}
.mx7{color:var(--white-60);font-size:.8rem;font-weight:400}
.mx8{font-size:.72rem;color:var(--white-60)}
.mx9{color:var(--white-60);font-size:.75rem}
.mx10{margin-top:6px}
.meteo .frm-inline{display:inline;margin:0}.meteo .lnk-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}.meteo .lnk-av.lnk-btn{color:var(--gold-light,#ffe29a);font-weight:600}.meteo button.rbtn{font:inherit;cursor:pointer}