.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.board { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; scroll-snap-type: x proximity; }
.lane {
  --lane: var(--text-3);
  background: var(--surface-2); border-radius: var(--r-lg); padding: 12px; min-height: 260px; display: grid; gap: 10px; align-content: start;
  border: 1.5px dashed transparent; scroll-snap-align: start; transition: background .15s, border-color .15s;
}
.lane-want { --lane: var(--slice-4); }
.lane-doing { --lane: var(--primary); }
.lane-paused { --lane: var(--slice-2); }
.lane-done { --lane: var(--success); }
.lane-dropped { --lane: var(--text-3); }
.lane.is-over { border-color: var(--lane); background: color-mix(in srgb, var(--lane) 8%, var(--surface-2)); }
.lane header { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; }
.lane h2 { font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.lane h2::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--lane); }
.lane header .muted { font-size: .8rem; font-weight: 600; background: var(--surface); padding: 1px 8px; border-radius: var(--r-pill); }
.lane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 40px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: grab; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.card:hover { box-shadow: var(--shadow-md); }
.card.is-dragging { opacity: .4; transform: rotate(-1.5deg); }
.card.drop-before { box-shadow: 0 -3px 0 var(--primary); }
.card-btn { all: unset; box-sizing: border-box; display: flex; gap: 10px; padding: 10px; width: 100%; cursor: pointer; border-radius: var(--r-md); }
.card-btn:focus-visible { box-shadow: var(--ring); }
.card-text { display: grid; gap: 3px; min-width: 0; font-size: .875rem; }
.card-text strong { font-weight: 600; overflow-wrap: anywhere; }
.progress { display: block; height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--slice-1)); border-radius: 99px; }
@media (max-width: 760px) { .board { grid-template-columns: repeat(5, 78vw); } }