:root { color-scheme: light; font-family: system-ui, sans-serif; color: #243551; background: #eef3fb; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; }
.login-card { max-width: 410px; margin: 10vh auto; padding: 32px; background: white; border: 1px solid #dce5f3; border-radius: 18px; box-shadow: 0 12px 40px #233b6312; }
h1 { font-size: 24px; margin: 0 0 24px; } h2 { font-size: 18px; }
label { display: block; margin: 18px 0; } input { display: block; width: 100%; margin-top: 8px; border: 1px solid #bccbe0; border-radius: 7px; padding: 11px; font: inherit; }
button, a { font: inherit; } button { cursor: pointer; border: 0; border-radius: 7px; background: #285ed6; color: white; padding: 10px 14px; } button:disabled { opacity: .5; cursor: wait; }
.login-card button { width: 100%; } .error { color: #ae283b; min-height: 22px; white-space: pre-wrap; }
[hidden] { display: none !important; } .admin { max-width: 1250px; margin: auto; }
header { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } header h1 { margin-right: auto; }
section { margin: 20px 0; } .panel { background: white; padding: 20px; border-radius: 12px; overflow-x: auto; }
#add-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; } #add-form label { margin: 0; min-width: 260px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { padding: 11px 8px; border-bottom: 1px solid #e5ebf4; text-align: left; overflow-wrap: anywhere; }
td button { padding: 6px 9px; margin: 3px; font-size: 13px; } .credential { background: #fff7df; padding: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:600px) { body { padding: 12px; } .login-card { margin: 6vh auto; padding: 24px; } table { min-width: 750px; } }