/* Module Connections — Login modern UI */
:root{
  --bg1: #0ea5e9;
  --bg2: #6366f1;
  --bg3: #22c55e;
  --card-bg: hsla(0,0%,100%,.75);
  --card-blur: blur(10px);
  --ring: #11182722;
  --shadow: 0 10px 30px -10px rgba(0,0,0,.25);
}

.login-shell{
  position:relative;
  min-height: calc(100vh - 80px);
  display:grid;
  align-items:center;
  justify-items:center;
  overflow:hidden;
}
.login-bg{
  position:absolute; inset:0;
  background: radial-gradient(1200px 800px at 80% -10%, var(--bg1) 0%, transparent 60%),
              radial-gradient(900px 700px at -10% 120%, var(--bg2) 0%, transparent 60%);
  filter:saturate(1.1);
  z-index:0;
}
.blob{ position:absolute; width:46vmax; height:46vmax; border-radius:50%; filter:blur(60px); opacity:.35; }
.blob.b1{ background:var(--bg1); top:-20vmax; right:-10vmax; animation:float 16s ease-in-out infinite; }
.blob.b2{ background:var(--bg2); bottom:-18vmax; left:-12vmax; animation:float 18s ease-in-out infinite reverse; }
.blob.b3{ background:var(--bg3); top:30%; left:50%; transform:translate(-50%,-50%); width:30vmax; height:30vmax; animation:pulse 12s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(2.5%) } }
@keyframes pulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1) } 50%{ transform:translate(-50%,-50%) scale(1.05) } }

.login-card{
  position:relative; z-index:1;
  width:min(92vw, 880px);
  display:grid; gap:1rem;
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border:1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: min(6vh, 48px);
}
.brand{ display:flex; gap:1rem; align-items:center; }
.brand-logo{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  font-weight:700; background: linear-gradient(135deg, var(--bg1), var(--bg2));
  color:#fff; box-shadow: 0 8px 20px -8px rgba(99,102,241,.6);
}
.brand-title{ margin:0; font-size:1.25rem; }
.brand-sub{ margin:0; color:var(--muted); }

.alert{ margin-top:.75rem; border:1px solid #fecaca; background:#fee2e2; color:#991b1b; padding:.6rem .8rem; border-radius:12px; }

.login-form{ display:grid; gap:1rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:.925rem; color:var(--muted); }
.field input{
  padding:.8rem .9rem; border-radius:14px; border:1px solid var(--border); background:#fff;
  outline: none; transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.field input:focus{ border-color: var(--bg2); box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
.field-hint{ color:var(--muted); font-size:.85rem; }

.password-field .password-wrap{ position:relative; }
.password-field .toggle{
  position:absolute; right:.35rem; top:50%; transform: translateY(-50%);
  border:0; background:transparent; padding:.35rem .55rem; cursor:pointer; border-radius:10px;
}
.password-field .toggle:hover{ background:rgba(17,24,39,.06); }

.meta-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.chk{ display:inline-flex; gap:.5rem; align-items:center; user-select:none; }

.btn-primary{
  position:relative; border:1px solid var(--border); border-radius:14px;
  padding:.9rem 1rem; background: linear-gradient(135deg, var(--bg2), var(--bg1));
  color:#fff; font-weight:600; cursor:pointer; transition: transform .05s ease, filter .15s ease;
}
.btn-primary:hover{ filter:brightness(1.02); }
.btn-primary:active{ transform:translateY(1px); }
.btn-spinner{
  display:inline-block; width:1em; height:1em; margin-left:.5rem; vertical-align:-.15em;
  border-radius:50%; border:.18em solid rgba(255,255,255,.5); border-right-color:transparent;
  animation:spin 1s linear infinite; opacity:0;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.btn-primary.loading .btn-spinner{ opacity:1; }

.legal{ color:var(--muted); font-size:.85rem; margin: .25rem 0 0; }
.login-footer{ text-align:center; color:var(--muted); }
@media (prefers-reduced-motion: reduce) { .blob, .btn-spinner { animation: none !important; } }