#wd-modern.wdm { width:574px; margin:0 auto 12px; padding:7px; color:#111; background:#ececec; border:1px solid #8b8b8b; box-shadow:0 1px 4px rgba(0,0,0,.25); font-family:Arial,Helvetica,sans-serif; font-size:11px; text-align:left; }
#wd-modern * { box-sizing:border-box; }
#wd-modern .wdm-header { min-height:42px; display:grid; grid-template-columns:155px 1fr 18px; gap:8px; align-items:center; padding:3px 6px 6px; border-bottom:1px solid #aaa; }
#wd-modern .wdm-header strong { display:block; font-size:12px; }
#wd-modern .wdm-header span { font-size:10px; color:#444; }
#wd-modern .wdm-forecast { line-height:13px; text-align:center; font-size:10px; }
#wd-modern .wdm-status { color:#aaa; font-size:18px; text-shadow:0 1px #fff; }
#wd-modern .wdm-status.ok { color:#36a34a; }
#wd-modern .wdm-status.error { color:#c83333; }
#wd-modern .wdm-top { display:flex; justify-content:center; gap:28px; padding:7px 4px 3px; }
#wd-modern .wdm-dial-box { width:150px; text-align:center; }
#wd-modern .wdm-dial-title { height:15px; font-weight:bold; font-size:12px; }
#wd-modern .wdm-dial { width:132px; height:132px; display:block; margin:0 auto; }
#wd-modern .wdm-svg-value { font:bold 13px Arial,sans-serif; fill:#111; }
#wd-modern .wdm-dial-caption { min-height:24px; margin-top:-5px; font-size:9px; line-height:12px; }
#wd-modern .wdm-lower { display:grid; grid-template-columns:126px 1fr; gap:8px; padding:3px 5px 6px; }
#wd-modern .wdm-summary { display:grid; gap:4px; }
#wd-modern .wdm-card { min-height:43px; padding:4px 5px; border:1px solid #999; background:#fff; text-align:center; box-shadow:inset 0 0 5px #ddd; }
#wd-modern .wdm-card span { display:block; font-size:9px; }
#wd-modern .wdm-card strong { display:block; margin-top:2px; font-size:14px; }
#wd-modern .wdm-card small { display:block; font-size:9px; color:#325ca8; }
#wd-modern .wdm-hum-track { height:5px; margin-top:3px; background:#ddd; border:1px solid #999; }
#wd-modern .wdm-hum-track i { display:block; width:0; height:100%; background:#e1c922; transition:width .5s ease; }
#wd-modern .wdm-bars { min-height:184px; display:flex; justify-content:space-around; align-items:flex-end; padding:4px 3px 0; border:1px solid #aaa; background:#f8f8f8; }
#wd-modern .wdm-bar-item { width:62px; text-align:center; }
#wd-modern .wdm-bar-scale { position:relative; width:22px; height:120px; margin:0 auto 4px; overflow:hidden; border:1px solid #777; background:repeating-linear-gradient(to top,#fff 0,#fff 11px,#d6d6d6 12px); box-shadow:inset 0 0 5px #bbb; }
#wd-modern .wdm-fill { position:absolute; left:3px; right:3px; bottom:3px; height:0; background:#d35a4c; transition:height .6s ease; }
#wd-modern .wdm-fill.solar { background:#efb92f; }
#wd-modern .wdm-fill.uv { background:#9d65c4; }
#wd-modern .wdm-fill.rain { background:#4c8ed3; }
#wd-modern .wdm-fill.cold { background:#4d8fd5; }
#wd-modern .wdm-bar-item strong { display:block; height:15px; font-size:10px; white-space:nowrap; }
#wd-modern .wdm-bar-item span { display:block; min-height:22px; font-size:9px; line-height:11px; }
#wd-modern .wdm-footer { display:flex; align-items:center; gap:4px; padding:5px 4px 0; border-top:1px solid #aaa; }
#wd-modern .wdm-footer a { padding:2px 6px; color:#183f82; background:linear-gradient(#fff,#d2d2d2); border:1px solid #888; border-radius:2px; text-decoration:none; font-size:9px; }
#wd-modern .wdm-footer a:hover { background:#fff; }
#wd-modern .wdm-footer span { margin-left:auto; color:#555; font-size:9px; }
@media (max-width:640px) {
    #wd-modern.wdm { width:98%; }
    #wd-modern .wdm-top { gap:2px; }
    #wd-modern .wdm-dial-box { width:33.33%; }
    #wd-modern .wdm-dial { width:100%; height:auto; }
    #wd-modern .wdm-lower { grid-template-columns:105px 1fr; }
    #wd-modern .wdm-bar-item { width:16.66%; }
    #wd-modern .wdm-footer { flex-wrap:wrap; }
}