/* Login page specific styles */
html {
  color-scheme: light;
}

/* browser prefers dark */
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }

  html:not(.light) {
    background-color: oklch(0.145 0.01 230);
    color: oklch(0.93 0.015 255);
    --bg-card: oklch(0.185 0.015 230);
  }
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgb(245 245 245 / 0.68), rgb(245 245 245 / 0.38)),
        color-mix(in oklch, var(--card) 42%, transparent);
    border: 1px solid rgb(255 255 255 / 0.72);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.82),
        inset 0 -1px 0 rgb(255 255 255 / 0.28),
        0 28px 80px rgb(15 23 42 / 0.20);
    backdrop-filter: blur(28px) saturate(1.35);
    -webkit-backdrop-filter: blur(28px) saturate(1.35);
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, rgb(255 255 255 / 0.72), transparent 36%),
        linear-gradient(110deg, transparent 0%, rgb(255 255 255 / 0.26) 42%, transparent 64%);
}

.login-card > * {
    position: relative;
    z-index: 1;
}

html.dark .login-card {
    background:
        linear-gradient(145deg, rgb(24 42 49 / 0.72), rgb(10 27 35 / 0.48)),
        color-mix(in oklch, var(--card) 34%, transparent);
    border-color: rgb(125 211 252 / 0.24);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.12),
        inset 0 -1px 0 rgb(125 211 252 / 0.08),
        0 28px 90px rgb(0 0 0 / 0.50);
}

html.dark .login-card::before {
    background:
        radial-gradient(circle at 18% 0%, rgb(125 211 252 / 0.18), transparent 38%),
        linear-gradient(110deg, transparent 0%, rgb(255 255 255 / 0.08) 42%, transparent 64%);
}

.login-card input {
    background: rgb(255 255 255 / 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html.dark .login-card input {
    background: rgb(255 255 255 / 0.06);
    border-color: rgb(255 255 255 / 0.18);
}

.login-logo {
    height: 2.5rem;
    max-width: 100%;
    width: auto;
}