:root { font-family: system-ui, sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
.topbar { background: #173f73; color: white; min-height: 64px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; }
.brand { color: white; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.user-menu { display: flex; align-items: center; gap: 1rem; }
.user-menu a { color: white; }
.container { width: min(100% - 2rem, 980px); margin: 2rem auto; }
.auth-card, .card { background: white; border-radius: 12px; box-shadow: 0 6px 20px #17203318; padding: 2rem; }
.auth-card { width: min(100%, 420px); margin: 4rem auto; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .4rem; font-weight: 600; }
input { border: 1px solid #b7c3d5; border-radius: 6px; padding: .7rem; font: inherit; }
button { background: #173f73; color: white; border: 0; border-radius: 6px; padding: .75rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.error { background: #fee8e8; color: #9e1c1c; border-radius: 6px; padding: .75rem; }
.page-heading { margin-bottom: 1.5rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem; border-bottom: 1px solid #e2e8f0; text-align: left; }
th { color: #40526e; }
@media (max-width: 640px) { .topbar { padding: 0 1rem; } .container { width: min(100% - 1rem, 980px); } .auth-card, .card { padding: 1.25rem; } }