:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0b111b;
    color: #e8eef7;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #14243a 0, #0b111b 42%, #070b12 100%); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.topbar {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(8, 13, 22, .82);
    backdrop-filter: blur(14px);
}
.brand { font-size: 1.16rem; font-weight: 750; letter-spacing: .02em; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar-actions form { margin: 0; }
.user-label { color: #9fb0c6; font-size: .92rem; }
.link-button { border: 0; background: transparent; color: #dce7f5; cursor: pointer; padding: 8px 10px; border-radius: 8px; }
.link-button:hover { background: rgba(255,255,255,.07); }

.page-shell { max-width: 1180px; margin: 0 auto; padding: 38px 28px 64px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card, .content-card, .hero-panel {
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(18, 27, 42, .82);
    box-shadow: 0 20px 55px rgba(0,0,0,.28);
    border-radius: 18px;
}
.login-card { width: min(430px, 100%); padding: 32px; }
.login-heading { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.logo-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #58a6ff, #7768ff); font-weight: 800; font-size: 1.25rem; }
h1, h2, p { margin-top: 0; }
.login-heading h1 { margin-bottom: 3px; }
.login-heading p, .muted { color: #9fb0c6; }
label { display: block; margin: 17px 0 7px; color: #c9d5e6; font-size: .92rem; }
input[type="text"], input[type="password"] {
    width: 100%; border: 1px solid #32445e; background: #0d1624; color: #f4f7fb;
    border-radius: 10px; padding: 12px 13px; outline: none;
}
input:focus { border-color: #6ba9ff; box-shadow: 0 0 0 3px rgba(70, 137, 255, .16); }
.checkbox-row { display: flex; align-items: center; gap: 9px; margin: 18px 0; }
.checkbox-row input { width: 17px; height: 17px; }
.primary-button { width: 100%; border: 0; border-radius: 10px; padding: 12px 16px; color: white; background: linear-gradient(135deg, #3a8dff, #6c63ff); cursor: pointer; font-weight: 700; }
.primary-button:hover { filter: brightness(1.07); }
.validation-summary, .field-error { color: #ff9a9a; font-size: .88rem; }
.validation-summary:empty, .field-error:empty { display: none; }
.success-message { margin: 14px 0; padding: 11px 13px; border-radius: 10px; background: rgba(57, 196, 131, .12); color: #86e5b8; border: 1px solid rgba(57, 196, 131, .3); }

.hero-panel { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 34px; margin-bottom: 24px; }
.hero-panel h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 10px; }
.eyebrow { color: #7fb6ff; text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 800; margin-bottom: 10px; }
.hero-copy { max-width: 700px; color: #aab9cc; line-height: 1.6; }
.status-pill { white-space: nowrap; padding: 10px 13px; border-radius: 999px; background: rgba(43, 188, 118, .11); color: #8de3b7; border: 1px solid rgba(43, 188, 118, .25); }
.status-pill span { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #42d68a; box-shadow: 0 0 10px rgba(66,214,138,.8); }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.content-card { padding: 24px; }
.content-card p { color: #aab9cc; line-height: 1.58; margin-bottom: 0; }
.narrow-card { max-width: 620px; margin: 0 auto; }
.narrow-card .primary-button { margin-top: 20px; width: auto; min-width: 190px; }

@media (max-width: 760px) {
    .topbar { padding: 0 16px; }
    .user-label { display: none; }
    .page-shell { padding: 24px 16px 44px; }
    .hero-panel { align-items: flex-start; flex-direction: column; padding: 24px; }
    .dashboard-grid { grid-template-columns: 1fr; }
}