/* ==========================================================================
   crypto-auth.css — شاشات المصادقة (إعادة تصميم احترافية: لوح مزدوج)
   --------------------------------------------------------------------------
   تخطيط لوحين: لوح علامة بصري (تدرّج لوني + نمط هندسي خفيف + رسالة الثقة)
   ولوح النموذج النظيف. واعٍ بالثيمات الخمسة والوضع الداكن والاتجاه المنطقي.
   كل قيمة من رموز design-system.css — لا ألوان مثبَّتة.
   ========================================================================== */

.empty-layout{min-height:100vh}

/* الصدفة: لوحان جنباً إلى جنب */
.auth-shell{min-height:100vh;display:flex;background:var(--bg-app);position:relative}

/* اللوح البصري (يسار في RTL، يظهر على الشاشات الواسعة) */
.auth-aside{flex:1;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--accent-strong),var(--accent) 55%,var(--accent-strong));
  color:var(--accent-on);display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--sp-12) var(--sp-10)}
/* نمط هندسي خفيف */
.auth-aside::before{content:"";position:absolute;inset:0;opacity:.12;
  background:
    radial-gradient(circle at 80% 20%, #fff 0, transparent 30%),
    radial-gradient(circle at 15% 75%, #fff 0, transparent 28%);
  pointer-events:none}
.auth-aside-brand{display:flex;align-items:center;gap:var(--sp-3);position:relative;z-index:1}
.auth-aside-brand .logo{width:48px;height:48px;border-radius:var(--r-md);
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  display:grid;place-items:center;font-weight:var(--fw-black);font-size:var(--fs-lg)}
.auth-aside-brand span{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.auth-aside-hero{position:relative;z-index:1}
.auth-aside-hero .hero-title{margin:0;font-size:var(--fs-3xl);font-weight:var(--fw-black);
  line-height:var(--lh-tight);margin-bottom:var(--sp-4)}
.auth-aside-hero p{font-size:var(--fs-md);opacity:.9;line-height:var(--lh-normal);max-width:42ch}
.auth-aside-trust{display:flex;align-items:center;gap:var(--sp-3);position:relative;z-index:1;
  font-size:var(--fs-sm);opacity:.92}
.auth-aside-trust .tdot{width:36px;height:36px;border-radius:var(--r-md);
  background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:1rem}

/* لوح النموذج */
.auth-main{width:min(520px,100%);flex-shrink:0;display:flex;flex-direction:column;
  background:var(--bg-app)}
.auth-topbar{display:flex;align-items:center;justify-content:flex-end;
  gap:var(--sp-2);padding:var(--sp-5) var(--sp-8)}
.auth-tools{display:flex;align-items:center;gap:var(--sp-2)}
.auth-tools .mode-toggle{width:42px;height:42px;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--bg-surface);color:var(--text-2);
  cursor:pointer;display:grid;place-items:center;font-size:1rem;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.auth-tools .mode-toggle:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.auth-tools select{height:42px;border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--bg-surface);color:var(--text-1);font-family:inherit;
  font-size:var(--fs-sm);padding:0 var(--sp-3);cursor:pointer}

.auth-body{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-6) var(--sp-10) var(--sp-12)}
.auth-card{width:100%;max-width:400px;margin:0 auto;
  animation:auth-rise var(--t-slow) var(--ease-out) both}
@keyframes auth-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* علامة داخل اللوح للجوّال (تظهر حين يختفي اللوح البصري) */
.auth-brand{display:none;flex-direction:column;align-items:flex-start;margin-bottom:var(--sp-6)}
.auth-brand .logo{width:52px;height:52px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:var(--accent-on);display:grid;place-items:center;
  font-weight:var(--fw-black);font-size:var(--fs-xl);margin-bottom:var(--sp-3);
  box-shadow:0 8px 22px var(--accent-soft)}

.auth-title{font-size:var(--fs-2xl);font-weight:var(--fw-black);
  color:var(--text-1);margin:0 0 var(--sp-2)}
.auth-sub{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 var(--sp-6);
  line-height:var(--lh-normal)}

/* الحقول */
.fld{display:block;margin-bottom:var(--sp-4)}
.fld > span{display:block;font-size:var(--fs-sm);color:var(--text-1);
  margin-bottom:var(--sp-2);font-weight:var(--fw-semi)}
.fld > input{width:100%;box-sizing:border-box;padding:.75rem .95rem;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--fs-md);
  background:var(--bg-surface);color:var(--text-1);min-height:var(--touch-min);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.fld > input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld input[type="file"]{padding:.55rem .6rem;background:var(--bg-raised);cursor:pointer}

/* الأزرار */
.auth-card .btn-primary{width:100%;justify-content:center;margin-top:var(--sp-3);
  font-size:var(--fs-md);padding:.8rem 1rem}
.btn-ghost-danger{width:100%;justify-content:center;display:inline-flex;align-items:center;
  padding:.7rem 1rem;margin-top:var(--sp-3);background:transparent;color:var(--st-late);
  border:1px solid var(--st-late);border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semi);
  cursor:pointer;min-height:var(--touch-min);transition:background var(--t-fast) var(--ease)}
.btn-ghost-danger:hover:not(:disabled){background:var(--st-late-soft)}
.btn-ghost-danger:disabled{opacity:.6;cursor:not-allowed}

.auth-foot{margin-top:var(--sp-6);text-align:center;font-size:var(--fs-sm);color:var(--text-2)}
.auth-foot a{color:var(--accent);font-weight:var(--fw-semi)}

/* التنبيهات */
.alert-err{background:var(--st-late-soft);color:var(--st-late);
  border:1px solid color-mix(in srgb,var(--st-late) 35%,transparent);
  border-radius:var(--r-sm);padding:.7rem .9rem;font-size:var(--fs-sm);
  margin:var(--sp-2) 0 var(--sp-4);display:flex;align-items:flex-start;
  gap:var(--sp-2);line-height:var(--lh-normal)}
.alert-err a{color:inherit;font-weight:var(--fw-bold);text-decoration:underline}
.alert-ok{background:var(--st-ontime-soft);
  border:1px solid color-mix(in srgb,var(--st-ontime) 35%,transparent);
  border-radius:var(--r-md);padding:var(--sp-6);color:var(--text-1);text-align:center}
.alert-ok > strong{display:block;font-size:var(--fs-lg);color:var(--st-ontime);margin-bottom:var(--sp-2)}
.alert-ok p{font-size:var(--fs-sm);color:var(--text-2);
  margin:var(--sp-2) 0 var(--sp-5);line-height:var(--lh-normal)}
.alert-ok .btn-primary{width:100%;justify-content:center}

/* تنبيه النسخ الاحتياطي — بارز عمداً */
.backup-warning{background:var(--st-warn-soft);
  border:1px solid color-mix(in srgb,var(--st-warn) 40%,transparent);
  border-inline-start:4px solid var(--st-warn);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5)}
.backup-warning-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.backup-warning-head strong{font-size:var(--fs-md);color:var(--st-warn)}
.warn-icon{font-size:var(--fs-lg);color:var(--st-warn)}
.backup-warning p{font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh-normal);margin:var(--sp-2) 0}
.warn-list{margin:var(--sp-2) 0;padding-inline-start:1.2rem}
.warn-list li{font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh-normal);margin-bottom:var(--sp-2)}

/* الاستجابة: يختفي اللوح البصري على الشاشات المتوسطة فأصغر */
@media (max-width:900px){
  .auth-aside{display:none}
  .auth-main{width:100%}
  .auth-brand{display:flex}
  .auth-body{padding:var(--sp-6) var(--sp-6) var(--sp-10)}
}
@media (max-width:480px){
  .auth-topbar{padding:var(--sp-4)}
  .auth-body{padding:var(--sp-4) var(--sp-5) var(--sp-8)}
}