claude-code-workflow 6.1.3 → 6.2.1

package/ccw/src/templates/dashboard-css/06-cards.css

@@ -1,1570 +0,0 @@
-/* ===================================
-   Context Package Card UI (New)
-   =================================== */
-.ctx-header-card {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  padding: 1rem 1.25rem;
-  margin-bottom: 1rem;
-}
-
-.ctx-header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.ctx-card {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  overflow: hidden;
-}
-
-.ctx-card-warning {
-  border-color: hsl(var(--warning) / 0.5);
-}
-
-.ctx-card-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.875rem 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.ctx-card-icon {
-  font-size: 1rem;
-}
-
-.ctx-card-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-  flex: 1;
-}
-
-.ctx-card-body {
-  padding: 1rem;
-}
-
-.ctx-count-badge {
-  padding: 0.125rem 0.5rem;
-  background: hsl(var(--muted));
-  border-radius: 9999px;
-  font-size: 0.7rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Metadata styles - Horizontal chip layout */
-.ctx-meta-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 0.75rem;
-  padding: 0.75rem;
-  background: hsl(var(--muted) / 0.2);
-  border-radius: 0.5rem;
-}
-
-.ctx-meta-chip {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.ctx-meta-chip-label {
-  font-size: 0.65rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  letter-spacing: 0.05em;
-}
-
-.ctx-meta-chip-value {
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-}
-
-code.ctx-meta-chip-value {
-  font-family: var(--font-mono);
-  background: hsl(var(--background));
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  border: 1px solid hsl(var(--border) / 0.5);
-}
-
-.ctx-keywords-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  margin-top: 0.75rem;
-}
-
-/* Legacy grid - keep for backwards compatibility */
-.ctx-meta-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 0.75rem;
-  margin-top: 0.75rem;
-}
-
-.ctx-meta-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.ctx-meta-value-code {
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-  color: hsl(var(--primary));
-  background: hsl(var(--muted) / 0.5);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  word-break: break-all;
-}
-
-.ctx-complexity-badge {
-  padding: 0.25rem 0.625rem;
-  border-radius: 0.25rem;
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  display: inline-block;
-}
-
-.ctx-complexity-low {
-  background: hsl(var(--success) / 0.15);
-  color: hsl(142 76% 36%);
-}
-
-.ctx-complexity-medium {
-  background: hsl(var(--warning) / 0.15);
-  color: hsl(38 92% 40%);
-}
-
-.ctx-complexity-high {
-  background: hsl(var(--destructive) / 0.15);
-  color: hsl(0 84% 50%);
-}
-
-/* Pattern tags */
-.ctx-pattern-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.ctx-pattern-tag {
-  padding: 0.375rem 0.75rem;
-  background: hsl(var(--primary) / 0.1);
-  border: 1px solid hsl(var(--primary) / 0.2);
-  color: hsl(var(--primary));
-  border-radius: 0.375rem;
-  font-size: 0.8rem;
-  font-weight: 500;
-}
-
-/* Tech Stack section */
-.ctx-stack-section {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.ctx-stack-section:last-child {
-  border-bottom: none;
-}
-
-.ctx-stack-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-}
-
-.ctx-lang-tag {
-  padding: 0.25rem 0.625rem;
-  background: hsl(217 91% 60% / 0.15);
-  color: hsl(217 91% 50%);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.ctx-framework-tag {
-  padding: 0.25rem 0.625rem;
-  background: hsl(142 76% 36% / 0.15);
-  color: hsl(142 76% 30%);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.ctx-frontend-tag {
-  padding: 0.25rem 0.625rem;
-  background: hsl(280 68% 60% / 0.15);
-  color: hsl(280 68% 45%);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.ctx-backend-tag {
-  padding: 0.25rem 0.625rem;
-  background: hsl(24 95% 53% / 0.15);
-  color: hsl(24 95% 40%);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.ctx-lib-tag {
-  padding: 0.25rem 0.625rem;
-  background: hsl(var(--muted));
-  color: hsl(var(--foreground));
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-}
-
-/* Conventions section */
-.ctx-conv-section {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.ctx-conv-section:last-child {
-  border-bottom: none;
-}
-
-.ctx-conv-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.ctx-conv-items {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 0.5rem;
-}
-
-.ctx-conv-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.5rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.25rem;
-}
-
-.ctx-conv-key {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: hsl(var(--primary));
-  text-transform: capitalize;
-}
-
-.ctx-conv-value {
-  font-size: 0.75rem;
-  color: hsl(var(--foreground));
-}
-
-/* Assets section - New Card Grid Layout */
-.ctx-assets-category {
-  margin-bottom: 1rem;
-}
-
-.ctx-assets-category:last-child {
-  margin-bottom: 0;
-}
-
-.ctx-assets-cat-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid hsl(var(--border) / 0.3);
-}
-
-.ctx-assets-cat-icon {
-  font-size: 1rem;
-}
-
-.ctx-assets-cat-title {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  flex: 1;
-}
-
-.ctx-assets-cat-count {
-  padding: 0.125rem 0.5rem;
-  background: hsl(var(--primary) / 0.1);
-  color: hsl(var(--primary));
-  border-radius: 9999px;
-  font-size: 0.7rem;
-  font-weight: 600;
-}
-
-.ctx-assets-card-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.ctx-asset-card {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.ctx-asset-card-path {
-  display: inline-block;
-  font-size: 0.8rem;
-  font-weight: 400;
-  color: hsl(var(--foreground));
-  padding: 0.5rem 0.75rem;
-  background: hsl(var(--muted) / 0.3);
-  border: 1px solid hsl(var(--border) / 0.5);
-  border-radius: 0.375rem;
-}
-
-.ctx-asset-card-badge {
-  flex-shrink: 0;
-  padding: 0.25rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: capitalize;
-  white-space: nowrap;
-}
-
-.ctx-relevance-badge {
-  background: hsl(142 76% 36% / 0.12);
-  color: hsl(142 76% 30%);
-  border: 1px solid hsl(142 76% 36% / 0.2);
-}
-
-.ctx-role-badge {
-  background: hsl(217 91% 60% / 0.1);
-  color: hsl(217 91% 45%);
-  border: 1px solid hsl(217 91% 60% / 0.2);
-}
-
-.ctx-test-badge {
-  background: hsl(280 68% 60% / 0.1);
-  color: hsl(280 68% 45%);
-  border: 1px solid hsl(280 68% 60% / 0.2);
-}
-
-/* Legacy list styles - keep for backwards compatibility */
-.ctx-assets-section {
-  padding: 0.75rem 0;
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.ctx-assets-section:last-child {
-  border-bottom: none;
-}
-
-.ctx-assets-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.ctx-assets-icon {
-  font-size: 0.875rem;
-}
-
-.ctx-assets-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  flex: 1;
-}
-
-.ctx-assets-count {
-  padding: 0.125rem 0.5rem;
-  background: hsl(var(--muted));
-  border-radius: 9999px;
-  font-size: 0.65rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.ctx-assets-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.ctx-asset-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.25rem;
-}
-
-.ctx-asset-path {
-  font-size: 0.7rem;
-  color: hsl(var(--foreground));
-  font-family: var(--font-mono);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ctx-asset-relevance {
-  padding: 0.125rem 0.375rem;
-  background: var(--rel-color);
-  color: white;
-  border-radius: 0.25rem;
-  font-size: 0.6rem;
-  font-weight: 600;
-}
-
-.ctx-asset-role {
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-size: 0.6rem;
-  font-weight: 500;
-  text-transform: capitalize;
-}
-
-.ctx-role-primary {
-  background: hsl(var(--primary) / 0.15);
-  color: hsl(var(--primary));
-}
-
-.ctx-role-secondary {
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-}
-
-.ctx-test-count {
-  padding: 0.125rem 0.375rem;
-  background: hsl(142 76% 36% / 0.15);
-  color: hsl(142 76% 30%);
-  border-radius: 0.25rem;
-  font-size: 0.6rem;
-  font-weight: 500;
-}
-
-.ctx-assets-more {
-  font-size: 0.7rem;
-  color: hsl(var(--muted-foreground));
-  text-align: center;
-  padding: 0.25rem;
-}
-
-/* Dependencies section */
-.ctx-deps-section {
-  padding: 0.75rem 0;
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.ctx-deps-section:last-child {
-  border-bottom: none;
-}
-
-.ctx-deps-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.ctx-deps-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  flex: 1;
-}
-
-.ctx-deps-count {
-  padding: 0.125rem 0.5rem;
-  background: hsl(var(--muted));
-  border-radius: 9999px;
-  font-size: 0.65rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.ctx-deps-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.ctx-dep-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.25rem;
-  font-size: 0.7rem;
-}
-
-.ctx-dep-from,
-.ctx-dep-to {
-  font-family: var(--font-mono);
-  color: hsl(var(--foreground));
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ctx-dep-arrow {
-  color: hsl(var(--muted-foreground));
-}
-
-.ctx-dep-type {
-  padding: 0.125rem 0.375rem;
-  background: hsl(var(--muted));
-  border-radius: 0.25rem;
-  font-size: 0.6rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.ctx-deps-packages {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-}
-
-.ctx-pkg-tag {
-  padding: 0.25rem 0.5rem;
-  background: hsl(var(--muted));
-  border-radius: 0.25rem;
-  font-size: 0.7rem;
-  font-family: var(--font-mono);
-  color: hsl(var(--foreground));
-}
-
-.ctx-deps-more {
-  font-size: 0.7rem;
-  color: hsl(var(--muted-foreground));
-  text-align: center;
-  padding: 0.25rem;
-}
-
-/* Test context section */
-.ctx-test-stats {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 0.75rem;
-}
-
-.ctx-stat-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.375rem;
-  min-width: 80px;
-}
-
-.ctx-stat-value {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: hsl(var(--primary));
-}
-
-.ctx-stat-label {
-  font-size: 0.65rem;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.ctx-test-frameworks {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.ctx-fw-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.375rem;
-  min-width: 100px;
-}
-
-.ctx-fw-installed {
-  background: hsl(142 76% 36% / 0.1);
-  border: 1px solid hsl(142 76% 36% / 0.3);
-}
-
-.ctx-fw-missing {
-  background: hsl(var(--destructive) / 0.1);
-  border: 1px solid hsl(var(--destructive) / 0.3);
-}
-
-.ctx-fw-type {
-  font-size: 0.65rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-}
-
-.ctx-fw-name {
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-}
-
-/* Conflict/Risk section */
-.ctx-risk-badge {
-  padding: 0.25rem 0.625rem;
-  border-radius: 0.25rem;
-  font-size: 0.65rem;
-  font-weight: 700;
-}
-
-.ctx-risk-low {
-  background: hsl(142 76% 36%);
-  color: white;
-}
-
-.ctx-risk-medium {
-  background: hsl(38 92% 50%);
-  color: white;
-}
-
-.ctx-risk-high {
-  background: hsl(0 84% 50%);
-  color: white;
-}
-
-.ctx-mitigation {
-  padding: 0.75rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.375rem;
-  margin-bottom: 0.75rem;
-}
-
-.ctx-mitigation-label {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: 0.375rem;
-}
-
-.ctx-mitigation-text {
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-  margin: 0;
-  line-height: 1.5;
-}
-
-.ctx-risk-section {
-  margin-bottom: 0.75rem;
-}
-
-.ctx-risk-label {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: 0.375rem;
-}
-
-.ctx-risk-list {
-  margin: 0;
-  padding-left: 1.25rem;
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-}
-
-.ctx-risk-list li {
-  margin-bottom: 0.25rem;
-}
-
-.ctx-affected {
-  margin-top: 0.75rem;
-}
-
-.ctx-affected-label {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: 0.375rem;
-}
-
-.ctx-affected-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-}
-
-.ctx-affected-tag {
-  padding: 0.25rem 0.5rem;
-  background: hsl(var(--warning) / 0.15);
-  color: hsl(38 92% 40%);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-}
-
-/* Mitigation Strategy List */
-.ctx-mitigation-list {
-  margin: 0;
-  padding-left: 1.5rem;
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-  line-height: 1.6;
-}
-
-.ctx-mitigation-list li {
-  margin-bottom: 0.5rem;
-  padding-left: 0.25rem;
-}
-
-.ctx-mitigation-list li:last-child {
-  margin-bottom: 0;
-}
-
-/* Dependencies Table */
-.ctx-deps-table {
-  border: 1px solid hsl(var(--border) / 0.5);
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.ctx-deps-table-header {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 1rem;
-  padding: 0.625rem 1rem;
-  background: hsl(var(--muted) / 0.4);
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.ctx-deps-table-header span {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.ctx-deps-table-header .ctx-deps-col-from {
-  text-align: left;
-}
-
-.ctx-deps-table-header .ctx-deps-col-type {
-  text-align: center;
-}
-
-.ctx-deps-table-header .ctx-deps-col-to {
-  text-align: center;
-}
-
-.ctx-deps-table-body {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.ctx-deps-row {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 1rem;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid hsl(var(--border) / 0.3);
-  align-items: center;
-  text-align: center;
-}
-
-.ctx-deps-row:last-child {
-  border-bottom: none;
-}
-
-.ctx-deps-row:hover {
-  background: hsl(var(--muted) / 0.2);
-}
-
-.ctx-deps-col-from {
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-  word-break: break-word;
-  text-align: left;
-}
-
-.ctx-deps-col-to {
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-  word-break: break-word;
-  text-align: center;
-}
-
-.ctx-deps-col-type {
-  text-align: center;
-}
-
-.ctx-deps-type-badge {
-  display: inline-block;
-  padding: 0.25rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.7rem;
-  font-weight: 500;
-  white-space: nowrap;
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-}
-
-.ctx-deps-type-composition {
-  background: hsl(217 91% 60% / 0.15);
-  color: hsl(217 91% 45%);
-}
-
-.ctx-deps-type-inheritance {
-  background: hsl(142 76% 36% / 0.15);
-  color: hsl(142 76% 30%);
-}
-
-.ctx-deps-type-produces,
-.ctx-deps-type-provides {
-  background: hsl(280 68% 60% / 0.15);
-  color: hsl(280 68% 45%);
-}
-
-.ctx-deps-type-consumes {
-  background: hsl(38 92% 50% / 0.15);
-  color: hsl(38 92% 40%);
-}
-
-.ctx-deps-type-config-dependency {
-  background: hsl(0 84% 60% / 0.12);
-  color: hsl(0 84% 45%);
-}
-
-.ctx-flow-target code {
-  font-size: 0.7rem;
-  color: hsl(var(--foreground));
-  word-break: break-all;
-}
-
-/* Gray text consistency - unified label style */
-.ctx-meta-label,
-.ctx-stack-label,
-.ctx-conv-label,
-.ctx-mitigation-label,
-.ctx-risk-label,
-.ctx-affected-label {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* ===================================
-   Lite Task Drawer Cards
-   =================================== */
-.lite-card {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  overflow: hidden;
-}
-
-.lite-card-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.lite-card-icon {
-  font-size: 1rem;
-}
-
-.lite-card-title {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-  flex: 1;
-}
-
-.lite-count-badge {
-  padding: 0.125rem 0.5rem;
-  background: hsl(var(--primary) / 0.15);
-  color: hsl(var(--primary));
-  border-radius: 9999px;
-  font-size: 0.7rem;
-  font-weight: 600;
-}
-
-.lite-card-body {
-  padding: 1rem;
-}
-
-/* Description */
-.lite-description {
-  margin: 0;
-  font-size: 0.85rem;
-  line-height: 1.6;
-  color: hsl(var(--foreground));
-}
-
-/* Scope */
-.lite-scope-box {
-  padding: 0.625rem 0.875rem;
-  background: hsl(var(--muted) / 0.5);
-  border-radius: 0.375rem;
-  border-left: 3px solid hsl(var(--primary));
-}
-
-.lite-scope-box code {
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-  word-break: break-all;
-}
-
-/* Acceptance Checklist */
-.lite-checklist {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.lite-check-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.lite-check-item:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.lite-check-icon {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid hsl(var(--muted-foreground) / 0.4);
-  border-radius: 50%;
-  font-size: 0.7rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.lite-check-text {
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: hsl(var(--foreground));
-}
-
-/* Reference */
-.lite-ref-section {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.lite-ref-section:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.lite-ref-label {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: hsl(var(--primary));
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: 0.375rem;
-}
-
-.lite-ref-value {
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-  line-height: 1.5;
-}
-
-.lite-ref-files {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.lite-file-tag {
-  display: block;
-  padding: 0.375rem 0.625rem;
-  background: hsl(var(--muted) / 0.5);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  color: hsl(var(--foreground));
-}
-
-/* Dependencies */
-.lite-deps-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-}
-
-.lite-dep-tag {
-  padding: 0.25rem 0.625rem;
-  background: hsl(var(--warning) / 0.15);
-  color: hsl(38 92% 40%);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-/* Implementation Steps */
-.lite-impl-steps {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.lite-impl-step {
-  display: flex;
-  gap: 0.875rem;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.lite-impl-step:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.lite-step-num {
-  flex-shrink: 0;
-  width: 1.75rem;
-  height: 1.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: hsl(var(--primary));
-  color: white;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-}
-
-.lite-step-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.lite-step-text {
-  margin: 0;
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: hsl(var(--foreground));
-}
-
-/* Modification Points */
-.lite-mod-points {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.lite-mod-card {
-  padding: 0.875rem 1rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-left: 3px solid hsl(var(--primary));
-  border-radius: 0.375rem;
-}
-
-.lite-mod-header {
-  margin-bottom: 0.5rem;
-}
-
-.lite-mod-file {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: hsl(var(--primary));
-  word-break: break-all;
-}
-
-.lite-mod-target {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.375rem;
-  font-size: 0.75rem;
-}
-
-.lite-mod-label {
-  color: hsl(var(--muted-foreground));
-  font-weight: 500;
-}
-
-.lite-mod-value {
-  color: hsl(var(--foreground));
-}
-
-.lite-mod-change {
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: hsl(var(--foreground));
-  padding-top: 0.375rem;
-  border-top: 1px solid hsl(var(--border) / 0.5);
-}
-
-/* ==========================================
-   SESSION TASK DRAWER STYLES
-   ========================================== */
-
-/* Pre-Analysis Step Meta */
-.lite-step-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.375rem;
-  font-size: 0.75rem;
-}
-
-.lite-step-label {
-  color: hsl(var(--muted-foreground));
-  font-weight: 500;
-}
-
-.lite-step-value {
-  color: hsl(var(--foreground));
-}
-
-.lite-step-commands {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  margin-top: 0.5rem;
-}
-
-.lite-cmd-tag {
-  display: inline-block;
-  padding: 0.25rem 0.625rem;
-  background: hsl(var(--muted));
-  border-radius: 0.25rem;
-  font-size: 0.7rem;
-  color: hsl(var(--foreground));
-  font-family: var(--font-mono);
-}
-
-/* Session Implementation Steps */
-.session-impl-steps {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.session-impl-step {
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.session-step-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border-bottom: 1px solid hsl(var(--border) / 0.5);
-}
-
-.session-step-title {
-  flex: 1;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.session-step-desc {
-  padding: 0.75rem 1rem;
-  font-size: 0.8rem;
-  line-height: 1.6;
-  color: hsl(var(--muted-foreground));
-  border-bottom: 1px solid hsl(var(--border) / 0.3);
-}
-
-.session-step-section {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid hsl(var(--border) / 0.3);
-}
-
-.session-step-section:last-child {
-  border-bottom: none;
-}
-
-.session-section-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.625rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-}
-
-.session-section-icon {
-  font-size: 0.875rem;
-}
-
-/* Session Modifications List */
-.session-mods-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.session-mod-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.session-mod-change {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  padding-left: 0.5rem;
-  border-left: 2px solid hsl(var(--border));
-}
-
-/* Session Logic Flow */
-.session-flow-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.session-flow-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-}
-
-.session-flow-num {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: hsl(var(--primary) / 0.15);
-  color: hsl(var(--primary));
-  border-radius: 50%;
-  font-size: 0.65rem;
-  font-weight: 700;
-}
-
-.session-flow-text {
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: hsl(var(--foreground));
-}
-
-/* Session Step Dependencies */
-.session-step-deps {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 1rem;
-  background: hsl(var(--warning) / 0.05);
-}
-
-.session-deps-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Session Files List */
-.session-files-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.session-file-item {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem 0.875rem;
-  background: hsl(var(--muted) / 0.3);
-  border: 1px solid hsl(var(--border) / 0.5);
-  border-radius: 0.375rem;
-  text-decoration: none;
-  transition: all 0.15s ease;
-}
-
-.session-file-item:hover {
-  background: hsl(var(--muted) / 0.5);
-  border-color: hsl(var(--primary) / 0.5);
-}
-
-.session-file-icon {
-  font-size: 0.875rem;
-  flex-shrink: 0;
-}
-
-.session-file-path {
-  flex: 1;
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-  word-break: break-all;
-}
-
-.session-file-action {
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  color: hsl(var(--primary));
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.session-file-item:hover .session-file-action {
-  opacity: 1;
-}
-
-/* Session Test Commands */
-.session-test-commands {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.session-test-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.625rem 0.875rem;
-  background: hsl(var(--muted) / 0.2);
-  border: 1px solid hsl(var(--border) / 0.5);
-  border-radius: 0.375rem;
-}
-
-.session-test-label {
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: hsl(var(--primary));
-  text-transform: uppercase;
-}
-
-.session-test-cmd {
-  font-size: 0.8rem;
-  color: hsl(var(--foreground));
-  background: hsl(var(--muted) / 0.5);
-  padding: 0.375rem 0.5rem;
-  border-radius: 0.25rem;
-  font-family: var(--font-mono);
-  word-break: break-all;
-}
-
-/* ==========================================
-   TASK STATUS MANAGEMENT
-   ========================================== */
-
-/* Bulk Actions - Inside toolbar */
-.task-bulk-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.bulk-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  margin-right: 0.5rem;
-}
-
-.bulk-action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.bulk-action-btn:hover {
-  background: hsl(var(--muted));
-  border-color: hsl(var(--primary) / 0.5);
-}
-
-.bulk-action-btn.completed {
-  background: hsl(142 76% 36% / 0.1);
-  border-color: hsl(142 76% 36% / 0.3);
-  color: hsl(142 76% 30%);
-}
-
-.bulk-action-btn.completed:hover {
-  background: hsl(142 76% 36% / 0.2);
-}
-
-.bulk-icon {
-  font-size: 0.8rem;
-}
-
-.bulk-divider {
-  width: 1px;
-  height: 1.5rem;
-  background: hsl(var(--border));
-  margin: 0 0.25rem;
-}
-
-/* Task Status Control */
-.task-status-control {
-  flex-shrink: 0;
-}
-
-.task-status-select {
-  padding: 0.375rem 0.625rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  cursor: pointer;
-  transition: all 0.15s ease;
-  min-width: 120px;
-}
-
-.task-status-select:hover {
-  border-color: hsl(var(--primary) / 0.5);
-}
-
-.task-status-select:focus {
-  outline: none;
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
-}
-
-.task-status-select.pending {
-  background: hsl(var(--muted) / 0.3);
-  color: hsl(var(--muted-foreground));
-}
-
-.task-status-select.in_progress {
-  background: hsl(38 92% 50% / 0.15);
-  border-color: hsl(38 92% 50% / 0.3);
-  color: hsl(38 92% 35%);
-}
-
-.task-status-select.completed {
-  background: hsl(142 76% 36% / 0.15);
-  border-color: hsl(142 76% 36% / 0.3);
-  color: hsl(142 76% 30%);
-}
-
-/* Toast Notifications */
-.status-toast {
-  position: fixed;
-  bottom: 2rem;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  z-index: 10000;
-  animation: toastSlideUp 0.3s ease;
-  box-shadow: 0 4px 12px hsl(0 0% 0% / 0.15);
-}
-
-.status-toast.success {
-  background: hsl(142 76% 36%);
-  color: white;
-}
-
-.status-toast.error {
-  background: hsl(0 72% 51%);
-  color: white;
-}
-
-.status-toast.info {
-  background: hsl(var(--primary));
-  color: white;
-}
-
-.status-toast.fade-out {
-  animation: toastFadeOut 0.3s ease forwards;
-}
-
-@keyframes toastSlideUp {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-@keyframes toastFadeOut {
-  to {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-1rem);
-  }
-}
-
-/* Task Item Header Adjustments */
-.detail-task-item .task-item-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.detail-task-item .task-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-task-item .task-title:hover {
-  color: hsl(var(--primary));
-}
-