@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --mdk-auth-ink: #152a37;
    --mdk-auth-muted: #526572;
    --mdk-auth-accent: #087f73;
    --mdk-auth-accent-strong: #05635b;
    --mdk-auth-card: rgba(255, 252, 246, .72);
    --mdk-auth-line: rgba(255, 255, 255, .62);
    --mdk-auth-shadow: 0 28px 80px rgba(4, 23, 31, .34);
}

.auth-surface {
    isolation: isolate;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    background: #102a36;
    color: var(--mdk-auth-ink);
    font-family: 'Hanken Grotesk', sans-serif;
}

.auth-surface__image,
.auth-surface__blur {
    inset: 0;
    pointer-events: none;
    position: fixed;
}

.auth-surface__image {
    background-image: var(--mdk-auth-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}

.auth-surface__blur {
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    backdrop-filter: blur(10px) saturate(1.04);
    background: rgba(7, 29, 39, .36);
    z-index: 1;
}

.auth-surface__content {
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 3.5rem) max(1rem, env(safe-area-inset-right)) clamp(1rem, 4vw, 3.5rem) max(1rem, env(safe-area-inset-left));
    position: relative;
    z-index: 2;
}

.auth-card {
    background: var(--mdk-auth-card) !important;
    border: 1px solid var(--mdk-auth-line) !important;
    border-radius: 1.35rem !important;
    box-shadow: var(--mdk-auth-shadow) !important;
    color: var(--mdk-auth-ink);
    overflow: hidden;
}

@supports (backdrop-filter: blur(18px)) {
    .auth-card {
        -webkit-backdrop-filter: blur(14px) saturate(1.08);
        backdrop-filter: blur(14px) saturate(1.08);
    }
}

.auth-card--wide { margin-inline: auto; max-width: 900px; }
.auth-card .card-body { padding: clamp(1.25rem, 3vw, 2.25rem); }
.auth-display { font-family: 'Bricolage Grotesque', sans-serif; }
.auth-logo { display: inline-block; height: 3rem; max-width: min(12rem, 70vw); object-fit: contain; width: auto; }
.auth-logo--dark { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .22)); }
.auth-logo--dark, .auth-logo--light { max-height: 3.25rem; }
.auth-surface a { color: var(--mdk-auth-accent-strong); }
.auth-surface .form-control, .auth-surface .form-select { background: rgba(255, 255, 255, .78); border-color: rgba(21, 42, 55, .18); min-height: 2.75rem; }
.auth-surface .form-control:focus, .auth-surface .form-select:focus { border-color: var(--mdk-auth-accent); box-shadow: 0 0 0 .22rem rgba(8, 127, 115, .17); }
.auth-surface .btn-primary { background: var(--mdk-auth-accent); border-color: var(--mdk-auth-accent); }
.auth-surface .btn-primary:hover, .auth-surface .btn-primary:focus-visible { background: var(--mdk-auth-accent-strong); border-color: var(--mdk-auth-accent-strong); }
.auth-surface :focus-visible { outline: 3px solid rgba(255, 211, 119, .95); outline-offset: 3px; }

@media (max-width: 575.98px) {
    .auth-surface__content { padding-top: 1rem; }
    .auth-card { border-radius: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-surface *, .auth-surface *::before, .auth-surface *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
    .auth-card { background: Canvas !important; border: 2px solid CanvasText !important; }
    .auth-surface__image, .auth-surface__blur { display: none; }
}