body.login{display:grid;place-items:center;padding:20px;overflow:hidden}
body.login::after{display:none}

.lg-wrap{position:relative;z-index:1;width:min(400px,100%);display:flex;flex-direction:column;align-items:center}

.lg-holo{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.30;pointer-events:none}

.lg-card{
  width:100%;background:rgba(10,18,30,.82);border:1px solid var(--panel-br);border-radius:22px;
  padding:30px 28px;backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,.65), 0 0 40px rgba(var(--accent-rgb),.07);
  animation:rise .5s both;
}

.lg-head{text-align:center;margin-bottom:24px}
.lg-head h1{font-size:30px;font-weight:700;color:var(--cyan);text-shadow:0 0 26px var(--cyan-glow)}
.lg-head p{color:var(--muted);font-size:12.5px;margin-top:7px}

.lg-form{display:flex;flex-direction:column;gap:15px}
.lg-field{display:flex;flex-direction:column;gap:7px}
.lg-field>span{font-size:12.5px;color:var(--muted);font-weight:600}
.lg-field input{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(var(--accent-rgb),.2);background:rgba(5,10,18,.72);
  color:var(--txt);font:inherit;font-size:14px;outline:none;transition:border-color .18s;
}
.lg-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}
.lg-field input[dir=ltr]{direction:ltr;text-align:left}

/* التحقّق الحسابي */
.lg-cap{display:flex;gap:9px;align-items:center}
.lg-q{
  flex:0 0 auto;min-width:112px;text-align:center;
  padding:12px 14px;border-radius:12px;font-size:16px;font-weight:700;
  background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.22);color:var(--cyan);
  font-variant-numeric:tabular-nums;user-select:none;
}
.lg-cap input{flex:1;min-width:0;text-align:center !important}
.lg-refresh{
  flex:0 0 auto;width:42px;height:44px;border-radius:12px;cursor:pointer;font-size:17px;
  border:1px solid rgba(125,149,173,.22);background:transparent;color:var(--muted);transition:.18s;
}
.lg-refresh:hover{color:var(--cyan);border-color:rgba(var(--accent-rgb),.4);transform:rotate(90deg)}

/* المصادقة الثنائية */
.lg-2fa-icon{font-size:36px;text-align:center;filter:drop-shadow(0 0 16px var(--cyan-glow))}
.lg-2fa-text{text-align:center;color:var(--muted);font-size:13px;line-height:1.8;margin-bottom:4px}
.lg-code{
  text-align:center !important;font-size:26px !important;letter-spacing:11px;
  font-family:var(--font);padding:14px !important;
}

.lg-btn{
  padding:13px;border:none;border-radius:12px;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  background:linear-gradient(145deg,rgb(var(--accent-rgb)),var(--accent-deep));color:#eaf8ff;transition:.18s;margin-top:4px;
}
.lg-btn:hover{filter:brightness(1.15)}
.lg-btn:disabled{opacity:.5;cursor:not-allowed}

.lg-back{background:none;border:none;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;padding:6px}
.lg-back:hover{color:var(--cyan)}

.lg-err{color:var(--bad);font-size:12.5px;min-height:18px;text-align:center;line-height:1.7}
.lg-foot{margin-top:18px;color:var(--muted);font-size:11px;opacity:.65;text-align:center}

@media(max-height:620px){ .lg-head{margin-bottom:16px} .lg-head h1{font-size:24px} }

/* display:flex يتجاوز hidden الافتراضية */
.lg-form[hidden]{display:none !important}

/* الخلفية الحية خلف بطاقة الدخول */
body.login #bg{position:fixed;inset:0;z-index:0;pointer-events:none}
body.login .lg-holo{opacity:.22}
.lg-card{position:relative;overflow:hidden}
.lg-card::before,.lg-card::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;
  border:1.5px solid rgba(var(--accent-rgb),.5)}
.lg-card::before{top:9px;right:9px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.lg-card::after{bottom:9px;left:9px;border-right:0;border-top:0;border-radius:0 0 0 6px}

/* أيقونات صفحة الدخول */
.lg-refresh .ic{width:17px;height:17px}
.lg-2fa-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 6px;border-radius:18px;color:var(--cyan);
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.04));border:1px solid rgba(var(--accent-rgb),.32);filter:none}
.lg-2fa-icon .ic{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.5))}
.lg-theme.lang-btn{left:64px}