:root{color-scheme:dark;--bg:#08080c;--surface:rgba(255,255,255,0.04);--border:rgba(255,255,255,0.09);--border-hi:rgba(255,255,255,0.16);--text:#f2f2f7;--text-dim:#a2a2b4;--text-faint:#6e6e80;--violet:#a78bfa;--cyan:#38bdf8;--amber:#fbbf24;--rose:#fb7185;--lime:#a3e635;--slate:#94a3b8;--radius:14px;--radius-sm:10px;--ease:cubic-bezier(0.22,1,0.36,1)}[data-accent=violet]{--accent:var(--violet)}[data-accent=cyan]{--accent:var(--cyan)}[data-accent=amber]{--accent:var(--amber)}[data-accent=rose]{--accent:var(--rose)}[data-accent=lime]{--accent:var(--lime)}[data-accent=slate]{--accent:var(--slate)}*{box-sizing:border-box}body,html{margin:0;height:100%;background:var(--bg);color:var(--text);font:400 14px/1.5 ui-sans-serif,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(38rem 38rem at 12% 8%,rgba(167,139,250,.14),transparent 60%),radial-gradient(32rem 32rem at 88% 12%,rgba(56,189,248,.11),transparent 60%)}.app{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--border);background:rgba(8,8,12,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:baseline;gap:9px;font-size:17px;font-weight:680}.brand .mark{font-size:19px}.brand .name{background:linear-gradient(96deg,var(--violet),var(--cyan) 55%,var(--rose));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.board-title{margin-left:6px;font-size:14px;color:var(--text-dim)}.badge{margin-left:auto;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint);border:1px solid var(--border)}.board{flex:1 1 auto;display:flex;align-items:flex-start;gap:16px;padding:22px;overflow-x:auto}.column{flex:0 0 280px;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}.column-head{display:flex;align-items:center;gap:8px;padding:12px 13px;border-bottom:1px solid var(--border);font-weight:620;font-size:13px}.column-head .swatch{width:8px;height:8px;border-radius:3px;flex:none;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}.column-head .count{margin-left:auto;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:650;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}.card-list{padding:9px;display:flex;flex-direction:column;gap:8px;min-height:30px}.card{padding:10px 11px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#14141d}.card-title{margin:0;font-size:13px;font-weight:520}.card-notes{margin:5px 0 0;font-size:12px;color:var(--text-dim);white-space:pre-wrap}.card-meta{margin-top:8px;display:flex;gap:6px}.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:600;border:1px solid var(--border);color:var(--text-dim);background:var(--surface)}.chip.pri-high{color:var(--rose);border-color:rgba(251,113,133,.35)}.empty-note{padding:20px;font-size:12.5px;color:var(--text-faint);text-align:center}.badge-live{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 14%,transparent);text-transform:none;letter-spacing:0}.presence{align-items:center;gap:10px;margin-left:12px}.avatars,.presence{display:flex}.avatar{width:26px;height:26px;margin-left:-7px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.03em;color:#08080c;border:2px solid var(--bg);background:hsl(var(--hue) 72% 66%)}.avatar:first-child{margin-left:0}.avatar.self{box-shadow:0 0 0 2px var(--violet)}.card{cursor:grab;transition:border-color .16s,transform .16s var(--ease)}.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.card.dragging{opacity:.35;cursor:grabbing}.reactions{display:flex;align-items:center;gap:5px;margin-top:9px;flex-wrap:wrap}.reaction{display:inline-flex;align-items:center;gap:4px;padding:2.5px 8px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:12px}.reaction.mine{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 16%,transparent)}.reaction .n{font-size:10.5px;font-weight:700;color:var(--text-dim)}.reaction.mine .n{color:var(--accent)}.add-reaction{width:24px;height:22px;border-radius:999px;border:1px dashed var(--border-hi);color:var(--text-faint);font-size:11px;opacity:0;transition:opacity .16s,color .16s,border-color .16s}.card:focus-within .add-reaction,.card:hover .add-reaction{opacity:1}.add-reaction:hover{color:var(--text);border-color:var(--text-dim)}.icon-btn{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;font-size:11px;color:var(--text-faint);background:rgba(20,20,29,.9);margin-top:8px}.icon-btn:hover{background:var(--surface-hi,var(--surface));color:var(--text)}.icon-btn.danger:hover{color:var(--rose)}.add-card{display:flex;margin:0 9px 9px;padding:8px 10px;border-radius:var(--radius-sm);border:1px dashed var(--border-hi)}.add-card input{flex:1 1 auto;min-width:0;background:transparent;border:none;color:var(--text);font-size:12.5px}.add-card input:focus{outline:none}.add-card input::placeholder{color:var(--text-faint)}.statusbar{display:flex;justify-content:flex-end;padding:8px 16px;border-top:1px solid var(--border)}.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-faint)}.live-dot i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2.2s ease-out infinite}.live-dot.off i{background:var(--text-faint);animation:none}@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}to{box-shadow:0 0 0 0 rgba(52,211,153,0)}}.center-state{flex:1 1 auto;display:grid;place-items:center;padding:40px;text-align:center;color:var(--text-dim)}@media (max-width:560px){.board{padding:14px;gap:12px}.column{flex-basis:84vw}}