/* «مسار» — executive dark theme, RTL. One type scale, one spacing scale, aligned grid. */
@font-face{font-family:Plex;src:url(/static/fonts/plex-ar-400.woff2) format('woff2');font-weight:400;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(/static/fonts/plex-ar-500.woff2) format('woff2');font-weight:500;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(/static/fonts/plex-ar-600.woff2) format('woff2');font-weight:600;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(/static/fonts/plex-ar-700.woff2) format('woff2');font-weight:700;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(/static/fonts/plex-la-400.woff2) format('woff2');font-weight:400;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:Plex;src:url(/static/fonts/plex-la-500.woff2) format('woff2');font-weight:500;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:Plex;src:url(/static/fonts/plex-la-600.woff2) format('woff2');font-weight:600;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:Plex;src:url(/static/fonts/plex-la-700.woff2) format('woff2');font-weight:700;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2212}
:root{
  --bg:#0a1020;--panel:#0e1629;--card:#131d35;--card2:#18243f;--line:#23304f;--ink:#e8eefc;--mute:#93a3c4;--dim:#62728f;
  --teal:#2dd4bf;--gold:#fbbf24;--pink:#f472b6;--green:#34d399;--red:#f87171;--blue:#60a5fa;
  --r:14px;--r2:10px;--s1:6px;--s2:10px;--s3:14px;--s4:18px;--s5:24px;
  --fs-xs:11.5px;--fs-sm:13px;--fs-md:14.5px;--fs-lg:17px;--fs-xl:22px;--fs-2xl:34px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Plex,system-ui,sans-serif;font-size:var(--fs-md);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- header */
.top{height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:0 var(--s4);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0e1730,#0b1224)}
.brand{display:flex;align-items:center;gap:var(--s2);min-width:0}
.logo{width:40px;height:40px;border-radius:12px;background:#0c2230;display:grid;place-items:center;flex:none;border:1px solid #1d4150}
.logo svg{width:30px;height:30px}.logo.big{width:64px;height:64px;border-radius:18px;margin:0 auto var(--s3)}.logo.big svg{width:46px;height:46px}
.titles h1{margin:0;font-size:var(--fs-xl);font-weight:700;line-height:1.1}
.titles p{margin:2px 0 0;color:var(--mute);font-size:var(--fs-xs)}
.tag{margin-inline-start:var(--s2);padding:4px 10px;border-radius:999px;background:#2a2410;color:var(--gold);border:1px solid #4d3f10;font-size:var(--fs-xs);white-space:nowrap}
.modes{display:flex;background:#0a1122;border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.modes button{border:0;background:transparent;color:var(--mute);padding:8px 16px;border-radius:9px;font-size:var(--fs-sm);font-weight:600}
.modes button.on{background:var(--teal);color:#062421}
.actions{display:flex;gap:var(--s2)}
.ghost{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:10px;font-size:var(--fs-sm)}
.ghost:hover{border-color:var(--teal)}

/* ---------- layout */
.layout{display:grid;grid-template-columns:440px 1fr;height:calc(100% - 64px)}
.panel{overflow-y:auto;border-inline-end:1px solid var(--line);background:var(--panel);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#223052;border-radius:8px}
.mapwrap{position:relative;min-width:0}
#map{position:absolute;inset:0;background:#0b1020}
.skeleton{color:var(--mute);padding:var(--s5);text-align:center}

/* ---------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.card h3{margin:0 0 var(--s2);font-size:var(--fs-sm);font-weight:600;color:var(--mute);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.card h3 small{font-weight:400;color:var(--dim);font-size:var(--fs-xs)}
.hero{background:linear-gradient(135deg,#0f3a3a,#10223f 70%);border-color:#1f5a57}
.hero .big{font-size:48px;font-weight:700;line-height:1;color:#fff}
.hero .lbl{font-size:var(--fs-md);font-weight:600;margin-top:var(--s1)}
.hero .row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3)}
.hero .proj{text-align:start;color:#a7f3d0;font-size:var(--fs-sm)}
.hero .proj b{display:block;font-size:var(--fs-xl);color:#fff}
.winwin{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.winwin div{background:#10263a;border:1px solid #1d3d57;border-radius:var(--r2);padding:var(--s2) var(--s3);font-size:var(--fs-sm);line-height:1.5}
.winwin b{display:block;color:var(--teal);font-size:var(--fs-xs);margin-bottom:2px}

/* economics: AFTER (طريق البيت) on the LEFT, BEFORE (مشوار مخصص) on the RIGHT — DOM order [before, after] in RTL */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.duel .side{border-radius:var(--r2);padding:var(--s3);border:1px solid var(--line);background:var(--card2)}
.duel .side.after{border-color:#1f6b52;background:linear-gradient(180deg,#0f2f2a,#122238)}
.duel .side.before{opacity:.92}
.duel .cap{font-size:var(--fs-xs);color:var(--mute)}
.duel .val{font-size:var(--fs-xl);font-weight:700;margin:2px 0}
.duel .sub{font-size:var(--fs-xs);color:var(--dim);line-height:1.5}
.pos{color:var(--green)}.neg{color:var(--red)}
.fine{font-size:var(--fs-xs);color:var(--dim);margin-top:var(--s2);line-height:1.5}

.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.k{background:var(--card2);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2)}
.k b{display:block;font-size:var(--fs-lg);font-weight:700}
.k span{font-size:var(--fs-xs);color:var(--mute)}

/* sliders */
.ctl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px var(--s2);margin-bottom:var(--s2)}
.ctl label{font-size:var(--fs-sm)}
.ctl output{font-weight:700;color:var(--teal);font-size:var(--fs-sm);min-width:64px;text-align:end}
.ctl input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--teal);direction:ltr}

/* comparison table (hub): columns = label | before (right) | after (left) */
table.cmp{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.cmp th{font-weight:600;color:var(--mute);font-size:var(--fs-xs);padding:6px 4px;text-align:center;border-bottom:1px solid var(--line)}
table.cmp th:first-child,table.cmp td:first-child{text-align:start}
table.cmp td{padding:7px 4px;border-bottom:1px solid #1a2542;text-align:center}
table.cmp td.a{font-weight:700;color:#fff}
table.cmp td.b{color:var(--mute)}
table.cmp tr.good td.a{color:var(--green)}
.chipsline{display:flex;flex-wrap:wrap;gap:6px}
.pill{padding:5px 10px;border-radius:999px;background:#0f2f2a;color:#a7f3d0;border:1px solid #1f6b52;font-size:var(--fs-xs);font-weight:600}
.pill.warn{background:#3a1d1d;color:#fecaca;border-color:#6b2a2a}
.scen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.scen button{border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:var(--r2);padding:9px 10px;font-size:var(--fs-sm);text-align:start}
.scen button.on{border-color:var(--gold);background:#2a2410}
.scen button:hover{border-color:var(--teal)}

/* courier list */
.clist{display:flex;flex-direction:column;gap:6px}
.crow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--s2);padding:8px 10px;border-radius:var(--r2);background:var(--card2);border:1px solid transparent;cursor:pointer}
.crow:hover,.crow.sel{border-color:var(--teal)}
.crow .dot{width:12px;height:12px;border-radius:50%}
.crow .nm{font-size:var(--fs-sm);font-weight:600}
.crow .nm small{display:block;font-weight:400;color:var(--dim);font-size:var(--fs-xs)}
.crow .bdg{font-size:var(--fs-xs);padding:3px 8px;border-radius:999px;background:#10263a;color:var(--blue);white-space:nowrap}
.crow .ok{color:var(--green);font-size:var(--fs-xs);white-space:nowrap}
.bar{height:6px;background:#1c2946;border-radius:6px;overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;border-radius:6px}
.privacy{background:#141b2e;border:1px dashed #33476e;color:var(--mute);font-size:var(--fs-xs);line-height:1.6}

/* ---------- map furniture */
.mapbar{position:absolute;top:var(--s3);inset-inline-start:var(--s3);z-index:500;display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.seg{display:flex;background:rgba(10,16,32,.92);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{border:0;background:transparent;color:var(--mute);padding:7px 14px;border-radius:9px;font-size:var(--fs-sm);font-weight:600}
.seg button.on{background:#223052;color:#fff}
.cta{border:0;background:linear-gradient(135deg,#2dd4bf,#22d3ee);color:#042220;font-weight:700;padding:11px 18px;border-radius:12px;font-size:var(--fs-md);box-shadow:0 8px 24px rgba(45,212,191,.35)}
.cta:hover{filter:brightness(1.08)}
.scen-label{background:rgba(42,36,16,.95);border:1px solid #4d3f10;color:var(--gold);padding:7px 12px;border-radius:10px;font-size:var(--fs-sm)}
.legend{position:absolute;bottom:26px;inset-inline-end:var(--s3);z-index:500;background:rgba(10,16,32,.92);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:var(--fs-xs);color:var(--mute);line-height:1.9;max-width:300px}
.legend b{color:var(--ink)}
.legend .ln{display:inline-block;width:26px;height:0;border-top:3px solid var(--teal);vertical-align:middle;margin-inline-end:6px}
.legend .ln.dash{border-top-style:dashed;border-top-color:#8aa0c8}
.busy{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:800;display:flex;gap:var(--s3);align-items:center;background:rgba(10,16,32,.96);border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.busy b{display:block;font-size:var(--fs-lg)}.busy span{color:var(--mute);font-size:var(--fs-sm)}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid #22324f;border-top-color:var(--teal);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* markers */
.mk{display:grid;place-items:center;border-radius:50%;font-size:14px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.mk-hub{width:34px;height:34px;background:#0f172a;border:2px solid var(--gold);font-size:17px}
.mk-lbl{background:rgba(10,16,32,.9);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:2px 7px;font-size:11.5px;white-space:nowrap}
.mk-br{width:22px;height:22px;background:#0f172a;border:1px solid #33476e;font-size:12px;opacity:.55}
.mk-br.used{opacity:1;width:28px;height:28px;font-size:15px;border:2px solid #fff}
.mk-drop{width:20px;height:20px;background:#0f172a;border:2px solid #fff;font-size:11px}
.mk-home{width:30px;height:30px;background:#0f172a;border:2px solid #fff;font-size:16px}
.mk-badge{background:#0f172a;color:#fff;border-radius:999px;padding:2px 8px;font-size:11.5px;font-weight:700;white-space:nowrap;border:2px solid}
.mk-stop{width:9px;height:9px;border-radius:50%;border:2px solid #0a1020}
.mk-stop.late{box-shadow:0 0 0 3px rgba(248,113,113,.7)}
.leaflet-container{font-family:Plex,system-ui,sans-serif;background:#0b1020}
.leaflet-tile-pane{filter:invert(100%) hue-rotate(180deg) brightness(88%) contrast(88%) saturate(55%)}
.leaflet-control-attribution{background:rgba(10,16,32,.8)!important;color:#7d8db0!important;font-size:10px}
.leaflet-control-attribution a{color:#9fb3da!important}
.leaflet-tooltip{background:#0f172a;color:var(--ink);border:1px solid var(--line);font-family:Plex;font-size:12px;border-radius:8px}
.leaflet-tooltip:before{display:none}
path.draw{transition:stroke-dashoffset 1.2s ease-out}
.dimmed{opacity:.12!important}

/* ---------- courier phone view */
.phone{position:absolute;top:70px;inset-inline-end:var(--s3);z-index:600;width:300px;background:#05080f;border-radius:34px;padding:12px;border:1px solid #2b3a5c;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.phone .scr{background:#0f172a;border-radius:24px;overflow:hidden}
.phone .notch{height:22px;display:flex;justify-content:center;align-items:center}
.phone .notch i{width:90px;height:6px;background:#1f2a44;border-radius:6px}
.phone .ph-h{padding:10px 14px;background:#0f3a3a;display:flex;justify-content:space-between;align-items:center}
.phone .ph-h b{font-size:var(--fs-sm)}.phone .ph-h span{font-size:var(--fs-xs);color:#a7f3d0}
.phone .ph-msg{margin:12px;padding:12px;border-radius:14px;background:#132844;border:1px solid #21406a;font-size:var(--fs-sm);line-height:1.7}
.phone .ph-msg b{color:#fff}
.phone ol{list-style:none;margin:0 12px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:210px;overflow-y:auto}
.phone li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:var(--fs-xs);background:#111c33;border-radius:10px;padding:7px 9px}
.phone li em{font-style:normal;color:var(--mute)}
.phone .ph-a{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px}
.phone .acc{border:0;background:var(--green);color:#042d1f;font-weight:700;border-radius:12px;padding:11px;font-size:var(--fs-md)}
.phone .acc.done{background:#1f6b52;color:#d1fae5}
.phone .x{border:1px solid var(--line);background:transparent;color:var(--mute);border-radius:12px;padding:0 12px}

/* ---------- assistant chat */
.chat{position:absolute;bottom:26px;inset-inline-start:var(--s3);z-index:700;width:380px;background:rgba(10,16,32,.97);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden}
.chat.min .chat-head{animation:pulse 2.6s ease-in-out 3}
@keyframes pulse{50%{background:#14506b}}
.chat-head{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:#0f2238;color:var(--ink);padding:11px 14px;font-size:var(--fs-sm);font-weight:700}
.chat-head i{font-style:normal;font-weight:400;color:var(--mute);font-size:var(--fs-xs)}
.chat.min .chat-body{display:none}
.msgs{max-height:230px;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:88%;padding:8px 11px;border-radius:12px;font-size:var(--fs-sm);line-height:1.65;white-space:pre-wrap}
.msg.me{align-self:flex-start;background:#1d3b63}
.msg.bot{align-self:flex-end;background:#132033;border:1px solid var(--line)}
.msg.bot small{display:block;color:var(--dim);font-size:10.5px;margin-top:3px}
.msg.typing{color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
.chips button{border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:999px;padding:5px 10px;font-size:var(--fs-xs)}
.chips button:hover{border-color:var(--teal)}
.askf{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.askf input{flex:1;background:#0b1224;border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:9px 11px;font-family:inherit;font-size:var(--fs-sm)}
.askf button{border:0;background:var(--teal);color:#062421;border-radius:10px;width:40px;font-size:16px}

/* ---------- login */
.login-body{display:grid;place-items:center;min-height:100%;background:radial-gradient(circle at 30% 20%,#12304a,#0a1020 60%)}
.login-card{width:min(360px,92vw);text-align:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 26px}
.login-card h1{margin:0;font-size:30px}.login-card .sub{color:var(--mute);margin:6px 0 12px;font-size:var(--fs-sm)}
.login-card form{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.login-card input{background:#0b1224;border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:12px;font-size:18px;text-align:center;letter-spacing:6px;font-family:inherit}
.login-card button{border:0;background:var(--teal);color:#062421;border-radius:12px;padding:12px;font-weight:700;font-size:var(--fs-md)}
.err{color:var(--red);font-size:var(--fs-sm);min-height:18px}

/* ---------- responsive */
@media (max-width:1100px){.layout{grid-template-columns:380px 1fr}.tag{font-size:10.5px;padding:3px 8px}}   /* the demo tag stays visible on every layout */
@media (max-width:860px){
  .top{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}.titles p{display:none}.actions{display:none}
  .modes{order:3;width:100%}.modes button{flex:1}
  .layout{display:flex;flex-direction:column-reverse;height:auto}
  .mapwrap{height:62vh}.panel{border:0;overflow:visible}
  .chat{position:fixed;inset-inline:10px;width:auto;bottom:10px}.chat.min{width:auto}
  .legend{display:none}.phone{top:auto;bottom:70px;width:260px;inset-inline-end:10px}
  .hero .big{font-size:40px}.hero .row{flex-direction:column;align-items:flex-start}.hero .proj{text-align:start}
  .mapbar{top:8px;inset-inline-start:8px}.cta{padding:9px 14px}
}