:root {
    color-scheme: light;
    --nc-bg: #0f172a;
    --nc-accent: #22c55e;
    --nc-card: #ffffff;
    --nc-text: #1f2937;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
    background: #f4f6f8;
    color: var(--nc-text);
}

.topbar {
    background: var(--nc-bg);
    color: #fff;
    padding: 1rem 1.5rem;
    font-weight: 700;
}

.topbar a { color: #fff; text-decoration: none; }

main {
    max-width: 480px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.auth-card {
    background: var(--nc-card);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.auth-card label {
    display: block;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.auth-card input, .auth-card select {
    width: 100%;
    padding: .6rem;
    margin-top: .3rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

.auth-card button {
    background: var(--nc-accent);
    color: #fff;
    border: none;
    padding: .7rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.error { color: #dc2626; font-size: .9rem; }

.footer {
    text-align: center;
    color: #6b7280;
    font-size: .8rem;
    padding: 2rem 0;
}

.status-badge.ok::before { content: "🟢 "; }
.status-badge.off::before { content: "🔴 "; }

.auth-kicker { color: #456832; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.auth-description { color: #52615b; font-size: .9rem; line-height: 1.6; }
.service-notice { background: #eff6e8; border: 1px solid #dce8d2; border-radius: 8px; padding: 1rem; margin: 1.25rem 0; color: #354b2b; font-size: .85rem; line-height: 1.6; }
.service-notice a { display: block; font-weight: 600; color: #284d1c; margin: .3rem 0; }
.auth-card > p a { color: #285819; }

.topbar a { display: inline-flex; align-items: center; gap: 10px; }
.topbar .brand-icon { display: block; width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }

/* The full supplied logo uses dark lettering, so it sits on a light header. */
.topbar { background: #f8faf7; border-bottom: 1px solid #dce3db; }
.topbar .brand-logo { display: block; width: 210px; height: auto; max-width: 100%; object-fit: contain; }
@media(max-width:720px) { .topbar .brand-logo { width: 165px; } }