:root { --red:#b00020; --redbg:#fde7ea; --green:#146c2e; --grey:#666; --line:#ddd; --accent:#1d4e89; }
* { box-sizing: border-box; }
body { font: 15px/1.4 system-ui, sans-serif; margin: 0; color: #222; background: #f6f7f9; }
header { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
header nav { display: flex; gap: 14px; flex: 1; }
header nav a { text-decoration: none; color: var(--accent); padding: 4px 8px; border-radius: 4px; }
header nav a.active { background: #e8eef7; font-weight: 600; }
main { max-width: 1100px; margin: 16px auto; padding: 0 12px; }
.hidden { display: none !important; }
h1 { font-size: 22px; margin: 0 0 12px; } h2 { font-size: 17px; margin: 18px 0 8px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; color: var(--grey); }
tr.overdue td, .overdue { color: var(--red); }
tr.overdue { background: var(--redbg); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e8eef7; font-size: 12px; }
.badge.red { background: var(--redbg); color: var(--red); font-weight: 600; }
.badge.green { background: #dff3e5; color: var(--green); }
label { display: block; font-weight: 600; margin: 8px 0 3px; }
input, select, textarea, button { font: inherit; padding: 6px 8px; border: 1px solid #bbb; border-radius: 5px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], select, textarea { width: 100%; }
button { background: var(--accent); color: #fff; border: 0; cursor: pointer; padding: 7px 14px; }
button.secondary { background: #e9ecf1; color: #222; } button.danger { background: var(--red); }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 0 1 auto; }
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.outcomes label { font-weight: normal; border: 1px solid #bbb; border-radius: 6px; padding: 8px; margin: 0; cursor: pointer; background: #fff; }
.outcomes input { width: auto; margin-right: 6px; }
.msg { padding: 8px 10px; border-radius: 6px; margin: 8px 0; } .msg.err { background: var(--redbg); color: var(--red); } .msg.ok { background: #dff3e5; color: var(--green); }
.num { font-size: 26px; font-weight: 700; } .muted { color: var(--grey); font-size: 13px; }
.narrow { max-width: 420px; margin: 40px auto; }
code.link { word-break: break-all; font-size: 12px; }