.pz-weather-app{
--pz-bg:#f4f7fb;
--pz-card:#ffffff;
--pz-text:#111827;
--pz-muted:#667085;
--pz-border:rgba(15,23,42,.10);
--pz-shadow:0 18px 55px rgba(15,23,42,.10);
--pz-soft-shadow:0 10px 28px rgba(15,23,42,.07);
--pz-radius:26px;
--pz-radius-sm:18px;
--pz-accent:#2563eb;
--pz-accent-2:#06b6d4;
--pz-good:#0f766e;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
max-width:1180px;
margin:clamp(1rem,3vw,2.5rem) auto;
padding:0 clamp(.75rem,2vw,1.25rem);
color:var(--pz-text);
box-sizing:border-box;
}
.pz-weather-app *{box-sizing:border-box}
.pz-weather-hero{
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:minmax(0,1.7fr) minmax(280px,.9fr);
gap:clamp(1rem,3vw,2rem);
align-items:stretch;
padding:clamp(1.35rem,4vw,2.4rem);
border-radius:calc(var(--pz-radius) + 8px);
background:
radial-gradient(circle at 12% 10%,rgba(37,99,235,.22),transparent 34%),
radial-gradient(circle at 88% 8%,rgba(6,182,212,.20),transparent 30%),
linear-gradient(135deg,#ffffff 0%,#eff6ff 48%,#f8fbff 100%);
border:1px solid rgba(37,99,235,.12);
box-shadow:var(--pz-shadow);
}
.pz-weather-hero::after{
content:"";
position:absolute;
right:-80px;
bottom:-120px;
width:340px;
height:340px;
border-radius:999px;
background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(6,182,212,.10));
filter:blur(2px);
}
.pz-weather-hero>div{position:relative;z-index:1}
.pz-kicker{
display:inline-flex;
align-items:center;
gap:.45rem;
margin:0 0 .75rem;
padding:.42rem .7rem;
border-radius:999px;
background:rgba(37,99,235,.09);
color:#1d4ed8;
text-transform:uppercase;
letter-spacing:.08em;
font-size:.73rem;
font-weight:850;
}
.pz-kicker::before{
content:"";
width:.5rem;
height:.5rem;
border-radius:50%;
background:linear-gradient(135deg,var(--pz-accent),var(--pz-accent-2));
}
.pz-weather-hero h2{
max-width:780px;
font-size:clamp(2rem,5vw,4.4rem);
line-height:.96;
letter-spacing:-.055em;
margin:0 0 .9rem;
}
.pz-weather-hero p{
max-width:700px;
margin:0;
color:#475467;
font-size:clamp(1rem,1.6vw,1.16rem);
line-height:1.55;
}
.pz-weather-stats{
display:grid;
grid-template-columns:1fr;
gap:.85rem;
min-width:0;
}
.pz-weather-stats div{
background:rgba(255,255,255,.76);
border:1px solid rgba(255,255,255,.72);
backdrop-filter:blur(14px);
border-radius:22px;
box-shadow:var(--pz-soft-shadow);
padding:1rem 1.1rem;
display:flex;
flex-direction:column;
justify-content:center;
min-height:92px;
}
.pz-weather-stats strong{
font-size:clamp(1.45rem,3vw,2.1rem);
letter-spacing:-.04em;
line-height:1;
}
.pz-weather-stats span{
margin-top:.35rem;
color:var(--pz-muted);
font-size:.84rem;
font-weight:700;
}
.pz-weather-controls{
position:sticky;
top:var(--wp-admin--admin-bar--height,0px);
z-index:5;
display:grid;
grid-template-columns:repeat(4,minmax(150px,1fr));
gap:.85rem;
margin:1rem 0;
padding:.85rem;
background:rgba(255,255,255,.82);
border:1px solid var(--pz-border);
border-radius:24px;
box-shadow:0 12px 35px rgba(15,23,42,.08);
backdrop-filter:blur(16px);
}
.pz-weather-controls label{
min-width:0;
display:flex;
flex-direction:column;
gap:.38rem;
}
.pz-weather-controls label span{
padding-left:.2rem;
font-weight:850;
font-size:.76rem;
color:#475467;
text-transform:uppercase;
letter-spacing:.055em;
}
.pz-weather-controls select,
.pz-table-head input{
width:100%;
min-height:46px;
border:1px solid #d7e0eb;
border-radius:16px;
padding:.68rem .8rem;
background:#fff;
color:var(--pz-text);
font:inherit;
outline:none;
transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.pz-weather-controls select:focus,
.pz-table-head input:focus{
border-color:rgba(37,99,235,.65);
box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.pz-weather-grid{
display:grid;
grid-template-columns:minmax(0,2.05fr) minmax(280px,.95fr);
gap:1rem;
align-items:stretch;
}
.pz-weather-card{
background:var(--pz-card);
border:1px solid var(--pz-border);
border-radius:var(--pz-radius);
box-shadow:var(--pz-soft-shadow);
padding:clamp(1rem,2vw,1.35rem);
}
.pz-chart-card{
height:clamp(340px,48vw,470px);
min-width:0;
}
.pz-weather-card h3{
margin:0 0 1rem;
font-size:1.15rem;
letter-spacing:-.02em;
}
.pz-highlights{
display:grid;
gap:.78rem;
}
.pz-highlights div{
position:relative;
overflow:hidden;
padding:1rem;
border-radius:20px;
background:linear-gradient(135deg,#f8fafc,#f1f5f9);
border:1px solid rgba(15,23,42,.06);
}
.pz-highlights div::before{
content:"";
position:absolute;
left:0;
top:0;
width:5px;
height:100%;
background:linear-gradient(180deg,var(--pz-accent),var(--pz-accent-2));
}
.pz-highlights span{
display:block;
color:var(--pz-muted);
font-size:.78rem;
font-weight:850;
text-transform:uppercase;
letter-spacing:.05em;
}
.pz-highlights strong{
display:block;
margin:.25rem 0;
font-size:1.16rem;
letter-spacing:-.02em;
}
.pz-highlights em{
display:inline-flex;
color:#0f172a;
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:999px;
padding:.22rem .55rem;
font-style:normal;
font-weight:800;
font-size:.86rem;
}
.pz-table-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
margin-bottom:.75rem;
}
.pz-table-head h3{margin:0}
.pz-table-head input{max-width:360px}
.pz-table-wrap{
overflow:auto;
max-height:560px;
border-radius:18px;
border:1px solid #e8eef5;
}
.pz-weather-table{
width:100%;
border-collapse:separate;
border-spacing:0;
min-width:760px;
font-size:.94rem;
}
.pz-weather-table th,
.pz-weather-table td{
padding:.82rem .9rem;
border-bottom:1px solid #edf1f5;
text-align:left;
white-space:nowrap;
}
.pz-weather-table th{
position:sticky;
top:0;
z-index:1;
background:#f8fafc;
color:#475467;
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.05em;
}
.pz-weather-table tbody tr:nth-child(even) td{background:#fcfdff}
.pz-weather-table tbody tr:hover td{background:#eef6ff}
.pz-weather-source{
display:inline-flex;
margin-top:1rem;
padding:.55rem .75rem;
border-radius:999px;
background:#f8fafc;
color:#667085;
font-size:.82rem;
}
.pz-weather-error{
padding:1rem;
border-radius:18px;
background:#fff3f3;
color:#9b1c1c;
border:1px solid rgba(155,28,28,.15);
} @media(max-width:960px){
.pz-weather-hero{grid-template-columns:1fr}
.pz-weather-stats{grid-template-columns:repeat(3,1fr)}
.pz-weather-grid{grid-template-columns:1fr}
.pz-weather-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
} @media(max-width:640px){
.pz-weather-app{
margin:1rem auto;
padding:0 .75rem;
}
.pz-weather-hero{
border-radius:24px;
padding:1.15rem;
}
.pz-weather-hero h2{
font-size:clamp(2rem,11vw,3rem);
}
.pz-weather-stats{
grid-template-columns:1fr;
}
.pz-weather-stats div{
min-height:auto;
padding:.9rem;
}
.pz-weather-controls{
position:static;
grid-template-columns:1fr;
border-radius:20px;
padding:.75rem;
}
.pz-weather-card{
border-radius:20px;
padding:1rem;
}
.pz-chart-card{
height:360px;
}
.pz-table-head{
align-items:stretch;
flex-direction:column;
}
.pz-table-head input{
max-width:none;
}
.pz-table-wrap{
max-height:520px;
}
.pz-weather-source{
border-radius:16px;
line-height:1.35;
}
} @media(max-width:390px){
.pz-weather-table{
font-size:.88rem;
}
.pz-weather-table th,
.pz-weather-table td{
padding:.68rem .72rem;
}
}