.ws40con {
--ws40con-blue: #1f6fd6;
--ws40con-ink: #0f1c2e;
--ws40con-amber: #d97706;
--ws40con-canvas: #eef2f7;
--ws40con-card-bg: #ffffff;
--ws40con-border: #dbe4ef;
--ws40con-muted: #5b6b7f;
--ws40con-radius: 16px;
--ws40con-gap: 14px;
--ws40con-shadow: 0 1px 2px rgba(15, 28, 46, 0.04), 0 2px 6px rgba(15, 28, 46, 0.05);
display: block;
background: var(--ws40con-canvas);
color: var(--ws40con-ink);
border-radius: var(--ws40con-radius);
padding: var(--ws40con-gap);
font-size: 14px;
line-height: 1.45;
box-sizing: border-box;
width: 100%; min-width: 0;
max-width: 100%;
overflow-x: clip;
}
.ws40con *,
.ws40con *::before,
.ws40con *::after {
box-sizing: inherit;
} .ws40con button,
.ws40con dl,
.ws40con dt,
.ws40con dd,
.ws40con h1,
.ws40con h2,
.ws40con h3,
.ws40con h4,
.ws40con p,
.ws40con small,
.ws40con table,
.ws40con tr,
.ws40con td {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
text-overflow: clip !important;
font-family: inherit;
font-style: inherit;
text-transform: none;
letter-spacing: normal;
text-decoration: none;
text-shadow: none;
float: none;
list-style: none;
}
.ws40con button,
.ws40con dl,
.ws40con dt,
.ws40con h1,
.ws40con h2,
.ws40con h3,
.ws40con h4,
.ws40con p,
.ws40con small {
white-space: normal !important;
} .ws40con button::before, .ws40con button::after,
.ws40con dl::before,     .ws40con dl::after,
.ws40con dt::before,     .ws40con dt::after,
.ws40con dd::before,     .ws40con dd::after,
.ws40con h1::before,     .ws40con h1::after,
.ws40con h2::before,     .ws40con h2::after,
.ws40con h3::before,     .ws40con h3::after,
.ws40con h4::before,     .ws40con h4::after,
.ws40con p::before,      .ws40con p::after,
.ws40con small::before,  .ws40con small::after {
content: none !important;
}  .ws40con__zone--top {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: var(--ws40con-gap); align-self: stretch;
grid-column: 1 / -1;
} .ws40con__zone--bottom {
display: block;
width: 100%;
max-width: 100%;
margin-top: var(--ws40con-gap);
align-self: stretch;
grid-column: 1 / -1;
} .ws40con__zone--top.ws40con__zone--v,
.ws40con__zone--bottom.ws40con__zone--v {
display: flex;
flex-direction: column;
gap: var(--ws40con-gap);
} .ws40con__zone--top.ws40con__zone--h,
.ws40con__zone--bottom.ws40con__zone--h {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--ws40con-gap);
align-items: stretch;
}
.ws40con__zone--top.ws40con__zone--h > .ws40con-block,
.ws40con__zone--bottom.ws40con__zone--h > .ws40con-block {
flex: 1 1 240px;
min-width: 0;
}
@media (max-width: 600px) {
.ws40con__zone--top.ws40con__zone--h,
.ws40con__zone--bottom.ws40con__zone--h {
flex-direction: column;
flex-wrap: nowrap;
}
.ws40con__zone--top.ws40con__zone--h > .ws40con-block,
.ws40con__zone--bottom.ws40con__zone--h > .ws40con-block {
flex-basis: auto;
width: 100%;
}
} .ws40con__grid {
display: grid;
width: 100%;
grid-template-columns: minmax(0, 1fr);
gap: var(--ws40con-gap);
align-items: start;
}
.ws40con__grid.has-left {
grid-template-columns: 20% minmax(0, 1fr); }
.ws40con__grid.has-right {
grid-template-columns: minmax(0, 1fr) 25%; }
.ws40con__grid.has-left.has-right {
grid-template-columns: 20% minmax(0, 1fr) 25%; }
.ws40con__col {
display: flex;
flex-direction: column;
gap: var(--ws40con-gap);
min-width: 0;
} .ws40con-block {
background: var(--ws40con-card-bg);
border: 1px solid var(--ws40con-border);
border-radius: var(--ws40con-radius); box-shadow: var(--ws40con-shadow);
overflow: hidden; min-width: 0;
max-width: 100%; display: flex;
flex-direction: column;
}
.ws40con-block__head {
background: var(--ws40con-blue);
color: #fff;
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ws40con-block__head-extra {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.ws40con-block__title {
margin: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.ws40con-block__body {
padding: 12px 14px;
min-width: 0;
}
.ws40con-empty {
margin: 0;
color: var(--ws40con-muted);
font-style: italic;
} .ws40con-cards .ws40con-block__body {
padding: 10px;
}
.ws40con-cards__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.ws40con-card {
appearance: none;
border: 1px solid var(--ws40con-border);
border-left: 4px solid var(--ws40con-accent, var(--ws40con-border));
border-radius: 12px;
background: var(--ws40con-card-bg);
padding: 10px 12px;
text-align: left;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 4px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
} .ws40con-card[data-ws40con-field="temp"]     { --ws40con-accent: #e0533d; }
.ws40con-card[data-ws40con-field="humidity"] { --ws40con-accent: #2f8fd6; }
.ws40con-card[data-ws40con-field="pressure"] { --ws40con-accent: #7c6fd6; }
.ws40con-card[data-ws40con-field="wind"]     { --ws40con-accent: #13a89a; }
.ws40con-card[data-ws40con-field="gust"]     { --ws40con-accent: #0d9488; }
.ws40con-card[data-ws40con-field="rain"]     { --ws40con-accent: #2563eb; }
.ws40con-card[data-ws40con-field="feels"]    { --ws40con-accent: #f0743a; }
.ws40con-card[data-ws40con-field="dew"]      { --ws40con-accent: #06b6d4; }
.ws40con-card[data-ws40con-field="uv"]       { --ws40con-accent: #eab308; }
.ws40con-card:hover,
.ws40con-card:focus-visible {
border-color: var(--ws40con-accent, var(--ws40con-blue));
outline: none;
}
.ws40con-card.is-active {
border-color: var(--ws40con-accent, var(--ws40con-blue));
box-shadow: 0 0 0 2px var(--ws40con-accent, var(--ws40con-blue));
}
.ws40con-card__label {
color: var(--ws40con-muted);
font-size: 11px;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0.04em; overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.ws40con-card__value {
font-size: 20px;
font-weight: 700;
color: var(--ws40con-ink); overflow-wrap: break-word;
} .ws40con-chart__tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.ws40con-chart__period {
appearance: none;
border: 1px solid var(--ws40con-border);
background: var(--ws40con-card-bg);
color: var(--ws40con-muted);
border-radius: 999px;
font-size: 12px;
padding: 4px 12px;
cursor: pointer;
}
.ws40con-chart__period.is-active {
background: var(--ws40con-blue);
border-color: var(--ws40con-blue);
color: #fff;
}
.ws40con-chart__canvas {
position: relative;
min-height: 220px;
}
.ws40con-chart__el {
width: 100%;
height: 220px;
display: block;
} .ws40con-full__grid {
columns: 200px;
column-gap: 24px;
}
.ws40con-full__col {
min-width: 0;
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin-bottom: 16px;
}
.ws40con-full__gtitle {
margin: 0 0 4px;
font-size: 11px;
font-weight: 700;
color: var(--ws40con-blue);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 2px solid var(--ws40con-blue);
padding-bottom: 4px;
}
.ws40con-full__list {
margin: 0;
padding: 0;
}
.ws40con-full__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
border-bottom: 1px dashed var(--ws40con-border);
padding: 4px 0;
font-size: 13px;
} .ws40con-full__icon {
flex: 0 0 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.ws40con-full__label {
color: var(--ws40con-muted);
font-size: var(--ws40con-label-size, inherit);
flex: 1 1 auto;
min-width: 0; overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
line-height: 1.25;
}
.ws40con-full__val {
margin: 0;
font-weight: 700;
font-size: var(--ws40con-value-size, inherit);
color: var(--ws40con-ink);
white-space: nowrap;
text-align: right;
flex: 0 0 auto;
}
.ws40con-full__time {
font-weight: 400;
color: var(--ws40con-muted);
font-size: 11px;
margin-left: 4px;
}
@media (max-width: 600px) {
.ws40con-full__grid {
columns: 1;
}
} .ws40con-gauges__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.ws40con-g {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
border: 1px solid var(--ws40con-border);
border-radius: 12px;
background: var(--ws40con-card-bg);
}
.ws40con-g__label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ws40con-muted);
margin: 0;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.ws40con-g__current {
margin: 0;
}
.ws40con-g__value {
font-size: 22px;
font-weight: 700;
color: var(--ws40con-ink);
}
.ws40con-g__svg {
width: 100%;
max-width: 200px;
display: block;
margin: 4px auto 0;
} .ws40con-g__vert {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
margin: 4px auto 0;
font-size: 10px;
color: var(--ws40con-muted);
}
.ws40con-g__vert-track {
height: 100px;
background: var(--ws40con-border);
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.ws40con-g__vert-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: height 0.4s ease;
} .ws40con-g__sub {
display: flex;
justify-content: space-between;
gap: 6px;
font-size: 11px;
color: var(--ws40con-muted);
margin-top: 4px;
}
.ws40con-g__sub-item strong {
color: var(--ws40con-ink);
font-weight: 700;
}
.ws40con-g__trend {
font-size: 16px;
font-weight: 700;
color: var(--ws40con-ink);
} .ws40con-compass2 {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 16px;
} @media (max-width: 640px) {
.ws40con-compass2 {
justify-content: center;
gap: 12px;
}
.ws40con-compass2--large  .ws40con-compass2__svg { width: 120px; height: 120px; }
.ws40con-compass2--medium .ws40con-compass2__svg { width: 100px; height: 100px; }
.ws40con-compass2--small  .ws40con-compass2__svg { width:  70px; height:  70px; }
.ws40con-compass2__info  { min-width: 0; }
.ws40con-compass2__dir   { font-size: 22px; }
.ws40con-compass2__spd   { font-size: 13px; white-space: nowrap; }
.ws40con-compass2__gust  { font-size: 11px; white-space: nowrap; }
}
.ws40con-compass2__svg {
flex-shrink: 0;
overflow: visible;
} .ws40con-compass2--small  .ws40con-compass2__svg { width:  80px; height:  80px; }
.ws40con-compass2--medium .ws40con-compass2__svg { width: 140px; height: 140px; }
.ws40con-compass2--large  .ws40con-compass2__svg { width: 180px; height: 180px; }
.ws40con-compass2__ring-outer {
fill: var(--ws40con-card-bg);
stroke: var(--ws40con-border);
stroke-width: 1.5;
}
.ws40con-compass2__ring-inner {
fill: none;
stroke: var(--ws40con-border);
stroke-width: 0.5;
stroke-dasharray: 2 3;
}
.ws40con-compass2__tick {
stroke: var(--ws40con-muted);
stroke-width: 0.8;
}
.ws40con-compass2__tick--major {
stroke: var(--ws40con-ink);
stroke-width: 1.5;
} .ws40con-compass2__card {
font-size: 9px;
font-weight: 700;
fill: var(--ws40con-ink);
font-family: inherit;
} .ws40con-compass2__inter {
font-size: 7px;
font-weight: 600;
fill: var(--ws40con-muted);
font-family: inherit;
} .ws40con-compass2__sec {
font-size: 5.5px;
font-weight: 400;
fill: var(--ws40con-muted);
font-family: inherit;
opacity: 0.7;
} .ws40con-compass2__windname {
font-size: 7px;
font-weight: 700;
fill: var(--ws40con-blue);
font-family: inherit;
letter-spacing: 0;
}
.ws40con-compass2__windname--inter {
font-size: 6px;
font-weight: 600;
opacity: 0.85;
}
.ws40con-compass2__needle-n {
fill: #e0533d;
}
.ws40con-compass2__needle-s {
fill: #c3c4c7;
}
.ws40con-compass2__hub {
fill: var(--ws40con-ink);
}
.ws40con-compass2__info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
min-width: 90px;
}
.ws40con-compass2__dir {
font-size: 28px;
font-weight: 800;
color: var(--ws40con-ink);
line-height: 1;
}
.ws40con-compass2__windlabel {
font-size: 11px;
color: var(--ws40con-blue);
font-weight: 600;
margin-top: -2px;
}
.ws40con-compass2__spd {
font-size: 15px;
color: var(--ws40con-ink);
font-weight: 700;
margin-top: 4px;
}
.ws40con-compass2__gust {
font-size: 12px;
color: var(--ws40con-muted);
} .ws40con-bft {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 6px 0;
}
.ws40con-bft__icon {
line-height: 0;
}
.ws40con-bft__main {
display: flex;
align-items: baseline;
gap: 6px;
}
.ws40con-bft__num {
font-size: 44px;
font-weight: 800;
line-height: 1;
color: var(--ws40con-ink);
}
.ws40con-bft__unit {
font-size: 16px;
font-weight: 600;
color: var(--ws40con-muted);
}
.ws40con-bft__label {
font-size: 15px;
font-weight: 600;
color: var(--ws40con-blue);
}
.ws40con-bft__spd {
font-size: 15px;
font-weight: 700;
color: var(--ws40con-ink);
margin-top: 2px;
}
.ws40con-bft__gust {
font-size: 12px;
font-weight: 600;
color: var(--ws40con-muted);
}
.ws40con-bft__range {
font-size: 12px;
font-weight: 600;
color: var(--ws40con-muted);
margin-top: 2px;
}
.ws40con-bft__effect {
font-size: 12px;
font-style: italic;
color: var(--ws40con-muted);
text-align: center;
max-width: 220px;
line-height: 1.35;
margin-top: 2px;
} .ws40con-bft--color[data-bft-force="0"]  .ws40con-bft__num { color: #7FB3E0; }
.ws40con-bft--color[data-bft-force="1"]  .ws40con-bft__num { color: #5BA84F; }
.ws40con-bft--color[data-bft-force="2"]  .ws40con-bft__num { color: #5FB84F; }
.ws40con-bft--color[data-bft-force="3"]  .ws40con-bft__num { color: #8DB52A; }
.ws40con-bft--color[data-bft-force="4"]  .ws40con-bft__num { color: #B6BB22; }
.ws40con-bft--color[data-bft-force="5"]  .ws40con-bft__num { color: #D9BE1F; }
.ws40con-bft--color[data-bft-force="6"]  .ws40con-bft__num { color: #F5B731; }
.ws40con-bft--color[data-bft-force="7"]  .ws40con-bft__num { color: #F59331; }
.ws40con-bft--color[data-bft-force="8"]  .ws40con-bft__num { color: #F06B2A; }
.ws40con-bft--color[data-bft-force="9"]  .ws40con-bft__num { color: #E8492A; }
.ws40con-bft--color[data-bft-force="10"] .ws40con-bft__num { color: #D6322A; }
.ws40con-bft--color[data-bft-force="11"] .ws40con-bft__num { color: #B81E2A; }
.ws40con-bft--color[data-bft-force="12"] .ws40con-bft__num { color: #8B1424; }
.ws40con-bft__bar {
display: flex;
gap: 3px;
width: 100%;
max-width: 280px;
margin-top: 4px;
}
.ws40con-bft__seg {
flex: 1;
height: 12px;
border-radius: 3px;
background: var(--ws40con-border);
transition: background-color .2s ease;
} .ws40con-bft__seg--0.is-on  { background: #7FB3E0; }
.ws40con-bft__seg--1.is-on  { background: #6FC36F; }
.ws40con-bft__seg--2.is-on  { background: #5FB84F; }
.ws40con-bft__seg--3.is-on  { background: #9FCB3A; }
.ws40con-bft__seg--4.is-on  { background: #CFD52E; }
.ws40con-bft__seg--5.is-on  { background: #F0D52A; }
.ws40con-bft__seg--6.is-on  { background: #F5B731; }
.ws40con-bft__seg--7.is-on  { background: #F59331; }
.ws40con-bft__seg--8.is-on  { background: #F06B2A; }
.ws40con-bft__seg--9.is-on  { background: #E8492A; }
.ws40con-bft__seg--10.is-on { background: #D6322A; }
.ws40con-bft__seg--11.is-on { background: #B81E2A; }
.ws40con-bft__seg--12.is-on { background: #8B1424; }
.ws40con-bft__scale {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 280px;
font-size: 10px;
font-family: var(--ws40con-mono, monospace);
color: var(--ws40con-muted);
margin-top: 2px;
} .ws40con-sun__list {
margin: 0;
}
.ws40con-sun__row,
.ws40con-stat__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
padding: 4px 0;
border-bottom: 1px dashed var(--ws40con-border);
font-size: 13px;
min-width: 0;
} .ws40con-sun__icon,
.ws40con-stat__icon {
flex: 0 0 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.ws40con-sun__icon--empty,
.ws40con-stat__icon--empty {
display: none;
}
.ws40con-icon {
display: block;
flex-shrink: 0;
} .ws40con-sun__row dt,
.ws40con-sun__label,
.ws40con-stat__label {
flex: 1 1 auto;
color: var(--ws40con-muted);
font-size: var(--ws40con-label-size, 13px);
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
line-height: 1.25;
} .ws40con-sun__row dd,
.ws40con-sun__value,
.ws40con-stat__value {
flex: 0 0 auto;
margin: 0;
font-weight: 700;
color: var(--ws40con-ink);
text-align: right;
white-space: nowrap;
font-size: var(--ws40con-value-size, 13px);
} .ws40con-stat__time {
color: var(--ws40con-muted);
font-weight: 400;
font-size: 11px;
margin-left: 4px;
}  .ws40con-stat__grid {
display: grid;
grid-template-columns: repeat(var(--ws40con-stat-cols, 3), minmax(0, 1fr));
gap: 8px;
}
.ws40con-stat__card,
.ws40con-stat__cell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2px;
}
.ws40con-stat__card {
padding: 10px 6px;
background: var(--ws40con-card-bg, rgba(0, 0, 0, 0.03));
border-radius: var(--ws40con-radius, 8px);
}
.ws40con-stat__card .ws40con-stat__icon,
.ws40con-stat__cell .ws40con-stat__icon {
flex: 0 0 auto;
width: auto;
}
.ws40con-stat__card .ws40con-stat__value,
.ws40con-stat__cell .ws40con-stat__value {
text-align: center;
white-space: nowrap;
}
.ws40con-stat__card .ws40con-stat__value { font-size: var(--ws40con-value-size, 18px); }
.ws40con-stat__cell .ws40con-stat__value { font-size: var(--ws40con-value-size, 16px); }
.ws40con-stat__card .ws40con-stat__label,
.ws40con-stat__cell .ws40con-stat__label {
flex: 0 0 auto;
text-align: center;
}
.ws40con-stat__card .ws40con-stat__time,
.ws40con-stat__cell .ws40con-stat__time { margin: 0; } .ws40con-stat__striphld {
position: relative;
min-width: 0;
width: 100%;
max-width: 100%;
}
.ws40con-stat__strip {
display: flex;
overflow-x: auto;
width: 100%;
max-width: 100%;
min-width: 0;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth; scrollbar-width: none;
}
.ws40con-stat__strip::-webkit-scrollbar { display: none; }
.ws40con-stat__cell {
flex: 1 1 0;
min-width: 96px;
padding: 8px 10px;
}
.ws40con-stat__cell + .ws40con-stat__cell {
border-left: 1px solid var(--ws40con-border);
} .ws40con-stat__striphld::before,
.ws40con-stat__striphld::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 26px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 2;
}
.ws40con-stat__striphld::before {
left: 0;
background: linear-gradient(to right, rgba(15, 28, 46, 0.12), rgba(15, 28, 46, 0));
}
.ws40con-stat__striphld::after {
right: 0;
background: linear-gradient(to left, rgba(15, 28, 46, 0.12), rgba(15, 28, 46, 0));
}
.ws40con-stat__striphld.is-scroll-left::before { opacity: 1; }
.ws40con-stat__striphld.is-scroll-right::after { opacity: 1; } .ws40con-stat__sbar {
display: none;
position: relative;
height: 4px;
margin: 8px 4px 0;
border-radius: 999px;
background: rgba(15, 28, 46, 0.10);
}
.ws40con-stat__striphld.is-scrollable .ws40con-stat__sbar { display: block; }
.ws40con-stat__sthumb {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
border-radius: 999px;
background: var(--ws40con-blue);
} .ws40con-stat__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ws40con-stat__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--ws40con-card-bg, rgba(0, 0, 0, 0.03));
border-radius: 999px;
font-size: 13px;
}
.ws40con-stat__chip .ws40con-stat__icon { flex: 0 0 auto; width: auto; }
.ws40con-stat__chip .ws40con-stat__label { flex: 0 0 auto; }
.ws40con-stat__chip .ws40con-stat__value { white-space: nowrap; }
.ws40con-stat__chip .ws40con-stat__time { margin-left: 0; } .ws40con-stat__table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ws40con-stat__table td {
padding: 5px 8px;
border-bottom: 1px dashed var(--ws40con-border);
}
.ws40con-stat__table tr:last-child td { border-bottom: none; }
.ws40con-stat__td-icon { width: 30px; }
.ws40con-stat__td-icon .ws40con-icon { display: block; }
.ws40con-stat__td-label { color: var(--ws40con-muted); font-size: var(--ws40con-label-size, 13px); }
.ws40con-stat__td-value {
font-weight: 700;
color: var(--ws40con-ink);
text-align: right;
white-space: nowrap;
font-size: var(--ws40con-value-size, 13px);
}
.ws40con-stat__td-time { color: var(--ws40con-muted); font-size: 11px; text-align: right; white-space: nowrap; } .ws40con-webcam .ws40con-block__body {
padding: 0;
}
.ws40con-webcam__figure {
position: relative;
margin: 0;
}
.ws40con-webcam__img {
display: block;
width: 100%;
height: auto;
min-height: 120px;
background: #0c1622;
} .ws40con-webcam__live {
background: #d23b3b;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 4px;
padding: 2px 7px;
text-transform: uppercase;
} .ws40con-webcam__time {
color: rgba(255,255,255,0.85);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
} .ws40con-map .ws40con-block__body {
padding: 0;
}
.ws40con-map__frame {
position: relative;
padding-top: 62%;
}
.ws40con-map__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}  .ws40con-cards__grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
} .ws40con-full__grid {
columns: 200px;
column-gap: 24px;
} .ws40con-gauges__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--ws40con-gap);
} .ws40con-aq {
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
} .ws40con-aq__card {
display: flex;
flex-direction: column;
gap: 0;
padding: 12px 16px;
border: 1px solid var(--ws40con-border);
border-radius: 10px;
background: var(--ws40con-card-bg);
text-align: center;
} .ws40con-aq__top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
} .ws40con-aq__icon-wrap {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ws40con-aq__icon-wrap img,
.ws40con-aq__icon-wrap svg {
width: 48px !important;
height: 48px !important;
display: block;
} .ws40con-aq__info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
}
.ws40con-aq__label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ws40con-muted);
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.ws40con-aq__value {
font-size: 28px;
font-weight: 800;
color: var(--ws40con-ink);
line-height: 1.1;
}
.ws40con-aq__unit {
font-size: 12px;
font-weight: 400;
color: var(--ws40con-muted);
} .ws40con-aq__stats {
display: flex;
flex-direction: row;
justify-content: center;
gap: 14px;
padding-top: 8px;
margin-top: 8px;
border-top: 1px dashed var(--ws40con-border);
width: 100%;
}
.ws40con-aq__stat {
font-size: 11px;
color: var(--ws40con-muted);
white-space: nowrap;
}
.ws40con-aq__stat strong {
color: var(--ws40con-ink);
font-weight: 700;
} .ws40con-aq__aqi-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid var(--ws40con-border);
border-radius: 10px;
background: var(--ws40con-card-bg);
}
.ws40con-aq__aqi-badge {
display: inline-block;
font-size: 13px;
font-weight: 700;
padding: 3px 12px;
border-radius: 20px;
}
.ws40con-aq__aqi--good           { background: #d4edda; color: #155724; }
.ws40con-aq__aqi--fair           { background: #d1ecf1; color: #0c5460; }
.ws40con-aq__aqi--moderate       { background: #fff3cd; color: #856404; }
.ws40con-aq__aqi--poor           { background: #fde8d8; color: #7d3000; }
.ws40con-aq__aqi--very-poor      { background: #f8d7da; color: #721c24; }
.ws40con-aq__aqi--extremely-poor { background: #6b0000; color: #fff; }  .ws40con-allarmi .ws40con-block__body {
padding: 0;
} .ws40con-allarmi .ws40-alerts-widget {
border-radius: 0;
border: none;
box-shadow: none;
font-size: 13px;
} .ws40con-allarmi .ws40-alerts-header {
padding: 10px 14px 8px;
border-bottom: 1px solid var(--ws40con-border);
background: var(--ws40con-bg);
}
.ws40con-allarmi .ws40-alerts-title {
font-size: 13px;
font-weight: 600;
}
.ws40con-allarmi .ws40-alert-row {
margin: 0 10px;
border-radius: var(--ws40con-radius);
margin-bottom: 8px;
margin-top: 0;
}
.ws40con-allarmi .ws40-alert-row:first-of-type {
margin-top: 8px;
}
.ws40con-allarmi .ws40-alerts-footer {
padding: 8px 14px;
border-top: 1px solid var(--ws40con-border);
background: var(--ws40con-bg);
color: var(--ws40con-muted);
} .ws40con__brand {
margin-top: var(--ws40con-gap);
}
.ws40con__brand--left   { text-align: left; }
.ws40con__brand--center { text-align: center; }
.ws40con__brand--right  { text-align: right; }
.ws40con__brand-card {
display: inline-flex;
align-items: center;
gap: 14px;
text-align: left;
padding: 11px 20px 11px 11px;
border: 1px solid var(--ws40con-border);
border-radius: 16px;
background:
linear-gradient(135deg, rgba(55, 138, 221, 0.07), rgba(99, 153, 34, 0.05)),
var(--ws40con-card-bg, #fff);
text-decoration: none;
box-shadow: 0 1px 2px rgba(16, 42, 67, 0.05);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ws40con__brand-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(16, 42, 67, 0.13);
border-color: rgba(55, 138, 221, 0.45);
text-decoration: none;
}
.ws40con__brand-logo {
width: 56px;
height: 56px;
flex: 0 0 auto;
display: block;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 3px 10px rgba(16, 42, 67, 0.22);
}
.ws40con__brand-text {
display: flex;
flex-direction: column;
line-height: 1.08;
}
.ws40con__brand-name {
font-size: 23px;
font-weight: 800;
letter-spacing: 0.01em;
background: linear-gradient(180deg, #5aa6ee, #155fa6);
-webkit-background-clip: text;
background-clip: text;
color: #155fa6;
-webkit-text-fill-color: transparent;
}
.ws40con__brand-sub {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ws40con-muted);
margin-top: 3px;
}
.ws40con__brand-url {
font-size: 11px;
font-weight: 700;
color: var(--ws40con-blue);
margin-top: 7px;
opacity: 0.8;
transition: opacity 0.18s ease;
}
.ws40con__brand-card:hover .ws40con__brand-url { opacity: 1; }
.ws40con__brand-arrow { font-weight: 400; } .ws40con__brand--small  .ws40con__brand-card { padding: 9px 16px 9px 9px; gap: 11px; }
.ws40con__brand--small  .ws40con__brand-logo { width: 44px; height: 44px; }
.ws40con__brand--small  .ws40con__brand-name { font-size: 19px; }
.ws40con__brand--large  .ws40con__brand-card { padding: 13px 24px 13px 13px; gap: 18px; }
.ws40con__brand--large  .ws40con__brand-logo { width: 72px; height: 72px; }
.ws40con__brand--large  .ws40con__brand-name { font-size: 30px; } .ws40con-style {
display: none;
} .ws40con-status {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 8px 4px 4px;
text-align: center;
}
.ws40con-status__row {
display: grid;
grid-template-columns: 56px minmax(0, max-content);
align-items: center;
justify-content: center;
gap: 12px;
} .ws40con-status__row--top {
align-items: center;
}
.ws40con-status__station-img,
.ws40con-status__refresh-img {
display: flex;
align-items: center;
justify-content: center;
}
.ws40con-status__station-img img {
width: 52px;
height: 52px;
object-fit: contain;
display: block;
}
.ws40con-status__right {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
} .ws40con-status__row--update {
align-items: center;
gap: 12px;
}
.ws40con-status__refresh-img img {
width: 44px;
height: 44px;
object-fit: contain;
display: block;
}
.ws40con-status__update-info {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
} .ws40con-status__pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
width: fit-content;
}
.ws40con-status__pill--online  { background: #d1fae5; color: #065f46; }
.ws40con-status__pill--offline { background: #fee2e2; color: #991b1b; }
.ws40con-status__pill--unknown { background: #f3f4f6; color: #6b7280; }
.ws40con-status__dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.ws40con-status__pill--online .ws40con-status__dot {
background: #10b981;
box-shadow: 0 0 0 3px rgba(16,185,129,.25);
animation: ws40-pulse 2s infinite;
}
.ws40con-status__pill--offline .ws40con-status__dot {
background: #ef4444;
}
@keyframes ws40-pulse {
0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.10); }
}
.ws40con-status__ts {
font-size: 13px;
font-weight: 600;
color: var(--ws40con-ink);
}
.ws40con-status__elapsed {
font-size: 12px;
color: var(--ws40con-muted);
}
.ws40con-status__source {
font-size: 13px;
font-weight: 700;
color: var(--ws40con-blue);
}
.ws40con-status__outages-wrap {
width: 100%;
border: 1px solid var(--ws40con-border);
border-radius: 8px;
overflow: hidden;
margin-top: 2px;
font-size: 12px;
}
.ws40con-status__outages-hd {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
background: rgba(15, 28, 46, 0.05);
border: none;
cursor: pointer;
text-align: left;
font-size: 12px;
font-family: inherit;
transition: background 0.12s;
}
.ws40con-status__outages-hd:hover {
background: rgba(15, 28, 46, 0.09);
}
.ws40con-status__badge {
padding: 2px 8px;
border-radius: 999px;
font-weight: 600;
font-size: 11px;
}
.ws40con-status__badge--ok   { background: #d1fae5; color: #065f46; }
.ws40con-status__badge--warn { background: #fef9c3; color: #92400e; }
.ws40con-status__toggle-lbl {
flex: 1;
color: var(--ws40con-blue);
font-size: 11px;
}
.ws40con-status__toggle-arr {
font-size: 11px;
color: var(--ws40con-muted);
transition: transform 0.15s;
}
.ws40con-status__outages-wrap.is-open .ws40con-status__toggle-arr {
transform: rotate(90deg);
}
.ws40con-status__outages-body {
display: none;
padding: 6px 10px 8px;
border-top: 1px solid var(--ws40con-border);
background: #fff;
}
.ws40con-status__outages-wrap.is-open .ws40con-status__outages-body {
display: block;
}
.ws40con-status__outage-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
border-bottom: 1px dashed var(--ws40con-border);
font-size: 11px;
}
.ws40con-status__outage-row:last-child { border-bottom: none; }
.ws40con-status__outage-when { color: var(--ws40con-ink); }
.ws40con-status__outage-dur  { color: var(--ws40con-muted); font-weight: 600; }
.ws40con-status__outage-empty {
font-size: 11px;
color: var(--ws40con-muted);
padding: 2px 0;
} .ws40con-aq__stats {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed var(--ws40con-border);
width: 100%;
}
.ws40con-aq__stat {
font-size: 11px;
color: var(--ws40con-muted);
white-space: nowrap;
}
.ws40con-aq__stat strong {
color: var(--ws40con-ink);
font-weight: 600;
}
.ws40con-aq__footer {
text-align: center;
margin-top: 4px;
padding-top: 4px;
}
.ws40con-aq__ts {
font-size: 10px;
color: var(--ws40con-muted);
opacity: 0.75;
} .ws40con-webcam__tabs {
display: flex;
gap: 0;
border-bottom: 2px solid #dcdcde;
margin-bottom: 12px;
}
.ws40con-webcam__tab {
padding: 10px 16px;
background: transparent;
border: none;
font-size: 13px;
font-weight: 500;
color: #666;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all 0.2s ease;
}
.ws40con-webcam__tab:hover {
color: #333;
background: #f9f9f9;
}
.ws40con-webcam__tab.active {
color: #1f6fd6;
border-bottom-color: #1f6fd6;
}
.ws40con-webcam__panel {
display: none;
}
.ws40con-webcam__panel.active {
display: block;
} .ws40con-custom-editor {
font-size: 14px;
line-height: 1.6;
color: var(--ws40con-ink);
}
.ws40con-custom-editor p {
margin: 0 0 0.8em;
}
.ws40con-custom-editor p:last-child {
margin-bottom: 0;
}
.ws40con-custom-editor a {
color: var(--ws40con-blue);
text-decoration: underline;
}
.ws40con-custom-editor ul,
.ws40con-custom-editor ol {
margin: 0 0 0.8em 1.5em;
}
.ws40con-custom-editor blockquote {
border-left: 3px solid var(--ws40con-blue);
margin: 0 0 0.8em;
padding: 0.5em 1em;
color: var(--ws40con-muted);
} .ws40con-live__list {
columns: 220px;
column-gap: 24px;
margin: 0;
padding: 0;
}
.ws40con-live__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
border-bottom: 1px dashed var(--ws40con-border);
padding: 4px 0;
font-size: 13px;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.ws40con-live__icon {
flex: 0 0 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.ws40con-live__label {
color: var(--ws40con-muted);
font-size: var(--ws40con-label-size, inherit);
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
line-height: 1.25;
}
.ws40con-live__val {
font-weight: 700;
font-size: var(--ws40con-value-size, inherit);
color: var(--ws40con-ink);
white-space: nowrap;
text-align: right;
flex: 0 0 auto;
}
.ws40con-live__num {
font-variant-numeric: tabular-nums;
}
.ws40con-live__unit {
font-weight: 400;
color: var(--ws40con-muted);
font-size: .82em;
margin-left: 3px;
} .ws40con-live__badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 1px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
color: var(--ws40con-muted, #9aa4b2);
border: 1px solid currentColor;
opacity: .55;
}
.ws40con-live__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.ws40con-live__badge.is-active {
color: #2ea043;
opacity: 1;
}
.ws40con-live__badge.is-active .ws40con-live__dot {
background: #2ea043;
animation: ws40conLivePulse 1.4s ease-in-out infinite;
}
@keyframes ws40conLivePulse {
0%   { box-shadow: 0 0 0 0 rgba(46,160,67,.55); }
70%  { box-shadow: 0 0 0 6px rgba(46,160,67,0); }
100% { box-shadow: 0 0 0 0 rgba(46,160,67,0); }
}
@media (max-width: 600px) {
.ws40con-live__list { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ws40con-live__badge.is-active .ws40con-live__dot { animation: none; }
} .ws40con-block.ws40con-live {
position: relative;
box-shadow: inset 3px 0 0 0 #2ea043;
} @keyframes ws40conLiveFlash {
0%   { background: rgba(46, 160, 67, .55); color: #1a7f37; transform: scale(1.18); }
12%  { background: rgba(46, 160, 67, .55); color: #1a7f37; transform: scale(1.18); }
100% { background: transparent;            color: inherit; transform: scale(1); }
}
.ws40con-live__flash {
display: inline-block;
transform-origin: right center;
animation: ws40conLiveFlash 1.2s ease-out;
border-radius: 4px;
padding: 0 4px;
margin: 0 -4px;
}
@media (prefers-reduced-motion: reduce) {
.ws40con-live__flash { animation: none; }
} .ws40con-soilleaf .ws40con-sl-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.ws40con-soilleaf .ws40con-sl-card {
border: 1px solid var(--ws40con-border);
border-radius: 10px;
padding: 10px 12px;
}
.ws40con-soilleaf .ws40con-sl-card--leaf {
border-color: #b7e0c8;
background: rgba(29, 158, 117, 0.06);
}
.ws40con-soilleaf .ws40con-sl-card__title {
font-size: var(--ws40con-label-size, 12px);
font-weight: 600;
color: var(--ws40con-muted);
margin: 0 0 8px;
}
.ws40con-soilleaf .ws40con-sl-card--leaf .ws40con-sl-card__title { color: #0f6e56; }
.ws40con-soilleaf .ws40con-sl-metric {
display: flex;
align-items: center;
gap: 7px;
font-variant-numeric: tabular-nums;
}
.ws40con-soilleaf .ws40con-sl-metric + .ws40con-sl-metric { margin-top: 6px; }
.ws40con-soilleaf .ws40con-sl-metric__ic { flex: 0 0 auto; display: inline-flex; }
.ws40con-soilleaf .ws40con-sl-metric__ic .ws40con-icon { width: 20px; height: 20px; display: block; }
.ws40con-soilleaf .ws40con-sl-metric__val {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 1 1 auto;
font-weight: 500;
font-size: var(--ws40con-value-size, 14px);
}
.ws40con-soilleaf .ws40con-sl-metric__val .ws40con-sl-pill { margin-left: auto; } .ws40con-sl-unit { font-weight: 400; color: var(--ws40con-muted); font-size: 0.86em; }
.ws40con-sl-pill { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ws40con-sl-pill--moist   { background: #d1fae5; color: #065f46; }
.ws40con-sl-pill--dry     { background: #fef9c3; color: #92400e; }
.ws40con-sl-pill--verydry { background: #fee2e2; color: #991b1b; } .ws40con-soilleaf__foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--ws40con-border); font-size: 12px; color: var(--ws40con-muted); }
.ws40con-soilleaf__foot-ic { flex: 0 0 auto; }
.ws40con-soilleaf__foot.is-stale { color: #92400e; } .ws40con-av{ width:100%; }
.ws40con-av__svg{ width:100%; height:auto; display:block; }
.ws40con-av__bezel{ fill:#16181c; }
.ws40con-av__ring{ fill:#3b3f47; }
.ws40con-av__face{ fill:#26292e; }
.ws40con-av__card{ fill:#e8e9eb; font:700 12px/1 'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.ws40con-av__stick{ fill:#c2c7cc; font:400 9px/1 'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.ws40con-av__lbl{ fill:#8a9096; font:400 8px/1 'DM Mono',ui-monospace,monospace; letter-spacing:.5px; }
.ws40con-av__unit{ fill:#9aa0a6; font:400 10px/1 'DM Mono',ui-monospace,monospace; letter-spacing:1px; }
.ws40con-av__big{ fill:#e8e9eb; font:700 18px/1 'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.ws40con-av__avg-val{ fill:#7fb0e6; }
.ws40con-av__spd{ fill:#e8e9eb; font:700 30px/1 'DM Mono',ui-monospace,Menlo,Consolas,monospace; }
.ws40con-av__needle-last{ fill:#e0433d; transition:transform .5s cubic-bezier(.34,1.35,.5,1); }
.ws40con-av__needle-avg{ fill:#2f7fd6; transition:transform .5s cubic-bezier(.34,1.35,.5,1); }
.ws40con-av__needle-spd{ fill:#eceef0; transition:transform .5s cubic-bezier(.34,1.35,.5,1); }
.ws40con-av__gust{ stroke:#e0433d; stroke-width:3; stroke-linecap:round; transition:transform .4s ease; }
.ws40con-av__hub{ fill:#15171a; stroke:#4a4e55; stroke-width:1.5; }
.ws40con-av__hub-dot{ fill:#c9ccd1; } .ws40con-av-status{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
padding:3px 9px; border-radius:999px; font-family:'DM Mono',ui-monospace,Menlo,Consolas,monospace; letter-spacing:.3px; }
.ws40con-av-status__dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.ws40con-av-status.is-live{ background:rgba(34,170,90,.16); color:#1f8a4c; }
.ws40con-av-status.is-live .ws40con-av-status__dot{ background:#2fbf6a; animation:ws40con-av-pulse 3s ease-out infinite; }
.ws40con-av-status.is-delayed{ background:rgba(219,166,23,.18); color:#9a6a08; }
.ws40con-av-status.is-delayed .ws40con-av-status__dot{ background:#e0aa2a; }
@keyframes ws40con-av-pulse{ 0%{ box-shadow:0 0 0 0 rgba(47,191,106,.55); } 70%{ box-shadow:0 0 0 6px rgba(47,191,106,0); } 100%{ box-shadow:0 0 0 0 rgba(47,191,106,0); } }
.ws40con-av-cap{ margin:8px 2px 0; font-size:12px; line-height:1.5; color:#8b93a1; }
.ws40con-cfg-linkrow{ margin:2px 0 8px; }
.ws40con-cfg-link{ font-size:12px; text-decoration:none; } .ws40con-rain .ws40con-block__body { padding-top: 8px; }
.ws40con-rain__wrap { display: flex; flex-direction: column; align-items: center; }
.ws40con-rain__cloud { color: var(--ws40con-blue); line-height: 0; margin: 2px 0 6px; }
.ws40con-rain__gauges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.ws40con-rain__gauge { width: 130px; text-align: center; }
.ws40con-rain__svg { width: 118px; height: 118px; display: block; margin: 0 auto; }
.ws40con-rain__ring { fill: none; stroke: #8fc0ee; }
.ws40con-rain__wave--a { fill: #1f6fd6; }
.ws40con-rain__wave--b { fill: #7fb6ee; }
.ws40con-rain__water { transform-box: fill-box; transition: transform 1.15s cubic-bezier(.22, .61, .36, 1); }
.ws40con-rain__wave { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
.ws40con-rain__wave--a { animation: ws40con-rain-wa 3.3s linear infinite; }
.ws40con-rain__wave--b { animation: ws40con-rain-wb 4.7s linear infinite; }
}
@keyframes ws40con-rain-wa { from { transform: translateX(0); }    to { transform: translateX(-46px); } }
@keyframes ws40con-rain-wb { from { transform: translateX(-23px); } to { transform: translateX(23px); } }
.ws40con-rain__pct { fill: #0f1c2e; font-size: 19px; font-weight: 600; }
.ws40con-rain__gauge.is-filled .ws40con-rain__pct { fill: #fff; } @supports (fill: color-mix(in srgb, red, blue)) {
.ws40con-rain__wave--a { fill: var(--ws40con-blue, #1f6fd6); }
.ws40con-rain__wave--b { fill: color-mix(in srgb, var(--ws40con-blue, #1f6fd6) 60%, #fff); }
.ws40con-rain__ring    { stroke: color-mix(in srgb, var(--ws40con-blue, #1f6fd6) 40%, #fff); }
.ws40con-rain__pct     { fill: var(--ws40con-ink, #0f1c2e); }
}
.ws40con-rain__glabel { margin-top: 2px; font-size: 12px; color: var(--ws40con-muted); text-transform: uppercase; letter-spacing: .03em; }
.ws40con-rain__gmm { font-size: 15px; font-weight: 600; color: var(--ws40con-ink); }
.ws40con-rain__gmoy { font-size: 11px; color: var(--ws40con-muted); }
.ws40con-rain__panel { width: 100%; margin-top: 12px; }
.ws40con-rain__panel[hidden] { display: none; }
.ws40con-rain__lastrain { padding: 2px 2px 8px; }
.ws40con-rain__lr-title { font-weight: 600; color: var(--ws40con-ink); }
.ws40con-rain__lr-sub { color: var(--ws40con-muted); font-size: 13px; }
.ws40con-rain__rows { display: flex; flex-direction: column; gap: 3px; }
.ws40con-rain__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--ws40con-card-bg); border: 1px solid var(--ws40con-border); }
.ws40con-rain__row:nth-child(even) { background: #eef4fb; background: color-mix(in srgb, var(--ws40con-blue) 8%, var(--ws40con-card-bg)); }
.ws40con-rain__rlabel { font-weight: 600; }
.ws40con-rain__rright { text-align: right; }
.ws40con-rain__rval { font-size: 17px; font-weight: 600; color: var(--ws40con-ink); }
.ws40con-rain__rdetail { font-size: 11px; color: var(--ws40con-muted); margin-top: 1px; }
.ws40con-rain__foot { margin-top: 6px; text-align: center; }
.ws40con-rain__toggle { background: transparent; border: 0; color: var(--ws40con-muted); font-size: 12px; letter-spacing: .1em; cursor: pointer; padding: 6px 10px; }
.ws40con-rain__toggle:hover { color: var(--ws40con-blue); }
.ws40con-rain__note { margin: 12px 4px 2px; font-size: 11.5px; line-height: 1.45; color: var(--ws40con-muted); font-style: italic; text-align: center; }