/* ============================================================
   login-enhance.css — إضافات لصفحة الدخول (R16)
   ─────────────────────────────────────────────────────────
   بس يضيف styles للعناصر الجديدة:
     - Saved accounts dropdown
     - PWA install button
   الـ auth الأساسى فى style.css (بيفضل زى ما هو)
   ============================================================ */

/* ═══ Saved accounts dropdown ═══ */
.lg-acc-wrap{
  margin-block-end:14px;
}
.lg-acc-wrap[hidden]{ display:none; }

.lg-acc-dd{
  position:relative;
}
.lg-acc-btn{
  inline-size:100%;
  padding:11px 14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--txt);
  font-size:13px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background .15s, border-color .15s;
}
.lg-acc-btn:hover{
  background:var(--surface-3);
  border-color:var(--accent-line);
}
.lg-acc-btn > span{
  flex:1;
  text-align:start;
  color:var(--txt-2);
}
.lg-acc-btn .ic{
  inline-size:16px;
  block-size:16px;
  color:var(--txt-3);
  flex-shrink:0;
}
.lg-acc-btn .lg-acc-chev{
  transition:transform .3s;
}
.lg-acc-dd.open .lg-acc-chev{
  transform:rotate(180deg);
}

.lg-acc-list{
  position:absolute;
  inset-inline:0;
  inset-block-start:calc(100% + 4px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 40px hsl(0 0% 0% / .2);
  overflow:hidden;
  display:none;
  z-index:10;
  max-block-size:260px;
  overflow-y:auto;
}
.lg-acc-dd.open .lg-acc-list{
  display:block;
  animation:lgAccIn .2s ease-out;
}
@keyframes lgAccIn{
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

.lg-acc-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  border-block-end:1px solid var(--line);
  transition:background .12s;
}
.lg-acc-row:last-child{ border:none; }
.lg-acc-row:hover{
  background:var(--accent-soft);
}
.lg-acc-av{
  inline-size:32px;
  block-size:32px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent-strong), hsl(258 80% 55%));
  color:var(--on-accent);
  display:grid; place-items:center;
  font-size:14px;
  font-weight:800;
  flex-shrink:0;
}
.lg-acc-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1px;
  min-inline-size:0;
}
.lg-acc-info b{
  font-size:13px;
  font-weight:700;
  color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lg-acc-info small{
  font-size:11px;
  color:var(--txt-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lg-acc-del{
  inline-size:26px;
  block-size:26px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--txt-3);
  cursor:pointer;
  display:grid; place-items:center;
  transition:background .15s, color .15s;
  flex-shrink:0;
}
.lg-acc-del:hover{
  background:var(--bad-soft);
  color:var(--bad);
}
.lg-acc-del .ic{
  inline-size:12px;
  block-size:12px;
}

/* ═══ PWA install button ═══ */
.lg-install-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  inline-size:100%;
  padding:11px;
  margin-block-start:8px;
  background:var(--surface-2);
  color:var(--txt);
  border:1px dashed var(--accent-line);
  border-radius:10px;
  font-size:12.5px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s, border-color .15s, border-style .15s;
}
.lg-install-btn:hover{
  background:var(--accent-soft);
  border-style:solid;
  border-color:var(--accent-strong);
}
.lg-install-btn[hidden]{ display:none; }
.lg-install-btn .ic{
  inline-size:14px;
  block-size:14px;
  color:var(--accent-strong);
}

/* ═══════════════════════════════════════════════════════════
   PWA Install Zone (R21) — نفس المكان للزر و الـ badge
   ═══════════════════════════════════════════════════════════ */
.lg-pwa-zone{
  margin-block-start:8px;
}

/* Installed card — يحل محل زر التثبيت لما التطبيق متثبت */
.lg-installed-card{
  display:flex;
  align-items:center;
  gap:10px;
  inline-size:100%;
  padding:11px 13px;
  background:hsl(150 65% 42% / .1);
  border:1px solid hsl(150 65% 42% / .3);
  border-radius:10px;
  animation:lgInstalledIn .4s cubic-bezier(.34,1.56,.64,1);
}
.lg-installed-card[hidden]{ display:none; }
@keyframes lgInstalledIn{
  from { opacity:0; transform:translateY(4px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.lg-installed-info{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-inline-size:0;
}
.lg-installed-info > .ic{
  inline-size:22px;
  block-size:22px;
  color:hsl(150 65% 42%);
  flex-shrink:0;
  padding:4px;
  background:hsl(150 65% 42% / .18);
  border-radius:50%;
}
.lg-installed-info > div{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-inline-size:0;
}
.lg-installed-info b{
  font-size:12.5px;
  font-weight:800;
  color:hsl(150 65% 42%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lg-installed-info span{
  font-size:10.5px;
  color:var(--txt-2);
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* زر إعادة التثبيت */
.lg-reinstall-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 10px;
  border:none;
  border-radius:6px;
  background:transparent;
  color:var(--accent-strong);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  flex-shrink:0;
  transition:background .15s, transform .15s;
}
.lg-reinstall-link:hover{
  background:var(--accent-soft);
}
.lg-reinstall-link:active{
  transform:scale(.95);
}
.lg-reinstall-link .ic{
  inline-size:12px;
  block-size:12px;
  transition:transform .35s;
}
.lg-reinstall-link:active .ic{
  transform:rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════
   Install Help Modal (R25) — inline, no dependencies
   ═══════════════════════════════════════════════════════════ */
.lg-help-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
}
.lg-help-modal[hidden]{ display:none; }

.lg-help-scrim{
  position:absolute;
  inset:0;
  background:hsl(0 0% 0% / .55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:lgHelpFadeIn .25s ease-out;
  cursor:pointer;
}
@keyframes lgHelpFadeIn{
  from { opacity:0; }
  to   { opacity:1; }
}

.lg-help-content{
  position:relative;
  z-index:1;
  background:var(--surface);
  color:var(--txt);
  inline-size:100%;
  max-inline-size:460px;
  max-block-size:88vh;
  border-radius:20px 20px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:lgHelpSlideUp .35s cubic-bezier(.34,1.56,.64,1);
}
@media (min-inline-size: 640px){
  .lg-help-modal{ align-items:center; }
  .lg-help-content{ border-radius:16px; }
}
@keyframes lgHelpSlideUp{
  from { transform:translateY(100%); opacity:.9; }
  to   { transform:translateY(0); opacity:1; }
}

.lg-help-close{
  position:absolute;
  inset-block-start:12px;
  inset-inline-end:12px;
  inline-size:32px;
  block-size:32px;
  border:none;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--txt-2);
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  display:grid;
  place-items:center;
  transition:background .15s, color .15s;
  z-index:2;
}
.lg-help-close:hover{
  background:var(--bad-soft);
  color:var(--bad);
}

.lg-help-header{
  padding:24px 20px 12px;
  text-align:center;
  border-block-end:1px solid var(--line);
}
.lg-help-icon{
  inline-size:52px;
  block-size:52px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--accent-strong), hsl(258 80% 55%));
  color:var(--on-accent);
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  box-shadow:0 6px 20px hsl(258 90% 66% / .3);
}
.lg-help-icon .ic{
  inline-size:24px;
  block-size:24px;
}
.lg-help-header h3{
  font-size:16px;
  font-weight:800;
  color:var(--txt);
  margin:0 0 3px;
}
.lg-help-header p{
  font-size:12px;
  color:var(--txt-2);
  margin:0;
  font-weight:600;
}

.lg-help-status{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:14px 16px 0;
  padding:12px 14px;
  background:hsl(38 92% 54% / .1);
  border:1px solid hsl(38 92% 54% / .3);
  border-radius:10px;
}
.lg-help-status > .ic{
  inline-size:18px;
  block-size:18px;
  color:hsl(38 92% 54%);
  flex-shrink:0;
  margin-block-start:1px;
}
.lg-help-status > div{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.lg-help-status b{
  font-size:12px;
  font-weight:800;
  color:hsl(38 92% 54%);
  line-height:1.4;
}
.lg-help-status small{
  font-size:11px;
  color:var(--txt-2);
  line-height:1.5;
}

.lg-help-instructions{
  padding:14px 20px;
  overflow-y:auto;
  flex:1;
}
.lg-help-instructions ol{
  padding-inline-start:22px;
  margin:0;
  line-height:2;
  font-size:14px;
  color:var(--txt);
}
.lg-help-instructions ol li{
  padding-block:2px;
}
.lg-help-instructions b{
  color:var(--accent-strong);
  font-weight:800;
  padding:1px 6px;
  background:var(--accent-soft);
  border-radius:4px;
}
.lg-help-instructions .lg-help-note{
  margin-block-start:14px;
  padding:10px 12px;
  background:var(--surface-2);
  border-radius:8px;
  font-size:11.5px;
  color:var(--txt-2);
  line-height:1.6;
}

.lg-help-actions{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:8px;
  padding:14px 16px 18px;
  border-block-start:1px solid var(--line);
}
.lg-help-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  border:none;
  transition:transform .15s, background .15s;
  min-block-size:44px;
}
.lg-help-btn:active{
  transform:scale(.97);
}
.lg-help-btn .ic{
  inline-size:14px;
  block-size:14px;
}
.lg-help-btn-ghost{
  background:var(--surface-2);
  color:var(--txt);
  border:1px solid var(--line);
}
.lg-help-btn-ghost:hover{
  background:var(--surface-3);
}
.lg-help-btn-primary{
  background:linear-gradient(135deg, var(--accent-strong), hsl(258 80% 55%));
  color:var(--on-accent);
  box-shadow:0 4px 12px hsl(258 90% 66% / .3);
}
.lg-help-btn-primary:hover{
  box-shadow:0 6px 18px hsl(258 90% 66% / .4);
}
.lg-help-btn-primary:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* ============================================================
   Multi-server login — مراحل الدخول
   ============================================================ */

/* ── مرحلة (step) ── */
.lg-step { display: flex; flex-direction: column; gap: 14px; }

/* ── زر الرجوع ── */
.lg-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 10px 6px 12px;
  margin-block-end: 2px;
  background: transparent;
  border: none;
  color: var(--txt-2);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--r-pill, 999px);
  transition: background .15s ease, color .15s ease;
}
.lg-back:hover { background: var(--surface-2); color: var(--txt); }
.lg-back .ic { inline-size: 16px; block-size: 16px; }

/* ── رأس المرحلة ── */
.lg-step-head { display: flex; flex-direction: column; gap: 3px; }
.lg-step-head b { font-size: 16px; font-weight: 700; color: var(--txt); }
.lg-step-head small { font-size: 12.5px; color: var(--txt-3); }

/* ── بطاقة الهوية (مرحلة الباسورد) ── */
.lg-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
}
.lg-identity-av {
  flex-shrink: 0;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
  font-weight: 700;
  font-size: 16px;
}
.lg-identity-info { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.lg-identity-info b {
  font-size: 14.5px; font-weight: 600; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-identity-info small { font-size: 12px; color: var(--txt-3); }

/* ── قائمة السيرفرات ── */
.lg-srv-list { display: flex; flex-direction: column; gap: 8px; }

.lg-srv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md, 12px);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.lg-srv-row:hover { border-color: var(--accent-line, var(--accent)); background: var(--surface-3); }
.lg-srv-row:active { transform: scale(.99); }

.lg-srv-av {
  flex-shrink: 0;
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong, var(--accent));
  font-weight: 700; font-size: 16px;
}
.lg-srv-info { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; flex: 1; }
.lg-srv-info b {
  font-size: 14.5px; font-weight: 600; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-srv-info small { font-size: 12px; color: var(--txt-3); }
.lg-srv-arrow {
  flex-shrink: 0; inline-size: 18px; block-size: 18px;
  color: var(--txt-3); transform: scaleX(-1);
}