/* ================= Track page — premium look ================= */
  /* ---- Accent palette (same names as home.css) ----
     --accent follows --brand (config.php -> brand_color); #f5b400 is only the fallback. */
  :root{
    --accent:var(--brand,#f5b400);
    --accent-light:color-mix(in srgb,var(--accent) 72%,#fff);  /* was #ffd257 */
    --accent-dark:color-mix(in srgb,var(--accent) 76%,#000);   /* was #c98f00 */
  }
  .track-bg { position: relative; isolation: isolate; overflow: hidden; }
  .track-bg::before { content:""; position:absolute; inset:0 0 auto 0; height:1100px; z-index:-2;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }
  .aurora { position:absolute; z-index:-1; border-radius:9999px; opacity:.55; pointer-events:none; will-change: transform; animation: drift 18s ease-in-out infinite alternate; }
  .aurora.a1 { width:620px; height:620px; top:-260px; inset-inline-start:-180px; background: radial-gradient(circle, color-mix(in srgb,var(--accent) 35%,transparent), transparent 65%); }
  .aurora.a2 { width:520px; height:520px; top:120px; inset-inline-end:-200px; background: radial-gradient(circle, rgba(56,189,248,.18), transparent 65%); animation-duration: 22s; }
  @keyframes drift { to { transform: translate(60px, 40px) scale(1.08); } }

  .card { position:relative; background: linear-gradient(180deg, #1a1e25, #121519);
          border-radius: 22px; padding: 28px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
  @media (min-width:768px){ .card { padding: 34px; } }
  .card::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
          background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 40%, color-mix(in srgb,var(--accent) 18%,transparent));
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
  .card.glow { box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent), 0 30px 80px -30px color-mix(in srgb,var(--accent) 35%,transparent); }
  .ico { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--accent); flex-shrink:0;
         background: linear-gradient(140deg, color-mix(in srgb,var(--accent) 22%,transparent), color-mix(in srgb,var(--accent) 4%,transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent); }
  .label { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing:.16em; text-transform: uppercase; color:#5b6470; }
  [dir="rtl"] .label { font-family: Tajawal, sans-serif; font-size: 12px; }

  .chip { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:9999px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
  .chip .dot { width:8px; height:8px; border-radius:9999px; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: ping 1.6s infinite; }
  @keyframes ping { 0% { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);} 100% { box-shadow:0 0 0 10px transparent; } }
  .chip-amber { color:var(--accent); background: color-mix(in srgb,var(--accent) 12%,transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
  .chip-orange{ color:#fdba74; background: rgba(251,146,60,.12); box-shadow: inset 0 0 0 1px rgba(251,146,60,.35); }
  .chip-green { color:#6ee7b7; background: rgba(52,211,153,.12); box-shadow: inset 0 0 0 1px rgba(52,211,153,.35); }
  .chip-red   { color:#fca5a5; background: rgba(248,113,113,.12); box-shadow: inset 0 0 0 1px rgba(248,113,113,.35); }
  .chip-white { color:#e7eaee; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

  /* Reveal on scroll */
  html.js .rv { opacity:0; transform: translateY(26px) scale(.985); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
  html.js .rv.in { opacity:1; transform:none; }

  /* Hero */
  .hero-car { border-radius: 28px; overflow:hidden; position:relative; }
  .hero-car .shade { position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,13,16,.96) 0%, rgba(11,13,16,.75) 45%, rgba(11,13,16,.25) 100%); }
  [dir="rtl"] .hero-car .shade { background: linear-gradient(270deg, rgba(11,13,16,.96) 0%, rgba(11,13,16,.75) 45%, rgba(11,13,16,.25) 100%); }
  .hero-car .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1.08); animation: kenburns 14s ease-out forwards; }
  @keyframes kenburns { to { transform: scale(1); } }
  .scan { position:absolute; inset-inline:0; height:120px; top:-120px; background: linear-gradient(180deg, transparent, color-mix(in srgb,var(--accent) 10%,transparent), transparent); animation: scan 5.5s linear infinite; pointer-events:none; }
  @keyframes scan { to { top: 100%; } }

  .plate { position:relative; display:inline-flex; align-items:center; gap:12px; background:#f4f5f6; color:#0b0d10; border-radius:10px; padding:8px 18px;
           box-shadow: 0 0 0 3px #0b0d10, 0 0 0 5px #f4f5f6, 0 18px 40px -12px rgba(0,0,0,.7); overflow:hidden; font-family:"Saira Condensed", sans-serif; font-weight:800; letter-spacing:.14em; }
  .plate::after { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite 1.2s; }
  @keyframes shine { 0% { left:-60%; } 40%,100% { left:130%; } }
  .plate small { font-size: 11px; letter-spacing:.1em; padding:3px 6px; background:#0b0d10; color:#f4f5f6; border-radius:4px; }

  /* Progress ring */
  .pring { position:relative; width: 190px; height: 190px; }
  .pring svg { width:100%; height:100%; transform: rotate(-90deg); }
  .pring circle { fill:none; stroke-width: 9; stroke-linecap: round; }
  .pring-bg { stroke: rgba(255,255,255,.08); }
  .pring-fg { stroke: var(--c,var(--accent)); stroke-dasharray: 326.7; stroke-dashoffset: 326.7; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c,var(--accent)) 55%, transparent));
             transition: stroke-dashoffset 2s cubic-bezier(.2,.7,.2,1) .3s; }
  .pring.in .pring-fg, .rv.in .pring-fg { stroke-dashoffset: calc(326.7 - 326.7 * var(--p) / 100); }
  .pring-txt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }

  /* Journey */
  .journey { position:relative; }
  .j-track { position:absolute; top: 27px; inset-inline: 7%; height: 4px; border-radius:9999px; background: rgba(255,255,255,.08); }
  .j-fill { position:absolute; top:0; bottom:0; inset-inline-start:0; width:0; border-radius:inherit; background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light)); box-shadow: 0 0 18px color-mix(in srgb,var(--accent) 55%,transparent);
            transition: width 2.2s cubic-bezier(.2,.7,.2,1) .4s; }
  [dir="rtl"] .j-fill { background: linear-gradient(270deg, var(--accent-dark), var(--accent), var(--accent-light)); }
  .journey.in .j-fill { width: var(--w); }
  .j-car { position:absolute; top:-15px; inset-inline-start: 0; width:34px; height:34px; margin-inline-start:-17px; display:grid; place-items:center; color:var(--accent-ink,#0b0d10); background:var(--accent); border-radius:9999px;
           box-shadow: 0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent), 0 8px 24px color-mix(in srgb,var(--accent) 45%,transparent); transition: inset-inline-start 2.2s cubic-bezier(.2,.7,.2,1) .4s; }
  .journey.in .j-car { inset-inline-start: var(--w); }
  [dir="rtl"] .j-car svg { transform: scaleX(-1); }
  .j-step { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .j-dot { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:#161a1f; color:#5b6470; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
           transition: all .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
  .journey.in .j-step.done .j-dot { background: linear-gradient(140deg, var(--accent-light), var(--accent)); color:var(--accent-ink,#0b0d10); box-shadow: 0 10px 30px -8px color-mix(in srgb,var(--accent) 60%,transparent); }
  .journey.in .j-step.now .j-dot { color:var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent); animation: nowpulse 1.8s infinite; }
  @keyframes nowpulse { 0% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);} 100% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 16px color-mix(in srgb,var(--accent) 0%,transparent);} }
  @media (max-width: 767px) {
    .j-track { top:0; bottom:0; inset-inline-start: 28px; inset-inline-end:auto; width:4px; height:auto; }
    .j-fill { width:100% !important; height:0; transition: height 2.2s cubic-bezier(.2,.7,.2,1) .4s; }
    .journey.in .j-fill { height: var(--w); }
    .j-car { display:none; }
    .j-step { flex-direction:row; text-align:start; }
  }

  /* Rows */
  .check-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
  .check-ico { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-weight:800; flex-shrink:0; }
  .check-row.ok .check-ico { color:#34d399; background: rgba(52,211,153,.14); }
  .check-row.warn .check-ico { color:#fb923c; background: rgba(251,146,60,.14); }
  .check-row.na .check-ico { color:#a3abb6; background: rgba(255,255,255,.06); }
  .check-tag { font-size:12px; font-weight:700; padding:5px 10px; border-radius:9999px; white-space:nowrap; }
  .check-row.ok .check-tag { color:#6ee7b7; background: rgba(52,211,153,.12); }
  .check-row.warn .check-tag { color:#fdba74; background: rgba(251,146,60,.12); }
  .line-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .3s, transform .3s; }
  .line-row:hover { background: rgba(255,255,255,.06); transform: translateX(4px); }
  [dir="rtl"] .line-row:hover { transform: translateX(-4px); }
  .line-row.muted { opacity:.55; }
  .line-kind { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
  .line-kind.part { color:#7dd3fc; background: rgba(56,189,248,.12); }
  .line-kind.labour { color:var(--accent); background: color-mix(in srgb,var(--accent) 12%,transparent); }
  .appr { width:26px; height:26px; border-radius:9999px; display:grid; place-items:center; flex-shrink:0; font-weight:700; }
  .appr.yes { color:#0b0d10; background:#34d399; }
  .appr.no { color:#5b6470; background: rgba(255,255,255,.06); }
  .total-box { border-radius:18px; padding:18px 20px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
  .total-box.hi { background: linear-gradient(140deg, var(--accent-light), var(--accent)); color:var(--accent-ink,#0b0d10); box-shadow: 0 18px 40px -16px color-mix(in srgb,var(--accent) 60%,transparent); }
  .total-box.hi .cur { opacity:.7; }
  .mini { border-radius:16px; padding:16px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
  .person { display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:9999px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
  [dir="rtl"] .person { padding:10px 10px 10px 16px; }
  .avatar { width:38px; height:38px; border-radius:9999px; display:grid; place-items:center; font-weight:800; color:var(--accent-ink,#0b0d10); background: linear-gradient(140deg, var(--accent-light), var(--accent)); }
  .bullet { position:relative; padding-inline-start: 22px; color:#e7eaee; }
  .bullet::before { content:""; position:absolute; inset-inline-start:0; top:.6em; width:10px; height:2px; background:var(--accent); }
  .quote-box { border-radius:16px; padding:16px 20px; background: linear-gradient(90deg, color-mix(in srgb,var(--accent) 10%,transparent), transparent); border-inline-start: 3px solid var(--accent); }
  .empty-note { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:16px; background: rgba(255,255,255,.03); color:#a3abb6; }

  /* Gallery */
  .gallery { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
  @media (min-width:640px){ .gallery { grid-template-columns: repeat(3, 1fr); } }
  .g-item { position:relative; aspect-ratio: 4/3; border-radius:16px; overflow:hidden; background:#161a1f; }
  .g-item.big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .g-item img, .g-item video { width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .g-item:hover img { transform: scale(1.07); }
  .g-item figcaption { position:absolute; inset-inline:0; bottom:0; display:flex; align-items:center; gap:8px; padding:12px; font-size:12px; color:#fff; background: linear-gradient(0deg, rgba(11,13,16,.9), transparent); pointer-events:none; }
  .g-tag { padding:3px 8px; border-radius:9999px; background: color-mix(in srgb,var(--accent) 90%,transparent); color:var(--accent-ink,#0b0d10); font-weight:700; white-space:nowrap; }

  /* Invoice */
  .bar { height:10px; border-radius:9999px; background: rgba(255,255,255,.08); overflow:hidden; }
  .bar span { display:block; height:100%; width:0; border-radius:inherit; background: linear-gradient(90deg, #10b981, #34d399); transition: width 1.8s cubic-bezier(.2,.7,.2,1) .5s; }
  .rv.in .bar span { width: var(--w); }
  .perf { border-top: 2px dashed rgba(255,255,255,.12); padding-top: 18px; }
  .receipt::after { content:""; position:absolute; inset-inline:24px; bottom:-8px; height:16px; background: radial-gradient(circle at 8px 0, transparent 8px, rgba(17,20,24,.82) 8.5px) repeat-x; background-size: 16px 16px; }

  /* Timeline */
  .tl { position:relative; padding-inline-start: 26px; }
  .tl::before { content:""; position:absolute; inset-inline-start: 6px; top:6px; bottom:6px; width:2px; background: linear-gradient(180deg, var(--accent), rgba(255,255,255,.08)); }
  .tl li { position:relative; padding-bottom: 20px; }
  .tl-dot { position:absolute; inset-inline-start:-26px; top:4px; width:14px; height:14px; border-radius:9999px; background:#0b0d10; box-shadow: inset 0 0 0 3px var(--accent); }
  .tl-dot.live { background:var(--accent); animation: nowpulse 1.8s infinite; }

  /* Buttons */
  .btn-ghost { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:700; color:#e7eaee; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: all .25s; }
  .btn-ghost:hover { color:var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent); transform: translateY(-2px); }
  .btn-wa { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:800; color:#06240f; background: linear-gradient(140deg, #4ade80, #25D366); box-shadow: 0 14px 30px -12px rgba(37,211,102,.7); transition: transform .25s; }
  .btn-wa:hover { transform: translateY(-2px); }
  .btn-main { display:inline-flex; align-items:center; justify-content:center; gap:12px; border-radius:16px; font-weight:800; color:var(--accent-ink,#0b0d10); background: linear-gradient(140deg, var(--accent-light), var(--accent)); box-shadow: 0 18px 40px -14px color-mix(in srgb,var(--accent) 75%,transparent); transition: transform .25s, box-shadow .25s; }
  .btn-main:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -14px color-mix(in srgb,var(--accent) 90%,transparent); }

  /* Lookup form */
  .plate-input { background:#f4f5f6; color:#0b0d10; border-radius: 14px; box-shadow: 0 0 0 4px #0b0d10, 0 0 0 6px #f4f5f6; letter-spacing:.14em; }
  .plate-input:focus { box-shadow: 0 0 0 4px #0b0d10, 0 0 0 6px var(--accent), 0 0 40px color-mix(in srgb,var(--accent) 35%,transparent); }
  .pin { width: 100%; text-align:center; letter-spacing:.7em; border-radius:14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  .pin:focus { box-shadow: inset 0 0 0 2px var(--accent); outline:none; }
  .float { animation: float 6s ease-in-out infinite; }
  @keyframes float { 50% { transform: translateY(-12px) rotate(-1deg); } }

  /* Loading overlay */
  #finding { position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; flex-direction:column; gap:28px; background: rgba(11,13,16,.92); backdrop-filter: blur(10px); }
  #finding.on { display:flex; }
  .radar { position:relative; width:180px; height:180px; border-radius:9999px; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
  .radar::before, .radar::after { content:""; position:absolute; inset:22%; border-radius:inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent); }
  .radar::after { inset: 44%; background:var(--accent); box-shadow: 0 0 30px var(--accent); }
  .radar .sweep { position:absolute; inset:0; border-radius:inherit; background: conic-gradient(from 0deg, color-mix(in srgb,var(--accent) 45%,transparent), transparent 30%); animation: spin 1.4s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Lightbox */
  #lightbox .lb-img { max-width: 92vw; max-height: 78vh; border-radius: 18px; box-shadow: 0 40px 80px rgba(0,0,0,.6); animation: pop .35s cubic-bezier(.2,.7,.2,1); }
  @keyframes pop { from { opacity:0; transform: scale(.94); } }

  @media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; } .aurora, .scan, .plate::after, .float { animation:none; } }

  @media print {
    body { background:#fff !important; color:#111 !important; }
    header, footer, .no-print, .aurora, .scan, #lightbox, #finding, a[aria-label="Chat on WhatsApp"] { display:none !important; }
    main { padding-top:0 !important; }
    .rv { opacity:1 !important; transform:none !important; }
    .card { background:#fff !important; box-shadow:none !important; border:1px solid #ddd; backdrop-filter:none; break-inside: avoid; }
    .card::before, .receipt::after { display:none; }
    .text-white, .text-ink-100 { color:#111 !important; }
    .text-ink-300, .text-ink-500, .label { color:#555 !important; }
    .hero-car .shade { background: rgba(255,255,255,.85) !important; }
    .check-row, .line-row, .mini, .total-box, .person { background:#fafafa !important; box-shadow: inset 0 0 0 1px #e5e5e5 !important; }
  }