body { font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; background: #0f1115; color: #e8e8ea; }
.container { max-width: 1000px; margin: 0 auto; padding: 24px; }
.navbar { background: #171a21; padding: 16px 24px; display: flex; gap: 24px; align-items: center; border-bottom: 1px solid #2a2e37; }
.navbar a { color: #e8e8ea; text-decoration: none; font-weight: 600; }
.navbar a.brand { color: #7c8cff; font-size: 1.1rem; }
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #2a2e37; }
th { color: #9aa0ac; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }
.btn { display: inline-block; padding: 8px 16px; border-radius: 8px; background: #7c8cff; color: #fff; text-decoration: none; border: none; cursor: pointer; font-size: 0.9rem; }
.btn.secondary { background: #2a2e37; }
input[type=text], textarea, select { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #2a2e37; background: #171a21; color: #e8e8ea; margin-bottom: 12px; box-sizing: border-box; }
label { display: block; font-size: 0.85rem; color: #9aa0ac; margin-bottom: 4px; }
.card { background: #171a21; border: 1px solid #2a2e37; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.stat { display: inline-block; margin-right: 32px; }
.stat .value { font-size: 1.8rem; font-weight: 700; color: #7c8cff; }
.stat .label { font-size: 0.8rem; color: #9aa0ac; }

/* ===== Authentication ===== */

.navbar-signout {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.navbar-user {
    opacity: .75;
    font-size: .875rem;
}

.navbar-signout button {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: .875rem;
    padding: .25rem .75rem;
}

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.login-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 22rem;
    padding: 2rem;
    width: 100%;
}

.login-card h1 {
    font-size: 1.25rem;
    margin: 0 0 .5rem;
}

.login-card label {
    font-size: .875rem;
    font-weight: 600;
}

.login-card input {
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    padding: .5rem;
}

.login-card button {
    background: #4f46e5;
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    margin-top: .75rem;
    padding: .625rem;
}

.login-error {
    background: #fee2e2;
    border-radius: 4px;
    color: #991b1b;
    font-size: .875rem;
    margin: 0;
    padding: .5rem .75rem;
}

/* ===== Admin user management ===== */

.card.error { border-color: #b33; color: #ffb4b4; }
.card.success { border-color: #3a7; color: #b7f5d8; }
.card.notice { border-color: #7c8cff; color: #c9d0ff; }

.card h2 { font-size: 1rem; margin: 0 0 12px; color: #9aa0ac; text-transform: uppercase; letter-spacing: .04em; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    background: #2a2e37;
    color: #9aa0ac;
    font-size: .7rem;
    text-transform: uppercase;
}

.row-inactive td { opacity: .45; }

/* The one-time password: big and unambiguous, because it gets read off this screen. */
.one-time-secret {
    font-family: Consolas, "SF Mono", Menlo, monospace;
    font-size: 1.4rem;
    letter-spacing: .08em;
    background: #0f1115;
    border: 1px dashed #3a7;
    border-radius: 8px;
    padding: 12px 16px;
    user-select: all;
    word-break: break-all;
}

input[type=password] {
    width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #2a2e37;
    background: #171a21; color: #e8e8ea; margin-bottom: 12px; box-sizing: border-box;
}

/* Login card, matched to the portal's dark theme (overrides the light defaults above). */
.login-card { background: #171a21; border: 1px solid #2a2e37; box-shadow: 0 2px 24px rgba(0,0,0,.5); }
.login-card h1 { color: #7c8cff; }
.login-card label { color: #9aa0ac; }
.login-card input { background: #0f1115; border-color: #2a2e37; color: #e8e8ea; }
.login-card button { background: #7c8cff; }
.login-error { background: #2a1416; color: #ffb4b4; }