/* ================================================================
   assets/weather-3d-2026.css — کارت‌های سه‌بعدی آب‌وهوا + پنل ساعتی
   کارت واقعاً سه‌بعدی است: لایه‌ها روی محور Z جدا شده‌اند (preserve-3d)،
   با ماوس می‌چرخد، بازتاب نور دنبال ماوس می‌آید و صفحه‌ی زیرین عمق می‌دهد.
   ================================================================ */
@property --rx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ry{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- پالت رنگ برای پنل ساعتی، ساعت‌ها و کارت جزئیات ---------- */
.wx-hourly.wx-sunny,.wx-hour.wx-sunny,.wx-hnow.wx-sunny{--wx-bg1:#fff1b8;--wx-bg2:#ffc65c;--wx-ink:#4a3200;--wx-ink2:#7a5510;--wx-line:#f1c25a;--wx-acc:#c2410c}
.wx-hourly.wx-partly,.wx-hour.wx-partly,.wx-hnow.wx-partly{--wx-bg1:#d8ecff;--wx-bg2:#ffe9a8;--wx-ink:#1f3550;--wx-ink2:#4b6480;--wx-line:#cfe0f0;--wx-acc:#0369a1}
.wx-hourly.wx-cloudy,.wx-hour.wx-cloudy,.wx-hnow.wx-cloudy{--wx-bg1:#e9edf1;--wx-bg2:#c3ccd6;--wx-ink:#25313b;--wx-ink2:#4f5d69;--wx-line:#b8c2cc;--wx-acc:#475569}
.wx-hourly.wx-fog,.wx-hour.wx-fog,.wx-hnow.wx-fog{--wx-bg1:#f1f3f4;--wx-bg2:#d3d9dd;--wx-ink:#2b3438;--wx-ink2:#5a666b;--wx-line:#c5cdd1;--wx-acc:#64748b}
.wx-hourly.wx-rain,.wx-hour.wx-rain,.wx-hnow.wx-rain{--wx-bg1:#cfe3f9;--wx-bg2:#7fb0e2;--wx-ink:#0f2a4a;--wx-ink2:#2f5583;--wx-line:#7fb0e2;--wx-acc:#1d4ed8}
.wx-hourly.wx-snow,.wx-hour.wx-snow,.wx-hnow.wx-snow{--wx-bg1:#f5faff;--wx-bg2:#c6ddf3;--wx-ink:#17324d;--wx-ink2:#4a6a8a;--wx-line:#b7d2ec;--wx-acc:#0e7490}
.wx-hourly.wx-storm,.wx-hour.wx-storm,.wx-hnow.wx-storm{--wx-bg1:#d1c9ec;--wx-bg2:#7b6fb8;--wx-ink:#1e1440;--wx-ink2:#43377a;--wx-line:#7c6fb8;--wx-acc:#6d28d9}
.wx-hourly.wx-night,.wx-hour.wx-night,.wx-hnow.wx-night{--wx-bg1:#141d3d;--wx-bg2:#34427a;--wx-ink:#f3f6ff;--wx-ink2:#c5cff0;--wx-line:#4a5a8f;--wx-acc:#fbbf24;--wx-glass:rgba(255,255,255,.10)}

/* ---------- ردیف کارت‌های روز ---------- */
.hm-wx .hm-wx-toggle{margin-top:2px}
.hm-wx .hm-wx-days{display:none;flex-basis:100%;gap:14px;overflow-x:auto;overflow-y:visible;padding:34px 12px 30px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;perspective:none}
.hm-wx .hm-wx-days::-webkit-scrollbar{display:none}

.hm-wx-day{--rx:0deg;--ry:0deg;--lift:0px;--sc:1;--mx:50%;--my:30%;
  position:relative;flex:1 0 auto;min-width:112px;min-height:196px;padding:18px 10px 14px;border-radius:24px;
  display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--wx-ink);scroll-snap-align:center;cursor:pointer;
  background:none;border:0;overflow:visible;
  transform:perspective(950px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform;-webkit-tap-highlight-color:transparent}
.hm-wx-day.is-tilting{transition:transform .09s linear}
.hm-wx-day:focus-visible{outline:3px solid var(--wx-acc);outline-offset:4px}
.hm-wx-day:active{--sc:.985}

/* صفحه‌ی زیرین: با چرخش کارت، ضخامت و عمق نشان می‌دهد + سایه‌ی کف */
.hm-wx-day::before{content:"";position:absolute;inset:9px 7px -9px;border-radius:inherit;z-index:0;
  background:linear-gradient(180deg,var(--wx-bg2),color-mix(in srgb,var(--wx-bg2) 55%,#000));
  box-shadow:0 28px 34px -16px rgba(0,0,0,.55),0 8px 14px -6px rgba(0,0,0,.25);
  transform:translateZ(-20px);opacity:.92;pointer-events:none}

/* رویه‌ی شیشه‌ای کارت (محل باران/برف/ستاره؛ لبه‌ها بریده می‌شوند) */
.wx-face{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none;transform:translateZ(0);
  background:linear-gradient(160deg,rgba(255,255,255,.92) 0%,var(--wx-bg1) 34%,var(--wx-bg2) 100%);
  border:1px solid color-mix(in srgb,var(--wx-line) 65%,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 1px 0 0 rgba(255,255,255,.35),inset 0 -16px 28px rgba(0,0,0,.08)}
.wx-face::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.7),rgba(255,255,255,0) 58%);opacity:0;transition:opacity .3s}
.is-tilting>.wx-face::before,.wx-hnow.is-tilting>.wx-face::before{opacity:1}
.wx-face::after{content:"";position:absolute;inset:0;opacity:0}

/* جلوه‌ی هر نوع هوا روی رویه */
.wx-snow>.wx-face::after{opacity:.9;background-image:radial-gradient(3px 3px at 12% 18%,#fff 55%,transparent 60%),radial-gradient(2px 2px at 42% 35%,#fff 55%,transparent 60%),radial-gradient(3px 3px at 78% 22%,#fff 55%,transparent 60%),radial-gradient(2px 2px at 65% 72%,#fff 55%,transparent 60%),radial-gradient(3px 3px at 24% 80%,#fff 55%,transparent 60%);background-size:88px 88px;animation:wxCardSnow 5.5s linear infinite}
.wx-night>.wx-face::after{opacity:.4;background:radial-gradient(2px 2px at 20% 25%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 70% 35%,#fff 60%,transparent),radial-gradient(2px 2px at 55% 70%,#fff 60%,transparent);background-size:80px 80px;animation:wxCardStars 5s ease-in-out infinite}
.wx-sunny>.wx-face::after,.wx-partly>.wx-face::after,.wx-cloudy>.wx-face::after{opacity:.3;background:linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.6) 47%,transparent 58%);background-size:190% 100%;animation:wxCardLight 8s ease-in-out infinite;animation-delay:calc(var(--wx-index,0) * 1.2s)}
.wx-storm>.wx-face::after{background:#fff;animation:wxFlash 7s infinite;animation-delay:calc(var(--wx-index,0) * .8s)}

/* لایه‌های عمق (فقط وقتی افکت سه‌بعدی روشن است) */
.hm-wx-day>*{position:relative;z-index:2}
.hm-wx-day>.wx-face{position:absolute;z-index:1}
.hm-wx-day .d{font-size:12.5px;font-weight:900}
.hm-wx-day .jd{font-size:10.5px;color:var(--wx-ink2)}
.hm-wx-day .i{font-size:36px;line-height:1.3;filter:drop-shadow(0 10px 8px rgba(0,0,0,.22));animation:wxIconBob 4.5s ease-in-out infinite;animation-delay:calc(var(--wx-index,0) * -.45s)}
.hm-wx-day .lb{font-size:10.5px;color:var(--wx-ink2);text-align:center;line-height:1.5;min-height:16px}
.hm-wx-day .t{display:flex;gap:6px;align-items:baseline;font-size:13px}.hm-wx-day .t .tmax{font-size:15px;font-weight:900}.hm-wx-day .t .tmin{color:var(--wx-ink2);font-size:12px}
.hm-wx-day .bar{display:block;position:relative;width:74%;height:6px;border-radius:9px;background:#00000018;margin:4px 0;overflow:hidden}
.hm-wx-day .bar u{position:absolute;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,#38bdf8,#fbbf24,#f97316);text-decoration:none;box-shadow:0 0 8px rgba(255,255,255,.55)}
.hm-wx-day.wx-night .bar{background:#ffffff26}
.hm-wx-day .p{font-size:11px;color:var(--wx-acc);font-weight:800}
.hm-wx-day .today-badge{position:absolute;top:-12px;inset-inline:0;margin-inline:auto;width:max-content;font-size:11px;font-weight:900;padding:3px 13px;border-radius:999px;background:var(--wx-acc);color:#fff;box-shadow:0 6px 14px -4px rgba(0,0,0,.55);z-index:4}

.wx-3d .hm-wx-day>.d{transform:translateZ(30px)}
.wx-3d .hm-wx-day>.jd{transform:translateZ(22px)}
.wx-3d .hm-wx-day>.i{transform:translateZ(66px)}
.wx-3d .hm-wx-day>.lb{transform:translateZ(26px)}
.wx-3d .hm-wx-day>.t{transform:translateZ(38px)}
.wx-3d .hm-wx-day>.bar{transform:translateZ(18px)}
.wx-3d .hm-wx-day>.p{transform:translateZ(28px)}
.wx-3d .hm-wx-day .today-badge{transform:translateZ(56px)}
.wx-3d .hm-wx-day>.d,.wx-3d .hm-wx-day>.t .tmax{text-shadow:0 2px 3px rgba(0,0,0,.14)}

/* امروز و کارت انتخاب‌شده */
.hm-wx-day.is-today{--lift:-6px;--sc:1.05}
.hm-wx-day.is-today>.wx-face{border-color:var(--wx-acc);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -16px 30px rgba(0,0,0,.08),0 0 0 2px var(--wx-acc)}
@media (hover:hover) and (pointer:fine){ .hm-wx-day:hover{--lift:-10px} .hm-wx-day.is-today:hover{--lift:-12px} }
.hm-wx-day.is-active>.wx-face{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -16px 30px rgba(0,0,0,.08),0 0 0 3px var(--wx-acc),0 0 22px -2px var(--wx-acc)}
.hm-wx-day.is-active::after{content:"";position:absolute;bottom:-17px;left:50%;margin-left:-9px;border:9px solid transparent;border-top-color:var(--wx-acc);border-bottom:0;z-index:3;transform:translateZ(8px)}

/* بدون افکت سه‌بعدی: کارت تخت و سبک */
.hm-wx:not(.wx-3d) .hm-wx-day{transform:translateY(var(--lift)) scale(var(--sc));transform-style:flat}
.hm-wx:not(.wx-3d) .hm-wx-day::before{transform:none;inset:4px 3px -4px;box-shadow:0 14px 20px -14px rgba(0,0,0,.5)}
.hm-wx:not(.wx-3d) .hm-wx-day .i{animation:none}

/* لمس/بدون ماوس: چرخش ملایم خودکار تا حس سه‌بعدی بودن حفظ شود */
@media (hover:none),(pointer:coarse){
  .wx-3d .hm-wx-day{animation:wxSway 6.5s ease-in-out infinite alternate;animation-delay:calc(var(--wx-index,0) * -.9s)}
}
@keyframes wxSway{from{--ry:-8deg;--rx:2.5deg}to{--ry:8deg;--rx:-2.5deg}}
@keyframes wxIconBob{50%{translate:0 -4px}}
@keyframes wxCardSnow{to{background-position:24px 96px}}
@keyframes wxCardLight{0%,68%,100%{background-position:120% 0;opacity:.12}82%{background-position:-20% 0;opacity:.38}90%{opacity:.12}}
@keyframes wxCardStars{50%{opacity:.72}}

/* ---------- باران داخل رویه ---------- */
.wx-rain-drops{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;border-radius:inherit}
.wx-rain-drop{position:absolute;top:-42px;left:var(--x);width:var(--w);height:var(--h);border-radius:999px 999px 65% 65%;
  background:linear-gradient(170deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.72) 35%,rgba(191,226,255,.92) 72%,rgba(87,145,202,.2) 100%);
  box-shadow:0 0 4px rgba(255,255,255,.38),0 3px 7px rgba(37,93,145,.18);
  opacity:var(--o);filter:blur(var(--blur));transform:rotate(11deg) translate3d(0,0,0);transform-origin:center bottom;
  animation:wxRealRain var(--dur) linear var(--delay) infinite;will-change:transform,opacity}
.wx-rain-drop::after{content:"";position:absolute;left:45%;top:100%;width:1px;height:var(--trail);border-radius:50%;background:linear-gradient(to bottom,rgba(220,242,255,.55),transparent);transform:rotate(-1deg)}
.wx-rain-ground{position:absolute;left:8%;right:8%;bottom:7px;height:13px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.3),rgba(104,161,207,.12) 45%,transparent 72%);filter:blur(3px);opacity:.55}
.wx-rain-sheen{position:absolute;inset:-20%;pointer-events:none;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.11) 48%,transparent 58%);transform:translate3d(-45%,0,0) rotate(7deg);animation:wxRainSheen 5.8s ease-in-out infinite;z-index:1}
@keyframes wxRealRain{0%{transform:translate3d(0,-8px,0) rotate(11deg);opacity:0}8%{opacity:var(--o)}55%{opacity:var(--o)}100%{transform:translate3d(var(--drift),230px,0) rotate(11deg);opacity:0}}
@keyframes wxRainSheen{0%,64%{transform:translate3d(-48%,0,0) rotate(7deg);opacity:0}76%{opacity:.55}100%{transform:translate3d(48%,0,0) rotate(7deg);opacity:0}}

/* ---------- پنل وضعیت ساعتی ---------- */
.wx-hint{flex-basis:100%;margin:-6px 0 0;text-align:center;font-size:11.5px;color:var(--wx-ink2)}
.hm-wx-in>*{min-width:0;max-width:100%}
.wx-hourly{flex:1 1 100%;width:100%;min-width:0;max-width:100%;box-sizing:border-box;position:relative;margin:6px 0 6px;padding:18px;border-radius:28px;color:var(--wx-ink);
  background:linear-gradient(150deg,color-mix(in srgb,var(--wx-bg1) 72%,#fff),color-mix(in srgb,var(--wx-bg2) 58%,#fff));
  border:1px solid color-mix(in srgb,var(--wx-line) 70%,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 26px 50px -30px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .5s,border-color .5s;animation:wxPanelIn .45s cubic-bezier(.2,.8,.2,1)}
.wx-hourly[hidden]{display:none}
.wx-hourly.wx-night{background:linear-gradient(150deg,var(--wx-bg1),var(--wx-bg2))}
@keyframes wxPanelIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.wx-hourly-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.wx-hourly-head strong{display:block;font-size:16.5px}.wx-hourly-head small{display:block;margin-top:4px;color:var(--wx-ink2);font-size:11px;line-height:1.7}
.wx-hourly-close{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--wx-line);background:rgba(255,255,255,.55);color:var(--wx-ink);font-size:24px;line-height:1;cursor:pointer}

/* کارت وضعیت ساعت انتخاب‌شده */
.wx-hnow{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;position:relative;margin-bottom:14px;padding:18px;border-radius:24px;color:var(--wx-ink);
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.wx-hnow.is-tilting{transition:transform .09s linear}
.wx-hnow>.wx-face{border-radius:24px}
.wx-hnow>.wx-hn-body{position:relative;z-index:2;display:grid;gap:12px}
.wx-hn-main{display:flex;align-items:center;gap:14px}
.wx-hn-ico{font-size:66px;line-height:1;filter:drop-shadow(0 12px 12px rgba(0,0,0,.25));animation:wxIconBob 4.5s ease-in-out infinite}
.wx-3d .wx-hnow .wx-hn-body,.wx-3d .wx-hnow .wx-hn-main{transform-style:preserve-3d}
.wx-3d .wx-hnow .wx-hn-ico{transform:translateZ(46px)}
.wx-hn-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-hn-txt small{font-size:12px;font-weight:800;color:var(--wx-ink2)}
.wx-hn-txt strong{font-size:46px;line-height:1.05;font-weight:900;letter-spacing:-1px}
.wx-hn-txt span{font-size:15px;font-weight:800;color:var(--wx-ink2)}
.wx-hn-txt em,.wx-hour em{font-style:normal;font-size:10.5px;font-weight:900;padding:2px 9px;border-radius:999px;background:var(--wx-acc);color:#fff;margin-inline-start:6px;vertical-align:middle}
.wx-hn-msg{margin:0;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65);font-size:13px;font-weight:800}
.wx-night .wx-hn-msg{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.wx-hn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.wx-hn-grid>span{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.55)}
.wx-night .wx-hn-grid>span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
.wx-hn-grid i{grid-row:1/3;font-style:normal;font-size:20px}
.wx-hn-grid small{font-size:10.5px;color:var(--wx-ink2)}
.wx-hn-grid b{font-size:13.5px;font-weight:900}.wx-hn-grid b em{background:none;color:var(--wx-ink2);padding:0;margin:0;font-size:10.5px;font-weight:700}

.wx-hourly-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.wx-hourly-summary span{padding:10px 8px;border-radius:16px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.55);text-align:center}
.wx-night .wx-hourly-summary span,.wx-hourly.wx-night .wx-hourly-summary span{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
.wx-hourly-summary small,.wx-hourly-summary b{display:block}.wx-hourly-summary small{font-size:10px;color:var(--wx-ink2)}.wx-hourly-summary b{font-size:14px;margin-top:3px}

/* نمودار دما + احتمال بارش (کلیک/کشیدن = انتخاب ساعت) */
.wx-hourly-chart{position:relative;height:118px;border-radius:18px;background:rgba(255,255,255,.22);overflow:hidden;margin-bottom:12px;color:var(--wx-acc);touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.wx-hourly-chart svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wx-hourly-chart .wx-area{fill:url(#wxGrad)}
.wx-hourly-chart .wx-line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.wx-hourly-chart .wx-pop rect{fill:#3b82f6;opacity:.35}
.wx-ch-line{position:absolute;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:currentColor;opacity:.35;pointer-events:none}
.wx-ch-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid currentColor;box-shadow:0 4px 10px rgba(0,0,0,.3);pointer-events:none;transition:left .25s,top .25s}
.wx-ch-tip{position:absolute;top:6px;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:currentColor;color:#fff;font-size:11px;font-weight:900;white-space:nowrap;pointer-events:none;transition:left .25s}
.wx-ch-tip{background:var(--wx-acc)}
.wx-ch-cap{position:absolute;inset-inline-start:8px;font-size:10px;font-weight:800;color:var(--wx-ink2);pointer-events:none}
.wx-ch-max{top:6px;display:none}.wx-ch-min{bottom:6px}

/* نوار ساعت‌ها */
.wx-hourly-list{position:relative;display:flex;flex-wrap:nowrap;gap:10px;width:100%;min-width:0;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;padding:16px 14px 20px;
  scroll-snap-type:x proximity;scroll-padding-inline:14px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:var(--wx-acc) transparent;cursor:grab;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
.wx-hourly-list::-webkit-scrollbar{height:6px}.wx-hourly-list::-webkit-scrollbar-thumb{background:var(--wx-acc);border-radius:9px;opacity:.6}
.wx-hourly-list.is-drag,.hm-wx-days.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.wx-hourly-list.is-drag .wx-hour{pointer-events:none}
.hm-wx .hm-wx-days{min-width:0;max-width:100%;touch-action:pan-x pan-y;overscroll-behavior-x:contain;cursor:grab}
.wx-hour{position:relative;flex:0 0 auto;width:78px;min-width:78px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px 11px;border-radius:18px;font:inherit;color:var(--wx-ink);cursor:pointer;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.75),var(--wx-bg1) 45%,var(--wx-bg2));border:1px solid color-mix(in srgb,var(--wx-line) 60%,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 18px -14px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .25s}
.wx-hour:hover{transform:translateY(-3px)}
.wx-hour time{font-weight:900;font-size:12.5px}
.wx-hour em{margin:0;font-size:9.5px;padding:1px 7px}
.wx-hour-icon{font-size:26px;line-height:1.2;filter:drop-shadow(0 5px 4px rgba(0,0,0,.2))}
.wx-hour>b{font-size:17px;font-weight:900}
.wx-hour-pop{font-size:10.5px;font-weight:800;color:var(--wx-acc)}
.wx-hour-bar{position:absolute;inset-inline:0;bottom:0;height:var(--v);max-height:34%;min-height:3px;background:linear-gradient(to top,rgba(59,130,246,.55),rgba(59,130,246,0));pointer-events:none}
.wx-hour.is-past{opacity:.6}
.wx-hour.is-now{border-color:var(--wx-acc);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 2px var(--wx-acc),0 10px 18px -12px rgba(0,0,0,.6)}
.wx-hour.is-sel{opacity:1;transform:translateY(-6px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 3px var(--wx-acc),0 16px 24px -12px rgba(0,0,0,.65)}
.wx-hour:focus-visible{outline:3px solid var(--wx-acc);outline-offset:2px}

@media(max-width:640px){
  .hm-wx-day{min-width:98px;min-height:186px;border-radius:21px}
  .hm-wx .hm-wx-days{padding:32px 10px 28px;gap:10px}
  .wx-hourly{padding:12px 10px 8px;border-radius:22px}
  .wx-hourly-head strong{font-size:15px}
  .wx-hourly-close{width:36px;height:36px}
  .wx-hnow{padding:14px 12px;border-radius:20px;margin-bottom:10px}
  .wx-hn-main{gap:10px}.wx-hn-ico{font-size:52px}.wx-hn-txt strong{font-size:38px}.wx-hn-txt span{font-size:14px}
  .wx-hn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .wx-hn-grid>span{padding:8px;column-gap:6px}.wx-hn-grid i{font-size:18px}
  .wx-hourly-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px}
  .wx-hourly-summary span{padding:8px 6px}.wx-hourly-summary b{font-size:13px}
  .wx-hourly-chart{height:96px;margin-bottom:6px}
  .wx-hourly-list{gap:8px;padding:14px 12px 16px;scroll-padding-inline:12px}
  .wx-hour{width:70px;min-width:70px;padding:10px 6px 9px;border-radius:16px}
  .wx-hour-icon{font-size:24px}.wx-hour>b{font-size:16px}
  .wx-hour.is-sel{transform:translateY(-4px) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .hm-wx-day,.hm-wx-day .i,.wx-hn-ico,.wx-hourly,.wx-hour,.wx-hnow,.wx-ch-dot,.wx-ch-tip{animation:none!important;transition:none!important}
  .wx-face::after,.wx-rain-drop,.wx-rain-sheen{animation:none!important}
  .hm-wx-day{--rx:0deg!important;--ry:0deg!important}
}