/* ==========================================================================
   Login page restyle matching the new UI kit (assets/css/ui.css).
   Loaded after style.css; markup ids/handlers are unchanged.
   ========================================================================== */
#login-page {
  background:
    radial-gradient(700px 420px at 15% 10%, rgba(26,188,156,.16), transparent 60%),
    radial-gradient(600px 400px at 90% 95%, rgba(96,165,250,.08), transparent 60%),
    #081113;
}
#login-page::before {
  /* faint grid texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
#login-page .login-hero { position: relative; z-index: 1; padding: 24px 16px; height: 100%; width: 100%; }
#login-page .login-card {
  width: 380px; max-width: 100%;
  padding: 28px 26px 22px;
  background: rgba(15,28,31,.92);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
}
#login-page .login-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #1abc9c, transparent);
}

#login-page .brand-row { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0 0 22px; text-align: left; }
#login-page .login-logo { width: 48px; height: 48px; border-radius: 13px; font-size: 15px; box-shadow: 0 8px 24px rgba(26,188,156,.3); flex: none; }
#login-page .login-title { margin: 0; font-size: 20px; font-weight: 780; letter-spacing: -.015em; color: #e8eef0; line-height: 1.15; }
#login-page .login-sub { margin: 4px 0 0; font-size: 13px; color: rgba(232,238,240,.55); }

#login-page .input-group { margin-bottom: 10px; }
#login-page .input-group .input-field {
  padding: 12px 64px 12px 42px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0b1618;
  color: #e8eef0;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#login-page .input-group .input-field::placeholder { color: rgba(232,238,240,.38); }
#login-page .input-group .input-field:focus { border-color: rgba(26,188,156,.6); box-shadow: 0 0 0 3px rgba(26,188,156,.15); background: #0d1b1e; }
#login-page .input-icon { left: 13px; opacity: .7; }
#login-page .input-icon svg { width: 18px; height: 18px; fill: rgba(232,238,240,.7); }
#login-page .input-group:focus-within .input-icon svg { fill: #1abc9c; }
#login-page .toggle-visibility {
  right: 8px; padding: 5px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: rgba(232,238,240,.7);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
#login-page .toggle-visibility:hover { color: #fff; background: rgba(255,255,255,.09); }

#login-page .login-btn {
  margin-top: 14px; padding: 12px; border-radius: 11px;
  background: #1abc9c; color: #04211b;
  font-size: 14px; font-weight: 750; letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(26,188,156,.25);
}
#login-page .login-btn:hover { filter: brightness(1.08); box-shadow: 0 10px 28px rgba(26,188,156,.35); }
#login-page .login-btn:disabled { opacity: .7; cursor: default; filter: none; }

#login-page .login-error { margin: 12px 0 0; min-height: 0; font-size: 13px; text-align: left; }
#login-page .login-error:not(:empty) {
  color: #fecaca; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
  border-radius: 10px; padding: 9px 12px;
}
#login-page .login-note { margin: 16px 0 0; font-size: 11.5px; color: rgba(232,238,240,.38); text-align: center; }

@media (max-width: 480px) {
  #login-page .login-card { padding: 24px 18px 18px; border-radius: 16px; }
}