/* ══════════════════════════════════════════════════════════════
   أوتو هاب — التنسيقات الأساسية
   مستخرجة من الملف الواحد، ومضاف إليها تنسيقات الترويسة والتذييل
   والتباعد الموسّع الخاص بالنسخة متعدّدة الصفحات.
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
        body { font-family: 'Tajawal', sans-serif; }
        .hide-scroll::-webkit-scrollbar { display: none; }
        .autohub-3d {
            font-family: 'Arial Black', sans-serif;
            font-weight: 900;
            background: linear-gradient(180deg, #FDF4E6 0%, #EFA02B 35%, #B15D04 55%, #B15D04 75%, #D97706 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 1px 0 rgba(255,255,255,0.85);
            letter-spacing: 0.12em;
        }
        /* ── عزل اتجاه الأرقام واللاتينية داخل النص العربي (RTL bidi fix) ── */
        .ltr-num, .ltr-text {
            direction: ltr;
            unicode-bidi: isolate;
            display: inline-block;
            white-space: nowrap;
        }
        a[href^="tel:"], a[href^="mailto:"], a[href^="https://wa.me"] {
            direction: ltr;
            unicode-bidi: isolate;
        }
        /* ══ توحيد الهوية مع منصة uaehub — Unified UAEHUB palette ══ */
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700;800;900&display=swap');
        :root{
          --uh-bg:#F7F7F9; --uh-card:#FCFCFD; --uh-line:#DEDEE4;
          --uh-amber:#D97706; --uh-violet:#7C3AED; --uh-ink:#111118; --uh-mut:#5F5F73;
        }
        body{
          background:
            linear-gradient(rgba(124,58,237,.035) 1px,transparent 1px),
            linear-gradient(90deg,rgba(124,58,237,.035) 1px,transparent 1px),
            radial-gradient(1000px 500px at 88% -10%,rgba(217,119,6,.10),transparent 60%),
            linear-gradient(178deg,#F1F1F4,#F7F7F9 45%) !important;
          background-size:44px 44px,44px 44px,auto,auto !important;
          background-attachment:fixed !important;
        }
        h1,h2,h3{font-family:'Cairo','Tajawal',sans-serif;letter-spacing:-.4px}
        [class~="bg-white/5"],[class~="bg-white/10"]{background-color:var(--uh-card)!important}
        [class~="border-white/10"],[class~="border-white/20"]{border-color:var(--uh-line)!important}
        [class~="hover:bg-white/5"]:hover,[class~="hover:bg-white/10"]:hover{background-color:#F1F1F4!important}
        ::selection{background:rgba(217,119,6,.20)}
        :focus-visible{outline:2px solid var(--uh-violet);outline-offset:3px;border-radius:6px}
        .modal-overlay { background: rgba(11,18,32,0.65); }
        .role-tab.active { background: #D97706; color: #FFFFFF; }
        .hero-3d-text-blue {
            background: linear-gradient(180deg, #FFFFFF 0%, #111118 40%, #EFA02B 70%, #EFA02B 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: none;
        }
        #aiChatWindow { transition: opacity .2s ease, transform .2s ease; }
        #aiChatBubble:active { cursor: grabbing; }
        .saif-driving { animation: saifDrive 2.4s ease-in-out infinite; }
        @keyframes saifDrive {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-4px) rotate(-2deg); }
            50% { transform: translateY(0) rotate(0deg); }
            75% { transform: translateY(-2px) rotate(2deg); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-14px); }
        }

        /* ══════ v0.12 — مكوّنات النظام البيئي الكامل ══════ */
        .ah-tile{
            display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
            background:#EFEFF1;border:1px solid #DEDEE4;border-radius:1rem;
            padding:1.15rem .75rem;text-align:center;cursor:pointer;
            transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
        }
        .ah-tile:hover{border-color:rgba(217,119,6,.55);transform:translateY(-3px);box-shadow:0 12px 26px rgba(17,17,24,.10)}
        .ah-tile-ic{
            width:3rem;height:3rem;border-radius:.85rem;display:flex;align-items:center;justify-content:center;
            background:rgba(217,119,6,.14);color:#D97706;font-size:1.15rem;margin-bottom:.15rem;
            transition:transform .2s ease;
        }
        .ah-tile:hover .ah-tile-ic{transform:scale(1.08)}
        .ah-tile-t{font-weight:800;font-size:.875rem;color:#111118;line-height:1.3}
        .ah-tile-s{font-size:.68rem;color:#5F5F73;line-height:1.3}
        .ah-tile-sos .ah-tile-ic{background:rgba(199,75,63,.14);color:#C74B3F}
        .ah-tile-sos:hover{border-color:rgba(199,75,63,.55)}

        .ah-chip{
            display:inline-flex;align-items:center;gap:.4rem;
            background:#EFEFF1;border:1px solid #DEDEE4;border-radius:999px;
            padding:.5rem 1rem;font-size:.75rem;font-weight:700;color:#5F5F73;
            transition:border-color .2s ease,color .2s ease;cursor:pointer;
        }
        .ah-chip:hover{border-color:#D97706;color:#111118}
        .ah-chip.on{background:#D97706;border-color:#D97706;color:#fff}

        .ah-mini{
            background:#F7F7F9;border:1px solid #DEDEE4;border-radius:999px;
            padding:.35rem .8rem;font-size:.7rem;color:#5F5F73;transition:border-color .2s ease;cursor:pointer;
        }
        .ah-mini:hover{border-color:#D97706;color:#111118}

        .ah-input{
            background:#F7F7F9;border:1px solid #DEDEE4;border-radius:.6rem;
            padding:.7rem .9rem;font-size:.82rem;color:#111118;font-family:inherit;
        }
        .ah-input:focus{outline:none;border-color:#D97706;box-shadow:0 0 0 1px #D97706}
        .ah-lab{display:block;font-size:.68rem;font-weight:700;color:#5F5F73;margin-bottom:.3rem}

        .ah-tab{
            background:#EFEFF1;border:1px solid #DEDEE4;border-radius:.75rem;
            padding:.7rem 1.5rem;font-size:.82rem;font-weight:800;color:#5F5F73;transition:all .2s ease;cursor:pointer;
        }
        .ah-tab:hover{border-color:#D97706}
        .ah-tab.on{background:#D97706;border-color:#D97706;color:#fff}

        .ah-demo-note{
            max-width:64rem;margin-inline:auto;background:rgba(124,58,237,.06);
            border:1px solid rgba(124,58,237,.25);border-radius:.85rem;
            padding:.75rem 1rem;font-size:.72rem;color:#5F5F73;line-height:1.7;
        }
        .ah-demo-note i{color:#7C3AED;margin-inline-end:.35rem}

        .ah-card{background:#EFEFF1;border:1px solid #DEDEE4;border-radius:1rem;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
        .ah-card:hover{border-color:rgba(217,119,6,.5);box-shadow:0 10px 24px rgba(17,17,24,.08)}

        .ah-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.62rem;font-weight:700;padding:.2rem .5rem;border-radius:999px}
        .ah-badge-ok{background:rgba(46,158,91,.14);color:#1F7A46}
        .ah-badge-warn{background:rgba(217,119,6,.14);color:#B15D04}
        .ah-badge-bad{background:rgba(199,75,63,.14);color:#C74B3F}
        .ah-badge-neutral{background:#EBEBEF;color:#5F5F73}

        .ah-mobnav{display:flex;gap:.5rem;overflow-x:auto;padding:.6rem 1rem;background:#EFEFF1;border-bottom:1px solid #DEDEE4}
        .ah-mobnav::-webkit-scrollbar{display:none}
        .ah-mobnav button{white-space:nowrap;font-size:.72rem;font-weight:700;color:#5F5F73;background:#F7F7F9;border:1px solid #DEDEE4;border-radius:999px;padding:.4rem .85rem}
        .ah-mobnav button.on{background:#D97706;border-color:#D97706;color:#fff}
        @media(min-width:1024px){.ah-mobnav{display:none}}

        .ah-nav.on{border-bottom:2px solid #D97706;padding-bottom:.25rem;color:#B15D04}

        .ah-insp-btn{width:2.1rem;height:2.1rem;border-radius:.5rem;border:1px solid #DEDEE4;background:#F7F7F9;font-size:.8rem;transition:all .15s ease;cursor:pointer}
        .ah-insp-btn.on-ok{background:rgba(46,158,91,.2);border-color:#2E9E5B}
        .ah-insp-btn.on-warn{background:rgba(217,119,6,.2);border-color:#D97706}
        .ah-insp-btn.on-bad{background:rgba(199,75,63,.2);border-color:#C74B3F}

        @media (prefers-reduced-motion: reduce){
            .ah-tile,.ah-tile-ic,.ah-card{transition:none!important}
            .saif-driving{animation:none!important}
        }

        /* ─── شريط التاريخ والوقت — منقول من منصة.AI (KHW.2.7b) ───
           شريط رفيع بعرض الصفحة تحت الترويسة مباشرةً. الهيكل يُحقن فارغاً
           بارتفاع محجوز ويملؤه السكربت، فلا يقفز التخطيط عند التحميل. */
        .khw-clock{
          display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
          gap:8px 22px;padding:9px 20px;min-height:42px;
          border-bottom:1px solid #DEDEE4;
          background:#EFEFF1;
        }
        .khw-clock .kc-dates{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
          font-size:13px;color:#111118}
        .khw-clock .kc-h{display:inline-flex;align-items:center;gap:6px;font-weight:700}
        .khw-clock .kc-h i{font-style:normal;color:#B15D04;font-size:14px;line-height:1}
        .khw-clock .kc-g{color:#5F5F73}
        .khw-clock .kc-sep{color:#C8C8D0}
        .khw-clock .kc-time{display:flex;align-items:baseline;gap:8px}
        .khw-clock .kc-clock{
          font-family:"IBM Plex Mono",ui-monospace,monospace;
          font-size:15.5px;font-weight:600;letter-spacing:.02em;
          color:#B15D04;font-variant-numeric:tabular-nums;
          direction:ltr;unicode-bidi:isolate;min-width:9ch;text-align:center;
        }
        .khw-clock .kc-off{font-size:11px;color:#5F5F73;direction:ltr;unicode-bidi:isolate}
        .khw-clock .kc-pick{display:flex;align-items:center;gap:7px}
        .khw-clock .kc-lbl{font-size:12px;color:#5F5F73;white-space:nowrap}
        .khw-clock .kc-sel{
          font:inherit;font-size:12.4px;padding:4px 9px;max-width:200px;
          border:1px solid #C8C8D0;border-radius:8px;
          background:#F7F7F9;color:#111118;cursor:pointer;
        }
        .khw-clock .kc-sel:focus-visible{outline:2px solid #D97706;outline-offset:2px}

        /* الهاتف: سطران — التاريخان فوق، والوقت والمبدّل تحت */
        @media (max-width:700px){
          .khw-clock{gap:5px 14px;padding:8px 12px;min-height:auto}
          .khw-clock .kc-dates{width:100%;justify-content:center;font-size:12.2px;gap:4px 8px}
          .khw-clock .kc-time{order:2}
          .khw-clock .kc-clock{font-size:14.5px}
          .khw-clock .kc-off{display:none}
          .khw-clock .kc-pick{order:3}
          .khw-clock .kc-sel{max-width:150px;font-size:11.8px}
        }
        @media (max-width:380px){
          .khw-clock .kc-lbl{display:none}
          .khw-clock .kc-sel{max-width:170px}
        }
        @media print{.khw-clock .kc-pick{display:none}}