.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.col { background: var(--mist); border-radius: 8px; padding: 1rem; }
.col header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; }
.col h2 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.count { color: var(--slate); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cards { list-style: none; min-height: 3.5rem; display: grid; gap: 0.5rem; border-radius: 6px; }
.cards.over { outline: 2px dashed var(--ink); outline-offset: 4px; }
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 0.75rem 0.875rem; cursor: grab; }
.card.dragging { opacity: 0.4; }
.card h3 { font-size: 1rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card p { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--slate); overflow-wrap: anywhere; white-space: pre-wrap; }
.card .pri { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--slate); }
.card .pri::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rule); }
.card .pri.high::before { background: #c62828; }
.card .pri.medium::before { background: var(--volt-deep); }
.card .tools { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.625rem; }
.card .tools button { font: inherit; font-size: 0.8125rem; padding: 0.25rem 0.5rem; border: 1px solid var(--rule); background: var(--paper); border-radius: 4px; cursor: pointer; color: var(--ink); }
.card .tools button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.empty { color: var(--slate); font-size: 0.875rem; padding: 0.75rem 0; text-align: center; }
.add { margin-top: 0.75rem; width: 100%; font: inherit; font-weight: 500; font-size: 0.9375rem; padding: 0.5rem; border: 1px dashed #b9bdc4; background: transparent; border-radius: 6px; cursor: pointer; color: var(--ink); }
.add:hover { background: var(--paper); border-style: solid; }
.note { margin-top: 1.5rem; color: var(--slate); font-size: 0.875rem; }
dialog { border: 0; border-radius: 10px; padding: 1.5rem; width: min(28rem, calc(100% - 2rem)); color: var(--ink); }
dialog::backdrop { background: rgba(22, 24, 29, 0.45); }
dialog h2 { font-size: 1.25rem; margin-bottom: 1rem; }
dialog label { display: block; font-weight: 500; font-size: 0.9375rem; margin: 0.75rem 0 0.25rem; }
dialog label span { color: var(--slate); font-weight: 400; }
dialog input, dialog textarea, dialog select { width: 100%; font: inherit; padding: 0.5rem 0.625rem; border: 1px solid #c9ccd2; border-radius: 6px; background: var(--paper); color: var(--ink); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
@media (max-width: 52rem) { .board { grid-template-columns: 1fr; } }