/* =========================================================
   ASR Login — Premium Desktop + Clean Mobile
   - Keep brand panel on desktop, hide on mobile
   - New emerald/teal login button with hover lift
   ========================================================= */

:root{
  --brand-1: var(--brand-1, #6d5ef6);
  --brand-2: var(--brand-2, #9a66ff);
  --brand-3: var(--brand-3, #38bdf8);
  --ink-900: var(--ink-900, #0f172a);
  --ink-700: var(--ink-700, #334155);
  --panel:   var(--panel, rgba(255,255,255,.78));
  --line:    var(--line, rgba(15,23,42,.10));
  --shadow-2: var(--shadow-2, 0 22px 60px rgba(21,31,55,.18));

  /* Login button colors (emerald → teal) */
  --btn-a:#10b981;
  --btn-b:#06b6d4;
}

/* Background */
body.login-body{
  min-height: 100vh;
  color: var(--ink-900);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(109,94,246,.18), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(56,189,248,.16), transparent 65%),
    linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
  position: relative;
}
.bg-dots{
  position: fixed; inset: 0; pointer-events: none; opacity: .22; z-index: -1;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
}

/* Layout */
.login-wrap{
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  max-width: 1120px;
  width: 100%;
  margin-inline: auto;
}
@media (max-width: 992px){
  /* Mobile: hide brand entirely and center the form */
  .brand-side{ display:none !important; }
  .login-grid{ grid-template-columns: 1fr; max-width: 560px; }
}

/* Brand card */
.brand-card{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
  padding: 28px;
  height: 100%;
}
.brand-title{
  font-weight: 900;
  letter-spacing: .3px;
  font-size: 1.6rem;
}
.brand-points li{ margin: .25rem 0; }

/* Login card */
.login-card{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.login-head{
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(109,94,246,.12), rgba(56,189,248,.10), transparent 70%);
  display: flex; align-items: center; justify-content: space-between;
}
.login-title{ font-weight: 900; letter-spacing: .3px; }
.login-body{ padding: 22px; }

/* Buttons & chips */
.link-muted{ text-decoration: none; color: #6b7280; }
.link-muted:hover{ color: var(--brand-1); }

.badge-soft{
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: .25rem .6rem;
  font-weight: 700;
}

/* Inputs */
.form-control-lg{
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}
:root[data-bs-theme="dark"] .form-control-lg{
  background: rgba(255,255,255,.06);
}

/* New premium login button */
.btn-login{
  background-image: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: #fff;
  border: none;
  font-weight: 900;
  letter-spacing: .2px;
  border-radius: 999px;
  box-shadow: 0 16px 32px rgba(16,185,129,.25);
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-login:hover{
  transform: translateY(-2px);
  filter: saturate(1.07);
  box-shadow: 0 24px 46px rgba(6,182,212,.28);
}
.btn-login:active{ transform: translateY(0); }

/* RTL tweaks */
[dir="rtl"] .login-head{ flex-direction: row-reverse; }
[dir="rtl"] .d-flex.gap-2{ flex-direction: row-reverse; }