.qmh-weather{--sky1:#4ca9e8;--sky2:#8fd8f7;--ink:#fff;box-sizing:border-box;width:100%;height:120px;display:flex;align-items:stretch;overflow:hidden;border-radius:20px;background:linear-gradient(135deg,var(--sky1),var(--sky2));color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;position:relative;isolation:isolate;box-shadow:0 10px 28px rgba(20,60,100,.16);transition:background .8s ease,box-shadow .8s ease}.qmh-weather *{box-sizing:border-box}
.qmh-weather__effect{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.95}.qmh-weather__main,.qmh-weather__hourly-wrap,.qmh-weather__status{position:relative;z-index:2}.qmh-weather__main{width:34%;min-width:330px;padding:12px 15px 9px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(110deg,rgba(0,65,120,.18),rgba(255,255,255,.04));border-right:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.qmh-weather__topline{height:18px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:-.1px}.qmh-weather__dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}.qmh-weather__place{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.qmh-weather__phase{font-size:9px;opacity:.76;white-space:nowrap}.qmh-weather__locate{margin-left:auto;border:0;background:rgba(255,255,255,.14);color:#fff;width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;font-size:14px;line-height:24px}.qmh-weather__locate:hover{background:rgba(255,255,255,.24)}
.qmh-weather__current-row{display:flex;align-items:center;gap:7px;margin-top:0;min-height:43px}.qmh-weather__icon{width:34px;flex:0 0 34px;height:34px;display:grid;place-items:center;color:rgba(255,255,255,.98);filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}.qmh-weather__icon svg{width:100%;height:100%}.qmh-weather__temp{font-size:36px;line-height:.94;font-weight:300;letter-spacing:-2.1px;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.08)}.qmh-weather__summary{min-width:0}.qmh-weather__condition{font-size:13px;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qmh-weather__range{font-size:9px;opacity:.9;margin-top:4px;white-space:nowrap}.qmh-weather__meta{display:flex;align-items:center;gap:9px;font-size:8.5px;margin-top:5px;white-space:nowrap;opacity:.94;overflow:hidden}.qmh-weather__meta span{display:inline-flex;gap:3px;align-items:center}.qmh-weather__meta b{font-weight:700}
.qmh-weather__hourly-wrap{flex:1;min-width:0;display:flex;align-items:flex-end;padding:0 9px 7px;position:relative}.qmh-weather__clock-panel{position:absolute;right:14px;top:8px;display:flex;align-items:baseline;gap:7px;z-index:4;text-shadow:0 1px 8px rgba(0,0,0,.08)}.qmh-weather__clock-date{font-size:9px;font-weight:600;opacity:.72;text-transform:capitalize}.qmh-weather__clock{font-variant-numeric:tabular-nums;font-size:17px;line-height:1;font-weight:500;letter-spacing:.2px}.qmh-weather__hourly{width:100%;height:86px;display:flex;align-items:stretch;gap:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;border-radius:14px;background:rgba(8,47,79,.26);border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 2px 12px rgba(0,25,60,.08);backdrop-filter:blur(7px)}.qmh-weather__hourly::-webkit-scrollbar{display:none}.qmh-weather__scroll-hint{position:absolute;right:14px;bottom:1px;font-size:7.5px;opacity:.42;pointer-events:none}.qmh-weather__scrollbar{position:absolute;left:12px;right:12px;bottom:0;height:7px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);cursor:grab;touch-action:none;z-index:5}.qmh-weather__scrollbar.is-dragging{cursor:grabbing;background:rgba(255,255,255,.22)}.qmh-weather__scrollbar-thumb{height:100%;min-width:36px;border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 1px 4px rgba(0,0,0,.15);transition:background .15s ease}.qmh-weather__scrollbar:hover .qmh-weather__scrollbar-thumb,.qmh-weather__scrollbar.is-dragging .qmh-weather__scrollbar-thumb{background:#fff}
.qmh-hour{position:relative;min-width:70px;flex:0 0 70px;padding:7px 3px 5px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:#fff;background:rgba(255,255,255,.115);border-right:1px solid rgba(255,255,255,.22);text-shadow:0 1px 4px rgba(0,24,48,.22);transition:background .2s ease,transform .2s ease}.qmh-hour:hover{background:rgba(255,255,255,.18)}.qmh-hour:last-child{border-right:0}.qmh-hour.is-now{background:rgba(255,255,255,.23);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),inset 0 -3px 0 rgba(255,255,255,.65)}.qmh-hour__time{font-size:10px;font-weight:800;white-space:nowrap;color:#fff}.qmh-hour__icon{width:28px;height:28px;display:grid;place-items:center;filter:drop-shadow(0 2px 3px rgba(0,20,40,.18))}.qmh-hour__icon svg{width:100%;height:100%}.qmh-hour__temp{font-size:14px;font-weight:800;color:#fff}.qmh-hour__rain,.qmh-hour__wind{font-size:8px;font-weight:600;opacity:.95;white-space:nowrap;color:#f5fbff}.qmh-weather__loading{font-size:11px;opacity:.82;display:flex;align-items:center;justify-content:center;width:100%}.qmh-weather__status{position:absolute;right:10px;bottom:2px;font-size:7.5px;opacity:.42;pointer-events:none}
/* Calm, Apple-like weather palettes: condition + time of day */
.qmh-weather--day{--sky1:#3a9fe1;--sky2:#8bd5f4}.qmh-weather--dawn{--sky1:#e98b69;--sky2:#f8c39a}.qmh-weather--dusk{--sky1:#69527e;--sky2:#d18475}.qmh-weather--night{--sky1:#0a1730;--sky2:#243b61;box-shadow:0 14px 34px rgba(4,12,30,.28)}
.qmh-weather--weather-cloudy,.qmh-weather--weather-overcast{--sky1:#557c97;--sky2:#93aebb}.qmh-weather--night.qmh-weather--weather-cloudy,.qmh-weather--night.qmh-weather--weather-overcast{--sky1:#16243d;--sky2:#334c6b}.qmh-weather--weather-fog{--sky1:#7f98a7;--sky2:#c2d0d5}.qmh-weather--night.qmh-weather--weather-fog{--sky1:#29394b;--sky2:#596a7c}.qmh-weather--weather-rain-light,.qmh-weather--weather-drizzle-light,.qmh-weather--weather-shower-light{--sky1:#4e7fa7;--sky2:#82aac5}.qmh-weather--weather-rain,.qmh-weather--weather-drizzle,.qmh-weather--weather-shower{--sky1:#3f6888;--sky2:#7395ad}.qmh-weather--weather-rain-heavy,.qmh-weather--weather-drizzle-heavy,.qmh-weather--weather-shower-heavy,.qmh-weather--weather-thunder,.qmh-weather--weather-thunder-hail{--sky1:#29455f;--sky2:#577087}.qmh-weather--night.qmh-weather--weather-rain-light,.qmh-weather--night.qmh-weather--weather-drizzle-light,.qmh-weather--night.qmh-weather--weather-shower-light{--sky1:#152c48;--sky2:#2d4c68}.qmh-weather--night.qmh-weather--weather-rain,.qmh-weather--night.qmh-weather--weather-drizzle,.qmh-weather--night.qmh-weather--weather-shower{--sky1:#10253f;--sky2:#294763}.qmh-weather--night.qmh-weather--weather-rain-heavy,.qmh-weather--night.qmh-weather--weather-drizzle-heavy,.qmh-weather--night.qmh-weather--weather-shower-heavy,.qmh-weather--night.qmh-weather--weather-thunder,.qmh-weather--night.qmh-weather--weather-thunder-hail{--sky1:#071527;--sky2:#1c304b}
.qmh-weather--weather-thunder,.qmh-weather--weather-thunder-hail{animation:qmh-thunder-bg 6s infinite}@keyframes qmh-thunder-bg{0%,92%,100%{filter:none}94%{filter:brightness(1.16)}95%{filter:none}}
.qmh-fx-sun{position:absolute;width:120px;height:120px;right:-18px;top:-54px;border-radius:50%;background:radial-gradient(circle,rgba(255,250,200,.46) 0,rgba(255,232,130,.17) 38%,transparent 70%);animation:qmh-sun-pulse 5s ease-in-out infinite}.qmh-fx-sun:after{content:"";position:absolute;inset:39px;border-radius:50%;background:rgba(255,240,170,.28);box-shadow:0 0 30px 14px rgba(255,224,100,.14)}@keyframes qmh-sun-pulse{0%,100%{transform:scale(.98);opacity:.84}50%{transform:scale(1.03);opacity:1}}.qmh-fx-moon{position:absolute;width:70px;height:70px;right:24px;top:7px;border-radius:50%;background:radial-gradient(circle at 37% 37%,#fff 0 43%,#dbe8ff 48%,rgba(217,230,255,.07) 70%,transparent 73%);box-shadow:0 0 26px 9px rgba(178,211,255,.14);opacity:.94}
.qmh-fx-rain{position:absolute;left:var(--x);top:-18px;width:calc(1px * var(--size));height:20px;border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(219,242,255,.78));transform:skewX(-12deg);animation:qmh-rain-fall var(--duration) linear var(--delay) infinite}@keyframes qmh-rain-fall{to{transform:translate3d(-18px,145px,0) skewX(-12deg);opacity:.15}}.qmh-fx-snow{position:absolute;left:var(--x);top:-14px;width:calc(4px * var(--size));height:calc(4px * var(--size));border-radius:50%;background:rgba(255,255,255,.9);animation:qmh-snow-fall var(--duration) ease-in-out var(--delay) infinite}@keyframes qmh-snow-fall{50%{transform:translate3d(10px,70px,0)}to{transform:translate3d(-6px,145px,0);opacity:.12}}.qmh-fx-lightning{position:absolute;inset:0;background:rgba(255,255,255,0);animation:qmh-lightning 6s infinite}.qmh-fx-lightning:after{content:"";position:absolute;left:74%;top:9%;width:3px;height:58px;background:linear-gradient(to bottom,transparent,#fff 45%,transparent);transform:rotate(11deg);opacity:0}@keyframes qmh-lightning{0%,89%,100%{background:rgba(255,255,255,0)}92%{background:rgba(220,240,255,.20)}93%{background:rgba(255,255,255,0)}95%{background:rgba(220,240,255,.12)}}.qmh-fx-fog-band{position:absolute;left:-10%;right:-10%;height:26px;top:calc(20px + var(--i)*22px);border-radius:50%;background:rgba(255,255,255,.12);filter:blur(9px);animation:qmh-fog 9s ease-in-out calc(var(--i)*-.8s) infinite alternate}@keyframes qmh-fog{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.qmh-weather--loading .qmh-weather__main,.qmh-weather--loading .qmh-weather__hourly-wrap{opacity:.78}
@media (max-width:1050px){.qmh-weather__main{width:39%;min-width:310px}.qmh-hour{min-width:67px;flex-basis:67px}}@media (max-width:760px){.qmh-weather{height:132px;border-radius:15px}.qmh-weather__main{width:48%;min-width:268px;padding:9px 10px 7px}.qmh-weather__clock-panel{right:10px}.qmh-weather__clock{font-size:15px}.qmh-weather__clock-date{display:none}.qmh-weather__hourly{height:92px}.qmh-hour{min-width:66px;flex-basis:66px}.qmh-weather__meta{gap:5px;font-size:8px}.qmh-weather__temp{font-size:31px}.qmh-weather__icon{width:30px;flex-basis:30px;height:30px}.qmh-weather__status,.qmh-weather__scroll-hint{display:none}}@media (prefers-reduced-motion:reduce){.qmh-weather,.qmh-fx-sun,.qmh-fx-rain,.qmh-fx-snow,.qmh-fx-lightning,.qmh-fx-fog-band{animation:none!important}}

/* V2.2 – condition-matched live weather background effects */
.qmh-weather__effect{z-index:1;opacity:1;mix-blend-mode:normal}
.qmh-weather__main,.qmh-weather__hourly-wrap,.qmh-weather__status{z-index:3}
.qmh-weather__main{background:linear-gradient(110deg,rgba(0,65,120,.10),rgba(255,255,255,.025))}
.qmh-weather__hourly{background:rgba(255,255,255,.055)}
.qmh-fx-sun{width:160px;height:160px;right:-14px;top:-70px;background:radial-gradient(circle,rgba(255,255,225,.65) 0,rgba(255,229,132,.22) 34%,rgba(255,217,102,.08) 54%,transparent 72%);box-shadow:0 0 42px 14px rgba(255,223,116,.10)}
.qmh-fx-sun:after{inset:53px;background:rgba(255,245,188,.42);box-shadow:0 0 34px 16px rgba(255,224,100,.18)}
.qmh-fx-sun-ray{position:absolute;left:calc(100% - 32px);top:-2px;width:220px;height:220px;transform-origin:0 0;transform:rotate(var(--r)) scaleX(.72);opacity:.18;animation:qmh-sun-ray 7s ease-in-out var(--delay) infinite}
.qmh-fx-sun-ray:after{content:"";position:absolute;left:0;top:65px;width:220px;height:30px;background:linear-gradient(90deg,rgba(255,244,190,.18),transparent);filter:blur(9px);transform:skewX(-18deg)}
@keyframes qmh-sun-ray{0%,100%{opacity:.12}50%{opacity:.24}}
.qmh-fx-star{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.85);animation:qmh-star 3s ease-in-out var(--delay) infinite}
@keyframes qmh-star{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.95;transform:scale(1)}}
.qmh-fx-cloud{position:absolute;left:var(--x);top:var(--y);width:180px;height:52px;border-radius:60px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.22),rgba(255,255,255,.05));filter:blur(8px);opacity:.75;transform:scale(var(--s));animation:qmh-cloud 15s ease-in-out var(--delay) infinite alternate}
.qmh-fx-cloud:before,.qmh-fx-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.qmh-fx-cloud:before{width:74px;height:74px;left:28px;top:-28px}.qmh-fx-cloud:after{width:92px;height:92px;right:24px;top:-40px}
@keyframes qmh-cloud{from{margin-left:-20px}to{margin-left:30px}}
.qmh-fx-drizzle{position:absolute;left:var(--x);top:-12px;width:calc(1px * var(--size));height:11px;border-radius:999px;background:linear-gradient(to bottom,rgba(225,244,255,0),rgba(221,243,255,.58));transform:rotate(-10deg);filter:blur(.15px);animation:qmh-drizzle-fall var(--duration) linear var(--delay) infinite}
@keyframes qmh-drizzle-fall{to{transform:translate3d(-7px,133px,0) rotate(-10deg);opacity:.08}}
.qmh-fx-rain{position:absolute;left:var(--x);top:-24px;width:calc(1.2px * var(--size));height:calc(22px * var(--size));border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(220,243,255,.78));transform:rotate(12deg);animation:qmh-rain-fall-v22 var(--duration) linear var(--delay) infinite}
@keyframes qmh-rain-fall-v22{to{transform:translate3d(-20px,158px,0) rotate(12deg);opacity:.06}}
.qmh-fx-shower{position:absolute;left:var(--x);top:-30px;width:calc(1.5px * var(--size));height:calc(28px * var(--size));border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(226,245,255,.88));transform:rotate(13deg);animation:qmh-shower-fall var(--duration) linear var(--delay) infinite}
@keyframes qmh-shower-fall{to{transform:translate3d(-25px,166px,0) rotate(13deg);opacity:.04}}
.qmh-fx-rain-pulse{position:absolute;left:-10%;right:-10%;top:35%;height:45%;background:linear-gradient(180deg,transparent,rgba(210,238,255,.055),transparent);filter:blur(8px);animation:qmh-rain-pulse 2.2s ease-in-out var(--delay) infinite}
@keyframes qmh-rain-pulse{0%,100%{opacity:.1;transform:translateY(-10%)}50%{opacity:.8;transform:translateY(10%)}}
.qmh-fx-storm-cloud{position:absolute;left:-8%;right:-8%;top:-12px;height:85px;background:radial-gradient(ellipse at 18% 50%,rgba(20,32,52,.24) 0 25%,transparent 55%),radial-gradient(ellipse at 52% 35%,rgba(15,24,40,.34) 0 30%,transparent 58%),radial-gradient(ellipse at 82% 45%,rgba(22,35,55,.28) 0 25%,transparent 55%);filter:blur(7px);animation:qmh-storm-drift 8s ease-in-out infinite alternate}
@keyframes qmh-storm-drift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
.qmh-weather--weather-drizzle-light .qmh-fx-drizzle{opacity:.72}.qmh-weather--weather-drizzle .qmh-fx-drizzle{opacity:.86}.qmh-weather--weather-drizzle-heavy .qmh-fx-drizzle{opacity:1}
.qmh-weather--weather-rain-light .qmh-fx-rain{opacity:.68}.qmh-weather--weather-rain .qmh-fx-rain{opacity:.82}.qmh-weather--weather-rain-heavy .qmh-fx-rain{opacity:1}
.qmh-weather--weather-shower-light .qmh-fx-shower{opacity:.72}.qmh-weather--weather-shower .qmh-fx-shower{opacity:.9}.qmh-weather--weather-shower-heavy .qmh-fx-shower{opacity:1}
@media (prefers-reduced-motion:reduce){.qmh-weather__effect *{animation:none!important;transition:none!important}}

/* V2.3 – higher contrast hourly forecast + visible live weather animation */
.qmh-weather__effect{z-index:2;opacity:1;pointer-events:none;overflow:hidden}
.qmh-weather__main,.qmh-weather__hourly-wrap,.qmh-weather__status{z-index:4}
.qmh-weather__hourly-wrap{padding-bottom:14px}
.qmh-weather__hourly{background:rgba(7,43,74,.30);border-color:rgba(255,255,255,.28)}
.qmh-fx-drizzle,.qmh-fx-rain,.qmh-fx-shower{will-change:transform,opacity}
.qmh-fx-drizzle{background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(232,248,255,.92));box-shadow:0 0 3px rgba(220,245,255,.45)}
.qmh-fx-rain{background:linear-gradient(to bottom,rgba(240,250,255,.08),rgba(235,249,255,.98));box-shadow:0 0 4px rgba(220,245,255,.5)}
.qmh-fx-shower{background:linear-gradient(to bottom,rgba(240,250,255,.1),rgba(245,252,255,1));box-shadow:0 0 5px rgba(225,246,255,.52)}
@keyframes qmh-drizzle-fall-v23{0%{transform:translate3d(0,-24px,0) rotate(-10deg);opacity:0}12%{opacity:1}100%{transform:translate3d(-18px,170px,0) rotate(-10deg);opacity:.15}}
@keyframes qmh-rain-fall-v23{0%{transform:translate3d(0,-28px,0) rotate(12deg);opacity:0}10%{opacity:1}100%{transform:translate3d(-34px,170px,0) rotate(12deg);opacity:.12}}
@keyframes qmh-shower-fall-v23{0%{transform:translate3d(0,-35px,0) rotate(13deg);opacity:0}8%{opacity:1}100%{transform:translate3d(-45px,178px,0) rotate(13deg);opacity:.1}}
.qmh-weather--weather-drizzle-light .qmh-fx-drizzle{animation-name:qmh-drizzle-fall-v23}.qmh-weather--weather-drizzle .qmh-fx-drizzle{animation-name:qmh-drizzle-fall-v23}.qmh-weather--weather-drizzle-heavy .qmh-fx-drizzle{animation-name:qmh-drizzle-fall-v23}
.qmh-weather--weather-rain-light .qmh-fx-rain{animation-name:qmh-rain-fall-v23}.qmh-weather--weather-rain .qmh-fx-rain{animation-name:qmh-rain-fall-v23}.qmh-weather--weather-rain-heavy .qmh-fx-rain{animation-name:qmh-rain-fall-v23}
.qmh-weather--weather-shower-light .qmh-fx-shower{animation-name:qmh-shower-fall-v23}.qmh-weather--weather-shower .qmh-fx-shower{animation-name:qmh-shower-fall-v23}.qmh-weather--weather-shower-heavy .qmh-fx-shower{animation-name:qmh-shower-fall-v23}
.qmh-weather--weather-rain-heavy .qmh-fx-rain{filter:drop-shadow(0 0 2px rgba(235,249,255,.5))}.qmh-weather--weather-shower-heavy .qmh-fx-shower{filter:drop-shadow(0 0 2px rgba(235,249,255,.55))}
.qmh-fx-rain-pulse{background:linear-gradient(180deg,transparent,rgba(214,241,255,.11),transparent)}
.qmh-weather__scrollbar{display:block}
@media (max-width:760px){.qmh-weather__hourly-wrap{padding-bottom:14px}.qmh-weather__scrollbar{left:9px;right:9px;height:7px}.qmh-weather__scroll-hint{display:none!important}}