/* ═══════════════════════════════════════════════════════════════════════════════════════════
   صِلَة v7.1 — قشرة الدخول والمصادقة بثيم صفحة التسوّق (طلب المالك 2026-10-17: «تصميم اللوجن احترافي للمشتري والمتجر وكل الأدوار»).
   تُحمَّل بعد app.css وds.css لصفحات الضيوف كلها (layouts/guest · layout-guest). المصدر: parity/login-design-spec.md + theme-shop-spec.md.
   • ≥ 992px: عمودان — النموذج (أبيض، محتوى 400 متوسَّط عمودياً) ولوحة الدور الكحلية (في RTL على اليسار تلقائياً: ترتيب DOM + شبكة منطقية).
   • < 992px: شريط علوي كحلي مضغوط (الشعار + الدور) ثم بطاقة النموذج بلا تمرير أفقي حتى 320px.
   • الألوان من رموز ds.css مع احتياط حرفي من /shop؛ لوحة الدور كحلية ثابتة؛ لا ألوان فيروزية/بنفسجية/زرقاء مؤسسية.
   • أيقونات SVG بخط 1.8 (auth/_sprite) — لا إيموجي. Cairo وحده. حركة خفيفة تُعطَّل مع prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.auth-shell {
  --au-ink: var(--ink, #0B1F3A); --au-text: var(--ink-2, #33445C); --au-muted: var(--ink-3, #56677F);
  --au-surface: var(--surface, #FFFFFF); --au-tint: var(--bg, #F3F6FB); --au-tint-2: var(--bg-2, #E9EFF8);
  --au-line: var(--line, #E2E8F0); --au-line-2: #CBD5E1;
  --au-act: var(--fill, #C2410C); --au-act-dk: var(--fill-2, #9A3412);      /* الفعل الرئيسي: أبيض عليه 5.2:1 */
  --au-link: var(--teal, #C2410C); --au-or: #EA580C; --au-or-tint: var(--teal-soft, #FFF1E6); --au-or-text: #9A3412;
  --au-ok: var(--ok, #0F6E56); --au-bad: var(--bad, #B42318); --au-bad-soft: var(--bad-soft, #FDECEA); --au-warn: var(--warn, #B45309);
  --au-r-field: 14px; --au-r-card: 24px;
  --au-sh-card: 0 18px 50px -24px rgba(11, 31, 58, .35); --au-sh-or: 0 16px 34px -18px rgba(194, 65, 12, .65);
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--au-tint); color: var(--au-text);
  font-family: var(--font, 'Cairo', sans-serif); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[data-theme="dark"] .auth-shell { --au-line-2: #2B4B78; --au-or-text: #FDBA74; --au-or-tint: #3A1D0B; }
.auth-shell *, .auth-shell *::before, .auth-shell *::after { box-sizing: border-box; }
.auth-shell :focus-visible { outline: 3px solid var(--au-or); outline-offset: 3px; border-radius: 10px; }
.auth-shell .au-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.auth-shell .au-flip { transform: none; }
html[dir="rtl"] .auth-shell .au-flip { transform: scaleX(-1); }

/* تخطّي إلى النموذج */
.au-skip { position: absolute; inset-inline-start: 16px; top: -90px; z-index: 3000; background: var(--au-ink, #0B1F3A); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.au-skip:focus { top: 12px; color: #fff; }

/* ── الهيكل ── */
.au-page { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 100vh; min-height: 100dvh; }
.au-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 46px; color: #fff;
  background: radial-gradient(420px 220px at 100% -30%, rgba(234, 88, 12, .30), transparent 70%), linear-gradient(160deg, #0B1F3A 0%, #0D2749 100%); }
.au-bar .au-brand { color: #fff; }
.au-bar__role { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1;
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; }
.au-bar__role .au-ic { width: 16px; height: 16px; }
.au-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none !important; color: var(--au-ink); }
.au-brand:hover { color: inherit; }
.au-mark { width: 34px; height: 36px; flex: none; }
.au-brand__name { font-size: 24px; font-weight: 900; line-height: 1; }
.au-brand--col { display: none; }

.au-main { display: flex; flex-direction: column; min-width: 0; padding: 0 16px 20px; background: var(--au-tint); }
.au-inner { position: relative; z-index: 1; width: 100%; max-width: 480px; margin: -28px auto 0; padding: 22px 18px 8px; background: var(--au-surface);
  border: 1px solid var(--au-line); border-radius: var(--au-r-card); box-shadow: var(--au-sh-card); display: flex; flex-direction: column; }
.au-hero { display: none; }

@media (min-width: 576px) { .au-inner { padding: 30px 30px 12px; } }

@media (min-width: 992px) {
  .au-page { grid-template-columns: minmax(460px, 42%) minmax(0, 1fr); }
  .auth-shell:not(.au-wide) .au-bar { display: none; }
  .au-main { min-height: 100vh; min-height: 100dvh; padding: 28px 32px 16px; background: var(--au-surface); }
  .auth-shell:not(.au-wide) .au-inner { max-width: 400px; margin: auto; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .au-brand--col { display: inline-flex; align-self: flex-start; margin-bottom: 14px; }
  .au-hero { display: block; }
}

/* ── مبدّل الدور: شرائح روابط حقيقية؛ على الهاتف شريط أفقي قابل للتمرير وعلى الأوسع تلتفّ ── */
.au-roles { margin: 0 0 10px; }
.au-roles__cap { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--au-muted); }
.au-roles__list { display: flex; gap: 8px; margin: -6px -6px -2px; padding: 8px 8px 8px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.au-roles__list::-webkit-scrollbar { display: none; }
.au-roles__list li { flex: none; scroll-snap-align: center; }
.au-roles[data-fade="end"] .au-roles__list { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
html[dir="rtl"] .au-roles[data-fade="end"] .au-roles__list { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.au-roles[data-fade="start"] .au-roles__list { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
html[dir="rtl"] .au-roles[data-fade="start"] .au-roles__list { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.au-roles[data-fade="both"] .au-roles__list { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.au-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--au-line-2); background: var(--au-surface);
  color: var(--au-ink) !important; font-size: 14.5px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none !important;
  transition: border-color .15s, background-color .15s, color .15s, transform .15s; }
.au-chip .au-ic { width: 18px; height: 18px; color: var(--au-muted); }
.au-chip:hover { border-color: var(--au-ink); transform: translateY(-1px); }
.au-chip:focus-visible { border-radius: 999px; }
.au-chip[aria-current="page"] { background: var(--au-ink); border-color: var(--au-ink); color: #fff !important; font-weight: 800; }
html[data-theme="dark"] .au-chip[aria-current="page"] { background: var(--au-act); border-color: var(--au-act); }
.au-chip[aria-current="page"] .au-ic { color: #FDBA74; }
@media (min-width: 576px) { .au-roles__list { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px; } .au-roles[data-fade] .au-roles__list { -webkit-mask-image: none; mask-image: none; } }
/* مؤشر دقيق (فأرة) على سطح المكتب: شرائح أنحف توفّر ارتفاعاً؛ اللمس يبقى 44px */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) { .au-chip { min-height: 38px; padding: 0 10px; gap: 6px; font-size: 13.5px; } .au-chip .au-ic { width: 16px; height: 16px; } .au-roles__list { gap: 6px; } .au-link { min-height: 40px; } }

/* شارة الدور */
.au-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; height: 32px; padding: 0 12px; margin: 14px 0 6px; border-radius: 999px; line-height: 1;
  background: var(--au-or-tint); color: var(--au-or-text); border: 1px solid rgba(194, 65, 12, .18); font-size: 13.5px; font-weight: 800; }
.au-badge .au-ic { width: 16px; height: 16px; }
@media (max-width: 991.98px) { .au-main .au-badge { display: none; } }

/* ── عنوان البطاقة ── */
.au-head { margin: 4px 0 16px; }
.au-head--center { text-align: center; }
.auth-shell .login-title { margin: 0; font-size: clamp(26px, 5.4vw, 32px); font-weight: 900; line-height: 1.25; letter-spacing: -.2px; color: var(--au-ink); text-wrap: balance; }
.auth-shell .login-sub { margin: 8px 0 0; color: var(--au-muted); font-size: 15.5px; font-weight: 500; }
.au-hero-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 12px; border-radius: 18px; background: var(--au-or-tint); color: var(--au-link); }
.au-hero-ic .au-ic { width: 30px; height: 30px; }
.auth-shell .signup-price { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--au-or-tint); color: var(--au-or-text); border: 1px solid rgba(194, 65, 12, .16);
  font-size: 14px; font-weight: 700; line-height: 1.8; }
.au-price__left { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--au-or-text); opacity: .92; }

/* ── الرسائل (flash/أخطاء التحقق): شريط ناعم role=alert فوق الحقول؛ النص يأتي من الخادم كما هو ── */
.au-inner .alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; font-size: 14.5px; font-weight: 700; line-height: 1.7; }
.au-inner .alert > svg { flex: none; margin-top: 3px; }
.au-inner .alert ul { margin: 0; padding-inline-start: 18px; }
.au-inner .alert-danger { background: var(--au-bad-soft); color: #8C1D13; border-color: #F4B4AE; }
html[data-theme="dark"] .au-inner .alert-danger { color: #FCA5A5; border-color: #7F1D1D; }
.au-inner .alert-success { background: var(--ok-soft, #E1F5EE); color: #0B5A46; border-color: #B9E3D5; }
html[data-theme="dark"] .au-inner .alert-success { color: #6EE7B7; border-color: #14532D; }
.au-inner .alert-info { background: var(--au-tint-2); color: var(--au-ink); border-color: var(--au-line-2); }
.au-inner .alert[hidden] { display: none; }

/* ── الحقول: تسمية ظاهرة + أيقونة SVG داخل الحقل + ارتفاع 52 + تركيز برتقالي 3px ── */
.au-form { margin: 0; }
.auth-shell input, .auth-shell select, .auth-shell button, .auth-shell textarea { font-family: inherit; }
.au-field { margin: 0 0 14px; }
.au-field--tight { margin-bottom: 2px; }
.au-inner .form-label { display: block; margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--au-ink); }
.au-inner .form-label .req { color: var(--au-bad); }
.au-inner .afield { position: relative; }
.au-inner .afield .af-ic { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 15px; z-index: 2; display: grid; place-items: center; opacity: 1; font-size: 0; color: var(--au-muted); pointer-events: none; }
.au-inner .afield .af-ic .au-ic { width: 20px; height: 20px; }
.au-inner .afield .form-control, .au-inner .afield .form-select {
  display: block; width: 100%; height: 52px; min-height: 52px; padding: 0 14px 0 14px; padding-inline-start: 46px; border: 1.5px solid var(--au-line-2); border-radius: var(--au-r-field);
  background-color: var(--au-surface); color: var(--au-ink); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.4; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.au-inner .afield .form-control::placeholder { color: #5F6F86; font-weight: 500; opacity: 1; }
html[data-theme="dark"] .au-inner .afield .form-control::placeholder { color: #8FA2BC; }
.au-inner .afield .form-control:hover:not(:focus), .au-inner .afield .form-select:hover:not(:focus) { border-color: var(--au-muted); }
.au-inner .afield .form-control:focus, .au-inner .afield .form-select:focus { outline: 0; border-color: var(--au-or); box-shadow: 0 0 0 3px rgba(234, 88, 12, .24); }
.au-inner .afield:focus-within .af-ic { color: var(--au-link); }
.au-inner .afield .form-control.is-invalid, .au-inner .afield .form-control[aria-invalid="true"] { border-color: var(--au-bad); }
.au-inner .afield .form-control.is-invalid:focus, .au-inner .afield .form-control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }
.au-inner .afield .form-control.is-valid { border-color: var(--au-ok); background-image: none; }
.au-inner .afield .form-control.is-invalid { background-image: none; }
/* اتجاه الحقول: الأيقونة عند بداية الصفحة، وحقول dir=ltr (بريد/كلمة مرور/هاتف) تُحاذى نحو الأيقونة في RTL */
html[dir="rtl"] .au-inner .afield .form-control, html[dir="rtl"] .au-inner .afield .form-select { padding-left: 14px; padding-right: 46px; }
html[dir="rtl"] .au-inner .afield input[dir="ltr"] { text-align: right; }
html[dir="rtl"] .au-inner .afield.has-toggle .form-control { padding-left: 50px; }
html[dir="ltr"] .au-inner .afield .form-control, html[dir="ltr"] .au-inner .afield .form-select { padding-right: 14px; padding-left: 46px; }
html[dir="ltr"] .au-inner .afield.has-toggle .form-control { padding-right: 50px; }
.au-inner .afield .form-select { padding-inline-end: 38px; background-repeat: no-repeat; background-size: 16px; -webkit-appearance: none; 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='%2356677F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }
html[dir="rtl"] .au-inner .afield .form-select { background-position: left 14px center; padding-left: 38px; padding-right: 46px; }
html[dir="ltr"] .au-inner .afield .form-select { background-position: right 14px center; padding-right: 38px; }
/* مكوّن «اسم المستخدم» المشترك (x-username-field): أيقونته SVG مضمّنة داخل .af-ic، وحالته الفارغة بلا فراغ */
.au-inner .uc-status:empty { min-height: 0; margin: 0; }
.au-inner .uc-status { font-size: 13px; font-weight: 700; }
.au-inner .uc-phone { min-height: 44px; margin: 8px 0 0; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--au-line-2); background: var(--au-surface); color: var(--au-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.au-inner .form-text { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--au-muted); }

/* إظهار/إخفاء كلمة المرور (.pw-toggle يربطه app.js؛ هذا الرسم والحالة فقط) */
.au-inner .pw-toggle { position: absolute; top: 4px; bottom: 4px; transform: none; inset-inline-end: 4px; width: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--au-muted); cursor: pointer; }
.au-inner .pw-toggle:hover { color: var(--au-ink); background: var(--au-tint); }
.au-inner .pw-toggle:focus-visible { outline: 3px solid var(--au-or); outline-offset: -2px; }
.au-inner .pw-toggle .au-pw-off { display: none; }
.au-inner .pw-toggle[aria-pressed="true"] .au-pw-on { display: none; }
.au-inner .pw-toggle[aria-pressed="true"] .au-pw-off { display: block; }
.au-caps { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--au-warn); }
.au-caps[hidden] { display: none; }
.au-caps .au-ic { width: 16px; height: 16px; }
.au-forgot { display: flex; justify-content: flex-end; margin-top: 2px; }
.au-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 14.5px; font-weight: 800; color: var(--au-link) !important; text-decoration: none !important; background: none !important; border-radius: 10px; }
.au-link:hover { text-decoration: underline !important; color: var(--au-act-dk) !important; }
html[data-theme="dark"] .au-link:hover { color: #FDBA74 !important; }
.au-grid2 { display: block; }

/* رمز المصادقة الثنائية */
.au-inner .au-code { height: 60px; font-size: 26px; font-weight: 800; letter-spacing: .4em; text-indent: .4em; font-variant-numeric: tabular-nums; border: 1.5px solid var(--au-line-2); border-radius: var(--au-r-field); background: var(--au-surface); color: var(--au-ink); box-shadow: none; }
.au-inner .au-code:focus { outline: 0; border-color: var(--au-or); box-shadow: 0 0 0 3px rgba(234, 88, 12, .24); }
.au-inner .au-code::placeholder { color: #5F6F86; opacity: 1; letter-spacing: .4em; font-weight: 600; }
html[data-theme="dark"] .au-inner .au-code::placeholder { color: #8FA2BC; }

/* ── الأزرار: رئيسي برتقالي 52px بحالة تحميل (is-loading من app.js)، وثانوي أبيض بحدّ ── */
.au-inner .auth-actions { margin: 6px 0 0; }
.au-inner .btn { font-family: inherit; }
.au-inner .btn-silah, .au-inner .btn-silah.btn-lg { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--au-r-field);
  background: var(--au-act); color: #fff; font-size: 16px; font-weight: 800; line-height: 1; box-shadow: var(--au-sh-or); transition: transform .18s, box-shadow .18s, background-color .18s; filter: none; }
.au-inner .btn-silah:hover { background: var(--au-act-dk); color: #fff; transform: translateY(-1px); box-shadow: var(--au-sh-or); filter: none; }
.au-inner .btn-silah:focus-visible { outline: 3px solid var(--au-or); outline-offset: 3px; }
.au-inner .btn-silah:disabled { opacity: .7; transform: none; }
.au-inner .btn.is-loading::after { border-radius: 50%; }
.au-inner .btn-ghost, .au-inner .btn-ghost.au-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--au-line-2); border-radius: var(--au-r-field);
  background: var(--au-surface); color: var(--au-ink); font-size: 15.5px; font-weight: 800; line-height: 1.2; box-shadow: none; transition: border-color .15s, background-color .15s, transform .15s; }
.au-inner .btn-ghost:hover { border-color: var(--au-ink); color: var(--au-ink); background: var(--au-surface); transform: translateY(-1px); box-shadow: none; }
.au-inner .btn-ghost .au-ic, .au-inner .btn-silah .au-ic { width: 19px; height: 19px; }
.au-inner .btn.btn-sm.au-btn { min-height: 44px; font-size: 14.5px; }
.au-inner .geo-btn.btn-silah { box-shadow: none; }
.au-inner .geo-btn .geo-status { font-size: 12.5px; font-weight: 700; }
.au-inner .geo-btn.btn-silah .geo-status { color: #fff; }
.au-inner .btn-ghost:active, .au-inner .btn-silah:active { transform: scale(.985); }
.auth-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--au-muted); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.6; }
.auth-secure .au-ic { width: 16px; height: 16px; flex: none; color: var(--au-ok); }
.auth-shell .login-card .auth-consent { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: var(--au-muted); text-align: center; }
.auth-shell .login-card .auth-consent a:not(.btn):not(.link-bare), .auth-shell .login-card .auth-consent a:not(.btn):not(.link-bare):hover {
  display: inline; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; color: var(--au-link); font-weight: 800; font-size: inherit; text-decoration: underline !important; text-underline-offset: 3px; }
.au-note { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--au-muted); text-align: center; }

/* فاصل «أو» + الروابط الثانوية حسب الدور */
.au-alt { margin: 14px 0 0; }
.au-alt--plain { margin-top: 14px; }
.au-or { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; color: var(--au-muted); font-size: 13px; font-weight: 700; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }
.au-alt__links { display: grid; gap: 8px; }
form.au-alt { margin-bottom: 0; }

/* ── التذييل: الشروط · الخصوصية · المساعدة · التطبيق + مبدّل اللغة ── */
.au-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin: 16px 0 0; padding: 4px 0 10px; border-top: 1px solid var(--au-line); }
.au-foot__nav { display: flex; flex-wrap: wrap; gap: 0 2px; margin-inline-start: -7px; }
.au-foot a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 7px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--au-muted) !important; text-decoration: none !important; background: none !important; }
.au-foot a:hover { color: var(--au-ink) !important; text-decoration: underline !important; }
.au-foot .au-lang { color: var(--au-ink) !important; font-weight: 800; }
.au-foot .au-lang .au-ic { width: 18px; height: 18px; color: var(--au-muted); }

/* ═══ لوحة الدور (≥ 992px): كحلي #0B1F3A → #0D2749 بهالتين برتقالية/خضراء كهيرو /shop. الغلاف الثابت sticky يبقيها بطول الشاشة أثناء تمرير نموذج طويل (التسجيل) ═══ */
.au-hero { background: linear-gradient(160deg, #0B1F3A 0%, #0D2749 100%); color: #fff; }
.au-hero__stick { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 40px 48px 32px; overflow: hidden; isolation: isolate; }
.au-hero__stick::before, .au-hero__stick::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.au-hero__stick::before { inset-inline-end: -120px; top: -140px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(234, 88, 12, .40), transparent 66%); }
.au-hero__stick::after { inset-inline-start: -110px; bottom: -150px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(15, 110, 86, .50), transparent 66%); }
.au-hero__in { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 540px; margin-inline: auto; min-height: 0; }
.au-hero__badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; height: 34px; padding: 0 14px; margin: 0; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1;
  background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.au-hero__badge .au-ic { width: 16px; height: 16px; color: #FDBA74; }
.au-hero__title { margin: 18px 0 16px; font-size: clamp(28px, 1.2vw + 20px, 40px); font-weight: 800; line-height: 1.3; color: #fff; text-wrap: balance; }
.au-hero__points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.au-hero__points li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: #E2E8F0; line-height: 1.5; }
.au-hero__points .au-ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(15, 110, 86, .55); color: #A7F3D0; stroke-width: 2.4; }
.au-scene { margin-top: 28px; max-width: 460px; }
.au-hero__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 540px; width: 100%; margin-inline: auto; }
.au-hero__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #B8C6DA; }
.au-hero__trust .au-ic { width: 17px; height: 17px; color: #CBD5E1; }
@media (min-width: 992px) and (max-height: 760px) { .au-hero__stick { padding-block: 28px 22px; } .au-scene { display: none; } .au-hero__title { font-size: clamp(26px, 1vw + 18px, 34px); } }
@media (min-width: 992px) and (max-width: 1199.98px) { .au-hero__stick { padding-inline: 32px; } .au-hero__points li { font-size: 16px; } }

/* مشهد الدور: بطاقة زجاجية داكنة خفيفة (aria-hidden) — تسميات عامة وقيم توضيحية صغيرة بلا ادّعاء */
.au-glass { padding: 18px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); color: #E8EEF7; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: auRise .5s .15s cubic-bezier(.2, .8, .3, 1) backwards; }
.au-sc-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; font-size: 16px; }
.au-sc-head b, .au-sc-sub b { font-weight: 800; color: #fff; }
.au-sc-head .au-pill { margin-inline-start: auto; }
.au-sc-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.au-tile { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; }
.au-tile .au-ic { width: 20px; height: 20px; }
.au-tile--sm { width: 32px; height: 32px; border-radius: 10px; }
.au-tile--sm .au-ic { width: 17px; height: 17px; }
.au-tile--or { background: rgba(234, 88, 12, .28); color: #FDBA74; }
.au-tile--ok { background: rgba(15, 110, 86, .55); color: #A7F3D0; }
.au-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; line-height: 1; white-space: nowrap;
  background: rgba(255, 255, 255, .12); color: #E8EEF7; border: 1px solid rgba(255, 255, 255, .16); }
.au-pill .au-ic { width: 14px; height: 14px; }
.au-pill--ok { background: rgba(52, 211, 153, .16); color: #6EE7B7; border-color: rgba(52, 211, 153, .35); }
.au-pill--or { background: rgba(251, 146, 60, .18); color: #FDBA74; border-color: rgba(251, 146, 60, .38); }
.au-pill--accent { background: rgba(15, 110, 86, .5); color: #A7F3D0; border-color: rgba(52, 211, 153, .35); }
.au-sc-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px dashed rgba(255, 255, 255, .16); font-size: 14.5px; font-weight: 700; color: #E8EEF7; }
.au-sc-head + .au-sc-row, .au-sc-row:first-child { border-top: 0; }
.au-sc-row b { margin-inline-start: 0; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-sk { display: block; flex: 0 1 var(--w, 50%); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); margin-inline-end: auto; }
.au-sc-row > .au-sk + .au-sk { margin-inline-start: 0; flex-basis: var(--w, 24%); }
.au-sc-total { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: 16px; font-weight: 800; color: #fff; }
.au-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.au-steps { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.au-steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 14.5px; font-weight: 700; color: #B8C6DA; }
.au-steps li > i { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .34); }
.au-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 11px; top: 31px; height: 14px; width: 2px; background: rgba(255, 255, 255, .22); }
.au-steps li.is-done { color: #E8EEF7; }
.au-steps li.is-done > i { background: #0F6E56; border-color: #0F6E56; color: #fff; }
.au-steps li.is-done > i .au-ic { width: 13px; height: 13px; stroke-width: 3; }
.au-steps li.is-done:not(:last-child)::after { background: #0F6E56; }
.au-steps li.is-now { color: #fff; font-weight: 800; }
.au-steps li.is-now > i { border-color: #FB923C; background: rgba(251, 146, 60, .3); box-shadow: 0 0 0 4px rgba(251, 146, 60, .16); }
.au-steps--h { display: flex; gap: 22px; margin-top: 14px; }
.au-steps--h li:not(:last-child)::after { display: none; }
.au-step { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); color: #CBD5E1; }
.au-step .au-ic { width: 14px; height: 14px; }
.au-step b { margin: 0; min-width: 22px; text-align: center; font-size: 14px; }
.au-sc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.au-btn-sc { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 800; line-height: 1; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.au-btn-sc .au-ic { width: 16px; height: 16px; stroke-width: 2.4; }
.au-btn-sc--ok { background: #0F6E56; border-color: #0F6E56; }
.au-btn-sc--or { background: #C2410C; border-color: #C2410C; }
.au-bar-sk { height: 8px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.au-bar-sk i { display: block; height: 100%; width: var(--w, 60%); border-radius: inherit; background: linear-gradient(90deg, #FB923C, #EA580C); }
.au-map { position: relative; height: 128px; margin-bottom: 4px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12);
  background: radial-gradient(circle at 55% 52%, rgba(251, 146, 60, .16), transparent 58%), linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 28px 28px, rgba(255, 255, 255, .04); }
.au-map__ring { position: absolute; top: 50%; inset-inline-start: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 2px dashed rgba(251, 146, 60, .7); background: rgba(251, 146, 60, .08); }
html[dir="rtl"] .au-map__ring { margin: -52px -52px 0 0; }
.au-map__pin { position: absolute; display: block; color: #FDBA74; }
.au-map__pin .au-ic { width: 24px; height: 24px; fill: rgba(11, 31, 58, .55); }
.au-map__pin--a { top: 26%; inset-inline-start: 42%; }
.au-map__pin--b { top: 48%; inset-inline-start: 60%; }
.au-map__pin--c { top: 18%; inset-inline-start: 22%; color: #A7F3D0; }
.au-map__cov { position: absolute; inset-inline-start: 10px; bottom: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(11, 31, 58, .7); color: #E8EEF7; font-size: 12px; font-weight: 800; }
.au-glass--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-kpi { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); }
.au-kpi__h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.4; }
.au-kpi__h b { font-weight: 800; color: #fff; }
.au-spark { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-top: 12px; }
.au-spark i { flex: 1; height: var(--h, 50%); border-radius: 6px 6px 2px 2px; background: linear-gradient(#FB923C, rgba(251, 146, 60, .32)); }
@keyframes auRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ═══ صفحة التنزيل العريضة (guest-wide): بلا لوحة جانبية — شريط علوي كحلي وبطاقات ═══ */
.au-wide .au-bar { padding-bottom: 18px; }
.au-wide .au-main { padding: 0 16px 24px; }
.au-wide .au-inner { max-width: 1160px; margin: 20px auto 0; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.au-wide .au-page { grid-template-columns: minmax(0, 1fr); }
.au-wide .login-card { max-width: none !important; }
/* صفحات أخرى بقشرة الضيوف بلا $authRole/$authBadge (فاتورة عامة، إيصال، حظر، 403/404، دعوة المورّد): بلا لوحة الدور، ببطاقة وسطية ضيّقة بدل عرض 1160 */
.au-plain .au-main { background: var(--au-tint); }
.au-plain .au-inner { max-width: 640px; padding: 22px 18px 8px; background: var(--au-surface); border: 1px solid var(--au-line); border-radius: var(--au-r-card); box-shadow: var(--au-sh-card); }
@media (min-width: 576px) { .au-plain .au-inner { padding: 30px 30px 12px; } }
.au-dl__shop { margin: 8px 0 0; font-size: 14.5px; }
.au-dl__steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 0 0 8px; padding: 12px 16px; border: 1.5px dashed var(--au-line-2); border-radius: 16px; background: var(--au-surface); font-size: 14px; font-weight: 600; }
.au-dl__steps b { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--au-ink); }
.au-dl__steps span { display: inline-flex; align-items: center; gap: 8px; }
.au-dl__steps i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--au-ink); color: #fff; font-size: 12px; font-style: normal; font-weight: 800; }
.au-dl__h { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; padding-inline-start: 12px; border-inline-start: 4px solid var(--au-or); font-size: 17px; font-weight: 800; color: var(--au-ink); text-align: start; }
.au-dl__h .au-ic { color: var(--au-link); }
.au-dl-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--au-line); border-radius: 18px; background: var(--au-surface); box-shadow: 0 8px 20px -14px rgba(11, 31, 58, .3); }
.au-dl-card__head { display: flex; align-items: center; gap: 12px; text-align: start; }
.au-dl-card__head img { flex: none; border-radius: 14px; box-shadow: 0 8px 20px -12px rgba(11, 31, 58, .4); }
.au-dl-card__head h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--au-ink); }
.au-dl-card__head p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--au-muted); }
.au-qr { padding: 8px; background: #fff; border: 1px solid var(--au-line); border-radius: 14px; max-width: 100%; }
.au-dl-card__note { margin: 0; font-size: 12px; color: var(--au-muted); }
.au-dl-card__login { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--au-line-2); font-size: 13px; line-height: 1.7; text-align: start; }
.au-dl-card__login .au-ic { width: 17px; height: 17px; margin-top: 4px; color: var(--au-link); }
.au-dl-card__soon { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 0; color: var(--au-muted); font-size: 14.5px; font-weight: 700; }
.au-dl-card__url { padding: 8px 10px; border: 1.5px dashed var(--au-line-2); border-radius: 12px; font-size: 13px; font-weight: 700; text-align: center; word-break: break-all; }
.au-dl-card__ios { display: grid; gap: 4px; margin: auto 0 0; padding: 10px 0 0 0; padding-inline-start: 20px; border-top: 1px dashed var(--au-line-2); font-size: 13px; line-height: 1.8; text-align: start; }
.au-dl__back { margin-top: 18px; text-align: center; }
.au-dl .btn.au-btn { width: 100%; }
.au-dl__back .btn.au-btn { width: auto; }

/* ═══ صفحات أخرى تستعمل قالب الضيوف (أخطاء، إيصالات، فاتورة عامة…): تبقى تعمل داخل عمود النموذج ═══ */
.au-inner .login-card { max-width: none !important; padding: 0; background: transparent; border: 0; box-shadow: none; }
.au-inner .error-card { margin: 0; padding: 18px 4px; background: transparent; border: 0; box-shadow: none; }
.au-inner .table-wrap { overflow-x: auto; }

/* ═══ حركة ومطبوع وإتاحة ═══ */
.au-inner > .login-card { animation: auRise .4s cubic-bezier(.2, .8, .3, 1) backwards; }
@media (prefers-reduced-motion: reduce) {
  .auth-shell *, .auth-shell *::before, .auth-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .au-bar, .au-hero, .au-foot, .au-roles, .au-brand--col, .au-badge, .au-skip { display: none !important; }
  .au-page { display: block; }
  .au-main, .au-inner { padding: 0 !important; margin: 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important; max-width: none !important; }
}