/* ==========================================================================
   PowerFix — التصميم | Styles
   يدعم العربي/الإنجليزي (RTL/LTR) والوضع الفاتح/الغامق
   ========================================================================== */

/* ---------- 1. المتغيرات | Tokens ---------- */
:root {
  --bg:            #0f1523;
  --bg-soft:       #161d2e;
  --surface:       rgba(255, 255, 255, .045);
  --surface-2:     rgba(255, 255, 255, .075);
  --border:        rgba(255, 255, 255, .1);
  --border-strong: rgba(255, 255, 255, .18);
  --text:          #eef1f7;
  --text-soft:     #a6b0c6;
  --text-dim:      #7a869e;

  --brand:         #3b82f6;
  --brand-2:       #60a5fa;
  --on-brand:      #ffffff;
  --grad:          linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #60a5fa 100%);
  --grad-soft:     linear-gradient(135deg, rgba(59,130,246,.16), rgba(96,165,250,.1));

  --green:  #34d399;
  --amber:  #fbbf24;
  --red:    #fb7185;
  --blue:   #60a5fa;
  --violet: #c084fc;
  --slate:  #94a3b8;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow:    0 18px 50px -22px rgba(0, 0, 0, .75);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .9);
  --ring:      0 0 0 3px rgba(59, 130, 246, .32);

  --maxw: 1180px;
  --nav-h: 82px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

[data-theme="light"] {
  --bg:            #f5f7fc;
  --bg-soft:       #ffffff;
  --surface:       #ffffff;
  --surface-2:     #eff3fa;
  --border:        rgba(15, 23, 42, .1);
  --border-strong: rgba(15, 23, 42, .18);
  --text:          #0f1523;
  --text-soft:     #475569;
  --text-dim:      #5b6779;   /* slate أغمق شوي: #64748b كان بيعطي تباين 4.44 — تحت حد AA */

  --brand:         #1d4ed8;
  --brand-2:       #3b82f6;
  --on-brand:      #ffffff;
  --grad:          linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
  --grad-soft:     linear-gradient(135deg, rgba(29,78,216,.1), rgba(59,130,246,.08));

  --green:  #059669;
  --amber:  #b45309;
  --red:    #e11d48;
  --blue:   #2563eb;
  --violet: #7c3aed;
  --slate:  #64748b;

  --shadow:    0 16px 40px -24px rgba(15, 23, 42, .35);
  --shadow-lg: 0 40px 80px -40px rgba(15, 23, 42, .35);
}

/* ---------- 2. أساسيات | Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Cairo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="en"] body { font-family: "Inter", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

/* خلفية متوهجة | Ambient glow */
/* تدرّجات بدل blur(120px) — نفس الشكل تقريباً، بس بلا كلفة رسم على الموبايل
   Radial gradients instead of a 120px blur: near-identical look, no GPU cost */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 12% -4%,  rgba(37, 99, 235, .34), transparent 72%),
    radial-gradient(52% 42% at 88% 34%, rgba(30, 64, 175, .30), transparent 72%);
}
[data-theme="light"] .glow {
  background:
    radial-gradient(58% 46% at 12% -4%,  rgba(37, 99, 235, .11), transparent 72%),
    radial-gradient(52% 42% at 88% 34%, rgba(30, 64, 175, .09), transparent 72%);
}

/* ---------- 3. الهيدر | Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.header__inner { display: flex; align-items: center; gap: 14px; width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

.brand { display: flex; align-items: center; margin-inline-end: auto; }
.brand > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brand__tag  { font-size: .72rem; color: var(--text-dim); line-height: 1.3; letter-spacing: 0; }

/* ---------- الشعار | Logo (ملف SVG الأصلي | the original artwork) ---------- */
.pf-logo {
  --pf-h: 44px;                             /* الارتفاع — غيّر هون بس لتكبير الشعار | height knob */
  display: block;
  flex: none;
  height: var(--pf-h);
  width: calc(var(--pf-h) * 1.87);          /* نسبة الشعار الأصلية | native aspect ratio */
  background: url("../logo.svg") no-repeat center / contain;
}
[data-theme="light"] .pf-logo { background-image: url("../logo-light.svg"); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: .92rem;
  color: var(--text-soft);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }

.header__tools { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
  font-weight: 700; font-size: .82rem;
}
.icon-btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .icon-moon { display: none; }
[data-theme="light"] .icon-btn .icon-moon { display: block; }
[data-theme="light"] .icon-btn .icon-sun  { display: none; }

.burger { display: none; }

/* ---------- 4. الأزرار | Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700; font-size: .95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--grad);
  color: var(--on-brand);
  box-shadow: 0 14px 34px -14px rgba(37, 99, 235, .95);
}
.btn--primary:hover { box-shadow: 0 20px 42px -14px rgba(37, 99, 235, 1); }

.btn--ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }

.btn--wa { background: #22c55e; color: #04220f; box-shadow: 0 14px 30px -14px rgba(34, 197, 94, .8); }

.btn--sm { padding: 9px 16px; font-size: .85rem; }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 30px; font-size: 1rem; }

/* ---------- 5. الأقسام | Sections ---------- */
main { position: relative; z-index: 1; }
.section { padding: clamp(64px, 9vw, 108px) 0; }
.section--alt { background: color-mix(in srgb, var(--bg-soft) 60%, transparent); border-block: 1px solid var(--border); }

.sec-head { max-width: 640px; margin-bottom: 46px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--grad-soft);
  border: 1px solid var(--border);
  color: var(--brand);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 16px;
}
.sec-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 12px; }
.sec-head p  { color: var(--text-soft); font-size: 1.03rem; }

/* ---------- 6. الواجهة الرئيسية | Hero ---------- */
.hero { position: relative; padding: clamp(52px, 8vw, 96px) 0 clamp(60px, 8vw, 100px); }
.hero__grid {
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero__sub { margin-inline: auto; }
.hero__actions { justify-content: center; }
.stats { justify-content: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: .84rem; color: var(--text-soft);
  margin-bottom: 22px;
}
.hero__badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .2);
  animation: pulse 2.2s infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }

.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  margin-bottom: 18px;
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 55%, transparent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__sub { color: var(--text-soft); font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 52ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 44px); }
.stat__num {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* أرقام ثابتة العرض — بدونها الرقم بيرجف يمين وشمال وهو عمّال يعدّ
     Fixed-width digits: without them the number jitters while it counts. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.stat__lbl { font-size: .84rem; color: var(--text-dim); }

/* بطاقة حالة الورشة | Workshop status card */
/* لوحة حالة الورشة — بلوحة التحكم | workshop panel, dashboard only */
.workshop {
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 26px;
}
.workshop h2 {
  font-size: .95rem; color: var(--text-dim); font-weight: 700;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 9px;
}
.workshop h2 svg { width: 17px; height: 17px; color: var(--brand); }
.workshop__empty { color: var(--text-dim); font-size: .9rem; }
.job {
  display: flex; align-items: center; gap: 13px;
  padding: 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.job + .job { margin-top: 10px; }
.job__ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--grad-soft);
  color: var(--brand);
}
.job__ico svg { width: 19px; height: 19px; }
.job__body { min-width: 0; flex: 1; }
.job__t { font-size: .9rem; font-weight: 700; }
.job__s { font-size: .78rem; color: var(--text-dim); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--green  { color: var(--green);  background: color-mix(in srgb, var(--green) 14%, transparent);  border-color: color-mix(in srgb, var(--green) 34%, transparent); }
.pill--amber  { color: var(--amber);  background: color-mix(in srgb, var(--amber) 14%, transparent);  border-color: color-mix(in srgb, var(--amber) 34%, transparent); }
.pill--blue   { color: var(--blue);   background: color-mix(in srgb, var(--blue) 14%, transparent);   border-color: color-mix(in srgb, var(--blue) 34%, transparent); }
.pill--violet { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); border-color: color-mix(in srgb, var(--violet) 34%, transparent); }
.pill--red    { color: var(--red);    background: color-mix(in srgb, var(--red) 14%, transparent);    border-color: color-mix(in srgb, var(--red) 34%, transparent); }
.pill--slate  { color: var(--slate);  background: color-mix(in srgb, var(--slate) 14%, transparent);  border-color: color-mix(in srgb, var(--slate) 34%, transparent); }

/* ---------- 7. الخدمات | Services ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.card {
  position: relative;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0;
  width: 100%; height: 2px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.card:hover::after { transform: scaleX(1); }

.card__ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--grad-soft);
  border: 1px solid var(--border);
  color: var(--brand);
  margin-bottom: 18px;
}
.card__ico svg { width: 25px; height: 25px; }
.card h3 { font-size: 1.13rem; margin-bottom: 9px; }
.card p { color: var(--text-soft); font-size: .94rem; }
.card__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px;
  font-size: .88rem; font-weight: 700;
  color: var(--brand);
  cursor: pointer;
  background: none; border: none; padding: 0;
}
.card__link svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
html[dir="rtl"] .card::after { transform-origin: right; }
html[dir="rtl"] .card:hover::after { transform: scaleX(1); }
html[dir="rtl"] .card__link svg { transform: scaleX(-1); }
.card__link:hover svg { transform: translateX(4px); }

/* الأيقونة بتتحرك مع الكرت — تفاعل واحد بدل ما كل عنصر يتحرك لحاله
   The icon animates with its card, so the whole tile reads as one control. */
.card__ico {
  transition: transform .35s var(--ease), background .35s var(--ease),
              color .35s var(--ease), border-color .35s var(--ease);
}
/* الحاوية بتكبر شوي وبس — الدوران انشال لأنه بيهزّ الخطوط الرفيعة جوّة
   ويخليها تهتز، وبيتصارع مع حركة الأيقونة نفسها.
   No rotation here: turning a box full of hairline strokes makes them shimmer,
   and it fought with the icon's own motion. */
.card:hover .card__ico {
  transform: scale(1.05);
  background: var(--grad);
  color: #fff;
  border-color: transparent;
}

/* ==========================================================================
   حركة داخل الأيقونة | Icon micro-animation

   القاعدة: **حركة وحدة هادية لكل أيقونة**، وبتنتهي. الوميض السريع بيقرا
   «أيقونة معطّلة» مش حركة مقصودة، فانشال كلياً — بدله الخط **بينرسم** أو
   الشكل بيتحرك حركة واحدة ناعمة.

   وكل الحركات transform أو stroke-dashoffset بس — الاثنين بينفّذهم كرت
   الشاشة بدون ما يعيد رسم الصفحة، فما في تقطيع.

   One calm gesture per icon, then it stops. Rapid blinking reads as a broken
   icon, not a designed motion, so it is gone: lines draw themselves instead.
   Everything animates transform or stroke-dashoffset only - both run on the
   GPU without repainting, so nothing stutters.
   ========================================================================== */
.card__ico [class^="an-"] {
  transform-box: fill-box;
  transform-origin: center;
}

/* الخطوط اللي بتنرسم لحالها | strokes that draw themselves */
.an-draw { stroke-dasharray: var(--len, 40); stroke-dashoffset: 0; }

.card:hover .an-draw,
.card.is-poked .an-draw { animation: icoDraw 1.5s var(--ease); }

.card:hover .an-rise,
.card.is-poked .an-rise { animation: icoRise 1.6s var(--ease); }

.card:hover .an-turn,
.card.is-poked .an-turn { animation: icoTurn 1.8s cubic-bezier(.65,0,.35,1); }

.card:hover .an-grow,
.card.is-poked .an-grow { animation: icoGrow 1.4s var(--ease); }

.card:hover .an-nudge,
.card.is-poked .an-nudge { animation: icoNudge 1.6s var(--ease); }

/* أقواس الشبكة: من جوّة لبرّا وحدة ورا وحدة */
.card:hover .an-w1, .card.is-poked .an-w1 { animation: icoWave 1.6s var(--ease); }
.card:hover .an-w2, .card.is-poked .an-w2 { animation: icoWave 1.6s var(--ease) .2s; }
.card:hover .an-w3, .card.is-poked .an-w3 { animation: icoWave 1.6s var(--ease) .4s; }

/* اللمعات: دورة ناعمة، وحدة بعد التانية */
.card:hover .an-spark1, .card.is-poked .an-spark1 { animation: icoSpark 1.8s var(--ease); }
.card:hover .an-spark2, .card.is-poked .an-spark2 { animation: icoSpark 1.8s var(--ease) .35s; }


/* الكفر بينشق: النصين بيتباعدوا شوي وبيرجعوا — الحركة **هي** المعنى هون */
.card:hover .an-halfL, .card.is-poked .an-halfL { animation: icoSplitL 1.6s var(--ease); }
.card:hover .an-halfR, .card.is-poked .an-halfR { animation: icoSplitR 1.6s var(--ease); }
@keyframes icoDraw  { from { stroke-dashoffset: var(--len, 40); } to { stroke-dashoffset: 0; } }
@keyframes icoRise  { from { transform: scaleY(.25); }  to { transform: scaleY(1); } }
@keyframes icoTurn  { from { transform: rotate(0); }    to { transform: rotate(360deg); } }
@keyframes icoGrow  { 0%,100% { transform: scale(1); }  50% { transform: scale(1.22); } }
@keyframes icoNudge { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-1.6px); } }
@keyframes icoWave  { from { transform: scale(.7); opacity: .2; } to { transform: scale(1); opacity: 1; } }
@keyframes icoSplitL { 0%,100% { transform: translateX(0) rotate(0); }
                       45% { transform: translateX(-1.6px) rotate(-2.5deg); } }
@keyframes icoSplitR { 0%,100% { transform: translateX(0) rotate(0); }
                       45% { transform: translateX(1.6px) rotate(2.5deg); } }
@keyframes icoSpark { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.3) rotate(90deg); } }

/* الزئبق بيطلع من تحت لفوق مش من النص */
.an-rise { transform-origin: bottom; }

@media (prefers-reduced-motion: reduce) {
  .card__ico [class^="an-"] { animation: none !important; }
  .an-draw { stroke-dasharray: none; }
}

/* «من شغلنا (٣)» — بتبان بس لما يكون في شغل مربوط بهذه الخدمة */
.card__works {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; margin-inline-start: 16px;
  padding: 5px 12px; border-radius: 999px;
  font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--text-soft); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: all .2s var(--ease);
}
.card__works::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex: none;
}
.card__works:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.card__works[hidden] { display: none; }

/* خلاصة تبويب الموردين | suppliers tab headline */
.sup-sum {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-bottom: 14px; font-size: .88rem; color: var(--text-dim);
}
.sup-sum b { color: var(--text-soft); font-weight: 800; }
.sup-sum--due b { color: var(--amber); }
.sup-sum--late {
  padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 32%, transparent);
}

/* ==========================================================================
   أجهزة الشطب | Parts machines
   ========================================================================== */
.sv-sum--good b { color: var(--green); }

/* شبكة القطع: كل قطعة زر بيفتح نافذة السحب، ولونه بيقول حالتها من بعيد
   Every part is a button; its colour states its condition at a glance. */
.parts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px; margin-top: 12px;
}
.part {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font: inherit; text-align: start; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-soft);
  transition: all .18s var(--ease);
}
.part:hover { border-color: var(--brand); transform: translateY(-1px); }
.part__n { font-size: .84rem; font-weight: 700; }

/* صورة القطعة على زرّها — بتخليك تميّز مروحتين متشابهين بدون ما تفتح
   The part's own photo on its button: two similar fans are told apart here,
   without opening anything. */
.part__shot {
  position: relative; display: block;
  width: 100%; height: 52px; margin-bottom: 6px;
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
.part__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.part__shot b {
  position: absolute; inset-block-end: 3px; inset-inline-end: 4px;
  padding: 1px 6px; border-radius: 999px;
  font-size: .65rem; font-weight: 800;
  color: #fff; background: rgba(0, 0, 0, .62);
}
.part__s { font-size: .72rem; color: var(--text-dim); }
.part__d { font-size: .68rem; color: var(--text-dim); opacity: .8; }

.part--ok {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border-color: color-mix(in srgb, var(--green) 28%, transparent);
}
.part--ok .part__s { color: color-mix(in srgb, var(--green) 80%, var(--text-dim)); }
.part--used { opacity: .72; }
.part--bad {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, transparent);
  border-color: color-mix(in srgb, var(--red) 26%, transparent);
}
.part--none { opacity: .45; }

/* صور الجهاز | machine photos */
.sv-shots { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.sv-shots img {
  width: 76px; height: 76px; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  transition: transform .2s var(--ease);
}
.sv-shots a:hover img { transform: scale(1.06); border-color: var(--brand); }

/* ==========================================================================
   مخزون الآيسيات | Chip stock
   ========================================================================== */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }

.chip-card {
  display: flex; gap: 14px;
  padding: 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.chip-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.chip-card--out { opacity: .62; }
.chip-card--low { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }

/* الصورة كبيرة عن قصد — الشريحة بتتعرف بشكلها وطباعتها، مش باسمها */
.chip-card__pic {
  position: relative; flex: none;
  width: 104px; height: 104px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface);
  border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-dim);
}
.chip-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.chip-card__pic svg { width: 42px; height: 42px; }
.chip-card__more {
  position: absolute; inset-block-end: 4px; inset-inline-end: 5px;
  padding: 1px 7px; border-radius: 999px; font-size: .66rem; font-weight: 800;
  color: #fff; background: rgba(0, 0, 0, .62);
}

.chip-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chip-card__code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.02rem; font-weight: 800; letter-spacing: .02em;
  word-break: break-all;
}
.chip-card__name { font-size: .82rem; color: var(--text-dim); }

/* وسم التصنيف والمواصفة | family badge and its spec */
.chip-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-kind {
  padding: 2px 9px; border-radius: 6px;
  font-size: .69rem; font-weight: 800; letter-spacing: .02em;
  color: #fff; background: var(--slate);
}
.chip-kind--ic     { background: var(--brand); }
.chip-kind--mosfet { background: #a855f7; }
.chip-kind--bios   { background: var(--amber); color: #1a1408; }
.chip-kind--intel  { background: #0ea5e9; }
.chip-kind--other  { background: var(--slate); }

.chip-spec {
  padding: 2px 9px; border-radius: 6px;
  font-size: .69rem; font-weight: 700;
  color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--border);
}
.chip-spec--v { font-family: ui-monospace, Menlo, monospace; }

/* شريط التصنيفات بيلف لسطر تاني لما يضيق */
.seg--wrap { flex-wrap: wrap; margin-bottom: 10px; }
.seg--wrap .seg__btn b { opacity: .6; font-weight: 800; margin-inline-start: 3px; }
.seg--wrap .seg__btn.is-on b { opacity: .85; }
.seg--wrap[hidden] { display: none; }

.chip-card__qty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip-qty {
  padding: 3px 11px; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  border: 1px solid transparent;
}
.chip-qty--ok {
  color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.chip-qty--low {
  color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent);
  border-color: color-mix(in srgb, var(--amber) 34%, transparent);
}
.chip-qty--out {
  color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 32%, transparent);
}
.chip-card__used { font-size: .76rem; color: var(--text-dim); }

.chip-card__money { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .79rem; color: var(--text-dim); }
.chip-card__money b { color: var(--text-soft); }
.chip-card__margin b { color: var(--green); }

.chip-card__alts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: .76rem; color: var(--text-dim); }
.chip-card__alts code {
  font-family: ui-monospace, Menlo, monospace; font-size: .74rem; font-weight: 700;
  padding: 1px 7px; border-radius: 6px;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.chip-card__note { font-size: .77rem; color: var(--text-dim); font-style: italic; }
.chip-card__acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 6px; }

/* أزرار البحث بالنت جنب خانة الصور */
.lookup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: .82rem; color: var(--text-dim); }
.lookup .is-off { opacity: .4; pointer-events: none; }

/* نتيجة البحث عن قطعة | a part-search hit */
.hit {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.hit + .hit { margin-top: 8px; }
.hit__part { font-weight: 800; font-size: .95rem; color: var(--green); }
.hit__machine { flex: 1; min-width: 140px; color: var(--text-soft); font-size: .88rem; }

.seg--center { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto 26px; }
.seg--center[hidden] { display: none; }

/* ==========================================================================
   الظهور مع النزول | Scroll reveal
   العناصر بتطلع من تحت مع تلاشي أول ما توصلها بالتمرير. بتشتغل مرة وحدة —
   ما بترجع تختفي لما ترجع لفوق، لأن التكرار بيلهي أكثر مما بيعجب.
   Elements rise and fade in the first time they enter the viewport, once only:
   replaying on every scroll-back turns a nice touch into a distraction.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  /* border-color و background مذكورين هون كمان لأن هالقاعدة بتيجي بعد `.card`
     وبتدهس انتقالها — بدونهم إطار الكرت بينط بدل ما يتدرّج عند المرور.
     The card's own transitions are repeated here: this rule comes later and
     would otherwise replace them, making the hover border snap instead of fade. */
  transition: opacity .6s var(--ease), transform .6s var(--ease),
              border-color .28s var(--ease), background .28s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
/* التأخير للظهور بس — ما بدنا المرور بالماوس ينتظر */
[data-reveal].is-in { transition-delay: 0ms; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   احترام إعداد «تقليل الحركة» بالنظام — إلزامي، مش تحسين.
   في ناس الحركة بتسبّبلهم دوخة فعلياً. لما يطفّوها من إعدادات الجهاز،
   كل إشي بيظهر مكانه فوراً وبدون أي انتقال.
   Honouring the OS "reduce motion" setting: for some people motion causes real
   nausea. When it is off, everything appears in place with no transition.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card, .card__ico, .card:hover, .card:hover .card__ico,
  .work-card, .rail__item--tap, .card__link svg {
    transition: none !important;
    transform: none !important;
  }
  * { scroll-behavior: auto !important; }
}
html[dir="rtl"] .card__link:hover svg { transform: scaleX(-1) translateX(4px); }

/* ---------- 8. خطوات العمل | Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; counter-reset: step; }
.step {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.step__n {
  counter-increment: step;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--grad);
  color: var(--on-brand);
  font-weight: 800; font-size: 1.05rem;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .95);
}
.step__n::before { content: counter(step); }
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { color: var(--text-soft); font-size: .92rem; }

/* ---------- 9. ليش إحنا | Why ---------- */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.why__item {
  display: flex; gap: 15px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.why__ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad-soft);
  color: var(--brand);
}
.why__ico svg { width: 21px; height: 21px; }
.why__item h3 { font-size: 1rem; margin-bottom: 5px; }
.why__item p { color: var(--text-soft); font-size: .88rem; line-height: 1.6; }

/* ---------- 10. النموذج | Form ---------- */
.form-wrap {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.form-card {
  padding: clamp(24px, 3.4vw, 38px);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: .88rem; font-weight: 700; color: var(--text-soft); }
.req-star { color: var(--red); font-weight: 700; }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  font-size: .95rem;
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }

/* ==========================================================================
   توهج الخانة المعبّاة تلقائياً | Auto-filled field flash

   لما الزبون يضغط «اطلب هذه الخدمة» من كرت الخدمة، الخانة بتتعبّى لحالها.
   بدون إشارة، الزبون بينزل ما بينتبه إنها اتغيرت، فبيعيد اختيارها أو بيشك
   إنه الضغط ما زبط. التوهج بيقول له «هاي اتعبّت حسب اللي اخترته».

   The field fills itself when a service card is clicked. Without a signal the
   customer scrolls down and never notices, so they re-pick it or assume the
   click did nothing. The flash says "this was set from what you chose".
   ========================================================================== */
@keyframes fieldFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  60%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--brand) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
}
.field--flash .select,
.field--flash .input {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, var(--surface-2));
  animation: fieldFlash 1s var(--ease) 2;
}
.field--flash label { color: var(--brand); }

/* وسم صغير جنب العنوان بيقول من وين إجت القيمة */
.field__auto {
  display: inline-flex; align-items: center; gap: 5px;
  margin-inline-start: 8px; padding: 2px 9px;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  color: #fff; background: var(--brand);
  animation: autoTagIn .35s var(--ease);
}
@keyframes autoTagIn { from { opacity: 0; transform: translateY(-4px); } }

/* مع «تقليل الحركة»: بنخلي التمييز ثابت بدون نبض — الإشارة بتوصل بدون حركة */
@media (prefers-reduced-motion: reduce) {
  .field--flash .select, .field--flash .input { animation: none; }
  .field__auto { animation: none; }
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c87a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: left 14px center;
  padding-inline-end: 15px;
  padding-inline-start: 42px;
}
html[dir="ltr"] .select { background-position: right 14px center; padding-inline-start: 15px; padding-inline-end: 42px; }
.select option { background: var(--bg-soft); color: var(--text); }

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--red); }
.err { display: none; font-size: .78rem; color: var(--red); }
.field.has-error .err { display: block; }

.form-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 6px;
  font-size: .82rem; color: var(--text-dim);
}
.form-note svg { width: 16px; height: 16px; flex: none; margin-top: 4px; }

/* معلومات جانب النموذج | Contact rail */
.rail { display: grid; gap: 14px; }
.rail__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}
.rail__ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad-soft);
  color: var(--brand);
}
.rail__ico svg { width: 19px; height: 19px; }
.rail__lbl { font-size: .78rem; color: var(--text-dim); }
.rail__val { font-weight: 700; font-size: .95rem; word-break: break-word; }

/* صفوف قابلة للضغط: الرقم بيرن، والواتساب بيفتح المحادثة
   Tappable rows: one dials, the other opens the chat. */
.rail__item--tap { text-decoration: none; color: inherit; transition: all .2s var(--ease); }
.rail__item--tap:hover { background: var(--surface-2); border-color: var(--brand); }
.rail__item--tap:hover .rail__ico { background: var(--brand); color: #fff; }
.rail__item--tap:active { transform: scale(.985); }

/* ---------- 11. شاشة النجاح | Success ---------- */
.success { display: none; text-align: center; padding: 14px 0; }
.success.is-on { display: block; animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.success__ico {
  width: 74px; height: 74px;
  display: grid; place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
  color: var(--green);
}
.success__ico svg { width: 36px; height: 36px; }
.success h3 { font-size: 1.5rem; margin-bottom: 8px; }
.success p { color: var(--text-soft); margin-bottom: 22px; }

.ticket-box {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 44px;
  border-radius: var(--r);
  background: var(--grad-soft);
  border: 1px dashed var(--border-strong);
  margin-bottom: 22px;
}
.ticket-box small { color: var(--text-dim); font-size: .78rem; }
.ticket-box strong {
  font-size: 1.7rem; letter-spacing: .06em;
  font-family: "Inter", ui-monospace, monospace;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.success__actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-bottom: 16px; }
.success__hint { font-size: .82rem; color: var(--text-dim); }

/* تنبيه مهم بشاشة النجاح | important notice on the success screen */
.notice {
  display: flex; align-items: flex-start; gap: 11px;
  max-width: 470px;
  margin: 0 auto 20px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.6;
  text-align: start;
}
.notice svg { flex: none; color: var(--amber); margin-top: 3px; }

/* ---------- 12. التتبع | Tracking ---------- */
.track-box { max-width: 620px; margin-inline: auto; }
.track-form { display: flex; gap: 10px; }
.track-form .input { text-align: center; letter-spacing: .1em; font-weight: 700; font-family: "Inter", ui-monospace, monospace; }

.track-result { margin-top: 22px; display: none; }
.track-result.is-on { display: block; animation: rise .4s var(--ease); }
.track-card {
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  text-align: start;
}
.track-card__top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.track-card__id { font-size: 1.28rem; font-weight: 800; font-family: "Inter", ui-monospace, monospace; letter-spacing: .05em; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.kv__k { font-size: .78rem; color: var(--text-dim); }
.kv__v { font-weight: 700; font-size: .93rem; }
.track-note {
  margin-top: 16px; padding: 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .9rem; color: var(--text-soft);
}
.alert {
  padding: 16px 18px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
  color: var(--text-soft);
  font-size: .92rem;
  text-align: start;
}

/* شريط تقدم الحالة | Status progress */
.progress { display: flex; align-items: center; margin-top: 22px; }
.progress__step { flex: 1; display: flex; align-items: center; }
.progress__dot {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: .7rem; font-weight: 800;
}
.progress__bar { flex: 1; height: 3px; background: var(--border); }
.progress__step.is-done .progress__dot { background: var(--grad); border-color: transparent; color: var(--on-brand); }
.progress__bar.is-done { background: var(--brand); }
.progress__labels { display: flex; margin-top: 8px; }
.progress__labels span { flex: 1; font-size: .7rem; color: var(--text-dim); text-align: start; }

/* ---------- من شغلنا | Our work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }

.work-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  padding: 0;
  transition: transform .28s var(--ease), border-color .28s var(--ease);
}
.work-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }

.work-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  overflow: hidden;
}
.work-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-card__media--empty { display: grid; place-items: center; color: var(--text-dim); }
.work-card__media--empty svg { width: 40px; height: 40px; opacity: .5; }

/* شارة الفيديو | video badge */
.work-play {
  position: absolute; inset-block-end: 10px; inset-inline-start: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px);
  color: #fff; font-size: .76rem; font-weight: 700;
}
.work-play svg { width: 13px; height: 13px; }

.work-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.work-card__title { font-size: 1.03rem; font-weight: 800; line-height: 1.35; }
.work-card__line { font-size: .89rem; color: var(--text-soft); }
.work-card__line b { color: var(--text); font-weight: 700; }
.work-card__quote {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .86rem; color: var(--text-soft); font-style: italic;
}

/* نافذة التفاصيل | detail dialog */
.modal__box--wide { width: min(100%, 760px); }
.work-detail__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.work-detail__gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--border); display: block;
}
.work-detail h3 { font-size: 1.3rem; margin-bottom: 16px; }
.work-step { margin-bottom: 16px; }
.work-step__k {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; color: var(--brand);
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 5px;
}
.work-step__v { color: var(--text-soft); font-size: .95rem; white-space: pre-wrap; line-height: 1.7; }
.work-detail__quote {
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--grad-soft);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.work-detail__quote p { font-style: italic; color: var(--text-soft); margin-bottom: 7px; }
.work-detail__quote cite { font-size: .84rem; color: var(--text-dim); font-style: normal; }
.work-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 620px) {
  .work-detail__gallery { grid-template-columns: 1fr 1fr; }
}

/* ---------- التقييمات | Reviews ---------- */
.rev-summary {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.rev-summary__avg {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rev-summary__meta { font-size: .88rem; color: var(--text-dim); }

.stars { display: inline-flex; gap: 3px; direction: ltr; }
.stars svg { width: 17px; height: 17px; }
.stars .on  { color: var(--amber); fill: var(--amber); }
.stars .off { color: var(--border-strong); fill: none; }

.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.rev-card {
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.rev-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rev-card__name { font-weight: 700; font-size: .95rem; }
.rev-card__badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700;
  color: var(--green);
}
.rev-card__badge svg { width: 13px; height: 13px; }
.rev-card p { color: var(--text-soft); font-size: .93rem; }
.rev-card__date { font-size: .76rem; color: var(--text-dim); margin-top: auto; }

/* نموذج التقييم — بيطلع بصفحة التتبّع لما الجهاز يتسلّم */
.rev-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.rev-form h4 { font-size: 1rem; margin-bottom: 14px; }
.rev-form .field { margin-bottom: 14px; }

.star-pick { display: inline-flex; gap: 6px; direction: ltr; }
.star-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-pick label { cursor: pointer; color: var(--border-strong); transition: color .15s var(--ease), transform .15s var(--ease); }
.star-pick label svg { width: 30px; height: 30px; display: block; fill: currentColor; }
.star-pick label:hover { transform: scale(1.12); }
.star-pick.is-set label.on { color: var(--amber); }
.star-pick input:focus-visible + label { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.rev-msg { font-size: .86rem; margin-top: 10px; }
.rev-msg--ok  { color: var(--green); }
.rev-msg--err { color: var(--red); }

/* هيكل تحميل — بدل الفراغ وقت انتظار السيرفر | loading skeleton */
.skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg,
    var(--surface-2) 25%,
    color-mix(in srgb, var(--text) 8%, var(--surface-2)) 37%,
    var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.skel--pill { width: 92px; height: 26px; border-radius: 999px; }
.skel--row  { height: 13px; margin-bottom: 11px; }
.skel--row:nth-child(2) { width: 62%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---------- 13. التذييل | Footer ---------- */
.footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
  padding: 56px 0 26px;
}
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 36px; margin-bottom: 34px; }
.footer h4 { font-size: .95rem; margin-bottom: 15px; }
.footer p, .footer li, .footer a { color: var(--text-soft); font-size: .9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a:hover { color: var(--brand); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: .84rem; color: var(--text-dim);
}
.footer__contact { display: grid; gap: 10px; }
.footer__contact a { display: flex; align-items: center; gap: 10px; }
.footer__contact svg { width: 17px; height: 17px; color: var(--brand); flex: none; }

/* ---------- 14. زر واتساب عائم | Floating WhatsApp ---------- */
.fab {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 55;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  box-shadow: 0 16px 34px -12px rgba(34, 197, 94, .85);
  transition: transform .22s var(--ease);
}
.fab:hover { transform: scale(1.08); }
.fab svg { width: 28px; height: 28px; }

/* ---------- 15. لوحة التحكم | Dashboard ---------- */
.admin-main { position: relative; z-index: 1; padding: 34px 0 70px; }

.login-wrap { min-height: 74vh; display: grid; place-items: center; padding: 30px 0; }
.login-card {
  width: min(100%, 420px);
  padding: 36px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.login-card .pf-logo { margin: 0 auto 20px; }
.login-card h1 { font-size: 1.4rem; margin-bottom: 6px; }
.login-card p { color: var(--text-dim); font-size: .9rem; margin-bottom: 24px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat-card {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.stat-card__lbl { font-size: .82rem; color: var(--text-dim); margin-bottom: 6px; }
.stat-card__num { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.stat-card--brand .stat-card__num { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card--green .stat-card__num { color: var(--green); }
.stat-card--amber .stat-card__num { color: var(--amber); }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.toolbar .input { flex: 1 1 240px; }
.toolbar .select { flex: 0 1 190px; }

.req-list { display: grid; gap: 14px; }
.req {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.req:hover { border-color: var(--border-strong); }
.req__head {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 18px 20px;
  cursor: pointer;
}
.req__id { font-family: "Inter", ui-monospace, monospace; font-weight: 800; letter-spacing: .04em; font-size: .95rem; }
.req__who { min-width: 0; flex: 1; }
.req__name { font-weight: 700; font-size: .98rem; }
.req__meta { font-size: .8rem; color: var(--text-dim); }
.req__chev { color: var(--text-dim); transition: transform .25s var(--ease); }
.req__chev svg { width: 18px; height: 18px; display: block; }
.req.is-open .req__chev { transform: rotate(180deg); }

.req__body { display: none; padding: 0 20px 20px; border-top: 1px solid var(--border); }
.req.is-open .req__body { display: block; padding-top: 18px; }
.req__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.req__issue {
  padding: 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .92rem; color: var(--text-soft);
  margin-bottom: 16px;
  white-space: pre-wrap;
}
.req__actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.req__actions .select { flex: 0 1 190px; }
.btn--danger { background: color-mix(in srgb, var(--red) 15%, transparent); border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.btn--danger:hover { background: color-mix(in srgb, var(--red) 24%, transparent); }

.empty {
  padding: 60px 24px;
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px dashed var(--border-strong);
  color: var(--text-dim);
}
.empty svg { width: 44px; height: 44px; margin-bottom: 14px; opacity: .55; }

.hint-bar {
  display: flex; gap: 10px; align-items: center;
  margin-top: 26px; padding: 13px 16px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .83rem; color: var(--text-dim);
}
.hint-bar svg { width: 16px; height: 16px; flex: none; }

.toast {
  position: fixed;
  inset-block-end: 24px; inset-inline-start: 50%;
  transform: translate(50%, 250%);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--green);
  color: #04220f;
  font-weight: 700; font-size: .9rem;
  box-shadow: var(--shadow-lg);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
html[dir="ltr"] .toast { transform: translate(-50%, 250%); }
.toast.is-on { transform: translate(50%, 0); opacity: 1; }
html[dir="ltr"] .toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- حقل كلمة السر مع زر العين | password field with reveal ---------- */
.pass-wrap { position: relative; display: block; }
.pass-wrap .input { padding-inline-end: 46px; }
.pass-eye {
  position: absolute;
  inset-inline-end: 6px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: none; background: none;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 8px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.pass-eye:hover { color: var(--text); background: var(--surface-2); }
.pass-eye:active { transform: translateY(-50%) scale(.88); }

/* رابط نصّي بشكل زر | plain text link that behaves as a button */
.link-btn {
  display: block; width: 100%; margin-top: 14px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--text-dim); text-align: center;
  padding: 6px; border-radius: 8px;
  transition: color .18s var(--ease);
}
.link-btn:hover { color: var(--brand); }

/* خيارات الاسترجاع | reset choices */
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: inherit; font: inherit; text-align: start; cursor: pointer;
  transition: all .2s var(--ease);
}
.choice:hover:not(:disabled) { border-color: var(--brand); background: var(--surface); }
.choice:disabled { opacity: .55; cursor: not-allowed; }
.choice__ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--grad-soft); color: var(--brand);
}
.choice__ico svg { width: 18px; height: 18px; }
.choice__t { font-weight: 700; font-size: .93rem; }
.choice__s { font-size: .79rem; color: var(--text-dim); margin-top: 2px; }

.note-box {
  padding: 13px 15px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  font-size: .84rem; line-height: 1.6; color: var(--text-soft);
  margin-bottom: 16px;
}
.code-input { text-align: center; letter-spacing: .5em; font-size: 1.3rem; font-weight: 700; }

/* العينين فوق بعض بنفس الخانة، وبيتبادلوا بتلاشي ودوران خفيف بدل ما
   وحدة تختفي وتظهر التانية فجأة.
   The two eyes share one grid cell and cross-fade with a slight turn, instead
   of one vanishing and the other appearing in its place. */
.pass-eye svg {
  grid-area: 1 / 1;
  transition: opacity .22s var(--ease), transform .28s var(--ease);
}
.pass-eye .eye-open { opacity: 1; transform: none; }
.pass-eye .eye-shut { opacity: 0; transform: scale(.55) rotate(-25deg); }
.pass-eye.is-shown .eye-open { opacity: 0; transform: scale(.55) rotate(25deg); }
.pass-eye.is-shown .eye-shut { opacity: 1; transform: none; }

/* الشخطة بترتسم لحالها وقت الإخفاء بدل ما تظهر جاهزة */
.eye-slash {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset .3s var(--ease) .05s;
}
.pass-eye.is-shown .eye-slash { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .pass-eye svg, .eye-slash { transition: none; }
  .pass-eye:active { transform: translateY(-50%); }
}

/* ---------- تبويبات لوحة التحكم | dashboard tabs ---------- */
.tabs {
  display: flex; gap: 6px;
  padding: 5px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border: none; border-radius: 999px;
  background: none;
  color: var(--text-soft);
  font-weight: 700; font-size: .92rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-on {
  background: var(--grad);
  color: var(--on-brand);
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .9);
}

/* ذمم الموردين | supplier accounts */
.party { border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.party + .party { margin-top: 10px; }
.party__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.party__name { font-weight: 700; font-size: .96rem; flex: 1; min-width: 0; }
.party__open { font-weight: 800; font-size: .95rem; color: var(--amber); white-space: nowrap; }
.party__open--clear { color: var(--green); }
.party__chev { color: var(--text-dim); transition: transform .25s var(--ease); }
.party__chev svg { width: 17px; height: 17px; display: block; }
.party.is-open .party__chev { transform: rotate(180deg); }
.party__body { display: none; padding: 0 16px 14px; border-top: 1px solid var(--border); }
.party.is-open .party__body { display: block; padding-top: 12px; }

.party-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 0; font-size: .87rem; }
.party-line + .party-line { border-top: 1px dashed var(--border); }
.party-line__amt { font-weight: 700; white-space: nowrap; }
.party-line__desc { color: var(--text-soft); flex: 1; min-width: 120px; }
.party-line__when { color: var(--text-dim); font-size: .8rem; white-space: nowrap; }

/* --- كرت المورد الموسّع | the fuller supplier card --- */
.party__open--in { color: var(--green); }

.party__adhoc, .party__late {
  display: inline-block; margin-inline-start: 7px; padding: 2px 7px;
  border-radius: 999px; font-size: .68rem; font-weight: 700; vertical-align: middle;
  border: 1px solid transparent; cursor: help;
}
.party__adhoc {
  color: var(--slate); background: color-mix(in srgb, var(--slate) 14%, transparent);
  border-color: color-mix(in srgb, var(--slate) 30%, transparent);
}
.party__late {
  color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent);
  border-color: color-mix(in srgb, var(--red) 34%, transparent); cursor: default;
}

.party__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .83rem;
  color: var(--text-dim); padding-bottom: 11px;
}
.party__meta b { color: var(--text-soft); }
.party__note { font-style: italic; }

.party__acts {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}

/* الذمّة المتأخرة لازم تبيّن من غير ما تقرا | a late debt must be visible at a glance */
.party-line--late { border-inline-start: 3px solid var(--red); padding-inline-start: 9px; }

/* كل دفعة انعملت على الذمّة، ومعها زر إلغاء */
.pay-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 7px;
  padding: 2px 4px 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
}
.pay-chip__x {
  border: 0; background: none; cursor: pointer; color: inherit; opacity: .6;
  font-size: .95rem; line-height: 1; padding: 0 3px; border-radius: 50%;
}
.pay-chip__x:hover { opacity: 1; background: color-mix(in srgb, var(--red) 25%, transparent); }

.tag-cash, .tag-ticket {
  display: inline-block; margin-inline-start: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border);
}
.tag-ticket { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; }

.credit-tag--late {
  color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent);
  border-color: color-mix(in srgb, var(--red) 36%, transparent);
}

/* --- فلتر الموردين | supplier filter --- */
.seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 13px;
       border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.seg__btn {
  border: 0; background: none; cursor: pointer; color: var(--text-dim);
  font: inherit; font-size: .83rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; transition: all .2s var(--ease);
}
.seg__btn:hover { color: var(--text-soft); }
.seg__btn.is-on { background: var(--brand); color: #fff; }

.chip--late {
  padding: 3px 10px; border-radius: 999px; font-size: .73rem; font-weight: 700;
  color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 34%, transparent);
}

/* --- صندوق الكاش | cash box --- */
.stat-card--cash .stat-card__num { color: var(--brand); }
.stat-card__lbl { display: flex; align-items: center; gap: 6px; }
.stat-card__edit {
  border: 0; background: none; cursor: pointer; color: var(--text-dim);
  padding: 2px; line-height: 0; border-radius: 6px; opacity: .65;
}
.stat-card__edit:hover { opacity: 1; color: var(--brand); background: var(--surface-2); }
.stat-card__sub { margin-top: 5px; font-size: .72rem; color: var(--text-dim); }

/* --- كشف الحساب | statement --- */
.stmt__top {
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .87rem;
  color: var(--text-dim); padding-bottom: 13px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.stmt__top b { color: var(--text-soft); }
.stmt__due b { color: var(--amber); }
.stmt__rows { max-height: 46vh; overflow-y: auto; margin-bottom: 6px; }
.stmt__row {
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  padding: 10px 0; font-size: .87rem;
}
.stmt__row + .stmt__row { border-top: 1px dashed var(--border); }
.stmt__d { color: var(--text-dim); font-size: .8rem; white-space: nowrap; min-width: 88px; }
.stmt__t { flex: 1; min-width: 130px; color: var(--text-soft); }
.stmt__a { font-weight: 700; white-space: nowrap; }
.stmt__s { color: var(--text-dim); font-size: .79rem; white-space: nowrap; }

.pay-all {
  display: flex; align-items: center; gap: 9px; margin: 4px 0 6px;
  font-size: .89rem; color: var(--text-soft); cursor: pointer;
}

/* --- ربح الطلب | per-order profit --- */
.profit-row {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  margin: 13px 0 4px; padding: 11px 14px; font-size: .86rem;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.profit-row b { color: var(--text-soft); font-weight: 700; }
.profit-row__net { margin-inline-start: auto; font-weight: 700; }
.profit-row__net b { color: inherit; }

/* اختيار مدى تواريخ | custom date range */
.range-pick { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.range-pick label {
  display: inline-flex; align-items: center; gap: 8px;
  padding-inline-start: 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .82rem; color: var(--text-dim);
}
.range-pick .input {
  border: none; background: none; padding: 10px 12px;
  width: 145px; font-size: .88rem;
}
.range-pick .input:focus { box-shadow: none; }

/* جدول التفصيل اليومي | day-by-day table */
.money-sub { font-size: 1rem; margin: 26px 0 14px; color: var(--text-soft); }

.day-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 12px; align-items: center;
  padding: 13px 16px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.day-row + .day-row { margin-top: 8px; }
.day-row--head {
  background: none; border: none; padding-block: 4px;
  font-size: .76rem; color: var(--text-dim); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.day-row__date { font-weight: 700; font-size: .92rem; }
.day-row__v { font-size: .92rem; font-weight: 700; text-align: center; }
.day-row__v--in  { color: var(--green); }
.day-row__v--out { color: var(--amber); }
.day-row__v--zero { color: var(--text-dim); font-weight: 400; }

@media (max-width: 620px) {
  .day-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px; }
  .day-row__date { grid-column: 1 / -1; }
  .day-row--head .day-row__date { display: none; }
}

/* شارة الذمة على حركة مالية | credit badge on a ledger row */
.credit-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
}
.credit-tag--open { color: var(--amber); background: color-mix(in srgb, var(--amber) 13%, transparent); border-color: color-mix(in srgb, var(--amber) 36%, transparent); }
.credit-tag--done { color: var(--slate); background: color-mix(in srgb, var(--slate) 13%, transparent); border-color: color-mix(in srgb, var(--slate) 32%, transparent); }

/* حقول المبالغ داخل بطاقة الطلب | money fields on a request card */
.money-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.money-row .field { margin-bottom: 0; }
.money-input { position: relative; }
.money-input .input { padding-inline-end: 46px; text-align: start; }
.money-input__cur {
  position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  font-size: .82rem; color: var(--text-dim); pointer-events: none;
}
.job__price { font-size: .78rem; color: var(--text-dim); white-space: nowrap; }
@media (max-width: 620px) { .money-row { grid-template-columns: 1fr; } }

/* ---------- نافذة منبثقة | Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal__box {
  width: min(100%, 620px);
  margin: auto;
  padding: clamp(22px, 3.5vw, 34px);
  border-radius: var(--r-xl);
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.modal__box h3 { font-size: 1.25rem; margin-bottom: 6px; }
.modal__sub { color: var(--text-dim); font-size: .88rem; margin-bottom: 22px; }
.modal__actions { display: flex; gap: 10px; margin-top: 4px; }
.modal__actions .btn { flex: 1; }

/* ---------- 16. الاستجابة | Responsive ---------- */
@media (max-width: 980px) {
  .form-wrap { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .burger { display: grid; }
  .nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 20px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-140%);
    transition: transform .35s var(--ease);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: 13px 16px; border-radius: var(--r-sm); font-size: 1rem; }
  .header__cta { display: none; }
}

@media (max-width: 620px) {
  .container { width: calc(100% - 32px); }
  .grid-2 { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .track-form { flex-direction: column; }
  .track-form .btn { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .stats { gap: 22px; }
  .stat { flex: 1 1 40%; }
  .ticket-box { padding: 16px 28px; width: 100%; }
  .toolbar .select, .toolbar .input { flex: 1 1 100%; }
  .req__actions .select { flex: 1 1 100%; }
  .req__actions .btn { flex: 1 1 auto; }
  .progress__labels span { font-size: .62rem; }
  .fab { width: 52px; height: 52px; inset-block-end: 16px; inset-inline-end: 16px; }
}

@media print {
  .header, .fab, .toolbar, .req__actions, .hint-bar, .footer { display: none !important; }
  body { background: #fff; color: #000; }
  .req__body { display: block !important; }
}