/* ✨ صفحة الدخول بلغة luxe (24 أكتوبر 2026 — «أعد تصميم المواقع كلها»): كانت بطاقة رمادية (semantic.css) والحقل لما يتركّز كحلي (بقايا calm)،
   واللوحة نفسها بترولي بعد الدخول — فأول شاشة يشوفها المالك صارت من نفس العائلة: بطاقة بترولية بحافة مضيئة فوق شفق تركوازي يتنفّس.
   آخر طبقة بصفحة الدخول بس (login.html) — نفس محددات luxe.css. الخلفية تبقى #000 (الشفق طبقة فوقها). */
html[data-skin="calm"][data-theme="dark"] .login-body { position: relative; isolation: isolate; overflow: hidden; background: #000; }
html[data-skin="calm"][data-theme="dark"] .login-body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none; width: 820px; height: 820px; left: 50%; top: 50%; translate: -50% -58%;
  background: radial-gradient(closest-side, rgba(44, 196, 179, .30), rgba(34, 211, 238, .08) 55%, transparent 72%);
  filter: blur(30px);
}
html[data-skin="calm"][data-theme="dark"] .login-card {
  border-radius: 26px; border: 1px solid transparent; padding: 36px 30px 30px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(44, 196, 179, .14), transparent 62%) padding-box,
              linear-gradient(225deg, #10302e 0%, #0e2325 50%, #0b1719 100%) padding-box,
              linear-gradient(200deg, rgba(150, 250, 235, .7), rgba(44, 196, 179, .16) 45%, rgba(34, 211, 238, .32)) border-box;
  box-shadow: 0 40px 100px -40px rgba(44, 196, 179, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-skin="calm"][data-theme="dark"] .login-card h1 { font-size: 22px; font-weight: 800; }
html[data-skin="calm"][data-theme="dark"] .login-card .brand-mark {
  border-radius: 14px; box-shadow: 0 0 0 1px rgba(90, 216, 201, .3), 0 0 26px -6px rgba(44, 196, 179, .7);
}
html[data-skin="calm"][data-theme="dark"] .login-card :is(input[type="text"], input[type="password"]) {
  background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .12); color: #f2f3f5;
}
html[data-skin="calm"][data-theme="dark"] .login-card :is(input[type="text"], input[type="password"]):focus {
  background: rgba(0, 0, 0, .34); border-color: rgba(90, 216, 201, .7); box-shadow: 0 0 0 3px rgba(44, 196, 179, .18), 0 0 20px -6px rgba(44, 196, 179, .6);
}
html[data-skin="calm"][data-theme="dark"] .login-card .btn-primary {
  min-height: 48px; border-radius: 14px; border: 0;
  background: linear-gradient(180deg, #45d9c8, #25b6a5); color: #03120f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 34px -14px rgba(44, 196, 179, .9);
}
@media (hover: hover) and (pointer: fine) {
  html[data-skin="calm"][data-theme="dark"] .login-card .btn-primary:hover { background: linear-gradient(180deg, #5fe3d3, #2cc4b3); }
}
html[data-skin="calm"][data-theme="dark"] .login-foot { color: var(--text-3); }

@media (prefers-reduced-motion: no-preference) {
  html[data-skin="calm"][data-theme="dark"] .login-card { animation: lg-rise 1.1s cubic-bezier(.16, 1, .3, 1) .1s backwards; }
  html[data-skin="calm"][data-theme="dark"] .login-body::before { animation: lg-aurora 2.4s cubic-bezier(.16, 1, .3, 1) both, lg-drift 18s ease-in-out 2.4s infinite alternate; }
}
@keyframes lg-rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lg-aurora { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes lg-drift { from { transform: none; } to { transform: translate3d(-6%, 5%, 0) scale(1.1); } }