.ws40-sun { font-size:14px; color:#1d2327; max-width:520px; }
.ws40-sun__title { margin:0 0 12px; font-size:18px; font-weight:700; }
.ws40-sun__list {
background:#fff; border:1px solid #e3e5e8; border-radius:10px;
box-shadow:0 1px 2px rgba(0,0,0,.04); overflow:hidden;
}
.ws40-sun__row {
display:flex; align-items:center; gap:10px;
padding:10px 14px; border-bottom:1px solid #f0f0f1;
}
.ws40-sun__row:last-child { border-bottom:0; }
.ws40-sun__icon { width:22px; text-align:center; flex:0 0 22px; }
.ws40-sun__img { width:22px; height:22px; display:block; }
.ws40-sun__label { color:#3c434a; flex:1 1 auto; }
.ws40-sun__value { font-weight:600; color:#1d2327; white-space:nowrap; }
.ws40-sun__attr { margin:8px 0 0; font-size:12px; color:#646970; }.ws40-aq {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 100%;
margin: 0 auto;
}
.ws40-aq__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0 0 12px;
gap: 10px;
}
.ws40-aq__title {
font-size: 1.1em;
font-weight: 600;
color: #1d2327;
margin: 0;
}
.ws40-aq__time {
font-size: 12px;
color: #8c8f94;
}
.ws40-aq__grid {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: visible;
gap: 12px;
padding-bottom: 12px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
align-items: stretch;
scrollbar-width: thin;
scrollbar-color: var(--ws40con-blue, #1D9E75) #e0e0e0;
}
.ws40-aq__grid::-webkit-scrollbar { height: 6px; } .ws40-aq--align-center .ws40-aq__grid { justify-content: safe center; }
.ws40-aq--align-right  .ws40-aq__grid { justify-content: safe flex-end; }
.ws40-aq__grid::-webkit-scrollbar-track { background: #e0e0e0; border-radius: 3px; }
.ws40-aq__grid::-webkit-scrollbar-thumb { background: var(--ws40con-blue, #1D9E75); border-radius: 3px; }
.ws40-aq__grid::-webkit-scrollbar-button { display: none; } .ws40-aq__card {
flex: 0 0 132px;
min-width: 132px;
max-width: 132px;
scroll-snap-align: start;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #dcdcde;
border-top: 4px solid #9e9e9e; border-radius: 8px;
padding: 12px 10px 12px;
text-align: center;
transition: box-shadow 0.15s ease;
}
.ws40-aq__card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ws40-aq__label {
font-size: 12px;
font-weight: 600;
color: #50575e;
letter-spacing: .02em;
} .ws40-aq__band {
display: inline-block;
align-self: center;
font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 3px 11px;
border-radius: 999px;
margin: 6px 0 4px;
}
.ws40-aq__value {
font-size: 25px;
font-weight: 700;
line-height: 1.1;
color: #1d2327;
margin: 4px 0 2px;
}
.ws40-aq__unit {
display: block;
font-size: 11px;
font-weight: 600;
color: #8c8f94;
letter-spacing: .02em;
} .ws40-aq__foot {
margin-top: auto;
border-top: 1px solid #f0f0f1;
padding-top: 7px;
margin-top: 10px;
font-size: 11px;
color: #8c8f94;
line-height: 1.5;
}
.ws40-aq__foot--push { margin-top: auto; }
.ws40-aq__cap {
margin-top: 6px;
font-size: 12px;
color: #646970;
}
.ws40-aq__nodata {
padding: 16px;
background: #f6f7f7;
border: 1px solid #dcdcde;
border-radius: 6px;
font-size: 13px;
color: #50575e;
}
@media (max-width: 480px) {
.ws40-aq__value { font-size: 22px; }
}.ws40-pollen { --p0:#9ca3af; --p1:#46b450; --p2:#f0c000; --p3:#ed7014; --p4:#dc3232; font-size:14px; color:#1d2327; } .ws40-pollen { position:relative; }
.ws40-pollen::before, .ws40-pollen::after { content:""; position:absolute; top:0; bottom:0; width:38px; pointer-events:none; opacity:0; transition:opacity .15s ease; z-index:3; }
.ws40-pollen::before { left:0;  background:linear-gradient(to right, #fff 12%, rgba(255,255,255,0)); }
.ws40-pollen::after  { right:0; background:linear-gradient(to left,  #fff 12%, rgba(255,255,255,0)); }
.ws40-pollen.is-scroll-left::before  { opacity:1; }
.ws40-pollen.is-scroll-right::after  { opacity:1; }
.ws40-pollen__title { margin:0 0 12px; font-size:18px; font-weight:700; }
.ws40-pollen__grid { display:flex; flex-wrap:nowrap; gap:12px; overflow-x:auto; overflow-y:hidden; max-width:100%; padding-bottom:10px; align-items:flex-start; scrollbar-width:thin; scrollbar-color:var(--ws40con-blue, #46b450) #e0e0e0; -webkit-overflow-scrolling:touch; }
.ws40-pollen__grid::-webkit-scrollbar { height:8px; }
.ws40-pollen__grid::-webkit-scrollbar-track { background:#e0e0e0; border-radius:999px; }
.ws40-pollen__grid::-webkit-scrollbar-thumb { background:var(--ws40con-blue, #46b450); border-radius:999px; }
.ws40-pollen__grid::-webkit-scrollbar-thumb:hover { background:var(--ws40con-blue, #379a45); }
.ws40-pollen__grid::-webkit-scrollbar-button { display:none; }
.ws40-pollen__day {
flex:0 0 168px; min-width:168px; background:#fff; border:1px solid #e3e5e8;
border-radius:10px; padding:12px 12px 10px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ws40-pollen__date { font-weight:700; text-align:center; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #f0f0f1; text-transform:capitalize; }
.ws40-pollen__row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0; } .ws40-pollen--align-center .ws40-pollen__grid { justify-content:safe center; }
.ws40-pollen--align-right  .ws40-pollen__grid { justify-content:safe flex-end; }
.ws40-pollen__name { font-size:13px; color:#3c434a; }
.ws40-pollen__badge { font-size:11px; font-weight:700; color:#fff; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.ws40-pollen__lvl--0 { background:var(--p0); }
.ws40-pollen__lvl--1 { background:var(--p1); }
.ws40-pollen__lvl--2 { background:var(--p2); color:#3a3000; }
.ws40-pollen__lvl--3 { background:var(--p3); }
.ws40-pollen__lvl--4 { background:var(--p4); }
.ws40-pollen__attr { margin:8px 0 0; font-size:12px; color:#646970; }
.ws40-pollen__error { margin:10px 0 0; color:#b32d2e; font-size:13px; } .ws40-pollen__loading .ws40-pollen__day,
.ws40-pollen__skeleton { background:linear-gradient(90deg,#eef0f2 25%,#e2e5e9 37%,#eef0f2 63%); background-size:400% 100%; animation:ws40PollenPulse 1.4s ease infinite; min-height:160px; border:1px solid #e3e5e8; }
@keyframes ws40PollenPulse { 0%{background-position:100% 0} 100%{background-position:-100% 0} }.ws40-dbinfo-widget {
max-width: 440px;
}
.ws40-dbinfo-header {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 1.05em;
color: var(--ws40-text-primary, #1e293b);
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--ws40-border, #e2e8f0);
}
.ws40-dbinfo-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
}
.ws40-dbinfo-table tr + tr td {
border-top: 1px solid var(--ws40-border-light, #f8fafc);
}
.ws40-dbinfo-label {
padding: 7px 0;
color: var(--ws40-text-muted, #64748b);
}
.ws40-dbinfo-value {
text-align: right;
padding: 7px 0;
font-weight: 600;
color: var(--ws40-text-primary, #0f172a);
} .ws40-dbinfo-sensors {
margin-top: 14px;
}
.ws40-dbinfo-sensors summary {
cursor: pointer;
font-size: 0.88em;
font-weight: 600;
color: var(--ws40-accent, #0d9488);
user-select: none;
list-style: none;
}
.ws40-dbinfo-sensors summary::-webkit-details-marker { display: none; }
.ws40-dbinfo-sensors summary::before {
content: '▶ ';
font-size: 0.75em;
transition: transform 0.2s;
display: inline-block;
}
.ws40-dbinfo-sensors[open] summary::before {
transform: rotate(90deg);
}
.ws40-dbinfo-sensors-body {
margin-top: 12px;
}
.ws40-dbinfo-group-label {
font-size: 0.78em;
color: var(--ws40-text-subtle, #94a3b8);
margin: 0 0 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ws40-dbinfo-group-label--opt {
margin-top: 12px;
}
.ws40-dbinfo-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ws40-dbinfo-tag {
background: var(--ws40-tag-bg, #f1f5f9);
border-radius: 20px;
padding: 3px 10px;
font-size: 0.8em;
color: var(--ws40-tag-text, #334155);
}
.ws40-dbinfo-tag--opt {
background: var(--ws40-tag-opt-bg, #ccfbf1);
color: var(--ws40-tag-opt-text, #0f766e);
font-weight: 500;
}
@media (max-width: 480px) {
.ws40-dbinfo-widget { max-width: 100%; }
}