@libxai/board 1.9.11 → 1.9.12

package/dist/styles.css

@@ -845,2489 +845,6 @@
 }
 
 
-/* Card Detail Modal - Full card editing experience */
-
-
-/**
- * Card Detail Modal Styles
- * Using ASAKAA Design System v2.0
- */
-
-
-/* ==========================================================================
-   OVERLAY
-   ========================================================================== */
-
-
-.card-detail-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, var(--opacity-strong));
-  backdrop-filter: blur(8px);
-  z-index: var(--z-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-6);
-  animation: overlay-in var(--duration-normal) var(--ease-smooth);
-}
-
-
-@keyframes overlay-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-
-/* ==========================================================================
-   MODAL CONTAINER
-   ========================================================================== */
-
-
-.card-detail-modal {
-  width: 900px;
-  max-width: 100%;
-  max-height: 90vh;
-  background: rgba(20, 20, 20, var(--opacity-opaque));
-  border: 1px solid rgba(255, 255, 255, var(--opacity-faint));
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-glass-lg);
-  backdrop-filter: blur(24px) saturate(180%);
-  overflow: hidden;
-  animation: modal-in var(--duration-normal) var(--ease-bounce);
-  display: flex;
-  flex-direction: column;
-}
-
-
-@keyframes modal-in {
-  from {
-    opacity: 0;
-    transform: scale(0.96) translateY(var(--space-3));
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-
-/* ==========================================================================
-   HEADER
-   ========================================================================== */
-
-
-.card-detail-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-6) var(--space-8);
-  border-bottom: 1px solid rgba(255, 255, 255, var(--opacity-subtle));
-  background: rgba(0, 0, 0, var(--opacity-light));
-}
-
-
-.card-detail-header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  flex: 1;
-  min-width: 0;
-}
-
-
-.card-detail-priority-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-}
-
-
-.card-detail-title {
-  font-size: var(--font-xl);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-
-.card-detail-title-input {
-  flex: 1;
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border: 1px solid rgba(255, 255, 255, var(--opacity-light));
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
-  color: var(--color-text-primary);
-  font-size: var(--font-xl);
-  font-weight: var(--font-semibold);
-  outline: none;
-  transition: all var(--duration-fast) var(--ease-smooth);
-}
-
-
-.card-detail-title-input:focus {
-  background: rgba(255, 255, 255, var(--opacity-faint));
-  border-color: rgba(0, 229, 204, var(--opacity-medium));
-}
-
-
-.card-detail-header-actions {
-  display: flex;
-  gap: var(--space-2);
-  align-items: center;
-}
-
-
-/* ==========================================================================
-   BUTTONS
-   ========================================================================== */
-
-
-.card-detail-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-4);
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border: 1px solid rgba(255, 255, 255, var(--opacity-faint));
-  border-radius: var(--radius-md);
-  color: rgba(255, 255, 255, var(--opacity-opaque));
-  font-size: var(--font-sm);
-  font-weight: var(--font-medium);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-smooth);
-  white-space: nowrap;
-}
-
-
-.card-detail-btn:hover {
-  background: rgba(255, 255, 255, var(--opacity-faint));
-  border-color: rgba(255, 255, 255, var(--opacity-light));
-}
-
-
-.card-detail-btn:disabled {
-  opacity: var(--opacity-medium);
-  cursor: not-allowed;
-}
-
-
-.card-detail-btn-primary {
-  background: #00E5CC;
-  border-color: rgba(0, 229, 204, var(--opacity-medium));
-  color: white;
-}
-
-
-.card-detail-btn-primary:hover {
-  background: #00C4AE;
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-
-.card-detail-btn-danger {
-  background: rgba(239, 68, 68, var(--opacity-faint));
-  border-color: rgba(239, 68, 68, var(--opacity-medium));
-  color: #EF4444;
-}
-
-
-.card-detail-btn-danger:hover {
-  background: rgba(239, 68, 68, var(--opacity-light));
-  border-color: rgba(239, 68, 68, var(--opacity-medium));
-}
-
-
-.card-detail-btn-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border: 1px solid rgba(255, 255, 255, var(--opacity-faint));
-  border-radius: var(--radius-md);
-  color: rgba(255, 255, 255, var(--opacity-strong));
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-smooth);
-}
-
-
-.card-detail-btn-close:hover {
-  background: rgba(255, 255, 255, var(--opacity-faint));
-  color: var(--color-text-primary);
-}
-
-
-/* ==========================================================================
-   TABS
-   ========================================================================== */
-
-
-.card-detail-tabs {
-  display: flex;
-  gap: var(--space-1);
-  padding: 0 var(--space-8);
-  border-bottom: 1px solid rgba(255, 255, 255, var(--opacity-subtle));
-  background: rgba(0, 0, 0, var(--opacity-light));
-}
-
-
-.card-detail-tab {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-4) var(--space-5);
-  background: transparent;
-  border: none;
-  color: rgba(255, 255, 255, var(--opacity-strong));
-  font-size: var(--font-sm);
-  font-weight: var(--font-medium);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-smooth);
-  border-bottom: 2px solid transparent;
-}
-
-
-.card-detail-tab:hover {
-  color: rgba(255, 255, 255, var(--opacity-opaque));
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-}
-
-
-.card-detail-tab.active {
-  color: var(--color-text-primary);
-  border-bottom-color: #00E5CC;
-}
-
-
-.card-detail-tab-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 var(--space-2);
-  background: rgba(255, 255, 255, var(--opacity-light));
-  border-radius: var(--radius-full);
-  font-size: var(--font-2xs);
-  font-weight: var(--font-semibold);
-  color: white;
-}
-
-
-.card-detail-tab.active .card-detail-tab-badge {
-  background: #00E5CC;
-  color: white;
-}
-
-
-.card-detail-tab-badge-ai {
-  background: #00E5CC;
-  color: white;
-}
-
-
-/* ==========================================================================
-   CONTENT
-   ========================================================================== */
-
-
-.card-detail-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-8);
-}
-
-
-.card-detail-content::-webkit-scrollbar {
-  width: 10px;
-}
-
-
-.card-detail-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-
-.card-detail-content::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, var(--opacity-light));
-  border-radius: var(--radius-sm);
-}
-
-
-.card-detail-content::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, var(--opacity-medium));
-}
-
-
-/* ==========================================================================
-   DETAILS TAB
-   ========================================================================== */
-
-
-.card-detail-details {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-}
-
-
-.card-detail-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-
-.card-detail-section-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-6);
-}
-
-
-.card-detail-label {
-  font-size: var(--font-xs);
-  font-weight: var(--font-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: rgba(255, 255, 255, var(--opacity-medium));
-}
-
-
-.card-detail-text {
-  font-size: var(--font-sm);
-  color: rgba(255, 255, 255, var(--opacity-opaque));
-  line-height: 1.6;
-}
-
-
-.card-detail-textarea {
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border: 1px solid rgba(255, 255, 255, var(--opacity-light));
-  border-radius: var(--radius-md);
-  padding: var(--space-3);
-  color: var(--color-text-primary);
-  font-size: var(--font-sm);
-  line-height: 1.6;
-  resize: vertical;
-  outline: none;
-  transition: all var(--duration-fast) var(--ease-smooth);
-  font-family: var(--font-sans);
-}
-
-
-.card-detail-textarea:focus {
-  background: rgba(255, 255, 255, var(--opacity-faint));
-  border-color: rgba(0, 229, 204, var(--opacity-medium));
-}
-
-
-.card-detail-empty {
-  font-size: var(--font-sm);
-  color: rgba(255, 255, 255, var(--opacity-medium));
-  font-style: italic;
-}
-
-
-.card-detail-users {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-}
-
-
-.card-detail-user {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 6px 12px;
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border-radius: var(--radius-md);
-  font-size: var(--font-sm);
-  color: rgba(255, 255, 255, var(--opacity-opaque));
-}
-
-
-.card-detail-user-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius-full);
-  font-size: var(--font-2xs);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-}
-
-
-.card-detail-priority {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: 15px;
-  color: rgba(255, 255, 255, var(--opacity-opaque));
-}
-
-
-.card-detail-labels {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-
-.card-detail-label-tag {
-  display: inline-flex;
-  align-items: center;
-  height: 24px;
-  padding: 0 10px;
-  background: rgba(0, 229, 204, 0.15);
-  border: 1px solid rgba(0, 229, 204, 0.3);
-  border-radius: var(--radius-lg);
-  font-size: var(--font-xs);
-  color: #60A5FA;
-  font-weight: var(--font-medium);
-}
-
-
-.card-detail-dependencies {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-
-.card-detail-dependency {
-  display: inline-flex;
-  align-items: center;
-  height: 24px;
-  padding: 0 10px;
-  background: rgba(139, 92, 246, 0.15);
-  border: 1px solid rgba(139, 92, 246, 0.3);
-  border-radius: var(--radius-lg);
-  font-size: var(--font-xs);
-  color: #A78BFA;
-  font-weight: var(--font-medium);
-}
-
-
-/* ==========================================================================
-   COMMENTS TAB
-   ========================================================================== */
-
-
-.card-detail-comments {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-}
-
-
-.card-detail-comment-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-  padding: var(--space-5);
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border-radius: var(--radius-lg);
-  border: 1px solid rgba(255, 255, 255, var(--opacity-subtle));
-}
-
-
-.card-detail-comment-textarea {
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border: 1px solid rgba(255, 255, 255, var(--opacity-light));
-  border-radius: var(--radius-md);
-  padding: var(--space-3);
-  color: var(--color-text-primary);
-  font-size: var(--font-sm);
-  line-height: 1.6;
-  resize: vertical;
-  outline: none;
-  transition: all var(--duration-fast) var(--ease-smooth);
-  font-family: inherit;
-}
-
-
-.card-detail-comment-textarea:focus {
-  background: rgba(255, 255, 255, var(--opacity-faint));
-  border-color: rgba(0, 229, 204, 0.5);
-}
-
-
-.card-detail-comments-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-
-.card-detail-comment {
-  padding: var(--space-4);
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border-radius: var(--radius-lg);
-  border: 1px solid rgba(255, 255, 255, var(--opacity-subtle));
-}
-
-
-.card-detail-comment-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-
-.card-detail-comment-author {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-
-
-.card-detail-comment-author-name {
-  font-size: var(--font-sm);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-}
-
-
-.card-detail-comment-time {
-  font-size: var(--font-xs);
-  color: rgba(255, 255, 255, var(--opacity-medium));
-}
-
-
-.card-detail-comment-delete {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  color: rgba(255, 255, 255, var(--opacity-medium));
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-smooth);
-}
-
-
-.card-detail-comment-delete:hover {
-  background: rgba(239, 68, 68, 0.15);
-  color: #EF4444;
-}
-
-
-.card-detail-comment-content {
-  font-size: var(--font-sm);
-  color: rgba(255, 255, 255, var(--opacity-opaque));
-  line-height: 1.6;
-  margin: 0;
-  white-space: pre-wrap;
-}
-
-
-/* ==========================================================================
-   ACTIVITY TAB
-   ========================================================================== */
-
-
-.card-detail-activity-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-
-.card-detail-activity-item {
-  display: flex;
-  gap: var(--space-3);
-  padding: var(--space-3);
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border-radius: var(--radius-md);
-}
-
-
-.card-detail-activity-icon {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border-radius: var(--radius-md);
-  font-size: var(--font-base);
-}
-
-
-.card-detail-activity-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-
-.card-detail-activity-text {
-  font-size: var(--font-sm);
-  color: rgba(255, 255, 255, var(--opacity-opaque));
-}
-
-
-.card-detail-activity-text strong {
-  color: var(--color-text-primary);
-}
-
-
-.card-detail-activity-value {
-  color: #00E5CC;
-}
-
-
-.card-detail-activity-time {
-  font-size: var(--font-xs);
-  color: rgba(255, 255, 255, var(--opacity-medium));
-}
-
-
-/* ==========================================================================
-   AI TAB
-   ========================================================================== */
-
-
-.card-detail-ai {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-}
-
-
-.card-detail-ai-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-
-.card-detail-ai-heading {
-  font-size: var(--font-lg);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-  margin: 0 0 12px 0;
-}
-
-
-.card-detail-ai-btn {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-4) var(--space-5);
-  background: rgba(0, 229, 204, var(--opacity-faint));
-  border: 1px solid rgba(0, 229, 204, var(--opacity-medium));
-  border-radius: var(--radius-md);
-  color: var(--color-text-primary);
-  font-size: var(--font-sm);
-  font-weight: var(--font-medium);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-smooth);
-}
-
-
-.card-detail-ai-btn:hover {
-  background: rgba(0, 229, 204, var(--opacity-light));
-  border-color: rgba(0, 229, 204, var(--opacity-medium));
-  transform: translateY(-1px);
-}
-
-
-.card-detail-ai-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-}
-
-
-.card-detail-ai-results {
-  padding: var(--space-5);
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border-radius: var(--radius-lg);
-  border: 1px solid rgba(255, 255, 255, var(--opacity-subtle));
-}
-
-
-.card-detail-ai-results h4 {
-  font-size: var(--font-base);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-  margin: 0 0 16px 0;
-}
-
-
-.card-detail-ai-suggestion {
-  display: flex;
-  gap: var(--space-3);
-  padding: var(--space-3);
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border-radius: var(--radius-md);
-  margin-bottom: 12px;
-}
-
-
-.card-detail-ai-suggestion:last-child {
-  margin-bottom: 0;
-}
-
-
-.card-detail-ai-suggestion-name {
-  font-size: var(--font-sm);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-  margin-bottom: 4px;
-}
-
-
-.card-detail-ai-suggestion-reason {
-  font-size: var(--font-xs);
-  color: rgba(255, 255, 255, var(--opacity-strong));
-  margin-bottom: 4px;
-}
-
-
-.card-detail-ai-suggestion-confidence {
-  font-size: var(--font-xs);
-  color: #00E5CC;
-  font-weight: var(--font-medium);
-}
-
-
-.card-detail-ai-subtask {
-  padding: var(--space-3);
-  background: rgba(255, 255, 255, var(--opacity-subtle));
-  border-radius: var(--radius-md);
-  margin-bottom: 8px;
-}
-
-
-.card-detail-ai-subtask:last-child {
-  margin-bottom: 0;
-}
-
-
-.card-detail-ai-subtask-title {
-  font-size: var(--font-sm);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-  margin-bottom: 4px;
-}
-
-
-.card-detail-ai-subtask-desc {
-  font-size: var(--font-xs);
-  color: rgba(255, 255, 255, var(--opacity-strong));
-  margin-bottom: 6px;
-}
-
-
-.card-detail-ai-subtask-time {
-  font-size: var(--font-xs);
-  color: #00E5CC;
-  font-weight: var(--font-medium);
-}
-
-
-.card-detail-ai-effort {
-  text-align: center;
-  padding: var(--space-5);
-}
-
-
-.card-detail-ai-effort-hours {
-  font-size: 32px;
-  font-weight: 700;
-  color: #00E5CC;
-  margin-bottom: 8px;
-}
-
-
-.card-detail-ai-effort-confidence {
-  font-size: var(--font-sm);
-  color: rgba(255, 255, 255, var(--opacity-strong));
-}
-
-
-.card-detail-ai-insights {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-
-.card-detail-ai-insights h4 {
-  font-size: var(--font-base);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-  margin: 0 0 12px 0;
-}
-
-
-.card-detail-ai-insight {
-  padding: var(--space-4);
-  border-radius: var(--radius-md);
-  border-left: 3px solid;
-}
-
-
-.card-detail-ai-insight-low {
-  background: rgba(107, 114, 128, 0.1);
-  border-color: #6B7280;
-}
-
-
-.card-detail-ai-insight-medium {
-  background: rgba(0, 229, 204, 0.1);
-  border-color: #00E5CC;
-}
-
-
-.card-detail-ai-insight-high {
-  background: rgba(245, 158, 11, 0.1);
-  border-color: #F59E0B;
-}
-
-
-.card-detail-ai-insight-critical {
-  background: rgba(239, 68, 68, 0.1);
-  border-color: #EF4444;
-}
-
-
-.card-detail-ai-insight-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-
-.card-detail-ai-insight-title {
-  font-size: var(--font-sm);
-  font-weight: var(--font-semibold);
-  color: var(--color-text-primary);
-}
-
-
-.card-detail-ai-insight-severity {
-  font-size: var(--font-2xs);
-  font-weight: var(--font-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  padding: 4px 8px;
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, var(--opacity-light));
-}
-
-
-.card-detail-ai-insight-desc {
-  font-size: var(--font-xs);
-  color: rgba(255, 255, 255, var(--opacity-strong));
-  line-height: 1.5;
-  margin: 0 0 8px 0;
-}
-
-
-.card-detail-ai-insight-action {
-  font-size: var(--font-xs);
-  color: #00E5CC;
-  padding: 8px 12px;
-  background: rgba(0, 229, 204, 0.1);
-  border-radius: var(--radius-sm);
-}
-
-
-/* ==========================================================================
-   EMPTY STATES
-   ========================================================================== */
-
-
-.card-detail-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-16) var(--space-8);
-  text-align: center;
-}
-
-
-.card-detail-empty-state svg {
-  color: rgba(255, 255, 255, var(--opacity-medium));
-  margin-bottom: 16px;
-}
-
-
-.card-detail-empty-state p {
-  font-size: var(--font-lg);
-  font-weight: var(--font-semibold);
-  color: rgba(255, 255, 255, var(--opacity-strong));
-  margin: 0 0 8px 0;
-}
-
-
-.card-detail-empty-state span {
-  font-size: var(--font-sm);
-  color: rgba(255, 255, 255, var(--opacity-medium));
-}
-
-
-/* ==========================================================================
-   RESPONSIVE
-   ========================================================================== */
-
-
-@media (max-width: 768px) {
-  .card-detail-modal {
-    width: 100%;
-    max-height: 100vh;
-    border-radius: 0;
-  }
-
-  .card-detail-header {
-    padding: var(--space-4) var(--space-5);
-    flex-wrap: wrap;
-  }
-
-  .card-detail-title {
-    font-size: var(--font-lg);
-  }
-
-  .card-detail-tabs {
-    overflow-x: auto;
-    padding: 0 var(--space-5);
-  }
-
-  .card-detail-content {
-    padding: var(--space-5);
-  }
-
-  .card-detail-section-row {
-    grid-template-columns: 1fr;
-  }
-
-  .card-detail-header-actions {
-    width: 100%;
-    justify-content: flex-end;
-    margin-top: var(--space-3);
-  }
-}
-
-
-/* Card Detail Modal V2 - Enhanced task detail view */
-
-
-/**
- * CardDetailModal V2.0 - World-Class Task Detail View
- *
- * Design Philosophy:
- * - Hybrid: ClickUp's information density + Linear's speed and flow
- * - Speed above all: <100ms open time
- * - Keyboard-first interaction
- * - Single vertical flow (no sidebars)
- * - Instant inline editing
- * - Zero friction UX
- */
-
-
-/* ============================================================================
-   TOKENS & VARIABLES - Exact Specification
-   ============================================================================ */
-
-
-:root {
-  /* Layout */
-  --modal-v2-backdrop-blur: 8px;
-  --modal-v2-transition: 80ms cubic-bezier(0.16, 1, 0.3, 1);
-  --modal-v2-border-radius: 16px;
-  --modal-v2-padding: 24px;
-  --modal-v2-max-width: 800px;
-
-  /* Typography - Exact specification */
-  --modal-v2-title-size: 32px;
-  --modal-v2-title-weight: 700;
-  --modal-v2-label-size: 12px;
-  --modal-v2-label-weight: 500;
-  --modal-v2-body-size: 16px;
-  --modal-v2-body-weight: 400;
-  --modal-v2-body-line-height: 1.6;
-}
-
-
-/* Dark Theme - Matches Kanban system color #1A1D25 */
-
-
-[data-theme="dark"] {
-  --modal-v2-bg: #1A1D25;
-  --modal-v2-text-primary: #F4F5F8;
-  --modal-v2-text-secondary: #AEB6C0;
-  --modal-v2-text-tertiary: #6B7280;
-  --modal-v2-border: rgba(255, 255, 255, 0.08);
-  --modal-v2-border-hover: rgba(255, 255, 255, 0.15);
-  --modal-v2-bg-secondary: rgba(255, 255, 255, 0.04);
-  --modal-v2-bg-tertiary: rgba(255, 255, 255, 0.06);
-  --modal-v2-comment-bg: #242830;
-  --modal-v2-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
-  --modal-v2-backdrop: rgba(0, 0, 0, 0.7);
-  /* v0.17.21: Accent colors for interactive elements */
-  --color-accent-primary: #00E5CC;
-  --color-accent-hover: #00C4AE;
-  --color-success: #10B981;
-  --color-warning: #F59E0B;
-  --color-error: #EF4444;
-}
-
-
-/* Light Theme - Exact #FFFFFF */
-
-
-[data-theme="light"] {
-  --modal-v2-bg: #FFFFFF;
-  --modal-v2-text-primary: #1A1A1A;
-  --modal-v2-text-secondary: #6B6B6B;
-  --modal-v2-text-tertiary: #9CA3AF;
-  --modal-v2-border: rgba(0, 0, 0, 0.08);
-  --modal-v2-border-hover: rgba(0, 0, 0, 0.15);
-  --modal-v2-bg-secondary: rgba(0, 0, 0, 0.02);
-  --modal-v2-bg-tertiary: rgba(0, 0, 0, 0.04);
-  --modal-v2-comment-bg: #F7F7F8;
-  --modal-v2-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
-  --modal-v2-backdrop: rgba(0, 0, 0, 0.4);
-  /* v0.17.21: Accent colors for interactive elements */
-  --color-accent-primary: #00C4AE;
-  --color-accent-hover: #1D4ED8;
-  --color-success: #059669;
-  --color-warning: #D97706;
-  --color-error: #DC2626;
-}
-
-
-/* Neutral Theme - Exact #F5F5F5 */
-
-
-[data-theme="neutral"] {
-  --modal-v2-bg: #F5F5F5;
-  --modal-v2-text-primary: #1A1A1A;
-  --modal-v2-text-secondary: #6B6B6B;
-  --modal-v2-text-tertiary: #9CA3AF;
-  --modal-v2-border: rgba(0, 0, 0, 0.1);
-  --modal-v2-border-hover: rgba(0, 0, 0, 0.18);
-  --modal-v2-bg-secondary: rgba(0, 0, 0, 0.03);
-  --modal-v2-bg-tertiary: rgba(0, 0, 0, 0.05);
-  --modal-v2-comment-bg: #EBEBEB;
-  --modal-v2-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
-  --modal-v2-backdrop: rgba(0, 0, 0, 0.35);
-  /* v0.17.21: Accent colors for interactive elements */
-  --color-accent-primary: #00C4AE;
-  --color-accent-hover: #1D4ED8;
-  --color-success: #059669;
-  --color-warning: #D97706;
-  --color-error: #DC2626;
-}
-
-
-/* ============================================================================
-   BACKDROP & CONTAINER
-   ============================================================================ */
-
-
-.modal-v2-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--modal-v2-backdrop);
-  backdrop-filter: blur(var(--modal-v2-backdrop-blur));
-  animation: backdropFadeIn var(--modal-v2-transition) ease-out;
-}
-
-
-@keyframes backdropFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-
-.modal-v2-container {
-  position: relative;
-  width: 90%;
-  max-width: var(--modal-v2-max-width);
-  max-height: 92vh;
-  padding: var(--modal-v2-padding);
-  background: var(--modal-v2-bg);
-  border-radius: var(--modal-v2-border-radius);
-  box-shadow: var(--modal-v2-shadow);
-  overflow-y: auto;
-  animation: modalSlideIn 90ms cubic-bezier(0.16, 1, 0.3, 1);
-  /* Removed will-change to fix popover positioning with scroll */
-}
-
-
-@keyframes modalSlideIn {
-  from {
-    opacity: 0;
-    transform: scale(0.96) translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-
-/* Custom scrollbar */
-
-
-.modal-v2-container::-webkit-scrollbar {
-  width: 8px;
-}
-
-
-.modal-v2-container::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-
-.modal-v2-container::-webkit-scrollbar-thumb {
-  background: var(--modal-v2-border);
-  border-radius: 4px;
-}
-
-
-.modal-v2-container::-webkit-scrollbar-thumb:hover {
-  background: var(--modal-v2-border-hover);
-}
-
-
-/* ============================================================================
-   HEADER - Title & AI Prompt
-   ============================================================================ */
-
-
-.modal-v2-header {
-  position: relative;
-  margin-bottom: 16px;
-}
-
-
-.modal-v2-title {
-  font-size: var(--modal-v2-title-size);
-  font-weight: var(--modal-v2-title-weight);
-  line-height: 1.2;
-  letter-spacing: -0.02em;
-  color: var(--modal-v2-text-primary);
-  margin: 0 40px 12px 0;
-  outline: none;
-  transition: all 80ms ease;
-  cursor: text;
-}
-
-
-.modal-v2-title:hover {
-  color: var(--color-accent-primary);
-}
-
-
-.modal-v2-title:focus {
-  outline: 2px solid var(--color-accent-primary);
-  outline-offset: 4px;
-  border-radius: 6px;
-}
-
-
-.modal-v2-ai-prompt {
-  font-size: 14px;
-  font-weight: var(--modal-v2-body-weight);
-  color: var(--modal-v2-text-secondary);
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  transition: all 80ms ease;
-}
-
-
-.modal-v2-ai-prompt:hover {
-  color: var(--modal-v2-text-primary);
-}
-
-
-.modal-v2-ai-icon {
-  font-size: 16px;
-  line-height: 1;
-}
-
-
-.modal-v2-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--modal-v2-text-secondary);
-  cursor: pointer;
-  transition: all 80ms ease;
-}
-
-
-.modal-v2-close:hover {
-  background: var(--modal-v2-bg-tertiary);
-  color: var(--modal-v2-text-primary);
-}
-
-
-/* ============================================================================
-   METADATA GRID - 2x3 Control Panel
-   ============================================================================ */
-
-
-.modal-v2-metadata {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin: 24px 0;
-  padding: 24px 0;
-  border-top: 1px solid var(--modal-v2-border);
-  border-bottom: 1px solid var(--modal-v2-border);
-}
-
-
-.modal-v2-field-wrapper {
-  position: relative;
-  /* Ensure dropdowns appear above other content */
-  z-index: 1;
-}
-
-
-.modal-v2-field-wrapper:has(.modal-v2-popover) {
-  /* Increase z-index when dropdown is open */
-  z-index: 100;
-}
-
-
-/* v0.17.159: Support TagPicker dropdown z-index */
-
-
-.modal-v2-field-wrapper:has([class*="absolute"]) {
-  z-index: 100;
-}
-
-
-.modal-v2-field {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 12px 14px;
-  width: 100%;
-  background: transparent;
-  border: 1px solid var(--modal-v2-border);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 80ms cubic-bezier(0.16, 1, 0.3, 1);
-  text-align: left;
-}
-
-
-.modal-v2-field:hover {
-  background: var(--modal-v2-bg-secondary);
-  border-color: var(--modal-v2-border-hover);
-  transform: translateY(-1px);
-}
-
-
-.modal-v2-field:active {
-  transform: translateY(0);
-}
-
-
-.modal-v2-field-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  font-size: var(--modal-v2-label-size);
-  font-weight: var(--modal-v2-label-weight);
-  color: var(--modal-v2-text-secondary);
-}
-
-
-.modal-v2-field-label svg {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-shortcut {
-  margin-left: auto;
-  padding: 2px 6px;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--modal-v2-text-tertiary);
-  background: var(--modal-v2-bg-tertiary);
-  border-radius: 4px;
-  border: 1px solid var(--modal-v2-border);
-}
-
-
-.modal-v2-field-value {
-  font-size: 14px;
-  font-weight: var(--modal-v2-body-weight);
-  color: var(--modal-v2-text-primary);
-  min-height: 22px;
-  line-height: 1.5;
-}
-
-
-.modal-v2-empty {
-  color: var(--modal-v2-text-tertiary);
-  font-style: italic;
-}
-
-
-.modal-v2-avatars {
-  display: flex;
-  gap: 4px;
-}
-
-
-.modal-v2-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  font-size: 10px;
-  font-weight: 600;
-  color: white;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-
-/* ============================================================================
-   SECTIONS - Description, Subtasks, Activity
-   ============================================================================ */
-
-
-.modal-v2-section {
-  margin: 28px 0;
-}
-
-
-.modal-v2-section-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-
-.modal-v2-section-header svg {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  color: var(--modal-v2-text-secondary);
-}
-
-
-.modal-v2-section-header h2 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--modal-v2-text-primary);
-  margin: 0;
-  flex: 1;
-}
-
-
-.modal-v2-count {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--modal-v2-text-tertiary);
-  padding: 2px 8px;
-  background: var(--modal-v2-bg-tertiary);
-  border-radius: 12px;
-}
-
-
-.modal-v2-ai-button,
-.modal-v2-add-button {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 10px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--modal-v2-text-secondary);
-  background: transparent;
-  border: 1px solid var(--modal-v2-border);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 80ms ease;
-  margin-left: auto;
-}
-
-
-.modal-v2-ai-button:hover,
-.modal-v2-add-button:hover {
-  color: var(--color-accent-primary);
-  border-color: var(--color-accent-primary);
-  background: var(--modal-v2-bg-secondary);
-}
-
-
-/* ============================================================================
-   DESCRIPTION - Inline Markdown Editor
-   ============================================================================ */
-
-
-.modal-v2-content {
-  min-height: 100px;
-  padding: 14px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  cursor: text;
-  transition: all 80ms ease;
-}
-
-
-.modal-v2-content:hover {
-  border-color: var(--modal-v2-border);
-  background: var(--modal-v2-bg-secondary);
-}
-
-
-.modal-v2-content p {
-  margin: 0;
-  font-size: var(--modal-v2-body-size);
-  font-weight: var(--modal-v2-body-weight);
-  line-height: var(--modal-v2-body-line-height);
-  color: var(--modal-v2-text-primary);
-}
-
-
-.modal-v2-placeholder {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--modal-v2-text-tertiary);
-  font-style: italic;
-  font-size: var(--modal-v2-body-size);
-}
-
-
-.modal-v2-placeholder svg {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-}
-
-
-.modal-v2-editor {
-  border: 1px solid var(--color-accent-primary);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--modal-v2-bg);
-}
-
-
-.modal-v2-textarea {
-  width: 100%;
-  min-height: 150px;
-  padding: 14px;
-  font-size: var(--modal-v2-body-size);
-  font-weight: var(--modal-v2-body-weight);
-  line-height: var(--modal-v2-body-line-height);
-  color: var(--modal-v2-text-primary);
-  background: transparent;
-  border: none;
-  resize: vertical;
-  font-family: inherit;
-}
-
-
-.modal-v2-textarea:focus {
-  outline: none;
-}
-
-
-.modal-v2-textarea::-moz-placeholder {
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-textarea::placeholder {
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-editor-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 14px;
-  background: var(--modal-v2-bg-secondary);
-  border-top: 1px solid var(--modal-v2-border);
-}
-
-
-.modal-v2-hint {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-hint svg {
-  width: 14px;
-  height: 14px;
-}
-
-
-.modal-v2-editor-action {
-  padding: 4px 12px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-accent-primary);
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 80ms ease;
-}
-
-
-.modal-v2-editor-action:hover {
-  background: var(--modal-v2-bg-tertiary);
-}
-
-
-/* ============================================================================
-   SUBTASKS - Minimal Table Design
-   ============================================================================ */
-
-
-.modal-v2-subtasks {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-
-.modal-v2-subtask {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: 6px;
-  transition: background 80ms ease;
-}
-
-
-.modal-v2-subtask:hover {
-  background: var(--modal-v2-bg-secondary);
-}
-
-
-.modal-v2-subtask.completed .modal-v2-subtask-title {
-  text-decoration: line-through;
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-subtask-checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--modal-v2-text-secondary);
-  transition: color 80ms ease;
-  padding: 0;
-}
-
-
-.modal-v2-subtask-checkbox:hover {
-  color: var(--color-accent-primary);
-}
-
-
-.modal-v2-subtask-title {
-  flex: 1;
-  font-size: 14px;
-  font-weight: var(--modal-v2-body-weight);
-  color: var(--modal-v2-text-primary);
-}
-
-
-.modal-v2-subtask-delete {
-  display: flex;
-  padding: 4px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--modal-v2-text-tertiary);
-  transition: all 80ms ease;
-  opacity: 0;
-}
-
-
-.modal-v2-subtask:hover .modal-v2-subtask-delete {
-  opacity: 1;
-}
-
-
-.modal-v2-subtask-delete:hover {
-  color: var(--color-error, #EF4444);
-}
-
-
-.modal-v2-subtask-input-row {
-  padding: 10px 12px;
-}
-
-
-.modal-v2-subtask-input {
-  width: 100%;
-  padding: 10px 12px;
-  font-size: 14px;
-  font-weight: var(--modal-v2-body-weight);
-  color: var(--modal-v2-text-primary);
-  background: var(--modal-v2-bg-secondary);
-  border: 1px solid var(--modal-v2-border);
-  border-radius: 6px;
-  font-family: inherit;
-  transition: border-color 80ms ease;
-}
-
-
-.modal-v2-subtask-input:focus {
-  outline: none;
-  border-color: var(--color-accent-primary);
-}
-
-
-.modal-v2-subtask-input::-moz-placeholder {
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-subtask-input::placeholder {
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-/* ============================================================================
-   ACTIVITY & COMMENTS - Vertical Chronological Flow
-   ============================================================================ */
-
-
-.modal-v2-filters {
-  display: flex;
-  gap: 4px;
-  margin-left: auto;
-}
-
-
-.modal-v2-filter {
-  padding: 6px 12px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--modal-v2-text-secondary);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 80ms ease;
-}
-
-
-.modal-v2-filter:hover {
-  background: var(--modal-v2-bg-tertiary);
-}
-
-
-.modal-v2-filter.active {
-  color: var(--color-accent-primary);
-  border-color: var(--color-accent-primary);
-  background: var(--modal-v2-bg-secondary);
-}
-
-
-.modal-v2-comment-input {
-  display: flex;
-  gap: 12px;
-  margin: 16px 0;
-  padding: 16px;
-  background: var(--modal-v2-bg-secondary);
-  border: 1px solid var(--modal-v2-border);
-  border-radius: 8px;
-}
-
-
-.modal-v2-comment-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-
-.modal-v2-comment-textarea {
-  width: 100%;
-  min-height: 40px;
-  max-height: 200px;
-  padding: 10px 12px;
-  font-size: 14px;
-  font-weight: var(--modal-v2-body-weight);
-  line-height: 1.5;
-  color: var(--modal-v2-text-primary);
-  background: transparent;
-  border: 1px solid var(--modal-v2-border);
-  border-radius: 6px;
-  resize: none;
-  transition: border-color 80ms ease;
-  font-family: inherit;
-}
-
-
-.modal-v2-comment-textarea:focus {
-  outline: none;
-  border-color: var(--color-accent-primary);
-}
-
-
-.modal-v2-comment-textarea::-moz-placeholder {
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-comment-textarea::placeholder {
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-comment-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-
-.modal-v2-toolbar-left {
-  display: flex;
-  gap: 4px;
-}
-
-
-.modal-v2-toolbar-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--modal-v2-text-secondary);
-  cursor: pointer;
-  transition: all 80ms ease;
-}
-
-
-.modal-v2-toolbar-button:hover {
-  background: var(--modal-v2-bg-tertiary);
-  color: var(--modal-v2-text-primary);
-}
-
-
-.modal-v2-send-button {
-  padding: 6px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  color: white;
-  background: var(--color-accent-primary);
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 80ms ease;
-}
-
-
-.modal-v2-send-button:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-}
-
-
-.modal-v2-send-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-
-.modal-v2-timeline {
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-
-.modal-v2-activity-item {
-  display: flex;
-  gap: 12px;
-}
-
-
-.modal-v2-activity-item.comment-item .modal-v2-avatar {
-  width: 32px;
-  height: 32px;
-  font-size: 12px;
-  flex-shrink: 0;
-}
-
-
-.modal-v2-activity-content {
-  flex: 1;
-  min-width: 0;
-}
-
-
-.modal-v2-activity-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-
-.modal-v2-activity-user {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--modal-v2-text-primary);
-}
-
-
-.modal-v2-activity-time {
-  font-size: 12px;
-  font-weight: var(--modal-v2-body-weight);
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-comment-body {
-  padding: 12px 14px;
-  font-size: 14px;
-  line-height: var(--modal-v2-body-line-height);
-  color: var(--modal-v2-text-primary);
-  background: var(--modal-v2-comment-bg);
-  border-radius: 8px;
-  border: 1px solid var(--modal-v2-border);
-}
-
-
-.modal-v2-history-item {
-  padding: 12px;
-  border-radius: 8px;
-  transition: background 80ms ease;
-}
-
-
-.modal-v2-history-item:hover {
-  background: var(--modal-v2-bg-secondary);
-}
-
-
-.modal-v2-history-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  background: var(--modal-v2-bg-tertiary);
-  color: var(--modal-v2-text-secondary);
-  font-size: 14px;
-}
-
-
-.modal-v2-history-text {
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--modal-v2-text-secondary);
-  margin-bottom: 4px;
-}
-
-
-.modal-v2-history-text .modal-v2-activity-user {
-  color: var(--modal-v2-text-primary);
-  font-weight: 600;
-}
-
-
-.modal-v2-empty {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-empty p {
-  margin: 8px 0 4px;
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--modal-v2-text-secondary);
-}
-
-
-.modal-v2-empty span {
-  font-size: 14px;
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-/* ============================================================================
-   POPOVERS - Dropdown Menus
-   ============================================================================ */
-
-
-.modal-v2-popover {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  padding: 6px;
-  background: var(--modal-v2-bg);
-  border: 1px solid var(--modal-v2-border);
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-  max-height: 300px;
-  overflow-y: auto;
-  animation: popoverSlideIn 100ms ease-out;
-}
-
-
-@keyframes popoverSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-
-.modal-v2-popover::-webkit-scrollbar {
-  width: 6px;
-}
-
-
-.modal-v2-popover::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-
-.modal-v2-popover::-webkit-scrollbar-thumb {
-  background: var(--modal-v2-border);
-  border-radius: 3px;
-}
-
-
-.modal-v2-popover-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 12px;
-  font-size: 14px;
-  font-weight: var(--modal-v2-body-weight);
-  color: var(--modal-v2-text-primary);
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  text-align: left;
-  cursor: pointer;
-  transition: all 80ms ease;
-}
-
-
-.modal-v2-popover-item:hover {
-  background: var(--modal-v2-bg-tertiary);
-}
-
-
-.modal-v2-popover-item.active {
-  background: var(--modal-v2-bg-secondary);
-  color: var(--color-accent-primary);
-  font-weight: 500;
-}
-
-
-/* Priority colors */
-
-
-.modal-v2-popover-item.priority-low {
-  color: var(--color-success, #10B981);
-}
-
-
-.modal-v2-popover-item.priority-medium {
-  color: var(--color-warning, #F59E0B);
-}
-
-
-.modal-v2-popover-item.priority-high {
-  color: var(--color-error, #EF4444);
-}
-
-
-.modal-v2-popover-item.priority-urgent {
-  color: var(--color-error, #DC2626);
-  font-weight: 600;
-}
-
-
-.modal-v2-avatar-small {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  font-size: 9px;
-  font-weight: 600;
-  color: white;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-
-.modal-v2-time-input {
-  width: 100%;
-  padding: 8px 12px;
-  font-size: 14px;
-  font-weight: var(--modal-v2-body-weight);
-  color: var(--modal-v2-text-primary);
-  background: var(--modal-v2-bg-secondary);
-  border: 1px solid var(--modal-v2-border);
-  border-radius: 6px;
-  font-family: inherit;
-  transition: border-color 80ms ease;
-}
-
-
-.modal-v2-time-input:focus {
-  outline: none;
-  border-color: var(--color-accent-primary);
-}
-
-
-.modal-v2-time-input::-moz-placeholder {
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-.modal-v2-time-input::placeholder {
-  color: var(--modal-v2-text-tertiary);
-}
-
-
-/* ============================================================================
-   MARKDOWN RENDERING
-   ============================================================================ */
-
-
-.modal-v2-markdown {
-  font-size: var(--modal-v2-body-size);
-  line-height: var(--modal-v2-body-line-height);
-  color: var(--modal-v2-text-primary);
-}
-
-
-.modal-v2-markdown strong {
-  font-weight: 600;
-}
-
-
-.modal-v2-markdown em {
-  font-style: italic;
-}
-
-
-.modal-v2-markdown code {
-  padding: 2px 6px;
-  font-size: 14px;
-  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
-  background: var(--modal-v2-bg-tertiary);
-  border: 1px solid var(--modal-v2-border);
-  border-radius: 4px;
-  color: var(--color-accent-primary);
-}
-
-
-.modal-v2-markdown a {
-  color: var(--color-accent-primary);
-  text-decoration: none;
-  transition: color 80ms ease;
-}
-
-
-.modal-v2-markdown a:hover {
-  color: var(--color-accent-hover);
-  text-decoration: underline;
-}
-
-
-/* ============================================================================
-   RESPONSIVE
-   ============================================================================ */
-
-
-@media (max-width: 768px) {
-  .modal-v2-container {
-    width: 100%;
-    max-width: 100%;
-    height: 100vh;
-    max-height: 100vh;
-    margin: 0;
-    border-radius: 0;
-    padding: 20px;
-  }
-
-  .modal-v2-metadata {
-    grid-template-columns: 1fr;
-  }
-
-  .modal-v2-title {
-    font-size: 24px;
-  }
-}
-
-
-/* ============================================================================
-   COVER IMAGE SECTION
-   ============================================================================ */
-
-
-.modal-v2-cover-section {
-  margin: 0;
-  padding: 0;
-}
-
-
-/* Add Cover Button */
-
-
-.modal-v2-add-cover-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  padding: 16px;
-  margin: 0;
-  border: 2px dashed var(--modal-v2-border);
-  background: transparent;
-  color: var(--modal-v2-text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 0;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-
-.modal-v2-add-cover-button:hover {
-  border-color: var(--asakaa-accent, #00E5CC);
-  color: var(--asakaa-accent, #00E5CC);
-  background: var(--modal-v2-bg-secondary);
-}
-
-
-/* Cover Preview Wrapper */
-
-
-.modal-v2-cover-preview-wrapper {
-  position: relative;
-  width: 100%;
-  margin: 0;
-  overflow: hidden;
-}
-
-
-.modal-v2-cover-image {
-  width: 100%;
-  height: 240px;
-  -o-object-fit: cover;
-     object-fit: cover;
-  display: block;
-}
-
-
-.modal-v2-cover-actions {
-  display: flex;
-  gap: 8px;
-  padding: 12px 24px;
-  background: var(--modal-v2-bg);
-  border-bottom: 1px solid var(--modal-v2-border);
-}
-
-
-.modal-v2-cover-action-button {
-  flex: 1;
-  padding: 8px 16px;
-  border: 1px solid var(--modal-v2-border);
-  background: var(--modal-v2-bg-secondary);
-  color: var(--modal-v2-text-primary);
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-
-.modal-v2-cover-action-button:hover {
-  background: var(--modal-v2-bg-tertiary);
-  border-color: var(--modal-v2-border-hover);
-}
-
-
-.modal-v2-cover-action-button.danger {
-  border-color: #EF4444;
-  color: #EF4444;
-}
-
-
-.modal-v2-cover-action-button.danger:hover {
-  background: #EF4444;
-  color: white;
-}
-
-
-/* Cover Manager Wrapper */
-
-
-.modal-v2-cover-manager-wrapper {
-  padding: 24px;
-  border-bottom: 1px solid var(--modal-v2-border);
-  background: var(--modal-v2-bg);
-}
-
-
-.modal-v2-cover-manager-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-
-.modal-v2-cover-manager-header h3 {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--modal-v2-text-primary);
-  margin: 0;
-}
-
-
-.modal-v2-cover-manager-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--modal-v2-text-secondary);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-
-.modal-v2-cover-manager-close:hover {
-  background: var(--modal-v2-bg-secondary);
-  color: var(--modal-v2-text-primary);
-}
-
-
-/* ============================================================================
-   THEME SPECIFIC OVERRIDES
-   ============================================================================ */
-
-
-/* Neutral theme grayscale filter removed - let colors breathe */
-
-
-/* ============================================================================
-   DATE RANGE PICKER - Theme-aware styles
-   ============================================================================ */
-
-
-/* Dark mode - default */
-
-
-[data-theme="dark"] {
-  --date-picker-bg: #222326;
-  --date-picker-border: rgba(255, 255, 255, 0.15);
-  --date-picker-text-primary: rgba(255, 255, 255, 0.9);
-  --date-picker-text-secondary: rgba(255, 255, 255, 0.7);
-  --date-picker-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
-  --date-picker-btn-bg: rgba(255, 255, 255, 0.05);
-  --date-picker-btn-bg-hover: rgba(255, 255, 255, 0.12);
-  --date-picker-btn-border: rgba(255, 255, 255, 0.15);
-  --date-picker-btn-border-hover: rgba(255, 255, 255, 0.25);
-  --date-picker-input-bg: rgba(255, 255, 255, 0.05);
-}
-
-
-/* Light mode */
-
-
-[data-theme="light"] {
-  --date-picker-bg: #FFFFFF;
-  --date-picker-border: rgba(0, 0, 0, 0.12);
-  --date-picker-text-primary: #1A1A1A;
-  --date-picker-text-secondary: #6B6B6B;
-  --date-picker-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
-  --date-picker-btn-bg: rgba(0, 0, 0, 0.03);
-  --date-picker-btn-bg-hover: rgba(0, 0, 0, 0.08);
-  --date-picker-btn-border: rgba(0, 0, 0, 0.12);
-  --date-picker-btn-border-hover: rgba(0, 0, 0, 0.2);
-  --date-picker-input-bg: rgba(0, 0, 0, 0.02);
-}
-
-
-/* Neutral mode */
-
-
-[data-theme="neutral"] {
-  --date-picker-bg: #F5F5F5;
-  --date-picker-border: rgba(0, 0, 0, 0.1);
-  --date-picker-text-primary: #1A1A1A;
-  --date-picker-text-secondary: #6B6B6B;
-  --date-picker-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
-  --date-picker-btn-bg: rgba(0, 0, 0, 0.04);
-  --date-picker-btn-bg-hover: rgba(0, 0, 0, 0.1);
-  --date-picker-btn-border: rgba(0, 0, 0, 0.1);
-  --date-picker-btn-border-hover: rgba(0, 0, 0, 0.18);
-  --date-picker-input-bg: rgba(0, 0, 0, 0.03);
-}
-
-
-/* Quick select buttons */
-
-
-.date-picker-quick-btn {
-  color: var(--date-picker-text-primary);
-  border-color: var(--date-picker-btn-border);
-  background: var(--date-picker-btn-bg);
-  transition: all 0.15s ease;
-}
-
-
-.date-picker-quick-btn:hover {
-  background: var(--date-picker-btn-bg-hover);
-  border-color: var(--date-picker-btn-border-hover);
-}
-
-
-/* Date inputs */
-
-
-.date-picker-input {
-  background: var(--date-picker-input-bg);
-  border-color: var(--date-picker-btn-border);
-  color: var(--date-picker-text-primary);
-}
-
-
-.date-picker-input:focus {
-  border-color: #00E5CC;
-  box-shadow: 0 0 0 3px rgba(0, 229, 204, 0.2);
-}
-
-
-/* Dark mode specific for date inputs */
-
-
-[data-theme="dark"] .date-picker-input {
-  color-scheme: dark;
-}
-
-
-/* Light/Neutral mode specific for date inputs */
-
-
-[data-theme="light"] .date-picker-input,
-[data-theme="neutral"] .date-picker-input {
-  color-scheme: light;
-}
-
-
-/* Clear button */
-
-
-.date-picker-clear-btn {
-  color: #ef4444;
-  border-color: rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.1);
-  transition: all 0.15s ease;
-}
-
-
-.date-picker-clear-btn:hover {
-  background: rgba(239, 68, 68, 0.2);
-  border-color: rgba(239, 68, 68, 0.4);
-}
-
-
 /* Card Stack - Smart grouping of related cards (v0.6.0) */