/* خط Cairo من النظام نفسه (يُحفظ في الجهاز ويعمل بدون إنترنت) */
@font-face{font-family:"Cairo";src:url('../fonts/Cairo.ttf') format('truetype');font-weight:200 1000;font-style:normal;font-display:swap}
:root{
  --bg:#eef1f7; --card:#ffffff; --card2:#f6f8fc;
  --text:#0f172a; --muted:#64748b; --line:#e3e8f0;
  --primary:#4f46e5; --primary2:#7c3aed;
  --green:#10b981; --red:#ef4444; --amber:#f59e0b;
  --ws1:#2563eb; --ws2:#3b82f6;
  --shadow:0 4px 20px rgba(15,23,42,.08);
  --radius:18px;
}
[data-theme="dark"]{
  --bg:#0b1220; --card:#131c2e; --card2:#1b2740;
  --text:#e8eefc; --muted:#93a4c0; --line:#243352;
  --shadow:0 4px 22px rgba(0,0,0,.4);
  --ws1:#1d4ed8; --ws2:#2563eb;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--text);overscroll-behavior-y:none;transition:background .25s,color .25s;}
button,input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

.app{max-width:720px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
/* iPhone (شريط الساعة والنتوء): الصفحة تبدأ تحت المنطقة الآمنة حتى لا يختفي الهيدر */
main{flex:1;padding:calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(140px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}

/* Tabbar */
.tabbar{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 20px);max-width:440px;z-index:60;display:flex;align-items:center;isolation:isolate;padding:4px 6px;border-radius:22px;filter:drop-shadow(0 8px 18px rgba(15,23,42,.12)) drop-shadow(0 1px 3px rgba(15,23,42,.06))}
/* bar background with a round notch under the add button */
.tabbar::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:22px;background:var(--card);border:1px solid rgba(226,232,240,.6);transition:background .25s;-webkit-mask:radial-gradient(circle 34px at 50% 0,transparent 33px,#000 34px);mask:radial-gradient(circle 34px at 50% 0,transparent 33px,#000 34px)}
[data-theme="dark"] .tabbar{filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
[data-theme="dark"] .tabbar::before{border-color:var(--line)}
.tb-side{flex:1;min-width:0;display:flex;align-items:center}
.tb-gap{flex:none;width:66px}
/* زر الإضافة الأوسط: تدرّج متحرك + حلقة دوّارة + نبضة */
.tab-add{position:absolute;left:50%;top:-26px;transform:translateX(-50%);width:52px;height:52px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:linear-gradient(120deg,#6366f1,#8b5cf6,#d946ef,#ec4899,#8b5cf6,#6366f1);background-size:300% 300%;box-shadow:0 10px 26px rgba(139,92,246,.5),0 3px 8px rgba(217,70,239,.25),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -4px 10px rgba(76,29,149,.3);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;animation:fabHue 7s ease-in-out infinite;-webkit-tap-highlight-color:transparent}
.tab-add::before{content:'';position:absolute;inset:-5px;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 12%,rgba(255,255,255,.95) 22%,transparent 34% 55%,#f0abfc 68%,transparent 80%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));animation:fabSpin 3.6s linear infinite}
.tab-add::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:fabPulse 3s ease-out infinite}
.tab-add svg{position:relative;width:24px;height:24px;stroke-width:2.6;filter:drop-shadow(0 1px 2px rgba(76,29,149,.45));transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.tab-add:hover{box-shadow:0 14px 34px rgba(139,92,246,.6),0 4px 12px rgba(217,70,239,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.tab-add:hover svg{transform:rotate(90deg)}
.tab-add:active{transform:translateX(-50%) scale(.88);transition-duration:.1s}
.tab-add.open{animation-play-state:paused}
.tab-add.open::after{animation:none}
.tab-add.open svg{transform:rotate(135deg) scale(1.05)}
@keyframes fabHue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fabSpin{to{transform:rotate(360deg)}}
@keyframes fabPulse{0%{box-shadow:0 0 0 0 rgba(168,85,247,.5)}70%,100%{box-shadow:0 0 0 16px rgba(168,85,247,0)}}
.tab-add[hidden]{display:none}
/* بلون رأس الصفحة المفتوحة (app.js يضع --fab-bg) */
.tab-add.themed{background:var(--fab-bg);background-size:100% 100%;animation:none;box-shadow:0 10px 26px var(--fab-sh,rgba(30,27,75,.4)),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -4px 10px rgba(0,0,0,.2)}
.tab-add.themed::after{animation:none}
/* الحلقة الدوّارة بلون الزر نفسه (في النهار لا تختفي على الخلفية الفاتحة؛ في الليل لمعة بيضاء مع اللون) */
.tab-add::before{background:conic-gradient(from 0deg,transparent 0 12%,var(--fab-c,#8b5cf6) 22%,transparent 34% 55%,var(--fab-c,#d946ef) 68%,transparent 80%)}
[data-theme="dark"] .tab-add::before{background:conic-gradient(from 0deg,transparent 0 12%,rgba(255,255,255,.95) 22%,transparent 34% 55%,var(--fab-c,#f0abfc) 68%,transparent 80%)}
.tabbar.no-add::before{-webkit-mask:none;mask:none}
.tabbar.no-add .tb-gap{width:0}
/* ===== انتقال ناعم بين الصفحات (View Transitions: Chrome/Edge/Safari الحديثة) ===== */
@view-transition{navigation:auto}
/* «ظهور متتابع»: القديمة تتلاشى بسرعة، والجديدة تظهر عناصرها واحداً بعد الآخر من الأسفل (app.js يضع .hd-stg) */
::view-transition-old(root){animation:hdPgOut .22s ease both}
::view-transition-new(root){animation:none}
.tabbar{view-transition-name:hd-tabbar}   /* الشريط السفلي ثابت لا يتحرك مع الصفحة */
.top-user-bar{view-transition-name:hd-topbar}
@keyframes hdPgOut{to{opacity:0;transform:scale(1.03)}}
.hd-stg{animation:hdStg .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes hdStg{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none} .hd-stg{animation:none!important}}
/* الشريط نازل للأسفل: يظهر نصف زر ➕ فقط */
.tabbar{transition:transform .35s cubic-bezier(.34,1.3,.64,1)}
.tabbar.tb-hide{transform:translate(-50%,calc(100% + 12px))}
.tabbar.tb-hide .tab-add{animation-play-state:paused}
/* quick add menu (pages without their own add action) */
.qa-ov{position:fixed;inset:0;z-index:58;background:rgba(15,23,42,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.qa-ov.show{opacity:1}
.qa-menu{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:59;transform:translate(-50%,12px) scale(.96);opacity:0;width:min(330px,calc(100% - 32px));padding:8px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 22px 50px rgba(15,23,42,.25);transition:transform .22s cubic-bezier(.2,.9,.3,1.2),opacity .2s}
.qa-menu.show{transform:translate(-50%,0) scale(1);opacity:1}
.qa-menu.show button{animation:qaIn .38s cubic-bezier(.2,.9,.3,1.2) both}
.qa-menu.show button:nth-child(2){animation-delay:.05s}.qa-menu.show button:nth-child(3){animation-delay:.1s}.qa-menu.show button:nth-child(4){animation-delay:.15s}.qa-menu.show button:nth-child(5){animation-delay:.2s}.qa-menu.show button:nth-child(n+6){animation-delay:.25s}
@keyframes qaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qa-menu button{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border:0;border-radius:15px;background:none;color:var(--text);font-family:inherit;font-size:14px;font-weight:900;text-align:right;cursor:pointer}
.qa-menu button:hover{background:var(--card2)}
.qa-menu button span{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--c)}
.qa-menu button span svg{width:20px;height:20px;stroke-width:2.3}
.qa-menu button small{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.tab{flex:1;border:0;background:none;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:10px;font-weight:700;font-family:inherit;transition:.22s;border-radius:999px;position:relative;}
.tab svg{width:20px;height:20px;stroke-width:2;transition:.22s}
/* القسم المختار: خط مضيء على حافة القائمة + وهج خفيف + لون بنفسجي */
.tab.active{color:#7c3aed}
.tab.active span{font-weight:900}
.tab.active svg{stroke:#7c3aed;transform:translateY(-1px);filter:drop-shadow(0 3px 6px rgba(124,58,237,.35))}
.tab.active::before{content:'';position:absolute;top:-2px;left:30%;right:30%;height:3px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#6366f1,#d946ef);box-shadow:0 2px 10px rgba(168,85,247,.7);animation:tabLine .4s cubic-bezier(.34,1.56,.64,1)}
.tab.active::after{content:'';position:absolute;top:0;left:18%;right:18%;bottom:18%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 0,rgba(168,85,247,.22),transparent 70%)}
[data-theme="dark"] .tab.active{color:#c4b5fd}
[data-theme="dark"] .tab.active svg{stroke:#c4b5fd}
@keyframes tabLine{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.tab-add,.tab-add::before,.tab-add::after,.qa-menu.show button,.tab.active::before{animation:none!important}}
.tab:active{transform:scale(.94)}

/* Hero */

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.section-title{font-size:14px;font-weight:800;margin:20px 4px 10px;display:flex;justify-content:space-between;align-items:center;}
.section-title .count{font-size:11px;color:var(--muted);font-weight:600}

/* Chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);color:var(--muted);padding:9px 18px;border-radius:14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .22s cubic-bezier(.2,.8,.3,1);font-family:inherit;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.chip.on{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(79,70,229,.35);}
.chip.on.ws{background:linear-gradient(135deg,var(--ws1),var(--ws2));}
.chip.on.wd{background:linear-gradient(135deg,#06b6d4,#0ea5e9);}

/* Top user bar */
/* ===== Header bar (modern glass) ===== */
.top-user-bar{position:relative;z-index:40;display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:8px 8px 8px 10px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:20px;box-shadow:0 8px 28px rgba(15,23,42,.08);}
.menu-btn{width:42px;height:42px;border-radius:14px;flex:none;border:0;color:#fff;cursor:pointer;display:grid;place-items:center;background:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#d946ef);box-shadow:0 6px 16px rgba(139,92,246,.38);transition:transform .15s;}
.menu-btn:hover{transform:translateY(-1px)}
.menu-btn:active{transform:scale(.92)}
.menu-btn svg{width:20px;height:20px;stroke-width:2.3}
.tub-av{position:relative;flex:none;padding:2px;border-radius:15px;background:conic-gradient(from 200deg,#22d3ee,#6366f1,#d946ef,#22d3ee)}
.top-user-bar .avatar{width:38px;height:38px;border-radius:13px;font-size:15px;border:2px solid var(--card)}
.tub-av::after{content:'';position:absolute;bottom:-1px;left:-1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid var(--card)}
.tub-info{flex:1;min-width:0;line-height:1.25}
.tub-hi{font-size:10.5px;font-weight:700;color:var(--muted)}
.top-user-bar .uname{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-user-bar .urole{font-size:10px;font-weight:800;padding:2px 9px;border-radius:999px;flex:none;line-height:1.6}
.urole.super{background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(249,115,22,.16));color:#ea580c}
.urole.manager{background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(139,92,246,.14));color:#7c3aed}
[data-theme="dark"] .urole.super{color:#fbbf24}
[data-theme="dark"] .urole.manager{color:#c4b5fd}
.notif-btn,.logout-btn{border:0;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;cursor:pointer;transition:.15s;position:relative;flex:none;}
.notif-btn{background:rgba(99,102,241,.1);color:#6366f1}
.logout-btn{background:rgba(244,63,94,.1);color:#f43f5e}
[data-theme="dark"] .notif-btn{color:#a5b4fc}
.notif-btn:hover{background:rgba(99,102,241,.18)}
.logout-btn:hover{background:rgba(244,63,94,.18)}
.notif-btn:active,.logout-btn:active{transform:scale(.92)}
.notif-btn svg,.logout-btn svg{width:19px;height:19px;stroke-width:2.2}
.notif-btn .notif-count{position:absolute;top:-5px;left:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;box-shadow:0 3px 8px rgba(244,63,94,.45);animation:pulseNotif 1.8s infinite;}
@keyframes pulseNotif{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.tub-sub{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0}
.tub-sub .tub-hi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Menu drawer ===== */
.menu-overlay{position:fixed;inset:0;z-index:250;background:rgba(10,14,30,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .25s;display:flex;justify-content:flex-start;}
.menu-overlay.show{opacity:1}
.menu-panel{width:330px;max-width:88vw;height:100%;overflow-y:auto;background:var(--bg);box-shadow:-20px 0 60px rgba(0,0,0,.3);padding:14px 14px calc(18px + env(safe-area-inset-bottom));padding-top:calc(14px + env(safe-area-inset-top));transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;border-radius:0 0 0 28px;}
.menu-overlay.show .menu-panel{transform:translateX(0)}
.menu-panel>*{flex-shrink:0}
.menu-header{position:relative;overflow:hidden;border-radius:18px;padding:9px 10px;color:#fff;background:radial-gradient(120% 160% at 100% 0%,#d946ef 0%,transparent 50%),radial-gradient(120% 160% at 0% 100%,#22d3ee 0%,transparent 55%),linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 10px 24px rgba(99,102,241,.28)}
.menu-header::after{content:'';position:absolute;width:110px;height:110px;border-radius:50%;border:16px solid rgba(255,255,255,.08);top:-55px;left:-35px}
.mh-row{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.menu-header .mh-av{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;color:#fff;font-weight:900;font-size:16px;overflow:hidden;flex:none;position:relative}
.menu-header .mh-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.menu-header .mh-info{flex:1;min-width:0}
.menu-header .mh-info h4{margin:0;font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.menu-header .mh-info p{margin:2px 0 0;display:inline-block;font-size:9.5px;font-weight:800;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.2)}
.mh-close{width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .15s,background .15s}
.mh-close:hover{background:rgba(255,255,255,.24)}
.mh-close:active{transform:scale(.9)}
.mh-close svg{width:16px;height:16px;stroke-width:2.5}
.menu-header + .menu-label{margin-top:14px}
.menu-label{font-size:11.5px;font-weight:800;color:var(--muted);margin:2px 6px 10px;letter-spacing:.2px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 13px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;text-align:right;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;box-shadow:0 2px 10px rgba(15,23,42,.04)}
.menu-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,23,42,.08)}
.menu-tile:active{transform:scale(.96)}
.menu-tile .mt-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.menu-tile .mt-ic svg{width:21px;height:21px;stroke-width:2.1}
.menu-tile b{font-size:13.5px;font-weight:800}
.menu-tile small{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:-6px}
.menu-tile.active{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,var(--card));box-shadow:0 8px 20px color-mix(in srgb,var(--c) 22%,transparent)}
.menu-tile.active::after{content:'';position:absolute;top:14px;left:14px;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
.menu-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px}
.menu-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:.15s;text-align:right}
.menu-row .mr-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);flex:none}
.menu-row .mr-ic svg{width:18px;height:18px;stroke-width:2.2}
.menu-row span{flex:1}
.menu-row.danger{color:#f43f5e;border-color:rgba(244,63,94,.25);background:rgba(244,63,94,.06)}
.menu-row:active{transform:scale(.97)}
.menu-ver{display:flex;justify-content:center;margin-top:6px}
.menu-ver span{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;color:var(--muted);padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(217,70,239,.08));border:1px solid color-mix(in srgb,#8b5cf6 22%,var(--line));letter-spacing:.2px;direction:rtl}
.menu-ver i{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#6366f1,#d946ef);box-shadow:0 0 0 3px rgba(139,92,246,.15)}

/* Search */
.search-modern{display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid transparent;border-radius:20px;padding:4px 4px 4px 16px;box-shadow:0 4px 22px rgba(15,23,42,.08);transition:all .3s cubic-bezier(.2,.8,.3,1);position:relative;overflow:hidden;}
.search-modern:focus-within{transform:translateY(-1px);box-shadow:0 8px 30px rgba(139,92,246,.2);border-color:rgba(139,92,246,.3);}
.search-modern .search-ic{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#6366f1,#a855f7);display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:0 4px 14px rgba(139,92,246,.4);}
.search-modern .search-ic svg{width:18px;height:18px;stroke-width:2.4}
.search-modern input{flex:1;border:0;background:none;outline:none;padding:12px 4px;color:var(--text);font-size:14.5px;font-weight:600;min-width:0;}
.search-modern input::placeholder{color:var(--muted);font-weight:500}

/* Orders */
.orders-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:640px){.orders-grid{grid-template-columns:1fr 1fr;}}
.order-card-v5{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 4px 20px rgba(15,23,42,.07);transition:.3s cubic-bezier(.2,.8,.3,1);position:relative;display:flex;flex-direction:column;}
.order-card-v5:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(15,23,42,.13)}
.order-v5-media{position:relative;width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);overflow:hidden;cursor:pointer;}
[data-theme="dark"] .order-v5-media{background:linear-gradient(135deg,#1b2740,#131c2e)}
.order-v5-media img,.order-v5-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.order-v5-media .video-ic{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.3);color:#fff;font-size:40px;}
.order-v5-media .count-badge{position:absolute;bottom:10px;left:10px;background:rgba(15,23,42,.8);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:10px;backdrop-filter:blur(8px);display:flex;align-items:center;gap:4px;}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.order-v5-body{padding:12px 14px 12px;display:flex;flex-direction:column;gap:10px;flex:1;}
.order-v5-date{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);font-weight:700;}
.order-v5-date .deadline-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:7px;font-size:10.5px;font-weight:800;}
.order-v5-date .deadline-chip.ok{background:rgba(16,185,129,.12);color:#10b981;}
.order-v5-date .deadline-chip.warn{background:rgba(245,158,11,.12);color:#f59e0b;}
.order-v5-date .deadline-chip.late{background:rgba(239,68,68,.12);color:#ef4444;}

/* 🧾 Active order card (light) */
.oc7-grid{gap:10px}
.orders-grid.oc7-grid{grid-template-columns:1fr}
.oc7{display:flex;gap:12px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:20px;cursor:pointer;transition:border-color .2s,box-shadow .2s;min-width:0}
.oc7:hover{border-color:color-mix(in srgb,#6366f1 30%,var(--line));box-shadow:0 8px 22px rgba(15,23,42,.06)}
.oc7-th{position:relative;flex:none;width:120px;height:128px;align-self:center;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(236,72,153,.1))}
.oc7-th img,.oc7-th video{width:100%;height:100%;object-fit:cover;display:block}
.oc7-th .video-ic{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);color:#fff;font-size:26px}
.oc7-ph{font-size:36px;opacity:.5}
.oc7-cnt{position:absolute;bottom:5px;left:5px;padding:1px 6px;border-radius:999px;background:rgba(15,23,42,.6);color:#fff;font-size:9.5px;font-weight:800}
.oc7-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(255,255,255,.9);animation:pulse-dot 1.8s infinite}
.oc7-b{flex:1;min-width:0;display:flex;flex-direction:column}
.oc7-r1{display:flex;align-items:center;gap:6px}
.oc7-r1 b{flex:1;min-width:0;font-size:14.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc7 .deadline-chip{flex:none;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}
.oc7 .deadline-chip.ok{background:rgba(16,185,129,.12);color:#059669}
.oc7 .deadline-chip.warn{background:rgba(245,158,11,.14);color:#d97706}
.oc7 .deadline-chip.late{background:rgba(239,68,68,.12);color:#ef4444}
.oc7-r2{font-size:11px;font-weight:700;color:var(--muted);margin-top:1px}
.oc7-r2 b{color:var(--text);font-weight:800}
.oc7-codes{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.oc7-codes span{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:7px;background:rgba(139,92,246,.1);color:#7c3aed;font-size:10.5px;font-weight:800;direction:ltr}
.oc7-codes span i{font-style:normal;font-size:10px}
.oc7-codes span.more{background:var(--card2);color:var(--muted)}
.oc7-r3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:5px}
.oc7-r3 small{font-size:10.5px;font-weight:800;color:var(--muted)}
.oc7-r3 b{font-size:16px;font-weight:900}
.oc7-a{display:flex;align-items:flex-end;gap:6px;margin-top:auto;padding-top:13px;cursor:default}
.oc7-hb{position:relative;width:74px;height:28px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--muted);font-family:inherit;font-size:11px;font-weight:800;display:flex;align-items:center;padding:0 30px 0 0;cursor:pointer;transition:.2s}
.oc7-hb i{position:absolute;right:-1px;top:-10px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:#fff;border:2px solid var(--card);font-style:normal;transition:transform .2s}
.oc7-hb i svg{width:13px;height:13px;stroke-width:2.6}
.oc7-hb:active i{transform:scale(.9)}
.oc7-hb.g i{background:#10b981;box-shadow:0 4px 10px rgba(16,185,129,.3)}
.oc7-hb.g.on{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.4);color:#059669}
.oc7-hb.d i{background:#6366f1;box-shadow:0 4px 10px rgba(99,102,241,.3)}
.oc7-hb.d:hover{border-color:rgba(99,102,241,.4);color:#4f46e5}
.oc7-sp{flex:1}
.oc7-ib{width:28px;height:28px;border-radius:9px;border:0;display:grid;place-items:center;color:var(--muted);background:var(--card2);cursor:pointer;transition:.2s;flex:none}
.oc7-ib svg{width:14px;height:14px;stroke-width:2.2}
.oc7-ib:hover{color:#6366f1}
.oc7-ib.del:hover{color:#ef4444}

/* Archive */
.archive-toggle{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px 14px;margin:20px 0 12px;cursor:pointer;transition:.25s;font-family:inherit;width:100%;box-shadow:0 4px 16px rgba(15,23,42,.05);text-align:right}
.archive-toggle .at-left{display:flex;align-items:center;gap:12px}
.archive-toggle .at-ico{position:relative;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#0ea5e9,#6366f1);display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px rgba(99,102,241,.3);flex:none}
.archive-toggle .at-ico svg{width:22px;height:22px;stroke-width:2.2}
.archive-toggle .at-ico em{position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#10b981;color:#fff;font-style:normal;font-size:10.5px;font-weight:900;display:grid;place-items:center;border:2px solid var(--card)}
.archive-toggle .at-text{font-size:14px;font-weight:900;color:var(--text)}
.archive-toggle .at-sub{font-size:11px;color:var(--muted);font-weight:700;margin-top:2px}
.archive-toggle .at-arrow{color:var(--muted);transition:.3s;display:grid;place-items:center;width:30px;height:30px;background:var(--card2);border-radius:10px;}
.archive-toggle .at-arrow svg{width:16px;height:16px;stroke-width:2.6}
.archive-toggle.open .at-arrow{transform:rotate(180deg);}
.archive-list{display:none;grid-template-columns:1fr;gap:10px;margin-bottom:16px;}
.archive-list.open{display:grid;animation:slideDown .3s ease;}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:640px){.archive-list{grid-template-columns:1fr 1fr;}}
.archive-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;cursor:pointer;transition:.2s;}
.archive-item .ai-av{width:42px;height:42px;border-radius:13px;flex:none;background:linear-gradient(135deg,#10b981,#059669);display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;overflow:hidden;}
.archive-item .ai-av img{width:100%;height:100%;object-fit:cover}
.archive-item .ai-main{flex:1;min-width:0}
.archive-item .ai-name{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.archive-item .ai-sub{font-size:11px;color:var(--muted);font-weight:700;margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;}
.archive-item .ai-badge{font-size:10px;padding:3px 8px;border-radius:7px;background:rgba(16,185,129,.12);color:#10b981;font-weight:800;}

/* Items */
.item{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:.15s;box-shadow:var(--shadow);}
.item:active{transform:scale(.985);background:var(--card2)}
.badge{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;flex:0 0 auto;white-space:nowrap;}
.badge.red{background:rgba(239,68,68,.12);color:var(--red)}
.badge.green{background:rgba(16,185,129,.12);color:var(--green)}
.badge.gray{background:var(--card2);color:var(--muted)}
.badge.orange{background:rgba(245,158,11,.15);color:#f59e0b}
.badge.purple{background:rgba(168,85,247,.15);color:#a855f7}
.avatar{width:46px;height:46px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;background:linear-gradient(135deg,#6366f1,#a855f7);overflow:hidden;position:relative;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Debt cards */
.debt-card{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:10px;background:var(--card);border:1px solid var(--line);border-radius:18px;cursor:pointer;transition:.2s;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.debt-card::before{content:'';position:absolute;top:0;bottom:0;right:0;width:4px;background:linear-gradient(180deg,#f97316,#ef4444);border-radius:0 18px 18px 0;}
.debt-avatar{width:50px;height:50px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;background:linear-gradient(135deg,#f97316,#ef4444);overflow:hidden;}
.debt-avatar img{width:100%;height:100%;object-fit:cover;}
.debt-main{flex:1;min-width:0}
.debt-name{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.debt-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.debt-badge{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;flex:0 0 auto;white-space:nowrap;}
.debt-badge.red{background:rgba(239,68,68,.12);color:var(--red)}
.debt-badge.green{background:rgba(16,185,129,.12);color:var(--green)}
.debt-badge.gray{background:var(--card2);color:var(--muted)}

/* ===== 🗺 User map popup (super admin) ===== */
.umap{position:fixed;inset:0;z-index:9995;background:#0f172a;opacity:0;transition:opacity .25s}
.umap.show{opacity:1}
.umap-map{position:absolute;inset:0;background:#e5e7eb}
.umap.dark .umap-road{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7)}
.umap.none{background:radial-gradient(90% 60% at 100% 0%,rgba(217,70,239,.35) 0%,transparent 60%),radial-gradient(90% 60% at 0% 100%,rgba(34,211,238,.3) 0%,transparent 60%),linear-gradient(160deg,#0f172a,#1e1b4b)}
.umap.none .umap-map{display:none}
[data-theme="dark"] .umap-map{background:#0b1220}
.umap-top{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;z-index:1000;display:flex;align-items:center;gap:10px}
.umap-b{width:44px;height:44px;flex:none;border:0;border-radius:14px;display:grid;place-items:center;cursor:pointer;color:var(--text);background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 22px rgba(15,23,42,.18);transition:transform .15s}
.umap-b:active{transform:scale(.92)}
.umap-b svg{width:20px;height:20px;stroke-width:2.3}
.umap-b.on{color:#fff;background:linear-gradient(135deg,#6366f1,#d946ef)}
.umap-who{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:16px;background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 22px rgba(15,23,42,.18)}
/* 🔴 شارة التتبع المباشر: حمراء تنبض أثناء وصول المواقع، رمادية «آخر ظهور» عند توقفها */
.umap-live{flex:none;align-self:center;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:14px;font-size:12px;font-weight:900;white-space:nowrap;color:var(--muted);background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 22px rgba(15,23,42,.18)}
.umap-live.on{color:#fff;background:linear-gradient(135deg,#ef4444,#e11d48)}
.umap-live i{width:8px;height:8px;border-radius:50%;background:#fff;animation:umapLive 1.4s ease-in-out infinite}
@keyframes umapLive{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.umap-live i{animation:none}}
.umap-who b{display:block;font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umap-who small{display:block;font-size:11px;font-weight:800;color:#6366f1}
.umap-av{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;overflow:hidden;color:#fff;font-weight:900;font-size:15px;background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.umap-av img{width:100%;height:100%;object-fit:cover}
.umap-ctrl{position:absolute;left:12px;top:calc(76px + env(safe-area-inset-top));z-index:1000;display:flex;flex-direction:column;gap:8px}
/* «الخريطة فقط»: كل العناصر تنزلق وتختفي، ويبقى زر الإعادة وحده في الزاوية */
.umap-top,.umap-sheet,.umap-play,.umap-ctrl .umap-b{transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s}
.umap.clean .umap-top{opacity:0;visibility:hidden;transform:translateY(-20px);transition-delay:0s,0s,.4s}
.umap.clean .umap-sheet{opacity:0;visibility:hidden;transform:translateY(40px);transition-delay:0s,0s,.4s}
.umap.clean .umap-play{opacity:0;visibility:hidden;transform:translateX(20px);transition-delay:0s,0s,.4s}
.umap.clean .umap-ctrl .umap-b:not(.umap-clean-b){opacity:0;visibility:hidden;transform:scale(.6);transition-delay:0s,0s,.4s}
.umap.clean .umap-ctrl{top:calc(12px + env(safe-area-inset-top))}
.umap-ctrl{transition:top .4s cubic-bezier(.2,.8,.2,1)}
.umap.clean .umap-clean-b{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 10px 24px rgba(99,102,241,.45)}
.umap.clean .leaflet-control-attribution{opacity:.4}
@media (prefers-reduced-motion:reduce){.umap-top,.umap-sheet,.umap-play,.umap-ctrl,.umap-ctrl .umap-b{transition:none}}
.umap-sheet{position:absolute;left:0;right:0;bottom:0;z-index:1000;max-height:52vh;overflow-y:auto;padding:8px 16px calc(16px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:var(--card);box-shadow:0 -14px 40px rgba(15,23,42,.22);animation:igUp .4s cubic-bezier(.2,.9,.3,1)}
.umap-grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 12px}
.umap-addr{display:flex;align-items:flex-start;gap:12px}
.ua-ic{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#6366f1,#d946ef);box-shadow:0 8px 18px rgba(139,92,246,.35)}
.ua-ic svg{width:22px;height:22px;stroke-width:2.2}
.umap-addr small{display:block;font-size:11px;font-weight:800;color:var(--muted)}
.umap-addr b{display:block;font-size:15px;font-weight:900;line-height:1.6}
.umap-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.umap-chips span{font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;background:var(--card2);color:var(--muted)}
.umap-chips span.acc{background:rgba(99,102,241,.12);color:#6366f1}
.umap-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ua-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:15px;border:0;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:900;text-decoration:none;transition:transform .15s}
.ua-btn:active{transform:scale(.96)}
.ua-btn svg{width:17px;height:17px;stroke-width:2.3}
.ua-btn.g{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 8px 18px rgba(34,197,94,.3)}
.ua-btn.d{color:#fff;background:linear-gradient(135deg,#0ea5e9,#6366f1);box-shadow:0 8px 18px rgba(14,165,233,.3)}
.ua-btn.c{color:var(--text);background:var(--card2)}
.umap-hist-t{margin:16px 2px 8px;font-size:12.5px;font-weight:900;color:var(--muted)}
.umap-empty{text-align:center;padding:18px 8px 6px}
.umap-empty span{width:64px;height:64px;margin:0 auto 12px;border-radius:22px;display:grid;place-items:center;color:#f43f5e;background:rgba(244,63,94,.1)}
.umap-empty span svg{width:30px;height:30px;stroke-width:2}
.umap-empty b{display:block;font-size:16px;font-weight:900}
.umap-empty small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.8}
/* map pin */
.umap-pin{background:none;border:0}
.umap-pin .pa{position:absolute;left:5px;top:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:#fff;font:900 17px "Cairo",sans-serif;background:linear-gradient(135deg,#6366f1,#d946ef);border:3px solid #fff;box-shadow:0 8px 20px rgba(79,70,229,.45);z-index:2}
.umap-pin .pa img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover}   /* Leaflet يفرض width:auto على صور الدبابيس */
.umap-pin .pt{position:absolute;left:21px;top:44px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:0 0 4px 0;box-shadow:3px 3px 6px rgba(0,0,0,.15);z-index:1}
.umap-pin .pp{position:absolute;left:18px;top:52px;width:20px;height:20px;margin:-10px 0 0 0;border-radius:50%;background:rgba(139,92,246,.45);animation:pinPulse 2s ease-out infinite}
.umap-pin .pp.p2{animation-delay:1s}
@keyframes pinPulse{from{transform:scale(.6);opacity:1}to{transform:scale(3.2);opacity:0}}
.umap-pop .leaflet-popup-content-wrapper{border-radius:18px;padding:0;box-shadow:0 14px 34px rgba(15,23,42,.25)}
.umap-pop .leaflet-popup-content{margin:0;font-family:"Cairo",sans-serif}
.up-card{padding:12px 14px;min-width:200px}
.up-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.up-h .umap-av{width:30px;height:30px;border-radius:10px;font-size:13px}
.up-h b{font-size:13.5px;font-weight:900;color:#0f172a}
.up-a{font-size:12.5px;font-weight:700;color:#334155;line-height:1.7}
.up-m{font-size:11px;font-weight:700;color:#64748b;margin-top:4px}
.up-g{display:block;margin-top:10px;padding:9px;border-radius:12px;text-align:center;color:#fff !important;text-decoration:none;font-size:12.5px;font-weight:900;background:linear-gradient(135deg,#22c55e,#16a34a)}
.umap .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7);border-radius:8px 0 0 0}
/* Movements: day chips, summary, timeline, path markers, play button */
.umap-days{display:flex;gap:6px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px;scrollbar-width:none}
.umap-days::-webkit-scrollbar{display:none}
.ud{flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap}
.ud i{font-style:normal;min-width:20px;padding:1px 6px;border-radius:999px;font-size:10.5px;background:var(--card2);color:var(--muted)}
.ud.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#6366f1,#d946ef);box-shadow:0 6px 16px rgba(139,92,246,.35)}
.ud.on i{background:rgba(255,255,255,.25);color:#fff}
.umap-sum{display:grid;grid-template-columns:1fr .7fr 1.3fr;gap:8px;margin-bottom:14px;min-height:58px}
.us{padding:10px 8px;border-radius:16px;text-align:center;background:var(--card2)}
.us b{display:block;font-size:15px;font-weight:900;color:#6366f1;white-space:nowrap}
.us small{display:block;margin-top:2px;font-size:10.5px;font-weight:800;color:var(--muted)}
.us-load{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:6px}
.us-load i{width:8px;height:8px;border-radius:50%;background:#8b5cf6;animation:usDot 1s infinite ease-in-out}
.us-load i:nth-child(2){animation-delay:.15s}.us-load i:nth-child(3){animation-delay:.3s}
@keyframes usDot{0%,80%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
.us-err{grid-column:1/-1;display:grid;place-items:center;padding:12px;border-radius:16px;background:var(--card2);font-size:12.5px;font-weight:800;color:var(--muted);text-align:center}
.umap-chips span.stay{background:rgba(34,197,94,.12);color:#16a34a}
.umap-tl{display:flex;flex-direction:column;position:relative}
.ut{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;padding:8px 6px;border:0;border-radius:14px;background:none;color:var(--text);font-family:inherit;text-align:right;cursor:pointer}
.ut::before{content:"";position:absolute;right:19px;top:34px;bottom:-8px;width:2px;background:var(--line)}
.ut:last-child::before{display:none}
.ut.on{background:rgba(139,92,246,.08)}
.ut-n{position:relative;z-index:1;width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;background:#6366f1;box-shadow:0 0 0 3px var(--card)}
.ut-n.first{background:#22c55e}.ut-n.last{background:linear-gradient(135deg,#d946ef,#8b5cf6)}
.ut.on .ut-n{box-shadow:0 0 0 3px rgba(139,92,246,.35)}
.ut-b{min-width:0;flex:1}
.ut-b b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:900}
.ut-b em{font-style:normal;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(34,197,94,.12);color:#16a34a}
.ut-b small{display:block;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.6}
.umap-num{background:none;border:0}
.umap-num span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:900 11px "Cairo",sans-serif;color:#fff;background:#6366f1;border:2.5px solid #fff;box-shadow:0 3px 8px rgba(15,23,42,.3);transition:transform .2s}
.umap-num.first span{background:#22c55e}
.umap-num.last span{background:#d946ef}
.umap-num.sel span{transform:scale(1.25);box-shadow:0 0 0 4px rgba(139,92,246,.35),0 3px 8px rgba(15,23,42,.3)}
.umap-arr{background:none;border:0;pointer-events:none}
.umap-arr span{display:block;width:18px;height:18px;background:#fff;clip-path:polygon(50% 0,100% 85%,50% 62%,0 85%);filter:drop-shadow(0 0 1px rgba(0,0,0,.4))}
.umap-play{position:absolute;right:12px;top:calc(76px + env(safe-area-inset-top));z-index:1000;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border:0;border-radius:14px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:900;color:#fff;background:linear-gradient(135deg,#6366f1,#d946ef);box-shadow:0 10px 24px rgba(139,92,246,.4);transition:transform .15s}
.umap-play:active{transform:scale(.95)}
.umap-play svg{width:18px;height:18px}
.umap-play.on{background:linear-gradient(135deg,#f43f5e,#f97316);box-shadow:0 10px 24px rgba(244,63,94,.4)}
.umap-play[hidden]{display:none}
/* location chip on user cards */
.um-chip.loc{background:rgba(217,70,239,.1);color:#c026d3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme="dark"] .um-chip.loc{color:#f0abfc}
button.um-chip{border:0;font-family:inherit;cursor:pointer}
button.um-chip.ip{box-shadow:inset 0 0 0 1.5px rgba(99,102,241,.35)}
.loc-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;margin-bottom:10px;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(217,70,239,.08));border:1px solid rgba(139,92,246,.25)}
.loc-card .ua-ic{width:40px;height:40px}
.loc-card div{flex:1;min-width:0}
.loc-card b{display:block;font-size:13px;font-weight:800;line-height:1.6}
.loc-card small{display:block;font-size:11px;color:var(--muted);font-weight:700}
.loc-card button{flex:none;border:0;border-radius:12px;padding:9px 12px;font-family:inherit;font-size:12px;font-weight:900;color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#d946ef)}
/* ===== Sessions page (super admin) ===== */
.sx-page{padding-bottom:20px}
.sx-hero{position:relative;overflow:hidden;border-radius:28px;padding:20px 18px 18px;color:#fff;background:radial-gradient(120% 90% at 0% 0%,#1e3a8a 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#4c1d95 0%,transparent 60%),linear-gradient(160deg,#020617,#0f172a 60%,#1e1b4b);box-shadow:0 18px 40px rgba(2,6,23,.35)}
.sx-radar{position:absolute;left:-60px;top:-60px;width:240px;height:240px;border-radius:50%;pointer-events:none;opacity:.55}
.sx-radar>i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(56,189,248,.35)}
.sx-radar>i:nth-child(2){inset:40px}.sx-radar>i:nth-child(3){inset:80px}
.sx-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(56,189,248,.45),rgba(56,189,248,0) 70deg,transparent 360deg);animation:sxSweep 4s linear infinite}
@keyframes sxSweep{to{transform:rotate(360deg)}}
.sx-blip{position:absolute;width:7px;height:7px;border-radius:50%;background:#38bdf8;box-shadow:0 0 12px #38bdf8;animation:sxBlip 4s ease-in-out infinite}
.sx-blip.b1{left:150px;top:160px}.sx-blip.b2{left:190px;top:110px;animation-delay:1.3s;background:#a78bfa;box-shadow:0 0 12px #a78bfa}.sx-blip.b3{left:120px;top:200px;animation-delay:2.6s;background:#34d399;box-shadow:0 0 12px #34d399}
@keyframes sxBlip{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
.sx-hero-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sx-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;background:rgba(52,211,153,.14);color:#6ee7b7;border:1px solid rgba(52,211,153,.3)}
.sx-live i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:sxPulse 1.6s infinite}
@keyframes sxPulse{70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.sx-hero h2{margin:10px 0 4px;font-size:24px;font-weight:900;letter-spacing:-.3px;background:linear-gradient(90deg,#fff,#bae6fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-hero p{margin:0;font-size:12px;font-weight:600;color:#94a3b8}
.sx-archbtn{position:relative;flex:none;width:74px;padding:10px 6px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .15s}
.sx-archbtn:active{transform:scale(.94)}
.sx-archbtn svg{width:26px;height:26px;stroke-width:1.9;color:#fbbf24}
.sx-archbtn small{font-size:10.5px;font-weight:800;color:#cbd5e1}
.sx-archbtn em{position:absolute;top:-6px;left:-6px;min-width:22px;padding:2px 6px;border-radius:999px;font-style:normal;font-size:10px;font-weight:900;color:#1e1b4b;background:#fbbf24;box-shadow:0 4px 10px rgba(251,191,36,.4)}
.sx-stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.sx-stat{padding:11px 6px 9px;border-radius:18px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.sx-stat span{width:30px;height:30px;margin:0 auto 6px;border-radius:10px;display:grid;place-items:center;color:#fff}
.sx-stat span svg{width:16px;height:16px;stroke-width:2.3}
.sx-stat.a span{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 14px rgba(16,185,129,.4)}
.sx-stat.b span{background:linear-gradient(135deg,#3b82f6,#6366f1);box-shadow:0 6px 14px rgba(99,102,241,.4)}
.sx-stat.c span{background:linear-gradient(135deg,#a855f7,#d946ef);box-shadow:0 6px 14px rgba(217,70,239,.4)}
.sx-stat.d span{background:linear-gradient(135deg,#64748b,#475569)}
.sx-stat.d.warn span{background:linear-gradient(135deg,#f43f5e,#e11d48);box-shadow:0 6px 14px rgba(244,63,94,.45)}
.sx-stat.d.warn b{color:#fda4af}
.sx-stat b{display:block;font-size:19px;font-weight:900;line-height:1.1}
.sx-stat small{display:block;margin-top:3px;font-size:9.5px;font-weight:700;color:#94a3b8;white-space:nowrap}
.sx-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:16px 0 12px;padding:5px;border-radius:18px;background:var(--card2);border:1px solid var(--line)}
.sx-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border:0;border-radius:14px;background:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:900;cursor:pointer}
.sx-tabs button svg{width:17px;height:17px;stroke-width:2.2}
.sx-tabs button i{font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:999px;background:var(--card);color:var(--muted)}
.sx-tabs button.on{color:var(--text);background:var(--card);box-shadow:0 4px 14px rgba(15,23,42,.08)}
.sx-tabs button.on svg{color:#6366f1}
.sx-tabs button.on i{background:rgba(99,102,241,.12);color:#6366f1}
.sx-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:10px;scrollbar-width:none}
.sx-chips::-webkit-scrollbar{display:none}
.sx-chips button{flex:none;display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;font-size:12px;font-weight:800;cursor:pointer}
.sx-chips button i{font-style:normal;font-size:10.5px;color:var(--muted)}
.sx-chips button.on{border-color:transparent;color:#fff;background:linear-gradient(135deg,#0f172a,#334155)}
.sx-chips button.on.login{background:linear-gradient(135deg,#10b981,#059669)}
.sx-chips button.on.logout{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.sx-chips button.on.ip{background:linear-gradient(135deg,#3b82f6,#6366f1)}
.sx-chips button.on i{color:rgba(255,255,255,.8)}
.sx-tl{margin-top:14px}
.sx-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.sx-tags span{font-size:11px;font-weight:700;padding:4px 9px;border-radius:9px;background:var(--card2);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-tags span.ip{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;color:#2563eb;background:rgba(59,130,246,.1)}
.sx-del{width:34px;height:34px;flex:none;margin-inline-start:auto;border:0;border-radius:11px;display:grid;place-items:center;cursor:pointer;color:#e11d48;background:rgba(244,63,94,.1);transition:transform .15s,background .15s}
.sx-del:active{transform:scale(.9);background:rgba(244,63,94,.2)}
.sx-del svg{width:16px;height:16px;stroke-width:2.2}
.sx-more{display:block;width:100%;margin-top:6px;padding:12px;border-radius:16px;border:1.5px dashed var(--line);background:none;color:#6366f1;font-family:inherit;font-size:13px;font-weight:900;cursor:pointer}
.sx-empty{text-align:center;padding:30px 12px;border-radius:22px;background:var(--card);border:1px dashed var(--line);margin-top:14px}
.sx-empty span{width:60px;height:60px;margin:0 auto 10px;border-radius:20px;display:grid;place-items:center;color:#6366f1;background:rgba(99,102,241,.1)}
.sx-empty span svg{width:28px;height:28px;stroke-width:2}
.sx-empty.big span{color:#d97706;background:rgba(251,191,36,.14)}
.sx-empty b{display:block;font-size:15px;font-weight:900}
.sx-empty small{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--muted);line-height:1.7}
.sx-loading{display:flex;justify-content:center;gap:7px;padding:30px}
.sx-loading i{width:10px;height:10px;border-radius:50%;background:#8b5cf6;animation:usDot 1s infinite ease-in-out}
.sx-loading i:nth-child(2){animation-delay:.15s}.sx-loading i:nth-child(3){animation-delay:.3s}
.sx-err{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;margin-bottom:10px;border-radius:14px;background:rgba(244,63,94,.1);color:#e11d48;font-size:12.5px;font-weight:800}
.sx-err button{border:0;border-radius:9px;padding:6px 12px;font-family:inherit;font-weight:900;color:#fff;background:#e11d48;cursor:pointer}
.sx-ips{display:flex;flex-direction:column;gap:10px}
.sx-ipc{padding:14px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 16px rgba(15,23,42,.05)}
.sx-ipc-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sx-ipc-h b{font-size:13.5px;font-weight:900}
.sx-ipc-h span{font-size:11px;font-weight:700;color:var(--muted)}
.sx-ipc-flow{display:flex;align-items:center;gap:8px;margin-top:10px}
.sx-ipc-flow span{flex:1;min-width:0;text-align:center;padding:9px 6px;border-radius:12px;font:800 12px ui-monospace,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis}
.sx-ipc-flow .old{background:var(--card2);color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(100,116,139,.5)}
.sx-ipc-flow .new{background:rgba(59,130,246,.1);color:#2563eb}
.sx-ipc-flow i{display:grid;color:#6366f1}
.sx-ipc-flow i svg{width:18px;height:18px;stroke-width:2.6}
.sx-ahead{display:flex;align-items:center;gap:12px;padding:16px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#78350f,#b45309 55%,#f59e0b);box-shadow:0 14px 30px rgba(180,83,9,.3);margin-bottom:14px}
.sx-back{width:42px;height:42px;flex:none;border:0;border-radius:14px;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.18)}
.sx-back svg{width:20px;height:20px;stroke-width:2.6}
.sx-ahead-t{display:flex;align-items:center;gap:12px;min-width:0}
.sx-ahead-t>span{width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.sx-ahead-t>span svg{width:24px;height:24px;stroke-width:2}
.sx-ahead h2{margin:0;font-size:19px;font-weight:900}
.sx-ahead p{margin:2px 0 0;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85)}
.sx-months{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.sx-month{border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 16px rgba(15,23,42,.05);overflow:hidden}
.sx-mh{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.sx-mcal{width:50px;height:54px;flex:none;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(160deg,#f59e0b,#d97706);box-shadow:0 6px 14px rgba(217,119,6,.3)}
.sx-mcal b{font-size:20px;font-weight:900;line-height:1}
.sx-mcal small{font-size:10px;font-weight:800;opacity:.9}
.sx-mi{flex:1;min-width:0}
.sx-mi b{display:block;font-size:14.5px;font-weight:900}
.sx-mi small{display:block;font-size:11.5px;font-weight:700;color:var(--muted)}
.sx-mbar{display:block;height:6px;margin-top:6px;border-radius:9px;background:var(--card2);overflow:hidden}
.sx-mbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.sx-mh .sx-del{margin:0}
.sx-chev{display:grid;color:var(--muted);transition:transform .2s}
.sx-chev svg{width:18px;height:18px;stroke-width:2.4}
.sx-month.open .sx-chev{transform:rotate(-90deg)}
.sx-mbody{padding:4px 12px 12px;border-top:1px solid var(--line)}
.ud.arch:not(.on){border-style:dashed}
/* Sessions: compact rows (statement style) */
.sr-warn{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;margin-bottom:10px;border-radius:13px;background:rgba(245,158,11,.13);color:#b45309;font-size:12px;font-weight:800;line-height:1.6}
.sr-warn svg{width:18px;height:18px;flex:none;stroke-width:2.3}
.sx-chips button.on.warn{background:linear-gradient(135deg,#f59e0b,#d97706)}
.ua-ic.ipc{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 8px 18px rgba(249,115,22,.35)}
.umap-ipnote{margin-top:10px;padding:10px 12px;border-radius:13px;background:rgba(249,115,22,.1);color:#c2410c;font-size:12px;font-weight:700;line-height:1.7}
.umap-pin.ip .pa{background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 8px 20px rgba(234,88,12,.45)}
/* Sessions: day separator */
.cb-day{margin-bottom:8px}
.cb-sep{position:sticky;top:6px;z-index:5;display:flex;justify-content:center;margin:14px 0 12px}
.cb-sep::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.cb-sep span{position:relative;display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:900;color:var(--text);background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 4px 14px rgba(15,23,42,.07)}
.cb-sep i{font-style:normal;font-size:10px;padding:1px 7px;border-radius:999px;background:rgba(99,102,241,.12);color:#6366f1}
/* Sessions: compact rows that open into details */
.sx-tabs{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.sx-tabs button{font-size:12.5px;gap:6px;padding:10px 4px}
.sx-tabs button i.new{background:#f43f5e;color:#fff}
@keyframes sr2In{from{opacity:0;transform:translateY(-4px)}}
/* sessions grouped by user (users-page cards) */
.su{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 4px 18px rgba(15,23,42,.05);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.su.open{border-color:color-mix(in srgb,#6366f1 35%,var(--line));box-shadow:0 12px 28px rgba(15,23,42,.1)}
.su.blk{border-color:rgba(244,63,94,.4)}
.su-h{width:100%;display:flex;align-items:flex-start;gap:12px;padding:14px;border:0;background:none;color:var(--text);font-family:inherit;text-align:right;cursor:pointer}
.su-st{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:11.5px;font-weight:800;color:var(--muted)}
.su-st i{width:8px;height:8px;border-radius:50%;background:#94a3b8}
.su-st.on{color:#16a34a}
.su-st.on i{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:sxPulse 1.6s infinite}
.um-chip.nd{background:rgba(14,165,233,.12);color:#0284c7}
.um-chip.wn{background:rgba(245,158,11,.14);color:#b45309}
.su-n{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 10px;border-radius:14px;background:rgba(99,102,241,.1);color:#6366f1}
.su-n b{font-size:16px;font-weight:900;line-height:1.1}
.su-n small{font-size:9.5px;font-weight:800}
.su-n i{display:grid;margin-top:2px;transition:transform .2s}
.su-n i svg{width:14px;height:14px;stroke-width:2.6}
.su.open .su-n i{transform:rotate(-90deg)}
.su-b{padding:2px 10px 10px;border-top:1px dashed var(--line);animation:sr2In .2s ease}
/* session rows in the users-popup style */
.sx-it{position:relative;flex-wrap:wrap;cursor:pointer;transition:box-shadow .2s,border-color .2s,background .2s}
.sx-it:hover{border-color:color-mix(in srgb,#6366f1 25%,var(--line))}
.sx-it.open{background:var(--card);border-color:color-mix(in srgb,#6366f1 35%,var(--line));box-shadow:0 8px 20px rgba(15,23,42,.07)}
.sx-it.warn{border-color:rgba(245,158,11,.5)}
.sx-it.blk{border-color:rgba(244,63,94,.45)}
.session-ic.out{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.session-ic.ipc{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.sx-it-nm{font-size:13.5px;font-weight:900;margin-bottom:1px}
.sx-tag{font-size:9.5px;font-weight:900;padding:1px 7px;border-radius:999px;direction:rtl;white-space:nowrap}
.sx-tag.ev{background:rgba(16,185,129,.12);color:#059669}
.sx-tag.ev.out{background:rgba(244,63,94,.12);color:#e11d48}
.sx-tag.ev.ipc{background:rgba(59,130,246,.12);color:#2563eb}
.sx-tag.on{background:rgba(34,197,94,.14);color:#16a34a}
.sx-tag.nd{background:rgba(14,165,233,.13);color:#0284c7}
.sx-tag.bk{background:rgba(244,63,94,.12);color:#e11d48}
.sx-tag.me{background:rgba(99,102,241,.12);color:#6366f1}
.sx-tag.wn{background:rgba(245,158,11,.15);color:#b45309}
.sx-it-chev{flex:none;align-self:center;display:grid;color:var(--muted);transition:transform .2s}
.sx-it-chev svg{width:16px;height:16px;stroke-width:2.6}
.sx-it.open .sx-it-chev{transform:rotate(-90deg)}
.sx-it-x{flex-basis:100%;margin-top:4px;padding-top:10px;border-top:1px dashed var(--line);cursor:default}
.sx-it-x .sr-warn{margin-bottom:8px}
.sx-it-x .sb-g{margin-top:0}
.sx-gps{color:#059669;font-weight:800}
.sx-addr{color:var(--text);font-weight:800}
.sx-ipl{color:#ea580c;font-weight:800}
.sx-it-day{display:flex;justify-content:center;margin:12px 0 8px}
.sx-it-day span{padding:4px 12px;border-radius:999px;font-size:11px;font-weight:900;background:var(--card2);border:1px solid var(--line)}
.su-b .session-item:last-child{margin-bottom:0}
/* graphic action tiles inside a session */
.sb-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;margin-top:12px}
.sb{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px 7px;border:1px solid var(--line);border-radius:15px;background:var(--card2);color:var(--text);font-family:inherit;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.sb:hover{box-shadow:0 6px 16px rgba(15,23,42,.08)}
.sb:active{transform:scale(.92)}
.sb i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--g,#64748b);box-shadow:0 6px 14px var(--sh,rgba(15,23,42,.15))}
.sb i svg{width:19px;height:19px;stroke-width:2.2}
.sb small{font-size:10px;font-weight:900;white-space:nowrap}
.sb.map{--g:linear-gradient(135deg,#6366f1,#d946ef);--sh:rgba(139,92,246,.35)}
.sb.route{--g:linear-gradient(135deg,#fb923c,#ea580c);--sh:rgba(234,88,12,.32)}
.sb.sb-app i{background:var(--card);box-shadow:0 3px 10px rgba(15,23,42,.12)}
.sb.sb-app i svg{width:26px;height:26px}
.sb.blk{--g:linear-gradient(135deg,#fb7185,#e11d48);--sh:rgba(225,29,72,.32)}
.sb.blk small{color:#e11d48}
.sb.unb{--g:linear-gradient(135deg,#4ade80,#16a34a);--sh:rgba(22,163,74,.3)}
.sb.unb small{color:#16a34a}
.sb.del{--g:linear-gradient(135deg,#94a3b8,#475569);--sh:rgba(71,85,105,.28)}
/* 🗺 Map app icons (Google Maps / Waze / MAPS.ME) */
.mapx{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 2px}
.mapx-b{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 8px;border-radius:15px;background:var(--card2);border:1px solid var(--line);text-decoration:none;color:var(--text);cursor:pointer;transition:transform .15s,box-shadow .15s}
.mapx-b:hover{box-shadow:0 6px 16px rgba(15,23,42,.1)}
.mapx-b:active{transform:scale(.95)}
.mapx-b svg{width:32px;height:32px}
.mapx-b small{font-size:10.5px;font-weight:900;white-space:nowrap}
.umap-sheet .mapx{margin:4px 0 0}
.mapx.mini{display:flex;gap:6px;margin:0}
.mapx.mini .mapx-b{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%;background:var(--card)}
.mapx.mini .mapx-b svg{width:22px;height:22px}
.mapx.mini .mapx-b small{display:none}
.mapx.mini .mapx-b{box-shadow:0 3px 10px rgba(15,23,42,.1)}
.umap-sheet .mapx.mini{align-items:center;gap:10px;margin:2px 0 10px}
.umap-sheet .mapx.mini::before{content:"افتح الموقع في";font-size:11.5px;font-weight:800;color:var(--muted);margin-inline-end:2px}
.umap-sheet .mapx.mini .mapx-b{width:44px;height:44px}
.umap-sheet .mapx.mini .mapx-b svg{width:28px;height:28px}
/* 👤 User picker (dropdown) */
.upk{position:relative;margin-bottom:10px}
.upk-btn{width:100%;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:18px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;text-align:right;cursor:pointer;box-shadow:0 3px 12px rgba(15,23,42,.05);transition:border-color .15s,box-shadow .15s}
.upk.open .upk-btn{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.upk-av{position:relative;width:38px;height:38px;flex:none;border-radius:13px;display:grid;place-items:center;color:#6366f1;background:rgba(99,102,241,.1)}
.upk-av img,.upk-av>span{width:100%;height:100%;border-radius:13px;object-fit:cover;display:grid;place-items:center;color:#fff;font-weight:900;font-size:15px}
.upk-av svg{width:19px;height:19px;stroke-width:2.2}
.upk-av img,.upk-av>span{position:absolute;inset:0;min-width:0;min-height:0}
.upk-on{position:absolute;bottom:-2px;left:-2px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid var(--card)}
.upk-t{flex:1;min-width:0}
.upk-t small{display:block;font-size:10.5px;font-weight:800;color:var(--muted)}
.upk-t b{display:block;font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upk-btn em{font-style:normal;font-size:11px;font-weight:900;padding:3px 9px;border-radius:999px;background:rgba(99,102,241,.12);color:#6366f1}
.upk-chev{display:grid;color:var(--muted);transform:rotate(-90deg);transition:transform .2s}
.upk.open .upk-chev{transform:rotate(90deg)}
.upk-chev svg{width:16px;height:16px;stroke-width:2.6}
.upk-back{position:fixed;inset:0;z-index:40}
.upk-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:41;max-height:min(360px,60vh);overflow-y:auto;padding:6px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px rgba(15,23,42,.18);animation:sr2In .18s ease}
.upk-list button{width:100%;display:flex;align-items:center;gap:11px;padding:8px 10px;border:0;border-radius:13px;background:none;color:var(--text);font-family:inherit;text-align:right;cursor:pointer}
.upk-list button:hover{background:var(--card2)}
.upk-list button.on{background:rgba(99,102,241,.1)}
.upk-list button.on .upk-t b{color:#6366f1}
.upk-ck{display:grid;color:#6366f1}
.upk-ck svg{width:18px;height:18px;stroke-width:2.8}
/* 📱 Devices tab */
.dv-intro{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;margin-bottom:12px;border-radius:18px;background:rgba(99,102,241,.08)}
.dv-intro>svg{width:22px;height:22px;flex:none;color:#6366f1;stroke-width:2.2;margin-top:2px}
.dv-intro b{display:block;font-size:13.5px;font-weight:900}
.dv-intro small{display:block;margin-top:3px;font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.7}
.dv-sec{margin-bottom:14px}
.dv-sec h4{display:flex;align-items:center;gap:7px;margin:0 2px 8px;font-size:13px;font-weight:900;color:#e11d48}
.dv-sec h4 i{font-style:normal;font-size:10.5px;padding:1px 8px;border-radius:999px;background:rgba(244,63,94,.12)}
.dv-uh{display:flex;align-items:center;gap:9px;margin:4px 2px 8px}
.dv-uav{width:30px;height:30px;flex:none}
.dv-uav img,.dv-uav>span{width:100%;height:100%;border-radius:10px;object-fit:cover;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:900}
.dv-uh b{font-size:13.5px;font-weight:900}
.dv-uh i{font-style:normal;font-size:10.5px;font-weight:900;padding:1px 8px;border-radius:999px;background:var(--card2);color:var(--muted)}
.dv{display:flex;align-items:flex-start;gap:12px;padding:12px;margin-bottom:8px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 3px 12px rgba(15,23,42,.05)}
.dv.new{border-color:rgba(14,165,233,.5);background:color-mix(in srgb,#0ea5e9 5%,var(--card))}
.dv.blk{border-color:rgba(244,63,94,.4);background:color-mix(in srgb,#f43f5e 5%,var(--card))}
.dv-ic{position:relative;width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;color:#8b5cf6;background:rgba(139,92,246,.12)}
.dv-ic.m{color:#0ea5e9;background:rgba(14,165,233,.12)}
.dv.blk .dv-ic{color:#e11d48;background:rgba(244,63,94,.12)}
.dv-ic svg{width:20px;height:20px;stroke-width:2.2}
.dv-on{position:absolute;top:-3px;left:-3px;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid var(--card)}
.dv-i{flex:1;min-width:0}
.dv-i>b{display:block;font-size:13.5px;font-weight:900;word-break:break-word}
.dv-i>small{display:block;font-size:11.5px;font-weight:700;color:var(--muted)}
.dv-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.dv-tags:empty{display:none}
.dv-tags span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:999px}
.dv-tags .on{background:rgba(34,197,94,.13);color:#16a34a}
.dv-tags .on i{width:7px;height:7px;border-radius:50%;background:#22c55e}
.dv-tags .nw{background:rgba(14,165,233,.13);color:#0284c7}
.dv-tags .bk{background:rgba(244,63,94,.12);color:#e11d48}
.dv-tags .me{background:rgba(99,102,241,.12);color:#6366f1}
.dv-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:7px;font-size:11px;font-weight:700;color:var(--muted)}
.dv-meta .warn{color:#e11d48;font-weight:900}
.dv-act{flex:none;display:flex;align-items:center;gap:5px;align-self:center;padding:8px 12px;border:0;border-radius:12px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:900;color:#e11d48;background:rgba(244,63,94,.1);transition:transform .15s}
.dv-act:active{transform:scale(.94)}
.dv-act svg{width:15px;height:15px;stroke-width:2.4}
.dv-act.un{color:#16a34a;background:rgba(34,197,94,.12)}
/* 🔴 New devices counter (menu button + Sessions tile) */
.menu-btn{position:relative}
.mb-dot{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:#fff;background:#f43f5e;box-shadow:0 3px 8px rgba(244,63,94,.45)}
.mt-badge{position:absolute;z-index:1;top:10px;left:10px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:900;color:#fff;background:#f43f5e;box-shadow:0 4px 10px rgba(244,63,94,.4)}

/* ===== 👷 Workers ===== */
.wk-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.wk-w{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;text-align:right;cursor:pointer;box-shadow:0 4px 16px rgba(15,23,42,.05);transition:transform .15s}
.wk-w:active{transform:scale(.98)}
.wk-wav,.mw-av{position:relative;flex:none;display:grid;place-items:center;overflow:hidden;color:#fff;font-weight:900;background:linear-gradient(135deg,#10b981,#0d9488)}
.wk-wav img,.mw-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wk-wav{width:50px;height:50px;border-radius:17px;font-size:19px}
.wk-wi{flex:1;min-width:0}
.wk-wt{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.wk-wt b{font-size:14.5px;font-weight:900}
.wk-wi>small{display:block;margin-top:1px;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-today{font-size:10px;font-weight:900;padding:2px 8px;border-radius:999px}
.wk-today.p{background:rgba(34,197,94,.14);color:#16a34a}.wk-today.a{background:rgba(244,63,94,.12);color:#e11d48}
.wk-today.h{background:rgba(245,158,11,.15);color:#b45309}.wk-today.l{background:rgba(14,165,233,.13);color:#0284c7}
.wk-today.n{background:var(--card2);color:var(--muted)}
.wk-dots{display:flex;gap:5px;margin-top:8px}
.wk-dots i{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:var(--muted);background:var(--card2)}
.wk-dots i.p{background:#22c55e;color:#fff}.wk-dots i.a{background:#f43f5e;color:#fff}.wk-dots i.h{background:#f59e0b;color:#fff}.wk-dots i.l{background:#0ea5e9;color:#fff}
.wk-dots i.t{box-shadow:0 0 0 2px var(--card),0 0 0 4px #f59e0b}
.wk-dh{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:12px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#d97706,#f59e0b);box-shadow:0 14px 30px rgba(217,119,6,.3)}
.wk-card{padding:14px;margin-bottom:12px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 16px rgba(15,23,42,.05)}
.wk-ch{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.wk-ch h4{margin:0;font-size:14.5px;font-weight:900}
.wk-nav{display:flex;align-items:center;gap:6px}
.wk-nav span{font-size:11.5px;font-weight:800;color:var(--muted)}
.wk-nav button{width:32px;height:32px;border:0;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--text);background:var(--card2)}
.wk-nav button svg{width:16px;height:16px;stroke-width:2.6;transform:rotate(180deg)}
.wk-nav button.nx svg{transform:none}
.wk-now{display:block;margin:-2px 0 8px auto;padding:5px 10px;border:0;border-radius:9px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:900;color:#d97706;background:rgba(245,158,11,.12)}
.wk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;transition:opacity .2s}
.wk-days.stale{opacity:.35;pointer-events:none}
.wk-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;border-radius:16px;border:1.5px solid var(--line);background:var(--card2);color:var(--text);font-family:inherit;cursor:pointer;min-width:0;transition:transform .15s}
button.wk-day:active{transform:scale(.92)}
.wk-day small{font-size:9.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.wk-day b{font-size:16px;font-weight:900;line-height:1}
.wk-day i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:900;color:var(--muted);background:var(--card);border:1.5px dashed var(--line)}
.wk-day em{font-style:normal;font-size:9.5px;font-weight:900;color:var(--muted);white-space:nowrap}
.wk-day.p{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.08)}.wk-day.p i{background:#22c55e;color:#fff;border:0;box-shadow:0 4px 10px rgba(34,197,94,.35)}.wk-day.p em{color:#16a34a}
.wk-day.a{border-color:rgba(244,63,94,.45);background:rgba(244,63,94,.07)}.wk-day.a i{background:#f43f5e;color:#fff;border:0;box-shadow:0 4px 10px rgba(244,63,94,.35)}.wk-day.a em{color:#e11d48}
.wk-day.h{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08)}.wk-day.h i{background:#f59e0b;color:#fff;border:0;box-shadow:0 4px 10px rgba(245,158,11,.35)}.wk-day.h em{color:#b45309}
.wk-day.l{border-color:rgba(14,165,233,.45);background:rgba(14,165,233,.07)}.wk-day.l i{background:#0ea5e9;color:#fff;border:0;box-shadow:0 4px 10px rgba(14,165,233,.35)}.wk-day.l em{color:#0284c7}
.wk-day.today{box-shadow:0 0 0 2px var(--card),0 0 0 4px #f59e0b}
.wk-day.future{opacity:.6}
.wk-hint{margin-top:8px;font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.wk-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wk-legend span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;background:var(--card2)}
.wk-legend i{font-style:normal}
.wk-legend b{font-weight:900}
.wk-legend .p{color:#16a34a}.wk-legend .a{color:#e11d48}.wk-legend .h{color:#b45309}.wk-legend .l{color:#0284c7}
.wk-mon{font-size:12px;font-weight:900;padding:3px 10px;border-radius:999px;background:rgba(245,158,11,.13);color:#d97706}
.wk-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wk-m{padding:10px 4px;border-radius:16px;text-align:center}
.wk-m i{display:block;font-style:normal;font-size:14px;font-weight:900}
.wk-m b{display:block;font-size:20px;font-weight:900;line-height:1.2}
.wk-m small{display:block;font-size:10.5px;font-weight:800}
.wk-m.p{background:rgba(34,197,94,.1);color:#16a34a}.wk-m.a{background:rgba(244,63,94,.09);color:#e11d48}.wk-m.h{background:rgba(245,158,11,.11);color:#b45309}.wk-m.l{background:rgba(14,165,233,.1);color:#0284c7}
.wk-add{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border:0;border-radius:12px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:900;color:#fff;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 14px rgba(16,185,129,.3)}
.wk-add svg{width:15px;height:15px;stroke-width:2.5}
.wk-add.ghost{color:var(--text);background:var(--card2);box-shadow:none}
.wk-tot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.wk-tot>div{padding:10px 12px;border-radius:16px;background:var(--card2);min-width:0}
.wk-tot small{display:block;font-size:10.5px;font-weight:800;color:var(--muted)}
.wk-tot b{display:block;font-size:14px;font-weight:900;color:#059669;word-break:break-word}
.wk-pays{display:flex;flex-direction:column;gap:6px}
.wk-pay{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;border:1px solid var(--line)}
.wk-pt{flex:none;font-size:10.5px;font-weight:900;padding:3px 9px;border-radius:999px}
.wk-pt.daily{background:rgba(14,165,233,.13);color:#0284c7}.wk-pt.weekly{background:rgba(139,92,246,.13);color:#7c3aed}.wk-pt.monthly{background:rgba(245,158,11,.14);color:#b45309}
.wk-pi{flex:1;min-width:0}
.wk-pi b{display:block;font-size:14px;font-weight:900}
.wk-pi small{display:block;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-pdel{flex:none;width:32px;height:32px;border:0;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:#e11d48;background:rgba(244,63,94,.1)}
.wk-pdel svg{width:15px;height:15px;stroke-width:2.2}
.wk-empty{padding:14px 6px;text-align:center;font-size:12.5px;font-weight:700;color:var(--muted)}
.wk-seg{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--card2)}
.wk-seg button{flex:1;padding:9px 6px;border:0;border-radius:11px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:900;color:var(--muted);background:none}
.wk-seg button.on{color:#fff;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px rgba(16,185,129,.3)}
.mw{padding-top:4px}
.wk-day.auto:not(.n){border-style:dashed}
.wk-day.o{border-color:rgba(100,116,139,.35);background:rgba(100,116,139,.07)}.wk-day.o i{background:#94a3b8;color:#fff;border:0;font-size:12px}.wk-day.o em{color:#64748b}
.wk-dots i.o{background:#cbd5e1;color:#475569}
.wk-today.o{background:rgba(100,116,139,.13);color:#475569}
.wk-legend .o{color:#64748b}
.wp-lines li.o b,.wp-lines li.o .t{color:#64748b}
.wp-f .cr b{color:#059669}
.wk-mgrid.m3{grid-template-columns:repeat(3,1fr)}
.wk-curbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 2px 8px}
.wk-curbar>span{font-size:14px;font-weight:900}
.wk-curbar em{font-style:normal;font-size:11px;font-weight:900;padding:2px 9px;border-radius:999px;background:rgba(245,158,11,.13);color:#d97706;margin-inline-start:4px}
.wk-arch{position:relative;display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:900;color:var(--text);background:var(--card)}
.wk-arch i{font-style:normal;min-width:18px;padding:0 5px;border-radius:999px;font-size:10px;line-height:18px;text-align:center;color:#fff;background:#d97706}
.wk-anote{margin-bottom:10px;padding:10px 12px;border-radius:13px;background:var(--card2);color:var(--muted);font-size:11.5px;font-weight:800;line-height:1.7}
/* 👷 worker page header */
.wkh{position:relative;overflow:hidden;padding:14px;margin-bottom:12px;border-radius:26px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,#f59e0b 0%,transparent 48%),radial-gradient(110% 130% at 0% 100%,#ea580c 0%,transparent 55%),linear-gradient(135deg,#1c1917,#431407);box-shadow:0 16px 34px rgba(124,45,18,.3)}
.wkh::after{content:'';position:absolute;width:190px;height:190px;border-radius:50%;border:26px solid rgba(255,255,255,.06);top:-90px;left:-60px;pointer-events:none}
.wkh-t{position:relative;z-index:1;display:flex;align-items:center;gap:8px}
.wkh-sp{flex:1}
.wkh-x{width:38px;height:38px;border-radius:13px;border:0;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.wkh-x svg{width:18px;height:18px;stroke-width:2.4}
.wkh-btn{display:flex;align-items:center;gap:5px;height:36px;padding:0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-family:inherit;font-size:11.5px;font-weight:900;text-decoration:none;cursor:pointer}
.wkh-btn svg{width:15px;height:15px;stroke-width:2.3}
.wkh-btn:active,.wkh-x:active{transform:scale(.96)}
.wkh-m{position:relative;z-index:1;display:flex;align-items:center;gap:13px;margin-top:12px;cursor:pointer}
.wkh-avw{position:relative;flex:none}
.wkh-av{position:relative;width:64px;height:64px;border-radius:21px;display:grid;place-items:center;overflow:hidden;font-size:25px;font-weight:900;color:#fff;background:linear-gradient(135deg,#fbbf24,#f97316);border:2.5px solid rgba(255,255,255,.75);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.wkh-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wkh-avw i{position:absolute;bottom:-4px;left:-4px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:#fff;border:2.5px solid #431407;background:#22c55e}
.wkh-avw i.a{background:#ef4444}.wkh-avw i.h{background:#f59e0b}.wkh-avw i.o{background:#0ea5e9}
.wkh-n{min-width:0}
.wkh-n b{display:block;font-size:19px;font-weight:900;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkh-n small{display:block;font-size:12px;font-weight:700;opacity:.8}
.wkh-today{display:inline-flex;margin-top:5px;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:900;background:rgba(34,197,94,.22);color:#86efac}
.wkh-today.a{background:rgba(239,68,68,.25);color:#fca5a5}.wkh-today.h{background:rgba(245,158,11,.25);color:#fde68a}.wkh-today.o{background:rgba(14,165,233,.25);color:#7dd3fc}
.wkh-s{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.wkh-s.c2{grid-template-columns:repeat(2,1fr)}.wkh-s.c1{grid-template-columns:1fr}
.wkh-s div{padding:9px 6px;border-radius:15px;text-align:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);min-width:0}
.wkh-s b{display:block;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkh-s small{display:block;font-size:10px;font-weight:700;opacity:.8}
.wkh-s .o b{color:#fde68a}
/* 💸 withdrawals & additions (light) */
.wmv{margin-bottom:12px;padding:12px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.wmv-h{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.wmv-h h4{margin:0;flex:1;font-size:13.5px;font-weight:900}
.wmv-b{height:30px;padding:0 11px;border:0;border-radius:10px;font-family:inherit;font-size:11px;font-weight:900;cursor:pointer}
.wmv-b.withdraw{background:rgba(244,63,94,.1);color:#e11d48}.wmv-b.bonus{background:rgba(16,185,129,.1);color:#059669}
.wmv-r{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.wmv-h + .wmv-r{border-top:0}
.wmv-r > i{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:900;color:#fff}
.wmv-r > i.withdraw{background:linear-gradient(135deg,#fb7185,#e11d48)}.wmv-r > i.bonus{background:linear-gradient(135deg,#34d399,#059669)}
.wmv-i{flex:1;min-width:0}
.wmv-i b{display:block;font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wmv-i small{font-size:10.5px;font-weight:700;color:var(--muted)}
.wmv-v{font-size:12px;font-weight:900;white-space:nowrap}
.wmv-v.withdraw,.wmv-t b.withdraw{color:#e11d48}.wmv-v.bonus,.wmv-t b.bonus{color:#059669}
.wmv-del{flex:none;width:28px;height:28px;border:0;border-radius:9px;display:grid;place-items:center;background:var(--card2);color:var(--muted);cursor:pointer}
.wmv-del svg{width:14px;height:14px}
.wmv-del:hover{color:#e11d48}
.wmv-empty{padding:10px 0 4px;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted)}
.wmv-more{display:block;width:100%;margin-top:4px;padding:6px;border:0;border-radius:10px;background:var(--card2);color:var(--muted);font-family:inherit;font-size:11px;font-weight:800;cursor:pointer}
.wmv-t{display:flex;gap:6px;margin-top:10px}
.wmv-t span{flex:1;text-align:center;padding:6px;border-radius:12px;background:var(--card2);font-size:10.5px;font-weight:800;color:var(--muted)}
.wmv-t b{display:block;font-size:13px}
.wk-tools{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:-2px 0 8px}
.wk-tools .wk-now{margin:0}
.wk-tools .wk-now.rs{color:#e11d48}
.wk-day.future:not(.n){opacity:.85;border-style:dashed}
.mw-hero[onclick]{cursor:pointer}
.mw-more{margin-inline-start:6px;background:rgba(255,255,255,.3)!important}
/* 👤 worker details window */
.wpf{padding:12px 12px calc(14px + env(safe-area-inset-bottom))}
.wpf-top{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:3px;padding:22px 16px 18px;border-radius:24px;color:#fff;text-align:center;background:radial-gradient(110% 120% at 100% 0%,#fbbf24 0%,transparent 55%),radial-gradient(100% 120% at 0% 100%,#ea580c 0%,transparent 60%),linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 14px 30px rgba(217,119,6,.3)}
.wpf-top::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;border:26px solid rgba(255,255,255,.09);top:-80px;left:-60px}
.wpf-x{position:absolute;top:10px;left:10px;z-index:1;width:34px;height:34px;border:0;border-radius:11px;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.2)}
.wpf-x svg{width:17px;height:17px;stroke-width:2.5}
.wpf-av{position:relative;width:76px;height:76px;margin-bottom:6px;border-radius:26px;display:grid;place-items:center;overflow:hidden;font-size:30px;font-weight:900;color:#fff;background:linear-gradient(135deg,#10b981,#0d9488);border:3px solid rgba(255,255,255,.85);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.wpf-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wpf-top b{position:relative;z-index:1;font-size:19px;font-weight:900}
.wpf-top small{position:relative;z-index:1;font-size:12px;font-weight:800;opacity:.9}
.wpf-job{position:relative;z-index:1;margin-top:6px;font-size:11.5px;font-weight:900;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.22)}
.wpf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.wpf-stats>div{padding:10px 6px;border-radius:16px;text-align:center;background:var(--card2);min-width:0}
.wpf-stats small{display:block;font-size:10px;font-weight:800;color:var(--muted)}
.wpf-stats b{display:block;margin-top:2px;font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpf-stats .o{background:rgba(245,158,11,.12)}.wpf-stats .o b{color:#d97706}
.wpf-rows{padding:2px 4px;border-radius:18px;border:1px solid var(--line)}
.wpf-r{display:flex;align-items:center;gap:10px;padding:10px}
.wpf-r+.wpf-r{border-top:1px dashed var(--line)}
.wpf-r span{width:26px;text-align:center}
.wpf-r small{width:80px;flex:none;font-size:11.5px;font-weight:800;color:var(--muted)}
.wpf-r b{flex:1;min-width:0;font-size:13px;font-weight:800;word-break:break-word}
.wpf-r a{color:#2563eb;text-decoration:none}
.wpf-acts{display:flex;gap:8px;margin-top:12px}
.wpf-b{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border:0;border-radius:15px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:900;text-decoration:none;color:#fff}
.wpf-b svg{width:17px;height:17px;stroke-width:2.3}
.wpf-b.call{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 8px 18px rgba(34,197,94,.3)}
.wpf-b.edit{background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 8px 18px rgba(99,102,241,.3)}
.wk-day.self{cursor:pointer}
.wk-day.self:active{transform:scale(.92)}
.wk-due{flex:none;text-align:center;padding:6px 10px;border-radius:14px;background:var(--card2);min-width:70px}
.wk-due small{display:block;font-size:9.5px;font-weight:800;color:var(--muted)}
.wk-due b{display:block;font-size:14px;font-weight:900}
.wk-due em{display:block;font-style:normal;font-size:9.5px;font-weight:800;color:var(--muted)}
.wk-due.o{background:rgba(245,158,11,.13)}.wk-due.o b{color:#d97706}
.wk-warn{margin-bottom:10px;padding:10px 12px;border-radius:13px;background:rgba(245,158,11,.12);color:#b45309;font-size:12px;font-weight:800;line-height:1.7}
.wk-post{margin-bottom:10px;border-radius:18px;border:1.5px solid var(--line);overflow:hidden;background:var(--card)}
.wk-post.cur{border-color:rgba(245,158,11,.55)}
.wk-post.paid{border-color:rgba(34,197,94,.45)}
.wp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--card2)}
.wk-post.cur .wp-h{background:rgba(245,158,11,.1)}
.wk-post.paid .wp-h{background:rgba(34,197,94,.09)}
.wp-h b{display:block;font-size:13.5px;font-weight:900}
.wp-h small{display:block;font-size:11px;font-weight:800;color:var(--muted)}
.wp-st{flex:none;font-size:11px;font-weight:900;padding:3px 10px;border-radius:999px;background:var(--card)}
.wp-lines{list-style:none;margin:0;padding:4px 12px}
.wp-lines li{display:flex;align-items:center;gap:8px;padding:7px 2px;font-size:13px}
.wp-lines li+li{border-top:1px dashed var(--line)}
.wp-lines li.ed{cursor:pointer}
.wp-lines li.ed:hover{background:var(--card2)}
.wp-lines .n{width:20px;flex:none;font-weight:900;color:var(--muted)}
.wp-lines .d{flex:none;font-weight:800}
.wp-lines .d small{margin-inline-start:6px;font-size:10.5px;color:var(--muted);font-weight:700}
.wp-lines .t{flex:1;min-width:0;font-size:10.5px;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-lines b{flex:none;font:900 13.5px ui-monospace,Menlo,Consolas,monospace}
.wp-lines li.a b{color:#e11d48}.wp-lines li.a .t{color:#e11d48}
.wp-lines li.h b{color:#b45309}.wp-lines li.h .t{color:#b45309}
.wp-lines li.fu{opacity:.5}
.wp-f{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 12px}
.wp-f>div{flex:1;min-width:120px;padding:8px 10px;border-radius:12px;background:var(--card2)}
.wp-f small{display:block;font-size:10px;font-weight:800;color:var(--muted)}
.wp-f b{display:block;font-size:14px;font-weight:900}
.wp-f .c b{color:#e11d48}
.wp-f .due{background:rgba(245,158,11,.13)}.wp-f .due b{color:#d97706}
.wp-pay{display:flex;align-items:center;gap:12px;width:calc(100% - 24px);margin:0 12px 12px;padding:10px 14px;border:0;border-radius:16px;cursor:pointer;font-family:inherit;text-align:right;color:#fff;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 10px 22px rgba(16,185,129,.35);transition:transform .15s}
.wp-pay:active{transform:scale(.97)}
.wp-pay span{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.2)}
.wp-pay span svg{width:24px;height:24px;stroke-width:2}
.wp-pay small{display:block;font-size:11px;font-weight:800;opacity:.9}
.wp-pay b{display:block;font-size:17px;font-weight:900}
.mw-hero{position:relative;overflow:hidden;margin-bottom:12px;padding:16px;border-radius:26px;color:#fff;background:radial-gradient(110% 120% at 100% 0%,#34d399 0%,transparent 50%),linear-gradient(135deg,#059669,#0d9488);box-shadow:0 16px 36px rgba(5,150,105,.3)}
.mw-top{display:flex;align-items:center;gap:12px}
.mw-av{width:56px;height:56px;border-radius:19px;font-size:22px;border:2px solid rgba(255,255,255,.7)}
.mw-i{flex:1;min-width:0}
.mw-i small{display:block;font-size:11.5px;font-weight:700;opacity:.9}
.mw-i b{display:block;font-size:18px;font-weight:900}
.mw-i span{display:inline-block;margin-top:2px;font-size:11px;font-weight:900;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.2)}
.mw-out{width:44px;height:44px;flex:none;border:0;border-radius:14px;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.18)}
.mw-out svg{width:20px;height:20px;stroke-width:2.3}
.mw-date{margin-top:12px;font-size:12px;font-weight:800;opacity:.92}
/* ===== 🎨 Page headers (users-page layout, a modern colour per page) ===== */
.ph{position:relative;overflow:hidden;border-radius:28px;padding:20px 18px 18px;color:#fff;box-shadow:0 18px 40px var(--ph-sh,rgba(30,27,75,.3));background:var(--ph-bg)}
.ph::after{content:'';position:absolute;width:210px;height:210px;border-radius:50%;border:30px solid rgba(255,255,255,.07);top:-95px;left:-65px;pointer-events:none}
.ph::before{content:'';position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08);bottom:-80px;right:-40px;filter:blur(2px);pointer-events:none}
.ph-wd{--ph-bg:radial-gradient(120% 140% at 100% 0%,#22d3ee 0%,transparent 52%),radial-gradient(110% 130% at 0% 100%,#3b82f6 0%,transparent 55%),linear-gradient(135deg,#0c4a6e,#1e3a8a);--ph-sh:rgba(14,116,144,.35)}
.ph-debt{--ph-bg:radial-gradient(120% 140% at 100% 0%,#fb923c 0%,transparent 52%),radial-gradient(110% 130% at 0% 100%,#f43f5e 0%,transparent 55%),linear-gradient(135deg,#7c2d12,#881337);--ph-sh:rgba(190,18,60,.32)}
.ph-inc{--ph-bg:radial-gradient(120% 140% at 100% 0%,#34d399 0%,transparent 52%),radial-gradient(110% 130% at 0% 100%,#14b8a6 0%,transparent 55%),linear-gradient(135deg,#064e3b,#134e4a);--ph-sh:rgba(5,150,105,.32)}
.ph-wk{--ph-bg:radial-gradient(120% 140% at 100% 0%,#fcd34d 0%,transparent 50%),radial-gradient(110% 130% at 0% 100%,#f97316 0%,transparent 55%),linear-gradient(135deg,#78350f,#9a3412);--ph-sh:rgba(217,119,6,.33)}
.ph-cust{--ph-bg:radial-gradient(120% 140% at 100% 0%,#c084fc 0%,transparent 52%),radial-gradient(110% 130% at 0% 100%,#6366f1 0%,transparent 55%),linear-gradient(135deg,#3b0764,#1e1b4b);--ph-sh:rgba(124,58,237,.33)}
.ph-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.ph-tx{min-width:0}
.ph-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;opacity:.9}
.ph-label>svg{width:15px;height:15px;stroke-width:2.2}
.ph-av{position:relative;width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;overflow:hidden;font-size:11px;font-weight:900;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.6)}
.ph-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-title{font-size:30px;font-weight:900;margin-top:4px;letter-spacing:-.3px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-title small{font-size:14px;font-weight:700;opacity:.8;margin-inline-start:6px}
.ph-sub{font-size:13px;font-weight:800;opacity:.8}
.ph-title.t2{margin-top:0;font-size:26px;opacity:.92}
.ph-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;position:relative;z-index:1}
.ph-stats.c3{grid-template-columns:repeat(3,1fr)}
.ph-stats.c2{grid-template-columns:repeat(2,1fr)}
.ph-stat{min-width:0;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:11px 8px;text-align:right;display:flex;flex-direction:column;gap:2px;color:#fff;font-family:inherit}
button.ph-stat{cursor:pointer;transition:transform .15s,background .15s}
button.ph-stat:active{transform:scale(.95)}
button.ph-stat:hover{background:rgba(255,255,255,.16)}
.ph-stat i{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;margin-bottom:6px;font-style:normal;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.ph-stat i svg{width:15px;height:15px;stroke-width:2.3;color:#fff}
.ph-stat b{display:block;font-size:20px;font-weight:900;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-stat b.m{font-size:13.5px}
.ph-stat span{font-size:10.5px;font-weight:700;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph .um-add{flex:none}
.ph.sm{padding:13px 13px 12px;border-radius:22px}
.ph.sm .ph-title{font-size:22px;margin-top:0}
.ph.sm .ph-stats{margin-top:10px;gap:6px}
.ph.sm .ph-stat{padding:7px;border-radius:13px}
.ph.sm .ph-stat i{width:22px;height:22px;border-radius:7px;margin-bottom:3px}
.ph.sm .ph-stat i svg{width:13px;height:13px}
.ph.sm .ph-stat b{font-size:15px}
.ph.sm .ph-stat b.m{font-size:12.5px}
/* ===== Customers page (modern) ===== */
.ch-tile{padding:12px;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);min-width:0}
.ch-cur{font-size:11px;font-weight:800;opacity:.9}
.ch-tile b{display:block;font-size:19px;font-weight:900;margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:right}
.ch-prog{height:6px;border-radius:9px;background:rgba(255,255,255,.22);overflow:hidden}
.ch-prog i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#a7f3d0,#fff)}
.ch-tile small{display:block;font-size:10.5px;font-weight:800;opacity:.9;margin-top:5px}
.ch-tile small.ch-credit{opacity:1;color:#bbf7d0}
.cf-sort{flex:none;display:inline-flex;align-items:center;gap:5px;padding:8px 11px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.cf-sort svg{width:15px;height:15px;stroke-width:2.4}
.cc-head{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:0 4px}
.cc-head>span{font-size:12px;font-weight:800;color:var(--muted)}
.cc-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.cc{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 18px rgba(15,23,42,.05);cursor:pointer;transition:transform .16s,box-shadow .16s}
.cc:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.09)}
.cc:active{transform:scale(.985)}
.cc-av{width:54px;height:54px;border-radius:18px;padding:2.5px;background:var(--ring);align-self:start}
.cc-av.owe{--ring:linear-gradient(135deg,#f43f5e,#f97316)}
.cc-av.credit{--ring:linear-gradient(135deg,#10b981,#22d3ee)}
.cc-av.paid{--ring:linear-gradient(135deg,#cbd5e1,#94a3b8)}
.cc-av span{width:100%;height:100%;border-radius:15.5px;display:grid;place-items:center;overflow:hidden;font-size:20px;font-weight:900;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:2px solid var(--card)}
.cc-av img{width:100%;height:100%;object-fit:cover}
.cc-main{min-width:0}
.cc-name{font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-phone{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:3px}
.cc-phone svg{width:12px;height:12px;stroke-width:2.4;flex:none}
.cc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.cc-chips span{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--card2);color:var(--muted)}
.cc-chips svg{width:12px;height:12px;stroke-width:2.3}
.cc-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:start}
.cc-amt{text-align:left;padding:6px 10px;border-radius:14px;line-height:1.35}
.cc-amt small{display:block;font-size:10px;font-weight:800;opacity:.85}
.cc-amt b{display:block;font-size:13.5px;font-weight:900;white-space:nowrap;direction:ltr}
.cc-amt.owe{background:rgba(244,63,94,.1);color:#e11d48}
.cc-amt.credit{background:rgba(16,185,129,.12);color:#059669}
.cc-amt.paid{background:var(--card2);color:var(--muted)}
[data-theme="dark"] .cc-amt.owe{color:#fb7185}
[data-theme="dark"] .cc-amt.credit{color:#34d399}
.cc-sum{display:flex;align-items:center;gap:8px}
.cc-quick{display:flex;gap:6px}
.cc-quick a{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;transition:transform .15s}
.cc-quick a:active{transform:scale(.9)}
.cc-quick svg{width:16px;height:16px;stroke-width:2.2}
.cc-quick .q-call{color:#0ea5e9;background:rgba(14,165,233,.12)}
.cc-quick .q-wa{color:#16a34a;background:rgba(22,163,74,.12)}
.cc-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.cc-empty .ce-ic{width:70px;height:70px;margin:0 auto 12px;border-radius:24px;display:grid;place-items:center;color:#6366f1;background:rgba(99,102,241,.1)}
.cc-empty .ce-ic svg{width:32px;height:32px;stroke-width:2}
.cc-empty p{margin:0;font-weight:800}
/* Payment due date: calendar button + days-left chip on the supplier card */
.due-btn{flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.18s;padding:0}
.due-btn:hover{color:#f97316;border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.08)}
.due-btn svg{width:19px;height:19px;stroke-width:2.2}
.due-btn.set{color:#f97316;border-color:rgba(249,115,22,.35);background:rgba(249,115,22,.1)}
.due-chip{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 9px 3px 7px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.4}
.due-chip svg{width:13px;height:13px;stroke-width:2.4;flex:0 0 auto}
.due-chip b{font-size:12.5px;font-variant-numeric:tabular-nums}
.due-chip.ok{background:rgba(16,185,129,.12);color:#059669}
.due-chip.soon{background:rgba(245,158,11,.14);color:#d97706}
.due-chip.urgent{background:rgba(239,68,68,.12);color:#dc2626;animation:dueBlink 1.6s ease-in-out infinite}
.due-chip.late{background:#dc2626;color:#fff}
@keyframes dueBlink{0%,100%{opacity:1}50%{opacity:.55}}
/* Due-date picker modal */
.due-hero{margin:4px 0 16px;padding:22px 18px;border-radius:22px;text-align:center;color:#fff;background:linear-gradient(135deg,#f97316,#ef4444 60%,#db2777);box-shadow:0 14px 30px rgba(239,68,68,.25);position:relative;overflow:hidden}
.due-hero::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12);top:-70px;left:-50px}
.due-cal{width:74px;margin:0 auto 10px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18);position:relative;z-index:1}
.due-cal .m{background:#1e293b;color:#fff;font-size:11px;font-weight:800;padding:4px 0}
.due-cal .d{color:#0f172a;font-size:30px;font-weight:900;padding:4px 0 6px;line-height:1.1}
.due-hero .t{font-size:17px;font-weight:800;position:relative;z-index:1}
.due-hero .s{font-size:12.5px;opacity:.9;margin-top:4px;font-weight:600;position:relative;z-index:1}
.due-days-in{position:relative;display:flex;align-items:center}
.due-days-in input{width:100%;font-size:22px !important;font-weight:900 !important;text-align:center;padding-left:56px !important;padding-right:56px !important}
.due-days-in input::-webkit-outer-spin-button,.due-days-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.due-days-in input{-moz-appearance:textfield;appearance:textfield}
.due-days-in span{position:absolute;left:16px;font-size:14px;font-weight:800;color:#f97316;pointer-events:none}
/* Daily reminder popup */
.due-alert{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.6);backdrop-filter:blur(6px);animation:galIn .2s ease}
.due-alert-card{width:100%;max-width:400px;max-height:88vh;overflow-y:auto;background:var(--card);border-radius:26px;box-shadow:0 30px 70px rgba(0,0,0,.35);animation:dueIn .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes dueIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
.due-alert-top{padding:26px 20px 18px;text-align:center;background:linear-gradient(135deg,#f97316,#ef4444 60%,#db2777);color:#fff;border-radius:26px 26px 0 0}
.due-bell{width:68px;height:68px;margin:0 auto 12px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(255,255,255,.1)}
.due-bell svg{width:34px;height:34px;stroke-width:2.2;transform-origin:50% 10%;animation:bellRing 1.2s ease-in-out infinite}
@keyframes bellRing{0%,50%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-16deg)}}
.due-alert-top h3{margin:0;font-size:19px;font-weight:900}
.due-alert-top p{margin:5px 0 0;font-size:12.5px;opacity:.92;font-weight:600}
.due-alert-list{padding:14px 14px 4px}
.due-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--card2);border:1px solid var(--line);margin-bottom:10px;cursor:pointer;transition:.15s}
.due-row:hover{border-color:#f97316}
.due-row .debt-avatar{width:42px;height:42px;font-size:16px;flex:0 0 auto}
.due-row .nm{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.due-row .am{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:2px}
.due-days{flex:0 0 auto;min-width:58px;text-align:center;padding:7px 8px;border-radius:14px;font-weight:900;line-height:1.1}
.due-days b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.due-days span{font-size:10px}
.due-days.soon{background:rgba(245,158,11,.15);color:#d97706}
.due-days.urgent{background:rgba(239,68,68,.13);color:#dc2626}
.due-days.late{background:#dc2626;color:#fff}
.due-alert-foot{padding:6px 14px 16px}

/* TX */
.tx{display:flex;align-items:center;gap:11px;padding:11px;border-radius:14px;background:var(--card2);margin-bottom:8px;border:1px solid var(--line);}
.tx-ic{width:36px;height:36px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;font-weight:800;font-size:16px;}
.tx-ic.debt{background:rgba(239,68,68,.13);color:var(--red)}
.tx-ic.pay{background:rgba(16,185,129,.13);color:var(--green)}
.tx-ic.withdraw{background:rgba(14,165,233,.15);color:#0ea5e9}
.tx-main{flex:1;min-width:0}
.tx-title{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-sub{font-size:11px;color:var(--muted);margin-top:2px}
.tx-amt{font-weight:800;font-size:14px;white-space:nowrap}
.tx-amt.red{color:var(--red)}
.tx-amt.green{color:var(--green)}
.tx-amt.orange{color:#0ea5e9}

/* Buttons */
.btn{border:0;border-radius:14px;padding:12px 16px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.15s;}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 8px 18px rgba(79,70,229,.3)}
.btn.blue{background:linear-gradient(135deg,var(--ws1),var(--ws2));color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.3)}
.btn.green{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 8px 18px rgba(16,185,129,.3)}
.btn.red{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 8px 18px rgba(239,68,68,.3)}
.btn.amber{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;box-shadow:0 8px 18px rgba(245,158,11,.3)}
.btn.cyan{background:linear-gradient(135deg,#06b6d4,#0ea5e9);color:#fff;box-shadow:0 8px 18px rgba(14,165,233,.35)}
.btn.orange{background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;box-shadow:0 8px 18px rgba(249,115,22,.35)}
.btn.ghost{background:var(--card2);color:var(--text);border:1px solid var(--line)}
.btn.danger{background:rgba(239,68,68,.12);color:var(--red)}
.btn.full{width:100%}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Fields */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card2);color:var(--text);font-size:15px;font-weight:600;outline:none;transition:.18s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 4px rgba(79,70,229,.12);}
.field textarea{resize:vertical;min-height:70px}

/* Overlay */
.overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(5px);opacity:0;transition:opacity .22s;}
.overlay.show{opacity:1}
.modal{width:100%;max-width:720px;max-height:calc(100vh - max(56px, 16px + env(safe-area-inset-top)));max-height:calc(100dvh - max(56px, 16px + env(safe-area-inset-top)));overflow-y:auto;background:var(--card);border-radius:26px 26px 0 0;transform:translateY(30px);transition:transform .26s cubic-bezier(.2,.8,.3,1);padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.25);}
.overlay.show .modal{transform:translateY(0)}
@media(min-width:760px){.overlay{align-items:center}.modal{border-radius:26px;max-width:620px;padding-bottom:10px}}
.modal-head{display:flex;align-items:center;gap:12px;padding:18px 18px 12px;position:sticky;top:0;background:var(--card);z-index:2;border-bottom:1px solid var(--line);}
.modal-head h3{margin:0;font-size:16.5px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-body{padding:18px}
.modal-foot{display:flex;gap:10px;padding:0 18px 18px;}
.modal-foot .btn{flex:1}

.icon-btn{border:0;background:var(--card2);color:var(--text);cursor:pointer;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:700;flex:0 0 auto;transition:.15s;}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:18px;height:18px;stroke-width:2.2}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:13px;}
.stat.wide{grid-column:span 2;background:linear-gradient(135deg,rgba(79,70,229,.1),rgba(124,58,237,.1));border-color:rgba(79,70,229,.25)}
.stat span{font-size:11.5px;color:var(--muted);font-weight:700}
.stat b{display:block;font-size:17px;margin-top:5px;font-weight:800}
.stat b.red{color:var(--red)}
.stat b.green{color:var(--green)}
.stat b.amber{color:var(--amber)}

.empty{text-align:center;padding:48px 20px;color:var(--muted);}
.empty .em-ico{font-size:44px;margin-bottom:10px;opacity:.6}
.empty p{margin:0;font-size:14px;font-weight:600}

/* Settings */
/* ===== Settings (modern) ===== */
.settings-page-head{position:relative;overflow:hidden;border-radius:28px;padding:22px 18px 18px;color:#fff;margin-bottom:22px;background:radial-gradient(110% 130% at 100% 0%,#d946ef 0%,transparent 45%),radial-gradient(110% 130% at 0% 100%,#22d3ee 0%,transparent 55%),linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 18px 40px rgba(99,102,241,.32);}
.settings-page-head::before{content:'';position:absolute;width:220px;height:220px;border-radius:50%;border:30px solid rgba(255,255,255,.07);top:-100px;left:-70px}
.sp-row{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.settings-page-head .sp-av{position:relative;width:68px;height:68px;border-radius:22px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;overflow:hidden;flex:0 0 auto;font-size:26px;font-weight:900;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.settings-page-head .sp-av img{width:100%;height:100%;object-fit:cover}
.settings-page-head .sp-info{min-width:0;flex:1}
.settings-page-head .sp-info h2{margin:0;font-size:19px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-page-head .sp-info p{margin:6px 0 0;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.2)}
.sp-email{display:block;font-size:11.5px;opacity:.85;margin-top:5px;font-weight:600;direction:ltr;text-align:right}
.sp-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;position:relative;z-index:1}
.sp-act{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;border-radius:16px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;font-family:inherit;font-size:11.5px;font-weight:800;cursor:pointer;transition:.15s}
.sp-act:hover{background:rgba(255,255,255,.24)}
.sp-act:active{transform:scale(.95)}
.sp-act svg{width:20px;height:20px;stroke-width:2.1}
.settings-section{margin-bottom:20px}
.settings-section-title{font-size:12px;font-weight:800;color:var(--muted);margin:0 8px 8px;letter-spacing:.2px}
.settings-group{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 4px 18px rgba(15,23,42,.05)}
.settings-card{display:flex;align-items:center;gap:13px;width:100%;background:transparent;border:0;border-radius:0;padding:13px 14px;cursor:pointer;transition:background .15s;font-family:inherit;text-align:right;margin:0;color:var(--text);position:relative}
.settings-card+.settings-card::before{content:'';position:absolute;top:0;right:66px;left:14px;height:1px;background:var(--line)}
.settings-card:hover{background:var(--card2)}
.settings-card:active{background:color-mix(in srgb,var(--c,#6366f1) 8%,var(--card))}
.settings-card-icon{width:40px;height:40px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;color:var(--c,#6366f1);background:color-mix(in srgb,var(--c,#6366f1) 14%,transparent)}
.settings-card-icon svg{width:20px;height:20px;stroke-width:2.1}
.settings-card-body{flex:1;min-width:0;text-align:right}
.settings-card-title{font-size:14px;font-weight:800;color:var(--text)}
.settings-card-sub{font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:600}
.settings-card-arrow{color:var(--muted);display:grid;place-items:center}
.settings-card-arrow svg{width:18px;height:18px;stroke-width:2.2}
.st-pill{font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px;flex:none}
.st-pill.on{background:rgba(34,197,94,.13);color:#16a34a}
.st-pill.off{background:rgba(244,63,94,.12);color:#e11d48}
.st-switch{display:inline-block;position:relative;width:48px;height:28px;border-radius:999px;background:var(--line);flex:none;transition:background .2s}
.st-switch::after{content:'';position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.st-switch.on{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.st-switch.on::after{transform:translateX(-20px)}
.settings-form-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 4px 18px rgba(15,23,42,.05)}
.st-field{margin-bottom:12px}
.st-field label{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin:0 4px 6px}
.st-input{position:relative;display:flex;align-items:center}
.st-input svg{position:absolute;right:13px;width:18px;height:18px;stroke-width:2;color:var(--muted);pointer-events:none}
.st-input input{width:100%;padding:13px 42px 13px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card2);color:var(--text);font-size:14px;font-weight:700;outline:none;transition:.18s}
.st-input input:focus{border-color:#8b5cf6;background:var(--card);box-shadow:0 0 0 4px rgba(139,92,246,.14)}
.st-save{width:100%;margin-top:4px;padding:14px;border:0;border-radius:15px;color:#fff;font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#d946ef);box-shadow:0 10px 22px rgba(139,92,246,.3);display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.st-save svg{width:18px;height:18px;stroke-width:2.2}
.st-save:active{transform:scale(.97)}
/* ✈️ Telegram (password recovery): settings sections + link window */
.st-save.tg,.btn.tg{background:linear-gradient(135deg,#2AABEE,#229ED9 60%,#1c7fc0);color:#fff;box-shadow:0 8px 18px rgba(34,158,217,.3)}
.btn.tg{text-decoration:none;margin-bottom:12px}
.st-remove{width:100%;margin-top:8px;padding:11px;border:0;border-radius:14px;background:rgba(239,68,68,.1);color:var(--red);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer}
/* صندوق القوائم المنسدلة في الإعدادات */
.st-box{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 4px 18px rgba(15,23,42,.05);padding:6px;overflow:hidden}
.st-acc{border-radius:17px;transition:background .2s}
.st-acc+.st-acc{margin-top:2px}
.st-acc>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:17px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.st-acc>summary::-webkit-details-marker{display:none}
.st-acc>summary:hover{background:var(--card2)}
.st-acc>summary:active{transform:scale(.99)}
.st-acc-ic{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));box-shadow:0 6px 14px color-mix(in srgb,var(--c) 35%,transparent)}
.st-acc-ic svg{width:20px;height:20px;stroke-width:2.2}
.st-acc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.st-acc-tx b{font-size:14px;font-weight:900;color:var(--text)}
.st-acc-tx small{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-acc-chev{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--card2);color:var(--muted);transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}
.st-acc-chev svg{width:16px;height:16px;transform:rotate(-90deg)}
.st-acc[open]{background:color-mix(in srgb,var(--c) 6%,transparent)}
.st-acc[open]>summary .st-acc-chev{transform:rotate(180deg);background:var(--c);color:#fff}
.st-acc-body{padding:4px 10px 12px;animation:accIn .32s cubic-bezier(.2,.9,.3,1)}
.st-acc-body>.settings-group{box-shadow:none}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.st-acc-body{animation:none}}
.tg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;font-size:13px;font-weight:900}
.tg-help{margin:0 0 14px;padding:11px 13px;border-radius:14px;background:var(--card2);border:1px dashed var(--line);font-size:12px;font-weight:700;line-height:1.9;color:var(--muted)}
.tg-help b{color:var(--text)}
.tg-warn{margin:0 0 14px;padding:11px 13px;border-radius:14px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);color:#b45309;font-size:12px;font-weight:800;line-height:1.8}
.tg-steps{display:grid;gap:8px;margin-bottom:14px}
.tg-steps div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--card2);font-size:12.5px;font-weight:700;line-height:1.6}
.tg-steps div>b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;background:linear-gradient(135deg,#2AABEE,#229ED9)}
.tg-wait{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px;font-size:12.5px;font-weight:800;color:var(--muted)}
.tg-wait.ok{color:#16a34a}.tg-wait.bad{color:var(--red)}
.tg-wait i{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(34,158,217,.25);border-top-color:#229ED9;animation:spin .8s linear infinite}
.tg-wait.ok i,.tg-wait.bad i{display:none}
.tg-cur{padding:12px 14px;border-radius:14px;background:var(--card2);font-weight:800;font-size:14px}
.st-logout{width:100%;margin-top:4px;padding:14px;border-radius:18px;border:1.5px solid rgba(244,63,94,.3);background:rgba(244,63,94,.07);color:#f43f5e;font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.st-logout svg{width:19px;height:19px;stroke-width:2.2}
.st-foot{text-align:center;margin-top:18px;font-size:11.5px;color:var(--muted);font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px}
.st-foot svg{width:14px;height:14px;stroke-width:2.2}

/* Login */
#loginScreen{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;background:#6f9fd0 url('../../bag.jpg') center/cover no-repeat;overflow:hidden;overflow-y:auto;}
#snowCanvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;}
.login-card{position:relative;z-index:2;width:100%;max-width:400px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.95);border-radius:28px;padding:36px 28px 28px;box-shadow:0 30px 70px rgba(30,58,95,.16),0 2px 6px rgba(30,58,95,.06);animation:loginIn .6s cubic-bezier(.2,.8,.3,1);margin:auto;}
@keyframes loginIn{0%{opacity:0;transform:translateY(30px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
.login-logo-wrap{position:relative;width:92px;height:92px;margin:0 auto 18px;}
.login-logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 30%;
    background: conic-gradient(from 0deg, #22d3ee, #6366f1, #d946ef, #22d3ee);
    animation: ringSpin 5.4s linear infinite;
    filter: blur(0.6px);
    box-shadow: 0 0 13px rgba(99, 102, 241, .45);
}
.login-logo-ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#fff;}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.login-logo{    position: absolute;
    display: grid;
    box-shadow: rgba(79, 70, 229, 0.25) 0px 8px 24px;
    z-index: 1;
    inset: 8px;
    border-radius: 50%;
    background: #ffffff;
    place-items: center;
    overflow: hidden;
  }
.login-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.login-logo .logo-fallback{font-size:36px;font-weight:800;color:#fff;}
.login-title{text-align:center;font-size:23px;font-weight:800;color:#0f172a;margin:0 0 6px;}
.login-sub{text-align:center;font-size:13px;color:#64748b;margin:0 0 24px;font-weight:600;}
.login-field{margin-bottom:16px;position:relative;}
.login-field label{display:block;font-size:12px;font-weight:700;color:#334155;margin-bottom:7px;}
.login-field .input-wrap{position:relative;display:flex;align-items:center;}
.login-field input{width:100%;padding:15px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;color:#0f172a;font-size:15px;font-weight:600;outline:none;transition:.22s;}
.login-field input::placeholder{color:#94a3b8}
.login-field input:focus{border-color:#6366f1;background:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.15);}
.pass-toggle{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:#64748b;cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center;}
.pass-toggle svg{width:20px;height:20px;stroke-width:2}
.login-btn{width:100%;padding:16px;border-radius:14px;border:0;background:linear-gradient(135deg,#4f46e5,#7c3aed,#a855f7);background-size:200% 200%;color:#fff;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;margin-top:8px;box-shadow:0 10px 24px rgba(79,70,229,.3);transition:.25s;animation:btnGrad 6s ease infinite;display:flex;align-items:center;justify-content:center;gap:10px;}
@keyframes btnGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(79,70,229,.38)}
.login-btn:disabled{opacity:.7;cursor:wait;animation:none}
.login-btn .spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.login-error{--la-c:#dc2626;--la-bg:#fef2f2;--la-b:#fecaca;--la-sh:rgba(220,38,38,.13);--la-ic:linear-gradient(135deg,#f43f5e,#dc2626);display:none;align-items:flex-start;gap:11px;padding:11px 10px 11px 12px;margin-bottom:16px;border-radius:16px;text-align:right;border:1px solid var(--la-b);background:var(--la-bg);color:var(--la-c);box-shadow:0 8px 22px var(--la-sh)}
.login-error.show{display:flex;animation:laIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes laIn{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.la-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--la-ic);box-shadow:0 6px 14px var(--la-sh)}
.la-ic svg{width:20px;height:20px;stroke-width:2.3}
.la-t{flex:1;min-width:0;padding-top:1px}
.la-t b{display:block;font-size:13.5px;font-weight:900;line-height:1.5}
.la-t small{display:block;margin-top:2px;font-size:12px;font-weight:700;line-height:1.65;opacity:.85}
.la-x{flex:none;width:26px;height:26px;border:0;border-radius:8px;display:grid;place-items:center;background:transparent;color:var(--la-c);opacity:.55;cursor:pointer;transition:opacity .15s,background .15s}
.la-x:hover{opacity:1;background:rgba(15,23,42,.06)}
.la-x svg{width:14px;height:14px;stroke-width:2.6}
.la-warn{--la-c:#b45309;--la-bg:#fffbeb;--la-b:#fde68a;--la-sh:rgba(217,119,6,.15);--la-ic:linear-gradient(135deg,#f59e0b,#d97706)}
.la-blocked{--la-c:#9f1239;--la-bg:#fff1f2;--la-b:#fda4af;--la-sh:rgba(159,18,57,.18);--la-ic:linear-gradient(135deg,#be123c,#881337)}
.la-net{--la-c:#1d4ed8;--la-bg:#eff6ff;--la-b:#bfdbfe;--la-sh:rgba(37,99,235,.15);--la-ic:linear-gradient(135deg,#3b82f6,#4f46e5)}
.la-ok{--la-c:#047857;--la-bg:#ecfdf5;--la-b:#a7f3d0;--la-sh:rgba(5,150,105,.15);--la-ic:linear-gradient(135deg,#10b981,#059669)}
.login-card.la-shake{animation:shake .4s}
input.la-bad{border-color:#f43f5e!important;box-shadow:0 0 0 4px rgba(244,63,94,.13)!important}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.login-foot{text-align:center;font-size:11px;color:#94a3b8;margin-top:18px;font-weight:600;}
/* 🔑 Password recovery (replaces the form while it is open) */
.login-link{display:block;width:100%;margin-top:12px;padding:7px;border:0;border-radius:10px;background:none;color:#4f46e5;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;text-align:center;transition:background .2s}
.login-link:hover{background:rgba(79,70,229,.08)}
.login-link.back{color:#64748b;margin-top:4px}
#resetForm{display:none}
.login-card.resetting #resetForm{display:block;animation:lockIn .35s cubic-bezier(.2,.8,.3,1)}
.login-card.resetting #loginForm,.login-card.resetting .login-lock{display:none!important}
.login-card.resetting .login-sub{display:block!important}
.login-card.resetting .login-error.show{display:flex!important}
.rs-steps{display:flex;justify-content:center;gap:6px;margin:-8px 0 16px}
.rs-steps i{width:26px;height:6px;border-radius:9px;background:#e2e8f0;transition:background .3s}
.rs-steps i.on{background:linear-gradient(90deg,#4f46e5,#a855f7)}
.login-field input.rs-code{text-align:center;font-size:26px;font-weight:900;letter-spacing:10px;padding:12px 16px}
/* Wrong-password lockout panel (replaces the form while the countdown runs) */
.login-lock{display:none;text-align:center;padding:6px 0 4px;}
.login-card.locked .login-lock{display:block;animation:lockIn .45s cubic-bezier(.2,.8,.3,1)}
.login-card.locked #loginForm,.login-card.locked .login-sub,.login-card.locked .login-error{display:none}
@keyframes lockIn{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
.lock-ring{position:relative;width:150px;height:150px;margin:4px auto 20px;}
.lock-ring>svg{width:100%;height:100%;transform:rotate(-90deg)}
.lock-track{fill:none;stroke:#eef2ff;stroke-width:9}
.lock-bar{fill:none;stroke:#7c3aed;stroke-width:9;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 4px 10px rgba(124,58,237,.35))}
.lock-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.lock-icon{width:26px;height:26px;color:#7c3aed;animation:lockPulse 1.6s ease-in-out infinite}
@keyframes lockPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.75}}
.lock-center b{font-size:34px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums;letter-spacing:.5px;direction:ltr}
.lock-title{margin:0 0 8px;font-size:18px;font-weight:800;color:#0f172a}
.lock-text{margin:0;font-size:13px;line-height:1.9;color:#64748b;font-weight:600}

/* Users */
.user-avatar{width:46px;height:46px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;overflow:hidden;}
.user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.user-avatar.super{background:linear-gradient(135deg,#f59e0b,#f97316)}
.user-avatar.manager{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.session-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--card2);border:1px solid var(--line);border-radius:14px;margin-bottom:8px;}
.session-ic{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;font-size:16px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;}
.session-main{flex:1;min-width:0}
.session-ip{font-size:13px;font-weight:800;direction:ltr;text-align:right;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.session-meta{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.7}
.session-meta b{color:var(--text)}

/* Permissions */
.perm-group{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;}
.perm-group-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;margin-bottom:12px;color:var(--text);}
.perm-group-title .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;color:#fff;}
.perm-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:7px;}
.perm-label{font-size:13px;font-weight:700;color:var(--text)}
.perm-toggle{position:relative;width:46px;height:26px;border-radius:999px;background:var(--line);cursor:pointer;transition:.22s;flex:0 0 auto;border:0;padding:0;}
.perm-toggle::after{content:'';position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.22s;}
.perm-toggle.on{background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.perm-toggle.on::after{transform:translateX(-20px)}
.perm-sep{margin:20px 0 12px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(217,70,239,.1));border:1px solid rgba(139,92,246,.25)}
.perm-sep span{display:block;font-size:15px;font-weight:900;color:var(--text)}
.perm-sep small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:4px;line-height:1.7}
.perm-group-all{margin-right:auto;display:flex;gap:4px}
.perm-group-all button{border:1px solid var(--line);background:var(--card);color:var(--muted);font-family:inherit;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;cursor:pointer}
.perm-group-all button:first-child{color:#7c3aed;border-color:rgba(124,58,237,.3)}
/* Avatar picker */
.avatar-picker{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:18px;}
.avatar-preview{width:100px;height:100px;border-radius:28px;background:linear-gradient(135deg,#6366f1,#a855f7);display:grid;place-items:center;color:#fff;font-weight:800;font-size:38px;overflow:hidden;position:relative;box-shadow:0 10px 30px rgba(99,102,241,.4);cursor:pointer;transition:.22s;}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-preview .overlay-ico{position:absolute;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;opacity:0;transition:.22s;font-size:24px;}
.avatar-preview:hover .overlay-ico{opacity:1}

/* Card media switcher (orders list): arrows + dots over the cover */
.mslot{width:100%;height:100%}
.mslot img{animation:galSlide .25s ease}
.mnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:#0f172a;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.22);backdrop-filter:blur(6px);transition:transform .15s,background .15s;padding:0}
.mnav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.mnav:active{transform:translateY(-50%) scale(.94)}
.mnav svg{width:18px;height:18px;stroke-width:2.6}
.mnav.prev{right:10px}.mnav.next{left:10px}
.mdots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:5px;padding:4px 7px;border-radius:10px;background:rgba(15,23,42,.45);backdrop-filter:blur(6px)}
.mdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:.25s}
.mdots i.on{background:#fff;width:16px;border-radius:4px}
.mexpand{position:absolute;top:10px;left:10px;z-index:3;width:34px;height:34px;border-radius:10px;border:0;background:rgba(15,23,42,.6);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);padding:0}
.mexpand svg{width:17px;height:17px;stroke-width:2.4}
.odi-media .mexpand{top:4px;left:4px;width:24px;height:24px;border-radius:7px}
.odi-media .mexpand svg{width:13px;height:13px}
/* Full-screen gallery */
.gallery{position:fixed;inset:0;z-index:9999;background:rgba(5,8,18,.96);display:flex;flex-direction:column;animation:galIn .22s ease;user-select:none;-webkit-user-select:none}
@keyframes galIn{from{opacity:0}to{opacity:1}}
.gal-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;color:#fff;flex:0 0 auto}
.gal-count{font-size:14px;font-weight:800;background:rgba(255,255,255,.12);padding:6px 14px;border-radius:20px;direction:ltr;font-variant-numeric:tabular-nums}
.gal-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s;padding:0}
.gal-btn:hover{background:rgba(255,255,255,.24)}
.gal-btn:active{transform:scale(.92)}
.gal-btn svg{width:22px;height:22px;stroke-width:2.4}
.gal-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 64px;touch-action:pan-y}
.gal-stage img,.gal-stage video{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain;animation:galSlide .25s ease;box-shadow:0 20px 60px rgba(0,0,0,.5)}
@keyframes galSlide{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.gal-stage .gal-btn{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px}
.gal-stage .gal-btn:active{transform:translateY(-50%) scale(.92)}
.gal-stage .gal-prev{right:10px}.gal-stage .gal-next{left:10px}
.gal-stage .gal-btn[disabled]{opacity:.25;cursor:default}
.gal-thumbs{flex:0 0 auto;display:flex;gap:8px;padding:12px 16px 18px;overflow-x:auto;justify-content:safe center;scrollbar-width:none}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumbs .gt{position:relative;flex:0 0 60px;height:60px;border-radius:12px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;opacity:.55;transition:.2s;background:#111;padding:0}
.gal-thumbs .gt.on{border-color:#a78bfa;opacity:1;transform:translateY(-2px)}
.gal-thumbs .gt img,.gal-thumbs .gt video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.gal-thumbs .gt .gt-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;background:rgba(0,0,0,.3)}
@media (max-width:600px){.gal-stage{padding:0 8px}.gal-stage .gal-btn{width:42px;height:42px;background:rgba(255,255,255,.18)}}

/* Toast */
.toast{position:fixed;bottom:calc(160px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);z-index:300;background:#0f172a;color:#fff;padding:12px 22px;border-radius:14px;font-size:13.5px;font-weight:700;opacity:0;transition:.28s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0)}
.muted{color:var(--muted)}
.small{font-size:11.5px}

/* Filter */
.user-filter-bar{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px 14px;box-shadow:var(--shadow);margin-bottom:14px;}
.user-filter-bar .uf-ic{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#06b6d4,#0ea5e9);display:grid;place-items:center;color:#fff;flex:0 0 auto;}
.user-filter-bar select{flex:1;border:0;background:none;outline:none;font-size:14px;font-weight:700;color:var(--text);padding:6px 4px;cursor:pointer;font-family:inherit;}

/* FAB */
.hidden{display:none !important}

/* Order details */
.order-detail-items{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.order-detail-item{background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:14px;position:relative;overflow:hidden;display:flex;gap:12px;}
.order-detail-item::before{content:'';position:absolute;top:0;right:0;bottom:0;width:4px;background:linear-gradient(180deg,#6366f1,#a855f7);border-radius:0 18px 18px 0;}
.order-detail-item .odi-media{flex:0 0 auto;width:90px;height:90px;border-radius:14px;overflow:hidden;background:#000;position:relative;cursor:pointer;}
.order-detail-item .odi-media img,.order-detail-item .odi-media video{width:100%;height:100%;object-fit:cover;display:block;}
.order-detail-item .odi-media .odi-media-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:32px;background:var(--card);opacity:.5;}
.order-detail-item .odi-media .odi-media-count{position:absolute;bottom:4px;left:4px;background:rgba(15,23,42,.8);color:#fff;font-size:9px;font-weight:800;padding:1px 6px;border-radius:6px;}
.order-detail-item .odi-media .odi-media-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);color:#fff;font-size:22px;pointer-events:none;}
.order-detail-item .odi-body{flex:1;min-width:0;}
.order-detail-item .odi-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:6px;border-bottom:1px dashed var(--line);}
.order-detail-item .odi-index{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#a855f7);display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800;flex:0 0 auto;}
.order-detail-item .odi-product{font-size:13.5px;font-weight:800;color:var(--text);flex:1;margin-right:6px;}
.order-detail-item .odi-price-tag{font-size:12px;font-weight:800;color:#ef4444;background:rgba(239,68,68,.08);padding:3px 8px;border-radius:8px;white-space:nowrap;}
.order-detail-item .odi-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.order-detail-item .odi-field{display:flex;flex-direction:column;gap:2px;}
.order-detail-item .odi-field .odi-label{font-size:9.5px;color:var(--muted);font-weight:700;}
.order-detail-item .odi-field .odi-value{font-size:12px;font-weight:800;color:var(--text);}
.order-detail-item .odi-note{grid-column:span 2;margin-top:4px;padding:6px 8px;background:var(--card);border-radius:8px;border:1px solid var(--line);font-size:11px;color:var(--muted);font-weight:600;line-height:1.6;}
.total-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.total-box{padding:14px;border-radius:16px;text-align:center;border:1px solid var(--line);}
.total-box.qty{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));border-color:rgba(99,102,241,.25);}
.total-box.price{background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(249,115,22,.1));border-color:rgba(239,68,68,.25);}
.total-box .tl{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:5px;}
.total-box .tv{font-size:19px;font-weight:800;}
.total-box.qty .tv{color:#6366f1;}
.total-box.price .tv{color:#ef4444;}
.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}

/* Order form */
.order-items-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.order-item-card{background:var(--card2);border:1.5px solid var(--line);border-radius:18px;padding:14px;}
.order-item-card .oi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--line);}
.order-item-card .oi-num{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#a855f7);display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;}
.order-item-card .oi-title{font-size:13px;font-weight:800;color:var(--text);}
.order-item-card .oi-remove{width:30px;height:30px;border-radius:9px;border:0;background:rgba(239,68,68,.1);color:var(--red);display:grid;place-items:center;cursor:pointer;font-size:14px;}
.order-item-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.order-item-grid .oig-field{display:flex;flex-direction:column;gap:4px;}
.order-item-grid .oig-field label{font-size:10.5px;color:var(--muted);font-weight:700;}
.order-item-grid .oig-field input,.order-item-grid .oig-field textarea{padding:9px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font-size:13px;font-weight:600;outline:none;}
.order-item-grid .oig-field textarea{resize:vertical;min-height:50px;}
.order-item-grid .oig-field.full{grid-column:span 2;}
.order-item-total{margin-top:10px;padding:10px 12px;background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(5,150,105,.08));border:1px solid rgba(16,185,129,.2);border-radius:12px;display:flex;justify-content:space-between;align-items:center;}
.order-item-total .olt-l{font-size:11px;color:var(--muted);font-weight:700;}
.order-item-total .olt-v{font-size:15px;font-weight:800;color:#10b981;}
.grand-total{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:18px;padding:16px;color:#fff;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;box-shadow:0 8px 24px rgba(79,70,229,.35);}
.grand-total .gt-l{font-size:12.5px;opacity:.9;font-weight:700;}
.grand-total .gt-v{font-size:22px;font-weight:800;}
.date-day-display{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;background:var(--card2);border-radius:14px;border:1px solid var(--line);margin-bottom:14px;}
.date-day-display .ddd-icon{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#f59e0b,#f97316);display:grid;place-items:center;color:#fff;font-size:15px;}
.date-day-display .ddd-text{font-size:13.5px;font-weight:800;}
.date-day-display .ddd-day{font-size:11px;color:var(--muted);font-weight:700;margin-right:auto;}
.order-item-upload-section{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}
.order-item-upload-section .oiu-label{font-size:10.5px;color:var(--muted);font-weight:700;margin-bottom:6px;}
.order-item-upload-section .oiu-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.order-item-upload-section .oiu-btn{padding:6px 12px;border-radius:9px;border:1.5px dashed var(--line);background:var(--card);color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:inherit;}
.order-item-upload-section .oiu-thumbs{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.order-item-upload-section .oiu-thumb{width:48px;height:48px;border-radius:10px;overflow:hidden;position:relative;background:var(--card2);border:1px solid var(--line);}
.order-item-upload-section .oiu-thumb img,.order-item-upload-section .oiu-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.order-item-upload-section .oiu-thumb .oiu-del{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:rgba(239,68,68,.9);color:#fff;border:0;font-size:9px;cursor:pointer;display:grid;place-items:center;line-height:1;padding:0;}

/* Notifications panel */
.notif-panel-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.55);backdrop-filter:blur(5px);opacity:0;transition:opacity .25s;display:flex;align-items:flex-start;justify-content:center;padding:16px;padding-top:calc(20px + env(safe-area-inset-top));}
.notif-panel-overlay.show{opacity:1;}
.notif-panel{width:100%;max-width:560px;max-height:85vh;overflow-y:auto;background:var(--card);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.4);transform:translateY(-20px) scale(.97);transition:transform .3s cubic-bezier(.2,.8,.3,1);border:1px solid var(--line);}
.notif-panel-overlay.show .notif-panel{transform:translateY(0) scale(1);}
.notif-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2;border-radius:24px 24px 0 0;}
.notif-head .nh-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#f59e0b,#f97316);display:grid;place-items:center;color:#fff;font-size:20px;flex:0 0 auto;}
.notif-head h3{margin:0;font-size:16.5px;font-weight:800;flex:1;}
.notif-head .nh-count{font-size:11.5px;font-weight:800;color:var(--muted);background:var(--card2);padding:4px 10px;border-radius:999px;}
.notif-body{padding:12px;}
.notif-empty{text-align:center;padding:50px 20px;color:var(--muted);}
.notif-empty .ne-ico{font-size:48px;margin-bottom:10px;opacity:.5;}
.notif-empty p{margin:0;font-size:14px;font-weight:700;}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px;margin-bottom:8px;background:var(--card2);border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:.22s;position:relative;overflow:hidden;}
.notif-item.unread{background:linear-gradient(135deg, rgba(79,70,229,.06), rgba(124,58,237,.06));border-color:rgba(79,70,229,.25);}
.notif-icon{width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;font-size:20px;color:#fff;}
.notif-icon.order{background:linear-gradient(135deg,#ec4899,#8b5cf6);}
.notif-icon.customer{background:linear-gradient(135deg,#6366f1,#8b5cf6);}
.notif-icon.debt{background:linear-gradient(135deg,#f97316,#ef4444);}
.notif-icon.income{background:linear-gradient(135deg,#10b981,#059669);}
.notif-icon.withdraw{background:linear-gradient(135deg,#06b6d4,#0ea5e9);}
.notif-icon.user{background:linear-gradient(135deg,#f59e0b,#f97316);}
.notif-icon.login{background:linear-gradient(135deg,#10b981,#059669);}
.notif-icon.ip-change{background:linear-gradient(135deg,#3b82f6,#06b6d4);}
.notif-icon.device{background:linear-gradient(135deg,#0ea5e9,#6366f1);}
.notif-icon.delete{background:linear-gradient(135deg,#ef4444,#dc2626);}
.notif-icon.edit{background:linear-gradient(135deg,#a855f7,#7c3aed);}
.notif-icon.default{background:linear-gradient(135deg,#64748b,#475569);}
.notif-content{flex:1;min-width:0;}
.notif-title{font-size:13.5px;font-weight:800;color:var(--text);margin-bottom:4px;}
.notif-desc{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.6;margin-bottom:6px;}
.notif-meta{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--muted);font-weight:700;flex-wrap:wrap;}
.notif-meta .nm-badge{padding:2px 8px;border-radius:6px;background:var(--card);border:1px solid var(--line);}

/* Install Banner */
/* ===== Install banner (modern) ===== */
.install-banner{position:fixed;left:50%;transform:translate(-50%,130%);bottom:calc(92px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:440px;z-index:600;padding:16px;border-radius:26px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);border:1px solid color-mix(in srgb,#8b5cf6 25%,var(--line));box-shadow:0 24px 60px rgba(30,27,75,.3);transition:transform .45s cubic-bezier(.2,.9,.3,1.15),opacity .3s;opacity:0;pointer-events:none;visibility:hidden;overflow:hidden}
.install-banner::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#22d3ee,#6366f1,#d946ef)}
.install-banner.show{transform:translate(-50%,0);opacity:1;pointer-events:auto;visibility:visible;}
.install-banner.hide{transform:translate(-50%,200%);opacity:0;pointer-events:none;visibility:hidden;}
.ib-x{position:absolute;top:12px;left:12px;width:30px;height:30px;border-radius:10px;border:0;background:var(--card2);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ib-x svg{width:15px;height:15px;stroke-width:2.6}
.ib-top{display:flex;align-items:center;gap:13px;padding-left:34px}
.install-banner .ib-ico{position:relative;width:58px;height:58px;border-radius:18px;padding:2.5px;flex:0 0 auto;background:conic-gradient(from 200deg,#22d3ee,#6366f1,#d946ef,#22d3ee);box-shadow:0 10px 22px rgba(99,102,241,.3);display:grid;place-items:center;font-size:26px}
.install-banner .ib-ico img{width:100%;height:100%;object-fit:cover;border-radius:16px;background:#fff}
.install-banner .ib-body{flex:1;min-width:0}
.install-banner .ib-title{font-size:15.5px;font-weight:900;color:var(--text)}
.install-banner .ib-desc{font-size:12px;color:var(--muted);margin-top:3px;font-weight:600}
.ib-feats{display:flex;gap:6px;margin:14px 0;flex-wrap:wrap}
.ib-feats span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.ib-feats svg{width:13px;height:13px;stroke-width:2.4}
.install-banner .ib-actions{display:flex;gap:8px}
.install-banner .ib-btn{border:0;border-radius:15px;padding:13px 16px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s}
.install-banner .ib-btn:active{transform:scale(.96)}
.install-banner .ib-btn svg{width:18px;height:18px;stroke-width:2.3}
.install-banner .ib-btn.primary{flex:1;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#d946ef);box-shadow:0 10px 22px rgba(139,92,246,.32)}
.install-banner .ib-btn.ghost{background:var(--card2);color:var(--muted)}

/* ===== Install steps sheet ===== */
.ig-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,14,30,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:galIn .2s ease}
.ig-sheet{width:100%;max-width:460px;background:var(--card);border-radius:28px 28px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.3);animation:igUp .4s cubic-bezier(.2,.9,.3,1)}
@keyframes igUp{from{transform:translateY(100%)}to{transform:none}}
.ig-grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 14px}
.ig-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ig-head .ib-ico{width:52px;height:52px;border-radius:16px;padding:2.5px;background:conic-gradient(from 200deg,#22d3ee,#6366f1,#d946ef,#22d3ee);flex:none}
.ig-head .ib-ico img{width:100%;height:100%;object-fit:cover;border-radius:14px;background:#fff;display:block}
.ig-head h3{margin:0;font-size:17px;font-weight:900}
.ig-head p{margin:3px 0 0;font-size:12px;color:var(--muted);font-weight:600}
.ig-step{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--card2);margin-bottom:8px}
.ig-num{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;background:linear-gradient(135deg,#6366f1,#d946ef)}
.ig-txt{flex:1;font-size:13.5px;font-weight:700;line-height:1.6}
.ig-txt b{color:#7c3aed}
[data-theme="dark"] .ig-txt b{color:#c4b5fd}
.ig-ic{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;color:#6366f1;background:var(--card);border:1px solid var(--line)}
.ig-ic svg{width:19px;height:19px;stroke-width:2.2}
.ig-ok{width:100%;margin-top:8px;padding:14px;border:0;border-radius:16px;color:#fff;font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#d946ef)}

/* ===== Welcome card after login ===== */
.welcome{position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;z-index:9500;width:calc(100% - 24px);max-width:420px;transform:translate(-50%,-140%);transition:transform .55s cubic-bezier(.2,.9,.3,1.2);border-radius:24px;overflow:hidden;color:#fff;background:radial-gradient(120% 140% at 100% 0%,#d946ef 0%,transparent 45%),radial-gradient(120% 140% at 0% 100%,#22d3ee 0%,transparent 55%),linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 20px 50px rgba(79,70,229,.4);cursor:pointer}
.welcome.show{transform:translate(-50%,0)}
/* الترحيب المخفي لا يستقبل النقر ولا يحجب النوافذ (كان يغطي زر إغلاق النافذة المنبثقة) */
.welcome:not(.show){visibility:hidden;pointer-events:none;opacity:0;transition:transform .55s cubic-bezier(.2,.9,.3,1.2),opacity .3s,visibility .55s}
.welcome.show{visibility:visible;pointer-events:auto;opacity:1}
.wl-row{display:flex;align-items:center;gap:13px;padding:16px 16px 14px}
.wl-av{width:52px;height:52px;border-radius:17px;flex:none;display:grid;place-items:center;font-size:20px;font-weight:900;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.55);overflow:hidden}
.wl-av img{width:100%;height:100%;object-fit:cover}
.wl-hi{font-size:12px;font-weight:700;opacity:.9}
.wl-name{font-size:18px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-wave{display:inline-block;transform-origin:70% 70%;animation:wave 1.6s ease-in-out 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-10deg)}}
.wl-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 14px}
.wl-chips span{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.18)}
.wl-chips svg{width:13px;height:13px;stroke-width:2.4}
.wl-bar{height:4px;background:rgba(255,255,255,.25)}
.wl-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:right;animation:wlBar 4.5s linear forwards}
@keyframes wlBar{to{transform:scaleX(0)}}

/* Boot splash + every full-screen screen (same look, only the message under the logo changes) */
#bootSplash,.fs-scr{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;background:radial-gradient(90% 60% at 100% 0%,rgba(217,70,239,.45) 0%,transparent 60%),radial-gradient(90% 60% at 0% 100%,rgba(34,211,238,.35) 0%,transparent 60%),linear-gradient(160deg,#0f172a,#1e1b4b);}
.bs-logo{position:relative;width:96px;height:96px;display:grid;place-items:center}
.bs-ring{position:absolute;inset:0;border-radius:30px;background:conic-gradient(from 0deg,#22d3ee,#6366f1,#d946ef,#22d3ee);animation:bootspin 2.4s linear infinite;filter:blur(.5px)}
.bs-logo img{position:relative;width:86px;height:86px;border-radius:26px;object-fit:cover;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:bsPulse 1.8s ease-in-out infinite}
@keyframes bsPulse{0%,100%{transform:scale(1)}50%{transform:scale(.95)}}
.bs-name{font-size:16px;font-weight:900;letter-spacing:.2px;opacity:.95}
.bs-dots{display:flex;gap:6px}
.bs-dots i{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.3;animation:bsDot 1.2s ease-in-out infinite}
.bs-dots i:nth-child(2){animation-delay:.15s}
.bs-dots i:nth-child(3){animation-delay:.3s}
@keyframes bsDot{0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}
@keyframes bootspin{to{transform:rotate(360deg)}}
#bootSplash{padding:20px}
.fs-scr{z-index:95000;overflow-y:auto;padding:24px 20px;justify-content:flex-start;direction:rtl;font-family:'Cairo',system-ui,sans-serif;animation:fsIn .3s ease;transition:opacity .25s}
.fs-in{margin:auto 0;width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.bs-msg{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:4px;text-align:center}
.bs-msg:empty{display:none}
.bs-t{font-size:17px;font-weight:900}
.bs-t.r{color:#fca5a5}.bs-t.a{color:#fde68a}
.bs-p{margin:0;font-size:13px;line-height:1.85;opacity:.85;font-weight:600;word-break:break-word}
.bs-w{width:100%;padding:10px 12px;border-radius:12px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);font-size:12.5px;font-weight:800;color:#fca5a5}
.bs-box{width:100%;text-align:right;padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.bs-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.35);font-size:12px;font-weight:800;color:#c7d2fe}
.bs-b{width:100%;padding:14px;border:0;border-radius:15px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:900;color:#fff;background:linear-gradient(135deg,#22d3ee,#6366f1 55%,#d946ef);box-shadow:0 12px 26px rgba(99,102,241,.4);transition:transform .15s}
.bs-b:active,.bs-g:active{transform:scale(.97)}
.bs-g{width:100%;padding:11px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#e2e8f0;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer}
.bs-row{display:flex;gap:8px;width:100%}
.bs-row .bs-g{width:auto;padding:0 18px}
.bs-note{margin:2px 0 0;font-size:11px;opacity:.6;line-height:1.7}
.bs-link{border:0;background:none;color:#c4b5fd;font-family:inherit;font-size:11.5px;font-weight:700;text-decoration:underline;cursor:pointer}
@keyframes fsIn{from{opacity:0}to{opacity:1}}

/* Users — modern */
/* ===== Users (modern) ===== */
.um-hero{position:relative;overflow:hidden;border-radius:28px;padding:20px 18px 18px;color:#fff;background:radial-gradient(110% 130% at 100% 0%,#6366f1 0%,transparent 50%),radial-gradient(100% 120% at 0% 100%,#14b8a6 0%,transparent 55%),linear-gradient(135deg,#0f172a,#1e1b4b);box-shadow:0 18px 40px rgba(30,27,75,.35);}
.um-hero::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;border:28px solid rgba(255,255,255,.05);top:-90px;left:-60px;}
.um-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.um-hero-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;opacity:.85}
.um-hero-label svg{width:15px;height:15px;stroke-width:2.2}
.um-hero-title{font-size:30px;font-weight:900;margin-top:4px;letter-spacing:-.3px}
.um-hero-title small{font-size:14px;font-weight:700;opacity:.75;margin-right:4px}
.um-add{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#22d3ee,#6366f1);padding:12px 16px;border-radius:15px;box-shadow:0 10px 22px rgba(34,211,238,.28);transition:.15s}
.um-add:active{transform:scale(.95)}
.um-hbtns{display:flex;align-items:center;gap:8px}
.um-blk{position:relative;width:44px;height:44px;border:0;border-radius:14px;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);transition:transform .15s}
.um-blk:active{transform:scale(.92)}
.um-blk svg{width:21px;height:21px;stroke-width:2.2}
.um-blk.on{background:linear-gradient(135deg,#f43f5e,#be123c);border-color:transparent;box-shadow:0 8px 18px rgba(225,29,72,.4)}
.um-blk em{position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:900;color:#be123c;background:#fff;box-shadow:0 3px 8px rgba(15,23,42,.25)}
.um-ban{position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#e11d48;border:2px solid var(--card);z-index:2}
.um-ban svg{width:11px;height:11px;stroke-width:2.6}
.ub-row{display:flex;align-items:center;gap:11px;padding:11px;margin-bottom:8px;border-radius:16px;background:var(--card2);border:1px solid var(--line)}
.ub-av{position:relative;width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.ub-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px}
.ub-av i{position:absolute;bottom:-4px;left:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#e11d48;border:2px solid var(--card2)}
.ub-av i svg{width:11px;height:11px;stroke-width:2.6}
.ub-i{flex:1;min-width:0}
.ub-i b{display:block;font-size:13.5px;font-weight:900}
.ub-i small{display:block;font-size:11.5px;font-weight:700;color:var(--muted)}
.ub-i em{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:800;color:#e11d48}
.ub-un{flex:none;padding:8px 11px;border:0;border-radius:11px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:900;color:#16a34a;background:rgba(34,197,94,.13)}
.ub-empty{text-align:center;padding:24px 10px}
.ub-empty span{width:60px;height:60px;margin:0 auto 10px;border-radius:20px;display:grid;place-items:center;color:#16a34a;background:rgba(34,197,94,.12)}
.ub-empty span svg{width:28px;height:28px;stroke-width:2}
.ub-empty b{display:block;font-size:15px;font-weight:900}
.ub-empty small{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--muted);line-height:1.7}
.um-add svg{width:17px;height:17px}
.um-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;position:relative;z-index:1}
.um-stat{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:11px 8px;text-align:right;display:flex;flex-direction:column;gap:2px}
.um-stat i{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;margin-bottom:6px;font-style:normal}
.um-stat i svg{width:15px;height:15px;stroke-width:2.3}
.um-stat b{display:block;font-size:20px;font-weight:900;line-height:1.1}
.um-stat span{font-size:10.5px;font-weight:700;opacity:.75}
.um-list{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.um-card{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 4px 18px rgba(15,23,42,.05);cursor:pointer;transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden}
.um-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.09)}
.um-card:active{transform:scale(.985)}
.um-av{position:relative;width:54px;height:54px;border-radius:18px;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:900;font-size:20px;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 8px 18px rgba(99,102,241,.3)}
.um-av.super{background:linear-gradient(135deg,#f59e0b,#f43f5e);box-shadow:0 8px 18px rgba(244,63,94,.28)}
.um-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:18px}
.um-dot{position:absolute;bottom:-2px;left:-2px;width:14px;height:14px;border-radius:50%;border:3px solid var(--card);background:#94a3b8}
.um-dot.on{background:#22c55e}
.um-main{flex:1;min-width:0}
.um-top{display:flex;align-items:center;gap:6px}
.um-name{font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-me{font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:linear-gradient(135deg,#22d3ee,#6366f1);color:#fff;flex:0 0 auto}
.um-handle{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px;direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.um-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--card2);color:var(--muted)}
.um-chip svg{width:12px;height:12px;stroke-width:2.3;flex:none}
.um-chip.ip{direction:ltr;background:rgba(99,102,241,.1);color:#6366f1}
.um-chip.time{background:rgba(34,197,94,.11);color:#16a34a}
[data-theme="dark"] .um-chip.ip{color:#a5b4fc}
[data-theme="dark"] .um-chip.time{color:#4ade80}
.um-role{font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:999px;flex:0 0 auto}
.um-role.super{background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(244,63,94,.14));color:#ea580c}
.um-role.manager{background:rgba(99,102,241,.12);color:#6366f1}
.um-role.worker{background:rgba(16,185,129,.13);color:#059669}
.um-av.worker{background:linear-gradient(135deg,#10b981,#0d9488);box-shadow:0 8px 18px rgba(16,185,129,.28)}
.user-avatar.worker{background:linear-gradient(135deg,#10b981,#0d9488)}
[data-theme="dark"] .um-role.super{color:#fbbf24}
[data-theme="dark"] .um-role.manager{color:#a5b4fc}

.oiu-thumb{position:relative}
.oiu-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:18px;background:rgba(0,0,0,.25);border-radius:inherit;pointer-events:none}
.inv-sheet{background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:16px}
.inv-company{text-align:center;font-size:17px;font-weight:800;padding-bottom:10px;border-bottom:2px solid var(--line)}
.inv-rows{padding-top:12px}
.inv-row{font-size:13px;font-weight:700;line-height:1.8;margin-bottom:14px}
/* فاتورة الزبون: عناصر كل طلب في جدول صغير مرتب (المنتج | العدد | المبلغ) */
.inv-oh{font-weight:900}
.inv-items{margin-top:6px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.inv-it{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:7px 12px;font-size:12.5px;line-height:1.5}
.inv-it:nth-child(even){background:var(--card2)}
.inv-it span{min-width:0;overflow-wrap:anywhere}
.inv-it em{font-style:normal;color:var(--muted);white-space:nowrap}
.inv-it b{white-space:nowrap;font-weight:900}
.inv-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--card);border:1.5px solid var(--line)}
.inv-total span{font-size:12.5px;font-weight:700;color:var(--muted)}
.inv-total b{font-size:19px;font-weight:800}

.detail-actions.mini{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.mini-act{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:transparent;cursor:pointer;font-family:inherit;padding:0;width:58px;color:var(--muted)}
.mini-act svg{width:40px;height:40px;padding:10px;border-radius:14px;border:1.5px solid var(--line);background:var(--card2);transition:.2s}
.mini-act span{font-size:10px;font-weight:700;white-space:nowrap}
.mini-act:active svg{transform:scale(.92)}
.mini-act.working svg{color:#10b981;border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.mini-act.working.active svg{background:linear-gradient(135deg,#10b981,#059669);border-color:transparent;color:#fff}
.mini-act.done svg{color:#059669;border-color:rgba(5,150,105,.35);background:rgba(5,150,105,.08)}
.mini-act.done.active svg{background:linear-gradient(135deg,#059669,#047857);border-color:transparent;color:#fff}
.mini-act.share svg{color:#3b82f6;border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08)}
.mini-act.edit svg{color:#f59e0b;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.mini-act.close svg{color:#ef4444;border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.07)}
.mini-act.pdf svg{color:#dc2626;border-color:rgba(220,38,38,.3);background:rgba(220,38,38,.07)}
.mini-act.pdf.busy{opacity:.55;pointer-events:none}
.mini-act.print svg{color:#64748b;border-color:rgba(100,116,139,.35);background:rgba(100,116,139,.08)}

/* ============ فاتورة الطباعة (A4 واحدة، نفس تصميم مجلة hadith) ============ */
/* مخفية على الشاشة؛ تظهر في الطباعة، أو في .inv-pdf (نسخة خارج الشاشة تُصوَّر لملف PDF) */
.invoice{display:none;flex-direction:column;min-height:270mm;font-family:Cairo,sans-serif;font-size:12px;line-height:1.5;color:#111;background:#fff;direction:rtl;text-align:right;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.invoice.inv-pdf{display:flex;position:fixed;top:0;left:-10000px;width:794px;min-height:1123px;padding:45px;box-sizing:border-box}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important;color:#111!important}
  body>*:not(.invoice){display:none!important}
  .invoice{display:flex!important}
}
  .invoice *{box-shadow:none!important}
  .invoice .inv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:12px;border-bottom:3px solid var(--primary);margin-bottom:12px}
  .invoice .inv-brand{display:flex;align-items:center;gap:12px}
  .invoice .inv-brand img{width:60px;height:60px;object-fit:contain;border-radius:50%}
  .invoice .inv-brand h2{margin:0;font-size:20px;font-weight:900}
  .invoice .inv-brand p{margin:2px 0 0;color:#444;font-size:12.5px;font-weight:800}
  .invoice .inv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .invoice .inv-no{display:inline-block;padding:2px 16px;border-radius:10px;background:var(--primary)!important;color:#fff!important;font-size:20px;font-weight:900}
  .invoice .inv-date{font-size:13px;font-weight:800;color:#333}
  .invoice .inv-cust{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin-bottom:12px;padding:9px 13px;border-radius:10px;background:#f4f6fb!important;border:1px solid #dde1ec;font-size:12.5px}
  .invoice .inv-cust span{color:var(--primary);font-weight:900}
  .invoice .inv-cust b{font-size:14px}
  .invoice .inv-cust i{font-style:normal;color:#444}
  .invoice .inv-items{width:100%;border-collapse:collapse;border-radius:10px;overflow:hidden}
  .invoice .inv-items th{background:var(--primary)!important;color:#fff!important;padding:7px 9px;font-size:11.5px;text-align:start}
  .invoice .inv-items td{padding:6px 9px;border-bottom:1px solid #e1e4eb}
  .invoice .inv-items tbody tr:nth-child(even) td{background:#f7f8fb!important}
  .invoice .inv-items th:first-child,.invoice .inv-items td:first-child{width:28px}
  .invoice .inv-items tr{break-inside:avoid}
  .invoice .inv-end{margin-top:auto;break-inside:avoid}
  .invoice .inv-bottom{display:flex;justify-content:flex-end;margin-top:14px}
  .invoice .inv-tot{width:300px;border-collapse:collapse;border:1px solid #d5d9e2}
  .invoice .inv-tot td{padding:6px 11px;border-bottom:1px solid #e6e8ee}
  .invoice .inv-tot td:last-child{text-align:end;font-weight:800}
  .invoice .inv-tot tr.due td{background:var(--primary)!important;color:#fff!important;font-size:14px;font-weight:900;border:0}
  .invoice .inv-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;margin-top:30px;text-align:center}
  .invoice .inv-foot p{margin:0;font-weight:800;color:var(--primary)}
  .invoice .inv-sign{border-top:1px solid #777;padding-top:4px;color:#555;font-size:11px}
  .invoice.dense{font-size:11px;line-height:1.35}
  .invoice.dense .inv-items td{padding:3px 9px}
  .invoice.dense .inv-foot{margin-top:18px}
  .invoice.dense2{font-size:10px}
  .invoice.dense2 .inv-items td{padding:2px 8px}
.mini-act.add svg{color:#6366f1;border-color:rgba(99,102,241,.35);background:rgba(99,102,241,.08)}
.mini-act.pay svg{color:#10b981;border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}
.mini-act.del svg{color:#ef4444;border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.07)}
.mini-act.copy svg{color:#6366f1;border-color:rgba(99,102,241,.35);background:rgba(99,102,241,.08)}
.mini-act.wa svg{color:#16a34a;border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.co-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.co-act{width:36px;height:36px;border-radius:12px;border:1.5px solid;display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .15s}
.co-act:active{transform:scale(.9)}
.co-act svg{width:18px;height:18px}
.co-act.pay{color:#16a34a;border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.pay-rest{width:100%;display:flex;align-items:center;gap:8px;margin:-2px 0 14px;padding:11px 14px;border:0;border-radius:14px;cursor:pointer;font-family:inherit;color:#fff;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 18px rgba(16,185,129,.28);transition:transform .15s}
.pay-rest:active{transform:scale(.97)}
.pay-rest svg{width:20px;height:20px}
.pay-rest span{flex:1;text-align:right;font-size:13.5px;font-weight:800}
.pay-rest b{font-size:14px;font-weight:900;direction:ltr}
.pay-owed{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 13px;margin-bottom:14px;border-radius:14px;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.2)}
.pay-owed span{font-size:12px;font-weight:800;color:var(--muted)}
.pay-owed b{flex:1;font-size:14px;font-weight:900;color:#e11d48}
.pay-owed button{border:0;border-radius:999px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;color:#fff;background:linear-gradient(135deg,#10b981,#059669)}
.co-act.inv{color:#3b82f6;border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08)}
.co-act.edit{color:#f59e0b;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.co-act.del{color:#ef4444;border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.07)}
.inv-block{padding:8px 0;border-bottom:1px dashed var(--line)}
.inv-kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0}
.inv-kv span{color:var(--muted);font-weight:700}
.inv-kv b{font-weight:800;text-align:left}
.inv-sub{font-size:13px;font-weight:900;margin:10px 0 4px}
.inv-foot{border-bottom:0;border-top:2px solid var(--line);margin-top:6px}
.inv-foot .inv-kv:first-child b{font-size:15px}
.lvl-box{background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.25);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.lvl-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.lvl-role{font-size:14px;font-weight:900;color:#7c3aed}
[data-theme="dark"] .lvl-role{color:#c4b5fd}
.lvl-count{font-size:11px;font-weight:800;color:var(--muted)}
.lvl-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.lvl-chip{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.lvl-chip.none{color:#ef4444}

/* ===== إضافات نسخة PHP (روابط بدل أزرار، وطبقات مخفية افتراضياً) ===== */
a.tab,a.tab-add,a.menu-tile,a.notif-item,a.btn,a.oc7-ib,a.oc7-hb,a.mini-act{text-decoration:none}
a.tab{display:flex;align-items:center;justify-content:center;flex-direction:column;color:inherit}
a.tab-add{display:grid;place-items:center}
#menuOverlay,#notifPanelOverlay,#qaOv,#qaMenu{display:none}
#menuOverlay.show,#notifPanelOverlay.show{display:flex}
form.inl{display:contents}
.hd-note{font-size:12px;color:var(--muted);margin:8px 0}
.overlay.static{opacity:1;pointer-events:auto}
.overlay.static .modal{transform:none;opacity:1}

/* ===== نسخ a من تنسيقات button (روابط بدل أزرار) ===== */
.qa-menu a{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border:0;border-radius:15px;background:none;color:var(--text);font-family:inherit;font-size:14px;font-weight:900;text-align:right;cursor:pointer}
.qa-menu a:hover{background:var(--card2)}
.qa-menu a span{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--c)}
.qa-menu a span svg{width:20px;height:20px;stroke-width:2.3}
.qa-menu a small{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.umap-days{display:flex;gap:6px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px;scrollbar-width:none}
a.um-chip{border:0;font-family:inherit;cursor:pointer}
a.um-chip.ip{box-shadow:inset 0 0 0 1.5px rgba(99,102,241,.35)}
.loc-card a{flex:none;border:0;border-radius:12px;padding:9px 12px;font-family:inherit;font-size:12px;font-weight:900;color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#d946ef)}
.sx-tabs a{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border:0;border-radius:14px;background:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:900;cursor:pointer}
.sx-tabs a svg{width:17px;height:17px;stroke-width:2.2}
.sx-tabs a i{font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:999px;background:var(--card);color:var(--muted)}
.sx-tabs a.on{color:var(--text);background:var(--card);box-shadow:0 4px 14px rgba(15,23,42,.08)}
.sx-tabs a.on svg{color:#6366f1}
.sx-tabs a.on i{background:rgba(99,102,241,.12);color:#6366f1}
.sx-chips a{flex:none;display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--text);font-family:inherit;font-size:12px;font-weight:800;cursor:pointer}
.sx-chips a i{font-style:normal;font-size:10.5px;color:var(--muted)}
.sx-chips a.on{border-color:transparent;color:#fff;background:linear-gradient(135deg,#0f172a,#334155)}
.sx-chips a.on.login{background:linear-gradient(135deg,#10b981,#059669)}
.sx-chips a.on.logout{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.sx-chips a.on.ip{background:linear-gradient(135deg,#3b82f6,#6366f1)}
.sx-chips a.on i{color:rgba(255,255,255,.8)}
.sx-err a{border:0;border-radius:9px;padding:6px 12px;font-family:inherit;font-weight:900;color:#fff;background:#e11d48;cursor:pointer}
.sx-chips a.on.warn{background:linear-gradient(135deg,#f59e0b,#d97706)}
.sx-tabs a{font-size:12.5px;gap:6px;padding:10px 4px}
.sx-tabs a i.new{background:#f43f5e;color:#fff}
.upk-list a{width:100%;display:flex;align-items:center;gap:11px;padding:8px 10px;border:0;border-radius:13px;background:none;color:var(--text);font-family:inherit;text-align:right;cursor:pointer}
.upk-list a:hover{background:var(--card2)}
.upk-list a.on{background:rgba(99,102,241,.1)}
.upk-list a.on .upk-t b{color:#6366f1}
/* 🔴 New devices counter (menu a + Sessions tile) */
.menu-btn{position:relative}
.wk-nav a{width:32px;height:32px;border:0;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--text);background:var(--card2)}
.wk-nav a svg{width:16px;height:16px;stroke-width:2.6;transform:rotate(180deg)}
.wk-nav a.nx svg{transform:none}
a.wk-day:active{transform:scale(.92)}
.wk-seg a{flex:1;padding:9px 6px;border:0;border-radius:11px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:900;color:var(--muted);background:none}
.wk-seg a.on{color:#fff;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px rgba(16,185,129,.3)}
a.ph-stat{cursor:pointer;transition:transform .15s,background .15s}
a.ph-stat:active{transform:scale(.95)}
a.ph-stat:hover{background:rgba(255,255,255,.16)}
/* Payment due date: calendar a + days-left chip on the supplier card */
.due-btn{flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.18s;padding:0}
.perm-group-all a{border:1px solid var(--line);background:var(--card);color:var(--muted);font-family:inherit;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;cursor:pointer}
.perm-group-all a:first-child{color:#7c3aed;border-color:rgba(124,58,237,.3)}
.pay-owed a{border:0;border-radius:999px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;color:#fff;background:linear-gradient(135deg,#10b981,#059669)}
:where(.app,.overlay,.menu-overlay,.notif-panel-overlay,.qa-menu,.tabbar) a{color:inherit;text-decoration:none}
a.sx-archbtn,a.sx-back,a.su-h,a.upk-btn,a.sx-mh,a.wk-w,a.wkh-x,a.wkh-btn,a.wkh-m,a.settings-card,a.sp-act,a.um-blk,a.um-add,a.wk-arch,a.wk-now,a.wk-add,a.wmv-b,a.wmv-more,a.cf-sort{box-sizing:border-box}
a.sx-chips *,a.upk-btn{font-family:inherit}

/* ===== شاشة «انقطع الاتصال» (كاملة، متحركة) ===== */
.net-off{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 35%,#312e81 0%,#0f172a 58%,#020617 100%);color:#e2e8f0;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;font-family:"Cairo",system-ui,sans-serif}
.net-off.show{opacity:1;visibility:visible}
.no-box{text-align:center;max-width:360px;transform:translateY(18px) scale(.97);transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.net-off.show .no-box{transform:none}
.no-ic{position:relative;width:132px;height:132px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;color:#c4b5fd;background:linear-gradient(145deg,rgba(139,92,246,.28),rgba(236,72,153,.16));box-shadow:inset 0 0 0 1px rgba(196,181,253,.28),0 22px 60px rgba(139,92,246,.38);animation:noFloat 3.2s ease-in-out infinite}
.no-ic svg{width:68px;height:68px;position:relative}
.no-w1,.no-w2,.no-w3{animation:noWave 1.8s ease-in-out infinite}
.no-w2{animation-delay:.25s}.no-w3{animation-delay:.5s}
.no-x{stroke:#fb7185;stroke-dasharray:63;stroke-dashoffset:63;animation:noX .7s .45s ease forwards}
.no-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(196,181,253,.35);animation:noRing 2.6s ease-out infinite}
.no-ring.r2{animation-delay:1.3s}
.no-box h2{margin:0 0 8px;font-size:27px;font-weight:900;letter-spacing:-.3px;background:linear-gradient(135deg,#fff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.no-box p{margin:0;color:#94a3b8;font-size:14px;font-weight:600;line-height:1.9}
.no-dots{display:flex;justify-content:center;gap:7px;margin:20px 0 22px}
.no-dots i{width:8px;height:8px;border-radius:50%;background:#a78bfa;animation:noDot 1.2s ease-in-out infinite}
.no-dots i:nth-child(2){animation-delay:.15s}.no-dots i:nth-child(3){animation-delay:.3s}
.no-btn{border:0;border-radius:999px;padding:11px 26px;font:800 14px "Cairo",system-ui,sans-serif;color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);box-shadow:0 12px 28px -10px #a855f7;transition:transform .2s}
.no-btn:active{transform:scale(.95)}.no-btn:disabled{opacity:.7}
@keyframes noFloat{50%{transform:translateY(-8px)}}
@keyframes noWave{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes noX{to{stroke-dashoffset:0}}
@keyframes noRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes noDot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-7px);opacity:1}}
@media (prefers-reduced-motion:reduce){.no-ic,.no-w1,.no-w2,.no-w3,.no-ring,.no-dots i{animation:none!important}.no-x{stroke-dashoffset:0;animation:none}}

/* كشف حساب العامل داخل «سجل الاستلام» */
.wk-acct{margin:4px 0 12px;padding:10px 12px;border-radius:16px;background:var(--card2);border:1px solid var(--line)}
.wa-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;font-weight:700;color:var(--muted)}
.wa-r b{color:var(--text);font-size:14px;font-weight:900;white-space:nowrap}
.wa-r.plus b{color:#16a34a}.wa-r.minus b{color:#e11d48}
.wa-r.tot{margin-top:4px;padding-top:10px;border-top:1.5px dashed var(--line);color:var(--text)}
.wa-r.tot b{font-size:17px;background:linear-gradient(135deg,#4f46e5,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.wa-r.tot.cr b{background:linear-gradient(135deg,#059669,#10b981);-webkit-background-clip:text;background-clip:text}
.wk-pay.mv.withdraw .wk-pi b{color:#e11d48}.wk-pay.mv.bonus .wk-pi b{color:#16a34a}
.wk-pt.withdraw{background:rgba(225,29,72,.12);color:#e11d48}.wk-pt.bonus{background:rgba(22,163,74,.12);color:#16a34a}
/* سجلات الحساب: قائمة منسدلة صغيرة داخل «سجل الاستلام» */
.wk-recs{margin-top:10px;border-radius:16px;border:1px solid var(--line);background:var(--card);overflow:hidden;transition:box-shadow .2s}
.wk-recs[open]{box-shadow:0 10px 26px -14px rgba(79,70,229,.45)}
.wk-recs>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wk-recs>summary::-webkit-details-marker{display:none}
.wr-ic{width:32px;height:32px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);box-shadow:0 6px 14px -6px #7c3aed}
.wr-ic svg{width:16px;height:16px;stroke-width:2.2}
.wr-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.wr-tx b{font-size:13px;font-weight:900;color:var(--text)}.wr-tx small{font-size:11px;font-weight:700;color:var(--muted)}
.wr-chev{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--card2);color:var(--muted);transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}
.wr-chev svg{width:14px;height:14px;transform:rotate(-90deg)}
.wk-recs[open] .wr-chev{transform:rotate(180deg);background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff}
.wk-recs>.wk-pays{padding:0 8px 8px;max-height:340px;overflow-y:auto;animation:accIn .3s cubic-bezier(.2,.9,.3,1)}
.wmv-recs{margin:8px 0}.wr-ic.mv{background:linear-gradient(135deg,#f43f5e,#f59e0b);box-shadow:0 6px 14px -6px #e11d48}.wmv-recs .wmv-r:last-child{border-bottom:0}

/* ======================================================================
   الحاسوب (1024px فما فوق): شريط علوي زجاجي بدل الشريط السفلي والقائمة.
   كل ما تحت هذا داخل min-width:1024px → الهاتف لا يتغيّر إطلاقاً.
   ====================================================================== */
.dk-top,.dk-add-t{display:none}
@media (min-width:1024px){
  .dk-top{display:block;position:sticky;top:0;z-index:70;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line);view-transition-name:hd-desk}
  .dk-in{max-width:1320px;margin:auto;height:70px;padding:0 28px;display:flex;align-items:center;gap:16px}
  .dk-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:15px;color:var(--text);text-decoration:none;flex:none;max-width:220px}
  .dk-logo img{width:40px;height:40px;border-radius:12px;object-fit:contain;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.08)}
  .dk-logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dk-pills{position:relative;display:flex;gap:2px;margin:0 auto;padding:5px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 16px rgba(15,23,42,.04);min-width:0;overflow-x:auto;scrollbar-width:none}
  .dk-pill{position:relative;z-index:1;display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:13px;font-weight:800;font-size:13.5px;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .25s}
  .dk-pill svg{width:17px;height:17px;flex:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .dk-pill:hover{color:var(--text)}
  .dk-pill:hover svg{transform:scale(1.15) rotate(-6deg)}
  .dk-pill.on{color:#fff}
  .dk-blob{position:absolute;top:5px;height:calc(100% - 10px);width:0;border-radius:13px;background:var(--dk-c,linear-gradient(135deg,#6366f1,#8b5cf6));box-shadow:0 8px 18px rgba(99,102,241,.35);transition:left .45s cubic-bezier(.34,1.3,.64,1),width .45s cubic-bezier(.34,1.3,.64,1),background .4s}
  .dk-acts{display:flex;align-items:center;gap:8px;flex:none}
  .dk-acts .notif-btn,.dk-acts .logout-btn{width:42px;height:42px;border-radius:13px;background:var(--card);border:1px solid var(--line);position:relative}
  /* زر ➕ داخل الشريط: كبسولة «إضافة» بلون الصفحة (نفس --fab-bg من app.js) */
  .dk-acts .tab-add{position:relative;left:auto;top:auto;transform:none;width:auto;height:42px;padding:0 16px 0 14px;border-radius:13px;gap:6px;display:flex;align-items:center;font:inherit;font-weight:900;font-size:13px;text-decoration:none}
  .dk-acts .tab-add::before,.dk-acts .tab-add::after{display:none}
  .dk-acts .tab-add svg{width:19px;height:19px}
  .dk-acts .tab-add::after{content:none}
  .dk-acts .tab-add .dk-add-t{display:inline}
  .dk-acts .tab-add:active{transform:scale(.95)}
  .dk-add-t{display:none}
  /* ما يخص الهاتف يختفي */
  .tabbar,.menu-btn{display:none!important}
  .top-user-bar{background:transparent;box-shadow:none;border:0;padding-inline:4px}
  .top-user-bar .tub-av{display:none}
  /* المحتوى بعرض الشاشة */
  .app{max-width:1320px}
  main{padding:24px 28px 48px}
  .orders-grid,.orders-grid.oc7-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
  .cc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
  .oc7,.cc{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .2s}
  .oc7:hover,.cc:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,23,42,.1)}
  /* قائمة الإضافة السريعة تنزل من الشريط العلوي */
  .qa-menu{top:78px;bottom:auto;left:28px;transform:translateY(-8px) scale(.97)}
  .qa-menu.show{transform:none}
  /* النوافذ المنبثقة في وسط الشاشة بدل الصعود من الأسفل */
  .overlay{align-items:center;padding:24px}
  .modal{max-width:760px;max-height:calc(100vh - 64px);border-radius:26px;padding-bottom:10px;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:scale(.96) translateY(12px)}
  .overlay.show .modal{transform:none}
}

/* الدينار معروض بالدولار: الرقم بالدينار صغيراً تحته */
.cash{display:inline-flex;flex-direction:column;line-height:1.15;vertical-align:middle}
.cash small{font-size:.6em;font-weight:700;opacity:.7;white-space:nowrap}
.tub-rate{font-size:10.5px;font-weight:800;color:var(--green);text-decoration:none;white-space:nowrap}
.usd-hint{font-size:12px;font-weight:800;color:var(--green);text-align:center;margin-top:6px}

/* ===== النوافذ المنبثقة: تظهر في وسط الشاشة بتأثير تكبير ناعم + ضباب (والإغلاق داخل نفس الصفحة عبر app.js) ===== */
.overlay{align-items:center;padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 80% at 50% 40%,rgba(79,70,229,.22),rgba(15,23,42,.62));-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
.overlay.show{animation:hdOvIn .3s ease both}
.overlay .modal,.overlay.show .modal{position:relative;transform:none;border-radius:28px;max-width:560px;
  max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding-bottom:14px;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  box-shadow:0 30px 80px -20px rgba(15,23,42,.55),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.6);
  animation:hdMdIn .55s cubic-bezier(.16,1.15,.3,1) both;overscroll-behavior:contain;transform-origin:50% 50%}
/* خط ملوّن متدرّج أعلى النافذة */
.overlay .modal::before{content:'';position:sticky;top:0;display:block;height:4px;z-index:3;background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899,#f59e0b);background-size:200% 100%;animation:hdBar 4s linear infinite}
.modal-head{padding:14px 16px 12px;background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);top:4px}
.modal-head h3{font-size:16px;font-weight:900}
.modal-head .icon-btn{width:34px;height:34px;border-radius:50%;background:var(--card2);color:var(--muted);transition:transform .25s,background .2s,color .2s}
.modal-head .icon-btn:hover,.modal-head .icon-btn:active{background:rgba(239,68,68,.12);color:var(--red);transform:rotate(90deg)}
.modal-body{padding:16px}
.modal-body>*{animation:hdItem .5s cubic-bezier(.2,.9,.3,1) both}
.modal-body>*:nth-child(2){animation-delay:.04s}.modal-body>*:nth-child(3){animation-delay:.08s}.modal-body>*:nth-child(4){animation-delay:.12s}
.modal-body>*:nth-child(5){animation-delay:.16s}.modal-body>*:nth-child(n+6){animation-delay:.2s}
.modal-foot{padding:6px 16px 4px;position:sticky;bottom:0;background:var(--card);z-index:2}
.modal-foot .btn{border-radius:14px;min-height:46px}
.modal .field input,.modal .field select,.modal .field textarea{border-radius:14px;transition:border-color .2s,box-shadow .2s}
.modal .field input:focus,.modal .field select:focus,.modal .field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 15%,transparent);outline:0}
[data-theme="dark"] .overlay .modal{box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.overlay.closing{animation:hdOvOut .26s ease forwards;pointer-events:none}
.overlay.closing .modal{animation:hdMdOut .26s cubic-bezier(.4,0,1,1) forwards}
@keyframes hdOvIn{from{opacity:0}to{opacity:1}}
@keyframes hdOvOut{to{opacity:0}}
@keyframes hdMdIn{0%{opacity:0;transform:translateY(24px) scale(.86);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes hdMdOut{to{opacity:0;transform:scale(.92);filter:blur(6px)}}
@keyframes hdItem{from{opacity:0;transform:translateY(10px)}}
@keyframes hdBar{to{background-position:200% 0}}
@media(min-width:760px){.overlay .modal,.overlay.show .modal{max-width:620px;max-height:calc(100vh - 64px)}}
@media (prefers-reduced-motion:reduce){.overlay,.overlay .modal,.modal-body>*{animation-duration:.01s!important;animation-delay:0s!important}}

/* ===== رأس صفحة الزبائن المضغوط ===== */
.cmh{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 6px 20px -10px rgba(79,70,229,.35);animation:cmhIn .4s cubic-bezier(.2,.9,.3,1) both}
.cmh-ic{width:40px;height:40px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 6px 14px -4px rgba(99,102,241,.6)}
.cmh-ic svg{width:20px;height:20px;stroke-width:2.2}
.cmh-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cmh-t b{font-size:15px;font-weight:900;color:var(--text)}
.cmh-t small{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmh-due{flex:none;display:flex;flex-direction:column;align-items:flex-end;padding:5px 10px;border-radius:13px;background:rgba(239,68,68,.08);line-height:1.2}
.cmh-due small{font-size:10px;font-weight:800;color:var(--muted)}
.cmh-due b{font-size:14px;font-weight:900;color:var(--red);direction:ltr}
.cmh-add{width:40px;height:40px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 14px -4px rgba(16,185,129,.6);transition:transform .2s}
.cmh-add:active{transform:scale(.92)}
.cmh-add svg{width:20px;height:20px;stroke-width:2.6}
@keyframes cmhIn{from{opacity:0;transform:translateY(-8px)}}
/* الرأس المضغوط ملوّن: تدرّج بنفسجي/وردي مع عناصر زجاجية */
.cmh{position:relative;overflow:hidden;border:0;color:#fff;background:linear-gradient(120deg,#4f46e5 0%,#7c3aed 45%,#db2777 100%);background-size:180% 180%;animation:cmhIn .4s cubic-bezier(.2,.9,.3,1) both,cmhBg 8s ease-in-out infinite alternate;box-shadow:0 12px 26px -12px rgba(124,58,237,.7)}
.cmh::before{content:'';position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);top:-60px;right:30%;pointer-events:none}
.cmh-ic{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cmh-t b{color:#fff}
.cmh-t small{color:rgba(255,255,255,.8)}
.cmh-due{background:rgba(255,255,255,.95);box-shadow:0 4px 12px -4px rgba(0,0,0,.25)}
.cmh-due small{color:#64748b}
.cmh-due b{color:#e11d48}
.cmh-due .cash small{color:#64748b;opacity:1}
.cmh-add{background:linear-gradient(135deg,#34d399,#059669);box-shadow:0 6px 14px -4px rgba(5,150,105,.7),inset 0 0 0 1px rgba(255,255,255,.3)}
@keyframes cmhBg{to{background-position:100% 100%}}

/* ===== تخفيف: بدون ضباب (blur) أو حركات لا نهائية — كانت تُثقل الهاتف ===== */
.overlay{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(15,23,42,.6)}
.modal-head{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--card)}
.overlay .modal::before{animation:none;background-size:100% 100%}
.overlay .modal,.overlay.show .modal{will-change:transform,opacity}
@keyframes hdMdIn{0%{opacity:0;transform:translateY(18px) scale(.92)}100%{opacity:1;transform:none}}
@keyframes hdMdOut{to{opacity:0;transform:scale(.94)}}
.cmh{animation:cmhIn .4s cubic-bezier(.2,.9,.3,1) both;background-size:100% 100%}
/* أثناء جلب النافذة: شريط تحميل رفيع أعلى الشاشة */
html.hd-loading{cursor:progress}
html.hd-loading body::after{content:'';position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:linear-gradient(90deg,#6366f1,#ec4899);transform-origin:right;animation:hdLoad 1s ease-out infinite}
@keyframes hdLoad{from{transform:scaleX(0)}to{transform:scaleX(1);opacity:.3}}

/* رأس صفحة الدخل المضغوط (أخضر) */
.cmh.inc{background:linear-gradient(120deg,#047857 0%,#059669 50%,#0d9488 100%);box-shadow:0 12px 26px -12px rgba(5,150,105,.7)}
.cmh.inc .cmh-t small{display:flex;gap:10px;white-space:nowrap}
.cmh.inc .cmh-t small .cash{display:inline;line-height:inherit}
.cmh.inc .cmh-t small .cash small{display:none}
.cmh-due.pos b{color:#059669}

/* ===== تصميم جديد للرأس المضغوط (الزبائن + الدخل): تدرّج متعدد الطبقات + نمط شبكي + لمعة عند الظهور ===== */
.cmh{--a:#4f46e5;--b:#7c3aed;--c:#db2777;--glow:rgba(124,58,237,.55);
  position:relative;isolation:isolate;overflow:hidden;gap:12px;min-height:68px;padding:10px 12px;border-radius:24px;border:0;color:#fff;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.28) 0%,transparent 45%),
    radial-gradient(90% 120% at 0% 100%,var(--c) 0%,transparent 60%),
    linear-gradient(125deg,var(--a) 0%,var(--b) 100%);
  box-shadow:0 14px 30px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.08);
  animation:cmhIn .45s cubic-bezier(.2,.9,.3,1) both}
.cmh.inc{--a:#065f46;--b:#059669;--c:#14b8a6;--glow:rgba(5,150,105,.55);background:
    radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.28) 0%,transparent 45%),
    radial-gradient(90% 120% at 0% 100%,var(--c) 0%,transparent 60%),
    linear-gradient(125deg,var(--a) 0%,var(--b) 100%)}
/* نمط نقاط خفيف */
.cmh::before{content:'';position:absolute;inset:0;z-index:-1;width:auto;height:auto;border-radius:0;top:0;right:0;
  background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px) 0 0/14px 14px;
  -webkit-mask:linear-gradient(90deg,#000,transparent 70%);mask:linear-gradient(90deg,#000,transparent 70%)}
/* لمعة تمر مرة واحدة عند فتح الصفحة */
.cmh::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-50%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:cmhShine 1.1s .35s ease-out both}
.cmh-ic{width:44px;height:44px;border-radius:15px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 6px 14px -6px rgba(0,0,0,.35)}
.cmh-ic svg{width:21px;height:21px}
.cmh-t b{font-size:17px;letter-spacing:-.2px;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.cmh-t small{font-size:11.5px;color:rgba(255,255,255,.85);margin-top:1px}
.cmh-due{padding:6px 12px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 8px 18px -8px rgba(0,0,0,.35)}
.cmh-due small{font-size:10px;letter-spacing:.2px}
.cmh-due b{font-size:15px}
.cmh-add{width:44px;height:44px;border-radius:15px;background:rgba(255,255,255,.96);color:var(--b);box-shadow:0 8px 18px -8px rgba(0,0,0,.35)}
.cmh-add:hover{transform:rotate(90deg)}
[data-theme="dark"] .cmh-due,[data-theme="dark"] .cmh-add{background:rgba(15,23,42,.85)}
[data-theme="dark"] .cmh-add{color:#fff}
@keyframes cmhShine{to{left:120%}}
@media (prefers-reduced-motion:reduce){.cmh,.cmh::after{animation:none}}

/* «المطلوب» في هيدر الزبائن: بطاقة زجاجية بمؤشر أحمر نابض */
.cmh:not(.inc) .cmh-due{position:relative;align-items:flex-start;gap:1px;padding:7px 12px 7px 14px;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -10px rgba(0,0,0,.45)}
.cmh:not(.inc) .cmh-due small{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.85);font-size:10px;font-weight:800}
.cmh:not(.inc) .cmh-due>small::before{content:'';width:7px;height:7px;border-radius:50%;background:#fb7185;box-shadow:0 0 0 0 rgba(251,113,133,.7);animation:dueDot 2s ease-out 3}
.cmh:not(.inc) .cmh-due b{color:#fff;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.cmh:not(.inc) .cmh-due b .cash small{display:block;color:rgba(255,255,255,.75);font-size:.62em;opacity:1}
.cmh:not(.inc) .cmh-due b .cash small::before{display:none}
[data-theme="dark"] .cmh:not(.inc) .cmh-due{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}
@keyframes dueDot{70%{box-shadow:0 0 0 6px rgba(251,113,133,0)}100%{box-shadow:0 0 0 0 rgba(251,113,133,0)}}

/* ===== قائمة زر ➕: بطاقة تصعد من الزر الدائري، بسهم نحو الزر وبلاطات بأيقونات دائرية ===== */
.qa-ov{background:rgba(15,23,42,.45);-webkit-backdrop-filter:none;backdrop-filter:none}
.qa-menu{bottom:calc(98px + env(safe-area-inset-bottom));width:min(360px,calc(100% - 24px));padding:14px;border-radius:30px;border:1px solid var(--line);
  background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 70%),var(--card);
  box-shadow:0 28px 60px -18px rgba(15,23,42,.5),0 0 0 1px rgba(255,255,255,.04);
  transform:translate(-50%,40px) scale(.6);transform-origin:50% calc(100% + 40px);opacity:0;
  transition:transform .42s cubic-bezier(.2,1.2,.3,1),opacity .2s}
.qa-menu.show{transform:translate(-50%,0) scale(1);opacity:1}
/* سهم صغير يشير إلى زر ➕ */
.qa-menu::after{content:'';position:absolute;left:50%;bottom:-8px;width:18px;height:18px;margin-left:-9px;background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 5px 0;transform:rotate(45deg)}
.qa-h{display:flex;flex-direction:column;align-items:center;gap:1px;margin:2px 0 12px}
.qa-h b{font-size:15px;font-weight:900;color:var(--text)}
.qa-h small{font-size:11px;font-weight:700;color:var(--muted)}
.qa-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qa-menu.one .qa-g{grid-template-columns:1fr}
.qa-menu .qa-i{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border-radius:22px;background:var(--card2);border:1px solid var(--line);
  color:var(--text);text-align:center;font-weight:900;transition:transform .2s,box-shadow .2s,border-color .2s}
.qa-menu .qa-i::before{content:'';position:absolute;inset:0;background:var(--g);opacity:0;transition:opacity .2s}
.qa-menu .qa-i:hover,.qa-menu .qa-i:active{transform:translateY(-3px);border-color:transparent;box-shadow:0 12px 24px -12px rgba(15,23,42,.45)}
.qa-menu .qa-i:hover::before,.qa-menu .qa-i:active::before{opacity:.1}
.qa-menu .qa-ic{position:relative;width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--g);
  box-shadow:0 10px 20px -8px rgba(15,23,42,.55),inset 0 1px 0 rgba(255,255,255,.35),0 0 0 4px color-mix(in srgb,var(--card) 70%,transparent)}
.qa-menu .qa-ic svg{width:23px;height:23px;stroke-width:2.4}
.qa-menu .qa-i b{position:relative;font-size:14px}
.qa-menu .qa-i small{position:relative;font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.3}
.qa-menu.show .qa-i{animation:qaTile .45s cubic-bezier(.2,1.1,.3,1) both}
.qa-menu.show .qa-i:nth-child(2){animation-delay:.05s}.qa-menu.show .qa-i:nth-child(3){animation-delay:.1s}.qa-menu.show .qa-i:nth-child(4){animation-delay:.15s}.qa-menu.show .qa-i:nth-child(n+5){animation-delay:.2s}
@keyframes qaTile{from{opacity:0;transform:translateY(14px) scale(.85)}}
@media (min-width:1024px){.qa-menu{transform-origin:0 0}.qa-menu::after{display:none}}
@media (prefers-reduced-motion:reduce){.qa-menu.show .qa-i{animation:none}}
.qa-menu .qa-i{padding:11px 8px 10px;gap:4px}
.qa-menu .qa-ic{width:46px;height:46px}

/* ===== قائمة زر ➕ (نسخة 2): صفوف كما كانت + أسفل دائري يندمج مع الزر ===== */
.qa-menu{padding:10px;border-radius:28px;overflow:visible;bottom:calc(104px + env(safe-area-inset-bottom));
  background:var(--card);box-shadow:0 24px 50px -16px rgba(15,23,42,.5)}
/* انتفاخ دائري أسفل القائمة يحتضن زر ➕ فتبدو القائمة خارجة من الزر */
.qa-menu::after{content:'';position:absolute;left:50%;bottom:-34px;width:78px;height:78px;margin-left:-39px;border:0;border-radius:50%;transform:none;
  background:var(--card);box-shadow:0 14px 26px -14px rgba(15,23,42,.45);z-index:-1}
.qa-menu::before{content:'';position:absolute;left:50%;bottom:-6px;width:150px;height:30px;margin-left:-75px;z-index:-1;
  background:radial-gradient(circle at 0 100%,transparent 28px,var(--card) 29px) left/50% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 28px,var(--card) 29px) right/50% 100% no-repeat}
.qa-g{display:flex;flex-direction:column;gap:4px}
.qa-menu .qa-i{flex-direction:row;align-items:center;gap:12px;padding:9px 10px;border-radius:18px;background:none;border:0;text-align:right}
.qa-menu .qa-i:hover,.qa-menu .qa-i:active{transform:none;box-shadow:none;background:var(--card2)}
.qa-menu .qa-i::before{display:none}
.qa-menu .qa-ic{width:42px;height:42px;box-shadow:0 8px 16px -8px rgba(15,23,42,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.qa-menu .qa-ic svg{width:20px;height:20px}
.qa-menu .qa-i div{display:flex;flex-direction:column;line-height:1.3}
.qa-menu .qa-i b{font-size:14px}
.qa-menu .qa-i small{font-size:11px}
.qa-menu.show .qa-i{animation:qaIn .38s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes qaIn{from{opacity:0;transform:translateY(10px)}}
@media (min-width:1024px){.qa-menu::after,.qa-menu::before{display:none}}
/* ضبط الاندماج: الانتفاخ يحيط بالزر تماماً، وزوايا مقعّرة تصل حافة القائمة بالدائرة */
.qa-menu{bottom:calc(88px + env(safe-area-inset-bottom))}
.qa-menu::after{width:68px;height:68px;margin-left:-34px;bottom:-55px;box-shadow:none}
.qa-menu::before{width:82px;height:14px;margin-left:-41px;bottom:-14px;
  background:radial-gradient(circle at 0 100%,transparent 13.5px,var(--card) 14px) left/50% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 13.5px,var(--card) 14px) right/50% 100% no-repeat}

/* ===== هيدر الديون: تأثير مائي متحرك (موجتان + فقاعات صاعدة) ===== */
.ph.ph-debt{isolation:isolate;padding-bottom:30px}
.ph.ph-debt>*{position:relative;z-index:2}
.ph.ph-debt::before,.ph.ph-debt::after{content:'';position:absolute;inset:auto auto 0 0;top:auto;right:auto;left:0;width:200%;height:64px;border:0;border-radius:0;filter:none;opacity:1;
  background-repeat:repeat-x;background-size:50% 100%;pointer-events:none;z-index:1;will-change:transform}
.ph.ph-debt::before{bottom:0;background-image:radial-gradient(60px 26px at 50% 100%,rgba(255,255,255,.16) 98%,transparent 100%);background-size:110px 64px;background-position:0 22px;
  animation:phWave 7s linear infinite}
.ph.ph-debt::after{bottom:-6px;height:56px;background-image:radial-gradient(75px 30px at 50% 100%,rgba(255,255,255,.12) 98%,transparent 100%);background-size:150px 56px;background-position:40px 20px;
  animation:phWave 11s linear infinite reverse}
/* فقاعات: طبقة خلفية بنقاط تصعد ببطء */
.ph.ph-debt .ph-top::before{content:'';position:absolute;inset:-20px -18px -120px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.35) 0 2.5px,transparent 3px) 12% 100%/60px 70px,
             radial-gradient(circle,rgba(255,255,255,.25) 0 1.8px,transparent 2.2px) 70% 100%/44px 56px,
             radial-gradient(circle,rgba(255,255,255,.2) 0 3.5px,transparent 4px) 40% 100%/90px 110px;
  -webkit-mask:linear-gradient(to top,#000 20%,transparent 85%);mask:linear-gradient(to top,#000 20%,transparent 85%);
  animation:phBubbles 9s linear infinite}
.ph.ph-debt .ph-top{position:relative}
/* لمعة سطح الماء */
.ph.ph-debt .ph-stats{position:relative}
@keyframes phWave{to{transform:translateX(-50%)}}
@keyframes phBubbles{from{background-position:12% 0,70% 0,40% 0}to{background-position:12% -140px,70% -112px,40% -220px}}
@media (prefers-reduced-motion:reduce){.ph.ph-debt::before,.ph.ph-debt::after,.ph.ph-debt .ph-top::before{animation:none}}

/* الموجة المرسومة بتدرّج: قاعدة ممتلئة أسفل الأقواس */
.ph.ph-debt::before{box-shadow:inset 0 -14px 0 rgba(255,255,255,.16)}
.ph.ph-debt::after{box-shadow:inset 0 -10px 0 rgba(255,255,255,.12)}
/* حركة الموجة بإزاحة الخلفية بمقدار عرض الموجة تماماً (بدون قفزة عند التكرار) */
.ph.ph-debt::before,.ph.ph-debt::after{width:100%;transform:none}
.ph.ph-debt::before{animation:phWave1 4s linear infinite}
.ph.ph-debt::after{animation:phWave2 6s linear infinite}
@keyframes phWave1{from{background-position:0 22px}to{background-position:110px 22px}}
@keyframes phWave2{from{background-position:40px 20px}to{background-position:-110px 20px}}

/* ===== نافذة الزبون: قائمة الطلبات المنسدلة + بطاقة الحساب ===== */
.cf-fold{margin-top:14px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 6px 18px -12px rgba(15,23,42,.35);overflow:hidden}
.cf-fold>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;-webkit-user-select:none}
.cf-fold>summary::-webkit-details-marker{display:none}
.cf-ic{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:18px;background:linear-gradient(135deg,#ede9fe,#e0e7ff)}
[data-theme="dark"] .cf-ic{background:rgba(99,102,241,.2)}
.cf-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cf-t b{font-size:14.5px;font-weight:900}
.cf-t small{font-size:11px;font-weight:700;color:var(--muted)}
.cf-sum{font-size:14px;font-weight:900;color:var(--red);direction:ltr}
.cf-arrow{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--card2);color:var(--muted);transition:transform .3s cubic-bezier(.2,.9,.3,1),background .2s,color .2s}
.cf-arrow svg{width:16px;height:16px}
.cf-fold[open]>summary .cf-arrow{transform:rotate(180deg);background:var(--primary);color:#fff}
.cf-fold[open]>summary{border-bottom:1px solid var(--line)}
.cf-body{padding:12px 12px 2px}
.cf-fold[open] .cf-body{animation:cfOpen .3s ease both}
@keyframes cfOpen{from{opacity:0;transform:translateY(-6px)}}
.ca-card{border-radius:20px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.ca-r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font-size:13px;font-weight:800;border-bottom:1px dashed var(--line)}
.ca-r:last-child{border-bottom:0}
.ca-r b{font-size:15px;direction:ltr}
.ca-r b.red{color:var(--red)}.ca-r b.green{color:var(--green)}
.ca-r.tot{font-size:14px}
.ca-r.tot b{font-size:18px}
.ca-r.tot.owe{background:rgba(239,68,68,.08);color:var(--red)}
.ca-r.tot.ok{background:rgba(16,185,129,.1);color:#059669}

/* ===== نافذة حساب الزبون من صفحة الدخل ===== */
.ic-hero{display:flex;align-items:center;gap:12px;padding:14px;border-radius:22px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.25),transparent 45%),radial-gradient(90% 120% at 0% 100%,#14b8a6,transparent 60%),linear-gradient(125deg,#065f46,#059669);
  box-shadow:0 14px 30px -14px rgba(5,150,105,.6)}
.ic-av{width:50px;height:50px;flex:none;border-radius:16px;overflow:hidden;display:grid;place-items:center;font-size:18px;font-weight:900;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ic-av img{width:100%;height:100%;object-fit:cover}
.ic-n{flex:1;min-width:0;display:flex;flex-direction:column}
.ic-n b{font-size:17px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-n small{font-size:12px;font-weight:700;opacity:.85;direction:ltr;text-align:right}
.ic-ring{--p:0;width:62px;height:62px;flex:none;border-radius:50%;display:grid;place-items:center;align-content:center;line-height:1.05;
  background:radial-gradient(closest-side,#047857 78%,transparent 80% 100%),conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.22) 0)}
.ic-ring b{font-size:15px;font-weight:900}.ic-ring small{font-size:9.5px;font-weight:700;opacity:.85}
.ic-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.ic-kpis>div{padding:12px;border-radius:18px;background:var(--card2);border:1px solid var(--line);min-width:0}
.ic-kpis small{display:block;font-size:11px;font-weight:800;color:var(--muted)}
.ic-kpis b{display:block;font-size:18px;font-weight:900;margin-top:2px;direction:ltr;text-align:right}
.ic-kpis em{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);margin-top:2px}
.ic-kpis .g{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25)}.ic-kpis .g b{color:#059669}
.ic-kpis .r{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.25)}.ic-kpis .r b{color:var(--red)}
.ic-bar{height:8px;border-radius:9px;background:var(--card2);margin-top:12px;overflow:hidden}
.ic-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#10b981,#14b8a6);animation:svW 1s ease-out both}
.ic-list{display:flex;flex-direction:column;gap:8px}
.ic-o{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--text);transition:transform .15s}
.ic-o:active{transform:scale(.98)}
.ic-st{flex:none;font-size:10.5px;font-weight:900;padding:4px 9px;border-radius:9px}
.ic-st.w{background:rgba(16,185,129,.14);color:#059669}.ic-st.d{background:rgba(99,102,241,.14);color:#4f46e5}
.ic-om{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ic-om b{font-size:13px}.ic-om small{font-size:11px;color:var(--muted);font-weight:700}
.ic-oa{font-size:14px;font-weight:900;color:var(--green);direction:ltr}
@keyframes svW{from{width:0}}
.cmh.inc .cmh-t small{flex-wrap:wrap;gap:2px 10px;white-space:normal;overflow:visible}
/* خانات هيدر الديون: صغيرة، زجاج مائي شفاف */
.ph.ph-debt .ph-stats{gap:7px}
.ph.ph-debt .ph-stat{padding:7px 8px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px rgba(0,0,0,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);position:relative;overflow:hidden}
.ph.ph-debt .ph-stat::after{content:'';position:absolute;left:-30%;right:-30%;bottom:-14px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);animation:phWave1 5s ease-in-out infinite alternate;pointer-events:none}
.ph.ph-debt .ph-stat i{width:22px;height:22px;border-radius:8px;opacity:.9}
.ph.ph-debt .ph-stat i svg{width:12px;height:12px}
.ph.ph-debt .ph-stat b{font-size:12.5px}
.ph.ph-debt .ph-stat span{font-size:10px;opacity:.85}

/* هيدر الديون: معادلة المطلوب − الدخل = الباقي + خانات زجاجية مائية */
.ph-debt .ph-title:empty{display:none}
.dq-eq{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.dq-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:#fff}
.dq-r b{font-size:22px;font-weight:800;letter-spacing:-.3px}
.dq-r span{font-size:12px;opacity:.85}
.dq-r.m b{font-size:16px;opacity:.9}
.dq-r.t{margin-top:2px}
.dq-r.t b{font-size:20px}
.dq-chips{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.dq-c{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:16px;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dq-c::before{flex:0 0 30px;height:30px;border-radius:10px;
  background:rgba(255,255,255,.95);display:grid;place-items:center;font-weight:900;font-size:16px;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.dq-c:first-child::before{content:"↓";color:#e11d48}
.dq-c:last-child::before{content:"=";color:#2563eb}
.dq-c>span,.dq-c>b{display:block}
.dq-c{flex-wrap:wrap;align-content:center}
.dq-c{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:8px}
.dq-c::before{grid-row:1/3}
.dq-c span{font-size:10.5px;opacity:.8;line-height:1.2}
.dq-c b{font-size:14px;font-weight:800;line-height:1.25}
.dq-c .cash small,.dq-r .cash small{color:rgba(255,255,255,.75)}
/* ======================================================================
   الأداء: حركات مستمرة كانت تُعيد رسم الصفحة في كل إطار (box-shadow / background-position)
   فتأخذ ~45% من المعالج والهاتف واقف. نفس الشكل الآن بـ transform/opacity فقط (تعمل على كرت الرسوميات).
   ====================================================================== */
/* نبضة زر ➕: حلقة تكبر وتختفي بدل تحريك الظل */
.tab-add::after{box-shadow:0 0 0 3px rgba(168,85,247,.5);animation:fabPulseT 3s ease-out infinite}
@keyframes fabPulseT{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(1.6);opacity:0}}
/* موجتا هيدر الديون: إزاحة بمقدار عرض موجة واحدة بالضبط (بدون قفزة عند التكرار) */
.ph.ph-debt::before{width:calc(100% + 110px);animation:phWaveT1 4s linear infinite}
.ph.ph-debt::after{width:calc(100% + 150px);animation:phWaveT2 6s linear infinite}
@keyframes phWaveT1{from{transform:translateX(0)}to{transform:translateX(-110px)}}
@keyframes phWaveT2{from{transform:translateX(-150px)}to{transform:translateX(0)}}
/* الفقاعات: الطبقة كلها تصعد وتتلاشى بدل تحريك مواضع الخلفية */
.ph.ph-debt .ph-top::before{background-size:60px 70px,44px 70px,90px 140px;animation:phBubblesT 9s linear infinite;will-change:transform,opacity}
@keyframes phBubblesT{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(-140px);opacity:0}}
/* شريط تثبيت التطبيق: كان شفافاً لكن مرسوماً بضبابية قبل أن يظهر */
.install-banner:not(.show){visibility:hidden}
@media (prefers-reduced-motion:reduce){.tab-add::after,.ph.ph-debt::before,.ph.ph-debt::after,.ph.ph-debt .ph-top::before{animation:none}}
/* نقطة «عليه» في بطاقة الزبون: نبضة بالحجم والشفافية بدل الظل */
.cmh:not(.inc) .cmh-due>small::before{box-shadow:none;animation:dueDotT 2s ease-out 3}
@keyframes dueDotT{0%,100%{transform:scale(1);opacity:1}35%{transform:scale(1.6);opacity:.55}}