:root { color-scheme: light dark; --edge: #8884; --accent: #1f5f8b; }
body { font: 17px/1.6 system-ui, sans-serif; margin: 0; }
main { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
section { margin-top: 2.5rem; }
.lede, .hint { opacity: 0.7; }
form { display: grid; gap: 0.9rem; margin-top: 0.8rem; }
label { display: grid; gap: 0.25rem; font-weight: 600; }
input, select, textarea { font: inherit; padding: 0.5rem; border: 1px solid var(--edge); border-radius: 6px; }
button { font: inherit; padding: 0.6rem 1.1rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; justify-self: start; }
table { border-collapse: collapse; width: 100%; margin-top: 0.8rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--edge); }
#apply-state, #follow-state { min-height: 1.5rem; margin: 0; }

body.board { background: #101820; color: #e8eef4; }
.board input, .board select { background: #1b2733; color: inherit; }
.board main { max-width: 64rem; }
tr.overdue td:first-child { border-left: 4px solid #d9534f; }