.wx-arrow{ display:inline-block; transition:transform 1s cubic-bezier(.3,1.4,.4,1); }
.wx-spark{ width:100%; height:40px; display:block; margin-top:auto; overflow:visible; direction:ltr; }
.wx-spark path.ln{ fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400); animation:wxDraw 1.6s .2s ease forwards; filter:drop-shadow(0 0 4px rgba(255,255,255,.7)); }
.wx-spark path.fl{ fill:rgba(255,255,255,.14); stroke:none; opacity:0; animation:wxFade 1s 1.2s ease forwards; }
.wx-spark circle{ fill:#fff; opacity:0; animation:wxFade .5s 1.6s ease forwards; }
.wx-spark text{ fill:rgba(255,255,255,.85); font-size:8.5px; font-weight:700; text-anchor:middle; text-shadow:none; }
@keyframes wxDraw{ to{ stroke-dashoffset:0; } } @keyframes wxFade{ to{ opacity:1; } }
.wx-days{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.wx-day{ text-align:center; padding:6px 2px 5px; border-radius:11px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .25s cubic-bezier(.3,1.5,.5,1), background .2s; opacity:0; animation:wxRise .55s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay:calc(var(--i,0)*70ms + 250ms); }
.wx-day:hover{ transform:translateY(-4px) scale(1.05); background:rgba(255,255,255,.24); }
.wx-day b{ display:block; font-size:10.5px; font-weight:800; opacity:.92; }
.wx-day svg{ width:26px; height:26px; margin:1px auto; display:block; }
.wx-day em{ display:block; font-style:normal; font-size:11px; font-weight:800; direction:ltr; }
.wx-day em s{ text-decoration:none; opacity:.65; font-weight:700; }
@keyframes wxRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.wx-note{ font-size:10.5px; opacity:.8; display:flex; align-items:center; gap:5px; }
.wx-prompt{ margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.wx-prompt b{ font-size:15px; font-weight:900; }
.wx-btn{ background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:22px; padding:8px 18px; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; text-shadow:none; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .2s, background .2s; }
.wx-btn:hover{ background:rgba(255,255,255,.32); transform:translateY(-2px); }
.wx-shimmer{ height:14px; width:120px; border-radius:8px; background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.32), rgba(255,255,255,.12)); background-size:200% 100%; animation:wxShim 1.3s linear infinite; }
@keyframes wxShim{ to{ background-position:-200% 0; } }
/* أيقونات الطقس المتحركة */
.wxi .spin{ transform-origin:50% 50%; animation:dwSpin 18s linear infinite; }
.wxi .bob{ animation:wxBob 4s ease-in-out infinite; } @keyframes wxBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
.wxi .drop{ animation:wxDrop 1.1s linear infinite; } .wxi .drop:nth-of-type(2){ animation-delay:.35s; } .wxi .drop:nth-of-type(3){ animation-delay:.7s; }
@keyframes wxDrop{ 0%{ transform:translateY(-3px); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateY(6px); opacity:0; } }
.wxi .flake{ animation:wxFlake 2.4s ease-in-out infinite; } .wxi .flake:nth-of-type(2){ animation-delay:.8s; } .wxi .flake:nth-of-type(3){ animation-delay:1.6s; }
@keyframes wxFlake{ 0%{ transform:translate(0,-3px); opacity:0; } 30%{ opacity:1; } 100%{ transform:translate(2px,7px); opacity:0; } }
.wxi .bolt{ animation:wxBolt 2.6s steps(1) infinite; } @keyframes wxBolt{ 0%,70%,100%{ opacity:1; } 74%{ opacity:.1; } 78%{ opacity:1; } 82%{ opacity:.2; } }

/* مستوى الحركة: خفيفة = ثابتة تقريباً، بدون = لا حركة نهائياً */
.dw-wx.fx-low .wx-stars i, .dw-wx.fx-low .wx-sun .rays, .dw-wx.fx-low .wx-shoot, .dw-wx.fx-low .wx-land .win{ animation:none !important; }
.dw-wx.fx-low .wx-cloud{ animation-duration:240s !important; }
.dw-wx.fx-low .wx-fx{ display:none; }
.dw-wx.fx-off *, .dw-wx.fx-off *::before, .dw-wx.fx-off *::after{ animation:none !important; transition:none !important; }
.dw-wx.fx-off .wx-fx{ display:none; } .dw-wx.fx-off .wx-day{ opacity:1; } .dw-wx.fx-off .wx-spark path.ln{ stroke-dashoffset:0; } .dw-wx.fx-off .wx-spark path.fl, .dw-wx.fx-off .wx-spark circle{ opacity:1; }
.dw-wx.fx-off .wx-cloud{ left:calc(var(--sx,10%)); } html[dir="rtl"] .dw-wx.fx-off .wx-cloud{ left:auto; right:var(--sx,10%); }
.dw-date.fx-off *, .dw-date.fx-off::before{ animation:none !important; }

/* ── نافذة التخصيص ── */
.dws-sec{ font-size:12.5px; font-weight:900; color:var(--gold2); margin:14px 0 8px; display:flex; align-items:center; gap:8px; }
.dws-sec::after{ content:""; flex:1; height:1px; background:var(--border); }
.dws-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.dws-row > span{ min-width:0; }
.dws-seg{ display:inline-flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }
.dws-seg button{ font-family:inherit; font-size:12px; font-weight:700; padding:5px 11px; border-radius:18px; cursor:pointer; color:var(--cream2); background:var(--bg3); border:1px solid var(--border); transition:all .18s; }
.dws-seg button:hover{ color:var(--cream); }
.dws-seg button.on{ color:#06100c; background:var(--gold2); border-color:var(--gold2); box-shadow:0 0 14px rgba(18,200,135,.35); }
.dws-fields{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 0; border-bottom:1px solid var(--border); }
.dws-fields button{ font-family:inherit; font-size:12px; font-weight:700; padding:5px 12px; border-radius:18px; cursor:pointer; color:var(--cream2); background:var(--bg3); border:1px solid var(--border); }
.dws-fields button.on{ color:var(--gold2); border-color:var(--gold2); background:rgba(18,200,135,.12); }
.dws-hint{ font-size:11px; color:var(--muted); padding:4px 0 2px; line-height:1.55; }
.dws-loc-res{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.dws-loc-res button{ font-family:inherit; text-align:start; font-size:12.5px; padding:8px 12px; border-radius:10px; cursor:pointer; color:var(--cream); background:var(--bg3); border:1px solid var(--border); }
.dws-loc-res button:hover{ border-color:var(--gold2); }
.dws-loc-res small{ color:var(--muted); font-size:11px; }

.dw-clock .dw-s.solo{ font-size:1em; margin:0; padding:0; }

/* ── حالة الاتصال بصفحة «حول» (بدل الزاوية العائمة) ── */
.about-net{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; margin-bottom:12px; border-radius:20px; font-size:12.5px; font-weight:800; color:var(--gold2); background:rgba(18,200,135,.1); border:1px solid rgba(18,200,135,.3); transition:all .25s; }
.about-net.is-off{ color:#f87171; background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.35); }

/* ══ Premium home page: balanced stat grid, depth, entrance motion ══
   Pure CSS. Entrance animations use fill-mode "backwards" only, so they never
   override final states (e.g. the collapsed sidebar opacity). They replay when
   #app or the dashboard page becomes visible (login, navigating home). */
#pg-dashboard .pg-title{ font-size:26px; letter-spacing:.2px; position:relative; padding-bottom:12px; margin-bottom:18px; }
#pg-dashboard .pg-title::after{ content:""; position:absolute; inset-inline-start:0; bottom:0; width:46px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold2)); box-shadow:0 0 14px rgba(18,200,135,.55); }

/* stat cards: auto-fit grid (5 cards no longer leave an orphan row) */
#pg-dashboard .stats-row{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
#pg-dashboard .stat{
  --stat-c:#12c887; position:relative; overflow:hidden; border-radius:14px; padding:16px 16px 14px;
  background:linear-gradient(160deg,rgba(18,200,135,.07) 0%,transparent 55%),var(--bg3);
  box-shadow:inset 0 1px 0 var(--glass-hl),0 6px 22px rgba(0,0,0,.18);
  transition:transform .28s cubic-bezier(.22,.9,.28,1),border-color .25s,box-shadow .28s;
}
#pg-dashboard .stat:nth-child(1){ --stat-c:#12c887; }
#pg-dashboard .stat:nth-child(2){ --stat-c:#4ade80; }
#pg-dashboard .stat:nth-child(3){ --stat-c:#8ab8a8; }
#pg-dashboard .stat:nth-child(4){ --stat-c:#f08080; }
#pg-dashboard .stat:nth-child(5){ --stat-c:#2dd4bf; }
#pg-dashboard .stat::before{ content:""; position:absolute; top:0; inset-inline:14px; height:2px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,transparent,var(--stat-c),transparent); opacity:.8; }
#pg-dashboard .stat::after{ content:""; position:absolute; width:120px; height:120px; inset-inline-start:-40px; bottom:-60px; border-radius:50%; background:radial-gradient(circle,var(--stat-c),transparent 70%); opacity:.12; pointer-events:none; transition:opacity .3s; }
#pg-dashboard .stat:hover{ transform:translateY(-3px); border-color:rgba(18,200,135,.45); box-shadow:inset 0 1px 0 var(--glass-hl),0 14px 34px rgba(0,0,0,.3),0 0 0 1px rgba(18,200,135,.12); }
#pg-dashboard .stat:hover::after{ opacity:.24; }
#pg-dashboard .stat .lbl{ font-size:11.5px; font-weight:700; letter-spacing:.2px; margin-bottom:8px; }
#pg-dashboard .stat .val{ font-size:26px; font-variant-numeric:tabular-nums; letter-spacing:.2px; line-height:1.15; }
.stat-ico{ position:absolute; top:12px; inset-inline-end:12px; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--stat-c,#12c887); background:rgba(18,200,135,.1); border:1px solid rgba(18,200,135,.22); }
.stat-ico svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* quick action buttons */
#pg-dashboard .qa-btn{ display:inline-flex; align-items:center; gap:9px; border-radius:12px; padding:11px 20px; transition:transform .22s cubic-bezier(.22,.9,.28,1),box-shadow .22s,background .2s; }
#pg-dashboard .qa-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(13,158,110,.38); }
#pg-dashboard .qa-btn:active{ transform:translateY(0); }
#pg-dashboard .qa-btn.btn-terra{ border:1px solid rgba(18,200,135,.35); background:linear-gradient(135deg,rgba(10,122,85,.9),rgba(10,122,85,.65)); }

/* date + weather cards: depth and a cohesive frame */
.dw-card{ transition:transform .3s cubic-bezier(.22,.9,.28,1),box-shadow .3s; }
.dw-card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.34),0 0 0 1px rgba(18,200,135,.18); }
.dw-date{ box-shadow:inset 0 1px 0 var(--glass-hl),0 8px 26px rgba(0,0,0,.2); }
.dw-wx::after{ content:""; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg,transparent,rgba(8,15,13,.42)); pointer-events:none; z-index:1; }
.dw-wx > .dw-gear{ z-index:6; }

/* quick view panel */
#pg-dashboard .qa-panel{ border-radius:16px; padding:18px; box-shadow:inset 0 1px 0 var(--glass-hl),0 8px 26px rgba(0,0,0,.18); }
#pg-dashboard .qa-subcard{ position:relative; border-radius:12px; padding:14px; transition:border-color .25s,box-shadow .25s; }
#pg-dashboard .qa-subcard:hover{ border-color:rgba(18,200,135,.35); box-shadow:0 8px 24px rgba(0,0,0,.2); }
#pg-dashboard .qa-subcard .sec-title{ display:flex; align-items:center; gap:8px; }
#pg-dashboard .qa-subcard .sec-title::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold2); box-shadow:0 0 10px rgba(18,200,135,.8); flex-shrink:0; }
#pg-dashboard .qa-subcard tbody tr{ transition:background .15s; }
#pg-dashboard .qa-subcard tbody tr:hover{ background:rgba(18,200,135,.06); }
/* empty states (invoices / low stock tables, debtor lists) */
#pg-dashboard .qa-subcard td[colspan],
#pg-dashboard .qa-debtor-empty{ text-align:center; color:var(--muted); padding:20px 8px; font-size:12.5px; }
#pg-dashboard .qa-subcard td[colspan]::before,
#pg-dashboard .qa-debtor-empty::before{ content:""; display:block; width:38px; height:38px; margin:0 auto 8px; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312c887' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3.3 7.5L12 12.5l8.7-5M12 22V12.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* entrance motion */
@keyframes arvRise{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes arvSbIn{ from{ opacity:0; transform:translateX(34px); } to{ opacity:1; transform:none; } }
@keyframes arvNavIn{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  #app .sidebar{ animation:arvSbIn .7s cubic-bezier(.22,.9,.28,1) backwards; }
  html[dir="ltr"] #app .sidebar{ animation-name:arvSbInL; }
  @keyframes arvSbInL{ from{ opacity:0; transform:translateX(-34px); } to{ opacity:1; transform:none; } }
  #app .sidebar .nav .ni{ animation:arvNavIn .5s cubic-bezier(.22,.9,.28,1) backwards; }
  html[dir="ltr"] #app .sidebar .nav .ni{ animation-name:arvNavInL; }
  @keyframes arvNavInL{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
  #app .sidebar .nav .ni:nth-child(1){ animation-delay:.25s; } #app .sidebar .nav .ni:nth-child(2){ animation-delay:.29s; }
  #app .sidebar .nav .ni:nth-child(3){ animation-delay:.33s; } #app .sidebar .nav .ni:nth-child(4){ animation-delay:.37s; }
  #app .sidebar .nav .ni:nth-child(5){ animation-delay:.41s; } #app .sidebar .nav .ni:nth-child(6){ animation-delay:.45s; }
  #app .sidebar .nav .ni:nth-child(7){ animation-delay:.49s; } #app .sidebar .nav .ni:nth-child(8){ animation-delay:.53s; }
  #app .sidebar .nav .ni:nth-child(n+9){ animation-delay:.57s; }
  #pg-dashboard .pg-title{ animation:arvRise .6s cubic-bezier(.22,.9,.28,1) backwards; }
  #pg-dashboard .dw-row > *{ animation:arvRise .65s cubic-bezier(.22,.9,.28,1) .08s backwards; }
  #pg-dashboard .dw-row > *:nth-child(2){ animation-delay:.16s; }
  #pg-dashboard .qa-row{ animation:arvRise .6s cubic-bezier(.22,.9,.28,1) .24s backwards; }
  #pg-dashboard .stat{ animation:arvRise .6s cubic-bezier(.22,.9,.28,1) backwards; }
  #pg-dashboard .stat:nth-child(1){ animation-delay:.30s; } #pg-dashboard .stat:nth-child(2){ animation-delay:.36s; }
  #pg-dashboard .stat:nth-child(3){ animation-delay:.42s; } #pg-dashboard .stat:nth-child(4){ animation-delay:.48s; }
  #pg-dashboard .stat:nth-child(5){ animation-delay:.54s; }
  #pg-dashboard .qa-panel{ animation:arvRise .7s cubic-bezier(.22,.9,.28,1) .6s backwards; }
}
@media (max-width:768px){
  #pg-dashboard .stats-row{ grid-template-columns:repeat(2,1fr); gap:10px; }
  #pg-dashboard .stat .val{ font-size:20px; }
  .stat-ico{ width:26px; height:26px; top:10px; inset-inline-end:10px; }
}
@media (prefers-reduced-motion:reduce){ #pg-dashboard .stat,#pg-dashboard .qa-btn,.dw-card{ transition:none; } }