*{box-sizing:border-box}
body{margin:0;font:14px/1.4 system-ui,Segoe UI,sans-serif;background:var(--board-color,#0079bf);color:#172b4d;height:100vh;height:100dvh;display:flex;flex-direction:column}
.topbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:rgba(0,0,0,.3);color:var(--bar-ink,#fff)}
.notice{background:#c9372c;color:#fff;padding:8px 12px;font-weight:600}
.logo{font-size:18px;margin-right:8px}
.spacer{flex:1}
button,select,input,textarea{font:inherit}
button{border:0;border-radius:4px;padding:6px 10px;background:rgba(255,255,255,.25);color:inherit;cursor:pointer}
button:hover{background:rgba(255,255,255,.4)}
select{padding:6px;border-radius:4px;border:0;max-width:220px}
.board{flex:1;display:flex;gap:10px;align-items:flex-start;padding:12px;overflow-x:auto}
.column{flex:0 0 272px;background:#ebecf0;border-radius:6px;padding:8px;max-height:100%;display:flex;flex-direction:column}
.column.dragging,.card.dragging{opacity:.4}
.col-head{display:flex;align-items:center;gap:4px;padding:2px 4px 8px;cursor:grab}
.col-head h3{margin:0;flex:1;font-size:15px;overflow-wrap:anywhere}
.icon{background:none;padding:2px 6px;color:#5e6c84}
.icon:hover{background:#dcdfe4}
.cards{overflow-y:auto;min-height:12px;display:flex;flex-direction:column;gap:6px}
.card{background:#fff;color:#172b4d;border-radius:4px;padding:8px;box-shadow:0 1px 0 rgba(9,30,66,.25);cursor:pointer}
.card:hover{background:#f4f5f7}
.card:focus-visible{outline:2px solid #0079bf;outline-offset:2px}
.card h4{margin:0;font-size:14px;overflow-wrap:anywhere}
.card p{margin:4px 0 0;color:#5e6c84;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:3.6em;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.chip{background:var(--bg,#5e6c84);color:var(--fg,#fff);border-radius:3px;padding:1px 8px;font-size:11px;font-weight:600}
.add{margin-top:6px;background:none;color:#5e6c84;text-align:left}
.add:hover{background:#dcdfe4}
.add-col{flex:0 0 272px;background:rgba(255,255,255,.24);color:var(--board-ink,#fff);padding:10px}
dialog{border:0;border-radius:8px;padding:0;width:min(440px,92vw);box-shadow:0 8px 30px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(0,0,0,.5)}
#dlgForm{padding:16px;display:flex;flex-direction:column;gap:10px}
#dlgForm h2{margin:0;font-size:18px}
#dlgForm label{display:flex;flex-direction:column;gap:4px;font-weight:600}
.form-error{margin:0;color:#c9372c;font-weight:600}
#dlgForm input[type=text],#dlgForm input[type=password],#dlgForm textarea,#dlgForm select{padding:7px;border:1px solid #c1c7d0;border-radius:4px;font-weight:400}
#dlgForm textarea{min-height:110px;resize:vertical}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.actions .spacer{flex:1}
dialog button{background:#e4e6ea}
dialog button:hover{background:#d3d6db}
dialog button.primary{background:#0079bf;color:#fff}
dialog button.danger,.topbar .danger:hover{background:#c9372c;color:#fff}
.lbl-list{display:flex;flex-direction:column;gap:6px}
.lbl-row{display:flex;gap:6px;align-items:center}
.lbl-row input[type=text]{flex:1}
.lbl-row input[type=color]{width:38px;height:32px;padding:0;border:0;background:none}
.pick{display:flex;align-items:center;gap:8px;font-weight:400!important;flex-direction:row!important}
.pick .chip{flex:1;padding:5px 8px}
#dlgForm input[type=color]{width:48px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.color-row{display:flex;align-items:center;gap:10px}
.column.colored{background:var(--bg);color:var(--fg)}
.column.colored>.col-head .icon,.column.colored>.add{color:inherit;opacity:.85}
.column.colored>.col-head .icon:hover,.column.colored>.add:hover{background:rgba(0,0,0,.12);opacity:1}
.card.colored{background:var(--bg);color:var(--fg)}
.card.colored:hover{background:var(--bg);filter:brightness(.95)}
.card.colored p{color:inherit;opacity:.8}