/* Solidicon brand touches on top of the core styles (loaded after styles.css). */

/* Login: brand dark backdrop with the two fingerprint corner pieces from the
   brand kit (copper lines on transparent), faded so the card stays the focus. */
.login-wrap {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #0e1622 0%, #070d16 70%);
}
.login-wrap::before, .login-wrap::after {
  content: '';
  position: absolute;
  width: min(72vw, 1300px);
  aspect-ratio: 1200 / 720;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .85;
  pointer-events: none;
}
.login-wrap::before { top: 0; left: 0; background-image: url('fingerprint-tl.png'); }
.login-wrap::after  { bottom: 0; right: 0; background-image: url('fingerprint-br.png'); }
.login-card { position: relative; z-index: 1; background: rgba(14, 22, 34, .88); border-color: rgba(208, 242, 255, .12); backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
/* light theme keeps the same backdrop: the artwork is dark-ground by design */
:root:not([data-theme="dark"]) .login-wrap { background: radial-gradient(120% 90% at 50% 40%, #0e1622 0%, #070d16 70%); }
:root:not([data-theme="dark"]) .login-card { color: #fdfdfe; }
:root:not([data-theme="dark"]) .login-card input { background: rgba(255,255,255,.06); color: #fdfdfe; border-color: rgba(208,242,255,.18); }
:root:not([data-theme="dark"]) .login-card label { color: #fdfdfe; }
@media (max-width: 640px) { .login-wrap::before, .login-wrap::after { width: 110vw; opacity: .4; } }