/* Darb Almustakbal identity: night-black dome, gold city and road, crescent. */
:root{
  --bg:#f6f4ef;--bg-2:#efebe2;--card:#ffffff;--card-2:#fbfaf7;--tx:#16140f;--tx-2:#3d382d;--mut:#7a7262;--bd:#e7e1d4;--bd-2:#d8d0bf;
  --ink:#0a0a0c;--ink-2:#17181c;--ink-tx:#f1ece0;--ink-mut:#a39a85;
  --gold-1:#f6e3a1;--gold:#d4a845;--gold-2:#b8862f;--gold-3:#8a6421;
  --pri:#a87a22;--pri-tx:#1a1205;--pri-soft:#f7eedb;
  --amb:#d4a845;--amb-soft:#f8efd9;--vio:#6b5bd2;--vio-soft:#eeebfb;--sky:#2f86c9;--sky-soft:#e6f1fa;
  --bad:#d64545;--bad-soft:#fbeaea;--ok:#1f9254;--ok-soft:#e6f4ec;--warn:#b07208;--warn-soft:#fbf1dc;
  --r:16px;--sh:0 1px 2px rgba(30,24,10,.05),0 10px 28px -14px rgba(30,24,10,.18);
  --sh-lg:0 26px 60px -24px rgba(20,16,6,.45);--glow:0 10px 28px -10px rgba(212,168,69,.65);
  --grad:linear-gradient(135deg,#f6e3a1 0%,#d4a845 45%,#a8771f 100%);
  --night:linear-gradient(160deg,#050506 0%,#141519 62%,#2a2312 100%);
  --font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c0c0e;--bg-2:#141418;--card:#16161a;--card-2:#1b1b20;--tx:#f1ece0;--tx-2:#d6cfbe;--mut:#9b9381;--bd:#26262c;--bd-2:#33333a;
  --pri:#e2bb5c;--pri-soft:#2a2414;--amb-soft:#2a2414;--vio-soft:#1f1c33;--sky-soft:#11222f;
  --bad-soft:#331718;--ok-soft:#10261a;--warn-soft:#2c2210;--sh:0 1px 0 rgba(255,255,255,.02),0 10px 30px -14px rgba(0,0,0,.8);--sh-lg:0 30px 70px -20px rgba(0,0,0,.85)}}
:root[data-theme="dark"]{
  --bg:#0c0c0e;--bg-2:#141418;--card:#16161a;--card-2:#1b1b20;--tx:#f1ece0;--tx-2:#d6cfbe;--mut:#9b9381;--bd:#26262c;--bd-2:#33333a;
  --pri:#e2bb5c;--pri-soft:#2a2414;--amb-soft:#2a2414;--vio-soft:#1f1c33;--sky-soft:#11222f;
  --bad-soft:#331718;--ok-soft:#10261a;--warn-soft:#2c2210;--sh:0 1px 0 rgba(255,255,255,.02),0 10px 30px -14px rgba(0,0,0,.8);--sh-lg:0 30px 70px -20px rgba(0,0,0,.85)}
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.65 var(--font);-webkit-font-smoothing:antialiased}
/* the page's glow sits on its own fixed layer: a fixed body background made the browser repaint the whole page on
   every scroll and mouse move (slow on the long lists) */
html{background:var(--bg)}
body{background:transparent;min-height:100vh}  /* see-through, or it would cover the glow layer below it */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateZ(0);
  background:radial-gradient(900px 520px at 100% -10%,rgba(212,168,69,.12),transparent 60%),radial-gradient(700px 420px at 0% 110%,rgba(212,168,69,.06),transparent 60%),var(--bg)}
a{color:var(--pri);text-decoration:none}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gold-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.boot{display:grid;place-items:center;height:100vh;background:var(--night)}
.boot-in{display:flex;flex-direction:column;align-items:center;gap:14px;animation:bootIn .6s ease-out both}
.boot-scene{width:min(340px,80vw);height:auto;overflow:hidden;filter:drop-shadow(0 8px 26px rgba(212,168,69,.28))}
.boot-sub{font:600 11px/1 system-ui,Segoe UI,sans-serif;letter-spacing:4px;color:#a39a85;opacity:.8}
@keyframes bootIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.boot-in{animation:none}}
@keyframes pulse{50%{opacity:.45}}

/* ---------- emblem ---------- */
.emblem{display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:272px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--night);color:var(--ink-tx);display:flex;flex-direction:column;padding:18px 14px;overflow-y:auto;z-index:20;border-inline-end:1px solid rgba(212,168,69,.14)}
.side::before{content:"";position:absolute;inset:0;background:radial-gradient(380px 240px at 50% 0,rgba(212,168,69,.16),transparent 70%);pointer-events:none}
.brand{display:flex;align-items:center;gap:12px;padding:4px 6px 20px;position:relative;color:var(--ink-tx)}
.brand .emblem{width:62px;height:auto;flex:none}
.brand b{display:block;font-size:21px;font-weight:700;line-height:1.25}
.brand small{display:block;color:var(--ink-mut);font-size:10.5px;letter-spacing:.16em;font-family:"Segoe UI",sans-serif}
.side nav{display:flex;flex-direction:column;gap:3px;position:relative}
.side nav .sec{font-size:11px;letter-spacing:.06em;color:var(--ink-mut);padding:14px 12px 6px}
.side nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:#d9d2c2;font-size:14.5px;position:relative;transition:background .15s,color .15s}
.side nav a:hover{background:rgba(212,168,69,.08);color:#fff}
.side nav a.on{background:linear-gradient(90deg,rgba(212,168,69,.06),rgba(212,168,69,.20));color:var(--gold-1);font-weight:600}
.side nav a.on::after{content:"";position:absolute;inset-inline-start:-14px;top:9px;bottom:9px;width:4px;border-radius:4px;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.side nav a.cta{background:var(--grad);color:var(--pri-tx);font-weight:700;margin-bottom:10px;box-shadow:var(--glow)}
.side nav a.cta:hover{filter:brightness(1.06)}
.side nav a .badge{margin-inline-start:auto}
/* the menu, in sections: a gold heading with a fading line, each item's icon in its own small tile */
.side nav{gap:2px}
.side nav .sec{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px 6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:color-mix(in srgb,var(--gold) 80%,#fff)}
.side nav .sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(212,168,69,.35),transparent)}
[dir=rtl] .side nav .sec::after{background:linear-gradient(270deg,rgba(212,168,69,.35),transparent)}
.side nav a{padding:7px 10px;gap:11px;font-size:14.5px}
.side nav a .ni{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(212,168,69,.12);transition:background .15s,border-color .15s,box-shadow .15s}
.side nav a .ni .i{width:18px;height:18px}
.side nav a:hover .ni{background:rgba(212,168,69,.12);border-color:rgba(212,168,69,.3)}
.side nav a.on .ni{background:var(--grad);border-color:transparent;box-shadow:0 0 16px rgba(212,168,69,.35)}
.side nav a.on .ni .i{stroke:var(--pri-tx);color:var(--pri-tx)}
.side nav a .nt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side nav a.cta{padding:10px 12px;margin:2px 0 6px;justify-content:center}
.side nav a.cta .ni{background:rgba(0,0,0,.12);border-color:rgba(0,0,0,.08);width:30px;height:30px}
.side nav a.cta .nt{flex:none}
.side nav a .badge{box-shadow:0 0 0 2px var(--night);font-variant-numeric:tabular-nums}
.me{margin-top:auto;position:relative;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(212,168,69,.06);border:1px solid rgba(212,168,69,.16)}
.avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:var(--pri-tx);background:var(--grad);flex:none}
.me .nm{font-weight:700;font-size:14px;line-height:1.3}.me .rl{font-size:12px;color:var(--ink-mut)}
.me button{margin-inline-start:auto;background:transparent;border:0;color:var(--ink-mut);padding:6px;border-radius:8px}
.me button:hover{color:var(--gold-1);background:rgba(212,168,69,.1)}
.content{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:14px 28px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd)}
.topbar h1{margin:0;font-size:20px;font-weight:700}
.topbar .search{margin-inline-start:auto;position:relative;width:min(320px,40vw)}
.topbar .search input{padding-inline-start:38px;border-radius:12px;background:var(--card)}
.topbar .search svg{position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);color:var(--mut);width:18px;height:18px}
.iconbtn{width:40px;height:40px;padding:0;justify-content:center;border-radius:12px}
.menu-btn{display:none}
/* ---- skins (the 🎨 menu): luxury themes. Each sets its own palette (light/dark toggle aside, except champagne which is
   light), frosted glass panels with a gold-foil edge, metallic gold buttons and gold-lettered headings. ---- */
:root[data-skin]{--foil:linear-gradient(135deg,#7a5418 0%,#f6e3a1 22%,#c9973a 45%,#fff1c4 62%,#a8771f 82%,#6b4a15 100%);
  --foil-soft:linear-gradient(135deg,rgba(246,227,161,.65),rgba(184,134,47,.25) 40%,rgba(246,227,161,.55) 70%,rgba(138,100,33,.3));
  --gold-txt:linear-gradient(180deg,#fff3c9 0%,#f0d58a 45%,#c9973a 100%)}
:root[data-skin="royal"]{--bg:#060608;--bg-2:#0e0d0b;--card:#14120e;--card-2:#1a1712;--tx:#f3ecdb;--tx-2:#d8ccb0;--mut:#9c8f74;--bd:#2c2618;--bd-2:#3a3220;
  --pri-soft:rgba(212,168,69,.12);--lux:rgba(22,19,13,.62);--lux-2:rgba(30,26,18,.5);--lux-sh:0 26px 60px -28px rgba(0,0,0,.95);--lux-bg:
  radial-gradient(1100px 700px at 100% -10%,rgba(212,168,69,.28),transparent 60%),radial-gradient(900px 650px at -10% 110%,rgba(184,134,47,.22),transparent 60%),
  repeating-linear-gradient(45deg,rgba(212,168,69,.035) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,rgba(212,168,69,.035) 0 1px,transparent 1px 22px),#060608}
/* graphite: modern and quiet, cool grey glass, no pattern, gold only where it matters */
:root[data-skin="graphite"]{--bg:#0c0e11;--bg-2:#12151a;--card:#15181d;--card-2:#1a1e24;--tx:#eceef1;--tx-2:#c9ced6;--mut:#8a929e;--bd:#242931;--bd-2:#2f353f;
  --pri-soft:rgba(212,168,69,.11);--lux:rgba(22,25,30,.72);--lux-2:rgba(28,32,38,.6);--lux-sh:0 24px 56px -28px rgba(0,0,0,.9);--lux-bg:
  radial-gradient(1000px 620px at 100% -12%,rgba(212,168,69,.13),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(120,140,170,.10),transparent 60%),
  linear-gradient(180deg,#0f1216,#0a0c0f);
  --foil-soft:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 45%,rgba(212,168,69,.28))}
/* desert night: warm black, amber dunes along the bottom, a few stars */
:root[data-skin="desert"]{--bg:#110b06;--bg-2:#1a110a;--card:#1c140c;--card-2:#231910;--tx:#f6ecdc;--tx-2:#e0cfb2;--mut:#a8937a;--bd:#33261a;--bd-2:#423222;
  --pri-soft:rgba(226,170,90,.13);--lux:rgba(30,21,12,.66);--lux-2:rgba(38,27,16,.55);--lux-sh:0 26px 60px -28px rgba(0,0,0,.92);--lux-bg:
  radial-gradient(1500px 460px at 25% 108%,rgba(206,138,62,.42),transparent 62%),radial-gradient(1300px 420px at 88% 112%,rgba(170,100,44,.40),transparent 60%),
  radial-gradient(1000px 640px at 100% -12%,rgba(236,186,100,.20),transparent 60%),
  radial-gradient(1.3px 1.3px at 18% 22%,#fff8,transparent),radial-gradient(1px 1px at 63% 12%,#fff7,transparent),radial-gradient(1.2px 1.2px at 82% 30%,#fff6,transparent),
  radial-gradient(1px 1px at 40% 38%,#fff5,transparent),#110b06}
/* champagne: a calm light theme, ivory glass with soft gold light */
:root[data-skin="champagne"]{--bg:#f7f3ec;--bg-2:#efe9de;--card:#fffdf9;--card-2:#fbf8f2;--tx:#1f1a12;--tx-2:#40392c;--mut:#7d7360;--bd:#ebe2d0;--bd-2:#ddd0b6;
  --pri-soft:#f6ecd6;--lux:rgba(255,253,249,.8);--lux-2:rgba(255,252,246,.66);--lux-sh:0 22px 48px -26px rgba(90,66,20,.3);--lux-bg:
  radial-gradient(1100px 700px at 100% -12%,rgba(226,187,92,.26),transparent 60%),radial-gradient(900px 620px at -8% 112%,rgba(214,182,130,.24),transparent 60%),
  linear-gradient(180deg,#faf6ef,#f3ede2);
  --gold-txt:linear-gradient(180deg,#a8771f 0%,#7a5418 100%)}
:root[data-skin] body{color:var(--tx)}
:root[data-skin] body::before{background:var(--lux-bg)}
:root[data-skin] body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-skin] .layout{position:relative;z-index:1}
:root[data-skin] .card,:root[data-skin] .stat,:root[data-skin] .modal .box{border:1px solid transparent;
  background:linear-gradient(var(--lux),var(--lux)) padding-box,var(--foil-soft) border-box;
  box-shadow:var(--lux-sh),inset 0 1px 0 rgba(255,255,255,.07);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
:root[data-skin] .modal .box{border-top:1px solid transparent}
:root[data-skin] .stat:hover{transform:translateY(-3px);box-shadow:var(--lux-sh),0 0 0 1px rgba(246,227,161,.35),0 14px 40px -18px rgba(212,168,69,.45)}
:root[data-skin] .card h1,:root[data-skin] .card h2,:root[data-skin] .topbar h1,:root[data-skin] .stat .v{background:var(--gold-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-skin] .topbar{background:var(--lux-2);border-bottom:1px solid transparent;border-image:var(--foil) 1;-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}
:root[data-skin] .side{background:linear-gradient(180deg,rgba(6,6,8,.78),rgba(10,9,7,.7));-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border-inline-end:1px solid transparent;border-image:var(--foil) 1}
:root[data-skin] .side nav a.on{background:linear-gradient(90deg,rgba(212,168,69,.22),rgba(212,168,69,.04));box-shadow:inset -3px 0 0 #d4a845}
:root[data-skin] td{background:var(--lux-2);border-color:rgba(212,168,69,.16)}
:root[data-skin] .item,:root[data-skin] .pick label,:root[data-skin] .tabs{background:var(--lux-2);border-color:rgba(212,168,69,.2)}
:root[data-skin] input,:root[data-skin] select,:root[data-skin] textarea{background:var(--lux-2);border-color:rgba(212,168,69,.25);color:var(--tx)}
:root[data-skin] input:focus,:root[data-skin] select:focus,:root[data-skin] textarea:focus{border-color:#d4a845;box-shadow:0 0 0 3px rgba(212,168,69,.18),0 0 18px -4px rgba(212,168,69,.45)}
:root[data-skin] button.pri,:root[data-skin] .btn.pri{position:relative;overflow:hidden;border:0;color:#1a1205;
  background:linear-gradient(180deg,#fbe9b0 0%,#e2bb5c 42%,#b8862f 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 6px rgba(120,80,20,.35),0 8px 22px -10px rgba(212,168,69,.75)}
:root[data-skin] button.pri::after,:root[data-skin] .btn.pri::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
:root[data-skin] button.pri:hover::after,:root[data-skin] .btn.pri:hover::after{transform:translateX(120%)}
:root[data-skin] .modal{background:rgba(3,3,5,.45)}
:root[data-skin="champagne"] .side{background:linear-gradient(180deg,rgba(24,20,14,.94),rgba(36,29,19,.92))}
:root[data-skin="champagne"] .card,:root[data-skin="champagne"] .stat,:root[data-skin="champagne"] .modal .box{box-shadow:var(--lux-sh),inset 0 1px 0 #fff}
:root[data-skin="champagne"] .modal{background:rgba(40,30,15,.28)}
:root[data-skin="graphite"] .side{background:linear-gradient(180deg,rgba(14,16,20,.86),rgba(10,12,15,.8))}
.skinmenu{position:absolute;z-index:60;top:60px;inset-inline-end:16px;width:min(420px,calc(100vw - 32px));padding:14px;border-radius:20px;color:#f1ece0;
  background:linear-gradient(rgba(16,15,13,.92),rgba(16,15,13,.92)) padding-box,linear-gradient(135deg,#7a5418,#f6e3a1 30%,#c9973a 55%,#fff1c4 75%,#a8771f) border-box;
  border:1px solid transparent;box-shadow:0 30px 70px -20px rgba(0,0,0,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:rise .18s ease-out}
.sk-head{font-weight:700;font-size:14px;margin:0 4px 10px;background:linear-gradient(180deg,#fff3c9,#c9973a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sk{display:flex;flex-direction:column;gap:8px;border:0;background:transparent;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:center}
.sk-prev{position:relative;display:flex;height:96px;border-radius:14px;overflow:hidden;background:radial-gradient(120px 80px at 85% 0%,var(--gl),transparent 70%),var(--bg);
  outline:1px solid rgba(255,255,255,.08);transition:transform .2s,box-shadow .2s,outline-color .2s}
.sk:hover .sk-prev{transform:translateY(-3px);box-shadow:0 14px 30px -14px var(--gl)}
.sk.on .sk-prev{outline:2px solid #d4a845;box-shadow:0 0 0 4px rgba(212,168,69,.18),0 14px 30px -14px var(--gl)}
.sk-side{width:24%;background:var(--sd);display:flex;flex-direction:column;gap:5px;padding:10px 6px}
.sk-side i{height:5px;border-radius:3px;background:rgba(255,255,255,.14)}.sk-side i:first-child{background:linear-gradient(90deg,#f6e3a1,#c9973a)}
.sk-main{flex:1;display:flex;flex-direction:column;gap:6px;padding:8px}
.sk-top{height:8px;border-radius:4px;background:var(--ln);opacity:.7;width:60%}
.sk-cards{display:flex;gap:6px}
.sk-card{flex:1;height:34px;border-radius:8px;background:var(--cd);border:1px solid rgba(212,168,69,.45);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 6px}
.sk-card b{height:6px;width:55%;border-radius:3px;background:linear-gradient(90deg,#f6e3a1,#c9973a)}.sk-card em{height:4px;width:80%;border-radius:2px;background:var(--ln)}
.sk-row{height:14px;border-radius:6px;background:var(--cd);border:1px solid rgba(255,255,255,.06)}
.sk-name{font-size:13px;font-weight:600}.sk-tick{color:#d4a845}
/* the city / goods dropdown: the card's colours, a slim gold scrollbar, sticky group titles with their counts */
.csel{position:absolute;z-index:9999;max-height:380px;overflow:auto;overscroll-behavior:contain;color:var(--tx);
  background:color-mix(in srgb,var(--card) 96%,transparent);backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--gold) 45%,var(--bd));border-radius:14px;padding:0 6px 6px;
  box-shadow:var(--sh-lg),0 0 0 1px rgba(0,0,0,.15);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--gold) 60%,transparent) transparent}
.csel::-webkit-scrollbar{width:8px}.csel::-webkit-scrollbar-track{background:transparent;margin:10px 0}
.csel::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gold) 55%,transparent);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.csel::-webkit-scrollbar-button{display:none;height:0}
.csel .opt{padding:11px 16px;margin:1px 0;border-radius:10px;cursor:pointer;font-size:17px;display:flex;align-items:center;gap:8px;transition:background .12s}
.csel .opt:hover,.csel .opt.on{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--tx)}
.csel .opt.on{box-shadow:inset 3px 0 0 var(--gold)}
.csel .opt.main{font-weight:700}
.csel .opt.country::before{content:'🌍';font-size:13px}
.csel .grp{display:flex;justify-content:space-between;align-items:center;margin:0 -6px 2px;padding:11px 16px 8px;font-size:14px;font-weight:800;color:var(--gold);
  position:sticky;top:0;z-index:1;background:color-mix(in srgb,var(--card) 98%,var(--gold));border-bottom:1px solid color-mix(in srgb,var(--gold) 25%,transparent)}
.csel .grp .n{font-weight:600;color:var(--mut);font-size:12.5px;background:color-mix(in srgb,var(--gold) 12%,transparent);padding:1px 8px;border-radius:99px}
.csel .none{padding:12px 14px;font-size:13px;color:var(--mut)}
/* the site's own dropdown, in place of every <select>: a field-like button with a chevron, the list in the city-list style */
button.dsel{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 14px;border-radius:12px;
  background:var(--card-2);border:1.5px solid var(--bd);color:var(--tx);font-size:15px;font-weight:500;text-align:right;white-space:nowrap}
button.dsel span{overflow:hidden;text-overflow:ellipsis}
button.dsel i{font-style:normal;font-size:12px;color:var(--gold);transition:transform .2s}
button.dsel.open{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,168,69,.22),0 0 26px -4px rgba(212,168,69,.6)}
button.dsel.open i{transform:rotate(180deg)}
button.dsel:not(:disabled):hover{transform:none}
:root[data-skin] button.dsel{background:var(--lux-2);border-color:rgba(212,168,69,.25)}
.dsel-list{padding:6px}.dsel-list .opt.sel{background:color-mix(in srgb,var(--gold) 22%,transparent);font-weight:700}
.dsel-list .opt.sel::after{content:'✓';margin-inline-start:auto;color:var(--gold)}
input[data-city]{background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:14px 50%,19px 50%;background-size:5px 5px;background-repeat:no-repeat}
/* the date picker: a dark gold-edged card, Arabic month on top, round days (today ringed, the chosen one filled gold) */
.dcal{position:absolute;z-index:9999;width:312px;direction:rtl;color:var(--tx);padding:14px;border-radius:18px;
  background:color-mix(in srgb,var(--card) 97%,transparent);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--bd));
  box-shadow:0 24px 60px -18px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.2),0 0 30px -12px rgba(212,168,69,.45);animation:rise .16s ease-out}
.dcal button{all:unset;box-sizing:border-box;cursor:pointer;font-family:inherit}
.dcal button::after{display:none}
.dcal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dcal-h .ttl{display:flex;align-items:baseline;gap:8px}.dcal-h .ttl b{font-size:17px;color:var(--gold-1,#f6e3a1)}.dcal-h .ttl span{font-size:14px;color:var(--mut);font-variant-numeric:tabular-nums}
.dcal-h .nav{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:18px;color:var(--tx);border:1px solid var(--bd);transition:background .15s,border-color .15s}
.dcal-h .nav:hover{background:color-mix(in srgb,var(--gold) 16%,transparent);border-color:var(--gold)}
.dcal-w,.dcal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;justify-items:center}
.dcal-w span{font-size:10.5px;color:var(--mut);padding:2px 0 6px;font-weight:600}
.dcal-g button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:14px;font-variant-numeric:tabular-nums;color:var(--tx);transition:background .12s,box-shadow .12s}
.dcal-g button:hover{background:color-mix(in srgb,var(--gold) 18%,transparent)}
.dcal-g button.today{box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold-1,#f6e3a1);font-weight:700}
.dcal-g button.on{background:var(--grad);color:var(--pri-tx,#1a1205);font-weight:800;box-shadow:0 0 16px -2px rgba(212,168,69,.65)}
.dcal-f{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--bd)}
.dcal-f .sp{flex:1}
.dcal-f button{padding:6px 11px;border-radius:99px;font-size:12.5px;font-weight:600;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--bd));transition:background .15s}
.dcal-f button:hover{background:color-mix(in srgb,var(--gold) 16%,transparent)}
.dcal-f button.clr{color:var(--mut);border-color:var(--bd)}
.tbl thead th{cursor:pointer;user-select:none;white-space:nowrap}
.tbl thead th:hover{color:var(--tx)}
.tbl thead th::after{content:'↕';opacity:.25;font-size:11px;margin-inline-start:5px}
.tbl thead th[data-sort=asc]::after{content:'▲';opacity:.9;color:#d4a845}
.tbl thead th[data-sort=desc]::after{content:'▼';opacity:.9;color:#d4a845}
.tbl thead th:empty::after{content:none}
.lchip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;text-decoration:none;margin-inline-start:12px}
.lchip i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 25%,transparent)}
.lchip.on{background:var(--ok-soft);color:var(--ok)}.lchip.off{background:var(--bad-soft);color:var(--bad)}.lchip.off i{animation:pulse 1.2s infinite}
@media (max-width:640px){.lchip{font-size:11px;padding:4px 9px;margin-inline-start:6px}}
main{padding:24px 28px 70px;max-width:1440px;width:100%;margin-inline:auto;box-sizing:border-box}
/* wide office screens: scale the whole app up instead of leaving half the screen empty */
@media (min-width:1600px){.layout{zoom:1.15;min-height:calc(100vh / 1.15)}}
@media (min-width:2000px){.layout{zoom:1.3;min-height:calc(100vh / 1.3)}}
.badge{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:11.5px;font-weight:700}

/* ---------- surfaces ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:20px;margin-bottom:18px;box-shadow:var(--sh)}
h1{font-size:24px;margin:0 0 4px;font-weight:700}h2{font-size:18px;margin:0 0 14px;font-weight:700}h3{font-size:15.5px;margin:0 0 10px;font-weight:700}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.mut{color:var(--mut)}.bad{color:var(--bad)}.ok{color:var(--ok)}.warn{color:var(--warn)}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.sec-head h2{margin:0}
.chip{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.chip svg{width:21px;height:21px}
.c-pri{background:var(--pri-soft);color:var(--pri)}.c-amb{background:var(--amb-soft);color:var(--gold-2)}.c-vio{background:var(--vio-soft);color:var(--vio)}
.c-sky{background:var(--sky-soft);color:var(--sky)}.c-bad{background:var(--bad-soft);color:var(--bad)}.c-ok{background:var(--ok-soft);color:var(--ok)}
.c-ink{background:var(--ink);color:var(--gold)}

/* hero: the logo's night scene */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:30px 32px;color:#fff;background:var(--night);box-shadow:var(--sh-lg);margin-bottom:22px;border:1px solid rgba(212,168,69,.18);min-height:210px}
.hero h1{font-size:28px;color:#fff}.hero p{margin:4px 0 0;color:#cfc5ad;position:relative}
.hero h1,.hero .hero-actions,.hero .hero-search{position:relative;z-index:1}
.hero .scene{position:absolute;inset-inline-end:0;bottom:0;width:52%;max-width:560px;height:100%;pointer-events:none;opacity:.95;-webkit-mask-image:linear-gradient(to right,#000 72%,transparent);mask-image:linear-gradient(to right,#000 72%,transparent)}
/* top bar: a remembrance that changes every few seconds */
.adhkar{flex:1;text-align:center;min-width:0;font-size:15px;font-weight:600;color:#d4a845;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .6s}
.adhkar.fade{opacity:0}
@media (max-width:900px){.adhkar{display:none}}
/* the hero's rotating scenes: stacked, one shown (soft fade and a slow zoom), the others hidden and paused */
.hero .scenes{position:absolute;inset-inline-end:0;top:0;bottom:0;width:56%;max-width:620px;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 70%,transparent);mask-image:linear-gradient(to right,#000 70%,transparent)}
.hero .scenes .scene{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transform:scale(1.04);
  transition:opacity 1.1s ease,transform 8s ease-out;-webkit-mask-image:none;mask-image:none}
.hero .scenes .scene.on{opacity:1;transform:scale(1)}
.hero .scenes .scene:not(.on) *{animation-play-state:paused!important}
.scene-dots{position:absolute;bottom:12px;inset-inline-start:18px;display:flex;gap:6px;pointer-events:auto;z-index:2}
.scene-dots i{width:8px;height:8px;border-radius:99px;background:rgba(246,227,161,.35);cursor:pointer;transition:width .3s,background .3s}
.scene-dots i.on{width:22px;background:#f6e3a1}
/* 1 the road */
.h1-lane{animation:h1lane .7s linear infinite}@keyframes h1lane{to{stroke-dashoffset:-24}}
.h1-rows{animation:h1rows 1.2s linear infinite}@keyframes h1rows{to{transform:translateY(16px)}}
.h1-sun{animation:h1sun 6s ease-in-out infinite;transform-origin:280px 128px}@keyframes h1sun{50%{transform:translateY(-4px) scale(1.02)}}
/* 2 the network */
.h2-flow{stroke-dasharray:14 220;animation:h2flow 2.8s linear infinite}@keyframes h2flow{to{stroke-dashoffset:-234}}
.h2-ping{animation:h2ping 2.4s ease-out infinite}@keyframes h2ping{from{r:3;opacity:.9}to{r:14;opacity:0}}
/* 3 the port */
.h3-trolley{animation:h3trolley 7s ease-in-out infinite}@keyframes h3trolley{0%,100%{transform:translateX(330px)}45%,55%{transform:translateX(410px)}}
.h3-hook{animation:h3hook 7s ease-in-out infinite}@keyframes h3hook{0%,100%{transform:translateY(0)}20%,35%{transform:translateY(40px)}65%,80%{transform:translateY(32px)}}
.h3-ship{animation:h3ship 3.6s ease-in-out infinite}@keyframes h3ship{50%{transform:translateY(2px) rotate(.6deg)}}
.h3-waves{animation:h3waves 3s linear infinite}@keyframes h3waves{to{transform:translateX(40px)}}
/* 4 the truck */
.h4-far{animation:h4move 18s linear infinite}.h4-near{animation:h4move 7s linear infinite}
.h4-poles{animation:h4poles 2.4s linear infinite}.h4-lane{animation:h4lane .9s linear infinite}
@keyframes h4move{to{transform:translateX(-560px)}}@keyframes h4poles{to{transform:translateX(-120px)}}@keyframes h4lane{to{transform:translateX(-48px)}}
.h4-wheel{animation:h4wheel .5s linear infinite}@keyframes h4wheel{to{transform:rotate(360deg)}}
.h4-truck{animation:h4bump .45s ease-in-out infinite}@keyframes h4bump{50%{transform:translateY(-1.2px)}}
.h4-speed{animation:h4speed .6s linear infinite}@keyframes h4speed{0%{opacity:0;transform:translateX(20px)}50%{opacity:1}100%{opacity:0;transform:translateX(-30px)}}
@media (max-width:900px){.hero .scenes{width:100%;opacity:.35}}
@media (prefers-reduced-motion:reduce){.hero .scenes *{animation:none!important}}
.hero .scene .road{stroke-dasharray:7 9;animation:dash 16s linear infinite}
.hs-stars circle{animation:twinkle 3.2s ease-in-out infinite}
.hs-win rect{animation:winblink 4.5s steps(1) infinite}
.hs-lane{animation:lane 1.6s linear infinite}
.hs-ping{animation:ping 2.2s ease-out infinite;transform-origin:0 -17px}
.hs-beam{animation:beam 1.8s ease-in-out infinite}
.hs-shoot{opacity:0;animation:shoot 9s ease-in 3s infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes winblink{0%{opacity:1}35%{opacity:.25}55%{opacity:1}80%{opacity:.6}}
@keyframes lane{to{stroke-dashoffset:-28}}
@keyframes ping{0%{r:4;opacity:.9}100%{r:16;opacity:0}}
@keyframes beam{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes shoot{0%{opacity:0;transform:translate(80px,10px) rotate(14deg)}3%{opacity:1}9%{opacity:0;transform:translate(320px,70px) rotate(14deg)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero .scene *{animation:none!important}}
@keyframes dash{to{stroke-dashoffset:-320}}
.hero-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.hero .btn{background:rgba(255,255,255,.08);border-color:rgba(212,168,69,.35);color:#f1ece0;backdrop-filter:blur(6px)}
.hero .btn.pri{background:var(--grad);color:var(--pri-tx);border-color:transparent}
.hero-search{max-width:420px;margin-top:16px}
.hero-search form{position:relative}
.hero-search input{background:rgba(255,255,255,.07);border-color:rgba(212,168,69,.3);color:#fff;border-radius:14px;padding:12px 14px;padding-inline-end:100px}
.hero-search input::placeholder{color:#b3a98f}
.hero-search button{position:absolute;inset-inline-end:6px;top:6px;bottom:6px;background:var(--grad);color:var(--pri-tx);border:0;border-radius:10px;font-weight:700}

/* KPI */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px;margin-bottom:22px}
.stat{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);display:flex;gap:14px;align-items:center;transition:transform .18s,box-shadow .18s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.stat small{color:var(--mut);display:block;font-size:13px}
.stat .v{font-size:26px;font-weight:800;line-height:1.15}
.stat .v.sm{font-size:16px;font-weight:700}
/* the home page's figures: equal tiles in one row (3 then 2 on smaller screens), icon, label and the number */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:14px}
.kpi{display:flex;flex-direction:column;gap:8px;padding:16px 18px;min-height:132px;border-radius:var(--r);background:var(--card);border:1px solid var(--bd);
  box-shadow:var(--sh);color:inherit;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s,box-shadow .2s,border-color .2s}
.kpi .chip{width:40px;height:40px;border-radius:12px}.kpi .chip .i{width:20px;height:20px}
.kpi small{color:var(--mut);font-size:13px;line-height:1.4}
.kpi .v{margin-top:auto;font-size:30px;font-weight:800;line-height:1}
.kpi:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold) 55%,var(--bd));box-shadow:0 12px 28px -10px rgba(212,168,69,.55),0 0 22px -8px rgba(212,168,69,.5)}
:root[data-skin] .kpi{background:var(--lux-2);border-color:rgba(212,168,69,.2)}
:root[data-skin] .kpi .v{background:var(--gold-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.kpis{grid-template-columns:repeat(2,1fr)}}
/* the Logisti connections: one strip, each employee a pill (green dot when connected, the extension's version) */
.lstrip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px;margin-bottom:22px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--bd);color:inherit;text-decoration:none;transition:box-shadow .2s,border-color .2s}
.lstrip:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--bd));box-shadow:0 0 22px -8px rgba(212,168,69,.5)}
:root[data-skin] .lstrip{background:var(--lux-2);border-color:rgba(212,168,69,.2)}
.lstrip .lt{display:flex;flex-direction:column}.lstrip .lt small{color:var(--mut);font-size:12.5px}.lstrip .lt b{font-size:20px}
.lstrip .lp{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.lpill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;font-size:13.5px;font-weight:600;
  background:color-mix(in srgb,var(--mut) 12%,transparent);border:1px solid var(--bd);color:var(--mut)}
.lpill i{width:9px;height:9px;border-radius:50%;background:var(--mut)}
.lpill.on{color:var(--tx);border-color:rgba(31,174,84,.45);background:rgba(31,174,84,.1)}.lpill.on i{background:#1fae54;box-shadow:0 0 8px #1fae54}
.lpill em{font-style:normal;font-size:11.5px;color:var(--mut);font-weight:500}
.stat::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--grad);opacity:0;transition:opacity .2s}
.stat:hover::before{opacity:1}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--bg-2);color:var(--tx-2)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.warn::before{animation:pulse 1.2s infinite}.pill.mut{color:var(--mut)}
.pill.gold{background:var(--pri-soft);color:var(--pri)}
.pill.plain::before{display:none}
.errtxt{color:var(--bad);font-size:12.5px;margin-top:3px;max-width:340px}

/* tables */
.tbl{overflow-x:auto;margin:0 -6px}
table{width:100%;border-collapse:separate;border-spacing:0 6px}
th{color:var(--mut);font-weight:600;font-size:12.5px;text-align:right;padding:4px 12px;white-space:nowrap}
td{text-align:right;padding:12px;background:var(--card-2);vertical-align:middle;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
/* the row's ends on the page's sides (right = first, left = last, the page is RTL): a number cell is LTR inside,
   and logical sides made its corners and border fall on the inner side when it was a row's last cell */
td:first-child{border-right:1px solid var(--bd);border-top-right-radius:12px;border-bottom-right-radius:12px}
td:last-child{border-left:1px solid var(--bd);border-top-left-radius:12px;border-bottom-left-radius:12px}
/* row hover: the row lifts into frosted glass and a light sweeps across it once (the band is fixed to the screen,
   so it runs over the whole row as one, not cell by cell) */
:root{--shine:rgba(255,255,255,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--shine:rgba(255,236,180,.16)}}
:root[data-theme="dark"]{--shine:rgba(255,236,180,.16)}
/* row hover: a soft spotlight follows the mouse across the row (one light for the whole row: it is placed in screen
   coordinates), a gold bar lights up at its start and the frame turns gold; the row's own colour stays clean */
:root{--spot:rgba(246,227,161,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--spot:rgba(246,227,161,.22)}}
:root[data-theme="dark"],:root[data-skin]:not([data-skin="champagne"]){--spot:rgba(246,227,161,.22)}
tbody tr{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
tbody tr:hover{transform:translateY(-1px)}
tbody tr:hover td{background-image:radial-gradient(420px circle at var(--mx,50vw) var(--my,50vh),var(--spot),transparent 70%);background-attachment:fixed;
  border-color:color-mix(in srgb,var(--gold) 45%,var(--bd));transition:border-color .25s}
:root[data-skin] tbody tr:hover td{background-image:radial-gradient(420px circle at var(--mx,50vw) var(--my,50vh),var(--spot),transparent 70%);background-attachment:fixed;border-color:rgba(212,168,69,.5)}
tbody tr:hover td:first-child{box-shadow:inset -3px 0 0 #d4a845,inset -14px 0 18px -14px rgba(212,168,69,.55)}
tr.err td{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,var(--bd))}
@media (prefers-reduced-motion:reduce){tbody tr:hover{transform:none}}
td.num,.num{direction:ltr;unicode-bidi:plaintext;text-align:right}
.sub{color:var(--mut);font-size:12px}
.plate{display:inline-flex;align-items:center;gap:6px;font-weight:700;border:1.5px solid var(--tx-2);border-radius:7px;padding:1px 8px;font-size:13px;background:var(--card);white-space:nowrap}
.plate i{font-style:normal;font-size:9px;color:var(--mut);border-inline-start:1px solid var(--bd-2);padding-inline-start:5px}

/* forms */
label{display:block;font-size:13px;color:var(--tx-2);margin-bottom:6px;font-weight:500}
input,select,textarea{font:inherit;color:inherit;background:var(--card-2);border:1.5px solid var(--bd);border-radius:12px;padding:10px 12px;width:100%;transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:var(--bd-2)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,168,69,.2);background:var(--card)}
input::placeholder{color:var(--mut);opacity:.7}
input[readonly]{cursor:pointer}
input.invalid{border-color:var(--bad);background:var(--bad-soft)}
/* required fields: a gold star, and while still empty a gold frame and tint so they catch the eye */
.req{color:var(--gold);font-weight:800}
.reqf>label{color:var(--tx)}
input[data-req]:placeholder-shown,textarea[data-req]:placeholder-shown{border-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
input[data-req]:placeholder-shown:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent)}
.hint{font-size:12px;color:var(--mut);margin-top:4px}
button,.btn{font:inherit;font-size:14px;border:1.5px solid var(--bd);background:var(--card);color:var(--tx);border-radius:12px;padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .12s,border-color .15s,box-shadow .15s,background .15s;font-weight:500}
button:hover,.btn:hover{border-color:var(--gold);color:var(--tx)}
button:active,.btn:active{transform:translateY(1px)}
button.pri,.btn.pri{background:var(--grad);border-color:transparent;color:var(--pri-tx);font-weight:700;box-shadow:var(--glow)}
button.pri:hover,.btn.pri:hover{filter:brightness(1.05);color:var(--pri-tx)}
button.dark,.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--gold-1)}
button.wa,.btn.wa{background:#1fae54;border-color:#1fae54;color:#fff;font-weight:600}
button.danger{color:var(--bad)}button.danger:hover{border-color:var(--bad);background:var(--bad-soft)}
/* the gold button's hover on every button and field: a soft glow around it, a small lift, and a light sweeping across */
button,.btn{position:relative;overflow:hidden}
button:not(:disabled):hover,.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent),0 10px 26px -8px rgba(212,168,69,.6),0 0 22px -6px rgba(212,168,69,.55)}
button.pri:not(:disabled):hover,.btn.pri:hover{box-shadow:0 0 0 1px rgba(255,236,170,.55),0 14px 30px -8px rgba(212,168,69,.8),0 0 30px -4px rgba(212,168,69,.7);filter:brightness(1.07)}
button.danger:not(:disabled):hover{box-shadow:0 0 0 1px rgba(214,69,69,.45),0 10px 26px -8px rgba(214,69,69,.55),0 0 22px -6px rgba(214,69,69,.5)}
button.wa:not(:disabled):hover,.btn.wa:hover{box-shadow:0 0 0 1px rgba(31,174,84,.5),0 10px 26px -8px rgba(31,174,84,.6),0 0 22px -6px rgba(31,174,84,.55)}
button:not(:disabled):active,.btn:active{transform:translateY(0)}
button::after,.btn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);opacity:0;transition:transform .7s,opacity .2s}
button:not(:disabled):hover::after,.btn:hover::after{transform:translateX(120%);opacity:1}
button.pri::after,.btn.pri::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%)}
.side nav a::after,.tabs button::after{display:none}  /* the menu and tabs keep their own look: no sweep, no lift */
.tabs button:hover{transform:none;box-shadow:none}
/* fields: the same glow when the mouse is on them, stronger while typing */
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--gold) 60%,var(--bd));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent),0 0 20px -6px rgba(212,168,69,.5)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,168,69,.22),0 0 26px -4px rgba(212,168,69,.6)}
/* choice cards and figure tiles glow too */
.pick label,.stat{transition:transform .15s,box-shadow .2s,border-color .2s}
.pick label:hover,.stat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 55%,var(--bd));box-shadow:0 10px 26px -10px rgba(212,168,69,.55),0 0 20px -8px rgba(212,168,69,.5)}
button.sm,.btn.sm{padding:5px 11px;font-size:13px;border-radius:10px;gap:6px}
button.sm svg,.btn.sm svg{width:16px;height:16px}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
.err{color:var(--bad);min-height:1.4em;margin:10px 0;font-size:14px}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.checks label{display:flex;gap:10px;align-items:center;color:var(--tx);font-size:14px;margin:0;padding:9px 12px;border:1.5px solid var(--bd);border-radius:11px;cursor:pointer}
.checks label:has(input:checked){border-color:var(--gold);background:var(--pri-soft)}
.checks input{width:auto;accent-color:var(--gold-2)}
/* staff accounts: one card per employee — result on top, the sum written out, a tile per service */
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;margin-top:14px}
.scard{border:1px solid color-mix(in srgb,var(--gold) 25%,var(--bd));border-radius:18px;background:var(--card-2);padding:16px 18px;cursor:pointer;
  transition:transform .15s,box-shadow .2s,border-color .2s}
.scard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 55%,var(--bd));box-shadow:0 12px 28px -12px rgba(212,168,69,.5)}
.scard .sh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scard .sn{display:flex;align-items:center;gap:10px}.scard .sn b{font-size:19px}
.scard .avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--grad);color:var(--pri-tx);font-weight:800;font-size:18px}
.scard .sres{text-align:left;display:flex;flex-direction:column;align-items:flex-end}.scard .sres small{font-size:12.5px;font-weight:700}
.scard .sres span{font-size:28px;font-weight:800;line-height:1.1}
.scard .seq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;padding:10px 12px;border-radius:12px;font-size:13.5px;color:var(--mut);
  background:color-mix(in srgb,var(--gold) 7%,transparent)}
.scard .seq b{color:var(--tx);font-size:15px}.scard .seq i{font-style:normal;color:var(--gold);font-weight:800}
.scard .stiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stile{border:1px solid var(--bd);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;background:var(--card)}
.stile small{color:var(--mut);font-size:12.5px;font-weight:600}.stile b{font-size:18px}.stile em{font-style:normal;font-size:11.5px;color:var(--mut)}
.scard .sact{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px}
@media (max-width:560px){.scards{grid-template-columns:1fr}}
/* pending transfers: one card per client, a header with the client's figures, then its transfers in fixed columns */
.paycard{border:1px solid color-mix(in srgb,var(--gold) 28%,var(--bd));border-radius:16px;background:var(--card-2);margin-top:12px;overflow:hidden}
.paycard .ph{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 16px;background:color-mix(in srgb,var(--gold) 9%,transparent);border-bottom:1px solid var(--bd)}
.paycard .who{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}.paycard .who a{color:var(--tx)}
.paycard .figs{display:flex;gap:16px;font-size:13.5px;color:var(--mut)}.paycard .figs b{font-size:15px;margin-inline-start:4px}
.ptbl{width:100%;border-collapse:collapse}.ptbl th{font-size:12.5px;color:var(--mut);font-weight:600;text-align:right;padding:8px 16px;background:transparent}
.ptbl td{background:transparent!important;border:0!important;border-top:1px solid var(--bd)!important;border-radius:0!important;padding:10px 16px;box-shadow:none!important}
.ptbl th:nth-child(1),.ptbl td:nth-child(1){width:120px}.ptbl th:nth-child(2),.ptbl td:nth-child(2){width:120px}
.ptbl th:nth-child(4),.ptbl td:nth-child(4){width:130px}.ptbl th:last-child,.ptbl td:last-child{width:230px}
.ptbl tbody tr:hover{transform:none}
.pbtns{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
/* checkboxes everywhere: a rounded tile in the card's colours, gold when ticked, with a drawn check mark */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:22px!important;height:22px;flex:none;margin:0;padding:0;cursor:pointer;
  border-radius:7px;border:1.5px solid color-mix(in srgb,var(--gold) 45%,var(--bd));background:color-mix(in srgb,var(--card) 85%,transparent);
  display:inline-grid;place-items:center;vertical-align:middle;transition:background .15s,border-color .15s,box-shadow .15s}
input[type=checkbox]:hover{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
input[type=checkbox]::after{content:"";width:6px;height:11px;border:solid var(--pri-tx,#1a1406);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);
  margin-top:-3px;transition:transform .12s}
input[type=checkbox]:checked{background:var(--grad);border-color:transparent;box-shadow:0 0 12px color-mix(in srgb,var(--gold) 40%,transparent)}
input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1)}
input[type=checkbox]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
details summary{cursor:pointer;color:var(--pri);font-weight:600}

/* wizard */
.steps{display:flex;gap:6px;margin:4px 0 24px;padding:6px;counter-reset:s;background:var(--soft);border:1px solid var(--bd);border-radius:16px}
.steps span{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;color:var(--mut);counter-increment:s;transition:background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.steps span::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--card);border:1px solid var(--bd-2);color:var(--mut);transition:all .25s}
.steps span.on{background:var(--grad);color:var(--pri-tx);font-weight:700;box-shadow:var(--glow)}
.steps span.on::before{background:rgba(0,0,0,.14);border-color:transparent;color:inherit}
.steps span.done{color:var(--tx-2)}
.steps span.done::before{content:"✓";background:var(--ink);border-color:var(--ink);color:var(--gold)}
@media (max-width:640px){.steps span{flex-direction:column;gap:4px;padding:8px 4px;font-size:12px;white-space:normal;text-align:center}}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:14px}
.pick label{border:1.5px solid var(--bd);border-radius:14px;padding:13px;cursor:pointer;color:var(--tx);margin:0;display:flex;gap:10px;align-items:flex-start;background:var(--card-2);transition:all .15s}
.pick label:hover{border-color:var(--bd-2);transform:translateY(-1px)}
.pick label:has(input:checked){border-color:var(--gold);background:var(--pri-soft);box-shadow:0 0 0 4px rgba(212,168,69,.14)}
.pick input{width:auto;margin-top:5px;accent-color:var(--gold-2)}
.summary{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;background:var(--card-2);border:1px dashed var(--bd-2);border-radius:14px;padding:16px}
.summary dt{color:var(--mut)}.summary dd{margin:0;font-weight:600}
.wiz-foot{display:flex;gap:10px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--bd)}

/* auth */
.auth-split{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr}
.auth-art{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:44px;display:flex;flex-direction:column;align-items:center;text-align:center}
.auth-art::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 380px at 50% 38%,rgba(212,168,69,.18),transparent 70%)}
.auth-art .emblem{width:min(340px,70%);height:auto;margin-top:24px;position:relative}
.auth-art .name-ar{font-size:30px;font-weight:700;margin-top:18px;position:relative}
.auth-art .name-en{letter-spacing:.32em;font-size:13px;color:#cdb67a;font-family:"Segoe UI",sans-serif;position:relative;display:flex;align-items:center;gap:10px}
.auth-art .name-en::before,.auth-art .name-en::after{content:"";width:34px;height:6px;border-block:2px solid #cdb67a}
.auth-art p{color:#cfc5ad;max-width:440px;position:relative;font-size:16px;margin-top:22px}
.auth-art .feats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px;position:relative}
.auth-art .feats span{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(212,168,69,.08);border:1px solid rgba(212,168,69,.25);font-size:13.5px;color:#efe4c4}
.auth-form{display:grid;place-items:center;padding:32px}
.auth-box{width:min(440px,100%)}
.auth-box h1{font-size:28px}
/* the login: one glass card centred on a dark sky with slow gold light */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;position:relative;overflow:hidden;
  background:radial-gradient(900px 600px at 50% -10%,rgba(212,168,69,.20),transparent 60%),radial-gradient(700px 500px at 100% 110%,rgba(212,168,69,.10),transparent 60%),#07070a;color:#f3ead2}
.auth-glow{position:absolute;width:620px;height:620px;border-radius:50%;top:50%;left:50%;translate:-50% -50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent,rgba(212,168,69,.22),transparent 40%,rgba(255,220,140,.12),transparent 75%);filter:blur(70px);animation:authspin 18s linear infinite}
@keyframes authspin{to{rotate:360deg}}
.auth-card{position:relative;width:min(460px,100%);padding:30px 30px 26px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(212,168,69,.28);box-shadow:0 30px 80px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.auth-head{text-align:center;margin-bottom:8px}
.auth-head .emblem{width:120px;height:auto;display:block;margin:0 auto}
.auth-head .name-ar{font-size:26px;font-weight:800;margin-top:6px}
.auth-head .name-en{letter-spacing:.32em;font-size:11.5px;color:#cdb67a;font-family:"Segoe UI",sans-serif}
.auth-card .auth-box{width:100%;margin-top:14px}
.auth-card h1{font-size:22px;margin:0 0 2px;color:#fff}
.auth-card .mut{color:#b9ad8f}
.auth-card .tabs.seg{background:rgba(0,0,0,.35);border:1px solid rgba(212,168,69,.18);border-radius:16px;padding:5px}
.auth-card .tabs.seg button{color:#cfc5ad;padding:10px 6px;border-radius:12px}
.auth-card .tabs.seg button.on{background:linear-gradient(135deg,#e9c96b,#b8872c);color:#1a1406;box-shadow:0 6px 18px -6px rgba(212,168,69,.7)}
.ain{position:relative;margin-bottom:12px}
.ain>svg{position:absolute;inset-inline-start:15px;top:50%;translate:0 -50%;width:20px;height:20px;fill:none;stroke:#cdb67a;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.ain input{width:100%;height:54px;padding-inline:48px 48px;font-size:16px;border-radius:15px;background:rgba(0,0,0,.35);border:1px solid rgba(212,168,69,.22);color:#fff}
.ain input::placeholder{color:#8f866f;direction:rtl}
.ain input:focus{border-color:#d4a845;box-shadow:0 0 0 4px rgba(212,168,69,.18)}
.ain .eye{position:absolute;inset-inline-end:8px;top:50%;translate:0 -50%;width:38px;height:38px;padding:0;border:0;background:transparent;border-radius:10px;display:grid;place-items:center}
.ain .eye svg{width:20px;height:20px;fill:none;stroke:#8f866f;stroke-width:1.8}
.ain .eye.on svg{stroke:#e9c96b}
.ain .eye:hover{transform:translate(0,-50%);box-shadow:none;background:rgba(212,168,69,.12)}
.auth-card button.big{width:100%;height:54px;font-size:17px;border-radius:15px;margin-top:4px}
.auth-card .alt a{color:#cdb67a}
.auth-card .grid label,.auth-card label{color:#cfc5ad}
.auth-foot{position:relative;margin-top:22px;color:#8f866f;font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.auth-foot svg{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){.auth-glow{animation:none}}
/* Abu Faris's two hats: manager / employee, at the top of the menu */
.modesw{display:flex;gap:4px;padding:4px;margin:0 0 14px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(212,168,69,.2)}
.modesw button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--mut);padding:9px 6px;border-radius:10px;font-weight:700;font-size:13.5px}
.modesw button svg{width:16px;height:16px}
.modesw button.on{background:linear-gradient(135deg,#e9c96b,#b8872c);color:#1a1406;box-shadow:0 6px 16px -6px rgba(212,168,69,.7)}
.modesw button::after{display:none}.modesw button:hover{transform:none}
.tabs{display:flex;gap:4px;margin:18px 0;background:var(--bg-2);padding:5px;border-radius:14px}
.tabs button{flex:1;border:0;background:transparent;border-radius:10px;padding:9px 6px;font-size:13.5px}
.tabs button.on{background:var(--card);box-shadow:var(--sh);font-weight:700;color:var(--pri)}
.auth-box .alt{text-align:center;margin-top:18px}

/* modal & toast */
.modal{position:fixed;inset:0;background:rgba(5,5,6,.6);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;padding:16px;animation:fade .15s}
.modal .box{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:22px;width:min(600px,100%);max-height:90vh;overflow:auto;box-shadow:var(--sh-lg);animation:rise .2s ease-out;border-top:3px solid var(--gold)}
@keyframes fade{from{opacity:0}}@keyframes rise{from{transform:translateY(14px) scale(.98);opacity:0}}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--gold-1);border:1px solid rgba(212,168,69,.35);padding:12px 20px;border-radius:14px;z-index:60;max-width:90vw;box-shadow:var(--sh-lg);animation:rise .2s}
.empty{padding:34px 16px;text-align:center;color:var(--mut)}
.empty svg{width:40px;height:40px;opacity:.5;display:block;margin:0 auto 8px}

/* lists */
.item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--bd);border-radius:14px;background:var(--card-2);margin-bottom:8px}
.loads{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.loadcard{position:relative;border:1px solid var(--bd);border-radius:18px;padding:18px;background:var(--card);box-shadow:var(--sh);transition:transform .15s,box-shadow .15s;overflow:hidden}
.loadcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.loadcard::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--grad)}
.loadcard .route{font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px}
.loadcard .fare{font-size:22px;font-weight:800;color:var(--pri)}
.pub-top{display:flex;align-items:center;gap:14px;padding:14px 28px;background:var(--night);color:#fff;border-bottom:1px solid rgba(212,168,69,.2)}

@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:280px;transform:translateX(110%);transition:transform .25s;box-shadow:var(--sh-lg)}
  .side.open{transform:none}
  .menu-btn{display:inline-flex}
  .topbar{padding:12px 16px}.topbar .search{display:none}
  main{padding:18px 16px 60px}
  .auth-split{grid-template-columns:1fr}.auth-art{padding:28px}.auth-art .emblem{width:200px}
  .hero .scene{width:100%;opacity:.35}
}
@media (max-width:640px){th,td{padding:9px 7px;font-size:13px}.summary{grid-template-columns:110px 1fr}.hide-s{display:none}.hero{padding:22px}.hero h1{font-size:22px}}
@media print{.side,.topbar,.noprint{display:none!important}.layout{display:block}body{background:#fff}.card{border:0;box-shadow:none}}

tr.grp td{background:color-mix(in srgb,var(--pri,#0b6b5c) 9%,transparent);border-top:2px solid var(--bd);padding-top:10px}