/* ==========================================================================
   Sky Brightness Monitoring System — login page
   Shares the dashboard's dark theme. No background photograph: the previous
   version loaded an 18 MB image before the form could appear.
   ========================================================================== */

:root {
    --page:      #080c14;
    --page-deep: #05070c;
    --surface:   #141c2b;
    --surface-2: #1a2434;
    --border:    rgba(255, 255, 255, 0.10);
    --ink:       #ffffff;
    --ink-2:     #aab4c6;
    --ink-3:     #7b869b;
    --series:    #3987e5;
    --crit:      #d03b3b;

    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1100px 620px at 50% -12%, #16203a 0%, transparent 62%),
        linear-gradient(180deg, var(--page) 0%, var(--page-deep) 100%);
    background-color: var(--page-deep);
    -webkit-font-smoothing: antialiased;
}

.login-box {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 34px 30px;
    text-align: center;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.brand img {
    height: 56px;
    width: auto;
    border-radius: 8px;
}

.login-box h1 {
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.3;
}

.login-box .subtitle {
    font-size: 0.83rem;
    color: var(--ink-3);
    margin-top: 6px;
    margin-bottom: 26px;
}

.field { text-align: left; margin-bottom: 14px; }

.field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 13px;
    transition: border-color 0.15s ease;
}

.field input::placeholder { color: var(--ink-3); }

.field input:focus {
    outline: none;
    border-color: var(--series);
}

.login-btn {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--series);
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 8px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.login-btn:hover { filter: brightness(1.1); }
.login-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Inline message region — replaces the blocking alert() popups. */
.login-msg {
    min-height: 20px;
    margin-top: 14px;
    font-size: 0.83rem;
    color: var(--crit);
}

.login-foot {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--ink-3);
}

@media (max-width: 420px) {
    .login-box { padding: 26px 20px; }
    .brand img { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}