:root{--ink:#1b1a22;--paper:#fffdf8;--list:#efece4;--accent:#ff5a36}
*{box-sizing:border-box}
html,body,#root{height:100%;margin:0}
body{font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);overflow:hidden}
.mono{font-family:'JetBrains Mono',monospace}
.board-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
.board-scroll::-webkit-scrollbar{height:10px}
.board-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:9px}
.list-col{width:272px;flex:0 0 272px;scroll-snap-align:start;max-height:100%;display:flex;flex-direction:column;background:var(--list);border-radius:12px;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.cards-area{overflow-y:auto;min-height:12px}
.card{background:var(--paper);border-radius:8px;box-shadow:0 1px 0 rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s,opacity .2s;cursor:pointer}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.14)}
.card.dragging{transform:rotate(3deg);opacity:.5}
.card.faded{opacity:.25}
.ghost{height:38px;border-radius:8px;background:rgba(0,0,0,.12);border:2px dashed rgba(0,0,0,.2);margin:0 0 8px}
.modal-in{animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.drawer-in{animation:slide .2s ease-out}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
.list-enter{animation:rise .4s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.confetti{position:fixed;width:8px;height:12px;top:40%;left:50%;pointer-events:none;z-index:100;animation:boom 1.2s ease-out forwards}
@keyframes boom{to{transform:translate(var(--x),var(--y)) rotate(720deg);opacity:0}}
.frost{background:rgba(15,12,25,.45);backdrop-filter:blur(10px)}
@media (max-width:640px){.board-scroll{scroll-snap-type:x mandatory}.list-col{width:86vw;flex-basis:86vw}}