/* Lifted verbatim from assignment-result-driller.blade.php.
   Inline it was 165,285 bytes of HTML on every render;
   as a file the browser fetches it once. */
/* Hide old preloader (prevent duplicates) */
.qt-preloader {
  display: none !important;
}

/* Empty State Styles */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  padding: 60px 40px;
  text-align: center;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  border-radius: 12px;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state-icon {
  margin-bottom: 24px;
  color: #6366f1;
  opacity: 0.7;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.empty-state-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
  letter-spacing: -0.5px;
}

.empty-state-text {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 24px 0;
  max-width: 400px;
  line-height: 1.6;
}

.empty-state-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
  }
}

.empty-state-hint i {
  font-size: 16px;
  animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes arrowBounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* Matches Empty State (smaller version) */
.matches-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  min-height: 300px;
}

.empty-state-icon-small {
  margin-bottom: 16px;
  color: #a5b4fc;
  opacity: 0.6;
  animation: float 3s ease-in-out infinite;
}

.empty-state-text-small {
  font-size: 14px;
  color: #9ca3af;
  margin: 0;
  max-width: 250px;
  line-height: 1.5;
}

/* Sleek Badge Loading Indicator */
.loading-badge {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  animation: slideInFromRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideOutToRight {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
  }
}

.loading-badge-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 50px;
  box-shadow: 
    0 10px 40px rgba(99, 102, 241, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 20px rgba(139, 92, 246, 0.4);
  backdrop-filter: blur(10px);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 
      0 10px 40px rgba(99, 102, 241, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 0 20px rgba(139, 92, 246, 0.4);
  }
  50% {
    box-shadow: 
      0 10px 50px rgba(99, 102, 241, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.2) inset,
      0 0 30px rgba(139, 92, 246, 0.6);
  }
}

.loading-badge-spinner {
  width: 24px;
  height: 24px;
}

.spinner-svg {
  width: 100%;
  height: 100%;
  animation: rotate 1.4s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.spinner-circle {
  fill: none;
  stroke: white;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 25;
  animation: dash 1.4s ease-in-out infinite;
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 100;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 60, 100;
    stroke-dashoffset: -30;
  }
  100% {
    stroke-dasharray: 60, 100;
    stroke-dashoffset: -90;
  }
}

.loading-badge-text {
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Floating Submission Navigator Widget - Light Theme */
.submission-nav-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 380px;
  max-height: calc(100vh - 80px); /* Dynamic height based on viewport */
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  z-index: 99990 !important; /* VERY HIGH - above header (50), sidebar (20), dropdowns (9999), everything except modals (99999+) */
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden; /* Ensure child elements don't overflow */
  isolation: isolate; /* Create stacking context */
}

.submission-nav-widget.collapsed {
  max-height: 52px;
  width: auto;
  min-width: 180px;
}

.submission-nav-widget.collapsed .nav-body {
  display: none;
}

.submission-nav-widget.collapsed .nav-header {
  border-bottom: none;
  border-radius: 10px;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 2px solid #f3f4f6;
  user-select: none;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 10px 10px 0 0;
  cursor: grab;
  gap: 8px;
}

.nav-header:active {
  cursor: grabbing;
}

.drag-handle {
  color: #9ca3af;
  font-size: 14px;
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
  flex-shrink: 0;
}

.nav-header:hover .drag-handle {
  opacity: 1;
  color: #6366f1;
}

.submission-nav-widget.dragging {
  opacity: 0.9;
  transition: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
}

.submission-nav-widget.dragging .nav-header {
  cursor: grabbing;
}

.submission-nav-widget.dragging .drag-handle {
  opacity: 1;
  color: #6366f1;
}

.nav-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
}

.nav-title i {
  color: #6366f1;
  font-size: 18px;
}

.nav-badge {
  background: #6366f1;
  color: white;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
  letter-spacing: 0.5px;
}

.toggle-btn {
  background: #f3f4f6;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  position: relative;
  min-width: 32px;
  min-height: 32px;
}

.toggle-btn:hover {
  background: #e5e7eb;
}

.toggle-btn:active {
  transform: scale(0.95);
}

.toggle-btn i {
  font-size: 14px;
  color: #6b7280;
  transition: transform 0.3s;
}

.nav-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  background: #ffffff;
  min-height: 0; /* Critical: allows flex child to shrink and scroll */
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}

.search-box i {
  color: #9ca3af;
  font-size: 15px;
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #1f2937;
}

.search-box input::placeholder {
  color: #9ca3af;
}

.submissions-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  background: #ffffff;
  min-height: 0; /* Critical: allows scrolling in flex container */
  /* Remove fixed max-height to allow dynamic sizing */
}

.submissions-list::-webkit-scrollbar {
  width: 6px;
}

.submissions-list::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 10px;
}

.submissions-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d1d5db 0%, #9ca3af 100%);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.submissions-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
}

/* Firefox scrollbar styling */
.submissions-list {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f9fafb;
  scroll-behavior: smooth; /* Smooth scrolling */
}

/* Scroll indicator shadow at top when scrolled */
.submissions-list::before {
  content: '';
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, transparent 100%);
  z-index: 2; /* Above items but pointer-events none so doesn't block clicks */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.submissions-list.scrolled::before {
  opacity: 1;
}

.submission-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  background: #f9fafb;
  flex-shrink: 0; /* Prevent items from shrinking */
}

.submission-item:hover {
  background: #eff6ff;
  border-color: #dbeafe;
  transform: translateX(2px);
}

.submission-item.active {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.submission-info {
  flex: 1;
  min-width: 0;
}

.submission-name {
  font-weight: 600;
  font-size: 13px;
  color: #1f2937;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.submission-scores {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 980px;
  letter-spacing: -0.01em;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: help;
  border: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.score-badge i {
  font-size: 10px;
  opacity: 0.85;
}

.score-badge.peer-score {
  background: rgba(94, 92, 230, 0.14);
  color: #5e5ce6;
}

.score-badge.peer-score:hover {
  background: rgba(94, 92, 230, 0.22);
  transform: translateY(-1px);
}

.score-badge.web-score {
  background: rgba(10, 132, 255, 0.14);
  color: #0a84ff;
}

.score-badge.web-score:hover {
  background: rgba(10, 132, 255, 0.22);
  transform: translateY(-1px);
}

.score-badge.highest-match {
  background: rgba(255, 159, 10, 0.14);
  color: #c93400;
  font-weight: 600;
}

.score-badge.highest-match:hover {
  background: rgba(255, 159, 10, 0.22);
  transform: translateY(-1px);
}

/* Color variations for highest match based on severity */
.score-badge.highest-match.high-bg {
  background: rgba(255, 59, 48, 0.16);
  color: #d70015;
}

.score-badge.highest-match.medium-bg {
  background: rgba(255, 159, 10, 0.16);
  color: #b25000;
}

.score-badge.highest-match.low-bg {
  background: rgba(52, 199, 89, 0.16);
  color: #248a3d;
}

.score-badge.loading {
  background: rgba(142, 142, 147, 0.12);
  background-size: 200% 100%;
  color: #86868b;
  animation: shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

.similarity-score {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 980px;
  letter-spacing: -0.01em;
}

.similarity-score.low {
  background: rgba(52, 199, 89, 0.16);
  color: #248a3d;
}

.similarity-score.medium {
  background: rgba(255, 159, 10, 0.16);
  color: #b25000;
}

.similarity-score.high {
  background: rgba(255, 59, 48, 0.16);
  color: #d70015;
}

.match-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 980px;
  background: rgba(10, 132, 255, 0.14);
  color: #0a84ff;
  border: none;
  cursor: help;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.match-count-badge:hover {
  background: rgba(10, 132, 255, 0.22);
  transform: translateY(-1px);
}

.match-count-badge i {
  font-size: 10px;
  opacity: 0.85;
}

.match-count-text {
  line-height: 1;
}

.match-count-badge.loading {
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
  background-size: 200% 100%;
  color: #9ca3af;
  border-color: #d1d5db;
  animation: shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}

.match-count-badge.loading .match-count-text {
  color: transparent;
}

.match-count-badge.data-loaded {
  animation: successPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes successPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.view-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: 8px;
  position: relative;
  z-index: 1; /* Ensure clickable above sibling elements */
}

.view-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
}

.view-btn:hover i {
  color: white;
}

.view-btn i {
  font-size: 14px;
  color: #6b7280;
}

.empty-state-nav {
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

.empty-state-nav i {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .submission-nav-widget {
    width: 320px;
    bottom: 16px;
    left: 16px;
  }
  
  .submission-nav-widget.collapsed {
    min-width: 160px;
  }
}

/* Three Card Grid Layout */
.submission-viewer-grid {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 30%) minmax(0, 25%);
  gap: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.viewer-card {
  margin: 0 !important;
  border: 1px solid var(--kt-border-color, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 140px);
  max-height: calc(100vh - 140px);
  min-width: 0;
  max-width: 100%;
}

.viewer-card .kt-card-content {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.viewer-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid #f3f4f6;
  min-height: 56px;
  flex-shrink: 0;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--kt-text-primary, #1f2937);
  flex: 1;
}

/* Code Viewer toolbar — one row, no wrapping, nothing competing for attention */
.code-column .column-header {
  flex-wrap: nowrap;
  gap: 10px;
  padding: 9px 14px;
  min-height: 48px;
  background: #ffffff;
  border-bottom: 1px solid #edeef2;
}

.code-column .header-title {
  gap: 8px;
  min-width: 0;
  font-size: 14px;
}

.code-column .header-label {
  white-space: nowrap;
  flex-shrink: 0;
}

.header-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.1);
  flex-shrink: 0;
}

.code-column .header-icon i {
  font-size: 15px;
  color: var(--kt-primary, #6366f1);
}

/* Which submission is on screen — a quiet chip, not a gradient banner */
.current-submission-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 260px;
  padding: 4px 9px;
  border-radius: 7px;
  background: #f5f5f9;
  border: 1px solid #e9e9f0;
  color: #4b5563;
  font-size: 11.5px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
}

.current-submission-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-submission-badge i {
  font-size: 11px;
  color: #9ca3af;
  flex-shrink: 0;
}

/* Plagiarism Legend — abbreviated, ranges live in the tooltips */
.plagiarism-legend {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 10px;
  border-left: 1px solid #e9eaef;
  flex-shrink: 0;
}

.plagiarism-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default;
}

.plagiarism-legend small {
  font-size: 10.5px;
  color: #9095a3;
  font-weight: 600;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.plagiarism-legend .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.legend-low {
  background: rgba(234, 179, 8, 0.5);
  border-color: rgba(234, 179, 8, 0.6);
}

.legend-dot.legend-medium {
  background: rgba(249, 115, 22, 0.5);
  border-color: rgba(249, 115, 22, 0.7);
}

.legend-dot.legend-high {
  background: rgba(239, 68, 68, 0.5);
  border-color: rgba(239, 68, 68, 0.8);
}

.header-title i {
  color: var(--kt-primary, #6366f1);
  font-size: 18px;
}

.header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.code-column .header-actions .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
}

.code-column .btn-icon:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
  color: var(--kt-primary, #6366f1);
  box-shadow: none;
  transform: none;
}

.code-column .btn-icon.is-active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.45);
  color: #4f46e5;
}

.btn-icon {
  background: #ffffff;
  border: 1.5px solid var(--kt-border-color, #e5e7eb);
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--kt-text-secondary, #6b7280);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-weight: 500;
}

.btn-icon:hover {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  border-color: var(--kt-primary, #6366f1);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

.btn-icon:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

/* Column 1: Code Viewer Styles */
.code-column {
  position: relative;
  background: #ffffff;
  overflow: visible; /* Allow child scrolling to work properly */
}

/* Fullscreen Mode.
   An ancestor of the card carries `position: relative; z-index: 1`, so the card
   can never paint over the app bar however high its own z-index goes. Starting
   below the bar keeps the toolbar (and its exit button) on screen instead of
   hidden underneath it. */
.viewer-card.fullscreen-mode {
  position: fixed !important;
  top: var(--header-height, 58px) !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--header-height, 58px)) !important;
  max-height: calc(100vh - var(--header-height, 58px)) !important;
  z-index: 99995 !important; /* Higher than submission nav widget (99990) to properly overlay in fullscreen */
  border-radius: 0 !important;
  margin: 0 !important;
}

.viewer-card.fullscreen-mode .column-header {
  background: #ffffff !important;
  display: flex !important;
  visibility: visible !important;
}

.viewer-card.fullscreen-mode .header-actions {
  display: flex !important;
  gap: 8px !important;
  visibility: visible !important;
}

.viewer-card.fullscreen-mode .btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.viewer-card.fullscreen-mode .btn-icon i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 15px !important;
  color: var(--kt-primary, #6366f1) !important;
}

/* File bar — the file switcher, the line count and the legend share one row */
.code-meta-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  min-height: 38px;
  background: #fbfbfd;
  border-bottom: 1px solid #edeef2;
  font-size: 12px;
}

.code-meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

/* One file: name it plainly. Several: the tab strip names the active one. */
.file-name {
  display: none;
  min-width: 0;
  font-weight: 600;
  font-size: 12px;
  color: var(--kt-text-primary, #374151);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-column.single-file .file-name {
  display: inline-block;
}

.code-column.single-file .file-tabs {
  display: none;
}

.line-count {
  color: #9095a3;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.file-tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  background: transparent;
  border-bottom: none;
  overflow-x: auto;
  padding: 0;
}

.file-tabs::-webkit-scrollbar {
  height: 4px;
}

.file-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.tab-scroll {
  display: flex;
  gap: 4px;
  padding: 5px 0;
}

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  color: var(--kt-text-secondary, #6b7280);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.tab:hover {
  background: rgba(99, 102, 241, 0.06);
  color: var(--kt-text-primary, #1f2937);
}

.tab.active {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
  border-color: rgba(99, 102, 241, 0.25);
  font-weight: 600;
}

.tab i {
  font-size: 13px;
  opacity: 0.7;
}

.tab-badge {
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
}

.tab.active .tab-badge {
  background: rgba(99, 102, 241, 0.16);
  color: #4f46e5;
}

.code-viewer {
  flex: 1;
  overflow: auto !important; /* Force scrolling on overflow */
  background: linear-gradient(135deg, #fafbfc 0%, #f9fafb 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.2) transparent;
  min-height: 0; /* Critical: allows flex child to shrink and enable scrolling */
  height: 100%; /* Ensure it takes full available height */
}

.code-viewer::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.code-viewer::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.code-viewer::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2);
  border-radius: 5px;
  border: 2px solid #f3f4f6;
}

.code-viewer::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.4);
}

.code-content {
  font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.65;
  font-feature-settings: "liga" 1, "calt" 1; /* Enable ligatures for Fira Code */
}

.code-content.wrap-enabled .line-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.code-line {
  display: flex;
  min-height: 22px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid transparent;
  position: relative;
}

.code-line:hover {
  background: rgba(99, 102, 241, 0.06);
  border-left-color: rgba(99, 102, 241, 0.3);
}

/* Plagiarism Highlight Styles */
.code-line.highlight-low {
  border-left-color: rgba(234, 179, 8, 0.6) !important;
  cursor: help;
}

.code-line.highlight-medium {
  border-left-color: rgba(249, 115, 22, 0.7) !important;
  cursor: help;
}

.code-line.highlight-high {
  border-left-color: rgba(239, 68, 68, 0.8) !important;
  cursor: help;
}

.code-line.highlight-low:hover {
  background: rgba(234, 179, 8, 0.15) !important;
  border-left-width: 4px;
}

.code-line.highlight-medium:hover {
  background: rgba(249, 115, 22, 0.18) !important;
  border-left-width: 4px;
}

.code-line.highlight-high:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-left-width: 4px;
}

/* AI Detection Highlight Styles */
/* AI highlights use a warm intensity scale: yellow (low) -> orange (mid) -> red (>=90%) */
.code-line.highlight-ai-low {
  border-left-color: rgba(234, 179, 8, 0.7) !important;
  cursor: help;
}

.code-line.highlight-ai-medium {
  border-left-color: rgba(249, 115, 22, 0.8) !important;
  cursor: help;
}

.code-line.highlight-ai-high {
  border-left-color: rgba(239, 68, 68, 0.9) !important;
  cursor: help;
}

.code-line.highlight-ai-low:hover {
  background: rgba(234, 179, 8, 0.16) !important;
  border-left-width: 4px;
}

.code-line.highlight-ai-medium:hover {
  background: rgba(249, 115, 22, 0.2) !important;
  border-left-width: 4px;
}

.code-line.highlight-ai-high:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-left-width: 4px;
}

/* Overlapping highlight — a line that is part of BOTH an AI-detection block and a
   peer/web plagiarism match. The warm AI fill is painted inline as background-color;
   here we layer the peer match ON TOP as a distinct indigo diagonal hatch plus an
   indigo left accent, so both highlights stay visible at once. background-image does
   not collide with the inline background-color, so the AI fill shows between stripes.
   Placed after the AI rules so its indigo border wins over the AI border on overlap. */
.code-line.highlight-overlap {
  border-left-color: #6366f1 !important;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.28) 0px,
    rgba(99, 102, 241, 0.28) 2px,
    transparent 2px,
    transparent 9px
  ) !important;
  cursor: help;
}

/* Re-assert the hatch on hover (the per-type :hover rules use the `background`
   shorthand with !important, which would otherwise clear background-image). */
.code-line.highlight-overlap:hover {
  border-left-width: 4px;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.38) 0px,
    rgba(99, 102, 241, 0.38) 2px,
    transparent 2px,
    transparent 9px
  ) !important;
}

/* Flash highlight animation when scrolling to a specific line */
.code-line.flash-highlight {
  animation: flashHighlight 2s ease-out;
}

@keyframes flashHighlight {
  0% {
    background: rgba(99, 102, 241, 0.5) !important;
    border-left-color: #6366f1 !important;
    border-left-width: 4px;
  }
  50% {
    background: rgba(99, 102, 241, 0.3) !important;
    border-left-color: #6366f1 !important;
    border-left-width: 4px;
  }
  100% {
    background: transparent;
    border-left-color: transparent;
    border-left-width: 3px;
  }
}

/* Match card selection - handled in main match card styles */

/* Tooltip enhancement for highlighted lines */
.code-line[title] {
  position: relative;
}

.code-line[title]::before {
  content: '⚠';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s;
}

.code-line.highlight-low[title]::before {
  color: rgba(234, 179, 8, 1);
}

.code-line.highlight-medium[title]::before {
  color: rgba(249, 115, 22, 1);
}

.code-line.highlight-high[title]::before {
  color: rgba(239, 68, 68, 1);
}

.code-line[title]:hover::before {
  opacity: 1;
}

/* Match Source Label */
.match-source-label {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.code-line:hover .match-source-label {
  opacity: 1;
}

.match-source-label .source-icon {
  font-size: 10px;
  color: #6b7280;
}

.match-source-label .source-percent {
  color: #1f2937;
  font-weight: 700;
}

/* Per-source chip inside the label. A single highlight shows one chip (identical
   spacing to before); an overlapping line shows two (peer + AI) with a colored dot
   so each is identifiable, separated by the label's gap. */
.match-source-label .source-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.match-source-label .source-tag + .source-tag {
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* Dots only appear when there are two chips (an overlap), so single-highlight
   badges stay identical to before. */
.match-source-label:has(.source-tag + .source-tag) .source-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.match-source-label .source-tag--plag::before {
  background: #6366f1;
}

.match-source-label .source-tag--ai::before {
  background: #ef4444;
}

.line-number {
  flex-shrink: 0;
  width: 58px;
  padding: 2px 12px;
  text-align: right;
  color: #9ca3af;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-right: 1px solid #e5e7eb;
  user-select: none;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.code-line:hover .line-number {
  color: #6366f1;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

.line-content {
  flex: 1;
  padding: 2px 16px;
  color: #1f2937;
  white-space: pre;
  overflow-x: auto;
  font-variant-ligatures: common-ligatures;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.15) transparent;
}

.line-content::-webkit-scrollbar {
  height: 6px;
}

.line-content::-webkit-scrollbar-track {
  background: transparent;
}

.line-content::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.15);
  border-radius: 3px;
}

.line-content::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.3);
}

/* Syntax Highlighting in Main Code Viewer */
.line-content .hljs {
  background: transparent !important;
}

.line-content .hljs-keyword {
  color: #7c3aed;
  font-weight: 600;
}

.line-content .hljs-string {
  color: #059669;
}

.line-content .hljs-number {
  color: #ea580c;
}

.line-content .hljs-comment {
  color: #6b7280;
  font-style: italic;
}

.line-content .hljs-function .hljs-title {
  color: #2563eb;
  font-weight: 600;
}

.line-content .hljs-class .hljs-title {
  color: #db2777;
  font-weight: 600;
}

.line-content .hljs-type {
  color: #0891b2;
}

.line-content .hljs-built_in {
  color: #7c3aed;
}

.line-content .hljs-variable {
  color: #be123c;
}

.line-content .hljs-literal {
  color: #ea580c;
}

.line-content .hljs-meta {
  color: #9333ea;
}

.line-content .hljs-tag {
  color: #059669;
}

.line-content .hljs-attr {
  color: #2563eb;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  color: var(--kt-text-secondary, #9ca3af);
  text-align: center;
  gap: 12px;
}

.empty-state i {
  font-size: 48px;
  opacity: 0.5;
}

.empty-state p {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.empty-state span {
  font-size: 13px;
}

/* Column 3: Charts Styles */
.charts-column {
  background: #fafafa;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-bottom: 20px;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.charts-column::-webkit-scrollbar {
  width: 6px;
}

.charts-column::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.charts-column::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Firefox scrollbar styling for charts column */
.charts-column {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* ============================================
   INFO CARDS V2 - Compact Clean Design
   ============================================ */
.info-card-v2 {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin: 8px 10px;
  overflow: visible;
  flex-shrink: 0;
}

/* Section headings, not chrome. A gradient bar with a coloured icon over every
   panel gave four competing headers in a 300px column; a quiet caps label reads
   as structure and takes no attention. */
.info-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 6px;
  background: none;
  border-bottom: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9ca3af;
}

.info-card-header i {
  display: none;
}

.info-card-body {
  padding: 0 0 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 14px;
}

/* Scores: one row of figures, read as figures */
.info-scores {
  display: flex;
  gap: 6px;
  padding: 2px 14px 10px;
  border-bottom: 1px solid #f1f2f4;
  margin-bottom: 6px;
}

.score-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.score-cell .info-score-pill {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

.score-cell-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
}

.info-row-value-wide {
  max-width: none;
  font-weight: 500;
  color: #4b5563;
}

.info-sep {
  color: #d1d5db;
  padding: 0 2px;
}

.dark .info-scores { border-bottom-color: rgba(255, 255, 255, 0.08); }
.dark .score-cell-label,
.dark .info-card-header { color: #6b7280; }

.info-row-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

.info-row-value {
  font-size: 12px;
  color: #1f2937;
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-row-value.info-status {
  padding: 2px 8px;
  background: #dcfce7;
  color: #166534;
  border-radius: 4px;
  font-size: 10px;
}

.info-card-footer {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.info-stat-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7280;
}

.info-stat-mini i {
  font-size: 12px;
  color: #9ca3af;
}

.info-stat-mini span {
  font-weight: 700;
  color: #374151;
}

/* Similarity / AI score rows */
/* The scores block is styled above as a row of figures. The old rule that lived
   here set a top border and stacked them as labelled lines; it came later in the
   sheet, so it silently won and the new layout never appeared. */
.info-row-score .info-score-pill {
  font-size: 12px;
  font-weight: 700;
  font-feature-settings: 'tnum' on, 'lnum' on;
  max-width: none;
}

/* Chart Area Compact */
.chart-area-compact {
  height: 160px;
  padding: 10px 14px;
  position: relative;
  flex-shrink: 0;
}

/* Legend Compact */
.legend-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 14px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.legend-item-v2 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #6b7280;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.peer { background: #6366f1; }
.legend-dot.web { background: #a855f7; }
.legend-dot.github { background: #ec4899; }
.legend-dot.other { background: #94a3b8; }

/* The quick-stats row that lived here is gone; its counts duplicated the
   Submission card footer. Rules removed with it. */

/* Dark Mode for Info Cards V2 - neutral black tones */
.dark .info-card-v2 {
  background: #1a1a1a;
  border-color: #2d2d2d;
}

/* The header is a caps label now, not a bar. Re-adding a gradient and a border
   here would put the old chrome back in dark mode only. */
.dark .info-card-header {
  background: none;
  border-bottom-color: transparent;
}

.dark .info-row:hover {
  background: #252525;
}

.dark .info-row-label {
  color: #a1a1a1;
}

.dark .info-row-value {
  color: #f1f5f9;
}

.dark .info-row-value.info-status {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.dark .info-card-footer {
  background: #121212;
  border-top-color: #2d2d2d;
}

.dark .info-stat-mini {
  color: #a1a1a1;
}

.dark .info-stat-mini span {
  color: #e2e8f0;
}

/* Dark Mode for Quick Stats */
.dark .quick-stat {
  background: #1a1a1a;
  border-color: #2d2d2d;
}

.dark .quick-stat-value {
  color: #f1f5f9;
}

.dark .quick-stat-label {
  color: #a1a1a1;
}

.dark .legend-compact {
  background: #121212;
  border-top-color: #2d2d2d;
}

.dark .legend-item-v2 {
  color: #a1a1a1;
}

.dark .quick-stat {
  background: #1a1a1a;
  border-color: #2d2d2d;
}

.dark .quick-stat-value {
  color: #f1f5f9;
}

.dark .quick-stat-label {
  color: #a1a1a1;
}

/* Legacy chart-card for backwards compatibility */
.chart-card {
  background: white;
  margin: 10px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--kt-border-color, #e5e7eb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

/* Apple-like risk card polish (scoped so other charts stay unchanged) */
.chart-card.risk-card {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98));
}

.dark .chart-card.risk-card {
  border-color: rgba(60, 60, 60, 0.4);
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(18, 18, 18, 0.98));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.chart-card.risk-card .chart-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.chart-card.risk-card .risk-card-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-card.risk-card .chart-card-header h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chart-card.risk-card .chart-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--kt-text-secondary, #6b7280);
}

.chart-card-header {
  margin-bottom: 10px;
}

.chart-card-header h4 {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--kt-text-primary, #1f2937);
  margin: 0 0 2px 0;
}

.chart-subtitle {
  font-size: 11px;
  color: var(--kt-text-secondary, #6b7280);
}

.chart-container {
  position: relative;
  height: 220px;
  margin-bottom: 12px;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kt-text-secondary, #6b7280);
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.legend-color.peer {
  background: rgba(99, 102, 241, 0.8);
}

.legend-color.web {
  background: rgba(168, 85, 247, 0.8);
}

.legend-color.github {
  background: rgba(236, 72, 153, 0.8);
}

.legend-color.other {
  background: rgba(251, 146, 60, 0.8);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
}

.stat-card {
  background: white;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--kt-border-color, #e5e7eb);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon.peer {
  background: rgba(99, 102, 241, 0.1);
  color: var(--kt-primary, #6366f1);
}

.stat-icon.web {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--kt-text-primary, #1f2937);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--kt-text-secondary, #6b7280);
}

/* Risk Engagement Bar Styles */
.risk-engagement-bar {
  padding: 0;
}

/* Risk Card V3: theme-aligned container (LEGACY - kept for compatibility) */
.risk-card-v3 {
  overflow: hidden;
}

.risk-card-v3 .risk-card-header {
  justify-content: space-between;
}

.risk-card-v3 .risk-subtitle {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--kt-text-secondary, #6b7280);
}

.risk-card-body {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-level-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.risk-scale-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--kt-text-secondary, #86868b);
  letter-spacing: -0.01em;
}

.risk-scale-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}
.risk-scale-dot.low { background: #34c759; }
.risk-scale-dot.medium { background: #ff9f0a; }
.risk-scale-dot.high { background: #ff3b30; }

.risk-level-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.risk-percentage {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--kt-text-primary, #1d1d1f);
  line-height: 1;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

.risk-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #86868b;
}

.risk-percentage.low { color: #248a3d; }
.risk-percentage.medium { color: #b25000; }
.risk-percentage.high { color: #d70015; }

.risk-label.low {
  color: #248a3d;
}
.risk-label.medium {
  color: #b25000;
}
.risk-label.high {
  color: #d70015;
}

.dark .risk-label {
  color: #98989d;
}
.dark .risk-percentage.low { color: #30d158; }
.dark .risk-percentage.medium { color: #ffd60a; }
.dark .risk-percentage.high { color: #ff453a; }
.dark .risk-label.low { color: #30d158; }
.dark .risk-label.medium { color: #ffd60a; }
.dark .risk-label.high { color: #ff453a; }

.risk-bar-container {
  margin-bottom: 0;
}

.risk-bar-bg {
  width: 100%;
  height: 8px;
  background: rgba(142, 142, 147, 0.12);
  border-radius: 980px;
  overflow: hidden;
  position: relative;
  margin-bottom: 6px;
}

.risk-bar-fill {
  height: 100%;
  border-radius: 980px;
  transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.3s ease;
  position: relative;
  overflow: hidden;
}

.risk-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.risk-bar-fill.low {
  background: linear-gradient(90deg, #30d158 0%, #34c759 100%);
  box-shadow: none;
}

.risk-bar-fill.medium {
  background: linear-gradient(90deg, #ff9f0a 0%, #ffcc00 100%);
  box-shadow: none;
}

.risk-bar-fill.high {
  background: linear-gradient(90deg, #ff3b30 0%, #ff453a 100%);
  box-shadow: none;
  animation: none;
}

@keyframes pulse-high {
  0%, 100% {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.7);
  }
}

.risk-markers {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #86868b;
  padding: 2px 4px 0;
  letter-spacing: -0.01em;
}

.risk-marker {
  font-weight: 500;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

/* Risk Score Breakdown - Apple-inspired Design */
.risk-score-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

.risk-breakdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(142, 142, 147, 0.06);
  border-radius: 14px;
  border: none;
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  flex: 1;
  position: relative;
  overflow: hidden;
}

.risk-breakdown-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 3px 3px 0;
  opacity: 0.9;
}

.risk-breakdown-item:hover {
  background: rgba(142, 142, 147, 0.1);
  transform: scale(1.02);
}

.risk-breakdown-item.peer::before {
  background: linear-gradient(180deg, #5e5ce6 0%, #bf5af2 100%);
}

.risk-breakdown-item.peer:hover {
  background: rgba(94, 92, 230, 0.08);
}

.risk-breakdown-item.web::before {
  background: linear-gradient(180deg, #0a84ff 0%, #5ac8fa 100%);
}

.risk-breakdown-item.web:hover {
  background: rgba(10, 132, 255, 0.08);
}

.risk-breakdown-item.highest::before {
  background: linear-gradient(180deg, #ff9f0a 0%, #ffcc00 100%);
}

.risk-breakdown-item.highest:hover {
  background: rgba(255, 159, 10, 0.08);
}

.breakdown-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #86868b;
  text-transform: none;
  letter-spacing: -0.01em;
}

.breakdown-header i {
  font-size: 12px;
  opacity: 0.85;
}

.risk-breakdown-item.peer .breakdown-header {
  color: #5e5ce6;
}

.risk-breakdown-item.web .breakdown-header {
  color: #0a84ff;
}

.risk-breakdown-item.highest .breakdown-header {
  color: #ff9f0a;
}

.breakdown-label {
  font-size: 11px;
  font-weight: 500;
}

.breakdown-value {
  font-size: 22px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

/* Responsive layout for breakdown on smaller screens */
@media (max-width: 768px) {
  .risk-score-breakdown {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .risk-categories {
    flex-wrap: wrap;
  }
}

/* Reviewer verdict control (Submission Info panel) */
.dr-review-btn {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #6b7280;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.6;
  transition: all .15s ease;
}
.dr-review-btn:hover { border-color: #c7d2fe; background: #eef2ff; color: #4f46e5; }
.dr-review-btn[data-status="confirmed"] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.dr-review-btn[data-status="false_positive"] { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.dr-review-btn[data-status="reviewed"] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.dark .dr-review-btn { background: #1f2937; border-color: #374151; color: #9ca3af; }

.dr-review-menu {
  position: fixed;
  z-index: 10050;
  min-width: 236px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  padding: 10px;
  font-size: 13px;
  color: #111827;
}
.dr-review-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 4px; cursor: pointer; border-radius: 6px; }
.dr-review-menu textarea { width: 100%; margin-top: 8px; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px; min-height: 52px; resize: vertical; }
.dr-review-menu-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.dr-review-menu-clear { border: none; background: transparent; color: #6b7280; cursor: pointer; font-size: 12px; }
.dr-review-menu-save { border: none; background: #7c3aed; color: #fff; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-weight: 600; }

/* Submission Info Panel Styles */
.submission-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.info-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  min-width: 0; /* Critical: prevents overflow */
  overflow: hidden; /* Prevent content from overflowing */
  max-width: 100%; /* Ensure it stays within bounds */
}

.info-stat-card:hover {
  background: white;
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: translateY(-1px);
}

.info-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.info-stat-content {
  flex: 1;
  min-width: 0; /* Critical: allows text truncation to work */
  overflow: hidden; /* Prevent text overflow */
}

.info-stat-value {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%; /* Ensure proper truncation */
}

.info-stat-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-categories {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(142, 142, 147, 0.12);
}

.risk-category {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #86868b;
  letter-spacing: -0.01em;
}

.chart-card.risk-card .risk-category {
  padding: 6px 12px;
  border-radius: 980px;
  border: none;
  background: rgba(142, 142, 147, 0.08);
}

.risk-card-v3 .risk-category {
  padding: 6px 12px;
  border-radius: 980px;
  border: none;
  background: rgba(142, 142, 147, 0.08);
}

.dark .chart-card.risk-card .risk-category,
.dark .risk-card-v3 .risk-category {
  background: rgba(142, 142, 147, 0.14);
}

.dark .risk-card-v3 .risk-subtitle,
.dark .risk-scale-hint {
  color: #98989d;
}

@media (max-width: 768px) {
  .risk-level-indicator {
    flex-direction: column;
    align-items: flex-start;
  }
}

.risk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

.risk-category.low .risk-dot {
  background: #34c759;
}

.risk-category.medium .risk-dot {
  background: #ff9f0a;
}

.risk-category.high .risk-dot {
  background: #ff3b30;
}

/* Column 2: Match Explorer Styles */
.matches-column {
  background: #fafafa;
  overflow: hidden; /* Prevent content from overflowing */
  max-width: 100%;
  box-sizing: border-box;
}

/* Match Explorer header — a stack of thin rows. Each row is one line and
   never wraps; anything too wide swipes sideways instead of pushing the
   match list further down the panel. */
.matches-column .column-header {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 9px 14px 0;
  min-height: 0;
  background: #ffffff;
  border-bottom: 1px solid #edeef2;
}

@media (max-width: 1024px) {
  .matches-column .column-header {
    padding: 8px 12px 0;
    gap: 6px;
  }
}

.mx-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.matches-column .header-title {
  font-size: 14px;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}

/* Filtered/total match count — the panel's own headline number, so it sits
   next to the title instead of on a row of its own inside the scrolling list. */
.mx-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #8a8f98;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mx-count:empty {
  display: none;
}

.mx-tune-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #ffffff;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mx-tune-btn i {
  font-size: 14px;
  line-height: 1;
}

.mx-tune-btn:hover {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.mx-tune-btn.is-open {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4f46e5;
}

/* Lit when any setting is off its default, so a filtered-down list is never
   silently filtered. */
.mx-tune-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6366f1;
  box-shadow: 0 0 0 2px #ffffff;
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.filter-tabs::-webkit-scrollbar {
  display: none;
}

/* inline-flex, not the button default: a global `svg { display: block }` puts
   a chip's brand mark on its own line otherwise, and the source row comes out
   half again as tall as the tab row above it. */
.filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--kt-border-color, #e5e7eb);
  background: white;
  color: var(--kt-text-secondary, #6b7280);
  cursor: pointer;
  transition: all 0.2s;
}

/* Per-tab count. Blank until the match set loads, and collapsed while blank
   so the tabs never jump width. */
.filter-tab-n {
  margin-left: 4px;
  font-weight: 600;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.filter-tab-n:empty {
  display: none;
}

.filter-tab.active .filter-tab-n {
  opacity: 0.75;
}

/* A tab with nothing behind it still works — it just says so, rather than
   looking identical to one holding forty matches. */
.filter-tab.is-empty:not(.active) {
  opacity: 0.45;
}

.filter-tab:hover {
  background: rgba(99, 102, 241, 0.05);
  color: var(--kt-text-primary, #1f2937);
}

.filter-tab.active {
  background: var(--kt-primary, #6366f1);
  color: white;
  border-color: var(--kt-primary, #6366f1);
}

/* AI Filter Tab */
.filter-tab-ai {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.3);
  color: #2563eb;
}

.filter-tab-ai:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.5);
  color: #1d4ed8;
}

.filter-tab-ai.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* Source chips get their own swipeable row, and the row disappears entirely
   when there are no web sources rather than holding open an empty band. */
.mx-sources {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mx-sources::-webkit-scrollbar {
  display: none;
}

.mx-sources:empty {
  display: none;
}

/* Dynamic domain chips — same shape as filter tabs but visually softer so
   the static type filters (All / Peer / Web / GitHub / AI) stay the
   primary controls. Active state uses brand-blue to match the rest. */
.filter-tab-domain {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10.5px;
  padding: 3px 8px;
  white-space: nowrap;
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
.filter-tab-domain:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.filter-tab-domain.active {
  background: #1e40af;
  color: #ffffff;
  border-color: #1e40af;
}
.dark .filter-tab-domain {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
.dark .filter-tab-domain:hover {
  background: #1e3a8a;
  border-color: #2563eb;
  color: #bfdbfe;
}
.dark .filter-tab-domain.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.matches-list {
  flex: 1;
  overflow-y: auto !important; /* Force scrolling on overflow */
  overflow-x: hidden;
  padding: 12px;
  min-height: 0; /* Critical: allows flex child to shrink and enable scrolling */
  height: 100%; /* Ensure it takes full available height */
  max-width: 100%;
  box-sizing: border-box;
}

.matches-list::-webkit-scrollbar {
  width: 6px;
}

.matches-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.matches-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Firefox scrollbar styling for matches list */
.matches-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Skeleton Loader Styles - Apple-like */
.match-skeleton {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.match-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.skeleton-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 24px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}

.skeleton-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.skeleton-icon {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  flex-shrink: 0;
}

.skeleton-text-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-text {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  height: 14px;
}

.skeleton-text.skeleton-title {
  width: 70%;
  height: 16px;
}

.skeleton-text.skeleton-subtitle {
  width: 50%;
  height: 12px;
}

.skeleton-text.skeleton-info {
  width: 60%;
  height: 12px;
}

/* ============================================
   PAGINATION - Load More
   ============================================ */

/* Coverage strip — union of matched lines over the open file, plus the
   submission-level score. Lives in the Match Explorer header so it stays put
   while the card list scrolls. */
/* One line plus a hairline bar, flush with the header's bottom edge. It used
   to be a bordered card whose row wrapped, which cost three lines of the
   panel to carry two numbers. */
.match-coverage {
  padding: 0 0 7px;
}

.match-coverage-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

.match-coverage-pct {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #64748b;
  flex-shrink: 0;
}

.match-coverage-label {
  font-size: 11px;
  color: #64748b;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-coverage-label strong {
  color: #1e293b;
  font-weight: 600;
}

.match-coverage-meta {
  margin-left: auto;
  padding-left: 8px;
  font-size: 10.5px;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

.match-coverage-meta strong {
  color: #64748b;
  font-weight: 600;
}

.match-coverage-sep {
  margin: 0 4px;
  opacity: 0.6;
}

.match-coverage-track {
  margin-top: 5px;
  height: 3px;
  border-radius: 3px;
  background: #eef0f4;
  overflow: hidden;
}

.match-coverage-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: #9ca3af;
  transition: width 0.25s ease, background 0.25s ease;
}

/* Tune popover — the two toggles and the AI threshold. Fixed, not absolute:
   .matches-column clips its overflow, so an absolutely-positioned panel is
   sheared off at the header's bottom edge. JS pins it under the button. */
.mx-tune-pop {
  position: fixed;
  z-index: 1200;
  width: 268px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.mx-tune-pop[hidden] {
  display: none;
}

.mx-tune-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 8px;
}

.mx-tune-row:hover {
  background: #f8fafc;
}

.mx-tune-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.mx-tune-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
}

.mx-tune-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: -0.01em;
}

.mx-tune-name #ai-threshold-value {
  color: #7c3aed;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mx-tune-hint {
  font-size: 11px;
  line-height: 1.35;
  color: #8a8f98;
}

#ai-threshold-slider {
  width: 100%;
  height: 4px;
  cursor: pointer;
  accent-color: #8b5cf6;
}

.mx-tune-reset {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 7px 8px;
  border: 0;
  border-top: 1px solid #f1f2f5;
  border-radius: 0 0 8px 8px;
  background: none;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
}

.mx-tune-reset:hover {
  color: #4f46e5;
  background: #f8fafc;
}

.load-more-container {
  padding: 16px 0;
  text-align: center;
}

.load-more-matches-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.load-more-matches-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.load-more-matches-btn:active {
  transform: translateY(0);
}

.load-more-matches-btn i {
  font-size: 16px;
}

/* Dark mode support - neutral black tones */
[data-kt-theme-mode="dark"] .match-coverage-label,
[data-kt-theme-mode="dark"] .match-coverage-meta strong {
  color: #a1a1a1;
}

[data-kt-theme-mode="dark"] .match-coverage-label strong {
  color: #e2e8f0;
}

[data-kt-theme-mode="dark"] .match-coverage-meta {
  color: #6b6b6b;
}

[data-kt-theme-mode="dark"] .match-coverage-track {
  background: #2d2d2d;
}

/* ============================================
   MATCH CARD - Rich & Informative Design
   ============================================ */
.match-card-new {
  display: flex;
  flex-direction: column;
  padding: 8px 10px 8px 12px;
  margin-bottom: 6px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
}

.match-card-new::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #10b981;
  transition: width 0.2s ease;
}

.match-card-new.score-high::before {
  background: #ef4444;
}

.match-card-new.score-medium::before {
  background: #f59e0b;
}

.match-card-new.score-low::before {
  background: #10b981;
}

.match-card-new:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.match-card-new:hover::before {
  width: 4px;
}

.match-card-new.selected {
  background: rgba(99, 102, 241, 0.03);
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.match-card-new.selected::before {
  background: #6366f1;
  width: 4px;
}

/* Card Header Row */
.match-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}

.match-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 78px); /* Leave space for type pill */
  overflow: hidden;
}

/* Score Circle */
.match-score-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  letter-spacing: -0.2px;
}

.match-score-circle.high {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #dc2626;
  border: 2px solid #fca5a5;
}

.match-score-circle.medium {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border: 2px solid #fcd34d;
}

.match-score-circle.low {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: #16a34a;
  border: 2px solid #86efac;
}

/* A ring showing what the analysis read rather than what the engine scored.
   Dashed, so two cards side by side are not silently reporting two different
   measurements in the same shape. The tooltip names both. */
.match-score-circle.is-ai-read {
  border-style: dashed;
}

/* Match Title Section */
.match-title-section {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.match-source-name {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  margin-bottom: 0;
  max-width: 100%;
  display: block;
}

.match-source-subtitle {
  font-size: 10px;
  line-height: 1.3;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

/* Type Badge */
.match-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  align-self: flex-start;
}

.match-type-pill.peer {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
  color: #4f46e5;
}

.match-type-pill.web {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
  color: #9333ea;
}

.match-type-pill.github {
  background: linear-gradient(135deg, rgba(36, 41, 46, 0.12) 0%, rgba(36, 41, 46, 0.08) 100%);
  color: #24292e;
}

.match-type-pill.stackoverflow {
  background: linear-gradient(135deg, rgba(244, 128, 36, 0.15) 0%, rgba(244, 128, 36, 0.1) 100%);
  color: #da680b;
}

.match-type-pill.cheating {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
  color: #dc2626;
}

.match-type-pill.libraries {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
  color: #6366f1;
}

.match-type-pill.ai {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.match-type-pill i {
  font-size: 10px;
}

/* Vendored brand marks (Simple Icons, CC0). They inherit the pill's colour, so
   GitHub reads dark, Stack Overflow orange, and a WEB pill tints its site mark
   the same purple as the pin it replaced. */
.match-brand-mark {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.filter-tab-domain .chip-brand-mark {
  width: 11px;
  height: 11px;
  margin-right: 5px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Card Footer Row - meta on the left, action on the right, one line */
.match-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
  max-width: 100%;
}

/* Card Details Row */
.match-card-details {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  flex-wrap: wrap;
}

.match-detail-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.match-detail-label {
  font-size: 9px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.match-detail-value {
  font-size: 11px;
  color: #4b5563;
  font-weight: 600;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}

/* "Yours 6-76 -> 91-292": the arrow carries what a second MATCHED label used
   to, in a tenth of the width, which is what keeps the meta on one line when
   both ranges run to three digits. */
.match-detail-arrow {
  font-size: 10px;
  color: #9ca3af;
  margin: 0 -1px;
}

.match-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* AI Probability indicator colors */
.match-detail-value.ai-prob-high {
  color: #dc2626;
  font-weight: 700;
}

.match-detail-value.ai-prob-medium {
  color: #ea580c;
  font-weight: 700;
}

.match-detail-value.ai-prob-low {
  color: #ca8a04;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   AI DETECTION MODAL STYLES
   ══════════════════════════════════════════════════════════════════════════ */

/* AI Probability Badge (used in student panel for AI matches) */
.premium-similarity-badge-panel.ai-probability {
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #2563eb !important;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.premium-similarity-badge-panel.ai-probability i {
  color: #2563eb !important;
  font-size: 12px;
  opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════════════════
   AI DETECTION PANEL — evidence-first layout (result driller)

   One accent colour per risk level, set on .aird-panel and inherited by the
   chip, the probability bar and the next-step banner, so the panel takes its
   temperature from the score without shouting it four times over.
   ══════════════════════════════════════════════════════════════════════════ */

.aird-panel {
  --aird-acc: #dc2626;
  --aird-acc-tint: rgba(220,38,38,0.07);
  --aird-acc-line: rgba(220,38,38,0.22);
  padding: 18px;
  height: 100%;
  overflow-y: auto;
  background: #fbfbfc;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}
.aird-panel.medium { --aird-acc:#d97706; --aird-acc-tint:rgba(217,119,6,0.07); --aird-acc-line:rgba(217,119,6,0.22); }
.aird-panel.low    { --aird-acc:#ca8a04; --aird-acc-tint:rgba(202,138,4,0.07);  --aird-acc-line:rgba(202,138,4,0.22); }
.aird-panel.safe   { --aird-acc:#16a34a; --aird-acc-tint:rgba(22,163,74,0.07);  --aird-acc-line:rgba(22,163,74,0.22); }

/* Verdict — score, split, one-line summary, facts */
.aird-verdict {
  background: #fff;
  border: 1px solid #e8e8ea;
  border-radius: 12px;
  padding: 16px 18px 15px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.aird-verdict-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aird-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: #8a8a8f;
}
.aird-risk-chip {
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.05px;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  color: var(--aird-acc);
  background: var(--aird-acc-tint);
  border: 1px solid var(--aird-acc-line);
}
.aird-verdict-score { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.aird-score {
  font-size: 44px; font-weight: 700; line-height: 1;
  letter-spacing: -2px; color: #18181b;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.aird-score-unit { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; color: #a1a1aa; margin-left: 1px; }
.aird-gauge { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.aird-track { height: 7px; border-radius: 100px; background: #efeff1; overflow: hidden; }
.aird-track-fill {
  height: 100%; border-radius: 100px;
  background: var(--aird-acc);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.aird-gauge-cap { font-size: 11.5px; color: #71717a; line-height: 1.4; }
.aird-gauge-cap b { color: #3f3f46; font-weight: 600; font-variant-numeric: tabular-nums; }
.aird-assess { font-size: 13px; line-height: 1.55; color: #52525b; margin: 14px 0 0; }
.aird-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid #f1f1f3;
  font-size: 11.5px; color: #71717a;
}
.aird-meta span { display: inline-flex; align-items: center; }
.aird-meta span + span::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: #d4d4d8; margin: 0 9px;
}
.aird-meta strong { color: #3f3f46; font-weight: 600; }

/* Next step */
.aird-next {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: 10px;
  background: var(--aird-acc-tint);
  border: 1px solid var(--aird-acc-line);
  font-size: 12.5px; line-height: 1.4; color: #3f3f46;
}
.aird-next svg { color: var(--aird-acc); flex-shrink: 0; }
.aird-next-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--aird-acc); flex-shrink: 0;
}

/* Section headings */
.aird-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.aird-section-title { font-size: 13px; font-weight: 600; color: #18181b; letter-spacing: -0.1px; }
.aird-count {
  font-size: 11px; font-weight: 600; color: #71717a; background: #f1f1f3;
  padding: 1px 7px; border-radius: 100px; font-variant-numeric: tabular-nums;
}
.aird-section-sub { font-size: 12px; line-height: 1.5; color: #71717a; margin: 0 0 10px; }

/* Signals — one bordered list, severity carried by the flush left rule */
.aird-sig-list {
  background: #fff; border: 1px solid #e8e8ea; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.aird-sig {
  --sig: #a1a1aa; --sig-bg: #f4f4f5;
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: start; gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #f1f1f3;
  box-shadow: inset 3px 0 0 var(--sig);
}
.aird-sig:first-child { border-top: 0; }
.aird-sig[data-severity="alert"]   { --sig:#dc2626; --sig-bg:#fee2e2; }
.aird-sig[data-severity="warning"] { --sig:#d97706; --sig-bg:#fef3c7; }
.aird-sig[data-severity="good"]    { --sig:#16a34a; --sig-bg:#dcfce7; }
.aird-sig-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sig-bg); color: var(--sig);
}
.aird-sig-body { min-width: 0; }
.aird-sig-title { font-size: 12.5px; font-weight: 600; color: #18181b; line-height: 1.35; word-break: break-word; }
.aird-sig-desc { font-size: 11.5px; color: #71717a; line-height: 1.5; margin-top: 3px; }
.aird-sig-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 3px 7px; border-radius: 5px; margin-top: 2px;
  background: var(--sig-bg); color: var(--sig); white-space: nowrap;
}

/* How this was scored — same text for every match, so it starts collapsed */
.aird-disclosure {
  background: #fff; border: 1px solid #e8e8ea; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.aird-disclosure > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: #18181b;
  border-radius: 12px;
}
.aird-disclosure > summary::-webkit-details-marker { display: none; }
.aird-disclosure > summary:hover { background: #fafafa; }
.aird-disc-hint {
  margin-left: auto; font-size: 11.5px; font-weight: 500; color: #a1a1aa;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aird-disc-chevron { color: #a1a1aa; transition: transform .18s ease; flex-shrink: 0; }
.aird-disclosure[open] > summary { border-bottom: 1px solid #f1f1f3; border-radius: 12px 12px 0 0; }
.aird-disclosure[open] .aird-disc-chevron { transform: rotate(180deg); }
.aird-disc-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 13px; }
.aird-method { display: flex; align-items: center; gap: 11px; }
.aird-method-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(37,99,235,0.08); color: #2563eb;
  display: flex; align-items: center; justify-content: center;
}
.aird-method-name { font-size: 12.5px; font-weight: 600; color: #18181b; line-height: 1.3; }
.aird-method-desc { font-size: 11.5px; color: #71717a; line-height: 1.45; margin-top: 2px; }
.aird-factor-list {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 12px; border-top: 1px solid #f1f1f3;
}
.aird-factor { display: grid; grid-template-columns: 14px 1fr; gap: 9px; align-items: start; }
.aird-factor > svg { color: #a1a1aa; margin-top: 2px; }
.aird-factor-lbl { font-size: 12px; font-weight: 600; color: #3f3f46; }
.aird-factor-desc { font-size: 11.5px; color: #71717a; line-height: 1.45; margin-top: 1px; }

/* Advisory */
.aird-note {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 0 2px; margin: 0;
  font-size: 11.5px; color: #8a8a8f; line-height: 1.5;
}
.aird-note svg { flex-shrink: 0; color: #b4b4bb; margin-top: 1px; }


/* === Legacy classes kept as no-ops to avoid stale selector conflicts === */
.ai-review-panel {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  background: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* Score Banner - Vercel Style */
.ai-score-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid;
}

.ai-score-banner.high {
  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
  border-color: #991b1b;
}

.ai-score-banner.medium {
  background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
  border-color: #92400e;
}

.ai-score-banner.low {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
  border-color: #166534;
}

.ai-score-badge {
  display: flex;
  align-items: baseline;
}

.ai-score-value {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  color: white;
}

.ai-score-unit {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-left: 2px;
}

.ai-score-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-score-label {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

.ai-score-sublabel {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* Assessment Card */
.ai-assessment-card {
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.ai-assessment-text {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* Location Strip */
.ai-location-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  margin-bottom: 16px;
}

.ai-loc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
}

.ai-loc-item svg {
  color: #999;
}

.ai-loc-sep {
  color: #ccc;
  font-size: 14px;
}

/* Evidence Section */
.ai-evidence-section {
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.ai-evidence-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ai-evidence-title {
  font-size: 12px;
  font-weight: 600;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-evidence-count {
  font-size: 11px;
  color: #666;
  background: #f5f5f5;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 500;
}

.ai-evidence-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-evidence-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border-radius: 6px;
  border-left: 3px solid #ddd;
  transition: all 0.15s ease;
}

.ai-evidence-item:hover {
  background: #f5f5f5;
}

.ai-evidence-item[data-severity="good"] {
  border-left-color: #22c55e;
  background: #f0fdf4;
}

.ai-evidence-item[data-severity="good"]:hover {
  background: #dcfce7;
}

.ai-evidence-item[data-severity="warning"] {
  border-left-color: #eab308;
  background: #fefce8;
}

.ai-evidence-item[data-severity="warning"]:hover {
  background: #fef9c3;
}

.ai-evidence-item[data-severity="alert"] {
  border-left-color: #ef4444;
  background: #fef2f2;
}

.ai-evidence-item[data-severity="alert"]:hover {
  background: #fee2e2;
}

.ai-evidence-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
  margin-top: 6px;
  flex-shrink: 0;
}

.ai-evidence-item[data-severity="good"] .ai-evidence-marker {
  background: #22c55e;
}

.ai-evidence-item[data-severity="warning"] .ai-evidence-marker {
  background: #eab308;
}

.ai-evidence-item[data-severity="alert"] .ai-evidence-marker {
  background: #ef4444;
}

.ai-evidence-text {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}

/* Method Strip */
.ai-method-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.ai-method-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.ai-method-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ai-method-name {
  font-size: 13px;
  font-weight: 600;
  color: #111;
}

.ai-method-desc {
  font-size: 12px;
  color: #666;
}

/* Instructor Note */
.ai-instructor-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #f5f5f5;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.ai-instructor-note svg {
  flex-shrink: 0;
  color: #999;
  margin-top: 1px;
}

/* AI Modal Styling */
.ai-detection-modal .ring-fill {
  stroke: #3b82f6 !important;
}

.ai-detection-modal .premium-type-badge {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #2563eb !important;
}

.ai-detection-modal .premium-panel-right {
  background: linear-gradient(180deg, #fafafa 0%, #f8f8f8 100%);
}

.premium-similarity-badge-panel.ai-probability {
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #2563eb !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE - AI PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.dark .ai-review-panel {
  background: #0a0a0a;
}

.dark .ai-score-banner.high {
  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
  border-color: #991b1b;
}

.dark .ai-score-banner.medium {
  background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
  border-color: #92400e;
}

.dark .ai-score-banner.low {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
  border-color: #166534;
}

.dark .ai-assessment-card,
.dark .ai-location-strip,
.dark .ai-evidence-section,
.dark .ai-method-strip {
  background: #171717;
  border-color: #262626;
}

.dark .ai-assessment-text {
  color: #a3a3a3;
}

.dark .ai-loc-item {
  color: #a3a3a3;
}

.dark .ai-loc-item svg {
  color: #525252;
}

.dark .ai-loc-sep {
  color: #404040;
}

.dark .ai-evidence-title {
  color: #fafafa;
}

.dark .ai-evidence-count {
  background: #262626;
  color: #a3a3a3;
}

.dark .ai-evidence-item {
  background: #0a0a0a;
  border-left-color: #404040;
}

.dark .ai-evidence-item:hover {
  background: #171717;
}

.dark .ai-evidence-item[data-severity="good"] {
  background: rgba(34, 197, 94, 0.1);
  border-left-color: #22c55e;
}

.dark .ai-evidence-item[data-severity="good"]:hover {
  background: rgba(34, 197, 94, 0.15);
}

.dark .ai-evidence-item[data-severity="warning"] {
  background: rgba(234, 179, 8, 0.1);
  border-left-color: #eab308;
}

.dark .ai-evidence-item[data-severity="warning"]:hover {
  background: rgba(234, 179, 8, 0.15);
}

.dark .ai-evidence-item[data-severity="alert"] {
  background: rgba(239, 68, 68, 0.1);
  border-left-color: #ef4444;
}

.dark .ai-evidence-item[data-severity="alert"]:hover {
  background: rgba(239, 68, 68, 0.15);
}

.dark .ai-evidence-marker {
  background: #525252;
}

.dark .ai-evidence-text {
  color: #d4d4d4;
}

.dark .ai-method-name {
  color: #fafafa;
}

.dark .ai-method-desc {
  color: #a3a3a3;
}

.dark .ai-instructor-note {
  background: #171717;
  border-color: #262626;
  color: #737373;
}

.dark .ai-instructor-note svg {
  color: #525252;
}

/* ─── Dark mode: AI detection panel ─── */
.dark .aird-panel { background: #0a0a0a; color: #f4f4f5; }
.dark .aird-panel.high   { --aird-acc:#f87171; --aird-acc-tint:rgba(239,68,68,0.12);  --aird-acc-line:rgba(239,68,68,0.28); }
.dark .aird-panel.medium { --aird-acc:#fbbf24; --aird-acc-tint:rgba(245,158,11,0.12); --aird-acc-line:rgba(245,158,11,0.28); }
.dark .aird-panel.low    { --aird-acc:#facc15; --aird-acc-tint:rgba(234,179,8,0.12);  --aird-acc-line:rgba(234,179,8,0.28); }
.dark .aird-panel.safe   { --aird-acc:#4ade80; --aird-acc-tint:rgba(34,197,94,0.12);  --aird-acc-line:rgba(34,197,94,0.28); }
.dark .aird-verdict,
.dark .aird-sig-list,
.dark .aird-disclosure { background: #141414; border-color: #262626; box-shadow: none; }
.dark .aird-score { color: #fafafa; }
.dark .aird-score-unit { color: #71717a; }
.dark .aird-track { background: #262626; }
.dark .aird-gauge-cap { color: #a1a1aa; }
.dark .aird-gauge-cap b { color: #e4e4e7; }
.dark .aird-assess { color: #a1a1aa; }
.dark .aird-meta { color: #a1a1aa; border-top-color: #262626; }
.dark .aird-meta strong { color: #e4e4e7; }
.dark .aird-meta span + span::before { background: #3f3f46; }
.dark .aird-next { color: #d4d4d8; }
.dark .aird-section-title { color: #fafafa; }
.dark .aird-count { background: #262626; color: #a1a1aa; }
.dark .aird-section-sub { color: #a1a1aa; }
.dark .aird-sig { border-top-color: #232323; --sig:#52525b; --sig-bg:#232323; }
.dark .aird-sig[data-severity="alert"]   { --sig:#f87171; --sig-bg:rgba(239,68,68,0.14); }
.dark .aird-sig[data-severity="warning"] { --sig:#fbbf24; --sig-bg:rgba(245,158,11,0.14); }
.dark .aird-sig[data-severity="good"]    { --sig:#4ade80; --sig-bg:rgba(34,197,94,0.14); }
.dark .aird-sig-title { color: #fafafa; }
.dark .aird-sig-desc { color: #a1a1aa; }
.dark .aird-disclosure > summary { color: #fafafa; }
.dark .aird-disclosure > summary:hover { background: #1a1a1a; }
.dark .aird-disclosure[open] > summary { border-bottom-color: #262626; }
.dark .aird-method-icon { background: rgba(37,99,235,0.18); color: #60a5fa; }
.dark .aird-method-name { color: #fafafa; }
.dark .aird-method-desc { color: #a1a1aa; }
.dark .aird-factor-list { border-top-color: #262626; }
.dark .aird-factor-lbl { color: #e4e4e7; }
.dark .aird-factor-desc { color: #a1a1aa; }
.dark .aird-note { color: #71717a; }
.dark .aird-note svg { color: #52525b; }

.dark .ai-stat-icon-svg {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.dark .ai-flags-icon-svg {
  color: #60a5fa;
}

.dark .ai-note-icon-svg {
  color: #6b7280;
}

.dark .ai-flags-header {
  border-bottom-color: #404040;
}

.dark .ai-flag-row-clean {
  background: #1e1e1e;
}

.dark .ai-flag-row-clean:hover {
  background: #2a2a2a;
}

.dark .ai-flag-label {
  color: #d4d4d4;
}

.dark .ai-panel-note {
  background: #262626;
  border-color: #404040;
  color: #9ca3af;
}

.dark .ai-detection-modal .premium-panel-right {
  background: linear-gradient(180deg, #1e1e1e 0%, #171717 100%);
}

.dark .premium-similarity-badge-panel.ai-probability {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #60a5fa !important;
}

.dark .premium-similarity-badge-panel.ai-probability i {
  color: #60a5fa !important;
  opacity: 0.9;
}

/* AI Detection Modal - Special styling */
.ai-detection-modal .ring-fill {
  stroke: #3b82f6 !important;
}

.ai-detection-modal .premium-type-badge {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #2563eb !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.ai-detection-modal .premium-panel-right {
  background: #fafafa;
}

.ai-detection-modal .premium-panel-right .premium-panel-header {
  background: rgba(59, 130, 246, 0.04);
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.ai-detection-modal .premium-panel-right .premium-panel-icon {
  background: #3b82f6 !important;
}

.ai-detection-modal .premium-panel-right .premium-panel-icon i {
  color: white !important;
}

.dark .ai-detection-modal .premium-panel-right {
  background: #1e1e1e;
}

.dark .ai-detection-modal .premium-panel-right .premium-panel-header {
  background: rgba(59, 130, 246, 0.08);
  border-bottom-color: rgba(59, 130, 246, 0.15);
}

.dark .ai-detection-modal .premium-panel-right .premium-panel-icon i {
  color: white !important;
}

.dark .ai-detection-modal .premium-type-badge {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(236, 72, 153, 0.2) 100%) !important;
  color: #d8b4fe !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

.match-detail-divider {
  width: 1px;
  height: 24px;
  background: #e5e7eb;
}

/* View Button */
.match-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.match-view-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: white;
}

/* Nothing to open and nothing to compare: reads as a state, not an action. */
.match-view-btn.is-inert,
.match-view-btn.is-inert:hover {
  background: transparent;
  border-color: transparent;
  color: #9ca3af;
  cursor: default;
  font-style: italic;
}

.match-view-btn i {
  font-size: 10px;
}

/* Secondary action on the same line as the meta: the icon alone, so the row
   never wraps and push the card back to two-line height. */
.match-view-btn.is-icon {
  padding: 3px 6px;
}

.match-view-btn.is-icon i {
  font-size: 11px;
}

/* Hide old legacy elements */
.match-score-badge,
.match-confidence-badge,
.match-content,
.match-type-icon,
.match-details,
.match-title,
.match-subtitle,
.match-info,
.match-info-grid,
.info-item,
.info-label,
.info-value,
.match-tokens,
.match-type-label,
.match-lines,
.code-preview,
.btn-view-match-new,
.match-meta-row,
.match-lines-info,
.match-info-section {
  display: none !important;
}

/* Old match card styles for compatibility */
.match-card {
  background: white;
  border: 1px solid var(--kt-border-color, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.match-card:hover {
  border-color: var(--kt-primary, #6366f1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  transform: translateY(-2px);
}

.match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--kt-card-bg, #f9fafb);
  border-bottom: 1px solid var(--kt-border-color, #e5e7eb);
}

.match-type-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.match-type-badge.peer {
  background: rgba(99, 102, 241, 0.1);
  color: var(--kt-primary, #6366f1);
}

.match-type-badge.web {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.match-type-badge.github {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}

.match-type-badge.stackoverflow {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.match-type-badge.bitbucket {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.match-type-badge.gitlab {
  background: rgba(251, 146, 60, 0.1);
  color: #fb923c;
}

.match-type-badge.pastebin {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.match-type-badge.cheating {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.match-type-badge.other {
  background: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

.match-type-badge i {
  font-size: 14px;
}

.match-similarity {
  font-size: 16px;
  font-weight: 700;
  color: var(--kt-text-primary, #1f2937);
}

.match-body {
  padding: 14px;
}

.match-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--kt-text-primary, #1f2937);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.match-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--kt-text-secondary, #6b7280);
}

.match-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.match-meta i {
  font-size: 12px;
  color: var(--kt-primary, #6366f1);
}

.match-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--kt-border-color, #e5e7eb);
  background: var(--kt-card-bg, #fafafa);
}

.btn-view-match {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--kt-border-color, #e5e7eb);
  background: white;
  color: var(--kt-text-secondary, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-view-match:hover {
  background: var(--kt-primary, #6366f1);
  border-color: var(--kt-primary, #6366f1);
  color: white;
}

.loading-matches, .empty-matches {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--kt-text-secondary, #9ca3af);
  text-align: center;
  gap: 12px;
}

.spinner-small {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(99, 102, 241, 0.1);
  border-top-color: var(--kt-primary, #6366f1);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.empty-matches i {
  font-size: 40px;
  opacity: 0.5;
}

/* Responsive Layout */
@media (max-width: 1920px) {
  .submission-viewer-grid {
    grid-template-columns: minmax(0, 48%) minmax(0, 28%) minmax(0, 24%);
  }
}

@media (max-width: 1600px) {
  .submission-viewer-grid {
    grid-template-columns: minmax(0, 50%) minmax(0, 30%) minmax(0, 20%);
    gap: 14px;
  }
  
  .viewer-card {
    min-height: calc(100vh - 160px);
    max-height: calc(100vh - 160px);
  }
  
  .code-preview code {
    font-size: 10px;
  }
}

@media (max-width: 1400px) {
  .submission-viewer-grid {
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    gap: 12px;
  }
  
  .viewer-card:last-child {
    display: none;
  }
  
  .match-card-new {
    padding: 7px 8px 7px 10px;
  }

  .match-score-circle {
    width: 30px;
    height: 30px;
    font-size: 9px;
  }

  .match-source-name {
    font-size: 11.5px;
  }

  .match-card-details {
    gap: 11px;
  }

  .match-detail-value {
    font-size: 10.5px;
  }
}

@media (max-width: 1024px) {
  .submission-viewer-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .viewer-card {
    min-height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
  }
  
  .viewer-card:nth-child(2),
  .viewer-card:nth-child(3) {
    display: none;
  }
}

@media (max-width: 768px) {
  .viewer-card {
    min-height: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
  }
}

/* ============================================
   MODAL V2 - Premium Apple-like Design
   ============================================ */
.modal-v2 {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-v2-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from { 
    opacity: 0; 
    transform: scale(0.95) translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
  }
}

.modal-v2-container {
  position: relative;
  width: 95vw;
  max-width: 1600px;
  height: 90vh;
  max-height: 900px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 
    0 24px 80px rgba(0, 0, 0, 0.25),
    0 0 1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

/* Modal Header */
.modal-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
  border-bottom: 1px solid #e5e5e5;
  flex-shrink: 0;
}

.modal-v2-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.modal-v2-similarity-ring {
  position: relative;
  width: 48px;
  height: 48px;
}

.modal-v2-similarity-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.modal-v2-similarity-ring .ring-bg {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 3;
}

.modal-v2-similarity-ring .ring-fill {
  fill: none;
  stroke: url(#similarity-gradient);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

.modal-v2-similarity-ring .ring-fill.high { stroke: #ef4444; }
.modal-v2-similarity-ring .ring-fill.medium { stroke: #f59e0b; }
.modal-v2-similarity-ring .ring-fill.low { stroke: #10b981; }

.modal-v2-similarity-ring .ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
}

.modal-v2-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-v2-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  letter-spacing: -0.02em;
}

.modal-v2-subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-v2-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-v2-meta {
  font-size: 13px;
  color: #6b7280;
}

.modal-v2-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  text-decoration: none;
}

.modal-v2-btn-secondary {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.modal-v2-btn-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.modal-v2-btn-ghost {
  background: transparent;
  color: #6b7280;
}

.modal-v2-btn-ghost:hover {
  background: #f3f4f6;
  color: #374151;
}

.modal-v2-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.modal-v2-close:hover {
  background: #e5e7eb;
  color: #1f2937;
  transform: scale(1.05);
}

.modal-v2-close i {
  font-size: 16px;
}

/* Modal Body - Code Comparison */
.modal-v2-body {
  flex: 1;
  overflow: hidden;
  background: #f9fafb;
}

.code-compare-grid {
  display: grid;
  grid-template-columns: 1fr 8px 1fr;
  height: 100%;
}

.code-panel {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

.code-panel-left {
  border-right: 1px solid #e5e7eb;
}

.code-panel-right {
  border-left: 1px solid #e5e7eb;
}

.code-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.code-panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.code-panel-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.code-panel-icon.student {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
}

.code-panel-icon.matched {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  color: #be185d;
}

.code-panel-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.code-panel-label {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.code-panel-filename {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-panel-badge {
  padding: 4px 10px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  font-family: 'SF Mono', 'Monaco', monospace;
}

.code-panel-body {
  flex: 1;
  overflow: auto;
  background: #f8fafc;
  position: relative;
}

.code-panel-body pre {
  margin: 0;
  padding: 16px;
  font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #1e293b;
  min-height: 100%;
  background: transparent;
}

.code-panel-body code {
  font-family: inherit;
  color: #1e293b;
}

/* Syntax highlighting for light background */
.code-panel-body .hljs-keyword { color: #d946ef; }
.code-panel-body .hljs-string { color: #16a34a; }
.code-panel-body .hljs-number { color: #2563eb; }
.code-panel-body .hljs-comment { color: #6b7280; font-style: italic; }
.code-panel-body .hljs-function { color: #7c3aed; }
.code-panel-body .hljs-class { color: #0891b2; }
.code-panel-body .hljs-variable { color: #1e293b; }
.code-panel-body .hljs-built_in { color: #0d9488; }
.code-panel-body .hljs-type { color: #0891b2; }
.code-panel-body .hljs-title { color: #2563eb; }
.code-panel-body .hljs-params { color: #64748b; }

/* Code Loading State */
.code-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
}

.code-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Resizable Divider */
.code-compare-divider {
  background: #e5e7eb;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.code-compare-divider:hover {
  background: #d1d5db;
}

.divider-handle {
  color: #9ca3af;
  font-size: 12px;
}

/* Modal Footer */
.modal-v2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.modal-v2-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-hint {
  font-size: 12px;
  color: #9ca3af;
}

.footer-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  color: #6b7280;
}

.modal-v2-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Code Highlighting in Modal */
.code-panel-body .highlighted-line {
  background: rgba(254, 202, 202, 0.5) !important;
  border-left: 3px solid #ef4444;
  margin-left: -16px;
  padding-left: 13px;
  display: block;
}

.code-panel-body .line-number {
  color: #94a3b8;
  user-select: none;
  padding-right: 16px;
  text-align: right;
  min-width: 40px;
  display: inline-block;
}

/* Dark Mode */
.dark .modal-v2-backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.dark .modal-v2-container {
  background: #1f2937;
  box-shadow: 
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 1px rgba(255, 255, 255, 0.1);
}

.dark .modal-v2-header {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  border-bottom-color: #374151;
}

.dark .modal-v2-title {
  color: #f9fafb;
}

.dark .modal-v2-meta {
  color: #9ca3af;
}

.dark .modal-v2-similarity-ring .ring-bg {
  stroke: #374151;
}

.dark .modal-v2-similarity-ring .ring-text {
  color: #f9fafb;
}

.dark .modal-v2-close {
  background: #374151;
  color: #9ca3af;
}

.dark .modal-v2-close:hover {
  background: #4b5563;
  color: #f9fafb;
}

.dark .modal-v2-btn-secondary {
  background: #374151;
  color: #e5e7eb;
  border-color: #4b5563;
}

.dark .modal-v2-btn-secondary:hover {
  background: #4b5563;
}

.dark .modal-v2-btn-ghost {
  color: #9ca3af;
}

.dark .modal-v2-btn-ghost:hover {
  background: #374151;
  color: #e5e7eb;
}

.dark .modal-v2-body {
  background: #111827;
}

.dark .code-panel {
  background: #1f2937;
}

.dark .code-panel-left {
  border-right-color: #374151;
}

.dark .code-panel-right {
  border-left-color: #374151;
}

.dark .code-panel-header {
  background: #1f2937;
  border-bottom-color: #374151;
}

.dark .code-panel-label {
  color: #6b7280;
}

.dark .code-panel-filename {
  color: #f9fafb;
}

.dark .code-panel-badge {
  background: #374151;
  color: #9ca3af;
}

.dark .code-panel-body {
  background: #121212;
}

.dark .code-panel-body pre {
  color: #e2e8f0;
}

.dark .code-panel-body code {
  color: #e2e8f0;
}

.dark .code-panel-body .hljs-keyword { color: #f472b6; }
.dark .code-panel-body .hljs-string { color: #4ade80; }
.dark .code-panel-body .hljs-number { color: #60a5fa; }
.dark .code-panel-body .hljs-comment { color: #6b6b6b; }
.dark .code-panel-body .hljs-function { color: #c084fc; }
.dark .code-panel-body .hljs-class { color: #22d3ee; }
.dark .code-panel-body .hljs-type { color: #22d3ee; }
.dark .code-panel-body .hljs-title { color: #60a5fa; }

.dark .code-panel-body .highlighted-line {
  background: rgba(239, 68, 68, 0.2) !important;
}

.dark .code-panel-body .line-number {
  color: #404040;
}

.dark .code-loading {
  background: #121212;
  color: #6b6b6b;
}

.dark .code-loading-spinner {
  border-color: #2d2d2d;
  border-top-color: #3b82f6;
}

.dark .code-compare-divider {
  background: #374151;
}

.dark .code-compare-divider:hover {
  background: #4b5563;
}

.dark .divider-handle {
  color: #6b7280;
}

.dark .modal-v2-footer {
  background: #1f2937;
  border-top-color: #374151;
}

.dark .footer-hint {
  color: #6b7280;
}

.dark .footer-hint kbd {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

/* Responsive */
@media (max-width: 1024px) {
  .code-compare-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 8px 1fr;
  }
  
  .code-compare-divider {
    cursor: row-resize;
  }
  
  .code-panel-left {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .code-panel-right {
    border-left: none;
    border-top: 1px solid #e5e7eb;
  }
}

@media (max-width: 640px) {
  .modal-v2-container {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
  }
  
  .modal-v2-header {
    padding: 12px 16px;
  }
  
  .modal-v2-similarity-ring {
    width: 40px;
    height: 40px;
  }
  
  .modal-v2-title {
    font-size: 16px;
  }
}

/* Custom Modal Styles (Scoped, No Flowbite Conflicts) */
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  isolation: isolate;
}

.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.custom-modal-content {
  position: relative;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.2);
  border: 0.5px solid rgba(255, 255, 255, 0.8);
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.custom-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.custom-modal-header h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}

.custom-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(120, 120, 128, 0.16);
  color: #86868b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.custom-modal-close:hover {
  background: rgba(120, 120, 128, 0.24);
  color: #1d1d1f;
  transform: scale(1.05);
}

.custom-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.modal-info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-info-label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-info-value {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  font-family: 'Monaco', 'Menlo', monospace;
}

.modal-code-container {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.modal-code-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: white;
  padding: 12px 16px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-code-body {
  background: #f9fafb;
  padding: 16px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
}

.modal-code-body pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #1f2937;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.modal-code-body code {
  font-family: inherit;
}

.custom-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.custom-modal-footer .btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.custom-modal-footer .btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.custom-modal-footer .btn-secondary:hover {
  background: #e5e7eb;
}

.custom-modal-footer .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
}

.custom-modal-footer .btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close modal on ESC key */
@media (max-width: 768px) {
  .custom-modal-content {
    max-width: 95%;
    max-height: 95vh;
  }
  
  .modal-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   🌟 WORLD-CLASS VIEWER STYLES
   ======================================== */

/* 🛡️ EVIDENCE SUMMARY CARD */
.evidence-summary-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 16px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
  color: white;
}

.evidence-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.evidence-title-section h2 {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.evidence-subtitle {
  font-size: 13px;
  opacity: 0.9;
}

.evidence-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.evidence-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.evidence-main {
  padding: 24px;
}

.evidence-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}

.evidence-stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.stat-icon-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.stat-value-huge {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label-large {
  font-size: 16px;
  opacity: 0.9;
  font-weight: 600;
}

.evidence-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.metric-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-label {
  font-size: 12px;
  opacity: 0.9;
  font-weight: 500;
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
}

.evidence-details {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  animation: slideDown 0.3s ease;
}

.evidence-details h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.findings-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.finding-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.finding-item::before {
  content: '●';
  font-size: 18px;
}

.recommended-action {
  background: rgba(255, 255, 255, 0.15);
  padding: 16px;
  border-radius: 10px;
  border-left: 4px solid rgba(255, 255, 255, 0.5);
}

.recommended-action p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🛠️ QUICK ACTION TOOLBAR */
.quick-action-toolbar {
  background: white;
  margin: 16px 16px 0 16px;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.toolbar-section {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  color: #374151;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-btn i {
  font-size: 16px;
}

.flag-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

.clear-btn:hover {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
}

.compare-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.notes-btn:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #d97706;
}

.export-btn:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #7c3aed;
}

.reviewed-btn:hover {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #059669;
}

.filter-btn:hover, .timeline-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* 🔍 ADVANCED FILTERS PANEL */
.advanced-filters-panel {
  background: white;
  margin: 16px 16px 0 16px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: slideDown 0.3s ease;
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filters-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-filters {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-filters:hover {
  background: #e5e7eb;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-group select,
.filter-group input[type="number"] {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  color: #1f2937;
  background: white;
}

.filter-group input[type="range"] {
  width: 100%;
}

.filter-value {
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
}

.action-btn-small {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.reset-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

.apply-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: white;
}

/* 🤖 AI DETECTION PANEL */
.ai-detection-panel {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.ai-detection-content {
  padding: 0;
}

.ai-overall-score {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.05);
}

.ai-score-circle {
  position: relative;
  flex-shrink: 0;
}

.ai-score-ring {
  transform: rotate(-90deg);
}

.ai-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 8;
}

.ai-ring-progress {
  fill: none;
  stroke: white;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1s ease;
}

.ai-score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.ai-score-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.ai-score-label {
  font-size: 11px;
  opacity: 0.9;
  margin-top: 4px;
}

.ai-score-details {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ai-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-detail-label {
  font-size: 11px;
  opacity: 0.8;
  font-weight: 500;
}

.ai-detail-value {
  font-size: 16px;
  font-weight: 700;
}

.ai-high-risk {
  color: #fca5a5;
}

.ai-files-list {
  padding: 20px;
}

.ai-files-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ai-files-header h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.ai-files-count {
  font-size: 12px;
  opacity: 0.8;
}

.ai-files-scroll {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-file-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.ai-file-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(4px);
}

.ai-file-name {
  font-size: 13px;
  font-weight: 500;
  font-family: monospace;
}

.ai-file-score {
  font-size: 16px;
  font-weight: 700;
}

.ai-no-data {
  text-align: center;
  padding: 40px 20px;
  opacity: 0.7;
  font-size: 14px;
}

/* 🎯 SMART SCORE PANEL */
.smart-score-panel {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.smart-score-content {
  padding: 24px;
}

.smart-score-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.gauge-container {
  text-align: center;
}

.gauge-value {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.gauge-label {
  font-size: 14px;
  opacity: 0.9;
  font-weight: 600;
}

.gauge-indicator {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.gauge-needle {
  position: absolute;
  left: 0%;
  top: 0;
  width: 4px;
  height: 100%;
  background: white;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  transition: left 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.smart-score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.score-factor {
  background: rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: 10px;
}

.factor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.factor-name {
  font-size: 13px;
  font-weight: 600;
}

.factor-weight {
  font-size: 11px;
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
}

.factor-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.factor-fill {
  height: 100%;
  background: white;
  border-radius: 3px;
  transition: width 1s ease;
}

.factor-value {
  font-size: 14px;
  font-weight: 700;
}

/* 📅 TIMELINE MODAL */
.timeline-modal {
  max-width: 700px;
}

.timeline-container {
  position: relative;
  padding-left: 40px;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #6366f1, #8b5cf6);
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-marker {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.timeline-marker.submitted {
  background: #3b82f6;
}

.timeline-marker.processed {
  background: #8b5cf6;
}

.timeline-marker.checked {
  background: #f59e0b;
}

.timeline-marker.ai {
  background: #ec4899;
}

.timeline-marker.reviewed {
  background: #10b981;
}

.timeline-content {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  border-left: 3px solid #e5e7eb;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.timeline-title {
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
}

.timeline-time {
  font-size: 12px;
  color: #6b7280;
}

.timeline-desc {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 8px 0;
}

.timeline-details {
  font-size: 12px;
  color: #374151;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

/* 🔄 COMPARISON MODAL */
.full-width-modal .custom-modal-content {
  max-width: 95vw;
  width: 95vw;
  max-height: 90vh;
}

.comparison-modal .custom-modal-content {
  max-width: 95vw !important;
  width: 95vw !important;
  max-height: 90vh;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
}

.comparison-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}

.sync-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.comparison-body {
  padding: 0 !important;
  flex: 1;
  overflow: hidden;
  min-height: 0; /* Critical for proper flex container behavior */
}

.comparison-panels {
  display: grid !important;
  grid-template-columns: 1fr 3px 1fr !important;
  grid-template-rows: 1fr;
  gap: 0;
  height: 100%;
  width: 100%;
  min-height: 0; /* Prevent expansion beyond container */
}

.comparison-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0; /* Critical for proper flex container behavior */
  min-width: 0; /* Prevent grid blowout */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.comparison-panel-header {
  padding: 14px 18px;
  background: rgba(242, 242, 247, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #1d1d1f;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.comparison-panel-header .header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.comparison-panel-header .header-left span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1d1d1f;
}

.comparison-panel-header i {
  font-size: 16px;
  flex-shrink: 0;
  color: #86868b;
}

.comparison-panel-header .similarity-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  letter-spacing: -0.01em;
}

.comparison-panel-header .similarity-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.comparison-panel-header .similarity-badge i {
  font-size: 14px;
}

.comparison-panel-header .similarity-badge.high {
  background: rgba(255, 59, 48, 0.95);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.comparison-panel-header .similarity-badge.medium {
  background: rgba(255, 149, 0, 0.95);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.comparison-panel-header .similarity-badge.low {
  background: rgba(52, 199, 89, 0.95);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

@keyframes pulseBadge {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
  }
}

.comparison-panel-body {
  flex: 1;
  overflow: auto;
  background: rgba(255, 255, 255, 0.95);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  max-height: 100%; /* Ensure height constraint */
  position: relative; /* For proper overflow context */
}

.comparison-panel-body pre {
  margin: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.comparison-panel-body code {
  display: block;
  max-height: none !important;
  overflow: visible !important;
}

.comparison-panel-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.comparison-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.comparison-panel-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.95);
}

.comparison-panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.comparison-code-line.highlighted {
  animation: highlightPulse 1s ease-in-out;
}

@keyframes highlightPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Syntax Highlighting Color Overrides for Light Theme */
.comparison-panel-body .hljs {
  background: transparent !important;
  color: #1f2937 !important;
}

.comparison-panel-body .hljs-keyword {
  color: #7c3aed !important;
  font-weight: 600;
}

.comparison-panel-body .hljs-string {
  color: #059669 !important;
}

.comparison-panel-body .hljs-number {
  color: #ea580c !important;
}

.comparison-panel-body .hljs-comment {
  color: #6b7280 !important;
  font-style: italic;
}

.comparison-panel-body .hljs-function .hljs-title {
  color: #2563eb !important;
  font-weight: 600;
}

.comparison-panel-body .hljs-class .hljs-title {
  color: #db2777 !important;
  font-weight: 600;
}

.comparison-panel-body .hljs-type {
  color: #0891b2 !important;
}

.comparison-panel-body .hljs-built_in {
  color: #7c3aed !important;
}

.comparison-panel-body .hljs-variable {
  color: #be123c !important;
}

.comparison-panel-body .hljs-literal {
  color: #ea580c !important;
}

.comparison-panel-body .hljs-meta {
  color: #9333ea !important;
}

.comparison-panel-body .hljs-tag {
  color: #059669 !important;
}

.comparison-panel-body .hljs-attr {
  color: #2563eb !important;
}

.comparison-panel-body .hljs-selector-class {
  color: #db2777 !important;
}

.comparison-panel-body .hljs-selector-id {
  color: #7c3aed !important;
}

.comparison-panel-body .code-content {
  line-height: 1.65;
}

.panel-header {
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-info {
  font-size: 12px;
  color: #6b7280;
  font-family: monospace;
}

.panel-code {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f9fafb;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 13px;
  line-height: 1.6;
}

.panel-code pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.comparison-divider {
  background: rgba(0, 0, 0, 0.08);
  width: 1px;
  position: relative;
  box-shadow: none;
  cursor: col-resize;
  user-select: none;
  transition: background 0.2s ease;
}

.comparison-divider:hover {
  background: rgba(0, 122, 255, 0.2);
}

.comparison-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  border: 3px solid white;
}

.comparison-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(248, 248, 248, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  flex-wrap: wrap;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

/* Modal Footer Styles */
.custom-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(248, 248, 248, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.custom-modal-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  cursor: pointer;
  border: 0.5px solid transparent;
  letter-spacing: -0.01em;
}

.custom-modal-footer .btn i {
  font-size: 15px;
}

.custom-modal-footer .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, 0.1);
}

.custom-modal-footer .btn-secondary:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.custom-modal-footer .btn-primary {
  background: rgba(0, 122, 255, 1);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}

.custom-modal-footer .btn-primary:hover {
  background: rgba(0, 112, 243, 1);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
  transform: translateY(-1px);
}

.custom-modal-footer .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}

.comparison-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  min-width: 100px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.comparison-stats .stat-item:hover {
  border-color: rgba(0, 122, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 1);
}

.comparison-stats .stat-label {
  font-size: 11px;
  color: #86868b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.comparison-stats .stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .evidence-stats {
    grid-template-columns: 1fr;
  }
  
  .evidence-metrics {
    grid-template-columns: 1fr;
  }
  
  /* Comparison panel adjustments for tablets */
  .comparison-panel-header {
    font-size: 12px;
  }
  
  .comparison-panel-header .similarity-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
}

@media (max-width: 640px) {
  /* Comparison panel adjustments for mobile */
  .comparison-panels {
    grid-template-columns: 1fr !important;
  }
  
  .comparison-divider {
    display: none !important;
  }
  
  .comparison-panel-header {
    flex-wrap: wrap;
  }
  
  .comparison-panel-header .similarity-badge {
    margin-left: auto;
  }
  
  .quick-action-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .toolbar-section {
    justify-content: center;
  }
}

/* ============================================ */
/* DEBUG PANEL STYLES */
/* ============================================ */

.debug-panel {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 800px;
  max-height: calc(100vh - 120px);
  background: #ffffff;
  border: 2px solid #6366f1;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.1);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideInDebug 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideInDebug {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.debug-title i {
  font-size: 20px;
}

.debug-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.debug-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.debug-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.debug-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.debug-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.debug-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.debug-tab:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.debug-tab.active {
  background: #ffffff;
  color: #6366f1;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.debug-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #ffffff;
}

.debug-content::-webkit-scrollbar {
  width: 8px;
}

.debug-content::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.debug-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.debug-content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.debug-tab-content {
  display: none;
}

.debug-tab-content.active {
  display: block;
}

.debug-tab-content h4 {
  margin: 0 0 16px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.debug-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.debug-info-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.debug-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.debug-value {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  font-family: 'Monaco', 'Menlo', monospace;
}

.debug-table-container {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.debug-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
}

.debug-table thead {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  position: sticky;
  top: 0;
  z-index: 1;
}

.debug-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}

.debug-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #1f2937;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 11px;
}

.debug-table tbody tr:hover {
  background: #fef3c7;
}

.debug-similarity-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  display: inline-block;
}

.debug-similarity-badge.low {
  background: #d1fae5;
  color: #065f46;
}

.debug-similarity-badge.medium {
  background: #fed7aa;
  color: #78350f;
}

.debug-similarity-badge.high {
  background: #fecaca;
  color: #991b1b;
}

.debug-json-viewer {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 12px;
  background: #1f2937;
  color: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
}

.debug-json-pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 11px;
  line-height: 1.6;
  background: #1f2937;
  color: #10b981;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  max-height: 600px;
  overflow-y: auto;
}

.debug-copy-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  transition: all 0.2s;
}

.debug-copy-btn:hover {
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}

.debug-no-data {
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  padding: 40px 20px;
  font-size: 14px;
}

@media (max-width: 1200px) {
  .debug-panel {
    width: 600px;
  }
}

@media (max-width: 768px) {
  .debug-panel {
    width: calc(100% - 48px);
    top: 60px;
  }
}

/* ========================================
   DARK MODE STYLES - neutral black tones
   ======================================== */

.dark .empty-state-container {
  background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
}

.dark .empty-state-title {
  color: #f1f5f9;
}

.dark .empty-state-text {
  color: #a1a1a1;
}

.dark .empty-state-text-small {
  color: #a1a1a1;
}

.dark .submission-nav-widget {
  background: #1a1a1a;
  border-color: #2d2d2d;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .nav-header {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-bottom-color: #2d2d2d;
}

.dark .drag-handle {
  color: #6b6b6b;
}

.dark .nav-header:hover .drag-handle {
  color: #818cf8;
}

.dark .submission-nav-widget.dragging {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark .submission-nav-widget.dragging .drag-handle {
  color: #818cf8;
}

.dark .nav-title {
  color: #f1f5f9;
}

.dark .toggle-btn {
  background: #2d2d2d;
}

.dark .toggle-btn:hover {
  background: #404040;
}

.dark .toggle-btn i {
  color: #cbd5e1;
}

.dark .nav-body {
  background: #1a1a1a;
}

.dark .search-box {
  background: #121212;
  border-bottom-color: #2d2d2d;
}

.dark .search-box i {
  color: #6b6b6b;
}

.dark .search-box input {
  color: #f1f5f9;
}

.dark .search-box input::placeholder {
  color: #6b6b6b;
}

.dark .submissions-list {
  background: #1a1a1a;
}

.dark .submissions-list::-webkit-scrollbar-track {
  background: #121212;
}

.dark .submissions-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #404040 0%, #2d2d2d 100%);
}

.dark .submissions-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5a5a5a 0%, #404040 100%);
}

.dark .submissions-list {
  scrollbar-color: #404040 #121212;
}

.dark .submission-item {
  background: #121212;
  border-color: transparent;
}

.dark .submission-item:hover {
  background: #252525;
  border-color: #3b82f6;
}

.dark .submission-item.active {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.dark .submission-name {
  color: #f1f5f9;
}

.dark .view-btn {
  background: #2d2d2d;
  border-color: #404040;
}

.dark .view-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
}

.dark .view-btn i {
  color: #cbd5e1;
}

.dark .empty-state-nav {
  color: #64748b;
}

.dark .viewer-card {
  background: #1a1a1a;
  border-color: #2d2d2d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .column-header {
  background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
  border-bottom-color: #2d2d2d;
}

.dark .header-title {
  color: #f1f5f9;
}

.dark .plagiarism-legend {
  border-left-color: #333333;
}

.dark .plagiarism-legend small {
  color: #8b8b8b;
}

.dark .header-title i {
  color: #6366f1;
}

.dark .header-icon {
  background: rgba(99, 102, 241, 0.18);
}

.dark .code-column .column-header {
  background: #161616;
  border-bottom-color: #2a2a2a;
}

.dark .btn-icon {
  background: #2d2d2d;
  border-color: #404040;
  color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark .btn-icon:hover {
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  border-color: #6366f1;
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.dark .code-column {
  background: #121212;
}

.dark .viewer-card.fullscreen-mode .column-header {
  background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%) !important;
}

/* Match Explorer header — dark */
.dark .matches-column .column-header {
  background: #161616;
  border-bottom-color: #2a2a2a;
}

.dark .mx-count {
  color: #8b8b8b;
}

.dark .mx-tune-btn {
  background: #1a1a1a;
  border-color: #2d2d2d;
  color: #a1a1a1;
}

.dark .mx-tune-btn:hover {
  background: #252525;
  border-color: #404040;
  color: #e2e8f0;
}

.dark .mx-tune-btn.is-open {
  background: rgba(99, 102, 241, 0.18);
  border-color: #4f46e5;
  color: #c7d2fe;
}

.dark .mx-tune-dot {
  box-shadow: 0 0 0 2px #161616;
}

.dark .mx-tune-pop {
  background: #1a1a1a;
  border-color: #2d2d2d;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.dark .mx-tune-row:hover {
  background: #232323;
}

.dark .mx-tune-name {
  color: #e2e8f0;
}

.dark .mx-tune-name #ai-threshold-value {
  color: #c4b5fd;
}

.dark .mx-tune-hint {
  color: #8b8b8b;
}

.dark .mx-tune-reset {
  border-top-color: #2d2d2d;
  color: #a1a1a1;
}

.dark .mx-tune-reset:hover {
  background: #232323;
  color: #c7d2fe;
}

.dark .code-meta-bar {
  background: #121212;
  border-bottom-color: #2a2a2a;
}

.dark .file-name {
  color: #e8eaf0;
}

.dark .line-count {
  color: #8b8b8b;
}

.dark .file-tabs {
  background: transparent;
  border-bottom: none;
}

.dark .file-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

.dark .tab {
  color: #94a3b8;
}

.dark .tab:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #f1f5f9;
}

.dark .tab.active {
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.4);
}

.dark .tab-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #a1a1a1;
}

.dark .tab.active .tab-badge {
  background: rgba(99, 102, 241, 0.3);
  color: #e0e7ff;
}

.dark .code-viewer {
  background: linear-gradient(135deg, #0d0d0d 0%, #121212 100%);
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

.dark .code-viewer::-webkit-scrollbar-track {
  background: #121212;
}

.dark .code-viewer::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-color: #121212;
}

.dark .code-viewer::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

.dark .code-line:hover {
  background: rgba(99, 102, 241, 0.12);
  border-left-color: rgba(99, 102, 241, 0.5);
}

.dark .line-number {
  color: #6b6b6b;
  background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
  border-right-color: #2d2d2d;
}

.dark .code-line:hover .line-number {
  color: #6366f1;
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
}

.dark .line-content {
  color: #e2e8f0;
  scrollbar-color: rgba(99, 102, 241, 0.25) transparent;
}

.dark .line-content::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.25);
}

.dark .line-content::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.4);
}

/* Dark Mode Syntax Highlighting */
.dark .line-content .hljs-keyword {
  color: #a78bfa;
}

.dark .line-content .hljs-string {
  color: #6ee7b7;
}

.dark .line-content .hljs-number {
  color: #fb923c;
}

.dark .line-content .hljs-comment {
  color: #64748b;
}

.dark .line-content .hljs-function .hljs-title {
  color: #60a5fa;
}

.dark .line-content .hljs-class .hljs-title {
  color: #f472b6;
}

.dark .line-content .hljs-type {
  color: #22d3ee;
}

.dark .line-content .hljs-built_in {
  color: #a78bfa;
}

.dark .line-content .hljs-variable {
  color: #fb7185;
}

.dark .line-content .hljs-literal {
  color: #fb923c;
}

.dark .line-content .hljs-meta {
  color: #c084fc;
}

.dark .line-content .hljs-tag {
  color: #6ee7b7;
}

.dark .line-content .hljs-attr {
  color: #60a5fa;
}

.dark .empty-state {
  color: #64748b;
}

.dark .charts-column {
  background: #121212;
}

.dark .charts-column::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

.dark .charts-column::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.dark .charts-column {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.dark .chart-card {
  background: #1a1a1a;
  border-color: #2d2d2d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .chart-card-header h4 {
  color: #f1f5f9;
}

.dark .chart-subtitle {
  color: #a1a1a1;
}

.dark .legend-item {
  color: #a1a1a1;
}

.dark .stat-card {
  background: #1a1a1a;
  border-color: #2d2d2d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .stat-icon.peer {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
}

.dark .stat-icon.web {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.dark .stat-value {
  color: #f1f5f9;
}

.dark .stat-label {
  color: #94a3b8;
}

.dark .risk-percentage {
  color: #f1f5f9;
}

.dark .risk-bar-bg {
  background: rgba(142, 142, 147, 0.18);
}

.dark .risk-markers {
  color: #98989d;
}

.dark .risk-score-breakdown {
  background: transparent;
}

.dark .risk-breakdown-item {
  background: rgba(142, 142, 147, 0.1);
  border: none;
}

.dark .risk-breakdown-item:hover {
  background: rgba(142, 142, 147, 0.16);
  box-shadow: none;
}

.dark .risk-breakdown-item.peer:hover {
  background: rgba(94, 92, 230, 0.12);
}

.dark .risk-breakdown-item.web:hover {
  background: rgba(10, 132, 255, 0.12);
}

.dark .risk-breakdown-item.highest:hover {
  background: rgba(255, 159, 10, 0.12);
}

.dark .risk-breakdown-item.peer .breakdown-header {
  color: #bf5af2;
}

.dark .risk-breakdown-item.web .breakdown-header {
  color: #64d2ff;
}

.dark .risk-breakdown-item.highest .breakdown-header {
  color: #ffd60a;
}

.dark .breakdown-icon {
  background: rgba(142, 142, 147, 0.2);
  color: #f5f5f7;
}

.dark .breakdown-value {
  color: #f5f5f7;
}

.dark .breakdown-label {
  color: #98989d;
}

/* Match Explorer Dark Mode - neutral black tones */
.dark .matches-column {
  background: #121212;
}

.dark .matches-list {
  background: #121212;
}

.dark .matches-list::-webkit-scrollbar-track {
  background: #121212;
}

.dark .matches-list::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
}

.dark .matches-list::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

.dark .match-explorer-controls {
  background: #1a1a1a !important;
  border-bottom-color: #2d2d2d !important;
}

.dark .match-filter-checkbox span {
  color: #94a3b8 !important;
}

.dark .match-filter-checkbox input[type="checkbox"] {
  accent-color: #6366f1;
}

/* Dark Mode Skeleton Loaders */
.dark .match-skeleton {
  background: rgba(28, 28, 30, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .match-skeleton::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.dark .skeleton-badge,
.dark .skeleton-icon,
.dark .skeleton-text {
  background: rgba(255, 255, 255, 0.1);
}

/* Dark mode for new match cards - neutral black tones */
.dark .match-card-new {
  background: #1a1a1a;
  border-color: #2d2d2d;
}

.dark .match-card-new:hover {
  background: #252525;
  border-color: #404040;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .match-card-new.selected {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

.dark .match-score-circle.high {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%);
  border-color: rgba(239, 68, 68, 0.5);
}

.dark .match-score-circle.medium {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.2) 100%);
  border-color: rgba(245, 158, 11, 0.5);
}

.dark .match-score-circle.low {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.2) 100%);
  border-color: rgba(16, 185, 129, 0.5);
}

.dark .match-source-name {
  color: #f1f5f9;
}

.dark .match-source-subtitle {
  color: #94a3b8;
}

.dark .match-type-pill {
  background: rgba(255, 255, 255, 0.08);
}

.dark .match-type-pill.peer {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.dark .match-type-pill.web {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
}

.dark .match-type-pill.github {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.dark .match-type-pill.stackoverflow {
  background: rgba(244, 128, 36, 0.2);
  color: #fdba74;
}

.dark .match-type-pill.cheating {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.dark .match-type-pill.libraries {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}

.dark .match-type-pill.ai {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark .match-card-details {
  background: transparent;
  border: 0;
}

.dark .match-detail-label {
  color: #6b6b6b;
}

.dark .match-detail-value {
  color: #e2e8f0;
}

.dark .match-detail-arrow {
  color: #4b5563;
}

/* Dark mode AI Probability indicator colors */
.dark .match-detail-value.ai-prob-high {
  color: #fca5a5;
}

.dark .match-detail-value.ai-prob-medium {
  color: #fdba74;
}

.dark .match-detail-value.ai-prob-low {
  color: #fde047;
}

.dark .match-detail-divider {
  background: #2d2d2d;
}

.dark .match-view-btn {
  background: #2d2d2d;
  border-color: #404040;
  color: #a1a1a1;
}

.dark .match-view-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: white;
}

.dark .filter-tab {
  background: #1a1a1a;
  color: #a1a1a1;
  border-color: #2d2d2d;
}

.dark .filter-tab:hover {
  background: #252525;
  color: #cbd5e1;
  border-color: #404040;
}

.dark .filter-tab.active {
  background: #6366f1;
  color: white;
  border-color: #6366f1;
}

/* AI Filter Tab Dark Mode */
.dark .filter-tab-ai {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.dark .filter-tab-ai:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93c5fd;
}

.dark .filter-tab-ai.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* Match Source Label Dark Mode */
.dark .match-source-label {
  background: rgba(26, 26, 26, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.dark .match-source-label .source-icon {
  color: #94a3b8;
}

.dark .match-source-label .source-percent {
  color: #f1f5f9;
}

.dark .match-source-label .source-tag + .source-tag {
  border-left-color: rgba(255, 255, 255, 0.15);
}

/* Additional Dark Mode Styles for Various Components */
.dark .current-submission-badge {
  background: #222226;
  border-color: #33333a;
  color: #cbd0dc;
  box-shadow: none;
}

.dark .current-submission-badge i {
  color: #7c7c88;
}

.dark .code-meta-bar .file-name {
  color: #e8eaf0;
}

.dark .code-meta-bar .line-count {
  color: #8b8b8b;
}

/* Dark Mode for Match Type Icons */
.dark .match-type-icon {
  background: #2d2d2d;
  color: #cbd5e1;
}

.dark .match-type-icon.peer {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
}

.dark .match-type-icon.web {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}

.dark .match-type-icon.github {
  background: rgba(236, 72, 153, 0.2);
  color: #f9a8d4;
}

/* Dark Mode for Badges */
.dark .similarity-score.low {
  background: rgba(48, 209, 88, 0.2);
  color: #30d158;
}

.dark .similarity-score.medium {
  background: rgba(255, 214, 10, 0.2);
  color: #ffd60a;
}

.dark .similarity-score.high {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

.dark .score-badge.peer-score {
  background: rgba(191, 90, 242, 0.2);
  color: #bf5af2;
}

.dark .score-badge.web-score {
  background: rgba(100, 210, 255, 0.2);
  color: #64d2ff;
}

.dark .score-badge.highest-match {
  background: rgba(255, 214, 10, 0.2);
  color: #ffd60a;
}

.dark .score-badge.highest-match.high-bg {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

.dark .score-badge.highest-match.medium-bg {
  background: rgba(255, 214, 10, 0.2);
  color: #ffd60a;
}

.dark .score-badge.highest-match.low-bg {
  background: rgba(48, 209, 88, 0.2);
  color: #30d158;
}

.dark .match-count-badge {
  background: rgba(100, 210, 255, 0.2);
  color: #64d2ff;
}

.dark .match-count-badge:hover {
  background: rgba(100, 210, 255, 0.28);
}

/* Dark Mode for Loading States */
.dark .score-badge.loading {
  background: rgba(142, 142, 147, 0.16);
  color: #636366;
}

.dark .match-count-badge.loading {
  background: rgba(142, 142, 147, 0.16);
  color: #636366;
}

/* Dark Mode Nav Badge */
.dark .nav-badge {
  background: #6366f1;
  color: white;
}

/* Dark Mode for Chip Elements */
.dark .chip {
  background: rgba(139, 92, 246, 0.25);
  color: #c084fc;
  border-color: rgba(139, 92, 246, 0.5);
}

/* Ensure smooth transitions for dark mode */
.viewer-card,
.column-header,
.btn-icon,
.submission-item,
.match-card-new,
.chart-card,
.stat-card {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode for Additional Components - neutral black tones */
.dark .risk-breakdown-item {
  background: #1a1a1a;
  border-color: #2d2d2d;
}

.dark .breakdown-header {
  color: #a1a1a1;
}

.dark .risk-breakdown-item.peer .breakdown-header {
  color: #818cf8;
}

.dark .risk-breakdown-item.web .breakdown-header {
  color: #60a5fa;
}

.dark .risk-breakdown-item.highest .breakdown-header {
  color: #fbbf24;
}

.dark .info-stat-card {
  background: #121212;
  border-color: #2d2d2d;
}

.dark .info-stat-card:hover {
  background: #1a1a1a;
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.dark .info-stat-value {
  color: #f1f5f9;
}

.dark .info-stat-label {
  color: #94a3b8;
}

.dark .risk-categories {
  border-top-color: rgba(142, 142, 147, 0.18);
}

.dark .risk-category {
  color: #98989d;
}

.dark .matches-column {
  background: #121212;
}

.dark .filter-tab {
  background: #1a1a1a;
  color: #a1a1a1;
  border-color: #2d2d2d;
}

.dark .filter-tab:hover {
  background: #252525;
  color: #cbd5e1;
}

.dark .filter-tab.active {
  background: #6366f1;
  color: white;
  border-color: #6366f1;
}

.dark .match-title {
  color: #f5f5f7;
}

.dark .match-subtitle {
  color: #98989d;
}

.dark .btn-view-match-new {
  background: rgba(58, 58, 60, 0.8);
  border-top-color: rgba(255, 255, 255, 0.06);
  color: #0A84FF;
}

.dark .btn-view-match-new:hover {
  background: rgba(72, 72, 74, 0.8);
}

.dark .match-info-grid {
  background: #121212;
  border-color: #2d2d2d;
}

.dark .info-label {
  color: #94a3b8;
}

.dark .info-value {
  color: #f1f5f9;
}

.dark .match-tokens {
  background: rgba(124, 58, 237, 0.2);
  color: #c084fc;
}

.dark .match-type-label {
  color: #818cf8;
}

.dark .match-lines {
  color: #64748b;
}

.dark .match-subtitle {
  color: #64748b;
}

.dark .match-confidence-badge.high {
  background: rgba(220, 252, 231, 0.2);
  color: #6ee7b7;
  border-color: rgba(134, 239, 172, 0.3);
}

.dark .match-confidence-badge.medium {
  background: rgba(254, 243, 199, 0.2);
  color: #fbbf24;
  border-color: rgba(252, 211, 77, 0.3);
}

.dark .match-confidence-badge.low {
  background: rgba(254, 226, 226, 0.2);
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.3);
}

/* Dark Mode for Old Match Card Styles - neutral black tones */
.dark .match-card {
  background: #1a1a1a;
  border-color: #2d2d2d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .match-card:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.dark .match-header {
  background: #121212;
  border-bottom-color: #2d2d2d;
}

.dark .match-type-badge.peer {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
}

.dark .match-type-badge.web {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.dark .match-type-badge.github {
  background: rgba(236, 72, 153, 0.2);
  color: #f9a8d4;
}

.dark .match-type-badge.stackoverflow {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.dark .match-type-badge.bitbucket {
  background: rgba(59, 130, 246, 0.2);
  color: #7dd3fc;
}

.dark .match-type-badge.gitlab {
  background: rgba(251, 146, 60, 0.2);
  color: #fdba74;
}

.dark .match-type-badge.pastebin {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.dark .match-type-badge.other {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
}

.dark .match-similarity {
  color: #f1f5f9;
}

.dark .match-body {
  color: #cbd5e1;
}

.dark .match-meta {
  color: #94a3b8;
}

.dark .match-meta i {
  color: #6366f1;
}

.dark .match-footer {
  background: #121212;
  border-top-color: #2d2d2d;
}

.dark .btn-view-match {
  background: #1a1a1a;
  border-color: #2d2d2d;
  color: #cbd5e1;
}

.dark .btn-view-match:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: white;
}

.dark .loading-matches,
.dark .empty-matches {
  color: #64748b;
}

.dark .spinner-small {
  border-color: rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
}

/* Dark Mode for Custom Modals */
.dark .custom-modal-overlay {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.dark .custom-modal-content {
  background: rgba(28, 28, 30, 0.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
}

.dark .custom-modal-header {
  background: rgba(44, 44, 46, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .custom-modal-title {
  color: #f5f5f7;
}

.dark .custom-modal-header h3 {
  color: #f5f5f7;
}

.dark .custom-modal-close {
  background: rgba(120, 120, 128, 0.24);
  color: #98989d;
  border-color: transparent;
}

.dark .custom-modal-close:hover {
  background: rgba(120, 120, 128, 0.36);
  color: #f5f5f7;
}

.dark .custom-modal-body {
  background: rgba(28, 28, 30, 0.95);
}

.dark .custom-modal-footer {
  background: rgba(44, 44, 46, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.dark .custom-modal-footer .btn-secondary {
  background: rgba(58, 58, 60, 0.9);
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .custom-modal-footer .btn-secondary:hover {
  background: rgba(72, 72, 74, 0.9);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Dark Mode for Comparison Modal */
.dark .comparison-stats {
  background: rgba(44, 44, 46, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark .comparison-stats .stat-item {
  background: rgba(58, 58, 60, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .comparison-stats .stat-item:hover {
  background: rgba(72, 72, 74, 0.95);
  border-color: rgba(10, 132, 255, 0.4);
}

.dark .comparison-stats .stat-label {
  color: #98989d;
}

.dark .comparison-stats .stat-value {
  color: #f5f5f7;
}

.dark .comparison-panel {
  background: rgba(28, 28, 30, 0.98);
}

.dark .comparison-panel-header {
  background: rgba(44, 44, 46, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
}

.dark .comparison-panel-header .header-left span {
  color: #f5f5f7;
}

.dark .comparison-panel-header i {
  color: #98989d;
}

.dark .comparison-panel-body {
  background: rgba(28, 28, 30, 0.95);
}

.dark .comparison-divider {
  background: rgba(255, 255, 255, 0.1);
}

.dark .comparison-divider:hover {
  background: rgba(10, 132, 255, 0.3);
}

/* Dark Mode for Info Stat Icons */
.dark .info-stat-icon {
  background: #2d2d2d;
  color: #cbd5e1;
}

/* Dark Mode for Match Type Icons (additional) */
.dark .match-type-icon.stackoverflow {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.dark .match-type-icon.bitbucket {
  background: rgba(59, 130, 246, 0.2);
  color: #7dd3fc;
}

.dark .match-type-icon.gitlab {
  background: rgba(251, 146, 60, 0.2);
  color: #fdba74;
}

.dark .match-type-icon.pastebin {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

/* Dark Mode for Evidence Summary Card */
.dark .evidence-summary-card {
  background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
  box-shadow: 0 10px 40px rgba(76, 29, 149, 0.5);
}

.dark .evidence-header {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.dark .evidence-stat-card {
  background: rgba(255, 255, 255, 0.1);
}

.dark .metric-item {
  background: rgba(255, 255, 255, 0.08);
}

.dark .evidence-details {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.dark .finding-item {
  background: rgba(255, 255, 255, 0.08);
}

.dark .recommended-action {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: rgba(255, 255, 255, 0.4);
}

/* Dark Mode for Quick Action Toolbar - neutral black tones */
.dark .quick-action-toolbar {
  background: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .action-btn {
  background: #2d2d2d;
  border-color: #404040;
  color: #cbd5e1;
}

.dark .action-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark .flag-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: #dc2626;
  color: #fca5a5;
}

.dark .clear-btn:hover {
  background: rgba(22, 163, 74, 0.2);
  border-color: #16a34a;
  color: #6ee7b7;
}

.dark .compare-btn:hover {
  background: rgba(37, 99, 235, 0.2);
  border-color: #2563eb;
  color: #93c5fd;
}

.dark .notes-btn:hover {
  background: rgba(217, 119, 6, 0.2);
  border-color: #d97706;
  color: #fcd34d;
}

.dark .export-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
  color: #c4b5fd;
}

.dark .reviewed-btn:hover {
  background: rgba(5, 150, 105, 0.2);
  border-color: #059669;
  color: #6ee7b7;
}

.dark .filter-btn:hover,
.dark .timeline-btn:hover {
  background: #475569;
  border-color: #64748b;
}

/* Dark Mode for Advanced Filters Panel - neutral black tones */
.dark .advanced-filters-panel {
  background: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .filters-header h4 {
  color: #f1f5f9;
}

.dark .close-filters {
  background: #2d2d2d;
  color: #cbd5e1;
}

.dark .close-filters:hover {
  background: #404040;
}

.dark .filter-group label {
  color: #94a3b8;
}

.dark .filter-group select,
.dark .filter-group input[type="number"] {
  background: #121212;
  border-color: #2d2d2d;
  color: #f1f5f9;
}

.dark .filter-value {
  color: #818cf8;
}

.dark .action-btn-small {
  background: #2d2d2d;
  border-color: #404040;
  color: #cbd5e1;
}

.dark .reset-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: #dc2626;
  color: #fca5a5;
}

.dark .apply-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: white;
}

/* Dark Mode for AI Detection Panel */
.dark .ai-detection-panel {
  background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
}

.dark .ai-overall-score {
  background: rgba(255, 255, 255, 0.08);
}

.dark .ai-ring-bg {
  stroke: rgba(255, 255, 255, 0.15);
}

.dark .ai-files-list {
  background: rgba(0, 0, 0, 0.2);
}

.dark .ai-file-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .ai-file-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.dark .ai-file-name {
  color: #e9d5ff;
}

.dark .ai-file-score {
  color: #f1f5f9;
}

/* Dark Mode for Smart Score Panel - neutral black tones */
.dark .smart-score-gauge {
  background: #121212;
}

.dark .gauge-track {
  background: #2d2d2d;
}

.dark .gauge-needle {
  background: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.dark .factor-row {
  background: #121212;
  border-color: #2d2d2d;
}

.dark .factor-label {
  color: #cbd5e1;
}

.dark .factor-bar {
  background: #2d2d2d;
}

/* Dark Mode for Breakdown Icon */
.dark .breakdown-icon {
  background: #2d2d2d;
  color: #cbd5e1;
}