.login-body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(15, 118, 110, 0.13), transparent 30rem),
    linear-gradient(145deg, var(--bg), var(--surface-2));
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.login-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

.login-brand-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: linear-gradient(160deg, #0b1730, #10203a 55%, #123a34);
  color: #fff;
}

.login-brand-side-image {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.login-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.login-brand-content {
  max-width: 440px;
}

.login-brand-fallback {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 48px;
  text-align: center;
  z-index: 1;
}

.login-brand-content .brand-mark {
  display: grid;
  width: 120px;
  height: 120px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #34d399, #38bdf8);
  color: #10203a;
  font-weight: 900;
  font-size: 1.2rem;
}

.login-brand-content h1 {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 900;
}

.login-brand-content > p {
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.7;
}

.login-feature-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.login-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
  font-size: 0.92rem;
}

.login-feature-list li::before {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  content: "";
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.18);
}

.login-form-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px 24px;
}

.login-card {
  width: min(400px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-card-header {
  margin-bottom: 22px;
  text-align: center;
}

.login-card-header .brand-mark.small {
  display: none;
}

.login-card-header h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 900;
}

.login-card-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.login-alert {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 0.88rem;
  font-weight: 700;
}

/* رسالة نجاح (مثلاً بعد نجاح استعادة الوصول للحساب) — نفس شكل login-alert بس بلون أخضر
   بدل الأحمر. صنف منفصل تماماً لا يمس login-alert الأصلي أو أي صفحة أخرى. */
.login-alert-success {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(22, 163, 74, 0.35);
  border-radius: var(--radius);
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  font-size: 0.88rem;
  font-weight: 700;
}

.login-field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.login-field label {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text);
}

.login-field input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.login-field input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.field-error {
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 700;
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.86rem;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}

.login-forgot {
  color: var(--primary);
  font-weight: 800;
}

.login-submit {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  font-size: 0.98rem;
  cursor: pointer;
}

.login-submit:hover {
  background: var(--primary-strong);
}

.login-hint {
  margin: 16px 0 0;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  direction: ltr;
}

.login-footer {
  color: var(--muted);
  font-size: 0.8rem;
}

.denied-shell {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 100vh;
  padding: 24px;
  text-align: center;
}

.denied-shell .brand-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #34d399, #38bdf8);
  color: #10203a;
  font-weight: 900;
}

@media (max-width: 900px) {
  .login-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .login-brand-side {
    padding: 32px 24px;
    min-height: 220px;
  }

  .login-brand-side-image {
    min-height: 200px;
  }

  .login-feature-list {
    display: none;
  }
}

@media (max-width: 520px) {
  .login-brand-side {
    padding: 24px 18px;
    min-height: 180px;
  }

  .login-brand-side-image {
    min-height: 160px;
  }

  .login-brand-content h1 {
    font-size: 1.5rem;
  }

  .login-brand-fallback {
    padding: 24px 18px;
  }
}

/* ===================== نسخة ذهبية/كحلية (Gold theme) ===================== */

:root {
  --gold: #c9a35c;
  --gold-light: #e6c98a;
  --navy-deep: #0c1220;
  --navy-panel: #10182c;
}

.login-body-gold {
  background: #f5f1ea;
}

.login-shell-gold {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 100vh;
  align-items: stretch;
}

.login-brand-side-gold {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px 44px;
  background:
    radial-gradient(circle at 15% 0%, rgba(201, 163, 92, 0.12), transparent 40%),
    linear-gradient(150deg, #0c1220, #10182c 55%, #101a1a);
  color: #fff;
  overflow: hidden;
}

.login-brand-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.login-brand-header h1 {
  margin: 0 0 6px;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--gold-light);
}

.login-brand-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}

.login-logo-mark {
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  color: var(--gold-light);
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
}

.login-hero-frame {
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
  max-height: 320px;
}

.login-hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.login-feature-grid,
.login-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.feature-tile {
  padding: 14px 12px;
  border: 1px solid rgba(201, 163, 92, 0.35);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.feature-tile .feature-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(201, 163, 92, 0.15);
  font-size: 1.1rem;
}

.feature-tile b {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-light);
  font-size: 0.85rem;
}

.feature-tile small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  line-height: 1.4;
}

.stat-tile {
  padding: 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.stat-tile .stat-icon {
  display: block;
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.stat-tile strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
}

.stat-tile small {
  display: block;
  margin: 2px 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
}

.stat-tile em {
  color: #4ade80;
  font-size: 0.68rem;
  font-style: normal;
}

.login-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-trust-row > div {
  text-align: center;
}

.login-trust-row span {
  display: block;
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.login-trust-row b {
  display: block;
  color: var(--gold-light);
  font-size: 0.78rem;
  margin-bottom: 2px;
}

.login-trust-row small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  line-height: 1.4;
}

.login-form-side-gold {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px;
  background: #f5f1ea;
}

.login-card-gold {
  width: min(400px, 100%);
  padding: 34px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(20, 20, 20, 0.08);
}

.login-card-gold .login-card-header {
  margin-bottom: 22px;
  text-align: center;
}

.login-card-gold .login-card-header h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #1a1a2e;
}

.login-card-gold .login-card-header p {
  margin: 0;
  color: #8a8a95;
  font-size: 0.88rem;
}

.login-field-gold {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.login-field-gold label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1a1a2e;
}

.login-field-gold .input-wrap {
  position: relative;
}

.login-field-gold input {
  width: 100%;
  min-height: 48px;
  padding: 0 42px 0 16px;
  border: 1px solid #e6e2d8;
  border-radius: 12px;
  background: #faf9f6;
  color: #1a1a2e;
  font: inherit;
  box-sizing: border-box;
}

.login-field-gold input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.login-field-gold .input-icon {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7b2a3;
  font-size: 0.95rem;
  pointer-events: none;
}

.toggle-eye {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.6;
}

.login-row-gold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.85rem;
}

.login-remember-gold {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b6b78;
  font-weight: 700;
}

.login-forgot-gold {
  color: var(--gold);
  font-weight: 800;
}

.login-submit-gold {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a2340, #0c1220);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
}

.login-submit-gold:hover {
  filter: brightness(1.1);
}

.login-divider {
  position: relative;
  margin: 20px 0;
  text-align: center;
  color: #b7b2a3;
  font-size: 0.82rem;
}

.login-divider::before,
.login-divider::after {
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #eae6db;
  content: "";
}

.login-divider::before { inset-inline-start: 0; }
.login-divider::after { inset-inline-end: 0; }

.login-admin-btn {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #e6e2d8;
  border-radius: 12px;
  background: #fff;
  color: #1a1a2e;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
}

.login-hint-gold {
  margin: 16px 0 0;
  padding: 10px;
  border-radius: 10px;
  background: #faf9f6;
  color: #8a8a95;
  font-size: 0.78rem;
  text-align: center;
  direction: ltr;
}

.login-footer-gold {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  color: #9a968a;
  font-size: 0.78rem;
  text-align: center;
}

@media (max-width: 980px) {
  .login-shell-gold {
    grid-template-columns: 1fr;
  }

  .login-feature-grid,
  .login-stats-grid,
  .login-trust-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================== واجهة تسجيل الدخول الزرقاء ===================== */
.login-page-v2 {
  --login-blue:#0638af;
  --login-deep:#031858;
  --login-gold:#ffc400;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 47%,rgba(68,125,255,.09),transparent 26rem),
    linear-gradient(100deg,#f8faff 0 49.7%,#f2f6ff 49.8% 100%);
  color:#061543;
  font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
}

.login-language-switcher { position:fixed; top:14px; inset-inline-start:14px; z-index:80; }
.login-language-switcher > button { width:34px; height:34px; border:1px solid rgba(255,255,255,.38); border-radius:11px; background:rgba(0,19,76,.38); color:#fff; cursor:pointer; backdrop-filter:blur(5px); }
.login-language-switcher > div { display:none; position:absolute; inset-inline-start:0; top:calc(100% + 7px); min-width:150px; overflow:hidden; border:1px solid #dbe5f7; border-radius:11px; background:#fff; box-shadow:0 12px 30px rgba(1,26,89,.2); }
.login-language-switcher a { display:block; padding:9px 13px; color:#07143b; text-decoration:none; font-size:12px; }
.login-language-switcher a.selected { background:#eef4ff; font-weight:800; }

.login-v2-header {
  position:relative;
  z-index:2;
  height:190px;
  padding:22px clamp(36px,6vw,90px) 45px;
  display:grid;
  grid-template-columns:1fr 1.45fr 1fr;
  grid-template-areas:"slogan tagline brand";
  align-items:center;
  direction:ltr;
  background:
    repeating-linear-gradient(146deg,transparent 0 54px,rgba(38,114,255,.14) 55px 57px,transparent 58px 91px),
    radial-gradient(ellipse at 55% 25%,#094dc9,transparent 38%),
    linear-gradient(116deg,#071e72,#0538a7 52%,#021349);
  color:#fff;
  border-bottom:3px solid var(--login-gold);
  box-shadow:0 12px 28px rgba(2,40,126,.18);
}
.login-v2-header::after { content:""; position:absolute; left:-7%; right:-7%; bottom:-48px; height:85px; border-radius:50% 50% 0 0/100% 100% 0 0; background:#f6f9ff; box-shadow:0 -11px 0 rgba(231,239,255,.94),0 -15px 0 rgba(255,255,255,.72); }
.login-header-slogan { grid-area:slogan; justify-self:start; position:relative; z-index:2; padding-bottom:10px; color:var(--login-gold); font-size:30px; font-weight:600; direction:rtl; transform:rotate(-8deg); white-space:nowrap; }
.login-header-slogan::after { content:""; position:absolute; left:-4px; right:-4px; bottom:0; height:3px; border-radius:50%; background:var(--login-gold); transform:rotate(-6deg); }
.login-header-tagline { grid-area:tagline; justify-self:end; max-width:360px; color:#fff; font-size:17px; line-height:1.9; direction:rtl; text-align:right; }
.login-header-brand { grid-area:brand; justify-self:end; position:relative; z-index:2; display:flex; align-items:center; gap:12px; direction:rtl; }
.login-header-brand img { width:70px; height:70px; object-fit:cover; border-radius:18px; border:2px solid rgba(255,255,255,.85); box-shadow:0 0 18px rgba(32,111,255,.75); }
.login-header-brand strong { max-width:125px; color:#fff; font-size:20px; line-height:1.2; }

.login-v2-main { position:relative; z-index:3; width:min(1320px,calc(100% - 64px)); margin:42px auto 26px; display:grid; grid-template-columns:470px 1fr; grid-template-areas:"form showcase"; gap:58px; align-items:center; direction:ltr; }
.login-v2-form-panel { grid-area:form; padding-top:38px; direction:rtl; }
.login-v2-card { position:relative; width:100%; padding:75px 34px 26px; border:1px solid rgba(213,224,245,.88); border-radius:28px; background:rgba(255,255,255,.88); box-shadow:0 25px 55px rgba(20,52,123,.13),0 4px 15px rgba(20,52,123,.06); backdrop-filter:blur(10px); }
.login-v2-logo { position:absolute; top:-68px; left:50%; width:138px; height:138px; padding:6px; border-radius:30px; background:linear-gradient(145deg,#074bd0,#02164f); border:3px solid #fff; box-shadow:0 0 0 2px rgba(27,91,216,.18),0 14px 25px rgba(2,42,135,.25); transform:translateX(-50%); overflow:hidden; }
.login-v2-logo img { width:100%; height:100%; border-radius:23px; object-fit:cover; }
.login-v2-card .login-card-header { margin-bottom:26px; }
.login-v2-card .login-card-header h2 { margin:0 0 5px; color:#061543; font-size:35px; line-height:1.25; font-weight:900; }
.login-v2-card .login-card-header p { color:#7d879e; font-size:14px; }
.login-v2-card .login-field { gap:8px; margin-bottom:17px; }
.login-v2-card .login-field label { color:#111b39; font-size:13px; }
.login-input-wrap { position:relative; }
.login-input-wrap > svg { position:absolute; z-index:2; inset-inline-end:16px; top:50%; width:23px; height:23px; transform:translateY(-50%); fill:none; stroke:#7f899f; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.login-v2-card .login-field input { width:100%; min-height:62px; padding:0 50px; border:1.5px solid #cbd5e6; border-radius:14px; background:rgba(255,255,255,.72); color:#07143b; font:inherit; }
.login-v2-card .login-field input:focus { outline:none; border-color:#075de0; box-shadow:0 0 0 3px rgba(7,93,224,.09); }
.login-password-toggle { position:absolute; z-index:3; inset-inline-start:13px; top:50%; width:34px; height:34px; padding:5px; transform:translateY(-50%); border:0; background:transparent; color:#8a93a7; cursor:pointer; }
.login-password-toggle svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.login-v2-card .login-row { gap:12px; margin:2px 0 24px; color:#53617d; font-size:12px; }
.login-v2-card .login-remember { color:#26324c; }
.login-v2-card .login-remember input { width:19px; height:19px; accent-color:#075bdc; }
.login-v2-card .login-forgot { color:#0648ba; text-decoration:none; }
.login-v2-card .login-submit { min-height:66px; gap:13px; border-radius:14px; background:linear-gradient(115deg,#075fee,#043ec1 50%,#062476); box-shadow:0 12px 22px rgba(4,64,188,.25),inset 0 1px rgba(255,255,255,.22); font-size:20px; }
.login-v2-card .login-submit:hover { filter:brightness(1.07); }
.login-v2-card .login-submit svg { width:27px; height:27px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.login-v2-card .login-footer { margin-top:25px; color:#526181; text-align:center; font-size:11px; }

.login-v2-showcase { grid-area:showcase; direction:rtl; text-align:center; }
.login-v2-welcome span { display:block; color:#152046; font-size:23px; }
.login-v2-welcome h1 { margin:6px 0 8px; color:#06195c; font-size:48px; line-height:1.25; font-weight:900; }
.login-v2-welcome p { margin:0; color:#202a48; font-size:16px; }
.login-device-visual { position:relative; width:520px; height:420px; margin:14px auto 0; }
.login-device-visual::before { content:""; position:absolute; left:66px; right:66px; bottom:25px; height:110px; border-radius:50%; background:radial-gradient(ellipse,#54a4ff 0,#1877ea 27%,#dceeff 30%,#fff 50%,transparent 68%); box-shadow:0 17px 30px rgba(29,101,209,.16); }
.visual-phone { position:absolute; z-index:4; left:50%; top:35px; width:146px; height:270px; padding:13px 8px 10px; border:7px solid #071039; border-radius:32px; background:linear-gradient(145deg,#1485f1,#0737a6 72%,#051b61); box-shadow:inset 0 0 0 2px #8bc8ff,0 17px 30px rgba(5,39,122,.27); transform:translateX(-50%) rotate(-2deg); overflow:hidden; }
.visual-phone::after { content:""; position:absolute; inset:0; background:linear-gradient(130deg,rgba(255,255,255,.3),transparent 28% 78%,rgba(0,0,0,.18)); pointer-events:none; }
.phone-speaker { position:absolute; z-index:3; left:50%; top:7px; width:46px; height:7px; border-radius:0 0 8px 8px; background:#071039; transform:translateX(-50%); }
.visual-phone img { position:absolute; left:16px; right:16px; top:54px; width:calc(100% - 32px); height:145px; object-fit:cover; border-radius:19px; box-shadow:0 8px 18px rgba(0,0,0,.2); }
.visual-card { position:absolute; z-index:2; top:120px; width:108px; height:154px; border:2px solid #fff; border-radius:18px; background:rgba(255,255,255,.75); box-shadow:0 13px 28px rgba(40,95,184,.13); display:flex; align-items:center; justify-content:center; color:#166ae4; transform:perspective(400px) rotateY(18deg); }
.visual-card svg { width:62px; height:62px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.visual-chart { left:71px; }.visual-tools { right:71px; transform:perspective(400px) rotateY(-18deg); }
.visual-shield { position:absolute; z-index:6; left:50%; top:232px; width:93px; height:108px; border:5px solid #fff; border-radius:46% 46% 55% 55%; background:linear-gradient(#fff,#d9ebff 24%,#0864e7 26%,#0636af); color:#fff; box-shadow:0 10px 22px rgba(5,61,172,.28); transform:translateX(-50%); display:flex; align-items:center; justify-content:center; }
.visual-shield svg { width:63px; height:75px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.visual-platform { position:absolute; z-index:1; left:50%; bottom:8px; width:360px; height:105px; border:12px solid #fff; border-radius:50%; background:repeating-radial-gradient(ellipse at center,#197ef2 0 2px,#83c1ff 3px 5px,#eaf5ff 6px 14px); box-shadow:0 15px 25px rgba(26,83,166,.18); transform:translateX(-50%); }

.login-v2-features { width:min(600px,100%); margin:-14px auto 0; padding:0; list-style:none; display:grid; gap:10px; }
.login-v2-features li { position:relative; min-height:56px; padding:8px 72px 8px 20px; border:1px solid #e2e9f5; border-inline-start:4px solid var(--login-gold); border-radius:13px; background:rgba(255,255,255,.84); box-shadow:0 7px 15px rgba(31,66,137,.07); color:#101a37; display:flex; align-items:center; justify-content:center; font-size:14px; }
.login-v2-features li > span { position:absolute; inset-inline-start:-1px; top:50%; width:58px; height:58px; border-radius:14px; background:linear-gradient(145deg,#086cef,#0535ae); box-shadow:0 8px 15px rgba(4,68,184,.2); color:#fff; display:flex; align-items:center; justify-content:center; transform:translateY(-50%); }
.login-v2-features svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.login-v2-trust-strip { width:min(1310px,calc(100% - 64px)); min-height:108px; margin:20px auto 36px; padding:14px 28px; border:1px solid #dfe7f5; border-radius:26px; background:rgba(255,255,255,.88); box-shadow:0 15px 34px rgba(20,52,123,.1); display:grid; grid-template-columns:repeat(4,1fr); direction:rtl; }
.login-v2-trust-strip > div { padding:7px 20px; border-inline-start:1px solid #e1e7f2; display:flex; align-items:center; justify-content:center; gap:13px; color:#172140; font-size:12px; }
.login-v2-trust-strip > div:last-child { border-inline-start:0; }
.login-v2-trust-strip svg { width:42px; height:42px; flex-shrink:0; fill:none; stroke:#063695; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.login-v2-footer { width:min(1320px,calc(100% - 48px)); min-height:106px; margin:0 auto 25px; padding:15px 28px; border:1px solid rgba(89,142,244,.42); border-inline-start:0; border-radius:45px; background:linear-gradient(112deg,#ffc912 0 25%,#053fae 25.2% 56%,#031755 100%); box-shadow:0 14px 30px rgba(4,41,129,.24); color:#fff; display:grid; grid-template-columns:1fr 1.15fr 1.45fr; grid-template-areas:"support brand icons"; align-items:center; direction:ltr; }
.login-footer-support { grid-area:support; display:flex; align-items:center; gap:13px; color:#071849; direction:rtl; }
.login-footer-support > span { width:69px; height:69px; border:3px solid #092260; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.login-footer-support svg { width:40px; height:40px; }
.login-footer-support strong { font-size:15px; }
.login-footer-brand { grid-area:brand; color:#fff; text-align:center; direction:rtl; }
.login-footer-brand strong { display:block; font-size:21px; }.login-footer-brand i { display:block; width:43px; height:3px; margin:6px auto; background:var(--login-gold); }.login-footer-brand small { color:#eef3ff; font-size:11px; }
.login-footer-icons { grid-area:icons; display:flex; justify-content:flex-end; gap:15px; }
.login-footer-icons span { width:52px; height:52px; border:1px solid rgba(255,255,255,.3); border-radius:16px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.login-v2-footer svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.login-footer-icons svg { width:29px; height:29px; }

/* نحافظ على التصميم نفسه ونصغّره كوحدة واحدة فقط على شاشات الكمبيوتر القصيرة،
   حتى يظهر النموذج والتكملة والفوتر ضمن الشاشة بدون تمرير عمودي. */
@media (min-width:821px) and (max-height:1100px) {
  .login-page-v2 { zoom:.8; }
}

@media (min-width:821px) and (max-height:850px) {
  .login-page-v2 { zoom:.7; }
}

@media (max-width:1050px) {
  .login-v2-main { width:min(920px,calc(100% - 36px)); grid-template-columns:410px 1fr; gap:24px; }
  .login-device-visual { transform:scale(.82); margin-block:-20px -42px; }
  .login-header-slogan { font-size:23px; }
  .login-header-tagline { font-size:14px; }
  .login-header-brand strong { display:none; }
}

@media (max-width:820px) {
  .login-v2-header { height:140px; padding:15px 20px 32px; grid-template-columns:1fr auto 1fr; }
  .login-v2-header::after { bottom:-32px; height:58px; }
  .login-header-slogan { font-size:18px; }
  .login-header-tagline { font-size:11px; text-align:center; }
  .login-header-brand img { width:55px; height:55px; border-radius:14px; }
  .login-v2-main { width:min(560px,calc(100% - 28px)); margin-top:55px; grid-template-columns:1fr; grid-template-areas:"form" "showcase"; }
  .login-v2-form-panel { padding-top:45px; }
  .login-v2-showcase { display:none; }
  .login-v2-trust-strip { width:calc(100% - 28px); grid-template-columns:1fr 1fr; }
  .login-v2-trust-strip > div:nth-child(2) { border-inline-start:0; }
  .login-v2-footer { width:calc(100% - 20px); grid-template-columns:1fr 1fr; grid-template-areas:"support brand" "icons icons"; gap:10px; background:linear-gradient(112deg,#ffc912 0 42%,#063da8 42.3% 100%); }
  .login-footer-icons { justify-content:center; }
}

@media (max-width:520px) {
  .login-page-v2 { background:#f4f7fe; }
  .login-v2-header { height:115px; padding-inline:12px; }
  .login-header-slogan { font-size:13px; }
  .login-header-tagline { max-width:145px; font-size:8px; }
  .login-header-brand img { width:45px; height:45px; border-radius:11px; }
  .login-v2-main { margin-top:45px; }
  .login-v2-card { padding:67px 20px 22px; border-radius:23px; }
  .login-v2-logo { top:-55px; width:110px; height:110px; border-radius:25px; }
  .login-v2-card .login-card-header h2 { font-size:27px; }
  .login-v2-card .login-field input { min-height:56px; }
  .login-v2-card .login-row { align-items:flex-start; flex-direction:column; }
  .login-v2-trust-strip { padding:10px; border-radius:20px; }
  .login-v2-trust-strip > div { padding:8px; gap:7px; font-size:9px; }
  .login-v2-trust-strip svg { width:30px; height:30px; }
  .login-v2-footer { padding:13px; border-radius:28px; }
  .login-footer-support > span { width:49px; height:49px; }.login-footer-support svg { width:28px; height:28px; }.login-footer-support strong { font-size:10px; }
  .login-footer-brand strong { font-size:14px; }.login-footer-brand small { font-size:7px; }
  .login-footer-icons { gap:8px; }.login-footer-icons span { width:39px; height:39px; border-radius:12px; }.login-footer-icons svg { width:21px; height:21px; }
}