* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; background: #f2f4f7; color: #1d2433; }
header { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: #1d2433; color: #fff; flex-wrap: wrap; }
header h1 { font-size: 1.1rem; margin: 0 1rem 0 0; }
header select, header button { font: inherit; padding: .3rem .5rem; }
button.link { background: none; border: none; color: #9fb7ff; cursor: pointer; text-decoration: underline; }
#status { margin-left: auto; }
#status.error { color: #ffb4b4; }
#new-card { display: flex; gap: .5rem; padding: .75rem 1rem; flex-wrap: wrap; }
#new-card input { flex: 1 1 240px; padding: .4rem; font: inherit; }
#new-card select, #new-card button { font: inherit; padding: .4rem; }
.columns { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: .75rem; padding: 0 1rem 1rem; overflow-x: auto; }
.column { background: #e3e7ee; border-radius: 8px; padding: .5rem; min-height: 60vh; }
.column.drop-target { outline: 2px dashed #4b6bfb; }
.column h2 { font-size: .95rem; margin: .25rem .25rem .5rem; text-transform: uppercase; letter-spacing: .03em; color: #4a5568; }
.cards { display: flex; flex-direction: column; gap: .5rem; min-height: 2rem; }
.card { background: #fff; border-radius: 6px; padding: .5rem .6rem; box-shadow: 0 1px 2px rgba(0,0,0,.12); cursor: grab; }
.card.dragging { opacity: .5; }
.card .title { font-weight: 600; word-break: break-word; }
.card .meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; font-size: .8rem; }
.assignee { background: #eef2ff; color: #3341a8; padding: 0 .4rem; border-radius: 4px; }
.badge { padding: 0 .4rem; border-radius: 4px; }
.wake-pending { background: #fff4d6; color: #8a5a00; }
.wake-failed { background: #ffe0e0; color: #a11; }
.wake-delivered { background: #dff5e3; color: #1b6b2f; }
dialog { border: none; border-radius: 8px; padding: 1rem 1.25rem; width: min(520px, 92vw); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h2 { margin-top: 0; font-size: 1.1rem; }
dialog label { display: block; margin-bottom: .6rem; }
dialog input, dialog textarea, dialog select { display: block; width: 100%; font: inherit; padding: .35rem; margin-top: .2rem; }
dialog menu { display: flex; justify-content: flex-end; gap: .5rem; padding: 0; margin: .5rem 0 0; }
@media (max-width: 800px) { .columns { grid-template-columns: repeat(4, 80vw); } }
.login-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.12); padding: 1.5rem; width: min(380px, 92vw); }
.login-card h1 { margin-top: 0; font-size: 1.3rem; }
.login-card h2 { font-size: 1rem; }
.login-card label { display: block; margin-bottom: .75rem; }
.login-card input { display: block; width: 100%; font: inherit; padding: .5rem; margin-top: .25rem; }
.login-card button { display: block; width: 100%; font: inherit; padding: .6rem; margin-top: .5rem; border-radius: 6px; border: none; background: #4b6bfb; color: #fff; cursor: pointer; }
.login-card button.secondary { background: #1d2433; }
#login-status.error { color: #a11; }
.whoami { color: #c9d3ea; font-size: .85rem; }