* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; }
#board { display: flex; gap: 1rem; padding: 1rem; overflow-x: auto; align-items: start; }
#board.dragging { align-items: stretch; }
.column { background: #f0f0f0; border-radius: .5rem; width: 280px; flex-shrink: 0; padding: .75rem; }
.column h2 { font-size: .85rem; text-transform: uppercase; color: #666; padding: 0 .25rem .5rem; display: flex; align-items: flex-start; }
.col-title { cursor: text; padding: 0 .15rem; border-radius: .15rem; min-width: 0; overflow-wrap: break-word; }
.col-title:hover { background: rgba(0,0,0,.05); }
.col-title[contenteditable="true"] { background: #fff; outline: 2px solid #000; cursor: text; }
.count { background: #000; color: #fff; font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; margin-left: .35rem; flex-shrink: 0; }
.col-actions { margin-left: auto; display: flex; gap: .15rem; flex-shrink: 0; }
.col-move-btn, .col-delete-btn { background: none; border: none; color: #999; font-size: 1rem; cursor: pointer; padding: 0 .2rem; line-height: 1; }
.col-move-btn:hover { color: #000; }
.col-delete-btn:hover { color: #c23030; }
ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.card { border: 3px solid #000; padding: .75rem; background: #fff; cursor: grab; overflow: hidden; }
.card * { pointer-events: none; }
.card a[href] { pointer-events: auto; }
:is(.card, .card-view) :is(img, video, iframe, embed, object, canvas, svg) { max-width: 100%; height: auto; }
:is(.card, .card-view) * { max-width: 100%; }
:is(.card, .card-view) .desc { overflow-wrap: break-word; word-break: break-word; }
.card:focus { outline: none; }
.card:focus-visible { outline: auto; outline-offset: 2px; }
.card.dragging { opacity: .3; }
.column.drag-over { outline: 2px dashed #999; outline-offset: -2px; }
:is(.card, .card-view) > strong { display: block; }
:is(.card, .card-view):has(.desc) > strong { padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 3px solid #000; }
:is(.card, .card-view) .desc { margin-top: .25rem; }
.desc p { margin: .25rem 0; }
.desc p:first-child { margin-top: 0; }
.desc p:last-child { margin-bottom: 0; }
.desc ul, .desc ol { margin: .25rem 0; padding-left: 1.25rem; }
.desc ul { list-style-type: disc; }
.desc ol { list-style-type: decimal; }
.desc li { display: list-item; }
.desc code { background: #e8e8e8; padding: .1rem .3rem; border-radius: .2rem; font-size: .85em; }
.desc pre { background: #e8e8e8; padding: .5rem; border-radius: .25rem; overflow-x: auto; margin: .25rem 0; }
.desc pre code { background: none; padding: 0; }
.desc a { color: #2b4f8e; }
.desc strong { display: inline; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.tag { font-size: .7rem; font-weight: 600; padding: .15rem .5rem; border-radius: .25rem; background: var(--tag-bg); color: oklch(from var(--tag-bg) calc((0.7 - l) * infinity) 0 0); border: 1px solid oklch(from var(--tag-bg) calc(l - 0.15) c h); }

header { display: flex; align-items: center; padding: .75rem 1rem; padding-right: 9rem; }
header h1 { flex: 1; }
body.bg-dark #board-title { color: #fff; }
.header-actions { position: fixed; top: 0; right: 1rem; padding: .75rem 0; display: flex; align-items: center; gap: .5rem; z-index: 10; }
#add-column-btn, #settings-btn { font: inherit; font-size: .85rem; background: #fff; border: 2px solid #000; border-radius: .25rem; cursor: pointer; padding: .25rem .5rem; }
#add-column-btn:hover, #settings-btn:hover { background: #000; color: #fff; }
#settings-btn { font-size: 1.25rem; padding: 0 .4rem; }

.add-card { display: block; text-align: center; padding: .4rem; margin-bottom: .5rem; font-size: .8rem; color: #666; text-decoration: none; border: 2px dashed #ccc; border-radius: .25rem; }
.add-card:hover { color: #000; border-color: #999; }

dialog { border: 3px solid #000; padding: 0; width: 500px; max-width: 90vw; margin: 10vh auto; }
dialog::backdrop { background: rgba(0,0,0,.4); }
.card-view { padding: 1.25rem 1.25rem 0; }
.card-view strong { font-size: 1.1rem; }
dialog form { display: block; padding: 1.25rem; }
dialog form > * + * { margin-top: .75rem; }
.card-edit > * + * { margin-top: .75rem; }
dialog label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
dialog input[name="title"], dialog textarea { font: inherit; padding: .4rem .5rem; border: 2px solid #000; border-radius: .25rem; }
dialog textarea { resize: vertical; }
dialog fieldset { border: none; padding: 0; min-inline-size: 0; }
dialog legend { font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.tag-option { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; font-weight: normal; cursor: pointer; margin: .2rem .15rem; }
#tag-options { display: block; }
:is(.view-actions, .edit-actions) { padding-top: .25rem; }
:is(.view-actions, .edit-actions):not([hidden]) { display: flex; }
:is(.view-actions, .edit-actions) button + button { margin-left: .5rem; }
:is(.view-actions, .edit-actions) button { font: inherit; font-size: .85rem; font-weight: 600; padding: .4rem .75rem; border: 2px solid #000; border-radius: .25rem; cursor: pointer; background: #000; color: #fff; outline: none; }
:is(.view-actions, .edit-actions) button:focus-visible { box-shadow: inset 0 0 0 2px #0b6ff3; }
:is(.view-actions, .edit-actions) button[value="cancel"] { background: #fff; color: #000; }
.delete-btn { background: #c23030 !important; border-color: #c23030 !important; color: #fff !important; margin-left: auto; }

#settings-dialog h3 { font-size: 1rem; }
#board-name-input { font: inherit; padding: .4rem .5rem; border: 2px solid #000; border-radius: .25rem; }
#settings-dialog form > * + * { margin-top: .75rem; }
.tag-row { display: flex; align-items: center; margin-bottom: .5rem; }
.tag-row .tag-color { width: 2rem; height: 2rem; padding: 0; border: 2px solid #000; border-radius: .25rem; cursor: pointer; }
.tag-row .tag-name { flex: 1; font: inherit; padding: .3rem .4rem; border: 2px solid #000; border-radius: .25rem; margin: 0 .5rem; }
.tag-row .tag-delete-btn { font-size: 1.1rem; background: none; border: 2px solid #c23030; color: #c23030; border-radius: .25rem; cursor: pointer; padding: .1rem .4rem; line-height: 1; }
.tag-row .tag-delete-btn:hover { background: #c23030; color: #fff; }
#add-tag-btn { font: inherit; font-size: .8rem; background: #fff; border: 2px dashed #999; border-radius: .25rem; padding: .3rem .6rem; cursor: pointer; color: #666; }
#add-tag-btn:hover { border-color: #000; color: #000; }
#tag-manager, .io-actions, .bg-actions { border: none; padding: 0; min-inline-size: 0; }
#tag-manager > legend, .io-actions legend, .bg-actions legend { font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.io-actions button, .bg-actions button { font: inherit; font-size: .8rem; font-weight: 600; padding: .4rem .75rem; border: 2px solid #000; border-radius: .25rem; cursor: pointer; background: #fff; color: #000; margin-right: .5rem; }
.io-actions button:hover, .bg-actions button:hover { background: #000; color: #fff; }
.bg-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.bg-row + .bg-row { margin-top: .25rem; }
#bg-preview { width: 60px; height: 40px; object-fit: cover; border: 2px solid #000; border-radius: .25rem; }
#bg-empty { font-size: .8rem; color: #666; flex: 1; }
#bg-mode { font: inherit; font-size: .8rem; padding: .3rem .4rem; border: 2px solid #000; border-radius: .25rem; }
#bg-remove-btn { border-color: #c23030; color: #c23030; }
#bg-remove-btn:hover { background: #c23030; color: #fff; }
.settings-actions { display: flex; padding-top: .25rem; }
.settings-actions button + button { margin-left: .5rem; }
.settings-actions button { font: inherit; font-size: .85rem; font-weight: 600; padding: .4rem .75rem; border: 2px solid #000; border-radius: .25rem; cursor: pointer; background: #000; color: #fff; }
.settings-actions button[value="cancel"] { background: #fff; color: #000; }