*{box-sizing:border-box}
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#667085;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --border:#e5e7eb;
  --accent:#2563eb;
  --danger:#dc2626;
  --todo:#f97316;
  --doing:#f59e0b;
  --done:#10b981;
}
html,body{height:100%}
body{
  margin:0;
  background:var(--surface-2);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.app-header,.app-footer{
  padding:16px 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.app-footer{border-top:1px solid var(--border);}
.app-header h1{margin:0 0 8px 0;font-size:20px;font-weight:700}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.controls input,.controls select,.controls button{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  padding:8px 10px;border-radius:10px
}
.controls button{cursor:pointer}
.controls button:hover{border-color:var(--accent); color:var(--accent)}
.board{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  padding:16px;
}
.column{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  display:flex;flex-direction:column;min-height:60vh
}
.column header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--border)
}
.column h2{margin:0;font-size:16px;font-weight:600}
.counter{
  font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
  padding:2px 8px;border-radius:999px
}
.dropzone{padding:12px;display:flex;flex-direction:column;gap:12px}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;display:flex;flex-direction:column;gap:8px;
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
  position:relative;
}
.card::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:12px 0 0 12px;background:#cbd5e1;
}
.card[data-project-color]::before{background:attr(data-project-color color);}
.card.dragging{opacity:.6;outline:2px dashed var(--accent)}
.card .title{font-weight:600}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.badge{padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2)}
.badge.project{}
.badge.priority-high{border-color:#fecaca;background:#fee2e2}
.badge.priority-medium{border-color:#fde68a;background:#fef3c7}
.badge.priority-low{border-color:#bbf7d0;background:#dcfce7}
.assignee{display:inline-flex;align-items:center;gap:6px}
.avatar{width:22px;height:22px;border-radius:999px;display:inline-grid;place-content:center;font-size:11px;
  border:1px solid var(--border);background:#f1f5f9;color:var(--text)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;color:var(--muted);border:1px dashed var(--border);padding:2px 6px;border-radius:8px}
.dropzone.hover{outline:2px dashed var(--accent);outline-offset:4px}
dialog{border:none;border-radius:12px;padding:0;max-width:520px;width:90%}
dialog::backdrop{background:rgba(0,0,0,.5)}
#taskForm,#projectForm{padding:16px;display:flex;flex-direction:column;gap:10px;background:#fff;color:var(--text)}
#taskForm input,#taskForm select,#taskForm textarea,
#projectForm input,#projectForm select{background:#fff;color:var(--text);border:1px solid var(--border);padding:8px;border-radius:10px}
menu{display:flex;gap:10px;justify-content:flex-end;margin:0;padding-top:8px}
button.danger{border:1px solid rgba(220,38,38,.4);color:#b91c1c;background:#fff}
.icon-btn{
  background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:2px 8px;font-size:12px;color:var(--muted);cursor:pointer
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.card .delete-task-btn{position:absolute;top:8px;right:8px}
.project-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.project-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.project-item{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px 10px}
.project-meta{display:flex;align-items:center;gap:10px}
.project-chip{width:14px;height:14px;border-radius:4px;border:1px solid var(--border)}
.project-name{font-weight:600}
.muted{color:var(--muted);font-size:12px;margin-top:8px}
.project-controls{display:flex;gap:8px}
.column[data-status="todo"] header h2{color:var(--todo)}
.column[data-status="doing"] header h2{color:var(--doing)}
.column[data-status="done"] header h2{color:var(--done)}
@media (max-width: 900px){.board{grid-template-columns:1fr} .controls{gap:8px}}