:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1d2733;
    background: #f4f6f8;
    line-height: 1.45;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #1557a0; }
.container { max-width: 1180px; margin: 0 auto; padding: 2rem; }
.topbar { min-height: 58px; display: flex; align-items: center; gap: 1.25rem; padding: .7rem 1.25rem; background: #fff; border-bottom: 1px solid #dce2e8; }
.brand { font-weight: 750; text-decoration: none; color: #17212b; white-space: nowrap; }
.topnav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.topnav a { text-decoration: none; padding: .45rem .65rem; border-radius: 6px; }
.topnav a:hover { background: #eef3f8; }
.userbox { color: #53606d; white-space: nowrap; }
.link-button { border: 0; background: none; color: #1557a0; cursor: pointer; padding: .4rem; }
.hero { margin-bottom: 1.5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.card, .panel, .admin-box { display: block; background: #fff; border: 1px solid #dce2e8; border-radius: 10px; padding: 1.2rem; text-decoration: none; color: inherit; }
.card:hover { border-color: #9db7d2; }
.card h2 { margin-top: 0; }
.admin-box { margin-top: 2rem; }
.admin-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(420px, 100%); background: #fff; border: 1px solid #dce2e8; border-radius: 12px; padding: 2rem; box-shadow: 0 12px 40px rgba(0,0,0,.08); }
label { display: grid; gap: .35rem; margin: .8rem 0; font-weight: 600; }
label.inline { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=password], input:not([type]), input[type=number] { width: 100%; padding: .65rem .75rem; border: 1px solid #bcc6d0; border-radius: 6px; background: #fff; }
button { padding: .6rem .9rem; border: 1px solid #145493; border-radius: 6px; background: #155fa8; color: #fff; cursor: pointer; }
button.secondary { background: #fff; color: #1d2733; border-color: #aab5bf; }
.alert { padding: .75rem 1rem; border-radius: 6px; margin: 1rem 0; }
.alert.error { background: #fff0f0; border: 1px solid #e6b1b1; }
.alert.ok { background: #eef9f1; border: 1px solid #aad3b5; }
.muted, small { color: #687684; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: .7rem; text-align: left; border-bottom: 1px solid #e2e7eb; vertical-align: top; }
th { background: #f8fafb; }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }
.narrow { max-width: 640px; margin-top: 2rem; }
.form-wide { max-width: 760px; }
.inline-form { display: inline; margin: 0; }
fieldset { border: 1px solid #dce2e8; border-radius: 8px; margin: 1.2rem 0; padding: 1rem; }
code { overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .container { padding: 1rem; }
    .topbar { align-items: flex-start; flex-wrap: wrap; }
    .topnav { order: 3; width: 100%; }
    .split { grid-template-columns: 1fr; }
    table { font-size: .9rem; }
}