/* ============================================================
   MIRA v2 — Kanban (Zadania)
   ============================================================ */
.btn.sm { padding: 7px 13px; font-size: 13px; }

.mira-add { padding-left: 8px; white-space: nowrap; }
.mira-add-orb { width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.mira-add.busy { opacity: 0.9; }

.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16px * var(--space)); align-items: start; }
@media (max-width: 1000px) { .kanban { grid-template-columns: 1fr; } }

.kan-col { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 13px; display: flex; flex-direction: column; min-height: 220px;
  transition: background .18s, border-color .18s, box-shadow .18s; }
.kan-col.over { background: var(--accent-soft); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent); }

.kan-col-head { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; }
.kan-col-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kan-col-dot.d-todo { background: var(--ink-4); }
.kan-col-dot.d-doing { background: var(--accent); }
.kan-col-dot.d-done { background: var(--up); }
.kan-col-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.kan-col-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line); min-width: 22px; height: 20px;
  display: grid; place-items: center; border-radius: 99px; padding: 0 6px; }

.kan-col-body { display: flex; flex-direction: column; gap: 9px; flex: 1; }

.kan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 13px; box-shadow: var(--shadow-sm); cursor: grab;
  transition: transform .16s var(--ease), box-shadow .16s, border-color .16s;
  animation: riseIn .35s var(--ease-out) both; }
.kan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--accent); }
.kan-card:active { cursor: grabbing; }
.kan-card.fresh { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }

.kan-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.kan-prio { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kan-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft); padding: 2px 8px; border-radius: 99px; }
.kan-by { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  color: var(--ink-3); }
.kan-by-mira { color: var(--accent-ink); }
.kan-by-orb { width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #fff, var(--p-400) 50%, var(--p-600));
  box-shadow: 0 0 6px oklch(0.6 0.16 300 / 0.4); }

.kan-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }

.kan-card-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.kan-move { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500;
  white-space: nowrap; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line-soft);
  padding: 4px 9px; border-radius: 99px; transition: all .15s; }
.kan-move:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }

.kan-empty { display: grid; place-items: center; padding: 22px; border: 1.5px dashed var(--line);
  border-radius: var(--r-md); font-size: 13px; color: var(--ink-4); }

.kan-add { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 9px; white-space: nowrap;
  padding: 10px; border-radius: var(--r-sm); color: var(--ink-3); font-size: 13.5px; font-weight: 500;
  border: 1px dashed transparent; transition: all .15s; }
.kan-add:hover { color: var(--accent); background: var(--surface); border-color: var(--line); }

.kan-add-form { margin-top: 9px; background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--r-md); padding: 10px; box-shadow: 0 0 0 3px var(--accent-soft); }
.kan-add-form textarea { width: 100%; border: none; outline: none; resize: none; background: transparent;
  font-size: 14px; line-height: 1.4; color: var(--ink); min-height: 48px; }
.kan-add-form textarea::placeholder { color: var(--ink-4); }
.kan-add-actions { display: flex; gap: 7px; margin-top: 8px; }