:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.hero { width: min(42rem, 100%); padding: clamp(2rem, 7vw, 5rem); border: 1px solid #dfe7f1; border-radius: 1.5rem; background: white; box-shadow: 0 1.5rem 4rem rgba(36, 56, 84, .12); }
.eyebrow { color: var(--accent, #2367d1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
h1 { margin: .5rem 0; font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: -.06em; }
p { color: #526078; font-size: 1.15rem; line-height: 1.65; }
.status { display: flex; align-items: center; gap: .65rem; margin-top: 2rem; font-weight: 650; }
.status span { width: .75rem; height: .75rem; border-radius: 50%; background: #20a464; box-shadow: 0 0 0 .3rem #daf5e7; }
.logo { display: block; max-width: 12rem; max-height: 5rem; object-fit: contain; margin-bottom: 1.5rem; }
.button { display: inline-flex; margin-top: 1.25rem; padding: .8rem 1.2rem; border-radius: .75rem; color: white; background: var(--accent, #2367d1); text-decoration: none; font-weight: 700; }
.button-secondary { color: var(--accent, #2367d1); background: #edf4ff; }
.field { display: grid; gap: .4rem; margin: 1rem 0; }
.field input { width: 100%; padding: .8rem; border: 1px solid #cbd6e4; border-radius: .65rem; font: inherit; }
.errorlist { color: #b42318; padding-left: 1.25rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.topbar form { margin: 0; }
.link-button { border: 0; background: transparent; color: var(--accent, #2367d1); cursor: pointer; font: inherit; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.card { padding: 1.25rem; border: 1px solid #dfe7f1; border-radius: 1rem; background: #f8fafc; }
.card strong { display: block; margin-top: .4rem; font-size: 1.2rem; }
.administration-card { color: inherit; text-decoration: none; }
.administration-card:hover { border-color: var(--accent, #2367d1); }
.footer { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid #e6ebf2; color: #718096; font-size: .85rem; }