:root{
  --exa-bg:#040b16;
  --exa-bg-2:#071321;
  --exa-panel:rgba(6,17,31,.96);
  --exa-panel-2:rgba(10,23,39,.92);
  --exa-panel-3:rgba(12,26,46,.88);
  --exa-line:rgba(214,169,53,.18);
  --exa-line-strong:rgba(214,169,53,.36);
  --exa-gold:#d6a935;
  --exa-gold-2:#f3c95a;
  --exa-text:#f8fbff;
  --exa-text-soft:#aab6c8;
  --exa-shadow:0 24px 70px rgba(0,0,0,.42);
  --exa-window-w:min(1120px, calc(100vw - 120px));
  --exa-window-h:min(660px, calc(100vh - 110px));
}

body.ua-guest.ua-shell-plain{
  background:
    radial-gradient(circle at 20% 18%, rgba(20,62,110,.22), transparent 30%),
    radial-gradient(circle at 82% 80%, rgba(16,42,92,.16), transparent 28%),
    linear-gradient(180deg, #020813 0%, #03101c 100%) !important;
  overflow:hidden;
}
body.ua-guest.ua-shell-plain .ua-main{
  min-height:100vh;
}
body.ua-guest.ua-shell-plain .ua-page{
  min-height:100vh;
  padding:0 !important;
}

.exa-login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:38px 36px;
  direction:rtl;
}

.exa-login-window{
  width:var(--exa-window-w);
  height:var(--exa-window-h);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(214,169,53,.28);
  background:
    linear-gradient(180deg, rgba(6,18,34,.98), rgba(4,13,26,.98));
  box-shadow:var(--exa-shadow);
  position:relative;
}
.exa-login-window::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 28% 48%, rgba(29,72,129,.14), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(18,49,99,.10), transparent 24%);
  pointer-events:none;
}

.exa-login-titlebar{
  height:62px;
  flex:0 0 62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px 0 14px;
  border-bottom:1px solid rgba(214,169,53,.14);
  background:linear-gradient(180deg, rgba(8,18,32,.92), rgba(5,15,28,.84));
  position:relative;
  z-index:2;
}
.exa-titlebar-brand{
  display:flex;
  align-items:center;
  gap:14px;
  direction:ltr;
}
.exa-app-name{
  font-size:18px;
  font-weight:900;
  color:#fff6da;
  letter-spacing:.1px;
}
.exa-app-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(214,169,53,.4);
  background:linear-gradient(180deg, rgba(214,169,53,.2), rgba(214,169,53,.14));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.exa-app-mark span{
  width:16px;
  height:24px;
  display:block;
  border-radius:8px;
  background:linear-gradient(180deg, var(--exa-gold-2), var(--exa-gold));
}
.exa-titlebar-controls{
  display:flex;
  align-items:center;
  gap:10px;
  direction:ltr;
}
.exa-win-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(214,169,53,.38);
  background:rgba(7,18,31,.5);
  color:#eef3ff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  pointer-events:none;
}
.exa-win-btn i{font-size:13px;line-height:1;}

.exa-login-shell{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(340px, 42%) minmax(420px, 58%);
  position:relative;
  z-index:1;
}

.exa-login-visual,
.exa-login-panel{
  min-height:0;
  padding:18px 26px 16px;
}
.exa-login-visual{
  border-inline-end:1px solid rgba(214,169,53,.10);
}
.exa-visual-inner{
  height:100%;
  border-radius:0;
  padding:18px 14px 10px;
  background:linear-gradient(180deg, rgba(11,24,42,.54), rgba(10,21,38,.32));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.exa-visual-head{
  text-align:center;
  padding-top:2px;
}
.exa-hero-icon{
  width:76px;
  height:76px;
  margin:0 auto 14px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #f1cf63, #d9ad3a);
  color:#10141c;
  font-size:28px;
  box-shadow:0 18px 40px rgba(214,169,53,.16);
}
.exa-visual-title{
  margin:0;
  font-size:22px;
  line-height:1.35;
  font-weight:950;
  color:var(--exa-text);
}
.exa-visual-subtitle{
  margin:5px 0 0;
  color:#c0cada;
  font-size:14px;
  font-weight:700;
}

.exa-system-map{
  width:100%;
  max-width:360px;
  height:320px;
  position:relative;
}
.exa-system-hub{
  position:absolute;
  inset:50% auto auto 50%;
  width:152px;
  height:152px;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.exa-system-hub::before,
.exa-system-hub::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:28px;
  background:rgba(214,169,53,.08);
}
.exa-system-hub::after{
  inset:40px;
  background:rgba(214,169,53,.06);
}
.exa-system-core{
  position:relative;
  z-index:2;
  width:86px;
  height:86px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #f0cd61, #d9ad39);
  color:#13161d;
  font-size:30px;
  box-shadow:0 0 0 8px rgba(214,169,53,.08), 0 10px 30px rgba(214,169,53,.16);
}
.exa-node{
  position:absolute;
  width:82px;
  text-align:center;
  color:#eef4ff;
  font-size:13px;
  font-weight:800;
}
.exa-node::before{
  content:"";
  position:absolute;
  inset:14px auto auto 50%;
  width:1px;
  height:72px;
  border-inline-start:1px dashed rgba(214,169,53,.28);
  transform-origin:top center;
  z-index:0;
}
.exa-node-icon{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 8px;
  border-radius:18px;
  border:1px solid rgba(214,169,53,.26);
  background:rgba(6,16,29,.88);
  color:#f3c95a;
  font-size:25px;
}
.exa-node-label{display:block; position:relative; z-index:1; white-space:nowrap;}

.exa-node-users{top:2px; left:50%; transform:translateX(-50%);} .exa-node-users::before{transform:translateX(-50%) rotate(0deg);}
.exa-node-routers{top:98px; right:8px;} .exa-node-routers::before{left:4px; transform:translateX(-50%) rotate(46deg); height:80px;}
.exa-node-monitor{top:104px; left:10px;} .exa-node-monitor::before{left:auto; right:4px; transform:translateX(50%) rotate(-47deg); height:78px;}
.exa-node-sectors{bottom:0; left:16px;} .exa-node-sectors::before{left:auto; right:10px; transform:translateX(50%) rotate(-133deg); height:80px; top:-24px;}
.exa-node-invoices{bottom:0; right:16px;} .exa-node-invoices::before{left:10px; transform:translateX(-50%) rotate(132deg); height:80px; top:-24px;}
.exa-node-pppoe{bottom:-2px; left:50%; transform:translateX(-50%);} .exa-node-pppoe::before{top:-18px; transform:translateX(-50%) rotate(180deg); height:68px;}

.exa-visual-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:#d8deea;
  font-weight:800;
  font-size:13px;
}
.exa-visual-status i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2dd36f;
  box-shadow:0 0 14px rgba(45,211,111,.46);
}

.exa-login-panel{
  display:flex;
  align-items:center;
  justify-content:center;
}
.exa-login-panel-inner{
  width:min(100%, 560px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:10px 14px 8px;
}
.exa-login-copy{
  text-align:right;
  margin-bottom:4px;
}
.exa-login-title{
  margin:0;
  color:var(--exa-text);
  font-size:40px;
  line-height:1.15;
  font-weight:1000;
}
.exa-login-subtitle{
  margin:8px 0 0;
  color:#b9c3d5;
  font-size:15px;
  font-weight:800;
}
.exa-login-alert{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(239,68,68,.11);
  border:1px solid rgba(239,68,68,.30);
  color:#ffd5d5;
  font-weight:800;
}
.exa-login-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.exa-field-group{display:flex; flex-direction:column; gap:8px;}
.exa-field-label{
  font-size:14px;
  font-weight:900;
  color:#ffffff;
}
.exa-field-shell{
  position:relative;
}
.exa-field-input{
  width:100%;
  height:64px;
  padding:0 56px 0 52px;
  border-radius:18px;
  border:1px solid rgba(214,169,53,.22);
  background:linear-gradient(180deg, rgba(20,33,52,.92), rgba(16,27,45,.94));
  color:#f2f6ff !important;
  font-size:15px;
  font-weight:800;
  box-shadow:none !important;
}
.exa-field-input::placeholder{color:rgba(214,222,236,.34);}
.exa-field-input:focus{
  border-color:rgba(214,169,53,.55) !important;
  box-shadow:0 0 0 3px rgba(214,169,53,.08), inset 0 0 0 1px rgba(214,169,53,.10) !important;
  background:linear-gradient(180deg, rgba(24,39,61,.96), rgba(17,29,48,.96));
}
.exa-field-icon,
.exa-field-toggle{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#9dacbf;
  padding:0;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.exa-field-icon-end{inset-inline-end:18px;}
.exa-field-toggle{inset-inline-start:18px; cursor:pointer;}
.exa-field-toggle:hover{color:#d9e3f2;}
.exa-login-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:6px;
}
.exa-btn{
  height:62px;
  border-radius:18px;
  border:1px solid rgba(214,169,53,.18);
  font-size:16px;
  font-weight:950;
}
.exa-btn-primary{
  background:linear-gradient(180deg, #d7b14a, #c7a53c);
  color:#11151b !important;
}
.exa-btn-primary:hover{background:linear-gradient(180deg, #e2bf61, #cfac43);}
.exa-btn-secondary{
  background:linear-gradient(180deg, rgba(16,28,48,.86), rgba(13,23,39,.92));
  color:#edf3ff !important;
}
.exa-btn-secondary:hover{background:linear-gradient(180deg, rgba(19,33,57,.96), rgba(16,28,47,.96));}

.exa-login-footer{
  flex:0 0 52px;
  min-height:52px;
  border-top:1px solid rgba(214,169,53,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 24px;
  text-align:center;
  color:#d5deed;
  font-weight:850;
  position:relative;
  z-index:2;
}
.exa-login-footer-brand{color:var(--exa-gold-2);}
.exa-login-footer-sep{opacity:.65;}

@media (max-width: 1320px){
  :root{
    --exa-window-w:min(1060px, calc(100vw - 76px));
    --exa-window-h:min(640px, calc(100vh - 84px));
  }
  .exa-login-title{font-size:36px;}
}

@media (max-width: 1100px){
  :root{
    --exa-window-w:min(960px, calc(100vw - 34px));
    --exa-window-h:min(760px, calc(100vh - 36px));
  }
  .exa-login-page{padding:18px;}
  .exa-login-shell{grid-template-columns:1fr;}
  .exa-login-visual{border-inline-end:0; border-bottom:1px solid rgba(214,169,53,.10);}
  .exa-visual-inner{padding-bottom:14px;}
  .exa-system-map{height:290px;}
  .exa-login-panel-inner{width:min(100%, 640px);}
}

@media (max-width: 640px){
  .exa-login-page{padding:10px;}
  .exa-login-window{border-radius:18px;}
  .exa-login-titlebar{padding-inline:10px;}
  .exa-app-name{font-size:15px;}
  .exa-login-visual, .exa-login-panel{padding:14px;}
  .exa-visual-title{font-size:19px;}
  .exa-system-map{transform:scale(.9); transform-origin:center top; margin-bottom:-12px;}
  .exa-login-title{font-size:30px;}
  .exa-field-input, .exa-btn{height:56px;}
  .exa-login-actions{grid-template-columns:1fr;}
  .exa-login-footer{min-height:48px; gap:8px; padding-inline:10px; font-size:12px;}
}


/* =========================================================
   EXANET Login v3 correction
   الهدف:
   - ترتيب النافذة مثل صورة Figma: الرسم يسار / تسجيل الدخول يمين
   - اسم البرنامج يسار / أزرار النافذة يمين
   - منع قلب العناصر بسبب RTL
   - تصغير الحجم ومنع التصاق المحتوى بالحواف
   - إصلاح لون autofill الأبيض في Chrome
   ========================================================= */

body.ua-guest.ua-shell-plain{
  overflow:hidden !important;
  background:
    radial-gradient(circle at 22% 16%, rgba(23,61,103,.14), transparent 31%),
    radial-gradient(circle at 82% 76%, rgba(14,38,83,.13), transparent 30%),
    #040b16 !important;
}

body.ua-guest.ua-shell-plain .ua-main,
body.ua-guest.ua-shell-plain .ua-page{
  min-height:100vh !important;
  padding:0 !important;
  margin:0 !important;
}

.exa-login-page{
  min-height:100vh !important;
  height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:28px !important;
  box-sizing:border-box !important;
  direction:ltr !important;
}

.exa-login-window{
  width:min(1030px, calc(100vw - 96px)) !important;
  height:min(645px, calc(100vh - 96px)) !important;
  min-width:900px !important;
  min-height:560px !important;
  max-width:1030px !important;
  max-height:645px !important;
  direction:ltr !important;
  border-radius:24px !important;
  overflow:hidden !important;
}

.exa-login-titlebar{
  direction:ltr !important;
  height:52px !important;
  flex-basis:52px !important;
  padding:0 22px 0 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.exa-titlebar-brand{
  direction:ltr !important;
  order:1 !important;
  display:flex !important;
  align-items:center !important;
}

.exa-titlebar-controls{
  direction:ltr !important;
  order:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
}

.exa-app-name{
  font-size:14px !important;
  letter-spacing:.15px !important;
}

.exa-app-mark{
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
}

.exa-app-mark span{
  width:12px !important;
  height:18px !important;
  border-radius:6px !important;
}

.exa-win-btn{
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
}

.exa-win-btn i{
  font-size:10px !important;
}

.exa-login-shell{
  direction:ltr !important;
  display:grid !important;
  grid-template-columns:45% 55% !important;
  flex:1 1 auto !important;
  min-height:0 !important;
}

.exa-login-visual{
  grid-column:1 !important;
  direction:rtl !important;
  border-inline-end:1px solid rgba(214,169,53,.10) !important;
  border-inline-start:0 !important;
  padding:18px 26px 12px !important;
  min-height:0 !important;
}

.exa-login-panel{
  grid-column:2 !important;
  direction:rtl !important;
  padding:18px 34px 12px !important;
  min-height:0 !important;
}

.exa-visual-inner{
  height:100% !important;
  padding:14px 10px 8px !important;
  gap:10px !important;
  justify-content:space-between !important;
  overflow:hidden !important;
}

.exa-hero-icon{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  margin-bottom:12px !important;
  font-size:22px !important;
}

.exa-visual-title{
  font-size:20px !important;
  line-height:1.25 !important;
}

.exa-visual-subtitle{
  font-size:12px !important;
  margin-top:4px !important;
}

.exa-system-map{
  width:100% !important;
  max-width:330px !important;
  height:285px !important;
  margin:0 auto !important;
}

.exa-system-core{
  width:70px !important;
  height:70px !important;
  border-radius:20px !important;
  font-size:25px !important;
}

.exa-system-hub{
  width:130px !important;
  height:130px !important;
}

.exa-node{
  width:74px !important;
  font-size:11.5px !important;
}

.exa-node-icon{
  width:50px !important;
  height:50px !important;
  border-radius:16px !important;
  font-size:20px !important;
  margin-bottom:6px !important;
}

.exa-node-users{top:0 !important;}
.exa-node-routers{top:86px !important; right:8px !important;}
.exa-node-monitor{top:86px !important; left:8px !important;}
.exa-node-sectors{bottom:0 !important; left:14px !important;}
.exa-node-invoices{bottom:0 !important; right:14px !important;}
.exa-node-pppoe{bottom:0 !important;}

.exa-visual-status{
  font-size:12px !important;
  margin-top:0 !important;
  padding-bottom:0 !important;
}

.exa-login-panel{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.exa-login-panel-inner{
  width:min(100%, 520px) !important;
  padding:0 !important;
  gap:16px !important;
}

.exa-login-copy{
  text-align:right !important;
  margin-bottom:20px !important;
}

.exa-login-title{
  font-size:36px !important;
  line-height:1.15 !important;
  margin:0 !important;
}

.exa-login-subtitle{
  font-size:14px !important;
  margin-top:8px !important;
}

.exa-login-form{
  gap:16px !important;
}

.exa-field-group{
  gap:7px !important;
}

.exa-field-label{
  font-size:13px !important;
}

.exa-field-input{
  height:48px !important;
  border-radius:12px !important;
  padding-inline-start:46px !important;
  padding-inline-end:46px !important;
  font-size:13.5px !important;
  color:#eef5ff !important;
  background:rgba(20,33,52,.84) !important;
  border-color:rgba(214,169,53,.24) !important;
}

.exa-field-input::placeholder{
  color:rgba(194,205,222,.58) !important;
  opacity:1 !important;
}

.exa-field-input:focus{
  background:rgba(22,36,56,.95) !important;
  border-color:rgba(214,169,53,.58) !important;
}

.exa-field-icon-end{
  inset-inline-end:15px !important;
}

.exa-field-toggle{
  inset-inline-start:15px !important;
  z-index:2 !important;
}

.exa-field-input:-webkit-autofill,
.exa-field-input:-webkit-autofill:hover,
.exa-field-input:-webkit-autofill:focus,
.exa-field-input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px rgb(20,33,52) inset !important;
  box-shadow:0 0 0 1000px rgb(20,33,52) inset !important;
  -webkit-text-fill-color:#eef5ff !important;
  caret-color:#eef5ff !important;
  border-color:rgba(214,169,53,.34) !important;
  transition:background-color 999999s ease-in-out 0s !important;
}

.exa-login-actions{
  direction:ltr !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  margin-top:4px !important;
}

.exa-btn{
  height:48px !important;
  border-radius:12px !important;
  font-size:14px !important;
}

.exa-login-footer{
  direction:ltr !important;
  flex:0 0 44px !important;
  min-height:44px !important;
  height:44px !important;
  padding:0 22px !important;
  gap:10px !important;
  font-size:13px !important;
}

@media (min-width: 901px){
  .exa-login-shell{
    grid-template-columns:45% 55% !important;
  }
  .exa-login-visual{grid-column:1 !important;}
  .exa-login-panel{grid-column:2 !important;}
}

@media (max-width: 980px){
  .exa-login-window{
    min-width:0 !important;
    width:calc(100vw - 24px) !important;
    height:calc(100vh - 24px) !important;
    max-height:none !important;
  }
  .exa-login-shell{
    grid-template-columns:1fr !important;
  }
  .exa-login-visual,
  .exa-login-panel{
    grid-column:1 !important;
  }
}


/* =========================================================
   EXANET Login v4
   - تصغير الواجهة تقريباً 25% بدون تداخل
   - اعتماد لوغو البرنامج الموجود sidebar_program_logo.png
   - الحفاظ على نفس ترتيب صورة Figma: الرسم يسار / الدخول يمين
   ========================================================= */

body.ua-guest.ua-shell-plain{
  overflow:hidden !important;
}

/* تصغير الحاوية 25% تقريباً مع تمركزها */
.exa-login-page{
  padding:22px !important;
  direction:ltr !important;
}

.exa-login-window{
  width:min(840px, calc(100vw - 80px)) !important;
  height:min(484px, calc(100vh - 86px)) !important;
  min-width:780px !important;
  min-height:450px !important;
  max-width:840px !important;
  max-height:484px !important;
  border-radius:20px !important;
  direction:ltr !important;
  overflow:hidden !important;
}

/* شريط العنوان أصغر ومطابق: الاسم واللوغو يسار، الأزرار يمين */
.exa-login-titlebar{
  height:44px !important;
  flex:0 0 44px !important;
  padding:0 16px 0 14px !important;
  direction:ltr !important;
}

.exa-titlebar-brand{
  order:1 !important;
  direction:ltr !important;
  gap:10px !important;
}

.exa-titlebar-controls{
  order:2 !important;
  direction:ltr !important;
  gap:8px !important;
}

.exa-app-name{
  font-size:12.5px !important;
  font-weight:900 !important;
}

.exa-app-mark{
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  padding:3px !important;
  background:rgba(214,169,53,.12) !important;
  border:1px solid rgba(214,169,53,.34) !important;
  overflow:hidden !important;
}

.exa-app-mark span{display:none !important;}

.exa-app-logo img,
.exa-hero-logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
}

.exa-win-btn{
  width:26px !important;
  height:26px !important;
  border-radius:8px !important;
}

.exa-win-btn i{
  font-size:9px !important;
}

/* نفس التوزيع الأصلي لكن أصغر */
.exa-login-shell{
  grid-template-columns:45% 55% !important;
  direction:ltr !important;
}

.exa-login-visual{
  grid-column:1 !important;
  direction:rtl !important;
  padding:12px 20px 8px !important;
}

.exa-login-panel{
  grid-column:2 !important;
  direction:rtl !important;
  padding:12px 28px 8px !important;
}

/* الرسم واللوغو */
.exa-visual-inner{
  padding:10px 8px 6px !important;
  gap:7px !important;
  overflow:hidden !important;
}

.exa-hero-icon{
  width:52px !important;
  height:52px !important;
  border-radius:16px !important;
  margin:0 auto 8px !important;
  padding:7px !important;
  font-size:0 !important;
}

.exa-hero-logo{
  background:linear-gradient(180deg, rgba(241,207,99,.95), rgba(217,173,58,.95)) !important;
}

.exa-hero-logo i{
  display:none !important;
}

.exa-visual-title{
  font-size:17px !important;
  line-height:1.25 !important;
}

.exa-visual-subtitle{
  font-size:10.5px !important;
  margin-top:3px !important;
}

.exa-system-map{
  max-width:275px !important;
  height:230px !important;
}

.exa-system-hub{
  width:104px !important;
  height:104px !important;
}

.exa-system-core{
  width:58px !important;
  height:58px !important;
  border-radius:17px !important;
  font-size:20px !important;
}

.exa-node{
  width:62px !important;
  font-size:10px !important;
}

.exa-node-icon{
  width:40px !important;
  height:40px !important;
  border-radius:13px !important;
  font-size:16px !important;
  margin-bottom:4px !important;
}

.exa-node-users{top:0 !important; left:50% !important;}
.exa-node-routers{top:70px !important; right:4px !important;}
.exa-node-monitor{top:70px !important; left:4px !important;}
.exa-node-sectors{bottom:0 !important; left:8px !important;}
.exa-node-invoices{bottom:0 !important; right:8px !important;}
.exa-node-pppoe{bottom:0 !important; left:50% !important;}

.exa-node::before{
  height:52px !important;
  opacity:.9 !important;
}

.exa-node-routers::before,
.exa-node-monitor::before,
.exa-node-sectors::before,
.exa-node-invoices::before{
  height:60px !important;
}

.exa-visual-status{
  font-size:10.5px !important;
  gap:6px !important;
}

.exa-visual-status i{
  width:8px !important;
  height:8px !important;
}

/* نموذج الدخول أصغر بدون تداخل */
.exa-login-panel-inner{
  width:min(100%, 420px) !important;
  gap:11px !important;
  padding:0 !important;
}

.exa-login-copy{
  margin-bottom:10px !important;
}

.exa-login-title{
  font-size:30px !important;
  line-height:1.12 !important;
}

.exa-login-subtitle{
  font-size:12px !important;
  margin-top:6px !important;
}

.exa-login-form{
  gap:11px !important;
}

.exa-field-group{
  gap:5px !important;
}

.exa-field-label{
  font-size:11.5px !important;
}

.exa-field-input{
  height:40px !important;
  border-radius:10px !important;
  padding-inline-start:38px !important;
  padding-inline-end:38px !important;
  font-size:12px !important;
}

.exa-field-icon,
.exa-field-toggle{
  width:24px !important;
  height:24px !important;
  font-size:12px !important;
}

.exa-field-icon-end{
  inset-inline-end:12px !important;
}

.exa-field-toggle{
  inset-inline-start:12px !important;
}

.exa-login-actions{
  grid-template-columns:1fr 1fr !important;
  gap:11px !important;
  margin-top:3px !important;
  direction:ltr !important;
}

.exa-btn{
  height:40px !important;
  border-radius:10px !important;
  font-size:12.5px !important;
}

.exa-login-alert{
  padding:8px 10px !important;
  border-radius:10px !important;
  font-size:11.5px !important;
}

/* الفوتر أصغر وداخل الحدود */
.exa-login-footer{
  height:36px !important;
  min-height:36px !important;
  flex:0 0 36px !important;
  padding:0 18px !important;
  gap:8px !important;
  font-size:11.5px !important;
}

/* مهم: على شاشة سطح المكتب لا نقلب الترتيب */
@media (min-width: 781px){
  .exa-login-window{
    width:min(840px, calc(100vw - 80px)) !important;
    height:min(484px, calc(100vh - 86px)) !important;
  }
  .exa-login-shell{
    grid-template-columns:45% 55% !important;
  }
  .exa-login-visual{grid-column:1 !important;}
  .exa-login-panel{grid-column:2 !important;}
}

/* فقط للشاشات الصغيرة جداً */
@media (max-width: 780px){
  .exa-login-window{
    min-width:0 !important;
    width:calc(100vw - 18px) !important;
    height:calc(100vh - 18px) !important;
    max-width:none !important;
    max-height:none !important;
  }
  .exa-login-shell{
    grid-template-columns:1fr !important;
  }
  .exa-login-visual,
  .exa-login-panel{
    grid-column:1 !important;
  }
  .exa-system-map{
    height:190px !important;
    transform:scale(.82) !important;
    transform-origin:center center !important;
    margin-block:-14px !important;
  }
}


/* =========================================================
   EXANET Login v5 refinement
   - إزالة الإطارات عن اللوغو
   - ربط اسم البرنامج/الإصدار بالقيم الفعلية من النظام
   - ربط اسم الأسفل باسم الشركة إن وُجد وإلا باسم البرنامج
   - حذف حالة "النظام جاهز للاتصال"
   - تنظيم خريطة الوحدات والخطوط
   - إعطاء اللوحة اليسرى خلفية مختلفة بطابع برمجي 0/1
   ========================================================= */

.exa-login-window{
  width:min(860px, calc(100vw - 90px)) !important;
  height:min(500px, calc(100vh - 90px)) !important;
  min-width:800px !important;
  min-height:470px !important;
}

.exa-login-titlebar{
  height:48px !important;
  flex:0 0 48px !important;
  padding:0 16px !important;
}

.exa-titlebar-brand{
  gap:10px !important;
  max-width:calc(100% - 120px) !important;
}

.exa-app-namebox{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important;
  min-width:0 !important;
  flex-wrap:wrap !important;
}

.exa-app-name{
  font-size:14px !important;
  font-weight:900 !important;
  color:#fff6da !important;
  white-space:nowrap !important;
}

.exa-app-version{
  font-size:11px !important;
  font-weight:800 !important;
  color:#d6a935 !important;
  opacity:.95 !important;
  white-space:nowrap !important;
}

/* إزالة أي إطار عن اللوغو في الشريط العلوي */
.exa-app-mark,
.exa-app-logo{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.exa-app-logo img{
  display:block !important;
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28)) !important;
}

.exa-login-shell{
  grid-template-columns:43% 57% !important;
}

.exa-login-visual,
.exa-login-panel{
  padding:12px 18px 10px !important;
}

/* جهة يسار مختلفة بطابع برمجي */
.exa-login-visual{
  position:relative !important;
  overflow:hidden !important;
  border-inline-end:1px solid rgba(214,169,53,.12) !important;
  background:
    linear-gradient(180deg, rgba(5,15,28,.62), rgba(5,13,24,.28)) !important;
}

.exa-login-visual::before{
  content:"01001011 10100100 01001101 11001010\A10101100 01010101 11000101 00101010\A00110101 10010110 01010100 11100010\A11001010 01010101 00111001 10101010\A01010010 11100101 00110011 01010101\A10101010 01010101 11001010 00110101";
  position:absolute;
  inset:18px 8px 18px 10px;
  font-family:Consolas, 'Courier New', monospace;
  font-size:11px;
  line-height:1.9;
  letter-spacing:2px;
  color:rgba(87,130,185,.14);
  white-space:pre;
  pointer-events:none;
  user-select:none;
  transform:skewY(-9deg);
}

.exa-login-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(30,95,165,.15), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(13,60,121,.12), transparent 28%),
    linear-gradient(90deg, rgba(8,28,56,.48), rgba(4,16,31,.12));
  pointer-events:none;
}

.exa-visual-inner{
  position:relative !important;
  z-index:1 !important;
  background:linear-gradient(180deg, rgba(8,27,52,.42), rgba(7,22,44,.18)) !important;
  border-radius:0 !important;
  padding:8px 10px 6px !important;
  gap:7px !important;
}

/* إزالة إطار لوغو الجهة اليسرى وإعطاؤه مساحة مناسبة */
.exa-hero-icon,
.exa-hero-logo{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  margin:0 auto 6px !important;
}

.exa-hero-logo img{
  display:block !important;
  width:62px !important;
  height:62px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22)) !important;
}

.exa-hero-logo i{display:none !important;}

.exa-visual-title{
  font-size:18px !important;
  line-height:1.22 !important;
}

.exa-visual-subtitle{
  font-size:10.6px !important;
  margin-top:2px !important;
}

.exa-system-map{
  max-width:285px !important;
  height:226px !important;
}

.exa-system-hub{
  width:110px !important;
  height:110px !important;
}

.exa-system-hub::before{ inset:18px !important; border-radius:24px !important; }
.exa-system-hub::after{ inset:37px !important; border-radius:18px !important; }

.exa-system-core{
  width:60px !important;
  height:60px !important;
  border-radius:18px !important;
  font-size:21px !important;
  box-shadow:0 0 0 7px rgba(214,169,53,.08), 0 10px 24px rgba(214,169,53,.17) !important;
}

.exa-node{
  width:70px !important;
  font-size:10.6px !important;
}

.exa-node-label{
  display:block !important;
  line-height:1.24 !important;
}

.exa-node-icon{
  width:42px !important;
  height:42px !important;
  border-radius:13px !important;
  font-size:17px !important;
  margin-bottom:5px !important;
}

/* توزيع أنظف للنودز */
.exa-node-users{top:0 !important; left:50% !important; transform:translateX(-50%) !important;}
.exa-node-routers{top:69px !important; right:4px !important;}
.exa-node-monitor{top:69px !important; left:4px !important;}
.exa-node-sectors{bottom:4px !important; left:10px !important;}
.exa-node-invoices{bottom:4px !important; right:10px !important;}
.exa-node-pppoe{bottom:0 !important; left:50% !important; transform:translateX(-50%) !important;}

/* تنظيم الخطوط حتى لا تدخل ببعضها أو فوق النص */
.exa-node::before{
  top:22px !important;
  height:54px !important;
  opacity:.82 !important;
  z-index:0 !important;
}
.exa-node-users::before{left:50% !important; transform:translateX(-50%) rotate(0deg) !important; height:50px !important;}
.exa-node-routers::before{left:4px !important; top:22px !important; height:56px !important; transform:translateX(-50%) rotate(48deg) !important;}
.exa-node-monitor::before{left:auto !important; right:4px !important; top:22px !important; height:56px !important; transform:translateX(50%) rotate(-48deg) !important;}
.exa-node-sectors::before{left:auto !important; right:11px !important; top:-18px !important; height:58px !important; transform:translateX(50%) rotate(-132deg) !important;}
.exa-node-invoices::before{left:11px !important; top:-18px !important; height:58px !important; transform:translateX(-50%) rotate(132deg) !important;}
.exa-node-pppoe::before{left:50% !important; top:-15px !important; height:54px !important; transform:translateX(-50%) rotate(180deg) !important;}

.exa-login-panel-inner{
  width:min(100%, 430px) !important;
}

.exa-login-title{
  font-size:28px !important;
}

.exa-login-footer{
  height:38px !important;
  min-height:38px !important;
  flex:0 0 38px !important;
  font-size:11.5px !important;
}

.exa-login-footer-brand{
  color:var(--exa-gold-2) !important;
  font-weight:900 !important;
}

.exa-login-footer-text{
  color:#d5dff0 !important;
}

/* لم يعد هناك حالة اتصال */
.exa-visual-status{ display:none !important; }

@media (min-width:781px){
  .exa-login-window{
    width:min(860px, calc(100vw - 90px)) !important;
    height:min(500px, calc(100vh - 90px)) !important;
  }
}

@media (max-width:780px){
  .exa-login-window{
    min-width:0 !important;
    width:calc(100vw - 18px) !important;
    height:calc(100vh - 18px) !important;
  }
  .exa-login-visual::before{
    inset:12px 8px !important;
    font-size:9px !important;
    line-height:1.55 !important;
  }
}


/* =========================================================
   EXANET Login v6 final cleanup
   - إلغاء خلفية 0/1
   - تحسين اللوغو بدون أي إطار
   - خريطة يسارية منظمة بخطوط SVG
   - زر إغلاق فقط بدون حواف
   - الشريط السفلي: اسم الشركة/البرنامج فقط
   ========================================================= */

.exa-titlebar-controls{ gap:0 !important; }
.exa-win-btn{
  width:30px !important;
  height:30px !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:8px !important;
  color:rgba(238,245,255,.82) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.exa-win-btn-close:hover{ background:rgba(232,17,35,.88) !important; color:#fff !important; }
.exa-win-btn i{ font-size:12px !important; }

.exa-app-mark,
.exa-app-logo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.exa-app-logo img{
  width:38px !important;
  height:38px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.34)) !important;
}
.exa-app-namebox{ gap:9px !important; }

.exa-login-visual{
  background:
    linear-gradient(135deg, rgba(8,28,55,.74), rgba(4,15,29,.35)),
    radial-gradient(circle at 32% 24%, rgba(33,92,158,.18), transparent 34%),
    radial-gradient(circle at 72% 72%, rgba(214,169,53,.06), transparent 30%) !important;
}
.exa-login-visual::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-image:
    linear-gradient(rgba(92,136,185,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,136,185,.045) 1px, transparent 1px);
  background-size:28px 28px !important;
  transform:none !important;
  opacity:.55 !important;
}
.exa-login-visual::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(18,66,126,.20), transparent 42%),
    linear-gradient(90deg, rgba(7,23,46,.42), rgba(5,16,31,.12)) !important;
}

.exa-hero-logo{ margin:0 auto 8px !important; }
.exa-hero-logo img{
  width:82px !important;
  height:82px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.32)) !important;
}
.exa-visual-title{ font-size:19px !important; }
.exa-visual-subtitle{ font-size:11px !important; }

.exa-system-map{
  width:300px !important;
  max-width:300px !important;
  height:220px !important;
  margin-top:2px !important;
  position:relative !important;
}
.exa-map-lines{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:0 !important;
  pointer-events:none !important;
}
.exa-map-lines line{
  stroke:rgba(214,169,53,.28) !important;
  stroke-width:1.1 !important;
  stroke-dasharray:4 6 !important;
  vector-effect:non-scaling-stroke !important;
}
.exa-node::before{ display:none !important; content:none !important; }
.exa-system-hub{
  left:150px !important;
  top:110px !important;
  width:100px !important;
  height:100px !important;
  transform:translate(-50%,-50%) !important;
  z-index:2 !important;
}
.exa-system-core{
  width:62px !important;
  height:62px !important;
  border-radius:18px !important;
  font-size:21px !important;
}
.exa-node{
  width:66px !important;
  font-size:10.5px !important;
  z-index:3 !important;
}
.exa-node-icon{
  width:42px !important;
  height:42px !important;
  border-radius:13px !important;
  margin-bottom:5px !important;
}
.exa-node-users{ left:150px !important; top:0 !important; transform:translateX(-50%) !important; }
.exa-node-monitor{ left:0 !important; top:66px !important; transform:none !important; }
.exa-node-routers{ right:0 !important; top:66px !important; transform:none !important; }
.exa-node-sectors{ left:8px !important; bottom:0 !important; transform:none !important; }
.exa-node-invoices{ right:8px !important; bottom:0 !important; transform:none !important; }
.exa-node-pppoe{ left:150px !important; bottom:0 !important; transform:translateX(-50%) !important; }

.exa-visual-inner{
  justify-content:center !important;
  gap:10px !important;
  padding:10px 8px 8px !important;
}

.exa-login-footer{
  justify-content:center !important;
  direction:rtl !important;
  gap:0 !important;
  font-size:12px !important;
}
.exa-login-footer-brand{
  color:#f3c95a !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
}
.exa-login-footer-sep,
.exa-login-footer-text{ display:none !important; }
.exa-visual-status{ display:none !important; }

.exa-login-window{
  width:min(880px, calc(100vw - 90px)) !important;
  height:min(510px, calc(100vh - 90px)) !important;
  min-width:820px !important;
  min-height:485px !important;
}
.exa-login-shell{ grid-template-columns:43% 57% !important; }
.exa-login-visual,
.exa-login-panel{ padding-block:10px !important; }

@media (min-width:781px){
  .exa-login-window{
    width:min(880px, calc(100vw - 90px)) !important;
    height:min(510px, calc(100vh - 90px)) !important;
  }
}

/* =========================================================
   EXANET Login v7 cybersecurity visual background
   اتجاه بصري مستوحى من:
   Digital Data Protection / Virtual Firewall / Anti-Hacking Security
   لا يظهر كنص داخل الواجهة، بل كخلفية تقنية هادئة.
   ========================================================= */

.exa-login-visual{
  isolation:isolate !important;
  background:
    linear-gradient(135deg, rgba(5,18,35,.96), rgba(4,14,27,.72)),
    radial-gradient(circle at 28% 22%, rgba(28,112,190,.20), transparent 35%),
    radial-gradient(circle at 72% 78%, rgba(214,169,53,.08), transparent 34%) !important;
}

/* شبكة حماية رقمية / Firewall هادئة بدل خلفية 0 و 1 */
.exa-login-visual::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  opacity:.78 !important;
  pointer-events:none !important;
  transform:none !important;
  background:
    linear-gradient(90deg, rgba(85,153,214,.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(85,153,214,.04) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 42%, rgba(214,169,53,.06) 42% 43%, transparent 43% 100%),
    radial-gradient(circle at 20% 28%, rgba(40,138,224,.16), transparent 24%),
    radial-gradient(circle at 84% 70%, rgba(214,169,53,.08), transparent 30%) !important;
  background-size:
    30px 30px,
    30px 30px,
    120px 120px,
    auto,
    auto !important;
}

/* طبقة مسارات إلكترونية خفيفة */
.exa-login-visual::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(243,201,90,.12) 12% 12.4%, transparent 12.4% 100%),
    linear-gradient(0deg, transparent 0 28%, rgba(89,151,218,.10) 28% 28.4%, transparent 28.4% 100%),
    linear-gradient(90deg, transparent 0 66%, rgba(89,151,218,.08) 66% 66.35%, transparent 66.35% 100%),
    radial-gradient(circle at 12% 28%, rgba(243,201,90,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 28%, rgba(89,151,218,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 72%, rgba(243,201,90,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 72%, rgba(89,151,218,.20) 0 2px, transparent 3px) !important;
  opacity:.55 !important;
}

.exa-visual-inner{
  position:relative !important;
  z-index:1 !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg, rgba(7,25,50,.34), rgba(5,16,31,.18)) !important;
}

/* شعار حماية/درع خفيف خلف الرسم، بدون إزعاج اللوغو */
.exa-visual-inner::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:52% !important;
  width:210px !important;
  height:240px !important;
  transform:translate(-50%,-50%) !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.16 !important;
  background:
    linear-gradient(180deg, rgba(243,201,90,.18), rgba(67,142,220,.08)) !important;
  clip-path:polygon(50% 0%, 87% 14%, 82% 62%, 50% 100%, 18% 62%, 13% 14%) !important;
  border:1px solid rgba(243,201,90,.16) !important;
}

/* جدار حماية على شكل كتل بسيطة في الخلفية */
.exa-visual-inner::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:54% !important;
  width:260px !important;
  height:170px !important;
  transform:translate(-50%,-50%) !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.12 !important;
  background:
    linear-gradient(90deg, rgba(243,201,90,.55) 0 20px, transparent 20px 32px, rgba(243,201,90,.55) 32px 52px, transparent 52px 64px, rgba(243,201,90,.55) 64px 84px, transparent 84px 96px, rgba(243,201,90,.55) 96px 116px, transparent 116px 128px, rgba(243,201,90,.55) 128px 148px, transparent 148px 160px, rgba(243,201,90,.55) 160px 180px, transparent 180px 192px, rgba(243,201,90,.55) 192px 212px, transparent 212px 224px, rgba(243,201,90,.55) 224px 244px, transparent 244px 260px),
    linear-gradient(0deg, transparent 0 28px, rgba(243,201,90,.35) 28px 29px, transparent 29px 56px, rgba(243,201,90,.35) 56px 57px, transparent 57px 84px, rgba(243,201,90,.35) 84px 85px, transparent 85px 112px, rgba(243,201,90,.35) 112px 113px, transparent 113px 140px, rgba(243,201,90,.35) 140px 141px, transparent 141px) !important;
}

.exa-visual-head,
.exa-system-map{
  position:relative !important;
  z-index:2 !important;
}

/* اللوغو أكبر وواضح بدون صندوق */
.exa-hero-logo img{
  width:90px !important;
  height:90px !important;
}

.exa-system-map{
  margin-top:0 !important;
}

/* خطوط الخريطة تظهر كممرات بيانات لا كخطوط متداخلة */
.exa-map-lines line{
  stroke:rgba(243,201,90,.34) !important;
  stroke-width:1 !important;
  stroke-dasharray:5 7 !important;
  opacity:.9 !important;
}

.exa-system-core,
.exa-node-icon{
  box-shadow:0 10px 24px rgba(0,0,0,.20), 0 0 18px rgba(214,169,53,.08) !important;
}


/* =========================================================
   EXANET Login v8
   - الجهة اليسرى فيديو Cyber Security فقط
   - حذف كل محتوى الجهة اليسرى
   - نقل اللوغو إلى الجهة اليمنى فوق نموذج الدخول
   - استخدام نسخة HD من الفيديو كخلفية
   ========================================================= */

.exa-login-window{
  width:min(900px, calc(100vw - 88px)) !important;
  height:min(520px, calc(100vh - 84px)) !important;
  min-width:840px !important;
  min-height:500px !important;
}

.exa-login-shell{
  grid-template-columns:44% 56% !important;
}

.exa-login-visual{
  padding:0 !important;
  position:relative !important;
  overflow:hidden !important;
  background:#061120 !important;
  isolation:isolate !important;
}
.exa-login-visual::before,
.exa-login-visual::after{
  display:none !important;
  content:none !important;
}

.exa-visual-video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:scale(1.035) !important;
  filter:saturate(1.08) contrast(1.04) brightness(.96) !important;
  z-index:0 !important;
  background:#061120 !important;
}

.exa-visual-video-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg, rgba(4,12,24,.10) 0%, rgba(4,12,24,.18) 38%, rgba(4,12,24,.38) 72%, rgba(4,12,24,.54) 100%),
    radial-gradient(circle at 18% 22%, rgba(31,125,214,.10), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(243,201,90,.08), transparent 24%) !important;
}

.exa-visual-inner,
.exa-visual-head,
.exa-system-map,
.exa-map-lines,
.exa-visual-status{
  display:none !important;
}

.exa-login-panel{
  padding:14px 28px 12px !important;
}

.exa-login-panel-inner{
  width:min(100%, 430px) !important;
  gap:14px !important;
}

.exa-login-copy{
  text-align:right !important;
  margin-bottom:6px !important;
}

.exa-login-brand{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  margin-bottom:12px !important;
}

.exa-login-brand-logo{
  width:84px !important;
  height:84px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.24)) !important;
  flex:0 0 auto !important;
}

.exa-login-brand-meta{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}

.exa-login-brand-name{
  display:block !important;
  color:#fff6da !important;
  font-size:18px !important;
  font-weight:950 !important;
  line-height:1.25 !important;
}

.exa-login-brand-version{
  display:block !important;
  color:#d6a935 !important;
  font-size:12px !important;
  font-weight:800 !important;
}

.exa-login-title{
  font-size:29px !important;
  margin-top:0 !important;
}

.exa-login-subtitle{
  font-size:12.5px !important;
}

@media (max-width: 860px){
  .exa-login-window{
    min-width:0 !important;
    width:calc(100vw - 18px) !important;
    height:calc(100vh - 18px) !important;
  }
  .exa-login-shell{
    grid-template-columns:1fr !important;
  }
  .exa-login-visual{
    min-height:180px !important;
  }
  .exa-login-brand-logo{
    width:72px !important;
    height:72px !important;
  }
}


/* =========================================================
   EXANET Login v9 - Original procedural cyber animation
   لا فيديو، لا علامة مائية، لا ملفات خارجية.
   خلفية متحركة برمجية: قفل/درع + firewall + data streams.
   ========================================================= */

.exa-login-window{
  width:min(900px, calc(100vw - 88px)) !important;
  height:min(520px, calc(100vh - 84px)) !important;
  min-width:840px !important;
  min-height:500px !important;
}

.exa-login-shell{
  grid-template-columns:44% 56% !important;
}

/* تنظيف الجهة اليسرى بالكامل */
.exa-login-visual{
  padding:0 !important;
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 34% 38%, rgba(0,160,255,.22), transparent 30%),
    radial-gradient(circle at 68% 68%, rgba(243,201,90,.08), transparent 28%),
    linear-gradient(135deg, #061426 0%, #020916 100%) !important;
  border-inline-end:1px solid rgba(214,169,53,.13) !important;
  isolation:isolate !important;
}

.exa-login-visual::before,
.exa-login-visual::after,
.exa-visual-inner,
.exa-visual-head,
.exa-system-map,
.exa-map-lines,
.exa-visual-status,
.exa-visual-video,
.exa-visual-video-overlay{
  display:none !important;
  content:none !important;
}

.exa-cyber-scene{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(1,8,19,.05), rgba(1,8,19,.28)),
    radial-gradient(circle at 50% 48%, rgba(0,170,255,.16), transparent 44%);
}

.exa-cyber-grid{
  position:absolute;
  inset:-8%;
  background-image:
    linear-gradient(rgba(80,160,240,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,160,240,.10) 1px, transparent 1px);
  background-size:32px 32px;
  transform:perspective(520px) rotateX(58deg) translateY(54px) scale(1.35);
  transform-origin:center bottom;
  animation:exaGridMove 6.5s linear infinite;
  opacity:.58;
}

.exa-cyber-firewall{
  position:absolute;
  left:7%;
  right:7%;
  bottom:28%;
  height:78px;
  opacity:.28;
  transform:perspective(500px) rotateX(54deg);
}

.exa-cyber-firewall span{
  display:block;
  position:absolute;
  width:18%;
  height:22px;
  border:1px solid rgba(243,201,90,.26);
  background:rgba(3,20,38,.50);
  box-shadow:0 0 16px rgba(0,170,255,.08);
}
.exa-cyber-firewall span:nth-child(1){left:2%;top:0}
.exa-cyber-firewall span:nth-child(2){left:22%;top:0}
.exa-cyber-firewall span:nth-child(3){left:42%;top:0}
.exa-cyber-firewall span:nth-child(4){left:62%;top:0}
.exa-cyber-firewall span:nth-child(5){left:82%;top:0;width:15%}
.exa-cyber-firewall span:nth-child(6){left:11%;top:28px}
.exa-cyber-firewall span:nth-child(7){left:31%;top:28px}
.exa-cyber-firewall span:nth-child(8){left:51%;top:28px}
.exa-cyber-firewall span:nth-child(9){left:71%;top:28px}
.exa-cyber-firewall span:nth-child(10){left:2%;top:56px;width:96%}

.exa-cyber-stream{
  position:absolute;
  height:2px;
  left:-40%;
  right:auto;
  background:linear-gradient(90deg, transparent, rgba(55,217,255,.0), rgba(55,217,255,.75), rgba(243,201,90,.55), transparent);
  filter:drop-shadow(0 0 8px rgba(55,217,255,.6));
  border-radius:20px;
}
.exa-stream-a{top:30%; width:72%; animation:exaStream 3.2s linear infinite;}
.exa-stream-b{top:47%; width:86%; animation:exaStream 4.1s linear infinite .7s; opacity:.72;}
.exa-stream-c{top:66%; width:64%; animation:exaStream 3.7s linear infinite 1.5s; opacity:.62;}

.exa-cyber-shield{
  position:absolute;
  left:50%;
  top:45%;
  width:168px;
  height:196px;
  transform:translate(-50%,-50%);
  z-index:4;
  filter:drop-shadow(0 0 18px rgba(0,179,255,.45)) drop-shadow(0 14px 36px rgba(0,0,0,.34));
  animation:exaShieldFloat 4.8s ease-in-out infinite;
}

.exa-cyber-shield svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.exa-shield-fill{
  fill:rgba(0,150,255,.10);
  stroke:none;
}

.exa-shield-line{
  fill:none;
  stroke:url(#exaShieldG);
  stroke-width:5;
  filter:url(#exaGlow);
  stroke-linejoin:round;
  animation:exaShieldPulse 2.8s ease-in-out infinite;
}

.exa-lock-shackle,
.exa-lock-body,
.exa-lock-key{
  fill:none;
  stroke:#b9efff;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#exaGlow);
}

.exa-lock-body{
  fill:rgba(0,120,210,.20);
}

.exa-lock-dot{
  fill:#f3c95a;
  filter:url(#exaGlow);
}

.exa-cyber-rings{
  position:absolute;
  left:50%;
  top:70%;
  width:240px;
  height:72px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(48,200,255,.38);
  box-shadow:
    0 0 0 12px rgba(0,150,255,.035),
    0 0 0 28px rgba(0,150,255,.028),
    0 0 42px rgba(0,170,255,.25);
  z-index:3;
  animation:exaRings 3.8s ease-in-out infinite;
}

.exa-cyber-orbit{
  position:absolute;
  left:50%;
  top:48%;
  border:1px solid rgba(80,210,255,.22);
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}
.exa-orbit-a{width:270px;height:270px;animation:exaSpin 14s linear infinite;}
.exa-orbit-b{width:350px;height:350px;animation:exaSpin 18s linear infinite reverse;opacity:.42;}

.exa-particle{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#48d8ff;
  box-shadow:0 0 10px #48d8ff, 0 0 20px rgba(72,216,255,.45);
  z-index:5;
}
.p1{left:18%;top:24%;animation:exaParticle 5.4s ease-in-out infinite;}
.p2{left:78%;top:34%;animation:exaParticle 6.1s ease-in-out infinite .4s;}
.p3{left:26%;top:72%;animation:exaParticle 4.7s ease-in-out infinite .8s;}
.p4{left:66%;top:78%;animation:exaParticle 5.8s ease-in-out infinite 1.2s;}
.p5{left:51%;top:18%;animation:exaParticle 6.4s ease-in-out infinite .2s;}
.p6{left:86%;top:58%;animation:exaParticle 4.9s ease-in-out infinite 1.1s;}

/* اللوغو في الجزء اليميني */
.exa-login-panel{
  padding:14px 28px 12px !important;
}

.exa-login-panel-inner{
  width:min(100%, 430px) !important;
  gap:14px !important;
}

.exa-login-brand{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  margin-bottom:10px !important;
}

.exa-login-brand-logo{
  width:84px !important;
  height:84px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.24)) !important;
  flex:0 0 auto !important;
}

.exa-login-brand-meta{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}

.exa-login-brand-name{
  display:block !important;
  color:#fff6da !important;
  font-size:18px !important;
  font-weight:950 !important;
  line-height:1.25 !important;
}

.exa-login-brand-version{
  display:block !important;
  color:#d6a935 !important;
  font-size:12px !important;
  font-weight:800 !important;
}

/* الإغلاق فقط بدون حواف */
.exa-titlebar-controls{gap:0 !important;}
.exa-win-btn{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
}
.exa-win-btn:not(.exa-win-btn-close){display:none !important;}
.exa-win-btn-close:hover{
  background:rgba(232,17,35,.88) !important;
  color:#fff !important;
}

/* حركات */
@keyframes exaGridMove{
  from{background-position:0 0, 0 0;}
  to{background-position:0 32px, 32px 0;}
}
@keyframes exaStream{
  0%{transform:translateX(0);opacity:0;}
  15%{opacity:.8;}
  70%{opacity:.7;}
  100%{transform:translateX(190%);opacity:0;}
}
@keyframes exaShieldFloat{
  0%,100%{transform:translate(-50%,-50%) translateY(0) scale(1);}
  50%{transform:translate(-50%,-50%) translateY(-8px) scale(1.015);}
}
@keyframes exaShieldPulse{
  0%,100%{opacity:.86;}
  50%{opacity:1;}
}
@keyframes exaRings{
  0%,100%{opacity:.45; transform:translate(-50%,-50%) scale(.96);}
  50%{opacity:.85; transform:translate(-50%,-50%) scale(1.05);}
}
@keyframes exaSpin{
  to{transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes exaParticle{
  0%,100%{transform:translate(0,0) scale(.8);opacity:.35;}
  50%{transform:translate(16px,-18px) scale(1.25);opacity:1;}
}

@media (max-width:860px){
  .exa-login-window{
    min-width:0 !important;
    width:calc(100vw - 18px) !important;
    height:calc(100vh - 18px) !important;
  }
  .exa-login-shell{grid-template-columns:1fr !important;}
  .exa-login-visual{min-height:210px !important;}
  .exa-cyber-shield{width:128px;height:150px;}
  .exa-cyber-rings{width:190px;}
}

/* =========================================================
   EXANET Login v10
   - الفيديو يحتل كامل القسم الأيسر بدون نافذة داخلية
   - يبدأ المحتوى/الأشرطة بعد مساحة الفيديو مباشرة
   - تنظيف الحواف والهوامش داخل العمود الأيسر
   ========================================================= */

.exa-login-window{
  width:min(920px, calc(100vw - 88px)) !important;
  height:min(540px, calc(100vh - 84px)) !important;
  min-width:860px !important;
  min-height:510px !important;
}

.exa-login-window::before{
  display:none !important;
}

.exa-login-shell{
  display:grid !important;
  grid-template-columns:44% 56% !important;
  align-items:stretch !important;
  min-height:0 !important;
}

.exa-login-visual,
.exa-login-visual.exa-login-visual-full{
  position:relative !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:#071221 !important;
  border-inline-end:1px solid rgba(214,169,53,.13) !important;
  border-radius:0 !important;
  isolation:isolate !important;
}

.exa-login-visual > *:not(.exa-visual-video):not(.exa-visual-video-overlay){
  display:none !important;
}

.exa-visual-video{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:saturate(1.04) contrast(1.02) brightness(.97) !important;
  background:#071221 !important;
  z-index:0 !important;
}

.exa-visual-video-overlay{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:1 !important;
  background:
    linear-gradient(90deg, rgba(4,12,24,.04) 0%, rgba(4,12,24,.12) 56%, rgba(4,12,24,.34) 84%, rgba(4,12,24,.48) 100%),
    linear-gradient(180deg, rgba(8,18,32,.05) 0%, rgba(8,18,32,.12) 100%) !important;
}

.exa-login-panel{
  position:relative !important;
  padding:18px 30px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:0 !important;
}

.exa-login-panel-inner{
  width:min(100%, 430px) !important;
  margin:0 !important;
  padding:0 !important;
  gap:14px !important;
}

.exa-login-copy{
  margin-bottom:8px !important;
}

.exa-login-brand{
  margin-bottom:12px !important;
}

.exa-login-title{
  font-size:31px !important;
}

.exa-login-subtitle{
  font-size:13px !important;
}

.exa-field-input,
.exa-btn{
  height:50px !important;
}

.exa-login-footer{
  min-height:42px !important;
  height:42px !important;
}

@media (max-width: 980px){
  .exa-login-window{
    min-width:0 !important;
    width:calc(100vw - 18px) !important;
    height:calc(100vh - 18px) !important;
    max-width:none !important;
    max-height:none !important;
  }
  .exa-login-shell{
    grid-template-columns:1fr !important;
  }
  .exa-login-visual,
  .exa-login-visual.exa-login-visual-full{
    min-height:240px !important;
    border-inline-end:0 !important;
    border-bottom:1px solid rgba(214,169,53,.13) !important;
  }
  .exa-login-panel{
    padding:18px 22px 14px !important;
  }
}


/* =========================================================
   EXANET Login v11 - True left video block
   الفيديو يأخذ كامل القسم اليساري من أعلى النافذة إلى أسفلها.
   الشريط العلوي، شريط الأسفل، ونموذج الدخول تبدأ بعد مساحة الفيديو.
   ========================================================= */

.exa-login-window{
  --exa-left-video-w: 44%;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

/* الفيديو ليس داخل جسم الصفحة، بل كتلة يسارية كاملة */
.exa-login-visual.exa-login-visual-full{
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:var(--exa-left-video-w) !important;
  height:100% !important;
  min-height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-inline-end:1px solid rgba(214,169,53,.16) !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:#061120 !important;
  z-index:1 !important;
  display:block !important;
}

/* منع أي محتوى قديم من الظهور فوق الفيديو */
.exa-login-visual.exa-login-visual-full > *:not(.exa-visual-video):not(.exa-visual-video-overlay){
  display:none !important;
}

/* الفيديو يملأ يسار النافذة بالكامل */
.exa-visual-video{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:#061120 !important;
  z-index:1 !important;
}

.exa-visual-video-overlay{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg, rgba(2,8,18,.02) 0%, rgba(2,8,18,.10) 52%, rgba(2,8,18,.32) 82%, rgba(2,8,18,.52) 100%),
    linear-gradient(180deg, rgba(2,8,18,.08), rgba(2,8,18,.16)) !important;
}

/* الشريط العلوي يبدأ بعد مساحة الفيديو */
.exa-login-titlebar{
  width:calc(100% - var(--exa-left-video-w)) !important;
  margin-left:var(--exa-left-video-w) !important;
  margin-right:0 !important;
  flex:0 0 48px !important;
  height:48px !important;
  z-index:3 !important;
  border-inline-start:0 !important;
  border-bottom:1px solid rgba(214,169,53,.14) !important;
  background:linear-gradient(180deg, rgba(8,18,32,.94), rgba(5,15,28,.88)) !important;
}

/* جسم الصفحة يمين الفيديو فقط */
.exa-login-shell{
  display:block !important;
  position:static !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  z-index:2 !important;
}

.exa-login-panel{
  width:calc(100% - var(--exa-left-video-w)) !important;
  height:100% !important;
  margin-left:var(--exa-left-video-w) !important;
  margin-right:0 !important;
  padding:18px 30px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:3 !important;
  background:linear-gradient(180deg, rgba(5,15,29,.10), rgba(5,15,29,.03)) !important;
}

/* الشريط السفلي يبدأ بعد الفيديو أيضاً */
.exa-login-footer{
  width:calc(100% - var(--exa-left-video-w)) !important;
  margin-left:var(--exa-left-video-w) !important;
  margin-right:0 !important;
  flex:0 0 42px !important;
  height:42px !important;
  min-height:42px !important;
  z-index:3 !important;
  border-top:1px solid rgba(214,169,53,.10) !important;
  background:rgba(5,15,28,.45) !important;
}

/* إلغاء أي أثر شبكات CSS أو رسومات قديمة */
.exa-cyber-scene,
.exa-cyber-grid,
.exa-cyber-firewall,
.exa-cyber-stream,
.exa-cyber-orbit,
.exa-cyber-shield,
.exa-cyber-rings,
.exa-particle,
.exa-visual-inner,
.exa-visual-head,
.exa-system-map,
.exa-map-lines,
.exa-visual-status{
  display:none !important;
}

/* المقاسات الداخلية للنموذج */
.exa-login-panel-inner{
  width:min(100%, 430px) !important;
  padding:0 !important;
  margin:0 !important;
}

.exa-field-input,
.exa-btn{
  height:50px !important;
}

@media (max-width:980px){
  .exa-login-window{
    --exa-left-video-w:100%;
    min-width:0 !important;
    width:calc(100vw - 18px) !important;
    height:calc(100vh - 18px) !important;
  }

  .exa-login-visual.exa-login-visual-full{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:230px !important;
    min-height:230px !important;
    flex:0 0 230px !important;
    border-inline-end:0 !important;
    border-bottom:1px solid rgba(214,169,53,.16) !important;
  }

  .exa-login-titlebar,
  .exa-login-panel,
  .exa-login-footer{
    width:100% !important;
    margin-left:0 !important;
  }

  .exa-login-shell{
    flex:1 1 auto !important;
  }

  .exa-login-panel{
    height:auto !important;
    min-height:0 !important;
  }
}

/* =========================================================
   EXANET Login v12 - Right side cyber background + remove inner logo/version
   ========================================================= */

/* خلفية سيبرانية مدمجة داخل الجزء اليميني فقط */
.exa-login-panel{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:transparent !important;
}

.exa-login-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(180deg, rgba(3,10,20,.58), rgba(3,10,20,.68)),
    radial-gradient(circle at 72% 50%, rgba(39,110,255,.12), transparent 34%),
    url('../img/login_right_cyber_bg.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:.96;
  z-index:0;
}

.exa-login-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(5,14,27,.10) 0%, rgba(5,14,27,.36) 42%, rgba(5,14,27,.78) 100%),
    linear-gradient(90deg, rgba(7,17,31,.10) 0%, rgba(7,17,31,.18) 38%, rgba(7,17,31,.62) 100%);
  z-index:1;
  pointer-events:none;
}

.exa-login-panel-inner{
  position:relative !important;
  z-index:2 !important;
}

/* إلغاء اللوغو والإصدار داخل الجزء اليميني فقط */
.exa-login-brand-logo,
.exa-login-brand-version{
  display:none !important;
}

.exa-login-brand{
  display:block !important;
  margin-bottom:12px !important;
}

.exa-login-brand-meta{
  display:block !important;
}

/* إبقاء اسم البرنامج فقط بلون ذهبي ناري متحرك */
.exa-login-brand-name{
  display:inline-block !important;
  font-size:34px !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
  line-height:1.15 !important;
  background:linear-gradient(90deg,
    #fff2b3 0%,
    #ffd768 12%,
    #ffb21f 28%,
    #fff0a0 42%,
    #ffcb45 58%,
    #ff9612 74%,
    #ffe27b 88%,
    #fff2b3 100%) !important;
  background-size:240% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  text-shadow:
    0 0 8px rgba(255,191,0,.18),
    0 0 18px rgba(255,154,0,.12),
    0 1px 0 rgba(255,245,210,.15) !important;
  animation:exaFireGoldName 4s linear infinite !important;
}

@keyframes exaFireGoldName{
  0%{ background-position:0% 50%; filter:drop-shadow(0 0 0 rgba(255,170,0,.05)); }
  50%{ background-position:100% 50%; filter:drop-shadow(0 0 8px rgba(255,170,0,.18)); }
  100%{ background-position:0% 50%; filter:drop-shadow(0 0 0 rgba(255,170,0,.05)); }
}

/* تخفيف باقي النصوص فوق الخلفية */
.exa-login-copy,
.exa-login-title,
.exa-login-subtitle,
.exa-field-label,
.exa-login-alert,
.exa-login-form{
  position:relative;
  z-index:2;
}

/* لو أردت عنوان الدخول أوضح */
.exa-login-title{
  text-shadow:0 2px 18px rgba(0,0,0,.28) !important;
}

.exa-login-subtitle{
  text-shadow:0 1px 12px rgba(0,0,0,.22) !important;
}

@media (max-width:980px){
  .exa-login-brand-name{
    font-size:28px !important;
  }
}

/* =========================================================
   EXANET Login v13 - extend right background to top/bottom bars
   and force program name
   ========================================================= */

/* تغطية الخلفية للجزء اليميني بالكامل بما فيه الشريطان العلوي والسفلي */
.exa-login-window{
  position:relative !important;
  overflow:hidden !important;
}

.exa-login-window::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:58%;
  background-image:
    linear-gradient(180deg, rgba(3,10,20,.42), rgba(3,10,20,.58)),
    radial-gradient(circle at 72% 50%, rgba(39,110,255,.14), transparent 34%),
    url('../img/login_right_cyber_bg.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  z-index:0;
  pointer-events:none;
}

/* اجعل شريطي الأعلى والأسفل شفافين في الجهة اليمنى لتظهر الخلفية */
.exa-login-titlebar{
  background:linear-gradient(90deg,
    rgba(8,18,32,.94) 0%,
    rgba(8,18,32,.94) 42%,
    rgba(8,18,32,.08) 42%,
    rgba(8,18,32,.04) 100%) !important;
}

.exa-login-footer{
  background:linear-gradient(90deg,
    rgba(6,16,29,.96) 0%,
    rgba(6,16,29,.96) 42%,
    rgba(6,16,29,.08) 42%,
    rgba(6,16,29,.04) 100%) !important;
}

/* أوقف الخلفية المنفصلة داخل اللوحة اليمنى واعتمد الخلفية الموحدة */
.exa-login-panel{
  background:transparent !important;
}

.exa-login-panel::before,
.exa-login-panel::after{
  display:none !important;
}

.exa-login-shell,
.exa-login-visual,
.exa-login-panel,
.exa-login-titlebar,
.exa-login-footer{
  position:relative;
  z-index:1;
}

/* اسم البرنامج المطلوب */
.exa-login-brand-name{
  font-size:35px !important;
}

@media (max-width:1100px){
  .exa-login-window::after{
    width:100%;
  }

  .exa-login-titlebar,
  .exa-login-footer{
    background:rgba(6,16,29,.35) !important;
  }
}

/* =========================================================
   EXANET Login v14 - fix uncovered parts of top/bottom bars
   ========================================================= */

/* اجعل خلفية اليمين تبدأ تماماً بعد عرض الفيديو اليساري */
.exa-login-window::after{
  left:var(--exa-left-video-w) !important;
  right:0 !important;
  width:auto !important;
}

/* الشريطان موجودان أصلاً داخل الجزء اليميني، لذا خليهما شفافين بالكامل
   مع تدرج خفيف فقط حتى تظهر الخلفية السيبرانية تحتهما بالكامل */
.exa-login-titlebar{
  background:linear-gradient(180deg,
    rgba(6,16,29,.22) 0%,
    rgba(6,16,29,.12) 100%) !important;
}

.exa-login-footer{
  background:linear-gradient(180deg,
    rgba(6,16,29,.18) 0%,
    rgba(6,16,29,.10) 100%) !important;
}

/* ضمان بقاء الخلفية ظاهرة تحت العناصر بدون أي كتل معتمة */
.exa-login-titlebar::before,
.exa-login-titlebar::after,
.exa-login-footer::before,
.exa-login-footer::after{
  display:none !important;
}

@media (max-width:1100px){
  .exa-login-window::after{
    left:0 !important;
    width:100% !important;
  }

  .exa-login-titlebar,
  .exa-login-footer{
    background:rgba(6,16,29,.28) !important;
  }
}

/* =========================================================
   EXANET Login v15 - desktop app framing and 25% smaller login
   ========================================================= */
.ua-p-index .exa-login-page{
  min-height:100vh !important;
  height:100vh !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

.ua-p-index .exa-login-window{
  width:min(75vw, 1080px) !important;
  height:min(75vh, 675px) !important;
  min-height:0 !important;
  max-height:calc(100vh - 24px) !important;
  border-radius:18px !important;
}

.ua-p-index .exa-login-titlebar{
  height:42px !important;
  min-height:42px !important;
  padding-block:0 !important;
}

.ua-p-index .exa-login-shell{
  min-height:0 !important;
  height:calc(100% - 74px) !important;
}

.ua-p-index .exa-login-panel{
  padding:18px 24px !important;
}

.ua-p-index .exa-login-panel-inner{
  width:min(100%, 430px) !important;
  gap:12px !important;
}

.ua-p-index .exa-login-brand-logo{
  width:46px !important;
  height:46px !important;
}

.ua-p-index .exa-login-brand-name{
  font-size:26px !important;
}

.ua-p-index .exa-login-title{
  font-size:32px !important;
  margin-bottom:4px !important;
}

.ua-p-index .exa-login-subtitle{
  font-size:14px !important;
}

.ua-p-index .exa-field-group{
  margin-bottom:12px !important;
}

.ua-p-index .exa-field-input{
  min-height:42px !important;
  height:42px !important;
}

.ua-p-index .exa-login-footer{
  height:32px !important;
  min-height:32px !important;
}

@media (max-width:900px){
  .ua-p-index .exa-login-window{
    width:calc(100vw - 16px) !important;
    height:calc(100vh - 16px) !important;
  }
}

/* =========================================================
   EXANET Login v16 - compact desktop popup, no outer navy mat
   ========================================================= */
body.ua-p-index{
  overflow:hidden !important;
  background:#f4f7fb !important;
}

.ua-p-index .exa-login-page{
  width:100vw !important;
  min-height:100vh !important;
  height:100vh !important;
  padding:0 !important;
  background:#f4f7fb !important;
}

.ua-p-index .exa-login-window{
  width:100vw !important;
  height:100vh !important;
  max-width:100vw !important;
  max-height:100vh !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.ua-p-index .exa-login-titlebar{
  border-radius:0 !important;
}

.ua-p-index .exa-login-footer{
  border-radius:0 !important;
}

/* =========================================================
   EXANET Login v17 - keep old side-by-side direction
   Video stays on the left, inputs stay on the right.
   ========================================================= */
.ua-p-index .exa-login-shell{
  display:grid !important;
  grid-template-columns:43% 57% !important;
  grid-auto-flow:column !important;
  direction:ltr !important;
}

.ua-p-index .exa-login-visual,
.ua-p-index .exa-login-visual.exa-login-visual-full{
  display:block !important;
  grid-column:1 !important;
  min-height:0 !important;
}

.ua-p-index .exa-login-panel{
  display:flex !important;
  grid-column:2 !important;
  direction:rtl !important;
}

.ua-p-index .exa-login-titlebar,
.ua-p-index .exa-login-footer{
  direction:rtl !important;
}

@media (max-width:900px){
  .ua-p-index .exa-login-shell{
    grid-template-columns:43% 57% !important;
  }

  .ua-p-index .exa-login-visual,
  .ua-p-index .exa-login-visual.exa-login-visual-full,
  .ua-p-index .exa-login-panel{
    grid-column:auto !important;
  }
}

@media (max-width:640px){
  .ua-p-index .exa-login-shell{
    grid-template-columns:1fr !important;
  }

  .ua-p-index .exa-login-visual,
  .ua-p-index .exa-login-visual.exa-login-visual-full{
    display:none !important;
  }
}

/* Compact popup fit polish: keep the same direction, give the form more room. */
.ua-p-index .exa-login-shell{
  grid-template-columns:40% 60% !important;
}

.ua-p-index .exa-login-panel{
  padding:16px 24px 16px 18px !important;
  overflow:visible !important;
  align-items:center !important;
  justify-content:center !important;
}

.ua-p-index .exa-login-panel-inner{
  width:min(100%, 340px) !important;
  margin:0 auto !important;
}

.ua-p-index .exa-login-brand{
  gap:8px !important;
  margin-bottom:4px !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  text-align:center !important;
}

.ua-p-index .exa-login-brand-name{
  max-width:100% !important;
  font-size:18px !important;
  line-height:1.25 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.ua-p-index .exa-login-title{
  max-width:100% !important;
  font-size:24px !important;
  line-height:1.15 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.ua-p-index .exa-login-subtitle{
  max-width:100% !important;
  font-size:13px !important;
  line-height:1.35 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.ua-p-index .exa-login-form{
  gap:10px !important;
  width:100% !important;
}

.ua-p-index .exa-field-group,
.ua-p-index .exa-field-shell,
.ua-p-index .exa-login-actions{
  width:100% !important;
  max-width:100% !important;
}

.ua-p-index .exa-field-input{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

@media (max-width:900px){
  .ua-p-index .exa-login-shell{
    grid-template-columns:40% 60% !important;
  }
}

@media (max-width:1100px){
  .ua-p-index .exa-login-panel-inner{
    transform:translateX(-150px) !important;
  }
}

/* =========================================================
   EXANET Login v18 - use WebView zoom for the 25% reduction.
   Keep the old 1280x800 composition intact to avoid overlap.
   ========================================================= */
html:has(body.ua-p-index),
body.ua-p-index{
  width:1280px !important;
  min-width:1280px !important;
  height:800px !important;
  min-height:800px !important;
  overflow:hidden !important;
  background:#f4f7fb !important;
}

.ua-p-index .exa-login-page{
  width:1280px !important;
  min-width:1280px !important;
  max-width:1280px !important;
  height:800px !important;
  min-height:800px !important;
  max-height:800px !important;
  padding:0 !important;
  display:grid !important;
  place-items:stretch !important;
  overflow:hidden !important;
}

.ua-p-index .exa-login-window{
  width:1280px !important;
  min-width:1280px !important;
  max-width:1280px !important;
  height:800px !important;
  min-height:800px !important;
  max-height:800px !important;
  border-radius:18px !important;
  border:1px solid rgba(214,169,53,.42) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.42) !important;
  overflow:hidden !important;
}

.ua-p-index .exa-login-shell{
  display:grid !important;
  grid-template-columns:43% 57% !important;
  direction:ltr !important;
  height:calc(100% - 96px) !important;
  min-height:0 !important;
}

.ua-p-index .exa-login-visual,
.ua-p-index .exa-login-visual.exa-login-visual-full{
  display:block !important;
  grid-column:1 !important;
  min-height:0 !important;
}

.ua-p-index .exa-login-panel{
  grid-column:2 !important;
  direction:rtl !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:34px 52px !important;
  overflow:visible !important;
}

.ua-p-index .exa-login-panel-inner{
  width:min(100%, 560px) !important;
  margin:0 auto !important;
  transform:none !important;
  gap:18px !important;
}

.ua-p-index .exa-login-brand{
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  text-align:inherit !important;
  gap:12px !important;
}

.ua-p-index .exa-login-brand-logo{
  width:64px !important;
  height:64px !important;
}

.ua-p-index .exa-login-brand-name{
  max-width:none !important;
  font-size:35px !important;
  line-height:1.2 !important;
  white-space:normal !important;
}

.ua-p-index .exa-login-title{
  max-width:none !important;
  font-size:46px !important;
  line-height:1.1 !important;
  text-align:inherit !important;
}

.ua-p-index .exa-login-subtitle{
  max-width:none !important;
  font-size:18px !important;
  line-height:1.45 !important;
  text-align:inherit !important;
}

.ua-p-index .exa-login-form,
.ua-p-index .exa-field-group,
.ua-p-index .exa-field-shell,
.ua-p-index .exa-login-actions{
  width:100% !important;
  max-width:100% !important;
}

.ua-p-index .exa-field-input{
  width:100% !important;
  max-width:100% !important;
  min-height:58px !important;
  height:58px !important;
}

.ua-p-index .exa-login-titlebar{
  height:56px !important;
  min-height:56px !important;
  border-radius:18px 18px 0 0 !important;
}

.ua-p-index .exa-login-footer{
  height:40px !important;
  min-height:40px !important;
  border-radius:0 0 18px 18px !important;
}

/* =========================================================
   EXANET Login v19 - clean desktop popup
   Video is a real 50% column; form is the other 50%.
   This resets the earlier absolute-video experiment.
   ========================================================= */
html:has(body.ua-p-index),
body.ua-p-index{
  width:100vw !important;
  min-width:0 !important;
  height:100vh !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#f3f6fa !important;
}

body.ua-p-index.ua-guest.ua-shell-plain{
  background:#f3f6fa !important;
}

body.ua-p-index.ua-guest.ua-shell-plain .ua-main,
body.ua-p-index.ua-guest.ua-shell-plain .ua-page{
  min-height:100vh !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  background:#f3f6fa !important;
  overflow:hidden !important;
}

.ua-p-index .exa-login-page{
  width:100vw !important;
  min-width:0 !important;
  max-width:none !important;
  height:100vh !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  display:block !important;
  background:#f3f6fa !important;
  overflow:hidden !important;
}

.ua-p-index .exa-login-window{
  --exa-left-video-w:50% !important;
  width:100vw !important;
  min-width:0 !important;
  max-width:none !important;
  height:100vh !important;
  min-height:0 !important;
  max-height:none !important;
  display:grid !important;
  grid-template-rows:42px minmax(0, 1fr) 34px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#ffffff !important;
  overflow:hidden !important;
}

.ua-p-index .exa-login-window::before,
.ua-p-index .exa-login-window::after{
  display:none !important;
}

.ua-p-index .exa-login-titlebar{
  grid-row:1 !important;
  width:100% !important;
  height:42px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  border:0 !important;
  border-bottom:1px solid #d9e1ea !important;
  border-radius:0 !important;
  background:#ffffff !important;
  color:#101828 !important;
  direction:rtl !important;
  z-index:5 !important;
}

.ua-p-index .exa-titlebar-brand{
  min-width:0 !important;
  gap:9px !important;
  direction:rtl !important;
}

.ua-p-index .exa-app-mark{
  width:26px !important;
  height:26px !important;
  border-radius:7px !important;
  border:1px solid #d7dee8 !important;
  background:#fff !important;
  overflow:hidden !important;
}

.ua-p-index .exa-app-mark span{
  display:none !important;
}

.ua-p-index .exa-app-mark img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.ua-p-index .exa-app-name{
  color:#101828 !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

.ua-p-index .exa-win-btn{
  width:26px !important;
  height:26px !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#475467 !important;
}

.ua-p-index .exa-login-shell{
  grid-row:2 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:50% 50% !important;
  grid-auto-flow:column !important;
  direction:ltr !important;
  position:relative !important;
  z-index:1 !important;
  overflow:hidden !important;
  background:#ffffff !important;
}

.ua-p-index .exa-login-visual,
.ua-p-index .exa-login-visual.exa-login-visual-full{
  grid-column:1 !important;
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  border:0 !important;
  border-inline-end:1px solid #d9e1ea !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:#07111f !important;
  z-index:1 !important;
}

.ua-p-index .exa-visual-video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:#07111f !important;
  z-index:1 !important;
}

.ua-p-index .exa-visual-video-overlay{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  pointer-events:none !important;
  background:linear-gradient(90deg, rgba(3,10,20,.08), rgba(3,10,20,.34)) !important;
  z-index:2 !important;
}

.ua-p-index .exa-login-panel{
  grid-column:2 !important;
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:24px 44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  direction:rtl !important;
  overflow:hidden !important;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  z-index:2 !important;
}

.ua-p-index .exa-login-panel::before,
.ua-p-index .exa-login-panel::after{
  display:none !important;
}

.ua-p-index .exa-login-panel-inner{
  width:min(100%, 410px) !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:13px !important;
  transform:none !important;
  position:relative !important;
  z-index:2 !important;
}

.ua-p-index .exa-login-copy{
  margin:0 0 4px !important;
  text-align:right !important;
}

.ua-p-index .exa-login-brand{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin:0 0 10px !important;
  text-align:right !important;
}

.ua-p-index .exa-login-brand-logo{
  display:block !important;
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  border-radius:12px !important;
  object-fit:cover !important;
}

.ua-p-index .exa-login-brand-meta{
  display:block !important;
  min-width:0 !important;
}

.ua-p-index .exa-login-brand-name{
  display:block !important;
  max-width:100% !important;
  color:#111827 !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1.25 !important;
  text-shadow:none !important;
  animation:none !important;
  filter:none !important;
  white-space:normal !important;
}

.ua-p-index .exa-login-title{
  color:#111827 !important;
  font-size:29px !important;
  font-weight:950 !important;
  line-height:1.15 !important;
  margin:0 !important;
  text-align:right !important;
  text-shadow:none !important;
}

.ua-p-index .exa-login-subtitle{
  color:#667085 !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.45 !important;
  margin:6px 0 0 !important;
  text-align:right !important;
  text-shadow:none !important;
}

.ua-p-index .exa-login-form{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.ua-p-index .exa-field-group{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  gap:6px !important;
}

.ua-p-index .exa-field-label{
  color:#344054 !important;
  font-size:13px !important;
  font-weight:850 !important;
}

.ua-p-index .exa-field-shell,
.ua-p-index .exa-login-actions{
  width:100% !important;
  max-width:100% !important;
}

.ua-p-index .exa-field-input{
  width:100% !important;
  max-width:100% !important;
  min-height:44px !important;
  height:44px !important;
  box-sizing:border-box !important;
  border-radius:10px !important;
  border:1px solid #ccd5df !important;
  background:#ffffff !important;
  color:#101828 !important;
  font-size:14px !important;
  font-weight:750 !important;
  padding:0 44px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
}

.ua-p-index .exa-field-input::placeholder{
  color:#98a2b3 !important;
  opacity:1 !important;
}

.ua-p-index .exa-field-input:focus{
  border-color:#d6a935 !important;
  background:#ffffff !important;
  box-shadow:0 0 0 3px rgba(214,169,53,.14) !important;
}

.ua-p-index .exa-field-icon,
.ua-p-index .exa-field-toggle{
  color:#667085 !important;
}

.ua-p-index .exa-field-icon-end{
  inset-inline-end:14px !important;
}

.ua-p-index .exa-field-toggle{
  inset-inline-start:14px !important;
}

.ua-p-index .exa-login-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:2px !important;
  direction:ltr !important;
}

.ua-p-index .exa-btn{
  height:44px !important;
  min-height:44px !important;
  border-radius:10px !important;
  font-size:14px !important;
  font-weight:900 !important;
}

.ua-p-index .exa-btn-primary{
  background:linear-gradient(180deg, #e5bd4f, #cfa43b) !important;
  border-color:#cfa43b !important;
  color:#111827 !important;
}

.ua-p-index .exa-btn-secondary{
  background:#ffffff !important;
  border-color:#ccd5df !important;
  color:#344054 !important;
}

.ua-p-index .exa-login-alert{
  padding:9px 12px !important;
  border-radius:10px !important;
  background:#fef3f2 !important;
  border-color:#fecdca !important;
  color:#b42318 !important;
  font-size:13px !important;
}

.ua-p-index .exa-login-footer{
  grid-row:3 !important;
  width:100% !important;
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
  padding:0 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-top:1px solid #d9e1ea !important;
  border-radius:0 !important;
  background:#ffffff !important;
  color:#667085 !important;
  font-size:12px !important;
  font-weight:800 !important;
  direction:rtl !important;
  z-index:5 !important;
}

.ua-p-index .exa-login-footer-brand{
  color:#475467 !important;
}

@media (max-width:760px){
  .ua-p-index .exa-login-shell{
    grid-template-columns:1fr !important;
  }

  .ua-p-index .exa-login-visual,
  .ua-p-index .exa-login-visual.exa-login-visual-full{
    display:none !important;
  }

  .ua-p-index .exa-login-panel{
    grid-column:1 !important;
    padding:22px !important;
  }
}

/* =========================================================
   EXANET Login v20 - no internal titlebar + light network art
   ========================================================= */
.ua-p-index .exa-login-window{
  grid-template-rows:minmax(0, 1fr) 34px !important;
}

.ua-p-index .exa-login-titlebar{
  display:none !important;
}

.ua-p-index .exa-login-shell{
  grid-row:1 !important;
  grid-template-columns:50% 50% !important;
}

.ua-p-index .exa-login-visual,
.ua-p-index .exa-login-visual.exa-login-visual-full{
  background-image:url('../img/login_network_light_bg.png') !important;
  background-size:cover !important;
  background-position:left center !important;
  background-repeat:no-repeat !important;
  background-color:#dceff6 !important;
  border:0 !important;
  border-inline-end:0 !important;
}

.ua-p-index .exa-visual-video{
  display:none !important;
}

.ua-p-index .exa-login-visual.exa-login-visual-full > .exa-visual-image,
.ua-p-index .exa-visual-image{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:left center !important;
  z-index:1 !important;
}

.ua-p-index .exa-login-visual.exa-login-visual-full > .exa-visual-lock,
.ua-p-index .exa-visual-lock,
.ua-p-index .exa-visual-lock span,
.ua-p-index .exa-visual-lock i{
  display:block !important;
}

.ua-p-index .exa-visual-video-overlay{
  background:
    linear-gradient(90deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.16) 60%, rgba(255,255,255,.72) 100%),
    linear-gradient(180deg, rgba(5,44,68,.06), rgba(5,44,68,.14)) !important;
}

.ua-p-index .exa-visual-lock{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:156px !important;
  height:176px !important;
  transform:translate(-50%, -50%) !important;
  z-index:4 !important;
  pointer-events:none !important;
  opacity:.76 !important;
  animation:exaLockFloat 4.8s ease-in-out infinite !important;
  filter:drop-shadow(0 18px 28px rgba(6,48,72,.16)) !important;
}

.ua-p-index .exa-lock-shackle{
  position:absolute !important;
  left:34px !important;
  top:8px !important;
  width:88px !important;
  height:82px !important;
  border:13px solid rgba(255,255,255,.64) !important;
  border-bottom:0 !important;
  border-radius:50px 50px 0 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(12,95,128,.12),
    0 0 24px rgba(59,190,225,.16) !important;
}

.ua-p-index .exa-lock-body{
  position:absolute !important;
  left:19px !important;
  top:76px !important;
  width:118px !important;
  height:98px !important;
  border-radius:25px !important;
  background:linear-gradient(145deg, rgba(255,255,255,.68), rgba(197,232,243,.38)) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -18px 28px rgba(14,96,132,.14),
    0 18px 52px rgba(5,48,74,.20) !important;
  backdrop-filter:blur(2px) !important;
}

.ua-p-index .exa-lock-body i{
  position:absolute !important;
  left:50% !important;
  top:48% !important;
  width:18px !important;
  height:34px !important;
  transform:translate(-50%, -50%) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(9,79,112,.62), rgba(9,54,82,.76)) !important;
  box-shadow:0 0 18px rgba(28,171,217,.18) !important;
}

.ua-p-index .exa-lock-body i::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:-17px !important;
  width:27px !important;
  height:27px !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:rgba(9,79,112,.68) !important;
}

.ua-p-index .exa-lock-ring{
  position:absolute !important;
  inset:36px 20px 0 !important;
  border-radius:42px !important;
  border:1px solid rgba(255,255,255,.46) !important;
  opacity:0 !important;
  animation:exaLockPulse 3.2s ease-out infinite !important;
}

.ua-p-index .exa-lock-ring-2{
  animation-delay:1.3s !important;
}

.ua-p-index .exa-lock-spark{
  position:absolute !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:#f0c24f !important;
  box-shadow:0 0 16px rgba(240,194,79,.8) !important;
  opacity:.9 !important;
  animation:exaSparkDrift 3.8s ease-in-out infinite !important;
}

.ua-p-index .exa-lock-spark-1{
  right:12px !important;
  top:76px !important;
}

.ua-p-index .exa-lock-spark-2{
  left:8px !important;
  bottom:42px !important;
  animation-delay:1.6s !important;
}

@keyframes exaLockFloat{
  0%,100%{ transform:translate(-50%, -50%) translateY(0); }
  50%{ transform:translate(-50%, -50%) translateY(-10px); }
}

@keyframes exaLockPulse{
  0%{ transform:scale(.72); opacity:.42; }
  72%{ transform:scale(1.25); opacity:0; }
  100%{ transform:scale(1.25); opacity:0; }
}

@keyframes exaSparkDrift{
  0%,100%{ transform:translateY(0) scale(1); opacity:.82; }
  50%{ transform:translateY(-12px) scale(.82); opacity:.42; }
}

.ua-p-index .exa-login-panel{
  padding:32px 46px 28px !important;
  width:calc(100% + 42px) !important;
  margin-left:-42px !important;
  padding-left:78px !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(238,248,251,.88) 36px,
    #eef8fb 84px,
    #f6fbfd 100%) !important;
  box-shadow:none !important;
}

.ua-p-index .exa-login-panel-inner{
  width:min(100%, 420px) !important;
  gap:15px !important;
}

.ua-p-index .exa-login-title{
  color:#083a53 !important;
  font-size:34px !important;
  letter-spacing:0 !important;
  text-align:center !important;
}

.ua-p-index .exa-login-subtitle{
  color:#60758a !important;
  font-size:15px !important;
  font-weight:800 !important;
  text-align:center !important;
}

.ua-p-index .exa-login-copy{
  margin:0 0 26px !important;
  padding-top:0 !important;
  text-align:center !important;
}

.ua-p-index .exa-login-copy::after{
  content:"" !important;
  display:block !important;
  width:72px !important;
  height:3px !important;
  margin:15px auto 0 !important;
  border-radius:99px !important;
  background:linear-gradient(90deg, #19a8d5, #e2b647) !important;
  opacity:.82 !important;
}

.ua-p-index .exa-login-footer{
  grid-row:2 !important;
}

@media (max-width:760px){
  .ua-p-index .exa-login-window{
    grid-template-rows:minmax(0, 1fr) 34px !important;
  }
}

/* Login typography polish */
@font-face{
  font-family:"UA Cairo Login";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/cairo/cairo-400.ttf") format("truetype");
}

@font-face{
  font-family:"UA Cairo Login";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/cairo/cairo-600.ttf") format("truetype");
}

@font-face{
  font-family:"UA Cairo Login";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/cairo/cairo-700.ttf") format("truetype");
}

@font-face{
  font-family:"UA Cairo Login";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("../fonts/cairo/cairo-800.ttf") format("truetype");
}

@font-face{
  font-family:"UA Cairo Login";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("../fonts/cairo/cairo-900.ttf") format("truetype");
}

.ua-p-index .exa-login-window,
.ua-p-index .exa-login-window input,
.ua-p-index .exa-login-window button,
.ua-p-index .exa-login-window label{
  font-family:"UA Cairo Login", Tahoma, Arial, sans-serif !important;
  letter-spacing:0 !important;
}

.ua-p-index .exa-login-title{
  font-weight:900 !important;
  line-height:1.18 !important;
}

.ua-p-index .exa-login-subtitle,
.ua-p-index .exa-field-label,
.ua-p-index .exa-field-input,
.ua-p-index .exa-btn,
.ua-p-index .exa-login-footer{
  font-weight:700 !important;
  line-height:1.5 !important;
}

/* Final login chrome/effect pass */
.ua-p-index .exa-login-window{
  grid-template-rows:minmax(0, 1fr) !important;
}

.ua-p-index .exa-login-footer{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
}

.ua-p-index .exa-visual-lock{
  opacity:.99 !important;
  animation:exaLockFloat 4.8s ease-in-out infinite, exaLockMaterialize 5.8s ease-in-out infinite !important;
  filter:
    drop-shadow(0 20px 30px rgba(6,48,72,.28))
    drop-shadow(0 0 24px rgba(255,255,255,.34))
    drop-shadow(0 0 10px rgba(226,182,71,.20)) !important;
}

.ua-p-index .exa-visual-lock::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-26px !important;
  border-radius:38px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.34), transparent 46%),
    conic-gradient(from 40deg, transparent 0 26%, rgba(255,255,255,.42) 36%, rgba(226,182,71,.36) 43%, transparent 58% 100%) !important;
  opacity:.30 !important;
  mix-blend-mode:screen !important;
  animation:exaLockAssemble 5.8s ease-in-out infinite !important;
}

.ua-p-index .exa-visual-lock::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  top:0 !important;
  height:3px !important;
  border-radius:99px !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(226,182,71,.82), transparent) !important;
  opacity:0 !important;
  transform:translateY(0) !important;
  animation:exaLockScan 5.8s ease-in-out infinite !important;
}

@keyframes exaLockMaterialize{
  0%{ opacity:.72; filter:drop-shadow(0 18px 28px rgba(6,48,72,.16)) blur(.45px); }
  18%{ opacity:1; filter:drop-shadow(0 20px 32px rgba(6,48,72,.32)) drop-shadow(0 0 28px rgba(255,255,255,.44)) blur(0); }
  72%{ opacity:.99; filter:drop-shadow(0 20px 30px rgba(6,48,72,.28)) drop-shadow(0 0 24px rgba(255,255,255,.34)) blur(0); }
  100%{ opacity:.72; filter:drop-shadow(0 18px 28px rgba(6,48,72,.16)) blur(.45px); }
}

@keyframes exaLockAssemble{
  0%{ opacity:0; transform:scale(.86) rotate(0deg); }
  16%{ opacity:.34; transform:scale(1.04) rotate(58deg); }
  48%{ opacity:.14; transform:scale(1) rotate(136deg); }
  100%{ opacity:0; transform:scale(.9) rotate(220deg); }
}

@keyframes exaLockScan{
  0%{ opacity:0; transform:translateY(8px); }
  14%{ opacity:.82; }
  32%{ opacity:0; transform:translateY(168px); }
  100%{ opacity:0; transform:translateY(168px); }
}

/* Mobile/WebView correction: later desktop refinements must not restore the
   two-column, minimum-width login window after the responsive rules. */
@media (max-width:760px){
  body.ua-guest.ua-shell-plain{
    overflow:auto !important;
  }

  .ua-p-index .exa-login-page{
    width:100% !important;
    min-height:100vh !important;
    height:auto !important;
    padding:0 !important;
    align-items:stretch !important;
  }

  .ua-p-index .exa-login-window{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:100vh !important;
    min-height:620px !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    grid-template-rows:minmax(0, 1fr) !important;
  }

  .ua-p-index .exa-login-shell{
    width:100% !important;
    min-width:0 !important;
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .ua-p-index .exa-login-visual,
  .ua-p-index .exa-login-visual.exa-login-visual-full{
    display:none !important;
  }

  .ua-p-index .exa-login-panel{
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:28px 24px !important;
    background:linear-gradient(180deg, #eef8fb, #f8fcfd) !important;
    box-sizing:border-box !important;
  }

  .ua-p-index .exa-login-panel-inner{
    width:100% !important;
    max-width:420px !important;
    margin:0 auto !important;
  }

  .ua-p-index .exa-login-footer{
    display:none !important;
  }
}

@media (max-width:380px){
  .ua-p-index .exa-login-panel{
    padding:20px 16px !important;
  }

  .ua-p-index .exa-login-panel-inner{
    gap:12px !important;
  }

  .ua-p-index .exa-login-copy{
    margin-bottom:16px !important;
  }

  .ua-p-index .exa-login-title{
    font-size:29px !important;
  }

  .ua-p-index .exa-login-subtitle{
    font-size:13px !important;
  }

  .ua-p-index .exa-field-input{
    height:46px !important;
  }

  .ua-p-index .exa-login-actions{
    gap:10px !important;
  }

  .ua-p-index .exa-btn{
    height:44px !important;
  }
}
