agent-tasks 1.6.0 → 1.6.2

package/dist/ui/styles.css

@@ -1,2435 +0,0 @@
-/* =============================================================================
-   agent-tasks — Pipeline dashboard styles
-   Complete UI overhaul: side panel, rich cards, animations, inline editing,
-   responsive design, enhanced color system, drag polish.
-   ============================================================================= */
-
-/* --------------------------------------------------------------------------
-   Theme tokens
-   -------------------------------------------------------------------------- */
-
-:root {
-  --bg: #ffffff;
-  --bg-surface: #f5f7f9;
-  --bg-elevated: #edf0f4;
-  --bg-hover: #e4e8ed;
-  --bg-inset: #dde3e9;
-  --border: #c8d1da;
-  --border-light: #dde3e9;
-  --text: #1c2a33;
-  --text-secondary: #3d5263;
-  --text-muted: #5a6b78;
-  --text-dim: #8895a0;
-  --accent: #5d8da8;
-  --accent-hover: #4e7a93;
-  --accent-dim: rgba(93, 141, 168, 0.15);
-  --accent-solid: #243742;
-  --accent-glow: rgba(93, 141, 168, 0.35);
-
-  --green: #1a7f37;
-  --green-dim: rgba(26, 127, 55, 0.12);
-  --yellow: #9a6700;
-  --yellow-dim: rgba(154, 103, 0, 0.12);
-  --orange: #bc4c00;
-  --orange-dim: rgba(188, 76, 0, 0.12);
-  --red: #cf222e;
-  --red-dim: rgba(207, 34, 46, 0.12);
-  --purple: #6e78a8;
-  --purple-dim: rgba(110, 120, 168, 0.12);
-  --blue: #0969da;
-  --blue-dim: rgba(9, 105, 218, 0.12);
-  --indigo: #5856d6;
-  --indigo-dim: rgba(88, 86, 214, 0.12);
-  --amber: #9a6700;
-  --amber-dim: rgba(154, 103, 0, 0.12);
-  --gray: #5a6b78;
-  --gray-dim: rgba(90, 107, 120, 0.12);
-
-  --stage-backlog: #5a6b78;
-  --stage-spec: #0969da;
-  --stage-plan: #5856d6;
-  --stage-implement: #6e78a8;
-  --stage-test: #bc4c00;
-  --stage-review: #9a6700;
-  --stage-done: #1a7f37;
-  --stage-cancelled: #cf222e;
-
-  --radius: 12px;
-  --radius-sm: 8px;
-  --radius-lg: 16px;
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
-  --column-min: 240px;
-  --column-max: 320px;
-  --panel-width: 480px;
-
-  --shadow-0: none;
-  --shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-  --shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-  --shadow-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
-  --shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 12px 4px rgba(0, 0, 0, 0.15);
-  --focus-ring: rgba(93, 141, 168, 0.35);
-  --shadow-drag: 0px 4px 8px 0px rgba(0, 0, 0, 0.3), 0px 12px 32px 6px rgba(0, 0, 0, 0.25);
-  --shadow-panel: -2px 0px 8px 0px rgba(0, 0, 0, 0.3), -4px 0px 16px 2px rgba(0, 0, 0, 0.15);
-
-  --transition-fast: 0.15s ease;
-  --transition-normal: 0.2s ease;
-  --transition-slow: 0.3s ease;
-}
-
-[data-theme='dark'] {
-  --bg: #192028;
-  --bg-surface: #1e2830;
-  --bg-elevated: #243742;
-  --bg-hover: #2c414e;
-  --bg-inset: #151c24;
-  --border: #344956;
-  --border-light: #2a3a46;
-  --text: #e2e9ef;
-  --text-secondary: #b8c0cc;
-  --text-muted: #8fa3b0;
-  --text-dim: #5f7885;
-  --accent: #5d8da8;
-  --accent-hover: #7db5d2;
-  --accent-dim: rgba(93, 141, 168, 0.2);
-  --accent-solid: #4a7a96;
-  --accent-glow: rgba(93, 141, 168, 0.4);
-
-  --green: #3fb950;
-  --green-dim: rgba(63, 185, 80, 0.15);
-  --yellow: #e3b341;
-  --yellow-dim: rgba(227, 179, 65, 0.15);
-  --orange: #f0883e;
-  --orange-dim: rgba(240, 136, 62, 0.15);
-  --red: #f85149;
-  --red-dim: rgba(248, 81, 73, 0.15);
-  --purple: #8e9ad0;
-  --purple-dim: rgba(142, 154, 208, 0.15);
-  --blue: #58a6ff;
-  --blue-dim: rgba(88, 166, 255, 0.15);
-  --indigo: #818cf8;
-  --indigo-dim: rgba(129, 140, 248, 0.15);
-  --amber: #f59e0b;
-  --amber-dim: rgba(245, 158, 11, 0.15);
-  --gray: #8b949e;
-  --gray-dim: rgba(139, 148, 158, 0.15);
-
-  --stage-backlog: #8b949e;
-  --stage-spec: #58a6ff;
-  --stage-plan: #818cf8;
-  --stage-implement: #8b5cf6;
-  --stage-test: #f0883e;
-  --stage-review: #f59e0b;
-  --stage-done: #3fb950;
-  --stage-cancelled: #f85149;
-
-  --shadow-0: none;
-  --shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-  --shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-  --shadow-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
-  --shadow-hover: 0px 2px 4px 0px rgba(0, 0, 0, 0.35), 0px 6px 16px 4px rgba(0, 0, 0, 0.25);
-  --focus-ring: rgba(93, 141, 168, 0.4);
-  --shadow-drag: 0px 4px 8px 0px rgba(0, 0, 0, 0.5), 0px 12px 32px 6px rgba(0, 0, 0, 0.4);
-  --shadow-panel: -2px 0px 8px 0px rgba(0, 0, 0, 0.5), -4px 0px 16px 2px rgba(0, 0, 0, 0.3);
-}
-
-/* --------------------------------------------------------------------------
-   Reset & Base
-   -------------------------------------------------------------------------- */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  height: 100%;
-  overflow: hidden;
-}
-
-.material-symbols-outlined {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 400,
-    'GRAD' 0,
-    'opsz' 24;
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--bg);
-  color: var(--text);
-  font-size: 14px;
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  transition:
-    background var(--transition-normal),
-    color var(--transition-normal);
-}
-
-/* --------------------------------------------------------------------------
-   Header
-   -------------------------------------------------------------------------- */
-
-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  gap: 16px;
-  transition:
-    background var(--transition-normal),
-    border-color var(--transition-normal);
-  z-index: 20;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.brand-icon {
-  font-size: 24px;
-  color: var(--accent);
-  transition: color var(--transition-normal);
-}
-
-.header-left h1 {
-  font-size: 17px;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  color: var(--accent-solid);
-  letter-spacing: -0.3px;
-}
-
-.version {
-  font-size: 11px;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.stats {
-  display: flex;
-  gap: 16px;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.stats .stat {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.stats .stat-value {
-  font-weight: 600;
-  color: var(--text);
-  transition: transform 0.2s ease;
-}
-.stats .stat-value.pulse {
-  animation: countPulse 0.3s ease;
-}
-
-@keyframes countPulse {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.3);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-.status-badge {
-  font-size: 11px;
-  padding: 2px 10px;
-  border-radius: var(--radius);
-  font-weight: 500;
-  font-family: var(--font-mono);
-  transition:
-    background var(--transition-fast),
-    color var(--transition-fast);
-}
-.status-badge.connected {
-  background: var(--green-dim);
-  color: var(--green);
-}
-.status-badge.disconnected {
-  background: var(--red-dim);
-  color: var(--red);
-}
-.status-badge.connecting {
-  background: var(--yellow-dim);
-  color: var(--yellow);
-}
-
-.icon-btn {
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  padding: 5px 8px;
-  color: var(--text-muted);
-  font-size: 14px;
-  line-height: 1;
-  transition: all var(--transition-fast);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.icon-btn .material-symbols-outlined {
-  font-size: 18px;
-}
-.icon-btn:hover {
-  background: var(--bg-hover);
-  border-color: var(--accent);
-  color: var(--text);
-}
-.icon-btn:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-
-/* --------------------------------------------------------------------------
-   Filter Bar
-   -------------------------------------------------------------------------- */
-
-.filter-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 6px 16px;
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  transition:
-    background var(--transition-normal),
-    border-color var(--transition-normal);
-}
-
-.filter-group {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.filter-icon {
-  font-size: 18px;
-  color: var(--text-dim);
-}
-
-.filter-input {
-  flex: 1;
-  max-width: 280px;
-  padding: 5px 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-elevated);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: 12px;
-  outline: none;
-  transition:
-    border-color var(--transition-fast),
-    box-shadow var(--transition-fast);
-}
-.filter-input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--focus-ring);
-}
-.filter-input::placeholder {
-  color: var(--text-dim);
-}
-
-.filter-select {
-  padding: 5px 8px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-elevated);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: 12px;
-  cursor: pointer;
-  outline: none;
-  transition: border-color var(--transition-fast);
-}
-.filter-select:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--focus-ring);
-}
-
-.filter-chips {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-  min-height: 0;
-}
-.filter-chips:empty {
-  display: none;
-}
-
-.filter-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  border-radius: var(--radius);
-  background: var(--accent);
-  color: #fff;
-  font-size: 11px;
-  font-weight: 500;
-  font-family: var(--font-mono);
-}
-.filter-chip button {
-  background: none;
-  border: none;
-  color: rgba(255, 255, 255, 0.7);
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  padding: 0 2px;
-}
-.filter-chip button:hover {
-  color: #fff;
-}
-
-/* --------------------------------------------------------------------------
-   Loading Overlay
-   -------------------------------------------------------------------------- */
-
-.loading-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--bg);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  z-index: 300;
-  transition: opacity 0.3s ease;
-}
-
-.loading-overlay.hidden {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.loading-text {
-  font-size: 13px;
-  color: var(--text-muted);
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Panel Loading / Skeleton
-   -------------------------------------------------------------------------- */
-
-.panel-loading {
-  padding: 12px 0;
-}
-
-.skeleton-line {
-  height: 12px;
-  background: var(--bg-hover);
-  border-radius: 6px;
-  margin-bottom: 8px;
-  animation: skeleton-pulse 1.2s ease-in-out infinite;
-}
-
-.skeleton-line:nth-child(2) {
-  width: 85%;
-}
-
-.skeleton-line:nth-child(3) {
-  width: 70%;
-}
-
-.skeleton-line.skeleton-wide {
-  height: 16px;
-  width: 60%;
-  margin-bottom: 12px;
-}
-
-.skeleton-line.skeleton-short {
-  width: 40%;
-}
-
-@keyframes skeleton-pulse {
-  0%,
-  100% {
-    opacity: 0.4;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Board Layout (with side panel support)
-   -------------------------------------------------------------------------- */
-
-.board-wrapper {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  transition: all var(--transition-slow);
-}
-
-.kanban-board {
-  display: flex;
-  gap: 8px;
-  padding: 12px;
-  flex: 1;
-  overflow-x: auto;
-  overflow-y: hidden;
-  align-items: flex-start;
-  transition: all var(--transition-slow);
-  position: relative;
-}
-
-.board-wrapper.panel-open .kanban-board {
-  flex: 1;
-  min-width: 0;
-}
-
-/* --------------------------------------------------------------------------
-   Kanban Columns
-   -------------------------------------------------------------------------- */
-
-.kanban-column {
-  min-width: var(--column-min);
-  max-width: var(--column-max);
-  flex: 1;
-  background: var(--bg-surface);
-  border-radius: var(--radius);
-  border: none;
-  box-shadow: var(--shadow-1);
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  transition:
-    background var(--transition-normal),
-    box-shadow var(--transition-normal),
-    max-width var(--transition-normal);
-  position: relative;
-  overflow: hidden;
-}
-
-.kanban-column::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: var(--column-accent, var(--gray));
-  opacity: 0.6;
-  transition: opacity var(--transition-fast);
-}
-
-.kanban-column:hover {
-  box-shadow: var(--shadow-2);
-}
-
-.kanban-column:hover::before {
-  opacity: 1;
-}
-
-.kanban-column[data-stage='backlog'] {
-  --column-accent: var(--stage-backlog);
-}
-.kanban-column[data-stage='spec'] {
-  --column-accent: var(--stage-spec);
-}
-.kanban-column[data-stage='plan'] {
-  --column-accent: var(--stage-plan);
-}
-.kanban-column[data-stage='implement'] {
-  --column-accent: var(--stage-implement);
-}
-.kanban-column[data-stage='test'] {
-  --column-accent: var(--stage-test);
-}
-.kanban-column[data-stage='review'] {
-  --column-accent: var(--stage-review);
-}
-.kanban-column[data-stage='done'] {
-  --column-accent: var(--stage-done);
-}
-.kanban-column[data-stage='cancelled'] {
-  --column-accent: var(--stage-cancelled);
-}
-
-.kanban-column.collapsed {
-  min-width: 48px;
-  max-width: 48px;
-  cursor: pointer;
-  transition:
-    min-width var(--transition-slow),
-    max-width var(--transition-slow),
-    background var(--transition-normal),
-    box-shadow var(--transition-normal);
-}
-
-.kanban-column.collapsed .column-body,
-.kanban-column.collapsed .column-add-btn {
-  display: none;
-}
-
-.kanban-column.collapsed .column-header {
-  writing-mode: vertical-lr;
-  text-orientation: mixed;
-  padding: 12px 8px;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-}
-
-.kanban-column.collapsed .column-header h3 {
-  white-space: nowrap;
-}
-
-.column-header {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border-light);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  cursor: pointer;
-  user-select: none;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  background: var(--bg-surface);
-  border-radius: var(--radius) var(--radius) 0 0;
-  transition: background var(--transition-fast);
-}
-
-.column-header:hover {
-  background: var(--bg-hover);
-}
-
-.column-header-left {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.column-header-left .material-symbols-outlined {
-  font-size: 16px;
-  color: var(--column-accent, var(--text-muted));
-  opacity: 0.8;
-}
-
-.column-header h3 {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-}
-
-.column-count {
-  font-size: 11px;
-  font-weight: 600;
-  background: var(--bg-hover);
-  color: var(--text-muted);
-  padding: 2px 8px;
-  border-radius: var(--radius);
-  min-width: 20px;
-  text-align: center;
-  transition:
-    transform 0.2s ease,
-    background var(--transition-fast),
-    color var(--transition-fast);
-}
-
-.column-count.pulse {
-  animation: countPulse 0.3s ease;
-}
-
-.column-count.wip-warning {
-  background: var(--orange-dim);
-  color: var(--orange);
-}
-
-.column-count.wip-danger {
-  background: var(--red-dim);
-  color: var(--red);
-}
-
-.column-body {
-  padding: 6px 8px;
-  overflow-y: auto;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-height: 40px;
-}
-
-/* --------------------------------------------------------------------------
-   Empty States
-   -------------------------------------------------------------------------- */
-
-.column-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 24px 12px;
-  color: var(--text-dim);
-  text-align: center;
-  gap: 6px;
-}
-
-.column-empty .material-symbols-outlined {
-  font-size: 28px;
-  opacity: 0.4;
-}
-
-.column-empty .empty-text {
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.column-empty .empty-cta {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--accent);
-  cursor: pointer;
-  margin-top: 6px;
-  padding: 6px 12px;
-  background: var(--accent-dim);
-  border-radius: var(--radius-sm);
-  font-weight: 500;
-  opacity: 1;
-  transition: all var(--transition-fast);
-}
-.column-empty .empty-cta .material-symbols-outlined {
-  font-size: 16px;
-  opacity: 1;
-}
-.column-empty .empty-cta:hover {
-  background: var(--accent);
-  color: #fff;
-  text-decoration: none;
-}
-
-.board-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  gap: 16px;
-  color: var(--text-dim);
-  padding: 60px 20px;
-}
-.board-empty .material-symbols-outlined {
-  font-size: 56px;
-  opacity: 0.4;
-  color: var(--accent);
-}
-.board-empty h3 {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-muted);
-}
-.board-empty p {
-  font-size: 13px;
-  max-width: 400px;
-  text-align: center;
-  line-height: 1.6;
-  color: var(--text-muted);
-}
-.board-empty .empty-steps {
-  display: flex;
-  gap: 24px;
-  margin-top: 8px;
-}
-.board-empty .empty-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  max-width: 140px;
-  text-align: center;
-}
-.board-empty .empty-step .material-symbols-outlined {
-  font-size: 32px;
-  opacity: 0.6;
-}
-.board-empty .empty-step span {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-/* --------------------------------------------------------------------------
-   Task Cards
-   -------------------------------------------------------------------------- */
-
-.task-card {
-  background: var(--bg-elevated);
-  border: 1px solid transparent;
-  border-radius: var(--radius);
-  padding: 10px 12px;
-  cursor: pointer;
-  position: relative;
-  box-shadow: var(--shadow-1);
-  transition:
-    border-color var(--transition-fast),
-    box-shadow var(--transition-fast),
-    transform var(--transition-fast),
-    opacity var(--transition-fast);
-}
-
-.task-card:hover {
-  box-shadow:
-    0 0 0 1px var(--accent-dim),
-    var(--shadow-hover);
-  transform: translateY(-2px);
-}
-
-.task-card:active {
-  transform: translateY(0);
-}
-
-.task-card.active-card {
-  border-color: var(--accent);
-  box-shadow:
-    0 0 0 2px var(--focus-ring),
-    var(--shadow-2);
-  background: var(--bg-surface);
-}
-
-.task-card.no-anim {
-  animation: none !important;
-}
-
-.task-card-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 2px;
-}
-
-.task-card-id {
-  font-size: 11px;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-  flex-shrink: 0;
-}
-
-.task-card-time {
-  font-size: 10px;
-  color: var(--text-dim);
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.task-card-title {
-  font-size: 13px;
-  font-weight: 600;
-  margin: 2px 0 4px;
-  line-height: 1.35;
-  word-break: break-word;
-  color: var(--text);
-}
-
-.task-card-title[contenteditable='true'] {
-  outline: none;
-  border-bottom: 1px dashed var(--accent);
-  padding-bottom: 1px;
-  cursor: text;
-}
-
-.task-card-desc {
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-  line-height: 1.4;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.task-card-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 6px;
-}
-
-.task-card-meta {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: wrap;
-  flex: 1;
-  min-width: 0;
-}
-
-.task-card-assignee {
-  flex-shrink: 0;
-}
-
-.task-tag {
-  font-size: 10px;
-  padding: 2px 8px;
-  border-radius: var(--radius-sm);
-  font-weight: 500;
-  transition: opacity var(--transition-fast);
-  cursor: default;
-  white-space: nowrap;
-}
-
-.task-tag.clickable {
-  cursor: pointer;
-}
-.task-tag.clickable:hover {
-  opacity: 0.8;
-}
-
-.tag-project {
-  background: var(--accent-dim);
-  color: var(--accent);
-}
-.tag-assignee {
-  background: var(--purple-dim);
-  color: var(--purple);
-}
-.tag-priority {
-  background: var(--orange-dim);
-  color: var(--orange);
-}
-.tag-artifacts {
-  background: var(--blue-dim);
-  color: var(--blue);
-}
-.tag-blocked {
-  background: var(--red-dim);
-  color: var(--red);
-}
-.tag-comments {
-  background: var(--purple-dim);
-  color: var(--purple);
-}
-.tag-subtasks {
-  background: var(--green-dim);
-  color: var(--green);
-}
-
-/* ---- Stage-colored left border ---- */
-
-.task-card[data-stage='backlog'] {
-  border-left: 3px solid var(--stage-backlog);
-}
-.task-card[data-stage='spec'] {
-  border-left: 3px solid var(--stage-spec);
-}
-.task-card[data-stage='plan'] {
-  border-left: 3px solid var(--stage-plan);
-}
-.task-card[data-stage='implement'] {
-  border-left: 3px solid var(--stage-implement);
-}
-.task-card[data-stage='test'] {
-  border-left: 3px solid var(--stage-test);
-}
-.task-card[data-stage='review'] {
-  border-left: 3px solid var(--stage-review);
-}
-.task-card[data-stage='done'] {
-  border-left: 3px solid var(--stage-done);
-}
-.task-card[data-stage='cancelled'] {
-  border-left: 3px solid var(--stage-cancelled);
-}
-
-/* ---- Priority override for high-priority ---- */
-
-.task-card.priority-high {
-  border-left: 3px solid var(--red);
-}
-.task-card.priority-medium {
-  border-left: 3px solid var(--orange);
-}
-.task-card.status-cancelled .task-card-title {
-  text-decoration: line-through;
-  opacity: 0.7;
-}
-
-/* ---- Status indicator on cards ---- */
-
-.task-status-indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  margin-left: 4px;
-}
-.task-status-indicator .material-symbols-outlined {
-  font-size: 14px;
-  font-variation-settings:
-    'FILL' 1,
-    'wght' 400,
-    'GRAD' 0,
-    'opsz' 14;
-}
-.task-status-indicator.status-in_progress {
-  color: var(--blue);
-}
-.task-status-indicator.status-completed {
-  color: var(--green);
-}
-.task-status-indicator.status-failed {
-  color: var(--red);
-}
-.task-status-indicator.status-pending {
-  color: var(--gray);
-}
-.task-status-indicator.status-cancelled {
-  color: var(--text-dim);
-}
-
-/* ---- Collaborator overflow indicator ---- */
-
-.collab-overflow {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--bg-hover);
-  color: var(--text-muted);
-  font-size: 9px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1.5px solid var(--bg-surface);
-  margin-left: -4px;
-}
-
-/* ---- Staggered entrance animation ---- */
-
-@keyframes cardEnter {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.task-card.animate-in {
-  animation: cardEnter 0.3s ease both;
-}
-
-/* ---- Assignee avatar circle ---- */
-
-.avatar-circle {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  font-weight: 700;
-  color: #fff;
-  flex-shrink: 0;
-  text-transform: uppercase;
-  letter-spacing: -0.3px;
-}
-
-.avatar-circle.avatar-sm {
-  width: 18px;
-  height: 18px;
-  font-size: 8px;
-}
-
-.avatar-circle.avatar-lg {
-  width: 28px;
-  height: 28px;
-  font-size: 11px;
-}
-
-/* ---- Subtask progress bar ---- */
-
-.subtask-progress {
-  margin-top: 6px;
-  height: 3px;
-  background: var(--border-light);
-  border-radius: 2px;
-  overflow: hidden;
-}
-.subtask-progress-fill {
-  height: 100%;
-  background: var(--green);
-  border-radius: 2px;
-  transition: width 0.3s ease;
-}
-
-/* ---- Collaborator avatars ---- */
-
-.task-card-collabs {
-  display: flex;
-  margin-top: 4px;
-}
-.collab-avatar {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--accent-dim);
-  color: var(--accent);
-  font-size: 10px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1.5px solid var(--bg-surface);
-  margin-left: -4px;
-}
-.collab-avatar:first-child {
-  margin-left: 0;
-}
-
-/* --------------------------------------------------------------------------
-   Drag and Drop
-   -------------------------------------------------------------------------- */
-
-.task-card[draggable='true'] {
-  cursor: grab;
-}
-
-.task-card.dragging {
-  opacity: 0.35;
-  transform: scale(0.98);
-  cursor: grabbing;
-}
-
-.drag-ghost {
-  position: fixed;
-  pointer-events: none;
-  z-index: 1000;
-  width: 280px;
-  opacity: 0.92;
-  transform: rotate(2deg) scale(1.03);
-  box-shadow: var(--shadow-drag);
-  border-radius: var(--radius);
-  transition: none;
-}
-
-.kanban-column.drag-over {
-  background: var(--accent-dim);
-  box-shadow:
-    0 0 0 2px var(--accent),
-    var(--shadow-2);
-  transition:
-    background 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.kanban-column.drag-over .column-body {
-  min-height: 60px;
-}
-
-.drop-placeholder {
-  height: 4px;
-  background: var(--accent);
-  border-radius: 2px;
-  margin: 2px 0;
-  opacity: 0.8;
-  transition: height 0.15s ease;
-}
-
-/* ---- Auto-scroll indicators ---- */
-
-.kanban-board.drag-scroll-left::before,
-.kanban-board.drag-scroll-right::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 60px;
-  z-index: 5;
-  pointer-events: none;
-}
-.kanban-board.drag-scroll-left::before {
-  left: 0;
-  background: linear-gradient(to right, var(--accent-dim), transparent);
-}
-.kanban-board.drag-scroll-right::after {
-  right: 0;
-  background: linear-gradient(to left, var(--accent-dim), transparent);
-}
-
-/* ---- Focus (keyboard nav) ---- */
-
-.task-card:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-/* --------------------------------------------------------------------------
-   Inline Task Creation
-   -------------------------------------------------------------------------- */
-
-.column-add-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 8px;
-  margin: 2px 8px 8px;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: var(--bg-elevated);
-  color: var(--text-dim);
-  font-size: 12px;
-  font-weight: 500;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.column-add-btn:hover {
-  color: var(--accent);
-  background: var(--accent-dim);
-}
-
-.column-add-btn .material-symbols-outlined {
-  font-size: 16px;
-}
-
-.inline-create-form {
-  padding: 0 8px 8px;
-}
-
-.inline-create-card {
-  background: var(--bg-elevated);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  padding: 10px 12px;
-  box-shadow: 0 0 0 3px var(--focus-ring);
-}
-
-.inline-create-input {
-  width: 100%;
-  border: none;
-  background: transparent;
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: 13px;
-  font-weight: 500;
-  outline: none;
-  line-height: 1.4;
-  resize: none;
-}
-
-.inline-create-input::placeholder {
-  color: var(--text-dim);
-}
-
-.inline-create-hint {
-  font-size: 10px;
-  color: var(--text-dim);
-  margin-top: 6px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.inline-create-hint kbd {
-  background: var(--bg-hover);
-  padding: 0 4px;
-  border-radius: 2px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-}
-
-/* --------------------------------------------------------------------------
-   Side Panel (Detail View)
-   -------------------------------------------------------------------------- */
-
-.side-panel {
-  width: 0;
-  min-width: 0;
-  background: var(--bg-surface);
-  border-left: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition:
-    width var(--transition-slow),
-    min-width var(--transition-slow);
-  box-shadow: var(--shadow-panel);
-  z-index: 15;
-}
-
-.board-wrapper.panel-open .side-panel {
-  width: var(--panel-width);
-  min-width: var(--panel-width);
-}
-
-.board-wrapper.panel-open .side-panel.panel-wide {
-  --panel-width: min(600px, 50vw);
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-light);
-  flex-shrink: 0;
-  gap: 8px;
-  min-height: 49px;
-}
-
-.panel-header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  flex: 1;
-}
-
-.panel-task-id {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  color: var(--text-muted);
-  font-weight: 500;
-  flex-shrink: 0;
-}
-
-.panel-stage-badge {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  padding: 2px 10px;
-  border-radius: var(--radius);
-  flex-shrink: 0;
-}
-
-.panel-close-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-muted);
-  padding: 4px;
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition-fast);
-  flex-shrink: 0;
-}
-.panel-close-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text);
-}
-.panel-close-btn .material-symbols-outlined {
-  font-size: 20px;
-}
-
-.panel-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.panel-title {
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1.35;
-  margin-bottom: 16px;
-  word-break: break-word;
-}
-
-.panel-title[contenteditable='true'] {
-  outline: none;
-  border-bottom: 2px solid var(--accent);
-  cursor: text;
-}
-
-.panel-section {
-  margin-bottom: 20px;
-}
-
-.panel-section-title {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-dim);
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.panel-section-title .material-symbols-outlined {
-  font-size: 14px;
-}
-
-.panel-grid {
-  display: grid;
-  grid-template-columns: 100px 1fr;
-  gap: 6px 12px;
-  font-size: 13px;
-}
-
-.panel-label {
-  font-weight: 500;
-  color: var(--text-muted);
-}
-
-.panel-value {
-  word-break: break-word;
-  color: var(--text);
-}
-
-.panel-value .task-tag {
-  cursor: pointer;
-}
-
-.panel-description {
-  font-size: 13px;
-  line-height: 1.6;
-  word-break: break-word;
-  color: var(--text-secondary);
-  padding: 10px 12px;
-  background: var(--bg-elevated);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-light);
-}
-.panel-description .rendered-md {
-  white-space: normal;
-}
-
-/* ---- Panel artifacts ---- */
-
-.panel-artifact {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-sm);
-  padding: 10px 12px;
-  margin-bottom: 6px;
-}
-.panel-artifact h4 {
-  font-size: 12px;
-  color: var(--accent);
-  margin-bottom: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.panel-artifact pre {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-muted);
-  line-height: 1.5;
-  margin: 0;
-  padding: 0;
-}
-
-/* ---- Panel subtasks ---- */
-
-.panel-subtask {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-sm);
-  margin-bottom: 4px;
-  cursor: pointer;
-  transition: border-color var(--transition-fast);
-  font-size: 13px;
-}
-.panel-subtask:hover {
-  border-color: var(--accent);
-}
-.panel-subtask .subtask-id {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-dim);
-}
-.panel-subtask .subtask-stage {
-  font-size: 10px;
-  padding: 2px 8px;
-  border-radius: var(--radius-sm);
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-/* ---- Panel comments ---- */
-
-.panel-comments {
-  border-top: 1px solid var(--border-light);
-  padding-top: 12px;
-}
-
-.comment-item {
-  padding: 8px 10px;
-  background: var(--bg-elevated);
-  border-radius: var(--radius-sm);
-  margin-bottom: 6px;
-  border: 1px solid var(--border-light);
-}
-.comment-item.reply {
-  margin-left: 24px;
-}
-.comment-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-  font-size: 12px;
-}
-.comment-agent {
-  font-weight: 600;
-  color: var(--accent);
-}
-.comment-time {
-  color: var(--text-dim);
-  font-size: 11px;
-}
-.comment-body {
-  font-size: 13px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-secondary);
-}
-.comment-form {
-  display: flex;
-  gap: 6px;
-  margin-top: 8px;
-}
-.comment-form textarea {
-  flex: 1;
-  padding: 6px 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-elevated);
-  color: var(--text);
-  font-family: var(--font-sans);
-  font-size: 12px;
-  resize: vertical;
-  min-height: 32px;
-  max-height: 120px;
-  outline: none;
-  transition: border-color var(--transition-fast);
-}
-.comment-form textarea:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--focus-ring);
-}
-.comment-form button {
-  padding: 6px 14px;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: var(--accent);
-  color: white;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-  align-self: flex-end;
-  transition: background var(--transition-fast);
-}
-.comment-form button:hover {
-  background: var(--accent-hover);
-}
-
-/* --------------------------------------------------------------------------
-   Legacy Modal (cleanup dialog only)
-   -------------------------------------------------------------------------- */
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-  backdrop-filter: blur(2px);
-  animation: overlayIn 0.15s ease;
-}
-.modal-overlay[hidden],
-.modal-overlay.hidden {
-  display: none;
-}
-
-@keyframes overlayIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.modal {
-  background: var(--bg-surface);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border);
-  width: 90%;
-  max-width: 600px;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--shadow-3);
-  animation: modalIn 0.2s ease;
-}
-
-@keyframes modalIn {
-  from {
-    opacity: 0;
-    transform: translateY(12px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-light);
-}
-.modal-header h2 {
-  font-size: 15px;
-  font-weight: 600;
-}
-.modal-close {
-  font-size: 20px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--text-muted);
-  padding: 4px;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-}
-.modal-close:hover {
-  background: var(--bg-hover);
-  color: var(--text);
-}
-
-.modal-body {
-  padding: 16px;
-  overflow-y: auto;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-/* --------------------------------------------------------------------------
-   Inline Edit Dropdown
-   -------------------------------------------------------------------------- */
-
-.inline-dropdown {
-  position: absolute;
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-3);
-  z-index: 50;
-  padding: 4px;
-  min-width: 140px;
-  max-height: 200px;
-  overflow-y: auto;
-  animation: dropdownIn 0.12s ease;
-}
-
-@keyframes dropdownIn {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.inline-dropdown-item {
-  padding: 6px 10px;
-  font-size: 12px;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: background var(--transition-fast);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.inline-dropdown-item:hover {
-  background: var(--bg-hover);
-}
-.inline-dropdown-item.active {
-  background: var(--accent-dim);
-  color: var(--accent);
-  font-weight: 500;
-}
-
-/* --------------------------------------------------------------------------
-   Toast
-   -------------------------------------------------------------------------- */
-
-.toast-container {
-  position: fixed;
-  top: 16px;
-  right: 16px;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  pointer-events: none;
-}
-
-.toast {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 10px 14px;
-  font-size: 12px;
-  box-shadow: var(--shadow-2);
-  animation: toastIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
-  max-width: 340px;
-  pointer-events: auto;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.toast-icon {
-  font-size: 18px;
-  flex-shrink: 0;
-  line-height: 1;
-}
-.toast-icon.toast-icon-success {
-  color: var(--green);
-}
-.toast-icon.toast-icon-error {
-  color: var(--red);
-}
-
-.toast-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.toast-title {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-.toast-body {
-  color: var(--text-muted);
-}
-
-.toast.fade-out {
-  animation: toastOut 0.3s ease forwards;
-}
-
-@keyframes toastIn {
-  from {
-    opacity: 0;
-    transform: translateY(16px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes toastOut {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(40px);
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Scrollbar
-   -------------------------------------------------------------------------- */
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-dim);
-}
-
-/* --------------------------------------------------------------------------
-   Cleanup Dialog
-   -------------------------------------------------------------------------- */
-
-.cleanup-options {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.cleanup-option {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg-elevated);
-  color: var(--text);
-  cursor: pointer;
-  text-align: left;
-  font-family: var(--font-sans);
-  font-size: 13px;
-  transition:
-    border-color var(--transition-fast),
-    background var(--transition-fast);
-}
-.cleanup-option:hover {
-  background: var(--bg-hover);
-  border-color: var(--accent);
-}
-.cleanup-option .material-symbols-outlined {
-  font-size: 24px;
-  color: var(--accent);
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-.cleanup-option div {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.cleanup-option strong {
-  font-size: 14px;
-}
-.cleanup-option div span {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.cleanup-option-danger {
-  border-color: rgba(220, 53, 69, 0.4);
-  border-width: 1.5px;
-}
-.cleanup-option-danger:hover {
-  border-color: var(--red);
-  background: var(--red-dim);
-  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.15);
-}
-.cleanup-option-danger .material-symbols-outlined {
-  color: var(--red);
-}
-.cleanup-option-danger strong {
-  color: var(--red);
-}
-
-/* --------------------------------------------------------------------------
-   Reduced Motion
-   -------------------------------------------------------------------------- */
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Responsive
-   -------------------------------------------------------------------------- */
-
-@media (max-width: 1024px) {
-  .board-wrapper.panel-open .side-panel {
-    position: fixed;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: var(--panel-width);
-    min-width: var(--panel-width);
-    z-index: 80;
-    box-shadow: var(--shadow-3);
-  }
-
-  .board-wrapper.panel-open .kanban-board {
-    flex: 1;
-  }
-
-  .panel-backdrop {
-    display: block;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.3);
-    z-index: 79;
-  }
-}
-
-@media (min-width: 1025px) {
-  .panel-backdrop {
-    display: none;
-  }
-}
-
-@media (max-width: 768px) {
-  .kanban-board {
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .kanban-column {
-    min-width: 0;
-    max-width: none;
-    max-height: none;
-  }
-  .kanban-column.collapsed {
-    min-width: 0;
-    max-width: none;
-    writing-mode: horizontal-tb;
-  }
-  .kanban-column.collapsed .column-header {
-    writing-mode: horizontal-tb;
-    flex-direction: row;
-    padding: 10px 12px;
-  }
-  .filter-group {
-    flex-wrap: wrap;
-  }
-  .filter-input {
-    max-width: none;
-  }
-  .stats {
-    display: none;
-  }
-
-  .board-wrapper.panel-open .side-panel {
-    width: 100%;
-    min-width: 100%;
-    --panel-width: 100%;
-  }
-}
-
-@media (max-width: 480px) {
-  header {
-    padding: 6px 12px;
-  }
-  .filter-bar {
-    padding: 6px 12px;
-  }
-  .kanban-board {
-    padding: 8px;
-  }
-  .modal {
-    width: 98%;
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Stage Badge Colors (panel & dropdown)
-   -------------------------------------------------------------------------- */
-
-.stage-backlog {
-  background: var(--gray-dim);
-  color: var(--gray);
-}
-.stage-spec {
-  background: var(--blue-dim);
-  color: var(--blue);
-}
-.stage-plan {
-  background: var(--indigo-dim);
-  color: var(--indigo);
-}
-.stage-implement {
-  background: var(--purple-dim);
-  color: var(--purple);
-}
-.stage-test {
-  background: var(--orange-dim);
-  color: var(--orange);
-}
-.stage-review {
-  background: var(--amber-dim);
-  color: var(--amber);
-}
-.stage-done {
-  background: var(--green-dim);
-  color: var(--green);
-}
-.stage-cancelled {
-  background: var(--red-dim);
-  color: var(--red);
-}
-
-/* --------------------------------------------------------------------------
-   Priority dropdown indicator
-   -------------------------------------------------------------------------- */
-
-.priority-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-  flex-shrink: 0;
-}
-.priority-dot.p-high {
-  background: var(--red);
-}
-.priority-dot.p-med {
-  background: var(--orange);
-}
-.priority-dot.p-low {
-  background: var(--blue);
-}
-.priority-dot.p-none {
-  background: var(--gray);
-}
-
-/* --------------------------------------------------------------------------
-   Comments section (used in legacy modal)
-   -------------------------------------------------------------------------- */
-
-.comments-section {
-  margin-top: 16px;
-  border-top: 1px solid var(--border-light);
-  padding-top: 12px;
-}
-.comments-section h3 {
-  font-size: 13px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-/* --------------------------------------------------------------------------
-   Detail row (used in both panel and legacy modal)
-   -------------------------------------------------------------------------- */
-
-.detail-row {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-size: 13px;
-  line-height: 1.6;
-}
-.detail-label {
-  font-weight: 600;
-  color: var(--text-muted);
-  min-width: 90px;
-  flex-shrink: 0;
-}
-.detail-value {
-  word-break: break-word;
-}
-
-.artifact-list {
-  margin-top: 12px;
-}
-.artifact-item {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-sm);
-  padding: 8px 10px;
-  margin-bottom: 6px;
-}
-.artifact-item h4 {
-  font-size: 12px;
-  color: var(--accent);
-  margin-bottom: 4px;
-}
-.artifact-item pre {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: var(--text-muted);
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-/* --------------------------------------------------------------------------
-   Syntax Highlighting
-   -------------------------------------------------------------------------- */
-
-.hljs-keyword {
-  color: var(--purple);
-  font-weight: 500;
-}
-.hljs-string {
-  color: var(--green);
-}
-.hljs-comment {
-  color: var(--text-dim);
-  font-style: italic;
-}
-.hljs-number {
-  color: var(--orange);
-}
-.hljs-function {
-  color: var(--blue);
-}
-.hljs-type {
-  color: var(--indigo);
-}
-.hljs-operator {
-  color: var(--text-muted);
-}
-.hljs-property {
-  color: var(--accent);
-}
-
-/* --------------------------------------------------------------------------
-   Markdown Rendering
-   -------------------------------------------------------------------------- */
-
-.rendered-md h3 {
-  font-size: 14px;
-  font-weight: 700;
-  margin: 12px 0 6px;
-  color: var(--text);
-}
-.rendered-md h4 {
-  font-size: 13px;
-  font-weight: 600;
-  margin: 10px 0 4px;
-  color: var(--text);
-}
-.rendered-md strong {
-  font-weight: 600;
-  color: var(--text);
-}
-.rendered-md em {
-  font-style: italic;
-}
-.rendered-md code {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-  background: var(--bg-inset);
-  padding: 1px 5px;
-  border-radius: 4px;
-  color: var(--accent);
-}
-.rendered-md pre {
-  background: var(--bg-inset);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-sm);
-  padding: 10px 12px;
-  margin: 8px 0;
-  overflow-x: auto;
-}
-.rendered-md pre code {
-  background: none;
-  padding: 0;
-  color: var(--text-secondary);
-  font-size: 12px;
-  line-height: 1.5;
-}
-.rendered-md ul {
-  padding-left: 20px;
-  margin: 6px 0;
-}
-.rendered-md ul li {
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--text-secondary);
-  margin-bottom: 2px;
-}
-.rendered-md a {
-  color: var(--accent);
-  text-decoration: none;
-}
-.rendered-md a:hover {
-  text-decoration: underline;
-}
-.rendered-md br {
-  content: '';
-  display: block;
-  margin-top: 4px;
-}
-
-/* --------------------------------------------------------------------------
-   Expandable Artifacts
-   -------------------------------------------------------------------------- */
-
-.artifact-wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.artifact-wrapper.artifact-collapsed .artifact-code {
-  max-height: calc(1.5em * 8 + 20px);
-  overflow: hidden;
-}
-
-.artifact-wrapper.artifact-collapsed .artifact-fade {
-  display: block;
-}
-
-.artifact-wrapper.artifact-expanded .artifact-code {
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-.artifact-code {
-  margin: 0;
-  padding: 0 12px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: pre;
-  color: var(--text-muted);
-}
-
-.artifact-fade {
-  display: none;
-  position: absolute;
-  bottom: 28px;
-  left: 0;
-  right: 0;
-  height: 48px;
-  background: linear-gradient(transparent, var(--bg-elevated));
-  pointer-events: none;
-  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
-}
-
-.artifact-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  width: 100%;
-  padding: 4px 0;
-  margin-top: 4px;
-  background: none;
-  border: none;
-  border-top: 1px solid var(--border-light);
-  color: var(--accent);
-  font-family: var(--font-sans);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: color var(--transition-fast);
-}
-.artifact-toggle:hover {
-  color: var(--accent-hover);
-}
-.artifact-toggle .material-symbols-outlined {
-  font-size: 14px;
-}
-
-/* --------------------------------------------------------------------------
-   Diff Viewer
-   -------------------------------------------------------------------------- */
-
-.diff-viewer {
-  display: flex;
-  gap: 2px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  line-height: 1.5;
-  overflow-x: auto;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-}
-
-.diff-side {
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-}
-
-.diff-side .diff-header {
-  padding: 4px 8px;
-  background: var(--bg-hover);
-  font-weight: 600;
-  font-size: 11px;
-  color: var(--text-muted);
-  border-bottom: 1px solid var(--border);
-}
-
-.diff-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.diff-ln {
-  width: 36px;
-  text-align: right;
-  padding: 0 8px;
-  color: var(--text-dim);
-  user-select: none;
-  border-right: 1px solid var(--border);
-}
-
-.diff-code {
-  padding: 0 8px;
-  white-space: pre;
-}
-
-.diff-del {
-  background: var(--red-dim);
-}
-
-.diff-del .diff-code {
-  color: var(--red);
-}
-
-.diff-add {
-  background: var(--green-dim);
-}
-
-.diff-add .diff-code {
-  color: var(--green);
-}
-
-.diff-context {
-  background: transparent;
-}
-
-.diff-context .diff-code {
-  color: var(--text-muted);
-}
-
-.diff-section-header td {
-  padding: 2px 8px;
-  background: var(--blue-dim);
-  color: var(--blue);
-  font-weight: 500;
-  font-size: 11px;
-}
-
-/* --------------------------------------------------------------------------
-   Artifact Header (copy button + line numbers)
-   -------------------------------------------------------------------------- */
-
-.artifact-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 6px;
-  margin-bottom: 4px;
-}
-
-.artifact-header h4 {
-  font-size: 12px;
-  color: var(--accent);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0;
-  flex: 1;
-  min-width: 0;
-}
-
-.artifact-copy-btn {
-  background: none;
-  border: 1px solid var(--border-light);
-  border-radius: 4px;
-  color: var(--text-dim);
-  cursor: pointer;
-  padding: 2px 6px;
-  font-size: 11px;
-  font-family: var(--font-sans);
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  transition: all var(--transition-fast);
-  flex-shrink: 0;
-}
-.artifact-copy-btn:hover {
-  background: var(--bg-hover);
-  border-color: var(--accent);
-  color: var(--text);
-}
-.artifact-copy-btn .material-symbols-outlined {
-  font-size: 13px;
-}
-
-.artifact-lines {
-  display: flex;
-  overflow-x: auto;
-}
-
-.artifact-line-numbers {
-  white-space: pre;
-  text-align: right;
-  padding-right: 12px;
-  border-right: 1px solid var(--border);
-  color: var(--text-dim);
-  font-size: 11px;
-  line-height: 1.5;
-  user-select: none;
-  min-width: 32px;
-  font-family: var(--font-mono);
-  flex-shrink: 0;
-}
-
-.artifact-line-content {
-  flex: 1;
-  overflow-x: auto;
-  min-width: 0;
-}