* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f6f7f9; color: #1c1e21; }
main { max-width: 60em; margin: 0 auto; padding: 1em; }
nav { display: flex; gap: 1em; align-items: center; background: #232a34; padding: .6em 1em; flex-wrap: wrap; }
nav a { color: #cfd8e3; text-decoration: none; }
nav a.brand { font-weight: 700; color: #fff; }
nav a:hover { color: #fff; }
h1 { font-size: 1.3em; } h2 { font-size: 1.05em; margin-top: 1.4em; }
.banner { padding: .5em 1em; }
.banner.running { background: #e0f2e9; border-bottom: 1px solid #b7dfc9; }
.banner.error { background: #fdecea; color: #b3261e; }
.inline { display: inline; }
button { cursor: pointer; border: 1px solid #c6ccd4; background: #fff; border-radius: 6px; padding: .25em .6em; }
button:hover { background: #eef1f5; }
button.warn { border-color: #e0a800; background: #fff8e1; }
.card { background: #fff; border: 1px solid #e2e6eb; border-radius: 8px; padding: .7em .9em; margin: .5em 0; }
.card.over { border-color: #e57373; }
.card.pinned { background: #fffdf3; }
.card .row { display: flex; justify-content: space-between; gap: .5em; flex-wrap: wrap; }
.bar { height: 6px; background: #e9edf2; border-radius: 3px; margin: .45em 0; }
.fill { height: 100%; background: #4c9f70; border-radius: 3px; }
.fill.red { background: #d9534f; }
.mins { color: #5a6472; font-size: .85em; }
.red { color: #b3261e; } .grey { color: #8a94a1; }
.hint { color: #5a6472; font-size: .9em; }
.done-tag { color: #4c9f70; }
ul.tree, ul.children { list-style: none; padding-left: 0; }
ul.children { padding-left: 1.6em; border-left: 2px solid #e2e6eb; margin-left: .4em; }
li.node { margin: .35em 0; background: #fff; border: 1px solid #e8ebef; border-radius: 6px; padding: .4em .6em; }
li.node.kind-group > .row .title { font-weight: 700; }
li.node.is-done > .row .title { text-decoration: line-through; color: #8a94a1; }
li.node .row { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; }
.prio { font-size: .75em; background: #eef1f5; border-radius: 4px; padding: 0 .4em; color: #5a6472; }
.drag { cursor: grab; color: #b6bec9; }
.deadline { color: #c77c02; }
details.edit { margin-top: .3em; font-size: .9em; }
details.edit summary { color: #8a94a1; cursor: pointer; }
.stack { display: flex; flex-direction: column; gap: .4em; margin: .5em 0; }
.rowform { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; margin: .4em 0; }
input, textarea, select { border: 1px solid #c6ccd4; border-radius: 6px; padding: .3em .5em; font: inherit; }
.notes { background: #f8f9fb; border-radius: 6px; padding: .5em; }
table { border-collapse: collapse; background: #fff; }
th, td { border: 1px solid #e2e6eb; padding: .3em .7em; text-align: left; }
tr.state-done td { color: #4c9f70; }
tr.state-carried td { color: #c77c02; }
tr.state-dropped td { color: #8a94a1; }
.addform { list-style: none; margin: .3em 0; }
@media (max-width: 640px) { nav { gap: .6em; } main { padding: .6em; } }