claude-code-workflow 6.3.54 → 7.0.0

package/ccw/src/templates/dashboard-css/36-loop-monitor.css.backup

@@ -1,1877 +0,0 @@
-/* ==========================================
-   LOOP MONITOR STYLES
-   ========================================== */
-
-/* Layout */
-.loop-monitor-layout {
-  display: grid;
-  grid-template-columns: 350px 1fr;
-  gap: 1.5rem;
-  height: calc(100vh - 200px);
-  min-height: 500px;
-}
-
-/* Loop List Panel */
-.loop-list-panel {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: linear-gradient(180deg, hsl(var(--muted) / 0.3) 0%, transparent 100%);
-}
-
-.panel-header h3 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: hsl(var(--foreground));
-}
-
-.panel-header h3 i,
-.panel-header h3 svg {
-  color: hsl(var(--primary));
-}
-
-/* Filter Select with Icon */
-.filter-select {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.filter-select:hover {
-  border-color: hsl(var(--primary) / 0.5);
-  background: hsl(var(--hover));
-}
-
-.filter-select:focus {
-  outline: none;
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
-}
-
-.filter-group select {
-  padding: 0.375rem 0.75rem;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-size: 0.875rem;
-}
-
-.loop-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
-}
-
-/* Loop Card */
-.loop-card {
-  padding: 0.875rem 1rem;
-  margin-bottom: 0.625rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-left-width: 4px;
-  border-radius: 0.625rem;
-  cursor: pointer;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Card shine effect on hover */
-.loop-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
-  transition: left 0.6s ease;
-  pointer-events: none;
-}
-
-.loop-card:hover::before {
-  left: 100%;
-}
-
-.loop-card:hover {
-  background: hsl(var(--hover));
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
-  border-color: hsl(var(--primary) / 0.3);
-}
-
-.loop-card.selected {
-  background: linear-gradient(135deg, hsl(var(--primary) / 0.15) 0%, hsl(var(--primary) / 0.05) 100%);
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15), 0 4px 12px hsl(var(--primary) / 0.1);
-}
-
-/* Status-specific border colors */
-.loop-card.status-created { border-left-color: hsl(var(--muted-foreground)); }
-.loop-card.status-running { border-left-color: hsl(var(--info)); }
-.loop-card.status-paused { border-left-color: hsl(var(--warning)); }
-.loop-card.status-completed { border-left-color: hsl(var(--success)); }
-.loop-card.status-failed { border-left-color: hsl(var(--destructive)); }
-
-.loop-card-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.loop-status-indicator {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-size: 0.875rem;
-  flex-shrink: 0;
-  background: hsl(var(--muted));
-}
-
-/* Status indicator colors */
-.loop-status-indicator.created {
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-}
-
-.loop-status-indicator.running {
-  background: hsl(var(--info-light));
-  color: hsl(var(--info));
-  animation: pulse-ring 2s ease-in-out infinite;
-}
-
-.loop-status-indicator.paused {
-  background: hsl(var(--warning-light));
-  color: hsl(var(--warning));
-}
-
-.loop-status-indicator.completed {
-  background: hsl(var(--success-light));
-  color: hsl(var(--success));
-}
-
-.loop-status-indicator.failed {
-  background: hsl(var(--destructive) / 0.15);
-  color: hsl(var(--destructive));
-}
-
-@keyframes pulse-ring {
-  0%, 100% {
-    box-shadow: 0 0 0 0 hsl(var(--info) / 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 6px hsl(var(--info) / 0);
-  }
-}
-
-.loop-title {
-  font-weight: 600;
-  font-size: 0.875rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.loop-card-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.loop-meta {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.loop-task-id {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 180px;
-}
-
-.loop-status-text {
-  font-weight: 500;
-}
-
-.loop-progress {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.loop-step-info {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.loop-time {
-  font-size: 0.7rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Progress Bar */
-.progress-bar {
-  flex: 1;
-  height: 8px;
-  background: hsl(var(--muted));
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--success)));
-  border-radius: 4px;
-  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-}
-
-/* Progress bar shimmer effect */
-.progress-fill::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  transform: translateX(-100%);
-  animation: progress-shimmer 2s infinite;
-}
-
-@keyframes progress-shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
-}
-
-/* Running state - animated gradient */
-.loop-card.status-running .progress-fill {
-  background: linear-gradient(90deg, hsl(var(--info)), hsl(var(--primary)));
-  animation: progress-pulse 2s ease-in-out infinite;
-}
-
-@keyframes progress-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.85; }
-}
-
-.progress-text {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  min-width: 60px;
-  text-align: right;
-}
-
-/* Loop Detail Panel */
-.loop-detail-panel {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  overflow-y: auto;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.empty-detail-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: hsl(var(--muted-foreground));
-  gap: 1.5rem;
-  padding: 3rem 1rem;
-}
-
-.empty-detail-state i,
-.empty-detail-state svg {
-  width: 64px;
-  height: 64px;
-  opacity: 0.4;
-  color: hsl(var(--primary));
-}
-
-.empty-detail-state p {
-  font-size: 1rem;
-  max-width: 280px;
-  text-align: center;
-  line-height: 1.6;
-}
-
-.empty-detail-state .empty-icon-large {
-  width: 80px;
-  height: 80px;
-  padding: 1.25rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty-detail-state .empty-icon-large i,
-.empty-detail-state .empty-icon-large svg {
-  width: 40px;
-  height: 40px;
-  opacity: 0.5;
-}
-
-.empty-detail-state .empty-hint {
-  font-size: 0.875rem;
-  color: hsl(var(--muted-foreground));
-  opacity: 0.8;
-}
-
-/* Loop Detail */
-.loop-detail {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.detail-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.detail-status {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem 1.25rem;
-  border-radius: 2rem;
-  font-weight: 600;
-  font-size: 0.875rem;
-}
-
-/* Detail status variants */
-.detail-status.created {
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-}
-
-.detail-status.running {
-  background: hsl(var(--info-light));
-  color: hsl(var(--info));
-  animation: status-pulse 2s ease-in-out infinite;
-}
-
-.detail-status.paused {
-  background: hsl(var(--warning-light));
-  color: hsl(var(--warning));
-}
-
-.detail-status.completed {
-  background: hsl(var(--success-light));
-  color: hsl(var(--success));
-}
-
-.detail-status.failed {
-  background: hsl(var(--destructive) / 0.15);
-  color: hsl(var(--destructive));
-}
-
-@keyframes status-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.8; }
-}
-
-.status-icon {
-  font-size: 1.25rem;
-}
-
-.detail-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-  border: none;
-}
-
-.btn-success {
-  background: hsl(var(--success));
-  color: white;
-}
-
-.btn-success:hover {
-  background: hsl(var(--success) / 0.9);
-}
-
-.btn-warning {
-  background: hsl(var(--warning));
-  color: white;
-}
-
-.btn-warning:hover {
-  background: hsl(var(--warning) / 0.9);
-}
-
-.btn-danger {
-  background: hsl(var(--destructive));
-  color: white;
-}
-
-.btn-danger:hover {
-  background: hsl(var(--destructive) / 0.9);
-}
-
-.detail-info {
-  padding: 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.5rem;
-}
-
-.detail-title {
-  margin: 0 0 0.75rem 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.detail-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  font-size: 0.875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.detail-meta span {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-/* Detail Section */
-.detail-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.detail-section h4 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.progress-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.progress-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.progress-item label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: hsl(var(--muted-foreground));
-}
-
-/* CLI Sequence */
-.cli-sequence {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.cli-step {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.375rem;
-}
-
-.step-marker {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: hsl(var(--muted));
-  font-size: 0.875rem;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.cli-step.current .step-marker {
-  background: hsl(var(--primary));
-  color: white;
-}
-
-.cli-step.completed .step-marker {
-  background: hsl(var(--success));
-  color: white;
-}
-
-.step-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.step-name {
-  font-weight: 600;
-  font-size: 0.875rem;
-  margin-bottom: 0.25rem;
-}
-
-.step-prompt {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Variables Grid */
-.variables-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 0.5rem;
-}
-
-.variable-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.5rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.375rem;
-}
-
-.variable-key {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-}
-
-.variable-value {
-  font-size: 0.875rem;
-  font-family: 'Consolas', 'Monaco', monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Execution Timeline */
-.execution-timeline {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.timeline-iteration {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding-left: 1rem;
-}
-
-.timeline-iteration.current {
-  border-left: 3px solid hsl(var(--primary));
-  padding-left: 0.875rem;
-}
-
-.iteration-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-weight: 600;
-}
-
-.iteration-marker {
-  font-size: 1rem;
-}
-
-.timeline-iteration.completed .iteration-marker {
-  color: hsl(var(--success));
-}
-
-.timeline-iteration.current .iteration-marker {
-  color: hsl(var(--primary));
-}
-
-.iteration-steps {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  padding-left: 1.5rem;
-}
-
-.timeline-step {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.5rem;
-  background: hsl(var(--muted) / 0.2);
-  border-radius: 0.375rem;
-}
-
-.step-status {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  flex-shrink: 0;
-}
-
-.step-status.success {
-  background: hsl(var(--success));
-  color: white;
-}
-
-.step-status.failed {
-  background: hsl(var(--destructive));
-  color: white;
-}
-
-.step-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.step-tool {
-  font-weight: 600;
-  font-size: 0.875rem;
-}
-
-.step-time {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.step-duration {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.step-error {
-  font-size: 0.75rem;
-  color: hsl(var(--destructive));
-  background: hsl(var(--destructive) / 0.1);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  margin-top: 0.25rem;
-}
-
-/* Error Section */
-.error-section {
-  padding: 1rem;
-  background: hsl(var(--destructive) / 0.1);
-  border: 1px solid hsl(var(--destructive) / 0.3);
-  border-radius: 0.5rem;
-}
-
-.error-section h4 {
-  margin: 0 0 0.5rem 0;
-  color: hsl(var(--destructive));
-}
-
-.error-message {
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 0.875rem;
-  color: hsl(var(--destructive));
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* Notification */
-.notification {
-  position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  font-weight: 500;
-  z-index: 1000;
-  animation: slideIn 0.3s ease-out;
-}
-
-.notification.success {
-  background: hsl(var(--success));
-  color: white;
-}
-
-.notification.error {
-  background: hsl(var(--destructive));
-  color: white;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Empty State */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem 2rem;
-  color: hsl(var(--muted-foreground));
-  gap: 1rem;
-  text-align: center;
-}
-
-.empty-state-icon {
-  width: 56px;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: hsl(var(--muted) / 0.4);
-  border-radius: 50%;
-  margin-bottom: 0.5rem;
-}
-
-.empty-state-icon i,
-.empty-state-icon svg {
-  width: 28px;
-  height: 28px;
-  opacity: 0.5;
-}
-
-.empty-state-title {
-  font-size: 1rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-}
-
-.empty-state-hint {
-  font-size: 0.875rem;
-  color: hsl(var(--muted-foreground));
-  max-width: 280px;
-  line-height: 1.5;
-}
-
-/* Loading Spinner */
-.loading-spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 1rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Color Themes */
-.text-cyan-500 { color: #06b6d4; }
-.bg-cyan-100 { background: #cffafe; }
-.text-amber-500 { color: #f59e0b; }
-.bg-amber-100 { background: #fef3c7; }
-.text-emerald-500 { color: #10b981; }
-.bg-emerald-100 { background: #d1fae5; }
-.text-red-500 { color: #ef4444; }
-.bg-red-100 { background: #fee2e2; }
-.text-gray-400 { color: #9ca3af; }
-.bg-gray-100 { background: #f3f4f6; }
-
-.border-l-cyan-500 { border-left-color: #06b6d4; }
-.border-l-amber-500 { border-left-color: #f59e0b; }
-.border-l-emerald-500 { border-left-color: #10b981; }
-.border-l-red-500 { border-left-color: #ef4444; }
-.border-l-gray-400 { border-left-color: #9ca3af; }
-
-.bg-cyan-light { background: hsl(var(--info) / 0.2); }
-.text-cyan { color: hsl(var(--info)); }
-
-/* Dark mode adjustments */
-[data-theme="dark"] .text-cyan-500 { color: #22d3ee; }
-[data-theme="dark"] .bg-cyan-100 { background: #164e63; }
-[data-theme="dark"] .text-amber-500 { color: #fbbf24; }
-[data-theme="dark"] .bg-amber-100 { background: #78350f; }
-[data-theme="dark"] .text-emerald-500 { color: #34d399; }
-[data-theme="dark"] .bg-emerald-100 { background: #065f46; }
-[data-theme="dark"] .text-red-500 { color: #f87171; }
-[data-theme="dark"] .bg-red-100 { background: #7f1d1d; }
-[data-theme="dark"] .text-gray-400 { color: #9ca3af; }
-[data-theme="dark"] .bg-gray-100 { background: #374151; }
-
-/* Responsive */
-@media (max-width: 1024px) {
-  .loop-monitor-layout {
-    grid-template-columns: 1fr;
-    height: auto;
-  }
-
-  .loop-detail-panel {
-    min-height: 400px;
-  }
-
-  .loop-list-panel {
-    border-right: none;
-    border-bottom: 1px solid hsl(var(--border));
-  }
-}
-
-/* ==========================================
- * TASK CREATION STYLES
- * ========================================== */
-
-/* Header actions */
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.header-actions .btn {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-}
-
-/* Tasks list */
-.tasks-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-/* Task card */
-.task-card {
-  background: white;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  margin-bottom: 0.75rem;
-  overflow: hidden;
-  transition: box-shadow 0.2s, transform 0.2s;
-}
-
-.task-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transform: translateY(-1px);
-}
-
-.task-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.task-title {
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.task-id {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  font-family: monospace;
-}
-
-.task-card-body {
-  padding: 1rem;
-}
-
-.task-description {
-  color: hsl(var(--muted-foreground));
-  font-size: 0.875rem;
-  margin-bottom: 0.75rem;
-  line-height: 1.5;
-}
-
-.task-meta {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.875rem;
-  color: hsl(var(--muted-foreground));
-  margin-bottom: 0.75rem;
-}
-
-.task-meta span {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-/* Modal styles */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-}
-
-.modal-content {
-  background: white;
-  border-radius: 0.75rem;
-  width: 100%;
-  max-width: 600px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
-}
-
-.modal-content.modal-lg {
-  max-width: 800px;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: hsl(var(--muted-foreground));
-  transition: background 0.2s;
-}
-
-.modal-close:hover {
-  background: hsl(var(--muted) / 0.5);
-}
-
-.modal-body {
-  padding: 1.5rem;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1rem 1.5rem;
-  border-top: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-/* Form styles */
-.form-section {
-  margin-bottom: 1.5rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.form-section:last-child {
-  border-bottom: none;
-}
-
-.form-section h4 {
-  margin: 0 0 1rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.form-section h4 i,
-.form-section h4 svg {
-  color: hsl(var(--primary));
-}
-
-/* Section header with action button */
-.section-header-with-action {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.section-header-with-action h4 {
-  margin: 0;
-}
-
-.section-header-with-action .btn-outline {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  border: 1px solid hsl(var(--border));
-  background: transparent;
-  color: hsl(var(--foreground));
-  border-radius: 0.375rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.section-header-with-action .btn-outline:hover {
-  background: hsl(var(--accent) / 0.1);
-  border-color: hsl(var(--primary));
-  color: hsl(var(--primary));
-}
-
-/* Section-specific styling */
-.form-section.section-config {
-  background: linear-gradient(135deg, hsl(var(--primary) / 0.05) 0%, transparent 50%);
-  border-radius: 0.5rem;
-  padding: 1.25rem;
-  border: 1px solid hsl(var(--primary) / 0.2);
-  border-left: 4px solid hsl(var(--primary));
-}
-
-.form-section.section-config h4 {
-  color: hsl(var(--primary));
-}
-
-.form-section.section-config h4 i,
-.form-section.section-config h4 svg {
-  color: hsl(var(--primary));
-}
-
-.form-section.section-cli {
-  background: linear-gradient(135deg, hsl(var(--info) / 0.05) 0%, transparent 50%);
-  border-radius: 0.5rem;
-  padding: 1.25rem;
-  border: 1px solid hsl(var(--info) / 0.2);
-  border-left: 4px solid hsl(var(--info));
-}
-
-.form-section.section-cli h4 {
-  color: hsl(var(--info));
-}
-
-.form-section.section-cli h4 i,
-.form-section.section-cli h4 svg {
-  color: hsl(var(--info));
-}
-
-.form-section.section-basic {
-  background: linear-gradient(135deg, hsl(var(--success) / 0.05) 0%, transparent 50%);
-  border-radius: 0.5rem;
-  padding: 1.25rem;
-  border: 1px solid hsl(var(--success) / 0.2);
-  border-left: 4px solid hsl(var(--success));
-}
-
-.form-section.section-basic h4 {
-  color: hsl(var(--success));
-}
-
-.form-section.section-basic h4 i,
-.form-section.section-basic h4 svg {
-  color: hsl(var(--success));
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-group label {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin-bottom: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-}
-
-/* Label icons in config section */
-.section-config .form-group label i,
-.section-config .form-group label svg {
-  color: hsl(var(--primary));
-  opacity: 0.7;
-}
-
-/* Label icons in CLI section */
-.section-cli .form-group label i,
-.section-cli .form-group label svg {
-  color: hsl(var(--info));
-  opacity: 0.7;
-}
-
-/* Label icons in basic section */
-.section-basic .form-group label i,
-.section-basic .form-group label svg {
-  color: hsl(var(--success));
-  opacity: 0.7;
-}
-
-.form-control {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  transition: all 0.2s;
-  background: hsl(var(--background));
-}
-
-.form-control:focus {
-  outline: none;
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
-  background: hsl(var(--card));
-}
-
-/* Section-specific input focus colors */
-.section-config .form-control:focus {
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
-}
-
-.section-cli .form-control:focus {
-  border-color: hsl(var(--info));
-  box-shadow: 0 0 0 3px hsl(var(--info) / 0.1);
-}
-
-.section-basic .form-control:focus {
-  border-color: hsl(var(--success));
-  box-shadow: 0 0 0 3px hsl(var(--success) / 0.1);
-}
-
-/* Helper text */
-.form-group small {
-  display: block;
-  margin-top: 0.375rem;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  line-height: 1.4;
-}
-
-.text-gray-500 {
-  color: hsl(var(--muted-foreground));
-}
-
-textarea.form-control {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.form-row {
-  display: flex;
-  gap: 1rem;
-}
-
-.form-row .form-group {
-  flex: 1;
-}
-
-/* CLI Step Card */
-.cli-step-card {
-  background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--muted) / 0.2) 100%);
-  border: 1px solid hsl(var(--info) / 0.3);
-  border-radius: 0.625rem;
-  padding: 1.5rem;
-  margin-bottom: 1rem;
-  transition: all 0.25s ease;
-}
-
-.cli-step-card:hover {
-  border-color: hsl(var(--info) / 0.5);
-  box-shadow: 0 4px 12px hsl(var(--info) / 0.1);
-}
-
-.cli-step-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.step-number {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.4rem;
-  font-weight: 500;
-  flex-shrink: 0;
-  padding: 0.5rem 0.75rem;
-  background: hsl(var(--info) / 0.08);
-  border-radius: 0.5rem;
-}
-
-.step-number i {
-  color: hsl(var(--info));
-  font-size: 0.875rem;
-}
-
-.step-number .step-text {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--info));
-  white-space: nowrap;
-  line-height: 1.2;
-}
-
-.step-number::before {
-  display: none;
-}
-
-.btn-text {
-  background: none;
-  border: none;
-  color: hsl(var(--destructive));
-  cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  transition: background 0.2s;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-text:hover {
-  background: hsl(var(--destructive) / 0.1);
-}
-
-/* Bash field visibility */
-.cli-step-card .bash-only {
-  display: none;
-}
-
-.cli-step-card .bash-only:not([style*="display: none"]) {
-  display: block;
-}
-
-/* Button variants */
-.btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  transition: background 0.2s, opacity 0.2s;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: hsl(var(--primary));
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: hsl(var(--primary) / 0.9);
-}
-
-.btn-secondary {
-  background: hsl(var(--secondary));
-  color: white;
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: hsl(var(--secondary) / 0.9);
-}
-
-/* Info light button for CLI section */
-.btn-info-light {
-  background: hsl(var(--info) / 0.15);
-  color: hsl(var(--info));
-  border: 1px solid hsl(var(--info) / 0.3);
-}
-
-.btn-info-light:hover:not(:disabled) {
-  background: hsl(var(--info) / 0.25);
-  border-color: hsl(var(--info) / 0.5);
-}
-
-.btn-success {
-  background: hsl(var(--success));
-  color: white;
-}
-
-.btn-success:hover:not(:disabled) {
-  background: hsl(var(--success) / 0.9);
-}
-
-.btn-danger {
-  background: hsl(var(--destructive));
-  color: white;
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: hsl(var(--destructive) / 0.9);
-}
-
-.btn-sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.flex {
-  display: flex;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.mt-4 {
-  margin-top: 1rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-}
-
-.text-gray-400 {
-  color: #9ca3af;
-}
-
-.small {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* ==========================================
- * TASK DETAIL STYLES
- * ========================================== */
-
-/* Config Grid */
-.config-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
-}
-
-.config-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.config-item-full {
-  grid-column: 1 / -1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.config-label {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.config-value {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-}
-
-.config-code {
-  display: block;
-  padding: 0.5rem 0.75rem;
-  background: hsl(var(--muted));
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-family: monospace;
-  color: hsl(var(--foreground));
-  overflow-x: auto;
-}
-
-/* Steps List */
-.steps-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.steps-list .step-item {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.5rem;
-  border-left: 3px solid hsl(var(--primary));
-}
-
-.steps-list .step-number {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: hsl(var(--primary));
-  color: white;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.steps-list .step-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.steps-list .step-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.steps-list .step-id {
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.steps-list .step-tool {
-  font-size: 0.75rem;
-  padding: 0.125rem 0.5rem;
-  background: hsl(var(--info) / 0.15);
-  color: hsl(var(--info));
-  border-radius: 9999px;
-}
-
-.steps-list .step-details {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.875rem;
-}
-
-.steps-list .step-mode {
-  color: hsl(var(--muted-foreground));
-}
-
-.steps-list .step-error {
-  color: hsl(var(--warning));
-}
-
-.steps-list .step-prompt,
-.steps-list .step-command {
-  padding: 0.5rem;
-  background: hsl(var(--background));
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-}
-
-.steps-list .step-prompt small,
-.steps-list .step-command small {
-  display: block;
-  margin-bottom: 0.25rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.steps-list .step-prompt p {
-  margin: 0;
-  color: hsl(var(--foreground));
-}
-
-.steps-list .step-command code {
-  color: hsl(var(--foreground));
-}
-
-/* ==========================================
- * V2 LOOP STYLES
- * ========================================== */
-
-/* Loop card description */
-.loop-card-body .loop-description {
-  font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
-  line-height: 1.4;
-  margin-bottom: 0.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-/* Version badge (v1/v2) */
-.version-badge {
-  font-size: 0.625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  padding: 0.125rem 0.5rem;
-  border-radius: 9999px;
-  background: hsl(var(--muted) / 0.5);
-  color: hsl(var(--muted-foreground));
-  letter-spacing: 0.05em;
-}
-
-/* Detail description */
-.detail-description {
-  font-size: 0.9375rem;
-  color: hsl(var(--muted-foreground));
-  line-height: 1.5;
-  margin: 0 0 1rem 0;
-}
-
-/* Info box for v2 loops */
-.info-box {
-  padding: 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0 0 1rem 0;
-  color: hsl(var(--muted-foreground));
-}
-
-.info-box p:last-child {
-  margin-bottom: 0;
-}
-
-/* Required field marker */
-.required {
-  color: hsl(var(--destructive));
-  font-weight: bold;
-}
-
-/* Alert styles */
-.alert {
-  padding: 0.75rem 1rem;
-  border-radius: 0.375rem;
-  margin-bottom: 1rem;
-  font-size: 0.875rem;
-}
-
-.alert-error {
-  background: hsl(var(--destructive) / 0.1);
-  border: 1px solid hsl(var(--destructive) / 0.3);
-  color: hsl(var(--destructive));
-}
-
-.alert-warning {
-  background: hsl(var(--warning) / 0.1);
-  border: 1px solid hsl(var(--warning) / 0.3);
-  color: hsl(var(--warning));
-}
-
-.alert-success {
-  background: hsl(var(--success) / 0.1);
-  border: 1px solid hsl(var(--success) / 0.3);
-  color: hsl(var(--success));
-}
-
-/* Task list placeholder */
-.task-list-placeholder {
-  padding: 2rem;
-  background: hsl(var(--muted) / 0.2);
-  border-radius: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.task-list-placeholder .empty-state i,
-.task-list-placeholder .empty-state svg {
-  width: 48px;
-  height: 48px;
-  opacity: 0.4;
-}
-
-/* Loop ID display in detail meta */
-.detail-meta span {
-  font-size: 0.8125rem;
-}
-
-/* ==========================================
- * TASK LIST STYLES
- * ========================================== */
-
-/* Task list container */
-.task-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-/* Task list empty state */
-.task-list-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 1.5rem;
-  background: hsl(var(--muted) / 0.2);
-  border-radius: 0.5rem;
-  color: hsl(var(--muted-foreground));
-  text-align: center;
-}
-
-.task-list-empty i,
-.task-list-empty svg {
-  width: 48px;
-  height: 48px;
-  opacity: 0.4;
-  margin-bottom: 1rem;
-  color: hsl(var(--primary));
-}
-
-/* Task item */
-.task-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.875rem 1rem;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  cursor: grab;
-  transition: all 0.2s ease;
-}
-
-.task-item:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary) / 0.3);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.task-item.dragging {
-  opacity: 0.5;
-  background: hsl(var(--muted) / 0.3);
-  border-style: dashed;
-}
-
-/* Drag handle */
-.task-item-drag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: hsl(var(--muted-foreground));
-  flex-shrink: 0;
-  cursor: grab;
-}
-
-.task-item:hover .task-item-drag {
-  color: hsl(var(--primary));
-}
-
-/* Task content */
-.task-item-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.task-item-header {
-  margin-bottom: 0.375rem;
-}
-
-.task-item-description {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-  line-height: 1.4;
-}
-
-/* Task meta with badges */
-.task-item-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-/* Task status badge */
-.task-status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem;
-  border-radius: 9999px;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-.task-status-badge.status-analysis {
-  background: hsl(var(--info) / 0.15);
-  color: hsl(var(--info));
-}
-
-.task-status-badge.status-write {
-  background: hsl(var(--success) / 0.15);
-  color: hsl(var(--success));
-}
-
-.task-status-badge.status-review {
-  background: hsl(var(--warning) / 0.15);
-  color: hsl(var(--warning));
-}
-
-/* Tool badge */
-.task-tool-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem;
-  border-radius: 9999px;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  background: hsl(var(--muted) / 0.5);
-  color: hsl(var(--muted-foreground));
-}
-
-/* Task actions */
-.task-item-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.task-item:hover .task-item-actions {
-  opacity: 1;
-}
-
-/* Mobile - always show actions */
-@media (max-width: 768px) {
-  .task-item-actions {
-    opacity: 1;
-  }
-}
-
-/* Small buttons for task actions */
-.task-item-actions .btn {
-  padding: 0.375rem 0.5rem;
-  font-size: 0.75rem;
-}
-
-/* Drag over state for drop indicator */
-.task-item.drag-over {
-  border-top: 2px solid hsl(var(--primary));
-  margin-top: 2px;
-}
-
-/* Scrollbar styling for task list */
-.task-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.task-list::-webkit-scrollbar-track {
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 3px;
-}
-
-.task-list::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground) / 0.3);
-  border-radius: 3px;
-}
-
-.task-list::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground) / 0.5);
-}