/* ══ v1.19.163 — طيّ القائمة الجانبية + بطاقتا التاريخ والطقس (الرئيسية) ══ */
:root{ --sbw:200px; }
html[lang="ru"]{ --sbw:236px; }

/* ── زر الطيّ: ديسكتوب فقط. بالموبايل في الهامبرغر القديم ── */
.sb-handle{ display:none; }
@media (min-width:769px){
  .sidebar{ transition:width .42s cubic-bezier(.22,.9,.28,1), opacity .3s ease, border-width .3s ease, visibility 0s; }
  .sidebar > *{ min-width:var(--sbw); }
  .app.sb-collapsed .sidebar{
    width:0 !important; opacity:0; border-width:0; overflow:hidden !important; pointer-events:none;
    visibility:hidden; transition:width .42s cubic-bezier(.22,.9,.28,1), opacity .25s ease, border-width .3s ease, visibility 0s .42s;
  }
  .sb-handle{
    display:flex; align-items:center; justify-content:center; position:fixed; top:50%; z-index:60;
    inset-inline-start:var(--sbw); transform:translateY(-50%);
    width:16px; height:64px; padding:0; cursor:pointer; color:var(--cream2);
    background:var(--bg3); -webkit-backdrop-filter:blur(var(--glass-blur-sm)); backdrop-filter:blur(var(--glass-blur-sm));
    border:1px solid var(--border); border-inline-start:none;
    border-start-end-radius:12px; border-end-end-radius:12px;
    transition:inset-inline-start .42s cubic-bezier(.22,.9,.28,1), width .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .app.sb-collapsed .sb-handle{ inset-inline-start:0; }
  .sb-handle:hover, .sb-handle:focus-visible{ width:24px; color:var(--gold2); background:var(--bg4); box-shadow:0 0 18px rgba(18,200,135,.28); outline:none; }
  .sb-handle svg{ transition:transform .42s cubic-bezier(.22,.9,.28,1); }
  html[dir="rtl"] .sb-handle svg{ transform:rotate(180deg); }
  html[dir="rtl"] .app.sb-collapsed .sb-handle svg{ transform:none; }
  html[dir="ltr"] .app.sb-collapsed .sb-handle svg{ transform:rotate(180deg); }
  /* شارة الاختصار (Esc): تطلع جنب الزر عند المرور بس */
  .sb-handle .sh-badge{ position:absolute; inset-inline-start:calc(100% + 8px); top:50%; transform:translateY(-50%) scale(.85); opacity:0; pointer-events:none; margin:0 !important; transition:opacity .18s ease, transform .18s ease; }
  /* the badge is left-to-right text, so the logical side lands on the sidebar in Arabic */
  html[dir="rtl"] .sb-handle .sh-badge{ left:auto; right:calc(100% + 8px); }
  .sb-handle:hover .sh-badge, .sb-handle:focus-visible .sh-badge{ opacity:1; transform:translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion:reduce){ .sidebar, .sb-handle, .sb-handle svg{ transition:none !important; } }

/* ── صف البطاقتين ── */
.dw-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); gap:14px; margin-bottom:16px; position:relative; }
.dw-row.one{ grid-template-columns:minmax(0,1fr); }
.dw-row.none{ display:block; margin-bottom:10px; }
@media (max-width:900px){ .dw-row{ grid-template-columns:minmax(0,1fr); } }
.dw-add-bar{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--cream2); background:var(--bg3); border:1px dashed var(--border); border-radius:20px; padding:6px 14px; cursor:pointer; }
.dw-add-bar:hover{ color:var(--gold2); border-color:var(--gold); }
.dw-gear{
  position:absolute; top:10px; inset-inline-end:10px; z-index:6; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  color:var(--cream2); background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.14); opacity:.55;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:opacity .2s, transform .35s, color .2s;
}
.dw-card:hover .dw-gear, .dw-gear:focus-visible{ opacity:1; }
.dw-gear:hover{ transform:rotate(70deg); color:var(--gold2); }
.dw-wx .dw-gear{ color:#fff; }

/* ══ بطاقة التاريخ والوقت ══ */
.dw-card{ position:relative; border-radius:16px; overflow:hidden; min-height:216px; }
.dw-date{
  --dw-fs:46px; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:18px 20px 22px;
  background:linear-gradient(145deg, var(--bg4), var(--bg3)); border:1px solid var(--border);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
}
.dw-date.sz-s{ --dw-fs:34px; } .dw-date.sz-l{ --dw-fs:62px; }
.dw-date::before{ /* هالة متحركة خلف الأرقام */
  content:""; position:absolute; width:260px; height:260px; inset-inline-end:-80px; top:-110px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(18,200,135,.0), rgba(18,200,135,.32), rgba(42,90,154,.22), rgba(18,200,135,.0));
  filter:blur(26px); animation:dwSpin 22s linear infinite; pointer-events:none;
}
.dw-date::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 0% 100%, rgba(18,200,135,.10), transparent 60%); pointer-events:none; }
.dw-date > *{ position:relative; z-index:1; }
.dw-date > .dw-gear{ position:absolute; z-index:6; }
@keyframes dwSpin{ to{ transform:rotate(360deg); } }
.dw-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.dw-chip{ font-size:10.5px; font-weight:800; letter-spacing:.3px; padding:3px 10px; border-radius:20px; color:var(--gold2); background:rgba(18,200,135,.12); border:1px solid rgba(18,200,135,.35); }
.dw-chip.hj{ color:var(--silver2); background:rgba(168,184,200,.1); border-color:rgba(168,184,200,.3); }
.dw-clock{ direction:ltr; unicode-bidi:isolate; display:flex; align-items:baseline; justify-content:flex-start; gap:2px; font-size:var(--dw-fs); font-weight:900; line-height:1; font-variant-numeric:tabular-nums; color:var(--cream); text-shadow:0 2px 22px rgba(18,200,135,.25); }
html[dir="rtl"] .dw-clock{ justify-content:flex-end; }
.dw-clock .dw-u{ display:inline-block; min-width:1.18ch; text-align:center; }
.dw-clock .dw-sep{ opacity:.55; animation:dwBlink 1s steps(2,jump-none) infinite; padding:0 1px; }
@keyframes dwBlink{ 0%{ opacity:.9; } 100%{ opacity:.15; } }
.dw-clock .dw-s{ font-size:.58em; color:var(--gold2); margin-inline-start:6px; align-self:flex-end; padding-bottom:.12em; position:relative; }
.dw-clock .dw-s.tick{ animation:dwTick .38s cubic-bezier(.2,.9,.3,1.2); }
@keyframes dwTick{ 0%{ transform:translateY(55%); opacity:0; } 100%{ transform:none; opacity:1; } }
.dw-ampm{ font-size:.3em; font-weight:800; color:var(--cream2); margin-inline-start:8px; letter-spacing:.5px; }
.dw-dlines{ display:flex; flex-direction:column; gap:3px; }
.dw-dline{ font-weight:800; color:var(--cream); font-size:15px; line-height:1.35; }
.dw-dline.hj{ font-size:13px; font-weight:700; color:var(--cream2); display:flex; align-items:center; gap:6px; }
.dw-dline.hj svg{ flex-shrink:0; color:var(--gold2); }
.dw-dline.g .dw-wd{ color:var(--gold2); }

/* ══ بطاقة الطقس ══ */
@property --sk1{ syntax:'<color>'; inherits:true; initial-value:#1e6fd9; }
@property --sk2{ syntax:'<color>'; inherits:true; initial-value:#4aa3f0; }
@property --sk3{ syntax:'<color>'; inherits:true; initial-value:#9ad4ff; }
.dw-wx{
  --sk1:#1e6fd9; --sk2:#4aa3f0; --sk3:#9ad4ff; --px:0; --py:0; --cloud-b:1; --cloud-o:.92; --wind:0;
  color:#fff; border:1px solid rgba(255,255,255,.16); min-height:240px; isolation:isolate; cursor:default;
  background:linear-gradient(180deg, var(--sk1) 0%, var(--sk2) 55%, var(--sk3) 100%);
  transition:--sk1 1.6s ease, --sk2 1.6s ease, --sk3 1.6s ease; box-shadow:0 10px 34px rgba(0,0,0,.28);
}
.dw-wx .wx-layer{ position:absolute; inset:0; pointer-events:none; }
.dw-wx .wx-par{ transition:transform .5s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.wx-stars{ opacity:0; transition:opacity 1.6s ease; transform:translate3d(calc(var(--px)*-3px), calc(var(--py)*-2px),0); }
.dw-wx.night .wx-stars{ opacity:1; }
.wx-stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,.8); animation:wxTwinkle 3.2s ease-in-out infinite; }
.wx-stars i.b{ width:3px; height:3px; }
@keyframes wxTwinkle{ 0%,100%{ opacity:.25; transform:scale(.7); } 50%{ opacity:1; transform:scale(1.15); } }
.wx-shoot{ position:absolute; top:12%; inset-inline-start:70%; width:90px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0), #fff); opacity:0; transform:rotate(-24deg); animation:wxShoot 11s linear 3s infinite; }
html[dir="rtl"] .wx-shoot{ transform:rotate(24deg) scaleX(-1); }
.dw-wx:not(.night) .wx-shoot, .dw-wx.cloudy .wx-shoot{ display:none; }
@keyframes wxShoot{ 0%{ opacity:0; translate:0 0; } 2%{ opacity:1; } 8%{ opacity:0; translate:-160px 70px; } 100%{ opacity:0; translate:-160px 70px; } }

/* الشمس/القمر: بتمشي على قوس حسب الشروق والغروب الفعليين */
.wx-orb{ position:absolute; left:var(--ox,50%); top:var(--oy,30%); width:84px; height:84px; margin:-42px 0 0 -42px; transition:left 2s ease, top 2s ease, opacity 1s ease; transform:translate3d(calc(var(--px)*6px), calc(var(--py)*4px),0); }
.wx-sun{ position:absolute; inset:0; }
.wx-sun .core{ position:absolute; inset:22px; border-radius:50%; background:radial-gradient(circle at 38% 34%, #fff9d0, #ffd34e 55%, #ffab1f); box-shadow:0 0 38px 12px rgba(255,210,80,.7), 0 0 90px 36px rgba(255,170,40,.32); animation:wxPulse 4.5s ease-in-out infinite; }
.wx-sun .rays{ position:absolute; inset:-14px; border-radius:50%; background:repeating-conic-gradient(from 0deg, rgba(255,226,120,.55) 0 4deg, transparent 4deg 18deg); -webkit-mask:radial-gradient(circle, transparent 30%, #000 34%, transparent 68%); mask:radial-gradient(circle, transparent 30%, #000 34%, transparent 68%); animation:dwSpin 38s linear infinite; }
@keyframes wxPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.wx-moon{ position:absolute; inset:14px; border-radius:50%; filter:drop-shadow(0 0 16px rgba(220,230,255,.65)); }
.wx-moon svg{ width:100%; height:100%; display:block; }
.dw-wx.night .wx-sun{ display:none; } .dw-wx:not(.night) .wx-moon{ display:none; }
.dw-wx.cloudy .wx-orb{ opacity:.45; } .dw-wx.gloomy .wx-orb{ opacity:.14; }
.dw-wx.sunflare .wx-sun .core{ animation:wxFlare 1.1s ease-out; }
@keyframes wxFlare{ 0%{ transform:scale(1); } 30%{ transform:scale(1.55); box-shadow:0 0 70px 40px rgba(255,230,140,.9); } 100%{ transform:scale(1); } }

/* غيوم متعددة الطبقات (parallax) */
.wx-clouds{ overflow:hidden; transform:translate3d(calc(var(--px)*-9px), calc(var(--py)*-4px),0); }
.wx-cloud{ position:absolute; left:-40%; mix-blend-mode:normal; width:var(--w,150px); height:calc(var(--w,150px)*.56); top:var(--t,10%); opacity:calc(var(--o,.9)*var(--cloud-o)*.62); filter:brightness(var(--cloud-b));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 112'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23d5e0ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M48 108a38 38 0 0 1-4-75.8A50 50 0 0 1 138 24a44 44 0 0 1 28 84z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:wxDrift var(--d,60s) linear var(--dl,0s) infinite; }
@keyframes wxDrift{ from{ transform:translateX(0); } to{ transform:translateX(calc(100vw + 60%)); } }
html[dir="rtl"] .wx-cloud{ left:auto; right:-40%; animation-name:wxDriftR; }
@keyframes wxDriftR{ from{ transform:translateX(0); } to{ transform:translateX(calc(-100vw - 60%)); } }
.dw-wx .wx-cloud:nth-child(odd){ --o:.78; }

/* ضباب */
.wx-fog{ opacity:0; transition:opacity 1.2s ease; overflow:hidden; }
.dw-wx.foggy .wx-fog{ opacity:1; }
.wx-fog i{ position:absolute; left:-30%; width:160%; height:46%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.5) 25%, rgba(255,255,255,.62) 55%, transparent 90%); filter:blur(14px); animation:wxFog 26s ease-in-out infinite alternate; }
.wx-fog i:nth-child(1){ top:34%; } .wx-fog i:nth-child(2){ top:52%; animation-duration:34s; animation-direction:alternate-reverse; opacity:.8; } .wx-fog i:nth-child(3){ top:16%; animation-duration:41s; opacity:.55; }
@keyframes wxFog{ from{ transform:translateX(-10%); } to{ transform:translateX(10%); } }

/* مطر/ثلج على canvas + وميض البرق */
.wx-fx{ width:100%; height:100%; display:block; }
.wx-flash{ background:#e6edff; opacity:0; mix-blend-mode:screen; }
.dw-wx.flash .wx-flash{ animation:wxFlash .9s ease-out; }
@keyframes wxFlash{ 0%{ opacity:0; } 6%{ opacity:.85; } 14%{ opacity:.15; } 22%{ opacity:.7; } 100%{ opacity:0; } }

/* تلال + أفق مدينة صغير: نوافذها بتشعّ بالليل */
.dw-wx .wx-land{ top:auto; bottom:0; height:70px; transform:translate3d(calc(var(--px)*5px),0,0); }
.wx-land svg{ width:106%; margin-inline-start:-3%; height:100%; display:block; }
.wx-land .hl1{ fill:rgba(0,0,0,.20); } .wx-land .hl2{ fill:rgba(0,0,0,.34); } .wx-land .city{ fill:rgba(6,12,24,.62); }
.wx-land .win{ fill:#ffd36a; opacity:0; transition:opacity 1.4s ease; }
.dw-wx.night .wx-land .win{ opacity:.95; animation:wxWin 5s ease-in-out infinite; }
.wx-land .win:nth-child(3n){ animation-delay:-1.7s !important; } .wx-land .win:nth-child(4n){ animation-delay:-3.1s !important; }
@keyframes wxWin{ 0%,100%{ opacity:.95; } 47%{ opacity:.95; } 50%{ opacity:.25; } 54%{ opacity:.95; } }
.dw-wx.snowy .wx-land .hl2{ fill:rgba(255,255,255,.55); } .dw-wx.snowy .wx-land .hl1{ fill:rgba(255,255,255,.35); }

/* المحتوى فوق المشهد */
.wx-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.08) 40%, rgba(0,0,0,.42) 100%); }
.wx-body{ position:relative; z-index:5; padding:16px 18px 14px; display:flex; flex-direction:column; gap:10px; height:100%; min-height:240px; text-shadow:0 1px 12px rgba(0,0,0,.4); }
.wx-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-inline-end:36px; }
.wx-loc{ font-size:13px; font-weight:800; display:flex; align-items:center; gap:5px; opacity:.95; max-width:100%; }
.wx-loc span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-temp-row{ display:flex; align-items:center; gap:14px; }
.wx-temp{ font-size:62px; font-weight:900; line-height:.95; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; display:flex; align-items:flex-start; }
.wx-temp sup{ font-size:.34em; font-weight:800; margin-top:.28em; margin-inline-start:2px; opacity:.9; }
.wx-cond{ font-size:16px; font-weight:800; }
.wx-sub{ font-size:11.5px; opacity:.88; margin-top:2px; }
.wx-ico{ width:58px; height:58px; flex-shrink:0; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.wx-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.wx-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:none; }
.wx-chip svg{ flex-shrink:0; }