/* ==========================================================================
   بوصلة — شاشة الدخول (الهوية المعتمدة: أزرق #1E4F91 · أخضر #0E8A6A · ذهبي #D9A21B)
   خلفية سماء ليلية زرقاء مع أفق البوصلة والجبال، بطاقة دخول مجسّمة، ومعاينة ثلاثية الأبعاد للمنصة
   ========================================================================== */
body.bxa { margin: 0; min-height: 100vh; min-height: 100dvh; background: #0B2142; color: #fff; font-family: var(--font, Plex), system-ui, sans-serif; overflow-x: hidden; }
.bxa-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 0%, #2A5C9F 0%, rgba(42,92,159,0) 55%), radial-gradient(90% 70% at 10% 100%, #163B6E 0%, rgba(22,59,110,0) 60%), linear-gradient(180deg, #0D2547 0%, #112E54 55%, #0B2142 100%); }
.bxa-sky .g1 { position: absolute; width: 620px; height: 620px; border-radius: 50%; top: -180px; inset-inline-end: -140px; background: radial-gradient(circle, rgba(217,162,27,.22), rgba(217,162,27,0) 65%); filter: blur(10px); }
.bxa-sky .g2 { position: absolute; width: 520px; height: 520px; border-radius: 50%; bottom: -160px; inset-inline-start: 30%; background: radial-gradient(circle, rgba(14,138,106,.2), rgba(14,138,106,0) 65%); }
.bxa-sky .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }
.bxa-sky .land { position: absolute; inset-inline: 0; bottom: 0; height: 46vh; background: url('../images/welcome/banner-art.webp') 30% 100% / cover no-repeat; opacity: .55;
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%); }

.bxa-wrap { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 470px); gap: clamp(28px, 5vw, 90px); align-items: center; padding: clamp(20px, 4vh, 48px) clamp(20px, 5vw, 90px); }
[dir="rtl"] .bxa-wrap { grid-template-columns: minmax(380px, 470px) minmax(0, 1.15fr); }
[dir="rtl"] .bxa-card { order: -1; }

/* ---------- الجانب التعريفي */
.bxa-hero { max-width: 640px; }
.bxa-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.bxa-brand svg { filter: drop-shadow(0 14px 28px rgba(0,0,0,.45)); }
.bxa-brand b { display: block; font-size: 54px; line-height: 1; font-weight: 800; text-shadow: 0 4px 18px rgba(0,0,0,.35); }
.bxa-brand i { display: block; font-style: normal; font-size: 24px; font-weight: 700; letter-spacing: 6px; color: #E9EEF8; margin-top: 4px; }
.bxa-brand span { display: block; color: #EBC769; font-size: 15px; margin-top: 6px; }
.bxa-hero h2 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.35; margin: 0 0 10px; font-weight: 800; }
.bxa-hero > p { margin: 0 0 26px; color: #C9D6EE; font-size: 16px; line-height: 1.7; }

/* معاينة مجسمة */
.bxa-preview { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; transform: perspective(1200px) rotateY(-10deg) rotateX(6deg); transform-origin: center; margin-bottom: 28px; }
[dir="ltr"] .bxa-preview { transform: perspective(1200px) rotateY(10deg) rotateX(6deg); }
.pv-kpi, .pv-chart, .pv-alert { border-radius: 16px; padding: 12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 rgba(0,0,0,.25), 0 22px 40px -12px rgba(0,0,0,.55); }
.pv-kpi { position: relative; overflow: hidden; }
.pv-kpi.t-blue { background: linear-gradient(150deg, #4A78B5, #2F5F9E 45%, #1E4F91); }
.pv-kpi.t-green { background: linear-gradient(150deg, #3BAE8C, #179777 45%, #0E8A6A); }
.pv-kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.pv-kpi small { display: block; font-size: 12px; opacity: .9; }
.pv-kpi b { display: block; font-size: 22px; font-weight: 800; direction: ltr; text-align: end; margin-top: 2px; }
[dir="rtl"] .pv-kpi b { text-align: start; }
.pv-kpi em { position: absolute; top: 12px; inset-inline-end: 12px; font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.9); color: #0B7559; }
.pv-kpi svg { width: 100%; height: 26px; margin-top: 6px; } .pv-kpi polyline { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pv-chart { grid-column: 1 / -1; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,245,247,.94)); color: #1C2B45; }
.pv-chart small { font-size: 12.5px; font-weight: 700; }
.pv-chart .bars { height: 92px; display: flex; align-items: flex-end; gap: 7px; margin-top: 10px; direction: ltr; }
.pv-chart .bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #4A78B5, #1E4F91 60%, #163B6E); box-shadow: 3px 0 0 #143A6E, inset 0 2px 0 rgba(255,255,255,.35); position: relative; }
.pv-chart .bars i::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #3BAE8C, #0E8A6A); border-radius: 0; }
.pv-alert { position: absolute; inset-inline-end: -26px; top: -24px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.97); color: #1C2B45; transform: translateZ(40px); animation: bxa-float 5s ease-in-out infinite; }
.pv-alert span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: radial-gradient(circle at 32% 26%, #F1D78C, #D9A21B 55%, #B5850F); box-shadow: 0 4px 8px rgba(217,162,27,.45); }
.pv-alert b { display: block; font-size: 13px; } .pv-alert small { font-size: 11.5px; color: #66748C; }
@keyframes bxa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.bxa-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bxa-feats li { display: flex; align-items: center; gap: 10px; color: #E3EAF8; font-size: 14.5px; }
.bxa-feats li span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(235,199,105,.45); color: #EBC769; }
.bxa-feats .icon { width: 18px; height: 18px; }

/* ---------- بطاقة الدخول المجسّمة */
.bxa-card { position: relative; display: flex; flex-direction: column; color: #1C2B45; background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%); border-radius: 26px; padding: 22px 26px 16px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #E5E7EB, 0 6px 0 #C9D1DE, 0 10px 0 #9FAEC6, 0 40px 80px -20px rgba(0,0,0,.6); }
.bxa-card::before { content: ""; position: absolute; inset-inline: 26px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #1E4F91, #0E8A6A 55%, #D9A21B); }
.bxa-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bxa-card .gate-brand { display: flex; align-items: center; gap: 10px; color: #1C2B45; text-decoration: none; }
.bxa-card .gate-brand b { display: block; font-size: 20px; font-weight: 800; } .bxa-card .gate-brand small { font-size: 11.5px; color: #66748C; }
.bxa-card .gate-lang { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #1E4F91; background: #F3F5F7; border: 1px solid #E5E7EB; text-decoration: none; }
.bxa-body { padding: 26px 0 8px; }
.bxa-card .gate-heading { margin: 0; font-size: 26px; font-weight: 800; color: #1C2B45; }
.bxa-card .gate-sub { margin: 4px 0 18px; color: #66748C; font-size: 14px; }

.bxa-card .auth2-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: #EEF1F5; box-shadow: inset 0 2px 4px rgba(17,46,84,.08); margin-bottom: 16px; }
.bxa-card .auth2-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border: 0; border-radius: 10px; background: transparent; color: #4B5768; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.bxa-card .auth2-tabs button.on { color: #fff; background: linear-gradient(180deg, #4A78B5, #1E4F91); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #143A6E, 0 8px 14px -6px rgba(30,79,145,.6); }
.bxa-card .auth2-tabs button.on::after { display: none; }
.bxa-card .auth2-tabs .icon { width: 18px; height: 18px; }
.bxa-card .auth2-label { display: block; font-size: 13px; font-weight: 700; color: #3B4A63; margin: 12px 0 6px; }
.bxa-card .auth2-input { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-radius: 13px; background: #fff; border: 1.5px solid #E5E7EB; box-shadow: inset 0 2px 4px rgba(17,46,84,.06); transition: border-color .15s, box-shadow .15s; }
.bxa-card .auth2-input:focus-within { border-color: #4A78B5; box-shadow: 0 0 0 4px rgba(30,79,145,.14); }
.bxa-card .auth2-input .icon { width: 20px; height: 20px; color: #7A8597; flex: none; }
.bxa-card .auth2-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: #1C2B45; }
.bxa-card .auth2-remember { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 13.5px; color: #3B4A63; }
.bxa-card .auth2-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #4A78B5 0%, #2A5C9F 45%, #1E4F91 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #143A6E, 0 14px 24px -10px rgba(30,79,145,.7); transition: transform .12s; }
.bxa-card .auth2-btn:hover { transform: translateY(-1px); } .bxa-card .auth2-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 #143A6E; }
.bxa-card .auth2-or { display: flex; align-items: center; gap: 10px; color: #9AA3B0; font-size: 12.5px; margin: 14px 0; }
.bxa-card .auth2-or::before, .bxa-card .auth2-or::after { content: ""; flex: 1; height: 1px; background: #E5E7EB; }
.bxa-card .auth2-or span { padding: 0; background: none; }
.bxa-card .auth2-btn-outline { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-bottom: 8px; border-radius: 13px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: #1E4F91;
  background: linear-gradient(180deg, #fff, #F3F5F7); border: 1px solid #E5E7EB; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #DADEE4; }
.bxa-card .auth2-btn-outline.bio-btn { color: #0B7559; border-style: dashed; border-color: #9FD3C1; }
.bxa-card .auth2-btn-outline .icon { width: 19px; height: 19px; }
.bxa-card .bio-note { text-align: center; font-size: 12px; color: #66748C; margin: 2px 0 8px; }
.bxa-card .auth2-info { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #66748C; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #F3F5F7; }
.bxa-card .auth2-info .icon { width: 16px; height: 16px; flex: none; color: #1E4F91; margin-top: 2px; }
.bxa-card .alert { border-radius: 12px; }
.bxa-card .otp-input { width: 100%; box-sizing: border-box; height: 58px; text-align: center; font-size: 26px; letter-spacing: 12px; font-weight: 800; border-radius: 14px; border: 1.5px solid #E5E7EB; box-shadow: inset 0 2px 4px rgba(17,46,84,.06); }
.bxa-card .otp-input:focus { outline: 0; border-color: #4A78B5; box-shadow: 0 0 0 4px rgba(30,79,145,.14); }
.bxa-card .field label { font-weight: 700; color: #3B4A63; }
.bxa-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid #EEF0F3; font-size: 12px; color: #7A8597; }
.bxa-foot span { display: inline-flex; align-items: center; gap: 5px; } .bxa-foot a { color: #4B5768; }
.bxa-foot .icon { width: 15px; height: 15px; color: #0E8A6A; }
.bxa-copy { position: relative; z-index: 1; text-align: center; color: rgba(255,255,255,.55); font-size: 12px; margin: -26px 0 12px; }

@media (max-width: 1020px) {
  .bxa-wrap, [dir="rtl"] .bxa-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 24px; }
  .bxa-hero { order: -2; text-align: center; }
  .bxa-brand { justify-content: center; }
  .bxa-preview, .bxa-feats, .bxa-hero > p, .bxa-hero h2 { display: none; }
  .bxa-brand b { font-size: 40px; } .bxa-brand svg { width: 64px; height: 64px; }
  .bxa-card { width: 100%; max-width: 470px; box-sizing: border-box; }
  .bxa-copy { margin: 8px 0 14px; }
}
@media (max-width: 480px) { .bxa-card { padding: 18px 16px 12px; border-radius: 22px; } .bxa-wrap { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .pv-alert { animation: none; } }
.bxa-hero h2 { color: #fff; text-shadow: 0 3px 14px rgba(0,0,0,.35); }
.pv-kpi, .pv-kpi small, .pv-kpi b { color: #fff; }
.pv-kpi small { opacity: .92; }
@media (min-width: 1021px) and (max-height: 820px) {
  .bxa-body { padding-top: 14px; } .bxa-card .gate-sub { margin-bottom: 10px; }
  .bxa-card .auth2-input { height: 44px; } .bxa-card .auth2-btn { height: 46px; } .bxa-card .auth2-btn-outline { height: 40px; }
  .bxa-card .auth2-label { margin-top: 8px; } .bxa-card .auth2-remember { margin: 10px 0; } .bxa-card .auth2-or { margin: 8px 0; }
  .bxa-card .auth2-info { padding: 7px 10px; }
  .bxa-preview { margin-bottom: 16px; } .pv-chart .bars { height: 70px; } .bxa-brand { margin-bottom: 14px; }
}
@media (max-width: 1020px) { .bxa-card .gate-brand span { display: none; } }

/* ==========================================================================
   الاقتراح الثاني: صفحة فاتحة هادئة + بطاقة واحدة مقسومة (لوحة هوية زرقاء + نموذج أبيض)
   ========================================================================== */
body.bxb { background: #F3F5F7; color: #1C2B45; }
body.bxb::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 100% 0%, rgba(30,79,145,.10), transparent 70%), radial-gradient(50% 45% at 0% 100%, rgba(14,138,106,.08), transparent 70%); }
.bxb-page { position: relative; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 3vh, 40px) 16px 12px; }
.bxb-shell { width: min(1080px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border-radius: 30px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 0 #E5E7EB, 0 8px 0 #D5D9E0, 0 40px 80px -24px rgba(17,46,84,.35); }
[dir="rtl"] .bxb-shell .bxb-form { order: -1; }
.bxb-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 36px; color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, #3A6DB0 0%, #1E4F91 45%, #143A6E 100%); }
.bxb-panel::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 38%; background: url('../images/welcome/banner-art.webp') 32% 100% / cover no-repeat; opacity: .35;
  mask-image: linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); }
.bxb-panel .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); left: 50%; top: 34%; transform: translate(-50%, -50%); }
.bxb-panel .r1 { width: 230px; height: 230px; } .bxb-panel .r2 { width: 360px; height: 360px; border-color: rgba(235,199,105,.18); } .bxb-panel .r3 { width: 520px; height: 520px; }
.bxb-logo { position: relative; z-index: 1; filter: drop-shadow(0 18px 30px rgba(0,0,0,.4)); }
.bxb-name { position: relative; z-index: 1; display: block; font-size: 52px; font-weight: 800; line-height: 1; margin-top: 18px; }
.bxb-en { position: relative; z-index: 1; display: block; font-style: normal; font-size: 20px; font-weight: 700; letter-spacing: 7px; margin-top: 6px; color: #E3EAF8; }
.bxb-tag { position: relative; z-index: 1; display: block; margin-top: 12px; font-size: 16px; color: #EBC769; }
.bxb-rule { position: relative; z-index: 1; display: block; width: 70px; height: 4px; border-radius: 2px; margin: 18px auto 22px; background: linear-gradient(90deg, #EBC769, #D9A21B); }
.bxb-feats { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: start; }
.bxb-feats li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #E3EAF8; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.bxb-feats li span { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #1C2B45; background: radial-gradient(circle at 32% 26%, #F1D78C, #D9A21B 60%); box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.bxb-feats .icon { width: 16px; height: 16px; }
.bxb .bxb-form { border-radius: 0; box-shadow: none; padding: 26px 34px 16px; }
.bxb .bxb-form::before { inset-inline: 34px; }
.bxb-copy { margin: 14px 0 0; font-size: 12px; color: #7A8597; text-align: center; }
@media (max-width: 900px) {
  .bxb-shell { grid-template-columns: minmax(0, 1fr); max-width: 480px; border-radius: 24px; }
  .bxb-panel { padding: 26px 20px 22px; } .bxb-panel .ring, .bxb-feats, .bxb-rule, .bxb-panel::after { display: none; }
  .bxb-logo svg { width: 72px; height: 72px; } .bxb-name { font-size: 36px; margin-top: 10px; } .bxb-en { font-size: 15px; } .bxb-tag { font-size: 14px; }
  [dir="rtl"] .bxb-shell .bxb-form { order: 0; }
  .bxb .bxb-form { padding: 20px 18px 12px; } .bxb .bxb-form .gate-brand span { display: none; }
}
@media (max-width: 900px) { .bxb .bxb-form .gate-brand { display: none; } .bxb .bxa-top { justify-content: flex-end; } }

/* ==========================================================================
   التصميم المعتمد للدخول: صورة خلفية بكامل الشاشة + الشعار المعتمد + بطاقة دخول بيضاء مجسّمة
   ========================================================================== */
body.bxc { background: #0B2142; color: #fff; }
.bxc-bg { position: fixed; inset: 0; z-index: 0; background: url('../images/login/login-bg.svg') center / cover no-repeat, #0B2142; }
.bxc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,21,46,.0) 35%, rgba(6,21,46,.35) 100%); }
[dir="rtl"] .bxc-bg::after { background: linear-gradient(270deg, rgba(6,21,46,.0) 35%, rgba(6,21,46,.35) 100%); }
.bxc-wrap { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: clamp(24px, 6vw, 120px); align-items: center; padding: clamp(18px, 4vh, 44px) clamp(18px, 7vw, 140px); }
[dir="rtl"] .bxc-card { order: -1; }
.bxc-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bxc-brand .bx-mark { filter: drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.bxc-brand b { display: block; font-size: clamp(48px, 5vw, 72px); line-height: 1; font-weight: 800; margin-top: 14px; text-shadow: 0 4px 22px rgba(0,0,0,.45); }
.bxc-brand i { display: block; font-style: normal; font-size: clamp(18px, 1.8vw, 26px); font-weight: 700; letter-spacing: 8px; color: #E3EAF8; margin-top: 8px; }
.bxc-brand .tag { display: block; margin-top: 12px; color: #F2C14E; font-size: 17px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.bxc-brand .rule { display: block; width: 76px; height: 4px; border-radius: 2px; margin: 18px auto 22px; background: linear-gradient(90deg, #EBC769, #D9A21B); }
.bxc-brand ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: start; }
.bxc-brand li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #F3F6FD; padding: 9px 14px; border-radius: 14px; background: rgba(8, 26, 54, .45); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.bxc-brand li span { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #1C2B45; background: radial-gradient(circle at 32% 26%, #F1D78C, #D9A21B 60%); box-shadow: 0 3px 6px rgba(0,0,0,.3); }
.bxc-brand li .icon { width: 16px; height: 16px; }
.bxc-card { width: 100%; box-sizing: border-box; }
.bxc-copy { position: fixed; z-index: 1; inset-inline: 0; bottom: 8px; margin: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.6); }
@media (max-width: 960px) {
  .bxc-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 20px; padding-bottom: 40px; }
  [dir="rtl"] .bxc-card { order: 0; }
  .bxc-brand ul, .bxc-brand .rule { display: none; }
  .bxc-brand .bx-mark { width: 84px; height: 87px; } .bxc-brand b { font-size: 40px; margin-top: 8px; } .bxc-brand i { font-size: 15px; } .bxc-brand .tag { font-size: 14px; margin-top: 6px; }
  .bxc-card { max-width: 460px; } .bxc-card .gate-brand span { display: none; } .bxc-card .gate-brand { visibility: hidden; }
  .bxc-copy { position: static; margin: -26px 0 12px; }
}
@media (min-width: 961px) and (max-height: 820px) { .bxc-brand .bx-mark { width: 110px; height: 114px; } .bxc-brand li { padding: 6px 12px; } }
@media (min-width: 961px) { [dir="rtl"] .bxc-wrap { grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); } }

/* استعادة كلمة المرور */
.bxr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bxa-card .bxr-forgot { font-size: 13.5px; font-weight: 700; color: #1E4F91; text-decoration: none; }
.bxa-card .bxr-forgot:hover { text-decoration: underline; }
.bxr-channels { border: 0; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.bxr-ch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; border: 1.5px solid #E5E7EB; background: linear-gradient(180deg, #fff, #F7F8FA); box-shadow: 0 2px 0 #E5E7EB; transition: border-color .15s, box-shadow .15s; }
.bxr-ch input { position: absolute; opacity: 0; pointer-events: none; }
.bxr-ch .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; box-shadow: inset 0 -3px 6px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.15); }
.bxr-ch .ic .icon { width: 20px; height: 20px; }
.ch-email .ic { background: radial-gradient(circle at 32% 26%, #7FA0CC, #1E4F91 60%); }
.ch-sms .ic { background: radial-gradient(circle at 32% 26%, #F1D78C, #D9A21B 60%); }
.ch-whatsapp .ic { background: radial-gradient(circle at 32% 26%, #7CCBB2, #0E8A6A 60%); }
.bxr-ch b { display: block; font-size: 14px; color: #1C2B45; } .bxr-ch small { font-size: 12px; color: #66748C; }
.bxr-ch:has(input:checked) { border-color: #1E4F91; box-shadow: 0 2px 0 #143A6E, 0 0 0 3px rgba(30,79,145,.12); }
.bxr-ch.off { opacity: .5; cursor: not-allowed; }
.bxr-meter { height: 6px; border-radius: 3px; background: #EEF0F3; margin: 10px 0 6px; overflow: hidden; }
.bxr-meter i { display: block; height: 100%; width: 0; border-radius: 3px; background: #C0483E; transition: width .2s, background .2s; }
.bxr-rules { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; color: #7A8597; }
.bxr-rules li::before { content: "○ "; } .bxr-rules li.ok { color: #0B7559; } .bxr-rules li.ok::before { content: "✓ "; }
.bxa-card a.auth2-btn-outline { text-decoration: none; }

/* تعبئة المتصفح التلقائية: لا يخرج لونها عن حدود الحقل (يُطبَّق على الإطار كاملاً بدل الحقل الداخلي) */
.bxa-card .auth2-input input { height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.bxa-card .auth2-input input:-webkit-autofill,
.bxa-card .auth2-input input:-webkit-autofill:hover,
.bxa-card .auth2-input input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #EEF3FB inset; box-shadow: 0 0 0 1000px #EEF3FB inset;
  -webkit-text-fill-color: #1C2B45; caret-color: #1C2B45; transition: background-color 99999s ease-out; }
.bxa-card .auth2-input:has(input:-webkit-autofill), .bxa-card .auth2-input:has(input:autofill) { background: #EEF3FB; }
.bxa-card .auth2-input { overflow: hidden; }
/* الإطار هو الصندوق الوحيد: الأيقونة داخل الصف والحقل شفاف بلا حدود (يمنع ظهور صندوقين متداخلين) */
.bxa-card .auth2-input { margin-bottom: 0; }
.bxa-card .auth2-input .icon { position: static; transform: none; inset: auto; }
.bxa-card .auth2-input input, .bxa-card .auth2-input input:focus, .bxa-card .auth2-input input:disabled { min-height: 0; padding: 0; padding-inline-start: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; }
.bxa-card .auth2-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* زر إظهار/إخفاء كلمة المرور */
.bxa-card .bxa-eye { flex: none; width: 34px; height: 34px; margin-inline-end: -6px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #7A8597; cursor: pointer; }
.bxa-card .bxa-eye:hover { background: #EEF3FB; color: #1E4F91; }
.bxa-card .bxa-eye:focus-visible { outline: 2px solid #4A78B5; outline-offset: 1px; }
.bxa-card .auth2-input .bxa-eye .icon { position: static; transform: none; width: 20px; height: 20px; pointer-events: none; }
.bxa-card .bxa-eye .i-hide { display: none; }
.bxa-card .bxa-eye.on .i-show { display: none; } .bxa-card .bxa-eye.on .i-hide { display: block; }
.bxa-card .bxa-eye.on { color: #1E4F91; }