/* ===========================================================
   توكتوك دكرنس — لوحة مدن مصوّرة نهارية بألوان دلتا مصرية
   =========================================================== */
:root{
  --paper:#F4EDE0;
  --block:#EDE3D2;
  --line:#C9B79C;
  --line-d:#B3A186;
  --road:#8A7A63;
  --water:#6FA8B8;
  --green:#7C9A6B;
  --green-d:#5F7C51;
  --move:#F2A03D;
  --move-d:#B87A24;
  --primary:#1F6F5C;
  --primary-d:#14493C;
  --danger:#C0503F;
  --danger-d:#8E3628;
  --ink:#2A2620;
  --muted:#6B6152;
  --card:#FFFFFF;
  --r:14px;
  --sh:4px 4px 0 rgba(42,38,32,.20);
  --sh-sm:2px 2px 0 rgba(42,38,32,.22);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:600;
  font-size:15px;
  line-height:1.5;
  overflow:hidden;
  overscroll-behavior:none;
}
button,input,select,textarea{font-family:inherit;font-weight:700;font-size:15px;color:var(--ink)}
button{cursor:pointer;user-select:none;-webkit-user-select:none}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12.5px}

/* ===================== الهيكل ===================== */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.stage{flex:1;min-height:0;position:relative;display:flex}
.view{display:none;position:absolute;inset:0;flex-direction:column}
.view.is-active{display:flex}
.view-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 12px 26px;-webkit-overflow-scrolling:touch}
.view-title{
  font-size:16px;font-weight:900;margin:6px 2px 10px;display:flex;align-items:center;gap:8px;
}
.view-title::before{
  content:"";width:8px;height:18px;border-radius:3px;background:var(--primary);display:inline-block;
}

/* ===================== الشريط العلوي ===================== */
.topbar{
  background:var(--primary);color:#fff;
  border-bottom:3px solid var(--primary-d);
  padding:8px 12px 7px;
  display:flex;flex-direction:column;gap:7px;
  flex:none;
}
.tb-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.driver-box{display:flex;align-items:center;gap:9px;min-width:0}
.driver-avatar{width:42px;height:42px;flex:none;border-radius:50%;overflow:hidden;border:2.5px solid #ffffff;box-shadow:0 2px 0 rgba(0,0,0,.18);background:#fff}
.driver-avatar svg{display:block;width:100%;height:100%}
.driver-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.driver-txt b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.driver-txt span{font-size:11px;opacity:.82;font-weight:600}
.tb-actions{display:flex;align-items:center;gap:7px;flex:none}
.status-chip{
  font-size:12px;font-weight:900;padding:5px 10px;border-radius:999px;
  background:#FBE8C8;color:#7A4B12;border:2px solid #E0B473;white-space:nowrap;
}
.status-chip[data-state="busy"]{background:#F6C9BE;color:#7A2A1B;border-color:#D98C79}
.status-chip[data-state="trip"]{background:#CDE5DC;color:#123F33;border-color:#8FC4B2;animation:chipPulse 1.4s ease-in-out infinite}
@keyframes chipPulse{50%{opacity:.6}}
.btn-pause{
  background:#FFFFFF;color:var(--primary-d);border:2px solid #B7D6CB;box-shadow:var(--sh-sm);
}
.btn-pause.is-off{background:var(--move);color:#3D2706;border-color:var(--move-d)}
.tb-stats{display:flex;gap:6px}
.stat{
  flex:1;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.28);
  border-radius:11px;padding:4px 7px;display:flex;flex-direction:column;line-height:1.15;
  min-width:0;
}
.stat span{font-size:10px;opacity:.85;font-weight:600;white-space:nowrap}
.stat b{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===================== الخريطة ===================== */
.map-wrap{
  position:relative;flex:1;min-height:0;width:100%;
  overflow:hidden;background:#CBD9AE;touch-action:none;
  border-bottom:3px solid var(--line-d);
}
.nm-map > .map-wrap{position:absolute;inset:0;flex:none;border:0}
#mapSvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pin-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pin-layer.nav-mode .pin .lbl{display:none}
.pin-layer.nav-mode .pin.lm{opacity:.35}

.map-tools{
  position:absolute;left:10px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:6;
}
.map-tools button{
  width:42px;height:42px;border-radius:12px;background:#fff;color:var(--ink);
  border:2px solid var(--ink);box-shadow:var(--sh-sm);font-size:19px;font-weight:900;
  display:grid;place-items:center;line-height:1;
}
.map-tools button:active{transform:translate(2px,2px);box-shadow:none}
.map-flags{
  position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:6;
  max-width:62%;
}
.flag{
  font-size:11.5px;font-weight:800;padding:5px 9px;border-radius:999px;border:2px solid var(--ink);
  background:#fff;color:var(--ink);box-shadow:var(--sh-sm);white-space:nowrap;
  display:flex;align-items:center;gap:5px;
}
.flag.rain{background:#8FA6B0;color:#0F2A33;border-color:#3C5C67}
.flag.gate{background:var(--danger);color:#fff;border-color:var(--danger-d)}
.flag.night{background:#3C4257;color:#F4EDE0;border-color:#20243A}
.btn-locate{
  position:absolute;right:10px;bottom:12px;z-index:6;
  display:flex;align-items:center;gap:5px;background:#fff;color:var(--ink);
  border:2px solid var(--ink);box-shadow:var(--sh-sm);padding:9px 12px;border-radius:12px;font-size:13px;
}
.btn-locate:active{transform:translate(2px,2px);box-shadow:none}

/* ===================== الأعلام على الخريطة ===================== */
.pin{
  position:absolute;left:0;top:0;width:34px;height:34px;
  display:grid;place-items:center;border:0;background:none;padding:0;
  pointer-events:auto;transform-origin:50% 50%;will-change:transform;
}
.pin .ico{
  width:30px;height:30px;border-radius:10px;border:2.5px solid var(--ink);
  box-shadow:2px 2px 0 rgba(42,38,32,.28);display:grid;place-items:center;
}
.pin .ico svg{width:19px;height:19px;display:block}
.pin .lbl{
  position:absolute;top:100%;margin-top:2px;white-space:nowrap;font-size:11px;font-weight:800;
  background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:1px 6px;
  box-shadow:2px 2px 0 rgba(42,38,32,.16);
}
.pin-layer.labels-off .pin .lbl{display:none}
.pin.lm:active .ico{transform:translate(1px,1px)}
.pin.mk{pointer-events:none}
.pin.mk .ico{border-radius:50%;width:36px;height:36px;background:var(--move)}
.pin.mk .ring{
  position:absolute;width:36px;height:36px;border-radius:50%;
  border:3px solid var(--move);animation:ring 1.5s ease-out infinite;
}
@keyframes ring{
  0%{transform:scale(1);opacity:.85}
  100%{transform:scale(2.5);opacity:0}
}
.pin.tt{pointer-events:none;z-index:8}
.pin.tt svg{width:44px;height:26px;display:block;filter:drop-shadow(2px 3px 0 rgba(42,38,32,.28))}
.pin.drv{pointer-events:none;z-index:6}
.pin.focus .ico{border-color:var(--danger)}
.pin.focus .ring{border-color:var(--danger);animation:ring 1.4s ease-out infinite}
.avatar-chip{
  width:44px;height:44px;border-radius:50%;overflow:hidden;border:3px solid var(--ink);
  background:#fff;box-shadow:2px 2px 0 rgba(42,38,32,.25);
}
.avatar-chip img{width:100%;height:100%;object-fit:cover;display:block}
.chip-tag{
  position:absolute;top:100%;margin-top:3px;white-space:nowrap;font-size:10.5px;font-weight:900;
  padding:1px 7px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);
}
.chip-tag.wait{background:#FBE8C8;color:#7A4B12}
.chip-tag.board{background:var(--move);color:#3D2706}
.chip-tag.arrive{background:var(--primary);color:#fff;border-color:var(--primary-d)}

/* ===================== ورقة الطلبات ===================== */
.sheet{
  flex:none;background:var(--paper);padding:7px 10px 9px;
  display:flex;flex-direction:column;gap:7px;
  max-height:44%;min-height:96px;
}
.sheet-head{display:flex;align-items:center;gap:7px}
.sheet-title{font-size:14.5px;font-weight:900}
.badge{
  background:var(--move);color:#3D2706;border:2px solid var(--move-d);border-radius:999px;
  font-size:11.5px;font-weight:900;padding:1px 8px;min-width:24px;text-align:center;
}
.badge.zero{background:#E3DACA;color:var(--muted);border-color:var(--line)}
.sheet-hint{font-size:11.5px;color:var(--muted);font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-more{display:none}
.orders-strip{
  display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 7px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.orders-strip::-webkit-scrollbar{height:5px}
.orders-strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

/* ===================== بطاقة الطلب ===================== */
.order-card{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);padding:9px 10px 10px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:7px;
}
.orders-strip .order-card{width:262px;flex:none;scroll-snap-align:start}
.orders-list .order-card{width:100%}
.order-card.dying{animation:cardOut .3s ease forwards}
@keyframes cardOut{to{transform:scale(.94) translateY(6px);opacity:0}}
.oc-bar-wrap{position:absolute;top:0;left:0;right:0;height:5px;background:#EFE6D5}
.oc-bar{height:100%;background:var(--primary);transition:width .2s linear}
.oc-bar.warn{background:var(--move)}
.oc-bar.crit{background:var(--danger)}
.oc-head{display:flex;align-items:center;gap:8px;padding-top:4px}
.avatar{
  width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;
  border:2.5px solid var(--ink);background:#F0E6D6;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.oc-who{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.oc-who b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-who span{font-size:11px;color:var(--muted);font-weight:600}
.oc-count{
  font-size:16px;font-weight:900;background:#E7F0EC;color:var(--primary-d);
  border:2px solid var(--primary);border-radius:10px;min-width:42px;text-align:center;padding:2px 4px;
  font-variant-numeric:tabular-nums;flex:none;
}
.oc-count.warn{background:#FBE8C8;color:#7A4B12;border-color:var(--move-d)}
.oc-count.crit{background:#F6C9BE;color:#7A2A1B;border-color:var(--danger);animation:chipPulse 1s infinite}
.oc-route{display:flex;flex-direction:column;gap:2px;background:#FBF6EC;border:2px dashed var(--line);border-radius:11px;padding:6px 8px}
.oc-point{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;min-width:0}
.oc-point span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink);flex:none}
.dot.from{background:var(--move)}
.dot.to{background:var(--primary)}
.oc-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.oc-meta span{
  font-size:11.5px;font-weight:800;background:#F1E9DB;border:2px solid var(--line);
  border-radius:999px;padding:1px 8px;color:#4C4437;
}
.oc-meta .fare{background:#E7F0EC;border-color:var(--primary);color:var(--primary-d);font-size:13px}
.oc-actions{display:flex;gap:7px}
.oc-actions .btn{flex:1;min-height:46px}
.oc-actions .btn-ghost{flex:0 0 92px}

.orders-list{display:flex;flex-direction:column;gap:11px}
.empty-state{
  border:2px dashed var(--line);border-radius:var(--r);padding:26px 16px;text-align:center;
  background:#FAF4E8;color:var(--muted);font-size:13.5px;
}
.empty-state b{display:block;font-size:15px;color:var(--ink);margin-bottom:5px}

/* ===================== أزرار ===================== */
.btn{
  border:2px solid var(--ink);border-radius:12px;padding:9px 13px;min-height:44px;
  background:#fff;color:var(--ink);box-shadow:var(--sh-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .11s ease,box-shadow .11s ease;
  font-weight:800;
}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--sh-sm)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary-d);box-shadow:2px 2px 0 rgba(20,73,60,.55)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger-d);box-shadow:2px 2px 0 rgba(142,54,40,.55)}
.btn-ghost{background:#fff;color:var(--ink)}
.btn-mini{min-height:36px;padding:5px 10px;font-size:12.5px;border-radius:10px}
.btn-mini2{min-height:38px;padding:6px 11px;font-size:12.5px}
.btn-wide{width:100%}
.btn.on{background:var(--move);color:#3D2706;border-color:var(--move-d)}
.btn-icon{flex-direction:column;gap:2px;font-size:10.5px;padding:6px 8px;min-height:56px;min-width:56px}
.btn-icon svg{width:20px;height:20px}

/* ===================== بطاقات ونماذج ===================== */
.card{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sh);padding:12px;display:flex;flex-direction:column;gap:11px;margin-bottom:14px;
}
.field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--muted)}
.field-row{display:flex;gap:9px}
.field-row .field{flex:1;min-width:0}
.field select,.field input,.field textarea{
  border:2px solid var(--line-d);border-radius:11px;padding:9px 10px;background:#FFFDF8;
  font-size:15px;font-weight:700;color:var(--ink);min-height:44px;width:100%;
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(0% + 14px) 19px,calc(0% + 19px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field textarea{resize:vertical;min-height:58px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(31,111,92,.4);outline-offset:1px;border-color:var(--primary)}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.row-actions .btn{flex:1;min-width:120px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:9px}
.fare-lines{display:flex;flex-direction:column;gap:5px;border-top:2px dashed var(--line);padding-top:9px}
.fare-line{display:flex;justify-content:space-between;font-size:13px;font-weight:700}
.fare-line span:first-child{color:var(--muted)}
.fare-line.hl span:last-child{color:var(--danger)}
.fare-total{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--primary);color:#fff;border:2px solid var(--primary-d);border-radius:12px;padding:9px 12px;
  box-shadow:var(--sh-sm);
}
.fare-total b{font-size:21px;font-weight:900}
.switch-row{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;cursor:pointer;min-height:44px}
.switch-row input{width:20px;height:20px;accent-color:var(--primary);flex:none}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-box{
  background:#FAF4E8;border:2px solid var(--line);border-radius:12px;padding:7px 6px;
  display:flex;flex-direction:column;gap:1px;text-align:center;min-width:0;
}
.stat-box span{font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-box b{font-size:16px;font-weight:900}
.total-row{border-top:2px dashed var(--line);padding-top:9px;font-size:13.5px}
.total-row b{font-size:17px;color:var(--primary-d)}
.svc-note{font-size:12px;color:var(--muted);font-weight:600;margin:0;line-height:1.55}
.svc-note.ok{color:var(--primary-d);font-weight:800}
.svc-note.err{color:var(--danger);font-weight:800}
.addr-out{display:flex;flex-direction:column;gap:8px}
.addr-hit{
  display:flex;align-items:center;gap:9px;background:#FAF4E8;border:2px solid var(--line);
  border-radius:12px;padding:8px 9px;
}
.addr-hit .ico{width:30px;height:30px;border-radius:9px;border:2.5px solid var(--ink);display:grid;place-items:center;flex:none}
.addr-hit .ico svg{width:18px;height:18px}
.addr-hit .txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.addr-hit .txt b{font-size:13.5px;font-weight:800}
.addr-hit .txt span{font-size:11px;color:var(--muted)}
.addr-hit .btn{min-height:38px;padding:5px 10px;font-size:12px;flex:none}
.trips-log{display:flex;flex-direction:column;gap:8px}
.trip-row{
  display:flex;align-items:center;gap:9px;background:#fff;border:2px solid var(--line);
  border-radius:12px;padding:8px 9px;box-shadow:var(--sh-sm);
}
.trip-row .avatar{width:38px;height:38px}
.trip-row .tr-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.trip-row .tr-txt b{font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip-row .tr-txt span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip-row .tr-fare{font-size:13.5px;font-weight:900;color:var(--primary-d);flex:none}
.trip-row .stars{font-size:11px;color:var(--move-d);font-weight:900}
.foot-note{
  font-size:11.5px;color:var(--muted);text-align:center;line-height:1.6;padding:6px 8px 18px;font-weight:600;
}

/* ===================== شريط التبويبات ===================== */
.tabbar{
  flex:none;display:flex;background:#fff;border-top:3px solid var(--line-d);padding:4px 4px 5px;gap:3px;
}
.tab{
  flex:1;border:2px solid transparent;background:#fff;color:var(--muted);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;min-height:52px;
  font-size:10.5px;font-weight:800;position:relative;
}
.tab svg{width:22px;height:22px}
.tab.is-active{background:#E7F0EC;color:var(--primary-d);border-color:var(--primary)}
.tab-badge{
  position:absolute;top:2px;inset-inline-start:50%;margin-inline-start:2px;
  background:var(--move);color:#3D2706;border:2px solid var(--move-d);border-radius:999px;
  font-size:9.5px;font-weight:900;padding:0 5px;font-style:normal;line-height:1.5;
}
.tab-badge.zero{display:none}

/* ===================== الملاحة ===================== */
.navmode{
  position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;flex-direction:column;
}
.navmode.hidden{display:none}
.nm-top{
  flex:none;background:var(--primary);color:#fff;padding:9px 12px 10px;
  border-bottom:3px solid var(--primary-d);display:flex;flex-direction:column;gap:4px;
}
.nm-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nm-phase{
  font-size:11px;font-weight:900;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.34);
  border-radius:999px;padding:2px 10px;
}
.nm-rider{font-size:11.5px;font-weight:700;opacity:.9;display:flex;align-items:center;gap:5px}
.nm-rider .mini{width:22px;height:22px;border-radius:50%;overflow:hidden;border:2px solid #fff;flex:none}
.nm-rider .mini img{width:100%;height:100%;object-fit:cover;display:block}
.nm-instr{font-size:16.5px;font-weight:900;line-height:1.35;display:flex;align-items:center;gap:7px}
.nm-instr .arrow{font-size:22px;line-height:1;flex:none;color:var(--move)}
.nm-next{font-size:12px;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm-meta{display:flex;gap:8px;font-size:11.5px;font-weight:800}
.nm-meta span{background:rgba(0,0,0,.18);border-radius:999px;padding:2px 9px}
.nm-alert{
  margin-top:3px;background:var(--danger);color:#fff;border:2px solid var(--danger-d);
  border-radius:11px;padding:6px 9px;font-size:12.5px;font-weight:800;
  display:flex;align-items:center;gap:8px;
}
.nm-alert.warn{background:var(--move);color:#3D2706;border-color:var(--move-d)}
.nm-alert .btn{min-height:34px;padding:3px 9px;font-size:11.5px;margin-inline-start:auto}
.nm-map{flex:1;min-height:0;position:relative;overflow:hidden;background:#CBD9AE}
.nm-actions{flex:none;padding:8px 12px;background:var(--paper);border-top:3px solid var(--line-d)}
.nm-dock{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px 12px;background:var(--paper);border-top:3px solid var(--line-d);
}
.nm-steer{display:flex;gap:10px}
.steer-btn{
  width:66px;height:66px;border-radius:20px;background:#fff;color:var(--ink);
  border:2.5px solid var(--ink);box-shadow:var(--sh);display:grid;place-items:center;
  transition:transform .09s ease,box-shadow .09s ease,background .09s;
}
.steer-btn svg{width:30px;height:30px}
.steer-btn:active,.steer-btn.held{background:var(--move);transform:translate(2px,2px);box-shadow:none}
.nm-acts{display:flex;gap:9px}
.navmode .btn{color:var(--ink)}
.navmode .btn-primary{color:#fff}
.navmode .btn-ghost{color:var(--ink)}

/* ===================== النافذة المنبثقة ===================== */
.modal{
  position:fixed;inset:0;z-index:80;background:rgba(42,38,32,.5);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-card{
  background:var(--card);border:2.5px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 rgba(42,38,32,.3);
  padding:15px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:11px;
}
.modal-card h3{margin:0;font-size:18px;font-weight:900}
.modal-sub{font-size:12.5px;color:var(--muted);font-weight:600;margin:0}
.stars-row{display:flex;gap:6px;justify-content:center}
.star{
  width:46px;height:46px;border-radius:12px;border:2px solid var(--line-d);background:#FFFDF8;
  font-size:23px;line-height:1;display:grid;place-items:center;color:#C9B79C;
}
.star.on{background:var(--move);border-color:var(--move-d);color:#7A4B12}
.recap{background:#FAF4E8;border:2px dashed var(--line);border-radius:12px;padding:9px;display:flex;flex-direction:column;gap:5px}
.recap .fare-line{font-size:13px}

/* ===================== التوست ===================== */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);
  background:var(--ink);color:#fff;border:2px solid #000;border-radius:12px;
  padding:9px 15px;font-size:13px;font-weight:800;z-index:95;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===================== شاشات قصيرة ===================== */
@media (max-height:700px){
  .sheet{max-height:46%}
  .stats-grid-6{grid-template-columns:repeat(3,1fr)}
}
@media (max-height:620px){
  .tb-stats{display:none}
  .topbar{padding:6px 10px 6px;gap:0}
  .driver-avatar{width:36px;height:36px}
  .driver-txt b{font-size:13px}
  .sheet{min-height:82px;padding:5px 9px 7px}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-height:470px){
  .orders-strip{display:none}
  .sheet{max-height:none}
  .sheet-more{display:inline-flex}
  .tabbar{padding:2px 4px 3px}
  .tab{min-height:44px;font-size:9.5px}
  .tab svg{width:19px;height:19px}
  .btn-locate,.map-tools button{width:38px;height:38px}
  .steer-btn{width:56px;height:56px;border-radius:17px}
  .nm-top{padding:6px 10px 7px}
  .nm-instr{font-size:14.5px}
  .nm-next{display:none}
}
@media (min-width:720px){
  .view-scroll{padding:18px 22px 30px;max-width:760px;margin:0 auto;width:100%}
  .orders-strip .order-card{width:300px}
  .driver-avatar{width:46px;height:46px}
  .stat span{font-size:10.5px}
  .stat b{font-size:15px}
  .steer-btn{width:74px;height:74px}
}
@media (prefers-reduced-motion:reduce){
  .pin.mk .ring{animation:none}
  .status-chip[data-state="trip"]{animation:none}
  .oc-count.crit{animation:none}
  .toast{transition:none}
}