/* Sign-in page: frosted glass over the navy / cyan palette of the dark theme. Always dark, whatever theme the app uses. */
:root {
    --navy: #0a0f1a;
    --text: #e6edf7;
    --cyan: #22d3ee;
    --blue: #0ea5e9;
    --danger: #ff8a95;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body.login-page {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 24px 0;
    font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
    color: var(--text);
    background:
        radial-gradient(60% 50% at 16% 10%, rgba(34, 211, 238, .30), transparent 62%),
        radial-gradient(55% 55% at 90% 22%, rgba(99, 102, 241, .32), transparent 64%),
        radial-gradient(75% 60% at 68% 108%, rgba(14, 165, 233, .38), transparent 62%),
        var(--navy);
}

.login-card {
    width: min(360px, calc(100vw - 32px));
    padding: 36px 36px 32px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(34, 211, 238, .12), rgba(15, 23, 38, .64) 42%), rgba(15, 23, 38, .55);
    border: 1px solid rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 70px rgba(34, 211, 238, .10);
}

.login-avatar {
    width: 112px; height: 112px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.login-avatar svg { width: 64px; height: 64px; color: rgba(255, 255, 255, .55); }

.login-brand {
    margin: 0 0 28px;
    text-align: center;
    font-size: 20px; font-weight: 500;
    letter-spacing: .16em;
    text-transform: lowercase;
}

.field {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
    padding: 10px 2px;
    border-bottom: 1.5px solid rgba(255, 255, 255, .35);
    transition: border-color .15s;
}
.field:focus-within { border-bottom-color: var(--cyan); }
.field svg { flex: none; width: 18px; height: 18px; color: rgba(255, 255, 255, .75); }
.field:focus-within svg { color: var(--cyan); }
.field input {
    flex: 1; min-width: 0;
    padding: 4px 0;
    border: 0; outline: 0; background: none;
    color: var(--text);
    font: inherit; font-size: 15px; letter-spacing: .02em;
}
.field input::placeholder { color: rgba(230, 237, 247, .55); }
/* the browser's autofill paints its own light background; keep the glass look */
.field input:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 9999s ease-out;
}

.login-error { min-height: 20px; margin: 0 0 12px; text-align: center; font-size: 13px; color: var(--danger); }

.login-btn {
    width: 100%;
    padding: 15px;
    border: 0; border-radius: 16px;
    cursor: pointer;
    font: inherit; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #04121c;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    box-shadow: 0 0 24px rgba(34, 211, 238, .35);
    transition: filter .15s, transform .05s;
}
.login-btn:hover:not(:disabled) { filter: brightness(1.1); }
.login-btn:active:not(:disabled) { transform: translateY(1px); }
.login-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.login-btn:disabled { opacity: .6; cursor: default; }